/* 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 the look of arbusa.com (ARB, Old Man Emu's maker), as measured there (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-dark-line: #3A3D44;    /* the rules between the phone menu's rows */
  --site-dark-ink: var(--site-dark);   /* the home's small headings and the card corner, near black on the page */
  --site-hero: #000000;         /* under the home's hero photo */
  --site-accent: #ED1C24;
  --site-accent-strong: #AF0E14;
  --site-accent-fg: #FFFFFF;
  --site-accent-ink: var(--site-accent);   /* red as text or an icon on the page or a field */
  --site-field-bg: #FFFFFF;
  --site-field-line: var(--site-field-bg);
  --site-photo: #FFFFFF;        /* photos keep a white plate in both themes */
  --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 dark theme (the kit's head block sets <html data-parts-theme="dark"> from 21:30 to 04:30 by the shopper's clock, or
   on the shopper's pick): every colour token above in the kit's warm dark family (storefront_kit/static/parts/tokens.css).
   The page turns #121110, text near white, rules a dark grey, cards a step up; the red promo bar, the header and the
   footer over their angled lines stay ARB's, the red buttons stay red, red as text lifts to #FF4A50 so it reads on the
   dark, the search field turns the page colour with a rule round it, and 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-band: #24201C;
  --site-card: #1C1A18;
  --site-dark-ink: #F6F3EF;
  --site-accent-ink: #FF4A50;
  --site-field-bg: #121110;
  --site-field-line: #3D3833;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #F6F3EF;
}

@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-ink); }
.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); }
/* the kit theme switch (storefront-kit parts/theme_switch.html): beside the cart in the red promo bar from 980px, before the
   header cart below it; white on the red, the header white on the dark bar */
.cl-promo__end { display: flex; align-items: center; gap: 8px; }
.cl-promo .parts-theme-switch, .cl-hd__theme .parts-theme-switch { color: var(--site-dark-fg); }
.cl-promo .parts-theme-switch:hover { opacity: .85; }
.cl-hd__theme { display: none; }   /* the kit shows the switch in the night hours only (data-parts-night) */
.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: 220px; height: auto; }   /* 44px: as wide as the menu leaves room for at 1440 */
.cl-hd__toggle, .cl-hd__cart { display: none; }
.cl-hd__nav { flex: 1; min-width: 0; height: 100%; padding-left: 45px; }
@media (min-width: 980px) and (max-width: 1439.98px) {
  .cl-hd__logo img { width: 160px; }
  .cl-hd__nav { padding-left: 24px; }
}
.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-line); }
.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-ink); }
.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: block; width: 220px; }
.cl-ft__logo img { display: block; width: 100%; height: auto; }
.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, cart and the menu toggle in one 66px row over the search ---------- */
@media (max-width: 979.98px) {
  .cl-promo__in { justify-content: flex-start; }
  .cl-promo .cl-cart-link, .cl-promo__end { display: none; }
  :root[data-parts-night] .cl-hd__theme { display: flex; margin-left: 4px; }
  .cl-hd__in { flex-wrap: wrap; height: auto; gap: 0; padding-bottom: 10px; }
  .cl-hd__logo { display: flex; align-items: center; height: 66px; margin-right: auto; }
  .cl-hd__logo img { width: 200px; }   /* 40px, the height of the red name box it replaces */
  .cl-search { order: 1; flex: 1 1 100%; width: auto; height: 40px; margin-left: 0; }
  .cl-search__input { font-size: 16px; }
  .cl-search__input::placeholder { text-align: left; }
  .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 var(--site-dark-line); }
  .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 var(--site-dark-line); }
  .cl-ft__in { grid-template-columns: 1fr; padding: 40px 15px 72px; text-align: center; }
  .cl-ft__brand { grid-row: auto; }
  .cl-ft__logo { width: 200px; margin: 0 auto; }
  .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; }
}

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

}