@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-accent-ink: var(--site-accent);  /* the red as text (a link, a price): lifted on the dark page */
  --site-ink: #222529;        /* the theme's near black: the cart's words */
  --site-ink-2: #1D1E20;      /* the home's and the footer's near black */
  --site-rule: #E7E7E7;       /* the cart's rules */
  --site-hover: #F4F4F4;      /* a stepper or a field on hover */
  --site-photo: #FFFFFF;      /* the plate under a photo: white in both themes */
  --site-dark-fill: #1D1E20;  /* the signup's button, the theme's dark fill */
  --site-dark-fg: #FFFFFF;    /* ink on the red or near-black fills, in both themes */
  --site-ink-3: #131414;      /* the home's promise titles */
  --site-black: #000000;      /* the home's Install guides title */
  --site-edge: #1D1E20;       /* the home stepper's edge */
  --site-checkout-bg: #222529;
  --site-checkout-hover: #31373D;
  --site-error-bg: #FAE5E5;
  --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, Site(dark="night")): the kit stamps data-parts-theme="dark" on <html> from 21:30 to 04:30
   by the visitor's clock, or when the shopper picks it. The white header bar, the page and the cards turn the kit's
   warm near black, text near white; the red bar, the near-black top strip, the banners and the footer stay as they are;
   photos keep white plates; the red fills stay FAST's red and the red as text lifts to read. */
: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-ink: #FF5552;
  --site-field-bg: #1C1A18;
  --site-button-hover-bg: #B81E1F;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-ink: #F6F3EF;
  --site-ink-2: #F6F3EF;
  --site-rule: #3D3833;
  --site-hover: #2A2622;
  --site-dark-fill: #2A2622;
  --site-ink-3: #F6F3EF;
  --site-black: #F6F3EF;
  --site-edge: #6B635B;
  --site-checkout-bg: #DD2728;
  --site-checkout-hover: #B81E1F;
  --site-error-bg: #33140F;
  --site-spinner: #3D3833;
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #36312C;
}
/* 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 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 kit's theme switch (the kit shows it at night), between the account and the cart in the header's ink */
.page-header .header-main .parts-theme-switch { flex: none; margin: 0 4px; color: var(--site-fg); }
.page-header .header-main .parts-theme-switch:hover { color: var(--site-accent); }

/* the logo's link in the header: its mark at the left of its box */
.page-header .header-main .logo { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* 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 FAST's logo had (44px, 22px 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: 220px; 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: 110px; height: auto; max-width: none; }
}

/* the client's theme (theme/css, the Porto theme as captured) in the dark: its own stylesheets stay as captured, so the
   dark page is drawn here over them, element by element, each rule under the attribute and inert in the light */
:root[data-parts-theme="dark"] .cl-page,
:root[data-parts-theme="dark"] .page-header { background-color: var(--site-bg); color: var(--site-fg); }
/* the header: the menu's words, the search, account and cart icons; the Products dropdown and the phone drawer opaque */
:root[data-parts-theme="dark"] .page-header .header-main a,
:root[data-parts-theme="dark"] .page-header .header-main .level-top span,
:root[data-parts-theme="dark"] .page-header .header-main .action.showcart,
:root[data-parts-theme="dark"] .page-header .header-main .action.nav-toggle,
:root[data-parts-theme="dark"] .page-header .header-main .nav-sections-item-switch { 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-item-content,
:root[data-parts-theme="dark"] .amsearch-result-section { background-color: var(--site-bg); color: var(--site-fg); }
:root[data-parts-theme="dark"] .nav-sections-item-title { background-color: var(--site-card); border-color: var(--site-line); }
:root[data-parts-theme="dark"] .amsearch-input { background-color: var(--site-field-bg); color: var(--site-fg); border-color: var(--site-line); }
:root[data-parts-theme="dark"] .page-header { --theme-color: var(--site-fg); }
/* the home: the section titles, the category labels, the product tiles' names and prices */
:root[data-parts-theme="dark"] .section-title,
:root[data-parts-theme="dark"] .section-title a,
:root[data-parts-theme="dark"] .inline-title,
:root[data-parts-theme="dark"] .inline-title a,
:root[data-parts-theme="dark"] .thumb-info-title .category-label,
:root[data-parts-theme="dark"] .product-item-name,
:root[data-parts-theme="dark"] .product-item-link,
:root[data-parts-theme="dark"] .product-item .price-box .price { color: var(--site-fg); }
/* the footer: its headings and lines near white, its red link lifted */
:root[data-parts-theme="dark"] .page-footer .widget-title,
:root[data-parts-theme="dark"] .page-footer h6,
:root[data-parts-theme="dark"] .page-footer a,
:root[data-parts-theme="dark"] .page-footer li,
:root[data-parts-theme="dark"] .page-footer address { color: var(--site-fg); }
:root[data-parts-theme="dark"] .page-footer b,
:root[data-parts-theme="dark"] .page-footer .text-color-primary a { color: var(--site-accent-ink); }
/* the page titles: the theme's near-black h1 sits over the kit's and the copied pages' own (on the body's fixed
   class from base.html, so the rule is the site's markup and not a bare element rule, doctor's check 15) */
:root[data-parts-theme="dark"] .cl-page h1,
:root[data-parts-theme="dark"] .page-title { color: var(--site-fg); }
:root[data-parts-theme="dark"] .cl-policy__h { color: var(--site-accent-ink); }
/* the copied pages (faq, contact, guides, software, wiring): headings near white, links and red titles lifted,
   the FAQ's tabs and questions on the card colour */
:root[data-parts-theme="dark"] .column.main :is(h2, h3, h4, h5, h6, .warning):not(.text-color-primary, .tab-title),
:root[data-parts-theme="dark"] .mgz-element-inner :is(h3, h4, h5):not(.text-color-primary) { color: var(--site-fg); }
:root[data-parts-theme="dark"] .column.main a:not([class]),
:root[data-parts-theme="dark"] .column.main .tab-title { color: var(--site-accent-ink); }
:root[data-parts-theme="dark"] .btn-tab,
:root[data-parts-theme="dark"] .column-collapse-static .collapse-item .top button:not(.active) { background-color: var(--site-card); color: var(--site-fg); border-color: var(--site-line); }
/* the kit's product page takes the theme's red h2: lifted to read on the dark page */
:root[data-parts-theme="dark"] #MainContent h2 { color: var(--site-accent-ink); }
/* the side cart: the theme's off-canvas minicart opaque on the page colour */
:root[data-parts-theme="dark"] .fas-cart .block-minicart { background-color: var(--site-bg); color: var(--site-fg); }
/* the home sliders' dots: the picked one near white */
:root[data-parts-theme="dark"] :is(#featured_new_product, #featured_popular_product) .owl-dot.active span { color: var(--site-fg); }

/* 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 near-black footer by day too (the theme drew Email Customer Service in the footer's own colour and the column titles #555) */
.page-footer .footer-middle :is(.widget-title, h6) { color: var(--site-dark-fg); }