/*
 * Cart — full page (PLAN §6.5, Figma 2203:3516 / 2431:7272), desktop mini-cart drawer
 * (2390:7542) and the mobile stacked cards (2431:6944). 1140px content + 364px totals rail;
 * 114×44 stepper (shared .pv-qty-stepper from product.css); red-on-dark free-shipping bar;
 * 396px right-slide drawer. Design was measured off rendered PNGs (Figma was rate-limited) —
 * flagged for final pixel sign-off.
 */
.pv-cart {
    padding-block: var(--space-6) var(--space-7);
}

.pv-cart__title {
    margin-block: var(--space-3) var(--space-5);
    color: var(--ryski-raudona);
    font-size: 32px;
    line-height: 40px;
    letter-spacing: .05em;
    font-style: italic;
    font-weight: 700;
    text-transform: uppercase;
}

/* Table ------------------------------------------------------------------ */
.pv-cart__head,
.pv-cart-line {
    display: grid;
    /* Figma columns: price x1046, qty x1149 (114 stepper), sum right-flush x1379/1434. */
    grid-template-columns: 1fr 88px 148px 120px;
    gap: var(--space-3);
    align-items: center;
}

.pv-cart__head {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--sub);
    color: var(--juoda);
    font-size: 12px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* Client note #27: the SUMA value is right-flush (.pv-cart-line__sum justify-self: end), so its
   column label has to be too — left-aligned it floated 68px off its own column at 1280. */
.pv-cart__head span:last-child {
    text-align: right;
}

/* Empty state keeps the (greyed-out) headers per Figma 2431:7272. */
.pv-cart__head--faded {
    /* Greyed-out column labels on the empty state (Figma 2431:7272). Kept quiet but AA-legible:
       --sub-pilka at .55 opacity read at 1.67:1 (fails WCAG 1.4.3 for sighted low-vision users,
       aria-hidden exempts only screen readers). --sub-pilka-shade solid clears 4.5:1. */
    color: var(--sub-pilka);
}

/* Figma "Vector 34/35/43" (2623:6791): lines are separated by a 1px --sub rule dashed 13 on /
   13 off (a plain `dashed` border cannot pin the dash length). Only the head rule and the rule
   closing the table stay solid — hence the last line falls back to a real border. */
.pv-cart-line {
    padding-block: var(--space-4);
    background-image: repeating-linear-gradient(to right, var(--sub) 0 13px, transparent 13px 26px);
    background-size: 100% 1px;
    background-position: bottom left;
    background-repeat: no-repeat;
}

.pv-cart-line:last-of-type {
    background-image: none;
    border-bottom: 1px solid var(--sub);
}

/* Figma 2203:3516: thumbnail at x357 (63px in from the 294 gutter), name column starts at x488. */
.pv-cart-line__product {
    display: grid;
    grid-template-columns: 194px 1fr;
    /* center, not start: the frame ("Krepseslis FULL") centres the name + Ištrinti group against
       the 157px bottle — its ink spans the row middle, same line the price/stepper/sum sit on. */
    align-items: center;
}

/* Tall bottle image — Figma 2203:3920 is ~45×157 (row grows to ~205px). */
.pv-cart-line__thumb {
    flex: none;
    margin-left: 63px;
    width: 45px;
}

.pv-cart-line__thumb img {
    width: 45px;
    height: 157px;
    object-fit: contain;
    object-position: top;
}

/* Gift-set lines carry a landscape set PHOTO, not a bottle — Figma 2623:6834 is 146×140 flush at
   x295 (1px in from the 294 gutter), vertically centred in the 205px row: 33px above, 32px below.
   Reusing the 45px bottle slot squeezed it to ~45×43. Box keeps the bottle slot's 157px height so
   the row stays 205 tall like its siblings; 9px inset lands the photo top at the comp's 33. */
.pv-cart-line__thumb--gift-set {
    margin-left: 1px;
    width: 146px;
    height: 157px;
    padding-top: 9px;
}

.pv-cart-line__thumb--gift-set img {
    width: 146px;
    height: 140px;
    object-fit: cover;
    object-position: center;
}

/* Coupon lines carry a small vector icon, not a product photo — center it at its own
   aspect (the Figma export is preserveAspectRatio="none", so a square box would stretch it). */
.pv-cart-line__thumb--coupon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
}

.pv-cart-line__thumb--coupon img {
    width: 44px;
    height: 52px;
}

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

.pv-cart-line__name {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.pv-cart-line__coupon-meta {
    font-size: 13px;
    color: var(--sub-pilka);
}

.pv-cart-line__qty-static {
    font-size: 14px;
    font-weight: 600;
}

.pv-cart-line__frequency {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--sub-pilka);
}

.pv-cart-line__frequency-select {
    padding: 4px var(--space-2);
    border: 1px solid var(--sub);
    border-radius: var(--radius-input);
    background: var(--balta);
    font-size: 13px;
}

.pv-cart-line__frequency-apply {
    border: none;
    background: none;
    color: var(--ryski-raudona-shade);
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}

.pv-cart-line__remove {
    margin: 0;
}

/* Edit link on composed gift-set lines — same quiet treatment as the remove control beside it. */
.pv-cart-line__edit {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    color: var(--sub-pilka);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-top: 8px;
}

.pv-cart-line__remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: none;
    background: none;
    color: var(--sub-pilka);
    font-size: 13px;
    cursor: pointer;
}

.pv-cart-line__remove-btn img {
    opacity: .6;
}

.pv-cart-line__price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 16px;
    font-weight: 400;
}

.pv-cart-line__price-current {
    color: var(--juoda);
}

/* Subscription line: discounted price shows red (brief §cart). */
.pv-cart-line--subscription .pv-cart-line__price-current {
    color: var(--ryski-raudona-shade); /* AA: 16px text, raw red is 4.2:1 on white */
}

.pv-cart-line__qty {
    justify-self: start;
}

.pv-cart-stepper {
    margin: 0;
}

.pv-cart-stepper button[disabled],
.pv-mini-cart-stepper button[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.pv-cart-line__sum {
    justify-self: end;
    font-size: 16px;
    font-weight: 400;
}

/* Totals — stacked below the table, right-aligned 364px column (Figma 2203:3516). */
.pv-cart-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 364px;
    margin-left: auto;
    margin-top: var(--space-5);
}

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

.pv-cart-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    font-weight: 600;
}

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

/* Label left, amount right-flush — the frame draws this split on DESKTOP too (note text left,
   "10.00 €" against the rail's right edge), not just in the drawer/mobile. */
.pv-cart-summary__progress-note {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--sub-pilka);
}

.pv-cart-progress {
    height: 6px;
    border-radius: var(--radius-pill);
    /* --sodri-raudona, not --juoda: the desktop frame ("Krepseslis FULL") draws the unfilled track
       dark maroon, same as the drawer and checkout comps (#6a1414 track / #ee2737 fill) — the
       "desktop keeps the black one" note below dated from the blocked-spec era. */
    background: var(--sodri-raudona);
    overflow: hidden;
}

/* The cart-progress controller replays the previous width on the replaced node so this transition
   has two states to run between — without it every edit teleports the bar to its new length. */
.pv-cart-progress__fill {
    height: 100%;
    background: var(--ryski-raudona);
    border-radius: var(--radius-pill);
    transition: width .5s cubic-bezier(.22, .61, .36, 1);
}

.pv-cart-summary__cta {
    width: 100%;
    justify-content: center;
}

/* Empty state ------------------------------------------------------------ */
.pv-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-7);
    text-align: center;
}

.pv-cart-empty__icon {
    width: 64px;
    height: 64px;
    opacity: .25;
}

.pv-cart-empty__message {
    /* "KREPŠELIS TUŠČIAS" — --sub-pilka read 2.79:1 (below the 3:1 large-text floor); shade clears it. */
    color: var(--sub-pilka);
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pv-cart-empty__cta {
    border-color: var(--juoda);
    color: var(--juoda);
}

/* Mini-cart drawer ------------------------------------------------------- */
.pv-mini-cart-overlay[hidden] {
    display: none;
}

.pv-mini-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    display: flex;
    justify-content: flex-end;
    background: rgba(30, 30, 30, .6);
    /* Scrim fades in alongside the drawer's slide (keyframe in base.css). */
    animation: pv-fade-in .3s ease-out;
}

.pv-mini-cart {
    display: flex;
    width: 396px;
    max-width: 100%;
    height: 100%;
    background: var(--balta);
    box-shadow: var(--shadow-panel);
    /* Client note #34: a full 300ms ease-out slide — .2s linear-ish read as a snap. */
    animation: pv-mini-cart-in .3s cubic-bezier(.22, .61, .36, 1);
}

/* Closing plays the slide back out (cart_drawer_controller sets is-closing, then hides on
   animationend) — [hidden] alone made the drawer vanish mid-gesture. Own keyframe names: reusing
   the entrance name only re-times a finished animation, so animationend never fires again. */
.pv-mini-cart-overlay.is-closing {
    animation: pv-mini-cart-scrim-out .3s ease-in forwards;
}

.pv-mini-cart-overlay.is-closing .pv-mini-cart {
    animation: pv-mini-cart-out .3s cubic-bezier(.55, .06, .68, .19) forwards;
}

@keyframes pv-mini-cart-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes pv-mini-cart-out {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}

@keyframes pv-mini-cart-scrim-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.pv-mini-cart__frame {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

/*
 * Geometry below is measured off Figma 2623:10149 (1728px comp, 396px drawer). The frame's text
 * uses leadingTrim CAP_HEIGHT, so its y values are CAP tops — the paddings here are the CSS box
 * tops that put those caps where the comp does (Inter cap 0.727em, ascent 0.969, descent 0.241).
 * Comp cap tops, drawer-local: title/count/close 31 · divider 57 · line name 81 · price 152 ·
 * item rule 233 · footer rule 549 · CTAs 573 + 633 · rows 693 + 718 · bar 745 · note 759.
 */
.pv-mini-cart__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 27px var(--space-5) 12px;
    border-bottom: 1px solid var(--sub);
}

/* Red italic drawer heading. --ryski-raudona-shade, not the raw red: 14px bold on white is
   "small" text and #ee2737 reads 3.9:1 there (tokens.css note, axe serious). */
.pv-mini-cart__title {
    color: var(--ryski-raudona-shade);
    font-size: 14px;
    line-height: 17.9px;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.pv-mini-cart__count {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .7px;
}

.pv-mini-cart__close {
    display: flex;
    margin-left: auto;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.pv-mini-cart__close img {
    width: 10px;
    height: 10px;
}

/* Free-shipping band — last block in the pinned footer, under the totals rows (comp 2623:10149;
   the client confirmed this placement 2026-08-13, reversing note #7). The footer already carries
   the side padding, and nothing follows it, so it needs neither its own inset nor a divider. */
.pv-mini-cart__shipping {
    margin-top: var(--space-3);
}

.pv-mini-cart__shipping .pv-mini-cart__progress {
    margin-top: 0;
}

.pv-mini-cart__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Empty drawer — mirrors .pv-cart-empty on the cart page so the two never disagree, just tighter
   for the 396px panel. Centred in the scrolling body rather than pinned to its top, which is where
   a lone line of text used to sit. */
.pv-mini-cart__empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    text-align: center;
}

.pv-mini-cart__empty-icon {
    width: 48px;
    height: 48px;
    opacity: .25;
}

.pv-mini-cart__empty-message {
    color: var(--sub-pilka);
    font-size: 18px;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.pv-mini-cart__empty-cta {
    height: 44px;
}

/* Bottle column at x48 (16 past the 32 body padding), text column at x113. */
.pv-mini-cart-line {
    display: flex;
    gap: 42px;
}

/* Rule between lines: 24 above / 24 below (comp 209 → 233 → 257), body gap supplies the top half. */
.pv-mini-cart-line + .pv-mini-cart-line {
    padding-top: var(--space-4);
    border-top: 1px solid var(--sub);
}

.pv-mini-cart-line__thumb {
    flex: none;
    /* 3px: the name's cap top sits 3px below its box top — this lands the bottle level with it. */
    margin-top: 3px;
    margin-left: var(--space-3);
    width: 23px;
}

.pv-mini-cart-line__thumb img {
    width: 23px;
    height: 83px;
    object-fit: contain;
    object-position: top;
}

.pv-mini-cart-line__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pv-mini-cart-line__name {
    font-size: 14px;
    line-height: 16px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.pv-mini-cart-line__freq {
    font-size: 14px;
    line-height: 24px;
}

/* Comp: stepper 150→185, price pair centred on it (both centres 12942.5) — one row, centre-aligned. */
.pv-mini-cart-line__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.pv-mini-cart-line__price {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: .8px;
    text-align: right;
    /* The controller tweens this block's height when the qty breakdown row appears or disappears —
       without clipping, the outgoing row would spill past the shrinking box. */
    overflow: hidden;
}

/* qty × unit breakdown above the line total (client note #6) — quiet, so the total still leads. */
.pv-mini-cart-line__price-each {
    display: block;
    color: var(--sub-pilka);
    font-size: 12px;
    line-height: 16px;
}

/* block, not inline: the entrance below translates it, and transforms are ignored on inline boxes. */
.pv-mini-cart-line__price-total {
    display: block;
}

/* Entrance for the line the shopper just stepped — the cart-line-price controller adds
   .is-changed only when THAT line's qty moved, so editing one line leaves the others still.
   The block's height is tweened from JS (it has to know the previous render's height); these
   keyframes only carry the fade, so the row reads as arriving rather than blinking on. */
@keyframes pv-price-each-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes pv-price-total-in {
    from { opacity: .3; transform: translateY(-3px); }
    to { opacity: 1; transform: none; }
}

.pv-mini-cart-line__price.is-changed .pv-mini-cart-line__price-each {
    animation: pv-price-each-in .32s cubic-bezier(.22, .61, .36, 1) both;
}

.pv-mini-cart-line__price.is-changed .pv-mini-cart-line__price-total {
    animation: pv-price-total-in .32s cubic-bezier(.22, .61, .36, 1) both;
}

/* Comp 114×35, r32, 1px #e4dedb: − at x16, + right-flush at 16, count dead-centre (12px glyph
   boxes + a flexed count put its centre on the pill's, whatever the two glyphs measure).
   Compound selector: app.js imports product.css (the 114×44 base pill) after this file. */
.pv-qty-stepper.pv-mini-cart-stepper {
    margin: 0;
    height: 35px;
    padding: 0 var(--space-3);
    gap: 0;
    justify-content: space-between;
    border-radius: 32px;
}

.pv-mini-cart-stepper button {
    width: 12px;
    padding: 0;
    line-height: 1;
}

.pv-mini-cart-stepper span {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .7px;
}

/* Comp: ✕ Ištrinti cap sits 16 under the stepper — the info column's 6px gap plus the 24px
   line box's own cap offset lands it there. */
.pv-mini-cart-line__remove {
    margin: 0;
}

.pv-mini-cart-line__remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: none;
    background: none;
    color: var(--juoda);
    font-size: 12px;
    line-height: 24px;
    letter-spacing: .6px;
    cursor: pointer;
}

.pv-mini-cart__foot {
    display: flex;
    flex-direction: column;
    /* Bottom-anchored: the paddings set the block's height, which is what places the CTAs. */
    padding: 23px var(--space-5) 27px;
    border-top: 1px solid var(--sub);
}

/* 44px pills at r40 (the comp's drawer CTAs are shorter than the 48px page buttons). */
.pv-mini-cart__checkout,
.pv-mini-cart__view {
    width: 100%;
    height: 44px;
    border-radius: 40px;
    font-weight: 600;
}

.pv-mini-cart__checkout {
    margin-bottom: var(--space-3);
}

.pv-mini-cart__summary {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 9px;
}

.pv-mini-cart__row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    line-height: 22px;
}

.pv-mini-cart__row span:last-child {
    font-weight: 600;
}

/* Dark-red track (comp #6a1414), unlike the black one on the cart page. */
.pv-mini-cart__progress {
    margin-top: 12px;
    background: var(--sodri-raudona);
}

.pv-mini-cart__free {
    display: flex;
    justify-content: space-between;
    margin-top: 1px;
    font-size: 12px;
    line-height: 22px;
}

/* Mobile ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .pv-cart__title {
        font-size: 24px;
        line-height: 32px;
    }

    .pv-cart__head {
        display: none;
    }

    /* Figma 2623:10793 stacks the line as one column of rows — name, stepper + right-flush price
       on ONE row, then ✕ Ištrinti — with the bottle in a left gutter. The wrappers dissolve
       (display: contents) so the price, which the desktop table keeps outside the product cell,
       can share the stepper's row; the bottle leaves the flow so the text column drives height. */
    .pv-cart-line {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) 0;
        padding: var(--space-4) var(--space-4) var(--space-4) 88px;
        border: 1px solid var(--sub);
        border-radius: var(--radius-card);
        margin-bottom: var(--space-3);
        /* The stacked card carries its own full border — without this reset the desktop dashed
           separator paints 1px above it and every card reads as a double rule. */
        background-image: none;
    }

    .pv-cart-line__product,
    .pv-cart-line__info {
        display: contents;
    }

    .pv-cart-line__thumb {
        position: absolute;
        left: var(--space-4);
        top: var(--space-4);
        margin-left: 0;
        width: 48px;
    }

    .pv-cart-line__thumb img {
        width: 48px;
        height: 96px;
    }

    /* Gift-set lines share the bottle gutter exactly — same 48px mark width, same 88px text
       inset, so every cart card has one structure and one alignment (client 2026-08-19). The
       photo keeps its 146:140 landscape ratio inside that width (48x46). */
    .pv-cart-line__thumb--gift-set {
        width: 48px;
        height: auto;
        margin-left: 0;
        padding-top: 0;
    }

    .pv-cart-line__thumb--gift-set img {
        width: 48px;
        height: 46px;
        border-radius: 6px;
    }

    /* Contents list and the edit link each take their own row — inline they collided into
       "2 × ProseccoRedaguoti". */
    .pv-gift-contents,
    .pv-cart-line__edit {
        width: 100%;
    }

    .pv-cart-line__edit {
        margin-top: 0;
    }

    .pv-cart-line__thumb--coupon {
        height: 96px;
    }

    .pv-cart-line__name,
    .pv-cart-line__coupon-meta,
    .pv-cart-line__frequency,
    .pv-cart-line__remove {
        width: 100%;
    }

    .pv-cart-line__qty {
        order: 1;
    }

    .pv-cart-line__price {
        order: 2;
        align-self: stretch;
        justify-content: center;
        margin-left: auto;
    }

    .pv-cart-line__remove {
        order: 3;
    }

    .pv-cart-line__remove-btn {
        min-height: 44px;
        padding-block: 10px;
    }

    /* SUMA column dropped on mobile — unit price only (PLAN §6.5). */
    .pv-cart-line__sum {
        display: none;
    }

    /* No totals card in the mobile comp: rows, bar and CTA all run the full 328px gutter. */
    .pv-cart-summary {
        width: auto;
        margin: var(--space-4) 0 0;
        padding: 0;
        background: none;
    }

    .pv-cart-summary__progress-note {
        display: flex;
        justify-content: space-between;
        gap: var(--space-2);
    }
}

/* Free-shipping rail promoted to the top of the cart (client request): it needs its own breathing
   room there, otherwise the amount line collides with the table header directly beneath it. */
.pv-cart__free-shipping {
    margin-bottom: var(--space-6);
}

/* Legal sales-hours notice (V1) — Figma 2494:6436. Box 2494:6808: 558 wide, 120 tall, #ee2737.
   Figma text boxes are cap-trimmed (leadingTrim CAP_HEIGHT): heading cap-top sits 40 below the box
   top, the hours line cap-top 30 below that, its baseline 40 above the box bottom. The paddings and
   the 11px gap below are those insets converted for Inter's metrics (cap .727, ascent .969) at the
   20px/14px line-heights used here. AA: white on #ee2737 is 4.2:1 and the 14px --neutrali hours
   line 4.0:1, so the box takes --ryski-raudona-band (4.84:1 / 4.57:1), as the hero band does. */
.pv-sales-closed {
    margin-top: 26px; /* 32 from the description's last baseline (2494:6502 → 2494:6808). */
    padding: 37px 40px 38px;
    background: var(--ryski-raudona-band);
    color: var(--balta);
}

.pv-sales-closed__title {
    /* 2494:6807: 20px/300, +1px tracking, uppercase; NEGALIMAS 700 italic; box x +41. */
    padding-left: 1px;
    font-size: 20px;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.pv-sales-closed__title em {
    font-weight: 700;
    font-style: italic;
}

.pv-sales-closed__hours {
    /* 2494:6526: 14px/400 +0.7px, #faf8f7; the schedule run is 700. */
    margin-top: 11px;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.7px;
    color: var(--neutrali);
}

.pv-sales-closed__hours strong {
    font-weight: 700;
}

/* No comp for the cart rail / checkout / quick-add (declared in design/DEVIATIONS.md): same box,
   scaled down to sit in a narrow column. */
.pv-sales-closed--compact {
    margin-top: var(--space-4);
    padding: var(--space-3);
}

.pv-sales-closed--compact .pv-sales-closed__title {
    font-size: 16px;
    line-height: 22px;
}

.pv-sales-closed--compact .pv-sales-closed__hours {
    margin-top: var(--space-2);
    line-height: 20px;
}