/* Il menu. Si legge in piedi, con una mano sola, al sole, in tre secondi.
   Da qui viene tutto il resto: niente stile a fare il lavoro della grandezza,
   righe alte invece di mattonelle strette, prezzi che non si cercano.
   Le misure vengono da strumenti/controlla-leggibilita.mjs, non dall'occhio. */

.pagina-menu { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }

/* ── l'insegna: verde scuro, e scorre via ── */
.insegna {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) var(--gutter) 13px;
  background: linear-gradient(170deg, var(--verde-medio), var(--verde));
}
.marchio { display: flex; align-items: center; gap: 11px; margin: 0 auto; }
.marchio img { height: 32px; width: auto; }
.marchio span {
  font-size: 1.2rem; font-weight: 800; letter-spacing: .26em;
  color: var(--oro-chiaro); text-indent: .26em;
}

.tondo {
  flex: none; width: var(--dito); height: var(--dito); min-height: var(--dito);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--carta-alta); border: 1px solid var(--riga);
  color: var(--verde); font-size: .84rem; font-weight: 800; letter-spacing: .04em;
  box-shadow: var(--ombra);
}
.tondo svg { width: 22px; height: 22px; fill: none; stroke: var(--verde); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tondo-chiaro { background: rgba(255,255,255,.14); border-color: rgba(224,206,133,.45); box-shadow: none; }
.tondo-chiaro svg { stroke: var(--oro-chiaro); }
.tondo-vuoto { visibility: hidden; }   /* tiene il marchio davvero al centro */

/* ── la barra che resta: ricerca e reparti ── */
.testa {
  position: sticky; top: 0; z-index: 30;
  padding: 10px var(--gutter) 0;
  background: rgba(247, 244, 234, .95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--riga);
}
/* ── la ricerca, che compare ── */
/* ⚠️ Serve DAVVERO: «display:flex» su una classe batte il display:none che il
   browser da' all'attributo hidden, e la ricerca si apriva gia' da sola al
   primo caricamento. Un attributo hidden che non nasconde e' peggio che non
   averlo. */
.cerca-aperta[hidden] { display: none; }
.cerca-aperta {
  display: flex; align-items: center; gap: 9px; padding-bottom: 2px;
  animation: apri-cerca .26s cubic-bezier(.2, .9, .3, 1);
}
@keyframes apri-cerca {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.campo-cerca { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.lente {
  position: absolute; left: 15px; width: 19px; height: 19px;
  fill: none; stroke: var(--verde-tenue); stroke-width: 2; pointer-events: none;
}
#cerca {
  width: 100%; min-height: var(--dito); padding: 11px 42px 11px 44px; border-radius: 999px;
  background: var(--carta-alta); border: 2px solid var(--oro);
  color: var(--verde); font: inherit;
  /* ⚠️ 16px esatti, non uno in meno: sotto i 16px Safari su iPhone INGRANDISCE
     la pagina da solo appena tocchi il campo, e il cliente si ritrova il menu
     sformato senza capire perche'. */
  font-size: 16px;
  -webkit-appearance: none;
}
#cerca::placeholder { color: var(--verde-tenue); opacity: .9; }
#cerca:focus { outline: none; box-shadow: 0 0 0 4px rgba(183,154,63,.22); }
.pulisci {
  position: absolute; right: 9px; width: 32px; height: 32px; min-height: 32px;
  border: 0; border-radius: 50%; background: none; color: var(--verde-tenue); font-size: 1.5rem; line-height: 1;
}
.chiudi-cerca {
  flex: none; width: var(--dito); height: var(--dito); min-height: var(--dito);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--carta-alta); border: 1px solid var(--riga);
}
.chiudi-cerca svg { width: 20px; height: 20px; fill: none; stroke: var(--verde); stroke-width: 2.4; stroke-linecap: round; }

/* ── il quadro delle categorie ──
   Otto mattonelle 4x2: la ricerca e le sette macro. Sempre tutte in vista:
   non si scorre di lato per scoprire che esistono le birre. */
.quadro {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  padding: 9px 0 11px;
}
@media (min-width: 620px) { .quadro { grid-template-columns: repeat(8, 1fr); gap: 10px; } }

.mattonella {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  padding: 7px 3px 6px; border-radius: 15px; min-height: 76px;
  background: var(--carta-alta); border: 1px solid var(--riga);
  color: var(--verde); text-decoration: none;
  transition: background .25s, border-color .25s, color .25s, transform .15s;
}
.mattonella:active { transform: scale(.95); }
.disegno { width: 44px; height: 44px; flex: none; transition: transform .25s; }
.nome-m {
  font-size: 11px; font-weight: 700; line-height: 1.16; text-align: center;
  letter-spacing: .01em; hyphens: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* accesa: verde pieno e un filo d'oro attorno */
.mattonella[aria-current="true"] {
  background: var(--verde); border-color: var(--verde); color: var(--carta);
  box-shadow: 0 0 0 2px rgba(183,154,63,.55), var(--ombra);
}
.mattonella[aria-current="true"] .disegno { transform: scale(1.06); }

/* ⚠️ L'onda parte dal punto TOCCATO (--x/--y li mette il codice): un'onda che
   parte sempre dal centro si sente finta, e questa deve sembrare che risponda
   al dito. */
.mattonella.scocca::after {
  content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: radial-gradient(circle, rgba(183,154,63,.55), rgba(183,154,63,0) 70%);
  animation: onda .65s cubic-bezier(.2, .8, .3, 1) forwards; pointer-events: none;
}
@keyframes onda {
  from { transform: scale(1); opacity: .95; }
  to   { transform: scale(22); opacity: 0; }
}

/* ── il corpo ── */
.corpo { padding: 0 var(--gutter); max-width: 70rem; margin: 0 auto; }

.reparto {
  position: relative;
  scroll-margin-top: calc(var(--testa-h, 172px) + 12px);
  padding-top: 2.2rem;
}

/* ── «ti ho portato qui» ──────────────────────────────────────────────────
   Dopo un salto il cliente deve capire DOVE e' finito, o pensa che il tocco
   non abbia fatto niente. Tre cose insieme per due secondi e mezzo: un velo
   d'oro che si spegne, una riga che scandisce il reparto dall'alto in basso,
   e il titolo che entra da destra. Poi sparisce tutto e resta il menu. */
.reparto.acceso { animation: accendi 2.5s ease-out; border-radius: var(--raggio); }
@keyframes accendi {
  0%   { background: rgba(183,154,63,.30); }
  22%  { background: rgba(183,154,63,.20); }
  100% { background: rgba(183,154,63,0); }
}
.reparto.acceso::before {
  content: ""; position: absolute; left: -10px; right: -10px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--oro), transparent);
  animation: scansione 1s cubic-bezier(.3, .7, .4, 1) forwards; pointer-events: none;
}
@keyframes scansione {
  from { top: 4%;  opacity: 1; }
  to   { top: 99%; opacity: 0; }
}
.reparto.acceso .titolo-reparto h2 { animation: entra-titolo 2.5s cubic-bezier(.2, .9, .3, 1); }
@keyframes entra-titolo {
  0%   { transform: translateX(10px); color: var(--oro-scuro); }
  26%  { transform: none; }
  100% { color: var(--verde); }
}
.titolo-reparto { display: flex; align-items: center; gap: 12px; }
.titolo-reparto h2 {
  font-size: var(--t-reparto); font-weight: 800; margin: 0;
  text-transform: uppercase; letter-spacing: -.005em;
}
.titolo-reparto .icona { width: 26px; height: 26px; color: var(--oro); flex: none; }
.occhiello { color: var(--verde-tenue); font-size: var(--t-desc); font-weight: 500; margin: 3px 0 0; }
.spiegazione {
  margin: 13px 0 0; padding: 13px 16px; border-radius: var(--raggio-s);
  background: var(--sabbia); border: 1px solid var(--riga);
  font-size: var(--t-desc); color: var(--verde);
}
/* La nota del padrone di casa, con la sua freccina disegnata. */
.nota-mano { position: relative; margin: 13px 0 0; padding-left: 34px; }
.nota-mano::before {
  content: ""; position: absolute; left: 4px; top: 1px; width: 20px; height: 22px;
  background: no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22' fill='none' stroke='%237A631F' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 1c6 2 9 6 9 12'/%3E%3Cpath d='M8 11l4 2 3-4'/%3E%3C/svg%3E");
}

/* ── il cibo: righe alte, non mattonelle strette ──
   Due colonne su un telefono da 390px vuol dire 180px per piatto: nome a
   quattro righe e prezzo minuscolo. Una riga alta con l'immagine a sinistra
   tiene l'immagine GRANDE e il testo grande insieme. Le colonne tornano dove
   c'e' spazio vero. */
.griglia { display: grid; grid-template-columns: 1fr; gap: 11px; margin-top: 16px; }
@media (min-width: 720px)  { .griglia { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 1080px) { .griglia { grid-template-columns: repeat(3, 1fr); } }

.piatto-carta {
  display: flex; align-items: stretch; text-align: left; gap: 0;
  background: var(--carta-alta); border: 1px solid var(--riga); border-radius: var(--raggio);
  overflow: hidden; color: var(--verde); padding: 0; box-shadow: var(--ombra);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.piatto-carta:active { transform: scale(.99); }
@media (hover: hover) { .piatto-carta:hover { border-color: var(--oro); box-shadow: var(--ombra-alta); } }

/* Il vassoio disegnato: sta al posto della foto finché non arriva quella vera.
   Non è un buco grigio — è un piatto con l'icona della voce. */
.vassoio {
  position: relative; flex: none; width: 38%; max-width: 168px; min-width: 122px;
  display: grid; place-items: center; align-self: stretch;
  /* --giro e --altoX/Y arrivano dal codice della voce: ogni vassoio è un po'
     diverso dal vicino senza che nessuno debba sceglierlo a mano. */
  background:
    radial-gradient(circle at var(--altoX, 50%) var(--altoY, 42%), rgba(255,255,255,.8), transparent 62%),
    linear-gradient(var(--giro, 160deg), var(--sabbia), #DCCEB0);
  border-right: 1px solid var(--riga);
}
.vassoio .icona { width: 46%; max-width: 62px; height: auto; aspect-ratio: 1; color: var(--oro-scuro); opacity: .9; }
.vassoio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.carta-corpo { padding: 14px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.piatto-nome {
  font-size: var(--t-nome); font-weight: 700; line-height: 1.24; color: var(--verde);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.piatto-desc {
  font-size: var(--t-desc); line-height: 1.45; color: var(--verde-tenue);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Il prezzo si trova senza cercarlo: in fondo a destra, sempre nello stesso
   posto, grande come il nome. */
.piatto-prezzo {
  margin-top: auto; padding-top: 8px; color: var(--verde);
  font-weight: 800; font-size: var(--t-prezzo);
}
.piatto-prezzo .da { font-weight: 500; font-size: var(--t-micro); color: var(--verde-tenue); margin-right: 4px; text-transform: uppercase; letter-spacing: .1em; }

/* ── le bevande: elenco coi puntini, dentro un foglio ── */
.elenco {
  margin-top: 16px; display: flex; flex-direction: column;
  background: var(--carta-alta); border: 1px solid var(--riga);
  border-radius: var(--raggio); padding: 2px 16px; box-shadow: var(--ombra);
}
.piatto-riga {
  display: block; width: 100%; text-align: left; color: var(--verde);
  background: none; border: 0; border-bottom: 1px solid var(--riga);
  padding: 15px 0;
}
.piatto-riga:last-child { border-bottom: 0; }
.riga-cima { display: flex; align-items: baseline; gap: 10px; }
.riga-nome { font-size: 18px; font-weight: 700; line-height: 1.3; }
.puntini { flex: 1; border-bottom: 2px dotted rgba(122, 99, 31, .38); transform: translateY(-5px); min-width: 16px; }
.riga-prezzo { font-size: 18px; font-weight: 800; white-space: nowrap; }
.riga-desc { font-size: var(--t-desc); color: var(--verde-tenue); margin-top: 4px; line-height: 1.45; }
.misure { display: flex; gap: 18px; margin-top: 8px; flex-wrap: wrap; }
.misura { font-size: var(--t-desc); color: var(--verde-tenue); }
.misura b { color: var(--verde); font-weight: 800; margin-left: 6px; }

/* ── i bollini ── */
.bolli { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 1px; max-width: 100%; }
.bollo {
  font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; border: 1px solid;
  /* ⚠️ niente nowrap: in polacco «Nasza rekomendacja» usciva dalla carta. */
  max-width: 100%; line-height: 1.35; text-align: center;
}
.bollo-consiglio { color: var(--verde); background: rgba(183,154,63,.32); border-color: var(--oro); }
.bollo-locale { color: var(--verde-tenue); border-color: var(--salvia); background: rgba(138,166,142,.16); }

/* ── la scheda che sale dal basso ── */
.scheda {
  width: 100%; max-width: 34rem; margin: auto auto 0; padding: 0;
  border: 0; border-radius: var(--raggio) var(--raggio) 0 0;
  background: var(--carta-alta); color: var(--verde);
  max-height: 92svh; overflow: hidden; box-shadow: var(--ombra-alta);
  animation: sali .28s cubic-bezier(.2,.9,.3,1);
}
.scheda::backdrop { background: rgba(20, 54, 42, .5); backdrop-filter: blur(3px); }
.scheda-scorre { max-height: 92svh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.scheda-figura { position: relative; aspect-ratio: 16 / 10; }
.scheda-figura .vassoio { width: 100%; max-width: none; height: 100%; border-right: 0; border-bottom: 1px solid var(--riga); }
.scheda-figura .vassoio .icona { width: 24%; max-width: 104px; }
.scheda-chiudi {
  position: absolute; top: 12px; right: 12px; width: var(--dito); height: var(--dito); min-height: var(--dito);
  border-radius: 50%; border: 1px solid var(--riga); background: rgba(255,255,255,.94);
  color: var(--verde); font-size: 1.5rem; line-height: 1; backdrop-filter: blur(6px);
}
.scheda-dentro { padding: 20px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
.scheda-dentro h2 { font-size: clamp(24px, 6.4vw, 30px); margin-bottom: 8px; }
.scheda-desc { color: var(--verde-tenue); font-size: 16px; line-height: 1.58; }
.scheda-prezzo { margin: 15px 0; font-size: 30px; font-weight: 800; }
.scheda-nota { font-size: var(--t-desc); color: var(--verde-tenue); margin-top: 8px; }

.blocco { margin-top: 22px; }
.blocco-titolo {
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--oro-scuro); margin-bottom: 10px;
}
/* Le aggiunte: è qui che cresce lo scontrino, detto con gentilezza. */
.aggiunte { display: flex; gap: 8px; flex-wrap: wrap; }
.aggiunta {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--sabbia); border: 1px dashed var(--oro);
  font-size: 16px; font-weight: 500; color: var(--verde);
}
.aggiunta b { color: var(--oro-scuro); font-weight: 800; }

/* L'abbinamento: la spinta vera, e viene dal menu di carta, non da noi. */
.abbina {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 16px; border-radius: var(--raggio-s);
  background: rgba(138,166,142,.15); border: 1px solid var(--salvia);
  color: var(--verde);
}
.abbina .icona { width: 30px; height: 30px; color: var(--verde-tenue); flex: none; }
.abbina-testo { flex: 1; }
.abbina .freccia { color: var(--oro-scuro); font-size: 1.3rem; font-weight: 800; }

.niente { text-align: center; color: var(--verde-tenue); padding: 3.5rem 0; font-size: 17px; }
.niente b { color: var(--verde); font-weight: 700; }

.piede-menu { padding: 3rem var(--gutter) 0; text-align: center; max-width: 34rem; margin: 0 auto; }
.piede-menu p { color: var(--verde-tenue); font-size: var(--t-desc); }
.firma-piede { font-size: 17px; font-weight: 700; color: var(--oro-scuro); margin: .5rem 0 .8rem; }
.torna-regalo {
  display: inline-block; margin-top: 1.2rem; padding: 15px 28px; border-radius: 999px;
  background: var(--verde); color: var(--oro-chiaro); font-weight: 700; font-size: 17px;
  box-shadow: var(--ombra);
}