/* ============== Header — Black variant ==============
   Always-on dark text on white background. For pages with a light hero
   (e.g. shop) where the original white-text-on-image header is unreadable. */

.site-header--black,
.site-header--black.is-sticky {
  background: #fff;
  color: var(--color-dark);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}

.site-header--black {
  padding-bottom: 100px;
}

.site-header--v2.site-header--black:not(.is-sticky) {
  padding-top: 10px;
}

.site-header--black.is-sticky {
  padding-top: 20px;
  padding-bottom: 70px;
}

.site-header--black .site-header__logo-light {
  filter: none;
}

.site-header--black .icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.site-header--black .site-header__nav a,
.site-header--black .icon-btn,
.site-header--black .hamburger {
  color: var(--color-dark);
}

/* Keep wordmark logo visible even when js/header.js toggles is-sticky on scroll */
.site-header--v2.site-header--black.is-sticky .site-header__logo-light {
  display: inline-block;
}
.site-header--v2.site-header--black.is-sticky .site-header__logo-dark {
  display: none;
}