/* cl-site.css: the site's tokens, reset and chrome in STILLEN's look (header, menu, search, footer, the primary
   button), on every page, written from their measurements (review/pages/home.json): the red top bar, the
   #121212 header with the name centred over the row of our tree's headings, the #F3F3F3 footer of four columns,
   all in Roboto. cl-shop.css and the kit's shop pages read only these tokens.

   The cascade (the kit's static/parts/tokens.css): `@layer base, kit, site;` 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 take
   the brand colour and font from the 3 --parts-* tokens alone: no rule here names a kit class.
   Two layouts: from 980px their desktop header; below it their phone header, the menu in an opaque drawer. */
@layer base, kit, site;

@font-face { font-family: "Roboto"; src: url("fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* colours: their white page, #121212 text and header, red bar and accent; text stays full contrast */
  --site-bg: #FFFFFF;
  --site-fg: #121212;
  --site-muted: #121212;
  --site-line: #D4D4D4;
  --site-band: #F3F3F3;
  --site-card: #F6F6F6;
  --site-accent: #CA3838;
  --site-accent-strong: #B43333;
  --site-accent-fg: #FFFFFF;
  --site-dark: #121212;
  --site-dark-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #B43333;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #121212;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #121212;
  --site-photo: #FFFFFF;                      /* a product or category photo's plate: white whatever the theme */
  --site-ok: #1B8A2E;                         /* the Ready to ship square */
  --site-current: #FF6B6B;                    /* the current heading on the dark bar */
  --site-dark-rule: rgba(255, 255, 255, 0.08);
  --site-dark-field-line: rgba(255, 255, 255, 0.75);
  --site-ft-rule: rgba(18, 18, 18, 0.08);

  /* fonts */
  --site-font-body: "Roboto", Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);

  /* shape and layout: their 1200px column with 50px gutters (1100px of content) */
  --site-radius: 0;
  --site-max: 1200px;
  --site-gutter: 50px;
}
/* the kit's shop pages and vehicle band: only the brand tokens a site owns (storefront-kit ADR 0007) */
:root {
  --parts-accent: var(--site-accent-strong);
  --parts-accent-strong: var(--site-accent-strong);
  --parts-font: var(--site-font-body);
  /* one corner radius across the site: square, as their boxes */
  --parts-radius: var(--site-radius);
  /* the vehicle band in the colours of their Select Your Vehicle bar: light grey, black heading, red Go */
  --parts-band-bg: #E1E3E4;
  --parts-band-ink: #121212;
  --parts-band-edge: #E1E3E4;
  --parts-band-go: var(--site-accent-strong);
  --parts-band-go-hover: var(--site-dark);
  --parts-band-go-ink: #FFFFFF;
}
/* the dark page (the kit's data-parts-theme="dark" on <html>, by the visitor's clock or the shopper's switch): the kit's
   warm near black family under their #121212 header, which stays as it is with the red bar. The page, the footer, the
   bands and the cards turn dark with near white text; the red buttons stay red and turn near white on hover, where
   the light page darkens them to the header's black; photos keep white plates. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #F6F3EF;
  --site-line: #3D3833;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-field-bg: #1C1A18;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #F6F3EF;
  --site-ok: #34C374;
  --site-ft-rule: rgba(246, 243, 239, 0.12);
  --parts-accent-strong: #C65A5A;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #24201C;
  --parts-band-go-hover: #C65A5A;
}
@media (max-width: 979.98px) {
  :root { --site-gutter: 16px; }
}

@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);
  letter-spacing: 0.6px;
  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; letter-spacing: 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 red, square ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 47px; padding: 0 30px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 1px solid var(--site-button-bg); border-radius: var(--site-radius);
  font: 400 15px/1 var(--site-font-button); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease;
}
.cl-btn:hover { background: var(--site-button-hover-bg); border-color: var(--site-button-hover-bg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: the red bar ---------- */
.cl-hd { position: relative; z-index: 50; }
.cl-hd__bar { background: var(--site-accent-strong); color: var(--site-accent-fg); border-bottom: 1px solid var(--site-dark-rule); }
.cl-hd__bar-in { position: relative; max-width: var(--site-max); margin: 0 auto; min-height: 38px; display: flex; align-items: center; justify-content: center; }
.cl-hd__promo { font: 500 13px/16.9px var(--site-font-body); letter-spacing: 1px; text-align: center; padding: 0 16px; }

/* ---------- header: the dark bar, the Orbital Parts mark centred, search and cart, the row of headings ---------- */
.cl-hd__main { background: var(--site-dark); color: var(--site-dark-fg); }
.cl-hd__in { position: relative; max-width: var(--site-max); margin: 0 auto; padding: 22px var(--site-gutter) 12px; }
.cl-hd__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; }
.cl-hd__icon { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--site-dark-fg); position: relative; }
.cl-hd__icon:hover { opacity: 0.8; }
.cl-hd__left { display: flex; align-items: center; }
.cl-hd__right { display: flex; align-items: center; justify-content: flex-end; padding-right: 0; }
.cl-hd__toggle, .cl-hd__search-phone { display: none; }
.cl-hd__logo { display: flex; justify-content: center; min-width: 0; padding: 0 8px; }
.cl-hd__logo img { width: 200px; max-width: 100%; height: auto; }
/* the kit's theme switch (its partial, 40px, currentColor) in the bar's white: beside the cart on the desktop, beside
   the menu button on the phone, where the right column holds search and cart */
.cl-hd__theme { display: contents; }
.cl-hd__theme--phone { display: none; }
.cl-hd__cart-count {
  position: absolute; right: 2px; bottom: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--site-accent-strong); color: var(--site-accent-fg); font: 500 13px/18px var(--site-font-body); letter-spacing: 0; text-align: center;
}
.cl-hd__cart-count:empty { display: none; }

.cl-hd__nav { margin-top: 12.5px; }
.cl-hd__close { display: none; }
.cl-hd__list { display: flex; flex-wrap: wrap; justify-content: center; }
.cl-hd__link {
  display: block; padding: 12px; font: 400 14px/18.2px var(--site-font-body); letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--site-dark-fg);
}
.cl-hd__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cl-hd__link.is-current { color: var(--site-current); }

/* the search panel the magnifier opens, over the dark bar (opaque), and under its field the suggest listbox */
.cl-hd__search {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  max-width: var(--site-max); margin: 0 auto; padding: 22px var(--site-gutter) 22px; background: var(--site-dark);
}
.cl-js .cl-hd__search:not(.is-open) { display: none; }
.cl-hd__search-form { display: flex; align-items: center; gap: 8px; }
.cl-hd__search input {
  flex: 1; min-width: 0; height: 45px; padding: 0 16px; border: 1px solid var(--site-dark-field-line); border-radius: var(--site-radius);
  background: var(--site-dark); color: var(--site-dark-fg); font: 400 16px/24px var(--site-font-body); letter-spacing: 1px;
}
.cl-hd__search input::placeholder { color: var(--site-dark-fg); opacity: 1; }
.cl-hd__search input:focus { outline: 2px solid var(--site-dark-fg); outline-offset: 0; }

/* the suggest listbox (partials/suggest.html, filled by the kit's /suggest): an opaque white panel, square, black text */
.cl-hd__suggest {
  margin-top: 8px; max-height: min(70vh, 560px); overflow-y: auto; background: var(--site-bg); color: var(--site-fg);
  border: 1px solid var(--site-line); border-radius: var(--site-radius); text-align: left;
}
.fm-suggest-section + .fm-suggest-section { border-top: 1px solid var(--site-line); }
.fm-suggest-title { padding: 12px 16px 4px; font: 700 14px/20px var(--site-font-heading); letter-spacing: 0.6px; text-transform: uppercase; }
.fm-suggest-item {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 16px;
  font: 400 15px/20px var(--site-font-body); color: var(--site-fg);
}
.fm-suggest-item:hover, .fm-suggest-item.is-active { background: var(--site-band); }
.fm-suggest-item mark { background: none; color: inherit; font-weight: 700; }
.fm-suggest-glyph { flex: none; }
.fm-suggest-thumb { flex: none; width: 48px; height: 48px; object-fit: contain; background: var(--site-photo); }
.fm-suggest-thumb--blank { background: var(--site-band); }
.fm-suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fm-suggest-note { font-size: 13px; line-height: 18px; }
.fm-suggest-fit { font-size: 13px; line-height: 18px; font-weight: 500; }
.fm-suggest-count, .fm-suggest-price { flex: none; margin-left: auto; font-weight: 500; }
.fm-suggest-all { justify-content: center; border-top: 1px solid var(--site-line); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.fm-suggest-empty { padding: 12px 16px; font: 400 15px/22px var(--site-font-body); }

/* ---------- footer: their grey band, three columns, the small line ---------- */
.cl-ft { margin-top: 36px; background: var(--site-band); color: var(--site-fg); }
.cl-ft__in { max-width: var(--site-max); margin: 0 auto; padding: 32px var(--site-gutter) 0; }
.cl-ft__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; min-height: 273.8px; }
.cl-ft__h { font: 500 18px/23.4px var(--site-font-heading); letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 20px; }
.cl-ft__links li { padding: 2px 0; }
.cl-ft__links a { display: inline-block; font: 400 14px/25.2px var(--site-font-body); letter-spacing: 0.6px; padding: 3px 0 2px; }
.cl-ft__links a:hover, .cl-ft__email:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-ft__text { font: 400 16px/28.8px var(--site-font-body); letter-spacing: 0.6px; }
.cl-ft__text strong { font-weight: 700; }
.cl-ft__email { text-decoration: underline; text-underline-offset: 3px; }
.cl-ft__text + .cl-ft__text { margin-top: 16px; }
.cl-ft__bottom { margin-top: 50px; border-top: 1px solid var(--site-ft-rule); padding: 70px var(--site-gutter) 16px; text-align: center; }
.cl-ft__copy { max-width: var(--site-max); margin: 0 auto; font: 400 13px/18.7px var(--site-font-body); letter-spacing: 0.7px; }

/* ---------- phones: their 60px header, the menu in a drawer, the footer stacked ---------- */
@media (max-width: 979.98px) {
  .cl-hd__promo { font-size: 13px; }
  .cl-hd__in { padding: 10px 26px 6px 18px; }
  .cl-hd__top { grid-template-columns: 88px 1fr 88px; }
  .cl-hd__toggle, .cl-hd__search-phone { display: inline-flex; }
  .cl-hd__search-open { display: none; }
  .cl-hd__theme--desk { display: none; }
  .cl-hd__theme--phone { display: contents; }
  .cl-hd__logo { align-items: center; min-height: 44px; padding: 0; }
  .cl-hd__logo img { width: 160px; }
  .cl-hd__nav {
    position: fixed; inset: 0 auto 0 0; z-index: 100; width: min(360px, 88vw); margin: 0; padding: 60px 0 24px;
    background: var(--site-dark); overflow-y: auto; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.5);
  }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__close { display: inline-flex; position: absolute; top: 8px; left: 8px; }
  .cl-hd__list { display: block; }
  .cl-hd__link { padding: 14px 24px; font-size: 16px; line-height: 20px; border-top: 1px solid var(--site-dark-rule); }
  .cl-hd__search { padding: 8px 16px; }
  .cl-hd__suggest { max-height: calc(100vh - 160px); }
  .fm-suggest-item { min-height: 48px; }

  .cl-ft { margin-top: 27px; }
  .cl-ft__in { padding: 24px var(--site-gutter) 0; }
  .cl-ft__cols { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .cl-ft__col { padding: 0 0 40px; }
  .cl-ft__col:last-child { padding-bottom: 0; }
  .cl-ft__h { font-size: 16px; line-height: 20.8px; margin-bottom: 20px; }
  .cl-ft__links li { padding: 0; }
  .cl-ft__links a { display: block; padding: 10px 0; font-size: 14px; }
  .cl-ft__text { font-size: 15px; line-height: 27px; }
  .cl-ft__email { display: inline-flex; align-items: center; min-height: 44px; }
  .cl-owner { display: inline-block; padding: 13px 4px; margin: -13px -4px; }
  .cl-ft__bottom { margin-top: 30px; padding: 24px 16px 16px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { max-width: var(--site-max); margin: 0 auto; padding: 72px var(--site-gutter) 48px; text-align: center; }
.cl-404__h { font: 700 40px/1.3 var(--site-font-heading); letter-spacing: 0.6px; text-transform: uppercase; }
.cl-404__p { margin: 16px 0 32px; font: 400 16px/28.8px var(--site-font-body); }
@media (max-width: 979.98px) { .cl-404 { padding: 32px var(--site-gutter); } }

/* the footer's trademark line: "owner" links the brand'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; }

}