/* cl-site.css: SPEC's tokens, fonts, reset and chrome (header, menu, footer, the primary button), on every page,
   from the measurements of their home (review/pages/home.json). 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 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.

   Two layouts: from 980px their desktop header, below 980px their 390px phone bar with the menu behind the three
   bars. Text is full contrast: their grey menu, muted lines and light blue footer links are drawn near black on
   white and white on blue. */
@layer base, kit, site;

/* Open Sans and Oswald are variable (one file a subset serves each weight); Roboto Condensed is the 400 face */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/open-sans-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: "Open Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/open-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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 600; font-display: swap;
  src: url("fonts/oswald-200-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 600; font-display: swap;
  src: url("fonts/oswald-200-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/roboto-condensed-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: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/roboto-condensed-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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 */
  --site-bg: #FFFFFF;
  --site-fg: #333333;
  --site-muted: #333333;
  --site-line: #DADADA;
  --site-band: #F3F3F3;
  --site-card: #F7F7F7;
  --site-accent: #003892;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-field-line: #CCCCCC;
  --site-header-bg: #FAFAFA;
  --site-button-bg: #32373C;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #003892;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #555555;
  --site-accent-ink: var(--site-accent);  /* the accent as text and rules: the logo, a heading, a hovered link */
  --site-ink: #000000;                     /* the logo's line, the three bars */
  --site-icon: #555555;                    /* the cart */
  --site-hint: #444444;                    /* the search's placeholder */
  --site-icon-soft: #777777;               /* the search's glass */
  --site-section: #F3F1F1;                 /* the home's Spec Your Car band */

  /* fonts */
  --site-font-body: "Open Sans", sans-serif;
  --site-font-heading: Oswald, "Arial Narrow", sans-serif;
  --site-font-menu: "Roboto Condensed", "Arial Narrow", sans-serif;
  --site-font-button: var(--site-font-body);

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

  /* one phone-stage pixel (their phone stage is 390 wide), read by cl-shop.css */
  --mx: calc(100vw / 390);
}
/* 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);
  --parts-font: var(--site-font-body);
}
@media (max-width: 979.98px) {
  :root { --site-gutter: 20px; }
}
/* the dark theme (kit 0.10.0: the attribute on <html>, by the visitor's clock or their pick): the kit's warm near
   black, text near white, rules and fields a step up. Their blue stays the fill (the footer, the cart's count, Go)
   with white on it; as text it is lifted to a light blue that reads on the dark page. Their grey Buy Now turns light
   with dark words and hovers in the blue. Photos keep their own colours, the home's slide keeps its light look. */
: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-ink: #8FB0FF;
  --site-field-bg: #1C1A18;
  --site-field-line: #57504A;
  --site-header-bg: #121110;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #003892;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-ink: #F6F3EF;
  --site-icon: #EBE6E0;
  --site-hint: #EBE6E0;
  --site-icon-soft: #EBE6E0;
  --site-section: #1C1A18;
  --parts-accent-strong: #1D4FB8;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
}

@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): their dark Buy Now ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 24px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 0; border-radius: var(--site-radius);
  font: 400 18px/1 var(--site-font-button); text-decoration: none; cursor: pointer;
  transition: background-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-ink); outline-offset: 2px; }

/* ---------- header: their light 136px bar ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-header-bg); }
.cl-hd__in { position: relative; min-height: 136px; padding: 40px var(--site-gutter); display: flex; align-items: flex-start; }
.cl-hd__logo {
  flex: none; display: block; width: 189px; margin-top: 7px;
  font: italic 600 54px/42px var(--site-font-heading); letter-spacing: 9px; color: var(--site-accent-ink);
}
.cl-hd__tag { display: block; margin-top: 10px; font: normal 700 13px/1 var(--site-font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--site-ink); white-space: nowrap; }
.cl-hd__nav { flex: 1; min-width: 0; display: flex; margin-left: 43px; margin-top: 15px; }
.cl-hd__list { display: flex; flex-wrap: wrap; }
.cl-hd__link {
  display: block; padding: 10px 13px; border-bottom: 2px solid transparent;
  font: 400 14px/21px var(--site-font-menu); text-transform: uppercase; color: var(--site-fg);
}
.cl-hd__link:hover, .cl-hd__link.is-current { border-bottom-color: var(--site-accent-ink); color: var(--site-accent-ink); }
.cl-hd__side { position: absolute; top: 61px; right: var(--site-gutter); width: 227px; }
.cl-hd__cart { color: var(--site-icon); transition: transform 0.2s ease, color 0.2s ease; }
.cl-hd__cart:hover { color: var(--site-accent-ink); transform: scale(1.1); }
.cl-hd__cart { position: absolute; top: 23px; right: 192px; display: inline-flex; align-items: flex-start; }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count {
  position: absolute; top: -6px; right: -10px; min-width: 18px; padding: 0 4px;
  font: 600 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__search { display: flex; height: 35px; }
.cl-hd__q {
  flex: 1; min-width: 0; height: 35px; padding: 0 8px; margin: 0;
  background: var(--site-field-bg); color: var(--site-fg); border: 2px solid var(--site-field-line); border-right: 0; border-radius: 0;
  font: 400 13px/1 Arial, sans-serif; -webkit-appearance: none; appearance: none;
}
.cl-hd__q::placeholder { color: var(--site-hint); }
.cl-hd__q:focus { outline: none; border-color: var(--site-accent-ink); }
.cl-hd__go {
  flex: none; width: 33px; height: 35px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--site-field-bg); color: var(--site-icon-soft); border: 2px solid var(--site-field-line); border-left: 0;
}
.cl-hd__go:hover { color: var(--site-accent-ink); }
.cl-hd__toggle { display: none; }
/* 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 ink */
.cl-hd .parts-theme-switch { position: absolute; top: 17px; right: 232px; }

/* ---------- footer: their blue band ---------- */
.cl-ft { margin-top: 10px; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-ft__in { padding: 60px var(--site-gutter) 40px; }
.cl-ft__name { display: inline-flex; flex-direction: column; width: 222px; height: 60px; margin-bottom: 24px; color: var(--site-accent-fg); }
.cl-ft__word { font: italic 600 62px/46px var(--site-font-heading); letter-spacing: 14px; }
.cl-ft__tag { font: 400 11px/14px var(--site-font-menu); letter-spacing: 3.4px; text-transform: uppercase; }
.cl-ft__links { display: grid; justify-items: start; }
.cl-ft__links a { display: block; font: 400 14px/21px var(--site-font-menu); text-transform: uppercase; color: var(--site-accent-fg); }
.cl-ft__links a:hover { text-decoration: underline; }
.cl-ft__small { margin-top: 0; text-align: center; font: 400 13px/17px var(--site-font-body); color: var(--site-accent-fg); }
.cl-ft__small::before { content: ""; display: block; height: 17px; }

/* ---------- phones: their 106px bar, the menu behind the three bars (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd__in { min-height: 106px; padding: 20px var(--site-gutter); align-items: center; }
  .cl-hd__logo { margin-top: 0; }
  .cl-hd__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    position: absolute; top: 32px; right: var(--site-gutter); width: 44px; height: 44px; padding: 0 2px;
  }
  .cl-hd__toggle span { display: block; height: 5px; background: var(--site-ink); }
  .cl-hd__cart { top: 37px; right: calc(var(--site-gutter) + 64px); padding: 4px; }
  .cl-hd .parts-theme-switch { top: 35px; right: calc(var(--site-gutter) + 110px); }
  .cl-hd__nav {
    position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 8px var(--site-gutter) 24px;
    flex-direction: column; gap: 16px; background: var(--site-header-bg); border-bottom: 1px solid var(--site-line);
  }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; }
  .cl-hd__link { padding: 10px 0; min-height: 41px; }
  .cl-hd__side { position: static; width: auto; display: flex; flex-direction: column-reverse; gap: 16px; }
  .cl-hd__search, .cl-hd__q, .cl-hd__go { height: 44px; }
  .cl-hd__q { font-size: 16px; }
  .cl-hd__go { width: 44px; }
  .cl-ft__links a { padding: 0; min-height: 21px; }
}

/* a narrow phone at night: the cart and the switch close up on the bars, so the switch clears the name */
@media (max-width: 379.98px) {
  :root[data-parts-night] .cl-hd__cart { right: calc(var(--site-gutter) + 46px); }
  :root[data-parts-night] .cl-hd .parts-theme-switch { right: calc(var(--site-gutter) + 91px); }
}

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

}