/*
 * 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). The comp's own
   ink inside the 558-wide card (2370:7479 family, media top = 0): name caps at y391, price and
   capacity caps at y446, button 483..527. 19.6 not 24 because the 16/1.35 name box carries 4.4px
   above its caps. min-height 527 is the comp's card, and it lets the meta+button pair sit on the
   bottom (below) so a one-line name and a two-line one still share a button baseline — which is
   exactly what the comp draws: both cards put the meta at y1477 and the button at y1514. */
.pv-bundle-card {
    display: flex;
    flex-direction: column;
    gap: 19.6px;
    min-height: 527px;
}

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

/* #d2e0db is the node's fill (2370:7479); we had #d1dfda, one step off on every channel. */
.pv-bundle-card.is-chosen .pv-bundle-card__media {
    background: #d2e0db;
}

/* 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;
    /* Gaps are per-element below: the comp spaces name->meta and meta->button differently, and
       the meta pair is bottom-anchored rather than flowing off the end of the name. */
    gap: 0;
}

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

/* 40px between the price and the capacity: the comp puts "23.00€" at x294 and "2 buteliai" at
   x383 of a card whose left edge is 294, and the price ink is 49 wide. margin-top:auto pins the
   pair to the bottom of the 527 card. */
.pv-bundle-card__meta {
    display: flex;
    align-items: baseline;
    gap: 40px;
    margin-top: auto;
}

.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;
    /* 19.8 below the meta pair, which is itself bottom-anchored — together they put the button at
       the comp's 483..527 on every card regardless of name length. */
    margin-top: 19.8px;
}

/* Chosen bundle → the comp's #07c881 (2370:7491 Rectangle 47). This was darkened to #127a52 for
   contrast (white on #07c881 is ~2.2:1, under WCAG AA); the client asked for the comp's colour on
   2026-08-14, the same call as CLIENT-DECISIONS P13/P14 — a conscious AA trade-off, recorded not
   hidden. Revisit only if an accessibility audit forces it. */
.pv-bundle-card__button--chosen {
    background: #07c881;
    border-color: #07c881;
}

/* 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) {
    /* The 360 bundle card is its own shell, not a squeezed 558 one (2431:8959, 328x404 with the
       panel 328x214 at y13): name caps at y238, price/capacity caps at y313, button 347..391, all
       measured from the panel top. Same 19.6 media→name gap and same 40 price→capacity as the
       desktop card; every other number differs. */
    .pv-bundle-card {
        min-height: 391px;
    }

    .pv-bundle-card__media {
        aspect-ratio: 328 / 214;
    }

    /* 222 of 328 wide, overhanging the panel by 13 rather than the desktop's 24. */
    .pv-bundle-card__photo {
        width: 67.7%;
        margin-top: -13px;
    }

    .pv-bundle-card__button {
        margin-top: 16.8px;
    }

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