/**
 * Carosello prodotti (Loop Grid con classe goccia-carousel, script in carousel.js).
 * - Schede della stessa scheda Loop degli archivi, un po' piu' strette per far vedere un pezzo della successiva:
 *   computer 4 e mezza (--goccia-carousel-visible 4.4), tablet 3.4, telefono 2.4.
 * - La fila esce fino ai bordi dello schermo; la prima scheda parte e l'ultima finisce alla stessa distanza dal bordo
 *   (= margine laterale della sezione: --goccia-carousel-pad 40px, tablet 24px, telefono 16px, da cambiare insieme ai
 *   padding della sezione).
 * - Frecce sottili in alto a destra, all'altezza del titolo sopra (--goccia-carousel-nav-top), e barra di avanzamento sotto.
 */

.goccia-carousel {
	--goccia-carousel-visible: 4.4;
	--goccia-carousel-gaps: 4;
	--goccia-carousel-pad: 40px;
	--goccia-carousel-nav-top: -54px;
	position: relative;
}

.goccia-carousel .elementor-loop-container.elementor-grid {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% + var(--goccia-carousel-pad) - var(--grid-column-gap, 20px) * var(--goccia-carousel-gaps)) / var(--goccia-carousel-visible));
	margin-inline: calc(-1 * var(--goccia-carousel-pad));
	padding-inline: var(--goccia-carousel-pad);
	scroll-padding-inline: var(--goccia-carousel-pad);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.goccia-carousel .elementor-loop-container.elementor-grid::-webkit-scrollbar {
	display: none;
}

/* Con le dita le schede si fermano allineate; con il trackpad lo scorrimento resta libero. */
@media (pointer: coarse) {
	.goccia-carousel .elementor-loop-container.elementor-grid {
		scroll-snap-type: x mandatory;
	}

	.goccia-carousel .e-loop-item {
		scroll-snap-align: start;
	}
}

.goccia-carousel__nav {
	position: absolute;
	top: var(--goccia-carousel-nav-top);
	right: 0;
	z-index: 2;
	display: flex;
	gap: 12px;
}

.goccia-carousel .goccia-carousel__nav button,
.goccia-carousel .goccia-carousel__nav button:hover,
.goccia-carousel .goccia-carousel__nav button:focus {
	display: flex;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--e-global-color-primary, #141414);
	cursor: pointer;
}

.goccia-carousel .goccia-carousel__nav button:hover {
	color: var(--e-global-color-accent, #b8a870);
}

.goccia-carousel .goccia-carousel__nav button:disabled {
	opacity: 0.3;
	cursor: default;
}

.goccia-carousel__nav svg {
	width: 100%;
	height: 100%;
}

.goccia-carousel__prev svg {
	transform: scaleX(-1);
}

/* Binario corto al centro, staccato dalle schede; il tratto nero e' piccolo, ha misura fissa e scorre. */
.goccia-carousel__progress {
	--goccia-carousel-thumb: 40px;
	position: relative;
	width: 200px;
	height: 2px;
	margin: 40px auto 0;
	overflow: hidden;
	background: var(--e-global-color-gc0brdr, #e5e5e5);
}

.goccia-carousel__progress span {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--goccia-carousel-thumb);
	height: 100%;
	background: var(--e-global-color-primary, #141414);
	transition: transform 0.15s linear;
}

/* Tutte le schede gia' visibili: niente frecce ne' barra. */
.goccia-carousel.is-static :is(.goccia-carousel__nav, .goccia-carousel__progress) {
	display: none;
}

@media (max-width: 1024px) {
	.goccia-carousel {
		--goccia-carousel-visible: 3.4;
		--goccia-carousel-gaps: 3;
		--goccia-carousel-pad: 24px;
	}
}

@media (max-width: 767px) {
	.goccia-carousel {
		--goccia-carousel-visible: 2.4;
		--goccia-carousel-gaps: 2;
		--goccia-carousel-pad: 16px;
		--goccia-carousel-nav-top: -51px;
	}

	.goccia-carousel__progress {
		--goccia-carousel-thumb: 28px;
		width: 140px;
		margin-top: 32px;
	}
}