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

/* The FIRST section sits directly under the switch tiles, where the comp puts 64px between the
   tiles' bottom edge and the heading's CAP TOP — same rule as the catalog tab, so the heading
   doesn't move when you toggle between them. This margin is not 64 because line-height:1 still
   leaves 7.26px of leading above the caps; the catalog's 1.28 line box leaves 14.26px, hence its
   own different number. Both land the caps at exactly 64px. Measured against the browser's cap
   height (canvas actualBoundingBoxAscent), not derived from the line-height. */
.pv-gift-section:first-of-type {
    margin-top: 56.74px;
}

.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) {
    /* Same 64px-to-cap-top rule as the desktop above, re-measured against the mobile heading's
       line box (2431:5666 bottom y960 → 2431:5475 y1024). */
    .pv-gift-section:first-of-type {
        margin-top: 58.38px;
    }

    .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;
    }
}