@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 {
  --site-bg: #FFFFFF;
  --site-fg: #000000;
  --site-muted: #737373;
  --site-line: #D1D1D1;
  --site-band: #F0F0F0;
  --site-card: #F5F5F5;
  --site-accent: #E1251B;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #E1251B;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #000000;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #D1D1D1;
  --site-disabled-fg: #737373;
  /* the same colours named for their roles, so the dark block below can turn each (or keep it) */
  --site-accent-ink: var(--site-accent);  /* the red as words on the page */
  --site-hd-bg: #000000;                  /* AEM's black: the phone menu, the home's hero band */
  --site-hd-fg: #FFFFFF;                  /* words and icons on the black header, menu and footer */
  --site-icon: #000000;                   /* the search's glass on its field */
  --site-plate: #FFFFFF;                  /* behind a product photo, white in both themes */
  --site-font-body: oswald, Verdana, Geneva, sans-serif;
  --site-font-heading: oswald, Verdana, Geneva, sans-serif;
  --site-font-button: var(--site-font-body);
  --site-radius: 0;
  --site-max: 1320px;
  --mx: calc(100vw / 390);
  --u: 1px;
}
@media (max-width: 979.98px) {
  :root { --u: var(--mx); }
}

/* the dark theme (storefront-kit 0.10.0: the kit's head block writes data-parts-theme="dark" on <html> from 21:30 to
   04:30 by the shopper's clock, or when the shopper picks it): the page a warm near black in the kit's family, text
   near white, rules dark grey, cards a step up, fields dark. AEM's black header, the black hero band of the home and
   the theme's dark footer stay as they are; the red stays the buttons' fill and lifts a touch as words on the page.
   Photos and the tiles' pictures keep white plates. The client's theme (theme/head.html) paints the body white, so
   the page's own colours are set here too. */
:root[data-parts-theme="dark"] {
  color-scheme: dark;
  --site-bg: #121110;
  --site-fg: #F6F3EF;
  --site-muted: #EBE6E0;
  --site-line: #3D3833;
  --site-band: #24201C;
  --site-card: #1C1A18;
  --site-accent: #E1251B;
  --site-accent-fg: #FFFFFF;
  --site-accent-ink: #F0443A;
  --site-field-bg: #121110;
  --site-button-bg: #E1251B;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-hd-bg: #000000;
  --site-hd-fg: #FFFFFF;
  --site-icon: #F6F3EF;
  --site-plate: #FFFFFF;
}
/* at night the body is the dark page (by day the client's theme keeps it black, which is what shows under the near-black
   footer of a short page and in a phone's overscroll at the black header and footer), through a class of its own so the
   rule beats that theme and never touches the kit's pages */
:root[data-parts-theme="dark"] .ae-page, :root[data-parts-theme="dark"] .wrapper { background: var(--site-bg); color: var(--site-fg); }
:root[data-parts-theme="dark"] .header-search .search-input, :root[data-parts-theme="dark"] .header-container #mobile-search .search-input { background: var(--site-field-bg); color: var(--site-fg); border-color: var(--site-line); }
:root[data-parts-theme="dark"] .header-search .search-input::placeholder { color: var(--site-muted); opacity: 1; }
/* 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 logo in the black bar: centred in the bar's height at the left of its box, centred on a phone */
.header-background-holder .nav_logo a.brandlogo { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; height: 100%; }
.header-background-holder .nav_logo a.brandlogo img { flex: none; width: auto; max-width: 100%; height: 50px; object-fit: contain; object-position: left; }
.header-background-holder .mobile-header .nav_logo { max-height: none; line-height: 1; }
.header-background-holder .mobile-header .nav_logo a.brandlogo { align-items: center; gap: 4px; text-decoration: none; }
.header-background-holder .mobile-header .nav_logo a.brandlogo img { height: 32px; object-position: center; }
/* the footer base: Orbital Parts' copyright, Email Customer Service and the address, white 13px on the black footer */
footer .cl-ft-base{flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--site-hd-fg);font-size:13px}
footer .cl-ft-base p{margin:0}
footer .cl-ft-base a{color:var(--site-hd-fg);text-decoration:underline}
footer .cl-ft-base a[href^="mailto:"]{text-transform:none}
/* the footer's two links are 40px taps (their padding taken back by the margin, so the lines keep their rhythm) */
footer .cl-ft-base a{display:inline-block;padding:13px 0;margin:-13px 0}

/* the header's icons are inline svgs (partials/header.html): the client's icon font is refused cross-origin */
.header-container .cl-search-icon { display: block; margin: auto; color: var(--site-icon); }
.header-container .cl-hd-cart { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--site-hd-fg); }
.header-container .cart-badge:empty { display: none; }
/* the phone bar: the menu button and the cart 44px taps, the same width a side so the logo stays centred; the right
   side holds the theme switch (the kit's 40px button) before the cart */
.mobile-header .mobile-header-side { flex: 0 0 84px; display: flex; align-items: center; }
.mobile-header .mobile-header-side:last-child { justify-content: flex-end; }
/* the theme switch in the header's white ink, beside the cart */
.header-container .cl-hd-theme { display: inline-flex; align-items: center; color: var(--site-hd-fg); }
.mobile-header .mobile-header-menu, .mobile-header .mobile-header-cart {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  padding: 0; margin: 0; border: 0; background: none; color: var(--site-hd-fg); font: 700 13px/1 oswald, Verdana, Geneva, sans-serif; cursor: pointer; }
.mobile-header .mobile-header-cart .cart-badge { position: absolute; top: 2px; right: 0; min-width: 18px; padding: 2px 4px; background: var(--site-accent); color: var(--site-accent-fg); text-align: center; }
.mobile-header-menu .cl-mm-close, .mobile-header-menu[aria-expanded="true"] .cl-mm-open { display: none; }
.mobile-header-menu[aria-expanded="true"] .cl-mm-close { display: block; }
/* the phone menu: one opaque black level under the bar, 44px rows (cl-site.js toggles .is-open) */
#mobile-menu.cl-mmenu { display: none; position: static; width: auto; height: auto; transform: none; padding: 0 16px 12px; background: var(--site-hd-bg); }
#mobile-menu.cl-mmenu.is-open { display: block; }
#mobile-menu.cl-mmenu a { display: flex; align-items: center; min-height: 44px; border-top: 1px solid var(--site-hd-fg); color: var(--site-hd-fg); font: 400 16px/1.2 oswald, Verdana, Geneva, sans-serif; text-transform: uppercase; text-decoration: none; }
/* the phone footer: its accordion's script never loads, so About and Help stand open, each link a 40px tap */
#footer_mobile .ui-accordion-header-icon { display: none; }
#footer_mobile .sub-menu { display: block !important; }
#footer_mobile .sub-menu a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; }

/* the title band of the policies, the cart and the 404 (cl-shop.css .cl-band) on a phone: the landing pages' 36px H1 and 16px gutters */
@media (max-width: 979.98px) {
  .cl-band { padding: 24px 16px; text-align: left; }
  .cl-band__h1 { font-size: 36px; line-height: 1.05; letter-spacing: 0; }
  .cl-band__text p { font-size: 15px; line-height: 1.5; letter-spacing: 0; }
  .cl-policy__body { padding: 0 16px 64px; font-size: 15px; }
  .cl-cart { padding: 0 16px 60px; }
}

/* the phone bar's menu button and its search button are 44px wide taps (a theme rule held them at 34 and 30px) */
.mobile-header .mobile-header-menu, .mobile-header .search-button { min-width: 44px; }
/* the desktop footer's About and Help headings in full white on the black footer (the theme greys them) */
#footer_desktop h3 { color: var(--site-hd-fg); }