/* cl-site.css: the site's tokens, fonts, reset and chrome (header, menu, footer, the primary button, the 404)
   in kanseiwheels.com's look, on every page. 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, measured at 1440; below 980px their phone, measured in the 390 stage. */
@layer base, kit, site;

/* Outage: their squared display face for headings, the menu and the footer titles (static/fonts/FONTS.md);
   they draw it at 700 from its one 400 face, so the browser thickens it as on theirs */
@font-face {
  font-family: "Outage";
  src: url("fonts/outage.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colours: their white page, black text (theirs is #5A5A5A; our shop text is full contrast), their red */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #333333;
  --site-line: #E1E1E1;
  --site-band: #F5F5F5;
  --site-card: #F8F8F8;
  --site-accent: #C40000;
  --site-accent-strong: #9A0000;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-head-bg: #000000;
  --site-head-fg: #FFFFFF;
  --site-foot-bg: #C2C2C2;
  --site-button-bg: #000000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #C40000;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #555555;

  /* fonts: Helvetica for text and buttons, Outage for headings */
  --site-font-body: Helvetica, "Helvetica Neue", Arial, sans-serif;
  --site-font-heading: "Outage", Helvetica, Arial, sans-serif;
  --site-font-button: var(--site-font-body);

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

  /* the phone layout's unit: one phone-stage pixel (their stage is 390) */
  --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, 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);
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}

/* the dark theme (kit 0.10.0: <html data-parts-theme="dark">, picked by the kit's head block at night or by the
   shopper's switch): the page the kit's warm near black, text near white, rules a dark grey, the cart's cards and
   bands a step up, the header kept black and the footer turned black to match it. Their red lifted a touch so it
   reads as text on the dark (4.8:1), and the primary button turns light with dark words as the kit's filled
   buttons do, red on hover. Photos keep their white plates (--cs-photo). */
: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: #EE3B35;
  --site-accent-strong: #F4625D;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-head-bg: #000000;
  --site-head-fg: #FFFFFF;
  --site-foot-bg: #000000;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #EE3B35;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;

  /* the kit's vehicle band under the black header: a step over the page, its rule a dark grey */
  --parts-band-bg: #1C1A18;
  --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, the 404's link): their button, black on a light page ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; 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: 400 13px/19.5px var(--site-font-button); letter-spacing: 0.975px; 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-fg); outline-offset: 2px; }

/* ---------- header: the search, the logo and the cart over the row of headings, 168 high ---------- */
.cl-hd { position: relative; z-index: 50; height: 168px; background: var(--site-head-bg); color: var(--site-head-fg); }
.cl-hd__toggle { display: none; }
.cl-hd__logo { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); }
.cl-hd__logo img { width: 280px; height: auto; }
.cl-hd__cart { position: absolute; top: 29px; right: 14px; height: 50px; display: flex; align-items: center; gap: 6px; }
.cl-hd__cart-label { font: 700 14px/50px var(--site-font-heading); letter-spacing: 0.7px; text-transform: uppercase; }
.cl-hd__cart-count {
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--site-head-fg); color: var(--site-head-bg);
  font: 700 12px/20px var(--site-font-heading); text-align: center;
}
.cl-hd__cart-count:empty::before { content: "0"; }
.cl-hd__cart:hover .cl-hd__cart-label { color: var(--site-accent); }
/* the kit's theme switch (shown 21:30 to 04:30), left of the cart; it takes the bar's white (the kit's color: inherit) */
.cl-hd > .parts-theme-switch { position: absolute; top: 34px; right: 113px; }
.cl-hd > .parts-theme-switch:hover { opacity: .8; }
.cl-hd__search { position: absolute; top: 29px; left: 14px; width: 330px; height: 50px; display: flex; border: 1px solid #EEEEEE; }
.cl-hd__search input {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; color: inherit;
  font: 400 13px/1 var(--site-font-body); outline: none;
}
.cl-hd__search input::placeholder { color: inherit; opacity: 1; }
.cl-hd__search button { flex: none; width: 50px; height: 48px; display: grid; place-items: center; }
.cl-hd__list { position: absolute; top: 137px; left: 0; right: 0; display: flex; justify-content: center; gap: 4px; }
.cl-hd__link { display: block; padding: 0 17px; font: 700 14px/30px var(--site-font-heading); letter-spacing: 0.7px; text-transform: uppercase; }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }

/* ---------- footer: four centred columns on their grey, then the copyright line ---------- */
.cl-ft { background: var(--site-foot-bg); color: var(--site-fg); }
.cl-ft__in { max-width: 1325px; margin: 0 auto; padding: 40px 0; font: 400 13px/19.5px var(--site-font-body); }
.cl-ft__cols { display: grid; grid-template-columns: 174px 71px 257px; justify-content: space-between; align-items: start; min-height: 159px; padding: 0 13px; }
.cl-ft__col { text-align: center; }
.cl-ft__h { margin-bottom: 15px; font: 700 14px/16.8px var(--site-font-heading); letter-spacing: 0.7px; text-transform: uppercase; }
.cl-ft__col a:hover { text-decoration: underline; }
.cl-ft__base { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin: 40px 13px 0; padding: 15px 0 10px; }
.cl-ft__small { font-size: 13px; }

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { max-width: 732px; margin: 0 auto; padding: 80px 16px 100px; text-align: center; }
.cl-404__h { font: 700 40px/48px var(--site-font-heading); letter-spacing: 2px; text-transform: uppercase; }
.cl-404__p { margin: 16px 0 28px; font: 400 16px/1.6 var(--site-font-body); }

/* ---------- phones: their black bar of 79, the headings and the search in a drawer (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd { height: 79px; }
  .cl-hd__toggle { position: absolute; top: 15px; left: 8px; width: 48px; height: 50px; display: grid; place-items: center; }
  .cl-hd__logo { top: 22px; }
  .cl-hd__logo img { width: 175px; }
  .cl-hd__cart { top: 15px; right: 16px; min-width: 48px; justify-content: flex-end; }
  .cl-hd__cart-label { display: none; }
  .cl-hd > .parts-theme-switch { top: 20px; right: 64px; }
  .cl-hd__nav { position: absolute; top: 100%; left: 0; right: 0; padding: 16px; background: var(--site-bg); color: var(--site-fg); border-bottom: 1px solid var(--site-line); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__search { position: static; width: auto; border-color: var(--site-line); margin-bottom: 8px; }
  .cl-hd__search input { font-size: 16px; }
  .cl-hd__list { position: static; flex-direction: column; gap: 0; }
  .cl-hd__link { padding: 0; font-size: 16px; line-height: 48px; border-bottom: 1px solid var(--site-line); }

  .cl-ft__in { padding: 40px 16px; }
  .cl-ft__cols { grid-template-columns: 1fr; gap: 20px; min-height: 0; padding: 0 3px; }
  .cl-ft__col { padding-bottom: 10px; }
  .cl-ft__h { margin-bottom: 15px; }
  .cl-ft__col li a { display: inline-block; padding: 0; }
  .cl-ft__base { flex-direction: column; align-items: flex-start; gap: 8px; margin: 20px 3px 0; padding: 15px 0 0; }
  .cl-404 { padding: 56px 16px 72px; }
  .cl-404__h { font-size: 34px; line-height: 41px; }
}

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

}