/* ======================================================
 * Custom Header Widget — CSS
 * hello-biz-child / assets/css/custom-header.css
 * ====================================================== */

/* ── Wrapper ─────────────────────────────────────────── */
.chw-header-wrapper {
	width: 100%;
	font-family: inherit;
}

/* ── Top Bar ─────────────────────────────────────────── */
.chw-top-bar {
	position: relative;
	z-index: 2;
	width: 100%;
	text-align: center;
	padding: 8px 20px;
	font-size: 13px;
	background-color: #ffffff;
	border-bottom: 1px solid #eeeeee;
	letter-spacing: 0.3px;
	box-sizing: border-box;
}

/* ── Main Header ─────────────────────────────────────── */
.chw-main-header {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 10px 30px;
	background-color: #ffffff;
	border-bottom: 1px solid #eeeeee;
	gap: 24px;
	box-sizing: border-box;
	min-height: 64px;
}

/* ── Logo ────────────────────────────────────────────── */
.chw-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.chw-logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
	line-height: 0;
}

.chw-logo img {
	display: block;
	max-height: 60px;
	max-width: 130px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.chw-logo-text {
	font-size: 18px;
	font-weight: 700;
	color: #333333;
	display: inline-block;
	white-space: nowrap;
	line-height: 1.2;
}

/* ── Navigation ──────────────────────────────────────── */
.chw-nav {
	flex: 1;
	min-width: 0;
}

.chw-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
	gap: 4px;
}

.chw-menu > li {
	position: relative;
}

.chw-menu > li > a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 10px;
	font-size: 13px;
	font-weight: 500;
	color: #333333;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease;
	line-height: 1;
	cursor: pointer;
}

.chw-menu > li > a:hover,
.chw-menu > li.chw-open > a {
	color: #9b2c7e;
	text-decoration: none;
}

/* 下拉箭头 */
.chw-arrow {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	transition: transform 0.22s ease;
	margin-left: 2px;
}

.chw-menu > li.chw-open > a .chw-arrow {
	transform: rotate(180deg);
}

/* Sub-menu (下拉列表) */
.chw-menu .sub-menu {
	display: none;
	position: absolute;
	top: calc(100% + 2px);
	left: 0;
	min-width: 180px;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	list-style: none;
	margin: 0;
	padding: 8px 0;
	z-index: 9999;
}

.chw-menu > li.chw-open > .sub-menu {
	display: block !important;
}

.chw-menu .sub-menu li {
	width: 100%;
}

.chw-menu .sub-menu a {
	display: block;
	padding: 9px 20px;
	font-size: 13px;
	color: #333333;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.15s ease, background-color 0.15s ease;
	line-height: 1.4;
}

.chw-menu .sub-menu a:hover {
	color: #9b2c7e;
	background-color: #faf7fa;
	text-decoration: none;
}

/* ── Right Icons ─────────────────────────────────────── */
.chw-right-icons {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	margin-left: auto;
}

.chw-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 5px;
	color: #333333;
	text-decoration: none;
	transition: color 0.2s ease;
	line-height: 1;
	outline: none;
	box-shadow: none;
}

.chw-icon-btn:hover,
.chw-icon-btn:focus,
.chw-icon-btn:active {
	color: #9b2c7e;
	text-decoration: none;
	background-color: transparent !important;
	background: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	outline: none;
}

.chw-icon-btn svg {
	display: block;
}

/* 购物车徽章 */
.chw-cart-badge {
	position: absolute;
	top: -2px;
	right: -4px;
	background: #9b2c7e;
	color: #ffffff;
	font-size: 10px;
	font-weight: 600;
	min-width: 16px;
	height: 16px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0 2px;
	pointer-events: none;
}

/* ── Search Panel (搜索面板) ─────────────────────────── */
.chw-search-panel {
	display: none;
	align-items: center;
	padding: 12px 30px;
	background-color: #ffffff;
	border-bottom: 2px solid #6b2d5e;
	box-sizing: border-box;
	min-height: 64px;
}

.chw-search-panel.chw-active {
	display: flex;
}

.chw-search-box {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 14px;
}

.chw-search-box form {
	display: flex;
	flex: 1;
	align-items: center;
	border: 1px solid #cccccc;
	background: #ffffff;
}

.chw-search-input {
	flex: 1;
	border: none;
	outline: none;
	padding: 10px 14px;
	font-size: 14px;
	background: transparent;
	color: #333333;
	min-width: 0;
	-webkit-appearance: none;
	appearance: none;
}

.chw-search-input::-webkit-search-cancel-button,
.chw-search-input::-webkit-search-decoration {
	display: none;
}

.chw-search-submit {
	border-left: none;
	padding: 8px 14px;
	flex-shrink: 0;
	color: #555555;
}

.chw-search-close {
	flex-shrink: 0;
}

/* ── 三级菜单（inline accordion）──────────────────────── */

/* 有孙分类的二级项 */
.chw-has-grandchildren > .chw-sub-parent-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 20px;
	font-size: 13px;
	color: #333333;
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.15s ease, background-color 0.15s ease;
	cursor: pointer;
	width: 100%;
	box-sizing: border-box;
}

.chw-has-grandchildren > .chw-sub-parent-link:hover {
	color: #9b2c7e;
	background-color: #faf7fa;
	text-decoration: none;
}

.chw-sub-arrow {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-left: 10px;
	transition: transform 0.22s ease;
}

.chw-has-grandchildren.chw-sub-open > .chw-sub-parent-link .chw-sub-arrow {
	transform: rotate(180deg);
}

/* 三级列表（默认隐藏，点击展开）*/
.chw-sub-sub-menu {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #f7f4f7;
}

.chw-has-grandchildren.chw-sub-open > .chw-sub-sub-menu {
	display: block !important;
}

.chw-sub-sub-menu .menu-item a {
	display: block;
	padding: 7px 20px 7px 32px;
	font-size: 12px;
	color: #555555;
	text-decoration: none;
	line-height: 1.4;
	transition: color 0.15s ease;
}

.chw-sub-sub-menu .menu-item a:hover {
	color: #9b2c7e;
	text-decoration: none;
}

/* ── 溢出分类分隔线 ──────────────────────────────────── */
.chw-overflow-divider {
	height: 1px;
	background-color: #e5e5e5;
	margin: 4px 0;
	pointer-events: none;
}

/* ── Mobile Toggle Button (汉堡 / 关闭) ──────────────── */
.chw-mobile-toggle {
	display: none; /* 桌面端隐藏 */
	background: none;
	border: none;
	padding: 6px;
	cursor: pointer;
	color: #333333;
	line-height: 0;
	flex-shrink: 0;
	-webkit-appearance: none;
	appearance: none;
}

.chw-mobile-toggle:hover,
.chw-mobile-toggle:focus,
.chw-mobile-toggle:active {
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	color: #9b2c7e;
}

.chw-mobile-toggle svg {
	display: block;
	pointer-events: none;
}

.chw-mobile-toggle .chw-icon-close {
	display: none;
}

.chw-mobile-toggle.chw-active .chw-icon-hamburger {
	display: none;
}

.chw-mobile-toggle.chw-active .chw-icon-close {
	display: block;
}

/* ── Mobile Drawer (移动端抽屉) ──────────────────────── */
.chw-mobile-drawer {
	display: none; /* 桌面端隐藏，通过媒体查询启用 */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	z-index: 9998;
	overflow: hidden;
	transform: translateX(-100%);
	transition: transform 0.3s ease-out;
	visibility: hidden;
}

.chw-mobile-drawer.chw-open {
	transform: translateX(0);
	visibility: visible;
}

/* 抽屉内的页面容器 */
.chw-mobile-pages {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

/* 单个菜单页 */
.chw-mobile-page {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ffffff;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	box-sizing: border-box;
}

.chw-mobile-page-main {
	z-index: 1;
}

/* 子分类页：默认在右侧外，激活时滑入 */
.chw-mobile-subpage {
	z-index: 2;
	transform: translateX(100%);
	transition: transform 0.3s ease-out;
	visibility: hidden;
}

.chw-mobile-subpage.chw-active {
	transform: translateX(0);
	visibility: visible;
}

/* 菜单列表 */
.chw-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.chw-mobile-item {
	border-bottom: 1px solid #f0f0f0;
	margin: 0;
	padding: 0;
}

.chw-mobile-item > a,
.chw-mobile-item > .chw-mobile-parent {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 16px 20px;
	font-size: 14px;
	font-weight: 400;
	color: #333333;
	text-decoration: none;
	line-height: 1.4;
	background: none;
	border: none;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	box-sizing: border-box;
}

.chw-mobile-item > a:hover,
.chw-mobile-item > .chw-mobile-parent:hover,
.chw-mobile-item > .chw-mobile-parent:focus {
	background-color: #f7f7f7;
	color: #333333;
	outline: none;
	text-decoration: none;
}

.chw-mobile-arrow {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: #666666;
	margin-left: 12px;
}

.chw-mobile-text {
	flex: 1;
	min-width: 0;
}

/* 返回按钮（子页顶部）*/
.chw-mobile-back {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 14px 20px;
	background-color: #f5f5f5;
	border: none;
	border-bottom: 1px solid #e5e5e5;
	color: #333333;
	cursor: pointer;
	text-align: left;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.3px;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.chw-mobile-back:hover,
.chw-mobile-back:focus,
.chw-mobile-back:active {
	background-color: #ececec;
	outline: none;
	box-shadow: none;
}

.chw-mobile-back-icon {
	display: inline-flex;
	align-items: center;
	margin-right: 12px;
	flex-shrink: 0;
	color: #333333;
}

/* 防止抽屉打开时背景滚动 */
body.chw-drawer-open {
	overflow: hidden;
}

/* ── Responsive: Tablet ──────────────────────────────── */
@media (max-width: 1024px) {
	.chw-main-header {
		gap: 14px;
	}

	.chw-menu > li > a {
		padding: 8px 7px;
		font-size: 12px;
	}
}

/* ── Responsive: Mobile (≤ 768px) ────────────────────── */
@media (max-width: 768px) {
	/* 显示汉堡按钮 + 抽屉 */
	.chw-mobile-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.chw-mobile-drawer {
		display: block;
	}

	/* 主头部：汉堡(左) - Logo(中) - 图标(右) */
	.chw-main-header {
		padding: 10px 16px;
		gap: 8px;
		flex-wrap: nowrap;
		justify-content: space-between;
		min-height: 60px;
	}

	/* Logo 居中 */
	.chw-logo {
		flex: 1 1 auto;
		display: flex;
		justify-content: center;
		min-width: 0;
	}

	.chw-logo a {
		display: inline-flex;
		justify-content: center;
	}

	.chw-logo img {
		max-height: 44px;
		max-width: 180px;
	}

	/* 隐藏桌面端水平导航 */
	.chw-nav {
		display: none;
	}

	.chw-right-icons {
		flex-shrink: 0;
		margin-left: 0;
		gap: 6px;
	}

	.chw-right-icons .chw-icon-btn {
		padding: 6px;
	}

	.chw-search-panel {
		padding: 10px 16px;
	}
}

@media (max-width: 480px) {
	.chw-main-header {
		padding: 8px 12px;
		gap: 6px;
	}

	.chw-logo img {
		max-height: 38px;
		max-width: 150px;
	}

	.chw-mobile-item > a,
	.chw-mobile-item > .chw-mobile-parent {
		padding: 14px 16px;
		font-size: 13px;
	}

	.chw-mobile-back {
		padding: 12px 16px;
	}
}