/*==================================================
  SIGMA MEGA MENU
  OpenCart 4.1.0.3
  Bootstrap 5.3
==================================================*/

/*------------------------------
    RESET
------------------------------*/

.menu-wrapper *,
.mobile-sidebar *{
    box-sizing:border-box;
}

.menu-wrapper ul,
.mobile-sidebar ul{
    margin:0;
    padding:0;
    list-style:none;
}

.menu-wrapper a,
.mobile-sidebar a{
    text-decoration:none;
}

/*------------------------------
    MENU WRAPPER
------------------------------*/

.menu-wrapper{
    width:100%;
    background:#fff;
    border-top:1px solid #ececec;
    border-bottom:1px solid #ececec;
    position:relative;
    z-index:999;
}

.menu-row{
    display:flex;
    align-items:stretch;
    justify-content:space-between;
    position:relative;
}

/*==================================================
    LEFT CATEGORY
==================================================*/

.desktop-category{
    width:270px;
    position:relative;
    flex-shrink:0;
}

/*------------------------------*/

.category-title{
    width:100%;
}

.category-btn{
    width:100%;
    height:54px;
    background:#d71920;
    border:0;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 20px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.category-btn:hover{
    background:#b11218;
}

.category-btn i{
    margin-right:12px;
    font-size:18px;
}

/*==================================================
    DESKTOP NAVIGATION
==================================================*/

.desktop-navigation{
    flex:1;
}

.desktop-navigation>ul{
    display:flex;
    align-items:center;
    height:54px;
}

.desktop-navigation>ul>li{
    position:relative;
}

.desktop-navigation>ul>li>a{
    display:flex;
    align-items:center;
    height:54px;
    padding:0 22px;
    color:#222;
    font-size:15px;
    font-weight:500;
    transition:.25s;
    position:relative;
}

.desktop-navigation>ul>li>a:hover{
    color:#d71920;
}

/* underline */

.desktop-navigation>ul>li>a::after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:10px;
    height:2px;
    background:#d71920;
    transform:scaleX(0);
    transition:.3s;
}

.desktop-navigation>ul>li>a:hover::after{
    transform:scaleX(1);
}

/*==================================================
    CATEGORY DROPDOWN
==================================================*/

.category-dropdown{
    position:absolute;
    top:100%;
    left:0;
    width:270px;
    background:#fff;
    border:1px solid #ececec;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:none;
    z-index:9999;
}

.desktop-category:hover .category-dropdown{
    display:block;
}

/*==================================================
    LEVEL 1
==================================================*/
.category-menu>li{
    position:relative;
}

.category-menu>li>a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:13px 18px;
    color:#333;
    border-bottom:1px solid #f2f2f2;
    transition:.25s;
}

.category-menu>li>a:hover{
    background:#f8f8f8;
    color:#d71920;
    padding-left:22px;
}

/*==================================================
    ARROW
==================================================*/
.menu-arrow{
    font-size:12px;
    margin-left:auto;
    transition:.25s;
}
/*==================================================
    PART 2
    AMAZON STYLE FLYOUT
==================================================*/

/*------------------------------------
    LEVEL 2 / LEVEL 3 / LEVEL N
------------------------------------*/

.submenu{
    position:absolute;
    top:-1px;
    left:100%;
    min-width:270px;
    background:#ffffff;
    border:1px solid #ececec;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    display:none;
    z-index:9999;
}

/* Show submenu on hover */

.has-child:hover > .submenu{
    display:block;
}

/*------------------------------------
    SUBMENU ITEMS
------------------------------------*/

.submenu li{
    position:relative;
}

.submenu li a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:13px 18px;
    color:#333;
    font-size:14px;
    border-bottom:1px solid #f3f3f3;
    transition:.25s;
    background:#fff;
}

.submenu li:last-child>a{
    border-bottom:0;
}

.submenu li>a:hover{
    background:#f8f8f8;
    color:#d71920;
    padding-left:22px;
}

/* Unlimited Levels */

.submenu .submenu{
    top:-1px;
    left:100%;
}

/*------------------------------------
    HOVER EFFECT
------------------------------------*/

.category-menu>li:hover>a,
.submenu li:hover>a{
    background:#f8f8f8;
    color:#d71920;
}

/*------------------------------------
    LONG CATEGORY NAME
------------------------------------*/

.category-menu a span,
.submenu a span{
    flex:1;
}

/*------------------------------------
    ARROW ANIMATION
------------------------------------*/

.has-child>a .menu-arrow{
    transition:transform .25s ease;
}

.has-child:hover>a .menu-arrow{
    transform:translateX(3px);
}

/*------------------------------------
    SCROLL (if many categories)
------------------------------------*/

.category-dropdown{
    max-height:650px;
    overflow-y:auto;
}

.category-dropdown::-webkit-scrollbar{
    width:6px;
}

.category-dropdown::-webkit-scrollbar-thumb{
    background:#cccccc;
    border-radius:20px;
}

.category-dropdown::-webkit-scrollbar-track{
    background:#f5f5f5;
}

/*------------------------------------
    BETTER SHADOW
------------------------------------*/

.category-dropdown,
.submenu{
    border-radius:0 0 6px 6px;
}

/*------------------------------------
    KEEP MENU ABOVE SLIDER
------------------------------------*/

.menu-wrapper{
    z-index:999;
}

.category-dropdown{
    z-index:99999;
}

.submenu{
    z-index:99999;
}

/*------------------------------------
    SMOOTH OPEN
------------------------------------*/

.category-dropdown{
    animation:fadeMenu .18s ease;
}

.submenu{
    animation:fadeMenu .18s ease;
}

@keyframes fadeMenu{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/*------------------------------------
    SAFETY
------------------------------------*/

.submenu{
    pointer-events:auto;
}

.category-menu>li,
.submenu li{
    white-space:nowrap;
}
/*==================================
    DESKTOP
===================================*/

@media (min-width:992px){

    .mobile-menu-toggle{
        display:none !important;
    }

    .mobile-sidebar{
        display:none !important;
    }

    .mobile-overlay{
        display:none !important;
    }

}

/*==================================
    MOBILE
===================================*/

@media (max-width:991px){

    .desktop-category,
    .desktop-navigation{
        display:none !important;
    }

    .mobile-menu-toggle{
        display:block !important;
    }

    .mobile-sidebar{
        display:block;
    }
    .category-menu,
.submenu{

    position:static;

    display:block;

    width:100%;

    border:0;

    box-shadow:none;

    background:none;

}

.category-menu li,
.submenu li{

    position:relative;

    width:100%;

}

.category-menu li a,
.submenu li a{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:12px 18px;

    font-size:15px;

    border-bottom:1px solid #ececec;

    color:#333;

}

.submenu{

    padding-left:18px;

}

.submenu .submenu{

    padding-left:18px;

}

.menu-arrow{

    transform:none !important;

}

}