/*
 * Breadcrumb — Figma Component 32 (2623:5782): grape glyph + "Primo vino" › crumbs,
 * active crumb underlined. Measured: 12px/15.4, root #6a1414 600, rest #969696 400, 8px gaps.
 */
.pv-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    /* Figma: crumb ink starts 16px under the 88px header. */
    padding: var(--space-3) 0 var(--space-4);
    font-size: 12px;
    line-height: 15.4px;
    color: var(--sub-pilka-shade);
}

/* Figma Component 32: the home/root crumb ("Primo vino") is dark-red #6a1414 semibold; the rest stay grey. */
.pv-breadcrumbs li:first-child {
    color: #6a1414;
    font-weight: 600;
}

.pv-breadcrumbs li:first-child a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/*
 * Separator — Figma Component 32 "Vector 3"/"Vector 4" (I2623:7177;2156:2656): a 3.5x7 stroked
 * chevron (1px, centred) => 4.5x8 of ink, sitting 3.5px under the crumb line-box top.
 * The '\203A' text glyph could not reach that: measured 3.75x5.75 at 4x DPR, ~2px short and ~2px
 * low. This is the real Figma export (REST /v1/images svg, path verbatim) inlined as a mask so the
 * mark takes currentColor — the crumb trail is re-tinted per surface (e.g. the contact band).
 */
.pv-breadcrumbs li + li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 8px;
    margin-right: var(--space-2);
    /* Raises the 8px box off the baseline. Comp ink band is 3.5-11.5 under the crumb line-box top;
       the mask rasterises to whole device pixels, so the reachable rows are 3-11 (this) or 4-12 —
       0.5px either way. 3-11 keeps the chevron optically on the cap band, which is what the comp
       shows; 4-12 parks it on the baseline, i.e. the "sits too low" look that was reported. */
    vertical-align: 0.75px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.366954 0.366954L4 4L0.366954 7.63305' stroke='%23000' stroke-width='1.03801'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='5' height='8' viewBox='0 0 5 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.366954 0.366954L4 4L0.366954 7.63305' stroke='%23000' stroke-width='1.03801'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pv-breadcrumbs a {
    color: inherit;
    text-decoration: none;
}

.pv-breadcrumbs a:hover,
.pv-breadcrumbs a:focus-visible {
    text-decoration: underline;
}

/*
 * Figma: the active crumb keeps the grey of the trail — only the underline marks it.
 * The rule MUST sit on the inner span/a, not on the <li>: on the <li> the decoration also paints
 * across the ::before separator box (measured: a stray 6px run at x383-388 on /prisijungti, before
 * the real underline at 396-455). Figma "Vector 24" is 103px starting exactly at the text ink
 * (x=482 = the "Active breadcrumb" ink x) and is one solid line, hence skip-ink: none.
 * Offset: comp underline top sits 15px under the crumb line-box top, ~2.9px under the baseline.
 */
.pv-breadcrumbs [aria-current='page'] > span,
.pv-breadcrumbs [aria-current='page'] > a {
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-offset: 3px;
}