/**
 * CalmFlow Savoy UX Kit — Модуль 3: Список бажань.
 *
 * Свідомо БЕЗ backdrop-filter, БЕЗ transform і БЕЗ появи-зникнення на наведення:
 * саме вони давали «рваний ореол» навколо кола, посмикування й ефект «іконка
 * лишилась видимою, хоч курсор пішов». Тепер сердечко просто ЗАВЖДИ видиме, а на
 * наведення змінюється лише КОЛІР (нічого не рухається й не перемальовується).
 *
 * Кольори — з налаштувань плагіна (інлайн-змінні), з фолбеком на палітру теми.
 */

/* Рядок «назва товару + сердечко праворуч» — точно як у Savoy
   (`.nm-shop-loop-details` там теж тримає заголовок і кнопку в одному рядку). */
.cfsux-titlerow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	align-self: stretch;
	inline-size: 100%;
}

/* Заголовок займає рядок, сердечко тримається правого краю картки. */
.cfsux-titlerow > :is( h1, h2, h3, h4, h5, h6 ) {
	flex: 1 1 auto;
	min-inline-size: 0;
	/* Відступ під назвою дає сам рядок (тема ставить його на наш контейнер).
	   Якщо лишити ще й власний margin заголовка — відступи додаються, і між
	   назвою та ціною зʼявляється завеликий проміжок.
	   `!important` тут обовʼязковий: правило теми йде ПІЗНІШЕ за наш файл у
	   каскаді, тож без нього перемагає воно (перевірено експериментом). */
	margin-block-end: 0 !important;
}

.cfsux-wish {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	/* Невеликий відступ від правого краю картки — як в оригіналі Savoy (12px). */
	margin-inline-end: var( --cfsux-wish-inset, 12px );
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var( --cfsux-wish-fg, #777777 );
	font-size: 16px;
	line-height: 17px;
	cursor: pointer;
	/* Лише колір: жодних змін геометрії чи прозорості → нема мерехтіння. */
	transition: color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

/* На наведення сердечко заливається (у Savoy змінюється гліф на суцільний). */
.cfsux-wish:hover .cfsux-wish__icon path,
.cfsux-wish.is-active .cfsux-wish__icon path {
	fill: currentColor;
}

.cfsux-wish.is-active {
	color: var( --cfsux-wish-active, #dc9814 );
}

.cfsux-wish:focus-visible {
	outline: 2px solid var( --cfsux-wish-active, #dc9814 );
	outline-offset: 2px;
}

.cfsux-wish__icon {
	display: block;
	inline-size: 16px;
	block-size: 16px;
	pointer-events: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.cfsux-wish {
		transition: none;
	}
}

/* ------------------------------------------------------------- іконка в хедері */

.cfsux-wish-header {
	display: flex;
	align-items: center;
}

.cfsux-wish-header__link {
	display: inline-flex;
	align-items: center;
	/* Колір беремо ЗВІДТИ Ж, звідки його бере тема для власних іконок шапки:
	   вона малює будь-який svg у `.ct-icon-container` правилом
	   `fill: var(--theme-icon-color, var(--theme-text-color))`, а саму змінну
	   оголошує Кастомайзер на СВОЇХ елементах (кошик, акаунт). На нашому боксі
	   її не було — тому сердечко виходило кольором тексту, тобто чорним поруч із
	   бірюзовими іконками теми. Порядок: своє налаштування → колір палітри теми.
	   Оголошуємо обидві форми: `--theme-icon-color` для заливкових іконок
	   (їх фарбує правило теми) і `color` для контурних (вони на currentColor). */
	--theme-icon-color: var( --cfsux-wish-header, var( --theme-palette-color-1, currentColor ) );
	color: var( --cfsux-wish-header, var( --theme-palette-color-1, inherit ) );
	text-decoration: none;
}

/* Наведення — той самий колір, що й у іконок теми (вона тримає його у своїй змінній). */
.cfsux-wish-header__link:hover,
.cfsux-wish-header__link:focus-visible {
	--theme-icon-color: var( --theme-icon-hover-color, var( --theme-palette-color-2, currentColor ) );
	color: var( --theme-icon-hover-color, var( --theme-palette-color-2, inherit ) );
}

.cfsux-wish-header__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

/* Розмір задає JS зі значення теми в цьому ж рядку хедера (на телефоні 28px,
   на ПК менше) — щоб серденько було одного розміру з кошиком. ФІЗИЧНІ width/height:
   тема оголошує розмір своїх іконок теж ними і підключається пізніше за нас, тож
   логічні inline-size/block-size вона б перебила. */
.cfsux-wish-header__icon svg {
	width: var( --cfsux-wish-icon, 20px );
	height: var( --cfsux-wish-icon, 20px );
}

/* Бейдж не виступає за іконку: раніше він вилазив на 10px праворуч і торкався
   кошика — це читалось як «іконка кошика змінила колір». */
.cfsux-wish-header__count {
	position: absolute;
	inset-block-start: -6px;
	inset-inline-end: -2px;
	min-inline-size: 16px;
	padding: 0 4px;
	border-radius: 10px;
	/* Свої кольори лічильника (Модулі → Кольори сердечка); не задано — як було. */
	background: var( --cfsux-wish-count-bg, var( --cfsux-wish-active, var( --theme-palette-color-1, #3996ad ) ) );
	color: var( --cfsux-wish-count-fg, #ffffff );
	font-size: 10px;
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

/* Порожній список — бейджа немає взагалі (раніше тут була «чорна пляма»:
   фон брався з --theme-border-color, а на цьому сайті вона майже чорна). */
.cfsux-wish-header.is-empty .cfsux-wish-header__count {
	display: none;
}

/* --------------------------------------------------- сторінка списку бажань */

.cfsux-wishlist {
	position: relative;
	min-block-size: 80px;
}

.cfsux-wishlist__empty,
.cfsux-wishlist__error {
	margin: 24px 0;
	color: var( --theme-text-color, #2d2d2d );
	font-size: 15px;
	text-align: center;
}

.cfsux-wishlist__error {
	color: #b3261e;
}

/* Скелет: показуємо «місця» під картки одразу, поки йде запит. */
.cfsux-wishlist__skeleton {
	display: grid;
	grid-template-columns: repeat( var( --cfsux-wish-cols, 4 ), 1fr );
	gap: 20px;
	margin-block: 10px;
}

.cfsux-wishlist__skeleton span {
	display: block;
	aspect-ratio: 1;
	border-radius: 4px;
	background: linear-gradient( 90deg, rgba( 0, 0, 0, 0.045 ), rgba( 0, 0, 0, 0.075 ), rgba( 0, 0, 0, 0.045 ) );
	background-size: 200% 100%;
	animation: cfsux-wish-shimmer 1.4s linear infinite;
}

.cfsux-wishlist__skeleton[hidden] {
	display: none !important;
}

@keyframes cfsux-wish-shimmer {
	to {
		background-position: -200% 0;
	}
}

@media ( max-width: 782px ) {
	.cfsux-wishlist__skeleton {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cfsux-wishlist__skeleton span {
		animation: none;
	}
}