/* Keep navigation in its original layout while it stays at the viewport edge. */
:root {
  --storefront-header-height: 88px;
  scroll-padding-top: calc(var(--storefront-header-height) + 20px);
}

.classic-storefront .header-wrapper,
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

/* The template's entrance animation must not hide persistent navigation. */
.classic-storefront .header-wrapper {
  opacity: 1 !important;
  filter: none !important;
}

.classic-storefront .header-content,
.site-header {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  transition: background-color .2s ease, box-shadow .2s ease;
}

.storefront-scrolled .classic-storefront .header-content,
.storefront-scrolled .site-header {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 8px 28px rgba(22, 22, 22, .08);
}

.classic-skip,
.skip {
  position: fixed;
  z-index: 10001;
}

@media (max-width: 991px) {
  /* Keep the original Webflow slide-in menu below the persistent controls. */
  .classic-storefront .header-wrapper .w-nav-overlay {
    top: 100%;
    left: 0;
    right: 0;
    width: 100% !important;
    max-height: calc(100vh - var(--storefront-header-height));
    max-height: calc(100dvh - var(--storefront-header-height));
  }

  .classic-storefront .header-wrapper .nav-menu[data-nav-menu-open] {
    width: 100%;
    max-height: calc(100vh - var(--storefront-header-height));
    max-height: calc(100dvh - var(--storefront-header-height));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .classic-storefront .header-content,
  .site-header {
    transition: none;
  }
}