/* Лічильник у кнопці «Кошик» + стани 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-badge);
	color:var(--theme-on-badge);
	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)}

/* ---------- Кнопка-іконка в картці: Icon-віджет з класом loop-add-to-cart ----------
   Стани (is-loading / is-added / is-error) ставить cart.js на обгортку, розмітку .cart-icon-state — теж він.
   Під час стану іконка ховається, на її місці — спінер, галочка (домальовується) або хрестик з підказкою.
   Колір «Додано» / помилки: вид Default / Framed — колір іконки, Stacked — фон кружечка.
   !important — Elementor задає кольори іконки селектором з ID елемента. */
.loop-add-to-cart.elementor-widget-icon.is-loading{opacity:1}
.loop-add-to-cart.elementor-widget-icon .elementor-icon{
	position:relative;
	transition:color .25s ease, background-color .25s ease, border-color .25s ease;
}
.loop-add-to-cart.elementor-widget-icon .elementor-icon > :not(.cart-icon-state){transition:opacity .2s ease, transform .25s ease}
.loop-add-to-cart.elementor-widget-icon:is(.is-loading,.is-added,.is-error) .elementor-icon > :not(.cart-icon-state){
	opacity:0;transform:scale(.4);
}
/* спінер — лише якщо відповідь іде довше 150 мс, щоб не блимало */
.loop-add-to-cart.elementor-widget-icon.is-loading .elementor-icon > :not(.cart-icon-state){transition-delay:.15s}

.cart-icon-state{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cart-icon-state > *{grid-area:1/1;opacity:0;transition:opacity .15s ease}
/* Галочка й хрестик — polyline / line (не path): правила іконки на кшталт «svg path{fill:…!important}» їх не чіпають */
.loop-add-to-cart .cart-icon-state svg,
.loop-add-to-cart .cart-icon-state svg *{
	fill:none !important;stroke:currentColor !important;
	stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}
.loop-add-to-cart .cart-icon-state svg{display:block;width:1em;height:1em}
.cart-icon-state__spinner{
	width:.8em;height:.8em;box-sizing:border-box;
	border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
}
.cart-icon-state__check polyline{stroke-dasharray:24;stroke-dashoffset:24}

.is-loading .cart-icon-state__spinner{opacity:1;transition-delay:.15s;animation:cart-spin .7s linear infinite}
.is-added .cart-icon-state__check{opacity:1}
.is-added .cart-icon-state__check polyline{animation:cart-check-draw .35s .08s ease-out forwards}
.is-error .cart-icon-state__cross{opacity:1}

.loop-add-to-cart.elementor-widget-icon.is-added .elementor-icon{animation:cart-icon-pop .45s ease}
.loop-add-to-cart.elementor-widget-icon.is-error .elementor-icon{animation:cart-shake .4s ease}

.loop-add-to-cart.elementor-widget-icon:not(.elementor-view-stacked).is-added .elementor-icon{color:var(--theme-success) !important;border-color:var(--theme-success) !important}
.loop-add-to-cart.elementor-widget-icon:not(.elementor-view-stacked).is-error .elementor-icon{color:var(--theme-error) !important;border-color:var(--theme-error) !important}
.loop-add-to-cart.elementor-view-stacked.is-added .elementor-icon{background-color:var(--theme-success) !important;color:var(--theme-light) !important}
.loop-add-to-cart.elementor-view-stacked.is-error .elementor-icon{background-color:var(--theme-error) !important;color:var(--theme-light) !important}

/* підказка з текстом помилки (CART_ERROR_TEXT) над іконкою */
.cart-icon-state[data-tip]::after{
	content:attr(data-tip);
	position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);
	padding:4px 8px;border-radius:6px;
	background:var(--theme-text);color:var(--theme-light);
	font:500 12px/1.3 var(--theme-font), sans-serif;white-space:nowrap;
	animation:cart-tip-in .2s ease both;
}

@keyframes cart-spin{to{transform:rotate(360deg)}}
@keyframes cart-check-draw{to{stroke-dashoffset:0}}
@keyframes cart-icon-pop{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes cart-shake{0%,100%{transform:none}20%,60%{transform:translateX(-3px)}40%,80%{transform:translateX(3px)}}
@keyframes cart-tip-in{from{opacity:0;transform:translate(-50%,4px)}}

/* Підскок кнопки «Кошик» після додавання (клас .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-badge);color:var(--theme-on-badge);
	font:600 12px/20px var(--theme-font), sans-serif;
	font-variant-numeric:lining-nums tabular-nums;
	text-align:center;pointer-events:none;
}

/* Звільнити місце під липку іконку кошика.
   Коли кнопка кошика стає липкою (Elementor Sticky → .elementor-sticky--active), вона накриває
   правий край рядка під собою (на мобільному — кнопку «Каталог товарів» на всю ширину).
   Кнопка з класом header-cart-space (Advanced → CSS Classes) тоді плавно звужується на ширину іконки + відступ.
   --header-cart-space = ширина іконки кошика (Elementor: Size + Padding) + проміжок. */
.elementor-location-header{--header-cart-space:50px} /* ← ПРОЄКТ 42px іконка + 8px проміжок */
.header-cart-space .elementor-button{transition:width .3s ease}
.elementor-location-header:has(.header-cart-button.elementor-sticky--active) .header-cart-space .elementor-button{
	width:calc(100% - var(--header-cart-space)) !important;
}
@media (prefers-reduced-motion:reduce){.header-cart-space .elementor-button{transition: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){
	.loop-add-to-cart.elementor-widget-icon .elementor-icon,
	.is-loading .cart-icon-state__spinner,
	.cart-icon-state[data-tip]::after{animation:none !important}
	.is-added .cart-icon-state__check polyline{animation:none;stroke-dashoffset:0}
	.is-bumped,
	.elementor-widget-icon.is-bumped .elementor-icon,
	.elementor-widget-icon.is-bumped .mini-cart-count{animation:none}
}