/* =========================================================================
   TURBOLOOP — Sistema grafico
   Foglio di sovrascrittura: agisce SOLO sull'aspetto.
   Nessuna modifica a testi, struttura HTML o funzioni del sito.

     1.  Font Inter (ospitato sul nostro server)
     2.  Sistema di design: colori, spessori, ombre, raggi
     3.  Base: tipografia e ritmo verticale
     4.  Intestazione fissa in alto
     5.  Fascia del titolo di pagina
     6.  Pulsanti e chiamate all'azione
     7.  Campi e moduli
     8.  Schede e riquadri
     9.  Shop: griglia prodotti
     10. Scheda prodotto
     11. Tabelle: ricerca, carrello, ordini
     12. Home
     13. Il mio account
     14. Piè di pagina
     15. Schermi piccoli
   ========================================================================= */


/* =========================================================================
   1. FONT — Inter, servito dal nostro dominio
   Nessuna richiesta a Google: i file stanno in turboloop-assets/fonts/.
   È un "variable font": un solo file copre tutti gli spessori da 100 a 900.
   ========================================================================= */

@font-face {
	font-family: 'Inter TL';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
		U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter TL';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =========================================================================
   2. SISTEMA DI DESIGN
   Tutti i valori grafici del sito stanno qui. Cambiando un colore in questo
   blocco cambia ovunque venga usato, senza cercarlo pagina per pagina.
   ========================================================================= */

:root {
	--tl-font: 'Inter TL', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Superfici e neutri — sfondo appena più freddo del bianco, così le schede
	   bianche si staccano dalla pagina senza bisogno di ombre pesanti. */
	--tl-surface: #ffffff;
	--tl-page: #f4f6f8;
	--tl-raised: #fafbfc;
	--tl-border: #e2e5ea;
	--tl-border-strong: #ccd2db;

	/* Testo — contrasto alto, richiesto per la leggibilità in officina. */
	--tl-text: #0f1521;
	--tl-text-soft: #4f5a6b;
	--tl-text-mute: #7b8697;
	--tl-text-invert: #eef1f6;

	/* Marchio: il blu del logo per le strutture, un blu più vivo per le azioni.
	   Un solo colore d'accento su tutto il sito, come da indicazione: niente
	   rosso. Il blu d'azione è più chiaro del blu delle strutture, altrimenti
	   i pulsanti si confonderebbero con il piè di pagina e l'intestazione. */
	--tl-navy: #141c33;
	--tl-navy-soft: #26314f;
	--tl-accent: #1d4ed8;
	--tl-accent-dark: #1739a8;
	--tl-accent-tint: rgba(29, 78, 216, 0.12);
	--tl-ok: #12805c;
	--tl-whatsapp: #25d366;
	--tl-whatsapp-dark: #1da851;

	/* Raggi */
	--tl-r-sm: 6px;
	--tl-r: 10px;
	--tl-r-lg: 14px;
	--tl-r-pill: 999px;

	/* Ombre: tre livelli, dal riposo al sollevamento. */
	--tl-sh-sm: 0 1px 2px rgba(15, 21, 33, 0.06);
	--tl-sh: 0 2px 8px rgba(15, 21, 33, 0.07);
	--tl-sh-lg: 0 10px 28px rgba(15, 21, 33, 0.13);
	--tl-ring: 0 0 0 3px rgba(20, 28, 51, 0.14);

	/* Ritmo verticale: un passo solo, riusato ovunque. */
	--tl-gap: 14px;
	--tl-section: 30px;

	/* Movimento */
	--tl-t: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Kadence espone i propri colori come variabili: ridefinendole qui, il tema
   si adegua da solo senza dover inseguire i singoli elementi. */
:root {
	--global-palette8: #ffffff;
	--global-palette7: #f0f2f5;
	--global-palette9: #ffffff;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Contorno di messa a fuoco visibile solo a chi naviga da tastiera. */
:focus-visible {
	outline: 2px solid var(--tl-navy);
	outline-offset: 2px;
}


/* =========================================================================
   3. BASE — tipografia e ritmo verticale
   Testi leggermente più contenuti ma con spessori più decisi e interlinea
   più stretta: si legge meglio occupando meno spazio in altezza.
   ========================================================================= */

body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--tl-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	font-size: 15px;
	line-height: 1.55;
	color: var(--tl-text);
	background: var(--tl-page);
}

/* Il corpo pagina resta bianco e si stacca dallo sfondo. */
#inner-wrap,
.site-container > .content-container {
	background: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6,
.entry-title,
.page-title {
	font-family: var(--tl-font);
	color: var(--tl-text);
	text-wrap: balance;
}

/* clamp() = la misura si adatta da sola fra un minimo e un massimo: una sola
   regola copre telefono, tablet e monitor. */
h1,
.page-title {
	font-size: clamp(26px, 3.1vw, 35px);
	font-weight: 750;
	letter-spacing: -0.024em;
	line-height: 1.16;
	margin-bottom: 0.4em;
}

h2 {
	font-size: clamp(20px, 2.3vw, 26px);
	font-weight: 700;
	letter-spacing: -0.018em;
	line-height: 1.26;
	margin-bottom: 0.45em;
}

h3 {
	font-size: 19px;
	font-weight: 650;
	letter-spacing: -0.012em;
	line-height: 1.34;
	margin-bottom: 0.45em;
}

h4 {
	font-size: 16px;
	font-weight: 650;
	line-height: 1.4;
}

p {
	margin-bottom: 0.85em;
}

a {
	color: var(--tl-navy);
	transition: color var(--tl-t);
}

a:hover {
	color: var(--tl-accent);
}

/* Spazi morti: il tema stacca il contenuto con 80 px di margine sopra e
   altrettanti sotto, più un'altra spaziatura interna. Sommati facevano oltre
   200 px di vuoto prima di arrivare al contenuto. */
#primary.content-area,
.content-area {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

#main,
.site-main {
	padding-top: var(--tl-section);
	padding-bottom: calc(var(--tl-section) * 1.4);
}

.entry-content-wrap {
	padding: 0;
}

.site-container,
.content-container {
	max-width: 1290px;
}


/* =========================================================================
   4. INTESTAZIONE — sottile, con l'aggancio in alto gestito da Kadence
   Il menu resta a portata durante lo scorrimento: su un catalogo di 5.500
   articoli si scorre molto, e tornare su per cercare era scomodo.
   ========================================================================= */

/* NIENTE DOPPIO AGGANCIO.
   Il tema Kadence ha già un suo meccanismo che tiene l'intestazione fissa in
   alto quando si scorre (classe "kadence-sticky-header", attivata dal pannello
   Personalizza). Il nostro precedente aggancio ("position: sticky" su tutta
   l'intestazione) si sovrapponeva al suo: l'involucro interno, gestito da
   Kadence, si spostava per conto proprio — con la barra di amministrazione di
   WordPress lo scarto era di 32px, messo inline da Kadence stesso — mentre il
   guscio esterno con la riga di chiusura restava fermo. Da qui la riga sfasata
   sotto il menu.

   La cura è NON avere un secondo aggancio: si lascia lavorare quello di
   Kadence (nativo, sa già gestire la barra di amministrazione) e ci si limita
   a dare l'aspetto giusto. Per questo qui NON c'è più "position: sticky". */
#masthead.site-header {
	background: #ffffff;
	border-bottom: 1px solid var(--tl-border);
	box-shadow: var(--tl-sh-sm);
}

/* Quando Kadence aggancia l'intestazione in alto aggiunge la classe
   "item-is-fixed": in quello stato le diamo lo sfondo quasi pieno con la
   leggera sfocatura. "Quasi" e non trasparente: all'82% il contenuto che
   scorreva sotto si vedeva in trasparenza, ed era l'altra metà del problema
   della riga. Al 96% la sfocatura si percepisce sui bordi ma niente traspare. */
.site-header-inner-wrap.kadence-sticky-header.item-is-fixed,
.site-header-upper-inner-wrap.kadence-sticky-header.item-is-fixed,
.site-main-header-inner-wrap.kadence-sticky-header.item-is-fixed {
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(180%) blur(16px);
	backdrop-filter: saturate(180%) blur(16px);
	border-bottom: 1px solid var(--tl-border);
	box-shadow: var(--tl-sh);
}

/* Se il browser non sa sfocare (versioni vecchie), lo sfondo diventa pieno. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.site-header-inner-wrap.kadence-sticky-header.item-is-fixed,
	.site-header-upper-inner-wrap.kadence-sticky-header.item-is-fixed,
	.site-main-header-inner-wrap.kadence-sticky-header.item-is-fixed {
		background: #ffffff;
	}
}

/* Barra più bassa: erano 80 px, diventano 62. */
#masthead .site-header-row {
	min-height: 62px;
	align-items: center;
}

/* Logo e menu incolonnati sullo stesso asse: se uno dei due fosse più alto
   della barra, sborderebbe oltre la riga di chiusura. */
#masthead .site-header-section,
#masthead .site-header-item {
	align-items: center;
}

#masthead .site-branding img.custom-logo {
	max-height: 40px;
	width: auto;
	transition: transform var(--tl-t);
}

#masthead .site-branding a.brand:hover img.custom-logo {
	transform: scale(1.02);
}

/* Voci di menu: sottolineatura che cresce al passaggio, invece del semplice
   cambio di colore. */
#masthead .header-navigation .menu-item > a {
	font-size: 14.5px;
	font-weight: 550;
	letter-spacing: -0.005em;
	color: var(--tl-text);
	/* Lo spazio fra una voce e l'altra è dato da questa spaziatura interna:
	   toglierla incollerebbe le voci una all'altra. */
	padding: 8px 13px;
	position: relative;
	transition: color var(--tl-t);
}

#masthead .header-navigation .menu-item > a::after {
	content: '';
	position: absolute;
	/* Allineata al testo, non al riquadro cliccabile. */
	left: 13px;
	right: 13px;
	bottom: 2px;
	height: 2px;
	background: var(--tl-accent);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--tl-t);
}

#masthead .header-navigation .menu-item > a:hover {
	color: var(--tl-accent);
}

#masthead .header-navigation .menu-item > a:hover::after,
#masthead .header-navigation .menu-item.current-menu-item > a::after {
	transform: scaleX(1);
}

#masthead .header-navigation .menu-item.current-menu-item > a {
	color: var(--tl-text);
}

/* Carrello */
#masthead .header-cart-wrap .header-cart-inner-wrap {
	border-radius: var(--tl-r-pill);
	transition: background-color var(--tl-t);
}

#masthead .header-cart-wrap .header-cart-inner-wrap:hover {
	background: var(--tl-page);
}

#masthead .header-cart-label,
#masthead .kadence-cart-total {
	background: var(--tl-accent);
	color: #fff;
	border-radius: var(--tl-r-pill);
	font-weight: 650;
	font-size: 11.5px;
}

/* Pulsante del menu a tendina su telefono */
#masthead .menu-toggle-open {
	border-radius: var(--tl-r-sm);
	transition: background-color var(--tl-t);
}

#masthead .menu-toggle-open:hover {
	background: var(--tl-page);
}


/* =========================================================================
   5. FASCIA DEL TITOLO DI PAGINA
   Era una banda alta quasi 200 px con dentro una sola parola.
   ========================================================================= */

.entry-hero-container-inner {
	background: linear-gradient(180deg, #ffffff 0%, var(--tl-page) 100%);
	border-bottom: 1px solid var(--tl-border);
	min-height: 0 !important;
}

.entry-hero .entry-header,
.entry-hero-container-inner .entry-header {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
	min-height: 0 !important;
}

.entry-hero .page-title,
.entry-hero .archive-title {
	margin: 0;
}

.entry-hero .kadence-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: 13px;
	color: var(--tl-text-mute);
	margin-bottom: 14px;
}

.woocommerce-breadcrumb a {
	color: var(--tl-text-soft);
}

.hero-section-overlay {
	display: none;
}


/* =========================================================================
   6. PULSANTI E CHIAMATE ALL'AZIONE
   Tre stati distinti: riposo, passaggio del mouse (si solleva), pressione
   (torna giù). Il movimento è minimo ma dà la sensazione del tasto premuto.
   ========================================================================= */

.button,
button,
input[type="submit"],
.wp-element-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	font-family: var(--tl-font);
	font-size: 14px;
	font-weight: 650;
	letter-spacing: 0.004em;
	line-height: 1.2;
	padding: 11px 20px;
	border-radius: var(--tl-r-sm);
	border: 1px solid transparent;
	box-shadow: none;
	cursor: pointer;
	transition: background-color var(--tl-t), border-color var(--tl-t),
		color var(--tl-t), transform var(--tl-t), box-shadow var(--tl-t);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wp-element-button:hover {
	transform: translateY(-1px);
	box-shadow: var(--tl-sh);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.wp-element-button:active {
	transform: translateY(0);
	box-shadow: var(--tl-sh-sm);
}

/* Azione principale: acquisto, invio, accesso. */
.single_add_to_cart_button,
.checkout-button,
.woocommerce button.button.alt,
.woocommerce a.button.alt,
input.button-primary,
.turboloop-btn,
.turboloop-shop-search button,
/* Accedi e Registrati sono l'azione principale della loro pagina, non un
   comando di contorno: vanno pieni come gli altri. */
.woocommerce-form-login__submit,
.woocommerce-form-register__submit,
.woocommerce-Button[name="login"],
.woocommerce-Button[name="register"],
.wpcf7-submit {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
	box-shadow: 0 1px 2px rgba(23, 57, 168, 0.25);
}

.single_add_to_cart_button:hover,
.checkout-button:hover,
.woocommerce button.button.alt:hover,
.woocommerce a.button.alt:hover,
input.button-primary:hover,
.turboloop-btn:hover,
.turboloop-shop-search button:hover,
.woocommerce-form-login__submit:hover,
.woocommerce-form-register__submit:hover,
.woocommerce-Button[name="login"]:hover,
.woocommerce-Button[name="register"]:hover,
.wpcf7-submit:hover {
	background: var(--tl-accent-dark);
	border-color: var(--tl-accent-dark);
	color: #fff;
	box-shadow: 0 4px 14px rgba(23, 57, 168, 0.32);
	transform: translateY(-1px);
}

.single_add_to_cart_button:focus-visible,
.checkout-button:focus-visible,
input.button-primary:focus-visible,
.turboloop-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--tl-accent-tint), 0 1px 2px rgba(23, 57, 168, 0.25);
}

/* Azione secondaria: contorno leggero, senza riempimento. */
.woocommerce a.button:not(.alt):not(.checkout-button),
.woocommerce button.button:not(.alt) {
	background: var(--tl-surface);
	color: var(--tl-text);
	border-color: var(--tl-border-strong);
}

.woocommerce a.button:not(.alt):not(.checkout-button):hover,
.woocommerce button.button:not(.alt):hover {
	background: var(--tl-raised);
	border-color: var(--tl-text-mute);
	color: var(--tl-text);
}

/* Eccezioni all'azione secondaria: "Accedi" e "Registrati" non portano la
   classe che WooCommerce usa per le azioni principali, quindi finivano fra i
   comandi di contorno pur essendo il gesto principale della loro pagina.
   Questo blocco va DOPO quello secondario: a parità di forza fra i selettori,
   fra due regole vince l'ultima scritta. */
.woocommerce button.button.woocommerce-form-login__submit,
.woocommerce button.button.woocommerce-form-register__submit,
.woocommerce button.button[name="login"],
.woocommerce button.button[name="register"],
.woocommerce input.button[name="login"],
.woocommerce input.button[name="register"] {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
	box-shadow: 0 1px 2px rgba(23, 57, 168, 0.25);
}

.woocommerce button.button.woocommerce-form-login__submit:hover,
.woocommerce button.button.woocommerce-form-register__submit:hover,
.woocommerce button.button[name="login"]:hover,
.woocommerce button.button[name="register"]:hover,
.woocommerce input.button[name="login"]:hover,
.woocommerce input.button[name="register"]:hover {
	background: var(--tl-accent-dark);
	border-color: var(--tl-accent-dark);
	color: #fff;
}


/* =========================================================================
   7. CAMPI E MODULI
   ========================================================================= */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
select:not(.orderby),
textarea,
.select2-container .select2-selection--single {
	font-family: var(--tl-font);
	font-size: 14.5px;
	color: var(--tl-text);
	background: var(--tl-surface);
	border: 1px solid var(--tl-border-strong);
	border-radius: var(--tl-r-sm);
	padding: 10px 13px;
	box-shadow: none;
	transition: border-color var(--tl-t), box-shadow var(--tl-t),
		background-color var(--tl-t);
}

/* Il menu a tendina dell'ordinamento è escluso: il tema gli disegna già la
   freccia come immagine di sfondo, e con la spaziatura qui sopra si sdoppiava. */

input[type="text"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="password"]:hover,
input[type="search"]:hover,
input[type="number"]:hover,
textarea:hover {
	border-color: var(--tl-text-mute);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:not(.orderby):focus,
textarea:focus {
	border-color: var(--tl-navy);
	box-shadow: var(--tl-ring);
	outline: none;
}

::placeholder {
	color: var(--tl-text-mute);
	opacity: 1;
}

label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--tl-text-soft);
	margin-bottom: 5px;
	display: inline-block;
}


/* =========================================================================
   8. SCHEDE E RIQUADRI — stile comune
   ========================================================================= */

.tl-card,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	box-shadow: var(--tl-sh-sm);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	font-size: 14px;
	padding: 13px 16px;
}

.woocommerce-message {
	border-left: 3px solid var(--tl-ok);
}

.woocommerce-info {
	border-left: 3px solid var(--tl-navy);
}

.woocommerce-error {
	border-left: 3px solid var(--tl-accent);
}


/* =========================================================================
   9. SHOP — griglia prodotti
   Le schede erano dominate dal riquadro immagine: la maggior parte dei
   ricambi non ha foto e mostrava un segnaposto grigio alto quasi 200 px.
   ========================================================================= */

ul.products.grid-cols {
	grid-gap: var(--tl-gap);
	gap: var(--tl-gap);
	margin-bottom: var(--tl-section);
}

ul.products li.product,
ul.products li.loop-entry {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	box-shadow: var(--tl-sh-sm);
	padding: 10px;
	overflow: hidden;
	transition: box-shadow var(--tl-t), border-color var(--tl-t),
		transform var(--tl-t);
}

ul.products li.product:hover,
ul.products li.loop-entry:hover {
	border-color: var(--tl-border-strong);
	box-shadow: var(--tl-sh-lg);
	transform: translateY(-3px);
}

ul.products li.product .woocommerce-loop-image-link,
ul.products li.product .product-details-image,
ul.products li.product a.woocommerce-LoopProduct-link {
	display: block;
	background: var(--tl-raised);
	border-radius: var(--tl-r-sm);
	overflow: hidden;
}

ul.products li.product img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	width: 100%;
	height: auto;
	max-height: 150px;
	mix-blend-mode: multiply;
	transition: transform var(--tl-t);
}

ul.products li.product:hover img {
	transform: scale(1.04);
}

/* Il blocco testo occupa tutto lo spazio che avanza nella scheda, così il
   pulsante può essere spinto in fondo (vedi più sotto) invece di lasciare un
   vuoto sotto di sé. Le schede di una stessa riga prendono tutte l'altezza
   della più alta: senza questo accorgimento, quelle con meno testo restavano
   con settanta pixel di niente in coda. */
ul.products li.product .product-details,
ul.products li.product .woocommerce-loop-product__title-wrap {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 8px 2px 0 !important;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: -0.005em;
	color: var(--tl-text);
	margin: 0 0 6px;
	text-transform: none;
}

ul.products li.product .price {
	font-size: 15px;
	font-weight: 700;
	color: var(--tl-text);
	line-height: 1.3;
	margin: 0;
}

ul.products li.product .price del {
	font-weight: 500;
	color: var(--tl-text-mute);
	font-size: 13px;
}

ul.products li.product .price ins {
	text-decoration: none;
	color: var(--tl-accent);
}

/* --- Segnaposto: logo al posto del quadretto grigio ---------------------
   L'immagine arriva dal file turboloop-ui-extra.php. Qui le si dà la
   trasparenza al 50% e la si tiene dentro il riquadro senza deformarla. */
ul.products li.product img.tl-segnaposto,
ul.products li.product img.woocommerce-placeholder,
.single-product img.tl-segnaposto,
.single-product img.woocommerce-placeholder,
.single-product .woocommerce-product-gallery img.tl-segnaposto,
.single-product .woocommerce-product-gallery img.woocommerce-placeholder,
.woocommerce-product-gallery__wrapper img.tl-segnaposto {
	opacity: 0.5;
	object-fit: contain;
	padding: 12%;
	mix-blend-mode: normal;
}

/* Nella scheda del singolo prodotto il riquadro è grande: il logo va tenuto
   più raccolto, altrimenti riempie mezza pagina.
   Nota: la trasparenza vale SOLO per il segnaposto. I prodotti che hanno una
   fotografia vera la mostrano piena, come dev'essere. */
.single-product .woocommerce-product-gallery img.tl-segnaposto,
.single-product .woocommerce-product-gallery img.woocommerce-placeholder {
	padding: 18%;
}

/* --- Pulsanti della scheda prodotto -------------------------------------
   Erano scritte in maiuscolo con una freccina, e su due righe si leggevano
   male ("AGGIUNGI AL / CARRELLO"). Diventano pulsanti veri, larghi quanto la
   scheda, così il punto in cui premere è evidente anche col dito.

   Il tema li mostra solo al passaggio del mouse: comodo su un computer,
   inutile su un telefono, dove il passaggio del mouse non esiste. Qui sono
   sempre visibili. */
/* "margin-top: auto" spinge il pulsante in fondo alla scheda: lo spazio che
   avanza finisce sopra di lui e non più sotto, e i pulsanti di tutta la riga
   risultano allineati sulla stessa linea. */
ul.products li.product .product-action-wrap {
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	transform: none !important;
	margin-top: auto !important; /* Il tema imponeva margine zero. */
	padding: 8px 0 0;
}

/* Il tema ha un'impostazione "pulsante in forma di testo" (classe
   woo-archive-btn-text sull'elenco) che impone spaziatura nulla, nessun bordo
   e tutto maiuscolo. Sono scelte dichiarate con forza, quindi per riportarle
   a un pulsante vero servono altrettanta forza e un selettore più specifico:
   è l'unico punto del foglio in cui si arriva a tanto, ed è segnalato apposta. */
ul.products.woo-archive-btn-text li.product .product-action-wrap .button,
ul.products li.product .product-action-wrap .button {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	text-align: center;
	padding: 7px 10px !important;
	font-size: 12.5px;
	font-weight: 650;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none !important; /* Erano tutte maiuscole: si leggono peggio. */
	text-decoration: none;
	border-radius: var(--tl-r-sm) !important;
	border: 1px solid var(--tl-accent) !important;
	transition: background-color var(--tl-t), border-color var(--tl-t),
		color var(--tl-t), box-shadow var(--tl-t), transform var(--tl-t);
}

/* La freccina in coda non serve dentro un pulsante. */
ul.products li.product .product-action-wrap .button span,
ul.products li.product .product-action-wrap .button svg {
	display: none;
}

/* "Aggiungi al carrello": è l'azione d'acquisto, quindi pulsante pieno. */
ul.products.woo-archive-btn-text li.product .product-action-wrap .add_to_cart_button,
ul.products li.product .product-action-wrap .add_to_cart_button {
	background: var(--tl-accent) !important;
	color: #fff !important;
	box-shadow: 0 1px 2px rgba(23, 57, 168, 0.25);
}

ul.products.woo-archive-btn-text li.product .product-action-wrap .add_to_cart_button:hover,
ul.products li.product .product-action-wrap .add_to_cart_button:hover {
	background: var(--tl-accent-dark) !important;
	border-color: var(--tl-accent-dark) !important;
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(23, 57, 168, 0.28);
}

/* "Leggi tutto": porta alla scheda, non compra. Stesso ingombro ma solo
   contorno, così a colpo d'occhio si distingue da ciò che si può comprare. */
ul.products.woo-archive-btn-text li.product .product-action-wrap .button:not(.add_to_cart_button),
ul.products li.product .product-action-wrap .button:not(.add_to_cart_button) {
	background: var(--tl-surface) !important;
	color: var(--tl-accent) !important;
}

ul.products.woo-archive-btn-text li.product .product-action-wrap .button:not(.add_to_cart_button):hover,
ul.products li.product .product-action-wrap .button:not(.add_to_cart_button):hover {
	background: var(--tl-accent-tint) !important;
	color: var(--tl-accent-dark) !important;
	border-color: var(--tl-accent-dark) !important;
	transform: translateY(-1px);
}

/* Stato "aggiunto": il tema aggiunge una spunta accanto al pulsante. */
ul.products li.product .added_to_cart {
	display: block;
	text-align: center;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tl-ok);
}

.woocommerce-result-count,
.woocommerce-ordering select {
	font-size: 13.5px;
	color: var(--tl-text-soft);
}

.woocommerce-products-header {
	margin-bottom: 14px;
}

/* Numeri di pagina: erano azzurri, colore che non appartiene al marchio.
   Il catalogo ha 232 pagine, quindi si usano parecchio. */
.woocommerce-pagination ul.page-numbers,
nav.woocommerce-pagination ul {
	border: none;
	/* inline-flex e non flex: altrimenti l'elenco diventa un blocco largo
	   quanto la pagina e il fondo bianco del tema si vede come una barra. */
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0;
	margin: 4px 0 0;
	background: transparent;
	border-radius: 0;
}

nav.woocommerce-pagination {
	text-align: left;
}

.woocommerce-pagination ul.page-numbers li {
	border: none;
	margin: 0;
	overflow: visible;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 11px;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r-sm);
	background: var(--tl-surface);
	color: var(--tl-text-soft);
	font-size: 14px;
	font-weight: 600;
	transition: background-color var(--tl-t), border-color var(--tl-t),
		color var(--tl-t), box-shadow var(--tl-t);
}

.woocommerce-pagination a.page-numbers:hover {
	border-color: var(--tl-border-strong);
	background: var(--tl-raised);
	color: var(--tl-text);
	box-shadow: var(--tl-sh-sm);
}

.woocommerce-pagination .page-numbers.current {
	background: var(--tl-navy);
	border-color: var(--tl-navy);
	color: #fff;
}

.woocommerce-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}


/* =========================================================================
   10. SCHEDA PRODOTTO
   ========================================================================= */

.single-product div.product {
	gap: 32px;
}

.single-product .woocommerce-product-gallery {
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	box-shadow: var(--tl-sh-sm);
	padding: 12px;
	max-width: 460px;
}

.single-product .woocommerce-product-gallery img {
	border-radius: var(--tl-r-sm);
	mix-blend-mode: multiply;
}

.single-product .product_title {
	margin-bottom: 10px;
}

.single-product .summary .price {
	font-size: 27px;
	font-weight: 750;
	letter-spacing: -0.02em;
	color: var(--tl-text);
	margin: 12px 0 16px;
}

.single-product .product_meta {
	font-size: 13.5px;
	color: var(--tl-text-soft);
	background: var(--tl-raised);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r-sm);
	padding: 12px 14px;
	margin-top: 18px;
}

.single-product .product_meta .sku_wrapper,
.single-product .product_meta .posted_in {
	display: block;
	margin-bottom: 4px;
}

.single-product .product_meta .sku_wrapper:last-child,
.single-product .product_meta .posted_in:last-child {
	margin-bottom: 0;
}

.woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--tl-border);
	margin-bottom: 18px;
	padding-left: 0;
}

.woocommerce-tabs ul.tabs li {
	border: none;
	background: none;
	margin: 0 18px 0 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li a {
	font-size: 14px;
	font-weight: 600;
	color: var(--tl-text-soft);
	padding: 10px 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
	transition: color var(--tl-t), border-color var(--tl-t);
}

.woocommerce-tabs ul.tabs li a:hover {
	color: var(--tl-text);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--tl-text);
	border-bottom-color: var(--tl-accent);
}

.woocommerce-tabs .panel > h2:first-child {
	display: none; /* Titolo ripetuto: resta quello della linguetta. */
}

/* Sezione "Ricambi correlati" (da turboloop-ricambi-compatibili.php).
   Riusa la griglia e le schede dello shop, quindi non serve ridisegnarla:
   qui basta staccarla dal resto. */
.tl-compatibili {
	margin-top: calc(var(--tl-section) * 1.2);
	padding-top: var(--tl-section);
	border-top: 1px solid var(--tl-border);
}

.tl-compatibili > h2 {
	margin-bottom: 16px;
}


/* =========================================================================
   11. TABELLE — risultati ricerca, carrello, ordini
   I tre componenti di ricerca avevano ognuno bordi e colori propri.
   ========================================================================= */

.turboloop-results-table,
.turboloop-results-table-modal,
.woocommerce table.shop_table,
table.woocommerce-orders-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	overflow: hidden;
	font-size: 14px;
	background: var(--tl-surface);
	box-shadow: var(--tl-sh-sm);
}

.turboloop-results-table thead th,
.turboloop-results-table-modal thead th,
.woocommerce table.shop_table thead th,
table.woocommerce-orders-table thead th {
	background: var(--tl-raised);
	color: var(--tl-text-soft);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 11px 14px;
	border: none;
	border-bottom: 1px solid var(--tl-border);
	text-align: left;
	white-space: nowrap;
}

.turboloop-results-table td,
.turboloop-results-table-modal td,
.woocommerce table.shop_table td,
table.woocommerce-orders-table td {
	padding: 11px 14px;
	border: none;
	border-bottom: 1px solid var(--tl-border);
	vertical-align: middle;
	color: var(--tl-text);
}

.turboloop-results-table tbody tr:last-child td,
.woocommerce table.shop_table tbody tr:last-child td {
	border-bottom: none;
}

.turboloop-results-table tbody tr,
.turboloop-results-table-modal tbody tr,
table.woocommerce-orders-table tbody tr {
	transition: background-color var(--tl-t);
}

.turboloop-results-table tbody tr:hover,
.turboloop-results-table-modal tbody tr:hover,
table.woocommerce-orders-table tbody tr:hover {
	background: var(--tl-raised);
}

.turboloop-table-wrapper {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: var(--tl-section);
}

/* Barra di ricerca dello shop: centrata nella pagina invece che appoggiata
   al margine sinistro. Il pulsante era rosso perché il colore è scritto
   dentro il suo file: qui viene riportato al blu del sistema. */
/* La barra porta con sé un proprio foglio di stile, che viene scritto nel
   corpo della pagina e quindi arriva dopo questo. Per centrarla serve un
   selettore più specifico del suo (basta anteporre "body"), altrimenti a
   parità di forza vince l'ultimo arrivato e la barra resta a sinistra. */
body .tl-shop-search,
body .turboloop-shop-search {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 22px;
}

.tl-shop-search .tl-shop-search__btn,
.turboloop-shop-search button {
	background: var(--tl-accent);
	border: none;
	color: #fff;
	border-radius: var(--tl-r-sm);
	font-weight: 650;
	box-shadow: 0 1px 2px rgba(23, 57, 168, 0.25);
	transition: background-color var(--tl-t), transform var(--tl-t),
		box-shadow var(--tl-t);
}

.tl-shop-search .tl-shop-search__btn:hover,
.turboloop-shop-search button:hover {
	background: var(--tl-accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(23, 57, 168, 0.32);
}

.tl-shop-search .tl-shop-search__input {
	border-radius: var(--tl-r-sm);
	border: 1px solid var(--tl-border-strong);
}

/* Icone davanti ai recapiti nella pagina Contatti. Qui le classi non servono:
   si agisce direttamente sui tre blocchi, riconosciuti dal loro
   identificativo (indirizzo, telefono, e-mail). */
body.page-id-18892 .elementor-element-1815bf5 h1::before,
body.page-id-18892 .elementor-element-1815bf5 h2::before,
body.page-id-18892 .elementor-element-1815bf5 h3::before,
body.page-id-18892 .elementor-element-1815bf5 h4::before,
body.page-id-18892 .elementor-element-bcf11ed h1::before,
body.page-id-18892 .elementor-element-bcf11ed h2::before,
body.page-id-18892 .elementor-element-bcf11ed h3::before,
body.page-id-18892 .elementor-element-bcf11ed h4::before,
body.page-id-18892 .elementor-element-3ce542c h1::before,
body.page-id-18892 .elementor-element-3ce542c h2::before,
body.page-id-18892 .elementor-element-3ce542c h3::before,
body.page-id-18892 .elementor-element-3ce542c h4::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 8px;
	vertical-align: -2px;
	background-color: var(--tl-accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

body.page-id-18892 .elementor-element-1815bf5 h1::before,
body.page-id-18892 .elementor-element-1815bf5 h2::before,
body.page-id-18892 .elementor-element-1815bf5 h3::before,
body.page-id-18892 .elementor-element-1815bf5 h4::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

body.page-id-18892 .elementor-element-bcf11ed h1::before,
body.page-id-18892 .elementor-element-bcf11ed h2::before,
body.page-id-18892 .elementor-element-bcf11ed h3::before,
body.page-id-18892 .elementor-element-bcf11ed h4::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.26-1.26a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.26-1.26a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

body.page-id-18892 .elementor-element-3ce542c h1::before,
body.page-id-18892 .elementor-element-3ce542c h2::before,
body.page-id-18892 .elementor-element-3ce542c h3::before,
body.page-id-18892 .elementor-element-3ce542c h4::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

/* Campo di ricerca in home */
.turboloop-minimal .turboloop-input {
	height: 48px;
	font-size: 15px;
	border-radius: var(--tl-r-sm);
	border: 1px solid var(--tl-border-strong);
	box-shadow: var(--tl-sh-sm);
}

.turboloop-minimal .turboloop-btn {
	height: 48px;
	padding: 0 26px;
	font-size: 14.5px;
	border-radius: var(--tl-r-sm);
}

.turboloop-minimal .turboloop-results {
	border-radius: var(--tl-r);
	border: 1px solid var(--tl-border);
	box-shadow: var(--tl-sh-lg);
	overflow: hidden;
}


/* =========================================================================
   12. HOME
   La home non usa i modelli di WooCommerce ma i contenitori di Elementor:
   le regole scritte per lo shop non la toccano, e infatti dopo il primo
   giro era rimasta identica a prima.

   Gli identificativi (eb9a838, 014c981…) sono quelli assegnati da Elementor
   ai contenitori. Se un giorno la sezione venisse rifatta da zero
   cambierebbero: basta allora aggiungere la classe indicata accanto a
   ciascun blocco da "Avanzate → Classi CSS" nell'editor.
   ========================================================================= */

/* La barra di ricerca sale sopra l'immagine di testata, subito sotto il menu:
   è la prima cosa che serve a chi arriva cercando un codice ricambio.
   L'ordine con cui i blocchi sono scritti nella pagina non cambia — cambia
   solo l'ordine in cui vengono disegnati, quindi in Elementor si continua a
   trovare tutto dov'era. */
body.home .elementor-12450 {
	display: flex;
	flex-direction: column;
}

body.home .elementor-element-eb9a838,
body.home .tl-home-ricerca {
	order: -1;
	padding-top: 18px;
	padding-bottom: 18px;
}

/* Riga delle due colonne: contenuto ancorato in alto, così i riquadri
   partono dalla stessa altezza (prima uno era centrato in verticale e
   iniziava 130 px più in basso dell'altro). */
body.home .elementor-element-4e96414,
body.home .elementor-element-014c981,
body.home .tl-home-colonne {
	align-items: flex-start;
	padding-top: 0;
	padding-bottom: 0;
	gap: 22px;
}

body.home .elementor-element-2c08c52,
body.home .elementor-element-926856f,
body.home .tl-home-card {
	/* Ogni riquadro alto quanto il suo contenuto: allungandoli entrambi
	   all'altezza del più alto, sotto ai contatti restava un vuoto di
	   trecento pixel. */
	align-self: flex-start;
	justify-content: flex-start;
	align-items: flex-start;
	text-align: left;
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	box-shadow: var(--tl-sh);
	padding: 26px 28px;
	transition: box-shadow var(--tl-t);
}

/* Titoli allineati al testo che sta sotto: erano centrati sopra un
   paragrafo allineato a sinistra. */
body.home .elementor-element-2c08c52 .elementor-widget-container,
body.home .elementor-element-926856f .elementor-widget-container,
body.home .elementor-element-2c08c52 .elementor-heading-title,
body.home .elementor-element-926856f .elementor-heading-title {
	text-align: left;
}

body.home .elementor-element-2c08c52:hover,
body.home .elementor-element-926856f:hover {
	box-shadow: var(--tl-sh-lg);
}

body.home .elementor-element-2c08c52 h1,
body.home .elementor-element-2c08c52 h2,
body.home .elementor-element-2c08c52 h3,
body.home .elementor-element-926856f h1,
body.home .elementor-element-926856f h2,
body.home .elementor-element-926856f h3 {
	margin-top: 0;
	margin-bottom: 14px;
	font-size: clamp(19px, 2vw, 23px);
}

/* Modulo di accesso: i campi restavano stretti, ma la causa non erano i campi.
   Il contenitore del modulo era largo 215 px (il tema lo dimensiona sui 20
   caratteri dell'attributo "size"), quindi un campo al 100% ereditava quella
   misura. Si allarga la catena dei contenitori, poi i campi seguono. */
body.home .elementor-element-926856f .elementor-widget,
body.home .elementor-element-926856f .elementor-widget-container,
body.home .elementor-element-926856f form,
body.home .elementor-element-926856f p {
	width: 100%;
	max-width: none;
}

body.home .elementor-element-926856f input[type="text"],
body.home .elementor-element-926856f input[type="password"] {
	width: 100%;
	max-width: 360px;
}

body.home .elementor > .e-con:last-child {
	margin-bottom: 8px;
}


/* =========================================================================
   12ter. ICONE DEI RECAPITI
   Piccoli simboli davanti a indirizzo, telefono ed e-mail. Sono disegni
   vettoriali scritti dentro il foglio di stile: nessun file da caricare,
   nessuna libreria di icone, e prendono il colore dal sistema (basta
   cambiare la variabile del blu perché cambino anche loro).

   La tecnica è la "maschera": il disegno ritaglia un rettangolo colorato,
   quindi il colore lo decidiamo noi e non è cotto dentro l'immagine.
   ========================================================================= */

.tl-ico::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 9px;
	vertical-align: -3px;
	background-color: var(--tl-accent);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Segnaposto su mappa */
.tl-ico-indirizzo::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Cornetta */
.tl-ico-telefono::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.26-1.26a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.12 4.2 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.1 9.9a16 16 0 0 0 6 6l1.26-1.26a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Cellulare */
.tl-ico-cellulare::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='2'/%3E%3Cline x1='12' y1='18' x2='12.01' y2='18'/%3E%3C/svg%3E");
}

/* Busta */
.tl-ico-email::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E");
}

/* Sui fondi scuri (piè di pagina) l'icona diventa chiara. */
#colophon .tl-ico::before {
	background-color: rgba(238, 241, 246, 0.85);
}

/* Pulsante WhatsApp: resta verde, che è il colore con cui l'applicazione è
   riconosciuta ovunque. È l'unica eccezione al blu. */
.tl-wa-btn,
a[href*="wa.me"],
a[href*="api.whatsapp.com"] {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--tl-whatsapp);
	color: #fff !important;
	font-weight: 650;
	font-size: 14.5px;
	line-height: 1.2;
	padding: 12px 20px;
	border-radius: var(--tl-r-sm);
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(29, 168, 81, 0.28);
	transition: background-color var(--tl-t), transform var(--tl-t),
		box-shadow var(--tl-t);
}

.tl-wa-btn:hover,
a[href*="wa.me"]:hover,
a[href*="api.whatsapp.com"]:hover {
	background: var(--tl-whatsapp-dark);
	color: #fff !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(29, 168, 81, 0.34);
}

.tl-wa-btn::before {
	content: '';
	width: 19px;
	height: 19px;
	flex: 0 0 19px;
	background-color: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.01c-1.52 0-3.01-.41-4.31-1.18l-.31-.18-3.2.84.85-3.12-.2-.32a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.2 8.2 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.25 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.84-.85 2.03s.87 2.35 1 2.51c.12.17 1.72 2.62 4.16 3.67.58.25 1.04.4 1.39.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.08.15-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.15h-.01c-1.52 0-3.01-.41-4.31-1.18l-.31-.18-3.2.84.85-3.12-.2-.32a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.2 8.2 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.25 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.24-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.13-1.05-.39-1.99-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.16 0-.43.06-.65.31-.22.25-.85.84-.85 2.03s.87 2.35 1 2.51c.12.17 1.72 2.62 4.16 3.67.58.25 1.04.4 1.39.51.58.19 1.11.16 1.53.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.08.15-1.18-.06-.11-.22-.17-.47-.29z'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* =========================================================================
   12quater. PAGINA CONTATTI — due colonne
   Prima: mappa altissima a piena larghezza, poi tre recapiti affiancati e
   disallineati fra loro, e il modulo relegato sotto, largo un terzo.
   Adesso: mappa contenuta in altezza, sotto due colonne — modulo a sinistra,
   recapiti incolonnati a destra.

   I tre blocchi sono contenitori Elementor fratelli: vengono disposti con
   una griglia, che permette di collocarli dove serve senza toccare l'ordine
   con cui stanno scritti nella pagina.
   ========================================================================= */

body.page-id-18892 .elementor-18892 {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	grid-template-rows: auto auto;
	gap: 26px;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Mappa: a tutta larghezza sopra, ma alta un terzo di prima. */
body.page-id-18892 .elementor-element-8313c21 {
	grid-column: 1 / -1;
	grid-row: 1;
	border-radius: var(--tl-r);
	overflow: hidden;
	border: 1px solid var(--tl-border);
	box-shadow: var(--tl-sh-sm);
}

body.page-id-18892 .elementor-element-8313c21 iframe,
body.page-id-18892 .elementor-element-8313c21 .elementor-custom-embed-play,
body.page-id-18892 .elementor-element-8313c21 > * {
	max-height: 360px;
}

/* Modulo a sinistra, dentro un riquadro. */
body.page-id-18892 .elementor-element-cc8e44c {
	grid-column: 1;
	grid-row: 2;
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	box-shadow: var(--tl-sh-sm);
	padding: 28px 30px;
	align-self: start;
}

body.page-id-18892 .elementor-element-cc8e44c .elementor-widget,
body.page-id-18892 .elementor-element-cc8e44c .elementor-widget-container {
	width: 100%;
}

/* Titolo del modulo (aggiunto da turboloop-ui-extra.php). */
.tl-form-titolo {
	width: 100%;
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--tl-border);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.018em;
}

body.page-id-18892 .elementor-element-cc8e44c input[type="text"],
body.page-id-18892 .elementor-element-cc8e44c input[type="email"],
body.page-id-18892 .elementor-element-cc8e44c input[type="tel"],
body.page-id-18892 .elementor-element-cc8e44c textarea,
body.page-id-18892 .elementor-element-cc8e44c .wpcf7-form-control-wrap {
	width: 100%;
	max-width: none;
}

body.page-id-18892 .elementor-element-cc8e44c .wpcf7-submit {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
	padding: 12px 26px;
	border-radius: var(--tl-r-sm);
	font-weight: 650;
}

body.page-id-18892 .elementor-element-cc8e44c .wpcf7-submit:hover {
	background: var(--tl-accent-dark);
}

/* Recapiti a destra, incolonnati uno sotto l'altro.
   Elementor non applica "flex-direction" direttamente: lo legge da una propria
   variabile. Impostare solo la proprietà standard non basta, la sua variabile
   vincerebbe e i tre blocchi resterebbero affiancati. Stessa cosa per la
   larghezza dei blocchi interni. */
body.page-id-18892 .elementor-element-bd7f9bd {
	grid-column: 2;
	grid-row: 2;
	--flex-direction: column;
	--container-widget-width: 100%;
	--container-widget-flex-grow: 0;
	--align-items: stretch;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	align-self: start;
	padding: 0;
}

/* Fra il contenitore e i tre recapiti c'è un involucro intermedio (Elementor
   lo aggiunge da solo): è lì che i blocchi vengono messi in fila, quindi è lì
   che va cambiata la direzione. Agire solo sul contenitore esterno non
   sortiva alcun effetto. */
body.page-id-18892 .elementor-element-bd7f9bd > .e-con-inner,
body.page-id-18892 .elementor-element-bd7f9bd > div {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	max-width: none;
	gap: 14px;
	padding: 0;
}

body.page-id-18892 .elementor-element-1815bf5,
body.page-id-18892 .elementor-element-bcf11ed,
body.page-id-18892 .elementor-element-3ce542c {
	width: 100% !important;
	max-width: none;
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	box-shadow: var(--tl-sh-sm);
	padding: 20px 22px;
}

body.page-id-18892 .elementor-element-bd7f9bd h1,
body.page-id-18892 .elementor-element-bd7f9bd h2,
body.page-id-18892 .elementor-element-bd7f9bd h3,
body.page-id-18892 .elementor-element-bd7f9bd h4 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tl-text-soft);
	margin-bottom: 8px;
}

body.page-id-18892 .elementor-element-bd7f9bd p {
	margin-bottom: 0.35em;
}

body.page-id-18892 .elementor-element-bd7f9bd p:last-child {
	margin-bottom: 0;
}


/* =========================================================================
   12bis. PAGINE DI TESTO — Assistenza, Condizioni, Privacy, Cookie
   Erano impostate a piena larghezza: il testo correva da un bordo all'altro
   dello schermo, con righe da oltre duecento caratteri e nessun margine
   laterale. Una riga così lunga è faticosa da seguire, perché tornando a
   capo l'occhio fatica a ritrovare l'inizio di quella dopo.

   Il contenuto viene raccolto in un riquadro centrato di larghezza limitata,
   che è anche la misura di lettura consigliata (circa settanta caratteri
   per riga).

   ATTENZIONE agli identificativi: la classe "content-width-fullwidth" NON si
   può usare come aggancio, perché ce l'hanno anche la home e Contatti, che a
   piena larghezza ci stanno bene (immagine di testata e mappa). Si agisce
   quindi sulle quattro pagine indicate:
     18865 = Assistenza · 18904 = Condizioni
     18879 = Privacy Policy · 18915 = Cookie Policy
   Per aggiungerne un'altra in futuro, basta metterne l'identificativo negli
   elenchi qui sotto (si legge nella barra degli indirizzi aprendo la pagina
   in modifica: post=NUMERO).
   ========================================================================= */

/* La larghezza di lettura la dà il riquadro stesso: limitarla anche sui
   paragrafi lascerebbe una fascia vuota lungo il bordo destro. */
body.page-id-18865 .content-container.site-container,
	body.page-id-18904 .content-container.site-container,
	body.page-id-18879 .content-container.site-container,
	body.page-id-18915 .content-container.site-container {
	max-width: 880px;
}

body.page-id-18865 .entry-content,
	body.page-id-18904 .entry-content,
	body.page-id-18879 .entry-content,
	body.page-id-18915 .entry-content {
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	box-shadow: var(--tl-sh-sm);
	padding: 38px 44px;
}

/* Interlinea più ampia del resto del sito: qui si legge di seguito, non si
   scorre in cerca di un codice. */
body.page-id-18865 .entry-content p,
	body.page-id-18904 .entry-content p,
	body.page-id-18879 .entry-content p,
	body.page-id-18915 .entry-content p,
body.page-id-18865 .entry-content li,
	body.page-id-18904 .entry-content li,
	body.page-id-18879 .entry-content li,
	body.page-id-18915 .entry-content li {
	line-height: 1.68;
}

body.page-id-18865 .entry-content h2,
	body.page-id-18904 .entry-content h2,
	body.page-id-18879 .entry-content h2,
	body.page-id-18915 .entry-content h2 {
	margin-top: 1.6em;
	padding-top: 1.1em;
	border-top: 1px solid var(--tl-border);
}

body.page-id-18865 .entry-content h2:first-child,
	body.page-id-18904 .entry-content h2:first-child,
	body.page-id-18879 .entry-content h2:first-child,
	body.page-id-18915 .entry-content h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

body.page-id-18865 .entry-content h3,
	body.page-id-18904 .entry-content h3,
	body.page-id-18879 .entry-content h3,
	body.page-id-18915 .entry-content h3 {
	margin-top: 1.5em;
}

body.page-id-18865 .entry-content ul,
	body.page-id-18904 .entry-content ul,
	body.page-id-18879 .entry-content ul,
	body.page-id-18915 .entry-content ul,
body.page-id-18865 .entry-content ol,
	body.page-id-18904 .entry-content ol,
	body.page-id-18879 .entry-content ol,
	body.page-id-18915 .entry-content ol {
	padding-left: 1.3em;
	margin-bottom: 1.1em;
}

body.page-id-18865 .entry-content li,
	body.page-id-18904 .entry-content li,
	body.page-id-18879 .entry-content li,
	body.page-id-18915 .entry-content li {
	margin-bottom: 0.45em;
}


/* =========================================================================
   12quinquies. BANNER DEI COOKIE
   Il pulsante "Accetta" era pieno e colorato, "Nega" grigio chiaro: due
   scelte con peso visivo diverso. Le linee guida europee chiedono che
   accettare e rifiutare abbiano pari evidenza, altrimenti il consenso non
   è considerato libero. Qui i due pulsanti vengono resi equivalenti:
   stessa dimensione, stesso contorno, stesso peso del testo — cambia solo
   il riempimento, che distingue senza sbilanciare.
   ========================================================================= */

#cmplz-cookiebanner-container .cmplz-btn,
.cmplz-cookiebanner .cmplz-btn {
	font-family: var(--tl-font);
	font-size: 14px;
	font-weight: 650;
	padding: 11px 20px;
	border-radius: var(--tl-r-sm);
	border: 1px solid var(--tl-border-strong);
	min-width: 150px;
	transition: background-color var(--tl-t), border-color var(--tl-t),
		color var(--tl-t);
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-accept:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
	background: var(--tl-accent-dark);
	border-color: var(--tl-accent-dark);
}

/* "Nega" con lo stesso ingombro e lo stesso contorno di "Accetta". */
#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny {
	background: var(--tl-surface);
	border-color: var(--tl-accent);
	color: var(--tl-accent);
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover {
	background: var(--tl-accent-tint);
	color: var(--tl-accent-dark);
	border-color: var(--tl-accent-dark);
}

#cmplz-cookiebanner-container .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-btn.cmplz-save-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
	background: var(--tl-surface);
	color: var(--tl-text-soft);
	border-color: var(--tl-border-strong);
}

#cmplz-cookiebanner-container a,
.cmplz-cookiebanner a {
	color: var(--tl-accent);
}


/* =========================================================================
   13. IL MIO ACCOUNT
   La pagina (identificativo 7442) era impostata a piena larghezza: l'elenco
   degli ordini e i moduli si stendevano da un bordo all'altro dello schermo.
   Qui non serve il riquadro stretto delle pagine di testo — c'è il menu
   laterale e ci sono le tabelle — ma la larghezza va riportata a quella del
   resto del sito.
   ========================================================================= */

body.page-id-7442 .content-container.site-container,
body.woocommerce-account .content-container.site-container {
	max-width: 1290px;
	padding-left: 20px;
	padding-right: 20px;
}

/* Pagina dei risultati di ricerca (18453): stessa larghezza del resto del
   sito. Non le si dà il riquadro stretto delle pagine di testo perché
   contiene la tabella dei risultati, che di spazio ne ha bisogno. */
body.page-id-18453 .content-container.site-container {
	max-width: 1290px;
	padding-left: 20px;
	padding-right: 20px;
}


.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--tl-surface);
	border: 1px solid var(--tl-border);
	border-radius: var(--tl-r);
	overflow: hidden;
	box-shadow: var(--tl-sh-sm);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	margin: 0;
	border-bottom: 1px solid var(--tl-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 11px 15px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tl-text-soft);
	text-decoration: none;
	transition: background-color var(--tl-t), color var(--tl-t),
		box-shadow var(--tl-t);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	background: var(--tl-raised);
	color: var(--tl-text);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: var(--tl-raised);
	color: var(--tl-text);
	font-weight: 650;
	box-shadow: inset 3px 0 0 var(--tl-accent);
}


/* =========================================================================
   14. PIÈ DI PAGINA
   Era una distesa chiara con molto vuoto e le colonne slegate fra loro.
   Diventa una fascia scura compatta: chiude la pagina e stacca dal
   contenuto senza bisogno di spazi vuoti.
   ========================================================================= */

#colophon.site-footer {
	background: var(--tl-navy);
	color: var(--tl-text-invert);
	margin-top: var(--tl-section);
}

#colophon .site-footer-wrap,
#colophon .site-footer-row-container-inner,
#colophon .site-middle-footer-wrap,
#colophon .site-top-footer-wrap,
#colophon .site-bottom-footer-wrap {
	background: transparent;
}

#colophon .site-middle-footer-inner-wrap {
	padding-top: 34px;
	padding-bottom: 26px;
	gap: 26px;
}

#colophon .site-bottom-footer-inner-wrap {
	padding-top: 14px;
	padding-bottom: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 13px;
	color: rgba(238, 241, 246, 0.72);
}

#colophon,
#colophon p,
#colophon li,
#colophon .widget-area {
	color: var(--tl-text-invert);
	font-size: 14px;
	line-height: 1.6;
}

#colophon h1,
#colophon h2,
#colophon h3,
#colophon h4,
#colophon h5,
#colophon .widget-title {
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

#colophon a {
	color: rgba(238, 241, 246, 0.86);
	text-decoration: none;
	transition: color var(--tl-t);
}

#colophon a:hover {
	color: #ffffff;
}

#colophon ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#colophon li {
	margin-bottom: 7px;
}

#colophon strong {
	color: #ffffff;
	font-weight: 650;
}

/* Il logo nel piè di pagina è scuro su fondo scuro: schiarito e ridotto. */
#colophon img {
	max-width: 190px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.92;
}


/* =========================================================================
   15. SCHERMI PICCOLI
   Bersagli grandi almeno 44 px (la misura di un polpastrello), spazi
   ridotti, tutto raggiungibile con una mano sola.
   ========================================================================= */

@media (max-width: 1024px) {
	.single-product .woocommerce-product-gallery {
		max-width: 380px;
	}
}

@media (max-width: 767px) {
	:root {
		--tl-gap: 10px;
		--tl-section: 22px;
	}

	body {
		font-size: 14.5px;
	}

	#masthead .site-header-row {
		min-height: 56px;
	}

	#masthead .site-branding img.custom-logo {
		max-height: 34px;
	}

	.entry-hero .entry-header,
	.entry-hero-container-inner .entry-header {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	ul.products li.product {
		padding: 8px;
	}

	ul.products li.product:hover {
		transform: none; /* Su schermo tattile il sollevamento non serve. */
	}

	ul.products li.product .woocommerce-loop-product__title {
		font-size: 12.5px;
	}

	ul.products li.product .price {
		font-size: 14px;
	}

	.single-product .woocommerce-product-gallery {
		max-width: 100%;
		margin-bottom: 18px;
	}

	.single-product .summary .price {
		font-size: 23px;
	}

	.turboloop-results-table,
	.turboloop-results-table-modal {
		font-size: 13.5px;
	}

	/* Bersagli comodi per il pollice. */
	.button,
	.woocommerce a.button,
	.woocommerce button.button,
	input[type="submit"] {
		min-height: 44px;
		padding: 12px 18px;
		font-size: 14px;
	}

	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="password"],
	input[type="search"],
	input[type="number"],
	select:not(.orderby),
	textarea {
		min-height: 44px;
		font-size: 16px; /* Sotto i 16 px iOS ingrandisce da solo la pagina. */
	}

	/* Ricerca in home: campo e pulsante larghi uguale. */
	.turboloop-search-row {
		align-items: stretch;
	}

	.turboloop-input-wrapper,
	.turboloop-minimal .turboloop-input,
	.turboloop-minimal .turboloop-btn {
		width: 100%;
		max-width: none;
	}

	body.home .elementor-element-2c08c52,
	body.home .elementor-element-926856f,
	body.home .tl-home-card {
		padding: 20px;
	}

	/* Campi del modulo di accesso larghi quanto il riquadro: restavano
	   stretti perché il tema assegna loro una larghezza fissa in caratteri. */
	body.home .elementor-element-926856f input[type="text"],
	body.home .elementor-element-926856f input[type="password"],
	body.home .elementor-element-926856f p {
		width: 100%;
		max-width: none;
	}

	/* Pagine di testo: il riquadro resta, ma con margini interni ridotti,
	   altrimenti su un telefono resterebbe poco spazio per le parole. */
	body.page-id-18865 .entry-content,
	body.page-id-18904 .entry-content,
	body.page-id-18879 .entry-content,
	body.page-id-18915 .entry-content {
		padding: 20px 18px;
		border-radius: var(--tl-r-sm);
	}

	/* Senza questo il riquadro arriverebbe a filo dei bordi dello schermo e
	   sembrerebbe una fascia, non una scheda. */
	body.page-id-18865 .content-container.site-container,
	body.page-id-18904 .content-container.site-container,
	body.page-id-18879 .content-container.site-container,
	body.page-id-18915 .content-container.site-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	#colophon .site-middle-footer-inner-wrap {
		padding-top: 26px;
		padding-bottom: 18px;
		gap: 20px;
	}

	#colophon img {
		max-width: 150px;
	}
}

/* Chi ha chiesto al sistema operativo di ridurre le animazioni non le vede. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	ul.products li.product:hover {
		transform: none;
	}
}