/* Somio Обране — сердечко з лічильником.
   Всі керовані величини — CSS-змінні, які пишуть контроли Elementor. */

.somio-wl {
	--wl-icon-size: 22px;
	--wl-stroke: 1.6;
	--wl-color: #111;
	--wl-color-hover: #ed1c24;
	--wl-color-active: #ed1c24;
	--wl-box: var(--wl-icon-size);
	--wl-radius: 50%;
	--wl-box-bg-hover: #f4f4f4;
	--wl-badge-bg: #ed1c24;
	--wl-badge-color: #fff;
	--wl-badge-size: 16px;
	--wl-badge-x: -6px;
	--wl-badge-y: -6px;
	--wl-badge-border: transparent;
	--wl-gap: 8px;
	--wl-offset-y: 0px;
	--wl-hit: 44px;   /* hit-area */

	/* власний рівень накладання: бейдж виступає за межі віджета, а сусідній кошик
	   має білу 1px рамку, яка інакше малюється поверх нього тонкою рискою */
	position: relative;
	z-index: 3;

	display: inline-flex;
	align-items: center;
	gap: var(--wl-gap);
	text-decoration: none;
	color: var(--wl-color);
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
	transform: translateY(var(--wl-offset-y));
	vertical-align: top;
}

.somio-wl--label-left   { flex-direction: row-reverse; }
.somio-wl--label-bottom { flex-direction: column; }

/* область натискання */
.somio-wl__box {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wl-box);
	height: var(--wl-box);
	border-radius: var(--wl-radius);
	background: transparent;
	transition: background-color .15s ease;
}

/* На сенсорних екранах зона натискання розширюється до 44px, але від'ємні
   поля повертають місце назад — у макеті віджет так само завбільшки з іконку. */
@media (pointer: coarse) {
	.somio-wl__box {
		width: var(--wl-hit);
		height: var(--wl-hit);
		margin: calc((var(--wl-hit) - var(--wl-box)) / -2);
	}
}

.somio-wl:hover .somio-wl__box,
.somio-wl:focus-visible .somio-wl__box { background: var(--wl-box-bg-hover); }

.somio-wl:focus-visible .somio-wl__box {
	outline: 2px solid var(--wl-color-active);
	outline-offset: 2px;
}

/* іконка */
.somio-wl__icon,
.somio-wl__icon svg,
.somio-wl__icon i {
	width: var(--wl-icon-size);
	height: var(--wl-icon-size);
	display: block;
	font-size: var(--wl-icon-size);
}

.somio-wl__icon svg {
	fill: none;
	stroke: currentColor;
	stroke-width: var(--wl-stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: fill .18s ease, stroke .18s ease, transform .18s ease;
}

.somio-wl__icon.is-solid svg { fill: currentColor; }

.somio-wl:hover  { color: var(--wl-color-hover); }
.somio-wl.is-filled { color: var(--wl-color-active); }

.somio-wl:active .somio-wl__icon svg { transform: scale(.9); }

/* бейдж */
.somio-wl__badge {
	position: absolute;
	top: var(--wl-badge-y);
	right: var(--wl-badge-x);
	min-width: var(--wl-badge-size);
	height: var(--wl-badge-size);
	padding: 0 4px;
	border-radius: calc(var(--wl-badge-size) / 2);
	background: var(--wl-badge-bg);
	color: var(--wl-badge-color);
	border: 1px solid var(--wl-badge-border);
	font-size: calc(var(--wl-badge-size) * .62);
	font-weight: 800;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-variant-numeric: tabular-nums;
	box-sizing: border-box;
	transition: transform .18s ease, opacity .18s ease;
}

.somio-wl__badge.is-hidden {
	opacity: 0;
	transform: scale(.6);
	pointer-events: none;
}

/* підстрибування при додаванні товару */
.somio-wl.has-pop.is-bumping .somio-wl__badge { animation: somio-wl-pop .4s ease; }
.somio-wl.has-pop.is-bumping .somio-wl__icon svg { animation: somio-wl-beat .4s ease; }

@keyframes somio-wl-pop {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}

@keyframes somio-wl-beat {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.25); }
	60%  { transform: scale(.95); }
	100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.somio-wl.has-pop.is-bumping .somio-wl__badge,
	.somio-wl.has-pop.is-bumping .somio-wl__icon svg { animation: none; }
	.somio-wl__icon svg, .somio-wl__badge { transition: none; }
}

.somio-wl__label {
	white-space: nowrap;
	color: inherit;
}