/* Optional page-level overlay navbar behavior.
   Enable per-template with:
   {% set overlayDesktopNavbar = true %}
*/

@media (min-width: 992px) {
  .has-overlay-navbar-desktop #mainNav.shop-main-nav.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    isolation: isolate;
    background-color: rgba(255, 255, 255, 0.02) !important;
    box-shadow: none !important;
    transition: background-color 220ms ease, box-shadow 220ms ease;
  }

  .has-overlay-navbar-desktop #mainNav.shop-main-nav.navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.10) 8%,
      rgba(255, 255, 255, 0.80) 92%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 0;
  }

  .has-overlay-navbar-desktop #mainNav.shop-main-nav.navbar > * {
    position: relative;
    z-index: 1;
  }

  .has-overlay-navbar-desktop.is-overlay-nav-scrolled #mainNav.shop-main-nav.navbar {
    background-color: rgba(255, 255, 255, 0.72) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.04) !important;
  }

  .has-overlay-navbar-desktop.is-overlay-nav-scrolled #mainNav.shop-main-nav.navbar::before {
    background: rgba(255, 255, 255, 0.30);
  }

  /* Keep default mt-navbar in markup, but cancel it on desktop when overlay navbar is active. */
  .has-overlay-navbar-desktop .mt-navbar {
    margin-top: 0 !important;
  }

  /* Home hero: when overlay navbar is active, don't subtract navbar height. */
  .has-overlay-navbar-desktop #home-banner-slot-1 .carousel-item,
  .has-overlay-navbar-desktop #home-banner-slot-1 .carousel-item > a,
  .has-overlay-navbar-desktop #home-banner-slot-1 .carousel-item > img,
  .has-overlay-navbar-desktop #home-banner-slot-1 .home-slot-hero-image {
    height: 100vh;
  }
}