/* ==========================================================
   AANYA ORGANICS
   PREMIUM NAVIGATION
========================================================== */

/*==========================================================
MAIN NAVIGATION
==========================================================*/

.main-navigation{

    display:flex;

    align-items:center;

    justify-content:center;

    height:100%;

}

.main-menu{

    display:flex;

    align-items:center;

    gap:24px;

    margin:0;

    padding:0;

    list-style:none;

}

/*==========================================================
MENU ITEM
==========================================================*/

.main-menu > li{

    display:flex;

    align-items:center;

}

/*==========================================================
MENU LINK
==========================================================*/

.main-menu > li > a{

    display:flex;

    align-items:center;

    gap:8px;

    height:82px;

    padding:0;

    font-size:15px;

    font-weight:600;

    color:#243026;

    text-decoration:none;

    transition:.25s;

    position:relative;

    white-space:nowrap;

}

/*==========================================================
SVG CHEVRON
==========================================================*/

.main-menu > li > a svg{

    width:14px;

    height:14px;

    transition:.25s;

}

.main-menu > li:hover > a svg{

    transform:rotate(180deg);

}

/*==========================================================
HOVER
==========================================================*/

.main-menu > li > a:hover{

    color:var(--color-brand-primary);

}

/*==========================================================
UNDERLINE
==========================================================*/

.main-menu > li > a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:20px;

    width:100%;

    height:3px;

    border-radius:20px;

    background:var(--color-brand-primary);

    transform:scaleX(0);

    transform-origin:center;

    transition:.30s;

}

.main-menu > li:hover > a::after,

.main-menu > li.current > a::after{

    transform:scaleX(1);

}

/*==========================================================
ACTIVE
==========================================================*/

.main-menu > li.current > a{

     color:var(--color-brand-primary);

    font-weight:700;

}

/*==========================================================
MEGA MENU

Panel positioning, sizing, and open/close state are owned
entirely by assets/css/components/mega-menu.css, anchored to
the positioned .main-navigation ancestor above.
==========================================================*/

/*==========================================================
FOCUS
==========================================================*/

.main-menu a:focus{

    outline:2px solid var(--color-brand-primary);

    outline-offset:5px;

}

/*==========================================================
STICKY HEADER
==========================================================*/

.site-header.is-sticky .main-menu > li > a{

    height:68px;

}

/*==========================================================
RESPONSIVE
==========================================================*/

@media(max-width:1279px){

    .main-navigation{

        display:none;

    }

    body.mobile-menu-open .main-navigation{

        display:flex;

    }

    body.mobile-menu-open .main-menu{

        flex-direction:column;

        align-items:stretch;

        gap:0;

        width:100%;

    }

    body.mobile-menu-open .main-menu > li > a{

        height:auto;

        padding:14px 4px;

        white-space:normal;

    }

}

.menu-chevron{

    display:flex;

    align-items:center;

    justify-content:center;

}

.menu-chevron svg{

    width:13px;

    height:13px;

    transition:.25s;

}

.main-menu li:hover .menu-chevron svg{

    transform:rotate(180deg);

}
.main-menu .auth-menu-item{display:none}
@media (max-width: 1279px){.main-menu .auth-menu-item{display:block}.auth-menu-item form{margin:0}.auth-menu-button{background:transparent;border:0;color:inherit;cursor:pointer;font:inherit;padding:1rem;width:100%;text-align:left}}
