@layer base, kit, site;
/* cl-site.css: the shop pages' tokens, measured from the client's pages by `copy-site snapshot` (copy_site/tokens.py):
   cl-shop.css reads only these, so the listing, product and cart pages follow the client's type and colours.
   The client's own theme styles everything else (its header, footer and pages come from its markup), so no reset here.
   --mx is one phone-stage pixel and --u the unit the shop pages are written in: 1px on desktop, var(--mx) on phones. */
:root {
  --site-bg: #FFFFFF;
  --site-fg: #212529;
  --site-muted: #858789;
  --site-line: #D7D8D8;
  --site-band: #F2F2F2;
  --site-card: #F6F6F6;
  --site-accent: #13469B;
  --site-accent-ink: var(--site-accent);  /* the accent as text: lifted in the dark, where #13469b on the page reads 2:1 */
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #13469B;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #212529;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #D7D8D8;
  --site-disabled-fg: #858789;
  --site-font-body: "Open Sans", sans-serif;
  --site-font-heading: "Proxima Nova";
  --site-font-button: var(--site-font-body);
  --site-radius: 0;
  --site-max: 1320px;
  --mx: calc(100vw / 390);
  --u: 1px;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}
/* the dark theme (storefront-kit 0.10, Site(dark="night"): the kit's head block writes data-parts-theme="dark" on <html>
   from 21:30 to 04:30 by the shopper's clock unless they pick light). The page a warm near black, text near white and never
   grey, cards and the client's grey bars a step up, rules a dark grey; SCT's blue stays on every fill, and where it is
   text it reads in a lifted blue. The client's own theme goes dark through theme-dark.css (generated, linked last in
   base.html); the rules below this block are what the generator cannot know. Photos and product tiles keep white plates. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  background-color: #121110;
  --site-bg: #121110;
  --site-fg: #f6f3ef;
  --site-muted: #ebe6e0;
  --site-line: #3d3833;
  --site-band: #1c1a18;
  --site-card: #1c1a18;
  --site-accent-ink: #7fa6f0;
  --site-field-bg: #1c1a18;
  --site-button-hover-bg: #f6f3ef;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2a2622;
  --site-disabled-fg: #ebe6e0;
  /* the kit's vehicle band (the product page) as the client's compatibility bar under the black header */
  --parts-band-bg: #1c1a18;
  --parts-band-ink: #f6f3ef;
  --parts-band-edge: #3d3833;
}
/* the primary button (Add to Cart, Check out) */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 20px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 600 16px/1 var(--site-font-button); text-decoration: none; cursor: pointer;
  transition: filter 0.2s ease;
}
.cl-btn:hover { filter: brightness(1.1); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }
/* the 404 (templates/404.html) */
.cl-404__home { text-align: center; padding: 0 20px 80px; }

.cl-open, .cl-open > ul, .cl-open > div { display: block !important; visibility: visible !important; opacity: 1 !important;
  transform: none !important; left: 0 !important; right: auto !important; max-height: none !important; height: auto !important;
  pointer-events: auto !important; }
nav.cl-open, .cl-open { position: relative; z-index: 9999; }
html.cl-menu-open { overflow-x: hidden; }

/* 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 theme switch (storefront-kit 0.10, shown 21:30 to 04:30): in the black top bar between the cart and the account,
   white like the theme's icons; the theme spaces its 24px icons 40px apart (20px under 545px), the switch's 40px box
   holds its 20px glyph with 10px either side */
.top-bar-right .parts-theme-switch { margin: -1px -10px -1px 30px; color: #fff; }
.top-bar-right .parts-theme-switch:hover { color: #2486ff; }
@media (max-width: 544px) { .top-bar-right .parts-theme-switch { margin: -1px -10px -1px 10px; } }
/* from 1201 to 1299px the menu and the icons share the bar with no room for the switch's 60px: at night the icons sit
   25px apart there, so the icon row keeps its day width and the menu stays on one line */
@media (min-width: 1201px) and (max-width: 1299.98px) {
  :root[data-parts-night] .top-bar-right .header-icon { margin-left: 25px; }
  :root[data-parts-night] .top-bar-right .parts-theme-switch { margin-left: 15px; }
}

/* ---- the dark theme over the client's pages (see the token block above) ---- */
/* a product or menu photo is drawn for white: its own plate (the mega menu's tiles, the home's product slider, a card) */
:root[data-parts-theme="dark"] .menu-item-image img,
:root[data-parts-theme="dark"] .product-slide-image img,
:root[data-parts-theme="dark"] .woocommerce ul.products li.product a img,
:root[data-parts-theme="dark"] .wp-post-image { background: #fff; }
/* the copied pages' own inline colours: the client's grey and blue words */
:root[data-parts-theme="dark"] [style*="color: #666666"], :root[data-parts-theme="dark"] [style*="color:#666666"] { color: #f6f3ef !important; }
:root[data-parts-theme="dark"] [style*="color: #13469b"] { color: var(--site-accent-ink) !important; }
:root[data-parts-theme="dark"] [style*="color: #ea1414"] { color: #f05a5a !important; }
:root[data-parts-theme="dark"] .wp-block-separator { color: #3d3833; }
/* the cart's count sits on the black top bar in both themes: its white disc and blue number stay */
:root[data-parts-theme="dark"] .header-container span.cart-count { color: #13469b; background-color: #fff; }