/* Сердечко на картці: класи is-active / is-pulsing ставить wishlist.js
   Контур → залите серце (CSS-маска, тому працює з будь-якою іконкою віджета). */
.loop-add-to-wishlist{
	--wl-active: currentColor; /* ← ПРОЄКТ колір залитого сердечка: currentColor — той самий, що в іконки в Elementor
	                              (Primary Color / Hover), тож при наведенні заливка міняє колір разом з іконкою */
	cursor:pointer;user-select:none;
}
.loop-add-to-wishlist .elementor-icon{
	position:relative;display:inline-flex;align-items:center;justify-content:center;
	transition:color .2s ease,transform .2s ease;
}
.loop-add-to-wishlist .elementor-icon svg{transition:opacity .15s ease}

/* Залите серце.
   Розмір бере той самий токен, що й контурна іконка (product-card.css), інакше
   на брейкпоінті, де токен інший, залите серце виглядає меншим за контур.
   1em — запасний варіант, якщо модуль картки не підключений.

   transform у масці суміщає контур залитого серця з контуром іконки Elementor
   (обидва стають 21×18 в системі viewBox 24×24). Калібрування під стандартне
   серце Elementor: якщо міняєш іконку на іншу — або прибери transform,
   або перерахуй під нову (порівняй getBBox() обох шляхів). */
.loop-add-to-wishlist .elementor-icon::after{
	content:'';position:absolute;inset:0;margin:auto;
	width:var(--card-icon, 1em);height:var(--card-icon, 1em);
	background:var(--wl-active);
	-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path transform='translate(-.6 .80722) scale(1.05 .98093)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center/contain no-repeat;
	mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path transform='translate(-.6 .80722) scale(1.05 .98093)' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>") center/contain no-repeat;
	opacity:0;transform:scale(.6);
	transition:opacity .15s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
	pointer-events:none;
}
.loop-add-to-wishlist.is-active .elementor-icon svg{opacity:0}
.loop-add-to-wishlist.is-active .elementor-icon::after{opacity:1;transform:scale(1)}
.loop-add-to-wishlist.is-pulsing .elementor-icon::after{animation:wishlist-pulse .45s ease}
@keyframes wishlist-pulse{0%{transform:scale(.6)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* Якщо сердечко зроблено віджетом Button, а не Icon */
.loop-add-to-wishlist.is-active .elementor-button{color:var(--theme-accent)} /* Button-варіант: колір обраного */

/* Лічильник у шапці */
.wishlist-counter.is-empty{display:none}
.wishlist-counter--inline{white-space:nowrap}
.has-wishlist-counter{position:relative}
.wishlist-counter--badge{
	position:absolute;top:-6px;right:-8px;
	min-width:18px;height:18px;padding:0 5px;
	border-radius:9px;
	background:var(--theme-badge);
	color:var(--theme-on-badge);
	font-size:11px;line-height:18px;font-weight:600;text-align:center;
	pointer-events:none;
}