/*
 * 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;
}

.pv-subcategory-tiles {
    display: flex;
    gap: var(--space-4);
    margin-block: var(--space-5);
}

/* 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);
    margin-top: var(--space-4);
    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;
    }

    .pv-subcategory-tiles {
        flex-direction: column;
        gap: var(--space-3);
    }

    /* 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);
    }
}