/* cl-site.css: the site's tokens, fonts, reset and chrome (Kooks's header, menu and footer, the primary button),
   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.

   Kooks draws its chrome and home dark (#131313) with a red accent (#A61A19); the shop pages, the cart and the
   policies stay on white, so --site-bg is white and the chrome and the home have their own dark tokens.
   Two layouts: from 980px the desktop one, measured at 1440; below 980px the phone one, measured at 390. */
@layer base, kit, site;

@font-face { font-family: "futura-pt"; src: url("fonts/futura-pt-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "futura-pt"; src: url("fonts/futura-pt-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "railroad-gothic-atf"; src: url("fonts/railroad-gothic-atf-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* colours: the shop pages' white page */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #3A3A3A;
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #A61A19;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #A61A19;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #131313;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #5A5A5A;
  /* the dark chrome and home */
  --site-dark: #131313;
  --site-dark-fg: #FFFFFF;
  --site-dark-line: #484848;
  --site-dark-field: rgba(255, 255, 255, 0.09);
  --site-red-light: #FD4C4B;
  --site-plate: #FFFFFF;     /* a white plate in the dark chrome (the cart count, the footer's mail box): white in both themes */
  --site-plate-fg: #000000;

  /* fonts */
  --site-font-body: "futura-pt", Futura, "Century Gothic", "Trebuchet MS", sans-serif;
  --site-font-heading: "railroad-gothic-atf", Oswald, Impact, "Arial Narrow", sans-serif;
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1360px;
}
/* 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: #7E1413;
  --parts-font: var(--site-font-body);
}
/* the night theme (kit 0.10.0: the kit's head block sets data-parts-theme="dark" on <html> from 21:30 to 04:30 or
   on the shopper's pick). The chrome and the home are Kooks's #131313 in both themes, so their tokens keep their
   values; the shop pages, the cart and the policies turn from white to the kit's warm near black, text near white,
   cards a step up, photos on their white plates. The red stays the fill; where it is text (an error, a special
   price, the tick, the focus ring) it lifts to Kooks's own light red to read on the dark page. */
: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: #A61A19;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-button-bg: #A61A19;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-dark: #131313;
  --site-dark-fg: #FFFFFF;
  --site-dark-line: #484848;
  --site-dark-field: rgba(255, 255, 255, 0.09);
  --site-red-light: #FD4C4B;
  --site-plate: #FFFFFF;
  --site-plate-fg: #000000;
  --cs-accent: var(--site-red-light);
  --parts-accent-strong: color-mix(in srgb, var(--site-accent) 78%, #fff);
  --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 17px/1.6 var(--site-font-body);
  letter-spacing: -0.34px;
  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 buttons): Kooks's red block ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 30px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 400 17px/25px var(--site-font-button); letter-spacing: -0.51px; text-decoration: none; cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.cl-btn:hover { background: var(--parts-accent-strong); border-color: var(--parts-accent-strong); }
.cl-btn:focus-visible { outline: 2px solid var(--site-dark-fg); outline-offset: 2px; }

/* ---------- header: the red promo bar, then the outlined box (name, search, cart; the menu row) ---------- */
.cl-hd { position: relative; z-index: 50; color: var(--site-dark-fg); }
.cl-hd__promo { display: flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 16px;
  background: var(--site-accent); color: var(--site-dark-fg); font: 400 14px/22.4px var(--site-font-body); text-align: center; }
.cl-hd__promo:hover { text-decoration: underline; }
.cl-hd__main { background: var(--site-dark); padding: 15px 40px 0; }
.cl-hd__box { max-width: var(--site-max); margin: 0 auto; border: 1px solid var(--site-dark-fg); border-bottom: 0; }
.cl-hd__bar { display: flex; align-items: stretch; gap: 30px; height: 62px; margin-top: 1px; }
.cl-hd__toggle { display: none; }
.cl-hd__logo { display: flex; align-items: center; flex: none; padding: 0 0 0 15px; }
.cl-hd__logo img { width: auto; height: 44px; }
.cl-hd__search { display: flex; flex: 0 1 590px; margin-left: auto; min-width: 0; }
.cl-hd__q { flex: 1; min-width: 0; height: 100%; padding: 0 20px; border: 0; border-radius: var(--site-radius);
  background: var(--site-dark-field); color: var(--site-dark-fg); font: 400 17px/25px var(--site-font-body); letter-spacing: -0.34px; }
.cl-hd__q::placeholder { color: var(--site-dark-fg); opacity: 1; }
.cl-hd__q:focus { outline: 1px solid var(--site-dark-fg); outline-offset: -1px; }
.cl-hd__go { display: flex; align-items: center; justify-content: center; width: 52px; background: var(--site-dark-field); color: var(--site-dark-fg); }
.cl-hd__go:hover { background: rgba(255, 255, 255, 0.18); }
.cl-hd__cart { position: relative; display: flex; align-items: center; justify-content: center; flex: none; width: 62px; color: var(--site-dark-fg); }
.cl-hd__cart:hover { background: rgba(255, 255, 255, 0.05); }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: 10px; right: 8px; min-width: 18px; height: 18px; padding: 0 3px;
  background: var(--site-plate); color: var(--site-plate-fg); font: 700 11px/18px var(--site-font-body); letter-spacing: 0; text-align: center; border-radius: var(--site-radius); }
.cl-hd__cart-count:empty { display: none; }
.cl-hd__nav { margin-top: 1px; border-top: 1px solid var(--site-dark-fg); border-bottom: 1px solid var(--site-dark-fg); }
.cl-hd__list { display: flex; justify-content: space-between; padding: 0 15px; }
.cl-hd__link { display: block; padding: 13px 0; font: 400 17px/27.2px var(--site-font-body); letter-spacing: -0.34px; color: var(--site-dark-fg); }
.cl-hd__link:hover, .cl-hd__link.is-current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* the home: the promo bar runs as tall as theirs and the box lies over the hero */
@media (min-width: 980px) {
  .cl-home-page .cl-hd__promo { min-height: 61px; }
  .cl-home-page .cl-hd__main { position: absolute; left: 0; right: 0; background: transparent; }
}

/* ---------- footer ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-dark-fg); }
.cl-ft__in { max-width: calc(var(--site-max) + 80px); margin: 0 auto; padding: 80px 40px 0; }
.cl-ft__main { display: grid; grid-template-columns: 418px 1fr; gap: 160px; padding-bottom: 136px; }
.cl-ft__ask-h { font: 400 56px/64px var(--site-font-heading); letter-spacing: -0.56px; text-transform: uppercase; }
.cl-ft__mail { display: flex; align-items: stretch; height: 46px; margin-top: 16px; background: var(--site-plate); color: var(--site-plate-fg); }
.cl-ft__mail span:first-child { flex: 1; display: flex; align-items: center; padding: 0 15px; font: 400 17px/25px var(--site-font-body); }
.cl-ft__mail-go { display: flex; align-items: center; justify-content: center; width: 48px; background: var(--site-accent); color: var(--site-dark-fg); }
.cl-ft__mail:hover .cl-ft__mail-go { background: var(--parts-accent-strong); }
.cl-ft__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding-left: 0; }
.cl-ft__h { font: 400 24px/30px var(--site-font-heading); letter-spacing: -0.24px; text-transform: uppercase; }
.cl-ft__links { display: grid; gap: 5px; margin-top: 16px; }
.cl-ft__links a { font: 400 17px/27px var(--site-font-body); }
.cl-ft__links a:hover { text-decoration: underline; }
.cl-ft__small { padding: 21px 0 51px; border-top: 1px solid var(--site-dark-line); font: 400 13px/18px var(--site-font-body); }

/* ---------- phones: toggle, mark and cart over the search; the menu opens under them (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd__promo { min-height: 61px; }
  .cl-hd__main { padding: 10px 15px 15px; }
  .cl-hd__bar { flex-wrap: wrap; gap: 0; height: auto; margin-top: 0; }
  .cl-hd__toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 46px; color: var(--site-dark-fg); }
  .cl-hd__logo { flex: 1; min-width: 0; padding: 0 0 0 4px; }
  .cl-hd__logo img { height: 32px; }
  .cl-hd__cart { width: 46px; height: 46px; order: 2; }
  .cl-hd__cart-count { top: 4px; right: 2px; }
  .cl-hd__search { order: 3; flex: 1 1 100%; height: 40px; margin: 10px -1px -1px; }
  .cl-hd__q { font-size: 16px; padding: 0 12px; }
  .cl-hd__go { width: 50px; }
  .cl-hd__nav { margin-top: 0; border-bottom: 0; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__nav.is-open { border-top: 1px solid var(--site-dark-fg); background: var(--site-dark); }
  .cl-hd__list { flex-direction: column; padding: 0; }
  .cl-hd__link { padding: 8px 15px; border-top: 1px solid var(--site-dark-line); }
  .cl-hd__list li:first-child .cl-hd__link { border-top: 0; }

  .cl-ft__in { padding: 40px 15px 0; }
  .cl-ft__main { grid-template-columns: 1fr; gap: 30px; padding-bottom: 60px; }
  .cl-ft__ask-h { font-size: 28px; line-height: 36px; letter-spacing: -0.28px; }
  .cl-ft__cols { grid-template-columns: 1fr; gap: 30px; }
  .cl-ft__h { font-size: 20px; line-height: 24px; letter-spacing: -0.2px; }
  .cl-ft__links { margin-top: 10px; }
  .cl-ft__links a { display: block; padding: 6px 0; }
  .cl-ft__small { padding: 20px 0 40px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { padding: 120px 16px 140px; background: var(--site-dark); color: var(--site-dark-fg); text-align: center; }
.cl-404__h { font: 400 90px/100px var(--site-font-heading); letter-spacing: -0.9px; text-transform: uppercase; }
.cl-404__p { margin: 20px 0 30px; font: 400 17px/27.2px var(--site-font-body); }
@media (max-width: 979.98px) {
  .cl-404 { padding: 80px 15px 100px; }
  .cl-404__h { font-size: 44px; line-height: 52px; letter-spacing: -0.44px; }
}

/* 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 (parts/theme_switch.html, 40px, currentColor icons), outside the layers so it wins over the kit's own unlayered button rule, before the cart on the dark bar */
.cl-hd__bar .parts-theme-switch { flex: none; align-self: center; color: var(--site-dark-fg); }
.cl-hd__bar .parts-theme-switch:hover { color: var(--site-red-light); }
@media (max-width: 979.98px) { .cl-hd__bar .parts-theme-switch { order: 2; height: 46px; } }