/* --- 1. MOBILE HEADER: COORDINATE LOCK --- */
@media (max-width: 800px) {
  /* Create a rigid container for the whole header */
  .header {
    display: block !important;
    position: relative !important;
    height: 130px !important;
    min-height: 130px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    overflow: visible !important;
    z-index: 100 !important; }
  /* THE GREY BAR: Locked to the very top */
  .header-promo-bar,
  div[style*="background-color: grey"],
  div[style*="background-color: #808080"] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 45px !important;
    z-index: 10 !important;
    margin: 0 !important; }
  /* THE LOGO: Locked below the grey bar */
  .header-logo {
    position: absolute !important;
    top: 45px !important;
    left: 0 !important;
    width: 100% !important;
    height: 85px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    background: #ffffff !important; }
  .header-logo-image {
    max-height: 55px !important;
    width: auto !important; }
  /* THE MENU BUTTON: Locked inside the white area only */
  .mobileMenu-toggle {
    display: flex !important;
    position: absolute !important;
    left: 10px !important;
    top: 87px !important;
    /* Positions center of button in white area */
    transform: translateY(-50%) !important;
    z-index: 1000 !important;
    border: none !important;
    background: transparent !important;
    width: 44px !important;
    height: 44px !important; }
  /* THE CAROUSEL: Snapped to the bottom of the header */
  .heroCarousel-wrapper {
    margin-top: 0 !important;
    z-index: 1 !important;
    position: relative !important; } }

/* --- 2. MENU OPEN FIX (Nuclear Layering) --- */
/* Forces the menu to sit on top of the entire page */
.navPages-container {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 999999 !important;
  background: #ffffff !important;
  display: none; }

/* BigCommerce state when menu is open */
.is-open .navPages-container,
.has-activeNavPages .navPages-container {
  display: block !important;
  visibility: visible !important; }

/* THE 'X' BUTTON: Stays visible on top of the open menu */
.is-open .mobileMenu-toggle {
  position: fixed !important;
  z-index: 1000000 !important;
  left: 15px !important;
  top: 15px !important;
  transform: none !important; }

/* --- 3. DESKTOP CLS PROTECTION --- */
@media (min-width: 801px) {
  .header {
    min-height: 145px !important;
    height: auto !important; }
  .heroCarousel-wrapper {
    height: 595px !important;
    min-height: 595px !important; } }

/* --- 4. CLEANUP & SEARCH --- */
#sticky-bar-wrapper {
  display: none !important; }

.navPages-quickSearch .form-input {
  padding-left: 60px !important; }

.card-figure {
  aspect-ratio: 1 / 1 !important; }