/* cl-site.css: Industrial Injection's tokens, type and chrome on every page: the grey strip, the #212121 bar
   with the brand's name in words, the wide search and the cart, the menu row over its red rule, the textured
   grey footer, and the red button.

   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.
   The pages between the header and the footer stay light (the kit's counter look, the cart, the policies);
   the chrome and the home are dark, as theirs are, from the --site-chrome-* tokens.

   Two layouts: from 980px the desktop one, measured at 1440; below 980px their phone layout, measured in
   their 390px stage, where --u (1px on desktop, one stage pixel on phones) is the unit cl-shop.css writes in. */
@layer base, kit, site;

:root {
  /* colours: the light pages between the chrome */
  --site-bg: #FFFFFF;
  --site-fg: #1C1C1C;
  --site-muted: #333333;
  --site-line: #D9D9D9;
  --site-band: #F2F2F2;
  --site-card: #F7F7F7;
  --site-accent: #D52627;
  --site-accent-strong: #B31F20;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #D52627;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #B31F20;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #555555;

  /* colours: their dark chrome and home */
  --site-chrome-bg: #212121;
  --site-chrome-strip: #717171;
  --site-chrome-fg: #FFFFFF;
  --site-chrome-line: rgba(255, 255, 255, 0.16);
  --site-chrome-field: rgba(255, 255, 255, 0.05);
  --site-chrome-deep: #000000;
  --site-ft-bg: #5A5A5A;          /* the footer's grey under its grunge texture (multiplied) */
  --site-ft-rule: #828282;

  /* fonts: their Fira Sans over Bitter, the @font-face rules below */
  --site-font-body: "Fira Sans", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --site-font-heading: Bitter, Georgia, serif;
  --site-font-button: var(--site-font-body);

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

  /* the phone layout's unit cl-shop.css writes in: one pixel of their 390px stage, 1px on desktop */
  --mx: calc(100vw / 390);
  --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 (storefront-kit
   ADR 0007): never set one here. */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-strong);
  --parts-font: var(--site-font-body);
}
@media (max-width: 979.98px) {
  :root { --site-gutter: 16px; --u: var(--mx); }
}

/* the dark theme (the kit's data-parts-theme="dark" on <html>: Site(dark="night") sets it from 21:30 to 04:30 or
   on the shopper's pick): the light pages between the chrome turn the kit's warm near black, text near white,
   rules a dark grey, the cart's cards and summary a step up from the page. The chrome, the home and the 404 are
   dark in both themes and keep their values. The buttons keep the brand's red with white words; the red as
   text (the cart's notes, the tick, a focus ring) lifts to read on the dark. 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-field-bg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --cs-accent: #EE4B4C;
  /* the chrome's mid greys go to the dark palette: the top strip a step over the page, the footer's texture
     multiplied over the same step, its rules the dark grey, its name in words near white */
  --site-chrome-strip: #1C1A18;
  --site-ft-bg: #1C1A18;
  --site-ft-rule: #3D3833;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
}

@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/firasans-n4-2bbe25c7eff81f2190328b1f4c09fff694a30391.woff2") format("woff2"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/firasans-n7-cc8dbbaa3add99fa3b5746d1e0ac6304aad5a265.woff2") format("woff2"); }
@font-face { font-family: Bitter; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/bitter-n8-bff6704742ec5ba2af9f9ecac75ea526651fd5b4.woff2") format("woff2"); }

@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 {

/* ---------- their textured capitals: white text cut out of the grunge photo ---------- */
.cl-grunge { color: var(--site-chrome-fg); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .cl-grunge { color: transparent; background: #FFFFFF url("img/chrome/grunge2.jpg") center / 350px repeat; -webkit-background-clip: text; background-clip: text; }
}

/* ---------- the primary button: their red box ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 43px; padding: 0 20px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 1px solid var(--site-button-bg); border-radius: var(--site-radius);
  font: 400 16px/1.2 var(--site-font-button); text-decoration: none; cursor: pointer;
}
.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-chrome-fg); outline-offset: 2px; }

/* ---------- header: the grey strip ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-chrome-bg); color: var(--site-chrome-fg); font-family: var(--site-font-body); }
.cl-hd__strip { height: 29px; padding: 0 var(--site-gutter); background: var(--site-chrome-strip); color: var(--site-chrome-fg); font: 700 14px/29px var(--site-font-body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-hd__strip a { text-decoration: underline; text-underline-offset: 2px; }
.cl-hd__strip a:hover { text-decoration: none; }

/* ---------- header: the bar ---------- */
.cl-hd__bar { display: flex; align-items: center; height: 112px; padding: 0 var(--site-gutter); }
/* the Orbital Parts mark, white on the bar by day and at night, in the 290px slot their logo had */
.cl-hd__logo { flex: none; width: 290px; display: flex; align-items: center; }
.cl-hd__logo img { width: auto; height: 52px; }
.cl-hd__search { position: relative; flex: none; width: 475px; height: 43px; display: flex; background: var(--site-chrome-field); box-shadow: inset 0 0 0 1px var(--site-chrome-line); }
.cl-hd__q { flex: 1; min-width: 0; height: 100%; padding: 0 12px; background: transparent; border: 0; color: var(--site-chrome-fg); font: 400 16px/1 var(--site-font-body); }
.cl-hd__q::placeholder { color: var(--site-chrome-fg); opacity: 1; }
.cl-hd__q:focus { outline: 2px solid var(--site-chrome-fg); outline-offset: -2px; }
.cl-hd__go { flex: none; width: 48px; display: inline-flex; align-items: center; justify-content: center; color: var(--site-chrome-fg); }
.cl-hd__cart { margin-left: auto; position: relative; display: inline-flex; align-items: center; gap: 15px; min-height: 58px; padding: 0 12px; color: var(--site-chrome-fg); }
.cl-hd__cart:hover { color: var(--site-chrome-fg); text-decoration: underline; }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-label { font: 400 14px/1.2 var(--site-font-body); }
.cl-hd__cart-count { position: absolute; top: 8px; left: 30px; min-width: 18px; padding: 0 4px; font: 700 13px/18px var(--site-font-body); text-align: center; border-radius: 9px; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }
.cl-hd__toggle { display: none; }

/* ---------- header: the menu row over its red rule ---------- */
.cl-hd__nav { border-bottom: 2px solid var(--site-accent); }
.cl-hd__list { display: flex; flex-wrap: wrap; height: 47px; padding: 0 var(--site-gutter); overflow: hidden; }
.cl-hd__link { display: flex; align-items: center; height: 47px; padding: 0 20px; font: 400 14px/1.2 var(--site-font-body); color: var(--site-chrome-fg); }
.cl-hd__link:hover, .cl-hd__link.is-current { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- footer: their textured grey band ---------- */
.cl-ft { min-height: 396px; background: var(--site-ft-bg) url("img/chrome/grunge-wall.jpg") center / cover; background-blend-mode: multiply; color: var(--site-chrome-fg); border-top: 1px solid var(--site-ft-rule); font: 400 15px/18px var(--site-font-body); }
.cl-ft__main { display: grid; grid-template-columns: repeat(4, 210px); gap: 20px; justify-content: center; padding: 50px var(--site-gutter) 45px; min-height: 290px; }
.cl-ft__h { margin-bottom: 15px; font: 800 15px/18px var(--site-font-heading); letter-spacing: 0.03em; text-transform: uppercase; }
.cl-ft__links a { display: inline-block; padding: 4px 0; line-height: 18px; }
.cl-ft__links a:hover, .cl-ft__mail a:hover { text-decoration: underline; }
.cl-ft__mail a { display: inline-flex; align-items: center; gap: 10px; text-decoration: underline; text-underline-offset: 2px; }
.cl-ft__search { display: flex; height: 40px; background: rgba(0, 0, 0, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.cl-ft__search input { flex: 1; min-width: 0; padding: 0 10px; background: transparent; border: 0; color: var(--site-chrome-fg); font: 400 16px/1 var(--site-font-body); }
.cl-ft__search input::placeholder { color: var(--site-chrome-fg); opacity: 1; }
.cl-ft__search button { width: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--site-chrome-fg); }
.cl-ft__small { padding: 31px var(--site-gutter) 30px; border-top: 1px solid var(--site-ft-rule); font-size: 13px; line-height: 20px; text-align: center; }

/* ---------- phones: their 83px bar, the search row, the menu behind the toggle (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd__strip { height: 30px; font-size: 13px; line-height: 30px; }
  .cl-hd__bar { flex-wrap: wrap; height: auto; padding: 0 var(--site-gutter) 13px; }
  .cl-hd__logo { width: auto; height: 83px; }
  .cl-hd__logo img { height: 40px; }
  .cl-hd__cart { order: 2; margin-left: auto; min-height: 58px; padding: 0 10px; }
  .cl-hd__cart-label { display: none; }
  .cl-hd__cart-count { top: 6px; left: 26px; }
  .cl-hd__toggle { order: 3; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 58px; margin-right: -10px; color: var(--site-chrome-fg); }
  .cl-hd__search { order: 4; flex: 1 1 100%; width: auto; height: 40px; }
  .cl-hd__go { width: 40px; }
  .cl-hd__nav { border-bottom: 0; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__nav.is-open { position: absolute; left: 0; right: 0; top: 100%; background: var(--site-chrome-bg); border-top: 1px solid var(--site-chrome-line); border-bottom: 2px solid var(--site-accent); }
  .cl-hd__list { flex-direction: column; flex-wrap: nowrap; height: auto; padding: 0 var(--site-gutter); }
  .cl-hd__link { height: auto; min-height: 48px; padding: 0; border-bottom: 1px solid var(--site-chrome-line); font-size: 16px; }
  .cl-ft__main { grid-template-columns: 1fr 1fr; gap: 30px 16px; padding: 30px var(--site-gutter) 40px; }
  .cl-ft__col:nth-of-type(1), .cl-ft__col:nth-of-type(4) { grid-column: 1 / -1; }
  .cl-ft__links a { padding: 3px 0; min-height: 24px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { padding: 80px 20px; background: linear-gradient(to right bottom, #202020, #000000); color: var(--site-chrome-fg); text-align: center; }
.cl-404__h { font: 800 40px/48px var(--site-font-heading); letter-spacing: 1.2px; text-transform: uppercase; }
.cl-404__p { margin-top: 16px; font: 400 20px/24px var(--site-font-body); }
.cl-404__home { margin-top: 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; }

}

/* the cart's Check out in the dark: cl-shop.css's `.cl-shop a { color: inherit }` outranks .cl-btn, so the label
   took the page's ink, near white on the dark; it takes the button's own words colour */
@layer site {
:root[data-parts-theme="dark"] .cl-shop .cl-btn { color: var(--site-button-fg); }
}

/* the kit's dark-mode switch beside the cart (shown from 21:30 to 04:30, data-parts-night): it takes the cart's
   push to the right, so the two sit together at the bar's end */
@layer site {
.cl-hd__bar .parts-theme-switch { margin-left: auto; }
:root[data-parts-night] .cl-hd__cart { margin-left: 0; }
@media (max-width: 979.98px) { .cl-hd__bar .parts-theme-switch { order: 2; } }
}