/* cl-site.css: Touren's tokens, fonts, reset and chrome (the top strip, the header and its menu, the footer, the
   primary button), on every page, written from the measurements of their home at 1440 and in their 390 phone stage
   (review/pages/home.json). 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 brand from the 3 --parts-* tokens below alone: no rule here names a kit class.
   Two layouts: from 980px their desktop header, below it their phone stack with the menu behind the toggle. */
@layer base, kit, site;

/* Open Sans, Roboto, Roboto Slab, Russo One and Asap Condensed: Google Fonts' files from the capture (static/fonts/FONTS.md) */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("fonts/open-sans-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; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("fonts/open-sans-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: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/roboto-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; }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/roboto-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: "Roboto Slab"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/roboto-slab-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; }
@font-face { font-family: "Russo One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/russo-one-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; }
@font-face { font-family: "Russo One"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/russo-one-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: "Asap Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/asap-condensed-500-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; }
@font-face { font-family: "Asap Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/asap-condensed-500-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; }

:root {
  /* colours: their white page, black type, red and the charcoal footer; text is full contrast, so their grey
     body text (#54595F) and grey headings are drawn near black, the greys kept for rules and fields */
  --site-bg: #FFFFFF;
  --site-fg: #111111;
  --site-muted: #A1A4A7;
  --site-line: #E0E1E2;
  --site-band: #F5F5F5;
  --site-card: #F8F8F9;
  --site-accent: #AF0606;
  --site-accent-deep: #8A0404;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #000000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #AF0606;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #555555;
  --site-strip: #000000;     /* the top strip */
  --site-go: #54595F;        /* the search field's magnifier button */
  --site-foot: #383838;      /* the footer */
  --site-foot-fg: #F3F3F3;
  --site-ink: #000000;       /* their black type and rules: the menu, the cart, the toggle */
  --site-heading: #222222;
  --site-rule: #000000;
  --site-accent-text: var(--site-accent);
  --site-field-edge: #000000;
  --site-toggle-bg: rgba(0, 0, 0, 0.05);
  --site-photo-bg: #FFFFFF;
  --site-strip-fg: #FFFFFF;
  --site-go-hover: #000000;
  --site-go-fg: #FFFFFF;
  --site-foot-strong: #FFFFFF;
  --site-hero-bg: #BBBBBB;   /* the slide, over its photo in both themes */
  --site-hero-ink: #FFFFFF;
  --site-hero-ink-on: #000000;
  --site-tab-bg: #FE001A;    /* the red tab over the vehicle search */
  --site-tab-fg: #FFFFFF;

  --site-font-body: "Open Sans", Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);
  --site-font-strip: "Roboto", Arial, sans-serif;
  --site-font-name: "Russo One", "Open Sans", Arial, sans-serif;

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1320px;

  /* cl-shop.css's phone unit: one pixel of their 390 phone stage (the chrome itself is written in px) */
  --mx: calc(100vw / 390);
  --u: 1px;
}
/* the kit's shop pages and vehicle band (storefront_kit/static/parts/tokens.css): the brand tokens a site owns, the
   --parts-band-* ones their black SEARCH WHEELS BY VEHICLE panel under its red tab, with their grey Go */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-deep);
  --parts-font: var(--site-font-body);
  --parts-band-bg: #000000;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #FE001A;
  --parts-band-go: #5E5E5E;
  --parts-band-go-hover: var(--site-accent);
  --parts-band-go-ink: #FFFFFF;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}

/* The dark page (kit 0.10.0, Site(dark="night"): 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 kit's warm near black family (its tokens.css): the page and the
   header bar #121110, cards and bands a step up, rules #3d3833, their black type and rules turned near white.
   The black strip, the black vehicle panel under its red tab and the charcoal footer stay as they are; the red
   keeps its fills, and as text it is lifted to read on the dark; photos keep white plates. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-ink: #F6F3EF;
  --site-heading: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-rule: #5C554E;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-accent: #AF0606;
  --site-accent-deep: #C81E1E;
  --site-accent-fg: #FFFFFF;
  --site-accent-text: #FF5A5F;
  --site-field-bg: #1C1A18;
  --site-field-edge: #F6F3EF;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #AF0606;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #DDD7CF;
  --site-toggle-bg: rgba(255, 255, 255, 0.08);
  --site-photo-bg: #FFFFFF;
  --site-strip: #000000;
  --site-strip-fg: #FFFFFF;
  --site-go: #54595F;
  --site-go-hover: #000000;
  --site-go-fg: #FFFFFF;
  --site-foot: #383838;
  --site-foot-fg: #F3F3F3;
  --site-foot-strong: #FFFFFF;
  --site-hero-bg: #BBBBBB;
  --site-hero-ink: #FFFFFF;
  --site-hero-ink-on: #000000;
  --site-tab-bg: #FE001A;
  --site-tab-fg: #FFFFFF;

  /* their black vehicle panel under the red edge, dark in both */
  --parts-band-bg: #000000;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #FE001A;
  /* the red as text and rings (an error line, the tick, a focus ring), lifted to read on the dark */
  --cs-accent: var(--site-accent-text);
}
/* the checkout's Pay is white words on --kc-accent: the red, since the button colour is near white in the dark */
:root[data-parts-theme="dark"] main.kc-page { --kc-accent: var(--site-accent); }

@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.65 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 { 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 (Add to Cart, Check out) ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 20px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 600 15px/1 var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cl-btn:hover { background: var(--site-accent-deep); border-color: var(--site-accent-deep); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- the top strip: our support address at the right, Roboto white on black ---------- */
.cl-strip { background: var(--site-strip); color: var(--site-strip-fg); }
.cl-strip__in { max-width: 1200px; height: 26px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.cl-strip__item { display: inline-flex; align-items: center; gap: 6px; font: 400 16px/26px var(--site-font-strip); }
.cl-strip__item:hover { text-decoration: underline; }

/* ---------- header: the Orbital Parts mark where their wordmark sat, the search field over the menu ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.cl-hd__in { max-width: 1250px; height: 111px; margin: 0 auto; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; }
.cl-hd__logo { flex: none; margin-left: 7px; }
.cl-hd__mark { display: block; width: auto; height: 44px; }   /* their wordmark's footprint, 220 x 44 */
.cl-hd__mark--night, :root[data-parts-theme="dark"] .cl-hd__mark--day { display: none; }
:root[data-parts-theme="dark"] .cl-hd__mark--night { display: block; }
.cl-hd__right { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; padding-top: 10px; }
.cl-hd__search { display: flex; width: 429px; height: 25px; border: 1px solid var(--site-field-edge); background: var(--site-field-bg); }
.cl-hd__q { flex: 1; min-width: 0; height: 23px; padding: 0 6px; border: 0; background: none; color: var(--site-fg); font: 400 14px/23px var(--site-font-body); }
.cl-hd__q:focus { outline: none; }
.cl-hd__search:focus-within { outline: 2px solid var(--site-accent); outline-offset: 1px; }
.cl-hd__go { flex: none; width: 25px; height: 23px; display: grid; place-items: center; background: var(--site-go); color: var(--site-go-fg); }
.cl-hd__go:hover { background: var(--site-go-hover); }
.cl-hd__bar { display: flex; align-items: center; margin-top: 20px; }
.cl-hd__toggle { display: none; }
.cl-hd__list { display: flex; }
.cl-hd__link { display: block; padding: 0 15px; font: 700 16px/46px var(--site-font-body); text-transform: uppercase; color: var(--site-ink); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent-text); }
.cl-hd__cart { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-right: -10px; color: var(--site-ink); }
.cl-hd__cart:hover { color: var(--site-accent-text); }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: 4px; right: 2px; min-width: 18px; padding: 0 4px; font: 700 12px/18px var(--site-font-body); text-align: center; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }

/* ---------- footer: their charcoal band, the columns, the rule, the copyright ---------- */
.cl-ft { background: var(--site-foot); color: var(--site-foot-fg); }
.cl-ft__in { max-width: 1440px; margin: 0 auto; padding: 70px 60px 70px 102px; }
.cl-ft__cols { display: grid; grid-template-columns: repeat(6, 1fr); padding: 0 10px 13px; }
.cl-ft__h { margin-bottom: 20px; color: var(--site-foot-strong); font: 600 16px/20px var(--site-font-heading); text-transform: uppercase; }
.cl-ft__list li { font: 400 14px/26.5px var(--site-font-body); }
.cl-ft__list a:hover { text-decoration: underline; }
.cl-ft__rule { border: 0; border-top: 1px solid var(--site-foot-strong); margin: 0; }
.cl-ft__base { padding: 32px 10px 0; }
.cl-ft__small { margin-top: 20px; font: 400 16px/26px var(--site-font-strip); }

/* ---------- phones: their stack (strip, name and toggle, the search field), the menu opens under it ---------- */
@media (max-width: 979.98px) {
  .cl-strip__in { height: 24px; justify-content: center; }
  .cl-strip__item { font-size: 16px; line-height: 24px; }
  .cl-hd__in { height: auto; padding: 0; flex-wrap: wrap; }
  .cl-hd__logo { order: 1; margin: 0 0 0 10px; }
  .cl-hd__mark { height: 32px; }
  .cl-hd__right { display: contents; }
  .cl-hd__bar { order: 2; margin: 0 10px 0 0; height: 53px; }
  .cl-hd__search { order: 3; width: auto; flex: 1 1 100%; margin: 4px 3px 3px; }
  .cl-hd__toggle { display: grid; place-items: center; width: 40px; height: 40px; background: var(--site-toggle-bg); color: var(--site-ink); }
  .cl-hd__cart { width: 40px; height: 40px; margin: 0 4px 0 0; order: -1; }
  .cl-hd__nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--site-bg); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.25); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; }
  .cl-hd__link { padding: 0 16px; line-height: 48px; border-top: 1px solid var(--site-line); }

  .cl-ft__in { padding: 30px 20px 30px; }
  .cl-ft__cols { grid-template-columns: 1fr 1fr; row-gap: 20px; padding: 0 10px 13px; }
  .cl-ft__col:nth-child(5) { order: 3; }   /* their rows: the short columns in the middle row */
  .cl-ft__col:nth-child(6) { order: 4; }
  .cl-ft__col:nth-child(3) { order: 5; }
  .cl-ft__col:nth-child(4) { order: 6; }
  .cl-ft__h { margin-bottom: 20px; font-size: 14px; line-height: 18px; }
  .cl-ft__list li { line-height: 24px; font-size: 14px; }
  .cl-ft__base { padding: 32px 10px 0; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { max-width: 1250px; margin: 0 auto; padding: 120px 20px 160px; text-align: center; }
.cl-404__h { font: 700 30px/1.3 var(--site-font-heading); text-transform: uppercase; color: var(--site-ink); }
.cl-404__p { margin-top: 14px; font-size: 16px; }
.cl-404__home { margin-top: 28px; }

/* the footer's trademark line: "owner" links the client's site in the line's own colour, underlined, whatever the theme gives footer links (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) before the cart: their black menu ink, the red on hover; on
   phones it sits just before the cart. Outside any layer, since the kit's head block sets its colour unlayered
   (color: inherit) and a layered rule would lose to it. */
.cl-hd__bar .parts-theme-switch { flex: none; color: var(--site-ink); }
.cl-hd__bar .parts-theme-switch:hover { color: var(--site-accent-text); }
@media (max-width: 979.98px) {
  .cl-hd__bar .parts-theme-switch { order: -2; }
}