/* cl-site.css: Big Gun's tokens, fonts, reset and chrome (header, menu, footer, the primary button), on every page,
   written from their measurements (review/pages/home.json) at 1440 and in their 390px phone stage.
   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's
   red and type from the three --parts-* tokens alone: no rule here names a kit class.
   From 980px the desktop layout; below it their phone layout. */
@layer base, kit, site;

/* their two families, both SIL Open Font License (Google Fonts), from the capture (static/fonts/FONTS.md) */
@font-face { font-family: "Arimo"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/arimo-400.woff2") format("woff2"); }
@font-face { font-family: "Arimo"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/arimo-700.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/rajdhani-400.woff2") format("woff2"); }
@font-face { font-family: "Rajdhani"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("fonts/rajdhani-700.woff2") format("woff2"); }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #141414;
  --site-muted: #3A3A3A;
  --site-line: #D5D5D5;
  --site-band: #F1F1F1;
  --site-card: #F6F6F6;
  --site-accent: #D91C24;
  --site-accent-fg: #FFFFFF;
  --site-red: #EC2029;
  --site-dark: #141414;
  --site-dark-card: #1C1C1C;
  --site-dark-fg: #F7F7F7;
  --site-dark-line: rgba(255, 255, 255, 0.18);
  --site-slate: #373E46;
  --site-charcoal: #222325;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #D91C24;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #B2161D;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #5A5A5A;
  --site-light: #F7F7F7;                      /* the home's light band, the search field's button */
  --site-card-bg: #FFFFFF;                    /* the home's vehicle cards */
  --site-card-line: #E2E4E8;
  --site-rule-soft: #D8DCE1;                  /* a card's name rule, the home's tab rule, the phone menu's rules */
  --site-accent-ink: var(--site-accent);      /* the red as text on the page (a cart error, a special-order line): lifted in the dark */

  /* fonts */
  --site-font-body: Arimo, Helvetica, Arial, sans-serif;
  --site-font-heading: Rajdhani, Oswald, "Arial Narrow", sans-serif;
  --site-font-button: var(--site-font-heading);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1200px;
  --site-gutter: 15px;
}
/* the kit's shop pages and vehicle band (storefront-kit ADRs 0006 and 0007): only the brand tokens a site owns */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: #B2161D;
  --parts-font: var(--site-font-body);
}
/* the dark theme (storefront-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). Big Gun's chrome is black already (the line, the bar, the slate menu, the
   charcoal footer, the home's black bands), so those tokens keep their values; the white page, its cards, rules
   and fields take the kit's warm near black family, text turns near white, and the red stays the fill while as
   text on the page it lifts to #F04A50 (5.2:1). Photos keep their white plates. */
: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: #D91C24;
  --site-accent-fg: #FFFFFF;
  --site-accent-ink: #F04A50;
  --site-red: #EC2029;
  --site-dark: #141414;
  --site-dark-card: #1C1C1C;
  --site-dark-fg: #F7F7F7;
  --site-dark-line: rgba(255, 255, 255, 0.18);
  --site-slate: #373E46;
  --site-charcoal: #222325;
  --site-field-bg: #1C1A18;
  --site-button-bg: #D91C24;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #E5262E;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-light: #1C1A18;
  --site-card-bg: #24201C;
  --site-card-line: #3D3833;
  --site-rule-soft: #3D3833;
  --parts-accent-strong: #E5262E;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #36312C;
}

@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.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 {

/* ---------- their buttons: condensed capitals, red fill or a 2px outline ---------- */
.cl-btn, .cl-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--site-radius);
  font: 700 16px/1.2 var(--site-font-button); letter-spacing: .96px; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.cl-btn { background: var(--site-accent); color: var(--site-accent-fg); border: 2px solid var(--site-accent); }
.cl-btn:hover { background: var(--site-button-hover-bg); border-color: var(--site-button-hover-bg); }
.cl-ghost { background: transparent; color: currentColor; border: 2px solid currentColor; }
.cl-ghost:hover { background: var(--site-accent); border-color: var(--site-accent); color: #FFFFFF; }
.cl-btn:focus-visible, .cl-ghost:focus-visible { outline: 2px solid var(--site-red); outline-offset: 2px; }

/* ---------- header: the 35px line, the 76px black bar, the 50px slate menu ---------- */
.cl-hd { position: relative; z-index: 50; margin-bottom: -1px; background: var(--site-dark); color: #FFFFFF; }
.cl-hd__top { height: 35px; border-bottom: 1px solid #E2E4E8; }
.cl-hd__top span { display: block; max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); font: 400 14px/34px var(--site-font-body); }
.cl-hd__bar { height: 76px; }
.cl-hd__in { max-width: var(--site-max); height: 100%; margin: 0 auto; padding: 0 var(--site-gutter); display: flex; align-items: center; }
.cl-hd__toggle { display: none; }
.cl-hd__logo { flex: none; display: flex; }
.cl-hd__logo img { width: auto; height: 40px; }  /* the Orbital Parts mark, white letters on the black bar, 5:1 */
.cl-hd__search { margin-left: auto; width: 500px; height: 46px; display: flex; background: var(--site-field-bg); border: 1px solid #CCCFD6; border-radius: var(--site-radius); }
.cl-hd__q { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-hd__q::placeholder { color: var(--site-muted); opacity: 1; }
.cl-hd__q:focus { outline: 2px solid var(--site-red); outline-offset: -2px; }
.cl-hd__go { width: 55px; height: 44px; display: grid; place-items: center; background: var(--site-light); color: var(--site-fg); }
.cl-hd__end { flex: none; margin-left: 40px; display: flex; align-items: center; gap: 12px; }
.cl-hd__end .parts-theme-switch:hover { color: var(--site-red); }
.cl-hd__cart { flex: none; position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: #FFFFFF; }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: -6px; right: -10px; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 11px; background: var(--site-red); color: #FFFFFF; font: 400 12px/22px var(--site-font-body); text-align: center; }
.cl-hd__cart-count:empty { display: none; }
.cl-hd__cart:hover, .cl-hd__cart:focus-visible { color: var(--site-red); }

.cl-hd__nav { height: 50px; background: var(--site-slate); border-top: 1px solid var(--site-slate); }
.cl-hd__list { max-width: var(--site-max); height: 48px; margin: 0 auto; padding: 0 var(--site-gutter); display: flex; align-items: center; }
.cl-hd__link { display: flex; align-items: center; height: 48px; padding-right: 24px; color: var(--site-dark-fg); font: 700 15px/18px var(--site-font-heading); letter-spacing: .6px; text-transform: uppercase; }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-red); }
.cl-hd__all { margin-left: auto; }
.cl-hd__outline { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 2px solid #D2D2D2; border-radius: var(--site-radius); color: #FFFFFF; font: 700 15px/24px var(--site-font-heading); letter-spacing: .9px; text-transform: uppercase; }
.cl-hd__outline:hover { border-color: var(--site-red); }
.cl-hd__util a { display: flex; align-items: center; height: 48px; padding: 0 0 0 24px; color: #D2D2D2; font: 600 14px/16.8px var(--site-font-heading); letter-spacing: .56px; text-transform: uppercase; }
.cl-hd__util a:hover { color: #FFFFFF; }

/* ---------- footer: the red rule, the charcoal columns, the darker base ---------- */
.cl-ft { background: var(--site-charcoal); color: #DFDFDF; }
.cl-ft__rule { height: 20px; background: #B20000; }
.cl-ft__in { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); }
.cl-ft__help { height: 75px; display: flex; align-items: center; justify-content: center; gap: .3em; border-bottom: 1px solid #39393B; color: #FFFFFF; font: 700 20px/32px var(--site-font-heading); }
.cl-ft__help a:hover { color: var(--site-red); }
.cl-ft__cols { display: grid; grid-template-columns: 465px 240px 240px 225px; padding-top: 39px; min-height: 335px; }
.cl-ft__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; color: #DFDFDF; font: 700 16px/20.8px var(--site-font-heading); text-transform: uppercase; list-style: none; pointer-events: none; }
.cl-ft__h::-webkit-details-marker { display: none; }
.cl-ft__h svg { display: none; color: var(--site-red); }
.cl-ft__links li + li { margin-top: 8px; }
.cl-ft__links a, .cl-ft__mail a { font: 400 18px/22px var(--site-font-body); color: #DFDFDF; }
.cl-ft__links a:hover, .cl-ft__mail a:hover { color: #FFFFFF; text-decoration: underline; }
.cl-ft__mail { display: flex; gap: 12px; align-items: flex-start; }
.cl-ft__mail svg { flex: none; margin-top: 3px; }
.cl-ft__note { max-width: 570px; padding: 30px 0 30px; color: #DFDFDF; font: 400 13px/20px var(--site-font-body); }
.cl-ft__main { min-height: 568px; }
.cl-ft__base { background: #2D2E31; }
.cl-ft__base .cl-ft__in { min-height: 165px; padding-top: 30px; padding-bottom: 30px; }
.cl-ft__small { font: 400 18px/34px var(--site-font-body); color: #FFFFFF; }

/* 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 404 (templates/404.html) ---------- */
.cl-404 { background: var(--site-dark); color: #FFFFFF; padding: 96px var(--site-gutter) 120px; text-align: center; }
.cl-404__h { color: var(--site-red); font: 700 56px/1.02 var(--site-font-heading); letter-spacing: .56px; text-transform: uppercase; }
.cl-404__p { margin: 16px 0 32px; font: 400 17px/27.2px var(--site-font-body); }

/* ---------- phones: their 45px line over the 50px bar, the menu and search behind the bars ---------- */
@media (max-width: 979.98px) {
  .cl-hd__top { height: 45px; border-bottom-color: #2A2A2A; }
  .cl-hd__top span { padding: 0 16px; text-align: center; color: #D2D2D2; font: 600 14px/44px var(--site-font-heading); letter-spacing: .56px; text-transform: uppercase; }
  .cl-hd__bar { height: 50px; }
  .cl-hd__in { position: relative; padding: 0 16px; justify-content: space-between; }
  .cl-hd__toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 44px; height: 44px; color: #FFFFFF; }
  .cl-hd__toggle span { color: #D2D2D2; font: 700 12px/12px var(--site-font-heading); letter-spacing: .72px; text-transform: uppercase; }
  .cl-hd__logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .cl-hd__logo img { height: 30px; }
  .cl-hd__end { margin-left: 0; gap: 0; }
  .cl-hd__cart { width: 44px; }
  .cl-hd__cart-count { top: -2px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; font-size: 13px; line-height: 18px; }
  .cl-hd__search { display: none; position: absolute; top: 50px; left: 0; right: 0; width: auto; height: 48px; margin: 0; padding: 0; border: 0; border-top: 1px solid #2A2A2A; }
  .cl-hd__q { height: 48px; }
  .cl-hd__go { height: 48px; }
  .cl-hd__nav { display: none; height: auto; position: absolute; top: 143px; left: 0; right: 0; background: var(--site-bg); border: 0; box-shadow: 0 8px 16px rgba(0, 0, 0, .25); }
  .cl-hd--open .cl-hd__search, .cl-hd--open .cl-hd__nav { display: flex; }
  .cl-hd__nav { flex-direction: column; }
  .cl-hd__list { height: auto; flex-direction: column; align-items: stretch; padding: 8px 16px 16px; }
  .cl-hd__link { height: 48px; padding: 0; border-bottom: 1px solid var(--site-rule-soft); color: var(--site-fg); font-size: 16px; }
  .cl-hd__all { margin: 16px 0 0; }
  .cl-hd__outline { justify-content: center; border-color: var(--site-fg); color: var(--site-fg); }
  .cl-hd__util a { padding: 0; color: var(--site-fg); font-size: 15px; }

  .cl-ft__help { height: 69px; justify-content: flex-start; flex-wrap: wrap; font-size: 16px; line-height: 22px; }
  .cl-ft__cols { grid-template-columns: 1fr; padding-top: 32px; min-height: 0; }
  .cl-ft__col { border-bottom: 1px solid #39393B; }
  .cl-ft__h { min-height: 48px; margin: 0; pointer-events: auto; cursor: pointer; }
  .cl-ft__h svg { display: block; }
  .cl-ft__col[open] .cl-ft__h svg { transform: rotate(180deg); }
  .cl-ft__links, .cl-ft__mail { padding-bottom: 16px; }
  .cl-ft__links a, .cl-ft__mail a { font-size: 16px; line-height: 24px; }
  .cl-ft__note { padding: 28px 0; }
  .cl-ft__main { min-height: 0; }
  .cl-ft { min-height: 731px; }
  .cl-ft__base .cl-ft__in { min-height: 0; padding-top: 24px; padding-bottom: 24px; }
  .cl-ft__small { font-size: 16px; line-height: 26px; }
  .cl-404 { padding: 64px 16px 80px; }
  .cl-404__h { font-size: 36px; }
}

}