/* ========================================================================
 * Сравнение товаров — кнопка на карточке и floating bar внизу страницы.
 * Модуль inc/product-compare.php.
 * ======================================================================== */

/* === Кнопка «К сравнению» на карточке/single === */

.pc-compare-btn-wrap--loop {
	margin: 0 14px 12px;
}

.pc-compare-btn-wrap--single {
	/* Сидит сразу под индикатором «В наличии» (priority 11), перед коротким
	   описанием (priority 20). Небольшой top отбивает от индикатора, побольше
	   bottom — чтобы описание не липло к кнопке. */
	margin: 6px 0 16px;
}

/* Тройные селекторы + !important — потому что Astra .button и WC .button
 * перебивают наш outlined-стиль ярко-синей заливкой WP-defaults.
 * Без !important кнопка получает background:#2271b1, color:#fff. */
.pc-compare-btn,
.entry-content .pc-compare-btn,
.woocommerce .pc-compare-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	padding: 7px 12px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid var(--pc-border) !important;
	border-radius: 8px !important;
	color: var(--pc-text-muted) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: 0.3px !important;
	line-height: 1 !important;
	text-transform: none !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	box-shadow: none !important;
}

.pc-compare-btn__icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.pc-compare-btn__text-on {
	display: none;
}

.pc-compare-btn__text-off {
	display: inline;
}

/* Hover — с !important и тройным селектором, иначе базовые правила
 * (которые мы делали через !important чтобы перебить Astra/WP-defaults)
 * перебивают сами свой же hover. */
@media (hover: hover) {
	.pc-compare-btn:hover,
	.entry-content .pc-compare-btn:hover,
	.woocommerce .pc-compare-btn:hover {
		color: var(--pc-text) !important;
		border-color: var(--pc-accent) !important;
		background: rgba(255, 42, 42, 0.04) !important;
		background-color: rgba(255, 42, 42, 0.04) !important;
	}
	/* Hover на уже активной (in list) — чуть темнее, чтобы было ощущение клика */
	.pc-compare-btn.is-active:hover,
	.entry-content .pc-compare-btn.is-active:hover,
	.woocommerce .pc-compare-btn.is-active:hover {
		background: rgba(255, 42, 42, 0.18) !important;
		background-color: rgba(255, 42, 42, 0.18) !important;
	}
}

/* Активное состояние — товар уже в сравнении.
 * Тоже с !important, по тем же причинам что и базовый стиль. */
.pc-compare-btn.is-active,
.entry-content .pc-compare-btn.is-active,
.woocommerce .pc-compare-btn.is-active {
	background: rgba(255, 42, 42, 0.1) !important;
	background-color: rgba(255, 42, 42, 0.1) !important;
	border-color: var(--pc-accent) !important;
	color: var(--pc-accent) !important;
}

.pc-compare-btn.is-active .pc-compare-btn__text-on {
	display: inline;
}

.pc-compare-btn.is-active .pc-compare-btn__text-off {
	display: none;
}

/* Single-вариант — крупнее */
.pc-compare-btn--single {
	padding: 10px 18px;
	font-size: 13px;
}

.pc-compare-btn--single .pc-compare-btn__icon {
	width: 16px;
	height: 16px;
}

/* Disabled во время AJAX */
.pc-compare-btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* === Floating bar внизу страницы === */

.pc-compare-bar {
	position: fixed;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	z-index: 90;
	background: var(--pc-bg-elevated);
	border: 1px solid var(--pc-border);
	border-radius: 14px;
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
	padding: 12px 14px;
	padding-right: 36px; /* место для toggle-кнопки */
	max-width: calc(100vw - 32px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease,
	            padding 0.2s ease, width 0.2s ease;
	visibility: visible;
	opacity: 1;
}

/* === Кнопка свернуть/развернуть bar === */
.pc-compare-bar__toggle,
.entry-content .pc-compare-bar__toggle {
	position: absolute !important;
	top: 6px !important;
	right: 6px !important;
	width: 24px !important;
	height: 24px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	background-color: transparent !important;
	border: 1px solid transparent !important;
	color: var(--pc-text-muted) !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: color 0.15s ease, border-color 0.15s ease, transform 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

@media (hover: hover) {
	.pc-compare-bar__toggle:hover {
		color: var(--pc-text) !important;
		border-color: var(--pc-border) !important;
	}
}

/* Когда bar развёрнут — стрелка указывает вниз (свернуть). */
.pc-compare-bar__toggle svg {
	transition: transform 0.2s ease;
}

/* Когда bar свёрнут — стрелка указывает вверх (развернуть). */
.pc-compare-bar.is-collapsed .pc-compare-bar__toggle svg {
	transform: rotate(180deg);
}

/* === Свёрнутое состояние: компактная плашка с счётчиком (любой viewport) ===
 * bar всегда центрирован через left:50% + transform translateX(-50%) (см. base
 * стиль выше). При collapsed просто меняем width/max-width — bar плавно
 * сжимается в центре. Никаких прыжков влево-вправо. */
.pc-compare-bar.is-collapsed {
	padding: 8px 36px 8px 14px;
	width: auto !important;
	max-width: fit-content !important;
}

.pc-compare-bar.is-collapsed .pc-compare-bar__inner {
	display: none;
}

/* Компактный ярлык-индикатор (показывается ТОЛЬКО когда свёрнут). */
.pc-compare-bar__count-collapsed {
	display: none;
	align-items: center;
	gap: 8px;
	color: var(--pc-text);
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	padding: 4px 8px;
}

.pc-compare-bar.is-collapsed .pc-compare-bar__count-collapsed {
	display: inline-flex;
}

.pc-compare-bar__count-collapsed svg {
	color: var(--pc-accent);
}

.pc-compare-bar__count-collapsed span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	background: var(--pc-accent);
	color: #fff;
	border-radius: 11px;
	font-size: 11px;
	font-weight: 800;
}

.pc-compare-bar.is-hidden {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(24px);
	pointer-events: none;
}

.pc-compare-bar__inner {
	display: flex;
	align-items: center;
	gap: 18px;
}

.pc-compare-bar__items {
	display: flex;
	gap: 10px;
}

/* ВАЖНО: overflow:hidden оставляем ТОЛЬКО на внутренней ссылке (она скругляет картинку).
 * Сам .pc-compare-bar__item должен иметь overflow:visible — иначе крестик
 * `__item-remove` с top:-7px right:-7px обрезается родителем и кажется «сползающим».
 * Плюс padding-top:4px у items контейнера, чтобы крестики не лезли за пределы bar. */
.pc-compare-bar__items {
	padding-top: 6px;
	padding-right: 4px;
}

.pc-compare-bar__item {
	position: relative;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	border: 1px solid var(--pc-border);
	background: var(--pc-bg-card);
	flex-shrink: 0;
	/* overflow: visible — крестик торчит за пределы */
}

.pc-compare-bar__item-link {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: inherit;
}

.pc-compare-bar__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Кнопка-крестик удаления товара. position:absolute от __item.
 * z-index чтобы был поверх картинки внутри __item-link. */
/* Та же защита от ярко-синего default <button> стиля Astra/WP. */
.pc-compare-bar__item-remove,
.entry-content .pc-compare-bar__item-remove,
.woocommerce .pc-compare-bar__item-remove {
	position: absolute !important;
	top: -7px !important;
	right: -7px !important;
	z-index: 2;
	width: 20px !important;
	height: 20px !important;
	border-radius: 50% !important;
	background: var(--pc-bg-elevated) !important;
	background-color: var(--pc-bg-elevated) !important;
	color: var(--pc-text) !important;
	border: 1px solid var(--pc-border) !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	padding: 0 !important;
	box-shadow: none !important;
	font-size: 0; /* убираем дефолтное spacing для inline-flex */
}

.pc-compare-bar__item-remove svg {
	width: 10px;
	height: 10px;
}

@media (hover: hover) {
	.pc-compare-bar__item-remove:hover {
		background: var(--pc-accent);
		border-color: var(--pc-accent);
		color: #fff;
	}
}

/* === Actions: «Очистить» + «Сравнить (N)» === */

.pc-compare-bar__actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin-left: 4px;
}

/* Та же история что с .pc-compare-btn — нативный <button> Astra/WC красит
 * ярко-синим (background:#2271b1, color:#fff). Перебиваем тройным селектором +
 * !important на ключевых свойствах, чтобы кнопка-«Очистить» оставалась плоской
 * прозрачной с серым текстом. */
.pc-compare-bar__clear,
.entry-content .pc-compare-bar__clear,
.woocommerce .pc-compare-bar__clear {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--pc-text-muted) !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	font-size: 12px !important;
	font-weight: 500 !important;
	padding: 8px 12px !important;
	border-radius: 8px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
	white-space: nowrap;
}

@media (hover: hover) {
	.pc-compare-bar__clear:hover,
	.entry-content .pc-compare-bar__clear:hover,
	.woocommerce .pc-compare-bar__clear:hover {
		color: var(--pc-text) !important;
		background: rgba(255, 255, 255, 0.04) !important;
		background-color: rgba(255, 255, 255, 0.04) !important;
		border-color: var(--pc-border) !important;
	}
}

/* Inline-confirm: после первого клика — красная рамка/текст. */
.pc-compare-bar__clear.is-confirming,
.entry-content .pc-compare-bar__clear.is-confirming,
.woocommerce .pc-compare-bar__clear.is-confirming {
	color: var(--pc-accent) !important;
	border-color: var(--pc-accent) !important;
	background: rgba(255, 42, 42, 0.08) !important;
	background-color: rgba(255, 42, 42, 0.08) !important;
	font-weight: 700 !important;
}

@media (hover: hover) {
	.pc-compare-bar__clear.is-confirming:hover,
	.entry-content .pc-compare-bar__clear.is-confirming:hover,
	.woocommerce .pc-compare-bar__clear.is-confirming:hover {
		background: rgba(255, 42, 42, 0.16) !important;
		background-color: rgba(255, 42, 42, 0.16) !important;
		color: var(--pc-accent) !important;
	}
}

.pc-compare-bar__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	background: var(--pc-accent);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	border-radius: 9px;
	line-height: 1;
	transition: background 0.15s ease, transform 0.15s ease;
}

.pc-compare-bar__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	font-size: 11px;
	font-weight: 800;
}

@media (hover: hover) {
	.pc-compare-bar__cta:hover {
		background: #e51c1c;
		color: #fff;
		transform: translateY(-1px);
	}
}

/* === Mobile (≤600px): bar по центру, шире (calc на ширину viewport).
 * Важно: оставляем left:50% + translateX(-50%) (как на desktop) чтобы
 * переход collapsed ↔ expanded анимировал ТОЛЬКО ширину, не позицию.
 * Раньше было left:8;right:8 → при разворачивании bar ехал из центра
 * к левому краю (визуально хрень). */
@media (max-width: 600px) {
	.pc-compare-bar {
		bottom: 8px;
		width: calc(100vw - 16px);
		max-width: calc(100vw - 16px);
		padding: 10px 12px;
		border-radius: 12px;
	}

	.pc-compare-bar__inner {
		flex-direction: column;
		gap: 12px;
		align-items: stretch;
	}

	.pc-compare-bar__items {
		justify-content: center;
	}

	.pc-compare-bar__actions {
		justify-content: space-between;
		margin-left: 0;
	}

	.pc-compare-bar__cta {
		flex: 1;
		justify-content: center;
	}
}

/* === Если на странице есть chat floating button (qpc-fab) или cart toast —
   приподнимаем bar выше чтобы не перекрывал === */
body.qpc-chat-open .pc-compare-bar,
.pc-toast--visible ~ .pc-compare-bar {
	bottom: 90px;
}

/* ========================================================================
 * СТРАНИЦА /compare/ — таблица сравнения товаров
 * ======================================================================== */

.pc-compare-page {
	max-width: 1320px;
	margin: 40px auto;
	padding: 0 20px;
}

.pc-compare-page__lead {
	margin: 0;
	color: var(--pc-text-muted);
	font-size: 15px;
}

.pc-compare-page__toolbar {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.pc-compare-page__filter {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	user-select: none;
	font-size: 14px;
	color: var(--pc-text);
}

/* Кнопка «Очистить список» в toolbar — отдельная от bar-овой. */
.pc-compare-page__clear,
.entry-content .pc-compare-page__clear,
.woocommerce .pc-compare-page__clear {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--pc-text-muted) !important;
	border: 1px solid var(--pc-border) !important;
	cursor: pointer;
	font-size: 13px !important;
	font-weight: 500 !important;
	padding: 8px 16px !important;
	border-radius: 8px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

@media (hover: hover) {
	.pc-compare-page__clear:hover {
		color: var(--pc-text) !important;
		border-color: var(--pc-accent) !important;
	}
}

.pc-compare-page__clear.is-confirming,
.entry-content .pc-compare-page__clear.is-confirming {
	color: var(--pc-accent) !important;
	border-color: var(--pc-accent) !important;
	background: rgba(255, 42, 42, 0.08) !important;
	background-color: rgba(255, 42, 42, 0.08) !important;
	font-weight: 700 !important;
}

.pc-compare-page__filter input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	width: 38px;
	height: 22px;
	border-radius: 11px;
	background: var(--pc-bg-elevated);
	border: 1px solid var(--pc-border);
	cursor: pointer;
	transition: background 0.15s ease;
	margin: 0;
}

.pc-compare-page__filter input[type="checkbox"]::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pc-text-dim);
	transition: transform 0.18s ease, background 0.18s ease;
}

.pc-compare-page__filter input[type="checkbox"]:checked {
	background: var(--pc-accent);
	border-color: var(--pc-accent);
}

.pc-compare-page__filter input[type="checkbox"]:checked::after {
	transform: translateX(16px);
	background: #fff;
}

/* === Когда toggle включён (родитель имеет класс is-only-diff) — */
/*  скрываем строки/spec'и где значения одинаковы у всех товаров. === */
.pc-compare-page.is-only-diff .pc-compare-table__row--meta:not(.pc-compare-table__row--differs),
.pc-compare-page.is-only-diff .pc-compare-table__row--attr:not(.pc-compare-table__row--differs),
.pc-compare-page.is-only-diff .pc-compare-card__spec:not(.is-differs) {
	display: none;
}

/* === Empty state — компактная плашка по центру контейнера. */
.pc-compare-empty {
	text-align: center;
	padding: 60px 20px;
	background: var(--pc-bg-card);
	border: 1px dashed var(--pc-border);
	border-radius: 16px;
	max-width: 540px;
	margin: 40px auto;
}

.pc-compare-empty__icon {
	color: var(--pc-text-dim);
	margin-bottom: 16px;
}

.pc-compare-empty__title {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 700;
	color: var(--pc-text);
}

.pc-compare-empty__text {
	margin: 0 0 24px;
	color: var(--pc-text-muted);
	line-height: 1.55;
}

.pc-compare-empty__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.pc-compare-empty__actions .pc-btn {
	min-width: 200px;
}

@media (max-width: 480px) {
	.pc-compare-empty__actions .pc-btn {
		min-width: 0;
		flex: 1 1 100%;
	}
}

/* CTA-кнопка empty-state: Astra .entry-content a красит её таким же красным
 * как наш фон → текст не виден. Тройной селектор + !important. */
.pc-compare-empty .pc-btn,
.pc-compare-empty .pc-btn--primary,
.entry-content .pc-compare-empty .pc-btn,
.entry-content .pc-compare-empty .pc-btn--primary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 14px 32px !important;
	background: var(--pc-accent) !important;
	background-color: var(--pc-accent) !important;
	color: #fff !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 1px !important;
	line-height: 1.2 !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 14px -6px rgba(255, 42, 42, 0.55) !important;
	transition: background 0.15s ease, transform 0.15s ease !important;
}

@media (hover: hover) {
	.pc-compare-empty .pc-btn:hover,
	.entry-content .pc-compare-empty .pc-btn:hover {
		background: #e51c1c !important;
		background-color: #e51c1c !important;
		color: #fff !important;
		transform: translateY(-1px);
	}
}

/* === Удалили блок table-варианта — теперь только cards. === */

/* (старые table-стили product-cell удалены — карточки рендерятся через .pc-compare-card) */

/* Крестик-корзина (как в референсе — top right, без круга) */
.pc-compare-product__remove,
.entry-content .pc-compare-product__remove,
.woocommerce .pc-compare-product__remove {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border-radius: 6px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: var(--pc-text-muted) !important;
	border: 1px solid transparent !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: color 0.15s ease, border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

@media (hover: hover) {
	.pc-compare-product__remove:hover {
		color: var(--pc-accent) !important;
		border-color: var(--pc-accent) !important;
	}
}

.pc-compare-product__image {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	max-width: 180px;
	aspect-ratio: 1;
	background: var(--pc-bg-elevated);
	margin-bottom: 4px;
}

.pc-compare-product__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pc-compare-product__title {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--pc-text) !important;
	text-decoration: none !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (hover: hover) {
	.pc-compare-product__title:hover {
		color: var(--pc-accent) !important;
	}
}

/* Stock-индикатор внутри hero-карточки */
.pc-compare-product__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
	margin-top: 2px;
}

.pc-compare-product__stock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.pc-compare-product__stock--in {
	color: #3cb45a;
}

.pc-compare-product__stock--in .pc-compare-product__stock-dot {
	background: #3cb45a;
}

.pc-compare-product__stock--out {
	color: var(--pc-text-muted);
}

.pc-compare-product__stock--out .pc-compare-product__stock-dot {
	background: var(--pc-text-dim);
}

.pc-compare-product__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--pc-text);
	margin-top: 2px;
}

.pc-compare-product__price del {
	color: var(--pc-text-dim);
	font-weight: 500;
	font-size: 13px;
	margin-right: 8px;
}

.pc-compare-product__price ins {
	text-decoration: none;
	color: var(--pc-text);
}

/* CTA «В корзину» в hero-карточке — стили Astra .entry-content a съедают
 * текст красным на красном фоне. Тройной селектор + !important как у других CTA. */
.pc-compare-product__cta,
.entry-content .pc-compare-product__cta,
.woocommerce .pc-compare-product__cta,
.pc-compare-card__cta,
.entry-content .pc-compare-card__cta,
.woocommerce .pc-compare-card__cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	padding: 12px 18px !important;
	min-height: 44px !important;
	background: var(--pc-accent) !important;
	background-color: var(--pc-accent) !important;
	color: #fff !important;
	text-decoration: none !important;
	text-transform: uppercase !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: 0.8px !important;
	line-height: 1.2 !important;
	border: none !important;
	border-radius: 10px !important;
	box-shadow: 0 6px 14px -6px rgba(255, 42, 42, 0.55) !important;
	transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
	text-align: center;
}

/* ========================================================================
 * Блок сравнения в КОРЗИНЕ — аккордеон под cart-таблицей.
 * См. hook woocommerce_after_cart_table → pc_shop_compare_render_cart_block.
 * ======================================================================== */

.pc-cart-compare {
	margin: 24px 0;
	border-top: 1px solid var(--pc-border);
	padding-top: 20px;
}

/* Кнопка-toggle для аккордеона */
.pc-cart-compare__toggle,
.entry-content .pc-cart-compare__toggle,
.woocommerce .pc-cart-compare__toggle {
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	width: 100%;
	padding: 14px 18px !important;
	background: var(--pc-bg-card) !important;
	background-color: var(--pc-bg-card) !important;
	color: var(--pc-text) !important;
	border: 1px solid var(--pc-border) !important;
	border-radius: 10px !important;
	cursor: pointer;
	font-size: 14px !important;
	font-weight: 600 !important;
	text-align: left !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

@media (hover: hover) {
	.pc-cart-compare__toggle:hover {
		border-color: var(--pc-accent) !important;
		background: var(--pc-bg-elevated) !important;
	}
}

.pc-cart-compare__toggle-icon {
	display: inline-flex;
	color: var(--pc-accent);
}

.pc-cart-compare__toggle-label {
	flex: 1;
}

.pc-cart-compare__toggle-chevron {
	display: inline-flex;
	color: var(--pc-text-muted);
	transition: transform 0.2s ease;
}

.pc-cart-compare.is-open .pc-cart-compare__toggle-chevron {
	transform: rotate(180deg);
}

.pc-cart-compare.is-open .pc-cart-compare__toggle {
	border-color: var(--pc-accent) !important;
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* Раскрытая панель с карточками */
.pc-cart-compare__panel {
	padding: 24px 20px;
	background: var(--pc-bg-card);
	border: 1px solid var(--pc-accent);
	border-top: none;
	border-radius: 0 0 10px 10px;
	animation: pcCartCompareSlide 0.22s ease;
}

@keyframes pcCartCompareSlide {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* === Контекстная вариация cards: cart-блок всегда горизонтальный
 * scroll-snap слайдер. Если в корзине 4+ товаров flex не помещается во
 * всю ширину контейнера → карточки сжимаются и текст уезжает за края.
 * Решение — фиксированная ширина 300px + overflow-x с scroll-snap. */
.pc-compare-cards--cart {
	display: flex !important;
	gap: 14px !important;
	overflow-x: auto;
	overflow-y: visible;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding: 4px 4px 12px;
	scrollbar-color: var(--pc-border) transparent;
	scrollbar-width: thin;
}

.pc-compare-cards--cart::-webkit-scrollbar {
	height: 8px;
}
.pc-compare-cards--cart::-webkit-scrollbar-track {
	background: transparent;
}
.pc-compare-cards--cart::-webkit-scrollbar-thumb {
	background: var(--pc-border);
	border-radius: 4px;
}
.pc-compare-cards--cart::-webkit-scrollbar-thumb:hover {
	background: var(--pc-text-dim);
}

.pc-compare-cards--cart .pc-compare-card {
	flex: 0 0 300px !important;
	max-width: 300px !important;
	scroll-snap-align: start;
}

@media (max-width: 720px) {
	.pc-cart-compare__panel {
		padding: 16px 8px;
	}
	.pc-compare-cards--cart .pc-compare-card {
		flex: 0 0 85% !important;
		max-width: 380px !important;
	}
}

/* === Глобальные стили AJAX-состояний кнопки «В корзину» ===
 * Применяются ко ВСЕМ WC AJAX-кнопкам (на главной, в каталоге, в блог-блоке,
 * на странице compare) — везде где WC сам добавляет классы .loading и .added
 * во время и после успешного AJAX-запроса.
 *
 * Селекторы дублированы с .add_to_cart_button и .ajax_add_to_cart чтобы
 * поймать оба варианта (WC может ставить любой из них как основной маркер). */
.add_to_cart_button.loading,
.ajax_add_to_cart.loading,
.pc-compare-card__cta.loading,
.pc-builds .add_to_cart_button.loading,
.pc-blog-products .add_to_cart_button.loading {
	opacity: 0.7;
	pointer-events: none;
	cursor: wait;
}

/* «Добавлено» state — наша галочка ✓ после клика на «В корзину».
 *
 * Важно: WC при AJAX-добавлении ставит класс `.added` на кнопку и через
 * собственный CSS вставляет ::after с символом `\e017` (checkmark из
 * шрифта WooCommerce). Этот шрифт мы НЕ подгружаем — поэтому без явного
 * font-family: inherit браузер пытается отрисовать ' ✓' в WC-шрифте,
 * который этого символа не содержит, и показывает mojibake `ÂŒ"`.
 *
 * В V1 (старый рендер карточки) это маскировалось Astra Pro overlay-кнопкой
 * `ast-on-card-button`, которая перехватывала клики первой и обычная WC-кнопка
 * не получала `.added`. В V2 (Phase 1 ухода от Astra) overlay убран, клик
 * идёт прямо на WC-кнопку → нужен явный font-family для нашего псевдо-элемента.
 */
.add_to_cart_button.added::after,
.ajax_add_to_cart.added::after,
.pc-compare-card__cta.added::after {
	content: ' ✓' !important;
	margin-left: 4px;
	font-weight: 800;
	font-family: inherit !important;
}

/* WC после успешного AJAX add_to_cart автоматически вставляет под кнопкой
 * ссылку <a class="added_to_cart">Перейти в корзину</a> — это раздвигает
 * карточки и портит вёрстку. Прячем глобально (мы показываем свой тост
 * через initCartToast() в main.js). */
.added_to_cart,
.added_to_cart.wc-forward,
.entry-content .added_to_cart,
.pc-compare-card .added_to_cart,
.pc-blog-products .added_to_cart,
.woocommerce ul.products .added_to_cart {
	display: none !important;
}

@media (hover: hover) {
	.pc-compare-product__cta:hover,
	.entry-content .pc-compare-product__cta:hover,
	.pc-compare-card__cta:hover,
	.entry-content .pc-compare-card__cta:hover {
		background: #e51c1c !important;
		background-color: #e51c1c !important;
		color: #fff !important;
		transform: translateY(-1px);
	}
}

/* Прочерк "—" для пустых значений в строках характеристик. */
.pc-compare-table__dash {
	color: var(--pc-text-dim);
}

/* Phase 7: compare-карточки уважают CSS-переменные пресета (data-preset атрибут
 * добавляется в inc/product-compare.php).
 *
 * Важно: fallback на родные переменные темы (--pc-bg-card, --pc-accent) ОБЯЗАТЕЛЕН —
 * без него `var(--pc-card-bg)` при undefined даёт invalid value → computed как initial
 * (transparent), и карточка теряет фон → видно body. */
.pc-compare-card[data-preset] {
	background: var(--pc-card-bg, var(--pc-bg-card));
}
.pc-compare-card[data-preset] .pc-compare-card__cta {
	background: var(--pc-card-accent, var(--pc-accent));
}

/* === Единый layout карточек: на desktop рядом в строку (равные колонки),
 *      на mobile горизонтальный scroll-snap (один товар на ширину экрана).
 *      Inline-стиль --pc-compare-cols у .pc-compare-cards задаёт число товаров. === */
.pc-compare-cards {
	display: flex;
	gap: 18px;
	align-items: stretch;
	/* Когда товаров мало (1-2) — не растягиваем во всю ширину контейнера,
	 * иначе одна карточка распухает на 1320px = "гигантизм". */
	justify-content: flex-start;
}

.pc-compare-cards .pc-compare-card {
	flex: 1 1 0;
	min-width: 0;
	max-width: 340px; /* предел даже когда товар один */
}

/* Подсказка над списком карточек когда товар один */
.pc-compare-page__hint {
	margin: 0 0 18px;
	padding: 12px 16px;
	background: rgba(255, 180, 60, 0.06);
	border-left: 3px solid var(--pc-accent-warm, #ffb43c);
	border-radius: 4px;
	color: var(--pc-text-muted);
	font-size: 14px;
}

/* Placeholder-карточка «Добавить сборку» рядом с реальной карточкой,
 * когда в сравнении 1 товар. Компактная dashed-рамка — НЕ растягивается
 * по высоте до товарной карточки, а остаётся sticky сверху (на уровне hero). */
.pc-compare-card--placeholder {
	background: transparent !important;
	border: 2px dashed var(--pc-border) !important;
	border-radius: 14px;
	padding: 0;
	align-self: flex-start; /* не растягиваемся stretch'ом родителя */
	transition: border-color 0.18s ease, background 0.18s ease;
	position: sticky;
	top: 20px;
}

.pc-compare-card__placeholder-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 48px 24px;
	color: var(--pc-text-muted) !important;
	text-decoration: none !important;
	text-align: center;
	transition: color 0.18s ease;
}

@media (hover: hover) {
	.pc-compare-card--placeholder:hover {
		border-color: var(--pc-accent) !important;
		background: rgba(255, 42, 42, 0.03) !important;
	}
	.pc-compare-card--placeholder:hover .pc-compare-card__placeholder-link {
		color: var(--pc-text) !important;
	}
}

.pc-compare-card__placeholder-icon {
	color: var(--pc-text-dim);
	transition: color 0.18s ease;
}

.pc-compare-card--placeholder:hover .pc-compare-card__placeholder-icon {
	color: var(--pc-accent);
}

.pc-compare-card__placeholder-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--pc-text);
}

.pc-compare-card__placeholder-text {
	font-size: 13px;
	line-height: 1.45;
	max-width: 240px;
}

@media (max-width: 720px) {
	.pc-compare-page {
		margin: 24px auto;
		padding: 0;
	}

	.pc-compare-page__lead,
	.pc-compare-page__toolbar {
		padding: 0 12px;
	}

	.pc-compare-cards {
		gap: 12px;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 4px 16px 20px;
		scroll-padding-left: 16px;
		scrollbar-width: none;
	}

	.pc-compare-cards::-webkit-scrollbar {
		display: none;
	}

	.pc-compare-cards .pc-compare-card {
		flex: 0 0 90%;
		max-width: 420px;
		scroll-snap-align: start;
	}
}

.pc-compare-card {
	position: relative;
	background: var(--pc-bg-card);
	border: 1px solid var(--pc-border);
	border-radius: 14px;
	padding: 16px;
}

/* Head: на desktop — вертикально (картинка сверху, инфо ниже).
 *       на mobile — двухколоночно как было (компактнее). */
.pc-compare-card__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--pc-border);
	margin-bottom: 14px;
}

@media (max-width: 720px) {
	.pc-compare-card__head {
		display: grid;
		grid-template-columns: 80px 1fr;
		gap: 14px;
		align-items: flex-start;
	}
}

.pc-compare-card__remove,
.entry-content .pc-compare-card__remove,
.woocommerce .pc-compare-card__remove {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	width: 26px !important;
	height: 26px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	background: var(--pc-bg-elevated) !important;
	background-color: var(--pc-bg-elevated) !important;
	color: var(--pc-text) !important;
	border: 1px solid var(--pc-border) !important;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	z-index: 2;
	transition: background 0.15s ease, color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none !important;
}

@media (hover: hover) {
	.pc-compare-card__remove:hover {
		background: var(--pc-accent) !important;
		background-color: var(--pc-accent) !important;
		color: #fff !important;
		border-color: var(--pc-accent) !important;
	}
}

.pc-compare-card__image {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 1;
	border-radius: 10px;
	overflow: hidden;
	background: var(--pc-bg-elevated);
	flex-shrink: 0;
}

@media (max-width: 720px) {
	.pc-compare-card__image {
		width: 80px;
		height: 80px;
		aspect-ratio: auto;
	}
}

.pc-compare-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pc-compare-card__info {
	min-width: 0; /* для нормального wrap */
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.pc-compare-card__title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--pc-text) !important;
	text-decoration: none !important;
	padding-right: 30px; /* чтобы не лез под крестик */
}

.pc-compare-card__stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 500;
}

.pc-compare-card__stock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.pc-compare-card__stock--in {
	color: #3cb45a;
}

.pc-compare-card__stock--in .pc-compare-card__stock-dot {
	background: #3cb45a;
}

.pc-compare-card__stock--out {
	color: var(--pc-text-muted);
}

.pc-compare-card__stock--out .pc-compare-card__stock-dot {
	background: var(--pc-text-dim);
}

.pc-compare-card__price {
	font-size: 18px;
	font-weight: 700;
	color: var(--pc-accent);
}

.pc-compare-card__price del {
	color: var(--pc-text-dim);
	font-weight: 500;
	font-size: 13px;
	margin-right: 6px;
}

.pc-compare-card__price ins {
	text-decoration: none;
}

.pc-compare-card__cta {
	margin-top: 4px;
}

/* === Характеристики в карточке (dl/dt/dd) === */
.pc-compare-card__specs {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pc-compare-card__spec {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 12px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	/* Align spec rows across cards: each row минимум 64px, до 96px растёт по содержимому.
	 * Это даёт горизонтальную консистенцию между несколькими карточками. */
	min-height: 64px;
}

.pc-compare-card__spec:last-child {
	border-bottom: none;
}

/* Дополнительная страховка для длинных значений — обрезка с многоточием */
.pc-compare-card__spec-value {
	overflow-wrap: anywhere;
	hyphens: auto;
}

.pc-compare-card__spec-label {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--pc-text-muted);
	line-height: 1.4;
}

.pc-compare-card__spec-value {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--pc-text);
	line-height: 1.4;
}

.pc-compare-card__spec.is-differs {
	background: rgba(255, 180, 60, 0.04);
	margin: 0 -8px;
	padding-left: 8px;
	padding-right: 8px;
	border-radius: 6px;
	border-bottom-color: rgba(255, 180, 60, 0.08);
}

.pc-compare-card__spec.is-differs .pc-compare-card__spec-label {
	border-left: 3px solid var(--pc-accent);
	padding-left: 8px;
	margin-left: -11px;
}

.pc-compare-card__spec.is-differs .pc-compare-card__spec-value {
	font-weight: 600;
}

/* На очень узких — лейбл + значение в столбик */
@media (max-width: 380px) {
	.pc-compare-card__spec {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.pc-compare-card__spec.is-differs .pc-compare-card__spec-label {
		margin-left: -3px;
	}
}