/* ---------------------------------------------------------------------------
 * Избранное — премиальная версия (2026).
 *
 * Разметка и логика — порт темы altmedpro (alt.prom-digital.ru), поверх которой
 * добавлен продакшн-полиш: моушн-токены, микро-анимации сердечка с burst-откликом,
 * тосты с отменой действия, вход/выход карточек, View Transitions и FLIP-перекомпоновка,
 * поддержка prefers-reduced-motion и полная доступность.
 *
 * Моушн-токены (по гайдам motion UX 2026):
 *   --ms-motion-tap    120ms — отклик на нажатие (NN/g: обратная связь < 0.1 c)
 *   --ms-motion-fast   180ms — быстрые переключения (цвет, прозрачность)
 *   --ms-motion-base   300ms — смена состояния/появление
 *   --ms-motion-spring 620ms — «пружина» с перелётом (y > 1 в cubic-bezier)
 *   --ms-motion-exit   220ms — выход быстрее входа (асимметрия — правило 2026)
 *
 * Все анимации — только на transform/opacity (композитный слой, без reflow).
 * ------------------------------------------------------------------------- */

.ms-favorites-page,
.favorites-widget,
.ms-product-fav {
	--ms-motion-tap: 120ms cubic-bezier(.2, .8, .3, 1);
	--ms-motion-fast: 180ms cubic-bezier(.22, .61, .36, 1);
	--ms-motion-base: 300ms cubic-bezier(.22, .61, .36, 1);
	--ms-motion-spring: 620ms cubic-bezier(.16, 1.12, .28, 1);
	--ms-motion-exit: 220ms cubic-bezier(.4, 0, 1, 1);
}

/* Кнопка «В избранное» плагина wcboost-wishlist отключена: избранным
   управляет тема (на alt.prom-digital.ru плагина избранного нет). */
.wcboost-wishlist-button,
.wcboost-wishlist-loop-button,
.wcboost-wishlist-single-button { display: none !important; }

/* --- Сердечко ------------------------------------------------------------- */

.favorite-heart {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;              /* тач-цель 44×44 при иконке 24×24 */
	height: 44px;
	margin: -10px;
	padding: 10px;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.favorite-heart__box {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ms-ink-3, #45565b);
	transition: transform var(--ms-motion-tap), color var(--ms-motion-fast);
}

.favorite-heart__icon {
	width: 24px;
	height: 24px;
	display: block;
	overflow: visible;
	transition: transform var(--ms-motion-fast);
}

.favorite-heart__icon path {
	transition: fill var(--ms-motion-fast), stroke var(--ms-motion-fast);
}

/* Наведение: лёгкий «вдох» иконки + акцент */
.favorite-heart:hover .favorite-heart__box { transform: scale(1.08); }

.favorite-heart:hover .favorite-heart__box,
.favorite-heart:hover .favorite-heart__box .favorite-heart__icon path { color: var(--ms-accent, #28afb1); }

.favorite-heart:hover .favorite-heart__icon path {
	stroke: var(--ms-accent, #28afb1);
	fill: color-mix(in srgb, var(--ms-accent, #28afb1) 14%, transparent);
}

/* Нажатие: пружинное сжатие */
.favorite-heart:active .favorite-heart__box { transform: scale(.86); }

/* Выбранное состояние: залитое сердце акцентом */
.favorite-heart.is-active .favorite-heart__box,
.favorite-heart.active .favorite-heart__box { color: var(--ms-accent, #28afb1); }

.favorite-heart.is-active .favorite-heart__icon path,
.favorite-heart.active .favorite-heart__icon path {
	stroke: var(--ms-accent, #28afb1);
	fill: var(--ms-accent, #28afb1);
}

.favorite-heart:focus-visible { outline: none; }

.favorite-heart:focus-visible .favorite-heart__box::after {
	content: '';
	position: absolute;
	inset: -7px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px var(--ms-bg, #fff), 0 0 0 4px var(--ms-accent, #28afb1);
}

/* Burst: кольцо + россыпь точек (только transform/opacity) */
.favorite-heart__burst {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.favorite-heart__burst::before,
.favorite-heart__burst::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 4px;
	height: 4px;
	margin: -2px 0 0 -2px;
	border-radius: 50%;
	opacity: 0;
}

/* россыпь из шести точек */
.favorite-heart__burst::before {
	background: var(--ms-accent, #28afb1);
	box-shadow:
		0 -11px 0 -.5px var(--ms-accent, #28afb1),
		0 11px 0 -.5px var(--ms-accent, #28afb1),
		-11px 0 0 -.5px var(--ms-accent, #28afb1),
		11px 0 0 -.5px var(--ms-accent, #28afb1),
		-8px -8px 0 -1px var(--ms-accent, #28afb1),
		8px 8px 0 -1px var(--ms-accent, #28afb1);
	transform: scale(.2);
}

/* кольцо */
.favorite-heart__burst::after {
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 2px solid var(--ms-accent, #28afb1);
	transform: scale(.35);
}

/* Запуск анимации — класс is-just-added, который ставит JS */
.favorite-heart.is-just-added .favorite-heart__icon {
	animation: ms-fav-pop var(--ms-motion-spring) both;
}

.favorite-heart.is-just-added .favorite-heart__burst::before {
	animation: ms-fav-dots var(--ms-motion-spring) both;
}

.favorite-heart.is-just-added .favorite-heart__burst::after {
	animation: ms-fav-ring var(--ms-motion-spring) both;
}

@keyframes ms-fav-pop {
	0% { transform: scale(.6); }
	38% { transform: scale(1.3); }
	62% { transform: scale(.94); }
	82% { transform: scale(1.04); }
	100% { transform: scale(1); }
}

@keyframes ms-fav-dots {
	0% { opacity: 0; transform: scale(.2); }
	22% { opacity: 1; }
	100% { opacity: 0; transform: scale(1.9); }
}

@keyframes ms-fav-ring {
	0% { opacity: 0; transform: scale(.35); }
	25% { opacity: .5; }
	100% { opacity: 0; transform: scale(1.5); }
}

/* --- Счётчик в шапке: пружинный «прыжок» при изменении -------------------- */

.mini-item-counter.is-bumping {
	animation: ms-fav-counter-bump 560ms cubic-bezier(.16, 1.12, .28, 1);
}

@keyframes ms-fav-counter-bump {
	0% { transform: scale(1); }
	30% { transform: scale(1.45); }
	55% { transform: scale(.96); }
	75% { transform: scale(1.06); }
	100% { transform: scale(1); }
}

.ms-hdr__extra.extra-wishlist.is-pulsing .extra-icon,
.ms-hdr__extras .menu-item-wishlist.is-pulsing .extra-icon {
	animation: ms-fav-icon-pulse 700ms cubic-bezier(.16, 1.12, .28, 1);
}

/* --- Панель над списком: количество и очистка ----------------------------- */

.ms-fav-toolbar {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.ms-fav-toolbar__count {
	font-size: 14px;
	color: var(--ms-ink-2);
}

.ms-fav-toolbar__count b {
	font-size: 16px;
	font-weight: 700;
	color: var(--ms-ink);
}

.ms-fav-toolbar__clear {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 0 13px;
	border: 1px solid var(--ms-line);
	border-radius: 999px;
	background: var(--ms-bg);
	color: var(--ms-ink-2);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: color var(--ms-motion-fast), border-color var(--ms-motion-fast),
		background var(--ms-motion-fast), transform var(--ms-motion-tap);
}

.ms-fav-toolbar__clear:hover {
	color: #b3261e;
	border-color: color-mix(in srgb, #b3261e 34%, transparent);
	background: color-mix(in srgb, #b3261e 6%, var(--ms-bg));
}

.ms-fav-toolbar__clear:active { transform: scale(.97); }

/* Панель целиком скрывается, когда избранное пусто (JS ставит hidden). */
.ms-fav-toolbar[hidden] { display: none !important; }

/* Второй шаг подтверждения очистки */
.ms-fav-toolbar__clear.is-confirming {
	color: #b3261e;
	border-color: color-mix(in srgb, #b3261e 40%, transparent);
	background: color-mix(in srgb, #b3261e 8%, var(--ms-bg));
}

.ms-fav-toolbar__clear:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 2px;
}

/* --- Тосты: подтверждение действия и «Вернуть» ---------------------------- */

.ms-fav-toasts {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9998;
	display: flex;
	flex-direction: column;
	gap: 10px;
	pointer-events: none;
}

.ms-fav-toast {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 272px;
	max-width: min(92vw, 390px);
	padding: 12px 12px 13px 13px;
	overflow: hidden;
	pointer-events: auto; /* контейнер .ms-fav-toasts отключён, тост — кликабелен */
	background: var(--ms-bg);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r);
	box-shadow: 0 26px 54px -22px rgba(16, 40, 44, .36), var(--ms-sh-1);
	opacity: 0;
	transform: translateY(16px) scale(.97);
	transition: transform var(--ms-motion-base), opacity var(--ms-motion-fast);
}

.ms-fav-toast.is-in { opacity: 1; transform: none; }

.ms-fav-toast.is-out {
	opacity: 0;
	transform: translateY(10px) scale(.98);
	transition: transform var(--ms-motion-exit), opacity var(--ms-motion-exit);
}

.ms-fav-toast__icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--ms-accent-soft);
	color: var(--ms-accent-text);
}

.ms-fav-toast--info .ms-fav-toast__icon {
	background: var(--ms-bg-3);
	color: var(--ms-ink-2);
}

.ms-fav-toast--removed .ms-fav-toast__icon {
	background: color-mix(in srgb, var(--ms-warn) 16%, var(--ms-bg));
	color: #8a6100;
}

.ms-fav-toast__text {
	flex: 1 1 auto;
	font-size: 14px;
	line-height: 1.35;
	color: var(--ms-ink);
}

.ms-fav-toast__action {
	appearance: none;
	flex: 0 0 auto;
	padding: 7px 8px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--ms-accent-text);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	transition: background var(--ms-motion-fast), color var(--ms-motion-fast);
}

.ms-fav-toast__action:hover {
	color: var(--ms-accent-d);
	background: var(--ms-accent-soft);
}

.ms-fav-toast__close {
	appearance: none;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ms-ink-2);
	font: inherit;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--ms-motion-fast), color var(--ms-motion-fast);
}

.ms-fav-toast__close:hover {
	background: var(--ms-bg-3);
	color: var(--ms-ink);
}

.ms-fav-toast__progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, var(--ms-accent), var(--ms-accent-d));
	transform-origin: left center;
	animation: ms-fav-toast-progress var(--ms-fav-dur, 4200ms) linear forwards;
}

.ms-fav-toast.is-paused .ms-fav-toast__progress { animation-play-state: paused; }

@keyframes ms-fav-toast-progress {
	from { transform: scaleX(1); }
	to { transform: scaleX(0); }
}

/* --- Пустое состояние ---------------------------------------------------- */

.favorites-empty {
	animation: ms-fav-rise 420ms cubic-bezier(.22, .61, .36, 1) both;
}

.favorites-empty__icon {
	display: grid;
	place-items: center;
	width: 78px;
	height: 78px;
	margin: 0 auto 4px;
	border-radius: 50%;
	background: var(--ms-accent-soft);
	color: var(--ms-accent);
}

.favorites-empty__title {
	font-family: var(--ms-font-head);
	font-size: 24px;
	letter-spacing: -.01em;
}

.favorites-empty .ms-empty__actions .ms-btn { min-width: 208px; justify-content: center; }

@keyframes ms-fav-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

/* --- Сетка и карточки ----------------------------------------------------- */

/* Избранное — листинг: страница занимает всю ширину контейнера темы (не 980px
   узкой колонки), поэтому карточки дышат, а не сжимаются в три узкие колонки. */
.ms-favorites-layout {
	grid-template-columns: minmax(0, 1fr);
}

.ms-favorites-layout .ms-layout__main--single {
	max-width: none;
}

.favorites-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	width: 100%;
}

/* Третья колонка — только когда карточке хватает ширины (~360px+). */
@media (min-width: 1200px) {
	.favorites-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.favorite-item {
	position: relative;
	display: flex;
	height: 100%;
	padding: 15px;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--ms-bg);
	border: 1px solid var(--ms-line);
	border-radius: var(--ms-r);
	box-shadow: 0 3px 10px rgba(16, 40, 44, .05);
	transition: transform var(--ms-motion-base), box-shadow var(--ms-motion-base),
		border-color var(--ms-motion-base), opacity var(--ms-motion-base);
}

.favorite-item:hover {
	transform: translateY(-4px);
	border-color: var(--ms-line-2);
	box-shadow: 0 22px 38px -26px rgba(16, 40, 44, .45), var(--ms-sh-1);
}

.favorite-item.is-removing { pointer-events: none; }

/* Каскадное появление карточек (класс .is-visible ставит JS) */
.favorites-grid[data-anim="on"] .favorite-item {
	opacity: 0;
	transform: translateY(16px);
}

.favorites-grid[data-anim="on"] .favorite-item.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity 420ms cubic-bezier(.22, .61, .36, 1) var(--ms-fav-delay, 0ms),
		transform 420ms cubic-bezier(.22, .61, .36, 1) var(--ms-fav-delay, 0ms),
		border-color var(--ms-motion-base), box-shadow var(--ms-motion-base);
}

/* Изображение товара */
.favorite-item__media {
	width: 100px;
	min-width: 100px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 15px;
	background: var(--ms-bg-2);
	border-radius: var(--ms-r-sm);
	overflow: hidden;
}

.favorite-item__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: transform var(--ms-motion-base);
}

.favorite-item:hover .favorite-item__media img { transform: scale(1.07); }

/* В широких карточках (три колонки) превью крупнее — пропорции ровнее. */
@media (min-width: 1200px) {
	.favorite-item__media {
		width: 132px;
		min-width: 132px;
		height: 132px;
		margin-right: 18px;
	}
}

/* Детали товара */
.favorite-item .product-details {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-width: 0;
	padding-right: 36px; /* крестик не наезжает на текст */
}

/* Заголовок карточки — h2: иерархия страницы h1 → h2 (без пропуска уровней). */
.favorite-item__title {
	margin: 0 0 8px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.favorite-item__title-link {
	color: var(--ms-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--ms-accent-text), var(--ms-accent-text));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1.5px;
	transition: color var(--ms-motion-fast), background-size var(--ms-motion-base);
}

.favorite-item__title-link:hover {
	color: var(--ms-accent-text);
	background-size: 100% 1.5px;
}

.favorite-item .product-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
	font-size: 13px;
	color: var(--ms-ink-2);
}

.favorite-item .product-sku,
.favorite-item .stock { font-weight: 500; }

/* Цвета статуса подобраны под контраст ≥ 4.5:1 на белом (WCAG AA) */
.favorite-item .stock.in-stock { color: #157347; }
.favorite-item .stock.out-of-stock { color: #b3261e; }
.favorite-item .stock.on-backorder { color: #8a6100; }

.favorite-item .product-brand {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ms-ink-2);
}

.favorite-item .product-price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
}

/* Сердечко и «В корзину» — единый блок действий: при нехватке ширины он
   переносится целиком и остаётся прижатым вправо, а не «разваливается». */
.favorite-item__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.favorite-item .product-price {
	font-family: var(--ms-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--ms-ink);
}

.favorite-item .product-price del {
	margin-right: 6px;
	font-size: .78em;
	font-weight: 400;
	color: var(--ms-ink-2);
}

.favorite-item .product-price ins { text-decoration: none; }

/* Бейдж скидки */
.favorite-item__sale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 3;
	padding: 3px 9px;
	border-radius: 999px;
	background: #b94136;
	background: color-mix(in srgb, var(--ms-sale) 88%, #000);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
	box-shadow: 0 6px 14px -6px rgba(16, 40, 44, .6);
	animation: ms-fav-pop-in 380ms cubic-bezier(.16, 1.12, .28, 1) both;
}

/* Кнопка добавления в корзину (градиент и поведение — как в оригинале) */
.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
	position: relative;
	display: inline-block;
	box-sizing: border-box;
	padding: .5em 1em !important;
	border: none !important;
	border-radius: 3px !important;
	overflow: hidden;
	background: linear-gradient(90deg,
		var(--ms-fav-btn-1, var(--ms-accent, #28afb1)) 0%,
		var(--ms-fav-btn-1, var(--ms-accent, #28afb1)) 30%,
		var(--ms-fav-btn-2, var(--ms-accent-d, #1f9193)) 80%,
		var(--ms-fav-btn-2, var(--ms-accent-d, #1f9193)) 100%) !important;
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .5px;
	white-space: nowrap; /* «В корзину» не рвётся по слогам в узкой карточке */
	text-align: center;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3) !important;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2) !important;
	transition: transform var(--ms-motion-fast), box-shadow var(--ms-motion-fast),
		filter var(--ms-motion-fast), background-color var(--ms-motion-fast) !important;
}

.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover {
	filter: brightness(1.07);
	transform: translateY(-2px);
	box-shadow: 0 6px 14px -6px rgba(16, 40, 44, .5) !important;
}

.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart:active {
	transform: translateY(1px);
	filter: brightness(.94);
}

.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart:focus-visible {
	outline: 2px solid var(--ms-accent-text);
	outline-offset: 2px;
}

/* Блик, пробегающий по кнопке при наведении */
.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	z-index: 1;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent);
	transition: left 560ms cubic-bezier(.22, .61, .36, 1);
}

.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart:hover::after { left: 100%; }

.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart .text {
	position: relative;
	z-index: 2;
}

.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 6px;
	vertical-align: middle;
	position: relative;
	z-index: 2;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>') center/contain no-repeat;
}

/* Состояние «добавлено»: зелёная кнопка с галочкой (1.6 с, ставит JS) */
.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart.is-added {
	background: #157347 !important;
	box-shadow: 0 8px 18px -10px rgba(21, 115, 71, .75) !important;
}

.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart.is-added::before {
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5 9.5 18 20 6.5"/></svg>') center/contain no-repeat;
}

.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 3px solid rgba(255, 255, 255, .3);
	border-top: 3px solid #fff;
	border-radius: 50%;
	animation: ms-fav-spin .8s linear infinite;
	z-index: 3;
}

@keyframes ms-fav-spin {
	to { transform: rotate(360deg); }
}

/* Крестик «убрать из избранного» */
.favorite-remove {
	position: absolute !important;
	top: 10px !important;
	right: 10px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 28px !important;
	height: 28px !important;
	min-width: 28px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--ms-line) !important;
	border-radius: 50% !important;
	background: var(--ms-bg) !important;
	box-shadow: 0 1px 4px rgba(16, 40, 44, .12) !important;
	color: #9aa8ab !important;
	font-size: 12px !important;
	line-height: 1 !important;
	cursor: pointer !important;
	z-index: 4 !important;
	transition: color var(--ms-motion-fast), border-color var(--ms-motion-fast),
		box-shadow var(--ms-motion-fast), transform var(--ms-motion-tap) !important;
}

.favorite-remove svg { display: block; width: 11px; height: 11px; }

.favorite-remove:hover {
	color: #b3261e !important;
	border-color: #f0c3c0 !important;
	box-shadow: 0 3px 10px -2px rgba(179, 38, 30, .3) !important;
	transform: scale(1.08);
}

.favorite-remove:active { transform: scale(.94); }

.favorite-remove:focus-visible {
	outline: 2px solid var(--ms-accent) !important;
	outline-offset: 2px;
}

/* --- Плавная перекомпоновка списка (View Transitions API) ----------------- */

::view-transition-group(*) { animation-duration: 320ms; }

/* --- Скрытая область объявлений для скринридеров -------------------------- */

.ms-fav-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@keyframes ms-fav-pop-in {
	from { opacity: 0; transform: scale(.7); }
	to { opacity: 1; transform: scale(1); }
}

/* --- Адаптивность -------------------------------------------------------- */

@media (max-width: 1024px) {
	.favorites-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
	.favorites-grid { grid-template-columns: 1fr; }

	.favorite-item { padding: 12px; }

	.favorite-item__media {
		width: 90px;
		min-width: 90px;
		height: 90px;
		margin-right: 12px;
	}

	.favorite-item__title { font-size: 15px; }
	.favorite-item .product-price { font-size: 16px; }

	/* Тосты — во всю ширину снизу, с учётом «безопасной зоны» iPhone */
	.ms-fav-toasts {
		left: 12px;
		right: 12px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
	}

	.ms-fav-toast {
		width: 100%;
		max-width: none;
		min-width: 0;
	}
}

@media (max-width: 480px) {
	.favorite-item { padding: 10px; }

	.favorite-item__media {
		width: 80px;
		min-width: 80px;
		height: 80px;
		margin-right: 10px;
	}

	.favorite-item__title { font-size: 14px; }
	.favorite-item .product-meta { font-size: 12px; }
	.favorite-item .product-price { font-size: 15px; }

	.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart {
		padding: .4em .8em !important;
		font-size: 13px !important;
	}

	.favorites-grid .button.product_type_simple.add_to_cart_button.ajax_add_to_cart::before {
		width: 14px;
		height: 14px;
		margin-right: 4px;
	}

	.favorites-empty__title { font-size: 20px; }
}

/* --- Уважение к системной настройке «уменьшить движение» ------------------
 * Правило 2026: у каждой анимации есть reduced-вариант. Здесь движение
 * сводится к мгновенной смене состояния, прогресс-бар тоста скрывается
 * (автозакрытие продолжает работать — таймер в JS, не в анимации). */

@media (prefers-reduced-motion: reduce) {
	.favorite-heart,
	.favorite-heart *,
	.favorite-heart *::before,
	.favorite-heart *::after,
	.mini-item-counter,
	.favorites-widget *,
	.ms-favorites-page *,
	.ms-favorites-page *::before,
	.ms-favorites-page *::after,
	.ms-fav-toast,
	.ms-fav-toast * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.favorite-heart:hover .favorite-heart__box,
	.favorite-heart:active .favorite-heart__box { transform: none; }

	.favorites-grid[data-anim="on"] .favorite-item {
		opacity: 1;
		transform: none;
	}

	.favorite-item:hover { transform: none; }
	.favorite-item:hover .favorite-item__media img { transform: none; }
	.favorite-item__sale { animation: none; }
	.favorite-item__title-link { background-size: 0 0; }
	.favorite-item__title-link:hover { text-decoration: underline; }

	.ms-fav-toast__progress { display: none; }
	.ms-fav-toast { opacity: 1; transform: none; }
}

/* --- Обёртка сердечка на странице товара ---------------------------------- */

.ms-product-fav {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0 0 0 12px;
	color: var(--ms-ink-3, #45565b);
}

/* --- Виджет «Избранное» (шорткод [favorites_widget]) ---------------------- */

.favorites-widget {
	display: flex;
	align-items: center;
	gap: 15px;
}

.favorites-link {
	position: relative;
	display: flex;
	align-items: center;
	text-decoration: none;
	color: inherit;
}

.favorites-link:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.favorites-link svg {
	width: 24px;
	height: 24px;
	transition: transform var(--ms-motion-fast), color var(--ms-motion-fast);
}

.favorites-link:hover svg { transform: scale(1.1); }
.favorites-link:hover svg path { stroke: var(--ms-accent, #28afb1); }

.favorites-count {
	position: absolute;
	top: -8px;
	right: -10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ms-accent, #28afb1);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

.favorites-count.is-zero { display: none; }

.favorites-count.is-bumping {
	animation: ms-fav-counter-bump 560ms cubic-bezier(.16, 1.12, .28, 1);
}
