/* Unified top navigation: compact desktop row and V1-compatible mobile menu. */
:root {
	--pcgh-header-height: 62px;
	--pcgh-header-indicator: var(--pcgh-primary)
}

.pcgh-header--unified {
	background: color-mix(in srgb, var(--pcgh-surface) 94%, transparent);
	border-bottom: 1px solid var(--pcgh-border);
	box-shadow: none
}

.pcgh-header--unified > .pcgh-container {
	width: min(100%, var(--pcgh-container-w));
	max-width: var(--pcgh-container-w);
	padding-right: 16px;
	padding-left: 16px
}

.pcgh-header--unified .pcgh-header__inner {
	display: flex;
	align-items: center;
	gap: 22px;
	height: var(--pcgh-header-height);
	min-height: var(--pcgh-header-height)
}

.pcgh-header--unified .pcgh-logo {
	flex: 0 0 auto;
	min-width: 0
}

.pcgh-header--unified .pcgh-logo > img,
.pcgh-header--unified .pcgh-logo__img {
	width: auto;
	max-height: 38px;
	object-fit: contain
}

.pcgh-header--unified .pcgh-logo__icon {
	width: 34px;
	height: 34px;
	border-radius: 6px
}

.pcgh-header--unified .pcgh-logo__text strong {
	font-size: 18px;
	font-weight: 700
}

.pcgh-header--unified .pcgh-logo__text small {
	font-size: 9px
}

.pcgh-header--unified .pcgh-nav {
	position: relative;
	display: flex;
	align-items: center;
	align-self: stretch;
	flex: 1 1 auto;
	min-width: 0;
	overflow: visible
}

.pcgh-header--unified .pcgh-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 12px;
	width: max-content;
	max-width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	white-space: nowrap
}

.pcgh-header--unified .pcgh-nav__list > li {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	height: 100%
}

.pcgh-header--unified .pcgh-nav__list > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 6px;
	color: var(--pcgh-text-2);
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;
	letter-spacing: 0;
	transition: color .18s ease, background-color .18s ease
}

.pcgh-header--unified .pcgh-nav__list > li > a:hover,
.pcgh-header--unified .pcgh-nav__list > li > a:focus-visible {
	color: var(--pcgh-text);
	background: color-mix(in srgb, var(--pcgh-text) 7%, transparent)
}

.pcgh-header--unified .pcgh-nav__list > li.current-menu-item > a,
.pcgh-header--unified .pcgh-nav__list > li.current_page_item > a,
.pcgh-header--unified .pcgh-nav__list > li.current-menu-ancestor > a,
.pcgh-header--unified .pcgh-nav__list > li.current_page_ancestor > a {
	color: var(--pcgh-header-indicator) !important;
	background: transparent !important;
	box-shadow: none !important;
	font-weight: 500
}

.pcgh-header--unified .pcgh-nav-more.is-current-container > a {
	color: var(--pcgh-header-indicator) !important;
	background: transparent !important;
	box-shadow: none !important;
	font-weight: 500
}

.pcgh-header--unified .pcgh-nav__indicator {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: block;
	width: 0;
	height: 3px;
	border-radius: 2px 2px 0 0;
	background: var(--pcgh-header-indicator);
	opacity: 0;
	pointer-events: none;
	transition: transform .22s ease, width .22s ease, opacity .16s ease
}

.pcgh-header--unified .pcgh-nav__indicator.is-visible {
	opacity: 1
}

.pcgh-header--unified .pcgh-header__right {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 12px;
	min-width: 0;
	margin-left: auto
}

.pcgh-header--unified .pcgh-header__right .pcgh-search {
	flex: 0 1 210px;
	width: min(210px, 17vw)
}

.pcgh-header--unified .pcgh-header__actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: 6px;
	margin: 0
}

.pcgh-header--unified .pcgh-icon-btn {
	width: 36px;
	height: 36px;
	border-radius: 6px
}

.pcgh-header--unified .pcgh-header-vip,
.pcgh-header--unified .pcgh-header__login-btn {
	height: 36px;
	border-radius: 6px
}

@media (min-width: 769px) {
	.pcgh-header--unified.pcgh-header--layout-v2 > .pcgh-container {
		width: 100%;
		max-width: none;
		padding-right: 24px;
		padding-left: 24px
	}

	.pcgh-header--unified.pcgh-header--layout-v2 .pcgh-header__inner {
		gap: 16px
	}

	.pcgh-header--unified.pcgh-header--layout-v2 .pcgh-logo {
		flex: 0 0 auto
	}

	.pcgh-header--unified.pcgh-header--layout-v2 .pcgh-nav {
		flex: 0 1 auto;
		width: max-content;
		max-width: 100%;
		margin-left: 0
	}

	.pcgh-header--unified.pcgh-header--layout-v2 .pcgh-header__right {
		margin-left: auto
	}
}

.pcgh-header--unified .pcgh-nav__list > li > .sub-menu {
	left: 0;
	margin-left: var(--pcgh-submenu-shift-x, 0);
	transform: translate3d(0, 8px, 0)
}

.pcgh-header--unified .pcgh-nav__list > li:hover > .sub-menu,
.pcgh-header--unified .pcgh-nav__list > li:focus-within > .sub-menu,
.pcgh-header--unified .pcgh-nav__list > li.is-open > .sub-menu {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(0, 0, 0)
}

.pcgh-header--unified .pcgh-nav__list > li.is-keyboard-closed > .sub-menu {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transform: translate3d(0, 8px, 0)
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more {
	display: none
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more.is-visible {
	display: flex
}

.pcgh-header--unified .pcgh-nav-more__link svg {
	width: 17px;
	height: 17px
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more > .sub-menu {
	top: 100%;
	right: 0;
	left: auto;
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	width: max-content;
	min-width: 0;
	max-width: calc(100vw - 32px);
	padding: 8px;
	border-radius: 0 0 6px 6px;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: thin
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more > .sub-menu::before {
	display: none
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more > .sub-menu > li {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	min-width: 0
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more > .sub-menu > li > a {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	min-height: 54px;
	padding: 10px 12px;
	border-radius: 5px;
	text-align: left;
	white-space: nowrap
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more > .sub-menu > li > a .pcgh-nav__icon {
	width: 22px;
	height: 22px;
	min-width: 22px;
	min-height: 22px
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more > .sub-menu > li > a .pcgh-nav__text {
	align-items: flex-start
}

.pcgh-header--unified .pcgh-nav__list > .pcgh-nav-more > .sub-menu > li > .sub-menu {
	display: none
}

.pcgh-header--unified.is-home-search-transparent:not(.is-home-search-scrolled) {
	border-bottom-color: transparent
}

html[data-pcgh-theme-resolved="light"] .pcgh-header--unified:not(.is-home-search-transparent),
html[data-pcgh-theme-resolved="light"] body:not(.home):not(.front-page) .pcgh-header--unified,
html[data-pcgh-theme-resolved="light"] .pcgh-header--unified.is-home-search-scrolled {
	background: color-mix(in srgb, #fff 96%, transparent)
}

.pcgh-header--unified .pcgh-icon-btn :where(i[data-lucide], svg[data-lucide], svg.lucide) {
	width: 20px;
	height: 20px;
	flex: 0 0 20px;
	pointer-events: none
}

@media (prefers-reduced-motion: reduce) {
	.pcgh-header--unified .pcgh-nav__indicator,
	.pcgh-header--unified .pcgh-nav__list .sub-menu {
		transition: none
	}
}

@media (max-width: 1180px) and (min-width: 769px) {
	.pcgh-header--unified .pcgh-header__inner {
		gap: 14px
	}

	.pcgh-header--unified .pcgh-nav__list {
		gap: 6px
	}

	.pcgh-header--unified .pcgh-nav__list > li > a {
		padding-right: 9px;
		padding-left: 9px
	}

	.pcgh-header--unified .pcgh-header-vip span,
	.pcgh-header--unified .pcgh-header__login-btn span {
		display: none
	}
}

@media (max-width: 768px) {
	.pcgh-header--unified {
		--pcgh-header-height: 56px
	}

	.pcgh-header--unified > .pcgh-container {
		padding-right: 12px;
		padding-left: 12px
	}

	.pcgh-header--unified .pcgh-header__inner {
		display: flex;
		flex-wrap: nowrap;
		gap: 10px;
		height: var(--pcgh-header-height);
		min-height: var(--pcgh-header-height)
	}

	.pcgh-header--unified .pcgh-logo {
		flex: 0 0 auto
	}

	.pcgh-header--unified .pcgh-logo > img,
	.pcgh-header--unified .pcgh-logo__img {
		max-height: 34px
	}

	.pcgh-header--unified .pcgh-nav {
		align-self: stretch;
		flex: 1 1 auto;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch
	}

	.pcgh-header--unified .pcgh-nav::-webkit-scrollbar {
		display: none
	}

	.pcgh-header--unified .pcgh-nav__list {
		display: flex;
		flex-wrap: nowrap;
		gap: 2px;
		width: max-content;
		max-width: none;
		height: 100%
	}

	.pcgh-header--unified .pcgh-nav__list > li > a {
		height: 34px;
		padding: 0 10px;
		font-size: 14px;
		line-height: 34px
	}

	.pcgh-header--unified .pcgh-nav__list > li.current-menu-item > a::before,
	.pcgh-header--unified .pcgh-nav__list > li.current_page_item > a::before,
	.pcgh-header--unified .pcgh-nav__list > li.current-menu-ancestor > a::before,
	.pcgh-header--unified .pcgh-nav__list > li.current_page_ancestor > a::before {
		content: "";
		position: absolute;
		right: 10px;
		bottom: -11px;
		left: 10px;
		height: 2px;
		border-radius: 2px 2px 0 0;
		background: var(--pcgh-header-indicator);
		pointer-events: none
	}

	.pcgh-header--unified .pcgh-nav__indicator,
	.pcgh-header--unified .pcgh-nav__list > li > .sub-menu,
	.pcgh-header--unified .pcgh-header__right > .pcgh-search,
	.pcgh-header--unified .pcgh-nav-more {
		display: none !important
	}

	.pcgh-header--unified .pcgh-header__right {
		display: contents
	}

	.pcgh-header--unified .pcgh-header__actions {
		flex: 0 0 auto;
		gap: 4px;
		margin-left: auto
	}

	.pcgh-header--unified .pcgh-header__actions .pcgh-icon-btn,
	.pcgh-header--unified .pcgh-header__actions .pcgh-avatar {
		width: 40px;
		height: 40px;
		flex: 0 0 40px;
		border-radius: 8px
	}

	.pcgh-header--unified .pcgh-header__actions .pcgh-mobile-search-btn {
		display: inline-flex !important
	}

	.pcgh-header--unified .pcgh-header__actions .pcgh-header-vip,
	.pcgh-header--unified .pcgh-header__actions .pcgh-header-search-btn,
	.pcgh-header--unified .pcgh-header__actions .pcgh-header__login-btn {
		display: none !important
	}
}