/* cl-site.css: the site's tokens, fonts, reset and chrome (header, search panel, footer, the primary button) in
   bajadesigns.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 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 their desktop bars; below 980px their phone header, two rows. */
@layer base, kit, site;

/* their fonts (static/fonts/FONTS.md): Roboto for text, United Italic Black for headings, menus and buttons */
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-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"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-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: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-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: "Roboto"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("fonts/roboto-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: "United Italic"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/uniteditalicreg-black.woff2") format("woff2"); }

:root {
  /* colours */
  --site-bg: #FFFFFF;
  --site-fg: #333333;
  --site-muted: #333333;
  --site-line: #DADADA;
  --site-band: #F3F3F3;
  --site-card: #F7F7F7;
  --site-accent: #D0112B;
  --site-accent-strong: #A80D22;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #D0112B;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #A80D22;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #E4E4E4;
  --site-disabled-fg: #333333;
  /* their dark chrome: the top bar, the near-black bars and sections, the search row */
  --site-black: #000000;
  --site-dark: #1A1A1A;
  --site-bar: #333333;
  --site-light: #FFFFFF;
  --site-field-line: #242424;

  /* fonts */
  --site-font-body: "Roboto", Arial, sans-serif;
  --site-font-heading: "United Italic", "Arial Black", Impact, sans-serif;
  --site-font-button: var(--site-font-heading);

  /* shape and layout */
  --site-radius: 0;
  --site-max: 1250px;
}
/* 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). */
:root {
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent-strong);
  --parts-font: var(--site-font-body);
}
/* the dark theme (kit 0.10, Site(dark="night")): the page a warm near black, words near white, the red lifted a touch
   to read on the dark. Their header and footer are near black in both themes, so those tokens keep their values. */
: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: #EB3A4F;
  --site-accent-strong: #D0112B;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-field-line: #3D3833;
  --site-button-bg: #D0112B;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #A80D22;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-black: #000000;
  --site-dark: #1A1A1A;
  --site-bar: #333333;
  --site-light: #FFFFFF;
  --parts-accent-strong: color-mix(in srgb, var(--parts-accent) 78%, #FFFFFF);
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --parts-band-edge: #3D3833;
}

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

.cl-wrap { max-width: var(--site-max); margin: 0 auto; }

/* ---------- the primary button (Add to Cart, Check out, the home's Shop now): their red block in the display type ---------- */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px;
  background: var(--site-button-bg); color: var(--site-button-fg); border: 0; border-radius: var(--site-radius);
  font: 400 18px/1 var(--site-font-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background-color 0.2s ease;
}
.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; }

/* ---------- header: the black top bar with the cart, the near-black bar with the Orbital Parts mark, the ruled menu box, search ---------- */
.cl-hd { position: relative; z-index: 50; background: var(--site-dark); color: var(--site-light); }
.cl-hd__top { background: var(--site-black); }
.cl-hd__top-in { height: 40px; display: flex; justify-content: flex-end; align-items: center; }
.cl-hd__cart { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--site-light); }
.cl-hd__cart-label { font: 700 14px/40px var(--site-font-body); text-transform: uppercase; }
.cl-hd__cart:hover { color: var(--site-light); opacity: .85; }
.cl-hd__cart svg { overflow: visible; }
.cl-hd__cart-count { min-width: 18px; padding: 0 4px; font: 700 13px/18px var(--site-font-body); text-align: center; background: var(--site-accent); color: var(--site-accent-fg); }
.cl-hd__cart-count:empty { display: none; }
.cl-hd__cart--phone { display: none; }
.cl-hd__in { height: 104px; display: flex; align-items: center; gap: 24px; padding: 0 21px 0 16px; }
.cl-hd__logo { flex: none; margin-right: auto; }
.cl-hd__logo img { display: block; width: auto; height: 42px; }
.cl-hd__nav { flex: none; border: 2px solid var(--site-light); padding: 16px 16px; }
.cl-hd__list { display: flex; gap: 0 8px; }
.cl-hd__link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; font: 400 16px/20px var(--site-font-heading); text-transform: uppercase; color: var(--site-light); }
.cl-hd__link:hover, .cl-hd__link[aria-current] { color: var(--site-accent); }
.cl-hd__find { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--site-light); }
.cl-hd__find:hover, .cl-hd__find[aria-expanded="true"] { color: var(--site-accent); }

/* the search panel the search button opens (cl-site.js): their grey search row, opaque */
.cl-hd__panel { background: var(--site-bar); }
.cl-js .cl-hd__panel:not(.is-open) { display: none; }
.cl-hd__search { display: flex; gap: 8px; padding: 12px 16px; }
.cl-hd__search input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; border-radius: var(--site-radius); background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); }
.cl-hd__search button { flex: none; min-height: 40px; padding: 0 18px; background: var(--site-accent); color: var(--site-accent-fg); font: 400 16px/1 var(--site-font-button); text-transform: uppercase; }
.cl-hd__search button:hover { background: var(--site-accent-strong); }

/* ---------- footer: the near-black block, the mark and our name, their ruled links, the email pair, social, legal ---------- */
.cl-ft { min-height: 616px; background: var(--site-dark); color: var(--site-light); padding: 48px 0 44px; }
.cl-ft a:hover { color: var(--site-light); text-decoration: underline; }
.cl-ft__main { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 351px 1fr; min-height: 276px; }
.cl-ft__logo { display: inline-block; margin: 8px 0 0 16px; }
.cl-ft__logo img { display: block; width: 232px; height: auto; }
.cl-ft__address { min-height: 108px; margin: 68px 0 0 20px; font: 700 14px/18px var(--site-font-body); }
.cl-ft__links { display: flex; flex-wrap: wrap; margin-top: 20px; }
.cl-ft__links li + li { border-left: 1px solid var(--site-bar); }
.cl-ft__links a { display: block; padding: 0 24px; font: 400 18px/27px var(--site-font-heading); text-transform: uppercase; }
.cl-ft__links li:first-child a { padding-left: 0; }
.cl-ft__contact { margin: 60px 0 0 32px; max-width: 677px; }
.cl-ft__contact-h { font: 400 15px/17px var(--site-font-body); margin-bottom: 7px; }
.cl-ft__contact-row { display: flex; gap: 16px; }
.cl-ft__contact-field { flex: 1; min-width: 0; height: 50px; padding: 0 16px; display: flex; align-items: center; background: var(--site-field-bg); color: var(--site-fg); font: 400 16px/1 var(--site-font-body); border: 1px solid var(--site-field-line); }
.cl-ft__contact-go { flex: none; width: 166px; height: 50px; display: flex; align-items: center; justify-content: center; background: var(--site-accent); color: var(--site-accent-fg); font: 400 18px/50px var(--site-font-heading); text-transform: uppercase; }
.cl-ft a.cl-ft__contact-field:hover { color: var(--site-fg); }
.cl-ft__legal { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; min-height: 48px; padding: 0 24px; font: 400 16px/24px var(--site-font-body); }
.cl-ft__small { max-width: 1250px; margin: 0 auto; padding: 12px 24px 0; text-align: center; font: 400 13px/24px 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; }

/* ---------- phones: their two header rows, the footer stacked ---------- */
@media (max-width: 979.98px) {
  .cl-hd__top { display: none; }
  .cl-hd__in { height: auto; flex-wrap: wrap; gap: 0; padding: 0 8px 8px; }
  .cl-hd__logo { height: 80px; display: flex; align-items: center; }
  .cl-hd__find { width: 40px; height: 40px; }
  .cl-hd__cart--phone { display: inline-flex; justify-content: center; width: 48px; min-height: 40px; }
  .cl-hd__cart--phone .cl-hd__cart-count { position: absolute; top: 2px; right: 2px; }
  .cl-hd__nav { order: 3; flex: 1 1 100%; height: 72px; padding: 0 10px; display: flex; align-items: center; justify-content: center; overflow-x: auto; }
  .cl-hd__list { gap: 0 4px; }
  .cl-hd__link { white-space: nowrap; min-height: 40px; }

  .cl-ft { min-height: 1129px; padding: 32px 24px 24px; }
  .cl-ft__main { display: block; min-height: 0; }
  .cl-ft__brand { text-align: center; }
  .cl-ft__logo { margin: 26px 0 0; }
  .cl-ft__address { margin: 42px 0 0; font-size: 16px; }
  .cl-ft__links { display: block; margin-top: 61px; }
  .cl-ft__links li:last-child { border-bottom: 0; }
  .cl-ft__links li + li { border-left: 0; }
  .cl-ft__links li { border-bottom: 1px solid var(--site-bar); }
  .cl-ft__links a, .cl-ft__links li:first-child a { padding: 15px 0; text-align: center; }
  .cl-ft__contact { margin: 97px 0 0; }
  .cl-ft__contact-go { width: 142px; }
  .cl-ft__legal { min-height: 96px; padding: 0; }
  .cl-ft__small { padding: 19px 0 0; }
}

/* ---------- the 404 (templates/404.html) ---------- */
.cl-404 { background: var(--site-dark); color: var(--site-light); text-align: center; padding: 96px 24px 120px; }
.cl-404__h { font: 400 40px/42px var(--site-font-heading); text-transform: uppercase; }
.cl-404__p { margin: 16px 0 32px; font: 400 16px/24px var(--site-font-body); }

}

/* the kit's theme switch (kit 0.10, shown at night only): white on the black top bar before the cart, on a phone
   between the search and the cart. Outside the layers, so the hover wins over the kit's own rule. */
.cl-hd__top-in .parts-theme-switch { margin-right: 8px; }
.cl-hd__theme-phone { display: none; }
.cl-hd .parts-theme-switch:hover { color: var(--site-accent); }
@media (max-width: 979.98px) {
  .cl-hd__theme-phone { display: contents; }
}