/* ==============================================
       CREATIVE SECTION DIVIDERS
       ============================================== */

    /* Divider Type A: Diagonal cut */
    .section-divider-diagonal {
      position: relative;
      height: 60px;
      background: #15110C;
      overflow: hidden;
    }
    .section-divider-diagonal::before {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      background: #1A150F;
      clip-path: polygon(0 40%, 100% 0%, 100% 100%, 0% 100%);
    }
    .section-divider-diagonal::after {
      content: '';
      position: absolute;
      top: 38%;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201,168,76,0.15), transparent);
      transform: rotate(-2.5deg);
      transform-origin: left center;
    }

    /* Divider Type B: Gold ornamental */
    .section-divider-ornament {
      position: relative;
      height: 50px;
      background: #15110C;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .section-divider-ornament::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201,168,76,0.12) 30%, rgba(201,168,76,0.12) 70%, transparent);
    }
    .section-divider-ornament-shape {
      position: relative;
      z-index: 1;
      width: 12px;
      height: 12px;
      border: 1px solid rgba(201,168,76,0.3);
      transform: rotate(45deg);
      background: #15110C;
    }
    .section-divider-ornament-shape::before,
    .section-divider-ornament-shape::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 30px;
      height: 1px;
      background: rgba(201,168,76,0.2);
    }
    .section-divider-ornament-shape::before {
      right: 100%;
      margin-right: 6px;
      transform: rotate(-45deg);
      transform-origin: right center;
    }
    .section-divider-ornament-shape::after {
      left: 100%;
      margin-left: 6px;
      transform: rotate(-45deg);
      transform-origin: left center;
    }

    /* Divider Type C: Gradient fade overlap */
    .section-divider-fade {
      position: relative;
      height: 40px;
      background: linear-gradient(to bottom, #15110C, #1A150F 50%, #15110C);
    }

    /* Divider Type D: Offset line with label */
    .section-divider-offset {
      position: relative;
      height: 44px;
      background: #15110C;
      display: flex;
      align-items: center;
    }
    .section-divider-offset::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 8%;
      width: 30%;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2));
    }
    .section-divider-offset-label {
      position: absolute;
      left: 40%;
      top: 50%;
      transform: translateY(-50%);
      font-family: var(--font-body);
      font-size: 8px;
      font-weight: 400;
      letter-spacing: 2px;
      color: rgba(201,168,76,0.2);
    }

    .menu-item {
      padding: 18px 0;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }
    .menu-item.visible { opacity: 1; transform: translateY(0); }

    .item-row {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .item-name {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: var(--text);
      line-height: 1.3;
    }

    .item-dots {
      flex: 1;
      border-bottom: 1px dotted rgba(201, 168, 76, 0.12);
      min-width: 14px;
      margin-bottom: 4px;
    }

    .item-price {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      color: var(--gold);
      white-space: nowrap;
      flex-shrink: 0;
    }

    .item-desc {
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 300;
      color: var(--text-secondary);
      line-height: 1.5;
      margin-top: 3px;
      /* margine destro: tiene la descrizione lontana dalla colonna prezzo
         (le descrizioni lunghe vanno a capo prima, mai sotto al prezzo) */
      padding-right: 52px;
    }
    /* Le pizze gestiscono già il loro spazio (prezzi a destra con gap) */
    .pizza-prow .item-desc { padding-right: 0; }

    .item-badge {
      display: inline-block;
      font-family: var(--font-body);
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gold-soft);
      background: rgba(201, 168, 76, 0.08);
      border: 1px solid rgba(201, 168, 76, 0.45);
      padding: 2px 9px;
      border-radius: 999px;
      margin-top: 6px;
    }

    @media (hover: hover) {
      .menu-item {
        border-radius: 4px;
        padding-left: 8px; padding-right: 8px;
        margin-left: -8px; margin-right: -8px;
        transition: opacity 0.4s, transform 0.4s, background 0.2s;
      }
      .menu-item:hover { background: var(--gold-glow); }
      .menu-item:hover .item-name { color: var(--gold-soft); }
    }

    /* === Layout compatto — birre, vini, bevande === */
    .menu-compact .menu-item {
      padding-top: 13px;
      padding-bottom: 13px;
    }
    .menu-compact .item-desc {
      font-size: 12.5px;
    }

    /* Sotto-gruppi dentro una sezione (es. Birre: alla spina / in bottiglia) */
    .menu-subgroup {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold-dim);
      margin: 22px 0 6px;
    }
    .menu-subgroup:first-child { margin-top: 4px; }

    /* VINI: sotto-titoli più eleganti — centrati, con filetti oro sfumati ai lati */
    #section-vini .menu-subgroup {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16px;
      text-align: center;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 4px;
      color: var(--gold-soft);
      margin: 32px 0 16px;
    }
    #section-vini .menu-subgroup:first-child { margin-top: 20px; }
    #section-vini .menu-subgroup::before,
    #section-vini .menu-subgroup::after {
      content: '';
      width: 34px;
      height: 1px;
      flex-shrink: 0;
    }
    #section-vini .menu-subgroup::before {
      background: linear-gradient(90deg, transparent, var(--gold-dim));
    }
    #section-vini .menu-subgroup::after {
      background: linear-gradient(90deg, var(--gold-dim), transparent);
    }

    /* Riga voce con doppio prezzo (birra alla spina) — prezzi allineati a destra */
    /* Righe a doppio prezzo (birre alla spina, acqua): stile PULITO come il resto
       del menu — niente box, nome + lineetta puntinata + due colonne prezzo a destra */
    .item-row--dual {
      align-items: center;   /* nome centrato rispetto al blocco etichetta+prezzo */
    }
    .item-row--dual .pizza-prices { margin-top: 0; gap: 22px; flex-shrink: 0; }
    /* Colonne prezzo a larghezza fissa: un nome lungo (es. "Messina Cristalli di Sale")
       non stringe più le colonne, che restano allineate riga per riga. */
    .item-row--dual .pizza-price-col { width: 80px; min-width: 80px; }
    .item-row--dual .pizza-price-label { white-space: nowrap; }
    .item-row--dual .pizza-price-divider { display: none; }
    .item-row--dual .item-dots { border-bottom: none; } /* spaziatore invisibile: niente lineetta, colonne a destra */
    .menu-compact .menu-item--dual { padding-top: 14px; padding-bottom: 14px; }

    /* === Food cards === */
    .food-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .food-card {
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.05);
      padding: 18px 20px;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.4s, transform 0.4s;
    }
    .food-card.visible { opacity: 1; transform: translateY(0); }

    .food-card-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }

    .food-card-name {
      font-family: var(--font-body);
      font-size: 15px;
      font-weight: 500;
      color: var(--text);
    }

    .food-card-price {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      color: var(--gold);
      white-space: nowrap;
    }

    .food-card-desc {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 300;
      color: rgba(237,232,224,0.45);
      line-height: 1.5;
    }

    .food-card-badge {
      display: inline-block;
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--gold-soft);
      background: rgba(201, 168, 76, 0.08);
      border: 1px solid rgba(201, 168, 76, 0.45);
      padding: 2px 9px;
      border-radius: 999px;
      margin-top: 8px;
    }

    /* === Pizza layout — Opzione A: nome+descr a sx, prezzi a dx === */
    /* Pizze — 2 righe allineate a baseline:
       riga 1 = NOME + etichette PIATTO/PALA · riga 2 = DESCRIZIONE + prezzi € */
    .pizza-list .menu-item {
      display: block;
      padding-top: 16px;
      padding-bottom: 16px;
    }
    .pizza-prow { display: flex; align-items: flex-start; gap: 28px; }
    .pizza-prow2 { align-items: baseline; margin-top: 3px; }
    .pizza-prow .item-name { line-height: 1; }
    .pizza-prow .pizza-price-label { line-height: 1; }
    .pizza-prow > .pztext { flex: 1; min-width: 0; }
    .pizza-pgroup { display: flex; gap: 20px; flex-shrink: 0; }
    .pizza-list .pizza-pcol { width: 52px; text-align: right; }
    .pizza-list .pizza-price-label { letter-spacing: 1px; margin-bottom: 0; }

    .pizza-prices {
      display: flex;
      gap: 0;
      margin-top: 6px;
    }

    .pizza-price-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      min-width: 60px;
    }

    .pizza-price-label {
      font-family: var(--font-body);
      font-size: 9px;
      font-weight: 400;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: rgba(237,232,224,0.5);
      margin-bottom: 2px;
    }

    .pizza-price-val {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      color: var(--gold);
    }

    .pizza-price-divider {
      width: 1px;
      background: rgba(255,255,255,0.06);
      margin: 0 14px;
      align-self: stretch;
    }

    /* Old divider — replaced by creative dividers */

    /* =============================================
       ALLERGENI — nomi in maiuscoletto oro sotto ogni voce
       + nota legale a piè di sezione (no icone, no box)
       ============================================= */
    /* Nota sotto un sotto-gruppo (es. "Tutti serviti con patatine fritte") */
    .menu-subgroup-note {
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 300;
      font-style: italic;
      color: var(--text-secondary);
      margin: -2px 0 8px;
    }

    /* Allergeni accanto al nome: oro tenue, piccolo, un filo sopra il nome
       (apice leggero — non in cima, non a baseline) */
    .allergen-sup {
      font-size: 0.64em;
      font-weight: 600;
      letter-spacing: 0.5px;
      color: var(--gold-dim);
      margin-left: 5px;
      vertical-align: 0.38em;
      white-space: nowrap;
    }

    /* Variante B: numeri grigi in parentesi a fine descrizione (no oro) */
    .allergen-codes {
      font-size: 0.92em;
      font-weight: 400;
      letter-spacing: 0.3px;
      color: rgba(237, 232, 224, 0.40);
      white-space: nowrap;
    }
    /* Variante B su voci senza descrizione: accanto al nome, comunque grigia */
    .allergen-codes-inline {
      font-size: 11px;
      font-weight: 400;
      vertical-align: baseline;
    }

    /* Didascalia introduttiva sopra la prima categoria cucina */
    .food-intro-caption {
      text-align: center;
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold-dim);
      margin: -16px 0 26px;   /* su verso la foto, e più stacco da ANTIPASTI */
    }

    /* Titolo grande di sezione SOTTO la foto (es. Pizze) + frase */
    .section-hero-below {
      text-align: center;
      margin: 12px 0 22px;
    }
    .section-title-below {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 44px;
      font-weight: 400;
      letter-spacing: 4px;
      color: var(--text);
      line-height: 1;
    }
    .section-tagline-below {
      text-align: center;
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 2.5px;
      text-transform: uppercase;
      color: var(--gold-dim);
      margin: -14px 0 24px;   /* subito sotto la foto, poi stacco dalle pizze */
    }

    /* === Cucina (Food) — layout editoriale: gruppi con filetto, righe pulite === */
    /* Titoli categoria — "pulito": display Bebas ORO, nessun fronzolo.
       Su mobile (no hover) il Bebas è già a filo coi nomi piatto. */
    .food-group {
      margin: 40px 0 14px;
    }
    .food-group:first-child { margin-top: 8px; } /* poco spazio sotto l'immagine hero */
    .food-group-head {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 14px;
    }
    .food-group-text {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 36px;
      font-weight: 400;
      letter-spacing: 1.5px;
      color: var(--gold-soft);
      line-height: 0.95;
    }
    .food-group-note {
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 300;
      font-style: italic;
      letter-spacing: 0.3px;
      color: var(--text-secondary);
      text-align: center;
      margin-top: 2px;
    }
    /* === Food — fasce-foto per categoria, AVVOLGENTI: la foto emerge dal buio
       e ci si ridissolve (niente bordi netti, flusso continuo editoriale) === */
    .food-band {
      position: relative;
      height: 168px;
      margin: 44px -24px 8px;       /* più respiro sopra ogni categoria; full-bleed ai lati */
      display: flex;
      align-items: center;         /* titolo al centro, "galleggia" accanto al piatto */
    }
    .food-band:first-child { margin-top: -44px; }  /* riduce lo spazio vuoto tra fine PIZZE e Antipasti */
    .food-band-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      filter: brightness(0.96) saturate(1.07);
    }
    /* DUE veli sovrapposti dello stesso nero pagina:
       1) verticale = la foto affiora dal nero sopra e si scioglie nel nero sotto
       2) orizzontale = velo a sinistra per il titolo (sfuma verso destra, non taglia) */
    .food-band::after {
      content: '';
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(28,25,22,0) 0%, rgba(28,25,22,0) 86%, rgba(28,25,22,0.5) 94%, #1C1916 100%),
        linear-gradient(90deg,
          rgba(11,10,9,0.82) 0%, rgba(11,10,9,0.45) 42%, rgba(11,10,9,0.08) 70%, transparent 92%);
    }
    /* === Normalizzazione zoom cibo: ogni piatto alla STESSA altezza (~128px),
       a destra e centrato in verticale. Valori calcolati misurando il bbox del
       cibo in ogni foto. Le bande scure residue cadono sotto la dissolvenza. === */
    .food-band--antipasti  .food-band-bg { background-size: 105%; background-position: 100% 0%; }
    .food-band--secondi    .food-band-bg { background-size: 145%; background-position: 100% 42%; }
    .food-band--hamburger  .food-band-bg { background-size: 130%; background-position: 78% center; }
    .food-band--insalatone .food-band-bg { background-size: 104%; background-position: 100% 0%; }
    .food-band--fritti     .food-band-bg { background-size: 100%; background-position: 50% 50%; }

    /* Categorie piccole (Contorni, Frutta): titolo tipografico, niente foto */
    .food-cat-text {
      display: flex;
      align-items: center;
      justify-content: center;   /* Contorni / Frutta centrate */
      gap: 14px;
      margin: 30px 0 12px;
    }
    .food-cat-text-name {
      flex-shrink: 0;
      font-family: var(--font-body);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold-soft);   /* Contorni / Frutta: titolo secondario, piccolo e oro */
    }

    /* Prima fascia (Antipasti): sfuma in basso più tardi (92%) così il tagliere resta luminoso */
    .food-band:first-child::after {
      background:
        linear-gradient(to bottom, rgba(28,25,22,0) 0%, rgba(28,25,22,0) 92%, rgba(28,25,22,0.45) 97%, #1C1916 100%),
        linear-gradient(90deg, rgba(11,10,9,0.82) 0%, rgba(11,10,9,0.45) 42%, rgba(11,10,9,0.08) 70%, transparent 92%);
    }

    .food-band-title { position: relative; z-index: 2; padding: 0 0 0 24px; } /* allineato ai nomi dei piatti */
    .food-band-name {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 34px;
      letter-spacing: 3px;
      color: var(--text);   /* titoli categoria bianchi */
      line-height: 1;
      text-shadow: 0 2px 16px rgba(0,0,0,0.95);
    }
    .food-band-note {
      display: block;
      font-family: var(--font-body);
      font-size: 10px;
      font-style: italic;
      color: var(--gold-soft);   /* "Tutti serviti con patatine fritte" in oro */
      text-shadow: 0 1px 10px rgba(0,0,0,0.95);
      margin-top: 3px;
    }

    .food-row { padding-top: 18px; padding-bottom: 18px; } /* niente override orizzontale: resta allineato (desktop+mobile) */
    .food-top {
      align-items: baseline;
      gap: 10px;
    }
    /* il nome resta a contenuto, la lineetta puntinata riempie fino al prezzo */
    .food-desc {
      padding-right: 52px;   /* descrizione va a capo prima del prezzo, mai sotto */
      margin-top: 4px;
    }
    /* Prezzo multi-taglia inline (Tagliere x2 · x4), senza box */
    .food-prices {
      display: inline-flex;
      align-items: baseline;
      gap: 16px;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .food-size { display: inline-flex; align-items: baseline; gap: 5px; }
    .food-price-sep { display: none; }
    .food-size-label {
      font-family: var(--font-body);
      font-size: 9px;
      font-weight: 600;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--text-secondary);
    }
    .food-size-val {
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 500;
      color: var(--gold);
    }
    .food-price-sep { color: var(--text-dim); margin: 0 2px; }

    /* Legenda numerata a piè di sezione: filetto + griglia + avviso in corsivo */
    .allergen-legend-fn {
      margin-top: 34px;
      padding-top: 18px;
    }
    .allergen-legend-title {
      font-family: var(--font-body);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--gold-dim);
      margin-bottom: 14px;
    }
    /* Legenda allergeni a tendina (apri/chiudi al click) */
    .allergen-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px 0;
      margin-bottom: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .allergen-chev {
      font-size: 17px;
      font-weight: 300;
      color: var(--gold);
      line-height: 1;
      transition: transform 0.3s ease;
    }
    .allergen-collapsible.open .allergen-chev { transform: rotate(45deg); }
    .allergen-body {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
    }
    .allergen-collapsible.open .allergen-body {
      max-height: 900px;
      opacity: 1;
      margin-top: 16px;
    }
    .allergen-legend-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 7px 18px;
    }
    .allergen-legend-item {
      display: flex;
      align-items: baseline;
      gap: 8px;
      font-family: var(--font-body);
      font-size: 11.5px;
      font-weight: 300;
    }
    .allergen-legend-num {
      flex-shrink: 0;
      min-width: 14px;
      font-weight: 600;
      font-size: 10.5px;
      color: var(--gold);
      text-align: right;
    }
    .allergen-legend-name { color: var(--text-secondary); }
    .allergen-note {
      margin-top: 16px;
      font-family: var(--font-body);
      font-size: 10.5px;
      font-weight: 300;
      font-style: italic;
      line-height: 1.6;
      letter-spacing: 0.2px;
      color: var(--text-dim);
      max-width: 62ch;
    }
    @media (min-width: 460px) {
      .allergen-legend-grid { grid-template-columns: repeat(3, 1fr); }
    }