/* ==========================================================================
   Mad Motors — 2026 unified stylesheet
   One sheet, one template, every era (osCommerce / Magento 1 / Magento 2).
   No external requests. Self-hosted Open Sans only.
   ========================================================================== */

@import url("/assets/fonts.css");

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --navy: #0b2f5e;
  --navy-600: #123f7a;
  --navy-800: #082444;
  --navy-900: #061a32;
  --red: #e02b27;
  --red-ink: #c2231f;   /* AA-safe red for text on light */
  --red-600: #b81f1c;

  /* surfaces & ink */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --surface-img: #ffffff;
  --ink: #16202e;
  --ink-2: #47566a;
  --ink-3: #6b7a8f;
  --line: #dde3ec;
  --line-strong: #c3ccda;

  /* accents */
  --link: #0d3f7d;
  --link-hover: var(--red-ink);
  --focus: #1a73e8;
  --ok: #1c7c46;

  /* elevation */
  --shadow-1: 0 1px 2px rgb(11 47 94 / .06), 0 1px 3px rgb(11 47 94 / .08);
  --shadow-2: 0 2px 6px rgb(11 47 94 / .07), 0 10px 24px -8px rgb(11 47 94 / .18);
  --shadow-head: 0 1px 0 var(--line), 0 6px 20px -14px rgb(11 47 94 / .5);

  /* geometry — 8px rhythm */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --pill: 999px;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 64px;

  /* type */
  --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: 1rem;
  --t-md: 1.0625rem;
  --t-lg: clamp(1.125rem, .4vw + 1.05rem, 1.25rem);
  --t-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --t-2xl: clamp(1.75rem, 2vw + 1.15rem, 2.5rem);
  --t-3xl: clamp(2.125rem, 3vw + 1.2rem, 3.25rem);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d131c;
    --surface: #141c27;
    --surface-2: #1b2532;
    --surface-img: #f2f4f7;
    --ink: #e8edf4;
    --ink-2: #b3c0d1;
    --ink-3: #8e9db2;
    --line: #26313f;
    --line-strong: #37455a;

    --navy: #6ea3e8;
    --navy-600: #86b4f0;
    --link: #8ab8f5;
    --link-hover: #ff8a80;
    --red-ink: #ff7b72;
    --focus: #7fb2ff;

    --shadow-1: 0 1px 2px rgb(0 0 0 / .5);
    --shadow-2: 0 2px 8px rgb(0 0 0 / .45), 0 14px 30px -12px rgb(0 0 0 / .6);
    --shadow-head: 0 1px 0 var(--line), 0 10px 26px -18px #000;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s5));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--t-md)/1.65 var(--font);
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s3);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--t-2xl); }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); }
h4, h5, h6 { font-size: var(--t-base); letter-spacing: 0; }

p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-color: color-mix(in srgb, var(--link) 35%, transparent); text-underline-offset: .18em; }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }

img, svg, video, iframe { max-width: 100%; height: auto; }
img { border: 0; }

hr {
  height: 1px; border: 0; margin: var(--s6) 0;
  background: linear-gradient(90deg, var(--line), color-mix(in srgb, var(--line) 20%, transparent));
}

small { font-size: var(--t-sm); color: var(--ink-2); }
code, kbd, pre, samp { font-family: var(--font-mono); font-size: .9em; }
pre { background: var(--surface-2); padding: var(--s4); border-radius: var(--r); overflow-x: auto; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: color-mix(in srgb, var(--red) 25%, transparent); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--navy); color: #fff; padding: var(--s3) var(--s4);
  border-radius: 0 0 var(--r) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* --------------------------------------------------------------------------
   3. Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: var(--shadow-head);
}
.site-header > * { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.site-header .bar,
.site-header > :first-child {
  display: flex; align-items: center; gap: var(--s4) var(--s5);
  flex-wrap: wrap;
  min-height: var(--header-h);
  padding-block: var(--s2);
}

.site-header .logo,
.site-header a:has(> img[src*="logo"]) { display: inline-flex; align-items: center; flex: 0 0 auto; }
.site-header .logo img, .site-header img[src*="logo"] { width: 200px; max-width: 46vw; height: auto; display: block; }

/* primary nav — 13 category links */
.site-header nav ul,
.site-header .nav {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s1) var(--s2); margin: 0; padding: 0;
}
.site-header nav a {
  display: inline-block; padding: var(--s2) var(--s3);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: .01em;
  color: var(--ink); text-decoration: none; border-radius: var(--pill);
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
.site-header nav a:hover { background: var(--surface-2); color: var(--red-ink); }
.site-header nav a[aria-current] {
  background: color-mix(in srgb, var(--navy) 12%, transparent);
  color: var(--navy);
}

/* search */
.site-header form, .site-header .search {
  display: flex; align-items: center; gap: var(--s2);
  margin-left: auto; flex: 1 1 220px; max-width: 360px;
}
input[type="search"], input[type="text"], input[type="email"], select, textarea {
  width: 100%; min-width: 0;
  padding: 10px var(--s3);
  font: inherit; font-size: var(--t-sm);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--pill);
  transition: border-color .18s ease, box-shadow .18s ease;
}
input::placeholder { color: var(--ink-3); }
input[type="search"]:hover { border-color: var(--navy-600); }
input[type="search"]:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); outline: none; }

button, input[type="submit"], .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px var(--s4);
  font: 600 var(--t-sm)/1 var(--font);
  color: #fff; background: var(--red-600);
  border: 1px solid transparent; border-radius: var(--pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
button:hover, input[type="submit"]:hover, .btn:hover { background: var(--red); box-shadow: var(--shadow-1); color: #fff; }
button:active, .btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--surface-2); color: var(--navy); box-shadow: none; }

/* --------------------------------------------------------------------------
   4. Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  max-width: var(--wrap); margin: 0 auto; padding: var(--s4) var(--gutter) 0;
}
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); margin: 0; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--ink-3); }
.breadcrumb li + li::before { content: "›"; color: var(--line-strong); font-size: 1.1em; line-height: 1; }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--link-hover); text-decoration: underline; }
.breadcrumb li:last-child { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   5. Page layout
   -------------------------------------------------------------------------- */
.page {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s5) var(--gutter) var(--s9);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
  align-items: start;
}
.content { min-width: 0; display: flow-root; }
.page-title {
  font-size: var(--t-3xl);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

/* sidebar nav panel */
.side {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s4);
}
.side h2 {
  margin: 0 0 var(--s3);
  padding: 0 var(--s2) var(--s3);
  font-size: var(--t-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line);
}
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side li { margin: 0; }
.side a {
  display: block; padding: var(--s2) var(--s3);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.35;
  color: var(--ink-2); text-decoration: none;
  border-radius: var(--r-sm);
  transition: background-color .16s ease, color .16s ease, padding-left .16s ease;
}
.side a:hover { background: var(--surface-2); color: var(--navy); padding-left: var(--s4); }
.side a[aria-current] {
  background: color-mix(in srgb, var(--navy) 12%, transparent);
  color: var(--navy);
  box-shadow: inset 3px 0 0 var(--red);
}

/* --------------------------------------------------------------------------
   6. Prose — editorial + verbatim legacy HTML
   -------------------------------------------------------------------------- */
.prose {
  max-width: 78ch;
  font-size: var(--t-md);
  color: var(--ink-2);
}
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: var(--s7) 0 var(--s3); font-size: var(--t-xl); color: var(--ink); }
.prose h3 { margin: var(--s6) 0 var(--s2); font-size: var(--t-lg); color: var(--ink); }
.prose h4, .prose h5, .prose h6 { margin: var(--s5) 0 var(--s2); color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: var(--s5); }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--red-ink); }
.prose blockquote {
  margin: var(--s5) 0; padding: var(--s3) var(--s5);
  border-left: 3px solid var(--red); background: var(--surface-2);
  border-radius: 0 var(--r) var(--r) 0; color: var(--ink);
}
.prose a { font-weight: 600; }
.prose strong, .prose b { color: var(--ink); font-weight: 700; }
.prose img {
  height: auto; border-radius: var(--r);
  background: var(--surface-img); box-shadow: var(--shadow-1);
}

/* legacy / bare elements injected verbatim */
.prose font { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.prose center { display: block; text-align: center; margin-bottom: var(--s4); }
.prose big { font-size: 1.05em; }
.prose u { text-underline-offset: .15em; }
.prose img[align="left"], .prose img[align="right"] { float: none; }
@media (min-width: 640px) {
  .prose img[align="left"]  { float: left;  margin: 0 var(--s5) var(--s4) 0; }
  .prose img[align="right"] { float: right; margin: 0 0 var(--s4) var(--s5); }
}
.prose [align="center"] { text-align: center; }
.prose::after { content: ""; display: block; clear: both; }

/* tables (editorial + archived spec tables) */
.prose table {
  width: 100%; max-width: 100%;
  margin: var(--s5) 0;
  border-collapse: collapse;
  font-size: var(--t-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.prose caption { caption-side: top; text-align: left; padding-bottom: var(--s2); font-weight: 700; color: var(--ink); }
.prose th, .prose td {
  padding: var(--s3) var(--s4);
  text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.prose th { background: var(--surface-2); color: var(--ink); font-weight: 700; }
.prose tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
/* nested legacy tables must not stack chrome */
.prose table table {
  margin: 0; border: 0; background: transparent; box-shadow: none; font-size: 1em;
}
.prose table table th, .prose table table td { padding: var(--s1) var(--s2); border: 0; background: transparent; }
.prose table[width], .prose td[width], .prose img[width] { max-width: 100%; }

@media (prefers-color-scheme: dark) {
  /* neutralise archived presentational attributes that break dark contrast */
  .prose [bgcolor], .prose [background] { background-color: transparent !important; background-image: none !important; }
  .prose font[color], .prose [color] { color: inherit !important; }
}

/* --------------------------------------------------------------------------
   7. Tile grid
   -------------------------------------------------------------------------- */
.grid {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s4);
}
.grid > li { margin: 0; display: flex; }
.grid > li > a {
  display: flex; flex-direction: column; width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  text-decoration: none; color: var(--ink);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.grid > li > a:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--navy) 40%, var(--line));
  box-shadow: var(--shadow-2);
  color: var(--ink);
}
.grid figure {
  margin: 0; padding: var(--s3);
  background: var(--surface-img);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
}
.grid figure img {
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  mix-blend-mode: multiply;
}
.grid .label,
.grid figcaption {
  display: block; flex: 1 1 auto;
  padding: var(--s3) var(--s4) var(--s4);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.4;
  color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.grid .price { padding: 0 var(--s4) var(--s4); color: var(--red-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   8. Product
   -------------------------------------------------------------------------- */
/* Direct children only. Magento 2 uses "product" as a utility class on inline elements
   too — <strong class="product name product-item-name"> — and turning one of those into
   a grid wrapped the product title one character per line. */
.content > .product,
.prose > .product {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5) var(--s7);
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(16px, 3vw, 32px);
}
.product > h1 { grid-column: 1 / -1; font-size: var(--t-2xl); margin-bottom: var(--s2); }
.product .gallery,
.product > figure,
.product > img {
  margin: 0;
  background: var(--surface-img);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4);
  display: block;
}
.product .gallery img, .product > figure img {
  width: 100%; max-height: 460px; object-fit: contain; display: block;
  mix-blend-mode: multiply;
}
.product .gallery { display: grid; gap: var(--s3); }
.product .gallery > img:not(:first-child) { max-height: 90px; }
.product .thumbs { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.product .thumbs img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-img); padding: 4px; }

.product .price {
  font-size: var(--t-2xl); font-weight: 700; line-height: 1.1;
  color: var(--red-ink);
  margin: 0 0 var(--s3);
  font-variant-numeric: tabular-nums;
}
.product .price del, .product .price .old { font-size: .5em; color: var(--ink-3); font-weight: 400; margin-left: var(--s2); }

.product .meta {
  margin: 0 0 var(--s5); padding: var(--s4);
  background: var(--surface-2); border-radius: var(--r);
  font-size: var(--t-sm); color: var(--ink-2);
  display: grid; gap: var(--s2);
}
.product .meta dt, .product .meta .k { font-weight: 700; color: var(--ink); }
.product .meta dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; }
.product .meta dd { margin: 0; }
.product .prose { max-width: none; }

/* --------------------------------------------------------------------------
   9. Pager
   -------------------------------------------------------------------------- */
.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s2);
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.pager ul { display: contents; list-style: none; margin: 0; padding: 0; }
.pager a, .pager span, .pager strong {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--s3);
  font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-2); text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.pager a:hover { background: var(--surface-2); color: var(--navy); border-color: var(--line-strong); }
.pager [aria-current="page"], .pager strong {
  background: var(--navy); border-color: var(--navy); color: #fff;
}
@media (prefers-color-scheme: dark) {
  .pager [aria-current="page"], .pager strong { color: var(--bg); }
}

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--s8);
  background: var(--navy-900);
  color: #c8d5e6;
  font-size: var(--t-sm);
  border-top: 4px solid var(--red);
}
@media (prefers-color-scheme: dark) {
  .site-footer { background: #0a1017; border-top-color: var(--red-600); }
}
.site-footer > * { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.site-footer .cols,
.site-footer > nav {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s5) var(--s6);
  padding-block: var(--s7) var(--s6);
}
.site-footer h2, .site-footer h3 {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: #ffffff; margin-bottom: var(--s3);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.site-footer a { color: #c8d5e6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer address { font-style: normal; line-height: 1.7; color: #a9bbd2; }
.site-footer .legal,
.site-footer > p:last-child {
  border-top: 1px solid rgb(255 255 255 / .12);
  padding-block: var(--s4) var(--s6);
  color: #9db0c9; font-size: var(--t-xs);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); align-items: center; justify-content: space-between;
}
.site-footer :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

/* nav collapse — CSS only: becomes a snapping, edge-fading scroll rail */
@media (max-width: 819.98px) {
  :root { --header-h: 56px; }
  .site-header > :first-child { padding-block: var(--s2); gap: var(--s2); }
  .site-header form, .site-header .search { order: 2; max-width: none; flex: 1 1 100%; margin-left: 0; }
  .site-header nav {
    order: 3; flex: 1 1 100%;
    margin-inline: calc(var(--gutter) * -1);
    padding-block: var(--s1) var(--s2);
    border-top: 1px solid var(--line);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    scroll-snap-type: inline proximity;
  }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav ul, .site-header .nav {
    flex-wrap: nowrap; width: max-content;
    padding-inline: var(--gutter);
    gap: var(--s2);
  }
  .site-header nav li { scroll-snap-align: center; }
  .site-header nav a {
    background: var(--surface-2);
    border: 1px solid var(--line);
  }
}

/* sidebar compacts on small screens and drops below the content */
@media (max-width: 899.98px) {
  .page { gap: var(--s5); }
  .side { order: 2; }
  .content { order: 1; }
  .side ul { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s1) var(--s2); }
  .side a { border: 1px solid var(--line); }
  .side a:hover { padding-left: var(--s3); }
}

@media (max-width: 640px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
  .prose table { display: block; overflow-x: auto; white-space: normal; }
  .product { padding: var(--s4); }
}

@media (min-width: 900px) {
  .page {
    grid-template-columns: 264px minmax(0, 1fr);
    gap: var(--s7);
  }
  .side {
    position: sticky;
    top: calc(var(--header-h) + var(--s4));
    max-height: calc(100dvh - var(--header-h) - var(--s6));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .product { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .product > h1 { grid-column: 2; margin-bottom: var(--s3); }
}

@media (min-width: 1400px) {
  :root { --wrap: 1240px; }
  .page { gap: var(--s8); }
}

/* --------------------------------------------------------------------------
   12. Motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .grid > li > a:hover { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --line: #6b7a8f; --ink-2: #263242; --ink-3: #43536a; }
  a { text-decoration-color: currentColor; }
}

@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #fff; --surface-img: #fff;
    --ink: #000; --ink-2: #1a1a1a; --ink-3: #444; --line: #bbb;
    --shadow-1: none; --shadow-2: none; --shadow-head: none;
    --wrap: 100%; --gutter: 0;
  }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .site-header nav, .site-header form, .site-header .search,
  .side, .pager, .site-footer .cols, .skip-link { display: none !important; }
  .site-header { position: static; box-shadow: none; border-bottom: 1pt solid #000; }
  .page { display: block; padding: 0; }
  .product, .side, .grid > li > a { box-shadow: none; border-color: #bbb; }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .prose a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; word-break: break-all; }
  h1, h2, h3, .page-title { page-break-after: avoid; break-after: avoid; }
  .grid > li, .product, table, figure { page-break-inside: avoid; break-inside: avoid; }
  img { max-width: 100% !important; }
}/* ==========================================================================
   Mad Motors 2026 — legacy component mapping
   --------------------------------------------------------------------------
   The mirror spans three shop platforms (osCommerce, Magento 1, Magento 2) whose
   markup all lands verbatim inside .prose. Rather than rewrite 25,481 pages of
   archived HTML, this maps each platform's class names onto the same visual
   language as the native .grid / .product components, so a category page from
   2007 and one from 2023 render identically.

   Loaded after mm2026.css; it only adds, it never redefines the tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page titles that live inside the archived content
   The template prints <h1 class="page-title"> only when the archived markup has no
   <h1> of its own. The 347 pages carrying h1.mm-h1, and every Magento page with its
   own h1.page-title, were styled by the retired polish-lite.css and now render as a
   bare browser-default heading — visibly out of step with the rest of the site.
   -------------------------------------------------------------------------- */
.prose > h1,
.prose h1.mm-h1,
.prose h1.page-title {
  font-size: var(--t-3xl);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  max-width: none;
}
.prose .page-title-wrapper > h1 { margin-top: 0; }

/* --------------------------------------------------------------------------
   Measure — listings need the full column, body copy does not
   -------------------------------------------------------------------------- */
.prose { max-width: none; }
.prose > p,
.prose > h2, .prose > h3, .prose > h4, .prose > h5, .prose > h6,
.prose > ul:not([class]), .prose > ol:not([class]),
.prose > blockquote, .prose > .std > p {
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   Dead shop furniture and third-party widgets
   A static replica has no cart, no search index and no review service, so these
   controls can only mislead. Hidden rather than deleted: several are wrappers
   whose siblings hold real copy.
   -------------------------------------------------------------------------- */
.prose .no-display,
.prose .add-to-cart, .prose .add-to-box, .prose .add-to-holder, .prose .add-to-links,
.prose .toolbar, .prose .limiter, .prose .sorter, .prose .pager .amount,
.prose .breadcrumbs, .prose ul.breadcrumbs,
.prose .feefo_logo, .prose .flint_feefo_logo, .prose .feefo,
.prose .promo-bnr, .prose .adbanner,
.prose .product-options-bottom, .prose .availability, .prose .email-friend,
.prose form[action*="checkout"], .prose form[action*="wishlist"],
.prose button.button, .prose .btn-cart, .prose .qty-holder, .prose .input-box,
.prose select, .prose input[type="text"], .prose input[type="submit"], .prose input[type="button"],
.prose .rating-links, .prose .ratings, .prose ul.tabs,
.prose .left-menu > h2, .prose .left-menu > ul {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Product page — Magento 1 .product-view / Magento 2 .product-info-main
   -------------------------------------------------------------------------- */
.prose .product-view .product-essential,
.prose .product-info-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: start;
}
/* The content column sits beside a 264px sidebar, so the split can only happen once
   the viewport is wide enough to leave the text side a readable measure. */
@media (min-width: 900px) {
  .prose .product-view .product-essential > form,
  .prose .product-view > form { display: block; }
  .prose .product-view .product-img-box {
    float: left;
    width: min(360px, 38%);
    margin: 0 var(--s6) var(--s5) 0;
  }
  .prose .product-view .product-shop { display: flow-root; overflow: visible; }
  .prose .product-view .product-collateral { clear: both; }
}
.prose .product-img-box {
  background: var(--surface-img);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s4);
}
/* Wayback captured roughly 3,900 product photos for a 90,000-item catalogue, so most
   product pages have an empty image well. A marked placeholder beats a blank box. */
.prose .product-img-box:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans']))) {
  min-height: 220px;
  background-image: url("/assets/no-photo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 220px auto;
}
.prose .more-views:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans']))) { display: none; }
.prose .more-views ul:empty { display: none; }
.prose .product-img-box img {
  width: 100%; height: auto;
  object-fit: contain;
  background: transparent; box-shadow: none; border-radius: var(--r-sm);
  mix-blend-mode: multiply;
}
.prose .more-views { margin-top: var(--s3); }
.prose .more-views h2, .prose .more-views > h3 {
  font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); margin: 0 0 var(--s2);
}
.prose .more-views ul {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  list-style: none; margin: 0; padding: 0;
}
.prose .more-views li { margin: 0; }
.prose .more-views img {
  width: 68px; height: 68px; object-fit: contain;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); padding: 3px;
}

.prose .product-shop { min-width: 0; }
.prose .product-shop h1,
.prose .product-name h1 {
  font-size: var(--t-2xl);
  margin: 0 0 var(--s3);
  color: var(--ink);
}
.prose .brand-product, .prose .brand-product-code {
  margin: 0 0 var(--s1);
  font-size: var(--t-sm); color: var(--ink-3);
}
.prose .brand-logo img { max-height: 44px; width: auto; box-shadow: none; background: none; }
/* the archived catalogue falls back to a generic placeholder logo; showing it adds nothing */
.prose .brand-logo img[src*="default"] { display: none; }

/* "need more technical info? Click here" ships as an <h2> and outshouts the product name */
.prose .needmore h2, .prose .needmore > h2 {
  font-size: var(--t-md); font-weight: 600;
  margin: var(--s5) 0 var(--s2);
  color: var(--ink-2);
}

.prose .price-box {
  margin: var(--s4) 0;
  font-size: var(--t-2xl); font-weight: 700;
  color: var(--red-ink); line-height: 1.1;
}
.prose .price-box .old-price, .prose .price-box .special-price .price-label { display: block; }
.prose .price-box .old-price {
  font-size: .45em; font-weight: 400; color: var(--ink-3); text-decoration: line-through;
}
.prose .price-box .price-label {
  font-size: .38em; font-weight: 600; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em;
}
.prose .price-box p { margin: 0; }

.prose .short-description, .prose .product-collateral .std {
  font-size: var(--t-md); color: var(--ink-2);
}
.prose .product-collateral {
  grid-column: 1 / -1;
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.prose .product-collateral .padder > h2:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
   Tile listings — every platform's grid becomes the same card
   osCommerce  ul.prod-box / table.productListing
   Magento 1   ul.products-grid, ol.mini-products-list, ul.styling
   Magento 2   ol.product-items
   -------------------------------------------------------------------------- */
.prose ul.prod-box,
.prose ul.products-grid,
.prose ol.product-items,
.prose ol.mini-products-list,
.prose .category-products > ul,
.prose ul.grid {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s4);
  align-items: stretch;
}
.prose ul.prod-box > li,
.prose ul.products-grid > li,
.prose ol.product-items > li,
.prose ol.mini-products-list > li,
.prose .category-products > ul > li,
.prose ul.grid > li {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prose ul.prod-box > li:hover,
.prose ul.products-grid > li:hover,
.prose ol.product-items > li:hover,
.prose ol.mini-products-list > li:hover,
.prose .category-products > ul > li:hover,
.prose ul.grid > li:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--navy) 40%, var(--line));
  box-shadow: var(--shadow-2);
}
.prose ul.prod-box > li::marker,
.prose ul.products-grid > li::marker,
.prose ol.product-items > li::marker,
.prose ol.mini-products-list > li::marker,
.prose .category-products > ul > li::marker,
.prose ul.grid > li::marker { content: ""; }

/* the image link */
.prose li > a.category-img,
.prose li > a.product-image,
.prose li > a.product-item-photo,
.prose li > .product-image-container {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s3);
  background: var(--surface-img);
  border-bottom: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.prose li > a.category-img img,
.prose li > a.product-image img,
.prose li > a.product-item-photo img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: none; box-shadow: none; border-radius: 0;
  mix-blend-mode: multiply;
}
/* the caption link */
.prose li > a.category-name,
.prose li > .product-name,
.prose li > h2.product-name,
.prose li > .product-item-name,
.prose li > .product-details > .product-name {
  display: block;
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.4;
  color: var(--ink); text-decoration: none;
}
.prose li > a.category-name:hover { color: var(--red-ink); text-decoration: underline; }
.prose li .price-box,
.prose li .price {
  margin: 0; padding: 0 var(--s4) var(--s4);
  font-size: var(--t-md); font-weight: 700; color: var(--red-ink);
}
.prose li .product-details { padding: 0; }
/* tiles that only ever had text keep the same card, just without the image well */
.prose ul.prod-box > li > a:only-child { padding: var(--s4); }

/* --------------------------------------------------------------------------
   Magento 2 department tiles
   <div class="mainCat-brand-block"><div class="brand-blocks"><a>
      <span class="mainCat-pic"><img></span><span class="mainCat-name">Label</span>
   Unstyled these render as a full-width raw photo with the label dangling beside it.
   -------------------------------------------------------------------------- */
.prose .mainCat-brand-block {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--s4);
  margin: var(--s5) 0 0;
}
.prose .brand-blocks {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prose .brand-blocks:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--navy) 40%, var(--line));
  box-shadow: var(--shadow-2);
}
.prose .brand-blocks > a {
  display: flex; flex-direction: column; width: 100%;
  text-decoration: none; color: var(--ink); font-weight: 600;
}
.prose .brand-blocks .mainCat-pic {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s3);
  aspect-ratio: 4 / 3;
  background: var(--surface-img);
  border-bottom: 1px solid var(--line);
}
.prose .brand-blocks .mainCat-pic img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: none; box-shadow: none; border-radius: 0;
  mix-blend-mode: multiply;
}
/* a tile whose photo never made it into the archive still needs to fill its slot */
.prose .brand-blocks > a:not(:has(img))::before {
  content: ""; display: block; width: 100%; aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--line);
  background: var(--surface-img) url("/assets/no-photo.svg") center / 150px auto no-repeat;
}
.prose .brand-blocks .mainCat-name {
  display: block; flex: 1 1 auto;
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm); line-height: 1.4;
}
.prose .brand-blocks > a:hover .mainCat-name { color: var(--red-ink); }

/* the "click here" pill row */
.prose ul.styling {
  list-style: none; display: flex; flex-wrap: wrap; gap: var(--s2);
  margin: var(--s4) 0; padding: 0;
}
.prose ul.styling > li { margin: 0; }
.prose ul.styling > li::marker { content: ""; }
.prose ul.styling a {
  display: inline-block;
  padding: var(--s2) var(--s4);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--t-sm); font-weight: 600;
  color: var(--ink-2); text-decoration: none;
}
.prose ul.styling a:hover {
  background: var(--surface); border-color: var(--line-strong);
  color: var(--red-ink); text-decoration: none;
}

/* --------------------------------------------------------------------------
   Homepage widgets that were driven by JavaScript
   The carousels shipped as plain stacked markup and the scripts are long gone, so a
   seven-slide banner rotator renders as 2,700px of stacked banners and the tabbed
   product widget collapses to nothing — taking 19 real product images with it.
   -------------------------------------------------------------------------- */
.prose .carousel-container .banner-item:not(:first-child) { display: none; }
.prose .carousel-container .banner-item img {
  width: 100%; height: auto;
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.prose .featured-product-block .tabs > ul { display: none; }
.prose .tab-content ~ .tab-content { display: none; }   /* one panel, not four */
.prose .tab-content .owl-carousel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--s4);
}
.prose .tab-content .item {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.prose .tab-content .item:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.prose .tab-content .item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: contain;
  background: var(--surface-img); box-shadow: none; border-radius: 0;
  border-bottom: 1px solid var(--line);
  mix-blend-mode: multiply;
}
.prose .tab-content .item > * { width: 100%; min-width: 0; }
.prose .tab-content .item .product-image { order: -1; }   /* photo first, name under it */
.prose .tab-content .item .fprod-name a,
.prose .tab-content .item .product-item-link {
  display: block; padding: var(--s3);
  font-size: var(--t-sm); font-weight: 600; line-height: 1.4;
}
.prose .tab-content .item strong { display: block; font-weight: inherit; }
.prose .tab-content .item .product-item-inner, .prose .tab-content .item .actions { display: none; }
/* a card with no photo would otherwise be a floating block of text beside picture cards */
.prose .tab-content .item:not(:has(img))::before {
  content: ""; display: block; width: 100%; aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--line);
  background: var(--surface-img) url("/assets/no-photo.svg") center / 150px auto no-repeat;
}
.prose .tab-content .item .price-box, .prose .tab-content .item .price {
  font-size: var(--t-md); padding: 0 var(--s3) var(--s3); margin: 0;
}
.prose .featured-product-block > h2, .prose .featured-product-block .block-title {
  font-size: var(--t-xl); margin: var(--s7) 0 var(--s3);
}
.prose .advertisement-block { display: grid; gap: var(--s4); margin-top: var(--s6); }
.prose .advertisement-block img { width: 100%; height: auto; border-radius: var(--r); }

/* --------------------------------------------------------------------------
   Related products — archived as a left column; presented as a closing section
   -------------------------------------------------------------------------- */
.prose .col-left, .prose .sidebar, .prose .left-menu, .prose .left-block {
  float: none; width: auto; margin: 0; padding: 0;
}
.prose .col-left {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.prose .block-title, .prose .block-title strong {
  font-size: var(--t-lg); font-weight: 700; color: var(--ink);
  margin: 0 0 var(--s3);
}
.prose .block-title span { font-size: inherit; }

/* --------------------------------------------------------------------------
   Layout tables vs data tables
   Pre-2009 pages use <table> for page structure, not tabular data. Giving those the
   card treatment (border, surface, hover rows) draws boxes around nothing. Only
   tables that actually look tabular keep it.
   -------------------------------------------------------------------------- */
.prose table:not(:has(th)):not(.productListing):not(.data-table) {
  border: 0; background: transparent; box-shadow: none;
  margin: 0; font-size: inherit; border-radius: 0;
}
.prose table:not(:has(th)):not(.productListing):not(.data-table) > tbody > tr > td,
.prose table:not(:has(th)):not(.productListing):not(.data-table) > tr > td {
  border: 0; padding: 0; background: transparent;
}
.prose table:not(:has(th)):not(.productListing):not(.data-table) tbody tr:hover td {
  background: transparent;
}

/* --------------------------------------------------------------------------
   osCommerce listing tables — the only listing that is a <table>
   -------------------------------------------------------------------------- */
.prose table.productListing { border: 0; background: transparent; }
.prose table.productListing td { vertical-align: middle; }
.prose table.productListing img { box-shadow: none; }
.prose .productListing-heading { background: var(--surface-2); font-weight: 700; color: var(--ink); }
.prose table.middleboxes { border: 0; background: transparent; }
.prose table.middleboxes td { border: 0; }

/* --------------------------------------------------------------------------
   Pagination that survived inside the content
   -------------------------------------------------------------------------- */
.prose .pager, .prose .pages {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  align-items: center; justify-content: center;
  margin: var(--s6) 0 0; padding: var(--s4) 0 0;
  border-top: 1px solid var(--line);
}
.prose .pages ol, .prose .pages ul { display: contents; list-style: none; margin: 0; padding: 0; }
.prose .pages li { margin: 0; }
.prose .pages li::marker { content: ""; }
.prose .pages a, .prose .pages .current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface);
  font-weight: 600; text-decoration: none; color: var(--ink-2);
}
.prose .pages a:hover { border-color: var(--line-strong); color: var(--navy); }
.prose .pages .current { background: var(--navy); border-color: var(--navy); color: #fff; }

/* --------------------------------------------------------------------------
   Archived images that carry hardcoded pixel sizes
   -------------------------------------------------------------------------- */
.prose img[width]:not([width="1"]) { height: auto; }
.prose img[height="1"], .prose img[width="1"] { display: none; }
.prose a img { box-shadow: none; }

/* the zoom controls need the slider script, which is gone */
.prose .product-img-box img.btn-zoom-in,
.prose .product-img-box img.btn-zoom-out,
.prose img[id="zoom_in"], .prose img[id="zoom_out"] { display: none; }
/* ==========================================================================
   Mad Motors — components layer
   --------------------------------------------------------------------------
   One card, one section block, one readable-content system, applied across all
   three CMS generations. Loaded last so it wins over the platform mapping.

   Design notes that are load-bearing:
     * Card padding lives on the TEXT children, never on the card, because the
       photo well must bleed to the card edge. When the title is a bare text node
       instead of a link the old rule missed it and the text touched the border.
     * order:-1 on the photo well puts the image first even where the archived
       markup prints the product name before the photo.
     * Every card falls back to a drawn placeholder when the archive has no photo,
       so a grid never mixes tall picture cards with short text-only ones.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Grid containers — every platform's listing becomes the same grid
   -------------------------------------------------------------------------- */
.prose ul.grid,
.prose ul.prod-box,
.prose ul.products-grid,
.prose ol.product-items,
.prose ol.mini-products-list,
.prose ul.subcat-products,
.prose .category-products > ul,
.prose .mainCat-brand-block,
.prose .tab-content .owl-carousel {
  list-style: none;
  margin: var(--s5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  grid-auto-rows: 1fr;                     /* equal-height rows */
  gap: var(--s4);
  align-items: stretch;
}
.prose .subcat-listing { display: block; }

/* --------------------------------------------------------------------------
   2. The card
   -------------------------------------------------------------------------- */
.prose ul.grid > li,
.prose ul.prod-box > li,
.prose ul.products-grid > li,
.prose ol.product-items > li,
.prose ol.mini-products-list > li,
.prose ul.subcat-products > li,
.prose .category-products > ul > li,
.prose .mainCat-brand-block > .brand-blocks,
.prose .tab-content .item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.prose ul.grid > li:hover,
.prose ul.prod-box > li:hover,
.prose ul.products-grid > li:hover,
.prose ol.product-items > li:hover,
.prose ol.mini-products-list > li:hover,
.prose ul.subcat-products > li:hover,
.prose .category-products > ul > li:hover,
.prose .mainCat-brand-block > .brand-blocks:hover,
.prose .tab-content .item:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--navy) 34%, var(--line));
  box-shadow: var(--shadow-2);
}
.prose ul.grid > li::marker,
.prose ul.prod-box > li::marker,
.prose ul.products-grid > li::marker,
.prose ol.product-items > li::marker,
.prose ol.mini-products-list > li::marker,
.prose ul.subcat-products > li::marker,
.prose .category-products > ul > li::marker { content: ""; }

/* the link that fills a card */
.prose ul.grid > li > a,
.prose ul.prod-box > li > a:only-of-type,
.prose ul.subcat-products > li > a,
.prose .mainCat-brand-block > .brand-blocks > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   3. Photo well
   -------------------------------------------------------------------------- */
.prose ul.grid > li figure,
.prose li > a.category-img,
.prose li > a.product-image,
.prose li > a.product-item-photo,
.prose li > .product-image-container,
.prose .tab-content .item > .product-image,
.prose .brand-blocks .mainCat-pic {
  order: -1;                               /* photo first, whatever the markup says */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: var(--s3);
  aspect-ratio: 3 / 2;
  background: var(--surface-img);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.prose ul.grid > li figure img,
.prose li > a.category-img img,
.prose li > a.product-image img,
.prose li > a.product-item-photo img,
.prose .tab-content .item > .product-image img,
.prose .brand-blocks .mainCat-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: none;
  box-shadow: none;
  border-radius: 0;
  mix-blend-mode: multiply;
}
/* osCommerce brand tiles put the <img> straight inside the link */
.prose ul.subcat-products > li > a > img {
  order: -1;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  padding: var(--s3);
  background: var(--surface-img);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   4. Card text — padding belongs here, so the photo can still bleed
   -------------------------------------------------------------------------- */
.prose ul.grid > li .label,
.prose li > a.category-name,
.prose li > .product-name,
.prose li > h2.product-name,
.prose li > .product-item-name,
.prose li > .product-details,
.prose .brand-blocks .mainCat-name,
.prose ul.subcat-products > li > a > h3,
.prose .tab-content .item > .fprod-name {
  display: block;
  flex: 1 1 auto;
  margin: 0;
  padding: var(--s4) var(--s4) var(--s2);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
/* clamp long titles so a four-line name cannot set the height of a whole row */
.prose ul.grid > li .label,
.prose li > a.category-name,
.prose .brand-blocks .mainCat-name,
.prose ul.subcat-products > li > a > h3,
.prose .tab-content .item .product-item-link {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prose .tab-content .item .fprod-name a,
.prose .tab-content .item .product-item-link,
.prose li > .product-name a,
.prose li > .product-details .product-name a {
  display: block;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  text-decoration: none;
}
.prose ul.grid > li:hover .label,
.prose li:hover > a.category-name,
.prose .brand-blocks:hover .mainCat-name,
.prose li:hover .product-item-link { color: var(--red-ink); }

/* nested wrapper Magento 2 puts between the card and its text */
.prose .tab-content .item > .product.details,
.prose li > .product > .product-details { padding: 0; }

/* --------------------------------------------------------------------------
   5. Price — pinned to the bottom so every card lines up
   -------------------------------------------------------------------------- */
.prose ul.grid > li .price-box,
.prose li .price-box,
.prose .tab-content .item .price-box,
.prose .brand-blocks .price-box {
  margin: auto 0 0;
  padding: 0 var(--s4) var(--s4);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--red-ink);
}
/* "PRICE:" printed in tiny grey caps beside the figure adds nothing */
.prose li .price-label,
.prose .tab-content .item .price-label,
.prose li .price-box .price-label { display: none; }
.prose li .price-box p,
.prose li .price-box span { margin: 0; display: inline; }
.prose li .price-box .old-price {
  display: block;
  font-size: .8em;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: line-through;
}

/* --------------------------------------------------------------------------
   6. Missing photo — the archive holds ~3,900 photos for a 90,000-item catalogue
   -------------------------------------------------------------------------- */
.prose ul.grid > li > a:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans'])))::before,
.prose ul.prod-box > li:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans'])))::before,
.prose ul.products-grid > li:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans'])))::before,
.prose ol.product-items > li:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans'])))::before,
.prose ol.mini-products-list > li:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans'])))::before,
.prose ul.subcat-products > li > a:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans'])))::before,
.prose .mainCat-brand-block > .brand-blocks > a:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans'])))::before,
.prose .tab-content .item:not(:has(img:not(.btn-zoom-in):not(.btn-zoom-out):not([src*='spacer']):not([src*='pixel_trans'])))::before {
  content: "";
  order: -1;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-bottom: 1px solid var(--line);
  background: var(--surface-img) url("/assets/no-photo.svg") center / 148px auto no-repeat;
}

/* --------------------------------------------------------------------------
   7. Section blocks
   -------------------------------------------------------------------------- */
.mm-section { margin: var(--s8) 0 0; }
.mm-section:first-child { margin-top: 0; }
.mm-section--tint {
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--s7) var(--gutter);
  background: var(--surface-2);
  border-block: 1px solid var(--line);
}
.mm-section--card {
  padding: var(--s6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.mm-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.mm-eyebrow {
  display: block;
  margin: 0 0 var(--s1);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-ink);
}
.mm-section__head h2 {
  margin: 0;
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--ink);
}
.mm-section__head p { margin: var(--s1) 0 0; color: var(--ink-3); font-size: var(--t-sm); }
.mm-more {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--link);
  text-decoration: none;
  white-space: nowrap;
}
.mm-more::after {
  content: "";
  width: 1em; height: 1em;
  background: currentColor;
  -webkit-mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat;
          mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat;
}
.mm-more:hover { color: var(--red-ink); text-decoration: underline; }

/* section artwork — mask + currentColor, so it always matches its own section */
.mm-section__art {
  --art: none;
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 2 / 1;
  margin-left: auto;
  background: currentColor;
  color: var(--navy);
  opacity: .13;
  -webkit-mask: var(--art) center / contain no-repeat;
          mask: var(--art) center / contain no-repeat;
}
.mm-section--tint .mm-section__art { color: var(--navy); opacity: .16; }

/* --------------------------------------------------------------------------
   7b. Hero — text-led. The archived promo banner that sat here was a photo of a
       fitment-centre advert; it read as a leftover ad, not as a shopfront.
   -------------------------------------------------------------------------- */
.mm-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  align-items: center;
  margin: 0 0 var(--s7);
  padding: clamp(24px, 4vw, 48px);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--navy) 10%, transparent) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.mm-hero h2 {
  margin: 0 0 var(--s3);
  font-size: var(--t-2xl);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  color: var(--ink);
}
.mm-hero p { margin: 0 0 var(--s4); max-width: 52ch; color: var(--ink-2); font-size: var(--t-md); }
.mm-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0; }
.mm-hero::after {
  content: "";
  display: none;
  width: 100%;
  aspect-ratio: 42 / 17;
  background: currentColor;
  color: var(--navy);
  opacity: .18;
  -webkit-mask: url("/assets/art/hero-car.svg") center / contain no-repeat;
          mask: url("/assets/art/hero-car.svg") center / contain no-repeat;
}
@media (min-width: 900px) { .mm-hero::after { display: block; } }
@media (min-width: 900px) {
  .mm-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s7); }
}

.mm-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s5);
  border-radius: var(--pill);
  border: 1px solid transparent;
  background: var(--navy);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.mm-btn:hover { background: var(--navy-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-2); }
.mm-btn--ghost { background: transparent; color: var(--navy); border-color: var(--line-strong); }
.mm-btn--ghost:hover { background: var(--surface-2); color: var(--navy); }

/* --------------------------------------------------------------------------
   8. Department grid — icon tiles, because the archived category images are
      car-maker logos and several unrelated departments share the same one
   -------------------------------------------------------------------------- */
.mm-depts {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--s3);
}
.mm-depts li { margin: 0; }
.mm-depts a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  height: 100%;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.mm-depts a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--navy) 38%, var(--line));
  box-shadow: var(--shadow-2);
  color: var(--navy);
}
.mm-depts a::before {
  content: "";
  flex: 0 0 auto;
  width: 30px; height: 30px;
  background: currentColor;
  color: var(--navy);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.mm-depts a:hover::before { color: var(--red-ink); }

/* --------------------------------------------------------------------------
   9. Trust strip
   -------------------------------------------------------------------------- */
.mm-trust {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s5);
}
.mm-trust > li { margin: 0; }
.mm-trust h3 {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s2);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
}
.mm-trust h3::before {
  content: "";
  flex: 0 0 auto;
  width: 26px; height: 26px;
  background: currentColor;
  color: var(--red-ink);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.mm-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.mm-trust li { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

/* --------------------------------------------------------------------------
   10. Sidebar — icons keyed off the href, so no page markup had to change
   -------------------------------------------------------------------------- */
.side h2 { letter-spacing: .1em; }
.side a {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border-radius: var(--r-sm);
}
/* --has-icon is set alongside --icon in icon-map.css. A custom property cannot be
   tested in a selector, but var(--has-icon, none) resolves to none for any link the
   map does not cover, so unmapped items simply get no marker. */
.side a::before {
  content: "";
  display: var(--has-icon, none);
  flex: 0 0 auto;
  width: 18px; height: 18px;
  background: currentColor;
  opacity: .5;
  -webkit-mask: var(--icon, none) center / contain no-repeat;
          mask: var(--icon, none) center / contain no-repeat;
}
.side a:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   11. Readable content — FAQ blocks, callouts, spec lists
   -------------------------------------------------------------------------- */
.mm-faq { display: grid; gap: var(--s3); margin: var(--s5) 0 0; }
.mm-faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.mm-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4) var(--s5);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.mm-faq summary::-webkit-details-marker { display: none; }
.mm-faq summary::after {
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  background: currentColor;
  color: var(--ink-3);
  -webkit-mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat;
          mask: url("/assets/icons/chevron-right.svg") center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform .18s ease;
}
.mm-faq details[open] summary::after { transform: rotate(-90deg); }
.mm-faq summary:hover { color: var(--navy); }
.mm-faq details > :not(summary) {
  margin: 0;
  padding: 0 var(--s5) var(--s5);
  color: var(--ink-2);
  font-size: var(--t-base);
  line-height: 1.7;
}
.mm-faq details[open] summary { border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }

.mm-note {
  display: flex;
  gap: var(--s3);
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--r) var(--r) 0;
  color: var(--ink-2);
  font-size: var(--t-base);
}

/* --------------------------------------------------------------------------
   12. Body copy — the user's "text just looks thrown" note
   -------------------------------------------------------------------------- */
.prose { font-size: var(--t-md); line-height: 1.75; color: var(--ink-2); }
.prose p { margin: 0 0 var(--s4); }
.prose > h2, .prose .std > h2 {
  margin: var(--s7) 0 var(--s3);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
}
.prose > h3, .prose .std > h3 {
  margin: var(--s6) 0 var(--s2);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
}
/* a long all-caps run reads as shouting; small-caps keeps the emphasis, drops the volume */
.prose p > strong:only-child,
.prose p > b:only-child { color: var(--ink); }

/* legacy bullet lists sat flush against the text with no rhythm */
.prose ul:not([class]) , .prose ol:not([class]) { margin: 0 0 var(--s4); padding-left: var(--s5); }
.prose ul:not([class]) > li, .prose ol:not([class]) > li { margin-bottom: var(--s2); padding-left: var(--s1); }

/* --------------------------------------------------------------------------
   13. Alloy Wheels landing — size and colour pickers, brand grid
   -------------------------------------------------------------------------- */
.prose .alloys-size > ul,
.prose .alloys-colour > ul {
  list-style: none; margin: var(--s4) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s3);
}
.prose .alloys-size > ul > li,
.prose .alloys-colour > ul > li {
  margin: 0;
  padding: var(--s2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
/* these source graphics are 42x162 — a portrait strip. Forcing a landscape box left a
   thin black sliver floating in white space, so the image sets its own height. */
.prose .alloys-size img,
.prose .alloys-colour img {
  width: auto; max-width: 100%; height: auto; max-height: 96px;
  margin: 0 auto; display: block;
  object-fit: contain;
  background: none; box-shadow: none; border-radius: 0;
  mix-blend-mode: multiply;
}
.prose .alloys-search:empty { display: none; }
.prose .category-head { margin: 0; }
.prose .category-head h1 { margin: 0 0 var(--s5); }

/* --------------------------------------------------------------------------
   14. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .prose ul.grid, .prose ul.prod-box, .prose ul.products-grid,
  .prose ol.product-items, .prose ol.mini-products-list,
  .prose ul.subcat-products, .prose .mainCat-brand-block,
  .prose .tab-content .owl-carousel {
    grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
    gap: var(--s3);
  }
  .mm-depts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .mm-section { margin-top: var(--s7); }
  .mm-section--card { padding: var(--s5) var(--s4); }
}

@media (prefers-color-scheme: dark) {
  /* archived product shots are cut out on white; multiply would black them out */
  .prose ul.grid > li figure img,
  .prose li > a.category-img img,
  .prose li > a.product-image img,
  .prose li > a.product-item-photo img,
  .prose .tab-content .item > .product-image img,
  .prose .brand-blocks .mainCat-pic img,
  .prose ul.subcat-products > li > a > img,
  .prose .alloys-size img,
  .prose .alloys-colour img { mix-blend-mode: normal; }
}


/* --------------------------------------------------------------------------
   15. Logo in dark mode
   The wordmark is navy and its strapline mid-grey, both baked into the SVG, so on a
   dark header they all but vanish. CSS cannot swap an <img> src, so the image is
   hidden and a light variant painted behind it at the same size.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  .site-header .brand {
    background: url("/assets/logo-dark.svg") left center / contain no-repeat;
  }
  .site-header .brand img { visibility: hidden; }
}


/* --------------------------------------------------------------------------
   16. Empty photo wells
   osCommerce emits <a class="category-img"></a> with no <img> on 1,679 tiles.
   Styling that as a photo well drew a grey box, and the card placeholder then
   drew a second one beneath it. Collapse the empty anchor and let the
   placeholder be the only well.
   -------------------------------------------------------------------------- */
.prose li > a.category-img:not(:has(img)),
.prose li > a.product-image:not(:has(img)),
.prose .brand-blocks .mainCat-pic:not(:has(img)) { display: none; }

/* --------------------------------------------------------------------------
   17. Paragraph breaks
   16,810 pages use <br><br> as their paragraph separator. Hiding the second <br>
   welded every paragraph into one slab — the single biggest reason the copy read
   as "thrown". Give it real paragraph spacing instead of removing it.
   -------------------------------------------------------------------------- */
.prose br + br { display: block; content: ""; height: var(--s4); }
.prose br + br + br { display: none; }

/* --------------------------------------------------------------------------
   18. Order call to action
   A priced product with no way to act on the price is a dead end. There is no
   checkout, so the honest action is an email carrying the part name.
   -------------------------------------------------------------------------- */
.prose .mm-order {
  margin: var(--s5) 0;
  padding: var(--s5);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r) var(--r) 0;
}
.prose .mm-order__note {
  margin: 0 0 var(--s4);
  max-width: 60ch;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-2);
}
.prose .mm-order__actions {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  margin: 0;
}
.prose .mm-order .mm-btn { text-decoration: none; }

/* --------------------------------------------------------------------------
   19. Header nav on one line
   13 items needed 1,205px inside a 1,160px wrapper, so "4x4" was orphaned onto a
   second row. Tightening the chip padding and gap brings it to ~1,130px; nowrap
   plus a scroll rail guarantees it never orphans a single item at any width.
   -------------------------------------------------------------------------- */
@media (min-width: 820px) {
  .site-header nav { overflow-x: auto; scrollbar-width: none; }
  .site-header nav::-webkit-scrollbar { display: none; }
  .site-header nav ul,
  .site-header .nav {
    flex-wrap: nowrap;
    gap: var(--s1);
    width: max-content;
    max-width: none;
  }
  .site-header nav a {
    padding: 6px 10px;
    white-space: nowrap;
    letter-spacing: 0;
  }
}

/* --------------------------------------------------------------------------
   20. Tiles whose label is a bare text node
   637 osCommerce tiles are <li><img>Label</li> — the label is not an element, so
   no selector can reach it and it inherited the 17px body size with 1.75 leading.
   The <li> carries the type instead, and the image is bled back out to the card
   edge with a negative margin.
   -------------------------------------------------------------------------- */
.prose ul.prod-box > li:has(> img),
.prose ul.grid > li:has(> img),
.prose ul.subcat-products > li:has(> img) {
  padding: var(--s4);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
}
.prose ul.prod-box > li:has(> img) > img,
.prose ul.grid > li:has(> img) > img,
.prose ul.subcat-products > li:has(> img) > img {
  order: -1;
  width: calc(100% + var(--s4) * 2);
  max-width: none;
  margin: calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s3);
  aspect-ratio: 3 / 2;
  object-fit: contain;
  padding: var(--s3);
  background: var(--surface-img);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply;
}

/* --------------------------------------------------------------------------
   21. Calmer page titles
   --t-3xl renders at 43-52px, which dwarfed the cards beneath it on category pages.
   -------------------------------------------------------------------------- */
.prose > h1,
.prose h1.mm-h1,
.prose h1.page-title,
.content > .page-title {
  font-size: var(--t-2xl);
  letter-spacing: -.022em;
}

/* --------------------------------------------------------------------------
   22. Related products rail inside the archived left column
   -------------------------------------------------------------------------- */
.prose .col-left .block-title strong,
.prose .col-left h2 {
  font-size: var(--t-base);
  font-weight: 700;
  text-transform: none;
  color: var(--ink);
}
.prose .col-left .left-block:not(:has(a)) { display: none; }
.prose .col-left .block-content > p:last-child { font-size: var(--t-sm); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   23. Product price label
   The archived markup prints "Price:" as an inline run beside the figure, which
   read as a stray word next to a large number. Make it a quiet label above it.
   -------------------------------------------------------------------------- */
.prose .product-shop .price-box,
.prose .product-info-main .price-box { display: block; }
.prose .product-shop .price-label,
.prose .product-info-main .price-label {
  display: block;
  margin-bottom: 2px;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   24. Trust strip column count
   auto-fit with a 230px minimum fitted three of the four blocks on the first row
   and stranded "Support" alone underneath. Four items want 4 or 2 per row.
   -------------------------------------------------------------------------- */
.mm-trust { grid-template-columns: 1fr; }
@media (min-width: 620px)  { .mm-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .mm-trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   25. Contact page
   -------------------------------------------------------------------------- */
.prose .mm-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--s4);
  margin: var(--s5) 0;
}
.prose .mm-contact__card {
  padding: var(--s5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.prose .mm-contact__card h2 {
  display: flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s3);
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--ink);
}
.prose .mm-contact__card h2::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px;
  background: currentColor;
  color: var(--red-ink);
  -webkit-mask: var(--icon) center / contain no-repeat;
          mask: var(--icon) center / contain no-repeat;
}
.prose .mm-contact__card [data-icon="support"] { --icon: url("/assets/icons/support.svg"); }
.prose .mm-contact__card [data-icon="company"] { --icon: url("/assets/icons/company.svg"); }
.prose .mm-contact__card [data-icon="delivery"] { --icon: url("/assets/icons/delivery.svg"); }
.prose .mm-contact__card p { font-size: var(--t-sm); line-height: 1.65; color: var(--ink-2); }
.prose .mm-contact__lead { font-size: var(--t-md) !important; font-weight: 700; }
.prose .mm-contact__lead a { color: var(--link); }
.prose .mm-contact__actions { margin: var(--s4) 0 0; }
.prose .mm-contact address { font-style: normal; line-height: 1.8; color: var(--ink-2); font-size: var(--t-sm); }
.prose .mm-hours { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); margin: 0; font-size: var(--t-sm); }
.prose .mm-hours dt { font-weight: 700; color: var(--ink); }
.prose .mm-hours dd { margin: 0; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   26. Catalogue search
   A real search, not decoration: the index loads on first focus and filters
   25,533 titles in the browser. Nothing is submitted anywhere.
   -------------------------------------------------------------------------- */
.mm-search {
  position: relative;
  display: flex; align-items: center; gap: var(--s2);
  flex: 1 1 260px;
  max-width: 420px;
  margin-left: auto;
}
.mm-search__label {
  position: absolute; left: -9999px;
}
.mm-search input[type="search"] {
  width: 100%;
  padding: 9px var(--s4) 9px var(--s4);
  font-size: var(--t-sm);
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: var(--surface);
  color: var(--ink);
}
.mm-search input[type="search"]::placeholder { color: var(--ink-3); }
.mm-search input[type="search"]:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent);
  outline: none;
}
.mm-search__go {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--navy);
  cursor: pointer;
}
.mm-search__go::before {
  content: "";
  display: block; width: 16px; height: 16px; margin: 0 auto;
  background: #fff;
  -webkit-mask: url("/assets/icons/search.svg") center / contain no-repeat;
          mask: url("/assets/icons/search.svg") center / contain no-repeat;
}
.mm-search__go:hover { background: var(--navy-600); }

.mm-search__results {
  position: absolute; z-index: 90;
  top: calc(100% + 8px); left: 0; right: 0;
  max-height: min(62vh, 520px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
}
.mm-search__list { list-style: none; margin: 0; padding: var(--s1); }
.mm-search__list li { margin: 0; }
.mm-search__list a {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink);
  text-decoration: none;
}
.mm-search__list a:hover,
.mm-search__list a:focus { background: var(--surface-2); color: var(--navy); outline: none; }
.mm-search__name { flex: 1 1 auto; min-width: 0; }
.mm-search__price { flex: 0 0 auto; font-weight: 700; color: var(--red-ink); }
.mm-search__msg {
  margin: 0; padding: var(--s3) var(--s4);
  font-size: var(--t-sm); color: var(--ink-3);
}

@media (max-width: 819.98px) {
  .mm-search { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   27. Header layout — logo + search on one row, nav on its own row beneath
   The markup order is brand, nav, search; flex `order` puts the search beside the
   logo without touching 25,533 pages, and a 100% basis forces the nav onto row two.
   -------------------------------------------------------------------------- */
@media (min-width: 820px) {
  .site-header .bar,
  .site-header > :first-child {
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: var(--s5);
    padding-block: var(--s3) 0;
  }
  .site-header .brand { order: 1; }
  .site-header .mm-search {
    order: 2;
    flex: 1 1 380px;
    max-width: 640px;
    margin: 0 0 0 auto;
  }
  .site-header nav {
    order: 3;
    flex: 1 1 100%;
    margin-top: var(--s3);
    padding-block: var(--s1) var(--s2);
    border-top: 1px solid var(--line);
  }
  .site-header nav ul,
  .site-header .nav { padding-left: 0; }
  .site-header nav a { padding: 7px 11px; }
}

/* a taller, more confident search field now that it has the room */
@media (min-width: 820px) {
  .mm-search input[type="search"] {
    padding: 11px var(--s5) 11px var(--s4);
    font-size: var(--t-base);
  }
  .mm-search__go { width: 36px; height: 36px; right: 6px; }
  .mm-search__go::before { width: 18px; height: 18px; }
}

/* --------------------------------------------------------------------------
   28. Section artwork as a pseudo-element
   An empty <span> holder is deleted by the empty-wrapper cleanup, so the mark is
   attached to the section head itself and keyed by a data attribute.
   -------------------------------------------------------------------------- */
.mm-section__head[data-art]::after {
  content: "";
  display: none;
  width: 260px;
  aspect-ratio: 2 / 1;
  background: currentColor;
  color: var(--navy);
  opacity: .14;
  -webkit-mask: var(--art) center / contain no-repeat;
          mask: var(--art) center / contain no-repeat;
}
.mm-section__head[data-art="shield"] { --art: url("/assets/art/shield-check.svg"); }
.mm-section__head[data-art="talk"]   { --art: url("/assets/art/talk.svg"); }
@media (min-width: 900px) { .mm-section__head[data-art]::after { display: block; } }
/* ==========================================================================
   Icon map — generated by _recovery/make-icon-map.js, do not edit by hand.
   Sets --icon per department link so the sidebar, the header nav and the
   homepage department grid all pick up the same mark without any markup change.
   ========================================================================== */

.side a[href="/body-kits"],
.mm-depts a[href="/body-kits"],
.site-footer a[href="/body-kits"] { --icon: url("/assets/icons/body-kits.svg"); --has-icon: block; }
.side a[href="/alloy-wheels"],
.mm-depts a[href="/alloy-wheels"],
.site-footer a[href="/alloy-wheels"] { --icon: url("/assets/icons/alloy-wheels.svg"); --has-icon: block; }
.side a[href="/car-grills"],
.mm-depts a[href="/car-grills"],
.site-footer a[href="/car-grills"] { --icon: url("/assets/icons/car-grills.svg"); --has-icon: block; }
.side a[href="/carbon-products"],
.mm-depts a[href="/carbon-products"],
.site-footer a[href="/carbon-products"] { --icon: url("/assets/icons/carbon-products.svg"); --has-icon: block; }
.side a[href="/fenders"],
.mm-depts a[href="/fenders"],
.site-footer a[href="/fenders"] { --icon: url("/assets/icons/fenders.svg"); --has-icon: block; }
.side a[href="/headlight-eyebrows"],
.mm-depts a[href="/headlight-eyebrows"],
.site-footer a[href="/headlight-eyebrows"] { --icon: url("/assets/icons/headlight-eyebrows.svg"); --has-icon: block; }
.side a[href="/spoilers"],
.mm-depts a[href="/spoilers"],
.site-footer a[href="/spoilers"] { --icon: url("/assets/icons/spoilers.svg"); --has-icon: block; }
.side a[href="/wind-deflectors"],
.mm-depts a[href="/wind-deflectors"],
.site-footer a[href="/wind-deflectors"] { --icon: url("/assets/icons/wind-deflectors.svg"); --has-icon: block; }
.side a[href="/induction-kits"],
.mm-depts a[href="/induction-kits"],
.site-footer a[href="/induction-kits"] { --icon: url("/assets/icons/induction-kits.svg"); --has-icon: block; }
.side a[href="/jap-tuning"],
.mm-depts a[href="/jap-tuning"],
.site-footer a[href="/jap-tuning"] { --icon: url("/assets/icons/jap-tuning.svg"); --has-icon: block; }
.side a[href="/engine-tuning"],
.mm-depts a[href="/engine-tuning"],
.site-footer a[href="/engine-tuning"] { --icon: url("/assets/icons/engine-tuning.svg"); --has-icon: block; }
.side a[href="/exhausts-manifolds"],
.mm-depts a[href="/exhausts-manifolds"],
.site-footer a[href="/exhausts-manifolds"] { --icon: url("/assets/icons/exhausts-manifolds.svg"); --has-icon: block; }
.side a[href="/exhausts"],
.mm-depts a[href="/exhausts"],
.site-footer a[href="/exhausts"] { --icon: url("/assets/icons/exhausts-manifolds.svg"); --has-icon: block; }
.side a[href="/brakes"],
.mm-depts a[href="/brakes"],
.site-footer a[href="/brakes"] { --icon: url("/assets/icons/brakes.svg"); --has-icon: block; }
.side a[href="/exterior-styling"],
.mm-depts a[href="/exterior-styling"],
.site-footer a[href="/exterior-styling"] { --icon: url("/assets/icons/exterior-styling.svg"); --has-icon: block; }
.side a[href="/interior-styling"],
.mm-depts a[href="/interior-styling"],
.site-footer a[href="/interior-styling"] { --icon: url("/assets/icons/interior-styling.svg"); --has-icon: block; }
.side a[href="/lighting"],
.mm-depts a[href="/lighting"],
.site-footer a[href="/lighting"] { --icon: url("/assets/icons/lighting.svg"); --has-icon: block; }
.side a[href="/coilovers"],
.mm-depts a[href="/coilovers"],
.site-footer a[href="/coilovers"] { --icon: url("/assets/icons/coilovers.svg"); --has-icon: block; }
.side a[href="/suspension"],
.mm-depts a[href="/suspension"],
.site-footer a[href="/suspension"] { --icon: url("/assets/icons/suspension.svg"); --has-icon: block; }
.side a[href="/strut-braces"],
.mm-depts a[href="/strut-braces"],
.site-footer a[href="/strut-braces"] { --icon: url("/assets/icons/strut-braces.svg"); --has-icon: block; }
.side a[href="/car-accessories"],
.mm-depts a[href="/car-accessories"],
.site-footer a[href="/car-accessories"] { --icon: url("/assets/icons/car-accessories.svg"); --has-icon: block; }
.side a[href="/4x4-accessories"],
.mm-depts a[href="/4x4-accessories"],
.site-footer a[href="/4x4-accessories"] { --icon: url("/assets/icons/4x4-accessories.svg"); --has-icon: block; }
.side a[href="/van-accessories"],
.mm-depts a[href="/van-accessories"],
.site-footer a[href="/van-accessories"] { --icon: url("/assets/icons/van-accessories.svg"); --has-icon: block; }

.mm-trust [data-icon="company"]      { --icon: url("/assets/icons/company.svg"); }
.mm-trust [data-icon="product-range"]{ --icon: url("/assets/icons/product-range.svg"); }
.mm-trust [data-icon="delivery"]     { --icon: url("/assets/icons/delivery.svg"); }
.mm-trust [data-icon="support"]      { --icon: url("/assets/icons/support.svg"); }
.mm-trust [data-icon="price"]        { --icon: url("/assets/icons/price.svg"); }
.mm-trust [data-icon="returns"]      { --icon: url("/assets/icons/returns.svg"); }
.mm-trust [data-icon="garage"]       { --icon: url("/assets/icons/garage.svg"); }