@layer base, kit, site;
/* cl-site.css: the shop pages' tokens, measured from the client's pages by `copy-site snapshot` (copy_site/tokens.py):
   cl-shop.css reads only these, so the listing, product and cart pages follow the client's type and colours.
   The client's own theme styles everything else (its header, footer and pages come from its markup), so no reset here.
   --mx is one phone-stage pixel and --u the unit the shop pages are written in: 1px on desktop, var(--mx) on phones. */
:root {
  /* Oracle's theme is black with white type and Eurostile headings (templates/theme/head.html), so the tokens are its
     dark ones, set by hand over the light values the snapshot measured on its white product pages */
  --site-bg: #000000;
  --site-fg: #FFFFFF;
  --site-muted: #E6E6E6;
  --site-line: #4D4D4D;
  --site-band: #141414;
  --site-card: #141414;
  --site-accent: #840104;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #000000;
  --site-button-bg: #840104;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #FFFFFF;
  --site-button-hover-fg: #000000;
  --site-disabled-bg: #333333;
  --site-disabled-fg: #E6E6E6;
  --site-font-body: Roboto, sans-serif;
  --site-font-heading: 'Eurostile', sans-serif;
  --site-font-button: var(--site-font-body);
  --site-radius: 0;
  --site-max: 1320px;
  /* the kit's parts pages and vehicle band: Oracle's red and Roboto (storefront-kit ADR 0006) */
  --parts-accent: #840104;
  --parts-accent-strong: #5E0003;
  --parts-font: Roboto, sans-serif;
  --mx: calc(100vw / 390);
  --u: 1px;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}
/* the primary button (Add to Cart, Check out) */
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 20px;
  background: var(--site-accent); color: var(--site-accent-fg); border: 1px solid var(--site-accent); border-radius: var(--site-radius);
  font: 600 16px/1 var(--site-font-button); text-decoration: none; cursor: pointer;
  transition: filter 0.2s ease;
}
.cl-btn:hover { filter: brightness(1.1); }
.cl-btn:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }
/* the 404 (templates/404.html) */
.cl-404__home { text-align: center; padding: 0 20px 80px; }

.cl-open, .cl-open > ul, .cl-open > div { display: block !important; visibility: visible !important; opacity: 1 !important;
  transform: none !important; left: 0 !important; right: auto !important; max-height: none !important; height: auto !important;
  pointer-events: auto !important; }
nav.cl-open, .cl-open { position: relative; z-index: 9999; }
html.cl-menu-open { overflow-x: hidden; }
/* the affiliation line above the header (site.json affiliation), on the page's black with its near-white type;
   in the flow above the announcement bar, so the header below it keeps its own height */
.cl-affil { display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 16px; box-sizing: border-box;
  background: var(--site-bg); color: var(--site-muted); border-bottom: 1px solid var(--site-line); }
.cl-affil p { margin: 0; font: 500 12.5px/17px var(--site-font-body); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
@media (max-width: 639.98px) {
  .cl-affil p { font-size: 13px; }
}

/* the menu drawer: every entry a 40px tap target, its search field and button square like every box on the site */
#headerDrawerMenu .header-navigation-item, #headerDrawerMenu .header-mobile__account-title { min-height: 40px; display: flex; align-items: center; }
#headerDrawerMenu .header-mobile__search-input, #headerDrawerMenu .header-mobile__button { border-radius: 0; }

/* the install guides page: each line's toggle a 40px tap target, the boxes square */
.template-page details { border-radius: 0 !important; }
details.collapsible-list summary { padding-block: 6px; }

@layer site {
  /* the footer's link to the brand owner in the copyright line: a 40px tap target inside its sentence */
  .cl-owner { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; vertical-align: middle; }
}