/*
 * 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;
    /* Component 32 (2623:5782): 20px between crumb TEXT BOXES with the 5px-painted chevron inside
       it — 7.5 + 5 + 7.5. The chevron's margin-right carries the other half below. */
    gap: 7.5px;
    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;
    /* 12/15.36, letter-spacing 0, trail #969696 — the comp's OWN grey (raw --sub-pilka). It reads
       2.8:1 on this background (below AA); kept anyway because the client asked for the exact
       design colours — recorded in design/CLIENT-DECISIONS.md P13. */
    line-height: 15.36px;
    letter-spacing: 0;
    color: var(--sub-pilka);
}

/* Figma Component 32: the home/root crumb ("Primo vino") is dark-red #6a1414 semibold; the rest stay grey. */
/* Flex, not inline flow: the template's newline between <li> and <a> collapsed to a ~3.4px space
   GLYPH before every chevron, stretching the comp's 20px crumb gap to 23.4 (whitespace-only text
   makes no flex item, so flex simply drops it). Centring also places the 8px chevron at 3.68 under
   the 15.36 line-box top — the comp draws it at 3.5, so this replaces the vertical-align hack. */
.pv-breadcrumbs li {
    display: flex;
    align-items: center;
}

.pv-breadcrumbs li:first-child {
    color: #6a1414;
    font-weight: 600;
}

.pv-breadcrumbs li:first-child a {
    display: inline-flex;
    /* Comp: the 16px grape and the 15.36px text line box sit BOTTOM-FLUSH (mark 4216->4232.1,
       text box 4217->4232) — the mark pokes 1px above the text, never below. align-items:center
       split that overhang across both ends, which is the "not centred" look that was reported. */
    align-items: flex-end;
    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;
    flex: none;
    margin-right: 7.5px;
    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;
}