/* cl-site.css: baerbrakes.ca's tokens, fonts, reset and chrome (header, menu, footer, the primary button), on every
   page, in Baer's look: white, black and their red, Oswald headings over Open Sans text, square boxes.
   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 brand colour and font from the --parts-* tokens alone: no rule here names a kit class.
   From 980px the desktop layout; below it Baer's phone layout (stage 390). */
@layer base, kit, site;

/* Oswald and Open Sans (SIL Open Font License, Google Fonts' latin subsets, static/fonts/FONTS.md) */
@font-face { font-family: "Oswald"; src: url("fonts/oswald-latin.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-latin.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-italic-latin.woff2") format("woff2"); font-weight: 300 800; font-style: italic; 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: #E1251B;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #E1251B;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #000000;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #4D4D4D;
  --site-dark: #141414;
  --site-tile: #F7F7F7;
  /* the chrome's own shades, one token each so the night block below can turn them */
  --site-hairline: #E7E7E7;     /* the rule under the header's bar */
  --site-rule: #777777;         /* the search button's left rule */
  --site-placeholder: #4D4D4D;  /* the search box's hint */
  --site-on-dark: #FFFFFF;      /* text on the footer and the photo hero, dark in both themes */
  --site-ft-rule: #808080;      /* the phone footer's rules */
  --site-black: #000000;        /* the footer mail button's hover */
  --site-photo: #FFFFFF;        /* the plate under a product photo: white in both themes */

  /* 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;
  --site-shadow: 0 0 4px 0.5px rgba(0, 0, 0, 0.15);
}
/* 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: #B81C14;
  --parts-font: var(--site-font-body);
}
/* the night (the kit's head block sets data-parts-theme="dark" on <html>, Site(dark="night")): every colour token
   above turned for a dark page in the kit's family (storefront-kit static/parts/tokens.css): a warm near black page,
   near-white text, dark grey rules, cards a step up, Baer's red lifted a touch so it reads as text on the dark.
   The footer stays black, the hero stays its photo, product photos keep white plates. */
: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: #EB3A2F;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-button-bg: #EB3A2F;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #B81C14;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-dark: #000000;
  --site-tile: #1C1A18;
  --site-hairline: #3D3833;
  --site-rule: #6B635B;
  --site-placeholder: #DDD7CF;
  --site-shadow: 0 0 4px 0.5px rgba(0, 0, 0, 0.6);
  --parts-accent-strong: color-mix(in srgb, var(--parts-accent) 78%, #FFFFFF);
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
}

@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: Baer's 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-accent); color: var(--site-accent-fg); border: 0; border-radius: var(--site-radius);
  font: 500 14px/1 var(--site-font-button); letter-spacing: 1px; text-transform: uppercase; cursor: pointer;
  transition: background-color 0.2s ease;
}
.cl-btn:hover { background: var(--site-button-hover-bg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: the Orbital Parts mark, search and cart over a hairline, the menu row, the red line ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); }
.cl-hd__bar { display: flex; align-items: center; height: 93px; padding: 0 32px; border-bottom: 1px solid var(--site-hairline); }
.cl-hd__toggle { display: none; }
.cl-hd__logo { flex: none; width: 275px; }
/* the mark in the 275px slot Baer's logo had, at its 52px height: the light one by day and the dark one at night */
.cl-hd__logo img { display: block; width: auto; height: 52px; }
.cl-hd__logo img.cl-hd__mark--dark { display: none; }
:root[data-parts-theme="dark"] .cl-hd__logo img.cl-hd__mark--light { display: none; }
:root[data-parts-theme="dark"] .cl-hd__logo img.cl-hd__mark--dark { display: block; }
.cl-hd__search { flex: none; display: flex; width: 923px; height: 44px; margin-left: 53px; border: 1px solid var(--site-fg); background: var(--site-field-bg); }
.cl-hd__search input {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 0; background: transparent;
  font: 400 16px/1 var(--site-font-body); color: var(--site-fg); -webkit-appearance: none; appearance: none;
}
.cl-hd__search input::placeholder { color: var(--site-placeholder); opacity: 1; }
.cl-hd__search input:focus { outline: none; }
.cl-hd__search:focus-within { outline: 2px solid var(--site-accent); outline-offset: -1px; }
.cl-hd__search button { flex: none; width: 64px; display: grid; place-items: center; border-left: 1px solid var(--site-rule); color: var(--site-fg); }
.cl-hd__cart { position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; color: var(--site-fg); }
.cl-hd__cart:hover { color: var(--site-accent); }
.cl-hd__count {
  position: absolute; top: 0; right: -4px; min-width: 18px; padding: 0 4px;
  font: 700 12px/18px var(--site-font-body); text-align: center; border-radius: 9px; background: var(--site-accent); color: var(--site-accent-fg);
}
.cl-hd__count:empty { display: none; }
.cl-hd__nav { height: 48px; padding: 0 32px; }
.cl-hd__list { display: flex; align-items: center; height: 100%; gap: 0 36px; }
.cl-hd__link { display: block; font: 400 18px/24px var(--site-font-body); color: var(--site-fg); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }
/* the night: the red line under the menu, a photo of a red stripe over a grey fade to white, is drawn as the stripe over a fade to the page */
:root[data-parts-theme="dark"] .cl-hd__line { background: linear-gradient(to bottom, #B0101A 0 27%, #000000 27%, var(--site-bg) 100%); }
.cl-hd__line { height: 28px; background: url("img/site/home/baer-belowheader-redline-desktop-1920x37.jpg") 50% 0 / cover no-repeat; }

/* ---------- footer: near black, Oswald headings, white Open Sans links ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-on-dark); }
.cl-ft__top { display: flex; flex-direction: column; align-items: center; padding: 92px 16px 0; text-align: center; }
.cl-ft__ask { max-width: 360px; font: 500 20px/1.5 var(--site-font-heading); text-transform: uppercase; }
.cl-ft__mail {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 421px; max-width: 100%; height: 51px; margin-top: 50px;
  padding: 0 6px 0 16px; background: var(--site-field-bg); color: var(--site-fg); font: 400 15px/1 var(--site-font-body);
}
.cl-ft__mail-btn { display: grid; place-items: center; height: 38px; padding: 0 14px; background: var(--site-accent); color: var(--site-accent-fg); font: 500 14px/1 var(--site-font-heading); text-transform: uppercase; }
.cl-ft__mail:hover .cl-ft__mail-btn { background: var(--site-black); }
.cl-ft__cols { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1324px; margin: 60px auto 0; padding: 0 0 47px; }
.cl-ft__col summary, .cl-ft__col h2 { display: block; margin-bottom: 14px; font: 700 13px/20px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: var(--site-on-dark); list-style: none; pointer-events: none; }
.cl-ft__col summary::-webkit-details-marker { display: none; }
.cl-ft__col li { padding-bottom: 9px; }
.cl-ft__col a { font: 400 15px/20px var(--site-font-body); color: var(--site-on-dark); }
.cl-ft__col a:hover { color: var(--site-accent); }
.cl-ft__experts a { font-size: 16px; font-weight: 600; }
.cl-ft__copy { padding: 30px 16px 31px; font: 400 13px/16px var(--site-font-body); letter-spacing: 1px; text-transform: uppercase; text-align: center; color: var(--site-on-dark); }

/* ---------- phones: toggle, centred mark and cart; the search under them; the menu as an opaque panel ---------- */
@media (max-width: 979.98px) {
  .cl-hd__bar { flex-wrap: wrap; height: auto; padding: 0 12px 15px; border-bottom: 0; }
  .cl-hd__toggle { display: grid; place-items: center; width: 44px; height: 65px; color: var(--site-fg); }
  .cl-hd__logo { width: auto; margin: 0 auto; }
  .cl-hd__logo img { height: 32px; }
  .cl-hd__cart { margin-left: 0; height: 65px; }
  .cl-hd__search { order: 3; width: 100%; margin: 0 3px; }
  .cl-hd__search button { width: 44px; }
  .cl-hd__nav { position: absolute; top: 65px; left: 0; right: 0; height: auto; padding: 0 16px; background: var(--site-bg); border-top: 1px solid var(--site-line); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; align-items: stretch; }
  .cl-hd__link { padding: 12px 0; border-bottom: 1px solid var(--site-line); }
  .cl-hd__list li:last-child .cl-hd__link { border-bottom: 0; }
  .cl-hd__line { height: 14px; background-image: url("img/site/home/baer-belowheader-redline-mobile-1000x37.jpg"); }

  .cl-ft__top { padding: 40px 16px 24px; }
  .cl-ft__ask { max-width: none; font-size: 18px; }
  .cl-ft__mail { width: 100%; height: 54px; }
  .cl-ft__cols { display: flex; flex-direction: column; margin-top: 0; padding: 5px 0 0; }
  .cl-ft__experts { display: none; } /* the address the mail box above already gives (rule 8) */
  .cl-ft__col summary { position: relative; margin: 0; padding: 14px 16px; font: 700 18px/24px var(--site-font-heading); padding-top: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--site-ft-rule); pointer-events: auto; cursor: pointer; }
  .cl-ft__col summary::after { content: "+"; position: absolute; right: 16px; font-weight: 400; }
  .cl-ft__col[open] summary::after { content: "-"; }
  .cl-ft__col ul { padding: 4px 16px 8px; }
  .cl-ft__col li { padding-bottom: 0; }
  .cl-ft__col a, .cl-owner { display: inline-flex; align-items: center; min-height: 40px; }
}

/* 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 404 (templates/404.html) ---------- */
.cl-404 { max-width: var(--site-max); margin: 0 auto; padding: 80px 16px 100px; text-align: center; }
.cl-404 h1 { font: 500 42px/1.2 var(--site-font-heading); text-transform: uppercase; }
.cl-404 p { margin-top: 16px; font-size: 16px; }
.cl-404 .cl-btn { margin-top: 28px; }

/* ---------- the vehicle pickers (PICKER-BRIEF.md, Greg 2026-10-30): templates/search/_row.html, base.html's band
   block, static/pp-row.js. Under 980px a landing page asks in one row under its H1 (the band at the top is hidden
   there), the kit's listings put the band behind a 48px bar, and a product page names the picked vehicle in one
   line; from 980 the band is at the top as the kit draws it. No rule here names a kit class. ---------- */
.pp-row, .pp-bar { display: none; }
.pp-car { max-width: var(--site-max); margin: 0 auto; padding: 4px 24px; border-bottom: 1px solid var(--site-line); font: 400 16px/1.3 var(--site-font-body); color: var(--site-fg); }
.pp-car a { display: inline-flex; align-items: center; min-height: 40px; color: inherit; font-weight: 700; text-decoration: underline; }

@media (max-width: 979.98px) {
  .pp-landing .pp-band { display: none; }
  .pp-car { padding: 2px 16px; }

  /* the row: one line, 44px controls with 8px over and under it; the Submodel, when the kit asks one, on a line after Go */
  .pp-row { display: block; margin: 8px 0; }
  .pp-row__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 0; }
  .pp-row__form[hidden] { display: none; }
  .pp-row__name { flex: 0 1 auto; min-width: 0; overflow: hidden; font: 700 16px/1.2 var(--site-font-body); white-space: nowrap; text-overflow: ellipsis; }
  .pp-row__sel {
    flex: 1 1 0; min-width: 0; height: 44px; margin: 0; padding: 0 22px 0 8px;
    border: 2px solid var(--site-fg); border-radius: var(--site-radius); color: var(--site-fg); font: 400 16px/1.2 var(--site-font-body);
    background: var(--site-field-bg) no-repeat; -webkit-appearance: none; appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%; background-size: 5px 5px;
  }
  .pp-row__sel:disabled { border-style: dashed; color: var(--site-fg); opacity: 1; cursor: default; }
  .pp-row__sel--year { flex: 0 0 74px; }
  .pp-row__form--year .pp-row__sel, .pp-row__form--model .pp-row__sel--year { flex: 1 1 0; }
  .pp-row__form--model .pp-row__sel--model { flex: 1.5 1 0; }
  .pp-row__go {
    flex: none; min-width: 48px; height: 44px; margin: 0; padding: 0 10px; border: 0; border-radius: var(--site-radius);
    background: var(--site-accent); color: var(--site-accent-fg); font: 700 16px/1 var(--site-font-button); letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer;
  }
  .pp-row__go:hover { background: var(--site-fg); color: var(--site-bg); }
  .pp-row__sub { flex: 1 1 100%; display: flex; }
  .pp-row__sub[hidden] { display: none; }
  .pp-row__car { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 44px; font: 400 16px/1.25 var(--site-font-body); }
  .pp-row__change { min-height: 44px; margin: 0; padding: 0 4px; background: none; border: 0; color: inherit; font: 700 16px/1 var(--site-font-body); text-decoration: underline; cursor: pointer; }
  .pp-row__car + .pp-row__form { margin-top: 4px; }
  .pp-row :focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

  /* the kit's listings: the bar, the band under it while open */
  .pp-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 48px; margin: 0; padding: 0 16px;
    background: var(--site-band); color: var(--site-fg); border: 0; border-bottom: 1px solid var(--site-line); border-radius: 0;
    font: 700 16px/1 var(--site-font-body); text-align: left; cursor: pointer;
  }
  .pp-bar__label { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .pp-bar__chev { flex: none; width: 9px; height: 9px; margin: -5px 4px 0 0; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .pp-bandbar.is-open .pp-bar__chev { margin-top: 4px; transform: rotate(225deg); }
  .pp-bandbar:not(.is-open) .pp-bandbar__band { display: none; }
  .pp-bar:focus-visible { outline: 2px solid var(--site-accent); outline-offset: -4px; }
}

}

/* the kit's theme switch (kit 0.10, shown at night only), before the cart. Outside the layers, so these win over the
   kit's own rule. At night the search gives up the switch's width, so the cart keeps its own at 1280. */
.cl-hd .parts-theme-switch { flex: none; margin-left: auto; }
.cl-hd .parts-theme-switch:hover { color: var(--site-accent); }
:root[data-parts-night] .cl-hd__search { flex-shrink: 1; min-width: 0; }
:root[data-parts-night] .cl-hd__cart { flex: none; margin-left: 0; }
@media (max-width: 979.98px) {
  .cl-hd .parts-theme-switch { margin-left: 0; height: 65px; }
  /* the toggle's side matches the switch and cart, so the mark stays in the middle */
  :root[data-parts-night] .cl-hd__toggle { margin-right: 40px; }
}