/* Africar Spares Warehouse: the design system and the shell.
 *
 * The current-brand design (2026-10-09): Africar's red-and-black logo, the
 * approved mockup design/mockups/current-brand/index.html with "Claude's
 * pick" colours (options/chosen-tokens.json), baked in as the only values.
 * This file holds the tokens, base and type, buttons, links, form fields,
 * the shared components, and the shell every page wears: header, department
 * menu and phone menu, header search, footer, banner, messages, page head.
 *
 * Load order (base.html): tailwind.css (CMS blocks), site.css, catalog.css
 * (listing, product, brands), pages.css (quote, contact, sign in, trading,
 * policy, 404). home.css loads on the homepage only. Plain CSS, no build.
 *
 * Old token names kept so inner rules still resolve: --petrol is the action
 * red, --petrol-deep its darker hover red (#A81B22, = --cta-hover), and
 * --lime / --lime-ink are the same red as an accent. The light grey of the
 * hero plate, the part bays, the trade band and the warning banner is
 * --banner (#D6D6D6): ink text only on it, never white. chosen-tokens.json
 * sets --petrol-deep to that grey; production splits the two on purpose
 * (BUILD-BRIEF known trap 1). Never put ink text on a red fill: white on
 * --cta-bg, hovering to --cta-hover.
 */

/* ── Font fallback ────────────────────────────────────────────────────── */
/* Until Hanken Grotesk arrives from Google Fonts (display=swap), text is set in
   Arial resized to Hanken's widths, so the swap moves almost nothing (the
   homepage's CLS on Slow 4G was 0.095 from the swap alone). One size-adjust
   cannot fit both: Hanken's capitals are about 0.92 x Arial's and its lower
   case about 1.03 x, and the catalogue is set in capitals. So each weight group
   (Arial for 100-549, Arial Bold for 550-900) has four faces split by
   unicode-range: the default (lower case and the rest), the space, ASCII digits
   and punctuation, and A-Z. The values were fitted in headless Chrome against
   the real font on the site's own text (paragraphs, headings, nav, product
   descriptions, part numbers) until wrapped lines matched. The vertical
   overrides give every face Hanken's 1.000 em ascent and 0.303 em descent; they
   are scaled by size-adjust, hence 100/size-adjust and so on. Helvetica and
   Liberation Sans/Arimo share Arial's metrics.
   The ch unit is not matched: it is the width of "0", 0.56em in Hanken but
   0.554em in the fallback's digit face, so a 64ch measure is 1% narrower until
   the swap and a line that just fits wraps (the search page's sub line did:
   CLS 0.011 at 1440). This file writes text measures in em, as N x 0.56em,
   which is the same width in Hanken and identical in the fallback. */
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Arimo");font-weight:100 549;size-adjust:102.54%;ascent-override:97.523%;descent-override:29.55%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Arimo");font-weight:100 549;unicode-range:U+0020;size-adjust:93.6%;ascent-override:106.838%;descent-override:32.372%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Arimo");font-weight:100 549;unicode-range:U+0021-0040,U+005B-0060,U+007B-007E;size-adjust:99.7%;ascent-override:100.301%;descent-override:30.392%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans"),local("Arimo");font-weight:100 549;unicode-range:U+0041-005A;size-adjust:92.8%;ascent-override:107.759%;descent-override:32.651%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:550 900;size-adjust:95.47%;ascent-override:104.745%;descent-override:31.738%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:550 900;unicode-range:U+0020;size-adjust:93.6%;ascent-override:106.838%;descent-override:32.372%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:550 900;unicode-range:U+0021-0040,U+005B-0060,U+007B-007E;size-adjust:99.8%;ascent-override:100.201%;descent-override:30.361%;line-gap-override:0%}
@font-face{font-family:"Hanken Fallback";src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Arimo Bold");font-weight:550 900;unicode-range:U+0041-005A;size-adjust:90.3%;ascent-override:110.742%;descent-override:33.555%;line-gap-override:0%}

/* ── Tokens ──────────────────────────────────────────────────────────── */
:root{
  /* brand */
  --petrol:#C42129;          /* the action red: buttons, links, Quote, focus; white on it 5.8:1 */
  --panel:#C42129;
  --petrol-deep:#A81B22;     /* the dark hover red, = --cta-hover; white on it 7.3:1 */
  --banner:#D6D6D6;          /* light banner grey: hero plate, part bays, trade band. Ink text only */
  --petrol-lit:#F9F4F3;
  --plate-rule:#FEFAF9;
  --bay-base:#E4E1E1;
  --ink:#201E1E;             /* the logo black */
  --ink-dark:#151313;        /* the footer */
  --lime:#C42129;            /* the accent, now the same deep red */
  --lime-deep:#D42A30;
  --lime-ink:#C42129;

  /* colour roles */
  --accent:#C42129;
  --accent-ink:#C42129;      /* accent marks on light grounds */
  --slab-bg:#C42129; --slab-fg:#FFFFFF;
  --slab-btn-bg:#201E1E; --slab-btn-fg:#FFFFFF; --slab-btn-hover:#3E3938;
  --cta-bg:#C42129; --cta-fg:#FFFFFF; --cta-hover:#A81B22;   /* every red fill hovers darker */
  --note-bg:#C42129; --note-fg:#FFFFFF;
  --count-bg:#FFFFFF; --count-fg:#C42129;
  --band-edge:#C42129;
  --render-shadow:rgba(0,0,0,.2);
  --accent-on-dark:#C42129;  /* thin marks on the grey banners */
  --accent-on-panel:#FFFFFF;
  --accent-on-foot:#C42129;  /* footer rules and focus: 3.1:1 on the footer black */
  --accent-on-ink:#FFFFFF;
  --accent-on-bmore:#FFFFFF;
  --banner-rule:#C0C0C0; --banner-shade:#CDCDCD; --banner-muted:#605C59;
  --tile-tint:#FFE1E3; --tile-tint-deep:#F3D3D4; --tile-rule:#EDBCBF;   /* the pale red wash */
  --band-cell:#FFE1E3; --band-cell-hover:#F3D3D4; --band-strip:#F3D3D4;
  --tag-num:#DE5D5F;
  --brand-hover:#B21A08;

  /* grounds */
  --porcelain:#F6F4F3;       /* the page */
  --sage:#DDD7D5;
  --sage-soft:#ECE8E6;
  --sage-light:#F1EEED;
  --white:#FFFFFF;
  --studio:#E9EAEB;
  --studio-rack:#F4F4F6;

  /* text and rules */
  --muted:#6B6764;           /* 5.6:1 on white, 4.85:1 on --sage-light */
  --placeholder:#6B6764;
  --line:#E5E1DF;
  --line-strong:#CFC8C5;
  --field-line:#8F8986;      /* field outlines: 3:1 or more on white and porcelain */
  --on-petrol:#FFF5F5;
  --on-petrol-muted:#BDB5B3;
  --rule-dark:color-mix(in srgb,#FFF5F5 18%,transparent);
  --rule-heavy:3px solid #201E1E;
  --alert:#9B2C1F; --alert-bg:#FBEDEA;

  /* type */
  --font:"Hanken Grotesk","Hanken Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-xs:13px; --fs-sm:14px; --fs-ui:15px; --fs-body:16px; --fs-md:17px; --fs-lead:18px;
  --fs-h3:24px;
  --fs-h2:clamp(32px,3.4vw,50px);
  --fs-band:clamp(44px,6vw,88px);
  --track-tight:-.032em;

  /* space and shape */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --sec:88px;
  --gutter:32px;
  --content:1280px;
  --head-h:76px;             /* the header row; 68 at 1100, 60 at 760 */
  --search-row:0px;          /* the header search's own row, on inner pages at 760 */
  --r:2px;
  --r-plate:4px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* names the moved inner-page rules still use */
  --ink-2:#151313;
  --radius:2px;
  --radius-lg:2px;
  --wrap:1280px;

  color-scheme:light;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + var(--search-row) + 16px)}
body{margin:0;background:var(--porcelain);color:var(--ink);font:450 var(--fs-body)/1.5 var(--font);font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.site img{display:block;max-width:100%}
/* at element weight, so any class that colours a link (.basket, .skip) wins */
:where(.site) a{color:inherit}
.wrap{width:min(var(--content),100% - 2 * var(--gutter));margin-inline:auto}
.num{font-variant-numeric:tabular-nums lining-nums}
/* search matches (the highlight filter): bold and underlined in red, never a fill */
mark{background:none;color:inherit;font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--accent-ink);text-underline-offset:3px}
.nw{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg.i{width:16px;height:16px;flex:none}
[x-cloak]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* focus: red on light grounds, the footer's own accent on dark */
:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.on-dark :focus-visible{outline-color:var(--accent-on-foot)}

/* the skip link moves focus to main (tabindex -1), which needs no ring of its own */
main:focus{outline:none}

/* skip link */
.skip{position:absolute;left:16px;top:-100px;z-index:60;padding:12px 16px;background:var(--ink);color:var(--white);font-weight:800;border-radius:var(--r);text-decoration:none}
.skip:focus{top:12px}

/* ── Type ─────────────────────────────────────────────────────────────── */
/* :where keeps these at element weight, so a page's own rule (or a Tailwind
   utility on a CMS block) sets a heading without fighting them */
:where(.site) h1,:where(.site) h2,:where(.site) h3{margin:0;font-weight:800;letter-spacing:var(--track-tight);line-height:1;text-wrap:balance}
:where(.site) h2{font-size:var(--fs-h2)}
:where(.site) h3{font-size:var(--fs-h3);letter-spacing:-.018em;line-height:1.15}
:where(.site) p{margin:0}
:where(.site) p,:where(.site) dd{text-wrap:pretty}

/* ── Links and buttons ────────────────────────────────────────────────── */
/* text link: a 2px red underline that takes the text colour on hover */
.tlink{font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--accent-ink);transition:text-decoration-color .2s}
.tlink:hover{text-decoration-color:currentColor}
.linkish{border:0;background:none;padding:0;font:inherit;font-weight:700;color:inherit;cursor:pointer}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:0;border-radius:var(--r);font:inherit;font-weight:700;font-size:var(--fs-body);line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .15s}
.btn svg{width:18px;height:18px;flex:none;transition:transform .2s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.site .btn-petrol{background:var(--petrol);color:var(--white)}
.site .btn-petrol:hover{background:var(--cta-hover)}
.site .btn-lime{background:var(--cta-bg);color:var(--cta-fg)}
.site .btn-lime:hover{background:var(--cta-hover)}
.site .btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.site .btn-line:hover{background:var(--ink);color:var(--white)}
.btn-sm{min-height:42px;padding:0 16px;font-size:var(--fs-ui)}
.btn-block{width:100%}
.icon-btn{width:44px;height:44px;border:0;border-radius:var(--r);background:var(--sage-light);display:inline-grid;place-items:center;cursor:pointer;color:var(--ink)}
.icon-btn:hover{background:var(--sage)}
.icon-btn svg{width:20px;height:20px}

/* ── Form fields ──────────────────────────────────────────────────────── */
.select,.input,.textarea{font:inherit;font-weight:500;color:var(--ink);background:var(--white);border:1px solid var(--field-line);border-radius:var(--r)}
.select{height:44px;padding:0 36px 0 12px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%23201E1E' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
.input{height:48px;padding:0 14px;width:100%}
.textarea{padding:12px 14px;width:100%;line-height:1.5}
.input::placeholder,.textarea::placeholder{color:var(--placeholder);opacity:1}
/* focus: the outline thickens to 2px ink, as the homepage search does */
.select:focus,.input:focus,.textarea:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* and keyboard focus adds the site's 3px red ring outside it */
.select:focus-visible,.input:focus-visible,.textarea:focus-visible{outline:3px solid var(--petrol);outline-offset:1px}
.form-grid{display:grid;gap:18px}
.form-grid .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.fld label{display:block;font-weight:700;margin-bottom:6px}
.fld label span{color:var(--muted);font-weight:500}
.fld .select{width:100%;height:48px}

/* ── Shared components ────────────────────────────────────────────────── */
/* empty states: listing, brands, quote, saved lists */
.empty{background:var(--white);border:1px dashed var(--line-strong);border-radius:var(--r);padding:48px 32px;text-align:center}
.empty strong{display:block;font-size:20px;margin-bottom:6px}
.empty p{color:var(--muted);max-width:29.12em;margin:0 auto!important}
.empty .btn{margin-top:20px}

/* ticked lists: sign in, the product page's "Before you order" */
.checks{list-style:none;margin:34px 0 0;padding:0;border-top:1px solid var(--line)}
.checks li{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:16px 0;border-bottom:1px solid var(--line)}
.checks li span:not(.tick){grid-column:2}
/* one tick for every checklist: white on a solid red square, as on the homepage and the part page */
.checks .tick{grid-row:span 2;width:24px;height:24px;border-radius:var(--r);background:var(--petrol);display:grid;place-items:center;margin-top:1px}
.checks .tick svg{width:12px;height:12px;color:var(--white)}
.checks strong{font-weight:700}
.checks span{color:var(--muted)}

/* ── Banner and messages ──────────────────────────────────────────────── */
/* the PIM's broadcast banner: info ink, warning the banner grey with a red
   edge, critical the alert red. Each is told apart by more than its hue. */
.banner{background:var(--ink);color:var(--white);text-align:center;font-size:var(--fs-ui);font-weight:700;line-height:1.4;padding:10px var(--gutter)}
.banner.warning{background:var(--banner);color:var(--ink);box-shadow:inset 0 -3px 0 var(--petrol)}
.banner.critical{background:var(--alert);color:var(--white)}
.flash{padding-block:20px;display:grid;gap:8px}
.flash p{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:var(--r);background:var(--white);font-weight:600}
/* a long unbroken line in a message (a pasted part number asked about) wraps, never widens the page */
.flash p > span{min-width:0;overflow-wrap:anywhere}
.flash p.error{border-color:color-mix(in srgb,var(--alert) 28%,var(--white));border-left-color:var(--alert);background:var(--alert-bg);color:var(--alert)}
/* "View quote" after an add-to-quote message: inline in the sentence, its hit area 44px tall */
.flash .tlink{padding-block:12px;white-space:nowrap}
.flash p.error::before{content:"!";flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:var(--r);background:var(--alert);color:var(--white);font-weight:800;font-size:14px;line-height:1}

/* ── Header ───────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:40;background:var(--white);border-bottom:1px solid var(--line)}
.hdr-row{display:flex;align-items:center;gap:36px;height:var(--head-h)}
/* the link carries the 44px hit area; the logo keeps its own size */
.logo{display:flex;align-items:center;min-height:44px;flex:none;text-decoration:none}
.logo img{width:auto;height:56px}
.nav{display:flex;align-self:stretch;gap:2px}
.nav > a,.nav > button{display:flex;align-items:center;gap:7px;padding:0 13px;border:0;border-block:3px solid transparent;background:none;font:inherit;font-weight:600;font-size:var(--fs-body);color:var(--ink);text-decoration:none;white-space:nowrap;cursor:pointer}
.nav > a:hover,.nav > button:hover{border-bottom-color:var(--line-strong)}
.nav > a[aria-current="page"]{border-bottom-color:var(--accent-ink)}
.nav > [aria-expanded="true"]{border-bottom-color:var(--accent-ink);background:var(--sage-light)}
.nav > :focus-visible{outline-offset:-3px}
.nav svg{width:11px;height:11px;transition:transform .2s}
.nav > [aria-expanded="true"] svg{transform:rotate(180deg)}
.tools{margin-left:auto;display:flex;align-items:center;gap:20px;flex:none}
.tel{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-weight:700;white-space:nowrap;text-decoration:none}
.tel svg{width:18px;height:18px;color:var(--petrol)}
.tel:hover span{text-decoration:underline;text-underline-offset:5px}
.signin{display:flex;align-items:center;min-height:44px;font-weight:600;text-decoration:none;white-space:nowrap}
.signin .linkish{min-height:44px;font-weight:600}
a.signin:hover,.signin .linkish:hover{text-decoration:underline;text-underline-offset:5px}
.basket{display:flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 16px;background:var(--petrol);color:var(--white);border-radius:var(--r);font-weight:700;text-decoration:none;white-space:nowrap}
.basket:hover{background:var(--cta-hover)}
.basket svg{width:16px;height:16px}
.basket b{min-width:28px;height:28px;padding:0 6px;display:grid;place-items:center;background:var(--count-bg);color:var(--count-fg);font-size:var(--fs-sm);font-weight:800;border-radius:var(--r)}
/* a link to All departments without JS (base.html), a button with it: both render the same */
.menu-btn{display:none;width:44px;height:44px;flex:none;place-items:center;padding:0;border:1px solid var(--line);background:var(--white);border-radius:var(--r);color:var(--ink);text-decoration:none;cursor:pointer}
.menu-btn svg{width:20px;height:20px}
.menu-btn .ic-close{display:none}
.menu-btn[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.menu-btn[aria-expanded="true"] .ic-menu{display:none}
.menu-btn[aria-expanded="true"] .ic-close{display:block}

/* header search: inner pages only (the homepage has its search slab) */
.hsearch{position:relative;flex:1 1 auto;min-width:0;max-width:520px}
.hsearch form{position:relative;display:flex}
.hsearch input{flex:1;min-width:0;height:44px;margin:0;padding:0 14px;border:1px solid var(--field-line);border-right:0;border-radius:var(--r) 0 0 var(--r);background:var(--white);font:inherit;font-size:var(--fs-body);font-weight:500;color:var(--ink);-webkit-appearance:none;appearance:none}
.hsearch input::placeholder{color:var(--placeholder);opacity:1}
/* one clear button only: the field's own (below), not the browser's */
.hsearch input::-webkit-search-cancel-button{display:none;-webkit-appearance:none}
.hsearch input:focus{outline:none;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.hsearch input:focus-visible{outline:3px solid var(--petrol);outline-offset:1px}
.hsearch button{flex:none;display:grid;place-items:center;width:48px;height:44px;padding:0;border:0;border-radius:0 var(--r) var(--r) 0;background:var(--slab-btn-bg);color:var(--slab-btn-fg);cursor:pointer}
.hsearch button:hover{background:var(--slab-btn-hover)}
.hsearch button svg{width:18px;height:18px}
/* Clear search (x): 44px square inside the field's right edge, beside the Search button, shown
   only while the field holds text (an empty field shows its placeholder) and only with JS
   (x-cloak); the text stops short of it once Alpine has marked the field .has-clear, so without JS
   it keeps the full width. Transparent, so the field's border and focus outline show through; its
   own ring is inset. */
.hsearch input.has-clear:not(:placeholder-shown){padding-right:46px}
.hsearch .field-clear{position:absolute;top:0;right:48px;width:44px;border-radius:var(--r);background:none;color:var(--muted)}
.hsearch input:placeholder-shown + .field-clear{display:none}
.hsearch .field-clear:hover{background:none;color:var(--ink)}
.hsearch .field-clear:focus-visible{outline-offset:-3px}
.hsearch .field-clear svg{width:16px;height:16px}
/* suggestions (the header search and the homepage search share them) */
.suggest{position:absolute;left:0;top:calc(100% + 4px);z-index:45;width:max(100%,400px);max-width:calc(100vw - 2 * var(--gutter))}
/* in the sticky header the page cannot scroll the list into reach, so it ends above the screen's
   bottom edge and scrolls itself (--search-row is the phone header's second row, 0 elsewhere) */
.hdr .suggest{max-height:calc(100vh - var(--head-h) - var(--search-row) - 8px);max-height:calc(100dvh - var(--head-h) - var(--search-row) - 8px);overflow-y:auto;overscroll-behavior:contain}
.suggest-box{background:var(--white);border:1px solid var(--line-strong);border-bottom:var(--rule-heavy);border-radius:var(--r);overflow:hidden;color:var(--ink);text-align:left;font-size:var(--fs-body)}
.suggest-box ul{list-style:none;margin:0;padding:4px 0}
.suggest-box li a{display:flex;align-items:center;gap:12px;min-height:56px;padding:6px 14px;text-decoration:none}
.suggest-box li a:hover,.suggest-box li a:focus-visible{background:var(--sage-light)}
.suggest-box li a:focus-visible{outline-offset:-3px}
.suggest-box .thumb{width:44px;height:44px;flex:none;background:var(--white);border:1px solid var(--line);overflow:hidden}
.suggest-box .thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.suggest-box .s-txt{min-width:0}
.suggest-box .s-sku{display:block;font-weight:800;color:var(--ink);font-size:var(--fs-ui)}
/* two lines, so rows that differ only late in the description (CAMRY, HILUX, AVANZA) can be told apart */
.suggest-box .s-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:13.5px;font-weight:500;letter-spacing:.02em;line-height:1.4;color:var(--muted);white-space:normal;overflow:hidden;overflow-wrap:anywhere}
.suggest-box .s-all{display:flex;align-items:center;min-height:48px;padding:10px 14px;border-top:1px solid var(--line);font-weight:700;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--accent-ink)}
.suggest-box .s-all:hover{background:var(--sage-light);text-decoration-color:currentColor}
.suggest-box .s-all:focus-visible{outline-offset:-3px}
.suggest-box .s-none{padding:14px;color:var(--muted)}
/* a query that is only a brand's name: its brand page, the list's first row */
.suggest-box .s-brand{border-top:0;border-bottom:1px solid var(--line)}

/* ── Department menu (desktop) and the phone menu: one panel ──────────── */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--white);border-bottom:var(--rule-heavy);max-height:calc(100vh - var(--head-h));overflow:auto;overscroll-behavior:contain}
.mega-in{padding-block:28px 32px}
.mega-nav{display:none}
.mega-top{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.site .mega-top h2{font-size:22px;letter-spacing:-.018em;line-height:1.2}
.mega-top .tlink{white-space:nowrap}
/* ruled grid: each cell draws its right and lower rule, so a short last row leaves no grey cells */
.depts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;overflow:hidden;border-bottom:1px solid var(--line)}
.dept{padding:16px 18px 18px;background:var(--white);box-shadow:1px 0 0 var(--line),0 1px 0 var(--line),1px 1px 0 var(--line)}
.dept > a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700;font-size:var(--fs-body);letter-spacing:-.01em;line-height:1.3;text-decoration:none}
.dept > a .cnt{flex:none;color:var(--muted);font-weight:600;font-size:var(--fs-sm)}
.dept > a:hover{color:var(--petrol)}
.dept ul{margin:8px 0 0;padding:0;list-style:none}
.dept li a{display:block;padding:3px 0;font-size:var(--fs-sm);line-height:1.35;color:var(--muted);text-decoration:none}
.dept li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* the menu's own links, shown when the header has folded its nav into the menu button */
.mega-nav{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));column-gap:32px;margin-bottom:20px}
.mega-nav form{margin:0}
.mega-nav a,.mega-nav button{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;min-height:52px;padding:0;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;font-weight:700;font-size:var(--fs-md);color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.mega-nav a:hover span,.mega-nav button:hover span{text-decoration:underline;text-decoration-color:var(--accent-ink);text-decoration-thickness:2px;text-underline-offset:5px}
.mega-nav svg{width:18px;height:18px;color:var(--petrol)}
.mega-nav :focus-visible{outline-offset:-3px}
body.menu-lock{overflow:hidden}

/* ── Footer ───────────────────────────────────────────────────────────── */
.foot{background:var(--ink-dark);color:var(--on-petrol-muted);padding-block:64px 28px;font-size:var(--fs-ui)}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
.foot .logo img{height:68px}
.foot .branch-name{display:block;margin-top:24px;color:var(--white);font-weight:700}
.foot address{margin-top:24px;font-style:normal;white-space:pre-line;line-height:1.55;color:var(--on-petrol)}
.foot .branch-name + address{margin-top:4px}
.foot .hours{margin-top:14px;white-space:pre-line}
.foot .contact{margin-top:14px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.foot .contact a{display:inline-flex;align-items:center;min-height:32px;font-weight:700;color:var(--white);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent-on-foot) 55%,transparent);text-decoration-thickness:2px;text-underline-offset:6px;overflow-wrap:anywhere}
.foot .contact a:hover{text-decoration-color:var(--accent-on-foot)}
.site .foot h2{margin:0 0 10px;padding-bottom:12px;border-bottom:2px solid var(--accent-on-foot);font-size:var(--fs-ui);line-height:1.5;letter-spacing:0;font-weight:800;color:var(--white)}
.foot ul{margin:0;padding:0;list-style:none}
.foot li a{display:inline-flex;align-items:center;min-height:34px;text-decoration:none}
.foot li a:hover,.legal a:hover{color:var(--white);text-decoration:underline;text-underline-offset:4px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:18px;border-top:1px solid var(--rule-dark);font-size:var(--fs-sm)}
.legal nav{display:flex;gap:22px}
.legal a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none}
/* the disclaimer: its own line under the copyright and the legal links (9:1 on the footer) */
.site .legal .f-small{flex-basis:100%;padding-top:4px;font-size:var(--fs-xs);line-height:1.5}

/* ── Page head: inner pages ───────────────────────────────────────────── */
.page-head{background:var(--sage-light);border-bottom:1px solid var(--line)}
.page-head .wrap{padding-block:28px 32px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;margin:0 0 14px;padding:0;list-style:none;font-size:var(--fs-sm);color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:8px;min-width:0;min-height:28px}
/* the separator follows each item but the last, so a trail that wraps never starts a line with it */
.crumbs li:not(:last-child)::after{content:"/";color:var(--field-line)}
.crumbs a{display:inline-flex;align-items:center;min-height:28px;font-weight:600;text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.site .page-head h1{font-size:clamp(32px,3.6vw,52px);letter-spacing:var(--track-tight);line-height:1.02;padding-bottom:18px;border-bottom:var(--rule-heavy);overflow-wrap:break-word}
.page-head .sub{margin-top:14px;color:var(--muted);font-size:var(--fs-md);max-width:35.84em}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 14px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--white);font-weight:700;font-size:var(--fs-ui);text-decoration:none}
.chip span{color:var(--muted);font-weight:600}
a.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.chip.on span{color:var(--on-petrol-muted)}
.page-body{padding-top:40px;padding-bottom:96px}

/* ════════════════════════════════════════════════════════════════════════
   Responsive. Breakpoints follow the mockup: 1340 (inner pages fold the
   nav), 1240, 1100, 900 (the menu button), 760 (phones), 480, 360.
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width:1341px){
  /* room to spare beside the nav and search: the logo a size up */
  .hdr .logo img{height:64px}
}
@media (max-width:1340px){
  /* inner pages: the header search takes the nav's room, the nav moves into the menu */
  .with-search .nav{display:none}
  .with-search .menu-btn{display:grid}
  .with-search .mega-nav{display:grid}
  .with-search .hdr-row{gap:28px}
}
@media (max-width:1240px){
  .hdr-row{gap:28px}
  .tools{gap:14px}
  .tel{width:44px}
  .tel span{display:none}
}
@media (max-width:1100px){
  :root{--head-h:68px}
  .hdr-row,.with-search .hdr-row{gap:22px}
  .logo img{height:52px}
  .nav > a,.nav > button{padding:0 10px;font-size:var(--fs-ui)}
  .tools{font-size:var(--fs-ui)}
  .dept{padding:14px 14px 16px}
  .dept > a{font-size:var(--fs-ui)}
  .dept > a .cnt{font-size:13px}
  .dept li a{font-size:13.5px}
  .f-grid{gap:32px 28px}
}
@media (max-width:900px){
  .nav,.signin{display:none}
  .menu-btn{display:grid}
  .mega-nav{display:grid}
  .hdr-row,.with-search .hdr-row{gap:12px}
  .logo{margin-right:auto}
  .with-search .logo{margin-right:0}
  .tools{margin-left:0;gap:8px}
  .tel{border:1px solid var(--line);border-radius:var(--r)}
  .mega-in,.with-search .mega-in{padding-block:8px 24px}
  .depts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f-brand{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:28px;align-items:start}
  .f-brand .logo{grid-column:1 / -1}
  .f-brand > :not(.logo){margin-top:24px}
}
@media (max-width:760px){
  :root{--gutter:16px;--sec:56px;--head-h:60px;--fs-h2:clamp(30px,8.6vw,36px)}
  :root:has(.hdr.with-search){--search-row:54px}
  .hdr-row,.with-search .hdr-row{gap:8px}
  .logo img{height:46px}
  .basket{padding:0 6px 0 12px;gap:8px}
  /* inner pages: the search drops to its own row under the logo row */
  .with-search .hdr-row{flex-wrap:wrap;height:auto;padding-block:7px 10px;row-gap:7px}
  .with-search .logo{margin-right:auto}
  .with-search .hsearch{order:5;flex:1 0 100%;max-width:none}
  .suggest{width:100%;max-width:none}
  .mega{max-height:calc(100dvh - var(--head-h) - var(--search-row))}
  .site .mega-top h2{font-size:20px}
  .mega-top{flex-wrap:wrap;align-items:center;row-gap:0}
  .mega-top .tlink{display:inline-flex;align-items:center;min-height:44px}
  .depts{grid-template-columns:minmax(0,1fr)}
  .dept{padding:0}
  .dept > a{min-height:48px;align-items:center}
  .dept ul{display:none}

  .btn-sm{min-height:44px}
  .select{height:48px}
  .form-grid .two{grid-template-columns:1fr}

  .foot{padding-top:48px}
  .f-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .f-brand{display:block}
  .f-grid > :last-child{grid-column:1 / -1}
  .foot li a,.legal a,.foot .contact a{min-height:44px}
  .foot li a,.legal a{min-width:44px}
  .legal{flex-direction:column;align-items:flex-start;gap:4px}

  .page-head .wrap{padding-block:16px 24px}
  .crumbs{margin-bottom:10px}
  .crumbs li,.crumbs a{min-height:44px}
  /* a 44px tap target without widening the link: a short "Home" keeps the same gap as the rest */
  .crumbs a{position:relative}
  .crumbs a::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
  .page-head .sub{font-size:var(--fs-body)}
  .chip{min-height:44px}
  .page-body{padding-top:24px;padding-bottom:64px}
}
@media (max-width:480px){
  .basket span{display:none}
  /* suggestions: a smaller thumbnail leaves the two description lines more of the row */
  .suggest-box li a{gap:10px;padding-inline:10px}
  .suggest-box .thumb{width:40px;height:40px}
}
@media (max-width:360px){
  .hdr-row,.with-search .hdr-row{gap:6px}
  .tools{gap:6px}
  .logo img{height:40px}
  .basket{padding:0 6px 0 10px;gap:6px}
  /* the Trade column gets the wider share, for "Apply for a trade account" and "Export enquiries" */
  .f-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
}