/* cl-site.css: DBA Brakes' tokens, fonts, reset and chrome (the red announcement line, the black header with its
   menu, search and cart, the white footer, the primary button), on every page.
   Written by hand from the capture's measurements of dbabrakes.com (review/pages/home.json): a 1440 desktop and
   a 390 phone stage, the menu folding behind its toggle below 980px.
   The 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 --parts-accent, --parts-accent-strong
   and --parts-font from here; no rule names a kit class. */
@layer base, kit, site;

/* the client's faces (static/fonts/FONTS.md): Industry is drawn at 700 over its one face, as their theme does */
@font-face { font-family: "din-regular"; src: url("fonts/din-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Industry-Bold-Italic"; src: url("fonts/industry-bold-italic-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Industry-Demi-Italic"; src: url("fonts/industry-demiitalic.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("fonts/arimo-n4-a7efb558ca22d2002248bbe6f302a98edee38e35.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("fonts/arimo-i4-438ddb21a1b98c7230698d70dc1a21df235701b2.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("fonts/arimo-n6-9c18b0befd86597f319b7d7f925727d04c262b32.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("fonts/arimo-i6-f0bf3dae51f72fa5b2cefdfe865a6fbb7701a14c.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("fonts/arimo-n7-1d2d0638e6a1228d86beb0e10006e3280ccb2d04.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #737373;
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #ED1C24;
  --site-accent-strong: #B8141A;
  --site-accent-fg: #FFFFFF;
  --site-dark: #000000;
  --site-dark-fg: #FFFFFF;
  --site-media: #0F0F0F;
  --site-rule: #E8E8E1;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #111111;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #ED1C24;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #4D4D4D;
  --site-plate: #FFFFFF;     /* behind a product photo: white in both themes */
  --site-on-plate: #000000;  /* words on a white fill (a slide's button on hover) */

  /* fonts */
  --site-font-body: "din-regular", "Arimo", Arial, "Helvetica Neue", sans-serif;
  --site-font-heading: "Industry-Bold-Italic", "Arial Black", Arial, sans-serif;
  --site-font-label: "Industry-Demi-Italic", var(--site-font-heading);
  --site-font-button: var(--site-font-body);

  /* shape and layout: their page width is 1360 inside 40px gutters, 17px on the phone */
  --site-radius: 0;
  --site-max: 1360px;
  --site-gutter: 40px;

  --mx: calc(100vw / 390);
  --u: 1px;
}
/* the kit's shop pages and vehicle band: the brand tokens a site owns, from the tokens above (storefront-kit ADR 0007) */
: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 or the shopper's switch): the white
   page and footer turn the kit's warm near black, the text near white, the rules dark grey; the black header,
   the red line and the photo bands stay; the black button turns near white so it reads on the dark, the red is
   lifted a touch where the cart sets it as text, and a hover lifts the red toward white */
: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: #ED1C24;
  --site-accent-strong: color-mix(in srgb, #ED1C24 78%, #fff);
  --site-accent-fg: #FFFFFF;
  --site-dark: #000000;
  --site-dark-fg: #FFFFFF;
  --site-media: #0F0F0F;
  --site-rule: #3D3833;
  --site-field-bg: #1C1A18;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #ED1C24;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --cs-accent: #F0414F;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); --site-gutter: 17px; }
}

@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 15.3px/1.4 var(--site-font-body);
  letter-spacing: -0.45px;
  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; letter-spacing: inherit; }
input, select, textarea { font-size: 16px; }
[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 black Subscribe, red on hover ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 1px solid var(--site-button-bg); border-radius: var(--site-radius);
  font: 700 14px/1 var(--site-font-button); letter-spacing: 4.2px; text-transform: uppercase; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.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-fg); outline-offset: 2px; }

/* ---------- the announcement line ---------- */
.cl-ann { background: var(--site-accent); color: var(--site-accent-fg); text-align: center; padding: 10px var(--site-gutter); }
.cl-ann a { display: block; font: 700 13.77px/19.3px var(--site-font-heading); letter-spacing: 2.754px; text-transform: uppercase; }

/* ---------- header: logo, menu, search, cart ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); color: var(--site-dark-fg); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cl-hd__in { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 20px var(--site-gutter) 20.3px;
  min-height: 166.6px; display: grid; grid-template-columns: 200px 1fr 200px; align-items: center; }
.cl-hd__logo { display: block; width: 200px; padding: 10px 0; }
.cl-hd__logo img { width: 200px; height: auto; }
.cl-hd__logo { padding-bottom: 0; }
.cl-hd__tag { display: block; margin-top: 6px; color: var(--site-dark-fg); font: 700 14px/1 var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; text-align: center; white-space: nowrap; }
.cl-hd__nav { min-width: 0; }
.cl-hd__list { display: flex; flex-wrap: wrap; justify-content: center; }
.cl-hd__link { display: block; padding: 7.5px 16px; font: 700 18px/18px var(--site-font-heading); letter-spacing: normal; text-transform: uppercase; color: var(--site-dark-fg); }
.cl-hd__link span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.3s ease; padding-bottom: 2px; }
.cl-hd__link:hover span, .cl-hd__link.is-current span { background-size: 100% 2px; }
.cl-hd__icons { display: flex; justify-content: flex-end; align-items: center; }
.cl-hd__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 43px; color: var(--site-dark-fg); }
.cl-hd__icon:hover { color: var(--site-accent); }
.cl-hd__icon svg { overflow: visible; }
.cl-hd__toggle { display: none; }
.cl-hd__cart-count { position: absolute; top: 4px; right: 4px; min-width: 18px; padding: 0 4px; font: 700 13px/18px var(--site-font-body); letter-spacing: 0; text-align: center;
  border-radius: 9px; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }

/* the search row the magnifier opens, under the bar */
.cl-hd__search { background: var(--site-dark); border-top: 1px solid rgba(255, 255, 255, 0.1); }
.cl-js .cl-hd__search:not(.is-open) { display: none; }
.cl-hd__search-in { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 16px var(--site-gutter); display: flex; gap: 0; }
.cl-hd__search input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--site-rule); border-radius: var(--site-radius); background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-hd__search .cl-btn { min-height: 44px; }

/* ---------- footer ---------- */
.cl-ft { background: var(--site-bg); color: var(--site-fg); border-top: 1px solid var(--site-rule); }
.cl-ft__in { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 60px var(--site-gutter) 90px;
  display: grid; grid-template-columns: 323.5fr 323.5fr 213fr; column-gap: 22px; align-items: start; }
.cl-ft__h { font: 700 14.4px/14.4px var(--site-font-heading); letter-spacing: 4.32px; text-transform: uppercase; text-align: left; width: 100%; display: flex; justify-content: space-between; align-items: center; }
.cl-ft__h svg { display: none; }
.cl-ft__body { padding-top: 20px; }
.cl-ft__list li { margin-bottom: 3.8px; }
.cl-ft__list a { display: block; padding: 4px 0; font: 400 15.3px/21.42px var(--site-font-body); }
.cl-ft__list a:hover, .cl-ft__mail:hover { text-decoration: underline; }
.cl-ft__small { grid-column: 1 / -1; margin-top: 30px; font: 400 15.3px/21.42px var(--site-font-body); }

/* ---------- phones: the menu behind its toggle, the footer's columns folding (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-ann { padding: 10px var(--site-gutter); }
  .cl-ann a { font-size: 13px; line-height: 17px; letter-spacing: 2.43px; }
  .cl-hd__in { grid-template-columns: 180px 1fr; min-height: 129px; padding: 7px var(--site-gutter) 6px; }
  .cl-hd__logo { width: 180px; padding: 10px 0; }
  .cl-hd__logo img { width: 180px; }
  .cl-hd__logo { padding-bottom: 0; }
  .cl-hd__tag { font-size: 13px; }
  .cl-hd__icon { width: 41px; height: 45px; }
  .cl-hd__toggle { display: inline-flex; }
  .cl-hd__nav { grid-column: 1 / -1; grid-row: 2; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__nav.is-open { background: var(--site-dark); margin: 0 calc(-1 * var(--site-gutter)); padding: 0 var(--site-gutter) 12px; }
  .cl-hd__list { flex-direction: column; }
  .cl-hd__link { padding: 12px 0; font-size: 22px; line-height: 24px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
  .cl-hd__search-in { padding: 12px var(--site-gutter); }

  .cl-ft__in { display: block; padding: 0 var(--site-gutter) 45px; }
  .cl-ft__col { border-bottom: 1px solid var(--site-rule); }
  .cl-ft__h { min-height: 48.5px; justify-content: center; position: relative; font-size: 13.25px; line-height: 18.55px; letter-spacing: 3.97px; }
  .cl-ft__h svg { display: block; position: absolute; right: 0; top: 50%; margin-top: -6px; }
  .cl-js .cl-ft__col:not(.is-open) .cl-ft__body { display: none; }
  .cl-ft__body { padding: 0 0 16px; text-align: center; }
  .cl-ft__small { margin-top: 0; padding-top: 15px; text-align: center; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404__home { text-align: center; padding: 0 20px 80px; }

/* 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 night switch (parts/theme_switch.html, between the search and the cart) in the bar's white, red on
   hover like the icons beside it, centred in a slot as wide as theirs; outside the layers and a step more specific,
   since the kit's head block styles it unlayered after this sheet */
.cl-hd__icons .parts-theme-switch { margin: 0 6px; }
.cl-hd__icons .parts-theme-switch:hover { color: var(--site-accent); }
@media (max-width: 979.98px) {
  .cl-hd__icons .parts-theme-switch { margin: 0; }
}
/* with the switch shown (the night hours) the four icons need 163px: under 400px the logo gives up 20px so the bar
   keeps its gutter */
@media (max-width: 399.98px) {
  :root[data-parts-night] .cl-hd__in { grid-template-columns: 160px 1fr; }
  :root[data-parts-night] .cl-hd__logo, :root[data-parts-night] .cl-hd__logo img { width: 160px; }
}