/* cl-site.css: the site's tokens, reset and chrome (header, menu, footer, the primary button), on every
   page, in Mayhem Wheels' look from their measurements (review/pages/home.json): white pages, black text,
   Oxanium throughout, a black header and footer, bold uppercase headings and the tan of their Find a Dealer
   button for the highlights. cl-shop.css reads only these tokens, so the title band and the cart follow.

   The cascade (the kit's static/parts/tokens.css): `@layer base, kit, site;` below sets the order; the
   tokens sit on :root outside any layer, the reset in @layer base, every other rule in @layer site. The
   kit's shop pages and vehicle band take the site's brand colour and font from the --parts-* tokens alone:
   no rule here names a kit class.

   Two layouts: from 980px the desktop layout, measured in a 1440 window; below 980px their phone layout,
   measured in the 390px stage (--mx is one stage pixel, cl-shop.css reads it). */
@layer base, kit, site;

/* Oxanium is variable: one file a subset carries every weight from 200 to 800 */
@font-face { font-family: "Oxanium"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/oxanium-400-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Oxanium"; font-style: normal; font-weight: 200 800; font-display: swap; src: url("fonts/oxanium-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* colours: their white pages and black type, the black chrome, the tan of their buttons and footer headings */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #1A1A1A;
  --site-line: #DADEE1;
  --site-band: #F3F4F5;
  --site-card: #F7F8F8;
  --site-accent: #000000;
  --site-accent-fg: #FFFFFF;
  --site-tan: #A79F88;
  --site-tan-fg: #000000;
  --site-chrome-bg: #000000;
  --site-chrome-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-field-line: #313131;
  --site-button-bg: #000000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #A79F88;
  --site-button-hover-fg: #000000;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #1A1A1A;

  /* fonts: Oxanium for every word, as theirs */
  --site-font-body: "Oxanium", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);

  /* shape and layout: square boxes, their 1300px row with 14px inside it */
  --site-radius: 0;
  --site-max: 1300px;
  --site-gutter: 14px;

  /* the phone layout's unit: one phone-stage pixel (their stage is 390) */
  --mx: calc(100vw / 390);
  --u: 1px;
}
/* the kit's shop pages and vehicle band (storefront_kit/static/parts/tokens.css): only the brand tokens a site
   owns. Their main buttons are black with white words, so the kit's main action is black and deepens to their
   charcoal on hover; every other --parts-* default is the kit's counter look (storefront-kit ADR 0007). */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: #2E2E2E;
  --parts-font: var(--site-font-body);
}
/* the night theme (kit 0.10.0: the kit's head block sets data-parts-theme="dark" on <html> from 21:30 to 04:30 or
   on the shopper's pick). The header and footer are Mayhem's black in both themes; the white pages turn to the
   kit's warm near black, text near white, cards a step up. Their black main action would sink into that page, so
   it turns near white with dark words, as the kit's own dark buttons do, and goes tan on hover as theirs does. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-accent: #F6F3EF;
  --site-accent-fg: #121110;
  --site-tan: #A79F88;
  --site-tan-fg: #000000;
  --site-chrome-bg: #000000;
  --site-chrome-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-field-line: #6B635B;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #A79F88;
  --site-button-hover-fg: #000000;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --parts-accent-strong: var(--site-tan);
  --parts-cta-ink: #121110;
  --parts-band-go-ink: #121110;
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #36312C;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); --site-gutter: 16px; }
}

@layer base {

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--site-bg); }
body {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-fg);
  font: 400 16px/1.375 var(--site-font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }
ul, ol { list-style: none; }
img, svg, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

}

@layer site {

/* ---------- the primary button: their black block of bold uppercase words, tan on hover ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 53px; min-width: 210px; padding: 0 24px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 0; border-radius: var(--site-radius);
  font: 700 20px/1 var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cl-btn:hover { background: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-tan); outline-offset: 2px; }

/* ---------- header: the black bar, the mark, menu, search, the tan cart block ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-chrome-bg); color: var(--site-chrome-fg); }
.cl-hd__in { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); height: 85px; display: flex; align-items: center; gap: 40px; }
.cl-hd__logo { flex: none; }
.cl-hd__logo img { width: 250px; height: auto; }
.cl-hd__nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 39px; }
.cl-hd__list { flex: 1; display: flex; gap: 8px 39px; }
.cl-hd__link { display: block; font: 700 18px/24.75px var(--site-font-body); text-transform: uppercase; color: var(--site-chrome-fg); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-tan); }
.cl-search { display: flex; width: 300px; height: 40px; border: 1px solid var(--site-tan); }
.cl-search__input { flex: 1; min-width: 0; padding: 0 12px; background: transparent; border: 0; color: var(--site-chrome-fg); font-size: 16px; outline: none; }
.cl-search__input::placeholder { color: var(--site-chrome-fg); opacity: 0.85; }
.cl-search:focus-within { outline: 2px solid var(--site-tan); outline-offset: 1px; }
.cl-search__btn { flex: none; width: 44px; display: inline-flex; align-items: center; justify-content: center; background: var(--site-tan); color: var(--site-tan-fg); }
.cl-hd__cart { flex: none; position: relative; display: inline-flex; align-items: center; gap: 10px; height: 53px; padding: 0 30px;
  background: var(--site-tan); color: var(--site-tan-fg); font: 700 20px/20px var(--site-font-body); text-transform: uppercase; }
.cl-hd__cart:hover { background: var(--site-chrome-fg); }
.cl-hd__count { min-width: 22px; padding: 0 5px; font: 700 13px/22px var(--site-font-body); text-align: center; background: var(--site-chrome-bg); color: var(--site-chrome-fg); }
.cl-hd__count:empty { display: none; }
.cl-hd__toggle { display: none; }

/* ---------- footer: black, tan-headed columns, the tan rule ---------- */
.cl-ft { background: var(--site-chrome-bg); color: var(--site-chrome-fg); }
.cl-ft__in { max-width: var(--site-max); margin: 0 auto; padding: 64px var(--site-gutter) 32px;
  display: grid; grid-template-columns: 217px 216px 1fr; grid-template-areas: "c1 c2 contact" "small small small"; }
.cl-ft__col--1 { grid-area: c1; }
.cl-ft__col--2 { grid-area: c2; }
.cl-ft__contact { grid-area: contact; }
.cl-ft__h { font: 700 25px/30px var(--site-font-heading); text-transform: uppercase; color: var(--site-tan); }
.cl-ft__links { margin-top: 16px; display: grid; gap: 8px; }
.cl-ft__links a, .cl-ft__mail a { font: 400 18px/24.75px var(--site-font-body); text-transform: uppercase; }
.cl-ft__links a:hover, .cl-ft__mail a:hover { color: var(--site-tan); }
.cl-ft__mail { margin-top: 16px; }
.cl-ft__mail a { display: inline-flex; align-items: center; gap: 10px; text-transform: none; }
.cl-ft__mail svg { color: var(--site-tan); }
.cl-ft__small { grid-area: small; margin-top: 32px; padding: 13px 0 14px; border-top: 2px solid var(--site-tan); text-align: center; font: 400 15px/20.625px var(--site-font-body); text-transform: uppercase; }
.cl-ft__small a[href^="mailto:"] { text-transform: none; }

/* ---------- phones: the 50px bar, the menu and search in an opaque drawer (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd__in { height: 50px; padding: 0 16px; gap: 16px; }
  .cl-hd__logo { flex: 1; min-width: 0; }
  .cl-hd__logo img { width: 140px; }
  .cl-hd__cart { height: 40px; min-width: 40px; padding: 0 8px; gap: 6px; background: none; color: var(--site-chrome-fg); justify-content: center; }
  .cl-hd__cart:hover { background: none; color: var(--site-tan); }
  .cl-hd__cart-label { display: none; }
  .cl-hd__count { background: var(--site-tan); color: var(--site-tan-fg); }
  .cl-hd__toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 40px; height: 40px; margin-right: -11px; padding: 0 11px; }
  .cl-hd__toggle span { display: block; height: 2px; background: var(--site-chrome-fg); }
  .cl-hd__nav { position: absolute; top: 50px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 24px; padding: 24px 16px 32px; background: var(--site-chrome-bg); border-top: 1px solid var(--site-tan); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; gap: 0; }
  .cl-hd__link { padding: 10px 0; }
  .cl-search { width: 100%; height: 44px; }

  .cl-ft__in { padding: 32px 16px; grid-template-columns: 1fr 1fr; column-gap: 8px;
    grid-template-areas: "contact contact" "c1 c2" "small small"; }
  .cl-ft__contact { padding-bottom: 32px; }
  .cl-ft__h { font-size: 20px; line-height: 22px; }
  .cl-ft__links { margin-top: 16px; gap: 8px; }
  .cl-ft__links a, .cl-ft__mail a { font-size: 16px; line-height: 22px; }
  .cl-ft__mail a { min-height: 40px; }
  .cl-ft__small { font-size: 13px; line-height: 18px; padding: 15px 0; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404__home { text-align: center; padding: 0 20px 80px; }

/* the footer's trademark line: "owner" links the client's site in the line's own colour, underlined (Greg 2026-10-01) */
.cl-owner, .cl-owner:visited { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cl-owner:hover { opacity: .8; }

}

/* the kit's theme switch (parts/theme_switch.html, 40px, currentColor icons), outside the layers so it wins over the kit's own unlayered button rule, before the cart on the black bar */
.cl-hd__in .parts-theme-switch { flex: none; margin-right: -20px; color: var(--site-chrome-fg); }
.cl-hd__in .parts-theme-switch:hover { color: var(--site-tan); }
@media (max-width: 979.98px) { .cl-hd__in .parts-theme-switch { margin-right: -12px; } }