/* ═══════════════════════════════════════════════════════════════════════
   MINI APP VETRINA — FOGLIO DI STILE (v2)
   Stessi token del sito (sito.html): stessi colori, stessi due caratteri.
   Bebas Neue per nomi e prezzi, Barlow per tutto quello che si legge.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKEN ════════════════════════════════════════════════════════ */
:root{
  --fondo:#121316;
  --superficie:#1c1e22;
  --superficie-2:#25282d;
  --linea:#34373d;
  --linea-forte:#55595f;
  --testo:#f2f2ef;
  --muto:#a6a9ae;
  --azione:#f2f2ef;
  --azione-testo:#121316;
  --accento:#2aa6e0;
  --ok:#6fd08c;
  --errore:#ff7a70;

  --f-titoli:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --f-testo:'Barlow',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-graffiti:'Permanent Marker',cursive;

  --r-s:10px;
  --r-m:16px;
  --r-pill:999px;
  --lato:14px;
  --tocco:44px;                        /* altezza minima di un controllo */
  --sicuro-basso:env(safe-area-inset-bottom,0px);
  --sicuro-sopra:env(safe-area-inset-top,0px);

  /* app shell (chat / account / zero): stessa famiglia, materiale diverso
     dalla vetrina — superficie più profonda, raggio "squircle", divisore
     tratteggiato (da ticket/DM) invece della linea piena della vetrina,
     più un secondo accento (ember) riservato al filo privato con Zero. */
  --superficie-app:#191c22;
  --linea-app:#30343b;
  --r-app:20px;
  --accento-ember:#ff8a4d;
  --tabbar-h:60px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100dvh;
  background:var(--fondo);color:var(--testo);
  font:400 15px/1.5 var(--f-testo);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  padding-bottom:calc(96px + var(--sicuro-basso));
}
body.bloccato{overflow:hidden}
h1,h2,h3{font-family:var(--f-titoli);font-weight:400;letter-spacing:.03em;line-height:1;margin:0}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accento);outline-offset:2px}

/* ── 2. TESTATA ══════════════════════════════════════════════════════ */
.testata{display:flex;align-items:center;gap:12px;padding:14px var(--lato) 6px}
.testata .logo{width:40px;height:40px;border-radius:50%;border:2px solid var(--testo);flex:0 0 auto}
.testata h1{font-size:28px}
.testata .titolo p{font-size:13px;color:var(--muto);margin-top:2px}
.link-sito{
  margin-left:auto;padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid var(--linea-forte);font-size:14px;font-weight:600;text-decoration:none;
}

/* ── 3. RICERCA + CATEGORIE ══════════════════════════════════════════ */
.strumenti{
  position:sticky;top:0;z-index:20;
  padding:10px var(--lato) 10px;
  background:rgba(18,19,22,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
}
.strumenti.staccata{border-bottom-color:var(--linea)}
.ricerca{
  display:flex;align-items:center;gap:8px;height:var(--tocco);padding:0 12px;
  background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-s);
}
.ricerca:focus-within{border-color:var(--accento)}
.ricerca svg{width:18px;height:18px;flex:0 0 auto;stroke:var(--muto);fill:none;stroke-width:2;stroke-linecap:round}
.ricerca input{flex:1;min-width:0;height:100%;border:0;background:none;outline:none;font-size:16px}
.ricerca input::placeholder{color:#7d8187}

.categorie{display:flex;gap:6px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.categorie::-webkit-scrollbar{display:none}
.categorie button{
  flex:0 0 auto;min-height:36px;padding:0 14px;border-radius:var(--r-pill);
  border:1px solid var(--linea-forte);background:transparent;font-size:14px;font-weight:500;
}
.categorie button[aria-pressed="true"]{background:var(--azione);color:var(--azione-testo);border-color:var(--azione)}

/* ── 4. AVVISO DI STATO ══════════════════════════════════════════════ */
.stato{margin:10px var(--lato) 0;padding:10px 12px;border-radius:var(--r-s);font-size:14px;
  background:var(--superficie);color:var(--muto);text-align:center}
.stato.errore{background:rgba(255,122,112,.1);color:#ffd2ce}

/* ── 5. GRIGLIA ══════════════════════════════════════════════════════ */
.griglia{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px var(--lato)}
@media (min-width:560px){ .griglia{grid-template-columns:repeat(3,1fr)} }
@media (min-width:820px){ .griglia{grid-template-columns:repeat(4,1fr)} }

.card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-m);
}
.card .foto{aspect-ratio:1;width:100%;object-fit:cover;background:#0d0e10}
.card .foto-vuota{
  aspect-ratio:1;display:grid;place-items:center;background:#17181b;
  font:400 56px/1 var(--f-titoli);color:#3c3f44;
}
.card .corpo{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;flex:1}
.card .cat{font-size:12px;color:var(--muto)}
.card .nome{font-size:22px}
.card .apri{all:unset;cursor:pointer}
.card .apri::after{content:"";position:absolute;inset:0}       /* tutta la scheda è toccabile */
.card .apri:focus-visible::after{outline:2px solid var(--accento);outline-offset:-2px;border-radius:var(--r-m)}
.card .riga-basso{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.card .prezzo{font:400 20px/1 var(--f-titoli);letter-spacing:.03em}
.card .prezzo small{font:500 12px var(--f-testo);color:var(--muto);letter-spacing:0}
.card .prezzo.chiedi{font:500 13px/1.2 var(--f-testo);color:var(--muto)}
.card .piu{
  position:relative;z-index:1;flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  border:0;background:var(--azione);color:var(--azione-testo);
  display:grid;place-items:center;
}
.card .piu svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.card .nel-carrello{
  position:absolute;top:8px;left:8px;z-index:1;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--accento);color:#06222f;
  font-size:12px;font-weight:700;
}
.card .badge-esaurito{
  position:absolute;top:8px;left:8px;z-index:1;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--errore);color:#fff;
  font-size:12px;font-weight:700;
}
.card.esaurito{opacity:.55}
.card.esaurito .foto,.card.esaurito .foto-vuota{filter:grayscale(.6)}
.card .piu[disabled]{opacity:.4;cursor:not-allowed}
.avviso-esaurito{
  background:rgba(255,122,112,.12);border:1px solid var(--errore);color:var(--errore);
  border-radius:var(--r-campo);padding:10px 14px;font-size:14px;font-weight:600;margin-bottom:4px;
}

.scheletro{aspect-ratio:.72;background:linear-gradient(100deg,var(--superficie) 40%,var(--superficie-2) 50%,var(--superficie) 60%) 0 0/200% 100%;animation:luccica 1.2s linear infinite}
@keyframes luccica{to{background-position:-200% 0}}

.vuoto{grid-column:1/-1;text-align:center;padding:40px 10px;color:var(--muto)}
.vuoto h2{font-size:28px;color:var(--testo);margin-bottom:6px}
.vuoto button{margin-top:14px}

/* ── 6. BOTTONI ══════════════════════════════════════════════════════ */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:50px;padding:0 18px;border:1px solid transparent;border-radius:var(--r-pill);
  background:var(--azione);color:var(--azione-testo);font-size:16px;font-weight:600;
}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--fantasma{background:transparent;color:var(--testo);border-color:var(--linea-forte)}
.btn--testo{background:none;color:var(--muto);min-height:var(--tocco);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.btn--piccolo{width:auto;min-height:40px;display:inline-flex;font-size:14px}
.btn .prezzo-btn{font:400 20px/1 var(--f-titoli);letter-spacing:.03em}

/* ── 7. BARRA ORDINE ═════════════════════════════════════════════════ */
.barra-ordine{
  position:fixed;left:var(--lato);right:var(--lato);
  bottom:calc(var(--tabbar-h) + 12px + var(--sicuro-basso));z-index:30;
  display:flex;align-items:center;gap:12px;min-height:56px;padding:0 18px 0 8px;
  border:0;border-radius:var(--r-pill);
  background:var(--azione);color:var(--azione-testo);
  box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:16px;font-weight:600;
  animation:entra .25s ease;
}
.barra-ordine .conteggio{
  min-width:40px;height:40px;padding:0 8px;border-radius:var(--r-pill);
  display:grid;place-items:center;background:var(--azione-testo);color:var(--azione);font-weight:700;
}
.barra-ordine .totale{margin-left:auto;font:400 22px/1 var(--f-titoli);letter-spacing:.03em}
.barra-ordine.salta{animation:salta .35s ease}
@keyframes entra{from{transform:translateY(120%)}}
@keyframes salta{50%{transform:scale(1.03)}}

/* ── 8. FOGLIO ═══════════════════════════════════════════════════════ */
.velo{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.6);animation:appare .2s ease}
.foglio{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
  padding:10px var(--lato) calc(22px + var(--sicuro-basso));
  background:var(--superficie);border-top:1px solid var(--linea);
  border-radius:20px 20px 0 0;outline:none;
  animation:sale .28s cubic-bezier(.2,.8,.2,1);
}
@media (min-width:640px){ .foglio{left:50%;width:560px;transform:translateX(-50%);animation:appare .2s ease} }
@keyframes sale{from{transform:translateY(100%)}}
@keyframes appare{from{opacity:0}}
.foglio-grip{width:40px;height:4px;margin:0 auto 8px;border-radius:2px;background:var(--linea-forte)}
.foglio-chiudi{
  position:absolute;top:10px;right:10px;width:var(--tocco);height:var(--tocco);
  border:0;border-radius:50%;background:transparent;display:grid;place-items:center;
}
.foglio-chiudi svg{width:20px;height:20px;stroke:var(--muto);stroke-width:2;stroke-linecap:round}
.foglio h2{font-size:34px;padding-right:44px}
.foglio .sotto{color:var(--muto);font-size:14px;margin:6px 0 16px}
.foglio .descrizione{color:#d6d7d4;font-size:14px;margin:0 0 18px}
.foglio .sezione{font-size:13px;font-weight:600;margin:18px 0 8px}

/* testa del foglio prodotto: foto piccola + nome */
.testa-prodotto{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.testa-prodotto img,.testa-prodotto .foto-vuota{width:72px;height:72px;border-radius:12px;object-fit:cover;flex:0 0 auto;
  background:#17181b;display:grid;place-items:center;font:400 32px/1 var(--f-titoli);color:#3c3f44}
.testa-prodotto .cat{font-size:13px;color:var(--muto);margin-top:4px}

/* varianti come chip */
.chip-varianti{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px}
.chip-varianti button{
  min-height:56px;padding:6px;border-radius:12px;border:1px solid var(--linea-forte);background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:600;
}
.chip-varianti button span{font-weight:400;font-size:13px;color:var(--muto)}
.chip-varianti button[aria-pressed="true"]{border-color:var(--accento);box-shadow:inset 0 0 0 1px var(--accento);background:rgba(42,166,224,.1)}
.chip-varianti button[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}

.riga-azione{display:flex;gap:10px;align-items:center;margin-top:20px}
.riga-azione .btn{flex:1}

/* selettore quantità */
.conta{display:inline-flex;align-items:center;height:50px;border:1px solid var(--linea-forte);border-radius:var(--r-pill)}
.conta button{width:var(--tocco);height:100%;border:0;background:none;font-size:20px}
.conta output{min-width:26px;text-align:center;font-weight:700}
.conta--piccolo{height:38px}
.conta--piccolo button{width:36px;font-size:18px}

/* ── 9. RIGHE DELL'ORDINE ════════════════════════════════════════════ */
.righe{list-style:none;margin:6px 0 0;padding:0}
.riga{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--linea)}
.riga .nome{font:400 20px/1.05 var(--f-titoli);letter-spacing:.03em}
.riga .nome small{display:block;font:400 13px/1.4 var(--f-testo);color:var(--muto);letter-spacing:0;margin-top:2px}
.riga .importo{font:400 20px/1 var(--f-titoli);text-align:right}
.riga .importo.chiedi{font:500 13px var(--f-testo);color:var(--muto)}
.riga .controlli{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}
.riga .togli{border:0;background:none;color:var(--muto);font-size:14px;text-decoration:underline;text-underline-offset:3px;padding:8px 0}

.totale-ordine{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0 4px}
.totale-ordine span{font-size:15px}
.totale-ordine b{font:400 30px/1 var(--f-titoli);font-weight:400;letter-spacing:.03em}
.nota-totale{font-size:13px;color:var(--muto);margin:0 0 6px}

/* ── 10. CAMPI ═══════════════════════════════════════════════════════ */
.campo{margin-top:14px}
.campo label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.campo label span{font-weight:400;color:var(--muto)}
.campo input,.campo textarea{
  width:100%;min-height:var(--tocco);padding:11px 12px;font-size:16px;
  background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-s);outline:none;
}
.campo input:focus,.campo textarea:focus{border-color:var(--accento)}
.campo textarea{min-height:76px;resize:vertical}
.campo .aiuto{display:block;font-size:12px;color:var(--muto);margin-top:5px}
.campo.errato input{border-color:var(--errore)}
.campo.errato .aiuto{color:var(--errore)}
.azioni-ordine{display:grid;gap:8px;margin-top:18px}

/* conferma */
.conferma{text-align:center;padding:18px 0 6px}
.conferma .spunta{width:60px;height:60px;margin:0 auto 14px;border-radius:50%;background:var(--ok);color:#0f2a18;display:grid;place-items:center}
.conferma .spunta svg{width:30px;height:30px;stroke:currentColor;stroke-width:3;fill:none}
.conferma h2{padding:0;font-size:36px}
.conferma p{color:var(--muto);margin:8px 0 22px}

/* ── 11. PIEDE ═══════════════════════════════════════════════════════ */
.piede{padding:24px var(--lato) 0;color:var(--muto);font-size:13px}
.piede h2{font-size:24px;color:var(--testo)}
.link-contatti{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.link-contatti a{
  display:flex;align-items:center;justify-content:center;min-height:var(--tocco);padding:8px;
  border-radius:var(--r-s);border:1px solid var(--linea);background:var(--superficie);
  color:var(--testo);font-weight:600;text-decoration:none;text-align:center;
}

/* ── 12. AVVISO TEMPORANEO ═══════════════════════════════════════════ */
.toast{
  position:fixed;left:50%;top:calc(12px + env(safe-area-inset-top,0px));z-index:99;
  transform:translateX(-50%);max-width:calc(100% - 28px);
  padding:10px 16px;border-radius:var(--r-pill);
  background:var(--superficie-2);border:1px solid var(--linea-forte);
  font-size:14px;font-weight:600;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.45);
  animation:appare .15s ease;
}
.toast.errore{border-color:var(--errore);color:#ffd2ce}

/* ── 13. MOVIMENTO RIDOTTO ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   TASK 9 — PWA: viste (chat / zero / account), annunci, push, install
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 14. SEZIONI (viste nascoste fuori dalla vetrina; nav = .tabbar, §18) ─── */
body:not([data-vista="vetrina"]) .testata,
body:not([data-vista="vetrina"]) .strumenti,
body:not([data-vista="vetrina"]) #stato,
body:not([data-vista="vetrina"]) #griglia,
body:not([data-vista="vetrina"]) #bento,
body:not([data-vista="vetrina"]) .piede,
body:not([data-vista="vetrina"]) .barra-ordine{display:none}

body[data-vista="vetrina"] .app-header{display:none}

/* tabbar SEMPRE visibile (anche in vetrina): altrimenti il primo tap sui
   tab Chat/Account/Zero dalla vetrina non trova nulla da cliccare (era
   display:none qui) e il tocco passa al catalogo sotto — bug segnalato. */
body[data-vista="vetrina"]{padding-bottom:calc(96px + var(--tabbar-h) + var(--sicuro-basso))}

/* le viste app respirano sotto la tabbar fissa, non sotto la barra-ordine */
body:not([data-vista="vetrina"]){padding-bottom:calc(var(--tabbar-h) + 14px + var(--sicuro-basso))}

.vista{padding:18px var(--lato) 32px;max-width:680px;margin:0 auto;width:100%}
.vista-titolo{font-size:32px}
.vista-sotto{color:var(--muto);font-size:14px;margin:6px 0 4px}
.avviso-pw{
  background:rgba(42,166,224,.08);border:1px dashed var(--accento);
  border-radius:var(--r-s);padding:10px 12px;color:#cfe8f5;
}
.vista .vuoto{padding:40px 10px}

/* ── 15. CHAT PUBBLICA + PARLA CON ZERO ────────────────────────────── */
.chat-corpo{display:flex;flex-direction:column;gap:10px;padding:12px 0 16px;min-height:36dvh}
.msg{
  max-width:84%;align-self:flex-start;padding:9px 13px;border-radius:var(--r-m);
  background:var(--superficie-2);border:1px solid var(--linea);
}
.msg b{display:block;font-size:12px;font-weight:600;color:var(--muto);margin-bottom:3px}
.msg p{font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.msg .quando{display:block;font-size:11px;color:#7d8187;margin-top:3px}
.msg.mio{align-self:flex-end;background:var(--superficie);border-color:var(--linea-forte)}
.msg.mio b{color:#d6d7d4}
.msg.zero{
  border-color:var(--accento);
  background:rgba(42,166,224,.08);
}
.msg.zero b{color:var(--accento)}

.chat-invio{display:flex;gap:8px;align-items:center}
.chat-invio input{
  flex:1;min-width:0;min-height:46px;padding:0 16px;font-size:16px;
  background:var(--superficie-2);border:1px solid var(--linea);border-radius:var(--r-pill);outline:none;
}
.chat-invio input:focus{border-color:var(--accento)}
.chat-spedisci{
  flex:0 0 auto;width:46px;height:46px;border:0;border-radius:50%;
  background:var(--azione);color:var(--azione-testo);display:grid;place-items:center;
}
.chat-spedisci svg{width:20px;height:20px;fill:currentColor}
.chat-spedisci[disabled]{opacity:.4}

/* state line in chat (mute, errore rete) */
.chat-stato{font-size:13px;color:var(--muto);text-align:center;padding:4px 0}

/* ── 16. ACCOUNT ────────────────────────────────────────────────────── */
.account-scheda{
  background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r-m);
  padding:16px;margin-top:14px;
}
.account-scheda + .account-scheda{margin-top:10px}
.acc-user{font:400 36px/1 var(--f-titoli);letter-spacing:.03em}
.acc-info{color:var(--muto);font-size:14px;margin-top:4px}
.acc-azione{display:grid;gap:10px;margin-top:14px}
.acc-msg{
  margin-top:12px;padding:10px 12px;border-radius:var(--r-s);
  background:var(--superficie-2);font-size:14px;text-align:center;
}
.acc-msg.ok{color:var(--ok)}
.acc-msg.errore{background:rgba(255,122,112,.1);color:#ffd2ce}
.btn--pericolo{background:transparent;color:var(--errore);border-color:rgba(255,122,112,.5)}
.acc-verifica{display:grid;gap:10px;margin-top:14px;text-align:left}
.acc-verifica a{text-decoration:none}

/* card push (dopo il login) */
.card-push{
  margin-top:14px;padding:14px;border-radius:var(--r-m);
  border:1px solid var(--accento);background:rgba(42,166,224,.08);
}
.card-push h3{font-family:var(--f-titoli);font-weight:400;letter-spacing:.03em;font-size:24px;margin:0 0 6px;line-height:1}
.card-push p{font-size:14px;color:var(--muto);margin:0 0 12px}
.card-push .riga{display:flex;gap:8px}
.card-push .riga .btn{flex:1}

/* card iOS "Aggiungi a Home" */
.card-ios{
  position:fixed;left:var(--lato);right:var(--lato);
  bottom:calc(var(--tabbar-h) + 12px + var(--sicuro-basso));z-index:45;
  display:flex;align-items:center;gap:12px;padding:14px;
  background:var(--superficie);border:1px solid var(--linea-forte);border-radius:var(--r-m);
  box-shadow:0 10px 30px rgba(0,0,0,.5);font-size:14px;
  animation:entra .25s ease;
}
.card-ios p{flex:1}
.card-ios b{font-weight:700}

/* ── 16bis. OVERLAY INSTALLAZIONE (?installa=1) ─────────────────────── */
.installa-overlay{
  position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;padding:var(--lato);
  animation:appare .2s ease;
}
.installa-card{
  width:min(380px,100%);padding:28px 22px;text-align:center;
  background:var(--superficie);border:1px solid var(--linea-forte);border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.installa-logo{width:64px;height:64px;border-radius:18px}
.installa-card h2{font-size:26px;margin:0}
.installa-card p{color:#d6d7d4;font-size:14px;margin:0}
.installa-card b{color:var(--testo)}
.installa-card .btn{margin-top:6px}

/* ── 17. POPUP ANNUNCIO ─────────────────────────────────────────────── */
.annuncio{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:70;
  width:min(420px,calc(100% - 32px));padding:20px 18px;
  background:var(--superficie);border:1px solid var(--linea-forte);border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:appare .2s ease;
}
.annuncio h2{font-size:30px;padding-right:40px}
.annuncio p{margin-top:10px;color:#d6d7d4;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.annuncio .btn{margin-top:16px}
.annuncio-x{
  position:absolute;top:8px;right:8px;width:var(--tocco);height:var(--tocco);
  border:0;border-radius:50%;background:transparent;display:grid;place-items:center;
}
.annuncio-x svg{width:20px;height:20px;stroke:var(--muto);stroke-width:2;stroke-linecap:round;fill:none}

/* ═══════════════════════════════════════════════════════════════════════
   18. APP SHELL — header + tab bar per chat / account / "Parla con Zero"
   ═══════════════════════════════════════════════════════════════════════
   La vetrina (catalogo) non entra mai qui dentro: niente .testata duplicata,
   niente barra-ordine in conflitto. Materiale deliberatamente diverso dalla
   vetrina — superficie più scura e opaca (non il grigio-carta delle card
   prodotto), bordo tratteggiato come un taglio di scontrino invece della
   linea piena, angoli "squircle" più larghi. Un solo accento in più,
   l'ember, riservato al filo privato con Zero: lì dentro comunica diretto,
   altrove resta l'azzurro della vetrina. */

.app-header{
  position:sticky;top:0;z-index:25;display:flex;align-items:center;gap:12px;
  padding:calc(12px + var(--sicuro-sopra)) var(--lato) 12px;
  background:var(--superficie-app);
  border-bottom:1px dashed var(--linea-app);
}
.app-header img{width:44px;height:44px;border-radius:14px;flex:0 0 auto;object-fit:cover}
.app-header-testo h1{font-size:24px;letter-spacing:.04em}
.app-header-testo p{font-size:12px;color:var(--muto);margin-top:2px}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;height:var(--tabbar-h);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--superficie-app);
  border-top:1px dashed var(--linea-app);
  padding-bottom:var(--sicuro-basso);
}
.tabbar button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:0;background:none;color:var(--muto);font-size:11px;font-weight:600;
  border-radius:var(--r-s);
}
.tabbar button svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-pressed="true"]{color:var(--testo)}
.tabbar button.tabbar-zero[aria-pressed="true"]{color:var(--accento-ember)}
.tabbar button.tabbar-zero[aria-pressed="true"] svg{fill:var(--accento-ember);stroke:var(--accento-ember)}
.tabbar button:not(.tabbar-zero)[aria-pressed="true"] svg{stroke:var(--accento)}

/* le viste app usano il materiale .superficie-app invece delle card prodotto:
   raggio diverso (squircle), bordo tratteggiato anziché pieno */
body:not([data-vista="vetrina"]) .account-scheda,
body:not([data-vista="vetrina"]) .chat-corpo .msg,
body:not([data-vista="vetrina"]) .card-push,
body:not([data-vista="vetrina"]) .card-ios{
  border-radius:var(--r-app);
}
body:not([data-vista="vetrina"]) .account-scheda{
  background:var(--superficie-app);border:1px dashed var(--linea-app);
}

/* ═══════════════════════════════════════════════════════════════════════
   19. REDESIGN 2026-10-21 — splash graffiti, titolo graffiti, Widget Grid
   (Home a blocchi), assistente flottante, sezione Ordini, link "scrivi a
   Zero" dentro Chat. Stessa palette --fondo/--superficie/--accento del
   resto dell'app: nessun colore nuovo introdotto.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 19.1 SPLASH ───────────────────────────────────────────────────── */
.splash{
  position:fixed;inset:0;z-index:100;background:var(--fondo);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity .4s ease;
}
.splash--via{opacity:0;pointer-events:none}
.splash-logo{
  width:88px;height:88px;border-radius:26px;overflow:hidden;
  border:2px solid var(--accento);box-shadow:0 0 50px rgba(42,166,224,.3);
  animation:splash-entra .5s cubic-bezier(.2,.8,.2,1);
}
.splash-logo img{width:100%;height:100%;object-fit:cover}
.splash-titolo{
  font-family:var(--f-graffiti);font-size:44px;letter-spacing:1px;
  color:var(--testo);transform:rotate(-2deg);text-align:center;
  animation:splash-entra .5s .1s cubic-bezier(.2,.8,.2,1) backwards;
}
.splash-sotto{color:var(--muto);font-size:13px;letter-spacing:.04em}
@keyframes splash-entra{from{opacity:0;transform:translateY(14px) rotate(-2deg)}}

/* ── 19.2 TITOLO GRAFFITI (testata) ───────────────────────────────── */
.titolo-graffiti{
  font-family:var(--f-graffiti);font-weight:400;font-size:26px;
  letter-spacing:.5px;transform:rotate(-1.5deg);line-height:1;
}
.bell-btn{
  margin-left:auto;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--linea);background:var(--superficie-2);
  display:grid;place-items:center;font-size:18px;color:var(--testo);flex:0 0 auto;
}

/* ── 19.3 WIDGET GRID (Home a blocchi) ────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:78px;gap:10px;padding:4px var(--lato) 2px}
.bento:empty{display:none}
.w{
  border-radius:var(--r-m);padding:13px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;background:var(--superficie);
  border:1px solid var(--linea);cursor:pointer;color:inherit;text-align:left;
}
.w-ic{font-size:19px;margin-bottom:auto}
.w-lbl{font-size:11px;color:var(--muto);text-transform:uppercase;letter-spacing:.03em;font-family:var(--f-testo)}
.w-val{font:400 24px/1 var(--f-titoli);letter-spacing:.03em}
.w-sub{font-size:11.5px;color:var(--muto);margin-top:2px}
.w-tag{display:inline-block;background:var(--accento);color:#06222f;font-size:10px;font-weight:800;
  padding:2px 8px;border-radius:var(--r-pill);margin-bottom:5px;text-transform:uppercase;font-family:var(--f-testo)}
.w-badge{display:inline-block;background:var(--accento-ember);color:#1a0d05;font-size:9.5px;font-weight:800;
  padding:2px 7px;border-radius:var(--r-pill);margin-top:4px;font-family:var(--f-testo)}
.w-badge.ok{background:var(--ok);color:#0f2a18}

.w-hero{grid-column:span 4;grid-row:span 2;flex-direction:row;align-items:center;gap:14px;background:var(--superficie-2)}
.w-hero-ph{width:60px;height:60px;border-radius:14px;object-fit:cover;flex:0 0 auto}
.w-hero .foto-vuota{width:60px;height:60px;border-radius:14px;flex:0 0 auto;font-size:26px}
.w-hero h3{font-size:19px;margin-bottom:2px}
.w-pz{font:400 22px/1 var(--f-titoli);letter-spacing:.03em;color:var(--testo)}

.w-saldo{grid-column:span 2;grid-row:span 2;border-color:var(--accento)}
.w-saldo--ospite{justify-content:center}
.w-saldo--ospite .w-lbl{font-size:13px;color:var(--testo);text-transform:none;font-weight:600}

.w-order{grid-column:span 2}
.w-chat{grid-column:span 2}
.w-offers{grid-column:span 2;justify-content:center}
.w-offers b{font-size:13px;font-family:var(--f-testo);font-weight:700}
.w-offers span{font-size:11px;color:var(--muto)}
.w-offers--promo{border-color:var(--accento-ember);background:rgba(255,138,77,.08)}

.w-rev{grid-column:span 4;flex-direction:row;align-items:center;gap:10px;border-style:dashed}
.w-rev b{display:block;font-size:13.5px;font-family:var(--f-testo);font-weight:700}
.w-rev span{font-size:11.5px;color:var(--muto)}

/* ── 19.4 LINK "SCRIVI A ZERO" (dentro Chat, non più tab a sé) ────── */
.zero-link{
  display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;
  padding:14px 16px;border-radius:var(--r-app);border:1px dashed var(--accento-ember);
  background:rgba(255,138,77,.08);color:inherit;text-align:left;
}
.zero-link-ic{font-size:22px;flex:0 0 auto}
.zero-link-testo{flex:1}
.zero-link-testo b{display:block;font-size:14.5px;font-family:var(--f-testo)}
.zero-link-testo small{color:var(--muto);font-size:12px}
.zero-link-ar{font-size:18px;color:var(--accento-ember)}

.vista-indietro{
  background:none;border:0;color:var(--muto);font-size:13px;font-weight:600;
  padding:0 0 10px;display:block;
}

/* ── 19.5 SEZIONE ORDINI ──────────────────────────────────────────── */
.ordine-card{
  background:var(--superficie-app);border:1px dashed var(--linea-app);
  border-radius:var(--r-app);padding:14px 16px;margin-bottom:10px;
}
.ordine-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ordine-head b{font:400 20px/1 var(--f-titoli);letter-spacing:.03em}
.ordine-stato{
  margin-left:auto;font-size:10.5px;font-weight:800;padding:3px 10px;
  border-radius:var(--r-pill);background:var(--superficie-2);color:var(--muto);
  text-transform:uppercase;font-family:var(--f-testo);
}
.ordine-stato.spedizione{background:var(--accento-ember);color:#1a0d05}
.ordine-stato.gestita{background:var(--ok);color:#0f2a18}
.ordine-prodotto{font-size:13.5px;color:#d6d7d4;margin:0 0 8px}
.ordine-riga{display:flex;align-items:baseline;justify-content:space-between;font-size:12.5px;color:var(--muto)}
.ordine-totale{font:400 20px/1 var(--f-titoli);color:var(--testo)}
.ordine-card .btn{margin-top:10px}

/* ── 19.6 SCONTO IN CARRELLO (promo/punti) ────────────────────────── */
.sconto-opzioni{display:grid;gap:6px;margin-top:6px}
.sconto-op{
  display:flex;align-items:center;gap:8px;font-size:13.5px;
  padding:9px 12px;border-radius:var(--r-s);background:var(--superficie-2);
  border:1px solid var(--linea);cursor:pointer;
}
.sconto-op input{accent-color:var(--accento)}

/* ── 19.7 ASSISTENTE: avatar flottante + bottom sheet ─────────────── */
.assist-fab{
  position:fixed;right:14px;bottom:calc(var(--tabbar-h) + 16px + var(--sicuro-basso));z-index:50;
  width:56px;height:56px;border-radius:50%;padding:0;border:2px solid var(--accento);
  background:var(--superficie);overflow:hidden;box-shadow:0 10px 26px rgba(42,166,224,.3);
  animation:assist-pulsa 2.6s ease-in-out infinite;
}
.assist-fab img{width:100%;height:100%;object-fit:cover;display:block}
.assist-fab-dot{
  position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;
  background:var(--ok);border:2px solid var(--fondo);
}
@keyframes assist-pulsa{0%,100%{box-shadow:0 10px 26px rgba(42,166,224,.3)}50%{box-shadow:0 10px 32px rgba(42,166,224,.55)}}

.assist-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:71;max-width:560px;margin:0 auto;
  max-height:76dvh;display:flex;flex-direction:column;
  background:var(--superficie-app);border-top:1px dashed var(--linea-app);
  border-radius:var(--r-app) var(--r-app) 0 0;
  animation:sale .28s cubic-bezier(.2,.8,.2,1);
}
.assist-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px dashed var(--linea-app)}
.assist-head img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--accento)}
.assist-head b{display:block;font-size:14px}
.assist-online{color:var(--ok);font-size:11px}
.assist-x{margin-left:auto;width:32px;height:32px;border-radius:50%;background:var(--superficie-2);border:0;color:var(--testo);font-size:15px}
.assist-corpo{flex:1;overflow-y:auto;padding:14px 16px 20px;display:flex;flex-direction:column;gap:10px}
.assist-msg{max-width:84%;padding:10px 13px;border-radius:var(--r-app);font-size:13.5px}
.assist-msg.bot{align-self:flex-start;background:var(--superficie-2);border:1px dashed var(--linea-app)}
.assist-msg.user{align-self:flex-end;background:var(--azione);color:var(--azione-testo);font-weight:600}
.assist-invio{padding:10px 12px calc(10px + env(safe-area-inset-bottom));border-top:1px dashed var(--linea-app)}
.assist-msg i{color:#a9aba6}
.assist-suggerimenti{display:flex;flex-direction:column;gap:7px;margin-top:4px}
.assist-suggerimenti button{
  text-align:left;padding:10px 13px;border-radius:var(--r-app);
  background:var(--superficie-2);border:1px dashed var(--linea-app);color:var(--testo);font-size:13.5px;
}

@media (prefers-reduced-motion:reduce){
  .assist-fab{animation:none}
  .splash-logo,.splash-titolo{animation:none}
}

/* ── 19.8 CARD PANNELLO PROPRIETARIO (vista Account) ──────────────── */
.owner-card{border-color:var(--accento)}
.owner-card h3{font-family:var(--f-titoli);font-weight:400;letter-spacing:.03em;font-size:22px;margin:0 0 10px}
.owner-stats{display:grid;gap:6px;margin-bottom:14px}
.owner-stat-riga{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 12px;border-radius:var(--r-s);background:var(--superficie-2);
  font-size:13.5px;
}
.owner-stat-n{
  min-width:24px;text-align:center;padding:2px 9px;border-radius:var(--r-pill);
  background:var(--accento-ember);color:#1a0d05;font-weight:800;font-size:12.5px;
}
.owner-stat-n.zero{background:var(--linea);color:var(--muto)}

/* ═══════════════════════════════════════════════════════════════════════
   20. PANNELLO ADMIN DENTRO L'APP — Home owner a quadratoni (stile
   "riquadro con numero", come Panoramica del vecchio pannello HTML) +
   sotto-sezioni (Ordini/Recensioni/Chat/Punti/Promo/Annunci) nella
   stessa app, stessa tabbar, stesso tasto indietro.
   ═══════════════════════════════════════════════════════════════════════ */

/* Home owner: griglia 2 colonne di quadratoni-numero invece del bento
   normale (nessun catalogo finché non sceglie "Vedi come cliente"). */
.bento.bento-admin{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
.w-admin{
  grid-column:span 1;aspect-ratio:1;justify-content:center;align-items:flex-start;
  gap:6px;padding:16px;background:var(--superficie-app);border:1px dashed var(--linea-app);
}
.w-admin .w-ic{font-size:22px;margin-bottom:0}
.w-admin .w-val{font-size:38px;color:var(--testo)}
.w-admin .w-val.w-val-alert{color:var(--accento-ember)}
.w-admin .w-val.w-val-ok{color:var(--ok);font-size:22px}
.w-admin .w-lbl{font-size:12px;color:var(--muto);text-transform:none;letter-spacing:0;font-family:var(--f-testo)}
.w-admin-cliente{
  grid-column:span 2;aspect-ratio:auto;flex-direction:row;align-items:center;gap:10px;
  background:var(--superficie-2);border-style:solid;
}
.w-admin-cliente .w-ic{margin-bottom:0}
.w-admin-cliente .w-lbl{font-size:14px;color:var(--testo);font-weight:600}

/* banner "modalità anteprima cliente" nel bento normale (quando l'owner
   sceglie di vedere la vetrina come un cliente qualsiasi) */
.w-admin-torna{
  grid-column:span 4;flex-direction:row;align-items:center;gap:10px;
  background:rgba(42,166,224,.1);border-color:var(--accento);
}
.w-admin-torna b{display:block;font-size:13.5px;font-family:var(--f-testo)}
.w-admin-torna span{font-size:11.5px;color:var(--muto)}

/* sotto-sezioni admin (dentro vista-admin) */
.admin-filtri{display:flex;gap:6px;overflow-x:auto;margin-bottom:14px;scrollbar-width:none}
.admin-filtri::-webkit-scrollbar{display:none}
.chip-filtro{
  flex:0 0 auto;padding:7px 14px;border-radius:var(--r-pill);
  border:1px solid var(--linea-app);background:transparent;color:var(--testo);font-size:13px;
}
.chip-filtro.on{background:var(--azione);color:var(--azione-testo);border-color:var(--azione)}
.admin-lista{display:flex;flex-direction:column;gap:10px}
.admin-card{
  background:var(--superficie-app);border:1px dashed var(--linea-app);
  border-radius:var(--r-app);padding:14px 16px;margin-bottom:10px;
}
.admin-card-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.admin-card-head .w-badge{margin-left:auto}
.row-azioni{display:flex;gap:8px;align-items:center;margin-top:10px;flex-wrap:wrap}
.row-azioni input{
  flex:1;min-width:100px;background:var(--superficie-2);border:1px solid var(--linea);
  border-radius:var(--r-s);padding:9px 12px;color:var(--testo);font-size:13.5px;
}
.admin-chip-riga{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;border-radius:var(--r-s);background:var(--superficie-2);margin-bottom:8px;font-size:13.5px;
}
.admin-storico{margin-top:12px;border-top:1px dashed var(--linea-app);padding-top:10px}

/* ── accesso riservato (01/11/2026): senza sessione niente tabbar/carrello ── */
body[data-auth="no"] .tabbar{display:none}
body[data-auth="no"]{padding-bottom:calc(14px + var(--sicuro-basso))}