/* cl-site.css: the site's tokens, fonts, reset and chrome (header, menu, footer, the
   primary button), on every page: bankspower.ca in Banks Power's look, measured on bankspower.com
   (review/pages/home.json): white pages, near-black text, the red #C50008, Acumin headings, Roboto text,
   Inter in the menu, a 1216px column, every box square (--site-radius).

   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 the desktop header and footer; below 980px the phone ones (the menu behind its
   button in an opaque panel, the search on its own row, the footer columns folded). */
@layer base, kit, site;

/* the client's faces (static/fonts/FONTS.md): Acumin is the client's Adobe Fonts licence, Roboto and Inter are OFL */
@font-face { font-family: "Acumin"; src: url("fonts/acumin-variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/roboto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #2B2B2B;
  --site-muted: #3A3A3A;
  --site-line: #E4E4E4;
  --site-field-line: #D3D3D3;
  --site-band: #F6F6F6;
  --site-card: #F9F9F9;
  --site-footer-bg: #E1E1E1;
  --site-accent: #C50008;
  --site-accent-strong: #A00006;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #C50008;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #A00006;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #2B2B2B;
  --site-menu-fg: #2C2D2E;                    /* the menu, the cart link, the home's top-part names */
  --site-footer-fg: #313131;
  --site-footer-line: #CFCFCF;                /* the folded footer's rules on a phone */
  --site-accent-ink: var(--site-accent);      /* the red as text (a hovered or current link, an error): lifted in the dark */

  /* fonts */
  --site-font-body: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --site-font-heading: "Acumin", "Roboto", system-ui, Arial, sans-serif;
  --site-font-menu: "Inter", "Roboto", system-ui, Arial, sans-serif;
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1240px;
  --site-pad: 12px;

  /* the phone stage (capture.json: 390) */
  --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. 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 dark theme (storefront-kit 0.10.0: the kit's head block sets data-parts-theme="dark" on <html> from 21:30
   to 04:30 or on the shopper's pick): the kit's warm near black under the same chrome, text near white, rules
   dark grey, the grey bands and cards a step up; the red stays the fill of the bar, the badge and the buttons,
   and as text it lifts to #F04A50 (5.2:1 on the page). The logo is drawn black, so it turns near white below;
   the photos keep their white. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-field-line: #57504A;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-footer-bg: #1C1A18;
  --site-accent: #C50008;
  --site-accent-strong: #D91A22;
  --site-accent-fg: #FFFFFF;
  --site-accent-ink: #F04A50;
  --site-field-bg: #1C1A18;
  --site-button-bg: #C50008;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #D91A22;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #F6F3EF;
  --site-menu-fg: #F6F3EF;
  --site-footer-fg: #F6F3EF;
  --site-footer-line: #3D3833;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #36312C;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); --site-pad: 16px; }
}

@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; }
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
[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 (Add to Cart, Check out, the home's links): Banks' red block ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 24px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 1px solid var(--site-button-bg); border-radius: var(--site-radius);
  font: 700 12px/1.2 var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-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; }

/* ---------- header: logo, search, cart; the menu row under them ---------- */
.bp-hd { position: relative; z-index: 50; background: var(--site-bg); border-bottom: 1px solid var(--site-line); }
.bp-hd__top { max-width: var(--site-max); margin: 0 auto; padding: 10px var(--site-pad) 0; height: 75px; display: flex; align-items: center; gap: 32px; }
.bp-hd__toggle { display: none; }
.bp-hd__logo { flex: none; }
/* the Orbital Parts mark, 5:1: dark letters on the white bar, white letters on the night's black */
.bp-hd__logo img { display: block; width: auto; height: 40px; }
.bp-hd__logo .bp-hd__logo-night, :root[data-parts-theme="dark"] .bp-hd__logo img { display: none; }
:root[data-parts-theme="dark"] .bp-hd__logo .bp-hd__logo-night { display: block; }
.bp-hd__search { flex: 0 1 714px; position: relative; display: flex; }
.bp-hd__search input { width: 100%; height: 50px; padding: 0 52px 0 16px; border: 1px solid var(--site-field-line); border-radius: var(--site-radius);
  background: var(--site-field-bg); color: var(--site-fg); font: 400 14px/1 var(--site-font-body); }
.bp-hd__search input::placeholder { color: var(--site-fg); opacity: 1; }
.bp-hd__search input:focus { outline: none; border-color: var(--site-fg); }
.bp-hd__search button { position: absolute; top: 0; right: 0; width: 50px; height: 50px; display: grid; place-items: center; color: var(--site-fg); }
.bp-hd__end { flex: none; margin-left: auto; display: flex; align-items: center; gap: 16px; }
.bp-hd__end .parts-theme-switch { color: var(--site-menu-fg); }
.bp-hd__end .parts-theme-switch:hover { color: var(--site-accent-ink); }
.bp-hd__cart { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--site-menu-fg); }
.bp-hd__cart-icon { position: relative; display: block; }
.bp-hd__cart-icon svg { overflow: visible; }
.bp-hd__count { position: absolute; top: -9px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; display: grid; place-items: center;
  background: var(--site-accent); color: var(--site-accent-fg); border-radius: var(--site-radius); font: 600 11px/1 var(--site-font-heading); }
.bp-hd__count:empty { display: none; }
.bp-hd__cart-label { font: 400 16px/1 var(--site-font-heading); }
.bp-hd__cart:hover .bp-hd__cart-label { color: var(--site-accent-ink); }

.bp-hd__nav { max-width: var(--site-max); margin: 0 auto; padding: 8px var(--site-pad) 9px; }
.bp-hd__list { display: flex; align-items: center; height: 42px; }
.bp-hd__item--more { display: none; }
.bp-hd__link { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 15px; font: 500 14px/22.4px var(--site-font-menu); color: var(--site-menu-fg); cursor: pointer; }
.bp-hd__list > li:first-child > .bp-hd__link { padding-left: 0; }
.bp-hd__link:hover, .bp-hd__link.is-current, .bp-hd__drop[open] > .bp-hd__link { color: var(--site-accent-ink); }
.bp-hd__more { position: relative; }
.bp-hd__chev { transition: transform 0.2s ease; }
.bp-hd__drop[open] .bp-hd__chev { transform: rotate(180deg); }
.bp-hd__panel { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 260px; padding: 8px 0; background: var(--site-bg);
  border: 1px solid var(--site-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.bp-hd__plink { display: block; padding: 10px 20px; font: 500 14px/1.4 var(--site-font-menu); color: var(--site-menu-fg); }
.bp-hd__plink:hover { color: var(--site-accent-ink); background: var(--site-band); }

/* ---------- footer: the grey band, 3 columns, the social row and the copyright ---------- */
.bp-ft { background: var(--site-footer-bg); color: var(--site-footer-fg); }
.bp-ft__cols { max-width: var(--site-max); min-height: 618px; margin: 0 auto; padding: 50px var(--site-pad) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.bp-ft__h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; font: 800 17px/17px var(--site-font-heading); pointer-events: none; }
.bp-ft__chev { display: none; }
.bp-ft__list { display: grid; gap: 5px; font: 400 14px/22.4px var(--site-font-heading); }
.bp-ft__list a:hover { color: var(--site-accent-ink); text-decoration: underline; }
.bp-ft__sub { margin-top: 0; }
.bp-ft__subin { max-width: var(--site-max); margin: 0 auto; padding: 20px var(--site-pad) 20px; display: grid; gap: 16px; }
.bp-ft__small { font: 400 13px/1.6 var(--site-font-body); color: var(--site-footer-fg); }

/* ---------- phones: the menu behind its button, the search on its own row, the footer folded ---------- */
@media (max-width: 979.98px) {
  .bp-hd__top { height: auto; padding: 10px var(--site-pad) 0; flex-wrap: wrap; gap: 0 4px; }
  .bp-hd__toggle { display: grid; place-items: center; width: 48px; height: 48px; margin-left: -12px; color: var(--site-fg); }
  .bp-hd__close { display: none; }
  .bp-hd__toggle[aria-expanded="true"] .bp-hd__bars { display: none; }
  .bp-hd__toggle[aria-expanded="true"] .bp-hd__close { display: block; }
  .bp-hd__logo img { height: 32px; }
  .bp-hd__end { gap: 0; }
  .bp-hd__cart { min-height: 48px; padding: 0 4px; }
  .bp-hd__cart-label { display: none; }
  .bp-hd__search { order: 3; flex: 1 1 100%; margin: 10px 0 8px; }
  .bp-hd__search input { font-size: 16px; }
  .bp-hd__nav { position: absolute; left: 0; right: 0; top: 68px; z-index: 70; max-width: none; padding: 0 var(--site-pad) 16px; background: var(--site-bg);
    border-top: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }
  .cl-js .bp-hd__nav:not(.is-open) { display: none; }
  .bp-hd__list { display: block; height: auto; }
  .bp-hd__item--more { display: block; }
  .bp-hd__more { display: none; }
  .bp-hd__link, .bp-hd__list > li:first-child > .bp-hd__link { display: flex; height: 48px; padding: 0; border-bottom: 1px solid var(--site-line); font-size: 16px; }

  .bp-ft__cols { display: block; min-height: 0; padding: 10px 0 0; }
  .bp-ft__col { padding: 0 var(--site-pad); border-bottom: 1px solid var(--site-footer-line); }
  .bp-ft__h { min-height: 66px; margin: 0; pointer-events: auto; cursor: pointer; }
  .bp-ft__chev { display: block; transition: transform 0.2s ease; }
  .bp-ft__col[open] .bp-ft__chev { transform: rotate(180deg); }
  .bp-ft__col[open] > :not(summary) { padding-bottom: 20px; }
  .bp-ft__list a { display: block; padding: 9px 0; }
  .bp-ft__list { gap: 0; }
  .bp-ft__sub { margin-top: 0; }
  .bp-ft__subin { padding: 24px var(--site-pad) 49px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.bp-404 { max-width: var(--site-max); margin: 0 auto; padding: 80px var(--site-pad) 120px; text-align: center; }
.bp-404__h { font: 800 28px/1.4 var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }
.bp-404__p { margin: 12px 0 28px; font: 400 16px/1.6 var(--site-font-body); }

/* 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; }

}