/* cl-site.css: XClutch's tokens, fonts, reset and chrome (the notice bar, the social row, the header and its menu,
   the footer, the primary button), on every page, written from the capture of xclutchusa.com
   (review/pages/home.json). 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 the desktop one, measured at 1440, below it the phone one, measured in a 390px stage
   and written in px (a 16px gutter, 40px tap targets, no text under 13px). */
@layer base, kit, site;

/* Oswald and Outfit (both SIL OFL 1.1), the faces the client's theme loads: static/fonts/FONTS.md.
   Outfit 600 also serves the theme's 700 (its buttons and notice), which it never shipped as a file. */
@font-face { font-family: "Oswald"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/oswald-400.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 300; font-style: normal; font-display: swap; src: url("fonts/outfit-300.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600 700; font-style: normal; font-display: swap; src: url("fonts/outfit-600.woff2") format("woff2"); }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #737373;
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #9C00FF;
  --site-accent-fg: #FFFFFF;
  --site-accent-strong: #7300BD;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #9C00FF;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #000000;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #6B6B6B;
  /* the chrome: the black header and footer, the near-black feature bands, the orange of their Overland buttons */
  --site-dark: #000000;
  --site-night: #0F0F0F;
  --site-dark-line: rgba(255, 255, 255, 0.1);
  --site-orange: #E48F00;

  /* fonts */
  --site-font-body: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --site-font-heading: "Oswald", "Arial Narrow", Impact, sans-serif;
  --site-font-button: var(--site-font-body);

  /* shape and layout: the content is 1360px wide between 40px gutters at 1440 */
  --site-radius: 0;
  --site-max: 1360px;
  --site-pad: 40px;

  /* the phone layout's unit: one phone-stage pixel (the stage scaled to the screen) */
  --mx: calc(100vw / 390);
  /* 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. 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);
}
@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: 300 16px/1.5 var(--site-font-body);
  letter-spacing: 0.45px;
  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; cursor: pointer; }
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): their purple, their tracked capitals ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; 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 14px/1.2 var(--site-font-button); letter-spacing: 3px; 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-fg); outline-offset: 2px; }

/* ---------- the notice bar: purple, tracked white capitals (the home's h1 sits here) ---------- */
.cl-note { background: var(--site-accent); color: #FFFFFF; padding: 10px var(--site-pad); }
.cl-note__text { max-width: var(--site-max); margin: 0 auto; text-align: center; font: 700 13.77px/19.28px var(--site-font-body); letter-spacing: 2.754px; text-transform: uppercase; }

/* ---------- the social row: a thin black strip, the brand's links on the right ---------- */
.cl-social { background: var(--site-dark); color: #FFFFFF; }
.cl-social__list { max-width: calc(var(--site-max) + 2 * var(--site-pad)); margin: 0 auto; padding: 0 var(--site-pad); height: 32px; display: flex; justify-content: flex-end; align-items: center; }
.cl-social__link { display: flex; align-items: center; justify-content: center; width: 26px; height: 32px; }
.cl-social__link:hover { color: var(--site-accent); }

/* ---------- the header: the black bar, logo, the Oswald menu centred, the glass and the cart ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); color: #FFFFFF; border-top: 1px solid var(--site-dark-line); }
.cl-hd__in { max-width: calc(var(--site-max) + 2 * var(--site-pad)); margin: 0 auto; padding: 20px var(--site-pad); min-height: 218px; display: flex; align-items: center; gap: 20px; }
.cl-hd__logo { flex: none; align-self: flex-start; display: flex; align-items: flex-start; gap: 16px; padding-top: 10px; }
.cl-hd__logo img { width: 120px; height: auto; }
.cl-hd__logo .cl-hd__flag { width: 54px; margin-top: 26px; border-radius: 2px; }
.cl-hd__nav { flex: 1; min-width: 0; }
.cl-hd__list { display: flex; flex-wrap: wrap; justify-content: center; }
.cl-hd__link { display: block; padding: 7px 12px 8px; font: 400 17px/17px var(--site-font-heading); letter-spacing: normal; text-transform: uppercase; color: #FFFFFF; }
.cl-hd__link:hover, .cl-hd__link.cl-current { color: var(--site-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cl-hd__link:hover { color: #FFFFFF; text-decoration-color: var(--site-accent); }
.cl-hd__tools { flex: none; display: flex; align-items: center; }
.cl-hd__tool { position: relative; display: flex; align-items: center; justify-content: center; width: 52px; height: 43px; color: #FFFFFF; }
.cl-hd__tool:hover, .cl-hd__find[open] > .cl-hd__tool { color: var(--site-accent); }
.cl-hd__tool svg { overflow: visible; }
.cl-hd__toggle { display: none; }
.cl-hd__cart-count {
  position: absolute; top: 2px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--site-accent); color: var(--site-accent-fg); font: 600 12px/18px var(--site-font-body); letter-spacing: 0; text-align: center;
}
.cl-hd__cart-count:empty { display: none; }
/* the search: an opaque black row under the bar, opened from the glass */
.cl-hd__search {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  display: flex; gap: 8px; padding: 16px max(var(--site-pad), calc((100% - var(--site-max)) / 2));
  background: var(--site-dark); border-top: 1px solid var(--site-dark-line); border-bottom: 1px solid var(--site-dark-line);
}
.cl-hd__q { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #FFFFFF; border-radius: var(--site-radius); background: #FFFFFF; color: var(--site-fg); font: 300 16px/1 var(--site-font-body); }
.cl-hd__q:focus { outline: 2px solid var(--site-accent); outline-offset: 0; }
.cl-hd__go { flex: none; min-width: 110px; height: 44px; padding: 0 20px; background: var(--site-accent); color: #FFFFFF; font: 700 14px/1 var(--site-font-button); letter-spacing: 3px; text-transform: uppercase; }
.cl-hd__go:hover { background: #FFFFFF; color: var(--site-fg); }

/* Resources: the client's content pages, a black panel under its button (cl-site.js sets cl-open on hover, click
   or keyboard; without script it opens on hover and focus). The phone panel shows it as a group (below). */
.cl-res { position: relative; }
.cl-res__btn { display: flex; align-items: center; gap: 6px; }
.cl-res__chev { transition: transform 0.2s ease; }
.cl-res.cl-open .cl-res__chev { transform: rotate(180deg); }
.cl-res__label { display: none; }
.cl-res__list {
  position: absolute; top: 100%; left: 0; z-index: 70; display: none; min-width: 230px; margin-top: 8px; padding: 8px 0;
  background: var(--site-dark); border: 1px solid var(--site-dark-line); border-radius: var(--site-radius);
}
.cl-res__list::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 9px; }
.cl-res.cl-open > .cl-res__list, html:not(.cl-js) .cl-res:hover > .cl-res__list, html:not(.cl-js) .cl-res:focus-within > .cl-res__list { display: block; }
.cl-res__link { display: flex; align-items: center; min-height: 40px; padding: 0 20px; color: #FFFFFF; font: 300 16px/1.2 var(--site-font-body); letter-spacing: 0.45px; white-space: nowrap; }
.cl-res__link:hover, .cl-res__link:focus-visible { background: var(--site-accent); color: #FFFFFF; outline: 0; }
.cl-res__link.cl-current { box-shadow: inset 3px 0 0 var(--site-accent); }
.cl-res__link.cl-current:hover { box-shadow: none; }

/* a desktop narrower than their 1440: the menu tightens before it wraps */
@media (max-width: 1299.98px) and (min-width: 980px) {
  .cl-hd__link { padding: 7px 8px 8px; font-size: 15px; }
}

/* ---------- the footer: black, the logo and three columns, then the social links and the copyright, centred ---------- */
.cl-ft { background: var(--site-dark); color: #FFFFFF; }
.cl-ft__in { max-width: calc(var(--site-max) + 2 * var(--site-pad)); margin: 0 auto; padding: 60px var(--site-pad) 59px; min-height: 606px; display: flex; flex-direction: column; }
.cl-ft__cols { display: grid; grid-template-columns: 185px 213px 186px minmax(0, 595px); column-gap: 22px; align-items: start; font: 300 15.3px/21.42px var(--site-font-body); letter-spacing: 0.45px; }
.cl-ft__logo img { width: 91px; height: auto; }
.cl-ft__list li + li { margin-top: 4px; }
.cl-ft__list a { display: inline-block; padding: 4px 0; }
.cl-ft__list a:hover { color: var(--site-accent); }
.cl-ft__list--lined li + li { margin-top: 12px; }
.cl-ft__list--lined a { padding: 0; border-bottom: 2px solid var(--site-dark-line); }
.cl-ft__list--lined a:hover { border-bottom-color: var(--site-accent); color: #FFFFFF; }
.cl-ft__h { font: 300 14.4px/20.16px var(--site-font-body); letter-spacing: 4.32px; text-transform: uppercase; cursor: default; }
.cl-ft__h--phone { display: none; }
.cl-ft__about .cl-ft__h { margin-bottom: 20px; }
.cl-ft__text p + p { margin-top: 14px; }
.cl-ft__social { margin-top: auto; display: flex; justify-content: center; gap: 8px; }
.cl-ft__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.cl-ft__social-link:hover { color: var(--site-accent); }
.cl-ft__copy { margin-top: 24px; text-align: center; font: 300 12.6px/17.64px var(--site-font-body); letter-spacing: 0.45px; }
.cl-ft__copy, .cl-ft__copy a { font-size: 13px; }

/* the footer's trademark line: "owner" links the client'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; }

/* ---------- phones: their 126px bar (logo, glass, menu, cart), the menu as an opaque panel (cl-site.js) ---------- */
@media (max-width: 979.98px) {
  .cl-note { padding: 10px var(--site-pad); }
  .cl-note__text { font-size: 13px; line-height: 17px; letter-spacing: 2.4px; }
  .cl-social { display: none; }
  .cl-hd__in { min-height: 125px; padding: 16px 9px 16px var(--site-pad); gap: 0; justify-content: space-between; }
  .cl-hd__logo { padding-top: 0; }
  .cl-hd__logo { gap: 11px; }
  .cl-hd__logo img { width: 70px; }
  .cl-hd__logo .cl-hd__flag { width: 36px; margin-top: 14px; }
  .cl-hd__tool { width: 45px; height: 45px; }
  .cl-hd__toggle { display: flex; }
  .cl-hd__nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; flex: none; display: none; background: var(--site-dark); border-top: 1px solid var(--site-dark-line); }
  .cl-hd.cl-open .cl-hd__nav { display: block; }
  .cl-hd__list { display: block; padding: 0 var(--site-pad) 8px; }
  .cl-hd__list li + li { border-top: 1px solid var(--site-dark-line); }
  .cl-hd__link { display: flex; align-items: center; min-height: 52px; padding: 0; font-size: 18px; line-height: 1.2; }
  .cl-res__btn { display: none; }
  .cl-res__label { display: flex; cursor: default; }
  .cl-res__label:hover { color: #FFFFFF; text-decoration: none; }
  .cl-res__list { position: static; display: block; min-width: 0; margin: 0 0 8px; padding: 0 0 0 16px; border: 0; }
  .cl-res__list::before { content: none; }
  .cl-hd__list .cl-res__list li { border-top: 0; }
  .cl-res__link { min-height: 44px; padding: 0; font-size: 16px; }
  .cl-res__link:hover, .cl-res__link:focus-visible { background: none; color: var(--site-accent); }
  .cl-res__link.cl-current { box-shadow: none; color: var(--site-accent); }
  .cl-hd__search { padding: 16px var(--site-pad); }
  .cl-hd__go { min-width: 0; padding: 0 16px; }

  .cl-ft__in { padding: 23px var(--site-pad) 60px; min-height: 0; }
  .cl-ft__cols { grid-template-columns: 1fr; text-align: center; }
  .cl-ft__logo { justify-self: center; }
  .cl-ft__cols > nav { margin-top: 32px; }
  .cl-ft__list li + li { margin-top: 0; }
  .cl-ft__list a { min-height: 33px; display: inline-flex; align-items: center; padding: 0; }
  .cl-ft__fold { text-align: left; border-top: 1px solid var(--site-dark-line); }
  .cl-ft__fold:first-of-type { margin-top: 20px; }
  .cl-ft__fold:last-of-type { border-bottom: 1px solid var(--site-dark-line); }
  .cl-ft__fold > .cl-ft__h { display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; font-size: 13.25px; letter-spacing: 3.97px; cursor: pointer; }
  .cl-ft__fold > .cl-ft__h::after { content: ""; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg) translateY(-3px); }
  .cl-ft__fold[open] > .cl-ft__h::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .cl-ft__fold > ul, .cl-ft__fold > div { padding: 4px 0 20px; }
  .cl-ft__list--lined li + li { margin-top: 0; }
  .cl-ft__list--lined a { min-height: 40px; display: inline-flex; align-items: center; border: 0; text-decoration: underline; text-decoration-color: var(--site-dark-line); text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .cl-ft__social { margin-top: 30px; }
  .cl-ft__copy { margin-top: 31px; }
}

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

}