@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-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;
  /* the kit's shop pages and band in the brand's colour, type and one square corner (storefront-kit ADRs 0006, 0007) */
  --parts-accent: var(--site-accent);
  --parts-accent-strong: var(--site-accent);
  --parts-font: var(--site-font-body);
  --parts-radius: var(--site-radius);
  --site-plate: #FFFFFF;        /* under a photo or a part's picture: white in both themes, since they are drawn for white */
  --site-tag-ink: #000000;      /* Authorized Reseller under the logo */
  --site-red-text: #DD2728;     /* red words on the page */
  --site-hero: #222529;         /* the home's veil over its photo, dark in both themes */
  --site-hero-ink: #FFFFFF;     /* the words on it */
}
@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 email line that stands where a copied page's form posted only to the journal: full contrast */
.cl-mail { color: var(--site-tag-ink); }
.cl-mail a { color: var(--site-red-text); }
/* text a buyer reads is 13px or more and a field 16px (the shop page rules): the theme's small sizes lifted;
   !important since the theme sets them inline or in the page stylesheets that load after this one */
.minicart-wrapper .counter.qty { min-width: 20px; height: 20px; line-height: 20px; }
.minicart-wrapper .counter-number { font-size: 13px !important; }
p.hero-slide-subtitle { font-size: max(13px, 1.125em) !important; }
.btn.btn-modern { font-size: 13px !important; }
.product-label { font-size: 13px !important; }
.porto-sicon-box p { font-size: max(13px, .875rem) !important; }
.product-item-details .product_price .price-box > .price { font-size: max(13px, 1em) !important; }
/* 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; }

/* Authorized Reseller under the logo, in the header's Poppins, black on white (every brand site, cl-hd__tag) */
.page-header .header-main .logo { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.page-header .logo .cl-hd__tag { color: var(--site-tag-ink); font: 700 14px/1 Poppins, sans-serif; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 991.98px) {
  .page-header .header-main .logo { gap: 3px; }
  .page-header .logo .cl-hd__tag { font-size: 13px; letter-spacing: 0.5px; }
}

/* 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 Edelbrock's logo had (55px, 27px 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: 275px; 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: 135px; height: auto; max-width: none; }
}

/* The header's controls that do something on the page are buttons (a link goes to a page), drawn as the theme drew
   them as links: the drawer's Menu / Brands / Account tabs, the Products, Tech center and Company words and the search
   toggle. The header sits above the vehicle band so its dropdowns and the minicart are not covered by it. */
header.page-header { z-index: 21; }
header.page-header button.nav-sections-item-switch,
header.page-header button.level-top,
header.page-header button.search-toggle-amasty {
  -webkit-appearance: none; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none;
  margin: 0; font-family: inherit; letter-spacing: inherit; color: #1D1E20; cursor: pointer; height: auto;
}
header.page-header .nav-sections-item-title { padding-top: 0; }
header.page-header button.nav-sections-item-switch {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0 4px;
  font-size: 13px; font-weight: 400; line-height: 21px; color: #fff;
}
header.page-header .nav-sections-item-title.active > button.nav-sections-item-switch { color: #1D1E20; }
header.page-header .nav-sections-item-title[aria-controls="store.menu"] > button.nav-sections-item-switch:before {
  font-size: 14px; line-height: 1; content: '\f827'; font-family: porto-icons; display: inline-block; font-weight: 400;
  margin: -2px 5px 0 0;
}
header.page-header button.level-top { font-size: 16px; font-weight: 700; text-transform: uppercase; text-align: left; }
header.page-header .navigation .level0.parent > button.level-top:after {
  content: '\e81c'; display: inline-block; font-family: 'porto-icons'; vertical-align: top; margin-left: 5px; line-height: 42px;
}
@media (max-width: 991px) {
  header.page-header .navigation li.level0 > button.level-top { display: block; width: 100%; padding: 13px 36px 13px 15px; line-height: 40px; }
}
@media (min-width: 992px) {
  header.page-header .navigation li.level0 > button.level-top { padding: 26px 50px 31px 0; line-height: 25px; }
}
header.page-header .search-area button.search-toggle-amasty {
  display: inline-block; position: relative; top: 1px; width: 40px; height: 40px; padding: 0; font-size: 20.5px;
  font-weight: 400; line-height: 40px; text-align: center;
}
header.page-header .search-area button.search-toggle-amasty .porto-icon-magnifier::before { font-weight: 600; }

/* The copied pages' breadcrumb read at the theme's 10px. */
.page-wrapper > .breadcrumbs, .page-wrapper > .breadcrumbs .items { font-size: 13px; }
/* A phone's taps are 40px: the cart button, the carousels' dots and arrows, the section headings' links, the cards'
   names, the seller line's address and the breadcrumb. */
@media (max-width: 767px) {
  .minicart-wrapper a.action.showcart { display: inline-flex; align-items: center; justify-content: center; min-width: 40px !important; min-height: 40px; }
  .owl-carousel .owl-dots button.owl-dot { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0; }
  .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { min-width: 40px; min-height: 40px; }
  h2.section-title a { display: inline-flex; align-items: center; min-height: 40px; }
  .product-item-info .product-item-link { display: inline-block; min-height: 40px; }
  .cl-seller a { display: inline-block; padding: 9px 0; }
  .page-wrapper > .breadcrumbs .items { align-items: center; }
  .page-wrapper > .breadcrumbs .items > li > a { display: inline-block; min-width: 40px; line-height: 40px; }
}
/* The copied tech pages read at full contrast (the theme's body #777), links keep the red; their buttons are square. */
main.page-main .column.main, main.page-main .column.main :is(p, li, dd, dt):not(a, a *) { color: var(--site-fg); }
main.page-main .btn { border-radius: var(--site-radius); }
@media (max-width: 767px) {
  /* the phone menu button: 40px square, the icon where it was */
  .page-header .nav-toggle { padding: 10px 12px 10px 11px; margin-top: -3px; margin-bottom: -3px; border-radius: var(--site-radius); }
  /* a download link alone in a cell of the copied tables is a 40px tap */
  main.page-main td > a:only-child { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
}

/* the kit's theme switch (shown at night only), between the account and the cart, in the header's ink */
.page-header .header-right .parts-theme-switch { flex: none; margin: 0 4px; color: var(--site-fg); }
/* the theme fills every button on hover and focus: the switch keeps none, the kit's look */
.page-header .header-right .parts-theme-switch:is(:hover, :focus, :active) { color: var(--site-accent); background: none; border: 0; box-shadow: none; }

/* ---------- the dark theme (the kit's data-parts-theme="dark", by the visitor's clock or their pick) ----------
   The page in the kit's warm near black, text near white, rules dark grey, cards and fields a step up; the red promo
   line, the black brand strip and the dark footer stay as they are, the white header bar turns the page colour, the
   red stays on buttons and lifts for words, photos keep white plates. The client's theme paints the body, the header
   and its menus itself, so those take rules here; the landing pages, the title band and the cart read the tokens.
   The vehicle band takes the kit's dark band, since this site leaves the band's tokens to the kit. */
: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-field-bg: #1C1A18;
  --site-button-hover-bg: #E8494A;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-accent-text: #FF6B5E;
  --site-tag-ink: #F6F3EF;
  --site-red-text: #FF6B5E;
  --amsearch-color-highlight: #FF6B5E;
}
: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"] header.page-header button.level-top,
:root[data-parts-theme="dark"] header.page-header button.level-top > span,
:root[data-parts-theme="dark"] header.page-header .navigation .level0.parent > button.level-top::after,
:root[data-parts-theme="dark"] .page-title-wrapper .page-title,
:root[data-parts-theme="dark"] .cl-policy__h { color: var(--site-fg); }
/* the theme's own panels, opaque in the page colour: the Products dropdown, the search box and its results, the
   minicart; their words near white and their red lifted (!important: the theme's rules run 4 or 5 classes deep) */
:root[data-parts-theme="dark"] .navigation .level0 .submenu,
:root[data-parts-theme="dark"] .amsearch-result-section,
:root[data-parts-theme="dark"] .minicart-wrapper .block-minicart { background-color: var(--site-bg) !important; color: var(--site-fg) !important; }
:root[data-parts-theme="dark"] .navigation .level0 .submenu a,
:root[data-parts-theme="dark"] .navigation .level0 .submenu a span,
:root[data-parts-theme="dark"] .amsearch-result-section .amsearch-link,
:root[data-parts-theme="dark"] .amsearch-result-section .price,
:root[data-parts-theme="dark"] .minicart-wrapper .block-minicart :is(strong, span, a, p, .subtitle) { color: var(--site-fg) !important; }
:root[data-parts-theme="dark"] .amsearch-result-section .amsearch-link b,
:root[data-parts-theme="dark"] .amsearch-tab-items .amsearch-link { color: var(--site-red-text) !important; }
:root[data-parts-theme="dark"] .amsearch-input { background-color: var(--site-field-bg) !important; color: var(--site-fg) !important; }
/* the phone drawer (Menu, Brands, Account): its panel and open tab a step up from the page, its rules dark grey */
@media (max-width: 991px) {
  :root[data-parts-theme="dark"] .nav-sections,
  :root[data-parts-theme="dark"] .nav-sections-item-title.active,
  :root[data-parts-theme="dark"] .nav-sections-item-content { background-color: var(--site-card) !important; color: var(--site-fg) !important; }
  :root[data-parts-theme="dark"] header.page-header .nav-sections-item-title.active > button.nav-sections-item-switch { color: var(--site-fg); }
  :root[data-parts-theme="dark"] .nav-sections .navigation li,
  :root[data-parts-theme="dark"] .nav-sections .navigation .level0 > .level-top { border-color: var(--site-line) !important; }
  :root[data-parts-theme="dark"] .nav-sections-item-content a,
  :root[data-parts-theme="dark"] .nav-sections .header.links :is(p, span) { color: var(--site-fg) !important; }
}
/* the header's search, account and cart icons, drawn in the theme's grey for a white bar */
:root[data-parts-theme="dark"] .page-header .header-main .header-right :is(a, button, i) { color: var(--site-fg); }
/* the theme's element rules reach every page, the kit's included: its white fields and its near-black or red headings
   take the dark page's field and inherit the ink of the box they sit in (the vehicle band keeps the kit's own fields) */
:root[data-parts-theme="dark"] :is(input:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=hidden]), select, textarea):not(.kit-band *) {
  background-color: var(--site-field-bg); color: var(--site-fg); border-color: var(--site-line);
}
:root[data-parts-theme="dark"] :is(h1, h2, h3, h4) { color: inherit; }