/* ==========================================================================
   Bivio Bistrot — stile
   Colori del logo: bordeaux Bivio su crema.
   Font, colori (design token) e reset minimo stanno in ../assets/base.css,
   in comune con il sito del locale e caricato prima di questo file.
   ========================================================================== */

/* ---------- Misure del menu ---------- */
:root {
  --nav-h: 96px; /* sovrascritta da script.js con l'altezza reale della nav */
  /* Posto del logo nell'intestazione: servono anche al sipario d'apertura, che fa partire il logo dal centro dello schermo */
  --header-pt: clamp(64px, 10vw, 96px);
  --logo-w: clamp(220px, 64vw, 380px);
}

/* Cormorant usa numeri "old-style": "Talisker 10" sembrerebbe "Talisker IO" */
.dish__name, .wine__name, .spirit__name, .category__title { font-variant-numeric: lining-nums; }
#top:focus, #menu:focus { outline: none; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-size: .875rem;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: relative; /* ancora per il selettore lingua */
  text-align: center;
  padding: var(--header-pt) var(--gutter) clamp(52px, 9vw, 80px); /* in alto c'è la barra, in basso c'è posto per l'onda */
  background: var(--brand-cream);
}
.site-header__overline {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 1rem;
  padding-left: .32em; /* compensa il letter-spacing per centrare otticamente */
}
.site-header__title { line-height: 0; }
.site-header__logo {
  width: var(--logo-w);
  height: auto;
  margin: 0 auto;
}
/* Barra in alto: pill di stato a sinistra; link rapidi e lingua a destra */
.site-header__bar {
  position: absolute;
  top: 12px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 36px;
}
/* Link rapidi Maps / WhatsApp / foto del locale: solo icona */
.site-header__actions {
  display: flex;
  flex: none;
  gap: .375rem;
  margin-left: auto;      /* staccati dalla pill di stato: stanno a destra */
  padding-left: .5rem;    /* distanza minima dalla pill quando la barra è piena (telefoni) */
}
.pill-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  text-decoration: none;
  transition: border-color .2s var(--ease);
}
.pill-link svg { flex: 0 0 auto; color: var(--accent); }
/* Solo icona: cerchio da 32px (il nome resta per gli screen reader) */
.pill-link--icona {
  position: relative;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}
.pill-link--icona svg { width: 18px; height: 18px; }
/* Area sensibile più grande del cerchio: 44px in altezza, e in larghezza fino a metà dello spazio tra un pulsante e l'altro */
.pill-link--icona::after,
.status-pill::after,
.lang-pill::after {
  content: "";
  position: absolute;
  inset: -4px -3px;
}
a.pill-link[href]:hover { border-color: var(--accent); }
.pill-link[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

/* Pill di stato (aperto/chiuso): prima voce della barra; se lo spazio non basta si restringe (testo con i puntini) */
.status-pill {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  position: relative; /* ancora per l'area sensibile (::after) */
  gap: .4rem;
  height: 36px;
  padding: 0 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: border-color .2s var(--ease);
}
.status-pill:hover, .status-pill.is-open { border-color: var(--accent); }
.status-pill[hidden] { display: none; }
.status-pill__dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}
.status-pill--open .status-pill__dot { background: #5E8B5A; }
.status-pill--closed .status-pill__dot { background: var(--brand); }
.status-pill__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* min-width: 0 = può restringersi nel flex */
.status-pill__chevron {
  flex: none;
  width: 12px;
  height: 12px;
  transition: transform .2s var(--ease);
}
.status-pill.is-open .status-pill__chevron { transform: rotate(180deg); }

/* Pannello orari a discesa sotto la pill (l'header è centrato: qui si torna a sinistra) */
.status-panel {
  position: absolute;
  top: 50px;
  left: var(--gutter);
  z-index: 20;
  max-width: calc(100% - 2 * var(--gutter));
  padding: .75rem 1rem;
  background: var(--bg); /* lo stesso fondo dell'area del menu, come il menu a tendina della lingua */
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(42, 18, 22, .12);
  text-align: left;
  transform-origin: top left; /* si apre dalla pillola */
  animation: tendina-in .3s ease-out both; /* stessa apertura del menu della lingua */
}
/* All'apertura (classe is-aprendo, messa da script.js solo in quel momento: il pannello viene ridisegnato ogni minuto
   e le righe non devono rianimarsi) titolo e righe scendono uno dopo l'altro. Le righe sono display: contents: si animano le celle. */
.status-panel.is-aprendo .status-panel__title,
.status-panel.is-aprendo .hours__row > * { animation: tendina-voce-in .22s ease-out both; }
.status-panel.is-aprendo .status-panel__title { animation-delay: .09s; }
.status-panel.is-aprendo .hours__row:nth-child(1) > * { animation-delay: .12s; }
.status-panel.is-aprendo .hours__row:nth-child(2) > * { animation-delay: .15s; }
.status-panel.is-aprendo .hours__row:nth-child(3) > * { animation-delay: .18s; }
.status-panel.is-aprendo .hours__row:nth-child(4) > * { animation-delay: .21s; }
.status-panel.is-aprendo .hours__row:nth-child(5) > * { animation-delay: .24s; }
.status-panel.is-aprendo .hours__row:nth-child(6) > * { animation-delay: .27s; }
.status-panel.is-aprendo .hours__row:nth-child(7) > * { animation-delay: .3s; }
.status-panel[hidden] { display: none; }
.status-panel__title {
  margin: 0 0 .4rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.status-panel .hours__list { margin: 0; justify-content: start; font-size: .8125rem; color: var(--muted); }
.status-panel .hours__row dt { text-align: left; }

/* Lingua: pillola gemella di quella degli orari (sigla della lingua attiva + freccina), in fondo alla barra;
   apre un menu a tendina con le lingue, allineato a destra */
.lang-menu {
  position: relative; /* ancora per il menu a tendina */
  flex: none;
  margin-left: .375rem;
}
.lang-pill {
  position: relative; /* ancora per l'area sensibile (::after) */
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 36px;
  padding: 0 .85rem;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  cursor: pointer;
  transition: border-color .2s var(--ease);
}
.lang-pill:hover, .lang-pill.is-open { border-color: var(--accent); }
.lang-pill.is-open .status-pill__chevron { transform: rotate(180deg); }
/* Easter egg (script.js: brindisi): la sigla diventa per un attimo «Cin cin», «Cheers»…; la freccina lascia il posto alla parola */
.lang-pill--brindisi { border-color: var(--accent); letter-spacing: .02em; }
.lang-pill.lang-pill--brindisi .status-pill__chevron { display: none; } /* più specifica della regola che la ridà tra 380 e 420px */
.lang-pill__code--brindisi { display: inline-block; animation: brindisi-in .32s ease-out both; }
@keyframes brindisi-in {
  0%   { opacity: 0; transform: translateY(6px) rotate(-8deg); }
  60%  { transform: translateY(-1px) rotate(3deg); } /* il bicchiere che si alza e tocca */
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lang-pill__code--brindisi { animation: none; }
}
.lang-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 9.5rem;
  padding: .35rem;
  background: var(--bg); /* lo stesso fondo dell'area del menu */
  border: 1px solid var(--line);
  border-radius: 22px; /* contiene voci a pillola */
  box-shadow: 0 8px 24px rgba(42, 18, 22, .12);
  transform-origin: top right; /* si apre dalla pillola */
  /* ease-out e mezzo secondo: con --ease (partenza molto rapida) il movimento finiva in un decimo di secondo e non si vedeva */
  animation: tendina-in .3s ease-out both;
}
.lang-panel[hidden] { display: none; }
/* Apertura dei due pannelli a tendina (lingua e orari): crescono dall'angolo della pillola, poi le voci scendono una dopo l'altra */
@keyframes tendina-in {
  0%   { opacity: 0; transform: translateY(-10px) scale(.45); }
  35%  { opacity: 1; }
  72%  { transform: scale(1.04); } /* supera di poco la misura finale, poi si assesta */
  100% { opacity: 1; transform: none; }
}
@keyframes tendina-voce-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.lang-panel__voce { animation: tendina-voce-in .22s ease-out both; }
.lang-panel__voce:nth-child(1) { animation-delay: .1s; }
.lang-panel__voce:nth-child(2) { animation-delay: .16s; }
.lang-panel__voce:nth-child(3) { animation-delay: .22s; }

/* Cambio lingua (script.js: switchLanguage): i testi escono in dissolvenza, vengono riscritti nella nuova lingua e
   rientrano; il logo e la forma della pagina restano fermi, così non sembra un ricaricamento.
   Sulla nav e sulle pillole solo opacità: un transform cambierebbe il riferimento degli elementi posizionati al loro interno. */
.lingua-esce .menu,
.lingua-esce .site-footer,
.lingua-esce .menu-nav__inner,
.lingua-esce .status-pill__text,
.lingua-esce .lang-pill__code {
  opacity: 0;
  transition: opacity .16s ease-in, transform .16s ease-in;
}
.lingua-esce .menu,
.lingua-esce .site-footer { transform: translateY(8px); }
.lingua-entra .menu,
.lingua-entra .site-footer { animation: lingua-entra .38s ease-out both; }
.lingua-entra .menu-nav__inner,
.lingua-entra .status-pill__text,
.lingua-entra .lang-pill__code { animation: lingua-compare .38s ease-out both; }
/* Cambio di sezione dalle tab (script.js: switchSection): stesso effetto, ma solo sul contenuto sotto le tab
   (titoli o chip delle categorie e menu); le tab restano ferme, lì scorre il colore. */
.sezione-esce .menu,
.sezione-esce .titoli--fissa,
.sezione-esce .subnav {
  opacity: 0;
  transition: opacity .16s ease-in, transform .16s ease-in;
}
.sezione-esce .menu { transform: translateY(8px); }
.sezione-entra .menu { animation: lingua-entra .38s ease-out both; }
.sezione-entra .titoli--fissa { animation: lingua-compare .38s ease-out both; }
@keyframes lingua-entra {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes lingua-compare {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lang-panel__voce {
  min-height: 40px;
  padding: 0 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: .875rem;
  font-weight: 500;
  text-align: left;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.lang-panel__voce:hover { background: var(--accent-soft); }
/* Lingua attiva: pillola piena, come la tab selezionata */
.lang-panel__voce[aria-current="true"] { background: var(--btn-bg); color: var(--btn-ink); }

/* ---------- Onda e bollicine (bordo tra intestazione e menu) ---------- */
/* Il fondo del menu risale nell'intestazione con un'onda sola, lunga e bassa; poche bollicine sottili
   salgono lente in tre punti (ai lati e al centro), come il perlage in un calice. Solo decorazione: non riceve clic. */
.onda {
  --onda-h: clamp(18px, 4.5vw, 36px);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--onda-h);
  pointer-events: none;
}
.onda__svg {
  position: absolute;
  left: 0;
  bottom: -1px; /* copre la riga di giunzione con la nav */
  width: 100%;
  height: 100%;
  fill: var(--bg);
}
.onda__bolla {
  --sale: clamp(24px, 6vw, 48px);
  position: absolute;
  bottom: 60%;
  box-sizing: border-box;
  width: var(--d, 5px);
  height: var(--d, 5px);
  border: 1px solid var(--brand);
  border-radius: 50%;
  opacity: 0;
  animation: bolla-sale var(--t, 8s) linear var(--r, 0s) infinite;
}
.onda__bolla:nth-child(1) { left: 78%;   --d: 5px; --t: 7s;   --r: 0s; }
.onda__bolla:nth-child(2) { left: 80.5%; --d: 3px; --t: 9s;   --r: 2.5s; }
.onda__bolla:nth-child(3) { left: 82%;   --d: 7px; --t: 8s;   --r: 4.2s; bottom: 75%; }
.onda__bolla:nth-child(4) { left: 79.5%; --d: 4px; --t: 10s;  --r: 6s; }
.onda__bolla:nth-child(5) { left: 84%;   --d: 3px; --t: 7.5s; --r: 1.3s; bottom: 85%; }
.onda__bolla:nth-child(6) { left: 15%;   --d: 4px; --t: 9s;   --r: 3s;  bottom: 55%; }
.onda__bolla:nth-child(7) { left: 17.5%; --d: 6px; --t: 11s;  --r: 7.5s; bottom: 70%; }
.onda__bolla:nth-child(8) { left: 47%;   --d: 4px; --t: 8.5s; --r: 5s;  bottom: 65%; }
.onda__bolla:nth-child(9) { left: 50%;   --d: 6px; --t: 10s;  --r: 1.8s; bottom: 75%; }
.onda__bolla:nth-child(10) { left: 52.5%; --d: 3px; --t: 7.5s; --r: 8s;  bottom: 60%; }
@keyframes bolla-sale {
  0%   { opacity: 0;   transform: translate(0, 0); }
  15%  { opacity: .45; }
  50%  { transform: translate(2px, calc(var(--sale) * -.5)); }
  80%  { opacity: .3; }
  100% { opacity: 0;   transform: translate(-1px, calc(var(--sale) * -1)); }
}
/* Bollicine in più al cambio di sezione (create da script.js: burstBubbles, sopra la tab toccata): salgono una volta
   sola, più in alto e più in fretta di quelle fisse, e poi spariscono. Posizione, misura e tempi arrivano dallo script. */
.onda__bolla--extra {
  animation: bolla-sbuffo var(--t, 1.6s) ease-out var(--r, 0s) 1 both;
}
@keyframes bolla-sbuffo {
  0%   { opacity: 0;   transform: translate(0, 0) scale(.5); }
  18%  { opacity: .65; transform: translate(0, calc(var(--sale) * -.25)) scale(1); }
  70%  { opacity: .4; }
  100% { opacity: 0;   transform: translate(var(--dx, 0px), calc(var(--sale) * -1.9)) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .onda__bolla { display: none; }
}

/* ---------- Navigazione sticky ---------- */
.menu-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(253, 244, 227, .94);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
  .menu-nav {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
}
.menu-nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: .75rem var(--gutter) .25rem;
}

/* Tab: pill; su schermi stretti la riga scorre in orizzontale (scrollbar nascosta) */
.tabs,
.subnav {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar,
.subnav::-webkit-scrollbar { display: none; }

.tabs {
  position: relative; /* riferimento per offsetLeft (script.js: tab attiva in vista) */
  padding: 3px; /* spazio per l'outline del focus, altrimenti tagliato dall'overflow */
  margin: -3px;
}
/* Centratura "sicura": margini auto che si annullano quando la riga va in overflow */
.tab:first-child,
.chip:first-child { margin-left: auto; }
.tab:last-child,
.chip:last-child { margin-right: auto; }

.tab {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .02em;
  /* Il colore pieno della tab attiva è un livello a parte (.tab__fondo): vedi sotto */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.tab:hover { border-color: var(--accent); }
.tab[aria-selected="true"] {
  border-color: var(--btn-bg);
  color: var(--btn-ink);
}
/* Fondo pieno della tab attiva: un livello a parte (span creato da script.js), una "goccia" più larga della tab con le
   estremità tonde, che a riposo copre tutta la tab oppure sta fuori a sinistra. Al cambio di sezione script.js
   (flowTabs) la fa scorrere come un liquido: esce dalla tab lasciata, attraversa di corsa quelle in mezzo ed entra
   in quella scelta, con il fronte curvo e inclinato nel verso del movimento. */
.tab__fondo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1.4rem;  /* le estremità tonde stanno fuori dalla tab: da ferma il colore la copre per intero */
  right: -1.4rem;
  z-index: -1;
  border-radius: 999px;
  background: var(--btn-bg);
  transform: translateX(-101%); /* fuori, a sinistra */
}
.tab[aria-selected="true"] .tab__fondo { transform: none; }

/* Subnav: chip testuali; .subnav è il contenitore di riferimento per offsetLeft (script.js) */
.subnav {
  position: relative;
  gap: 1.25rem;
  padding: 0 3px;
  margin: .25rem -3px 0;
  scroll-snap-type: x proximity;
}
.subnav:empty { display: none; }

.chip {
  flex: 0 0 auto;
  scroll-snap-align: center;
  white-space: nowrap;
  padding: .6rem 0 .55rem;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
/* La chip Allergeni è un <button>: azzera l'aspetto nativo per renderla identica alle chip-link */
button.chip {
  margin-top: 0;
  margin-bottom: 0;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.chip:hover { color: var(--ink); }
.chip[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Sezioni a pagine (Cucina): in cima alla categoria la navigazione è la riga dei titoli grandi (.titoli), quindi le chip
   non occupano spazio: stanno sovrapposte sotto le tab e compaiono quando i titoli escono dallo schermo (script.js: syncTitles) */
/* Stessa resa delle sezioni a scorrimento, dove i titoli sono dentro la nav: nessuna riga tra tab e titoli, titoli subito sotto */
.menu-nav--titoli { border-bottom-color: transparent; }
.menu-nav--titoli + .menu { padding-top: .3rem; }
.menu-nav--titoli .subnav {
  position: absolute;
  top: 100%; /* copre il bordo inferiore della nav */
  left: 0;
  right: 0;
  margin: 0;
  padding: 0 var(--gutter);
  background: rgba(253, 244, 227, .97);
  border-bottom: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.menu-nav--titoli .subnav.is-visibile {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* ---------- Contenitore menu ---------- */
.menu {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(24px, 5vw, 48px) var(--gutter) clamp(40px, 8vw, 80px);
  min-height: 60vh;
}
.menu__notice {
  padding: 3rem 0;
  text-align: center;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
}

/* ---------- Nota di sezione (es. Caffetteria): riquadro sobrio, non una categoria ---------- */
.section-note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: clamp(20px, 4vw, 32px);
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--accent-soft);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
}
.section-note .info-icon {
  flex: 0 0 auto;
  margin-top: .2em; /* allinea l'icona alla prima riga di testo */
  color: var(--accent);
}
.section-note + .category { padding-top: 0; }

/* ---------- Categoria ---------- */
.category {
  scroll-margin-top: calc(var(--nav-h) + 16px);
  padding-top: clamp(24px, 4vw, 40px);
}
.category + .category { margin-top: clamp(32px, 6vw, 64px); }
.category:first-child { padding-top: 0; }

.category__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .9rem;
  row-gap: 0;
  padding-bottom: .6rem;
  margin-bottom: clamp(20px, 3vw, 32px);
  border-bottom: 1px solid var(--line);
}
.category__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
  line-height: 1.15;
}
.category__subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--muted);
}

/* Sezioni a pagine: il titolo è una riga di titoli, come un carosello. Quello della categoria aperta è grande e al
   centro; ai lati, più piccoli e sbiaditi, il precedente e il successivo, tagliati dai bordi dello schermo.
   La riga non si trascina (overflow: hidden): la sposta script.js (alignTitles) quando si tocca un titolo. */
.category__heading--titoli {
  display: block;
  text-align: center;
  /* Riga sotto i titoli da bordo a bordo, come quella della nav nelle altre sezioni */
  margin: 0 calc(-1 * var(--gutter)) 1rem;
  padding-bottom: .35rem;
}
.category__heading--titoli .titoli { margin: 0; padding: 0 50%; }
/* La prima fila di piatti ha la sua riga in alto: subito sotto quella dei titoli farebbe doppione, si taglia via */
.category__heading--titoli + .dish-grid { clip-path: inset(1px 0 0 0); }
.titoli {
  position: relative; /* riferimento per offsetLeft (script.js: titleCenter) */
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  margin: 0 calc(-1 * var(--gutter)); /* da bordo a bordo dello schermo */
  /* Spazio ai lati pari a metà riga: anche il primo e l'ultimo titolo possono stare al centro. In percentuale (non in vw):
     su schermi più larghi del contenuto il padding in vw allargherebbe la riga oltre il suo contenitore, spostando il centro */
  padding: 0 calc(50% + var(--gutter));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26%, #000 74%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 26%, #000 74%, transparent);
}
.titoli__voce {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  line-height: 1.15;
  font-variant-numeric: lining-nums;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  text-decoration: none;
  transform-origin: 50% 75%; /* circa la linea di base: lo scambio di grandezza non fa saltare il testo */
  transition: color .2s var(--ease);
}
a.titoli__voce:hover { color: var(--ink); }
.titoli__voce--attiva { color: var(--ink); font-size: clamp(1.75rem, 4.5vw, 2.5rem); } /* come .category__title */
/* Cambio pagina: il titolo che diventa attivo cresce, quello che lo era si rimpicciolisce (la riga intanto scorre) */
.titoli__voce--entra { animation: titolo-entra .38s var(--ease) both; }
.titoli__voce--esce { animation: titolo-esce .38s var(--ease) both; }
@keyframes titolo-entra {
  from { transform: scale(var(--scala-entra, .68)); color: color-mix(in srgb, var(--muted) 70%, transparent); }
  to   { transform: none; color: var(--ink); }
}
@keyframes titolo-esce {
  from { transform: scale(var(--scala-esce, 1.46)); color: var(--ink); }
  to   { transform: none; color: color-mix(in srgb, var(--muted) 70%, transparent); }
}

/* Sezioni a scorrimento (Cantina, Distillati, Caffetteria): la stessa riga di titoli sta agganciata nella nav, sotto le
   tab, e segue la categoria che si sta leggendo (script.js: markTitle). Stesse grandezze della riga di Cucina. */
.titoli--fissa { margin-top: .35rem; }
.titoli--fissa:empty { display: none; }
.titoli--fissa .titoli__voce { padding: .2rem 0 0; }
.titoli--fissa { padding-bottom: .35rem; }
/* La riga si trascina in orizzontale (script.js: titleDrag); in verticale il gesto resta alla pagina */
.titoli--trascina {
  touch-action: pan-y;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.titoli--trascina .titoli__voce { -webkit-user-drag: none; }
.titoli--trascina.is-trascinata,
.titoli--trascina.is-trascinata .titoli__voce { cursor: grabbing; }

/* Nelle stesse sezioni, a schermo, le intestazioni dentro la pagina sono piccole: servono solo a separare le categorie.
   Stanno al centro, tra due lineette (a sinistra si confondevano con i nomi delle voci), con l'eventuale sottotitolo sotto.
   Quella della prima categoria sta subito sotto il titolo grande con lo stesso nome: si nasconde (resta il sottotitolo, se c'è).
   In stampa la nav non c'è e le intestazioni tornano grandi. */
@media screen {
  .category__heading--piccola {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    row-gap: .2rem;
    padding-bottom: 0;
    border-bottom: 0;
    text-align: center;
  }
  .category__heading--piccola .category__title {
    display: flex;
    align-items: center;
    gap: .9rem;
    width: 100%;
    font-family: var(--sans);
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--accent);
  }
  .category__heading--piccola .category__title::before,
  .category__heading--piccola .category__title::after {
    content: "";
    flex: 1 1 0;
    min-width: 1.5rem;
    height: 1px;
    background: color-mix(in srgb, var(--brand) 38%, transparent);
  }
  .category__heading--piccola .category__subtitle { font-size: 1rem; }
  .category__heading--prima .category__title,
  .category__heading--prima.category__heading--sola {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Pager categorie ---------- */
.pager {
  display: flex;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 24px);
  margin-top: clamp(22px, 5vw, 46px);
  padding: 10px 0;
  position: sticky;
  bottom: calc(22px + env(safe-area-inset-bottom, 0px)); /* da agganciati i pulsanti stanno un po' sopra il bordo dello schermo */
  z-index: 40;
  pointer-events: none; /* solo i pulsanti ricevono il tocco: lo spazio tra i due lascia passare i clic ai piatti */
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  /* Sagome del pulsante (maschere SVG, si adattano all'altezza): estremità con la punta (tondo da cui esce
     una punta raccordata, larga 32px) ed estremità tonda (24px), ciascuna come riempimento e come contorno */
  --punta-piena: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 48' preserveAspectRatio='none'%3E%3Cpath d='M32 .5A23.5 23.5 0 0 0 12.75 10.52C9.3 15.4 6.8 19.2 2 22.8Q.6 24 2 25.2C6.8 28.8 9.3 32.6 12.75 37.48A23.5 23.5 0 0 0 32 47.5Z'/%3E%3C/svg%3E");
  --punta-filo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 48' preserveAspectRatio='none'%3E%3Cpath d='M32 .5A23.5 23.5 0 0 0 12.75 10.52C9.3 15.4 6.8 19.2 2 22.8Q.6 24 2 25.2C6.8 28.8 9.3 32.6 12.75 37.48A23.5 23.5 0 0 0 32 47.5' fill='none' stroke='%23000' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --tondo-pieno: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' preserveAspectRatio='none'%3E%3Cpath d='M0 .5A23.5 23.5 0 0 1 0 47.5Z'/%3E%3C/svg%3E");
  --tondo-filo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 48' preserveAspectRatio='none'%3E%3Cpath d='M0 .5A23.5 23.5 0 0 1 0 47.5' fill='none' stroke='%23000' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  /* Tratti dritti sopra e sotto: SVG come le curve, così il contorno ha lo stesso spessore ovunque */
  --dritto-filo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 48' preserveAspectRatio='none'%3E%3Cpath d='M0 .5H10M0 47.5H10' fill='none' stroke='%23000' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
/* Agganciati al fondo dello schermo: solo i due pulsanti, senza fascia, con un'ombra leggera che li stacca dai
   piatti che scorrono sotto (drop-shadow segue la sagoma con la punta). Nel posto naturale la classe manca */
.pager.is-fluttuante .pager__btn { filter: drop-shadow(0 2px 6px rgba(42, 18, 22, .22)); }
.pager.is-nascosta {
  opacity: 0;
  transform: translateY(8px);
}
.pager.is-nascosta .pager__btn { pointer-events: none; }
.pager.is-nascosta:focus-within {
  opacity: 1;
  transform: none;
}
.pager.is-nascosta:focus-within .pager__btn { pointer-events: auto; }
/* Il pulsante non ha bordo né sfondo propri: fondo (::before) e contorno (::after) sono due livelli ritagliati
   con le sagome qui sopra, così il profilo è un tracciato unico. Disegnato con la punta a sinistra (precedente),
   specchiato per la successiva. */
.pager__btn {
  --pager-bg: var(--bg);
  box-sizing: border-box;
  min-width: 0; /* nessun tetto al 48%: i due pulsanti si dividono la riga secondo la lunghezza del nome */
  position: relative;
  isolation: isolate;
  min-height: 48px;
  padding: 12px 1.5rem 12px 2rem;
  border: 0;
  border-radius: 24px; /* solo per l'outline del focus */
  background: none;
  color: var(--brand);
  text-align: center;
  cursor: pointer;
  pointer-events: auto;
  transition: color .2s var(--ease);
  /* Tenendo premuto su un telefono: niente selezione del testo né menu contestuale */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Successiva = azione principale (piena, come la tab attiva); precedente = secondaria (solo contorno) */
.pager__btn--next {
  --pager-bg: var(--btn-bg);
  --pager-filo: var(--btn-bg);
  margin-left: auto;
  padding: 12px 2rem 12px 1.5rem;
  color: var(--btn-ink);
}
.pager__btn::before,
.pager__btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}
.pager__btn::before {
  background: var(--pager-bg);
  transition: background-color .2s var(--ease);
  -webkit-mask: var(--punta-piena) left top / 32px 100% no-repeat, var(--tondo-pieno) right top / 24px 100% no-repeat, linear-gradient(#000, #000) 29px top / calc(100% - 50px) 100% no-repeat;
  mask: var(--punta-piena) left top / 32px 100% no-repeat, var(--tondo-pieno) right top / 24px 100% no-repeat, linear-gradient(#000, #000) 29px top / calc(100% - 50px) 100% no-repeat;
}
.pager__btn::after {
  background: var(--pager-filo, var(--brand));
  -webkit-mask: var(--punta-filo) left top / 32px 100% no-repeat, var(--tondo-filo) right top / 24px 100% no-repeat, var(--dritto-filo) 29px top / calc(100% - 50px) 100% no-repeat;
  mask: var(--punta-filo) left top / 32px 100% no-repeat, var(--tondo-filo) right top / 24px 100% no-repeat, var(--dritto-filo) 29px top / calc(100% - 50px) 100% no-repeat;
}
.pager__btn--next::before,
.pager__btn--next::after { transform: scaleX(-1); }
/* Il cambio colore al passaggio vale solo dove esiste un puntatore: su un telefono, tenendo premuto, ":hover" restava
   attivo e il pulsante cambiava colore (crema quello pieno) come se fosse un altro pulsante */
@media (hover: hover) {
  .pager__btn:hover {
    --pager-bg: var(--brand-cream);
    color: var(--brand);
  }
}
/* Premuto: resta dello stesso colore, appena più scuro */
.pager__btn:active { --pager-bg: var(--accent-soft); color: var(--brand); }
.pager__btn--next:active { --pager-bg: var(--brand); color: var(--btn-ink); }
.pager__name {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* Telefoni stretti: testo e spazi interni ridotti, così anche la coppia più lunga ("Per Continuare" + "Insieme A") sta su una riga a 320px */
@media (max-width: 380px) {
  .pager__btn { padding: 12px 1.1rem 12px 1.6rem; }
  .pager__btn--next { padding: 12px 1.6rem 12px 1.1rem; }
  .pager__name { font-size: 1.125rem; }
}

/* ---------- Cibo ---------- */
.dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 32px);
}
.dish {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dish__media {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--accent-soft);
}
.dish__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease);
}
@media (hover: hover) {
  .dish:hover .dish__media img { transform: scale(1.03); }
}
/* Segnaposto grafico: stesso box, icona centrata */
.dish__media--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dish__icon {
  width: 30%;
  max-width: 96px;
  height: auto;
  color: var(--accent);
  opacity: .55;
}

.dish__body { padding-top: .9rem; }
/* Piatto senza foto: card solo testo */
.dish--no-media { border-top: 1px solid var(--line); padding-top: .9rem; }
.dish--no-media .dish__body { padding-top: 0; }
.dish__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.dish__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.35rem;
  line-height: 1.2;
  min-width: 0;
}
.dish__price {
  flex: 0 0 auto;
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink);
}
.dish__desc {
  margin-top: .35rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Etichetta "Il più amato" sopra il nome */
.dish__badge {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  margin-bottom: .3rem;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.dish__badge::before {
  content: "";
  width: .7em;
  height: .7em;
  background: currentColor;
  /* cuoricino */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 3 4.5 6.6 4.5c2.2 0 3.6 1.3 4.4 2.6.8-1.3 2.2-2.6 4.4-2.6 3.6 0 5.7 3.7 4.2 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.3C.9 8.2 3 4.5 6.6 4.5c2.2 0 3.6 1.3 4.4 2.6.8-1.3 2.2-2.6 4.4-2.6 3.6 0 5.7 3.7 4.2 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Su schermi larghi i piatti stanno in colonne affiancate: l'etichetta sopra il nome lo farebbe scendere rispetto ai
   vicini di riga. Nelle card solo testo l'etichetta si appoggia allora sulla linea in cima alla card (come i titoli
   delle categorie sulla loro linea) e il nome resta allineato agli altri. */
@media (min-width: 600px) {
  .dish--no-media { position: relative; }
  .dish--no-media .dish__badge {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding-right: .6em;
    background: var(--bg);
    transform: translateY(-50%);
  }
}

/* Asterisco "prodotto gelo" dopo il nome */
.dish__frozen {
  margin-left: .12em;
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 500;
  font-size: .8em;
  vertical-align: .18em;
  cursor: help;
}
/* Allergeni sotto la descrizione: solo cerchietti numerati, link discreto alla legenda */
.dish__allergens { margin-top: .6rem; }
.dish__allergens-link {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  text-decoration: none;
  color: var(--accent);
  cursor: pointer;
}
.dish__allergen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: .68rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  transition: background-color .2s var(--ease);
}
.dish__allergens-link:hover .dish__allergen,
.dish__allergens-link:focus-visible .dish__allergen { background: var(--accent-soft); }
.dish__allergens--chef {
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
  font-style: italic;
}

/* Solo screen reader */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Pannello informativo (allergeni): legenda solo per la stampa ---------- */
.menu-info--stampa { display: none; }
.menu-info {
  scroll-margin-top: calc(var(--nav-h) + 16px);
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--accent-soft);
}
.menu-info__head {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: clamp(16px, 3vw, 24px);
}
.menu-info__head .info-icon { flex: 0 0 auto; color: var(--accent); }
.menu-info__title {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---------- Legenda allergeni ---------- */
.allergen-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem 1rem;
}
@media (min-width: 600px) { .allergen-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .allergen-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.allergen {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  font-size: .92rem;
  line-height: 1.35;
}
.allergen__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.allergen__name { min-width: 0; }
.allergen-note {
  margin-top: clamp(20px, 3vw, 28px);
  font-size: .85rem;
  line-height: 1.55;
  color: var(--muted);
}
.allergen-note__mark { color: var(--accent); font-weight: 600; margin-right: .1em; }
.allergen-ask {
  margin-top: .75rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ink);
}

/* ---------- Note sotto i piatti ---------- */
.menu-notes {
  margin-top: clamp(20px, 4vw, 32px);
  font-size: .8rem;
  line-height: 1.5;
  color: var(--muted);
}
.menu-notes__hint {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}
.menu-notes__hint .info-icon {
  flex: 0 0 auto;
  margin-top: .2em; /* allinea l'icona alla prima riga di testo */
  color: var(--accent);
}
.menu-notes .allergen-note {
  margin-top: .6rem;
  font-size: inherit;
  line-height: inherit;
}

/* ---------- Pop-up allergeni e privacy ---------- */
.allergen-modal,
.privacy-modal {
  width: min(92vw, 560px);
  max-width: 92vw;
  max-height: 85vh;
  padding: 0; /* il padding sta sul pannello (__panel): così e.target === dialog solo sul backdrop */
  border: 0;
  border-radius: 6px;
  background: var(--bg); /* lo stesso fondo dell'area del menu */
  color: var(--ink);
  text-align: left;
  box-shadow: 0 18px 50px rgba(42, 18, 22, .18), 0 2px 8px rgba(42, 18, 22, .08);
  overflow: hidden;
}
.allergen-modal::backdrop,
.privacy-modal::backdrop {
  background: rgba(42, 18, 22, .42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
/* Apertura: il pop-up cresce dal punto toccato (numeretti del piatto, link nel footer; origine messa da
   setPopupOrigin in script.js, altrimenti il centro), poi il contenuto entra a cascata */
.allergen-modal[open],
.privacy-modal[open] {
  transform-origin: var(--origine-x, 50%) var(--origine-y, 50%);
  animation: popup-cresce .25s var(--ease) both;
}
.allergen-modal[open]::backdrop,
.privacy-modal[open]::backdrop { animation: lang-modal-fade-in .22s var(--ease) both; }
.allergen-modal[open] .allergen-modal__panel > :not(button),
.privacy-modal[open] .privacy-modal__panel > :not(button) { animation: popup-voce-in .28s var(--ease) .18s both; }
.allergen-modal[open] .allergen-modal__panel > :nth-child(2),
.privacy-modal[open] .privacy-modal__panel > :nth-child(2) { animation-delay: .06s; }
.allergen-modal[open] .allergen-modal__panel > :nth-child(3),
.privacy-modal[open] .privacy-modal__panel > :nth-child(3) { animation-delay: .09s; }
.allergen-modal[open] .allergen-modal__panel > :nth-child(4),
.privacy-modal[open] .privacy-modal__panel > :nth-child(4) { animation-delay: .12s; }
.allergen-modal[open] .allergen-modal__panel > :nth-child(5),
.privacy-modal[open] .privacy-modal__panel > :nth-child(5) { animation-delay: .15s; }
/* Gli allergeni del piatto: il numero fa un piccolo balzo quando l'elenco è comparso */
.allergen-modal[open] .is-presente .allergen__num { animation: allergene-balzo .35s var(--ease) .25s both; }
/* Chiusura (classe messa da closePopup in script.js): più rapida dell'apertura, torna verso il punto di partenza */
.allergen-modal.is-closing,
.privacy-modal.is-closing { animation: popup-chiude .18s var(--ease) both; }
.allergen-modal.is-closing::backdrop,
.privacy-modal.is-closing::backdrop { animation: lang-modal-fade-out .18s var(--ease) both; }
@keyframes popup-cresce { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes popup-chiude { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.8); } }
@keyframes popup-voce-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes allergene-balzo { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.allergen-modal__panel,
.privacy-modal__panel {
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  padding: clamp(24px, 5vw, 36px);
}
.allergen-modal__panel:focus,
.privacy-modal__panel:focus { outline: none; } /* riceve il focus iniziale: nessun anello visibile */
.allergen-modal__close,
.privacy-modal__close {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  transition: background-color .2s var(--ease);
}
.allergen-modal__close:hover,
.privacy-modal__close:hover { background: var(--accent-soft); }
.allergen-modal__title,
.privacy-modal__title {
  margin: 0 2.5rem 1.1rem 0; /* spazio per il pulsante chiudi */
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.privacy-modal__h {
  margin: 1.1rem 0 .3rem;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}
.privacy-modal__panel p {
  margin: 0 0 .5rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--muted);
}
.privacy-modal__panel .privacy-modal__data {
  margin-top: 1.2rem;
  font-size: .75rem;
}
.allergen-modal__piatto {
  margin-bottom: 1rem;
  font-size: .95rem;
  line-height: 1.5;
}
.allergen-modal__piatto strong { font-weight: 600; }
.allergen-modal .allergen-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 359.98px) {
  .allergen-modal .allergen-list { grid-template-columns: minmax(0, 1fr); }
}
/* Apertura da un piatto: gli allergeni presenti spiccano, gli altri restano leggibili ma attenuati */
.allergen-list--piatto .allergen__name { color: var(--muted); }
.allergen-list--piatto .allergen__num { border-color: var(--line); color: var(--muted); }
.allergen-list--piatto .is-presente .allergen__name { color: var(--ink); font-weight: 600; }
.allergen-list--piatto .is-presente .allergen__num {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-cream);
}

/* ---------- Leader tratteggiato (vini e distillati) ---------- */
.leader {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  height: 0;
  border-bottom: 1px dotted var(--muted);
  opacity: .55;
}

/* ---------- Vini ---------- */
.wine-cols {
  display: flex;
  justify-content: flex-end;
  padding-bottom: .5rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.wine-cols span,
.wine__price {
  width: 5.5rem;
  text-align: right;
}

.wine {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head prices"
    "meta prices"
    "link prices"
    "ask prices";
  align-items: baseline;
  column-gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--line);
}
.wine:last-child { border-bottom: 0; }

.wine__head {
  grid-area: head;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-width: 0;
}
.wine__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  min-width: 0;
}
.wine__meta {
  grid-area: meta;
  margin-top: .15rem;
  font-size: .8125rem;
  color: var(--muted);
}
.wine__ask {
  grid-area: ask;
  margin-top: .15rem;
}
/* Collegamento interno (es. Caffetteria -> Distillati): corsivo elegante, sottolineato sottile, senza icona */
.row-link {
  grid-area: link;
  justify-self: start;
  margin-top: .3rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--accent); /* fallback senza color-mix */
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transition: text-decoration-color .2s var(--ease);
}
.row-link:hover,
.row-link:focus-visible { text-decoration-color: var(--accent); }
/* Nell'intestazione (linkAsName) sostituisce il nome: sta sulla linea di base, accanto al leader */
.wine__head .row-link { margin-top: 0; justify-self: auto; }

.wine__prices {
  grid-area: prices;
  display: flex;
}
.wine__price {
  position: relative;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
}
.wine__label {
  /* Desktop: etichetta solo per screen reader (l'intestazione colonne la mostra) */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.badge {
  flex: 0 0 auto;
  padding: .05rem .5rem;
  border: 1px solid var(--sage);
  border-radius: 999px;
  color: var(--sage);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* Mobile: nome e meta in alto, prezzi sotto con etichetta inline */
@media (max-width: 599.98px) {
  .wine-cols { display: none; }
  .wine {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "meta" "link" "ask" "prices";
    row-gap: 0;
    padding: .9rem 0;
  }
  .wine__head .leader { display: none; }
  .wine__prices {
    margin-top: .4rem;
    gap: 1.25rem;
  }
  .wine__price {
    width: auto;
    text-align: left;
    font-size: .9rem;
  }
  .wine__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    margin-right: .4em;
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

/* ---------- Distillati ---------- */
.spirit-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(32px, 6vw, 72px);
}
@media (min-width: 800px) {
  .spirit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.spirit {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .6rem 0;
}
.spirit__head {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-width: 0;
}
.spirit__name {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  min-width: 0;
}
.spirit__kind {
  flex: 0 0 auto;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.spirit__price {
  flex: 0 0 auto;
  font-size: .95rem;
  font-weight: 500;
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative; /* ancora per la strada del gatto */
  padding: 2.5rem var(--gutter) calc(2.5rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .875rem;
  color: var(--muted);
}
/* Contatti: indirizzo (apre la mappa) e telefono, uno per riga */
.site-footer__contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  margin-bottom: 1rem;
  font-style: normal;
}
.site-footer__contacts a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color .2s var(--ease);
}
.site-footer__contacts a:hover { border-bottom-color: var(--accent); }
/* Link al sito del locale, sotto i contatti */
.site-footer__sito { margin-bottom: 1rem; }
.site-footer__sito a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color .2s var(--ease);
}
.site-footer__sito a:hover { border-bottom-color: var(--accent); }
.site-footer__legal {
  margin-top: .6rem;
  font-size: .75rem;
  letter-spacing: .02em;
}
.site-footer__legal[hidden] { display: none; }
/* Link testuali del footer che aprono un pop-up: Privacy e elenco degli allergeni */
.site-footer__privacy,
.site-footer__link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.site-footer__privacy:hover,
.site-footer__link:hover { color: var(--ink); }
.site-footer__copy {
  margin-top: .35rem;
  font-size: .75rem;
  letter-spacing: .04em;
}

/* Easter egg (script.js: passaGatto): un gattino (mantello a caso, mai nero) cammina sulla riga in alto del footer. La strada è una fascia
   appoggiata sulla riga, alta abbastanza per il gatto e il «prrr», con overflow nascosto: il gatto entra ed esce dai
   bordi senza allargare la pagina; non intercetta i tocchi, solo il gatto sì. Toccato (gatto--fusa) si ferma, vibra
   e fa «prrr». */
.gatto-strada {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 60px;
  overflow: hidden;
  pointer-events: none;
}
.gatto {
  position: absolute;
  bottom: 0;
  left: -60px;
  width: 48px;
  height: 30px;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: gatto-cammina 9s linear both; /* durata ricalcolata da script.js sulla larghezza */
}
.gatto svg { display: block; overflow: visible; }
.gatto--da-destra { animation-direction: reverse; }
.gatto--da-destra svg { transform: scaleX(-1); }
@keyframes gatto-cammina {
  from { left: -60px; }
  to   { left: 100%; }
}
.gatto__corpo { fill: currentColor; }
.gatto__occhio { fill: var(--bg); }
.gatto__macchia { fill: #D9822B; display: none; }
.gatto__strisce { fill: none; stroke: #A95A1C; stroke-width: 1.3; stroke-linecap: round; display: none; }
/* Mantelli (script.js: MANTELLI). Rosso tigrato, il gatto romano per eccellenza */
.gatto--rosso { color: #D9822B; }
.gatto--rosso .gatto__strisce { display: inline; }
/* Bordeaux: il gatto della casa, del colore del logo */
.gatto--bordeaux { color: var(--brand); }
/* Bianco e rosso: sulla crema il bianco sparirebbe, quindi un contorno sottile attorno alla sagoma intera
   (le ombre seguono il profilo dell'unione, senza righe dove testa e corpo si sovrappongono) */
.gatto--pezzato { color: #FFFDF8; }
.gatto--pezzato svg { filter: drop-shadow(0 0 .5px rgba(42, 18, 22, .75)) drop-shadow(0 0 .4px rgba(42, 18, 22, .5)); }
.gatto--pezzato .gatto__macchia { display: inline; }
.gatto--pezzato .gatto__coda { stroke: #D9822B; }
.gatto--pezzato .gatto__occhio { fill: var(--ink); }
.gatto__coda,
.gatto__zampa {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  transform-box: fill-box;
}
.gatto__coda { stroke-width: 2.4; transform-origin: right bottom; animation: gatto-coda 1.2s ease-in-out infinite alternate; }
.gatto__zampa { stroke-width: 2.6; transform-origin: 50% 0; animation: gatto-passo .36s ease-in-out infinite alternate; }
.gatto__zampa--b { animation-delay: -.36s; } /* l'altra coppia è a metà passo */
@keyframes gatto-passo {
  from { transform: rotate(16deg); }
  to   { transform: rotate(-16deg); }
}
@keyframes gatto-coda {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(10deg); }
}
/* Fusa: si ferma (cammino e zampe in pausa) e il corpo trema appena */
.gatto--fusa,
.gatto--fusa .gatto__zampa { animation-play-state: paused; }
.gatto--fusa .gatto__corpo { transform-box: fill-box; animation: gatto-fusa .06s linear infinite alternate; }
@keyframes gatto-fusa {
  from { transform: translate(-.4px, .2px); }
  to   { transform: translate(.4px, -.2px); }
}
/* Dopo le fusa scappa: corsa che accelera (durata calcolata da script.js), zampe e coda molto più veloci */
.gatto--scappa { transition-property: left; transition-timing-function: cubic-bezier(.5, 0, .9, .6); }
.gatto--scappa .gatto__zampa { animation-duration: .1s; }
.gatto--scappa .gatto__zampa--b { animation-delay: -.1s; }
.gatto--scappa .gatto__coda { animation-duration: .25s; }
/* Il «prrr» sale sopra la testa, dentro la parte alta della strada */
.gatto__prrr {
  position: absolute;
  left: 50%;
  bottom: 100%;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
  animation: gatto-prrr 1.6s ease-out both;
}
@keyframes gatto-prrr {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -14px); }
}

/* Orari nel footer: solo in stampa (a schermo bastano la pillola e il suo pannello, in alto). Griglia compatta centrata (giorni a destra, orari a sinistra) */
.hours[hidden] { display: none; }
@media screen { .site-footer .hours { display: none; } }
.hours__list {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 1rem;
  row-gap: .1rem;
  justify-content: center;
  margin: 0 0 1rem;
  font-size: .8125rem;
}
.hours__row { display: contents; }
.hours__row dt { text-align: right; }
.hours__row dd { margin: 0; text-align: left; font-variant-numeric: tabular-nums; }
.hours__row--today dt, .hours__row--today dd { color: var(--ink); font-weight: 600; }

/* ---------- Torna su ---------- */
.to-top {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--btn-bg);
  color: var(--btn-ink);
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.to-top.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.to-top[hidden] { display: none; }

/* ---------- Animazione d'ingresso ---------- */
@keyframes enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* Cibo: stagger sulle card. Vini/distillati: stagger sulle categorie. */
.is-entering:not(.no-anim) .category--list2,
.is-entering:not(.no-anim) .category--spirit,
.is-entering:not(.no-anim) .dish {
  animation: enter .45s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
.is-entering:not(.no-anim) .category--food .category__heading {
  animation: enter .45s var(--ease) both;
}
/* Cambio pagina in una sezione a pagine: la riga dei titoli resta ferma (si anima da sé) e i piatti entrano tutti
   insieme dal lato verso cui si va. Lo spostamento è minore del margine laterale: nessuna barra di scorrimento. */
@keyframes pagina-da-destra {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pagina-da-sinistra {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.menu.cambio-avanti .category__heading,
.menu.cambio-indietro .category__heading,
.menu.cambio-avanti:not(.no-anim) .dish,
.menu.cambio-indietro:not(.no-anim) .dish { animation: none; }
.menu.cambio-avanti:not(.no-anim) .dish-grid,
.menu.cambio-avanti:not(.no-anim) .menu-notes { animation: pagina-da-destra .38s var(--ease) both; }
.menu.cambio-indietro:not(.no-anim) .dish-grid,
.menu.cambio-indietro:not(.no-anim) .menu-notes { animation: pagina-da-sinistra .38s var(--ease) both; }

/* ---------- Sipario d'apertura ---------- */
/* Un velo a tutto schermo, color crema come l'intestazione, copre la pagina. Il logo è quello vero dell'intestazione,
   portato sopra il velo per la durata dell'animazione: parte dal centro dello schermo e sale al suo posto facendo un
   giro; intanto il velo si ritira dal basso verso l'alto con un bordo sfumato e i piatti entrano a cascata (l'animazione d'ingresso di sempre, solo ritardata).
   Tutto in CSS: alla fine il velo è nascosto, script.js lo toglie dal DOM e mette senza-intro su <html>
   (dopoSipario). */
.sipario {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--brand-cream);
  /* Maschera più alta del velo (230%): in alto è piena, in basso trasparente, in mezzo una fascia sfumata. Farla
     scorrere verso l'alto scopre la pagina dal basso verso l'alto con un bordo morbido. */
  -webkit-mask: linear-gradient(to bottom, #000 43.5%, transparent 56.5%) 0 0 / 100% 230% no-repeat;
  mask: linear-gradient(to bottom, #000 43.5%, transparent 56.5%) 0 0 / 100% 230% no-repeat;
  /* Parte insieme alla salita del logo (.1s + 25% di 1.6s) e dura quanto lei, con la stessa curva */
  animation: sipario-svanisce 1.2s cubic-bezier(.6, 0, .2, 1) .5s forwards;
}
.senza-intro .sipario { display: none; }
/* Il logo dell'intestazione: sopra il velo solo finché dura (lo z-index è nell'animazione, poi torna quello di
   sempre e il logo scorre di nuovo sotto la nav). --intro-dy è la distanza tra il centro dello schermo e il centro
   del logo al suo posto (404/820 è il rapporto d'aspetto del logo). */
html:not(.senza-intro) .site-header__logo {
  --intro-dy: calc(50vh - var(--header-pt) - var(--logo-w) * 404 / 1640);
  position: relative;
  animation: sipario-logo 1.6s linear .1s both, sipario-sopra 1.8s linear;
}
@supports (height: 1dvh) {
  html:not(.senza-intro) .site-header__logo { --intro-dy: calc(50dvh - var(--header-pt) - var(--logo-w) * 404 / 1640); }
}
/* Primo ingresso dei piatti: aspetta che il velo cominci a ritirarsi */
html:not(.senza-intro) .is-entering:not(.no-anim) .category--list2,
html:not(.senza-intro) .is-entering:not(.no-anim) .category--spirit,
html:not(.senza-intro) .is-entering:not(.no-anim) .dish {
  animation-delay: calc(.6s + var(--i, 0) * 40ms);
}
html:not(.senza-intro) .is-entering:not(.no-anim) .category--food .category__heading { animation-delay: .6s; }
/* Fino al 25% il logo resta fermo al centro (compare in dissolvenza), poi sale e gira */
@keyframes sipario-logo {
  from { opacity: 0; transform: translateY(var(--intro-dy)) perspective(900px) rotateY(-360deg) scale(1.18); }
  12%  { opacity: 1; }
  25%  { opacity: 1; transform: translateY(var(--intro-dy)) perspective(900px) rotateY(-360deg) scale(1.18); animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  to   { opacity: 1; transform: translateY(0) perspective(900px) rotateY(0deg) scale(1); }
}
@keyframes sipario-sopra { from, to { z-index: 1001; } }
@keyframes sipario-svanisce { to { -webkit-mask-position: 0 100%; mask-position: 0 100%; visibility: hidden; } }

/* ---------- Modale scelta lingua ---------- */
html.is-modal-open { overflow: hidden; }

/* Cartoncino compatto con gli angoli molto arrotondati (come la cornice del logo) e due pulsanti a pillola, come le tab */
.lang-modal {
  width: min(86vw, 320px);
  max-width: 86vw;
  padding: 0; /* il padding sta su .lang-modal__panel: così e.target === dialog solo sul backdrop */
  border: 0;
  border-radius: 28px;
  background: var(--brand-cream);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 18px 50px rgba(42, 18, 22, .18), 0 2px 8px rgba(42, 18, 22, .08);
  overflow: visible;
}
.lang-modal__panel { padding: 1.75rem 1.25rem 1.4rem; }
.lang-modal__panel:focus { outline: none; } /* riceve il focus iniziale: nessun anello visibile */
.lang-modal::backdrop {
  background: rgba(42, 18, 22, .42);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lang-modal[open] { animation: lang-modal-in .3s var(--ease) both; }
.lang-modal[open]::backdrop { animation: lang-modal-fade-in .3s var(--ease) both; }
.lang-modal.is-closing { animation: lang-modal-out .2s var(--ease) both; }
.lang-modal.is-closing::backdrop { animation: lang-modal-fade-out .2s var(--ease) both; }

@keyframes lang-modal-in { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lang-modal-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.98); } }
@keyframes lang-modal-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lang-modal-fade-out { from { opacity: 1; } to { opacity: 0; } }

.lang-modal__title { line-height: 0; }
.lang-modal__logo {
  width: 132px;
  height: auto;
  margin: 0 auto;
}
.lang-modal__subtitle {
  margin-top: .9rem;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  color: var(--muted);
}
.lang-modal__choices {
  display: flex;
  gap: .5rem;
  margin-top: 1.1rem;
}
.lang-modal__btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: .5rem .75rem;
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.lang-modal__btn:hover,
.lang-modal__btn:focus-visible { border-color: var(--accent); }
.lang-modal__name {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
}

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sipario { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ---------- Schermi molto stretti ---------- */
@media (max-width: 380px) {
  .dish__name { font-size: 1.25rem; }
  .status-pill { padding: 0 .7rem; }
}

/* ---------- Barra in alto: più compatta sui telefoni, per far stare il testo della pill di stato ---------- */
/* Sotto i 420px spariscono le freccine delle pillole: il testo più lungo ("Chiuso · apre domani alle 07:30") entra a 360px */
@media (max-width: 519.98px) {
  /* Intestazione più bassa: logo più piccolo e meno aria, così i piatti cominciano più in alto */
  :root { --header-pt: 58px; --logo-w: clamp(190px, 55vw, 250px); }
  .site-header { padding-bottom: 30px; }
  .site-header__overline { margin-top: .6rem; }
  .site-header__bar { gap: .3rem; }
  .site-header__actions { padding-left: .4rem; }
  .lang-menu { margin-left: 0; }
  .lang-pill { gap: .2rem; padding: 0 .55rem; font-size: .6875rem; }
  .status-pill { gap: .3rem; padding: 0 .8rem; font-size: .6875rem; letter-spacing: 0; }
}
@media (max-width: 419.98px) {
  .status-pill__chevron { display: none; }
  .site-header__bar { gap: .2rem; }
  .site-header__actions { gap: .25rem; padding-left: .2rem; }
  .pill-link--icona { width: 34px; height: 34px; }
  .pill-link--icona::after { inset: -5px -2px; }
  .lang-pill { height: 34px; padding: 0 .6rem; }
  .status-pill { padding: 0 .5rem; }
}
/* Tra 380 e 420px lo spazio basta per ridare la freccina alla pillola della lingua (segnala il menu a tendina) */
@media (min-width: 380px) and (max-width: 419.98px) {
  .lang-pill .status-pill__chevron { display: block; }
}

/* ---------- Tab su telefono: quattro sezioni che occupano tutta la riga ---------- */
/* Le tab si allargano fino a riempire la riga (flex-grow), con lo stesso carattere a ogni larghezza: prima, sotto i
   420px, diventavano più piccole e restavano raggruppate al centro. Solo sotto i 350px il carattere si riduce. */
@media (max-width: 519.98px) {
  .tabs { gap: .35rem; }
  .tab { flex: 1 1 auto; min-height: 36px; padding: .5rem; text-align: center; }
}
@media (max-width: 349.98px) {
  .tabs { gap: .3rem; }
  .tab { padding: .5rem .35rem; font-size: .75rem; letter-spacing: 0; }
}

/* ---------- Stampa ---------- */
@media print {
  .sipario, .gatto-strada, .menu-nav, .to-top, .skip-link, .dish__media, .status-pill, .status-panel, .pager, .site-header__actions, .lang-menu, .lang-modal, .allergen-modal, .privacy-modal, .site-footer__privacy, .menu-notes__hint { display: none !important; }
  body, .site-header { background: #fff; }
  .onda { display: none; }
  .site-header__logo { width: 200px; }
  .site-header { padding: 0 0 1rem; }
  .dish-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .category, .dish, .wine, .spirit, .section-note { break-inside: avoid; }
  .menu-info { break-inside: avoid; background: none; border: 1px solid var(--ink); margin-top: 1.5rem; }
  .menu-info--stampa { display: block; }
  .is-entering .category--list2, .is-entering .category--spirit, .is-entering .dish { animation: none; }
}

/* ---------- Tema Halloween ---------- */
/* Si accende con `meta.tema: "halloween"` in assets/locale-dati.js (o con ?tema=halloween per provare, ?tema=off per
   spegnere): script.js mette la classe `tema-halloween` su <html>. A evento finito basta svuotare `tema` e questo blocco
   non fa più nulla. Sagome SVG inline: zucchette al posto delle bollicine, ragnatele negli angoli (con due ragnetti), un ragno grosso
   che ogni tanto attraversa lo schermo,
   una zucchetta nel footer; il gatto del footer diventa solo nero (script.js: MANTELLI). Solo decorazione. */
.tema-halloween {
  --hw-arancio: #D9822B;
  --hw-zucca: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.2C9.8 3.6 10.4 2.4 11.8 1.6' fill='none' stroke='%235B6B2E' stroke-width='1.8' stroke-linecap='round'/%3E%3Cg fill='%23D9822B'%3E%3Cellipse cx='5.6' cy='12' rx='5' ry='6.2'/%3E%3Cellipse cx='14.4' cy='12' rx='5' ry='6.2'/%3E%3Cellipse cx='10' cy='12' rx='4.2' ry='6.8'/%3E%3C/g%3E%3Cpath d='M10 5.4V18.4M6.6 6.8C4.6 10 4.6 14 6.6 17.2M13.4 6.8C15.4 10 15.4 14 13.4 17.2' fill='none' stroke='%23A95A1C' stroke-width='.8' stroke-linecap='round'/%3E%3C/svg%3E");
  --hw-ragnatela: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23731223' stroke-width='.9' stroke-linecap='round'%3E%3Cpath d='M0 0H100M0 0L92.4 38.3M0 0L70.7 70.7M0 0L38.3 92.4M0 0V100'/%3E%3Cpath d='M30 0Q26.5 5.3 27.7 11.5Q22.4 15 21.2 21.2Q15 22.4 11.5 27.7Q5.3 26.5 0 30'/%3E%3Cpath d='M60 0Q53 10.5 55.4 23Q44.9 30 42.4 42.4Q30 44.9 23 55.4Q10.5 53 0 60'/%3E%3Cpath d='M90 0Q79.5 15.8 83.2 34.5Q67.3 45 63.6 63.6Q45 67.3 34.5 83.2Q15.8 79.5 0 90'/%3E%3C/svg%3E");
}

/* Bollicine → zucchette, con lo stesso moto di salita e un leggero dondolio */
.tema-halloween .onda__bolla {
  width: calc(var(--d) * 3);
  height: calc(var(--d) * 3);
  border: 0;
  border-radius: 0;
  background: var(--hw-zucca) center / contain no-repeat;
  animation-name: bolla-sale-hw;
}
/* Quelle dello sbuffo (cambio sezione) salgono come le bollicine dello sbuffo */
.tema-halloween .onda__bolla--extra { animation-name: bolla-sbuffo; }
@keyframes bolla-sale-hw {
  0%   { opacity: 0;  transform: translate(0, 0) rotate(0); }
  15%  { opacity: .8; }
  35%  { transform: translate(-3px, calc(var(--sale) * -.35)) rotate(-9deg); }
  65%  { transform: translate(3px, calc(var(--sale) * -.7)) rotate(8deg); }
  85%  { opacity: .6; }
  100% { opacity: 0;  transform: translate(-1px, calc(var(--sale) * -1)) rotate(0); }
}

/* Ragnatele negli angoli dell'intestazione e del footer (dietro i contenuti, non ricevono tocchi) */
.tema-halloween .site-header::before,
.tema-halloween .site-header::after,
.tema-halloween .site-footer::before,
.tema-halloween .site-footer::after {
  content: "";
  position: absolute;
  width: clamp(64px, 17vw, 110px);
  height: clamp(64px, 17vw, 110px);
  background: var(--hw-ragnatela) 0 0 / 100% 100% no-repeat;
  opacity: .28;
  pointer-events: none;
}
.tema-halloween .site-header::before { top: 0; left: 0; }
.tema-halloween .site-header::after  { top: 0; right: 0; transform: scaleX(-1); }
.tema-halloween .site-footer::before { bottom: 0; left: 0; transform: scaleY(-1); }
.tema-halloween .site-footer::after  { bottom: 0; right: 0; transform: scale(-1, -1); }

/* Zucchetta nel footer, accanto al © */
.tema-halloween .site-footer__copy::after {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin-left: .6em;
  vertical-align: -.3em;
  background: var(--hw-zucca) center / contain no-repeat;
}

/* I ragnetti (script.js: avviaRagnetti), uno per ciascuna ragnatela in alto. La fascia è alta quanto la discesa e
   taglia il filo in cima; il corpo parte nascosto sopra il bordo, scende, dondola, risale e resta su fino al giro dopo.
   Senza la trasformazione dell'animazione (anche quando scappa) sta su, nascosto. */
.ragnetto {
  position: absolute;
  top: 0;
  width: 28px;
  height: calc(var(--header-pt) + 24px);
  overflow: hidden;
  pointer-events: none;
  --giu: calc(var(--header-pt) - 6px);
}
.ragnetto--sinistra { left: calc(clamp(64px, 17vw, 110px) * .42); }
/* Quello di destra scende sfalsato di mezzo giro e un po' meno in basso */
.ragnetto--destra { right: calc(clamp(64px, 17vw, 110px) * .42); --giu: calc(var(--header-pt) - 16px); }
.ragnetto--destra .ragnetto__corpo { animation-delay: 16.5s; }
.ragnetto__corpo {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--brand);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(-30px);
  animation: ragnetto-scende 30s ease-in-out 1.5s infinite both;
}
.ragnetto__corpo::before { /* il filo */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 60%;
  width: 1px;
  height: 240px;
  background: currentColor;
  opacity: .45;
}
.ragnetto__corpo svg { display: block; fill: currentColor; }
.ragnetto__zampe { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ragnetto__corpo--scappa { transition: transform .45s cubic-bezier(.4, 0, .9, .5); }
@keyframes ragnetto-scende {
  /* 30 s: circa 10 s di discesa, dondolio e risalita, poi 20 s di pausa in cima. Sfalsati di mezzo giro, tra la
     risalita di un ragnetto e la discesa dell'altro passano circa 6 s */
  0%, 2% { transform: translate(0, -30px); }
  12%    { transform: translate(0, var(--giu)); }
  15%    { transform: translate(-2px, calc(var(--giu) - 5px)); }
  18%    { transform: translate(2px, var(--giu)); }
  21%    { transform: translate(-1px, calc(var(--giu) - 3px)); }
  24%    { transform: translate(0, var(--giu)); }
  33%, 100% { transform: translate(0, -30px); }
}
@media (prefers-reduced-motion: reduce) {
  .ragnetto { display: none; }
}

/* Il ragno grosso (script.js: passaRagno): sempre all'altezza del centro dello schermo, entra da destra di corsa, rallenta e attraversa
   il centro piano, poi riparte di corsa uscendo a sinistra. Sopra nav e «torna su», sotto i pop-up. Rimosso a fine animazione. Si può schiacciare: il tocco
   lo prende il disegno (svg), il resto della fascia lascia passare i tocchi. */
.ragno {
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 70;
  width: clamp(230px, 62vw, 340px);
  color: #120B09;
  pointer-events: none;
  transform: translateX(100vw);
  animation: ragno-attraversa 4.1s linear both;
}
.ragno svg { pointer-events: auto; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: none; position: relative; display: block; transform: translateY(-50%); animation: ragno-ondeggia .14s ease-in-out infinite alternate; width: 100%; height: auto; overflow: visible; filter: drop-shadow(1px 3px 2px rgba(26, 18, 19, .25)); }
/* Ombra portata sulla pagina: una macchia sfocata sotto il ragno, spostata un po' in basso come con la luce dall'alto */
.ragno::before {
  content: "";
  position: absolute;
  left: 14%;
  width: 78%;
  top: -12%;
  height: 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26, 18, 19, .72), rgba(26, 18, 19, .38) 60%, transparent);
  filter: blur(6px);
}
.ragno__zampa,
.ragno__palpo { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.ragno__palpo { stroke-width: 1.6; }
.ragno__zampa { transform-box: fill-box; }
.ragno__zampa--su  { transform-origin: 30% 100%; }
.ragno__zampa--giu { transform-origin: 30% 0; }
.ragno__zampa--a { animation: ragno-passo .1s ease-in-out infinite alternate; }
.ragno__zampa--b { animation: ragno-passo .1s ease-in-out -.1s infinite alternate; }
.ragno__peli { fill: none; stroke: currentColor; stroke-width: .55; stroke-linecap: round; }
.ragno__giunto { fill: #0E0907; }
.ragno__segni { fill: none; stroke: rgba(150, 120, 95, .3); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ragno__punto { fill: rgba(150, 120, 95, .3); }
.ragno__zanna { fill: none; stroke: #3A0A10; stroke-width: 1.2; stroke-linecap: round; }
.ragno__solchi { fill: none; stroke: #140D0B; stroke-width: .7; stroke-linecap: round; opacity: .7; }
.ragno__occhio { fill: #D4142A; }
/* Tratto lento al centro: passo e vibrazione del corpo più lenti (classe messa da script.js) */
.ragno--lento .ragno__zampa { animation-duration: .3s; }
.ragno--lento .ragno__zampa--b { animation-delay: -.3s; }
.ragno--lento svg { animation-duration: .3s; }
/* Schiacciato: fermo dov'è (script.js), si appiattisce e svanisce in un attimo, ombra compresa */
.ragno--schiacciato svg { animation: ragno-schiaccia .18s ease-in both; }
.ragno--schiacciato::before { opacity: 0; transition: opacity .1s; }
.ragno--schiacciato .ragno__zampa { animation-play-state: paused; }
@keyframes ragno-schiaccia {
  from { transform: translateY(-50%) scale(1, 1); opacity: 1; }
  to   { transform: translateY(-50%) scale(1.15, .2); opacity: 0; }
}
/* La chiazza verde (script.js: disegnaChiazza) resta sulla pagina dove il ragno è stato schiacciato e scorre con il
   menu; sotto la nav, non riceve tocchi. Compare con un piccolo «splat», resta poco più di un secondo e svanisce:
   in 2 s è sparita. */
.chiazza {
  position: absolute;
  z-index: 40;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: chiazza-splat .22s cubic-bezier(.3, 1.5, .6, 1) both, chiazza-svanisce .8s ease-in 1.2s forwards;
}
.chiazza svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 1px 1px rgba(40, 60, 10, .35)); }
.chiazza__fondo { fill: url(#chiazza-verde); stroke: #3F600E; stroke-width: .8; stroke-opacity: .6; }
.chiazza__pozza { fill: #B4D94E; opacity: .45; }
.chiazza__schizzo { fill: #6E9C1C; }
.chiazza__riflesso { fill: #F4FBE0; opacity: .55; }
@keyframes chiazza-splat {
  from { transform: translate(-50%, -50%) scale(.5); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes chiazza-svanisce { to { opacity: 0; } }
@keyframes ragno-passo {
  from { transform: rotate(-8deg); }
  to   { transform: rotate(8deg); }
}
@keyframes ragno-ondeggia {
  from { transform: translateY(calc(-50% - 1px)); }
  to   { transform: translateY(calc(-50% + 1px)); }
}
/* 4,1 s: entra di corsa frenando (0,9 s), attraversa il centro piano (1,6 s), riparte accelerando e esce a sinistra */
@keyframes ragno-attraversa {
  0%   { transform: translate(100vw, 0); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  22%  { transform: translate(58vw, -4px); animation-timing-function: linear; }
  62%  { transform: translate(36vw, 4px); animation-timing-function: cubic-bezier(.6, 0, .9, .5); }
  100% { transform: translate(calc(-100% - 40px), 10px); }
}
@media (prefers-reduced-motion: reduce) {
  .ragno { display: none; }
}

/* Sipario d'apertura di Halloween: il logo compare al centro come nel sipario normale (senza il giro), poi un filo di
   ragnatela «alla Spider-Man» parte dall'alto dello schermo e, quando arriva, si apre una rete a ventaglio larga quanto
   il logo che ne afferra tutto il lato superiore (come le ragnatele degli angoli). Da lì il filo tira su il logo, che
   sale dondolando come un pendolo appeso in cima allo schermo, sempre meno; a fine sipario filo e rete svaniscono.
   Si anima il titolo (h1), portato sopra il velo come il logo, che porta con sé filo (::before) e rete (::after):
   salita con `transform` (sipario-tira, stessi tempi e curva di sipario-logo: 1.6s, ritardo .1s, salita dal 25%) e
   dondolio con la proprietà `rotate` (sipario-dondola, curva sua). `rotate` si applica dopo `transform`, quindi il
   perno resta fisso in cima alla pagina (transform-origin) mentre il logo sale.
   Misure, logo al suo posto: --colpo-y è il bordo superiore del disegno (al 2% dell'immagine), --rete-h l'altezza della
   rete fino al bordo (sotto, i fili si biforcano e affondano un poco nel bordo del logo, per sembrare attaccati), con la
   punta (dove arriva il filo) --rete-h sopra quel bordo; --filo-h va dal bordo alto della pagina alla punta. */
.tema-halloween:not(.senza-intro) .site-header__logo { animation: none; }
.tema-halloween:not(.senza-intro) .site-header__title {
  --intro-dy: calc(50vh - var(--header-pt) - var(--logo-w) * 404 / 1640);
  --colpo-y: calc(var(--logo-w) * 404 / 820 * .02);
  --rete-h: calc(var(--logo-w) * .2);
  --filo-h: calc(var(--header-pt) + var(--colpo-y) - var(--rete-h));
  position: relative;
  transform-origin: 50% calc(-1 * var(--header-pt));
  will-change: transform, rotate;
  animation: sipario-tira 1.6s linear .1s both, sipario-dondola 1.6s linear .1s both, sipario-sopra 1.8s linear;
}
@supports (height: 1dvh) {
  .tema-halloween:not(.senza-intro) .site-header__title { --intro-dy: calc(50dvh - var(--header-pt) - var(--logo-w) * 404 / 1640); }
}
.tema-halloween:not(.senza-intro) .site-header__title::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--colpo-y) - var(--rete-h) - 300vh);
  width: 2px;
  margin-left: -1px;
  height: 300vh; /* finisce sulla punta della rete; la parte in più resta sopra lo schermo */
  background: linear-gradient(90deg, transparent, var(--brand) 35%, var(--brand) 65%, transparent);
  will-change: transform;
  animation: sipario-sparo 1.6s linear .1s both, sipario-filo-luce 1.6s linear .1s both;
}
.tema-halloween:not(.senza-intro) .site-header__title::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(var(--colpo-y) - var(--rete-h));
  width: calc(var(--logo-w) * .86); /* il tratto dritto del bordo superiore, senza gli angoli arrotondati */
  height: calc(var(--rete-h) * 47 / 44); /* i fili finiscono biforcandosi dentro il bordo del logo, per agganciarlo */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 47' preserveAspectRatio='none' fill='none' stroke='%23731223' stroke-width='.8' stroke-linecap='round'%3E%3Cpath d='M100 0L0 44M0 44L-2.5 47M0 44L2.5 47M100 0L25 44M25 44L22.5 47M25 44L27.5 47M100 0L50 44M50 44L47.5 47M50 44L52.5 47M100 0L75 44M75 44L72.5 47M75 44L77.5 47M100 0L100 44M100 44L97.5 47M100 44L102.5 47M100 0L125 44M125 44L122.5 47M125 44L127.5 47M100 0L150 44M150 44L147.5 47M150 44L152.5 47M100 0L175 44M175 44L172.5 47M175 44L177.5 47M100 0L200 44M200 44L197.5 47M200 44L202.5 47'/%3E%3Cpath d='M70.0 13.2Q76.9 11.6 77.5 13.2Q83.5 11.6 85.0 13.2Q90.1 11.6 92.5 13.2Q96.7 11.6 100.0 13.2Q103.3 11.6 107.5 13.2Q109.9 11.6 115.0 13.2Q116.5 11.6 122.5 13.2Q123.1 11.6 130.0 13.2M40.0 26.4Q53.8 23.2 55.0 26.4Q67.0 23.2 70.0 26.4Q80.2 23.2 85.0 26.4Q93.4 23.2 100.0 26.4Q106.6 23.2 115.0 26.4Q119.8 23.2 130.0 26.4Q133.0 23.2 145.0 26.4Q146.2 23.2 160.0 26.4M8.0 40.5Q29.2 35.6 31.0 40.5Q49.4 35.6 54.0 40.5Q69.6 35.6 77.0 40.5Q89.9 35.6 100.0 40.5Q110.1 35.6 123.0 40.5Q130.4 35.6 146.0 40.5Q150.6 35.6 169.0 40.5Q170.8 35.6 192.0 40.5'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transform-origin: 50% 0;
  pointer-events: none;
  will-change: transform;
  animation: sipario-colpo 1.6s linear .1s both, sipario-colpo-luce 1.6s linear .1s both;
}
/* Salita del logo (e di filo e rete con lui): fermo al centro fino al 25%, poi su con la curva del sipario normale */
@keyframes sipario-tira {
  from      { opacity: 0; transform: translateY(var(--intro-dy)); }
  12%       { opacity: 1; }
  25%       { opacity: 1; transform: translateY(var(--intro-dy)); animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  to        { opacity: 1; transform: translateY(0); }
}
/* Dondolio: fermo finché la rete non lo afferra (24%), poi lo strappo verso l'alto lo fa oscillare, sempre meno */
@keyframes sipario-dondola {
  from, 24% { rotate: 0deg; animation-timing-function: ease-out; }
  34%       { rotate: 5deg; animation-timing-function: ease-in-out; }
  48%       { rotate: -3.5deg; animation-timing-function: ease-in-out; }
  62%       { rotate: 2deg; animation-timing-function: ease-in-out; }
  76%       { rotate: -1deg; animation-timing-function: ease-in-out; }
  88%       { rotate: .4deg; animation-timing-function: ease-in-out; }
  to        { rotate: 0deg; }
}
/* Il filo: un filo lunghissimo che finisce sulla punta della rete e si muove solo con transform (più fluido). Fermo con
   la punta sul bordo alto della pagina finché il logo compare, poi scende veloce (12%-19%, frenando) fino alla rete;
   da lì è fermo rispetto al logo e sale con lui: sembra un filo sparato che poi si accorcia */
@keyframes sipario-sparo {
  from, 12% { transform: translateY(calc(-1 * (var(--filo-h) + var(--intro-dy)))); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  19%, to   { transform: translateY(0); }
}
/* La rete: si apre dalla punta verso il basso quando il filo arriva, con una curva che sfora appena e rientra */
@keyframes sipario-colpo {
  from, 18.5% { transform: translateX(-50%) scale(.08); animation-timing-function: cubic-bezier(.34, 1.45, .64, 1); }
  24.5%, to   { transform: translateX(-50%) scale(1); }
}
/* Visibilità (stessa linea del tempo di sipario-logo): il filo compare quando parte, il colpo quando arriva */
@keyframes sipario-filo-luce {
  from, 11.5% { opacity: 0; }
  12%, 85%    { opacity: .85; }
  to          { opacity: 0; }
}
@keyframes sipario-colpo-luce {
  from, 18.5% { opacity: 0; }
  19.5%, 85%  { opacity: .85; }
  to          { opacity: 0; }
}

/* Il gatto di Halloween: solo nero, con l'occhio giallo */
.gatto--nero { color: #1F1517; }
.gatto--nero .gatto__occhio { fill: #F2C230; }
/* Toccato, il gatto nero soffia (script.js: gatto--soffia): la schiena si inarca (la gobba sale dal basso e prende il
   posto della pancia), le zampe si tendono dritte, la coda si gonfia e si drizza, la testa si abbassa un po' */
.gatto__gobba { display: none; }
.gatto--soffia .gatto__pancia { display: none; }
.gatto--soffia .gatto__gobba { display: inline; transform-box: fill-box; transform-origin: 50% 100%; animation: gatto-gobba .18s ease-out both; }
.gatto--soffia .gatto__zampa { animation: none; transform: scaleY(1.06); }
.gatto--soffia .gatto__coda { stroke-width: 3.8; animation: gatto-coda-ritta .18s ease-out both; }
.gatto--soffia circle:not(.gatto__occhio),
.gatto--soffia polygon:not(.gatto__macchia),
.gatto--soffia .gatto__occhio { transform: translate(1px, 2.5px); }
.gatto--soffia .gatto__prrr { font-weight: 600; color: var(--ink); }
@keyframes gatto-gobba {
  from { transform: scaleY(.45); }
  to   { transform: scaleY(1); }
}
@keyframes gatto-coda-ritta {
  from { transform: rotate(0deg); }
  to   { transform: rotate(14deg); }
}

@media print {
  .tema-halloween .site-header::before,
  .tema-halloween .site-header::after,
  .tema-halloween .site-footer::before,
  .tema-halloween .site-footer::after,
  .tema-halloween .site-footer__copy::after,
  .ragnetto, .ragno, .chiazza { display: none; }
}