/* cl-site.css: the site's tokens, fonts, reset and chrome (header, menu, footer, the primary button), on every
   page, in StopTech's look: a white header box on a dark band, Oswald for the headings, the menu and the buttons,
   Lato for the text, the red #DD0000 accent and a red footer over a black bottom bar.
   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 and the @font-face rules sit outside any layer, the reset in @layer base (under the kit's rules), 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 the desktop (measured in a 1440 window); below 980px the client's phone layout, its
   390px stage scaled by --mx, so a rule written in calc(N * var(--u)) serves both. */
@layer base, kit, site;

/* ---------- fonts (static/fonts/FONTS.md) ---------- */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/lato-300-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: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/lato-300-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: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-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: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-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; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-700-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: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/lato-700-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: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("fonts/oswald-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: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("fonts/oswald-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, measured on their home */
  --site-bg: #FFFFFF;
  --site-fg: #252525;
  --site-muted: #878787;
  --site-line: #D8D8D8;
  --site-band: #F2F2F2;
  --site-card: #F6F6F6;
  --site-accent: #DD0000;
  --site-accent-strong: #B00000;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #252525;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #DD0000;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #6B6B6B;
  /* the chrome's own: the dark band behind the header, the footer's red and its bottom bar */
  --site-dark: #252525;
  --site-black: #000000;
  --site-footer-bg: #FF1900;
  --site-footer-fg: #F2F2F2;
  --site-footer-head: #000000;
  --site-footer-label: #FCFCFC;
  --site-bar-fg: #FFFFFF;                     /* text on the black bars: the footer's bottom bar, the 404 band, the home's hero */
  --site-bar-link: #F2F2F2;
  --site-hero-top: #111111;
  --site-ink-strong: #000000;                 /* the header's menu, cart and phone bars */
  --site-accent-text: var(--site-accent);     /* the accent as words: a current entry in the phone menu */
  --site-placeholder: #555555;
  --site-hover-wash: rgba(0, 0, 0, 0.1);
  --site-rule-soft: rgba(0, 0, 0, 0.1);
  --site-pay: var(--site-button-bg);          /* the checkout's Pay */
  --site-panel-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);  /* the phone menu's panel */

  /* fonts */
  --site-font-body: "Lato", "Helvetica Neue", Arial, sans-serif;
  --site-font-heading: "Oswald", "Arial Narrow", Impact, sans-serif;
  --site-font-button: var(--site-font-heading);

  /* shape and layout: their boxes are square; the header and footer sit in a 1100 box */
  --site-radius: 0;
  --site-max: 1320px;
  --site-box: 1100px;

  /* the phone layout's unit: one pixel of their 390px phone stage */
  /* capped at 1px: their phone page overflows to 487 wide, the stage itself stays 390 */
  --mx: min(calc(100vw / 390), 1px);
  --u: 1px;
}
/* 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. Every other --parts-* default is the kit's counter look (ADR 0007). */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-strong);
  --parts-font: var(--site-font-body);
}
/* 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. The header's dark band and the black bars stay; the white header box, the page and
   the red footer turn dark with near white text, the footer's headings in the red; the mark turns to its white lettering;
   the button turns light with dark words, the kit's dark way; red as words lifts a touch to read on the dark. */
: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: #F5352A;
  --site-field-bg: #1C1A18;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-footer-bg: #1C1A18;
  --site-footer-fg: #F6F3EF;
  --site-footer-head: #F5352A;
  --site-ink-strong: #F6F3EF;
  --site-accent-text: #F5352A;
  --site-placeholder: #DDD7CF;
  --site-hover-wash: rgba(255, 255, 255, 0.08);
  --site-rule-soft: rgba(255, 255, 255, 0.1);
  --site-pay: #DD0000;
  --site-panel-shadow: 0 1px 0 #3D3833, 0 6px 12px rgba(0, 0, 0, 0.6);
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #36312C;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}

@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: their red, Oswald capitals ---------- */
.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: 0; border-radius: var(--site-radius);
  font: 600 16px/1 var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease;
}
.cl-btn:hover { background: var(--site-accent-strong); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: a white 1100 box on the dark band (black on the home), the Orbital Parts mark on the left
   and the search and the cart on the right in one 100px row, the menu along the bottom in 100px tall Oswald entries ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); }
.cl-home-page .cl-hd { background: var(--site-black); }
.cl-hd__in {
  position: relative; max-width: var(--site-box); margin: 0 auto; padding: 0 15px; background: var(--site-bg);
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "brand tools" "nav nav";
}
.cl-hd__brand { grid-area: brand; display: flex; align-items: center; height: 100px; padding-left: 15px; }
.cl-hd__mark { width: 250px; height: auto; }
.cl-hd__mark--night, :root[data-parts-theme="dark"] .cl-hd__mark { display: none; }
:root[data-parts-theme="dark"] .cl-hd__mark--night { display: block; }
.cl-hd__tools { grid-area: tools; display: flex; align-items: center; justify-content: flex-end; gap: 18px; align-self: start; height: 100px; }
.cl-hd__search { display: flex; width: 340px; height: 42px; border: 1px solid var(--site-line); background: var(--site-field-bg); }
.cl-hd__search input {
  flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: none; color: var(--site-fg);
  font: 400 16px/1 var(--site-font-body);
}
.cl-hd__search input::placeholder { color: var(--site-placeholder); }
.cl-hd__search input:focus-visible { outline: 2px solid var(--site-accent); outline-offset: -2px; }
.cl-hd__search button { flex: none; width: 44px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 4px;
  font: 400 18px/27px var(--site-font-heading); color: var(--site-ink-strong);
}
.cl-hd__cart:hover { color: var(--site-accent); }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count {
  min-width: 20px; padding: 0 5px; font: 700 13px/20px var(--site-font-body); text-align: center;
  background: var(--site-accent); color: var(--site-accent-fg);
}
.cl-hd__cart-count:empty { display: none; }
.cl-hd__toggle { display: none; }
.cl-hd__nav { grid-area: nav; display: flex; justify-content: flex-end; }
.cl-hd__list { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.cl-hd__link {
  display: flex; align-items: center; height: 100px; padding: 0 18px;
  font: 400 18px/27px var(--site-font-heading); color: var(--site-ink-strong); transition: background-color 0.2s ease;
}
.cl-hd__link:hover, .cl-hd__link.is-current { background: var(--site-hover-wash); }
.cl-hd__drawer-search { display: none; }

/* ---------- footer: the red columns, then the black bar with the links and the copyright ---------- */
.cl-ft { background: var(--site-footer-bg); color: var(--site-footer-fg); }
.cl-ft__in {
  max-width: var(--site-box); margin: 0 auto; padding: 63px 32px 63px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; min-height: 422px; align-content: start;
}
.cl-ft__h { margin-bottom: 18px; font: 700 24px/28.8px var(--site-font-heading); text-transform: uppercase; color: var(--site-footer-head); }
.cl-ft__list a:hover, .cl-ft__mail:hover { text-decoration: underline; }
.cl-ft__item { padding-bottom: 20px; font: 400 18px/27px var(--site-font-body); color: var(--site-footer-fg); }
.cl-ft__label { display: block; font-weight: 700; color: var(--site-footer-label); }
.cl-ft__list a { display: inline-block; font: 400 18px/27px var(--site-font-body); color: var(--site-footer-fg); }
.cl-ft__bar { background: var(--site-black); color: var(--site-bar-fg); }
.cl-ft__bar-in { max-width: var(--site-box); margin: 0 auto; padding: 32px 15px 32px; display: grid; gap: 12px; }
.cl-ft__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 24px; }
.cl-ft__links a { font: 700 16px/24px var(--site-font-body); color: var(--site-bar-link); }
.cl-ft__links a:hover { color: var(--site-accent); }
.cl-ft__small { justify-self: center; text-align: center; font: 400 16px/24px var(--site-font-body); color: var(--site-bar-fg); }

/* ---------- phones: their 390 stage; the menu folds behind the three bars (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd, .cl-home-page .cl-hd { background: var(--site-bg); }
  .cl-hd__in { display: block; max-width: none; padding: 0 0 0 calc(15 * var(--u)); }
  .cl-hd__brand { width: max-content; height: calc(80 * var(--u)); padding: 0; }
  .cl-hd__mark { width: calc(160 * var(--u)); }
  .cl-hd__tools { position: absolute; top: calc(20 * var(--u)); right: calc(64 * var(--u)); height: auto; gap: 0; }
  .cl-hd__tools .cl-hd__search { display: none; }
  .cl-hd__cart { min-height: 40px; min-width: 40px; justify-content: center; font-size: 16px; }
  .cl-hd__cart-label { display: none; }
  .cl-hd__toggle {
    position: absolute; top: calc(10.5 * var(--u)); right: 0; display: grid; align-content: center; gap: calc(7 * var(--u));
    width: calc(64 * var(--u)); height: calc(59 * var(--u)); padding: 0 calc(19 * var(--u)) 0 calc(5 * var(--u));
  }
  .cl-hd__toggle span { display: block; height: calc(7.2 * var(--u)); background: var(--site-ink-strong); }
  .cl-hd__nav { display: block; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__nav.is-open {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 60; padding: 8px 16px 16px;
    background: var(--site-bg); border-top: 1px solid var(--site-line); box-shadow: var(--site-panel-shadow);
  }
  .cl-hd__list { display: block; }
  .cl-hd__link { height: auto; min-height: 48px; padding: 0; border-bottom: 1px solid var(--site-rule-soft); }
  .cl-hd__link:hover, .cl-hd__link.is-current { background: none; color: var(--site-accent-text); }
  .cl-hd__drawer-search { display: flex; width: 100%; margin-top: 12px; }

  .cl-ft__in { display: block; max-width: none; min-height: 0; padding: calc(63 * var(--u)) calc(18 * var(--u)) calc(40 * var(--u)); }
  .cl-ft__col + .cl-ft__col { margin-top: calc(18 * var(--u)); }
  .cl-ft__h { font-size: calc(24 * var(--u)); line-height: calc(28.8 * var(--u)); }
  .cl-ft__bar-in { padding: calc(32 * var(--u)) 16px calc(32 * var(--u)); }
  .cl-ft__links { justify-content: center; gap: 0 20px; }
  .cl-ft__links a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404__band { background: var(--site-dark); color: var(--site-bar-fg); padding: 120px 32px 100px; text-align: center; }
.cl-404__h1 { font: 700 56px/1.2 var(--site-font-heading); text-transform: uppercase; }
.cl-404__p { margin-top: 16px; font: 300 24px/36px var(--site-font-body); }
.cl-404__home { text-align: center; padding: 48px 20px 80px; }
@media (max-width: 979.98px) {
  .cl-404__band { padding: 64px 16px 56px; }
  .cl-404__h1 { font-size: 40px; }
  .cl-404__p { font-size: 20px; line-height: 30px; }
}

/* 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; }

}