/* cl-site.css: the site's tokens, reset and chrome (Spectre's notice bar, header, menu drawer, footer and the
   primary button), on every page. 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;` below sets the order; the
   tokens and @font-face sit 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.

   Two layouts: from 980px the desktop header (notice, utility links, logo, search, cart, the category bar);
   below 980px the phone bar (toggle, search icon, logo, cart) with the menu in a drawer. Sizes are measured
   on spectreperformance.com at 1440 and in its 390px phone stage. */
@layer base, kit, site;

/* Archivo, a variable font (weights 100 to 900), from Google Fonts (SIL OFL): static/fonts/FONTS.md */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/archivo-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: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/archivo-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;
}

:root {
  /* colours: white pages with Spectre's navy text; the header navy, the category bar near black, the footer
     a deeper navy, the red of its buttons and headings */
  --site-bg: #FFFFFF;
  --site-fg: #272D3B;
  --site-muted: #888C93;
  --site-line: #D8D9DC;
  --site-band: #F2F2F3;
  --site-card: #F6F7F7;
  --site-accent: #E33732;
  --site-accent-strong: #B82620;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-field-line: #000000;
  --site-accent-ink: var(--site-accent);  /* the red as text on the page (a hovered card name, tile or link) */
  --site-photo-bg: #FFFFFF;               /* the plate under a product photo on a landing page, white in both themes */
  --site-button-bg: #E33732;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #B82620;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #6B6F76;
  --site-navy: #272D3B;
  --site-navy-deep: #171B24;
  --site-bar: #1A1A1A;
  --site-notice-bg: #708090;
  --site-on-dark: #FFFFFF;
  --site-on-dark-soft: #E8E9EB;
  --site-dark-line: #3A4050;

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

  /* shape and layout */
  --site-radius: 4px; /* the kit's --parts-radius, so the band, the kit's pages and the site share one corner (was 2px) */
  --site-max: 1320px;

  /* the phone layout's unit: one phone-stage pixel (Spectre's stage is 390) */
  --mx: calc(100vw / 390);
  /* the unit the chrome is written in: 1px on desktop, var(--mx) on phones */
  --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);
}
/* the dark theme (kit 0.10.0: the attribute on <html>, by the visitor's clock or their pick). Spectre's chrome is dark
   already and stays as it is: the navy header, the near-black category bar, the deep navy footer, the black hero.
   The white page turns the kit's warm near black, text near white, rules and fields a step up; the red stays the fill
   (buttons, the cart's count, Go) and is lifted as text on the dark page; photos keep their 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: #1C1A18;
  --site-field-line: #57504A;
  --site-accent-ink: #FF6B63;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
}
@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 (Add to Cart, Check out, the home's first link) ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; 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: 700 14px/1 var(--site-font-button); letter-spacing: .7px; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .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-fg); outline-offset: 2px; }

/* ---------- the notice bar over the header ---------- */
.cl-notice { height: 24px; background: var(--site-notice-bg); color: var(--site-navy-deep); font: 700 15px/24px var(--site-font-body); text-align: center; text-transform: uppercase; overflow: hidden; }

/* ---------- header: utility links, logo, search, cart, the category bar ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-navy); color: var(--site-on-dark); padding-bottom: 5px; }
.cl-hd a { color: inherit; }
.cl-hd__util { height: 48px; padding: 8px 27px 0; }
.cl-hd__util-list { display: flex; justify-content: flex-end; gap: 12px; }
.cl-hd__util-list a { display: block; padding: 6px; font: 500 13px/19.5px var(--site-font-body); text-transform: uppercase; text-decoration: underline; text-underline-offset: 2px; }
.cl-hd__util-list a:hover { color: var(--site-accent); }
.cl-hd__main { height: 80px; padding: 0 25px; display: grid; grid-template-columns: 1fr 463px 1fr; align-items: center; }
.cl-hd__toggle, .cl-hd__find { display: none; }
.cl-hd__logo { justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cl-hd__logo img { height: 46px; width: auto; } /* the Orbital Parts mark, as tall as the search beside it */
.cl-hd__search { position: relative; height: 46px; }
.cl-hd__search input { width: 100%; height: 100%; padding: 0 16px 0 44px; background: var(--site-field-bg); color: var(--site-fg); border: 1px solid var(--site-field-line); border-radius: var(--site-radius); font: 400 16px/1 var(--site-font-body); }
.cl-hd__search input::placeholder { color: var(--site-fg); opacity: 1; font-size: 13px; }
.cl-hd__search-go { position: absolute; left: 14px; top: 0; bottom: 0; display: flex; align-items: center; color: var(--site-fg); }
.cl-hd__cart { grid-row: 1; grid-column: 3; justify-self: end; position: relative; display: inline-flex; align-items: center; min-width: 40px; min-height: 40px; justify-content: center; }
.cl-hd__cart:hover { color: var(--site-accent); }
.cl-hd__cart-icon { overflow: visible; }
/* the kit's theme switch (shown at night only, the kit's head block): a 40px square left of the cart, in the header's
   white; on a phone it takes the bar's empty fourth cell */
.cl-hd .parts-theme-switch { grid-row: 1; grid-column: 3; justify-self: end; margin-right: 48px; }
.cl-hd__cart-count { position: absolute; top: 0; right: -6px; min-width: 18px; padding: 0 4px; font: 700 12px/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__nav { background: var(--site-bar); padding: 0 45px; }
.cl-hd__drawer-top, .cl-hd__drawer-util { display: none; }
.cl-hd__list { display: flex; justify-content: space-between; max-width: 1350px; margin: 0 auto; }
.cl-hd__link { display: block; font: 700 14px/41px var(--site-font-body); text-transform: uppercase; }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }

/* ---------- footer: the columns, the logo row, the copyright bar ---------- */
.cl-ft { background: var(--site-navy-deep); color: var(--site-on-dark-soft); font: 500 13px/26px var(--site-font-body); padding-bottom: 20px; }
.cl-ft a { color: inherit; }
.cl-ft a:hover { color: var(--site-on-dark); text-decoration: underline; }
.cl-ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 328px)); gap: 32px; padding: 45px 16px 0; min-height: 405px; }
.cl-ft__title { list-style: none; pointer-events: none; color: var(--site-accent); font: 700 13px/19.5px var(--site-font-heading); letter-spacing: .5px; text-transform: uppercase; }
.cl-ft__title::-webkit-details-marker { display: none; }
.cl-ft__title::after { content: ""; display: block; width: 20px; height: 2px; margin: 4px 0 9px; background: var(--site-accent); }
.cl-ft__brand { border-top: 1px solid #DEDEDE; height: 128px; padding: 31px 16px 0; }
.cl-ft__brand img { width: 220px; height: auto; }
.cl-ft__bar { display: flex; align-items: center; gap: 20px; min-height: 49px; background: #000; font: 500 16px/24px var(--site-font-body); }
.cl-ft__small { align-self: stretch; display: flex; align-items: center; padding: 8px 16px; background: var(--site-navy-deep); }

/* ---------- phones: the bar, the menu drawer, the folded footer ---------- */
@media (max-width: 979.98px) {
  .cl-hd { padding-bottom: 16px; }
  .cl-hd__util { display: none; }
  .cl-hd__main { height: 43px; margin-top: 5px; padding: 0 10px; grid-template-columns: 40px 40px 1fr 40px 40px; }
  .cl-hd__toggle { display: flex; align-items: center; justify-content: flex-start; width: 40px; height: 40px; color: #FF6000; }
  .cl-hd__find { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
  .cl-hd__logo { grid-column: 3; justify-self: center; align-items: center; justify-content: center; gap: 3px; min-height: 40px; }
  .cl-hd__logo img { height: 28px; }
  .cl-hd__search { display: none; }
  .cl-hd__cart { grid-column: 5; justify-content: flex-end; }
  .cl-hd .parts-theme-switch { grid-column: 4; justify-self: center; margin-right: 0; }
  .cl-hd__nav { position: fixed; z-index: 100; inset: 0 auto 0 0; width: min(336px, 86vw); padding: 0; overflow-y: auto; background: var(--site-navy); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5); }
  .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__drawer-top { display: flex; align-items: center; justify-content: space-between; height: 55px; padding: 0 20px; background: linear-gradient(var(--site-navy), var(--site-accent)); border-bottom: 1px solid #D8D8D8; font: 400 13px/40px var(--site-font-body); }
  .cl-hd__close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--site-on-dark); }
  .cl-hd__list { display: block; }
  .cl-hd__link { padding: 12px 20px; font-size: 16px; line-height: 24px; border-bottom: 1px solid #D8D8D8; }
  .cl-hd__drawer-util { display: block; background: linear-gradient(var(--site-navy), var(--site-accent)); }
  .cl-hd__drawer-util a { display: block; padding: 11px 20px; font: 500 14px/18px var(--site-font-body); border-bottom: 1px solid #D8D8D8; }
  html.cl-menu-open { overflow: hidden; }

  .cl-ft__cols { display: block; padding: 20px 35px 0; min-height: 0; }
  .cl-ft__col + .cl-ft__col { border-top: 1px solid var(--site-dark-line); }
  .cl-ft__col { padding-top: 6px; }
  .cl-ft__title { position: relative; pointer-events: auto; cursor: pointer; min-height: 40px; padding-top: 10px; }
  .cl-ft__title::before { top: 10px; }
  .cl-ft__title::before { content: "+"; position: absolute; right: 10px; top: 0; font: 400 24px/20px var(--site-font-body); }
  .cl-ft__col[open] > .cl-ft__title::before { content: "-"; }
  .cl-ft__list { padding-bottom: 8px; line-height: 20px; }
  .cl-ft__list a { display: inline-block; padding: 10px 0; }
  .cl-ft__brand { height: auto; padding: 10px 16px; }
  .cl-ft__brand a { display: inline-flex; align-items: center; min-height: 40px; }
  .cl-ft__brand img { width: 140px; }
  .cl-ft__bar { flex-direction: column; justify-content: flex-start; gap: 0; min-height: 0; padding: 8px 16px; text-align: center; }
  .cl-ft__small { align-self: auto; justify-content: center; padding: 16px 0; background: none; }
  /* the trademark line's "owner" link, a 40px tap box inside its sentence */
  .cl-ft .cl-owner { display: inline-block; padding: 11px 2px; margin: -11px 0; }
}

/* ---------- the dark theme: a landing page's product photos keep their white plates ---------- */
:root[data-parts-theme="dark"] .pp-card__img, :root[data-parts-theme="dark"] .pp-tile__img { background: var(--site-photo-bg); }

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404__home { text-align: center; padding: 0 20px 80px; }

/* the footer's trademark line: "owner" links the client's site in the line's own colour, underlined, whatever the theme gives footer links (Greg 2026-10-01) */
.cl-owner, .cl-owner:visited { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cl-owner:hover { opacity: .8; }

}