/* ═══════════════════════════════════════════════════════════════════════════════
   5.1 DESKTOP HEADER & NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

#header,
.header-wrapper {
  background: rgba(10, 15, 26, 0.97) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--color-border) !important;
  position: relative;
  z-index: 1000;
}

.header-bg-container,
.header-bg-color,
.header-bg-image {
  display: none !important;
}

.header-main {
  height: 72px !important;
  min-height: 72px !important;
  padding: 0 !important;
}

.header-inner {
  height: 100%;
  max-width: 1280px !important;
  margin: 0 auto;
  padding: 0 24px !important;
}

/* Logo */
#logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

#logo img {
  max-height: 52px !important;
  width: auto !important;
  padding: 0 !important;
  transition: transform 200ms ease, filter 200ms ease !important;
}

#logo:hover img {
  transform: scale(1.02);
  filter: drop-shadow(0 0 12px var(--color-accent-glow));
}

/* Search Bar */
.header-search-form .searchform-wrapper {
  background: transparent !important;
}

.header-search-form .searchform {
  position: relative;
}

.header-search-form .search-field {
  width: 200px !important;
  height: 42px !important;
  background: rgba(30, 41, 59, 0.6) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  padding: 0 44px 0 16px !important;
  color: var(--color-text-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  transition: all 200ms ease !important;
}

.header-search-form .search-field::placeholder {
  color: var(--color-text-muted) !important;
  opacity: 1 !important;
}

.header-search-form .search-field:focus {
  width: 280px !important;
  background: rgba(30, 41, 59, 0.9) !important;
  border-color: var(--color-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--color-accent-glow) !important;
}

.header-search-form .ux-search-submit {
  position: absolute !important;
  right: 4px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 200ms ease !important;
}

.header-search-form .ux-search-submit:hover {
  background: rgba(34, 197, 94, 0.1) !important;
}

.header-search-form .ux-search-submit i,
.header-search-form .icon-search {
  color: var(--color-text-muted) !important;
  font-size: 16px !important;
  transition: color 200ms ease !important;
}

.header-search-form .ux-search-submit:hover i {
  color: var(--color-accent) !important;
}

/* Account & Cart */
.account-item > a,
.header-nav .account-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  color: var(--color-text-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-radius: 10px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: all 200ms ease !important;
}

.account-item > a:hover,
.header-nav .account-link:hover {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: var(--color-border) !important;
  color: #fff !important;
}

.cart-item > a,
.header-cart-link {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 16px !important;
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  transition: all 200ms ease !important;
}

.cart-item > a:hover,
.header-cart-link:hover {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: var(--color-accent) !important;
}

.cart-price,
.header-cart-title .cart-price {
  color: var(--color-accent) !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.cart-icon {
  position: relative !important;
}

.cart-icon strong {
  position: absolute !important;
  top: -8px !important;
  right: -8px !important;
  min-width: 20px !important;
  height: 20px !important;
  background: var(--color-accent) !important;
  color: #020617 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 6px !important;
  border: 2px solid #0a0f1a !important;
  box-shadow: 0 2px 8px var(--color-accent-glow) !important;
}

/* Bottom Nav */
#wide-nav,
.header-bottom {
  background: transparent !important;
  border-top: 1px solid var(--color-border) !important;
  min-height: 52px !important;
  padding: 0 !important;
}

#mega-menu-wrap-primary,
.mega-menu-wrap {
  background: transparent !important;
}

#mega-menu-primary,
.mega-menu,
.header-bottom-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#mega-menu-primary > li,
.mega-menu > li,
.header-bottom-nav > li {
  margin: 0 !important;
  padding: 0 !important;
}

#mega-menu-primary > li > a,
.mega-menu > li > a,
.header-bottom-nav > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 14px 18px !important;
  color: var(--color-text-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  border-radius: 10px !important;
  background: transparent !important;
  position: relative !important;
  transition: all 200ms ease !important;
}

#mega-menu-primary > li > a:hover,
.mega-menu > li > a:hover,
.header-bottom-nav > li > a:hover {
  color: #fff !important;
  background: rgba(30, 41, 59, 0.5) !important;
}

#mega-menu-primary > li.mega-current-menu-item > a,
.mega-menu > li.mega-current-menu-item > a,
.header-bottom-nav > li.active > a,
.header-bottom-nav > li.current > a,
.header-bottom-nav > li.current-menu-item > a {
  color: var(--color-accent) !important;
  background: var(--color-accent-glow) !important;
}

#mega-menu-primary > li > a::after,
.header-bottom-nav > li > a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 8px !important;
  left: 50% !important;
  transform: translateX(-50%) scaleX(0) !important;
  width: calc(100% - 36px) !important;
  height: 2px !important;
  background: var(--color-accent) !important;
  border-radius: 2px !important;
  transition: transform 200ms ease !important;
}

#mega-menu-primary > li > a:hover::after,
#mega-menu-primary > li.mega-current-menu-item > a::after,
.header-bottom-nav > li > a:hover::after,
.header-bottom-nav > li.active > a::after {
  transform: translateX(-50%) scaleX(1) !important;
}

/* Dropdown Menus */
.nav-dropdown,
.mega-sub-menu,
#mega-menu-primary .mega-sub-menu,
.account-item .nav-dropdown {
  background: #0a0f1a !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 14px !important;
  padding: 8px !important;
  margin-top: 8px !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03) !important;
  min-width: 220px !important;
  animation: navDropdownIn 0.2s ease !important;
}

.nav-dropdown li a,
.mega-sub-menu li a,
.account-item .nav-dropdown li a {
  display: block !important;
  padding: 12px 16px !important;
  color: var(--color-text-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border-radius: 8px !important;
  transition: all 200ms ease !important;
}

.nav-dropdown li a:hover,
.mega-sub-menu li a:hover,
.account-item .nav-dropdown li a:hover {
  background: rgba(34, 197, 94, 0.1) !important;
  color: var(--color-accent) !important;
  padding-left: 20px !important;
}

.nav-dropdown-has-arrow li.has-dropdown:before,
.nav-dropdown-has-arrow li.has-dropdown:after,
.nav-dropdown-has-border .nav-dropdown {
  display: none !important;
}

/* Mega Menu */
.nav-dropdown.mega-menu,
.mega-menu-block {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: var(--space-6) !important;
}

.mega-menu-title,
.mega-menu h3,
.mega-menu h4 {
  color: var(--color-text-primary) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--font-bold) !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  border-bottom: 1px solid var(--color-border) !important;
  padding-bottom: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
}

/* Hamburger Button */
.mobile-nav .nav-icon a,
.mobile-nav .has-icon > a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  color: var(--color-text-body) !important;
  transition: all 200ms ease !important;
}

.mobile-nav .nav-icon a:hover,
.mobile-nav .has-icon > a:hover {
  background: rgba(30, 41, 59, 0.6) !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

.mobile-nav .icon-menu {
  font-size: 20px !important;
}

/* Sticky Header */
.header.show-on-scroll,
.stuck .header-main {
  height: 60px !important;
  min-height: 60px !important;
}

.stuck #logo img {
  max-height: 44px !important;
}

.stuck .header-bottom {
  display: none !important;
}

.mega-menu-toggle {
  display: none !important;
}

@media (max-width: 849px) {
  .header-main {
    height: 64px !important;
    min-height: 64px !important;
  }
  
  #logo img {
    max-height: 44px !important;
  }
  
  #wide-nav,
  .header-bottom {
    display: none !important;
  }
}




/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP HEADER FIXES - Z-INDEX & LAYERING
   ───────────────────────────────────────────────────────────────────────────── */

/* Ensure proper stacking context */
#header {
  position: relative !important;
  z-index: 1000 !important;
}

.header-main {
  position: relative !important;
  z-index: 1002 !important;
}

.header-bottom {
  position: relative !important;
  z-index: 1001 !important;
}

/* Search container - ensure it's above nav but below dropdowns */
.header-search-form {
  position: relative !important;
  z-index: 100 !important;
}

/* Search wrapper */
.searchform-wrapper {
  position: relative !important;
  z-index: 100 !important;
}

/* When search is focused, raise it above other elements */
.header-search-form:focus-within {
  z-index: 200 !important;
}

/* Nav dropdowns should be highest */
.nav-dropdown {
  z-index: 1100 !important;
}

/* Fix search field in header bottom if present */
.header-bottom .header-search-form .search-field {
  width: 180px !important;
}

.header-bottom .header-search-form .search-field:focus {
  width: 240px !important;
}

/* Prevent search from overlapping nav items */
.header-nav {
  position: relative !important;
  z-index: 50 !important;
}

/* Fix header bottom nav layout */
.header-bottom .flex-row {
  align-items: center !important;
}

.header-bottom .header-nav {
  flex: 1 !important;
}

/* CRITICAL: Hide empty anchor tags in desktop nav too */
.header-nav > li > a:empty,
.header-bottom-nav > li > a:empty,
.nav > li > a:empty,
li.gps-menu-primary > a:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  position: absolute !important;
  visibility: hidden !important;
}

/* Fix header-bottom search field container */
.header-bottom .header-search {
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}

/* Ensure nav items don't overlap search */
.header-bottom .nav > li {
  position: relative !important;
  z-index: 20 !important;
}

/* Primary nav item - subtle text color only, no box */
.header-bottom-nav > li.gps-menu-primary > a:not(:empty),
.header-nav-main > li.gps-menu-primary > a:not(:empty) {
  color: var(--color-accent, #22c55e) !important;
  background: transparent !important;
  border: none !important;
}

.header-bottom-nav > li.gps-menu-primary > a:not(:empty):hover {
  color: #4ade80 !important;
  background: rgba(34, 197, 94, 0.1) !important;
}

/* Contact Us - subtle highlight, no heavy box */
.header-bottom-nav > li.gps-menu-highlight > a,
.header-nav-main > li.gps-menu-highlight > a {
  color: var(--color-accent, #22c55e) !important;
  background: transparent !important;
  border: none !important;
}

.header-bottom-nav > li.gps-menu-highlight > a:hover,
.header-nav-main > li.gps-menu-highlight > a:hover {
  color: #4ade80 !important;
  background: rgba(34, 197, 94, 0.1) !important;
}