/* =========================================================
   RD Sistemi S.r.l. – Foglio di stile unico per tutto il sito
   Fondo nero con luci verdi e grigie in movimento.
   ========================================================= */

/* Carattere: Geist (licenza SIL OFL), servito dal nostro server: nessuna richiesta a Google (GDPR).
   Un solo file "variabile" copre tutti gli spessori, dal normale al grassetto. */
@font-face { font-family: "Geist"; src: url("../font/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- Colori e misure ---------- */
:root {
  --nero: #050607;                     /* fondo */
  --superficie: #0c0f10;               /* fondo dei pannelli */
  --linea: rgba(255, 255, 255, .09);   /* linee sottili */
  --linea-forte: rgba(255, 255, 255, .2);
  --testo: #eef1f2;                    /* testo principale */
  --grigio: #9aa3a6;                   /* testo secondario */
  --verde: #01ad21;                    /* verde del logo */

  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --larghezza: 1280px;
  --margine: clamp(20px, 5vw, 64px);
  --sezione: clamp(88px, 11vw, 152px);
  --testata: 88px;
  --raggio: 20px;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--testata) + 24px); background: var(--nero); }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.55;
  color: var(--testo); /* il fondo nero è su html, così le luci restano visibili */
  -webkit-font-smoothing: antialiased;
}
html.menu-aperto body { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--verde); }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1 { font-size: clamp(44px, 7.4vw, 92px); font-weight: 600; line-height: 1; letter-spacing: -0.045em; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.4vw, 56px); font-weight: 600; line-height: 1.05; letter-spacing: -0.035em; text-wrap: balance; }
h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; }
p { text-wrap: pretty; }

.contenitore { width: 100%; max-width: var(--larghezza); margin: 0 auto; padding: 0 var(--margine); }
.sezione { padding: var(--sezione) 0; position: relative; }
.sezione--stretta { padding-top: clamp(48px, 6vw, 80px); }
.senza-sopra { padding-top: 0; }
.tenue { color: var(--grigio); }

/* Etichetta sopra i titoli, con un punto verde */
.etichetta {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--grigio);
}
.etichetta::before { content: ""; width: 6px; height: 6px; background: var(--verde); box-shadow: 0 0 12px var(--verde); }

/* Intestazione di sezione: etichetta + titolo */
.intro { margin-bottom: clamp(40px, 5vw, 64px); }

/* ---------- Pulsanti ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent;
  font: 500 16px/1 var(--font); cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
}
.btn-chiaro { background: var(--testo); color: var(--nero); }
.btn-chiaro:hover { background: var(--verde); color: var(--nero); }
.btn-piccolo { min-height: 44px; padding: 0 22px; font-size: 15px; }

/* Link con sottolineatura verde che si allunga */
.link {
  display: inline-flex; gap: 8px; padding-bottom: 3px; font-weight: 500;
  background: linear-gradient(var(--verde), var(--verde)) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--curva);
}
.link:hover { background-size: 100% 1px; color: var(--testo); }

/* =========================================================
   Luci in movimento sul fondo di tutte le pagine
   ========================================================= */
.luci { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.luci span { position: absolute; border-radius: 50%; will-change: transform; }
.luce-1 { width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax; background: radial-gradient(circle, rgba(1,173,33,.32), rgba(1,173,33,0) 62%); animation: deriva-1 32s ease-in-out infinite alternate, respiro 6s ease-in-out 0s infinite alternate; }
.luce-2 { width: 60vmax; height: 60vmax; right: -25vmax; top: 10vh; background: radial-gradient(circle, rgba(140,152,157,.2), rgba(140,152,157,0) 62%); animation: deriva-2 38s ease-in-out infinite alternate; }
.luce-3 { width: 50vmax; height: 50vmax; left: 20vw; bottom: -30vmax; background: radial-gradient(circle, rgba(0,120,40,.28), rgba(0,120,40,0) 62%); animation: deriva-3 44s ease-in-out infinite alternate, respiro 7s ease-in-out -2s infinite alternate; }
.luce-4 { width: 22vmax; height: 22vmax; left: 55vw; top: 20vh; background: radial-gradient(circle, rgba(70,220,110,.16), rgba(70,220,110,0) 62%); animation: deriva-2 26s ease-in-out infinite alternate-reverse, respiro 5s ease-in-out -1s infinite alternate; }
@keyframes deriva-1 { to { transform: translate(30vw, 25vh) scale(1.2); } }
@keyframes deriva-2 { to { transform: translate(-28vw, 30vh) scale(.85); } }
@keyframes deriva-3 { to { transform: translate(-20vw, -35vh) scale(1.15); } }
/* Respiro: le luci verdi si accendono e si attenuano lentamente */
@keyframes respiro { from { opacity: .55; } to { opacity: 1; } } /* non si spegne mai del tutto */
/* Bagliore centrale che "respira" dietro l'apertura */
/* segue il mouse: la posizione arriva da js/script.js tramite --mx e --my */
.luce-5 { width: 80vmax; height: 80vmax; left: 50%; top: 50%; margin: -40vmax 0 0 -40vmax; translate: var(--mx, 0px) var(--my, -10vh); background: radial-gradient(circle, rgba(1,173,33,.12), rgba(1,173,33,.03) 35%, rgba(1,173,33,0) 60%); animation: respiro-centro 7s ease-in-out infinite; }
/* Scia luminosa disegnata dietro il mouse (canvas creato da js/script.js) */
.luci canvas { position: absolute; inset: 0; width: 100%; height: 100%; filter: blur(96px); /* scia morbida e sfocata */ }
@keyframes respiro-centro { 0%, 100% { transform: scale(.9); opacity: .55; } 50% { transform: scale(1.1); opacity: .85; } }

/* =========================================================
   Testata: trasparente in cima, nera sfocata scorrendo
   ========================================================= */
.testata {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  border-bottom: 1px solid transparent; transition: background-color .4s, border-color .4s;
}
.testata.solida {
  background: rgba(5, 6, 7, .72);
  -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px);
  border-bottom-color: var(--linea);
}
.testata-interno { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: var(--testata); }
.logo img { height: 40px; width: auto; }
.menu { display: flex; align-items: center; gap: 44px; font-size: 17px; font-weight: 500; }
.menu a:not(.btn) { position: relative; color: #dfe4e6; transition: color .3s; }
.menu a:not(.btn):hover, .menu a[aria-current="page"] { color: var(--testo); }
.menu a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--verde);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--curva);
}
.menu a:not(.btn):hover::after, .menu a[aria-current="page"]::after { transform: scaleX(1); }
.menu-contatti { display: none; }

/* Pulsante menu (telefono): due linee che diventano una X */
.menu-toggle { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; color: var(--testo); cursor: pointer; }
.menu-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .4s var(--curva); }
.menu-toggle span:first-child { top: 18px; }
.menu-toggle span:last-child { top: 25px; }
html.menu-aperto .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }
html.menu-aperto .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* =========================================================
   Home
   ========================================================= */
/* Apertura centrata a tutto schermo */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: calc(var(--testata) + 24px) 0 80px; text-align: center; }
.hero .contenitore { display: flex; flex-direction: column; align-items: center; }
.hero h1 { max-width: 16ch; margin: 0 auto; font-size: clamp(40px, 5.6vw, 72px); }
.hero-testo { max-width: 58ch; margin: 22px auto 32px; font-size: clamp(17px, 1.5vw, 20px); color: #c9d0d2; }

/* Indicatore "scorri" in basso */
.scorri { position: absolute; left: 50%; bottom: 24px; width: 1px; height: 48px; background: var(--linea-forte); overflow: hidden; }
.scorri::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: var(--verde); animation: scorri 2.2s var(--curva) infinite; }
@keyframes scorri { from { transform: translateY(-16px); } to { transform: translateY(48px); } }

/* Numeri su una riga, divisi da linee sottili */
.numeri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 1000px; margin-top: clamp(40px, 6vh, 72px); border-top: 1px solid var(--linea); }
.numeri li { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px 0; }
.numeri li + li { border-left: 1px solid var(--linea); }
.cifra { font-size: clamp(30px, 5.5vw, 72px); font-weight: 500; line-height: 1; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.cifra .piu { color: var(--verde); font-weight: 400; margin-right: .04em; }
.didascalia { color: var(--grigio); font-size: 15px; }

/* ---------- Pannelli (foto + titolo + parole chiave) ---------- */
.pannello {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--raggio); border: 1px solid var(--linea); background: var(--superficie); color: var(--testo);
}
.pannello:hover { color: var(--testo); }
.pannello img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.6) saturate(.85); transition: transform 1.2s var(--curva), filter .6s;
}
.pannello:hover img { transform: scale(1.05); filter: brightness(.75) saturate(1); }
.pannello::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(5,6,7,0) 30%, rgba(5,6,7,.9) 100%); }
.pannello::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--verde);
  box-shadow: 0 0 16px var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--curva);
}
.pannello:hover::after { transform: scaleX(1); }
.pannello-testo { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(22px, 2.6vw, 36px); display: grid; gap: 8px; }
.pannello .indice { font-size: 13px; color: var(--grigio); font-variant-numeric: tabular-nums; }
.pannello .parole { font-size: 15px; color: var(--grigio); }
.pannello .vai {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid var(--linea-forte); font-size: 18px;
  transition: opacity .4s, background-color .35s, color .35s, border-color .35s, transform .5s var(--curva);
}
.pannello:hover .vai { background: var(--verde); border-color: var(--verde); color: var(--nero); transform: rotate(-45deg); }

/* Fisarmonica: il pannello sotto il mouse si allarga */
.fisarmonica { display: flex; gap: 12px; height: clamp(440px, 46vw, 600px); }
.fisarmonica .pannello { flex: 1 1 0; min-width: 0; transition: flex-grow .9s var(--curva); }
.fisarmonica .pannello.aperto { flex-grow: 3.6; }
.fisarmonica .pannello-testo { opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .6s var(--curva); min-width: 320px; }
.fisarmonica .pannello.aperto .pannello-testo { opacity: 1; transform: none; transition-delay: .25s; }
.fisarmonica .vai { opacity: 0; }
.fisarmonica .pannello.aperto .vai { opacity: 1; }
.pannello-verticale {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl; white-space: nowrap; font-size: 20px; font-weight: 600; letter-spacing: -0.01em;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; /* numero in fondo, titolo sopra */
  transition: opacity .4s;
}
/* Primo scorrimento: i pannelli salgono uno dopo l'altro, aprendosi dal basso */
.js .fisarmonica:not(.visibile) .pannello { opacity: 0; }
.fisarmonica.visibile .pannello { animation: pannello-sale 1.2s var(--curva) backwards; animation-delay: calc(var(--i, 0) * .12s); }
.fisarmonica.visibile .pannello img { animation: foto-zoom 1.8s var(--curva) backwards; animation-delay: calc(var(--i, 0) * .12s); }
@keyframes pannello-sale { from { opacity: 0; transform: translateY(120px); clip-path: inset(100% 0 0 0 round var(--raggio)); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round var(--raggio)); } }
@keyframes foto-zoom { from { transform: scale(1.25); } to { transform: scale(1); } }
.pannello-verticale small { font-size: 13px; font-weight: 400; color: var(--grigio); }
.fisarmonica .pannello.aperto .pannello-verticale { opacity: 0; }

/* ---------- Clienti: griglia con linee sottili ---------- */
.griglia-clienti { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--linea); border-left: 1px solid var(--linea); }
.griglia-clienti li { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; padding: 24px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
/* I loghi diventano chiari: grigio + inversione, il fondo bianco sparisce con "screen" */
.griglia-clienti img {
  height: auto; max-height: 52px; max-width: 100%; object-fit: contain;
  filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: .55; transition: opacity .4s;
}
.griglia-clienti li:hover img { opacity: 1; }

/* =========================================================
   Pagine interne
   ========================================================= */
.intestazione { padding: calc(var(--testata) + clamp(72px, 10vw, 144px)) 0 clamp(48px, 6vw, 80px); }
.intestazione p:not(.etichetta) { max-width: 46ch; margin-top: 24px; font-size: clamp(17px, 1.5vw, 20px); color: #c9d0d2; }

/* ---------- Servizi: foto grande alternata a sinistra e a destra ---------- */
.servizio { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.servizio + .servizio { margin-top: clamp(72px, 10vw, 144px); }
.servizio:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.servizio:nth-child(even) .foto { order: 2; }
.foto { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--raggio); border: 1px solid var(--linea); background: var(--superficie); }
.foto img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.8) saturate(.9); transition: transform 1.2s var(--curva), filter .6s; }
.foto:hover img { transform: scale(1.04); filter: brightness(.9) saturate(1); }
.servizio .indice { display: block; margin-bottom: 16px; font-size: 13px; color: var(--grigio); font-variant-numeric: tabular-nums; }
.servizio h2 { font-size: clamp(32px, 3.6vw, 48px); }
.servizio p { margin-top: 18px; color: #c9d0d2; font-size: 18px; max-width: 46ch; }
.servizio .servizio-categoria { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }
.servizio .btn { margin-top: 32px; }
.parole-chiave { margin-top: 32px; border-top: 1px solid var(--linea); }
.parole-chiave li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.parole-chiave li::before { content: ""; width: 12px; height: 1px; background: var(--verde); flex: none; }

/* ---------- Come lavoriamo: 4 passi su una riga ---------- */
.passi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.passi li { position: relative; padding-top: 28px; border-top: 1px solid var(--linea); }
.passi li::before { content: ""; position: absolute; top: -1px; left: 0; width: 32px; height: 1px; background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.passi .indice { display: block; font-size: 13px; color: var(--grigio); margin-bottom: 40px; font-variant-numeric: tabular-nums; }
.passi h3 { font-size: 22px; }
.passi p { margin-top: 10px; color: var(--grigio); font-size: 16px; }

/* ---------- Invito al contatto ---------- */
.invito { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--linea); }
.invito h2 { font-size: clamp(40px, 6vw, 80px); }

/* ---------- Contatti ---------- */
.reparti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reparti .pannello { height: clamp(320px, 30vw, 400px); }
.reparti .email { font-size: 15px; color: var(--testo); }

/* Il modulo è la prima cosa che si vede: titolo e recapiti a sinistra, modulo a destra */
.contatti-apertura { padding-top: calc(var(--testata) + clamp(32px, 5vw, 64px)); }
.contatti {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px clamp(48px, 8vw, 128px); align-items: start;
  grid-template-areas: "titolo modulo" "recapiti modulo"; grid-template-rows: auto 1fr;
}
.contatti-titolo { grid-area: titolo; }
.contatti-titolo h1 { font-size: clamp(40px, 5vw, 64px); }
.contatti-titolo p:not(.etichetta) { margin-top: 16px; color: #c9d0d2; }
.contatti .modulo { grid-area: modulo; grid-row: 1 / span 2; }
.contatti .recapiti { grid-area: recapiti; }
.recapiti { display: grid; gap: 32px; }
.recapiti .titolo { margin-bottom: 8px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--grigio); }
.recapiti p { line-height: 1.75; }
.recapiti a { color: var(--testo); }
.recapiti a:hover { color: var(--verde); }

/* Modulo: riquadro bianco ad alto contrasto, facile da compilare */
.modulo {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px;
  padding: clamp(24px, 4vw, 48px); border-radius: var(--raggio);
  background: #ffffff; color: #0b0d0e; box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.modulo-titolo { grid-column: 1 / -1; font-size: clamp(28px, 3vw, 36px); color: #0b0d0e; }
.modulo-nota { grid-column: 1 / -1; margin-top: -14px; font-size: 15px; color: #4a5357; }
.campo { display: grid; gap: 8px; }
.campo--intero { grid-column: 1 / -1; }
.campo label, .campo legend { font-size: 15px; font-weight: 500; color: #0b0d0e; }
.campo input, .campo textarea {
  width: 100%; min-height: 54px; padding: 14px 16px; border: 1.5px solid #c9cfd2; border-radius: 12px;
  background: #f6f7f8; color: #0b0d0e; font: 400 17px/1.4 var(--font); outline: none;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.campo input:hover, .campo textarea:hover { border-color: #8f989c; }
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo textarea:focus { border-color: var(--verde); background: #ffffff; box-shadow: 0 0 0 4px rgba(1, 173, 33, .2); }
fieldset.campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.scelte { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.scelta { position: relative; }
.scelta input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0; opacity: 0; pointer-events: none; }
.scelta span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid #c9cfd2; background: #ffffff; color: #0b0d0e; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: border-color .25s, background-color .25s, color .25s;
}
.scelta span:hover { border-color: #0b0d0e; }
.scelta input:checked + span { background: #0b0d0e; border-color: #0b0d0e; color: #ffffff; }
.scelta input:focus-visible + span { outline: 3px solid rgba(1, 173, 33, .45); outline-offset: 2px; }
.consenso { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; color: #2f383c; cursor: pointer; }
.consenso input { width: 22px; height: 22px; margin: 0; accent-color: var(--verde); flex: none; }
.consenso a { color: #0b0d0e; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.modulo .invio { grid-column: 1 / -1; }
.modulo .btn { min-height: 56px; padding: 0 36px; font-size: 17px; background: #0b0d0e; color: #ffffff; }
.modulo .btn:hover { background: var(--verde); color: #0b0d0e; }

/* =========================================================
   Prodotti: catalogo con ricerca, categorie e lista di richiesta
   ========================================================= */
/* Colonna laterale (ricerca + categorie) e risultati */
/* =========================================================
   Catalogo prodotti (prodotti.html)
   ========================================================= */
/* il catalogo è più largo del resto del sito: le card hanno spazio */
.catalogo .contenitore { max-width: 1600px; }
body.pagina-prodotti .luci { opacity: .35; } /* luci verdi attenuate: i prodotti sono il punto focale */
.catalogo { --bordo: rgba(255,255,255,.1); --bordo-forte: rgba(255,255,255,.22); --carta: rgba(255,255,255,.03); --carta-hover: rgba(255,255,255,.06); }

/* Intestazione compatta */
.cat-hero { padding: calc(var(--testata) + clamp(28px, 4vw, 48px)) 0 clamp(24px, 3vw, 36px); border-bottom: 1px solid var(--bordo); }
.cat-hero-interno { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.cat-hero h1 { font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.03em; }
.cat-sotto { max-width: 56ch; margin-top: 8px; color: #c9d0d2; font-size: 15px; }

/* Ricerca */
.ricerca { position: relative; display: block; }
.ricerca-icona { position: absolute; left: 20px; top: 50%; width: 16px; height: 16px; margin-top: -10px; border: 2px solid var(--grigio); border-radius: 50%; transition: border-color .3s; }
.ricerca-icona::after { content: ""; position: absolute; width: 7px; height: 2px; background: var(--grigio); right: -6px; bottom: -3px; transform: rotate(45deg); transition: background-color .3s; }
.ricerca:focus-within .ricerca-icona { border-color: var(--verde); }
.ricerca:focus-within .ricerca-icona::after { background: var(--verde); }
.ricerca input {
  width: 100%; min-height: 58px; padding: 12px 48px 12px 50px; border: 1px solid var(--bordo-forte); border-radius: 14px;
  background: var(--carta); color: var(--testo); font: 400 17px/1.4 var(--font); outline: none; transition: border-color .3s, box-shadow .3s, background-color .3s;
}
.ricerca input::placeholder { color: var(--grigio); }
.ricerca input:hover { border-color: rgba(255,255,255,.35); }
.ricerca input:focus { border-color: var(--verde); background: rgba(1,173,33,.04); box-shadow: 0 0 0 4px rgba(1,173,33,.15), 0 0 40px rgba(1,173,33,.12); }
.ricerca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ricerca-pulisci { position: absolute; right: 10px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 50%; background: transparent; color: var(--grigio); font: 300 24px/1 var(--font); cursor: pointer; }
.ricerca-pulisci:hover { color: var(--testo); background: rgba(255,255,255,.08); }
.suggerimenti { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; overflow: hidden; border-radius: 14px; border: 1px solid var(--bordo-forte); background: #0d1011; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.suggerimenti[hidden] { display: none; }
.suggerimenti li + li { border-top: 1px solid var(--bordo); }
.suggerimenti button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 13px 20px; background: none; border: 0; color: var(--testo); font: 400 15px/1.3 var(--font); text-align: left; cursor: pointer; }
.suggerimenti button:hover, .suggerimenti li.evidenziato button { background: rgba(255,255,255,.06); }
.suggerimenti .sug-marca { color: var(--grigio); margin-right: 8px; }
.suggerimenti .sug-tipo { flex: none; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); }
.suggerimenti .sug-tipo.verde { color: var(--verde); }
.suggerimenti mark { background: none; color: var(--verde); font-weight: 500; }

/* Blocchi introduttivi: categorie in evidenza e primo piano */
.cat-blocco { padding: clamp(28px, 3.5vw, 44px) 0 0; }
.cat-blocco[hidden] { display: none; }
.cat-blocco .cat-testa { margin-bottom: 16px; }
.cat-blocco .link { background: none; border: 0; color: #c9d0d2; font: 500 14px/1 var(--font); cursor: pointer; padding-bottom: 3px; }
.cat-sezione .cat-titolo { scroll-margin-top: 110px; }

/* Sezioni e intestazioni */
.cat-sezione { padding: clamp(28px, 4vw, 48px) 0 clamp(64px, 8vw, 112px); }
.cat-sezione.entra { animation: cat-entra .5s var(--curva) both; }
@keyframes cat-entra { from { opacity: 0; transform: translateY(16px); } }
.cat-testa { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-titolo { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; }
.cat-conteggio { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--grigio); font-variant-numeric: tabular-nums; }
.cat-strumenti { display: flex; align-items: center; gap: 20px; }
.ordina { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--grigio); }
.ordina select { min-height: 40px; padding: 0 32px 0 12px; border: 1px solid var(--bordo-forte); border-radius: 10px; background: var(--carta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa3a6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center; color: var(--testo); font: 500 14px/1 var(--font); appearance: none; -webkit-appearance: none; cursor: pointer; }
.ordina select:focus { outline: none; border-color: var(--verde); }
.ordina select option { background: #0d1011; }
.btn-filtri { display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--bordo-forte); border-radius: 10px; background: var(--carta); color: var(--testo); font: 500 14px/1 var(--font); cursor: pointer; }
.btn-filtri span { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--verde); color: #fff; font-size: 12px; }

/* STATO B: breadcrumb, filtri e prodotti */
.briciole { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 14px; color: var(--grigio); }
.briciole[hidden] { display: none; }
.briciola-indietro { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; background: none; border: 0; color: #c9d0d2; font: 500 14px/1 var(--font); cursor: pointer; transition: color .3s; }
.briciola-indietro:hover { color: var(--verde); }
.freccia-indietro { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bordo-forte); transition: border-color .3s, transform .4s var(--curva); }
.freccia-indietro::before { content: ""; position: absolute; left: 11px; top: 9px; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.briciola-indietro:hover .freccia-indietro { border-color: var(--verde); transform: translateX(-3px); }
.briciola-corrente { color: var(--testo); }
.cat-sezione { padding-top: clamp(20px, 3vw, 32px); }
.cat-griglia { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: clamp(20px, 2.5vw, 40px); align-items: start; }

.filtri { position: sticky; top: calc(var(--testata) + 16px); display: grid; align-content: start; max-height: calc(100vh - var(--testata) - 32px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c9cfd2 transparent; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: #ffffff; color: #0b0d0e; }
.cerca-filtro { width: 100%; min-height: 38px; margin-bottom: 10px; padding: 6px 12px; border: 1px solid #c9cfd2; border-radius: 8px; background: #f6f7f8; color: #0b0d0e; font: 400 14px/1.2 var(--font); outline: none; }
.cerca-filtro:focus { border-color: var(--verde); }
.cerca-filtro::placeholder { color: #6b7579; }
.caselle { display: grid; gap: 2px; max-height: 240px; overflow-y: auto; scrollbar-width: thin; margin: 0 -8px; }
.casella { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 8px; border-radius: 8px; font-size: 14px; color: #0b0d0e; cursor: pointer; }
.casella:hover { background: #f0f2f3; }
.casella input { width: 16px; height: 16px; margin: 0; accent-color: var(--verde); flex: none; }
.casella span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.casella small { color: #6b7579; font-variant-numeric: tabular-nums; }
.casella.attiva { font-weight: 500; }
.gruppo-filtro details > summary { list-style: none; cursor: pointer; }
.gruppo-filtro summary::-webkit-details-marker { display: none; }
.gruppo-filtro summary .filtri-titolo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0; }
.gruppo-filtro summary .filtri-titolo::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s; }
.gruppo-filtro details[open] summary .filtri-titolo::after { transform: rotate(225deg); }
.gruppo-filtro details[open] summary { margin-bottom: 12px; }
.mostra-tutti { justify-self: start; margin-top: 10px; padding: 0; background: none; border: 0; color: #4a5357; font: 500 13px/1 var(--font); cursor: pointer; }
.mostra-tutti:hover { color: var(--verde); }
.filtri-testa { display: none; }
.gruppo-filtro { padding: 18px 18px 20px; border-bottom: 1px solid #e6eaec; }
.gruppo-filtro[hidden] { display: none; }
/* Elenco categorie nella colonna */
.categorie { display: grid; gap: 2px; margin: 0 -8px; }
.categoria { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: #0b0d0e; font: 500 14px/1.2 var(--font); text-align: left; cursor: pointer; transition: background-color .2s, color .2s; }
.categoria span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.categoria small { flex: none; font-size: 12px; color: #6b7579; font-variant-numeric: tabular-nums; }
.categoria:hover { background: #f0f2f3; }
.categoria.attiva { background: var(--verde); color: #fff; }
.categoria.attiva small { color: rgba(255,255,255,.8); }
.filtri-titolo { display: block; margin-bottom: 12px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #4a5357; }
.prezzo { display: flex; align-items: flex-end; gap: 8px; }
.prezzo-campo { display: grid; gap: 4px; flex: 1; min-width: 0; font-size: 12px; color: #4a5357; }
.prezzo-campo input { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid #c9cfd2; border-radius: 10px; background: #f6f7f8; color: #0b0d0e; font: 400 15px/1.2 var(--font); outline: none; -moz-appearance: textfield; transition: border-color .25s, box-shadow .25s; }
.prezzo-campo input::-webkit-outer-spin-button, .prezzo-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.prezzo-campo input:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(1,173,33,.15); }
.prezzo-sep { padding-bottom: 13px; color: #6b7579; }
.valori { display: flex; flex-wrap: wrap; gap: 6px; }
.valore { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid #c9cfd2; background: #ffffff; color: #0b0d0e; font: 500 13px/1 var(--font); white-space: nowrap; cursor: pointer; transition: border-color .25s, background-color .25s, color .25s; }
.valore small { color: #6b7579; font-weight: 400; }
.valore:hover { border-color: #0b0d0e; }
.valore.attivo { background: var(--verde); border-color: var(--verde); color: #fff; }
.valore.attivo small { color: rgba(255,255,255,.75); }
.filtri-azzera { justify-self: start; margin: 0; padding: 16px 18px; background: none; border: 0; color: #4a5357; font: 500 14px/1 var(--font); cursor: pointer; }
.filtri-azzera:hover { color: var(--verde); }

.prodotti { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.prodotto { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); background: #ffffff; color: #0b0d0e; transition: border-color .3s, box-shadow .3s, transform .5s var(--curva); animation: cat-entra .5s var(--curva) both; }
.prodotto:hover { border-color: rgba(1,173,33,.6); box-shadow: 0 20px 50px rgba(0,0,0,.45); transform: translateY(-3px); }
.prodotto-foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #f4f6f7; border-bottom: 1px solid #e6eaec; }
.prodotto-foto img { width: 100%; height: 100%; object-fit: contain; padding: 7%; opacity: 0; transition: transform .9s var(--curva), opacity .4s; }
.prodotto-foto img.caricata { opacity: 1; }
.prodotto:hover .prodotto-foto img { transform: scale(1.05); }
/* senza foto: iniziale della marca e scritta discreta */
/* senza foto: riquadro neutro con la marca in piccolo, discreto */
.prodotto-foto .segnaposto-foto { position: absolute; inset: 0; display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f4f6f7 0 14px, #eef1f2 14px 15px); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #9aa3a6; }
.prodotto-testo { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 10px; flex: 1; padding: 18px 20px 20px; }
.prodotto .marca { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0b7a1c; }
.prodotto .codice { letter-spacing: .02em; text-transform: none; font-weight: 400; font-size: 12px; color: #8a9397; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prodotto h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; height: calc(2 * 1.3em); color: #0b0d0e; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prodotto .descrizione { display: none; }
.prodotto .spec { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; align-content: flex-start; }
.prodotto .spec span { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border-radius: 6px; border: 1px solid #e3e7e9; background: #f7f8f9; font-size: 12px; font-weight: 500; color: #2f383c; white-space: nowrap; }
.prodotto .prezzo-riga { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; align-self: end; padding-top: 14px; border-top: 1px solid #e6eaec; }
.prodotto .prezzo-valore { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.prodotto .prezzo-valore small { font-size: 12px; font-weight: 400; color: #6b7579; margin-left: 4px; }
.prodotto .prezzo-richiesta { font-size: 13px; font-weight: 500; color: #4a5357; }
.prodotto .aggiungi { display: block; }
.prodotto .aggiungi button { width: 100%; min-height: 46px; border-radius: 8px; border: 1.5px solid #0b0d0e; background: #0b0d0e; color: #fff; font: 500 14px/1 var(--font); cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, transform .2s; }
.prodotto .aggiungi button:hover { background: var(--verde); border-color: var(--verde); }
.prodotto .aggiungi button:active { transform: scale(.98); }
.prodotto.scelto { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), 0 20px 50px rgba(0,0,0,.35); }
.prodotto.scelto .aggiungi button { background: #eaf7ec; border-color: var(--verde); color: #0b7a1c; }
.prodotto.scelto .aggiungi button:hover { background: #fff; }
.prodotto.appena { animation: aggiunto .5s var(--curva); }
@keyframes aggiunto { 30% { transform: scale(.985); } }
.nessuno { padding: 56px 24px; text-align: center; border: 1px dashed var(--bordo-forte); border-radius: 16px; color: var(--grigio); }
.nessuno-titolo { margin-bottom: 8px; font-size: 20px; color: var(--testo); }
.nessuno .cerca-ovunque { margin-top: 24px; }
.altri { display: flex; justify-content: center; margin-top: 40px; }
.btn-contorno { border-color: var(--bordo-forte); color: var(--testo); }
.btn-contorno:hover { border-color: var(--testo); }

/* Contatore nella testata */
.preventivo-testata { gap: 8px; }
.preventivo-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--verde); color: #fff; font-size: 12px; font-weight: 600; }
.preventivo-badge[hidden] { display: none; }
.preventivo-badge.pulsa { animation: pulsa .5s var(--curva); }
@keyframes pulsa { 40% { transform: scale(1.35); } }

/* Riepilogo del preventivo, fisso in basso */
.preventivo { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(8,10,11,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--bordo-forte); animation: preventivo-sale .6s var(--curva); }
@keyframes preventivo-sale { from { transform: translateY(100%); } }
.preventivo-interno { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 24px; padding-top: 8px; padding-bottom: 8px; }
.preventivo-testa { display: inline-flex; align-items: center; gap: 12px; padding: 4px 0; background: none; border: 0; color: var(--testo); font: 500 14px/1 var(--font); cursor: pointer; justify-self: start; }
.preventivo-numero { display: grid; place-items: center; min-width: 26px; height: 26px; font-size: 13px; padding: 0 8px; border-radius: 999px; background: var(--verde); color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.preventivo-freccia { width: 8px; height: 8px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg) translateY(2px); transition: transform .4s var(--curva); }
.preventivo-testa[aria-expanded="true"] .preventivo-freccia { transform: rotate(225deg) translateY(-2px); }
.preventivo-azioni { display: flex; align-items: center; gap: 20px; }
.preventivo-azioni .btn { min-height: 40px; padding: 0 22px; font-size: 15px; }
.preventivo-svuota { background: none; border: 0; color: var(--grigio); font: 500 14px/1 var(--font); cursor: pointer; }
.preventivo-svuota:hover { color: var(--testo); }
.preventivo-dettaglio { grid-column: 1 / -1; display: none; max-height: 40vh; overflow: auto; margin-bottom: 8px; border-top: 1px solid var(--bordo); }
.preventivo.aperto .preventivo-dettaglio { display: block; }
.preventivo-dettaglio li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bordo); font-size: 14px; }
.preventivo-dettaglio .nome-riga { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quantita { display: inline-flex; align-items: center; border: 1px solid var(--bordo-forte); border-radius: 999px; }
.quantita button { width: 32px; height: 32px; border: 0; background: none; color: var(--testo); font: 400 18px/1 var(--font); cursor: pointer; padding: 0; }
.quantita button:hover { color: var(--verde); }
.quantita span { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; }
.preventivo-dettaglio .marca { color: var(--grigio); margin-right: 8px; }
.preventivo-dettaglio .rimuovi { background: none; border: 0; color: var(--grigio); font: 300 22px/1 var(--font); cursor: pointer; padding: 2px 8px; }
.preventivo-dettaglio .rimuovi:hover { color: var(--testo); }
body.con-preventivo { padding-bottom: 64px; } /* spazio perché la barra non copra il footer */
.nota-demo { padding: 0 0 24px; font-size: 12px; color: var(--grigio); }
.nota-demo[hidden] { display: none; }

/* Catalogo: tablet e telefono */
@media (max-width: 900px) {
  .cat-hero-interno { grid-template-columns: 1fr; }
  .cat-griglia { grid-template-columns: 1fr; }
  .prodotti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .btn-filtri { display: inline-flex; }
  /* i filtri diventano un pannello laterale apribile */
  .velo-filtri { position: fixed; inset: 0; z-index: 110; background: rgba(0,0,0,.5); }
  .preventivo-interno { grid-template-columns: 1fr; }
  .preventivo-azioni { justify-content: space-between; }
  .preventivo-azioni .btn { flex: 1; }
  body.con-preventivo { padding-bottom: 116px; }
}
@media (max-width: 600px) {
  .prodotto-testo { padding: 12px; }
  .prodotto .spec { display: none; }
  .cat-strumenti { width: 100%; justify-content: space-between; }
  .ordina span { display: none; }
}
@media (max-width: 400px) { .prodotti { grid-template-columns: 1fr; } }

/* Nel modulo contatti: prodotti presi dalla lista */
.modulo-prodotti { grid-column: 1 / -1; padding: 16px 18px; border-radius: 12px; background: #f6f7f8; border: 1.5px solid #c9cfd2; font-size: 15px; color: #2f383c; }
.modulo-prodotti strong { display: block; margin-bottom: 6px; color: #0b0d0e; }

/* ---------- Testo legale (Privacy) ---------- */
.testo-legale { max-width: 760px; }
.testo-legale h2 { font-size: 24px; letter-spacing: -0.02em; margin: 48px 0 12px; }
.testo-legale p { color: #c9d0d2; }
.testo-legale a { color: var(--testo); text-decoration: underline; text-underline-offset: 3px; }
.segnaposto { padding: 16px 20px; border: 1px dashed var(--linea-forte); border-radius: 12px; color: var(--grigio); }

/* =========================================================
   Fondo pagina
   ========================================================= */
.piede { position: relative; border-top: 1px solid var(--linea); font-size: 15px; color: var(--grigio); }
.piede-griglia { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; padding-top: 72px; padding-bottom: 64px; }
.piede-logo img { height: 32px; width: auto; }
.piede-titolo { margin-bottom: 14px; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--testo); }
.piede p { line-height: 1.8; }
.piede a { color: var(--testo); }
.piede a:hover { color: var(--verde); }
.piede-fondo { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; padding-bottom: 32px; border-top: 1px solid var(--linea); font-size: 13px; }

/* Link Privacy nel fondo pagina: area di tocco più comoda */
.piede-fondo a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }

/* ---------- Comparsa mentre si scorre ---------- */
.js [data-rivela] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--curva), transform 1s var(--curva); transition-delay: var(--ritardo, 0s); }
.js [data-rivela].visibile { opacity: 1; transform: none; }
img.mancante { visibility: hidden; }

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width: 1024px) {
  .griglia-clienti { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .passi { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .piede-griglia { grid-template-columns: 1fr 1fr; }
  .piede-logo { grid-column: 1 / -1; }
}

/* =========================================================
   Schermi touch (telefoni e tablet): niente fisarmonica,
   i pannelli dei servizi sono sempre aperti, in griglia 2×2
   ========================================================= */
@media (max-width: 860px), (hover: none) {
  .fisarmonica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .fisarmonica .pannello, .fisarmonica .pannello.aperto { height: clamp(240px, 34vw, 340px); }
  .fisarmonica .pannello-testo, .fisarmonica .vai { opacity: 1; transform: none; min-width: 0; }
  .pannello-verticale { display: none; }
}
@media (max-width: 600px) {
  .fisarmonica { grid-template-columns: 1fr; }
  .fisarmonica .pannello, .fisarmonica .pannello.aperto { height: 240px; }
}

/* =========================================================
   Telefono
   ========================================================= */
@media (max-width: 860px) {
  /* Menu a tutto schermo con voci grandi */
  .menu-toggle { display: block; }
  .menu {
    position: fixed; inset: 0; z-index: 1; height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch; gap: 0; padding: calc(var(--testata) + 32px) var(--margine) 40px;
    background: var(--nero); opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s;
  }
  html.menu-aperto .menu { opacity: 1; visibility: visible; }
  html.menu-aperto .testata { background: var(--nero); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu a:not(.btn) { font-size: clamp(40px, 11vw, 56px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; padding: 14px 0; border-bottom: 1px solid var(--linea); color: var(--testo); }
  .menu a:not(.btn)::after { display: none; }
  .menu a[aria-current="page"] { color: var(--verde); }
  .menu .btn { margin-top: 32px; min-height: 56px; font-size: 17px; }
  .menu-contatti { display: grid; gap: 4px; margin-top: auto; font-size: 16px; color: var(--grigio); }
  /* telefono ed email in basso: testo normale, non come le voci grandi */
  .menu .menu-contatti a:not(.btn) { font-size: 17px; font-weight: 400; letter-spacing: 0; line-height: 1.5; padding: 6px 0; border-bottom: 0; color: var(--grigio); overflow-wrap: anywhere; }
  /* logo e pulsante X restano visibili sopra il menu aperto */
  .logo, .menu-toggle { position: relative; z-index: 2; }
  .menu > * { opacity: 0; transform: translateY(16px); transition: opacity .6s, transform .6s var(--curva); }
  html.menu-aperto .menu > * { opacity: 1; transform: none; }
  html.menu-aperto .menu > *:nth-child(2) { transition-delay: .05s; }
  html.menu-aperto .menu > *:nth-child(3) { transition-delay: .1s; }
  html.menu-aperto .menu > *:nth-child(4) { transition-delay: .15s; }
  html.menu-aperto .menu > *:nth-child(5) { transition-delay: .2s; }

  .contatti { grid-template-columns: 1fr; grid-template-areas: "titolo" "modulo" "recapiti"; }
  .contatti .modulo { grid-row: auto; }
  .logo img { height: 34px; }
  .numeri .didascalia { font-size: 13px; }
  .servizio, .servizio:nth-child(even) { grid-template-columns: 1fr; }
  .servizio:nth-child(even) .foto { order: 0; }
  .reparti { grid-template-columns: 1fr; }
  /* Suggerimenti sotto la ricerca */
.suggerimenti { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 20; overflow: hidden; border-radius: 20px; background: #ffffff; color: #0b0d0e; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.suggerimenti[hidden] { display: none; }
.suggerimenti li { border-top: 1px solid #eef1f2; }
.suggerimenti li:first-child { border-top: 0; }
.suggerimenti button { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 14px 24px; background: none; border: 0; color: inherit; font: 400 16px/1.3 var(--font); text-align: left; cursor: pointer; }
.suggerimenti button:hover, .suggerimenti li.evidenziato button { background: #f0f2f3; }
.suggerimenti .sug-marca { color: #6b7579; margin-right: 8px; }
.suggerimenti .sug-tipo { flex: none; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #6b7579; }
.suggerimenti .sug-tipo.verde { color: var(--verde); }
.suggerimenti mark { background: none; color: inherit; font-weight: 600; }

/* Categoria scelta, in alto nella colonna, con freccia per tornare indietro */
.categoria-corrente { display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid #e3e7e9; border-radius: 0; background: transparent; color: #0b0d0e; font-family: var(--font); text-align: left; cursor: pointer; transition: background-color .2s; }
.categoria-corrente[hidden] { display: none; }
.categoria-corrente:hover strong { color: var(--verde); }
.freccia-indietro { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #c9cfd2; position: relative; transition: border-color .25s, background-color .25s; }
.freccia-indietro::before { content: ""; position: absolute; left: 14px; top: 12px; width: 9px; height: 9px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.categoria-corrente:hover .freccia-indietro { border-color: #0b0d0e; }
.categoria-corrente-testo { display: grid; gap: 2px; }
.categoria-corrente small { font-size: 12px; color: #6b7579; }
.categoria-corrente strong { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.categorie[hidden], .filtri-titolo[hidden] { display: none; }

/* Filtri della categoria scelta */
.filtri-categoria { display: grid; gap: 0; }
.filtri-categoria[hidden] { display: none; }
.gruppo-filtro { display: grid; gap: 0; padding-bottom: 16px; }
.gruppo-filtro .filtri-titolo { padding: 16px 0 10px; }
.gruppo-filtro .valori { display: flex; flex-wrap: wrap; gap: 6px; }
.valore {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1.5px solid #c9cfd2; background: #ffffff;
  color: #0b0d0e; font: 500 13px/1 var(--font); white-space: nowrap; cursor: pointer; transition: border-color .25s, background-color .25s, color .25s;
}
.valore small { color: #6b7579; font-weight: 400; }
.valore:hover { border-color: #0b0d0e; }
.valore.attivo { background: #0b0d0e; border-color: #0b0d0e; color: #ffffff; }
.valore.attivo small { color: rgba(255, 255, 255, .7); }
.valore:disabled { opacity: .35; cursor: default; }
.filtri-azzera { margin-left: 0; }
  .reparti .pannello { height: 260px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .griglia-clienti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .passi, .modulo { grid-template-columns: 1fr; }
  .piede-griglia { grid-template-columns: 1fr; gap: 32px; }
  .hero .btn, .invito .btn, .modulo .btn { width: 100%; }
}

/* =========================================================
   "Riduci movimento": niente animazioni
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js [data-rivela] { opacity: 1; transform: none; }
}

/* =========================================================
   Pagina Prodotti: catalogo su fondo chiaro (stile shop)
   ========================================================= */
.pagina-prodotti main.catalogo { background: #f5f6f7; color: #0b0d0e; }
.pagina-prodotti .cat-hero { background: #050607; border-bottom: 0; color: var(--testo); }
.pagina-prodotti .cat-hero h1 { color: var(--testo); }
.pagina-prodotti .percorso { display: flex; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--grigio); }
.pagina-prodotti .percorso a { color: #c9d0d2; } .pagina-prodotti .percorso a:hover { color: var(--verde); }
.pagina-prodotti .cat-blocco, .pagina-prodotti .cat-sezione { color: #0b0d0e; }
.pagina-prodotti .cat-titolo { color: #0b0d0e; }
.pagina-prodotti .cat-conteggio { color: #6b7579; }
.pagina-prodotti .ordina { color: #4a5357; }
.pagina-prodotti .ordina select { background-color: #fff; border-color: #d7dcdf; color: #0b0d0e; }
.pagina-prodotti .ordina select option { background: #fff; }
.pagina-prodotti .btn-filtri { background: #fff; border-color: #d7dcdf; color: #0b0d0e; }
.pagina-prodotti .briciole { color: #6b7579; }
.pagina-prodotti .briciola-indietro { color: #0b0d0e; }
.pagina-prodotti .briciola-corrente { color: #0b0d0e; font-weight: 500; }
.pagina-prodotti .freccia-indietro { border-color: #c9cfd2; }
.pagina-prodotti .nota-demo { color: #6b7579; }
.pagina-prodotti .nessuno { border-color: #c9cfd2; color: #4a5357; }
.pagina-prodotti .nessuno-titolo { color: #0b0d0e; }
.pagina-prodotti .btn-contorno { border-color: #0b0d0e; color: #0b0d0e; }
.pagina-prodotti .btn-contorno:hover { background: #0b0d0e; color: #fff; }

/* Colonna: elenchi semplici, senza riquadro */
.pagina-prodotti .filtri { border: 1px solid #e6eaec; background: #fff; }
.pagina-prodotti .gruppo-filtro { padding: 20px 22px 22px; }
.pagina-prodotti .filtri-titolo { margin-bottom: 14px; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; text-transform: none; color: #0b0d0e; }
.pagina-prodotti .casella { min-height: 34px; padding: 0; border-radius: 0; font-size: 14px; color: #2f383c; flex-direction: row-reverse; }
.pagina-prodotti .casella:hover { background: none; color: #0b0d0e; }
.pagina-prodotti .casella input { width: 16px; height: 16px; border-radius: 3px; }
.pagina-prodotti .casella small { margin-right: 8px; }
.pagina-prodotti .caselle { margin: 0; }
.pagina-prodotti .cerca-filtro { background: #fff; }
.pagina-prodotti .gruppo-filtro summary .filtri-titolo::after { color: #6b7579; }
.pagina-prodotti .valore { border-color: #d7dcdf; }
.pagina-prodotti .prezzo-campo input { background: #fff; text-align: center; }

/* Schede: bianche, foto su bianco, testo come nel riferimento */
.pagina-prodotti .prodotti { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pagina-prodotti .prodotto { border: 1px solid #e6eaec; border-radius: 10px; box-shadow: none; }
.pagina-prodotti .prodotto:hover { border-color: #c9cfd2; box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: none; }
.pagina-prodotti .prodotto-foto { aspect-ratio: 1 / 1; background: #fff; border-bottom: 0; }
.pagina-prodotti .prodotto-foto img { padding: 12%; }
.pagina-prodotti .prodotto-foto .segnaposto-foto { inset: 12%; border-radius: 8px; background: #f3f4f5; }
.pagina-prodotti .prodotto-testo { gap: 8px; padding: 6px 20px 20px; }
.pagina-prodotti .prodotto .marca { font-size: 12px; font-weight: 500; letter-spacing: .1em; color: #8a9397; }
.pagina-prodotti .prodotto .codice { color: #b0b7ba; }
.pagina-prodotti .prodotto h3 { font-size: 18px; height: calc(2 * 1.3em); line-height: 1.3; }
.pagina-prodotti .prodotto .spec { min-height: 0; gap: 6px; }
.pagina-prodotti .prodotto .spec span { height: 26px; padding: 0 9px; font-size: 12px; border: 0; background: #f0f2f3; }
.pagina-prodotti .prodotto .prezzo-riga { border-top: 0; padding-top: 8px; }
.pagina-prodotti .prodotto .prezzo-richiesta { font-size: 17px; font-weight: 600; color: #0b0d0e; }
.pagina-prodotti .prodotto .prezzo-valore { font-size: 20px; }
.pagina-prodotti .prodotto .aggiungi button { min-height: 46px; font-size: 14px; }
.pagina-prodotti .prodotto.scelto { border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde); }


/* Barra preventivo chiara */
.pagina-prodotti .preventivo { background: #fff; color: #0b0d0e; border-top: 1px solid #e6eaec; box-shadow: 0 -16px 40px rgba(0,0,0,.08); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pagina-prodotti .preventivo-testa, .pagina-prodotti .preventivo-dettaglio .rimuovi:hover, .pagina-prodotti .quantita button { color: #0b0d0e; }
.pagina-prodotti .preventivo-numero { color: #fff; }
.pagina-prodotti .preventivo-svuota, .pagina-prodotti .preventivo-dettaglio .marca, .pagina-prodotti .preventivo-dettaglio .rimuovi { color: #6b7579; }
.pagina-prodotti .preventivo-dettaglio, .pagina-prodotti .preventivo-dettaglio li { border-color: #e6eaec; }
.pagina-prodotti .quantita { border-color: #d7dcdf; }
.pagina-prodotti .preventivo .btn { background: #0b0d0e; color: #fff; }
.pagina-prodotti .preventivo .btn:hover { background: var(--verde); }

@media (max-width: 1100px) { .pagina-prodotti .prodotti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pagina-prodotti .prodotti { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pagina-prodotti .casella { flex-direction: row; } }
@media (max-width: 600px) { .pagina-prodotti .prodotti { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Fascia categorie: sottile, sotto l'intestazione */
.fascia-categorie { background: #ffffff; border-bottom: 1px solid #e6eaec; }
.fascia-interno { display: flex; align-items: stretch; }
.fascia-lista { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.fascia-lista::-webkit-scrollbar { display: none; }
.fascia-lista > li { flex: 1 0 auto; display: flex; }
.fascia-lista > li + li { border-left: 1px solid #eef1f2; }
.voce-fascia { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; background: none; border: 0; color: #0b0d0e; font-family: var(--font); text-align: left; white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.fascia-lista > li:first-child .voce-fascia { padding-left: 0; }
.voce-fascia:hover { background: #f7f8f9; }
.voce-fascia::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 2px; background: var(--verde); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--curva); }
.fascia-lista > li:first-child .voce-fascia::after { left: 0; }
.voce-fascia:hover::after, .voce-fascia.attiva::after { transform: scaleX(1); }
.voce-fascia .sigla { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; background: #eaf7ec; color: #0b7a1c; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.voce-fascia strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.voce-fascia small { display: block; font-size: 12px; color: #6b7579; }
.voce-fascia.attiva strong { color: #0b7a1c; }
.fascia-tutte { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 0 24px; border: 0; border-left: 1px solid #eef1f2; background: none; color: #0b0d0e; font: 500 14px/1 var(--font); white-space: nowrap; cursor: pointer; transition: color .2s; }
.fascia-tutte:hover { color: var(--verde); }

/* In primo piano: un prodotto principale grande e tre schede verticali accanto */
.evidenza-griglia { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 18px; }
.evidenza-griglia .prodotto-foto { aspect-ratio: 4 / 3; }
.evidenza-griglia .prodotto-testo { gap: 6px; padding: 2px 18px 18px; }
.evidenza-griglia .prodotto h3 { font-size: 16px; }
.evidenza-griglia .prodotto .spec span { height: 24px; font-size: 11px; }
.evidenza-griglia .prodotto .aggiungi button { min-height: 42px; }
.evidenza-griglia .prodotto--principale { flex-direction: row; }
.evidenza-griglia .prodotto--principale .prodotto-foto { flex: 0 0 50%; aspect-ratio: auto; min-height: 320px; border-right: 1px solid #eef1f2; }
.evidenza-griglia .prodotto--principale .prodotto-testo { grid-template-rows: auto auto auto auto 1fr auto; gap: 12px; padding: 28px; }
.evidenza-griglia .prodotto--principale h3 { height: auto; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.2; letter-spacing: -0.02em; -webkit-line-clamp: 3; }
.evidenza-griglia .prodotto--principale .descrizione { display: block; font-size: 15px; line-height: 1.55; color: #4a5357; }
.evidenza-griglia .prodotto--principale .spec span { height: 26px; font-size: 12px; }
.evidenza-griglia .prodotto--principale .prezzo-richiesta { font-size: 18px; }
.evidenza-griglia .prodotto--principale .aggiungi button { min-height: 50px; font-size: 15px; }
.etichetta-evidenza { position: absolute; top: 14px; left: 14px; z-index: 1; padding: 5px 10px; border-radius: 999px; background: #eaf7ec; color: #0b7a1c; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 1100px) {
  .evidenza-griglia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .evidenza-griglia .prodotto--principale { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .voce-fascia { padding: 10px 14px; }
  .fascia-tutte { padding-left: 14px; }
  .evidenza-griglia { grid-template-columns: 1fr; gap: 10px; }
  .evidenza-griglia .prodotto--principale { flex-direction: column; }
  .evidenza-griglia .prodotto--principale .prodotto-foto { flex: none; width: 100%; min-height: 0; aspect-ratio: 4 / 3; border-right: 0; border-bottom: 1px solid #eef1f2; }
  .evidenza-griglia .prodotto--principale .prodotto-testo { padding: 18px; }
  /* le altre tre diventano righe compatte: foto a sinistra, testo a destra */
  .evidenza-griglia .prodotto:not(.prodotto--principale) { flex-direction: row; }
  .evidenza-griglia .prodotto:not(.prodotto--principale) .prodotto-foto { flex: 0 0 112px; aspect-ratio: auto; }
  .evidenza-griglia .prodotto:not(.prodotto--principale) .prodotto-testo { padding: 12px 14px; }
  .evidenza-griglia .prodotto:not(.prodotto--principale) .spec { display: none; }
}


/* Colonna: blocco Categorie, con sotto ogni voce cosa contiene */
.pagina-prodotti .gruppo-categorie { padding: 0; }
.pagina-prodotti .categorie-testa { padding: 22px 22px 14px; }
.pagina-prodotti .categorie-testa .filtri-titolo { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.pagina-prodotti .categorie-info { margin-top: 4px; font-size: 13px; color: #6b7579; }
.pagina-prodotti .categorie { display: block; margin: 0; padding: 0; }
.pagina-prodotti .categoria { display: grid; gap: 3px; width: 100%; min-height: 0; padding: 12px 22px; border: 0; border-top: 1px solid #eef1f2; border-radius: 0; background: transparent; color: #0b0d0e; font-family: var(--font); text-align: left; cursor: pointer; transition: background-color .2s; }
.pagina-prodotti .categoria span { white-space: normal; overflow: visible; }
.pagina-prodotti .riga-cat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pagina-prodotti .nome-cat { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; transition: color .2s; }
.pagina-prodotti .categoria small { flex: none; font-size: 13px; font-weight: 400; color: #9aa3a6; font-variant-numeric: tabular-nums; }
.pagina-prodotti .sotto-cat { font-size: 13px; line-height: 1.4; color: #6b7579; }
.pagina-prodotti .categoria:hover { background: #f7f8f9; color: #0b0d0e; }
.pagina-prodotti .categoria:hover .nome-cat { color: #0b7a1c; }
.pagina-prodotti .categoria.attiva { background: #eaf7ec; color: #0b0d0e; }
.pagina-prodotti .categoria.attiva .nome-cat, .pagina-prodotti .categoria.attiva small { color: #0b7a1c; }
.pagina-prodotti .categoria.attiva small { font-weight: 600; }
.pagina-prodotti .categoria:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }

/* Colonna con categoria scelta: ritorno al menu e filtri della categoria */
.pagina-prodotti .categoria-scelta { display: grid; gap: 4px; padding: 18px 22px 18px; border-bottom: 1px solid #eef1f2; }
.pagina-prodotti .categoria-scelta[hidden] { display: none; }
.pagina-prodotti .torna-menu { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin: 0 0 10px; padding: 0 16px 0 6px; border: 1px solid #d7dcdf; border-radius: 999px; background: #fff; color: #0b0d0e; font: 500 14px/1 var(--font); cursor: pointer; transition: border-color .2s, color .2s; }
.pagina-prodotti .torna-menu:hover { border-color: var(--verde); color: #0b7a1c; }
.pagina-prodotti .freccia-torna { position: relative; width: 28px; height: 28px; border-radius: 50%; background: #f0f2f3; transition: background-color .2s, transform .3s var(--curva); }
.pagina-prodotti .freccia-torna::before { content: ""; position: absolute; left: 11px; top: 10px; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.pagina-prodotti .torna-menu:hover .freccia-torna { background: #eaf7ec; transform: translateX(-2px); }
.pagina-prodotti .scelta-nome { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: #0b0d0e; }
.pagina-prodotti .scelta-info { font-size: 13px; line-height: 1.4; color: #6b7579; }
.pagina-prodotti #filtri-categoria .filtri-titolo { font-size: 15px; letter-spacing: -0.01em; }

/* numeri delle categorie allineati a destra; fascia: dissolvenza sul bordo quando scorre */
.pagina-prodotti .categoria { grid-template-columns: minmax(0, 1fr); }
.fascia-lista { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }

/* Messaggio dopo l'invio */
.esito { grid-column: 1 / -1; padding: 14px 18px; border-radius: 12px; border-left: 4px solid; font-size: 15px; }
.esito-ok { border-color: var(--verde); background: #e6f6ea; color: #14532d; }
.esito-errore { border-color: #c0392b; background: #fdecea; color: #7f1d1d; }
.esito a { text-decoration: underline; }
/* Campo trappola per i robot: fuori dallo schermo */
.trappola { position: absolute; left: -9999px; }

/* =========================================================
   Scheda del prodotto e richiesta di preventivo (finestre)
   ========================================================= */
.prodotto-foto { cursor: pointer; }
.prodotto-foto .segnaposto-foto[hidden] { display: none; }   /* con la foto vera il riquadro grigio sparisce */
.apri-scheda { all: unset; cursor: pointer; }
.apri-scheda:hover { color: #0b7a1c; }
.apri-scheda:focus-visible { outline: 3px solid rgba(1, 173, 33, .45); outline-offset: 2px; border-radius: 4px; }

.dialogo {
  width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 48px); padding: 0; border: 0; overflow: auto;
  border-radius: var(--raggio); background: #ffffff; color: #0b0d0e; box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.dialogo::backdrop { background: rgba(5, 6, 7, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dialogo-chiudi {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 40px; height: 40px; border: 1px solid #e3e7e9; border-radius: 50%;
  background: #ffffff; color: #0b0d0e; font: 300 26px/1 var(--font); cursor: pointer;
}
.dialogo-chiudi:hover { border-color: #0b0d0e; }
.dialogo h2 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -0.02em; color: #0b0d0e; }

.ds-griglia { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ds-foto { display: grid; place-items: center; padding: 32px; background: #f4f6f7; border-right: 1px solid #e6eaec; }
.ds-foto img { width: 100%; max-height: 520px; object-fit: contain; }
.ds-testo { display: grid; gap: 14px; align-content: start; padding: 44px 36px 32px; }
.ds-cat { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #0b7a1c; }
.ds-cat span { font-weight: 400; letter-spacing: .02em; text-transform: none; color: #8a9397; }
.ds-descrizione { font-size: 15px; color: #2f383c; }
.ds-sezione { margin-top: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #6b7579; }
.ds-tabella { width: 100%; border-collapse: collapse; font-size: 14px; }
.ds-tabella th, .ds-tabella td { padding: 8px 0; border-bottom: 1px solid #e6eaec; text-align: left; vertical-align: top; }
.ds-tabella th { width: 40%; padding-right: 16px; font-weight: 500; color: #6b7579; }
.ds-tabella .ds-attesa { color: #8a9397; }
.ds-prezzo { font-size: 14px; font-weight: 500; color: #4a5357; }
.ds-aggiungi { width: 100%; background: #0b0d0e; color: #ffffff; }
.ds-aggiungi:hover { background: var(--verde); color: #0b0d0e; }
.ds-aggiungi.scelto { background: #eaf7ec; border-color: var(--verde); color: #0b7a1c; }

.dialogo-richiesta { width: min(760px, calc(100vw - 32px)); }
.dialogo-richiesta .modulo { position: relative; box-shadow: none; border-radius: 0; }
.dr-articoli { display: grid; gap: 6px; max-height: 180px; overflow: auto; padding: 12px 14px; border: 1px solid #e3e7e9; border-radius: 12px; background: #f6f7f8; font-size: 14px; }
.dr-articoli li { display: flex; justify-content: space-between; gap: 12px; }
.dr-articoli .codice, .dr-articoli .q { color: #6b7579; white-space: nowrap; }

@media (max-width: 760px) {
  .dialogo { width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
  .ds-griglia { grid-template-columns: 1fr; }
  .ds-foto { padding: 20px; border-right: 0; border-bottom: 1px solid #e6eaec; }
  .ds-foto img { max-height: 300px; }
  .ds-testo { padding: 24px 20px; }
  .dialogo-richiesta .modulo { grid-template-columns: 1fr; }
}