/* WCCM Menu Styles */
.woocommerce-category-nav.wccm {
    position: relative;
}

/* Base Menu Styles */
.woocommerce-category-nav.wccm ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-category-nav.wccm .main-menu {
    display: flex;
    gap: 20px;
}

/* Desktop Layout and Justify Styles */
@media (min-width: 769px) {
    /* Default/Horizontal layout */
    .woocommerce-category-nav.wccm:not(.breakpoint-tablet):not(.breakpoint-desktop) .main-menu:not(.wccm-hamburger-overlay),
    .woocommerce-category-nav.wccm.wccm-horizontal-layout .main-menu:not(.wccm-hamburger-overlay) {
        flex-direction: row;
        align-items: center;
    }
    
    /* Vertical layout */
    .woocommerce-category-nav.wccm.wccm-vertical-layout .main-menu:not(.wccm-hamburger-overlay) {
        flex-direction: column;
        align-items: flex-start;
    }

}

/* Mobile/Hamburger Menu Styles - Always vertical */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay,
.woocommerce-category-nav.wccm.breakpoint-mobile .main-menu.wccm-hamburger-overlay,
.woocommerce-category-nav.wccm.breakpoint-tablet .main-menu.wccm-hamburger-overlay,
.woocommerce-category-nav.wccm.breakpoint-desktop .main-menu.wccm-hamburger-overlay {
    flex-direction: column !important;
}

/* Hamburger Menu Button Justify Options */
.woocommerce-category-nav.wccm {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
}

/* Desktop Menu Justify - applies to nav element when hamburger menu is not active */
/* Use media queries to ensure proper timing */

/* Breakpoint 'none' - hamburger never shown */
.woocommerce-category-nav.wccm.breakpoint-none.wccm-justify-left {
    justify-content: flex-start !important;
}
.woocommerce-category-nav.wccm.breakpoint-none.wccm-justify-center {
    justify-content: center !important;
}
.woocommerce-category-nav.wccm.breakpoint-none.wccm-justify-right {
    justify-content: flex-end !important;
}

/* Breakpoint 'tablet' - hamburger only shown when screen <= 1024px */
@media (min-width: 1025px) {
    .woocommerce-category-nav.wccm.breakpoint-tablet.wccm-justify-left {
        justify-content: flex-start !important;
    }
    .woocommerce-category-nav.wccm.breakpoint-tablet.wccm-justify-center {
        justify-content: center !important;
    }
    .woocommerce-category-nav.wccm.breakpoint-tablet.wccm-justify-right {
        justify-content: flex-end !important;
    }
}

/* Breakpoint 'mobile' - hamburger only shown when screen <= 768px */
@media (min-width: 769px) {
    .woocommerce-category-nav.wccm.breakpoint-mobile.wccm-justify-left {
        justify-content: flex-start !important;
    }
    .woocommerce-category-nav.wccm.breakpoint-mobile.wccm-justify-center {
        justify-content: center !important;
    }
    .woocommerce-category-nav.wccm.breakpoint-mobile.wccm-justify-right {
        justify-content: flex-end !important;
    }
}

/* Hamburger button justify - only affects hamburger button position when hamburger is shown */

/* Breakpoint 'desktop' - hamburger always shown */
.woocommerce-category-nav.wccm.breakpoint-desktop.wccm-hamburger-justify-left {
    justify-content: flex-start !important;
}
.woocommerce-category-nav.wccm.breakpoint-desktop.wccm-hamburger-justify-center {
    justify-content: center !important;
}
.woocommerce-category-nav.wccm.breakpoint-desktop.wccm-hamburger-justify-right {
    justify-content: flex-end !important;
}

/* Breakpoint 'tablet' - hamburger shown when screen <= 1024px */
@media (max-width: 1024px) {
    .woocommerce-category-nav.wccm.breakpoint-tablet.wccm-hamburger-justify-left {
        justify-content: flex-start !important;
    }
    .woocommerce-category-nav.wccm.breakpoint-tablet.wccm-hamburger-justify-center {
        justify-content: center !important;
    }
    .woocommerce-category-nav.wccm.breakpoint-tablet.wccm-hamburger-justify-right {
        justify-content: flex-end !important;
    }
}

/* Breakpoint 'mobile' - hamburger shown when screen <= 768px */
@media (max-width: 768px) {
    .woocommerce-category-nav.wccm.breakpoint-mobile.wccm-hamburger-justify-left {
        justify-content: flex-start !important;
    }
    .woocommerce-category-nav.wccm.breakpoint-mobile.wccm-hamburger-justify-center {
        justify-content: center !important;
    }
    .woocommerce-category-nav.wccm.breakpoint-mobile.wccm-hamburger-justify-right {
        justify-content: flex-end !important;
    }
}

/* Ensure hamburger button takes minimal space when justified */
.woocommerce-category-nav.wccm .hamburger-menu {
    flex-shrink: 0;
}

/* Keep the hamburger menu items always left-aligned for better UX */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay {
    align-items: flex-start !important;
    left: 0;
    right: 0;
}

/* Ensure proper display for active hamburger menu */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay.active {
    display: flex;
}

.woocommerce-category-nav.wccm .main-menu > li {
    position: relative;
}

.woocommerce-category-nav.wccm a {
    display: block;
    padding: 8px 8px;
    text-decoration: none;
    font-weight: 500;
    width: auto;
    box-sizing: border-box;
}

/* Dropdown Menus */
.woocommerce-category-nav.wccm .dropdown-menu,
.woocommerce-category-nav.wccm .dropdown-menu-side {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--wccm-dropdown-bg, #fff);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px 0;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    z-index: 1000;
}

/* Dropdown hover effects (desktop only) */
@media (min-width: 1025px) {
    .woocommerce-category-nav.wccm .dropdown:hover > .dropdown-menu,
    .woocommerce-category-nav.wccm .dropdown:hover > .dropdown-menu-side {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Dropdown click effects for 'none' breakpoint on mobile */
@media (max-width: 1024px) {
    .woocommerce-category-nav.wccm.breakpoint-none .dropdown.open > .dropdown-menu,
    .woocommerce-category-nav.wccm.breakpoint-none .dropdown.open > .dropdown-menu-side {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    
    /* Position sub-sub menus to the side like desktop */
    .woocommerce-category-nav.wccm.breakpoint-none .dropdown-menu .dropdown > .dropdown-menu,
    .woocommerce-category-nav.wccm.breakpoint-none .dropdown-menu .dropdown > .dropdown-menu-side {
        left: 100%;
        top: 0;
        margin-left: 1px;
    }
}

/* Menu Controls */
.dropdown > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dropdown-arrow {
    font-size: 12px;
    margin-left: 5px;
    transition: transform 0.2s ease;
}

/* Hamburger & Close Buttons */
.woocommerce-category-nav.wccm .hamburger-menu,
.woocommerce-category-nav.wccm .close-menu {
    display: none;
    background: none;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
}

.woocommerce-category-nav.wccm .hamburger-menu {
    border-radius: 6px;
    z-index: 10010;
}

.woocommerce-category-nav.wccm .close-menu {
    z-index: 10011;
}

/* Responsive Behaviors */

/* Desktop Mode */
@media (min-width: 1025px) {
    /* Side Dropdowns */
    .woocommerce-category-nav.wccm .dropdown-menu-side {
        position: absolute;
        left: 100%;
        top: 0;
        margin-left: -1px;
    }
}

/* Force hamburger visibility for desktop breakpoint */
.woocommerce-category-nav.wccm.breakpoint-desktop .hamburger-menu {
    display: block !important;
}

.woocommerce-category-nav.wccm.breakpoint-desktop .main-menu {
    display: none !important;
}

.woocommerce-category-nav.wccm.breakpoint-desktop .main-menu.active {
    display: flex !important;
}

/* Tablet Mode */
@media (max-width: 1024px) {
    /* Show hamburger for tablet breakpoint */
    .woocommerce-category-nav.wccm.breakpoint-tablet .hamburger-menu {
        display: block;
    }

    .woocommerce-category-nav.wccm.breakpoint-tablet .main-menu {
        display: none;
    }

    .woocommerce-category-nav.wccm.breakpoint-tablet .main-menu.active {
        display: flex;
    }
}

/* Mobile Mode */
@media (max-width: 768px) {
    /* Show hamburger for mobile breakpoint */
    .woocommerce-category-nav.wccm.breakpoint-mobile .hamburger-menu {
        display: block;
    }

    .woocommerce-category-nav.wccm.breakpoint-mobile .main-menu {
        display: none;
    }

    .woocommerce-category-nav.wccm.breakpoint-mobile .main-menu.active {
        display: flex;
    }
}

/* Hamburger Menu Overlay */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay {
    flex-direction: column;
    background: var(--wccm-mobile-bg, #f8f9fa);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    z-index: 99999999;
    padding: 20px;
    box-sizing: border-box;
    align-items: flex-start;
    gap: 10px;
}

/* Hamburger Menu Active State */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay.active {
    display: flex !important;
}

/* Hamburger Menu Items */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay > li {
    width: 100%;
}

.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay > li > a {
    width: 100%;
    box-sizing: border-box;
}

/* Hamburger Submenus */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay .dropdown-menu,
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay .dropdown-menu-side,
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay .dropdown .dropdown-menu,
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay .dropdown .dropdown-menu-side {
    display: none;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    box-shadow: none;
    border: none;
    background: transparent;
    padding-left: 20px;
    margin-top: 5px;
    width: 100%;
    box-sizing: border-box;
}

.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay li.open > .dropdown-menu,
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay li.open > .dropdown-menu-side,
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay .dropdown.open > .dropdown-menu,
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay .dropdown.open > .dropdown-menu-side {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    margin-left: 0 !important;
}

/* Close Button in Overlay */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay .close-menu {
    display: block;
    position: fixed;
    top: 12px;
    right: 16px;
    background: transparent;
}

/* Open State Arrow Rotation */
.woocommerce-category-nav.wccm .main-menu.wccm-hamburger-overlay li.open > a .dropdown-arrow {
    transform: rotate(180deg);
}