/* ====================================================================
   SCREEN 10 — FINDING AN EXAM, the desktop layer (desktop slice D5,
   2026-10-08). exams/index.html (10a) and exams/search.html (10b): one
   file for both pages, which share the band and the pill. Linked after
   desktop/shared.css; every rule is scoped to its page's root
   (#vm-exams, #vm-exams-search).

   Frames: 10-d (10a at 1280), 10-d-search (10b at 1280), 10-d-pick (the
   city sheet as a dialog), 10-d-narrow and 10-d-search-narrow (1000),
   10-d-states, in docs/design/pharmacy/screens/10/desktop/frame.html;
   records screens/desktop-01-14/records/Screen 10 - desktop work order.md
   and Screen 10 - desktop design pass.md (approved and folded, call 1
   approved). Brief: briefs/2026-10-08_desktop-slice-D5.md.

   Tiers: >=901 the layer, one column (10a: tiles 3 x 2, the two doors
   side by side under the list; 10b: medicines under the exams, at the
   exams' heading size) · >=1120 10a's six tiles across and its doors in
   a 380 right column level with the heading; 10b's medicines in a 340
   right column, their heading 18 against the exams' 21.
   The header is desktop/shared.css + js/exams/desktop.js (glass over
   each band, solid once the band has gone up under it; no Basket and no
   header search on this side). The pages' own modules (home.js,
   search.js) show the desktop-only nodes ([data-dt-only]) from 901px,
   move 10a's city button into the pill, and hide 10b's phone label
   ([data-mb-only]) there. The band's material and 10b's glass exit are
   desktop/shared.css's .vm-dt-band / .vm-dt-band-exit (slice D7: class
   tokens on the pages' own band and exit); the dialog's fade too.

   Sections, in the frames' order:
     1. 10a — the band: the eyebrow, the headline, the pill
     2. 10a — the advice in the band's foot and the tiles lifted over it;
        the 41f line under the band (nothing lifts)
     3. 10a — Most asked for (one column, the facts in columns), the doors
     4. 10a + 10b — the city sheet as a dialog (10-d-pick)
     5. 10b — the band: exit · the pill as a field · the counts
     6. 10b — the body: the exams, the other names, the medicines
     7. States (both pages)
     8. Hover (a pointer that can hover)
     9. >=1120: the side columns
    10. 10a — Taking samples now near you, and the three-line rows from
        1120 (desktop slice E10, 2026-10-10: frame 10-d-fill-b in
        screens/10/desktop/frame-fill.html, FACTS-fill.md; README
        "Changes" 1 of screens/desktop-10-30-50/)
   ==================================================================== */

@media (min-width: 901px) {

    /* ================================================================
       1. 10a — THE BAND (10-d)
       Under the glass header (65), the band's own top is 32. The h1 is
       01-d's Lab tests eyebrow (the vials glyph, caps, #8ff08b); the
       headline holds one line at 44; the sub at 16; then 01-d's pill:
       the city (41e's button, moved in by home.js) as its left segment,
       a hairline, the field with the "/" mark, "Search" solid #0f6d5c
       (white never sits on #16a085 on this side).
       ================================================================ */
    #vm-exams .vm-ex-band--home {
        position: relative;
        overflow: hidden;
        gap: 0;
        padding: 97px max(24px, calc((100% - 1152px) / 2)) 97px;
    }
    /* The vials, large and faint, at the band's foot (decoration). */
    #vm-exams .vm-ex-band-mark {
        position: absolute;
        right: calc(max(0px, (100% - 1200px) / 2) + 32px);
        bottom: 52px;
        font-size: 170px;
        line-height: 1;
        color: rgba(143, 240, 139, .07);
        pointer-events: none;
    }
    #vm-exams .vm-ex-band-mark i { display: block; }

    #vm-exams .vm-ex-toprow { position: relative; gap: 0; }
    #vm-exams .vm-ex-title {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        line-height: 1.5;
        color: #8ff08b;
    }
    #vm-exams .vm-ex-title-glyph { font-size: 12px; }

    #vm-exams .vm-ex-headline-wrap { position: relative; margin-top: 12px; gap: 10px; }
    #vm-exams .vm-ex-headline {
        font-size: 44px;
        letter-spacing: -1.4px;
        line-height: 1.08;
        text-wrap: balance;
    }
    #vm-exams .vm-ex-sub { font-size: 16px; line-height: 1.5; }

    /* -- The pill: 64 tall, at most 720, the deep shadow. */
    #vm-exams .vm-ex-pill {
        position: relative;
        margin-top: 24px;
        max-width: 720px;
        height: 64px;
        padding: 0 8px;
        gap: 0;
        box-shadow: 0 20px 46px rgba(2, 26, 21, .42);
    }
    /* The ring a text field draws on its own pill: white, outside it, on
       the teal (the field's own outline stays off, as on the phone). */
    #vm-exams .vm-ex-pill:has(.vm-ex-pill-input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }

    /* The city segment: 41e's button, no glass inside the white pill. */
    #vm-exams .vm-ex-pill .vm-ex-city {
        position: relative;
        flex-shrink: 0;
        height: 48px;
        max-width: none;
        margin-right: 1px;
        padding: 0 14px;
        gap: 7px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #0f6d5c;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }
    #vm-exams .vm-ex-pill .vm-ex-city .vm-ex-dir-city-pin { font-size: 13px; color: #0f6d5c; }
    #vm-exams .vm-ex-pill .vm-ex-city .fa-angle-down { font-size: 11px; color: #64748b; }
    /* The hairline between the city and the field. */
    #vm-exams .vm-ex-pill .vm-ex-city::after {
        content: '';
        position: absolute;
        top: 11px;
        right: -1px;
        width: 1px;
        height: 26px;
        background: #e2e8f0;
    }
    /* Inside the white pill the band's white ring would vanish. */
    #vm-exams .vm-ex-band .vm-ex-pill button:focus-visible { outline-color: #0f6d5c; }

    #vm-exams .vm-ex-pill > i { margin-left: 16px; font-size: 15px; color: #64748b; }
    #vm-exams .vm-ex-pill-input { margin-left: 11px; height: 44px; font-size: 16px; }
    /* The "/" key's mark (approved for 10a). The house face, Inter. */
    #vm-exams .vm-ex-pill-kbd {
        min-width: 24px;
        height: 24px;
        margin: 0 12px 0 11px;
        padding: 0 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border: 1px solid #e2e8f0;
        border-radius: 6px;
        background: #f8fafc;
        box-shadow: inset 0 -1px 0 #e2e8f0;
        font-family: 'Inter', -apple-system, sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 1;
        color: #475569;
    }
    /* The go button says its word (01-d's pill; its accessible name was
       already "Search"). */
    #vm-exams .vm-ex-pill-go {
        width: auto;
        height: 48px;
        padding: 0 26px;
        border-radius: 999px;
        background: #0f6d5c;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .3);
    }
    #vm-exams .vm-ex-pill-go i { display: none; }
    #vm-exams .vm-ex-pill-go:focus-visible { outline-offset: 2px; }

    /* ================================================================
       2. 10a — THE ADVICE IN THE BAND'S FOOT, THE TILES LIFTED OVER IT
       The band's bottom padding (97) holds the advice line 16 under the
       pill (white on teal, still above the choice it governs) and the
       tiles' top 36 over the band's foot (01-d's prescription-card
       idiom): the block rises 81 into the band, above it (z-index 1).
       Six 72 shelves (01-d's): a 40 mint glyph tile, the label.
       ================================================================ */
    #vm-exams .vm-ex-body {
        padding: 0 max(24px, calc((100% - 1152px) / 2)) 64px;
        gap: 36px;
    }
    #vm-exams .vm-ex-tilesblock {
        position: relative;
        z-index: 1;
        margin-top: -81px;
        gap: 24px;
    }
    #vm-exams .vm-ex-advice {
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        color: #e2e8f0;
    }
    #vm-exams .vm-ex-advice strong { color: #fff; }

    #vm-exams .vm-ex-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    #vm-exams .vm-ex-tile {
        height: 72px;
        padding: 0 10px 0 12px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        border-radius: 16px;
        color: #0f172a;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 24px rgba(3, 32, 26, .14);
        transition: box-shadow .2s ease, transform .2s ease;
    }
    #vm-exams .vm-ex-tile i {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 17px;
    }
    #vm-exams .vm-ex-tile span { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; }
    #vm-exams .vm-ex-tile:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* -- 41f: the line under the band. Nothing lifts over a line: the
       band ends after its pill, the advice and the tiles sit under the
       line on the page's ground, unlifted. */
    #vm-exams .vm-ex-band--home:has(+ .vm-ex-cityline:not([hidden])) { padding-bottom: 40px; }
    #vm-exams .vm-ex-cityline {
        padding: 12px max(24px, calc((100% - 1152px) / 2));
        align-items: center;
        gap: 10px;
        border-bottom: 1px solid #e2e8f0;
    }
    #vm-exams .vm-ex-cityline i { margin-top: 0; }
    #vm-exams .vm-ex-cityline-t { font-size: 13.5px; font-weight: 400; color: #0f172a; }
    #vm-exams .vm-ex-cityline:not([hidden]) + .vm-ex-body { padding-top: 20px; }
    #vm-exams .vm-ex-cityline:not([hidden]) + .vm-ex-body .vm-ex-tilesblock { margin-top: 0; gap: 14px; }
    #vm-exams .vm-ex-cityline:not([hidden]) + .vm-ex-body .vm-ex-advice { color: #475569; }
    #vm-exams .vm-ex-cityline:not([hidden]) + .vm-ex-body .vm-ex-advice strong { color: #0f172a; }
    #vm-exams .vm-ex-cityline:not([hidden]) + .vm-ex-body .vm-ex-tile { box-shadow: none; }

    /* ================================================================
       3. 10a — MOST ASKED FOR, AND THE TWO DOORS
       One column in its order (the list's one claim), in one bordered
       container; each row's facts in columns: name | count (108) |
       nearest (120) | from price. With no position the nearest column
       stays empty and the prices keep theirs. No column headers.
       ================================================================ */
    #vm-exams .vm-ex-section { gap: 16px; }
    #vm-exams .vm-ex-headblock { gap: 6px; padding: 0; }
    #vm-exams .vm-ex-h { font-size: 21px; letter-spacing: -.4px; line-height: 1.2; }
    #vm-exams .vm-ex-headsub { font-size: 14px; line-height: 1.5; }

    #vm-exams .vm-ex-row--concept {
        min-height: 68px;
        padding: 12px 18px 12px 16px;
        gap: 14px;
        color: #0f172a;
    }
    #vm-exams .vm-ex-row--concept .vm-ex-row-tile { width: 40px; height: 40px; }
    #vm-exams .vm-ex-row--concept .vm-ex-row-tile i { font-size: 15px; }
    #vm-exams .vm-ex-row--concept .vm-ex-row-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 108px 120px;
        column-gap: 14px;
        align-items: center;
    }
    #vm-exams .vm-ex-row--concept .vm-ex-row-name {
        grid-column: 1;
        grid-row: 1;
        font-size: 15px;
        line-height: 1.3;
    }
    #vm-exams .vm-ex-row--concept .vm-ex-row-meta {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        font-size: 13.5px;
        line-height: 1.35;
        color: #475569;
        white-space: nowrap;
    }
    #vm-exams .vm-ex-row--concept .vm-ex-row-meta--near { grid-column: 3; }
    /* One width for the price column on every row (a figure, or "Price on
       request" on one line), so the 1fr name column, and with it the
       count and nearest columns, line up down the list. */
    #vm-exams .vm-ex-row--concept .vm-ex-price { flex: 0 0 110px; width: 110px; min-width: 0; }
    #vm-exams .vm-ex-row--concept .vm-ex-price-num { font-size: 17px; }
    #vm-exams .vm-ex-row--concept .vm-ex-price-cur { font-size: 10px; }
    #vm-exams .vm-ex-row--concept .vm-ex-price-none {
        max-width: 110px;
        font-size: 12.5px;
        font-weight: 400;
        color: #475569;
    }
    #vm-exams .vm-ex-row--concept:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    /* -- 30's Allow row, under the heading (no position). */
    #vm-exams .vm-ex-dir-allow {
        min-height: 56px;
        padding: 10px 10px 10px 14px;
        gap: 10px;
    }
    #vm-exams .vm-ex-dir-allow .vm-ex-dir-line-t { font-size: 13.5px; font-weight: 400; color: #334155; line-height: 1.4; }
    #vm-exams .vm-ex-dir-allow .vm-ex-dir-line-go { padding: 0 16px; font-size: 13.5px; }

    /* -- The two doors: side by side under the list (two across, 901-
       1119); the right column from 1120 (section 9). */
    #vm-exams .vm-ex-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    #vm-exams .vm-ex-door-head { padding: 18px; gap: 14px; }
    #vm-exams .vm-ex-door-title { font-size: 17px; }
    #vm-exams .vm-ex-door-sub { font-size: 13.5px; }
    #vm-exams .vm-ex-door-go:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    /* ================================================================
       4. THE CITY SHEET AS A DIALOG (10-d-pick)
       30e's sheet is desktop/shared.css's centred 440 dialog; here only
       its inside: no grab row, the head 20/14/14/24, the title 20, the
       Cancel a 44 pill, the rows on 12 sides.
       ================================================================ */
    #vm-exams .vm-ex-dir-sheet.is-open,
    #vm-exams-search .vm-ex-dir-sheet.is-open { padding: 20px 12px 14px; gap: 14px; }
    #vm-exams .vm-ex-dir-grab,
    #vm-exams-search .vm-ex-dir-grab { display: none; }
    #vm-exams .vm-ex-dir-sheet-head,
    #vm-exams-search .vm-ex-dir-sheet-head { align-items: flex-start; padding: 0 2px 0 12px; }
    #vm-exams .vm-ex-dir-sheet-title,
    #vm-exams-search .vm-ex-dir-sheet-title { font-size: 20px; }
    #vm-exams .vm-ex-dir-sheet-sub,
    #vm-exams-search .vm-ex-dir-sheet-sub { margin-top: 4px; font-size: 13px; }
    #vm-exams .vm-ex-dir-cancel,
    #vm-exams-search .vm-ex-dir-cancel { padding: 0 14px; border-radius: 999px; font-size: 14px; }
    #vm-exams-search .vm-ex-dir-sheet button:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    #vm-exams-search .vm-ex-dir-cityrow:focus-visible { outline-offset: -2px; }

    /* ================================================================
       5. 10b — THE BAND (10-d-search)
       One row under the glass header: the glass exit "Exams" · the pill
       at 60 (call 1: 10a's form, filled with what was asked: the city
       segment, the field, the quiet clear control, Search) · the counts
       beside it. The page's h1 stays unseen (the pill is what the eye
       reads).
       ================================================================ */
    #vm-exams-search .vm-ex-band--search {
        flex-direction: row;
        align-items: center;
        gap: 24px;
        padding: 79px max(24px, calc((100% - 1152px) / 2)) 26px;
    }
    /* The glass exit (shared.css's .vm-dt-band-exit), at the row's left. */
    #vm-exams-search .vm-ex-band .vm-ex-exit { flex-shrink: 0; align-self: center; }

    #vm-exams-search .vm-ex-pill {
        flex: 0 1 640px;
        min-width: 0;
        height: 60px;
        padding: 0 6px;
        gap: 10px;
        box-shadow: 0 14px 34px rgba(2, 26, 21, .36);
    }
    #vm-exams-search .vm-ex-pill:has(.vm-ex-pill-input:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
    #vm-exams-search .vm-ex-pill .vm-ex-city {
        position: relative;
        flex-shrink: 0;
        height: 48px;
        max-width: none;
        margin-right: 1px;
        padding: 0 14px;
        gap: 7px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: #0f6d5c;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }
    #vm-exams-search .vm-ex-pill .vm-ex-city .vm-ex-dir-city-pin { font-size: 13px; color: #0f6d5c; }
    #vm-exams-search .vm-ex-pill .vm-ex-city .fa-angle-down { font-size: 11px; color: #64748b; }
    #vm-exams-search .vm-ex-pill .vm-ex-city::after {
        content: '';
        position: absolute;
        top: 11px;
        right: -1px;
        width: 1px;
        height: 26px;
        background: #e2e8f0;
    }
    #vm-exams-search .vm-ex-pill > i { margin-left: 6px; font-size: 15px; color: #64748b; }
    /* The query in the field's own type (16, not the label's bold). */
    #vm-exams-search .vm-ex-pill-input {
        flex: 1 1 auto;
        min-width: 0;
        height: 44px;
        border: 0;
        outline: none;
        background: transparent;
        font-size: 16px;
        font-weight: 500;
        color: #0f172a;
    }
    #vm-exams-search .vm-ex-pill-input::placeholder { color: #64748b; font-weight: 400; }
    /* The clear control, quiet: no fill until the pointer is on it. */
    #vm-exams-search .vm-ex-pill-clear { background: transparent; color: #64748b; }
    #vm-exams-search .vm-ex-pill-go {
        flex-shrink: 0;
        width: auto;
        height: 48px;
        padding: 0 24px;
        border-radius: 999px;
        background: #0f6d5c;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 6px 16px rgba(15, 109, 92, .3);
    }
    #vm-exams-search .vm-ex-pill a:focus-visible,
    #vm-exams-search .vm-ex-pill button:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    #vm-exams-search .vm-ex-band .vm-ex-exit:focus-visible { outline-color: #fff; }

    #vm-exams-search .vm-ex-counts {
        flex: 0 1 auto;
        min-width: 0;
        font-size: 14px;
        line-height: 1.45;
        color: #e2e8f0;
        text-wrap: pretty;
    }

    /* ================================================================
       6. 10b — THE BODY
       One column from 901 (the exams, then the medicines at the exams'
       heading size); main | 340 from 1120 (section 9). The note row, the
       two cards side by side at the phone card's width, stretched to
       one height so their doors sit level (padding 18, gaps 14), the
       other names under them in their bordered container.
       ================================================================ */
    #vm-exams-search .vm-ex-body {
        padding: 28px max(24px, calc((100% - 1152px) / 2)) 64px;
        gap: 48px;
    }
    #vm-exams-search .vm-ex-section { gap: 0; }
    #vm-exams-search .vm-ex-headblock { gap: 8px; padding: 0; }
    #vm-exams-search .vm-ex-blockhead { gap: 10px; }
    #vm-exams-search .vm-ex-dot { width: 9px; height: 9px; }
    #vm-exams-search .vm-ex-blockname { font-size: 21px; letter-spacing: -.4px; line-height: 1.2; }
    #vm-exams-search .vm-ex-sortlabel { font-size: 13px; white-space: nowrap; }
    #vm-exams-search .vm-ex-headsub { font-size: 14px; line-height: 1.5; }

    /* -- The name on your paper. */
    #vm-exams-search .vm-ex-note {
        margin-top: 14px;
        padding: 12px 16px;
        gap: 12px;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    }
    #vm-exams-search .vm-ex-note i { width: 16px; font-size: 13px; }
    #vm-exams-search .vm-ex-note-body { gap: 2px; }
    #vm-exams-search .vm-ex-note-lead { font-size: 14px; }
    #vm-exams-search .vm-ex-note-sub { font-size: 13px; }

    /* -- The cards: two across, stretched, the doors level. */
    #vm-exams-search .vm-ex-cards {
        margin-top: 14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        align-items: stretch;
    }
    #vm-exams-search .vm-ex-cards:empty { display: none; }
    #vm-exams-search .vm-ex-card { min-width: 0; padding: 18px; gap: 14px; }
    #vm-exams-search .vm-ex-card-name { font-size: 20px; letter-spacing: -.4px; }
    #vm-exams-search .vm-ex-card-fr { margin-top: 6px; font-size: 15px; }
    #vm-exams-search .vm-ex-card-plain { margin-top: 3px; font-size: 13.5px; }
    #vm-exams-search .vm-ex-hl { padding: 14px; gap: 10px; }
    #vm-exams-search .vm-ex-hl-label { font-size: 12.5px; }
    #vm-exams-search .vm-ex-hl-num { font-size: 26px; letter-spacing: -.7px; }
    #vm-exams-search .vm-ex-hl-cur { font-size: 13px; }
    #vm-exams-search .vm-ex-hl-none { font-size: 13.5px; }
    #vm-exams-search .vm-ex-prep { padding: 10px 12px; gap: 10px; }
    #vm-exams-search .vm-ex-prep i { font-size: 12px; }
    #vm-exams-search .vm-ex-prep-text { font-size: 13.5px; }
    #vm-exams-search .vm-ex-card-go { margin-top: auto; font-size: 15px; }
    #vm-exams-search .vm-ex-card-go:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    #vm-exams-search [data-exams-empty] { margin-top: 14px; }

    /* -- Also offered under other names: under the cards, one column
       (two across would read as belonging to the card above). */
    #vm-exams-search .vm-ex-otherhead { margin-top: 32px; gap: 6px; padding: 0; }
    #vm-exams-search .vm-ex-h-sm { font-size: 17px; letter-spacing: -.3px; }
    #vm-exams-search [data-other-list] { margin-top: 14px; }
    #vm-exams-search .vm-ex-other-row { min-height: 64px; padding: 12px 18px; }
    #vm-exams-search .vm-ex-other-name { font-size: 15px; }
    #vm-exams-search .vm-ex-other-count { margin-top: 3px; font-size: 12.5px; }
    #vm-exams-search .vm-ex-other-struct { padding: 11px 18px; }
    #vm-exams-search .vm-ex-other-row:focus-visible,
    #vm-exams-search .vm-ex-other-struct:focus-visible,
    #vm-exams-search .vm-ex-row--product:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    /* -- Medicines & supplies: the lifted container, its rows 72. */
    #vm-exams-search .vm-ex-prodlist { margin-top: 14px; }
    #vm-exams-search .vm-ex-row--product { min-height: 72px; padding: 12px 16px; gap: 12px; color: #0f172a; }
    #vm-exams-search .vm-ex-row--product .vm-ex-row-name { font-size: 14.5px; }
    #vm-exams-search .vm-ex-row--product .vm-ex-row-meta { margin-top: 3px; font-size: 12.5px; }
    #vm-exams-search .vm-ex-row--product .vm-ex-price { min-width: 80px; }
    #vm-exams-search .vm-ex-row--product .vm-ex-price-num { font-size: 17px; }
    #vm-exams-search .vm-ex-row--product .vm-ex-price-cur { font-size: 10px; }

    /* ================================================================
       7. STATES (10-d-states): a bordered fact box, the code's words; a
       failed read keeps them, with no Try again (listed, not added).
       ================================================================ */
    #vm-exams .vm-ex-none,
    #vm-exams-search .vm-ex-none { padding: 18px 20px; gap: 4px; border-radius: 16px; }
    #vm-exams .vm-ex-none-title,
    #vm-exams-search .vm-ex-none-title { font-size: 15px; }
    #vm-exams .vm-ex-none-sub,
    #vm-exams-search .vm-ex-none-sub { font-size: 13.5px; }
    #vm-exams .vm-loading,
    #vm-exams-search .vm-loading { padding: 4px 2px; font-size: 14px; }

    /* ================================================================
       8. HOVER — a pointer that can hover. The tiles rise 2 (not under
       reduced motion); rows take the quiet fill; doors the mint.
       ================================================================ */
    @media (hover: hover) {
        #vm-exams .vm-ex-pill .vm-ex-city:hover,
        #vm-exams-search .vm-ex-pill .vm-ex-city:hover { background: #f1f5f9; color: #0f6d5c; }
        #vm-exams .vm-ex-pill-go:hover,
        #vm-exams-search .vm-ex-pill-go:hover { background: #0c5b4c; color: #fff; }
        #vm-exams .vm-ex-tile:hover {
            box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 30px rgba(3, 32, 26, .18);
            transform: translateY(-2px);
            color: #0f172a;
        }
        #vm-exams .vm-ex-cityline:not([hidden]) + .vm-ex-body .vm-ex-tile:hover {
            box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 14px 30px rgba(3, 32, 26, .18);
        }
        #vm-exams .vm-ex-row--concept:hover { background: #f8fafc; color: #0f172a; }
        #vm-exams .vm-ex-dir-allow .vm-ex-dir-line-go:hover { box-shadow: inset 0 0 0 1.5px #16a085; }
        #vm-exams .vm-ex-door-go:hover { background: #f4fbf9; color: #0f6d5c; }
        #vm-exams .vm-ex-dir-cancel:hover,
        #vm-exams-search .vm-ex-dir-cancel:hover { background: #e3f4f0; }
        #vm-exams .vm-ex-dir-cityrow:not(.is-on):hover,
        #vm-exams-search .vm-ex-dir-cityrow:not(.is-on):hover { background: #f8fafc; }

        #vm-exams-search .vm-ex-pill-clear:hover { background: #f1f5f9; color: #0f172a; }
        #vm-exams-search .vm-ex-card-go:hover { background: #0c5b4c; color: #fff; }
        #vm-exams-search .vm-ex-other-row:hover,
        #vm-exams-search .vm-ex-row--product:hover { background: #f8fafc; color: #0f172a; }
        #vm-exams-search .vm-ex-other-struct:hover { background: #fff; color: #0f172a; }
    }
    @media (prefers-reduced-motion: reduce) {
        #vm-exams .vm-ex-tile { transition: none; }
        #vm-exams .vm-ex-tile:hover { transform: none; }
    }
}

/* ====================================================================
   THE NARROW WINDOW (901-1119): 10a's headline at 38 (10-d-narrow);
   10b's medicines under the exams take the exams' heading size
   (10-d-search-narrow).
   ==================================================================== */
@media (min-width: 901px) and (max-width: 1119px) {
    #vm-exams .vm-ex-headline { font-size: 38px; letter-spacing: -1.1px; }
}

/* ====================================================================
   9. >=1120 — THE SIDE COLUMNS
   10a: the tiles six across over a two-column body, "Most asked for" |
   the two doors in a 380 column level with its heading. 10b: main |
   340, Medicines & supplies in the second column at 18 (the exams lead
   at 21).
   ==================================================================== */
@media (min-width: 1120px) {
    #vm-exams .vm-ex-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        column-gap: 48px;
        row-gap: 36px;
        grid-template-rows: auto auto 1fr;
        align-items: start;
    }
    #vm-exams .vm-ex-tilesblock { grid-column: 1 / -1; grid-row: 1; }
    #vm-exams .vm-ex-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    #vm-exams .vm-ex-section { grid-column: 1; grid-row: 2; min-width: 0; }
    /* Slice E10: the doors stand level with Most asked for and run down
       beside the block under it; the third row is the flexible one, so a
       door column taller than the first block never pushes the block
       down (the 44 between the two blocks holds). */
    #vm-exams .vm-ex-doors {
        grid-column: 2;
        grid-row: 2 / span 2;
        grid-template-columns: minmax(0, 1fr);
    }

    #vm-exams-search .vm-ex-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        row-gap: 24px;
        align-items: start;
    }
    #vm-exams-search .vm-ex-body > * { grid-column: 1; min-width: 0; }
    #vm-exams-search .vm-ex-body > [data-exams-block] { grid-row: 1; }
    #vm-exams-search .vm-ex-body > [data-products-block] { grid-column: 2; grid-row: 1; }
    #vm-exams-search [data-products-block] .vm-ex-blockname { font-size: 18px; }
}

/* ====================================================================
   10. 10a — TAKING SAMPLES NOW NEAR YOU (desktop slice E10, 10-d-fill-b)
   From 901px, 44 under Most asked for (the body's 36 + 8): the title and
   sub at Most asked for's sizes (the shared .vm-ex-headblock rules of
   section 3), then one bordered ledger (radius 18, the hairline between
   rows): three rows of 72 — the kind tile 40 (flask / hospital), the name
   15/700 over "Akwa · 1.2 km" 13 #64748b, the mint pill (30 high, the 7
   dot #16a085, the stop time 13/700 #0f6d5c), the teal chevron — and a 52
   foot link to 30. A quiet pill (#f1f5f9 / #475569, the dot #94a3b8) is
   30's grey line, which only the "Open now" switch can carry ("Samples
   again tomorrow 07:00"). js/exams/home-near.js draws it, or not at all.
   901-1119: in the one column, the doors two across under it (section 3).
   ==================================================================== */
@media (min-width: 901px) {
    #vm-exams .vm-ex-near {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-top: 8px;
        min-width: 0;
    }
    #vm-exams .vm-ex-near-list {
        display: block;
        border: 1px solid #e2e8f0;
        border-radius: 18px;
        background: #fff;
        overflow: hidden;
    }
    #vm-exams .vm-ex-near-row {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 72px;
        padding: 14px 18px 14px 16px;
        color: #0f172a;
        text-decoration: none;
    }
    #vm-exams .vm-ex-near-row + .vm-ex-near-row,
    #vm-exams .vm-ex-near-foot { border-top: 1px solid #f0f2f4; }
    #vm-exams .vm-ex-near-tile {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 15px;
    }
    #vm-exams .vm-ex-near-id { flex: 1 1 auto; min-width: 0; display: block; }
    #vm-exams .vm-ex-near-name {
        display: block;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        color: #0f172a;
        overflow-wrap: break-word;
    }
    #vm-exams .vm-ex-near-meta {
        display: block;
        margin-top: 3px;
        font-size: 13px;
        line-height: 1.35;
        color: #64748b;
    }
    #vm-exams .vm-ex-near-sep { color: #cbd5e1; }
    #vm-exams .vm-ex-near-pill {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        height: 30px;
        padding: 0 12px;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }
    #vm-exams .vm-ex-near-dot {
        flex: 0 0 7px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #16a085;
    }
    #vm-exams .vm-ex-near-pill.is-quiet { background: #f1f5f9; color: #475569; }
    #vm-exams .vm-ex-near-pill.is-quiet .vm-ex-near-dot { background: #94a3b8; }
    #vm-exams .vm-ex-near-chev { flex: 0 0 auto; font-size: 13px; color: #0f6d5c; }
    #vm-exams .vm-ex-near-foot {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        height: 52px;
        padding: 0 18px;
        font-size: 14.5px;
        font-weight: 700;
        color: #0f6d5c;
        text-decoration: none;
    }
    #vm-exams .vm-ex-near-foot-chev { font-size: 12px; }
    #vm-exams .vm-ex-near-row:focus-visible,
    #vm-exams .vm-ex-near-foot:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    @media (hover: hover) {
        #vm-exams .vm-ex-near-row:hover { background: #f8fafc; color: #0f172a; }
        #vm-exams .vm-ex-near-foot:hover { background: #f4fbf9; color: #0f6d5c; }
    }
}

/* -- >=1120: Most asked for's rows are three lines (home.js asks
   render.js for them from 1120 only): the name 15/700, the French name
   13.5/500 #334155, the plain words 13 #64748b; they wrap, never
   truncate, in the name column; the facts columns are section 3's
   (count 108 | nearest 120 | price 110 | chevron). The row 78, 14/18/14/16. */
@media (min-width: 1120px) {
    #vm-exams .vm-ex-row--concept {
        min-height: 78px;
        padding: 14px 18px 14px 16px;
    }
    #vm-exams .vm-ex-row--concept .vm-ex-row-id {
        grid-column: 1;
        grid-row: 1;
        display: block;
        min-width: 0;
    }
    #vm-exams .vm-ex-row--concept .vm-ex-row-name { overflow-wrap: break-word; }
    #vm-exams .vm-ex-row--concept .vm-ex-row-fr {
        display: block;
        margin-top: 3px;
        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.35;
        color: #334155;
        overflow-wrap: break-word;
    }
    #vm-exams .vm-ex-row--concept .vm-ex-row-plain {
        display: block;
        margin-top: 1px;
        font-size: 13px;
        line-height: 1.4;
        color: #64748b;
        text-wrap: pretty;
        overflow-wrap: break-word;
    }
}