/*
 * Carosello a larghezza naturale (template Prodotto singolo), come la prova grafica approvata.
 * Agganciato solo alla classe gs-carosello del widget "Carosello immagini" di Elementor.
 */
.gs-carosello { --gs-car-h: 620px; --gs-car-gap: 20px; --gs-frecce: 44px; }
@media (max-width: 1024px) { .gs-carosello { --gs-car-h: 460px; } }
@media (max-width: 767px) { .gs-carosello { --gs-car-h: 340px; } }

/* Foto tutte alte uguali, ognuna con la sua larghezza: niente ritagli. */
.gs-carosello .swiper-slide { width: auto !important; height: auto; }
.gs-carosello .swiper-slide figure { margin: 0; }
.gs-carosello .swiper-slide img,
.gs-carosello .swiper-slide-image { display: block; height: var(--gs-car-h) !important; width: auto !important; max-width: none !important; }

/* Frecce tonde sotto le foto, a sinistra. Niente pallini. */
.gs-carosello .elementor-image-carousel-wrapper { padding-bottom: calc(var(--gs-frecce) + 24px); cursor: grab; }
.gs-carosello .elementor-image-carousel-wrapper:active { cursor: grabbing; }
.gs-carosello .swiper-pagination { display: none !important; }
.gs-carosello .elementor-swiper-button {
	top: auto !important; bottom: 0 !important; transform: none !important;
	width: var(--gs-frecce); height: var(--gs-frecce); border: 1px solid #000; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; background: transparent;
	color: #000 !important; font-size: 16px; box-sizing: border-box; transition: opacity .2s;
}
.gs-carosello .elementor-swiper-button svg { fill: #000 !important; width: 16px; height: 16px; }
.gs-carosello .elementor-swiper-button-prev { left: 0 !important; right: auto !important; }
.gs-carosello .elementor-swiper-button-next { left: calc(var(--gs-frecce) + 12px) !important; right: auto !important; }
.gs-carosello .elementor-swiper-button.swiper-button-disabled { opacity: .25; cursor: default; }
.gs-carosello .elementor-swiper-button:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
/* Con una sola foto (Elementor allora non avvia il carosello): niente frecce, niente spazio per loro,
   e la foto intera entro la larghezza dello schermo, senza tagli. */
.gs-carosello.gs-carosello--una .elementor-swiper-button,
.gs-carosello:not(:has(.swiper-slide + .swiper-slide)) .elementor-swiper-button { display: none !important; }
.gs-carosello.gs-carosello--una .elementor-image-carousel-wrapper,
.gs-carosello:not(:has(.swiper-slide + .swiper-slide)) .elementor-image-carousel-wrapper { padding-bottom: 0; cursor: default; }
.gs-carosello.gs-carosello--una .swiper-slide,
.gs-carosello:not(:has(.swiper-slide + .swiper-slide)) .swiper-slide { max-width: 100% !important; } /* Elementor limita la foto a 1/N della larghezza */
.gs-carosello.gs-carosello--una .swiper-slide img,
.gs-carosello:not(:has(.swiper-slide + .swiper-slide)) .swiper-slide img {
	width: auto !important; max-width: 100% !important; object-fit: contain; /* senza script: foto intera, mai tagliata */
}
@media (prefers-reduced-motion: reduce) { .gs-carosello .elementor-swiper-button { transition: none; } }
/* Su telefono il blocco del carosello non ha margini: le frecce restano a 20 px dal bordo, come nella prova grafica. */
@media (max-width: 767px) {
	.gs-carosello .elementor-swiper-button-prev { left: 20px !important; }
	.gs-carosello .elementor-swiper-button-next { left: calc(20px + var(--gs-frecce) + 12px) !important; }
}