/* cl-site.css: the site's tokens, Montserrat, the reset and the chrome (header, phone drawer, footer, the
   primary button) in allballsracing.com's look, written from the capture's measurements of their home
   (review/pages/home.json) and its 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 (under the kit's rules), every other rule in
   @layer site. The kit's shop pages and vehicle band take the site's brand colour and font from the 3
   --parts-* tokens below alone: no rule here names a kit class.

   Two layouts: from 980px the desktop one, below it the phone one (their 390px stage). --mx is one
   phone-stage pixel and --u is 1px on desktop and var(--mx) on phones, for cl-shop.css. */
@layer base, kit, site;

/* Montserrat, Google Fonts' variable faces (static/fonts/FONTS.md): one file per style and subset, weights 300 to 700 */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/montserrat-300-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/montserrat-300-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("fonts/montserrat-300-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 300 700; font-display: swap; src: url("fonts/montserrat-300-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* colours: their white page, slate text, red accent, navy links, grey bar and near-black footer */
  --site-bg: #FFFFFF;
  --site-fg: #1E2939;
  --site-muted: #1E2939;
  --site-line: #D6D8DB;
  --site-band: #F2F2F3;
  --site-card: #F6F6F7;
  --site-accent: #C8102E;
  --site-accent-fg: #FFFFFF;
  --site-accent-strong: #A30D25;
  --site-navy: #00205B;
  --site-grey: #666767;
  --site-field-line: #9CA3AF;
  --site-footer-bg: #1A1F24;
  --site-badge: #155DFC;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #C8102E;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #A30D25;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #1E2939;
  --site-ink: #000000;           /* the header's icons, the resource cards' headings and top rule */
  --site-field-icon: #1F2937;    /* the search field's magnifier */
  --site-placeholder: #4B5563;   /* a field's hint */
  --site-panel: #FFFFFF;         /* a resource card on the home */
  --site-photo: #FFFFFF;         /* the plate under a photo, white in both themes */

  /* fonts: Montserrat for the body and buttons, their system stack for the headings */
  --site-font-body: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --site-font-heading: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --site-font-button: var(--site-font-body);

  /* shape and layout: square boxes, a 1320px column inside 8px gutters */
  --site-radius: 0;
  --site-max: 1320px;

  /* the phone layout's unit: one phone-stage pixel (the 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 (ADR 0007). */
: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 night look (storefront-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 by the shopper's clock or on their pick, and every token above takes its dark value
   here, in the kit's warm family (static/parts/tokens.css): the page #121110, cards and fields a step up, rules
   #3D3833, text near white, the navy links a light blue. The red lifts a touch so a heading in it reads on the
   dark and white still reads on a red button; the grey tab bar and the footer are theirs in both. Every photo keeps
   a white plate, and the header shows the Orbital Parts mark with white lettering. The vehicle band takes the kit's own dark values. */
: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: #E0213F;
  --site-accent-fg: #FFFFFF;
  --site-accent-strong: #A30D25;
  --site-navy: #9DB8F0;
  --site-grey: #666767;
  --site-field-line: #57514A;
  --site-footer-bg: #1A1F24;
  --site-badge: #155DFC;
  --site-field-bg: #1C1A18;
  --site-button-bg: #E0213F;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #A30D25;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-ink: #F6F3EF;
  --site-field-icon: #F6F3EF;
  --site-placeholder: #EBE6E0;
  --site-panel: #1C1A18;
  --site-photo: #FFFFFF;
}

@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 1336px column with 8px gutters their header, home and footer share */
.cl-wrap { max-width: calc(var(--site-max) + 16px); margin: 0 auto; padding: 0 8px; }

/* ---------- the primary button (Add to Cart, Check out) ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 700 16px/1 var(--site-font-button); text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease;
}
.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 white bar (logo, search, cart), the grey bar of tabs ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); }
.cl-hd__bar { padding: 65px 0 16px; }
.cl-hd__in { display: flex; align-items: center; min-height: 80px; }
.cl-hd__logo { flex: none; display: block; }
/* the Orbital Parts mark at the width the brand's logo had (300px), the light one by day and the dark one at night */
.cl-hd__logo img { display: block; width: auto; height: 60px; }
.cl-hd__logo img.cl-hd__mark--dark { display: none; }
:root[data-parts-theme="dark"] .cl-hd__logo img.cl-hd__mark--light { display: none; }
:root[data-parts-theme="dark"] .cl-hd__logo img.cl-hd__mark--dark { display: block; }
.cl-hd__search { position: relative; flex: 0 1 754px; margin-left: 37px; }
.cl-hd__search input, .cl-hd__dsearch input {
  width: 100%; height: 42px; padding: 0 48px 0 12px; margin: 0;
  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); -webkit-appearance: none; appearance: none;
}
.cl-hd__search input::placeholder, .cl-hd__dsearch input::placeholder { color: var(--site-placeholder); opacity: 1; }
.cl-hd__search input:focus, .cl-hd__dsearch input:focus { outline: 2px solid var(--site-navy); outline-offset: -2px; }
.cl-hd__go { position: absolute; top: 0; right: 0; width: 44px; height: 42px; display: inline-flex; align-items: center; justify-content: center; color: var(--site-field-icon); }
.cl-hd__btn { display: none; }
.cl-hd__cart { position: relative; margin-left: auto; margin-right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--site-ink); }
.cl-hd__cart:hover { color: var(--site-accent); }
.cl-hd__cart svg { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: 2px; right: 0; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--site-badge); color: #fff; font: 700 10px/15px var(--site-font-body); text-align: center; }
.cl-hd__cart-count:empty { display: none; }

/* the white strip of popular part types where their group's brand logos sit (desktop only) */
.cl-hd__strip-list { display: flex; justify-content: center; gap: 32px; height: 88px; }
.cl-hd__strip-list a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 130px; height: 88px; color: var(--site-fg); font: 600 13px/16px var(--site-font-body); text-align: center; }
.cl-hd__strip-list img { width: 56px; height: 56px; object-fit: contain; background: var(--site-photo); }
.cl-hd__strip-list a:hover span { color: var(--site-accent); text-decoration: underline; }

/* their Parts Search band's height above the kit's vehicle band (desktop), in the band's own colour so the two read as one */
.cl-search { padding-top: 69px; background: var(--parts-band-bg, #000); }

.cl-hd__tabs { background: var(--site-grey); }
.cl-hd__list { display: flex; gap: 20px; height: 56px; padding: 0; }
.cl-hd__tab { display: flex; align-items: center; height: 56px; padding: 0 20px; color: #fff; font: 700 18px/24px var(--site-font-body); }
.cl-hd__tab.is-first { padding: 0 35px; background: var(--site-accent); }
.cl-hd__tab:hover, .cl-hd__tab[aria-current="page"] { background: var(--site-accent); }
.cl-hd__tab:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

.cl-hd__drawer { display: none; }

/* ---------- footer: the near-black band of links and social circles, the grey copyright bar ---------- */
.cl-ft { margin-top: 48px; color: #fff; }
.cl-ft__main { background: var(--site-footer-bg); padding: 24px 0; }
.cl-ft__in { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; min-height: 93px; }
.cl-ft__links { display: flex; flex-wrap: wrap; gap: 37px 30px; max-width: 978px; padding-top: 4px; }
.cl-ft__links a { font: 600 18px/24px var(--site-font-body); color: #fff; }
.cl-ft__links a:hover { text-decoration: underline; }
.cl-ft__small { background: var(--site-grey); padding: 14px 16px; text-align: center; color: #fff; font: 400 13px/24px var(--site-font-body); }

/* ---------- phones: the white bar with menu, logo, search and cart; one opaque drawer ---------- */
@media (max-width: 979.98px) {
  .cl-hd__bar { padding: 0; }
  .cl-hd__in { position: relative; min-height: 83px; padding: 0 8px; gap: 0; }
  .cl-hd__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--site-ink); }
  .cl-hd__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .cl-hd__logo img { height: 36px; }
  .cl-hd__search { display: none; }
  .cl-hd__find { margin-left: auto; }
  .cl-hd__cart { margin: 0; width: 44px; height: 48px; }
  /* the switch beside the menu button: the right of the bar holds the search button and the cart up to the logo */
  .cl-hd__toggle { order: -2; }
  .cl-hd__in > .parts-theme-switch { order: -1; }
  .cl-hd__tabs { display: none; }
  .cl-hd__strip { display: none; }
  .cl-search { padding: 0; }
  .cl-hd__drawer.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--site-bg); border-top: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); padding: 16px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); }
  .cl-hd__dsearch { position: relative; margin-bottom: 8px; }
  .cl-hd__dsearch input { height: 44px; }
  .cl-hd__dsearch .cl-hd__go { height: 44px; }
  .cl-hd__dlist a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--site-line); color: var(--site-fg); font: 700 16px/1.3 var(--site-font-body); }
  .cl-hd__dlist a[aria-current="page"] { color: var(--site-accent); }

  .cl-ft__main { padding: 24px 16px; }
  .cl-ft__in { flex-direction: column; align-items: center; gap: 24px; min-height: 0; }
  .cl-ft__links { flex-direction: column; align-items: center; gap: 0; padding: 0; text-align: center; }
  .cl-ft__links a { display: inline-flex; align-items: center; min-height: 48px; }
  .cl-ft__small { padding: 14px 16px; font-size: 13px; }
}
/* under 380 wide the switch meets the mark: the mark a step smaller at night, while the switch shows */
@media (max-width: 379.98px) {
  :root[data-parts-night] .cl-hd__logo img { height: 32px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { padding-top: 64px; padding-bottom: 32px; text-align: center; }
.cl-404__h1 { color: var(--site-accent); font: italic 700 36px/40px var(--site-font-heading); text-transform: uppercase; }
.cl-404__p { margin: 16px 0 32px; font: 400 16px/24px var(--site-font-body); }

/* 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 (the kit's parts/theme_switch.html, 40px, shown 21:30 to 04:30): after the cart, whose auto margin
   places both whether the switch shows or not, and on phones beside the menu button; its ink is the cart's (the rule
   after the layers) */
.cl-hd__in > .parts-theme-switch { flex: none; }

}

/* the theme switch in the cart's ink: outside the layers, since the kit's head block styles the switch unlayered */
.cl-hd__in > .parts-theme-switch { color: var(--site-ink); }