/* cl-site.css: weldwheels.ca's tokens, fonts, reset and chrome on every page, in WELD's look: the black
   two-bar header (the promise line, then the menu, the Orbital Parts mark in the middle, search and cart),
   the black footer (the help row, the columns, the policy bar). Measured on weldwheels.com's
   home at 1440 and in its 390px phone stage (review/pages/home.json).

   The cascade (the kit's static/parts/tokens.css): `@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 below; no rule here names a kit class. Below 980px the menu folds behind
   its toggle (cl-site.js). */
@layer base, kit, site;

/* WELD's own faces (static/fonts/FONTS.md): Graphik for text, Druk Wide for headings, Druk Condensed for the
   italic call-to-action lines */
@font-face { font-family: "graphik"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/graphik-regular-desktop-be-ew6wh-2.woff2") format("woff2"); }
@font-face { font-family: "graphik"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/graphik-regular-italic-desktop-d46rtzox.woff2") format("woff2"); }
@font-face { font-family: "graphik"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/graphik-medium-desktop-b7f46eia-2.woff2") format("woff2"); }
@font-face { font-family: "graphik"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/graphik-medium-italic-desktop-bbf5qxtr.woff2") format("woff2"); }
@font-face { font-family: "graphik"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/graphik-semibold-desktop-cvazg2w8-2.woff2") format("woff2"); }
@font-face { font-family: "graphik"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/graphik-semibold-italic-desktop-xwob6ttk.woff2") format("woff2"); }
@font-face { font-family: "graphik"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/graphik-bold-desktop-dq34xht7-2.woff2") format("woff2"); }
@font-face { font-family: "graphik"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/graphik-bold-italic-desktop-dqkhwzvq-2.woff2") format("woff2"); }
@font-face { font-family: "druk-wide"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/druk-text-wide-heavy-dsyjtmxb.woff2") format("woff2"); }
@font-face { font-family: "druk-wide"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/druk-text-wide-heavy-italic-huztksqa-2.woff2") format("woff2"); }
@font-face { font-family: "druk-wide"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/druk-text-wide-super-bqbmm4ar-2.woff2") format("woff2"); }
@font-face { font-family: "druk-wide"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/druk-text-wide-super-italic-d8ba6wen.woff2") format("woff2"); }
@font-face { font-family: "druk-condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/druk-text-condensed-x-super-bfj9iwsl.woff2") format("woff2"); }
@font-face { font-family: "druk-condensed"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/druk-text-condensed-x-super-italic-dtk9abzz.woff2") format("woff2"); }
@font-face { font-family: "druk-condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/druk-text-condensed-super-bpv-2ewy.woff2") format("woff2"); }
@font-face { font-family: "druk-condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/druk-text-condensed-super-italic-ehtubrlr-2.woff2") format("woff2"); }

:root {
  /* colours: the page, the text, the hairline, the bands; WELD's blue (its Shop Now button and footer headings) */
  --site-bg: #F3F4F2;
  --site-fg: #000000;
  --site-muted: #1A1A1A;
  --site-line: #C7C8C6;
  --site-band: #E4E5E3;
  --site-card: #E9EAE8;
  --site-dark: #000000;
  --site-dark-card: #1A1A1A;
  --site-dark-line: rgba(255, 255, 255, 0.2);
  --site-accent: #2884C0;
  --site-accent-strong: #1D6A9C;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #000000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #2884C0;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E5E3;
  --site-disabled-fg: #1A1A1A;
  --site-field-line: #FFFFFF;
  --site-plain: #FFFFFF;
  --site-tile: #F3F4F2;

  /* fonts: WELD's, then the system sans */
  --site-font-body: graphik, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --site-font-heading: druk-wide, "Arial Black", ui-sans-serif, system-ui, sans-serif;
  --site-font-call: druk-condensed, "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1344px;
  --site-gutter: 48px;
}
/* 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-strong);
  --parts-font: var(--site-font-body);
}
/* the dark theme (kit 0.10.0, Site(dark="night")): the grey page and the white favourites row turn the kit's
   warm near black, the cards a step above it, text near white; the black header, footer and featured row stay
   black; WELD's black button turns near white with dark words, blue on hover; photos keep their own grounds */
: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-dark: #000000;
  --site-dark-card: #1A1A1A;
  --site-dark-line: rgba(255, 255, 255, 0.2);
  --site-accent: #2884C0;
  --site-accent-strong: #3E98D4;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-field-line: #5A524A;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-button-hover-bg: #2884C0;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-plain: #121110;
  --site-tile: #1C1A18;
  --site-pay: var(--site-accent);  /* the checkout's Pay draws white words on it (cl-shop.css --kc-accent), so not the near-white button */
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
}
@media (max-width: 979.98px) {
  :root { --site-gutter: 16px; }
}

@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: 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: WELD's black box, white Graphik capitals ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 1px solid var(--site-button-bg); border-radius: var(--site-radius);
  font: 600 14px/21px var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, border-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-accent); outline-offset: 2px; }
/* in a shop page (the cart's Check out, the 404's home link) cl-shop.css's `.cl-shop a { color: inherit }` outranked
   the button's words, which drew them black on the black box: the button keeps its own ink there */
.cl-shop .cl-btn { color: var(--site-button-fg); }
.cl-shop .cl-btn:hover { color: var(--site-button-hover-fg); }

/* ---------- header: the promise bar, then the menu bar ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); color: #FFFFFF; }
.cl-hd__promo { min-height: 40px; padding: 10px var(--site-gutter) 9px; text-align: center; font: 600 14px/21px var(--site-font-body); text-transform: uppercase; }
.cl-hd__bar { position: relative; max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 0 var(--site-gutter); height: 61px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.cl-hd__toggle, .cl-hd__find { display: none; }
.cl-hd__list { display: flex; gap: 40px; }
.cl-hd__link { display: flex; align-items: center; height: 61px; font: 500 14px/21px var(--site-font-body); text-transform: uppercase; color: #FFFFFF; }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }
.cl-hd__logo { grid-column: 2; display: block; }
.cl-hd__mark { display: block; width: auto; height: 36px; }   /* white-lettered: the bar is black by day and at night */
.cl-hd__tools { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 20px; }
.cl-hd__icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #FFFFFF; }
.cl-hd__icon:hover { color: var(--site-accent); }
.cl-hd__cart { position: relative; }
.cl-hd__cart-icon { overflow: visible; }
.cl-hd__cart-count { position: absolute; top: -8px; right: -10px; min-width: 18px; padding: 0 4px; 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; }
/* the box round the kit's theme switch (kit 0.10), before the cart: the switch takes the header's white by itself,
   its 40px box drawn into the 20px gap */
.cl-hd__theme { display: flex; margin: 0 -8px; }

/* the search panel under the bars: opaque, opened by the search button (cl-site.js) */
.cl-hd__search { position: absolute; left: 0; right: 0; top: 100%; background: var(--site-dark); border-top: 1px solid var(--site-dark-line); padding: 16px var(--site-gutter) 24px; }
.cl-js .cl-hd__search:not(.is-open) { display: none; }
.cl-hd__form { max-width: 864px; margin: 0 auto; display: flex; }
.cl-hd__form input { flex: 1; min-width: 0; height: 48px; padding: 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 16px/1 var(--site-font-body); }
.cl-hd__form button { height: 48px; padding: 0 24px; background: var(--site-accent); color: var(--site-accent-fg); font: 600 14px/1 var(--site-font-body); text-transform: uppercase; }

/* ---------- footer ---------- */
.cl-ft { background: var(--site-dark); color: #FFFFFF; font: 400 14px/21px var(--site-font-body); overflow: hidden; }
.cl-ft a:hover { color: var(--site-accent); }
.cl-ft__help { border-bottom: 1px solid var(--site-dark-line); }
.cl-ft__help ul { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 40px var(--site-gutter); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cl-ft__help a { display: flex; gap: 8px; align-items: flex-start; min-height: 66px; }
.cl-ft__help-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; justify-content: center; }
.cl-ft__help strong { display: block; margin: 4px 0 4px; font: 600 16px/16px var(--site-font-body); }
.cl-ft__cols { max-width: calc(var(--site-max) + 2 * var(--site-gutter)); margin: 0 auto; padding: 48px var(--site-gutter) 32px; display: grid; grid-template-columns: 312px repeat(2, 149px) 1fr; column-gap: 32px; min-height: 335px; }
.cl-ft__cols > :nth-child(3) { margin-left: -12px; }
.cl-ft__h { margin-bottom: 15px; font: 600 15px/15px var(--site-font-body); text-transform: uppercase; color: var(--site-accent); }
.cl-ft__list li { margin-bottom: 8px; }
.cl-ft__list a { font-weight: 500; }
.cl-ft__bar { margin: 0 16px; border-top: 1px solid var(--site-dark-line); padding: 15px 36px 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 20px; font: 500 13px/21px var(--site-font-body); }
.cl-ft__bar ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ---------- phones ---------- */
@media (max-width: 979.98px) {
  .cl-hd__promo { padding: 10px 20px 9px; }
  .cl-hd__bar { height: 46px; grid-template-columns: 1fr auto 1fr; }
  .cl-hd__start { display: flex; align-items: center; gap: 12px; }
  .cl-hd__toggle, .cl-hd__find { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 -8px; color: #FFFFFF; }
  .cl-hd__tools { gap: 12px; }
  .cl-hd__mark { height: 32px; }
  .cl-hd__tools .cl-hd__search-open { display: none; }
  .cl-hd__icon { width: 40px; height: 40px; margin-right: -8px; }
  .cl-hd__nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--site-dark); border-top: 1px solid var(--site-dark-line); padding: 8px 16px 16px; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; gap: 0; }
  .cl-hd__link { height: 48px; font-size: 16px; border-bottom: 1px solid var(--site-dark-line); }
  .cl-hd__search { padding: 16px; }

  .cl-ft__help ul { grid-template-columns: 1fr; padding: 40px 16px 33px; gap: 24px; }
  .cl-ft__help a { min-height: 48px; }
  .cl-ft__cols { grid-template-columns: 1fr; padding: 40px 16px 24px; min-height: 0; row-gap: 32px; }
  .cl-ft__cols > :nth-child(3) { margin-left: 0; }
  .cl-ft__bar { padding: 16px 0 24px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .cl-ft__bar ul { flex-direction: column; gap: 0; }
  .cl-ft__list li { margin: 0; }
  .cl-ft__list a, .cl-ft__bar a { display: flex; align-items: center; min-height: 40px; }
}

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

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

}