@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: #222529;
  --site-muted: #858789;
  --site-line: #D7D8D8;
  --site-band: #F2F2F2;
  --site-card: #F6F6F6;
  --site-accent: #DD2728;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #DD2728;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #222529;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #D7D8D8;
  --site-disabled-fg: #858789;
  --site-photo: #FFFFFF;        /* product photos sit on white whatever the theme */
  --site-on-dark: #FFFFFF;      /* words on the black footer, in both themes */
  --site-footer-button: #1D1E20;
  --site-spinner: #CCCCCC;
  --site-font-body: Montserrat;
  --site-font-heading: Poppins, 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 (kit 0.10.0, `data-parts-theme="dark"` on <html>, by the visitor's clock or their pick): the page a warm
   near black in the kit's family, text near white, the red lifted a touch to read on the dark, the footer black as it is,
   photos and the logo on white plates. The client's theme stylesheets (theme/css) draw the header and the home in
   literals, so the rules after this block repaint those boxes in the dark only. */
: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: #E8392D;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-button-bg: #E8392D;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #DDD7CF;
  --site-photo: #FFFFFF;
  --site-on-dark: #FFFFFF;
  --site-footer-button: #1D1E20;
  --site-spinner: #3D3833;
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #36312C;
}
/* ---------- the dark theme over the client's theme (theme/css paints the page, the header and the home in literals):
   each rule below repaints one of those boxes or texts, in the dark only; the footer stays black as it is, the banners'
   white buttons stay white on their photos, and a photo keeps its white plate ---------- */
:root[data-parts-theme="dark"] .cl-body,
:root[data-parts-theme="dark"] .page-wrapper,
:root[data-parts-theme="dark"] header.page-header,
:root[data-parts-theme="dark"] .page-header .header-main { background-color: var(--site-bg); color: var(--site-fg); }
:root[data-parts-theme="dark"] :is(h1, h2, h3, h4, h5, h6) { color: var(--site-fg); }
:root[data-parts-theme="dark"] .page-header .header-main :is(a, span, i, .porto-icon-magnifier, .minicart-svg) { color: var(--site-fg); }
:root[data-parts-theme="dark"] .page-header .minicart-svg { fill: currentColor; }
:root[data-parts-theme="dark"] .sw-megamenu.navigation li.level0 > a.level-top,
:root[data-parts-theme="dark"] .sw-megamenu.navigation li.level0 > a.level-top > span { color: var(--site-fg); }
:root[data-parts-theme="dark"] .sw-megamenu.navigation li.level0 > .submenu,
:root[data-parts-theme="dark"] .nav-sections,
:root[data-parts-theme="dark"] .nav-sections-items,
:root[data-parts-theme="dark"] .nav-sections-item-content { background-color: var(--site-bg); color: var(--site-fg); }
:root[data-parts-theme="dark"] .sw-megamenu.navigation li.level0 > .submenu a,
:root[data-parts-theme="dark"] .nav-sections a { color: var(--site-fg); }
:root[data-parts-theme="dark"] :is(.section-title, .section-title a, .inline-title, .category-label, .product-item-link, .price, .vertical-font) { color: var(--site-fg); }
:root[data-parts-theme="dark"] :is(#seo-text p, .porto-sicon-box span, .porto-sicon-box p) { color: var(--site-fg); }
:root[data-parts-theme="dark"] #seo-text p a { color: var(--site-accent); }
:root[data-parts-theme="dark"] #MainContent h2,
:root[data-parts-theme="dark"] .cl-policy__h { color: var(--site-accent); }
:root[data-parts-theme="dark"] .cart-empty { color: var(--site-fg); }
/* the home's inline colours (the snapshot's style attributes), so these take !important in the dark */
:root[data-parts-theme="dark"] #seo-text h2.vertical-font,
:root[data-parts-theme="dark"] .porto-sicon-box > div > span[style] { color: var(--site-fg) !important; }
:root[data-parts-theme="dark"] .page-title, :root[data-parts-theme="dark"] .page-title .base { color: var(--site-fg); }
:root[data-parts-theme="dark"] .porto-sicon-box .btn-dark { border-color: var(--site-line); }

/* the kit's theme switch (parts/theme_switch.html, 40px, currentColor) between the account and the cart, in the header's ink */
.page-header .parts-theme-switch { flex: none; color: var(--site-fg); }
.page-header .parts-theme-switch:hover { color: var(--site-accent); }

/* 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 Orbital Parts mark in the logo's slot (Greg, 2026-11-09): the light one, and under the dark theme the dark one, as on orbitalparts.ca;
   160 x 32 fills the 160px desktop slot, and below it the mark takes the height TCI's logo had (64px, 32px on a phone) so the header keeps its height */
.page-header .header-main .logo .cl-hd__mark--dark { display: none; }
:root[data-parts-theme="dark"] .page-header .header-main .logo .cl-hd__mark--light { display: none; }
:root[data-parts-theme="dark"] .page-header .header-main .logo .cl-hd__mark--dark { display: block; }
@media (min-width: 768px) and (max-width: 991.98px) {
  .page-header .header-main .logo img.cl-hd__mark { width: 320px; height: auto; max-width: none; }
}
@media (max-width: 767.98px) {
  .page-header .header-main .logo { max-width: none; }
  .page-header .header-main .logo img.cl-hd__mark { width: 160px; height: auto; max-width: none; }
}

/* the theme's element defaults (its button padding and height, its input box) sit in @layer base and stop at the controls
   of the kit's pages (<main id="MainContent">), which the kit draws whole; the copied pages' main is #maincontent */
@layer base {
  #MainContent :where(button, input, select, textarea) { all: revert-layer; }
}

/* the affiliation line above the header (Greg, 2026-11-09), after orbitalparts.ca's strip: one line in capitals, centred,
   the page's ink on the band colour by day and at night; it sits in the flow above the top bar, so the sticky header
   measures from below it and nothing in the header moves. On a phone the sentence takes 2 lines at 13px. */
.cl-affil { display: flex; align-items: center; justify-content: center; min-height: 30px; padding: 6px 16px; box-sizing: border-box;
  background: var(--site-band); color: var(--site-fg); border-bottom: 1px solid var(--site-line); }
.cl-affil p { margin: 0; font: 500 12.5px/1.3 var(--site-font-body), sans-serif; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
@media (max-width: 639.98px) {
  .cl-affil { padding: 4px 16px; }
  .cl-affil p { font-size: 13px; }
}

/* the footer without the brand's logo (Greg, 2026-11-09): the theme's settings CSS styles its columns by position (the 2nd,
   the email, bottom-aligned; the 3rd, Tech Center, top-aligned with Account), so with the logo's column gone those rules
   follow the email and Tech Center up one place here */
.footer-middle > .container > .row > .col-lg-6:nth-child(1) { display: flex; align-items: flex-end; flex-wrap: wrap; }
.footer-middle > .container > .row > .col-lg-6:nth-child(1) .widget_text h3 { margin-right: 20px; padding-right: 30px; border-right: none; }
.footer-middle > .container > .row > .col-lg-4:nth-child(2) { display: block; align-self: flex-start; }
.footer-middle > .container > .row > .col-lg-4:nth-child(2) .widget_text h3 { margin-right: 0; padding-right: 0; }
/* its headings white on the black footer by day as at night (the theme's #555, Ask an Expert's inline) */
.page-footer :is(h3.widget-title, .widget h6) { color: var(--site-on-dark); }
.page-footer .widget h6[style] { color: var(--site-on-dark) !important; }