/* cl-site.css: BMR Suspension's tokens, type, reset and chrome (the header, its drawer, the footer, the
   primary button), on every page, written from their measurements (review/pages/home.json): white pages
   with black type, a black header and footer, their red (#FE0000) for every accent, Albert Sans throughout.
   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 colour and font from the --parts-* tokens alone.
   From 980px the desktop layout; below it the phone layout (their 390 stage), the menu in a drawer. */
@layer base, kit, site;

/* Albert Sans, one variable file per subset for every weight (static/fonts/FONTS.md) */
@font-face {
  font-family: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/albert-sans-400.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: "Albert Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/albert-sans-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: "Albert Sans"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/albert-sans-400-italic.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: "Albert Sans"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/albert-sans-400-italic-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 */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #737373;
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #FE0000;
  --site-accent-strong: #BF0000;
  --site-accent-fg: #FFFFFF;
  --site-ink: #000000;
  --site-ink-2: #0B0B0C;
  --site-ink-fg: #FFFFFF;
  --site-ink-line: rgba(255, 255, 255, 0.18);
  --site-field-bg: #FFFFFF;
  --site-button-bg: #FE0000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #000000;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #000000;
  --site-field-hint: #5A5A5A;

  /* fonts */
  --site-font-body: "Albert Sans", sans-serif;
  --site-font-heading: "Albert Sans", sans-serif;
  --site-font-button: "Albert Sans", sans-serif;
  --site-font-menu: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* shape and layout: square boxes everywhere, their 1340px content between 50px gutters */
  --site-radius: 0;
  --site-max: 1340px;
  --site-gutter: 50px;

  /* the phone stage (390) for cl-shop.css's phone rules */
  --mx: calc(100vw / 390);
  --u: 1px;
}
/* the kit's shop pages and vehicle band: only the brand tokens a site owns (storefront-kit ADR 0007; the --parts-band-* ones, storefront/CLAUDE.md) */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-strong);
  --parts-font: var(--site-font-body);
  /* the vehicle band in their vehicle search card's look: dark grey, white type, their red rule under it */
  --parts-band-bg: #3A3A3A;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: var(--site-accent);
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); --site-gutter: 16px; }
}
/* the night theme (storefront-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 by the shopper's clock, or when the shopper picks it. The black header, the black
   footer, the red and the grey vehicle band stay as they are; the white page turns the kit's warm near black, cards
   a step up, text near white, lines dark grey, fields dark with light words, and a red button hovers light where it
   went black. Photos keep white plates. */
: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-strong: #FF4D4D;
  --site-field-bg: #1C1A18;
  --site-field-hint: #CFC8BF;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #F6F3EF;
  --parts-band-bg: #3A3A3A;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: var(--site-accent);
}

@layer base {

*, *::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: their red, white type ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 24px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 1px solid var(--site-button-bg); border-radius: var(--site-radius);
  font: 700 14px/22px var(--site-font-button); text-decoration: none; cursor: pointer;
  transition: background-color .3s, border-color .3s;
}
.cl-btn:hover { background: var(--site-button-hover-bg); border-color: 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 top bar ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-ink); color: var(--site-ink-fg); }
.cl-top { background: var(--site-ink); border-bottom: 1px solid var(--site-accent); }
.cl-top__in { display: grid; grid-template-columns: 1fr minmax(0, 450px) 1fr; align-items: center; gap: 30px; padding: 5px 15px; font: 400 14px/22px var(--site-font-body); }
.cl-top__mail:hover { color: var(--site-accent); }
.cl-top__msg { grid-column: 2; text-align: center; font-weight: 500; }

/* the bar: logo, search, cart */
.cl-hd__in { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 10px var(--site-gutter) 0; height: 56px; display: flex; align-items: flex-start; }
.cl-hd__logo { flex: none; display: block; margin-top: 5px; }
.cl-hd__logo img { width: 200px; height: 40px; }  /* the Orbital Parts mark, white letters on the black bar, 5:1 */
.cl-hd__search { flex: 0 1 750px; margin-left: 104px; }
.cl-search { position: relative; display: block; }
.cl-search__input {
  display: block; width: 100%; height: 46px; padding: 0 84px 0 20px;
  background: var(--site-field-bg); color: var(--site-fg); border: 1px solid var(--site-accent-strong); border-radius: var(--site-radius);
  font: 400 16px/22px var(--site-font-body); -webkit-appearance: none; appearance: none;
}
.cl-search__input::placeholder { color: var(--site-field-hint); opacity: 1; }
.cl-search__input:focus { outline: 2px solid var(--site-accent); outline-offset: 0; }
.cl-search__btn { position: absolute; top: 5px; right: 3px; width: 65px; height: 36px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent-strong); border-radius: var(--site-radius); }
.cl-search__btn:hover { background: var(--site-accent-strong); }
.cl-hd__icon { flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--site-ink-fg); }
.cl-hd__icon:hover { color: var(--site-accent); }
.cl-hd__toggle, .cl-hd__find, .cl-hd__drawer-search { display: none; }
.cl-hd__cart { margin: 3px -11px 0 auto; }
.cl-hd__count { position: absolute; top: -1px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--site-accent); color: var(--site-accent-fg); font: 500 10px/18px var(--site-font-body); text-align: center; }
.cl-hd__count:empty { display: none; }

/* the menu row: our entries in their uppercase system type */
.cl-hd__nav { background: var(--site-ink); }
.cl-hd__list { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; height: 56px; padding: 20px calc(var(--site-gutter) + 12px) 8px; display: flex; justify-content: space-between; }
.cl-hd__link { display: block; padding: 3px 0; font: 600 14px/22px var(--site-font-menu); text-transform: uppercase; color: var(--site-ink-fg); transition: color .3s; }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }

/* ---------- footer ---------- */
.cl-ft { background: linear-gradient(var(--site-ink-2), #070708); color: var(--site-ink-fg); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cl-ft__in { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 81px var(--site-gutter) 50px; display: grid; grid-template-columns: 343fr 254fr 254fr 356fr; grid-template-rows: minmax(226px, auto); column-gap: 44px; font: 400 14px/22px var(--site-font-body); }
.cl-ft__logo img { width: 210px; height: 42px; }
.cl-ft__line { margin-top: 24px; }
.cl-ft__line a:hover, .cl-ft__list a:hover { color: var(--site-accent); }
.cl-ft__h { font: 600 13.6px/50px var(--site-font-heading); text-transform: uppercase; margin-bottom: 14px; }
.cl-ft__list { display: grid; gap: 8px; }
.cl-ft__support .cl-ft__h { border-top: 1px solid var(--site-accent); line-height: 60px; margin-bottom: 14px; }
.cl-ft__support .cl-ft__line { margin-top: 0; }
.cl-ft__btn { margin-top: 14px; min-height: 40px; }
.cl-ft__bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cl-ft__bin { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 18px var(--site-gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; }
.cl-ft__small { font: 400 14.4px/22px var(--site-font-body); }

/* ---------- phones: the bar their phone shows, the menu and search in a drawer (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-top__in { display: block; padding: 5px 16px; text-align: center; }
  .cl-top__mail { display: none; }
  .cl-hd__in { height: 52px; padding: 6px 8px 0; }
  .cl-hd__toggle, .cl-hd__find { display: grid; }
  .cl-hd__logo { margin: 4px 0 0 7px; }
  .cl-hd__logo img { width: 175px; height: 35px; }
  .cl-hd__search { display: none; }
  .cl-hd__find { margin-left: auto; }
  .cl-hd__cart { margin: 0 -2px 0 -2px; }
  .cl-hd__nav { position: absolute; left: 0; right: 0; top: 100%; border-top: 2px solid var(--site-accent); background: var(--site-ink); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__drawer-search { display: block; padding: 16px 16px 8px; }
  .cl-hd__list { height: auto; flex-direction: column; padding: 0 16px 16px; }
  .cl-hd__link { padding: 9px 0; border-bottom: 1px solid var(--site-ink-line); }
  .cl-ft__in { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 32px; padding: 81px 16px 48px; }
  .cl-ft__h { line-height: 26px; }
  .cl-ft__support .cl-ft__h { line-height: 36px; }
  .cl-ft__list a { display: inline-block; padding: 9px 0; }
  .cl-ft__list { gap: 0; }
  .cl-ft__bin { flex-direction: column; padding: 18px 16px; text-align: center; }
}

/* ---------- 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, shown 21:30 to 04:30 only) before the cart. Outside any
   layer, since the kit's head block styles the switch unlayered: margins and colour only, and a neighbour moves only
   under data-parts-night, so the day's header is the header it was. */
.cl-hd__in > .parts-theme-switch { flex: none; margin: 3px 0 0 auto; color: var(--site-ink-fg); }
.cl-hd__in > .parts-theme-switch:hover { color: var(--site-accent); }
:root[data-parts-night] .cl-hd__cart { margin-left: 0; }
@media (max-width: 979.98px) {
  .cl-hd__in > .parts-theme-switch { margin: 0; }
  :root[data-parts-night] .cl-hd__cart { margin-left: -2px; }
}