/* === PARENT LEVEL (main navbar) === */
@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu {
    display: block !important;
    margin-top: 0;
  }

  .navbar .dropdown:hover > .nav-link {
    color: #fff;
    background-color: #444;
  }
}

/* === GOLD TEXT ON ACTIVE OR HOVERED PARENT === */
.navbar-dark .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle:hover,
.navbar-dark .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle:focus,
.navbar-dark .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle.show {
  background-color: #222 !important;
  color: gold !important;
}

/* Allow category nav to wrap instead of overflowing at edge widths */
.navbar.navbar-dark .navbar-nav {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.navbar.navbar-dark .navbar-nav .nav-item {
  flex: 0 0 auto;
}

/* Match hover styling for non-dropdown items (e.g., New Arrivals, Best Sellers) */
.navbar-dark .navbar-nav .nav-item:not(.dropdown) > .nav-link:hover,
.navbar-dark .navbar-nav .nav-item:not(.dropdown) > .nav-link:focus {
  background-color: #222 !important;
  color: gold !important;
}

/* === SUBMENU STRUCTURE === */
.dropdown-submenu {
  position: relative;
}

/* Hide submenus by default */
.dropdown-submenu > .dropdown-menu {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: 0;
  border-radius: 0 6px 6px 6px;
}

/* ✅ Show only the submenu for the hovered .dropdown-submenu */
.dropdown-submenu:hover > .dropdown-menu {
  display: block !important;
}

/* 🚫 Prevent showing grandchildren when hovering parent */
.dropdown-menu > .dropdown-submenu:not(:hover) .dropdown-menu {
  display: none !important;
}

/* Optional hover color for submenu items */
.dropdown-menu > li > a:hover {
  background-color: #f8f9fa;
  color: #333;
}

/* Ensure nested dropdowns appear on top */
.dropdown-menu {
  z-index: 1000;
}

/* === OPTIONAL: SUBMENU ARROW (›) HANDLING === */

/* Show arrow on dropdown items that *do* have submenus */
.dropdown-submenu > .dropdown-toggle::after {
  content: "›";
  float: right;
  margin-left: 0.5em;
  transform: translateY(1px);
}

/* Hide the arrow when no nested dropdown-menu exists (modern browsers) */
.dropdown-submenu:not(:has(> .dropdown-menu)) > .dropdown-toggle::after {
  content: "";
}

/* ✅ Fallback for browsers that don’t support :has() */
@supports not (selector(:has(*))) {
  /* Remove arrow manually when we know the item has no nested submenu */
  .dropdown-submenu.no-children > .dropdown-toggle::after {
    content: "";
  }
}