/* ==========================================
   MASB HEADER
========================================== */

:root{
    --primary:#111827;
    --primary-hover:#1F2937;
    --gold:#D4AF37;

    --dark:#111827;
    --light:#ffffff;
    --border:#E5E7EB;
}
.masb-header{
	position:sticky;
	top:0;
	z-index:9999;
	background:#fff;
	box-shadow:0 2px 12px rgba(0,0,0,.08);
}

.top-bar{
	background:#111827;
	color:#fff;
	border-bottom:1px solid rgba(212,175,55,.25);
}
.top-bar .container{
	display:flex;
	align-items:center;
	justify-content:space-between;
	min-height:42px;
}

.top-left{
	font-size:14px;
	font-weight:500;
}

.top-right{
	display:flex;
	align-items:center;
	gap:18px;
}

.top-right a{
	color:#fff;
	font-size:14px;
}

.main-header{
	padding:18px 0;
	background:#fff;
	border-bottom:1px solid #E5E7EB;
}

.main-header .container{
	display:flex;
	align-items:center;
	gap:25px;
}

.site-logo{
	flex-shrink:0;
}

.site-logo img{
	max-width:170px;
	height:auto;
	transition:.3s ease;
}

.site-logo img:hover{
	transform:scale(1.03);
}

/*=========================================
PREMIUM SEARCH
=========================================*/

.masb-search-form{
	display:flex;
	align-items:center;
	width:100%;
	border:2px solid #111827;
    transition:.3s ease;
	border-radius:12px;
	overflow:hidden;
	background:#fff;
}
.masb-search-form:focus-within{
    border-color:#D4AF37;
    box-shadow:0 0 0 4px rgba(212,175,55,.15);
}

.search-category{
	width:180px;
	height:54px;
	border:none;
	border-right:1px solid #ececec;
	padding:0 15px;
	background:#fafafa;
	font-size:15px;
	outline:none;
	cursor:pointer;
}

.search-input{
	flex:1;
	height:54px;
	border:none;
	padding:0 18px;
	font-size:15px;
	outline:none;
}

.search-btn{
	width:64px;
	height:54px;
	border:none;
	background:#111827;
	color:#fff;
	font-size:18px;
	cursor:pointer;
	transition:.3s ease;
}

.search-btn:hover{
	background:#D4AF37;
	color:#111827;
}

.header-icons{
	display:flex;
	align-items:center;
	gap:20px;
	flex-shrink:0;
}

.header-icons a{
	display:flex;
	align-items:center;
	gap:8px;
	color:var(--dark);
	font-weight:600;
	position:relative;
}

.header-icons i{
	font-size:20px;
}

.header-icons small{
	position:absolute;
	top:-8px;
	right:-10px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#D4AF37;
    color:#111827;
    font-weight:700;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:10px;
}

.main-navigation{
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
	background:#fff;
}

.primary-menu{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:35px;
	padding:14px 0;
}

.primary-menu li{
	list-style:none;
}

.primary-menu a{
	font-weight:600;
	color:#222;
	white-space:nowrap;
	transition:.25s;
}

.primary-menu a:hover,
.primary-menu .current-menu-item > a{
	color:#D4AF37;
}

.mobile-menu-btn{
	display:none;
	border:none;
	background:transparent;
	cursor:pointer;
	font-size:24px;
	color:#222;
	padding:0;
}

.mobile-bottom-nav{
	display:none;
}
/*==============================
NOTIFICATION DROPDOWN
==============================*/

.masb-notification-trigger{
	position:relative;
}

.masb-notification-dropdown{

	position:absolute;

	top:38px;

	right:0;

	width:340px;

	background:#fff;

	border-radius:12px;

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

	padding:18px;

	display:none;

	z-index:9999;

}

.masb-notification-trigger:hover .masb-notification-dropdown{

	display:block;

}

.masb-notification-title{

	font-size:17px;

	font-weight:700;

	margin-bottom:15px;

	color:#111;

}

.masb-notification-dropdown ul{

	list-style:none;

	padding:0;

	margin:0;

}

.masb-notification-dropdown li{

	display:flex;

	align-items:center;

	gap:12px;

	padding:12px 0;

	border-bottom:1px solid #eee;

}

.masb-notification-dropdown li:last-child{

	border-bottom:none;

}

.masb-notification-dropdown i{

	color:#ef3b36;

	width:18px;

}

.masb-notification-dropdown span{

	color:#333;

	font-size:14px;

}

.masb-view-all{

	display:block;

	margin-top:15px;

	text-align:center;

	background:#ef3b36;

	color:#fff !important;

	padding:12px;

	border-radius:8px;

	font-weight:600;

	text-decoration:none;

}
/*=========================================
LOGO
=========================================*/

.site-logo{
	display:flex;
	align-items:center;
	flex-shrink:0;
}

.masb-logo-link{
	display:flex;
	align-items:center;
	text-decoration:none;
}

.site-logo img,
.custom-logo{
	max-width:180px;
	height:auto;
	display:block;
}

@media (max-width:768px){

	.site-logo img,
	.custom-logo{
		max-width:130px;
	}

}
/*=========================================
HEADER ICONS
=========================================*/

.header-icons{
	display:flex;
	align-items:center;
	gap:22px;
}

.header-icon{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-decoration:none;
	color:#222;
	font-size:13px;
	font-weight:500;
	transition:.3s;
}

.header-icon i{
	font-size:22px;
	margin-bottom:6px;
}

.header-icon:hover{
	color:#ef3b36;
}

.header-count{
	position:absolute;
	top:-6px;
	right:2px;
	width:18px;
	height:18px;
	border-radius:50%;
	background:#ef3b36;
	color:#fff;
	font-size:10px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
}

@media (max-width:768px){

	.header-icons{
		display:none;
	}

}
/*=========================================
HEADER LAYOUT
=========================================*/

.main-header{
	padding:18px 0;
	background:#fff;
	border-bottom:1px solid #ececec;
}

.header-flex{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
}

.site-logo{
	flex:0 0 220px;
}

.header-search{
	flex:1;
}

.header-icons{
	display:flex;
	align-items:center;
	gap:22px;
	flex-shrink:0;
}
/*=========================================
MEGA MENU
=========================================*/

.main-navigation{
	position:relative;
}

.masb-mega-menu{
	position:absolute;
	left:0;
	right:0;
	top:100%;
	background:#fff;
	padding:35px;
	box-shadow:0 20px 50px rgba(0,0,0,.12);
	z-index:999;

	display:grid;
	grid-template-columns:2fr 2fr 1fr;
	gap:40px;

	opacity:0;
	visibility:hidden;
	transform:translateY(20px);
	transition:.35s ease;
}

.main-navigation:hover .masb-mega-menu{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

.mega-column h4{
	margin-bottom:15px;
	font-size:18px;
}

.mega-column ul{
	list-style:none;
	padding:0;
	margin:0;
}

.mega-column li{
	margin-bottom:10px;
}

.mega-column a{
	text-decoration:none;
	color:#333;
}

.mega-column a:hover{
	color:#ef3b36;
}

.mega-banner{
	background:#ef3b36;
	color:#fff;
	border-radius:16px;
	padding:25px;
}

.mega-banner a{
	display:inline-block;
	margin-top:15px;
	padding:10px 20px;
	background:#fff;
	color:#ef3b36;
	text-decoration:none;
	border-radius:8px;
	font-weight:700;
}
.mega-column li{
	transition:.3s;
}

.mega-column li:hover{
	padding-left:8px;
}

.mega-column a{
	display:block;
	padding:8px 0;
}
.main-navigation .container{
	display:flex;
	align-items:center;
	gap:0;
}

.header-category{
	flex:0 0 110px;
	margin:0;
	position:relative;
	flex-shrink:0;
}

.primary-menu{
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:35px;
	padding:14px 0;
	margin:0;
	flex:1;
}
/*=========================================
CATEGORY BUTTON
=========================================*/

.header-category{
	margin:0 18px;
	position:relative;
	flex-shrink:0;
}

.category-toggle{
	width:120px;
	height:54px;
	padding:0 16px;
	background:transparent;
	border:none;
	color:#222;
	display:flex;
	align-items:center;
	justify-content:space-between;
	font-size:15px;
	font-weight:700;
	cursor:pointer;
	transition:.3s;
	border-right:1px solid #eee;
	border-radius:0;
}

.category-toggle:hover{
	background:#f7f7f7;
	color:var(--primary);
}

.category-dropdown{
	position:absolute;
	top:100%;
	left:0;
	width:260px;
	background:#fff;
	border-radius:12px;
	box-shadow:0 20px 45px rgba(0,0,0,.12);
	margin-top:10px;

	display:none;
	z-index:9999;
}

.category-dropdown.category-open{
	display:block;
}

.category-dropdown ul{
	list-style:none;
	padding:10px 0;
	margin:0;
}

.category-dropdown li{
	border-bottom:1px solid #f1f1f1;
}

.category-dropdown li:last-child{
	border-bottom:none;
}

.category-dropdown a{
	display:block;
	padding:14px 18px;
	color:#333;
	text-decoration:none;
	font-size:15px;
	transition:.3s;
}

.category-dropdown a:hover{
	background:#ef3b36;
	color:#fff;
	padding-left:28px;
}
/*=========================================
SUB CATEGORY
=========================================*/

.category-item{
	position:relative;
}

.category-item>a{
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.subcategory-menu{
	position:absolute;
	left:100%;
	top:0;
	width:260px;
	background:#fff;
	border-radius:12px;
	box-shadow:0 20px 45px rgba(0,0,0,.12);

	opacity:0;
	visibility:hidden;
	transform:translateX(20px);

	transition:.3s;

	list-style:none;
	padding:10px 0;
	margin:0;
}

.category-item:hover .subcategory-menu{
	opacity:1;
	visibility:visible;
	transform:translateX(0);
}

.subcategory-menu a{
	display:block;
	padding:14px 18px;
	color:#333;
	text-decoration:none;
}

.subcategory-menu a:hover{
	background:#ef3b36;
	color:#fff;
}
/*=========================================
CATEGORY DRAWER
=========================================*/

.masb-category-overlay{
	position:fixed;
	inset:0;
	background:rgba(0,0,0,.45);
	opacity:0;
	visibility:hidden;
	transition:.3s;
	z-index:9998;
}

.masb-category-drawer{
	position:fixed;
	top:0;
	left:0;
	width:320px;
	max-width:90%;
	height:100vh;
	background:#fff;
	box-shadow:8px 0 30px rgba(0,0,0,.15);
	transform:translateX(-100%);
	transition:transform .35s ease;
	z-index:9999;
	overflow-y:auto;
}

.masb-category-drawer.active{
	transform:translateX(0);
}

.masb-category-drawer.active{
	left:0;
}

.masb-category-overlay.active{
	opacity:1;
	visibility:visible;
}

.drawer-header{
	height:60px;
	padding:0 20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	background:#ef3b36;
	color:#fff;
}

.drawer-header h3{
	margin:0;
	font-size:18px;
	font-weight:600;
}

.drawer-close{
	background:none;
	border:none;
	color:#fff;
	font-size:22px;
	cursor:pointer;
}

.drawer-categories{
	list-style:none;
	margin:0;
	padding:0;
}

.drawer-categories li{
	border-bottom:1px solid #eee;
}

.drawer-categories a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px 20px;
	color:#222;
	text-decoration:none;
	font-weight:500;
	transition:.25s;
}

.drawer-categories a:hover{
	background:#f8f8f8;
	color:#ef3b36;
	padding-left:28px;
}
.category-menu{
	list-style:none;
	margin:0;
	padding:0;
}

.category-menu li{
	list-style:none;
	border-bottom:1px solid #ececec;
}

.category-menu li:last-child{
	border-bottom:none;
}

.category-menu a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:15px 20px;
	color:#222;
	text-decoration:none;
	font-weight:500;
	transition:.25s;
}

.category-menu a:hover{
	background:#f8f8f8;
	color:#ef3b36;
	padding-left:28px;
}
.main-navigation{
	background:#fff;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
}

.main-navigation .container{
	display:flex;
	align-items:center;
	height:54px;
}

.header-category{
	width:120px;
	margin:0;
	position:relative;
	flex-shrink:0;
}

.primary-menu{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	gap:32px;
	padding-left:25px;
	margin:0;
}
/*=========================================
DRAWER HEADER
=========================================*/

.drawer-header{
	height:64px;
	background:#232f3e;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 18px;
}

.drawer-user{
	display:flex;
	align-items:center;
	gap:12px;
}

.drawer-user i{
	font-size:30px;
}

.drawer-user strong{
	display:block;
	font-size:16px;
}

.drawer-user span{
	display:block;
	font-size:12px;
	opacity:.8;
}

.drawer-close{
	background:none;
	border:none;
	color:#fff;
	font-size:22px;
	cursor:pointer;
}
/*=========================================
DRAWER CATEGORY MENU
=========================================*/

.category-menu{
	list-style:none;
	margin:0;
	padding:0;
}

.category-menu li{
	position:relative;
	border-bottom:1px solid #f1f1f1;
}

.category-menu li a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px 20px;
	color:#222;
	text-decoration:none;
	font-size:15px;
	font-weight:500;
	transition:.25s;
}

.category-menu li a:hover{
	background:#f7f7f7;
	color:#ef3b36;
	padding-left:28px;
}

.category-menu li.menu-item-has-children>a::after{
	content:"\f054";
	font-family:"Font Awesome 6 Free";
	font-weight:900;
	font-size:12px;
	color:#888;
}
.header-search{
    position:relative;
}

.masb-live-search-results{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border:1px solid #ddd;
    border-top:none;
    border-radius:0 0 10px 10px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    z-index:9999;
    display:none;
    max-height:420px;
    overflow-y:auto;
}

.live-item{
    padding:14px 18px;
    cursor:pointer;
    border-bottom:1px solid #f1f1f1;
    transition:.2s;
}

.live-item:hover{
    background:#f7f7f7;
}
.masb-live-search-results{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#fff;
    border:1px solid #e5e5e5;
    border-top:none;
    border-radius:0 0 12px 12px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    display:none;
    z-index:9999;
    overflow:hidden;
}

.live-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 15px;
    text-decoration:none;
    color:#222;
    border-bottom:1px solid #f2f2f2;
    transition:.2s;
}

.live-item:hover{
    background:#f8f8f8;
}

.live-item img{
    width:55px;
    height:55px;
    object-fit:cover;
    border-radius:8px;
    flex-shrink:0;
}

.live-content{
    flex:1;
}

.live-title{
    font-size:15px;
    font-weight:600;
    line-height:1.4;
}

.live-price{
    color:#ef4444;
    font-weight:700;
    margin-top:4px;
}
.live-item.active{
    background:#f3f4f6;
}