/* cl-site.css: Energy Suspension's tokens, reset and chrome (the white top bar, the dark bar with the
   wordmark and the menu, the footer, the primary button), on every page, measured on their home at 1440
   and in the 390 phone stage. 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;` 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 alone: no rule here names
   a kit class. From 980px the desktop layout, below it the phone layout with the menu behind a toggle. */
@layer base, kit, site;

/* Roboto and Roboto Slab, the client's two families (static/fonts/FONTS.md): variable files, one per subset */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fonts/roboto-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: "Roboto"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fonts/roboto-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: "Roboto Slab"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/roboto-slab-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: "Roboto Slab"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/roboto-slab-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: the page grey, the text, the lines, the red of their headings, the dark bars and buttons */
  --site-bg: #EEEEEE;
  --site-fg: #3A3A3A;
  --site-muted: #3A3A3A;
  --site-line: #CECECE;
  --site-band: #E3E3E3;
  --site-card: #FFFFFF;
  --site-accent: #DE1B1B;
  --site-accent-strong: #B71515;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-field-line: #CED4DA;
  --site-button-bg: #32312D;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #DE1B1B;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E3E3E3;
  --site-disabled-fg: #3A3A3A;
  --site-bar: #212121;
  --site-bar-line: #555555;
  --site-dark: radial-gradient(#585858 0, #232323 100%) 0 0 / 550% 450%;
  --site-white: #FFFFFF;
  /* the white surfaces (the top bar, the home's sections, the 404), the black ink of the vehicle pick and the
     search button, the pick's rule, the finder's rule */
  --site-paper: #FFFFFF;
  --site-ink: #000000;
  --site-pick-line: rgba(0, 0, 0, .87);
  --site-finder-line: #D2D2D2;
  /* the grey button on the dark bar and the vehicle card, white words, the same in both themes */
  --site-grey: #999999;

  /* fonts */
  --site-font-body: Roboto, Helvetica, Arial, sans-serif;
  --site-font-heading: "Roboto Slab", "Times New Roman", serif;
  --site-font-button: Roboto, Helvetica, Arial, sans-serif;

  /* shape and layout: square boxes, their 1140 container with 15px gutters */
  --site-radius: 0;
  --site-max: 1140px;
  --site-gutter: 15px;
}
/* the kit's shop pages and vehicle band (storefront_kit/static/parts/tokens.css): only the brand tokens a site owns */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-strong);
  --parts-font: var(--site-font-body);
}
/* the dark page (data-parts-theme="dark" on <html>, the kit's night pick): the kit's warm near black for the page and
   the white top bar, cards and fields a step up, text near white, rules dark grey; the dark bar, the footer's gradient,
   --site-white (the ink on them) and the photo bands stay as they are. The red lifts a touch to read as text (4.6:1).
   The kit's band follows the kit's own dark values, since this site sets none of its own. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-band: #24201C;
  --site-card: #1C1A18;
  --site-accent: #E83A33;
  --site-accent-strong: #EF5A52;
  --site-field-bg: #1C1A18;
  --site-field-line: #3D3833;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-paper: #121110;
  --site-ink: #F6F3EF;
  --site-pick-line: #5C554E;
  --site-finder-line: #3D3833;
}
/* the kit's theme switch (parts/theme_switch.html, shown 21:30 to 04:30 by the kit's head block, whose rules sit in
   no layer, so these do not either): white on the dark bar like the cart, red on hover */
.cl-hd__bar .parts-theme-switch { color: var(--site-white); }
.cl-hd__bar .parts-theme-switch:hover { color: var(--site-accent); }

@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; }
input, select { font: inherit; }
[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 dark Search button ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 22px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 0; border-radius: var(--site-radius);
  font: 400 14px/1 var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 2px 0 rgba(50, 49, 45, .14), 0 3px 1px -2px rgba(50, 49, 45, .2), 0 1px 5px 0 rgba(50, 49, 45, .12);
  transition: background-color .2s ease;
}
.cl-btn:hover { background: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

/* ---------- header: the white top bar ---------- */
.cl-hd { position: relative; z-index: 50; }
.cl-hd__top { position: relative; z-index: 2; height: 70px; background: var(--site-paper);
  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, .12), 0 7px 10px -5px rgba(0, 0, 0, .15); }
.cl-hd__top-in, .cl-hd__bar-in { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); display: flex; align-items: center; }
.cl-hd__top-in { height: 70px; gap: 24px; }
.cl-hd__mail { flex: none; font: 300 16px/24px var(--site-font-body); color: var(--site-fg); }
.cl-hd__mail:hover { color: var(--site-accent); }
.cl-hd__find { flex: none; display: flex; height: 36px; margin-left: auto; width: 488px; }
.cl-hd__pick { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--site-pick-line);
  font: 400 13.6px/1 var(--site-font-body); text-transform: uppercase; color: var(--site-ink); background: var(--site-field-bg); }
.cl-hd__pick:hover { color: var(--site-accent); }
.cl-hd__search { flex: 1; display: flex; min-width: 0; }
.cl-hd__search input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; border: 1px solid var(--site-field-line); border-radius: 0; background: var(--site-field-bg);
  font: 400 16px/1 var(--site-font-body); color: var(--site-fg); }
.cl-hd__search input::placeholder { color: var(--site-fg); opacity: 1; }
.cl-hd__search button { flex: none; width: 44px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--site-field-line); border-left: 0; background: var(--site-field-bg); color: var(--site-ink); }

/* ---------- header: the dark bar, the Orbital Parts mark left, the menu and the cart right ---------- */
.cl-hd__bar { background: var(--site-bar); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .14), 0 7px 12px -5px rgba(33, 33, 33, .46); }
.cl-hd__bar-in { min-height: 77px; gap: 24px; }
.cl-hd__logo { flex: none; }
.cl-hd__logo img { width: 280px; height: auto; }
.cl-hd__toggle { display: none; }
.cl-hd__nav { margin-left: auto; }
.cl-hd__list { display: flex; align-items: center; }
.cl-hd__list > li { border-right: 1px solid var(--site-bar-line); }
.cl-hd__link, .cl-hd__cart { display: inline-flex; align-items: center; gap: 6px; min-height: 50px; padding: 0 15px;
  font: 400 14px/20px var(--site-font-body); text-transform: uppercase; color: var(--site-white); }
.cl-hd__link:hover, .cl-hd__link.is-current, .cl-hd__cart:hover { background: rgba(255, 255, 255, .1); }
.cl-hd__cart { flex: none; position: relative; }
.cl-hd__cart-count { min-width: 18px; padding: 0 4px; font: 700 12px/18px var(--site-font-body); text-align: center; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }
.cl-hd__drawer-only { display: none; }

/* ---------- footer: their dark gradient, three columns, the rule and the copyright ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-white); padding: 30px 0; }
.cl-ft__in { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); }
.cl-ft__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 30px; min-height: 357px; }
.cl-ft__title { margin: 10px 0 15px; font: 700 17px/26.35px var(--site-font-heading); color: var(--site-white); }
.cl-ft__title + .cl-ft__title, .cl-ft__list + .cl-ft__title, .cl-ft__text + .cl-ft__title { margin-top: 24px; }
.cl-ft__list a { display: flex; align-items: center; min-height: 34px; font: 500 12px/24px var(--site-font-body); text-transform: uppercase; color: var(--site-white); }
.cl-ft__list a:hover, .cl-ft__rows a:hover { text-decoration: underline; }
.cl-ft__text { font: 300 16px/24px var(--site-font-body); color: var(--site-white); }
.cl-ft__text + .cl-ft__text { margin-top: 10px; }
.cl-ft__rows li { display: grid; grid-template-columns: 30px 1fr; align-items: start; min-height: 34px; padding: 5px 0; font: 700 16px/24px var(--site-font-body); color: var(--site-white); }
.cl-ft__rows svg { margin-top: 2px; }
.cl-ft__rule { margin: 16px 0 16px; border: 0; border-top: 1px solid rgba(255, 255, 255, .2); }
.cl-ft__small { padding: 15px 0; text-align: center; font: 400 16px/24px var(--site-font-body); color: var(--site-white); }
.cl-ft__small strong { font-weight: 700; }

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { background: var(--site-paper); padding: 100px var(--site-gutter) 120px; text-align: center; }
.cl-404__h1 { font: 700 36px/54px var(--site-font-heading); color: var(--site-accent); }
.cl-404__text { margin: 16px auto 32px; max-width: 640px; font: 300 18px/27px var(--site-font-body); color: var(--site-fg); }

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

/* ---------- phones: no white bar, the mark and the toggle, the vehicle and search row,
   the menu as an opaque drawer under the bar (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd__top { display: none; }
  .cl-hd__bar-in { flex-wrap: wrap; gap: 0 10px; min-height: 0; padding: 10px var(--site-gutter) 18px; }
  .cl-hd__logo { flex: 1; min-width: 0; min-height: 50px; display: flex; align-items: center; }
  .cl-hd__logo img { width: 170px; }
  .cl-hd__cart { min-height: 40px; padding: 0 8px; }
  .cl-hd__cart-label { display: none; }
  .cl-hd__toggle { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 40px;
    border: 1px solid rgba(255, 255, 255, .1); border-radius: 4px; color: rgba(255, 255, 255, .8); }
  .cl-hd__find--bar { display: flex; flex: 1 1 100%; width: auto; min-width: 0; margin: 6px 0 0; height: 36px; gap: 8px; }
  .cl-hd__find--bar .cl-hd__search input { width: 100%; }
  .cl-hd__find--bar .cl-hd__pick { width: 162px; border: 0; background: var(--site-grey); color: var(--site-white); font-size: 14px; text-transform: none; }
  .cl-hd__find--bar .cl-hd__search button { display: none; }
  .cl-hd__find--bar .cl-hd__search input { border-right: 1px solid var(--site-field-line); }
  .cl-hd__nav { order: 3; flex: 1 1 100%; margin: 18px calc(-1 * var(--site-gutter)) -18px; background: var(--site-bar); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; align-items: stretch; border-top: 1px solid var(--site-bar-line); }
  .cl-hd__list > li { border-right: 0; border-bottom: 1px solid var(--site-bar-line); }
  .cl-hd__link { display: flex; min-height: 50px; padding: 0 var(--site-gutter); }
  .cl-hd__drawer-only { display: block; }

  .cl-ft__cols { grid-template-columns: 1fr; min-height: 0; }
  .cl-ft__col { min-height: 340px; padding: 10px 0; }
}
@media (min-width: 980px) {
  .cl-hd__find--bar { display: none; }
}

}