/* ====================================================================
   SCREEN 04 — THE BASKET (+ 04b), the desktop layer
   (desktop slice D2, 2026-10-08)

   Frames: docs/design/pharmacy/screens/04/desktop/frame.html — 04-d (the
   page at 1280), 04-d-kept (Kept for later), 04-d-switch (04b as a
   dialog), 04-d-pick (the picker and a failed read), 04-d-narrow (1000
   wide), 04-d-states (empty, failed, loading, no counter, closed 43e, a
   stranded line). Brief: docs/design/pharmacy/briefs/2026-10-08_desktop-
   slice-D2.md.

   Tiers: >=901 the page in the 1200 column (one exit, "Your basket" as
   the title, the lines as one white card of one-line rows with the
   prescription line as its last row, Kept for later bordered, 04b and
   the picker as centred dialogs) · 901-1119 the counter as a band under
   the title, "Before you pay" two facts side by side, the fixed foot bar
   at the window's width (04-d-narrow) · >=1120 the counter, the money,
   "Before you pay" and Checkout as one sticky 340 card beside the lines.
   The compact header search (>=1240) and the lit Basket are D0's.

   Loaded after app.css and desktop/shared.css. Every rule sits inside a
   min-width query, so the phone (<=900px) is untouched. The card's nodes
   are the code's own, MOVED there by js/pharmacy/basket-page.js
   (placeDesktop). On this page `#vm-bk .vm-sheet--bk` (the phone's
   height cap) outranks shared.css's dialog cap, so the dialog's height,
   radius and width are settled here (section 8). Literal values only.

   19 (pharmacy/kept.html, Kept for later) links this file too (desktop
   slice D14): its rows are kept-row.js's one row, the same as 04's Kept
   for later, so the row's grid (section 4) and the line's tile, name,
   unit and figure (section 3) are written once, for both roots, as
   :is(#vm-bk, #vm-kp) (the id's weight, as before). 19-kept.css keeps
   only what 19 draws differently. Every other rule here is #vm-bk's.

   Sections (the frame's order):
     1. The page frame and the head
     2. The counter: the band (901-1119), the card's head (>=1120)
     3. The lines: one card, the prescription line its last row
     4. Kept for later
     5. Before you pay
     6. The card (>=1120): the money and Checkout
     7. The foot bar at the window's width (901-1119)
     8. 04b and the picker, as dialogs
     9. States: empty, failed (Try again), loading, closed
   ==================================================================== */


/* ====================================================================
   1. THE PAGE FRAME AND THE HEAD
   The column unwinds (vm-dt-shell) into the 1200 one: the exit (the
   route's label), "Your basket" at 36 (40 from 1120), no count beside it.
   From 1120 a grid puts the card in a 340 column beside the lines, its
   top level with the title (12 + 44 + 12 = 68).
   ==================================================================== */
@media (min-width: 901px) {
    #vm-bk.vm-dt-shell { padding: 0 max(24px, calc((100% - 1152px) / 2)); }
    #vm-bk .vm-bk-top {
        position: static;
        z-index: auto;
        background: transparent;
    }
    #vm-bk .vm-bk-head {
        gap: 8px;
        padding: 12px 0 0;
        background: transparent;
        border-bottom: 0;
    }
    #vm-bk .vm-bk-back { font-size: 13.5px; }
    #vm-bk .vm-bk-title {
        font-size: 36px;
        letter-spacing: -1.1px;
        line-height: 1.08;
    }
    #vm-bk .vm-bk-body {
        gap: 16px;
        padding: 16px 0 24px;
    }
    #vm-bk.has-foot .vm-bk-body { padding-bottom: 136px; }
}

@media (min-width: 1120px) {
    #vm-bk.vm-dt-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        align-content: start;
        align-items: start;
        padding-bottom: 64px;
    }
    /* Column 1, rows by order: whatever stands before the page (a band)
       keeps its own row above it. */
    #vm-bk .vm-bk-top { grid-column: 1; }
    #vm-bk .vm-bk-head { gap: 12px; }
    #vm-bk .vm-bk-title { font-size: 40px; letter-spacing: -1.2px; }
    #vm-bk .vm-bk-body {
        grid-column: 1;
        min-width: 0;
        padding: 24px 0 0;
    }
    #vm-bk.has-foot .vm-bk-body { padding-bottom: 0; }
    #vm-bk .vm-bk-side {
        grid-column: 2;
        grid-row: 1 / span 2;
        position: sticky;
        top: 88px;
        align-self: start;
        min-width: 0;
        margin-top: 68px;
    }
    #vm-bk .vm-bk-side:not(:has(> .vm-bk-side-card > :not([hidden]))) { display: none; }
}


/* ====================================================================
   2. THE COUNTER
   901-1119 (04-d-narrow): a rounded mint band under the title, the
   cover 44, the name 16, the code's sub, the white Change. From 1120 it
   is the card's head, D0's side head: the cover 48 with its white ring,
   edge to edge.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-bk .vm-bk-counter {
        justify-content: flex-start;
        gap: 12px;
        margin-top: 18px;
        padding: 12px 12px 12px 14px;
        border-radius: 16px;
        background: #e3f4f0;
    }
    #vm-bk .vm-bk-counter-main { flex: 1 1 auto; }
    #vm-bk .vm-bk-counter-name {
        font-size: 16px;
        letter-spacing: -.3px;
        line-height: 1.25;
    }
    #vm-bk .vm-bk-counter-sub { font-size: 12.5px; line-height: 1.35; }
    #vm-bk .vm-bk-counter-btn { font-size: 13.5px; }
    #vm-bk .vm-bk-counter-btn:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    #vm-bk .vm-bk-cover { width: 44px; height: 44px; border-radius: 11px; }
    @media (hover: hover) {
        #vm-bk .vm-bk-counter-btn:hover { box-shadow: inset 0 0 0 1.5px #16a085; color: #0f6d5c; }
    }
}

@media (min-width: 1120px) {
    #vm-bk .vm-bk-side .vm-bk-counter {
        margin: 0;
        padding: 14px;
        border-radius: 0;
    }
    #vm-bk .vm-bk-side .vm-bk-cover { width: 48px; height: 48px; border-radius: 12px; }
}


/* ====================================================================
   3. THE LINES: ONE CARD, THE PRESCRIPTION LINE ITS LAST ROW
   Rows on one line: the tile (the line's photo, the glyph plate when
   none) | the name (teal under the mouse) over its unit line | the
   stepper | the line's price, right-aligned in one column. The tile and
   the name open the line's page (03). A stranded line: its reason under
   the name, the two ways out where the stepper and price stand. The
   prescription line (04's design pass): a hairline, the blue state line
   over its name, the box price, the inset row under that, the blue pill
   where the stepper and price stand. The stepper's tooltips are D0's
   .vm-dt-tip.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-bk .vm-bk-card {
        padding: 4px 24px;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-bk .vm-bk-card > .vm-bk-row {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto 112px;
        gap: 0 20px;
        align-items: center;
        padding: 18px 0;
    }
    #vm-bk .vm-bk-card > * + * { border-top: 1px solid #eef1f5; }
    #vm-bk .vm-bk-card > .vm-bk-row > .vm-bk-main,
    #vm-bk .vm-bk-card > .vm-bk-row .vm-bk-ctrl { display: contents; }

    /* -- The tile: 64, the plate's gradient, the photo or the glyph (04's
       lines and 19's rows). */
    :is(#vm-bk, #vm-kp) .vm-bk-tile {
        width: 64px;
        height: 64px;
        overflow: hidden;
        border-radius: 14px;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
        font-size: 22px;
    }
    :is(#vm-bk, #vm-kp) .vm-bk-tile img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #vm-bk .vm-bk-tilelink {
        display: block;
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }
    #vm-bk .vm-bk-card > .vm-bk-row > .vm-bk-tilelink { grid-column: 1; grid-row: 1 / span 2; }

    /* -- The words (04's lines and 19's rows). */
    :is(#vm-bk, #vm-kp) .vm-bk-name {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -.3px;
        line-height: 1.25;
        color: #0f172a;
        transition: color .16s ease;
    }
    #vm-bk .vm-bk-namelink {
        display: block;
        justify-self: start;
        color: inherit;
        text-decoration: none;
    }
    #vm-bk .vm-bk-namelink:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; border-radius: 4px; }
    :is(#vm-bk, #vm-kp) .vm-bk-unit {
        margin-top: 4px;
        font-size: 13px;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }
    #vm-bk .vm-bk-card > .vm-bk-row .vm-bk-namelink { grid-column: 2; grid-row: 1; align-self: end; }
    #vm-bk .vm-bk-card > .vm-bk-row .vm-bk-unit,
    #vm-bk .vm-bk-card > .vm-bk-row .vm-bk-reason { grid-column: 2; grid-row: 2; align-self: start; }

    /* -- The stepper and the price. */
    #vm-bk .vm-bk-card > .vm-bk-row .vm-bk-step { grid-column: 3; grid-row: 1 / span 2; }
    #vm-bk .vm-bk-qty { font-size: 15px; min-width: 28px; }
    #vm-bk .vm-bk-stepbtn:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    #vm-bk .vm-bk-card > .vm-bk-row .vm-bk-price {
        grid-column: 4;
        grid-row: 1 / span 2;
        justify-content: flex-end;
        gap: 4px;
    }
    :is(#vm-bk, #vm-kp) .vm-bk-fig { font-size: 18px; letter-spacing: -.2px; }
    :is(#vm-bk, #vm-kp) .vm-bk-cur { font-size: 11px; color: #64748b; }
    /* A row with no unit line is one line high. */
    #vm-bk .vm-bk-card > .vm-bk-row:not(:has(.vm-bk-unit, .vm-bk-reason)) :is(.vm-bk-tilelink, .vm-bk-namelink, .vm-bk-step, .vm-bk-price) {
        grid-row: 1;
        align-self: center;
    }

    /* -- A line out of stock since it was added: the reason, the ways out. */
    #vm-bk .vm-bk-row.is-out .vm-bk-name { color: #334155; }
    #vm-bk .vm-bk-reason {
        margin-top: 4px;
        font-size: 13px;
        font-weight: 600;
        color: #475569;
    }
    #vm-bk .vm-bk-ways { gap: 8px; margin-top: 0; }
    #vm-bk .vm-bk-card > .vm-bk-row .vm-bk-ways {
        grid-column: 3 / 5;
        grid-row: 1 / span 2;
        justify-self: end;
    }
    #vm-bk .vm-bk-way {
        flex: none;
        padding: 0 16px;
        background: #f1f5f9;
        color: #334155;
        font-size: 13.5px;
        white-space: nowrap;
    }
    #vm-bk .vm-bk-way--find { color: #0f6d5c; }
    #vm-bk .vm-bk-way:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* -- The prescription line, the card's last row: the code's block
       (.vm-bk-rx) and its parts by their own class names. */
    #vm-bk .vm-bk-card > .vm-bk-rx {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        gap: 0 20px;
        align-items: center;
        padding: 18px 0 20px;
        overflow: visible;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    #vm-bk .vm-bk-card > .vm-bk-rx > .vm-bk-rx-body,
    #vm-bk .vm-bk-card > .vm-bk-rx > .vm-bk-rx-foot,
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-row { display: contents; }
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-tilelink { grid-column: 1; grid-row: 1 / 3; }
    /* The blue state line: the block's first line. */
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-state {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        gap: 7px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #1b6fa8;
    }
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-state i { font-size: 12px; }
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-main {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        min-width: 0;
    }
    /* The blue pill (or, on a line this counter cannot fill, the two ways
       out) where the stepper and the price stand. */
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-cta,
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-ways {
        grid-column: 3;
        grid-row: 1 / 3;
    }
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-cta {
        width: auto;
        height: 48px;
        padding: 0 22px;
        gap: 9px;
        background: #1b6fa8;
        white-space: nowrap;
    }
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-cta:focus-visible { outline: 2px solid #1b6fa8; outline-offset: 2px; }
    /* The inset row under the box price (the pharmacy-advice glyph). */
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-note {
        grid-column: 2 / 4;
        grid-row: 3;
        justify-self: start;
        max-width: 420px;
        margin-top: 12px;
        gap: 10px;
        padding: 10px 14px;
        background: #f8fafc;
    }
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-note i { font-size: 13px; }
    #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-note span { font-size: 13px; line-height: 1.45; }

    @media (hover: hover) {
        #vm-bk .vm-bk-namelink:hover .vm-bk-name { color: #0f6d5c; }
        #vm-bk .vm-bk-stepbtn:hover { color: #0f6d5c; box-shadow: inset 0 0 0 1.5px #16a085; }
        #vm-bk .vm-bk-way:hover { box-shadow: inset 0 0 0 1.5px #16a085; }
        #vm-bk .vm-bk-card > .vm-bk-rx .vm-bk-rx-cta:hover { background: #155a8a; color: #fff; }
    }
    @media (prefers-reduced-motion: reduce) {
        :is(#vm-bk, #vm-kp) .vm-bk-name { transition: none; }
    }
}


/* ====================================================================
   4. KEPT FOR LATER (04-d-kept)
   19b's group, last in the lines column, bordered (nothing in it is
   being bought yet): the heading at 15, then 19's row on the lines'
   grid: the tile | the name and its pack | Put back (mint) and a quiet
   Remove | the price in the same right-hand column. "See all N" footed.
   The row's grid is 19's page's too (:is(#vm-bk, #vm-kp), D14).
   ==================================================================== */
@media (min-width: 901px) {
    #vm-bk [data-kept] {
        border-color: #e2e8f0;
        border-radius: 18px;
    }
    /* 23 + the 1px border = the lines card's 24, so the prices share one
       right-hand column with the lines above. */
    #vm-bk .vm-bk-ghead {
        padding: 18px 23px 0;
        font-size: 15px;
        letter-spacing: -.2px;
    }
    #vm-bk [data-kept] .vm-kp-rows { padding: 0 23px; }
    :is(#vm-bk, #vm-kp) .vm-kp-row {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto 112px;
        gap: 0 20px;
        align-items: center;
        padding: 18px 0;
    }
    :is(#vm-bk, #vm-kp) .vm-kp-row + .vm-kp-row { border-top: 1px solid #eef1f5; }
    :is(#vm-bk, #vm-kp) .vm-kp-row > .vm-bk-main,
    :is(#vm-bk, #vm-kp) .vm-kp-row .vm-kp-line { display: contents; }
    :is(#vm-bk, #vm-kp) .vm-kp-row > .vm-bk-tile { grid-column: 1; grid-row: 1; }
    :is(#vm-bk, #vm-kp) .vm-kp-words { grid-column: 2; grid-row: 1; min-width: 0; }
    :is(#vm-bk, #vm-kp) .vm-kp-ctrl {
        grid-column: 3;
        grid-row: 1;
        gap: 6px;
        margin-top: 0;
    }
    :is(#vm-bk, #vm-kp) .vm-kp-row .vm-bk-price {
        grid-column: 4;
        grid-row: 1;
        justify-content: flex-end;
        gap: 4px;
    }
    :is(#vm-bk, #vm-kp) .vm-kp-pill { font-size: 13.5px; }
    :is(#vm-bk, #vm-kp) .vm-kp-remove {
        margin: 0;
        color: #475569;
        font-size: 13.5px;
    }
    #vm-bk .vm-kp-row p:has(> .fa-file-prescription) { font-size: 12px; }
    #vm-bk .vm-kp-box,
    #vm-bk .vm-kp-note { font-size: 13px; }
    #vm-bk .vm-kp-door {
        height: 52px;
        border-top-color: #eef1f5;
        font-variant-numeric: tabular-nums;
    }
    :is(#vm-bk, #vm-kp) .vm-kp-pill:focus-visible,
    :is(#vm-bk, #vm-kp) .vm-kp-remove:focus-visible,
    #vm-bk .vm-kp-door:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    @media (hover: hover) {
        #vm-bk .vm-kp-pill:hover { box-shadow: inset 0 0 0 1.5px #16a085; }
        :is(#vm-bk, #vm-kp) .vm-kp-remove:hover { color: #0f172a; }
        #vm-bk .vm-kp-door:hover { background: #f8fafc; }
    }
}


/* ====================================================================
   5. BEFORE YOU PAY
   901-1119: one bordered card, its two facts side by side. From 1120
   (section 6) a #f8fafc inset under the figure, not lifted: it names what
   the figure leaves out and is not actionable. The code's words.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-bk [data-facts] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        padding: 4px 20px;
        border-color: #e2e8f0;
        border-radius: 18px;
    }
    #vm-bk .vm-bk-frow { padding: 11px 0; }
    #vm-bk .vm-bk-frow + .vm-bk-frow { border-top: 0; }
    #vm-bk .vm-bk-flabel { font-size: 13px; line-height: 1.35; }
    #vm-bk .vm-bk-fsub {
        margin-top: 2px;
        font-size: 12.5px;
        color: #475569;
        text-wrap: pretty;
    }
}


/* ====================================================================
   6. THE CARD (>=1120)
   One sticky card, 02's panel width: the counter's head; the total "so
   far" at 22 (02's size; the phone's rule keeps it off the headline
   scale) over the count in two rows, the second in prescription blue;
   "Before you pay"; then the solid Checkout. The foot's box dissolves
   (display: contents) so its figure and its act can sit either side of
   the facts. 43e's closed block takes Checkout's place, and the head's
   Change goes while it shows (one door to the same dialog per card).
   ==================================================================== */
@media (min-width: 1120px) {
    /* The card's shell is D0's .vm-dt-side-shell (basket-page.js sets it). */
    #vm-bk .vm-bk-side-card {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding-bottom: 18px;
        line-height: 1.5;
    }
    #vm-bk .vm-bk-side .vm-bk-counter { order: 0; margin-bottom: 4px; }
    #vm-bk .vm-bk-side .vm-bk-foot { display: contents; }
    #vm-bk .vm-bk-side .vm-bk-foot-main { order: 1; margin: 0 18px; }
    #vm-bk .vm-bk-side [data-facts] {
        order: 2;
        display: block;
        margin: 0 18px;
        padding: 2px 14px;
        border: 0;
        border-radius: 12px;
        background: #f8fafc;
    }
    #vm-bk .vm-bk-side .vm-bk-frow + .vm-bk-frow { border-top: 1px solid #eef1f5; }
    #vm-bk .vm-bk-side [data-closed] {
        order: 3;
        margin: 0 18px;
        padding: 0;
        gap: 14px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    #vm-bk .vm-bk-side .vm-bk-checkout {
        order: 4;
        margin: 0 18px;
        height: 52px;
        justify-content: center;
        gap: 9px;
        font-size: 15px;
    }
    #vm-bk .vm-bk-side-card:has(> [data-closed]:not([hidden])) .vm-bk-counter-btn { display: none; }
    #vm-bk .vm-bk-side .vm-cz-block { padding: 14px; border-radius: 14px; }
    #vm-bk .vm-bk-side .vm-cz-bk-t { font-size: 16px; letter-spacing: -.3px; line-height: 1.3; }
    #vm-bk .vm-bk-side .vm-cz-change { width: 100%; }
}

/* -- The money, every desktop width: 22 "so far", the count in two rows. */
@media (min-width: 901px) {
    #vm-bk .vm-bk-foot-total { gap: 5px; }
    #vm-bk .vm-bk-foot-fig { font-size: 22px; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
    #vm-bk .vm-bk-foot-cur { font-size: 12px; color: #64748b; }
    #vm-bk .vm-bk-foot-sub {
        margin-top: 3px;
        font-size: 12.5px;
        line-height: 1.4;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }
    #vm-bk .vm-bk-foot-prescription {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-top: 6px;
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.4;
        color: #1b6fa8;
        font-variant-numeric: tabular-nums;
    }
    #vm-bk .vm-bk-foot-prescription i { font-size: 12px; }
    #vm-bk .vm-bk-checkout:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    @media (hover: hover) {
        /* The solid is the phone's #0f6d5c (AA under text), so its hover
           is one step darker. */
        #vm-bk .vm-bk-checkout:not(.is-inert):hover { background: #0c5b4c; color: #fff; }
    }
}


/* ====================================================================
   7. THE FOOT BAR AT THE WINDOW'S WIDTH (901-1119, 04-d-narrow)
   No card: the phone's fixed bar spans the window, its content in the
   column: the figure and the two-row count at the left, Checkout 260 at
   the right.
   ==================================================================== */
@media (min-width: 901px) and (max-width: 1119px) {
    #vm-bk .vm-bk-foot {
        left: 0;
        right: 0;
        width: auto;
        max-width: none;
        transform: none;
        gap: 16px;
        padding: 12px max(24px, calc((100% - 1152px) / 2)) 14px;
        border-top: 1px solid #e2e8f0;
    }
    #vm-bk .vm-bk-checkout {
        width: 260px;
        height: 52px;
        justify-content: center;
        gap: 9px;
        font-size: 15px;
    }
}


/* ====================================================================
   8. 04b AND THE PICKER, AS DIALOGS (04-d-switch, 04-d-pick)
   D0's centred dialog, settled here: the comparison 760 wide, the picker
   480, a failed read 420; radius 20; at most the window less 96px tall.
   The comparison takes two columns: the mode block first across both,
   what moves and what does not at the left, the new basket and the two
   named buttons stacked in a 280 column at the right. No X: Stay, the
   scrim and Escape close it (the phone's code). Picker rows lead with
   the counter's cover and end on a chevron.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-bk .vm-sheet--bk.is-open {
        width: 480px;
        max-height: calc(100vh - 96px);
        padding-top: 0;
        border-radius: 20px;
        box-shadow: 0 24px 64px rgba(15, 23, 42, .28);
    }
    #vm-bk .vm-sheet--bk.is-open[data-sw-mode="compare"] { width: 760px; }
    #vm-bk .vm-sheet--bk.is-open[data-sw-mode="fail"] { width: 420px; }

    #vm-bk .vm-sw-head { padding: 24px 28px 0; }
    #vm-bk .vm-sw-name {
        font-size: 22px;
        letter-spacing: -.4px;
        line-height: 1.2;
    }
    #vm-bk .vm-sw-meta {
        margin-top: 5px;
        font-size: 13.5px;
        color: #475569;
    }
    #vm-bk .vm-sw-body { gap: 16px; padding: 18px 28px 28px; }
    #vm-bk .vm-sw-mode {
        align-items: center;
        gap: 12px;
        padding: 13px 16px;
        border-radius: 14px;
    }
    #vm-bk .vm-sw-mode i { margin-top: 0; font-size: 14px; }
    #vm-bk .vm-sw-mode p { font-size: 13.5px; font-weight: 600; line-height: 1.45; }

    #vm-bk .vm-sw-cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 20px;
        align-items: start;
    }
    #vm-bk .vm-sw-main,
    #vm-bk .vm-sw-side {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 0;
    }

    #vm-bk .vm-sw-box { border-color: #e2e8f0; border-radius: 16px; }
    #vm-bk .vm-sw-boxhead { gap: 12px; padding: 13px 16px 11px; }
    #vm-bk .vm-sw-boxtitle { font-size: 15px; }
    #vm-bk .vm-sw-dir { font-size: 12px; color: #64748b; }
    #vm-bk .vm-sw-row { gap: 12px; padding: 12px 16px; border-top-color: #eef1f5; }
    #vm-bk .vm-sw-rowname { font-size: 14px; }
    #vm-bk .vm-sw-rowpack { font-size: 12.5px; color: #64748b; }
    #vm-bk .vm-sw-prices { gap: 8px; }
    #vm-bk .vm-sw-old { font-size: 13px; color: #64748b; }
    #vm-bk .vm-sw-prices i { font-size: 10px; color: #64748b; }
    #vm-bk .vm-sw-new { font-size: 16px; }
    #vm-bk .vm-sw-box--stuck .vm-sw-boxhead { padding: 13px 16px 0; }
    #vm-bk .vm-sw-stuck { padding: 9px 16px 13px; }
    #vm-bk .vm-sw-why { font-size: 13px; color: #475569; }
    #vm-bk .vm-sw-stuckfoot { padding: 12px 16px; border-top-color: #eef1f5; }

    #vm-bk .vm-sw-sum { gap: 10px; padding: 16px; border-radius: 16px; }
    #vm-bk .vm-sw-sumsub { padding: 10px 12px; }
    #vm-bk .vm-sw-acts { gap: 12px; margin-top: 0; }
    #vm-bk .vm-sw-second {
        height: 48px;
        background: #f1f5f9;
        color: #334155;
        font-size: 14px;
    }
    #vm-bk .vm-sw-primary:focus-visible,
    #vm-bk .vm-sw-second:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* -- The picker. */
    #vm-bk .vm-sheet--bk[data-sw-mode="picker"] .vm-sw-head { padding: 22px 24px 14px; }
    #vm-bk .vm-sheet--bk[data-sw-mode="picker"] .vm-sw-body { padding: 0 20px 20px; }
    #vm-bk .vm-sw-pick {
        min-height: 64px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 10px 14px;
        background: #fff;
    }
    #vm-bk .vm-sw-pick + .vm-sw-pick { border-top-color: #eef1f5; }
    #vm-bk .vm-sw-pick-cover {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        overflow: hidden;
        border-radius: 10px;
        background: #f1f5f9;
    }
    #vm-bk .vm-sw-pick-cover img { width: 100%; height: 100%; object-fit: cover; }
    #vm-bk .vm-sw-pick-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    #vm-bk .vm-sw-pick-name {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.2px;
        color: #0f172a;
    }
    #vm-bk .vm-sw-pick-meta { font-size: 12.5px; color: #64748b; }
    #vm-bk .vm-sw-pick.is-closed { background: #f8fafc; }
    /* The chevron: a drawn stroke (each row opens the comparison). */
    #vm-bk button.vm-sw-pick::after {
        content: '';
        width: 8px;
        height: 8px;
        margin-right: 4px;
        flex-shrink: 0;
        border-top: 2px solid #0f6d5c;
        border-right: 2px solid #0f6d5c;
        transform: rotate(45deg);
    }
    #vm-bk button.vm-sw-pick:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    /* -- A failed read: the code's words and its one Close. */
    #vm-bk .vm-sheet--bk[data-sw-mode="fail"] .vm-sw-head { padding: 22px 24px 0; }
    #vm-bk .vm-sheet--bk[data-sw-mode="fail"] .vm-sw-body { gap: 14px; padding: 14px 24px 24px; }
    #vm-bk .vm-sw-none { font-size: 14px; color: #475569; }

    @media (hover: hover) {
        #vm-bk button.vm-sw-pick:hover { background: #f8fafc; }
        #vm-bk .vm-sw-primary:hover { background: #0c5b4c; color: #fff; }
        #vm-bk .vm-sw-second:hover { box-shadow: inset 0 0 0 1.5px #cbd5e1; }
        #vm-bk .vm-sw-stuckfoot .vm-bk-way:hover { box-shadow: inset 0 0 0 1.5px #16a085; }
    }
}


/* ====================================================================
   9. STATES (04-d-states)
   Nothing in the basket: the code's two lines and Browse medicines, the
   one way on, solid. A failed read: the same card, "We could not load
   your basket", one solid Try again (basket-page.js). Loading: the
   code's line. The no-counter card's dimmed Checkout is the phone's own
   dimmed teal ("as the code draws it").
   ==================================================================== */
@media (min-width: 901px) {
    #vm-bk .vm-loading { padding: 24px 0; font-size: 14px; color: #64748b; }
    #vm-bk .vm-bk-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 32px 24px;
        border-radius: 18px;
        text-align: center;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    #vm-bk .vm-bk-empty-title { font-size: 15px; line-height: 1.4; }
    #vm-bk .vm-bk-empty-sub {
        margin-top: 0;
        font-size: 13.5px;
        color: #475569;
        text-wrap: pretty;
    }
    #vm-bk .vm-bk-empty-link {
        height: 48px;
        margin-top: 6px;
        padding: 0 24px;
        border-radius: 999px;
        background: #0f6d5c;
        color: #fff;
        font-size: 14px;
        box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    }
    #vm-bk .vm-bk-empty-link[data-retry] { padding: 0 26px; }
    #vm-bk .vm-bk-empty-link:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    @media (hover: hover) {
        #vm-bk .vm-bk-empty-link:hover { background: #0c5b4c; color: #fff; }
    }
}