/* cl-site.css: BAKFlip's tokens, fonts, reset and chrome (the two-row header, the footer, the primary button, the
   404), on every page. Built by hand from BAK's logo, since bakflip.com redirects to realtruck.com behind a bot check
   and nothing could be captured: the logo's own red #EE192D and near-black #231F20 on white, Barlow for every word.
   cl-shop.css reads only these tokens, so the title band, the cart and the checkout follow.

   The cascade (the kit's static/parts/tokens.css): `@layer base, kit, site;` below sets the order; the tokens sit
   on :root outside any layer, the reset in @layer base (under the kit's rules), every other rule in @layer site.
   The kit's shop pages take the brand colour and font from the 3 --parts-* tokens below alone, and the vehicle
   band its bar colours from the --parts-band-* ones: no rule here names a kit class.

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

/* Barlow (static/fonts/FONTS.md, SIL OFL 1.1): a plain strong grotesque for text, headings and buttons */
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-700-latin.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* colours: BAK's logo, white, its near-black and its red; text is full contrast everywhere */
  --site-bg: #FFFFFF;
  --site-fg: #231F20;
  --site-muted: #231F20;
  --site-line: #D9D9D9;
  --site-band: #F2F2F2;
  --site-card: #F6F6F6;
  --site-accent: #EE192D;
  --site-accent-strong: #C40F21;
  --site-accent-fg: #FFFFFF;
  --site-accent-text: var(--site-accent);  /* the red as words or an icon on hover: lifted in the dark to read */
  --site-dark: #231F20;
  --site-dark-fg: #FFFFFF;
  --site-dark-line: #4A4546;               /* the rule under the black headings row */
  --site-field-bg: #FFFFFF;
  --site-button-bg: #231F20;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #EE192D;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #231F20;
  --site-plate: #FFFFFF;                   /* under a product photo: white in both themes */

  /* fonts */
  --site-font-body: "Barlow", "Helvetica Neue", Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);

  /* shape and layout: square boxes, one radius site-wide */
  --site-radius: 0;
  --site-max: 1280px;

  /* the phone stage unit cl-shop.css's title band is written in */
  --mx: calc(100vw / 320);
  --u: 1px;
}
/* the kit's shop pages and vehicle band (storefront_kit/static/parts/tokens.css): only the brand tokens a site
   owns. Every other --parts-* default is the kit's counter look (storefront-kit ADR 0007): never set one here. */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-strong);
  --parts-font: var(--site-font-body);
  /* the vehicle band: BAK's black bar over a red rule */
  --parts-band-bg: var(--site-dark);
  --parts-band-ink: var(--site-dark-fg);
  --parts-band-edge: var(--site-accent);
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}
/* the dark theme (the kit's data-parts-theme="dark" on <html>: Site(dark="night") sets it from 21:30 to 04:30 or on the
   shopper's pick): the white bar and the page turn the kit's warm near black, words near white, rules a dark grey, the
   cart's cards and summary a step up. BAK's black headings row, the band and the footer stay black, the red stays for
   fills and lifts for words. The black buttons turn near white with dark words, red on hover as by day. Photos keep
   white plates. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #F6F3EF;
  --site-line: #3D3833;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-accent: #EE192D;
  --site-accent-strong: #F23A4B;
  --site-accent-fg: #FFFFFF;
  --site-accent-text: #FF5A66;
  --site-dark: #231F20;
  --site-dark-fg: #FFFFFF;
  --site-dark-line: #4A4546;
  --site-field-bg: #1C1A18;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #EE192D;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #F6F3EF;
  --site-plate: #FFFFFF;
  --parts-band-bg: #231F20;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #EE192D;
}

@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; }
[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: black capitals, red on hover ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 0; border-radius: var(--site-radius);
  font: 700 16px/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-accent); outline-offset: 2px; }

/* ---------- the header, row 1: the logo, the part search, the cart ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); }
.cl-hd__bar { max-width: var(--site-max); height: 84px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: auto minmax(0, 560px) auto; justify-content: space-between; align-items: center; gap: 32px; }
.cl-hd__name { display: flex; align-items: center; gap: 14px; min-height: 40px; color: var(--site-fg); white-space: nowrap; }
.cl-hd__logo { width: auto; height: 56px; }
.cl-hd__search { display: flex; width: 100%; height: 46px; border: 2px solid var(--site-fg); background: var(--site-field-bg); }
.cl-hd__search input { flex: 1; min-width: 0; padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-hd__search input::placeholder { color: var(--site-fg); opacity: 1; }
.cl-hd__search input:focus { outline: none; }
.cl-hd__search:focus-within { border-color: var(--site-accent); }
.cl-hd__search button { flex: none; width: 46px; display: grid; place-items: center; background: var(--site-fg); color: var(--site-bg); }
.cl-hd__search button:hover { background: var(--site-accent); }
.cl-hd__icons { display: flex; align-items: center; gap: 4px; }
.cl-hd__cart { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; color: var(--site-fg); }
.cl-hd__cart:hover { color: var(--site-accent-text); }
.cl-hd__cart .fm-icon { overflow: visible; }
.cl-hd__count { position: absolute; top: 2px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--site-accent); color: var(--site-accent-fg); font: 700 13px/20px var(--site-font-body); text-align: center; }
.cl-hd__count:empty { display: none; }
.cl-hd :is(a, button):focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

/* ---------- the header, row 2: our tree's headings on BAK's black ---------- */
.cl-nav { background: var(--site-dark); border-bottom: 1px solid var(--site-dark-line); }
.cl-nav__list { max-width: var(--site-max); margin: 0 auto; padding: 0 24px; display: flex; gap: 40px; height: 48px; }
.cl-nav__list > li { display: flex; }
.cl-nav__link { display: flex; align-items: center; height: 100%; border-top: 4px solid transparent; border-bottom: 4px solid transparent; color: var(--site-dark-fg); font: 700 16px/1 var(--site-font-body); letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; }
.cl-nav__link:hover, .cl-nav__link.is-current { border-bottom-color: var(--site-accent); }
.cl-nav__link:focus-visible { outline: 2px solid var(--site-dark-fg); outline-offset: -2px; }

/* ---------- the footer: BAK's black, white type ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-dark-fg); border-top: 4px solid var(--site-accent); }
.cl-ft__in { max-width: var(--site-max); margin: 0 auto; padding: 48px 24px 32px; display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; font: 400 16px/1.5 var(--site-font-body); }
.cl-ft__name { font: 700 28px/1.1 var(--site-font-heading); letter-spacing: 0.5px; }
.cl-ft__name a { display: inline-flex; align-items: center; min-height: 40px; color: var(--site-dark-fg); }
.cl-ft__line { max-width: 340px; margin-top: 16px; }
.cl-ft__h { margin-bottom: 8px; font: 700 15px/1.2 var(--site-font-heading); letter-spacing: 1.5px; text-transform: uppercase; }
.cl-ft__links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--site-dark-fg); }
.cl-ft__links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-ft a:focus-visible { outline: 2px solid var(--site-dark-fg); outline-offset: 2px; }
.cl-ft__base { border-top: 1px solid var(--site-dark-fg); }
.cl-ft__copy { max-width: var(--site-max); margin: 0 auto; padding: 18px 24px 24px; font: 400 14px/1.5 var(--site-font-body); }
.cl-ft__copy a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--site-dark-fg); }

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

/* the footer's trademark line: "owner" links the brand's owner 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: the bar keeps the logo and the cart, the search takes its own row ---------- */
@media (max-width: 979.98px) {
  .cl-hd__bar { height: auto; padding: 8px 16px 12px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cart" "search search"; gap: 8px 12px; }
  .cl-hd__name { grid-area: name; gap: 10px; min-width: 0; }
  .cl-hd__logo { height: 44px; }
  .cl-hd__cart, .cl-hd__icons { grid-area: cart; }
  .cl-hd__icons { gap: 0; }
  .cl-hd__search { grid-area: search; height: 46px; }
  .cl-nav__list { padding: 0 16px; gap: 28px; height: 44px; }
  .cl-nav__link { font-size: 14px; letter-spacing: 1px; }
  /* the footer a step smaller on a phone (MOBILE-BRIEF rule 4), nothing under 13px */
  .cl-ft__in { grid-template-columns: 1fr 1fr; padding: 32px 16px 20px; gap: 20px 16px; font-size: 15px; }
  .cl-ft__name { font-size: 24px; }
  .cl-ft__h { font-size: 14px; }
  .cl-ft__copy { font-size: 13px; }
  .cl-ft__brand, .cl-ft__col--contact { grid-column: 1 / -1; }
  .cl-ft__copy { padding: 16px 16px 24px; }
}

}

/* the kit's theme switch in the header (partials/header.html, before the cart): the header's ink, BAK's red on hover as
   the cart. Outside the layers, since the kit's head block styles the button unlayered. */
.cl-hd .parts-theme-switch:hover { color: var(--site-accent-text); }