/**
 * #239 — Sidebar filter для каталога /shop/ и категорий.
 * Этап (a): базовый layout + чекбоксы. Без AJAX, без range slider, без drawer.
 *
 * Layout: CSS-grid с двумя колонками: sidebar 280px + content 1fr.
 * На мобилке (≤900px) sidebar превращается в обычный блок выше grid'а
 * (drawer добавим в #239f).
 */

/* === #239g — Hero «Подбор по игре» === */

.pc-shop-play-hero {
	background: var( --pc-bg-card, #1a1a1a );
	border: 1px solid var( --pc-border, rgba( 255, 255, 255, .08 ) );
	border-radius: 14px;
	margin: 0 0 20px;
	overflow: hidden;
}

.pc-shop-play-hero__toggle {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 14px 18px;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var( --pc-text, #fff );
	font-family: inherit;
	font-size: 14px;
	text-align: left;
	transition: background .15s ease;
}

.pc-shop-play-hero__toggle:hover {
	background: rgba( 255, 255, 255, .03 );
}

.pc-shop-play-hero__toggle-icon {
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
}

.pc-shop-play-hero__toggle-label {
	flex: 1 1 auto;
	font-weight: 600;
}

.pc-shop-play-hero__toggle-label strong {
	color: var( --pc-accent, #e51e1e );
	font-weight: 700;
}

.pc-shop-play-hero__toggle-chevron {
	flex: 0 0 auto;
	color: var( --pc-text-muted, rgba( 255, 255, 255, .55 ) );
	transition: transform .25s ease;
}

.pc-shop-play-hero.is-open .pc-shop-play-hero__toggle-chevron {
	transform: rotate( 180deg );
}

.pc-shop-play-hero__body {
	display: none;
	padding: 4px 18px 18px;
	border-top: 1px solid var( --pc-border, rgba( 255, 255, 255, .06 ) );
}

.pc-shop-play-hero.is-open .pc-shop-play-hero__body {
	display: block;
}

.pc-shop-play-hero__row {
	display: grid;
	grid-template-columns: 110px 1fr;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var( --pc-border, rgba( 255, 255, 255, .04 ) );
}

.pc-shop-play-hero__row:last-of-type {
	border-bottom: none;
}

.pc-shop-play-hero__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --pc-text-muted, rgba( 255, 255, 255, .55 ) );
}

/* Игры — горизонтальный скролл с обложками */
.pc-shop-play-hero__games {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 4px;
	scrollbar-width: thin;
	scrollbar-color: rgba( 255, 255, 255, .12 ) transparent;
}

.pc-shop-play-hero__games::-webkit-scrollbar { height: 4px; }
.pc-shop-play-hero__games::-webkit-scrollbar-thumb {
	background: rgba( 255, 255, 255, .12 );
	border-radius: 2px;
}

.pc-shop-play-hero__game {
	flex: 0 0 auto;
	/* v1.13.333: было 110px — обрезало «Cyberpunk 20…», «Counter-Strik…». 150px умещает
	 * популярные длинные тайтлы без troublesome ellipsis. Можно перекатить на min-content
	 * с max-width 200px если захочется. */
	width: 150px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	padding: 0;
	background: transparent;
	border: 2px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	color: var( --pc-text, #fff );
	font-family: inherit;
	font-size: 12px;
	transition: border-color .15s ease, transform .12s ease;
	overflow: hidden;
}

.pc-shop-play-hero__game:hover {
	border-color: rgba( 255, 255, 255, .18 );
	transform: translateY( -1px );
}

.pc-shop-play-hero__game.is-active {
	border-color: var( --pc-accent, #e51e1e );
}

.pc-shop-play-hero__game-img {
	display: block;
	width: 100%;
	height: 60px;
	background-size: cover;
	background-position: center;
	background-color: rgba( 255, 255, 255, .04 );
	border-radius: 6px;
}

.pc-shop-play-hero__game-img--blank {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	background-color: rgba( 255, 255, 255, .04 );
}

.pc-shop-play-hero__game-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	padding: 0 6px 6px;
	text-align: center;
	font-weight: 500;
	line-height: 1.2;
	overflow: hidden;
	/* v1.13.333: line-clamp в 2 строки вместо ellipsis в 1 — длинные тайтлы переносятся,
	 * не обрезаются. Если в 2 строки не влезло — тогда ellipsis. */
}

/* Pills — для разрешения и цели FPS */
.pc-shop-play-hero__pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.pc-shop-play-hero__pill {
	padding: 7px 14px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .10 );
	border-radius: 8px;
	color: var( --pc-text, #fff );
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease, transform .12s ease;
}

.pc-shop-play-hero__pill:hover {
	background: rgba( 255, 255, 255, .08 );
	border-color: rgba( 255, 255, 255, .20 );
}

.pc-shop-play-hero__pill.is-active {
	background: var( --pc-accent, #e51e1e );
	border-color: var( --pc-accent, #e51e1e );
	color: #fff;
}

.pc-shop-play-hero__reset {
	display: flex;
	justify-content: flex-end;
	padding-top: 12px;
}

.pc-shop-play-hero__reset-btn {
	background: transparent;
	border: none;
	color: var( --pc-accent, #e51e1e );
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
}

.pc-shop-play-hero__reset-btn:hover {
	text-decoration: underline;
}

@media ( max-width: 700px ) {
	.pc-shop-play-hero__toggle { padding: 12px 14px; font-size: 13px; }
	.pc-shop-play-hero__body { padding: 4px 14px 14px; }
	.pc-shop-play-hero__row {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 10px 0;
	}
	.pc-shop-play-hero__game { width: 90px; }
	.pc-shop-play-hero__game-img { height: 50px; }
}

/* === #239d — Active filter pills над гридом === */

.pc-shop-active-pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	background: var( --pc-bg-card, #1a1a1a );
	border: 1px solid var( --pc-border, rgba( 255, 255, 255, .08 ) );
	border-radius: 12px;
	margin: 0 0 16px;
}

.pc-shop-active-pills[hidden] {
	display: none;
}

.pc-shop-active-pills__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --pc-text-muted, rgba( 255, 255, 255, .55 ) );
	margin-right: 4px;
}

.pc-shop-active-pills__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 8px 6px 12px;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 18px;
	color: var( --pc-text, #fff );
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.pc-shop-active-pills__pill:hover {
	background: color-mix( in srgb, var( --pc-accent, #e51e1e ) 18%, transparent );
	border-color: var( --pc-accent, #e51e1e );
}

.pc-shop-active-pills__pill svg {
	flex: 0 0 auto;
	color: var( --pc-text-muted, rgba( 255, 255, 255, .55 ) );
	transition: color .15s ease;
}

.pc-shop-active-pills__pill:hover svg {
	color: #fff;
}

.pc-shop-active-pills__clear {
	margin-left: auto;
	padding: 6px 0;
	background: transparent;
	border: none;
	color: var( --pc-accent, #e51e1e );
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.pc-shop-active-pills__clear:hover {
	text-decoration: underline;
}

/* === Layout === */

/* #239a v1.13.301: на каталоге с фильтром раскрываем <main> на полную
 * ширину родителя (.pc-container уже fluid через main.css). Inline-style
 * `max-width:1320px` в pc-shop/woocommerce.php перебивается через
 * !important — этого достаточно (inline-style без !important проигрывает).
 *
 * Боковой padding fluid через clamp(): на узких ~32px, плавно растёт до
 * ~96px на широких мониторах (≥1920px). Это даёт «воздух» и не липнет
 * к краям экрана. На мобиле — фикс 16px. */
body.pc-shop-has-filter main#primary.pc-shop {
	max-width: none !important;
	padding-left: clamp( 32px, 5vw, 96px ) !important;
	padding-right: clamp( 32px, 5vw, 96px ) !important;
}

@media ( max-width: 900px ) {
	body.pc-shop-has-filter main#primary.pc-shop {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

.pc-shop-catalog {
	width: 100%;
}

.pc-shop-catalog__layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	align-items: start;
	/* margin-top убран — sidebar и content начинаются с одной высоты */
}

/* Top-bar над layout: result_count слева, ordering справа.
 * Sidebar и grid карточек теперь начинаются с одной высоты — топбар над всеми. */
.pc-shop-catalog__topbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

.pc-shop-catalog__topbar .woocommerce-result-count {
	margin: 0 auto 0 0;
	color: var( --pc-text-muted, rgba( 255, 255, 255, .55 ) );
	font-size: 13px;
}

.pc-shop-catalog__topbar .woocommerce-ordering {
	margin: 0;
}

/* Кастомный стиль для select сортировки — под dark-палитру темы (#239b polish) */
.pc-shop-catalog__topbar .woocommerce-ordering select.orderby {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: var( --pc-bg-card, #1a1a1a );
	background-image: url( "data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 12px;
	border: 1px solid var( --pc-border, rgba( 255, 255, 255, .12 ) );
	border-radius: 8px;
	color: var( --pc-text, #fff );
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 32px 9px 14px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
	min-width: 200px;
	line-height: 1.2;
}

.pc-shop-catalog__topbar .woocommerce-ordering select.orderby:hover {
	border-color: rgba( 255, 255, 255, .25 );
	background-color: color-mix( in srgb, var( --pc-bg-card, #1a1a1a ) 85%, white );
}

.pc-shop-catalog__topbar .woocommerce-ordering select.orderby:focus-visible {
	outline: 2px solid var( --pc-accent, #e51e1e );
	outline-offset: 1px;
	border-color: var( --pc-accent, #e51e1e );
}

/* Native dropdown-options нельзя полностью стилизовать кросс-браузерно,
 * но в большинстве браузеров наследуется background и color от select. */
.pc-shop-catalog__topbar .woocommerce-ordering select.orderby option {
	background: var( --pc-bg-card, #1a1a1a );
	color: var( --pc-text, #fff );
	padding: 8px 12px;
}

@media ( max-width: 700px ) {
	.pc-shop-catalog__topbar {
		gap: 10px;
		margin-bottom: 12px;
	}
	.pc-shop-catalog__topbar .woocommerce-result-count { font-size: 12px; }
}

.pc-shop-catalog.has-filter .pc-shop-catalog__content {
	min-width: 0; /* грид-fix чтобы карточки не разрывали колонку */
}

/* === Loading state для AJAX-фильтра (#239b) === */
.pc-shop-catalog__content {
	position: relative;
}

.pc-shop-catalog__content.is-loading ul.products {
	opacity: .5;
	pointer-events: none;
	transition: opacity .15s ease;
}

.pc-shop-catalog__content.is-loading::after {
	content: '';
	position: absolute;
	top: 80px;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 32px;
	border: 3px solid rgba(255,255,255,.12);
	border-top-color: var(--pc-accent, #e51e1e);
	border-radius: 50%;
	animation: pc-shop-filter-spin .8s linear infinite;
	z-index: 5;
}

@keyframes pc-shop-filter-spin {
	to { transform: translateX(-50%) rotate(360deg); }
}

.pc-shop-no-results {
	padding: 48px 24px;
	text-align: center;
	color: var(--pc-text-muted, rgba(255,255,255,.55));
	background: var(--pc-bg-card, #1a1a1a);
	border: 1px solid var(--pc-border, rgba(255,255,255,.08));
	border-radius: 14px;
	font-size: 14px;
}

/* На мобилке — одна колонка (фильтр сверху). В #239f станет off-canvas. */
@media ( max-width: 900px ) {
	.pc-shop-catalog__layout {
		grid-template-columns: 1fr;
		gap: 16px;
	}
}

/* === Sidebar контейнер === */

.pc-shop-filter {
	position: sticky;
	top: 88px; /* высота nav header + небольшой отступ */
	max-height: calc( 100vh - 100px );
	overflow-y: auto;
	overflow-x: hidden;
	background: var( --pc-bg-card, #1a1a1a );
	border: 1px solid var( --pc-border, rgba( 255, 255, 255, .08 ) );
	border-radius: 14px;
	padding: 16px;
	box-sizing: border-box;
	scrollbar-width: thin;
	scrollbar-color: rgba( 255, 255, 255, .15 ) transparent;
}

.pc-shop-filter::-webkit-scrollbar {
	width: 6px;
}
.pc-shop-filter::-webkit-scrollbar-thumb {
	background: rgba( 255, 255, 255, .12 );
	border-radius: 3px;
}

.pc-shop-filter__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* === Заголовок sidebar === */

.pc-shop-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 8px;
	/* border-bottom убран — единственная линия теперь от .pc-shop-filter__sub border-top, иначе двойная */
}

.pc-shop-filter__title {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .02em;
	color: var( --pc-text, #fff );
}

.pc-shop-filter__reset {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --pc-accent, #e51e1e );
	text-decoration: none;
	white-space: nowrap;
}

.pc-shop-filter__reset:hover {
	text-decoration: underline;
}

/* === #239b: Тумблер «Автоприменение» — отдельной строкой как «настройка» === */

.pc-shop-filter__sub {
	display: block;
	padding: 10px 0;
	margin-top: 0;
	border-top: 1px solid var( --pc-border, rgba( 255, 255, 255, .06 ) );
}

.pc-shop-filter__autoswitch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	padding: 4px 0;
	border-radius: 6px;
	transition: background .15s ease;
}

.pc-shop-filter__autoswitch:hover {
	background: transparent;
}

.pc-shop-filter__autoswitch-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	border: 0;
}

.pc-shop-filter__autoswitch-track {
	position: relative;
	width: 26px;
	height: 14px;
	background: rgba( 255, 255, 255, .14 );
	border-radius: 7px;
	transition: background .2s ease;
	flex: 0 0 26px;
}

.pc-shop-filter__autoswitch-thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 10px;
	height: 10px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s ease;
}

.pc-shop-filter__autoswitch-input:checked + .pc-shop-filter__autoswitch-track {
	background: var( --pc-accent, #e51e1e );
}

.pc-shop-filter__autoswitch-input:checked + .pc-shop-filter__autoswitch-track .pc-shop-filter__autoswitch-thumb {
	transform: translateX( 12px );
}

.pc-shop-filter__autoswitch-input:focus-visible + .pc-shop-filter__autoswitch-track {
	outline: 2px solid var( --pc-accent, #e51e1e );
	outline-offset: 2px;
}

.pc-shop-filter__autoswitch-label {
	flex: 1 1 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --pc-text, #fff );
	order: -1; /* лейбл слева, трек справа */
}

/* Когда auto-apply ON — submit-кнопка не нужна */
.pc-shop-filter__form.is-auto-apply .pc-shop-filter__submit {
	display: none;
}

/* === Группы фильтров (collapsible <details>) === */

.pc-shop-filter__group {
	margin: 0;
	padding: 10px 0;
	border-top: 1px solid var( --pc-border, rgba( 255, 255, 255, .06 ) );
}

/* Раньше у первой группы убирали border-top чтобы она примыкала к header.
 * Теперь между header и первой группой стоит .pc-shop-filter__sub (тумблер),
 * у которого свой border-top. Чтобы первая группа (ЦЕНА) не сливалась с
 * тумблером — оставляем ей стандартный border-top как у остальных. */
.pc-shop-filter__sub + .pc-shop-filter__group {
	border-top: 1px solid var( --pc-border, rgba( 255, 255, 255, .06 ) );
}

.pc-shop-filter__group-title {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 4px 0;
	user-select: none;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --pc-text, #fff );
}

.pc-shop-filter__group-title::-webkit-details-marker { display: none; } /* hide native arrow */
.pc-shop-filter__group-title::marker { content: ''; }

.pc-shop-filter__group-title > span:first-child {
	flex: 1 1 auto;
}

.pc-shop-filter__group-counter {
	flex: 0 0 auto;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	background: var( --pc-accent, #e51e1e );
	color: #fff;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pc-shop-filter__chevron {
	flex: 0 0 auto;
	color: var( --pc-text-muted, rgba( 255, 255, 255, .55 ) );
	transition: transform .2s ease;
}

.pc-shop-filter__group[open] .pc-shop-filter__chevron {
	transform: rotate( 180deg );
}

.pc-shop-filter__group-body {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pc-shop-filter__hint {
	font-size: 11px;
	color: var( --pc-text-dim, rgba( 255, 255, 255, .4 ) );
	margin: 4px 0 0;
	line-height: 1.3;
}

/* === #239c: Dual-thumb range slider (цена/FPS) === */

.pc-shop-filter__rangepair {
	padding: 2px 0 6px;
}

.pc-shop-filter__rangepair-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .08 );
	border-radius: 8px;
	margin-bottom: 14px;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var( --pc-text, #fff );
}

.pc-shop-filter__rangepair-val {
	font-weight: 600;
	min-width: 0;
}

.pc-shop-filter__rangepair-sep {
	flex: 0 0 auto;
	color: var( --pc-text-dim, rgba( 255, 255, 255, .35 ) );
}

/* Track-контейнер высотой = размеру thumb (16px). Визуальная полоса (4px)
 * рисуется через ::before и .rangepair-fill, оба позиционированы top:6px
 * чтобы быть строго по центру 16px-контейнера. Сами <input type="range">
 * того же размера что контейнер — браузер центрирует thumb на их центре
 * (= центру визуальной полосы). Получается ровно «кружок-на-линии». */
.pc-shop-filter__rangepair-track {
	position: relative;
	height: 16px;
	margin: 14px 8px 18px;
}

.pc-shop-filter__rangepair-track::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	right: 0;
	height: 4px;
	background: rgba( 255, 255, 255, .08 );
	border-radius: 2px;
	pointer-events: none;
}

.pc-shop-filter__rangepair-fill {
	position: absolute;
	top: 6px;
	left: 0;
	right: 0;
	height: 4px;
	background: var( --pc-accent, #e51e1e );
	border-radius: 2px;
	pointer-events: none;
}

.pc-shop-filter__rangepair-input {
	position: absolute;
	top: 0;
	left: -8px;
	width: calc( 100% + 16px );
	height: 16px;
	margin: 0;
	padding: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.pc-shop-filter__rangepair-input::-webkit-slider-runnable-track {
	background: transparent;
	border: none;
	height: 16px;
}
.pc-shop-filter__rangepair-input::-moz-range-track {
	background: transparent;
	border: none;
	height: 16px;
}

/* Thumb (v1.13.336): solid-fill в фирменный акцент-цвет + тонкая белая обводка
 * (контраст на тёмном фоне). WB/Ozon-стиль вместо «пустой круг с обводкой». */
.pc-shop-filter__rangepair-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --pc-accent, #e51e1e );
	border: 2px solid #fff;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .45 );
	transition: transform .12s ease, box-shadow .15s ease;
	margin-top: -1px; /* центрируем 18px thumb на 16px track */
}
.pc-shop-filter__rangepair-input::-moz-range-thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var( --pc-accent, #e51e1e );
	border: 2px solid #fff;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, .45 );
	transition: transform .12s ease, box-shadow .15s ease;
}

.pc-shop-filter__rangepair-input::-webkit-slider-thumb:hover {
	transform: scale( 1.1 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .45 );
}
.pc-shop-filter__rangepair-input::-moz-range-thumb:hover {
	transform: scale( 1.1 );
	box-shadow: 0 2px 8px rgba( 0, 0, 0, .45 );
}

.pc-shop-filter__rangepair-input:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --pc-accent, #e51e1e ) 40%, transparent );
}
.pc-shop-filter__rangepair-input:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --pc-accent, #e51e1e ) 40%, transparent );
}

/* Max-thumb рисуется поверх min — иначе на нулевой позиции min его перекрывает */
.pc-shop-filter__rangepair-input--max {
	z-index: 2;
}

/* === Legacy Range (number inputs пара) — больше не используется, но
 *     стили оставлены для других мест где может быть pc-shop-filter__range === */

.pc-shop-filter__range {
	display: flex;
	align-items: center;
	gap: 6px;
}

.pc-shop-filter__range-input {
	flex: 1 1 0%;
	min-width: 0;
	padding: 7px 8px;
	background: rgba( 255, 255, 255, .04 );
	border: 1px solid rgba( 255, 255, 255, .10 );
	border-radius: 6px;
	color: var( --pc-text, #fff );
	font-size: 12px;
	font-family: inherit;
	font-variant-numeric: tabular-nums;
}

.pc-shop-filter__range-input:focus {
	outline: 2px solid var( --pc-accent, #e51e1e );
	outline-offset: -1px;
}

.pc-shop-filter__range-input::-webkit-outer-spin-button,
.pc-shop-filter__range-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.pc-shop-filter__range-input[type="number"] {
	-moz-appearance: textfield;
}

.pc-shop-filter__range-sep {
	font-size: 12px;
	color: var( --pc-text-dim, rgba( 255, 255, 255, .35 ) );
}

/* === Чекбокс-списки === */

.pc-shop-filter__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 260px;
	overflow-y: auto;
	overflow-x: hidden;
}

.pc-shop-filter__list::-webkit-scrollbar { width: 5px; }
.pc-shop-filter__list::-webkit-scrollbar-thumb {
	background: rgba( 255, 255, 255, .10 );
	border-radius: 3px;
}

.pc-shop-filter__item {
	margin: 0;
}

.pc-shop-filter__label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s ease;
	font-size: 13px;
	line-height: 1.3;
	min-width: 0; /* fix для ellipsis в grid/flex */
}

.pc-shop-filter__label:hover {
	background: rgba( 255, 255, 255, .04 );
}

.pc-shop-filter__label input[type="checkbox"],
.pc-shop-filter__label input[type="radio"] {
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var( --pc-accent, #e51e1e );
	cursor: pointer;
}

.pc-shop-filter__opt-name {
	flex: 1 1 auto;
	color: var( --pc-text, #fff );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-shop-filter__opt-count {
	flex: 0 0 auto;
	font-size: 11px;
	color: var( --pc-text-dim, rgba( 255, 255, 255, .4 ) );
	font-variant-numeric: tabular-nums;
}

/* Выбранный — выделяется акцентом */
.pc-shop-filter__label:has( input[type="checkbox"]:checked ),
.pc-shop-filter__label:has( input[type="radio"]:checked ) {
	background: color-mix( in srgb, var( --pc-accent, #e51e1e ) 12%, transparent );
}

.pc-shop-filter__label:has( input[type="checkbox"]:checked ) .pc-shop-filter__opt-name,
.pc-shop-filter__label:has( input[type="radio"]:checked ) .pc-shop-filter__opt-name {
	font-weight: 600;
}

/* #239d часть 2 (v1.13.333): is-disabled — опция с count=0 в текущем состоянии
 * фильтра. Не блокируем клик (юзер может захотеть переключиться) — просто
 * затемняем как сигнал «комбинация даст 0». Wildberries/Ozon-стиль. */
.pc-shop-filter__item.is-disabled .pc-shop-filter__opt-name,
.pc-shop-filter__item.is-disabled .pc-shop-filter__opt-count {
	opacity: .35;
}

.pc-shop-filter__item.is-disabled .pc-shop-filter__label:hover {
	background: rgba( 255, 255, 255, .03 );
}

/* === Цветовые swatches (#239a — фильтр цвет корпуса) === */

.pc-shop-filter__colors {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pc-shop-filter__color {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s ease;
}

.pc-shop-filter__color:hover {
	background: rgba( 255, 255, 255, .04 );
}

.pc-shop-filter__color input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	border: 0;
}

.pc-shop-filter__color-dot {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid var( --pc-border, rgba( 255, 255, 255, .15 ) );
	display: inline-block;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .25 );
	transition: transform .12s ease;
}

.pc-shop-filter__color.is-checked .pc-shop-filter__color-dot,
.pc-shop-filter__color:has( input:checked ) .pc-shop-filter__color-dot {
	border-color: var( --pc-accent, #e51e1e );
	box-shadow: 0 0 0 2px var( --pc-bg-card, #1a1a1a ), 0 0 0 4px var( --pc-accent, #e51e1e );
	transform: scale( 1.05 );
}

.pc-shop-filter__color-name {
	font-size: 13px;
	color: var( --pc-text, #fff );
}

.pc-shop-filter__color.is-checked .pc-shop-filter__color-name,
.pc-shop-filter__color:has( input:checked ) .pc-shop-filter__color-name {
	font-weight: 600;
}

/* === Submit-кнопка === */

.pc-shop-filter__submit {
	padding: 11px 16px;
	background: var( --pc-accent, #e51e1e );
	border: none;
	border-radius: 8px;
	color: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease, transform .1s ease;
}

.pc-shop-filter__submit:hover {
	background: color-mix( in srgb, var( --pc-accent, #e51e1e ) 85%, white );
}

.pc-shop-filter__submit:active {
	transform: translateY( 1px );
}

/* === Кнопка-toggle для открытия drawer на мобилке (desktop: hidden) === */

.pc-shop-filter-toggle {
	display: none; /* по умолчанию desktop — скрыта */
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var( --pc-bg-card, #1a1a1a );
	border: 1px solid var( --pc-border, rgba( 255, 255, 255, .12 ) );
	border-radius: 10px;
	color: var( --pc-text, #fff );
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	margin: 0 0 16px;
	transition: background .15s ease, border-color .15s ease;
}

.pc-shop-filter-toggle:hover {
	background: rgba( 255, 255, 255, .04 );
	border-color: rgba( 255, 255, 255, .20 );
}

.pc-shop-filter-toggle__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var( --pc-accent, #e51e1e );
	color: #fff;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 800;
	margin-left: 2px;
}

/* === Close button в header drawer'а — desktop: hidden === */
.pc-shop-filter__close {
	display: none;
	width: 30px;
	height: 30px;
	padding: 0;
	background: rgba( 255, 255, 255, .06 );
	border: 1px solid rgba( 255, 255, 255, .12 );
	border-radius: 50%;
	color: var( --pc-text, #fff );
	cursor: pointer;
	margin-left: 8px;
	align-items: center;
	justify-content: center;
}

.pc-shop-filter__close:hover {
	background: rgba( 255, 255, 255, .12 );
}

/* === Backdrop drawer'а — desktop: hidden === */
.pc-shop-filter-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, .55 );
	z-index: 1000;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.pc-shop-filter-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* === Длинные названия option (видеокарты, процессоры) — ellipsis с tooltip === */
.pc-shop-filter__opt-name {
	display: block; /* fix для ellipsis в flex child */
}

/* === Mobile (≤900px) — off-canvas drawer === */

@media ( max-width: 900px ) {
	.pc-shop-catalog__layout {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* Toggle-кнопка видна */
	.pc-shop-filter-toggle { display: inline-flex; }

	/* Backdrop виден когда drawer открыт */
	.pc-shop-filter-backdrop { display: block; }

	/* Sidebar становится slide-in drawer'ом.
	 * overflow:hidden на самом drawer — чтобы не было «прилипшего» скроллбара
	 * у правой стены. Скроллится только внутренний .pc-shop-filter__form. */
	.pc-shop-filter {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 86vw;
		max-width: 380px;
		max-height: 100vh;
		z-index: 1001;
		transform: translateX( -100% );
		transition: transform .3s ease;
		border-radius: 0;
		border-right: 1px solid var( --pc-border, rgba( 255, 255, 255, .08 ) );
		border-top: none;
		border-bottom: none;
		border-left: none;
		padding: 16px 14px;
		box-shadow: 4px 0 24px rgba( 0, 0, 0, .35 );
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.pc-shop-filter.is-open {
		transform: translateX( 0 );
	}

	.pc-shop-filter__close { display: inline-flex; }

	.pc-shop-filter__form {
		flex: 1 1 auto;
		overflow-y: auto;
		overflow-x: hidden;
		margin: -4px;
		padding: 4px 8px 4px 4px; /* v1.13.336: padding-right = 8px чтобы chevron'ы не наезжали на scrollbar */
		/* Тонкий, не выпуклый скроллбар */
		scrollbar-width: thin;
		scrollbar-color: rgba( 255, 255, 255, .08 ) transparent;
		/* v1.13.336: резервируем место под scrollbar даже когда контент короче viewport
		 * — иначе layout прыгает при появлении/исчезновении scrollbar. */
		scrollbar-gutter: stable;
	}

	.pc-shop-filter__form::-webkit-scrollbar {
		width: 3px;
	}
	.pc-shop-filter__form::-webkit-scrollbar-track { background: transparent; }
	.pc-shop-filter__form::-webkit-scrollbar-thumb {
		background: rgba( 255, 255, 255, .08 );
		border-radius: 2px;
	}

	.pc-shop-filter__list { max-height: none; }

	/* #239f (v1.13.335): sticky-bar внизу drawer'а с кнопками «Показать N» + «Сбросить».
	 * env(safe-area-inset-bottom) — учитываем iPhone home indicator. */
	.pc-shop-filter__submit-bar {
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		margin: 0 -14px -16px;
		padding: 12px 14px calc( 12px + env( safe-area-inset-bottom, 0px ) );
		background: var( --pc-bg-card, #161616 );
		border-top: 1px solid var( --pc-border, rgba( 255, 255, 255, .08 ) );
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px;
		align-items: center;
		box-shadow: 0 -8px 18px rgba( 0, 0, 0, .35 );
	}

	.pc-shop-filter__submit {
		border-radius: 8px;
		font-size: 15px;
		font-weight: 600;
		padding: 12px 18px;
	}

	.pc-shop-filter__reset-mobile {
		background: transparent;
		color: var( --pc-text-muted, rgba( 255, 255, 255, .6 ) );
		border: 1px solid var( --pc-border, rgba( 255, 255, 255, .12 ) );
		border-radius: 8px;
		padding: 12px 14px;
		font-size: 14px;
		cursor: pointer;
		font-family: inherit;
		transition: color .15s ease, border-color .15s ease;
	}
	.pc-shop-filter__reset-mobile:hover {
		color: var( --pc-text, #fff );
		border-color: rgba( 255, 255, 255, .25 );
	}

	/* v1.13.336: touch-friendly thumb'ы на мобиле — 22×22 (было 24×24, слишком большие).
	 * Margin-top компенсирует увеличенный диаметр чтоб thumb остался по центру track-а. */
	.pc-shop-filter [data-group="fps"] input[type="range"]::-webkit-slider-thumb,
	.pc-shop-filter [data-group="price"] input[type="range"]::-webkit-slider-thumb {
		width: 22px;
		height: 22px;
		margin-top: -3px;
	}
	.pc-shop-filter [data-group="fps"] input[type="range"]::-moz-range-thumb,
	.pc-shop-filter [data-group="price"] input[type="range"]::-moz-range-thumb {
		width: 22px;
		height: 22px;
	}
	/* Чуть выше дно секции — чтобы submit-bar не наезжал. */
	.pc-shop-filter [data-group="fps"] .pc-shop-filter__group-body,
	.pc-shop-filter [data-group="price"] .pc-shop-filter__group-body {
		padding-bottom: 12px;
	}

	/* Заблокировать скролл body когда drawer открыт */
	body.pc-filter-open { overflow: hidden; }
}

/* Desktop: submit-bar — обычный flex без sticky, reset-кнопка скрыта */
@media ( min-width: 901px ) {
	.pc-shop-filter__submit-bar {
		display: flex;
		gap: 8px;
		margin-top: 12px;
	}
	.pc-shop-filter__reset-mobile { display: none; }
}