/* cl-site.css: fifteen52's tokens, Inter, the reset and the chrome (header, menu, footer, the primary button),
   on every page, written from the measurements of their home (review/pages/home.json) and the shots of their
   shop pages. 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;` sets the order; the tokens and the
   @font-face rules sit 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 3 --parts-* tokens alone: no rule here
   names a kit class.

   Two layouts: from 980px their desktop header (the 90px logo bar, the 60px menu row, the 48px black strip);
   below 980px their phone header (the 98px bar with the menu toggle, the 64px black strip). */
@layer base, kit, site;

/* Inter, the one family their pages set (static/fonts/FONTS.md); the 500 face also serves 400 */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/inter-n5-d7101d5e168594dd06f56f290dd759fba5431d97.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-n6-771af0474a71b3797eb38f3487d6fb79d43b6877.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("fonts/inter-n7-02711e6b374660cfc7915d1afc1c204e633421e4.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("fonts/inter-i5-4474f48e6ab2b1e01aa2b6d942dd27fa24f2d99f.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 600 800; font-display: swap; src: url("fonts/inter-i7-b377bcd4cc0f160622a22d638ae7e2cd9b86ea4c.woff2") format("woff2"); }

:root {
  /* colours, as measured on their home; text stays near black, never their grey */
  --site-bg: #FFFFFF;
  --site-fg: #191919;
  --site-muted: #333333;
  --site-line: #D6D6D6;
  --site-rule: #E2E2E2;
  --site-band: #F1F1F1;
  --site-card: #F6F6F6;
  --site-accent: #FF8200;
  --site-accent-fg: #191919;
  --site-dark: #191919;
  --site-dark-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #191919;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #FF8200;
  --site-button-hover-fg: #191919;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #555555;
  /* a field's rule, the edge under the black strip, the footer's rules (on the dark in both themes), the home's
     soft band of promises and its rules */
  --site-field-line: #C6C6C6;
  --site-strip-edge: #F8F8F8;
  --site-foot-rule: #EEEEEE;
  --site-soft: #F8F8F8;
  --site-soft-line: rgba(25, 25, 25, 0.13);

  /* fonts */
  --site-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1320px;
  --site-gutter: 50px;
}
/* the kit's shop pages and vehicle band: the brand tokens a site owns, drawn from the tokens above */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: #D96E00;
  --parts-font: var(--site-font-body);
}
/* the dark page (data-parts-theme="dark" on <html>, the kit's night pick): the kit's warm near black for the page,
   the logo bar and the menu row, cards and fields a step up, text near white, rules dark grey; the orange stays (7.6:1
   on the dark), the black strip and the footer stay, and the buttons turn light with dark words, orange on hover.
   The kit's band follows the kit's own dark values, since this site sets none of its own. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-rule: #3D3833;
  --site-band: #24201C;
  --site-card: #1C1A18;
  --site-field-bg: #1C1A18;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-field-line: #5C554E;
  --site-strip-edge: #3D3833;
  --site-soft: #1C1A18;
  --site-soft-line: #3D3833;
  --parts-accent-strong: #FF9B33;
}
/* the dark page: the footer's top rule, a light line against their white page, sits on the dark page now, so it
   turns dark grey; the rule inside the footer keeps its light line */
:root[data-parts-theme="dark"] .cl-ft__main { border-top-color: var(--site-line); }
/* the kit's theme switch (parts/theme_switch.html, shown 21:30 to 04:30 by the kit's head block, whose rules sit in
   no layer, so these do not either): the bar's ink like the cart, orange on hover; on a phone the right side closes
   up to 8px at night so the switch and the cart fit beside the logo */
.cl-hd__right .parts-theme-switch { color: var(--site-fg); }
.cl-hd__right .parts-theme-switch:hover { color: var(--site-accent); }
@media (max-width: 979.98px) {
  :root[data-parts-night] .cl-hd__right { gap: 8px; }
}
@media (max-width: 979.98px) {
  :root { --site-gutter: 16px; }
}

@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: 500 16px/1.6 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; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
[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 black button with white capitals, orange on hover ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 47px; 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: 500 14px/1 var(--site-font-button); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.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-accent); outline-offset: 2px; }

/* ---------- header: the logo bar, the Orbital Parts mark in the middle at the 52px fifteen52's logo stood, the
   light one on the white bar and the dark one at night ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); }
.cl-hd__bar {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: 90px; padding: 0 var(--site-gutter); border-bottom: 1px solid var(--site-rule); background: var(--site-bg);
}
.cl-hd__left { display: flex; align-items: center; }
.cl-hd__right { display: flex; align-items: center; justify-content: flex-end; gap: 32px; }
.cl-hd__icon, .cl-hd__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; margin-left: -8px; color: var(--site-fg); }
.cl-hd__toggle { display: none; }
.cl-hd__logo { display: block; }
.cl-hd__logo img { width: 260px; height: auto; }
.cl-hd__mark--dark { display: none; }
:root[data-parts-theme="dark"] .cl-hd__mark--light { display: none; }
:root[data-parts-theme="dark"] .cl-hd__mark--dark { display: block; }
.cl-hd__verify {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 12px;
  border: 2px solid var(--site-accent); border-radius: var(--site-radius);
  font: 500 13px/1 var(--site-font-body); color: var(--site-fg);
}
.cl-hd__verify .fm-icon { color: var(--site-accent); }
.cl-hd__verify:hover { background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__verify:hover .fm-icon { color: var(--site-accent-fg); }
.cl-hd__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; margin-right: -8px; color: var(--site-fg); }
.cl-hd__cart:hover, .cl-hd__icon:hover { color: var(--site-accent); }
.cl-hd__cart-count {
  position: absolute; top: 0; right: 0; 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; }

/* the search panel: opaque, under the bar, the kit's search form */
.cl-hd__find { position: static; }
.cl-hd__panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  padding: 20px var(--site-gutter); background: var(--site-bg); border-bottom: 1px solid var(--site-rule);
}
.cl-search { display: flex; gap: 10px; max-width: 720px; margin: 0 auto; }
.cl-search input {
  flex: 1; min-width: 0; height: 47px; padding: 0 14px;
  border: 1px solid var(--site-field-line); border-radius: var(--site-radius); background: var(--site-field-bg);
  font: 500 16px/1 var(--site-font-body); color: var(--site-fg);
}
.cl-search input:focus { outline: 2px solid var(--site-accent); outline-offset: -1px; }

/* ---------- header: the menu row, our tree's headings ---------- */
.cl-hd__nav { border-bottom: 1px solid var(--site-rule); background: var(--site-bg); }
.cl-hd__list { display: flex; justify-content: center; height: 60px; }
.cl-hd__link {
  display: flex; align-items: center; height: 100%; padding: 0 16px;
  font: 600 16px/24px var(--site-font-body); text-transform: uppercase; color: var(--site-fg);
}
.cl-hd__link:hover, .cl-hd__link.is-current { text-decoration: underline; text-decoration-color: var(--site-accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* ---------- header: the black strip ---------- */
.cl-hd__strip {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 49px; padding: 0 46px 0 62px; background: var(--site-dark); color: var(--site-dark-fg);
  border-bottom: 1px solid var(--site-strip-edge);
}
.cl-hd__links { display: flex; gap: 24px; font: 500 13px/18px var(--site-font-body); }
.cl-hd__links a:hover { color: var(--site-accent); }
.cl-hd__verify--strip { display: none; }

/* ---------- footer ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-dark-fg); }
.cl-ft__main {
  display: grid; grid-template-columns: 200px 140px 185px 350px; justify-content: space-between; align-items: start;
  min-height: 437px; padding: 70px var(--site-gutter) 60px; border-top: 1px solid var(--site-foot-rule);
}
.cl-ft__logo img { width: 200px; height: auto; }
.cl-ft__col > summary { pointer-events: none; }
.cl-ft__plus { display: none; }
.cl-ft__h { margin-bottom: 20px; font: 700 17.6px/21px var(--site-font-heading); letter-spacing: 0.01em; text-transform: uppercase; }
.cl-ft__col ul { display: grid; gap: 8px; }
.cl-ft__col a { font: 500 16px/25.6px var(--site-font-body); text-transform: uppercase; }
.cl-ft__col a:hover, .cl-ft__legal a:hover { color: var(--site-accent); }
.cl-ft__help p { font: 500 16px/25.6px var(--site-font-body); }
.cl-ft__mail { text-decoration: underline; text-underline-offset: 3px; }
.cl-ft__mail:hover { color: var(--site-accent); }
.cl-ft__search { display: grid; justify-items: start; gap: 16px; margin-top: 31px; }
.cl-ft__search input {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--site-field-line); border-radius: var(--site-radius);
  background: var(--site-field-bg); color: var(--site-fg); font: 500 16px/1 var(--site-font-body);
}
.cl-ft__search button {
  min-width: 140px; height: 49px; padding: 0 20px; border: 1px solid var(--site-dark-fg); background: var(--site-dark-fg); color: var(--site-dark);
  font: 500 14px/14px var(--site-font-button); letter-spacing: 0.08em; text-transform: uppercase;
}
.cl-ft__search button:hover { background: var(--site-accent); border-color: var(--site-accent); }
.cl-ft__lower {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  min-height: 159px; padding: 61px var(--site-gutter) 60px; border-top: 1px solid var(--site-foot-rule);
  font: 500 13px/18.2px var(--site-font-body);
}
.cl-ft__copy { max-width: 640px; }
.cl-ft__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* ---------- phones: their 98px bar, the menu behind its toggle (cl-site.js), the strip with Verify vehicle ---------- */
@media (max-width: 979.98px) {
  .cl-hd__bar { height: 99px; padding: 0 6px 0 0; }
  .cl-hd__toggle { display: inline-flex; width: 44px; height: 44px; margin: 0; }
  .cl-hd__icon { width: 44px; height: 44px; margin: 0; }
  .cl-hd__logo img { width: 180px; }
  .cl-hd__right > .cl-hd__verify { display: none; }
  .cl-hd__cart { width: 44px; height: 44px; margin: 0; }
  .cl-hd__panel { padding: 16px; }
  .cl-hd__nav { position: absolute; left: 0; right: 0; top: 99px; z-index: 55; border-top: 1px solid var(--site-rule); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; height: auto; padding: 8px 0; }
  .cl-hd__link { min-height: 48px; padding: 0 16px; }
  .cl-hd__strip { justify-content: center; height: 65px; padding: 0 16px; }
  .cl-hd__links { display: none; }
  .cl-hd__verify--strip { display: inline-flex; height: 40px; border: 0; color: #F8F8F8; }
  .cl-hd__verify--strip:hover { background: none; color: var(--site-accent); }

  .cl-ft__main { grid-template-columns: 1fr; gap: 0; min-height: 618px; padding: 40px 16px 44px; }
  .cl-ft__logo { margin-bottom: 26px; }
  .cl-ft__col { border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .cl-ft__col:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
  .cl-ft__col > summary { pointer-events: auto; display: flex; align-items: center; justify-content: space-between; min-height: 50px; margin: 0; }
  .cl-ft__plus { display: block; }
  .cl-ft__col[open] .cl-ft__plus { transform: rotate(45deg); }
  .cl-ft__col ul { padding-bottom: 12px; }
  .cl-ft__help { margin-top: 47px; }
  .cl-ft__h { font-size: 16.8px; line-height: 20.16px; }
  .cl-ft__search { margin-top: 31px; }
  .cl-ft__search button { width: 100%; }
  .cl-ft__col a { display: inline-flex; align-items: center; min-height: 40px; }
  .cl-ft__col ul { gap: 0; }
  .cl-ft__lower { flex-direction: column-reverse; gap: 16px; min-height: 205px; padding: 30px 16px 40px; }
  .cl-ft__legal a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { padding: 80px var(--site-gutter) 100px; text-align: center; }
.cl-404__h { font: 700 38px/1.1 var(--site-font-heading); letter-spacing: 0.01em; text-transform: uppercase; }
.cl-404__p { margin-top: 16px; font: 500 18px/1.6 var(--site-font-body); }
.cl-404__home { margin-top: 32px; }

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

}