/* =============================================================================================
   UsedMobility lab — the one stylesheet (design v12, design/UsedMobility-handoff.txt), restyled to
   Jonathan's approved "Soft" hybrid style (design/Soft-style-update.md; notes in
   docs/NOTES-soft-global.md).

   Sections:
     1. Tokens (custom properties)            6. Product card (.tile) and grade badge
     2. Base elements                          7. Forms (.inp .lbl .hint .ropt .chk .chip, errors)
     3. Layout (.wrap .pad .sec .page .g3…)    8. Page furniture (type scale, cards/panels, call band)
     4. Buttons (.b-p .b-o .lnk .tab …)        9. Utilities
     5. Global chrome (utility bar, header,   10. Breakpoints (1060px, 640px)
        category bar, footer)

   Class names from the design are kept verbatim (.b-p .b-o .tile .tt .ropt .inp .blueprint
   .corner .pad .sec .g3 .g4 .g5 .cat .hide-md .side .buy .r3 .g2m .g5m …) — the Soft style restyles
   them, it never renames them. Soft style in one line: Plus Jakarta Sans for display type (800,
   -0.02em, never uppercase headings), Barlow 18px body, rounded corners from the --r-* tokens,
   1.5px #e2e9f5 card borders, soft hover shadows, pill-shaped search / category links / tags, no "+"
   corner marks, sections separated by alternating white / pale backgrounds instead of rules.
   Builders: add page blocks at the end under a  / * <app> * /  comment, using the tokens.
   ============================================================================================= */

/* 0. Fonts (audit B35) ------------------------------------------------------------------------
   Self-hosted, so no page asks Google for anything (the cookie and privacy pages promise no third
   party loads anything into the browser). Files in static/fonts/ (SIL Open Font License 1.1, the
   licence texts sit beside them), from Fontsource 5.3.0 — the same files Google Fonts serves. Latin
   and latin-ext subsets: the browser downloads latin-ext only for a character that needs it. Barlow is
   the four static weights the Google link used to ask for (400 500 600 700); Plus Jakarta Sans is the
   one variable file (weights 200-800), which covers the 600 / 700 / 800 the pages use. base.html
   preloads the two files every page needs first (Barlow 400 and Jakarta, latin). */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-latin-400-normal.81419bf5abb5.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/barlow-latin-ext-400-normal.30fe91f5bb42.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-latin-500-normal.8e986e86d57e.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/barlow-latin-ext-500-normal.eaf61d05880b.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-latin-600-normal.a1e2a2d7d4c0.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/barlow-latin-ext-600-normal.7befe7b24353.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-latin-700-normal.15481e4eab6d.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/barlow-latin-ext-700-normal.9b01ea2f83b1.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.7660bd9909fb.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-ext-wght-normal.341687eeeb6a.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* 1. Tokens ---------------------------------------------------------------------------------- */
:root {
  /* colour (palette unchanged by the Soft style) */
  --um-navy-900: #0f1c44;   /* footer, headings */
  --um-navy-800: #16265c;   /* category bar, bands, grade pill */
  --um-primary: #1f3f93;
  --um-link: #2a5fd0;       /* hover, links, focus */
  --um-accent: #7fb0ff;     /* light accent, placeholder dashes, card hover border */
  --um-tint-1: #dce8fc;     /* outline-button hover */
  --um-tint-2: #e6eefb;
  --um-tint-3: #eef3fc;     /* option hover / checked, grade-strip cells */
  --um-tint-4: #f3f6fc;     /* pale section ground, search pill ground */
  --um-line: #cfd9ec;       /* table rows, internal dividers, control borders (tabs, chips) */
  --um-rule: #e2e9f5;       /* card / panel borders (Soft), inner rules, photo placeholders */
  --um-outline: #bcd2f6;    /* Soft: outline-button border, search pill border */
  --um-input: #9aa8c8;      /* footer legal text on navy (no longer the input borders: --um-field) */
  /* Form control borders (gap 65, 16 Oct 2026): #9aa8c8 was 2.4:1 on white, below the 3:1 a control's
     outline needs. #6f7da0 is 4.1:1 on white and 3.8:1 on the pale ground (--um-tint-4). */
  --um-field: #6f7da0;
  --um-text: #111b3b;
  --um-text-2: #3a4668;
  --um-muted: #586489;
  --um-on-navy: #c4d2ee;
  --um-on-navy-line: rgba(255, 255, 255, .14);
  --um-on-navy-outline: rgba(255, 255, 255, .5);
  --um-white: #ffffff;
  --um-amber: #f6b32c;      /* Refurbished tag, with --um-text */
  /* No red in the palette: errors use the primary blue, bold, with a bar (design note). */
  --um-error: var(--um-primary);

  /* type — display face is Plus Jakarta Sans (600/700/800 loaded), body is Barlow 18px / 1.5 */
  --um-font-head: "Plus Jakarta Sans", system-ui, sans-serif;
  --um-font-body: "Barlow", system-ui, sans-serif;
  --um-body-size: 18px;
  --um-head-weight: 800;
  --um-head-tracking: -0.02em;
  /* the Soft type scale (Jakarta is wider than the old Barlow Condensed, so everything dropped a size) */
  --um-h1: clamp(32px, 3.8vw, 48px);      /* hero / page H1, line-height 1.08 */
  --um-h1-hero: var(--um-h1);             /* legacy names: the three v12 H1 sizes are now one */
  --um-h1-xl: var(--um-h1);
  --um-h1-lh: 1.08;
  --um-h2: clamp(28px, 3.2vw, 38px);      /* section H2, line-height 1.12 */
  --um-h2-lh: 1.12;
  --um-h2-panel: 28px;                    /* card / panel H2 (part-exchange card, finder question), lh 1.12 */
  --um-tile-title: 20px;                  /* use-tile / advice-card title, 700, lh 1.2 */
  --um-card-title: 18px;                  /* product-card title, 700, lh 1.25 */
  --um-price-card: 28px;                  /* card price, 800 */
  --um-price-xl: 44px;                    /* product-page price, 800 */
  --um-price-total: 34px;                 /* basket / checkout total, 800 */
  --um-grade-sm: 26px;                    /* grade letter in the small grade strip, 800 */
  --um-kicker-size: 13px;                 /* kicker: 13px, 700, uppercase, .1em */
  --um-kicker-spacing: .1em;

  /* radius (Soft) */
  --r-sm: 10px;       /* inputs, selects, textareas, finance strips, small notes, thumbnails */
  --r-md: 12px;       /* buttons, grade-block square, line-item photos */
  --r-opt: 14px;      /* option cards (.ropt .qopt), brand buttons, grade strip, sub-nav, checklist items */
  --r-slot: 16px;     /* dashed placeholders, map / photo placeholders */
  --r-lg: 18px;       /* cards and tiles */
  --r-panel: 20px;    /* big framed boxes the spec gives 20px (filter panel, PX / grading cards, main photo, grade rows) */
  --r-xl: 22px;       /* emphasised panels, hero photo */
  --r-pill: 100px;    /* pills, tags, the search bar, category links, chips, tabs, step pills */
  --um-radius: var(--r-md);   /* legacy token (was 0) */

  /* borders and shadows (Soft) */
  --um-card-border: 1.5px solid var(--um-rule);
  --um-em-border: 2px solid var(--um-primary);
  --um-shadow-hover: 0 8px 24px rgba(22, 38, 92, .10);
  --um-shadow-em: 0 12px 32px rgba(22, 38, 92, .10);

  /* space and layout */
  --um-max: 1320px;
  --um-gutter: 28px;
  --um-gutter-sm: 18px;
  --um-sec-y: 64px;
  --um-sec-y-sm: 44px;
  --um-gap-1: 18px;
  --um-gap-2: 28px;
  --um-gap-3: 36px;
  --um-gap-4: 40px;
  --um-focus: 2px solid var(--um-link);
}

/* 2. Base ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--um-white);
  color: var(--um-text);
  font-family: var(--um-font-body);
  font-size: var(--um-body-size);
  line-height: 1.5;
}
h1, h2, h3 {
  font-family: var(--um-font-head); font-weight: var(--um-head-weight); letter-spacing: var(--um-head-tracking);
  margin: 0; text-wrap: balance;
}
p { text-wrap: pretty; }
a { color: var(--um-primary); text-underline-offset: 3px; }
a:hover { color: var(--um-link); }
:focus-visible { outline: var(--um-focus); outline-offset: 2px; }
/* Audit A18: on the navy grounds the blue ring was 2.5:1 (category bar) and 2.9:1 (footer), under the
   3:1 a focus indicator needs. White on navy is over 13:1. */
.catbar :focus-visible, .site-footer :focus-visible, .call-band :focus-visible, .phone-box :focus-visible,
.sf-navy-band :focus-visible, .enq-phone :focus-visible { outline-color: var(--um-white); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
select, textarea { border-radius: var(--r-sm); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }

/* 3. Layout ---------------------------------------------------------------------------------- */
.wrap { max-width: var(--um-max); margin: 0 auto; padding-left: var(--um-gutter); padding-right: var(--um-gutter); }
.page { max-width: var(--um-max); margin: 0 auto; padding: 32px var(--um-gutter) 72px; }   /* most <main>s */
.page--product { padding-top: 24px; }
.sec-pad { padding-top: var(--um-sec-y); padding-bottom: var(--um-sec-y); }
/* Sections are separated by alternating backgrounds, never by 1px rules (Soft). Put these on the
   full-bleed <section>; .band-tint is the pale one under its v12 name. */
.sec--pale, .band-tint { background: var(--um-tint-4); }
.sec--white { background: var(--um-white); }
.band-rule { border-top: 0; }   /* v12 top rule between sections: removed (Soft). Use .sec--pale / .sec--white. */
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--um-gap-1); }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--um-gap-1); }
.g5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--um-gap-1); }
/* No column gap: cells spaced by their own padding (Home's USP strip is `class="pad g5"` with no gap). */
.g3--flush, .g4--flush, .g5--flush { gap: 0; }
.side { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--um-gap-3); align-items: start; }
.side--75 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--um-gap-4); }
/* .buy.blueprint too: .blueprint (position: relative, later in this file) must never un-stick the
   buy box / summary panels, which the design marks class="buy blueprint". Static below 1060px. */
.buy, .buy.blueprint { position: sticky; top: 20px; }
.g2m { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.r3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--um-gap-2); }

/* 4. Buttons ----------------------------------------------------------------------------------- */
.b-p, .b-o {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 26px;
  font: 700 17px var(--um-font-body);
  text-decoration: none; cursor: pointer; border-radius: var(--r-md); white-space: nowrap;
}
.b-p { background: var(--um-primary); color: var(--um-white); border: 1px solid var(--um-primary); }
.b-p:hover { background: var(--um-link); border-color: var(--um-link); color: var(--um-white); }
.b-o { background: var(--um-white); color: var(--um-navy-800); border: 1.5px solid var(--um-outline); }
.b-o:hover { background: var(--um-tint-1); color: var(--um-text); }
.b-p[disabled], .b-o[disabled] { opacity: .55; cursor: not-allowed; }
.b-block { width: 100%; }
.b-sm { min-height: 52px; padding: 0 16px; font-size: 16px; }
/* On navy: white-fill primary, white (translucent) outline — same 12px radius */
.on-navy .b-p, .b-p.on-navy { background: var(--um-white); color: var(--um-navy-900); border-color: var(--um-white); }
.on-navy .b-p:hover, .b-p.on-navy:hover { background: var(--um-tint-1); color: var(--um-navy-900); }
.on-navy .b-o, .b-o.on-navy { background: transparent; color: var(--um-white); border-color: var(--um-on-navy-outline); }
.on-navy .b-o:hover, .b-o.on-navy:hover { background: rgba(255, 255, 255, .08); color: var(--um-white); }
.lnk {
  background: none; border: 0; padding: 0; min-height: 44px;
  font: 600 16px var(--um-font-body); color: var(--um-primary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.tab {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px;
  border: 1.5px solid var(--um-line); background: var(--um-white);
  font: 600 16px var(--um-font-body); color: var(--um-text); cursor: pointer; border-radius: var(--r-pill); white-space: nowrap;
  text-decoration: none;
}
.tab:hover { border-color: var(--um-primary); color: var(--um-text); }
.tab[aria-pressed="true"], .tab[aria-current="page"] { background: var(--um-navy-800); color: var(--um-white); border-color: var(--um-navy-800); }
/* Finder options */
.qopt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 60px; padding: 12px 18px; border: 1.5px solid var(--um-rule); background: var(--um-white);
  font: 600 18px var(--um-font-body); color: var(--um-text); cursor: pointer; text-align: left; border-radius: var(--r-opt);
  text-decoration: none;
}
.qopt:hover { border-color: var(--um-primary); background: var(--um-tint-3); color: var(--um-text); }
.sel2 {
  min-height: 48px; padding: 0 12px; border: 1px solid var(--um-field); background: var(--um-white);
  font: 600 16px var(--um-font-body); color: var(--um-text); border-radius: var(--r-sm);
}
.thumb {
  aspect-ratio: 1 / 1; border: 1.5px solid var(--um-rule); background: var(--um-rule);
  font: 600 13px var(--um-font-body); color: var(--um-muted); cursor: pointer; border-radius: var(--r-sm); padding: 0;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-current="true"] { border: 2px solid var(--um-primary); color: var(--um-primary); background: var(--um-tint-1); }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
/* Gallery arrows (CR4, Jonathan 2026-09-27): previous / next over a machine's main photo on the product
   page and the trade machine page (partials/gallery_arrows.html; the photo box, .sf-gallery__main /
   .tr-gallery, is position: relative). A round white disc at 90% with a navy chevron, a 48px tap target,
   vertically centred on each edge; shown on hover or focus where there is a mouse, always on touch. */
.gallery-arrow {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1.5px solid var(--um-rule); border-radius: var(--r-pill); box-shadow: var(--um-shadow-hover);
  background: var(--um-white); background: color-mix(in srgb, var(--um-white) 90%, transparent);
  color: var(--um-navy-800); text-decoration: none;
  transition: opacity .15s, background-color .15s, border-color .15s;
}
.gallery-arrow--prev { left: 12px; }
.gallery-arrow--next { right: 12px; }
.gallery-arrow:hover { background: var(--um-white); border-color: var(--um-accent); color: var(--um-primary); }
/* Keyboard focus: the global ring (2px --um-link, offset 2px) is kept, but its 2px offset gap is filled
   with white so the ring always sits on white, never on the photo — over a blue or navy machine it was
   barely visible (review CR4-R2). The disc turns solid white with a primary border too. */
.gallery-arrow:focus-visible { background: var(--um-white); border-color: var(--um-primary); box-shadow: 0 0 0 2px var(--um-white), var(--um-shadow-hover); }
.gallery-arrow svg { display: block; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .gallery-arrow { opacity: 0; }
  :hover > .gallery-arrow, :focus-within > .gallery-arrow { opacity: 1; }
}
@media (any-pointer: coarse) {
  .gallery-arrow { opacity: 1; }   /* a touch screen (a laptop's too) has no hover to reveal them */
}
/* Product sub-nav strip: a rounded strip, no top rule (Soft) */
.subnav { display: flex; overflow-x: auto; border: var(--um-card-border); border-radius: var(--r-opt); background: var(--um-white); padding: 0 6px; }
.subnav a {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px;
  text-decoration: none; font-weight: 600; color: var(--um-text); white-space: nowrap;
}
.subnav a:hover { color: var(--um-primary); text-decoration: underline; }

/* 5. Global chrome -------------------------------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--um-white); padding: 10px 16px; }
.skip-link:focus { left: 8px; top: 8px; }

.utilbar { background: var(--um-tint-3); border-bottom: 1px solid var(--um-line); font-size: 15px; }
.utilbar__inner {
  max-width: var(--um-max); margin: 0 auto; padding: 6px var(--um-gutter);
  display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.utilbar__strap { color: var(--um-text-2); }
.utilbar__phone { font-weight: 700; text-decoration: none; white-space: nowrap; }
/* A21: "Track order" for phones and tablets, where the header's button is hidden (.hide-md) */
.utilbar__track { font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; min-height: 32px; }
.show-md { display: none !important; }

/* Integration placeholders (dashed): 1.5px dashed accent, radius 16px; the inline one (utility-bar
   reviews slot) is a pill. */
.slot { border: 1.5px dashed var(--um-accent); border-radius: var(--r-slot); color: var(--um-primary); font-weight: 600; }
.slot--inline { display: inline-flex; align-items: center; padding: 2px 12px; border-radius: var(--r-pill); }
.slot--band { flex: 1 1 520px; padding: 22px; text-align: center; color: var(--um-on-navy); font-weight: 400; font-size: 16px; }
.slot--panel { background: var(--um-tint-3); padding: 28px; text-align: center; color: var(--um-navy-800); font-weight: 400; }

.site-header { background: var(--um-white); }
.site-header__inner {
  max-width: var(--um-max); margin: 0 auto; padding: 16px var(--um-gutter);
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; gap: 11px; min-height: 48px; text-decoration: none; }
.logo__word { font-family: var(--um-font-head); font-weight: 700; font-size: 29px; color: var(--um-navy-800); }   /* as the Home12 Soft reference */
/* Search: a pill with a pill submit button inside it */
.srch {
  flex: 1 1 360px; min-width: 0; display: flex; align-items: center; gap: 6px; min-height: 54px;
  border: 1.5px solid var(--um-outline); border-radius: var(--r-pill); background: var(--um-tint-4);
  padding: 4px 4px 4px 8px;
}
.srch input {
  flex: 1; min-width: 0; min-height: 44px; border: 0; padding: 0 16px; border-radius: var(--r-pill);
  font: 500 17px var(--um-font-body); color: var(--um-text); background: transparent; outline-offset: -2px;
}
.srch .b-p { min-height: 44px; padding: 0 22px; border-radius: var(--r-pill); }
.header-actions { display: flex; gap: 10px; margin-left: auto; }   /* on the right gutter even when the search pill wraps below (phone) */

/* Category bar (navy): links are pills */
.catbar { background: var(--um-navy-800); }
.catbar__inner { max-width: var(--um-max); margin: 0 auto; padding: 0 var(--um-gutter); display: flex; }
.cat {
  color: var(--um-white); text-decoration: none; font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; min-height: 40px; margin: 8px 0; padding: 0 16px;
  border-radius: var(--r-pill); white-space: nowrap;
}
.cat:hover, .cat[aria-current="page"] { background: var(--um-primary); color: var(--um-white); }

.flash-list { max-width: var(--um-max); margin: 0 auto; padding: 16px var(--um-gutter) 0; list-style: none; display: grid; gap: 8px; }
.flash { border: 1px solid var(--um-primary); border-left-width: 4px; border-radius: var(--r-sm); background: var(--um-tint-3); padding: 12px 16px; font-weight: 600; }

/* Footer: unchanged (navy, square) apart from the display face */
.site-footer { background: var(--um-navy-900); color: var(--um-on-navy); }
.site-footer__cols {
  max-width: var(--um-max); margin: 0 auto; padding: 52px var(--um-gutter) 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 32px;
}
.site-footer__brand { font-family: var(--um-font-head); font-weight: 700; font-size: 28px; color: var(--um-white); margin: 0 0 10px; }
.site-footer__phone { font-family: var(--um-font-head); font-weight: 700; font-size: 28px; color: var(--um-accent); text-decoration: none; }
.site-footer__phone:hover { color: var(--um-white); }
.site-footer__head {
  font-family: var(--um-font-head); font-weight: 600; letter-spacing: var(--um-kicker-spacing); text-transform: uppercase;
  color: var(--um-white); margin: 0 0 6px; font-size: 15px;
}
.fl { font-size: 16px; display: flex; flex-direction: column; }
.fl a { color: var(--um-on-navy); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.fl a:hover { color: var(--um-white); text-decoration: underline; }
.site-footer__legal { max-width: var(--um-max); margin: 0 auto; padding: 20px var(--um-gutter) 36px; border-top: 1px solid var(--um-on-navy-line); }
.site-footer__legal p { margin: 0 0 6px; font-size: 14px; color: var(--um-input); max-width: 110ch; }
.site-footer__legal a { color: var(--um-input); }
.site-footer__legal a:hover { color: var(--um-white); }

/* 6. Product card and grade ------------------------------------------------------------------ */
.tile {
  text-decoration: none; color: var(--um-text); display: flex; flex-direction: column;
  border: var(--um-card-border); border-radius: var(--r-lg); background: var(--um-white); overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.tile:hover { border-color: var(--um-accent); box-shadow: var(--um-shadow-hover); color: var(--um-text); }
.tile:hover .tt { text-decoration: underline; }
/* The "ring me" / "tell us what you want" tile: radius 18px, dashed in the accent like every other
   dashed placeholder (#e2e9f5 dashes vanished on white: visual QA PBC-05) */
.tile--dashed { border-style: dashed; border-color: var(--um-accent); padding: 24px; justify-content: center; gap: 10px; background: var(--um-tint-4); }
.tile--dashed:hover { border-color: var(--um-accent); }
/* CR1: machine photos are square (1:1) everywhere */
.tile__photo {
  position: relative; aspect-ratio: 1 / 1; background: var(--um-rule);
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--um-muted);
  border-bottom: 1px solid var(--um-line); overflow: hidden;
}
.tile__photo img { width: 100%; height: 100%; object-fit: cover; }
.tile__photo--square { aspect-ratio: 1 / 1; }   /* legacy: every .tile__photo is square now (CR1) */
/* Tags on a photo: floating pills (Soft) */
.grade-tab, .state-tab {
  position: absolute; top: 12px; z-index: 1;
  background: var(--um-navy-800); color: var(--um-white); border-radius: var(--r-pill);
  padding: 4px 12px; font: 800 13px/1.4 var(--um-font-body);
}
.grade-tab { left: 12px; }
.state-tab { right: 12px; letter-spacing: .02em; }
.state-tab--buying { background: var(--um-amber); color: var(--um-text); }  /* a live checkout hold (1 Oct 2026) */
.refurb-tag {
  display: inline-block; background: var(--um-amber); color: var(--um-text); border-radius: var(--r-pill);
  padding: 4px 12px; font: 800 13px/1.4 var(--um-font-body);
}
.tile__photo > .refurb-tag { position: absolute; left: 12px; bottom: 12px; z-index: 1; }
.tile__body { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.tt { font-family: var(--um-font-head); font-weight: 700; font-size: var(--um-card-title); line-height: 1.25; margin: 0 0 4px; }
.tile__meta { margin: 0 0 12px; font-size: 15px; color: var(--um-muted); }
.tile__meta--last { margin-bottom: 16px; }   /* no spec line after it (Refurbished, Model cards) */
.tile__meta--ref { margin: 0 0 16px; color: var(--um-text-2); }   /* the catalogue card's one-line spec */
.tile__spec { margin: 0 0 16px; padding: 0; list-style: none; font-size: 15px; color: var(--um-text-2); display: grid; gap: 2px; }
/* The spec line is a figure or two (catalogue/specs.py range_label); a long value never runs past
   two lines, so cards in a row keep the same shape (visual QA HC-02). */
.tile__meta--ref, .tile__spec li { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile__foot { margin-top: auto; }
/* Prices (Jakarta 800) */
.price-card { font-family: var(--um-font-head); font-weight: 800; font-size: var(--um-price-card); letter-spacing: var(--um-head-tracking); line-height: 1; margin: 0; }
.price-xl { font-family: var(--um-font-head); font-weight: 800; font-size: var(--um-price-xl); letter-spacing: var(--um-head-tracking); line-height: 1; margin: 0; color: var(--um-navy-900); }
.price-sum, .price-total { font-family: var(--um-font-head); font-weight: 800; font-size: var(--um-price-total); letter-spacing: var(--um-head-tracking); line-height: 1; color: var(--um-navy-900); }
.exvat { font: 500 15px var(--um-font-body); letter-spacing: 0; color: var(--um-muted); }
.price-xl .exvat { font-size: 17px; }
.incvat { margin: 4px 0 0; font-size: 15px; color: var(--um-muted); }
.finance-strip { margin: 10px 0 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--um-tint-3); font-size: 15px; color: var(--um-navy-800); font-weight: 600; }
.finance-strip span { font-weight: 400; color: var(--um-muted); }

/* Buy-box grade block: the letter square is rounded (12px) */
.grade-block {
  display: flex; gap: 14px; align-items: stretch; padding: 14px 0; margin: 0 0 18px;
  border-top: 1px solid var(--um-rule); border-bottom: 1px solid var(--um-rule);
}
.grade-block__letter {
  flex: none; width: 60px; min-height: 60px; display: flex; align-items: center; justify-content: center;
  background: var(--um-primary); color: var(--um-white); border-radius: var(--r-md);
  font-family: var(--um-font-head); font-weight: 800; font-size: 30px; letter-spacing: var(--um-head-tracking);
}
.grade-block__words { align-self: center; }
.grade-block__words p { margin: 0; font-weight: 600; }
/* Small grade strip (home grading card): gap-separated tinted cells in a rounded strip */
.grade-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; border-radius: var(--r-opt); overflow: hidden; }
.grade-strip > div { padding: 12px 8px; background: var(--um-tint-3); text-align: center; }
.grade-strip__code { font-family: var(--um-font-head); font-weight: 800; font-size: var(--um-grade-sm); letter-spacing: var(--um-head-tracking); line-height: 1; margin: 0 0 4px; color: var(--um-primary); }
.grade-strip__label { margin: 0; font-size: 13px; line-height: 1.25; color: var(--um-text-2); }
/* Grade pill (anywhere a grade is shown as a tag): solid navy, white text */
.grade-pill { display: inline-flex; align-items: center; background: var(--um-navy-800); color: var(--um-white); border-radius: var(--r-pill); padding: 4px 12px; font: 800 13px/1.4 var(--um-font-body); }

/* 7. Forms -------------------------------------------------------------------------------------- */
.inp {
  width: 100%; min-height: 54px; padding: 0 14px; border: 1px solid var(--um-field); background: var(--um-white);
  font: 500 18px var(--um-font-body); color: var(--um-text); border-radius: var(--r-sm);
}
textarea.inp { min-height: 110px; padding: 12px 14px; resize: vertical; }
textarea.inp.inp--tall { min-height: 120px; }   /* Contact message box (the Contact design's 120px) */
.upper { text-transform: uppercase; }            /* postcodes, order numbers (still normalised server-side) */
.inp:focus { border-color: var(--um-primary); }
input[type="file"].inp { padding: 12px 14px; }
/* The browser's own "Choose files" button, drawn as the Soft outline button (visual QA FTS-06) */
.inp[type="file"]::file-selector-button {
  font: 700 16px var(--um-font-body); color: var(--um-navy-800); background: var(--um-white);
  border: 1.5px solid var(--um-outline); border-radius: var(--r-md); padding: 6px 14px; margin-right: 12px; cursor: pointer;
}
.inp[type="file"]::file-selector-button:hover { background: var(--um-tint-1); color: var(--um-text); }
.lbl { display: block; font-weight: 700; margin-bottom: 6px; }
.hint { display: block; font-size: 15px; color: var(--um-muted); margin: 6px 0 0; font-weight: 400; }   /* BELOW the input */
.legend-lg { font-family: var(--um-font-head); font-size: var(--um-h2-panel); line-height: var(--um-h2-lh); font-weight: var(--um-head-weight); letter-spacing: var(--um-head-tracking); color: var(--um-navy-900); padding: 0; margin-bottom: 14px; }
.form-stack { display: grid; gap: 36px; }
.ropt { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1.5px solid var(--um-rule); border-radius: var(--r-opt); background: var(--um-white); cursor: pointer; }
.ropt:has(input:checked) { border-color: var(--um-primary); background: var(--um-tint-3); }
.ropt input { width: 20px; height: 20px; accent-color: var(--um-primary); margin: 3px 0 0; flex: none; }
.ropt__body { flex: 1; }
.ropt__row { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; }
.ropt__sub { display: block; font-size: 15px; color: var(--um-muted); }
.chk { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-size: 17px; }
.chk input { width: 20px; height: 20px; accent-color: var(--um-primary); margin: 0; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1.5px solid var(--um-line); border-radius: var(--r-pill); background: var(--um-white); cursor: pointer; font-weight: 600; }
.chip:has(input:checked) { border-color: var(--um-primary); background: var(--um-tint-1); }
.chip input { width: 18px; height: 18px; accent-color: var(--um-primary); margin: 0; }
/* Error state: a heavier primary border and a bold message under the field (no red: design note). */
.field--error .inp, .inp[aria-invalid="true"] { border: 2px solid var(--um-error); }
.field--error .ropt { border-color: var(--um-error); }
.err { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0; font-size: 15px; font-weight: 700; color: var(--um-error); }
.err::before { content: "!"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--um-error); color: var(--um-white); font-size: 13px; }
.form-errors { border: 2px solid var(--um-error); border-left-width: 6px; border-radius: var(--r-sm); background: var(--um-tint-3); padding: 14px 18px; margin: 0 0 24px; }
.form-errors p { margin: 0; font-weight: 700; color: var(--um-error); }
.form-errors ul { margin: 6px 0 0; padding-left: 20px; }

/* 8. Page furniture ---------------------------------------------------------------------------- */
/* Type scale as classes (use these instead of inline sizes). All Jakarta; headings 800, -0.02em,
   never uppercase. They work on any element, not only h1–h3. */
.kicker { font-family: var(--um-font-head); font-size: var(--um-kicker-size); font-weight: 700; letter-spacing: var(--um-kicker-spacing); text-transform: uppercase; color: var(--um-primary); margin: 0 0 8px; }
.kicker--muted { color: var(--um-muted); }
.kicker--sm { font-size: 15px; letter-spacing: var(--um-kicker-spacing); }   /* the in-card kicker (use tiles, advice cards): 15px in the Home12 Soft reference */
.h1, .h1-hero, .h1-xl, .h2, .h2-sec, .h2-panel, .h3-tile, .f-head {
  font-family: var(--um-font-head); font-weight: var(--um-head-weight); letter-spacing: var(--um-head-tracking);
}
.h1 { font-size: var(--um-h1); line-height: var(--um-h1-lh); color: var(--um-navy-900); }        /* hero / page H1 */
.h1-hero { font-size: var(--um-h1-hero); line-height: var(--um-h1-lh); color: var(--um-navy-900); }
.h1-xl { font-size: var(--um-h1-xl); line-height: var(--um-h1-lh); color: var(--um-navy-900); }
.h2 { font-size: var(--um-h2); line-height: var(--um-h2-lh); color: var(--um-navy-900); }        /* section H2 */
.h2-sec { font-size: var(--um-h2); line-height: var(--um-h2-lh); color: var(--um-navy-900); }
.h2-panel { font-size: var(--um-h2-panel); line-height: var(--um-h2-lh); color: var(--um-navy-900); }   /* card / panel H2 */
.h3-tile { font-size: var(--um-tile-title); line-height: 1.2; font-weight: 700; color: var(--um-navy-900); }   /* use-tile / advice-card title */
/* .f-head (in the list above) is just the display face, weight and tracking — for big numbers and
   other display text; set its size and colour yourself. */
.lede { margin: 0 0 32px; color: var(--um-text-2); max-width: 66ch; }
.muted { color: var(--um-muted); }
.text-2 { color: var(--um-text-2); }

.bc { font-size: 15px; color: var(--um-muted); margin-bottom: 14px; display: flex; gap: 8px; flex-wrap: wrap; }

/* Cards and panels (Soft). .frame is the v12 framed box, now a soft card; .card is the same with a
   name that reads better in new markup. Add .card--media when an image sits at the top (clips it to
   the radius) and .card--hover for a card that is a link. */
.frame, .card { border: var(--um-card-border); border-radius: var(--r-lg); background: var(--um-white); }
.frame--primary { border-color: var(--um-primary); }
.card--media { overflow: hidden; }
.card--hover { transition: border-color .15s, box-shadow .15s; }
.card--hover:hover { border-color: var(--um-accent); box-shadow: var(--um-shadow-hover); }
/* Emphasised panel: finder, basket / checkout summary, product buy box. The design's class="buy
   blueprint" panels get it too, until the per-app pass swaps `blueprint` for `panel-em`. */
.panel-em, .buy.blueprint { border: var(--um-em-border); border-radius: var(--r-xl); box-shadow: var(--um-shadow-em); background: var(--um-white); }

/* The "+" corner marks are gone (Soft). .blueprint only keeps position: relative; any leftover
   <i class="corner …"> renders nothing (partials/blueprint.html now outputs nothing). */
.blueprint { position: relative; }
.blueprint > .corner, .corner { display: none; }

.call-band { background: var(--um-navy-800); color: var(--um-white); }   /* full-bleed and square: a page section, not a card */
.call-band__inner {
  max-width: var(--um-max); margin: 0 auto; padding: 40px var(--um-gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.call-band--inline { margin-top: 36px; padding: 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-radius: var(--r-panel); }
.call-band__title { font-family: var(--um-font-head); font-weight: var(--um-head-weight); letter-spacing: var(--um-head-tracking); font-size: 30px; line-height: var(--um-h2-lh); margin: 0 0 4px; }
.call-band--inline .call-band__title { font-size: var(--um-h2-panel); }
.call-band__body { margin: 0; color: var(--um-on-navy); }
.call-band__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.phone-box { background: var(--um-navy-800); color: var(--um-white); padding: 22px; border-radius: var(--r-lg); }
.phone-box p { margin: 0 0 6px; color: var(--um-on-navy); font-size: 16px; }
.phone-box a { font-family: var(--um-font-head); font-weight: 800; font-size: 28px; letter-spacing: var(--um-head-tracking); color: var(--um-white); text-decoration: none; }

.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; }
.steps__n { font-family: var(--um-font-head); font-weight: 800; font-size: 24px; line-height: 1; color: var(--um-link); }   /* #2a5fd0: 5.9:1 on the white card (the v12 accent was 2.2:1, visual QA FTS-09) */
.steps__t { font-size: 16px; color: var(--um-text-2); }
/* Step pills (checkout "1 · Basket ✓  2 · Your details  3 · Confirmation") */
.step-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 4px 14px; border-radius: var(--r-pill); font-size: 15px; font-weight: 600; }
.step-pill--done { background: var(--um-tint-1); color: var(--um-navy-900); }
.step-pill--now { background: var(--um-navy-800); color: var(--um-white); }
.step-pill--todo { border: 1.5px solid var(--um-line); color: var(--um-muted); }
/* Generic pill tag (badges such as New / Tested used). --navy is the grade pill, --amber the
   Refurbished tag. */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--r-pill); font: 800 13px/1.4 var(--um-font-body); background: var(--um-tint-1); color: var(--um-navy-900); white-space: nowrap; }
.pill--navy { background: var(--um-navy-800); color: var(--um-white); }
.pill--amber { background: var(--um-amber); color: var(--um-text); }
.pill--outline { background: var(--um-white); border: 1.5px solid var(--um-line); color: var(--um-text); }

.success { border: 1.5px solid var(--um-primary); border-radius: var(--r-lg); background: var(--um-white); padding: 40px; max-width: 760px; }
.photo-ph { background: var(--um-rule); border: 1.5px solid var(--um-rule); border-radius: var(--r-slot); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--um-muted); overflow: hidden; }

.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 64px; font-family: var(--um-font-head); font-weight: 700; font-size: var(--um-tile-title); line-height: 1.2; color: var(--um-navy-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 30px; color: var(--um-primary); }
.faq[open] summary::after { content: "–"; }
.prow { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--um-line); }   /* parts rows stay rows */
.prow > img, .prow > .photo-ph { border-radius: var(--r-sm); }   /* parts-row photos: radius 10px (Soft) */

/* Spec tables: a rounded soft box (Soft: 1.5px #e2e9f5, radius 14px). A table only takes a radius
   with border-collapse: separate, so the row rules sit on the cells, and the cells get side padding. */
.spec-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: var(--um-card-border); border-radius: var(--r-opt); background: var(--um-white);
}
.spec-table th, .spec-table td { border-top: 1px solid var(--um-rule); }
.spec-table tr:first-child > th, .spec-table tr:first-child > td { border-top: 0; }
.spec-table th { text-align: left; font-weight: 600; padding: 10px 12px 10px 16px; font-size: 16px; vertical-align: top; }
.spec-table td { padding: 10px 16px 10px 0; font-size: 16px; color: var(--um-text-2); text-align: right; vertical-align: top; }

/* Brand grid: gap-separated rounded buttons (Soft), no hairline grid */
.brands { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.brand {
  display: flex; align-items: center; justify-content: center; min-height: 64px; padding: 10px 16px;
  border: var(--um-card-border); border-radius: var(--r-opt); background: var(--um-white);
  text-decoration: none; color: var(--um-text); font: 700 16px var(--um-font-head); text-align: center;
}
.brand:hover { background: var(--um-tint-3); color: var(--um-primary); }

/* 9. Utilities ------------------------------------------------------------------------------ */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.m0 { margin: 0; }
.nowrap { white-space: nowrap; }
.stack-8 { display: grid; gap: 8px; }
.stack-16 { display: grid; gap: 16px; }
.span-all { grid-column: 1 / -1; }
.clip { overflow: hidden; }
.icon { flex: none; stroke: var(--um-primary); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* 10. Breakpoints ------------------------------------------------------------------------------ */
@media (max-width: 1060px) {
  .hide-md { display: none !important; }
  .show-md { display: inline-flex !important; }
  .hero, .split { grid-template-columns: 1fr !important; }
  .g5, .g4 { grid-template-columns: 1fr 1fr !important; }
  .brands { grid-template-columns: repeat(3, 1fr) !important; }
  /* The category pills scroll sideways inside the navy bar; the right edge fades so the bar reads as
     scrollable, and storefront.js brings the current category's pill into view (visual QA HC-04). */
  .catbar__inner {
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent);
  }
  .side, .side--75 { grid-template-columns: 1fr !important; }
  .buy { position: static !important; }
  .r3 { grid-template-columns: 1fr 1fr !important; }
  .site-footer__cols { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .g5, .g4, .g3 { grid-template-columns: 1fr !important; }
  .brands { grid-template-columns: 1fr 1fr !important; }
  .pad, .wrap, .page, .utilbar__inner, .site-header__inner, .catbar__inner, .site-footer__cols,
  .site-footer__legal, .call-band__inner, .flash-list {
    padding-left: var(--um-gutter-sm) !important; padding-right: var(--um-gutter-sm) !important;
  }
  .sec, .sec-pad { padding-top: var(--um-sec-y-sm) !important; padding-bottom: var(--um-sec-y-sm) !important; }
  .srch { order: 3; flex-basis: 100% !important; }
  /* The utility bar wraps on a phone: a slim second row, the phone number on the right (visual QA
     PBC-03 / FTS-05; the 28px gap is for one row) */
  .utilbar__inner { row-gap: 4px; column-gap: 12px; }
  .utilbar__phone { margin-left: auto; }
  /* Jakarta is wider than the old Barlow Condensed: a smaller wordmark and gap keep the logo and the
     Basket button on one row on a phone (search pill below, as v12). */
  .site-header__inner { gap: 16px; }
  .logo__word { font-size: 24px; }
  .r3, .g2m { grid-template-columns: 1fr !important; }
  .g5m { grid-template-columns: 1fr 1fr !important; }
  /* One swipeable row of thumbnails, however many photos (18 on some machines), so the buy box
     follows the main photo closely (visual QA PBC-08) */
  .thumbs {
    grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 72px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
    padding: 4px; margin-left: -4px; margin-right: -4px;
    contain: inline-size;   /* the row's own width never widens the gallery column (it scrolls instead) */
  }
  .thumbs > .thumb { scroll-snap-align: start; }
  .prow { grid-template-columns: 72px 1fr !important; }
  .prow .pa { grid-column: 2; }
  .site-footer__cols { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .card--hover, .gallery-arrow { transition: none; }
}

/* Builders: add page-specific blocks below, each under a comment naming the app, e.g.
   / * storefront: product gallery * /  — keep tokens, never hard-code a new colour. */

/* Coming-soon gate: the staff preview bar (core.coming_soon). */
.cs-preview { background: var(--um-amber); color: var(--um-text); font-weight: 600; font-size: 15px; text-align: center; padding: 8px 16px; }
.cs-preview a { color: var(--um-text); text-decoration: underline; }