/*
  Stili per il sito Gelateria Love Ice.
  La palette si ispira ai colori del logo: rosa, giallo e azzurro pastello.
  Il layout è moderno e pulito con ampi spazi bianchi e tipografia leggibile.
*/

/* Importa font premium per titoli e testo. Inter è un carattere moderno e pulito usato spesso nelle interfacce Apple. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* Font di supporto per tocchi decorativi (Quicksand) e script (Pacifico). */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600;700&family=Pacifico&display=swap');

:root {
  /*
    Palette colori aggiornata per una sensazione premium e moderna.
    Mantenendo i toni rosa, azzurro e violaceo del brand ma con
    saturazioni ridotte.  Le variabili card e border permettono
    uniformità nei riquadri translucidi.  Il testo scuro viene
    leggermente ravvivato per maggiore contrasto.
  */
  --primary-color: #FF7EB6;   /* rosa principale, più morbido */
  --secondary-color: #FFC8DD; /* rosa chiaro per sfondi */
  --accent-color: #BDE0FE;   /* azzurro pastello per bottoni */
  --accent-color-2: #A2D2FF; /* azzurro violaceo per gradienti */
  --dark-text: #111827;      /* grigio molto scuro */
  --light-bg: #FFFFFF;       /* bianco neutro */
  --card-bg: rgba(255, 255, 255, 0.65);
  --card-border: rgba(255, 255, 255, 0.4);
  --card-radius: 24px;
  /* placeholder removed */
  /* Colorazioni per pulsanti con azzurro più scuro per maggiore visibilità */
  /* Pulsanti blu più scuri per maggiore visibilità */
  --button-blue: #5FA8E1;
  --button-blue-hover: #4E8FCC;
  /* Navbar tint and hover backgrounds */
  --nav-item-bg: rgba(173, 216, 230, 0.35); /* celeste chiaro per pulsanti navbar */
  --nav-item-hover-bg: rgba(173, 216, 230, 0.65);
}

/*
  Tipografia
  Utilizziamo i font di sistema Apple (SF Pro Display/Text) quando disponibili,
  ricadendo su Poppins o sans‑serif per un aspetto moderno.  I titoli
  utilizzano il display font con un peso maggiore e tracking sottile per
  eleganza.  I paragrafi hanno un'altezza di riga generosa per migliorare
  la leggibilità su schermi piccoli.
*/
h1, h2, h3, h4, h5, h6 {
  /* Utilizza Inter per i titoli. In caso contrario ricade sui font di sistema. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-top: 0;
}

p {
  /* Inter viene utilizzato per i paragrafi per una lettura chiara su schermi di tutte le dimensioni */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Poppins", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 1rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  /* Inter come font principale per il corpo del testo con fallback ai font di sistema. */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Text", "Poppins", sans-serif;
  color: var(--dark-text);
  /* Sostituisce l'immagine di sfondo con un gradiente armonioso tra i colori
     principali del brand. Questo migliora la performance e mantiene
     un aspetto pulito e moderno. */
  background-image: linear-gradient(180deg, var(--secondary-color) 0%, var(--accent-color) 100%);
  background-attachment: scroll;
  background-size: cover;
  background-repeat: no-repeat;
}

a {
  color: inherit;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation bar */
/* Navbar con effetto vetro (glassmorphism) */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  /* Header semitrasparente con maggior opacità e blur per richiamare
     la barra di navigazione di iOS. */
  /* Maggiore luminosità e opacità per ricordare la navigation bar iOS */
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

.logo {
  height: 64px;
  width: auto;
}

.navlinks ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* Riduci lo spazio tra le voci per un aspetto più compatto */
  gap: 1.5rem;
}

.navlinks a {
  text-decoration: none;
  color: var(--dark-text);
  font-weight: 500;
  /* Maggiore padding verticale e minore orizzontale per un aspetto più pulito */
  padding: 0.6rem 0.3rem;
  /* Bordo inferiore trasparente che verrà colorato al passaggio del mouse */
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
  /* Niente sfondo per uno stile più minimale in stile Apple */
  background-color: transparent;
}

.navlinks a:hover {
  /* Mantieni lo sfondo trasparente e colora la scritta e il bordo inferiore */
  background-color: transparent;
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* -------------------------------------------- */
/*  Mobile navigation (menu a tendina Apple‑tech) */
/* -------------------------------------------- */

/* Pulsante hamburger per dispositivi mobili. Su desktop rimane nascosto. */
/* Pulsante hamburger visibile su tutte le dimensioni di schermo.
   Su desktop funge da menu a tendina avanzato in stile Apple. */
.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 40px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

/* Barre interne del pulsante hamburger */
.menu-toggle .bar {
  width: 100%;
  height: 3px;
  background-color: var(--dark-text);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Stato aperto del pulsante hamburger: trasforma le barre in una X */
.menu-toggle.open .bar:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle.open .bar:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* Overlay che appare quando il menu è aperto */
.menu-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* Overlay leggero e trasparente per non oscurare i contenuti sottostanti */
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 1000;
}
.menu-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Menu mobile: versione premium
   Il menu mobile ora occupa l'intera larghezza dello schermo e scorre da destra
   grazie a una trasformazione. Questo evita spazi vuoti tra il contenuto e il
   pannello e dà un effetto più professionale. */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background: var(--light-bg);
  backdrop-filter: blur(20px);
  box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1);
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem 1.5rem;
}
.mobile-menu.open {
  transform: translateX(0);
}
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.mobile-menu a {
  /* Resetta il link di base: verrà sovrascritto dalle regole più specifiche di seguito */
  text-decoration: none;
  color: var(--dark-text);
  font-weight: 600;
  font-size: 1.25rem;
  transition: color 0.2s;
}
/* Stile premium per i link del menu mobile: pulsanti arrotondati e tinta leggera */
.mobile-menu ul li a {
  display: block;
  width: 100%;
  padding: 0.8rem 1.2rem;
  border-radius: 28px;
  background: var(--nav-item-bg);
  color: var(--dark-text);
  font-size: 1.2rem;
  font-weight: 600;
  transition: background-color 0.25s ease, transform 0.2s ease;
}
.mobile-menu ul li a:hover {
  background: var(--nav-item-hover-bg);
  color: var(--dark-text);
  transform: translateY(-2px);
}
.mobile-menu .cta-item {
  margin-top: 2rem;
  width: 100%;
}
.mobile-menu .btn-primary,
.mobile-menu .btn-secondary {
  display: block;
  text-align: center;
  margin: 0.6rem 0;
  width: 100%;
  padding: 0.8rem;
  border-radius: 28px;
  font-size: 1.1rem;
}

/* Quick navigation section: pulsanti per categorie menu */
.quick-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  padding: 1rem 0;
  margin-top: -1rem;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}
.quick-nav .nav-btn {
  padding: 0.6rem 1rem;
  border-radius: 16px;
  background: var(--button-blue);
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background-color 0.2s, transform 0.2s;
}
.quick-nav .nav-btn:hover {
  background: var(--button-blue-hover);
  transform: translateY(-2px);
}

/* Evidenzia temporaneamente un elemento quando viene trovato dalla ricerca */
.highlight-search {
  animation: highlight-search 1.5s ease;
}

@keyframes highlight-search {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 0, 128, 0.4);
  }
  50% {
    box-shadow: 0 0 20px 10px rgba(255, 0, 128, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 0, 128, 0.4);
  }
}

/* Responsività: su schermi piccoli nascondi le link list e mostra il pulsante hamburger */
@media (max-width: 768px) {
  .navlinks {
    display: none;
  }
  .hero.hero-new {
    padding: 3rem 0 2rem;
  }
  /* Nascondi il pulsante CTA della navbar su schermi stretti */
  .nav-cta {
    display: none;
  }
}

/* Hero section */
/* Hero con gradient semi‑trasparente per far intravedere lo sfondo */
.hero {
  /* Nuovo gradiente per la sezione eroe con i colori principali.
     Altezza ridotta su mobile e layout centrato verticalmente. */
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color-2) 100%);
  color: #ffffff;
  text-align: center;
  padding: 3rem 0 2rem;
  margin-top: 0;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Permette alle pseudo-element di posizionarsi */
  position: relative;
}

/* Decorazioni fluttuanti per la sezione eroe */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
}

/* ------------------------------------------------------------------ */
/* Nuovo layout per la hero della homepage in stile promozionale        */
/* ------------------------------------------------------------------ */

/* Applica un layout in due colonne alla sezione eroe della homepage. */
.hero.hero-new {
  /* Override le proprietà della hero base */
  display: block;
  color: var(--dark-text);
  text-align: left;
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color-2) 100%);
  /* Riduci l’altezza della sezione eroe per rendere l’intestazione più compatta */
  padding: 3rem 0 2.5rem;
  min-height: unset;
  position: relative;
}

/* Decorazioni personalizzate per la hero nuova: grandi forme sfumate ai lati 
   che ricordano le grafiche Apple con colori pastello e un effetto blur. */
.hero.hero-new::before,
.hero.hero-new::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  /* Maggiore blur per conferire un effetto più soffuso e lucido */
  filter: blur(120px);
}

/* Sfera pastello in alto a sinistra */
.hero.hero-new::before {
  width: 520px;
  height: 520px;
  top: -200px;
  left: -200px;
  background: radial-gradient(circle at center, var(--secondary-color) 0%, rgba(255, 255, 255, 0) 65%);
}

/* Sfera pastello in basso a destra */
.hero.hero-new::after {
  width: 400px;
  height: 400px;
  bottom: -150px;
  right: -150px;
  background: radial-gradient(circle at center, var(--accent-color-2) 0%, rgba(255, 255, 255, 0) 65%);
}

/* Varianti personalizzate per la hero della pagina Gelati & Torte. Aumentano la
   dimensione e la sfocatura delle decorazioni per un look più dinamico. */
.hero.hero-new.gt-hero::before {
  width: 650px;
  height: 650px;
  top: -220px;
  left: -220px;
  background: radial-gradient(circle at center, var(--secondary-color) 0%, rgba(255, 255, 255, 0) 65%);
  filter: blur(140px);
}
.hero.hero-new.gt-hero::after {
  width: 500px;
  height: 500px;
  bottom: -180px;
  right: -180px;
  background: radial-gradient(circle at center, var(--accent-color-2) 0%, rgba(255, 255, 255, 0) 65%);
  filter: blur(140px);
}

/* --------------------------------------------------------- */
/* Elementi aggiuntivi per le hero e la navbar               */
/* --------------------------------------------------------- */

/* CTA nella navbar (versione desktop) */
.nav-cta {
  margin-left: auto;
}
.nav-cta a {
  /* Stesse dimensioni dei pulsanti principali ma con leggera riduzione */
  padding: 0.5rem 1.2rem;
  border-radius: 24px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  color: #fff;
  background-color: var(--primary-color);
  transition: background-color 0.3s, transform 0.2s;
}
.nav-cta a:hover {
  background-color: #e86399;
  transform: translateY(-2px);
}

/* Stile per evidenziare una parola nel titolo della hero */
.hero-title .highlight {
  color: var(--primary-color);
}

/* Stile per i pulsanti della hero con icone */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.btn-hero .btn-icon {
  font-size: 1rem;
}

/* Link 'Scopri di più' con freccia verso il basso */
.hero-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1.2rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}
.hero-learn-more:hover {
  color: var(--button-blue);
  transform: translateY(-2px);
}

/* Righe di categorie per la pagina Gelati & Torte */
.category-row {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: -2rem;
  z-index: 1;
  position: relative;
}
.category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 1rem 0.8rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  width: 120px;
  color: var(--dark-text);
  transition: background-color 0.3s, transform 0.2s;
}
.category-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateY(-4px);
}
.category-item .icon {
  font-size: 2rem;
}
.category-item .label {
  margin-top: 0.4rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}

/* Miglioramento responsività per la riga di categorie */
@media (max-width: 768px) {
  .category-row {
    overflow-x: auto;
    justify-content: flex-start;
    padding-left: 1rem;
    margin-top: -1rem;
  }
  .category-item {
    flex: 0 0 auto;
    margin-right: 0.6rem;
    width: 100px;
  }
}

/* Contenitore interno flessibile per la nuova hero */
.hero-container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

/* Colonna di testo */
.hero-text {
  flex: 1 1 480px;
  max-width: 600px;
}

/* Piccolo titolo introduttivo */
.hero-small-heading {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--primary-color);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* Titolo principale della hero */
.hero-title {
  /* Dimensione ridotta per un aspetto meno invasivo su desktop */
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--dark-text);
}

/* Descrizione all'interno della hero */
.hero.hero-new .hero-description {
  color: var(--dark-text);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 100%;
}

/* Contenitore dei pulsanti nella hero */
.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Colonna immagine */
.hero-image {
  flex: 1 1 380px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Immagine della hero: dimensioni controllate e ombra morbida */
.hero-image img {
  /* Riduci leggermente la larghezza massima dell’immagine per bilanciare meglio la composizione */
  max-width: 420px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* Etichetta "100% Artigianale" sovrapposta */
.hero-label {
  position: absolute;
  top: 12%;
  right: 0;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary-color);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
}

/* Migliora la visibilità su dispositivi mobili */
@media (max-width: 760px) {
  .hero-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hero-title {
    font-size: 2.4rem;
  }
  .hero-image {
    order: -1;
    margin-bottom: 2rem;
  }
  .hero-label {
    top: 5%;
    right: 50%;
    transform: translateX(50%);
  }
}
.hero::before {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.35), transparent 70%);
  top: -150px;
  left: -100px;
  filter: blur(80px);
}
.hero::after {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.25), transparent 70%);
  bottom: -120px;
  right: -120px;
  filter: blur(80px);
}

/* ------------------------------------------------------------------ */
/* Nuovo layout per le sezioni hero con card traslucida
   La sezione hero generica definisce lo sfondo gradiente, mentre la
   card interna ha un aspetto vetro (glassmorphism) con angoli arrotondati,
   bordo sottile e ombra soffusa.  Le varianti home-hero e gt-hero-section
   adattano testi e contenuti specifici delle rispettive pagine. */
.hero-section {
  width: 100%;
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--accent-color-2) 100%);
  padding: 3.5rem 0 2.5rem;
  position: relative;
  color: var(--dark-text);
}

/* Card interna della hero */
.hero-card {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 3rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  position: relative;
}

/* Colonna di testo nella hero card */
.hero-card-left {
  flex: 1 1 500px;
  max-width: 600px;
}

/* Badge per indicare la artigianalità */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background-color: var(--primary-color);
  padding: 0.4rem 0.8rem;
  border-radius: 24px;
  margin-bottom: 1rem;
}
.hero-badge .badge-icon {
  font-size: 1rem;
}

/* Titolo grande della card */
.hero-card-title {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--dark-text);
}

/* Descrizione della card */
.hero-card-description {
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 100%;
  margin-bottom: 1.8rem;
  color: var(--dark-text);
}

/* Pulsanti nella hero card */
.hero-card-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

/* Link 'Scopri di più' nella card */
.hero-card-learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}
.hero-card-learn-more:hover {
  color: var(--button-blue);
  transform: translateY(-2px);
}

/* Colonna immagine nella hero card */
.hero-card-right {
  flex: 1 1 380px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hero-card-right img {
  max-width: 450px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

/* Varianti della hero per la pagina Gelati & Torte: nessuna differenza di base, ma predisposto per personalizzazioni future */
.gt-hero-section .hero-card-title {
  /* Riduci leggermente la dimensione del titolo per le pagine interne */
  font-size: 2.6rem;
}

/* Pannello di categorie posizionato sotto la hero per la pagina Gelati & Torte */
.categories-panel {
  width: 90%;
  max-width: 1200px;
  margin: 1.5rem auto 3rem;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  padding: 1.2rem 2rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 2;
}
.categories-panel .category {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex: 1 1 140px;
  min-width: 120px;
  max-width: 180px;
  padding: 1rem 0.5rem;
  border-radius: 24px;
  color: var(--dark-text);
  transition: transform 0.2s, background-color 0.3s;
}
.categories-panel .category:hover {
  transform: translateY(-4px);
  background-color: rgba(255, 255, 255, 0.8);
}
.categories-panel .category .icon {
  font-size: 2rem;
  margin-bottom: 0.4rem;
  color: var(--primary-color);
}
.categories-panel .category .label {
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

/* Responsività per hero card e pannello categorie */
@media (max-width: 768px) {
  .hero-card {
    flex-direction: column;
    text-align: center;
    padding: 2.5rem 1.5rem;
  }
  .hero-card-left, .hero-card-right {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .hero-card-right {
    order: -1;
    margin-bottom: 1.5rem;
  }
  .hero-card-title {
    font-size: 2.4rem;
  }
  .categories-panel {
    padding: 1rem 1rem;
    overflow-x: auto;
    justify-content: flex-start;
  }
  .categories-panel .category {
    flex: 0 0 auto;
    width: 120px;
    margin-right: 0.8rem;
  }
}

/* Contenitore per logo e titolo nella hero */
.hero-header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero-header .hero-logo {
  /* Logo più grande per maggiore impatto visivo ma con dimensione controllata */
  width: 150px;
  height: auto;
  width: auto;
  margin: 0;
}
@media (max-width: 680px) {
  .hero-header {
    flex-direction: column;
  }
  .hero-header .hero-logo {
    /* Riduci ulteriormente il logo su dispositivi piccoli mantenendo proporzioni */
    width: 110px;
    height: auto;
    margin-bottom: 0.5rem;
  }
}

.hero h1 {
  margin: 0 0 0.25rem;
  font-size: 3.2rem;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Poppins", sans-serif;
  font-weight: 700;
  text-shadow: none;
}

/* Stile per la tagline e il testo eroe */
.hero-tagline {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Poppins", sans-serif;
  font-size: 1.6rem;
  margin: 0 0 1.2rem;
  letter-spacing: -0.01em;
  text-shadow: none;
  font-weight: 500;
}

.hero p {
  margin: 0 auto;
  font-weight: 400;
  font-size: 0.95rem;
  max-width: 480px;
  line-height: 1.6;
}

/* Menu section */
.menu-section {
  padding: 4rem 0;
}

.menu-section h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  color: var(--primary-color);
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

/* Ogni card del menu usa il vetro semitrasparente */
.menu-item {
  background-color: var(--card-bg);
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  transition: transform 0.2s;
  display: flex;
  flex-direction: column;
}

.menu-item:hover {
  transform: translateY(-4px) scale(1.01);
}

.item-img {
  width: 100%;
  /* Aumenta l'altezza per mostrare meglio l'immagine e utilizza contain per non tagliare i prodotti */
  height: 260px;
  object-fit: contain;
  /* Sfondo neutro dietro l'immagine per riempire eventuali barre vuote */
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  /* Mantieni l'opacità piena per immagini nitide */
  opacity: 1;
}

.item-content {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.item-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-color);
}

.item-content p {
  margin: 0;
  flex-grow: 1;
  font-size: 0.9rem;
  line-height: 1.4;
}

.price {
  margin-top: 1rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: #000;
}

/* Testo per i gusti delle granite */
.granita-flavors {
  margin-top: 0.25rem;
  margin-bottom: 1rem;
  font-size: 1rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 500;
  color: var(--dark-text);
  text-align: center;
}

/* Titoli per le nuove categorie del menu (BeShake, Smoothies, Ginseng, Granite) */
.menu-category-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--primary-color);
  margin: 3rem 0 1rem;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Drinks grid and items */
.drinks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.drink-item {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.drink-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary-color);
}

.drink-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  flex-grow: 1;
}

.drink-item .price {
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: #000;
}

.note {
  /* Note paragraphs più grandi e leggibili per descrizioni estese */
  margin-top: 2rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--dark-text);
}

/* Ricerca menu */
.menu-search {
  text-align: center;
  margin-bottom: 2rem;
}

#menu-search {
  width: 100%;
  max-width: 480px;
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  color: var(--dark-text);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

#menu-search::placeholder {
  color: #999999;
}

/* Services section */
.services-section {
  padding: 4rem 0;
}

.services-section h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}

.service-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.service-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.service-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Highlight section */
.highlight-section {
  padding: 4rem 0;
}

.highlight-section h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.highlight-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.highlight-img-wrapper {
  flex: 1 1 40%;
  min-width: 240px;
  /* Increase the maximum height so vertical images fit without being cropped */
  /* Make the highlight image container taller so that portrait images like the Coppa Love Ice fit entirely */
  max-height: 400px;
  overflow: hidden;
}

.highlight-img {
  width: 100%;
  height: 100%;
  /* Show the entire highlight image instead of cropping it */
  object-fit: contain;
  object-position: center;
  /* Make the image fully visible without additional transparency */
  opacity: 1;
}

.highlight-content {
  flex: 1 1 60%;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.highlight-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.highlight-content p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.highlight-content .price {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  color: #000;
  font-weight: 600;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.02em;
}

.btn:hover {
  background-color: #E86399;
  transform: translateY(-2px);
}

.btn-small {
  display: inline-block;
  padding: 0.4rem 1rem;
  background-color: var(--button-blue);
  color: #ffffff;
  border-radius: 10px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background-color 0.2s, transform 0.2s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.btn-small:hover {
  background-color: var(--button-blue-hover);
  transform: translateY(-1px);
}

/* Funzioni section */
.funzioni-section {
  padding: 4rem 0;
}

.funzioni-section h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

.funzioni-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.funzione-card {
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.funzione-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.funzione-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.funzione-card p {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Info and contact sections */
/* Sezioni info e contatti con fondo traslucido */
.info-section, .contact-section {
  padding: 4rem 0;
  background-color: var(--card-bg);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--card-border);
  border-bottom: 1px solid var(--card-border);
}

.info-section h2, .contact-section h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.info-item h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
}

.info-item p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.contact-section p {
  text-align: center;
  margin: 0.5rem 0;
  font-size: 0.95rem;
}

.contact-section a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.contact-section a:hover {
  text-decoration: underline;
}

/* Contact icons */
.contact-icon {
  margin-right: 0.5rem;
  font-size: 1.2rem;
  color: var(--primary-color);
}

/* Footer */
.footer {
  /* Footer in tonalità rosa ispirato alla palette del brand. */
  background-color: var(--secondary-color);
  color: var(--dark-text);
  text-align: center;
  padding: 2rem 0;
  font-size: 0.85rem;
  margin-top: 3rem;
}

/* Link nel footer: colore delicato e sottolineatura al passaggio */
.footer a {
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 500;
}

.footer a:hover {
  text-decoration: underline;
}

/* About, Gallery, FAQ, Reviews sections */
.about-section,
.gallery-section,
.faq-section,
.reviews-section {
  padding: 4rem 0;
}

.about-section h2,
.gallery-section h2,
.faq-section h2,
.reviews-section h2 {
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 2rem;
}

/* About grid layout */
.about-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.about-text {
  flex: 1 1 50%;
  min-width: 280px;
  /* Aggiunge un box translucido per rendere il testo più leggibile e raffinato */
  background-color: var(--card-bg);
  padding: 1.5rem;
  border-radius: var(--card-radius);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.about-text h3 {
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--primary-color);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.about-text p {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444444;
}

/* Evidenzia parole chiave nel testo "Chi siamo" con il colore principale */
.about-text strong {
  color: var(--primary-color);
  font-weight: 600;
}

.about-image {
  flex: 1 1 50%;
  min-width: 280px;
  text-align: center;
}

.about-img {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  opacity: 0.85;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Gallery section */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.gallery-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px;
  opacity: 0.9;
  transition: transform 0.2s;
}

.gallery-img:hover {
  transform: scale(1.05);
}

/* FAQ section */
.faq-list details {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  margin-bottom: 1rem;
  padding: 1rem 1.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.faq-list summary {
  font-weight: 600;
  color: var(--primary-color);
  cursor: pointer;
  outline: none;
}

.faq-list p {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Stile per i marker del componente FAQ */
.faq-list details summary::-webkit-details-marker {
  display: none;
}
.faq-list summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.2s;
}
.faq-list details[open] summary::before {
  transform: rotate(90deg);
}

/* Reviews section */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.review-card {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.stars {
  color: var(--secondary-color);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.review-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.review-card .author {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  font-style: italic;
  color: #666;
}

/* Area per il link alle recensioni complete su Google */
.reviews-more {
  text-align: center;
  margin-top: 1.5rem;
}

/* Info section icons */
.info-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  max-width: 280px;
}

.info-icon {
  font-size: 1.5rem;
  color: var(--primary-color);
  line-height: 1.2;
}

.info-text h3 {
  margin: 0 0 0.25rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--primary-color);
}

/* Section logo used next to headings */
.section-logo {
  width: 40px;
  height: auto;
  margin-right: 0.5rem;
  vertical-align: middle;
  display: inline-block;
}

/* Title wrapper for sections with logo inline.  This class uses flexbox
   to horizontally align the logo and the heading text, making the
   section headings feel more cohesive. It also inherits the
   typography sizing and color from other section headers. */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  font-size: 2rem;
  font-weight: 600;
  color: var(--primary-color);
  margin-bottom: 2rem;
  text-align: center;
}

/* Ensure images inside the title flex container retain the same size as
   defined by .section-logo */
.section-title .section-logo {
  width: 40px;
  height: auto;
  display: inline-block;
}

/* Logo displayed in the hero section */
.hero-logo {
  width: 96px;
  height: auto;
  display: block;
  margin: 0 0 1rem;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Pulsante principale nella sezione eroe */
.hero-btn {
  margin-top: 1.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 14px;
}

/* Footer logo */
.footer-logo {
  width: 80px;
  height: auto;
  margin-bottom: 0.5rem;
}

/* Footer inner container alignment */
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ================================ */
/* Stili specifici per la pagina Gelati & Torte */
/* La pagina gelati_e_torte.html utilizza la classe page-gt sul tag <body> per applicare questi stili. */

/* Navigation bar con pulsanti rotondi e icone per la pagina Gelati & Torte */
.page-gt .navlinks ul {
  display: flex;
  gap: 0.75rem;
}

.page-gt .navlinks a {
  /* Per la navigazione della pagina Gelati & Torte, utilizza lo stesso stile minimal della navbar principale */
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.3rem;
  background-color: transparent;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Poppins', sans-serif;
  font-weight: 500;
  color: var(--dark-text);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.page-gt .navlinks a:hover {
  background-color: transparent;
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Titoli della pagina Gelati & Torte */
.page-gt h1,
.page-gt h2 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: var(--primary-color);
}

.page-gt h3 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
}

/* Sezione eventi: layout e colori */
.events-section {
  padding: 4rem 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.events-section h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
  font-family: 'Pacifico', cursive;
}

.events-section p {
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  text-align: center;
  margin: 0.5rem auto;
  max-width: 700px;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border-radius: 24px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.btn-primary {
  background-color: var(--primary-color);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #e86399;
}

.btn-secondary {
  background-color: var(--button-blue);
  color: #ffffff;
}

.btn-secondary:hover {
  background-color: var(--button-blue-hover);
}

/* --- Aggiornamenti finali: mobile, navbar, legal, eventi --- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
/* Rimosse le versioni precedenti degli stili delle navlinks per evitare conflitti.
   Le nuove definizioni si trovano più in alto nel file. */
.menu-category-title { scroll-margin-top: 110px; }
.item-img { object-fit: contain !important; background: rgba(255,255,255,.35); }
.single-feature { grid-template-columns: minmax(0, 1fr); max-width: 780px; margin-inline: auto; }
.aperitivo-card .item-img { max-height: 520px; }
.event-gallery { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin:1.5rem 0; }
.event-card { background:rgba(255,255,255,.75); border-radius:24px; padding:1rem; box-shadow:0 12px 34px rgba(0,0,0,.08); text-align:center; }
.event-card img { width:100%; height:360px; object-fit:contain; border-radius:18px; background:rgba(255,255,255,.45); }
.event-card h3 { margin:.75rem 0 .25rem; color:var(--primary-color); }
.legal-links {
  margin-top: 1rem;
  font-size: 1rem;
}
.legal-links a {
  /* Colore accentuato per contrastare il footer rosa */
  color: var(--primary-color);
  text-decoration: none;
  font-weight: 600;
}
.legal-links a:hover {
  text-decoration: underline;
}
.legal-page { background-image:url('images/background.png'); background-size:cover; background-attachment:fixed; }
.legal-content { padding:4rem 0; }
.legal-card { background:rgba(255,255,255,.82); backdrop-filter:blur(14px); border-radius:28px; padding:2rem; box-shadow:0 16px 45px rgba(0,0,0,.08); line-height:1.7; }
.legal-card h1,.legal-card h2 { color:var(--primary-color); font-family:'Quicksand','Poppins',sans-serif; }
.cookie-banner { position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:9999; display:none; gap:.75rem; align-items:center; justify-content:space-between; padding:1rem; border-radius:22px; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); box-shadow:0 14px 40px rgba(0,0,0,.16); }
.cookie-banner.show { display:flex; }
.cookie-banner p { margin:0; font-size:.88rem; }
.cookie-banner div { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.cookie-banner a { color:var(--primary-color); font-weight:700; text-decoration:none; }
.cookie-banner button { border:0; border-radius:999px; padding:.55rem .9rem; background:var(--primary-color); color:#fff; font-weight:700; cursor:pointer; }
@media (max-width: 760px){
  .container { width:92%; }
  .navbar .container, .nav-container { align-items:flex-start; gap:.6rem; }
  .logo { height:48px; }
  .navlinks { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.25rem; }
  .navlinks ul { flex-wrap:nowrap; justify-content:flex-start; min-width:max-content; gap:.45rem; }
  .navlinks a { font-size:.88rem; padding:.45rem .72rem; white-space:nowrap; }
  .hero { padding:3.6rem 0 2.7rem; }
  /* Mantiene dimensioni generose anche su schermi piccoli */
  .hero h1 { font-size: 2.4rem; }
  .menu-grid, .drinks-grid { grid-template-columns:1fr; gap:1rem; }
  .item-img { height:245px; }
  .event-card img { height:300px; }
  .cookie-banner { flex-direction:column; align-items:flex-start; }
}
@media (max-width: 420px){ .item-img{height:220px}.event-card img{height:260px}.legal-card{padding:1.35rem;border-radius:22px} }

/* Descrizioni personalizzate per torte e capriccetti su Gelati & Torte */
.torte-description p,
.capriccetti-desc p {
  font-size: 1.15rem;
  line-height: 1.7;
  font-weight: 500;
  font-family: 'Mulish', sans-serif;
  color: #333333;
  text-align: center;
  max-width: 720px;
  margin: 0.5rem auto;
}

/* Descrizione introduttiva dei capriccetti: centra il testo e usa un font elegante */
.capriccetti-section .section-intro {
  text-align: center;
  font-family: 'Mulish', sans-serif;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.6;
  color: #333333;
  max-width: 720px;
  margin: 0 auto 1rem;
}


/* ===== Love Ice final navbar + mobile polish ===== */
.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .65rem;
  flex-wrap: nowrap;
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: .72rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: -0.01em;
  color: var(--dark-text);
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: 0 8px 24px rgba(17, 24, 39, .08);
  backdrop-filter: blur(18px);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}
.nav-pill:hover,
.nav-pill:focus-visible {
  transform: translateY(-1px);
  background: rgba(255,255,255,.9);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .12);
}
.nav-pill-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), #f062a7);
  border-color: rgba(255,255,255,.4);
}
.nav-pill-primary:hover,
.nav-pill-primary:focus-visible { background: linear-gradient(135deg, #ff7eb6, #e9559b); }
.menu-toggle,
.mobile-menu,
.menu-overlay,
.navlinks,
.nav-cta { display: none !important; }
.menu-search { display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.menu-search input { min-width:min(100%, 320px); }
.search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  padding: .75rem 1rem;
  background: var(--button-blue);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(95,168,225,.25);
}
.search-focus {
  outline: 3px solid rgba(255,126,182,.45);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(17,24,39,.12) !important;
}
.search-dim { opacity: .42; }
@media (max-width: 768px) {
  .navbar .container.nav-shell { width: 94%; padding: .55rem 0; gap: .55rem; }
  .logo { height: 46px; }
  .top-actions { flex: 1; justify-content: flex-end; gap: .4rem; }
  .nav-pill { min-height: 38px; padding: .6rem .7rem; font-size: .78rem; }
  body { overflow-x: hidden; }
  .hero-card-buttons { justify-content: center; align-items: center; width: 100%; }
  .btn-hero { min-width: 0; }
  .menu-grid { display: flex; flex-direction: column; }
}
@media (max-width: 380px) {
  .nav-pill { padding: .52rem .55rem; font-size: .72rem; }
  .logo { height: 40px; }
}


/* ===== Final polish: 5-button Apple navbar + description cards ===== */
.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .7rem;
  flex-wrap: nowrap;
}
.nav-pill {
  min-height: 44px;
  padding: .78rem 1.08rem;
  border-radius: 999px;
  background: rgba(255,255,255,.76);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 10px 28px rgba(17, 24, 39, .09);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-pill-primary {
  background: linear-gradient(135deg, #ff7eb6, #ef5fa4);
  color: #fff;
}
.description-card {
  width: min(820px, 100%);
  margin: 1rem auto 1.8rem;
  padding: 1.25rem 1.45rem;
  border-radius: 28px;
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 18px 46px rgba(17, 24, 39, .08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  text-align: center;
}
.description-card-wide { width: min(920px, 100%); }
.description-card p {
  margin: .35rem auto;
  max-width: 760px;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #1f2937;
}
.description-card strong {
  color: var(--primary-color);
  font-weight: 800;
}
.description-card .desc-tag {
  display: inline-flex;
  align-items: center;
  padding: .18rem .55rem;
  margin: 0 .15rem;
  border-radius: 999px;
  background: rgba(255,126,182,.14);
  color: var(--primary-color);
  font-weight: 800;
}
.description-card-cta .btn-primary,
.description-card-cta .btn-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: .8rem;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(255,126,182,.25);
}
.events-section .description-card { margin-bottom: 2rem; }
.event-card img[src*="karaoke_loveice_2026"] {
  object-fit: cover;
  object-position: center;
}
@media (max-width: 768px) {
  .top-actions { gap: .38rem; overflow-x: auto; padding-left: .25rem; -webkit-overflow-scrolling: touch; }
  .nav-pill { min-height: 38px; padding: .58rem .66rem; font-size: .72rem; white-space: nowrap; }
  .description-card { padding: 1rem .9rem; border-radius: 22px; margin: .85rem auto 1.35rem; }
  .description-card p { font-size: .96rem; line-height: 1.65; }
}
@media (max-width: 390px) {
  .nav-pill { font-size: .68rem; padding: .52rem .55rem; }
}
.event-card img[src*="karaoke_loveice_2026"] {
  object-fit: contain !important;
  background: rgba(255,255,255,.55);
  max-height: 620px;
}


/* ===== Contact nav final adjustment ===== */
@media (max-width: 768px) {
  .top-actions { justify-content: flex-start; max-width: calc(100vw - 92px); }
  .nav-pill { flex: 0 0 auto; }
}
@media (max-width: 430px) {
  .nav-pill { min-height: 36px; padding: .5rem .58rem; font-size: .66rem; }
}


/* Dynamic active navbar Love Ice */
.nav-pill.active,
.nav-pill[aria-current="page"] {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-color), #f062a7);
  border-color: rgba(255,255,255,.58);
  box-shadow: 0 12px 32px rgba(240, 98, 167, .30), inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateY(-1px);
}
.nav-pill.active:hover,
.nav-pill[aria-current="page"]:hover,
.nav-pill.active:focus-visible,
.nav-pill[aria-current="page"]:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #ff7eb6, #e9559b);
  box-shadow: 0 14px 36px rgba(240, 98, 167, .36), inset 0 1px 0 rgba(255,255,255,.42);
}
.nav-pill {
  position: relative;
  overflow: hidden;
}
.nav-pill::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,.36), rgba(255,255,255,0));
  opacity: .45;
  pointer-events: none;
}