/* ═══════════════════════════════════════════════════════════════
   savebefore — foglio di stile
   Mobile first. Il colore del cibo è caldo, l'interfaccia sta
   indietro e lascia parlare i prodotti.
   ═══════════════════════════════════════════════════════════════ */

/* Inter, ospitato qui e non sui server di Google: i caratteri caricati
   da domini Google sono stati giudicati non conformi al GDPR in Europa
   perché trasmettono l'indirizzo IP del visitatore. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('font/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('font/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Poppins, cinque pesi (400/500/600/700/800, gli stessi usati in giro
   per il sito): ora è il carattere di tutta l'app, non più solo dei
   titoli — stesso principio dell'Inter qui sopra, file scaricati una
   volta e ospitati qui invece che richiesti al volo dai server di
   Google (stesso motivo GDPR). Inter resta caricato come riserva, per
   eventuali caratteri che Poppins non copre. */
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400;
  font-display:swap; src:url('font/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:400;
  font-display:swap; src:url('font/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:500;
  font-display:swap; src:url('font/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:500;
  font-display:swap; src:url('font/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600;
  font-display:swap; src:url('font/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600;
  font-display:swap; src:url('font/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600;
  font-display:swap; src:url('font/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:600;
  font-display:swap; src:url('font/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700;
  font-display:swap; src:url('font/poppins-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Poppins'; font-style:normal; font-weight:700;
  font-display:swap; src:url('font/poppins-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Caveat, un solo peso: usato solo per la frase scritta a mano sulla
   foto dell'apertura, non per il testo dell'app. */
@font-face{
  font-family:'Caveat'; font-style:normal; font-weight:600;
  font-display:swap; src:url('font/caveat-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Caveat'; font-style:normal; font-weight:600;
  font-display:swap; src:url('font/caveat-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --sfondo:#FBF7F0;   --velo:rgba(251,247,240,.82);
  --carta:#FFFFFF;    --carta-2:#F5F1E8;
  --inchiostro:#1C1812; --fumo:#6E6A63;
  /* --tenue era #9E998F: 2,5–2,8:1 su sfondo/carta, ben sotto il 4,5:1
     minimo WCAG AA per il testo (qui lo usano .aiuto, i luoghi, i
     segnaposto). #736F67 arriva a 4,7–5,0:1 sulle superfici principali. */
  --tenue:#736F67;
  --bordo:#E9E2D6;

  /* Verde salvia e oro: il colore del raccolto, non più il blu notte.
     I nomi delle variabili restano quelli storici per non toccare
     duecento righe di regole; cambiano solo i valori. --verde-vivo (testo
     di prezzi, link, badge) resta vicino al valore storico apposta: è
     già al limite del contrasto minimo leggibile (WCAG AA, 4.5:1) su
     sfondo chiaro, schiarirlo oltre renderebbe link e prezzi difficili
     da leggere. --verde invece (sfondi, gradienti, pulsanti) aveva
     molto margine di contrasto in più ed è quello schiarito per dare
     il tono salvia più tenue in tutta l'app. */
  --verde:#6B7A52;    --verde-vivo:#5C7A2E;
  --arancio:#C08A1E;  --arancio-tenue:#FBF1DA;
  /* --arancio sul bianco fa solo 3:1: va bene per riempimenti (barre,
     badge pieni), non per il testo. Per il testo, questo. */
  --arancio-testo:#85590A;
  --rosso:#B23B10;
  --oro:#E9AE33;

  /* Angoli squadrati, a spigolo vivo: l'ombra (vedi --om-* sotto) resta
     l'unica cosa a definire il bordo della carta, l'arrotondamento non
     c'è più per niente (prima restava comunque un accenno morbido,
     stile "a pin" Pinterest — ora abbandonato del tutto). */
  --r-s:0px; --r-m:0px; --r-l:0px;
  --om-1:0 1px 3px rgba(24,20,16,.06), 0 10px 24px -12px rgba(24,20,16,.22);
  --om-2:0 2px 8px rgba(24,20,16,.08), 0 22px 48px -20px rgba(24,20,16,.34);
  /* ombra più profonda delle due sopra: solo per le carte "vetrina"
     della home (passo-carta), dove un po' di rilievo in più al tocco
     serve a dare corpo alla pagina, non per gli elenchi densi. */
  --om-3:0 8px 18px rgba(24,20,16,.11), 0 34px 70px -22px rgba(24,20,16,.42);
  --barra-h:calc(62px + env(safe-area-inset-bottom));
}

/* Niente più tema scuro: l'app resta sempre color panna, per restare
   coerente con le foto (tutte su sfondo chiaro e caldo). */

*{box-sizing:border-box;margin:0;padding:0}

/* Un elemento anche solo di qualche pixel più largo dello schermo (una
   foto, una fascia a tutta larghezza con margini negativi...) basta a
   rendere la pagina scorrevole in orizzontale: un vero trascinamento
   laterale, non solo un rimbalzo, da cui poi non si torna indietro da
   soli. overflow-x toglie lo scorrimento vero e proprio, ma su Safari
   iOS non basta da solo a fermare il "rimbalzo" elastico quando si
   trascina oltre il bordo — serve anche overscroll-behavior-x, che
   spegne proprio quel gesto, non solo l'area che scorrerebbe. */
html{overflow-x:hidden;overscroll-behavior-x:none}

body{
  font:16px/1.55 'Poppins','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-feature-settings:'tnum' 1;
  color:var(--inchiostro); background:var(--sfondo);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:var(--barra-h);
  overscroll-behavior:none;
  /* "clip" e non "hidden": hidden su body (con hidden anche su html) lo
     trasforma in un contenitore di scorrimento a sé, e la testata
     position:sticky (#capoTesta) non resta più ferma in alto scorrendo.
     clip taglia allo stesso modo ma NON crea un contenitore di scorrimento.
     html{overflow-x:hidden} qui sopra resta, per Safari. */
  overflow-x:clip;
  position:relative; isolation:isolate;
}
/* profondità ambientale: due aloni di colore fissi, molto tenui — danno
   corpo allo sfondo senza mai competere con i contenuti sopra. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(640px 480px at 92% -6%, rgba(233,174,51,.10), transparent 60%),
    radial-gradient(600px 460px at -8% 18%, rgba(92,122,46,.09), transparent 58%);
}

/* transizione morbida fra una schermata e l'altra */
#app{animation:app-entra .32s cubic-bezier(.2,.75,.3,1) both}
@keyframes app-entra{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){ #app{animation:none} }
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
svg{width:1em;height:1em;display:block}

/* anello di messa a fuoco da tastiera coerente col brand, invece del
   blu generico del browser che stona con la palette verde/crema — solo
   :focus-visible, così non compare per un semplice clic col mouse. */
:focus-visible{outline:2.5px solid var(--verde-vivo);outline-offset:2px}

/* ═══ testata ═══ */
#testa{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px;
  background:var(--velo); backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid var(--bordo);
}
.logo{display:flex;align-items:center;gap:9px}
.marchio{
  position:relative;overflow:hidden;
  display:grid;place-items:center;width:36px;height:36px;flex:none;
  border-radius:11px;color:#FAF7EE;
  background:linear-gradient(148deg,#9DA85A 0%,#5C7A2E 48%,#2F3D1A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -2px 4px rgba(20,30,8,.35),
    0 2px 3px rgba(35,45,15,.30),
    0 8px 16px -6px rgba(35,45,15,.55);
  transition:transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s;
}
.marchio svg{
  width:23px;height:23px;position:relative;z-index:1;
  filter:drop-shadow(0 1px 1.5px rgba(15,25,5,.45));
  transform-origin:50% 90%;animation:foglia-dondola 6s ease-in-out infinite;
}
/* riflesso che attraversa il marchio ogni tanto */
.marchio::after{
  content:"";position:absolute;inset:-20% auto -20% -60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);animation:marchio-riflesso 9s ease-in-out 2s infinite;
}
.parola-img{
  height:30px;width:auto;display:block;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.7)) drop-shadow(0 3px 5px rgba(60,80,30,.28));
  animation:parola-entra .8s cubic-bezier(.2,.8,.3,1) both;
  transition:transform .25s cubic-bezier(.2,.8,.3,1);
}
.logo:hover .marchio{transform:translateY(-2px) rotate(-4deg);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 4px rgba(20,30,8,.35),0 3px 4px rgba(35,45,15,.3),0 12px 20px -6px rgba(35,45,15,.6)}
.logo:hover .parola-img{transform:translateX(2px)}
.logo:active .marchio{transform:scale(.94)}
@keyframes foglia-dondola{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes marchio-riflesso{0%,70%{left:-60%}100%{left:130%}}
@keyframes parola-entra{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .marchio svg,.marchio::after,.parola-img{animation:none}
  .logo:hover .marchio,.logo:hover .parola-img{transform:none}
}

/* Sotto i 440px #testa trabocca: hamburger + logo (con motto) + carrello
   + lingua + "Accedi" non ci stanno più tutti su una riga, e "Accedi"
   finisce spinto fuori schermo (verificato: trabocca fino a ~430px, non
   solo sui telefoni piccoli). Il motto si toglie (resta solo il nome),
   e si stringono un po' i margini: libera lo spazio che serve, senza
   dover accorciare nulla a testo. */
@media (max-width:440px){
  .motto{display:none}
  #testa{padding:12px 10px;gap:6px}
  #azioniTesta{gap:5px}
  .parola-img{height:24px}
  .lingua{padding:0 6px}
}
/* Schermi stretti (iPhone SE e simili): il logo torna più piccolo per far stare tutto. */
@media (max-width:340px){
  .parola-img{height:19px}
}

/* selettore di lingua: mostra la sigla, apre l'elenco di sistema */
#azioniTesta{display:flex;align-items:center;gap:8px}
.lingua{
  position:relative;display:grid;place-items:center;
  height:32px;padding:0 9px;border:1px solid var(--bordo);border-radius:0;
  background:var(--carta);cursor:pointer;
}
.lingua span{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--fumo);
  pointer-events:none;
}
.lingua select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:0;padding:0;
}
.lingua:active{transform:scale(.95)}

/* position:relative + ::before allarga la zona toccabile a 44×44px (il
   minimo consigliato per il tocco) senza cambiare il cerchio visibile
   né il layout intorno: il pseudo-elemento è assoluto, quindi non
   occupa spazio proprio e non sposta nulla attorno a sé. */
.tondo{
  position:relative;
  display:grid;place-items:center;
  width:36px;height:36px;flex:none;border:1px solid var(--bordo);
  border-radius:50%;background:var(--carta);cursor:pointer;
  font-size:15px;line-height:1;color:var(--fumo);
}
.tondo::before{content:'';position:absolute;inset:-4px}
.tondo:active{transform:scale(.94)}
/* senza questa, display:grid qui sopra vince sull'attributo hidden
   (stessa causa già vista con .btn e .menu-tendina) */
.tondo[hidden]{display:none}

.carrello-testa{position:relative;text-decoration:none}
.carrello-testa svg{width:19px;height:19px}
.carrello-badge{
  position:absolute;top:-3px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  display:grid;place-items:center;border-radius:9px;
  background:var(--rosso);color:#fff;font-size:10.5px;font-weight:700;
  border:2px solid var(--carta);
}
.carrello-badge[hidden]{display:none}

/* popup di recensione, mostrato subito dopo un pagamento confermato */
.popup-velo{
  position:fixed;inset:0;z-index:250;
  background:rgba(10,8,4,.5);
  display:flex;align-items:flex-end;justify-content:center;
}
.popup-scheda{
  width:100%;max-width:480px;background:var(--carta);
  border-radius:var(--r-m) var(--r-m) 0 0;box-shadow:var(--om-2);
  padding:22px 20px max(22px,env(safe-area-inset-bottom));
  animation:popup-su .22s ease-out;
}
@keyframes popup-su{ from{ transform:translateY(24px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@media (min-width:560px){
  .popup-velo{ align-items:center }
  .popup-scheda{ border-radius:var(--r-m) }
}

/* ── card grande del riconoscimento, in cima al modulo offerta ── */
.riconoscimento-hero{padding:26px 20px}
.riconoscimento-emo{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto;
  border-radius:50%;background:var(--carta-2);color:var(--verde-vivo);
}
.riconoscimento-emo svg{width:26px;height:26px}
.riconoscimento-hero .btn{font-size:17px;padding:16px 24px}
.riga-bottoni-riconoscimento{display:flex;gap:10px}
.riga-bottoni-riconoscimento .btn{flex:1;min-width:0;font-size:15px;padding:14px 12px;white-space:nowrap}

/* ── popup di conferma del riconoscimento (scatto o codice a barre) ── */
/* overflow-x:hidden esplicito: senza, lo spec CSS lo calcola "auto" solo
   perché overflow-y è impostato, e basta un pixel di troppo (un select,
   un bordo) per rendere il popup scorribile anche in orizzontale, col
   dito che non torna più indietro da solo. */
.popup-riconoscimento{max-height:88vh;overflow-y:auto;overflow-x:hidden}
.riconoscimento-foto{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-s);
  margin-bottom:14px;display:block;background:var(--carta-2);
}
.riconoscimento-stato{text-align:center;padding:18px 0}
.riconoscimento-stato p{margin-top:14px;color:var(--fumo)}
.rondella{
  display:inline-block;width:34px;height:34px;border-radius:50%;
  border:3px solid var(--bordo);border-top-color:var(--verde-vivo);
  animation:rondella-gira .8s linear infinite;
}
@keyframes rondella-gira{ to{ transform:rotate(360deg) } }
.riconoscimento-anteprima{
  border:1px solid var(--bordo);border-radius:var(--r-s);padding:14px;
  display:flex;flex-direction:column;gap:10px;
}
.riconoscimento-anteprima > div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.riconoscimento-anteprima .aiuto{flex:none}
.riconoscimento-anteprima b{text-align:right}
.riconoscimento-azioni{display:flex;gap:10px;margin-top:16px}
.riconoscimento-azioni .btn{flex:1}

/* righe con controllo di quantità: carrello per-negozio dello scaffale */
.riga-carrello{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--bordo)}
.riga-carrello:last-of-type{border-bottom:0;padding-bottom:0}
.riga-carrello-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:inherit;text-decoration:none}
.passo-qta{display:flex;align-items:center;gap:8px;flex:none}
.passo-qta button{
  position:relative;
  width:28px;height:28px;border-radius:0;border:1px solid var(--bordo);
  background:var(--carta-2);color:var(--inchiostro);font-size:16px;font-weight:600;
  cursor:pointer;display:grid;place-items:center;line-height:1;
}
/* zona di tocco allargata a 44px come .tondo/.cuore: qui i due bottoni
   sono vicini (gap:8px) ma ciascuno si espande solo verso il proprio
   lato esterno e verso il numero in mezzo, mai l'uno dentro l'altro. */
.passo-qta button::before{content:'';position:absolute;inset:-8px}
.passo-qta button:disabled{opacity:.4;cursor:not-allowed}
.passo-qta span{min-width:18px;text-align:center;font-weight:600}

/* il pulsante del menu deve saltare all'occhio: sfondo pieno, non solo un
   contorno che si perde nell'header (soprattutto su sfondo scuro) */
#bMenu{
  background:linear-gradient(135deg,var(--verde-vivo),var(--verde));
  border-color:transparent;color:#fff;
  box-shadow:0 4px 12px -4px rgba(92,122,46,.55);
}
#bMenu svg{width:19px;height:19px}

/* overlay a schermo intero: sopra a tutto (anche all'header sticky),
   così il pulsante che lo apre non deve restare visibile sopra di lui */
.menu-tendina{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;
  background:linear-gradient(165deg,#6B8046 0%,#4B5A34 55%,#2E3A1F 100%);
  padding:16px 24px max(28px,env(safe-area-inset-bottom));
  overflow-y:auto;overflow-x:hidden;
}
/* senza questa, la regola display:flex qui sopra vince sull'attributo
   hidden e l'overlay resta visibile (e blocca i click) anche "chiuso" */
.menu-tendina[hidden]{display:none}

/* ── schermata di benvenuto dopo l'accesso ───────────────────────
   Un momento di marchio appena si entra, non solo un avviso che va e
   viene: la foglia scende dall'alto e si assesta con un piccolo rimbalzo,
   poi il nome compare una lettera alla volta. Stesso sfondo del menu qui
   sopra, per restare coerenti. */
.splash-accesso{
  position:fixed;inset:0;z-index:300;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(165deg,#6B8046 0%,#4B5A34 55%,#2E3A1F 100%);
  opacity:1;transition:opacity .35s ease;
}
.splash-accesso.esce{opacity:0}
.splash-accesso-foglia{
  width:60px;height:60px;color:#F6F1E4;
  animation:splashFoglia .7s cubic-bezier(.3,1.6,.6,1) both;
}
.splash-accesso-foglia svg{width:100%;height:100%;display:block}
@keyframes splashFoglia{
  0%{transform:translateY(-140px);opacity:0}
  100%{transform:translateY(0);opacity:1}
}
.splash-accesso-nome{
  display:flex;font-family:'Poppins',sans-serif;font-weight:700;
  font-size:28px;letter-spacing:.01em;color:#F6F1E4;
}
.splash-accesso-nome span{
  display:inline-block;opacity:0;transform:translateY(-16px);
  animation:splashLettera .3s ease forwards;
  animation-delay:calc(.55s + var(--i) * 45ms);
}
@keyframes splashLettera{ to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce){
  .splash-accesso-foglia{animation:none}
  .splash-accesso-nome span{animation:none;opacity:1;transform:none}
}
.menu-testa{
  display:grid;grid-template-columns:40px 1fr 40px;align-items:center;
  margin-bottom:9vh;
}
.menu-chiudi{
  position:relative;
  display:grid;place-items:center;width:40px;height:40px;
  background:none;border:0;color:#F6F1E4;cursor:pointer;
}
.menu-chiudi::before{content:'';position:absolute;inset:-2px}
.menu-chiudi svg{width:22px;height:22px}
.menu-chiudi:active{transform:scale(.9)}
.menu-marchio{
  justify-self:center;padding:6px 14px;border-radius:999px;
  border:1px solid rgba(246,241,228,.28);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,241,228,.75);
}
.menu-voci{display:flex;flex-direction:column;flex:1}
.menu-voci a{
  font-size:clamp(30px,9vw,44px);font-weight:700;letter-spacing:-.015em;
  line-height:1.22;color:#F6F1E4;transition:color .15s;
}
.menu-voci a.viva{color:var(--oro)}
@media (hover:hover){ .menu-voci a:hover{color:var(--oro)} }
.menu-minute{
  display:flex;flex-wrap:wrap;gap:9px 18px;margin-top:24px;padding-top:18px;
  border-top:1px solid rgba(246,241,228,.16);
}
.menu-minute a{font-size:12.5px;color:rgba(246,241,228,.55);font-weight:500}

/* ═══ impaginato ═══ */
#app{max-width:680px;margin:0 auto;padding:16px 16px 32px}
/* Poppins è ora il carattere di tutta l'app (vedi body più sopra):
   qui solo dimensione e peso dei titoli, non serve più ripetere il
   font-family. Meno tracking negativo di quanto serviva con Inter:
   Poppins è già compatto di suo, stretto com'era veniva schiacciato. */
h1{font-size:26px;font-weight:600;letter-spacing:-.005em;line-height:1.2}
h2{font-size:18px;font-weight:600;letter-spacing:0;margin-bottom:12px}
.sotto{color:var(--fumo);font-size:14.5px;margin-top:5px}

/* ═══ pannello d'apertura ═══ */
.vetro{
  position:relative; overflow:hidden;
  border-radius:var(--r-l); padding:18px 18px;
  background:linear-gradient(142deg,#6B8046 0%,#4B5A34 48%,#2E3A1F 100%);
  color:#F6F1E4; box-shadow:var(--om-2); margin-bottom:20px;
}
.vetro::after{
  content:''; position:absolute; right:-52px; top:-62px;
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle,rgba(233,174,51,.40),transparent 68%);
  pointer-events:none;
}
.vetro h1{color:#F6F1E4;font-size:22px}
.vetro p{color:rgba(246,241,228,.78);font-size:14.5px;margin-top:6px;max-width:34ch}
.numeroni{display:flex;gap:24px;margin-top:14px;position:relative}
.numeroni b{display:block;font-size:22px;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.numeroni span{font-size:11.5px;color:rgba(233,174,51,.85);text-transform:uppercase;letter-spacing:.07em}

/* ═══ ricerca e filtri ═══ */
.cerca{position:relative;margin-bottom:12px}
.cerca svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--tenue);pointer-events:none;
}
.cerca input{
  width:100%;padding:13px 14px 13px 42px;
  background:var(--carta);color:var(--inchiostro);border:1px solid var(--bordo);
  border-radius:var(--r-s);box-shadow:var(--om-1);
}
.cerca input:focus{outline:2px solid var(--verde-vivo);outline-offset:-1px}

.pasticche{
  display:flex;gap:8px;overflow-x:auto;padding:2px 16px 14px;margin:0 -16px;
  scrollbar-width:none;
}
.pasticche::-webkit-scrollbar{display:none}
.pastiglia{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:none;padding:8px 14px;border-radius:0;cursor:pointer;
  background:var(--carta);border:1px solid var(--bordo);
  font-size:13.5px;font-weight:500;color:var(--fumo);white-space:nowrap;
  transition:.15s;
}
.pastiglia.viva{
  background:linear-gradient(135deg,var(--verde-vivo),var(--verde));
  border-color:var(--verde);color:#F6F1E4;
  box-shadow:0 6px 14px -8px rgba(92,122,46,.6);
}

/* ═══ "Consigliato per te": una striscia di schede compatte, scorrevole ═══
   Più piccole delle schede della griglia (qui se ne vedono 2 e mezza
   alla volta, il "mezzo" invita a scorrere) e ognuna dice PERCHÉ è
   lì — vicinanza, reparto che si sceglie spesso, sconto, scadenza —
   così il consiglio si capisce invece di sembrare casuale. */
.consigliati{margin:4px 0 20px}
.consigliati h2{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-size:18px}
.consigliati h2 svg{width:19px;height:19px;color:var(--verde-vivo);flex:none}
.consigliati-lista{
  display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;
  padding:2px 16px 14px;margin:0 -16px;
  scroll-snap-type:x proximity;scroll-padding-left:16px;scrollbar-width:none;
}
.consigliati-lista::-webkit-scrollbar{display:none}
.mini-consigliato{
  flex:none;width:160px;scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--carta);border:1px solid var(--bordo);box-shadow:var(--om-1);
  color:inherit;text-decoration:none;
}
.mini-consigliato:active{transform:scale(.985)}
.mini-consigliato .foto{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  display:grid;place-items:center;background:var(--carta-2);
}
.mini-consigliato .foto img{width:100%;height:100%;object-fit:cover;display:block}
.mini-consigliato .foto .emo svg{width:34px;height:34px;color:var(--verde-vivo)}
.mini-consigliato .corpo-mini{padding:9px 10px 11px;display:flex;flex-direction:column;gap:3px;min-width:0}
.mini-consigliato .nome-mini{
  font-weight:600;font-size:14.5px;line-height:1.2;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mini-consigliato .negozio-mini{
  font-size:12px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mini-consigliato .prezzo-riga{display:flex;align-items:baseline;gap:6px;margin-top:3px}
.mini-consigliato .prezzo-riga .costo{font-size:16px}
.mini-consigliato .prezzo-riga .prima{font-size:12px}
.mini-consigliato .motivo{
  margin-top:5px;padding-top:6px;border-top:1px solid var(--bordo);
  font-size:11.5px;font-weight:600;color:var(--verde-vivo);line-height:1.25;
}

/* ═══ ricerca indirizzo in cima alla vetrina ═══
   Il primo contatto con la pagina, non un filtro fra tanti: la stessa
   idea delle app di consegna cibo, "dove sei" prima di "cosa c'è". */

/* ═══ categorie a icona, scorrevoli (stile "cucine" delle app di
   consegna cibo): un cerchio colorato invece di una pastiglia di
   testo, l'etichetta sotto invece che dentro — si riconosce il reparto
   a colpo d'occhio anche scorrendo in fretta. ═══ */
.categorie-scorrevoli{
  display:flex;gap:16px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px 6px;
  scrollbar-width:none;
}
.categorie-scorrevoli::-webkit-scrollbar{display:none}
.categoria-voce{
  display:flex;flex-direction:column;align-items:center;gap:7px;flex:none;
  width:68px;background:none;border:0;cursor:pointer;
  font-size:12px;font-weight:500;color:var(--fumo);text-align:center;line-height:1.25;
  text-decoration:none;font-family:inherit;
}
.categoria-icona{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:var(--carta-2);color:var(--verde-vivo);
  border:2px solid transparent;transition:.16s;
}
.categoria-icona svg{width:25px;height:25px}
.categoria-icona.foto{overflow:hidden;padding:0}
.categoria-icona.foto img{width:100%;height:100%;object-fit:cover;display:block}
.categoria-voce.viva{color:var(--inchiostro)}
.categoria-voce.viva .categoria-icona{
  background:var(--verde-vivo);color:#fff;border-color:var(--verde-vivo);
  box-shadow:0 6px 14px -8px rgba(92,122,46,.6);
}

/* ═══ schede prodotto ═══
   Griglia "a cascata" in stile Pinterest: le foto sono tutte allo
   stesso rapporto (vedi .arte più sotto), ma il corpo testo (titolo,
   prezzo, badge) può comunque variare leggermente in altezza — un grid
   a righe fisse lascerebbe vuoti sotto le schede più basse, mentre le
   colonne CSS lasciano ogni scheda scorrere subito sotto la precedente
   nella propria colonna, niente vuoti. Una sola colonna sui telefoni
   più stretti, dove far leggere prezzo e badge in metà larghezza li
   affollerebbe troppo. */
.griglia{display:grid;gap:15px}
@media (min-width:480px){
  .griglia{display:block;columns:2;column-gap:15px}
  .griglia > *{break-inside:avoid;margin-bottom:15px}
}

.scheda{
  display:block;position:relative;background:var(--carta);
  border:1px solid var(--bordo);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--om-1);
  animation:sali .42s cubic-bezier(.2,.7,.3,1) backwards;
  transition:transform .16s, box-shadow .16s;
}
.scheda:active{transform:scale(.985)}
@media (hover:hover){ .scheda:hover{box-shadow:var(--om-2);transform:translateY(-2px)} }
@keyframes sali{from{opacity:0;transform:translateY(14px)}}

.arte{
  /* Stesso rapporto per tutte le card della vetrina (con o senza
     foto), così le schede nella griglia a cascata restano allineate
     invece di avere ciascuna l'altezza dettata dalla propria foto. */
  position:relative;display:grid;place-items:center;
  background-color:var(--carta-2);aspect-ratio:4/3;
}
/* position:absolute, non un normale figlio del grid: con una foto
   molto verticale (es. scattata in piedi) height:100% da sola non
   bastava — in una riga di grid lasciata auto, il browser finiva per
   allargare .arte all'altezza naturale della foto invece di rispettare
   aspect-ratio, vanificando lo scopo del commento qui sopra. Assoluto
   com'è già .sopra qui accanto, la foto non contribuisce più alla
   dimensione del contenitore: resta sempre 4:3, ritagliata al centro. */
.arte-foto{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.emo{position:relative;color:rgba(255,255,255,.9)}
.arte .emo svg{width:58px;height:58px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}
.copertina .emo svg{width:92px;height:92px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.32))}

/* piccola foto rotonda in una riga di elenco (es. "Le tue offerte"):
   stesso trattamento di .arte quando manca la foto (sfondo colorato
   del reparto + icona), solo più piccola perché sta in una riga */
.foto-riga{
  width:52px;height:52px;flex:none;border-radius:0;overflow:hidden;
  display:grid;place-items:center;
  background-size:cover;background-position:center;
}
.foto-riga .emo svg{width:24px;height:24px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}

/* elenco negozi dello Scaffale: invece di una singola foto (che con un
   solo articolo lasciava due bande vuote ai lati), una fila di vere
   anteprime — una per ogni articolo del negozio, come nel carrello —
   scorrevole se sono tante. Si vede subito cosa c'è, non solo quanti. */
.scheda-negozio{
  display:block;margin-top:10px;
  text-decoration:none;color:inherit;
}
.fuga-articoli{
  display:flex;gap:8px;overflow-x:auto;margin-top:12px;
  padding-bottom:1px;scrollbar-width:none;
}
.fuga-articoli::-webkit-scrollbar{display:none}
.fuga-articoli .foto-riga{width:56px;height:56px;border-radius:0}
.fuga-piu{
  background:var(--carta-2) !important;color:var(--fumo);
  font-size:13px;font-weight:600;
}
.segno{display:inline-flex;align-items:center;gap:6px}
.segno svg{width:1.15em;height:1.15em;color:var(--fumo)}
.arte::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,transparent 32%,transparent 58%,rgba(0,0,0,.42) 100%);
}
.arte > .emo{position:relative;filter:drop-shadow(0 6px 14px rgba(0,0,0,.28))}

/* colori per reparto: rendono la vetrina viva anche senza fotografie.
   Mancavano 9 reparti su 16 (rosticceria, pastificio, salumeria,
   pizzeria, gelateria, caffetteria, sushi, latticini, dispensa): senza
   uno sfondo colorato, l'icona bianca sopra restava invisibile e la
   piastrella sembrava vuota invece di mostrare il reparto. */
/* background-image, non la scorciatoia "background": quest'ultima
   azzererebbe anche background-size/position/repeat impostati altrove
   (.arte, .copertina) su chi condivide questa classe — un elemento con
   una foto reale userebbe questo colore solo come sfondo dietro
   all'immagine, e la scorciatoia glielo impedirebbe. */
.a-gastronomia{background-image:linear-gradient(135deg,#F7A03C,#E2632C)}
.a-panetteria {background-image:linear-gradient(135deg,#F3C669,#D99433)}
.a-pescheria  {background-image:linear-gradient(135deg,#A8B579,#6E7A3E)}
.a-macelleria {background-image:linear-gradient(135deg,#E0736B,#A8383A)}
.a-ortofrutta {background-image:linear-gradient(135deg,#8FCB6B,#3C8F52)}
.a-pasticceria{background-image:linear-gradient(135deg,#F0A0B8,#C96387)}
.a-altro      {background-image:linear-gradient(135deg,#B8AEA0,#7E7264)}
.a-rosticceria{background-image:linear-gradient(135deg,#E8935A,#B8592A)}
.a-pastificio {background-image:linear-gradient(135deg,#EFDD8E,#C7A83F)}
.a-salumeria  {background-image:linear-gradient(135deg,#C77B6E,#8A4A3D)}
.a-pizzeria   {background-image:linear-gradient(135deg,#E85B49,#B23726)}
.a-gelateria  {background-image:linear-gradient(135deg,#F5B98A,#D67A42)}
.a-caffetteria{background-image:linear-gradient(135deg,#B98A5C,#7A5530)}
.a-sushi      {background-image:linear-gradient(135deg,#D4A24C,#9C6B24)}
.a-latticini  {background-image:linear-gradient(135deg,#F2E3A8,#D4B855)}
.a-dispensa   {background-image:linear-gradient(135deg,#A9C08C,#6E8A54)}

/* etichette sovrapposte all'immagine */
.sopra{position:absolute;z-index:2;display:flex;gap:6px;align-items:center}
.sopra.alto-sx{top:11px;left:11px}
.sopra.alto-dx{top:11px;right:11px}
.sopra.basso-sx{bottom:11px;left:11px}
.sopra.basso-dx{bottom:11px;right:11px}

.cambia-foto{
  cursor:pointer;background:rgba(0,0,0,.5);color:#fff;border:0;
  backdrop-filter:blur(10px);font-size:12.5px;font-weight:500;
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:999px;
}
.cambia-foto svg{width:14px;height:14px}

.bolla{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;
  font-size:12px;font-weight:600;letter-spacing:-.01em;
  /* Sfondo sempre chiaro (sopra una foto, non sopra la pagina): il
     testo deve restare sempre scuro, non seguire --inchiostro, che
     in tema scuro diventa quasi bianco — testo quasi invisibile su
     sfondo quasi bianco. */
  background:rgba(255,255,255,.94);color:#1C1812;
  backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.bolla svg{width:13px;height:13px}
.bolla.urge{background:var(--rosso);color:#fff}
.bolla.taglio{background:var(--oro);color:#22190A;font-size:13px;font-weight:700}
.bolla.negozio{background:rgba(0,0,0,.42);color:#fff;backdrop-filter:blur(10px)}
/* lo sconto che cresce da solo è il punto della funzione: un battito
   leggero per farlo notare, non per allarmare come .urge (rosso). */
.bolla.cresce{background:var(--verde-vivo);color:#F6F1E4;animation:battito 1.8s ease-in-out infinite}
@keyframes battito{50%{opacity:.72}}
@media (prefers-reduced-motion: reduce){ .bolla.cresce{animation:none} }

.cuore{
  position:relative;
  width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;
  background:rgba(0,0,0,.34);backdrop-filter:blur(10px);
  transition:.18s;
}
/* stessa zona di tocco allargata di .tondo qui sopra, vedi il commento lì. */
.cuore::before{content:'';position:absolute;inset:-5px}
.cuore svg{width:18px;height:18px}
.cuore.acceso{background:#fff;color:#E23E57}
.cuore.acceso svg{fill:#E23E57}
.cuore:active{transform:scale(.86)}
/* variante per quando il cuore non sta sopra una foto (es. accanto al
   titolo, non più in overlay): il cerchio scuro sfocato era pensato per
   restare leggibile su una foto qualsiasi, su uno sfondo chiaro diventa
   solo una macchia fuori posto. */
.cuore.chiaro{width:auto;height:auto;background:none;backdrop-filter:none;color:var(--tenue)}
.cuore.chiaro svg{width:21px;height:21px}
.cuore.chiaro.acceso{background:none;color:#E23E57}

.esaurita .arte{filter:grayscale(.85) brightness(.72)}
.velo-esaurito{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  font-size:14px;font-weight:600;color:#fff;letter-spacing:.02em;
}

/* corpo della scheda */
.corpo{padding:13px 15px 15px}
.nome{font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.luogo{
  display:flex;align-items:center;gap:5px;
  color:var(--fumo);font-size:13.5px;margin-top:4px;
}
.luogo svg{width:14px;height:14px;flex:none}

.fila{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:11px}
/* Testata di una prenotazione: il testo ha una base minima, e le
   etichette vanno a capo sotto invece di sovrapporsi quando non c'è posto. */
.fila.testata{align-items:flex-start}
.testo-testata{flex:1 1 150px;min-width:0}
.testo-testata .luogo{align-items:flex-start}
.testo-testata .luogo svg{margin-top:2px}
.gruppo-stato{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.costo{font-size:22px;font-weight:700;letter-spacing:-.015em;color:var(--verde-vivo)}
.prima{color:var(--tenue);text-decoration:line-through;font-size:14px}
.destra{margin-left:auto}

.gettone{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 9px;border-radius:0;font-size:12.5px;font-weight:500;
  background:var(--carta-2);color:var(--fumo);
}
.gettone svg{width:13px;height:13px}
.gettone.caldo{background:var(--arancio-tenue);color:var(--arancio-testo)}
.gettone.fresco{background:rgba(92,122,46,.10);color:var(--verde-vivo)}
.gettone.msg{background:rgba(178,59,16,.12);color:var(--rosso)}

/* barra di quante ne restano */
.scorta{height:4px;border-radius:99px;background:var(--bordo);margin-top:12px;overflow:hidden}
.scorta i{display:block;height:100%;border-radius:99px;background:var(--verde-vivo);transition:width .5s}
.scorta.poche i{background:var(--arancio)}

/* ═══ pulsanti ═══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;border:0;border-radius:var(--r-s);cursor:pointer;
  font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  background:linear-gradient(135deg,var(--verde-vivo),var(--verde));color:#F6F1E4;
  box-shadow:0 10px 24px -12px rgba(92,122,46,.55);
  transition:filter .14s,transform .14s,box-shadow .14s;
}
.btn:hover{filter:brightness(1.12)}
@media (hover:hover){ .btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(92,122,46,.6)} }
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
/* senza questa, display:inline-flex qui sopra vince sull'attributo
   hidden (stessa causa già vista con .tondo e .menu-tendina) */
.btn[hidden]{display:none}
.btn.pieno{width:100%}
.btn.brace{
  background:linear-gradient(135deg,#F0C15C,#C08A1E);color:#22190A;
  box-shadow:0 10px 24px -12px rgba(192,138,30,.55);
}
.btn.pericoloso{
  background:var(--rosso);
  box-shadow:0 10px 24px -12px rgba(178,59,16,.55);
}
.btn.quieto{background:var(--carta);color:var(--inchiostro);border:1px solid var(--bordo);box-shadow:none}
.btn.mini{padding:9px 15px;font-size:14px;border-radius:var(--r-s)}

/* ═══ riquadri e moduli ═══ */
.pannello{
  background:var(--carta);border:1px solid var(--bordo);
  border-radius:var(--r-m);padding:18px;box-shadow:var(--om-1);
}
.pannello + .pannello{margin-top:14px}

/* riga di statistiche (es. dashboard del negozio): tre valori affiancati
   in una card chiara, con un separatore sottile fra loro invece del
   vecchio pannello scuro a piena larghezza. */
.riga-stat{display:flex;text-align:center}
.riga-stat > div{flex:1;padding:0 6px}
.riga-stat > div + div{border-left:1px solid var(--bordo)}
.riga-stat b{display:block;font-size:23px;font-weight:700;letter-spacing:-.01em;color:var(--verde-vivo)}
.riga-stat span{display:block;font-size:12px;color:var(--fumo);margin-top:3px}

/* la mappa incorporata tocca i bordi del pannello (come la copertina
   di un'offerta), invece di restare rinchiusa nel suo spazio interno */
.mappa-riquadro{margin:0 -18px;overflow:hidden}
.mappa-embed{display:block;width:100%;height:180px;border:0}

/* Vista mappa della vetrina (più negozi insieme, via Leaflet): vedi
   disegnaMappaVetrina() in app.js. */
.mappa-vetrina{
  height:min(60vh,460px);border-radius:var(--r-m);overflow:hidden;
  border:1px solid var(--bordo);background:var(--carta-2);margin-bottom:16px;
}
.mappa-vetrina.anteprima{height:240px}
.mappa-vetrina .leaflet-popup-content{font-family:inherit;font-size:14px;line-height:1.5}
.mappa-vetrina .leaflet-popup-content a{color:var(--verde-vivo);font-weight:500}

.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--fumo)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:12px 14px;background:var(--sfondo);
  border:1px solid var(--bordo);border-radius:0;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:2px solid var(--verde-vivo);outline-offset:-1px;border-color:transparent;
}
/* .cerca (l'indirizzo di consegna, qui dentro un .campo nel passo "Come
   lo vuoi") e .campo input hanno la stessa specificità: senza questa,
   chi vince è solo questione di quale regola sta più in basso nel file,
   e il padding che lascia spazio all'icona sparisce — testo e icona si
   sovrappongono. */
.campo .cerca input{padding-left:42px}
.duetto{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.aiuto{font-size:12.5px;color:var(--tenue);margin-top:5px}

/* ── motto accanto al marchio ────────────────── */
.blocco-nome{display:flex;flex-direction:column;line-height:1.05}
.motto{
  font-size:10px;font-weight:600;letter-spacing:.045em;
  color:var(--fumo);margin-top:2px;white-space:nowrap;
}
/* La regola che lo nasconde sotto i 440px vive vicino a #testa più sopra
   (insieme alle altre strette necessarie per non far traboccare
   l'intestazione), non qui: così restano tutte in un solo posto. */

/* ── pagina di benvenuto ─────────────────────── */
/* la foto sta per conto suo, a piena larghezza: il testo va sotto,
   su sfondo pieno, così resta leggibile invece di lottare con la foto */
.apertura{
  position:relative;overflow:hidden;
  margin:-16px -16px 0;
  /* il primo stop riprende il tono del tavolo in fondo alla foto, così lo
     sfondo sotto continua la foto invece di tagliarla di netto */
  background:linear-gradient(160deg,#D7CDBB 0%,#6B8046 12%,#4B5A34 46%,#2E3A1F 100%);
  color:var(--sfondo);
}
.apertura-foto-piena{
  position:relative;
  width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--carta-2);
}
/* la foto è più alta del suo riquadro apposta: lo scorrimento della
   pagina (vedi avviaParallaxEroFoto in app.js) la trasla dentro questo
   margine, un effetto legato allo scroll invece che a uno zoom fisso
   — quello ingrandiva la foto fino a farla sembrare tagliata. */
.apertura-foto-piena img{
  position:absolute;top:0;left:0;
  width:100%;height:calc(100% + 60px);object-fit:cover;object-position:center 100%;display:block;
  animation:sfondoEntra .8s ease backwards;
}
@keyframes sfondoEntra{ from{opacity:0} }
/* il titolo vive sopra la foto, non sopra di essa: sfondo color
   panna ripreso dalla parete di sfondo della foto stessa, non quello
   della pagina — altrimenti in tema scuro diventa un riquadro nero
   che stona con la foto chiara sotto. */
.titolo-foto{
  margin:-16px -16px 0;padding:18px 22px;background:#DFCCAC;
  text-align:center;color:#3A4A22;
  font-family:'Caveat','Poppins',cursive;
  font-weight:600;font-size:28px;line-height:1.2;
}
.apertura-testo{position:relative;padding:28px 22px 40px}

/* ═══ pagine di presentazione (chi siamo, soluzione, partner, contatti) ═══ */
.apertura-corta{padding:14px 0 8px}
.apertura-corta h1{margin-top:10px;font-size:24px}

/* Chi siamo: qui il titolo e il messaggio sono già nella foto stessa,
   quindi la si mostra intera, a piena larghezza, senza testo separato
   sopra o sotto — niente ritaglio, l'immagine è pensata per essere vista
   così com'è. */
/* aspect-ratio riserva subito lo spazio della foto (le sue proporzioni
   reali: 1086×1448) invece di restare alta zero finché non finisce di
   scaricare — senza, la prima cosa che si vede aprendo l'app è la
   sezione sotto, come se mancasse qualcosa, con la foto che poi salta
   dentro a scaricamento finito. Il colore di sfondo è lo stesso verde
   da cui parte il degradé di .apertura appena sotto, così il vuoto
   davanti alla foto non è bianco ma continua lo sfondo. */
.storia-foto{margin:-16px -16px 0;overflow:hidden;aspect-ratio:1086/1448;background:#4B5A34}
/* Prima cosa che si vede aprendo l'app: parte da sola al caricamento,
   non serve scorrere per vederla (a differenza di .rivela/.a-scalare,
   pensate per contenuti più sotto nella pagina). Non solo dissolvenza:
   un'apertura a iride, come l'otturatore di una fotocamera — in tema
   con un'app che si basa proprio sullo scattare una foto — insieme a
   una leggera messa a fuoco, non una semplice sfocatura che sparisce. */
@keyframes eroEntra{
  0%{clip-path:circle(0% at 50% 38%);filter:blur(14px);transform:scale(1.12)}
  100%{clip-path:circle(150% at 50% 38%);filter:blur(0);transform:scale(1)}
}
.storia-foto img{width:100%;display:block;animation:eroEntra .8s cubic-bezier(.19,1,.22,1) both}
.apertura h1{
  font-size:27px;font-weight:600;letter-spacing:-.005em;line-height:1.18;text-wrap:balance;
  color:#F6F1E4;margin:14px 0 16px;
}
.apertura p{color:rgba(246,241,228,.76);font-size:15px;line-height:1.6;max-width:38ch}
.apertura .minuta{font-size:12.5px;color:rgba(246,241,228,.5);margin-top:14px}

.bottoniera{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.bottoniera .btn{width:100%}
.bottoniera .btn.quieto{
  background:rgba(255,255,255,.09);color:#F6F1E4;border-color:rgba(255,255,255,.2);
}
.bottoniera .btn.grosso{font-size:16px;padding:16px 22px;gap:10px}

/* fasce che si rivelano scorrendo */
.fascia{margin:0 -16px;padding:46px 16px}
.fascia.scura{background:var(--carta-2)}
.rivela{opacity:0;transform:translateY(46px) scale(.92);filter:blur(18px);
        transition:opacity .5s ease, transform .5s cubic-bezier(.16,.8,.24,1), filter .5s ease}
.rivela.visto{opacity:1;transform:none;filter:blur(0)}
.centrata{text-align:center}

/* richiamo: foto piena larghezza con una scheda di vetro smerigliato
   sopra, invece del testo accanto o sotto — un momento diverso dal
   solito "foto+testo" per spezzare il ritmo della pagina. */
.richiamo{display:block;position:relative;margin:0 -16px;overflow:hidden}
.richiamo-foto{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.richiamo-vetro{
  position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);
  background:rgba(15,18,10,.5);backdrop-filter:blur(18px) saturate(1.4);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-l);
  padding:24px 22px;color:#fff;box-shadow:var(--om-2);
}
.richiamo-vetro .occhiello{color:rgba(255,255,255,.8)}
.richiamo-vetro h2{color:#fff;margin:12px 0 18px;font-size:20px;line-height:1.28}
.richiamo-riga{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-top:1px solid rgba(255,255,255,.22);padding-top:14px;
  font-size:14px;font-weight:500;color:rgba(255,255,255,.92);
}
@media (min-width:560px){
  .richiamo-foto{aspect-ratio:21/9}
}

/* fettine dei reparti sotto il titolo */
.fettine{
  margin:18px 0 4px;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);
}
.fettine-pista{
  display:flex;flex-wrap:nowrap;gap:7px;width:max-content;
  animation:scorriFettine 16s linear infinite;
}
.fettine-pista:hover{animation-play-state:paused}
.fettine span{
  flex:none;white-space:nowrap;
  font-size:12px;font-weight:500;padding:5px 11px;border-radius:0;
  background:rgba(255,255,255,.1);border:1px solid rgba(233,174,51,.28);
  color:rgba(246,241,228,.9);
}
@keyframes scorriFettine{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .fettine-pista{animation:none}
}

/* riga titolo + collegamento */
.fila-titolo{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.fila-titolo h2{margin:0}

/* sezione green: emozione + numeri, su una vera foto invece che solo
   un gradiente piatto — stesso trattamento "testo su foto scura" delle
   carte editoriali (titolo bianco leggibile, foto che resta protagonista). */
.verde-fascia{
  background:
    linear-gradient(158deg,rgba(20,58,38,.90) 0%,rgba(14,42,26,.90) 55%,rgba(6,24,11,.94) 100%),
    url('img/campo.jpg') center/cover no-repeat;
  color:var(--sfondo);
}
.verde-fascia h2{color:#F3EFE4;margin:8px 0 12px;font-size:21px;letter-spacing:-.01em}
.green-testo{
  color:rgba(243,239,228,.86);font-size:15.5px;line-height:1.7;
  max-width:56ch;margin-bottom:26px;
}
.verde-fascia .numeroni.grandi b{color:#C4C570}
.verde-fascia .numeroni.grandi span{color:rgba(243,239,228,.72)}
.verde-fascia .fonte{color:rgba(243,239,228,.5)}

.passi{display:grid;gap:14px;margin-top:22px}
.passo-carta{
  position:relative;background:var(--carta);border:1px solid var(--bordo);
  border-radius:var(--r-m);padding:22px 20px 20px;box-shadow:var(--om-1);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.passo-carta:active{transform:scale(.985)}
@media (hover:hover){
  .passo-carta:hover{box-shadow:var(--om-3);transform:translateY(-4px)}
}
.passo-carta .cifra{
  display:grid;place-items:center;width:34px;height:34px;border-radius:0;
  /* crema e non oro: col verde più chiaro di prima l'oro non ha più
     abbastanza contrasto per restare leggibile qui */
  background:var(--verde);color:#F6F1E4;font-size:17px;font-weight:700;
  margin-bottom:12px;
}
.passo-carta h3{font-size:18px;font-weight:600;letter-spacing:-.006em;margin-bottom:6px}
.passo-carta p{color:var(--fumo);font-size:14.5px}

/* le tre carte "una soluzione" hanno una foto in testa invece del solo
   pallino colorato: tolgo il padding della carta base e lo rimetto solo
   sotto la foto */
/* foto a tutta scheda con il testo sopra, invece di foto e testo
   impilati in due zone separate — lo stile "editoriale" dei
   riferimenti condivisi: la foto resta protagonista, il testo ci
   galleggia sopra con un velo scuro solo dove serve per restare
   leggibile. */
.passo-carta.soluzione-carta{position:relative;padding:0;overflow:hidden}
/* Più alta di prima (era 3/4): la scritta col titolo dentro la foto
   resta protagonista e il velo scuro sotto — necessario perché il testo
   vero non si sovrapponga a quello nella foto — copre una fetta più
   piccola della carta invece di quasi metà. */
.soluzione-foto{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
/* quando la card ha più di una foto, scorrono di fianco invece di
   restare una sola immagine fissa (vedi .tfoto-punti per i puntini,
   condivisi con il carosello delle tessere prodotto). */
.soluzione-foto-carosello{
  display:flex;aspect-ratio:4/5;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.soluzione-foto-carosello::-webkit-scrollbar{display:none}
.soluzione-foto-carosello .soluzione-foto{flex:none;width:100%;height:100%;scroll-snap-align:start}
/* Le foto di queste carte hanno già un titolo e una didascalia stampati
   dentro l'immagine: un velo leggero su tutta la carta lasciava quel
   testo a mezza trasparenza sotto quello vero (in HTML), illeggibili
   insieme. Uno sfondo pieno solo dietro il testo HTML copre del tutto
   quello dentro la foto, invece di sovrapporcisi. */
.soluzione-corpo{
  position:relative;z-index:1;
  padding:20px 18px 22px;border-radius:0;
  /* La transizione resta rapida (non un velo grigio a metà strada, che
     lascerebbe la scritta della foto leggibile a mezza trasparenza
     sotto il testo vero): a fare spazio alla foto è l'altezza della
     carta qui sotto, non un nero più leggero. */
  background:rgba(27,38,19,.99);
}
/* Il testo sta SOTTO la foto, non più sopra: lo sfondo scuro non copre
   più l'immagine (e la scritta stampata nella foto resta visibile).
   Il passaggio foto → fascia scura è sfumato: una breve dissolvenza
   sul bordo basso della foto, senza coprirne il contenuto. */
.soluzione-corpo::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;height:70px;pointer-events:none;
  background:linear-gradient(180deg,rgba(27,38,19,0) 0%,rgba(27,38,19,.55) 55%,rgba(27,38,19,.99) 100%);
}
.soluzione-corpo .cifra{margin-top:0}
.soluzione-corpo h3{color:#fff}
.soluzione-corpo p{color:rgba(255,255,255,.82)}
.soluzione-corpo .collega{color:#fff}
.soluzione-corpo .collega:hover{color:#fff}

.numeroni.grandi{flex-direction:column;gap:22px}
.numeroni.grandi b{font-size:31px;color:var(--verde)}
.numeroni.grandi span{
  color:var(--fumo);font-size:13.5px;text-transform:none;letter-spacing:0;
}
.fonte{font-size:11.5px;color:var(--tenue);margin-top:24px}

.duetto-largo{display:grid;gap:20px}
.figura{width:100%;border-radius:var(--r-l);display:block;box-shadow:var(--om-2);will-change:transform,filter;transition:transform .1s linear,filter .1s linear}
.duetto-largo h2{margin:10px 0 8px}
.duetto-largo p{color:var(--fumo);font-size:14.5px;margin-bottom:18px}

.invito{
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--r-l);
  padding:28px 24px;text-align:center;box-shadow:var(--om-1);
}
.invito p{color:var(--fumo);font-size:14.5px;margin:10px auto 20px;max-width:46ch}

.chiusura{
  margin:0 -16px;padding:0;border-top:1px solid var(--bordo);
}
.social-invito{
  text-align:center;padding:40px 22px 34px;
  background:linear-gradient(160deg,#4B5A34 0%,#2E3A1F 100%);color:var(--sfondo);
}
.social-invito h2{color:#F6F1E4;margin-bottom:8px}
.social-invito p{
  color:rgba(246,241,228,.72);font-size:14px;max-width:44ch;margin:0 auto 22px;
}
.social{display:flex;justify-content:center;gap:14px}
.social a{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(233,174,51,.3);
  color:#F6F1E4;transition:.18s;
}
.social a:active{transform:scale(.9)}
@media (hover:hover){ .social a:hover{background:var(--oro);color:#4B5A34;border-color:var(--oro)} }
.social-svg{width:21px;height:21px}

.chiusura-righe{
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:center;
  padding:22px;font-size:12.5px;color:var(--tenue);
}
.chiusura-righe a{color:var(--verde-vivo);font-weight:600}

/* banner cookie: informa, non blocca */
#cookie{
  position:fixed;left:50%;bottom:calc(var(--barra-h) + 12px);
  transform:translateX(-50%);z-index:70;width:min(94vw,560px);
  background:var(--carta);border:1px solid var(--bordo);border-radius:var(--r-m);
  box-shadow:var(--om-2);animation:sbuca .35s cubic-bezier(.2,.9,.3,1.2);
}
.cookie-corpo{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 18px;
}
.cookie-corpo p{flex:1;min-width:200px;font-size:13px;color:var(--fumo);line-height:1.5;margin:0}
.cookie-corpo a{color:var(--verde-vivo);font-weight:600}
.cookie-corpo .btn{flex:none}

@media (min-width:760px){
  .apertura-foto-piena{aspect-ratio:4/3}
  .apertura-testo{padding:40px}
  .apertura h1{font-size:30px}
  .bottoniera .btn{width:auto}
  .passi{grid-template-columns:repeat(3,1fr)}
  .numeroni.grandi{flex-direction:row;justify-content:space-between}
  .duetto-largo{grid-template-columns:1fr 1fr;align-items:center}
}

/* i musi nel pannello d'apertura: si affacciano uno dopo l'altro */
.zampe{position:relative;display:flex;margin-bottom:16px}
.zampe img{
  width:52px;height:52px;object-fit:cover;border-radius:50%;
  border:2.5px solid rgba(233,174,51,.65);
  box-shadow:0 6px 16px -6px rgba(0,0,0,.7);
  animation:affaccia .6s cubic-bezier(.2,.8,.3,1.2) backwards;
}
.zampe img + img{margin-left:-15px}
.zampe img:nth-child(1){animation-delay:.05s;z-index:4}
.zampe img:nth-child(2){animation-delay:.14s;z-index:3}
.zampe img:nth-child(3){animation-delay:.23s;z-index:2}
.zampe img:nth-child(4){animation-delay:.32s;z-index:1}
@keyframes affaccia{from{opacity:0;transform:translateX(-16px) scale(.7)}}

/* il mosaico degli animali nella presentazione */
.mosaico{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.mosaico img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:var(--r-s);box-shadow:var(--om-1);filter:blur(16px);
  transition:transform .35s cubic-bezier(.2,.8,.3,1), filter .45s ease;
}
.mosaico img:nth-child(1){border-top-left-radius:var(--r-l)}
.mosaico img:nth-child(2){border-top-right-radius:var(--r-l);transform:translateY(14px)}
.mosaico img:nth-child(3){border-bottom-left-radius:var(--r-l)}
.mosaico img:nth-child(4){border-bottom-right-radius:var(--r-l);transform:translateY(14px)}
.visto .mosaico img{transform:none;filter:blur(0)}
@media (hover:hover){ .mosaico img:hover{transform:scale(1.04)} }

/* entrata a scalare: ogni figlio con il suo ritardo */
.a-scalare > *{
  opacity:0;transform:translateY(42px) scale(.93);filter:blur(16px);
  transition:opacity .45s ease var(--ritardo,0ms),
             transform .45s cubic-bezier(.16,.8,.24,1) var(--ritardo,0ms),
             filter .45s ease var(--ritardo,0ms);
}
.a-scalare > *.visto{opacity:1;transform:none;filter:blur(0)}

/* ── due vetrine: persone e animali ──────────── */
.scelta-vetrina{
  display:flex;gap:5px;padding:5px;margin-bottom:16px;
  background:var(--carta);border:1px solid var(--bordo);border-radius:0;
  box-shadow:var(--om-1);
}
.scelta-vetrina button{
  flex:1;padding:12px 8px;border:0;border-radius:0;cursor:pointer;
  background:transparent;color:var(--fumo);
  font-size:15px;font-weight:600;letter-spacing:-.01em;transition:.16s;
}
.scelta-vetrina button.viva{background:var(--verde);color:#F6F1E4}
.scelta-vetrina button:active{transform:scale(.98)}

/* ── scelta fra più foto candidate (riconoscimento) ──────────── */
.scelta-foto{display:flex;gap:10px}
.scelta-foto-voce{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px;border:2px solid var(--bordo);border-radius:var(--r-s);
  background:var(--carta);cursor:pointer;transition:.16s;
}
.scelta-foto-voce img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:0}
.scelta-foto-voce span{font-size:13px;color:var(--fumo);text-align:center}
.scelta-foto-voce.viva{border-color:var(--verde)}
.scelta-foto-voce:active{transform:scale(.98)}

.vetro.verde{background:linear-gradient(142deg,#1C4A32 0%,#123421 52%,#08200F 100%)}

.occhiello.scuro{
  color:var(--verde-vivo);margin-bottom:14px;
}

.pannello.avvertenza{
  margin-top:14px;background:var(--arancio-tenue);border-color:#E6D3A8;
  font-size:14px;line-height:1.6;color:var(--inchiostro);
}
.spunta{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.spunta input{width:24px;height:24px;flex:none;margin-top:1px;accent-color:var(--verde)}
.spunta span{flex:1}

/* ── punti fedeltà ──────────────────────────── */
.premio{
  margin:4px 0 14px;padding:14px 16px;border-radius:var(--r-m);
  background:var(--carta-2);border:1px solid var(--bordo);
}
.premio-riga{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:14px;color:var(--fumo);
}
.premio-riga svg{width:16px;height:16px;color:var(--oro);vertical-align:-3px;margin-right:4px}
.premio-riga b{color:var(--inchiostro);font-weight:600}
.premio-riga.totale{
  margin-top:10px;padding-top:10px;border-top:1px solid var(--bordo);
  font-size:15px;color:var(--inchiostro);
}
.premio-riga.totale b{color:var(--verde-vivo);font-size:18px}
.premio-usa{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  margin-top:12px;padding-top:12px;border-top:1px solid var(--bordo);
}
.premio-usa input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--verde)}

/* recensioni: stelle da scegliere (form) e stelle da mostrare (elenco) */
.stelle-scelta{display:flex;gap:4px}
.stella-b{background:none;border:0;padding:2px;cursor:pointer;color:var(--bordo)}
.stella-b svg{width:26px;height:26px}
.stella-b.piena{color:var(--oro)}
.stella-b.piena svg{fill:currentColor}
.riga-recensione{padding:12px 0;border-top:1px solid var(--bordo)}
.riga-recensione .fila{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stelle-mostra{color:var(--oro);letter-spacing:1px;font-size:14px;white-space:nowrap}
#recTesto{
  width:100%;padding:10px 12px;border:1px solid var(--bordo);border-radius:0;
  background:var(--carta);color:inherit;font:inherit;resize:vertical;
}
.premio-usa span{font-size:14px}
.premio-usa small{display:block;color:var(--fumo);font-size:12.5px;margin-top:2px}

.punti-saldo{display:block;padding:20px}
.punti-testata{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.punti-cifra{text-align:center;flex:none}
.punti-cifra b{
  display:block;font-size:34px;font-weight:700;letter-spacing:-.015em;
  color:var(--verde);line-height:1;
}
.punti-cifra span{font-size:12px;color:var(--fumo);text-transform:uppercase;letter-spacing:.06em}
.punti-saldo p{flex:1;font-size:13.5px;color:var(--fumo);margin:0}
.punti-saldo b{color:var(--inchiostro)}

/* livello: una piccola progressione che dà un motivo per tornare */
.livello-riga{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.livello-nome{display:flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px}
.livello-nome .puntino{width:9px;height:9px;border-radius:50%;background:var(--oro)}
.livello-resto{font-size:12.5px;color:var(--fumo)}
.livello-barra{height:9px;border-radius:99px;background:var(--carta-2);overflow:hidden;border:1px solid var(--bordo)}
.livello-barra i{
  display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--verde-vivo),var(--oro));
  transition:width .6s cubic-bezier(.2,.8,.3,1);
}

/* ── biglietto di ritiro: QR + codice ───────── */
.biglietto{
  margin-top:14px;padding:16px;border-radius:var(--r-m);text-align:center;
  background:#fff;border:2px dashed var(--bordo);
}
.qr{width:min(200px,60%);margin:0 auto 12px}
.qr svg{width:100%;height:auto;display:block;border-radius:0}

/* ── chat di una prenotazione (cliente ↔ negozio) ─── */
.chat-messaggi{
  display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;overflow-x:hidden;
  padding:2px 2px 4px;margin-bottom:12px;
}
.chat-bolla{
  align-self:flex-start;max-width:82%;
  background:var(--carta-2);border-radius:var(--r-m) var(--r-m) var(--r-m) 4px;
  padding:8px 12px;
}
.chat-bolla.mia{
  align-self:flex-end;border-radius:var(--r-m) var(--r-m) 4px var(--r-m);
  background:linear-gradient(135deg,var(--verde-vivo),var(--verde));color:#F6F1E4;
}
.chat-bolla p{margin:0;font-size:14.5px;line-height:1.4;white-space:pre-wrap;word-break:break-word}
.chat-bolla .chat-ora{display:block;margin-top:4px;font-size:11px;opacity:.7}
.chat-riga{display:flex;gap:8px}
.chat-riga .btn{flex:none}
.chat-riga input{
  flex:1;min-width:0;padding:12px 14px;
  background:var(--carta);border:1px solid var(--bordo);
  border-radius:var(--r-s);box-shadow:var(--om-1);
}
.chat-riga input:focus{outline:2px solid var(--verde-vivo);outline-offset:-1px}

/* ── scanner del negozio ────────────────────── */
.scanner{
  margin-top:14px;margin-bottom:12px;border-radius:var(--r-m);overflow:hidden;
  background:#000;aspect-ratio:4/3;position:relative;
}
.scanner video{width:100%;height:100%;object-fit:cover;display:block}
/* Schermo intero mentre la fotocamera è aperta (solo il riconoscimento
   prodotto, vedi avviaFotocameraUnificata): il riquadro piccolo dentro
   il modulo rendeva difficile inquadrare bene un'etichetta da vicino. */
.scanner.schermo-intero{
  position:fixed;inset:0;z-index:300;margin:0;
  border-radius:0;aspect-ratio:auto;width:100vw;height:100vh;
}
/* A schermo intero i pulsanti devono restare sotto la tacca/isola e
   sopra l'indicatore home, non incollati al vero bordo dello schermo. */
.scanner.schermo-intero .scanner-chiudi{ top:calc(14px + env(safe-area-inset-top)) }
.scanner.schermo-intero .scanner-etichetta{ top:calc(14px + env(safe-area-inset-top)) }
.scanner.schermo-intero .fotocamera-scatta{ bottom:calc(30px + env(safe-area-inset-bottom)) }
body.blocca-scorrimento{overflow:hidden}
/* Angoli sottili e bianchi, non colorati: è il linguaggio delle vere UI
   di scansione (Google Lens, lettori di documenti, POS) — un frame
   quasi invisibile che lascia parlare l'inquadratura, non un badge
   decorativo sopra. Un solo pseudo-elemento, 4 gradienti agli angoli. */
.scanner::after{
  content:'';position:absolute;inset:20% 13% 15%;border-radius:20px;
  box-shadow:0 0 0 100vmax rgba(0,0,0,.4);
  background-repeat:no-repeat;background-size:20px 20px;
  background-position:top left,top left,top right,top right,
    bottom left,bottom left,bottom right,bottom right;
  background-image:
    linear-gradient(to right, #fff 2px, transparent 2px),
    linear-gradient(to bottom, #fff 2px, transparent 2px),
    linear-gradient(to left, #fff 2px, transparent 2px),
    linear-gradient(to bottom, #fff 2px, transparent 2px),
    linear-gradient(to right, #fff 2px, transparent 2px),
    linear-gradient(to top, #fff 2px, transparent 2px),
    linear-gradient(to left, #fff 2px, transparent 2px),
    linear-gradient(to top, #fff 2px, transparent 2px);
  opacity:.92;
}
/* Linea di scansione sottile: l'unico elemento animato, per non
   affollare l'inquadratura di segnali diversi. */
.scanner::before{
  content:'';position:absolute;left:13%;right:13%;height:1px;z-index:1;
  background:linear-gradient(to right, transparent, rgba(255,255,255,.95) 50%, transparent);
  box-shadow:0 0 6px 1px rgba(255,255,255,.45);
  animation:mirino-scansione 3.2s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes mirino-scansione{
  0%,100%{ top:22% } 50%{ top:calc(100% - 17%) }
}
.scanner-etichetta{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  padding:5px 12px;border-radius:99px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:10.5px;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;
}
.scanner-etichetta::before{
  content:'';width:5px;height:5px;border-radius:50%;background:#fff;
  animation:mirino-battito 1.8s ease-in-out infinite;
}
@keyframes mirino-battito{
  0%,100%{ opacity:1 } 50%{ opacity:.3 }
}
.scanner-chiudi{
  position:absolute;top:10px;right:10px;z-index:2;
  width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(6px);
  display:grid;place-items:center;
}
.scanner-chiudi::after{content:'';position:absolute;inset:-5px}
.scanner-chiudi svg{width:17px;height:17px}
.scanner-chiudi:active{transform:scale(.92)}
/* Otturatore essenziale: anello e disco separati, come nelle vere app
   fotocamera, non un bottone pieno con una cornice colorata sopra. Un
   anello bianco da solo sparisce su sfondi chiari (es. un tavolo/
   pavimento chiaro inquadrato dietro il prodotto): l'ombra scura intorno
   gli dà un bordo leggibile su qualunque sfondo, chiaro o scuro. */
.fotocamera-scatta{
  position:absolute;left:50%;bottom:16px;z-index:2;
  width:52px;height:52px;border-radius:50%;cursor:pointer;
  background:transparent;border:3px solid #fff;
  box-shadow:0 0 0 1.5px rgba(0,0,0,.35),0 2px 10px -2px rgba(0,0,0,.6);
  transform:translateX(-50%);
}
.fotocamera-scatta::after{
  content:'';position:absolute;inset:4px;border-radius:50%;background:#fff;
}
.fotocamera-scatta:active{transform:translateX(-50%) scale(.92)}

/* ── profilo ────────────────────────────────── */
.ritratto{
  display:grid;place-items:center;flex:none;
  width:36px;height:36px;border-radius:50%;
  /* crema e non oro: su uno sfondo salvia più chiaro di prima, le
     iniziali in oro non avrebbero più abbastanza contrasto per essere
     lette bene (vedi lo stesso ragionamento su .passo-carta .cifra) */
  background:linear-gradient(148deg,#6B8046,#2E3A1F);color:#F6F1E4;
  font-size:15px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 3px 10px -3px rgba(10,18,41,.5);
}
.ritratto.grande{width:66px;height:66px;font-size:26px;border-radius:22px}
/* Arancio per gli account negozio, verde per i clienti: lo stesso
   colpo d'occhio usato altrove nell'app (badge "Account negozio",
   schermata di accesso) si vede anche nell'iniziale del profilo. */
.ritratto.negozio{background:linear-gradient(148deg,#8A5A1E,#2A1806)}

.capo-profilo{display:flex;align-items:center;gap:16px;margin-bottom:4px}

.pannello.elenco{padding:0;overflow:hidden}
/* Il bordo divide le RIGHE del contenitore (<a>/<button>/<div>.voce, ma
   anche un <details> intero quando una voce si apre invece di navigare,
   es. "Dati personali" in "Altro", o un titoletto come "Già presi" nella
   lista della spesa): sul contenitore, non su .voce stesso, altrimenti
   un <details> aperto avrebbe una riga in mezzo fra il titolo e il suo
   contenuto invece che in fondo a tutto il blocco. */
.pannello.elenco > *{border-bottom:1px solid var(--bordo)}
.pannello.elenco > :last-child{border-bottom:0}
.voce{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:15px 18px;border:0;background:none;cursor:pointer;
  font-size:15.5px;font-weight:600;color:var(--inchiostro);text-align:left;
}
.voce:active{background:var(--carta-2)}
.voce > span{flex:1;min-width:0}
.voce svg{width:20px;height:20px;flex:none;color:var(--verde-vivo)}
.voce svg:last-child{width:17px;height:17px;color:var(--tenue)}

/* <summary class="voce">: stessa riga di una voce normale, ma apre un
   pannello invece di navigare — la freccina (il secondo svg in .voce)
   ruota per dirlo, al posto del "+"/"－" testuale di default. */
summary.voce{list-style:none}
summary.voce::-webkit-details-marker{display:none}
details[open] > summary.voce svg:last-child{transform:rotate(90deg)}
summary.voce svg:last-child{transition:transform .18s}

/* occhiello sul pannello d'apertura, distingue le due aree:
   niente più pillola piena, un'etichetta editoriale con una lineetta
   a fianco — stessa forma ovunque compaia nell'app. */
.occhiello{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;
  color:var(--oro);
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.occhiello::before{content:'';width:20px;height:2px;border-radius:2px;background:currentColor;flex:none}

/* variante per gli occhielli sulle foto a piena larghezza (apertura della
   home, sezione impatto con la foto del campo): stesso corsivo a mano
   libera delle scritte nelle foto, colore ripreso dalla fogliolina del
   marchio invece del giallo editoriale usato per gli occhielli funzionali. */
.occhiello.manoscritto{
  font-family:'Caveat','Poppins',cursive;
  font-weight:600;font-size:27px;letter-spacing:0;text-transform:none;
  color:#C4C570;gap:0;
}
.occhiello.manoscritto::before{content:none}
.vetro.ambra{background:linear-gradient(142deg,#3A2A10 0%,#241A08 52%,#140E04 100%)}

.cambia-area{
  color:rgba(246,241,228,.86);font-size:12.5px;font-weight:600;
  white-space:nowrap;
}
.cambia-area:hover{color:#F6F1E4}

/* testo lungo dei documenti */
.testo h3{font-size:16px;font-weight:600;margin:20px 0 6px;letter-spacing:-.015em}
.testo h3:first-child{margin-top:0}
.testo p{font-size:14.5px;color:var(--fumo);line-height:1.65}
.testo a{color:var(--verde-vivo);font-weight:600}

/* ── catalogo prodotti ──────────────────────────
   Tutto qui dentro è pensato per essere toccato in fretta, con le
   mani occupate: bersagli larghi, testo grande, nessuna precisione
   richiesta. */
.tessere{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));
  gap:12px;margin-bottom:6px;
}
.tessera{
  display:flex;flex-direction:column;
  background:var(--carta);border:1px solid var(--bordo);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--om-1);
  transition:transform .14s, box-shadow .14s;
}
.tessera:active{transform:scale(.97)}
/* stesso motivo delle altre correzioni [hidden] già viste: display:flex
   qui sopra vincerebbe altrimenti sull'attributo, e il filtro prodotti
   lascerebbe le tessere nascoste comunque visibili */
.tessera[hidden]{display:none}
@media (hover:hover){ .tessera:hover{box-shadow:var(--om-2);transform:translateY(-2px)} }
.tfoto{
  display:grid;place-items:center;aspect-ratio:3/2;
  background-size:cover;background-position:center;
}
.tfoto .emo svg{width:44px;height:44px}
/* ── tessera con più foto scorrevoli ───────────── */
.tfoto-blocco{position:relative}
.tfoto-carosello{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.tfoto-carosello::-webkit-scrollbar{display:none}
.tfoto-carosello .tfoto{flex:none;width:100%;scroll-snap-align:start}
.tfoto-punti{
  position:absolute;left:0;right:0;bottom:7px;
  display:flex;gap:4px;justify-content:center;pointer-events:none;
}
.tfoto-punti i{
  width:5px;height:5px;border-radius:50%;background:#fff;
  opacity:.45;box-shadow:0 0 3px rgba(0,0,0,.5);transition:opacity .15s;
}
.tfoto-punti i.attivo{opacity:1}
.tnome{
  padding:11px 12px 0;font-size:16px;font-weight:600;
  letter-spacing:-.01em;line-height:1.25;
}
.tsotto{padding:3px 12px 13px;font-size:12.5px;color:var(--fumo)}

/* ── contatori a pulsante grande ───────────────── */
.passo{padding:14px 0;border-bottom:1px solid var(--bordo)}
.passo:first-child{padding-top:0}
.passo:last-child{border-bottom:0;padding-bottom:0}
.passo > label{
  display:block;font-size:15px;font-weight:600;margin-bottom:12px;
}
.contatore{display:flex;align-items:center;gap:14px}
.contatore button{
  width:58px;height:58px;flex:none;border:1px solid var(--bordo);
  border-radius:var(--r-m);background:var(--sfondo);cursor:pointer;
  font-size:29px;font-weight:400;line-height:1;color:var(--inchiostro);
  transition:.12s;
}
.contatore button:active{transform:scale(.92);background:var(--carta-2)}
.contatore output{
  flex:1;text-align:center;font-size:27px;font-weight:700;
  letter-spacing:-.015em;font-variant-numeric:tabular-nums;
}
.contatore output.acceso{color:var(--verde-vivo)}

.btn.grosso{padding:17px 24px;font-size:16px;border-radius:var(--r-m)}

/* modulo esteso, ripiegato per non spaventare */
details.pannello summary{
  cursor:pointer;font-size:15px;font-weight:600;color:var(--fumo);
  list-style:none;
}
details.pannello summary::-webkit-details-marker{display:none}
details.pannello summary::before{content:'＋ ';font-weight:400}
details.pannello[open] summary::before{content:'－ '}

/* la sezione "per gli animali" nella scelta del prodotto: un mercato
   a parte, separato visivamente da quello dei reparti alimentari */
details.pannello.tema-animali{border-color:var(--verde-vivo)}
details.pannello.tema-animali summary{color:var(--verde-vivo)}

/* le due grandi scelte "fresco di oggi" / "scaffale" prima di
   pubblicare: tocco largo, poco testo, pensate anche per chi con le
   app ha poca dimestichezza */
.scelta-pubblicazione{
  display:flex;align-items:center;gap:16px;
  padding:22px 20px;margin-top:14px;
  background:var(--carta);border:1px solid var(--bordo);
  border-radius:var(--r-m);box-shadow:var(--om-1);
  text-decoration:none;color:inherit;
}
.scelta-pubblicazione:active{transform:scale(.98)}
.scelta-pubblicazione-emo{flex:none;width:76px;height:76px;border-radius:50%;overflow:hidden}
.scelta-pubblicazione-emo img{width:100%;height:100%;object-fit:cover;display:block}
.scelta-pubblicazione-testo{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.scelta-pubblicazione-testo b{font-size:19px}
.scelta-pubblicazione-testo span{font-size:14px;color:var(--fumo);line-height:1.35}
.scelta-pubblicazione svg{flex:none;width:20px;height:20px;color:var(--tenue)}
/* variante con un'icona invece di una foto (es. la scelta di come
   sfogliare la vetrina: non tutte le opzioni hanno una foto sensata,
   "Cerca" o "Per negozio" non sono un prodotto da fotografare). */
.scelta-pubblicazione-emo.icona{display:grid;place-items:center;background:var(--carta-2)}
.scelta-pubblicazione-emo.icona svg{width:34px;height:34px;color:var(--verde-vivo)}

/* ── attesi al banco ────────────────────────── */
.attesa{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--bordo);
}
.attesa:last-child{border-bottom:0;padding-bottom:0}
.attesa:first-of-type{padding-top:0}
.codicino{
  flex:none;padding:8px 10px;border-radius:0;
  font:700 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.1em;background:var(--carta-2);color:var(--verde-vivo);
  border:1px dashed var(--bordo);
}

/* ── entra / registrati ─────────────────────── */
.linguette{
  display:flex;gap:4px;padding:4px;margin-bottom:18px;
  background:var(--sfondo);border:1px solid var(--bordo);border-radius:0;
}
.linguette button{
  flex:1;padding:10px;border:0;border-radius:0;cursor:pointer;
  background:transparent;color:var(--fumo);
  font-size:14.5px;font-weight:600;transition:.16s;
}
.linguette button.viva{
  background:var(--carta);color:var(--inchiostro);box-shadow:var(--om-1);
}

.collega{
  display:block;width:100%;margin-top:12px;padding:4px;
  background:none;border:0;cursor:pointer;
  color:var(--verde-vivo);font-size:13.5px;font-weight:500;text-align:center;
}
.collega:hover{text-decoration:underline}

.oppure{
  display:flex;align-items:center;gap:12px;
  margin:20px 0 16px;color:var(--tenue);font-size:12.5px;
}
.oppure::before,.oppure::after{
  content:'';flex:1;height:1px;background:var(--bordo);
}

/* codice di ritiro */
.codicione{
  font:770 32px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2em;text-indent:.2em;color:var(--verde-vivo);text-align:center;
  padding:18px;border-radius:var(--r-m);margin:14px 0 4px;
  background:repeating-linear-gradient(45deg,var(--carta-2),var(--carta-2) 10px,transparent 10px,transparent 20px);
  border:2px dashed var(--bordo);
}

/* ═══ stati vuoti e scheletri ═══ */
.niente{text-align:center;padding:52px 22px;color:var(--fumo)}
.niente .grande{
  display:grid;place-items:center;width:78px;height:78px;margin:0 auto 16px;
  border-radius:var(--r-l);background:var(--carta-2);font-size:36px;
}
.niente p{max-width:30ch;margin:0 auto}

/* il segno grande di successo (pagamento confermato, ritiro confermato):
   più grande del solito ".grande", entra con un piccolo rimbalzo e ha
   un'onda che si allarga alle sue spalle in continuazione — un momento
   che festeggia, non una semplice icona di stato. */
.segno-successo{
  position:relative;display:grid;place-items:center;
  width:104px;height:104px;margin:0 auto 18px;
  border-radius:50%;background:var(--carta-2);font-size:52px;color:var(--verde-vivo);
  animation:successoEntra .55s cubic-bezier(.2,.9,.3,1.25) backwards;
}
.segno-successo::before{
  content:'';position:absolute;inset:-14px;border-radius:50%;
  border:2px solid var(--verde-vivo);opacity:0;
  animation:successoOnda 1.8s ease-out .3s infinite;
}
@keyframes successoEntra{from{opacity:0;transform:scale(.5)}}
@keyframes successoOnda{
  0%{transform:scale(.85);opacity:.6}
  100%{transform:scale(1.5);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .segno-successo{animation:none}
  .segno-successo::before{display:none}
}

.osso{
  border-radius:var(--r-m);background:var(--carta);border:1px solid var(--bordo);
  overflow:hidden;box-shadow:var(--om-1);
}
.osso .a{aspect-ratio:2/1}
.osso .b{height:15px;margin:15px 15px 0;border-radius:6px;width:62%}
.osso .c{height:13px;margin:10px 15px 18px;border-radius:6px;width:40%}
.osso .a,.osso .b,.osso .c{
  background:linear-gradient(100deg,var(--bordo) 30%,var(--carta-2) 50%,var(--bordo) 70%);
  background-size:220% 100%;animation:onda 1.3s infinite;
}
@keyframes onda{to{background-position:-120% 0}}

/* ═══ barra di navigazione ═══ */
#barra{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--velo);backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid var(--bordo);padding-bottom:env(safe-area-inset-bottom);
  /* Safari su iOS a volte "stacca" un elemento position:fixed con
     backdrop-filter durante lo scroll, soprattutto su pagine corte
     (poco contenuto sotto la piega): resta a metà schermo invece di
     seguire il fondo della pagina. Forzarlo sul proprio livello
     grafico (invece di farlo ricalcolare a ogni fotogramma di scroll)
     è la correzione standard per questo bug, innocua altrove. */
  transform:translateZ(0);
  will-change:transform;
}
/* prima di accedere non c'è ancora una barra da app: niente spazio riservato */
#barra[hidden]{display:none}
body.senza-barra{padding-bottom:0}
#barra a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 10px;font-size:10.5px;font-weight:500;color:var(--tenue);
  transition:color .15s;
}
#barra svg{width:23px;height:23px;transition:transform .18s}
#barra a.qui{color:var(--verde-vivo)}
#barra a.qui svg{transform:translateY(-2px) scale(1.06)}

/* Tasto "Scansiona": un'azione rapida da banco, non una scheda — resta
   in rilievo sopra il resto della barra così si trova anche senza
   guardare, con le mani impegnate dalle borse. */
#barra a.voce-scan{flex:0 0 auto;padding:0;width:64px}
#barra a.voce-scan .cerchio-scan{
  width:52px;height:52px;margin-top:-22px;border-radius:50%;
  display:grid;place-items:center;background:var(--verde-vivo);color:#fff;
  box-shadow:0 6px 16px rgba(92,122,46,.4),0 0 0 4px var(--velo);
}
#barra a.voce-scan svg{width:25px;height:25px}
#barra a.voce-scan.qui .cerchio-scan{transform:scale(1.06)}
#barra a.voce-scan.qui svg{transform:none}

/* ═══ avviso a comparsa ═══ */
#avviso{
  position:fixed;left:50%;bottom:calc(var(--barra-h) + 14px);
  transform:translate(-50%,0);z-index:60;max-width:min(92vw,430px);
  padding:13px 18px;border-radius:var(--r-m);
  background:var(--inchiostro);color:var(--sfondo);
  font-size:14.5px;font-weight:600;box-shadow:var(--om-2);
  animation:sbuca .3s cubic-bezier(.2,.9,.3,1.2);
}
#avviso.male{background:var(--rosso);color:#fff}
@keyframes sbuca{from{opacity:0;transform:translate(-50%,14px)}}

/* ═══ testata di dettaglio ═══ */
.torna{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--fumo);font-size:14.5px;font-weight:500;margin-bottom:14px;
}
.torna svg{width:17px;height:17px}
button.torna{background:none;border:0;padding:0;font:inherit;cursor:pointer}

.copertina{
  /* un <img> vero (non uno sfondo) fa prendere al riquadro la forma
     della foto stessa, niente bordi vuoti. Un tetto di altezza evita
     però che una foto in verticale diventi enorme occupando quasi
     tutto lo schermo: oltre quel tetto si ritaglia (object-fit:cover)
     come le altre foto dell'app, invece di continuare a crescere. Un
     rapporto fisso (aspect-ratio:4/3, sotto in .vuoto) resta solo per
     chi non ha ancora una foto. */
  position:relative;border-radius:var(--r-l);overflow:hidden;
  display:grid;place-items:center;font-size:86px;box-shadow:var(--om-2);margin-bottom:18px;
  background-color:var(--carta-2);max-height:320px;
}
.copertina.vuoto{aspect-ratio:4/3}
.copertina-foto{width:100%;height:100%;max-height:320px;object-fit:cover;display:block}

.riga-imp{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--bordo)}
.riga-imp:last-child{border:0}
.riga-imp span{color:var(--fumo);font-size:14.5px}
.riga-imp b{font-weight:600;font-size:14.5px}

.legale{
  font-size:12px;color:var(--tenue);text-align:center;
  margin-top:18px;line-height:1.6;
}

@media (min-width:720px){
  #app{padding:24px 16px 44px}
  .vetro{padding:30px 28px}
  .vetro h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* Sezione in cui si sta caricando un prodotto (fresco / confezionati). */
.sezione-attiva{
  display:inline-flex;align-items:center;gap:6px;margin:2px 0 12px;
  padding:7px 12px;font-size:13px;font-weight:600;border-radius:0;
}
.sezione-attiva b{font-weight:700}
.sezione-attiva.fresco{background:rgba(92,122,46,.12);color:var(--verde-vivo)}
.sezione-attiva.conf{background:var(--arancio-tenue);color:var(--arancio-testo)}

/* Niente zoom con il doppio tocco (capita di continuo mentre si compilano
   i moduli e si premono i pulsanti). Lo zoom con due dita resta attivo,
   per chi ne ha bisogno. */
html, body, button, a, input, select, textarea, label, summary{touch-action:manipulation}

/* Avviso "nuova versione disponibile" (vedi controllaAggiornamento in app.js). */
.banner-aggiorna{
  position:fixed;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom));z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;background:var(--verde-vivo);color:#fff;font-size:14px;font-weight:600;
  border-radius:0;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
}
.banner-aggiorna button{
  background:#fff;color:var(--verde-vivo);border:0;border-radius:0;padding:8px 14px;
  font:inherit;font-weight:700;cursor:pointer;flex:none;
}

/* Scelta "Ritiro in negozio / Fatti consegnare" con illustrazione. */
.scelta-vetrina.con-foto{padding:0;gap:10px;background:none;border:0;box-shadow:none}
.scelta-vetrina.con-foto button{
  display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;
  border:2px solid var(--bordo);background:var(--carta);
}
.scelta-vetrina.con-foto button img{width:100%;aspect-ratio:1408/768;object-fit:cover;display:block;opacity:.8;transition:.16s}
.scelta-vetrina.con-foto button span{padding:10px 6px;font-size:14px;line-height:1.2}
.scelta-vetrina.con-foto button.viva{border-color:var(--verde);background:var(--verde);color:#F6F1E4}
.scelta-vetrina.con-foto button.viva img{opacity:1}

/* Elenco ordini: le etichette stanno in una sola riga ordinata. */
.fila.info-ordine{flex-wrap:wrap;gap:6px}
.fila.info-ordine .gettone{padding:4px 7px;font-size:12px;white-space:nowrap}

/* Dettaglio ordine: riquadro ben visibile per scrivere al negozio. */
.riquadro-messaggi{
  display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:14px 16px;
  background:var(--arancio-tenue);border:2px solid var(--arancio-testo);border-radius:0;
  color:var(--inchiostro);font:inherit;text-align:left;cursor:pointer;
}
.riquadro-messaggi-icona{
  flex:none;display:grid;place-items:center;width:44px;height:44px;
  background:var(--arancio-testo);color:#fff;
}
.riquadro-messaggi-icona svg{width:22px;height:22px}
.riquadro-messaggi-testo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.riquadro-messaggi-testo b{font-size:16.5px;font-weight:700}
.riquadro-messaggi-testo span{font-size:13.5px;color:var(--fumo)}
.riquadro-messaggi-badge{
  flex:none;min-width:26px;height:26px;display:grid;place-items:center;padding:0 7px;
  background:var(--rosso);color:#fff;font-weight:700;font-size:13px;
}
.riquadro-messaggi > svg{flex:none;width:20px;height:20px;color:var(--arancio-testo)}

/* Foto del prodotto nel dettaglio dell'ordine. */
.foto-ordine{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;margin:0 0 14px;border-radius:0}
.foto-ordine.vuota{display:grid;place-items:center;background-color:var(--carta-2)}
.foto-ordine.vuota .emo{font-size:44px}

/* Storico ordini: chiuso finché non si tocca. */
.storico-ordini{margin-top:26px}
.storico-ordini > summary{
  display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;list-style:none;
  background:var(--carta);border:1px solid var(--bordo);border-radius:0;box-shadow:var(--om-1);
  font-size:17px;font-weight:700;letter-spacing:-.01em;
}
.storico-ordini > summary::-webkit-details-marker{display:none}
.storico-ordini > summary > span:first-child{flex:1}
.storico-freccia{display:grid;place-items:center;transition:transform .16s}
.storico-freccia svg{width:18px;height:18px}
.storico-ordini[open] .storico-freccia{transform:rotate(90deg)}

/* Scheda ordine: il nome del negozio sta sotto, a tutta larghezza (non va a capo
   per far posto all'etichetta di stato, che resta in alto a destra). */
.fila.testata.testata-griglia{display:grid;grid-template-columns:auto 1fr auto;column-gap:9px;row-gap:0;align-items:start}
.testata-griglia .testo-testata{grid-column:2;min-width:0}
.testata-griglia .gruppo-stato{grid-column:3;margin-left:0}
.testata-griglia .luogo-ordine{grid-column:2 / 4;margin-top:2px;min-width:0}
.testata-griglia .gruppo-stato{flex-direction:column;align-items:flex-end;gap:5px}

/* Miniatura del prodotto nell'elenco ordini. */
.miniatura-ordine{width:64px;height:64px;object-fit:cover;border-radius:0;flex:none;display:block}

/* Più aria dopo la casella "Valido anche per Amici animali". */
.spunta#rigaAncheAnimali{margin-bottom:22px}

/* Etichetta "Riconoscimento con AI" sopra Inquadra il prodotto. */
.badge-ai{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 10px;border-radius:0;
  background:rgba(92,122,46,.12);color:var(--verde-vivo);font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.badge-ai svg{width:14px;height:14px}

/* Etichette (occhielli) in verde scuro sulle pagine chiare, al posto del giallo. */
.occhiello.verde-scuro{color:#3B5220}

/* Miniature dei prodotti nel riepilogo di pagamento del carrello. */
.strisce-foto-ordine{display:flex;gap:8px;margin:0 0 14px;overflow-x:auto}
.strisce-foto-ordine img{flex:none;width:88px;height:88px;object-fit:cover;border-radius:0}

/* Telefoni: i cinque pallini della vetrina stanno tutti in una riga, in
   cinque colonne uguali (stessa distanza, stessa dimensione). */
@media (max-width:440px){
  .categorie-scorrevoli{display:grid;grid-template-columns:repeat(5,1fr);gap:0;overflow:visible}
  .categoria-voce{width:auto;min-width:0;font-size:min(10.5px,2.75vw);letter-spacing:-.01em}
  .categoria-icona{width:54px;height:54px}
}
/* Pallini con foto: nessun bordo trasparente che li rimpicciolisce rispetto
   agli altri; quello scelto ha un anello verde fuori dal cerchio. */
.categoria-icona.foto{border:0}
.categoria-voce.viva .categoria-icona.foto{box-shadow:0 0 0 3px var(--verde-vivo),0 6px 14px -8px rgba(92,122,46,.6)}

/* Foto profilo (al posto dell'iniziale). */
.ritratto.con-foto{background:var(--carta-2);overflow:hidden}
.ritratto img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.ritratto.cambia-ritratto{position:relative;border:0;padding:0;cursor:pointer;color:#F6F1E4;font-family:inherit}
.ritratto-macchina{
  position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;display:grid;place-items:center;
  background:var(--arancio-testo);color:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.ritratto-macchina svg{width:13px;height:13px}
.ritratto.grande.con-foto{overflow:visible}
.ritratto.grande.con-foto img{border-radius:22px}
.azioni-foto-profilo{display:flex;gap:14px;margin-top:6px}
.azioni-foto-profilo .collega{width:auto;font-size:13.5px}

/* Editor di ritaglio della foto profilo. */
.ritaglio{
  position:relative;width:min(78vw,300px);aspect-ratio:1;margin:0 auto 14px;overflow:hidden;
  background:#1d1d1b;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
}
.ritaglio img{position:absolute;left:50%;top:50%;max-width:none;pointer-events:none;transform-origin:center}
.ritaglio::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle closest-side,transparent 0,transparent 97%,rgba(255,255,255,.95) 97%,rgba(255,255,255,.95) 99%,rgba(0,0,0,.55) 99%);
}
.ritaglio-zoom{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-weight:600;font-size:14px}
.ritaglio-zoom input{flex:1;accent-color:var(--verde-vivo)}

/* Punti: spiegazione compressa sotto il livello. */
.punti-saldo .punti-valore{font-size:15px;color:var(--fumo)}
.come-punti{margin-top:14px;border-top:1px solid var(--bordo);padding-top:12px}
.come-punti summary{
  display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;list-style:none;
  color:var(--verde-vivo);font-weight:600;font-size:14px;
}
.come-punti summary::-webkit-details-marker{display:none}
.come-punti summary::after{content:"+";font-size:20px;line-height:1;font-weight:500}
.come-punti[open] summary::after{content:"−"}
.punti-saldo .come-punti p{margin:10px 0 0;font-size:13.5px;line-height:1.55}

/* Foto del cliente lato negozio. */
.cliente-foto{width:26px;height:26px;object-fit:cover;border-radius:50%;vertical-align:middle;margin-right:8px}
.cliente-foto.grande{width:44px;height:44px;margin:0;flex:none;align-self:center}
.cliente-riga{display:inline-flex;align-items:center}
.riquadro-messaggi-icona.con-foto{padding:0;overflow:hidden;background:none}
.riquadro-messaggi-icona.con-foto img{width:100%;height:100%;object-fit:cover;display:block}

/* Profilo: nome a sinistra e tipo di account in alto a destra. */
.riga-nome-profilo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.riga-nome-profilo .gettone{flex:none;white-space:nowrap}
.capo-profilo{align-items:flex-start}

/* ═══ rifinitura tipografica ═══
   Pesi più leggeri e titoli più piccoli: Poppins 700/800 su schermo
   piccolo risultava pesante. Qui solo a-capo e allineamenti. */
h1,h2,h3{text-wrap:balance}

/* ═══ home rifatta (nh = "nuova home") ═══
   Mobile first: una colonna, poi due colonne dai 860px. Le fasce vanno a
   tutta larghezza anche se #app è stretto (width:100vw + margine
   negativo); il contenuto torna a una larghezza comoda con padding. */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:500;
  font-display:swap; src:url('font/newsreader-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,
    U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
    U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:500;
  font-display:swap; src:url('font/newsreader-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
    U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
.nh,.nh-offerte{
  --nh-px:max(18px,calc(50vw - 550px));
  width:100vw;margin-left:calc(50% - 50vw);margin-right:0;box-sizing:border-box;
}
.nh h1,.nh h2,.nh h3{text-wrap:balance}
.nh h1,.nh h2{font-family:'Newsreader',Georgia,serif;font-weight:500;letter-spacing:-.015em}
.nh-firma{
  font-family:'Caveat',cursive;font-weight:700;font-size:23px;line-height:1;
  color:var(--verde-vivo);display:block;
}
.nh-firma.oro{color:var(--oro)}
.nh-occhiello{
  display:block;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#4B5A34;
}
.nh-azioni{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.nh-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 22px;font-size:15px;font-weight:600;line-height:1.2;
  text-align:center;border:2px solid transparent;transition:background .16s,color .16s;
}
.nh-btn.pieno{background:#4B5A34;color:#FAF6EE}
.nh-btn.vuoto{border-color:#1B1A14;color:#1B1A14}
.nh-btn.chiaro{background:#FAF6EE;color:#2E3A1F}
.nh-btn.bordo{border-color:#FAF6EE;color:#FAF6EE}
@media (hover:hover){
  .nh-btn.pieno:hover{background:#2E3A1F}
  .nh-btn.vuoto:hover{background:#1B1A14;color:#FAF6EE}
  .nh-btn.chiaro:hover{background:#fff}
  .nh-btn.bordo:hover{background:#FAF6EE;color:#2E3A1F}
}

/* — apertura — */
.nh-hero{background:#EFE8D6;margin-top:-16px;display:block}
.nh-hero-testo{padding:30px 20px 26px;max-width:640px;margin:0 auto}
.nh-hero h1{
  font-size:clamp(31px,8.4vw,40px);line-height:1.08;color:#2E3A1F;margin:10px 0 0;
}
.nh-hero p{margin:14px 0 18px;font-size:15px;line-height:1.65;color:#4A473F}
.nh-hero .cerca{margin-bottom:0}
.nh-hero-foto{position:relative;height:260px;overflow:hidden}
.nh-hero-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nh-nota{
  position:absolute;left:14px;right:14px;bottom:14px;background:#FAF6EE;
  padding:11px 14px;display:flex;align-items:center;gap:12px;
  font-size:12.5px;line-height:1.35;color:#5F5B50;
}
.nh-nota b{display:block;color:#1B1A14;font-weight:600;font-size:13px}
.nh-nota i{
  flex:none;width:10px;height:10px;border-radius:50%;background:#5C7A2E;
  box-shadow:0 0 0 4px rgba(92,122,46,.2);
}

/* — tre garanzie — */
.nh-garanzie{background:#2E3A1F;color:#FAF6EE;display:flex;flex-direction:column}
.nh-garanzie > div{
  display:flex;align-items:center;gap:14px;padding:16px 20px;
  border-top:1px solid rgba(250,246,238,.14);
}
.nh-garanzie > div:first-child{border-top:0}
.nh-ico svg{width:28px;height:28px;color:var(--oro);flex:none;display:block}
.nh-garanzie p{margin:0;font-size:13px;line-height:1.4;color:#D8D2BE}
.nh-garanzie b{display:block;font-size:15px;font-weight:600;color:#FAF6EE}

/* — sezioni con titolo — */
.nh-sezione{padding:48px 18px 40px}
.nh-testa{text-align:center;max-width:36em;margin:0 auto 26px}
.nh-testa h2,.nh-come h2,.nh-negozi h2{
  font-size:clamp(25px,6.6vw,32px);line-height:1.12;margin:8px 0 0;color:#2E3A1F;
}

/* — quattro categorie — */
.nh-categorie{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));
  max-width:1100px;margin:0 auto;
}
.nh-cat{display:block;background:#fff;border:1px solid var(--bordo);color:inherit}
.nh-cat-foto{height:168px;overflow:hidden}
.nh-cat-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.nh-cat-foto img.alto{object-position:50% 30%}
@media (hover:hover){.nh-cat:hover .nh-cat-foto img{transform:scale(1.04)}}
.nh-cat-corpo{padding:16px 18px 20px}
.nh-cat-corpo h3{font-size:17px;font-weight:600;color:#2E3A1F;margin:0}
.nh-cat-corpo p{margin:6px 0 12px;font-size:14px;line-height:1.55;color:var(--fumo)}
.nh-cat-corpo span{font-size:14px;font-weight:600;color:#4B5A34}

/* — offerte vere, allargate come le altre fasce — */
.nh-offerte{padding:8px var(--nh-px) 36px}
.nh-offerte .griglia{max-width:1100px}
@media (min-width:860px){
  .nh-offerte .griglia{display:grid;columns:auto;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
  .nh-offerte .griglia > *{margin-bottom:0}
}

/* — come funziona — */
.nh-come{background:#EFE8D6;padding:48px 20px;display:grid;gap:30px;grid-template-columns:minmax(0,1fr)}
.nh-passi{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:20px;counter-reset:p}
.nh-passi li{display:flex;flex-direction:column;position:relative;padding-left:56px;counter-increment:p}
.nh-passi li::before{
  content:counter(p);position:absolute;left:0;top:0;width:40px;height:40px;
  background:#4B5A34;color:#FAF6EE;display:grid;place-items:center;
  font-weight:700;font-size:16px;
}
.nh-passi b{font-size:17px;font-weight:600;color:var(--inchiostro)}
.nh-passi span{margin-top:3px;font-size:14.5px;line-height:1.6;color:var(--fumo)}
.nh-ordine{
  background:#fff;border:1px solid #DDD4BF;padding:18px;width:100%;max-width:480px;
  justify-self:center;box-shadow:0 24px 48px -26px rgba(46,58,31,.45);
}
.nh-ordine-testa{display:flex;justify-content:space-between;align-items:center;font-size:15px}
.nh-ordine-testa b{font-weight:600}
.nh-ordine-testa em{
  font-style:normal;font-size:12px;font-weight:600;color:#3B5220;
  background:rgba(92,122,46,.14);padding:4px 9px;
}
.nh-tappe{list-style:none;margin:20px 0 0;padding:0;display:flex}
.nh-tappe li{flex:1;text-align:center;font-size:11.5px;color:#6B675D}
.nh-tappe i{
  display:block;margin:0 auto 6px;width:22px;height:22px;border-radius:50%;
  box-sizing:border-box;border:2px solid #CFC6B1;background:#fff;
  font-style:normal;font-size:12px;line-height:18px;color:#fff;
}
.nh-tappe .fatto{color:var(--inchiostro)}
.nh-tappe .fatto i{background:#4B5A34;border-color:#4B5A34;line-height:20px}
.nh-tappe .ora{color:var(--inchiostro);font-weight:600}
.nh-tappe .ora i{border:3px solid #4B5A34}
.nh-codice{
  display:flex;gap:14px;align-items:center;margin-top:20px;padding:14px;
  background:var(--sfondo);border:1px dashed #CFC6B1;
}
.nh-qr{
  flex:none;width:62px;height:62px;
  background:repeating-conic-gradient(#1B1A14 0% 25%,#FAF6EE 0% 50%) 50%/15.5px 15.5px;
}
.nh-codice small{display:block;font-size:12px;color:var(--fumo)}
.nh-codice b{
  display:block;margin-top:2px;font-family:ui-monospace,Menlo,monospace;
  font-size:20px;font-weight:700;letter-spacing:.14em;color:#2E3A1F;
}

/* — per i negozi — */
.nh-negozi{background:#2E3A1F;color:#FAF6EE;display:block}
.nh-negozi-foto{height:220px;overflow:hidden}
.nh-negozi-foto img{width:100%;height:100%;object-fit:cover;display:block}
.nh-negozi-testo{padding:34px 20px 38px;max-width:640px;margin:0 auto}
.nh-negozi h2{color:#FAF6EE}
.nh-negozi p{margin:14px 0 0;font-size:15px;line-height:1.65;color:#D8D2BE}
.nh-negozi ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.nh-negozi li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.55;color:#E7E2D0}
.nh-negozi li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--oro)}
.nh-negozi li b{font-weight:600;color:#FAF6EE}

/* — valori — */
.nh-valori{
  display:grid;gap:14px;max-width:1100px;margin:0 auto;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
}
.nh-valori > div{background:#fff;border:1px solid var(--bordo);padding:24px 22px}
.nh-valori span{font-family:'Newsreader',Georgia,serif;font-size:34px;line-height:1;color:#5C7A2E}
.nh-valori h3{font-size:18px;font-weight:600;color:#2E3A1F;margin:12px 0 0}
.nh-valori p{margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--fumo)}

@media (min-width:860px){
  .nh-hero{margin-top:-24px;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .nh-hero-testo{
    padding:72px 48px 72px var(--nh-px);max-width:none;margin:0;
    display:flex;flex-direction:column;justify-content:center;
  }
  .nh-hero h1{font-size:clamp(40px,4.4vw,56px)}
  .nh-hero p{font-size:17px;max-width:30em}
  .nh-hero-foto{height:auto;min-height:520px}
  .nh-azioni{flex-direction:row;flex-wrap:wrap}
  .nh-btn{padding:16px 30px;font-size:16px}
  .nh-garanzie{flex-direction:row;padding:0 var(--nh-px)}
  .nh-garanzie > div{flex:1;border-top:0;border-left:1px solid rgba(250,246,238,.14);padding:26px 24px}
  .nh-garanzie > div:first-child{border-left:0;padding-left:0}
  .nh-sezione{padding:88px 24px 80px}
  .nh-testa{margin-bottom:44px}
  .nh-testa h2,.nh-come h2,.nh-negozi h2{font-size:clamp(32px,3.3vw,42px)}
  .nh-cat-foto{height:210px}
  .nh-come{
    padding:88px var(--nh-px);grid-template-columns:1fr 1fr;align-items:center;gap:72px;
  }
  .nh-negozi{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
  .nh-negozi-foto{height:auto;min-height:480px}
  .nh-negozi-testo{padding:72px var(--nh-px) 72px 56px;max-width:none;margin:0}
}

/* ═══ aspetto contemporaneo ═══
   Solo stile: nessuna struttura, nessun gestore, nessun testo cambia.
   Carta piatta e calda, linee sottili al posto delle ombre pesanti,
   pulsanti pieni senza sfumature, titoli di pagina con il serif della
   home, controlli alti almeno 48px, vetro leggero su testata e barra. */
:root{
  --sfondo:#FAF8F3; --velo:rgba(250,248,243,.86);
  --carta-2:#F2EEE5; --bordo:#E6E1D4;
  --inchiostro:#171712; --fumo:#625F56;
  --om-1:0 1px 2px rgba(23,23,18,.04);
  --om-2:0 1px 2px rgba(23,23,18,.05),0 14px 34px -18px rgba(23,23,18,.2);
  --om-3:0 2px 4px rgba(23,23,18,.06),0 26px 60px -22px rgba(23,23,18,.3);
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
}
html{-webkit-tap-highlight-color:transparent}
::selection{background:rgba(233,174,51,.35)}
body::before{
  background:radial-gradient(560px 400px at 100% -10%, rgba(233,174,51,.07), transparent 62%);
}

/* avviso "ambiente di prova": resta sempre visibile ma più sobrio */
#capoTesta > div:first-child{
  background:#1B1A14!important;color:#E9AE33!important;
  font-size:10.5px!important;font-weight:600!important;letter-spacing:.1em!important;
  text-transform:uppercase;padding:5px 8px!important;
}

/* testata */
#testa{padding:10px 16px;background:var(--velo);backdrop-filter:blur(18px) saturate(1.5)}
/* il padding di 16px qui sopra annulla quello stretto della media query a 440px (più in
   alto): a 320px "Accedi" usciva di 3px dallo schermo. Solo sugli schermi più stretti, dove
   serve davvero; da 360px in su resta com'è. */
@media (max-width:340px){#testa{padding:10px;gap:6px}#azioniTesta .btn.mini{padding-left:10px;padding-right:10px}}
.marchio{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(35,45,15,.3),0 6px 12px -6px rgba(35,45,15,.45)}
.tondo,.lingua{border-color:var(--bordo);background:var(--carta);box-shadow:none}

/* titoli di pagina: stesso serif della home */
:where(#app) h1{
  font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.12;
  letter-spacing:-.015em;color:var(--inchiostro);text-wrap:balance;
}
:where(#app) h2{letter-spacing:-.005em}
.occhiello{letter-spacing:.14em}

/* pulsanti: pieni, piatti, 48px */
.btn{
  min-height:48px;padding:12px 22px;background:#4B5A34;color:#FAF6EE;
  font-size:15px;font-weight:600;letter-spacing:0;box-shadow:none;
  transition:background .16s,color .16s,transform .12s,border-color .16s;
}
.btn:hover{filter:none;background:#2E3A1F}
@media (hover:hover){ .btn:hover{transform:none;box-shadow:none} }
.btn:active{transform:scale(.985)}
.btn.mini{min-height:38px;padding:8px 14px;font-size:14px}

/* campi: bianchi, bordo netto, anello morbido quando attivi */
.campo label{font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--fumo);margin-bottom:7px}
.campo input,.campo select,.campo textarea,.cerca input{
  background:var(--carta);border:1px solid #D9D3C3;min-height:48px;padding:13px 14px;
  box-shadow:none;transition:border-color .15s,box-shadow .15s;
}
.campo textarea{min-height:120px}
.cerca input{padding-left:42px}
.campo input:focus,.campo select:focus,.campo textarea:focus,.cerca input:focus{
  outline:0;border-color:var(--verde-vivo);box-shadow:0 0 0 3px rgba(92,122,46,.16);
}
.campo input::placeholder,.campo textarea::placeholder,.cerca input::placeholder{color:#9A958A}

/* schede, tessere, pannelli: linea sottile, ombra appena accennata */
.pannello,.scheda,.tessera{border-color:var(--bordo);box-shadow:var(--om-1)}
@media (hover:hover){
  .scheda:hover,.tessera:hover{box-shadow:var(--om-2);transform:translateY(-1px)}
}
.nome{font-weight:600;letter-spacing:-.01em}
.costo{font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.prima{font-variant-numeric:tabular-nums}

/* selettori a due voci (Per te / Amici animali, Entra / Registrati):
   binario grigio caldo con la voce attiva "sollevata" in bianco */
.scelta-vetrina:not(.con-foto){background:var(--carta-2);border-color:transparent;box-shadow:none;padding:4px;gap:4px}
.scelta-vetrina:not(.con-foto) button{padding:11px 8px;font-size:14.5px;font-weight:600;letter-spacing:0}
.scelta-vetrina:not(.con-foto) button.viva{
  background:var(--carta);color:var(--inchiostro);box-shadow:0 1px 2px rgba(23,23,18,.1),0 0 0 1px rgba(23,23,18,.04);
}

/* etichette di filtro: linea sottile; quella attiva è piena e scura */
.pastiglia{border-color:#DDD7C8;font-weight:500}
.pastiglia.viva{background:#2E3A1F;border-color:#2E3A1F;color:#FAF6EE;box-shadow:none}

/* barra in basso: vetro, e un filo verde sulla voce attiva */
#barra{background:var(--velo);backdrop-filter:blur(18px) saturate(1.5);border-top-color:var(--bordo)}
#barra a{position:relative;gap:2px;font-weight:500;letter-spacing:.01em}
#barra a.qui{color:#2E3A1F;font-weight:600}
#barra a.qui svg{transform:none}
#barra a:not(.voce-scan).qui::before{
  content:"";position:absolute;top:-1px;left:28%;right:28%;height:2px;background:var(--verde-vivo);
}

/* righe d'elenco e menu */
.voce{font-weight:600;font-size:15px}
.voce svg{color:var(--verde-vivo)}
.menu-tendina{box-shadow:var(--om-3)}

/* avviso a comparsa */
#avviso{border-radius:0;box-shadow:var(--om-3);font-weight:600}

/* velo più pieno sulla testata: i testi sotto non devono "trasparire" */
#testa{background:rgba(250,248,243,.95)}
/* etichette sulle foto: squadrate come il resto, ombra appena accennata */
.bolla{border-radius:0;padding:5px 9px;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.cuore{border-radius:0;width:36px;height:36px}
/* barra risultati della vetrina: una riga sola, anche su telefono stretto */
.fila:has(> #ord){flex-wrap:nowrap;gap:8px}
.fila:has(> #ord) .gettone,.fila:has(> #ord) .pastiglia{
  font-size:13px;padding:8px 10px;min-height:38px;white-space:nowrap;
}
.fila:has(> #ord) .gettone{display:inline-flex;align-items:center}
.fila:has(> #ord) #ord{flex:0 1 auto;min-width:0;max-width:100%}
.fila:has(> #ord) .gettone{flex:none}
#app .vetro h1{font-size:25px}
@media (min-width:720px){ #app .vetro h1{font-size:30px} }

/* ═══ coerenza ═══
   Ripasso delle schermate interne dopo il rinnovo "contemporaneo":
   stesse regole ovunque (pulsanti pieni e piatti, angoli squadrati,
   sfondi tinta unita, pesi dei titoli misurati). Solo stile. */

/* pesi: nel markup <b>/<strong> valgono 700, che con i caratteri ospitati
   qui diventa un "extra grassetto" più pesante dei titoli (600) che stanno
   accanto. Una sola gradazione per tutto il testo in evidenza. */
:where(#app,.popup-scheda,#cookie) :is(b,strong){font-weight:600}

/* pulsanti: al passaggio del mouse non devono mai finire scuro su scuro.
   .btn:hover (verde pieno) vinceva sulle varianti: il chiaro e il rosso
   diventavano verde col testo scuro. Qui ogni variante tiene il suo colore. */
.btn.brace{background:var(--oro);color:#22190A;box-shadow:none}
.btn.brace:hover{background:#D9A02C;color:#22190A}
.btn.pericoloso{background:var(--rosso);color:#fff;box-shadow:none}
.btn.pericoloso:hover{background:#962F0C;color:#fff}
.btn.quieto{background:var(--carta);color:var(--inchiostro);border:1px solid #D9D3C3;box-shadow:none}
.btn.quieto:hover{background:var(--carta-2);color:var(--inchiostro);border-color:#C9C2AF}
.btn:disabled,.btn:disabled:hover{box-shadow:none}
.btn.brace:disabled:hover{background:var(--oro)}
.btn.quieto:disabled:hover{background:var(--carta)}
.btn.pericoloso:disabled:hover{background:var(--rosso)}
.btn:disabled:not(.brace):not(.quieto):not(.pericoloso):hover{background:#4B5A34}
#bMenu{background:#4B5A34;box-shadow:none}

/* pannelli verdi d'apertura (ordini, accesso, area negozio): tinta unita,
   senza alone dorato né ombra. Il negozio ha il verde più scuro. */
.vetro{background:#4B5A34;box-shadow:none;padding:20px 18px}
.vetro::after{content:none}
.vetro.verde,.vetro.ambra{background:#2E3A1F}
.numeroni{margin-top:16px}
.numeroni b{font-weight:600}

/* iniziale/foto del profilo: cerchio come in testata, tinta unita */
.ritratto{background:#4B5A34;box-shadow:none}
.ritratto.negozio{background:#2E3A1F}
.ritratto.grande{border-radius:50%}
.ritratto.grande.con-foto img{border-radius:50%}
.ritratto-macchina{box-shadow:none;border:2px solid var(--sfondo)}
.azioni-foto-profilo{margin-top:8px}
.azioni-foto-profilo .collega{padding:0}

/* punti e barre di avanzamento: squadrate, tinta unita */
.livello-barra{height:7px;border-radius:0}
.livello-barra i{border-radius:0;background:var(--verde-vivo)}
.scorta,.scorta i{border-radius:0}
.punti-cifra b{font-size:30px;font-weight:600}
.riga-stat b{font-size:22px;font-weight:600}
.premio{padding:14px 16px}
.premio-riga span{display:inline-flex;align-items:center;gap:6px}
.premio-riga svg,.campo label svg{display:inline-block;flex:none;margin:0}
.campo label svg{width:15px;height:15px;vertical-align:-2px;margin-right:6px;color:var(--verde-vivo)}

/* scelta "Ritiro in negozio / Fatti consegnare" e foto candidate:
   la voce attiva usa il verde del marchio, non il salvia chiaro */
.scelta-vetrina.con-foto button{border-width:1px}
.scelta-vetrina.con-foto button.viva{border-color:#4B5A34;background:#4B5A34;color:#FAF6EE}
.scelta-vetrina.con-foto button span{font-weight:600}
.scelta-foto-voce{border-width:1px}
.scelta-foto-voce.viva{border-color:#4B5A34;box-shadow:0 0 0 1px #4B5A34}

/* chat: bolle squadrate, tinta unita, campo come gli altri */
.chat-bolla,.chat-bolla.mia{border-radius:0}
.chat-bolla.mia{background:#4B5A34;color:#FAF6EE}
.chat-riga input{min-height:48px;border-color:#D9D3C3;box-shadow:none}
.chat-riga input:focus{outline:0;border-color:var(--verde-vivo);box-shadow:0 0 0 3px rgba(92,122,46,.16)}
.chat-riga .btn{min-height:48px}

/* scheda ordine nell'elenco: lo stato va sotto il titolo, su tutta la
   larghezza (accanto al titolo lasciava una colonna di tre parole) */
.fila.testata.testata-griglia{row-gap:0}
.testata-griglia .gruppo-stato{
  grid-column:2 / 4;grid-row:2;flex-direction:row;align-items:center;justify-content:flex-start;margin-top:6px;
}
.testata-griglia .luogo-ordine{grid-row:3;margin-top:6px}
.testata-griglia .testo-testata{grid-row:1}
.miniatura-ordine{grid-row:1 / span 3}
.testata-griglia .luogo-ordine{align-items:flex-start}
.testata-griglia .luogo-ordine svg{margin-top:4px}

/* righe "Vedi lo storico" e simili: stesso peso delle altre voci d'elenco */
.storico-ordini > summary{font-size:16px;font-weight:600;box-shadow:none;min-height:52px}
.riquadro-messaggi-testo b{font-size:15.5px;font-weight:600}

/* scelta di cosa pubblicare / come sfogliare */
.scelta-pubblicazione{box-shadow:none;padding:18px 16px;gap:14px}
.scelta-pubblicazione-emo{width:64px;height:64px}
.scelta-pubblicazione-emo.icona svg{width:28px;height:28px}
.scelta-pubblicazione-testo{gap:3px}
.scelta-pubblicazione-testo b{font-size:17px;font-weight:600;line-height:1.25;letter-spacing:-.005em}
.scelta-pubblicazione-testo span{font-size:13.5px}

/* titolo di pagina seguito dalla riga di spiegazione: il -8px scritto nel
   markup serviva al vecchio titolo più alto, ora li incollava */
#app > h1 + .aiuto[style*="margin:-8px"]{margin-top:6px!important}

/* finestre a comparsa (recensione, ritaglio, riconoscimento) */
.popup-velo{background:rgba(23,23,18,.55)}
.popup-scheda{box-shadow:none;padding:22px 20px max(22px,env(safe-area-inset-bottom))}
.popup-scheda h2{font-size:18px;line-height:1.3;font-weight:600;margin-bottom:6px}
.popup-scheda textarea{
  display:block;width:100%;min-height:96px;padding:13px 14px;resize:vertical;
  background:var(--carta);border:1px solid #D9D3C3;border-radius:0;box-shadow:none;
  font:inherit;font-size:15px;line-height:1.45;
  transition:border-color .15s,box-shadow .15s;
}
.popup-scheda textarea:focus{outline:0;border-color:var(--verde-vivo);box-shadow:0 0 0 3px rgba(92,122,46,.16)}
.popup-scheda textarea::placeholder{color:#9A958A}
.stelle-scelta{display:flex;gap:2px;margin-left:-2px}
.stella-b{color:#D2CCBB}

/* scanner del negozio: mirino squadrato; se la fotocamera manca resta
   un riquadro chiaro col suo messaggio, non un nero col testo scuro */
.scanner::after{border-radius:0}
.scanner:has(> p.aiuto){aspect-ratio:auto;background:var(--carta-2);border:1px dashed #D9D3C3}
.scanner:has(> p.aiuto)::before,.scanner:has(> p.aiuto)::after{content:none}
.scanner:has(> p.aiuto) p{color:var(--fumo);text-align:center}

/* "Scrivi al negozio": resta ben visibile ma con i colori del marchio */
.riquadro-messaggi{border:1px solid #E6D3A8;padding:12px 14px}
.riquadro-messaggi-icona{background:#4B5A34;color:#FAF6EE;width:40px;height:40px}
.riquadro-messaggi > svg{color:#4B5A34}
.riquadro-messaggi-testo b{font-size:15.5px;font-weight:600;line-height:1.3}

/* prezzo nella scheda offerta: il 30px scritto nel markup era fuori scala */
#prezzoDettaglio{font-size:26px!important;font-weight:600}

/* profilo: respiro sotto la testata e righe d'elenco meno pesanti */
.capo-profilo{margin-bottom:18px}
.pannello.elenco .voce{font-weight:500}

/* selettore a linguette (Entra/Registrati, stato delle offerte): lo stesso
   binario delle altre scelte a due voci, una riga sola anche con tre voci */
.linguette{background:var(--carta-2);border:0;padding:4px;gap:4px}
.linguette button{
  padding:11px 4px;font-size:14px;min-width:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.linguette button.viva{background:var(--carta);color:var(--inchiostro);box-shadow:0 1px 2px rgba(23,23,18,.1),0 0 0 1px rgba(23,23,18,.04)}
@media (max-width:380px){ .linguette button{font-size:12.5px;letter-spacing:-.01em} }

/* controlli sopra le foto, mirino e scheletri: a spigolo vivo */
.cambia-foto{border-radius:0;background:rgba(23,23,18,.62)}
.scanner-etichetta{border-radius:0}
.osso .b,.osso .c{border-radius:0}

/* contatori del modulo rapido (quantità, prezzi) */
.contatore{gap:12px}
.contatore button{width:52px;height:52px;font-size:24px}
.contatore output{font-size:22px;font-weight:600}
.passo > label{font-size:14.5px}

/* riquadro "Inquadra il prodotto" */
.riconoscimento-hero h2{font-size:18px;line-height:1.3}
.riconoscimento-hero .btn{font-size:15px;padding:14px 20px}
#app > h1 + .linguette{margin-top:14px}

/* filtri dello storico: scorrono a filo del bordo come gli altri, il
   margine scritto nel markup annullava quello negativo e li spostava dentro */
#filtriStorico{margin:6px -16px 4px!important}

/* conferma del riconoscimento: l'azione principale in alto a tutta
   larghezza, le altre due affiancate sotto (in fila, su 360px il testo
   andava a capo su tre righe) */
.riconoscimento-azioni{flex-wrap:wrap;gap:8px}
.riconoscimento-azioni .btn{flex:1 1 0;min-width:0;padding:12px 10px;font-size:14.5px}
.riconoscimento-azioni .btn:not(.quieto){order:-1;flex:1 1 100%}
.riconoscimento-foto{aspect-ratio:16/10}
.riconoscimento-anteprima{padding:12px 14px;gap:8px}
.riconoscimento-anteprima b{font-size:15px}
#testa{background:rgba(250,248,243,.97)}

/* stati vuoti e d'errore */
.niente h2{font-size:18px;font-weight:600;color:var(--inchiostro)}
.niente .grande{box-shadow:none}

/* menu a schermo intero e schermata d'accesso: tinta unita, voci in scala */
.menu-tendina,.splash-accesso{background:#4B5A34}
.menu-marchio{border-radius:0}
.menu-voci a{font-size:clamp(26px,7.6vw,34px);font-weight:600;line-height:1.3;letter-spacing:-.01em}
.menu-minute a{font-size:13px}
.splash-accesso-nome{font-weight:600}

/* link dentro una frase (es. "inseriscili a mano"): in linea col testo */
p .collega,.aiuto .collega{display:inline;width:auto;margin:0;padding:0;font-size:inherit;font-weight:600;text-align:inherit}
/* dichiarazioni con la casella da spuntare: stessa misura del testo d'aiuto */
.spunta span{font-size:14.5px;line-height:1.5;color:var(--fumo)}
.spunta input{width:22px;height:22px}
.menu-minute a{color:rgba(246,241,228,.74)}

/* ═══════════════════════════════════════════════════════════════
   accessibilità e leggibilità
   Correzioni mirate: contrasto del testo (almeno 4,5:1, 3:1 per i
   titoli grandi), zone di tocco da 44px, testo mai sotto i 12px,
   anello di messa a fuoco visibile anche sui fondi verdi, movimento
   ridotto. Solo stile: nessun id/classe usato dal JS cambia.
   ═══════════════════════════════════════════════════════════════ */

/* testo solo per chi usa un lettore di schermo (titolo di pagina che a
   video non serve perché la schermata ha già i suoi segnali visivi) */
.solo-lettori{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ── messa a fuoco ─────────────────────────────────────────── */
/* sui fondi verdi scuri l'anello verde sparisce: lì diventa oro */
.vetro :focus-visible,.verde-fascia :focus-visible,.richiamo-vetro :focus-visible,
.nh-garanzie :focus-visible,.nh-negozi :focus-visible,.social-invito :focus-visible,
.menu-tendina :focus-visible,.apertura :focus-visible,.splash-accesso :focus-visible,
#capoTesta > div:first-child :focus-visible,.nh-btn.pieno:focus-visible{
  outline-color:#E9AE33;
}
/* i campi avevano outline:0 e restava solo un filo di bordo: ora c'è un
   anello vero quando ci si arriva da tastiera */
.campo input:focus-visible,.campo select:focus-visible,.campo textarea:focus-visible,
.cerca input:focus-visible,.chat-riga input:focus-visible{
  outline:2.5px solid var(--verde-vivo);outline-offset:1px;
}
/* il selettore lingua è trasparente sopra l'etichetta: l'anello va sul contenitore */
.lingua:focus-within{outline:2.5px solid var(--verde-vivo);outline-offset:2px}
.lingua select:focus-visible{outline:0}

/* ── contrasto ─────────────────────────────────────────────── */
/* pannello d'apertura (Entra, Entra negozio, Il tuo punto vendita…):
   il verde di partenza era troppo chiaro per l'etichetta oro e per il
   crema sottile; si parte più scuro e il riflesso oro è più discreto */
.vetro{background:linear-gradient(142deg,#3A4727 0%,#34411F 50%,#2E3A1F 100%)}
.vetro::after{background:radial-gradient(circle,rgba(233,174,51,.26),transparent 68%)}
.vetro p{color:rgba(246,241,228,.88)}
.cambia-area{color:rgba(246,241,228,.94)}
.numeroni span{color:rgba(233,174,51,.95)}
/* etichetta sopra la foto del campo e riquadro sul campo */
.richiamo-vetro{background:rgba(15,18,10,.62)}
.richiamo-vetro .occhiello{color:rgba(255,255,255,.92)}
/* fascia verde sulla foto: le note e i numeri restano leggibili */
.verde-fascia .numeroni.grandi span{color:rgba(243,239,228,.86)}
.verde-fascia .fonte{color:rgba(243,239,228,.78)}
.green-testo{color:rgba(243,239,228,.92)}
.social-invito p{color:rgba(246,241,228,.88)}
/* numeri dei passi e voce attiva dei selettori: verde marchio più scuro
   sotto il testo crema (prima #6B7A52, 4,1:1) */
.passo-carta .cifra,
.scelta-vetrina button.viva,
.scelta-vetrina.con-foto button.viva{background:#4B5A34}
.scelta-vetrina:not(.con-foto) button.viva{background:var(--carta)}
.scelta-vetrina.con-foto button.viva{border-color:#4B5A34}
/* sconto che cresce sulle foto: fondo più scuro e battito che non
   schiarisce il testo */
.bolla.cresce{background:#4B5A34;animation-name:battito-lieve}
@keyframes battito-lieve{50%{opacity:.9}}
/* iniziali del profilo e fumetto dei messaggi */
.ritratto{background:linear-gradient(148deg,#4B5A34,#2E3A1F)}
.ritratto.negozio{background:linear-gradient(148deg,#8A5A1E,#2A1806)}
.chat-bolla.mia{background:#4B5A34}
.chat-bolla .chat-ora{opacity:.85}
/* etichetta «Account cliente» e simili */
.gettone.fresco{color:#3F5A20}
/* menu a tutto schermo e schermata d'accesso: partenza meno chiara */
/* (la voce attiva è oro: serve un verde abbastanza scuro anche in cima) */
.menu-tendina,.splash-accesso{background:linear-gradient(165deg,#4B5A34 0%,#3A4727 55%,#2E3A1F 100%)}
.menu-minute{row-gap:0}
.menu-minute a{color:rgba(246,241,228,.86);display:inline-flex;align-items:center;min-height:44px}
/* segnaposto: prima #9A958A (2,9:1), ora 4,6:1 */
.campo input::placeholder,.campo textarea::placeholder,.cerca input::placeholder,
.chat-riga input::placeholder{color:#756F63;opacity:1}
/* bordo dei campi: almeno 3:1 sul fondo, così il campo si vede */
.campo input,.campo select,.campo textarea,.cerca input{border-color:#8C887A}

/* ── testo mai sotto i 12px ───────────────────────────────── */
.lingua span,.numeroni span,.mini-consigliato .motivo,.fonte,
.nh-occhiello,.nh-tappe li,.chat-bolla .chat-ora{font-size:12px}
.carrello-badge{font-size:12px;min-width:18px;height:18px;line-height:1}
.motto{font-size:12px}
@media (max-width:560px){ .motto{display:none} }
#barra a{font-size:12px;letter-spacing:0;padding-left:2px;padding-right:2px}
#capoTesta > div:first-child{
  font-size:12px!important;letter-spacing:.03em!important;line-height:1.25;text-wrap:balance;
}
.scanner-etichetta{font-size:12px}
.menu-marchio{font-size:12px;color:rgba(246,241,228,.9)}

/* ── zone di tocco da 44px ────────────────────────────────── */
/* si allarga l'area sensibile senza spostare niente nella pagina */
.btn.mini,.collega,.torna,.cambia-area,.cuore.chiaro,.ritratto{position:relative}
.btn.mini::before{content:'';position:absolute;z-index:1;inset:-3px 0}
.collega::before{content:'';position:absolute;z-index:1;inset:-8px -4px}
.torna::before{content:'';position:absolute;z-index:1;inset:-11px -6px}
.cambia-area::before{content:'';position:absolute;z-index:1;inset:-12px -6px}
.cuore.chiaro::before{inset:-12px;z-index:1}
.logo{position:relative}
.logo::before{content:'';position:absolute;inset:-4px 0}
.tondo::before{inset:-5px}
.ritratto::before{content:'';position:absolute;inset:-4px}
.lingua select{inset:-6px -4px;width:calc(100% + 8px);height:calc(100% + 12px)}
.chiusura-righe{row-gap:0;padding:12px 22px}
.chiusura-righe a{display:inline-flex;align-items:center;min-height:44px}
.scelta-vetrina:not(.con-foto) button{min-height:44px}
.fila:has(> #ord) .gettone,.fila:has(> #ord) .pastiglia,.fila:has(> #ord) #ord{min-height:44px}
.btn.mini.pieno{min-height:44px}
/* i cinque pallini stanno in una riga: 12px da 390px in su, sotto la scritta
   scala con lo schermo (non scende sotto i 10,5px) per non sovrapporsi */
@media (max-width:440px){
  .categoria-voce{font-size:min(12px,max(10.5px,3.08vw));letter-spacing:-.02em}
}

/* ── movimento ridotto ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-iteration-count:1!important;scroll-behavior:auto!important}
  /* le sezioni compaiono subito, senza sfocatura né scorrimento */
  .rivela,.a-scalare > *{opacity:1;transform:none;filter:none;transition:none}
  .figura{transition:none}
  .marchio::after{display:none}
}

/* modalità di lancio (CONFIG.MODALITA_PROVA = false): si nascondono la
   striscia "ambiente di prova" e i pulsanti per saltare il pagamento */
.produzione #capoTesta > div:first-child,
.produzione #bBypassaPagamento,
.produzione #bBypassaPagamento + .aiuto,
.produzione [data-bypassa]{display:none!important}

/* senza la barra in basso (prima dell'accesso) il banner cookie e gli
   avvisi stanno vicini al bordo, non sollevati come la barra che non c'è */
body.senza-barra #cookie{bottom:calc(12px + env(safe-area-inset-bottom, 0px))}
body.senza-barra #avviso{bottom:calc(14px + env(safe-area-inset-bottom, 0px))}