.vs-header{
	background:var(--vs-dark);
	position:sticky;
	top:0;
	z-index:999;
	box-shadow:var(--vs-shadow);
	transition:background .35s;
}

.vs-header.scrolled{
	background:#0b0b0b;
}

.header-row{
	display:flex;
	align-items:center;
	gap:24px;
	height:90px;
}

.header-logo{
	flex:0 0 auto;
}

.site-title{
	color:#fff;
	font-size:26px;
	font-weight:bold;
}

.custom-logo{
	max-height:60px;
	width:auto;
}

.header-search{
	flex:1 1 auto;
	max-width:380px;
}

.vs-search{
	display:flex;
	align-items:center;
	background:#fff;
	border-radius:50px;
	overflow:hidden;
	height:46px;
	width:100%;
}

.vs-search input{
	flex:1;
	border:none;
	outline:none;
	padding:0 18px;
	font-size:14px;
	background:transparent;
}

.vs-search button{
	width:52px;
	height:46px;
	background:var(--vs-primary);
	border:none;
	color:#fff;
	flex:0 0 auto;
}

.mobile-menu-inner .vs-search{
	margin-bottom:10px;
}

/* Topbar (thin strip above the sticky header) */
.topbar{
	background:var(--vs-primary);
	color:#fff;
	font-size:13px;
}

.topbar-inner{
	height:42px;
	display:flex;
	justify-content:space-between;
	align-items:center;
}

.topbar a{
	color:#fff;
	margin:0 6px;
}

.topbar a:hover{
	opacity:.85;
}

.topbar .top-left{
	display:flex;
	align-items:center;
	gap:4px;
}

.header-menu{
	flex:2 1 auto;
	display:flex;
	justify-content:center;
}

.menu{
	display:flex;
	gap:30px;
	align-items:center;
}

.menu li{
	position:relative;
}

.menu a{
	color:#fff;
	font-size:15px;
	font-weight:700;
}

.menu a:hover{
	color:var(--vs-primary);
}

.menu .sub-menu{
	position:absolute;
	top:100%;
	right:0;
	background:#181818;
	min-width:200px;
	padding:10px 0;
	border-radius:var(--vs-radius-sm);
	box-shadow:var(--vs-shadow-lg);
	opacity:0;
	visibility:hidden;
	transform:translateY(8px);
	transition:var(--vs-transition);
	z-index:50;
}

.menu li:hover > .sub-menu{
	opacity:1;
	visibility:visible;
	transform:translateY(0);
}

.menu .sub-menu a{
	display:block;
	padding:8px 18px;
	font-size:14px;
	font-weight:400;
}

.header-actions{
	display:flex;
	gap:12px;
	flex:0 0 auto;
}

.action-btn{
	width:44px;
	height:44px;
	border-radius:50%;
	background:var(--vs-dark-2);
	display:flex;
	align-items:center;
	justify-content:center;
	color:#fff;
	position:relative;
	transition:var(--vs-transition);
	border:none;
}

.action-btn:hover{
	background:var(--vs-primary);
	transform:translateY(-3px);
}

.cart-count{
	position:absolute;
	top:-4px;
	left:-4px;
	width:18px;
	height:18px;
	background:var(--vs-light);
	color:var(--vs-dark);
	border-radius:50%;
	font-size:11px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:bold;
}

/* Mobile hamburger — hidden on desktop */
.menu-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:5px;
	width:38px;
	height:38px;
	background:transparent;
	border:none;
}

.menu-toggle span{
	width:100%;
	height:2px;
	background:#fff;
	border-radius:2px;
	transition:var(--vs-transition);
}

.menu-toggle.is-active span:nth-child(1){
	transform:translateY(7px) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2){
	opacity:0;
}

.menu-toggle.is-active span:nth-child(3){
	transform:translateY(-7px) rotate(-45deg);
}

/* Off-canvas mobile menu panel */
.mobile-menu-panel{
	position:fixed;
	inset:0 0 0 auto;
	width:min(320px,85%);
	height:100vh;
	background:var(--vs-dark);
	transform:translateX(100%);
	transition:transform .35s ease;
	z-index:1000;
	overflow-y:auto;
}

.mobile-menu-panel.is-open{
	transform:translateX(0);
}

.mobile-menu-inner{
	padding:90px 24px 40px;
	display:flex;
	flex-direction:column;
	gap:25px;
}

.mobile-menu-inner .menu{
	flex-direction:column;
	align-items:flex-start;
	gap:18px;
}

.mobile-menu-inner .sub-menu{
	position:static;
	opacity:1;
	visibility:visible;
	transform:none;
	box-shadow:none;
	background:transparent;
	padding-right:14px;
	display:none;
}

.mobile-menu-inner li.menu-item-has-children.is-open > .sub-menu{
	display:block;
}

.mobile-menu-inner .menu-item-has-children > a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
}

.submenu-arrow{
	font-size:12px;
	color:#999;
	padding:4px;
}