/* ============================================================================
   VICO DEL CARMINE — STILE
   Osteria pizzeria napoletana. Palette calda: carminio (il nome!), oro,
   basilico, panna. Stessa impostazione grafica di sempre; per cambiare i
   colori basta la sezione :root qui sotto.
   ========================================================================== */

:root{
  --bg:        #1a1210;   /* espresso scuro, caldo */
  --bg-2:      #241816;   /* pannelli */
  --bg-3:      #31201b;   /* rilievi */
  --bg-4:      #402a22;   /* bordo caldo */
  --ember:     #d13b2f;   /* carminio / pomodoro (accenti, hover) */
  --ember-2:   #e2694a;
  --flame:     #c8102e;   /* carminio acceso */
  --brick:     #7a1f2b;   /* vino / mattone */
  --gold:      #e6b24a;   /* oro caldo */
  --gold-soft: #edcf94;
  --basil:     #86b64a;   /* verde basilico */
  --cream:     #f7efe2;   /* testo chiaro */
  --muted:     #cbb49c;   /* testo secondario */
  --line:      rgba(var(--gold-rgb),.16);
  --shadow:    0 24px 60px rgba(0,0,0,.55);

  /* Gli stessi colori scritti "a numeri": servono dove il motore ha bisogno di
     una trasparenza (aloni, bordi, veli). Cambiando tema vanno cambiati anche
     questi, altrimenti negli aloni resta il colore di prima. */
  --gold-rgb:  230,178,74;
  --ember-rgb: 209,59,47;
  --ink-rgb:   11,8,6;      /* fondo delle pagine a schermo intero */

  /* Le poche cose che un tema CHIARO deve poter ribaltare. I valori qui sotto
     sono quelli di sempre: chi non li tocca non vede nessuna differenza. */
  --overlay-bg:     rgba(12,8,6,.975);      /* fondo del carosello sul computer */
  --btn-bg:         rgba(0,0,0,.4);         /* frecce e pulsanti tondi */
  --dot-bg:         rgba(247,239,226,.28);  /* pallini sotto il carosello */
  --gold-2:         #cf9a2e;                /* secondo tono del cartellino del prezzo */
  --page-text:      var(--cream);           /* testo sopra la foto, a tutto schermo */
  --page-dot:       rgba(247,239,226,.28);  /* pallini quando stanno sopra la foto */
  --page-line:      var(--line);            /* bordo dei pulsanti sopra la foto */
  --photo-veil:     rgba(20,16,13,.96);     /* sfumatura in fondo alla foto, sulla carta */
  --banda-vuota:     var(--bg-3);           /* banda di una categoria senza foto */
  --banda-vuota-ink: var(--cream);
  /* il riquadro Specialità: è l'elemento più appariscente della home, e su una
     tavolozza chiara il bruno-oro stona. Qui si ridisegna per intero. */
  --spec-bg:   linear-gradient(135deg, #3a2412 0%, #6b3f1a 42%, #b97a1f 100%);
  --spec-ink:  #fff7e6;
  --spec-sub:  rgba(255,247,230,.72);
  --page-text-soft: var(--muted);

  --font-display: "Playfair Display", Georgia, serif;
  --font-head:    "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Poppins", system-ui, sans-serif;
}

/* Arabo: font di sistema, più leggibili delle serif latine */
html[lang="ar"]{
  --font-display: "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-head:    system-ui, "Segoe UI", sans-serif;
  --font-body:    system-ui, "Segoe UI", sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ margin:0; padding:0; touch-action:pan-y; }   /* solo scorrimento verticale: niente zoom a due dita né doppio tocco (Android/Chrome) */

body{
  font-family:var(--font-body);
  color:var(--cream);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(var(--ember-rgb),.20), transparent 55%),
    radial-gradient(90% 60% at 50% 110%, rgba(122,31,43,.22), transparent 60%),
    var(--bg);
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* sottile trama a griglia */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:44px 44px;
  pointer-events:none;
  z-index:0;
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 40%, transparent 85%);
}

.wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 18px 64px; }

/* ============================================================================
   INTRO — animazione del logo all'apertura
   ========================================================================== */
.intro{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  background:#f7f2ea;   /* combacia con lo sfondo chiaro del video/logo */
  transition:opacity .6s ease, visibility .6s ease;
}
.intro.hide{ opacity:0; visibility:hidden; pointer-events:none; }
.intro-video{
  width:min(92vw, 520px); height:auto; max-height:82vh;
  object-fit:contain; border-radius:8px;
}
.intro-skip{
  position:absolute; left:50%; bottom:max(30px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.22em;
  font-size:.72rem; color:#5a4632;
  background:rgba(255,255,255,.7); border:1px solid rgba(90,70,50,.25);
  padding:11px 22px; border-radius:999px; cursor:pointer;
  backdrop-filter:blur(4px);
  animation:skipPulse 2.4s ease-in-out infinite 1.2s;
}
@keyframes skipPulse{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }

/* ============================================================================
   SELETTORE LINGUA
   ========================================================================== */
.lang-btn{
  position:fixed; top:max(12px, env(safe-area-inset-top)); right:14px; z-index:90;
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-head); letter-spacing:.06em; font-size:.9rem; font-weight:500;
  color:var(--cream);
  background:rgba(26,18,16,.72); border:1px solid var(--line); border-radius:999px;
  padding:8px 13px; cursor:pointer;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s ease, background .2s ease;
}
.lang-btn:hover{ border-color:var(--gold); }
.lang-globe{ font-size:1rem; }
.lang-caret{ font-size:.7rem; color:var(--gold); }
html[dir="rtl"] .lang-btn{ right:auto; left:14px; }

.lang-panel{
  position:fixed; top:max(58px, calc(env(safe-area-inset-top) + 46px)); right:14px; z-index:91;
  width:210px; max-height:70vh; overflow-y:auto;
  background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border:1px solid rgba(var(--gold-rgb),.4); border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px; opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.lang-panel.open{ opacity:1; visibility:visible; transform:none; }
html[dir="rtl"] .lang-panel{ right:auto; left:14px; }
.lang-panel-title{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.16em;
  font-size:.64rem; color:var(--gold); margin:2px 4px 10px; text-align:center;
}
.lang-list{ display:flex; flex-direction:column; gap:4px; }
.lang-opt{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--cream);
  font-family:var(--font-body); font-size:.98rem; text-align:left; width:100%;
  transition:background .15s ease, border-color .15s ease;
}
.lang-opt:hover{ background:rgba(255,255,255,.05); }
.lang-opt.active{ border-color:var(--gold); background:rgba(var(--gold-rgb),.12); }
.lang-opt .lang-code{ font-family:var(--font-head); font-size:.7rem; letter-spacing:.08em; color:var(--gold); min-width:24px; }
.lang-opt .lang-flag, .lang-btn .lang-globe{ font-size:1.15rem; line-height:1; }
html[dir="rtl"] .lang-opt{ text-align:right; }

/* -------------------------------------------------------------- INTESTAZIONE */
.hero{ text-align:center; padding:64px 8px 26px; }

.hero .kicker{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.36em;
  font-size:.72rem;
  font-weight:500;
  color:var(--gold);
  margin:0 0 18px;
  padding-left:.36em;
}

.hero-title{ margin:0; line-height:0; }
.hero-logo{
  width:min(64vw, 240px); height:auto; display:inline-block;
  border-radius:26px;
  background:#f7f2ea;
  padding:10px;
  box-shadow:0 20px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--gold-rgb),.25), 0 0 60px rgba(var(--ember-rgb),.15);
}

.hero .flame-rule{
  width:92px; height:3px; margin:22px auto 16px;
  border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--flame), var(--gold), var(--basil), transparent);
  box-shadow:0 0 18px rgba(var(--ember-rgb),.55);
}

.hero .sub{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:1rem;
  color:var(--gold-soft);
  margin:0;
  padding-left:.26em;
}

/* ----------------------------------------------------------- GRIGLIA CATEGORIE */
.menu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;   /* SEMPRE 2 COLONNE */
  gap:14px;
  margin-top:26px;
}

.cat-btn{
  position:relative;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  gap:16px;
  min-height:132px;
  padding:18px 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(160deg, rgba(226,105,74,.08), transparent 60%),
    linear-gradient(180deg, var(--bg-3), var(--bg-2));
  color:var(--cream);
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  overflow:hidden;
  transition:transform .18s ease, border-color .25s ease, box-shadow .25s ease;
  box-shadow:0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  -webkit-appearance:none;
  animation:riseIn .5s backwards;
}
.cat-btn::after{
  content:""; position:absolute; left:0; right:0; bottom:-40%; height:80%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(var(--ember-rgb),.30), transparent 70%);
  opacity:0; transition:opacity .3s ease; pointer-events:none;
}
.cat-btn:hover, .cat-btn:focus-visible{
  border-color:rgba(var(--gold-rgb),.5);
  box-shadow:0 16px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(var(--gold-rgb),.25), 0 0 30px rgba(var(--ember-rgb),.25);
  outline:none;
}
.cat-btn:hover::after, .cat-btn:focus-visible::after{ opacity:1; }
.cat-btn:active{ transform:scale(.97); }

.cat-btn .ico{
  font-size:2rem; line-height:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));
}
.cat-btn .label{
  font-family:var(--font-head);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:600;
  font-size:1.28rem;
  line-height:1.05;
}
.cat-btn .count{
  display:block; margin-top:6px;
  font-family:var(--font-body); font-weight:400;
  text-transform:none; letter-spacing:0;
  font-size:.72rem; color:var(--muted);
}
.cat-btn .arrow{
  position:absolute; top:16px; right:16px;
  color:var(--gold); opacity:.5; font-size:1.1rem;
  transition:transform .25s ease, opacity .25s ease;
}
.cat-btn:hover .arrow{ opacity:1; transform:translateX(3px); }
html[dir="rtl"] .cat-btn{ text-align:right; align-items:flex-end; }
html[dir="rtl"] .cat-btn .arrow{ right:auto; left:16px; transform:scaleX(-1); }

@keyframes riseIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }

/* --------------------------------------------------------------------- PIÈ DI PAGINA */
.foot{
  margin-top:44px; padding-top:26px;
  border-top:1px solid var(--line);
  text-align:center; color:var(--muted); font-size:.86rem; line-height:1.8;
}
.foot .name{ font-family:var(--font-display); color:var(--gold-soft); font-size:1.2rem; display:block; margin-bottom:6px; }
.foot a{ color:var(--gold); text-decoration:none; }
.foot-note{
  margin-top:12px; font-size:.76rem; color:var(--muted); line-height:1.7;
  max-width:520px; margin-left:auto; margin-right:auto;
}
.foot-note .euro{ color:var(--gold-soft); }
.foot-ver{ margin-top:14px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.16em; font-size:.6rem; color:rgba(203,180,156,.42); }

/* ============================================================================
   CAROSELLO — CARTE DA POKER
   ========================================================================== */
.overlay{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(var(--ember-rgb),.18), transparent 60%),
    var(--overlay-bg);
  opacity:0; visibility:hidden;
  transition:opacity .3s ease, visibility .3s ease;
}
.overlay.open{ opacity:1; visibility:visible; }

.ov-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 76px 8px 20px;
  gap:12px;
}
.ov-title{
  font-family:var(--font-display); font-weight:800;
  font-size:1.6rem; color:var(--cream); margin:0;
  display:flex; align-items:center; gap:10px; line-height:1.1;
}
.ov-title .ico{ font-size:1.4rem; flex:0 0 auto; }
.ov-count{
  font-family:var(--font-head); letter-spacing:.15em;
  color:var(--gold); font-size:.95rem; min-width:54px; text-align:right;
}
.ov-close{
  position:absolute; top:14px; right:16px; z-index:10;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  color:var(--cream); font-size:1.4rem; line-height:1; cursor:pointer;
  display:grid; place-items:center;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.ov-close:hover{ background:var(--brick); border-color:var(--brick); transform:rotate(90deg); }
html[dir="rtl"] .ov-top{ padding:18px 20px 8px 76px; }
html[dir="rtl"] .ov-close{ right:auto; left:16px; }

/* zona carte */
.deck{
  position:relative; flex:1;
  perspective:1600px;
  display:flex; align-items:center; justify-content:center;
  touch-action:pan-y;
  margin-top:6px;
}

.card{
  position:absolute; top:50%; left:50%;
  width:min(90vw, 400px);
  height:min(74vh, 600px);
  border-radius:20px;
  background:linear-gradient(180deg, var(--bg-3), var(--bg-2));
  border:1px solid rgba(var(--gold-rgb),.28);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform, opacity;
  transition:transform .58s cubic-bezier(.2,.72,.2,1), opacity .45s ease;
  transform-origin:center center;
  user-select:none;
}
.card .photo{
  position:relative;
  height:63%;
  isolation:isolate;
  background:
    linear-gradient(135deg, rgba(var(--ember-rgb),.20), rgba(122,31,43,.30)),
    var(--bg-4);
  overflow:hidden;
}
.card.no-photo .photo{ height:34%; }
.card .photo img{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0; transition:opacity .5s ease;
}
.card .photo img.loaded{ opacity:1; }
.card .photo .fallback{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:5.4rem;
  background:
    radial-gradient(80% 80% at 50% 34%, rgba(226,105,74,.28), transparent 70%),
    linear-gradient(160deg, var(--bg-4), var(--bg-2));
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.card .photo .fallback::before{
  content:""; position:absolute; top:50%; left:50%;
  width:150px; height:150px; margin:-75px 0 0 -75px; border-radius:50%;
  border:1px solid rgba(var(--gold-rgb),.38);
  background:radial-gradient(circle at 50% 42%, rgba(var(--gold-rgb),.18), transparent 70%);
  box-shadow:inset 0 0 36px rgba(var(--ember-rgb),.16), 0 0 24px rgba(0,0,0,.25);
}
.card .photo .fallback::after{
  content:"✦"; position:absolute; top:calc(50% - 92px); left:50%; transform:translateX(-50%);
  font-size:.9rem; color:rgba(var(--gold-rgb),.5);
}
.card.no-photo .photo .fallback{ font-size:3.4rem; }
.card.no-photo .photo .fallback::before{ width:96px; height:96px; margin:-48px 0 0 -48px; }
.card.no-photo .photo .fallback::after{ top:calc(50% - 62px); }
.card .photo::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:46%; z-index:2;
  background:linear-gradient(transparent, var(--photo-veil));
}
.card .price{
  position:absolute; top:14px; right:14px; z-index:3;
  font-family:var(--font-head); font-weight:600; letter-spacing:.02em;
  font-size:1.05rem; color:#241206;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  padding:7px 13px; border-radius:999px;
  box-shadow:0 8px 18px rgba(0,0,0,.45);
}
html[dir="rtl"] .card .price{ right:auto; left:14px; }
.card .body{
  position:relative; height:37%;
  padding:16px 18px 18px;
  display:flex; flex-direction:column; justify-content:center;
  gap:8px;
}
.card.no-photo .body{ height:66%; justify-content:center; padding-top:0; text-align:center; }
.card.no-photo .body .kick{ text-align:center; }
.card.no-photo .seal{ left:50%; right:auto; transform:translateX(-50%); }
.card .body .kick{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.18em;
  font-size:.64rem; color:var(--gold); margin:0;
}
.card .body h3{
  font-family:var(--font-display); font-weight:800;
  font-size:1.45rem; line-height:1.08; margin:0; color:var(--cream);
}
.card .body p{
  margin:0; color:var(--muted); font-size:.95rem; line-height:1.4;
}
.card .seal{
  position:absolute; bottom:14px; right:16px;
  font-family:var(--font-display); font-size:1.1rem; color:var(--brick); opacity:.55;
}
html[dir="rtl"] .card .body{ text-align:right; }
html[dir="rtl"] .card .seal{ right:auto; left:16px; }

/* --- carte SPECIALITÀ: oro scintillante --- */
.card.special{
  background:linear-gradient(180deg, #7a5216 0%, #4d3411 62%, #35240e 100%);
  border-color:rgba(240,190,80,.95);
  box-shadow:var(--shadow), 0 0 0 1px rgba(240,190,80,.7), 0 0 40px rgba(var(--gold-rgb),.42);
}
.card.special .photo{ background:linear-gradient(135deg, rgba(240,196,96,.42), rgba(150,96,20,.5)), var(--bg-4); }
.card.special .photo::after{ background:linear-gradient(transparent, rgba(61,42,17,.96)); }
.card.special .photo .fallback{ background:radial-gradient(80% 80% at 50% 34%, rgba(240,196,96,.34), transparent 70%), linear-gradient(160deg, #6a4a18, #3a2812); }
.card.special .body h3{ color:#fff6dc; }
.card.special .body p{ color:rgba(255,244,214,.82); }
.card.special .seal{ color:#ffe9a8; opacity:.7; }
.card .body .spec-kick{ margin:0 0 3px; color:var(--gold); font-family:var(--font-head); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; text-shadow:0 0 10px rgba(var(--gold-rgb),.5); }
.card.special::before{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none; border-radius:inherit;
  background:linear-gradient(105deg, transparent 42%, rgba(255,240,200,.30) 50%, transparent 58%);
  transform:translateX(-130%);
  animation:cardShine 3.6s ease-in-out infinite 1s;
}
@keyframes cardShine{ 0%{ transform:translateX(-130%); } 55%,100%{ transform:translateX(130%); } }
@media (prefers-reduced-motion:reduce){ .card.special::before{ animation:none; opacity:0; } }

/* comandi */
.nav-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:55;   /* sopra la carta frontale (z50), sempre toccabili anche con carte grandi */
  width:52px; height:52px; border-radius:50%;
  border:1px solid var(--line);
  background:var(--btn-bg);
  color:var(--cream); font-size:1.6rem; cursor:pointer;
  display:grid; place-items:center;
  transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
.nav-btn:hover{ background:var(--ember); border-color:var(--ember); color:#241206; }
.nav-btn:active{ transform:translateY(-50%) scale(.9); }
.nav-prev{ left:14px; }
.nav-next{ right:14px; }

.ov-bottom{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:6px 20px 26px;
}
.dots{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--dot-bg);
  border:none; padding:0; cursor:pointer;
  transition:transform .2s ease, background .2s ease, width .2s ease;
}
.dot.active{ background:var(--gold); width:22px; border-radius:5px; }
.hint{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.25em;
  font-size:.7rem; color:var(--muted);
  transition:opacity .4s ease;
}
.deck.touched ~ .ov-bottom .hint{ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .card{ transition:opacity .3s ease; }
  .cat-btn{ animation:none; }
}

@media (min-width:560px){
  .card{ width:400px; height:600px; }
  .nav-prev{ left:calc(50% - 280px); }
  .nav-next{ right:calc(50% - 280px); }
}

/* ============================================================================
   PAGINE A SCHERMO INTERO (mobile) — si sfogliano come un giornale
   Su telefono/tablet il carosello diventa una pagina per piatto, a tutto
   schermo: si cambia col dito (scorri o tocca) e la pagina gira sul bordo
   come quella di un libro. Su computer resta il mazzo di carte qui sopra.
   ========================================================================== */
.overlay.pages{ background:rgb(var(--ink-rgb)); }
.overlay.pages .ov-top{
  position:absolute; top:0; left:0; right:0; z-index:8; pointer-events:none;
  padding:max(16px, env(safe-area-inset-top)) 118px 22px 18px;
  background:linear-gradient(rgba(var(--ink-rgb),.85), rgba(var(--ink-rgb),.35) 70%, transparent);
}
.overlay.pages .ov-title{ font-size:1.25rem; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.overlay.pages .ov-count{ text-shadow:0 2px 10px rgba(0,0,0,.7); }
html[dir="rtl"] .overlay.pages .ov-top{ padding:max(16px, env(safe-area-inset-top)) 18px 22px 118px; }
.overlay.pages .ov-close{ top:max(12px, env(safe-area-inset-top)); z-index:12; }
.ov-mute{ display:none; }
.overlay.pages .ov-mute{
  display:grid; place-items:center; position:absolute; z-index:12;
  top:max(12px, env(safe-area-inset-top)); right:68px;
  width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:rgba(0,0,0,.35);
  color:var(--cream); font-size:1.15rem; line-height:1; cursor:pointer;
}
html[dir="rtl"] .overlay.pages .ov-mute{ right:auto; left:68px; }
.overlay.pages .deck{ margin:0; perspective:1500px; perspective-origin:50% 50%; touch-action:none; }
.overlay.pages .card{
  top:0; left:0; width:100%; height:100%; border-radius:0;
  border:none; box-shadow:none; transform:none; transition:none;
}

/* --- la pagina che gira: una sola, intera, sul dorso ---
   Nella v1 erano dieci strisce copiate dalla pagina: troppo peso per un telefono.
   Le due ombre hanno un disegno fisso; il codice cambia solo opacità e
   larghezza, cioè il lavoro che la scheda grafica fa senza fatica. */
.overlay.pages .card.turning{
  transform-origin:left center; backface-visibility:hidden; will-change:transform;
}
/* sulla pagina che si alza: più scura verso il bordo libero, che si allontana dalla luce */
.fold-velo{
  position:absolute; inset:0; z-index:20; pointer-events:none; opacity:0; will-change:opacity;
  background:linear-gradient(90deg, rgba(255,243,222,.07) 0%, rgba(8,5,3,.30) 40%, rgba(8,5,3,.82) 100%);
}
/* sulla pagina sotto: l'ombra che le proietta sopra quella che si sta alzando */
.fold-shade{
  position:absolute; inset:0; z-index:1; pointer-events:none; display:none; opacity:0;
  transform-origin:left center; will-change:transform, opacity;
  background:linear-gradient(90deg, rgba(8,5,3,.0) 0%, rgba(8,5,3,.62) 72%, rgba(8,5,3,0) 100%);
}
.fold-shade.on{ display:block; }
.overlay.pages .card .photo, .overlay.pages .card.no-photo .photo{ position:absolute; inset:0; height:auto; }
.overlay.pages .card .photo img{ transition:opacity .35s ease; }
.overlay.pages .card .photo::after{ height:62%; background:linear-gradient(transparent, rgba(var(--ink-rgb),.5) 38%, rgba(var(--ink-rgb),.97)); }
.overlay.pages .card .photo .fallback, .overlay.pages .card.no-photo .photo .fallback{ font-size:8.5rem; }
.overlay.pages .card .photo .fallback::before, .overlay.pages .card.no-photo .photo .fallback::before{ width:250px; height:250px; margin:-125px 0 0 -125px; }
.overlay.pages .card .photo .fallback::after, .overlay.pages .card.no-photo .photo .fallback::after{ top:calc(50% - 152px); }
.overlay.pages .card .price{ display:none; }        /* a tutto schermo il prezzo sta accanto al nome */
.overlay.pages .card .body, .overlay.pages .card.no-photo .body{
  position:absolute; left:0; right:0; bottom:0; height:auto;
  padding:0 22px calc(98px + env(safe-area-inset-bottom));
  gap:10px; justify-content:flex-end; text-align:start;
}
.overlay.pages .card.no-photo .body .kick{ text-align:start; }
.overlay.pages .card .body .kick{ font-size:.72rem; letter-spacing:.2em; }
.overlay.pages .ov-title, .overlay.pages .ov-count{ color:var(--page-text); }
.overlay.pages .hint{ color:var(--page-text-soft); }
/* i pulsanti tondi stanno sopra la foto: seguono il colore della pagina, non
   quello della home (altrimenti in un tema chiaro diventano invisibili) */
.overlay.pages .ov-close,
.overlay.pages .ov-mute,
.overlay.pages .nav-btn{ color:var(--page-text); border-color:var(--page-line); }
.overlay.pages .dot{ background:var(--page-dot); }
.overlay.pages .card .body .line{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.overlay.pages .card .body h3{ font-size:2rem; line-height:1.08; color:var(--page-text); text-shadow:0 2px 12px rgba(0,0,0,.5); }
.card .price-inline{ display:none; }
.overlay.pages .card .price-inline{
  display:inline-block; flex:0 0 auto;
  font-family:var(--font-head); font-weight:600; font-size:1.2rem; color:#241206;
  background:linear-gradient(180deg, var(--gold), var(--gold-2));
  padding:6px 14px; border-radius:999px; box-shadow:0 8px 18px rgba(0,0,0,.45);
}
.overlay.pages .card .body p{
  font-size:1.05rem; line-height:1.5; color:var(--page-text-soft);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.overlay.pages .card .seal{ display:none; }
.overlay.pages .card.special{ background:linear-gradient(180deg, #6a4a18, #35240e); }
.overlay.pages .card.special .photo::after{ background:linear-gradient(transparent, rgba(61,42,17,.55) 38%, rgba(45,30,12,.97)); }
.overlay.pages .card.special::before{ display:none; }   /* niente scintillio a tutto schermo */
.overlay.pages .nav-btn{
  top:auto; bottom:calc(30px + env(safe-area-inset-bottom)); transform:none;
  width:44px; height:44px; font-size:1.35rem; background:rgba(0,0,0,.45);
}
.overlay.pages .nav-btn:active{ transform:scale(.9); }
.overlay.pages .nav-prev{ left:12px; }
.overlay.pages .nav-next{ right:12px; }
.overlay.pages .ov-bottom{
  position:absolute; left:0; right:0; bottom:0; z-index:8; pointer-events:none;
  padding:6px 68px calc(20px + env(safe-area-inset-bottom)); gap:8px;
}
.overlay.pages .dots{ pointer-events:auto; }
.overlay.pages .hint{ font-size:.62rem; color:rgba(247,239,226,.6); }
@media (prefers-reduced-motion:reduce){ .fold-shade, .fold-velo{ display:none !important; } }

/* ============================================================================
   RIQUADRO SPECIALE: SPECIALITÀ
   ========================================================================== */
.feature{
  grid-column:1 / -1;
  display:flex; align-items:center; gap:16px;
  min-height:94px; padding:16px 18px;
  border-radius:18px; cursor:pointer; position:relative; overflow:hidden;
  text-align:left; font-family:inherit; color:var(--cream);
  border:1px solid var(--line);
  -webkit-appearance:none;
  animation:riseIn .5s backwards;
}
.feature .feat-ico{ font-size:2.2rem; line-height:1; flex:0 0 auto; filter:drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.feature .feat-txt{ display:flex; flex-direction:column; gap:5px; flex:1; min-width:0; }
.feature .feat-title{ font-family:var(--font-display); font-weight:800; font-size:1.55rem; line-height:1; }
.feature .feat-sub{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; color:var(--muted); }
.feature.specialita .feat-sub{ color:var(--spec-sub); }
.feature .feat-side{ flex:0 0 auto; font-size:1.4rem; color:var(--gold); display:flex; align-items:center; }
html[dir="rtl"] .feature{ text-align:right; }

/* --- Specialità: oro, luccichio, bagliore pulsante, scintille --- */
.feature.specialita{
  background:var(--spec-bg);
  border:1px solid rgba(var(--gold-rgb),.7);
  color:var(--spec-ink);
  animation:riseIn .5s backwards, glowPulse 2.6s ease-in-out infinite .5s;
}
.feature.specialita .feat-title{ color:#fff3cf; text-shadow:0 0 18px rgba(var(--gold-rgb),.5); }
.feature.specialita .feat-sub{ color:rgba(255,243,207,.85); }
.feature.specialita .feat-side{ color:#ffe9a8; }
.feature.specialita .feat-ico{ animation:floatY 3.2s ease-in-out infinite; }

.shine{
  position:absolute; top:0; left:0; width:55%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:translateX(-170%) skewX(-18deg);
  animation:shineSweep 3.6s ease-in-out infinite;
  pointer-events:none;
}
.feature.specialita .spark{
  position:absolute; color:#fff3cf; opacity:.2; pointer-events:none;
  text-shadow:0 0 8px rgba(255,220,130,.9);
}
.feature.specialita .spark.s1{ top:12px; right:22%; font-size:.9rem; animation:twinkle 2.2s ease-in-out infinite; }
.feature.specialita .spark.s2{ bottom:14px; right:13%; font-size:.7rem; animation:twinkle 2.6s ease-in-out infinite .5s; }
.feature.specialita .spark.s3{ top:16px; right:8%; font-size:1.15rem; animation:twinkle 3s ease-in-out infinite 1s; }

.feature:active{ transform:scale(.985); }

@keyframes shineSweep{ 0%{ transform:translateX(-170%) skewX(-18deg);} 55%,100%{ transform:translateX(330%) skewX(-18deg);} }
@keyframes glowPulse{
  0%,100%{ box-shadow:0 10px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(var(--gold-rgb),.4), 0 0 18px rgba(var(--gold-rgb),.25); }
  50%{     box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(var(--gold-rgb),.95), 0 0 42px rgba(var(--gold-rgb),.6); }
}
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@keyframes twinkle{ 0%,100%{ opacity:.15; transform:scale(.7); } 50%{ opacity:1; transform:scale(1.15); } }

/* ============================================================================
   SPECIALITÀ: sotto-menu
   ========================================================================== */
.overlay.spec{
  z-index:55;
  background:radial-gradient(90% 60% at 50% 0%, rgba(var(--gold-rgb),.18), transparent 60%), rgba(9,6,4,.92);
}
.spec-inner{ flex:1; width:100%; overflow-y:auto; display:flex; flex-direction:column; justify-content:center; padding:64px 22px 44px; }
.spec-head{ text-align:center; margin:0 auto 26px; }
.spec-kicker{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; color:var(--gold); }
.spec-head h2{ font-family:var(--font-display); font-weight:900; font-size:2.6rem; margin:.14em 0 .12em; color:#fff3cf; text-shadow:0 0 32px rgba(var(--gold-rgb),.55); }
.spec-head p{ margin:0; color:var(--muted); font-style:italic; }
.spec-cards{ display:grid; grid-template-columns:1fr; gap:16px; width:100%; max-width:460px; margin:0 auto; }
.spec-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:24px 18px; border-radius:20px; cursor:pointer;
  font-family:inherit; color:#fff7e6;
  background:linear-gradient(135deg, #2a1a0c, #5a3512 55%, #a56c1c);
  border:1px solid rgba(var(--gold-rgb),.6);
  box-shadow:0 14px 30px rgba(0,0,0,.5);
  animation:floatY 4s ease-in-out infinite, glowPulse 3s ease-in-out infinite;
}
.spec-card:hover{ border-color:#ffd873; }
.spec-card:active{ animation-play-state:paused; transform:scale(.975); }
.spec-card .spec-ico{ font-size:2.6rem; filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.spec-card .spec-name{ font-family:var(--font-display); font-weight:800; font-size:1.6rem; text-align:center; line-height:1.1; }
.spec-card .spec-count{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.14em; font-size:.7rem; color:rgba(255,243,207,.72); }
.spec-card .spec-go{ margin-top:5px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.12em; font-size:.8rem; color:#ffe9a8; }

/* ============================================================================
   AVVISO (toast)
   ========================================================================== */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  z-index:120; max-width:88%;
  background:rgba(26,18,16,.97); color:var(--cream);
  border:1px solid var(--line); border-radius:12px;
  padding:12px 16px; font-size:.9rem; text-align:center; line-height:1.45;
  box-shadow:0 12px 30px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transition:opacity .3s ease, transform .3s ease, visibility .3s ease;
}
.toast.show{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion:reduce){
  .feature.specialita, .feature.specialita .feat-ico, .spec-card, .shine, .spark, .intro-skip{ animation:none !important; }
}

/* ============================================================================
   AREA STAFF / EDITOR + ICONA NASCOSTA
   ========================================================================== */
[hidden]{ display:none !important; }

.btn{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em; font-size:.9rem;
  border:1px solid var(--line); background:var(--bg-3); color:var(--cream);
  padding:12px 18px; border-radius:12px; cursor:pointer; transition:border-color .2s, filter .2s, background .2s;
  -webkit-appearance:none;
}
.btn:hover{ border-color:var(--gold); }
.btn-primary{ background:linear-gradient(180deg, var(--gold), #cf9a2e); color:#241206; border:none; font-weight:600; }
.btn-primary:hover{ filter:brightness(1.06); }
.btn-big{ display:block; width:100%; padding:16px; font-size:1rem; margin-top:16px; }

.field{
  width:100%; font-family:var(--font-body); font-size:1rem; color:var(--cream);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:10px; padding:11px 13px;
}
.field:focus{ outline:none; border-color:var(--gold); }
.field::placeholder{ color:var(--muted); opacity:.7; }

.admin-head{ text-align:center; margin-bottom:22px; }
.admin-head .kick{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.25em; font-size:.7rem; color:var(--gold); margin:0; }
.admin-head h1{ font-family:var(--font-display); font-weight:800; font-size:2.3rem; margin:.1em 0 .5em; color:var(--cream); }

.hint-center{ text-align:center; color:var(--muted); font-size:.82rem; margin-top:12px; }

/* sheet riutilizzato dall'editor */
.overlay.sheet{
  z-index:55;
  background:radial-gradient(90% 60% at 50% 0%, rgba(var(--gold-rgb),.14), transparent 60%), rgba(9,6,4,.94);
}
.sheet-inner{ flex:1; width:100%; overflow-y:auto; padding:56px 14px 130px; }

/* ---- ICONA NASCOSTA (in basso a destra) ---- */
#notif-hotspot{
  position:fixed; right:0; bottom:0; width:66px; height:66px; z-index:70;
  -webkit-tap-highlight-color:transparent; touch-action:none;
}
#notif-ring{
  position:absolute; right:9px; bottom:9px; width:26px; height:26px; border-radius:50%;
  background:conic-gradient(var(--gold) 0deg, rgba(var(--gold-rgb),.15) 0deg);
  opacity:0; transition:opacity .15s ease; pointer-events:none;
  -webkit-mask:radial-gradient(circle 8px at center, transparent 98%, #000 100%);
          mask:radial-gradient(circle 8px at center, transparent 98%, #000 100%);
}
#notif-hotspot.pressing #notif-ring{ opacity:1; }

/* ---- MODALE PASSWORD ---- */
.approve-modal{
  position:fixed; inset:0; z-index:80; display:none; padding:9vh 22px 40px; overflow-y:auto;
  background:rgba(9,6,4,.9); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.approve-modal.open{ display:grid; align-items:start; justify-items:center; }
.approve-box{
  width:100%; max-width:440px; max-height:88vh; overflow-y:auto;
  background:linear-gradient(180deg, var(--bg-3), var(--bg-2)); border:1px solid rgba(var(--gold-rgb),.4);
  border-radius:20px; padding:24px 22px; box-shadow:var(--shadow);
}
.approve-box h2{ font-family:var(--font-display); font-weight:800; color:var(--cream); margin:0 0 4px; font-size:1.6rem; }
.approve-box .sub{ color:var(--muted); font-size:.85rem; margin:0 0 18px; }
.approve-box .field{ margin-bottom:12px; text-align:center; }
.approve-actions{ display:flex; gap:10px; margin-top:8px; }
.approve-actions .btn{ flex:1; }
.btn-no{ background:transparent; border-color:var(--brick); color:#ff9a86; }
.approve-err{ color:#ff7a68; font-size:.85rem; min-height:1.1em; margin:4px 0 0; text-align:center; }

/* ---- EDITOR PREZZI & FOTO ---- */
.me-kick{ text-align:center; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.22em; font-size:.72rem; color:var(--gold); margin:0 0 10px; }
.me-frozen{ text-align:center; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:#bfe3f7; background:rgba(140,195,235,.12); border:1px solid rgba(140,195,235,.35); border-radius:10px; padding:7px 12px; margin:0 0 12px; }
.me-frozen b{ color:#e8f6ff; }
.me-nav{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin:0 0 14px;
  background:rgba(26,18,16,.97); border:1px solid var(--line); border-radius:14px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.me-arrow{
  width:46px; height:46px; flex:0 0 auto; border-radius:50%;
  border:1px solid var(--line); background:var(--bg-3); color:var(--cream);
  font-size:1.6rem; line-height:1; cursor:pointer; display:grid; place-items:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.me-arrow:hover{ background:var(--ember); color:#241206; border-color:var(--ember); }
.me-arrow:active{ transform:scale(.92); }
.me-navlabel{ flex:1; min-width:0; text-align:center; }
.me-navlabel span{ display:block; font-family:var(--font-display); font-weight:800; font-size:1.35rem; color:var(--cream); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.me-navlabel small{ font-family:var(--font-head); letter-spacing:.14em; color:var(--gold); font-size:.72rem; }
.me-page{ animation:mePageIn .32s ease; }
@keyframes mePageIn{ from{ opacity:0; transform:translateX(24px); } to{ opacity:1; transform:none; } }

.cat-edit{ margin:0 0 16px; }
.dish-list{ display:flex; flex-direction:column; gap:12px; }
.dish-edit{ background:var(--bg-3); border:1px solid var(--line); border-radius:12px; padding:12px; display:flex; flex-direction:column; gap:9px; }
.de-top{ display:flex; align-items:center; gap:8px; }
.dish-edit .de-name{ flex:1; font-family:var(--font-display); font-weight:700; font-size:1.1rem; color:var(--cream); margin:0; }
.de-name-input{ flex:1; font-family:var(--font-display); font-weight:700; font-size:1.02rem; }
.de-desc{ font-size:.9rem; }
.de-del{ flex:0 0 auto; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:1.05rem; line-height:1; }
.de-del:hover{ background:var(--brick); color:#fff; border-color:var(--brick); }
.btn-add{ margin-top:10px; width:100%; background:transparent; border:1px dashed var(--line); color:var(--gold-soft); font-size:.85rem; }
.btn-add:hover{ border-color:var(--gold); color:var(--gold); }
.de-line{ display:flex; gap:8px; align-items:center; }
.de-line .de-lab{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:var(--muted); flex:0 0 auto; }
.de-prezzo{ width:90px; text-align:center; flex:0 0 auto; }
.de-foto{ flex:1; height:52px; border-radius:10px; border:1px dashed var(--line); background:transparent; color:var(--gold-soft); cursor:pointer; font-size:1.2rem; overflow:hidden; padding:0; display:flex; align-items:center; justify-content:center; gap:8px; }
.de-foto img{ width:52px; height:100%; object-fit:cover; }
.de-foto .de-foto-txt{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em; font-size:.7rem; }
.de-foto-del{ flex:0 0 auto; width:44px; height:52px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:1rem; }
.de-foto-del:hover{ background:var(--brick); color:#fff; border-color:var(--brick); }
.de-special{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; color:var(--gold-soft); cursor:pointer; padding:2px 0; }
.de-special input{ width:18px; height:18px; accent-color:var(--gold); cursor:pointer; flex:0 0 auto; }
.de-special small{ font-family:var(--font-body); text-transform:none; letter-spacing:0; color:var(--muted); font-size:.66rem; }
.de-congela{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.06em; font-size:.78rem; color:#bfe3f7; cursor:pointer; padding:2px 0; }
.de-congela input{ width:18px; height:18px; accent-color:#7fc0e8; cursor:pointer; flex:0 0 auto; }
.de-congela small{ font-family:var(--font-body); text-transform:none; letter-spacing:0; color:var(--muted); font-size:.66rem; }
/* riga SPECIALITÀ: alone dorato + etichetta (si riconosce a colpo d'occhio) */
.dish-edit.special{ border-color:rgba(230,190,90,.6); background:linear-gradient(180deg, rgba(230,190,90,.13), rgba(190,150,60,.04)), var(--bg-3); }
.dish-edit.special::before{ content:"⭐ SPECIALITÀ"; order:-1; align-self:flex-start; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:#3a2708; background:linear-gradient(180deg,#f6dd9b,#e0b95c); border-radius:8px; padding:3px 10px; box-shadow:0 0 14px rgba(230,190,90,.4); }

/* riga CONGELATA (nascosta ai clienti): alone gelato + etichetta — ha la precedenza sull'oro */
.dish-edit.frozen{ border-color:rgba(140,195,235,.6); background:linear-gradient(180deg, rgba(150,200,235,.16), rgba(120,170,210,.05)), var(--bg-3); }
.dish-edit.frozen::before{ content:"❄️ NASCOSTO AI CLIENTI"; order:-1; align-self:flex-start; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:#0e2836; background:linear-gradient(180deg,#cfecfb,#a9d6f2); border-radius:8px; padding:3px 10px; box-shadow:0 0 14px rgba(140,195,235,.4); }
.dish-edit.frozen .de-name-input, .dish-edit.frozen .de-desc, .dish-edit.frozen .de-prezzo{ opacity:.6; }
/* speciale + congelato insieme: una sola targhetta che dice entrambe le cose */
.dish-edit.special.frozen::before{ content:"❄️ NASCOSTO · ⭐ SPECIALITÀ"; }

.field-search{ margin:0 0 14px; }

/* ============================================================================
   CARROZZERIE — quello che cambia da uno stile all'altro
   ----------------------------------------------------------------------------
   Il motore mette sempre in pagina la STESSA struttura, e scrive su <html> tre
   etichette lette dal TEMA: data-home, data-sfoglio, data-foto.
   Da qui in giù si decide soltanto come si vede. Un modo nuovo di presentare
   la home o di sfogliare si aggiunge qui, non nel motore.
   ========================================================================== */

/* pezzi che non tutte le home usano: spenti finché non li accende uno stile */
.cat-btn .num,
.cat-btn .cat-photo{ display:none; }

/* nome del locale scritto (stili senza logo) */
.hero-title.hero-text{ line-height:1.04; }
.hero-name{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(2.1rem, 9.5vw, 3.2rem);
  font-weight:700;
  color:var(--cream);
  text-shadow:0 12px 40px rgba(0,0,0,.5);
}

/* --------------------------------------------------- HOME "rettangoli"
   Una sola colonna, rettangoli bassi e larghi: si legge come l'indice di un
   menu di carta. (Osteria) */
html[data-home="rettangoli"] .menu-grid{ grid-template-columns:1fr; gap:10px; margin-top:22px; }
html[data-home="rettangoli"] .cat-btn{
  flex-direction:row; align-items:center; justify-content:flex-start;
  gap:16px; min-height:0; padding:15px 50px 15px 18px; border-radius:12px;
}
html[data-home="rettangoli"] .cat-btn .ico{ font-size:1.65rem; flex:0 0 auto; }
html[data-home="rettangoli"] .cat-btn .label{ font-size:1.12rem; }
html[data-home="rettangoli"] .cat-btn .count{ margin-top:3px; }
html[data-home="rettangoli"] .cat-btn .arrow{ top:50%; margin-top:-.55em; }
html[data-home="rettangoli"] .cat-btn:hover .arrow{ transform:translateX(3px); }
html[dir="rtl"][data-home="rettangoli"] .cat-btn{ flex-direction:row-reverse; align-items:center; padding:15px 18px 15px 50px; }

/* --------------------------------------------------- FOTO SPENTE
   Niente fotografie: al loro posto il medaglione già previsto dal motore
   (il grande simbolo della categoria dentro un alone). */
html[data-foto="no"] .card .photo{
  background:
    radial-gradient(72% 72% at 50% 44%, rgba(255,255,255,.07), transparent 70%),
    linear-gradient(180deg, var(--bg-4), var(--bg-3));
}

/* --------------------------------------------------- SFOGLIO
   La piega ha il suo codice nel motore. Tutti gli altri modi di sfogliare
   sono soltanto queste due animazioni: chi entra e chi esce.
   La durata arriva dal motore nella variabile --turn: una cifra sola, dichiarata
   in tema.js, mai ricopiata a mano in due posti. */
.overlay.pages .card.entering{ animation:sfEntra var(--turn,520ms) ease both; z-index:3; }
.overlay.pages .card.leaving { animation:sfEsce  var(--turn,520ms) ease both; z-index:2; }
@keyframes sfEntra{ from{ opacity:0; } to{ opacity:1; } }
@keyframes sfEsce { from{ opacity:1; } to{ opacity:0; } }
@media (prefers-reduced-motion:reduce){
  .overlay.pages .card.entering, .overlay.pages .card.leaving{ animation-duration:1ms; }
}

/* --------------------------------------------------- MODO "A LISTA"
   L'unico che cambia comportamento: niente carosello, i piatti scorrono in
   colonna. Serve a chi ha sessanta panini, non dodici piatti. (Tavola calda) */
.deck.as-list{
  display:block; overflow-y:auto; -webkit-overflow-scrolling:touch;
  perspective:none; touch-action:pan-y;
  padding:6px 14px calc(26px + env(safe-area-inset-bottom));
}
/* ogni piatto è una riga: foto piccola, nome e descrizione, prezzo a destra */
.deck.as-list .card{
  position:relative; top:auto; left:auto;
  width:100%; height:auto; margin:0 0 7px; padding:8px; border-radius:12px;
  display:flex !important; flex-direction:row; align-items:center; gap:12px;
  visibility:visible !important; opacity:1 !important; transform:none !important;
  transition:none; box-shadow:none; overflow:hidden;
}
.deck.as-list .card .photo,
.deck.as-list .card.no-photo .photo{
  flex:0 0 62px; width:62px; height:62px; border-radius:9px; overflow:hidden; position:relative;
}
.deck.as-list .card .photo::after{ display:none; }                 /* niente velo su un francobollo */
.deck.as-list .card .photo .fallback,
.deck.as-list .card.no-photo .photo .fallback{ font-size:1.8rem; }
.deck.as-list .card .photo .fallback::before,
.deck.as-list .card .photo .fallback::after,
.deck.as-list .card.no-photo .photo .fallback::before,
.deck.as-list .card.no-photo .photo .fallback::after{ display:none; }   /* niente medaglione: non c'è spazio */
.deck.as-list .card .price{ display:none; }                        /* il prezzo sta a destra del nome */
.deck.as-list .card .body,
.deck.as-list .card.no-photo .body{
  flex:1; min-width:0; height:auto; padding:0; gap:2px;
  justify-content:center; text-align:start;
}
.deck.as-list .card .body .kick,
.deck.as-list .card.no-photo .body .kick{ display:none; }
.deck.as-list .card .body .line{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.deck.as-list .card .body h3{ font-size:1.02rem; line-height:1.2; }
.deck.as-list .card .price-inline{
  display:inline-block; flex:0 0 auto;
  font-family:var(--font-head); font-weight:600; font-size:1rem; color:var(--gold-soft);
  background:none; padding:0; border-radius:0; box-shadow:none;
}
.deck.as-list .card .body p{
  font-size:.8rem; line-height:1.32; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.deck.as-list .card .seal,
.deck.as-list .card.no-photo .seal{ display:none; }
.deck.as-list .card.special::before{ display:none; }                /* niente scintillio in una riga */
.deck.as-list ~ .nav-btn{ display:none; }
.deck.as-list ~ .ov-bottom{ display:none; }   /* niente pallini né "scorri · tocca": qui si scorre e basta */

/* --------------------------------------------------- HOME "fasce"
   Fasce orizzontali: fotografia a sinistra, nome a destra. Vive di foto,
   quindi va usata solo con foto:true. (Mare) */
html[data-home="fasce"] .menu-grid{ grid-template-columns:1fr; gap:12px; margin-top:22px; }
html[data-home="fasce"] .cat-btn{
  flex-direction:row; align-items:stretch; justify-content:flex-start;
  gap:0; min-height:0; padding:0; border-radius:16px; overflow:hidden;
}
html[data-home="fasce"] .cat-btn .cat-photo{
  display:block; position:relative; flex:0 0 38%; min-height:104px;
  background:var(--bg-4); overflow:hidden;
}
html[data-home="fasce"] .cat-btn .cat-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
html[data-home="fasce"] .cat-btn .label{ align-self:center; padding:16px 46px 16px 18px; }
html[data-home="fasce"] .cat-btn .arrow{ top:50%; margin-top:-.55em; }
html[data-home="fasce"] .cat-btn:hover .arrow{ transform:translateX(3px); }
/* dove la foto c'è, l'emoji della categoria non serve più */
html[data-home="fasce"] .cat-btn:has(.cat-photo) .ico{ display:none; }
html[data-home="fasce"] .cat-btn:not(:has(.cat-photo)) .ico{ font-size:1.7rem; align-self:center; padding-left:18px; }
html[dir="rtl"][data-home="fasce"] .cat-btn{ flex-direction:row-reverse; }

/* --------------------------------------------------- SFOGLIO "scivolo"
   La pagina nuova entra da destra e spinge fuori la precedente. Morbido,
   senza prospettiva: adatto alle tavolozze chiare, dove la piega non si
   leggerebbe. (Mare) */
html[data-sfoglio="scivolo"] .overlay.pages .card.entering{
  animation:scivoloEntra var(--turn,520ms) cubic-bezier(.22,.75,.2,1) both;
}
html[data-sfoglio="scivolo"] .overlay.pages .card.leaving{
  animation:scivoloEsce var(--turn,520ms) cubic-bezier(.22,.75,.2,1) both;
}
@keyframes scivoloEntra{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
@keyframes scivoloEsce { from{ transform:translateX(0); opacity:1; } to{ transform:translateX(-26%); opacity:0; } }
/* all'indietro lo stesso movimento, specchiato */
html[data-sfoglio="scivolo"] .overlay.pages .deck.rev .card.entering{ animation-name:scivoloEntraInd; }
html[data-sfoglio="scivolo"] .overlay.pages .deck.rev .card.leaving { animation-name:scivoloEsceInd; }
@keyframes scivoloEntraInd{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
@keyframes scivoloEsceInd { from{ transform:translateX(0); opacity:1; } to{ transform:translateX(26%); opacity:0; } }

/* ============================================================================
   MENU DEL GIORNO  —  si vede solo negli stili che lo accendono
   Colori dal tema come tutto il resto: --day-* per il riquadro in home.
   ========================================================================== */
:root{
  --day-bg:    linear-gradient(160deg, rgba(255,255,255,.03), transparent 55%), linear-gradient(160deg, #23322c, #141f1b);
  --day-ink:   #f4efe6;
  --day-sub:   #9fd8b6;
  --day-badge: linear-gradient(180deg,#8fe0a2,#46b269);
  --day-badge-ink: #0f1a16;
}

/* il riquadro in cima alla home */
.feature.giorno{ background:var(--day-bg); border-color:rgba(255,255,255,.16); }
.feature.giorno .feat-title{ color:var(--day-ink); }
.feature.giorno .feat-sub{ color:var(--day-sub); text-transform:none; letter-spacing:.04em; }
.feature.giorno .badge.open{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em;
  font-size:.68rem; color:var(--day-badge-ink); white-space:nowrap;
  background:var(--day-badge); padding:6px 10px; border-radius:999px;
  box-shadow:0 0 16px rgba(80,200,120,.4);
}
.feature.giorno .lock{ font-size:1.3rem; }
.feature.giorno.locked{ opacity:.6; filter:grayscale(.45); }     /* fuori orario: bloccato */
.feature.giorno.locked .feat-title{ color:var(--day-ink); opacity:.75; }   /* --muted è il grigio della HOME: sulla fascia colorata sparirebbe */
.feature.giorno.shake{ animation:shake .5s; }
@keyframes shake{ 10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);} 30%,50%,70%{transform:translateX(-7px);} 40%,60%{transform:translateX(7px);} }
@media (prefers-reduced-motion:reduce){ .feature.giorno.shake{ animation:none; } }

/* il pannello: un foglio che scorre, senza foto — cambia ogni mattina */
/* il foglio dell'editor può restare velato; questo lo legge un cliente al
   tavolo, quindi è pieno: sotto non si deve vedere niente. */
.overlay.giorno-sheet{
  z-index:58;
  background:radial-gradient(90% 60% at 50% 0%, rgba(var(--gold-rgb),.12), transparent 60%), var(--bg);
}
.giorno-head{ text-align:center; max-width:680px; margin:0 auto 22px; }
.giorno-kicker{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--day-sub); }
.giorno-head h2{ font-family:var(--font-display); font-weight:800; font-size:2.3rem; margin:.15em 0 .12em; color:var(--cream); }
.giorno-date{ font-family:var(--font-head); text-transform:capitalize; letter-spacing:.05em; color:var(--gold-soft); margin:0; font-size:1.02rem; }
.giorno-note{
  margin:12px auto 0; max-width:440px; font-size:.9rem; color:var(--cream);
  background:rgba(var(--gold-rgb),.07); border:1px dashed var(--line);
  border-radius:12px; padding:9px 13px;
}
.giorno-body{ max-width:680px; margin:0 auto; }
.g-sec{ margin:0 0 22px; }
.g-sec h3{
  font-family:var(--font-head); text-transform:uppercase; letter-spacing:.14em;
  font-size:1.02rem; color:var(--gold); margin:0 0 6px;
  padding-bottom:8px; border-bottom:1px solid var(--line);
}
.g-sec ul{ list-style:none; margin:0; padding:0; }
.g-sec li{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:8px 2px; border-bottom:1px dotted rgba(var(--gold-rgb),.14); }
.g-name{ font-size:1.02rem; color:var(--cream); }
.g-price{ font-family:var(--font-head); color:var(--gold-soft); white-space:nowrap; }

/* --- nel menu segreto: il pannello con l'interruttore, in cima all'editor dei piatti --- */
.gd-pan{
  margin:0 0 22px; padding:18px;
  border:1px solid rgba(134,182,74,.28); border-radius:16px; background:var(--bg-3);
}
.gd-kick{
  margin:0 0 14px; font-family:var(--font-head); text-transform:uppercase;
  letter-spacing:.18em; font-size:.72rem; color:var(--basil);
}
.gd-riga{ display:flex; align-items:center; gap:14px; }
.gd-sw{
  flex:0 0 auto; width:62px; height:34px; padding:3px; border-radius:999px;
  border:1px solid var(--line); background:rgba(0,0,0,.35); cursor:pointer;
  display:flex; align-items:center; transition:background .2s ease, border-color .2s ease;
}
.gd-sw:disabled{ opacity:.6; }
.gd-pallina{ width:26px; height:26px; border-radius:50%; background:var(--muted); transition:transform .2s ease, background .2s ease; }
.gd-pan.acceso .gd-sw{ background:rgba(134,182,74,.25); border-color:var(--basil); }
.gd-pan.acceso .gd-pallina{ transform:translateX(28px); background:var(--basil); }
html[dir="rtl"] .gd-pan.acceso .gd-pallina{ transform:translateX(-28px); }
.gd-stato{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em; font-size:.86rem; color:var(--cream); }
.gd-pan.acceso .gd-stato{ color:var(--basil); }
.gd-info{ margin:12px 0 0; color:var(--muted); font-size:.82rem; }
.gd-msg{ margin:10px 0 0; color:var(--ember-2); font-size:.84rem; line-height:1.45; }
.gd-scrivi{ width:100%; margin-top:14px; }

/* --- l'editor del giorno: un foglio SOPRA quello dei piatti ---
   pieno, non velato: due fogli velati uno sull'altro mescolano le scritte */
.overlay.gd-edit{
  z-index:57;
  background:radial-gradient(90% 60% at 50% 0%, rgba(134,182,74,.12), transparent 60%), var(--bg);
}
.g-editsec{ margin:0 0 18px; background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:16px; }
.g-editsec h2{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.12em; font-size:1rem; color:var(--gold); margin:0 0 12px; }
.g-rows{ display:flex; flex-direction:column; gap:8px; }
.g-row{ display:flex; gap:8px; align-items:center; }
.g-row .g-nome{ flex:1; min-width:0; }
.g-row .g-prezzo{ width:86px; text-align:center; flex:0 0 auto; }   /* ci sta anche "a peso" */
.row-del{ width:40px; height:40px; flex:0 0 auto; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--muted); cursor:pointer; font-size:1rem; }
.row-del:hover{ background:var(--brick); color:#fff; border-color:var(--brick); }
.nota-label{ display:block; color:var(--muted); font-size:.85rem; margin:6px 2px 16px; }
.nota-label small{ font-size:.74rem; opacity:.85; }
.nota-label .field{ margin-top:6px; }
.ed-avail{ background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:16px; margin:4px 0 0; }
.ed-avail h2{ font-family:var(--font-head); text-transform:uppercase; letter-spacing:.12em; font-size:1rem; color:var(--gold); margin:0 0 12px; }
.day-toggles{ display:flex; flex-wrap:wrap; gap:8px; }
.day-tog{ flex:1 1 0; min-width:52px; padding:12px 6px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--muted); font-family:var(--font-head); text-transform:uppercase; letter-spacing:.04em; font-size:.85rem; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.day-tog.on{ background:linear-gradient(180deg, var(--gold), var(--gold-2)); color:#1a1206; border-color:transparent; font-weight:600; }
.time-row{ display:flex; gap:12px; margin-top:12px; }
.time-row label{ flex:1; display:flex; flex-direction:column; gap:6px; font-family:var(--font-head); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; color:var(--muted); }

/* --------------------------------------------------- HOME "grandi"
   Rettangoli grandi a tutta larghezza, con la fotografia della categoria come
   sfondo e il nome sopra. Dove la foto non c'è resta il blocco pieno con il
   simbolo: le due cose convivono nella stessa pagina. (Montagna) */
html[data-home="grandi"] .menu-grid{ grid-template-columns:1fr; gap:14px; margin-top:24px; }
html[data-home="grandi"] .cat-btn{
  position:relative; flex-direction:column; align-items:flex-start; justify-content:flex-end;
  min-height:154px; padding:20px; border-radius:14px; overflow:hidden; gap:0;
}
html[data-home="grandi"] .cat-btn .cat-photo{ display:block; position:absolute; inset:0; z-index:0; }
html[data-home="grandi"] .cat-btn .cat-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html[data-home="grandi"] .cat-btn .cat-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.52) 52%, rgba(0,0,0,.88) 100%);
}
html[data-home="grandi"] .cat-btn .ico{ position:absolute; top:16px; left:20px; z-index:1; font-size:1.8rem; }
html[data-home="grandi"] .cat-btn .label{ position:relative; z-index:1; font-size:1.55rem; text-shadow:0 2px 14px rgba(0,0,0,.65); }
html[data-home="grandi"] .cat-btn .count{ color:var(--gold-soft); }
html[data-home="grandi"] .cat-btn .arrow{ top:auto; bottom:22px; right:20px; z-index:1; }
html[dir="rtl"][data-home="grandi"] .cat-btn .ico{ left:auto; right:20px; }

/* --------------------------------------------------- SFOGLIO "verticale"
   La pagina si volta dal basso e quella vecchia si solleva inclinandosi, come
   un'asse di legno che si alza. Il dito qui va su e giù (lo sa anche il
   motore: DRAG_AXIS). (Montagna) */
html[data-sfoglio="verticale"] .overlay.pages .card.entering{
  animation:asseEntra var(--turn,520ms) cubic-bezier(.22,.75,.2,1) both;
}
html[data-sfoglio="verticale"] .overlay.pages .card.leaving{
  animation:asseEsce var(--turn,520ms) cubic-bezier(.3,.6,.25,1) both;
}
@keyframes asseEntra{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
@keyframes asseEsce { from{ transform:translateY(0) rotateX(0deg); opacity:1; } to{ transform:translateY(-20%) rotateX(14deg); opacity:0; } }
html[data-sfoglio="verticale"] .overlay.pages .deck.rev .card.entering{ animation-name:asseEntraInd; }
html[data-sfoglio="verticale"] .overlay.pages .deck.rev .card.leaving { animation-name:asseEsceInd; }
@keyframes asseEntraInd{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
@keyframes asseEsceInd { from{ transform:translateY(0) rotateX(0deg); opacity:1; } to{ transform:translateY(20%) rotateX(-14deg); opacity:0; } }

/* --------------------------------------------------- HOME "righe"
   Righe fitte con il francobollo della categoria a sinistra. Pensata per chi
   ha tante voci e vuole arrivare subito al punto. (Tavola calda) */
html[data-home="righe"] .menu-grid{ grid-template-columns:1fr; gap:6px; margin-top:18px; }
html[data-home="righe"] .cat-btn{
  flex-direction:row; align-items:center; justify-content:flex-start; gap:12px;
  min-height:0; padding:8px 38px 8px 8px; border-radius:10px;
}
html[data-home="righe"] .cat-btn .cat-photo{
  display:block; position:relative; flex:0 0 52px; height:52px;
  border-radius:8px; overflow:hidden; background:var(--bg-4);
}
html[data-home="righe"] .cat-btn .cat-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html[data-home="righe"] .cat-btn:has(.cat-photo) .ico{ display:none; }
html[data-home="righe"] .cat-btn:not(:has(.cat-photo)) .ico{ flex:0 0 52px; text-align:center; font-size:1.55rem; }
html[data-home="righe"] .cat-btn .label{ font-size:1rem; }
html[data-home="righe"] .cat-btn .count{ margin-top:1px; font-size:.7rem; }
html[data-home="righe"] .cat-btn .arrow{ top:50%; margin-top:-.55em; right:14px; }
html[dir="rtl"][data-home="righe"] .cat-btn{ flex-direction:row-reverse; padding:8px 8px 8px 38px; }

/* --------------------------------------------------- HOME "filetti"
   Righe sottili separate da un filo, senza riquadri. Vive di vuoto: va usata
   con poche categorie e molta aria intorno. (Essenziale) */
html[data-home="filetti"] .menu-grid{ grid-template-columns:1fr; gap:0; margin-top:34px; }
html[data-home="filetti"] .cat-btn{
  flex-direction:row; align-items:center; justify-content:flex-start; gap:16px;
  min-height:0; padding:22px 34px 22px 2px;
  border:0; border-top:1px solid var(--line); border-radius:0;
  background:none; box-shadow:none;
}
html[data-home="filetti"] .cat-btn:last-child{ border-bottom:1px solid var(--line); }
html[data-home="filetti"] .cat-btn::after{ display:none; }
html[data-home="filetti"] .cat-btn:hover, html[data-home="filetti"] .cat-btn:focus-visible{
  background:rgba(255,255,255,.03); box-shadow:none; border-color:var(--line);
}
html[data-home="filetti"] .cat-btn:active{ transform:none; }
html[data-home="filetti"] .cat-btn .ico{ font-size:1.25rem; opacity:.85; }
html[data-home="filetti"] .cat-btn .label{ font-size:1.05rem; }
html[data-home="filetti"] .cat-btn .arrow{ top:50%; margin-top:-.55em; right:4px; }

/* --------------------------------------------------- SFOGLIO "dissolvenza"
   La pagina nuova compare da un soffio più grande e si posa; la vecchia
   svanisce rimpicciolendo appena. Nessun movimento laterale. (Essenziale) */
html[data-sfoglio="dissolvenza"] .overlay.pages .card.entering{
  animation:velaEntra var(--turn,520ms) cubic-bezier(.25,.6,.25,1) both;
}
html[data-sfoglio="dissolvenza"] .overlay.pages .card.leaving{
  animation:velaEsce var(--turn,520ms) cubic-bezier(.25,.6,.25,1) both;
}
@keyframes velaEntra{ from{ opacity:0; transform:scale(1.045); } to{ opacity:1; transform:scale(1); } }
@keyframes velaEsce { from{ opacity:1; transform:scale(1); } to{ opacity:0; transform:scale(.985); } }

/* --------------------------------------------------- HOME "bande"
   Bande a tutto schermo, da bordo a bordo, con la foto piena e il nome sopra
   in grande. Niente angoli arrotondati: deve sembrare un manifesto, non una
   scheda. (Pizzeria pop) */
html[data-home="bande"] .menu-grid{ grid-template-columns:1fr; gap:3px; margin:26px -14px 0; }
html[data-home="bande"] .cat-btn{
  position:relative; flex-direction:column; align-items:center; justify-content:center;
  min-height:168px; padding:22px; border:0; border-radius:0; overflow:hidden; gap:0;
  text-align:center;
}
html[data-home="bande"] .cat-btn .cat-photo{ display:block; position:absolute; inset:0; z-index:0; }
html[data-home="bande"] .cat-btn .cat-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
html[data-home="bande"] .cat-btn .cat-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.62));
}
html[data-home="bande"] .cat-btn .label{
  position:relative; z-index:1;
  font-size:2rem; line-height:.98;
}
html[data-home="bande"] .cat-btn .count{ margin-top:8px; letter-spacing:.14em; text-transform:uppercase; }
/* con la foto: testo bianco sopra il velo scuro */
html[data-home="bande"] .cat-btn:has(.cat-photo) .ico{ display:none; }
html[data-home="bande"] .cat-btn:has(.cat-photo) .label{ color:#fff; text-shadow:0 3px 18px rgba(0,0,0,.6); }
html[data-home="bande"] .cat-btn:has(.cat-photo) .count{ color:rgba(255,255,255,.85); }
/* senza foto: blocco di colore pieno con il simbolo, non un buco bianco */
html[data-home="bande"] .cat-btn:not(:has(.cat-photo)){ background:var(--banda-vuota); }
html[data-home="bande"] .cat-btn:not(:has(.cat-photo)) .ico{ display:block; position:relative; z-index:1; font-size:2.3rem; margin-bottom:10px; }
html[data-home="bande"] .cat-btn:not(:has(.cat-photo)) .label{ color:var(--banda-vuota-ink); text-shadow:none; }
html[data-home="bande"] .cat-btn:not(:has(.cat-photo)) .count{ color:var(--banda-vuota-ink); opacity:.75; }
html[data-home="bande"] .cat-btn .arrow{ display:none; }
html[data-home="bande"] .cat-btn:hover{ box-shadow:none; }
html[data-home="bande"] .cat-btn:hover .cat-photo img{ transform:scale(1.03); transition:transform .5s ease; }

/* --------------------------------------------------- SFOGLIO "blocchi"
   Spinta secca: la pagina nuova entra spingendo fuori la vecchia per intero,
   senza dissolvenze. Movimento deciso, da locale giovane. (Pizzeria pop) */
html[data-sfoglio="blocchi"] .overlay.pages .card.entering{
  animation:bloccoEntra var(--turn,520ms) cubic-bezier(.16,.9,.3,1) both;
}
html[data-sfoglio="blocchi"] .overlay.pages .card.leaving{
  animation:bloccoEsce var(--turn,520ms) cubic-bezier(.16,.9,.3,1) both;
}
@keyframes bloccoEntra{ from{ transform:translateX(102%); } to{ transform:translateX(0); } }
@keyframes bloccoEsce { from{ transform:translateX(0); } to{ transform:translateX(-102%); } }
html[data-sfoglio="blocchi"] .overlay.pages .deck.rev .card.entering{ animation-name:bloccoEntraInd; }
html[data-sfoglio="blocchi"] .overlay.pages .deck.rev .card.leaving { animation-name:bloccoEsceInd; }
@keyframes bloccoEntraInd{ from{ transform:translateX(-102%); } to{ transform:translateX(0); } }
@keyframes bloccoEsceInd { from{ transform:translateX(0); } to{ transform:translateX(102%); } }

/* --------------------------------------------------- SOLO PAROLE
   Nessuna foto e nemmeno il medaglione: resta la sola tipografia. Serve dove
   il piatto si racconta a parole. (Alta cucina) */
html[data-medaglioni="no"] .card .photo{ display:none; }
html[data-medaglioni="no"] .card .body,
html[data-medaglioni="no"] .card.no-photo .body{ height:100%; justify-content:center; }
/* a schermo intero il testo non sta più appoggiato in basso (lì sotto ci andava
   la foto): senza foto si mette al centro del vuoto, che è il punto dello stile */
html[data-medaglioni="no"] .overlay.pages .card .body,
html[data-medaglioni="no"] .overlay.pages .card.no-photo .body{
  position:static; height:100%; justify-content:center;
}
/* il prezzo stava DENTRO il riquadro della foto: senza riquadro sparirebbe,
   quindi qui passa accanto al nome anche nella vista a mazzo di carte */
html[data-medaglioni="no"] .card .price-inline{ display:inline-block; }
/* niente emoji nel titolo della categoria: è uno stile di sole parole */
html[data-medaglioni="no"] .ov-title .ico{ display:none; }

/* --------------------------------------------------- HOME "numerato"
   Un elenco numerato, senza riquadri e senza simboli: solo il numero, il nome
   e molto vuoto intorno. (Alta cucina) */
html[data-home="numerato"] .menu-grid{ grid-template-columns:1fr; gap:0; margin-top:44px; }
html[data-home="numerato"] .cat-btn{
  flex-direction:row; align-items:baseline; justify-content:flex-start; gap:20px;
  min-height:0; padding:20px 8px 20px 0;
  border:0; border-radius:0; background:none; box-shadow:none; animation:none;
}
html[data-home="numerato"] .cat-btn::after{ display:none; }
html[data-home="numerato"] .cat-btn:active{ transform:none; }
html[data-home="numerato"] .cat-btn .num{
  display:block; flex:0 0 auto;
  font-family:var(--font-head); font-size:.72rem; letter-spacing:.18em; color:var(--gold);
}
html[data-home="numerato"] .cat-btn .ico,
html[data-home="numerato"] .cat-btn .arrow{ display:none; }
html[data-home="numerato"] .cat-btn .label{ font-size:1.22rem; }