/* maxm-itr-sf
basic version
icon text, toggle in right, side and full height, text align left
modified overlay color to match minicart, modified close button*/

.header-constrained #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open{
    z-index: 3;
}

.header-constrained #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open:after{
    background-color: var(--drawer-overlay);
    opacity: 1;
}

.header-constrained #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle #mega-toggle-block-1{
    margin: 0 0 0 0;
}

.header-constrained #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated{
    transform: none;
    width: 3rem;
 } 

.header-constrained .mega-toggle-animated-inner{
    display: none !important;
}


/* nav mobile submenu close button */
/* Base close button styles (applies in both states) */
.header-constrained #mega-menu-wrap-max_mega_menu_1 button.mega-close {
    top: var(--wp-admin--admin-bar--height, 0px);
    right: -1024px;
    background: var(--bg-primary);
    left: auto;
} 

/* Overrides when the toggle has .mega-menu-open */
.header-constrained #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle.mega-menu-open ~ button.mega-close {
    right: 24px;
    left: auto;
    top: calc(10px + var(--wp-admin--admin-bar--height,0px));
}

.header-constrained #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle ~ button.mega-close:before{
    /* transform: translateY(-14%); */
    color: var(--contrast-lg) ;
    content: "×" ;
    font-family: system-ui, sans-serif;
    font-weight: 300;
    font-size: 40px; 
    height: 40px;
}  

/* nav mobile menu text color */
.header-constrained .mega-menu-open ~ #mega-menu-max_mega_menu_1 > li.mega-menu-item > a.mega-menu-link{
    color: var(--contrast-lg) !important;
}

/* nav mobile menu */
@media (max-width:1023.9px){
.header-constrained #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle + #mega-menu-max_mega_menu_1{
    background-color: var(--bg-primary);
    top: var(--wp-admin--admin-bar--height,0px); 
    padding: 54px 30px;
    right: -1024px; 
    left: auto;
    max-height: none; 
    height: auto;
    bottom: 0;
    width: 100%;
    max-width: 400px;
} 

.header-constrained #mega-menu-wrap-max_mega_menu_1 .mega-menu-open + #mega-menu-max_mega_menu_1{
    right: 0;    
} 
}