/*
  Shared navigation surface contract:
  - Home and product detail pages keep their default glass header by omitting data-nav-surface.
  - Secondary listing/content pages opt in with body[data-nav-surface="white"].
*/

body[data-nav-surface="white"]::before {
  content: "";
  position: fixed;
  inset: var(--site-header-height, 80px) 0 0;
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  display: block;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(18px) saturate(0.85);
  -webkit-backdrop-filter: blur(18px) saturate(0.85);
  transition: opacity 260ms ease;
}

body[data-nav-surface="white"].is-nav-open::before {
  opacity: 1;
}

@supports selector(:has(*)) {
  body[data-nav-surface="white"]:has(.site-header .primary-nav [data-nav-key]:hover)::before,
  body[data-nav-surface="white"]:has(.site-header .primary-nav [data-nav-key]:focus-visible)::before,
  body[data-nav-surface="white"]:has(.site-header .nav-dropdown:hover)::before {
    opacity: 1;
  }
}

body[data-nav-surface="white"] main {
  padding-top: var(--site-header-height, 80px);
}

body[data-nav-surface="white"] .site-header,
body[data-nav-surface="white"] .site-header.is-scrolled,
body[data-nav-surface="white"] .site-header.is-menu-open {
  color: #161616;
  background: #fff;
  border-bottom: 1px solid #e9e9e9;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-nav-surface="white"] .site-header .logo-crop-color,
body[data-nav-surface="white"] .site-header.is-scrolled .logo-crop-color,
body[data-nav-surface="white"] .site-header.is-menu-open .logo-crop-color {
  opacity: 1;
}

body[data-nav-surface="white"] .site-header .logo-crop-white,
body[data-nav-surface="white"] .site-header.is-scrolled .logo-crop-white,
body[data-nav-surface="white"] .site-header.is-menu-open .logo-crop-white {
  opacity: 0;
}

body[data-nav-surface="white"] .brand-nav .logo-crop img {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  object-fit: contain;
}

body[data-nav-surface="white"] .primary-nav,
body[data-nav-surface="white"] .site-header.is-scrolled .primary-nav,
body[data-nav-surface="white"] .site-header.is-menu-open .primary-nav {
  color: #161616;
}

body[data-nav-surface="white"] .primary-nav a {
  color: #050505;
}

body[data-nav-surface="white"] .primary-nav a.is-current,
body[data-nav-surface="white"] .primary-nav a:hover,
body[data-nav-surface="white"] .primary-nav a.is-active,
body[data-nav-surface="white"] .site-header.is-scrolled:not(.is-menu-open) .primary-nav a.is-current,
body[data-nav-surface="white"] .site-header.is-menu-open .primary-nav a.is-active {
  color: var(--green);
}

body[data-nav-surface="white"] .primary-nav a.is-current::after,
body[data-nav-surface="white"] .primary-nav a.is-active::after,
body[data-nav-surface="white"] .site-header.is-scrolled:not(.is-menu-open) .primary-nav a.is-current::after,
body[data-nav-surface="white"] .site-header.is-menu-open .primary-nav a.is-active::after {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}

body[data-nav-surface="white"] .site-header.is-menu-open .primary-nav a.is-current:not(.is-active) {
  color: #050505;
}

body[data-nav-surface="white"] .site-header.is-menu-open .primary-nav a.is-current:not(.is-active)::after {
  opacity: 0;
  transform: translate3d(-50%, 6px, 0) scale(0.6);
}

body[data-nav-surface="white"] .icon-button,
body[data-nav-surface="white"] .site-header.is-scrolled .icon-button,
body[data-nav-surface="white"] .site-header.is-menu-open .icon-button {
  color: #050505;
  background: transparent;
}

body[data-nav-surface="white"] .icon-button span,
body[data-nav-surface="white"] .site-header.is-scrolled .icon-button span,
body[data-nav-surface="white"] .site-header.is-menu-open .icon-button span {
  filter: brightness(0);
}

body[data-nav-surface="white"] .lang-button,
body[data-nav-surface="white"] .site-header.is-scrolled .lang-button,
body[data-nav-surface="white"] .site-header.is-menu-open .lang-button {
  background: #373737;
  color: #fff;
}

body[data-nav-surface="white"] .contact-button {
  background: var(--green);
  border-color: #1dd366;
  color: #fff;
  text-transform: none;
}

body[data-nav-surface="white"] .nav-dropdown {
  color: #050505;
}

body[data-nav-surface="white"] .nav-dropdown::before {
  background: #fff;
  border-top: 1px solid #e9e9e9;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 1020px) {
  body[data-nav-surface="white"] {
    --site-header-height: 72px;
  }

  body.brand-story-page[data-nav-surface="white"] {
    --site-header-height: 68px;
  }
}

@media (max-width: 900px) {
  body[data-nav-surface="white"]::before {
    display: none;
  }
}

@media (max-width: 760px) {
  body[data-nav-surface="white"] {
    --site-header-height: 72px;
  }

  body.brand-story-page[data-nav-surface="white"] {
    --site-header-height: 72px;
  }

  body[data-nav-surface="white"] .site-header {
    height: 72px;
    padding: 0 20px;
    justify-content: space-between;
  }

  body[data-nav-surface="white"] .brand-nav {
    position: relative;
    left: auto;
    top: auto;
    width: 112px;
    height: 50px;
    flex: 0 0 112px;
  }

  body[data-nav-surface="white"] .primary-nav {
    display: none;
  }

  body[data-nav-surface="white"] .header-actions {
    position: relative;
    right: auto;
    top: auto;
    width: auto;
    height: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  body[data-nav-surface="white"] .icon-button,
  body[data-nav-surface="white"] .lang-button {
    position: static;
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  body[data-nav-surface="white"] .icon-button {
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    background: #f3f3f3;
    color: #050505;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-nav-surface="white"] .lang-button {
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #373737;
    color: #fff;
  }

  body[data-nav-surface="white"] .contact-button {
    display: none;
  }
}