/*
 * Gifts pages (PLAN §6.8) — gift-set configurator (Figma 2370:7854 / 2431:8680) and gift-coupon
 * purchase (2333:4907). Shared chrome (.pv-subcategory-tiles, .pv-section__heading, .pv-text-red,
 * .pv-empty-state, .btn*) comes from base.css / catalog.css; only the gift-specific widgets live
 * here. Struck old prices are never shown on bundle cards (client A14).
 */

/* The HTML `hidden` attribute must win over the flex/inline-flex display rules below (gift_configurator
   toggles these in JS): an author `display` otherwise defeats [hidden]'s UA display:none. */
.pv-gift-sticky__thumb[hidden],
.pv-gift-sticky__cta-price[hidden],
.pv-gift-wine__add[hidden],
.pv-gift-wine__selected[hidden],
.pv-gift-wine__count[hidden],
/* The card sets display:flex, which overrides the UA [hidden]{display:none}; without this the
   Rūšys filter (which toggles the hidden attribute) can't actually hide filtered-out cards. */
.pv-gift-wine[hidden] {
    display: none;
}

/* The gift hero + breadcrumb + subcategory tiles now come from the shared
   templates/components/_category_hero.html.twig partial (one .pv-page-hero for catalog + both
   gift pages — styled in catalog.css). Only the gift-page-specific tweak stays here: the tiles sit
   flush to the gift sections below (which own their top gap via .pv-gift-section), whereas the
   catalog keeps the base 32px bottom before its toolbar — so it's opt-in per page via --flush. */
.pv-subcategory-tiles--flush {
    margin-bottom: 0;
}

/* Sections — Figma vertical rhythm (frame 2370:5878): tiles → bundle heading ≈80px, bundle CTA →
   picker heading ≈80px. Headings use line-height:1 so their box equals the 56px glyphs, making the
   heading→content gaps (set on the content elements below) predictable rather than fighting the
   inherited 24px line box. */
.pv-gift-section {
    margin-top: 72px;
    margin-bottom: 0;
}

.pv-gift-section .pv-section__heading {
    line-height: 1;
    margin: 0;
}

/* Bundle grid — 2-up (Figma 2370:7415 family: card 558 wide, 24px gutter). */
.pv-bundle-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: 120px;
}

/* Card = mint/beige media panel + text + full-width pill, no outer frame (Figma). */
.pv-bundle-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Media panel (Figma Rectangle 46, 558×367): pale mint when chosen, beige otherwise; the gift
   photo (382 wide) is centred and overhangs the panel top by 24px for the floating look. */
.pv-bundle-card__media {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    aspect-ratio: 558 / 367;
    background: var(--neutrali-pilka);
    overflow: visible;
}

.pv-bundle-card.is-chosen .pv-bundle-card__media {
    background: #d1dfda;
}

/* Gift-box photo: Figma places the 382×367 (68.5%-wide) box at frame-y 1007 — i.e. it OVERHANGS the
   367px media panel top by 24px (its dark back edge sits above the colour panel, on the page bg) and its
   bottom is inset ~25px. Measured directly off the design render: box 68% wide, top -23px, bottom +25px.
   So the media must NOT clip (overflow:visible) and the box is top-anchored with a -24px pull. */
.pv-bundle-card__photo {
    width: 68.5%;
    height: auto;
    margin-top: -24px;
}

.pv-bundle-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3);
}

.pv-bundle-card__name {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.35;
    text-transform: uppercase;
}

.pv-bundle-card__meta {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
}

.pv-bundle-card__price {
    /* Figma: price is the same 14px/600 as the capacity label beside it (they sit flush). */
    font-size: 14px;
    font-weight: 600;
}

.pv-bundle-card__capacity {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pv-bundle-card__button {
    width: 100%;
    height: 44px;
    /* Figma label weight is 600 semibold; base .btn is 300 so override here. */
    font-weight: 600;
    /* Bottom-anchored so the CTA aligns across the row regardless of name length (Figma: both
       cards' buttons share one baseline). The body flex:1 fills the stretched card height. */
    margin-top: auto;
}

/* Chosen bundle → success-green pill overriding the base btn--dark. Figma is #07c781, but white
   label on it is ~2.2:1 (< WCAG AA); nudged to a deeper green (5.34:1) — the same AA-shade practice
   the --ryski-raudona bands use (--ryski-raudona-band). */
.pv-bundle-card__button--chosen {
    background: #127a52;
    border-color: #127a52;
}

/* Wine picker */
/* The picker is the last section before the sticky summary bar; restore bottom breathing room so the
   final wine row clears the sticky bar (Figma: ≈120px between the grid and the bar). */
.pv-gift-picker {
    margin-bottom: 120px;
}

.pv-gift-picker.is-disabled {
    opacity: .5;
    pointer-events: none;
}

.pv-gift-filter {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: 32px;
    margin-bottom: 56px;
}

/* Left group (Rūšys chips) + right group (Rikiavimas sort): each stacks a small label above its
   control row (Figma 2370:7589 — labels at frame-y 1718, controls at 1735). */
.pv-gift-filter__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pv-gift-filter__chips {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.pv-gift-filter__label {
    font-size: 12px;
    line-height: 1;
    color: var(--juoda);
}

/* Sort control — Figma Group 5169 (2623:6499) is the SAME "Group 4373" instance as the catalog's,
   so the gifts markup now uses the same .pv-sort-select__control + <img> shell and inherits the
   170x42 pill AND the chevron from pages/catalog.css. There is deliberately no override here: the
   old background-image copy drifted (24px inset, 6x3) from the shared rule (16px inset, 8x4.57)
   and that drift is exactly Design-QA gifts y≈1756. Change the control in catalog.css only. */

.pv-gift-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 42px;
    padding-inline: var(--space-3);
    border: 1px solid #e4dedb;
    border-radius: var(--radius-pill);
    background: var(--balta);
    font-size: 14px;
    cursor: pointer;
}

.pv-gift-filter__chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pv-gift-filter__chip:has(input:checked) {
    border-color: var(--juoda);
    background: var(--neutrali-pilka);
}

/* Hover feedback (design mocks are static; match the catalog chip + base .btn feel so every
   interactive control on the page responds). */
.pv-gift-filter__chip:hover {
    border-color: var(--juoda);
}

.pv-gift-filter__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sub-pilka);
}

.pv-gift-filter__chip--raudonas .pv-gift-filter__dot {
    background: #da3d40;
}

.pv-gift-filter__chip--putojantis .pv-gift-filter__dot {
    background: #f8e986;
}

/* Wine picker grid — 3-up (Figma card 364×304, 24px column / 64px row gutters). */
.pv-gift-wine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-7) var(--space-4);
}

/* Wine card: beige panel with a full-colour bottle left + text right; mint when selected. Sharp
   corners, no border (Figma Rectangle 51/57). */
.pv-gift-wine {
    position: relative;
    display: flex;
    /* No gap: the 148px media already includes the bottle's right breathing room; a flex gap here
       would push the text/CTA column 8px right (text off x148, +PRIDĖTI down to 184 vs Figma 192). */
    gap: 0;
    aspect-ratio: 364 / 304;
    background: var(--neutrali-pilka);
    overflow: visible;
}

.pv-gift-wine.is-selected {
    background: #d1dfda;
}

/* Bottle photo — large, contain, overhanging the panel top by 24px (same large unfiltered
   treatment as the catalog card; the source photos are near-monochrome by design). */
/* Media (bottle) column: Figma 148px wide, bottle left-inset 24px (x318 in a card at x294 => text
   starts at 148, add-button spans the remaining 192px). */
.pv-gift-wine__media {
    position: relative;
    flex: 0 0 148px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 24px;
}

.pv-gift-wine__bottle {
    width: 86px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    margin-top: -24px;
}

/* Big ×N tally in the card's upper-right over the panel, beside the bottle (Figma 2370:7654 —
   card-relative dx≈148/dy≈44, 96px/700). Only ever shown on the selected (teal) card, where the
   Figma render draws it in the success green (#17c988) — same green as the "Pridėti dar" pill.
   Positioned on the card (not the bottle media) so it sits in the text column, behind the copy. */
.pv-gift-wine__count {
    position: absolute;
    /* Figma 2370:5878 "x1" text node: card-relative top 24, right-inset 24, 56px/700, tight 40px box. */
    top: 24px;
    right: 24px;
    z-index: 0;
    font-size: 56px;
    font-weight: 700;
    line-height: 40px;
    color: #07c781;
    text-align: right;
    pointer-events: none;
}

/* Decrement control — dark 42px circle with a white minus, right of the "Pridėti dar" pill (Figma
   2370:7654, updated 2026-07-11). Clicking removes one bottle of this wine (clears it at 0). */
.pv-gift-wine__minus {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--juoda);
    color: var(--balta);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.pv-gift-wine__minus:hover {
    opacity: .85;
}

.pv-gift-wine__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
    /* Name + price + CTA are bottom-anchored so the CTA always sits 24px above the card's bottom edge
       regardless of how many lines the (uppercase, variable-length) wine name wraps to — long names
       grow upward into the empty upper area instead of pushing the button out of the card. For a
       typical ~3-line name this lands the name ≈Figma dy137; longer names just start higher. */
    padding: var(--space-4) var(--space-4) var(--space-4) 0;
}

/* Name flows inline: brand + appellation light, wine name bold italic (Figma 16px/300 + 700it). */
.pv-gift-wine__name {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.pv-gift-wine__title {
    font-weight: 700;
    font-style: italic;
}

.pv-gift-wine__price {
    font-size: 14px;
    font-weight: 600;
}

.pv-gift-wine__controls {
    margin-top: var(--space-2);
}

.pv-gift-wine__add {
    height: 42px;
    width: 100%;
    /* Figma node 2370:7660 label weight 500 (base .btn is 300). */
    font-weight: 500;
}

/* Pill on the body's left edge, minus circle on its right edge (Figma: minus 24px from the card's
   right, pill starts at the text column) — space-between spans the body width between them. */
.pv-gift-wine__selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

/* "Pridėti dar" — success-green pill (Figma Frame 46: fixed 142×42 #07c781). Fixed width + nowrap so
   the label never wraps to two lines, and flex:0 0 auto so space-between can't shrink it. */
.pv-gift-wine__more {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 142px;
    height: 42px;
    border: none;
    border-radius: var(--radius-pill);
    background: #07c781;
    color: var(--balta);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .7px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}

.pv-gift-wine__more:hover {
    opacity: .9;
}

/* When the set is full (Σ bottles == bundle capacity) the controller disables every add/"add more"
   button — dim them + not-allowed so it reads as "set full, remove one to swap" instead of broken. */
.pv-gift-wine__add:disabled,
.pv-gift-wine__more:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Sticky summary bar — full-bleed white band pinned to the viewport bottom (Figma 2370:7744,
   1728×106). It sits outside .container in the markup so it spans the page; the inner wrapper
   re-establishes the container so its content lines up with the sections above. */
.pv-gift-sticky {
    position: sticky;
    bottom: 0;
    z-index: var(--z-header-sticky);
    background: var(--balta);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, .08);
}

.pv-gift-sticky__inner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 106px;
    padding-block: var(--space-3);
}

/* The hidden-selection-inputs span must not occupy a flex slot — otherwise the flex gap pushes the
   whole bundle/thumb 24px right of the content grid (its inputs still POST while display:none). */
.pv-gift-sticky__inner > [data-gift-configurator-target="selectionInputs"] {
    display: none;
}

.pv-gift-sticky__bundle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.pv-gift-sticky__thumb {
    flex: 0 0 auto;
    border-radius: var(--radius-input);
    object-fit: cover;
}

.pv-gift-sticky__title {
    font-size: 14px;
    font-weight: 300;
    color: var(--juoda);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pv-gift-sticky__slots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Bottle slots — dashed rounded squares (Figma Rectangle 3072, 59×58, r16): filled shows a
   bottle indicator, empty a plus. */
/* Bottle slots (Figma 2370:5878, Rectangle 3072–3074): 59×58 dashed rounded squares. A filled slot
   holds the picked wine's own bottle photo + a small dark × badge; an empty slot shows a faint +. */
.pv-slot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 58px;
    border: 1px dashed #e4dedb;
    border-radius: 16px;
    background: transparent;
}

.pv-slot__img {
    height: 46px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Small dark × badge on the slot's top-right corner (Figma Group 5173, 16px). */
.pv-slot__remove {
    position: absolute;
    top: -4px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--juoda);
    cursor: pointer;
}

.pv-slot__remove img {
    width: 7px;
    height: 7px;
}

.pv-slot__plus {
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    color: #e4dedb;
}

.pv-gift-sticky__qty {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    width: 114px;
    height: 44px;
    padding-inline: var(--space-3);
    border: 1px solid #e4dedb;
    border-radius: var(--radius-pill);
}

.pv-gift-sticky__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
}

.pv-gift-sticky__qty-value {
    min-width: 1ch;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.pv-gift-sticky__cta {
    flex: 0 0 auto;
    height: 44px;
    min-width: 267px;
}

.pv-gift-sticky__cta:disabled {
    background: #959595;
    color: var(--balta);
    cursor: not-allowed;
}

.pv-gift-sticky__cta-price {
    display: inline-flex;
    gap: .25em;
}

/* Coupon page (Figma 2333:4907). The subcategory tabs use the shared 144px pill component
   (catalog.css / .pv-subcategory-tiles__tile); only the coupon card + form widgets live here. */
.pv-coupon-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Figma: 24px column gap (558px columns); 80px above the block (tabs → block). */
    gap: var(--space-4);
    align-items: start;
    margin-block: 80px var(--space-6);
}

.pv-coupon-block__art {
    position: relative;
    isolation: isolate;
}

.pv-coupon-block__art img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-card);
}

/* Light monogram deco (Figma 2333:4919, 445×384) sits behind the card's upper-left, not bottom-right. */
.pv-coupon-block__deco {
    position: absolute;
    left: -32px;
    top: -40px;
    z-index: -1;
    border-radius: 0;
}

.pv-coupon-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Heading "DOVANŲ KUPONAS" (Figma 2333:4928): 20px Light, emphasised word bold-italic. */
.pv-coupon-form__heading {
    font-size: 20px;
    font-weight: 300;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pv-coupon-form__heading em {
    font-style: italic;
    font-weight: 700;
}

/* 1px divider + repeated intro copy under the heading (Figma 2333:4973 / 4972). */
.pv-coupon-form__divider {
    width: 100%;
    height: 1px;
    margin: 0;
    border: 0;
    background: var(--sub);
}

.pv-coupon-form__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--sub-pilka-shade);
}

/* Labels (Figma 2366:5735/5737): 16px Medium, dark. */
.pv-coupon-form__label {
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--juoda);
}

.pv-coupon-form__field {
    position: relative;
    display: block;
}

/* Input pills (Figma 2366:5732/5721): 558×48, radius 48. The message field is single-line with the
   0/150 counter inline at the right. */
.pv-coupon-form__textarea,
.pv-coupon-form__input {
    width: 100%;
    height: 48px;
    padding: 13px var(--space-4);
    border: 1px solid var(--sub);
    border-radius: var(--radius-pill);
    font: inherit;
    line-height: 1.4;
    background: var(--balta);
}

.pv-coupon-form__textarea {
    resize: none;
    padding-right: 64px;
    white-space: nowrap;
    overflow: hidden;
}

.pv-coupon-form__counter {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    transform: translateY(-50%);
    /* Figma: 14px/600 (was 12px/400 fine-print). */
    font-size: 14px;
    font-weight: 600;
    color: var(--sub-pilka-shade);
}

/* Value selector (Figma 2333:4918): 2×2 radio grid ordered 20/150 over 50/200 — the ascending
   denominations fill column-first, which lands them in that visual order. Selected = grey fill +
   filled radio + pill radius (never red). */
.pv-coupon-values {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-auto-flow: column;
    gap: var(--space-3);
}

.pv-coupon-values__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    height: 50px;
    padding-inline: var(--space-4);
    border: 1px solid var(--sub);
    border-radius: 24px;
    background: var(--balta);
    /* Figma pill value is 14px/600 (was mismatched to the section-label 16px/500). */
    font-size: 14px;
    font-weight: 600;
    color: var(--juoda);
    text-align: left;
    cursor: pointer;
}

.pv-coupon-values__pill::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--sub-pilka);
    border-radius: 50%;
    box-sizing: border-box;
}

.pv-coupon-values__pill.is-active {
    border-color: var(--neutrali-pilka);
    border-radius: var(--radius-pill);
    background: var(--neutrali-pilka);
}

.pv-coupon-values__pill.is-active::before {
    border-color: var(--juoda);
    background: var(--juoda);
    box-shadow: inset 0 0 0 3px var(--balta);
}

/* No qty stepper: one coupon = one cart line (qty fixed at 1 server-side), so the dark CTA fills the
   full form width instead of the design's stepper + CTA pair. */
.pv-coupon-form__cta {
    width: 100%;
    height: 44px;
    margin-top: var(--space-3);
}

/* Mobile */
@media (max-width: 768px) {
    .pv-bundle-grid,
    .pv-gift-wine-grid,
    .pv-coupon-block {
        grid-template-columns: 1fr;
    }

    .pv-gift-wine-grid {
        row-gap: var(--space-6);
    }

    .pv-coupon-block__art {
        overflow: hidden;
    }

    /* The 1fr track must not grow to the card's min-content: the selected state adds the
       "Pridėti dar" pill + minus circle, which otherwise widened every card to 364 and pushed the
       document 20px past the viewport. */
    .pv-gift-wine {
        min-width: 0;
    }

    .pv-gift-wine__media {
        flex: 0 0 120px;
    }

    .pv-gift-wine__more {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        padding-inline: var(--space-2);
    }

    .pv-gift-sticky {
        border-radius: 24px 24px 0 0;
    }

    /* 8px column gap keeps thumb + slots + qty on one row for a 2-bottle bundle; a 3-bottle bundle
       wraps the qty pill down next to the CTA, so the panel is 2 rows either way. */
    .pv-gift-sticky__inner {
        flex-wrap: wrap;
        gap: var(--space-3) var(--space-2);
    }

    /* Mobile sticky is compact (Figma 2431:8680): thumb + slots + qty on one row, full-width CTA
       below — the set title is dropped. */
    .pv-gift-sticky__bundle {
        flex: 0 0 auto;
    }

    .pv-gift-sticky__title {
        display: none;
    }

    /* The design draws a 62px "1 ˅" select here; we keep the stepper (the controller drives it via
       inc/decQty) and spend the width on 40×44 step buttons instead of sub-tappable icon boxes. */
    .pv-gift-sticky__qty {
        flex: 0 0 auto;
        height: 46px;
        padding-inline: 0;
    }

    .pv-gift-sticky__step {
        width: 40px;
        align-self: stretch;
        padding: 0;
    }

    /* Fills its row alone for a 2-bottle bundle and shares it with the wrapped qty pill for a
       3-bottle one — the label must stay on one line at the narrower 206px. */
    .pv-gift-sticky__cta {
        flex: 1 1 200px;
        width: auto;
        min-width: 0;
        gap: var(--space-2);
        padding-inline: var(--space-2);
        white-space: nowrap;
    }
}