/* ==========================================================================
   Перемикач вигляду каталогу на мобільному: 1 в ряд / 2 в ряд
   Клас catalog-view--list на <html> = «1 в ряд». Видимість перемикача — через Elementor.
   ========================================================================== */

/* Розміри компактної картки («2 в ряд») — правити тут */
:root{
	--cv-compact-title:13px;
	--cv-compact-details:11px;
	--cv-compact-price:14px;
}

/* --- сегментований перемикач ---
   Селектори навмисно з <button> усередині: Elementor Site Settings → Buttons
   накидає на всі <button> свої padding/color з вищою специфічністю. */
.catalog-view-toggle{
	--cvt-size:36px;
	position:relative;display:inline-flex;gap:2px;padding:3px;
	border-radius:999px;background:var(--theme-surface-alt);
}
.catalog-view-toggle__thumb{
	position:absolute;top:3px;left:3px;
	width:var(--cvt-size);height:var(--cvt-size);border-radius:50%;
	background:var(--theme-light);
	box-shadow:0 1px 3px rgba(0,0,0,.12);
	transition:transform .25s cubic-bezier(.4,0,.2,1);
	transform:translateX(calc(var(--cvt-size) + 2px)); /* «2 в ряд» — друга кнопка */
}
.catalog-view-toggle.is-list .catalog-view-toggle__thumb{transform:translateX(0)}
.catalog-view-toggle button.catalog-view-toggle__btn{
	all:unset;box-sizing:border-box;
	position:relative;z-index:1;
	width:var(--cvt-size);height:var(--cvt-size);
	display:inline-flex;align-items:center;justify-content:center;
	border-radius:50%;
	color:var(--theme-text);opacity:.45;cursor:pointer;
	transition:opacity .2s ease;
}
.catalog-view-toggle button.catalog-view-toggle__btn[aria-pressed="true"]{opacity:1}
.catalog-view-toggle button.catalog-view-toggle__btn svg{width:22px;height:22px;flex:0 0 22px}
.catalog-view-toggle button.catalog-view-toggle__btn:focus-visible{outline:2px solid var(--theme-accent);outline-offset:2px}

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

	/* «1 в ряд»: та сама картка, одна колонка з великим фото.
	   Elementor задає колонки правилом .elementor-grid-mobile-N .elementor-grid — перебиваємо напряму.
	   Тільки Loop Grid з товарами, каруселі не чіпаємо. */
	.catalog-view--list .elementor-widget-loop-grid .elementor-loop-container:has(.product){
		grid-template-columns:1fr !important;
	}

	/* «2 в ряд» (дефолт): компактна типографіка картки.
	   Розміри іконок і кнопка-іконка — в product-card.css. */
	html:not(.catalog-view--list) .elementor-widget-loop-grid .e-loop-item.product .products-loop-item__title .elementor-heading-title{
		font-size:var(--cv-compact-title) !important;line-height:1.25 !important;
	}
	html:not(.catalog-view--list) .elementor-widget-loop-grid .e-loop-item.product .products-loop-item__details .elementor-heading-title{
		font-size:var(--cv-compact-details) !important;line-height:1.3 !important;
	}
	html:not(.catalog-view--list) .elementor-widget-loop-grid .e-loop-item.product .products-loop-item__price{
		font-size:var(--cv-compact-price) !important;
	}
	/* сердечко забирає місце у вузькій картці */
	html:not(.catalog-view--list) .elementor-widget-loop-grid .e-loop-item.product .products-loop-item__wishlist{
		display:none !important;
	}
}