/* cl-site.css: the site's tokens, reset and chrome (header, menu, footer, the primary button) in Rancho's look,
   on every page: white pages, near-black bars, Rancho red, the ultra-condensed WinnerSans for headings and
   Barlow standing in for Rancho's din-2014 (an Adobe Fonts face we cannot ship; static/fonts/FONTS.md).
   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, so it never undoes
   a kit button or list), 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 the desktop one measured at 1440, below it the phone one measured at 390. */
@layer base, kit, site;

@font-face { font-family: "WinnerSans UltraComp"; src: url("fonts/winnersans-ultracompmedium-8dc4dac0.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "WinnerSans Wide"; src: url("fonts/winnersans-widebold-2561df12.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500-latin.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #020202;
  --site-muted: #2B2B2B;
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #DD2022;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #020202;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #DD2022;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #3A3A3A;
  --site-dark: #020202;
  --site-dark-2: #0B0B0B;
  --site-dark-line: #1F2228;
  --site-on-dark: #FFFFFF;
  --site-accent-hover: #B5171A;         /* a red button on hover */
  --site-tile-bg: #FFFFFF;              /* a popular product's card */
  --site-tile-line: #DEE1E2;            /* its rule */
  --site-photo-mat: transparent;        /* under a product photo on a card */
  --site-field-line: #CECECE;           /* the home's search field's rule */
  --site-placeholder: #111315;          /* its placeholder */

  /* fonts */
  --site-font-body: "Barlow", "DIN Alternate", "Roboto Condensed", Arial, sans-serif;
  --site-font-heading: "WinnerSans UltraComp", "Barlow", Impact, sans-serif;
  --site-font-button: "Barlow", Arial, sans-serif;
  --site-font-wide: "WinnerSans Wide", "Barlow", Arial, sans-serif;

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

  /* the phone layout's unit cl-shop.css's title band is drawn in: one pixel of the 390px phone stage */
  --mx: calc(100vw / 390);
}
/* 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: #B5171A;
  --parts-font: var(--site-font-body);
  --parts-band-bg: var(--site-dark);
  --parts-band-ink: var(--site-on-dark);
  --parts-band-edge: var(--site-accent);
  --parts-band-go: var(--site-accent);
  --parts-band-go-hover: #B5171A;
  --parts-band-go-ink: #FFFFFF;
}
/* the dark theme (the kit's head block sets data-parts-theme="dark" on <html> at night, storefront-kit 0.10.0): the
   header, the band and the footer are Rancho's black in both themes; the white page turns the kit's warm near black,
   the text near white, the rules a dark grey, the cards a step up, the black buttons near white with dark words and
   the red kept (a touch lighter on hover). Product photos keep a white plate: 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-band: #24201C;
  --site-card: #1C1A18;
  --site-accent: #DD2022;
  --site-accent-fg: #FFFFFF;
  --site-accent-hover: #F04A4C;
  --site-field-bg: #1C1A18;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #DD2022;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #F6F3EF;
  --site-tile-bg: #1C1A18;
  --site-tile-line: #3D3833;
  --site-photo-mat: #FFFFFF;
  --site-field-line: #5A524A;
  --site-placeholder: #F6F3EF;

  --parts-accent-strong: #F04A4C;
  --parts-band-bg: #020202;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #DD2022;
  --parts-band-go-hover: #F04A4C;
}

@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 primary button (Add to Cart, Check out, the home's buttons): Rancho's red block ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 47px; padding: 0 22px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 700 12.6px/1.3 var(--site-font-button); letter-spacing: 2.17px; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.cl-btn:hover { background: var(--site-accent-hover); border-color: var(--site-accent-hover); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: the red promise bar, then the black bar ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); color: var(--site-on-dark); }
.cl-hd__promo { height: 27px; padding: 2px 16px 0; background: var(--site-accent); color: var(--site-accent-fg); font: 400 12.6px/22.68px var(--site-font-body); letter-spacing: 0.36px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-hd__bar { position: relative; height: 102px; padding: 0 36px 0 83px; display: flex; align-items: center; }
.cl-hd__toggle { display: none; }
.cl-hd__logo { flex: none; display: flex; }
/* the Orbital Parts mark, white on the black bar: 36px tall on the desktop, the width of Rancho's name slot (175px) on a phone */
.cl-hd__mark { width: auto; height: 36px; }
.cl-hd__nav { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; }
.cl-hd__list { display: flex; margin-left: 61px; }
.cl-hd__list li { padding: 0 27px; }
.cl-hd__link { display: block; padding: 38px 0; font: 400 16.2px/25.92px var(--site-font-body); letter-spacing: 0.45px; color: var(--site-on-dark); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }
.cl-hd__form { position: relative; width: 235px; height: 36px; margin-right: 36px; }
.cl-hd__form input { width: 100%; height: 36px; margin: 0; padding: 0 44px 0 14px; background: var(--site-dark); color: var(--site-on-dark); border: 1px solid #5C5F62; border-radius: var(--site-radius); font: 700 12.6px/1 var(--site-font-body); outline: none; -webkit-appearance: none; appearance: none; }
.cl-hd__form input::placeholder { color: var(--site-on-dark); opacity: 1; }
.cl-hd__form input:focus { border-color: var(--site-on-dark); }
.cl-hd__form button { position: absolute; top: 0; right: 0; width: 51px; height: 36px; display: flex; align-items: center; justify-content: center; color: var(--site-on-dark); }
.cl-hd__tools { flex: none; display: flex; align-items: center; }
.cl-hd__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 40px; color: var(--site-on-dark); }
.cl-hd__icon:hover { color: var(--site-accent); }
.cl-hd__find { display: none; }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: 2px; right: -10px; min-width: 16px; padding: 0 3px; font: 700 11px/16px var(--site-font-body); text-align: center; 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): white on the black bar, red on hover as the icons */
.cl-hd .parts-theme-switch { margin-right: 8px; }
.cl-hd .parts-theme-switch:hover { color: var(--site-accent); }

/* ---------- footer: near black, the columns, the bottom bar ---------- */
.cl-ft { background: var(--site-dark-2); color: var(--site-on-dark); font: 400 12.6px/22.68px var(--site-font-body); letter-spacing: 0.36px; }
.cl-ft__cols { max-width: 1224px; margin: 0 auto; padding: 43px 0 60px; display: grid; grid-template-columns: repeat(4, 245px) 1fr; }
.cl-ft__h { font: 700 12.6px/22.68px var(--site-font-body); letter-spacing: 0.36px; color: var(--site-on-dark); padding: 9px 0 13px; }
.cl-ft__list li a { display: block; padding: 9px 0; color: var(--site-on-dark); }
.cl-ft__list a:hover, .cl-ft__contact a:hover, .cl-ft__legal a:hover { color: var(--site-accent); }
.cl-ft__social { display: flex; gap: 16px; padding-top: 9px; }
.cl-ft__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--site-dark-line); color: var(--site-on-dark); }
.cl-ft__social a:hover { color: var(--site-accent); border-color: var(--site-accent); }
.cl-ft__contact p + p { margin-top: 4px; }
.cl-ft__bar { min-height: 57px; padding: 14px 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px; }
.cl-ft__small { color: var(--site-on-dark); }
.cl-ft__legal { display: flex; gap: 36px; }
.cl-ft__legal a { color: var(--site-on-dark); }

/* ---------- phones: the 90px bar, the menu and search behind the toggle (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd__promo { display: none; }
  .cl-hd__bar { height: 90px; padding: 0 8px 0 20px; justify-content: space-between; }
  .cl-hd__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -5px; color: var(--site-on-dark); }
  .cl-hd__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .cl-hd__mark { height: 35px; }
  .cl-hd__tools { gap: 2px; }
  /* beside the menu toggle at the left, since the centred name leaves room for two icons at the right */
  .cl-hd .parts-theme-switch { position: absolute; left: 55px; top: 25px; margin-right: 0; }
  .cl-hd__icon { width: 40px; }
  .cl-hd__find { display: inline-flex; }
  .cl-hd__cart-count { right: 0; }
  .cl-hd__nav { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; flex-direction: column; align-items: stretch; padding: 8px 20px 24px; background: var(--site-dark); border-top: 1px solid var(--site-dark-line); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; margin: 0; }
  .cl-hd__list li { padding: 0; border-bottom: 1px solid var(--site-dark-line); }
  .cl-hd__link { padding: 12px 0; font: 500 28.8px/37.44px var(--site-font-heading); letter-spacing: 0; }
  .cl-hd__form { width: 100%; height: 44px; margin: 20px 0 0; }
  .cl-hd__form input { height: 44px; font-size: 16px; }
  .cl-hd__form button { height: 44px; width: 48px; }
  .cl-ft__cols { padding: 24px 20px 16px; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .cl-ft__h { font-size: 16px; line-height: 24px; padding: 8px 0; }
  .cl-ft__list li a { padding: 0; font-size: 14px; line-height: 40px; }
  .cl-ft__contact { font-size: 14px; }
  .cl-ft__bar { padding: 12px 20px 16px; flex-direction: column; text-align: center; border-top: 1px solid var(--site-dark-line); }
  .cl-ft__small { font-size: 13px; }
  .cl-ft__legal { gap: 24px; }
  .cl-ft__legal a { display: inline-block; padding: 9px 0; font-size: 13px; }
}

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

}