/*
 * TuSai Toolkit - Fix responsive globale
 * Elimina lo scroll orizzontale e le "pagine ballerine" su mobile.
 * Vale per tutte le pagine, presenti e future.
 */

/* ------------------------------------------------------------------
 * 1. Nessuno scroll orizzontale a livello di documento.
 *    Su iOS overflow-x:hidden sul solo body non basta: il documento
 *    continua a scorrere. Serve anche su html.
 *    overflow:clip non crea un contenitore di scroll, quindi non
 *    rompe position:sticky (hidden resta come fallback).
 * ------------------------------------------------------------------ */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

@supports (overflow: clip) {
	html,
	body {
		overflow-x: clip;
	}
}

/* ------------------------------------------------------------------
 * 2. Caroselli Elementor (causa principale su questo sito).
 *    I widget Pro generano ancora .swiper-container, classe che il CSS
 *    di Swiper 8+ incluso in Elementor non copre piu': le slide restano
 *    visibili fuori schermo e allargano la pagina di migliaia di pixel.
 * ------------------------------------------------------------------ */
.swiper-container,
.elementor-main-swiper,
.elementor-image-carousel-wrapper,
.elementor-testimonial-wrapper .swiper,
.elementor-widget-media-carousel .swiper,
.elementor-widget-testimonial-carousel .swiper,
.elementor-widget-reviews .swiper,
.elementor-widget-slides .swiper {
	overflow: hidden;
}

/* Le frecce restano cliccabili anche con il contenitore ritagliato. */
.elementor-swiper-button {
	z-index: 2;
}

/* ------------------------------------------------------------------
 * 3. Widget con larghezza personalizzata in px.
 *    In Elementor la larghezza custom (es. 456px) non viene ricalcolata
 *    su schermi piu' stretti: il widget sfora e trascina la pagina.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.elementor-widget__width-initial,
	.elementor-widget__width-auto,
	.elementor-widget-tablet__width-initial,
	.elementor-widget-tablet__width-auto,
	.elementor-widget-mobile__width-initial,
	.elementor-widget-mobile__width-auto {
		max-width: 100% !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-widget__width-initial,
	.elementor-widget__width-auto,
	.elementor-widget-tablet__width-initial,
	.elementor-widget-tablet__width-auto {
		max-width: 100% !important;
	}
}

/* ------------------------------------------------------------------
 * 4. Rete di sicurezza sulle sezioni.
 *    Qualunque elemento futuro che sfori viene ritagliato dalla sezione
 *    che lo contiene invece di allargare tutta la pagina.
 *    Si usa clip cosi' non nasce un contenitore di scroll annidato.
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.elementor-section,
	.elementor-container,
	.e-con,
	.e-con-inner,
	.elementor-column,
	.elementor-widget-wrap {
		max-width: 100%;
	}
}

@supports (overflow: clip) {
	@media (max-width: 1024px) {
		.elementor-top-section,
		.e-con.e-parent {
			overflow-x: clip;
		}
	}
}

/* ------------------------------------------------------------------
 * 5. Media e contenuti incorporati.
 * ------------------------------------------------------------------ */
img,
video,
iframe,
embed,
object,
canvas {
	max-width: 100%;
}

.elementor-widget-video iframe,
.elementor-widget-google_maps iframe,
.wp-block-embed iframe {
	max-width: 100%;
}

/* Le forme decorative delle sezioni devono restare piu' larghe del
   contenitore: sono gia' ritagliate dal loro wrapper. */
.elementor-shape svg,
.elementor-shape-top svg,
.elementor-shape-bottom svg {
	max-width: none;
}

/* ------------------------------------------------------------------
 * 6. Testi lunghi, URL e codice.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	li,
	dd,
	dt,
	figcaption,
	.elementor-heading-title,
	.elementor-widget-text-editor,
	.elementor-price-table__feature-inner {
		overflow-wrap: break-word;
		word-wrap: break-word;
	}

	pre,
	code,
	samp,
	kbd {
		max-width: 100%;
		overflow-x: auto;
		white-space: pre-wrap;
		word-break: break-word;
	}

	.entry-content table,
	.elementor-widget-text-editor table,
	.woocommerce table.shop_table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

/* ------------------------------------------------------------------
 * 7. Elementi posizionati in assoluto dentro i widget.
 *    Su mobile spesso escono dal contenitore.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.elementor-absolute {
		max-width: 100%;
	}

	.elementor-price-table__ribbon,
	.elementor-price-table__ribbon-inner {
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------
 * 8. Woo e tema: pannelli fuori schermo.
 * ------------------------------------------------------------------ */
.astra-cart-drawer,
.astra-mobile-cart-overlay,
.ast-mobile-popup-drawer {
	max-width: 100vw;
}