/* ============================================================
   PIZZA CHEF — stile del sito
   Base "Trattoria moderna": crema, verde bandiera, titoli con grazie (Fraunces).
   Sezioni "Pop rosso" per novità e pizza al metro: rosso pieno, scritte grandi
   (Archivo), giallo, adesivo del cuoco, scacchiera del fazzoletto.
   ============================================================ */
@font-face{font-family:"Fraunces";src:url(../fonts/fraunces.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo";src:url(../fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --crema:#FBF6EE; --crema-2:#F3EADD; --linea:#E6DCCD; --bianco:#fff;
  --ink:#2A211C; --ink-2:#5D524A; --ink-3:#8A7D72;
  --verde:#1E5B3A; --verde-2:#164730; --verde-bg:#E3EEE6;
  --rosso:#D42E27; --rosso-scuro:#A9221C;
  --giallo:#FFD84D;
  --f-titoli:"Fraunces",Georgia,serif;
  --f-pop:"Archivo","Arial Narrow",sans-serif;
  --f:"Bricolage",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:22px; --hh:80px;
  --ombra:0 10px 30px rgba(42,33,28,.08); --ombra-lg:0 20px 50px rgba(42,33,28,.14);
  --dur:.2s; --ease:cubic-bezier(.2,.7,.2,1);
  --scacchi:repeating-conic-gradient(var(--ink) 0 25%,#fff 0 50%) 0 0/20px 20px;
  --tricolore:linear-gradient(90deg,var(--verde) 0 33.3%,#fff 0 66.6%,var(--rosso) 0);
}
@media (min-width:960px){:root{--hh:92px}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 16px);-webkit-text-size-adjust:100%;background:var(--crema)}
body{font:400 1.0625rem/1.55 var(--f);color:var(--ink);background:var(--crema);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--verde);outline-offset:3px;border-radius:8px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.salta{position:fixed;left:12px;top:-80px;z-index:300;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none}
.salta:focus{top:12px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.da-completare{background:#FFE45C;color:var(--ink);padding:0 6px;border-radius:4px;font:700 .72rem var(--f);vertical-align:middle}
.fascia{height:6px;background:var(--tricolore)}
.scacchi{height:20px;background:var(--scacchi)}

/* ---------- tipografia ---------- */
.kicker{font:700 .78rem/1 var(--f);letter-spacing:.18em;text-transform:uppercase;color:var(--verde)}
.titolo-xl,.titolo{font-family:var(--f-titoli);font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.titolo-xl{font-size:clamp(2.8rem,6.4vw,5.2rem);line-height:1;margin:16px 0 20px}
.titolo{font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.02;margin:10px 0 0}
.titolo-xl em,.titolo em{color:var(--rosso);font-style:italic}
.sottotitolo{font:600 1.35rem var(--f-titoli);margin:32px 0 12px}
.lead{font-size:1.12rem;color:var(--ink-2);max-width:46ch}

/* ---------- bottoni ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:12px 26px;border-radius:999px;border:0;font:600 1rem/1 var(--f);text-decoration:none;white-space:nowrap;transition:transform var(--dur) var(--ease),background var(--dur),color var(--dur),box-shadow var(--dur)}
.btn:hover{transform:translateY(-2px)}
.btn-verde{background:var(--verde);color:#fff}
.btn-verde:hover{background:var(--verde-2)}
.btn-linea{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-linea:hover{background:var(--ink);color:#fff}
.btn-bianco{background:#fff;color:var(--rosso);font-family:var(--f-pop);font-weight:800;text-transform:uppercase;letter-spacing:.02em;box-shadow:5px 5px 0 var(--ink)}
.btn-bianco:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}
.btn-lg{min-height:58px;padding:16px 30px;font-size:1.06rem}
.btn-icona{padding:0;width:52px;flex:none}

/* ---------- stato ---------- */
.stato{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:500;font-size:.92rem;color:var(--ink-2)}
.stato::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.stato.aperto{color:var(--verde)}
.stato.aperto::before{background:#2FA84F;box-shadow:0 0 0 4px rgba(47,168,79,.2)}

/* ---------- header ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(251,246,238,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea)}
.nav{height:var(--hh);display:flex;align-items:center;gap:16px}
.logo img{height:calc(var(--hh) - 16px);width:auto}
.nav nav{margin-left:auto}
#navList{display:flex;gap:4px;font-weight:500}
#navList a{display:block;padding:8px 14px;border-radius:999px;text-decoration:none;transition:background var(--dur)}
#navList a:hover{background:var(--crema-2)}
.nav-azioni{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav nav + .nav-azioni{margin-left:12px}
.menu-toggle{width:48px;height:48px;display:none;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1px var(--linea);background:#fff}
@media (max-width:959px){
  .menu-toggle{display:grid}
  .nav nav + .nav-azioni{margin-left:auto}
  #navList{display:none;position:fixed;inset:var(--hh) 0 auto 0;flex-direction:column;background:var(--crema);padding:8px 16px 24px;border-bottom:1px solid var(--linea);box-shadow:var(--ombra-lg)}
  #navList.open{display:flex}
  #navList a{min-height:58px;display:flex;align-items:center;font:600 1.5rem var(--f-titoli);border-radius:0;border-bottom:1px solid var(--linea)}
}

/* ---------- hero (A) ---------- */
.hero-in{display:grid;gap:36px;padding:40px 0 64px;align-items:center}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.tondo{position:relative;aspect-ratio:1;border-radius:50%;background:#fff;display:grid;place-items:center;padding:13%;box-shadow:0 0 0 16px var(--crema-2),var(--ombra-lg);max-width:500px;margin-inline:auto}
.tondo::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:2px dashed #D3C3AD}
.tondo img{width:100%;height:auto;transition:transform .5s var(--ease)}
.hero-visual:hover .tondo img{transform:rotate(-3deg) scale(1.03)}
@media (min-width:900px){.hero-in{grid-template-columns:1.1fr .9fr;gap:64px;padding:64px 0 88px}}
@media (max-width:599px){.hero-cta .btn{flex:1 1 100%}.tondo{max-width:300px}}

/* ---------- punti ---------- */
.punti{background:#fff;border-bottom:1px solid var(--linea);padding:30px 0}
.punti-in{display:grid;gap:18px}
@media (min-width:760px){.punti-in{grid-template-columns:repeat(4,1fr);gap:24px}}
.punto{display:flex;gap:14px;align-items:center}
.punto svg{width:48px;height:48px;padding:11px;flex:none;border-radius:50%;background:var(--verde-bg);fill:none;stroke:var(--verde);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.punto b{display:block;font-weight:600}
.punto span{color:var(--ink-3);font-size:.92rem}

/* ---------- sezioni A ---------- */
.sez{padding:72px 0}
@media (min-width:900px){.sez{padding:110px 0}}
.sez-head{display:grid;gap:12px 48px;margin-bottom:40px;align-items:end}
@media (min-width:900px){.sez-head{grid-template-columns:1fr 1fr}}
.due-col{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.due-col{grid-template-columns:1fr 1fr;gap:72px}}

/* menù */
.menu-card-grid{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (min-width:760px){.menu-card-grid{grid-template-columns:repeat(4,1fr);gap:18px}}
.menu-card{position:relative;display:flex;flex-direction:column;min-height:180px;padding:22px;background:#fff;border:1px solid var(--linea);border-radius:var(--r);text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.menu-card:hover{transform:translateY(-4px);box-shadow:var(--ombra-lg);border-color:transparent}
.menu-card .n{font:600 2.6rem/1 var(--f-titoli);color:var(--rosso)}
.menu-card b{font:600 1.25rem/1.15 var(--f-titoli);margin-top:auto;padding-top:18px}
.menu-card span:not(.n){color:var(--ink-3);font-size:.92rem}
.menu-card em{position:absolute;top:20px;right:20px;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-style:normal;background:var(--crema);transition:background var(--dur),color var(--dur)}
.menu-card:hover em{background:var(--verde);color:#fff}

/* bergamasche */
.casa{display:grid;gap:14px}
@media (min-width:700px){.casa{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.casa{grid-template-columns:repeat(3,1fr);gap:18px}}
.casa-card{display:flex;flex-direction:column;gap:8px;padding:24px;background:#fff;border:1px solid var(--linea);border-radius:var(--r);text-decoration:none;transition:transform var(--dur) var(--ease),box-shadow var(--dur)}
.casa-card:hover{transform:translateY(-4px);box-shadow:var(--ombra-lg)}
.casa-card .top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.casa-card b{font:600 1.55rem/1.1 var(--f-titoli)}
.casa-card i{font-style:normal;font-weight:600;color:var(--rosso);white-space:nowrap}
.casa-card span{color:var(--ink-3);font-size:.94rem}
.ingr-chip{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px}
.ingr-chip em{font-style:normal;font-size:.8rem;font-weight:600;padding:4px 12px;border-radius:999px;background:var(--verde-bg);color:var(--verde)}

/* ---------- sezioni POP (B) ---------- */
.pop{background:var(--rosso);color:#fff}
.pop-in{padding:64px 0 72px}
@media (min-width:900px){.pop-in{padding:96px 0 104px}}
.titolo-pop{font:900 clamp(3rem,8vw,6.4rem)/.86 var(--f-pop);font-stretch:75%;text-transform:uppercase;letter-spacing:-.01em}
.titolo-pop span{display:block;color:var(--giallo)}
.lead-pop{font-size:1.15rem;max-width:40ch;margin:20px 0 30px;opacity:.92}
.aiuto-pop{margin-top:16px;font-size:.92rem;opacity:.85}
.aiuto-pop a{font-weight:700}
.pop-head{display:grid;gap:24px;align-items:center;margin-bottom:36px}
@media (min-width:800px){.pop-head{grid-template-columns:1fr 280px}}
.sticker{position:relative;background:#fff;border-radius:26px;padding:8%;transform:rotate(4deg);box-shadow:10px 10px 0 var(--ink);max-width:280px}
.bolla{position:absolute;top:-16px;left:-18px;background:var(--giallo);color:var(--ink);font:800 .95rem var(--f-pop);padding:8px 14px;border-radius:14px;transform:rotate(-8deg);box-shadow:4px 4px 0 var(--ink)}
.sticker img{width:100%;height:auto}
@media (max-width:799px){.sticker{max-width:200px;margin-left:auto}}
.pop .voci{display:grid;border-top:2px solid rgba(255,255,255,.35);margin-bottom:36px}
@media (min-width:800px){.pop .voci{grid-template-columns:1fr 1fr;column-gap:56px}}
.voce{display:grid;grid-template-columns:40px 1fr auto;align-items:baseline;gap:4px 12px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.22);text-decoration:none;transition:padding var(--dur) var(--ease)}
.voce small{font:700 .85rem var(--f-pop);color:rgba(255,255,255,.6)}
.voce b{font:800 clamp(1.3rem,2.4vw,1.7rem)/1.05 var(--f-pop);font-stretch:85%;text-transform:uppercase}
.voce i{font:800 1.15rem var(--f-pop);font-style:normal;color:var(--giallo);white-space:nowrap}
.voce span{grid-column:2/-1;color:rgba(255,255,255,.82);font-size:.94rem}
.voce:hover{padding-left:8px}
.voce:hover b{color:var(--giallo)}

/* metro */
.metro-box{background:#fff;color:var(--ink);border-radius:26px;padding:28px 22px;box-shadow:12px 12px 0 var(--ink)}
@media (min-width:600px){.metro-box{padding:34px}}
.metro-tab{width:100%;border-collapse:collapse}
.metro-tab th,.metro-tab td{padding:14px 8px;border-bottom:1px solid var(--linea);text-align:right;white-space:nowrap}
.metro-tab tr:last-child th,.metro-tab tr:last-child td{border-bottom:0}
.metro-tab th:first-child{text-align:left;white-space:normal}
.metro-tab thead th{font:700 .78rem var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.metro-tab tbody th{font:800 1.2rem var(--f-pop);font-stretch:85%;text-transform:uppercase}
.metro-tab td{font:800 1.1rem var(--f-pop);color:var(--rosso)}
.righello-deco{height:34px;margin-bottom:16px;border-radius:8px;
  background:repeating-linear-gradient(90deg,var(--ink) 0 1.5px,transparent 1.5px 10%) top/100% 45% no-repeat,
             repeating-linear-gradient(90deg,rgba(42,33,28,.45) 0 1px,transparent 1px 2%) top/100% 22% no-repeat,var(--giallo);
  display:flex;justify-content:space-between;align-items:flex-end;padding:0 6px 4px;font:700 .72rem var(--f-pop)}

/* ---------- contatti (A) ---------- */
.contatti-in{display:grid;gap:40px}
@media (min-width:900px){.contatti-in{grid-template-columns:1fr 1fr;gap:72px;align-items:start}}
.info-lista{border-top:1px solid var(--ink);margin-top:24px}
.info{display:grid;grid-template-columns:110px 1fr;gap:12px;padding:18px 0;border-bottom:1px solid var(--linea)}
.info-k{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--verde);padding-top:4px}
.info span{display:block}
.info a{display:inline-flex;min-height:32px;align-items:center;font-weight:600;margin-right:18px;text-decoration:none}
.info a:hover{color:var(--rosso)}
.orari{width:100%;border-collapse:collapse}
.orari th,.orari td{padding:12px 0;border-bottom:1px solid var(--linea)}
.orari th{text-align:left;font-weight:500;text-transform:capitalize}
.orari td{text-align:right;font-weight:600}
.orari .oggi th,.orari .oggi td{color:var(--verde);font-weight:700}
.orari .oggi small{background:var(--verde);color:#fff;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-left:8px;padding:2px 8px;border-radius:999px;vertical-align:2px}
.orari .chiuso{color:var(--ink-3)}
.mappa{border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--linea);min-height:420px;display:flex}
.mappa-ph{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center;color:var(--ink-2)}
.mappa-ph p{max-width:34ch}
.mappa iframe{width:100%;min-height:420px;border:0}

/* ---------- footer ---------- */
.footer{background:var(--verde);color:#E6EFE8;font-size:.95rem}
.footer-in{display:grid;gap:28px;padding:48px 0 56px}
@media (min-width:760px){.footer-in{grid-template-columns:1.6fr 1fr 1fr;align-items:start}}
.footer-marchio{display:flex;gap:18px;align-items:center}
.footer-marchio img{width:130px;height:auto;flex:none;background:#fff;border-radius:20px;padding:10px}
.footer-link{display:grid;gap:2px}
.footer-link a{display:inline-flex;min-height:34px;align-items:center;text-decoration:none;font-weight:600}
.footer a:hover{color:var(--giallo)}
.footer [data-tel],.footer [data-cell]{font-weight:700;color:#fff}

/* ---------- barra telefono ---------- */
.barra-mobile{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:52px 1fr;gap:10px;padding:10px 14px calc(12px + env(safe-area-inset-bottom));background:rgba(251,246,238,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--linea)}
@media (max-width:959px){body.home{padding-bottom:calc(78px + env(safe-area-inset-bottom))}}
@media (min-width:960px){.barra-mobile{display:none}}


/* Nomi usati da pagina Ordina, carrello e pannello: puntano ai colori del sito */
:root{
  --fondo:var(--crema); --grigio:var(--crema-2); --campo:#D9CCBB;
  --verde-scuro:var(--verde); --rosso-bg:#FBE3DE; --giallo-bg:#FFF1C2; --giallo-ink:#6E5000;
  --wa:#1FA855; --wa-scuro:#178745; --ombra-sm:0 2px 8px rgba(42,33,28,.06);
}
body:has(dialog[open]){overflow:hidden}
input,select,textarea{font:inherit;color:inherit}
button:disabled{cursor:not-allowed}

/* ---------- bottoni in più (pagina Ordina) ---------- */
.btn:disabled{opacity:.4;transform:none}
.btn-rosso{background:var(--rosso);color:#fff}
.btn-rosso:hover:not(:disabled){background:var(--rosso-scuro)}
.btn-verde:disabled:hover{background:var(--verde)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-scuro)}
.btn-sm{min-height:38px;padding:6px 16px;font-size:.92rem}
.btn-blocco{width:100%}
.btn.carica{color:transparent!important;pointer-events:none}
.btn.carica::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:gira .7s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.btn-testo{min-height:44px;padding:8px;color:var(--ink-2);font-weight:600;text-decoration:underline;text-underline-offset:3px;align-self:center}
.btn-testo:hover{color:var(--rosso)}
.sottotitolo{font:600 1.35rem var(--f-titoli)}

/* ============ MODULI ============ */
.campo{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.campo label{font-weight:600;font-size:.95rem}
.campo label small{font-weight:400;color:var(--ink-3)}
.campo input,.campo select,.campo textarea{width:100%;min-height:52px;padding:10px 16px;border:1.5px solid var(--campo);border-radius:14px;background:#fff;font-size:1rem;transition:border-color var(--dur),box-shadow var(--dur)}
.campo textarea{resize:vertical;min-height:80px}
.campo select{appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317120F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 4px rgba(23,18,15,.08)}
.campo [aria-invalid="true"]{border-color:var(--rosso);box-shadow:0 0 0 4px rgba(218,44,36,.12)}
::placeholder{color:var(--ink-3)}
.err{color:var(--rosso-scuro);font-size:.88rem;font-weight:600}
.err:empty{display:none}
.campi-2{display:grid;gap:0 12px}
@media (min-width:480px){.campi-2{grid-template-columns:1fr 1fr}}
.check{display:flex;align-items:center;gap:12px;min-height:52px;cursor:pointer;padding:6px 0;font-weight:600}
.check input{width:22px;height:22px;accent-color:var(--ink);flex:none}
.check small{display:block;color:var(--ink-3);font-size:.85rem;font-weight:400}
.trappola{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.antibot{margin-bottom:8px}
.antibot:empty{margin:0}
.form-err{background:var(--rosso-bg);color:var(--rosso-scuro);padding:12px 16px;border-radius:12px;margin-bottom:12px;font-size:.95rem;font-weight:600}

.stepper{display:inline-flex;align-items:center;border:1.5px solid var(--campo);border-radius:999px;background:#fff;flex:none}
.stepper button{width:44px;height:44px;border-radius:50%;font-size:1.35rem;line-height:1;display:grid;place-items:center;color:var(--ink)}
.stepper button:hover:not(:disabled){background:var(--grigio)}
.stepper button:disabled{color:var(--ink-3);opacity:.4}
.stepper b{min-width:40px;text-align:center;font-weight:700;white-space:nowrap}
.stepper-sm button{width:36px;height:36px;font-size:1.15rem}
.stepper-sm b{min-width:28px;font-size:.95rem}

.ok-ico{width:72px;height:72px;border-radius:50%;background:var(--verde);display:grid;place-items:center;margin:8px auto 16px}
.ok-ico svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.msg-anteprima{white-space:pre-wrap;word-break:break-word;font:400 .9rem/1.5 var(--f);background:var(--fondo);border-radius:14px;padding:16px;text-align:left;max-height:260px;overflow:auto;margin:16px 0}
.msg-anteprima:empty{display:none}


/* ============ AVVISI ============ */
.toast{position:fixed;inset:auto auto calc(100px + env(safe-area-inset-bottom)) 50%;transform:translateX(-50%);margin:0;border:0;max-width:calc(100% - 32px);width:max-content;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;text-align:center;box-shadow:var(--ombra-lg);z-index:400;opacity:0;pointer-events:none;transition:opacity var(--dur),translate var(--dur);translate:0 10px}
.toast.on{opacity:1;translate:0 0}
@media (min-width:960px){.toast{bottom:28px}}

/* ============================================================
   PAGINA ORDINA
   ============================================================ */
@media (max-width:959px){body.ordina{padding-bottom:calc(88px + env(safe-area-inset-bottom))}}
.carrello-btn{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:48px;min-width:48px;justify-content:center;padding:0 16px;border-radius:999px;background:var(--verde);color:#fff;font-weight:700}
.carrello-btn:hover{background:var(--verde-2)}
.badge{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--rosso);color:#fff;font-size:.75rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--fondo)}
@media (max-width:519px){.carrello-tot{display:none!important}}

.ordina-top{padding:32px 0 18px}
.ordina-top .titolo{margin:0 0 16px}
.info-chip{display:flex;flex-wrap:wrap;gap:8px}
.info-chip li{background:#fff;border-radius:999px;padding:6px 14px;font-size:.88rem;font-weight:600;color:var(--ink-2)}
.banner{margin-top:16px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:14px 18px;border-radius:16px;background:#fff;font-size:.95rem}
.banner-info{background:var(--giallo-bg);color:var(--giallo-ink)}

.menu-bar{position:sticky;top:var(--hh);z-index:40;background:rgba(247,244,239,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--linea);padding:12px 0}
.sezioni{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--grigio);border-radius:999px;padding:4px}
.sez-tab{min-height:44px;border-radius:999px;font:600 .95rem/1.1 var(--f);color:var(--ink-2);padding:4px 6px;transition:background var(--dur),color var(--dur)}
.sez-tab:hover{color:var(--ink)}
.sez-tab.on{background:var(--verde);color:#fff}
@media (max-width:420px){.sez-tab{font-size:.82rem}}
.menu-bar-2{display:flex;gap:10px;align-items:center;margin-top:10px}
.cats{display:flex;gap:8px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;padding:2px}
.cats::-webkit-scrollbar{display:none}
.cat{white-space:nowrap;padding:6px 16px;border-radius:999px;background:#fff;font-weight:600;font-size:.9rem;text-decoration:none;min-height:40px;display:inline-flex;align-items:center}
.cat:hover{background:var(--verde);color:#fff}
.cerca{display:flex;align-items:center;gap:8px;border-radius:999px;padding:0 16px;min-height:44px;background:#fff;width:100%;max-width:320px;margin-left:auto;cursor:text;color:var(--ink-3);transition:max-width var(--dur) var(--ease),box-shadow var(--dur)}
.cerca:focus-within{box-shadow:0 0 0 2px var(--ink)}
.cerca input{border:0;outline:0;background:transparent;flex:1;min-width:0;font-size:1rem;color:var(--ink)}
.cerca svg{flex:none}
@media (max-width:699px){
  .menu-bar-2 .cerca{max-width:44px;padding:0 12px;flex:none}
  .menu-bar-2 .cerca:focus-within,.menu-bar-2 .cerca:has(input:not(:placeholder-shown)){max-width:100%;flex:1}
  .menu-bar-2:has(.cerca:focus-within) .cats,.menu-bar-2:has(input:not(:placeholder-shown)) .cats{display:none}
  .menu-bar-2 .cats[hidden] + .cerca{max-width:100%;flex:1}
}

.pannello{padding:12px 0 64px}
.cat-blocco{margin-top:40px;scroll-margin-top:calc(var(--hh) + 140px)}
.cat-titolo{font:600 clamp(2rem,4.4vw,3rem)/1.05 var(--f-titoli);letter-spacing:-.02em;padding-bottom:14px;border-bottom:1px solid var(--ink)}
.cat-note{color:var(--ink-3);font-size:.95rem;margin-top:12px}
.piatti{display:grid}
@media (min-width:900px){.piatti{grid-template-columns:1fr 1fr;column-gap:48px}}
.piatto{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--linea);width:100%;text-align:left}
.piatto-btn:hover .piatto-nome{color:var(--rosso)}
.piatto-btn:hover .piu{background:var(--rosso);color:#fff;transform:rotate(90deg)}
.piatto-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.piatto-nome{font-weight:700;font-size:1.1rem;letter-spacing:-.02em;line-height:1.25;transition:color var(--dur)}
.piatto-desc{color:var(--ink-3);font-size:.92rem;line-height:1.45}
.piatto-dx{flex:none;display:flex;align-items:center;gap:14px}
.prezzo{font-weight:700;white-space:nowrap}
.piu{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--ink);font-size:1.4rem;line-height:1;display:grid;place-items:center;transition:background var(--dur),color var(--dur),transform var(--dur) var(--ease);flex:none}
.piu-btn{width:44px;height:44px}
.piu-btn:hover{background:var(--rosso);color:#fff}
.nel-carrello{width:40px;height:40px;border-radius:50%;background:var(--rosso);color:#fff;font-weight:700;display:grid;place-items:center}
.tag{display:inline-block;margin-left:8px;font:700 .66rem/1.6 var(--f);text-transform:uppercase;letter-spacing:.06em;padding:0 8px;border-radius:999px;background:var(--giallo);color:var(--ink);vertical-align:3px}
.tag-piccante{background:var(--rosso)}
.tag-casa{background:var(--verde-scuro)}
.surg{color:var(--rosso);font-weight:700;margin-left:2px}
.al{font-size:.7rem;color:var(--ink-3);margin-left:3px;font-weight:600}
.vuoto{text-align:center;padding:48px 16px;color:var(--ink-2)}
.vuoto b{color:var(--ink);font-size:1.15rem}
.vuoto .btn{margin-top:16px}

/* Pizza al metro (pagina ordina) */
.metro-ord{display:grid;gap:12px;margin:20px 0 10px}
@media (min-width:760px){.metro-ord{grid-template-columns:1fr 1fr;gap:16px}}
.metro-gusto{background:#fff;border-radius:var(--r);padding:22px}
.metro-gusto b{font:600 1.6rem/1.05 var(--f-titoli)}
.metro-gusto p{color:var(--ink-3);font-size:.92rem;margin:6px 0 16px}
.metro-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.metro-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;border-radius:16px;background:var(--fondo);line-height:1.25;transition:background var(--dur),color var(--dur)}
.metro-btn span{font-weight:600;font-size:.9rem}
.metro-btn i{font-style:normal;font-weight:800;font-size:1.1rem}
.metro-btn:hover{background:var(--rosso);color:#fff}
.metro-btn.ha{background:var(--verde);color:#fff}
.metro-btn em{font-style:normal;font-size:.75rem;font-weight:600;opacity:.85}

.allergeni{background:#fff;padding:40px 0 48px}
.allergeni .sottotitolo{margin-top:0}
.allergeni p{color:var(--ink-2);font-size:.95rem;max-width:80ch}
.allergeni-lista{list-style:decimal;padding-left:22px;margin-top:12px;columns:2;column-gap:24px;font-size:.92rem;color:var(--ink-2)}
@media (min-width:700px){.allergeni-lista{columns:4}}

/* ---------- Barra carrello (telefono) ---------- */
.barra-carrello{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:12px;min-height:62px;padding:8px 22px 8px 8px;border-radius:999px;background:var(--verde);color:#fff;box-shadow:var(--ombra-lg);animation:sali var(--dur) var(--ease)}
.bc-n{width:46px;height:46px;border-radius:50%;background:var(--rosso);display:grid;place-items:center;font-weight:700}
.bc-t{flex:1;text-align:left;font:700 1.05rem var(--f)}
.bc-tot{font-weight:700}
@media (min-width:960px){.barra-carrello{display:none!important}}
@keyframes sali{from{opacity:0;transform:translateY(16px)}}

/* ---------- Finestre (dialog) ---------- */
dialog.sheet{padding:0;border:0;background:var(--fondo);color:inherit;width:100%;max-width:100%;max-height:92dvh;margin:auto auto 0;border-radius:28px 28px 0 0;box-shadow:var(--ombra-lg);overflow:hidden}
dialog.sheet[open]{animation:sheet-su .3s var(--ease)}
dialog.sheet::backdrop{background:rgba(23,18,15,.5);backdrop-filter:blur(3px)}
@keyframes sheet-su{from{transform:translateY(40px);opacity:0}}
.sheet-in{display:flex;flex-direction:column;max-height:92dvh}
.sheet-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:24px 22px 16px}
.sheet-h h3{font:600 2rem/1.05 var(--f-titoli);letter-spacing:-.02em}
.sheet-sub{color:var(--ink-3);font-size:.95rem;margin-top:8px}
.chiudi{width:44px;height:44px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.chiudi:hover{background:var(--verde);color:#fff}
.sheet-b{padding:4px 22px 18px;overflow:auto;flex:1;min-height:0;overscroll-behavior:contain}
.sheet-f{padding:14px 22px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--linea);display:flex;gap:12px;align-items:center;background:var(--fondo)}
.sheet-f > .btn{flex:1}
.sheet-f-col{flex-direction:column;align-items:stretch;gap:10px}
.sheet-t{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:22px 0 10px}
.sheet-t:first-child{margin-top:4px}
.sheet-t small{text-transform:none;letter-spacing:0;font-size:.85rem}
@media (min-width:700px){
  dialog.sheet{margin:auto;max-width:560px;border-radius:28px;max-height:86dvh}
  .sheet-in{max-height:86dvh}
  dialog.drawer{margin:0 0 0 auto;height:100dvh;max-height:100dvh;width:460px;border-radius:0}
  dialog.drawer .sheet-in{height:100dvh;max-height:100dvh}
  dialog.drawer[open]{animation:drawer-in .3s var(--ease)}
}
@keyframes drawer-in{from{transform:translateX(40px);opacity:0}}
.scelta-forma{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.forma{position:relative;cursor:pointer}
.forma input{position:absolute;opacity:0;pointer-events:none}
.forma span{display:flex;flex-direction:column;justify-content:center;padding:12px 16px;border-radius:16px;min-height:64px;line-height:1.3;background:#fff;box-shadow:inset 0 0 0 1.5px var(--linea);transition:box-shadow var(--dur),background var(--dur)}
.forma b{font-weight:700}
.forma small{color:var(--ink-3);font-size:.85rem}
.forma input:checked + span{box-shadow:inset 0 0 0 2px var(--verde);background:var(--verde-bg)}
.forma input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.chip{min-height:38px;padding:6px 14px;border-radius:999px;background:#fff;font-size:.9rem;font-weight:500;transition:background var(--dur),color var(--dur)}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.chip.on{background:var(--verde);color:#fff}
.chip.off{text-decoration:line-through;color:var(--ink-3);background:transparent;box-shadow:inset 0 0 0 1px var(--campo)}

/* ---------- Carrello e invio ---------- */
.co-pane{display:flex;flex-direction:column;flex:1;min-height:0}
.co-steps{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:.82rem;font-weight:600;color:var(--ink-3);counter-reset:s}
.co-steps li{display:flex;align-items:center;gap:6px;counter-increment:s}
.co-steps li::before{content:counter(s);width:22px;height:22px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.75rem}
.co-steps li:not(:last-child)::after{content:"";width:14px;height:1.5px;background:var(--campo);margin-left:2px}
.co-steps li.on{color:var(--ink)}
.co-steps li.on::before{background:var(--verde);color:#fff}
.co-steps li.fatto::before{content:"✓";background:var(--verde);color:#fff}
.riga-cart{display:flex;gap:12px;padding:16px 0;border-bottom:1px solid var(--linea);justify-content:space-between}
.rc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rc-info b{font-weight:700;line-height:1.3}
.rc-info small{color:var(--ink-3);font-size:.86rem;line-height:1.4}
.rc-dx{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.rc-tot{font-weight:700}
.suggeriti{margin-top:20px}
.sug-t{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin-bottom:10px}
.sug-lista{display:grid;gap:8px}
.sug{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;min-height:52px;border-radius:14px;background:#fff;text-align:left;font-weight:600;transition:background var(--dur),color var(--dur)}
.sug b{white-space:nowrap}
.sug:hover{background:var(--verde);color:#fff}
.totale{display:flex;justify-content:space-between;align-items:baseline}
.totale span{font:600 1rem var(--f);color:var(--ink-2)}
.totale b{font:600 1.9rem var(--f-titoli)}
.due-btn{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
.ritiro-card{background:#fff;border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.ritiro-card b{font-weight:700}
.ritiro-card small{color:var(--ink-3)}
.co-ok-t{font:600 2.2rem var(--f-titoli);letter-spacing:-.02em;text-align:center;margin:4px 0 8px}

/* ============ MOVIMENTO RIDOTTO ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============ PAGINE DI TESTO (privacy) ============ */
.testo{padding:48px 0 72px;max-width:760px}
.testo h1{margin-bottom:20px}
.testo h2{font:700 1.3rem var(--f);letter-spacing:-.02em;margin:32px 0 8px}
.testo p,.testo li{color:var(--ink-2);margin-bottom:10px}
.testo ul{list-style:disc;padding-left:22px}

/* Allergeni */
.allergeni-riga{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:.75rem;font-weight:600;color:var(--ink-3)}
.allergeni-riga > span[aria-hidden]{display:flex;align-items:center;gap:4px}
.allergeni-riga i{font-style:normal;min-width:20px;height:20px;padding:0 5px;border-radius:999px;display:inline-grid;place-items:center;background:var(--grigio,#EFEAE3);color:var(--ink-2);font-size:.72rem;font-weight:700}
.sheet-al{font-size:.86rem;color:var(--ink-2);margin-top:8px}

/* App installabile */
.btn-installa{gap:8px}
.passi-ios{list-style:decimal;padding-left:22px;display:grid;gap:12px;font-size:1.02rem}

/* Consegna */
.riga-consegna{display:flex;justify-content:space-between;gap:12px;font-weight:600;color:var(--ink-2)}
.scelta-modo{margin-bottom:16px}
#boxConsegna{margin-bottom:4px}

.sez-azioni{display:flex;flex-wrap:wrap;gap:10px}

/* Notifiche */
.pop-azioni{display:flex;flex-wrap:wrap;gap:14px}
.btn-giallo{background:var(--giallo);color:var(--ink);font-family:var(--f-pop);font-weight:800;text-transform:uppercase;letter-spacing:.02em;box-shadow:5px 5px 0 var(--ink)}
.btn-giallo:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}


/* Testata della pagina Ordina */
.stato-nav{margin:0 0 0 8px}
@media (max-width:699px){.stato-nav{display:none}}
.ordina-top{background:linear-gradient(180deg,var(--crema-2),var(--crema))}