@media (min-width: 760px) {
  :root { --header-h: 72px; }
  body { padding-bottom: 0; }
  .header__brand { font-size: 1.6rem; }
  .cta-finale { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr); align-items: end; gap: 44px; padding: 96px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
  .cta-finale__azioni { justify-content: flex-end; }
  .footer { grid-template-columns: 1fr 1fr; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-bottom: 56px; }
  .footer__note { text-align: right; }
  .azioni-mobile { display: none; }
  .header__prenota { display: inline-flex; }
  .pagina-menu { padding-bottom: 0; }
  .menu-apertura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); gap: clamp(40px, 7vw, 100px); align-items: end; padding-top: 64px; padding-bottom: 64px; }
  .menu-apertura__brand { margin-top: 0; }
  .menu-diete { grid-template-columns: .8fr 1.2fr; gap: 64px; }
  .torna-su { bottom: 24px; }
}

@media (min-width: 1080px) {
  .nav__toggle { display: none; }
  .nav { position: static; inset: auto; margin-left: auto; padding: 0; display: flex; flex-direction: row; align-items: center; gap: 20px; visibility: visible; opacity: 1; transform: none; background: transparent; transition: none; }
  .nav a { min-height: 44px; border: 0; font-family: var(--font-testo); font-size: .76rem; font-weight: 750; white-space: nowrap; }
  .nav__prenota { padding: 0 16px; background: var(--inchiostro); color: var(--carta) !important; }
}

/* Sotto i 760px cinque bandierine da 44px non stanno in riga col nome e il menu:
   DE ed ES finivano fuori schermo e non si potevano toccare. Il selettore passa
   su una seconda riga bassa, e --header-h cresce di conseguenza, altrimenti il
   pannello di navigazione e la prima schermata partirebbero sotto l'intestazione. */
@media (max-width: 759px) {
  :root { --header-h: 88px; }
  .header__inner { flex-wrap: wrap; align-content: center; padding-top: 2px; padding-bottom: 2px; }
  .header__brand, .nav__toggle, .ritorno, .header__prenota { align-self: center; }
  .selettore-lingua { order: 3; width: 100%; margin-left: 0; justify-content: flex-end; gap: 0;
    border-top: 1px solid color-mix(in oklch, var(--greige) 30%, transparent); }
  .selettore-lingua button { min-width: 44px; min-height: 36px; font-size: .72rem; }
}

@media (max-width: 420px) {
  .header--menu .header__brand { font-size: 1.2rem; }
  .header--menu .ritorno { font-size: .72rem; }
  .piatto__riga { grid-template-columns: minmax(0, 1fr) auto; }
  .piatto__dots { display: none; }
  .piatto__nome { padding-right: 8px; }
}
