/* copy-site kit file */
/* cl-site.css: the site's tokens, reset and chrome (header, menu, footer, the primary button), on every
   page. A placeholder from the copy-site kit's template-site: the chrome agent overwrites the :root token
   block with the client's colours, fonts and sizes, and the header and footer rules with the client's.
   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, as the copied platform serves them:
   - from 980px: the desktop layout;
   - below 980px: the platform's phone layout, drawn in stage units: --mx is one phone-stage pixel
     (100vw / the stage width; Wix's stage is 320, capture.json says the site's) and --u is 1px on desktop
     and var(--mx) on phones, so a rule written in calc(N * var(--u)) serves both. */
@layer base, kit, site;

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #1C1C1C;
  --site-muted: #6B6B6B;
  --site-line: #D4D4D4;
  --site-band: #F2F2F2;
  --site-card: #F7F7F7;
  --site-accent: #1F5FBF;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #1C1C1C;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #1F5FBF;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #8A8A8A;
  --site-accent-ink: var(--site-accent);      /* the blue as words (a hovered link, a sale price) */

  /* fonts: the client's @font-face rules go in base.html's head */
  --site-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --site-font-heading: var(--site-font-body);
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1320px;

  /* the phone layout's unit: one phone-stage pixel (the stage scaled to the screen) */
  --mx: calc(100vw / 320);
  /* the unit the chrome is written in: 1px on desktop, var(--mx) on phones */
  --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, so the chrome agent's token block restyles them too. 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);
  --parts-font: var(--site-font-body);
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}
/* Dark (storefront-kit 0.10.0, Site(dark="night")): the kit stamps data-parts-theme="dark" on <html> from 21:30 to
   04:30 or on the shopper's pick. The page, the header and the footer take the kit's warm near black, a step up for the
   footer and the cards, dark grey rules, near-white words; the black buttons turn near white with dark words, the blue
   fills stay and the blue as words is lifted to read on the dark. */
: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: #1F5FBF;
  --site-accent-fg: #FFFFFF;
  --site-accent-ink: #79A6F0;
  --site-field-bg: #1C1A18;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #1F5FBF;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #3D3833;
  --site-disabled-fg: #EBE6E0;
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --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 (Add to Cart, Check out, the home's first link) ---------- */
.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; }

/* ---------- header: text logo, menu, cart ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); border-bottom: 1px solid var(--site-line); }
.cl-hd__in { max-width: var(--site-max); margin: 0 auto; padding: 0 24px; min-height: 72px; display: flex; align-items: center; gap: 32px; }
.cl-hd__logo { flex: none; font: 700 22px/1.2 var(--site-font-heading); color: var(--site-fg); }
.cl-hd__logo img { max-height: 48px; width: auto; }
.cl-hd__logo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.cl-hd__tag { font: 700 13px/1 var(--site-font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--site-fg); white-space: nowrap; }
.cl-hd__toggle { display: none; }
.cl-hd__nav { flex: 1; min-width: 0; }
.cl-hd__list { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.cl-hd__link { font: 400 15px/1.4 var(--site-font-body); color: var(--site-fg); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent-ink); }
.cl-hd__cart { flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; color: var(--site-fg); }
.cl-hd__cart:hover { color: var(--site-accent-ink); }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { min-width: 18px; font: 600 13px/18px var(--site-font-body); text-align: center; border-radius: 9px; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }

/* ---------- footer ---------- */
.cl-ft { margin-top: 0; background: var(--site-band); color: var(--site-fg); border-top: 1px solid var(--site-line); }
.cl-ft__in { max-width: var(--site-max); margin: 0 auto; padding: 40px 24px; display: grid; gap: 12px; font: 400 14px/1.6 var(--site-font-body); }
.cl-ft__name { font: 700 18px/1.3 var(--site-font-heading); }
.cl-ft__contact { display: flex; flex-wrap: wrap; gap: 4px 24px; color: var(--site-muted); }
.cl-ft__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.cl-ft__links a:hover, .cl-ft__contact a:hover { text-decoration: underline; }
.cl-ft__small { color: var(--site-muted); font-size: 13px; }

/* ---------- phones: the menu behind its toggle (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-hd__in { flex-wrap: wrap; gap: 12px 16px; padding: 12px 16px; min-height: 0; }
  .cl-hd__logo { flex: 1; min-width: 0; font-size: 20px; gap: 3px; }
  .cl-hd__tag { letter-spacing: 1px; }
  .cl-hd__toggle { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--site-line); border-radius: var(--site-radius); font-size: 14px; }
  .cl-hd__cart { order: 2; }
  .cl-hd__nav { order: 3; flex: 1 1 100%; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; gap: 0; }
  .cl-hd__link { display: block; padding: 10px 0; border-top: 1px solid var(--site-line); }
  .cl-ft__in { padding: 32px 16px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404__home { text-align: center; padding: 0 20px 80px; }

/* the client's phone menu opened by cl-site.js when its own script is gone: shown whatever its theme hid it with */
.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; }

}

/* By night the kit shows its dark-mode switch beside Menu and the cart (data-parts-night on <html>): the phone bar's
   items close up and the tag drops its tracking, so the name and the 3 controls fit side by side from 360px. */
@media (max-width: 979.98px) {
  :root[data-parts-night] .cl-hd__in { column-gap: 8px; }
  :root[data-parts-night] .cl-hd__tag { letter-spacing: 0; }
}