/*
 * Product card — homepage.json components.productCard / catalog.json productGrid (shared,
 * cross-referenced spec). Figma geometry (Component 21/22/23/26/29/30, node family
 * 2156:255x/258x/264x): card component 558×595, painted background inset 40px from the top
 * (555 tall) so the bottle neck overlaps above the card by 34px; bottle image 155×549 at
 * x=40,y=6; quick-add is a 142×42 pill (icon + "Į krepšelį" label) at x=376,y=458, NOT a
 * top-right icon-only circle; badge at 16px top-from-bg/16px right.
 */
.pv-product-card {
    position: relative;
    width: 100%;
    height: 595px;
    /* min-width: 0 — the card is a CSS grid item; without this its default min-width:auto
       lets content force the 1fr grid track wider than the container on mobile, causing
       horizontal page overflow. */
    min-width: 0;
    color: var(--juoda);
    cursor: pointer;
    /* .35s to match the backdrop's background-color tween — the two halves of the hover are one
       gesture and any difference reads as the text racing ahead of the panel. */
    transition: color .35s ease;
}

/* Whole card is clickable: the media link's ::after is stretched over the entire card
   (positioned against .pv-product-card) at z-index 2, and the body (quick-add + CTA) sits
   ABOVE it at z-index 3 so its controls stay independently clickable — the overlay above
   the body was swallowing every quick-add click (deploy-gate 2026-07-28). */
.pv-product-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* Keyboard focus ring on the whole-card link (the ::after is the visible hit area). */
.pv-product-card__media:focus-visible {
    outline: none;
}

.pv-product-card__media:focus-visible::after {
    outline: 2px solid currentColor;
    outline-offset: -4px;
}

.pv-product-card__bg {
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--neutrali-pilka);
    /* Figma "Rectangle 46" carries NO cornerRadius on any of the three Component 21 variants — the
       panel is square. The 16px here came from an earlier Design-QA note; Figma wins. */
    border-radius: 0;
    z-index: 0;
    /* Grey by default; animates to red on hover (see the @media (hover) block below). */
    transition: background-color .35s ease;
}

/* Hover reveal: the grey card animates to red and text + CTA (arrow included, via currentColor) turn white.
   Scoped to real hover-capable pointers so a tap on a touch device doesn't stick a card red.
   --ryski-raudona-band (not raw --ryski-raudona): AA fix — --balta-on-#ee2737 is 4.2:1 for the
   14px CTA link, fails 4.5:1 AA; the band shade clears it. */
@media (hover: hover) {
    .pv-product-card:hover .pv-product-card__bg {
        background: var(--ryski-raudona-band);
    }

    .pv-product-card:hover {
        color: var(--balta);
    }

    .pv-product-card:hover .pv-product-card__cta {
        color: var(--balta);
    }

    /* Design-QA y≈1550 (Component 22): on the red card the pill is SOLID white with red
       icon + label — not the comp's white outline on red. */
    .pv-product-card:hover .pv-product-card__quick-add {
        border-color: var(--balta);
        background: var(--balta);
        color: var(--ryski-raudona-shade);
    }

}

@media (prefers-reduced-motion: reduce) {
    .pv-product-card,
    .pv-product-card__bg,
    .pv-product-card__cta,
    .pv-product-card__cta-arrow {
        transition: none;
    }
}

/* Featured variant (Figma 2156:255x): the card panel is painted red with white copy — the same
   treatment the default card only gets on :hover. Homepage top-left slot + any catalog featured
   slot. --ryski-raudona-band mirrors the hover state's AA-safe red shade. */
.pv-product-card--featured {
    color: var(--balta);
}

.pv-product-card--featured .pv-product-card__bg {
    background: var(--ryski-raudona-band);
}

.pv-product-card--featured .pv-product-card__cta {
    color: var(--balta);
}

/* On the always-red featured card the quick-add pill is solid white, icon + label red
   (Design-QA y≈1550, Component 22). */
.pv-product-card--featured .pv-product-card__quick-add {
    border-color: var(--balta);
    background: var(--balta);
    color: var(--ryski-raudona-shade);
}

/* Compact variant — Figma "Component 64" (2623:5840) inside Group 4407: a 364x328 card used by
   the related-wines carousel (the 558x595 anatomy above is the catalog/home card). Panel inset
   24px from the top, 86x304 bottle at x=24, text column at x=148 (192 wide), smaller type. */
@media (min-width: 769px) {

.pv-product-card--compact {
    height: 328px;
}

.pv-product-card--compact .pv-product-card__bg {
    top: 24px;
    /* Figma Component 64 "Rectangle 46" carries NO cornerRadius — the compact panel is SQUARE,
       unlike the 16px --radius-card the catalog card uses (Design-QA R4). */
    border-radius: 0;
}

.pv-product-card--compact .pv-product-card__media img {
    top: 0;
    left: 24px;
    width: 86px;
    height: 304px;
}

.pv-product-card--compact .pv-product-card__body {
    top: 24px;
    left: 148px;
    right: 24px;
    /* Figma Component 64 pins the name node BOTTOM-aligned (textAlignVertical: BOTTOM), last-line
       baseline 99px off the panel bottom — so a 2-line wine name grows UPWARD into the free space
       above instead of pushing into the pinned price. Top-anchoring it (padding-top:154px) is what
       forced the max-height clip that swallowed the second line (Design-QA R4).
       95 = 99 − the 4px descender+half-leading below the last baseline at 16/20. */
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: 95px;
}

.pv-product-card--compact .pv-product-card__badge {
    top: 40px;
}

/* NO max-height: the block is bottom-anchored above the pinned price (see __body), so it can grow
   from the comp's 3 lines to 4 without touching it. A 60px cap here made the flex column SHRINK the
   wine-name span to one line — "PRIMITIVO DI MANDURIA" rendered as "PRIMITIVO DI" (Design-QA R4). */
.pv-product-card--compact .pv-product-card__name {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: .8px;
}

.pv-product-card--compact .pv-product-card__price {
    font-size: 14px;
    letter-spacing: .7px;
}

/* Price and CTA are pinned to the card bottom (Figma card+245 / card+295) — the name above them
   varies in line count, and in this variant it must not move them. */
.pv-product-card--compact .pv-product-card__price-row {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 66px;
    margin-top: 0;
}

.pv-product-card--compact .pv-product-card__cta {
    bottom: 16px;
    color: var(--juoda);
    font-size: 12px;
    letter-spacing: .6px;
}

}

.pv-product-card__media {
    /* Static (NOT absolute): an absolutely-positioned link is the containing block for its own
       ::after, so inset:0 would cover only the bottle. Static makes the stretched ::after resolve
       against .pv-product-card and cover the WHOLE card. The bottle position moves to the <img>. */
    position: static;
    display: block;
}

.pv-product-card__media img {
    position: absolute;
    top: 6px;
    left: 40px;
    z-index: 1;
    width: 155px;
    height: 549px;
    object-fit: contain;
}

.pv-product-card__body {
    /* Text block on the right of the card (Figma x=259). A flex column vertically centred in the
       painted area (top:40px..bottom) so the wine name can be 1–4 lines without clipping the
       appellation, while the CTA stays anchored near the bottom. */
    position: absolute;
    top: 40px;
    bottom: 0;
    left: 259px;
    right: 40px;
    /* 3, not 1: must sit ABOVE the media link's inset-0 overlay (z-index 2) or the quick-add
       pill and CTA are unclickable — the overlay swallowed the click (deploy-gate 2026-07-28).
       pointer-events: none keeps the text area click-through, so the whole card still navigates;
       only the real controls below opt back in. */
    z-index: 3;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    /* Figma Component 21: the price row sits 97px off the painted panel's bottom and the name
       stacks UP from it — centring floated the whole block ~100px too high (Design-QA y≈1514). */
    justify-content: flex-end;
    padding-bottom: 97px;
    /* min-width: 0 — without this the CTA link's min-content width can force the parent card,
       and the grid track above it, wider than available space. */
    min-width: 0;
}

/* The card's actual controls opt back into pointer events (see the body rule above). */
.pv-product-card__body a,
.pv-product-card__body button,
.pv-product-card__body form {
    pointer-events: auto;
}

.pv-product-card__badge {
    position: absolute;
    top: 56px;
    right: var(--space-3);
    z-index: 1;
    font-size: 14px;
    letter-spacing: .7px;
    text-align: right;
    text-transform: uppercase;
}

.pv-product-card__quick-add {
    /* In the flow of .pv-product-card__price-row (to the right of the price) — NOT absolutely
       pinned, so it tracks the price instead of drifting when the wine name runs 1 vs 2 lines. */
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: 142px;
    height: 42px;
    padding: 0 var(--space-3);
    box-sizing: border-box;
    border: 1px solid var(--sub-pilka);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--juoda);
    font-size: 14px;
    letter-spacing: .7px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s ease, border-color .35s ease, background-color .35s ease, color .35s ease;
}

.pv-product-card__quick-add:hover {
    transform: scale(1.05);
}

/* Bag glyph masked in currentColor so the pill's colour drives icon AND label together —
   needed because the red-card treatment (below) flips both to red on a white fill. */
.pv-product-card__quick-add-icon {
    flex: none;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url("../../images/figma/icon-cart-bag-plus-dark-16-q3Pml95.svg") center / contain no-repeat;
    mask: url("../../images/figma/icon-cart-bag-plus-dark-16-q3Pml95.svg") center / contain no-repeat;
}

.pv-product-card__name {
    display: flex;
    flex-direction: column;
    font-size: 32px;
    line-height: 35px;
    letter-spacing: 1.6px;
    font-weight: 300;
    text-transform: uppercase;
}

.pv-product-card__wine-name {
    /* Clamp the emphasised name to 2 lines so an unusually long product name can't push the card
       out of shape; the brand line + appellation always render in full above/below it. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: 700;
    font-style: italic;
}

/* Price + quick-add on one row (Figma: button right of price). space-between pins the price left
   and the button hard-right; align-items:center keeps the 42px pill vertically centred on the price. */
.pv-product-card__price-row {
    margin-top: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pv-product-card__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

.pv-product-card__cta {
    /* Anchored near the card bottom (Figma y≈529); the name block above it stays vertically
       centred, so this position holds regardless of how many lines the name takes. Spans the full
       text column so the arrow right-aligns to the card edge (Figma space-between). */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    /* --ryski-raudona-shade (not raw --ryski-raudona): AA fix, see tokens.css comment —
       --ryski-raudona is 3.6:1 on --neutrali-pilka card bg, fails 4.5:1 AA. */
    color: var(--ryski-raudona-shade);
    font-size: 14px;
    letter-spacing: .7px;
    text-decoration: none;
    text-transform: uppercase;
    transition: color .35s ease;
}

/* Trailing arrow is VISIBLE AT REST on every variant — Figma draws it in the DEFAULT state of the
   catalog card (Component 21, grey panel), the home teaser cards (2623:5125 Vector 15/16/17/18) and
   the compact card (Component 64 Vector 23) alike; only its colour flips on hover (Design-QA H9).
   Hiding it until hover also parked it 6px left of the comp's 40px card inset. */
.pv-product-card__cta-arrow {
    flex: none;
    width: 24px;
    height: 13px;
    background-color: currentColor;
    -webkit-mask: url("../../images/figma/icon-arrow-right-ee2737-24x13-Y9-flA3.svg") center / contain no-repeat;
    mask: url("../../images/figma/icon-arrow-right-ee2737-24x13-Y9-flA3.svg") center / contain no-repeat;
    /* currentColor is what the hover treatment flips — animate it on the CTA label's timing. */
    transition: background-color .35s ease;
}

@media (max-width: 768px) {
    /* Mobile 360px frames (Figma "Pagrindinis 360px" 2623:10388 / "Kategorija" 2623:10487):
       a genuinely different anatomy, not a scaled 558×595 — card 328×271 with the panel inset
       40px from the top so the 69×245 bottle overlaps above it, bottle at x=24 on the LEFT and
       the text column beside it at x=110, icon-only 52×42 quick-add on the price row.
       min-height (not height): an extra wrapped name line must grow the card, not overflow it. */
    .pv-product-card {
        min-height: 271px;
        height: auto;
    }

    .pv-product-card__bg {
        top: 40px;
    }

    .pv-product-card__media img {
        top: 0;
        left: var(--space-4);
        right: auto;
        width: 69px;
        height: 245px;
    }

    .pv-product-card__badge {
        /* inside the painted panel (which starts 40px down), not floating on the page above it */
        top: calc(40px + var(--space-3));
    }

    .pv-product-card__body {
        /* In FLOW here, unlike the desktop absolute block: a 2–3 line wine name has to grow the
           card. While this was absolutely positioned it grew upward instead and printed itself
           through the badge, and min-height on the card could not help because an absolutely
           positioned body contributes no height. position:relative keeps the z-index that lifts
           the quick-add and CTA above the media link's overlay. */
        position: relative;
        inset: auto;
        /* The comp's own ink positions inside the 328x271 card (2431:5742): first name cap top
           at y96, price cap top at y221, quick-add 205..247, panel 40..271 — i.e. 24px of air
           under the button. top is 91.1 because the 18px/24 line box carries 4.9px above the
           caps; left clears the bottle (24px inset + 69px wide) with the frame's 16px gap. */
        margin: 91.1px var(--space-4) var(--space-4) 110px;
        padding-bottom: 0;
    }

    /* CATALOG cards only, like the read-more rule above: column + min-height so the price row can
       be pinned to the BOTTOM (below) rather than spaced off the end of the name. 155.9 = the
       comp's 271 card less this block's own 91.1 top and 24 bottom, so a card whose name is short
       still closes at 271. Left off the compact carousel cards on the product page, whose shell is
       288x367 — the number is this comp's, not theirs. */
    .pv-product-grid__grid--catalog .pv-product-card__body {
        display: flex;
        flex-direction: column;
        min-height: 155.9px;
    }

    .pv-product-card__price-row {
        margin-top: 18.5px;
    }

    /* Bottom-anchored on the CATALOG card, NOT a fixed gap under the name. The comp draws the
       price caps at y221 and the button at 205..247 against a 271-tall card, and that has to hold
       however the name wraps — at 390 the wider column takes the name to 3 lines, and the fixed
       gap above floated the price and button a whole line up the card (client, 2026-08-14). With
       auto they stay put and the name grows downward into the slack instead. The fixed gap stays
       for the carousel cards, which have no comp of their own at this size. */
    .pv-product-grid__grid--catalog .pv-product-card__price-row {
        margin-top: auto;
    }

    .pv-product-card__cta {
        position: static;
        margin-top: var(--space-2);
        /* label + arrow read as one control; the desktop space-between parked the arrow 43px
           away across the narrow mobile column */
        justify-content: flex-start;
        min-height: 44px;
    }

    /* CATALOG cards only. The two mobile comps split here: a catalog card (2431:5742 /
       2431:5743) is bottle + name + price + quick-add and carries NO read-more link, while a
       home card (2431:4434) is bottle + name + "Plačiau apie vyną" and carries no price or
       quick-add at all. Scoped to the catalog grid so hiding it here cannot strip the link from
       the home cards, which are the same component. The media link still opens the wine. */
    .pv-product-grid__grid--catalog .pv-product-card__cta {
        display: none;
    }

    /* Mobile quick-add is icon-only (frame: 52×42 pill, bag+plus centred) — right of the price. */
    .pv-product-card__quick-add {
        width: 52px;
        height: 42px;
        padding: 0;
        justify-content: center;
    }

    .pv-product-card__quick-add-label {
        display: none;
    }

    .pv-product-card__name {
        max-height: none;
        font-size: 18px;
        line-height: 24px;
        letter-spacing: .9px;
    }

    /* 16px SemiBold on mobile (2431:5728) — the 24px above is the DESKTOP price (2156:2928). */
    .pv-product-card__price-current {
        font-size: 16px;
        letter-spacing: .8px;
    }

    /* The mobile comp sets the whole name as ONE wrapping paragraph — 2431:5479 is a single
       text node, "SINCE 1974 *PRIMITIVO DI MANDURIA* D.O.P. 2016", which is why its third line
       reads "MANDURIA D.O.P." and not "MANDURIA". The desktop stacks the three runs; here they
       flow. No clamp either: the body is in flow, so a long name grows the card instead of
       distorting it, and the client has already objected once to names cut with an ellipsis
       ("PRIMITIVO DI MANDURIA…" hid PLATINUM EDITION, the only thing distinguishing that wine). */
    .pv-product-card__name {
        display: block;
    }

    .pv-product-card__brand-line,
    .pv-product-card__appellation {
        display: inline;
    }

    .pv-product-card__wine-name {
        display: inline;
        -webkit-line-clamp: none;
        overflow: visible;
    }
}