/* Mobile left drawer inspired by Zibll's compact navigation structure. */
.pcgh-mobile-menu-toggle,
.pcgh-mobile-drawer,
.pcgh-mobile-drawer__overlay {
	display: none
}

@media (max-width: 768px) {
	.pcgh-header--unified .pcgh-header__inner {
		position: relative;
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr) auto;
		gap: 8px;
		padding-right: 10px;
		padding-left: 10px
	}

	.pcgh-mobile-menu-toggle {
		grid-column: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 7px;
		background: transparent;
		color: var(--pcgh-text);
		cursor: pointer
	}

	.pcgh-mobile-menu-toggle:hover,
	.pcgh-mobile-menu-toggle:focus-visible {
		background: color-mix(in srgb, var(--pcgh-text) 8%, transparent)
	}

	.pcgh-mobile-menu-toggle :where(svg, i) {
		width: 21px;
		height: 21px;
		pointer-events: none
	}

	.pcgh-header--unified .pcgh-logo {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 2;
		max-width: 36vw;
		transform: translate(-50%, -50%)
	}

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

	.pcgh-header--unified .pcgh-nav {
		display: none !important
	}

	.pcgh-header--unified .pcgh-header__right {
		grid-column: 3;
		display: contents
	}

	.pcgh-header--unified .pcgh-header__actions {
		grid-column: 3;
		justify-self: end;
		gap: 4px;
		margin: 0
	}

	.pcgh-header--unified .pcgh-header__actions > :not(.pcgh-mobile-search-btn):not(.pcgh-theme-switch) {
		display: none !important
	}

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

	.pcgh-mobile-drawer__overlay {
		position: fixed;
		inset: 0;
		z-index: 1190;
		display: block;
		width: 100%;
		height: 100%;
		padding: 0;
		border: 0;
		background: rgba(7, 10, 16, .56);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		touch-action: none;
		transition: opacity .24s ease, visibility .24s ease
	}

	.pcgh-mobile-drawer {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 1200;
		display: flex;
		flex-direction: column;
		width: clamp(268px, 72vw, 320px);
		max-width: calc(100vw - 44px);
		height: 100vh;
		height: 100dvh;
		border-right: 1px solid var(--pcgh-border);
		background: var(--pcgh-surface);
		box-shadow: 18px 0 48px rgba(0, 0, 0, .22);
		color: var(--pcgh-text);
		visibility: hidden;
		transform: translate3d(-102%, 0, 0);
		transition: transform .26s cubic-bezier(.2, .75, .25, 1), visibility .26s ease;
		will-change: transform
	}

	body.pcgh-mobile-drawer-open .pcgh-mobile-drawer__overlay {
		opacity: 1;
		visibility: visible;
		pointer-events: auto
	}

	body.pcgh-mobile-drawer-open .pcgh-mobile-drawer {
		visibility: visible;
		transform: translate3d(0, 0, 0)
	}

	body.pcgh-mobile-drawer-open {
		overflow: hidden
	}

	body.pcgh-mobile-drawer-open .pcgh-header {
		transform: none !important;
		opacity: 1 !important
	}

	.pcgh-mobile-drawer__head {
		position: relative;
		z-index: 2;
		display: grid;
		grid-template-columns: 42px minmax(0, 1fr) 42px;
		align-items: center;
		flex: 0 0 calc(56px + env(safe-area-inset-top));
		height: calc(56px + env(safe-area-inset-top));
		padding: env(safe-area-inset-top) 8px 0;
		border-bottom: 1px solid var(--pcgh-border);
		background: color-mix(in srgb, var(--pcgh-surface) 96%, transparent)
	}

	.pcgh-mobile-drawer__close,
	.pcgh-mobile-drawer__message {
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 7px;
		background: transparent;
		color: var(--pcgh-text-2);
		cursor: pointer
	}

	.pcgh-mobile-drawer__close:hover,
	.pcgh-mobile-drawer__message:hover,
	.pcgh-mobile-drawer__close:focus-visible,
	.pcgh-mobile-drawer__message:focus-visible {
		background: var(--pcgh-surface-2);
		color: var(--pcgh-text)
	}

	.pcgh-mobile-drawer__close :where(svg, i),
	.pcgh-mobile-drawer__message :where(svg, i) {
		width: 20px;
		height: 20px;
		pointer-events: none
	}

	.pcgh-mobile-drawer__message > span {
		position: absolute;
		top: 4px;
		right: 2px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 16px;
		height: 16px;
		padding: 0 4px;
		border: 2px solid var(--pcgh-surface);
		border-radius: 9px;
		background: #ef4444;
		color: #fff;
		font-size: 9px;
		font-weight: 700;
		line-height: 1
	}

	.pcgh-mobile-drawer__brand {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 7px;
		min-width: 0;
		color: var(--pcgh-text)
	}

	.pcgh-mobile-drawer__brand img {
		display: none;
		width: auto;
		max-width: 142px;
		max-height: 34px;
		object-fit: contain
	}

	html[data-pcgh-theme-resolved="dark"] .pcgh-mobile-drawer__brand .pcgh-logo__img--dark,
	html[data-pcgh-theme-resolved="light"] .pcgh-mobile-drawer__brand .pcgh-logo__img--light,
	.pcgh-mobile-drawer__brand .pcgh-logo__img:only-child {
		display: block
	}

	.pcgh-mobile-drawer__brand > span {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		border-radius: 6px;
		background: var(--pcgh-primary);
		color: #fff
	}

	.pcgh-mobile-drawer__brand > span :where(svg, i) {
		width: 18px;
		height: 18px
	}

	.pcgh-mobile-drawer__brand strong {
		overflow: hidden;
		font-size: 17px;
		font-weight: 700;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.pcgh-mobile-drawer__scroll {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 6px 12px 12px;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch
	}

	.pcgh-mobile-drawer__account {
		flex: 0 0 auto;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--pcgh-surface) 96%, transparent)
	}

	.pcgh-mobile-drawer__account-user {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 40px;
		align-items: center;
		gap: 6px
	}

	.pcgh-mobile-drawer__profile,
	.pcgh-mobile-drawer__login {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 18px;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 58px;
		padding: 7px 4px;
		border: 0;
		background: transparent;
		color: var(--pcgh-text);
		text-align: left;
		cursor: pointer
	}

	.pcgh-mobile-drawer__profile > img {
		width: 44px;
		height: 44px;
		border-radius: 50%;
		object-fit: cover
	}

	.pcgh-mobile-drawer__account-user .pcgh-mobile-drawer__profile {
		grid-template-columns: 44px minmax(0, 1fr);
		min-width: 0
	}

	.pcgh-mobile-drawer__logout {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 7px;
		background: var(--pcgh-surface-2);
		color: var(--pcgh-text-3)
	}

	.pcgh-mobile-drawer__logout:hover,
	.pcgh-mobile-drawer__logout:focus-visible {
		background: color-mix(in srgb, #ef4444 11%, var(--pcgh-surface-2));
		color: #ef4444
	}

	.pcgh-mobile-drawer__logout :where(svg, i) {
		width: 18px;
		height: 18px
	}

	.pcgh-mobile-drawer__login-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: var(--pcgh-surface-2);
		color: var(--pcgh-primary)
	}

	.pcgh-mobile-drawer__login-icon :where(svg, i) {
		width: 23px;
		height: 23px
	}

	.pcgh-mobile-drawer__profile > span,
	.pcgh-mobile-drawer__login > span:not(.pcgh-mobile-drawer__login-icon) {
		display: flex;
		flex-direction: column;
		min-width: 0
	}

	.pcgh-mobile-drawer__profile strong,
	.pcgh-mobile-drawer__login strong {
		overflow: hidden;
		font-size: 14px;
		line-height: 1.45;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.pcgh-mobile-drawer__profile small,
	.pcgh-mobile-drawer__login small {
		color: var(--pcgh-text-3);
		font-size: 11px;
		line-height: 1.5
	}

	.pcgh-mobile-drawer__profile > svg,
	.pcgh-mobile-drawer__login > svg {
		width: 17px;
		height: 17px;
		color: var(--pcgh-text-3)
	}

	.pcgh-mobile-drawer__tools {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		padding: 8px 0 4px
	}

	.pcgh-mobile-drawer__tools > :is(a, button),
	.pcgh-mobile-drawer__tools > .pcgh-translate-switcher > button {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		min-width: 0;
		height: 38px;
		padding: 0 6px;
		border: 1px solid var(--pcgh-border);
		border-radius: 6px;
		background: var(--pcgh-surface-2);
		color: var(--pcgh-text-2);
		font-size: 12px;
		cursor: pointer
	}

	.pcgh-mobile-drawer__tools > :is(a, button):hover,
	.pcgh-mobile-drawer__tools > .pcgh-translate-switcher > button:hover {
		border-color: color-mix(in srgb, var(--pcgh-primary) 36%, var(--pcgh-border));
		color: var(--pcgh-primary)
	}

	.pcgh-mobile-drawer__tools :where(svg, i) {
		width: 16px;
		height: 16px;
		flex: 0 0 16px
	}

	.pcgh-mobile-drawer__tools em {
		margin-left: 2px;
		color: #ef4444;
		font-size: 10px;
		font-style: normal
	}

	.pcgh-mobile-drawer__tools .pcgh-translate-switcher {
		position: relative;
		min-width: 0
	}

	.pcgh-mobile-drawer__tools .pcgh-translate-switcher > button {
		width: 100%
	}

	.pcgh-mobile-drawer__tools .pcgh-translate-switcher__menu {
		top: calc(100% + 6px);
		right: 0;
		left: auto;
		z-index: 5
	}

	.pcgh-mobile-drawer__nav {
		padding: 0 0 8px
	}

	.pcgh-mobile-drawer__menu,
	.pcgh-mobile-drawer__menu .sub-menu {
		margin: 0;
		padding: 0;
		list-style: none
	}

	.pcgh-mobile-drawer__menu > li {
		position: relative;
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		align-items: center;
		border-bottom: 1px solid color-mix(in srgb, var(--pcgh-border) 72%, transparent)
	}

	.pcgh-mobile-drawer__menu > li:not(.menu-item-has-children) > a {
		grid-column: 1 / -1
	}

	.pcgh-mobile-drawer__menu > li > a {
		position: relative;
		display: flex;
		align-items: center;
		gap: 9px;
		min-width: 0;
		min-height: 46px;
		padding: 7px 8px 7px 10px;
		border-radius: 5px;
		color: var(--pcgh-text-2);
		font-size: 14px;
		font-weight: 500
	}

	.pcgh-mobile-drawer__menu > li > a:hover,
	.pcgh-mobile-drawer__menu > li > a:focus-visible {
		background: var(--pcgh-surface-2);
		color: var(--pcgh-text)
	}

	.pcgh-mobile-drawer__menu > li.current-menu-item > a,
	.pcgh-mobile-drawer__menu > li.current_page_item > a,
	.pcgh-mobile-drawer__menu > li.current-menu-ancestor > a,
	.pcgh-mobile-drawer__menu > li.current_page_ancestor > a {
		background: var(--pcgh-surface-2);
		border-radius: 7px;
		color: var(--pcgh-primary)
	}

	.pcgh-mobile-drawer__menu > li.current-menu-item > a::before,
	.pcgh-mobile-drawer__menu > li.current_page_item > a::before,
	.pcgh-mobile-drawer__menu > li.current-menu-ancestor > a::before,
	.pcgh-mobile-drawer__menu > li.current_page_ancestor > a::before {
		content: none
	}

	.pcgh-mobile-drawer__menu .pcgh-nav__icon {
		width: 18px;
		height: 18px;
		min-width: 18px;
		min-height: 18px;
		color: currentColor
	}

	.pcgh-mobile-drawer__menu .pcgh-nav__text {
		display: flex;
		align-items: center;
		gap: 4px;
		min-width: 0;
		max-width: 100%
	}

	.pcgh-mobile-drawer__menu .pcgh-nav__label {
		flex: 1 1 auto;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap
	}

	.pcgh-mobile-drawer__menu .pcgh-nav__badge {
		position: static;
		display: inline-flex !important;
		flex: 0 1 auto;
		align-items: center;
		justify-content: center;
		min-width: 18px;
		max-width: 46%;
		height: 16px;
		margin-left: 0;
		padding: 0 4px;
		overflow: hidden;
		border-radius: 4px;
		background: var(--pcgh-menu-badge-bg, #f5d6ad);
		color: var(--pcgh-menu-badge-color, #b56a22);
		font-size: 9px;
		font-weight: 700;
		line-height: 1;
		text-overflow: ellipsis;
		white-space: nowrap;
		transform: none
	}

	.pcgh-mobile-drawer__menu > li > .sub-menu {
		position: static;
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 7px;
		width: auto;
		padding: 0 4px 10px;
		border: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto
	}

	.pcgh-mobile-drawer__menu > li > .sub-menu[hidden] {
		display: none
	}

	.pcgh-mobile-drawer__menu > li > .sub-menu > li > a {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 7px;
		min-height: 40px;
		padding: 7px 9px;
		border: 1px solid color-mix(in srgb, var(--pcgh-border) 76%, transparent);
		border-radius: 5px;
		background: var(--pcgh-surface-2);
		color: var(--pcgh-text-2);
		font-size: 12px;
		font-weight: 400;
		text-align: left
	}

	.pcgh-mobile-drawer__menu > li > .sub-menu > li > a:hover,
	.pcgh-mobile-drawer__menu > li > .sub-menu > li.current-menu-item > a,
	.pcgh-mobile-drawer__menu > li > .sub-menu > li.current_page_item > a {
		border-color: color-mix(in srgb, var(--pcgh-primary) 28%, var(--pcgh-border));
		background: color-mix(in srgb, var(--pcgh-primary) 9%, var(--pcgh-surface-2));
		color: var(--pcgh-primary)
	}

	.pcgh-mobile-drawer__menu > li > .sub-menu .pcgh-nav__icon {
		width: 15px;
		height: 15px;
		min-width: 15px;
		min-height: 15px
	}

	.pcgh-mobile-drawer__menu > li > .sub-menu .pcgh-nav__badge {
		min-width: 16px;
		max-width: 42px;
		height: 14px;
		padding: 0 3px;
		font-size: 8px
	}

	.pcgh-mobile-drawer__shortcuts {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		padding-top: 6px
	}

	.pcgh-mobile-drawer__shortcuts a {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 42px;
		padding: 8px 10px;
		border-radius: 6px;
		background: var(--pcgh-surface-2);
		color: var(--pcgh-text-2);
		font-size: 12px
	}

	.pcgh-mobile-drawer__shortcuts :where(svg, i) {
		width: 16px;
		height: 16px;
		color: var(--pcgh-primary)
	}
}

@media (max-width: 360px) {
	.pcgh-mobile-drawer {
		width: min(84vw, 286px)
	}

	.pcgh-mobile-drawer__tools {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcgh-mobile-drawer,
	.pcgh-mobile-drawer__overlay {
		transition: none
	}
}