/* cl-site.css: RECARO's look on every page, written from their measured home (review/pages/home.json):
   the tokens, the Univers faces, the reset, the primary button, the header (their white 110px bar with the
   menu at the left and the Orbital Parts mark at the right; on phones their 60px bar with the menu button at
   the left and the mark in the middle), the footer (their black block of columns over the light base with the links
   and the copyright) and the 404.

   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
   only the three --parts-* tokens below; no rule here names a kit class.

   Two layouts: from 980px the desktop one, below it their phone one. */
@layer base, kit, site;

@font-face {
  font-family: "Univers LT W04_45 Light1475948";
  src: url("fonts/univers-lt-w04-45-light1475948-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Univers LT W04_65 Bold1475972";
  src: url("fonts/univers-lt-w04-65-bold1475972-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* colours */
  --site-bg: #FEFEFE;
  --site-fg: #000000;
  --site-ink: #0A0A0A;
  --site-muted: #727272;
  --site-line: #D0D0D0;
  --site-band: #F2F2F2;
  --site-card: #F4F4F4;
  --site-field: #E6E6E6;
  --site-accent: #F0294A;
  --site-accent-fg: #FFFFFF;
  --site-dark: #000000;
  --site-dark-fg: #FFFFFF;
  /* the chrome's own colours, each a token so the dark block below can turn it: the header's white bar, the
     fields' rule and placeholder, the footer's column rules, the finder's white box, the button's hover */
  --site-hd-bg: #FFFFFF;
  --site-panel: #FFFFFF;
  --site-field-line: #848484;
  --site-placeholder: #333333;
  --site-dark-line: #262626;
  --site-accent-hover: #C81D3A;

  /* fonts: Univers 45 Light for the text, Univers 65 Bold for the bold lines and buttons */
  --site-font-body: "Univers LT W04_45 Light1475948", "Helvetica Neue", Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-bold: "Univers LT W04_65 Bold1475972", "Helvetica Neue", Arial, sans-serif;
  --site-font-button: var(--site-font-bold);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1200px;
  --site-shadow: 0 40px 120px -40px rgba(0, 0, 0, 0.1);
}
/* the kit's shop pages and vehicle band take only these three (storefront-kit ADRs 0006, 0007) */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: #C81D3A;
  --parts-font: var(--site-font-body);
}
/* the dark page (storefront-kit 0.10.0: the kit's head block sets data-parts-theme="dark" from 21:30 to 04:30 by the
   shopper's clock, or on the shopper's pick): the kit's warm near black for the page, near-white text, dark grey
   rules, the help band and the fields a step up; their white bar turns the page colour and the Orbital Parts
   mark its white-lettered twin; the footer's black block stays black; the red reads on the dark as it is */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-ink: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-field: #1C1A18;
  --site-accent: #F0294A;
  --site-accent-fg: #FFFFFF;
  --site-dark: #000000;
  --site-dark-fg: #FFFFFF;
  --site-shadow: none;
  --site-hd-bg: #121110;
  --site-panel: #121110;
  --site-field-line: #3D3833;
  --site-placeholder: #DDD7CF;
  --site-dark-line: #262626;
  --site-accent-hover: #C81D3A;
  --parts-accent-strong: color-mix(in srgb, #F0294A 78%, #fff);
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --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.6 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 { 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 red "View product" ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 28px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 400 14px/24px var(--site-font-button); letter-spacing: 1.4px; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-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; }

/* their arrow link: a red arrow before bold capitals */
.cl-arrow { display: inline-flex; align-items: center; gap: 18px; min-height: 40px; font: 400 16px/24px var(--site-font-bold); letter-spacing: 1.6px; text-transform: uppercase; color: var(--site-fg); }
.cl-arrow svg { flex: none; color: var(--site-accent); transition: transform 0.2s ease; }
.cl-arrow:hover svg { transform: translateX(4px); }

/* ---------- header: their white bar, the menu at the left, the Orbital Parts mark at the right ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-hd-bg); box-shadow: 0 40px 40px -40px rgba(0, 0, 0, 0.05); }
.cl-hd__in { max-width: var(--site-max); margin: 0 auto; padding: 0 20px; height: 110px; display: flex; align-items: center; }
.cl-hd__toggle { display: none; }
.cl-hd__nav { flex: 1; min-width: 0; display: flex; align-items: center; gap: 24px; height: 100%; }
.cl-hd__list { display: flex; height: 100%; }
.cl-hd__link { display: block; padding-right: 24px; font: 400 14px/110px var(--site-font-body); color: var(--site-fg); white-space: nowrap; }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }
.cl-hd__search { position: relative; flex: 0 1 260px; margin-left: auto; }
.cl-hd__q {
  width: 100%; height: 36px; padding: 0 12px 0 36px;
  background: var(--site-field); color: var(--site-fg); border: 1px solid var(--site-field-line); border-radius: var(--site-radius);
  font: 400 14px/1 var(--site-font-body);
}
.cl-hd__q::placeholder { color: var(--site-placeholder); opacity: 1; }
.cl-hd__q:focus { outline: 2px solid var(--site-fg); outline-offset: 0; }
.cl-hd__search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--site-fg); pointer-events: none; }
.cl-hd__cart { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 26px 0 14px; color: var(--site-fg); }
.cl-hd__cart:hover { color: var(--site-accent); }
/* the kit's theme switch (parts/theme_switch.html, 40px square, currentColor) just before the cart, in the bar's ink */
.cl-hd .parts-theme-switch { flex: none; margin-left: 14px; color: var(--site-fg); }
.cl-hd .parts-theme-switch:hover { color: var(--site-accent); }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count {
  position: absolute; top: 2px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  font: 400 11px/18px var(--site-font-bold); text-align: center; border-radius: 9px; background: var(--site-accent); color: var(--site-accent-fg);
}
.cl-hd__cart-count:empty { display: none; }
.cl-hd__logo { flex: none; display: block; }
.cl-hd__logo img { display: block; width: auto; height: 30px; }
.cl-hd__logo .cl-hd__mark--night { display: none; }
:root[data-parts-theme="dark"] .cl-hd__logo .cl-hd__mark { display: none; }
:root[data-parts-theme="dark"] .cl-hd__logo .cl-hd__mark--night { display: block; }

/* ---------- footer: their black block of columns, then the light base ---------- */
.cl-ft { margin-top: 20px; }
.cl-ft__cols-wrap { margin: 0 20px; background: var(--site-dark); color: var(--site-dark-fg); }
.cl-ft__cols { max-width: var(--site-max); margin: 0 auto; padding: 100px 0 100px; display: grid; grid-template-columns: repeat(4, 275px); column-gap: 20px; justify-content: center; }
.cl-ft__h { margin: 0 0 8px; font: 400 18px/25.2px var(--site-font-body); letter-spacing: 0.8px; color: var(--site-dark-fg); }
.cl-ft__h--more { margin-top: 40px; }
.cl-ft__col summary { list-style: none; }
.cl-ft__col summary::-webkit-details-marker { display: none; }
.cl-ft__col summary svg { display: none; }
.cl-ft__list a { display: block; font: 400 14px/30px var(--site-font-body); color: var(--site-dark-fg); }
.cl-ft__list a:hover { color: var(--site-accent); }
.cl-ft__base { padding: 50px 20px 62px; text-align: center; }
.cl-ft__links { display: flex; flex-wrap: wrap; justify-content: center; }
.cl-ft__links a { display: block; padding: 16px 2px; margin: 0 7px; font: 400 16px/25.6px var(--site-font-body); color: var(--site-fg); }
.cl-ft__links a:hover { color: var(--site-accent); }
.cl-ft__copy { font: 400 13px/19.2px var(--site-font-body); color: var(--site-fg); }

/* ---------- phones: their 60px bar, the menu behind the button at the left (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd__in { position: relative; height: 60px; padding: 0 16px; justify-content: center; }
  .cl-hd__toggle { position: absolute; left: 12px; top: 10px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--site-fg); }
  .cl-hd__logo img { height: 28px; }
  .cl-hd__cart { position: absolute; right: 12px; top: 10px; margin: 0; }
  .cl-hd .parts-theme-switch { position: absolute; right: 52px; top: 10px; margin: 0; }
  .cl-hd__nav {
    position: absolute; left: 0; right: 0; top: 60px; height: auto; display: block; padding: 11px 0 20px;
    background: var(--site-hd-bg); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { display: block; height: auto; }
  .cl-hd__link { padding: 0 26px; font-size: 16px; line-height: 42px; }
  .cl-hd__search { margin: 12px 16px 0; }
  .cl-hd__q { height: 44px; font-size: 16px; }
  .cl-ft { margin-top: 0; }
  .cl-ft__cols-wrap { margin: 0; }
  .cl-ft__cols { display: block; min-height: 0; padding: 0; }
  .cl-ft__col { border-bottom: 1px solid var(--site-dark-line); }
  .cl-ft__col summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 26px; cursor: pointer;
    font: 400 13px/1 var(--site-font-bold); letter-spacing: 1.3px; text-transform: uppercase; }
  .cl-ft__col summary svg { display: block; color: var(--site-accent); }
  .cl-ft__col[open] summary svg { transform: rotate(45deg); }
  .cl-ft__h { margin: 0; font: inherit; letter-spacing: inherit; }
  .cl-ft__list { padding: 0 26px 16px 50px; }
  .cl-ft__base { padding: 40px 16px 50px; }
  .cl-ft__links a { font-size: 13px; line-height: 20.8px; padding: 16px 4px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { max-width: var(--site-max); margin: 0 auto; padding: 100px 20px; text-align: center; }
.cl-404__h { font: 400 36px/46.8px var(--site-font-heading); color: var(--site-ink); }
.cl-404__h strong { display: block; font-family: var(--site-font-bold); font-weight: 400; text-transform: uppercase; }
.cl-404__p { margin: 24px 0 32px; }
@media (max-width: 979.98px) {
  .cl-404 { padding: 60px 16px; }
  .cl-404__h { font-size: 22px; line-height: 28.6px; }
}

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

}