/* header.css: the compcams.com header on our stack; the theme's stylesheets do the look, this only covers what the
   theme's scripts and its server used to give it. */

/* the cart badge reads 0 on an empty cart, as the theme's does; the kit's scripts write an empty badge for 0 */
.minicart-wrapper .counter-number:empty::before { content: '0'; }

/* the brand bar: each logo's box is fixed, and its colour image sits stacked on the grey one and shows on hover by
   opacity alone, so nothing moves under the pointer in any browser (the theme swapped the src in a script, and an
   image that is decoding can be 0 by 0 for a frame, which drops the pointer out and loops the swap). COMP Cams, this
   store, is in colour already and has none. */
.main-panel-top .brands img { width: 115px; height: 34px; display: block; transition: none; }
.main-panel-top .brands a { position: relative; display: block; }
.main-panel-top .brands .hd-brand-on { position: absolute; top: 0; left: 0; opacity: 0; }
.main-panel-top .brands a:hover .hd-brand-on { opacity: 1; }
.main-panel-top .brands a:hover .hd-brand-off { opacity: 0; }

/* Products is no link: header.js opens its dropdown on a click or Enter as hover does, and the dropdown ends on the
   theme's primary button to the listing of every part (/parts/search) */
.page-header .sw-megamenu .cc-menu-word { cursor: pointer; }
.sw-megamenu.navigation li.level0.fullwidth.cc-open > .submenu { visibility: visible; opacity: 1; }
.sw-megamenu.navigation li.level0 .submenu .cc-all-products { clear: both; padding-top: 10px; }
.sw-megamenu.navigation li.level0 .submenu .cc-all-products a.action.primary {
  display: inline-block; width: auto; padding: 12.8px 32px; border: 1px solid #000; border-radius: 0; background: #000;
  color: #fff; font-size: 16px; font-weight: 700; line-height: 22.86px; letter-spacing: -0.24px; text-transform: none;
}
.sw-megamenu.navigation li.level0 .submenu .cc-all-products a.action.primary:hover,
.sw-megamenu.navigation li.level0 .submenu .cc-all-products a.action.primary:focus { background: #1d1e20; border-color: #1d1e20; color: #fff; }
/* the dark page: the button turns near white with dark words, since a black one sinks into the dark panel */
:root[data-parts-theme="dark"] .sw-megamenu.navigation li.level0 .submenu .cc-all-products a.action.primary { border-color: var(--site-fg); background: var(--site-fg); color: var(--site-bg); }
:root[data-parts-theme="dark"] .sw-megamenu.navigation li.level0 .submenu .cc-all-products a.action.primary:is(:hover, :focus) { border-color: var(--site-muted); background: var(--site-muted); color: var(--site-bg); }
@media (max-width: 991px) {
  .sw-megamenu.navigation li.level0 .submenu .cc-all-products { padding: 8px 15px 15px; }
}