/* cl-site.css: hptuners.ca's tokens, fonts, reset and chrome (header, menu, footer, the primary button), on every
   page, written from HP Tuners' measured home (review/pages/home.json) and its shots.
   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
   only the three --parts-* tokens below; no rule here names a kit class.
   Two layouts: the desktop one from 980px, their phone one below it. */
@layer base, kit, site;

/* their faces (static/fonts/FONTS.md): each Supra file is one face, declared for every weight so none is faked */
@font-face { font-family: "supralight"; src: url("fonts/supra-light-webfont.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "suprabold"; src: url("fonts/supra-bold-webfont.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Pro"; src: url("fonts/source-sans-pro-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans Pro"; src: url("fonts/source-sans-pro-600-latin.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #111111;
  --site-muted: #333333;
  --site-line: #DADADA;
  --site-band: #F3F3F3;
  --site-card: #F7F7F7;
  --site-accent: #0F75BD;
  --site-accent-fg: #FFFFFF;
  --site-accent-dark: #0B5990;
  --site-field-bg: #F2F2F2;
  --site-button-bg: #0F75BD;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #0B5990;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #555555;
  /* the black of their bar and the dark of their page */
  --site-ink: #000000;
  --site-ink-fg: #FFFFFF;
  --site-page-dark: linear-gradient(to left bottom, #030405 0, #373839 100%);
  --site-foot-bg: #F0F0F0;
  --site-foot-fg: #222222;
  --site-foot-mark: #C4C4C4;
  --site-foot-line: rgba(0, 0, 0, 0.05);
  --site-field-fg: #111111;
  --site-placeholder: #555555;
  --site-veh-bg: #FFFFFF;   /* the home's vehicle question under the blue cars */
  --site-veh-fg: #000000;

  /* fonts */
  --site-font-body: supralight, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --site-font-heading: suprabold, "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --site-font-button: var(--site-font-heading);
  --site-font-ui: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1320px;
  --site-gutter: 42px;
}
/* the kit's shop pages and vehicle band take only these (storefront-kit ADRs 0006 and 0007) */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-dark);
  --parts-font: var(--site-font-body);
}
@media (max-width: 979.98px) {
  :root { --site-gutter: 16px; }
}
/* the dark page (data-parts-theme="dark" on <html>, the kit's night pick or the shopper's switch): the kit's warm
   near black for the page, near-white text, dark grey rules, cards a step up, fields dark with light words. Their
   black header and their dark home stay as they are; the white vehicle question and the light grey footer turn
   dark. Their blue keeps its fills and lifts where it is words (#2A8BD4) */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-band: #24201C;
  --site-card: #1C1A18;
  --site-accent: #2A8BD4;
  --site-field-bg: #1C1A18;
  --site-field-fg: #F6F3EF;
  --site-placeholder: #D9D3CC;
  --site-button-hover-bg: #2A8BD4;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #F6F3EF;
  --site-foot-bg: #1C1A18;
  --site-foot-fg: #F6F3EF;
  --site-foot-mark: #6B635B;
  --site-foot-line: #3D3833;
  --site-veh-bg: #121110;
  --site-veh-fg: #F6F3EF;
  --parts-accent: #0F75BD;
  --parts-accent-strong: color-mix(in srgb, var(--parts-accent) 78%, #fff);
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
}

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

/* ---------- header: the black bar, the Orbital Parts mark over the menu row ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-ink); color: var(--site-ink-fg); border-bottom: 1px solid var(--site-ink-fg); }
.cl-hd__in { position: relative; padding: 24px var(--site-gutter) 0; }
.cl-hd__logo { display: inline-block; vertical-align: top; }
.cl-hd__logo img { width: auto; height: 66px; }
.cl-hd__toggle { display: none; }
.cl-hd__nav { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; min-height: 69px; padding-top: 10px; }
.cl-hd__list { display: flex; flex-wrap: wrap; margin-left: -16px; }
.cl-hd__link { display: flex; align-items: center; height: 59px; padding: 0 16px; font: 400 16px/1.618 var(--site-font-body); text-transform: uppercase; color: var(--site-ink-fg); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }
.cl-hd__search { position: relative; order: 2; width: 250px; margin-top: 1.5px; }
.cl-hd__search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--site-placeholder); pointer-events: none; }
.cl-hd__q {
  width: 100%; height: 46px; padding: 0 12px 0 36px; border: 0; border-radius: var(--site-radius);
  background: var(--site-field-bg); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.125); color: var(--site-field-fg);
  font: 400 16px/1 var(--site-font-body);
}
.cl-hd__q::placeholder { color: var(--site-placeholder); }
.cl-hd__q:focus { outline: 2px solid var(--site-accent); outline-offset: 0; }
/* the cart sits left of the search, as theirs */
.cl-hd__cart { position: absolute; top: 95px; right: calc(var(--site-gutter) + 279px); display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 59px; color: var(--site-ink-fg); }
.cl-hd__cart:hover { color: var(--site-accent); }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: 8px; right: 0; min-width: 18px; padding: 0 4px; font: 400 13px/18px var(--site-font-heading); text-align: center; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }

/* ---------- footer: the light grey band of four columns ---------- */
.cl-ft { background: var(--site-foot-bg); color: var(--site-foot-fg); }
.cl-ft__in { max-width: 1296px; margin: 0 auto; padding: 0 0 30px; font: 400 16px/22.652px var(--site-font-body); }
.cl-ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 56.4px; padding: 32px 0 0; border-bottom: 1px solid var(--site-foot-line); }
.cl-ft__h { padding-bottom: 22.7px; margin-bottom: 22.7px; border-bottom: 1px solid var(--site-foot-line); font: 400 22.652px/36.65px var(--site-font-body); }
.cl-ft__col > .cl-ft__list { margin-bottom: 59.3px; }
.cl-ft__h--more { text-transform: uppercase; }
.cl-ft__col:not(:first-child) > .cl-ft__h { text-transform: uppercase; }
.cl-ft__list > li { position: relative; padding-left: 25.9px; }
.cl-ft__list > li + li { margin-top: 16px; }
.cl-ft__list .cl-ft__list { padding: 10px 0 0 25.9px; }
.cl-ft__list .cl-ft__list > li + li { margin-top: 5px; }
.cl-ft__mark { position: absolute; left: 0; top: 4px; color: var(--site-foot-mark); }
.cl-ft__list a:hover { color: var(--site-accent); }
.cl-ft__base { padding-top: 30px; }
.cl-ft__copy { font: 700 16px/1.5 var(--site-font-body); color: var(--site-accent); }

/* ---------- phones: the mark and their outlined Menu button, the menu in an opaque panel ---------- */
@media (max-width: 979.98px) {
  .cl-hd__in { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "logo cart toggle" "nav nav nav"; align-items: center; column-gap: 8px; padding: 16px var(--site-gutter) 16px; }
  .cl-hd__logo { grid-area: logo; display: flex; align-items: center; min-height: 48px; }
  .cl-hd__logo img { height: 32px; }
  .cl-hd__cart { position: relative; top: auto; right: auto; grid-area: cart; width: 44px; height: 44px; }
  .cl-hd__cart-count { top: 2px; }
  .cl-hd__toggle { grid-area: toggle; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; background: var(--site-ink); border: 2px solid var(--site-ink-fg); border-radius: var(--site-radius); font: 600 14px/1 var(--site-font-ui); color: var(--site-ink-fg); }
  .cl-hd__nav { grid-area: nav; flex-direction: column; align-items: stretch; gap: 16px; min-height: 0; padding: 12px 0 8px; background: var(--site-ink); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; margin: 0; }
  .cl-hd__link { height: 58px; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  .cl-hd__search { order: 0; width: 100%; margin: 0; }
  .cl-ft__in { padding: 0 var(--site-gutter) 30px; }
  .cl-ft__cols { grid-template-columns: 1fr; }
  .cl-ft__list > li + li, .cl-ft__list .cl-ft__list > li + li { margin-top: 0; }
  .cl-ft__list .cl-ft__list { padding-top: 0; }
  .cl-ft__list a { display: inline-block; padding: 9px 0; }
  .cl-ft__mark { top: 13px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { max-width: 1200px; margin: 0 auto; padding: 80px var(--site-gutter) 100px; text-align: center; }
.cl-404__h { font: 400 44px/1.2 var(--site-font-heading); text-transform: uppercase; letter-spacing: 2px; color: var(--site-accent); }
.cl-404__p { margin: 16px 0 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; }

}

/* the kit's theme switch (shown 21:30 to 04:30 by the kit's head block): left of the cart on the black bar, and
   between the logo and the cart on phones; outside any layer, like the kit's own rule for it */
.cl-hd .parts-theme-switch { position: absolute; top: 104px; right: calc(var(--site-gutter) + 323px); color: var(--site-ink-fg); }
.cl-hd .parts-theme-switch:hover { color: var(--site-accent); }
@media (max-width: 979.98px) {
  :root[data-parts-night] .cl-hd__in { grid-template-columns: 1fr auto auto auto; grid-template-areas: "logo theme cart toggle" "nav nav nav nav"; }
  .cl-hd .parts-theme-switch { position: static; grid-area: theme; }
}