/* MNA HUB — assets/styles.css
   ==================================================================
   The whole look of the shop, in one file. No build step, no import,
   no webfont, no network request of any kind: the page must render
   identically with everything but this server unreachable.

   WHERE THIS CAME FROM, AND WHERE IT DELIBERATELY PARTS COMPANY

   The structure is the sibling shop's, because it is the right
   structure for a small retailer somebody has not bought from before:
   a quiet bar of contact facts above everything, a masthead, a nav row
   of its own, a two-column hero, a strip of four plain promises, a
   how-it-works, then the catalogue behind filter pills.

   The FEEL is the ordinary storefront's: a light page, a lot of air,
   the product picture given real room, and a card that reads as a shop
   rather than a row in a spreadsheet.

   What is not borrowed, and must not be, is the arrangement. This shop
   is blue, sells two things, posts to two countries and takes bank
   transfer, and somebody who knows the sibling has to see a different
   shop rather than a recolour:

     · the masthead runs brand, then a wide search, then the basket —
       the sibling centres its logo and tucks search in a corner;
     · the hero's second column is where we post to, not a company
       card, and the figures sit on a full-width rail under both
       columns rather than inline under the buttons;
     · a product card puts the title first, the category quietly under
       it, and gives the add button the full width of the card, where
       the sibling stacks category over title and hangs a small button
       off the price;
     · the picture box is 8:5, the shape the catalogue's drawings are
       actually drawn at, not a square with the drawing floating in it;
     · radii are 6/10/16 rather than 6/10, buttons are sentence case
       rather than letter-spaced capitals, and the wrap is narrower
       with more air inside it.

   THE REGISTERED NAME IS NOT IN THIS FILE and no rule here creates a
   place for it. It has three homes — the footer legal line that app.js
   draws, the terms of sale, and the contact block on the front page —
   and a fourth at the checkout, labelled as the payee. The .office-card
   below is that contact block, and it is the only card in the site's
   vocabulary allowed to carry the name.

   EVERY COLOUR IS A TOKEN. The light values are on bare :root; the
   dark ones redefine the same names and nothing else. A rule that
   names a colour outside the two blocks at the top is a bug.        */


/* ══ tokens ═══════════════════════════════════════════════════════ */

:root {
  /* Text, darkest to faintest. --body is the default for prose;
     --muted is the lightest that may carry a sentence somebody has to
     read (4.7:1 on white); --faint is for marks and rules only. */
  --ink:         #0b1220;
  --body:        #47525f;
  --muted:       #606a7a;   /* 5.47 on --bg, 5.13 on --surface, 4.73 on --surface-2 */
  --faint:       #98a2b2;   /* 2.58 on --bg: separators and rules only, never text */
  /* What dims the page behind the basket. A token because it is a colour,
     and colours in this file live here. */
  --scrim:       rgb(11 18 32 / .45);

  /* The blue. White on it is 6.8:1, so a filled button carries label
     text at any size. It is a shade deeper than the mark in logo.svg,
     which reads as the mark being the bright one rather than as two
     blues failing to match. */
  --accent:      #1550cf;
  --accent-hi:   #1043b2;   /* hover: darker, because the page is light */
  --accent-ink:  #ffffff;   /* text that sits on --accent */
  --accent-weak: #eaf1fd;   /* tints: selected pills, soft panels */

  --bg:          #ffffff;
  --surface:     #f5f8fc;   /* raised-but-quiet: media boxes, bands */
  --surface-2:   #e9eff8;   /* pressed, hovered, or one step further in */

  --line:        #dbe3ee;   /* a real edge: cards, panels, inputs */
  --line-soft:   #edf1f7;   /* a whisper: rows inside a list or table */

  --ok:          #10683e;
  --ok-weak:     #e7f5ed;
  --warn:        #855708;
  --warn-weak:   #fdf4e3;
  --bad:         #b32318;
  --bad-weak:    #fdece9;
  --sale:        var(--bad);

  /* The hero wash. A gradient, so it is one token and not two. */
  --hero-wash:   linear-gradient(178deg, #eef4fe 0%, #f8fbff 52%, #ffffff 100%);

  /* The halo a compound control gets when something inside it has
     focus. The search box and a form field both suppress the browser's
     own ring — a rectangle inside a pill looks like a fault — so they
     owe the keyboard a visible replacement, and this is it. */
  --ring:        rgb(21 80 207 / .32);

  /* Type. One scale for the whole site, so two people building two
     pages cannot arrive at two different ideas of "small". */
  --fs-xs:   11.5px;
  --fs-sm:   12.5px;
  --fs-base: 13.5px;
  --fs-body: 15.5px;
  --fs-md:   16.5px;
  --fs-lg:   19px;
  --fs-xl:   22px;
  --fs-2xl:  clamp(22px, 2.4vw, 27px);
  --fs-3xl:  clamp(26px, 3.4vw, 34px);
  --fs-hero: clamp(31px, 4.4vw, 48px);

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --r-sm:   6px;
  --r:      10px;
  --r-lg:   16px;
  --r-pill: 999px;

  --wrap: 1180px;

  --shadow-1: 0 1px 2px rgb(11 18 32 / .05);
  --shadow-2: 0 10px 26px -12px rgb(11 18 32 / .22);
  --shadow-3: 0 26px 56px -18px rgb(11 18 32 / .34);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:         #e9eef6;
    --body:        #b3becc;
    --muted:       #8b95a5;
    --faint:       #6c7684;
    /* Much heavier than the light one. Dimming a page that is already dark
       needs black rather than a dark blue, or nothing appears to happen. */
    --scrim:       rgb(0 0 0 / .66);

    /* A pale, slightly grey blue. The daylight navy vanishes on a dark
       ground and a saturated blue haloes against it; this one is 7.6:1
       as text on --bg and does not glow. */
    --accent:      #7fa9f5;
    --accent-hi:   #9dbdf9;   /* hover: lighter, because the page is dark */
    --accent-ink:  #071120;
    --accent-weak: #16223a;

    --bg:          #0f141b;
    --surface:     #161d26;
    --surface-2:   #1e2632;

    --line:        #2a323f;
    --line-soft:   #1f2733;

    --ok:          #52c489;
    --ok-weak:     #0f2419;
    --warn:        #e0b25e;
    --warn-weak:   #281f0e;
    --bad:         #ff9086;
    --bad-weak:    #2b1512;

    --hero-wash:   linear-gradient(178deg, #141d2b 0%, #111823 55%, #0f141b 100%);
    --ring:        rgb(127 169 245 / .38);

    /* Shadows on a dark page work by darkness, not by tint. */
    --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-2: 0 10px 26px -12px rgb(0 0 0 / .66);
    --shadow-3: 0 26px 56px -18px rgb(0 0 0 / .8);

    color-scheme: dark;
  }
}


/* ══ base ═════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: var(--fs-body)/1.65 var(--font);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4 { color: var(--ink); margin: 0; line-height: 1.25; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: 30px 0; }

/* The search filter and several pages hide things with the attribute.
   Without this, any rule that sets display on the element wins. */
[hidden] { display: none !important; }

/* One focus ring for the whole site, never removed. On a filled button
   it switches to ink so it does not vanish into what it outlines. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
.btn-primary:focus-visible,
.btn-dark:focus-visible { outline-color: var(--ink); }

::selection { background: var(--accent-weak); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Visible the moment it is tabbed to, and only then. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--bg);
  font-size: var(--fs-base); font-weight: 700;
  transition: top .15s;
}
.skip:focus { top: 12px; }


/* ══ layout ═══════════════════════════════════════════════════════ */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 26px; }

.section { padding: 60px 0; }
.section-alt {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; margin-bottom: 30px;
}
.section-head h2 { font-size: var(--fs-2xl); letter-spacing: -.015em; }
.section-head p { margin-top: 9px; font-size: var(--fs-body); color: var(--muted); max-width: 62ch; }

/* A vertical rhythm utility, so a page building boxes in JavaScript
   does not have to reach for an inline style to space them. */
.stack { display: grid; gap: 12px; }
.stack-lg { display: grid; gap: 20px; }

.kicker {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
}
.lede { font-size: var(--fs-md); line-height: 1.75; max-width: 62ch; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }

.count-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--accent-weak); color: var(--accent);
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap;
}


/* ══ buttons and links ════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border: 1px solid transparent; border-radius: var(--r);
  font-size: var(--fs-base); font-weight: 700; letter-spacing: 0;
  cursor: pointer; text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-hi); }
.btn-dark { background: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--body); }
.btn-line { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 15px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-go { padding: 16px 26px; font-size: var(--fs-md); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--accent); }
.btn-line[disabled]:hover, .btn-ghost[disabled]:hover {
  background: transparent; border-color: var(--line); color: var(--ink);
}

.link {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px;
}
.link:hover { text-decoration-color: var(--accent); }


/* ══ the top bar ══════════════════════════════════════════════════
   The facts a stranger checks before trusting a shop, in the smallest
   type on the page: what is sold, where it is posted to, and the two
   ways to reach a person. Not the registered name — that has its three
   places and this is not one of them.

   On a phone the first two drop out. What is sold is directly under
   the wordmark a centimetre below, and where we post is said twice
   more on the front page, in the hero card and the trust strip. The
   telephone and the email survive because they are the only two things
   in the bar a thumb can act on.                                    */

.topbar {
  background: var(--ink); color: var(--faint);
  font-size: var(--fs-sm);
}
.topbar .wrap {
  display: flex; align-items: center; gap: 10px 26px; flex-wrap: wrap;
  min-height: 38px; padding-top: 6px; padding-bottom: 6px;
}
.topbar span, .topbar a { display: inline-flex; align-items: center; gap: 7px; }
.topbar svg { color: var(--accent-hi); flex: none; }
.topbar a { color: var(--faint); }
.topbar a:hover { color: var(--bg); }
.tb-contact { margin-left: auto; display: inline-flex; align-items: center; gap: 22px; }

@media (prefers-color-scheme: dark) {
  /* The bar is the one place that is dark in both themes, so in dark
     mode it needs its own edge or it merges into the masthead. */
  .topbar { background: #080c12; border-bottom: 1px solid var(--line); }
  /* 6.48 on that ground, where --faint gave 4.26. */
  .topbar, .topbar a { color: var(--muted); }
  .topbar a:hover { color: var(--ink); }
}


/* ══ the masthead ═════════════════════════════════════════════════
   Brand, then the search box taking the middle, then the basket. The
   search is wide on purpose: seventeen products are quicker to type
   than to browse, and a shop where the search box is the biggest thing
   in the header is telling the truth about how it is used.          */

.masthead { background: var(--bg); }
.masthead .wrap {
  display: flex; align-items: center; gap: 22px;
  padding-top: 20px; padding-bottom: 20px;
}

.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.brand img { width: 42px; height: 42px; flex: none; }
.brand b {
  display: block; font-size: var(--fs-xl); font-weight: 800;
  letter-spacing: -.01em; color: var(--ink); line-height: 1.1;
}
.brand small {
  display: block; margin-top: 2px;
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em;
  color: var(--muted);
}

.searchbar {
  flex: 1 1 240px; min-width: 0; max-width: 560px;
  display: flex; align-items: center; gap: 10px;
  padding: 4px 4px 4px 15px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: border-color .15s, background .15s;
}
.searchbar:focus-within {
  border-color: var(--accent); background: var(--bg);
  box-shadow: 0 0 0 3px var(--ring);
}
.searchbar > svg { color: var(--muted); flex: none; }
.searchbar input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  padding: 10px 0; font-size: var(--fs-base); color: var(--ink);
}
.searchbar input::placeholder { color: var(--muted); }
/* The browser's own clear cross is a different shape on every engine
   and lands on the wrong background here. */
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchbar-go {
  flex: none; border: 0; cursor: pointer;
  padding: 10px 18px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-base); font-weight: 700;
}
.searchbar-go:hover { background: var(--accent-hi); }

.iconbtn {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: var(--fs-base); font-weight: 700; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.iconbtn:hover { border-color: var(--accent); color: var(--accent); }
.iconbtn .count {
  min-width: 21px; height: 21px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--fs-xs); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}


/* ══ the nav row ══════════════════════════════════════════════════ */

.navrow {
  background: var(--bg);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
}
.navrow .wrap { display: flex; gap: 4px; flex-wrap: wrap; }
.navrow a {
  padding: 13px 16px; border-radius: var(--r-sm);
  margin: 5px 0;
  font-size: var(--fs-base); font-weight: 700; color: var(--body);
  transition: color .15s, background .15s;
}
.navrow a:hover { color: var(--accent); background: var(--surface); }
/* The current page is filled rather than underlined: the sibling shop
   underlines, and a filled chip also survives the sideways scroll this
   row turns into on a phone, where an underline sits off screen. */
.navrow a[aria-current='page'] { color: var(--accent); background: var(--accent-weak); }


/* ══ the hero ═════════════════════════════════════════════════════
   Two columns, and the figures on a rail across the foot of both. The
   right column is where we post to and what it costs, built from
   shop.js — not a company card. This shop's own fact is that it sends
   to two countries, and that is what belongs beside the title.      */

.hero { background: var(--hero-wash); border-bottom: 1px solid var(--line); }
.hero .wrap {
  display: grid; grid-template-columns: 1.15fr minmax(300px, .85fr);
  gap: 26px 60px; align-items: center;
  padding-top: 66px;
}

.hero-title {
  margin-top: 16px;
  font-size: var(--fs-hero); letter-spacing: -.03em; line-height: 1.06;
}
.hero-title span { color: var(--accent); }
.hero-lead { margin-top: 20px; font-size: var(--fs-md); line-height: 1.72; max-width: 44ch; }
.hero-actions { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Where we post. One row per country in shop.js, so a third country
   would simply appear. */
.ship-card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 24px 26px;
  box-shadow: var(--shadow-2);
}
.ship-card h2 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.ship-row {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 15px 0; border-bottom: 1px solid var(--line-soft);
}
.ship-row:first-of-type { padding-top: 18px; }
.ship-row b { font-size: var(--fs-md); color: var(--ink); flex: 1 0 auto; }
.ship-row i { font-style: normal; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.ship-row span { flex: 1 0 100%; font-size: var(--fs-sm); color: var(--muted); }
.ship-note { margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }

/* The figures, on a rail under both columns. The sibling puts them
   inline beneath its buttons, where they read as a caption; on their
   own rule they read as the shop's terms. */
.statbar {
  grid-column: 1 / -1;
  margin-top: 56px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat { padding: 24px 26px 28px 0; }
.stat b {
  display: block; font-size: var(--fs-2xl); font-weight: 800;
  color: var(--ink); letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat span { display: block; margin-top: 5px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }


/* ══ the trust strip ══════════════════════════════════════════════ */

.trust { background: var(--bg); border-bottom: 1px solid var(--line); }
.trust .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 30px; padding-top: 34px; padding-bottom: 34px;
}
.trust-item { display: flex; gap: 13px; align-items: flex-start; }
.trust-item > svg { color: var(--accent); flex: none; margin-top: 1px; }
.trust-item b { display: block; font-size: var(--fs-base); color: var(--ink); }
.trust-item span { display: block; margin-top: 4px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; }


/* ══ how it works ═════════════════════════════════════════════════
   Numbered by a counter rather than by hand, so inserting a step in
   the middle does not renumber five headings by hand. The numeral is
   decorative and sits behind the text; the heading still reads on its
   own to anything that cannot see it. */

.how { background: var(--surface); border-bottom: 1px solid var(--line); }
.how .wrap { padding-top: 60px; padding-bottom: 60px; }
.how > .wrap > h2 { font-size: var(--fs-2xl); letter-spacing: -.015em; }
.how > .wrap > p { margin-top: 12px; max-width: 62ch; font-size: var(--fs-body); }
.how-grid {
  counter-reset: how;
  margin-top: 34px; display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.how-item {
  counter-increment: how;
  position: relative; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 26px 26px;
}
.how-item::before {
  content: counter(how, decimal-leading-zero);
  position: absolute; top: 10px; right: 16px;
  font-size: 46px; font-weight: 800; letter-spacing: -.04em;
  color: var(--accent-weak); line-height: 1;
}
.how-item h3 { position: relative; font-size: var(--fs-md); }
.how-item p { position: relative; margin-top: 9px; font-size: var(--fs-base); line-height: 1.72; }
.how-item b { color: var(--ink); }
.how-item a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }


/* ══ filters, and the catalogue grid ══════════════════════════════ */

.filters { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 28px; }
.pill,
.filters button {
  border: 1px solid var(--line); background: var(--bg); color: var(--body);
  padding: 9px 17px; border-radius: var(--r-pill);
  font-size: var(--fs-base); font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.pill:hover,
.filters button:hover { border-color: var(--accent); color: var(--accent); }
.pill.on, .pill[aria-pressed='true'],
.filters button.on, .filters button[aria-pressed='true'] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}

/* Roomier than the sibling's grid on purpose — a wider gap and a bigger
   picture — but still four across on a desktop. Seventeen products in
   rows of three reads as a shop that has run out of things to sell. */
.grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .16s, box-shadow .16s;
}
.card:hover { border-color: var(--accent); box-shadow: var(--shadow-2); }

/* 8:5 — the shape the catalogue's drawings are drawn at, so nothing
   floats in a letterboxed square. */
.card-media {
  position: relative; display: block;
  aspect-ratio: 8 / 5; background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.card-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }

/* A photograph and a drawing want different amounts of room. A line
   drawing is a few strokes and needs the inset above, or it reads as
   though it is touching its border. A photograph arrives with its own
   margin of backdrop already round the item, so the same inset only
   makes it smaller. contain is what keeps both honest either way: the
   picture is fitted into the panel whole, never stretched to it and
   never cropped by it, whatever shape the file turns out to be.

   THE INSET IS ONLY CHANGED ON THE PRODUCT PAGE, and the reason is
   worth writing down because it is not obvious. A .card is a column
   flex box, so .card-media is a flex item and its height is taken from
   its content — the picture — and NOT from the aspect-ratio above,
   which a flex item in a column ignores. The panel is therefore as tall
   as the image plus its padding, and two cards in a row whose pictures
   are padded differently are two cards of different heights. Giving a
   photograph less room here would tilt the row it sits in. It is set on
   .gallery-main instead, where aspect-ratio does hold — that panel is
   not a flex item — so the box stays exactly 8:5 whatever is inside it,
   and the panels below it are stacked rather than in a row and have
   nothing to line up with anyway.

   If a photograph ever needs more room on a card, the way to get it is
   to take the image out of flow (position: absolute; inset: 0 on the
   img, .card-media is already positioned) so the panel is sized by its
   aspect-ratio rather than by its contents. That changes the height of
   all seventeen panels, so it is a deliberate change to the look of the
   shop and not a tweak. */
.gallery-main img.is-photo { padding: 8px; }

.tag {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.tag-sale { background: var(--sale); color: #fff; }
.tag-out  { background: var(--ink); color: var(--bg); }
.tag-cond { background: var(--warn-weak); color: var(--warn); }

/* Title first, then the category quietly under it. The sibling does
   the opposite, and leads with a label nobody came for. */
.card-body { padding: 18px 19px 19px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { font-size: var(--fs-md); font-weight: 700; line-height: 1.4; }
.card-body h3 a:hover { color: var(--accent); }
.card-cat {
  margin-top: 7px;
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.card-spec {
  margin-top: 11px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6;
}
.card-stock { font-size: var(--fs-sm); color: var(--muted); }
.card-foot {
  margin-top: auto; padding-top: 16px;
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
/* The add button takes the whole width of the card. A shop's buy
   control should not be the smallest thing on the card. */
.card .btn { margin-top: 14px; }

.price {
  font-size: var(--fs-xl); font-weight: 800; color: var(--ink);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.price-was { font-size: var(--fs-base); color: var(--faint); text-decoration: line-through; }

.empty {
  padding: 46px 20px; text-align: center; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--r-lg);
}

/* What the search hides. A class rather than the hidden attribute, so
   a page filtering by category with [hidden] and app.js filtering by
   search term never argue about the same switch. */
.is-nomatch { display: none !important; }


/* ══ the product page ═════════════════════════════════════════════ */

.crumbs {
  padding: 22px 0 0; font-size: var(--fs-sm); color: var(--muted);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.crumbs a:hover { color: var(--accent); }
/* Only the separators are faint; they already carry aria-hidden. The
   category and the current page are ordinary text and fall through to the
   colour .crumbs sets. */
.crumbs span[aria-hidden] { color: var(--faint); }

.product {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px;
  padding: 34px 0 60px; align-items: start;
}
.gallery-main {
  aspect-ratio: 8 / 5; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 26px; }
.thumbs { margin-top: 14px; display: flex; gap: 12px; flex-wrap: wrap; }
.thumbs button {
  width: 86px; aspect-ratio: 8 / 5; padding: 0; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden;
}
.thumbs button:hover { border-color: var(--muted); }
.thumbs button.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.product-info h1 { font-size: var(--fs-3xl); line-height: 1.2; letter-spacing: -.02em; }
.product-price { margin-top: 18px; display: flex; align-items: baseline; gap: 13px; }
.product-price .price { font-size: clamp(28px, 3.4vw, 34px); }
.product-note { margin-top: 7px; font-size: var(--fs-sm); color: var(--muted); }
.product-desc { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.product-desc h2 { font-size: var(--fs-md); margin-bottom: 10px; }
.product-desc p { font-size: var(--fs-body); line-height: 1.78; }

.stock { margin-top: 18px; display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-base); }
.stock i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; }
.stock.out i { background: var(--bad); }

.cond { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: var(--fs-sm); font-weight: 600; }
.cond i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cond-new { color: var(--ok); }
.cond-new i { background: var(--ok); }
.cond-used { color: var(--warn); }
.cond-used i { background: var(--warn); }

.buy { margin-top: 26px; display: flex; gap: 13px; align-items: stretch; flex-wrap: wrap; }
.qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.qty button {
  width: 44px; align-self: stretch; border: 0; background: transparent;
  color: var(--ink); font-size: var(--fs-lg); cursor: pointer;
}
.qty button:hover { background: var(--surface); }
.qty input {
  width: 54px; border: 0; text-align: center; background: transparent;
  font-size: var(--fs-md); font-weight: 700; color: var(--ink);
  -moz-appearance: textfield;
}
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy .btn { flex: 1; min-width: 200px; padding: 15px 24px; }

.spec-table {
  margin-top: 34px; border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.spec-table h2 {
  padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: var(--fs-base); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.spec-table dl { margin: 0; display: grid; grid-template-columns: minmax(130px, 38%) 1fr; }
.spec-table dt, .spec-table dd {
  margin: 0; padding: 12px 18px; font-size: var(--fs-base);
  border-bottom: 1px solid var(--line-soft);
}
.spec-table dt { color: var(--muted); }
.spec-table dd { color: var(--ink); overflow-wrap: anywhere; }
.spec-table dt:nth-last-of-type(1), .spec-table dd:nth-last-of-type(1) { border-bottom: 0; }


/* ══ tables ═══════════════════════════════════════════════════════
   Used heavily by the four document pages. .table-scroll is what keeps
   a four-column table from widening the whole page on a phone. */

/* A table wider than the screen it is on. Overlay scrollbars only appear
   during a gesture, so a still page showed a table that looked complete and
   was not: on a phone the delivery page's "we treat it as lost after" column
   was entirely off-screen, on the one table a reader opens when a parcel has
   not arrived. The fade is put there by app.js only while the table really
   does overrun, and taken away at the right-hand end, so it always means
   "there is more this way" and never decorates a table that fits. */
.table-scroll { overflow-x: auto; margin-top: 18px; position: relative; }
.table-scroll.is-cut {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent);
          mask-image: linear-gradient(to right, #000 calc(100% - 46px), transparent);
}
.table-scroll.is-cut.at-end { -webkit-mask-image: none; mask-image: none; }
.table-more {
  margin-top: 8px; font-size: var(--fs-sm); color: var(--muted);
  display: none;
}
.table-scroll.is-cut + .table-more { display: block; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.table th, .table td { text-align: left; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); }
.table th {
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table td { color: var(--ink); }
.table td.num, .table th.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }


/* ══ panels, fields, notes ════════════════════════════════════════ */

.panel {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.panel > h2 {
  padding: 15px 20px; background: var(--surface); border-bottom: 1px solid var(--line);
  font-size: var(--fs-base); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.panel-body { padding: 22px; }

.fields { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field.span2 { grid-column: 1 / -1; }
.field > span { font-size: var(--fs-sm); font-weight: 700; color: var(--ink); }
.field > span i { font-style: normal; font-weight: 400; color: var(--muted); }
.field input, .field textarea, .field select {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font-size: var(--fs-base); width: 100%;
}
.field textarea { resize: vertical; min-height: 100px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring);
}
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--bad); }
.field small { font-size: var(--fs-xs); color: var(--muted); }
.field-error { font-size: var(--fs-xs); color: var(--bad); font-weight: 700; }

.note {
  padding: 14px 17px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--line);
  font-size: var(--fs-base); line-height: 1.65;
}
.note b { color: var(--ink); }
.note-accent { background: var(--accent-weak); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.note-warn { background: var(--warn-weak); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.note-warn b { color: var(--warn); }
.note-bad { background: var(--bad-weak); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
.note-bad b { color: var(--bad); }
.note-ok { background: var(--ok-weak); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ok); }
.note-ok b { color: var(--ok); }
.form-error { margin-bottom: 16px; font-weight: 700; }


/* ══ payment ══════════════════════════════════════════════════════
   Only ever drawn for the methods MNA.paymentMethods() returns. While
   card payment is switched off there is nothing to draw, and .method-only
   is what a single live method looks like: a statement, not a choice
   between one thing and nothing. */

.methods { padding: 18px 22px 22px; display: grid; gap: 13px; }
.method {
  display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
  padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r);
}
.method:hover { border-color: var(--muted); }
.method.on { border-color: var(--accent); background: var(--accent-weak); }
.method input { margin-top: 3px; accent-color: var(--accent); flex: none; width: 17px; height: 17px; }
.method-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.method-title { font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.method-blurb { font-size: var(--fs-base); color: var(--body); line-height: 1.6; }
.method-only {
  padding: 15px 17px; border-radius: var(--r);
  background: var(--accent-weak); border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}

.bank { display: grid; gap: 11px; margin-top: 15px; }
.bank-row {
  display: flex; gap: 14px; align-items: baseline;
  padding-bottom: 11px; border-bottom: 1px solid var(--line-soft);
}
.bank-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bank-row i {
  font-style: normal; color: var(--muted); font-size: var(--fs-base);
  min-width: 150px; flex: none;
}
.bank-row b {
  font-family: var(--mono); font-size: var(--fs-md); color: var(--ink);
  overflow-wrap: anywhere;
}
.bank-note { font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; }


/* ══ copy boxes ═══════════════════════════════════════════════════
   Built by app.js. Double-click copies; the button is there because a
   double-click is a mouse gesture and nothing else. */

.copybox {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  transition: border-color .15s;
}
.copybox:hover { border-color: var(--muted); }
.copybox.is-copied { border-color: var(--ok); }
.copybox-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.copybox-label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.copybox-value {
  font-family: var(--mono); font-size: var(--fs-md); color: var(--ink);
  overflow-wrap: anywhere;
}
.copybox-value a { color: inherit; }
.copybox-hint { font-size: var(--fs-xs); color: var(--muted); }
.copybox-btn {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
}
.copybox-btn:hover { border-color: var(--accent); color: var(--accent); }
.copybox-btn svg { flex: none; }
.copybox-status { flex: none; font-size: var(--fs-sm); font-weight: 700; color: var(--ok); }
.copybox-status:empty { display: none; }


/* ══ the basket drawer ════════════════════════════════════════════ */

.scrim {
  position: fixed; inset: 0; z-index: 80;
  background: var(--scrim); opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.scrim.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 81;
  width: min(430px, 100%); visibility: hidden;
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--line);
  box-shadow: var(--shadow-3);
  transform: translateX(102%);
  /* Visible the instant it opens, hidden only once it has slid away.
     Transitioning visibility in both directions meant the panel was still
     computed hidden at the moment it opened, and focus() into a hidden
     subtree is dropped without an error -- which is how the one control that
     starts a payment ended up 58 tab stops away. */
  transition: transform .24s ease, visibility 0s linear .24s;
}
.drawer.show { transform: none; visibility: visible; transition: transform .24s ease, visibility 0s; }
.drawer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { font-size: var(--fs-md); flex: 1; }
.drawer-close {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  padding: 7px; border-radius: var(--r-sm);
}
.drawer-close:hover { background: var(--surface); color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 8px 22px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 18px 22px 22px; }
.drawer-note { margin-top: 11px; font-size: var(--fs-xs); color: var(--muted); text-align: center; }

.line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.line:last-child { border-bottom: 0; }
.line-media {
  width: 78px; aspect-ratio: 8 / 5; flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  overflow: hidden;
}
.line-media img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.line-main { flex: 1; min-width: 0; }
.line-main h4 { font-size: var(--fs-base); font-weight: 700; line-height: 1.4; }
.line-main h4 a:hover { color: var(--accent); }
.line-sub { margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); }
.line-row { margin-top: 10px; display: flex; align-items: center; gap: 11px; }
.line-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); }
.line-qty button {
  width: 30px; height: 30px; border: 0; background: transparent;
  color: var(--ink); cursor: pointer; font-size: var(--fs-md);
}
.line-qty button:hover { background: var(--surface); }
.line-qty span { min-width: 26px; text-align: center; font-size: var(--fs-base); font-weight: 700; color: var(--ink); }
.line-row .price { margin-left: auto; font-size: var(--fs-md); }
.line-drop {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font-size: var(--fs-sm); padding: 0;
}
.line-drop:hover { color: var(--bad); text-decoration: underline; }

.sums { font-size: var(--fs-base); }
.sums div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.sums b { font-variant-numeric: tabular-nums; color: var(--ink); }
.sums .total {
  margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: var(--fs-md);
}
.sums .total b { font-size: var(--fs-lg); font-weight: 800; }
.drawer-foot .btn { margin-top: 15px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 90;
  transform: translate(-50%, 14px); opacity: 0; pointer-events: none;
  padding: 13px 20px; border-radius: var(--r);
  background: var(--ink); color: var(--bg);
  font-size: var(--fs-base); font-weight: 700;
  box-shadow: var(--shadow-3); transition: opacity .18s, transform .18s;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }


/* ══ checkout ═════════════════════════════════════════════════════ */

.checkout { padding-bottom: 66px; }
.checkout-head { padding: 38px 0 28px; }
.checkout-head h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; }
.checkout-head p { margin-top: 11px; font-size: var(--fs-body); max-width: 60ch; }
.checkout-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 30px; align-items: start; }

.summary { position: sticky; top: 20px; }
.sum-lines { padding: 6px 20px; }
.sum-line { display: flex; gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.sum-line:last-child { border-bottom: 0; }
.sum-media {
  width: 56px; aspect-ratio: 8 / 5; flex: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.sum-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.sum-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sum-main a { font-size: var(--fs-base); font-weight: 700; color: var(--ink); line-height: 1.4; }
.sum-main a:hover { color: var(--accent); }
.sum-main small { font-size: var(--fs-xs); color: var(--muted); }
.sum-line > b { font-size: var(--fs-base); color: var(--ink); font-variant-numeric: tabular-nums; }
.summary .sums { padding: 15px 20px 20px; border-top: 1px solid var(--line); }
.summary-note { font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.form-note { margin-top: 13px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.65; }


/* ══ the order page ═══════════════════════════════════════════════ */

.done { max-width: 660px; margin: 0 auto; padding: 48px 0 66px; }
.done-mark {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 22px;
  background: var(--ok-weak); color: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.done h1 { font-size: var(--fs-3xl); letter-spacing: -.02em; }
.done > p { margin-top: 15px; font-size: var(--fs-md); line-height: 1.72; }
.done-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }


/* ══ the document pages ═══════════════════════════════════════════
   delivery, returns, terms and privacy. They are long, they are read
   rather than skimmed, and nothing else on the site is. One column, a
   comfortable measure, and type a size up from the shop pages.

   .doc, .doc-back, .doc-sub, .doc-date, .doc-note, .doc-contact,
   .table, .table-scroll, .num and .sr-only are their whole vocabulary.
   Nothing here may be renamed. */

.doc { max-width: 760px; margin: 0 auto; padding: 44px 26px 84px; }
.doc-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-base); font-weight: 700; color: var(--muted);
}
.doc-back:hover { color: var(--accent); }
.doc h1 { margin-top: 20px; font-size: var(--fs-3xl); letter-spacing: -.02em; }
.doc-sub { margin-top: 14px; font-size: var(--fs-md); line-height: 1.68; }
.doc-date {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: var(--fs-sm); color: var(--muted);
}
.doc h2 { margin-top: 42px; font-size: var(--fs-lg); scroll-margin-top: 20px; }
.doc h3 { margin-top: 26px; font-size: var(--fs-md); }
.doc p, .doc li { font-size: var(--fs-body); line-height: 1.8; }
.doc p { margin-top: 13px; }
.doc h2 + p, .doc h3 + p { margin-top: 10px; }
.doc strong { color: var(--ink); }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc ul, .doc ol { margin-top: 13px; padding-left: 22px; }
.doc li { margin-top: 7px; }
.doc li::marker { color: var(--muted); }

/* The aside inside a document: a summary, a warning, or the list of
   sections. .doc-nav is the same box when it holds a table of contents,
   named separately so a page can style one without the other. */
.doc-note, .doc-nav {
  margin-top: 20px; padding: 16px 19px;
  border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
}
.doc-note p, .doc-nav p { margin: 0; color: var(--ink); font-size: var(--fs-body); }
.doc-note ol, .doc-note ul,
.doc-nav ol, .doc-nav ul { margin-top: 10px; margin-bottom: 0; }

.doc-contact {
  margin-top: 44px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.doc-contact b { display: block; font-size: var(--fs-md); color: var(--ink); }
.doc-contact address { font-style: normal; margin-top: 6px; font-size: var(--fs-body); line-height: 1.7; }
.doc-contact p { font-size: var(--fs-base); }


/* ══ the contact block ════════════════════════════════════════════
   .office-card is the front page's contact block, and it is the one
   place in the site's vocabulary that carries the registered name —
   one of the three the name is allowed. Nothing else may use it for
   that purpose. */

.office-card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 28px;
}
.office-card h2 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.office-name { margin-top: 14px; font-size: var(--fs-md); font-weight: 700; color: var(--ink); }
.office-card address { font-style: normal; margin-top: 6px; font-size: var(--fs-body); line-height: 1.75; }
.office-reg { margin-top: 14px; font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; }
.office-line {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: var(--fs-base); font-weight: 600; color: var(--ink);
}
.office-line + .office-line { margin-top: 9px; }
.office-line svg { color: var(--accent); flex: none; }
.office-line a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }


/* ══ the footer ═══════════════════════════════════════════════════ */

.site-foot {
  margin-top: 0; background: var(--surface);
  border-top: 1px solid var(--line); color: var(--muted);
  font-size: var(--fs-base);
}
.site-foot a:hover { color: var(--accent); }
.foot-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 38px; padding: 52px 0 36px; }
.foot-blurb { margin-top: 18px; font-size: var(--fs-base); line-height: 1.72; max-width: 36ch; }
.foot-contact { margin-top: 16px; font-size: var(--fs-base); line-height: 1.95; }
.foot-contact a { color: var(--ink); font-weight: 700; }
.foot-contact a:hover { color: var(--accent); }
.foot-col h4 {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink); margin-bottom: 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 9px; font-size: var(--fs-base); }

/* The legal line. It is small, and it is meant to be: it has to be
   there, on every page, and it is not what anybody came for. */
.foot-legal {
  border-top: 1px solid var(--line); padding: 20px 0 30px;
  display: flex; gap: 14px 26px; flex-wrap: wrap; align-items: baseline;
  font-size: var(--fs-sm);
}
.foot-legal .legal-line { max-width: 80ch; line-height: 1.65; }
.foot-legal .legal-line b { color: var(--ink); font-weight: 700; }
.foot-legal .copy { margin-left: auto; white-space: nowrap; }


/* ══ narrower screens ═════════════════════════════════════════════
   Most of the people who see this shop will see it on a phone, so the
   phone is the layout that has to be right rather than the one that
   has to survive. Checked at 375px. */

@media (max-width: 1000px) {
  .hero .wrap {
    grid-template-columns: 1fr; gap: 34px;
    padding-top: 46px;
  }
  .ship-card { max-width: 460px; }
  .statbar { margin-top: 38px; }
  .trust .wrap { grid-template-columns: repeat(2, 1fr); gap: 26px 30px; }
  .product { grid-template-columns: 1fr; gap: 32px; }
  .checkout-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 820px) {
  /* The masthead becomes two rows: brand and basket, then the search
     across the full width. The search keeps its size because it is the
     fastest way through seventeen products on a small screen. */
  .masthead .wrap { flex-wrap: wrap; gap: 14px; padding-top: 16px; padding-bottom: 16px; }
  /* A stated basis rather than auto. Flex decides where to wrap from an
     item's natural width, not its shrunk one, and the brand's natural
     width is four pixels wider than the room left beside the basket —
     enough to throw the basket onto a row of its own. Given a basis it
     can shrink into, the two share one row and the tagline wraps
     instead of the layout. */
  .brand { flex: 1 1 200px; min-width: 0; }
  .brand span { min-width: 0; }
  .brand b { white-space: nowrap; }
  .iconbtn { order: 2; }
  .searchbar { order: 3; flex: 1 0 100%; max-width: none; }

  /* The bar keeps the two things a thumb can act on. What is sold is
     under the wordmark; where we post is on the hero card and in the
     trust strip.
     Written as .topbar .tb-… and not .tb-… on its own: the rule it has
     to beat is .topbar span, and a media query adds no specificity. */
  .topbar .wrap { justify-content: center; gap: 6px 20px; min-height: 0; font-size: var(--fs-xs); }
  .topbar .tb-sells, .topbar .tb-ship { display: none; }
  .topbar .tb-contact { margin-left: 0; gap: 20px; }

  /* Five links, side-scrolling rather than folded behind a button: a
     menu that has to be opened hides all five behind a guess. */
  .navrow .wrap {
    flex-wrap: nowrap; overflow-x: auto; gap: 0;
    padding-left: 10px; padding-right: 10px;
    scrollbar-width: none;
  }
  .navrow .wrap::-webkit-scrollbar { display: none; }
  .navrow a { white-space: nowrap; margin: 3px 0; }
}

@media (max-width: 700px) {
  .wrap { padding: 0 16px; }

  .section { padding: 40px 0; }
  .section-head { margin-bottom: 22px; }
  .how .wrap { padding-top: 42px; padding-bottom: 42px; }
  .trust .wrap { padding-top: 26px; padding-bottom: 26px; }

  /* Two by two, but the icon moves above the words: at this width a
     side-by-side icon leaves the text about eleven characters. */
  .trust-item { flex-direction: column; gap: 9px; }

  .statbar { grid-template-columns: repeat(2, 1fr); gap: 0 20px; }
  .stat { padding: 18px 0 20px; }

  .fields { grid-template-columns: 1fr; padding: 18px; }
  .field.span2 { grid-column: auto; }

  .spec-table dl { grid-template-columns: 1fr; }
  .spec-table dt { padding-bottom: 0; border-bottom: 0; }

  .bank-row { flex-direction: column; gap: 3px; align-items: flex-start; }
  .bank-row i { min-width: 0; }

  .copybox { align-items: stretch; flex-direction: column; gap: 11px; }
  .copybox-btn { width: 100%; justify-content: center; padding: 11px 14px; }

  .buy .btn { min-width: 0; }
  .thumbs button { width: 68px; }

  .foot-top { grid-template-columns: 1fr; gap: 28px; padding: 38px 0 28px; }
  .foot-legal .copy { margin-left: 0; }

  .doc { padding: 30px 16px 64px; }
  .drawer { width: 100%; border-left: 0; }
}

@media (max-width: 560px) {
  /* One card wide. Two cards at this width leaves the drawing about
     130px across and the title on four lines. */
  .grid { grid-template-columns: 1fr; gap: 18px; }
  .card-media { aspect-ratio: 16 / 9; }

  .hero .wrap { padding-top: 36px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .searchbar-go { padding: 10px 15px; }
  .iconbtn { padding: 11px 14px; }
  .iconbtn-text { display: none; }
  /* Half a point smaller keeps what the shop sells on one line beside
     the basket at 375px, which is where it has to survive. */
  .brand b { font-size: var(--fs-lg); }
  .brand small { font-size: 11px; }

  /* Tightened so all five links fit a 375px screen without scrolling.
     They still scroll if a sixth is ever added, but nobody should have
     to discover a link by dragging a row that looks complete. */
  .navrow a { padding: 12px 12px; font-size: var(--fs-sm); }
}

/* Nothing on this site moves on its own; every transition above is a
   response to a click. Somebody who has asked for less motion gets
   none of it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .topbar, .navrow, .searchbar, .iconbtn, .drawer, .scrim, .toast, .skip,
  .copybox-btn, .filters { display: none !important; }
  body { background: #fff; color: #000; }
  .site-foot, .hero, .how { background: none; }
  .card, .panel, .doc-note, .office-card { break-inside: avoid; }
}