/* Scovasconti – struttura comune. Le proposte cambiano solo le variabili
   e aggiungono le loro forme e animazioni in stile.css. */
:root {
  --font-titoli: 'Nunito', system-ui, sans-serif;
  --font-testo: 'Nunito', system-ui, sans-serif;
  --peso-titoli: 900;
  --maiuscolo-logo: none;
  --spazio-logo: 0;
  --testo: 20px;
  --sfondo: #fff8f3;
  --superficie: #ffffff;
  --superficie-2: #ffd3b8;
  --bordo: #f3c9ad;
  --bordo-largo: 2px;
  --testo-col: #2a1a10;
  --testo-tenue: #6b4a36;
  --primario: #c05621;
  --su-primario: #ffffff;
  --primario-hover: #9a3f14;
  --secondario: #ffffff;
  --su-secondario: #9a3f14;
  --accento: #f08a5d;
  --su-accento: #2a1a10;
  --prezzo: #9a3f14;
  --sconto-bg: #c05621;
  --sconto-col: #ffffff;
  --link: #9a3f14;
  --raggio: 20px;
  --raggio-piccolo: 14px;
  --raggio-tasto: 999px;
  --ombra: 0 6px 18px rgba(120, 50, 10, .10);
  --ombra-forte: 0 12px 30px rgba(120, 50, 10, .18);
  --icona-tratto: 2;
  --icona-riemp: none;
  --icona-col: #c05621;
  --icona-fondo: #ffd3b8;
  --icona-forma: 50%;
  --foto-bg: #fff1e8;
  --foto-ico: #c05621;
  --banda-bg: #ffd3b8;
  --banda-col: #2a1a10;
  --testata-bg: #fff8f3;
  --logo-col: #c05621;
  --logo-pirata: #2a1a10;
  --logo-dim: 40px;
  --cat-bg: #ffffff;
  --cat-col: #2a1a10;
  --err-bg: #2a1a10;
  --err-col: #ffffff;
  --err-acc: #ffd3b8;
  --affare-bg: #ffd3b8;
  --affare-col: #2a1a10;
  --cifra-bg: #2a1a10;
  --cifra-col: #ffffff;
  --menu-bg: #ffffff;
  --menu-col: #4a3426;
  --menu-attivo: #9a3f14;
  --menu-attivo-bg: #ffd3b8;
  --piede-bg: #2a1a10;
  --piede-col: #fff8f3;
  --festa-bg: #2a1a10;
  --festa-col: #ffffff;
  --barra-bg: #f3e1d4;
  --barra-col: #c05621;
  --durata: .25s;
}

/* ---------- temi delle feste (le proposte possono cambiarli) ---------- */
html[data-tema="natale"] {
  --primario: #b42318; --primario-hover: #8e1b12; --su-secondario: #8e1b12;
  --accento: #1f7a3d; --su-accento: #ffffff;
  --banda-bg: #1f5c34; --banda-col: #ffffff;
  --festa-bg: #b42318; --festa-col: #ffffff;
  --sconto-bg: #b42318; --prezzo: #8e1b12;
  --icona-col: #1f5c34; --icona-fondo: #e3f1e6;
  --logo-col: #b42318; --menu-attivo: #b42318; --menu-attivo-bg: #fde2e0;
  --err-bg: #133d22; --err-acc: #ffd8d4; --affare-bg: #fde2e0; --cifra-bg: #133d22;
  --barra-col: #1f7a3d; --link: #8e1b12; --foto-ico: #1f5c34;
}
html[data-tema="halloween"] {
  --sfondo: #1b1226; --superficie: #271a36; --superficie-2: #3a2550; --bordo: #4d3366;
  --testo-col: #f6eefe; --testo-tenue: #cdbbe0;
  --primario: #ff7a1a; --su-primario: #1b1226; --primario-hover: #ff9446;
  --secondario: #271a36; --su-secondario: #ffb27a;
  --accento: #a3e635; --su-accento: #1b1226;
  --prezzo: #ffb27a; --sconto-bg: #ff7a1a; --sconto-col: #1b1226; --link: #ffb27a;
  --icona-col: #ff9446; --icona-fondo: #3a2550; --foto-bg: #31214a; --foto-ico: #ffb27a;
  --banda-bg: #2e1d42; --banda-col: #f6eefe; --testata-bg: #1b1226;
  --logo-col: #ff7a1a; --logo-pirata: #a3e635;
  --cat-bg: #271a36; --cat-col: #f6eefe;
  --err-bg: #0f0a16; --err-col: #f6eefe; --err-acc: #ffb27a;
  --affare-bg: #3a2550; --affare-col: #f6eefe; --cifra-bg: #ff7a1a; --cifra-col: #1b1226;
  --menu-bg: #271a36; --menu-col: #e5d7f3; --menu-attivo: #ff9446; --menu-attivo-bg: #3a2550;
  --piede-bg: #0f0a16; --piede-col: #f6eefe;
  --festa-bg: #ff7a1a; --festa-col: #1b1226;
  --barra-bg: #3a2550; --barra-col: #ff9446;
  --ombra: 0 8px 22px rgba(0, 0, 0, .4);
}
html[data-tema="blackfriday"] {
  --sfondo: #0b0b0b; --superficie: #161616; --superficie-2: #232323; --bordo: #3a3a3a;
  --testo-col: #ffffff; --testo-tenue: #c9c9c9;
  --primario: #ffd400; --su-primario: #0b0b0b; --primario-hover: #ffe24d;
  --secondario: #161616; --su-secondario: #ffd400;
  --accento: #ffd400; --su-accento: #0b0b0b;
  --prezzo: #ffd400; --sconto-bg: #ffd400; --sconto-col: #0b0b0b; --link: #ffd400;
  --icona-col: #ffd400; --icona-fondo: #232323; --foto-bg: #1e1e1e; --foto-ico: #ffd400;
  --banda-bg: #161616; --banda-col: #ffffff; --testata-bg: #0b0b0b;
  --logo-col: #ffffff; --logo-pirata: #ffd400;
  --cat-bg: #161616; --cat-col: #ffffff;
  --err-bg: #ffd400; --err-col: #0b0b0b; --err-acc: #0b0b0b;
  --affare-bg: #232323; --affare-col: #ffffff; --cifra-bg: #ffd400; --cifra-col: #0b0b0b;
  --menu-bg: #161616; --menu-col: #e5e5e5; --menu-attivo: #ffd400; --menu-attivo-bg: #2a2a2a;
  --piede-bg: #000000; --piede-col: #ffffff;
  --festa-bg: #ffd400; --festa-col: #0b0b0b;
  --barra-bg: #2a2a2a; --barra-col: #ffd400;
  --ombra: 0 8px 22px rgba(0, 0, 0, .5);
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.sito {
  margin: 0; background: var(--sfondo); color: var(--testo-col);
  font-family: var(--font-testo); font-size: var(--testo); line-height: 1.5;
  padding-bottom: 0;
}
.sito a { color: var(--link); }
.sito h1, .sito h2, .sito h3 { font-family: var(--font-titoli); font-weight: var(--peso-titoli); margin: 0; line-height: 1.15; }
.contenitore { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.tenue { color: var(--testo-tenue); }
.piccolo { font-size: .85em; }
.solo-tel, .tasto.solo-tel { display: none; }
:focus-visible { outline: 4px solid var(--primario); outline-offset: 3px; }

.ico { width: 1.3em; height: 1.3em; flex: none; fill: var(--icona-riemp); stroke: currentColor; stroke-width: var(--icona-tratto); stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-mini { width: 1em; height: 1em; }
.ico-ok { width: 1em; height: 1em; color: #15803d; stroke-width: 3; fill: none; }
[data-tema="halloween"] .ico-ok, [data-tema="blackfriday"] .ico-ok { color: #86efac; }

/* tasti */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 56px; padding: 0 26px; border: var(--bordo-largo) solid transparent; border-radius: var(--raggio-tasto);
  background: var(--primario); color: var(--su-primario) !important; text-decoration: none;
  font: 800 1em/1.1 var(--font-testo); cursor: pointer; transition: transform var(--durata), background var(--durata), box-shadow var(--durata);
}
.tasto:hover { background: var(--primario-hover); }
.tasto-sec { background: var(--secondario); color: var(--su-secondario) !important; border-color: currentColor; }
.tasto-sec:hover { background: var(--superficie-2); }
.tasto-grande { min-height: 64px; font-size: 1.1em; }
.tasto-largo { width: 100%; }
.tondo { width: 56px; height: 56px; border-radius: 50%; border: var(--bordo-largo) solid var(--bordo); background: var(--superficie); color: var(--testo-col); display: inline-grid; place-items: center; cursor: pointer; }

/* campi */
.campo {
  min-height: 56px; width: 100%; padding: 0 16px; font: 600 1em var(--font-testo); color: var(--testo-col);
  background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio-piccolo);
}
.campo::placeholder { color: var(--testo-tenue); opacity: 1; }
.etichetta { display: block; font-weight: 800; font-size: .8em; margin-bottom: 4px; color: var(--testo-tenue); }

/* ---------- banda in alto ---------- */
.banda { background: var(--banda-bg); color: var(--banda-col); }
.banda-in { display: flex; justify-content: space-between; gap: 16px; min-height: 60px; align-items: center; }
.banda-link { color: var(--banda-col) !important; text-decoration: none; display: inline-flex; align-items: center; gap: .4em; font-weight: 600; min-height: 48px; }
.banda-link b { text-decoration: underline; text-underline-offset: 4px; }
.banda .ico { width: 1.5em; height: 1.5em; }

/* festa */
.festa { background: var(--festa-bg); color: var(--festa-col); overflow: hidden; white-space: nowrap; min-height: 48px; display: flex; align-items: center; }
.festa-nastro { display: inline-flex; gap: 60px; padding-left: 32px; animation: nastro 26s linear infinite; }
.festa-pezzo { font-size: .95em; }
@keyframes nastro { to { transform: translateX(-50%); } }
.festa-cielo { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
[data-tema="natale"] .festa-cielo {
  background-image: radial-gradient(3px 3px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(4px 4px at 120px 80px, #fff 50%, transparent 51%), radial-gradient(2.5px 2.5px at 200px 150px, #fff 50%, transparent 51%), radial-gradient(3.5px 3.5px at 60px 200px, #fff 50%, transparent 51%);
  background-size: 240px 240px; opacity: .85; animation: neve 14s linear infinite; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35));
}
@keyframes neve { to { background-position: 40px 240px, -30px 240px, 20px 240px, -10px 240px; } }
[data-tema="halloween"] .festa-cielo {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24'%3E%3Cpath d='M30 10c-3-4-8-6-14-5 3 2 3 5 1 7-3-2-7-1-9 1 6 0 10 2 13 6 2-3 5-4 9-4 4 0 7 1 9 4 3-4 7-6 13-6-2-2-6-3-9-1-2-2-2-5 1-7-6-1-11 1-14 5z' fill='%23a78bfa' opacity='.55'/%3E%3C/svg%3E") 0 0 / 70px 28px no-repeat;
  animation: pipistrello 9s ease-in-out infinite;
}
@keyframes pipistrello { 0% { background-position: 5% 6px; } 50% { background-position: 60% 2px; } 100% { background-position: 5% 6px; } }
.logo-festa { width: 26px; height: 26px; fill: none; stroke: var(--festa-bg); stroke-width: 2.2; stroke-linecap: round; position: absolute; left: -14px; top: -12px; }
[data-tema="halloween"] .logo-festa { stroke: #ff7a1a; fill: #3a2550; }
.logo-bf { width: auto; height: auto; font: 900 13px/1 var(--font-testo); background: #ffd400; color: #0b0b0b; padding: 4px 6px; border-radius: 4px; transform: rotate(-12deg); }

/* ---------- testata ---------- */
.testata { background: var(--testata-bg); border-bottom: var(--bordo-largo) solid var(--bordo); }
.testata-in { display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: center; padding-top: 20px; padding-bottom: 22px; }
.testata-in .ricerca { grid-column: 1 / -1; grid-row: 2; }
.testata-in > *, .ricerca > *, .ricerca-cat > * { min-width: 0; }
.testata-semplice .contenitore { padding-top: 22px; padding-bottom: 22px; display: flex; justify-content: center; }
.logo { justify-self: start; position: relative; display: inline-flex; align-items: center; text-decoration: none; padding: 10px 26px 4px 0; align-self: center; }
.logo-parola {
  font-family: var(--font-titoli); font-weight: var(--peso-titoli); font-size: var(--logo-dim); line-height: 1;
  color: var(--logo-col); letter-spacing: var(--spazio-logo); text-transform: var(--maiuscolo-logo);
}
.logo-pirata { position: absolute; right: -6px; top: -8px; width: 34px; height: 34px; transform: rotate(14deg); color: var(--logo-pirata); overflow: visible; }
.logo-pirata .pf { fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.logo-pirata .ps { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo-pirata .pc { fill: var(--accento); }
.logo-pirata2 { right: auto; left: -16px; transform: rotate(-12deg); }
.logo-pirata .pf-bordo { stroke: #ffffff; stroke-width: 1.4; }
.logo-pirata .pc2 { fill: var(--sfondo); }
.logo-pirata .pc3 { fill: none; stroke: var(--accento); stroke-width: 2; stroke-linecap: round; }
.ricerca { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 16px; align-items: end; }
.ricerca-cat { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; position: relative; }
.ricerca-cat .etichetta { grid-column: 1 / -1; }
.ricerca-cat select { min-width: 0; }
.sottocat { position: relative; }
.campo-sum { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; min-height: 56px; }
.campo-sum::-webkit-details-marker { display: none; }
.sottocat-lista { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio-piccolo); padding: 12px 16px; box-shadow: var(--ombra-forte); }
.spunta { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.spunta input { width: 26px; height: 26px; accent-color: var(--primario); }
.ricerca-riga { display: flex; gap: 10px; }
.campo-cerca { flex: 1; }
.tasto-cerca { border-radius: var(--raggio-piccolo); }
.testata-azioni { display: flex; align-items: center; gap: 6px; }
.link-icona { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px; min-height: 56px; padding: 4px 8px; text-decoration: none; font-weight: 700; font-size: .72em; color: var(--testo-col) !important; text-align: center; line-height: 1.1; }
.link-icona .ico { width: 30px; height: 30px; color: var(--icona-col); }
.tasto-accedi { min-height: 56px; padding: 0 20px; }

/* ---------- categorie ---------- */
.categorie { background: var(--testata-bg); border-bottom: var(--bordo-largo) solid var(--bordo); }
.categorie-box { position: relative; }
.scorri { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px 4px; }
.scorri::-webkit-scrollbar { display: none; }
.scorri > * { scroll-snap-align: start; }
.cat { flex: none; width: 116px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--cat-col) !important; font-weight: 800; font-size: .8em; text-align: center; padding: 10px 4px; border-radius: var(--raggio-piccolo); background: var(--cat-bg); transition: transform var(--durata); }
.cat-ico { width: 68px; height: 68px; border-radius: var(--icona-forma); background: var(--icona-fondo); color: var(--icona-col); display: grid; place-items: center; }
.cat-ico .ico { width: 38px; height: 38px; }
.cat-attiva { outline: 3px solid var(--primario); }
.freccia-scorri { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; border-radius: 50%; border: var(--bordo-largo) solid var(--bordo); background: var(--superficie); color: var(--testo-col); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombra); z-index: 3; }

/* ---------- pagina ---------- */
.principale { padding-top: 32px; padding-bottom: 56px; }
.riquadro { background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio); padding: 28px; box-shadow: var(--ombra); }
.occhiello { display: inline-flex; align-items: center; gap: 10px; font: var(--peso-titoli) 1.3em/1.1 var(--font-titoli); letter-spacing: .02em; }
.ico-occh { width: 40px; height: 40px; }
.sotto { margin: 6px 0 0; font-size: 1.05em; color: var(--testo-tenue); }
.titolo-pag { font-size: 2.3em; }
.titolo-sez { font-size: 1.5em; display: flex; align-items: center; gap: 12px; }
.ico-sez { width: 36px; height: 36px; color: var(--icona-col); }
.torna { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 16px; min-height: 48px; }

.duo { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; }
.errori-home { background: var(--err-bg); color: var(--err-col); border-color: transparent; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.errori-home .occhiello { color: var(--err-acc); }
.errori-home .sotto { color: var(--err-col); opacity: .9; }
.grande-num { font: var(--peso-titoli) 2.6em/1 var(--font-titoli); margin: 14px 0 20px; color: var(--err-acc); }
.err-slides { position: relative; }
.err-slide { display: none; background: var(--superficie); color: var(--testo-col); border-radius: var(--raggio-piccolo); padding: 14px; }
.err-slide.attiva { display: block; animation: entra .35s ease; }
@keyframes entra { from { transform: translateX(16px); } }
.err-foto { position: relative; height: 150px; border-radius: var(--raggio-piccolo); background: var(--foto-bg); color: var(--foto-ico); display: grid; place-items: center; }
.err-foto .ico-foto { width: 80px; height: 80px; }
.err-nome { font-weight: 800; margin-top: 10px; }
.err-comandi { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.err-n { font-weight: 700; }
.affare { background: var(--affare-bg); color: var(--affare-col); display: flex; flex-direction: column; gap: 12px; }
.affare .tenue { color: inherit; opacity: .9; }
.affare-titolo { font: var(--peso-titoli) 1.5em/1.2 var(--font-titoli); }
.affare-restano { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.orologio { display: flex; gap: 10px; }
.cifra { background: var(--cifra-bg); color: var(--cifra-col); border-radius: var(--raggio-piccolo); padding: 8px 14px; text-align: center; min-width: 76px; }
.cifra b { display: block; font: 900 1.8em/1.1 var(--font-titoli); font-variant-numeric: tabular-nums; }
.cifra span { font-size: .75em; font-weight: 700; }

.schede { display: flex; gap: 14px; margin: 32px 0 8px; flex-wrap: wrap; }
.scheda { display: inline-flex; align-items: center; gap: 10px; min-height: 60px; padding: 0 28px; border-radius: var(--raggio-tasto); background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); color: var(--testo-col) !important; text-decoration: none; font: 800 1.1em var(--font-testo); box-shadow: var(--ombra); }
.scheda .ico { color: var(--icona-col); }

.fila { margin-top: 36px; }
.fila-testa { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vedi-tutti { font-weight: 800; display: inline-flex; align-items: center; gap: 4px; min-height: 48px; }
.scorri-box { position: relative; }
.scorri-box .scorri { gap: 18px; padding: 14px 4px 18px; }
.scorri-box .prod { flex: 0 0 260px; }

/* scheda prodotto */
.prod { position: relative; display: flex; flex-direction: column; gap: 6px; background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio); padding: 14px; box-shadow: var(--ombra); transition: transform var(--durata), box-shadow var(--durata); }
.prod-foto { position: relative; aspect-ratio: 4 / 3; border-radius: var(--raggio-piccolo); background: var(--foto-bg); color: var(--foto-ico); display: grid; place-items: center; }
.ico-foto { width: 42%; height: 42%; stroke-width: 1.5; }
.badge-sconto { position: absolute; left: 10px; top: 10px; background: var(--sconto-bg); color: var(--sconto-col); font: 900 .95em/1 var(--font-titoli); padding: 8px 10px; border-radius: var(--raggio-piccolo); }
.badge-grande { font-size: 1.3em; }
.cuore { position: absolute; right: 22px; top: 22px; width: 52px; height: 52px; border-radius: 50%; border: var(--bordo-largo) solid var(--bordo); background: var(--superficie); color: var(--primario); display: grid; place-items: center; cursor: pointer; box-shadow: var(--ombra); }
.cuore .ico { width: 28px; height: 28px; fill: none; stroke-width: 2.2; }
.cuore[aria-pressed="true"] .ico { fill: currentColor; }
.cuore.batte { animation: batte .45s ease; }
@keyframes batte { 30% { transform: scale(1.25); } 60% { transform: scale(.92); } }
.prod-nome { font-family: var(--font-testo); font-weight: 800; font-size: 1em; line-height: 1.25; margin-top: 4px; }
.prod-prezzi { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prezzo { font: var(--peso-titoli) 1.6em/1.1 var(--font-titoli); color: var(--prezzo); }
.vecchio { color: var(--testo-tenue); font-size: .85em; }
.prod-info { font-size: .78em; color: var(--testo-tenue); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tasto-prod { margin-top: auto; width: 100%; }
.lampo-dati { font-size: .8em; }
.lampo-ora { display: flex; align-items: center; gap: 6px; }
.conto { font-variant-numeric: tabular-nums; color: var(--prezzo); }
.barra { height: 12px; border-radius: 99px; background: var(--barra-bg); overflow: hidden; margin: 6px 0 2px; }
.barra span { display: block; height: 100%; background: var(--barra-col); border-radius: inherit; }
.lampo-perc { color: var(--testo-tenue); }

/* categoria */
.pag-testa { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.pag-ico { width: 80px; height: 80px; border-radius: var(--icona-forma); background: var(--icona-fondo); color: var(--icona-col); display: grid; place-items: center; flex: none; }
.pag-ico .ico { width: 46px; height: 46px; }
.chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.chip { min-height: 52px; padding: 0 20px; border-radius: var(--raggio-tasto); border: var(--bordo-largo) solid var(--bordo); background: var(--superficie); color: var(--testo-col); font: 700 .95em var(--font-testo); cursor: pointer; display: inline-flex; align-items: center; }
.chip[aria-pressed="true"] { background: var(--primario); color: var(--su-primario); border-color: var(--primario); }
.chip-fisso { background: var(--superficie-2); color: var(--testo-col); border-color: transparent; min-height: 40px; }
.cat-layout { display: grid; grid-template-columns: 290px 1fr; gap: 28px; align-items: start; }
.filtri { background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio); padding: 20px; position: sticky; top: 16px; }
.filtri-testa { font: var(--peso-titoli) 1.3em var(--font-titoli); display: flex; gap: 10px; align-items: center; cursor: pointer; list-style: none; min-height: 48px; }
.filtri-testa::-webkit-details-marker { display: none; }
.filtro { border: 0; border-top: var(--bordo-largo) solid var(--bordo); margin: 12px 0 0; padding: 12px 0 0; }
.filtro legend { font-weight: 800; padding: 0 0 6px; float: left; width: 100%; }
.prezzo-da-a { display: flex; gap: 10px; clear: both; }
.prezzo-da-a label { flex: 1; font-weight: 700; font-size: .85em; }
.campo-num { min-height: 52px; }
.filtri .tasto-largo { margin-top: 16px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }

/* errori */
.avviso { display: flex; gap: 14px; align-items: flex-start; background: var(--superficie-2); border-radius: var(--raggio); padding: 18px 22px; margin-bottom: 20px; }
.avviso p { margin: 0; }
.ico-avviso { width: 36px; height: 36px; color: var(--icona-col); }
.lista-err { display: grid; gap: 16px; }
.err-card { display: grid; grid-template-columns: 200px 1fr auto; gap: 22px; align-items: center; background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio); padding: 16px; box-shadow: var(--ombra); }
.err-card .prod-foto { aspect-ratio: 4 / 3; }
.err-card-dati { display: flex; flex-direction: column; gap: 4px; }
.err-quando { font-size: .8em; font-weight: 700; color: var(--testo-tenue); display: flex; align-items: center; gap: 6px; }
.err-card-azioni { display: flex; align-items: center; gap: 12px; }
.err-card .cuore { position: static; }
.iscriviti-box { display: flex; align-items: center; gap: 22px; margin-top: 28px; }
.iscriviti-box p { margin: 4px 0 0; }
.iscriviti-box .tasto { margin-left: auto; }
.ico-grande { width: 60px; height: 60px; color: var(--icona-col); }

/* abbonamento */
.centro { text-align: center; max-width: 760px; margin: 0 auto 32px; }
.piani { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.piano { background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio); padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--ombra); }
.piano-evid { border-color: var(--primario); border-width: 4px; }
.piano-nome { font-size: 1.15em; }
.piano-prezzo b { font: var(--peso-titoli) 3em/1 var(--font-titoli); color: var(--prezzo); display: block; }
.piano-prezzo span { color: var(--testo-tenue); font-weight: 700; }
.piano-lista { list-style: none; padding: 0; margin: 0 0 auto; display: grid; gap: 10px; }
.piano-lista li { display: flex; gap: 8px; align-items: center; }
.piano .tasto { font-size: .9em; padding: 0 14px; }
.domande { max-width: 820px; margin: 48px auto 0; display: grid; gap: 12px; }
.domanda { background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio-piccolo); padding: 0 22px; }
.domanda summary { min-height: 64px; display: flex; align-items: center; font-weight: 800; cursor: pointer; }
.domanda p { margin: 0 0 18px; }

/* articolo */
.articolo { max-width: 800px; margin: 0 auto; display: grid; gap: 18px; }
.articolo .chip-fisso { justify-self: start; }
.autore { display: flex; align-items: center; gap: 14px; }
.covi { flex: none; }
.covi-autore { width: 72px; height: 72px; }
.lead { font-size: 1.2em; font-weight: 600; margin: 0; }
.articolo p { margin: 0; }
.articolo .titolo-sez { margin-top: 10px; }
.box-prod { max-width: 320px; }
.elenco { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.elenco li { display: flex; gap: 10px; align-items: center; }
.firma { display: flex; gap: 16px; align-items: center; background: var(--superficie-2); border-radius: var(--raggio); padding: 18px; }
.covi-firma { width: 88px; height: 88px; }
.condividi { display: flex; gap: 12px; flex-wrap: wrap; }

/* arriva presto */
.presto { min-height: 70vh; display: grid; place-items: center; }
.presto-box { max-width: 720px; text-align: center; display: grid; justify-items: center; gap: 18px; }
.covi-presto { width: 170px; height: 170px; }
.presto-titolo { font-size: 3.4em; color: var(--logo-col); }
.presto-testo { font-size: 1.35em; margin: 0; font-weight: 600; }
.presto-form { width: 100%; text-align: left; }
.presto-form .campo { flex: 1; }
.presto-form .ricerca-riga { gap: 12px; }

/* animaletto */
.ani-testa { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.ani-nome { display: flex; align-items: center; gap: 14px; }
.ani-stato { display: flex; align-items: center; gap: 18px; }
.umore { display: inline-flex; align-items: center; gap: 10px; font: var(--peso-titoli) 1.6em var(--font-titoli); }
.faccina { width: 48px; height: 48px; }
.faccina circle:first-child { fill: #ffd25e; stroke: #b7791f; stroke-width: 2; }
.faccina .occhio { fill: #3b2416; }
.faccina path { fill: none; stroke: #3b2416; stroke-width: 2.6; stroke-linecap: round; }
.monete { display: inline-flex; align-items: center; gap: 8px; background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio-tasto); padding: 8px 18px; font-weight: 700; min-height: 52px; }
.monete .ico { color: #b7791f; }
.scena { display: grid; grid-template-columns: 1fr 60px 1fr; height: 440px; border-radius: var(--raggio); overflow: hidden; border: 4px solid #6e4826; position: relative; }
.zona { position: relative; overflow: hidden; }
.zona svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.muro svg { width: 100%; height: 100%; display: block; }
.zona-nome { position: absolute; z-index: 2; left: 16px; top: 12px; font: 900 1.4em 'Fredoka', 'Baloo 2', var(--font-titoli); color: #fff; background: rgba(40, 30, 20, .62); padding: 2px 16px 4px; border-radius: 99px; }
.meteo { position: absolute; z-index: 2; right: 14px; top: 12px; background: #fff; color: #1e3a5f; font-weight: 900; border-radius: 99px; padding: 2px 14px; }
.serpente { position: absolute; z-index: 2; left: 30%; bottom: 4%; width: 46%; max-width: 280px; animation: respira 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes respira { 50% { transform: scale(1.03, .98); } }
.ani-sotto { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; margin-top: 24px; align-items: start; }
.fase { display: flex; gap: 24px; margin: 10px 0 14px; flex-wrap: wrap; }
.barre { display: grid; gap: 10px; }
.barra-riga { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: center; font-weight: 700; font-size: .9em; }
.barra-riga .barra { height: 18px; margin: 0; }
.comandi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.comando { min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--superficie); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio); color: var(--testo-col); font: 800 .9em var(--font-testo); cursor: pointer; box-shadow: var(--ombra); transition: transform var(--durata); }
.comando .ico { width: 38px; height: 38px; color: var(--icona-col); }

/* logo con le 5 icone della bozza (solo proposte con logoIcone) */
.logo-con-icone { flex-direction: column; align-items: center; gap: 6px; background: var(--logo-fondo, #c05621); border-radius: var(--raggio); padding: 10px 22px 12px; }
.logo-con-icone .logo-parola { color: #ffffff; font-size: calc(var(--logo-dim) * .72); }
.logo-icone { display: flex; gap: 8px; }
.logo-icone svg { width: 28px; height: 28px; }
.logo-icone .li-buco { fill: var(--logo-fondo, #c05621); }
.logo-con-icone .logo-pirata { right: -16px; top: -14px; width: 38px; height: 38px; }
.logo-pirata .pf-pesca { stroke: #ffd3b8; stroke-width: .7; }
.logo-pirata .teschio { fill: #ffd3b8; }
.logo-pirata .pf-buco { fill: currentColor; }
.logo-pirata .pf-denti { fill: none; stroke: currentColor; stroke-width: .6; stroke-linecap: round; }
.logo-pirata .vento { transform-origin: 4px 8px; animation: sventola 1.6s ease-in-out infinite; }
@keyframes sventola { 50% { transform: skewY(-6deg) scaleX(.94); } }
.piede .logo-con-icone .logo-parola { font-size: 22px; }

/* chat "Chiedi a Scova" */
.chat { position: fixed; z-index: 45; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat-bottone { display: inline-flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 20px 6px 6px; border-radius: 999px; border: var(--bordo-largo) solid var(--bordo); background: var(--superficie); color: var(--testo-col); font: 800 .95em var(--font-testo); cursor: pointer; box-shadow: var(--ombra-forte); }
.chat-bottone .chat-foto { width: 52px; height: 52px; }
.chat-foto { flex: none; border-radius: 50%; background: var(--superficie-2); }
.chat-aperta .chat-bottone span { display: none; }
.chat-aperta .chat-bottone { padding: 6px; }
.chat-finestra { width: 380px; max-height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column; background: var(--superficie); color: var(--testo-col); border: var(--bordo-largo) solid var(--bordo); border-radius: var(--raggio); box-shadow: var(--ombra-forte); overflow: hidden; }
.chat-finestra[hidden] { display: none; }
.chat-testa { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; background: var(--err-bg); color: var(--err-col); }
.chat-testa .chat-foto { width: 52px; height: 52px; background: var(--superficie-2); }
.chat-chi { display: grid; line-height: 1.2; flex: 1; min-width: 0; }
.chat-chi b { font: var(--peso-titoli) 1.15em var(--font-titoli); }
.chat-ia { font-size: .78em; font-weight: 700; background: var(--err-acc); color: var(--err-bg); border-radius: 999px; padding: 2px 10px; justify-self: start; margin-top: 4px; white-space: nowrap; }
.chat-chiudi { width: 48px; height: 48px; border-radius: 50%; border: 0; background: transparent; color: inherit; display: grid; place-items: center; cursor: pointer; }
.chat-messaggi { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; font-size: .9em; }
.msg { margin: 0; padding: 10px 14px; border-radius: 18px; max-width: 88%; }
.msg-covi { background: var(--superficie-2); color: var(--testo-col); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg-tu { background: var(--primario); color: var(--su-primario); align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-idee { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 16px 10px; }
.chat-idee .chip { min-height: 44px; font-size: .8em; padding: 0 14px; }
.chat-scrivi { padding: 0 16px; }
.chat-scrivi .campo { flex: 1; min-height: 52px; }
.chat-scrivi .tasto { min-height: 52px; padding: 0 16px; border-radius: var(--raggio-piccolo); }
.chat-nota { margin: 8px 16px 14px; font-size: .75em; color: var(--testo-tenue); }

/* piede */
.piede { background: var(--piede-bg); color: var(--piede-col); padding: 40px 0 48px; margin-top: 24px; }
.piede-in { display: grid; gap: 18px; }
.piede .logo-parola { color: var(--piede-col); font-size: 30px; }
.piede .logo-pirata { color: var(--piede-col); }
.piede-link { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.piede-link a { color: var(--piede-col) !important; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.piede-nota { margin: 0; opacity: .85; font-size: .85em; }

/* menu in basso (telefono) */
.menu-basso { display: none; }

/* ---------- TELEFONO ---------- */
@media (max-width: 760px) {
  body.sito { --testo: 19px; padding-bottom: 92px; }
  .contenitore { padding: 0 16px; }
  .solo-pc { display: none; }
  .solo-tel { display: inline; }
  .tasto.solo-tel { display: inline-flex; }
  .banda-in { gap: 8px; min-height: 52px; }
  .banda-link { font-size: .8em; gap: .35em; }
  .banda .ico { width: 1.3em; height: 1.3em; }
  .testata-in { gap: 12px; padding-top: 14px; padding-bottom: 16px; }
  .logo { --logo-dim: 26px; padding-right: 22px; }
  .logo-pirata { width: 28px; height: 28px; }
  .ricerca { grid-template-columns: 1fr; gap: 10px; }
  .campo { padding: 0 12px; }
  .tasto-cerca span { display: none; }
  .tasto-cerca { padding: 0 16px; }
  .testata-azioni .link-icona { display: none; }
  .tasto-accedi { padding: 0 16px; min-height: 52px; }
  .cat { width: 96px; font-size: .74em; }
  .cat-ico { width: 60px; height: 60px; }
  .cat-ico .ico { width: 32px; height: 32px; }
  .categorie .freccia-scorri { display: none; }
  .principale { padding-top: 20px; }
  .duo { grid-template-columns: 1fr; gap: 16px; }
  .errori-home { grid-template-columns: 1fr; padding: 20px; }
  .riquadro { padding: 20px; }
  .grande-num { font-size: 2em; margin: 8px 0 14px; }
  .errori-testo .tasto { width: 100%; }
  .schede { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
  .scheda { flex-direction: column; justify-content: center; padding: 8px 4px; min-height: 76px; gap: 2px; font-size: .9em; border-radius: var(--raggio); }
  .titolo-sez { font-size: 1.3em; }
  .titolo-pag { font-size: 1.75em; }
  .scorri-box .prod { flex-basis: 74%; }
  .scorri-box .freccia-scorri { display: none; }
  .cat-layout { grid-template-columns: 1fr; gap: 16px; }
  .filtri { position: static; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .chip { flex: none; }
  .griglia { grid-template-columns: 1fr; }
  .err-card { grid-template-columns: 1fr; gap: 12px; }
  .err-card .prod-foto { aspect-ratio: 16 / 8; }
  .err-card-azioni { grid-column: 1 / -1; }
  .err-card-azioni .tasto { flex: 1; }
  .iscriviti-box { flex-direction: column; text-align: center; }
  .iscriviti-box .tasto { margin: 0; width: 100%; }
  .piani { grid-template-columns: 1fr; }
  .presto-titolo { font-size: 2.3em; }
  .covi-presto { width: 130px; height: 130px; }
  .presto-form .ricerca-riga { flex-direction: column; }
  .ani-nome .titolo-pag { font-size: 1.35em; }
  .ani-testa { display: grid; gap: 10px; }
  .ani-nome { justify-content: space-between; }
  .tasto-esci { min-height: 52px; padding: 0 16px; font-size: .85em; white-space: nowrap; }
  .umore { font-size: 1.3em; }
  .scena { grid-template-columns: 1fr; height: 300px; }
  .scena .zona-esterno, .scena .muro { display: none; }
  .scena.fuori .zona-esterno { display: block; }
  .scena.fuori .zona-casa { display: none; }
  .serpente { width: 46%; left: 30%; bottom: 4%; }
  .ani-sotto { grid-template-columns: 1fr; gap: 16px; }
  .barra-riga { grid-template-columns: 84px 1fr; }
  .comando { min-height: 88px; font-size: .78em; }
  .menu-basso { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; background: var(--menu-bg); border-top: var(--bordo-largo) solid var(--bordo); padding: 6px 6px 10px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .08); }
  .menu-voce { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 68px; text-decoration: none; color: var(--menu-col) !important; font-weight: 800; font-size: .72em; border-radius: var(--raggio-piccolo); }
  .menu-voce .ico { width: 30px; height: 30px; }
  .menu-attivo { color: var(--menu-attivo) !important; background: var(--menu-attivo-bg); }
  .piede { padding-bottom: 32px; }
  .logo-con-icone { padding: 8px 14px 9px; gap: 4px; }
  .logo-con-icone .logo-parola { font-size: 22px; }
  .logo-icone { gap: 6px; }
  .logo-icone svg { width: 20px; height: 20px; }
  .logo-con-icone .logo-pirata { width: 30px; height: 30px; right: -12px; top: -12px; }
  .chat { right: 12px; left: 12px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
  .chat-bottone { min-height: 60px; padding: 4px; }
  .chat-bottone span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .chat-bottone .chat-foto { width: 52px; height: 52px; }
  .chat:not(.chat-aperta) { left: auto; }
  .chat-finestra { width: 100%; max-height: calc(100vh - 220px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- pagina di prova (non fa parte del design) ---------- */
body.viewer { margin: 0; font: 16px/1.4 system-ui, -apple-system, sans-serif; background: #ececec; color: #1a1a1a; }
.v-testa { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid #d4d4d4; padding: 14px 24px; display: grid; gap: 10px; }
.v-torna { color: #1a1a1a; font-weight: 600; }
.v-titolo { display: flex; gap: 14px; align-items: center; }
.v-titolo h1 { margin: 0; font-size: 24px; }
.v-titolo p { margin: 2px 0 0; color: #444; }
.v-num { font: 800 28px/1 system-ui; background: #1a1a1a; color: #fff; border-radius: 10px; padding: 8px 12px; }
.v-comandi { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.v-gruppo { display: flex; flex-wrap: wrap; gap: 6px; }
.v-gruppo button { font: 600 15px system-ui; min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid #bdbdbd; background: #fff; cursor: pointer; color: #1a1a1a; }
.v-gruppo button[aria-pressed="true"] { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.v-tavolo { display: grid; grid-template-columns: 1fr 410px; gap: 28px; padding: 24px; align-items: start; }
.v-tavolo figure { margin: 0; }
.v-tavolo figcaption { font-weight: 700; margin-bottom: 8px; }
.v-schermo { position: relative; overflow: hidden; border-radius: 12px; border: 10px solid #222; border-top-width: 26px; background: #fff; }
.v-schermo iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 860px; border: 0; transform-origin: 0 0; }
.v-telefono { width: 410px; height: 864px; border: 10px solid #222; border-radius: 46px; overflow: hidden; background: #fff; }
.v-telefono iframe { width: 390px; height: 844px; border: 0; display: block; }
@media (max-width: 1000px) { .v-tavolo { grid-template-columns: 1fr; } }