/* ======================================================
   SEAN B SHOP
   MARKETPLACE NAVIGATION
   assets/css/layout/navigation.css
====================================================== */


/* ======================================================
   NAVIGATION WRAPPER
====================================================== */


.desktop-navigation{

    width:100%;

    height:42px;

    background:#0b1f3a;

    position:relative;

    z-index:900;

}



.navigation-inner{

    height:42px;

    display:flex;

    align-items:center;

    gap:15px;

}



/* ======================================================
   CATEGORY MENU
====================================================== */


.category-menu{

    position:relative;

    height:42px;

    flex-shrink:0;

}



.category-button{

    height:42px;

    padding:0 18px;

    display:flex;

    align-items:center;

    gap:10px;

    border:0;

    background:#e60000;

    color:#fff;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

}



.category-button i{

    font-size:14px;

}



.category-button:hover{

    background:#c40000;

}




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


.mega-menu{

    position:absolute;

    top:42px;

    left:0;

    width:850px;

    min-height:360px;

    display:flex;

    background:#fff;

    border-radius:0 0 12px 12px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.18);


    opacity:0;

    visibility:hidden;

    transform:translateY(10px);

    transition:.25s ease;

}



.category-menu:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}




/* ======================================================
   CATEGORY SIDEBAR
====================================================== */


.department-sidebar{

    width:220px;

    padding:15px 0;

    border-right:1px solid #eee;

}



.department-sidebar a{

    height:42px;

    display:flex;

    align-items:center;

    gap:12px;

    padding:0 20px;

    color:#374151;

    font-size:13px;

    font-weight:500;

}



.department-sidebar a i{

    width:18px;

    color:#e60000;

}



.department-sidebar a:hover{

    background:#f5f7fa;

    color:#e60000;

}





/* ======================================================
   MEGA CONTENT
====================================================== */


.mega-content{

    flex:1;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

    padding:25px;

}



.mega-column h4{

    margin-bottom:12px;

    color:#0b1f3a;

    font-size:14px;

}



.mega-column a{

    display:block;

    margin-bottom:10px;

    color:#555;

    font-size:13px;

}



.mega-column a:hover{

    color:#e60000;

}




/* ======================================================
   MEGA BANNER
====================================================== */


.mega-banner{

    grid-column:span 1;

    background:#f5f7fa;

    border-radius:12px;

    overflow:hidden;

}



.mega-banner img{

    width:100%;

    height:130px;

    object-fit:cover;

}



.mega-banner-content{

    padding:15px;

}



.mega-banner h3{

    color:#0b1f3a;

    font-size:18px;

    margin-bottom:5px;

}



.mega-banner p{

    font-size:12px;

    color:#666;

}



.mega-banner a{

    display:inline-flex;

    margin-top:10px;

    padding:8px 15px;

    background:#e60000;

    color:#fff;

    border-radius:20px;

    font-size:12px;

}




/* ======================================================
   NAV LINKS
====================================================== */


.nav-links{

    height:42px;

    display:flex;

    align-items:center;

    list-style:none;

    padding:0;

    margin:0;

    gap:2px;

    flex:1;

}



.nav-links li{

    height:42px;

}



.nav-links a{

    height:42px;

    padding:0 13px;

    display:flex;

    align-items:center;

    gap:7px;

    color:#fff;

    font-size:12px;

    font-weight:600;

    transition:.2s ease;

}



.nav-links a i{

    font-size:13px;

}



.nav-links a:hover,
.nav-links a.active{

    background:rgba(255,255,255,.12);

    color:#ffb400;

}





/* ======================================================
   SERVICE PROMOS
====================================================== */


.nav-promo{

    display:flex;

    align-items:center;

    gap:18px;

    margin-left:auto;

    flex-shrink:0;

}



.promo-item{

    display:flex;

    align-items:center;

    gap:8px;

    color:#fff;

}



.promo-item i{

    font-size:18px;

    color:#ffb400;

}



.promo-item strong{

    display:block;

    font-size:11px;

}



.promo-item small{

    display:block;

    font-size:10px;

    opacity:.8;

}




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


@media(max-width:1200px){


.nav-links a{

    padding:0 9px;

}


.nav-links a span{

    display:none;

}


.nav-promo{

    display:none;

}


}




@media(max-width:992px){


.desktop-navigation{

    display:none;

}


}