/* cl-site.css: the site's tokens, fonts, reset and chrome (header, menu, footer, the primary button) on every page,
   in Superchips' look as measured on their home at 1440 and in their 390px phone stage: a black header, Oswald
   uppercase headings over Open Sans text, black buttons, their red as the accent, a near-black footer.
   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), 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. From 980px the desktop layout; below it their phone layout. */
@layer base, kit, site;

/* ---------- fonts (static/fonts/FONTS.md): Oswald for headings, buttons and the menu, Open Sans for text ---------- */
@font-face { font-family: "Oswald"; src: url("fonts/oswald-latin.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-normal-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-semibold.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-bold-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #1A1A1A;   /* the secondary text: near black, never grey (the shop page rules) */
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F7F7F7;
  --site-accent: #DA2B1F;
  --site-accent-strong: #B32218;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #000000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #DA2B1F;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #5C5C5C;
  --site-dark: #000000;
  --site-dark-fg: #FFFFFF;
  --site-footer-bg: #141414;
  --site-footer-rule: #808080;
  --site-table-rule: #999999;
  --site-table-alt: #F8F8F8;
  --site-check: #6DB33F;
  --site-placeholder: #3A3A3A;
  --site-dark-rule: #333333;   /* a rule on the black header and the black band: black in both themes */
  --site-dark-edge: #3A3A3A;
  --site-photo: #FFFFFF;       /* product photos sit on white whatever the theme */
  --site-plate: transparent;   /* under a home tile's photo: the card shows through on the light page, white on the dark */
  --site-veil: rgba(255, 255, 255, 0.75);   /* the box over the first bento photo */

  /* fonts */
  --site-font-body: "Open Sans", Verdana, Geneva, sans-serif;
  --site-font-heading: "Oswald", "Arial Narrow", sans-serif;
  --site-font-button: "Oswald", "Arial Narrow", sans-serif;

  /* shape and layout: square boxes, their 1312px content column inside 64px gutters at 1440 */
  --site-radius: 0;
  --site-max: 1312px;
  --site-gutter: 64px;

  /* the phone stage: one 390px-stage pixel */
  --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.
   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 { --u: var(--mx); --site-gutter: 16px; }
}
/* the dark theme (kit 0.10.0, `data-parts-theme="dark"` on <html>, by the visitor's clock or their pick): the page a warm
   near black in the kit's family, text near white, the header and the band under it stay black, the red lifted to read
   on the dark, the black buttons turned light with black words, photos on 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-accent: #E8392D;
  --site-accent-strong: #EF6258;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #E8392D;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #DDD7CF;
  --site-dark: #000000;
  --site-dark-fg: #FFFFFF;
  --site-footer-bg: #000000;
  --site-footer-rule: #808080;
  --site-table-rule: #4A443E;
  --site-table-alt: #1C1A18;
  --site-check: #7FCB4E;
  --site-placeholder: #DDD7CF;
  --site-dark-rule: #333333;
  --site-dark-edge: #3A3A3A;
  --site-photo: #FFFFFF;
  --site-plate: #FFFFFF;
  --site-veil: rgba(18, 17, 16, 0.82);
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #36312C;
}

@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: their black Add to Cart, Oswald uppercase ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; 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: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-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: their two black bars, 92px (the name, the search, the account, the cart) over 52px (our menu) ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); color: var(--site-dark-fg); }
.cl-hd__in {
  display: grid; grid-template-columns: 275px minmax(0, 1fr) auto auto; grid-template-rows: 92px auto; column-gap: 12px; align-items: center;
  padding: 0 32px;
}
.cl-hd__toggle, .cl-hd__icon--find { display: none; }
.cl-hd__name {
  grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; min-height: 44px;
  font: italic 700 44px/1 var(--site-font-heading); letter-spacing: 0.5px; color: var(--site-dark-fg);
}
.cl-hd__name { flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; }
.cl-hd__tag { font: normal 700 14px/1 var(--site-font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--site-dark-fg); white-space: nowrap; }
.cl-hd__menu { display: contents; }
.cl-hd__find { grid-column: 2; grid-row: 1; position: relative; width: 100%; max-width: 897px; margin-left: auto; }
.cl-hd__search { height: 44px; display: flex; background: var(--site-field-bg); border: 1px solid var(--site-dark); border-radius: var(--site-radius); }
.cl-hd__q {
  flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; border-radius: var(--site-radius); background: transparent;
  font: 400 15px/1 var(--site-font-body); color: var(--site-fg); outline: none;
}
.cl-hd__q::placeholder { color: var(--site-placeholder); opacity: 1; }
.cl-hd__q::-webkit-search-cancel-button { display: none; }
.cl-hd__go { flex: 0 0 64px; display: flex; align-items: center; justify-content: center; color: var(--site-fg); }
.cl-hd__search:focus-within { outline: 2px solid var(--site-accent); outline-offset: 0; }
.cl-hd__nav { grid-column: 1 / -1; grid-row: 2; margin: 0 -32px; padding: 0 32px; border-top: 1px solid var(--site-dark-rule); }
.cl-hd__list { display: flex; flex-wrap: wrap; gap: 0 32px; }
.cl-hd__link { display: inline-flex; align-items: center; min-height: 52px; font: 400 16px/1 var(--site-font-body); color: var(--site-dark-fg); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }
.cl-hd__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--site-dark-fg); }
.cl-hd__icon--account { grid-column: 3; grid-row: 1; margin-left: 12px; }
.cl-hd__icon:hover { color: var(--site-accent); }
.cl-hd__cart { grid-column: 4; grid-row: 1; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--site-dark-fg); }
.cl-hd__cart:hover { color: var(--site-accent); }
/* the kit's theme switch (parts/theme_switch.html, 40px, currentColor) between the account and the cart, in the header's white:
   it shows at night only, so only then does the bar take a fifth track for it */
:root[data-parts-night] .cl-hd__in { grid-template-columns: 275px minmax(0, 1fr) auto auto auto; }
:root[data-parts-night] .cl-hd__cart { grid-column: 5; }
.cl-hd__in > .parts-theme-switch { grid-column: 4; grid-row: 1; flex: none; color: var(--site-dark-fg); }
.cl-hd__in > .parts-theme-switch:hover { color: var(--site-accent); }
.cl-hd__in > .parts-theme-switch:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count {
  position: absolute; top: 0; right: -4px; min-width: 18px; padding: 0 4px; border-radius: 9px;
  font: 700 13px/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 header search's suggest dropdown (partials/suggest.html in #fm-suggest; fm-site.js its keys):
   an opaque white panel under the field, square, black text, rows 44px tall ---------- */
.fm-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--site-bg); color: var(--site-fg); border: 1px solid var(--site-line); border-radius: var(--site-radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.fm-suggest-section + .fm-suggest-section { border-top: 1px solid var(--site-line); }
.fm-suggest-title { padding: 10px 14px 4px; font: 600 13px/20px var(--site-font-heading); letter-spacing: .5px; text-transform: uppercase; color: var(--site-fg); }
.fm-suggest-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 14px; color: var(--site-fg); font: 400 14px/20px var(--site-font-body); text-decoration: none; }
.fm-suggest-item:hover, .fm-suggest-item.is-active { background: var(--site-band); }
.fm-suggest-item b { font-weight: 700; }
.fm-suggest-glyph { flex: none; }
.fm-suggest-thumb { flex: none; width: 44px; height: 44px; object-fit: contain; background: var(--site-photo); }
.fm-suggest-thumb--blank { display: block; background: var(--site-band); }
.fm-suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fm-suggest-note { font-size: 13px; line-height: 18px; color: var(--site-fg); }
.fm-suggest-fit { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--site-fg); }
.fm-suggest-count, .fm-suggest-price { flex: none; margin-left: auto; font-weight: 600; white-space: nowrap; }
.fm-suggest-all { justify-content: center; border-top: 1px solid var(--site-line); font-weight: 600; }
.fm-suggest-empty { padding: 12px 14px; font: 400 14px/20px var(--site-font-body); color: var(--site-fg); }

/* ---------- footer: their near-black footer ---------- */
.cl-ft { background: var(--site-footer-bg); color: var(--site-dark-fg); }
.cl-ft__in { max-width: 1389px; margin: 0 auto; padding: 29px 32px 0; }
.cl-ft a:hover { color: var(--site-accent); }
.cl-ft__search { width: 450px; margin: 0 auto; padding: 63px 0 30px; text-align: center; }
.cl-ft__lead { width: 360px; margin: 0 auto; font: 500 20px/30px var(--site-font-heading); text-transform: uppercase; }
.cl-ft__field { position: relative; width: 421px; height: 51px; margin: 50px auto 0; background: var(--site-field-bg); border-radius: var(--site-radius); }
.cl-ft__q { width: 100%; height: 100%; padding: 0 104px 0 16px; border: 0; background: transparent; font: 400 16px/1 var(--site-font-body); color: var(--site-fg); outline: none; }
.cl-ft__q::placeholder { color: var(--site-placeholder); opacity: 1; }
.cl-ft__field:focus-within { outline: 2px solid var(--site-accent); }
.cl-ft__go {
  position: absolute; top: 5px; right: 6px; min-width: 86px; height: 41px; padding: 0 14px;
  background: var(--site-button-bg); color: var(--site-button-fg); border-radius: var(--site-radius);
  font: 500 14.4px/1 var(--site-font-button); text-transform: uppercase;
}
.cl-ft__go:hover { background: var(--site-button-hover-bg); }
.cl-ft__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; min-height: 297px; padding-top: 30px; }
.cl-ft__h { font: 700 13px/20px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--site-dark-fg); }
.cl-ft__fold { display: flex; align-items: center; justify-content: space-between; width: 100%; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: default; }
.cl-ft__chev { display: none; }
.cl-ft__links { margin-top: 14px; }
.cl-ft__links li { min-height: 29px; }
.cl-ft__links a { font: 400 15px/20px var(--site-font-body); }
.cl-ft__mail { display: inline-flex; align-items: center; min-height: 40px; margin-top: 4px; font: 600 16px/22px var(--site-font-body); overflow-wrap: anywhere; }
.cl-ft__small { min-height: 77px; padding: 14px 16px 20px; text-align: center; font: 400 13px/20px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--site-dark-fg); }

/* 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 { padding: 10px 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cl-owner:hover { opacity: .8; }

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

/* ---------- phones: their 65px row, the menu in an opaque drawer, the footer's columns folded ---------- */
@media (max-width: 979.98px) {
  .cl-hd__in { display: flex; align-items: center; height: 65px; padding: 0 12px; column-gap: 0; }
  .cl-hd__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--site-dark-fg); }
  .cl-hd__name { flex: 0 1 auto; margin-right: auto; padding-left: 4px; font-size: min(34px, 8.4vw); gap: 3px; }
  .cl-hd__tag { font-size: 13px; letter-spacing: 1px; }
  .cl-hd__icon--find { display: inline-flex; }
  .cl-hd__icon--account { margin-left: 0; }
  .cl-hd__menu {
    position: absolute; top: 65px; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 16px 16px 20px; background: var(--site-dark); border-top: 1px solid var(--site-footer-rule);
  }
  .cl-hd__menu.is-open { display: flex; }
  html:not(.cl-js) .cl-hd__menu { position: static; display: flex; }
  .cl-hd__find { max-width: none; margin: 0; }
  .cl-hd__nav { margin: 0; padding: 0; border-top: 0; }
  .cl-hd__list { flex-direction: column; gap: 0; }
  .cl-hd__link { display: flex; min-height: 56px; font: 700 22px/1.3 var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--site-footer-rule); }
  .cl-hd__q { font-size: 16px; }
  .cl-hd__go { flex-basis: 44px; }
  .fm-suggest { max-height: 60vh; }

  .cl-ft__in { padding: 0 16px; }
  .cl-ft__cols { column-gap: 0; }
  .cl-ft__search { width: auto; padding: 63px 0 30px; }
  .cl-ft__lead { width: auto; }
  .cl-ft__field { width: 100%; height: 54px; margin-top: 50px; }
  .cl-ft__go { top: 7px; right: 7px; height: 40px; }
  .cl-ft__cols { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .cl-ft__experts { order: -1; min-height: 99px; padding-top: 10px; }
  .cl-ft__experts .cl-ft__h { font-size: 13px; }
  .cl-ft__mail { margin-top: 2px; }
  .cl-ft__col { border-bottom: 2px solid var(--site-footer-rule); }
  .cl-ft__col .cl-ft__h { font: 700 22px/28.6px var(--site-font-heading); letter-spacing: 1px; }
  .cl-ft__fold { min-height: 61px; cursor: pointer; }
  .cl-ft__chev { display: block; flex: none; }
  .cl-ft__col.is-open .cl-ft__chev { transform: rotate(180deg); }
  .cl-js .cl-ft__col:not(.is-open) .cl-ft__links { display: none; }
  .cl-ft__links { margin: 0 0 12px; }
  .cl-ft__links li { min-height: 0; }
  .cl-ft__links a { display: flex; align-items: center; min-height: 40px; font-size: 16px; }
  .cl-ft__small { font-size: 13px; }
}

}