/* Carosello Miniature Prodotto per Elementor — v1.1.0 */

/* ================= STRISCIA MINIATURE ================= */

.ctg-wrap { position: relative; }
.ctg-enabled-yes .ctg-wrap { margin-top: var(--ctg-top, 10px); }

.ctg-enabled-yes .woocommerce-product-gallery .flex-control-thumbs {
	display: flex !important;
	flex-wrap: nowrap !important;
	overflow-x: auto;
	overflow-y: hidden;
	gap: var(--ctg-gap, 8px);
	margin: 0 !important;
	padding: 0 !important;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.ctg-enabled-yes .woocommerce-product-gallery .flex-control-thumbs li {
	flex: 0 0 calc((100% - (var(--ctg-visible, 4) - 1) * var(--ctg-gap, 8px)) / var(--ctg-visible, 4)) !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	scroll-snap-align: start;
}

.ctg-enabled-yes .woocommerce-product-gallery .flex-control-thumbs li img {
	display: block;
	width: 100%;
	height: auto;
	cursor: pointer;
	opacity: var(--ctg-inactive-opacity, .6);
	transition: opacity .2s;
	outline: var(--ctg-active-bw, 0px) solid transparent;
	outline-offset: calc(var(--ctg-active-bw, 0px) * -1);
}
.ctg-enabled-yes .woocommerce-product-gallery .flex-control-thumbs li img:hover,
.ctg-enabled-yes .woocommerce-product-gallery .flex-control-thumbs li img.flex-active { opacity: 1; }
.ctg-enabled-yes .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
	outline-color: var(--ctg-active-color, #000);
}

/* Barra di scorrimento */
.ctg-enabled-yes.ctg-hide-scrollbar-yes .flex-control-thumbs { scrollbar-width: none; }
.ctg-enabled-yes.ctg-hide-scrollbar-yes .flex-control-thumbs::-webkit-scrollbar { display: none; }
.ctg-enabled-yes:not(.ctg-hide-scrollbar-yes) .flex-control-thumbs { padding-bottom: 6px !important; }
.ctg-enabled-yes:not(.ctg-hide-scrollbar-yes) .flex-control-thumbs::-webkit-scrollbar { height: 5px; }
.ctg-enabled-yes:not(.ctg-hide-scrollbar-yes) .flex-control-thumbs::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; }

/* ================= IMMAGINE PRINCIPALE ================= */

.ctg-main-wrap { position: relative; }

/* ================= FRECCE: STILE COMUNE ================= */

.ctg-arrow {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 6;
	align-items: center;
	justify-content: center;
	width: var(--_size);
	height: var(--_size);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0 !important;
	line-height: 1;
	border: none;
	border-radius: var(--_radius) !important;
	background: var(--_bg) !important;
	color: var(--_color) !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: opacity .2s, transform .2s, background-color .2s, color .2s;
}
.ctg-arrow:hover,
.ctg-arrow:focus-visible {
	background: var(--_bg-hover) !important;
	color: var(--_color-hover) !important;
	transform: translateY(-50%) scale(1.08);
}
.ctg-arrow:focus { outline: none; }
.ctg-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.ctg-arrow.ctg-prev { left: var(--_offset); }
.ctg-arrow.ctg-next { right: var(--_offset); }

.ctg-arrow.is-hidden { opacity: 0 !important; pointer-events: none; }

.ctg-arrow svg {
	display: none;
	width: var(--_icon);
	height: var(--_icon);
	fill: none;
	stroke: currentColor;
	stroke-width: var(--_stroke);
	stroke-linecap: round;
	stroke-linejoin: round;
	pointer-events: none;
}
.ctg-arrow .ctg-fill { fill: currentColor; stroke: none; }

/* Valori delle frecce miniature */
.ctg-thumb-arrow {
	--_size: var(--ctg-arrow-size, 36px);
	--_icon: var(--ctg-icon-size, 16px);
	--_stroke: var(--ctg-icon-stroke, 2.5);
	--_offset: var(--ctg-arrow-offset, 6px);
	--_radius: var(--ctg-arrow-radius, 50%);
	--_bg: var(--ctg-arrow-bg, #fff);
	--_color: var(--ctg-arrow-color, #000);
	--_bg-hover: var(--ctg-arrow-bg-hover, var(--_bg));
	--_color-hover: var(--ctg-arrow-color-hover, var(--_color));
}

/* Valori delle frecce immagine principale */
.ctg-main-arrow {
	--_size: var(--ctg-main-arrow-size, 44px);
	--_icon: var(--ctg-main-icon-size, 20px);
	--_stroke: var(--ctg-main-icon-stroke, 2.5);
	--_offset: var(--ctg-main-arrow-offset, 12px);
	--_radius: var(--ctg-main-arrow-radius, 50%);
	--_bg: var(--ctg-main-arrow-bg, #fff);
	--_color: var(--ctg-main-arrow-color, #000);
	--_bg-hover: var(--ctg-main-arrow-bg-hover, var(--_bg));
	--_color-hover: var(--ctg-main-arrow-color-hover, var(--_color));
}

/* Quando mostrarle */
.ctg-enabled-yes.ctg-arrows-yes .ctg-thumb-arrow { display: flex; }
.ctg-main-arrows-yes .ctg-main-arrow { display: flex; }

/* Icone */
.ctg-icon-chevron .ctg-thumb-arrow .ctg-svg-chevron,
.ctg-icon-arrow .ctg-thumb-arrow .ctg-svg-arrow,
.ctg-icon-caret .ctg-thumb-arrow .ctg-svg-caret,
.ctg-main-icon-chevron .ctg-main-arrow .ctg-svg-chevron,
.ctg-main-icon-arrow .ctg-main-arrow .ctg-svg-arrow,
.ctg-main-icon-caret .ctg-main-arrow .ctg-svg-caret { display: block; }

/* Solo al passaggio del mouse (dispositivi con mouse) */
@media (hover: hover) and (pointer: fine) {
	.ctg-main-hover-yes .ctg-main-arrow { opacity: 0; }
	.ctg-main-hover-yes .ctg-main-wrap:hover .ctg-main-arrow,
	.ctg-main-hover-yes .ctg-main-arrow:focus-visible { opacity: 1; }
}

/* Mobile */
@media (max-width: 767px) {
	.ctg-thumb-arrow { display: none !important; }
	.ctg-enabled-yes.ctg-arrows-yes.ctg-arrows-mobile-yes .ctg-thumb-arrow { display: flex !important; }
	.ctg-main-arrow { display: none !important; }
	.ctg-main-arrows-yes.ctg-main-arrows-mobile-yes .ctg-main-arrow { display: flex !important; }
}