/* ====================================================================
   SCREEN 01 — HOME, the desktop layer (desktop slice D1, 2026-10-08)
   pharmacy/index.html only, linked after desktop/shared.css.

   Frames: 01-d (Home at 1280) and 01-d-head (the header, scrolled) in
   docs/design/pharmacy/screens/01/desktop/frame.html; the record is
   screens/desktop-01-14/records/Screen 01 - desktop work order.md (its
   final state: hero C, the lit sign; the pharmacy cards = 26a-3 + shelf
   band B; the polish + premium pass folded in). Brief:
   briefs/2026-10-08_desktop-slice-D1.md.

   Tiers: >=901 the layer (with a 901-1119 block for the narrow window
   where 01-d's counts would crush: fewer cards per rail row, three
   shelves to a row, a smaller sign) · >=1120 More products six across.
   The header itself is desktop/shared.css + js/pharmacy/desktop.js
   (glass over .vm-hero-frame, solid once it has gone up under it).

   Hooks this file reaches by class: .vm-hm-send (the prescription card's
   desktop hook), .vm-hero-sign, .vm-hm-card / .vm-hm-shelf-* (the cards
   js/pharmacy/home-desktop.js draws from 901), .vm-dt-presc (the
   prescription door's round control: prescription blue, so never in
   shared.css). The phone-only words (.vm-mb-only, .vm-act-word), the
   closed sheet and the footer are desktop/shared.css's (slice D7).

   Sections, in the frame's order:
     1. The hero (the lit sign, the headline, the pill)
     2. The page: one column, the band, More products last
     3. The prescription card and the six shelves
     4. Shop by symptom
     5. The rails and their cards
     6. Lab tests
     7. Pharmacies open now (the chips, 26's card, the shelf band)
     8. Emergency tonight
     9. More products
       (The footer is desktop/shared.css section 11, since slice D7.)
       (41's one-counter city, desktop slice G6: the second sub-line in
       5, the short lab list in 6, the end rule, the far line and the
       empty card in 7. Its 480 city dialog is desktop/shared.css
       section 22.)
    11. The narrow window (901-1119)
    12. Six across (>=1120)
   ==================================================================== */

@media (min-width: 901px) {

    /* ================================================================
       1. THE HERO — direction C, the lit sign (01-d)
       560 tall under the glass header; no photograph from 901 (the
       still, the loop and its scrim are hidden, and home.js never
       attaches the loop at this width). Left: the headline (60, three
       lines, balanced) and the pill (64, max 640: city | field | the
       labelled Search). Right: the pharmacy's dot-grid cross, lit while
       the open-now read counts more than none, and the location line
       as its caption.
       ================================================================ */
    .vm-hero-frame {
        height: 560px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 400px;
        grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
        column-gap: 48px;
        padding: 64px max(24px, calc((100% - 1152px) / 2)) 8px;
        background:
            radial-gradient(42% 62% at 79% 50%, rgba(22, 160, 133, .30) 0%, rgba(22, 160, 133, 0) 70%),
            radial-gradient(60% 80% at 0% 0%, rgba(143, 240, 139, .07) 0%, rgba(143, 240, 139, 0) 60%),
            linear-gradient(160deg, #0b4439 0%, #062a24 100%);
    }
    /* The ground's fine dot texture. */
    .vm-hero-frame::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1.2px) 0 0 / 5px 5px;
        pointer-events: none;
    }
    .vm-hero-img,
    .vm-hero-video,
    .vm-hero-scrim,
    .vm-hero-topbar { display: none; }

    .vm-hero-head {
        grid-column: 1;
        grid-row: 2 / 4;
        align-self: center;
        margin: 0;
        padding: 0 0 8px;
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .vm-hero-title {
        max-width: 640px;
        font-size: 60px;
        line-height: 1.05;
        letter-spacing: -1.6px;
        text-wrap: balance;
        text-shadow: none;
    }

    /* The pill: 64 tall, max 640. */
    .vm-searchbar {
        width: 100%;
        max-width: 640px;
        height: 64px;
        margin: 0;
        padding: 0 8px;
        box-shadow: 0 20px 46px rgba(2, 26, 21, .42);
    }
    .vm-searchbar-city {
        height: 48px;
        padding: 0 14px;
        gap: 7px;
        font-size: 14px;
    }
    .vm-searchbar-city-i { font-size: 13px; }
    .vm-searchbar-divider { height: 26px; }
    .vm-searchbar-input {
        height: 100%;
        padding: 0 14px 0 16px;
        font-size: 16px;
    }
    /* The "/" key's mark (approved for 01). The house faces only. */
    .vm-searchbar-kbd {
        min-width: 24px;
        height: 24px;
        margin-right: 10px;
        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 here. White text on teal is the solid
       #0f6d5c (6.3:1), never #16a085 (3.3:1). */
    .vm-searchbar-go {
        width: auto;
        height: 48px;
        padding: 0 26px;
        gap: 9px;
        border-radius: 999px;
        background: #0f6d5c;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 6px 16px rgba(22, 160, 133, .4);
    }
    .vm-searchbar-go i { font-size: 14px; }
    .vm-searchbar-go:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .vm-searchbar-city:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    /* The sign: two bars of a 12px dot grid, 288 square. Unlit (#1f4a40,
       no glow) while the count reads and at none; lit, it breathes. */
    .vm-hero-sign {
        grid-column: 2;
        grid-row: 2;
        justify-self: center;
        position: relative;
        width: 288px;
        height: 288px;
    }
    .vm-hero-sign-bar {
        position: absolute;
        left: 96px;
        top: 0;
        width: 96px;
        height: 288px;
        border-radius: 12px;
        background: radial-gradient(circle, #1f4a40 0 3.3px, rgba(31, 74, 64, 0) 4.4px) 3px 3px / 12px 12px;
    }
    .vm-hero-sign-bar--across {
        left: 0;
        top: 96px;
        width: 288px;
        height: 96px;
    }
    .vm-hero-sign.is-lit {
        filter: drop-shadow(0 0 5px rgba(143, 240, 139, .75)) drop-shadow(0 0 30px rgba(22, 160, 133, .7));
        animation: vmSignGlow 3.2s ease-in-out infinite;
    }
    .vm-hero-sign.is-lit .vm-hero-sign-bar {
        background: radial-gradient(circle, #d4ffcf 0 3.3px, rgba(143, 240, 139, 0) 4.4px) 3px 3px / 12px 12px;
    }
    /* The frame's own keyframes (its <style>). The card tile's vmCrossGlow
       and vmCrossHalo stay app.css's (the slice F4 contrast fix). */
    @keyframes vmSignGlow {
        0%, 100% { opacity: .84; }
        50% { opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-hero-sign.is-lit { animation: none; opacity: 1; }
    }

    /* The location line is the sign's caption. */
    .vm-hero-loc {
        grid-column: 2;
        grid-row: 3;
        justify-self: center;
        margin: 30px 0 0;
        gap: 8px;
        font-size: 12.5px;
        letter-spacing: .12em;
    }
    .vm-hero-loc i { font-size: 11.5px; }

    /* ================================================================
       2. THE PAGE — the 1200 column, the full-width band, More last
       .vm-body becomes a three-track grid: its sections in the middle
       track (the 1200 column), the band (::before) across all three
       behind Lab tests, Pharmacies open now and Emergency tonight. Rows
       are fixed so More products sits after the band (CSS only: no node
       moves). Spacing is margins, so a hidden section takes its space
       with it. The two lines over the body (41f, 46d) take the column.
       ================================================================ */
    .vm-body {
        display: grid;
        grid-template-columns: minmax(24px, 1fr) minmax(0, 1152px) minmax(24px, 1fr);
        gap: 0;
        padding: 0;
    }
    .vm-body > * { grid-column: 2; min-width: 0; }
    .vm-body > .vm-chiprow { grid-row: 1; }
    .vm-body > [data-allow] { grid-row: 2; }
    .vm-body > .vm-hm-send { grid-row: 3; }
    .vm-body > [data-tiles] { grid-row: 4; }
    .vm-body > [aria-labelledby="sym-title"] { grid-row: 5; }
    .vm-body > [data-again-section] { grid-row: 6; }
    .vm-body > [aria-labelledby="pop-title"] { grid-row: 7; }
    .vm-body > [aria-labelledby="ess-title"] { grid-row: 8; }
    .vm-body > [data-lt-section] { grid-row: 9; }
    .vm-body > [aria-labelledby="pharm-title"] { grid-row: 10; }
    .vm-body > [data-emg-section] { grid-row: 11; }
    .vm-body > [data-more-section] { grid-row: 12; }

    /* The band: #edf3f1, full width, hairlines top and bottom. */
    .vm-body::before {
        content: '';
        grid-column: 1 / -1;
        grid-row: 9 / 12;
        background: #edf3f1;
        border-top: 1px solid #e1eae7;
        border-bottom: 1px solid #e1eae7;
    }

    .vm-body > .vm-hm-send { margin-top: -40px; }
    .vm-body > [data-tiles] { margin-top: 16px; }
    .vm-body > [aria-labelledby="sym-title"] { margin-top: 40px; }
    .vm-body > [data-again-section],
    .vm-body > [aria-labelledby="pop-title"] { margin-top: 52px; }
    .vm-body > [aria-labelledby="ess-title"] { margin-top: 52px; margin-bottom: 48px; }
    .vm-body > [data-lt-section] { margin-top: 48px; }
    .vm-body > [aria-labelledby="pharm-title"] { margin-top: 40px; margin-bottom: 52px; }
    .vm-body > [data-lt-section][hidden] + [aria-labelledby="pharm-title"] { margin-top: 48px; }
    .vm-body > [data-emg-section] { margin-top: -12px; margin-bottom: 52px; }
    .vm-body > [data-more-section] { margin-top: 48px; margin-bottom: 8px; }

    .vm-cy-gone,
    .vm-ac-removed-wrap {
        width: min(1152px, calc(100% - 48px));
        margin: 24px auto 0;
    }
    .vm-cy-gone { border-radius: 14px; padding: 12px 16px; font-size: 13.5px; }
    .vm-ac-removed-wrap { padding: 0; }
    .vm-cy-gone:not([hidden]) ~ .vm-body > .vm-hm-send,
    .vm-ac-removed-wrap:not([hidden]) ~ .vm-body > .vm-hm-send { margin-top: 24px; }

    /* Section heads: 21px titles; See all, then the arrows, at the right. */
    .vm-sec { gap: 14px; }
    .vm-sec-head { gap: 16px; }
    .vm-sec-title { font-size: 21px; letter-spacing: -.5px; white-space: nowrap; }
    .vm-sec-sub { font-size: 13px; margin-top: 3px; }
    /* 41 (G6): "All at <counter>" under Everyday essentials' own line. */
    .vm-sec-sub + .vm-sec-sub { margin-top: 1px; }
    .vm-sec-head > .vm-sec-link {
        margin-left: auto;
        margin-right: 0;
        padding: 0 12px;
        gap: 7px;
        font-size: 13.5px;
    }
    .vm-sec-link:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; border-radius: 10px; }
    .vm-loading { padding: 18px 0; font-size: 14px; }
    .vm-empty { padding: 32px 20px; border-radius: 18px; }
    .vm-empty p { font-size: 14px; }

    /* ================================================================
       3. THE PRESCRIPTION CARD AND THE SIX SHELVES
       The card first, one row over the hero's foot (40): the 52 blue
       tile, the 18 title and its line, the 48 solid blue pill, which
       reads "Choose a photo" here. The six shelves in one row, 72 tall,
       borderless, the glyph in a 40 tinted square; hover lifts them.
       ================================================================ */
    .vm-hm-send {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;
        gap: 18px;
        padding: 20px 22px;
        border-radius: 18px;
        background: linear-gradient(100deg, #f2f9ff 0%, #fff 58%);
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 18px 44px rgba(2, 26, 21, .18);
    }
    .vm-hm-send > :first-child { flex: 1 1 auto; min-width: 0; gap: 18px; }
    .vm-hm-send > :first-child > span {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        font-size: 20px;
    }
    .vm-hm-send h2 { font-size: 18px; letter-spacing: -.3px; }
    .vm-hm-send p { margin-top: 3px; font-size: 13.5px; line-height: 1.45; }
    .vm-hm-send > :last-child {
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .vm-hm-send > :last-child > a {
        width: auto;
        height: 48px;
        padding: 0 24px;
        gap: 9px;
        font-size: 14px;
        white-space: nowrap;
        box-shadow: 0 6px 16px rgba(52, 152, 219, .28);
    }
    .vm-hm-send > :last-child > a i { font-size: 14px; }
    .vm-hm-send > :last-child > a:focus-visible { outline: 2px solid #1b6fa8; outline-offset: 2px; }

    .vm-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
    .vm-tile {
        height: 72px;
        padding: 0 10px 0 12px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        transition: box-shadow .2s ease, transform .2s ease;
    }
    .vm-tile i {
        width: 40px;
        height: 40px;
        border-radius: 11px;
        background: #e3f4f0;
        color: #0f6d5c;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 17px;
    }
    .vm-tile span { font-size: 13.5px; white-space: nowrap; }
    .vm-tile:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* ================================================================
       4. SHOP BY SYMPTOM — the heading and the six pills on one line
       ================================================================ */
    .vm-body > [aria-labelledby="sym-title"] {
        flex-direction: row;
        align-items: center;
        gap: 28px;
    }
    .vm-body > [aria-labelledby="sym-title"] > .vm-sec-head { flex-shrink: 0; }
    .vm-pills { flex: 1 1 auto; min-width: 0; gap: 10px; }
    .vm-pill { padding: 0 18px; font-size: 14px; white-space: nowrap; }
    .vm-pill:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* ================================================================
       5. THE RAILS — one full row each, paged by D0's arrows
       Buy it again up to four (fewer share the row), Popular six,
       Everyday essentials eight with Popular's card. The vertical
       padding keeps the house shadow inside the paged row.
       ================================================================ */
    .vm-rail.vm-dt-rail {
        display: grid;
        grid-auto-flow: column;
        gap: 16px;
        padding: 2px 0 40px;
        margin: -2px 0 -40px;
    }
    .vm-rail--again.vm-dt-rail { grid-auto-columns: calc((100% - 48px) / 4); }
    .vm-rail--again.vm-dt-rail:not(:has(> :nth-child(5))) { grid-auto-columns: minmax(0, 1fr); }
    .vm-rail--pop.vm-dt-rail { grid-auto-columns: calc((100% - 80px) / 6); }
    .vm-rail--ess.vm-dt-rail { grid-auto-columns: calc((100% - 112px) / 8); }

    /* -- Buy it again: 56 thumb, 14 name, the round add. */
    .vm-again-card {
        width: auto;
        min-height: 0;
        padding: 10px;
        gap: 14px;
    }
    .vm-again-thumb { width: 56px; height: 56px; }
    .vm-again-name { font-size: 14px; }
    .vm-again-meta { margin-top: 3px; font-size: 12px; }
    .vm-again-meta strong { font-size: 14px; }

    /* -- Popular's card (Popular, More products): a 132 tile, the name in
       14 Space Grotesk, the price on its own line, then the pharmacy
       count beside the round add. Cards in a row share a height. */
    .vm-prod-card {
        width: auto;
        display: flex;
        flex-direction: column;
    }
    .vm-prod-media,
    .vm-grid--more .vm-prod-media {
        height: 132px;
        aspect-ratio: auto;
        flex-shrink: 0;
    }
    .vm-prod-media .vm-cat-glyph,
    .vm-ess-media .vm-cat-glyph {
        display: flex;
        width: 100%;
        height: 100%;
        font-size: 33px;
    }
    .vm-ess-media .vm-cat-glyph { font-size: 27px; }
    .vm-prod-body {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto 1fr auto;
        column-gap: 8px;
        padding: 12px 14px 14px;
    }
    .vm-prod-title {
        grid-column: 1 / -1;
        grid-row: 1;
        font-size: 14px;
        line-height: 1.3;
        height: 36px;
    }
    .vm-prod-body > .vm-price-row {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: end;
        margin: 0;
        padding-top: 8px;
    }
    .vm-price-from { font-size: 11.5px; }
    .vm-price-fig { font-size: 18px; }
    .vm-price-cur { font-size: 11.5px; }
    .vm-prod-count {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
        margin: 2px 0 0;
        font-size: 12px;
        line-height: 1.5;
    }
    .vm-prod-body > .vm-dt-add {
        grid-column: 2;
        grid-row: 3;
        position: relative;
        margin: 2px 0 0;
    }

    /* The prescription door as a round control: prescription blue's tint,
       solid on hover and focus (pharmacy side only). */
    .vm-dt-presc {
        position: relative;
        background: #eef6fc;
        box-shadow: none;
        color: #1b6fa8;
    }
    .vm-dt-presc:focus-visible {
        background: #1b6fa8;
        color: #fff;
        outline: 2px solid #1b6fa8;
        outline-offset: 2px;
    }

    /* -- Everyday essentials: Popular's card at 120, no Add. */
    .vm-ess-card {
        width: auto;
        padding: 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .vm-ess-media { height: 120px; border-radius: 0; flex-shrink: 0; }
    .vm-ess-body { padding: 12px 12px 14px; }
    .vm-ess-name {
        height: 36px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.2px;
        line-height: 1.3;
        color: #0f172a;
    }
    .vm-ess-price { margin-top: 5px; flex-wrap: wrap; }
    .vm-ess-price .vm-price-from { font-size: 10.5px; }
    .vm-ess-price .vm-price-fig { font-size: 17px; }
    .vm-ess-price .vm-price-cur { font-size: 10px; }
    .vm-ess-count { margin-top: 0; font-size: 11.5px; }
    .vm-prod-card a:focus-visible,
    .vm-again-card a:focus-visible,
    .vm-ess-card:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* ================================================================
       6. LAB TESTS — on the band: the teal block left (360, min 240),
       its foot pill pinned to the block's foot (CSS order alone: the
       list unwraps), the four rows two by two, 72 tall.
       ================================================================ */
    .vm-lt {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        grid-template-rows: auto auto;
    }
    .vm-lt-band {
        grid-column: 1;
        grid-row: 1 / 3;
        min-height: 240px;
        padding: 28px 28px 26px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    }
    .vm-lt-ghost { right: -26px; bottom: -40px; font-size: 170px; }
    .vm-lt-eyebrow { gap: 8px; font-size: 11.5px; }
    .vm-lt-eyebrow i { font-size: 11.5px; }
    .vm-lt-title {
        margin-top: 12px;
        font-size: 23px;
        letter-spacing: -.6px;
        line-height: 1.2;
    }
    .vm-lt-list { display: contents; }
    .vm-lt-rows {
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: center;
        padding: 14px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    /* 41's design pass (G6): fewer than four rows stack in one column
       (three in the 2-up grid left an empty cell); 3 x 72 + the gaps and
       the padding = 260, so the card grows by 20. */
    .vm-lt-rows[data-lt-rows]:not(:has(> :nth-child(4))) { grid-template-columns: minmax(0, 1fr); }
    .vm-lt-row {
        min-height: 72px;
        padding: 12px 14px 12px 12px;
        gap: 12px;
    }
    .vm-lt-ic { width: 46px; height: 46px; }
    .vm-lt-ic i { font-size: 17px; }
    .vm-lt-name { font-size: 16px; }
    .vm-lt-fr { font-size: 12.5px; color: #475569; }
    .vm-lt-only { font-size: 12.5px; }
    .vm-lt-from { font-size: 11px; color: #475569; }
    .vm-lt-fig { font-size: 18px; }
    .vm-lt-cur { font-size: 10px; color: #475569; }
    .vm-lt-go { width: 26px; height: 26px; }
    .vm-lt-go i { font-size: 11px; }
    .vm-lt-all {
        grid-column: 1;
        grid-row: 2;
        align-self: end;
        justify-self: start;
        position: relative;
        z-index: 1;
        width: auto;
        height: 48px;
        margin: 0 28px 26px;
        padding: 0 22px;
    }

    /* ================================================================
       7. PHARMACIES OPEN NOW
       The chips on the heading line (home-desktop.js moves the one chip
       row there; the Filters button holds the same three, so it goes),
       "All N" at the right. The cards are 26's card in its desktop form
       (26a-3): the 300 cover, the lit cross tile beside the name, the
       rows she can use now, Call | Directions and Open store at the far
       right; under it the shelf band (B): "Bought most often here" and
       three boxes split by hairlines.
       ================================================================ */
    .vm-body > [aria-labelledby="pharm-title"] > .vm-sec-head { align-items: center; gap: 24px; }
    .vm-sec-head > .vm-chiprow { flex-wrap: wrap; gap: 8px; overflow: visible; }
    .vm-chip--filters { display: none; }
    .vm-chiprow .vm-chip {
        height: 44px;
        padding: 0 16px;
        border-radius: 16px;
        background: #fff;
        box-shadow: inset 0 0 0 1px #e2e8f0;
        color: #475569;
        font-size: 13.5px;
        font-weight: 600;
    }
    .vm-chiprow .vm-chip.is-active {
        background: #e3f4f0;
        box-shadow: none;
        color: #0f6d5c;
        font-weight: 700;
    }
    .vm-chiprow .vm-chip:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    .vm-body [aria-labelledby="pharm-title"] .vm-sec-link { font-size: 14px; }
    [data-pharm-list] { gap: 16px; }

    .vm-hm-card { display: flex; flex-direction: column; }
    .vm-hm-card-row { display: flex; min-height: 212px; }
    .vm-hm-card .vm-dir-media {
        width: 300px;
        height: auto;
        flex-shrink: 0;
    }
    .vm-hm-card .vm-dir-pill { top: 14px; left: 14px; }
    .vm-hm-card .vm-dir-cbody {
        flex: 1 1 auto;
        min-width: 0;
        padding: 20px 22px 18px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .vm-hm-card-head { display: flex; align-items: center; gap: 14px; }
    .vm-hm-card .vm-dir-tile {
        position: static;
        width: 48px;
        height: 48px;
        padding: 0;
        border-radius: 13px;
        background: transparent;
        flex-shrink: 0;
    }
    .vm-hm-card .vm-dir-tile-in { border-radius: 13px; }
    .vm-hm-card .vm-dir-tile i { font-size: 18px; }
    .vm-hm-card .vm-dir-chead { min-width: 0; min-height: 0; padding-left: 0; }
    .vm-hm-card .vm-dir-name { font-size: 20px; letter-spacing: -.4px; }
    .vm-hm-card .vm-dir-place { margin-top: 3px; font-size: 13px; }
    .vm-hm-card .vm-dir-sep { color: #cbd5e1; }
    .vm-hm-card .vm-dir-facts { margin: 0; gap: 8px; }
    .vm-hm-card .vm-dir-fact { font-size: 13.5px; }
    .vm-hm-card .vm-dir-link { margin: 0; }
    .vm-hm-card .vm-dir-acts {
        margin-top: auto;
        padding-top: 14px;
        align-items: center;
    }
    .vm-hm-card .vm-dir-go {
        flex: 0 0 auto;
        margin-left: auto;
        padding: 0 22px;
    }
    .vm-hm-card a:focus-visible,
    .vm-hm-card button:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    .vm-hm-shelf {
        display: flex;
        align-items: center;
        min-height: 80px;
        padding: 14px 4px 14px 22px;
        background: #f8fafc;
        border-top: 1px solid #eef1f5;
    }
    .vm-hm-shelf-label {
        width: 108px;
        flex-shrink: 0;
        margin: 0;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .08em;
        line-height: 1.4;
        text-transform: uppercase;
        color: #0f6d5c;
    }
    .vm-hm-shelf-row { flex: 1 1 auto; min-width: 0; display: flex; }
    .vm-hm-shelf-item {
        flex: 1 1 0;
        min-width: 0;
        min-height: 52px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: #0f172a;
        transition: color .16s ease;
    }
    .vm-hm-shelf-item + .vm-hm-shelf-item { border-left: 1px solid #e2e8f0; }
    .vm-hm-shelf-item:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; border-radius: 10px; }
    .vm-hm-shelf-thumb {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 12px;
        overflow: hidden;
        background: #f1f5f9;
        color: #94a3b8;
    }
    .vm-hm-shelf-thumb img { width: 100%; height: 100%; object-fit: cover; }
    .vm-hm-shelf-thumb i { font-size: 20px; }
    .vm-hm-shelf-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    /* The dose and the pack are the name: it wraps, never cut (the house
       rule wins over the drawing's one-line ellipsis); the price keeps its
       own line under it. */
    .vm-hm-shelf-name {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.2px;
        line-height: 1.3;
        overflow-wrap: break-word;
    }
    .vm-hm-shelf-price { display: flex; align-items: baseline; gap: 3px; }
    .vm-hm-shelf-fig {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: -.3px;
        color: #0f172a;
        font-variant-numeric: tabular-nums;
    }
    .vm-hm-shelf-cur { font-size: 10.5px; font-weight: 600; color: #64748b; }

    /* -- 41 (desktop slice G6), a one-counter city. The end marker "The
       only pharmacy in <city>" is 02-d's end rule on the band: 16 under
       the card, the hairlines #d3dedb, the words 12.5 / 600 on one line.
       The far line (L8) is 26-d-states' Allow row: white, bordered, 66
       tall, pin | the sentence at 14.5 | the mint "Choose a city". The
       empty list ("No pharmacy matches these filters.") one white card. */
    [aria-labelledby="pharm-title"] > .vm-cy-end,
    [aria-labelledby="pharm-title"] > .vm-far { margin-top: 2px; }
    .vm-cy-end {
        gap: 16px;
        padding: 0;
        font-size: 12.5px;
        font-weight: 600;
        color: #475569;
        white-space: nowrap;
    }
    .vm-cy-end::before,
    .vm-cy-end::after { background: #d3dedb; }
    .vm-far {
        min-height: 66px;
        flex-wrap: nowrap;
        gap: 12px;
        padding: 10px 10px 10px 16px;
        border: 1px solid #e2e8f0;
        border-radius: 14px;
        background: #fff;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.45;
        color: #0f172a;
    }
    .vm-far > i { flex-shrink: 0; font-size: 14px; color: #0f6d5c; }
    .vm-far-t { flex: 1 1 auto; text-wrap: pretty; }
    .vm-far-go {
        flex-shrink: 0;
        height: 44px;
        padding: 0 18px;
        border-radius: 999px;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 13.5px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }
    .vm-far-go:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    [aria-labelledby="pharm-title"] > .vm-empty {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        border: 0;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
    }
    [aria-labelledby="pharm-title"] > .vm-empty i { margin: 0; font-size: 22px; color: #94a3b8; }
    [aria-labelledby="pharm-title"] > .vm-empty p { color: #475569; }

    /* ================================================================
       8. EMERGENCY TONIGHT — one lifted card, three columns: what it is
       (title + count) · who (the nearest on duty) · the act (Call, red
       on the button only, the number it dials printed under it).
       ================================================================ */
    .vm-emg {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        column-gap: 28px;
        align-items: center;
        padding: 22px 24px;
    }
    /* The hairline before the second column. */
    .vm-emg::before {
        content: '';
        grid-column: 2;
        grid-row: 1 / 3;
        align-self: stretch;
        border-left: 1px solid #f0f2f4;
    }
    .vm-emg-title {
        grid-column: 1;
        grid-row: 1;
        align-self: end;
        font-size: 21px;
        letter-spacing: -.5px;
    }
    .vm-emg:has(> .vm-emg-body[hidden]) .vm-emg-title { grid-row: 1 / 3; align-self: center; }
    .vm-emg-body {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        margin-top: 4px;
        font-size: 14px;
        color: #475569;
    }
    .vm-emg-foot { display: contents; }
    .vm-emg-name {
        grid-column: 2;
        grid-row: 1;
        align-self: end;
        padding-left: 28px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 17px;
        letter-spacing: -.3px;
    }
    .vm-emg-meta {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        margin-top: 3px;
        padding-left: 28px;
        font-size: 13px;
    }
    .vm-btn-call {
        grid-column: 3;
        grid-row: 1;
        align-self: end;
        width: auto;
        height: 48px;
        margin: 0;
        padding: 0 24px;
        gap: 9px;
        font-size: 14px;
        white-space: nowrap;
    }
    .vm-btn-call i { font-size: 12.5px; }
    .vm-btn-call:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; }
    .vm-emg-number {
        grid-column: 3;
        grid-row: 2;
        justify-self: center;
        align-self: start;
        margin-top: 6px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .02em;
        color: #334155;
    }

    /* ================================================================
       9. MORE PRODUCTS — last, above the footer: Popular's card, four
       across here and six from 1120 (home.js reads the same tiers, two
       rows); "See more products" a mint 48 pill, centred.
       ================================================================ */
    .vm-grid--more { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .vm-btn-more {
        align-self: center;
        width: auto;
        height: 48px;
        min-height: 48px;
        margin-top: 6px;
        padding: 0 26px;
        gap: 9px;
        border: 0;
        background: #e3f4f0;
        color: #0f6d5c;
        font-size: 14px;
        box-shadow: none;
    }
    .vm-btn-more i { font-size: 11px; }
    .vm-btn-more:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* ================================================================
       Hover (a pointer that can hover). Lifts are off under reduced
       motion; the shadow still answers.
       ================================================================ */
    @media (hover: hover) {
        .vm-searchbar-go:hover { background: #0c5b4c; color: #fff; }
        .vm-searchbar-city:hover { background: #f1f5f9; }
        .vm-hm-send > :last-child > a:hover { background: #175f90; color: #fff; }
        .vm-tile:hover {
            box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
            transform: translateY(-2px);
            color: #0f172a;
        }
        .vm-pill:hover { box-shadow: inset 0 0 0 1.5px #16a085; color: #0f6d5c; }
        .vm-sec-link:hover { color: #11806a; }
        .vm-dt-presc:hover { background: #1b6fa8; box-shadow: none; color: #fff; }
        .vm-lt-all:hover { background: #fff; color: #0f6d5c; }
        .vm-chiprow .vm-chip:not([disabled]):hover { box-shadow: inset 0 0 0 1.5px #16a085; color: #0f6d5c; }
        .vm-hm-shelf-item:hover { color: #0f6d5c; }
        .vm-btn-more:hover { background: #d3ede6; color: #0f6d5c; }
        .vm-far-go:hover { background: #d3ede6; color: #0f6d5c; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-tile,
        .vm-hm-shelf-item { transition: none; }
        .vm-tile:hover { transform: none; }
    }
}

/* ====================================================================
   11. THE NARROW WINDOW (901-1119): 01-d's counts would crush here, so
   the sign shrinks, the shelves take two rows of three, and the rails
   show fewer cards to a row (still paged, still never a cut card).
   ==================================================================== */
@media (min-width: 901px) and (max-width: 1119px) {
    .vm-hero-frame {
        grid-template-columns: minmax(0, 1fr) 280px;
        column-gap: 40px;
    }
    .vm-hero-title { font-size: 48px; letter-spacing: -1.2px; }
    .vm-hero-sign { width: 216px; height: 216px; }
    .vm-hero-sign-bar { left: 72px; width: 72px; height: 216px; }
    .vm-hero-sign-bar--across { left: 0; top: 72px; width: 216px; height: 72px; }

    .vm-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Three to a row once there are four or more (fewer share the row). */
    .vm-rail--again.vm-dt-rail,
    .vm-rail--again.vm-dt-rail:has(> :nth-child(4)) { grid-auto-columns: calc((100% - 32px) / 3); }
    .vm-rail--pop.vm-dt-rail { grid-auto-columns: calc((100% - 48px) / 4); }
    .vm-rail--ess.vm-dt-rail { grid-auto-columns: calc((100% - 80px) / 6); }

    /* The four rows one under another: two across would cut the names. */
    .vm-lt { grid-template-columns: 300px minmax(0, 1fr); }
    .vm-lt-rows { grid-template-columns: minmax(0, 1fr); }
    .vm-hm-card .vm-dir-media { width: 260px; }
    .vm-hm-shelf-item { padding: 0 14px; }
}

/* ====================================================================
   12. SIX ACROSS (>=1120): More products takes Popular's card and size;
   two rows are the read's twelve (home.js).
   ==================================================================== */
@media (min-width: 1120px) {
    .vm-grid--more { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}