@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 {
  /* the kit's shop pages (the band, the listings, the product page) in the site's red and type (copy-site LAYOUT.md) */
  --parts-accent: var(--site-accent);
  --parts-accent-strong: #B81F20;
  --parts-font: var(--site-font-body);
  --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 plate under a photo: white in both themes, since the photos are drawn for white */
  --site-plate: #FFFFFF;
}
/* the dark page (data-parts-theme="dark" on <html>, the kit's night pick or the shopper's switch): the white page and
   the white header bar turn the kit's warm near black, text near white, rules a dark grey, cards a step up; the red
   strip, the black brand bar and the black footer stay as they are; the red fills stay and a red heading
   lifts a touch to read on the dark.
   The client's theme draws the chrome from its own stylesheets (static/theme/), which this file leaves alone: the
   rules after this block darken its surfaces from here. Photos keep their white plates (--site-plate). */
: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: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --parts-accent-strong: color-mix(in srgb, var(--parts-accent) 78%, #fff);
  --parts-band-bg: #24201C;
  --parts-band-ink: #FFFFFF;
  --parts-band-edge: #3D3833;
}
@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 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 COMP Cams's logo had (40px, 20px 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: 200px; 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: 100px; height: auto; max-width: none; }
}
/* a 390 phone: the footer's email column ran 13px past the edge and the top bar's rotated close button 8px past it */
@layer site {
  .footer-middle .widget_text { max-width: 100%; }
  .footer-middle .widget_text h3 { overflow-wrap: anywhere; }
  .porto-block-html-top { overflow: clip; }
}
/* the cart badge's number at 13px, the least a phone reads (the theme's is 10px in a 16px disc) */
.page-header .minicart-wrapper .action.showcart .counter.qty { min-width: 20px; height: 20px; padding: 0 4px; font-size: 13px; line-height: 20px; border-radius: 10px; top: -8px; right: -8px; }
/* full-contrast text and nothing under 13px on the theme's own parts (Greg 2026-10-29): the footer's column titles
   (#555 on the near-black footer), the menu drawer's links (#777), a copied page's paragraphs (#777) and the
   breadcrumb (10px) */
.page-wrapper .footer h3.widget-title, .page-wrapper .footer-middle h3.widget-title { color: #FFFFFF; }
.page-wrapper .navigation li.ui-menu-item > a, .page-wrapper .navigation li.ui-menu-item > a span { color: var(--site-fg) !important; }
.page-wrapper .column.main .label { font-size: 13px; }
.page-wrapper .column.main, .page-wrapper .column.main p, .page-wrapper .column.main li { color: var(--site-fg); }
.page-wrapper .breadcrumbs .items, .page-wrapper .breadcrumbs .items a, .page-wrapper .breadcrumbs .items strong { font-size: 13px; }
/* the copied pages (tech center, contact, the 404): the H1 as the landing pages draw it (proto-pages.css .pp-h1), not the
   theme's 20px light title, and no breadcrumb strip above it, since its last crumb repeats the H1 (Greg 2026-10-29) */
body:is(.cms-page-view, .cms-no-route) .page-main > .page-title-wrapper .page-title,
body:is(.cms-page-view, .cms-no-route) .page-main > .page-title-wrapper .page-title .base {
  font: 700 44px/1.05 var(--site-font-heading); letter-spacing: 0.5px; text-transform: uppercase; color: var(--site-fg);
}
body:is(.cms-page-view, .cms-no-route) .page-main > .page-title-wrapper .page-title { margin: 0 0 16px; }
body:is(.cms-page-view, .cms-no-route) .breadcrumbs { display: none; }
@media (max-width: 979.98px) {
  body:is(.cms-page-view, .cms-no-route) .page-main > .page-title-wrapper .page-title,
  body:is(.cms-page-view, .cms-no-route) .page-main > .page-title-wrapper .page-title .base { font-size: 36px; }
}
/* the technical resources boxes: the theme's 10.5 to 12.25px lines at 14px, the buttons square and 40px tall */
body.cms-page-view .column.main :is(.porto-sicon-description, .porto-sicon-header p) { font-size: 14px !important; line-height: 1.4 !important; }
body.cms-page-view .column.main a.btn { display: inline-flex; align-items: center; min-height: 40px; font-size: 14px !important; border-radius: 0 !important; }
/* the cam form's step labels at full contrast (the theme greys the steps not yet reached) */
body.cms-page-view .amcform-label, body.cms-page-view .amcform-step { color: var(--site-fg) !important; }
/* the theme's bare button, input and select rules (grey #777 text, a 40px line-height, .8em 2em padding, an 11.9px
   field) are unlayered, so they beat the kit's layered vehicle band and parts pages: inside the band's wrapper (.pp-band
   on a landing page, .cl-band from base.html) and the kit's main (#MainContent, not the policies' .cl-shop) each rolls
   back to the kit's own look */
body :is(.pp-band, .cl-band, main#MainContent:not(.cl-shop)) :is(button, input, select, textarea),
body :is(.pp-band, .cl-band, main#MainContent:not(.cl-shop)) :is(button:hover, button:focus, button:active) { all: revert-layer; }
/* a phone: 16px fields on the copied forms, 40px tap targets on the footer's links and the header's icons */
@media (max-width: 979.98px) {
  .page-wrapper .column.main :is(input:not([type=checkbox]):not([type=radio]), select, textarea) { font-size: 16px !important; }
  .page-footer .footer-middle li a { display: inline-flex; align-items: center; min-height: 40px; }
  .page-footer .footer-bottom address a { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .page-header a.wishlist, .page-header .minicart-wrapper .action.showcart { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
  .page-header .header-main .logo { min-height: 40px; }
}
/* the copied pages' text at full contrast (the theme's #777 body reaches paragraphs outside .column.main) */
body.cms-page-view .page-main :is(p, li, td) { color: var(--site-fg); }
@media (max-width: 979.98px) {
  /* 40px tap targets: the copied pages' fields and link lists, the menu drawer's tabs */
  .page-wrapper .column.main :is(input:not([type=checkbox]):not([type=radio]), select, button.ui-datepicker-trigger) { min-height: 40px; }
  body.cms-page-view .page-main li > a { display: inline-flex; align-items: center; min-height: 40px; }
  .page-wrapper .nav-sections-item-switch { display: flex; align-items: center; min-height: 40px; }
}

/* the dark page on the client's theme (static/theme/, unlayered, so these are unlayered too and name its boxes, never
   a bare tag, so the kit's own layer stays first on its pages): the root and the body (its fixed class, under the
   theme's white) behind an overscroll or a short page, the white header bar,
   the phone drawer and the cart panel take the page colour and its near-white ink */
:root[data-parts-theme="dark"],
:root[data-parts-theme="dark"] .cl-body,
:root[data-parts-theme="dark"] .page-wrapper,
:root[data-parts-theme="dark"] .page-header.type19,
:root[data-parts-theme="dark"] .page-header .header-main,
:root[data-parts-theme="dark"] .page-header .nav-sections,
:root[data-parts-theme="dark"] .minicart-wrapper .block-minicart { background-color: var(--site-bg); color: var(--site-fg); }
/* the theme's bare headings (h1-h6 near black, h2 red, a landing page's .pp-h2 near black): near white, and the red
   h2 lifted to read on the dark */
:where(:root[data-parts-theme="dark"]) :is(h1, h2, h3, h4, h5, h6) { color: var(--site-fg); }
:root[data-parts-theme="dark"] .page-wrapper h2:not(.pp-h2) { color: #E8393A; }
/* the phone drawer's open tab: its near-black word on the page colour */
:root[data-parts-theme="dark"] header.page-header .nav-sections-item-title.active,
:root[data-parts-theme="dark"] header.page-header .nav-sections-item-title.active > a { background-color: var(--site-bg); color: var(--site-fg); }
/* the header bar's icons (search, wish list, account, cart), the theme's near-black font glyphs */
:root[data-parts-theme="dark"] .page-header .header-main a,
:root[data-parts-theme="dark"] .page-header .minicart-wrapper .action.showcart,
:root[data-parts-theme="dark"] .page-header .minicart-wrapper .action.showcart::before { color: var(--site-fg); }
/* the Products and Tech Center panels (the theme's white), and the fields: the header's search and a copied page's form */
:root[data-parts-theme="dark"] .navigation .level0 .submenu { background-color: var(--site-bg); }
:root[data-parts-theme="dark"] .page-header .amsearch-input-wrapper .amsearch-input,
:root[data-parts-theme="dark"] .page-wrapper .column.main :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]), select, textarea) {
  background-color: var(--site-field-bg); color: var(--site-fg); border-color: var(--site-line);
}

/* the kit's theme switch in the header bar (shown at night): its box is no flex item, so by day the bar is as it was, and
   the theme's grey bordered button rules (button:not(.primary)) are undone, so it is a bare 40px icon in the bar's ink */
.page-header .cl-hd__theme { display: contents; }
.page-header .cl-hd__theme .parts-theme-switch,
.page-header .cl-hd__theme .parts-theme-switch:is(:hover, :focus, :active) {
  width: 40px; height: 40px; min-width: 0; margin: 0 0 0 8px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: inherit; line-height: 1;
}
/* a phone's bar has no room for a fifth icon beside the logo: at night the switch takes the wish list's place
   (a sign-in page here), so the icons sit where they do by day */
@media (max-width: 479.98px) {
  :root[data-parts-night] .page-header .header-right a.wishlist { display: none; }
}

/* 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; }