/*
 * Checkout — auth gate (2394:8744 / 2267:3676), single-page checkout (2248:3751 / 2267:3919) and
 * order success (2270:5779). Payment UI is omitted (mandate). Values follow the design tokens
 * (tokens.css) and the 1140px content container; Aktiv Grotesk substitutes with --font-sans.
 */

/* ---- Minimal checkout chrome ------------------------------------------- */
.pv-checkout-header {
    background: var(--sodri-raudona);
    height: 64px;
    display: flex;
    align-items: center;
}

.pv-checkout-header__inner {
    display: flex;
    justify-content: center;
}

/* ---- Shared red-italic heading (Figma style 5c603179: 24px Bold Italic .05em) --------- */
.pv-checkout-heading {
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.pv-checkout-heading em {
    color: var(--ryski-raudona);
    font-style: italic;
}

.pv-checkout-heading--sm {
    font-size: 24px;
    line-height: 32px;
}

/* ---- Auth gate ---------------------------------------------------------- */
/* Figma 2623:7408: 2-up login+register row, guest card full-width below; cards at y=161 under the
   breadcrumb, 24px apart, last card 120px above the footer. */
.pv-checkout-gate {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    padding-block: 14px 120px;
    align-items: start;
}

.pv-gate-card--full {
    grid-column: 1 / -1;
}

/* Content column is 364 wide inside a 557 card → 96px side inset; cap line 64 below the card top. */
.pv-gate-card {
    background: var(--balta);
    border-radius: var(--radius-card);
    padding: 58px 96px 64px;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Figma 2623:7417/7418/7422 drop-shadow is 0 0 12 rgba(0,0,0,.15). --shadow-panel is 20px blur
       and is shared with the age gate, cart drawer, header dropdowns and subscription cards, so the
       comp value is applied locally rather than by retuning a global token. */
    box-shadow: 0 0 12px rgba(0, 0, 0, .15);
    min-height: 100%;
}

/* Comp insets the short guest card less than the 2-up pair (cap 40 below the top, 40 below the CTA). */
.pv-gate-card--full {
    padding-block: 34px 40px;
}

/* Figma measures from the cap line; the 24/32 heading leaves ~9px of slack below its caps. */
.pv-gate-card .pv-checkout-heading {
    margin-bottom: -9px;
}

/* Comp Frame 34: 45px pill, 8px between the mark and the label. */
.pv-gate-card__google {
    width: 100%;
    height: 45px;
    gap: var(--space-2);
    background: var(--neutrali);
    color: var(--juoda);
    border-color: var(--neutrali-pilka);
    text-transform: none;
}

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

.pv-gate-card__cta {
    width: 100%;
    /* Comp Group 4426/4429: 44px pill, label 14/17.9 SemiBold ls .05em. */
    height: 44px;
    font-weight: 600;
}

/* Comp: password field 443 → submit 467. */
.pv-gate-form .pv-gate-card__cta {
    margin-top: var(--space-2);
}

/* Figma 2394:8744: on the full-width guest card the CTA is a fixed 364px, not full-bleed. */
.pv-gate-card--full .pv-gate-card__cta {
    width: 364px;
    max-width: 100%;
}

.pv-gate-card__hint {
    font-size: 13px;
    text-align: left;
}

.pv-gate-card__hint a {
    color: var(--sub-pilka-shade);
    text-decoration: none;
}

.pv-gate-card__lead {
    font-size: 14px;
    color: var(--juoda);
    font-weight: 600;
    line-height: 18px;
}

.pv-gate-benefits {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pv-gate-benefit {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--space-3);
    align-items: start;
}

/* Comp: title box 14/18, body box 14/20 butted straight under it (297→315→355), icon frame top
   level with the title's line-box top, 24px between blocks → 82px block pitch. The inherited 24px
   card line-height was pushing the title 8px below its icon and the pitch out to 88. */
.pv-gate-benefit__title {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    /* Comp puts the title INK flush with the icon's top edge; Inter's half-leading + ascender drop
       land it ~4px lower inside the same 18px line box. The paired margins move the ink only —
       block height (18 + 40) and therefore the 82px pitch are unchanged. */
    margin-top: -4px;
    margin-bottom: 4px;
}

.pv-gate-benefit__body {
    font-size: 14px;
    /* --sub-pilka-shade (not the comp's raw #969696 = 2.99:1 on white): AA fix for 14px body copy. */
    color: var(--sub-pilka-shade);
    line-height: 20px;
}

/* ---- Fields (shared) ---------------------------------------------------- */
/* The field itself (pill, floating label, states) is components/forms.css — only the checkout's
   two-up row lives here. */
.pv-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

/* ---- Single-page checkout ---------------------------------------------- */
/* Figma 2623:7633 on the 1140 container: form column 558, summary column 332, 250 gutter between
   them; first cap-line 40px under the 64px header, last block 120px above the footer. */
.pv-checkout {
    display: grid;
    /* Kept proportional (558 : 250 : 332 of the 1140 container) so the form column doesn't collapse
       between the 900px breakpoint and the container max. */
    grid-template-columns: minmax(0, 558fr) minmax(0, 332fr);
    column-gap: 21.93%;
    padding-block: 34px 120px;
}

/* Comp rhythm: 40px from a block's bottom edge to the next block's top. Figma's heading text boxes
   hug the caps, the 24/32 heading here carries ~6px of half-leading above them — so the flex gap is
   34px and the blocks that start with a box (not a cap) add the 6px back. */
.pv-checkout__main {
    display: flex;
    flex-direction: column;
    gap: 34px;
}

/* The invoice toggle hangs off the block above it: comp Δ24 (1411 → 1435), not 40. */
.pv-checkout__main > [data-controller="invoice-toggle"] {
    margin-top: -10px;
}

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

.pv-checkout__section-head {
    display: flex;
    justify-content: space-between;
    /* Figma centres the link on the heading's cap band (cap 245–262 vs link ink 249–259). */
    align-items: center;
}

/* Figma Group 4466: person glyph + plain dark 14/17.9 label, 8px apart — not a red underlined link. */
.pv-checkout__login-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    line-height: 18px;
    color: var(--juoda);
    text-decoration: none;
}

.pv-checkout__hint {
    font-size: 13px;
    color: var(--sub-pilka-shade);
}

.pv-saved-card {
    background: var(--sub);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    font-size: 14px;
}

.pv-saved-card__email {
    font-weight: 600;
}

.pv-saved-card__addr {
    /* #616161 (not --sub-pilka #969696): AA fix on the light saved-card. */
    color: #616161;
    margin-top: var(--space-1);
}

/* ---- Radio rows (shipping) --------------------------------------------- */
.pv-radio-group {
    background: var(--balta);
    border: 1px solid var(--sub);
    /* Figma 2623:7633 Rectangle 3041: 24px card, #e7e7e7 row rules (lighter than the card border). */
    border-radius: 24px;
    overflow: hidden;
}

.pv-radio-group--error {
    border-color: var(--ryski-raudona);
}

.pv-radio {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* Comp rows are 62px tall around 18px content (dot 753 → divider 791 → dot 811). */
    padding: 22px var(--space-4);
    cursor: pointer;
}

.pv-radio + .pv-radio {
    border-top: 1px solid #e7e7e7;
}

.pv-radio input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Figma Group 4397 "Ellipse 7": 18px ring — 2px --sub when idle, a 6px --juoda ring when picked. */
.pv-radio__dot {
    width: 18px;
    height: 18px;
    border: 2px solid var(--sub);
    border-radius: 50%;
    flex: none;
    display: grid;
    place-items: center;
}

.pv-radio input:checked + .pv-radio__dot {
    border-width: 6px;
    border-color: var(--juoda);
}

.pv-radio__label {
    flex: 1;
    font-size: 14px;
    line-height: 18px;
}

.pv-radio__price {
    font-weight: 600;
    line-height: 18px;
}

/* ---- Invoice toggle ----------------------------------------------------- */
.pv-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.pv-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Figma Component 64: 48×16 track, 24×10 pill knob inset 3px (on = --ryski-raudona, knob right). */
.pv-toggle__track {
    width: 48px;
    height: 16px;
    border-radius: var(--radius-pill);
    background: var(--neutrali-pilka);
    padding: 3px;
    transition: background .15s;
}

.pv-toggle__knob {
    display: block;
    width: 24px;
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--balta);
    transition: transform .15s;
}

.pv-toggle__label {
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
}

.pv-toggle input:checked + .pv-toggle__track {
    background: var(--ryski-raudona);
}

.pv-toggle input:checked + .pv-toggle__track .pv-toggle__knob {
    transform: translateX(18px);
}

.pv-invoice-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* Comp: toggle 1435–1451 → first invoice field 1475, on top of the section's own 16px gap. */
    margin-top: var(--space-2);
}

/* Author `display:flex` above would otherwise beat the UA `[hidden]{display:none}` — keep the
   collapsed state working for both the SSR default and the invoice-toggle Stimulus controller. */
.pv-invoice-fields[hidden] {
    display: none;
}

/* ---- Consents (button-style, V15) -------------------------------------- */
.pv-consents {
    gap: var(--space-3);
    /* Cap-less block: restore the 6px the heading gap borrows (comp Δ40, 1582 → 1622). */
    margin-top: 6px;
}

.pv-checkbox,
.pv-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: 14px;
    line-height: 18px;
    cursor: pointer;
}

/* Figma Component 69/70/71: 20px box, 8px radius, 1px --neutrali-pilka. */
.pv-checkbox input,
.pv-consent input {
    appearance: none;
    width: 20px;
    height: 20px;
    flex: none;
    border: 1px solid var(--neutrali-pilka);
    border-radius: 8px;
    background: var(--balta);
    cursor: pointer;
    display: grid;
    place-items: center;
}

.pv-checkbox input:checked,
.pv-consent input:checked {
    background: var(--ryski-raudona);
    border-color: var(--ryski-raudona);
}

.pv-checkbox input:checked::after,
.pv-consent input:checked::after {
    content: '';
    width: 10px;
    height: 6px;
    border-left: 2px solid var(--balta);
    border-bottom: 2px solid var(--balta);
    transform: translateY(-1px) rotate(-45deg);
}

.pv-consent a {
    /* Comp: the consent line is one #1e1e1e string with a textDecoration UNDERLINE override on the
       link substring only — the link is not red. (#1e1e1e on the #faf8f7 page measures 15.7:1, so
       the --ryski-raudona-shade AA substitution that was here is not needed.) */
    color: var(--juoda);
    text-decoration: underline;
}

.pv-consent--error input {
    border-color: var(--ryski-raudona);
}

.pv-checkout__pay {
    width: 100%;
    /* Figma pay button is 44px tall, 600 weight (matches the product CTA). */
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    /* Cap-less block: comp Δ40 from the consents (1714 → 1754). */
    margin-top: 6px;
}

/* ---- Summary rail ------------------------------------------------------- */
.pv-summary {
    background: var(--balta);
    border-radius: var(--radius-card);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: var(--space-4);
}

.pv-summary__title {
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

.pv-summary__count {
    /* Figma: '(N prekės)' is lowercase — reset the uppercase inherited from the title. */
    text-transform: none;
    color: var(--sub-pilka);
    font-weight: 400;
}

.pv-summary__lines {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pv-summary__line {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: var(--space-3);
    align-items: center;
}

.pv-summary__thumb {
    position: relative;
    width: 56px;
    height: 68px;
    background: var(--neutrali-pilka);
    border-radius: var(--radius-input);
    display: grid;
    place-items: center;
}

/* Every one of these boxes was drawn around a BOTTLE (~0.28 aspect), and object-fit defaults to
   `fill` — so a gift-set photo (382×367, landscape) came out stretched tall on checkout, the
   success page and the order detail alike. `contain` fits whatever ratio arrives into the same box
   instead of distorting it; a bottle already matches the box, so nothing moves for wine lines. */
.pv-summary__thumb img {
    object-fit: contain;
}

/* Bare bottle on the white panel — no gray tile (Figma 2248:3751 / 2270:5779).
   Scoped to checkout/success so the shared .pv-summary__thumb on account pages is untouched. */
.pv-checkout .pv-summary__thumb,
.pv-success .pv-summary__thumb {
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
}

/* Comp Group 4449/4453/4457: 18x18 r8 --ryski-raudona pill, label 12/24 SemiBold ls .05em white. */
.pv-summary__qty {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--ryski-raudona);
    color: var(--balta);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .05em;
    display: grid;
    place-items: center;
    /* The comp's 12/24 type was being inherited here, and a 24px line box inside an 18px pill puts
       the digit's ink 2.6px BELOW centre — place-items centres the LINE BOX, not the glyph. Matching
       the line height to the pill lands the ink within 0.2px of centre.
       text-indent offsets the letter-spacing, which is added AFTER the last glyph too and otherwise
       pulls the digit half a space left of centre. */
    line-height: 18px;
    text-indent: .05em;
}

/* The success page's badge was, until account.css's bare .pv-summary__qty was scoped to .pv-account,
   taking that rule's values by cascade accident. Its own comp (2270:5779) has not been measured in
   this pass, so those exact values are pinned here rather than silently changed with the checkout's. */
.pv-success .pv-summary__qty {
    top: -6px;
    right: -6px;
    border-radius: 9px;
    font-size: 11px;
    letter-spacing: normal;
}

.pv-summary__eyebrow {
    display: block;
    font-size: 11px;
    letter-spacing: .5px;
    /* #616161 (not --sub-pilka #969696 = 2.95:1 on the white rail): AA fix. */
    color: #616161;
    text-transform: uppercase;
}

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

.pv-summary__sub-note {
    display: block;
    font-size: 12px;
    /* --ryski-raudona-shade (not raw --ryski-raudona = 4.2:1 on the white summary rail): AA fix. */
    color: var(--ryski-raudona-shade);
}

/* Chosen bottles under a gift-set line. Lives here because checkout.css is loaded globally by
   app.js and all four surfaces (cart, checkout rail, success, order detail) render the same list. */
/* Spans, not a <ul>: two of the four hosts are themselves inline (.pv-summary__info is a <span>). */
.pv-gift-contents,
.pv-gift-contents__item {
    display: block;
}

.pv-gift-contents {
    margin-top: var(--space-1);
    font-size: 12px;
    line-height: 16px;
    /* #616161 (not --sub-pilka #969696 = 2.95:1 on the white rail): AA fix, as the eyebrow. */
    color: #616161;
}

.pv-summary__price {
    font-weight: 600;
    white-space: nowrap;
}

.pv-summary__coupon {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pv-summary__coupon-label {
    font-size: 14px;
    font-weight: 600;
}

.pv-summary__coupon-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-2);
}

.pv-summary__coupon-btn {
    height: 48px;
}

.pv-summary__totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: 1px solid var(--sub);
    padding-top: var(--space-3);
}

.pv-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600; /* Figma: all totals rows uniformly semibold 14px */
}

.pv-summary__row--grand {
    font-weight: 600;
    font-size: 14px;
    padding-top: var(--space-3);
}

/* Free-shipping progress bar — Figma Group 4425: --sodri-raudona track, --ryski-raudona fill. */
.pv-checkout .pv-freeship {
    /* Comp: 24px under the last totals CAP line (718 → 752), not under its line box. */
    margin-top: -4px;
}

.pv-freeship__track {
    height: 6px;
    border-radius: 3px;
    background: var(--sodri-raudona);
    overflow: hidden;
}

.pv-freeship__fill {
    display: block;
    height: 100%;
    background: var(--ryski-raudona);
    /* Comp Rectangle 2957 is r24 like the track — on a 6px bar that resolves to a full pill, so the
       fill's leading edge is rounded rather than clipped square by the track's overflow. */
    border-radius: 3px;
}

.pv-freeship__note {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: 5px;
    font-size: 12px;
    line-height: 15.4px;
    color: var(--juoda);
}

/* ---- Checkout summary rail (Figma 2623:7633) ---------------------------- */
/* The rail is not a card: a white panel bleeds from 153px left of the column to the viewport edge
   and runs the whole page height, header bottom → footer top (pin "BG per visą aukšti"). */
.pv-checkout__aside {
    position: relative;
}

.pv-checkout__aside::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block: -34px -120px;
    left: -153px;
    right: calc(-1 * max(var(--container-pad), 50vw - var(--container-max) / 2));
    background: var(--balta);
}

.pv-checkout .pv-summary {
    padding: 0;
    background: none;
    border-radius: 0;
}

.pv-checkout .pv-summary__title {
    letter-spacing: .7px;
    /* Divider 16px under the cap line (comp 114 → 130). */
    padding-bottom: 7px;
    border-bottom: 1px solid var(--sub);
}

.pv-checkout .pv-summary__count {
    /* Comp: title ends 1184, count starts 1200 — the markup already contributes a word space. */
    margin-left: 12px;
}

.pv-checkout .pv-summary__lines {
    gap: var(--space-4);
}

/* Bottle | (name over price); the 24px column inset is on the row so the rule stays full-bleed. */
.pv-checkout .pv-summary__line {
    display: grid;
    grid-template-columns: 23px 1fr;
    column-gap: 43px;
    /* Comp: name block ends 186, price cap 196 — the 24px price line box already covers that. */
    row-gap: 0;
    align-items: start;
    padding-left: var(--space-3);
    padding-bottom: var(--space-4);
}

.pv-checkout .pv-summary__thumb {
    grid-row: span 2;
}

.pv-checkout .pv-summary__thumb img {
    width: 23px;
    height: 83px;
}

/* A set photo fitted into the 23px bottle column is legible only as a smudge. Widen the thumb
   column and take the same 17px back off the gap, so the name still starts at 66px (23+43) and
   gift lines stay flush with wine lines. A bottle is a slim silhouette with transparent margins,
   a set photo is a full-bleed rectangle — 40px keeps the gap reading as air rather than a seam. */
.pv-checkout .pv-summary__line--gift {
    grid-template-columns: 40px 1fr;
    column-gap: 26px;
}

.pv-checkout .pv-summary__line--gift .pv-summary__thumb img {
    width: 40px;
    height: auto;
    max-height: 83px;
}

/* Comp badge sits just outside the bottle's top-right corner (bottle 1118–1141, badge 1142). */
.pv-checkout .pv-summary__qty {
    top: -1px;
    right: -19px;
}

/* 14/16 name block — drop the 24px body strut, and pull the cap line level with the bottle top
   (comp aligns both at 154; a 14px cap sits ~4px below its own line-box top). */
.pv-checkout .pv-summary__info {
    margin-top: -4px;
    line-height: 16px;
}

.pv-checkout .pv-summary__name {
    line-height: 16px;
}

/* Comp runs brand line + name as one 14/16 string, not a small caps eyebrow. */
.pv-checkout .pv-summary__eyebrow {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    color: inherit;
}

/* Comp line price: 14/24 Regular ls .05em (0.7px at 14px). */
.pv-checkout .pv-summary__price {
    grid-column: 2;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: .05em;
}

.pv-checkout .pv-summary__coupon {
    /* Comp: label cap 553 → field 574. */
    gap: 5px;
    /* The rail's 24px block gap is measured off the last line's 1px border, which lands the whole
       coupon block 3px below the comp (label ink 555.98 vs 553.43, field 577 vs 574). */
    margin-top: -3px;
}

.pv-checkout .pv-summary__coupon-label {
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
}

/* Comp Group 4458: 220px field + 8px + 104px apply button across the 332px rail. */
.pv-checkout .pv-summary__coupon-row {
    grid-template-columns: 1fr 104px;
}

.pv-checkout .pv-summary__coupon-row .input,
.pv-checkout .pv-summary__coupon-btn {
    height: 42px;
}

/* Comp Frame 38 label: 14/17.9 Medium ls .05em. */
.pv-checkout .pv-summary__coupon-btn {
    font-weight: 500;
}

/* Comp Rectangle 42: #ffffff fill, #e4dedb 1px stroke. The field is a visual stub this phase
   (CouponService is P6) and stays `disabled`, so the UA's grey disabled fill has to be overridden
   back to the comp white; `not-allowed` keeps the inert state honest on hover. */
.pv-checkout .pv-summary__coupon-row .input {
    border-color: var(--sub);
    background: var(--balta);
}

.pv-checkout .pv-summary__coupon-row .input:disabled {
    background: var(--balta);
    cursor: not-allowed;
}

.pv-checkout .pv-summary__coupon-btn:disabled {
    cursor: not-allowed;
}

/* Comp has no rule above the totals — only the line-item ones. */
.pv-checkout .pv-summary__totals {
    gap: 10px;
    padding-top: 0;
    border-top: 0;
}

/* ---- Success page ------------------------------------------------------- */
.pv-success {
    display: grid;
    grid-template-columns: 1fr 396px;
    gap: var(--space-6);
    align-items: start;
    padding-block: var(--space-6);
}

.pv-success__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Standalone red PV monogram (Figma 2270:5779 #2279:4988, 83×114) — no circle. */
.pv-success__mark {
    display: block;
}

.pv-success__mark img {
    width: 83px;
    height: auto;
}

.pv-success__heading {
    font-size: 40px;
    line-height: 48px;
    font-weight: 300;
    text-transform: uppercase;
}

.pv-success__heading em {
    color: var(--ryski-raudona);
    font-style: italic;
    font-weight: 700;
}

.pv-info-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.pv-info-card {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    background: var(--neutrali-pilka);
    border-radius: 24px;
    padding: var(--space-4);
}

.pv-info-card__icon {
    flex: none;
    margin-top: 2px;
}

.pv-info-card__body {
    /* A flex item's min-width defaults to auto, so a long unbroken buyer email pushed the card
       past the 360px viewport (documentElement.scrollWidth 421). min-width:0 lets it shrink;
       anywhere breaks the address itself, which has no space to wrap at. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.pv-info-card__head {
    /* Figma success cards: 14/18 head, 12/15.4 sub-lines (was inheriting 16/24). */
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.pv-info-card__line {
    font-size: 12px;
    /* #616161 (not --sub-pilka #969696 = 2.5:1): AA fix — 12px text on the #f0ebe9 info card
       needs 4.5:1; #616161 clears it at 5.2:1 while staying muted. */
    color: #616161;
    line-height: 15.4px;
}

.pv-info-card__invoice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-2);
    /* --ryski-raudona-shade (not raw --ryski-raudona = 3.6:1): AA fix on the #f0ebe9 card (4.5:1). */
    color: var(--ryski-raudona-shade);
    font-size: 14px;
    text-decoration: underline;
}

.pv-success__home,
.pv-success__create-account {
    width: 100%;
}

/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 900px) {
    .pv-checkout-gate,
    .pv-checkout,
    .pv-success {
        grid-template-columns: 1fr;
    }

    .pv-checkout-heading {
        font-size: 24px;
        line-height: 32px;
    }

    .pv-gate-card {
        min-width: 0;
    }

    .pv-field-row {
        grid-template-columns: 1fr;
    }

    .pv-info-cards {
        grid-template-columns: 1fr;
    }

    .pv-summary {
        position: static;
    }

    /* Single column: the buyer must see what they are paying for BEFORE the MOKĖTI button, so the
       rail moves ahead of the form. DOM order stays summary-last for the desktop grid. */
    .pv-checkout__aside {
        order: -1;
        margin-bottom: 34px;
    }

    /* The full-height white bleed is a two-column device — at one column it became a band running
       under the CTA. */
    .pv-checkout__aside::before {
        display: none;
    }

    /* …so the summary needs the card treatment every other white surface has on mobile. */
    .pv-checkout .pv-summary {
        padding: var(--space-4);
        background: var(--balta);
        border-radius: var(--radius-card);
    }

    /* 44px rows. The 48×16 track and the 20×20 boxes keep their comp geometry — only the label
       row grows. */
    .pv-toggle {
        min-height: 44px;
        padding-block: 13px;
    }

    .pv-checkbox,
    .pv-consent {
        min-height: 44px;
        padding-block: 12px;
    }
}

/* The 96px desktop side inset is a 557px-card value: inside a 358px card at 390 it leaves 166px of
   field, which wraps the Google label onto two lines. Fall back to the mobile container rhythm. */
@media (max-width: 600px) {
    .pv-gate-card,
    .pv-gate-card--full {
        padding: 32px 24px;
    }

    .pv-gate-card--full .pv-gate-card__cta {
        width: 100%;
    }
}

/* Consent + summary errors. The red ring alone was the only failure cue, and on a phone it sits far
   above the button the buyer just pressed — so the form read as simply not working. */
.pv-consent__error,
.pv-checkout__error-summary {
    margin-top: var(--space-2);
    color: var(--ryski-raudona);
    font-size: 14px;
    line-height: 20px;
}

/* .pv-consents is a flex column with a 16px gap, so this message was landing 24px below the consent
   it belongs to and only 16px above the NEXT row — which made the privacy error read as the
   NEWSLETTER's, i.e. as if the optional newsletter were blocking checkout. It never is: only
   terms_consent and privacy_consent are validated (OrderController). Sit it tight under its own
   control and indent it to the consent text's left edge (20px box + 16px gap). */
.pv-consent__error {
    margin-top: calc(var(--space-3) * -1 + 4px);
    margin-left: calc(20px + var(--space-3));
}

.pv-checkout__error-summary {
    margin-bottom: var(--space-3);
}

/* ---- Payment pending: the wait between the bank and Montonio's webhook ---- */
.pv-pending {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block: var(--space-3);
}

.pv-pending__status,
.pv-pending__timeout {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 14px;
    line-height: 20px;
    color: var(--sub-pilka-shade);
}

.pv-pending__timeout {
    display: block;
    color: var(--juoda);
}

/* The display rules above outrank the UA's [hidden] { display: none }, so the attribute alone did
   nothing and the timeout note rendered immediately. Same per-component guard the drawer, the
   quick-add modal and the compact header bar already use. */
.pv-pending__status[hidden],
.pv-pending__timeout[hidden] {
    display: none;
}

.pv-pending__timeout a {
    color: var(--ryski-raudona-shade);
}

/* A ring with one red quarter. Under reduced motion the global safety net freezes the spin, and a
   ring still reads as "working" where a pulsing dot would just look broken. */
.pv-pending__spinner {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--neutrali-pilka);
    border-top-color: var(--ryski-raudona);
    border-radius: 50%;
    animation: pv-pending-spin .9s linear infinite;
}

@keyframes pv-pending-spin {
    to { transform: rotate(1turn); }
}