/* cl-site.css: the site's tokens, fonts, reset and chrome (header, menu, footer, the primary button, the 404)
   in calioffroadwheels.com's look, on every page: their black bar with lime capitals, their black footer under
   a lime rule. 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 (under the kit's rules, so it never undoes a kit
   button or list), 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 below alone: no rule here names a kit class.

   Two layouts: from 980px their desktop, measured at 1440; below 980px their phone, measured in the 390 stage.
   Boxes are square across the site (their pill buttons are drawn square). */
@layer base, kit, site;

/* Cali Font: their display face for headings and the footer titles (static/fonts/FONTS.md); its one 400 face
   is drawn at 600 and 900 as on theirs, so the browser thickens it the same way */
@font-face {
  font-family: "Cali Font";
  src: url("fonts/cali-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Montserrat: their text, menu and button face, one variable file per subset */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Montserrat";
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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 page and black bands, their lime (#C9DC1F on buttons and rules, #D6DF26 in the
     menu); text is black on the page (theirs is #33475B; our shop text is full contrast) */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #333333;
  --site-line: #DADEE1;
  --site-band: #F3F4F5;
  --site-card: #F7F8F8;
  --site-ink: #000000;
  --site-accent: #C9DC1F;
  --site-accent-fg: #000000;
  --site-menu: #D6DF26;
  --site-field-bg: #FFFFFF;
  --site-head-bg: #000000;
  --site-head-fg: #FFFFFF;
  --site-button-bg: #C9DC1F;
  --site-button-fg: #000000;
  --site-button-hover-bg: #000000;
  --site-button-hover-fg: #C9DC1F;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #555555;
  /* the plate under a wheel's photo: white in both themes, since the photos are drawn for white */
  --site-plate: #FFFFFF;
  /* the rule inside the black bar (the phone menu's top) */
  --site-dark-line: #333333;

  /* fonts: Montserrat for text and buttons, Cali Font for headings */
  --site-font-body: "Montserrat", Arial, sans-serif;
  --site-font-heading: "Cali Font", "Arial Black", Arial, sans-serif;
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1320px;
}
/* the kit's shop pages and vehicle band (storefront_kit/static/parts/tokens.css): only the brand tokens a site
   owns, drawn from the tokens above. The kit writes white on its accent (Add, Search, Go), and white does not
   read on their lime, so the kit's accent is their black. Every other --parts-* default is the kit's counter
   look (storefront-kit ADR 0007): never set one here. */
:root {
  --parts-accent: var(--site-ink);
  --parts-accent-strong: #333333;
  --parts-font: var(--site-font-body);
}
/* the dark page (data-parts-theme="dark" on <html>, the kit's night pick or the shopper's switch): the white page turns
   the kit's warm near black, text near white, rules a dark grey, cards and bands a step up from the page; the black
   header and footer and their lime stay as they are. The kit's one main action (Add, Go) turns their lime with black
   words, since a black button would sink into the dark page. Photos keep their white plates (--site-plate). */
: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-field-bg: #1C1A18;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --parts-accent: var(--site-accent);
  --parts-accent-strong: color-mix(in srgb, var(--parts-accent) 78%, #fff);
  --parts-cta-ink: var(--site-accent-fg);
  --parts-band-go-ink: var(--site-accent-fg);
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #3D3833;
}

@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.5 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; }
[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 (Add to Cart, Check out, the home's buttons, the 404's link): their lime ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 40px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 0; border-radius: var(--site-radius);
  font: 600 14px/14px 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-fg); outline-offset: 2px; }

/* ---------- header: the Orbital Parts mark at the left, our headings in their lime capitals, the search and the cart; 130 high ---------- */
.cl-hd { position: relative; z-index: 50; height: 130px; background: var(--site-head-bg); color: var(--site-head-fg); }
.cl-hd__in { height: 100%; display: flex; align-items: center; padding: 0 20px 0 59px; }
.cl-hd__logo { flex: none; display: block; }
.cl-hd__logo img { width: 250px; height: auto; }
.cl-hd__toggle { display: none; }
.cl-hd__nav { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 24px; }
.cl-hd__list { display: flex; }
.cl-hd__link {
  display: block; padding: 40px 24px; color: var(--site-menu);
  font: 900 18px/20px var(--site-font-body); text-transform: uppercase;
}
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-head-fg); }
.cl-hd__search { display: flex; align-items: center; width: 240px; height: 40px; border-bottom: 1px solid var(--site-head-fg); }
.cl-hd__search input {
  flex: 1; min-width: 0; height: 39px; padding: 0 4px; border: 0; border-radius: 0; background: transparent; color: var(--site-head-fg);
  font: 500 16px/1 var(--site-font-body); outline: none;
}
.cl-hd__search input::placeholder { color: var(--site-head-fg); opacity: 1; }
.cl-hd__search button { flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: var(--site-head-fg); }
.cl-hd__search:focus-within { border-bottom-color: var(--site-menu); }
.cl-hd__cart { flex: none; position: relative; width: 44px; height: 40px; margin-left: 16px; display: grid; place-items: center; color: var(--site-menu); }
.cl-hd__cart:hover { color: var(--site-head-fg); }
.cl-hd__cart svg { overflow: visible; }
.cl-hd__cart-count {
  position: absolute; top: 0; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--site-head-fg); color: var(--site-head-bg); font: 700 12px/18px var(--site-font-body); text-align: center;
}
.cl-hd__cart-count:empty { display: none; }
/* the theme switch takes its ink from this box (the kit's own rule sets inherit), lime like the cart, white on hover */
.cl-hd__theme { display: contents; color: var(--site-menu); }
.cl-hd__theme:hover { color: var(--site-head-fg); }
.cl-hd__theme .parts-theme-switch { flex: none; margin-left: 16px; }

/* ---------- footer: their black under a lime rule, four columns of Cali titles over Montserrat capitals, then the copyright line ---------- */
.cl-ft { background: var(--site-head-bg); color: var(--site-head-fg); border-top: 10px solid var(--site-accent); }
.cl-ft__in { max-width: 1140px; margin: 0 auto; padding: 70px 0 20px; }
.cl-ft__cols { display: grid; grid-template-columns: 204px 204px 204px 428px; gap: 20px; min-height: 516px; padding: 0 20px; }
.cl-ft__h { margin-bottom: 20px; color: var(--site-accent); font: 600 30px/30px var(--site-font-heading); letter-spacing: 3px; text-transform: uppercase; }
.cl-ft__col li { font: 600 15px/22.5px var(--site-font-body); text-transform: uppercase; }
.cl-ft__col li + li { margin-top: 5px; }
.cl-ft__col a:hover { color: var(--site-accent); }
.cl-ft__col .cl-ft__mail { text-transform: none; }
.cl-ft__base { margin: 0 10px; padding: 40px 10px 10px; border-top: 1px solid var(--site-head-fg); }
.cl-ft__small { font: 400 13px/19.5px var(--site-font-body); text-align: center; }
/* 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 404 (templates/404.html) ---------- */
.cl-404 { max-width: 732px; margin: 0 auto; padding: 100px 16px 120px; text-align: center; }
.cl-404__h { font: 900 50px/50px var(--site-font-heading); letter-spacing: 2.3px; text-transform: uppercase; }
.cl-404__p { margin: 20px 0 32px; font: 400 16px/1.6 var(--site-font-body); }

/* ---------- phones: their black bar of 120, the mark, the menu button and the cart; the headings and the search in an opaque drawer (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd { height: 120px; }
  .cl-hd__in { padding: 0 26px 0 20px; }
  .cl-hd__logo img { width: 180px; }
  .cl-hd__toggle { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; color: var(--site-head-fg); }
  .cl-hd__cart { margin-left: 2px; color: var(--site-head-fg); }
  .cl-hd__theme { color: var(--site-head-fg); }
  .cl-hd__theme .parts-theme-switch { margin-left: 2px; }
  .cl-hd__nav {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 8px 20px 24px; background: var(--site-head-bg); border-top: 1px solid var(--site-dark-line);
  }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; }
  .cl-hd__link { padding: 12px 0; color: var(--site-head-fg); font-size: 15px; }
  .cl-hd__search { width: 100%; }

  .cl-ft__in { padding: 50px 15px 20px; }
  .cl-ft__cols { grid-template-columns: 1fr; align-content: start; gap: 20px; min-height: 964px; padding: 0 10px 40px; }
  .cl-ft__col li { font-size: 13px; line-height: 20px; }
  .cl-ft__col li + li { margin-top: 0; }
  .cl-ft__col li a { display: inline-block; padding: 10px 0; }
  .cl-ft__h { margin-bottom: 10px; }
  .cl-ft__base { margin: 0; }
  .cl-ft__small { text-align: left; }
  .cl-404 { padding: 60px 16px 80px; }
  .cl-404__h { font-size: 34px; line-height: 38px; }
}

}