/* duesseservice.com - foglio di stile (grafica ripresa dal vecchio tema The7: colori, caratteri e misure) */

@font-face { font-family: "Open Sans"; src: url("../fonts/opensans.woff2") format("woff2"); font-weight: 300 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("../fonts/opensans-italic.woff2") format("woff2"); font-weight: 300 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
/* Roboto solo per il testo dello slider della home, come nel vecchio sito (si scarica solo dove serve) */
@font-face { font-family: "Roboto"; src: url("../fonts/roboto.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --verde: #007534;
  --verde-scuro: #005c29;
  --hover-btn: #fca800;
  --testo: #707070;
  --titoli: #222222;
  --secondario: #999999;
  --linea: rgba(0, 0, 0, .1);
  --grigio: rgba(0, 0, 0, .04);
  --font: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
  --font-titoli: "Nunito", Helvetica, Arial, Verdana, sans-serif;
  --font-menu: "Montserrat", Helvetica, Arial, Verdana, sans-serif;
  --wrap: 1150px;
  --gutter: 50px;
  --testata: 136px;
}
@media (max-width: 778px) { :root { --gutter: 20px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (min-width: 1101px) { html { scroll-padding-top: 120px; } }
body { margin: 0; background: #fff; color: var(--testo); font: 14px/26px var(--font); overflow-x: hidden; }
img { max-width: 100%; height: auto; border: 0; vertical-align: middle; }
a { color: var(--verde); text-decoration: none; transition: color .2s, background-color .2s, border-color .2s; }
a:hover { text-decoration: underline; }
p { margin: 0 0 10px; }
ul, ol { margin: 0 0 10px; padding-left: 20px; }
strong, b { font-weight: 700; color: inherit; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-titoli); color: var(--titoli); margin: 0 0 10px; }
h1 { font-size: 46px; line-height: 56px; font-weight: 700; }
h2 { font-size: 32px; line-height: 42px; font-weight: 700; }
h3 { font-size: 26px; line-height: 36px; font-weight: 300; }
h4 { font-size: 20px; line-height: 30px; font-weight: 700; }
h5 { font-size: 18px; line-height: 28px; font-weight: 700; }
h6 { font-size: 16px; line-height: 26px; font-weight: 500; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: var(--verde); text-decoration: none; }
table { border-collapse: collapse; width: 100%; margin: 0 0 15px; }
td, th { border: 1px solid var(--linea); padding: 6px 10px; text-align: left; vertical-align: top; }
hr { border: 0; border-top: 1px solid var(--linea); margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--hover-btn); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.salta { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #fff; padding: 10px 15px; }
.salta:focus { left: 10px; top: 10px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); padding: 0 var(--gutter); margin: 0 auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -.125em; }

/* ---------- barra superiore ---------- */
.barra-top { background: var(--verde); color: #fff; font: 500 13px/20px var(--font-menu); }
.barra-top a { color: #fff; }
.barra-top-in { display: flex; justify-content: space-between; align-items: center; min-height: 36px; gap: 8px; }
.mini-contatti, .mini-destra { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mini-contatti a { display: inline-flex; align-items: center; gap: 7px; }
.mini-contatti .ico { width: 14px; height: 14px; }
.mini-testo { text-transform: uppercase; }
.menu-lingua { position: relative; }
/* bandiere 19x15 come nel vecchio sito (le immagini sono 70x47: senza misure fisse verrebbero 19x13) */
.lingua-attuale img, .altre-lingue img, .menu-mobile-lingue img { width: 19px; height: 15px; flex: none; }
.lingua-attuale { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px 0; font: inherit; }
.altre-lingue { list-style: none; margin: 0; padding: 8px 0; position: absolute; right: 0; top: 100%; min-width: 150px; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .15); z-index: 60; display: none; }
.menu-lingua:hover .altre-lingue, .menu-lingua.aperto .altre-lingue, .menu-lingua:focus-within .altre-lingue { display: block; }
.altre-lingue a { display: flex; gap: 8px; align-items: center; padding: 5px 15px; color: var(--titoli); font: 400 13px/20px var(--font); }
.altre-lingue a:hover { background: rgba(0, 117, 52, .07); color: var(--verde); text-decoration: none; }

/* ---------- testata con logo e menu ---------- */
.testata-sito { position: relative; z-index: 50; }
.barra-menu { background: #fff; position: relative; z-index: 50; }
.barra-menu-in { display: flex; align-items: center; justify-content: space-between; min-height: 100px; gap: 30px; position: relative; transition: min-height .3s; }
.logo { flex: none; display: block; line-height: 0; }
.logo img { width: 350px; height: 40px; }
/* scorrendo la pagina (sito.js), come nel vecchio tema: sul computer resta agganciata in alto tutta la testata (barra
   verde + menu) e il menu si abbassa da 100 a 70px; su tablet e telefono solo la barra del menu, senza la barra verde */
.testata-sito.fissa { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 0 15px 1px rgba(0, 0, 0, .07); }
.testata-sito.fissa .barra-menu-in { min-height: 70px; }
.barra-menu.fissa { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 0 15px 1px rgba(0, 0, 0, .07); }
.barra-menu.fissa .barra-menu-in { min-height: 70px; }
/* le voci occupano tutta l'altezza della barra (come nel vecchio tema): i sottomenu partono dal bordo inferiore
   della barra, senza spazi vuoti in cui il mouse li farebbe chiudere */
.menu-principale { align-self: stretch; display: flex; }
.menu-principale > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.menu-principale li { position: relative; }
.menu-principale > ul > li { margin: 0 18px; display: flex; align-items: center; }
.menu-principale > ul > li:last-child { margin-right: 0; }
.menu-principale > ul > li > a { display: flex; align-items: center; gap: 4px; padding: 5px 0; color: var(--titoli); font: 700 14px/18px var(--font-menu); text-transform: uppercase; position: relative; }
.menu-principale > ul > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--verde); opacity: 0; transition: opacity .2s; }
.menu-principale > ul > li:hover > a, .menu-principale > ul > li.corrente > a, .menu-principale > ul > li.antenato > a { color: var(--verde); text-decoration: none; }
.menu-principale > ul > li.corrente > a::after, .menu-principale > ul > li.antenato > a::after, .menu-principale > ul > li:hover > a::after { opacity: 1; }
.menu-principale .freccia { width: 10px; height: 10px; opacity: .4; }
.menu-principale .apri-sotto { display: none; }
/* sottomenu (misure del vecchio tema: 260px, margine interno 10px, voci 8px 10px) */
.menu-principale .sotto { list-style: none; margin: 0; padding: 10px; position: absolute; top: 100%; left: 0; width: 260px; background: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .2); visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; z-index: 70; }
.menu-principale li:hover > .sotto, .menu-principale li:focus-within > .sotto, .menu-principale li.aperto > .sotto { visibility: visible; opacity: 1; }
.menu-principale > ul > li > .sotto.a-sinistra { left: auto; right: 0; }
.menu-principale .sotto a { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; color: var(--titoli); font: 400 13px/17px var(--font); }
.menu-principale .sotto a:hover, .menu-principale .sotto .corrente > a { background: rgba(0, 117, 52, .07); color: var(--verde); text-decoration: none; }
.menu-principale .sotto .sotto { top: -10px; left: 100%; }
/* Prodotti: pannello largo quanto la testata, voci in colonne (il vecchio "mega menu" a 4 colonne) */
.menu-principale > ul > li.mega { position: static; }
.menu-principale > ul > li.mega > .sotto { left: 0; right: 0; width: auto; display: flex; flex-wrap: wrap; align-content: flex-start; padding: 0 10px; }
.menu-principale .mega > .sotto > li { width: calc(100% / var(--mega, 4)); padding: 20px 10px; }
.menu-principale .mega > .sotto > li > a { display: block; padding: 0 0 10px; color: #303030; font: 400 16px/22px var(--font-titoli); }
.menu-principale .mega > .sotto > li > a:hover, .menu-principale .mega > .sotto > .corrente > a { background: none; color: var(--verde); }
.apri-menu { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--titoli); }
.apri-menu .ico { width: 26px; height: 26px; }

/* menu per telefono */
.menu-mobile { position: fixed; top: 0; right: 0; bottom: 0; width: min(330px, 88vw); background: #fff; z-index: 200; overflow-y: auto; padding: 15px 15px 30px 30px; box-shadow: 0 0 30px rgba(0, 0, 0, .25); }
body.menu-aperto::after { content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 150; }
.menu-mobile-testa { display: flex; justify-content: flex-end; }
.chiudi-menu { background: none; border: 0; padding: 8px; cursor: pointer; color: var(--titoli); }
.chiudi-menu .ico { width: 24px; height: 24px; }
.menu-albero, .menu-albero ul { list-style: none; margin: 0; padding: 0; }
.menu-albero li { position: relative; border-bottom: 1px solid rgba(34, 34, 34, .12); }
.menu-albero li li { border: 0; }
.menu-albero a { display: block; padding: 12px 40px 12px 0; color: var(--titoli); font: 700 16px/20px var(--font-menu); }
.menu-albero .sotto a { font: 400 14px/18px var(--font); padding: 8px 40px 8px 15px; }
.menu-albero .corrente > a, .menu-albero a:hover { color: var(--verde); text-decoration: none; }
.menu-albero .freccia { display: none; }
.menu-albero .apri-sotto { position: absolute; right: 0; top: 4px; background: none; border: 0; width: 36px; height: 36px; cursor: pointer; color: var(--titoli); }
.menu-albero .apri-sotto .ico { transition: transform .2s; }
.menu-albero .sotto { display: none; padding-bottom: 8px; }
.menu-albero .aperto > .sotto { display: block; }
.menu-albero .aperto > .apri-sotto .ico { transform: rotate(180deg); }
.menu-albero-extra a { font: 500 14px/18px var(--font-menu); }
.menu-mobile-lingue { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0 10px; }
.menu-mobile-lingue a { display: inline-flex; align-items: center; gap: 6px; color: var(--titoli); font: 500 13px/20px var(--font-menu); }
.menu-mobile-lingue a.attiva { color: var(--verde); }
.menu-mobile-contatti a { display: flex; align-items: center; gap: 8px; color: var(--testo); }

/* ---------- titolo della pagina ---------- */
.titolo-pagina { background: var(--grigio); text-align: center; padding: 20px 0; min-height: 130px; display: flex; align-items: center; }
.titolo-pagina h1 { font: 700 26px/36px var(--font-titoli); color: var(--titoli); margin: 0; }
.titolo-sotto { margin: 0; }
.briciole ol { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; font-size: 12px; line-height: 24px; color: var(--secondario); }
.briciole li + li::before { content: "/"; margin: 0 8px; opacity: .6; }
.briciole a { color: var(--secondario); }
.titolo-pagina.con-immagine { position: relative; min-height: var(--altezza, 300px); background: #222 var(--sfondo) center / cover no-repeat; color: #fff; }
.titolo-pagina.con-immagine .velo { position: absolute; inset: 0; }
.titolo-pagina.con-immagine .wrap { position: relative; }
.titolo-pagina.con-immagine h1 { font-size: var(--t-fs, 30px); line-height: var(--t-lh, 36px); color: var(--t-col, #fff); }
.titolo-pagina.con-immagine .titolo-sotto { font: 700 var(--s-fs, 18px) / var(--s-lh, 26px) var(--font-titoli); color: var(--s-col, #fff); margin-top: 5px; }
.titolo-pagina.con-immagine .briciole ol { color: var(--b-col, #fff); margin-top: 10px; }
.titolo-pagina.con-immagine .briciole a { color: var(--b-col, #fff); }
@media (max-width: 778px) {
  .titolo-pagina.con-immagine { min-height: 70px; padding: 30px 0; }
  .titolo-pagina.con-immagine .titolo-sotto { font-size: 20px; line-height: 28px; }
  .titolo-pagina.con-immagine .briciole { display: none; }
}

/* ---------- contenuto: righe e colonne (struttura del vecchio Visual Composer) ---------- */
.contenuto { display: block; padding: 40px 0 50px; } /* in alto 40px come il vecchio #main */
.pagina-home .contenuto { padding-top: 0; }
.pagina-home .contenuto > :last-child.larga { margin-bottom: -30px; } /* la vecchia home finiva 20px sopra il piede */
.contenuto > :last-child.larga, .contenuto > .prodotto + .correlati:last-child { margin-bottom: -50px; }
.riga { position: relative; width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }
.riga.larga { width: 100%; }
.riga.larga > .riga-in { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; position: relative; }
.riga.larga.contenuto-largo > .riga-in { width: 100%; padding-inline: 25px; } /* come il vecchio: 25px dal bordo */
.riga > .velo { position: absolute; inset: 0; }
/* Colonne come nel vecchio tema (WPBakery di The7): spazio di 50px tra le colonne (25px per lato). Una colonna con
   riquadro (.col-in: bordo, sfondo, padding propri) arriva fino al bordo della colonna e i 25px stanno dentro il riquadro,
   salvo padding diverso nello stile del riquadro. Le righe "gap-N" aggiungono N/2 px intorno a ogni colonna. */
.colonne { display: flex; flex-wrap: wrap; margin-inline: -25px; }
.colonne.centro-v { align-items: center; }
.colonne.fondo-v { align-items: flex-end; }
.colonne.uguali > .col > .col-in { height: 100%; }
.col { width: 100%; padding-inline: 25px; min-width: 0; position: relative; }
.col:has(> .col-in) { padding-inline: 0; }
.col-in { position: relative; padding-inline: 25px; }
.colonne.gap-10 { margin-inline: -30px; } .colonne.gap-10 > .col { padding: 5px 30px; } .colonne.gap-10 > .col:has(> .col-in) { padding: 5px; }
.colonne.gap-20 { margin-inline: -35px; } .colonne.gap-20 > .col { padding: 10px 35px; } .colonne.gap-20 > .col:has(> .col-in) { padding: 10px; }
.colonne.gap-30 { margin-inline: -40px; } .colonne.gap-30 > .col { padding: 15px 40px; } .colonne.gap-30 > .col:has(> .col-in) { padding: 15px; }
.colonne.gap-35 { margin-inline: -42.5px; } .colonne.gap-35 > .col { padding: 17.5px 42.5px; } .colonne.gap-35 > .col:has(> .col-in) { padding: 17.5px; }
.c-xs-1 { width: 8.3333%; } .c-xs-2 { width: 16.6667%; } .c-xs-3 { width: 25%; } .c-xs-4 { width: 33.3333%; } .c-xs-5 { width: 41.6667%; } .c-xs-6 { width: 50%; }
.c-xs-7 { width: 58.3333%; } .c-xs-8 { width: 66.6667%; } .c-xs-9 { width: 75%; } .c-xs-10 { width: 83.3333%; } .c-xs-11 { width: 91.6667%; } .c-xs-12 { width: 100%; }
@media (max-width: 767px) { .nascosto-xs { display: none; } }
@media (min-width: 768px) {
  .c-sm-1 { width: 8.3333%; } .c-sm-2 { width: 16.6667%; } .c-sm-3 { width: 25%; } .c-sm-4 { width: 33.3333%; } .c-sm-5 { width: 41.6667%; } .c-sm-6 { width: 50%; }
  .c-sm-7 { width: 58.3333%; } .c-sm-8 { width: 66.6667%; } .c-sm-9 { width: 75%; } .c-sm-10 { width: 83.3333%; } .c-sm-11 { width: 91.6667%; } .c-sm-12 { width: 100%; }
  .c-sm-1-5 { width: 20%; } .c-sm-2-5 { width: 40%; } .c-sm-3-5 { width: 60%; } .c-sm-4-5 { width: 80%; }
  .o-sm-1 { margin-left: 8.3333%; } .o-sm-2 { margin-left: 16.6667%; } .o-sm-3 { margin-left: 25%; } .o-sm-4 { margin-left: 33.3333%; }
}
@media (min-width: 768px) and (max-width: 991px) { .nascosto-sm { display: none; } }
@media (min-width: 992px) {
  .c-md-1 { width: 8.3333%; } .c-md-2 { width: 16.6667%; } .c-md-3 { width: 25%; } .c-md-4 { width: 33.3333%; } .c-md-5 { width: 41.6667%; } .c-md-6 { width: 50%; }
  .c-md-7 { width: 58.3333%; } .c-md-8 { width: 66.6667%; } .c-md-9 { width: 75%; } .c-md-10 { width: 83.3333%; } .c-md-11 { width: 91.6667%; } .c-md-12 { width: 100%; }
  .c-md-1-5 { width: 20%; }
}
@media (min-width: 992px) and (max-width: 1199px) { .nascosto-md { display: none; } }
@media (min-width: 1200px) {
  .c-lg-1 { width: 8.3333%; } .c-lg-2 { width: 16.6667%; } .c-lg-3 { width: 25%; } .c-lg-4 { width: 33.3333%; } .c-lg-5 { width: 41.6667%; } .c-lg-6 { width: 50%; }
  .c-lg-7 { width: 58.3333%; } .c-lg-8 { width: 66.6667%; } .c-lg-9 { width: 75%; } .c-lg-10 { width: 83.3333%; } .c-lg-11 { width: 91.6667%; } .c-lg-12 { width: 100%; }
  .c-lg-1-5 { width: 20%; }
  .nascosto-lg { display: none; }
}
@media (max-width: 767px) {
  .col { margin-bottom: 0; }
  .colonne > .col:not([class*="c-xs-"]) + .col { margin-top: 0; }
}

/* ---------- elementi ---------- */
.spazio { display: block; }
.testo > :last-child { margin-bottom: 0; }
.testo ul { list-style: disc; }
.titolo-s { font-size: 20px !important; line-height: 32px !important; }
.allinea-center { text-align: center; }
.allinea-right { text-align: right; }
.allinea-left { text-align: left; }
.img { margin: 0; line-height: 0; }
.img a { display: inline-block; }
.img.bordo img { padding: 6px; border: 1px solid #ebebeb; background: #fff; }
.img a:hover img, .teaser-img a:hover img, .scheda-img:hover img { opacity: .85; }
.img img, .teaser-img img, .scheda-img img { transition: opacity .25s; }
.img-titolo { font-size: 18px; line-height: 28px; margin-bottom: 10px; }
.img figcaption { line-height: 20px; font-size: 12px; margin-top: 6px; }

.titolo-u { margin-bottom: 0; }
.titolo-u .tu-titolo { font-size: var(--fs, 26px); line-height: var(--lh, 36px); font-weight: 400; margin: 0; }
.titolo-u .tu-sotto { font-size: var(--fs, inherit); line-height: var(--lh, inherit); }
.titolo-u .tu-sotto p:last-child { margin-bottom: 0; }
.titolo-u .tu-linea { display: block; border-bottom: 2px solid var(--verde); }
.titolo-u.allinea-center .tu-linea { margin-left: auto !important; margin-right: auto !important; }
.titolo-u.allinea-right .tu-linea { margin-left: auto !important; }
@media (max-width: 1199px) {
  .titolo-u .tu-titolo { font-size: var(--fs-t, var(--fs, 26px)); line-height: var(--lh-t, var(--lh, 36px)); }
  .titolo-u .tu-sotto { font-size: var(--fs-t, var(--fs, inherit)); line-height: var(--lh-t, var(--lh, inherit)); }
}
@media (max-width: 767px) {
  .titolo-u .tu-titolo { font-size: var(--fs-m, var(--fs-t, var(--fs, 24px))); line-height: var(--lh-m, var(--lh-t, var(--lh, 32px))); }
  .titolo-u .tu-sotto { font-size: var(--fs-m, var(--fs-t, var(--fs, inherit))); line-height: var(--lh-m, var(--lh-t, var(--lh, inherit))); }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--verde); color: #fff; border: 0; border-radius: 0; font-family: var(--font-menu); font-weight: 700; cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: var(--hover-btn); color: #fff; text-decoration: none; }
.btn-s { font-size: 13px; line-height: 15px; padding: 8px 14px; }
.btn-m { font-size: 14px; line-height: 16px; padding: 12px 18px; }
.btn-l { font-size: 18px; line-height: 20px; padding: 16px 24px; }
.btn .ico { width: 14px; height: 14px; }
/* i pulsanti del vecchio tema (dt-btn) avevano 10px di margine sotto: lo spazio sotto i pulsanti resta uguale */
.contenuto a.btn, .contenuto span.btn { margin-bottom: 10px; }
.btn.apri-preventivo { border: 1px solid var(--verde); border-bottom-color: var(--verde-scuro); border-radius: 3px; padding: 11px 17px; }
.btn.apri-preventivo:hover { background: #317546; border-color: #317546; }
.riga-btn { margin: 0; }

.sep-titolo { display: flex; align-items: center; gap: 15px; color: var(--secondario); font-size: 14px; line-height: 26px; width: 100%; }
.sep-titolo::before, .sep-titolo::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }
.sep-titolo.allinea-left::before { display: none; }
.sep-titolo.title-color { color: var(--titoli); }
.sep-titolo.h3-size { font: 300 26px/36px var(--font-titoli); }
.sep-titolo.h4-size { font: 700 20px/30px var(--font-titoli); }
.sep-titolo.h5-size { font: 700 18px/28px var(--font-titoli); }
hr.sep { border-top: 1px solid #ebebeb; width: 100%; }
hr.sep.allinea-center { margin-left: auto; margin-right: auto; }

.teaser-img { line-height: 0; }
.teaser-img img { width: 100%; }
.teaser-testo { padding-top: 20px; }
.teaser-testo h5, .teaser-testo h6 { margin-bottom: 10px; }
.teaser-testo h6 { font-size: 16px; }
.teaser-testo p { margin-bottom: 10px; }
.teaser.cornice { background: var(--grigio); }
.teaser.cornice .teaser-testo { padding: 0 20px 20px; }
.teaser.cornice .teaser-img + .teaser-testo { padding-top: 20px; }

.box-icona { margin-bottom: 35px; }
.box-icona.default-icon { display: grid; grid-template-columns: auto 1fr; column-gap: 15px; align-items: start; }
.box-icona.default-icon .bi-testo { display: contents; }
.box-icona .bi-icona { color: var(--verde); font-size: 28px; line-height: 0; padding-top: 2px; }
.box-icona .bi-icona .ico { width: 1em; height: 1em; }
.box-icona.default-icon .bi-icona { font-size: min(var(--fs-icona, 28px), 22px); }
.box-icona .bi-titolo { font: 500 16px/26px var(--font-titoli); color: var(--titoli); margin: 0 0 20px; }
.box-icona .bi-desc > :last-child { margin-bottom: 0; }
.box-icona.default-icon .bi-desc { grid-column: 1 / -1; }
.box-icona.top-icon { text-align: center; }
.box-icona.top-icon .bi-icona { margin-bottom: 15px; }

/* caroselli (al posto di Ultimate carousel e Owl carousel) */
.carosello { position: relative; --gap: 25px; }
.car-binario { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--col) - 1) * var(--gap)) / var(--col)); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.car-binario::-webkit-scrollbar { display: none; }
.car-el { scroll-snap-align: start; min-width: 0; }
.car-foto { --gap: 10px; }
.carosello.pieno { width: 100vw; margin-left: calc(50% - 50vw); padding-inline: 15px; }
.carosello.pieno .car-freccia.prec { left: 10px; }
.carosello.pieno .car-freccia.succ { right: 10px; }
.car-foto .car-el img { width: 100%; }
.car-freccia { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: background-color .2s, opacity .2s; }
.car-freccia:hover { background: var(--hover-btn); }
.car-freccia .ico { width: 18px; height: 18px; }
.car-freccia.prec { left: -18px; }
.car-freccia.succ { right: -18px; }
.car-freccia:disabled { opacity: .3; cursor: default; }
.carosello.senza-frecce .car-freccia { display: none; }
.car-foto .car-freccia { width: 28px; height: 28px; border-radius: 0; background: rgba(255, 255, 255, .8); color: var(--titoli); }
.car-foto .car-freccia.prec { left: 0; }
.car-foto .car-freccia.succ { right: 0; }
/* album fotografici (ex dt_gallery di The7): una foto alla volta in un riquadro 2:1, frecce tonde grigie in basso a destra */
.car-album .car-el { aspect-ratio: 2 / 1; }
.car-album .car-el img { width: 100%; height: 100%; object-fit: contain; }
.car-album .car-freccia { top: auto; bottom: 20px; transform: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, .4); color: #fff; }
.car-album .car-freccia:hover { background: var(--verde); }
.car-album .car-freccia .ico { width: 16px; height: 16px; }
.car-album .car-freccia.prec { left: auto; right: 59px; }
.car-album .car-freccia.succ { right: 20px; }
.riga.contenuto-largo .car-freccia.prec { left: 5px; }
.riga.contenuto-largo .car-freccia.succ { right: 5px; }
@media (max-width: 1199px) { .carosello { --col-a: var(--col-t); } .car-binario { grid-auto-columns: calc((100% - (var(--col-t) - 1) * var(--gap)) / var(--col-t)); } }
@media (max-width: 767px) { .car-binario { grid-auto-columns: calc((100% - (var(--col-m) - 1) * var(--gap)) / var(--col-m)); } .car-freccia.prec { left: 0; } .car-freccia.succ { right: 0; } }
/* caroselli di Ultimate Addons (car-ult) come nel vecchio sito: 30px tra le schede (50px in quelli a tutta larghezza),
   pallini sotto (10px, grigi, quello attivo scuro), 55px prima del blocco successivo, frecce del plugin; scorrono da
   soli ogni 3 secondi e ricominciano dall'inizio (sito.js) */
.car-ult { --gap: 30px; --bordo: 15px; margin-bottom: 25px; }
.car-ult .car-binario { padding-inline: var(--bordo); scroll-padding-inline: var(--bordo); }
.car-ult.pieno { --gap: 50px; --bordo: 25px; width: calc(100vw - var(--barra-scorr, 0px)); margin-left: calc(50% - 50vw + var(--barra-scorr, 0px) / 2); padding-inline: 0; }
.car-ult .car-freccia { top: calc(50% - 15px); width: 20px; height: 20px; border-radius: 0; background: none; color: #333; }
.car-ult .car-freccia:hover { background: none; }
.car-ult .car-freccia .ico { width: 20px; height: 20px; }
.car-ult .car-freccia.prec { left: -15px; }
.car-ult .car-freccia.succ { right: -15px; }
.car-ult.pieno .car-freccia { width: 30px; height: 30px; background: var(--verde); color: #fff; }
.car-ult.pieno .car-freccia.prec { left: 25px; }
.car-ult.pieno .car-freccia.succ { right: 25px; }
.car-punti { display: flex; justify-content: center; height: 20px; margin-top: 10px; }
.car-punti.vuoto { visibility: hidden; }
.car-punti button { width: 20px; height: 20px; margin: 0 5px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.car-punti button::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #333; opacity: .5; transition: opacity .2s; }
.car-punti button.attivo::before, .car-punti button:hover::before { opacity: 1; }
/* come nel vecchio: 4 schede fino a 1026px di larghezza, poi 2 */
@media (min-width: 1026px) and (max-width: 1199px) { .car-ult .car-binario { grid-auto-columns: calc((100% - (var(--col) - 1) * var(--gap)) / var(--col)); } }

/* gallerie */
.galleria-mini { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.galleria-mini a { display: block; line-height: 0; }
.galleria-mini img { height: var(--h, 80px); width: auto; }
.galleria-mini a:hover img { opacity: .8; }

/* griglie di schede (prodotti, album) */
.griglia-schede { display: grid; grid-template-columns: repeat(var(--col), minmax(0, 1fr)); gap: 30px; }
@media (max-width: 1199px) { .griglia-schede { grid-template-columns: repeat(var(--col-t), minmax(0, 1fr)); } }
@media (max-width: 991px) { .griglia-schede { grid-template-columns: repeat(var(--col-tv), minmax(0, 1fr)); } }
@media (max-width: 767px) { .griglia-schede { grid-template-columns: repeat(var(--col-m), minmax(0, 1fr)); } }
.scheda { text-align: center; display: flex; flex-direction: column; }
.scheda-img { display: block; line-height: 0; }
.scheda-img img { width: 100%; }
.scheda-titolo { font: 400 15px/22px var(--font); color: var(--titoli); margin: 0; padding: 20px 10px; flex: 1; display: flex; align-items: center; justify-content: center; }
.griglia-schede.con-sfondo .scheda-titolo { background: var(--grigio); }
.griglia-schede.album .scheda-titolo { font-family: var(--font-titoli); font-size: 18px; font-weight: 700; }

/* ---------- scheda prodotto ---------- */
.prodotto-categorie { text-align: center; font-size: 12px; line-height: 22px; color: var(--secondario); margin: 40px 0 0; }
.prodotto-categorie a { color: var(--secondario); }
.prodotto-categorie a:hover { color: var(--verde); }
.prodotto-nav { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); padding: 25px 0; margin-top: 50px; }
.prodotto-nav a { display: grid; grid-template-columns: auto 1fr; column-gap: 15px; align-items: center; color: var(--titoli); max-width: 48%; }
.prodotto-nav .pn-succ { grid-template-columns: 1fr auto; text-align: right; margin-left: auto; }
.prodotto-nav .pn-prec .ico { grid-column: 1; grid-row: 1 / span 2; }
.prodotto-nav .pn-prec span { grid-column: 2; }
.prodotto-nav .pn-succ .ico { grid-column: 2; grid-row: 1 / span 2; }
.prodotto-nav .pn-succ span { grid-column: 1; }
.prodotto-nav a:hover { text-decoration: none; color: var(--verde); }
.prodotto-nav .ico { grid-row: span 2; width: 20px; height: 20px; color: var(--secondario); }
.prodotto-nav .pn-et { font-size: 12px; text-transform: uppercase; color: var(--secondario); line-height: 18px; }
.prodotto-nav .pn-tit { font: 300 20px/30px var(--font-titoli); }
.correlati { margin-top: 60px; padding-bottom: 50px; }
.correlati-titolo { font: 300 26px/36px var(--font-titoli); margin-bottom: 30px; }
.correlato { text-align: center; }
.correlato-img { display: block; line-height: 0; }
.correlato-titolo { font: 300 20px/30px var(--font-titoli); margin: 15px 0 5px; }
.correlato-cat { font-size: 12px; line-height: 22px; color: var(--secondario); }

/* ---------- modulo ---------- */
.modulo .campo { margin: 0 0 10px; }
.modulo input[type=text], .modulo input[type=email], .modulo input[type=tel], .modulo textarea { width: 100%; border: 1px solid var(--linea); background: #fff; color: var(--testo); font: 14px/20px var(--font); padding: 9px 15px; min-height: 40px; border-radius: 0; }
.modulo textarea { resize: vertical; min-height: 246px; display: block; } /* come il vecchio modulo */
.modulo input:focus, .modulo textarea:focus { outline: none; border-color: var(--verde); }
.modulo [aria-invalid=true] { border-color: #d33; }
.modulo ::placeholder { color: #999; opacity: 1; }
.campo-errore { display: block; color: #d33; font-size: 12px; line-height: 18px; margin-top: 3px; }
.campo-privacy { font-size: 13px; line-height: 20px; min-height: 26px; margin: 20px 0 10px; }
.campo-privacy label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.campo-privacy input { margin-top: 3px; flex: none; }
.modulo .invio { margin: 0; }
.contenuto .modulo .invio { margin-bottom: 10px; } /* nel vecchio modulo 10px sotto il pulsante */
.finestra .btn-pieno { width: 100%; }
.modulo-esito { padding: 12px 15px; margin-bottom: 15px; border: 2px solid; font-size: 14px; line-height: 20px; }
.modulo-esito.ok { border-color: #46b450; background: rgba(70, 180, 80, .08); color: #1d6b25; }
.modulo-esito.errore { border-color: #dc3232; background: rgba(220, 50, 50, .06); color: #a11; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* finestra "Richiedi un preventivo" */
.finestra { position: fixed; inset: 0; z-index: 300; background: rgba(51, 51, 51, .8); display: flex; align-items: flex-start; justify-content: center; padding: 40px 15px; overflow-y: auto; }
.finestra[hidden] { display: none; }
.finestra-box { width: 100%; max-width: 500px; background: #fff; border: 2px solid var(--verde); margin: auto 0; }
.finestra-testa { display: flex; align-items: center; gap: 12px; background: var(--verde); color: #fff; padding: 12px 15px; }
.finestra-testa h2 { color: #fff; font: 700 20px/26px var(--font-menu); margin: 0; flex: 1; }
.finestra-icona { width: 22px; height: 22px; }
.finestra-chiudi { background: none; border: 0; color: #fff; cursor: pointer; padding: 5px; line-height: 0; }
.finestra-chiudi .ico { width: 22px; height: 22px; }
.finestra-corpo { padding: 20px; }
.finestra-corpo textarea { min-height: 150px; }

/* mappe e contenuti esterni */
.embed { position: relative; background: #eef1ee; overflow: hidden; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-avviso { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.embed-testo { max-width: 380px; }
.embed-testo > .ico { width: 36px; height: 36px; color: var(--verde); margin-bottom: 10px; }
.embed-testo p { font-size: 13px; line-height: 20px; }

.tabella-scorre { overflow-x: auto; margin-bottom: 15px; }
.tabella-cookie { font-size: 13px; line-height: 20px; min-width: 560px; }
.tabella-cookie th { background: var(--grigio); color: var(--titoli); }
.pagina-404 { text-align: center; padding: 30px 0; }

/* ---------- slider della home ----------
   Stessa logica del vecchio Revolution Slider (layout "fullwidth"): una griglia per livello responsive, scelta in base
   alla larghezza dello slider (>=1024: 1300x600, >=778: 1024x550, >=480: 778x500, sotto: 480x500), centrata e
   rimpicciolita in proporzione quando lo slider e' piu' stretto della griglia (mai ingrandita). --u e' un pixel della
   griglia. Posizioni, misure e tempi delle animazioni sono quelli dei livelli del vecchio slider. */
.slider { container: slider / inline-size; color: #fff; }
.slider-area { --gw: 1300; --gh: 600; --u: min(1px, 100cqw / var(--gw)); position: relative; height: calc(var(--gh) * var(--u)); overflow: hidden; background: #1d2a33; }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.slide.attiva { opacity: 1; visibility: visible; z-index: 1; }
.slide-img { position: absolute; inset: 0; background: center / cover no-repeat; }
.slide-velo { position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .3) 100%); }
.slide-griglia { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(var(--gw) * var(--u)); transform: translateX(-50%); }
.sl { position: absolute; margin: 0; }
.sl-titolo, .sl-desc, .sl-pulsante { overflow: hidden; }
.sl-titolo { left: calc(70 * var(--u)); top: calc(50% - 120 * var(--u)); transform: translateY(-50%); white-space: nowrap; }
.sl-titolo h2 { margin: 0; color: #fff; font: 700 calc(50 * var(--u)) / calc(56 * var(--u)) var(--font-menu); }
.sl-desc { left: calc(70 * var(--u)); top: calc(50% + 20 * var(--u)); transform: translateY(-50%); width: calc(600 * var(--u)); }
.sl-desc p { margin: 0; font: 400 calc(18 * var(--u)) / calc(30 * var(--u)) "Roboto", var(--font); }
.sl-img { left: calc(var(--x0) * var(--u)); top: calc(var(--y0) * var(--u)); width: calc(var(--w0) * var(--u)); max-width: none; height: auto; }
.sl-pulsante { top: calc(50% + 145 * var(--u)); transform: translateY(-50%); width: calc(180 * var(--u)); }
.sl-p1 { left: calc(70 * var(--u)); }
.sl-p2 { left: calc(270 * var(--u)); }
.sl-pulsante a { display: block; padding: calc(15 * var(--u)) calc(18 * var(--u)); font: 700 calc(16 * var(--u)) / calc(18 * var(--u)) var(--font-menu); text-align: center; text-decoration: none; transition: background-color .2s, color .2s; }
.sl-p1 a { background: #ffc000; color: #fff; }
.sl-p1 a:hover { background: var(--hover-btn); color: #fff; }
.sl-p2 a { background: #fff; color: #303030; }
.sl-p2 a:hover { background: #e8e8e8; color: #303030; }
/* entrata dei livelli: testi e pulsanti salgono da una maschera, immagini in dissolvenza (stessa sequenza del vecchio
   slider, con tempi piu' brevi) */
.slide.attiva .sl-in { animation: sl-sale .7s cubic-bezier(.45, 0, .55, 1) .25s both; }
.slide.attiva .sl-desc .sl-in { animation-delay: .4s; }
.slide.attiva .sl-p1 .sl-in { animation-delay: .55s; }
.slide.attiva .sl-p2 .sl-in { animation-delay: .7s; }
.slide.attiva .sl-img { animation: sl-appare .5s ease .6s both; }
@keyframes sl-sale { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sl-appare { from { opacity: 0; } to { opacity: 1; } }
.sl-in { display: block; }
/* barra di avanzamento in alto (6 secondi per slide, si ferma col mouse sopra) */
.slider-barra { position: absolute; top: 0; left: 0; z-index: 6; width: 0; height: 5px; background: rgba(255, 255, 255, .5); pointer-events: none; }
.slider-barra.va { animation: sl-barra 6s linear forwards; }
.slider:hover .slider-barra, .slider:focus-within .slider-barra { animation-play-state: paused; }
@keyframes sl-barra { from { width: 0; } to { width: 100%; } }
.slider-freccia { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 30px; height: 90px; padding: 0; border: 0; background: rgba(0, 0, 0, .65); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.slider-freccia .ico { width: 20px; height: 20px; transition: opacity .3s; }
.slider-freccia:hover .ico { opacity: .75; }
.slider-freccia.prec { left: 0; }
.slider-freccia.succ { right: 0; }
.slider-punti { position: absolute; bottom: 20px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 15px; }
.slider-punti button { position: relative; width: 15px; height: 15px; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0); cursor: pointer; transition: box-shadow .3s; }
.slider-punti button::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, .3); transition: background-color .3s, transform .3s; }
.slider-punti button.attivo, .slider-punti button:hover { box-shadow: 0 0 0 2px #fff; }
.slider-punti button.attivo::before, .slider-punti button:hover::before { transform: scale(.4); background: #fff; }
@container slider (max-width: 1023.98px) {
  .slider-area { --gw: 1024; --gh: 550; }
  .sl-titolo h2 { font-size: calc(44 * var(--u)); line-height: calc(50 * var(--u)); }
  .sl-img { left: calc(var(--x1) * var(--u)); top: calc(var(--y1) * var(--u)); width: calc(var(--w1) * var(--u)); }
}
@container slider (max-width: 777.98px) {
  .slider-area { --gw: 778; --gh: 500; }
  .sl-desc, .sl-prodotto { display: none; }
  .sl-titolo { left: 50%; top: calc(50% - 50 * var(--u)); transform: translate(-50%, -50%); text-align: center; }
  .sl-titolo h2 { font-size: calc(40 * var(--u)); line-height: calc(50 * var(--u)); }
  .sl-logo { left: calc(50% + var(--x2) * var(--u)); top: calc(var(--y2) * var(--u)); width: calc(var(--w2) * var(--u)); transform: translateX(-50%); }
  .sl-pulsante { top: calc(50% + 70 * var(--u)); transform: translate(-50%, -50%); }
  .sl-p1 { left: calc(50% - 100 * var(--u)); }
  .sl-p2 { left: calc(50% + 100 * var(--u)); }
}
@container slider (max-width: 479.98px) {
  .slider-area { --gw: 480; --gh: 500; }
  .sl-titolo { top: calc(50% - 40 * var(--u)); }
  .sl-titolo h2 { font-size: calc(35 * var(--u)); line-height: calc(40 * var(--u)); }
  .sl-logo { left: calc(50% + var(--x3) * var(--u)); top: calc(var(--y3) * var(--u)); width: calc(var(--w3) * var(--u)); }
}
@media (max-width: 799px) { .slider-freccia { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .slide.attiva .sl-in, .slide.attiva .sl-img { animation: none; }
  .slider-barra { display: none; }
}

/* ---------- piede ---------- */
.piede { background: #191919; color: #aaa; }
.piede a { color: #aaa; }
.piede a:hover { color: #fff; text-decoration: none; }
.piede-colonne { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 50px; padding-top: 60px; padding-bottom: 60px; } /* come il vecchio: 30px sotto ogni blocco + 30px */
.piede-titolo { color: #fff; font: 700 18px/28px var(--font-titoli); margin: 0 0 20px; }
.piede-testo p { margin-bottom: 10px; }
.piede-testo img { vertical-align: baseline; }
.piede-testo .btn { color: #fff; margin-bottom: 10px; }
.piede-foto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; max-width: 250px; }
.piede-foto a { display: block; line-height: 0; }
.piede-foto img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.piede-foto a:hover img { opacity: .75; }
.piede-contatti { list-style: none; margin: 0 0 15px; padding: 0; }
.piede-contatti li { margin-bottom: 15px; }
.piede-etichetta { display: block; color: #fff; margin-bottom: 5px; }
/* icone social come nel vecchio piede: cerchio pieno 26px, icona 16px, verde al passaggio del mouse */
.social { display: flex; }
.social a { width: 26px; height: 26px; margin: 2px; border-radius: 50%; background: rgba(170, 170, 170, .15); color: #aaa; display: flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; }
.social a:hover { background: var(--verde); color: #fff; }
.social .ico { width: 16px; height: 16px; }
.barra-fondo { background: #252525; font-size: 12px; line-height: 20px; }
.barra-fondo-in { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 60px; padding-top: 10px; padding-bottom: 10px; }
.copyright { margin: 0; }
.menu-fondo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 20px; align-items: center; }
.menu-fondo li { position: relative; }
.menu-fondo button { background: none; border: 0; color: #aaa; cursor: pointer; padding: 0; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
.menu-fondo button:hover { color: #fff; }
.menu-fondo .ico { width: 10px; height: 10px; }
/* sottomenu "Sitemap": una fascia invisibile copre lo spazio tra pulsante e riquadro e la chiusura aspetta un attimo,
   cosi' il mouse ci arriva senza che sparisca */
.menu-fondo .sotto-su { position: absolute; bottom: calc(100% + 10px); right: -10px; display: block; background: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .2); padding: 8px 0; min-width: 220px; z-index: 20; visibility: hidden; opacity: 0; transition: opacity .15s .25s, visibility 0s .4s; }
.menu-fondo .sotto-su::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; }
.menu-fondo .ha-figli.aperto .sotto-su, .menu-fondo .ha-figli:hover .sotto-su, .menu-fondo .ha-figli:focus-within .sotto-su { visibility: visible; opacity: 1; transition: opacity .15s, visibility 0s; }
.menu-fondo .sotto-su a { display: block; padding: 5px 15px; color: var(--titoli); font-size: 13px; }
.menu-fondo .sotto-su a:hover { background: rgba(0, 117, 52, .07); color: var(--verde); }
@media (max-width: 990px) { .piede-colonne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 778px) {
  .piede-colonne { grid-template-columns: 1fr; gap: 30px; }
  .barra-fondo-in { flex-direction: column; text-align: center; }
  .menu-fondo ul { justify-content: center; }
  .menu-fondo .sotto-su { right: auto; left: 50%; transform: translateX(-50%); }
}

.torna-su { position: fixed; right: 20px; bottom: 20px; width: 40px; height: 40px; background: rgba(0, 0, 0, .25); color: #fff; display: flex; align-items: center; justify-content: center; z-index: 90; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s, background-color .2s; }
.torna-su.visibile { opacity: 1; visibility: visible; }
.torna-su:hover { background: var(--verde); }
.torna-su .ico { width: 20px; height: 20px; }

/* ---------- banner cookie (compatto, in basso a sinistra) ---------- */
.cookie-banner { position: fixed; left: 20px; bottom: 20px; z-index: 400; width: min(440px, calc(100vw - 40px)); background: #fff; color: #333; border-radius: 6px; box-shadow: 0 6px 30px rgba(0, 0, 0, .25); padding: 20px 22px 18px; font-size: 13px; line-height: 20px; }
.cookie-banner[hidden] { display: none; }
.cb-titolo { font: 700 16px/22px var(--font-menu); color: var(--titoli); margin: 0 30px 8px 0; }
.cb-testo { margin: 0 0 12px; }
.cb-testo a { text-decoration: underline; }
.cb-pannello { border-top: 1px solid #eee; padding-top: 10px; margin-bottom: 12px; }
.cb-cat { display: flex; gap: 8px; align-items: center; padding: 4px 0; cursor: pointer; }
.cb-pulsanti { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-btn { flex: 1 1 auto; border: 1px solid var(--verde); background: #fff; color: var(--verde); font: 700 13px/16px var(--font-menu); padding: 9px 12px; border-radius: 4px; cursor: pointer; }
.cb-btn:hover { background: rgba(0, 117, 52, .07); }
.cb-btn.cb-primario { background: var(--verde); color: #fff; }
.cb-btn.cb-primario:hover { background: var(--verde-scuro); }
.cb-chiudi { position: absolute; top: 10px; right: 10px; background: none; border: 0; padding: 6px; cursor: pointer; color: #777; line-height: 0; }
.cb-chiudi .ico { width: 16px; height: 16px; }
.cookie-riapri { position: fixed; left: 15px; bottom: 15px; z-index: 89; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--verde); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cookie-riapri[hidden] { display: none; }
.cookie-riapri .ico { width: 22px; height: 22px; }

/* ---------- immagini ingrandite ---------- */
.lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(0, 0, 0, .9); display: flex; align-items: center; justify-content: center; padding: 50px 60px; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 100px); width: auto; height: auto; background: #fff; }
.lightbox button { position: absolute; background: none; border: 0; color: #fff; cursor: pointer; padding: 10px; line-height: 0; }
.lightbox button .ico { width: 30px; height: 30px; }
.lb-chiudi { top: 10px; right: 10px; }
.lb-prec { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-succ { right: 10px; top: 50%; transform: translateY(-50%); }

/* ---------- schermi piccoli ---------- */
@media (max-width: 1240px) {
  .menu-principale > ul > li { margin: 0 12px; }
  .logo img { width: 280px; height: auto; }
}
@media (max-width: 1100px) {
  .menu-principale { display: none; }
  .apri-menu { display: block; }
  .barra-menu-in { min-height: 70px; }
  .mini-testo, .mini-link { display: none; }
}
@media (max-width: 778px) {
  .barra-top-in { justify-content: center; }
  .mini-contatti span { display: none; }
  .mini-contatti .ico { width: 18px; height: 18px; }
  .logo img { width: 230px; }
  .contenuto { padding: 20px 0 30px; }
  .contenuto > :last-child.larga { margin-bottom: -30px; }
  h1 { font-size: 34px; line-height: 42px; }
  h2 { font-size: 26px; line-height: 34px; }
  .prodotto-nav .pn-tit { font-size: 16px; line-height: 22px; }
  .lightbox { padding: 50px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}