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

/* #d2e0db is the node's own fill, sampled from the 2x render — the same one-step-off correction the
   bundle card needed. */
.pv-gift-wine.is-selected {
    background: #d2e0db;
}

/* 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;
    /* #07c881 sampled from the render; #07c781 was one step off on green. */
    color: #07c881;
    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 #07c881). 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: #07c881;
    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;
}

/* Mobile's alternative rendering of the same quantity — see the @media block at the end of the
   file; desktop draws the stepper below instead. Two classes deep so it beats .pv-sort-select's own
   display (this control borrows that component's markup). */
.pv-gift-sticky .pv-gift-sticky__qty-select {
    display: none;
}

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

/* Plain inline, NOT inline-flex: a flex box strips the leading space of " - 23.00€" and the button's
   own gap then replaces it with 16px, which is what made the dash hug the price like a minus sign.
   Inline keeps the two real word spaces around the dash. */
.pv-gift-sticky__cta-price {
    display: inline;
    white-space: nowrap;
}

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

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

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

    /* ---- Mobile vertical rhythm (comp 2623:10627, ink-to-ink off the 2x render) --------------
       Every number below is a measured comp gap, and the live value it replaces is in brackets.
       Ink positions, not box positions: the heading's line box carries ~5px of leading, so box
       margins alone kept landing these ~5-12px out. */

    /* Hero band bottom → first category tile: 81.5 [64]. Scoped to the gifts-only --flush
       modifier so the catalog's own tile rhythm is untouched. */
    .pv-subcategory-tiles--flush {
        margin-top: 49.5px;
    }

    /* Heading ink bottom → bundle card top: 53 [125]. The desktop 120 is a whole comp section of
       air at 360. */
    .pv-bundle-grid {
        margin-top: 47.6px;
        /* Card button bottom → next card's panel top: 37.5 [24]. */
        row-gap: 37.5px;
    }

    /* Bundle button bottom → next heading's ink top: 64.5 [77] — the same 64 cap-top rule the
       first section already follows. */
    .pv-gift-section + .pv-gift-section {
        margin-top: 59.4px;
    }

    /* Name line pitch 20 [21.6], and name ink bottom → price ink top 24.5 [21]. margin-top:auto
       is the desktop card's bottom-anchoring; at 360 the card is content-height, so the gap is
       stated outright. */
    .pv-bundle-card__name {
        line-height: 20px;
    }

    .pv-bundle-card__meta {
        margin-top: 13.5px;
    }

    /* The 527 floor exists so two cards SIDE BY SIDE share a button baseline. In one column it only
       buys dead space under the shorter card — 39.5px of it under our 1-line second set, which then
       pushed the next section's heading that far past the comp's 64.5. */
    .pv-bundle-card {
        min-height: 0;
    }

    /* Rūšys/Rikiavimas groups: comp stacks them 134.5 tall from label ink to sort pill bottom
       [146.9], and leaves 81 [56] from the pill to the first wine card. */
    .pv-gift-filter {
        gap: 14.35px;
        /* Heading ink bottom → "Rūšys" ink top: 40.5 [38.5]. */
        margin-top: 34px;
        margin-bottom: 81px;
    }

    /* Label ink → its control: 8.25 above the chips, 9.5 above the sort pill [10 / 11.25]. */
    .pv-gift-filter__group {
        gap: 6.25px;
    }

    /* Both heading lines are #ee2737 in the mobile frame — sampled, not eyeballed: rgb(238,39,55)
       on both. The desktop frame is the two-tone red-word/dark-rest the base rule implements (see
       .pv-section__heading--red in home.css), so this correction is deliberately breakpoint-scoped
       and NOT pushed onto the desktop, whose own comp is not in the cache to check. */
    .pv-gift-section .pv-section__heading {
        color: var(--ryski-raudona);
    }

    /* Comp card pitch: cards at 4708..5217 and 5298..5916 in the 2x render → 40.5px between them. */
    .pv-gift-wine-grid {
        row-gap: 40px;
    }

    /* The picker card's proportions come from a 360px comp, so one column all the way to 768 blew a
       328x255 card up to 736x572 — a bottle and two circles adrift in an empty panel. Two columns
       from phone-plus width keep each card at ~356 wide, i.e. the shape it was drawn at. */
    @media (min-width: 521px) {
        .pv-gift-wine-grid {
            grid-template-columns: repeat(2, 1fr);
            column-gap: var(--space-4);
        }
    }

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

    /* ---- Mobile picker card (comp 2623:10627, measured off the 2x render) ------------------
       The mobile frame does NOT use the desktop's word pills. It draws the same three controls as
       42px circles: a dark × at the card's top-right (8 from top, 8 from right), and a + at the
       bottom-right (16 from right, 24 from bottom) — green once the wine is picked, dark before.
       The ×N tally also differs: beige (#f0ebe9, the default card's own panel colour), left-aligned
       at the head of the text column, not green at the card's right. Card box 328x255 (desktop is
       364/304), text column starting at 110. */
    .pv-gift-wine {
        min-width: 0;
        aspect-ratio: 328 / 255;
    }

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

    /* Comp bottle ink: 64.5 wide x 245 tall, starting 25.5 in from the card's left edge, overhanging
       the card top by 15 and stopping 24.5 short of its bottom. The desktop 86/-24 renders ~84.5
       wide running the card's whole height, which is the "bottle too big" mismatch. 68 is the image
       width whose ink lands on the comp's height (the cutouts carry ~1% margin all round). */
    .pv-gift-wine__bottle {
        width: 70px;
        margin-top: -15px;
    }

    /* Comp ink box 64.5x43.5 (2x render 254..382 / 4764..4851) — bigger than the desktop node's
       56/40, so the mobile tally gets its own size rather than inheriting. */
    .pv-gift-wine__count {
        top: 28px;
        right: auto;
        left: 111px;
        font-size: 60px;
        line-height: 44px;
        color: var(--neutrali-pilka);
        text-align: left;
    }

    /* The controls stop being a row of their own: each circle is placed against the body box, whose
       padding box IS the card's right/bottom edge (padding 24 sits inside it), so these offsets are
       the comp's card-relative ones. */
    .pv-gift-wine__controls {
        margin-top: 0;
    }

    .pv-gift-wine__add,
    .pv-gift-wine__more {
        position: absolute;
        right: 16px;
        bottom: 24px;
        width: 42px;
        min-width: 0;
        height: 42px;
        padding: 0;
        border-radius: 50%;
    }

    .pv-gift-wine__minus {
        position: absolute;
        top: 8px;
        right: 8px;
    }

    /* Glyph in, word out. font-size:0 keeps the label in the accessibility tree (and keeps the
       minus button's aria-label authoritative) while the mask paints the comp's mark: a 22x22 plus
       on 2px strokes, or the 12x12 × already exported for the sticky-bar slots. */
    /* Out of flow, not just invisible — this is what keeps the glyph centred. A label left in the
       flex flow shifts the mark left by half its own width, and it never actually measures zero:
       font-size:0 still pays these buttons' .7px letter-spacing per character (7.7px across
       "PRIDĖTI DAR", i.e. the 4px the + was off by), and .btn's 16px gap is charged for a
       zero-width item too. Absolute positioning removes both while the accessible name stays. */
    .pv-gift-wine__add .pv-gift-wine__label,
    .pv-gift-wine__more .pv-gift-wine__label,
    .pv-gift-wine__minus .pv-gift-wine__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .pv-gift-wine__add,
    .pv-gift-wine__more,
    .pv-gift-wine__minus {
        gap: 0;
    }

    .pv-gift-wine__add::before,
    .pv-gift-wine__more::before,
    .pv-gift-wine__minus::before {
        content: '';
        flex: 0 0 auto;
        background: currentColor;
    }

    .pv-gift-wine__add::before,
    .pv-gift-wine__more::before {
        width: 22px;
        height: 22px;
        -webkit-mask: url("../../images/figma/gifts/icon-plus-white-22-6eZV8h9.svg") center / contain no-repeat;
        mask: url("../../images/figma/gifts/icon-plus-white-22-6eZV8h9.svg") center / contain no-repeat;
    }

    .pv-gift-wine__minus::before {
        width: 12px;
        height: 12px;
        -webkit-mask: url("../../images/figma/icon-close-x-white-13-tTBQr_p.svg") center / contain no-repeat;
        mask: url("../../images/figma/icon-close-x-white-13-tTBQr_p.svg") center / contain no-repeat;
    }

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

    /* Comp row: thumb 16..74, slots 83..271 (59 wide, 6.5 apart), qty 277.5..340 — i.e. 9px from the
       thumb to the first slot and 6.5 from the last slot to the qty pill. That lands a 3-bottle
       bundle at 357.5 of the 360 viewport, so the row no longer wraps for any bundle size and the
       CTA has row two to itself. */
    .pv-gift-sticky__inner {
        flex-wrap: wrap;
        gap: var(--space-3) 6.5px;
    }

    /* The comp's two row gaps differ (9 after the thumb, 6.5 everywhere else); the flex gap carries
       the 6.5 and this makes up the other 2.5. Without it the row measures 328 against 328 of
       container and the qty pill wraps — which is the layout we are replacing. */
    .pv-gift-sticky__slots {
        gap: 6.5px;
        margin-left: 2px;
    }

    /* The thumb is a TILE, not a bare photo — that is the biggest remaining mismatch in this bar.
       The comp draws the chosen bundle as a slot-shaped 59x58 tile: 1px #07c881 border, #d2e0db
       fill, r13, with the gift-box photo contained inside so the mint shows through its transparent
       corners. All four values are sampled/measured off the 2x render — the tile's solid border
       gives an exact radius (its top row spans left+r..right-r: 58..122 inside 32..149 → r = 26 at
       2x). Mobile-scoped: the desktop frame is not cached, so its plain photo is left alone. */
    .pv-gift-sticky__thumb {
        box-sizing: border-box;
        width: 59px;
        height: 58px;
        /* The comp's box ARTWORK is small in the tile: its dark-box ink is 33x32, 13 in from every
           tile edge (the earlier 2.5 reading measured the straw sprigs, not the box). Our source
           photo carries ~1px of its own margin, so 11.5 of padding + 1 border lands the box ink on
           the comp's 33x32. */
        padding: 11.5px;
        border: 1px solid #07c881;
        border-radius: 13px;
        background: #d2e0db;
        object-fit: contain;
    }

    /* Flush into the slot's corner, not overhanging it: the comp's badge box is exactly the slot's
       top-right 16x16 (bbox 252..283 / 7282..7313 against a slot of 166..283 / 7282..7397). The
       corner radius is what makes it straddle the dashes. */
    .pv-slot__remove {
        /* -1 not 0: an absolute offset is measured from the padding box, so 0 would inset the badge
           by the slot's own 1px border and the comp aligns it with the slot's OUTER edge. */
        top: -1px;
        right: -1px;
    }

    /* 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 comp's quantity control here is the 62x58 "1 ˅" select (r24, 1px --sub border, value 25
       in from the left, chevron 14 in from the right), NOT the desktop stepper — and at 62 wide it
       leaves room for thumb + three 59px slots on one row, which the 114px stepper did not (a
       3-bottle bundle used to wrap). The whole pill is one tap target, so nothing is lost. */
    .pv-gift-sticky__qty {
        display: none;
    }

    .pv-gift-sticky .pv-gift-sticky__qty-select {
        display: flex;
        flex: 0 0 auto;
        /* Hard right, whatever the bundle size. The comp's row is a 3-bottle set, which fills the
           width exactly; a 2-bottle set has one slot fewer and left the pill stranded mid-row. */
        margin-left: auto;
    }

    /* The sort pill's own geometry is 170x42 for a sentence; this one holds a digit, so only the box
       is restated — border, radius, weight, chevron and the whole opened panel come from the shared
       component, which is the point of borrowing its markup. */
    .pv-gift-sticky__qty-select.is-enhanced .pv-sort-select__trigger {
        justify-content: center;
        gap: 6px;
        width: 62.5px;
        min-width: 0;
        height: 57.5px;
        padding: 0;
        /* 20, measured — NOT a full pill (28.75), which reads as an oval, and not the 24 a chord
           estimate suggested. On a rounded rect the top border row spans left+r..right-r: the comp's
           runs 595..640 inside a box of 555..680, so r = 40 at 2x. */
        border-radius: 20px;
        /* 16px, never less: iOS Safari zooms the page on focus for any smaller control and never
           zooms back out — the same reason the sort select is bumped at this breakpoint. */
        font-size: 16px;
    }

    /* Opens UPWARD. The bar is pinned to the viewport bottom, so the component's default
       top:100%+5 would drop the panel off-screen. */
    .pv-gift-sticky__qty-select.is-enhanced .pv-sort-select__menu {
        top: auto;
        bottom: calc(100% + 5px);
        min-width: 62px;
        padding: 8px;
        /* Ten quantities is taller than a short viewport in landscape; scroll rather than overflow. */
        max-height: 40vh;
        overflow-y: auto;
    }

    .pv-gift-sticky__qty-select .pv-sort-select__option {
        justify-content: center;
        padding: 0 12px;
        font-size: 16px;
    }

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