/* 
Theme Name: SEA TECHNOLOGY Child
Theme URI: 
Description: 
Author: 
Author URI: 
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* ===================================================================
 * Numeri di telefono ed email rilevati da iOS
 *
 * Nel contenuto (footer e modulo CONTATTACI) sono testo semplice, non
 * link: "Tel. 0522 966090", "Fax 0522 966102", "info@seatechnology.eu".
 * iOS li riconosce da solo e li avvolge in un <a> a cui applica il
 * proprio stile — azzurro e sottolineato. Sul fondo navy diventano
 * illeggibili.
 *
 * L'attributo x-apple-data-detectors esiste solo su questi link
 * generati da iOS, quindi la regola non tocca i link scritti a mano.
 * Il numero resta tappabile, ma prende il colore del testo attorno,
 * come nel design.
 * =================================================================== */
a[x-apple-data-detectors] {
	color: inherit !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* ===================================================================
 * Megamenu desktop aperto — velo scuro sulla pagina
 *
 * Richiesta: "fare opacita' su sfondo quando aperto, tipo nero 15%".
 * Nel Figma (frame "Menu behaviour") sono disegnate quattro varianti:
 * fondo in opacita' oppure ombra, con elementi uniti o separati.
 * Qui e' implementata l'opacita'; la scelta fra elementi uniti e
 * separati riguarda il pannello, non questo velo.
 *
 * Ordine di sovrapposizione, preso dai CSS generati:
 *   header  ... z-index 999 e 9999
 *   tendina ... z-index 1000  (widget-mega-menu di Elementor Pro)
 *   velo    ... 998 -> sopra la pagina, sotto header e tendina
 *
 * Lo stato aperto e' l'aria-expanded del bottone della voce, che
 * Elementor tiene aggiornato: niente JS da aggiungere.
 * =================================================================== */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 998;
	background: rgba(0, 0, 0, .15);
	opacity: 0;
	visibility: hidden;
	pointer-events: none; /* il click passa oltre: lo gestisce Elementor */
	transition: opacity .22s ease, visibility 0s linear .22s;
}

body:has(.e-n-menu-dropdown-icon[aria-expanded="true"])::after {
	opacity: 1;
	visibility: visible;
	transition: opacity .22s ease;
}

/* ===================================================================
 * Articoli: link dentro il testo
 *
 * Il kit di Elementor imposta a{color:var(--e-global-color-text)}, cioè
 * lo stesso colore del testo: nel corpo dell'articolo i link non si
 * distinguono da una parola qualunque.
 *
 * Lo stile è quello del riferimento allegato alla card "LINK NEL TESTO":
 * azzurro, grassetto, sottolineato. Il colore #0091d9 è campionato dallo
 * screenshot stesso.
 *
 * La specificità (0,1,1) batte la regola a{} del kit senza !important.
 * L'hover non era specificato: va al blu scuro del sito, coerente con
 * gli altri stati di interazione.
 * =================================================================== */
.elementor-widget-theme-post-content a {
	color: #0091d9;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.elementor-widget-theme-post-content a:hover,
.elementor-widget-theme-post-content a:focus-visible {
	color: #031c59;
}

/* ===================================================================
 * Paginazione della lista News
 *
 * Valori presi dal Figma, frame News, gruppo della paginazione:
 * ogni elemento è 57x35 con raggio 8px e 5px di distanza dal successivo
 * (il gap lo mette già Elementor: 10px divisi fra i due lati).
 *
 * Tre stati, con i colori campionati dal design:
 *   pagina corrente  bordo e numero #031c59, numero sottolineato
 *   altre pagine     bordo e numero #a5a5a5
 *   frecce prev/next fondo #34c5ff, glifo bianco, senza bordo
 *
 * Il numero di pagine non conta: sul Figma sono tre, sul sito cinque.
 * Qui si definisce solo l'aspetto del singolo elemento.
 *
 * Nota: nel CSS aggiuntivo del Customizer c'era una regola che azzerava
 * il bordo della pagina corrente. È stata rimossa da lì, perché con
 * !important avrebbe vinto comunque su queste.
 * =================================================================== */
.elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 57px;
	height: 35px;
	padding: 0 10px;
	border: 1px solid #a5a5a5;
	border-radius: 8px;
	background: #fff;
	color: #a5a5a5;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.elementor-pagination .page-numbers.current {
	border-color: #031c59;
	color: #031c59;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Frecce avanti/indietro: pieno azzurro, nessun bordo. */
.elementor-pagination .prev.page-numbers,
.elementor-pagination .next.page-numbers {
	border-color: #34c5ff;
	background: #34c5ff;
	color: #fff;
}

/* In prima e in ultima pagina Elementor stampa la freccia che non serve come
   <span> al posto di <a>: non porta da nessuna parte, ma resta azzurra come
   l'altra e sembra cliccabile. Nel mockup della card 93, in prima pagina,
   c'e' solo la freccia avanti. */
.elementor-pagination span.prev.page-numbers,
.elementor-pagination span.next.page-numbers {
	display: none;
}

/* Con dodici pagine i numeri di mezzo diventano puntini. Non sono un
   bottone: via bordo, fondo e larghezza minima. */
.elementor-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 4px;
	border-color: transparent;
	background: none;
}

/* Su mobile gli undici elementi della riga finivano su tre file, con la
   freccia avanti da sola in fondo. I bottoni si stringono e i puntini
   spariscono: restano le due frecce e i numeri, che a quel punto stanno
   su due file ordinate. Sotto i 44px non si scende: e' la misura minima
   comoda da toccare. */
@media (max-width: 767px) {
	.elementor-pagination {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}
	.elementor-pagination .page-numbers {
		min-width: 44px;
		height: 32px;
		padding: 0 6px;
		font-size: 15px;
	}
	.elementor-pagination .page-numbers.dots {
		display: none;
	}
}

@media (hover: hover) {
	.elementor-pagination a.page-numbers:hover {
		border-color: #031c59;
		color: #031c59;
	}
	.elementor-pagination a.prev.page-numbers:hover,
	.elementor-pagination a.next.page-numbers:hover {
		border-color: #031c59;
		background: #031c59;
		color: #fff;
	}
}

/* ===================================================================
 * Logo 2026 — vincolo di altezza
 *
 * Il marchio nuovo ha un rapporto di 2,6:1 contro il 5,45:1 del
 * precedente: a parità di larghezza verrebbe più che doppio in altezza
 * e sfonderebbe la barra dell'header. Elementor imposta width:100% sul
 * contenitore (20% su desktop, 55% su mobile), quindi il vincolo va
 * messo sull'altezza e la larghezza lasciata libera.
 *
 * 42px e 31px non sono scelte estetiche: sono le altezze che il logo
 * vecchio aveva davvero, misurate sul sito. Servono a non far muovere
 * nulla intorno. La dimensione definitiva del marchio nuovo è una
 * decisione di design ancora da prendere: nel Figma la navbar mostra
 * ancora il logo precedente.
 *
 * La specificità replica quella della regola di Elementor e aggiunge
 * body, così vince senza ricorrere a !important.
 * =================================================================== */
body .elementor-25 .elementor-element.elementor-element-59761be img,
body .elementor-50 .elementor-element.elementor-element-cd1cfff img {
	width: auto;
	max-width: 100%;
	height: 42px;
}

@media (max-width: 767px) {
	body .elementor-25 .elementor-element.elementor-element-59761be img,
	body .elementor-50 .elementor-element.elementor-element-cd1cfff img {
		height: 31px;
	}
}

/* ---------------------------------------------------------------------------
   Pagina dei risultati di ricerca (template Elementor 1883)

   I risultati che non sono prodotti vengono resi con il loop item
   "loop risultato pagina" (11806): titolo linkato + estratto, stile SERP.
   Dentro una griglia a 4 colonne una voce cosi' non ha senso incolonnata,
   quindi si prende la riga intera.
   --------------------------------------------------------------------------- */

/* equal_height sul widget impone grid-auto-rows:1fr, cioe' righe tutte alte
   uguali: una riga SERP verrebbe stirata all'altezza di una card prodotto.
   Le righe tornano a misura di contenuto; le card restano allineate fra loro
   grazie all'height:100% che Elementor applica gia' a ogni item. */
/* Il selettore di Elementor e' .elementor-1883 .elementor-element.elementor-element-4d0a59d
   .elementor-loop-container: senza il body davanti questa regola perderebbe per specificita'. */
body .elementor-1883 .elementor-element.elementor-element-4d0a59d .elementor-loop-container {
	grid-auto-rows: auto;
}

.elementor-1883 .e-loop-item:not(.type-product) {
	grid-column: 1 / -1;
	/* Raggruppa le righe SERP in fondo alla pagina di risultati corrente.
	   L'auto-placement della griglia rispetta "order", quindi non restano
	   incastrate fra le card lasciando mezze righe vuote.
	   Il raggruppamento si ferma alla pagina corrente di proposito: farlo
	   sulla query spingerebbe le pagine dopo TUTTI i prodotti, cioe' alla
	   quarta o quinta pagina di paginazione, di fatto irraggiungibili. */
	order: 1;
}

.sea-serp {
	padding: 20px 0;
	border-bottom: 1px solid #e3e3e3;
}

/* Il colore del titolo e' impostato in Elementor sull'heading: senza questo
   l'ancora interna verrebbe ridipinta dal colore link globale del kit. */
.sea-serp .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
}

.sea-serp .elementor-heading-title a:hover {
	text-decoration: underline;
}

/* ===================================================================
   Header delle pagine di listing prodotti su mobile

   Figma 774-3189: fascia con l'immagine di categoria a tutta larghezza,
   velo nero al 40% sopra, titolo bianco in basso a sinistra. Altezza,
   ritaglio, velo e allineamento stanno nei controlli mobile di Elementor;
   qui resta solo il colore del titolo, perche' i controlli di colore di
   Elementor non hanno variante responsive e sul desktop il titolo e' nero.

   Le sei pagine categoria sono state duplicate dalla stessa, quindi
   condividono gli id degli elementi: una regola le copre tutte.
   =================================================================== */
@media (max-width: 767px) {
	.elementor-element-fb66ad8 .elementor-heading-title {
		color: #fff;
	}
}

/* ===================================================================
   Card prodotto mobile (loop item 645, variante 6b3888e)

   Figma 774-3284: l'immagine e' un quadrato 99x99 ritagliato, non una
   foto in proporzione libera. Elementor non ha un controllo di rapporto
   sul widget immagine in evidenza, quindi il quadrato si impone qui.

   La variante e' nascosta su desktop e tablet, ma il selettore resta
   comunque dentro la media query: se un domani venisse mostrata anche
   altrove, questa regola non la seguirebbe di nascosto.
   =================================================================== */
@media (max-width: 767px) {
	.elementor-element-6b3888e .elementor-element-fb1942a img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
		width: 100%;
		height: auto;
	}
}

/* ===================================================================
   Listing prodotti su mobile — ritmo verticale

   Figma 774-3189: 21px fra la fascia dell'header e la riga dei filtri,
   e altri 21px fra la riga dei filtri e il primo prodotto. Il sito ne
   aveva 58 e 114, sommati da piu' contributi diversi:

   - `.py-3` sui contenitori vale 3em, cioe' 48px
   - lo spazio widget del kit aggiunge 10px sopra e sotto ogni blocco
   - il contenitore della sidebar resta in pagina anche su mobile, dove
     il suo contenuto vive nel bottom sheet: era alto 20px di solo padding
   - dentro il widget shortcode gli spazi attorno all'output formano una
     riga di testo vuota da ~16px, che non si vede ma occupa

   Le sei pagine categoria sono duplicate dalla stessa, quindi gli id
   degli elementi coincidono e una regola le copre tutte. Il `body`
   davanti serve a superare la specificita' delle regole di Elementor.
   =================================================================== */
@media (max-width: 767px) {
	body .elementor-element-277667d {
		padding-top: 21px;
		padding-bottom: 0;
	}
	body .elementor-element-277667d > .elementor-element {
		margin-block: 0;
	}
	/* Azzera la riga anonima; il contenuto vero si riprende la sua interlinea. */
	body .elementor-element-277667d .elementor-shortcode {
		line-height: 0;
	}
	body .elementor-element-277667d .sea-filters {
		line-height: normal;
	}

	/* I container "boxed" di Elementor tengono il padding su .e-con-inner, non
	   sull'involucro esterno: senza queste due righe i 10px di default si
	   sommavano ai 21 voluti. */
	body .elementor-element-277667d > .e-con-inner,
	body .elementor-element-f7ed685 > .e-con-inner {
		padding-block: 0;
	}

	/* La barra dei filtri porta un margine inferiore suo (16px) pensato per il
	   caso in cui stia da sola. Qui la spaziatura la detta il contenitore,
	   quindi il margine e' un doppione. */
	body .elementor-element-277667d .sea-filters__mobile-bar {
		margin-bottom: 0;
	}

	body .elementor-element-29a00b9 {
		padding: 0;
		margin-block: 0;
	}

	body .elementor-element-69c6de3 {
		padding-top: 21px;
		margin-block: 0;
	}
}

/* ===================================================================
   Loop grid su mobile: altezza delle righe

   L'opzione "altezza uguale" del widget genera grid-auto-rows:1fr, che
   in una griglia ad altezza libera rende TUTTE le righe alte quanto la
   piu' alta. Con una sola colonna significa che una card con la
   descrizione lunga alza anche tutte le altre, lasciando dentro ogni
   card un vuoto di un centinaio di pixel.

   L'opzione non ha variante responsive, quindi la correzione vive qui.
   Le card restano comunque allineate fra loro dentro la stessa riga:
   Elementor applica gia' height:100% a ogni item.
   =================================================================== */
@media (max-width: 767px) {
	/* Il selettore di Elementor pesa 4 classi
	   (.elementor-NNN .elementor-element.elementor-element-XXX .elementor-loop-container):
	   servono almeno altrettante per prevalere. */
	body .elementor-element.elementor-widget.elementor-widget-loop-grid .elementor-loop-container {
		grid-auto-rows: auto;
	}
}

/* ===================================================================
   MAPPA AGENTI — vestizione del plugin sea-technology-locator

   Il CSS del plugin e' dichiaratamente minimale: fa layout, spaziature
   e colore dei pin, e lascia al tema tipografia e cromatismo, esponendo
   delle custom property per l'aggancio. Lo stile SEA sta quindi qui e
   non dentro il plugin, che resta neutro e riutilizzabile.

   Non esiste un design di riferimento per questa pagina: i valori sono
   presi da quelli gia' in uso altrove sul sito — navy #031c59, azzurro
   #009cda, campo #f2f5f7, raggio 20px sulle schede e 10px sui campi,
   Archivo Narrow, etichette in maiuscoletto grigio come nelle card
   prodotto.
   =================================================================== */

/* Il plugin dichiara le stesse variabili su .sea-loc ed e' caricato dopo:
   senza il body davanti i suoi valori vincerebbero e questi override
   sarebbero inerti — proprio quelli che il plugin invita a fare. */
body .sea-loc {
	--sea-loc-navy: #031c59;
	--sea-loc-azzurro: #009cda;
	--sea-loc-link: #0091d9;
	--sea-loc-campo: #f2f5f7;
	--sea-loc-muted: #7a7a7a;
	--sea-loc-bordo: #e3e3e3;

	/* Variabili del plugin: i pin passano alla palette del sito. Oggi
	   l'unico tipo popolato e' "agente" (24 punti), gli altri tre sono a
	   zero: restano definiti perche' il giorno che si popolano non escano
	   con i colori di default del plugin. */
	--sea-loc-pin: #031c59;
	--sea-loc-pin-agente: #031c59;
	--sea-loc-pin-rivenditore: #009cda;
	--sea-loc-pin-assistenza: #c2410c;
	--sea-loc-pin-distributore: #5b6b8c;
	--sea-loc-gap: 24px;

	font-family: "Archivo Narrow", sans-serif;
}

/* --- Filtri --- */

.sea-loc-filtri {
	gap: 16px;
}

.sea-loc-filtri label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sea-loc-muted);
}

.sea-loc-filtri select,
.sea-loc-filtri input[type="search"] {
	height: 52px;
	padding: 0 16px;
	border: 1px solid var(--sea-loc-bordo);
	border-radius: 10px;
	background: #fff;
	color: #000;
	font-family: inherit;
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}

/* La freccia nativa della select cambia da browser a browser: qui e'
   disegnata, cosi' e' la stessa ovunque e del colore giusto. */
.sea-loc-filtri select {
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23031c59' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
}

.sea-loc-filtri input[type="search"]::placeholder {
	color: var(--sea-loc-muted);
	opacity: 1;
}

.sea-loc-filtri select:focus,
.sea-loc-filtri input[type="search"]:focus {
	border-color: var(--sea-loc-azzurro);
	outline: none;
}

.sea-loc-azioni button[type="submit"] {
	height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 999px;
	background: var(--sea-loc-azzurro);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .15s ease;
}

.sea-loc-azioni [data-sea-reset] {
	color: var(--sea-loc-muted);
	font-size: 14px;
	text-decoration: none;
	transition: color .15s ease;
}

@media (hover: hover) {
	.sea-loc-azioni button[type="submit"]:hover { background: var(--sea-loc-navy); }
	.sea-loc-azioni [data-sea-reset]:hover {
		color: var(--sea-loc-navy);
		text-decoration: underline;
	}
}

/* --- Mappa --- */

/* Il CSS del plugin e' caricato dopo questo file: a parita' di peso
   vincerebbe lui. La classe contenitore davanti basta a ribaltarlo. */
.sea-loc .sea-loc-mappa {
	border: 0;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* --- Risultati --- */

/* La colonna dei risultati scorre per conto suo: senza questo le schede
   toccano la barra di scorrimento, e l'ombra a destra viene tranciata.
   Il valore e' lo stesso dello stacco fra una scheda e l'altra. */
.sea-loc .sea-loc-risultati {
	padding-right: 12px;
}

.sea-loc-conteggio {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sea-loc-muted);
	margin-bottom: 12px;
}

.sea-loc-lista {
	gap: 12px;
}

.sea-loc .sea-loc-item {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sea-loc-bordo);
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Le schede sono cliccabili (centrano la mappa sul punto): lo stato di
   passaggio deve dirlo, altrimenti sembrano testo inerte. */
.sea-loc .sea-loc-item:hover,
.sea-loc .sea-loc-item:focus-within {
	border-color: var(--sea-loc-azzurro);
	box-shadow: 0 4px 14px rgba(3, 28, 89, .10);
}

.sea-loc-item h3 {
	margin: 0 0 2px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--sea-loc-navy);
}

.sea-loc-tipo {
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sea-loc-muted);
}

.sea-loc-referente {
	font-size: 16px;
	color: #000;
}

.sea-loc-contatti {
	gap: 4px 16px;
	font-size: 15px;
}

.sea-loc-contatti a {
	color: var(--sea-loc-link);
	font-weight: 700;
	text-decoration: none;
}

@media (hover: hover) {
	.sea-loc-contatti a:hover { text-decoration: underline; }
}

/* --- Province di competenza --- */

.sea-loc-copertura summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sea-loc-navy);
	font-size: 14px;
	font-weight: 700;
}

/* Il triangolino nativo di <summary> non e' stilabile: si toglie e se ne
   disegna uno che ruota all'apertura. */
.sea-loc-copertura summary::-webkit-details-marker { display: none; }
.sea-loc-copertura summary::marker { content: ""; }

.sea-loc-copertura summary::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}

.sea-loc-copertura[open] summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.sea-loc-copertura summary h4 {
	font-size: 14px;
	font-weight: 700;
	color: inherit;
}

.sea-loc-copertura p {
	font-size: 14px;
	color: var(--sea-loc-muted);
}

/* --- Cluster e popup di Leaflet ---
   MarkerCluster.Default.css arriva da CDN col suo verde/giallo/arancio:
   qui i tre livelli passano alla scala del sito, dall'azzurro al navy. */

/* Stessa ragione per i cluster: MarkerCluster.Default.css arriva da CDN
   in coda a tutto. */
.leaflet-container .marker-cluster div {
	font-family: "Archivo Narrow", sans-serif;
	font-weight: 700;
	color: #fff;
}

.leaflet-container .marker-cluster-small      { background: rgba(0, 156, 218, .30); }
.leaflet-container .marker-cluster-small div  { background: #009cda; }
.leaflet-container .marker-cluster-medium     { background: rgba(0, 110, 175, .30); }
.leaflet-container .marker-cluster-medium div { background: #006eaf; }
.leaflet-container .marker-cluster-large      { background: rgba(3, 28, 89, .30); }
.leaflet-container .marker-cluster-large div  { background: #031c59; }

.leaflet-popup-content-wrapper {
	border-radius: 14px;
}

.sea-loc-popup h3 {
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--sea-loc-navy);
}

/* --- Mobile --- */

@media (max-width: 782px) {
	/* Il plugin tiene i campi su una riga con flex: 1 1 12rem e min-width 12rem.
	   Sotto i 400px ci stanno solo a costo di tagliare l'ultimo elemento, che
	   e' il link "Azzera": qui vanno a capo uno per riga. Serve la classe
	   contenitore davanti perche' il foglio del plugin e' caricato dopo. */
	.sea-loc .sea-loc-filtri p,
	.sea-loc .sea-loc-filtri p.sea-loc-azioni {
		flex: 1 1 100%;
		min-width: 0;
	}

	.sea-loc .sea-loc-azioni { justify-content: space-between; }
	.sea-loc .sea-loc-azioni button[type="submit"] { flex: 1 1 auto; }
}

/* ===================================================================
   Mobile: margine minimo di 20px dal bordo su tutto il contenuto

   Richiesta: "in tutte le pagine mobile i contenitori devono avere
   almeno 20px di padding a destra e sinistra", lo stesso della navbar.
   Il default dei container Elementor e' 10px, e si vedeva: titoli e
   immagini arrivavano a 10-16px dal bordo mentre la navbar stava a 20.

   E' un minimo, non un valore fisso: `max()` sulla variabile di
   Elementor lascia intatti i container che hanno gia' un padding piu'
   generoso (per esempio l'header di categoria, che sta a 20 suo).

   Vale solo per i container di PRIMO livello dei documenti di pagina:
   quelli annidati tengono il loro, altrimenti il margine si sommerebbe
   a ogni livello. L'header e' escluso di proposito — la sua pillola e'
   gia' centrata a 20px e aggiungerne altri 20 la stringerebbe.

   Gli sfondi restano a tutta larghezza: il padding insetta il contenuto,
   non il container, quindi le fasce colorate e le immagini di testata
   continuano a toccare i bordi come devono.
   =================================================================== */
@media (max-width: 767px) {
	[data-elementor-type="wp-page"] > .e-con.e-parent,
	[data-elementor-type="single-post"] > .e-con.e-parent,
	[data-elementor-type="product"] > .e-con.e-parent,
	[data-elementor-type="search-results"] > .e-con.e-parent,
	[data-elementor-type="archive"] > .e-con.e-parent,
	[data-elementor-type="footer"] > .e-con.e-parent {
		--padding-inline-start: max(20px, var(--padding-left, 0px));
		--padding-inline-end: max(20px, var(--padding-right, 0px));
	}
}

/* --- Il perche' della riga qui sotto ---------------------------------
   Elementor dichiara sui container:
       --padding-left: var(--container-default-padding-left, 10px)
   e il kit di questo sito non imposta quella variabile. Risultato: OGNI
   container, anche annidato, si porta dietro 10px orizzontali che non ha
   scelto nessuno. Con la regola dei 20px sul primo livello, un container
   dentro l'altro faceva 20+10 e le card finivano a 30 dal bordo invece
   che a 20 — in home, nelle categorie e nelle news.

   Azzerando la variabile il default sparisce e restano solo i padding
   davvero impostati: i container di primo livello prendono i loro 20 e
   gli annidati non aggiungono nulla. Si azzerano solo i lati: sopra e
   sotto il default resta, perche' li' fa da spaziatura verticale.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
	body {
		--container-default-padding-left: 0px;
		--container-default-padding-right: 0px;
	}
}

/* --- Footer mobile: le due colonne non riempivano la riga --------------
   Erano al 46% ciascuna dentro 353px utili: 46+46 piu' i 20px di gap
   lasciavano 8px di avanzo, che finivano tutti a destra. La colonna di
   sinistra partiva a 20 e quella di destra chiudeva a 28.
   Meta' riga meno meta' gap fa tornare il conto esatto.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-element-f24dc42,
	.elementor-element-c15d876 {
		width: calc(50% - 10px);
	}
}

/* --- Home mobile: distanze del blocco dei tre banner ------------------
   Figma "Menu mobile": 28px fra la fascia blu dell'header e il primo
   banner, 20px fra un banner e l'altro, 28px sotto l'ultimo.
   I 28px e i 20px stanno in Elementor (padding e gap del contenitore
   hero), ma il contenitore porta anche `.py-3`, che vale 48px e si
   somma ai 28 portandoli a 76. Su desktop quei 48px servono, quindi
   li si toglie solo sotto i 768px.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
	.elementor-element-2fa20e2.py-3 {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* ===================================================================
 * Articoli: gallerie [gallery] in riga e non in colonna
 *
 * Lo shortcode classico stampa <div class="gallery gallery-columns-N">
 * con dentro delle <figure>, ma senza portarsi dietro nessun foglio di
 * stile: WordPress lo aggiunge solo se il tema non lo disattiva, e
 * hello-elementor lo disattiva. Risultato, in 33 articoli le figure
 * restavano una sotto l'altra a tutta larghezza — quello che le card
 * chiamano "galleria da rendere orizzontale".
 *
 * Le colonne le dice gia' il markup (gallery-columns-1..9), qui si
 * traducono in una griglia. Su mobile piu' di due colonne non stanno:
 * da tre in su si scende a due.
 * =================================================================== */
.elementor-widget-theme-post-content .gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin: 24px 0;
}

.elementor-widget-theme-post-content .gallery-columns-1 { grid-template-columns: 1fr; }
.elementor-widget-theme-post-content .gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.elementor-widget-theme-post-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.elementor-widget-theme-post-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
/* Da cinque colonne in su le immagini diventano francobolli: nella
   galleria del GIC, sei su una fila, erano larghe 106px. Si lascia
   decidere alla larghezza disponibile, con 180px come minimo: sul
   contenuto dell'articolo vengono tre per fila. */
.elementor-widget-theme-post-content .gallery-columns-5,
.elementor-widget-theme-post-content .gallery-columns-6,
.elementor-widget-theme-post-content .gallery-columns-7,
.elementor-widget-theme-post-content .gallery-columns-8,
.elementor-widget-theme-post-content .gallery-columns-9 {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.elementor-widget-theme-post-content .gallery-item {
	margin: 0;
	/* Le didascalie restano attaccate alla propria immagine anche quando
	   le immagini della stessa galleria hanno altezze diverse. */
	align-self: start;
}

.elementor-widget-theme-post-content .gallery-icon { line-height: 0; }

.elementor-widget-theme-post-content .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.elementor-widget-theme-post-content .gallery-caption {
	display: block;
	margin-top: 8px;
	color: #666;
	font-size: 14px;
	line-height: 1.3;
}

@media (max-width: 767px) {
	.elementor-widget-theme-post-content .gallery-columns-3,
	.elementor-widget-theme-post-content .gallery-columns-4,
	.elementor-widget-theme-post-content .gallery-columns-5,
	.elementor-widget-theme-post-content .gallery-columns-6,
	.elementor-widget-theme-post-content .gallery-columns-7,
	.elementor-widget-theme-post-content .gallery-columns-8,
	.elementor-widget-theme-post-content .gallery-columns-9 {
		grid-template-columns: repeat(2, 1fr);
	}
	.elementor-widget-theme-post-content .gallery { gap: 12px; }
}