/* =====================================================
   Sellzoa Header — Mobile Breakpoint & Modal Styles
   Author: Piyush Lal
   ===================================================== */

/* ═══════════════════════════════════════════════════════
   DESKTOP STRICT RULES (>767px)
   ═══════════════════════════════════════════════════════ */
@media (min-width: 768px) {
	#sellzoa-header #sz-hamburger-btn,
	#sellzoa-header .sz-hamburger,
	#sellzoa-header .sz-mobile-cart-btn,
	#sellzoa-header .sz-mobile-search-bar,
	#sellzoa-header .sz-mobile-pills,
	#sellzoa-header #sz-mobile-drawer,
	#sellzoa-header #sz-drawer-overlay,
	#sz-bottom-nav {
		display: none !important;
	}
}

/* ═══════════════════════════════════════════════════════
   MOBILE BREAKPOINT (<768px)
   ═══════════════════════════════════════════════════════ */
@media (max-width: 767px) {
	#sellzoa-header { position: sticky !important; top: 0 !important; }

	#sellzoa-header .sz-main-header { padding: 7px 0 !important; }
	#sellzoa-header .sz-container { padding: 0 12px !important; gap: 8px !important; flex-wrap: nowrap !important; }

	#sellzoa-header #sz-hamburger-btn,
	#sellzoa-header .sz-hamburger {
		display: flex !important;
		background: none !important;
		border: none !important;
		cursor: pointer !important;
		padding: 8px !important;
		flex-direction: column !important;
		gap: 4px !important;
		align-items: center !important;
		flex-shrink: 0 !important;
	}
	#sellzoa-header #sz-hamburger-btn span { display: block !important; width: 20px !important; height: 2px !important; background: #333 !important; border-radius: 2px !important; }

	#sellzoa-header .sz-logo-wrap { flex: 1 !important; justify-content: center !important; }
	#sellzoa-header .sz-logo-img { max-height: 34px !important; }
	#sellzoa-header .sz-badge-img, #sellzoa-header .sz-badge-text { display: none !important; }

	#sellzoa-header .sz-search-wrap,
	#sellzoa-header .sz-header-actions,
	#sellzoa-header .sz-nav-bar { display: none !important; }

	#sellzoa-header .sz-mobile-cart-btn {
		display: flex !important;
		align-items: center !important;
		position: relative !important;
		text-decoration: none !important;
		color: #333 !important;
		padding: 6px !important;
		flex-shrink: 0 !important;
	}
	#sellzoa-header .sz-mobile-cart-btn svg { width: 24px !important; height: 24px !important; }

	#sellzoa-header .sz-topbar-left { width: 100% !important; justify-content: center !important; }
	#sellzoa-header .sz-topbar-right { display: none !important; }
	#sellzoa-header .sz-topbar-inner { padding: 6px 12px !important; }

	#sellzoa-header .sz-mobile-search-bar {
		display: block !important;
		background: var(--sz-header-bg, #e8ebff) !important;
		padding: 6px 12px 8px !important;
	}
	#sellzoa-header .sz-mobile-search-bar .sz-search-form { border-radius: 22px !important; }
	#sellzoa-header .sz-mobile-search-bar .sz-search-input { padding: 7px 14px !important; font-size: 13px !important; }
	#sellzoa-header .sz-mobile-search-bar .sz-search-btn { padding: 7px 14px !important; }

	#sellzoa-header .sz-mobile-pills {
		display: flex !important;
		gap: 6px !important;
		padding: 6px 12px !important;
		overflow-x: auto !important;
		scrollbar-width: none !important;
		background: #ffffff !important;
		border-bottom: 1px solid rgba(0,0,0,.06) !important;
	}
	#sellzoa-header .sz-mobile-pills::-webkit-scrollbar { display: none !important; }
	#sellzoa-header .sz-pill {
		display: inline-block !important;
		padding: 4px 12px !important;
		border-radius: 18px !important;
		font-size: 12px !important;
		font-weight: 500 !important;
		color: #333 !important;
		background: #f4f5ff !important;
		white-space: nowrap !important;
		text-decoration: none !important;
		flex-shrink: 0 !important;
	}

	#sellzoa-header #sz-mobile-drawer {
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: min(300px, 88vw) !important;
		height: 100vh !important;
		background: var(--sz-drawer-bg, #ffffff) !important;
		z-index: 999999 !important;
		transform: translateX(-100%) !important;
		transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
		box-shadow: 4px 0 30px rgba(0,0,0,.15) !important;
	}
	#sellzoa-header #sz-mobile-drawer.open { transform: translateX(0) !important; }
	#sellzoa-header #sz-drawer-overlay {
		position: fixed !important;
		inset: 0 !important;
		background: rgba(0,0,0,.45) !important;
		z-index: 999998 !important;
		opacity: 0 !important;
		visibility: hidden !important;
		transition: opacity .3s, visibility .3s !important;
		display: block !important;
	}
	#sellzoa-header #sz-drawer-overlay.visible { opacity: 1 !important; visibility: visible !important; }

	#sellzoa-header .sz-drawer-header { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; flex-shrink: 0 !important; }
	#sellzoa-header .sz-drawer-logo-img { height: 32px !important; width: auto !important; max-width: 120px !important; object-fit: contain !important; }
	#sellzoa-header .sz-drawer-close { background: #f5f5f5 !important; border: none !important; width: 30px !important; height: 30px !important; border-radius: 50% !important; cursor: pointer !important; font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #555 !important; }

	#sellzoa-header .sz-drawer-nav { flex: 1 !important; overflow-y: auto !important; padding: 6px 0 !important; }
	#sellzoa-header .sz-drawer-cats { list-style: none !important; }
	#sellzoa-header .sz-drawer-cat-item { border-bottom: 1px solid rgba(0,0,0,.04) !important; }
	#sellzoa-header .sz-drawer-cat-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 16px !important; }
	#sellzoa-header .sz-drawer-cat-link { display: block !important; padding: 12px 0 !important; font-size: 14px !important; font-weight: 500 !important; color: var(--sz-drawer-text, #222) !important; text-decoration: none !important; flex: 1 !important; }
	#sellzoa-header .sz-drawer-toggle { background: none !important; border: none !important; cursor: pointer !important; padding: 6px !important; color: #bbb !important; }
	#sellzoa-header .sz-chevron { display: inline-block !important; font-size: 16px !important; transition: transform .2s !important; }

	#sellzoa-header .sz-drawer-sublinks { list-style: none !important; background: #fafafa !important; border-top: 1px solid rgba(0,0,0,.04) !important; }
	#sellzoa-header .sz-drawer-sublink-item { border-bottom: 1px solid rgba(0,0,0,.03) !important; }
	#sellzoa-header .sz-drawer-sublink-head { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 16px 0 28px !important; }
	#sellzoa-header .sz-drawer-sublink { display: block !important; padding: 9px 0 !important; font-size: 13px !important; color: #444 !important; text-decoration: none !important; flex: 1 !important; }

	#sellzoa-header .sz-drawer-subsublinks { list-style: none !important; background: #f5f5f5 !important; }
	#sellzoa-header .sz-drawer-subsublink { display: block !important; padding: 7px 16px 7px 42px !important; font-size: 12.5px !important; color: #555 !important; text-decoration: none !important; border-top: 1px solid rgba(0,0,0,.03) !important; }
	#sellzoa-header .sz-drawer-subsublink::before { content: '- ' !important; color: #bbb !important; }

	#sellzoa-header .sz-drawer-extra { padding: 12px 16px !important; border-top: 1px solid rgba(0,0,0,.07) !important; flex-shrink: 0 !important; }
	#sellzoa-header .sz-drawer-extra-links { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
	#sellzoa-header .sz-extra-link { font-size: 13px !important; color: var(--sz-drawer-text, #222) !important; text-decoration: none !important; display: block !important; padding: 2px 0 !important; width: 100% !important; }

	#sz-bottom-nav {
		display: flex !important;
		position: fixed !important;
		bottom: 0 !important; left: 0 !important; right: 0 !important;
		z-index: 99990 !important;
		background: var(--sz-bottom-bg, #ffffff) !important;
		border-top: 1px solid rgba(0,0,0,.1) !important;
		box-shadow: 0 -2px 16px rgba(0,0,0,.1) !important;
		height: 56px !important;
		justify-content: space-around !important;
		align-items: center !important;
	}
	#sz-bottom-nav .sz-bottom-nav-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 2px !important; text-decoration: none !important; color: var(--sz-bottom-text, #666) !important; flex: 1 !important; height: 100% !important; padding: 4px !important; }
	#sz-bottom-nav .sz-bottom-nav-item.active { color: var(--sz-bottom-active, #6373f7) !important; }
	#sz-bottom-nav .sz-bottom-icon svg { width: 20px !important; height: 20px !important; }
	#sz-bottom-nav .sz-bottom-label { font-size: 9.5px !important; font-family: 'Inter', sans-serif !important; font-weight: 500 !important; }

	body { padding-bottom: 56px !important; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE SEARCH MODAL OVERLAY
   ═══════════════════════════════════════════════════════ */
.sz-msm {
	position: fixed !important;
	inset: 0 !important;
	background: #ffffff !important;
	z-index: 999999 !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	font-family: 'Inter', -apple-system, sans-serif !important;
}
.sz-msm[hidden] { display: none !important; }

.sz-msm-header {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	padding: 12px 14px !important;
	border-bottom: 1px solid #f0f0f0 !important;
	background: #ffffff !important;
	flex-shrink: 0 !important;
}

.sz-msm-back {
	background: none !important;
	border: none !important;
	font-size: 22px !important;
	color: #333333 !important;
	cursor: pointer !important;
	padding: 4px 6px !important;
	line-height: 1 !important;
}

.sz-msm-input-wrap {
	flex: 1 !important;
	position: relative !important;
	display: flex !important;
	align-items: center !important;
}
.sz-msm-input {
	width: 100% !important;
	border: 1.5px solid #6373f7 !important;
	border-radius: 10px !important;
	padding: 9px 36px 9px 12px !important;
	font-size: 14px !important;
	outline: none !important;
	color: #333333 !important;
	background: #ffffff !important;
}
.sz-msm-icon {
	position: absolute !important;
	right: 10px !important;
	color: #6373f7 !important;
	display: flex !important;
	align-items: center !important;
	pointer-events: none !important;
}

.sz-msm-body {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 16px !important;
}

.sz-msm-section {
	margin-bottom: 24px !important;
}

.sz-msm-title {
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .5px !important;
	text-transform: uppercase !important;
	color: #333333 !important;
	margin-bottom: 12px !important;
}

.sz-msm-pills-row {
	display: flex !important;
	gap: 8px !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
	padding-bottom: 4px !important;
}
.sz-msm-pills-row::-webkit-scrollbar { display: none !important; }

.sz-msm-pill-btn {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: #333333 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
	flex-shrink: 0 !important;
}
.sz-msm-pill-btn:active { background: #f4f5ff !important; border-color: #6373f7 !important; color: #6373f7 !important; }

.sz-msm-products-scroll {
	display: flex !important;
	gap: 12px !important;
	overflow-x: auto !important;
	scrollbar-width: none !important;
	padding-bottom: 8px !important;
	position: relative !important;
}
.sz-msm-products-scroll::-webkit-scrollbar { display: none !important; }

.sz-msm-card {
	width: 150px !important;
	flex-shrink: 0 !important;
	text-decoration: none !important;
	color: #333333 !important;
	background: #ffffff !important;
	border: 1px solid #eeeeee !important;
	border-radius: 10px !important;
	padding: 10px !important;
	display: flex !important;
	flex-direction: column !important;
}

.sz-msm-img-wrap {
	width: 100% !important;
	height: 130px !important;
	background: #ffffff !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin-bottom: 8px !important;
	padding: 4px !important;
}
.sz-msm-img-wrap img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }

.sz-msm-card-title {
	font-size: 11.5px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
	color: #333333 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	margin-bottom: 6px !important;
	height: 30px !important;
}

.sz-msm-card-prices {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.sz-msm-old-price { font-size: 10.5px !important; color: #999999 !important; text-decoration: line-through !important; }
.sz-msm-sale-badge { font-size: 10.5px !important; font-weight: 700 !important; color: #e53967 !important; text-transform: uppercase !important; }
.sz-msm-sale-price { font-size: 12px !important; font-weight: 700 !important; }

.sz-msm-scroll-arrow {
	position: absolute !important;
	right: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 30px !important;
	height: 30px !important;
	background: rgba(0,0,0,.15) !important;
	color: #ffffff !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 16px !important;
	pointer-events: none !important;
}

.sz-drawer-section-title {
	font-size: 10.5px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: .5px !important;
	color: #888888 !important;
	padding: 10px 16px 4px !important;
}
.sz-drawer-main-links {
	list-style: none !important;
	margin-bottom: 6px !important;
}
.sz-drawer-main-item {
	border-bottom: 1px solid rgba(0,0,0,.04) !important;
}
.sz-drawer-main-link {
	display: block !important;
	padding: 10px 16px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #6373f7 !important;
	text-decoration: none !important;
}