/* MarinerParts.com.au — design system
   Per project decision May 2026: locked to the Marine Technical palette +
   Archivo + IBM Plex Sans type pairing. Other palettes / type pairings
   from the prototype are removed (no runtime switching).
   Source: design-handoff/marinerparts/project/styles.css */

:root {
  --bg: #f1f4f7;
  --bg-elev: #ffffff;
  --bg-deep: #0b1a2b;
  --bg-deep-elev: #102742;
  --ink: #0b1a2b;
  --ink-2: #1d2d44;
  --ink-mute: #4b5e75;
  --ink-soft: #7c8da1;
  --line: #cdd6e0;
  --line-soft: #e2e8ee;
  --line-strong: #9faec0;
  --accent: #3a8cc4;
  --accent-deep: #1f6a9c;
  --accent-soft: #cce2f1;
  --on-accent: #ffffff;
  --signal: #1f6feb;
  --good: #2f7d3a;
  --warn: #b54708;
  --danger: #b42318;
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(11,26,43,.06), 0 1px 1px rgba(11,26,43,.04);
  --shadow: 0 4px 16px rgba(11,26,43,.08), 0 1px 2px rgba(11,26,43,.05);
  --shadow-lg: 0 24px 48px -12px rgba(11,26,43,.18), 0 2px 4px rgba(11,26,43,.06);

  --font-display: "Archivo", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Prevent off-canvas drawers (mini-cart on the right, filters drawer on
   the left) from contributing to the document's horizontal scroll on
   mobile. `overflow-x: clip` is preferred over `hidden` because it
   doesn't break `position: sticky` on descendants. */
html, body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
  text-wrap: pretty;
}

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; }

.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tnum { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ============== layout ============== */
.shell { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 768px) { .shell { padding: 0 16px; } }

/* ============== top utility bar ============== */
.utility {
  background: var(--bg-deep);
  color: #c8ccd0;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.utility .shell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.utility .left, .utility .right {
  display: flex; gap: 22px; align-items: center;
}
.utility .pillar {
  display: inline-flex; gap: 8px; align-items: center;
  color: #c8ccd0;
}
.utility .pillar svg { color: var(--accent); }
.utility .right a:hover { color: #fff; }
@media (max-width: 768px) { .utility .left .pillar:nth-child(n+2) { display: none; } }

/* ============== header ============== */
.header {
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.header .top {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px) 1fr;
  gap: 32px;
  align-items: center;
  height: 76px;
}
.header .top > .logo { justify-self: start; }
.header .top > .header-actions { justify-self: end; }

/* Mobile chrome — logo + cart/hamburger top row, search drops to its
   own row underneath at full width. Categories collapse into the
   slide-down nav-mobile panel. */
/* `!important` here is deliberate — these utility classes need to beat
   any descendant selector (`.header-actions .ask` etc.) that sets its
   own display rule. */
.mobile-only  { display: none !important; }
.desktop-only { display: inline-flex !important; }

@media (max-width: 768px) {
  .mobile-only  { display: inline-flex !important; }
  .desktop-only { display: none !important; }

  .header .top {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo actions"
      "search search";
    column-gap: 12px;
    row-gap: 10px;
    height: auto;
    padding: 12px 0;
  }
  .header .top > .logo { grid-area: logo; }
  .header .top > .header-actions { grid-area: actions; }
  .header .top > .header-search { grid-area: search; }
  .header .top > .header-search input { height: 44px; padding-right: 96px; }
  .header .top > .header-search .submit { height: 32px; top: 6px; right: 6px; }

  /* Hide the inline desktop nav on mobile — moved to the hamburger panel. */
  .header .desktop-nav { display: none; }
}

/* Hamburger button (mobile only). 44×44 hit area, three bars that
   X-out when open. */
.hamburger {
  width: 44px; height: 44px;
  border: 1.5px solid var(--line-strong);
  background: var(--bg-elev);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.hamburger:hover { border-color: var(--ink); }
.hamburger-bars {
  display: inline-flex; flex-direction: column; gap: 4px;
  width: 18px;
}
.hamburger-bars span {
  display: block; height: 2px; background: currentColor;
  border-radius: 2px;
  transition: transform .18s ease, opacity .15s ease;
}
.header.is-open .hamburger-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.header.is-open .hamburger-bars span:nth-child(2) { opacity: 0; }
.header.is-open .hamburger-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile nav slide-down panel — sits under the .top row, animates open.
   Default hidden on all widths; shown only when:
     1. Viewport is mobile (<=768px), AND
     2. The hamburger has flipped aria-expanded="true" (which removes
        the [hidden] attribute via JS).
   The [hidden] attribute trumps display:flex via this explicit rule
   (otherwise display:flex would override the user-agent's hidden
   default). */
.nav-mobile {
  display: none;
  flex-direction: column;
  border-top: 1px solid var(--line-soft);
  padding: 8px 0 12px;
}
.nav-mobile[hidden] { display: none; }
@media (max-width: 768px) {
  .nav-mobile:not([hidden]) { display: flex; }
}
.nav-mobile .nm-link {
  padding: 12px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-mobile .nm-link:last-child { border-bottom: 0; }
.nav-mobile .nm-link:hover { color: var(--accent); }
.nav-mobile .nm-cta {
  margin-top: 8px;
  padding: 12px 14px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1.5px solid var(--ink);
  justify-content: center;
}
.nav-mobile .nm-cta:hover { background: var(--ink); color: var(--bg-elev); }
.nav-mobile .nm-sep {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 8px 0;
}

/* Body lock when the mobile nav is open — prevents page scroll behind. */
body.nav-open-lock { overflow: hidden; }

.logo {
  display: inline-flex; gap: 10px; align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.logo .logo-line {
  display: inline-block;
  line-height: 1;
}
.logo .mark {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--bg-elev);
  border-radius: 4px;
}
.logo .logo-mariner,
.logo .logo-parts,
.logo .logo-tld {
  font-size: inherit;        /* all three parts share the parent size */
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
}
.logo .logo-mariner { color: var(--ink); }
.logo .logo-parts   { color: var(--accent); }
.logo .logo-tld     { color: var(--accent); }
.footer .logo { font-size: 26px; }
.footer .logo .logo-mariner { color: #fff; }

.search {
  position: relative;
  width: 100%;
}
.search input {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--line-strong);
  background: var(--bg);
  border-radius: var(--radius);
  padding: 0 52px 0 48px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}
.search input:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--bg-elev);
}
.search .icon-search {
  position: absolute;
  left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-mute);
  pointer-events: none;
}
.search .submit {
  position: absolute;
  right: 6px; top: 6px;
  width: auto;          /* override .search input { width: 100% } */
  height: 36px;
  border: none;
  background: var(--ink);
  color: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.search .submit:hover { background: var(--accent); color: var(--on-accent); }

.header-actions {
  display: flex; gap: 8px; align-items: center;
}
.header-actions .phone {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 0 14px;
  border-right: 1px solid var(--line);
}
.header-actions .phone .label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.header-actions .phone .num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.header-actions .ask {
  display: inline-flex; gap: 8px; align-items: center;
  padding: 10px 14px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
}
.header-actions .ask:hover { background: var(--ink); color: var(--bg-elev); }
.header-actions .cart {
  position: relative;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line-strong);
  background: var(--bg-elev);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.header-actions .cart:hover { border-color: var(--ink); }
.header-actions .cart .count {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px;
  background: var(--accent); color: var(--on-accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 6px;
}

@media (max-width: 1024px) {
  .header-actions .phone, .header-actions .ask span { display: none; }
}

.nav {
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  height: 44px;
  gap: 4px;
  overflow-x: auto;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  white-space: nowrap;
  padding: 0 14px;
  height: 100%;
  display: inline-flex; align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav a.active { color: var(--ink); border-bottom-color: var(--ink); }
.nav .sep { width: 1px; height: 18px; background: var(--line); margin: 0 8px; }

/* ============== despatch ribbon ============== */
.despatch-ribbon {
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
  padding: 8px 16px;
  font-weight: 500;
}
.despatch-ribbon strong { font-weight: 700; }

/* ============== buttons ============== */
.btn {
  display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  border: 1.5px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
  text-decoration: none;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg-elev);
}
.btn-primary:hover { background: var(--accent); color: var(--on-accent); }
.btn-accent {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-accent:hover { background: var(--accent-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-lg { padding: 16px 24px; font-size: 15px; }
.btn-block { width: 100%; }

/* ============== badges & chips ============== */
.badge {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--line-soft);
  color: var(--ink-2);
}
.badge-stock {
  background: color-mix(in oklab, var(--good) 12%, transparent);
  color: var(--good);
}
/* Low stock — yellow per Michael's review (2026-05-07). The orange/red
   warn token reads too alarming for "only 2 left"; yellow signals
   urgency without panic. */
.badge-low {
  background: #fff4c2;
  color: #7a5a00;
}
.badge-out {
  background: var(--line-soft);
  color: var(--ink-mute);
}
/* Special order — calm blue, signals "available, just not same-day"
   rather than the dead grey of the old "On order" label. */
.badge-special {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--accent);
}
.badge-oem {
  background: var(--bg-deep);
  color: var(--bg-elev);
}

.chip {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .12s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); color: var(--bg-elev); border-color: var(--ink); }

/* ============== product card ============== */
.pcard {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
  text-align: left;
}
.pcard:hover { border-color: var(--ink); }
/* Inner anchor — image + info clickable. ATC footer is OUTSIDE this
   link so the button doesn't trigger navigation. */
.pcard-link {
  display: flex; flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.pcard .pimg {
  aspect-ratio: 1 / 1;
  /* Hard cap so a narrow-grid breakpoint (or any future layout change
     that widens the card) can never blow the image area into a
     viewport-dominating square. With max-height set, aspect-ratio
     still defines the preferred shape; max-height clamps the actual
     rendered height. */
  max-height: 280px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
}
.pcard .pimg .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  background-image:
    repeating-linear-gradient(135deg,
      var(--line-soft) 0,
      var(--line-soft) 1px,
      transparent 1px,
      transparent 10px);
  background-color: var(--bg);
}
.pcard .pimg .placeholder-label {
  position: relative;
  z-index: 1;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 999px;
  white-space: nowrap;
}
.pcard .pimg .pcard-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
}
.pcard .pimg .badges {
  position: absolute; top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 4px;
  align-items: flex-start;
}
.pcard .pinfo {
  padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
  flex: 1;
}
.pcard .pbrand {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.pcard .pstock-line { margin-top: auto; padding-top: 4px; }
.badge-new {
  background: var(--accent);
  color: var(--on-accent);
}
.pcard .ptitle {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard .ppart {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.pcard .pfoot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px 14px;
  gap: 10px;
  border-top: 1px solid var(--line-soft);
  margin-top: auto;
}
.pcard .pprice {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  flex: 0 0 auto;
}
.pcard .pprice .gst {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Quick add-to-cart button on product cards. Compact + ink-fill on
   hover so it reads as the secondary action (the card click is primary
   navigation to PDP). */
.pcard-atc-form { margin: 0; flex: 0 1 auto; }
.pcard-atc {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-elev);
  border: 1.5px solid var(--ink);
  color: var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.pcard-atc:hover { background: var(--ink); color: var(--bg-elev); }
.pcard-atc:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--line-strong);
  color: var(--ink-mute);
}
.pcard-atc:disabled:hover { background: var(--bg-elev); color: var(--ink-mute); }
/* On narrower cards (2-up grid at lg/md), drop to icon-only to stay tidy. */
@media (max-width: 1024px) {
  .pcard-atc { padding: 8px 10px; }
  .pcard-atc-label { display: none; }
}
@media (max-width: 768px) {
  /* Mobile (1-up grid) is wide — bring the label back. */
  .pcard-atc { padding: 8px 14px; }
  .pcard-atc-label { display: inline; }
}

/* Low-stock badge — tick alongside, same as IN STOCK. */
.badge-low { display: inline-flex; align-items: center; gap: 4px; }
.badge-low svg { color: #7a5a00; }


/* ============== sections ============== */
.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
.section-title {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 32px;
  gap: 24px;
}
.section-title h2 {
  font-size: 28px;
  font-weight: 600;
}
.section-title .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 8px;
}
.section-title .lnk {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  white-space: nowrap;        /* keep "All brands →" on one line */
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .section-title { flex-wrap: wrap; row-gap: 12px; align-items: flex-start; }
  .section-title h2 { font-size: 24px; }
}

/* ============== footer ============== */
.footer {
  background: var(--bg-deep);
  color: #c8ccd0;
  margin-top: 80px;
  padding: 60px 0 40px;
}
.footer h4 {
  color: #fff;
  font-size: 13px;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a { font-size: 13px; color: #c8ccd0; }
.footer a:hover { color: #fff; }
.footer .brand-blurb { font-size: 13px; line-height: 1.6; color: #8b939b; max-width: 300px; }
.footer .legal {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  margin-top: 40px;
  border-top: 1px solid #2c3137;
  font-size: 12px;
  color: #8b939b;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .footer .cols { grid-template-columns: 1fr; gap: 28px 0; }
  .footer .brand-blurb { max-width: none; }
  .footer .legal { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ============== homepage ============== */
.hero {
  background: var(--bg-deep);
  color: #e6ecf2;
  border-bottom: 1px solid var(--bg-deep);
  padding: 72px 0 64px;
  position: relative;
  overflow: hidden;
}
.hero h1 { color: #ffffff; }
.hero .sub { color: #a8b6c7; }
.hero .popular { color: #a8b6c7; }
.hero .popular .chip {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.18);
  color: #d6dde6;
}
.hero .popular .chip:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.4);
  color: #ffffff;
}
.hero .search input {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
  color: #ffffff;
}
.hero .search input::placeholder { color: #8b9caf; }
.hero .search input:focus {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent);
}
.hero .search .icon-search { color: #8b9caf; }
.hero .search .submit {
  background: var(--accent);
  color: var(--on-accent);
}
.hero .search .submit:hover { background: var(--accent-deep); }
.hero .hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  position: relative; z-index: 2;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.hero h1 {
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
.hero .sub {
  font-size: 17px;
  color: var(--ink-mute);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.5;
}
.hero .search {
  max-width: 720px;
  margin: 0 auto;
}
.hero .search input { height: 60px; font-size: 16px; padding-left: 56px; padding-right: 140px; }
.hero .search .icon-search { left: 20px; }
.hero .search .submit { height: 48px; padding: 0 22px; right: 6px; top: 6px; }
.hero .popular {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-mute);
  align-items: center;
}
.hero .popular .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 90%);
}

/* category tile grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
.cat-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 18px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.cat-tile:hover { border-color: var(--ink); }
.cat-tile .ct-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  z-index: 2;
  position: relative;
}
.cat-tile .ct-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  z-index: 2;
  position: relative;
}
.cat-tile .ct-img {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg,
      var(--line-soft) 0,
      var(--line-soft) 1px,
      transparent 1px,
      transparent 14px);
  opacity: .8;
}
.cat-tile .ct-glyph {
  position: absolute;
  bottom: -14px; right: -14px;
  width: 92px; height: 92px;
  color: var(--ink-soft);
  opacity: .35;
}

/* three-pillar strip */
.pillars {
  background: var(--bg-deep);
  color: #d4d8db;
  padding: 56px 0;
}
.pillars .pgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
}
@media (max-width: 768px) {
  .pillars .pgrid { grid-template-columns: 1fr; gap: 0; }
}
.pillars .pillar-card {
  padding: 0 32px;
  display: flex; flex-direction: column; gap: 14px;
  border-right: 1px solid #2c3137;
}
.pillars .pillar-card:first-child { padding-left: 0; }
.pillars .pillar-card:last-child { border-right: none; padding-right: 0; }
@media (max-width: 768px) {
  /* Stacked pillars on mobile: drop side padding, swap right-border for
     a top-divider, give the icon + eyebrow line more breathing room. */
  .pillars .pillar-card {
    padding: 28px 0;
    border-right: 0;
    border-top: 1px solid #2c3137;
    gap: 10px;
  }
  .pillars .pillar-card:first-child { border-top: 0; padding-top: 8px; }
  .pillars .pillar-card .icon { margin-bottom: 0; }
  .pillars .pillar-card h3 { font-size: 22px; }
}
.pillars .pillar-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  font-weight: 600;
}
.pillars .pillar-card h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 600;
}
.pillars .pillar-card p {
  font-size: 14px;
  line-height: 1.55;
  color: #a0a6ac;
  margin: 0;
}
.pillars .pillar-card .icon {
  color: var(--accent);
  margin-bottom: 4px;
}

/* brand rail */
.brand-rail {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  overflow: hidden;
}
.brand-rail .brand-cell {
  flex: 1;
  padding: 28px 16px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .15s;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.brand-rail .brand-cell:last-child { border-right: none; }
.brand-rail .brand-cell:hover { background: var(--bg); color: var(--ink); }
@media (max-width: 1024px) {
  .brand-rail { flex-wrap: wrap; }
  .brand-rail .brand-cell { flex: 1 1 33%; border-bottom: 1px solid var(--line-soft); }
}

/* article cards */
.articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 768px) { .articles { grid-template-columns: 1fr; } }
.acard {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.acard .ahead {
  aspect-ratio: 16 / 9;
  background-image:
    repeating-linear-gradient(45deg,
      var(--line-soft) 0,
      var(--line-soft) 1px,
      transparent 1px,
      transparent 12px);
  background-color: var(--bg);
  position: relative;
}
.acard .acat {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg-elev);
  background: var(--ink);
  padding: 4px 10px;
  border-radius: 4px;
}
.acard .abody { padding: 22px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.acard h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.acard .aexcerpt { font-size: 14px; color: var(--ink-mute); line-height: 1.55; }
.acard .ameta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-top: auto;
  padding-top: 14px;
}
.acard .ameta .author { color: var(--accent); font-weight: 600; }

/* expert band */
.expert-band {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.expert-band::before {
  content: ""; position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  background-image:
    repeating-linear-gradient(135deg, var(--line-soft) 0, var(--line-soft) 1px, transparent 1px, transparent 16px);
  opacity: .8;
  z-index: 0;
}
.expert-band > * { position: relative; z-index: 1; }
.expert-band h2 {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  line-height: 1.1;
}
.expert-band p { color: var(--ink-mute); font-size: 16px; line-height: 1.55; margin-bottom: 24px; }
.expert-band .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 14px;
}
.expert-band .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.expert-band .quote-block {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink);
}
.expert-band .quote-block .who {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-top: 16px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .expert-band { grid-template-columns: 1fr; padding: 28px; }
  .expert-band::before { display: none; }
}

/* ============== category page ============== */
.crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  padding: 18px 0;
  display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap;
}
.crumbs a { color: var(--ink-mute); }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { color: var(--line-strong); }
.crumbs .current { color: var(--ink); }

.cat-head {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  padding: 16px 0 32px;
  align-items: end;
}
.cat-head h1 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.cat-head .intro {
  color: var(--ink-mute);
  font-size: 15px;
  line-height: 1.55;
  max-width: 640px;
}
.cat-head .meta {
  display: flex; flex-direction: column; gap: 8px;
  align-items: flex-end;
}
.cat-head .meta .author {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px;
  color: var(--ink-mute);
}
.cat-head .meta .avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg-elev);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
}
.cat-head .meta .author a { color: var(--accent); font-weight: 600; }
@media (max-width: 768px) { .cat-head { grid-template-columns: 1fr; } .cat-head .meta { align-items: flex-start; } }

.cat-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding-bottom: 80px;
}
/* Stack only at tablet/mobile widths so narrow desktops keep the sidebar */
@media (max-width: 768px) { .cat-layout { grid-template-columns: 1fr; } }

.filters {
  align-self: start;
  /* Non-sticky: scrolls with the page. Sticky + max-height made the
     sidebar look strange with its own scrollbar; just let it sit
     inline with the page flow. */
}
.filter-block {
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.filter-block:first-child { padding-top: 0; }
.filter-block h4 {
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.filter-block h4 .count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); font-weight: 500; }
.filter-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.filter-block label {
  display: flex; gap: 10px; align-items: center;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.filter-block label:hover { color: var(--ink); }
.filter-block label input[type="checkbox"] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-elev);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.filter-block label input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.filter-block label input[type="checkbox"]:checked::after {
  content: "";
  width: 8px; height: 4px;
  border-left: 2px solid var(--bg-elev);
  border-bottom: 2px solid var(--bg-elev);
  transform: rotate(-45deg) translate(1px, -1px);
}
.filter-block label .lcount {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.toolbar .results {
  font-size: 13px;
  color: var(--ink-mute);
}
.toolbar .results strong { color: var(--ink); font-weight: 600; }
.toolbar .right { display: flex; gap: 12px; align-items: center; }

/* Sort form — sits at the right of the toolbar opposite the results count */
.sort-form {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  flex-shrink: 0;
}
.sort-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 600;
}
.sort-form select {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 7px 30px 7px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%235b636b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  color: var(--ink);
}
.sort-form select:hover, .sort-form select:focus { border-color: var(--ink); outline: none; }
.toolbar select {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 8px 32px 8px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%235b636b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.applied-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}

/* Card-density ladder. 3 cols is the cap (per Michael's call) — wider
   desktops just get more whitespace, not more cards.
     ≥1024px           3 cols
     381-1023          2 cols  (iPad portrait, phones)
     ≤380              1 col   (iPhone SE / smallest phones) */
.product-grid,
.product-grid-4 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1023px) {
  .product-grid, .product-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .product-grid, .product-grid-4 { grid-template-columns: 1fr; }
}

.pagination {
  display: flex; justify-content: center; align-items: center;
  gap: 4px;
  margin-top: 40px;
}
.pagination button {
  min-width: 36px; height: 36px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  color: var(--ink-2);
}
.pagination button:hover { border-color: var(--ink); }
.pagination button.active { background: var(--ink); color: var(--bg-elev); border-color: var(--ink); }
.pagination a {
  min-width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  padding: 0 8px;
}
.pagination a:hover { border-color: var(--ink); color: var(--ink); }
.pagination .pgap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 36px;
  color: var(--ink-mute);
  font-size: 14px;
}

/* ============== PDP ============== */
.pdp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding: 24px 0 48px;
  align-items: start;
}
/* Only stack at proper tablet/mobile widths — narrow desktops keep 2-col */
@media (max-width: 768px) { .pdp { grid-template-columns: 1fr; gap: 32px; } }

.gallery {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
}
/* Sticky gallery only on widescreens where buybox is tall enough to scroll */
@media (min-width: 1280px) {
  .gallery { position: sticky; top: 132px; }
}
.gallery .thumbs { display: flex; flex-direction: column; gap: 8px; }
.gallery .thumb {
  aspect-ratio: 1;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.gallery .thumb.active { border-color: var(--ink); }
.gallery .thumb .placeholder {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg,
      var(--line-soft) 0,
      var(--line-soft) 1px,
      transparent 1px,
      transparent 6px);
}
.gallery .main {
  aspect-ratio: 1;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.gallery .main .placeholder {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg,
      var(--line-soft) 0,
      var(--line-soft) 1px,
      transparent 1px,
      transparent 14px);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.gallery .thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
}
.gallery .main .pdp-main-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #fff;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;  /* iOS long-press save dialog */
  pointer-events: none;          /* shield handles clicks, deters long-press save */
}

/* The whole main image is a click target — wraps in a button. */
.gallery .main .pdp-main-btn {
  position: absolute; inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
}
/* Transparent shield over the image to absorb right-click / long-press
   so the browser save-as menu targets a div, not the image element. */
.gallery .main .pdp-main-shield {
  position: absolute; inset: 0;
  background: transparent;
}
/* Magnifier hint, bottom-right of the main image. */
.gallery .main .zoom-cue {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(11, 26, 43, 0.85);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.gallery .main:hover .zoom-cue,
.gallery .main:focus-within .zoom-cue {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Lightbox overlay ===== */
body.lightbox-open { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(11, 26, 43, 0.92);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}
.lightbox.open { display: flex; }

.lightbox-stage {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-image {
  max-width: 90vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius);
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}
/* Click-shield over the lightbox image — same anti-save deterrent
   as the main gallery. Backdrop clicks still close because the
   shield only covers the image footprint. */
.lightbox-shield {
  position: absolute;
  inset: 0;
  background: transparent;
}
.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.15s ease, background 0.15s ease;
  z-index: 1;
}
.lightbox-close svg {
  width: 28px;
  height: 28px;
  stroke-width: 2.5;
}
.lightbox-close:hover {
  background: var(--accent);
  color: #fff;
  transform: scale(1.05);
}
.lightbox-close:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .lightbox { padding: 4vh 4vw; }
  .lightbox-close { top: 14px; right: 14px; width: 48px; height: 48px; }
  .lightbox-close svg { width: 24px; height: 24px; }
  .gallery .main .zoom-cue { font-size: 10px; padding: 5px 8px; }
}
.gallery .main .zoom-hint {
  position: absolute; bottom: 12px; right: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--ink-mute);
}

.buybox h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.buybox .brand-line {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 12px;
}
.buybox .brand-line .brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.buybox .brand-line a.brand:hover { color: var(--accent); }
.buybox .partlines {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-mute);
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  margin: 16px 0;
}
.buybox .partlines .row { display: flex; justify-content: space-between; gap: 12px; }
.buybox .partlines .row .lbl { color: var(--ink-soft); }
.buybox .partlines .row .val { color: var(--ink); font-weight: 500; }
.buybox .partlines details { margin-top: 4px; }
.buybox .partlines details summary {
  cursor: pointer;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  list-style: none;
}
.buybox .partlines details summary::-webkit-details-marker { display: none; }
.buybox .partlines details .oem-table {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}

.buybox .price-row {
  display: flex; align-items: baseline; gap: 12px;
  margin: 18px 0;
}
.buybox .price {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.buybox .price-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}

.stock-box {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  margin-bottom: 14px;
  overflow: hidden;
}
.stock-box .stock-row {
  display: flex; gap: 14px; align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.stock-box .stock-row:last-child { border-bottom: none; }
/* Special-order box: calm amber accent + no live-pulse animation
   (nothing to count down to). */
.stock-box-special { border-color: color-mix(in oklab, var(--accent) 35%, var(--line)); }
.stock-box .stock-row .pulse.pulse-amber { background: var(--accent); }
.stock-box .stock-row .pulse.pulse-amber::after { content: none; }
.stock-box .stock-row .pulse {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--good);
  position: relative;
  flex-shrink: 0;
}
.stock-box .stock-row .pulse::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 999px;
  border: 2px solid var(--good);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes pulse {
  0% { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.stock-box .stock-row .text {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.stock-box .stock-row .text strong { font-weight: 700; }
.stock-box .stock-row .sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.stock-box .countdown {
  background: var(--bg);
  font-family: var(--font-mono);
}
.stock-box .countdown .text { font-family: var(--font-mono); font-size: 13px; }
.stock-box .countdown .timer {
  margin-left: auto;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
/* Inline countdown chip — sits within the sentence "Despatched today if
   you order within {timer}". Same look as the standalone .timer. */
.stock-box .countdown .timer-inline {
  display: inline-block;
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.stock-box .countdown .pulse { background: var(--accent); }
.stock-box .countdown .pulse::after { border-color: var(--accent); }

.qty-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.qty-stepper {
  display: grid;
  grid-template-columns: 36px 1fr 36px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  height: 48px;
  background: var(--bg-elev);
}
.qty-stepper button {
  border: none;
  background: transparent;
  font-size: 18px;
  color: var(--ink);
  font-family: var(--font-display);
}
.qty-stepper input {
  border: none;
  text-align: center;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  outline: none;
  width: 100%;
}
.atc-btn {
  height: 48px;
  font-size: 15px;
  font-weight: 600;
  background: var(--ink);
  color: var(--bg-elev);
  border: none;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  letter-spacing: 0.005em;
}
.atc-btn:hover { background: var(--accent); color: var(--on-accent); }

.express-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.express-btn {
  height: 44px;
  border-radius: var(--radius);
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--bg-elev);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.express-btn.gpay {
  background: var(--bg-elev); color: var(--ink);
}

.freight-est {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--bg-elev);
}
.freight-est .label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 8px;
  display: flex; gap: 6px; align-items: center;
}
.freight-est .pc-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.freight-est input {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  background: var(--bg);
}
.freight-est input:focus { outline: none; border-color: var(--ink); background: var(--bg-elev); }
.freight-est .est-btn {
  border: 1.5px solid var(--ink);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  padding: 0 14px;
  color: var(--ink);
}
.freight-est .est-btn:hover { background: var(--ink); color: var(--bg-elev); }
.freight-est .result {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: block;
  font-size: 13px;
}
.freight-est .result .opt { display: flex; justify-content: space-between; padding: 3px 0; gap: 12px; }
.freight-est .result .opt .name { color: var(--ink-2); }
.freight-est .result .opt .price { font-family: var(--font-mono); color: var(--ink); font-weight: 600; font-size: 13px; line-height: 1.2; }

.expert-row {
  display: flex; gap: 12px; align-items: center;
  padding: 14px 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 13px;
  color: var(--ink-2);
}
.expert-row .icon { color: var(--accent); flex-shrink: 0; }
.expert-row strong { color: var(--ink); }
.expert-row a { color: var(--accent); font-weight: 600; margin-left: auto; white-space: nowrap; }

/* tabs below fold */
.pdp-tabs {
  border-top: 1px solid var(--line);
  padding-top: 32px;
  margin-top: 32px;
}
.pdp-tabs .tabs-bar {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
}
/* Tabs row only needs to scroll horizontally on narrow viewports —
   on desktop with 3-5 tabs they always fit. The unconditional
   overflow-x: auto was triggering a scroll-track on macOS even when
   nothing overflowed. */
@media (max-width: 768px) {
  .pdp-tabs .tabs-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
}
.pdp-tabs .tab {
  background: transparent;
  border: none;
  padding: 14px 20px;
  font: inherit;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-mute);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
.pdp-tabs .tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.pdp-tabs .tab:hover { color: var(--ink); }

.tab-panel {
  max-width: 880px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.tab-panel p { margin: 0 0 12px 0; }
.tab-panel .spec-table {
  display: grid;
  grid-template-columns: 220px 1fr;
  border-top: 1px solid var(--line);
}
.tab-panel .spec-table > div {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.tab-panel .spec-table .lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.tab-panel .spec-table .val { color: var(--ink); }

.fitment-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.fitment-table .frow {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  font-size: 13px;
}
.fitment-table .frow.head {
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 600;
}
.fitment-table .frow > div {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
}
.fitment-table .frow > div:last-child { border-right: none; }
.fitment-table .frow:last-child > div { border-bottom: none; }
.fitment-table .frow .check { color: var(--good); font-weight: 600; }

/* ============== PDP fitment tab ============== */
.tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
}
.tab.active .tab-count {
  background: var(--ink);
  color: var(--bg-elev);
  border-color: var(--ink);
}
.fitment-lede {
  font-size: 14px;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.fitment-lede strong { color: var(--ink); }
.fitment-make { margin-bottom: 24px; }
.fitment-make h4 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.fitment-series {
  margin-bottom: 16px;
}
.fitment-series:last-child { margin-bottom: 0; }
.fitment-series-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.fitment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fitment-filter {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fitment-filter-input {
  flex: 1;
  padding: 10px 36px 10px 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: var(--bg-elev);
  color: var(--ink);
}
.fitment-filter-input:focus {
  outline: none;
  border-color: var(--ink);
}
.fitment-filter-clear {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 0;
  background: var(--line);
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fitment-filter-clear:hover { background: var(--ink); color: var(--bg-elev); }
.fitment-filter-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
  white-space: nowrap;
}
.fitment-empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13px;
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
}
.fitment-chip {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: all 0.15s ease;
}
.fitment-chip:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg-elev);
}
/* `display: inline-block` above overrides the browser default for the
   `hidden` attribute. Without this override the live-filter on the
   fitment tab can update the count badge but the chips visually stay
   on screen. */
.fitment-chip[hidden],
.fitment-series[hidden],
.fitment-make[hidden] {
  display: none !important;
}
.fitment-note {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  color: var(--ink-mute);
}
.inline-link {
  color: var(--accent);
  text-decoration: underline;
}

/* ============== engine-search (sidebar autocomplete) ============== */
.engine-search { position: relative; }
.engine-search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  background: var(--bg-elev);
  color: var(--ink);
}
.engine-search-input:focus {
  outline: none;
  border-color: var(--ink);
}
.engine-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(11, 26, 43, 0.12);
  max-height: 320px;
  overflow-y: auto;
  z-index: 50;
}
.engine-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.1s ease;
}
.engine-search-row:last-child { border-bottom: none; }
.engine-search-row:hover,
.engine-search-row.is-active {
  background: var(--bg);
}
.engine-search-name {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.engine-search-make {
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.engine-search-empty {
  padding: 12px;
  color: var(--ink-mute);
  font-size: 12px;
  text-align: center;
}
.filter-block-note {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.engine-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--ink);
  color: var(--bg-elev);
  border-radius: var(--radius-sm);
}
.engine-active-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}
.engine-active-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 1;
  font-weight: 600;
}
.engine-active-clear:hover { background: rgba(255,255,255,0.35); }

/* Brands index page */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-bottom: 80px;
}
@media (max-width: 1023px) { .brands-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .brands-grid { grid-template-columns: 1fr; } }
.brand-card {
  display: block;
  padding: 28px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elev);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.brand-card:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.brand-card-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
.brand-card-count {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Home page engine-finder band */
.home-engine-band {
  background: var(--bg);
  padding: 48px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.home-engine-inner {
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 48px;
  align-items: center;
}
.home-engine-copy h2 { font-size: 28px; margin: 6px 0 8px; }
.home-engine-copy p { color: var(--ink-mute); max-width: 460px; }
.home-engine-search { position: relative; }
.home-engine-search .engine-search-input {
  height: 56px;
  font-size: 15px;
  padding: 14px 18px;
}
@media (max-width: 900px) {
  .home-engine-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .home-engine-search { max-width: 100%; }
}

/* ============== mini-cart ============== */
.minicart-overlay {
  position: fixed; inset: 0;
  background: rgba(20, 24, 27, 0.4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.minicart-overlay.open { opacity: 1; pointer-events: auto; }
.minicart {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: var(--bg-elev);
  z-index: 101;
  transform: translateX(100%);
  transition: transform .25s ease-out;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.minicart.open { transform: translateX(0); }
.minicart-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
}
.minicart-head h3 { font-size: 18px; font-weight: 600; }
.minicart-head .close {
  border: none; background: transparent;
  font-size: 22px;
  color: var(--ink-mute);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.minicart-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.minicart-line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.minicart-line .pimg {
  width: 64px; height: 64px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-image:
    repeating-linear-gradient(135deg,
      var(--line-soft) 0,
      var(--line-soft) 1px,
      transparent 1px,
      transparent 8px);
}
.minicart-line .meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.minicart-line .meta .brand {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.minicart-line .meta .title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.minicart-line .meta .qty-x {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.minicart-line .price {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.minicart-cross {
  border-top: 1px solid var(--line);
  padding: 16px 24px;
}
.minicart-cross h4 {
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 12px;
}
.minicart-cross .cross-list { display: flex; flex-direction: column; gap: 10px; }
.minicart-cross .cross-line {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
}
.minicart-cross .cross-line .pimg {
  width: 48px; height: 48px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background-image:
    repeating-linear-gradient(135deg,
      var(--line-soft) 0,
      var(--line-soft) 1px,
      transparent 1px,
      transparent 6px);
}
.minicart-cross .cross-line .ctitle { font-size: 12px; font-weight: 500; line-height: 1.3; }
.minicart-cross .cross-line .cprice { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 600; }
.minicart-cross .cross-line .cadd {
  border: 1px solid var(--ink);
  background: transparent;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 5px 10px;
  color: var(--ink);
}
.minicart-cross .cross-line .cadd:hover { background: var(--ink); color: var(--bg-elev); }

.minicart-foot {
  border-top: 1px solid var(--line);
  padding: 18px 24px 24px;
  background: var(--bg-elev);
}
.minicart-consolidation {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 1.45;
  margin-bottom: 10px;
}
.minicart-consolidation svg { flex-shrink: 0; margin-top: 2px; }
.minicart-consolidation strong { font-weight: 700; }
.minicart-foot .row {
  display: flex; justify-content: space-between;
  margin-bottom: 6px;
  font-size: 13px;
}
.minicart-foot .row.total {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 12px 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.minicart-foot .actions { display: flex; flex-direction: column; gap: 8px; }
.minicart-empty {
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-mute);
}
.minicart-empty .ico { color: var(--ink-soft); margin-bottom: 14px; }
.minicart-empty h4 { font-size: 18px; margin-bottom: 8px; color: var(--ink); }

/* ============== page transitions ============== */
/* Opacity-only fade — using `transform` here creates a containing
   block for fixed-positioned descendants (e.g. lightbox overlays
   nested in .page would be trapped inside .page instead of the
   viewport). Stick to opacity. */
.page {
  animation: pagefade .25s ease-out;
}
@keyframes pagefade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============== misc ============== */
.divider { height: 1px; background: var(--line); margin: 32px 0; }
.muted { color: var(--ink-mute); }

/* Layout switcher + spec table + row list + grouped list — alternative category */

.layout-switcher {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 16px;
  gap: 16px;
  flex-wrap: wrap;
}
.layout-switcher .ls-left, .layout-switcher .ls-right {
  display: flex; gap: 12px; align-items: center;
}
.layout-switcher .ls-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 600;
}
.layout-switcher .ls-modes {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.layout-switcher .ls-modes button {
  background: var(--bg-elev);
  border: none;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  border-right: 1px solid var(--line-soft);
  display: inline-flex; gap: 6px; align-items: center;
}
.layout-switcher .ls-modes button:last-child { border-right: none; }
.layout-switcher .ls-modes button.active { background: var(--ink); color: var(--bg-elev); }
.layout-switcher .ls-modes button:hover:not(.active) { background: var(--bg); }

.unit-toggle {
  display: flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.unit-toggle button {
  background: var(--bg-elev);
  border: none;
  padding: 6px 14px;
  font: inherit;
  font-size: 12px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.unit-toggle button.active { background: var(--ink); color: var(--bg-elev); }

.fitment-filters {
  display: flex; gap: 24px; align-items: center;
  padding: 14px 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.fitment-filters .ff-group { display: flex; gap: 10px; align-items: center; }
.fitment-filters .ff-lbl {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 600;
}
.fitment-filters .ff-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fitment-filters .ff-toggle {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 13px;
  cursor: pointer;
  color: var(--ink-2);
}
.fitment-filters .ff-toggle input[type=checkbox] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-elev);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fitment-filters .ff-toggle input[type=checkbox]:checked {
  background: var(--ink); border-color: var(--ink);
}
.fitment-filters .ff-toggle input[type=checkbox]:checked::after {
  content: ""; width: 8px; height: 4px;
  border-left: 2px solid var(--bg-elev);
  border-bottom: 2px solid var(--bg-elev);
  transform: rotate(-45deg) translate(1px, -1px);
}
.fitment-filters select {
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  border-radius: var(--radius);
  padding: 8px 32px 8px 12px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' stroke='%235b636b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ============================================================
   Checkout (single-page, AU-locked)
   ============================================================ */
.checkout-page { background: var(--bg); padding: 32px 0 64px; min-height: 100vh; }
.checkout-shell { max-width: 1200px; }
.checkout-flash {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 14px;
}
.checkout-flash.error { background: #fde9e9; color: #8b1c1c; border: 1px solid #f5b8b8; }
.checkout-flash.notice { background: #e6f5ec; color: #1a5d3a; border: 1px solid #a8d8b9; }

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 960px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-summary { order: -1; }
}

.checkout-header { margin-bottom: 32px; }
.checkout-header .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--accent);
  letter-spacing: 0.12em;
  font-weight: 600;
}
.checkout-header h1 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 8px 0 6px;
}
.checkout-header .muted { color: var(--ink-mute); font-size: 14px; }

/* ── Section card ── */
.checkout-section {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 28px;
  margin-bottom: 16px;
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.checkout-section.is-active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.checkout-section.is-pending { opacity: 0.55; }
.checkout-section.is-pending .section-head h2 { color: var(--ink-soft); }
.checkout-section.is-done { background: #fbfdff; }

.section-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: start;
  margin-bottom: 18px;
}
.section-head .num {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
}
.checkout-section.is-pending .section-head .num { background: var(--ink-soft); }
.checkout-section.is-done .section-head .num { background: var(--accent); }
.checkout-section.is-done .section-head .num::before { content: "✓"; }
.checkout-section.is-done .section-head .num { font-size: 0; }
.checkout-section.is-done .section-head .num::before { font-size: 16px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 4px 0 4px;
  letter-spacing: -0.005em;
}
.section-head .muted { color: var(--ink-mute); font-size: 13px; }
.section-head .edit-link {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-decoration: none;
}

.section-summary {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.section-summary .price { font-weight: 600; }
.section-summary .muted { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }

/* ── Form fields ── */
.checkout-form { display: flex; flex-direction: column; gap: 16px; }
.checkout-form .field { display: flex; flex-direction: column; gap: 6px; }
.checkout-form .field label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.checkout-form .field label .muted {
  color: var(--ink-mute);
  font-weight: 400;
}
.checkout-form input[type="text"],
.checkout-form input[type="email"],
.checkout-form input[type="tel"],
.checkout-form select {
  height: 44px;
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.checkout-form input:focus,
.checkout-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.checkout-form .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-form .grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
  .checkout-form .grid2,
  .checkout-form .grid3 { grid-template-columns: 1fr; }
}

/* Country-locked callout. Was display:flex which (with the long mono
   string + wide letter-spacing) stretched the form wider than the
   mobile viewport — pushed the Continue button partly offscreen and
   broke the layout into oddly-aligned columns. Plain block + inline
   icon flows naturally and wraps cleanly. */
.country-locked {
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 8px 0 12px;
}
.country-locked svg {
  vertical-align: middle;
  margin-right: 4px;
  margin-top: -2px;
}
.country-locked strong { color: var(--accent-deep); font-weight: 700; }
@media (max-width: 600px) {
  .country-locked { font-size: 10.5px; }
}

/* ── Shipping methods ── */
.ship-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.ship-method {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ship-method:hover { border-color: var(--line-strong); }
.ship-method:has(input:checked) { border-color: var(--accent); background: #fbfdff; }
.ship-method .meta { display: flex; flex-direction: column; gap: 2px; }
.ship-method .meta strong { font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.ship-method .meta .muted { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.04em; }
.ship-method .price { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.ship-method.is-recommended { border-color: var(--accent-deep); }

/* Shipping-mode chooser (separate vs consolidate) for multi-warehouse orders */
.ship-mode {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 14px;
  margin-bottom: 16px;
}
.ship-mode-head {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.ship-mode-opt {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s;
}
.ship-mode-opt:last-of-type { margin-bottom: 0; }
.ship-mode-opt.is-active { border-color: var(--accent); background: #fbfdff; }
.ship-mode-opt .meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ship-mode-opt .meta strong { font-family: var(--font-display); font-size: 14px; color: var(--ink); }
.ship-mode-opt .meta .muted { font-size: 12px; color: var(--ink-mute); line-height: 1.4; }
.ship-mode-opt .price { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); }
.ship-mode-note { font-size: 11px; color: var(--ink-mute); margin-top: 10px; line-height: 1.4; }

/* Phase 5 — freight-quote callout (shown when cart contains a
   freight_required item or weight exceeds the 22kg top band). */
.freight-quote-callout {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  background: #fff7e0;
  border: 1px solid #f1d889;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
  color: #6a4a00;
}
.freight-quote-callout strong {
  font-family: var(--font-display);
  font-size: 14px;
  display: block;
  margin-bottom: 4px;
  color: #6a4a00;
}
.freight-quote-callout span {
  font-size: 13px;
  color: #6a4a00;
  line-height: 1.5;
  display: block;
}

/* ── Payment methods ── */
.pay-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pay-method {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pay-method:has(input:checked) { border-color: var(--accent); background: #fbfdff; }
.pay-method .meta { display: flex; flex-direction: column; gap: 2px; }
.pay-method .meta strong { font-family: var(--font-display); font-size: 14px; }
.pay-method .meta .muted { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); letter-spacing: 0.03em; }

.payment-placeholder {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  background: #fff7e0;
  border: 1px solid #f1d889;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.payment-placeholder strong { font-family: var(--font-display); font-size: 13px; color: #6a4a00; display: block; }
.payment-placeholder .muted { font-size: 12px; color: #6a4a00; opacity: 0.8; }

/* ── Stripe Payment Element ── */
.payment-stripe { display: flex; flex-direction: column; gap: 14px; }
.payment-stripe-element {
  /* Stripe iframes height-animate; we constrain min-height so the layout
     doesn't jump while the Element is loading. */
  min-height: 280px;
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  padding: 4px;
}
.payment-stripe-errors {
  background: #fde9e9;
  color: #8b1c1c;
  border: 1px solid #f5b8b8;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 13px;
}
.payment-stripe .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── Right column: order summary ── */
.checkout-summary { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.summary-card {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px;
}
.summary-card h3 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.summary-lines { display: flex; flex-direction: column; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.summary-line {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
}
.summary-line .pimg {
  width: 48px; height: 48px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background-image: repeating-linear-gradient(135deg, var(--line-soft) 0, var(--line-soft) 1px, transparent 1px, transparent 8px);
}
.summary-line .meta { min-width: 0; }
.summary-line .meta .title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.summary-line .meta .qty-x {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.summary-line .price { font-family: var(--font-display); font-size: 13px; font-weight: 600; }

.coupon-row {
  margin: 0 0 14px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}
.coupon-row summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  user-select: none;
  transition: color 0.12s;
}
.coupon-row summary::-webkit-details-marker { display: none; }
.coupon-row summary:hover { color: var(--accent); }
.coupon-row summary::before { content: "+ "; }
.coupon-row[open] summary::before { content: "− "; }
.coupon-row .coupon-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-top: 10px;
}
.coupon-row .coupon-form input[type="text"] {
  height: 36px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.coupon-row .coupon-form input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.coupon-row .coupon-form .btn { height: 36px; padding: 0 14px; font-size: 12px; }

.summary-totals { display: flex; flex-direction: column; gap: 8px; }
.summary-totals .row { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: 13px; color: var(--ink); }
.summary-totals .row .muted { color: var(--ink-mute); }
.summary-totals .row.total {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
  margin-top: 6px;
  color: var(--ink);
}

/* ── Trust strip on checkout sidebar ── */
.checkout-trust {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.checkout-trust .trust-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
}
.checkout-trust .ico { color: var(--accent); padding-top: 1px; }
.checkout-trust strong {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  display: block;
}
.checkout-trust .muted {
  font-size: 12px;
  color: var(--ink-mute);
  display: block;
  line-height: 1.45;
}

/* ── Thanks page ── */
.checkout-thanks { background: var(--bg); padding: 48px 0 80px; min-height: 100vh; }
.thanks-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 56px 56px;
  text-align: center;
}
.thanks-icon {
  width: 80px; height: 80px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.thanks-card .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
}
.thanks-card h1 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  margin: 8px 0 12px;
  letter-spacing: -0.01em;
}
.thanks-card .lead { color: var(--ink-mute); font-size: 16px; margin-bottom: 32px; }
.thanks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  text-align: left;
  margin-bottom: 32px;
}
@media (max-width: 720px) {
  .thanks-grid { grid-template-columns: 1fr; }
  .thanks-card { padding: 32px 24px; }
}
.thanks-card .card {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}
.thanks-card .card .eyebrow { margin-bottom: 12px; }
.next-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.next-steps li {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
}
.thanks-card .summary-line {
  /* Thanks-page card has no thumbnail column — use 1fr / auto. */
  grid-template-columns: 1fr auto;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.thanks-card .summary-line:last-of-type { border-bottom: 0; }
.thanks-card .summary-totals { margin-top: 12px; }
.thanks-cta { display: flex; justify-content: center; }

/* ============================================================
   CMS pages (Phase 11) — About, Contact, Shipping, Returns,
   Privacy, Terms. Long-form rich-text bodies.
   ============================================================ */
.cms-page { background: var(--bg); padding: 32px 0 80px; min-height: 60vh; }
.cms-content {
  max-width: 760px;
  margin: 0 auto;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 48px 56px;
}
@media (max-width: 720px) {
  .cms-content { padding: 32px 24px; }
}
.cms-content .crumbs {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-bottom: 20px;
}
.cms-content .crumbs a { color: var(--ink-mute); text-decoration: none; }
.cms-content .crumbs a:hover { color: var(--accent); }
.cms-content .crumbs .sep { margin: 0 6px; color: var(--line-strong); }
.cms-content .crumbs .current { color: var(--ink); font-weight: 500; }
.cms-content h1 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 24px;
  line-height: 1.15;
}

.cms-body { font-family: var(--font-display); font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.cms-body h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  margin: 32px 0 12px;
  letter-spacing: -0.005em;
}
.cms-body h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 24px 0 10px;
}
.cms-body p { margin: 0 0 16px; }
.cms-body ul, .cms-body ol { margin: 0 0 16px; padding-left: 22px; }
.cms-body li { margin-bottom: 6px; }
.cms-body a { color: var(--accent); text-decoration: underline; }
.cms-body a:hover { color: var(--accent-deep); }
.cms-body strong { color: var(--ink); font-weight: 600; }
.cms-body em { font-style: italic; color: var(--ink-mute); }
.cms-body hr { border: 0; border-top: 1px solid var(--line-soft); margin: 32px 0; }
.cms-body code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--bg);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--line-soft);
}
.cms-body blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--accent);
  background: var(--bg);
  color: var(--ink-2);
  font-style: italic;
}
.cms-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.cms-body th, .cms-body td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  font-size: 14px;
}
.cms-body th { background: var(--bg); font-weight: 600; color: var(--ink); }

/* ============================================================
   Header search autocomplete dropdown (Phase 7.4)
   ============================================================ */
.header .search { position: relative; }
.sa-results {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(11, 26, 43, 0.12);
  z-index: 1000;
  display: none;
  max-height: 480px;
  overflow-y: auto;
}
.sa-results.is-open { display: block; }

.sa-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: var(--ink);
  transition: background 0.1s;
}
.sa-hit:hover, .sa-hit.is-active { background: var(--bg); }
.sa-hit:last-of-type { border-bottom: 0; }
.sa-hit-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sa-hit-brand {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.sa-hit-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sa-hit-sku {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.sa-hit-price {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sa-empty {
  padding: 16px;
  font-size: 13px;
  color: var(--ink-mute);
  text-align: center;
}
.sa-empty a { color: var(--accent); text-decoration: none; }

.sa-more {
  display: block;
  padding: 12px 16px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-decoration: none;
  text-align: center;
  border-top: 1px solid var(--line);
  font-weight: 600;
}
.sa-more:hover { background: var(--accent-soft); }

/* ============================================================
   Faceted filters (Phase 7.5)
   ============================================================ */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}
.active-filters-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  font-weight: 600;
}
.active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 999px;
  padding: 5px 10px 5px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s;
}
.active-chip:hover { background: var(--accent); color: var(--on-accent); }
.active-chip .x {
  background: rgba(11, 26, 43, 0.12);
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}
.active-chip:hover .x { background: rgba(255,255,255,0.25); }
.clear-all {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-decoration: none;
  margin-left: 4px;
}
.clear-all:hover { color: var(--accent); }

/* Facet sidebar links — tightened spacing per Michael's review. */
.filters .facet-link {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  text-decoration: none;
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 13px;
  cursor: pointer;
  transition: color 0.12s;
}
.filters .facet-link:hover { color: var(--accent); }
.filters .facet-link.is-active { color: var(--accent-deep); font-weight: 600; }

.filters .checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg-elev);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}
.filters .facet-link:hover .checkbox { border-color: var(--accent); }
.filters .checkbox.is-checked {
  background: var(--accent);
  border-color: var(--accent);
  /* Inline SVG checkmark — vector + centered, beats the pseudo-element
     trig that was rendering off-axis on some viewports. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
}

.filters .lcount {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.filters .facet-link.is-active .lcount { color: var(--accent-deep); }

/* ============================================================
   Phase 13 mobile polish (per Michael's review 2026-05-07)
   ============================================================ */

/* "All brands →" / "All parts →" arrow links — bind the arrow to its
   word so it never breaks across a line, even in a tight flex column.
   The display:inline-flex makes the underline + arrow render as one
   atomic unit. */
.lnk,
.section-title .lnk {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  white-space: nowrap !important;
}

/* Search button — width sized to the word "Search" (was wide due to
   inherited 16px horizontal padding). On mobile it now matches the
   word width, which Michael wanted. */
@media (max-width: 768px) {
  .header .top > .header-search .submit {
    height: 32px;
    top: 6px;
    right: 6px;
    padding: 0 12px;
    font-size: 12px;
  }
  .header .top > .header-search input {
    height: 44px;
    padding-right: 76px;  /* tighter than the 96px reserve */
  }
}

/* (Removed earlier mobile single-column override — superseded by the
   card-density ladder at the top of the product-grid block. We now run
   2-up on phones rather than 1-up so users see twice as many cards
   per scroll.) */

/* Pillars on mobile — pull icon next to the "01 / RANGE" eyebrow so
   the row feels like one unit, then h3 + body below. Aligns each
   pillar's start edge consistently (icon and eyebrow on the same line
   instead of stacked vertically as on desktop). */
@media (max-width: 768px) {
  .pillars .pillar-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon eyebrow"
      "title title"
      "body body";
    column-gap: 12px;
    row-gap: 8px;
  }
  .pillars .pillar-card .icon { grid-area: icon; align-self: center; }
  .pillars .pillar-card .num  { grid-area: eyebrow; align-self: center; }
  .pillars .pillar-card h3    { grid-area: title; }
  .pillars .pillar-card p     { grid-area: body; }
}

/* Footer already stacks 1-col under 768px (line ~613). Belt+braces:
   ensure the brand-blurb column doesn't squeeze the others. */
@media (max-width: 768px) {
  .footer .cols { grid-template-columns: 1fr !important; gap: 32px 0; }
  .footer .col h4 { margin-bottom: 8px; }
}

/* Filter sidebar on category/PLP pages — sticky on desktop, but at
   mobile widths the layout collapses to 1 column and sticky causes
   the sidebar to overlap the product grid. Drop sticky for mobile. */
@media (max-width: 1024px) {
  .filters {
    position: static !important;
    top: auto !important;
  }
}

/* Hamburger menu — when content overflows the viewport (long category
   list + Ask-an-Expert CTA at the bottom), allow the panel itself to
   scroll. The body is locked while the menu is open so the only thing
   that scrolls is the nav. The 60px reserve keeps the bottom CTA
   above any iOS Safari gesture chrome. */
@media (max-width: 768px) {
  .nav-mobile:not([hidden]) {
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 60px;
  }
}

/* ============================================================
   Filters drawer (mobile)
   ============================================================
   Desktop: sidebar lives inline beside the product grid (existing
   .cat-layout grid behavior). The toggle button + overlay stay hidden.
   Mobile (<=1024px): the .filters element becomes an off-canvas drawer,
   slid in by clicking the Filters toggle button. Backdrop fades in
   over the page. Body scroll locks via .nav-open-lock (shared with the
   hamburger menu — opening one closes the other implicitly via the
   overflow:hidden on body). */

/* Toggle button — only the mobile-only utility on it makes it visible
   below 768px (see line ~117 .mobile-only/.desktop-only rules). */
.filters-toggle {
  display: none;  /* base: hidden; .mobile-only utility flips this on mobile */
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border: 1.5px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--ink);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 16px;
}
.filters-toggle:hover { border-color: var(--ink); }
.filters-toggle .ft-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  margin-left: 4px;
}

/* Backdrop overlay */
.filters-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 24, 27, 0.4);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
@media (max-width: 1024px) {
  .filters-overlay { display: block; }
  .filters-overlay.open { opacity: 1; pointer-events: auto; }
}

/* Drawer head — close button row, mobile only */
.filters-head {
  display: none;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.filters-head h3 { font-size: 18px; font-weight: 600; }
.filters-close {
  border: none; background: transparent;
  font-size: 28px; line-height: 1;
  color: var(--ink-mute);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.filters-close:hover { color: var(--ink); }

/* Mobile drawer mode */
@media (max-width: 1024px) {
  .filters-head { display: flex; }

  .filters {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 320px; max-width: 88vw;
    background: var(--bg-elev);
    z-index: 101;
    transform: translateX(-100%);
    transition: transform .25s ease-out;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 24px;
    box-shadow: var(--shadow-lg);
    margin: 0;  /* override any cat-layout gap */
  }
  .filters.open { transform: translateX(0); }
}

/* Checkout order summary — sticky on desktop (right column pins beside
   the long-scrolling form). Below the breakpoint the layout collapses
   to one column with summary above the form (`order: -1`); sticky in
   that mode pins the summary on top while the form scrolls under it,
   which Michael flagged. Drop sticky below the layout breakpoint. */
@media (max-width: 960px) {
  .checkout-summary {
    position: static !important;
    top: auto !important;
  }
}

/* Defend against any descendant of the checkout layout widening past
   its parent on mobile. CSS Grid items don't shrink below their
   min-content width by default, so long mono labels (shipping method
   ETA, country-locked, freight-quote callout, etc.) can stretch their
   column wider than the viewport — pushing inputs or buttons partly
   offscreen. min-width: 0 on grid items + max-width: 100% on form
   controls neutralises the whole class of bug. */
@media (max-width: 768px) {
  /* Form-level guards */
  .checkout-form > * { min-width: 0; max-width: 100%; }
  .checkout-form .grid2 > *,
  .checkout-form .grid3 > * { min-width: 0; }
  .checkout-form input,
  .checkout-form select,
  .checkout-form textarea { max-width: 100%; }

  /* Card containers — enforce no overflow at the checkout-section /
     summary-card / section-head level. */
  .checkout-section,
  .summary-card,
  .checkout-summary { min-width: 0; max-width: 100%; }
  .checkout-section > *,
  .summary-card > *,
  .section-head > * { min-width: 0; max-width: 100%; }

  /* Shipping method rows — 22px radio | 1fr meta | auto price.
     Force the meta column to actually shrink, and let mono ETA copy
     wrap (it doesn't on its own due to letter-spacing). */
  .ship-method { min-width: 0; }
  .ship-method > * { min-width: 0; }
  .ship-method .meta { min-width: 0; overflow-wrap: anywhere; }
  .ship-method .meta .muted { letter-spacing: 0.02em; }

  /* Freight + payment placeholder callouts — same grid pattern */
  .freight-quote-callout,
  .payment-placeholder { min-width: 0; }
  .freight-quote-callout > *,
  .payment-placeholder > * { min-width: 0; }

  /* Stripe payment element + summary lines */
  .payment-stripe { min-width: 0; max-width: 100%; }
  .summary-line { min-width: 0; }
  .summary-line .meta { min-width: 0; overflow-wrap: anywhere; }
}