/* cl-site.css: the site's tokens, reset and chrome (header, phone drawer, footer, the primary button) in
   wilwood.com's look, written by hand from the capture's measurements (review/pages/home.json) and shots.
   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, 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.

   Two layouts, as wilwood.com serves them: from 980px the desktop header (the blue bar of tabs over the
   grey bar); below 980px its phone header (a blue strip over the grey bar with the mark and 3 buttons),
   drawn in a 390px stage: --mx is one stage pixel and --u is 1px on desktop and var(--mx) on phones. */
@layer base, kit, site;

:root {
  /* colours: wilwood.com's Bootstrap blues, its red, its greys */
  --site-bg: #FFFFFF;
  --site-fg: #333333;
  --site-muted: #8F8F8F;
  --site-line: #DADADA;
  --site-band: #F3F3F3;
  --site-card: #F7F7F7;
  --site-accent: #337AB7;
  --site-accent-strong: #2F5D8B;
  --site-accent-fg: #FFFFFF;
  --site-title: #2878B4;
  --site-red: #C9302C;
  --site-red-line: #AC2925;
  --site-search: #D9534F;
  --site-chrome: #EBEBEB;
  --site-chrome-line: #DBDBDB;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #337AB7;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #2F5D8B;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #6B6B6B;
  /* the chrome's own colours: the tabs' rules and hover, the search button's rule, the fields' rule and
     placeholder, the phone menu button, the footer's note, the red as text */
  --site-tabs-line: #B3B3B3;
  --site-tab-line: #2E6DA4;
  --site-tab-hover: #286090;
  --site-search-line: #D43F3A;
  --site-field-line: #CCCCCC;
  --site-placeholder: #767676;
  --site-toggle-line: #DDDDDD;
  --site-toggle-ink: #888888;
  --site-note: #CC0000;
  --site-red-ink: #C9302C;
  --site-link: #337AB7;

  /* fonts: system families (static/fonts/FONTS.md); wilwood.com's "Open-Sans" headings draw as Arial */
  --site-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --site-font-heading: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --site-font-button: var(--site-font-body);

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

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

/* The dark theme (the kit's data-parts-theme="dark" on <html>, at night by the visitor's clock unless the shopper
   picked): the page the kit's warm near black, text near white, rules dark grey, the grey bars and the footer a step
   up from the page. The blue tabs, the red and the blue buttons keep their colours; blue and red as text lift to
   read on the dark. Photos keep white plates (cl-shop --cs-photo, the home's tiles); the mark turns white-lettered. */
: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: #337AB7;
  --site-accent-strong: #2F5D8B;
  --site-accent-fg: #FFFFFF;
  --site-title: #8CC0EE;
  --site-red: #C9302C;
  --site-red-line: #AC2925;
  --site-search: #D9534F;
  --site-chrome: #1C1A18;
  --site-chrome-line: #3D3833;
  --site-field-bg: #121110;
  --site-button-bg: #337AB7;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #2F5D8B;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-tabs-line: #3D3833;
  --site-tab-line: #2E6DA4;
  --site-tab-hover: #286090;
  --site-search-line: #D43F3A;
  --site-field-line: #3D3833;
  --site-placeholder: #CFC8C0;
  --site-toggle-line: #3D3833;
  --site-toggle-ink: #EBE6E0;
  --site-note: #FF8A80;
  --site-red-ink: #FF8A80;
  --site-link: #8CC0EE;

  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --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 14px/20px var(--site-font-body);
  overflow-x: clip;
}
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) ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 20px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 400 16px/1 var(--site-font-button); text-decoration: none; cursor: pointer;
}
.cl-btn:hover { background: var(--site-accent-strong); border-color: var(--site-accent-strong); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: the blue bar of tabs ---------- */
.cl-hd { position: relative; z-index: 50; }
.cl-hd__in { max-width: var(--site-max); margin: 0 auto; display: flex; align-items: center; }
.cl-hd__tabs { height: 36px; background: var(--site-accent-strong); border: 1px solid var(--site-tabs-line); }
.cl-hd__tabs .cl-hd__in { height: 34px; justify-content: space-between; }
.cl-hd__list { display: flex; }
.cl-hd__tab {
  display: block; height: 34px; padding: 6px 12px; margin-right: -1px;
  background: var(--site-accent); border: 1px solid var(--site-tab-line);
  color: var(--site-accent-fg); font: 400 14px/20px var(--site-font-body); text-transform: uppercase; white-space: nowrap;
}
.cl-hd__tab:hover { background: var(--site-tab-hover); }
.cl-hd__tab.is-current { background: var(--site-red); border-color: var(--site-red-line); }

/* ---------- header: the grey bar (the Orbital Parts mark, search, cart) ---------- */
.cl-hd__bar { height: 49px; margin-top: -2px; background: var(--site-chrome); border: 1px solid var(--site-chrome-line); }
.cl-hd__bar .cl-hd__in { height: 47px; align-items: flex-start; }
.cl-hd__logo { flex: none; padding: 3px 5px 0; }
.cl-hd__mark { display: block; width: auto; height: 36px; }   /* the Wilwood logo's 36px; the search gives back the 40px it grew */
.cl-hd__mark--night, :root[data-parts-theme="dark"] .cl-hd__mark--day { display: none; }
:root[data-parts-theme="dark"] .cl-hd__mark--night { display: block; }
.cl-hd__search { display: flex; width: 340px; margin: 8px 0 0 442px; }
.cl-hd__go {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 34px;
  background: var(--site-search); border: 1px solid var(--site-search-line); color: var(--site-accent-fg);
}
.cl-hd__go:hover { background: var(--site-red); }
.cl-hd__search input, .cl-hd__dsearch input {
  flex: 1; min-width: 0; height: 34px; padding: 6px 12px; border: 1px solid var(--site-field-line); border-left: 0; border-radius: 0;
  background: var(--site-field-bg); color: var(--site-fg); font: 400 14px/20px var(--site-font-body);
}
.cl-hd__search input::placeholder, .cl-hd__dsearch input::placeholder { color: var(--site-placeholder); }
.cl-hd__cart { flex: none; position: relative; display: inline-flex; align-items: center; gap: 4px; height: 34px; margin: 8px 0 0 auto; padding: 0 8px; color: var(--site-fg); }
.cl-hd__cart:hover { color: var(--site-accent); }
.cl-hd__cart-count { min-width: 18px; padding: 0 4px; font: 700 12px/18px var(--site-font-body); text-align: center; border-radius: 9px; background: var(--site-red); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }
.cl-hd__btn, .cl-hd__drawer { display: none; }

/* ---------- footer ---------- */
.cl-ft { margin-top: 62px; padding: 24px 12px 0; background: var(--site-chrome); color: var(--site-fg); text-align: center; font-family: var(--site-font-heading); }
.cl-ft__cols { display: flex; justify-content: center; gap: 3px; min-height: 243px; text-align: left; }
.cl-ft__col { width: 160px; padding-left: 1px; }
.cl-ft__h { font: 700 13.33px/27.6px var(--site-font-heading); margin-bottom: 7px; }
.cl-ft__col li { font: 400 12px/27.6px var(--site-font-heading); }
.cl-ft__col a { color: var(--site-link); }
.cl-ft__col a:hover { text-decoration: underline; }
.cl-ft__note { max-width: 1133px; margin: 12px auto 0; color: var(--site-note); font: 400 12px/17.14px var(--site-font-heading); }
.cl-ft__small { padding: 29px 0 7px; font: 700 10.67px/15.24px var(--site-font-heading); }

/* ---------- phones: the blue strip, the grey bar with its 3 buttons, the drawer ---------- */
@media (max-width: 979.98px) {
  .cl-hd__tabs { height: 24px; }
  .cl-hd__tabs .cl-hd__in { display: none; }
  .cl-hd__bar { height: 52px; }
  .cl-hd__bar .cl-hd__in { height: 50px; align-items: center; padding: 0 15px 0 17px; gap: 6px; }
  .cl-hd__logo { padding: 0; margin-right: auto; }
  .cl-hd__mark { height: 32px; }
  .cl-hd__search { display: none; }
  .cl-hd__cart, .cl-hd__btn {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0;
    background: var(--site-field-bg); border: 1px solid var(--site-field-line); color: var(--site-fg);
  }
  .cl-hd__cart { position: relative; }
  .cl-hd__cart-count { position: absolute; top: -6px; right: -6px; }
  .cl-hd__toggle { width: 44px; flex-direction: column; gap: 4px; background: transparent; border-color: var(--site-toggle-line); }
  .cl-hd__toggle span { display: block; width: 22px; height: 2px; background: var(--site-toggle-ink); }
  .cl-hd__toggle[aria-expanded="true"] { background: var(--site-toggle-line); }
  .cl-hd__drawer.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--site-bg); border-bottom: 1px solid var(--site-chrome-line); box-shadow: 0 6px 12px rgba(0, 0, 0, .18); }
  .cl-hd__dsearch { display: flex; padding: 12px 16px; }
  .cl-hd__dsearch input { height: 40px; font-size: 16px; border-left: 1px solid var(--site-field-line); border-right: 0; }
  .cl-hd__dsearch .cl-hd__go { height: 40px; }
  .cl-hd__dlist a { display: flex; align-items: center; min-height: 44px; padding: 0 16px; border-top: 1px solid var(--site-line); font: 400 16px/20px var(--site-font-body); color: var(--site-fg); }
  .cl-hd__dlist a[aria-current] { color: var(--site-red-ink); }

  .cl-ft { margin-top: 42px; padding: 24px 24px 0; }
  .cl-ft__cols { flex-wrap: wrap; gap: 0 4px; min-height: 0; }
  .cl-ft__col { width: 160px; padding: 0 0 12px 9px; }
  .cl-ft__h { font-size: 14px; margin-bottom: 0; }
  .cl-ft__col li { font-size: 13px; }
  .cl-ft__col a { display: flex; align-items: center; min-height: 40px; }
  .cl-ft__note { max-width: 293px; font-size: 13px; }
  .cl-ft__small { max-width: 342px; margin: 0 auto; padding: 12px 0 8px; font-size: 13px; line-height: 17px; }
}

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

/* the kit's theme switch (parts/theme_switch.html, shown 21:30 to 04:30 only, while data-parts-night is on <html>): before
   the cart in the grey bar, in the bar's ink; it takes the auto margin from the cart while it shows */
:root[data-parts-night] .cl-hd__bar .cl-hd__cart { margin-left: 0; }

/* 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 theme switch's colour and spacing, outside the layers: the kit's head block styles it unlayered after this file */
.cl-hd .parts-theme-switch { flex: none; margin: 5px 0 0 auto; color: var(--site-fg); }
.cl-hd .parts-theme-switch:hover { color: var(--site-accent); }
@media (max-width: 979.98px) {
  .cl-hd .parts-theme-switch { margin: 0; }
}