/* cl-site.css: the site's tokens, fonts, reset and chrome (header, menu, footer, the primary button) in
   moroso.com's look, on every page. 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 and the @font-face rules sit 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 3 --parts-* tokens below alone: no rule here names a kit class.

   Two layouts: the desktop one from 980px, and below it moroso.com's phone layout, drawn at its 390px stage. */
@layer base, kit, site;

/* their fonts (static/fonts/FONTS.md): Helvetica Neue 77 Bold Condensed for the headings and the menu, Roboto
   Condensed (variable, latin) for the footer's band; the body is the system's Helvetica Neue, as theirs */
@font-face {
  font-family: "Helvetica Neue LT Std"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("fonts/helvetica-neue-lt-std-700.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/roboto-condensed-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto Condensed"; font-weight: 100 900; font-style: normal; font-display: swap;
  src: url("fonts/roboto-condensed-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* colours, measured on their home */
  --site-bg: #FFFFFF;
  --site-fg: #333333;
  --site-ink: #000000;
  --site-muted: #8F8F8F;
  --site-line: #DADADA;
  --site-card-line: #DFDFDF;
  --site-band: #EFEFEF;
  --site-card: #F7F7F7;
  --site-accent: #ED1C2E;
  --site-accent-dark: #C63535;
  --site-accent-fg: #FFFFFF;
  --site-foot: #222222;
  --site-foot-fg: #DDDDDD;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #000000;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #ED1C2E;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #6B6B6B;
  --site-black: #000000;          /* the footer's top band, black in both themes */
  --site-search-bg: #F8F8F8;      /* the header's search field */
  --site-search-line: #CCCCCC;
  --site-field-line: #C2C2C2;     /* the footer's search field */
  --site-placeholder: #6B6B6B;    /* a field's placeholder and icon */
  --site-plate: #FFFFFF;          /* the white plate under a product or category photo, white in both themes */
  --site-plate-fg: #333333;       /* the words on a plate or a light promo tile */
  --site-promo-yellow: #EFE264;   /* the home's promo tiles, drawn light in both themes */
  --site-promo-grey: #E9EAF0;

  /* fonts */
  --site-font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --site-font-heading: "Helvetica Neue LT Std", "Roboto Condensed", "Arial Narrow", sans-serif;
  --site-font-cond: "Roboto Condensed", "Arial Narrow", sans-serif;
  --site-font-button: var(--site-font-body);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1300px;
  --site-wide: 1400px;
}
/* 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-dark);
  --parts-font: var(--site-font-body);
}
/* the dark theme (kit 0.10.0: the kit's head block sets data-parts-theme="dark" on <html> at night or on the
   shopper's pick): the kit's warm near black for the white page, near-white text, dark grey rules, cards a step up,
   the red lifted a touch so it reads as text on the dark, the black buttons turned near white with dark words.
   The blue strip, the footer and the hero keep their colours; photos keep their white plates. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-ink: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-card-line: #3D3833;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-accent: #F02C3A;
  --site-field-bg: #1C1A18;
  --site-button-bg: #F6F3EF;
  --site-button-fg: #121110;
  --site-disabled-bg: #3D3833;
  --site-disabled-fg: #EBE6E0;
  --site-search-bg: #1C1A18;
  --site-search-line: #3D3833;
  --site-field-line: #3D3833;
  --site-placeholder: #EBE6E0;
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #36312C;
}

@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 buttons: red for the first action, black for the rest, as theirs ---------- */
.cl-btn, .cl-btn-dark {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 700 13px/1.2 var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.cl-btn:hover { background: var(--site-accent-dark); border-color: var(--site-accent-dark); }
.cl-btn-dark { min-height: 50px; background: var(--site-button-bg); color: var(--site-button-fg); border-color: var(--site-button-bg); }
.cl-btn-dark:hover { background: var(--site-button-hover-bg); border-color: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }
.cl-btn:focus-visible, .cl-btn-dark:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 2px; }

/* ---------- header: the white bar, the grey bar of headings ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-bg); }
.cl-hd__bar { max-width: var(--site-max); min-height: 113px; margin: 0 auto; padding: 0 0 10px;
  display: grid; grid-template-columns: 1fr minmax(0, 355px) 1fr; align-items: center; column-gap: 20px; }
.cl-hd__toggle { display: none; }
.cl-hd__logo { justify-self: start; }
.cl-hd__logo img { display: block; width: 250px; height: auto; }   /* the Orbital Parts mark at the Moroso logo's 50px */
.cl-hd__logo .cl-hd__mark--dark, :root[data-parts-theme="dark"] .cl-hd__logo .cl-hd__mark--light { display: none; }
:root[data-parts-theme="dark"] .cl-hd__logo .cl-hd__mark--dark { display: block; }
.cl-hd__search { position: relative; }
.cl-hd__search input { width: 100%; height: 40px; padding: 0 44px 0 16px; background: var(--site-search-bg); border: 1px solid var(--site-search-line); border-radius: var(--site-radius);
  font: 400 16px/1 var(--site-font-body); color: var(--site-ink); }
.cl-hd__search input::placeholder { color: var(--site-placeholder); font-size: 13px; }
.cl-hd__search button { position: absolute; top: 0; right: 0; width: 44px; height: 40px; display: grid; place-items: center; color: var(--site-fg); }
.cl-hd__end { justify-self: end; display: flex; align-items: center; color: var(--site-ink); }  /* the kit's theme switch (21:30 to 04:30) and the cart */
.cl-hd__cart { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; color: var(--site-ink); font: 700 14px/20px var(--site-font-body); }
.cl-hd__cart:hover { color: var(--site-accent); }
.cl-hd__cart-count::before { content: "("; }
.cl-hd__cart-count::after { content: ")"; }
.cl-hd__cart-count:empty { display: none; }
.cl-hd__nav { background: var(--site-band); }
.cl-hd__list { max-width: var(--site-max); margin: 0 auto; display: flex; justify-content: space-between; }
.cl-hd__link { display: flex; align-items: center; min-height: 51px; border-top: 2px solid transparent;
  font: 700 15px/19px var(--site-font-heading); text-transform: uppercase; color: var(--site-ink); }
.cl-hd__link:hover, .cl-hd__link.is-current { border-top-color: var(--site-accent); color: var(--site-accent); }

/* ---------- footer: the black band with the search, then the dark band ---------- */
.cl-ft { background: var(--site-black); color: #FFFFFF; }
.cl-ft__band { max-width: 1240px; min-height: 120px; margin: 0 auto; padding: 20px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.cl-ft__title { font: 900 33px/47px var(--site-font-cond); letter-spacing: 1px; text-transform: uppercase; color: var(--site-accent-dark); }
.cl-ft__sub { font: 400 16px/23px var(--site-font-cond); text-transform: uppercase; }
.cl-ft__search { display: flex; gap: 6px; flex: 0 0 480px; }
.cl-ft__field { flex: 1; display: flex; align-items: center; gap: 12px; height: 57px; padding: 0 16px; background: var(--site-field-bg);
  border: 1px solid var(--site-field-line); color: var(--site-placeholder); }
.cl-ft__field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: 400 18px/1 var(--site-font-body); color: var(--site-ink); }
.cl-ft__field input::placeholder { color: var(--site-placeholder); }
.cl-ft__search button { width: 114px; height: 57px; background: var(--site-accent-dark); color: #FFFFFF;
  font: 700 14px/16px var(--site-font-body); text-transform: uppercase; }
.cl-ft__search button:hover { background: var(--site-accent); }
.cl-ft__main { min-height: 306px; padding: 40px 40px 24px; display: grid; grid-template-columns: minmax(0, 1fr) 346px minmax(0, 1fr); column-gap: 40px;
  background: var(--site-foot) url("img/chrome/footer-bg.png") no-repeat 100% 0 / auto 100%; color: var(--site-foot-fg); }
.cl-ft__h { position: relative; padding-bottom: 20px; margin-bottom: 20px; font: 700 18px/20px var(--site-font-body); text-transform: uppercase; color: #FFFFFF; }
.cl-ft__h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 2px; background: var(--site-accent-dark); }
.cl-ft__rows { display: grid; grid-template-columns: 98px 1fr; row-gap: 20px; max-width: 460px; margin: 0; font: 400 13px/17px var(--site-font-body); }
.cl-ft__rows dt { font-weight: 500; color: #FFFFFF; }
.cl-ft__rows dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cl-ft__rows a:hover { color: #FFFFFF; text-decoration: underline; }
.cl-ft__mid { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 14px; }
.cl-ft__logo img { width: 250px; height: auto; }
.cl-ft__small { margin-top: 36px; white-space: nowrap; font: 400 13px/17px var(--site-font-cond); }
.cl-ft__small a[href^="mailto:"] { display: inline-block; padding: 10px 0; }

/* ---------- phones: their 390px stage ---------- */
@media (max-width: 1339.98px) {
  .cl-hd__list { padding: 0 16px; flex-wrap: wrap; justify-content: center; column-gap: 20px; }
  .cl-hd__link { font-size: 14px; min-height: 40px; }
  .cl-hd__bar { padding-left: 20px; padding-right: 20px; }
  .cl-ft__band { padding-left: 40px; padding-right: 40px; }
  .cl-ft__mid { grid-row: 2; grid-column: 1 / -1; padding-top: 30px; }
}
@media (max-width: 979.98px) {
  .cl-hd__bar { min-height: 0; padding: 0 15px 6px; grid-template-columns: 1fr auto 1fr; row-gap: 0; column-gap: 8px; }
  .cl-hd__toggle { display: grid; place-items: center; justify-self: start; width: 40px; height: 68px; color: var(--site-ink); }
  .cl-hd__logo { justify-self: center; }
  .cl-hd__logo img { width: 145px; }   /* 29px tall, clear of the theme switch and the cart at 390 */
  .cl-hd__end { grid-column: 3; grid-row: 1; }
  .cl-hd__search { grid-column: 1 / -1; grid-row: 2; }
  .cl-hd__search input { height: 40px; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__nav { background: var(--site-bg); border-top: 1px solid var(--site-line); border-bottom: 1px solid var(--site-line); }
  .cl-hd__list { display: block; padding: 0 15px; }
  .cl-hd__list li + li { border-top: 1px solid var(--site-line); }
  .cl-hd__link { min-height: 44px; border-top: 0; font-size: 16px; }

  .cl-ft__band { display: block; padding: 20px; }
  .cl-ft__sub { min-height: 46px; }
  .cl-ft__search { display: grid; gap: 5px; margin-top: 10px; }
  .cl-ft__search button { width: 100%; }
  .cl-ft__main { display: block; padding: 40px 40px 20px; }
  .cl-ft__logo img { width: 250px; height: auto; }
.cl-ft__small { margin-top: 36px; white-space: normal; }
  .cl-ft__rows { grid-template-columns: 1fr; row-gap: 4px; }
  .cl-ft__rows dd + dt { margin-top: 16px; }
  .cl-ft__mid { padding-top: 60px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { max-width: var(--site-max); margin: 0 auto; padding: 80px 20px 120px; text-align: center; }
.cl-404__h { font: 700 36px/1.1 var(--site-font-heading); text-transform: uppercase; color: var(--site-fg); }
.cl-404__p { margin: 16px 0 28px; font: 400 16px/1.5 var(--site-font-body); }

/* 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; }

}