/* cl-site.css: DiabloSport's tokens, reset and chrome (header, menu, footer, the primary button) on every page,
   written from their measured home (review/pages/home.json): the black two-row header, the white page in Open Sans
   with Oswald capitals for headings and buttons, their red, and the near-black footer.
   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.
   Two layouts: from 980px their desktop, below it their 390px phone stage. */
@layer base, kit, site;

@font-face { font-family: "Oswald"; src: url("fonts/oswald-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-normal-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-bold-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #222222;   /* the soft text (counts, Part #, notes): near black, since a shop page has no grey text */
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F7F7F7;
  --site-accent: #DA2B1F;
  --site-accent-strong: #B8231A;
  --site-accent-text: #9E1A12;   /* their red darkened for small text on white or the light bands: 8:1 on white, 7:1 on #F0F0F0 */
  --site-accent-fg: #FFFFFF;
  --site-ink: #000000;
  --site-ink-fg: #FFFFFF;
  --site-foot-bg: #141414;
  --site-foot-line: #E7E7E7;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #DA2B1F;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #B8231A;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #555555;
  --site-plate: #FFFFFF;        /* under a photo or a part's picture: white in both themes, since they are drawn for white */
  --site-placeholder: #333333;  /* the search box's hint */
  --site-ink-line: #333333;     /* a rule inside the black header's phone menu */
  --site-grid: #999999;         /* the home's comparison table rules */
  --site-stripe: #F5F5F5;       /* its every second row */
  --site-track: #D3D3D3;        /* the phone tiles' scroll track */

  /* fonts */
  --site-font-body: "Open Sans", Verdana, Geneva, sans-serif;
  --site-font-heading: "Oswald", "Arial Narrow", sans-serif;
  --site-font-button: var(--site-font-heading);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1312px;
  --mx: min(1px, calc(100vw / 390));   /* the phone stage's unit (cl-shop.css's title band): 1px at 390, less on a narrower phone */
}
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-strong);
  --parts-font: var(--site-font-body);
}

/* the dark theme (the kit's data-parts-theme="dark", by the visitor's clock or their pick): the page in the kit's warm
   near black, text near white, rules dark grey, cards and fields a step up; the black header and the near-black
   footer stay as they are, their red stays, red small text lifts to read on the dark, photos keep white plates.
   The vehicle band takes the kit's dark band, since this site leaves the band's tokens to the kit. */
: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-text: #FF6B5E;
  --site-field-bg: #1C1A18;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-placeholder: #EBE6E0;
  --site-grid: #5A534C;
  --site-stripe: #1C1A18;
  --site-track: #3D3833;
}

@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.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: their red Oswald capitals ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 49px; padding: 0 28px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 0; border-radius: var(--site-radius);
  font: 500 14px/1 var(--site-font-button); letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.cl-btn:hover { background: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: their black bar of 92px (name, shop by vehicle, search, account, cart), a 1px line, the 48px menu ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-ink); color: var(--site-ink-fg); }
.cl-hd__top { display: flex; align-items: center; height: 93px; padding: 0 32px; border-bottom: 1px solid var(--site-foot-line); }
.cl-hd__logo { flex: none; width: 328px; font: 500 38px/1 var(--site-font-heading); letter-spacing: 2px; text-transform: uppercase; color: var(--site-ink-fg); }
.cl-hd__logo b { color: var(--site-accent); font-weight: inherit; }
.cl-hd__vehicle {
  flex: none; display: flex; align-items: center; gap: 12px; width: 284px; height: 44px; margin: 0 8px 0 24px; padding: 0 13px;
  background: var(--site-field-bg); color: var(--site-fg); border: 1px solid var(--site-ink); border-radius: var(--site-radius);
  font: 400 16px/1 var(--site-font-heading); text-transform: uppercase;
}
.cl-hd__vehicle span { flex: 1; }
.cl-hd__find { position: relative; flex: 1; min-width: 0; }
.cl-hd__search { display: flex; width: 100%; height: 44px; background: var(--site-field-bg); border: 1px solid var(--site-ink); border-radius: var(--site-radius); }
.cl-hd__q { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: var(--site-radius); background: transparent; color: var(--site-fg); font: 400 16px/1 var(--site-font-body); outline: 0; }
.cl-hd__q::placeholder { color: var(--site-placeholder); }
.cl-hd__q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.cl-hd__go { flex: none; width: 64px; display: flex; align-items: center; justify-content: center; color: var(--site-fg); }
.cl-hd__icons { flex: none; display: flex; align-items: center; gap: 31px; margin-left: 93px; }
.cl-hd__icon { position: relative; display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; color: var(--site-ink-fg); }
.cl-hd__icon:hover { color: var(--site-accent); }
.cl-hd__cart-count {
  position: absolute; top: -2px; right: -10px; min-width: 18px; padding: 0 4px;
  font: 600 13px/18px var(--site-font-body); text-align: center; border-radius: var(--site-radius);
  background: var(--site-accent); color: var(--site-accent-fg);
}
.cl-hd__cart-count:empty { display: none; }
.cl-hd__toggle { display: none; }
.cl-hd__nav { height: 48px; padding: 0 32px; }
.cl-hd__list { display: flex; align-items: center; height: 100%; gap: 0 26px; }
.cl-hd__link { display: flex; align-items: center; gap: 8px; min-height: 40px; font: 400 18px/24px var(--site-font-body); color: var(--site-ink-fg); }
.cl-hd__link svg { width: 8px; height: 13px; }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }
/* the kit's theme switch (shown at night only), between the account and the cart, in the header's white */
.parts-theme-switch { color: var(--site-ink-fg); }
.parts-theme-switch:hover { color: var(--site-accent); }

/* the search's suggestions (partials/suggest.html, swapped in by htmx; fm-site.js the keys): an opaque white panel
   under the box, square, black text, every row at least 40px, nothing under 13px */
.fm-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 60; max-height: min(70vh, 640px); overflow-y: auto;
  background: var(--site-bg); color: var(--site-fg); border: 1px solid var(--site-ink); border-radius: var(--site-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); text-align: left; font: 400 14px/1.35 var(--site-font-body);
}
.fm-suggest-section + .fm-suggest-section { border-top: 1px solid var(--site-line); }
.fm-suggest-title { padding: 10px 14px 4px; font: 600 13px/18px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--site-fg); }
.fm-suggest-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; color: var(--site-fg); text-decoration: none; cursor: pointer; }
.fm-suggest-item.is-active, .fm-suggest-item:hover { background: var(--site-band); }
.fm-suggest-item b { font-weight: 700; }
.fm-suggest-glyph { flex: none; }
.fm-suggest-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.fm-suggest-text > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-suggest-note, .fm-suggest-count, .fm-suggest-fit { font-size: 13px; color: var(--site-fg); }
.fm-suggest-term .fm-suggest-note, .fm-suggest-search .fm-suggest-note, .fm-suggest-count { margin-left: auto; }
.fm-suggest-thumb { flex: none; width: 44px; height: 44px; object-fit: contain; background: var(--site-plate); border: 1px solid var(--site-line); border-radius: var(--site-radius); }
.fm-suggest-thumb--blank { display: block; background: var(--site-card); }
.fm-suggest-price { margin-left: auto; font-weight: 700; white-space: nowrap; }
.fm-suggest-all { justify-content: center; border-top: 1px solid var(--site-line); font-weight: 700; }
.fm-suggest-empty { padding: 14px; font-size: 14px; }

/* ---------- footer: their near-black band: the centred call, the columns, the social row, the copyright ---------- */
.cl-ft { background: var(--site-foot-bg); color: var(--site-ink-fg); }
.cl-ft__call { width: 450px; max-width: 100%; margin: 0 auto; padding: 30px 0 0; height: 252px; text-align: center; }
.cl-ft__lead { max-width: 360px; margin: 0 auto; padding-top: 61px; font: 500 20px/30px var(--site-font-heading); text-transform: uppercase; }
.cl-ft__mail {
  display: flex; align-items: center; justify-content: space-between; width: 421px; max-width: 100%; height: 51px; margin: 20px auto 0; padding: 0 6px 0 16px;
  background: var(--site-field-bg); color: var(--site-fg); border-radius: var(--site-radius); font: 400 16px/1 var(--site-font-body);
}
.cl-ft__mail-go { display: flex; align-items: center; height: 39px; padding: 0 16px; background: var(--site-accent); color: var(--site-accent-fg); font: 500 15px/1 var(--site-font-heading); text-transform: uppercase; }
.cl-ft__mail:hover .cl-ft__mail-go { background: var(--site-accent-strong); }
.cl-ft__cols { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1325px; margin: 0 auto; padding: 30px 0 0; height: 268px; }
.cl-ft__col summary { list-style: none; }
.cl-ft__col summary::-webkit-details-marker { display: none; }
.cl-ft__h { display: block; font: 700 13px/20px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--site-ink-fg); }
.cl-ft__chev { display: none; }
.cl-ft__links { margin-top: 15px; }
.cl-ft__links li { height: 29px; font: 400 15px/20px var(--site-font-body); }
.cl-ft__links a { display: inline-flex; align-items: center; height: 100%; }
.cl-ft__links a:hover { color: var(--site-accent); }
.cl-ft__small { max-width: 1325px; margin: 0 auto; padding: 0 16px 16px; min-height: 77px; text-align: center; font: 400 13px/18px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--site-ink-fg); }
.cl-ft__small a[href^="mailto:"] { text-transform: none; }

@media (min-width: 980px) and (max-width: 1356.98px) { .cl-ft__cols { padding-left: 16px; padding-right: 16px; } }

/* ---------- phones: their 390px stage ---------- */
@media (max-width: 979.98px) {
  .cl-hd { display: grid; grid-template-columns: 1fr; }
  .cl-hd__top { display: grid; grid-template-columns: 96px 1fr 96px; grid-template-rows: 65px 59px; height: auto; padding: 0 12px; border: 0; }
  .cl-hd--vehicle .cl-hd__top { grid-template-rows: 65px 59px 60px; }
  .cl-hd__toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 2px; color: var(--site-ink-fg); grid-column: 1; grid-row: 1; }
  .cl-hd__logo { grid-column: 2; grid-row: 1; display: flex; align-items: center; width: auto; min-height: 44px; justify-self: center; font-size: 28px; letter-spacing: 1px; }
  .cl-hd__icons { grid-column: 3; grid-row: 1; justify-self: end; gap: 8px; margin: 0; }
  .cl-hd__icon { min-width: 44px; height: 44px; }
  .cl-hd__cart-count { right: -2px; }
  /* at night the switch joins the account and the cart: the name moves beside the bars so the three icons fit */
  :root[data-parts-night] .cl-hd__top { grid-template-columns: 44px 1fr auto; }
  :root[data-parts-night] .cl-hd__logo { justify-self: start; margin-left: 8px; }
  :root[data-parts-night] .cl-hd__icons { gap: 0; }
  :root[data-parts-night] .cl-hd__icon { min-width: 40px; }
  .cl-hd__find { grid-column: 1 / -1; grid-row: 2; align-self: start; margin: 0 3px; }
  .cl-hd__go { width: 44px; }
  .cl-hd__vehicle { grid-column: 1 / -1; grid-row: 3; width: auto; height: 60px; margin: 0 -12px; padding: 0 30px; border: 0; }
  .cl-hd__vehicle span { flex: 1; font-size: 16px; }
  .cl-hd__nav { order: 2; height: auto; padding: 0 16px; background: var(--site-ink); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; align-items: stretch; height: auto; }
  .cl-hd__link { min-height: 48px; border-top: 1px solid var(--site-ink-line); }

  .cl-ft__call { width: auto; height: 226px; padding: 30px 16px 0; }
  .cl-ft__mail { width: 100%; height: 54px; }
  .cl-ft__cols { grid-template-columns: 1fr; height: auto; padding: 10px 16px 10px; }
  .cl-ft__col { border-bottom: 1px solid var(--site-ink-fg); }
  .cl-ft__h { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-size: 18px; line-height: 24px; }
  .cl-ft__chev { display: block; width: 12px; }
  .cl-ft__col[open] .cl-ft__chev { transform: rotate(180deg); }
  .cl-ft__links { margin: 0 0 12px; }
  .cl-ft__links li { height: 44px; font-size: 15px; line-height: 44px; }
  .cl-ft__links a { min-width: 44px; }
  .cl-owner { display: inline-block; padding: 11px 0; margin: -11px 0; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { max-width: var(--site-max); margin: 0 auto; padding: 48px 16px 96px; text-align: center; }
.cl-404__h { display: inline-block; padding-left: 9px; border-left: 5px solid var(--site-accent); font: 600 32px/44px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; }
.cl-404__p { margin-top: 16px; font: 400 16px/24px var(--site-font-body); }
.cl-404__home { margin-top: 32px; }
/* a phone: the H1 at the landing pages' size (Greg 2026-10-29), the band close under the home button */
@media (max-width: 979.98px) {
  .cl-404 { padding: 32px 16px 40px; }
  .cl-404__h { font-size: 38px; line-height: 44px; }
}

/* 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 dark theme's seams: the header's fields and the suggestions ruled in the dark grey, where black on black would vanish */
:root[data-parts-theme="dark"] .cl-hd__search,
:root[data-parts-theme="dark"] .cl-hd__vehicle,
:root[data-parts-theme="dark"] .fm-suggest { border-color: var(--site-line); }
:root[data-parts-theme="dark"] .cl-ft__mail { box-shadow: inset 0 0 0 1px var(--site-line); }

}