/* cl-site.css: Bully Dog's look on every page - the tokens, Countach, the reset, the header (their near-black
   bar with the name in words, our tree's headings, our part search with its suggestions, the account and the cart,
   then their red strip) and the
   footer (their disclaimer strip, the black band with the contour lines, their columns with our content, the
   red copyright bar). Measured on bullydog.com's home (review/pages/home.json) at 1440 and in the 390 phone stage.

   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 the three --parts-* tokens. */
@layer base, kit, site;

@font-face { font-family: "Countach"; src: url("fonts/countach-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Countach"; src: url("fonts/countach-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Countach"; src: url("fonts/countach-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Countach"; src: url("fonts/countach-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000104;
  --site-muted: #737375;
  --site-line: #D1D1D2;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #CC0000;
  --site-accent-dark: #C20000;
  --site-accent-fg: #FFFFFF;
  --site-dark: #000104;
  --site-dark-fg: #FFFFFF;
  --site-dark-line: #333333;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #CC0000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #000104;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #737375;
  --site-dark-hover: #D1D1D2;     /* a link hovered on the black bar and footer */
  --site-panel: #FFFFFF;          /* the search's suggestions */
  --site-panel-fg: #000000;
  --site-accent-ink: var(--site-accent);  /* the red as words on the page */

  /* fonts: Countach, with a narrow system family behind it */
  --site-font-body: "Countach", "Arial Narrow", "Roboto Condensed", sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1200px;
  --site-gutter: 12px;
}
/* phones: the 16px gutter (a token, so outside any layer: an override in @layer site would lose to this :root) */
@media (max-width: 979.98px) { :root { --site-gutter: 16px; } }
/* the night theme (storefront-kit 0.10.0, Site(dark="night")): the kit's head block sets data-parts-theme="dark" on
   <html> from 21:30 to 04:30 by the shopper's clock, or when the shopper picks it. The near-black header and footer
   and the red strip stay as they are; the white page turns the kit's warm near black, cards a step up, text near
   white, lines dark grey, fields and the suggestions dark with light words, and a red button hovers light where it
   went black. Photos keep white plates. The vehicle band is the kit's own, dark by itself. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-band: #2A2622;
  --site-card: #1C1A18;
  --site-field-bg: #1C1A18;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-panel: #1C1A18;
  --site-panel-fg: #F6F3EF;
  --site-accent-ink: #EE3B3B;
  --parts-accent-strong: #E52E2E;
}
/* 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-accent);
  --parts-font: var(--site-font-body);
}

@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 18px/1.2 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; }
input { font: inherit; }
[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 {

/* ---------- their red button (Shop Now, Add to Cart, Check out) ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 45px; padding: 0 30px;
  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/19px var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.4s ease, border-color 0.4s 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; }

.cl-wrap { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); }

/* ---------- header: the near-black bar, then the red strip ---------- */
.cl-hd { position: relative; z-index: 50; }
.cl-hd__top { background: var(--site-dark); color: var(--site-dark-fg); }
.cl-hd__in { max-width: var(--site-max); margin: 0 auto; padding: 0 var(--site-gutter); height: 82px; display: flex; align-items: center; }
.cl-hd__logo { flex: none; display: flex; }
.cl-hd__logo img, .cl-ft__logo img { width: auto; height: 40px; }  /* the Orbital Parts mark, white letters on the black, 5:1 */
.cl-hd__toggle { display: none; }
.cl-hd__nav { flex: 1; min-width: 0; display: flex; align-items: center; height: 100%; margin-left: 60px; }
.cl-hd__list { display: flex; height: 100%; }
.cl-hd__list li { display: flex; }
.cl-hd__link { display: flex; align-items: center; padding: 0 20px; font: 400 18px/21.6px var(--site-font-body); text-transform: uppercase; color: var(--site-dark-fg); transition: color 0.2s ease, background-color 0.2s ease; }
.cl-hd__link:hover, .cl-hd__link.is-current { background: var(--site-dark-fg); color: var(--site-dark); }
.cl-hd__find { position: relative; flex: none; width: 220px; margin-left: auto; }
.cl-hd__search { display: flex; align-items: center; border-bottom: 1px solid var(--site-dark-fg); }
.cl-hd__q { flex: 1; min-width: 0; height: 36px; padding: 0; background: transparent; border: 0; color: var(--site-dark-fg); font: 300 16px/1 var(--site-font-body); outline: 0; }
.cl-hd__q::placeholder { color: var(--site-dark-fg); opacity: 1; }
.cl-hd__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--site-dark-fg); }
.cl-hd__account { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 80px; margin-left: 16px; color: var(--site-dark-fg); }
.cl-hd__account:hover { color: var(--site-dark-hover); }
.cl-hd__cart { flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 51px; height: 80px; margin-left: 4px; color: var(--site-dark-fg); }
.cl-hd__cart:hover { color: var(--site-dark-hover); }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: 21px; right: 6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--site-dark-fg); color: var(--site-dark); font: 300 12px/17px var(--site-font-body); text-align: center; }
.cl-hd__cart-count:empty { display: none; }
/* the search's suggestions (partials/suggest.html, swapped in by htmx; fm-site.js the keys): an opaque white panel
   under the field, square, black text, every row at least 44px, nothing under 13px */
.fm-suggest {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; width: min(440px, calc(100vw - 2 * var(--site-gutter)));
  max-height: min(70vh, 640px); overflow-y: auto;
  background: var(--site-panel); color: var(--site-panel-fg); border: 1px solid var(--site-fg); border-radius: var(--site-radius);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); text-align: left; font: 400 15px/1.3 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: 400 14px/18px var(--site-font-heading); letter-spacing: 0.5px; text-transform: uppercase; color: var(--site-panel-fg); }
.fm-suggest-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 14px; color: var(--site-panel-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-panel-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: #FFFFFF; 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: 15px; }

.cl-hd__promo { min-height: 32px; padding: 5px var(--site-gutter); background: linear-gradient(var(--site-accent-dark), var(--site-accent)); color: var(--site-accent-fg); font: 400 18px/21.6px var(--site-font-body); text-transform: uppercase; text-align: center; }

/* ---------- footer ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-dark-fg); }
.cl-ft__main { background: var(--site-dark) url("img/chrome/footer-bg.svg") center / cover no-repeat; padding: 60px 0; }
.cl-ft__also { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px; min-height: 68px; font: 400 18px/21.6px var(--site-font-body); text-transform: uppercase; }
.cl-ft__also-h { font-weight: 300; }
.cl-ft__also ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.cl-ft__cols { min-height: 245px; display: grid; grid-template-columns: 400px 200px 200px 100px 300px; column-gap: 0; margin: 0 calc(-1 * var(--site-gutter)); }
.cl-ft__cols > * { padding: 0 var(--site-gutter); }
.cl-ft__cols > :last-child { grid-column: 5; }
.cl-ft__brand { display: grid; align-content: start; gap: 22px; }
.cl-ft__logo { display: flex; justify-self: start; }
.cl-ft__mail { font: 400 14px/16.8px var(--site-font-body); }
.cl-ft__links { display: grid; gap: 11px; font: 400 18px/21.6px var(--site-font-body); text-transform: uppercase; }
.cl-ft__links a:hover, .cl-ft__also a:hover, .cl-ft__mail:hover { color: var(--site-dark-hover); }
.cl-ft__find-h { display: block; font: 400 18px/21.6px var(--site-font-body); text-transform: uppercase; }
.cl-ft__field { display: flex; align-items: center; margin-top: 28px; border-bottom: 1px solid var(--site-dark-fg); }
.cl-ft__q { flex: 1; min-width: 0; height: 40px; padding: 0; background: transparent; border: 0; color: var(--site-dark-fg); font: 300 16px/1 var(--site-font-body); outline: 0; }
.cl-ft__q::placeholder { color: var(--site-dark-fg); opacity: 1; }
.cl-ft__go { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.cl-ft__bar { background: var(--site-accent); color: var(--site-accent-fg); }
.cl-ft__small { max-width: var(--site-max); margin: 0 auto; padding: 9px var(--site-gutter); font: 300 14px/16.8px var(--site-font-body); text-align: center; }

/* ---------- phones: their 76px bar with the burger, the name centred, the account and the cart, our search in a row
   under it; the menu drops below both ---------- */
@media (max-width: 979.98px) {
  .cl-hd__in { height: auto; position: relative; flex-wrap: wrap; }
  .cl-hd__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; color: var(--site-dark-fg); }
  .cl-hd__logo { position: absolute; top: 38px; left: 50%; transform: translate(-50%, -50%); align-items: center; min-height: 40px; }
  .cl-hd__logo img, .cl-ft__logo img { height: 30px; }
  .cl-hd__account { width: 40px; height: 76px; margin-left: auto; }
  .cl-hd__cart { width: 40px; height: 76px; margin-left: 4px; margin-right: -6px; }
  .cl-hd__cart-count { top: 18px; right: -2px; }
  .cl-hd__find { order: 10; flex: 0 0 100%; width: 100%; margin: 0 0 12px; }
  .cl-hd__q { height: 40px; }
  .fm-suggest { left: 0; right: 0; width: auto; }
  .cl-hd__nav { position: absolute; top: 100%; left: 0; right: 0; height: auto; margin: 0; display: block; padding: 8px var(--site-gutter) 20px; background: var(--site-dark); border-top: 1px solid var(--site-dark-line); }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; height: auto; }
  .cl-hd__link { min-height: 44px; padding: 0; border-bottom: 1px solid var(--site-dark-line); font-size: 16px; }
  .cl-hd__link:hover, .cl-hd__link.is-current { background: none; color: var(--site-dark-hover); }
  .cl-hd__promo { min-height: 36px; display: flex; align-items: center; justify-content: center; padding: 3px var(--site-gutter); font-size: 15px; line-height: 18px; }

  .cl-ft__main { padding: 40px 0; }
  .cl-ft__also { display: grid; gap: 10px; min-height: 0; margin-bottom: 28px; font-size: 15px; line-height: 18px; }
  .cl-ft__also ul { display: grid; gap: 0; }
  .cl-ft__also a, .cl-ft__links a, .cl-ft__mail, .cl-ft__logo { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; }
  .cl-ft__brand { gap: 12px; }
  .cl-ft__cols { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .cl-ft__brand { grid-column: 1 / -1; }
  .cl-ft__cols > :last-child { grid-column: 1 / -1; }
  .cl-ft__links { font-size: 15px; line-height: 18px; gap: 0; }
  .cl-ft__find-h { font-size: 15px; line-height: 18px; }
  .cl-ft__field { margin-top: 12px; }
  .cl-owner { display: inline-block; padding: 13px 5px; margin: -13px -5px; }
}

/* ---------- the 404 ---------- */
.cl-404 { max-width: var(--site-max); margin: 0 auto; padding: 100px var(--site-gutter); text-align: center; }
.cl-404__h { font: 400 48px/57.6px var(--site-font-heading); text-transform: uppercase; color: var(--site-accent); }
.cl-404__p { margin: 16px 0 40px; font-size: 18px; line-height: 21.6px; }
@media (max-width: 979.98px) {
  .cl-404 { padding: 28px var(--site-gutter) 32px; }
  .cl-404__h { font-size: 40px; line-height: 44px; }
  .cl-404__p { margin: 12px 0 24px; font-size: 15px; line-height: 20px; }
}

/* the footer's trademark line: "owner" links the client's site in the line's own colour, underlined */
.cl-owner, .cl-owner:visited { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cl-owner:hover { opacity: .8; }

/* the night theme's rules (the tokens are :root[data-parts-theme="dark"] above): product photos and tiles keep white
   plates, a rule parts the page from the black footer, the red as words lifts a touch */
:root[data-parts-theme="dark"] .pp-card__img, :root[data-parts-theme="dark"] .pp-tile__img { background: #FFFFFF; }
:root[data-parts-theme="dark"] .cl-ft { box-shadow: inset 0 1px 0 var(--site-line); }
:root[data-parts-theme="dark"] .cl-line__special, :root[data-parts-theme="dark"] .cl-sum__error { color: var(--site-accent-ink); }

}

/* the kit's theme switch (parts/theme_switch.html, 40px, shown 21:30 to 04:30 only) before the cart. Outside any
   layer, since the kit's head block styles the switch unlayered: margins and colour only, and a neighbour moves only
   under data-parts-night, so the day's header is the header it was. */
.cl-hd__in > .parts-theme-switch { flex: none; margin-left: 4px; color: var(--site-dark-fg); }
.cl-hd__in > .parts-theme-switch:hover { color: var(--site-dark-hover); }
/* on a phone the name sits centred between the menu and the account icon, with no room for a third icon on the right
   at 360: the switch goes beside the menu, which mirrors the account and the cart */
@media (max-width: 979.98px) {
  .cl-hd__in > .parts-theme-switch { order: -1; margin-left: 0; }
  :root[data-parts-night] .cl-hd__toggle { order: -2; }
}