/* Лічильник у кнопці «Кошик» + стани AJAX-додавання */
.cart-counter.is-empty{display:none}

/* inline — «Кошик (3)» */
.cart-counter--inline{white-space:nowrap}

/* badge — кружечок поверх кнопки (config cart.counter = badge) */
.has-cart-counter{position:relative}
.cart-counter--badge{
	position:absolute;top:-6px;right:-8px;
	min-width:18px;height:18px;padding:0 5px;
	border-radius:9px;
	background:var(--theme-accent);
	color:var(--theme-on-accent);
	font-size:11px;line-height:18px;font-weight:600;text-align:center;
	pointer-events:none;
}

.is-loading{opacity:.6;pointer-events:none}

/* «Додано ✓» на кнопці картки */
.is-added .elementor-button{
	background-color:var(--theme-success) !important;
	border-color:var(--theme-success) !important;
	color:var(--theme-light) !important;
	transition:background-color .25s ease;
}

/* Sold out: стан ставить PHP (woocommerce/loop-button.php).
   Кнопка бліда, але клікабельна — відкриває попап з позначкою «немає в наявності». */
.loop-add-to-cart.is-soldout{opacity:var(--theme-disabled-opacity)}

/* Підскок кнопки «Кошик» після додавання (клас .is-bumped ставить cart.js) */
.is-bumped:not(.elementor-widget-icon){animation:cart-bump .4s ease 2}
@keyframes cart-bump{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* Політ у кошик (елемент створює cart.js) */
.cart-fly--image{border-radius:50%;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.cart-fly--dot{display:block;border-radius:50%;background:var(--theme-accent)}

/* ---------- Іконка кошика (Icon-віджет) + бейдж mini-cart-count ----------
   Бейдж вставляє cart.js, число — фрагменти WooCommerce. */
.header-cart-button .elementor-icon{position:relative}

.header-cart-button .mini-cart-count{
	position:absolute;top:-4px;right:-6px;
	min-width:20px;width:auto;height:20px;padding:0 5px;
	border-radius:10px;box-sizing:border-box;
	background:var(--theme-accent);color:var(--theme-on-accent);
	font:600 12px/20px var(--theme-font), sans-serif;
	font-variant-numeric:lining-nums tabular-nums;
	text-align:center;pointer-events:none;
}

/* анімуємо саму іконку, а не віджет: sticky Elementor не зачіпаємо */
.elementor-widget-icon.is-bumped .elementor-icon{
	animation:cart-icon-bump .7s cubic-bezier(.3,.7,.4,1.4);
}
.elementor-widget-icon.is-bumped .mini-cart-count{
	animation:cart-badge-pop .45s .1s both;
}
@keyframes cart-icon-bump{
	0%  {transform:none}
	20% {transform:scale(.85,1.1)}
	45% {transform:scale(1.15) rotate(-8deg)}
	65% {transform:scale(.97) rotate(5deg)}
	85% {transform:scale(1.03) rotate(-2deg)}
	100%{transform:none}
}
@keyframes cart-badge-pop{
	0%  {transform:scale(.3)}
	55% {transform:scale(1.35)}
	100%{transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
	.is-bumped,
	.elementor-widget-icon.is-bumped .elementor-icon,
	.elementor-widget-icon.is-bumped .mini-cart-count{animation:none}
}