/* ZOPANI Header v1.1.0 — OurShopee style (desktop + mobile) */
.zopani-header *{box-sizing:border-box;}
.zopani-header{font-family:inherit;width:100%;}

/* optional top strip (hidden if empty) */
.zh-strip{
	background:var(--zh-primary-dark,#1D4ED8);
	color:#fff;text-align:center;
	font-size:13px;font-weight:600;letter-spacing:.06em;
	padding:7px 12px;text-transform:uppercase;
}

/* main blue bar */
.zh-main{background:var(--zh-primary,#2563EB);}
.zh-inner{
	max-width:1320px;margin:0 auto;padding:12px 20px;
	display:flex;align-items:center;gap:22px;
}

/* hamburger (mobile only) */
.zh-burger{
	display:none;flex-direction:column;justify-content:center;gap:5px;
	width:34px;height:34px;background:transparent;border:0;cursor:pointer;padding:0;flex:0 0 auto;
}
.zh-burger span{display:block;width:26px;height:3px;background:#fff;border-radius:2px;}

/* logo */
.zh-logo{flex:0 0 auto;display:flex;align-items:center;text-decoration:none;}
.zh-logo-img{max-height:46px;width:auto;display:block;}
.zh-logo-text{color:#fff;font-size:38px;font-weight:800;letter-spacing:-.02em;font-family:inherit;}

/* search */
.zh-search{flex:1 1 auto;max-width:680px;}
.zh-search-form{display:flex;align-items:stretch;width:100%;background:#fff;border-radius:10px;overflow:hidden;height:50px;border:0!important;box-shadow:none!important;outline:0;}
.zh-search-input{flex:1 1 auto;border:0!important;outline:0!important;box-shadow:none!important;padding:0 18px;font-size:16px;background:transparent;color:#111;}
.zh-search-input::placeholder{color:#9aa0a6;}
.zh-search-btn{flex:0 0 auto;width:72px;min-width:72px;border:0;outline:0;cursor:pointer;background:var(--zh-search-btn,#F5C518)!important;display:flex;align-items:center;justify-content:center;transition:filter .15s;border-radius:0 10px 10px 0;}
.zh-search-btn:hover{filter:brightness(1.07);}
.zh-search .dgwt-wcas-search-wrapp{max-width:100%;}

/* actions */
.zh-actions{flex:0 0 auto;display:flex;align-items:center;gap:20px;color:#fff;}
.zh-actions a{color:#fff;text-decoration:none;}
.zh-app,.zh-country,.zh-login{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.15;background:transparent;border:0;color:#fff;cursor:pointer;font-family:inherit;}
.zh-app span{font-weight:600;white-space:nowrap;}
.zh-country{cursor:pointer;font-weight:600;}
.zh-flag{width:26px;height:18px;object-fit:cover;border-radius:3px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.08);}
.zh-login span{font-weight:600;}

/* cart */
.zh-cart{position:relative;display:flex;align-items:center;}
.zh-cart-count{position:absolute;top:-8px;right:-10px;background:var(--zh-search-btn,#F59E0B);color:#fff;font-size:11px;font-weight:800;min-width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0 4px;}

/* category nav */
.zh-nav{background:#fff;border-bottom:1px solid #eceef1;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.zh-nav-inner{max-width:1320px;margin:0 auto;padding:0 20px;}
.zh-cat-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.zh-cat-menu>li{position:relative;}
.zh-cat-menu>li>a{display:block;padding:14px 16px;color:#1f2937;font-size:15px;font-weight:600;text-decoration:none;transition:color .15s;white-space:nowrap;}
.zh-cat-menu>li>a:hover{color:var(--zh-primary,#2563EB);}
.zh-cat-menu li .sub-menu{position:absolute;top:100%;left:0;min-width:210px;background:#fff;list-style:none;margin:0;padding:8px 0;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:50;}
.zh-cat-menu li:hover>.sub-menu{opacity:1;visibility:visible;transform:translateY(0);}
.zh-cat-menu .sub-menu li a{display:block;padding:9px 18px;color:#374151;font-size:14px;text-decoration:none;}
.zh-cat-menu .sub-menu li a:hover{background:#f3f6ff;color:var(--zh-primary,#2563EB);}

/* ===== DESKTOP: hide labels on smaller desktops ===== */
@media(max-width:1080px){
	.zh-app span,.zh-login span{display:none;}
	.zh-inner{gap:14px;}
}

/* ===== MOBILE (OurShopee layout) ===== */
@media(max-width:820px){
	.zh-inner{
		display:grid;
		grid-template-columns:auto auto 1fr auto auto;
		grid-template-areas:
			"burger logo space login cart"
			"search search search search search"
			"country country country country country";
		align-items:center;row-gap:12px;column-gap:12px;padding:12px 16px;
	}
	.zh-burger{display:flex;grid-area:burger;}
	.zh-logo{grid-area:logo;}
	.zh-logo-text{font-size:30px;}
	.zh-logo-img{max-height:38px;}
	.zh-actions{display:contents;}
	.zh-app{display:none;}
	.zh-login{grid-area:login;}
	.zh-login span{display:inline;font-size:15px;}
	.zh-cart{grid-area:cart;justify-self:end;margin-left:6px;}
	.zh-cart{grid-area:cart;}
	.zh-search{grid-area:search;max-width:100%;}
	.zh-search-form{height:50px;border-radius:12px;}
	.zh-country{grid-area:country;justify-self:end;}
	.zh-country-label{display:inline;font-size:16px;font-weight:700;}
	.zh-nav-inner{padding:0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.zh-cat-menu{flex-wrap:nowrap;}
	.zh-cat-menu>li>a{padding:12px 12px;font-size:14px;}
	.zh-cat-menu li.zh-open>.sub-menu{opacity:1;visibility:visible;transform:none;position:static;box-shadow:none;}
	.zh-nav{display:none;}
	.zh-nav.zh-nav-open{display:block;}
}

@media(max-width:480px){
	.zh-logo-text{font-size:24px;}
	.zh-search-form{height:46px;}
	.zh-login span{display:inline;font-size:13px;}
}


/* country dropdown */
.zh-country{position:relative;}
.zh-country-drop{
	position:absolute;top:calc(100% + 10px);right:0;min-width:170px;background:#fff;
	list-style:none;margin:0;padding:6px 0;border-radius:10px;
	box-shadow:0 12px 34px rgba(0,0,0,.16);
	opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s;z-index:60;
}
.zh-country:hover .zh-country-drop,.zh-country:focus .zh-country-drop,.zh-country:focus-within .zh-country-drop{opacity:1;visibility:visible;transform:translateY(0);}
.zh-country-drop li{display:flex;align-items:center;gap:10px;padding:9px 16px;color:#1f2937;font-size:15px;font-weight:600;cursor:pointer;}
.zh-country-drop li:hover{background:#f3f6ff;color:var(--zh-primary,#2563EB);}
.zh-country:hover .zh-chev,.zh-country:focus-within .zh-chev{transform:rotate(180deg);}
.zh-chev{transition:transform .18s;}

/* app QR modal */
.zh-app-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.zh-app-modal[hidden]{display:none;}
.zh-app-box{position:relative;background:#fff;border-radius:16px;max-width:680px;width:100%;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.4);}
.zh-app-box img{display:block;width:100%;height:auto;}
.zh-app-close{position:absolute;top:10px;right:14px;background:rgba(0,0,0,.06);border:0;width:38px;height:38px;border-radius:50%;font-size:26px;line-height:1;cursor:pointer;color:#333;z-index:2;}
.zh-app-close:hover{background:rgba(0,0,0,.12);}

.zh-country-drop .zh-flag{width:24px;height:16px;}


/* Become a Seller button */
.zh-seller{
	position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;
	border:1.5px solid rgba(255,255,255,.55);border-radius:10px;
	padding:9px 16px;font-size:14px;font-weight:700;white-space:nowrap;
	transition:background .15s,border-color .15s;
}
.zh-seller::after{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:zh-shine 3s infinite;}
@keyframes zh-shine{0%{left:-130%}50%{left:130%}100%{left:130%}}
.zh-seller:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.zh-seller svg{flex:0 0 auto;}

@media(max-width:820px){
	.zh-seller{grid-area:seller;border:0;padding:0;justify-self:end;}
	.zh-seller span{display:none;}
	.zh-inner{
		grid-template-columns:auto auto 1fr auto auto auto;
		grid-template-areas:
			"burger logo space seller login cart"
			"search search search search search search"
			"country country country country country country";
	}
}
@media(max-width:480px){
	.zh-seller svg{width:22px;height:22px;}
}


/* ===== Mobile slide drawer (hamburger) ===== */
.zh-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9998;}
.zh-drawer-overlay[hidden]{display:none;}
.zh-drawer{
	position:fixed;top:0;left:0;width:86%;max-width:360px;height:100%;
	background:#fff;z-index:9999;overflow-y:auto;
	transform:translateX(-100%);transition:transform .28s ease;
	box-shadow:6px 0 30px rgba(0,0,0,.2);
}
.zh-drawer[hidden]{display:block;}        /* keep in DOM for transition */
.zh-drawer.zh-drawer-open{transform:translateX(0);}
.zh-drawer-head{
	background:var(--zh-primary,#2563EB);padding:30px 20px 26px;position:relative;
	display:flex;flex-direction:column;align-items:center;gap:10px;
}
.zh-drawer-close{
	position:absolute;top:12px;right:14px;background:transparent;border:0;color:#fff;
	font-size:30px;line-height:1;cursor:pointer;
}
.zh-drawer-user{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;}
.zh-drawer-avatar{width:78px;height:78px;border-radius:50%;background:var(--zh-search-btn,#F5C518);display:flex;align-items:center;justify-content:center;}
.zh-drawer-login{color:#fff;font-size:17px;font-weight:600;}
.zh-drawer-body{padding:18px 16px 40px;}
.zh-drawer-title{margin:6px 0 14px;font-size:18px;font-weight:800;color:#111;letter-spacing:.02em;font-style:italic;}
.zh-drawer-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.zh-drawer-menu li{margin:0;}
.zh-drawer-menu li a{
	display:flex;align-items:center;justify-content:space-between;
	background:#f4f5f7;border-radius:12px;padding:18px 18px;
	color:#1f2937;font-size:16px;font-weight:600;text-decoration:none;
}
.zh-drawer-menu li a::after{content:'\203A';color:#9aa0a6;font-size:22px;line-height:1;}
.zh-drawer-menu li a:hover{background:#eef1ff;color:var(--zh-primary,#2563EB);}

/* hide drawer entirely on desktop */
@media(min-width:821px){
	.zh-drawer,.zh-drawer-overlay{display:none!important;}
}