/* cl-site.css: the site's tokens, fonts, reset and chrome (the promo bar, the header and its menu, the footer, the
   primary button), on every page, in ARB's look as measured on arbusa.com (review/pages/home.json): a red promo bar,
   a near-black header and footer over angled lines, Montserrat for headings and buttons, Inter for the text.
   The cascade: `@layer base, kit, site;` sets the order; the tokens sit on :root outside any layer, the reset in
   @layer base (under the kit's rules), every other rule in @layer site. The kit's shop pages take the brand colour
   and font from the three --parts-* tokens alone: no rule here names a kit class. */
@layer base, kit, site;

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-100-900-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: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-100-900-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; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-100-900-italic-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: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-100-900-italic-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; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/montserrat-400-700-latin.woff2") format("woff2"); }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #343841;
  --site-ink: #000000;
  --site-muted: #8F9296;
  --site-line: #DADBDD;
  --site-band: #F3F3F4;
  --site-card: #F7F7F7;
  --site-dark: #202227;
  --site-dark-fg: #FFFFFF;
  --site-accent: #ED1C24;
  --site-accent-strong: #AF0E14;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #ED1C24;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #AF0E14;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #343841;

  /* fonts */
  --site-font-body: "Inter", Arial, Helvetica, sans-serif;
  --site-font-heading: "Montserrat", Arial, Helvetica, sans-serif;
  --site-font-button: var(--site-font-heading);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1320px;
  --site-gutter: 25px;
  --site-lines-dark: url("img/chrome/bg-angled-lines-dark.png");

  /* the phone layout's unit (the template's convention; this chrome is written in px) */
  --mx: calc(100vw / 390);
  --u: 1px;
}
/* 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);
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); --site-gutter: 15px; }
}
/* the night look (storefront-kit 0.10.0, Site(dark="night")): the kit's head block sets data-parts-theme="dark" on
   <html> from 21:30 to 04:30 by the shopper's clock or on their pick, and every token above takes its dark value
   here, in the kit's warm family (static/parts/tokens.css): the page #121110, cards and fields a step up, rules
   #3D3833, text near white. The red promo bar, the dark header and footer over their angled lines and the red
   buttons are ARB's in both; photos keep their white plates. The vehicle band takes the kit's own dark values. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-ink: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-band: #1C1A18;
  --site-card: #1C1A18;
  --site-dark: #202227;
  --site-dark-fg: #FFFFFF;
  --site-accent: #ED1C24;
  --site-accent-strong: #AF0E14;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-button-bg: #ED1C24;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #AF0E14;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
}

@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: ARB's red, square, Montserrat caps ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 30px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 0; border-radius: var(--site-radius);
  font: 700 13px/19.5px var(--site-font-button); letter-spacing: 0.5px; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}
.cl-btn:hover { background: var(--site-button-hover-bg); color: var(--site-button-hover-fg); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }
.cl-skip { position: absolute; left: -999px; top: 0; z-index: 999; padding: 8px 12px; background: var(--site-bg); color: var(--site-accent); }
.cl-skip:focus { left: 8px; }

/* ---------- the promo bar: red, 48px, our promise on the left, the cart on the right ---------- */
.cl-promo { background: var(--site-accent); color: var(--site-accent-fg); }
.cl-promo__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 48px; padding: 0 var(--site-gutter); }
.cl-promo__text { font: 700 14px/17.5px var(--site-font-body); }
.cl-cart-link { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; min-height: 40px; color: var(--site-dark-fg); font: 700 14px/17.5px var(--site-font-body); }
.cl-cart-link:hover { opacity: .85; }
.cl-cart-link__n { min-width: 18px; padding: 0 4px; font: 700 12px/18px var(--site-font-body); text-align: center; background: var(--site-dark-fg); color: var(--site-accent); }
.cl-cart-link__n:empty { display: none; }

/* ---------- the header: the Orbital Parts mark, menu, search over the dark angled lines ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark) var(--site-lines-dark) repeat; color: var(--site-dark-fg); }
.cl-hd__in { display: flex; align-items: center; height: 80px; padding: 0 var(--site-gutter); }
.cl-hd__logo { flex: none; display: block; }
.cl-hd__logo img { display: block; width: auto; height: 40px; }
.cl-hd__toggle, .cl-hd__cart { display: none; }
.cl-hd__nav { flex: 1; min-width: 0; height: 100%; padding-left: 45px; }
.cl-hd__list { display: flex; align-items: stretch; gap: 0 45px; height: 100%; }
.cl-hd__link { display: flex; align-items: center; height: 100%; font: 700 14px/17.5px var(--site-font-body); color: var(--site-dark-fg); white-space: nowrap; transition: color 0.2s ease-in-out; }
.cl-hd__link:hover, .cl-hd__link.is-current { color: var(--site-accent); }
.cl-search { flex: none; display: flex; align-items: center; width: 294px; height: 35px; margin-left: 20px; background: var(--site-field-bg); border: 1px solid var(--site-field-bg); }
.cl-search__input { flex: 1; min-width: 0; height: 100%; padding: 0 8px 0 12px; border: 0; background: transparent; color: var(--site-ink); font: 600 14px/17.5px var(--site-font-body); outline: 0; }
.cl-search__input::placeholder { color: var(--site-fg); text-align: right; opacity: 1; }
.cl-search__btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 100%; color: var(--site-accent); }
.cl-search:focus-within { outline: 2px solid var(--site-accent); outline-offset: 0; }

/* ---------- the footer: the mark on the left, our columns on the right ---------- */
.cl-ft { background: var(--site-dark) var(--site-lines-dark) repeat; color: var(--site-dark-fg); }
.cl-ft__in { max-width: 1200px; margin: 0 auto; padding: 80px 15px 91px; display: grid; grid-template-columns: 485px repeat(3, 149px); column-gap: 30px; row-gap: 0; }
.cl-ft__brand { grid-row: span 2; }
.cl-ft__logo { display: inline-block; }
.cl-ft__logo img { display: block; width: auto; height: 40px; }
.cl-ft__col { padding-top: 104px; }
.cl-ft__h { position: relative; padding-bottom: 14px; margin-bottom: 24px; font: 700 13px/15.99px var(--site-font-heading); letter-spacing: 2.3px; text-transform: uppercase; color: var(--site-dark-fg); }
.cl-ft__h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 1px; background: var(--site-muted); }
.cl-ft__list li + li { margin-top: 10px; }
.cl-ft__list a { display: inline-block; font: 400 13px/16.9px var(--site-font-body); color: var(--site-dark-fg); }
.cl-ft__list a:hover { color: var(--site-accent); text-decoration: underline; }
.cl-ft__small { grid-column: 1 / -1; margin-top: 56px; font: 400 13px/18px var(--site-font-body); color: var(--site-dark-fg); }

/* ---------- phones: the mark, search, cart and the menu toggle in one 66px bar ---------- */
@media (max-width: 979.98px) {
  .cl-promo__in { justify-content: flex-start; }
  .cl-promo .cl-cart-link { display: none; }
  .cl-hd__in { height: 66px; gap: 0; }
  .cl-hd__logo img { height: 26px; }
  .cl-search { flex: 1 1 0; min-width: 0; width: auto; height: 34px; margin-left: 12px; }
  .cl-search__input { padding: 0 0 0 6px; font-size: 16px; }
  .cl-hd__cart { display: inline-flex; margin-left: 4px; }
  .cl-hd__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-right: -8px; color: var(--site-dark-fg); }
  .cl-hd__nav { position: absolute; left: 0; right: 0; top: 100%; height: auto; padding: 8px var(--site-gutter) 16px; background: var(--site-dark); border-top: 1px solid #3A3D44; }
  .cl-js .cl-hd__nav:not(.is-open) { display: none; }
  .cl-hd__list { flex-direction: column; gap: 0; height: auto; }
  .cl-hd__link { height: auto; min-height: 44px; font-size: 16px; border-bottom: 1px solid #3A3D44; }
  .cl-ft__in { grid-template-columns: 1fr; padding: 40px 15px 72px; text-align: center; }
  .cl-ft__brand { grid-row: auto; }
  .cl-ft__logo img { height: 32px; }
  .cl-ft__col { padding-top: 72px; }
  .cl-ft__h::after { left: 50%; margin-left: -15px; }
  .cl-ft__list li + li { margin-top: 0; }
  .cl-ft__list a { padding: 16px 0; font-size: 14px; }
  .cl-ft__small { margin-top: 72px; }
}
/* under 380 wide the mark a step smaller, so the search keeps its word */
@media (max-width: 379.98px) {
  .cl-hd__logo img { height: 24px; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { padding: 80px var(--site-gutter) 120px; text-align: center; }
.cl-404__h { font: 700 45px/45px var(--site-font-heading); text-transform: uppercase; color: var(--site-ink); }
.cl-404__p { margin-top: 16px; font: 400 17px/26.35px var(--site-font-body); }
.cl-404__home { margin-top: 32px; }
@media (max-width: 979.98px) { .cl-404__h { font-size: 35px; line-height: 38.5px; } }

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

/* the theme switch (the kit's parts/theme_switch.html, 40px, shown 21:30 to 04:30): in the promo bar's white, at
   its right end (the cart's left on desktop) */
.cl-promo__in > .parts-theme-switch { flex: none; margin-left: auto; }

}