/* body.home .site-header {
    background: transparent;
    box-shadow: none;
    padding: max(24px, 2.1875vw) var(--grid-padding);
    padding: 0 var(--grid-padding);
} */

.site-header,
body.home.scrolled .site-header {
    position: fixed;
    background: var(--white);
    z-index: 999;
    width: 100%;
    box-shadow: 0px 2px 4px rgba(0,0,0,.16);
    padding: max(12px, 0.859375vw) var(--grid-padding);
    padding: 0 var(--grid-padding);
    transition: var(--def-trans);
}



body.menu-open,
body.cart-open,
body.wishlist-open,
body.filter-open {
    overflow-y: hidden;
}

body.menu-open .site-header,
body.cart-open .site-header,
body.wishlist-open .site-header,
body.filter-open .site-header {
    background: var(--white);
}

.bg-overlay,
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    background: rgba(0,0,0,0);
    transition: var(--def-trans);
}

body.menu-open .site > .bg-overlay,
body.cart-open .site > .bg-overlay,
body.wishlist-open .site > .bg-overlay,
body.filter-open .site-main > .sidebar-overlay {
    background: rgba(0,0,0,.33);
    transition: var(--def-trans);
    pointer-events: all;
}

.site-header .site-branding {
    margin-right: auto;
}

.site-header .site-branding .custom-logo-link {
    display: flex;
}

/* body.home .site-header .site-branding {
    opacity: 0;
}

body.home.scrolled .site-header .site-branding {
    opacity: 1;
    transition: var(--def-trans);
    transition-delay: .2s;
} */

.site-header .site-branding .custom-logo-link img {
    height: max(24px, 2.1875vw);
    width: auto;
}

.site-header .main-navigation {
	width: fit-content;
}

.site-header .main-navigation #mainNav {
    align-items: center;
}

.site-header .main-navigation #mainNav > li {
    font-family: "Conigen";
    font-size: var(--fs-18);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    position: relative;
}

.site-header .main-navigation #mainNav > li
/*,
body.home.scrolled .site-header .main-navigation #mainNav > li */ {
    padding: max(16px, 1.25vw) 0;
    transition: var(--def-trans);
}

/* body.home .site-header .main-navigation #mainNav > li {
    padding: max(32px, 2.5vw) 0;
    transition: var(--def-trans);
} */

.site-header .main-navigation #mainNav > li:not(:last-child) {
    margin-right: max(6px, 0.46875vw);
}

.site-header .main-navigation #mainNav > li > a {
    display: flex;
    padding: .33em 1em;
    border-radius: 100vmin;
    transition: var(--def-trans);
    line-height: 1;
}

.site-header .main-navigation #mainNav > li > a:hover,
.site-header .main-navigation #mainNav > li.current_page_item > a {
    background-color: var(--gray);
    color: var(--beige);
    transition: var(--def-trans);
}

.site-header .main-navigation #mainNav > li > .sub-menu-wrapper {
    display: flex;
    width: 100%;
    white-space: nowrap;
    margin: 0;
    background: var(--white);
    transition: var(--def-trans);
}

.site-header .main-navigation #mainNav > li > .sub-menu-wrapper > .sub-menu {
    padding: max(24px, 2.34375vw) max(24px, 2.34375vw) max(32px, 3.28125vw);
    background: var(--white);
    z-index: 2;
    width: 100%;
}

.site-header .main-navigation #mainNav > li > .sub-menu-wrapper > .sub-menu > li {
    display: flex;
    flex-direction: column;
    margin-right: max(48px, 4.375vw);
}

.site-header .main-navigation #mainNav > li > .sub-menu-wrapper > .sub-menu > li a {
    letter-spacing: .15em;
    margin-bottom: 1.15em;
}

.site-header .main-navigation #mainNav > li > .sub-menu-wrapper > .sub-menu > li > .sub-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    font-family: "Exo 2";
    font-size: var(--fs-20);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
    margin: 0;
}

.site-header button {
	margin: 1em;
    position: relative;
}

.site-header .cart-toggle,
.site-header .wishlist-toggle {
    cursor: pointer;
    text-indent: 100%;
    padding: 0;
    border-radius: 0;
    position: relative;
}

.site-header .cart-toggle {
    background: url(../img/cart.svg) no-repeat center;
    background-size: contain;
    aspect-ratio: 1/1;
    height: 1.44em;
}

.site-header .cart-toggle.has-items::after,
.site-header .wishlist-toggle.has-items::after {
    content: "";
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    aspect-ratio: 1/1;
    height: .5em;
    font-family: "Exo 2";
    background: var(--gold);
    border-radius: 100%;
    transform: translate(25%,-25%);
}

.site-header .wishlist-toggle {
    background: url(../img/heart.svg) no-repeat center;
    background-size: contain;
    aspect-ratio: 8/7;
    height: 1.33em;
}

.site-header .menu-toggle {
    height: 1.2em;
    aspect-ratio: 2.5/1;
    position: relative;
    z-index: 1;
}

.site-header .menu-toggle .line {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: var(--gray);
    transition: ease-in-out .3s all;
}

.site-header .menu-toggle .top {
    top: 0;
}

.site-header .menu-toggle .middle {
    top: 50%;
    transform: translateY(-50%);
    transition-delay: .3s;
}

.site-header .menu-toggle .bottom {
    bottom: 0;
}

.site-header.menu-open .menu-toggle .top {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(30deg);
    transition-delay: .3s;
}

.site-header.menu-open .menu-toggle .middle {
    width: 0%;
    transition-delay: 0s;
}

.site-header.menu-open .menu-toggle .bottom {
    bottom: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg);
    transition-delay: .3s;
}

@media (min-width: 1400px) {
    .site-header .main-navigation #mainNav > li > .sub-menu-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100vw;
        opacity: 0;
        visibility: hidden;
        z-index: 10;
    }

    .site-header .main-navigation #mainNav > li:hover > .sub-menu-wrapper {
        opacity: 1;
        visibility: visible;
        transition: var(--def-trans);
    }
    
    .site-header .main-navigation #mainNav > li > .sub-menu-wrapper::after {
        content: "";
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: auto;
        z-index: 1;
        right: 0;
        pointer-events: none;
        background: rgba(0,0,0,0);
        transition: var(--def-trans);
    }
    
    .site-header .main-navigation #mainNav > li:hover > .sub-menu-wrapper::after {
        background: rgba(0,0,0,.33);
        transition: var(--def-trans);
    }
}

@media (max-width: 1399.98px) {
    .site-header .menu-toggle {
        display: block;
        margin-right: 0;
    }

    .site-header .main-navigation {
        position: absolute;
        top: 100%;
        left: 0;
        width: fit-content;
        height: calc(100vh - 100%);
        height: calc(100dvh - 100%);
        transform: translateX(-100%);
        overflow-y: auto;
        transition: var(--def-trans);
        background: var(--white);
        padding: var(--grid-padding);
    }
    
    .site-header .main-navigation .menu,
    .site-header .main-navigation .sub-menu {
        flex-direction: column;
    }

    .site-header .main-navigation #mainNav {
        align-items: flex-start;
    }

    .site-header .main-navigation #mainNav > li,
    body.home .site-header .main-navigation #mainNav > li,
    body.home.scrolled .site-header .main-navigation #mainNav > li {
        padding: 0;
        margin-bottom: 1em;
    }

    .site-header .main-navigation #mainNav > li > .sub-menu-wrapper > .sub-menu > li a {
        margin-bottom: .25em;
        margin-top: 1em;
    }

    body.menu-open .site-header .main-navigation {
        transform: translateX(0%);
    }

    .site-header .main-navigation #mainNav > li > .sub-menu-wrapper {
        position: relative;
        opacity: 1;
        visibility: visible;
    }

    .site-header .cart-toggle,
    .site-header .wishlist-toggle {
        height: 1.66em;
    }  
}