/* ==========================================================================
   Al's Burgers & Beers — pagina MENÙ (la carta completa)
   Si appoggia al sistema di style.css: token, .dish, .menu-cat, .ticket, .ph-slot,
   .divider, .orari-riga, bottoni. Qui c'è solo quello che serve alla carta.
   ========================================================================== */

/* --testo-tenue e --arancio-testo (testi piccoli AA sulla carta) e i bottoni
   dell'apertura che vanno a capo stanno nel sistema, style.css */

/* anello di fuoco scuro sulla carta crema: l'arancio del sistema sul crema sta a 2,1:1 */
.carta-crema :focus-visible,
.carta-indice:not(.is-attaccata) :focus-visible { outline-color: var(--bruno-900); }

/* ==========================================================================
   APERTURA — lo scontrino dei più ordinati
   ========================================================================== */
/* a filo del margine destro, come la polaroid di /il-locale e il biglietto di /contatti */
.apertura-lato { display: flex; justify-content: flex-end; }

.scontrino {
  width: min(100%, 340px);
  /* l'inclinazione sta qui e non su .apertura-lato, che è animato da GSAP */
  transform: rotate(2.4deg);
  /* ombra col filter: segue i dentini, un box-shadow verrebbe tagliato dalla maschera */
  filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .42));
}
.scontrino-carta {
  --dente: 14px;
  background: #FBF6E9;
  color: var(--bruno-900);
  padding: calc(var(--dente) + 18px) clamp(20px, 2.4vw, 28px) calc(var(--dente) + 16px);
  font-variant-numeric: tabular-nums;
  /* carta strappata sopra e sotto: due file di dentini a 90° */
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--dente) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--dente) 51% repeat-x;
          mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--dente) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--dente) 51% repeat-x;
}

.scontrino-testa {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1;
  text-align: center;
}
.scontrino-testa span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: .68rem;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--arancio-testo);
}
.scontrino-indirizzo {
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.scontrino-intestazione {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 2px dashed rgba(31, 21, 12, .3);
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.scontrino-intestazione span + span { color: var(--testo-tenue); letter-spacing: .12em; }

.scontrino-voci { list-style: none; margin-top: 4px; }
.scontrino-voci li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  align-items: baseline;
  padding: 12px 0;
}
.scontrino-voci li + li { border-top: 1px dotted rgba(31, 21, 12, .35); }
.sc-qta { font-weight: 700; font-size: .9rem; color: var(--testo-tenue); }
.sc-nome { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.1; }
.sc-prezzo { font-weight: 800; font-size: 1.2rem; color: var(--arancio-scuro); }
.sc-nota {
  grid-column: 2 / -1;
  margin-top: 3px;
  font-size: .86rem;
  line-height: 1.35;
  color: var(--testo-tenue);
}
.scontrino-piede {
  padding-top: 14px;
  border-top: 2px dashed rgba(31, 21, 12, .3);
  text-align: center;
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* ==========================================================================
   LA CARTA — contenitore dell'indice attaccato e delle categorie
   ========================================================================== */
.carta {
  /* altezza dell'indice: le ancore atterrano sotto testata + indice */
  --indice-h: 64px;
}
/* ogni ancora atterra sotto l'indice (lo scroll-padding di html copre già la testata) */
.carta [id] { scroll-margin-top: var(--indice-h); }

/* la sentinella dice quando l'indice si è attaccato (js/menu.js) */
.carta-sentinella { height: 1px; margin-bottom: -1px; }

/* ---------- Indice delle categorie ---------- */
.carta-indice {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  background: var(--crema-carta);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.carta-indice ul {
  position: relative; /* offsetLeft delle voci misurato sulla striscia */
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: var(--container);
  min-height: var(--indice-h);
  margin-inline: auto;
  padding: 10px clamp(20px, 4vw, 40px);
  /* da telefono la striscia scorre: lo snap tiene conto dello stesso margine del contenuto */
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: clamp(20px, 4vw, 40px);
  scrollbar-width: none;
}
.carta-indice ul::-webkit-scrollbar { display: none; }
.carta-indice li { flex: 0 0 auto; }
.carta-indice a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid rgba(31, 21, 12, .24);
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--bruno-900);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.carta-indice a:active { transform: scale(.97); }
.carta-indice a.is-attiva {
  background: var(--arancio);
  border-color: var(--arancio);
  color: var(--bruno-950);
}
@media (hover: hover) {
  .carta-indice a:hover { border-color: var(--bruno-900); }
  .carta-indice a.is-attiva:hover { border-color: var(--arancio-scuro); }
}

/* attaccata sotto la testata: stesso colore della testata scura, un corpo solo; ma OPACO,
   sennò i titoli che ci scorrono sotto si leggono in trasparenza dentro la striscia */
.carta-indice.is-attaccata {
  background: var(--bruno-950);
  box-shadow: 0 1px 0 rgba(233, 215, 175, .09), 0 12px 24px rgba(0, 0, 0, .3);
}
.carta-indice.is-attaccata a { color: var(--crema-chiara); border-color: rgba(233, 215, 175, .24); }
.carta-indice.is-attaccata a.is-attiva { color: var(--bruno-950); border-color: var(--arancio); }
@media (hover: hover) {
  .carta-indice.is-attaccata a:hover { border-color: var(--crema); }
  .carta-indice.is-attaccata a.is-attiva:hover { border-color: var(--arancio-vivo); }
}

/* ==========================================================================
   Sezioni crema e scure — comuni
   ========================================================================== */
.carta-crema { background: var(--crema-carta); color: var(--bruno-900); }
.carta-crema .eyebrow { color: var(--arancio-testo); }
.carta-crema .section-intro { color: var(--testo-tenue); }
.carta-crema .dish-desc { color: var(--testo-tenue); }
/* niente parola sola sull'ultima riga delle descrizioni ("croccante.", "Al's.") */
.carta .dish-desc, .stella-desc { text-wrap: pretty; }
.carta-crema .ph-slot {
  border-color: rgba(31, 21, 12, .32);
  background: rgba(31, 21, 12, .04);
  color: var(--testo-tenue);
}
.carta-crema .ph-label { color: var(--bruno-900); }

/* pillole piccole: peso, pezzi, cottura */
.etichette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.etichette li {
  padding: 5px 11px 4px;
  border: 1.5px solid rgba(31, 21, 12, .28);
  border-radius: 999px;
  font-weight: 700;
  font-size: .74rem;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}

/* il bollino arancio dei dati di Glovo */
.bollino {
  display: inline-block;
  padding: 5px 12px 4px;
  border-radius: 999px;
  background: var(--arancio);
  color: var(--bruno-950);
  font-weight: 800;
  font-size: .74rem;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}

/* ==========================================================================
   SMASH — le due star, ognuna con la sua polaroid, a lati alterni
   ========================================================================== */
.carta-smash { padding-top: clamp(32px, 5vw, 60px); }
.carta-smash > .container { padding-bottom: clamp(56px, 8vw, 88px); }

.stella {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "foto testo";
  column-gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.stella--joe {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "testo foto";
}
.stella-testo { grid-area: testo; min-width: 0; }
.stella + .stella {
  margin-top: clamp(44px, 6vw, 72px);
  padding-top: clamp(44px, 6vw, 72px);
  border-top: 2px dashed rgba(31, 21, 12, .22);
}

/* la polaroid: l'inclinazione su una variabile che il reveal rispetta (come i .ticket) */
.foto-polaroid {
  grid-area: foto;
  --rapporto: 5 / 4;
  --tilt: rotate(-1.8deg);
  background: #FBF6E9;
  padding: 14px 14px 12px;
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(31, 21, 12, .2);
  transform: var(--tilt);
}
.stella--joe .foto-polaroid { --tilt: rotate(1.6deg); }
html.anim .foto-polaroid.reveal { transform: translateY(26px) var(--tilt); }
html.anim .foto-polaroid.reveal.is-in { transform: var(--tilt); }
.foto-polaroid .foto-segnaposto { border-radius: 4px; }
.foto-polaroid figcaption {
  padding-top: 12px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: center;
  color: var(--bruno-900);
}

.stella-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin-top: 14px;
}
.stella-nome {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.2vw, 3.7rem);
  line-height: 1;
  letter-spacing: .005em;
}
.stella-testa .dots { min-width: 32px; transform: translateY(-8px); }
.stella-prezzo {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.8vw, 2.6rem);
  line-height: 1;
  color: var(--arancio-scuro);
  white-space: nowrap;
}
.stella-desc {
  margin-top: 14px;
  max-width: 48ch;
  font-size: clamp(1.05rem, 1.5vw, 1.15rem);
  color: var(--bruno-750);
}

/* la variante, come un tagliando da staccare */
.stella-variante {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 2px dashed rgba(185, 106, 21, .6);
  border-radius: 10px;
  background: rgba(230, 138, 46, .1);
}
.var-cosa { font-weight: 700; }
.var-piu { font-family: var(--font-display); font-size: 1.15rem; color: var(--arancio-testo); }
.var-totale { font-weight: 600; color: var(--testo-tenue); }
.var-totale strong { color: var(--bruno-900); font-weight: 800; }

/* il componente delle foto dei prodotti (segnaposto a formato fisso e riga prodotto con foto)
   sta nel sistema, style.css: lo usa anche il menù della home */

/* ---------- Burger ---------- */
.carta-burger { padding-top: 0; }
.carta-burger > .container { padding-bottom: clamp(64px, 10vw, 110px); }

.prodotti--burger {
  --foto-w: clamp(112px, 12vw, 160px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 44px) clamp(36px, 5vw, 72px);
}
.prodotti--burger .prodotto {
  padding-top: 22px;
  border-top: 2px dashed rgba(31, 21, 12, .22);
}
.carta-burger .dish-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: .01em;
}
.carta-burger .dish-price { font-size: 1.3rem; }
.carta-burger .dish-desc { margin-top: 8px; font-size: 1.02rem; max-width: 46ch; }
.voce-extra {
  margin-top: 12px;
  font-size: .98rem;
  color: var(--bruno-750);
  text-wrap: pretty;
}
.voce-extra strong { font-weight: 800; color: var(--arancio-testo); }
.voce-extra .voce-extra-tit { font-weight: 700; color: var(--bruno-900); }

.carta-avviso {
  margin-top: clamp(40px, 6vw, 60px);
  padding: 16px 22px;
  border: 2px dashed rgba(31, 21, 12, .25);
  border-radius: 12px;
  text-align: center;
  font-size: 1.04rem;
  color: var(--bruno-900);
  text-wrap: balance;
}
.carta-avviso strong { font-weight: 800; color: var(--arancio-testo); }
.carta-avviso a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
  font-weight: 700;
  color: var(--bruno-900);
  text-decoration-color: var(--arancio);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.carta-avviso a:hover { color: var(--arancio-testo); }

/* ==========================================================================
   FRITTI + DA BERE — regione scura
   ========================================================================== */
.carta-scura {
  background: var(--bruno-900);
  padding-top: clamp(48px, 8vw, 90px);
}
.scura-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(48px, 7vw, 96px);
  align-items: start;
  padding-bottom: clamp(64px, 10vw, 110px);
}
.carta-scura .section-head { margin-bottom: clamp(28px, 4vw, 44px); }

.prodotti--piccoli { --foto-w: clamp(88px, 8.4vw, 112px); }
.prodotti--piccoli > li + li {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed rgba(233, 215, 175, .16);
}
/* segnaposto sul fondo scuro */
.carta-scura .foto-segnaposto {
  border-color: rgba(233, 215, 175, .32);
  background: rgba(233, 215, 175, .05);
  color: var(--tan);
}
.carta-scura .foto-segnaposto .ph-label { color: var(--crema-chiara); }

/* sotto le lattine: le birre degli adesivi in vetrina (la colonna è più corta dei fritti) */
.bere-nota {
  margin-top: clamp(32px, 4vw, 44px);
  padding: 20px 22px;
  border: 2px dashed rgba(233, 215, 175, .22);
  border-radius: 12px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--tan);
  text-wrap: pretty;
}
.bere-nota-tit {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--crema);
}
.carta-scura .dots { border-bottom-color: rgba(233, 215, 175, .32); }
.carta-scura .dish-name { color: var(--crema); font-size: 1.2rem; }
.carta-scura .dish-price { color: var(--arancio-vivo); font-size: 1.2rem; }
.carta-scura .dish-desc { color: var(--tan); }
.carta-scura .etichette { margin-top: 10px; }
.carta-scura .etichette li { border-color: rgba(233, 215, 175, .3); color: var(--tan); }
.carta-scura .bollino { margin-bottom: 10px; }

/* ==========================================================================
   SU MISURA — aggiunte, cottura, dolce, allergeni
   ========================================================================== */
.carta-misura { padding-top: clamp(48px, 8vw, 90px); }
.misura-griglia {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(44px, 6vw, 88px);
  align-items: start;
  padding-bottom: clamp(64px, 10vw, 110px);
}
.misura-griglia .menu-cat { margin-bottom: 6px; }

.aggiunte > li {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px dashed rgba(31, 21, 12, .24);
}
.aggiunta-prezzo {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--arancio-testo);
  white-space: nowrap;
}
.aggiunta-cosa { font-weight: 700; font-size: 1.1rem; line-height: 1.35; }
.aggiunta-su { grid-column: 2; margin-top: 2px; font-size: .96rem; line-height: 1.45; color: var(--testo-tenue); }
.misura-nota { margin-top: 18px; font-size: 1rem; color: var(--bruno-750); max-width: 52ch; }
.misura-nota strong { font-weight: 700; color: var(--bruno-900); }

/* la cottura come una scala: vuoto, mezzo, pieno */
.cottura-scala {
  position: relative;
  display: flex;
  margin-top: 22px;
}
.cottura-scala::before {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  border-top: 2px solid var(--bruno-900);
}
.cottura-scala li {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}
.cottura-scala li::before {
  content: "";
  width: 22px;
  height: 22px;
  border: 2px solid var(--bruno-900);
  border-radius: 50%;
  background: var(--crema-carta);
}
.cottura-scala li:nth-child(2)::before { background: linear-gradient(90deg, var(--bruno-900) 50%, var(--crema-carta) 50%); }
.cottura-scala li:nth-child(3)::before { background: var(--bruno-900); }
.cottura-su { margin-top: 16px; font-size: 1rem; color: var(--bruno-750); }
.cottura-su strong { font-weight: 700; color: var(--bruno-900); }

/* il dolce è un biglietto dorato, come i format della home; fori color carta */
.misura-dolce { margin-top: clamp(36px, 5vw, 52px); }
.carta-crema .ticket { box-shadow: 0 14px 28px rgba(31, 21, 12, .2); }
.carta-crema .ticket:hover { box-shadow: 0 20px 34px rgba(31, 21, 12, .24); }
.carta-crema .ticket::before,
.carta-crema .ticket::after { background: var(--crema-carta); }

.misura-allergeni {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 40px);
  font-size: 1.02rem;
  color: var(--bruno-750);
}
.misura-allergeni strong { font-weight: 800; color: var(--bruno-900); }
/* da dove vengono i prezzi: allineata al testo degli allergeni (segno 34px + 14px di spazio) */
.misura-prezzi {
  margin-top: 14px;
  padding-left: 48px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--testo-tenue);
  max-width: 52ch;
}
.allergeni-segno {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--arancio-scuro);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  color: var(--arancio-scuro);
}

/* ==========================================================================
   CHIUSURA — "Hai scelto?" dentro il panino
   ========================================================================== */
.carta-chiusura {
  /* bruno-950, come l'ultima sezione di home, /il-locale e /contatti: tutte le pagine
     arrivano al piede dallo stesso fondo (il filetto del piede fa da giunzione) */
  background: var(--bruno-950);
  padding-top: clamp(48px, 8vw, 90px);
}
.chiusura-griglia {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  padding-bottom: clamp(64px, 10vw, 110px);
}
.chiusura-panino {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.panino-su { width: clamp(180px, 24vw, 290px); }
.chiusura-titolo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 5.6vw, 4.3rem);
  line-height: .9;
  color: var(--crema);
  margin: clamp(2px, .5vw, 6px) 0 clamp(4px, .6vw, 8px);
}
.chiusura-titolo em { font-style: normal; color: var(--arancio); }
.panino-giu { width: clamp(200px, 27vw, 320px); }

.chiusura-testo > p:first-child { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--tan); max-width: 46ch; }
.chiusura-azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.chiusura-orari { margin-top: 32px; } /* titolo "Orari" dal sistema (.dove-orari h3) */
.chiusura-orari .orari-riga { max-width: 380px; }
.chiusura-link { margin-top: 22px; }
.chiusura-link a {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
  font-weight: 700;
  color: var(--crema-chiara);
  text-decoration-color: var(--arancio);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.chiusura-link a:hover { color: var(--arancio-vivo); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 880px) {
  .apertura-lato { justify-content: flex-start; padding-left: 6px; }

  .prodotti--burger,
  .scura-griglia,
  .misura-griglia,
  .chiusura-griglia { grid-template-columns: minmax(0, 1fr); }
  /* in colonna "Da bere" arriva dopo i fritti: con 48px di stacco, lo stesso spazio che c'è
     fra due voci, il cambio di categoria non si leggeva */
  .scura-griglia { row-gap: clamp(64px, 12vw, 88px); }

  .chiusura-testo { text-align: center; }
  .chiusura-testo > p:first-child { margin-inline: auto; }
  .chiusura-azioni { justify-content: center; }
  .chiusura-orari .orari-riga { margin-inline: auto; text-align: left; }
  .chiusura-orari .orari-nota { margin-inline: auto; }
}

/* sotto i 680px le due star vanno in colonna: prima la foto, poi il testo; le polaroid
   restano a lati alterni (Durden a sinistra, Joe a destra) come da computer */
@media (max-width: 679px) {
  .stella,
  .stella--joe {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "foto" "testo";
    row-gap: clamp(24px, 6vw, 34px);
  }
  .foto-polaroid { width: min(100%, 440px); justify-self: start; }
  .stella--joe .foto-polaroid { justify-self: end; }
}

/* 680-799px: la colonna del testo della star è stretta e "11,99" andava a capo da solo sotto
   "Mr Durden", coi puntini appesi (misurato fino a 719px): meno aria fra nome, puntini e prezzo */
@media (min-width: 680px) and (max-width: 799px) {
  .stella-testa { column-gap: 10px; }
  .stella-testa .dots { min-width: 18px; }
}

/* tablet: a colonna unica il biglietto del dolce si stirerebbe su 700px con il testo
   fermo a 40ch; cottura e dolce si affiancano, gli allergeni vanno sotto a tutta riga */
@media (min-width: 600px) and (max-width: 880px) {
  .misura-lato {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(32px, 5vw, 48px);
    align-items: start;
  }
  .misura-dolce { margin-top: 12px; }
  .misura-allergeni,
  .misura-prezzi { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .apertura-lato { justify-content: center; padding-left: 0; }
  /* come il piede e la chiusura di /il-locale: da telefono i bottoni prendono tutta la riga */
  .chiusura-azioni .btn { flex: 1 1 100%; text-align: center; }
  .bollino { letter-spacing: .07em; }
  .carta-indice a { padding: 0 16px; font-size: .86rem; }
  .aggiunte > li { grid-template-columns: 4.4rem minmax(0, 1fr); column-gap: 12px; }
  .aggiunta-prezzo { font-size: 1.15rem; }
  .stella-variante { padding: 9px 14px; }
}

/* telefoni stretti: nome e prezzo della star scalano con la larghezza, così restano
   sulla stessa riga fino a 320px (misurato: "Mr Durden" è 6 em, "11,99" 2,7 em) */
@media (max-width: 400px) {
  .stella-testa { column-gap: 10px; }
  .stella-testa .dots { min-width: 20px; }
  .stella-nome { font-size: clamp(1.6rem, 8.8vw, 2.2rem); }
  .stella-prezzo { font-size: clamp(1.3rem, 7vw, 1.8rem); }
  /* foto accanto alla voce un po' più strette: al testo restano ~230px a 390; sotto i 390
     scalano con lo schermo (96 → 68px e 80 → 60px), sennò a 320 il prezzo usciva dalla colonna */
  .prodotti--burger { --foto-w: clamp(68px, 24.7vw, 96px); }
  .prodotti--piccoli { --foto-w: clamp(60px, 20.6vw, 80px); }
}

/* telefoni strettissimi (320 e pieghevoli da 280): nome, puntini e prezzo sulla stessa riga
   senza uscire dalla colonna ("Nanni's" e "Mozzastick" sono le parole più lunghe) */
@media (max-width: 359px) {
  .prodotto { column-gap: 12px; }
  .carta .prodotto .dish { gap: 8px; }
  .carta .prodotto .dots { min-width: 16px; }
  .carta-burger .dish-name { font-size: 1.3rem; }
  .carta-burger .dish-price { font-size: 1.15rem; }
  .carta-scura .dish-name { font-size: 1.08rem; }
  .carta-scura .dish-price { font-size: 1.08rem; }
  /* la star: a 280-290px "11,99" andava a capo sotto "Mr Durden" */
  .stella-testa { column-gap: 8px; }
  .stella-testa .dots { min-width: 12px; }
  .stella-nome { font-size: clamp(1.45rem, 8.8vw, 2.2rem); }
}

/* telefoni stretti: i bottoni dell'apertura a tutta riga (come /il-locale e /contatti) */
/* viewport bassi (telefono girato): l'indice non si attacca, sennò testata + indice
   si mangiano più di un terzo dello schermo */
@media (max-height: 500px) {
  .carta { --indice-h: 0px; }
  .carta-indice { position: static; }
}