/* ====================================================================
   SCREEN 02 — THE PRODUCT LIST, the desktop layer (desktop slice D1,
   2026-10-08). pharmacy/category.html only, linked after
   desktop/shared.css.

   Frames: 02-d (the Fever list at 1280, the aesthetic pass and the
   section 1 pass folded in), 02-d-pick (Form and Sort), 02-d-end (the
   list's end and its states), 02-d-narrow (1000 wide), 02-d-row (the
   filter row, cut), 02-d-panel (the panel's states) in
   docs/design/pharmacy/screens/02/desktop/frame.html; the records
   Screen 02 - desktop work order.md + desktop aesthetic order.md; brief
   briefs/2026-10-08_desktop-slice-D1.md.

   Tiers: >=901 the layer (one column: the head on the mint wash, the
   counter band under it, the grid four across, the basket bar as D0's
   foot bar) · >=1120 main | the 340 sticky side card (the counter, the
   basket's lines, the total and View basket), the panel level with the
   title · >=1240 the header's compact search is the page's search, so
   the page field hides (the brief's ruling: one search on screen).

   Hooks: .vm-cat-tabs / .vm-cat-tab (the tabs catalogue.js draws),
   .vm-cat-side (the side card: D0's shell, .vm-dt-side-shell, since
   slice D7), .vm-cat-bar-cover (D0's .vm-dt-side-cover from 1120:
   catalogue.js's side hooks), .vm-cat-sortopt (D0's .vm-dt-pop-row
   rows), .vm-cat-pager (the pager's desktop sizes; its base is
   app.css's, both widths), the card's .vm-dt-lift / .vm-dt-add
   (render.js), .vm-dt-presc (the prescription door's round control:
   prescription blue, so never in shared.css). The phone-only glyphs and
   the closed sheet are desktop/shared.css's.

   Sections, in the frame's order:
     1. The page frame and the head (exit, title, count, advice, field,
        tabs)
     2. The side card (>=1120) and the narrow window's two bars
     3. The filter row (chips, then Showing · Sort)
     4. The grid and its three cards
     5. The list's end: the pager, the empty card, Try again
     6. Form and Sort as popovers
   ==================================================================== */

@media (min-width: 901px) {

    /* ================================================================
       1. THE PAGE FRAME AND THE HEAD
       One surface: no white band and no rule (the section 1 pass), the
       head on the shell's mint wash, in the 1200 column. Exit, the cut
       at 48, the count (15 Space Grotesk ink, unchanged), the advice row
       white on the wash, the page field under it (901-1239), then the
       cut's neighbours as tabs on a hairline, the filter row right under.
       ================================================================ */
    .vm-app.vm-cat-page {
        padding: 0 max(24px, calc((100% - 1152px) / 2)) 56px;
    }
    .vm-cat-head {
        margin-top: 12px;
        padding: 0;
        background: transparent;
        border-bottom: 0;
        gap: 0;
    }
    .vm-cat-back {
        align-self: flex-start;
        margin-bottom: 0;
        font-size: 13.5px;
    }
    .vm-cat-heading { margin-top: 4px; }
    .vm-cat-titles { gap: 10px; padding: 0; }
    .vm-cat-title {
        font-size: 48px;
        letter-spacing: -1.6px;
        line-height: 1;
    }
    .vm-cat-advice {
        align-self: flex-start;
        width: fit-content;
        max-width: 100%;
        margin-top: 16px;
        padding: 10px 14px;
        gap: 10px;
        align-items: center;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    }
    .vm-cat-advice i { margin-top: 0; font-size: 13px; }
    .vm-cat-advice span { font-size: 13px; }

    /* The page field (901-1239): under the advice row, 340 wide, at the
       head's right edge; Home's search material. */
    .vm-cat-search {
        align-self: flex-end;
        width: 340px;
        max-width: 100%;
        height: 48px;
        margin-top: 16px;
        padding: 0 18px;
        gap: 12px;
        border: 0;
        box-shadow: 0 0 0 1px #e2e8f0, 0 10px 28px rgba(16, 24, 40, .07);
        transition: box-shadow .2s ease;
    }
    .vm-cat-search > i { font-size: 15px; color: #0f6d5c; }
    .vm-cat-search-input { font-size: 15px; }
    .vm-cat-search-input::placeholder { color: #64748b; opacity: 1; }
    .vm-cat-search:focus-within { box-shadow: 0 0 0 1.5px #0f6d5c, 0 10px 28px rgba(16, 24, 40, .09); }

    /* The tabs: Home's six as text, the current one ink with a 2.5px
       teal underline on the hairline; the first aligns with the title. */
    .vm-cat-tabs {
        margin-top: 22px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        gap: 2px;
        border-bottom: 1px solid #e2e8f0;
    }
    .vm-cat-tab {
        height: 48px;
        margin-bottom: -1px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        border-bottom: 2.5px solid transparent;
        font-size: 14px;
        font-weight: 600;
        color: #475569;
        white-space: nowrap;
        transition: color .16s ease, border-color .16s ease;
    }
    .vm-cat-tab:first-child { padding-left: 0; margin-right: 14px; padding-right: 14px; }
    .vm-cat-tab:first-child:not([aria-current]) { padding-right: 0; }
    .vm-cat-tab[aria-current="page"] {
        border-bottom-color: #16a085;
        font-weight: 700;
        color: #0f172a;
    }
    .vm-cat-tab:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; border-radius: 8px; }

    /* ================================================================
       2. THE COUNTER BAND AND THE BASKET BAR (901-1119: 02-d-narrow)
       The phone's two bars widened: the mint counter band under the
       head, full width; the basket bar is D0's foot bar (fixed, full
       width, its content in the column). The cover shows only in the
       side card (section 2b).
       ================================================================ */
    .vm-cat-bar-cover { display: none; }
    .vm-cat-bar-btn { font-size: 13.5px; }
    /* 41f(4) (desktop slice G6): the counter's town in the name line,
       " · Douala", in the line's quiet ink (band and side card alike). */
    .vm-cat-bar-town { font-weight: 500; color: #475569; }
    .vm-cat-basket-fig { font-size: 22px; letter-spacing: -.4px; }
    .vm-cat-basket-cur { font-size: 12px; }
    .vm-cat-basket-sub { margin-top: 2px; font-size: 12.5px; }
    .vm-cat-basket-btn { padding: 0 24px; font-size: 14px; }
    .vm-cat-bar-btn:focus-visible,
    .vm-cat-basket-btn:focus-visible,
    .vm-cat-back:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* ================================================================
       3. THE FILTER ROW — one line over the grid: In stock · No
       prescription · Form at the left; "Showing N of M" (only once a
       chip has cut the list), a hairline, and the sort at the right.
       ================================================================ */
    .vm-cat-body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 16px;
        row-gap: 18px;
        padding: 18px 0 0;
    }
    .vm-cat-body > * { grid-column: 1 / -1; min-width: 0; }
    .vm-cat-body > .vm-cat-chips { grid-column: 1; }
    .vm-cat-body > .vm-cat-sortrow { grid-column: 2; justify-content: flex-end; gap: 6px; }
    .vm-cat-chip { padding: 0 16px; }
    .vm-cat-showing {
        order: -1;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 12.5px;
        white-space: nowrap;
    }
    .vm-cat-showing::after {
        content: '';
        width: 1px;
        height: 20px;
        background: #e2e8f0;
    }
    .vm-cat-page .vm-cat-sort { padding: 0 4px 0 14px; }
    .vm-cat-chip:focus-visible,
    .vm-cat-sort:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }
    /* The opener of the open popover is drawn pressed. */
    .vm-cat-chip[aria-expanded="true"] { box-shadow: inset 0 0 0 1.5px #16a085; }
    .vm-cat-sort[aria-expanded="true"] { background: #e3f4f0; color: #0f6d5c; }
    .vm-cat-sort[aria-expanded="true"] i { color: #0f6d5c; }

    /* ================================================================
       4. THE GRID — four across, Popular's desktop card carrying 02's
       own price states: a 132 tile (the placeholder plate: the glyph on
       a 68 white disc over #f8fafc -> #f1f5f9), the name in 14 Space
       Grotesk (min 36, no max: doses are the name), the price on its own
       line at 18, the stock line beside the round control. Hover lifts
       the card (D0's .vm-dt-lift) and turns the name teal.
       ================================================================ */
    .vm-cat-page .vm-cat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .vm-cat-page .vm-cat-card { padding: 0; overflow: hidden; }
    .vm-cat-page .vm-cat-tile {
        height: 132px;
        border-radius: 0;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    }
    .vm-cat-page .vm-cat-glyph { background: transparent; }
    .vm-cat-page .vm-cat-glyph i {
        width: 68px;
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(16, 24, 40, .06);
        font-size: 26px;
    }
    .vm-cat-page .vm-cat-badge { top: 10px; left: 10px; height: 24px; padding: 0 9px; font-size: 11px; }
    .vm-cat-page .vm-cat-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto 1fr auto;
        column-gap: 8px;
        padding: 12px 14px 14px;
    }
    .vm-cat-page .vm-cat-name {
        grid-column: 1 / -1;
        grid-row: 1;
        min-height: 36px;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: -.2px;
        line-height: 1.3;
    }
    .vm-cat-page .vm-cat-foot { display: contents; }
    .vm-cat-page .vm-cat-price {
        grid-column: 1 / -1;
        grid-row: 2;
        align-self: end;
        gap: 5px;
        padding-top: 8px;
    }
    .vm-cat-page .vm-cat-from { font-size: 11.5px; font-weight: 600; margin-right: 0; }
    .vm-cat-page .vm-cat-fig { font-size: 18px; letter-spacing: 0; }
    .vm-cat-page .vm-cat-cur { font-size: 11.5px; font-weight: 400; }
    .vm-cat-page .vm-cat-meta {
        grid-column: 1;
        grid-row: 3;
        align-self: center;
        margin: 2px 0 0;
        font-size: 12px;
        line-height: 1.35;
    }
    .vm-cat-page .vm-cat-act {
        grid-column: 2;
        grid-row: 3;
        align-self: center;
        margin-top: 2px;
    }
    /* The prescription door: its tint, solid on hover and focus. */
    .vm-cat-page .vm-dt-presc { background: #eef6fc; color: #1b6fa8; }
    .vm-cat-page .vm-dt-presc:focus-visible {
        background: #1b6fa8;
        color: #fff;
        outline: 2px solid #1b6fa8;
        outline-offset: 2px;
    }
    .vm-cat-page .vm-cat-act--where:focus-visible,
    .vm-cat-page .vm-cat-name:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    /* ================================================================
       5. THE LIST'S END AND ITS STATES (02-d-end)
       The pager under the grid (the line at 12.5, the 160 progress line,
       the mint 48 "Show N more"); the empty card white on the column
       (radius 18, the house shadow), its doors 48 pills; a failed first
       read's Try again the solid act.
       ================================================================ */
    .vm-cat-pager { margin-top: 14px; gap: 14px; }
    .vm-cat-pager-line { gap: 16px; }
    .vm-cat-pager-text { font-size: 12.5px; }
    .vm-cat-more { padding: 0 26px; font-size: 14px; gap: 9px; }
    .vm-cat-more-fail-t { font-size: 13.5px; }
    .vm-cat-more:focus-visible,
    .vm-cat-retry:focus-visible,
    .vm-cat-empty-btn:focus-visible { outline: 2px solid #0f6d5c; outline-offset: 2px; }

    .vm-cat-page .vm-empty {
        padding: 40px;
        border: 0;
        border-radius: 18px;
        box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 10px 28px rgba(16, 24, 40, .07);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .vm-cat-page .vm-empty i { font-size: 28px; color: #94a3b8; }
    .vm-cat-page .vm-empty p {
        max-width: 440px;
        font-size: 14.5px;
        font-weight: 600;
        color: #0f172a;
        text-wrap: pretty;
    }
    .vm-cat-empty-acts {
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        margin-top: 18px;
    }
    .vm-cat-empty-btn {
        height: 48px;
        padding: 0 24px;
        border-radius: 999px;
        font-size: 14px;
    }
    .vm-cat-empty-btn:not(.vm-cat-empty-btn--quiet) { box-shadow: 0 6px 16px rgba(22, 160, 133, .28); }
    .vm-cat-empty-btn--quiet { background: #e3f4f0; }
    .vm-cat-retry {
        width: auto;
        height: 48px;
        margin-top: 18px;
        padding: 0 24px;
        gap: 9px;
        border-radius: 999px;
        font-size: 14px;
        box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    }
    .vm-cat-page .vm-loading { padding: 18px 0; font-size: 14px; }

    /* ================================================================
       6. FORM AND SORT AS POPOVERS (02-d-pick)
       Where anchor positioning is supported, the open sheet stands under
       its opener: Form 360 wide under the Form chip, Sort 320 under the
       sort, right-aligned with the grid; radius 16, a hairline ring and
       the deeper shadow. The backdrop only catches the outside click (the
       grid stays undimmed), and the openers stand above it, so opening
       the other one is one click. Sort drops its foot (picking closes
       it). Without anchor positioning the sheet stays D0's dialog.
       ================================================================ */
    .vm-cat-page .vm-sheet-head {
        padding: 16px 12px 4px 18px;
        border-bottom: 0;
    }
    .vm-cat-page .vm-sheet-title-row h3 { font-size: 17px; letter-spacing: -.3px; }
    .vm-cat-page .vm-sheet-reset {
        padding: 0 12px;
        border-radius: 12px;
        color: #0f6d5c;
        font-size: 13.5px;
        font-weight: 700;
    }
    .vm-cat-page .vm-sheet-body { padding: 4px 18px 16px; }
    .vm-cat-page .vm-sheet-label { margin-bottom: 0; font-size: 12.5px; }
    .vm-cat-page .vm-sheet-note { margin: 3px 0 10px; font-size: 12.5px; line-height: 1.45; }
    .vm-cat-page .vm-sheet-chips { margin-bottom: 0; }
    .vm-cat-page .vm-sheet-foot { padding: 12px 18px 14px; border-top-color: #eef1f5; }
    .vm-cat-page .vm-sheet-apply {
        border-radius: 999px;
        font-size: 14px;
        box-shadow: 0 6px 16px rgba(22, 160, 133, .28);
    }
    .vm-cat-page .vm-sheet:has([data-panel="sort"]:not([hidden])) .vm-sheet-foot { display: none; }
    .vm-cat-page .vm-sheet:has([data-panel="sort"]:not([hidden])) .vm-sheet-body { padding: 4px 8px 10px; }
    .vm-cat-page .vm-sheet:has([data-panel="sort"]:not([hidden])) .vm-sheet-label { margin: 0 10px 8px; }
    .vm-cat-sortlist { gap: 2px; margin-bottom: 0; }
    /* The rows are D0's popover rows (.vm-dt-pop-row, the pressed one by
       its aria-pressed); the phone's 52 height and hairline give way. */
    .vm-cat-sortopt {
        height: 48px;
        border-bottom: 0;
    }
    .vm-cat-sortopt i { color: #0f6d5c; font-size: 12px; }
    .vm-cat-page .vm-sheet .vm-cat-chip:focus-visible,
    .vm-cat-page .vm-sheet-reset:focus-visible,
    .vm-cat-page .vm-sheet-apply:focus-visible { outline: 2px solid #0f6d5c; outline-offset: -2px; }

    @supports (anchor-name: --vm-cat-form) {
        .vm-cat-page [data-form-chip] { anchor-name: --vm-cat-form; }
        .vm-cat-page [data-open-sort] { anchor-name: --vm-cat-sort; }
        .vm-cat-page .vm-sheet.is-open {
            position: absolute;
            position-anchor: --vm-cat-form;
            top: calc(anchor(bottom) + 8px);
            bottom: auto;
            left: anchor(left);
            right: auto;
            transform: none;
            width: 360px;
            max-width: calc(100vw - 48px);
            max-height: none;
            overflow: visible;
            border-radius: 16px;
            box-shadow: 0 0 0 1px #e2e8f0, 0 18px 44px rgba(16, 24, 40, .16);
            animation: none;
        }
        .vm-cat-page .vm-sheet.is-open:has([data-panel="sort"]:not([hidden])) {
            position-anchor: --vm-cat-sort;
            left: auto;
            right: anchor(right);
            width: 320px;
        }
        .vm-cat-page .vm-sheet.is-open .vm-sheet-head { position: static; border-radius: 16px 16px 0 0; }
        .vm-cat-page .vm-sheet.is-open .vm-sheet-foot { position: static; border-radius: 0 0 16px 16px; }
        .vm-cat-page .vm-sheet-backdrop.is-open { background: transparent; }
        .vm-cat-page:has(.vm-sheet.is-open) .vm-cat-chips,
        .vm-cat-page:has(.vm-sheet.is-open) .vm-cat-sortrow { position: relative; z-index: 62; }
    }

    @media (hover: hover) {
        .vm-cat-tab:not([aria-current]):hover { color: #0f172a; border-bottom-color: #cfe7e0; }
        .vm-cat-search:hover { box-shadow: 0 0 0 1.5px #16a085, 0 10px 28px rgba(16, 24, 40, .09); }
        .vm-cat-chip:hover { box-shadow: inset 0 0 0 1.5px #16a085; color: #0f6d5c; }
        .vm-cat-sort:hover,
        .vm-cat-sort:hover i { color: #0f6d5c; }
        .vm-cat-page .vm-dt-presc:hover { background: #1b6fa8; color: #fff; }
        .vm-cat-more:hover { box-shadow: inset 0 0 0 1.5px #16a085; color: #0f6d5c; }
        .vm-cat-empty-btn--quiet:hover { box-shadow: inset 0 0 0 1.5px #16a085; }
        .vm-cat-bar-btn:hover { box-shadow: inset 0 0 0 1.5px #16a085; color: #0f6d5c; }
        .vm-cat-page .vm-sheet-reset:hover { background: #f1f5f9; }
    }
    @media (prefers-reduced-motion: reduce) {
        .vm-cat-tab,
        .vm-cat-search { transition: none; }
    }
}

/* ====================================================================
   2a. THE NARROW WINDOW (901-1119, 02-d-narrow): the counter band runs
   the window's width under the head (the column's gutter is 24 here),
   the basket bar is D0's foot bar.
   ==================================================================== */
@media (min-width: 901px) and (max-width: 1119px) {
    .vm-cat-bar {
        margin: 20px -24px 0;
        padding: 10px 16px 10px 24px;
    }
    .vm-cat-bar-name { font-size: 15px; }
    .vm-cat-bar-sub { font-size: 12px; }
    .vm-cat-bar-btn { padding: 0 18px; }
    .vm-cat-basket.vm-dt-foot-bar { padding-top: 12px; padding-bottom: 14px; }
}

/* ====================================================================
   2b. THE SIDE CARD (>=1120) — main | the 340 column, the card sticky
   under the header and level with the title: the counter (D0's side
   head: its cover, its name, "Prices and stock at this counter",
   Change), the basket's lines read-only (D0's lines, four at most),
   then the total at 22 ("so far"), the count line and View basket.
   catalogue.js moves the two bars in and writes the lines.
   ==================================================================== */
@media (min-width: 1120px) {
    .vm-app.vm-cat-page {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        column-gap: 48px;
        align-content: start;
        align-items: start;
    }
    .vm-app.vm-cat-page > * { grid-column: 1; }
    .vm-app.vm-cat-page > .vm-cat-side {
        grid-column: 2;
        grid-row: span 2;
        position: sticky;
        top: 88px;
        margin-top: 68px;
    }
    /* The bar is in the card: its body no longer reserves for a foot bar. */
    .vm-app--task.has-basket-bar .vm-cat-body { padding-bottom: 0; }

    .vm-cat-side .vm-cat-bar {
        margin: 0;
        padding: 14px;
        justify-content: flex-start;
    }
    /* The bar's cover is D0's .vm-dt-side-cover here (catalogue.js adds
       it with the card's other hooks); 901-1119 it is not drawn. */
    .vm-cat-side .vm-cat-bar-cover { display: block; }
    .vm-cat-side .vm-cat-bar-btn {
        height: 44px;
        padding: 0 16px;
        flex-shrink: 0;
    }
    .vm-cat-side-lines { border-bottom: 0; }
    /* 04's blue line on a prescription box (pharmacy side only). */
    .vm-cat-side-presc {
        display: flex;
        align-items: center;
        gap: 6px;
        font-weight: 700;
        color: #1b6fa8;
    }
    .vm-cat-side-presc i { font-size: 11px; }
    .vm-cat-side .vm-dt-line-thumb i { font-size: 17px; }

    .vm-cat-side .vm-cat-basket.vm-dt-foot-bar {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        width: auto;
        max-width: none;
        padding: 16px 18px 18px;
        transform: none;
        border-top: 1px solid #eef1f5;
        box-shadow: none;
        z-index: auto;
    }
    .vm-cat-side .vm-cat-basket-total { gap: 5px; }
    .vm-cat-side .vm-cat-basket-sub { margin-top: 3px; line-height: 1.4; }
    .vm-cat-side .vm-cat-basket-btn { justify-content: center; }
}

/* ====================================================================
   ONE SEARCH ON SCREEN (>=1240): the header's compact search is the
   page's search (same target, q and back=), so the page field hides.
   ==================================================================== */
@media (min-width: 1240px) {
    .vm-cat-search { display: none; }
}