/* =========================================================================
   Tecnoastepan — foglio di stile unico.
   Direzione: artigianale-premium moderna. Palette calda ancorata ai due
   colori del logo (rosso #C53132, blu #004D84), serif Fraunces + Inter.
   Ordine: font, token, reset, layout, tipografia, componenti, sezioni,
   WooCommerce, form, footer, responsive.
   ========================================================================= */

/* --- Font self-hosted ---------------------------------------------------
   Font variabili (subset latin), scaricati con _migrazione/scarica-font.mjs.
   Tre file coprono tutti i pesi: nessuna chiamata a Google, nessun consenso. */
@font-face{
	font-family:'Fraunces';src:url('../fonts/fraunces-var.woff2') format('woff2-variations');
	font-weight:400 600;font-style:normal;font-display:swap;
}
@font-face{
	font-family:'Fraunces';src:url('../fonts/fraunces-italic-var.woff2') format('woff2-variations');
	font-weight:400 600;font-style:italic;font-display:swap;
}
@font-face{
	font-family:'Inter';src:url('../fonts/inter-var.woff2') format('woff2-variations');
	font-weight:400 600;font-style:normal;font-display:swap;
}

/* --- Token -------------------------------------------------------------- */
:root{
	color-scheme:light;
	--crema:#f5efe4; --crema-2:#ede4d3; --panna:#fdfbf6;
	--inchiostro:#211c19; --inchiostro-2:#5c524a; --tenue:#6f6459;
	/* colori ufficiali del logo */
	--rosso:#c53132; --rosso-scuro:#a02627;
	--blu:#004d84; --blu-scuro:#003558; --blu-profondo:#04283f;
	--crosta:#c8894b; --oro:#e9b98a;
	--linea:#e4dac9; --linea-scura:#d8ccb7;

	--font-d:'Fraunces',Georgia,'Times New Roman',serif;
	--font-b:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

	/* Nota: dentro clamp() gli operatori vogliono spazi attorno, altrimenti la
	   dichiarazione è invalida e il font-size ricade a 16px. */
	--t-xs:.78rem; --t-sm:.92rem; --t-base:1rem; --t-lg:1.1rem;
	--t-xl:clamp(1.3rem, 1rem + 1vw, 1.75rem);
	--t-2xl:clamp(1.75rem, 1.2rem + 2vw, 2.4rem);
	--t-3xl:clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
	--t-4xl:clamp(2.4rem, 1.2rem + 3.4vw, 3.75rem);

	--s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:6.5rem;

	--larghezza:1280px; --larghezza-stretta:760px;
	--h-intestazione:78px;
	--r:16px; --r-lg:26px; --r-pill:100px;
	--ombra:0 1px 2px rgb(60 42 25/.04),0 10px 30px -14px rgb(60 42 25/.28);
	--ombra-alta:0 30px 56px -34px rgb(60 42 25/.45);
	--tr:.25s cubic-bezier(.2,.7,.2,1);
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body,h1,h2,h3,h4,p,figure,ul,ol,blockquote{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,picture,svg{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--h-intestazione) + 1rem)}
/* Chi ha chiesto al sistema di ridurre le animazioni non le vede.
   Il conteggio dei giri e' obbligatorio quanto la durata: senza, un'animazione
   "infinite" schiacciata a .01ms non si ferma, si ripete centomila volte al
   secondo. Sul telefono la striscia dei marchi diventava una macchia — con
   Android "Rimuovi animazioni" attivo, che si accende da solo col risparmio
   energetico, sembrava scorrere a 139 milioni di pixel al secondo. */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
	/* La striscia si ferma dove comincia, non a meta' corsa. */
	.marquee__riga{animation:none!important}
}
body{
	touch-action:manipulation;-webkit-tap-highlight-color:rgb(0 77 132/.12);
	font-family:var(--font-b);font-size:var(--t-base);line-height:1.65;
	color:var(--inchiostro);background:var(--crema);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* grana di carta */
body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}
body.menu-aperto{overflow:hidden}

/* --- Accessibilità ------------------------------------------------------ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.salta-al-contenuto{position:absolute;top:-100%;left:var(--s2);z-index:999;padding:var(--s1) var(--s2);background:var(--rosso);color:#fff;border-radius:0 0 var(--r) var(--r)}
.salta-al-contenuto:focus{top:0}
:focus-visible{outline:2px solid var(--blu);outline-offset:3px}
/* le ancore interne non devono finire sotto l'intestazione fissa */
:target,h1[id],h2[id],h3[id],h4[id],#contenuto{scroll-margin-top:calc(var(--h-intestazione) + 1rem)}

/* barra di avanzamento lettura */
.progresso{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--rosso),var(--blu))}

/* --- Layout ------------------------------------------------------------- */
.contenitore{width:100%;max-width:var(--larghezza);margin-inline:auto;padding-inline:clamp(1.2rem,5vw,5.5rem);position:relative;z-index:2}
.contenitore--stretto{max-width:var(--larghezza-stretta)}
.sezione{padding-block:clamp(4rem,9vw,7.5rem)}
/* La sezione che apre una pagina: l'intestazione e fissa e le mangia 79px
   del proprio padding, lasciando meno aria di tutte le altre pagine. */
.sezione--apre{padding-top:calc(var(--h-intestazione) + var(--s6))}
.sezione--fondo{background:var(--crema-2);border-block:1px solid var(--linea)}
.sezione--centrata{text-align:center}

.griglia{display:grid;gap:var(--s3);grid-template-columns:repeat(var(--colonne,3),minmax(0,1fr))}
.griglia--2{--colonne:2}.griglia--3{--colonne:3}.griglia--4{--colonne:4}.griglia--5{--colonne:5}

/* --- Tipografia --------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-d);font-weight:500;line-height:1.04;letter-spacing:-.02em;color:var(--inchiostro);text-wrap:balance}
h1{font-size:var(--t-4xl);font-weight:600;letter-spacing:-.035em}
h2{font-size:var(--t-3xl)}
h3{font-size:var(--t-xl)}
h4{font-size:var(--t-lg)}
em,.corsivo{font-style:italic}
a{color:var(--blu);text-underline-offset:.2em;transition:color var(--tr)}
a:hover{color:var(--rosso)}

.occhiello{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-b);font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rosso)}
.occhiello::before{content:"";width:24px;height:1px;background:var(--crosta)}
.testo-guida{font-size:var(--t-lg);color:var(--inchiostro-2);max-width:58ch;text-wrap:pretty}
.sezione--centrata .testo-guida{margin-inline:auto}
.testo-lungo>*+*{margin-top:var(--s2)}
.testo-lungo h2,.testo-lungo h3{margin-top:var(--s4)}
/* Variante per i testi legali: le stesse regole del sito, ma con titoli di
   misura ragionevole. Un h2 da 3,6rem su un'informativa privacy grida. */
.testo-legale{color:var(--inchiostro-2);line-height:1.75}
.testo-legale h2{font-size:var(--t-xl);line-height:1.2}
.testo-legale h3{font-size:var(--t-lg);line-height:1.25;margin-top:var(--s3)}
.testo-legale strong{color:var(--inchiostro)}
.testo-legale ul{margin:0;padding-left:1.25rem;list-style:disc}
.testo-legale li+li{margin-top:.4rem}
.testo-legale__data{margin-top:var(--s4);padding-top:var(--s2);border-top:1px solid var(--linea);font-size:var(--t-sm);color:var(--tenue)}

/* intestazione di sezione */
.testa{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.testa__l{max-width:54ch}
.testa h2{margin-top:.9rem}
.testa p{color:var(--inchiostro-2);margin-top:var(--s2)}

/* --- Bottoni ------------------------------------------------------------ */
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.95rem 1.8rem;font-family:var(--font-b);font-size:var(--t-sm);font-weight:600;text-decoration:none;border:1px solid transparent;border-radius:var(--r-pill);cursor:pointer;transition:transform var(--tr),background var(--tr),color var(--tr),border-color var(--tr),box-shadow var(--tr)}
.bottone .ar{transition:transform var(--tr)}
.bottone:hover .ar{transform:translateX(4px)}
.bottone--primario{background:var(--rosso);color:var(--panna);box-shadow:0 12px 26px -12px rgb(197 49 50/.7)}
.bottone--primario:hover{background:var(--rosso-scuro);color:var(--panna);transform:translateY(-2px);box-shadow:0 18px 34px -12px rgb(197 49 50/.8)}
.bottone--secondario{border-color:var(--linea-scura);color:var(--inchiostro)}
.bottone--secondario:hover{border-color:var(--inchiostro);background:var(--inchiostro);color:var(--panna)}
.bottone--fantasma{border-color:rgb(245 239 228/.32);color:var(--crema)}
.bottone--fantasma:hover{background:var(--crema);color:var(--blu-profondo)}
.gruppo-bottoni{display:flex;flex-wrap:wrap;gap:.8rem}

/* --- Intestazione ------------------------------------------------------- */
.intestazione{position:fixed;inset:0 0 auto;z-index:50;transition:background var(--tr),box-shadow var(--tr),border-color var(--tr);border-bottom:1px solid transparent}
/* Da collegati, WordPress mette la sua barra alta 32px in cima e fa scendere
   la pagina, ma un elemento fixed a top:0 resta dov'e e ci finisce sotto: il
   logo veniva tagliato. Le due misure (32 e 46) e il punto in cui cambiano
   (782px) sono quelle di WordPress, non nostre. */
.admin-bar .intestazione{top:32px}
@media screen and (max-width:782px){
	.admin-bar .intestazione{top:46px}
}
.intestazione--scrollata{background:rgb(253 251 246/.82);backdrop-filter:blur(12px);border-bottom-color:var(--linea)}
.intestazione__riga{display:flex;align-items:center;gap:clamp(.8rem, 1.6vw, 1.8rem);min-height:78px}
.intestazione__logo{flex:0 0 auto;margin-right:auto}
.intestazione__logo a{display:block;text-decoration:none;color:var(--inchiostro)}
.intestazione__logo img{max-height:44px;width:auto}
.intestazione__wordmark span:first-child{font-family:var(--font-d);font-weight:600;font-size:1.3rem;letter-spacing:-.02em;line-height:1.1;display:block}
.intestazione__wordmark b{color:var(--rosso);font-weight:600}
.marchio-storico{display:block;font-family:var(--font-b);font-size:.56rem;letter-spacing:.28em;color:var(--tenue);text-transform:uppercase;margin-top:1px}

/* Il menu ha molte voci: niente a capo dentro le singole voci, spaziatura fluida. */
.navigazione__lista{display:flex;align-items:center;gap:clamp(.7rem, 1.2vw, 1.4rem)}
.navigazione__lista>li{white-space:nowrap}
.navigazione__lista a{display:block;font-family:var(--font-b);font-size:.9rem;font-weight:500;color:var(--inchiostro-2);text-decoration:none;padding-block:.35rem}
.navigazione__lista a:hover,.navigazione__lista .current-menu-item>a{color:var(--rosso)}
/* sottomenu */
.navigazione__lista .menu-item-has-children{position:relative}
.navigazione__sottomenu-toggle{display:none;flex:0 0 auto;width:2.25rem;height:2.25rem;padding:0;background:none;border:0;cursor:pointer;align-items:center;justify-content:center}
.navigazione__sottomenu-toggle .freccia{width:.5rem;height:.5rem;border-right:2px solid var(--inchiostro-2);border-bottom:2px solid var(--inchiostro-2);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--tr)}
.sottomenu-aperto>.navigazione__sottomenu-toggle .freccia{transform:rotate(-135deg) translate(-2px,-2px)}
.navigazione__lista .sub-menu{position:absolute;top:100%;left:0;min-width:230px;padding:var(--s1);background:var(--panna);border:1px solid var(--linea);border-radius:var(--r);box-shadow:var(--ombra-alta);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--tr),transform var(--tr),visibility var(--tr)}
.navigazione__lista .menu-item-has-children:hover>.sub-menu,.navigazione__lista .menu-item-has-children:focus-within>.sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.navigazione__lista .sub-menu a{padding:.6rem .75rem;border-radius:8px}
.navigazione__lista .sub-menu a:hover{background:var(--crema)}

/* Il telefono in testa: mezza campagna Google punta alla chiamata, e prima
   stava solo nel piè di pagina. Il numero per esteso solo dove c'è spazio;
   sotto i 1200px resta la sola cornetta, che sul telefono è quello che serve. */
.intestazione__tel{flex:0 0 auto;display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;font-family:var(--font-b);font-size:.88rem;font-weight:600;color:var(--blu);text-decoration:none;transition:color var(--tr)}
.intestazione__tel:hover{color:var(--rosso)}
.intestazione__tel svg{width:17px;height:17px;fill:currentColor;flex:0 0 auto}

.intestazione__cta{flex:0 0 auto;display:inline-flex;align-items:center;white-space:nowrap;gap:.5rem;padding:.6rem 1.25rem;background:var(--blu);color:var(--panna)!important;border-radius:var(--r-pill);font-size:.85rem;font-weight:500;text-decoration:none;transition:background var(--tr),transform var(--tr)}
.intestazione__cta:hover{background:var(--rosso);transform:translateY(-1px)}

.intestazione__toggle{display:none;padding:.6rem;background:none;border:1px solid var(--linea-scura);border-radius:10px;cursor:pointer}
.hamburger,.hamburger::before,.hamburger::after{display:block;width:22px;height:2px;background:var(--inchiostro);transition:transform var(--tr),opacity var(--tr)}
.hamburger::before,.hamburger::after{content:"";position:relative}
.hamburger::before{top:-7px}.hamburger::after{top:5px}
[aria-expanded='true'] .hamburger{background:transparent}
[aria-expanded='true'] .hamburger::before{transform:translateY(7px) rotate(45deg)}
[aria-expanded='true'] .hamburger::after{transform:translateY(-5px) rotate(-45deg)}

/* --- Hero --------------------------------------------------------------- */
/* Il padding parte dall'altezza dell'intestazione fissa, non da un 80 scritto
   a mano: cosi resta giusto se l'intestazione cambia. */
.hero{position:relative;padding:calc(var(--h-intestazione) + clamp(1.5rem,3vw,2.5rem)) 0 clamp(2rem,4vw,3rem);overflow:hidden}
.hero__glow{position:absolute;inset:0;z-index:0;pointer-events:none;background:
	radial-gradient(50% 45% at 82% 20%,rgb(197 49 50/.13),transparent 62%),
	radial-gradient(46% 46% at 8% 90%,rgb(0 77 132/.12),transparent 64%)}
.hero__in{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__badge{display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .9rem .4rem .5rem;background:var(--panna);border:1px solid var(--linea);border-radius:var(--r-pill);font-size:.8rem;color:var(--inchiostro-2);margin-bottom:1.6rem}
.hero__badge b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--blu);color:#fff;font-family:var(--font-d);font-size:.72rem}
.hero h1{margin:0}
.hero h1 em{color:var(--rosso)}
.hero__sub{max-width:40ch;margin-top:1.2rem;color:var(--inchiostro-2);font-size:var(--t-lg)}
.hero .gruppo-bottoni{margin-top:1.6rem}
.hero__facts{display:flex;gap:2.4rem;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--linea-scura)}
.hero__facts b{font-family:var(--font-d);font-size:2rem;font-weight:600;display:block;line-height:1}
.hero__facts span{font-size:.82rem;color:var(--tenue)}
/* media hero */
.hero__media{position:relative}
/* Il 4/5 e verticale: in questa colonna diventava 612px e da solo spingeva i
   bottoni sotto la piega su un portatile. Il taglio resta verticale ma con un
   tetto legato allo schermo. */
.hero__frame{position:relative;aspect-ratio:4/5;max-height:min(52vh,500px);border-radius:var(--r-lg);overflow:hidden;background:linear-gradient(160deg,#e7d5bd,#c6a882);box-shadow:0 50px 90px -45px rgb(60 42 25/.55)}
/* La foto riempie il riquadro in posizione assoluta: cosi nessun a-capo o
   spazio di troppo nel markup puo spostarla e scoprire lo sfondo sotto. */
.hero__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__frame .segnaposto{position:absolute;inset:0;display:grid;place-items:center;color:#8a6a44;font-family:var(--font-d);font-style:italic}
.hero__chip{position:absolute;top:22px;right:-18px;background:var(--panna);border:1px solid var(--linea);border-radius:var(--r-pill);padding:.6rem 1rem;display:flex;align-items:center;gap:.6rem;box-shadow:0 18px 30px -18px rgb(60 42 25/.5)}
.hero__chip .punto{width:8px;height:8px;border-radius:50%;background:#2fae67;box-shadow:0 0 0 3px rgb(47 174 103/.2)}
.hero__chip span{font-size:.82rem;font-weight:500}
.hero__seal{position:absolute;bottom:-24px;left:-24px;width:116px;height:116px;border-radius:50%;background:var(--blu);color:var(--crema);display:grid;place-items:center;text-align:center;font-family:var(--font-d);line-height:1.05;box-shadow:0 22px 42px -16px rgb(0 53 88/.6);transform:rotate(-8deg);transition:transform var(--tr)}
.hero__media:hover .hero__seal{transform:rotate(0)}
.hero__seal b{font-size:1.7rem;font-weight:600;display:block}
.hero__seal small{font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;font-family:var(--font-b);color:var(--oro)}
/* hero interno (pagine secondarie) */
.hero--interna{padding-bottom:clamp(2rem,4vw,3rem)}
/* Il limite di 44ch (la misura di lettura) va sul blocco di testo, non sul
   contenitore: il contenitore ha margine automatico, e stringerlo centrava
   l'hero mentre tutte le altre sezioni partono da sinistra. Con il limite
   spostato dentro, il titolo resta allineato al resto della pagina e i due
   bottoni tornano sulla stessa riga. */
.hero--interna .hero__in{grid-template-columns:1fr}
.hero--interna .hero__in>*{max-width:44ch}

/* --- Marquee marchi ----------------------------------------------------- */
.marquee{background:var(--inchiostro);color:var(--crema);padding:1.15rem 0;overflow:hidden;border-block:1px solid rgb(255 255 255/.06)}
.marquee__riga{display:flex;gap:3.2rem;width:max-content;align-items:center;animation:scorri 32s linear infinite}
.marquee:hover .marquee__riga{animation-play-state:paused}
@keyframes scorri{to{transform:translateX(-50%)}}
.marquee__et{font-family:var(--font-d);font-style:italic;color:var(--oro);white-space:nowrap;font-size:1rem}
.marquee span:not(.marquee__et){font-family:var(--font-d);font-size:1.3rem;color:var(--crema);opacity:.9;white-space:nowrap}
.marquee .punto{width:5px;height:5px;border-radius:50%;background:var(--rosso);flex:none}

/* --- Categorie (schede editoriali testo | immagine) --------------------- */
/* grid-auto-rows:1fr pareggia le due righe fra loro; senza, la riga con i
   testi piu lunghi e piu alta dell'altra. Il <li> in flex e la scheda con
   flex:1 servono perche la scheda riempia la cella: da sola si dimensiona
   sul proprio contenuto e lascia scoperto il fondo, ed e li che si vedeva
   la differenza di altezza fra una scheda e l'altra. */
.schede-categoria{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--s3)}
.schede-categoria>li{display:flex}
.scheda-cat{flex:1;position:relative;display:grid;grid-template-columns:1.05fr 1fr;background:var(--panna);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;min-height:236px;transition:box-shadow var(--tr),transform var(--tr),border-color var(--tr);text-decoration:none;color:inherit}
.scheda-cat:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);border-color:var(--linea-scura)}
.scheda-cat__txt{padding:1.9rem;display:flex;flex-direction:column;justify-content:center}
.scheda-cat__n{font-family:var(--font-d);font-style:italic;color:var(--crosta);font-size:.95rem}
.scheda-cat h3{font-size:1.75rem;margin:.3rem 0 .5rem}
.scheda-cat p{color:var(--inchiostro-2);font-size:.9rem}
.scheda-cat__go{margin-top:1.2rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.85rem;color:var(--rosso)}
.scheda-cat__go i{width:30px;height:30px;border-radius:50%;border:1px solid var(--linea-scura);display:grid;place-items:center;font-style:normal;transition:background var(--tr),color var(--tr),border-color var(--tr),transform var(--tr)}
.scheda-cat:hover .scheda-cat__go i{background:var(--rosso);color:#fff;border-color:var(--rosso);transform:rotate(-45deg)}
.scheda-cat__img{overflow:hidden;background:var(--crema-2)}
.scheda-cat__img img,.scheda-cat__img .segnaposto{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.scheda-cat:hover .scheda-cat__img img{transform:scale(1.08)}

/* --- Schede prodotto / articolo (griglia semplice) ---------------------- */
.scheda{position:relative;display:flex;flex-direction:column;background:var(--panna);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;transition:transform var(--tr),box-shadow var(--tr),border-color var(--tr)}
.scheda:hover{transform:translateY(-4px);box-shadow:var(--ombra-alta);border-color:var(--linea-scura)}
.scheda__link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.scheda__img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--crema-2)}
.scheda__img--vuota{display:block}
.scheda__corpo{padding:var(--s3);display:flex;flex-direction:column;flex:1}
/* Titolo e testo tagliati a un numero fisso di righe: senza, un titolo su
   quattro righe e gli altri su due fanno partire i testi ad altezze diverse
   e la fila di schede esce sbilenca. Il link resta in fondo (margin-top:auto). */
.scheda__titolo{font-size:1.25rem;margin:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.scheda__testo{margin:.4rem 0 0;font-size:var(--t-sm);color:var(--inchiostro-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.scheda__azione{margin-top:auto;padding-top:var(--s2);font-weight:600;font-size:var(--t-sm);color:var(--rosso);display:inline-flex;align-items:center;gap:.4rem}
.scheda__azione::after{content:"→";transition:transform var(--tr)}
.scheda:hover .scheda__azione::after{transform:translateX(3px)}
.schede-prodotto .scheda__img{aspect-ratio:1/1;object-fit:contain;padding:var(--s3)}

/* --- Punti di forza ----------------------------------------------------- */
.pilastro{position:relative;padding:2.2rem 1.9rem;background:var(--panna);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;transition:transform var(--tr),box-shadow var(--tr)}
.pilastro:hover{transform:translateY(-5px);box-shadow:var(--ombra-alta)}
.pilastro__n{width:48px;height:48px;border-radius:50%;background:var(--crema-2);border:1px solid var(--linea-scura);display:grid;place-items:center;font-family:var(--font-d);color:var(--blu);font-size:1.1rem;font-weight:600}
.pilastro:nth-child(even) .pilastro__n{color:var(--rosso)}
.pilastro h3{font-size:1.55rem;margin:1rem 0 .6rem}
.pilastro p{color:var(--inchiostro-2);font-size:.94rem}
.pilastro::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:linear-gradient(90deg,var(--rosso),var(--blu));transition:width .5s}
.pilastro:hover::after{width:100%}

/* Variante con foto del macchinario: il prodotto sta su fondo neutro, non ritagliato. */
.pilastro--foto{padding:0;display:flex;flex-direction:column}
.pilastro--foto .pilastro__img{width:100%;aspect-ratio:4/3;object-fit:contain;padding:1.4rem;background:var(--crema-2);border-bottom:1px solid var(--linea);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pilastro--foto:hover .pilastro__img{transform:scale(1.05)}
.pilastro--foto .pilastro__txt{padding:1.5rem 1.7rem 1.8rem;display:flex;flex-direction:column;flex:1}
.pilastro--foto h3{margin:0 0 .5rem;font-size:1.4rem}
.pilastro--foto p{font-size:.92rem}

/* Scheda modello cliccabile: il link è il nome, ma il bersaglio è tutta la scheda.
   Il ::after steso sopra la scheda evita di annidare l'immagine dentro l'ancora. */
.pilastro__a{color:inherit;text-decoration:none;transition:color var(--tr)}
.pilastro__a::after{content:"";position:absolute;inset:0;z-index:1}
.pilastro:hover .pilastro__a{color:var(--rosso)}
.pilastro__a:focus-visible{outline:none}
.pilastro__a:focus-visible::after{outline:2px solid var(--rosso);outline-offset:-3px}
/* Sempre visibile, non solo al passaggio del mouse: sul telefono l'hover non esiste. */
.pilastro__vai{margin-top:auto;padding-top:1.1rem;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.82rem;color:var(--rosso)}
.pilastro__vai i{font-style:normal;transition:transform var(--tr)}
.pilastro:hover .pilastro__vai i{transform:translateX(4px)}

/* --- Pagine di atterraggio delle campagne -------------------------------
   Il modulo sta accanto al titolo, non in fondo: chi arriva da un annuncio
   ha già deciso di chiedere, e non deve scorrere per trovare dove farlo. */
.hero--lp{padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero--lp .hero__in{grid-template-columns:1.02fr .98fr;align-items:center}
.hero--lp h1{font-size:var(--t-3xl)}
.hero--lp .hero__sub{max-width:46ch}

.lp-modulo{background:var(--panna);border:1px solid var(--linea);border-radius:var(--r-lg);padding:clamp(1.5rem,2.6vw,2.2rem);box-shadow:var(--ombra-alta);scroll-margin-top:calc(var(--h-intestazione) + 1.5rem)}
.lp-modulo__titolo{font-size:1.35rem;margin:0}
.lp-modulo__nota{margin:.55rem 0 1.4rem;font-size:var(--t-sm);color:var(--inchiostro-2)}
.lp-modulo .wpcf7-form p{margin:0 0 var(--s1)}
.lp-modulo .wpcf7-form textarea{min-height:74px}

/* Le tre righe di rassicurazione sotto il titolo: la spunta è decorativa. */
.rassicura{display:flex;flex-direction:column;gap:.5rem;margin:1.4rem 0 0;padding:0;list-style:none}
.rassicura li{display:flex;align-items:flex-start;gap:.6rem;font-size:var(--t-sm);color:var(--inchiostro-2)}
.rassicura li::before{content:"";flex:0 0 auto;width:16px;height:16px;margin-top:.18rem;border-radius:50%;background:var(--blu);
	-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.4 11.3 3.5 8.4l1.1-1.1 1.8 1.8 4.9-4.9 1.1 1.1z'/%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 16 16'%3E%3Cpath d='M6.4 11.3 3.5 8.4l1.1-1.1 1.8 1.8 4.9-4.9 1.1 1.1z'/%3E%3C/svg%3E") center/contain no-repeat}

/* Scheda "quanto impasti": la pastiglia porta una fascia di kg, non un numero. */
.pilastro--scelta{display:flex;flex-direction:column}
.pilastro--scelta .pilastro__n{width:auto;min-width:48px;padding-inline:.9rem;border-radius:var(--r-pill);font-size:.95rem;letter-spacing:.01em}

/* --- Domande frequenti --------------------------------------------------- */
.faq{max-width:80ch}
.faq__voce{border-top:1px solid var(--linea-scura);padding:.2rem 0}
.faq__voce:last-child{border-bottom:1px solid var(--linea-scura)}
.faq__voce summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:1.05rem 0;cursor:pointer;font-family:var(--font-b);font-weight:600;font-size:1.02rem;color:var(--inchiostro);list-style:none}
.faq__voce summary::-webkit-details-marker{display:none}
.faq__voce summary::after{content:"";flex:0 0 auto;width:.55rem;height:.55rem;border-right:2px solid var(--rosso);border-bottom:2px solid var(--rosso);transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--tr)}
.faq__voce[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.faq__voce summary:hover{color:var(--rosso)}
.faq__voce p{margin:0 0 1.1rem;padding-right:2rem;color:var(--inchiostro-2);font-size:.96rem}

/* --- Testo e fotografia affiancati -------------------------------------- */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.duo__testo h2{margin-top:.7rem}
.duo__foto{margin:0}
.duo__foto img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.duo__foto figcaption{margin-top:.75rem;font-size:.82rem;color:var(--inchiostro-2)}

/* --- La storia in home: testo a sinistra, tappe a destra ----------------
   Stava scritto come stile in riga dentro home.html, e uno stile in riga
   batte qualunque foglio: sul telefono restava a due colonne da 155px e la
   timeline si accartocciava, una parola per riga. Qui puo' essere scavalcato
   dalla regola per gli schermi stretti, che e' il punto. */
.heritage__in{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2rem,5vw,4rem);align-items:center}

/* --- Timeline (Chi Siamo / heritage) ------------------------------------ */
.timeline{display:grid;gap:0}
.timeline__tappa{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start;padding:1.15rem 0;border-top:1px solid var(--linea-scura)}
.timeline__tappa:last-child{border-bottom:1px solid var(--linea-scura)}
.timeline__anno{font-family:var(--font-d);color:var(--blu);font-size:1.3rem;font-weight:600}
.timeline__tappa p{color:var(--inchiostro-2);font-size:.96rem}
.citazione{font-family:var(--font-d);font-style:italic;font-size:1.4rem;line-height:1.5;color:var(--inchiostro);border-left:2px solid var(--rosso);padding-left:1.4rem;margin:1.4rem 0 0}

/* --- Realizzazioni (poster) --------------------------------------------- */
.schede-realizzazione{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s3)}
.scheda-lavoro{position:relative;border-radius:var(--r);overflow:hidden;min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;padding:1.7rem;isolation:isolate;border:1px solid var(--linea);text-decoration:none}
.scheda-lavoro__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.scheda-lavoro img.scheda-lavoro__bg{width:100%;height:100%;object-fit:cover}
.scheda-lavoro::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 38%,rgb(33 28 25/.85))}
.scheda-lavoro:hover .scheda-lavoro__bg{transform:scale(1.07)}
.scheda-lavoro small{color:var(--oro);font-family:var(--font-d);font-style:italic}
/* Per classe, non per tag: sull'archivio il titolo della scheda e un h2
   (sta sotto l'h1 della pagina) e in home un h3 (sta dentro una sezione).
   Colorando .scheda-lavoro h3 il titolo dell'archivio restava nero su foto. */
.scheda-lavoro__titolo{color:var(--panna);font-size:1.55rem;margin-top:.15rem}
.scheda-lavoro__go{position:absolute;top:1.3rem;right:1.3rem;width:38px;height:38px;border-radius:50%;background:rgb(253 251 246/.16);backdrop-filter:blur(4px);display:grid;place-items:center;color:#fff;transition:background var(--tr),transform var(--tr)}
.scheda-lavoro:hover .scheda-lavoro__go{background:var(--rosso);transform:rotate(-45deg)}

/* --- Partner (griglia loghi) -------------------------------------------- */
.partner{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--s3);align-items:center}
.partner img{width:100%;max-height:62px;object-fit:contain;filter:grayscale(1);opacity:.55;transition:filter var(--tr),opacity var(--tr)}
.partner img:hover{filter:grayscale(0);opacity:1}

/* --- Contatti e form ---------------------------------------------------- */
.contatti-griglia{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s5);align-items:start}
.contatti-blocco+.contatti-blocco{margin-top:var(--s4)}
.contatti-blocco h2{font-size:1.3rem;margin-bottom:var(--s1)}
.contatti-lista{display:grid;gap:.4rem}
.contatti-lista a{color:var(--inchiostro);text-decoration:none}
.contatti-lista a:hover{color:var(--rosso)}
.mappa-embed{line-height:0;border-radius:var(--r);overflow:hidden;border:1px solid var(--linea)}

.wpcf7-form p{margin:0 0 var(--s2)}
.wpcf7-form label{display:block;font-family:var(--font-b);font-size:var(--t-sm);font-weight:600;color:var(--inchiostro)}
.wpcf7-form input:not([type='checkbox']):not([type='radio']):not([type='submit']),
.wpcf7-form textarea,.wpcf7-form select{width:100%;margin-top:.35rem;padding:.75rem .95rem;font-family:var(--font-b);font-size:var(--t-base);color:var(--inchiostro);background:var(--panna);border:1px solid var(--linea-scura);border-radius:12px;transition:border-color var(--tr),box-shadow var(--tr)}
.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpcf7-form select:focus{border-color:var(--blu);box-shadow:0 0 0 3px color-mix(in srgb,var(--blu) 30%,transparent)}
.wpcf7-form textarea{min-height:130px;resize:vertical}
.wpcf7-form .wpcf7-acceptance label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;color:var(--inchiostro-2);font-size:var(--t-sm)}
.wpcf7-form input[type='checkbox']{margin-top:.3rem;accent-color:var(--rosso)}
.wpcf7-form input[type='submit']{display:inline-flex;padding:.9rem 2rem;font-family:var(--font-b);font-size:var(--t-sm);font-weight:600;color:var(--panna);background:var(--rosso);border:1px solid var(--rosso);border-radius:var(--r-pill);cursor:pointer;transition:background var(--tr),transform var(--tr)}
.wpcf7-form input[type='submit']:hover{background:var(--rosso-scuro);transform:translateY(-1px)}
.wpcf7-form .wpcf7-not-valid-tip{font-size:var(--t-xs);color:var(--rosso)}
.wpcf7 .wpcf7-response-output{margin:var(--s2) 0 0;padding:var(--s2);font-size:var(--t-sm);border-radius:10px}

/* --- Fascia CTA (card blu galleggiante) --------------------------------- */
.cta{position:relative;overflow:hidden;text-align:center;color:var(--crema);border-radius:var(--r-lg);margin:0 clamp(1.2rem,5vw,5.5rem) clamp(3rem,6vw,5rem);background:linear-gradient(155deg,var(--blu-scuro),var(--blu-profondo))}
.cta::before{content:"";position:absolute;inset:0;opacity:.7;background:radial-gradient(55% 100% at 50% 0%,rgb(197 49 50/.3),transparent 60%)}
.cta__in{position:relative;z-index:2;padding:clamp(3.5rem,8vw,6.5rem) 1.5rem}
.cta h2{color:var(--panna);max-width:20ch;margin:1rem auto 0}
.cta h2 em{color:var(--oro)}
.cta p{color:#cbd6df;max-width:52ch;margin:1.3rem auto 0}
.cta .gruppo-bottoni{justify-content:center;margin-top:2.2rem}
.cta .occhiello{justify-content:center;color:var(--oro)}

/* --- Footer ------------------------------------------------------------- */
.pie{background:var(--blu-profondo);color:#a8b8c6;padding-top:clamp(2.8rem,5vw,4rem)}
.pie__griglia{display:grid;grid-template-columns:1.5fr 1fr 1.2fr;gap:clamp(1.8rem,4vw,3.5rem);padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid rgb(255 255 255/.12)}
.pie__logo{display:inline-block}
/* Il logo è blu: su fondo blu profondo va reso monocromatico bianco per leggerlo. */
.pie__logo img{max-width:230px;height:auto;filter:brightness(0) invert(1);opacity:.92;transition:opacity var(--tr)}
.pie__logo:hover img{opacity:1}
.pie__marchio{font-family:var(--font-d);font-weight:600;font-size:1.5rem;color:var(--panna)}
.pie__marchio b{color:var(--oro)}
.pie__claim{color:#8fa1b1;font-size:var(--t-sm);line-height:1.7;margin-top:1rem;max-width:32ch}
.pie__titolo,.widget__titolo{font-family:var(--font-b);font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro);margin-bottom:1.1rem}
.pie__lista{display:grid;gap:.55rem}
.pie__lista a{color:#a8b8c6;text-decoration:none;font-size:var(--t-sm);transition:color var(--tr)}
.pie__lista a:hover{color:var(--panna)}
.pie__lista--inline{display:flex;gap:var(--s3)}
.pie__lista--contatti{margin-top:1rem}
.pie__indirizzo{font-style:normal;font-size:var(--t-sm);line-height:1.7;color:#a8b8c6}
.pie__coda{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2);padding-block:1.4rem;font-size:var(--t-xs);color:#7d8fa0}
.pie__coda a{color:#7d8fa0;font-size:var(--t-xs)}
/* i widget eventualmente aggiunti alla colonna footer non devono sfuggire al tema */
.pie .widget a{color:#a8b8c6;text-decoration:none}
.pie .widget ul{display:grid;gap:.5rem;list-style:none;padding:0;font-size:var(--t-sm)}
.pie .widget input[type=search],.pie .widget input[type=text]{width:100%;padding:.6rem .8rem;border-radius:10px;border:1px solid rgb(255 255 255/.18);background:rgb(255 255 255/.06);color:var(--panna)}
.pie .widget button,.pie .widget input[type=submit]{margin-top:.5rem;padding:.55rem 1.1rem;border:0;border-radius:var(--r-pill);background:var(--rosso);color:#fff;font-weight:600;font-size:var(--t-sm);cursor:pointer}

/* --- Archivio / articolo ------------------------------------------------ */
/* Un po' d'aria in piu sotto l'intestazione fissa: senza, l'occhiello parte
   a 54px dal menu, mentre le altre pagine stanno fra 77 e 88. */
.testata-archivio{margin-bottom:var(--s5);padding-top:var(--s3)}
/* Qui l'elemento e esso stesso una .sezione (class="realizzazione__testata
   sezione"), quindi un padding-top non si somma a quello della sezione: lo
   sostituisce, e a parita di specificita vince questa regola perche viene
   dopo. Va quindi scritto per intero, legato all'intestazione fissa. */
.realizzazione__testata{padding-top:calc(var(--h-intestazione) + var(--s6))}
.testata-archivio__titolo{font-size:var(--t-3xl)}
/* L'introduzione non deve correre per tutta la pagina: oltre le sessanta
   battute per riga l'occhio fatica a tornare a capo. */
.testata-archivio__testo{max-width:60ch;margin-top:var(--s2);color:var(--inchiostro-2)}
/* L'intestazione e position:fixed e main non riserva la sua altezza: ogni
   pagina se la deve scontare da sola. Qui va sommata al distacco voluto,
   altrimenti il titolo finisce sotto il menu — succedeva anche prima, con
   72px contro 79 di intestazione, ma per soli 7px non si notava. */
.articolo__testata{padding-block:calc(var(--h-intestazione) + var(--s6)) var(--s3)}
.articolo__meta{font-size:var(--t-sm);color:var(--tenue)}
/* La copertina era alta 736px e, con la testata sopra, spingeva ogni riga di
   testo sotto la prima schermata: si apriva l'articolo e si vedeva solo una
   foto tagliata. Ritagliata a 16:9 e comunque mai oltre meta schermo. */
.articolo__copertina img{width:100%;aspect-ratio:16/9;object-fit:cover;max-height:min(52vh,520px);border-radius:var(--r)}
.articolo__corpo{padding-block:var(--s4) var(--s6)}
/* Il titolo dell'articolo non e un titolo da copertina: --t-4xl arriva a 6rem
   e su un titolo lungo occupava mezzo schermo da solo. */
/* --t-3xl arriva a 3.6rem: su questi titoli lunghi faceva cinque righe e
   trecento pixel di sola intestazione. */
.articolo__titolo{font-size:var(--t-2xl)}
/* Gli h2 dentro il testo erano scelte grafiche di Elementor, non struttura:
   alla dimensione piena del tema diventavano muri di lettere. */
.articolo__corpo h2{font-size:var(--t-xl);line-height:1.2;margin-top:var(--s3)}
.articolo__corpo h3{font-size:var(--t-lg);line-height:1.25;margin-top:var(--s3)}
.articolo__corpo p{margin-bottom:1rem}
.articolo__corpo>p>img,.articolo__corpo>img{width:100%;height:auto;border-radius:10px}
/* La galleria: il contenitore lo crea tap_galleria_articolo in inc/cleanup.php. */
.articolo__galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s2);margin:var(--s3) 0}
.articolo__galleria figure{margin:0}
.articolo__galleria img{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.articolo__galleria .e-ingrandibile{cursor:zoom-in;border-radius:10px;overflow:hidden;transition:transform var(--tr),box-shadow var(--tr)}
.articolo__galleria .e-ingrandibile:hover{transform:translateY(-3px);box-shadow:var(--ombra-alta)}
.articolo__galleria .e-ingrandibile:focus-visible{outline:2px solid var(--rosso);outline-offset:3px}
/* Una frase lunga usata come titolo da Elementor: la riportiamo a testo,
   ma un filo piu presente del paragrafo normale perche resta un richiamo. */
.articolo__annuncio{font-size:var(--t-lg);color:var(--inchiostro);margin:var(--s3) 0}

/* --- La lente: le foto della galleria a schermo intero ------------------ */
.e-bloccato{overflow:hidden}
/* Il [hidden] va riaffermato: display:flex su una classe ha piu specificita
   della regola del browser per [hidden], e senza questa riga la lente
   resterebbe aperta sopra la pagina appena caricata. */
.lente[hidden]{display:none}
.lente{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3);background:rgba(24,20,16,.92)}
.lente__corpo{margin:0;max-width:min(1200px,92vw);max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:.7rem}
.lente__corpo img{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:var(--r);background:var(--crema-2)}
.lente__conta{font-family:var(--font-b);font-size:var(--t-sm);color:rgba(255,255,255,.75)}
.lente__chiudi,.lente__nav{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;font-size:1.6rem;line-height:1;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:50%;cursor:pointer;transition:background var(--tr)}
.lente__chiudi:hover,.lente__nav:hover{background:rgba(255,255,255,.26)}
.lente__chiudi:focus-visible,.lente__nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lente__chiudi{position:absolute;top:var(--s2);right:var(--s2)}
@media (max-width:600px){
	.lente{padding:var(--s2);gap:.4rem}
	.lente__chiudi,.lente__nav{width:38px;height:38px;font-size:1.3rem}
}

/* --- WooCommerce -------------------------------------------------------- */
/* YITH Request a Quote colora i suoi pulsanti con proprie custom properties
   dichiarate su :root in uno <style> inline. Le ridefiniamo qui con specificità
   maggiore (html:root batte :root a prescindere dall'ordine di caricamento),
   così il pulsante preventivo usa il rosso del brand senza !important e senza
   rompersi agli aggiornamenti del plugin. */
html:root{
	--ywraq_layout_button_bg_color:#c53132;
	--ywraq_layout_button_bg_color_hover:#a02627;
	--ywraq_layout_button_border_color:#c53132;
	--ywraq_layout_button_border_color_hover:#a02627;
	--ywraq_layout_button_color:#fdfbf6;
	--ywraq_layout_button_color_hover:#fdfbf6;
	--ywraq_checkout_button_bg_color:#004d84;
	--ywraq_checkout_button_bg_color_hover:#003558;
	--ywraq_checkout_button_color:#fdfbf6;
	--ywraq_checkout_button_color_hover:#fdfbf6;
}

.woo .woocommerce-products-header__title{font-size:var(--t-3xl);margin-bottom:var(--s2)}
/* I nomi prodotto sono lunghi e stanno in mezza colonna: scala più contenuta. */
.woo .product_title{font-size:var(--t-2xl);margin-bottom:var(--s2);text-wrap:balance}
.woo .woocommerce-result-count,.woo .woocommerce-ordering{font-size:var(--t-sm);color:var(--tenue)}
.woo ul.products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:var(--s4) 0 0;padding:0;list-style:none}
.woo ul.products::before,.woo ul.products::after{content:none}
/* Il margine sotto: WooCommerce mette 2.992em alle voci della griglia dal
   proprio foglio, che viene caricato dopo il nostro. A parita di specificita
   vince l ultimo, quindi qui serve !important — altrimenti fra una scheda e
   l altra restavano 72px invece dei 24 della griglia. */
.woo ul.products li.product,.woo ul.products li.product-category{margin:0!important}
.woo ul.products li.product{position:relative;display:flex;flex-direction:column;margin:0;padding:var(--s3);width:auto!important;float:none;background:var(--panna);border:1px solid var(--linea);border-radius:var(--r);text-align:left;transition:border-color var(--tr),box-shadow var(--tr),transform var(--tr)}
.woo ul.products li.product:hover{transform:translateY(-4px);border-color:var(--linea-scura);box-shadow:var(--ombra-alta)}
.woo ul.products li.product>a,.woo ul.products li.product a.woocommerce-loop-product__link{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.woo ul.products li.product a img{aspect-ratio:1/1;object-fit:contain;margin-bottom:var(--s2);background:var(--crema-2);border-radius:10px}
.woo ul.products li.product .woocommerce-loop-product__title{padding:0;font-family:var(--font-d);font-size:1.2rem;font-weight:500;color:var(--inchiostro)}
.woo ul.products li.product .price{display:none}
.woo .button,.woo a.button,.woo .add-request-quote-button,.woo .yith-ywraq-add-to-quote .button,.woo .single_add_to_cart_button{display:inline-flex;align-items:center;justify-content:center;margin-top:auto;padding:.75rem 1.5rem;font-family:var(--font-b);font-size:var(--t-sm);font-weight:600;color:#fff;background:var(--rosso);border:1px solid var(--rosso);border-radius:var(--r-pill);text-decoration:none;cursor:pointer;transition:background var(--tr),border-color var(--tr)}
.woo .button:hover,.woo a.button:hover,.woo .add-request-quote-button:hover,.woo .single_add_to_cart_button:hover{background:var(--rosso-scuro);border-color:var(--rosso-scuro);color:#fff}
.woo ul.products li.product .button{margin-top:var(--s2);align-self:flex-start}
/* Scheda prodotto: galleria a sinistra (più stretta), testo a destra (più largo).
   WooCommerce impone width:48% e float a galleria e summary (retaggio del layout
   a colonne float): dentro la nostra grid vanno azzerati, con specificità pari
   alla sua (main.css è caricato dopo woocommerce.css, quindi vince). */
.woo div.product{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
/* woocommerce-layout.css usa selettori con ID (.woocommerce #content div.images)
   per imporre width:48% e float. Non è battibile per specificità da un tema che
   non usa quell'ID: qui !important è la via corretta, ed è circoscritto a due
   proprietà del layout a due colonne. */
.woo div.product div.woocommerce-product-gallery,
.woo div.product div.images,
.woo div.product div.summary,
.woo div.product div.entry-summary{width:auto !important;float:none !important;margin:0}
/* Niente sticky qui: la galleria e gia la colonna piu alta delle due, quindi
   non c'e nulla oltre cui restare ferma — e l'offset la faceva partire 96px
   piu in basso del titolo, disallineando le due colonne. */
.woo div.product .woocommerce-product-gallery{background:var(--panna);border:1px solid var(--linea);border-radius:var(--r);padding:var(--s2)}
.woo div.product .woocommerce-product-gallery__image img{width:100%}
.woo div.product .woocommerce-product-gallery img{border-radius:10px}
.woo div.product .woocommerce-product-gallery__wrapper{margin:0}
.woo div.product .flex-control-thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0;padding:0;list-style:none}
.woo div.product .flex-control-thumbs li{width:64px}
.woo div.product .summary{margin:0}
/* La descrizione breve è testo di lettura: misura e ritmo da paragrafo. */
.woo div.product .woocommerce-product-details__short-description{margin-top:var(--s2);color:var(--inchiostro-2);font-size:var(--t-base);line-height:1.7;max-width:62ch}
.woo div.product .woocommerce-product-details__short-description p{margin-bottom:.8rem}
.woo div.product .woocommerce-product-details__short-description strong{color:var(--inchiostro)}
.woo div.product .yith-ywraq-add-to-quote{margin-top:var(--s3)}

.woo div.product .woocommerce-tabs{grid-column:1/-1;margin-top:var(--s5);border-top:1px solid var(--linea);padding-top:var(--s4)}
/* Woo indenta la lista di 1em e le dà un margine suo con un selettore che
   include div.product: senza quel pezzo qui, padding e margin non passano. */
.woo .woocommerce-tabs ul.tabs,
.woo div.product .woocommerce-tabs ul.tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 var(--s3);padding:0;list-style:none;border:0}
.woo .woocommerce-tabs ul.tabs::before,.woo .woocommerce-tabs ul.tabs::after{content:none}
.woo .woocommerce-tabs ul.tabs li{margin:0;padding:0;background:none;border:0;border-radius:var(--r-pill)}
.woo .woocommerce-tabs ul.tabs li::before,.woo .woocommerce-tabs ul.tabs li::after{content:none;display:none}
/* WooCommerce stila queste voci con selettori che includono div.product e usa
   ::before/::after per gli angoli arrotondati del vecchio look a linguette:
   qui va azzerato tutto, alla sua stessa specificità. */
.woo div.product .woocommerce-tabs ul.tabs li,
.woo div.product .woocommerce-tabs ul.tabs li.active{margin:0;padding:0;background:none;border:0;box-shadow:none;border-radius:0}
.woo div.product .woocommerce-tabs ul.tabs li::before,
.woo div.product .woocommerce-tabs ul.tabs li::after,
.woo div.product .woocommerce-tabs ul.tabs::before{content:none;display:none;border:0;box-shadow:none}
.woo div.product .woocommerce-tabs ul.tabs li a{display:inline-block;padding:.6rem 1.3rem;font-family:var(--font-b);font-weight:600;font-size:var(--t-sm);color:var(--inchiostro-2);text-decoration:none;text-shadow:none;background:var(--panna);border:1px solid var(--linea);border-radius:var(--r-pill);transition:background var(--tr),color var(--tr),border-color var(--tr)}
.woo div.product .woocommerce-tabs ul.tabs li a:hover{border-color:var(--linea-scura);color:var(--inchiostro)}
.woo div.product .woocommerce-tabs ul.tabs li.active a{color:var(--panna);background:var(--blu);border-color:var(--blu)}
/* Con una sola scheda non c'è nulla da scegliere: la pillola smette di fingersi
   un comando e diventa il titolo della sezione. Serve la doppia specificità
   perché la voce unica è sempre anche .active. */
.woo div.product .woocommerce-tabs ul.tabs li:only-child a,
.woo div.product .woocommerce-tabs ul.tabs li:only-child.active a,
.woo div.product .woocommerce-tabs ul.tabs li:only-child a:hover{padding:0;background:none;border-color:transparent;font-family:var(--font-d);font-weight:600;font-size:var(--t-xl);line-height:1.2;color:var(--inchiostro);cursor:default;pointer-events:none}
.woo div.product .woocommerce-tabs ul.tabs:has(li:only-child){margin-bottom:var(--s2)}
.woo .woocommerce-Tabs-panel{max-width:80ch;color:var(--inchiostro-2);line-height:1.75}
.woo .woocommerce-Tabs-panel p{margin-bottom:.7rem}
.woo .woocommerce-Tabs-panel strong{color:var(--inchiostro)}
.woo .related.products,.woo .upsells.products{grid-column:1/-1;margin-top:var(--s5)}
.woo .related.products>h2,.woo .upsells.products>h2{margin-bottom:var(--s3)}
.woo .woocommerce-message,.woo .woocommerce-info{padding:var(--s2) var(--s3);background:var(--crema-2);border-left:3px solid var(--rosso);border-radius:10px;list-style:none}

/* --- Breadcrumb WooCommerce --------------------------------------------- */
.woo-briciole{margin-bottom:var(--s3);font-family:var(--font-b);font-size:var(--t-sm);color:var(--tenue)}
.woo-briciole .woocommerce-breadcrumb{color:var(--tenue)}
.woo-briciole a{color:var(--inchiostro-2);text-decoration:none}
.woo-briciole a:hover{color:var(--rosso);text-decoration:underline;text-underline-offset:.25em}

/* --- Tabelle tecniche nelle schede prodotto ----------------------------
   Righe di dati con molte colonne: devono poter scorrere da sole, senza
   trascinarsi dietro tutta la pagina. */
.tabella-tecnica{overflow-x:auto;margin:var(--s2) 0 var(--s3);border:1px solid var(--linea);border-radius:var(--r)}
.tabella-tecnica table{border-collapse:collapse;width:100%;min-width:640px;font-size:var(--t-sm);background:var(--panna)}
.tabella-tecnica th,.tabella-tecnica td{padding:.6rem .8rem;text-align:right;white-space:nowrap;border-bottom:1px solid var(--linea)}
.tabella-tecnica thead th{position:sticky;top:0;background:var(--crema-2);font-family:var(--font-b);font-size:var(--t-xs);font-weight:600;letter-spacing:.02em;color:var(--inchiostro-2);text-align:right;white-space:normal;min-width:5.5rem}
.tabella-tecnica tbody th{text-align:left;font-weight:600;color:var(--inchiostro)}
.tabella-tecnica thead th:first-child{text-align:left}
.tabella-tecnica tbody td{font-variant-numeric:tabular-nums;color:var(--inchiostro-2)}
.tabella-tecnica tbody tr:last-child th,.tabella-tecnica tbody tr:last-child td{border-bottom:0}
.tabella-tecnica tbody tr:hover td,.tabella-tecnica tbody tr:hover th{background:var(--crema)}

/* Il link alla scheda PDF nella descrizione breve. */
.woo .scheda-pdf{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-sm);font-weight:600;color:var(--blu);text-decoration:none}
.woo .scheda-pdf::before{content:"";width:1.05rem;height:1.05rem;flex:0 0 auto;background:currentColor;
	-webkit-mask:no-repeat center/contain 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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E");
	mask:no-repeat center/contain 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 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' y1='15' x2='12' y2='3'/%3E%3C/svg%3E")}
.woo .scheda-pdf:hover{color:var(--rosso);text-decoration:underline;text-underline-offset:.25em}
/* Il link al sito del produttore non e un PDF: l'icona della freccia in giu
   prometterebbe un download. Qui va quella del collegamento esterno. */
.woo .scheda-pdf--esterna::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='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='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='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E")}

/* --- Marchi distribuiti -------------------------------------------------
   Ventisei loghi di fogge e colori diversi: quello che li tiene insieme è
   l'altezza ottica uguale e molto spazio attorno, non una cornice. */
.marchi{--h-logo:44px}
.marchi__et{font-family:var(--font-b);font-size:var(--t-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue);text-align:center;margin-bottom:var(--s4)}
/* Flex e non grid: i marchi sono 25 e in griglia l'ultima riga resta con un
   logo solo, appeso a sinistra. Cosi l'ultima riga si centra da sola. */
.marchi__griglia{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.6rem,4vw,3rem) clamp(1.2rem,3vw,2.4rem);align-items:center;margin:0;padding:0;list-style:none}
.marchi__cella{flex:0 1 150px}
.marchi__cella{display:flex;align-items:center;justify-content:center;min-height:var(--h-logo)}
.marchi__logo{width:auto;max-width:100%;height:auto;max-height:var(--h-logo);object-fit:contain;
	/* I loghi arrivano da fonti diverse: qualcuno è quasi bianco, qualcuno
	   satura troppo. Un filo di desaturazione li fa convivere sul crema. */
	/* Diversi loghi hanno il fondo bianco cotto dentro il file: su crema
	   spiccherebbero come francobolli. multiply lo fa sparire. */
	mix-blend-mode:multiply;
	filter:saturate(.85);opacity:.9;transition:opacity var(--tr),filter var(--tr)}
.marchi__cella:hover .marchi__logo{filter:saturate(1);opacity:1}
@media (max-width:560px){
	.marchi{--h-logo:36px}
	.marchi__cella{flex-basis:110px}
}

/* --- Preventivi (plugin tap-preventivi) --------------------------------
   Il plugin non porta CSS suo: il sito ha un foglio solo, e la richiesta di
   preventivo deve somigliare al resto del sito, non a un modulo di servizio. */

/* Scheda prodotto: il pulsante e il rimando alla lista. */
.prev-azione{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin-top:var(--s3)}
.prev-aggiungi{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.7rem;font-family:var(--font-b);font-size:var(--t-sm);font-weight:600;color:#fff;background:var(--rosso);border:1px solid var(--rosso);border-radius:var(--r-pill);cursor:pointer;transition:background var(--tr),border-color var(--tr),transform var(--tr)}
.prev-aggiungi:hover:not(:disabled){background:var(--rosso-scuro);border-color:var(--rosso-scuro);transform:translateY(-1px)}
.prev-aggiungi:disabled{background:var(--crema-2);border-color:var(--linea-scura);color:var(--inchiostro-2);cursor:default}
.prev-vai{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--t-sm);font-weight:600;color:var(--blu);text-decoration:none}
.prev-vai:hover{color:var(--blu-scuro);text-decoration:underline;text-underline-offset:.25em}
.prev-conta{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 .4rem;font-size:var(--t-xs);color:var(--panna);background:var(--blu);border-radius:var(--r-pill)}
.prev-nascosto{display:none}
.prev-errore-inline{flex-basis:100%;font-size:var(--t-sm);color:var(--rosso)}

/* Pagina della richiesta. */
.prev-pagina{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,5vw,var(--s6));align-items:start}
.prev-titolo{font-family:var(--font-d);font-size:var(--t-xl);margin-bottom:var(--s2)}
.prev-guida{color:var(--inchiostro-2);font-size:var(--t-sm);margin-bottom:var(--s3);max-width:46ch}

.prev-lista{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.prev-riga{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;align-items:center;gap:var(--s2);padding:.7rem;background:var(--panna);border:1px solid var(--linea);border-radius:var(--r)}
.prev-riga__img{display:block;line-height:0;border-radius:10px;overflow:hidden;background:var(--crema-2)}
.prev-riga__img img{width:72px;height:72px;object-fit:cover}
.prev-riga__testo{display:grid;gap:.15rem;min-width:0}
.prev-riga__nome{font-weight:600;font-size:var(--t-sm);line-height:1.35;color:var(--inchiostro);text-decoration:none}
.prev-riga__nome:hover{color:var(--rosso)}
.prev-riga__sku{font-size:var(--t-xs);color:var(--tenue)}
.prev-riga__qta{display:grid;gap:.2rem;justify-items:center}
.prev-riga__qta span{font-size:var(--t-xs);color:var(--tenue)}
.prev-riga__qta input{width:4.5rem;padding:.4rem .5rem;text-align:center;font-size:var(--t-sm);color:var(--inchiostro);background:var(--crema);border:1px solid var(--linea-scura);border-radius:10px}
.prev-riga__qta input:focus{border-color:var(--blu);box-shadow:0 0 0 3px color-mix(in srgb,var(--blu) 30%,transparent)}
.prev-riga__togli{width:2rem;height:2rem;font-size:1.15rem;line-height:1;color:var(--tenue);background:none;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:color var(--tr),background var(--tr)}
.prev-riga__togli:hover{color:var(--rosso);background:var(--crema-2)}

.prev-riepilogo__piede{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);margin-top:var(--s3)}
.prev-link{font-size:var(--t-sm);font-weight:600;color:var(--blu);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.prev-link:hover{text-decoration:underline;text-underline-offset:.25em}
.prev-link--tenue{font-weight:400;color:var(--tenue)}
.prev-link--tenue:hover{color:var(--rosso)}

/* Il modulo riusa i toni dei form CF7, senza dipenderne. */
.prev-modulo-blocco{padding:clamp(1.4rem,3vw,var(--s4));background:var(--crema-2);border:1px solid var(--linea);border-radius:var(--r-lg)}
.prev-modulo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.prev-campo{margin:0}
.prev-campo--largo{grid-column:1/-1}
.prev-campo label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--inchiostro)}
.prev-campo input:not([type='checkbox']),.prev-campo textarea,.prev-campo select{width:100%;margin-top:.35rem;padding:.72rem .9rem;font-family:var(--font-b);font-size:var(--t-base);color:var(--inchiostro);background:var(--panna);border:1px solid var(--linea-scura);border-radius:12px;transition:border-color var(--tr),box-shadow var(--tr)}
.prev-campo input:focus,.prev-campo textarea:focus,.prev-campo select:focus{border-color:var(--blu);box-shadow:0 0 0 3px color-mix(in srgb,var(--blu) 30%,transparent)}
.prev-campo textarea{min-height:120px;resize:vertical}
.prev-campo--errato input,.prev-campo--errato textarea,.prev-campo--errato select{border-color:var(--rosso)}
.prev-obbl{color:var(--rosso)}
.prev-privacy label{display:flex;gap:.6rem;align-items:flex-start;font-weight:400;font-size:var(--t-sm);color:var(--inchiostro-2)}
.prev-privacy input[type='checkbox']{flex:0 0 auto;margin-top:.25rem;accent-color:var(--rosso)}
.prev-invia{margin-top:.4rem}
/* Il campo trappola: fuori dallo schermo, non display:none — i robot saltano
   quello che è dichiarato invisibile, i lettori di schermo lo ignorano. */
.prev-trappola{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.prev-avviso{margin-bottom:var(--s2);padding:var(--s2);font-size:var(--t-sm);color:var(--inchiostro);background:var(--panna);border-left:3px solid var(--rosso);border-radius:10px}
.prev-avviso ul{margin:0;padding-left:1.1rem;list-style:disc}

.prev-vuota{padding:clamp(2rem,6vw,var(--s6)) var(--s2);text-align:center}
.prev-vuota p{margin-bottom:var(--s3);color:var(--inchiostro-2)}
.prev-riferimento{font-family:var(--font-b);font-weight:600;color:var(--blu)}

@media (max-width:900px){
	.prev-pagina{grid-template-columns:1fr}
}
@media (max-width:560px){
	.prev-modulo{grid-template-columns:1fr}
	.prev-riga{grid-template-columns:56px minmax(0,1fr) auto;row-gap:.6rem}
	.prev-riga__img img{width:56px;height:56px}
	.prev-riga__qta{grid-column:2;justify-items:start}
	.prev-riga__togli{grid-column:3;grid-row:1}
}

/* --- Reveal on scroll --------------------------------------------------- */
@media (prefers-reduced-motion:no-preference){
	/* .js lo mette uno script inline in header.php: senza quel gancio, se il
	   JavaScript non parte il sito resterebbe tutto a opacita 0, cioe bianco. */
	.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
	.js .reveal.in{opacity:1;transform:none}
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width:1200px){
	/* Nove voci di menu più il pulsante: il numero per esteso non ci sta.
	   Resta la cornetta, con l'area di tocco piena. */
	.intestazione__tel-num{display:none}
	.intestazione__tel{padding:.55rem;border:1px solid var(--linea-scura);border-radius:50%}
}
@media (max-width:1024px){
	.griglia--4,.griglia--5{--colonne:3}
}
/* Il menu ha nove voci: sotto i 1150px la riga non ci sta più e sbordava fuori
   dal contenitore già prima che ci mettessimo il telefono. L'hamburger parte da
   qui, mentre il resto del layout continua a cambiare a 900px come prima. */
@media (max-width:1150px){
	.intestazione__toggle{display:block;order:3}
	/* La cornetta prima dell'hamburger: è la scorciatoia che conta di più. */
	.intestazione__tel{order:2}
	.intestazione__cta{display:none}
	.navigazione{position:fixed;inset:80px 0 0;padding:var(--s3);background:var(--panna);overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--tr),transform var(--tr),visibility var(--tr)}
	.navigazione--aperta{opacity:1;visibility:visible;transform:translateY(0)}
	.navigazione__lista{flex-direction:column;align-items:stretch;gap:0}
	.navigazione__lista>li{border-bottom:1px solid var(--linea);display:flex;flex-wrap:wrap;align-items:center}
	.navigazione__lista>li>a{flex:1 1 auto}
	.navigazione__sottomenu-toggle{display:flex}
	.navigazione__lista .sub-menu{flex:1 0 100%}
	.navigazione__lista a{padding-block:.9rem}
	.navigazione__lista .sub-menu{position:static;display:none;min-width:0;padding:0 0 var(--s1) var(--s2);border:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
	.navigazione__lista .sottomenu-aperto>.sub-menu{display:block}
}
@media (max-width:900px){
	/* .hero--lp .hero__in vale 0,2,0: le media query non aggiungono specificità,
	   quindi il solo .hero__in qui sotto non lo batteva e sul telefono il modulo
	   restava in una colonna da 262px, tagliata via dall'overflow dell'hero. */
	.hero__in,.hero--lp .hero__in{grid-template-columns:1fr}
	.hero__media{order:-1;max-width:420px}
	/* Il sigillo del 1938 sporgeva di 12px fuori dallo schermo — a -24px dal
	   bordo di una colonna che sul telefono comincia gia' a 12px dal margine —
	   e si vedeva tagliato a meta'. Rientra, e si rimpicciolisce un po'. */
	/* Sigillo e pillola non stanno affiancati: a 375px la cornice misura 337,
	   il sigillo 108 e la pillola 251. Quindi si impilano — il sigillo rientra
	   dentro la foto e la pillola scende sotto la cornice. */
	.hero__seal{left:10px;bottom:10px;width:96px;height:96px}
	.hero__seal b{font-size:1.45rem}
	/* La pillola stava in cima alla foto e, con lo scatto nuovo, copriva la
	   scritta Pavailler sul forno. */
	.hero__chip{top:auto;bottom:-44px;right:0;font-size:.76rem;padding:.45rem .8rem;gap:.45rem}
	.hero__media{margin-bottom:54px}
	.schede-categoria{grid-template-columns:1fr;grid-auto-rows:auto}
	.scheda-cat{grid-template-columns:1fr}
	.scheda-cat__img{min-height:160px}
	.heritage__in,.contatti-griglia,.duo{grid-template-columns:1fr;gap:var(--s4)}
	.griglia--3,.griglia--4,.griglia--5{--colonne:2}
	.schede-realizzazione{grid-template-columns:1fr}
	.woo ul.products{grid-template-columns:repeat(2,minmax(0,1fr))}
	/* minmax(0,..) e obbligatorio: 1fr vale minmax(auto,1fr) e la colonna della
	   galleria non riesce a stringersi sotto la larghezza delle slide affiancate,
	   facendo scorrere la pagina di lato sui prodotti con piu foto. */
	.woo div.product{grid-template-columns:minmax(0,1fr);gap:var(--s3)}

	/* La striscia dei marchi scorre a 44px al secondo: la stessa velocita' che
	   sul desktop e' un lento scivolare, dentro una finestra da 373px diventa
	   una sfilata. Non e' l'animazione a cambiare, e' quanta strada si vede.
	   Qui la si allunga finche' un nome non impiega una ventina di secondi ad
	   attraversare lo schermo, come succede su uno schermo largo. */
	.marquee__riga{animation-duration:84s}

	.pie__griglia{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
	.griglia{--colonne:1!important}
	.woo ul.products{grid-template-columns:1fr}
	.sezione{padding-block:var(--s5)}
	/* Va DOPO la riga qui sopra, e non prima: .sezione e .sezione--apre hanno
	   la stessa specificita', quindi vince l'ultima scritta. Con padding-block
	   a 48px la prima sezione finiva sotto l'intestazione fissa, che ne misura
	   79: le briciole di pane si leggevano attraverso il logo. */
	.sezione--apre{padding-top:calc(var(--h-intestazione) + var(--s3))}
	.pie__griglia{grid-template-columns:1fr}
}

/* --- I pulsanti che galleggiano sopra la pagina --------------------------
   Calendly, il distintivo di reCAPTCHA e il selettore di lingua arrivano da
   tre plugin che non si parlano fra loro: ognuno si piazza in basso per conto
   proprio e sul telefono finiscono uno sopra l'altro. Qui prendono tre posti
   distinti. Gli !important servono perche' quegli script scrivono la
   posizione come stile in riga, e uno stile in riga batte il foglio. */
@media (max-width:900px){
	.calendly-badge-widget{left:auto!important;right:10px!important;bottom:10px!important;
		max-width:calc(100vw - 20px)!important}
	/* Il selettore di TranslatePress sta in basso a sinistra: lasciamogli
	   l'angolo libero, cosi' i due non si toccano. */
	.trp-floater-ls-names,.trp-floater-ls-flags,.trp-floater-ls-current-language{margin-bottom:0}
}

/* --- Il popup del catalogo ----------------------------------------------
   Due cose che non andavano. La X: Popup Maker la mette a cavallo
   dell'angolo (top e right a -13px), e su uno schermo stretto finisce mezza
   fuori dal riquadro, tagliata. Ora sta dentro, e il riquadro ha lo spazio
   in alto per non farle coprire la prima riga.
   La cornice: il tema "lightbox" incornicia con 8px di nero pieno e
   un'ombra dura, che con la crema e gli angoli morbidi del resto del sito
   non c'entrano niente. Gli !important servono perche' Popup Maker stampa
   il proprio tema in un foglio che viene dopo il nostro. */
.pum-theme-lightbox .pum-container,
.pum-theme-1722 .pum-container{
	background:var(--panna)!important;
	border:1px solid var(--linea)!important;
	border-radius:var(--r-lg)!important;
	box-shadow:var(--ombra-alta)!important;
	padding:clamp(2.8rem,8vw,3.2rem) clamp(1.3rem,4vw,2rem) clamp(1.5rem,4vw,2rem)!important;
}
.pum-theme-lightbox .pum-close,
.pum-theme-1722 .pum-close{
	top:10px!important;
	right:10px!important;
	width:36px!important;
	height:36px!important;
	line-height:34px!important;
	padding:0!important;
	font-size:1.05rem!important;
	border-radius:50%!important;
	background:var(--crema-2)!important;
	color:var(--inchiostro)!important;
	border:1px solid var(--linea-scura)!important;
	box-shadow:none!important;
	text-shadow:none!important;
}
.pum-theme-lightbox .pum-close:hover,
.pum-theme-1722 .pum-close:hover{background:var(--rosso)!important;color:var(--panna)!important;border-color:var(--rosso)!important}
/* Il titolo del popup arriva con gli a-capo gia' dentro: centrato spezzava
   in righe di lunghezza casuale, allineato a sinistra si legge meglio. */
.pum-theme-lightbox .pum-content,
.pum-theme-1722 .pum-content{text-align:left}
.pum-theme-lightbox .pum-content>p,
.pum-theme-1722 .pum-content>p{margin:0 0 .55rem}
.pum-theme-lightbox .pum-content .popup-saluto,
.pum-theme-1722 .pum-content .popup-saluto{font-family:var(--font-d);font-size:1.35rem;margin-bottom:.35rem}

/* --- Il distintivo di reCAPTCHA -----------------------------------------
   Occupava un angolo intero e sul telefono finiva sopra i prodotti. Google
   consente di nasconderlo a una condizione precisa: che il suo marchio resti
   visibile nel percorso dell'utente. La riga nel pie' di pagina serve a
   questo, e va tenuta — se sparisce quella, va rimesso il distintivo. */
.grecaptcha-badge{visibility:hidden!important}

.pie__recaptcha{padding-bottom:var(--s2)}
.pie__recaptcha p{margin:0;font-size:var(--t-xs);color:var(--tenue);max-width:70ch}
.pie__recaptcha a{color:var(--tenue);text-decoration:underline;text-underline-offset:.2em}
.pie__recaptcha a:hover{color:var(--crema)}

/* --- Il link per rivedere il consenso -----------------------------------
   Lo stampa il plugin del tracciamento, in fondo al body: fuori dal <footer>,
   su fondo chiaro, come una riga rimasta orfana sotto la coda scura. Qui
   diventa l'ultima riga del piede. Il selettore parte da body perche' il
   plugin scrive lo stesso #ngt-prefs-wrap dentro la pagina, e uno stile
   stampato dopo, a parita' di peso, vincerebbe.
   Il margine in fondo serve solo sul telefono: arrivati in fondo alla pagina
   il link finiva sotto Calendly e sotto la bandiera della lingua, che si
   prendono i 58px in basso, e non c'era modo di toccarlo. */
body #ngt-prefs-wrap{background:var(--blu-profondo);padding:0 0 1.6rem;font-size:var(--t-xs)}
body #ngt-prefs-wrap a{color:#7d8fa0;font-size:var(--t-xs);text-decoration:underline;text-underline-offset:.2em}
body #ngt-prefs-wrap a:hover{color:var(--crema)}
@media (max-width:900px){
	body #ngt-prefs-wrap{padding-bottom:4.75rem}
}