/* cl-site.css: Roush's tokens, reset and chrome on every page, written by hand from their measurements
   (review/pages/home.json): the red line over the black header bar with our menu at the left, the name in
   words in the middle and Search and Cart at the right; the black footer with its three top columns, the link
   columns and the dark legal rows. Bebas Neue for headings, Roboto Condensed for the text, square boxes, and
   their slanted buttons (.cl-btn red, .cl-ghost white outline) drawn by a skewed backdrop.

   The cascade: `@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. */
@layer base, kit, site;

@font-face { font-family: "Bebas Neue"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/bebasneue-regular.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/robotocondensed-n4-01812de96ca5a5e9d19bef3ca9cc80dd1bf6c8b8.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/robotocondensed-n7-0c73a613503672be244d2f29ab6ddd3fc3cc69ae.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 400; font-style: italic; font-display: swap; src: url("fonts/robotocondensed-i4-05c7f163ad2c00a3c4257606d1227691aff9070b.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-weight: 700; font-style: italic; font-display: swap; src: url("fonts/robotocondensed-i7-bed9f3a01efda68cdff8b63e6195c957a0da68cb.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/roboto-n4-2019d890f07b1852f56ce63ba45b2db45d852cba.woff2") format("woff2"); }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #1F1F1F;
  --site-line: #D1D1D1;
  --site-band: #F5F5F5;
  --site-card: #F5F5F5;
  --site-accent: #D90009;
  --site-accent-strong: #9B0002;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #D90009;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #9B0002;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #1F1F1F;
  --site-dark: #000000;
  --site-dark-2: #181818;
  --site-dark-line: #413F3F;
  --site-grey: #C7C7C7;
  --site-on-dark: #FFFFFF;                    /* words and outlines on the black bar, the footer and the photos */
  --site-dark-rule: rgba(255, 255, 255, 0.1); /* the phone menu's rules on the black bar */
  --site-accent-ink: var(--site-accent);      /* the red as words (a sale price, a code's error) */
  --site-hero-bg: #979797;                    /* under the hero's photo while it loads */

  /* fonts */
  --site-font-body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --site-font-heading: "Bebas Neue", "Oswald", Impact, sans-serif;
  --site-font-button: var(--site-font-body);
  --site-font-label: "Roboto", Arial, sans-serif;

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

  /* the phone layout's unit: one phone-stage pixel */
  --mx: calc(100vw / 390);
  --u: 1px;
}
/* the kit's shop pages and vehicle band: only the brand tokens a site owns */
: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: 20px; }
}

/* 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 black bar, the footer and their white words stay as they are; the white page
   turns the kit's warm near black, the grey bands a step up, the rules a dark grey, text near white. The red fills
   stay their red, a hover lifts toward white, and the red 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: #D90009;
  --site-accent-strong: #E8141D;
  --site-accent-fg: #FFFFFF;
  --site-accent-ink: #FF5A5F;
  --site-field-bg: #24201C;
  --site-button-bg: #D90009;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #E8141D;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-dark: #000000;
  --site-dark-2: #181818;
  --site-dark-line: #413F3F;
  --site-grey: #4A443E;
  --site-on-dark: #FFFFFF;
  --site-dark-rule: rgba(255, 255, 255, 0.1);
  --site-hero-bg: #24201C;
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #3D3833;
}

@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.6 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 {

/* ---------- their slanted buttons: a skewed backdrop behind straight words ---------- */
.cl-btn, .cl-ghost {
  position: relative; z-index: 0; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; min-width: 160px; padding: 0 34px;
  font: 700 14px/22.4px var(--site-font-button); text-transform: uppercase; letter-spacing: 0;
  color: var(--site-accent-fg); text-decoration: none; cursor: pointer; border: 0; background: none;
}
.cl-btn::before, .cl-ghost::before {
  content: ""; position: absolute; inset: 0 10px; z-index: -1; transform: skewX(-20deg);
  background: var(--site-accent); transition: background-color 0.2s ease;
}
.cl-btn:hover::before { background: var(--site-accent-strong); }
.cl-ghost::before { background: transparent; border: 1px solid var(--site-on-dark); }
.cl-ghost:hover::before { background: var(--site-accent); border-color: var(--site-accent); }
.cl-btn:focus-visible, .cl-ghost:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---------- the red notice over the header ---------- */
.cl-notice { background: var(--site-accent); color: var(--site-accent-fg); text-align: center; }
.cl-notice p { max-width: var(--site-max); margin: 0 auto; padding: 8px 20px; font: italic 400 14px/22.4px var(--site-font-body); letter-spacing: 1px; }
.cl-notice a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- header: the black bar ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); color: var(--site-on-dark); }
.cl-hd__in { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 102px; padding: 0 30px; }
.cl-hd__toggle { display: none; }
.cl-hd__nav { grid-column: 1; grid-row: 1; justify-self: start; }
.cl-hd__list { display: flex; flex-wrap: wrap; }
.cl-hd__link { display: flex; align-items: center; min-height: 50px; padding: 0 10px; font: 400 16px/22.4px var(--site-font-body); text-transform: uppercase; color: var(--site-on-dark); }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-on-dark); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--site-accent); text-decoration-thickness: 2px; }
.cl-hd__logo { grid-column: 2; grid-row: 1; display: block; }
.cl-hd__logo img { display: block; width: auto; height: 50px; }
.cl-hd__tools { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; }
.cl-hd__tool { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; font: 400 16px/25.6px var(--site-font-body); letter-spacing: 1px; text-transform: uppercase; color: var(--site-on-dark); cursor: pointer; list-style: none; }
.cl-hd__tool::-webkit-details-marker { display: none; }
.cl-hd__tool:hover { color: var(--site-on-dark); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--site-accent); }
.cl-hd__cart-count { min-width: 20px; padding: 0 5px; font: 700 13px/20px var(--site-font-body); letter-spacing: 0; text-align: center; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }
/* the search: a drawer under the bar, opaque */
.cl-hd__search { position: static; }
.cl-hd__panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--site-dark); border-top: 1px solid var(--site-dark-line); padding: 20px 30px; }
.cl-hd__form { display: flex; max-width: 760px; margin: 0 auto; }
.cl-hd__q { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 0; border-radius: 0; background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-hd__go { min-width: 140px; }

/* ---------- footer ---------- */
.cl-ft { background: var(--site-dark); color: var(--site-on-dark); font: 400 17px/27.2px var(--site-font-body); }
.cl-ft a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cl-ft__top { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 30px 60px; padding: 70px 0 30px; border-bottom: 1px solid var(--site-dark-line); min-height: 297.3px; }
.cl-ft__col + .cl-ft__col { padding-left: 30px; }
.cl-ft__h { font: 400 21.93px/42px var(--site-font-label); text-transform: uppercase; color: var(--site-on-dark); margin-bottom: 20px; }
.cl-ft__form { display: flex; max-width: 400px; margin-top: 30px; }
.cl-ft__q { width: 200px; height: 46px; padding: 0 12px; border: 0; border-radius: 0; background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-ft__go { margin-left: -20px; min-width: 180px; }
.cl-ft__contact { display: flex; flex-direction: column; gap: 15px; font-size: 16px; line-height: 20.8px; }
.cl-ft__contact a { display: inline-flex; align-items: center; gap: 18px; }
.cl-ft__cols { display: grid; grid-template-columns: 367.8px 455.8px 434.9px 1fr; padding: 0 30px 60px; min-height: 345.1px; }
.cl-ft__cols .cl-ft__h { font-size: 18px; margin-bottom: 20px; }
.cl-ft__links li { line-height: 27.2px; margin-bottom: 10px; }
.cl-ft__legal { background: var(--site-dark-2); }
.cl-ft__legal ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 70px; padding: 22px 30px 10px; min-height: 65px; font-size: 13px; line-height: 20px; }
.cl-ft__legal a { text-decoration: underline; text-underline-offset: 2px; }
.cl-ft__small { background: var(--site-dark-2); padding: 4px 30px 11px; min-height: 35px; text-align: center; font-size: 13px; line-height: 20px; color: var(--site-on-dark); }

/* ---------- phones ---------- */
@media (max-width: 979.98px) {
  .cl-notice p { padding: 12px 16px; font-size: 14px; line-height: 24px; }
  /* the side columns share what the mark leaves, so the tools column grows to 3 icons when the dark-mode switch shows */
  .cl-hd__in { grid-template-columns: 1fr auto 1fr; column-gap: 8px; min-height: 51px; padding: 0 15px; }
  .cl-hd__toggle { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--site-on-dark); }
  .cl-hd__logo img { height: 26px; }
  .cl-hd__tool { padding: 0; min-width: 44px; justify-content: center; }
  .cl-hd__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .cl-hd__nav { justify-self: stretch; position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--site-dark); border-top: 1px solid var(--site-dark-line); padding: 0 15px 10px; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; }
  .cl-hd__link { min-height: 46px; padding: 0; border-bottom: 1px solid var(--site-dark-rule); }
  .cl-hd__panel { padding: 15px; }
  .cl-hd__go { min-width: 110px; }

  .cl-ft__top { grid-template-columns: 1fr; align-content: start; margin: 0 20px; padding: 40px 0 36px; gap: 20px; min-height: 0; }
  .cl-ft__col + .cl-ft__col { padding-left: 0; }
  .cl-ft__h { margin-bottom: 10px; }
  .cl-ft__q { flex: 1; width: auto; }
  .cl-ft__go { min-width: 150px; }
  .cl-ft__cols { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 20px; padding: 30px 20px 40px; min-height: 0; }
  .cl-ft__legal ul { gap: 8px 24px; padding: 20px 20px 10px; min-height: 100px; }
  .cl-ft__small { padding: 4px 20px 16px; min-height: 50px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { padding: 100px var(--site-pad) 120px; text-align: center; }
.cl-404__h { font: 400 64px/1 var(--site-font-heading); letter-spacing: 3px; text-transform: uppercase; }
.cl-404__p { margin: 20px 0 34px; font-size: 17px; }

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

}