/* 
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; }
}

/* =========================================
   VIDEO NELLA GALLERIA DEL PRODOTTO
   Il riquadro arriva da sea_video_prodotto_galleria() in functions.php.
   Si comporta come le foto: stessa card bianca arrotondata, stessa altezza
   della galleria, con il video 16:9 centrato dentro.
========================================= */
/* Il contenitore delle diapositive non ha altezza propria: gliela diamo,
   altrimenti l'altezza al 100%% della diapositiva video non ha su cosa
   appoggiarsi e il video resta attaccato in alto. */
.flex-viewport > .woocommerce-product-gallery__wrapper {
	height: 100%;
}

.woocommerce-product-gallery__wrapper .sea-video-slide {
	/* flexslider scrive display:block sulle diapositive direttamente
	   nell'elemento: senza !important la centratura non arriverebbe mai. */
	display: flex !important;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	/* min-height invece di height: se la percentuale non si risolve (succede
	   su Safari iOS) la card si riduce al contenuto invece di lasciare il
	   video libero di uscire dal riquadro. */
	height: auto;
	min-height: 100%;
	padding: 20px;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
}

.sea-video-slide__player {
	position: relative;
	width: 100%;
	/* altezza vera invece del vecchio padding-top: con l'altezza finta, su
	   Safari iOS l'iframe di YouTube si dimensionava sul proprio contenuto e
	   usciva dal riquadro bianco. translateZ obbliga Safari a ritagliare. */
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	transform: translateZ(0);
}

/* iOS precedenti alla 15 non conoscono aspect-ratio: li' vale il vecchio modo. */
@supports not (aspect-ratio: 16 / 9) {
	.sea-video-slide__player {
		height: 0;
		padding-top: 56.25%;
	}
}

.sea-video-slide__player iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* il freno all'espansione su Safari iOS */
	max-width: 100%;
	max-height: 100%;
	display: block;
	border: 0;
	border-radius: inherit;
}

/* Le miniature sotto la galleria: WooCommerce le mette in fila da quattro, e
   con il video diventano cinque, con la quinta a capo da sola. Qui stanno
   tutte su una riga, quadrate come le foto. */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs:has( li:nth-child(5) ):not( :has( li:nth-child(6) ) ) {
	grid-template-columns: repeat(5, 1fr);
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
	width: auto;
	float: none;
	margin: 0;
	clear: none;
}

.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

/* Sulla diapositiva del video la lente d'ingrandimento non serve (apre solo le
   foto) e finiva sotto il player. */
.woocommerce-product-gallery:has( .sea-video-slide.flex-active-slide ) .woocommerce-product-gallery__trigger {
	display: none;
}

/* La miniatura del video e' una foto come le altre: ci mettiamo sopra il
   triangolo di riproduzione, altrimenti non si capisce che apre un video. */
.flex-control-thumbs li {
	position: relative;
}

.flex-control-thumbs li:has( img[src*="ytimg.com"] )::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	transform: translate(-40%, -50%);
	border-left: 14px solid #fff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.65));
	pointer-events: none;
}

/* =========================================
   CARD CON VIDEO DI SFONDO (head homepage)
   YouTube mostra titolo e comandi lungo i bordi del player e non si possono
   togliere. Ingrandendo un poco il video restano fuori dal riquadro.
========================================= */
.sea-card-video .elementor-background-video-container {
	overflow: hidden;
}

/* Il translate e' quello che Elementor usa per centrare il video: va
   ripetuto, altrimenti lo scale lo sostituisce e il player si sposta. */
.sea-card-video .elementor-background-video-embed {
	transform: translate(-50%, -50%) scale(1.35);
}

/* La foto di Ancelotti nella seconda card: su telefono la fascia e' molto
   bassa e col taglio centrato restavano fuori le teste. La regola vale solo
   per quella card, cosi' CEMAS resta inquadrato come adesso. */
@media (max-width: 767px) {
	.e-loop-item-304.elementor-287 .elementor-element.elementor-element-ec2fca8:not(.elementor-motion-effects-element-type-background) {
		background-position: center top;
	}
}

/* =========================================
   CAROSELLO PRODOTTI IN EVIDENZA (home, da computer)
   Lo swiper dava alle diapositive un'altezza propria molto maggiore del
   contenuto, lasciando un vuoto sotto le schede. Qui l'altezza torna a
   dipendere dalla scheda piu' alta.
========================================= */
/* Il contenitore del carosello porta anche la classe della griglia di
   Elementor, quindi il browser lo dispone come griglia e ne calcola
   un'altezza enorme. Qui torna un blocco normale, e le diapositive
   prendono l'altezza del contenuto. */
.elementor-element-b999725 .swiper.elementor-grid {
	display: block;
}

.elementor-element-b999725 .swiper,
.elementor-element-b999725 .swiper-wrapper,
.elementor-element-b999725 .swiper-slide {
	height: auto;
}

.elementor-element-b999725 .swiper-slide > .e-con {
	height: 100%;
}

/* Dentro il carosello le classi "nascondi su..." di Elementor perdono la
   precedenza e la scheda prodotto compare due volte, versione desktop e
   versione mobile impilate: da qui l'altezza doppia. Le rimettiamo noi. */
@media (min-width: 1025px) {
	.elementor-element-b999725 .swiper-slide .elementor-hidden-desktop {
		display: none !important;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-element-b999725 .swiper-slide .elementor-hidden-tablet {
		display: none !important;
	}
}

/* Il carosello taglia tutto quello che esce dal suo riquadro, e con esso
   l'ombra delle schede sopra e sotto. Un po' di spazio interno le lascia
   respirare, recuperato con altrettanto margine negativo perche' la pagina
   non si muova di un pixel. */
.elementor-element-b999725 .swiper {
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: -10px;
	margin-bottom: -10px;
}

/* =========================================
   FOOTER — correzioni del 02/10
========================================= */

/* Il logo partiva 20px piu' a sinistra del testo delle colonne: il suo
   contenitore ha il padding orizzontale azzerato a mano, mentre la riga delle
   colonne e ogni colonna prendono i 10px di Elementor. Glieli rimettiamo. */
@media (min-width: 768px) {
	.elementor-50 .elementor-element.elementor-element-3fd8f4b > .e-con-inner {
		padding-inline-start: 20px;
		padding-inline-end: 20px;
	}
}

/* Su iPhone Safari riconosce da solo numeri di telefono e indirizzi email e li
   trasforma in link: senza un colore proprio cadevano sul nero globale e
   sparivano sul fondo blu. Con "inherit" prendono il colore del testo attorno,
   bianco nel blocco contatti e scuro nella riga in fondo. */
[data-elementor-type="footer"] a[href^="tel:"],
[data-elementor-type="footer"] a[href^="mailto:"] {
	color: inherit !important;
	-webkit-text-fill-color: currentColor !important;
	text-decoration: none !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}

/* Le quattro icone social non entravano in una riga fra 768 e 1366px e la
   quarta finiva sotto le altre, sbilanciando il blocco. Sopra i 1024px si
   rimpiccioliscono quanto basta per stare in fila; sotto si dispongono in un
   quadrato 2x2, che resta ordinato. */
@media (min-width: 1025px) and (max-width: 1366px) {
	.elementor-50 .elementor-element.elementor-element-b2334ac .elementor-grid {
		--grid-column-gap: 2px;
	}

	.elementor-50 .elementor-element.elementor-element-b2334ac .elementor-social-icon {
		font-size: 18px;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.elementor-50 .elementor-element.elementor-element-b2334ac .elementor-grid {
		display: grid;
		grid-template-columns: repeat(2, max-content);
		justify-content: center;
		--grid-column-gap: 6px;
	}
}

/* =========================================
   PAGINE DI TESTO (privacy, cookie policy)
   Sono pagine normali, senza Elementor: il tema non le impagina, quindi il
   testo arrivava a tutta larghezza e tutti i titoli avevano la stessa aria.
   Qui prendono una colonna leggibile e una scala tipografica.
   Il selettore vale per ogni pagina non costruita con Elementor, cosi' le
   prossime (termini, condizioni...) nascono gia' impaginate.
========================================= */
body:not(.elementor-page) .site-main {
	/* stessa misura e stessi margini laterali delle altre pagine: il kit di
	   Elementor tiene i contenuti entro 1400px con 20px di lato. */
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 20px 80px;
	color: #2b2b2b;
	font-size: 17px;
	line-height: 1.75;
}

/* Il testo pero' non va a tutta larghezza: si ferma dove si ferma nelle
   altre pagine (circa 900px), altrimenti le righe diventano illeggibili. */
body:not(.elementor-page) .site-main .page-header,
body:not(.elementor-page) .site-main .page-content > * {
	max-width: 900px;
}

body:not(.elementor-page) .site-main .page-header {
	margin-bottom: 36px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e2e8ee;
}

body:not(.elementor-page) .site-main .entry-title {
	margin: 0;
	font-size: 44px;
	line-height: 1.1;
}

body:not(.elementor-page) .site-main h2 {
	margin: 48px 0 14px;
	font-size: 26px;
	line-height: 1.25;
}

body:not(.elementor-page) .site-main h3 {
	margin: 32px 0 10px;
	font-size: 20px;
	line-height: 1.3;
}

body:not(.elementor-page) .site-main h4 {
	margin: 22px 0 6px;
	font-size: 17px;
	line-height: 1.4;
}

body:not(.elementor-page) .site-main h5 {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #6b7785;
	font-weight: 600;
}

body:not(.elementor-page) .site-main p {
	margin: 0 0 16px;
}

/* Nella privacy i titoletti di sezione non sono titoli veri ma grassetti a
   inizio paragrafo: gli diamo lo stesso respiro di un titolo. */
body:not(.elementor-page) .site-main .page-content p > strong:first-child {
	display: block;
	margin: 26px 0 2px;
	font-size: 18px;
	color: #111;
}

body:not(.elementor-page) .site-main .page-content > p:first-child > strong:first-child {
	margin-top: 0;
}

body:not(.elementor-page) .site-main ul,
body:not(.elementor-page) .site-main ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

body:not(.elementor-page) .site-main li {
	margin-bottom: 6px;
}

body:not(.elementor-page) .site-main a {
	color: #0b7fc4;
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere; /* gli indirizzi lunghi non sfondano la colonna */
}

body:not(.elementor-page) .site-main a:hover {
	color: var( --e-global-color-primary, #15BCFF );
}

/* I blocchi a fisarmonica dell'elenco cookie */
body:not(.elementor-page) .site-main details {
	margin: 10px 0;
	padding: 14px 18px;
	border: 1px solid #e2e8ee;
	border-radius: 12px;
	background: #fbfcfd;
}

body:not(.elementor-page) .site-main details[open] {
	background: #fff;
}

body:not(.elementor-page) .site-main summary {
	cursor: pointer;
}

/* Il triangolino e il nome del servizio sulla stessa riga: il contenuto del
   riepilogo e' un blocco e andava a capo da solo. */
body:not(.elementor-page) .site-main summary > div {
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 20px);
}

body:not(.elementor-page) .site-main summary h3 {
	display: inline;
	margin: 0;
	font-size: 18px;
}

body:not(.elementor-page) .site-main summary p {
	margin: 4px 0 0;
	font-size: 14px;
	color: #6b7785;
}

/* Le coppie etichetta/valore di ogni cookie, in due colonne */
body:not(.elementor-page) .site-main .cookies-per-purpose {
	display: grid;
	grid-template-columns: 150px 1fr;
	gap: 6px 18px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #eef2f6;
	font-size: 15px;
}

body:not(.elementor-page) .site-main .cookies-per-purpose .purpose {
	grid-column: 1 / -1;
}

body:not(.elementor-page) .site-main .cookies-per-purpose .purpose h4 {
	margin: 0 0 4px;
}

/* Le caselle di consenso sono del plugin del vecchio sito: qui non fanno
   niente, quindi restano fuori. */
body:not(.elementor-page) .site-main .cmplz_consent_per_service_label,
body:not(.elementor-page) .site-main .cmplz-accept-service {
	display: none;
}

@media (max-width: 767px) {
	body:not(.elementor-page) .site-main {
		padding: 32px 20px 64px;
		font-size: 16px;
	}

	body:not(.elementor-page) .site-main .entry-title {
		font-size: 32px;
	}

	body:not(.elementor-page) .site-main h2 {
		font-size: 22px;
		margin-top: 36px;
	}

	body:not(.elementor-page) .site-main .cookies-per-purpose {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	body:not(.elementor-page) .site-main .cookies-per-purpose > div:not(.purpose):nth-child(even) {
		margin-bottom: 10px;
	}
}