/* ===========================
   Mega Menu Wrapper
=========================== */

.mega-parent{
    position:relative;
}

.mega-wrapper{

    position:absolute;
    left:0;
    top:100%;

    width:100%;
    min-width:1200px;

    background:#fff;

    box-shadow:0 15px 40px rgba(0,0,0,.15);

    padding:25px;

    display:none;

    z-index:9999;

}

.mega-parent:hover .mega-wrapper{
    display:block;
}

/* ===========================
   Category Row
=========================== */

.category-row{

    display:flex;
    gap:15px;

    padding-bottom:20px;

    border-bottom:1px solid #eee;

}

.category-item{

    padding:12px 20px;

    background:#f5f5f5;

    border-radius:6px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.category-item:hover,
.category-item.active{

    background:#0056b3;

    color:#fff;

}

/* ===========================
   Three Panels
=========================== */

.sub-category-panel,
.child-category-panel,
.product-panel{

    margin-top:25px;

    display:none;

}

.sub-category-list,
.child-list,
.product-list{

    display:none;

}

.sub-category-list.active,
.child-list.active,
.product-list.active{

    display:block;

}

/* ===========================
   Sub Category
=========================== */

.sub-item,
.child-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    margin-bottom:8px;

    border:1px solid #eee;

    border-radius:6px;

    cursor:pointer;

    transition:.3s;

}

.sub-item:hover,
.child-item:hover{

    background:#0056b3;

    color:#fff;

}

/* ===========================
   Products
=========================== */

.product-item{

    display:block;

    padding:12px 18px;

    margin-bottom:8px;

    border-radius:6px;

    background:#f8f9fa;

    color:#333;

    text-decoration:none;

    transition:.3s;

}

.product-item:hover{

    background:#0056b3;

    color:#fff;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:991px){

.mega-wrapper{

    position:relative;

    min-width:100%;

}

.category-row{

    overflow-x:auto;

}

}