@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: #F2F2F2;
  --site-fg: #333333;
  --site-muted: #898989;
  --site-line: #D0D0D0;
  --site-band: #E7E7E7;
  --site-card: #EAEAEA;
  --site-accent: #006BB4;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #F2F2F2;
  --site-button-bg: #006BB4;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #333333;
  --site-button-hover-fg: #F2F2F2;
  --site-disabled-bg: #D0D0D0;
  --site-disabled-fg: #898989;
  --site-font-body: proxima-nova, sans-serif;
  --site-font-heading: proxima-nova, sans-serif;
  --site-font-button: var(--site-font-body);
  --site-radius: 0;
  --site-max: 1320px;
  /* AutoMeter's gold button (.gold-btn in the client's theme: #FECB17 under #272727 text) and its white panels */
  --site-gold: #FECB17;
  --site-gold-fg: #272727;
  --site-panel: #FFFFFF;
  /* the chrome's own shades, one token each so the night block below can turn them */
  --site-ink: #272727;          /* AutoMeter's near black: the cart's quantity steppers (site/cart.css) */
  --site-photo: #FFFFFF;        /* the plate under a product photo: white in both themes */
  --site-lift: #D0D0D0;         /* the soft shadow under a white panel (the theme's, the rule's grey) */
  --site-field-line: #BEBEBE;   /* the cart's quantity box and steppers (site/cart.css) */
  --site-field-line-2: #C2C2C2; /* the cart's note box */
  --site-quiet: #555555;        /* the cart summary's small lines */
  /* the kit's shop pages: its main action draws white text on the accent, which gold cannot carry, so the accent is
     AutoMeter's near-black (its text and top bar), deepening to black on hover; the type is the theme's */
  --parts-accent: #272727;
  --parts-accent-strong: #000000;
  --parts-font: proxima-nova, sans-serif;
  --mx: calc(100vw / 390);
  --u: 1px;
}
/* the night (the kit's head block sets data-parts-theme="dark" on <html>, Site(dark="night")): every colour token
   above turned for a dark page in the kit's family (storefront-kit static/parts/tokens.css): a warm near black page,
   near-white text, dark grey rules, panels a step up, AutoMeter's blue lifted a touch to read on the dark, and the
   shop's main action in AutoMeter's gold with its near-black words. The black strip and the black footer stay,
   the white bar turns the page's colour, photos keep white plates and the logo its own yellow one. */
: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: #2E8FD8;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #1C1A18;
  --site-button-bg: #2E8FD8;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #F6F3EF;
  --site-button-hover-fg: #121110;
  --site-disabled-bg: #2A2622;
  --site-disabled-fg: #EBE6E0;
  --site-panel: #1C1A18;
  --site-ink: #F6F3EF;
  --site-lift: #000000;
  --site-field-line: #6B635B;
  --site-field-line-2: #6B635B;
  --site-quiet: #F6F3EF;
  --parts-accent: #FECB17;
  --parts-accent-strong: color-mix(in srgb, #FECB17 78%, #FFFFFF);
  --parts-cta-ink: #272727;
  --parts-band-go-ink: #272727;
  --parts-band-bg: #24201C;
  --parts-band-ink: #F6F3EF;
  --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: the mark centred in its row */
.site-header .site-branding > a { display: flex; align-items: center; text-decoration: none; }
@media screen and (max-width: 767px) {
  /* the phone bar: 16px gutters, and the menu, account and cart are 40px taps */
  .mobile-header .upper-nav { box-sizing: border-box; padding: 3px 16px; }
  .mobile-header #mobile-menu-btn, .mobile-header .account-info a.cart-container, .mobile-header .account-info a.showcart {
    display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 40px; min-height: 40px; }
  .mobile-header #mobile-menu-btn { justify-content: flex-start; font-size: 18px; }
  header.mobile-header .center { top: 0; display: flex; justify-content: center; }
  header.mobile-header .center .site-branding { position: static; transform: none; width: auto; max-width: none; }
  header.mobile-header .center .site-branding img { width: 90px; height: auto; margin: 0; }
}
@media screen and (max-width: 767px) {
  /* the phone drawer: a 16px search box (no zoom on focus) and 40px taps for its search button and menu links */
  .mobile-nav .search-form input.search-inputs { font-size: 16px; min-height: 40px; }
  .mobile-nav .search-form button.submit-btn { min-width: 40px; min-height: 40px; }
  .mobile-nav #primary-menu a { display: inline-flex; align-items: center; min-height: 40px; }
}
/* the copied client listings (templates/site/): no facet count beside a filter ("Boost Gauge (15)") and no "3636 Products" over the grid, rule 5 */
.answer-products-count, #products-count { display: none !important; }

/* the night on the client's theme (static/theme/css, unlayered, never edited): its grey page and white bar take the
   page's colour and its menu the page's text; the black strip and the footer are black in both themes */
:root[data-parts-theme="dark"] .cl-body { background-color: var(--site-bg); color: var(--site-fg); }
:root[data-parts-theme="dark"] .site-header.desktop-header { background-color: var(--site-bg); }
:root[data-parts-theme="dark"] .desktop-header #primary-menu a { color: var(--site-fg); }
:root[data-parts-theme="dark"] .desktop-header { box-shadow: 0 1px 3px 10px rgba(0, 0, 0, 0.5); }
:root[data-parts-theme="dark"] .mobile-header .background-black { border-bottom-color: var(--site-bg); }
/* fields on a page: the theme draws every input white */
:root[data-parts-theme="dark"] main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), select, textarea) { background-color: var(--site-field-bg); color: var(--site-fg) !important; -webkit-text-fill-color: var(--site-fg); }
:root[data-parts-theme="dark"] main :is(input, textarea)::placeholder { color: #C9C2B8; -webkit-text-fill-color: #C9C2B8; }
/* the copied pages: AutoMeter's red as text lifted to read on the dark, the white and grey panels a step up from the page */
:root[data-parts-theme="dark"] :is(.global-breadcrumb, .global-breadcrumb ul li, .global-breadcrumb ul a, .filter-container .breadcrumb, .filter-container .breadcrumb ul a) { color: #F2556A; }
:root[data-parts-theme="dark"] .shop-by-section { background-color: var(--site-bg); }
:root[data-parts-theme="dark"] .section-overlay { background-color: var(--site-panel); box-shadow: 2px 4px 8px #000000; }
/* the cart (the client's Magento cart, styles-m.css and wp-style.css): its white box and grey summary a step up */
:root[data-parts-theme="dark"] .checkout-cart-index .columns { background: var(--site-panel); }
:root[data-parts-theme="dark"] .checkout-cart-index .page-title { color: var(--site-fg); }
:root[data-parts-theme="dark"] .checkout-cart-index :is(.product-item-name a, .cart.table-wrapper .price, .cart-summary .price, .fm-cart-ship, .fm-cart-stub) { color: var(--site-fg); }
:root[data-parts-theme="dark"] .checkout-cart-index .columns .cart.main.actions :is(button, a.action.continue) { background: var(--site-bg) !important; color: var(--site-fg) !important; outline: 1px solid var(--site-line); outline-offset: -1px; }
:root[data-parts-theme="dark"] .checkout-cart-index .columns .cart.main.actions :is(button, a.action.continue):hover { background: var(--site-fg) !important; color: var(--site-bg) !important; }
:root[data-parts-theme="dark"] .checkout-cart-index :is(.cart-empty a, .cart.table-wrapper .actions-toolbar > .action-delete::before) { color: var(--site-fg); }
:root[data-parts-theme="dark"] .section-overlay h1:not(.white-btn),
:root[data-parts-theme="dark"] .section-overlay h2:not(.white-btn),
:root[data-parts-theme="dark"] .section-overlay h3:not(.white-btn),
:root[data-parts-theme="dark"] .section-overlay h4:not(.white-btn),
:root[data-parts-theme="dark"] .section-overlay p:not(.white-btn),
:root[data-parts-theme="dark"] .section-overlay a:not(.white-btn),
:root[data-parts-theme="dark"] .section-overlay span:not(.white-btn) { color: var(--site-fg); }
:root[data-parts-theme="dark"] .checkout-cart-index .fm-qty__step:hover { background: var(--site-gold); color: var(--site-gold-fg); }
/* the kit's theme switch (kit 0.10, shown at night only), between Account and Cart in both bars, in the links' colour */
.cl-theme-li { display: none; }
:root[data-parts-night] .cl-theme-li { display: flex; align-items: center; }
.account-info .parts-theme-switch:hover { color: var(--site-gold); }
/* a 40px target on the 21px row of the desktop top bar, centred on it without making the row taller */
.desktop-header .cl-theme-li .parts-theme-switch { margin: -10px 0 -9px; }
/* the vehicle picker (site/ymm.css over the theme's selects): dark fields with light words, the chevron block and Clear a step up */
:root[data-parts-theme="dark"] .ymm .mmy-dropdown { background-color: var(--site-bg); color: var(--site-fg); box-shadow: inset 0 0 0 1px var(--site-field-line); }
:root[data-parts-theme="dark"] .ymm .mmy-dropdown:disabled { opacity: 1; background-color: var(--site-disabled-bg); color: var(--site-disabled-fg); }
:root[data-parts-theme="dark"] .ymm .select-container::after { background: var(--site-field-line); color: var(--site-fg); }
:root[data-parts-theme="dark"] .ymm :is(.ymm__clear, .ymm__clear:hover, .ymm__clear:focus) { background: var(--site-bg); color: var(--site-fg) !important; box-shadow: inset 0 0 0 1px var(--site-field-line); }