/* cl-site.css: the site's tokens, fonts, reset and chrome (header, menu, footer, the primary button), on every
   page, in Holley's look (holley.com, measured 2026-10-26): white pages, black text, their red #DA2B1F, Oswald
   uppercase for headings, menus and buttons, Open Sans for running text, the black header 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;` below sets the order; the
   tokens sit on :root outside any layer, the reset in @layer base (under the kit's rules, so it never undoes
   a kit button or list), 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 below alone: no rule here names a kit class.

   Two layouts: from 980px their desktop header; below 980px their phone header (a 390px stage). */
@layer base, kit, site;

/* Holley's two families (static/fonts/FONTS.md): Oswald is one variable file for 400 to 700 */
@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-normal-latin.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/opensans-bold-latin.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #3A3A3A;
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F7F7F7;
  --site-accent: #DA2B1F;
  --site-accent-fg: #FFFFFF;
  --site-promo: #ED333E;
  --site-bar: #000000;
  --site-footer: #141414;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #000000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #DA2B1F;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #4A4A4A;
  --site-field-hint: #4A4A4A;
  --site-accent-ink: var(--site-accent);

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

  /* shape and layout: square boxes, their 1312px content column */
  --site-radius: 0;
  --site-max: 1312px;
  --site-gutter: 64px;

  /* the phone layout's unit: one pixel of their 390px phone stage */
  --mx: calc(100vw / 390);
  --u: 1px;
}
/* the kit's shop pages and vehicle band (storefront_kit/static/parts/tokens.css): only the brand tokens a site
   owns, drawn from the tokens above (storefront-kit ADR 0007). The band is their white Year / Make / Model row. */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: #B32218;
  --parts-font: var(--site-font-heading);
  --parts-band-bg: #FFFFFF;
  --parts-band-ink: #000000;
  --parts-band-edge: var(--site-line);
  --parts-radius: var(--site-radius); /* square boxes on the band and the kit pages too (the phone clean-up, 2026-10-30) */
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); --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 header's black bar, the red
   promo strip and the near-black footer stay as they are; the white page turns the kit's warm near black, cards a
   step up, text near white, lines dark grey, the black buttons turn light with dark words. 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-field-bg: #1C1A18;
  --site-field-hint: #CFC8BF;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-accent-ink: #EE4337;
  --parts-accent-strong: #E8473B;
  --parts-band-bg: #1C1A18;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: var(--site-line);
}

@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 15px/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 button ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 24px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 3px solid var(--site-accent); border-radius: var(--site-radius);
  font: 500 14.4px/1 var(--site-font-button); text-transform: uppercase; letter-spacing: .5px; text-decoration: none; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.cl-btn:hover { background: var(--parts-accent-strong); border-color: var(--parts-accent-strong); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }

/* ---------- header: the red promo strip, the black bar ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bar); color: #fff; font-family: var(--site-font-heading); }
.cl-hd__promo { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; background: var(--site-promo);
  font: 400 14px/1.2 var(--site-font-heading); text-transform: uppercase; color: #fff; text-align: center; }
.cl-hd__promo:hover { text-decoration: underline; }
.cl-hd__in { max-width: 1440px; margin: 0 auto; padding: 0 49px 19px; }
.cl-hd__top { display: flex; justify-content: flex-end; align-items: flex-end; gap: 0 14px; height: 33px; padding-bottom: 0; }
.cl-hd__top a { display: block; font: 400 13px/17px var(--site-font-heading); text-transform: uppercase; color: #fff; }
.cl-hd__top a:hover { color: var(--site-accent); }
.cl-hd__main { display: flex; align-items: flex-end; height: 65px; }
.cl-hd__toggle { display: none; }
.cl-hd__logo { flex: none; display: flex; align-items: center; justify-content: center; height: 65px; align-self: flex-start; }
.cl-hd__logo img { width: auto; height: 40px; }  /* the Orbital Parts mark, white letters on the black bar, 5:1 */
.cl-hd__nav { flex: none; margin-left: 15px; }
.cl-hd__list { display: flex; }
.cl-hd__list > li { position: relative; }
.cl-hd__link { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 15px;
  font: 400 16px/1 var(--site-font-heading); text-transform: uppercase; color: #fff; }
.cl-hd__link:hover, .cl-hd__drop:focus-within > .cl-hd__link { color: var(--site-accent); }
.cl-hd__link svg { opacity: .7; }
.cl-hd__panel { display: none; position: absolute; top: 100%; left: 0; min-width: 300px; padding: 10px 0; background: #000; border-top: 3px solid var(--site-accent); }
.cl-hd__drop:hover > .cl-hd__panel, .cl-hd__drop:focus-within > .cl-hd__panel, .cl-hd__drop.is-open > .cl-hd__panel { display: block; }
.cl-hd__sub { display: block; padding: 9px 20px; font: 400 15px/1.3 var(--site-font-heading); text-transform: uppercase; color: #fff; }
.cl-hd__sub:hover, .cl-hd__sub.is-current { color: var(--site-accent); }
.cl-search { flex: 1; display: flex; max-width: 486px; height: 44px; margin-left: auto; background: var(--site-field-bg); }
.cl-search__input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 0; background: var(--site-field-bg); color: var(--site-fg);
  font: 400 16px/1 var(--site-font-body); }
.cl-search__input::placeholder { color: var(--site-field-hint); }
.cl-search__input:focus { outline: 2px solid var(--site-accent); outline-offset: -2px; }
.cl-search__btn { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 44px; color: var(--site-fg); }
.cl-hd__cart { flex: none; position: relative; display: flex; align-items: center; justify-content: center; width: 60px; height: 44px; margin-left: 54px; color: #fff; }
.cl-hd__cart:hover { color: var(--site-accent); }
.cl-hd__cart svg { overflow: visible; }
.cl-hd__count { position: absolute; top: 2px; right: 8px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--site-accent); color: #fff; font: 600 12px/18px var(--site-font-body); text-align: center; }
.cl-hd__count:empty { display: none; }

/* ---------- footer: near black, their columns ---------- */
.cl-ft { background: var(--site-footer); color: #fff; padding: 29px 58px 0; }
.cl-ft__top { max-width: 450px; margin: 0 auto; padding: 63px 0 68px; text-align: center; }
.cl-ft__ask { max-width: 360px; margin: 0 auto 20px; 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; height: 51px; margin: 0 auto; max-width: 421px; padding: 0 6px 0 16px;
  background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-ft__mail-btn { display: flex; align-items: center; height: 38px; padding: 0 16px; background: var(--site-accent); color: #fff;
  font: 500 14.4px/1 var(--site-font-heading); text-transform: uppercase; }
.cl-ft__mail:hover .cl-ft__mail-btn { background: var(--parts-accent-strong); }
.cl-ft__cols { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1325px; margin: 0 auto; padding: 30px 0; min-height: 268px; }
.cl-ft__col summary, .cl-ft__col h2 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; list-style: none; cursor: default;
  font: 700 13px/20px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.cl-ft__col summary::-webkit-details-marker { display: none; }
.cl-ft__col summary svg { display: none; }
.cl-ft__col li + li { margin-top: 9px; }
.cl-ft__col a { font: 400 15px/20px var(--site-font-body); color: #fff; }
.cl-ft__col a:hover { color: var(--site-accent); }
.cl-ft__copy { padding: 22px 0 38px; text-align: center; font: 400 13px/17px var(--site-font-heading); letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.cl-ft__copy a[href^="mailto:"] { text-transform: none; }

/* ---------- phones: their 88px bar, the search row, the drawer; the footer's accordion ---------- */
@media (max-width: 979.98px) {
  .cl-hd { position: sticky; top: 0; }
  .cl-hd__in { padding: 0; }
  .cl-hd__top { display: none; }
  .cl-hd__main { position: relative; flex-wrap: wrap; align-items: center; height: auto; }
  .cl-hd__toggle { display: flex; align-items: center; justify-content: center; width: 52px; height: 88px; color: #fff; }
  .cl-hd__logo { flex: 1; align-self: center; justify-content: flex-start; height: 88px; }
  .cl-hd__logo img { height: 32px; }
  .cl-hd__cart { width: 60px; height: 88px; margin-left: 0; }
  .cl-hd__count { top: 24px; right: 8px; }
  .cl-search { order: 4; flex: 1 1 100%; max-width: none; height: 59px; margin: 0; padding: 8px 13px; background: var(--site-bar); }
  .cl-search__input { height: 43px; }
  .cl-search__btn { height: 43px; background: var(--site-field-bg); }
  .cl-hd__nav { order: 5; position: absolute; top: 88px; left: 0; right: 0; margin: 0; z-index: 60;
    background: #000; border-top: 3px solid var(--site-accent); max-height: calc(100vh - 128px); overflow-y: auto; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; padding: 8px 0 16px; }
  .cl-hd__link { height: auto; min-height: 48px; padding: 0 16px; font-size: 18px; }
  .cl-hd__drop-btn { pointer-events: none; color: var(--site-accent); }
  .cl-hd__drop-btn svg { display: none; }
  .cl-hd__panel { display: block; position: static; min-width: 0; padding: 0; border: 0; }
  .cl-hd__sub { display: flex; align-items: center; min-height: 44px; padding: 0 16px 0 28px; font-size: 16px; }

  .cl-ft { padding: 0 16px; }
  .cl-ft__top { max-width: none; padding: 40px 0 32px; }
  .cl-ft__ask { max-width: none; margin-bottom: 16px; font-size: 18px; }
  .cl-ft__mail { max-width: none; height: 54px; font-size: 15px; }
  .cl-ft__cols { display: flex; flex-direction: column; min-height: 0; padding: 0; }
  .cl-ft__contact { order: -1; padding: 0 0 24px; }
  .cl-ft__contact h2 { margin-bottom: 0; }
  .cl-ft__contact a { display: flex; align-items: center; min-height: 40px; font-size: 14px; }
  .cl-ft__col summary { margin: 0; border-bottom: 1px solid #5A5A5A; cursor: pointer; min-height: 48px; font-size: 17px; }
  .cl-ft__col summary svg { display: block; }
  .cl-ft__col[open] summary svg { transform: rotate(180deg); }
  .cl-ft__col ul { padding: 12px 0 16px; }
  .cl-ft__col li + li { margin-top: 0; }
  .cl-ft__col ul a { display: flex; align-items: center; min-height: 40px; font-size: 14px; }
  .cl-ft__copy { padding: 10px 0 32px; text-align: left; }
  .cl-ft__copy .cl-owner { padding: 12px 0; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404__home { text-align: center; padding: 0 16px 32px; }
.cl-404__home a { 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, whatever the theme gives footer links (Greg 2026-10-01) */
.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): the hero's words stay white over
   its photo, photos and tiles keep white plates, the header's search field is ruled so it reads on the black bar, a rule
   parts the page from the footer,
   the red as text lifts a touch */
:root[data-parts-theme="dark"] .pp-home__hero, :root[data-parts-theme="dark"] .pp-home__h1 { color: #FFFFFF; }
:root[data-parts-theme="dark"] .pp-card__img, :root[data-parts-theme="dark"] .pp-tile__img { background: #FFFFFF; }
:root[data-parts-theme="dark"] .cl-search, :root[data-parts-theme="dark"] .cl-ft__mail { box-shadow: inset 0 0 0 1px var(--site-line); }
:root[data-parts-theme="dark"] .cl-ft { box-shadow: inset 0 1px 0 var(--site-line); }
@media (max-width: 979.98px) { :root[data-parts-theme="dark"] .cl-search { box-shadow: none; } }
: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__main > .parts-theme-switch { flex: none; align-self: flex-end; margin: 0 -46px 2px 54px; color: #fff; }
.cl-hd__main > .parts-theme-switch:hover { color: var(--site-accent); }
@media (max-width: 979.98px) {
  .cl-hd__main > .parts-theme-switch { align-self: center; margin: 0; }
}