/* =====================================================================
   SweeperParts.au — Single Source Stylesheet
   Industrial. Technical. Confident.
   Dark default · Light theme via [data-theme="light"]
   See UI_UPDATE_PLAN.md and the in-repo style guide for the source of truth.
   ===================================================================== */

/* ---- 1. Tokens ------------------------------------------------------ */
:root {
  /* Brand */
  --sp-orange:        #FF6A1A;
  --sp-orange-deep:   #E25610;
  --sp-orange-soft:   #FF8A42;
  --sp-orange-tint:   #FFE9DA;

  /* Ink — dark stack */
  --sp-ink-900:       #0E1012;
  --sp-ink-800:       #15181B;
  --sp-ink-700:       #1C2024;
  --sp-ink-600:       #2A2F35;
  --sp-ink-500:       #3A4048;
  --sp-ink-400:       #5A5F66;
  --sp-ink-300:       #8A8F96;
  --sp-ink-200:       #C9C3B6;

  /* Cream — light stack */
  --sp-cream-100:     #EAE5DC;
  --sp-cream-50:      #F5F2ED;
  --sp-white:         #FFFFFF;

  /* Status — only ever for product/stock state, never decorative */
  --sp-success:       #2FB26B;
  --sp-warn:          #F5B400;
  --sp-danger:        #E0432B;

  /* Semantic — DARK is the default */
  --bg:               var(--sp-ink-900);
  --bg-surface:       var(--sp-ink-800);
  --bg-raised:        var(--sp-ink-700);
  --line:             var(--sp-ink-600);
  --line-strong:      var(--sp-ink-500);
  --fg:               var(--sp-cream-50);
  --fg-muted:         var(--sp-ink-300);
  --fg-subtle:        var(--sp-ink-400);
  --accent:           var(--sp-orange);
  --accent-hover:     var(--sp-orange-soft);
  --on-accent:        var(--sp-ink-900);

  /* Aliases retained for legacy templates — DO NOT introduce new use */
  --color-bg:         var(--bg);
  --color-surface:    var(--bg-surface);
  --color-surface-alt:var(--bg-raised);
  --color-border:     var(--line);
  --color-border-light:var(--line);
  --color-text:       var(--fg);
  --color-text-muted: var(--fg-muted);
  --color-text-light: var(--fg-subtle);
  --color-accent:     var(--accent);
  --color-accent-dark:var(--sp-orange-deep);
  --color-accent-light:var(--sp-orange-soft);
  --color-danger:     var(--sp-danger);
  --color-success:    var(--sp-success);
  --color-warning:    var(--sp-warn);

  /* Type families */
  --font-display:     "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  --font-body:        "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:        "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radii — squared and industrial; no pills */
  --r-0:              0px;
  --r-1:              2px;
  --r-2:              4px;
  --r-3:              6px;

  /* Spacing — 4 px base */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-8: 32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;  --s-20: 80px; --s-24: 96px;

  /* Containers */
  --container:        1280px;
  --container-tight:  960px;
  --gutter:           32px;

  /* Motion */
  --ease-out:         cubic-bezier(.2,.7,.2,1);
  --dur-fast:         140ms;
  --dur-base:         220ms;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:               var(--sp-cream-50);
  --bg-surface:       var(--sp-cream-100);
  --bg-raised:        var(--sp-white);
  --line:             rgba(14,16,18,0.12);
  --line-strong:      rgba(14,16,18,0.22);
  --fg:               var(--sp-ink-900);
  --fg-muted:         #4A4F55;
  --fg-subtle:        #6B7079;
  --accent:           var(--sp-orange-deep);
  --accent-hover:     var(--sp-orange);
  --on-accent:        var(--sp-cream-50);
  color-scheme: light;
}

/* ---- 2. Reset & base ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-size: 16px;
  line-height: 1.55;
  min-height: 100vh;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast); }
a:hover { color: var(--accent-hover); }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
p { margin: 0 0 var(--s-3); }
ul, ol { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
ul.bare, ol.bare { list-style: none; padding-left: 0; }

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}

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

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

/* ---- 3. Type ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  margin: 0 0 var(--s-3);
  color: var(--fg);
}
h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.01em; line-height: 0.95; }
h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 800; line-height: 0.95; }
h3 { font-size: clamp(24px, 2.6vw, 36px); }
h4 { font-size: 20px; letter-spacing: 0; }
h5 { font-size: 16px; letter-spacing: 0; }
h6 { font-size: 13px; }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: -0.01em;
}
.display-xl { font-size: clamp(56px, 9vw, 132px); }
.display-l  { font-size: clamp(48px, 7vw, 96px); }
.display-m  { font-size: clamp(36px, 5vw, 64px); font-weight: 700; }
.display-s  { font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.05; letter-spacing: 0; }

.lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg);
  max-width: 70ch;
}
.lede-muted { color: var(--fg-muted); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--accent);
  display: inline-block;
}
.eyebrow.no-rule::before { display: none; }

.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.mono-sm { font-size: 11px; letter-spacing: 0.18em; }

.muted   { color: var(--fg-muted); }
.subtle  { color: var(--fg-subtle); }
.accent  { color: var(--accent); }
.text-sm { font-size: 13px; }
.text-xs { font-size: 12px; }

/* Heading size utilities — use to override semantic h-level sizing */
.h1 { font-size: clamp(40px, 6vw, 72px); font-weight: 800; letter-spacing: -0.01em; line-height: 0.95; }
.h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 800; line-height: 0.95; }
.h3 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 700; }
.h4 { font-size: 20px; font-weight: 700; letter-spacing: 0; }
.h5 { font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.h6 { font-size: 13px; }

.about-page-subtitle { color: var(--fg-muted); font-size: 18px; line-height: 1.55; margin: 0 0 var(--s-6); max-width: 70ch; }

/* One orange word in a display headline */
.display em, .display .em,
h1 em, h2 em {
  font-style: normal;
  color: var(--accent);
}

/* ---- 4. Layout ----------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-tight {
  width: 100%;
  max-width: var(--container-tight);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* Wide variant for visual grids (home brand tiles, most-ordered carousels). */
/* Cap at 1520px so 5 cards × ~280px + gaps fit comfortably on wide screens. */
.container-wide {
  width: 100%;
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 600px) {
  .container, .container-tight, .container-wide { padding: 0 var(--s-5); }
}

.stack > * + * { margin-top: var(--s-4); }
.stack-sm > * + * { margin-top: var(--s-2); }
.stack-lg > * + * { margin-top: var(--s-6); }

.grid { display: grid; gap: var(--s-6); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid.cols-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) {
  .grid.cols-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5, .grid.cols-6 { grid-template-columns: 1fr; }
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 800px) { .split { grid-template-columns: 1fr; } }

.grid-detail-sidebar {
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-8);
}
@media (max-width: 900px) { .grid-detail-sidebar { grid-template-columns: 1fr; } }

section {
  padding: var(--s-20) 0 var(--s-12);
}
section.bordered { border-top: 1px solid var(--line); }

.section-meta--center { justify-content: center; }

.page-narrow         { max-width: 800px; margin: 0 auto; padding: var(--s-12) var(--gutter); }
.page-extra-narrow   { max-width: 640px; margin: 0 auto; padding: var(--s-12) var(--gutter); }
.page-wide           { max-width: var(--container); margin: 0 auto; padding: var(--s-12) var(--gutter); }

.static-page         { padding: var(--s-12) 0; }
.static-page h1      { margin-bottom: var(--s-6); }
.static-page .lede   { margin-bottom: var(--s-8); color: var(--fg-muted); }
.static-page p       { color: var(--fg); font-size: 16px; line-height: 1.65; max-width: 70ch; }
.static-page ul, .static-page ol { color: var(--fg); font-size: 16px; line-height: 1.65; max-width: 70ch; }
.static-page strong  { color: var(--fg); font-weight: 600; }

/* ---- 5. Site chrome ------------------------------------------------- */
/* Top-bar removed 2026-05-24 — brand identity now lives in the hero (home) and the */
/* left-nav rail handles desktop navigation. A floating hamburger remains mobile-only. */

.nav-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-surface);
  color: var(--fg);
  flex-direction: column;
  gap: 4px;
}
/* Floating placement so a removed top-bar doesn't strand mobile users without a nav opener. */
.nav-toggle--floating {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 70;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.nav-toggle .bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--fg);
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Left side navigation drawer */
.left-nav {
  position: fixed;
  top: 0;
  left: 0;
  /* Cap at 320px but always leave ~40px peek of the underlying page on very
     narrow viewports (320px iPhone SE 1st-gen, foldable edge screens) so the
     drawer doesn't fill 100% width and look like a navigation, not an overlay.
     Desktop (≥901px) overrides this below to the 56→320px hover rail. */
  width: min(320px, calc(100vw - 40px));
  max-width: 320px;
  height: 100vh;
  background: var(--bg-surface);
  border-right: 1px solid var(--line);
  z-index: 60;
  transform: translateX(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  overflow-y: auto;
}
.left-nav.is-open { transform: translateX(0); }
.left-nav__inner { padding: var(--s-5) var(--s-5) var(--s-12); }
/* Clickable home logo — sized to fit the collapsed 112px rail without overflow, */
/* expands naturally inside the open 320px drawer. */
.left-nav__home {
  display: block;
  margin-bottom: var(--s-5);
  line-height: 0;
}
.left-nav__logo {
  width: 100%;
  max-width: 72px;
  height: auto;
  display: block;
}
.left-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-6);
}
.left-nav__brand .icon { width: 18px; height: 18px; }
.left-nav__content { display: flex; flex-direction: column; gap: var(--s-6); }
.left-nav__section .nav-heading {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}
.left-nav .nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.left-nav .nav-list a {
  display: block;
  padding: var(--s-2) 0;
  color: var(--fg);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.left-nav .nav-list a:hover { color: var(--accent); border-bottom-color: var(--line); }
.left-nav .search-section input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
}
.left-nav .search-section input:focus { border-color: var(--accent); }

.left-nav__account .account-links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.left-nav__account .account-links a,
.left-nav__account .account-links button,
.left-nav__account .account-links form button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.left-nav__account .account-links a:hover,
.left-nav__account .account-links button:hover { color: var(--accent); }
.left-nav__account .inline-form { display: contents; }
.left-nav__account .link-btn { background: none; border: 0; padding: var(--s-2) 0; }

/* Nav overlay (mobile) */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 55;
  opacity: 0;
  transition: opacity var(--dur-base);
}
.nav-overlay.is-active { opacity: 1; }
/* Body scroll-lock only applies to mobile drawer; desktop rail expands on hover without locking scroll. */
@media (max-width: 900px) {
  body.nav-open { overflow: hidden; }
}

/* Desktop: turn the left-nav drawer into a permanent peek rail that expands on hover. */
@media (min-width: 901px) {
  /* Hamburger is mobile-only — desktop uses the hover-rail instead. */
  .nav-toggle { display: none; }

  /* The 112px left-nav and 112px side-cart are position:fixed and would */
  /* otherwise overlap content wrappers. Replace the default 32px gutter on */
  /* content wrappers with 112px so .container (and its siblings) sit fully */
  /* in the clear strip between the rails — required for cols-5 to be visible. */
  /* Full-bleed bands like .hero and .marquee keep their edge-to-edge */
  /* backgrounds because only the inner wrappers are padded. */
  .container,
  .hero-inner,
  .make-hero-inner,
  .hire-hero-inner,
  .search-results-hero-inner,
  .announcement-banner__inner,
  .messages-container { padding-left: 112px; padding-right: 112px; }

  /* Opt-in wide variant for home page grid sections. Uses only 16px side */
  /* padding so 5-up grids (brand tiles, most-ordered carousels) at ~280px */
  /* per card can fit. Outer cards' edges sit under the 112px peek rails — */
  /* acceptable here because the cards are visual tiles, not dense text. */
  .container-wide { padding-left: 16px; padding-right: 16px; }

  .left-nav {
    transform: none;
    /* Collapsed rail width — doubled from the original 56px so the brand glyph */
    /* and account icons read clearly without hovering. */
    width: 112px;
    overflow-x: hidden;
    transition: width var(--dur-base) var(--ease-out);
  }
  .left-nav:hover,
  .left-nav:focus-within,
  .left-nav.is-open {
    width: 320px;
  }
  /* Keep the inner panel at full width so menu items don't reflow as the rail expands. */
  .left-nav__inner {
    width: 320px;
    box-sizing: border-box;
  }
  /* Brand icon sits in the visible 56px strip when collapsed. */
  .left-nav__brand { margin-bottom: var(--s-6); }
  /* Fade the menu body so the collapsed rail looks clean — only the brand glyph shows. */
  .left-nav__content {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-out);
  }
  .left-nav:hover .left-nav__content,
  .left-nav:focus-within .left-nav__content,
  .left-nav.is-open .left-nav__content {
    opacity: 1;
    pointer-events: auto;
  }
}

.theme-toggle {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--bg-raised);
  color: var(--fg);
  cursor: pointer;
  font-size: 16px;
  margin-top: var(--s-3);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-icon { line-height: 1; }

/* Side cart — full-height on desktop (rail anchored top-to-bottom of viewport). */
/* Collapsed peek doubled from 56px → 112px so the cart glyph + count badge read */
/* without hovering, matching the wider left-nav rail. */
.side-cart {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  transform: translateX(calc(100% - 112px));
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-right: none;
  z-index: 45;
  transition: transform var(--dur-base) var(--ease-out);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.side-cart.is-open,
.side-cart:hover,
.side-cart:focus-within { transform: translateX(0); }
.side-cart__inner { display: flex; flex-direction: column; height: 100%; }
.side-cart__brand {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.cart-icon-wrapper { position: relative; }
.cart-icon-wrapper .icon { width: 22px; height: 22px; }
.count-badge {
  position: absolute;
  top: -8px;
  right: -10px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.side-cart__thumbnails {
  display: flex;
  gap: var(--s-1);
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.thumb-preview img,
.thumb-preview .thumb-placeholder {
  width: 40px;
  height: 40px;
  object-fit: cover;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.side-cart__menu {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  min-width: 320px;
}
.cart-header {
  display: grid;
  grid-template-columns: 2fr 60px 80px 24px;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.cart-item-wrapper { border-bottom: 1px solid var(--line); }
.cart-item {
  display: grid;
  grid-template-columns: 40px 1fr 60px 80px 24px;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  align-items: center;
}
.cart-item-thumb,
.cart-item-thumb-placeholder {
  width: 40px;
  height: 40px;
  object-fit: cover;
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
.cart-item__details { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cart-item__name {
  font-size: 13px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cart-item__sku {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.cart-item__qty { text-align: center; font-family: var(--font-mono); }
.cart-item__price { font-family: var(--font-mono); font-size: 13px; color: var(--fg); text-align: right; }
.cart-item__remove { color: var(--fg-muted); padding: 0; }
.cart-item__remove:hover { color: var(--sp-danger); }
.side-cart__footer {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
}
.side-cart__empty { padding: var(--s-6) var(--s-4); color: var(--fg-muted); text-align: center; font-size: 13px; }

@media (max-width: 900px) {
  .side-cart { display: none; }
}

/* Footer */
.site-footer {
  border-top: 4px solid var(--accent);
  background: var(--bg-surface);
  padding: var(--s-16) 0 var(--s-10);
  margin-top: var(--s-20);
}
.footer-columns {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: var(--s-10);
}
.site-footer h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--s-3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.site-footer a { color: var(--fg-muted); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--accent); }
.footer-meta { color: var(--fg-subtle); font-size: 13px; }
.footer-meta p { margin: 0 0 var(--s-2); }
.footer-credit a { color: var(--fg-muted); }
.footer-credit a:hover { color: var(--accent); }
.hidden-seo-link { position: absolute; left: -10000px; }

@media (max-width: 900px) {
  .footer-columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer-columns { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* Announcement banner + messages */
.announcement-banner {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--line);
}
.announcement-banner.is-hidden { display: none; }
.announcement-banner__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.announcement-banner__icon { font-size: 18px; }
.announcement-banner__text {
  margin: 0;
  font-size: 14px;
  color: var(--fg);
  flex: 1;
}
.announcement-banner__link { color: var(--accent); text-decoration: underline; }
.announcement-banner__close {
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 4px 8px;
  color: var(--fg-muted);
  font-size: 12px;
  cursor: pointer;
}
.announcement-banner__close:hover { color: var(--accent); border-color: var(--accent); }

.messages-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-3) var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.alert {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-strong);
  background: var(--bg-surface);
  border-radius: var(--r-2);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.alert-success, .alert-info { border-color: var(--sp-success); color: var(--sp-success); }
.alert-warning              { border-color: var(--sp-warn); color: var(--sp-warn); }
.alert-error, .alert-danger { border-color: var(--sp-danger); color: var(--sp-danger); }

/* ---- 6. Components ------------------------------------------------- */

/* 6.1 Buttons */
.btn,
.btn-primary,
.btn-secondary,
.btn-large,
.btn-checkout,
.btn-stripe,
.btn-on-account,
.btn-submit-on-account,
.btn-add-to-cart,
.btn-generate,
.btn-search-main,
.btn-view-all,
.btn-view-details,
.btn-update,
.btn-remove,
.btn-clear-search,
.btn-continue,
.btn-login,
.btn-large-cta,
.btn-clear-filters-horizontal,
.btn-all-products-horizontal,
.btn-browse,
.btn-copy,
.btn-edit-snippet,
.btn-success,
.btn-danger,
.btn-outline,
.btn-outline-primary,
.btn-download-catalogue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 14px 22px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-3);
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover, .btn-primary:hover, .btn-large:hover, .btn-checkout:hover,
.btn-stripe:hover, .btn-on-account:hover, .btn-add-to-cart:hover,
.btn-generate:hover, .btn-search-main:hover, .btn-view-all:hover,
.btn-view-details:hover, .btn-update:hover, .btn-remove:hover,
.btn-clear-search:hover, .btn-continue:hover, .btn-login:hover,
.btn-large-cta:hover, .btn-download-catalogue:hover { background: var(--accent-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn .arr,
.btn-primary .arr { transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .arr,
.btn-primary:hover .arr { transform: translateX(3px); }

.btn-secondary,
.btn-outline,
.btn-outline-primary {
  background: transparent;
  color: var(--fg);
  border-color: var(--line-strong);
}
.btn-secondary:hover,
.btn-outline:hover,
.btn-outline-primary:hover {
  background: var(--bg-surface);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-ghost,
.cta-secondary {
  background: transparent;
  color: var(--fg-muted);
  border-color: transparent;
  padding: 10px 14px;
  min-height: 44px;
}
.btn-ghost:hover,
.cta-secondary:hover { color: var(--accent); background: var(--bg-surface); }
.btn-ghost.danger-link { color: var(--sp-danger); }
.btn-ghost.danger-link:hover { color: var(--sp-cream-50); background: var(--sp-danger); }

.btn-success { background: var(--sp-success); color: var(--sp-ink-900); border-color: var(--sp-success); }
.btn-success:hover { background: color-mix(in oklab, var(--sp-success) 80%, white); }
.btn-danger  { background: var(--sp-danger); color: var(--sp-cream-50); border-color: var(--sp-danger); }
.btn-danger:hover { background: color-mix(in oklab, var(--sp-danger) 80%, black); }

.btn-sm  { padding: 9px 14px; min-height: 36px; font-size: 11px; }
.btn-lg, .btn-large, .btn-large-cta { padding: 18px 28px; font-size: 13px; }
.btn-block { width: 100%; }

.cta,
.cta-button-group .cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 22px;
  min-height: 44px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r-3);
  text-decoration: none;
  border: 1px solid var(--accent);
}
.cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.cta-buttons,
.cta-button-group,
.button-group {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* 6.2 Forms */
.field, .form-group {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.field label,
.form-group label,
.form-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.field input,
.field select,
.field textarea,
.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea,
.form-input,
input[type="text"]:not(.no-style),
input[type="email"]:not(.no-style),
input[type="password"]:not(.no-style),
input[type="tel"]:not(.no-style),
input[type="number"]:not(.no-style),
input[type="search"]:not(.no-style),
input[type="date"]:not(.no-style),
input[type="url"]:not(.no-style),
select:not(.no-style),
textarea:not(.no-style) {
  font-family: var(--font-body);
  /* 16px minimum prevents iOS Safari from auto-zooming on focus. */
  font-size: 16px;
  padding: 12px 14px;
  background: var(--bg-raised);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  width: 100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus,
.form-input:focus,
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
textarea { min-height: 120px; resize: vertical; }
.field .hint,
.form-help,
.field-help { font-size: 12px; color: var(--fg-subtle); }
.field-error,
.has-error { color: var(--sp-danger); font-size: 12px; }
.is-invalid input,
.is-invalid select,
.is-invalid textarea,
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--sp-danger);
}
.required::after { content: " *"; color: var(--sp-danger); }

.form-row,
.form-row-split,
.form-row-two-col {
  display: grid;
  gap: var(--s-4);
}
.form-row,
.form-row-split  { grid-template-columns: 1fr 1fr; }
.form-row-two-col { grid-template-columns: 1fr 1fr; }
/* Collapse split rows at 768px (iPad mini portrait) so each field gets full
   width on touch-first viewports — pre-bump this kicked in at 600px and left
   inputs awkwardly narrow on small tablets. */
@media (max-width: 768px) {
  .form-row, .form-row-split, .form-row-two-col { grid-template-columns: 1fr; }
}

.form-section {
  border: 1px solid var(--line);
  background: var(--bg-surface);
  padding: var(--s-6);
  margin-bottom: var(--s-6);
}
.form-section h3,
.form-section h4 {
  margin-top: 0;
  margin-bottom: var(--s-4);
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}
.checkbox-row,
.radio-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: 14px;
}

/* 6.3 Cards */
.card,
.cta-card,
.contact-box,
.tip-card,
.kit-card,
.study,
.type-card,
.testimonial-card,
.order-card,
.quick-action-card,
.stat-card,
.truck-card,
.booking-card,
.dashboard-stat,
.faq-section,
.account-info-item,
.dashboard-section {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-0);
  padding: var(--s-5) var(--s-6);
  transition: border-color var(--dur-fast), transform var(--dur-fast);
}
.card-hover:hover,
a.card:hover,
a .card:hover,
.type-card:hover,
.kit-card:hover,
.tip-card:hover,
.quick-action-card:hover,
.truck-card:hover {
  border-color: var(--accent);
}
.card-header,
.card-body { padding: 0; }

/* 6.4 Badges */
.badge,
.status-badge,
.verified-badge,
.unverified-badge,
.quick-ship,
.xref-badge,
.category-tag,
.featured-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-radius: var(--r-1);
  white-space: nowrap;
}
.badge::before,
.quick-ship::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  display: inline-block;
}
.badge.solid,
.badge-primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.badge.solid::before { background: var(--on-accent); }

.badge-success,
.verified-badge,
.quick-ship { color: var(--sp-success); border-color: var(--sp-success); }
.badge-success::before,
.quick-ship::before,
.verified-badge::before { background: var(--sp-success); }

.badge-warning { color: var(--sp-warn); border-color: var(--sp-warn); }
.badge-warning::before { background: var(--sp-warn); }

.badge-danger,
.unverified-badge { color: var(--sp-danger); border-color: var(--sp-danger); }
.badge-danger::before,
.unverified-badge::before { background: var(--sp-danger); }

.badge-google    { color: #4285F4; border-color: #4285F4; }
.badge-facebook  { color: #1877F2; border-color: #1877F2; }
.badge-linkedin  { color: #0A66C2; border-color: #0A66C2; }

.status-badge--pending   { color: var(--sp-warn); border-color: var(--sp-warn); }
.status-badge--paid,
.status-badge--complete,
.status-badge--shipped,
.status-badge--delivered { color: var(--sp-success); border-color: var(--sp-success); }
.status-badge--cancelled,
.status-badge--refunded  { color: var(--sp-danger); border-color: var(--sp-danger); }
.status-badge--processing { color: var(--accent); border-color: var(--accent); }

/* 6.5 Metric / stat panels */
.metric,
.stat-card,
.dashboard-stat {
  position: relative;
  padding: var(--s-5) var(--s-6);
}
.metric::before,
.stat-card::before,
.dashboard-stat::before,
.metric::after,
.stat-card::after,
.dashboard-stat::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.metric::before,
.stat-card::before,
.dashboard-stat::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.metric::after,
.stat-card::after,
.dashboard-stat::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }

.metric .k,
.stat-card .k,
.stat-card__label,
.dashboard-stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin: 0 0 var(--s-2);
}
.metric .v,
.stat-card .v,
.stat-card__value,
.dashboard-stat__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 6vw, 72px);
  line-height: 1;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0;
}
.metric .v small,
.stat-card .v small {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  letter-spacing: 0.12em;
}

/* 6.6 Imagery placeholder */
.imgph {
  aspect-ratio: 16 / 9;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--fg) 6%, transparent) 0 14px,
      transparent 14px 28px),
    var(--bg-surface);
  border: 1px dashed var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  padding: var(--s-5);
}
.imgph-square { aspect-ratio: 1 / 1; }
.imgph-product { aspect-ratio: 4 / 3; }
.imgph-banner { aspect-ratio: 21 / 9; }

/* 6.7 Corner L marks */
.corner {
  position: relative;
}
.corner::before,
.corner::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--accent);
}
.corner::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.corner::after  { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* 6.8 Callout */
.callout,
.dashboard-alert {
  border-left: 4px solid var(--accent);
  background: var(--bg-surface);
  padding: var(--s-4) var(--s-5);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg);
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
}
.callout em {
  font-style: normal;
  color: var(--accent);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-weight: 700;
}
.dashboard-alert--warning { border-left-color: var(--sp-warn); }
.dashboard-alert__icon { font-size: 24px; }
.dashboard-alert__content { flex: 1; }
.dashboard-alert__content p { margin: 0; }

/* 6.9 Tables */
table.spec-table,
.table,
.products-table,
.orders-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  font-size: 14px;
}
table.spec-table th,
table.spec-table td,
.table th, .table td,
.products-table th, .products-table td,
.orders-table th, .orders-table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.spec-table th,
.table th,
.products-table th,
.orders-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
  background: var(--bg-raised);
}
table.spec-table tr:last-child td,
.table tr:last-child td { border-bottom: none; }
td.mono, .table td.mono { font-family: var(--font-mono); font-size: 12px; }

/* Cross-reference table */
.cross-ref-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
}
.cross-ref-table th,
.cross-ref-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.cross-ref-table th {
  background: var(--bg-raised);
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* 6.10 Hero */
.hero,
.make-hero,
.hire-hero,
.search-results-hero,
.confirmation-header,
.dashboard-header {
  position: relative;
  background: var(--bg);
  padding: var(--s-16) 0 var(--s-12);
  overflow: hidden;
}
.hero::before,
.make-hero::before,
.hire-hero::before,
.search-results-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--accent);
}
.hero::after,
.make-hero::after,
.hire-hero::after,
.search-results-hero::after {
  content: "";
  position: absolute;
  inset: 6px 0 0 0;
  background-image:
    linear-gradient(color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--fg) 4%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.hero > *,
.make-hero > *,
.hire-hero > *,
.search-results-hero > * { position: relative; z-index: 1; }

.hero-inner,
.make-hero-inner,
.hire-hero-inner,
.search-results-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 900px) {
  .hero-inner.with-image,
  .make-hero-inner { grid-template-columns: 1.4fr 1fr; gap: var(--s-10); align-items: center; }
}
.hero h1,
.make-hero h1,
.hire-hero h1,
.search-results-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: var(--s-3) 0 var(--s-4);
}

/* Hero headline row — logo sits to the left of the H1 at the height of two */
/* lines of H1 text (font-size × line-height × 2). Replaces the removed top-bar */
/* logo so brand identity stays anchored in the masthead. */
.hero-headline {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-4);
}
.hero-headline h1 { margin: 0; flex: 1 1 240px; }
.hero-headline__logo-link { display: inline-flex; flex-shrink: 0; }
.hero-logo {
  /* clamp(48px, 7vw, 96px) × line-height 0.88 × 2 lines = exact 2-line height. */
  height: calc(clamp(48px, 7vw, 96px) * 0.88 * 2);
  width: auto;
  display: block;
}
.hero h1 em,
.hero h1 .accent { font-style: normal; color: var(--accent); }
.hero p,
.make-hero p,
.hire-hero p {
  font-size: 19px;
  line-height: 1.5;
  color: var(--fg-muted);
  max-width: 60ch;
}
.hero .cta-buttons,
.make-hero .cta-buttons,
.hire-hero .cta-buttons {
  margin-top: var(--s-6);
}
.hero-meta {
  margin-top: var(--s-10);
  display: flex;
  gap: var(--s-8);
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  flex-wrap: wrap;
}
.hero-meta strong { color: var(--fg); font-weight: 600; }

.hero-image,
.make-hero-image {
  border: 1px solid var(--line);
  background: var(--bg-surface);
  overflow: hidden;
}
.hero-image img,
.make-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 6.11 Marquee strip */
.marquee {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-surface);
  overflow: hidden;
  padding: var(--s-4) 0;
}
.marquee-inner {
  display: flex;
  justify-content: center;
  /* Wrap on viewports too narrow to hold all 5 brand names on one line — */
  /* without this, justify-content:center clips items off both sides. */
  flex-wrap: wrap;
  row-gap: var(--s-2);
  gap: var(--s-12);
  align-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 3vw, 40px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-muted);
  white-space: nowrap;
}
.marquee-inner .dot {
  width: 8px; height: 8px;
  background: var(--accent);
  display: inline-block;
  flex-shrink: 0;
}
.marquee-link {
  color: inherit;
  text-decoration: none;
  transition: color 120ms ease;
}
.marquee-link:hover,
.marquee-link:focus-visible {
  color: var(--fg);
}

/* 6.12 Product card (used in grids and partials) */
.product-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: border-color var(--dur-fast), transform var(--dur-fast);
  position: relative;
}
.product-card:hover { border-color: var(--accent); }
.product-card a { color: var(--fg); text-decoration: none; }
.product-card .product-card-media,
.product-card .product-image-wrapper {
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--fg) 5%, transparent) 0 12px,
      transparent 12px 24px),
    var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.product-card .product-card-media img,
.product-card .product-image-wrapper img,
.product-card img.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--s-3);
  background: var(--bg-raised);
}
.product-card .product-card-body,
.product-card .product-info {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.product-card .product-name,
.product-card .product-title,
.product-card .card-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--fg);
  margin: 0;
}
.product-card .product-sku,
.product-card .sku-line,
.product-card .card-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.product-card .product-price,
.product-card .price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.product-card .product-price .vs,
.product-card .product-price .save {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  margin-left: var(--s-2);
}
.product-card .product-card-actions,
.product-card .product-card-form {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.product-card .qty-selector {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  overflow: hidden;
  flex-shrink: 0;
}
.product-card .qty-selector button,
.qty-selector button {
  background: var(--bg-raised);
  border: 0;
  color: var(--fg);
  width: 32px;
  font-family: var(--font-mono);
  font-size: 14px;
  cursor: pointer;
}
.product-card .qty-selector input,
.qty-selector input,
.qty-input {
  width: 44px;
  text-align: center;
  background: var(--bg-raised);
  border: 0;
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 6px 0;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.product-grid,
.product-listing-section-full {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}
.product-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.product-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
.product-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.product-grid[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.product-grid[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) {
  .product-grid[data-cols] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .product-grid, .product-grid[data-cols] { grid-template-columns: 1fr; }
}

.product-card .quick-ship {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 1;
}

/* 6.13 PDP (product detail) */
.pdp,
.product-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  margin: var(--s-8) 0;
}
@media (max-width: 800px) { .pdp, .product-detail { grid-template-columns: 1fr; } }
.pdp-media,
.product-gallery {
  border-right: 1px solid var(--line);
  aspect-ratio: 1;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--fg) 5%, transparent) 0 14px,
      transparent 14px 28px),
    var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
@media (max-width: 800px) { .pdp-media, .product-gallery { border-right: 0; border-bottom: 1px solid var(--line); } }
.pdp-media img,
.product-gallery img { max-width: 100%; max-height: 100%; object-fit: contain; padding: var(--s-5); }

.pdp-info,
.product-info-panel {
  padding: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.pdp-title,
.product-info-panel h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0;
}
.pdp-sku, .sku-info {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.pdp-price,
.price-block {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s-4) 0;
}
.pdp-price .now,
.price-block .now,
.price-current {
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  line-height: 1;
}
.pdp-price .oem,
.price-block .oem {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.pdp-price .oem s { color: var(--fg-subtle); }
.pdp-price .save,
.price-block .save {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  padding: 4px 8px;
  margin-left: auto;
}

.fits,
.fitment-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fits .row,
.fitment-list li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.fits .row strong,
.fitment-list strong { color: var(--fg); font-weight: 600; }

.pdp-actions,
.buy-now {
  display: flex;
  gap: var(--s-3);
  align-items: stretch;
  margin-top: auto;
  flex-wrap: wrap;
}

/* 6.14 USP bar */
.usp-bar,
.usp-bar-list {
  display: flex;
  gap: var(--s-5);
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.usp-bar li,
.usp-bar-list li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.usp-bar li::before,
.usp-bar-list li::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
  display: inline-block;
}

/* 6.15 Vertical carousels (home) */
.vertical-carousel-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-3);
  min-width: 0;
}
.vertical-carousel {
  overflow: hidden;
  height: 360px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
}
.vertical-carousel-track {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-3);
  transition: transform var(--dur-base) var(--ease-out);
}
.carousel-btn,
.carousel-btn-up,
.carousel-btn-down {
  align-self: center;
  width: 44px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.carousel-btn:hover,
.carousel-btn-up:hover,
.carousel-btn-down:hover { border-color: var(--accent); color: var(--accent); }
.carousel-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.carousel-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  margin: 0;
}

/* Home brand grids — 5 brands flow cleanly across breakpoints instead of
   the orphan tile cols-2/cols-3 produce. Inside .container-wide all three
   sections get ~1488px content area on a 1520px-or-wider viewport, so
   minmax(260px) lets 5 brand tiles AND 5 product-carousel columns sit on
   one row at product-card scale. Auto-fit handles graceful reflow below. */
.make-cards .grid,
.most-ordered-kits .grid,
.most-ordered .grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media (max-width: 600px) {
  /* Brand tiles stay 2-up on mobile so the 1:1 hero images don't each */
  /* eat a full screen of scroll (5 brands × ~335px square = 1700px otherwise). */
  .make-cards .grid { grid-template-columns: repeat(2, 1fr); }
  /* Product-carousel columns stay 1-up — each is a multi-card carousel */
  /* that needs its own row width on mobile. */
  .most-ordered-kits .grid,
  .most-ordered .grid { grid-template-columns: 1fr; }
}

/* 6.16 Filter bar (make_hub) */
.filter-form-horizontal,
.filter-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  margin: var(--s-6) 0;
  align-items: end;
}
.filter-dropdown,
.filter-checkbox-horizontal {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.filter-dropdown label,
.filter-checkbox-horizontal label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.filter-checkbox-horizontal {
  flex-direction: row;
  align-items: center;
}
.filter-checkbox-horizontal label {
  letter-spacing: 0.14em;
  font-size: 12px;
  color: var(--fg);
}
.column-slider-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.column-slider {
  width: 100%;
  accent-color: var(--accent);
}
/* Slider is locked to 1 col on phones — hide it so it doesn't look broken. */
@media (max-width: 639px) {
  .column-slider-container { display: none; }
}
.results-count-horizontal {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: var(--s-2) 0;
}

/* Model toggle buttons */
.model-toggle-list {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin: var(--s-4) 0;
}
.model-toggle-btn,
.model-toggle-clear {
  padding: 8px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--bg-surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.model-toggle-btn:hover { border-color: var(--accent); color: var(--accent); }
.model-toggle-btn.is-active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.model-toggle-clear { border-color: var(--sp-danger); color: var(--sp-danger); }
.model-toggle-clear.is-hidden { display: none; }

/* Pagination */
.pagination {
  display: flex;
  gap: var(--s-2);
  justify-content: center;
  margin: var(--s-8) 0;
  list-style: none;
  padding: 0;
}
.pagination .page-item .page-link,
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: var(--bg-surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-decoration: none;
  border-radius: var(--r-2);
}
.pagination .page-item.active .page-link,
.pagination .current,
.pagination .active {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--s-5);
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--fg-muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb li + li::before { content: "/"; margin-right: var(--s-2); color: var(--fg-subtle); }

/* ---- 7. Page-specific patterns ------------------------------------- */

/* 7.1 Auth */
.auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: var(--s-10) var(--gutter);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: var(--s-8);
  position: relative;
}
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent);
}
.auth-header { text-align: center; margin-bottom: var(--s-6); }
.auth-header h1 { font-size: clamp(28px, 4vw, 40px); margin-bottom: var(--s-2); }
.auth-subtitle { color: var(--fg-muted); font-size: 14px; margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-form .form-group { margin-bottom: 0; }
.auth-footer {
  margin-top: var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
}
.auth-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-link:hover { color: var(--accent-hover); text-decoration: underline; }
.auth-notice {
  background: var(--bg-raised);
  border-left: 4px solid var(--accent);
  padding: var(--s-3) var(--s-4);
  font-size: 13px;
  color: var(--fg-muted);
}

/* 7.2 Dashboard (account) */
.dashboard-container { padding: var(--s-12) 0; }
.dashboard-header {
  padding: var(--s-10) 0 var(--s-8);
  border-bottom: 1px solid var(--line);
}
.dashboard-header__content { display: flex; flex-direction: column; gap: var(--s-2); }
.dashboard-header__actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); flex-wrap: wrap; }
.dashboard-subtitle { color: var(--fg-muted); margin: 0; }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6);
  margin-top: var(--s-8);
}
@media (max-width: 800px) { .dashboard-grid { grid-template-columns: 1fr; } }
.dashboard-section {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
}
.dashboard-section--full { grid-column: 1 / -1; }
.dashboard-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.dashboard-section__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.dashboard-section__link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.dashboard-section__link:hover { text-decoration: underline; }
.dashboard-section__content { flex: 1; }

.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
  margin: var(--s-6) 0 var(--s-8);
}
@media (max-width: 900px) { .dashboard-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .dashboard-stats { grid-template-columns: 1fr; } }
.dashboard-stat {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dashboard-stat__icon,
.stat-card__icon {
  color: var(--accent);
  width: 28px; height: 28px;
}
.dashboard-stat__value {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  color: var(--fg);
  line-height: 1;
}
.dashboard-stat__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.quick-action-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  text-decoration: none;
  color: var(--fg);
}
.quick-action-card__icon {
  color: var(--accent);
  width: 28px; height: 28px;
}
.quick-action-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.quick-action-card__description {
  font-size: 13px;
  color: var(--fg-muted);
  margin: 0;
}

.account-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (max-width: 600px) { .account-info-grid { grid-template-columns: 1fr; } }
.account-info-item {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.account-info-item__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.account-info-item__value {
  font-size: 15px;
  color: var(--fg);
  word-break: break-word;
}

/* Orders */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.order-card {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.order-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.order-card__number {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.order-card__date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.order-card__total {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
}
.order-card__meta {
  display: flex;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  flex-wrap: wrap;
}
.order-card__footer {
  border-top: 1px solid var(--line);
  padding-top: var(--s-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* 7.3 Cart */
.cart-page { padding: var(--s-10) 0; }
.cart-content {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--s-8);
}
@media (max-width: 900px) { .cart-content { grid-template-columns: 1fr; } }
.cart-items {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cart-page .cart-item {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  gap: var(--s-4);
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  align-items: center;
}
.cart-page .cart-item img { width: 80px; height: 80px; object-fit: contain; background: var(--bg-raised); }
.cart-summary {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: var(--s-5);
  position: sticky;
  top: 100px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cart-summary h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 var(--s-3);
  text-transform: uppercase;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: var(--s-2) 0;
}
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--s-3);
  margin-top: var(--s-2);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
}
.checkout-options {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.checkout-message {
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
  margin: var(--s-2) 0 0;
}
.on-account-form {
  margin-top: var(--s-4);
  padding: var(--s-5);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  display: none;
}
.on-account-form.is-open { display: block; }

/* 7.4 Order confirmation */
.confirmation-header {
  text-align: center;
  padding: var(--s-12) var(--gutter);
}
.confirmation-message {
  max-width: 640px;
  margin: 0 auto var(--s-6);
  color: var(--fg-muted);
}
.confirmation-actions {
  display: flex;
  gap: var(--s-3);
  justify-content: center;
  flex-wrap: wrap;
}
.address-block {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: var(--s-5);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.address-block strong { display: block; margin-bottom: var(--s-2); color: var(--fg); }
.customer-name { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; }

/* 7.5 Search results */
.search-results-hero h1 { color: var(--fg); }
.search-form-large {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-5);
  max-width: 720px;
}
.search-form-large input[type="search"] {
  flex: 1;
  font-size: 16px;
  padding: 14px 16px;
}
.filter-tabs {
  display: flex;
  gap: var(--s-2);
  margin: var(--s-6) 0;
  border-bottom: 1px solid var(--line);
}
.filter-tab {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.filter-tab.is-active,
.filter-tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.search-tips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.tip-card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.tip-card .icon { width: 24px; height: 24px; color: var(--accent); }
.empty-state {
  padding: var(--s-12) var(--s-5);
  text-align: center;
  border: 1px dashed var(--line-strong);
  background: var(--bg-surface);
}
.empty-state .icon { font-size: 48px; color: var(--fg-subtle); margin-bottom: var(--s-3); }

.articles-list,
.articles-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.article-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: var(--s-5);
  text-decoration: none;
  color: var(--fg);
  display: block;
  transition: border-color var(--dur-fast);
}
.article-card:hover { border-color: var(--accent); }
.article-card-content { display: flex; flex-direction: column; gap: var(--s-2); }
.article-meta,
.article-date,
.article-categories {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.article-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0;
}
.article-summary { color: var(--fg-muted); font-size: 14px; }

/* 7.6 Hire */
.hire-page section,
.hire-detail-page section { padding: var(--s-10) 0; }
.type-card {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.type-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.type-card p { color: var(--fg-muted); margin: 0; }
.trucks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-5);
}
.truck-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
  transition: border-color var(--dur-fast);
}
.truck-card:hover { border-color: var(--accent); }
/* Square images give the brand tile real visual weight (matches the chunkier */
/* 280×280 product card images) without changing the tile width. */
.truck-card-image { aspect-ratio: 1/1; background: var(--bg-raised); overflow: hidden; }
.truck-card-image img { width: 100%; height: 100%; object-fit: cover; }
.truck-card-body { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.truck-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}
.truck-image-large {
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: var(--s-5);
}
.truck-image-large img { width: 100%; height: auto; display: block; }
.rates-display { display: flex; flex-direction: column; gap: var(--s-3); margin: var(--s-5) 0; }
.rate-box {
  border: 1px solid var(--line);
  background: var(--bg-surface);
  padding: var(--s-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.rate-box.wet { border-left: 4px solid var(--accent); }
.rate-box.dry { border-left: 4px solid var(--sp-success); }
.rate-box .rate-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.rate-box .rate-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
}
.booking-card,
.booking-form {
  padding: var(--s-6);
}
.inquiry-form { padding: var(--s-6); border: 1px solid var(--line); background: var(--bg-surface); }

/* Flatpickr theme adjustments (loaded via CDN) */
.flatpickr-calendar {
  background: var(--bg-surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--fg) !important;
}
.flatpickr-day { color: var(--fg) !important; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--on-accent) !important; }

/* 7.7 FAQ */
.faq-page section { padding: var(--s-10) 0; }
.faq-section {
  padding: var(--s-6);
  margin-bottom: var(--s-5);
}
.faq-section h2 {
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
}
.faq-list { display: flex; flex-direction: column; gap: var(--s-3); }
.faq-item {
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: none; }
.faq-question {
  font-family: var(--font-display);
  font-size: 20px;
  text-transform: uppercase;
  margin: 0 0 var(--s-2);
  color: var(--fg);
}
.faq-answer { color: var(--fg-muted); font-size: 15px; line-height: 1.6; margin: 0; }
.faq-answer a { color: var(--accent); }

/* 7.8 Testimonials */
.testimonials-page section { padding: var(--s-10) 0; }
.testimonial-card {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.testimonial-card.featured { border-color: var(--accent); border-width: 2px; }
.testimonial-rating { display: flex; gap: 2px; color: var(--line-strong); }
.testimonial-rating .star.filled { color: var(--accent); }
.testimonial-card blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg);
  border-left: 4px solid var(--accent);
  padding-left: var(--s-3);
}
.customer-name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; color: var(--fg); }
.customer-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted); }

/* 7.9 Static page (terms/privacy/returns/shipping/about/contact) */
.terms-page, .about-page, .contact-page {
  padding: var(--s-12) 0;
}
.terms-page h1, .about-page h1, .contact-page h1 {
  margin-bottom: var(--s-6);
}
.terms-section, .terms-subsection { margin-bottom: var(--s-6); }
.terms-section h2 {
  font-family: var(--font-display);
  font-size: 28px;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.terms-subsection h3 {
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.terms-list, .about-list { padding-left: var(--s-5); color: var(--fg); }
.terms-list li, .about-list li { margin-bottom: var(--s-2); line-height: 1.6; }
.terms-last-updated, .terms-intro {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  margin: var(--s-8) 0;
}
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-box { padding: var(--s-6); }
.contact-box h3 {
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  margin: 0 0 var(--s-3);
}
.contact-box-description { color: var(--fg-muted); margin: 0 0 var(--s-3); }
.contact-details {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--fg);
  line-height: 1.7;
}
.contact-details a { color: var(--accent); }

/* 7.10 Error pages */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  padding: var(--s-12) var(--gutter);
  text-align: center;
}
.error-code {
  font-family: var(--font-display);
  font-size: clamp(96px, 18vw, 200px);
  font-weight: 800;
  color: var(--accent);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.error-page h1 {
  font-size: clamp(32px, 5vw, 56px);
  margin: var(--s-3) 0 var(--s-4);
}
.error-page p { color: var(--fg-muted); max-width: 540px; }
.error-page .button-group { margin-top: var(--s-6); justify-content: center; }
.quick-links { margin-top: var(--s-8); }
.quick-links ul { display: flex; gap: var(--s-3); justify-content: center; list-style: none; padding: 0; flex-wrap: wrap; }
.quick-links a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }

/* 7.11 Study / why-us cards (home) */
.study {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.study h3 {
  font-family: var(--font-display);
  font-size: 22px;
  text-transform: uppercase;
  margin: 0;
}
.study p { color: var(--fg-muted); margin: 0; }

/* Ask / FAQ inline blocks */
.ask { display: grid; gap: var(--s-3); margin: var(--s-6) 0; }
.ask-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  padding: var(--s-3);
  background: var(--bg-surface);
  border: 1px solid var(--line);
}
.ask-step-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}

/* 7.12 Trade account */
.trade-account-page .form-section { background: var(--bg-surface); border: 1px solid var(--line); padding: var(--s-6); }
.trade-account-page ul li { line-height: 1.7; }

/* 7.13 Staff product review (admin) */
.product-review-page {
  padding: var(--s-6) var(--gutter);
  max-width: none;
}
.product-review-page .filter-bar { margin: var(--s-3) 0; }
.product-review-page .products-table {
  width: 100%;
  font-size: 12px;
}
.product-review-page .products-table th,
.product-review-page .products-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.product-review-page .products-table td[contenteditable="true"] {
  outline: none;
  cursor: text;
  background: var(--bg-raised);
}
.product-review-page .products-table td[contenteditable="true"]:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.product-review-page .products-table tr.is-dirty td { background: color-mix(in oklab, var(--sp-warn) 12%, transparent); }
.product-review-page .products-table tr.is-saved td { background: color-mix(in oklab, var(--sp-success) 10%, transparent); }
.product-review-page .image-thumb,
.product-review-page .row-image {
  width: 56px; height: 56px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--bg-raised);
}
.product-review-page .row-actions { display: inline-flex; gap: var(--s-1); }
.product-review-page .margin-cell.low { color: var(--sp-danger); font-weight: 600; }
.product-review-page .margin-cell.ok { color: var(--sp-success); font-weight: 600; }
.product-review-page #addProductBtn { margin-top: var(--s-3); }

/* ===== Staff: product review (scoped) ===== */
.product-review-page .staff-controls {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
  flex-wrap: wrap;
}
.product-review-page .filter-bar {
  /* override the auto-fit minimum so 6 filter columns fit at desktop widths */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.product-review-page .filter-bar.grid-3 {
  /* second filter row: Visibility + Sort + reserved spare column */
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 800px) {
  .product-review-page .filter-bar.grid-3 { grid-template-columns: 1fr; }
}
.product-review-page .filter-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: var(--s-3) 0 var(--s-5);
  flex-wrap: wrap;
}
.product-review-page .results-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.product-review-page .products-table-container {
  /* table can be wide; allow horizontal scroll while sticky-pinning headers vertically */
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 320px);
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-0);
}
.product-review-page .products-table {
  min-width: 1400px;
  font-size: 12px;
}
.product-review-page .products-table thead th {
  /* sticky header rides above scrolled rows during long edits */
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-raised);
}
.product-review-page .products-table tbody tr:nth-child(even) td {
  background: color-mix(in oklab, var(--fg) 3%, transparent);
}
.product-review-page .products-table tbody tr:hover td {
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.product-review-page .products-table th:nth-child(even),
.product-review-page .products-table td:nth-child(even) {
  /* alternating column shading for dense pricing/margin grid */
  background-color: color-mix(in oklab, var(--fg) 2%, transparent);
}
.product-review-page .products-table tbody tr.new-row {
  /* freshly created rows get a success outline so staff can spot them */
  background: color-mix(in oklab, var(--sp-success) 10%, transparent);
  border: 2px solid var(--sp-success);
}
.product-review-page .product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--r-1);
  border: 1px solid var(--line);
  background: var(--bg-raised);
}
.product-review-page .product-image-placeholder {
  width: 60px;
  height: 60px;
  background: var(--bg-raised);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  text-align: center;
}
.product-review-page .editable-field {
  /* compact in-cell editor for autosave; JS toggles `.saving` */
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--bg-raised);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 12px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.product-review-page .editable-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 25%, transparent);
}
.product-review-page .editable-field.saving {
  /* JS adds .saving while the autosave request is in-flight */
  opacity: 0.55;
  pointer-events: none;
}
.product-review-page .product-name-field { min-width: 200px; }
.product-review-page .product-sku {
  font-family: var(--font-mono);
  font-size: 12px;
  width: 150px;
  letter-spacing: 0.04em;
}
.product-review-page .price-field {
  width: 100px;
  text-align: right;
  font-family: var(--font-mono);
}
.product-review-page .margin-field {
  width: 80px;
  text-align: right;
  font-family: var(--font-mono);
}
.product-review-page .supplier-name-field { width: 150px; }
.product-review-page .supplier-code-field {
  width: 120px;
  font-family: var(--font-mono);
}
.product-review-page .model-select {
  width: 200px;
  font-size: 12px;
}
.product-review-page .hidden-toggle {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.product-review-page .cell-center { text-align: center; }
.product-review-page .empty-row td {
  text-align: center;
  padding: var(--s-8) var(--s-4);
  color: var(--fg-muted);
}
.product-review-page .internal-code {
  display: block;
  margin-top: var(--s-1);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
}
.product-review-page .success-indicator {
  /* small green dot the autosave JS flashes after a successful save */
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sp-success);
  margin-left: var(--s-2);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.product-review-page .success-indicator.show { opacity: 1; }

/* Modal form grid — two-column layout for Add Product, single column on mobile */
.product-review-page .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 768px) {
  .product-review-page .form-grid { grid-template-columns: 1fr; gap: var(--s-3); }
}
.product-review-page .modal-body { padding: var(--s-4) 0; }
.product-review-page .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--s-3);
  padding-top: var(--s-4);
  margin-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.product-review-page .modal-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.product-review-page .modal-header-row h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
}
.product-review-page .form-help {
  /* hint text under file/select inputs in modal */
  display: block;
  margin-top: var(--s-1);
  font-size: 12px;
  color: var(--fg-subtle);
}
.product-review-page .modal--narrow { max-width: 500px; }

/* Modals (staff product review + image update) */
.modal-overlay,
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-4);
}
.modal-overlay.is-hidden,
.modal-backdrop.is-hidden { display: none; }
.modal,
.modal-dialog {
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  position: relative;
  padding: var(--s-6);
}
.modal::before,
.modal-dialog::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent);
}
.modal-header,
.modal-title {
  font-family: var(--font-display);
  font-size: 24px;
  text-transform: uppercase;
  margin: 0 0 var(--s-4);
}
.close-btn,
.close-image-modal,
.modal-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--line);
  color: var(--fg);
  cursor: pointer;
  border-radius: var(--r-1);
}
.close-btn:hover { color: var(--accent); border-color: var(--accent); }

/* 7.14 Staff marketing */
.marketing-page section { padding: var(--s-6) 0; }
.platform-tabs {
  display: flex;
  gap: var(--s-1);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-4);
}
.platform-tab {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.platform-tab.is-active,
.platform-tab.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
}
.snippets-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.snippet-card {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.snippet-card .snippet-platform {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.snippet-card textarea { min-height: 200px; font-family: var(--font-mono); font-size: 13px; }
.snippet-actions { display: flex; gap: var(--s-2); }

.loading-spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.loading-spinner.is-hidden { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Product preview (marketing tool) */
.product-preview {
  background: var(--bg-surface);
  border: 1px solid var(--line);
  padding: var(--s-4);
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--s-4);
  margin: var(--s-4) 0;
}
.product-preview img { width: 100px; height: 100px; object-fit: contain; background: var(--bg-raised); }
.product-preview .preview-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

/* 7.15 Staff orders / makes-models */
.staff-page { padding: var(--s-8) 0; }
.staff-page h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 40px);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.staff-grid-two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}
@media (max-width: 800px) { .staff-grid-two { grid-template-columns: 1fr; } }

/* 7.16 Knowledge base */
.kb-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.kb-list li { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.kb-list a { color: var(--fg); font-size: 16px; }
.kb-list a:hover { color: var(--accent); }

/* 7.17 Hidden / utility helpers */
.hidden { display: none !important; }
.is-hidden { display: none !important; }
.is-filtered-out { display: none !important; }
.no-style { all: unset; }

/* Generic spacing utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--s-1) !important; }
.mb-2 { margin-bottom: var(--s-2) !important; }
.mb-3 { margin-bottom: var(--s-3) !important; }
.mb-4 { margin-bottom: var(--s-4) !important; }
.mb-5 { margin-bottom: var(--s-5) !important; }
.mb-6 { margin-bottom: var(--s-6) !important; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2) !important; }
.mt-3 { margin-top: var(--s-3) !important; }
.mt-4 { margin-top: var(--s-4) !important; }
.mt-5 { margin-top: var(--s-5) !important; }
.mt-6 { margin-top: var(--s-6) !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.mt-8 { margin-top: var(--s-8) !important; }
.mt-10 { margin-top: var(--s-10) !important; }
.mb-8 { margin-bottom: var(--s-8) !important; }

/* Toast notifications */
.toast-stack {
  position: fixed;
  bottom: var(--s-5);
  right: var(--s-5);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 360px;
}
.toast {
  background: var(--bg-surface);
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--accent);
  padding: var(--s-3) var(--s-4);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.toast--success { border-left-color: var(--sp-success); }
.toast--error   { border-left-color: var(--sp-danger); }
.toast__close { background: none; border: 0; color: var(--fg-muted); cursor: pointer; }

/* Carousel hero (legacy `hero` mouse-glow removed per style guide) */

/* ---- 8. Animation utilities ---------------------------------------- */
@keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.anim-fade-in { animation: fade-in var(--dur-base) var(--ease-out) both; }

/* ---- 9. Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 80ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover .arr,
  .btn-primary:hover .arr { transform: none; }
}

/* ---- 10. Print ----------------------------------------------------- */
@media print {
  html, body { background: #fff !important; color: #0E1012 !important; }
  html {
    --bg: #fff;
    --bg-surface: #F5F2ED;
    --bg-raised: #fff;
    --line: rgba(14,16,18,0.18);
    --line-strong: rgba(14,16,18,0.30);
    --fg: #0E1012;
    --fg-muted: #4A4F55;
    --fg-subtle: #6B7079;
    --accent: #E25610;
    --on-accent: #fff;
  }
  .site-header, .left-nav, .side-cart, .nav-toggle, .theme-toggle,
  .announcement-banner, .toast-stack, .site-footer { display: none !important; }
  .container, .container-tight { max-width: none; padding: 0; }
  section { padding: 10mm 0; break-inside: avoid-page; }
  a { color: inherit; text-decoration: none; }
  * { transition: none !important; animation: none !important; backdrop-filter: none !important; }
}