/*
 * Catalog listing — catalog.json (PLAN §6.3). Category hero band, subcategory tiles,
 * toolbar (filter chips + sort), 2-col product grid, pagination (desktop numbered + mobile
 * load-more), gift-sets cross-sell + SEO block reuse the homepage/product section styles.
 */
.pv-page-hero {
    /* --ryski-raudona-band (not raw --ryski-raudona): AA fix for .pv-page-hero__body 16px
       copy, see tokens.css comment — --ryski-raudona is 4.0:1 with --neutrali text, fails 4.5:1 AA. */
    background: var(--ryski-raudona-band);
    color: var(--neutrali);
    /* Figma 2156:2253: 471px band, heading top at 132px from band top, SS deco bottom-flush. */
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    min-height: 471px;
    padding-top: 132px;
    padding-bottom: 40px;
}

/* NOT positioned: the deco must resolve against .pv-page-hero (the full 471px band, full
   width) — not this 1140px inner box — so bottom:0 reaches the band bottom and right lands on
   the content gutter. Text is lifted above the deco via its own z-index below. */
.pv-page-hero__text {
    position: relative;
    z-index: 1;
}

.pv-page-hero__heading {
    font-size: clamp(32px, 4.5vw, 56px);
    line-height: 1;
    font-weight: 300;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}

/* Figma: the category name (last line) is bold-italic, matching the sitewide heading motif. */
.pv-page-hero__heading em,
.pv-page-hero__heading i {
    font-style: italic;
    font-weight: 700;
}

.pv-page-hero__body {
    max-width: 462px;
    margin-top: var(--space-3);
}

/* SS monogram deco — bottom-flush with the band, right-aligned to the 1140 content edge (Figma
   deco x935→1436 ≈ content right gutter), mirroring the home hero deco pattern. */
.pv-page-hero__deco {
    position: absolute;
    right: max(var(--container-pad), calc(50vw - var(--container-max) / 2));
    bottom: 0;
    z-index: 0;
}

.pv-page-hero__deco img {
    width: 500px;
    max-width: 42vw;
    height: auto;
}

/* Bottom margin is NOT the comp's 64: the comp measures tiles-bottom → the heading's CAP TOP
   (node 2370:7778 bottom y777 → heading 2156:2256 y841; Figma reports text boxes as ink bounds,
   which is why that 56px heading is only 40 tall). The heading's 1.28 line box adds 14.26px of
   leading above the caps, so the margin carries 64 − 14.26. Measured, not derived: the browser's
   own cap height for the rendered font, via canvas actualBoundingBoxAscent. */
.pv-subcategory-tiles {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-5);
    margin-bottom: 49.74px;
}

/* Breadcrumb + tiles rhythm shared by all three category pages (catalog, gift sets, gift coupons):
   breadcrumb 16px below the band, tiles 32px (var(--space-5)) below it — Figma 2370:5878, tiles at
   frame-y 633. Applied to BOTH hero variants from ONE rule so the breadcrumb + tiles land at identical
   Y on every page and never shift when toggling between them (the band's own height is fixed at 471px). */
.pv-category-subnav .pv-breadcrumbs ol {
    padding-block: 16px 0;
}

/* 144px-tall full pills (Figma Group 5165, node 2370:7778): large line-art icon left-aligned
   beside a two-line label, ~60px left inset, ~24px icon→label gap. */
.pv-subcategory-tiles__tile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-4);
    flex: 1;
    height: 144px;
    padding-inline: 60px;
    border-radius: 104px;
    background: var(--neutrali-pilka);
    color: var(--juoda);
    text-decoration: none;
    font-size: 20px;
    line-height: 1.1;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease;
}

/* Gentle hover feedback on the inactive tiles (active tile keeps its red). */
.pv-subcategory-tiles__tile:not(.pv-subcategory-tiles__tile--active):hover {
    background: #e7e0dd;
}

.pv-subcategory-tiles__icon {
    flex: none;
    height: 64px;
    width: auto;
}

.pv-subcategory-tiles__tile--active {
    /* --ryski-raudona-band (not raw --ryski-raudona): AA fix — this 20px/400 label isn't "large
       text", and --balta-on-#ee2737 is only 4.2:1, failing 4.5:1 AA (axe serious). */
    background: var(--ryski-raudona-band);
    color: var(--balta);
}

/* Icons ship dark (#1e1e1e stroke) for the inactive tiles; invert to white on the active tile. */
.pv-subcategory-tiles__tile--active .pv-subcategory-tiles__icon {
    filter: brightness(0) invert(1);
}

/* 40px = Figma rule bottom (2623:5352, y 1029) → first card top (1069); the mobile comp keeps the
   same rhythm (rule 1357 → card 1398). Was --space-6 (48px), measured WITHOUT the rule below, which
   put the grid 17px above the comp once the 25px of rule box is accounted for. */
.pv-catalog-toolbar {
    margin-bottom: 40px;
}

/* The form's bottom edge IS the sort pill's bottom edge (both columns are bottom-aligned), so the
   Figma rule — 2623:5352 "Rectangle 2946", 1px #e4dedb, 24px under the pill, spanning the container
   (Design-QA catalog y≈974) — rides this element's padding-bottom + border-bottom. The mobile comp
   (2623:10542) keeps the same 24px gap but takes the rule full-bleed; see the @media below. */
.pv-catalog-toolbar__form {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    /* Figma 2156:2253: heading ink bottom 881 -> "Rūšys" ink top 945 = 64px. Measured 36px here
       (both cap-band to cap-band, so the comparison is like-for-like); the 56px heading's own
       half-leading eats the rest, hence 44 rather than a bare 64. */
    margin-top: 52px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--sub);
}

/* Figma 2156:2253: "Rūšys" label sits ABOVE the chip row (not inline), matching "Rikiavimas". */
.pv-filter-chips {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.pv-filter-chips__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pv-filter-chips__label {
    font-size: 12px;
    /* --sub-pilka-shade (not raw --sub-pilka): AA fix, see tokens.css comment —
       --sub-pilka is 2.8:1 on the page's --neutrali background, fails 4.5:1 AA. */
    color: var(--sub-pilka-shade);
}

.pv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--sub);
    border-radius: var(--radius-pill);
    background: var(--balta);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.pv-filter-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pv-filter-chip__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
}

.pv-filter-chip--raudonas .pv-filter-chip__dot { background: #da3d40; }
.pv-filter-chip--baltas .pv-filter-chip__dot { background: #f3e695; }
.pv-filter-chip--rozinis .pv-filter-chip__dot { background: #f0bab7; }
.pv-filter-chip--putojantis .pv-filter-chip__dot { background: #f8e986; }

.pv-filter-chip--active,
.pv-filter-chip:has(input:checked) {
    background: var(--sodri-raudona);
    border-color: var(--sodri-raudona);
    color: var(--balta);
}

.pv-filter-chip:hover {
    border-color: var(--sodri-raudona);
}

/* Figma: "Rikiavimas" label above a ~170px bordered dropdown box with the chevron on the right. */
.pv-sort-select {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 14px;
}

.pv-sort-select__label {
    font-size: 12px;
    /* --sub-pilka-shade (not raw --sub-pilka): AA fix, see tokens.css comment —
       --sub-pilka is 2.8:1 on the page's --neutrali background, fails 4.5:1 AA. */
    color: var(--sub-pilka-shade);
}

.pv-sort-select__control {
    position: relative;
    display: flex;
    align-items: center;
}

/* Figma "Group 4373" (2623:5348, same instance on the gifts page as Group 5169): a 170x42 PILL
   (r32) with the value 24px in from the left and the chevron at x=1411 — not the 8px-radius
   50px-tall box we had (Design-QA catalog y≈974 / gifts y≈1756). */
.pv-sort-select select {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    /* Client note #4: the Figma pill is 170px, but "Brangiausi viršuje" is clipped in it — the pill
       now grows to its widest option and keeps 170px as the floor. */
    width: auto;
    min-width: 170px;
    height: 42px;
    border: 1px solid var(--sub);
    border-radius: 32px;
    padding: 0 40px 0 var(--space-4);
    font-weight: 600;
    background: var(--balta);
}

/* Chevron — Figma "Vector 3" (catalog 2623:5351 / gifts 2623:6503, one component, ONE rule here so
   the two pages can never drift again): a 7x3.5 centreline stroked 1px on centre, i.e. a PAINTED box
   of 8x4.57, with its right edge 16px in from the pill's right edge and vertically centred.
   The export's viewBox IS its ink box (-0.16 -0.16 7.32 4.18), so the box below is the painted size —
   NOT 7x3.5, which would letterbox the 1.751 viewBox into a 2.0 box and paint only 6.1px of chevron. */
.pv-sort-select__control img {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 4.57px;
    transform: translateY(-50%);
    pointer-events: none;
}

.pv-product-grid__grid--catalog {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
}

/* Pagination — Figma 2623:5336 "Group 4375" (Design-QA y≈3627): the "Kitas puslapis" pill is
   centred in the 1140 container (x 774→955 on the 1728 frame) and the page numbers are
   right-flush at 1434. The three-column grid holds the pill on the container centre whatever
   the page count is, and keeps it centred when the numbers group is missing. */
.pv-pagination--desktop {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    /* 40px below the last card row — the grid's own row gap (Figma 3569 → 3609). */
    margin-top: 40px;
}

.pv-pagination--mobile {
    display: none;
    justify-content: center;
    /* mobile comp 2623:10487: last card 6953 → "Rodyti daugiau" 6993 = 40px */
    margin-top: 40px;
}

/* Frame 3 — 181x48 outline pill: 24px inset, r32, label + 8px gap + the Vector 23 arrow. */
.pv-pagination--desktop .pv-pagination__next {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 48px;
    padding-inline: var(--space-4);
    border: 1px solid var(--sub-pilka);
    border-radius: 32px;
    font-size: 14px;
    /* Text 2623:5339 — 14/400 uppercase, ls .7 (the site's button label recipe). */
    font-weight: 400;
    letter-spacing: .7px;
    text-transform: uppercase;
    text-decoration: none;
    /* --sub-pilka-shade (not the design's raw --sub-pilka): AA fix, see tokens.css comment —
       --sub-pilka is 2.8:1 on the page's --neutrali background, fails 4.5:1 AA. */
    color: var(--sub-pilka-shade);
}

/* Same hover feedback the .btn pills give (this one can't reuse .btn — see the block header). */
.pv-pagination--desktop .pv-pagination__next:hover {
    opacity: .9;
}

.pv-pagination__pages {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Numbers are bare 14px glyphs on a 16px pitch — the min-width/padding/radius resets undo
   account.css's 36px circles (see the block header). */
.pv-pagination--desktop .pv-pagination__page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 32px;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    letter-spacing: .7px;
    text-decoration: none;
    /* AA shade of the design's --sub-pilka, same reason as the pill label above. */
    color: var(--sub-pilka-shade);
}

/* Rectangle 2950 — the active number sits in a 33x32 --neutrali-pilka chip. */
.pv-pagination--desktop .pv-pagination__page--active {
    width: 33px;
    border-radius: var(--radius-input);
    background: var(--neutrali-pilka);
    font-weight: 700;
    color: var(--juoda);
}

.pv-empty-state {
    padding: var(--space-7) 0;
    text-align: center;
    color: var(--sub-pilka);
}

@media (max-width: 768px) {
    .pv-page-hero__inner {
        grid-template-columns: 1fr;
    }

    /* iOS Safari zooms the page on focus for any control under 16px and never zooms back out.
       The pill keeps its 42px height — only the value grows. Shared with the gifts page. */
    .pv-sort-select select {
        font-size: 16px;
    }

    /* Mobile comp 2623:10487: the band is 428px tall (pixel scan y 131→558.5) with the heading
       cap 64.5px below its top — the desktop 471/132 metrics overshoot at 360px. */
    .pv-page-hero {
        min-height: 428px;
        padding-top: 60px;
    }

    /* Comp line pitch 39.5px, cap height 28.5px → 40px/40px; the desktop clamp floors at 32px.
       Tracking is measured, not scaled from the desktop 2.8px: the comp's longest line
       ("ASORTIMENTAS") inks 326.5px inside the 328px column, and Inter — our licensed stand-in for
       the design's Aktiv Grotesk — runs wider, so 2.8px here overflows the band by 27px. */
    .pv-page-hero__heading {
        font-size: 40px;
        line-height: 40px;
        letter-spacing: .5px;
    }

    /* The 360px comp bleeds the SS monogram off the right edge (deco bbox x 206→358 of 360);
       the band already clips it. */
    .pv-page-hero__deco {
        right: 0;
    }

    /* The 360 comp keeps the desktop rule — tiles bottom (2431:5666 y864+96) → heading cap top
       (2431:5475 y1024) is the same 64. The number differs from desktop only because the mobile
       heading's smaller line box leaves 5.62px of leading above the caps instead of 14.26. */
    .pv-subcategory-tiles {
        flex-direction: column;
        gap: var(--space-3);
        margin-bottom: 58.38px;
    }

    /* Stacked full-width pills: tighten the desktop 60px inset so the icon + label fit at 375px.
       flex:none — the desktop `flex: 1` (basis 0) wins over height in a column flex row and
       collapses the pill to its content. */
    .pv-subcategory-tiles__tile {
        flex: none;
        height: 96px;
        padding-inline: var(--space-4);
    }

    .pv-subcategory-tiles__icon {
        height: 48px;
    }

    /* Mobile comp 2623:10542: the same 1px rule sits 24px under the pill but goes FULL-BLEED
       (x=0, w=360) instead of container-inset — negative margin + matching padding keeps the
       controls on the container grid while the border reaches both screen edges. */
    .pv-catalog-toolbar__form {
        flex-direction: column;
        align-items: flex-start;
        margin-inline: calc(var(--container-pad) * -1);
        padding-inline: var(--container-pad);
    }

    .pv-product-grid__grid--catalog {
        grid-template-columns: 1fr;
    }

    /* Doubled class to outrank the desktop grid rule above (same account.css reason). */
    .pv-pagination--desktop {
        display: none;
    }

    .pv-pagination--mobile {
        display: flex;
    }
}

/* Out-of-stock quick-add (V9) — muted + inert; the card-hover red band still flips it white. */
.pv-product-card__quick-add.pv-product-card__quick-add--sold-out {
    color: var(--sub-pilka);
    border-color: var(--sub);
    cursor: default;
}

.pv-product-card__quick-add--sold-out:hover {
    transform: none;
}

.pv-product-card__quick-add--sold-out img {
    opacity: .45;
}

/* Low-stock note (V9, "Liko N vnt.") — small muted line under the price. */
.pv-product-card__low-stock {
    margin-top: var(--space-1);
    font-size: 13px;
    /* #616161 (not --sub-pilka-shade #727272 = 4.06:1): AA fix — 13px text on the #f0ebe9 card
       needs 4.5:1; #616161 clears it at 5.3:1 while staying muted. */
    color: #616161;
}

@media (hover: hover) {
    .pv-product-card:hover .pv-product-card__low-stock {
        color: var(--balta);
    }
}

/* ---- Styled sort dropdown (select_menu_controller) ---------------------- */
/* Until the controller connects, only the native select exists — so JS off, or a boot error, still
   leaves a working control rather than an empty pill. */
.pv-sort-select__trigger,
.pv-sort-select__menu {
    display: none;
}

.pv-sort-select.is-enhanced select {
    /* Not display:none — the select stays a real, labelled form control carrying the value. */
    position: absolute;
    width: 1px;
    /* The pill rule above sets min-width: 170px, which would hold the hidden control at 170. */
    min-width: 0;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Same pill geometry the select had (Figma "Group 4373": 170x42 r32, value 24 in, chevron 16 from
   the right), so the toolbar's rhythm is untouched. */
.pv-sort-select.is-enhanced .pv-sort-select__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    box-sizing: border-box;
    min-width: 170px;
    height: 42px;
    padding: 0 var(--space-3) 0 var(--space-4);
    border: 1px solid var(--sub);
    border-radius: 32px;
    background: var(--balta);
    color: var(--juoda);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease;
}

.pv-sort-select.is-enhanced .pv-sort-select__trigger:hover {
    border-color: var(--juoda);
}

.pv-sort-select.is-enhanced .pv-sort-select__trigger img {
    transition: transform .2s ease;
}

.pv-sort-select.is-enhanced .pv-sort-select__trigger[aria-expanded="true"] img {
    transform: rotate(180deg);
}

/* The panel the OS menu never let us draw: floating card, 8px clear of the pill. */
.pv-sort-select.is-enhanced .pv-sort-select__menu {
    display: block;
    position: absolute;
    /* Rectangle 42 (pill, 9610..9780) vs Rectangle 13 (panel, 9584..9780): the panel RIGHT-ALIGNS
       with the pill and overhangs 26px to the LEFT; pill bottom 5116 -> panel top 5121 = 5px. */
    top: calc(100% + 5px);
    left: auto;
    right: 0;
    z-index: var(--z-dropdown, 40);
    /* Designer-measured (2026-08-13 inspect badges on the selected pill): highlight 156x30 at
       16 from the panel's left, 24 from its right, 24 from its top, 90 from pill bottom to panel
       bottom. With three 30px rows 4px apart (ink pitch 34) the panel closes at exactly
       24 + 3*30 + 2*4 + 22 = 144 — the node's own height. */
    /* min-, not width: 196 is the node's width UNDER AKTIV GROTESK, whose "Brangiausi viršuje"
       runs 124px; the substitute font runs it 129.75, so a hard 196 would push the longest label
       out of its own highlight pill. The measured insets stay exact and the panel hugs — the
       moment the licensed font lands this renders at exactly 196. */
    min-width: 196px;
    margin: 0;
    padding: 24px 24px 22px 16px;
    list-style: none;
    background: var(--balta);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-panel);
    animation: pv-fade-in .18s ease-out;
}

.pv-sort-select.is-enhanced .pv-sort-select__menu[hidden] {
    display: none;
}

.pv-sort-select__option {
    /* The 156x30 pill: text 16 in from ITS left edge (panel 16 + option 16 = the ink's 32). */
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-radius: var(--radius-pill);
    font-size: 14px;
    line-height: 17.92px;
    letter-spacing: .7px;
    font-weight: 400;
    color: var(--juoda);
    white-space: nowrap;
    cursor: pointer;
}

/* 30px rows on the comp's 34px ink pitch. */
.pv-sort-select__option + .pv-sort-select__option {
    margin-top: 4px;
}

/* Hover and keyboard highlight are the same affordance — the listbox keeps DOM focus on the
   trigger (ARIA pattern), so .is-active is the only cue a keyboard user gets. */
/* --sub (#e4dedb), not --neutrali-pilka: the comp's highlight pill is clearly the darker warm
   grey. UNCONFIRMED against the node itself — the highlight rect times out over the bridge; if
   the designer's hex differs, this one value is the only thing to swap. */
.pv-sort-select__option:hover,
.pv-sort-select__option.is-active {
    background: var(--sub);
}

/* No bold on the selected row: in the comp every option in the open menu is Regular — only the
   trigger's own label is SemiBold. The highlight alone marks the current choice. */
.pv-sort-select__option[aria-selected="true"] {
    background: var(--sub);
}