/*以下专属透明导航栏start*/

body:has(.joe_tran-header) .shopify-section-header-sticky sticky-header,
.index:has(.joe_tran-header) .shopify-section-header-sticky sticky-header,
 .page:has(.joe_tran-header) .shopify-section-header-sticky sticky-header,
 body:has(.joe_tran-header) .shopify-section-header-sticky sticky-header.gradient  {
  background: transparent;
    margin-bottom: -100%;
}

@media screen and (max-width: 749px) {
  body:not(:has(.joe_tran-header)) .shopify-section-header-sticky sticky-header.gradient,
  body:has(.joe_tran-header):has(details.menu-opening) .shopify-section-header-sticky sticky-header.gradient 
 {
  background: rgba(255, 255, 255, 1);
    
}
}



@media screen and (min-width: 750px) {
  body:not(:has(.joe_tran-header)) .shopify-section-header-sticky sticky-header.gradient,
  body:has(.joe_tran-header):has(details.menu-opening) .shopify-section-header-sticky sticky-header.gradient,
  body:has(.joe_tran-header):has(.mega-menu[open]) .shopify-section-header-sticky sticky-header.gradient,
  body:has(.joe_tran-header):has(details[open]) .shopify-section-header-sticky sticky-header.gradient 
  {
  background: rgba(255, 255, 255, 1);
}

/*
  .gradient:has(.joe_tran-header) .shopify-section-header-sticky.scrolled-past-header sticky-header ,
  .index:has(.joe_tran-header) .shopify-section-header-sticky.scrolled-past-header sticky-header ,
  .page:has(.joe_tran-header) .shopify-section-header-sticky.scrolled-past-header sticky-header,

   body:has(.joe_tran-header):has(details.menu-opening) .shopify-section-header-sticky sticky-header.gradient


   height: 0px;
    transition: height .2s ease-in;


   height: 48px; height: 60px;
   */
}



.page:has(.joe_tran-header),
.index:has(.joe_tran-header),
body:has(.joe_tran-header) {
    
  .joe-header {
    .header__menu-item span {
    color:white !important;
  }
    
    .header__heading-logo-wrapper {
      color:white;
    }
    .header__menu-item .icon-caret {
      color:white;
  }
  .header__heading-logo {
      display: none;
  }
    .header__heading-logo_transparent {
      display: block;
  }

  .header__icons span.svg-wrapper path,
  svg.icon.icon-search path,
  svg.icon.icon-hamburger path{
      stroke: white;
      color: white;
  }
  }
}


body:not(:has(.joe_tran-header)),
.index:not(:has(.joe_tran-header)){
    .joe-header .header__menu-item span {
      color: rgba(34, 34, 34, 1) !important;
    }
    .joe-header .header__heading-logo-wrapper {
        color:rgba(34, 34, 34, 1);
    }
    .joe-header .header__menu-item .icon-caret {
        color:rgba(34, 34, 34, 1);
    }
  
    .joe-header .header__heading-logo{
        display: block;
    }

    .joe-header .header__heading-logo_transparent {
        display: none;
    }

    .joe-header .header__icons span.svg-wrapper path,
    .joe-header  svg.icon.icon-search path,
    .joe-header svg.icon.icon-hamburger path{
        stroke:rgba(34, 34, 34, 1);
    }
}



body:has(.joe_tran-header):has(details.menu-opening),
body:has(.joe_tran-header):has(.mega-menu[open]),
body:has(.joe_tran-header):has(details[open])   {
  .joe-header .header__menu-item span {
    color: rgba(34, 34, 34, 1) !important;
  }
  .joe-header .header__heading-logo-wrapper {
      color:rgba(34, 34, 34, 1);
  }
  .joe-header .header__menu-item .icon-caret {
      color:rgba(34, 34, 34, 1);
  }
  .joe-header .header__heading-logo{
      display: block;
  }

  .joe-header .header__heading-logo_transparent {
      display: none;
  }

  details[open]>.header__menu-item span,
   details[open]>.header__menu-item .icon-caret {
    color:rgba(34, 34, 34, 1) !important;
  }
  
  .joe-header .header__icons span.svg-wrapper path,
  .joe-header  svg.icon.icon-search path,
  .joe-header svg.icon.icon-hamburger path{
      stroke:rgba(34, 34, 34, 1);
      color: rgba(34, 34, 34, 1);
  }
}

/*body:has(.joe_tran-header)  details[open]>.menu-drawer, 
body:has(.joe_tran-header) details[open]>.menu-drawer__submenu {
    transition: transform 0.4s ease, visibility 0.4s ease;
}

body:has(.joe_tran-header) header-drawer .menu-drawer {
      transform: translateY(-100%);
}
      */
/*以上专属透明导航栏end*/
