/* cl-site.css: UWS's tokens, reset and chrome (header, menu drawer, footer, the primary button), on every page.
   Written by hand from their home's measurements (review/pages/home.json): white page, their #005CA9 blue,
   near-black #252525 type, the white band of the Orbital Parts mark and the search over the blue menu bar,
   and their #252525 footer, all in TeX Gyre Adventor.
   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;` 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 take
   the brand colour and font from the --parts-* tokens alone: no rule here names a kit class.
   Two layouts: from 980px the desktop one, measured in a 1440 window; below 980px their phone one (390 stage). */
@layer base, kit, site;

@font-face { font-family: "TeX Gyre Adventor"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/tex-gyre-adventor-400.woff2") format("woff2"); }
@font-face { font-family: "TeX Gyre Adventor"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/tex-gyre-adventor-700.woff2") format("woff2"); }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #252525;
  --site-muted: #3C3C3C;
  --site-line: #D8D8D8;
  --site-band: #F2F2F2;
  --site-card: #F6F6F6;
  --site-accent: #005CA9;
  --site-accent-fg: #FFFFFF;
  --site-red: #E72C2E;
  --site-dark: #252525;
  --site-black: #0D0D0D;
  --site-rule: #456CB1;
  --site-field-bg: #FFFFFF;
  --site-field-line: #C2C2C2;
  --site-button-bg: #005CA9;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #004A88;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #4A4A4A;
  --site-foot-fg: #EDEDED;
  --site-foot-line: #5A5A5A;
  --site-foot-col-line: #3A3A3A;
  --site-accent-text: var(--site-accent);   /* the blue as text: the name, Featured Products, a product's name */
  --site-placeholder: #5C5C5C;
  --site-search-icon: #E2591A;
  --site-chip-bg: #FFFFFF;                  /* the count on the blue cart button */
  --site-bar-edge: #2C2C2C;
  --site-on-dark: #FFFFFF;                  /* white words on their dark and blue bands */
  --site-photo-bg: #FFFFFF;

  /* fonts: TeX Gyre Adventor, their texgyreadventor and texgyreadventor-bold */
  --site-font-body: "TeX Gyre Adventor", "Century Gothic", "Avant Garde", Futura, Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1290px;
}
/* the kit's shop pages and vehicle band: only the brand tokens a site owns (storefront-kit ADR 0007; the
   --parts-band-* ones, storefront/CLAUDE.md): the band in their blue under the menu bar, Go in their near-black */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: #004A88;
  --parts-font: var(--site-font-body);
  --parts-band-bg: var(--site-accent);
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #2C2C2C;
  --parts-band-go: var(--site-dark);
  --parts-band-go-hover: var(--site-black);
  --parts-band-go-ink: #FFFFFF;
}

/* The dark page (kit 0.10.0, Site(dark="night"): 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 kit's warm near black family (its tokens.css): the page and the
   mark and search band #121110, cards and bands a step up, rules #3d3833, text near white. The blue menu bar and vehicle band, the #252525 cards and footer stay as they are; the blue keeps its fills,
   and as text (Featured Products, a product's name) it is lifted to read on the dark. */
: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: #005CA9;
  --site-accent-fg: #FFFFFF;
  --site-accent-text: #4D9DE8;
  --site-red: #E72C2E;
  --site-dark: #252525;
  --site-black: #0D0D0D;
  --site-rule: #456CB1;
  --site-field-bg: #1C1A18;
  --site-field-line: #5C554E;
  --site-placeholder: #DDD7CF;
  --site-search-icon: #E2591A;
  --site-button-bg: #005CA9;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #004A88;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #DDD7CF;
  --site-chip-bg: #FFFFFF;
  --site-bar-edge: #2C2C2C;
  --site-on-dark: #FFFFFF;
  --site-photo-bg: #FFFFFF;
  --site-foot-fg: #EDEDED;
  --site-foot-line: #5A5A5A;
  --site-foot-col-line: #3A3A3A;

  /* the vehicle band in their blue under the menu bar, dark in both */
  --parts-band-bg: #005CA9;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #2C2C2C;
  /* the blue as text and rings (an error line, the tick, a focus ring), lifted to read on the dark */
  --cs-accent: var(--site-accent-text);
}

@layer base {

*, *::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.43 var(--site-font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { 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; }
input, select { font: inherit; }
[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 blue VIEW PRODUCTS ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 51px; padding: 0 39px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 0; border-radius: var(--site-radius);
  font: 700 18px/45px var(--site-font-button); text-transform: uppercase; cursor: pointer;
}
.cl-btn:hover { background: var(--site-button-hover-bg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: the white band of the Orbital Parts mark and the search, the blue menu bar ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); }
.cl-hd__main { display: flex; align-items: center; max-width: 1153px; height: 80px; margin: 0 auto; padding: 0 20px; }   /* 80px, the air their black bar above it gave */
.cl-hd__logo { flex: none; display: inline-flex; align-items: center; }
.cl-hd__mark { display: block; width: auto; height: 44px; }
.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 { position: relative; flex: 1; margin: 0 40px 0 60px; }
.cl-hd__search input { display: block; width: 100%; height: 40px; padding: 0 52px 0 20px; background: var(--site-field-bg); color: var(--site-fg);
  border: 1px solid var(--site-field-line); border-radius: var(--site-radius); font: 400 16px/1 var(--site-font-body); }
.cl-hd__search input::placeholder { color: var(--site-placeholder); }
.cl-hd__search input:focus { outline: 2px solid var(--site-accent-text); outline-offset: -2px; }
.cl-hd__search button { position: absolute; top: 0; right: 0; width: 48px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--site-search-icon); }
.cl-hd__find { display: none; }
.cl-hd__cart { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 175px; height: 40px; padding: 0 16px;
  background: var(--site-accent); color: var(--site-accent-fg); font: 700 16px/20px var(--site-font-body); letter-spacing: .7px; text-transform: uppercase; }
.cl-hd__cart:hover { background: var(--site-button-hover-bg); }
.cl-hd__cart-count { min-width: 20px; padding: 0 4px; background: var(--site-chip-bg); color: var(--site-accent); font: 700 13px/20px var(--site-font-body); text-align: center; letter-spacing: 0; }
.cl-hd__cart-count:empty { display: none; }

.cl-hd__bar { background: var(--site-accent); border-top: 1px solid var(--site-bar-edge); }
.cl-hd__nav { max-width: var(--site-max); margin: 0 auto; }
.cl-hd__drawer-head { display: none; }
.cl-hd__list { display: flex; }
.cl-hd__list li { width: 161.25px; border-left: 1px solid var(--site-rule); }
.cl-hd__list li:last-child { border-right: 1px solid var(--site-rule); }
.cl-hd__item { display: flex; align-items: center; justify-content: center; height: 65px; padding: 0 9px; text-align: center;
  color: var(--site-accent-fg); font: 700 14px/16px var(--site-font-body); text-transform: uppercase; }
.cl-hd__item:hover, .cl-hd__item.is-current { background: var(--site-button-hover-bg); }
.cl-hd__toggle, .cl-hd__shade { display: none; }

/* ---------- footer: their #252525 columns, the ruled bar ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-foot-fg); font: 400 14px/20px var(--site-font-body); }
.cl-ft__in { max-width: var(--site-max); margin: 0 auto; }
.cl-ft__cols { display: flex; height: 327px; padding-top: 70px; }
.cl-ft__col { width: 258px; padding: 0 15px; }
.cl-ft__head { display: block; width: 100%; text-align: left; color: var(--site-on-dark); font: 700 14px/20px var(--site-font-body); text-transform: uppercase; cursor: default; }
.cl-ft__plus { display: none; }
.cl-ft__list { display: grid; gap: 2px; margin-top: 7px; }
.cl-ft__list a:hover { color: var(--site-on-dark); text-decoration: underline; }
.cl-ft__bar { border-top: 1px solid var(--site-foot-line); border-bottom: 1px solid var(--site-foot-line); }
.cl-ft__row { display: flex; }
.cl-ft__row li { width: 258px; height: 80px; padding: 0 10px; display: flex; align-items: center; justify-content: center; text-align: center; }
.cl-ft__row li + li { border-left: 1px solid var(--site-foot-line); }
.cl-ft__row a:hover { color: var(--site-on-dark); text-decoration: underline; }
.cl-ft__small { display: flex; align-items: center; min-height: 40px; color: var(--site-foot-fg); }

/* the footer's trademark line: "owner" links the client's site in the line's own colour, underlined */
.cl-owner, .cl-owner:visited { 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 390 stage ---------- */
@media (max-width: 979.98px) {
  .cl-hd__main { position: relative; justify-content: center; height: 82px; padding: 0; }
  .cl-hd__mark { height: 34px; }
  .cl-hd__toggle { display: flex; align-items: center; justify-content: center; position: absolute; left: 7px; top: 19px; width: 44px; height: 44px; color: var(--site-fg); }
  .cl-hd__search { display: none; }
  .cl-hd__find, .cl-hd__cart { position: absolute; top: 19px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; gap: 0;
    background: none; color: var(--site-fg); }
  .cl-hd__find { right: 52px; }
  .cl-hd__cart { right: 8px; }
  .cl-hd__cart:hover { background: none; color: var(--site-accent-text); }
  .cl-hd__cart-label { display: none; }
  .cl-hd__cart-count { position: absolute; top: 2px; right: 0; min-width: 18px; background: var(--site-accent); color: var(--site-accent-fg); font-size: 13px; line-height: 18px; }
  .cl-hd__bar { border: 0; }
  .cl-hd__shade { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .5); }
  .cl-hd__nav { position: fixed; top: 0; bottom: 0; left: 0; z-index: 70; width: 336px; max-width: 86vw; overflow-y: auto;
    background: var(--site-accent); border-top: 1px solid var(--site-bar-edge); transform: translateX(-100%); transition: transform .25s ease; }
  .cl-hd__nav.is-open { transform: none; }
  .cl-hd__nav.is-open + .cl-hd__shade { display: block; }
  .cl-hd__drawer-head { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 4px 0 16px; color: var(--site-accent-fg);
    font: 700 16px/1 var(--site-font-body); text-transform: uppercase; border-bottom: 1px solid var(--site-rule); }
  .cl-hd__close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--site-accent-fg); }
  .cl-hd__list { display: block; }
  .cl-hd__list li, .cl-hd__list li:last-child { width: auto; border: 0; border-bottom: 1px solid var(--site-rule); }
  .cl-hd__item { justify-content: flex-start; height: auto; min-height: 44px; padding: 12px 16px; text-align: left; }

  .cl-ft { display: flex; flex-direction: column; }
  .cl-ft__bar { order: 2; padding-bottom: 67px; }
  .cl-ft__cols { display: block; height: auto; padding: 0 0 20px; }
  .cl-ft__col { width: auto; padding: 0; border-bottom: 1px solid var(--site-foot-col-line); }
  .cl-ft__head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 60px; padding: 0 15px; text-align: left; cursor: pointer; }
  .cl-ft__plus { display: block; }
  .cl-js .cl-ft__col:not(.is-open) .cl-ft__list { display: none; }
  .cl-ft__list { margin: 0; padding: 0 15px 16px; gap: 0; }
  .cl-ft__list a { display: inline-flex; align-items: center; min-height: 40px; }
  .cl-ft__row { display: block; }
  .cl-ft__row li { width: auto; padding: 0 10px; }
  .cl-ft__row li + li { border-left: 0; }
  .cl-ft__small { justify-content: center; min-height: 80px; padding: 20px 10px; text-align: center; }
}
}

/* the kit's theme switch (parts/theme_switch.html) between the search and the blue cart button: the page's ink, the
   blue on hover; on phones beside the menu toggle, since the name fills the middle of the 390 bar.
   Outside any layer, since the kit's head block sets its colour unlayered (color: inherit) and a layered rule would
   lose to it. */
.cl-hd__main .parts-theme-switch { flex: none; margin-right: 8px; color: var(--site-fg); }
.cl-hd__main .parts-theme-switch:hover { color: var(--site-accent-text); }
@media (max-width: 979.98px) {
  .cl-hd__main .parts-theme-switch { position: absolute; top: 21px; left: 51px; margin: 0; }
}