/* ===========================================================================
IL RESTO DEGLI STILI — tutto ciò che non serve a disegnare l'introduzione
---------------------------------------------------------------------------
Barra, menù, carrello, configuratore, storia, recensioni, mappe, piede.
Sta qui e non dentro anteprima.html per una ragione sola: da qui il browser
lo scarica SENZA fermare il disegno della prima schermata. In linea erano
104 KB da leggere prima di poter accendere un pixel; adesso ne restano 20.
Chi lo carica: il nella testa di anteprima.html, che
diventa media="all" appena il foglio è arrivato. Con JavaScript spento
provvede il è inline di suo: senza questo il riquadro della foto collassava. */
.prod .art>picture{display:block;width:100%;height:100%}
.focus .shot2 picture{display:block;width:100%}
.prod .art .pimg{width:100%;height:100%;object-fit:cover;border-radius:3px;
transition:transform .6s var(--ez),filter .6s var(--ez);filter:saturate(1.04) contrast(1.03)}
.prod:hover .art .pimg{transform:scale(1.05)}
.prod .art{padding:0}
/* Le tre in evidenza ora hanno le locandine del listino dentro un :
serve la regola sul contenitore, che di suo è inline. */
.sigcard .mini-art img{border-radius:99px}
.sigcard .mini-art picture{display:block;width:100%;height:100%}
.sigcard .mini-art .sigimg{width:100%;height:100%;object-fit:cover;border-radius:99px}
.prod .art svg{transition:transform .6s var(--ez)}
.prod:hover .art svg{transform:scale(1.055)}
.prod .lab{position:absolute;left:50%;bottom:11px;translate:-50% 0;border:1px solid rgba(223,174,78,.4);
background:rgba(6,4,10,.86);border-radius:99px;padding:6px 15px;font-family:var(--num);font-size:9px;font-weight:500;
letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:0;backdrop-filter:blur(5px);
transition:opacity .4s,transform .4s var(--ez)}
.prod:hover .lab{opacity:1;transform:translate(-50%,-2px)}
/* ---- i due filetti della scheda ----------------------------------------
Uno sotto la foto e uno sopra il tasto: senza, foto, descrizione e comando
erano un blocco unico e l'occhio non sapeva dove finiva una cosa e
cominciava l'altra. Sono righe da un pixel nell'oro tenue gia' usato in
tutto il sito, non linee grigie: separano senza tagliare.
Il filetto sopra il tasto sta sul .acts e non sul .body, cosi' resta
attaccato al tasto anche quando lo spazio avanzato lo spinge in basso. */
.prod .body{position:relative;flex:1;display:flex;flex-direction:column;padding:22px;
border-top:1px solid var(--line-g)}
.prod .r1{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.prod h3{font-family:var(--edit);font-weight:400;font-size:1.32rem;line-height:1.14;letter-spacing:-.015em}
.prod h3 button{font:inherit;color:inherit;text-align:left;transition:color .35s}
.prod h3 button:hover{color:var(--gold)}
.prod .desc{text-transform:none}
.price{flex:none;font-family:var(--num);font-size:15px;font-weight:700;color:var(--ember-l);letter-spacing:-.02em}
.prod .desc{margin-top:9px;flex:1;font-size:13px;line-height:1.68;color:rgba(247,242,232,.5);font-weight:300}
.prod .foot{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
/* Il tasto "Aggiungi" sta SEMPRE attaccato al fondo della scheda. Prima no:
sulle schede con la locandina la descrizione e nascosta, quindi il
contenuto si impilava in alto e lo spazio avanzato restava sotto il tasto.
Chi aveva una pastiglia in piu ("Il piu richiesto") aveva una riga in piu, e
il suo tasto finiva 40 px piu in basso di quello della scheda accanto: in
una fila di quattro erano quattro altezze diverse. margin-top:auto mangia
lo spazio avanzato sopra il tasto invece che sotto. */
.prod .acts{margin-top:auto;padding-top:14px;display:flex;gap:7px;
border-top:1px solid var(--line-g)}
.addbtn{flex:1;height:40px;border-radius:99px;border:1px solid var(--line-g);
font-family:var(--num);font-size:10.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
display:inline-flex;align-items:center;justify-content:center;gap:7px;position:relative;overflow:hidden;
transition:border-color .4s,color .4s,background .4s}
.addbtn:hover{border-color:var(--ember);background:var(--ember);color:#fff}
.addbtn.ok{border-color:var(--herb);background:rgba(147,188,94,.16);color:var(--herb)}
.editbtn{width:40px;height:40px;flex:none;border-radius:99px;border:1px solid var(--line-g);
display:inline-flex;align-items:center;justify-content:center;transition:border-color .4s,color .4s}
.editbtn:hover{border-color:var(--gold);color:var(--gold)}
@media(min-width:560px){.grid{grid-template-columns:repeat(2,1fr)}.mhead{flex-direction:row;align-items:flex-end;justify-content:space-between}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
/* Frecce del carosello foto: nascoste da desktop, dove la griglia a colonne
mostra già tutti i piatti senza bisogno di scorrere. Si accendono solo
nella fascia mobile, insieme allo scorrimento orizzontale di .grid. */
.menuscroll{position:relative}
.mnav-arrow{display:none;position:absolute;top:36%;translate:0 -50%;z-index:4;width:36px;height:36px;
align-items:center;justify-content:center;border-radius:99px;border:1px solid var(--line-g);
background:rgba(6,4,10,.75);color:var(--gold);backdrop-filter:blur(6px);
transition:opacity .3s,transform .2s,border-color .3s}
.mnav-arrow:active{transform:translateY(-50%) scale(.9)}
.mnav-arrow.prev{left:6px}
.mnav-arrow.next{right:6px}
/* Sull'elenco pizze le due righe hanno il testo in alto e in mezzo: al 36%
le frecce cadevano sopra gli ingredienti. Al 50% finiscono nello stacco
fra le due righe, dove non coprono nulla. */
.menuscroll:has(.pzlist) .mnav-arrow{top:50%}
.mnav-arrow[disabled]{opacity:.28;pointer-events:none}
.mnav-arrow[hidden]{display:none!important}
@media(min-width:1300px){.grid{grid-template-columns:repeat(4,1fr)}}
/* ----------------------------- configuratore ----------------------------- */
#crea{padding:96px 0;overflow:hidden}
#crea .glow{position:absolute;left:50%;top:-6%;width:min(1000px,120vw);aspect-ratio:16/10;translate:-50% 0;
border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(240,73,26,.07),transparent 66%)}
.tabs{position:relative;display:inline-flex;border:1px solid var(--line-g);background:var(--ink2);border-radius:99px;padding:4px}
.tabs .pill{position:absolute;top:4px;bottom:4px;border-radius:99px;background:var(--gold);z-index:0;
transition:transform .45s var(--ez),width .45s var(--ez)}
.tabs button{position:relative;z-index:1;border-radius:99px;padding:12px 26px;font-family:var(--num);font-size:11px;
font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,242,232,.58);transition:color .4s}
.tabs button.on{color:var(--ink)}
.bwrap{display:grid;gap:34px;margin-top:60px}
.pcard{position:relative;overflow:hidden;border:1px solid var(--line-g);border-radius:6px;
background:radial-gradient(85% 70% at 50% 40%,rgba(223,174,78,.1),transparent 72%),linear-gradient(var(--ink3),var(--ink))}
/* Il disegno di panino e pizza arrivava a 520px: su un telefono si mangiava
quasi due terzi di schermata prima che si vedessero gli ingredienti da
scegliere, che sono il motivo per cui si è aperta questa sezione. Ridotto,
e ancora di più su mobile (vedi la media query). */
.pcard .stage{margin:0 auto;padding:18px;max-width:380px;transition:opacity .22s}
.pcard .bar{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
border-top:1px solid var(--line-g);padding:20px 24px;background:rgba(6,4,10,.4)}
.pcard .bar h4{margin-top:5px;font-family:var(--edit);font-weight:400;font-size:21px;line-height:1.1}
.total{text-align:right}
.total b{display:block;font-family:var(--num);font-size:32px;font-weight:700;line-height:1;letter-spacing:-.03em}
.total.bump b{animation:bump .5s var(--ez)}
@keyframes bump{0%{transform:scale(1.18);color:var(--ember-l)}100%{transform:scale(1);color:var(--cream)}}
.summary{margin-top:16px;display:flex;flex-wrap:wrap;gap:6px;min-height:26px}
.summary span{border-radius:99px;padding:5px 12px;font-size:11.5px;animation:pop .35s var(--ez);
font-family:var(--num);letter-spacing:.02em}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.summary .add{border:1px solid rgba(147,188,94,.4);background:rgba(147,188,94,.12);color:#B7DC85}
.summary .rem{border:1px solid rgba(240,73,26,.34);background:rgba(240,73,26,.1);color:#FFA184;text-decoration:line-through}
.vgrid{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vbtn{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:5px;padding:15px 13px;text-align:left;
transition:border-color .4s,background .4s}
.vbtn:hover{border-color:rgba(247,242,232,.24)}
.vbtn.on{border-color:rgba(223,174,78,.65);background:rgba(223,174,78,.07)}
.vbtn b{display:block;font-family:var(--num);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;transition:color .4s}
.vbtn.on b{color:var(--gold)}
.vbtn small{display:block;margin-top:5px;font-size:10.5px;line-height:1.3;color:var(--mute)}
.vbtn em{display:block;margin-top:7px;font-family:var(--num);font-size:10.5px;font-style:normal;color:var(--ember-l)}
.vbtn em.less{color:var(--herb)}
.group{margin-top:30px}
.group .gh{display:flex;align-items:baseline;justify-content:space-between}
.ings{margin-top:13px;display:flex;flex-wrap:wrap;gap:7px}
.ing{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:99px;padding:8px 14px;
font-size:12.5px;color:rgba(247,242,232,.55);transition:border-color .35s,background .35s,color .35s,transform .2s}
.ing:hover{border-color:rgba(247,242,232,.28);color:rgba(247,242,232,.9)}
.ing:active{transform:scale(.95)}
.ing.on{border-color:rgba(223,174,78,.65);background:rgba(223,174,78,.1);color:var(--cream)}
.ing .box{width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;
border:1px solid rgba(247,242,232,.26);transition:border-color .35s,background .35s}
.ing.on .box{border-color:var(--gold);background:var(--gold)}
.ing .box svg{opacity:0;transform:scale(0);transition:opacity .25s,transform .3s var(--ez)}
.ing.on .box svg{opacity:1;transform:scale(1)}
.ing .p{font-family:var(--num);font-size:10.5px;color:var(--mute)}
/* L'etichetta "incluso" era oro al 60% su fondo quasi nero: misurato, un
contrasto di 4,04:1 contro i 4,5 richiesti dalle linee guida WCAG AA per
il testo piccolo. È l'unico punto del sito che non passava. Portata all'85%
arriva a 6,4:1, e da 9 a 10px si legge senza strizzare gli occhi. */
.ing .inc{font-family:var(--num);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:rgba(223,174,78,.85)}
.ing .hot,.ing .veg{font-size:9px}.ing .hot{color:var(--ember-l)}.ing .veg{color:var(--herb)}
.resets{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px}
.resets button{border:1px solid var(--line);border-radius:99px;padding:9px 17px;font-size:11.5px;color:var(--mute);
transition:border-color .4s,color .4s}
.resets button:hover{border-color:rgba(247,242,232,.28);color:var(--cream)}
@media(min-width:1024px){.bwrap{grid-template-columns:1.05fr 1fr;gap:60px}.preview .inner{position:sticky;top:100px}}
/* ================= RECENSIONI — tessere che fluttuano ==================
Non un carosello: uno spazio in cui le recensioni galleggiano piano e si
urtano fra loro. Le puoi afferrare e lanciare — restano dentro il riquadro
e rallentano da sole. Il voto sta al centro come un corpo fermo: le
tessere ci rimbalzano contro.
======================================================================= */
#recensioni{padding:96px 0;overflow:hidden}
#recensioni .bg{position:absolute;left:50%;top:52%;width:min(1200px,140vw);aspect-ratio:2/1;translate:-50% -50%;
pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(223,174,78,.08),transparent 68%)}
/* --------------------------- i due nastri ------------------------------
Ogni nastro scorre traslando la propria fila; le tessere dentro sono
duplicate, quindi a metà corsa l'animazione riparte da capo su un
contenuto identico e il ciclo non si vede. Le due direzioni opposte
danno profondità e impediscono che l'occhio segua una sola tessera.
L'animazione e' in pausa quando la sezione e' fuori dallo schermo: li' il
contenitore prende la classe .fuori. NON .vis, che non esiste piu': questo
nome sbagliato fa cercare il guasto dove non c'e'. E ricorda l'invariante
che tiene in piedi tutto: perche' non ci sia mai vuoto basta che META'
nastro sia piu' larga della finestra. Meta' misura 4046 px sul telefono e
4794 px sul computer, contro una finestra reale al massimo di ~3840 punti.
Se un giorno le recensioni scendessero sotto le sei per riga, questa
garanzia salterebbe. */
#rvrows{margin-top:34px;display:grid;gap:14px}
.rvrow{position:relative;overflow:hidden;cursor:pointer;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rvrow:focus-visible{outline:1px solid var(--gold);outline-offset:4px;border-radius:14px}
/* Le due righe partono NELLO STESSO ISTANTE, appena la pagina è pronta.
Prima l'animazione era in pausa e la faceva partire un osservatore quando
la sezione entrava a schermo: la seconda riga sembrava immobile a lungo
perché, girando al contrario e su un ciclo lungo, partiva dal proprio
punto di arrivo e lì il movimento non si notava. Il ritardo negativo la fa
cominciare a ciclo già avviato, così si vede muovere dal primo istante. */
/* NIENTE gap qui dentro, e non rimettercelo: lo stacco fra le tessere e' il
margin-right della tessera. Col gap una fila di 2N tessere ha solo 2N-1
stacchi, quindi meta' fila e' piu' corta di una copia intera di mezzo
stacco: 7 px misurati. L'animazione torna a capo 7 px prima del punto
giusto e a ogni giro si vede lo scatto. Col margine ogni tessera si porta
dietro il proprio stacco, 2N tessere fanno 2N stacchi, e meta' fila e'
esattamente una copia: il ritorno a capo diventa invisibile.
NIENTE will-change: la fila e' larga 8000 px, e chiederne la promozione
permanente vuol dire tenere viva sul telefono una superficie da oltre
20000 pixel veri anche da ferma. Quando il browser non ce la fa la disegna
VUOTA, e sotto c'e' il fondo scuro: e' la striscia nera che il titolare
vede comparire e restare li'. L'animazione su transform finisce sul
compositore lo stesso mentre gira; will-change non serviva a farla andare,
serviva solo a tenere in vita il livello anche da ferma. */
.rvtrack{display:flex;width:max-content;
animation:rvscroll var(--dur,40s) linear infinite;
animation-delay:calc(var(--dur,40s) * -0.25)}
.rvtrack.rev{animation-direction:reverse;animation-delay:calc(var(--dur,40s) * -0.6)}
/* Fermo per volontà di chi legge, perché il mouse è appoggiato sopra, o
perché la sezione è fuori dallo schermo e non ha senso farla girare. */
#rvrows .rvrow.stop .rvtrack,
#rvrows .rvrow.hover .rvtrack,
#rvrows.fuori .rvtrack{animation-play-state:paused}
@keyframes rvscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Segnale che la riga è in pausa: un filo dorato sul bordo. */
.rvrow.stop::after{content:'in pausa';position:absolute;right:10px;top:8px;z-index:3;
font-family:var(--num);font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--gold);background:rgba(6,4,10,.82);border:1px solid rgba(223,174,78,.35);
border-radius:99px;padding:3px 9px;backdrop-filter:blur(6px)}
.rvc{flex:0 0 268px;margin-right:14px;padding:15px 16px;border-radius:14px;
border:1px solid var(--line);background:rgba(19,16,25,.94);
box-shadow:0 18px 40px -22px rgba(0,0,0,.95);user-select:none}
.rvrow.stop .rvc{border-color:rgba(223,174,78,.32)}
.rvc .hd{display:flex;align-items:center;gap:9px}
.rvc .av{width:30px;height:30px;flex:none;border-radius:99px;display:flex;align-items:center;justify-content:center;
font-family:var(--num);font-size:10.5px;font-weight:700;color:var(--ink);background:linear-gradient(140deg,var(--gold-d),var(--gold))}
.rvc .nm{font-family:var(--num);font-size:11.5px;font-weight:500}
.rvc .dt{font-size:9.5px;color:var(--mute)}
/* Solo lo stacco sopra: NON toccare display, perché .stars è un inline-flex
e le sue cinque stelle stanno in fila grazie a quello. Mettendoci
display:block si incolonnavano una sotto l'altra. */
.rvc .stars{margin-top:9px}
.rvc .q{margin-top:9px;font-size:12px;line-height:1.6;color:rgba(247,242,232,.66);font-weight:300}
/* la lastra del voto: ora sta nel flusso, sopra i nastri */
#slab{margin-top:30px;width:min(470px,100%);
border:1px solid var(--line-g);border-radius:16px;padding:24px 26px;
background:linear-gradient(155deg,rgba(29,24,36,.97),rgba(6,4,10,.98));
backdrop-filter:blur(18px) saturate(150%);
box-shadow:0 40px 110px -40px rgba(0,0,0,.98),0 0 0 1px rgba(223,174,78,.14) inset}
#slab .row1{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap}
#slab .n{font-family:var(--num);font-size:clamp(50px,9vw,76px);font-weight:700;line-height:.78;letter-spacing:-.05em;color:var(--gold)}
/* Un blocco per sede: nome, voto, quante recensioni, link alla sua scheda */
.sede-voto+.sede-voto{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.sede-voto .t{font-family:var(--num);font-size:9.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.sede-voto .riga{margin-top:10px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.sede-voto .n{font-family:var(--num);font-size:clamp(38px,7vw,54px);font-weight:700;line-height:.8;letter-spacing:-.04em;color:var(--gold)}
#slab .dist{margin-top:18px;display:grid;gap:5px}
.dist .row{display:flex;align-items:center;gap:9px}
.dist .row>span:first-child{width:8px;font-family:var(--num);font-size:9.5px;color:var(--mute)}
.dist .t{flex:1;height:3px;border-radius:99px;background:rgba(247,242,232,.08);overflow:hidden}
.dist .t i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold));
transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--ez)}
.dist .row>span:last-child{width:26px;text-align:right;font-family:var(--num);font-size:9.5px;color:var(--mute)}
#slab .foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;
align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.rvc .gg,#slab .gg,.gbadge{display:inline-flex;align-items:center;gap:7px;font-family:var(--num);font-size:9.5px;
letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media(max-width:700px){
/* Le DUE strisce devono entrare insieme nella stessa schermata: con le
tessere a testo libero una recensione lunga alzava la riga e la seconda
scivolava fuori vista, così sembrava che ce ne fosse una sola. Il testo
si ferma a quattro righe — quanto basta a capire il senso — e le
tessere hanno tutte la stessa altezza. */
#rvrows{margin-top:20px;gap:10px}
.rvc{flex:0 0 224px;padding:12px 13px}
.rvc .q{font-size:11.5px;margin-top:7px;
display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.rvc .hd{gap:8px}
.rvc .av{width:26px;height:26px;font-size:9.5px}
/* il pannello del voto occupava mezza schermata prima delle strisce */
#slab{margin-top:20px;padding:16px 18px}
#slab .n{font-size:clamp(38px,11vw,54px)}
#slab .dist{margin-top:12px}
#slab .foot{margin-top:13px;padding-top:12px}
}
@media (prefers-reduced-motion:reduce){
/* niente scorrimento automatico: le righe si trascinano a mano */
.rvtrack{animation:none!important}
.rvrow{overflow-x:auto;cursor:default;scrollbar-width:none}
.rvrow::-webkit-scrollbar{display:none}
.rvrow.stop::after{display:none}
}
/* ================== SEDI — due pannelli che si illuminano ===============
Il pannello sotto il cursore (o toccato) cresce, la mappa riprende
colore e luce, l'altro si spegne. Serve a una domanda sola: quale delle
due ti è più comoda?
======================================================================= */
#sedi{padding:96px 0}
.split2{margin-top:56px;display:grid;gap:14px;grid-template-columns:1fr;
transition:grid-template-columns .8s var(--ez)}
.pan{position:relative;overflow:hidden;border-radius:10px;border:1px solid var(--line);
background:var(--ink2);min-height:560px;display:flex;flex-direction:column;cursor:pointer;
transition:border-color .7s var(--ez),box-shadow .7s var(--ez),opacity .7s var(--ez),filter .7s var(--ez)}
.pan .mapwrap{position:absolute;inset:0}
.pan iframe{position:absolute;inset:0;width:100%;height:100%;border:0;
filter:grayscale(1) brightness(.34) contrast(1.05);transition:filter .9s var(--ez);pointer-events:none}
.pan .tint{position:absolute;inset:0;background:linear-gradient(to top,var(--ink) 6%,rgba(6,4,10,.72) 46%,rgba(6,4,10,.5));
transition:background .8s var(--ez)}
.pan .lightup{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .8s var(--ez);
background:radial-gradient(420px circle at var(--mx,50%) var(--my,40%),rgba(223,174,78,.2),transparent 68%)}
.pan .in{position:relative;z-index:2;margin-top:auto;padding:30px}
.pan h3{margin-top:14px;font-family:var(--edit);font-weight:400;font-size:clamp(1.9rem,4.4vw,3rem);line-height:.98;letter-spacing:-.02em}
.pan .addr{margin-top:14px;font-size:15px;line-height:1.6;color:rgba(247,242,232,.7)}
.pan .more{display:grid;grid-template-rows:0fr;opacity:0;
transition:grid-template-rows .75s var(--ez),opacity .6s var(--ez),margin-top .7s var(--ez)}
.pan .more>div{overflow:hidden}
.pan.on .more{grid-template-rows:1fr;opacity:1;margin-top:22px}
.pan .hrow{display:flex;flex-wrap:wrap;gap:8px}
.pan .acts{margin-top:22px;display:flex;flex-wrap:wrap;gap:9px}
.pan .corner{position:absolute;right:22px;top:22px;z-index:2;display:flex;align-items:center;gap:8px}
.pan .pinico{position:absolute;left:50%;top:38%;translate:-50% -50%;z-index:1;opacity:.25;
transition:opacity .8s var(--ez),transform .9s var(--ez)}
.pan.on .pinico{opacity:1;transform:translateY(-8px)}
.pan.on{border-color:rgba(223,174,78,.6);box-shadow:0 0 0 1px rgba(223,174,78,.28),0 40px 100px -40px rgba(223,174,78,.4)}
.pan.on iframe{filter:grayscale(.14) brightness(1.02) contrast(1) saturate(1.06)}
.pan.on .tint{background:linear-gradient(to top,var(--ink) 4%,rgba(6,4,10,.5) 44%,rgba(6,4,10,.22))}
.pan.on .lightup{opacity:1}
.split2.hot .pan:not(.on){opacity:.42;filter:blur(1.5px) saturate(.4)}
@media(min-width:960px){
.split2{grid-template-columns:1fr 1fr}
.split2[data-act="0"]{grid-template-columns:1.28fr .72fr}
.split2[data-act="1"]{grid-template-columns:.72fr 1.28fr}
.pan{min-height:640px}
}
/* ============================== CARRELLO ================================
Finto ma completo: pannello laterale, quantità, ritiro o consegna, scelta
della sede, dati del cliente. Alla fine costruisce un messaggio WhatsApp
diretto al numero della sede scelta — nessun pagamento, nessun server.
======================================================================= */
#cartbtn{position:fixed;right:20px;--cart-b:20px;bottom:var(--cart-b);z-index:118;display:flex;align-items:center;gap:11px;
height:56px;padding:0 22px;border-radius:99px;background:var(--ember);color:#fff;
font-family:var(--num);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
box-shadow:0 18px 50px -14px rgba(240,73,26,.95),inset 0 1px 0 rgba(255,255,255,.24);
transform:translateY(120px);opacity:0;transition:transform .6s var(--ez),opacity .5s,background .4s,bottom .45s var(--ez)}
/* ---- il carrello non finisce mai sotto la fascia del consenso -------------
Le due cose vivono nello stesso angolo, in fondo allo schermo, e la fascia
sta più in alto nella pila (z-index 140 contro 118). Su un telefono da 390
punti la fascia è alta abbastanza da coprire tutto il tasto: chi voleva
aprire l'ordine premeva "Accetta le mappe", sbagliava bersaglio e dava un
consenso che non aveva scelto di dare. Finché la fascia è a schermo il
tasto — e l'avviso che lo accompagna — salgono sopra di lei, dell'altezza
che la fascia ha davvero in quel momento. Si sposta `bottom` e non
`transform`, perché la trasformazione è già impegnata dall'entrata e dal
battito del tasto. */
body.consenso #cartbtn{bottom:calc(var(--cart-b) + var(--consenso-h,0px))}
body.consenso #toast{bottom:calc(var(--toast-b,92px) + var(--consenso-h,0px))}
/* ---- LA FASCIA DEL CONSENSO NON DEVE COPRIRE NIENTE --------------------
Il tasto del carrello e l'avviso si alzavano gia'; il resto della pagina
no, e restava sotto. Il 16 agosto 2026 e' costato il terzo guasto della
stessa famiglia: nel menu' il tasto «Aggiungi» della prima scheda finiva
esattamente sotto la fascia, e il dito non lo raggiungeva. Non si vedeva
guardando — la scheda e' li', si legge tutta, e sopra c'e' un pannello
che sembra staccato — e passava o non passava per un soffio, perche' la
fascia compare dopo 2,6 secondi: bastava un prodotto in piu' da disegnare
per far scattare il caso.
La soluzione non e' spostare il singolo tasto ogni volta che se ne scopre
uno coperto: e' riservare in fondo alla pagina lo spazio che la fascia
occupa, cosi' NIENTE ci finisce sotto. Si scorre di quei pixel in piu' e
si arriva a tutto; appena il consenso e' dato lo spazio si richiude da
solo, perche' --consenso-h torna a zero. */
body.consenso{padding-bottom:var(--consenso-h,0px)}
#cartbtn.show{transform:none;opacity:1}
#cartbtn:hover{background:var(--ember-l)}
#cartbtn .cnt{min-width:24px;height:24px;padding:0 6px;border-radius:99px;background:rgba(6,4,10,.9);
display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
#cartbtn.pulse{animation:cpulse .55s var(--ez)}
@keyframes cpulse{0%{transform:scale(1)}40%{transform:scale(1.09)}100%{transform:scale(1)}}
#scrim{position:fixed;inset:0;z-index:124;background:rgba(6,4,10,.72);backdrop-filter:blur(8px);
opacity:0;pointer-events:none;transition:opacity .45s}
#scrim.show{opacity:1;pointer-events:auto}
#cart{position:fixed;inset:0 0 0 auto;z-index:126;width:min(470px,100vw);display:flex;flex-direction:column;
background:var(--ink2);border-left:1px solid var(--line-g);transform:translateX(101%);
transition:transform .62s var(--ez)}
#cart.open{transform:none}
#cart .ch{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line)}
/* IL PUNTO: il corpo scrollabile contiene anche il checkout, altrimenti il
tasto d'ordine finisce fuori schermo e non lo raggiungi. */
#cart .cb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;padding:20px 22px 8px;scrollbar-width:thin}
#cart .cb::-webkit-scrollbar{width:6px}
#cart .cb::-webkit-scrollbar-thumb{background:rgba(223,174,78,.35);border-radius:99px}
#cart .cf{flex:none;border-top:1px solid var(--line-g);padding:16px 22px 20px;background:var(--ink3);
box-shadow:0 -18px 40px -22px rgba(0,0,0,.9)}
#cart .fade{position:absolute;left:0;right:0;height:34px;pointer-events:none;z-index:3}
.citem{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid rgba(247,242,232,.06);animation:pop .35s var(--ez)}
.citem .thumb{width:92px;height:76px;flex:none;border-radius:6px;overflow:hidden;
background:radial-gradient(80% 70% at 50% 42%,rgba(223,174,78,.1),transparent 70%),var(--ink3);
border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:3px}
.citem .thumb svg{width:100%;height:100%}
.citem .nm{font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.01em}
/* le modifiche come pastiglie: si devono vedere, non sussurrare */
.citem .mods{margin-top:7px;display:flex;flex-wrap:wrap;gap:4px}
.citem .mods span{border-radius:99px;padding:3px 8px;font-family:var(--num);font-size:9.5px;letter-spacing:.04em}
.citem .mods .v{border:1px solid var(--line-g);background:rgba(223,174,78,.1);color:var(--gold)}
.citem .mods .a{border:1px solid rgba(147,188,94,.36);background:rgba(147,188,94,.1);color:#B7DC85}
.citem .mods .r{border:1px solid rgba(240,73,26,.32);background:rgba(240,73,26,.09);color:#FFA184;text-decoration:line-through}
.citem .mods .lbl{width:100%;margin-top:3px;font-family:var(--num);font-size:8.5px;font-weight:500;
letter-spacing:.18em;text-transform:uppercase;color:var(--mute);padding:0}
.citem .cdesc{margin-top:5px;font-size:11px;line-height:1.5;color:rgba(247,242,232,.42);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Riga delle azioni: prima il prezzo, poi due comandi veri e riconoscibili.
Erano due link di testo, "duplica" in oro e "rimuovi" sottolineato: la
parola più vistosa era quella che AGGIUNGE spesa, e togliere un articolo
sembrava un ripensamento scritto in piccolo. */
.citem .row2{margin-top:10px;display:flex;align-items:center;gap:8px}
.citem .cdup,.citem .cdel{display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--line-g);border-radius:99px;transition:border-color .3s,color .3s,background .3s}
.citem .cdup{margin-left:auto;height:30px;padding:0 12px;font-family:var(--num);font-size:11.5px;
font-weight:600;letter-spacing:.06em;color:var(--cream)}
.citem .cdup:hover{border-color:var(--gold);color:var(--gold)}
.citem .cdel{width:30px;height:30px;flex:none;color:var(--mute)}
.citem .cdel:hover{border-color:var(--ember);background:var(--ember);color:#fff}
.citem .row2 .pr{margin-left:0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.qty button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-family:var(--num);
font-size:14px;color:var(--mute);transition:color .3s,background .3s}
.qty button:hover{color:var(--cream);background:rgba(247,242,232,.07)}
.qty span{min-width:26px;text-align:center;font-family:var(--num);font-size:12.5px;font-weight:500}
.citem .pr{margin-left:auto;font-family:var(--num);font-size:14px;font-weight:700;color:var(--ember-l)}
.citem .del{font-size:11px;color:var(--mute);text-decoration:underline;text-decoration-color:var(--line);transition:color .3s}
.citem .del:hover{color:var(--ember-l)}
.empty{padding:56px 10px;text-align:center}
.empty svg{margin:0 auto 20px;opacity:.28}
.trow{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:5px 0;font-size:13px;color:var(--mute)}
.trow.big{padding-top:12px;margin-top:8px;border-top:1px solid var(--line);color:var(--cream)}
.trow.big b{font-family:var(--num);font-size:25px;font-weight:700;letter-spacing:-.02em}
/* ---- la tendina del conto ------------------------------------------------
Il dettaglio (subtotale, consegna, orario) si richiude e resta il totale.
Il piede è l'ultimo blocco di una colonna ancorata in basso, quindi quando
si accorcia il suo bordo di sopra SCENDE: trascinare la maniglia giù lo
rimpicciolisce, trascinarla su lo riapre. Il dito e il riquadro vanno
nello stesso verso, ed è l'unico motivo per cui il gesto si capisce senza
spiegazioni. Le classi sono quelle delle tendine .sez — .tt, .rp, .fr —
perché è la stessa cosa e deve sembrare la stessa cosa. */
.conti{position:relative}
.conti .mg{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--tap,44px);
padding:12px 0 8px;text-align:left;cursor:grab;user-select:none;-webkit-user-select:none;
/* il dito che prende la maniglia non deve far scorrere la pagina sotto */
touch-action:none}
.conti .mg:active{cursor:grabbing}
.conti .mg:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:8px}
/* la presa: la pastiglia dei pannelli che si tirano, messa dove la si cerca */
.conti .presa{position:absolute;left:50%;top:0;translate:-50% 0;width:42px;height:4px;
border-radius:99px;background:rgba(223,174,78,.34);transition:background .3s}
.conti .mg:hover .presa{background:var(--gold)}
.conti .tt{flex:none;font-family:var(--num);font-size:10px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--cream)}
.conti .rp{flex:1;min-width:0;text-align:right;font-size:11.5px;color:var(--mute);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conti .rc{display:none}
.conti.chiuso .ra{display:none}
.conti.chiuso .rc{display:inline}
.conti .fr{flex:none;width:16px;height:16px;color:var(--gold);display:flex;transition:transform .3s var(--ez)}
.conti .fr svg{width:100%;height:100%}
/* al contrario di .sez, e apposta: da chiusa la punta guarda dove il
dettaglio ricomparirà, cioè in su */
.conti.chiuso .fr{transform:rotate(180deg)}
/* ---- DA CHIUSA SI SCENDE IL PIU' POSSIBILE ------------------------------
Il titolare l'ha chiesto cosi': tirandola giù deve arrivare quasi in fondo,
e l'unica cosa che DEVE restare visibile è «Invia ordine su WhatsApp».
Chiusa, quindi, spariscono anche:
- la riga grande del Totale, perché il totale è passato dentro la maniglia
(vedi totaliHTML): il numero resta sempre sotto gli occhi, ma su una riga
sola invece che su due — sessanta punti in meno;
- la parola «Dettagli», che da chiusa non descrive più niente e ruba la
larghezza al numero.
NON spariscono mai, né chiusa né aperta: i due avvisi sul piatto principale
e sull'ordine minimo, e la riga che dice che l'invio non è una conferma.
I primi due li leggono anche due controlli automatici; la terza è la sola
cosa che spiega al cliente che l'ordine non è ancora accettato, e nasconderla
per far spazio significherebbe farlo credere concluso. Si stringe, non si
toglie. */
.conti.chiuso .trow.big{display:none}
.conti.chiuso .tt{display:none}
.conti.chiuso .mg{padding:9px 0 7px}
.conti.chiuso .rp{text-align:left;font-size:13.5px;color:var(--cream)}
.conti.chiuso .rc b{font-family:var(--num);font-weight:700;letter-spacing:-.01em}
.conti.chiuso #ck-send{margin-top:8px !important}
.conti.chiuso>p.note:last-of-type{margin-top:6px;font-size:10px;line-height:1.35}
.conti .dett{overflow:hidden;transition:height .42s var(--ez),opacity .3s}
.conti.chiuso .dett{opacity:0}
/* mentre il dito trascina comanda il dito: l'animazione si toglie di mezzo */
.conti.trascino .dett{transition:none}
@media (prefers-reduced-motion:reduce){.conti .dett,.conti .fr,.conti .presa{transition:none}}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.seg button,.seg label{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:4px;padding:13px 12px;
text-align:left;cursor:pointer;transition:border-color .4s,background .4s}
.seg .on{border-color:rgba(223,174,78,.65);background:rgba(223,174,78,.08)}
.seg b{display:block;font-family:var(--num);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.seg .on b{color:var(--gold)}
.seg small{display:block;margin-top:4px;font-size:10.5px;line-height:1.3;color:var(--mute)}
.field{margin-top:11px}
.field label{display:block;font-family:var(--num);font-size:9.5px;font-weight:500;letter-spacing:.16em;
text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);border-radius:6px;
background:var(--ink);padding:13px 14px;font-size:16px;min-height:var(--tap-lg);
transition:border-color .35s,background .35s}
/* 16 px non è estetica: sotto questa misura Safari ingrandisce la pagina da
solo quando tocchi un campo, e il modulo esce dallo schermo. */
.timebox input[type=time]{font-size:16px;min-height:var(--tap-lg)}
.seg button,.seg label{min-height:60px}
.slots button{min-height:var(--tap);padding:11px 16px;font-size:13px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:rgba(223,174,78,.55);background:var(--ink3)}
.field input::placeholder,.field textarea::placeholder{color:rgba(156,144,136,.55)}
.field textarea{resize:vertical;min-height:64px}
.field.err input,.field.err textarea{border-color:var(--ember)}
/* l'orario è la domanda che il cliente si pone per prima: sta in evidenza */
.timebox{margin-top:14px;border:1px solid rgba(223,174,78,.34);border-radius:8px;padding:16px;
background:linear-gradient(150deg,rgba(223,174,78,.09),transparent 70%)}
.timebox .lab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.timebox .lab b{font-family:var(--num);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.timebox .eta{font-family:var(--num);font-size:11px;color:var(--mute)}
.slots{margin-top:12px;display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.slots::-webkit-scrollbar{display:none}
.slots button{flex:none;border:1px solid var(--line);border-radius:99px;padding:9px 14px;
font-family:var(--num);font-size:12px;color:rgba(247,242,232,.7);transition:all .35s}
.slots button:hover{border-color:rgba(247,242,232,.3);color:var(--cream)}
.slots button.on{border-color:transparent;background:var(--gold);color:var(--ink);font-weight:700}
.timebox input[type=time]{margin-top:10px;width:100%;border:1px solid var(--line);border-radius:5px;
background:var(--ink);padding:11px 13px;font-family:var(--num);font-size:14px}
.field .msg{margin-top:5px;font-size:11px;color:var(--ember-l);display:none}
.field.err .msg{display:block}
.two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
#toast{position:fixed;left:50%;--toast-b:92px;bottom:var(--toast-b);z-index:130;translate:-50% 0;display:flex;align-items:center;gap:10px;
border:1px solid rgba(147,188,94,.35);background:rgba(19,16,25,.96);backdrop-filter:blur(14px);
border-radius:99px;padding:12px 20px;font-size:13px;opacity:0;pointer-events:none;
transform:translateY(16px);transition:opacity .4s,transform .5s var(--ez)}
#toast.show{opacity:1;transform:none}
/* --------------------------------- modale ------------------------------- */
#modal{position:fixed;inset:0;z-index:128;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;
padding:14px;background:rgba(6,4,10,.82);backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .4s}
#modal.show{opacity:1;pointer-events:auto}
#modal .sheet{position:relative;margin:auto;width:100%;max-width:1140px;border:1px solid var(--line-g);
background:var(--ink2);border-radius:6px;padding:22px;transform:translateY(38px) scale(.975);transition:transform .5s var(--ez)}
#modal.show .sheet{transform:none}
#modal .mh{margin-bottom:30px;display:flex;align-items:flex-start;justify-content:space-between;gap:22px}
#modal .mh h3{margin-top:9px;font-family:var(--edit);font-weight:400;font-size:clamp(1.6rem,3.4vw,2.5rem);line-height:1.1}
.xbtn{width:46px;height:46px;flex:none;border-radius:99px;border:1px solid var(--line);display:flex;align-items:center;
justify-content:center;transition:border-color .4s,color .4s,transform .4s var(--ez)}
.xbtn:hover{border-color:var(--gold);color:var(--gold);transform:rotate(90deg)}
@media(min-width:768px){#modal{padding:38px}#modal .sheet{padding:42px}}
/* --------------------------------- footer ------------------------------- */
.cta{position:relative;border-top:1px solid var(--line-g);padding:120px 22px;text-align:center;overflow:hidden}
.cta .glow{position:absolute;left:50%;top:50%;width:min(1000px,130vw);aspect-ratio:16/9;translate:-50% -50%;
border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(240,73,26,.12),transparent 66%)}
.cta h2{margin:26px auto 0;max-width:60rem}
.cols{border-top:1px solid var(--line);padding:70px 0}
.cols .g{display:grid;gap:46px}
/* Il marchio del piede. Lo stesso trattamento di #hmark in cima alla landing
— Mr Dafoe e lo stesso gradiente oro — solo a misura da footer: qui il nome
accompagna, non annuncia. Prima era logo-gold.png, che disegna "Ali Baba"
con le lettere staccate e non si può rilettera. Da testo il nome è quello
vero, si legge a lettore di schermo, si seleziona, si copia, e non pesa un
byte di immagine.
Il padding verticale non è decorazione: con background-clip:text l'oro si
dipinge solo dentro il riquadro dell'elemento, e gli svolazzi delle
maiuscole di Mr Dafoe escono sotto la linea di base. Senza quel margine il
ricciolo della A e della B resterebbe fuori dall'oro, cioè invisibile. */
.fmark{margin:0;font-family:var(--script);font-weight:400;
font-size:clamp(2.05rem,5vw,2.45rem);line-height:1;letter-spacing:.01em;
padding:.14em 0 .26em;white-space:nowrap;
background:linear-gradient(96deg,var(--gold-d) 4%,var(--gold-l) 34%,#FFF3D6 52%,var(--gold) 74%,var(--gold-d));
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 8px 20px rgba(223,174,78,.22))}
.cols .t{font-family:var(--num);font-size:10px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.cols address{margin-top:17px;font-style:normal;font-size:13.5px;line-height:1.9;color:rgba(247,242,232,.5)}
.cols address a:hover{color:var(--gold)}
.flink{margin-top:12px;display:inline-flex;align-items:center;gap:6px;font-family:var(--num);font-size:10.5px;
letter-spacing:.12em;text-transform:uppercase;color:rgba(247,242,232,.55);transition:color .4s,gap .4s}
.flink:hover{color:var(--gold);gap:10px}
/* Link legali del footer: era uno stile scritto dentro l'attributo, quindi
impossibile da cambiare per mobile senza !important. Da classe si governa. */
.ftlinks{margin-top:22px;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.socials{margin-top:20px;display:flex;gap:8px}
.socials a{border:1px solid var(--line);border-radius:99px;padding:7px 15px;font-family:var(--num);font-size:10.5px;
letter-spacing:.1em;text-transform:uppercase;color:rgba(247,242,232,.55);transition:border-color .4s,color .4s}
.socials a:hover{border-color:rgba(223,174,78,.5);color:var(--gold)}
/* Blocco dei dati obbligatori dell'impresa: deve essere leggibile, non
nascosto in un grigio da nota a piè di pagina. */
.legal .azienda{width:100%;display:grid;gap:3px;padding-bottom:14px;margin-bottom:2px;
border-bottom:1px solid var(--line)}
.legal .azienda .rs{font-family:var(--num);font-size:11.5px;font-weight:600;letter-spacing:.1em;
text-transform:uppercase;color:var(--cream)}
.legal .azienda a{text-decoration:underline;text-decoration-color:var(--line)}
.legal .azienda a:hover{color:var(--gold)}
.legal{margin-top:60px;padding-top:30px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;
font-size:11.5px;color:var(--mute)}
@media(min-width:768px){.cols .g{grid-template-columns:1.35fr 1fr 1fr 1fr}
.legal{flex-direction:row;align-items:center;justify-content:space-between}}
/* --------------------------------- cursore ------------------------------ */
#cur{position:fixed;left:0;top:0;z-index:200;pointer-events:none;display:none;will-change:transform}
#cur .b2{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:99px;
border:1px solid rgba(223,174,78,.6);background:rgba(223,174,78,.14);
transition:width .35s var(--ez),height .35s var(--ez),padding .35s var(--ez),background .35s}
#cur.lab .b2{width:auto;height:34px;padding:0 17px;background:var(--gold);border-color:transparent}
#cur span{white-space:nowrap;font-family:var(--num);font-size:10px;font-weight:500;letter-spacing:.18em;
text-transform:uppercase;color:var(--ink);opacity:0;transform:scale(.7);transition:opacity .25s,transform .3s var(--ez)}
#cur.lab span{opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){#cur{display:block}}
/* --------------------------- strati ingredienti -------------------------- */
.ly{opacity:0;transform:scale(.62);transform-box:fill-box;transform-origin:center;
transition:opacity .48s var(--ez),transform .55s var(--ez)}
.ly.on{opacity:1;transform:none}
.it{opacity:0;transform:translateY(-24px) scale(.42);transform-box:fill-box;transform-origin:center;
transition:opacity .42s var(--ez),transform .5s var(--ez)}
.ly.on .it{opacity:1;transform:none}
.pz-scale{transform-box:view-box;transform-origin:210px 210px;transition:transform .55s var(--ez)}
.steam{animation:steam 5.4s ease-in-out infinite}
.steam:nth-of-type(2){animation-duration:6.4s;animation-delay:.9s}
.steam:nth-of-type(3){animation-duration:7.2s;animation-delay:1.8s}
@keyframes steam{0%,100%{transform:translateY(2px);opacity:0}50%{transform:translateY(-20px);opacity:.22}}
@media (prefers-reduced-motion:reduce){.ly,.it{transition:none}.steam{animation:none}}
/* ===================== MOBILE — struttura e sicurezza ===================
Zona del pollice: su un telefono in mano si arriva comodamente solo al
terzo inferiore. Le azioni che contano (carrello, invio ordine) stanno lì,
sopra la barra home. Tutto ciò che è fisso rispetta env(safe-area-*).
======================================================================= */
@media(max-width:760px){
/* barra in alto: scende sotto il notch */
.navbar{height:64px;padding:0 max(16px,var(--sa-l)) 0 max(16px,var(--sa-r))}
#nav{padding-top:var(--sa-t)}
#mobile{padding:calc(var(--sa-t) + 64px) 20px calc(var(--sa-b) + 24px)}
#mobile a{font-size:clamp(24px,7vw,32px);padding:12px 20px;min-height:var(--tap-lg)}
/* carrello a tutto schermo, con il tasto d'ordine sopra la barra home */
#cart{width:100%;border-left:0;border-top-left-radius:0}
#cart .ch{padding:calc(var(--sa-t) + 16px) 18px 16px}
/* Il piede del carrello è appoggiato sopra al corpo scorrevole: con soli
8px di spazio in fondo l'ultima voce finiva coperta a metà, prezzo
compreso. Ora c'è aria sufficiente perché l'ultimo articolo si legga
tutto anche a fondo corsa. */
#cart .cb{padding:16px 18px 120px}
#cart .cf{padding:14px 18px calc(var(--sa-b) + 16px)}
/* Voci più compatte: senza la descrizione ci stanno tre articoli in una
schermata invece di due e mezzo. */
.citem{padding:13px 0;gap:12px}
.citem .thumb{width:74px;height:62px}
#cartbtn{right:max(16px,var(--sa-r));--cart-b:calc(var(--sa-b) + 16px);height:56px;padding:0 20px}
#toast{--toast-b:calc(var(--sa-b) + 84px);width:calc(100% - 32px);justify-content:center}
#consent{bottom:calc(var(--sa-b) + 12px);padding:16px}
#consent .btns{width:100%}
/* Non a metà esatta: "Accetta le mappe" è quasi il doppio di "Solo il
sito", e dividendo lo spazio in parti uguali il tasto lungo restava
stretto e perdeva l'ultima parola. Ognuno prende la larghezza che gli
serve, e se davvero non ci stanno vanno a capo — la fascia diventa più
alta e il tasto del carrello si alza di conseguenza, da solo. */
#consent .btns .b{flex:1 1 auto}
/* Le recensioni tornano visibili anche da mobile: non sono più la parete
di tessere da trascinare, sono due nastri che scorrono e si fermano al
tocco, quindi su telefono funzionano meglio che prima. */
#recensioni{padding:74px 0}
/* Le quattro categorie tutte in vista, su due righe.
Prima stavano su una riga sola che scorreva: entravano "Menù" e mezzo
"Panini e Kebab", e chi non sapeva di poter trascinare non scopriva che
esistevano anche Piatti e Pizze. Adesso vanno a capo e si vedono tutte
senza toccare niente — il testo si stringe quanto serve. */
.filters{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none;
gap:7px;padding-bottom:12px;row-gap:8px}
/* la misura dei pulsanti sta più sotto, insieme alle altre aree
toccabili, per non avere due regole in conflitto sullo stesso
selettore dentro la stessa media query */
/* Foto dei piatti in fila orizzontale, una alla volta, con le frecce
per passare al prodotto successivo — al posto delle colonne, che su
uno schermo stretto costringevano a scorrere in verticale a lungo. */
/* Le schede sono staccate da uno spazio nero: con la separazione di un
pixel due locandine diverse sembravano una foto sola tagliata a metà. */
.grid{display:flex;grid-template-columns:none;overflow-x:auto;overflow-y:hidden;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;border-radius:6px;
scrollbar-width:none;gap:12px;background:transparent;border:0;padding:0 2px}
.grid::-webkit-scrollbar{display:none}
.grid .prod{flex:0 0 82%;scroll-snap-align:center;
border:1px solid var(--line-g);border-radius:6px}
.mnav-arrow{display:flex}
.prod .body{padding:16px 18px 18px}
.prod h3{font-size:1.25rem}
.prod .desc{font-size:13.5px}
.prod .expand .in2{padding:14px 18px 18px}
/* Le 49 pizze su DUE righe che scorrono in orizzontale, tutte dentro.
Prima erano una colonna sola: quarantanove righe impilate, uno scroll
verticale interminabile per arrivare in fondo. Il riempimento per
colonna (grid-auto-flow:column su due righe) mette la prima pizza in
alto, la seconda sotto, la terza nella colonna accanto e così via.
La colonna larga l'82% lascia sbirciare quella dopo: si capisce da
sola che si trascina. */
.pzlist{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
grid-template-columns:none;grid-auto-columns:82%;
overflow-x:auto;overflow-y:hidden;gap:0 12px;
scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
scrollbar-width:none;border-top:0}
.pzlist::-webkit-scrollbar{display:none}
.pzlist .pzrow{scroll-snap-align:start;border-top:1px solid rgba(247,242,232,.06)}
.pzrow .ig{padding-right:8px;font-size:12.5px}
/* vista singola del prodotto */
.focus{gap:20px}
.focus h3{font-size:clamp(1.5rem,7vw,2rem)}
/* modale a foglio: parte dal basso, non dal centro */
#modal{padding:0;align-items:flex-end}
#modal .sheet{max-width:none;border-radius:18px 18px 0 0;border-bottom:0;
padding:22px 18px calc(var(--sa-b) + 22px);max-height:92svh;overflow-y:auto}
/* Qui c'erano #stage{height:74svh} e .fcard{touch-action:none}, scritti per
la vecchia parete di tessere trascinabili. Ma l'anteprima del
configuratore usa lo STESSO id="stage": erano due elementi con lo stesso
identificativo, e quell'altezza forzata colpiva anche il configuratore.
Sparita la parete, spariscono le regole — e con loro quel difetto. */
#slab{width:100%;padding:20px}
/* hero: testo leggibile, azioni a portata di pollice */
#hero{padding:calc(var(--sa-t) + 96px) var(--gut) calc(var(--sa-b) + 8px)}
/* La coda della landing: sotto la riga di fiducia ci sono 30px dentro .in
piu' gli 8px della sezione. Su schermo grande e' respiro, su telefono e'
nero sprecato proprio dove deve cominciare il listino. Oltre non si
guadagna: il min-height fa da pavimento e la sezione non scende
comunque sotto una schermata. */
#hero .in{padding-bottom:12px}
#hero .acts .b{flex:1 1 100%;justify-content:space-between}
#hero .trust{gap:8px 18px;font-size:13px}
/* ---------------- IL SIGILLO «20 ANNI» NON C'E' SU TELEFONO -----------
E' un tondo di 200px in alto a destra: su uno schermo da 390 si mangia
mezza larghezza della prima schermata e finiva addosso al marchio.
Da schermo grande resta, perche' li' c'e' la colonna vuota di lato che
lo ospita senza togliere niente a nessuno.
⚠️ Tolto il sigillo cade anche il motivo per cui il marchio e tutta la
colonna erano stati spostati a sinistra: era una soluzione alla
collisione, non una scelta di gusto. Senza collisione si torna al
centro, che e' come la landing e' disegnata. */
#hero .seal{display:none}
/* Il listino comincia piu' in alto. 120px di stacco stanno bene su
schermo grande; su un telefono da 844 punti sono un settimo della
schermata, e sommati alla coda della landing facevano 158px di nero
prima della prima riga del menu. 74px non e' un numero nuovo: e' la
stessa misura gia' usata qui sopra per #recensioni, che su schermo
grande parte da 118px. Resta sopra i 64px della barra fissa, cosi
l'ancora #menu non fa atterrare il titolo sotto la barra: qui non ci
sono scroll-margin, il riempimento e' l'unica cosa che tiene quello
spazio. */
#menu{padding-top:74px}
/* ---------------- LO STESSO STACCO PER TUTTE LE SEZIONI ---------------
Il listino era gia' stato alzato; le altre no, e restavano a 120px sopra
e sotto. Sommati, due stacchi da 120 fanno 240px di nero fra la fine di
una schermata e la prima riga della successiva: su un telefono da 844
punti e' un terzo di schermata di niente, ripetuto cinque volte lungo la
pagina. Il titolare l'ha descritto come «troppo spazio fra la fine delle
pagine e l'inizio del testo o delle immagini di quella dopo».
74px per tutte, che e' la misura gia' usata da #recensioni qui sopra: non
un numero nuovo, cosi' la pagina ha un ritmo solo invece di tre. Sotto i
64px della barra fissa non si scende, altrimenti chi arriva da un'ancora
si ritrova il titolo sotto la barra — qui non ci sono scroll-margin.
#storia ha 0 sotto per scelta sua (la storia sfuma nella sezione dopo) e
quello resta: si tocca solo il sopra. */
#storia{padding-top:74px}
#crea{padding:74px 0}
#sedi{padding:74px 0}
#menu{padding-bottom:74px}
/* sedi: i due pannelli uno sotto l'altro, sempre "accesi" */
/* ----------------------------- LE DUE SEDI ---------------------------
Su telefono le due mappe erano IMPILATE, una sotto l'altra, alte 480px
ciascuna: quasi tre schermate per due indirizzi, e il comportamento di
desktop era disattivato — nessuna cresceva, nessuna si spegneva.
Ora stanno affiancate come da desktop, nella stessa schermata. Quella
scelta si prende quasi tutta la larghezza, si illumina e mostra
indirizzo, orari e pulsanti; l'altra resta una striscia col solo nome.
Il "senza calpestarsi" è la ragione per cui nella striscia stretta i
dettagli si chiudono: in 45% di 390px non ci starebbero e sborderebbero
uno sull'altro. Ogni pannello ha già overflow:hidden, quindi nulla esce
dal proprio riquadro durante il passaggio. */
.split2{grid-template-columns:1fr 1fr;gap:9px;margin-top:34px}
.split2[data-act="0"]{grid-template-columns:1fr 106px}
.split2[data-act="1"]{grid-template-columns:106px 1fr}
.pan{min-height:430px}
/* la scelta si vede: bordo oro, mappa più chiara, l'altra si spegne */
.split2.hot .pan:not(.on){opacity:.62;filter:saturate(.45)}
/* dettagli aperti SOLO in quella scelta */
.pan.on .more{grid-template-rows:1fr;opacity:1;margin-top:16px}
.pan .in{padding:16px 14px}
.pan h3{font-size:clamp(1.1rem,5vw,1.7rem);margin-top:9px}
.pan .addr{margin-top:9px;font-size:13px;line-height:1.5}
/* Da telefono NIENTE scritte sopra la mappa. Restano solo il nome della
sede e il tasto per le indicazioni: indirizzo, orari, telefono, pastiglie
e il messaggio del consenso stavano tutti stesi sopra l'immagine e in
390px si accavallavano fino a non capirsi più. Su schermo grande
restano, perché lì lo spazio c'è. L'indirizzo si legge comunque nel
footer e aprendo le indicazioni. */
.pan .addr,
.pan .hrow,
.pan .corner,
.pan .eyebrow{display:none}
/* NON nascondere .more: i pulsanti (Indicazioni, Chiama, Ordina) stanno
dentro, e nascondendolo era sparito anche il modo di aprire la mappa.
Si nasconde solo nel pannello chiuso, dove non c'è spazio. */
.pan:not(.on) .more,
.pan:not(.on) .acts,
.pan:not(.on) .mapwrap{display:none}
.pan:not(.on) h3{font-size:15px;line-height:1.2;margin-top:0}
.pan:not(.on) .in{padding:14px 10px}
/* il nome resta, piccolo e in basso: senza, non si capisce quale sia quale */
.pan.on h3{font-size:1.35rem;margin-top:0}
.pan .acts{margin-top:14px;gap:7px}
.pan .acts .b{width:100%;justify-content:center}
.pan .pinico{top:26%}
/* Con la descrizione via, il testo occupa meno spazio: il velo scuro può
schiarirsi e si vede la mappa, che è il motivo per cui si apre questa
sezione. Prima era una sfumatura fitta dal basso che la copriva quasi
tutta per far leggere le tre righe di racconto. */
/* Senza le scritte il velo può quasi sparire: la mappa si vede per intero,
resta solo l'ombra in fondo che tiene leggibili nome e pulsante. */
.pan.on .tint{background:linear-gradient(to top,var(--ink) 1%,rgba(6,4,10,.55) 24%,transparent 52%)}
}
/* schermi molto stretti (SE, mini) */
@media(max-width:380px){
:root{--gut:16px}
.prod .body{padding:14px}
.b.lg{height:52px;padding:0 22px;font-size:11px}
#hero h1{font-size:clamp(2rem,9vw,2.6rem)}
}
/* telefono in orizzontale: niente sezioni alte una schermata intera */
@media(max-height:520px) and (orientation:landscape){
#hero{min-height:auto;padding-top:88px}
#desiderio .pin{padding:70px 22px}
}
/* ===================== MOBILE — bersagli e comandi ======================
Regola di riferimento: 44×44 px (Apple HIG), 48 sui comandi principali
(Material). WCAG 2.2 si ferma a 24 ma è il minimo di legge, non un
obiettivo. Qui allargo l'area sensibile senza gonfiare la grafica: dove
serve uso il riempimento, altrove uno pseudo-elemento invisibile che
estende il bersaglio oltre il bordo visibile.
======================================================================= */
@media (pointer:coarse){
/* pastiglie degli ingredienti, salse, lattine, aggiunte */
.ichip,.xchip,.schip,.dchip{min-height:var(--tap);padding:10px 15px;font-size:13.5px}
.ichip .x,.xchip .x,.schip .x{width:16px;height:16px}
.chips{gap:9px}
/* Panino e pizza del configuratore: piccoli, così sotto restano in vista
gli ingredienti da togliere e da aggiungere. */
.pcard .stage{max-width:236px;padding:12px}
/* Le aggiunte su DUE COLONNE affiancate, non una fila che va a capo a
caso: le pastiglie hanno nomi di lunghezza molto diversa e in flex-wrap
finivano una per riga, allungando la scheda. In griglia stanno a coppie,
destra e sinistra, sulla stessa linea. */
.chips.due{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
.chips.due .xchip{width:100%;justify-content:space-between;padding:0 12px;
min-height:var(--tap);border-radius:12px}
.chips.due .xchip b{margin-left:auto;padding-left:8px}
/* contatori: erano 24-28 px, sotto la soglia */
.qty button{width:var(--tap);height:var(--tap);font-size:19px}
.qty span{min-width:34px;font-size:15px}
.bitem{padding:4px 14px 4px 16px;gap:11px}
.bitem .qty button{width:38px;height:38px}
/* comandi delle card */
.addbtn{height:var(--tap-lg);font-size:12px}
.editbtn{width:var(--tap-lg);height:var(--tap-lg)}
/* Altezza piena per il dito, ma stretto ai lati: le quattro categorie
devono starci tutte su due righe senza che nessuna sbordi. */
.filters button{height:var(--tap-lg);padding:0 14px;font-size:11px;letter-spacing:.08em}
.pzrow .plus{width:var(--tap);height:var(--tap)}
.pzhead{padding:16px 6px}
/* bottoni generali */
.b{min-height:var(--tap-lg)}
.b.sm{min-height:var(--tap);padding:0 20px;font-size:11.5px}
.b .ar{width:34px;height:34px}
.b.sm .ar{width:30px;height:30px}
/* link testuali del carrello: area cliccabile vera */
.citem .del{padding:10px 2px;font-size:12.5px}
.citem .del::after{content:'';position:absolute}
/* avatar delle recensioni e chiusure */
.av{width:var(--tap);height:var(--tap)}
.xbtn{width:var(--tap-lg);height:var(--tap-lg)}
/* niente effetti al passaggio: sul telefono restano "incollati" */
.prod:hover .pimg,.prod:hover .art svg{transform:none}
.rv-card:hover{transform:none}
.b:hover{transform:none}
/* ------------------------------ FOOTER --------------------------------
Sul telefono il footer non aveva nessuna regola: ereditava la colonna
unica con 46px di stacco fra i blocchi, quindi marchio, Pianezza,
Givoletto e "Ordina" finivano impilati uno sotto l'altro per quasi tre
schermate di nulla. Ora le due sedi stanno affiancate — sono corte e
simmetriche, ci stanno comodamente — mentre marchio e "Ordina"
occupano la larghezza piena, che è dove servono. Gli stacchi si
stringono e la riga legale torna orizzontale invece che a colonna. */
.cols{padding:44px 0}
.cols .g{grid-template-columns:1fr 1fr;gap:30px 16px;align-items:start}
.cols .g>div:first-child,
.cols .g>div:last-child{grid-column:1 / -1}
.cols .t{font-size:9.5px;letter-spacing:.22em}
.cols address{margin-top:12px;font-size:12.5px;line-height:1.75}
.flink{margin-top:9px;font-size:10px}
.socials{margin-top:16px;flex-wrap:wrap;gap:7px}
.ftlinks{flex-direction:row;flex-wrap:wrap;gap:8px 16px;margin-top:18px}
/* Il tasto del carrello a larghezza piena: è l'unica azione del footer e
merita un bersaglio grande, non un pulsantino allineato a sinistra. */
.cols .g>div:last-child .b{width:100%;justify-content:center}
/* Le due sedi separate da un filo, così a colpo d'occhio si vede che sono
due indirizzi distinti e non un blocco unico di righe. */
.cols .g>div:nth-child(3){border-left:1px solid var(--line);padding-left:16px}
/* Con i link da motore di ricerca spariti la riga legale sale: senza questo
restava lo stacco che serviva a staccarla da quel blocco. */
/* Il tasto del carrello galleggia in basso a destra e restava piantato
sopra "rivedi l'intro": misurato, occupavano la stessa riga e il tocco
finiva sul carrello. Ora il fondo della pagina lascia lo spazio che
serve, calcolato sull'altezza reale del tasto più il margine di
sicurezza del telefono. */
.legal{flex-direction:row;flex-wrap:wrap;align-items:center;
gap:8px 14px;margin-top:26px;padding-top:18px;
padding-bottom:calc(72px + var(--sa-b))}
}
/* ===================== AREE TOCCABILI DEI LINK DI TESTO =================
Misurati: undici comandi erano alti 16-18px, sotto i 24x24 che le linee
guida WCAG 2.2 AA (criterio 2.5.8) chiedono come minimo. Sono i link
sottolineati — "Apri in Maps", i numeri di telefono nel footer, privacy,
cookie, allergeni, "rivedi l'intro".
Il riempimento verticale allarga la zona che risponde al dito senza
spostare il testo di un pixel: su un elemento in linea non alza la riga,
estende solo il bersaglio. È il modo di correggerlo senza rifare il
disegno della pagina. */
.flink,
.cols address a,
.seo a,
#allerg,#allerg2,#replay,#allerg3,
[data-legal],
[data-closecart]{padding-block:5px}
/* .flink è un inline-flex: lì il riempimento conta davvero nell'altezza,
quindi si compensa il margine per non allontanarlo dall'indirizzo. */
.flink{margin-top:7px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* Griglia a filo usata dalla modale allergeni (prima era anche della
sezione "regole della casa", rimossa su richiesta). */
.cards{display:grid;gap:1px;background:var(--line-g);border:1px solid var(--line-g);border-radius:4px;overflow:hidden}
.card{position:relative;background:var(--ink2);padding:26px;display:flex;flex-direction:column;overflow:hidden}
.card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.card .n{font-family:var(--num);font-size:11px;font-weight:500;letter-spacing:.3em;color:rgba(223,174,78,.55)}
@media(min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
.legaldoc{max-width:52rem}
/* ===================== SCHEDE DEL MENÙ =================================
Le foto dei menù sono piccole all'origine: ingrandirle le sgrana. Quindi
restano alla loro misura e non si aprono mai a tutto schermo. Per
modificare basta aprire la riga sotto la card: gli ingredienti sono
pastiglie che si spengono con un tocco.
======================================================================= */
/* Le locandine hanno nome, descrizione e prezzo già dentro l'immagine:
la card non li ripete. Proporzione 3:2, quella in cui sono state fatte
(1536x1024). Tutta la riga ha la stessa altezza, quindi non si sfalsano. */
.prod.wide .art{aspect-ratio:var(--wr,3/2)}
.prod.wide .pimg{object-fit:cover;padding:0}
.prod.wide .r1{display:none}
.prod.wide .desc{display:none}
/* ⚠️ IL RIEMPIMENTO IN BASSO DEVE COINCIDERE con quello di `.prod .body`,
che su telefono vale 18px (riga 1223); il pixel di scarto e il bordo della scheda. Il tasto «Aggiungi» sta in fondo al
corpo della scheda con margin-top:auto, quindi la sua distanza dal bordo
inferiore E' questo numero: due valori diversi vogliono dire due file di
tasti a due altezze diverse, che si vede subito quando le schede scorrono
una accanto all'altra.
E' successo il 16 agosto 2026 rimettendo il Menù Cheeseburger, l'unica
voce del menù senza locandina e quindi l'unica scheda NON wide: 17 px
contro 20. Il controllo «I tasti Aggiungi sono alla stessa altezza» l'ha
preso, ed e' esattamente il caso per cui era stato scritto. */
.prod.wide .body{padding:14px 16px 19px}
/* auto, non 0: sulle locandine nome e descrizione sono nascosti, quindi il
contenuto del corpo e corto e lo spazio avanzato restava SOTTO il tasto.
Le schede con una pastiglia in piu avevano una riga in piu e il loro tasto
finiva 41 px piu in basso degli altri: in una fila di quattro erano quattro
altezze diverse. Con auto lo spazio avanzato sta sopra, e i tasti si
allineano tutti al fondo. */
.prod.wide .acts{margin-top:auto}
/* ---- vista singola: solo quel prodotto ---- */
.focus{margin-top:26px;display:grid;gap:28px;animation:pop .4s var(--ez)}
.focus .shot2{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-g);background:var(--ink3)}
.focus .shot2 img{width:100%;aspect-ratio:var(--wr,3/2);object-fit:cover;display:block}
.focus h3{font-family:var(--edit);font-weight:500;font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.04;letter-spacing:-.025em}
.focus .side2 .lead{margin-top:14px}
.focus .grp{margin-top:26px}
.focus .grp .hd2{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.backlink{display:inline-flex;align-items:center;gap:9px;font-family:var(--num);font-size:10.5px;font-weight:500;
letter-spacing:.16em;text-transform:uppercase;color:var(--mute);transition:color .35s,gap .35s}
.backlink:hover{color:var(--gold);gap:13px}
/* Foto a sinistra, ingredienti a destra. La soglia era 900px: su un tablet
in verticale la foto si prendeva tutta la larghezza e gli ingredienti
finivano sotto, fuori dallo schermo. Da 760px in su stanno affiancati, e
la colonna degli ingredienti resta in vista accanto alla foto. */
@media(min-width:760px){.focus{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:36px;align-items:start}}
@media(min-width:1100px){.focus{gap:44px}}
.prod.wide .r1{display:none}
.prod.wide .desc{margin-top:0}
.prod .art{padding:0;background:radial-gradient(75% 65% at 50% 42%,rgba(223,174,78,.09),transparent 72%),linear-gradient(var(--ink3),var(--ink))}
.prod .pimg{width:100%;height:100%;object-fit:contain;padding:10px;
transition:transform .5s var(--ez);image-rendering:auto}
.prod:hover .pimg{transform:scale(1.04)}
.prod .expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ez);
border-top:1px solid transparent}
.prod.open .expand{grid-template-rows:1fr;border-top-color:var(--line)}
.prod .expand>div{overflow:hidden}
.prod .expand .in2{padding:16px 22px 20px}
.prod.open{background:var(--ink3)}
.ichip{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(223,174,78,.45);
background:rgba(223,174,78,.08);border-radius:99px;padding:6px 11px;font-size:11.5px;color:var(--cream);transition:all .28s}
.ichip .x{display:flex;width:13px;height:13px;align-items:center;justify-content:center;border-radius:99px;
border:1px solid var(--gold);background:var(--gold);color:var(--ink);font-size:9px;line-height:1}
.ichip.off{border-color:var(--line);background:transparent;color:var(--mute);text-decoration:line-through}
.ichip.off .x{background:transparent;border-color:rgba(247,242,232,.25);color:transparent}
.xchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;
padding:6px 11px;font-size:11.5px;color:rgba(247,242,232,.6);transition:all .28s}
.xchip b{font-family:var(--num);font-weight:600;color:var(--mute)}
.xchip .x{display:flex;width:13px;height:13px;align-items:center;justify-content:center;border-radius:99px;
border:1px solid rgba(247,242,232,.3);font-size:9px;line-height:1}
.xchip:hover{border-color:rgba(247,242,232,.32);color:var(--cream)}
.xchip.on{border-color:rgba(147,188,94,.55);background:rgba(147,188,94,.12);color:#C6E39B}
.xchip.on b{color:#C6E39B}
.xchip.on .x{border-color:#93BC5E;background:#93BC5E;color:var(--ink)}
.schip,.dchip,.tchip{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;
padding:6px 11px;font-size:11.5px;color:rgba(247,242,232,.62);transition:all .28s}
/* La taglia si vede più delle altre pastiglie: è la prima scelta e cambia il
prezzo, quindi quella attiva è piena, non solo bordata. */
.tchip{padding:8px 15px;font-size:12px}
.tchip:hover{border-color:rgba(247,242,232,.32);color:var(--cream)}
.tchip.on{border-color:var(--gold);background:var(--gold);color:var(--ink);font-weight:600}
.tchip.on b{color:var(--ink);opacity:.7}
.tchip b{font-family:var(--num);font-weight:600;color:var(--mute)}
/* Suggeriti nel carrello: pastiglie che aggiungono con un tocco. */
.suggeriti{margin-top:22px;display:grid;gap:8px}
.sugg{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
border-radius:99px;padding:9px 14px;font-size:12px;min-height:var(--tap,44px);
color:rgba(247,242,232,.72);transition:border-color .28s,background .28s,color .28s}
.sugg:hover{border-color:var(--gold);background:rgba(223,174,78,.1);color:var(--cream)}
.sugg b{font-family:var(--num);font-weight:600;color:var(--gold)}
.schip .x{display:flex;width:13px;height:13px;align-items:center;justify-content:center;border-radius:99px;
border:1px solid rgba(247,242,232,.3);font-size:8px;line-height:1}
.schip:hover,.dchip:hover{border-color:rgba(247,242,232,.32);color:var(--cream)}
.schip.on{border-color:rgba(223,174,78,.6);background:rgba(223,174,78,.1);color:var(--cream)}
.schip.on .x{border-color:var(--gold);background:var(--gold);color:var(--ink)}
.dchip b{font-family:var(--num);font-weight:600;color:var(--mute)}
.dchip.on{border-color:rgba(223,174,78,.65);background:rgba(223,174,78,.12);color:var(--cream)}
.dchip.on b{color:var(--gold)}
.bust{display:flex;flex-wrap:wrap;gap:8px}
.bitem{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:99px;padding:5px 12px 5px 13px}
.bitem .bl{font-size:11.5px;color:rgba(247,242,232,.75)}
.bitem .bx{font-family:var(--num);font-size:10px;letter-spacing:.04em;color:var(--mute)}
.bitem .qty button{width:24px;height:24px}
/* ===================== TENDINE DELLE OPZIONI ============================
Devono sembrare un comando, non un titolo: bordo, freccia che ruota, e
l'intera riga cliccabile. Il riepilogo a destra dice cosa c'è dentro anche
da chiusa, così chiudere non significa perdere di vista una scelta. */
.sez{margin-top:10px;border:1px solid var(--line-g);border-radius:10px;overflow:hidden;
background:rgba(247,242,232,.02);transition:border-color .3s,background .3s}
.sez[open]{border-color:rgba(223,174,78,.32);background:rgba(223,174,78,.04)}
.sez>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
padding:12px 14px;min-height:var(--tap,44px);user-select:none;transition:background .25s}
.sez>summary::-webkit-details-marker{display:none}
.sez>summary:hover{background:rgba(247,242,232,.04)}
.sez>summary:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.sez .tt{font-family:var(--num);font-size:10px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--cream);flex:none}
.sez .rp{flex:1;min-width:0;text-align:right;font-size:11.5px;color:var(--mute);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sez[open] .rp{opacity:.45}
.sez .fr{flex:none;width:16px;height:16px;color:var(--gold);display:flex;
transition:transform .3s var(--ez)}
.sez .fr svg{width:100%;height:100%}
.sez[open] .fr{transform:rotate(180deg)}
.sez .dentro{padding:0 14px 14px}
@media (prefers-reduced-motion:reduce){.sez .fr{transition:none}}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.rowqty{margin-top:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rowqty .tot{margin-left:auto;font-family:var(--num);font-size:17px;font-weight:700}
/* ---- Pizze: elenco a colonne, come sul menù del locale ---- */
.pzlist{margin-top:26px;display:grid;gap:0 34px;border-top:1px solid var(--line-g)}
.pzrow{border-bottom:1px solid rgba(247,242,232,.06);transition:background .35s}
.pzrow:hover{background:rgba(223,174,78,.045)}
.pzhead{display:flex;align-items:flex-start;gap:12px;padding:14px 4px;width:100%;text-align:left}
.pzrow .tx{flex:1;min-width:0;display:block}
.pzrow .top2{display:flex;align-items:baseline;gap:8px}
.pzrow .nm2{font-family:var(--num);font-size:13.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;flex:none}
/* i puntini riempiono lo spazio fra nome e prezzo, come su un menù stampato */
.pzrow .dots{flex:1;min-width:14px;height:1px;transform:translateY(-3px);
background-image:radial-gradient(currentColor 1px,transparent 1px);background-size:5px 1px;
background-repeat:repeat-x;color:rgba(247,242,232,.22)}
.pzrow .ig{display:block;margin-top:4px;font-size:11.5px;line-height:1.5;color:var(--mute);padding-right:38px}
.pzrow .pz2{font-family:var(--num);font-size:14px;font-weight:700;color:var(--ember-l);white-space:nowrap;flex:none}
.pzrow .plus{width:30px;height:30px;flex:none;margin-top:1px;border-radius:99px;border:1px solid var(--line-g);
display:flex;align-items:center;justify-content:center;transition:all .3s}
.pzrow .plus:hover{border-color:var(--ember);background:var(--ember);color:#fff}
.pzrow .expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ez)}
.pzrow.open .expand{grid-template-rows:1fr}
.pzrow .expand>div{overflow:hidden}
.pzrow .expand .in2{padding:0 6px 18px}
@media(min-width:760px){.pzlist{grid-template-columns:1fr 1fr}}
@media(min-width:1200px){.pzlist{grid-template-columns:1fr 1fr 1fr}}
/* ------------------------ scheda prodotto -------------------------------
Foto grande a sinistra, tutto il resto a destra. Gli ingredienti sono
pastiglie: si spengono con un tocco e finiscono nell'ordine come "senza".
Togliere non sconta — è il prezzo esposto — ma evita la telefonata. */
.pdet{display:grid;gap:26px}
.pdet .shot{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-g);
background:radial-gradient(70% 60% at 50% 42%,rgba(223,174,78,.1),transparent 72%),var(--ink3)}
.pdet .shot img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pdet .shot .pr{position:absolute;left:14px;bottom:14px;border-radius:99px;padding:8px 16px;
background:var(--ember);color:#fff;font-family:var(--num);font-size:16px;font-weight:700;
box-shadow:0 14px 34px -14px rgba(240,73,26,.9)}
.pdet .side .lead{margin-top:12px}
.pdet .gl{margin-top:26px;display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.pdet .chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.ichip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(223,174,78,.5);
background:rgba(223,174,78,.09);border-radius:99px;padding:8px 14px;font-size:12.5px;color:var(--cream);
transition:all .3s}
.ichip .x{display:flex;width:15px;height:15px;align-items:center;justify-content:center;border-radius:99px;
border:1px solid var(--gold);background:var(--gold);color:var(--ink);font-size:10px;line-height:1}
.ichip.off{border-color:var(--line);background:transparent;color:var(--mute);text-decoration:line-through}
.ichip.off .x{background:transparent;border-color:rgba(247,242,232,.28);color:transparent}
.ichip:hover{transform:translateY(-1px)}
.pdet .qty2{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.pdet .tot{margin-left:auto;font-family:var(--num);font-size:26px;font-weight:700;letter-spacing:-.02em}
@media(min-width:820px){.pdet{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:38px;align-items:start}}
.legaldoc h4{margin-top:28px;font-family:var(--num);font-size:11px;font-weight:500;letter-spacing:.2em;
text-transform:uppercase;color:var(--gold)}
.legaldoc p{margin-top:10px;font-size:14.5px;line-height:1.78}
.legaldoc a{color:var(--cream);text-decoration:underline;text-decoration-color:rgba(223,174,78,.5)}
.legaldoc a:hover{color:var(--gold)}
/* rete di link locali: aiutano chi cerca "kebab a Pianezza" su Google */
.seo{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.seo .t2{font-family:var(--num);font-size:9.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.seo ul{margin-top:12px;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.seo a{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:7px 14px;
font-size:12px;color:rgba(247,242,232,.6);transition:border-color .4s,color .4s,background .4s}
.seo a:hover{border-color:rgba(223,174,78,.5);color:var(--gold);background:rgba(223,174,78,.06)}
/* La riga dei comuni serviti: testo normale, leggibile, non pastiglie. */
.seo .zone{margin-top:10px;font-size:13.5px;line-height:1.8;color:rgba(247,242,232,.55);max-width:46rem}
/* ============ LE DUE FRASI DEL PIEDE, IN CORSIVO NERETTO =================
Chiesto dal titolare: la riga «dal 2006» e quella «Consegniamo a …» in un
carattere particolare. Sono le due frasi che dicono chi siamo e dove
arriviamo, ed erano scritte con lo stesso grigio smorto di tutto il resto.
E' FRAUNCES, che il sito gia' porta con se': e' il carattere dei titoloni,
quello di «Dal 2006 lo stesso spiedo» e del «la stessa ricetta» in oro
della prima schermata. Il file del corsivo e' gia' scaricato per quella
riga, quindi qui non costa un byte in piu' — e un carattere nuovo, per
quanto bello, sarebbero stati trenta o quaranta kB da far scaricare a
ogni cliente per due frasi.
WONK 1 e' l'asse che accende le lettere «storte» del corsivo — la g con la
coda aperta, la a con lo svolazzo. E' il tratto piu' riconoscibile che
Fraunces ha, ed e' il motivo per cui e' questo il carattere del locale.
SOFT 50 arrotonda i terminali, opsz 90 e' il disegno pensato per le misure
grandi: piu' contrasto fra pieni e sottili, che a peso 600 si vede.
Il colore sale da .55 a .82: in corsivo neretto il grigio smorto di prima
diventava fango. */
.cols .fclaim,
#seo-consegne{
font-family:var(--edit);
font-style:italic;
font-weight:600;
font-variation-settings:'SOFT' 50,'WONK' 1,'opsz' 90;
font-size:16.5px;
line-height:1.62;
letter-spacing:-.004em;
color:rgba(247,242,232,.82);
text-transform:none;
}
.cols .fclaim{margin-top:16px;max-width:23rem}
/* L'etichetta «CONSEGNIAMO A» resta com'era, in Space Grotesk maiuscoletto:
e' un cartellino, non una frase, e in corsivo si confonderebbe col testo
che introduce. Il contrasto fra i due e' voluto.
⚠️ font-style:normal e' obbligatorio, non decorativo: il corsivo si eredita
dal paragrafo, e Space Grotesk il corsivo NON ce l'ha — il browser se lo
inventa inclinando le lettere dritte. Viene fuori una finta italica
storta, che si riconosce subito e fa sembrare sbagliato il carattere. */
#seo-consegne .sede{font-style:normal;font-variation-settings:normal}
.seo .zone .sede{display:block;font-family:var(--num);font-size:9.5px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.seo .zone .num{color:var(--cream);font-weight:600}
/* ---- le tariffe di consegna --------------------------------------------
Su schermo largo restano quello che erano: una riga per sede, i comuni in
linea separati dal punto. Il punto adesso lo mette il CSS fra un
e
l'altro, così l'ultimo non se lo porta dietro. Misurato a 1440px: il blocco
.seo passa da 260,5 a 257,7 px, cioè non cambia niente. */
.seo .tariffe>div{margin-top:10px}
.seo .tariffe .sede{display:block;font-family:var(--num);font-size:9.5px;font-weight:600;letter-spacing:.22em;
text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.seo .tariffe ul{margin-top:0;display:inline;list-style:none}
.seo .tariffe li{display:inline;font-size:13.5px;line-height:1.8;color:rgba(247,242,232,.55)}
.seo .tariffe li+li::before{content:'·';margin:0 .45ch;color:rgba(247,242,232,.3)}
.seo .tariffe li>.num{color:var(--cream);font-weight:600}
/* ---- e su telefono: due colonne, i prezzi in fila indiana ----------------
Le due sedi affiancate, 166px di colonna a 390px di schermo. Il nome del
comune a sinistra, il prezzo a destra: essendo l'unica cosa allineata a
destra, le cifre formano UNA colonna sola e si confrontano a colpo d'occhio
(misurato: tutti i prezzi finiscono a x=187 e x=368, esatti). Il font --num
ha già le cifre a larghezza fissa, quindi restano incolonnate anche se un
giorno arrivano i centesimi. Nessun nome va a capo, nemmeno "Val della
Torre" (72px) e nemmeno a 320px di schermo: provato.
Il prezzo è in --ember-l perché su questo sito TUTTI i prezzi sono ember
(.price, .citem .pr): l'oro resta alle etichette, e le due cose non
litigano. Il filo sotto ogni riga è quello che fa leggere il blocco come un
listino invece che come due elenchi di parole.
Questo blocco sta QUI e non nel @media(pointer:coarse) più in alto perché
le regole di .seo .zone vengono dopo quello e lo scavalcherebbero. */
@media(max-width:760px){
.seo{margin-top:26px;padding-top:20px}
.seo .zone{margin-top:8px;font-size:12.5px;line-height:1.62}
.seo .tariffe{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
.seo .tariffe>div{margin-top:0}
.seo .tariffe .sede{margin-bottom:0;padding-bottom:6px;border-bottom:1px solid var(--line-g)}
.seo .tariffe ul{display:block}
.seo .tariffe li{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
padding:5px 0;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.3}
.seo .tariffe li:last-child{border-bottom:0}
.seo .tariffe li+li::before{content:none}
.seo .tariffe li>span{min-width:0}
.seo .tariffe li>.num{flex:none;font-size:15px;font-weight:700;line-height:1.05;letter-spacing:-.01em;
color:var(--ember-l)}
}
/* ---- consenso: le mappe di Google non partono prima di un sì esplicito ---- */
#consent{position:fixed;left:50%;bottom:18px;translate:-50% 0;z-index:140;width:min(680px,calc(100vw - 28px));
border:1px solid var(--line-g);border-radius:14px;padding:18px 20px;
background:rgba(11,8,16,.94);backdrop-filter:blur(20px);
box-shadow:0 30px 80px -30px rgba(0,0,0,.95);
display:flex;flex-wrap:wrap;align-items:center;gap:14px;
transform:translateY(140%);transition:transform .7s var(--ez),opacity .3s}
#consent.show{transform:translateY(0)}
/* ---- la fascia si fa da parte quando c'è di mezzo un ordine --------------
La fascia sta a z-index 140, il pannello del carrello a 126: cioè la fascia
gli sta SOPRA. Su uno schermo da 430 punti finiva esattamente sul tasto
"Invia ordine su WhatsApp", e il dito atterrava su "Accetta le mappe": il
cliente arrivava in fondo all'ordine e il tasto non rispondeva. Trovato il
12 agosto 2026 provando l'invio, dopo aver sistemato lo stesso guasto sul
tasto del carrello — la fascia ne copriva due, non uno.
Alzare il carrello sopra la fascia non basterebbe: da desktop il pannello
è largo 470 px e la fascia resterebbe cliccabile a sinistra. Meglio che si
ritiri: mentre uno sta ordinando, il consenso alle mappe non è la domanda
del momento, e torna appena chiude. `body.lock` c'è quando è aperto il
carrello, una finestra o l'introduzione. */
body.lock #consent{opacity:0;pointer-events:none}
#consent p{flex:1;min-width:230px;font-size:13px;line-height:1.6;color:rgba(247,242,232,.72)}
#consent .btns{display:flex;gap:8px;flex-wrap:wrap}
.mapoff{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:12px;text-align:center;padding:22px;background:
repeating-linear-gradient(45deg,rgba(247,242,232,.02) 0 10px,transparent 10px 20px),var(--ink3)}
.mapoff p{max-width:24rem;font-size:12.5px;line-height:1.6;color:var(--mute)}
.note{margin-top:30px;font-size:11.5px;color:var(--mute)}