/* Shared sticky header: preserve the designer's first-screen spacing. */
body:has(.header) {
  height: auto;
  min-height: 100%;
}

.header,
.header:has(+ .product-nav) {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #050505;
  box-shadow: none;
  transition: box-shadow .2s ease;
}

.header__top {
  transition: padding-top .2s ease, padding-bottom .2s ease;
}

body.as-header-scrolled .header {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
}

body.as-header-scrolled .header__top {
  padding-top: 8px;
  padding-bottom: 8px;
}

.product-nav {
  position: sticky;
  top: var(--as-sticky-header-height, 90px);
  z-index: 2;
  transition: top .2s ease;
}

.mobile.active,
body:has(.product-nav) .mobile.active {
  z-index: 200;
}

html {
  scroll-padding-top: calc(var(--as-sticky-header-height, 90px) + 16px);
}

html:has(.product-nav) {
  scroll-padding-top: calc(var(--as-sticky-header-height, 90px) + 66px);
}

@media (max-width: 767px) {
  .product-nav {
    position: relative;
    top: auto;
  }

  html:has(.product-nav) {
    scroll-padding-top: calc(var(--as-sticky-header-height, 90px) + 16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .header__top,
  .product-nav { transition: none; }
}