/**
 * PC Shop — Front-selector «Подобрать сборку» (v1.13.170)
 *
 * Структура:
 *   .pc-finder
 *   ├── .pc-section__head            (заголовок + подзаголовок + scan-bg)
 *   ├── .pc-finder__tabs             (горизонтальный ряд табов с underline)
 *   ├── .pc-finder__panel            (GPU — горизонтальный flex со скроллом)
 *   ├── .pc-finder__panel            (Price — grid)
 *   ├── .pc-finder__results          (грид сборок, AJAX-обновляемый)
 *   └── .pc-finder__more             (CTA «Смотреть весь каталог»)
 *
 * Брендовая палитра карточек по data-brand:
 *   nvidia → green   #76b900
 *   amd    → red     #ed1c24
 *   intel  → blue    #0071c5
 *
 * Цвета через CSS-var --pc-brand-color, выставленную в [data-brand="..."]
 */

/* === ОБЩАЯ СЕКЦИЯ === */

/* v1.13.400: убрали декоративный scan-overlay и сжали внешние отступы.
 * Виджет теперь чисто прозрачный, как соседние секции главной. */
.pc-finder {
	margin-top: 0;
	margin-bottom: 0;
	position: relative;
}

.pc-finder > * {
	position: relative;
	z-index: 1;
}

.pc-finder .pc-section__sub {
	margin: 4px 0 0;
	color: var(--pc-text-muted);
	font-size: 14px;
}

/* === ТАБЫ === */

.pc-finder__tabs {
	display: flex;
	gap: 28px;
	margin: 24px 0 8px;
	border-bottom: 1px solid var(--pc-border);
	overflow-x: auto;
	scrollbar-width: none;
}

.pc-finder__tabs::-webkit-scrollbar { display: none; }

.pc-finder__tab {
	position: relative;
	background: transparent;
	border: none;
	color: var(--pc-text-muted);
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 14px 4px;
	margin: 0;
	cursor: pointer;
	transition: color 0.2s ease;
	white-space: nowrap;
}

.pc-finder__tab::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -1px;
	width: 0;
	height: 2px;
	background: var(--pc-accent);
	transition: width 0.25s ease, left 0.25s ease;
}

.pc-finder__tab:hover:not(.is-disabled) {
	color: var(--pc-text);
}

.pc-finder__tab.is-active {
	color: var(--pc-text);
}

.pc-finder__tab.is-active::after {
	left: 0;
	width: 100%;
}

.pc-finder__tab.is-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* === ПАНЕЛЬ ВКЛАДКИ === */

.pc-finder__panel {
	margin: 22px 0 28px;
}

.pc-finder__panel[hidden] {
	display: none;
}

/* === ГРИД КАРТОЧЕК-ФИЛЬТРОВ === */

.pc-finder__filter-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
	gap: 12px;
}

/* GPU-вкладка раньше имела свой захардкоженный горизонтальный скролл
 * с кастомным scrollbar (см. старую логику до v1.13.187). Теперь
 * скролл рулится общим механизмом `.pc-finder__filter-grid[data-scroll="horizontal"]`
 * + scroll-controls. Старые правила удалены. */

.pc-finder__filter-grid--price {
	grid-template-columns: repeat( auto-fit, minmax(200px, 1fr) );
	gap: 14px;
}

/* === КАРТОЧКА-ФИЛЬТР === */

.pc-finder-card {
	--pc-brand-color: var(--pc-text-muted);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	background: linear-gradient( 180deg, rgba(255,255,255,0.025) 0%, var(--pc-bg-card) 100% );
	border: 1px solid var(--pc-border);
	border-radius: 14px;
	padding: 18px 18px 16px;
	cursor: pointer;
	font-family: inherit;
	color: var(--pc-text);
	text-align: left;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
	min-height: 130px;
}

/* Брендовая цветовая переменная */
.pc-finder-card[data-brand="nvidia"] { --pc-brand-color: #76b900; }
.pc-finder-card[data-brand="amd"]    { --pc-brand-color: #ed1c24; }
.pc-finder-card[data-brand="intel"]  { --pc-brand-color: #0071c5; }

/* Брендовая полоса слева (3px), приглушённая до hover/select */
.pc-finder-card__stripe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--pc-brand-color);
	opacity: 0.35;
	transition: opacity 0.2s ease, width 0.2s ease;
}

.pc-finder-card:hover {
	border-color: var(--pc-brand-color);
	transform: translateY(-3px);
	box-shadow: 0 6px 20px -8px var(--pc-brand-color);
}

.pc-finder-card:hover .pc-finder-card__stripe {
	opacity: 0.7;
}

.pc-finder-card.is-selected {
	border-color: var(--pc-brand-color);
	background: linear-gradient( 180deg, color-mix(in srgb, var(--pc-brand-color) 14%, transparent) 0%, var(--pc-bg-card) 100% );
	box-shadow: 0 0 0 1px var(--pc-brand-color), 0 10px 32px -10px var(--pc-brand-color);
}

/* Fallback для браузеров без color-mix */
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.pc-finder-card.is-selected {
		background: linear-gradient( 180deg, rgba(255,255,255,0.06) 0%, var(--pc-bg-card) 100% );
	}
}

.pc-finder-card.is-selected .pc-finder-card__stripe {
	opacity: 1;
	width: 4px;
}

/* Чип-иконка в правом верхнем углу */
.pc-finder-card__chip {
	position: absolute;
	top: 14px;
	right: 14px;
	color: var(--pc-brand-color);
	opacity: 0.5;
	transition: opacity 0.2s ease;
}

.pc-finder-card:hover .pc-finder-card__chip,
.pc-finder-card.is-selected .pc-finder-card__chip {
	opacity: 1;
}

/* Бренд (eyebrow) */
.pc-finder-card__brand {
	display: inline-block;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pc-brand-color);
	margin-bottom: -4px;
	padding-right: 24px; /* место для чипа */
}

/* Старый ID-лейбл больше не используется, оставлен на случай fallback */
.pc-finder-card__id {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--pc-text-dim);
}

.pc-finder-card__title {
	font-size: 22px;
	font-weight: 900;
	line-height: 1.05;
	color: var(--pc-text);
	letter-spacing: -0.3px;
}

.pc-finder-card__hint {
	font-size: 12px;
	color: var(--pc-text-muted);
	line-height: 1.4;
}

.pc-finder-card__bar {
	display: grid;
	grid-template-columns: 1fr auto;
	width: 100%;
	gap: 4px;
	margin-top: auto;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 1.5px;
	color: var(--pc-text-muted);
}

.pc-finder-card__bar-label {
	text-transform: uppercase;
}

.pc-finder-card__bar-value {
	text-align: right;
	color: var(--pc-text);
}

.pc-finder-card__bar-fill {
	grid-column: 1 / -1;
	height: 4px;
	background: rgba( 255, 255, 255, 0.06 );
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}

.pc-finder-card__bar-fill::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: var( --pc-fill, 0% );
	background: linear-gradient( 90deg, var(--pc-brand-color), color-mix(in srgb, var(--pc-brand-color) 60%, white) );
	border-radius: 2px;
	transition: width 0.4s ease;
}

/* Карточки цены — широкий формат, центрированный */
.pc-finder-card--price {
	min-height: 90px;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 22px 16px;
	background: linear-gradient( 135deg, rgba(229,30,30,0.04) 0%, var(--pc-bg-card) 60% );
}

.pc-finder-card--price .pc-finder-card__title {
	font-size: 17px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: 800;
}

.pc-finder-card--price:hover,
.pc-finder-card--price.is-selected {
	border-color: var(--pc-accent);
	box-shadow: 0 0 0 1px var(--pc-accent), 0 10px 24px -10px var(--pc-accent);
}

/* === ПАНЕЛЬ "Готовые серии" — карточки категорий === */

.pc-finder__filter-grid--series {
	grid-template-columns: repeat( auto-fit, minmax(220px, 1fr) );
	gap: 14px;
}

.pc-finder-card--series {
	min-height: 130px;
	padding: 22px 20px;
	background: linear-gradient( 180deg, rgba(255,255,255,0.04) 0%, var(--pc-bg-card) 100% );
}

.pc-finder-card--series .pc-finder-card__title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.3px;
	margin-bottom: 4px;
}

.pc-finder-card--series .pc-finder-card__hint {
	font-size: 12px;
	line-height: 1.5;
	color: var(--pc-text-muted);
	flex-grow: 1;
}

.pc-finder-card--series .pc-finder-card__count {
	margin-top: 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pc-accent);
}

.pc-finder-card--series:hover,
.pc-finder-card--series.is-selected {
	border-color: var(--pc-accent);
	box-shadow: 0 0 0 1px var(--pc-accent), 0 10px 24px -10px var(--pc-accent);
}

/* === ПАНЕЛЬ "Под игру" — карточки с цветным фоном === */

.pc-finder__filter-grid--game {
	grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
	gap: 14px;
}

.pc-finder-card--game {
	position: relative;
	min-height: 130px;
	padding: 22px 20px;
	background: var(--pc-card-bg, var(--pc-bg-card)) !important;
	border: 1px solid transparent;
	color: #fff;
	overflow: hidden;
}

.pc-finder-card--game::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
	transition: background 0.2s ease;
}

.pc-finder-card--game > * {
	position: relative;
	z-index: 1;
}

.pc-finder-card--game .pc-finder-card__title {
	font-size: 20px;
	font-weight: 900;
	color: #fff;
	letter-spacing: 0.3px;
	text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.pc-finder-card--game .pc-finder-card__hint {
	font-size: 12px;
	color: rgba(255,255,255,0.9);
	font-weight: 500;
}

.pc-finder-card--game:hover::before,
.pc-finder-card--game.is-selected::before {
	background: rgba(0, 0, 0, 0.1);
}

.pc-finder-card--game:hover,
.pc-finder-card--game.is-selected {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.6);
}

/* ===== Play-карточки (#226 / #230): Игра × цель FPS =====
 * В стиле базовой карточки .pc-finder-card. Если задана обложка
 * (--pc-card-bg-img), накладываем её как декоративный watermark
 * с overlay, чтобы не сломать читаемость текста. */
.pc-finder-card--play {
	--pc-brand-color: var(--pc-accent, #e51e1e);
	position: relative;
	overflow: hidden;
}

/* Слой обложки — рисуется ТОЛЬКО если переменная --pc-card-bg-img задана.
 * background-image на elem'е которому не задана переменная = none → слой пустой. */
.pc-finder-card--play::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--pc-card-bg-img, none);
	background-size: cover;
	background-position: center;
	opacity: .28;
	pointer-events: none;
	z-index: 0;
	transition: opacity .2s ease;
}

.pc-finder-card--play:hover::after,
.pc-finder-card--play.is-selected::after {
	opacity: .42;
}

/* Контент поверх обложки */
.pc-finder-card--play > * {
	position: relative;
	z-index: 1;
}

.pc-finder-card--play .pc-finder-card__title {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: .2px;
	line-height: 1.25;
	margin-bottom: 2px;
}

.pc-finder-card__play-target {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: auto;
}

.pc-finder-card__play-target strong {
	font-size: 22px;
	font-weight: 900;
	color: var(--pc-text);
	letter-spacing: -.01em;
	line-height: 1;
}

.pc-finder-card__play-res,
.pc-finder-card__play-res-single {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	background: rgba(255,255,255,.08);
	color: var(--pc-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

/* #231: ряды чипсов внутри карточки игры (preset + resolution) */
.pc-finder-card--play {
	gap: 6px;
}

.pc-finder-card__play-row {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
}

.pc-finder-card__play-row--preset {
	margin-top: auto; /* отодвигаем к низу карточки */
}

.pc-finder-card__play-chip {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	color: var(--pc-text-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
	user-select: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}

.pc-finder-card__play-chip:hover {
	background: rgba(255,255,255,.10);
	color: var(--pc-text);
	border-color: rgba(255,255,255,.18);
}

.pc-finder-card__play-chip.is-active {
	background: var(--pc-brand-color, var(--pc-accent, #e51e1e));
	border-color: var(--pc-brand-color, var(--pc-accent, #e51e1e));
	color: #fff;
}

.pc-finder-card__play-chip.is-disabled {
	opacity: .35;
	pointer-events: none;
	cursor: not-allowed;
}

.pc-finder-card__play-chip--res {
	min-width: 38px;
	text-align: center;
}

/* #237: подсказка над hero — настраиваемый текст в админке */
.pc-finder-play-hero-subtitle {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--pc-text-muted);
	line-height: 1.4;
	letter-spacing: .01em;
}

/* ===== #233: Hero-блок Play (обложка игры + 3 селектора) ===== */

.pc-finder-play-hero {
	--pc-play-hero-rank-color: var(--pc-accent, #e51e1e);
	position: relative;
	/* v1.13.330: clamp — на узких экранах 260px, на широких до 420px чтобы лого игр был
	 * виден, а не обрезался cover-fit. Высота растёт линейно с шириной viewport. */
	min-height: clamp(260px, 22vw, 420px);
	border-radius: 14px;
	overflow: hidden;
	/* Multi-background: картинка игры поверх базового gradient карточек виджета.
	 * Когда --pc-play-hero-img = none, gradient видно полностью, и hero
	 * визуально не выбивается из остальных табов (gpu/cpu/series). */
	/* v1.13.330: position-y=35% — компромисс между face (выше) и лого (ниже).
	 * При clamp min-height 260-420px видна верхняя половина банера → face + начало лого.
	 * v1.13.337: дефолт — sm-обложка (1600×460, ~80КБ). На десктопе ниже @media-rule
	 * подменяет на lg (2880×800, ~250КБ). Старая переменная --pc-play-hero-img оставлена
	 * как fallback для backward compatibility (если кто-то ещё не задеплоил PHP). */
	background:
		var(--pc-play-hero-img-sm, var(--pc-play-hero-img, none)) center 35% / cover no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.025) 0%, var(--pc-bg-card, #1a1a1a) 100%);
	border: 1px solid var(--pc-border, rgba(255,255,255,.08));
	margin: 0;
}

/* v1.13.337: на десктопе (≥1024px ИЛИ retina≥2dppx) подменяем sm на lg-вариант
 * — оригинальный 2880×800 для резкости на больших экранах. На мобиле остаётся sm. */
@media ( min-width: 1024px ), ( min-resolution: 2dppx ) {
	.pc-finder-play-hero {
		background-image:
			var(--pc-play-hero-img-lg, var(--pc-play-hero-img-sm, var(--pc-play-hero-img, none))),
			linear-gradient(180deg, rgba(255,255,255,0.025) 0%, var(--pc-bg-card, #1a1a1a) 100%);
	}
}

/* no-image — overlay тоже мягче (нет смысла затемнять и без того тёмный gradient) */
.pc-finder-play-hero.no-image .pc-finder-play-hero__overlay {
	background: none;
}
/* v1.13.514: нет обложки → блок сжимается до высоты содержимого (только селекторы),
 * без огромной пустой области сверху. Применяется и в desktop/retina @media тоже. */
.pc-finder-play-hero.no-image {
	min-height: 0 !important;
}
@media ( min-width: 1024px ), ( min-resolution: 2dppx ) {
	.pc-finder-play-hero.no-image {
		min-height: 0 !important;
	}
}
/* В no-image режиме лейблы более читабельные на тёмном (нет картинки за ними) */
.pc-finder-play-hero.no-image .pc-finder-play-hero__label,
.pc-finder-play-hero.no-image .pc-finder-play-hero__group-label {
	color: var(--pc-text-muted, rgba(255,255,255,.55));
}
.pc-finder-play-hero.no-image .pc-finder-play-hero__game {
	background: rgba(255,255,255,.05);
	border-color: rgba(255,255,255,.10);
}
.pc-finder-play-hero.no-image .pc-finder-play-hero__seg {
	background: rgba(255,255,255,.03);
	border-color: rgba(255,255,255,.08);
}
.pc-finder-play-hero.no-image .pc-finder-play-hero__seg-btn {
	color: var(--pc-text, #fff);
}

.pc-finder-play-hero__overlay {
	position: absolute;
	inset: 0;
	/* v1.13.329: усилили нижний край (.92) под pills чтобы они читались на любой обложке.
	 * Верх облегчили (.15) — face/character art должен быть виден. */
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.50) 55%, rgba(0,0,0,.92) 100%);
	pointer-events: none;
}

.pc-finder-play-hero__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	min-height: inherit;
	padding: 18px 22px;
	gap: 14px;
}

.pc-finder-play-hero__title-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.pc-finder-play-hero__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
}

.pc-finder-play-hero__game {
	flex: 1 1 240px;
	max-width: 320px;
	padding: 8px 14px;
	background: rgba(255,255,255,.10);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 8px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
	                   linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
	background-size: 5px 5px;
	background-repeat: no-repeat;
	padding-right: 32px;
}

.pc-finder-play-hero__game:hover { background-color: rgba(255,255,255,.16); }
.pc-finder-play-hero__game:focus { outline: 2px solid var(--pc-accent, #e51e1e); outline-offset: 2px; }
.pc-finder-play-hero__game option { color: #000; background: #fff; }

.pc-finder-play-hero__target {
	margin-left: auto;
	color: rgba(255,255,255,.75);
	font-size: 13px;
	font-weight: 600;
}

.pc-finder-play-hero__target strong {
	color: #fff;
	font-weight: 900;
	font-size: 18px;
	letter-spacing: .01em;
}

.pc-finder-play-hero__controls {
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.pc-finder-play-hero__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pc-finder-play-hero__group-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
}

.pc-finder-play-hero__seg {
	display: inline-flex;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 10px;
	padding: 3px;
	gap: 2px;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.pc-finder-play-hero__seg-btn {
	padding: 7px 14px;
	background: transparent;
	border: none;
	color: rgba(255,255,255,.78);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	border-radius: 7px;
	transition: background .15s ease, color .15s ease;
	font-family: inherit;
}

.pc-finder-play-hero__seg-btn:hover {
	background: rgba(255,255,255,.08);
	color: #fff;
}

.pc-finder-play-hero__seg-btn.is-active {
	background: var(--pc-accent, #e51e1e);
	color: #fff;
	box-shadow: 0 2px 8px -2px rgba(229,30,30,.6);
}

/* #236: collapse-toggle — теперь живёт внутри title-row (не absolute),
 * виден только на mobile через media query. */
.pc-finder-play-hero__toggle {
	flex: 0 0 auto;
	margin-left: auto; /* прижать к правому краю flex-row */
	width: 34px;
	height: 34px;
	padding: 0;
	background: rgba(0,0,0,.45);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background .15s ease;
}

.pc-finder-play-hero__toggle:hover {
	background: rgba(0,0,0,.65);
}

.pc-finder-play-hero__toggle-icon {
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	/* Стрелка ВВЕРХ (chevron up) — компенсируем смещение оптического центра */
	transform: translateY(2px) rotate(-45deg);
	transition: transform .2s ease;
}

.pc-finder-play-hero.is-collapsed .pc-finder-play-hero__toggle-icon {
	/* Стрелка ВНИЗ — flip + компенсация */
	transform: translateY(-2px) rotate(135deg);
}

/* #236: collapse работает только на мобилке — на desktop toggle-кнопка
 * скрыта (display: none), поэтому состояние is-collapsed из localStorage
 * не должно прятать controls. */
@media (max-width: 700px) {
	.pc-finder-play-hero.is-collapsed .pc-finder-play-hero__controls {
		display: none;
	}
}

/* #236: Mobile-compact Hero — снижаем плотность и размер шрифта,
 * чипсы flex-wrap чтобы влезали без скролла. */
@media (max-width: 700px) {
	.pc-finder-play-hero__toggle { display: inline-flex; }
	.pc-finder-play-hero { min-height: 0; border-radius: 12px; }
	.pc-finder-play-hero__body { padding: 12px; gap: 10px; }
	.pc-finder-play-hero__title-row {
		gap: 8px;
		flex-wrap: wrap;
		align-items: center;
	}
	/* Label «ИГРА» на отдельной строке наверху, dropdown + toggle в одной строке */
	.pc-finder-play-hero__label { font-size: 10px; flex: 1 1 100%; }
	.pc-finder-play-hero__game { font-size: 14px; padding: 7px 32px 7px 10px; flex: 1 1 0%; max-width: none; }
	.pc-finder-play-hero__controls {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.pc-finder-play-hero__group { gap: 4px; }
	.pc-finder-play-hero__group-label { font-size: 9px; letter-spacing: .1em; }
	.pc-finder-play-hero__seg {
		display: flex;
		flex-wrap: wrap;
		padding: 2px;
		gap: 1px;
		width: 100%;
	}
	.pc-finder-play-hero__seg-btn {
		padding: 5px 9px;
		font-size: 11px;
		letter-spacing: .01em;
		border-radius: 5px;
		flex: 1 1 auto;
		min-width: 38px;
	}
}

@media (max-width: 480px) {
	.pc-finder-play-hero__body { padding: 10px 10px; gap: 8px; }
	.pc-finder-play-hero__game { font-size: 13px; padding: 6px 28px 6px 9px; }
	.pc-finder-play-hero__seg-btn { padding: 4px 7px; font-size: 10.5px; min-width: 32px; }
}

/* ===== #233: FPS-блок на карточке сборки (бар + цифра + бейдж) ===== */

.pc-finder__play-fps {
	--pc-play-rank: var(--pc-accent, #e51e1e);
	margin: 8px 0 6px;
	padding: 8px 10px 9px;
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: rgba(255,255,255,.025);
	border: 1px solid var(--pc-border, rgba(255,255,255,.08));
	border-radius: 8px;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.2;
	/* Чтобы блок не схватывался ссылкой product-link-open (как title), курсор обычный */
	position: relative;
	z-index: 2;
}

/* v1.13.380: 6-уровневая цветовая шкала FPS (всегда активна, и с целью, и без).
 * Холодный = «не игровое железо», тёплый = «играбельно», зелёный = «комфортно»,
 * циан = «киберспортивный уровень». Бар светится в активный цвет тира. */
.pc-finder__play-fps[data-rank="bad"]     { --pc-play-rank: #e74c3c; }     /* красный <30 */
.pc-finder__play-fps[data-rank="low"]     { --pc-play-rank: #ff8800; }     /* оранжевый 30-60 */
.pc-finder__play-fps[data-rank="medium"]  { --pc-play-rank: #f1c40f; }     /* жёлтый 60-100 */
.pc-finder__play-fps[data-rank="good"]    { --pc-play-rank: #2ecc71; }     /* зелёный 100-144 */
.pc-finder__play-fps[data-rank="great"]   { --pc-play-rank: #00ff88; }     /* ярко-зелёный 144-240 */
.pc-finder__play-fps[data-rank="ultra"]   { --pc-play-rank: #00d2ff; }     /* циан 240+ */

/* v1.13.380: лёгкий glow вокруг ярких тиров — выделяет high-end сборки */
.pc-finder__play-fps[data-rank="great"] .pc-finder__play-fps-bar-fill,
.pc-finder__play-fps[data-rank="ultra"] .pc-finder__play-fps-bar-fill {
	box-shadow: 0 0 8px color-mix(in srgb, var(--pc-play-rank) 70%, transparent);
}
.pc-finder__play-fps[data-rank="great"] .pc-finder__play-fps-num b,
.pc-finder__play-fps[data-rank="ultra"] .pc-finder__play-fps-num b {
	text-shadow: 0 0 6px color-mix(in srgb, var(--pc-play-rank) 40%, transparent);
}

.pc-finder__play-fps-bar-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pc-finder__play-fps-bar {
	flex: 1 1 auto;
	height: 8px;
	border-radius: 4px;
	background: rgba(255,255,255,.06);
	overflow: hidden;
	position: relative;
}

.pc-finder__play-fps-bar-fill {
	height: 100%;
	width: var(--pc-play-fps-fill, 0%);
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--pc-play-rank) 60%, transparent),
		var(--pc-play-rank));
	border-radius: inherit;
	transition: width .35s ease;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.pc-finder__play-fps-bar-fill { background: var(--pc-play-rank); }
}

.pc-finder__play-fps-num {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	min-width: 58px;
	justify-content: flex-end;
}

.pc-finder__play-fps-num b {
	font-size: 22px;
	font-weight: 900;
	color: var(--pc-play-rank);
	letter-spacing: -.02em;
	line-height: 1;
}

.pc-finder__play-fps-num i {
	font-style: normal;
	font-size: 10px;
	font-weight: 700;
	color: var(--pc-text-muted);
	letter-spacing: .08em;
	text-transform: uppercase;
}

.pc-finder__play-fps-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.pc-finder__play-fps-combo {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--pc-text-muted);
	text-transform: uppercase;
}

.pc-finder__play-fps-badge {
	font-size: 11px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--pc-play-rank) 18%, transparent);
	color: var(--pc-play-rank);
	letter-spacing: .02em;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
	.pc-finder__play-fps-badge {
		background: rgba(255,255,255,.06);
	}
}

@media (max-width: 600px) {
	.pc-finder__play-fps { margin: 6px 8px 10px; padding: 8px 10px; }
	.pc-finder__play-fps-num b { font-size: 20px; }
}

/* === ОБЛАСТЬ РЕЗУЛЬТАТОВ === */

.pc-finder__results {
	/* Динамическая высота под контент. Раньше был фиксированный
	 * min-height: 380px (резерв против layout-shift при AJAX), но это
	 * давало огромное пустое пространство при empty-state. Чтобы не было
	 * мерцания при загрузке, во время `.is-loading` подкручиваем min-height
	 * через прошлое значение — см. правило ниже. */
	min-height: 0;
	position: relative;
	transition: opacity 0.25s ease;
}

/* Во время AJAX-загрузки удерживаем высоту контейнера — чтобы лента
 * сборок не схлопывалась перед появлением нового контента. */
.pc-finder__results.is-loading:not(:empty) {
	min-height: 380px;
}

.pc-finder__results.is-loading {
	opacity: 0.4;
	pointer-events: none;
}

.pc-finder__results-grid {
	margin: 0 !important;
	padding: 0 !important;
}

.pc-finder__empty {
	padding: 32px 24px;
	text-align: center;
	color: var(--pc-text-muted);
	font-size: 15px;
	border: 1px dashed var(--pc-border);
	border-radius: var(--pc-radius-md);
}

.pc-finder__empty a {
	color: var(--pc-accent);
	text-decoration: none;
}

.pc-finder__empty a:hover {
	text-decoration: underline;
}

/* === CTA ВНИЗУ СЕКЦИИ === */

.pc-finder__more {
	display: flex;
	justify-content: center;
	margin-top: 32px;
}

/* Когда результатов нет (empty-state), ссылка «Посмотреть весь каталог»
 * уже есть внутри empty-блока — дублирующую кнопку внизу скрываем.
 *
 * Двойная защита:
 *  1) :has() — современные браузеры (Chrome 105+ / FF 121+ / Safari 15.4+)
 *  2) JS-класс .is-empty-results на .pc-finder — fallback.
 */
.pc-finder__results:has(.pc-finder__empty) + .pc-finder__more,
.pc-finder.is-empty-results .pc-finder__more {
	display: none !important;
}

/* === АДАПТИВ === */

@media ( max-width: 600px ) {
	.pc-finder__tabs {
		gap: 18px;
	}
	.pc-finder__tab {
		font-size: 11px;
		letter-spacing: 0.5px;
		padding: 12px 2px;
	}
	.pc-finder__filter-grid--price {
		grid-template-columns: repeat( 2, 1fr );
	}
	.pc-finder-card {
		padding: 14px 14px;
		min-height: 110px;
	}
	.pc-finder-card__title {
		font-size: 18px;
	}
}

/* ============================================================
 *  Горизонтальный скролл (опционально, по флагу настроек)
 *
 *  Активируется на `.pc-finder__filter-grid[data-scroll="horizontal"]`.
 *  Карточки идут в один ряд с overflow-x: auto и scroll-snap. Стрелки
 *  навигации (если включены в настройках) появляются по бокам через
 *  обёртку .pc-finder__scroll-wrap.
 * ============================================================ */

.pc-finder__scroll-wrap {
	position: relative;
}

.pc-finder__filter-grid[data-scroll="horizontal"] {
	display: flex;
	flex-wrap: nowrap;
	gap: 12px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	/* padding-y увеличен с запасом (30px) под glow выбранной карточки,
	 * которая выходит за её границу на 15-20px. overflow-y: hidden иначе
	 * обрезает тень. Отрицательный margin компенсирует, чтобы лента
	 * визуально была на месте. */
	padding: 30px 4px 30px;
	margin: -30px -4px -30px;
	scroll-behavior: smooth;
	/* Drag-to-scroll: курсор хватающий, без выделения текста */
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.pc-finder__filter-grid[data-scroll="horizontal"].is-dragging {
	cursor: grabbing;
	scroll-snap-type: none; /* во время drag отключаем snap чтобы не дёргало */
	scroll-behavior: auto;
}
.pc-finder__filter-grid[data-scroll="horizontal"].is-dragging * {
	pointer-events: none;
}
.pc-finder__filter-grid[data-scroll="horizontal"].is-dragging a,
.pc-finder__filter-grid[data-scroll="horizontal"].is-dragging img {
	-webkit-user-drag: none;
	user-drag: none;
}

/* Ghost-spacers НЕ нужны: вместо них используется init scroll = 0.5 cardW
 * через JS, который центрирует ленту так что слева и справа торчат
 * половинки следующих карточек симметрично. */

.pc-finder__filter-grid[data-scroll="horizontal"]::-webkit-scrollbar {
	display: none;
}

/* Карточки фильтров — фиксированная ширина, без растягивания.
 * Сколько влезет в viewport — столько и видно; правая выглядывает за затенение. */
.pc-finder__filter-grid[data-scroll="horizontal"] > .pc-finder-card {
	flex: 0 0 220px;
	scroll-snap-align: start;
}

.pc-finder__filter-grid--game[data-scroll="horizontal"] > .pc-finder-card,
.pc-finder__filter-grid--series[data-scroll="horizontal"] > .pc-finder-card {
	flex: 0 0 260px;
}

/* Принудительно скрываем нативные browser-scrollbars на всём, что
 * скроллится в виджете — иначе у фильтра по видеокарте на некоторых
 * браузерах вылезает серая системная полоса под лентой. */
.pc-finder *::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}
.pc-finder * {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

/* ============================================================
 *  Scroll-controls под лентой: стрелка + трек + пилюля + стрелка
 *  Заменяют старые absolute-arrows, которые перекрывали карточки.
 * ============================================================ */
.pc-finder__scroll-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 16px;
}

.pc-finder__nav-arrow {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	background: rgba( 22, 24, 28, 0.7 );
	color: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
	user-select: none;
	flex-shrink: 0;
}

.pc-finder__nav-arrow:hover {
	background: rgba( 38, 40, 46, 0.95 );
	transform: scale( 1.05 );
}

.pc-finder__nav-arrow:focus-visible {
	outline: 2px solid var( --pc-accent, #ed1c24 );
	outline-offset: 2px;
}

.pc-finder__nav-arrow[disabled] {
	opacity: 0.25;
	cursor: not-allowed;
	pointer-events: none;
}

/* Трек — горизонтальная полоса между стрелками, на ней «пилюля» отражает
 * scroll-позицию ленты. Ширина пилюли = visible/total * track-width. */
.pc-finder__nav-track {
	flex: 0 1 240px;
	height: 4px;
	background: rgba( 255, 255, 255, 0.1 );
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}

.pc-finder__nav-thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 30%;
	background: var( --pc-accent, #ed1c24 );
	border-radius: 2px;
	transition: left 0.15s ease, width 0.15s ease;
}

@media ( max-width: 600px ) {
	.pc-finder__nav-track {
		flex: 1 1 auto;
	}
}

/* Peek-effect: карточки доходят до края, а по краям рисуется
   gradient-overlay — следующая карточка видна СКВОЗЬ затенение.
   Привязан к самой обёртке `.pc-finder__scroll-wrap`, без зависимости
   от data-finder-arrows. Видим по умолчанию — JS гасит когда контент
   помещается целиком. */

.pc-finder__scroll-wrap {
	position: relative;
}

/* Затенение полностью убрано по решению пользователя. Стрелки навигации
 * не перекрывают карточки за счёт padding-inline на гридах ниже. */

.pc-finder__scroll-wrap::after {
	background: linear-gradient(
		to left,
		rgba( 0, 0, 0, 0.85 ) 0%,
		rgba( 0, 0, 0, 0.55 ) 35%,
		rgba( 0, 0, 0, 0.20 ) 70%,
		rgba( 0, 0, 0, 0 )    100%
	);
}

/* Затенение убрано полностью — классы .no-overflow / .is-at-end оставляем
 * на wrap для скрытия стрелок, но overlay больше не управляется. */

@media ( max-width: 900px ) {
	.pc-finder__filter-grid[data-scroll="horizontal"] > .pc-finder-card {
		flex: 0 0 200px;
	}
	.pc-finder__filter-grid--game[data-scroll="horizontal"] > .pc-finder-card,
	.pc-finder__filter-grid--series[data-scroll="horizontal"] > .pc-finder-card {
		flex: 0 0 220px;
	}
}

/* === Горизонтальный скролл для результатов (карточек товаров) ===
 *
 *  Когда `cards.horizontal_scroll = ON` — ul.products получает data-scroll,
 *  CSS превращает её в флекс-ленту с прокруткой. Это позволяет показывать
 *  больше сборок в выдаче (например, 20) без огромного вертикального хвоста.
 */
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 16px !important;
	/* перебиваем WC grid + любой list-style */
	grid-template-columns: none !important;
	list-style: none !important;

	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px 4px 12px !important;
	margin: 0 -4px !important;
	scroll-behavior: smooth;
	/* Drag-to-scroll */
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"].is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	scroll-behavior: auto;
}
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"].is-dragging a,
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"].is-dragging img {
	-webkit-user-drag: none;
	user-drag: none;
}

.pc-finder .pc-finder__results-grid[data-scroll="horizontal"]::-webkit-scrollbar {
	display: none;
}

/* Каждая карточка-сборка — фиксированная ширина 280px, без растягивания.
 * Сколько помещается в viewport — столько и видно. */
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] > li,
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] > li.product {
	flex: 0 0 280px !important;
	min-width: 280px !important;
	max-width: 280px !important;
	width: 280px !important;
	margin: 0 !important;
	padding: 0 !important;
	scroll-snap-align: start;
	display: block !important;
	float: none !important;
	box-sizing: border-box;
}

/* Картинка товара внутри карточки — те же пропорции что в каталоге:
 * `aspect-ratio: 3/4` (вертикальная), `object-fit: cover`. Баннер ПК с
 * надписями вверху + RGB-подсветкой внизу помещается целиком.
 *
 * v1.13.446: aspect-ratio 4/5 → 3/4 как в каталоге (main.css:1899 для
 * .woocommerce ul.products li.product img). 4/5 обрезало низ.
 */
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] > li img,
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] > li .pc-card-image,
.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] > li .woocommerce-LoopProduct-link img {
	width: 100% !important;
	height: auto !important;
	max-height: none !important;
	aspect-ratio: 3 / 4 !important;
	object-fit: cover !important;
	object-position: center !important;
	display: block;
}

@media ( max-width: 900px ) {
	/* На мобиле карточки уже компактные — фиксированный размер. */
	.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] > li,
	.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] > li.product {
		flex: 0 0 240px !important;
		min-width: 240px !important;
		max-width: 240px !important;
		width: 240px !important;
	}
	.pc-finder .pc-finder__results-grid[data-scroll="horizontal"] > li img {
		max-height: 180px !important;
	}
	.pc-finder__filter-grid[data-scroll="horizontal"] > .pc-finder-card {
		flex: 0 0 180px;
	}
	.pc-finder__filter-grid--game[data-scroll="horizontal"] > .pc-finder-card,
	.pc-finder__filter-grid--series[data-scroll="horizontal"] > .pc-finder-card {
		flex: 0 0 220px;
	}
}

/* Эмпти-стейт (когда сборок под фильтр нет) — не должен быть огромным,
 * даже если оборачивается в scroll-wrap по ошибке. */
.pc-finder .pc-finder__results .pc-finder__empty {
	padding: 24px;
	text-align: center;
	color: #b6b8be;
}