/* cl-site.css: MAHLE's tokens, type and chrome (the header, its menu, the footer, the primary button) on every page,
   written by hand from the capture of mahle-aftermarket.com (review/pages/home.json): white page, black Roboto Light,
   their navy #1E2A63 bar colour and sky accent #41B6E6, the 1200px column.
   Cascade: `@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.
   Two layouts: from 980px the desktop one, below it their phone one (measured in a 390px stage). */
@layer base, kit, site;

/* Roboto and Roboto Condensed (Google Fonts, Apache 2.0), the files their site serves (static/fonts/FONTS.md) */
@font-face { font-family: "Roboto"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/roboto-v20-latin-ext-300-woff2.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 300; font-style: italic; font-display: swap; src: url("fonts/roboto-v20-latin-ext-300italic-woff2.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/roboto-v20-latin-ext-regular-woff2.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/roboto-v20-latin-ext-italic-woff2.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("fonts/roboto-v20-latin-ext-latin-500-woff2.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: italic; font-display: swap; src: url("fonts/roboto-v20-latin-ext-latin-500italic-woff2.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/roboto-v20-latin-ext-700-woff2.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/roboto-v20-latin-ext-700italic-woff2.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/roboto-condensed-v16-latin-latin-ext-regular-woff2.woff2") format("woff2"); }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #737373;
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #41B6E6;
  --site-accent-fg: #111111;
  --site-navy: #1E2A63;
  --site-footer-bg: #EBEBEB;
  --site-footer-bar: #DDDDDD;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #41B6E6;
  --site-button-fg: #111111;
  --site-button-hover-bg: #1E2A63;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #111111;
  --site-brand-ink: var(--site-navy);   /* the navy as text and icons: the wordmark, the menu, the cart, the three bars */
  --site-on-navy: #FFFFFF;              /* text on a navy fill (the home's slide caption) */

  /* fonts: Roboto at 300 is their "Roboto Light" body and headings; Roboto Condensed is their menu */
  --site-font-body: "Roboto", Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);
  --site-font-menu: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1200px;
  --site-pad: 10px;
}
/* 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-navy);
  --parts-font: var(--site-font-body);
}
/* the night theme (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): the white page and its grey footer turn to the kit's warm near black, a step up for the
   footer and its bar, text near white; the navy that is text (the wordmark, the menu, the icons) turns near white,
   while the navy fills (the slide's caption, a button's hover) and the sky accent keep their colours. */
: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: #41B6E6;
  --site-accent-fg: #111111;
  --site-navy: #1E2A63;
  --site-footer-bg: #1C1A18;
  --site-footer-bar: #24201C;
  --site-field-bg: #1C1A18;
  --site-button-bg: #41B6E6;
  --site-button-fg: #111111;
  --site-button-hover-bg: #1E2A63;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-brand-ink: #F6F3EF;
  --site-on-navy: #FFFFFF;
  --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: 300 16px/1.625 var(--site-font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, address { margin: 0; padding: 0; font-style: normal; }
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: their sky Accept button ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 28px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 1px solid var(--site-button-bg); border-radius: var(--site-radius);
  font: 400 16px/1 var(--site-font-button); text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.cl-btn:hover { background: var(--site-button-hover-bg); border-color: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-brand-ink); outline-offset: 2px; }

/* ---------- header: the wordmark and search on the top line, our headings in their condensed menu below ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); }
.cl-hd__in { position: relative; height: 107px; padding: 0 39px; }
.cl-hd__logo { position: absolute; left: 39px; top: 15px; }
.cl-hd__logo img { display: block; width: auto; height: 40px; }
.cl-hd__logo .cl-hd__night, :root[data-parts-theme="dark"] .cl-hd__logo img { display: none; }
:root[data-parts-theme="dark"] .cl-hd__logo .cl-hd__night { display: block; }
.cl-hd__tools { position: absolute; right: 39px; top: 15px; display: flex; align-items: center; gap: 20px; }
.cl-hd__search { display: flex; width: 300px; height: 33px; border: 1px solid var(--site-accent); background: var(--site-field-bg); }
.cl-hd__search input { flex: 1; min-width: 0; border: 0; padding: 0 12px; background: transparent; color: var(--site-fg); font: 400 14px/1 var(--site-font-body); outline: 0; }
.cl-hd__search input::placeholder { color: var(--site-fg); opacity: .7; }
.cl-hd__search button { width: 34px; display: flex; align-items: center; justify-content: center; color: var(--site-accent); }
.cl-hd__icon { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; color: var(--site-brand-ink); }
.cl-hd__icon--search, .cl-hd__toggle { display: none; }
.cl-hd__cart { position: relative; }
.cl-hd__cart-count { position: absolute; top: 2px; right: -2px; min-width: 18px; padding: 0 4px; font: 500 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__nav { position: absolute; left: 39px; right: 39px; top: 71px; }
.cl-hd__list { display: flex; flex-wrap: wrap; gap: 0 26px; }
.cl-hd__link { display: block; padding: 9px 0 10px; font: 500 16px/19px var(--site-font-menu); color: var(--site-brand-ink); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }

/* ---------- footer: their grey columns and the darker copyright bar ---------- */
.cl-ft { background: var(--site-footer-bg); border-top: 3px solid var(--site-footer-bg); color: var(--site-fg); }
.cl-ft__in { max-width: var(--site-max); margin: 0 auto; padding: 39px 0 19px; display: grid; grid-template-columns: repeat(3, 1fr); }
.cl-ft__col { padding: 0 var(--site-pad); }
.cl-ft__list li + li { margin-top: 13px; }
.cl-ft__list a { font: 400 16px/26px var(--site-font-body); }
.cl-ft__list a:hover { color: var(--site-accent); }
.cl-ft__contact p { font: 300 16px/22.86px var(--site-font-body); }
.cl-ft__contact p + p { margin-top: 12px; }
.cl-ft__mail { font: 500 18px/26px var(--site-font-body); color: var(--site-accent); text-decoration: underline; }
.cl-ft__bar { background: var(--site-footer-bar); }
.cl-ft__bar p { max-width: var(--site-max); margin: 0 auto; padding: 8px var(--site-pad) 10px; font: 300 16px/26px var(--site-font-body); }

/* ---------- phones: their 65px bar, the menu behind the three bars ---------- */
@media (max-width: 979.98px) {
  .cl-hd { box-shadow: 0 1px 0 var(--site-line); }
  .cl-hd__in { height: 65px; padding: 0 14px 0 25px; display: flex; align-items: center; justify-content: space-between; }
  .cl-hd__logo { position: static; }
  .cl-hd__logo img { height: 32px; }
  .cl-hd__tools { position: static; gap: 0; }
  .cl-hd__icon--search, .cl-hd__toggle { display: inline-flex; }
  .cl-hd__toggle { flex-direction: column; gap: 4px; width: 47px; }
  .cl-hd__toggle span { display: block; width: 25px; height: 2px; background: var(--site-brand-ink); }
  .cl-hd__search { display: none; }
  .cl-hd__nav { position: absolute; left: 0; right: 0; top: 65px; background: var(--site-bg); border-bottom: 1px solid var(--site-line); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; }
  .cl-hd__link { padding: 11px 25px; border-top: 1px solid var(--site-line); font-size: 17px; }
  .cl-hd__nav .cl-hd__search { display: flex; width: auto; height: 44px; margin: 12px 25px 16px; }
  .cl-hd__nav .cl-hd__search input { font-size: 16px; }
  .cl-ft__in { grid-template-columns: 1fr; padding: 39px 0 0; }
  .cl-ft__col { padding: 0 15px 39px; }
  .cl-ft__bar p { padding: 46px 15px 11px; }
}
@media (min-width: 980px) { .cl-hd__nav .cl-hd__search { display: none; } }

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { max-width: var(--site-max); margin: 0 auto; padding: 80px 10px 120px; }
.cl-404__h { font: 300 50px/58px var(--site-font-heading); }
.cl-404__text { margin-top: 26px; font: 300 30px/39px var(--site-font-body); }
.cl-404__home { margin-top: 39px; }
@media (max-width: 979.98px) { .cl-404 { padding: 48px 15px 80px; } .cl-404__h { font-size: 36px; line-height: 44px; } .cl-404__text { font-size: 22px; line-height: 30px; } }

/* 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 kit's theme switch (parts/theme_switch.html, 40px, currentColor icons), outside the layers so it wins over the kit's own unlayered button rule, before the cart in the tools */
.cl-hd__tools .parts-theme-switch { flex: none; color: var(--site-brand-ink); }
.cl-hd__tools .parts-theme-switch:hover { color: var(--site-accent); }