/* ==========================================================================
   Картка товару в 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     ціна (стара / нова при знижці — нижче, для будь-якої ціни в Loop Item)
     .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);
}

/* --- Ціна зі знижкою ---
   Будь-яка ціна Woo в Loop Item (Heading / Text з тегом «Product Price», віджет Product Price):
   стара — дрібно, сіра, закреслена, окремим рядком над новою; нова — як сам віджет, без підкреслення
   (браузер за замовчуванням підкреслює <ins>). Шрифт, розмір і колір нової ціни — у віджеті Elementor. */
.e-loop-item{
	--card-old-size:  .6em;                  /* ← ПРОЄКТ стара ціна від розміру нової */
	--card-old-color: var(--theme-text-muted); /* ← ПРОЄКТ */
}
.e-loop-item del:has(.woocommerce-Price-amount){
	display:block;
	margin-bottom:.15em;
	color:var(--card-old-color);
	font-size:var(--card-old-size);
	font-weight:400;
	line-height:1.2;
	text-decoration:line-through;
	text-decoration-thickness:1px;
	opacity:1; /* деякі теми роблять <del> напівпрозорим */
}
.e-loop-item del:has(.woocommerce-Price-amount) *{color:inherit}
.e-loop-item ins:has(.woocommerce-Price-amount){
	color:inherit;
	text-decoration:none;
	background:none;
	font-weight:inherit;
}

/* --- Немає в наявності ---
   Клас outofstock WooCommerce ставить на картку Loop Item сам. Фото бліде й трохи сіре, ціна приглушена,
   на фото — плашка; кнопка «У кошик» уже бліда (is-soldout, cart.css). При наведенні фото трохи оживає. */
.e-loop-item.outofstock{
	--card-soldout-img:     .45;                  /* ← ПРОЄКТ прозорість фото */
	--card-soldout-label:   "Немає в наявності";  /* ← ПРОЄКТ текст плашки; none — без плашки */
}
.e-loop-item.outofstock :is(.elementor-widget-image, .elementor-widget-theme-post-featured-image, .elementor-widget-woocommerce-product-images) img{
	opacity:var(--card-soldout-img);
	filter:grayscale(.6);
	transition:opacity .2s ease, filter .2s ease;
}
.e-loop-item.outofstock:hover :is(.elementor-widget-image, .elementor-widget-theme-post-featured-image, .elementor-widget-woocommerce-product-images) img{
	opacity:calc(var(--card-soldout-img) + .25);filter:grayscale(.3);
}
.e-loop-item.outofstock .woocommerce-Price-amount{color:var(--theme-text-muted)}

.e-loop-item.outofstock :is(.elementor-widget-image, .elementor-widget-theme-post-featured-image, .elementor-widget-woocommerce-product-images){position:relative}
.e-loop-item.outofstock :is(.elementor-widget-image, .elementor-widget-theme-post-featured-image, .elementor-widget-woocommerce-product-images)::after{
	content:var(--card-soldout-label);
	position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
	padding:5px 12px;border-radius:999px;
	background:var(--theme-bg);color:var(--theme-text);
	box-shadow:var(--theme-shadow);
	font:500 13px/1.2 var(--theme-font), sans-serif;white-space:nowrap;
	pointer-events:none;
}

/* --- мобільний. 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:120px; /* ← ПРОЄКТ ширина хмаринки */
	--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 / 190;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;
	-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} /* ← ПРОЄКТ ширина на мобілці */
}

/* ---------- Рейтинг (віджет Elementor «Product Rating») ----------
   Штатні зірки WooCommerce — шрифт «star» зі стилів, прив'язаних до класу .woocommerce на <body>.
   На головній і звичайних сторінках цього класу немає, тож замість зірок видно текст
   «Рейтинг 5.00 з 5 на основі опитування…». Тут зірки — SVG-маскою, незалежно від сторінки,
   і такі самі, як у відгуках ([reviews_carousel], сторінка товару). */
.elementor-widget-woocommerce-product-rating{
	--pr-star:     #F4C430;   /* ← ПРОЄКТ колір зірок */
	--pr-star-off: #E4DDE8;   /* ← ПРОЄКТ порожня зірка */
	--pr-size:     14px;      /* ← ПРОЄКТ висота зірки */
	--pr-link-size: 12px;     /* ← ПРОЄКТ «(1 відгук)» біля зірок */
	--pr-link-color: var(--e-global-color-text, #524B5B); /* ← ПРОЄКТ колір «(1 відгук)» = Text Kit */
	--pr-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.3 20'%3E%3Cpath d='M10 1.6l2.5 5.3 5.8.7-4.3 4 1.1 5.8L10 14.6l-5.1 2.8 1.1-5.8-4.3-4 5.8-.7z'/%3E%3C/svg%3E");
}
.elementor-widget-woocommerce-product-rating .woocommerce-product-rating{display:flex;align-items:center;gap:6px;margin:0}
.elementor-widget-woocommerce-product-rating .star-rating{
	position:relative;display:inline-block;flex:none;float:none;margin:0;
	width:calc(var(--pr-size) * 1.215 * 5);height:var(--pr-size);
	overflow:hidden;font-size:0;line-height:0;letter-spacing:0;font-family:inherit;
	background:var(--pr-star-off);
	-webkit-mask:var(--pr-mask) left center / calc(var(--pr-size) * 1.215) var(--pr-size) repeat-x;
	        mask:var(--pr-mask) left center / calc(var(--pr-size) * 1.215) var(--pr-size) repeat-x;
}
.elementor-widget-woocommerce-product-rating .star-rating::before{content:none}
.elementor-widget-woocommerce-product-rating .star-rating span{
	position:absolute;top:0;left:0;height:100%;padding:0;overflow:hidden;
	background:var(--pr-star);font-size:0;
}
.elementor-widget-woocommerce-product-rating .star-rating span::before{content:none}
.elementor-widget-woocommerce-product-rating .star-rating span *{display:none}
.elementor-widget-woocommerce-product-rating .woocommerce-review-link{font-size:var(--pr-link-size, 12px);line-height:1.2;color:var(--pr-link-color, #524B5B)}