/* cl-site.css: the site's tokens, fonts, reset and chrome (the announcement bar, the header and its menu, the
   footer, the primary button) in ICON Vehicle Dynamics' look, on every page: white pages, near-black (#000104)
   bars, Russo One headings over Roboto, square yellow buttons. Measured on their home (review/pages/home.json).
   `@layer base, kit, site;` sets the cascade: 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 only the three --parts-* tokens.
   Two layouts: from 980px the desktop bar; below it the phone bar (their 390 stage) with the menu in a drawer. */
@layer base, kit, site;

@font-face { font-family: "Roboto"; src: url("fonts/roboto-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Russo One"; src: url("fonts/russoone-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000104;
  --site-muted: #4D4D4F;
  --site-line: #D1D1D2;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #000104;
  --site-accent-fg: #FFFFFF;
  --site-yellow: #FFC62F;
  --site-bar: #F2BC2D;
  --site-dark: #000104;
  --site-dark-2: #141518;
  --site-field-dark: #333436;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #FFC62F;
  --site-button-fg: #000104;
  --site-button-hover-bg: #000104;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E5E6E6;
  --site-disabled-fg: #4D4D4F;
  --site-pick-field: #4D4D4F;
  --site-pick-option-hover: #ECECEC;
  --site-pick-panel-line: #DADADA;
  --site-pick-panel: #FFFFFF;    /* the vehicle picker's open list */
  --site-on-dark: #FFFFFF;       /* words and rules on the black header, the vehicle bar, the footer and the photo tiles */
  --site-on-yellow: #000104;     /* words on the yellow bar, the cart count and the vehicle's check */
  --site-raised: #FFFFFF;        /* a Top Sellers card */
  --site-raised-line: #E5E6E6;   /* its border */
  --site-plate: #FFFFFF;         /* the plate under a product photo, white in both themes */

  /* fonts */
  --site-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --site-font-heading: "Russo One", "Roboto", system-ui, sans-serif;
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1320px;
  --site-gutter: 52px;
  /* their topographic lines at a fifth of their strength, as their vehicle bands show them */
  --site-topo: linear-gradient(rgba(0, 1, 4, .8), rgba(0, 1, 4, .8)), url("img/site/home/icon-vehicle-dynamics-21.png");
}
/* the kit's shop pages and vehicle band: only the brand tokens a site owns (storefront-kit ADR 0007) */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent);
  --parts-font: var(--site-font-body);
}
/* Dark (storefront-kit 0.10.0, Site(dark="night")): <html data-parts-theme="dark"> from 21:30 to 04:30 by the shopper's
   clock or by the header's switch. The page the kit's warm near black, near-white words (never grey), cards a step up,
   rules in the kit's dark grey. ICON's chrome is black already: the yellow bar, the black header, the topographic
   vehicle bar and the footer stay as they are, and the yellow buttons keep their black words. The black accent
   (the kit's main action, the cart's ticks and outlines) turns near white with dark words, as the kit's ink does.
   Product 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: #F6F3EF;
  --site-accent-fg: #121110;
  --site-yellow: #FFC62F;
  --site-bar: #F2BC2D;
  --site-dark: #000104;
  --site-dark-2: #141518;
  --site-field-dark: #333436;
  --site-field-bg: #1C1A18;
  --site-button-bg: #FFC62F;
  --site-button-fg: #000104;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-pick-field: #4D4D4F;
  --site-pick-option-hover: #2A2622;
  --site-pick-panel-line: #3D3833;
  --site-pick-panel: #1C1A18;
  --site-on-dark: #FFFFFF;
  --site-on-yellow: #000104;
  --site-raised: #1C1A18;
  --site-raised-line: #3D3833;
  --site-plate: #FFFFFF;
  /* the kit: its main action near white with dark words, a hover a step down; the band a shade over the page */
  --parts-accent-strong: #DDD7CF;
  --parts-cta-ink: #121110;
  --parts-band-go-ink: #121110;
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #3D3833;
}
@media (max-width: 979.98px) {
  :root { --site-gutter: 16px; }
}

@layer base {

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--site-bg); scroll-behavior: smooth; }
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: square, yellow, black uppercase type ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; 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 14px/20px var(--site-font-button); letter-spacing: 1.4px; text-transform: uppercase; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cl-btn:hover { background: var(--site-button-hover-bg); color: var(--site-button-hover-fg); border-color: var(--site-button-hover-bg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- the announcement bar ---------- */
.cl-bar { background: var(--site-bar); color: var(--site-on-yellow); font: 600 13px/13px var(--site-font-body); }
.cl-bar__in { min-height: 42px; padding: 8px 30px; display: flex; align-items: center; justify-content: flex-end; gap: 24px; position: relative; }
.cl-bar__msg { position: absolute; left: 50%; transform: translateX(-50%); letter-spacing: .65px; text-transform: uppercase; white-space: nowrap; }
.cl-bar__aside { font-weight: 500; }
.cl-bar a:hover { text-decoration: underline; }

/* ---------- the header: the Orbital Parts mark (white on the black bar by day and at night), menu, vehicle, search, cart ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); color: var(--site-on-dark); }
.cl-hd__in { min-height: 114px; padding: 0 40px 0 30px; display: flex; align-items: center; gap: 20px; }
.cl-hd__logo { flex: none; }
.cl-hd__logo img { width: auto; height: 50px; }
/* a narrower desktop drops the last headings first (All Parts reaches every one), so the row never runs into Select Vehicle */
@media (min-width: 980px) and (max-width: 1379.98px) { .cl-hd__list > li:nth-child(n+4) { display: none; } }
@media (min-width: 980px) and (max-width: 1259.98px) { .cl-hd__list > li:nth-child(n+3) { display: none; } }
@media (min-width: 980px) and (max-width: 1159.98px) { .cl-hd__list > li:nth-child(n+2) { display: none; } }
@media (min-width: 980px) and (max-width: 1099.98px) { .cl-hd__logo img { height: 36px; } }
.cl-hd__toggle { display: none; }
.cl-hd__nav { flex: 1; min-width: 0; }
.cl-hd__list { display: flex; align-items: center; }
.cl-hd__link { display: block; padding: 10px 14px; overflow-wrap: normal; font: 600 15px/18px var(--site-font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--site-on-dark); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-yellow); }
.cl-hd__vehicle { flex: none; display: inline-flex; align-items: center; gap: 8px; width: 173px; height: 48px; padding: 0 10px 0 8px; border: 1px solid var(--site-on-dark); font: 500 15px/19.5px var(--site-font-body); color: var(--site-on-dark); }
.cl-hd__vehicle:hover, .cl-hd__vehicle[aria-expanded="true"] { color: var(--site-yellow); border-color: var(--site-yellow); }
.cl-hd__car { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 24px; }
.cl-hd__check { position: absolute; top: -3px; right: -4px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--site-yellow); color: var(--site-on-yellow); }
.cl-hd__veh-name { flex: 1; min-width: 0; }
.cl-hd__vehicle.is-set .cl-hd__veh-name { font-size: 13px; line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-hd__chev { margin-left: 4px; flex: none; }
.cl-hd__search { flex: 0 1 330px; display: flex; align-items: center; height: 48px; padding: 4px 0; background: var(--site-field-dark); }
.cl-hd__search button { flex: none; width: 47px; height: 40px; display: grid; place-items: center; color: var(--site-on-dark); }
.cl-hd__search input { flex: 1; min-width: 0; height: 40px; padding: 0 12px 0 0; border: 0; background: transparent; color: var(--site-on-dark); font: 400 16px/1 var(--site-font-body); outline: none; }
.cl-hd__search input::placeholder { color: var(--site-on-dark); opacity: .8; }
.cl-hd__search:focus-within { outline: 1px solid var(--site-on-dark); }
.cl-hd__cart { flex: none; position: relative; display: grid; place-items: center; width: 40px; height: 40px; color: var(--site-on-dark); }
.cl-hd__cart:hover { color: var(--site-yellow); }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: 0; right: -2px; min-width: 18px; font: 600 12px/18px var(--site-font-body); text-align: center; background: var(--site-yellow); color: var(--site-on-yellow); }
.cl-hd__cart-count:empty { display: none; }

/* ---------- the footer ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-on-dark); }
.cl-ft__band { background-color: var(--site-dark); background-size: cover; background-position: center; }
.cl-ft__band-in, .cl-ft__in { width: min(var(--site-max), 100% - 2 * var(--site-gutter)); margin-left: max(var(--site-gutter), (100% - var(--site-max) - 16px) / 2); }
.cl-ft__band-in { min-height: 138px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cl-ft__kicker { font: 600 14px/18.9px var(--site-font-body); letter-spacing: 1.4px; text-transform: uppercase; }
.cl-ft__help-line { margin-top: 4px; font: 400 26px/33.8px var(--site-font-heading); letter-spacing: 1.56px; }
.cl-ft__help-line a:hover { color: var(--site-yellow); }
.cl-ft__main { border-top: 1px solid var(--site-field-dark); }
.cl-ft__main .cl-ft__in { padding-top: 40px; padding-bottom: 40px; min-height: 510px; display: grid; grid-template-columns: 256px repeat(4, 1fr); gap: 24px; }
.cl-ft__contact { display: flex; align-items: center; gap: 12px; font: 500 15px/22.5px var(--site-font-body); }
.cl-ft__contact svg { color: var(--site-yellow); }
.cl-ft__contact a:hover, .cl-ft__col a:hover, .cl-ft__legal a:hover { color: var(--site-yellow); }
.cl-ft__h { font: 400 18px/25.2px var(--site-font-heading); letter-spacing: 1.08px; text-transform: uppercase; }
.cl-ft__col ul { margin-top: 15px; display: grid; gap: 12px; }
.cl-ft__col a { font: 400 15px/21px var(--site-font-body); color: var(--site-on-dark); }
.cl-ft__bottom .cl-ft__in--bottom { min-height: 101px; padding-top: 20px; padding-bottom: 20px; display: grid; gap: 10px; font: 400 14px/22.4px var(--site-font-body); }
.cl-ft__legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }

/* ---------- the outline button: white line and type on the dark bars ---------- */
.cl-btn--ghost { background: transparent; color: var(--site-on-dark); border-color: var(--site-on-dark); }
.cl-btn--ghost:hover { background: transparent; color: var(--site-yellow); border-color: var(--site-yellow); }

/* ---------- the vehicle bar under the header (partials/vehicle.html): ICON's topo band, "Currently shopping for"
   beside Change vehicle and Shop without vehicle, or the picker. With a script the empty bar waits for Select
   Vehicle and the set bar's picker for Change (.is-open, cl-site.js); without one both show ---------- */
.cl-veh { position: relative; z-index: 40; background: var(--site-dark); background-image: var(--site-topo); background-size: cover; background-position: center; color: var(--site-on-dark); }
.cl-js .cl-veh:not(.cl-veh--set):not(.is-open), .cl-js .cl-veh--set:not(.is-open) .cl-pick { display: none; }
.cl-veh__in { width: min(var(--site-max), 100% - 2 * var(--site-gutter)); margin-left: max(var(--site-gutter), (100% - var(--site-max) - 16px) / 2); padding: 32px 0; }
.cl-veh__now { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cl-veh__now-text { font: 400 15px/22px var(--site-font-body); }
.cl-veh__name { display: flex; align-items: center; gap: 8px; margin-top: 6px; font: 400 22px/28px var(--site-font-heading); letter-spacing: 1.32px; text-transform: uppercase; }
.cl-veh__name::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--site-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%23000104' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat; }
.cl-veh__actions { display: flex; gap: 15px; }
.cl-veh__actions .cl-btn { padding: 0 26px; }
.cl-veh--set .cl-pick { margin-top: 28px; }

/* ---------- the picker (partials/vehicle.html pick): 4 numbered grey levels and the yellow button in a row,
   stacked on a phone. Before the script, and without it, the native selects; then kitYmmField's buttons and
   white lists (the classes cl-site.js passes it) ---------- */
.cl-pick__h { margin-bottom: 25px; font: 400 18px/22px var(--site-font-heading); letter-spacing: 1.08px; text-transform: uppercase; }
.cl-pick__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 228px; gap: 15px; }
.cl-pick__field { position: relative; height: 53px; }
.cl-pick__n { position: absolute; z-index: 1; left: 0; top: 0; width: 38px; height: 53px; display: grid; place-items: center; font: 600 14px/1 var(--site-font-body); pointer-events: none; }
.cl-pick__n::after { content: ""; position: absolute; right: 0; top: 15px; height: 23px; border-right: 1px solid var(--site-on-dark); }
.cl-pick__field::after { content: ""; position: absolute; right: 24px; top: 21px; width: 7px; height: 7px; border: solid var(--site-on-dark); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.cl-pick__field:has([aria-expanded="true"])::after { top: 24px; transform: rotate(-135deg); }
.cl-pick select, .cl-pick__button {
  width: 100%; height: 53px; padding: 0 44px 0 55px; border: 0; border-radius: var(--site-radius);
  background: var(--site-pick-field); color: var(--site-on-dark); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cl-pick select { font: 400 16px/1 var(--site-font-body); appearance: none; }
.cl-pick__button { font: 600 14px/1 var(--site-font-body); letter-spacing: 1.4px; text-transform: uppercase; }
.cl-pick__button:disabled { cursor: default; }
.cl-pick__button:focus-visible, .cl-pick select:focus-visible { outline: 2px solid var(--site-yellow); outline-offset: -2px; }
.cl-pick__button, .cl-pick__panel, .cl-pick.is-live select { display: none; }
.cl-pick.is-live .cl-pick__button { display: block; }
.cl-pick.is-live .cl-pick__panel:not([hidden]) { display: block; }
.cl-pick__panel { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 5px); max-height: 350px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--site-pick-panel); border: 1px solid var(--site-pick-panel-line); border-radius: var(--site-radius); }
.cl-pick__option { display: block; width: 100%; min-height: 49px; padding: 12px 10px; text-align: left; font: 400 18px/25px var(--site-font-body); color: var(--site-fg); }
.cl-pick__option:hover, .cl-pick__option:focus-visible, .cl-pick__option[aria-selected="true"] { background: var(--site-pick-option-hover); outline: none; }
.cl-pick__go { min-height: 53px; font-size: 15px; letter-spacing: 1.5px; }

/* ---------- phones: the bar on two lines, the menu in a drawer, the search under the mark ---------- */
@media (max-width: 979.98px) {
  .cl-bar__in { min-height: 62px; height: 62px; padding: 8px; flex-direction: column; justify-content: center; gap: 8px; text-align: center; }
  .cl-bar__msg { position: static; transform: none; white-space: normal; font-size: 12px; line-height: 13px; }
  .cl-bar__aside { font-size: 12px; }
  .cl-hd__in { min-height: 0; padding: 0 15px 15px; flex-wrap: wrap; gap: 0; }
  .cl-hd__toggle { display: grid; place-items: center; width: 40px; height: 59px; margin-left: -8px; color: var(--site-on-dark); }
  .cl-hd__close, .cl-hd__toggle[aria-expanded="true"] .cl-hd__bars { display: none; }
  .cl-hd__toggle[aria-expanded="true"] .cl-hd__close { display: block; }
  .cl-hd__logo { margin-left: 16px; }
  .cl-hd__logo img { height: 36px; }
  .cl-hd__vehicle { order: 2; margin-left: auto; width: auto; height: 40px; padding: 0 8px; border: 0; }
  .cl-hd__veh-name, .cl-hd__vehicle.is-set .cl-hd__veh-name, .cl-hd__chev { display: none; }
  .cl-veh__in { padding: 30px 0; }
  .cl-veh__now { flex-direction: column; align-items: stretch; gap: 20px; }
  .cl-veh__name { font-size: 18px; line-height: 24px; text-transform: none; }
  .cl-veh__actions { flex-direction: column; gap: 10px; }
  .cl-veh__actions .cl-btn { width: 100%; }
  .cl-veh--set .cl-pick { margin-top: 24px; }
  .cl-pick__row { grid-template-columns: 1fr; gap: 9px; }
  .cl-pick__h { margin-bottom: 20px; }
  .cl-hd__cart { order: 3; margin-right: -8px; }
  .cl-hd__search { order: 5; flex: 1 1 100%; }
  .cl-hd__nav { order: 6; flex: 1 1 100%; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__nav.is-open { position: absolute; left: 0; right: 0; top: 100%; background: var(--site-dark); padding: 8px 15px 16px; border-top: 1px solid var(--site-field-dark); }
  .cl-hd__list { flex-direction: column; align-items: stretch; }
  .cl-hd__link { padding: 13px 0; border-bottom: 1px solid var(--site-field-dark); }
  .cl-ft__band-in { min-height: 0; padding-top: 40px; padding-bottom: 40px; flex-direction: column; align-items: flex-start; gap: 28px; }
  .cl-ft__help-line { font-size: 20px; line-height: 26px; overflow-wrap: anywhere; }
  .cl-ft__main .cl-ft__in { min-height: 0; grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .cl-ft__brand { grid-column: 1 / -1; }
  .cl-ft__col a, .cl-ft__legal a { display: inline-block; padding: 10px 0; }
  .cl-ft__col ul { gap: 0; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { width: min(var(--site-max), 100% - 2 * var(--site-gutter)); margin: 0 auto; padding: 80px 0 100px; }
.cl-404__h { font: 400 42px/46.2px var(--site-font-heading); letter-spacing: 2.1px; text-transform: uppercase; }
.cl-404__p { margin: 16px 0 32px; font-size: 16px; }

/* the client's phone menu opened by cl-site.js when its own script is gone */
.cl-open, .cl-open > ul, .cl-open > div { display: block !important; visibility: visible !important; opacity: 1 !important;
  transform: none !important; left: 0 !important; right: auto !important; max-height: none !important; height: auto !important;
  pointer-events: auto !important; }
nav.cl-open, .cl-open { position: relative; z-index: 9999; }
html.cl-menu-open { overflow-x: hidden; }

/* 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 at night only): white on the black bar, yellow on
   hover, beside the cart; on a phone it joins the vehicle and the cart on the logo's row */
.cl-hd .parts-theme-switch { flex: none; color: var(--site-on-dark); }
.cl-hd .parts-theme-switch:hover { color: var(--site-yellow); }
/* the switch and its gap (60px) come out of the search, so the headings keep their daytime room */
@media (min-width: 980px) { :root[data-parts-night] .cl-hd__search { flex-basis: 270px; } }
@media (max-width: 979.98px) {
  .cl-hd .parts-theme-switch { order: 3; }
}