/* ==========================================================================
   Картка товару в 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%);
	}
}

*/

/* ==========================================================================
   Бейдж «N смаків» — шорткод [flavor_count] (inc/woocommerce/flavor-count.php)
   Хмаринка — маска з 6 кругів, пропорції з Figma (206 × 190).
   Розмір хмаринки задає сам бейдж, тож віджет Shortcode в Elementor лише
   позиціонує його (Position: Absolute + Offset + Z-Index), без ширини й Custom CSS.
   Текст масштабується разом із хмаринкою.
   ========================================================================== */
.flavor-count{
	--fc-size:90px; /* ← ПРОЄКТ ширина хмаринки */
	--fc-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 206 190' preserveAspectRatio='none'%3E%3Ccircle cx='131.5' cy='74.8' r='75'/%3E%3Ccircle cx='49.3' cy='55' r='47.1'/%3E%3Ccircle cx='45.2' cy='126.7' r='46'/%3E%3Ccircle cx='110' cy='150.2' r='40.8'/%3E%3Ccircle cx='84.3' cy='154.3' r='21.1'/%3E%3Ccircle cx='101.1' cy='115.3' r='38.2'/%3E%3C/svg%3E");

	display:flex;flex-direction:column;align-items:center;justify-content:center;
	width:var(--fc-size);aspect-ratio:206 / 180;box-sizing:border-box;
	padding-bottom:4%; /* оптичний центр хмаринки трохи вище геометричного */
	background:var(--theme-highlight);
	color:var(--theme-text);
	font:600 calc(var(--fc-size) * .21)/1.05 var(--theme-font), sans-serif;
	font-variant-numeric:lining-nums; /* у Ysabeau за замовчуванням старостильні цифри */
	text-align:center;
	line-height: 0.9;
	-webkit-mask:var(--fc-shape) center / 100% 100% no-repeat;
	        mask:var(--fc-shape) center / 100% 100% no-repeat;
}
.flavor-count br{display:none} /* рядки й так розводить flex-column */

@media (max-width:767px){
	.flavor-count{--fc-size:96px} /* ← ПРОЄКТ ширина на мобілці */
}