/* Shared search surface; category menus have their own hero/light palettes. */
.app-viewport .header {
  --dropdown-surface: rgba(35, 38, 40, 0.94);
  --dropdown-border: rgba(255, 255, 255, 0.22);
}

.app-viewport .header.light {
  --dropdown-surface: rgba(246, 246, 246, 0.94);
  --dropdown-border: rgba(0, 0, 0, 0.12);
}

.app-viewport .header .header-content .nav-menu .nav-dropdown,
.app-viewport .header .header-content .header-right .search-dropdown {
  background: var(--dropdown-surface);
  border: 1px solid var(--dropdown-border);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-mask-image: none;
  mask-image: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Keep the warmer glass menu while the header is over the homepage hero. */
.app-viewport .header .header-content .nav-menu .nav-dropdown {
  background: rgba(45, 41, 37, 0.46);
  border-color: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}

.app-viewport .header.light .header-content .nav-menu .nav-dropdown {
  background: #fff;
  border-color: rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Older deployed detail pages still add detail-search-open. Its white
   search text must not override the light dropdown palette. */
.app-viewport .header.light .header-content .search-dropdown .search-section-title {
  color: #777;
}

.app-viewport .header.light .header-content .search-dropdown .search-tag,
.app-viewport .header.light .header-content .search-dropdown .search-suggest-item {
  color: #333;
  -webkit-text-fill-color: #333;
}

.app-viewport .header.light .header-content .search-dropdown .search-tag {
  border-color: rgba(0, 0, 0, 0.15);
}

.app-viewport .header.light .header-content .search-dropdown .search-tag:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.3);
}