/* Z-Index Fix for Header and Dropdowns */

/* Ensure navbar has very high z-index */
.navbar {
    position: fixed !important;
    z-index: 9999 !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
}

/* Ensure dropdown menus appear above everything */
.navbar .dropdown-menu {
    z-index: 10000 !important;
    position: absolute !important;
    background: var(--dark-gray) !important;
    border: 1px solid var(--primary-gold) !important;
    margin-top: 0 !important;
    transform: translateY(0) !important;
    overflow: visible !important;
}

/* Hide scrollbar in dropdown */
.navbar .dropdown-menu::-webkit-scrollbar {
    display: none !important;
}

.navbar .dropdown-menu {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* Prevent dropdown from causing page overflow */
.navbar .dropdown-menu.show {
    display: block !important;
    position: absolute !important;
    will-change: transform !important;
    top: 100% !important;
    left: auto !important;
    right: 0 !important;
}

/* Ensure dropdown parent has proper stacking */
.navbar .nav-item.dropdown {
    position: relative !important;
    z-index: 9999 !important;
}

/* Dropdown toggle should be clickable */
.navbar .dropdown-toggle {
    z-index: 10001 !important;
    position: relative !important;
}

/* Make sure products header doesn't overlap */
.products-header {
    position: relative !important;
    z-index: 1 !important;
}

/* Products section should be below header */
.products-section {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure all page content is below header */
main,
section:not(.products-header) {
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure navbar collapse has proper z-index */
.navbar-collapse {
    z-index: 9999 !important;
    position: relative !important;
}

/* Prevent body overflow when dropdown is open */
body {
    overflow-x: hidden !important;
}

/* Ensure container doesn't cause overflow */
.container,
.container-fluid {
    overflow: visible !important;
}