/* 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: #3C3C3C;
  --site-muted: #949494;
  --site-line: #DCDCDC;
  --site-band: #F3F3F3;
  --site-card: #F7F7F7;
  --site-accent: #EA5B0C;
  --site-accent-fg: #FFFFFF;
  --site-field-bg: #FFFFFF;
  --site-button-bg: #EA5B0C;
  --site-button-fg: #FFFFFF;
  --site-button-hover-bg: #3C3C3C;
  --site-button-hover-fg: #FFFFFF;
  --site-disabled-bg: #DCDCDC;
  --site-disabled-fg: #949494;
  --site-font-body: Roboto, Arial, Verdana, sans-serif;
  --site-font-heading: Roboto, Arial, Verdana, 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 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 affiliation line above everything (base.html), in the scrolled bar's #3c3c3c and white: sticky at the top of the window,
   so the fixed bar sits under it at its height (--cl-affil-h, which base.html measures) at the top and after scrolling */
.cl-affil { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; justify-content: center; min-height: 30px;
  padding: 6px 16px; box-sizing: border-box; background: var(--site-fg); color: var(--site-bg); border-bottom: 1px solid #000; }
.cl-affil p { margin: 0; font: 500 12.5px/17px var(--site-font-body); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
@media (max-width: 639.98px) {
  .cl-affil p { font-size: 13px; }
}
/* the theme sheet that fixes the bar at top: 0 loads after this one, hence .wrapper */
.wrapper .header-container { top: var(--cl-affil-h, 0px); }
.header-panel a.logo img.desktop-logo, .header-panel a.logo img.mobile-logo { top: 4px; }
@media (max-width: 979.98px) {
  .header-panel a.logo img.desktop-logo, .header-panel a.logo img.mobile-logo { top: 3px; }
}