/* cl-site.css: Giant Loop's look on every page, from their measured home and shop pages: the tokens, the reset,
   the header, its menu, the footer and the primary button.
   Their look: a near white page (#FCFCFC) with near black type (#030405), every line in Config Variable, the menu
   in 17.5px semibold capitals, the black buttons with orange capitals, square boxes and thin black rules.
   The store's name stands in words where their logo sits (a brand store shows the brand's logo only on product photos).
   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 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 header and four-column footer; below 980px their phone header (menu and
   search at the left, the name in the middle, the cart at the right), the menu folded behind the toggle (cl-site.js)
   and the footer's columns stacked. */
@layer base, kit, site;

@font-face {
  font-family: "Config Variable";
  src: url("fonts/config-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colours */
  --site-bg: #FCFCFC;
  --site-fg: #030405;
  --site-muted: #737474;
  --site-line: #CFCFD0;
  --site-rule: #000000;
  --site-band: #EDEDED;
  --site-card: #F2F2F2;
  --site-panel: #FFFFFF;
  --site-accent: #030405;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #000000;
  --site-button-fg: #D48326;
  --site-button-hover-bg: #030405;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #737474;
  --site-sale: #D02E2E;
  --site-ft-rule: #CCCCCC;              /* the light grey rule over the footer */
  --site-field-line: rgba(3, 4, 5, 0.35);  /* the footer search field's rule */
  --site-menu-rule: #F0F0F0;            /* the rules between the phone menu's rows */
  --site-track: #DDDDDD;                /* the featured product's bar under its dark quarter */
  --site-photo-mat: transparent;        /* under a product photo laid straight on the page */
  --site-plate: var(--site-card);       /* the plate under a Popular product's photo */

  /* fonts */
  --site-font-body: "Config Variable", system-ui, -apple-system, "Segoe UI", 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: 1320px;
  --site-gutter: 50px;

  /* the phone layout's unit, kept for the template's rules: 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). */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent);
  --parts-font: var(--site-font-body);
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); --site-gutter: 16px; }
}
/* the dark theme (the kit's head block sets data-parts-theme="dark" on <html> at night, storefront-kit 0.10.0): the
   page the kit's warm near black, the text near white, the rules a dark grey, the cards a step up, and their orange
   (the buttons' capitals) carries the accent and the buttons with near black capitals, so a button still reads as one.
   Product photos keep a plate (--site-plate their light grey, --site-photo-mat white): they are drawn for white. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #F6F3EF;
  --site-line: #3D3833;
  --site-rule: #5A524A;
  --site-band: #24201C;
  --site-card: #1C1A18;
  --site-panel: #121110;
  --site-accent: #D48326;
  --site-accent-fg: #121110;
  --site-field-bg: #1C1A18;
  --site-button-bg: #D48326;
  --site-button-fg: #121110;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #F6F3EF;
  --site-sale: #FF6B5E;
  --site-ft-rule: #3D3833;
  --site-field-line: #5A524A;
  --site-menu-rule: #2A2622;
  --site-track: #3D3833;
  --site-photo-mat: #FFFFFF;
  --site-plate: #F2F2F2;

  --parts-accent-strong: #E39A4C;
  --parts-cta-ink: #121110;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
  --parts-band-go-ink: #121110;
}
/* the checkout's Pay is white words on --kc-accent: a deeper orange in the dark, where their orange is too light for white */
:root[data-parts-theme="dark"] main.kc-page { --kc-accent: #A85F12; }

@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 18px/1.4 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 block with orange capitals ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 58px; 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: 600 18px/1 var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: color 0.2s ease;
}
.cl-btn:hover { color: var(--site-button-hover-fg); }
:root[data-parts-theme="dark"] .cl-btn:hover { background: var(--site-button-hover-bg); border-color: var(--site-button-hover-bg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: the name, the menu of our tree, the search, the cart ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); }
.cl-hd__in { height: 114px; padding: 0 var(--site-gutter); display: flex; align-items: center; }
.cl-hd__logo { flex: none; display: flex; margin-right: 24px; }
/* the Orbital Parts mark: the light one on the near white bar, the dark one on the night theme's near black */
.cl-hd__mark { width: auto; height: 38px; }
.cl-hd__mark--dark, :root[data-parts-theme="dark"] .cl-hd__mark--light { display: none; }
:root[data-parts-theme="dark"] .cl-hd__mark--dark { display: block; }
.cl-hd__toggle, .cl-hd__find { display: none; }
.cl-hd__nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 24px; }
.cl-hd__list { display: flex; }
.cl-hd__link { display: block; padding: 0 15px; font: 600 17.5px/84px var(--site-font-body); text-transform: uppercase; color: var(--site-fg); white-space: nowrap; }
.cl-hd__link:hover, .cl-hd__link.is-current { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.cl-hd__search { margin-left: auto; display: flex; align-items: center; width: 280px; border-bottom: 1px solid var(--site-fg); }
.cl-hd__q { flex: 1; min-width: 0; height: 40px; padding: 0 4px; border: 0; border-radius: var(--site-radius); background: transparent; color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-hd__q::placeholder { color: var(--site-fg); opacity: 1; text-transform: uppercase; font-size: 13.5px; }
.cl-hd__q:focus { outline: none; }
.cl-hd__go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--site-fg); }
.cl-hd__cart { flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; margin-left: 12px; color: var(--site-fg); }
.cl-hd__cart-count { position: absolute; top: 0; right: -4px; min-width: 18px; padding: 0 4px; font: 600 13px/18px var(--site-font-body); text-align: center; border-radius: var(--site-radius); background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }
/* the kit's theme switch (night hours only, the kit shows and hides it): the header's ink, before the cart */
.cl-hd .parts-theme-switch { flex: none; margin-left: 12px; }
.cl-hd .parts-theme-switch:hover { opacity: .7; }

/* ---------- footer: their white band of columns, then the light strip of the copyright ---------- */
.cl-ft { background: var(--site-panel); color: var(--site-fg); border-top: 1px solid var(--site-ft-rule); }
.cl-ft__cols { display: grid; grid-template-columns: minmax(0, 351fr) minmax(0, 351fr) minmax(0, 702fr); padding: 55px 0 55px 36px; }
.cl-ft__h { margin: 9px 0 10px; font: 600 18px/21.6px var(--site-font-heading); text-transform: uppercase; }
.cl-ft__list li { font: 400 18px/26.5px var(--site-font-body); }
.cl-ft__list a:hover { text-decoration: underline; }
.cl-ft__search { display: flex; height: 55px; }
.cl-ft__q { flex: 0 0 324px; min-width: 0; padding: 0 16px; border: 1px solid var(--site-field-line); border-radius: var(--site-radius); background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-ft__q::placeholder { color: var(--site-fg); opacity: .75; }
.cl-ft__go { flex: 1; margin-left: 10px; min-height: 54px; }
.cl-ft__base { display: flex; align-items: center; gap: 24px; min-height: 106px; padding: 0 50px; background: var(--site-bg); }
.cl-ft__small { font: 400 15.75px/1.5 var(--site-font-body); }

/* ---------- phones: their header row, the menu and search behind the toggle (cl-site.js), the footer stacked ---------- */
@media (max-width: 979.98px) {
  .cl-hd__in { height: 74px; display: grid; grid-template-columns: 40px 40px 1fr 40px 40px; align-items: center; gap: 0; }
  .cl-hd__toggle, .cl-hd__find { display: grid; place-items: center; width: 40px; height: 40px; color: var(--site-fg); }
  .cl-hd__toggle { grid-column: 1; }
  .cl-hd__find { grid-column: 2; }
  .cl-hd__logo { grid-column: 3; justify-content: center; margin: 0; }
  .cl-hd__mark { height: 30px; }
  .cl-hd__cart { grid-column: 5; margin: 0; }
  .cl-hd .parts-theme-switch { grid-column: 4; margin: 0; }
  .cl-hd__nav { position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    padding: 0 16px 24px; background: var(--site-bg); border-top: 1px solid var(--site-rule); border-bottom: 1px solid var(--site-rule); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; }
  .cl-hd__link { padding: 0; line-height: 56px; border-bottom: 1px solid var(--site-menu-rule); }
  .cl-hd__search { margin: 16px 0 0; width: auto; }
  .cl-hd__q { font-size: 16px; height: 44px; }

  .cl-ft__cols { grid-template-columns: 1fr; padding: 55px 16px 26px 36px; min-height: 0; gap: 26px; }
  .cl-ft__h { margin: 9px 0 10px; }
  .cl-ft__list li { font-size: 14.4px; line-height: 23px; }
  .cl-ft__search { flex-direction: column; height: auto; gap: 10px; }
  .cl-ft__q { flex: none; height: 55px; }
  .cl-ft__go { margin: 0; }
  .cl-ft__base { flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 16px 24px; }
}

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

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

}