/* Порівняння товарів. Дизайн .compare* уже є в main.min.css. Тут — лише те, чого у вёрстці
   немає: активна кнопка «до порівняння», стан «список порожній» і курсор перетягування
   таблиці. Фронтовий CSS не чіпаємо. */

/* Товар уже в списку: JS вішає .is-active (js-compare-toggle у картці та на сторінці товару),
   але у вёрстці цього стану немає. Три стани мають відрізнятись візуально, інакше клік
   під курсором нічого не змінює: наведення — м'яка підсвітка, «у порівнянні» — заливка. */
.product__nav-compare:not(.is-active):hover,
.core__nav-btn.js-compare-toggle:not(.is-active):hover {
	background: #fdeaeb;
	color: #c2272d;
}

.product__nav-compare:not(.is-active):hover svg,
.core__nav-btn.js-compare-toggle:not(.is-active):hover svg {
	color: #c2272d;
}

.product__nav-btn.is-active,
.core__nav-btn.is-active {
	background: #c2272d;
	color: #fff;
}

.product__nav-btn.is-active svg,
.core__nav-btn.is-active svg {
	color: #fff;
}

/* наведення на вже додану — темніше, щоб «прибрати» читалось як окрема дія */
.product__nav-btn.is-active:hover,
.core__nav-btn.is-active:hover {
	background: #9d1f24;
}

/* миттєва віддача на клік (клас знімається на animationend) */
@keyframes miner-compare-pop {
	0% { transform: scale(1); }
	40% { transform: scale(0.86); }
	100% { transform: scale(1); }
}

.js-compare-toggle.is-pop {
	animation: miner-compare-pop 0.35s ease;
}

/* лічильник у шапці підстрибує, коли список змінився */
@keyframes miner-compare-bump {
	0% { transform: scale(1); }
	35% { transform: scale(1.4); }
	100% { transform: scale(1); }
}

.js-compare-count.is-bump {
	display: inline-block;
	animation: miner-compare-bump 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
	.js-compare-toggle.is-pop,
	.js-compare-count.is-bump {
		animation: none;
	}
}

.compare__empty {
	padding: 40px 0 20px;
	text-align: center;
}

.compare__empty p {
	margin-bottom: 20px;
	color: #6c6c6c;
}

.compare__empty .btn {
	display: inline-flex;
}

.compare__box.js_drag_scroll {
	cursor: grab;
}

.compare__box.is-drag {
	cursor: grabbing;
	user-select: none;
}

.compare__table-empty {
	color: #cbcfd5;
}

/* .compare__reset у вёрстці має display:flex, який перебиває браузерне [hidden] */
.compare__reset[hidden] {
	display: none;
}