/* ====================================================================
   SCREEN 25 — MY SHELF (the counter side), the desktop layer (desktop
   slice D11, 2026-10-09). pharmacy/shelf.html only, linked after
   desktop/shared.css.

   Frames: 25-d (25a, Pharmacie de la Paix), 25-d-add (25b), 25-d-new and
   25-d-row (25c), 25-d-narrow (1000 wide) and 25-d-states in
   docs/design/pharmacy/screens/25/desktop/frame.html; the records are
   screens/desktop-15-25/records/Screen 25 - desktop work order.md and
   … design pass.md (approved and folded, with the three calls). Brief:
   briefs/2026-10-09_desktop-slice-D11.md.

   Tiers: >=901 the layer — the 480 column unwinds (.vm-dt-shell); the
   counter's own header (shared §12, filled by shelf.js through
   owner-head.js), the fixed bar not drawn; 25a's band is the headline
   card's lines (.vm-dt-row-band, shared §13; shelf.js moves them), folded
   away while a find is held; main one column (Your counter, find | Add,
   the groups as a ledger, the folded block in the code's place); 25b and
   25c one 764 column under 18-d's flow band (shared §13), 25c's commit at
   the card's foot · >=1120 25a in two columns:
   find | Add and the open groups (764) | the folded groups and Your
   counter (340, not sticky, .vm-dt-aside--flow).

   Hooks this file reaches by class: the page's own .vm-sh-* / .vm-sb-*
   markup, the bar's .vm-q-*, and what shelf.js adds from 901: the band's
   .vm-sh-bandstate / .vm-sh-bandsub / .vm-sh-bandside and .has-state, the
   column .vm-sh-side with .vm-sh-foldside (from 1120), the rows' shared
   ledger classes (.vm-dt-ledger-*, in the mint form on the open group,
   .vm-dt-ledger--mint, D14: the mint tile, the name at 700, the money at
   17 in ink and the teal chevron are shared.css §14's).

   Shared since D14 (shared.css): Take off my shelf and Take it off are
   §15's quiet act; Try again
   and the mint pills' ring are §9's; the open groups are §14's mint
   ledger. Still here: the 25b/25c band is the flow band laid as a grid
   (the exit spanning the title and the box's facts under it); the
   no-counter card (09-queue.css §6's, its own sizes); the open group
   draws its own container edges (its head sits inside it).

   Sections, in the frame's order:
     1. The page, the counter's header (its Queue count), the bar gone
     2. 25a: the band from the headline card's lines
     3. 25a: main — Your counter, find | Add, the groups as a ledger
     4. 25a: the 340 column from 1120 (the folded groups, Your counter)
     5. 25b and 25c: the flow band and the one 764 column
     6. 25b: the name on the box, "Which box is it?", 38a's door
     7. 25c: the card in two halves, its rows, the commit at its foot
     8. (38b: superseded by desktop slice G3 — Describe the box is a page
        in the add flow, desktop/38-describe.css, not the interim dialog)
     9. States (25-d-states): failed read, nothing matches, the empty
        shelf, the take-off confirm and its refusal, no counter, 47i
   ==================================================================== */


/* ====================================================================
   1. THE PAGE, THE COUNTER'S HEADER, THE BAR GONE
   The page is #f8fafc (25-d's ground: the counter's pages take no wash).
   The header's Queue count is prescription blue, painted here (shared.css
   is the exams side's too). An account that runs no counter: from 901
   the header keeps no identity and no tabs (25-d-states), so the band's
   material alone stands where it would be, and the placeholder stays
   empty.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sh.vm-dt-shell { background: #f8fafc; }
    /* (The phone's tab bar and its spacer: shared §2, since E10.) */

    .vm-dt-ohead-badge { background: #1b6fa8; }

    #vm-sh .vm-sh-view[data-view="shelf"]:has(> [data-noowner]:not([hidden]))::before {
        content: '';
        display: block;
        flex-shrink: 0;
        height: 64px;
        background:
            radial-gradient(70% 120% at 88% 0%, rgba(143, 240, 139, .14) 0%, rgba(15, 109, 92, 0) 58%),
            linear-gradient(180deg, #12775f 0%, #11735d 100%);
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    }
}


/* ====================================================================
   2. 25a: THE BAND
   shared §13's one-row band. shelf.js moves the headline card's lines
   into it: "On sale to customers" over the count at 40 (36 below 1120),
   then one sentence at 16 — "N products on your shelf." and the Not today
   row run on, that row in white (the frame's emphasis) — and "See your
   shop as customers do" at its right, beside the sentence it proves. The
   empty shelf says so at 30 with its line under it, no door. The name
   lines go (the header says them); "My shelf" stays the page's heading,
   read but not drawn while the band holds the lines, and drawn at 40
   when it holds none (47i).
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sh-band.vm-dt-row-band { position: relative; }
    .vm-sh-band .vm-sh-id { display: none; }
    .vm-sh-band .vm-sh-title {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        margin: 0;
        font-size: 36px;
        letter-spacing: -1.2px;
        line-height: 1.1;
    }
    .vm-sh-band.has-state .vm-sh-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .vm-sh-bandstate { grid-column: 1; grid-row: 1; }
    .vm-sh-bandside { grid-column: 2; grid-row: 1; }

    .vm-sh-band .vm-sh-lead-k {
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.5;
        color: #e2e8f0;
    }
    .vm-sh-band .vm-sh-lead-h {
        margin-top: 6px;
        font-size: 36px;
        letter-spacing: -1.2px;
        line-height: 1.1;
        color: #fff;
        text-wrap: balance;
    }
    .vm-sh-band .vm-sh-lead-sub,
    .vm-sh-band .vm-sh-lead-rows,
    .vm-sh-band .vm-sh-lead-row,
    .vm-sh-band .vm-sh-lead-row > span {
        display: inline;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        font-size: inherit;
        line-height: inherit;
        color: inherit;
    }
    .vm-sh-band .vm-sh-lead-rows { margin-left: .25em; }
    .vm-sh-band .vm-sh-lead-row > i { display: none; }
    .vm-sh-band .vm-sh-lead-row > span { font-weight: 600; color: #fff; }

    .vm-sh-band .vm-sh-state-h {
        margin: 0;
        font-size: 30px;
        letter-spacing: -.6px;
        line-height: 1.1;
        color: #fff;
        text-wrap: balance;
    }
    .vm-sh-band .vm-sh-state-p {
        font-size: inherit;
        line-height: inherit;
        color: inherit;
    }

    .vm-sh-band .vm-sh-shopdoor {
        align-self: flex-end;
        width: auto;
        height: 44px;
        padding: 0 4px 0 12px;
        background: transparent;
        color: #fff;
        font-size: 13.5px;
        white-space: nowrap;
    }
    .vm-sh-band .vm-sh-shopdoor:focus-visible { outline-color: #fff; }
    @media (hover: hover) {
        .vm-sh-band .vm-sh-shopdoor:hover { color: #8ff08b; }
    }
}

@media (min-width: 1120px) {
    .vm-sh-band .vm-sh-title,
    .vm-sh-band .vm-sh-lead-h { font-size: 40px; }
}


/* ====================================================================
   3. 25a: MAIN
   From 901 one column (860 at 1000, centred: 25-d-narrow) in the code's
   order: Your counter, "Find on your shelf" | the solid "Add a product"
   on one row (the pill moves out of the headline card to the field it
   answers), the open groups, then the folded block in the code's place.
   The groups are a ledger (16-d's): the group's name at 17 and its count,
   then one bordered container of 64 rows — tile | name over form · pack |
   state 120 | money 112 | chevron — and "All N …" at its foot.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sh .vm-sh-body {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 28px 24px 64px;
        gap: 28px;
    }
    #vm-sh .vm-sh-view[data-view="shelf"] > .vm-sh-body { max-width: 908px; }
    #vm-sh .vm-sh-body > .vm-loading { padding: 4px 2px; font-size: 14px; color: #64748b; }

    .vm-sh-shelf {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 28px;
        align-items: center;
    }
    .vm-sh-shelf > * { min-width: 0; }
    .vm-sh-shelf > .vm-sh-counter { grid-column: 1 / -1; grid-row: 1; }
    .vm-sh-shelf > .vm-sh-find { grid-column: 1; grid-row: 2; }
    .vm-sh-shelf > .vm-sh-lead { grid-column: 2; grid-row: 2; }
    .vm-sh-shelf > .vm-sh-state--empty { grid-column: 1 / -1; grid-row: 2; }
    .vm-sh-shelf > .vm-sh-groups { grid-column: 1 / -1; grid-row: 3; }

    /* The headline card gives its lines to the band: only Add stays. */
    .vm-sh-lead {
        display: block;
        padding: 0;
        overflow: visible;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .vm-sh-lead-in { display: none; }
    .vm-sh-shelf .vm-sh-add {
        width: auto;
        height: 52px;
        padding: 0 24px 0 20px;
        white-space: nowrap;
    }

    /* Your counter (29's door): lifted, 76. */
    .vm-sh-counter {
        min-height: 76px;
        padding: 14px 18px 14px 16px;
        gap: 14px;
        border: 0;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    .vm-sh-counter-tile { width: 40px; height: 40px; border-radius: 12px; }
    .vm-sh-counter-t { font-size: 15.5px; font-weight: 700; }
    .vm-sh-counter-s { margin-top: 3px; font-size: 14px; color: #475569; line-height: 1.45; }

    /* "Find on your shelf": the 52 pill. */
    .vm-sh-find {
        height: 52px;
        padding: 0 4px 0 18px;
        gap: 11px;
        border-radius: 999px;
        border-color: #cbd5e1;
    }
    .vm-sh-find:focus-within { border-color: #16a085; box-shadow: 0 0 0 4px rgba(22, 160, 133, .12); }
    .vm-sh-find > i { color: #64748b; }
    .vm-sh-findin { font-size: 15px; }
    .vm-sh-findx { background: transparent; color: #475569; }

    /* The groups. */
    .vm-sh-groups { gap: 28px; }
    .vm-sh-group:not(.vm-sh-group--fold) {
        padding: 0;
        gap: 0;
        border-radius: 0;
        background: none;
    }
    .vm-sh-ghead {
        justify-content: space-between;
        gap: 12px;
        padding: 0 4px 10px;
    }
    .vm-sh-ghead .vm-sh-gname {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 17px;
        letter-spacing: -.3px;
    }
    .vm-sh-ghead .vm-sh-gcount,
    .vm-sh-fold .vm-sh-gcount {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: #64748b;
        font-variant-numeric: tabular-nums;
    }

    /* The ledger: shared §14's row in its mint form (on the group). The
       group draws the container's edges itself (its head sits inside it). */
    .vm-sh-row.vm-dt-ledger-row {
        grid-template-columns: 40px minmax(0, 1fr) 120px 112px 14px;
        border-left: 1px solid #e2e8f0;
        border-right: 1px solid #e2e8f0;
        line-height: normal;
    }
    .vm-sh-row > *,
    .vm-sh-row > .vm-sh-right > * { grid-row: 1; }
    .vm-sh-row > .vm-sh-right { display: contents; }
    .vm-sh-row .vm-dt-ledger-tile { grid-column: 1; }
    .vm-sh-row .vm-dt-ledger-main { grid-column: 2; }
    .vm-sh-row .vm-dt-ledger-name {
        font-family: 'Inter', -apple-system, sans-serif;
        letter-spacing: 0;
    }
    .vm-sh-row .vm-dt-ledger-line {
        margin-top: 3px;
        color: #64748b;
    }
    .vm-sh-row .vm-sh-stlabel {
        margin-top: 2px;
        font-size: 12.5px;
        color: #475569;
    }
    .vm-sh-row .vm-dt-ledger-col {
        grid-column: 3;
        justify-self: end;
        font-size: 13.5px;
        font-weight: 600;
        color: #0f172a;
        text-align: right;
    }
    .vm-sh-row .vm-sh-st--off { color: #475569; }
    .vm-sh-row .vm-dt-ledger-money {
        grid-column: 4;
        justify-self: end;
        gap: 3px;
    }
    .vm-sh-row .vm-sh-fig { font-size: 17px; letter-spacing: -.3px; color: #0f172a; }
    .vm-sh-row .vm-sh-cur { font-size: 10.5px; font-weight: 600; color: #64748b; }
    .vm-sh-row.is-off .vm-dt-ledger-name,
    .vm-sh-row.is-off .vm-sh-fig { color: #64748b; }
    .vm-sh-row .vm-dt-ledger-chev { grid-column: 5; }

    .vm-sh-group .vm-sh-row + .vm-sh-row,
    .vm-sh-group .vm-sh-row + .vm-sh-all { border-top: 1px solid #eef1f5; }
    .vm-sh-ghead + .vm-sh-row {
        border-top: 1px solid #e2e8f0;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
    }
    .vm-sh-group:not(.vm-sh-group--fold) > :last-child {
        border-bottom: 1px solid #e2e8f0;
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    .vm-sh-all {
        height: auto;
        min-height: 52px;
        padding: 0 18px 0 72px;
        gap: 12px;
        border-radius: 0;
        border-left: 1px solid #e2e8f0;
        border-right: 1px solid #e2e8f0;
        background: #fff;
        color: #0f6d5c;
    }
    .vm-sh-all span { font-size: 14.5px; }

    /* The folded groups (in main from 901 to 1119, the code's place). */
    .vm-sh-group--fold {
        padding: 6px;
        gap: 4px;
        border-radius: 16px;
        background: #f1f5f9;
    }
    .vm-sh-fold {
        height: auto;
        min-height: 52px;
        padding: 0 16px;
        gap: 12px;
        color: #0f172a;
    }
    .vm-sh-fold .vm-sh-gname { font-size: 15px; }

    @media (hover: hover) {
        .vm-sh-shelf .vm-sh-add:hover { background: #0c5b4c; color: #fff; }
        .vm-sh-counter:hover { box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 16px 36px rgba(16, 24, 40, .12); }
        .vm-sh-find:hover:not(:focus-within) { border-color: #16a085; }
        .vm-sh-findx:hover { background: #f1f5f9; color: #0f172a; }
        .vm-sh-all:hover { background: #e3f4f0; color: #0f6d5c; }
        .vm-sh-fold:hover { box-shadow: inset 0 0 0 1.5px #cbd5e1; }
    }
}


/* ====================================================================
   4. 25a: THE 340 COLUMN (>=1120; 25-d's design pass, change 1)
   main 764 = find | Add on one row, then the open groups | the column,
   level with the field, not sticky: the folded groups as one compact
   block (rows 44), then Your counter. A fold opens its group in main, in
   the catalogue's order, and leaves the column; while a find is held the
   column keeps Your counter alone. The grid's third track carries the
   48 gap as the column's own inset (12 + 36).
   ==================================================================== */
@media (min-width: 1120px) {
    #vm-sh .vm-sh-view[data-view="shelf"] > .vm-sh-body { max-width: 1200px; padding-top: 32px; }
    .vm-sh-shelf {
        grid-template-columns: minmax(0, 1fr) auto 376px;
        grid-template-rows: auto 1fr;
        align-items: start;
    }
    .vm-sh-shelf > .vm-sh-find { grid-column: 1; grid-row: 1; }
    .vm-sh-shelf > .vm-sh-lead { grid-column: 2; grid-row: 1; }
    .vm-sh-shelf > .vm-sh-state--empty { grid-column: 1 / 3; grid-row: 1; }
    .vm-sh-shelf > .vm-sh-groups { grid-column: 1 / 3; grid-row: 2; }
    .vm-sh-shelf > .vm-sh-side {
        grid-column: 3;
        grid-row: 1 / 3;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding-left: 36px;
    }
    .vm-sh-side .vm-sh-group--fold { padding: 4px; gap: 2px; }
    .vm-sh-side .vm-sh-fold { min-height: 44px; }
}


/* ====================================================================
   5. 25b AND 25c: THE FLOW BAND AND THE ONE COLUMN
   shared §13's flow band (.vm-dt-flow-band on .vm-sh-top): the glass exit
   naming where she came from | the title at 40 (36 below 1120). Laid as a
   grid so 25c keeps the box's facts under its title (15, #e2e8f0); 25b's
   line under the title is the counter's name, cut from 901 (it is in the
   header). Then one column of 764 at the 1200 column's left.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sh-top.vm-dt-flow-band {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 20px;
        row-gap: 0;
        align-items: center;
        padding-top: 18px;
        padding-bottom: 24px;
        border: 0;
    }
    .vm-sh-top .vm-sh-toprow { grid-column: 1; grid-row: 1 / span 2; }
    .vm-sh-top .vm-sh-ttl { grid-column: 2; grid-row: 1; margin: 0; }
    .vm-sh-top .vm-sh-tsub {
        grid-column: 2;
        grid-row: 2;
        margin-top: 6px;
        font-size: 15px;
        line-height: 1.5;
        color: #e2e8f0;
    }
    .vm-sh-top [data-add-shop] { display: none; }

    #vm-sh .vm-sh-view[data-view="add"] > .vm-sh-body > *,
    #vm-sh .vm-sh-view[data-view="row"] > .vm-sh-body > * {
        width: 100%;
        max-width: 764px;
    }
}


/* ====================================================================
   6. 25b: WHICH BOX
   "The name on the box" at 60; "Which box is it?" at 21 over one bordered
   list of 68 rows: tile | name over form · pack | "Prescription only" or
   "On your shelf · N FCFA" in a 200 column | chevron; "None of these"
   last. 38a's door: the mint block, then the solid "Describe it
   yourself" at the card's foot, right.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sh-q { gap: 8px; }
    .vm-sh-qlabel { padding: 0; font-size: 14px; color: #334155; }
    .vm-sh-qbox {
        height: 60px;
        padding: 0 8px 0 18px;
        gap: 8px;
        border-radius: 14px;
        border-color: #cbd5e1;
    }
    .vm-sh-qbox:focus-within { border-color: #16a085; box-shadow: 0 0 0 4px rgba(22, 160, 133, .12); }
    .vm-sh-qin { height: 56px; font-size: 18px; }
    .vm-sh-qbox .vm-sh-qx { background: transparent; color: #475569; }

    .vm-sh-hits { gap: 28px; }
    .vm-sh-pick {
        overflow: visible;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    .vm-sh-pick-head { padding: 0 0 14px; }
    .vm-sh-pick-h { font-size: 21px; letter-spacing: -.4px; }
    .vm-sh-pick-list {
        margin-top: 0;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background: #fff;
    }
    .vm-sh-hit {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) 200px 14px;
        grid-template-rows: auto auto;
        column-gap: 16px;
        row-gap: 0;
        align-items: center;
        min-height: 68px;
        padding: 12px 18px 12px 16px;
        border-top: 1px solid #eef1f5;
        background: #fff;
    }
    .vm-sh-pick-list > .vm-sh-hit:first-child { border-top: 0; }
    .vm-sh-hit > .vm-sh-main { display: contents; }
    .vm-sh-hit .vm-sh-tile {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 40px;
        height: 40px;
        border-radius: 12px;
    }
    .vm-sh-hit .vm-sh-chev { grid-column: 4; grid-row: 1 / 3; }
    .vm-sh-hname {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        font-size: 15.5px;
        line-height: 1.3;
    }
    .vm-sh-hsub {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-top: 3px;
        font-size: 13.5px;
        color: #64748b;
    }
    .vm-sh-hit:not(:has(.vm-sh-hsub)) .vm-sh-hname { grid-row: 1 / 3; align-self: center; }
    .vm-sh-hrx,
    .vm-sh-hhave {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        justify-self: end;
        margin: 0;
        font-size: 13.5px;
        font-weight: 600;
        text-align: right;
    }
    .vm-sh-hrx { color: #0f172a; }
    .vm-sh-hhave { color: #0f6d5c; }
    .vm-sh-hrx:has(+ .vm-sh-hhave) { grid-row: 1; align-self: end; }
    .vm-sh-hrx + .vm-sh-hhave { grid-row: 2; align-self: start; }
    /* "None of these": no third column. */
    .vm-sh-hit.vm-sh-hit--none { grid-template-columns: 40px minmax(0, 1fr) 14px; }
    .vm-sh-hit--none .vm-sh-chev { grid-column: 3; }
    .vm-sh-nname { grid-column: 2; grid-row: 1; align-self: end; font-size: 15px; }
    .vm-sh-nsub {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-top: 3px;
        font-size: 13.5px;
        color: #475569;
    }

    /* 38a: the door. */
    .vm-sb-none { gap: 0; }
    .vm-sb-none-in {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 20px;
        border-radius: 16px;
    }
    .vm-sb-none-k { font-size: 14px; }
    .vm-sb-none-h {
        margin-top: 0;
        font-size: 28px;
        letter-spacing: -.7px;
        line-height: 1.2;
    }
    .vm-sb-none-in > .vm-sh-lead-row { margin-top: 0; }
    .vm-sb-none .vm-sh-lead-row,
    .vm-sh-says .vm-sh-lead-row {
        gap: 10px;
        padding: 12px 14px;
        border-radius: 12px;
    }
    .vm-sb-none .vm-sh-lead-row > i,
    .vm-sh-says .vm-sh-lead-row > i { margin-top: 4px; font-size: 13px; }
    .vm-sb-none .vm-sh-lead-row > span,
    .vm-sh-says .vm-sh-lead-row > span { font-size: 14px; line-height: 1.5; }
    .vm-sb-none .vm-sh-add {
        align-self: flex-end;
        width: auto;
        height: 52px;
        margin: 14px 4px 4px;
        padding: 0 26px;
    }

    @media (hover: hover) {
        .vm-sh-qbox .vm-sh-qx:hover { background: #f1f5f9; color: #0f172a; }
        .vm-sh-hit:hover { background: #f8fafc; color: #0f172a; }
        .vm-sb-none .vm-sh-add:hover { background: #0c5b4c; color: #fff; }
    }
}


/* ====================================================================
   7. 25c: THE ROW
   One lifted card: the price block in two halves (25-d's call 3, the
   README's grid 1fr 300) — "Your price for a box" with "Now N FCFA" and
   the figure at 30 on the left, what saving does in white rows on the
   right — then "In stock today" and "Only a few left" as labelled rows
   (172 | the control and its line), then the card's foot: the commit at
   its right naming the figure, a failed write's line beside it (shelf.js
   moves .vm-sh-foot in from 901: static, no fixed bar). "Take off my
   shelf" under the card is a quiet bordered act; its confirm takes its
   place, never a dialog, never red.
   ==================================================================== */
@media (min-width: 901px) {
    #vm-sh .vm-sh-card {
        display: block;
        padding: 0;
        gap: 0;
    }
    .vm-sh-priceblk {
        margin: 14px;
        padding: 20px;
        border-radius: 16px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        grid-template-rows: auto auto auto 1fr;
        column-gap: 24px;
        align-items: start;
    }
    .vm-sh-pricek {
        grid-column: 1;
        grid-row: 1;
        justify-content: space-between;
        gap: 12px;
        padding: 0;
    }
    .vm-sh-pricelabel { font-size: 14px; }
    .vm-sh-now { font-size: 13.5px; color: #475569; }
    .vm-sh-pricebox {
        grid-column: 1;
        grid-row: 2;
        height: 68px;
        margin-top: 10px;
        padding: 0 18px;
        border-radius: 14px;
    }
    .vm-sh-pricebox:focus-within { border-color: #16a085; box-shadow: 0 0 0 4px rgba(22, 160, 133, .12); }
    .vm-sh-pricebox:has(.vm-sh-pricein[aria-invalid="true"]) { border-color: #0f172a; box-shadow: none; }
    .vm-sh-pricein { height: 64px; letter-spacing: -.6px; }
    .vm-sh-pricecur { font-size: 14px; font-weight: 700; color: #64748b; }
    .vm-sh-err {
        grid-column: 1;
        grid-row: 3;
        margin-top: 10px;
        padding: 0;
        font-size: 13.5px;
        line-height: 1.4;
    }
    .vm-sh-says {
        grid-column: 2;
        grid-row: 1 / 5;
        margin-top: 0;
        gap: 8px;
    }

    .vm-sh-togsec,
    .vm-sh-fewsec {
        padding: 20px 24px;
        border-top: 1px solid #f0f2f4;
    }
    .vm-sh-togrow {
        display: grid;
        grid-template-columns: 184px 56px minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
        min-height: 44px;
    }
    .vm-sh-togmain { display: contents; }
    .vm-sh-togt {
        grid-column: 1;
        grid-row: 1;
        font-size: 14px;
        font-weight: 600;
        color: #334155;
    }
    .vm-sh-toggle { grid-column: 2; grid-row: 1; width: 56px; justify-content: flex-start; }
    .vm-sh-togs {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0;
        font-size: 13.5px;
        line-height: 1.45;
        color: #475569;
    }
    .vm-sh-track { width: 52px; height: 32px; }
    .vm-sh-knob { width: 26px; height: 26px; }
    .vm-sh-toggle[aria-pressed="true"] .vm-sh-knob { left: 23px; }

    .vm-sh-fewsec {
        display: grid;
        grid-template-columns: 184px 150px minmax(0, 1fr);
        column-gap: 16px;
        row-gap: 0;
        align-items: center;
    }
    .vm-sh-fewt {
        grid-column: 1;
        font-size: 14px;
        font-weight: 600;
        color: #334155;
    }
    .vm-sh-fewin {
        grid-column: 2;
        width: 150px;
        height: 52px;
        padding: 0 16px;
        border-radius: 13px;
        font-size: 16px;
    }
    .vm-sh-fewin:focus { border-color: #16a085; box-shadow: 0 0 0 4px rgba(22, 160, 133, .12); }
    .vm-sh-fews {
        grid-column: 3;
        font-size: 13.5px;
        color: #475569;
    }

    /* The card's foot (moved in by shelf.js). */
    #vm-sh .vm-sh-foot {
        position: static;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 20px;
        padding: 16px 24px;
        border-top: 1px solid #eef1f5;
        background: transparent;
        box-shadow: none;
    }
    .vm-sh-foot .vm-sh-fault {
        flex: 1;
        min-width: 0;
        padding: 0;
        font-size: 13.5px;
    }
    .vm-sh-foot .vm-sh-commit {
        flex-shrink: 0;
        width: auto;
        min-height: 52px;
        padding: 0 28px;
        white-space: nowrap;
    }

    /* Under the card: the quiet act (§15's), its confirm, the refusal. */
    .vm-sh-off {
        align-self: flex-start;
        width: auto;
        height: 44px;
        padding: 0 18px;
    }
    .vm-sh-confirm { padding: 20px 22px; gap: 8px; }
    .vm-sh-confirm-t { font-size: 18px; letter-spacing: -.3px; }
    .vm-sh-confirm-p { font-size: 14px; color: #334155; }
    .vm-sh-confirm-note {
        padding: 0;
        background: transparent;
        font-size: 14px;
        line-height: 1.5;
        color: #475569;
    }
    .vm-sh-confirm-fault { font-size: 13.5px; }
    .vm-sh-confirm-acts { margin-top: 8px; gap: 10px; }
    .vm-sh-takeoff,
    .vm-sh-keep {
        flex: 0 0 auto;
        padding: 0 18px;
        font-size: 14px;
    }

    @media (hover: hover) {
        .vm-sh-foot .vm-sh-commit:not(:disabled):hover { background: #0c5b4c; color: #fff; }
        .vm-sh-keep:hover { box-shadow: inset 0 0 0 1.5px #0f6d5c; color: #0f6d5c; }
    }
}


/* ====================================================================
   9. STATES (25-d-states)
   Facts are bordered white cards (never lifted): the line at 15, the
   mint Try again. Nothing matches: the line, then Add a product in the
   mint (it carries the words into 25b). The empty shelf: the band says
   it, main keeps one solid Add, no field; Your counter stays. The
   refusal and the take-off confirm: section 7. No counter on the account:
   one card, two mint doors, in the main column. 47i (taken off the list):
   29's block in the main column.
   ==================================================================== */
@media (min-width: 901px) {
    .vm-sh-state {
        align-items: flex-start;
        gap: 4px;
        padding: 18px 20px;
    }
    .vm-sh-state-t { font-size: 15px; }
    .vm-sh-state-p { font-size: 14px; color: #475569; }
    .vm-sh-state-say { font-size: 15px; font-weight: 700; line-height: 1.35; }
    .vm-sh-retry {
        width: auto;
        margin-top: 10px;
    }
    .vm-sh-tintpill {
        width: auto;
        height: 52px;
        margin-top: 10px;
        padding: 0 24px 0 20px;
        gap: 9px;
        font-size: 15px;
    }
    .vm-sh-tintpill i { font-size: 13px; }
    #vm-sh .vm-sh-view[data-view="shelf"] > .vm-sh-body > .vm-sh-state { max-width: 764px; }

    /* The empty shelf: its words are in the band; Add alone here. */
    .vm-sh-state.vm-sh-state--empty {
        padding: 0;
        border: 0;
        background: none;
    }
    .vm-sh-state--empty .vm-sh-add--state {
        width: auto;
        height: 52px;
        margin-top: 0;
        padding: 0 24px 0 20px;
        white-space: nowrap;
    }

    /* No counter on the account. */
    #vm-sh .vm-q-none {
        flex: none;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
        max-width: 764px;
        margin: 32px auto 64px max(24px, calc((100% - 1152px) / 2));
        padding: 18px 20px;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #fff;
        text-align: left;
    }
    #vm-sh .vm-q-none > i { display: none; }
    #vm-sh .vm-q-none h1 {
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 15px;
        line-height: 1.35;
    }
    #vm-sh .vm-q-none-body { max-width: none; font-size: 14px; color: #475569; }
    #vm-sh .vm-q-none-doors {
        flex-direction: row;
        gap: 10px;
        width: auto;
        max-width: none;
        margin-top: 10px;
    }
    #vm-sh .vm-q-none-doors a,
    #vm-sh .vm-q-none-doors a:first-child,
    #vm-sh .vm-q-none-doors a + a {
        height: 44px;
        padding: 0 18px;
        border: 0;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
        white-space: nowrap;
    }

    /* 47i: 29's block in the main column. */
    #vm-sh .vm-tb-page {
        width: auto;
        max-width: 764px;
        margin: 32px auto 64px max(24px, calc((100% - 1152px) / 2));
    }

    @media (hover: hover) {
        .vm-sh-state--empty .vm-sh-add--state:hover { background: #0c5b4c; color: #fff; }
    }
}