/* ============================================================
   CAMA'FFARE — stile del sito (responsive first)
   Struttura: 1) token  2) base  3) componenti condivisi
              4) home   5) menu  5c) scheda prodotto
              6) ordina  6b) modali
   ============================================================ */

/* ---------- 1. TOKEN ---------- */
:root {
  --rosso:        #e92b2e;
  --rosso-scuro:  #c81f22;
  --rosso-chiaro: #fff1f0;
  --ink:          #111214;
  --ink-soft:     #3d3f45;
  --muted:        #7a7f89;
  --bg:           #f6f6f8;
  --card:         #ffffff;
  --line:         #e9eaee;

  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ombre a due strati: un contatto netto vicino + un alone largo e morbido */
  --shadow-sm: 0 1px 2px rgba(17,18,20,.04), 0 6px 16px rgba(17,18,20,.05);
  --shadow-md: 0 10px 34px rgba(17,18,20,.10);
  --shadow-lg: 0 20px 50px rgba(17,18,20,.14);

  /* vetro: usato dal tasto indietro sopra allo sfondo sfumato */
  --glass-card: rgba(255,255,255,.86);

  --ease: cubic-bezier(.2,.7,.3,1);

  --wrap: 1120px;
  /* spazio ai lati della pagina: stretto sul telefono, dove ogni pixel di
     larghezza serve al contenuto, piu' largo da tablet in su */
  --pad: 14px;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Poppins', var(--font);

  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 700px) {
  :root { --pad: 24px; }
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;   /* le chip categoria sono ancore */
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* NB: niente overflow-x:hidden qui — romperebbe position:sticky.
     Chi deborda (i cerchi della home) e' gia' contenuto da .splash */
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}

p { margin: 0; }
img { max-width: 100%; display: block; }
/* senza !important una qualsiasi regola di classe con display: batte
   il [hidden] del browser e l'elemento resta a schermo */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* testo visibile solo ai lettori di schermo */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--rosso);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- 3. COMPONENTI CONDIVISI ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.btn:active { transform: scale(.975); }
.btn--block { width: 100%; }

.btn--white {
  background: #fff;
  color: var(--rosso);
  box-shadow: 0 10px 26px rgba(60,0,0,.24), inset 0 -1px 0 rgba(0,0,0,.05);
}
/* bottone "di vetro": si appoggia sullo sfondo rosso invece di coprirlo */
.btn--outline-white {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.34);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn--primary { background: var(--rosso); color: #fff; }
.btn--soft    { background: var(--card); color: var(--ink); border-color: var(--line); }

@media (hover: hover) {
  .btn--white:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(60,0,0,.3);
  }
  .btn--outline-white:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.7);
    transform: translateY(-2px);
  }
  .btn--primary:hover { background: var(--rosso-scuro); }
  .btn--soft:hover    { border-color: var(--ink); }
}

/* ---------- 4. HOME (splash rossa) ---------- */
.page-home { background: var(--rosso); }

.splash {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 40px var(--pad) calc(24px + var(--safe-b));
  background: var(--rosso);
  color: #fff;
  text-align: center;
}

.splash__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  margin: auto 0;
}

.splash__logo {
  /* logo_white_512.png e' 512x512 (quadrato): non superare i 512 per non sgranarlo */
  width: clamp(168px, 48vw, 246px);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(80,0,0,.32));
}

.splash__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255,255,255,.94);
}

.splash__title {
  font-size: clamp(1.85rem, 8vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
  text-shadow: 0 8px 26px rgba(90,0,0,.22);
}
.splash__title em {
  font-style: normal;
  background: linear-gradient(180deg, #fff 20%, #ffd6b8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.splash__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 360px);
  margin-top: 10px;
}

/* piccole etichette sotto ai bottoni: cosa si puo' fare, in due parole */
.splash__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  font-size: .78rem;
  color: rgba(255,255,255,.86);
}
.splash__tags li {
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.17);
}

.splash__foot {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-size: .85rem;
}
.splash__foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.92);
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.splash__foot a:active { transform: scale(.97); }
.splash__foot .ico { width: 16px; height: 16px; opacity: .85; }

@media (hover: hover) {
  .splash__foot a:hover {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.42);
    transform: translateY(-2px);
  }
}

/* entrata in scena: ogni blocco sale con un piccolo ritardo */
@media (prefers-reduced-motion: no-preference) {
  .splash__inner > *,
  .splash__foot { animation: rise-in .7s var(--ease) backwards; }
  .splash__logo    { animation-delay: .05s; }
  .splash__eyebrow { animation-delay: .14s; }
  .splash__title   { animation-delay: .22s; }
  .splash__cta     { animation-delay: .30s; }
  .splash__tags    { animation-delay: .38s; }
  .splash__foot    { animation-delay: .46s; }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
}
@keyframes fade-in {
  from { opacity: 0; }
}

@media (max-height: 720px) {
  .splash { gap: 18px; padding-top: 28px; }
  .splash__inner { gap: 12px; }
  .splash__logo { width: clamp(126px, 36vw, 168px); }
  .splash__title { font-size: clamp(1.5rem, 6.5vw, 2rem); }
  .splash__cta { margin-top: 4px; }
  .splash__foot { font-size: .8rem; }
  .splash__foot a { padding: 7px 12px; }
}

@media (min-width: 700px) {
  .splash { padding-top: 56px; gap: 40px; }
  .splash__inner { gap: 18px; }
  .splash__cta { flex-direction: row; width: auto; margin-top: 14px; }
  .splash__cta .btn { min-width: 210px; }
  .splash__foot { font-size: .88rem; }
}

/* ---------- 5. APPBAR (menu + ordina) ---------- */
.page-app {
  padding-bottom: calc(36px + var(--safe-b));
}

/* velo rosso appena accennato in cima alla pagina: e' fisso, cosi' resta
   visibile solo nella prima schermata e non "cresce" con il contenuto */
.page-app::before {
  content: '';
  position: fixed;
  inset: 0 0 auto;
  height: 340px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(110% 100% at 50% 0%, rgba(233,43,46,.10) 0%, rgba(233,43,46,0) 72%);
}

.appbar {
  position: relative;
  padding-top: 10px;
  padding-bottom: 8px;
  background: transparent;
}

/* menu.html: l'header intero (logo, bottoni, ricerca, categorie) resta in alto.
   Fondo bianco pieno: niente vetro, le card non si intravedono sotto. */
.appbar--sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--card);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s ease, border-color .25s ease;
}

/* sul bianco pieno i controlli hanno bisogno di un riempimento grigio,
   altrimenti sparirebbero */
.appbar--sticky .appbar__back {
  background: var(--bg);
  border-color: rgba(17,18,20,.07);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (hover: hover) {
  .appbar--sticky .appbar__back:hover { background: #eceef2; }
}

/* indietro e logo attaccati a sinistra, l'azione spinta a destra dal margin auto */
.appbar__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}

.appbar__back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--glass-card);
  border: 1px solid rgba(17,18,20,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), background-color .18s ease;
}
.appbar__back:active { transform: scale(.93); }

.appbar__logo { width: 100px; height: auto; }   /* logo_red_180.png, 180x64 */
.appbar__brand {
  display: inline-flex;
  transition: transform .18s var(--ease);
  transform-origin: left center;
}
.appbar__brand:active { transform: scale(.96); }

.appbar__action {
  margin-left: auto;
  padding: 11px 19px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, #f0393a 0%, var(--rosso) 100%);
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  box-shadow: 0 6px 16px rgba(233,43,46,.32);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.appbar__action:active { transform: scale(.96); }

@media (hover: hover) {
  .appbar__back:hover   { background: #fff; transform: translateY(-1px); }
  .appbar__action:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(233,43,46,.4); }
}

.appbar__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-top: 18px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  background: var(--rosso-chiaro);
  color: var(--rosso);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.appbar__title {
  margin-top: 12px;
  font-size: clamp(2rem, 8vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.appbar__title::after {
  content: '.';
  color: var(--rosso);
}

.appbar__sub {
  margin-top: 8px;
  color: var(--muted);
  font-size: .98rem;
}

/* --- stato agganciato: compare solo una riga sottile + un'ombra bassa
       che stacca l'header dalle card. La classe .is-stuck la mette js/app.js --- */
.appbar--sticky.is-stuck {
  border-bottom-color: rgba(17,18,20,.07);
  box-shadow: 0 10px 30px rgba(17,18,20,.07);
}

/* --- ricerca --- */
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 0 8px 0 16px;
  height: 52px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* il campo ha outline:none, quindi il fuoco lo segnala il contenitore */
.search:focus-within {
  background: #fff;
  border-color: rgba(233,43,46,.5);
  box-shadow: 0 0 0 4px rgba(233,43,46,.13);
}
.search .ico { color: var(--muted); transition: color .18s ease; }
.search:focus-within > .ico { color: var(--rosso); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  outline: none;
}
.search input::-webkit-search-cancel-button { display: none; }
.search__clear {
  display: inline-flex;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.search__clear:active { background: rgba(17,18,20,.08); }
@media (hover: hover) {
  .search__clear:hover { background: rgba(17,18,20,.06); color: var(--ink); }
}

/* --- chip categorie --- */
/* Una riga sola a qualsiasi larghezza. A schermo grande le 22 categorie
   mandate a capo mangiavano mezzo header, e l'header e' fisso: quello spazio
   veniva tolto al menu per tutta la navigazione. Chi non vuole scorrere ha
   il tasto "Tutte" qui accanto, che apre l'elenco completo. */
.chipsbar {
  display: flex;
  align-items: center;
  /* stessa colonna di .wrap: le chip partono allineate al logo, alla ricerca
     e alla griglia. Il padding laterale lo mettono .chips e il tasto */
  max-width: var(--wrap);
  margin-inline: auto;
}

.chips {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 2px;
  padding: 12px var(--pad);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* i bordi sfumano: si capisce a colpo d'occhio che la fila continua */
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - var(--pad)), transparent 100%);
}
.chips::-webkit-scrollbar { display: none; }

/* niente bordo ne' riempimento: le voci non scelte sono solo testo, e a
   riempirsi e' unicamente quella attiva. E' cio' che tiene pulita una fila
   lunga come questa */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 10px 15px;
  border: 0;
  border-radius: var(--r-pill);
  background: none;
  color: var(--ink);
  font-weight: 600;
  font-size: .94rem;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: center;
  transition: background-color .18s ease, color .18s ease,
              transform .18s var(--ease);
}
.chip:active { transform: scale(.95); }
.chip__ico { font-size: 1rem; line-height: 1; }
.chip[aria-current] {
  background: var(--ink);
  color: #fff;
}
/* categoria senza risultati durante una ricerca: la chip sparisce */
.chip--off { display: none; }

/* tondo con la sola icona: accanto a chip senza bordo un tasto pieno
   sembrerebbe la voce selezionata */
.chips__all {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-right: var(--pad);
  border: 1px solid rgba(17,18,20,.16);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease,
              transform .18s var(--ease);
}
.chips__all .ico { width: 18px; height: 18px; }
.chips__all:active { transform: scale(.93); }
@media (hover: hover) {
  .chips__all:hover { background: rgba(17,18,20,.06); border-color: rgba(17,18,20,.3); }
}

@media (hover: hover) {
  .chip:hover { background: rgba(17,18,20,.06); }
  .chip[aria-current]:hover { background: var(--ink); }
}


/* ---------- 5b. GRIGLIA MENU ---------- */
.menu-main { padding-top: 10px; }

.menu-group { scroll-margin-top: calc(var(--stick-h, 170px) + 12px); }
.menu-group + .menu-group { margin-top: 38px; }

.menu-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}
.menu-group__head h2 {
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.03em;
}
.menu-group__count {
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: rgba(17,18,20,.05);
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
}

/* una voce per riga: il testo e' la parte utile, la foto fa da miniatura.
   Da tablet in su due colonne, altrimenti le righe diventano lunghissime */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}
@media (min-width: 700px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }

.item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  background: var(--card);
  border: 1px solid rgba(17,18,20,.05);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
@media (hover: hover) {
  .item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .item:hover .item__media img { transform: scale(1.06); }
}

.item__media {
  position: relative;
  order: 1;                  /* nel DOM sta dopo il testo, a schermo va a destra */
  width: 104px;
  height: 104px;
  flex: none;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--rosso-chiaro);
}
.item__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

/* placeholder mostrato finche' la foto non esiste. Nella miniatura resta
   solo l'icona: "foto in arrivo" a 104px non si leggerebbe */
.item__ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 2.2rem;
}
.item__ph small { display: none; }

.item__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.item__name {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.item__desc {
  font-size: .88rem;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* prezzo a sinistra, eventuali tag spinti all'altro capo della riga */
.item__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.item__price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.item__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  margin-left: auto;
  min-width: 0;
}
.tag {
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: var(--bg);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.tag--veg   { color: #2e7d4f; }
.tag--vegan { color: #1f7a48; }
.tag--hot   { color: var(--rosso); }
.tag--new   { background: var(--ink); color: #fff; }

@media (max-width: 380px) {
  .item { gap: 12px; }
  .item__media { width: 92px; height: 92px; }
}

/* copre tutta la card: qualunque punto si tocchi si apre la scheda */
.item__open {
  position: absolute;
  inset: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.item__open:focus-visible { outline-offset: -3px; border-radius: var(--r-lg); }

.menu-empty {
  padding: 56px 0 20px;
  text-align: center;
  color: var(--muted);
}
.menu-empty strong { display: block; color: var(--ink); font-size: 1.15rem; margin-bottom: 6px; }
.menu-empty span { display: block; font-size: 2.4rem; margin-bottom: 10px; }

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

/* i gruppi entrano con una dissolvenza: durante la ricerca fa capire
   che i risultati sono cambiati, senza spostare nulla */
@media (prefers-reduced-motion: no-preference) {
  .menu-group,
  .menu-empty { animation: fade-in .3s ease backwards; }
}

/* ---------- 5c. SCHEDA DEL PRODOTTO ---------- */
.scheda {
  width: min(100% - 24px, 560px);
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.scheda::backdrop {
  background: rgba(8,8,10,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.scheda__fig {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px);
  margin: 0;
}

.scheda__img {
  width: 100%;
  max-height: 62dvh;
  object-fit: cover;
  background: var(--rosso-chiaro);
}

/* prodotto senza foto: stessa icona e stesso colore del placeholder in griglia.
   Piu' bassa dell'immagine, cosi' la descrizione resta la protagonista */
.scheda__ph {
  display: grid;
  place-items: center;
  height: 150px;
  flex: none;
  font-size: 3.4rem;
}

/* tondo chiaro sopra alla foto: funziona sia su immagini scure che chiare */
.scheda__close {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(8,8,10,.28);
  transition: background-color .16s ease, transform .16s var(--ease);
}
.scheda__close:active { transform: scale(.92); }
@media (hover: hover) {
  .scheda__close:hover { background: #fff; }
}

.scheda__cap {
  padding: 18px 20px 22px;
  overflow-y: auto;
}
.scheda__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.scheda__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.scheda__title {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.025em;
}
.scheda__price {
  margin-left: auto;
  flex: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--rosso);
}
.scheda__desc {
  margin-top: 8px;
  color: var(--muted);
  font-size: .95rem;
}

@media (prefers-reduced-motion: no-preference) {
  .scheda[open]           { animation: modal-in .28s var(--ease); }
  .scheda[open]::backdrop { animation: fade-in .28s ease; }
}

/* ---------- 6. ORDINA ---------- */
/* Cinque scelte in colonna non hanno bisogno di 1120px: qui la pagina intera
   si stringe, header compreso. Prima si stringeva solo il <main>, e su desktop
   il titolo restava a sinistra mentre le card galleggiavano al centro. */
.page-order { --wrap: 720px; }

.order {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  background: var(--card);
  border: 1px solid rgba(17,18,20,.05);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.opt:active { transform: scale(.985); }
@media (hover: hover) {
  .opt:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .opt:hover .opt__arrow { transform: translateX(4px); color: var(--ink); }
}

.opt__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.opt__icon img { width: 34px; height: auto; }
.opt__icon .ico { width: 24px; height: 24px; fill: currentColor; stroke: none; }

.opt__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.opt__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}
.opt__desc { font-size: .86rem; color: var(--muted); }

.opt__arrow {
  margin-left: auto;
  color: var(--muted);
  transition: transform .18s var(--ease), color .18s ease;
}

/* ogni canale porta il proprio colore, con l'ombra intonata */
.opt--app       .opt__icon { background: linear-gradient(145deg, #ff5f4a, var(--rosso));
                             box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 8px 18px rgba(233,43,46,.3); }
.opt--justeat   .opt__icon { background: linear-gradient(145deg, #ffa340, #ff8000);
                             box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(255,128,0,.32); }
.opt--glovo     .opt__icon { background: linear-gradient(145deg, #ffd977, #ffc244); color: #163a5f;
                             box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 8px 18px rgba(255,194,68,.4); }
.opt--deliveroo .opt__icon { background: linear-gradient(145deg, #3ce4d6, #00ccbc);
                             box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(0,204,188,.32); }
.opt--call      .opt__icon { background: linear-gradient(145deg, #40434b, #111214);
                             box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(17,18,20,.28); }

.order__where {
  position: relative;
  margin-top: 26px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #2a2d34 0%, #111214 70%);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.order__where h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.order__where p { margin-top: 6px; color: rgba(255,255,255,.72); font-size: .95rem; }
.order__where-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.order__where-cta .btn { padding: 12px 20px; font-size: .95rem; }
.order__where-cta .btn--primary {
  background: linear-gradient(180deg, #f0393a 0%, var(--rosso) 100%);
  box-shadow: 0 8px 20px rgba(233,43,46,.36);
}
.order__where-cta .btn--soft {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (hover: hover) {
  /* qui .btn--primary e' gia' ridefinito sopra: senza questa riga l'hover
     della sezione 3 perderebbe per ordine di cascata e il bottone sembrerebbe morto */
  .order__where-cta .btn--primary:hover {
    background: linear-gradient(180deg, var(--rosso) 0%, var(--rosso-scuro) 100%);
    box-shadow: 0 12px 26px rgba(233,43,46,.45);
  }
  .order__where-cta .btn--soft:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.5); }
}

/* entrata in scena: titolo, poi le opzioni una dopo l'altra */
@media (prefers-reduced-motion: no-preference) {
  .appbar__eyebrow,
  .appbar__title,
  .appbar__sub,
  .order > * { animation: rise-in .55s var(--ease) backwards; }
  .appbar__eyebrow { animation-delay: .02s; }
  .appbar__title   { animation-delay: .07s; }
  .appbar__sub     { animation-delay: .12s; }
  .order > *:nth-child(1) { animation-delay: .12s; }
  .order > *:nth-child(2) { animation-delay: .17s; }
  .order > *:nth-child(3) { animation-delay: .22s; }
  .order > *:nth-child(4) { animation-delay: .27s; }
  .order > *:nth-child(5) { animation-delay: .32s; }
  .order > *:nth-child(6) { animation-delay: .37s; }
}


/* ---------- 6b. MODALE (base condivisa: store + categorie) ---------- */
.modal {
  width: min(100% - 32px, 420px);
  max-height: calc(100dvh - 48px);
  padding: 0;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal::backdrop {
  background: rgba(17,18,20,.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* la pagina dietro non scorre: la classe la mette js/app.js */
.has-modal, .has-modal body { overflow: hidden; }

.modal__box {
  max-height: calc(100dvh - 48px);
  padding: 22px;
  overflow-y: auto;
}

.modal__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.modal__title {
  font-family: var(--font-head);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.025em;
}
.modal__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, transform .16s var(--ease);
}
.modal__close:active { transform: scale(.92); }
@media (hover: hover) {
  .modal__close:hover { background: #eceef2; color: var(--ink); }
}

.modal__sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: .92rem;
}

.modal__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}
/* dentro al modale le righe sono gia' su un pannello: niente ombra, solo il pieno */
.modal__list .opt {
  background: var(--bg);
  border-color: transparent;
  box-shadow: none;
}
@media (hover: hover) {
  .modal__list .opt:hover { background: var(--card); box-shadow: var(--shadow-sm); }
}

/* il marchio Play e' a quattro colori: sotto ci vuole una piastrella bianca,
   altrimenti i colori non si leggono */
.opt--android .opt__icon {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(17,18,20,.10);
}
.opt--android .opt__icon .ico { width: 28px; height: 28px; }
.opt--ios .opt__icon {
  background: linear-gradient(145deg, #40434b, #111214);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(17,18,20,.28);
}

/* elenco categorie: due colonne dove ci stanno, una sola su schermi stretti */
.catlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-top: 16px;
}
.catlist__item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: .9rem;
  transition: background-color .16s ease, color .16s ease;
}
.catlist__item:active { background: #e6e8ec; }
.catlist__ico { font-size: 1.05rem; line-height: 1; flex: none; }
.catlist__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.catlist__n {
  margin-left: auto;
  flex: none;
  font-size: .75rem;
  color: var(--muted);
}
.catlist__item[aria-current] {
  background: var(--ink);
  color: #fff;
}
.catlist__item[aria-current] .catlist__n { color: rgba(255,255,255,.6); }
@media (hover: hover) {
  .catlist__item:hover { background: #e6e8ec; color: var(--ink); }
  .catlist__item[aria-current]:hover { background: var(--ink); color: #fff; }
}

.modal__alt {
  display: block;
  margin-top: 16px;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (hover: hover) {
  .modal__alt:hover { color: var(--ink); }
}

@media (prefers-reduced-motion: no-preference) {
  .modal[open]           { animation: modal-in .28s var(--ease); }
  .modal[open]::backdrop { animation: fade-in .28s ease; }
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}