/* ═══════════════════════════════════════════════════════════
   Ca' dei Baloss · menù del QR code (menu.html)
   Stessa palette del sito: crema, rosso Baloss, oro, mattone.
   Pensato per il telefono, centrato e comodo anche su computer.
   ═══════════════════════════════════════════════════════════ */
:root {
  --crema: #fdf4e3; --crema-2: #f5e2c0; --carta: #fffaf1;
  --rosso: #cc2200; --rosso-hover: #a81b00; --oro: #f0a500; --oro-chiaro: #ffd166;
  --mattone-scuro: #5c2209; --brace: #3d1508;
  --testo: #2e1005; --testo-70: rgba(46, 16, 5, .72); --testo-45: rgba(46, 16, 5, .45); --linea: rgba(46, 16, 5, .1);
  --f-display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif;
  --f-body: 'Instrument Sans', system-ui, sans-serif;
  --f-mono: 'DM Mono', ui-monospace, monospace;
  --pad: 1.15rem; --w: 680px; --r: 18px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
body { margin: 0; background: var(--crema); color: var(--testo); font: 400 1rem/1.5 var(--f-body); -webkit-font-smoothing: antialiased; }
body.dlg-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--rosso); outline-offset: 2px; border-radius: 8px; }

/* ── testata ── */
.m-head {
  background: radial-gradient(120% 140% at 50% 0%, #7a3010 0%, var(--mattone-scuro) 55%, var(--brace) 100%);
  color: var(--crema); padding: calc(.9rem + env(safe-area-inset-top)) var(--pad) 1.6rem;
  border-bottom: 3px solid var(--oro);
}
.m-head > * { max-width: var(--w); margin-left: auto; margin-right: auto; }
.m-head-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.m-brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.m-brand img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--oro); }
.m-brand span { font: 800 1.15rem/1 var(--f-display); font-variation-settings: 'wdth' 80; }
.m-title { font: 800 clamp(2.8rem, 13vw, 4.2rem)/.9 var(--f-display); font-variation-settings: 'wdth' 78; letter-spacing: -.035em; margin-top: 1.4rem; }
.m-note { margin-top: .7rem; font-size: .85rem; color: rgba(253, 244, 227, .72); }
.m-note-photo { margin-top: .35rem; font-style: italic; color: rgba(253, 244, 227, .6); }

.m-lang { position: relative; }
.m-lang-btn {
  display: flex; align-items: center; gap: .45rem; height: 42px; padding: 0 .85rem; border-radius: 999px;
  background: rgba(61, 21, 8, .45); border: 1.5px solid rgba(253, 244, 227, .2); color: var(--crema); font: 500 .85rem var(--f-mono);
}
.m-flag, .m-lang-list img { width: 20px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); object-fit: cover; }
.m-lang-list {
  position: absolute; right: 0; top: calc(100% + .45rem); z-index: 40; min-width: 170px; padding: .35rem;
  background: var(--brace); border: 1px solid rgba(253, 244, 227, .16); border-radius: 14px; box-shadow: 0 20px 40px -12px rgba(20, 6, 2, .6);
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .3s var(--ease), visibility .2s;
}
.m-lang.is-open .m-lang-list { opacity: 1; visibility: visible; transform: none; }
.m-lang-list button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .65rem .75rem; border: 0; background: none; color: var(--crema); border-radius: 10px; text-align: left; }
.m-lang-list button[aria-current="true"] { background: var(--mattone-scuro); }

/* ── barra categorie (resta in alto) ── */
.m-cats {
  position: sticky; top: 0; z-index: 30;
  background: rgba(253, 244, 227, .92); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 0 var(--linea), 0 8px 20px -14px rgba(74, 31, 10, .4);
}
.m-cats-wrap { position: relative; max-width: var(--w); margin: 0 auto; }
.m-cats-track {
  display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; padding: .7rem var(--pad);
  scroll-padding: 0 var(--pad);
}
/* frecce + sfumatura ai lati: compaiono solo se ci sono altre categorie da quella parte */
.m-cats-arrow {
  position: absolute; top: 0; bottom: 0; z-index: 2; width: 52px; border: 0; padding: 0;
  display: flex; align-items: center; color: var(--mattone-scuro);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.m-cats-arrow svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: var(--carta); box-shadow: 0 2px 8px rgba(74, 31, 10, .25); }
.m-cats-prev { left: 0; justify-content: flex-start; padding-left: 6px; background: linear-gradient(90deg, rgba(253, 244, 227, 1) 35%, rgba(253, 244, 227, 0)); }
.m-cats-next { right: 0; justify-content: flex-end; padding-right: 6px; background: linear-gradient(270deg, rgba(253, 244, 227, 1) 35%, rgba(253, 244, 227, 0)); }
.m-cats.can-prev .m-cats-prev, .m-cats.can-next .m-cats-next { opacity: 1; pointer-events: auto; }
.m-cats.can-next .m-cats-next svg { animation: nudgeR 1.6s var(--ease) 2 .6s; }
@keyframes nudgeR { 40% { transform: translateX(4px); } }
.m-cats-track::-webkit-scrollbar { display: none; }
.m-cat {
  flex: none; padding: .55rem .95rem; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font-weight: 600; font-size: .92rem; border: 1.5px solid rgba(46, 16, 5, .14); background: var(--carta);
  transition: background-color .25s, color .25s, border-color .25s;
}
.m-cat.is-on { background: var(--mattone-scuro); border-color: var(--mattone-scuro); color: var(--crema); }

/* ── sezioni ── */
.m-main { max-width: var(--w); margin: 0 auto; padding: .4rem var(--pad) 2rem; }
.m-sec { padding-top: 2.1rem; }
.m-sec-t { font: 800 2rem/1 var(--f-display); font-variation-settings: 'wdth' 80; letter-spacing: -.03em; }
.m-sec-sub { margin-top: .45rem; color: var(--testo-70); font-size: .95rem; }
.m-list { margin-top: 1rem; display: grid; gap: .7rem; }
.m-item {
  display: flex; gap: .9rem; align-items: flex-start; background: var(--carta); border-radius: var(--r);
  padding: .95rem; box-shadow: 0 1px 0 var(--linea), 0 12px 26px -22px rgba(74, 31, 10, .45);
}
.m-item-body { flex: 1; min-width: 0; }
.m-item h3 { font: 700 1.12rem/1.2 var(--f-display); font-variation-settings: 'wdth' 85; letter-spacing: -.01em; }
.m-item p { margin-top: .3rem; font-size: .9rem; line-height: 1.45; color: var(--testo-70); }
.m-badge { display: inline-block; vertical-align: middle; font: 500 .7rem/1 var(--f-mono); padding: .3rem .5rem; border-radius: 999px; margin-left: .25rem; position: relative; top: -.1em; letter-spacing: 0; }
.m-badge-new { background: var(--rosso); color: #fff; }
.m-badge-hot { background: rgba(204, 34, 0, .1); color: var(--rosso); }

/* foto delle pizze (cerchio come nel sito) */
.m-thumb { flex: none; width: 88px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: var(--brace); box-shadow: 0 10px 20px -12px rgba(46, 16, 5, .6); }
.m-thumb img { width: 100%; height: 100%; object-fit: cover; scale: 1.2; transition: transform .5s var(--ease); }
.m-thumb:active img { transform: scale(.94); }
.m-thumb--sq { border-radius: 16px; }
.m-thumb--sq img { scale: 1; }

/* pizze del mese: card grandi */
.m-sec--feature .m-list { gap: 1rem; }
.m-sec--feature .m-item { flex-direction: column; padding: 0; overflow: hidden; background: var(--brace); color: var(--crema); }
.m-sec--feature .m-thumb { width: 100%; aspect-ratio: 1; border-radius: 0; box-shadow: none; }
.m-sec--feature .m-thumb img { scale: 1; }
.m-sec--feature .m-item-body { padding: 1rem 1.1rem 1.1rem; width: 100%; }
.m-sec--feature .m-item h3 { font-size: 1.6rem; }
.m-sec--feature .m-item p { color: rgba(253, 244, 227, .78); }
.m-sec--feature .m-price { color: var(--oro); }
.m-sec--feature .m-badge-hot { background: rgba(255, 122, 92, .18); color: #ffb39e; }

/* prezzo (e taglie per le bevande) */
.m-row-end { margin-top: .6rem; }
.m-price { font: 500 1.05rem/1 var(--f-mono); color: var(--rosso); letter-spacing: -.02em; white-space: nowrap; }
.m-vars { display: flex; flex-wrap: wrap; gap: .4rem; }
.m-var { display: inline-flex; align-items: baseline; gap: .45rem; padding: .45rem .7rem; border-radius: 999px; background: rgba(204, 34, 0, .07); }
.m-var-l { font: 500 .82rem/1 var(--f-mono); color: var(--testo-70); }
.m-var .m-price { font-size: .98rem; }
.m-sec--feature .m-price { color: var(--oro); }

/* ── dialog comuni ── */
dialog { border: 0; padding: 0; color: var(--testo); }
dialog:focus { outline: none; }
dialog::backdrop { background: rgba(30, 10, 3, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.m-x { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(46, 16, 5, .08); font-size: 1rem; z-index: 2; }
.m-btn { min-height: 52px; padding: .8rem 1.3rem; border-radius: 999px; border: 1.5px solid transparent; font-weight: 600; font-size: 1rem; }
.m-btn:disabled { opacity: .4; }
.m-btn-red { background: var(--rosso); color: #fff; }
.m-btn-gold { background: var(--oro); color: var(--brace); }
.m-btn-dark { background: var(--brace); color: var(--crema); }
.m-btn-ghost { background: transparent; border-color: rgba(46, 16, 5, .2); }

/* ── piede ── */
.m-foot { display: grid; justify-items: center; gap: .45rem; text-align: center; padding: 2.5rem var(--pad) 3rem; background: var(--brace); color: rgba(253, 244, 227, .75); border-top: 3px solid var(--oro); font-size: .9rem; }
.m-foot img { width: 60px; height: 60px; border-radius: 50%; }
.m-foot strong { color: var(--crema); font: 800 1.3rem/1 var(--f-display); font-variation-settings: 'wdth' 80; }
.m-foot a { text-decoration: none; }
.m-foot-link { margin-top: .6rem; padding: .7rem 1.2rem; border-radius: 999px; border: 1.5px solid rgba(240, 165, 0, .5); color: var(--oro); font-weight: 600; }

/* schermi grandi: un filo più d'aria */
@media (min-width: 720px) {
  :root { --pad: 1.5rem; }
  .m-thumb { width: 104px; }
  .m-sec--feature .m-list { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══ INTRO: IL BALOSS APRE IL LIBRO DEL MENÙ ═══
   Solo con la classe .has-libro (messa in <head> alla prima apertura della visita). */
.libro { display: none; }
.has-libro .libro {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden;
  background: #4b1c0d;   /* lo STESSO colore su cui è montato il video (niente trasparenza: funziona su ogni telefono) */
  transition: opacity .45s ease; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.has-libro body { overflow: hidden; }
.libro::after { /* grana come nel sito */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
.libro.is-out { opacity: 0; pointer-events: none; }
.lb-stage {
  position: relative; width: min(100vw, 56vh, 640px); width: min(100vw, 56svh, 640px); aspect-ratio: 700 / 1100;   /* 56 = 88% dell'altezza x 700/1100 */
  transform-origin: 37% 52%; animation: lbIn .7s var(--ease) both;
}
@keyframes lbIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
.lb-poster, .lb-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  /* i bordi del video sfumano nel fondo: nessun rettangolo anche se un telefono rende il marrone un filo diverso */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 5%, #000 95%, transparent 100%);
  mask-composite: intersect;
}
.lb-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 75% 65% at 50% 48%, rgba(122, 48, 16, .35) 0%, rgba(75, 28, 13, 0) 45%, rgba(30, 10, 3, .55) 100%); }
.lb-video { opacity: 0; }
.lb-video.is-on { opacity: 1; }
/* appena il video gira, l'immagine ferma sotto sparisce (altrimenti si vede la sua copia dietro quando si muove) */
.libro.is-playing .lb-poster { opacity: 0; }
/* la luce dorata che esce dalle pagine (dietro il personaggio, così il libro resta leggibile) */
.lb-glow {
  position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.3);
  border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 226, 150, .95) 0%, rgba(240, 165, 0, .55) 28%, rgba(240, 165, 0, 0) 66%);
  transition: opacity .6s ease, transform .9s var(--ease); will-change: opacity, transform;
}
.libro.is-open .lb-glow { opacity: .75; transform: translate(-50%, -50%) scale(1); }
/* scintille di farina dorata che salgono dalle pagine */
.lb-sparks { position: absolute; inset: 0; pointer-events: none; }
.lb-sparks i {
  position: absolute; left: 50%; top: 48.5%; width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff3c4; box-shadow: 0 0 8px 2px rgba(255, 209, 102, .85); opacity: 0;
}
.libro.is-open .lb-sparks i { animation: lbSpark var(--d) ease-out var(--w) both; }
@keyframes lbSpark {
  0% { opacity: 0; transform: translate(0, 0) scale(.4); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1); }
}
/* dissolvenza: a libro aperto la scena sfuma e il menù affiora da sotto (il libro si avvicina appena) */
.libro { will-change: opacity; opacity: .999; }   /* già "trasparente" per il browser: il menù sotto è disegnato in anticipo */
.libro.is-fade { opacity: 0; pointer-events: none; transition: opacity 1s cubic-bezier(.45, 0, .25, 1); }
.lb-stage { will-change: transform; }
.libro.is-fade .lb-stage { transform: scale(1.06); transition: transform 1s cubic-bezier(.33, 0, .2, 1); }
.libro.is-fade .lb-skip { opacity: 0; transition: opacity .3s; }
/* (vecchio tuffo dentro le pagine, non più usato) */
.libro.is-dive .lb-stage { transform: scale(7); transition: transform .75s cubic-bezier(.7, 0, .84, 0); }
.lb-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 33% 52%, #fffaf1 0%, var(--crema) 45%, #f5e2c0 100%);
}
.libro.is-dive .lb-flash { opacity: 1; transition: opacity .45s ease .15s; }
.lb-skip {
  position: absolute; left: 0; right: 0; bottom: calc(1.4rem + env(safe-area-inset-bottom)); text-align: center;
  font: 500 .78rem var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(253, 244, 227, .55);
  animation: lbIn .6s ease 1.2s both;
}
.libro.is-dive .lb-skip { opacity: 0; transition: opacity .2s; }
/* il menù arriva come una pagina appena girata */
/* il menù non si anima per conto suo: lo rivela la dissolvenza (meno lavoro = più fluido) */
@keyframes lbPage { from { opacity: 0; transform: translateY(26px); } }

/* ═══ FILTRI RAPIDI ═══ */
.m-filters { background: var(--crema); }
.m-filters-track {
  display: flex; gap: .45rem; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 var(--pad);
  padding: .9rem var(--pad) .2rem;
}
.m-filters-track::-webkit-scrollbar { display: none; }
.m-filter {
  flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem .85rem .45rem .7rem;
  border-radius: 999px; border: 1.5px dashed rgba(46, 16, 5, .28); background: transparent; color: var(--testo);
  font: 600 .88rem/1 var(--f-body); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .25s, border-color .25s, color .25s, transform .15s;
}
.m-filter:active { transform: scale(.96); }
.m-filter[aria-pressed="true"] { border-style: solid; border-color: var(--rosso); background: var(--rosso); color: #fff; }
.m-f-ico { font-size: 1rem; line-height: 1; }
.m-f-white { width: 14px; height: 14px; border-radius: 50%; background: #fffaf1; box-shadow: inset 0 0 0 2px rgba(46, 16, 5, .35); }
.m-filter[aria-pressed="true"] .m-f-white { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.m-none { margin: 2.5rem 0 1rem; padding: 1.4rem; text-align: center; color: var(--testo-70); border: 1.5px dashed var(--linea); border-radius: var(--r); }
.m-item.is-in { animation: mIn .45s var(--ease) both; }
@keyframes mIn { from { opacity: 0; transform: translateY(10px); } }

/* pillola del filtro attivo, in basso al centro */
.m-fpill {
  position: fixed; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%);
  display: flex; align-items: center; gap: .3rem; padding: .3rem .3rem .3rem 1rem; border-radius: 999px;
  background: var(--brace); color: var(--crema); box-shadow: 0 14px 30px -10px rgba(20, 6, 2, .6); white-space: nowrap;
  font: 600 .88rem/1 var(--f-body); animation: mPill .4s var(--ease) both; max-width: calc(100vw - 6rem);
}
.m-fpill[hidden] { display: none; }
@keyframes mPill { from { opacity: 0; transform: translate(-50%, 16px); } }
.m-fpill-t { overflow: hidden; text-overflow: ellipsis; }
.m-fpill button { flex: none; border: 0; border-radius: 999px; padding: .6rem .8rem; background: rgba(253, 244, 227, .14); color: var(--crema); font: 600 .82rem/1 var(--f-body); cursor: pointer; }

/* ═══ TORNA SU ═══ */
.m-top {
  position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 41; width: 46px; height: 46px;
  display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--oro); color: var(--brace);
  box-shadow: 0 10px 24px -8px rgba(20, 6, 2, .55); cursor: pointer;
  opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; transition: opacity .3s, transform .35s var(--ease);
}
.m-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.m-top:active { transform: scale(.92); }

/* ═══ PIZZE DEL MESE: IL VIDEO DELLA PIZZA CHE NASCE ═══ */
.m-thumb { position: relative; }
.m-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.m-vid.is-on { opacity: 1; }

/* ═══ FONDO: RECENSIONE E INSTAGRAM ═══ */
.m-cards { width: 100%; max-width: var(--w); display: grid; gap: .8rem; margin: 0 auto 2rem; text-align: left; }
.m-card { display: grid; gap: .45rem; padding: 1.3rem 1.25rem; border-radius: var(--r); text-decoration: none; transition: transform .2s; }
.m-card:active { transform: scale(.98); }
.m-card strong { font: 800 1.55rem/1.02 var(--f-display); font-variation-settings: 'wdth' 80; letter-spacing: -.02em; }
.m-card-d { font-size: .92rem; line-height: 1.45; }
.m-card-review { background: var(--crema); color: var(--testo); box-shadow: inset 0 0 0 1px rgba(240, 165, 0, .45); }
.m-card-review .m-card-d { color: var(--testo-70); }
.m-stars { color: var(--oro); font-size: 1.15rem; letter-spacing: .12em; }
.m-card-btn { justify-self: start; margin-top: .4rem; padding: .75rem 1.1rem; border-radius: 999px; background: var(--rosso); color: #fff; font-weight: 600; font-size: .95rem; }
.m-card-ig { grid-template-columns: auto 1fr; align-items: center; gap: 1rem; color: #fff;
  background: linear-gradient(135deg, #cc2200 0%, #e05a10 45%, #f0a500 100%); }
.m-card-ig .m-card-txt { display: grid; gap: .3rem; }
.m-card-ig .m-card-d { color: rgba(255, 255, 255, .9); }
.m-ig { width: 54px; height: 54px; padding: 10px; border-radius: 16px; background: rgba(61, 21, 8, .22); }
.m-ig-handle { font: 500 .85rem/1 var(--f-mono); color: #fff; opacity: .95; }
@media (min-width: 720px) { .m-cards { grid-template-columns: 1fr 1fr; } }
.m-foot .m-card-review strong { color: var(--testo); }
.m-foot .m-card-ig strong { color: #fff; }
.m-foot .m-card strong { font: 800 1.55rem/1.02 var(--f-display); font-variation-settings: 'wdth' 80; }

/* ═══ SCHEDA DEL PIATTO (bottom sheet) ═══ */
.m-item { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s ease; }
.m-item:active { transform: scale(.985); }
.m-sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto; width: 100%; max-width: 600px; max-height: 94dvh;
  padding: 0 0 calc(1rem + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: var(--carta);
  box-shadow: 0 -24px 60px -10px rgba(20, 6, 2, .5); overflow: hidden auto; overscroll-behavior: contain;
  transform: translateY(105%); transition: transform .5s cubic-bezier(.2, .9, .2, 1); will-change: transform;
}
.m-sheet.is-in { transform: none; }
.m-sheet.is-drag { transition: none; }
.m-sheet[open]::backdrop { animation: shFade .35s ease both; }
.m-sheet.is-out::backdrop { animation: shFadeOut .3s ease both; }
@keyframes shFade { from { opacity: 0; } }
@keyframes shFadeOut { to { opacity: 0; } }
.sh-grab { display: grid; place-items: center; height: 26px; touch-action: none; cursor: grab; }
.sh-grab span { width: 46px; height: 5px; border-radius: 9px; background: rgba(46, 16, 5, .2); }
.sh-x {
  position: absolute; top: 34px; right: 26px; z-index: 3; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(253, 244, 227, .92); color: var(--testo); font: 600 1rem/1 var(--f-body);
  box-shadow: 0 6px 16px rgba(20, 6, 2, .3); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sh-media {
  position: relative; margin: 0 1rem; aspect-ratio: 1.18; border-radius: 22px; overflow: hidden;
  background: var(--brace); touch-action: none; user-select: none; -webkit-user-select: none;
}
.sh-img { width: 100%; height: 100%; object-fit: cover; scale: 1.06; -webkit-user-drag: none; pointer-events: none; }
.sh-tag, .sh-count {
  position: absolute; bottom: 12px; padding: .42rem .6rem; border-radius: 999px; background: rgba(46, 16, 5, .62);
  color: #fff; font: 500 .72rem/1 var(--f-mono); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sh-tag { left: 12px; }
.sh-count { right: 12px; }
.sh-body { padding: 1.05rem 1.25rem 0; }
.sh-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sh-name { font: 800 clamp(1.9rem, 8.5vw, 2.4rem)/.98 var(--f-display); font-variation-settings: 'wdth' 80; letter-spacing: -.03em; }
.sh-price { flex: none; font: 500 1.35rem/1 var(--f-mono); color: var(--rosso); }
.sh-vars:empty, .sh-badges:empty, .sh-ing:empty { display: none; }
.sh-vars { margin-top: .7rem; }
.sh-badges { margin-top: .65rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.sh-b { font: 500 .75rem/1 var(--f-mono); padding: .42rem .62rem; border-radius: 999px; background: rgba(46, 16, 5, .07); color: var(--testo-70); }
.sh-b-hot { background: rgba(204, 34, 0, .1); color: var(--rosso); }
.sh-b-new { background: var(--rosso); color: #fff; }
.sh-b-veg { background: rgba(70, 130, 40, .12); color: #3d7a1f; }
.sh-ing { margin-top: .8rem; font-size: 1.02rem; line-height: 1.5; color: var(--testo-70); }
.sh-pair {
  margin-top: 1.1rem; width: 100%; display: flex; align-items: center; gap: .85rem; padding: .8rem .9rem .8rem .8rem;
  border: 0; border-radius: 18px; text-align: left; color: var(--testo); cursor: pointer; font: inherit;
  background: linear-gradient(135deg, rgba(240, 165, 0, .2), rgba(240, 165, 0, .06)); box-shadow: inset 0 0 0 1px rgba(240, 165, 0, .45);
  transition: transform .15s;
}
.sh-pair:active { transform: scale(.98); }
.sh-pair[hidden] { display: none; }
.sh-pair img { flex: none; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; }
.sh-pair-txt { flex: 1; min-width: 0; display: grid; gap: .2rem; }
.sh-pair small { font: 500 .68rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: #a26a00; }
.sh-pair strong { font: 700 1.08rem/1.15 var(--f-display); font-variation-settings: 'wdth' 85; }
.sh-pair-txt > span { font-size: .85rem; line-height: 1.35; color: var(--testo-70); }
.sh-pair em { font: 500 .88rem/1 var(--f-mono); font-style: normal; color: var(--rosso); margin-top: .2rem; }
.sh-pair-go { flex: none; font-size: 1.6rem; line-height: 1; color: #a26a00; }
.sh-nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: 1.1rem 1rem 0; }
.sh-nb {
  flex: 0 1 auto; min-width: 0; overflow: hidden;   /* con un nome lungo si accorcia coi puntini invece di uscire dallo schermo */
  max-width: 42%; display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: .55rem .9rem;
  border: 0; border-radius: 999px; background: rgba(46, 16, 5, .06); color: var(--testo-70); font: 600 .86rem/1 var(--f-body); cursor: pointer;
}
.sh-nb:disabled { visibility: hidden; }
.sh-nb-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-dots { flex: none; }
.sh-dots { display: flex; gap: 5px; align-items: center; }
.sh-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(46, 16, 5, .18); transition: width .3s var(--ease), background-color .3s; }
.sh-dots i.on { width: 18px; border-radius: 9px; background: var(--rosso); }
@media (min-width: 640px) { .m-sheet { bottom: 2vh; border-radius: 28px; } .sh-media { aspect-ratio: auto; height: min(42vh, 420px); } }
@media (prefers-reduced-motion: reduce) { .m-sheet { transition: none; } }

/* riga dei filtri: frecce e sfumature come la barra delle categorie */
.m-filters .m-cats-arrow { top: .9rem; bottom: .2rem; }
.m-filters.can-prev .m-cats-prev, .m-filters.can-next .m-cats-next { opacity: 1; pointer-events: auto; }
.m-filters.can-next .m-cats-next svg { animation: nudgeR 1.6s var(--ease) 2 1.2s; }

/* anteprima sfocata: si vede finché la foto vera non è caricata, poi la foto compare in dissolvenza */
.m-thumb, .sh-media { background-size: cover; background-position: center; }
.m-thumb img { opacity: 0; transition: opacity .45s ease, transform .5s var(--ease); }
.m-thumb img.is-ld { opacity: 1; }
/* ═══ "CHIEDI AL BALOSS": la slot che sceglie la pizza ═══ */
.m-filter-baloss { border-style: solid; border-color: var(--oro); background: linear-gradient(135deg, #ffd166, var(--oro)); color: var(--brace); box-shadow: 0 6px 14px -8px rgba(160, 100, 0, .8); }
.rt {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem;
  background: rgba(30, 10, 3, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: rtFade .3s ease both;
}
.rt.is-out { animation: rtFadeOut .35s ease both; }
@keyframes rtFade { from { opacity: 0; } }
@keyframes rtFadeOut { to { opacity: 0; } }
.rt-panel { position: relative; width: min(340px, 88vw); display: grid; justify-items: center; animation: rtPop .55s cubic-bezier(.2, 1.3, .3, 1) both; }
@keyframes rtPop { from { opacity: 0; transform: translateY(30px) scale(.9); } }
/* il Baloss che sbuca da dietro la macchinetta */
.rt-baloss { position: relative; z-index: 1; width: auto; height: auto; max-width: 58%; max-height: 30vh; max-height: 30dvh; object-fit: contain; margin-bottom: -15%; filter: drop-shadow(0 12px 18px rgba(0, 0, 0, .35)); animation: rtPeek .6s cubic-bezier(.2, 1.3, .3, 1) .15s both; }
@keyframes rtPeek { from { transform: translateY(40%); opacity: 0; } }
.rt-bubble {
  position: absolute; z-index: 3; top: 4%; right: -4%; max-width: 46%; padding: .6rem .8rem; border-radius: 16px 16px 16px 4px;
  background: var(--carta); color: var(--testo); font: 800 1rem/1.1 var(--f-display); font-variation-settings: 'wdth' 85;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .5); animation: rtPop .45s cubic-bezier(.2, 1.4, .3, 1) .45s both;
}
.rt-bubble.is-win { animation: rtBump .45s cubic-bezier(.2, 1.6, .3, 1); background: var(--oro); color: var(--brace); }
@keyframes rtBump { 40% { transform: scale(1.15) rotate(-3deg); } }
/* la macchinetta */
.rt-machine {
  position: relative; z-index: 2; width: 100%; padding: 1.1rem 1rem 1.1rem; border-radius: 30px;
  background: radial-gradient(120% 90% at 50% 0%, #7a3010, var(--mattone-scuro) 55%, var(--brace));
  box-shadow: inset 0 0 0 3px var(--oro), inset 0 0 0 7px rgba(240, 165, 0, .18), 0 30px 60px -20px rgba(0, 0, 0, .8);
}
.rt-lights { position: absolute; inset: 4px; pointer-events: none; }
.rt-lights i { position: absolute; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #ffe3a3; box-shadow: 0 0 8px 2px rgba(255, 209, 102, .8); opacity: .35; }
.rt.is-spin .rt-lights i { animation: rtBlink .32s steps(2) infinite; }
.rt.is-spin .rt-lights i:nth-child(odd) { animation-delay: .16s; }
.rt.is-win .rt-lights i { opacity: 1; animation: rtWin .5s ease 3; }
@keyframes rtBlink { 50% { opacity: 1; } }
@keyframes rtWin { 50% { opacity: .3; } }
.rt-title { text-align: center; font: 500 .72rem/1 var(--f-mono); letter-spacing: .2em; color: var(--oro); margin: .2rem 0 .7rem; }
.rt-window {
  position: relative; height: 330px; height: clamp(230px, 38dvh, 330px); overflow: hidden; border-radius: 20px;
  background: radial-gradient(circle at 50% 50%, #fffaf1, var(--crema) 60%, #ead2a8);
  box-shadow: inset 0 6px 14px rgba(61, 21, 8, .35), inset 0 -6px 14px rgba(61, 21, 8, .35);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 82%, transparent 100%);
}
.rt-reel { position: absolute; left: 0; right: 0; top: 0; will-change: transform, filter; }
.rt-it { height: 150px; display: grid; place-items: center; }
.rt-it img { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; scale: 1.22; box-shadow: 0 10px 20px -8px rgba(46, 16, 5, .6); }
.rt-it.is-win img { animation: rtWinPz .7s cubic-bezier(.2, 1.5, .3, 1); }
@keyframes rtWinPz { 40% { transform: scale(1.18) rotate(8deg); } }
.rt-frame { position: absolute; left: 10px; right: 10px; top: 50%; height: 150px; margin-top: -75px; border-radius: 18px; box-shadow: inset 0 0 0 3px var(--oro); pointer-events: none; }
.rt-result { min-height: 3.6rem; margin-top: .8rem; text-align: center; color: var(--crema); }
.rt-result strong { display: block; font: 800 1.8rem/1 var(--f-display); font-variation-settings: 'wdth' 80; letter-spacing: -.02em; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .45s var(--ease); }
.rt-result span { display: block; margin-top: .35rem; font: 500 1rem/1 var(--f-mono); color: var(--oro); opacity: 0; transition: opacity .35s .1s; }
.rt.is-win .rt-result strong, .rt.is-win .rt-result span { opacity: 1; transform: none; }
/* la leva a lato */
.rt-lever { position: absolute; z-index: 1; right: -16px; top: 55%; width: 14px; height: 90px; border-radius: 7px; background: linear-gradient(90deg, #8a5a00, var(--oro), #8a5a00); transform-origin: 50% 100%; }
.rt-lever::before { content: ''; position: absolute; left: 50%; top: -14px; width: 28px; height: 28px; margin-left: -14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7a5c, var(--rosso) 60%, #7a1400); box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.rt.is-pull .rt-lever { animation: rtPull .55s cubic-bezier(.3, 0, .2, 1); }
@keyframes rtPull { 45% { transform: scaleY(-.6); } }
/* scintille quando esce la pizza */
.rt-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: #ffe3a3; box-shadow: 0 0 8px 2px rgba(255, 209, 102, .9); pointer-events: none; animation: rtSpark .9s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes rtSpark { to { transform: translate(var(--x), var(--y)) scale(.3); opacity: 0; } }
.rt-x { position: absolute; z-index: 4; top: 1rem; right: 1rem; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(253, 244, 227, .15); color: var(--crema); font-size: 1rem; }
/* (altezza di finestra e avatar si adattano allo schermo: vedi clamp() e dvh sopra) */
/* finché i piatti non sono disegnati (li crea menu.js) il menù tiene il suo spazio: il fondo pagina non "salta" giù */
.m-main:empty { min-height: 160vh; }