/* ==========================================================================
   Картка товару в Loop Item
   Класи задаються в Elementor (Advanced → CSS Classes):
     .products-loop-item            обгортка картки
     .products-loop-item__image     фото
     .products-loop-item__info      блок «назва + деталі»
     .products-loop-item__title     назва
     .products-loop-item__details   «8 шт / 280 г / 255 ккал»
     .products-loop-item__bottom    ціна + дії
     .products-loop-item__price     ціна
     .products-loop-item__wishlist  сердечко   (+ .loop-add-to-wishlist для JS)
     .products-loop-item__cart      «У кошик»  (+ .loop-add-to-cart для JS)

   ПРИНЦИП: тут лише те, чого Elementor не вміє або що мусить лишатися
   синхронним між двома віджетами. Кольори, відступи, шрифти, padding кнопки —
   в Elementor (там є адаптивні контроли, і клієнт може правити без коду).
   ========================================================================== */

.products-loop-item{
	/* ЄДИНЕ джерело правди для розміру іконок дій.
	   Свідомо перебиває контроли Size у віджетах Icon і Button: інакше серце
	   й кошик — це два незалежні контроли, які розʼїжджаються на кожному проєкті.
	   Контроли Size у тих віджетах краще лишити порожніми, щоб не плутати себе. */
	--card-icon:20px;
}

.products-loop-item__wishlist .elementor-icon svg,
.products-loop-item__cart .elementor-button-icon svg{
	width:var(--card-icon) !important;
	height:var(--card-icon) !important;
	flex:0 0 var(--card-icon);
}

/* --- мобільний. 767px = mobile breakpoint Elementor --- */
@media (max-width:767px){

	.products-loop-item{--card-icon:22px}

	/* Кнопка «У кошик» → лише іконка (Elementor не має адаптивного тексту).
	   Ховаємо візуально, а не display:none — текст лишається доступною назвою
	   кнопки для скрінрідерів, тож aria-label не потрібен.
	   Текст стає absolute → випадає з флексу, тому gap між іконкою й текстом
	   зникає сам, а кнопка стискається до іконки + свій padding з Elementor.
	   (Щоб ховати текст лише в режимі «2 в ряд» — додай перед селектором
	    html:not(.catalog-view--list), див. catalog-view.css) */
	.products-loop-item__cart .elementor-button-text{
		position:absolute;
		width:1px;height:1px;
		padding:0;margin:-1px;border:0;
		overflow:hidden;white-space:nowrap;
		clip-path:inset(50%);
	}
}