/* ======================================================
   IPHONE
====================================================== */
@media screen and (max-width: 920px),
       screen and (orientation: landscape) and (max-width: 1200px) and (max-height: 920px)
       and (any-hover: none) and (any-pointer: coarse) {
  /* stile telefono */

/* ======================================================
   STILI DI BASE: BODY & HEADER
====================================================== */
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
  background-color: #fff8f0;
  overflow-x: hidden;
  max-width: 100%;
  text-align: center;  
}

header {
  text-align: center;
  padding: 16px;
}

/* ======================================================
   CARRELLO
====================================================== */
#lista-carrello li.carrello-item {
  text-align: center;
}

/* ======================================================
   BARRA SUPERIORE MOBILE
====================================================== */
.top-bar {
  display: none;
}

.mobile-social {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 95%;
  z-index: 1000;
  margin: 0 auto;  
  background-color: rgba(255, 250, 245, .85);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);  
  padding: 20px 2px 10px;
  border-radius: 30px;
}

.social-bar-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.social-bar-mobile .insta-item {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-size: 12px;
  gap: 5px;
  margin: 5px 2px 0;
}

.social-bar-mobile .insta-item img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.brand-name-mobile {
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

.brand-name-mobile .google-link {
  display: inline-block;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}

/* ======================================================
   HERO
====================================================== */
.hero {
  margin: 100px 2px 25px;
  position: relative;
}

#titolo-principale {
  bottom: var(--gap-titolo, 12px);
  color: #800020;
  font-size: 26px;
  left: 50%;
  position: absolute;
  text-align: center;
  transform: translateX(-50%) translateY(50%);
  z-index: 2;
  width: 100%; 
}

/* LOGO CENTRALE */
.background-logo {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.background-logo img {
  display: block;
  margin: 0 auto;
  opacity: 0.8;
  width: 300px;
  height: auto;
}

/* ======================================================
   DECORAZIONI HERO
====================================================== */
.decorazioni {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.hero .decorazioni picture.dolce img {
  display: block;
  height: auto;
  width: 90px;
}

.decorazioni picture.dolce {
  opacity: 0.18;
  position: absolute;
}

.decorazioni .d1 {
  top: 4%;
  left: 0%;
  transform: rotate(-50deg);
}

.decorazioni .d2 {
  top: 30%;
  left: 78%;
  transform: rotate(20deg);
}

.decorazioni .d3 {
  top: 65%;
  left: 6%;
  transform: rotate(-15deg);
}

/* ======================================================
   LINK E PROFILI
====================================================== */
.right {
  display: flex;
  gap: 15px;
}

.insta-item {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-family: 'Baloo 2', cursive;
  font-size: 14px;
  gap: 5px;
  transition: none;
}

.insta-item img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
}

.insta-item span {
  display: inline-block;
  transform: translateY(-5px);
}
:root{
  /* se l'hai già definita altrove, lascia pure la tua */
  --topbar-h: 70px; 
  --reg-top-space: calc(env(safe-area-inset-top) + var(--topbar-h, 60px) + 12px);
  --reg-bottom-space: 24px; 
}
/* ===========================
   CONTENITORE PRINCIPALE REGOLAMENTO – FIX
=========================== */
.Regolamento {
  position: relative;
  z-index: 10;

  /* larghezze invarianti per il tuo layout mobile */
  max-width: 300px;
  /* niente %: margine fisso rispetto alla top-bar/safe-area */
  margin: var(--reg-top-space) auto var(--reg-bottom-space);

  padding: 0 30px;
  text-align: center;

  background: rgba(255, 248, 240, 0.7);
  border-radius: 100px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* scroll solo verticale dentro la card */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;   /* iOS momentum */
  scrollbar-width: none;               /* Firefox */
  -ms-overflow-style: none;            /* IE/Edge legacy */
  
width: min(300px, calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px));
box-sizing: border-box;
  
}

/* altezza utile: usa i dvh per evitare salti dell’address bar, con fallback */
@supports (height: 1dvh){
  .Regolamento{
    max-height: min(600px, calc(100dvh - var(--reg-top-space) - var(--reg-bottom-space)));
  }
}
@supports not (height: 1dvh){
  .Regolamento{
    max-height: min(600px, calc(100vh - var(--reg-top-space) - var(--reg-bottom-space)));
  }
}

/* nascondi scrollbar WebKit senza disabilitare lo scroll */
.Regolamento::-webkit-scrollbar{ width:0; height:0; }

/* rimangono invariati i tuoi before e testi */
.Regolamento::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px; bottom: -30px; left: -30px;
  z-index: -1;
  border-radius: 100px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 70%);
}

.Regolamento h1 {
  margin-bottom: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: normal;
  font-size: 30px;
  color: #e0b37d;
}
.Regolamento p {
  margin-bottom: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.8em;
  line-height: 1.3;
  color: #2c3e50;
}

/* Bottoni come li avevi, ma con transizione sullo stato base (più fluido) */
.Regolamento a.button-home {
  display: inline-block;
  margin: 5px auto 15px;
  padding: 10px 3px;
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  border-radius: 100px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.Regolamento a.button-home:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.Regolamento a.button-home:active {
  transform: translateY(-2px) scale(.98);
}

/* ======================================================
   CARTOLINA BASE
====================================================== */
.cartolina {
  position: relative;
  margin: 0 auto;
  padding: 2px 12px;
  width: 290px;
  font-size: 11px;
  font-family: 'Baloo 2', cursive;
  text-align: center;
  background-color: #fffaf0;
  border: 2px solid #a23e48;
  border-radius: 120px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.cartolina::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/cartolina.jpg"); /* fallback */
  background-image: -webkit-image-set(
    url("img/cartolina.webp") type("image/webp"),
    url("img/cartolina.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("img/cartolina.webp") type("image/webp"),
    url("img/cartolina.jpg")  type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.25;
  border-radius: 120px;
  pointer-events: none;
  margin-bottom: 0;
}

.cartolina h2 {
  margin-bottom: 0;
  margin: 5px 20px 0;
}

.cartolina p {
  margin: 0 35px;
  line-height: 1.4;
}

/* ======================================================
   TESTO CON GRADIENTE
====================================================== */
.gradient-text {
  display: inline-block;
  font-weight: bold;
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.01s;
  cursor: pointer;
  font-size: 1.7em;
  margin-bottom: 0;
}

.gradient-text:hover {
  transform: scale(1.3);
}

/* ======================================================
   WRAPPER CARTOLINA
====================================================== */
.cartolina-wrapper {
  display: block;
  margin: 0 auto;
  position: relative;
  padding: 0;
}
.cartolina-wrapper:hover .cartolina > a.cartolina-link h2,
.cartolina-wrapper:hover .cartolina > a.cartolina-link p {
  transform: scale(1.05);
  transition: transform 0.01s ease;
}

/* ======================================================
   VERSIONE CARTOLINA CLICCABILE
====================================================== */
.cartolina-link {
  text-decoration: none;
  color: inherit;
}

.cartolina-link .cartolina {
  background-color: #fffaf0;
  border: 2px solid #a23e48;
  border-radius: 120px;
  padding: 0;  
  margin: 0 auto;
  max-width: 300px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Nunito', sans-serif;
  text-align: center;
  transition: transform 0.01s, box-shadow 0.2s;
  cursor: pointer;
  color: inherit;
}

.cartolina-link .cartolina:hover {
  transform: translateY(-5px);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
#dediche-foto {
  text-align: center;
  font-size: 12px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
}
#prodotti {
  font-size: 42px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0;
  
}
.prezzo {
  color: #364156;             /* blu-grigio elegante e bilanciato */
  font-family: 'Nunito', sans-serif;
  font-size: 1.05em;           /* leggermente più grande del testo base */
  font-weight: 600;           /* semi-grassetto */

}

.tilde-gigante {
  font-size: 100px;
  color: #FFCC4D;
  text-align: center;
  line-height: 0.1;
  margin: 20px 0 0;  
  font-weight: 100; /* da 100 a 900, meno = più sottile */
}
#narrazione {
  font-size: 15px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 0 25px 0;
}
#prodotti-panettone {
  font-size: 32px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#prodotti-panettoneA {
  font-size: 32px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#prodotti-panettoneB {
  font-size: 32px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#prodotti-panettoneC {
  font-size: 32px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#prodotti-panettoneD {
  font-size: 32px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#Nota-7 {
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 40px 0; 
}
#Nota-7A {
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 40px 0; 
}
#Nota-7B {
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 40px 0; 
}
#Nota-7C {
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 40px 0; 
}
/* ===============================
   BOTTONE "CLICCA👉"
=============================== */
.storia-label {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 26px;
  font-weight: bold;
  color: #191970;
  cursor: pointer;
  white-space: nowrap;
}

/* ===============================
   MODAL (sfondo dietro al popup)
=============================== */
.storia-modal {
  display: none;
  position: fixed;
  top: 0;                 /* parte da in alto */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}

/* contenuto del popup */
.storia-modal-content {
  background-color: #fff8f0;
  margin: 90px auto 0; /* sposta il popup sotto la tua top bar (70px esempio) */
  padding: 1rem;
  border: 3px solid #e0b37d;
  border-radius: 60px;
  width: 300px;
  max-height: 350px;
  text-align: center;
  color: #2c3e50;
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  position: relative;
  overflow-y: auto;      /* o scroll */
  overflow-x: hidden;
  
  /* “momentum scrolling” su iOS (fluido) */
  -webkit-overflow-scrolling: touch;

  /* nascondi la scrollbar (senza disattivare lo scroll) */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* vecchi IE/Edge */  
}
.storia-modal-content::-webkit-scrollbar {
  width: 0;
  height: 0;   /* per sicurezza su contenuti orizzontali */
}
.storia-modal {
  height: 100vh;   /* fallback vecchio */
  height: 100svh;  /* meglio con barre */
  height: 100dvh;  /* migliore dove supportato */
    overscroll-behavior: contain; /* niente rimbalzo/scroll dietro */
}
:root{ --topbar-h:70px; }
.storia-modal{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top)); }

/* bottone chiusura */
.storia-close {
  position: absolute;
  top: 5px;
  right: 20px;
  font-size: 50px;
  font-weight: bold;
  cursor: pointer;
  color: #2c3e50;
  transition: color 0.2s ease;
}
.storia-close:hover {
  color: #e74c3c;
}

/* titolo nel popup */
.storia-modal-content h2 {
  font-size: clamp(14px, 6vw, 22px) !important; /* adatta la dimensione */
  margin-top: 0;                     /* se non vuoi spazio extra sopra */
  margin-bottom: 0.5em;              /* un po’ di respiro sotto */
  font-weight: bold;
  color: #2c3e50;                    /* o un colore personalizzato */
}

/* ===============================
   VETRINE PRODOTTI
=============================== */
.vetrina {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  gap: 4px;
  padding-bottom: 0;
}

.vetrina .prodotto {
  margin: 0 0 3px;
  line-height: 1;
}

.vetrina .ingredienti {
  margin: 0 auto 0;
}

.vetrina .valori-btn {
  margin-top: 1px;
}

.prodotto .zoom-interno {
  transform: scale(1.4);
}
/* ===============================
   CARD PRODOTTO
=============================== */
.prodotto {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 100px;
  width: 150px;
  text-align: center;
  padding: 7px 2px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.prodotto h2 {
  margin-top: 10px; /* personalizzato (es. Torta Fregoloti) */
  font-size: 0.95rem; /* adatta finché ti piace */
}

.prodotto img {
  width: 100%;
  height: auto;
  border-radius: 100px;
  display: block;
  position: relative;
  z-index: 1;
  filter: brightness(0.90) contrast(1.05);
}

.prodotto .locandina {
  width: 150px;   /* o quanto vuoi */
  height: 200px;  /* abbassa proporzioni */
}

.prodotto .locandina::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px; /* stesso valore di .locandina */
  z-index: 2;
  pointer-events: none;
}

/* Input quantità */
.prodotto input[type="number"] {
  display: block;
  margin: 5px auto 10px;
  width: 70px;
  text-align: center;
  border-radius: 20px;
}

.prodotto input.quantita {
  animation: none;
  box-shadow: none;
  background-color: #fff;
  caret-color: #000;
  transform: none;
  position: relative;
  z-index: 2;
}

/* Prodotti speciali con effetto glow */
.prodotto.speciale-panettone {
  border: none;
  box-shadow: 0 0 25px #e74c3c;
  animation: glow-rosso 0.8s infinite alternate;
}

.prodotto.speciale-cocco {
  border: none;
  box-shadow: 0 0 25px #4CAF50;
  animation: glow-verde 1s infinite alternate;
}
/* ===========================
   LOCANDINA
=========================== */
.locandina {
  width: var(--w, 220px);
  height: var(--h, 330px);
  position: relative;
  overflow: hidden;
  border-radius: 80px;
}

.prodotto .locandina picture > img.zoom-interno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  transform: scale(var(--zoom, 1.25));
  transform-origin: center;
  clip-path: inset(0);
  z-index: 0;
}
#PAN_CLASSICO_1KG .locandina .zoom-interno{
  transform: translateY(-20px) scale(var(--zoom, 1.35));
}
#PAN_ARANCIA_850 .locandina .zoom-interno{
  transform: translateY(-20px) scale(var(--zoom, 1.35));
}

/* ===============================
   INGREDIENTI & VALORI NUTRIZIONALI
=============================== */
/* ===============================
   POPUP INGREDIENTI – centrato, scorrevole, robusto
   (stessa logica del popup “vignetta”)
=============================== */

/* Overlay: centra con Grid (niente transform) */
.popup-ingredienti{
  position: fixed;
  inset: 0;
  padding: 24px;                    /* margine ai bordi */
  z-index: 10000;
  background: transparent;          /* tieni pure trasparente */
  display: grid;
  place-items: center;              /* centro X+Y robusto */
  overflow: hidden;                 /* lo scroll è SOLO nella card */
}
.popup-ingredienti[hidden]{ display: none !important; }

/* Card interna (la “scroller”), con le TUE misure */
.popup-ingredienti .popup-content{
  box-sizing: border-box;
  width: min(90%, calc(100svw - env(safe-area-inset-left) - env(safe-area-inset-right) - 48px));
  /*      ↑ usa 90% finché c’è spazio; se lo schermo è stretto, si adatta come la vignetta */
  max-width: 300px;                 /* tua misura */
  max-height: 80svh;                /* tua misura (svh = più stabile su Android/Samsung) */
  overflow-y: auto;                 /* scroll dentro la card */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

/* nascondi la scrollbar WebKit */
.popup-ingredienti .popup-content::-webkit-scrollbar{ width:0; height:0; }

/* Il resto del tuo stile (invariato) */
.popup-ingredienti .popup-content{
  background: #fffaf0;
  border: 2px solid #c49b63;
  border-radius: 60px;
  padding: 20px;
  text-align: center;
  position: relative;
  font-family: 'Baloo 2', cursive;
  color: #2c3e50;
  animation: popupFade 0.25s ease;
}
.popup-ingredienti .popup-content strong{ color: #a23e48; }

.popup-ingredienti .chiudi{
  position: absolute;
  top: 6px; right: 22px;
  width: 40px; height: 40px;
  background: none; border: none; border-radius: 30px;
  font-size: 0.85rem; color: #a23e48; cursor: pointer;
  transition: transform 0.01s ease;
}
.popup-ingredienti .chiudi:hover{ transform: scale(1.3); }

.popup-ingredienti .testo{
  line-height: 1.2;
  font-size: 0.8rem;
  white-space: normal;
}

/* ===============================
   SCADENZA
=============================== */
.scadenza {
  font-size: 0.8rem;       /* grandezza caratteri */
  font-weight: bold;       /* grassetto */
  color: #2c3e50;          /* colore testo */
  text-align: center;      /* centra il testo */
  margin-bottom: 10px;     /* spazio sotto */
  line-height: 1.4;        /* altezza riga per leggibilità */
  font-family: 'Nunito', sans-serif;
}
/* ===============================
   QUADRIFOGLIO & STORIA
=============================== */
.quadrifoglio {
  position: absolute;
  top: -10px;
  left: -30px;
  font-size: 100px;
  z-index: 15;
  pointer-events: none;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}
/* ===========================
   BOTTONE VALORI NUTRIZIONALI
=========================== */
.valori-btn {
  display: inline-block;
  margin: 8px 8px 20px;
  padding: 2px 4px;
  font-family: 'Baloo 2', cursive;
  font-size: 0.75em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  border: none;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.05s ease;
}

/* ===========================
   TABELLA VALORI NUTRIZIONALI
=========================== */
.tabella-valori {
  width: 100%;
  margin-top: 0;
  border-collapse: collapse;
  font-size: 0.6em;
}

.tabella-valori th,
.tabella-valori td {
  padding: 8px 6px;
  text-align: left;
  border: 1px solid #e6e6e6;
}

.tabella-valori th {
  background: #fff4e6;
  font-weight: 700;
}

.tabella-valori td.num {
  text-align: right;
  font-family: monospace;
}
#Nota-8 {
  font-size: 14px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 10px 60px 0;
}
#Nota-81 {
  font-size: 14px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 10px 60px 0;
}
#Nota-82 {
  font-size: 14px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 10px 60px 0;
}
#Nota-83 {
  font-size: 14px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 10px 60px 0;
}
#Nota-84 {
  font-size: 14px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 0 60px;
}
/* ===============================
   AVVISI E LOCANDINA
=============================== */
.prodotti-freschi-avviso {
  background-color: rgba(255, 250, 240, 0.7);
  border: 2px solid #f5cda7;
  border-radius: 60px;
  margin: 10px auto;
  text-align: center;
  font-family: 'Georgia', serif;
  color: #4b3e2b;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  line-height: 1.15;
  width: 100%;
  max-width: 300px;
}

.prodotti-freschi-avviso .emoji {
  font-size: 1.2rem;
}
#Nota-8A {
  font-size: 12px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center; 
  padding: 0 20px;
  line-height: 1.25;  
}
/* ===============================
   NOTE
=============================== */
#Nota-12 {
  font-size: 13px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  line-height: 1.2;
  margin: 10px 50px 0;
  padding: 0 0;
}
.Nota-14 {

  text-align: center;
  margin: 5px 50px;

}

#Nota-10 {
  font-size: 32px;
  font-family: 'Nunito', sans-serif;
  color: #122E66;
  text-align: center;
  margin: 25px 0 0;
}
/* ===========================
   BOTTONE "ingredienti4"
=========================== */
.ingredienti4 {
  display: block;
  margin: 10px auto 18px;
  max-width: 200px;
  padding: 5px 0;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #FFD93D, #FFB347);
  border-radius: 80px;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.01s ease, box-shadow 0.2s ease;
}

.ingredienti4:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
/* ===========================
   BOX TOTALE APERTURA
=========================== */
.totale-apertura {
  max-width: 300px;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 20px 0;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 8px;
  color: #b58346;
  background: #fff8f0;
  border-radius: 60px;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
}
/* ===========================
   NOTA-4 (box con icona pacco)
=========================== */
.Nota-4 {
  position: relative;
  overflow: hidden;
  padding: 15px;
}

.Nota-4::before {
  content: "📦";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 150px;
  opacity: 0.2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: scrollPacco 3s linear infinite;
}
#Nota-4 {
  margin-bottom: 0;
  text-align: center;
  font-size: 28px;
  font-family: 'Baloo 2', cursive;
  color: #222;
}
/* ===========================
   REGOLE GENERALI TESTO
=========================== */
#spedizioni {
  margin-top: 3px;
  padding-left: 0;
  list-style: none;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 20px;
  line-height: 1.4;
}

#spedizioni li {
  margin-bottom: 3px;
}
/* ===========================
   TITOLO SPEDIZIONE
=========================== */
.titolo-spedizione {
  margin: 15px 30px 20px;
  padding: 0 15px;
  font-family: 'Nunito', sans-serif;
  font-size: 20px;
  color: #0D47A1;
}
/* ===========================
   SEZIONE SPEDIZIONE
=========================== */
.spedizione {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0;
  text-align: center;
}

.opzioni-spedizione-wrapper {
  display: flex;
  justify-content: center;
  gap: 3px;
}

.opzione-spedizione {
  display: inline-block;
  width: 80px;
  padding: 10px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.opzione-spedizione input {
  display: none;
}

.opzione-spedizione input:checked + p {
  background-color: #ffece0; /* border-color rimosso: non applicabile a <p> */
}

.opzione-spedizione p {
  margin: 0;
  font-size: 12px;
}
/* ===========================
   CARRELLO & NOTE PAGAMENTO
=========================== */
.carrello{
  text-align: center;
  margin: 35px;
}

.carrello button {
  display: inline-block;
  margin: 0 0;
  border-radius: 60px;
  cursor: pointer;
  max-width: 100px;
  
}
#lista-carrello {
  max-width: 320px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

#lista-carrello li {
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  margin: 0 0;
  font-size: 15px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}
#totale {
  max-width: 320px;
  margin: 20px auto;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
}
/* ===========================
   BUTTON GENERICI
=========================== */
button,
input[type="button"],
input[type="submit"] {
  display: inline-block;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: bold;
  color: #fff;
background: linear-gradient(
  135deg,
  #FFD173 0%,
  #FF9B56 30%,
  #FF6A48 60%,
  #FF3E5C 100%
);
  border: none;
  border-radius: 60px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: 0.01s;
  
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

button:hover {
  background: linear-gradient(
    135deg,
    #FF7A59 0%,
    #FF9966 40%,
    #FFB86B 100%
  );
}
#finale-carrello {
  font-size: 20px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 0 2px 0; 
}
/* ===========================
   BOTTONI FOOTER
=========================== */
.box-bottoni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;            /* iOS/Android moderni ok */
  width: 100%;
  max-width: 300px;     /* metti un limite sensato, non 50px */
  margin: 0 auto;
  box-sizing: border-box;

}

.bottone-footer {
  flex: 0 0 calc(50% - 10px);  /* 2 per riga */
  min-width: 120px;            /* evita bottoni troppo piccoli */
}

.reset-carrello {
  flex: 0 0 100%;              /* va sotto a tutta riga */
}


.bottone-footer {
  background: linear-gradient(135deg, #FFE600, #00E5C0);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  font-size: 20px;

}
.bottone-footer:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FFD700;
}
.bottone-footerA {
  background: linear-gradient(135deg, #FFB6C1, #FF9EC7, #FFD6A5);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  max-width: 100px !important;
  font-size: 17px;
}

.bottone-footerA:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FF9EC7;
}
.bottone-footerB {
  background: #FFD700;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  width: 150px !important;
  padding: 5px 0 !important;
  font-size: 18px;  

}

.bottone-footerB:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FFD700;
  background: linear-gradient(135deg, #FFB300, #FFD700, #00C9A7);  
}
.bottone-footerC {
  background: linear-gradient(135deg, #FFB86B 0%, #FF9966 30%, #FF7A59 60%, #FF6A48 100%);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  width: 150px !important;
  padding: 5px 0 !important;
  font-size: 18px;
  margin: 10px 0 0 !important;

}

.bottone-footerC:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transform: translateY(-3px);
  background: linear-gradient(135deg, #FF7A59 0%, #FF9966 40%, #FFB86B 100%);
}

/* ===========================
   POPUP PAGAMENTO
=========================== */
#popup-pagamento {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 310px;
  max-height: 60vh;
  overflow: hidden;
  background: #fff8f0;
  border: 2px solid #c49b63;
  border-radius: 80px;
  z-index: 9999;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  font-family: 'Baloo 2', cursive;
}

#popup-pagamento .popup-content {
  max-height: 50vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 35px 25px;
  border-radius: inherit;
  /* “momentum scrolling” su iOS (fluido) */
  -webkit-overflow-scrolling: touch;

  /* nascondi la scrollbar (senza disattivare lo scroll) */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* vecchi IE/Edge */    
}

.popup-content::-webkit-scrollbar {
  width: 0;
  height: 0;   /* per sicurezza su contenuti orizzontali */
}
:root{ --topbar-h:60px; }
.popup-content{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top)); }

#popup-pagamento h3 {
  margin: 0 0 10px;
  padding: 5px 10px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 1.1em;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #3a6ea5, #5aa3c8);
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

#popup-pagamento button {
  width: 100%;
  margin: 5px 0;
}

/* Bottone compila modulo spedizione */
#compilaModuloBtn {
  background: #FFC533;
  width: 200px !important;
  border-radius: 60px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 18px;
  margin: 10px auto !important;
  padding: 10px 3px;
  text-align: center;

}
/* Hover bottone compila modulo */
#compilaModuloBtn:hover {
  background: #FFCC4D;
  
}
#iban {
  display: none;
  margin: 5px 30px;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 0.8rem;
  font-weight: bold;
  color: #2c3e50;
}
.nota-pagamento {
  margin: 1px 0 10px;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 0.8em;
  color: #2c3e50;
}
#nutr-title {
  white-space: pre-line;
  text-align: center;
  font-size: 15px;
  font-family: 'Baloo 2', cursive;  
}
/* ===========================
   POPUP NUTRIZIONE
=========================== */
#popup-nutrizione {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10001;
  width: 90%;
  max-width: 310px;
  max-height: 70vh;
  padding: 18px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-sizing: border-box;
}
/* aperto */
#popup-nutrizione.is-open {
  display: flex;
  flex-direction: column;
}

/* contenuto scrollabile */
#popup-nutrizione #nutr-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 8px;
}

#popup-nutrizione h3 {
  margin: 0 0 8px;
  font-family: 'Baloo 2', cursive;
}

#popup-nutrizione .chiudi {
  float: right;
  background: transparent;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #666;
  
}
/* ===========================
   FOOTER ELEGANTE
=========================== */
.footer-elegante {
  padding: 20px;
  text-align: center;
  color: #333;
  background-color: #fff8f0;
  font-family: 'Baloo 2', cursive;
  margin: 0 0;
}

.footer-rights {
  margin-bottom: 10px;
  padding: 0 15px;
  font-size: 1.8em;
  font-weight: bold;
}

.footer-links {
  margin: 10px 0;
}

.footer-btn {
  display: inline-block;
  margin: 0 10px;
  padding: 6px 6px;
  font-size: 1.4em;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to right, #00cfff, #0044ff);
  border-radius: 25px;
  transition: transform 0.01s ease;
}

.footer-btn:hover {
  transform: scale(1.2);
}

.footer-text {
  margin-top: 15px;
  padding: 0 0;
  font-size: 1.5em;
}
/* ===========================
   FOOTER
=========================== */
footer {
  text-align: center;
  font-size: 9px;
  color: #555;
}
#email-link{
  display:block;            /* il link prende tutta la riga */
  text-align:center;        /* testo centrato dentro */
  font-size:1em;
  font-weight:600;
  background:linear-gradient(to right,#00cfff,#0044ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-decoration:none;
}

/* ===========================
   OVERLAY
=========================== */
#overlay {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9998;
  background: transparent;
}
/* ===========================
   ANIMAZIONI POPUP
=========================== */
@keyframes popupFade {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ===========================
   ANIMAZIONI GLOBALI
=========================== */
@keyframes spotlightPulse {
  0%   { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50%  { opacity: 0.8; transform: translateY(-50%) scale(1.1); }
  100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
}

@keyframes scrollPacco {
  0%   { transform: translate(-50%, -55%) rotate(0deg); }
  50%  { transform: translate(-50%, -45%) rotate(5deg); }
  100% { transform: translate(-50%, -55%) rotate(0deg); }
}

@keyframes glow-verde {
  0%   { box-shadow: 0 0 10px #4CAF50; }
  50%  { box-shadow: 0 0 30px #4CAF50; }
  100% { box-shadow: 0 0 25px #4CAF50; }
}

@keyframes glow-rosso {
  0%   { box-shadow: 0 0 5px #FFC785; }
  50%  { box-shadow: 0 0 30px #F29A85; }
  100% { box-shadow: 0 0 25px #F29A85; }
}

@keyframes bordoOndeggiante {
  0%   { box-shadow: 0 0 25px rgba(231, 76, 60, 0.6), 0 0 15px rgba(192, 57, 43, 0.4) inset; }
  50%  { box-shadow: 0 0 50px rgba(231, 76, 60, 1),   0 0 25px rgba(192, 57, 43, 0.6) inset; }
  100% { box-shadow: 0 0 35px rgba(231, 76, 60, 0.8), 0 0 20px rgba(192, 57, 43, 0.5) inset; }
}
/* Rimuove l’alone grigio su iOS */
* {
  -webkit-tap-highlight-color: transparent;   /* oppure rgba(0,0,0,0) */
}

/* Se il bottone prende un contorno (outline) brutto al focus: personalizza bene */
button:focus {
  outline: none;                 /* elimina il default solo se metti un’alternativa */
}
button:focus-visible {
  outline: 2px solid #0a84ff;    /* esempio accessibile */
  outline-offset: 2px;
}
  /* Stili minimi e accessibili */
  #cc-banner, #cc-modal { 
  position: fixed; 
  inset: 0; 
  display: grid; 
  place-items: end center; 
  z-index: 99999; 
  
}
  #cc-banner[hidden], #cc-modal[hidden] { display: none; }
  .cc-box{
    width: 300px;
	margin: 0 0; 
	padding: 25px;
    background: linear-gradient(180deg, #fff8f0 0%, #fdf1e1 40%, #f6e4cf 100%);
	border:1px solid #e6e6e6; 
	border-radius:80px;
    box-shadow:0 10px 30px rgba(0,0,0,.15); 
    font-family: 'Baloo 2', cursive;
	color:#2c3e50;
  }
  .cc-text{ 
  margin:0 20px 10px; 
  font-size:12px; 
  line-height:1.4; 
  }
  .cc-link{ 
  color:#0a7cff; 
  text-decoration:underline; 
  }
  .cc-actions{ 
  display:flex; 
  gap:5px; 
  flex-wrap:wrap; 
  justify-content:center; 
  }
  .cc-btn{ 
  border:0; 
  border-radius:999px; 
  padding:6px 3px; 
  cursor:pointer; 
  font-weight:600; 
  font-size: 16px;
  transition: transform 0.01s ease;
  }
  .cc-primary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff; 
  }
  .cc-secondary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff;  
  }
  .cc-tertiary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff;  
  }
  /* Modale preferenze */
  #cc-modal{ 
  place-items:center; 
  background: linear-gradient(135deg,
    rgba(245,245,245,.70), rgba(220,220,220,.50)
  );
  }
  .cc-modal-card{
    width: 300px; 
    background: linear-gradient(180deg, #fff8f0 0%, #fdf1e1 40%, #f6e4cf 100%);
	border-radius: 120px; 
	padding: 12px; 
	box-shadow:0 10px 30px rgba(0,0,0,.2);
    font-family: 'Baloo 2', cursive;
	font-size: 14px;

  }
  .cc-row{ 
  margin: 5px 0; 
  }
  .cc-row small{ 
  display:block; color: black; 
  }
  .cc-switch{ 
  display:flex; 
  align-items:center; 
  gap:5px; 
  font-weight:600; 
  }

	.cc-btn:hover {
  transform: scale(1.2);
  background: #00C98B;
}
/* ====== FIX iPhone / centratura robusta MODALE STORIA + scroll ====== */
.storia-modal.is-open{
  /* centra con flex, gestisci safe-area, evita salti address bar iOS */
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(100px, calc(env(safe-area-inset-top) + 60px), 120px);
}

.storia-modal.is-open .storia-modal-content{
  /* niente margine fisso, altezza adattiva con scroll interno */
  margin-top: 0 !important;
  width: min(92vw, 320px);
  max-height: min(42dvh, 400px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
#popup-spedizione {
    position: fixed; margin: 50px auto; inset: 0; z-index: 10040; display:none;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
  }
  #popup-telefono {
    position: fixed; margin: 50px auto; inset: 0; z-index: 10040; display:none;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
  }
#popup-spedizione .sped-card{
    font-family: "Baloo 2", cursive;
    max-width: 300px;
    margin: 100px auto 0; padding: 20px 18px 16px;
    border-radius: 50px;
    background: #FFF7EA;
    color: #3b2b18;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    position: relative;
    max-height: 300px; overflow: auto;
  }
  #popup-telefono .sped-card{
    font-family: "Baloo 2", cursive;
    max-width: 300px;
    margin: 100px auto 0; padding: 20px 18px 16px;
    border-radius: 50px;
    background: #FFF7EA;
    color: #3b2b18;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    position: relative;
    max-height: 300px; overflow: auto;
  }
#popup-spedizione h3{
    margin: 0 0 14px; font-size: 26px; text-align: center;
  }
  #popup-telefono h3{
    margin: 0 0 14px; font-size: 26px; text-align: center;
  }
  .sped-close{
    position:absolute; top: 60px; right: 10px;
    border:0; background:transparent; font-size:15px; line-height:1; cursor:pointer;
    color:#5b4631;
  }
  .sped-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  }
  .sped-grid label{ display:flex; flex-direction:column; font-size:15px; gap:6px; }
  .sped-grid input, .sped-grid textarea{
    border: 1px solid #e7dccb; border-radius: 20px; padding: 10px 12px; font-size:15px;
    background:#fffdf8; outline:none; text-align: center; margin: 0 10px; color: #4A4A4A;
  }


  .sped-primary, .sped-secondary{
    border:0; border-radius: 999px; padding: 10px 16px; cursor:pointer; font-size:18px;
    font-family: "Baloo 2", cursive;
  }

/* quando è nascosta via [hidden] */
.vignetta[hidden] { display: none !important; }

/* overlay: niente da cambiare; ma per ridondanza esplicitiamo */
.vignetta{
  
  position: fixed;
  inset: 0;                   /* top:0 right:0 bottom:0 left:0 */
  padding: 24px;              /* respiro ai bordi su schermi piccoli */
  z-index: 10040;             /* sopra l’overlay, sotto al toast (10050) */
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);/* usa il tuo #overlay esistente per il velo scuro */  
  display: grid;
  justify-items: center;          /* X */
  align-items: center;            /* Y */
}

/* card fluida e veramente centrata in ogni condizione */
.vignetta-card{
  
  background:#fff8f0;
  border:1px solid #f2d8c7;
  border-radius:70px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding: 0 18px 30px;
  font-family:'Nunito', system-ui, Arial, sans-serif;
  line-height:1.35;
  font-size: 13px;
  box-sizing: border-box;         /* padding compreso nella larghezza */
  width: min(300px, calc(100svw - env(safe-area-inset-left) - env(safe-area-inset-right) - 48px));
  /*        ^^^^^^ usa la larghezza “small viewport” che non cambia con le barre */

  max-width: 92svw;               /* ulteriore guard-rail */
  margin-inline: auto;            /* centro classico */
  justify-self: center;           /* centro da Grid (ridondanza utile su Android) */

  /* altezza scorrevole robusta in landscape */
  max-height: min(60svh, 360px);
  overflow-y: auto;
  overflow-x: hidden;   /* ← aggiungi questo */  
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.v-title{ margin:0 0 6px; font-weight:700; font-size: 18px;}

/* X di chiusura */
.vignetta-close{
background: rgba(214, 180, 140, 0.9);


 font-size:20px !important; margin: 5px auto 0 !important;
  cursor:pointer;
  color: black;
  padding: 2px 25px;
  
}
/* Usa questa utility dove vuoi testo “smeraldo” gradiente */
.emerald-text{
  background-image: linear-gradient(90deg, #00c98b 0%, #00b37a 50%, #009a68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.08); /* leggero sostegno sul beige */
}
.bottone-info{
  font-size: 16px;
}  
.mini-nav{
  position: fixed;
  left: 14px; /* affianco al carrello che sta a right:14px */
  top: 90px;
  width: 36px; height: 36px;
  border-radius: 20px;
  background: #fff8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border: 1px solid #f0e6d8;
  cursor: pointer; z-index: 10050;
  display: inline-flex; align-items:center; justify-content:center;
}
.mini-nav-panel{
  position: fixed;
  left: 20px !important; /* allineato al pulsante ≡ */
  top: 90px !important;
  width: min(92vw, 280px);
}
.mini-cart{
  position: fixed;
  left: 60px; top: 90px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 20px;
  background: #fff8f0; /* beige */
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  font-family: 'Baloo 2', system-ui, sans-serif;
  cursor: pointer; z-index: 10050;
  border: 1px solid #f0e6d8;
}
.mini-cart-panel{
  position: fixed; left: 20px; top: 90px; width: min(92vw, 300px); max-height: 300px;
  background: #fffdfa; color:#222; border: 1px solid #f0e6d8;
  border-radius: 60px; box-shadow: 0 16px 48px rgba(0,0,0,.18);
  font-family: 'Baloo 2', system-ui, sans-serif; overflow: hidden; z-index: 10040;
  display: none;
}
#popup-pagamento .receipt-card pre{
  white-space:pre-wrap; margin:0;   font-family:'Baloo 2', cursive;
  background:#fff; border:1px dashed #eadfce; padding:10px; border-radius:12px; font-size: 12px;
}
.v-list {
  margin: 0;
  padding: 2px 16px;
  list-style-type: none; /* opzionale: rimuove i pallini */
}

.v-list li {
  border-bottom: 1px solid #ccc; /* linea sotto ogni riga */
  padding: 6px 0;               /* un po’ di spazio verticale */
}

/* opzionale: rimuove la linea dopo l’ultimo elemento */
.v-list li:last-child {
  border-bottom: none;
}
.footer-mini{
  margin-top: 0px;
  font-size:13px;
  opacity:.95;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
}
.popup-content .nota{

  font-size: 14px;      /* piccola */

}
.conferma {

  font-size: 15px;                   /* grandezza regolabile (es. 1rem–1.5rem) */

}
#site-notice .notice__panel{
  padding: 40px 20px 10px;
  width: 300px;

}
/* --- Content --- */
#site-notice h2{

  font-size: 26px;

}
#site-notice p{

  font-size: 17px;

}
#site-notice .notice__close{
  top: 5px; right: 125px;
  width: 42px; height: 42px;
  font-size: 32px;
  line-height: 0;

}
}

/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
/* ======================================================
   TABLET
====================================================== */
@media screen and (min-width:921px) and (max-width:1200px) and (any-hover:hover),
       screen and (min-width:921px) and (max-width:1200px) and (any-hover:none) and (min-height:921px) {

/* ======================================================
   STILI DI BASE: BODY & HEADER
====================================================== */
html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
  background-color: #fff8f0;
  overflow-x: hidden;
  max-width: 100%;
  text-align: center;  
}

header {
  text-align: center;
  padding: 16px;
}

/* ======================================================
   CARRELLO
====================================================== */
#lista-carrello li.carrello-item {
  text-align: center;
}

/* ======================================================
   BARRA SUPERIORE MOBILE
====================================================== */
.top-bar {
  display: none;
}

.mobile-social {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 95%;
  z-index: 1000;
  margin: 0 auto;  
  background-color: rgba(255, 250, 245, .85);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);  
  padding: 20px 2px 10px;
  border-radius: 30px;
}

.social-bar-mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.social-bar-mobile .insta-item {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-size: 15px;
  gap: 5px;
  margin: 5px 2px 0;
}

.social-bar-mobile .insta-item img {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  object-fit: cover;
}

.brand-name-mobile {
  width: 100%;
  text-align: center;
  margin-top: 4px;
}

.brand-name-mobile .google-link {
  display: inline-block;
  font-size: 16px;
  color: inherit;
  text-decoration: none;
}

/* ======================================================
   HERO
====================================================== */
.hero {
  margin: 60px 2px 25px;
  position: relative;
}

#titolo-principale {
  bottom: var(--gap-titolo, 12px);
  color: #800020;
  font-size: 32px;
  left: 50%;
  position: absolute;
  text-align: center;
  transform: translateX(-50%) translateY(50%);
  z-index: 2;
  width: 100%; 
}

/* LOGO CENTRALE */
.background-logo {
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.background-logo img {
  display: block;
  margin: 0 auto;
  opacity: 0.8;
  width: 375px;
  height: auto;
}

/* ======================================================
   DECORAZIONI HERO
====================================================== */
.decorazioni {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

.hero .decorazioni picture.dolce img {
  display: block;
  height: auto;
  width: 112px;
}

.decorazioni picture.dolce {
  opacity: 0.18;
  position: absolute;
}

.decorazioni .d1 {
  top: 4%;
  left: 0%;
  transform: rotate(-50deg);
}

.decorazioni .d2 {
  top: 30%;
  left: 78%;
  transform: rotate(20deg);
}

.decorazioni .d3 {
  top: 65%;
  left: 6%;
  transform: rotate(-15deg);
}

/* ======================================================
   LINK E PROFILI
====================================================== */
.right {
  display: flex;
  gap: 15px;
}

.insta-item {
  display: flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-family: 'Baloo 2', cursive;
  font-size: 17px;
  gap: 5px;
  transition: none;
}

.insta-item img {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  object-fit: cover;
}

.insta-item span {
  display: inline-block;
  transform: translateY(-5px);
}
/* ===========================
   CONTENITORE PRINCIPALE REGOLAMENTO
=========================== */
/* === TABLET: variabili di spaziatura per la card Regolamento === */
:root{
  /* altezza approssimativa della tua topbar su tablet */
  --topbar-h: 75px;

  /* spazio sopra = safe area + topbar + un po’ di respiro */
  --reg-top-space: calc(env(safe-area-inset-top) + var(--topbar-h) + 14px);

  /* spazio sotto */
  --reg-bottom-space: 24px;
}

/* === TABLET: Regolamento responsive in altezza === */
.Regolamento{
  position: relative;
  z-index: 10;

  /* larghezza/impaginazione */
  max-width: 375px;
  width: min(375px,
    calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 24px)
  );
  box-sizing: border-box;

  /* margini coerenti con topbar e safe-area */
  margin: var(--reg-top-space) auto var(--reg-bottom-space);

  /* stile tuo esistente */
  padding: 15px 30px;
  text-align: center;
  background: rgba(255, 248, 240, 0.7);
  border-radius: 100px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* scroll solo verticale dentro la card */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.Regolamento::-webkit-scrollbar{ width:0; height:0; }

/* altezza: usa dvh per evitare salti dell’address bar, con fallback */
@supports (height: 1dvh){
  .Regolamento{
    max-height: min(750px,
      calc(100dvh - var(--reg-top-space) - var(--reg-bottom-space))
    );
  }
}
@supports not (height: 1dvh){
  .Regolamento{
    max-height: min(750px,
      calc(100vh - var(--reg-top-space) - var(--reg-bottom-space))
    );
  }
}
.Regolamento::-webkit-scrollbar {
  width: 0;
  height: 0;   /* per sicurezza su contenuti orizzontali */
}

.Regolamento::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px; bottom: -30px; left: -30px;
  z-index: -1;
  border-radius: 100px;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.3),
    transparent 70%
  );
}

/* ===========================
   TESTI REGOLAMENTO
=========================== */
.Regolamento h1 {
  margin-bottom: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: normal;
  font-size: 37px;
  color: #e0b37d;
}

.Regolamento p {
  margin-bottom: 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 1.1em;
  line-height: 1.3;
  color: #2c3e50;
}

/* ===========================
   BOTTONE HOME REGOLAMENTO
=========================== */
.Regolamento a.button-home {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 3px;
  font-size: 1.5em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;

  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  border-radius: 100px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: 0.3s;
}

.Regolamento a.button-home:hover {
  transform: translateY(-10px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.Regolamento a.button-home:active {
  background: linear-gradient(135deg, #FFD86B, #FF4A59);
  box-shadow: 0 4px 25px rgba(255, 122, 89, 0.5);
  transform: scale(1.5);
}
/* ======================================================
   CARTOLINA BASE
====================================================== */
.cartolina {
  position: relative;
  margin: 45px auto 0;
  padding: 2px 25px;
  width: 400px;
  font-size: 16px;
  font-family: 'Baloo 2', cursive;
  text-align: center;
  background-color: #fffaf0;
  border: 2px solid #a23e48;
  border-radius: 120px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.cartolina::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("img/cartolina.jpg"); /* fallback */
  background-image: -webkit-image-set(
    url("img/cartolina.webp") type("image/webp"),
    url("img/cartolina.jpg")  type("image/jpeg")
  );
  background-image: image-set(
    url("img/cartolina.webp") type("image/webp"),
    url("img/cartolina.jpg")  type("image/jpeg")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.25;
  border-radius: 120px;
  pointer-events: none;
  margin-bottom: 0;
}

.cartolina h2 {
  margin-bottom: 0;
  margin: 5px 20px 0;
}

.cartolina p {
  margin: 0 35px;
  line-height: 1.4;
}

/* ======================================================
   TESTO CON GRADIENTE
====================================================== */
.gradient-text {
  display: inline-block;
  font-weight: bold;
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.01s;
  cursor: pointer;
  font-size: 2.1em;
  margin-bottom: 0;
}

.gradient-text:hover {
  transform: scale(1.3);
}

/* ======================================================
   WRAPPER CARTOLINA
====================================================== */
.cartolina-wrapper {
  display: block;
  margin: 0 auto;
  position: relative;
  padding: 0;
}
.cartolina-wrapper:hover .cartolina > a.cartolina-link h2,
.cartolina-wrapper:hover .cartolina > a.cartolina-link p {
  transform: scale(1.05);
  transition: transform 0.01s ease;
}

/* ======================================================
   VERSIONE CARTOLINA CLICCABILE
====================================================== */
.cartolina-link {
  text-decoration: none;
  color: inherit;
}

.cartolina-link .cartolina {
  background-color: #fffaf0;
  border: 2px solid #a23e48;
  border-radius: 120px;
  padding: 0;  
  margin: 0 auto;
  max-width: 400px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Nunito', sans-serif;
  text-align: center;
  transition: transform 0.01s, box-shadow 0.2s;
  cursor: pointer;
  color: inherit;
}

.cartolina-link .cartolina:hover {
  transform: translateY(-5px);
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
}
#dediche-foto {
  text-align: center;
  font-size: 15px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
}
#prodotti {
  font-size: 52px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0;
  
}
.prezzo {
  color: #364156;             /* blu-grigio elegante e bilanciato */
  font-family: 'Nunito', sans-serif;
  font-size: 1.10em;           /* leggermente più grande del testo base */
  font-weight: 600;           /* semi-grassetto */

}
.tilde-gigante {
  font-size: 125px;
  color: #FFCC4D;
  text-align: center;
  line-height: 0.1;
  margin: 20px 0 0;  
  font-weight: 100; /* da 100 a 900, meno = più sottile */
}
#narrazione {
  font-size: 18px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 0 25px 0;
}
#prodotti-panettone {
  font-size: 40px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#prodotti-panettoneA {
  font-size: 40px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#prodotti-panettoneB {
  font-size: 40px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#prodotti-panettoneC {
  font-size: 40px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#prodotti-panettoneD {
  font-size: 40px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 10px 0 0; 
}
#Nota-7 {
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 40px 0; 
}
#Nota-7A {
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 40px 0; 
}
#Nota-7B {
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 40px 0; 
}
#Nota-7C {
  font-size: 16px;
  font-family: 'Nunito', sans-serif;
  font-weight: 600;
  color: black;
  text-align: center;
  margin: 0 40px 0; 
}
/* ===============================
   BOTTONE "CLICCA👉"
=============================== */
.storia-label {
  display: block;
  margin: 0 auto;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 32px;
  font-weight: bold;
  color: #191970;
  cursor: pointer;
  white-space: nowrap;
}

/* ===============================
   MODAL (sfondo dietro al popup)
=============================== */
.storia-modal {
  display: none;
  position: fixed;
  top: 0;                 /* parte da in alto */
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}

/* contenuto del popup */
.storia-modal-content {
  background-color: #fff8f0;
  margin: 90px auto 0; /* sposta il popup sotto la tua top bar (70px esempio) */
  padding: 1rem;
  border: 3px solid #e0b37d;
  border-radius: 60px;
  width: 500px;
  max-height: 600px;
  text-align: center;
  color: #2c3e50;
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  position: relative;
  overflow-y: auto;      /* o scroll */
  overflow-x: hidden;
  
  /* “momentum scrolling” su iOS (fluido) */
  -webkit-overflow-scrolling: touch;

  /* nascondi la scrollbar (senza disattivare lo scroll) */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* vecchi IE/Edge */  
}
.storia-modal-content::-webkit-scrollbar {
  width: 0;
  height: 0;   /* per sicurezza su contenuti orizzontali */
}
.storia-modal {
  height: 100vh;   /* fallback vecchio */
  height: 100svh;  /* meglio con barre */
  height: 100dvh;  /* migliore dove supportato */
    overscroll-behavior: contain; /* niente rimbalzo/scroll dietro */
}
:root{ --topbar-h:70px; }
.storia-modal{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top)); }

/* bottone chiusura */
.storia-close {
  position: absolute;
  top: 5px;
  right: 20px;
  font-size: 62px;
  font-weight: bold;
  cursor: pointer;
  color: #2c3e50;
  transition: color 0.2s ease;
}
.storia-close:hover {
  color: #e74c3c;
}

/* titolo nel popup */
.storia-modal-content h2 {
  font-size: clamp(14px, 6vw, 22px) !important; /* adatta la dimensione */
  margin-top: 0;                     /* se non vuoi spazio extra sopra */
  margin-bottom: 0.5em;              /* un po’ di respiro sotto */
  font-weight: bold;
  color: #2c3e50;                    /* o un colore personalizzato */
}

/* ===============================
   VETRINE PRODOTTI
=============================== */
.vetrina {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  gap: 8px;
  padding-bottom: 0;
}

.vetrina .prodotto {
  margin: 0 0 5px;
  line-height: 1;
}

.vetrina .ingredienti {
  margin: 0 auto 0;
}

.vetrina .valori-btn {
  margin-top: 1px;
}

.prodotto .zoom-interno {
  transform: scale(1.4);
}
/* ===============================
   CARD PRODOTTO
=============================== */
.prodotto {
  position: relative;
  border: 1px solid #ccc;
  border-radius: 100px;
  width: 187.5px;
  text-align: center;
  padding: 7px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
}

.prodotto h2 {
  margin-top: 10px; /* personalizzato (es. Torta Fregoloti) */
  font-size: 1.3rem; /* adatta finché ti piace */
}

.prodotto img {
  width: 100%;
  height: auto;
  border-radius: 100px;
  display: block;
  position: relative;
  z-index: 1;
  filter: brightness(0.90) contrast(1.05);
}

.prodotto .locandina {
  width: 187.5px;   /* o quanto vuoi */
  height: 235px;  /* abbassa proporzioni */
}

.prodotto .locandina::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px; /* stesso valore di .locandina */
  z-index: 2;
  pointer-events: none;
}

/* Input quantità */
.prodotto input[type="number"] {
  display: block;
  margin: 5px auto 10px;
  width: 87.5px;
  text-align: center;
  border-radius: 20px;
}

.prodotto input.quantita {
  animation: none;
  box-shadow: none;
  background-color: #fff;
  caret-color: #000;
  transform: none;
  position: relative;
  z-index: 2;
}

/* Prodotti speciali con effetto glow */
.prodotto.speciale-panettone {
  border: none;
  box-shadow: 0 0 25px #e74c3c;
  animation: glow-rosso 0.8s infinite alternate;
}

.prodotto.speciale-cocco {
  border: none;
  box-shadow: 0 0 25px #4CAF50;
  animation: glow-verde 1s infinite alternate;
}
/* ===========================
   LOCANDINA
=========================== */
.locandina {
  width: var(--w, 220px);
  height: var(--h, 330px);
  position: relative;
  overflow: hidden;
  border-radius: 80px;
}

.prodotto .locandina picture > img.zoom-interno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  transform: scale(var(--zoom, 1.25));
  transform-origin: center;
  clip-path: inset(0);
  z-index: 0;
}
#PAN_CLASSICO_1KG .locandina .zoom-interno{
  transform: translateY(-25px) scale(var(--zoom, 1.35));
}
#PAN_ARANCIA_850 .locandina .zoom-interno{
  transform: translateY(-25px) scale(var(--zoom, 1.35));
}
/* === Overlay: centrato con Grid (nessun transform) === */
.popup-ingredienti{
  position: fixed;
  inset: 0;
  padding: 24px;                 /* respiro ai bordi */
  z-index: 10000;
  background: transparent;
  display: grid;
  place-items: center;           /* centro X+Y robusto */
  overflow: hidden;              /* lo scroll è SOLO nella card */
}
.popup-ingredienti[hidden]{ display: none !important; }

/* === Card interna (scorrevole) — misure come richiesto === */
.popup-ingredienti .popup-content{
  box-sizing: border-box;

  /* Larghezza: target 375px, ma si adatta se lo schermo è stretto (Samsung zoom) */
  width: min(375px, calc(100svw - env(safe-area-inset-left) - env(safe-area-inset-right) - 48px));
  max-width: 375px;

  /* Altezza: come tua (60dvh); aggiungo anche 60svh per robustezza mobile */
  max-height: min(60dvh, 60svh);

  overflow-y: auto;              /* scroll dentro la card */
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.popup-ingredienti .popup-content::-webkit-scrollbar{ width:0; height:0; }

/* === Stile visuale (invariato ma con padding 25px) === */
.popup-ingredienti .popup-content{
  background: #fffaf0;
  border: 2px solid #c49b63;
  border-radius: 60px;
  padding: 25px;
  text-align: center;
  position: relative;
  font-family: 'Baloo 2', cursive;
  color: #2c3e50;
  animation: popupFade 0.25s ease;
}
.popup-ingredienti .popup-content strong{ color: #a23e48; }

/* Chiudi: 50×50, posizionamento come richiesto */
.popup-ingredienti .chiudi{
  position: absolute;
  top: 18px; right: 22px;
  width: 50px; height: 50px;
  background: none; border: none; border-radius: 30px;
  font-size: 0.85rem; color: #a23e48; cursor: pointer;
  transition: transform 0.01s ease;
}
.popup-ingredienti .chiudi:hover{ transform: scale(1.3); }

/* Testo: dimensioni/line-height richieste */
.popup-ingredienti .testo{
  line-height: 1.55;
  font-size: 1.25rem;
  white-space: normal;
}

/* ===============================
   SCADENZA
=============================== */
.scadenza {
  font-size: 0.9rem;       /* grandezza caratteri */
  font-weight: bold;       /* grassetto */
  color: #2c3e50;          /* colore testo */
  text-align: center;      /* centra il testo */
  margin-bottom: 10px;     /* spazio sotto */
  line-height: 1.4;        /* altezza riga per leggibilità */
  font-family: 'Nunito', sans-serif;
}
/* ===============================
   QUADRIFOGLIO & STORIA
=============================== */
.quadrifoglio {
  position: absolute;
  top: -10px;
  left: -30px;
  font-size: 125px;
  z-index: 15;
  pointer-events: none;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
}
/* ===========================
   BOTTONE VALORI NUTRIZIONALI
=========================== */
.valori-btn {
  display: inline-block;
  margin: 8px 8px 20px;
  padding: 2px 4px;
  font-family: 'Baloo 2', cursive;
  font-size: 0.93em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  border: none;
  border-radius: 60px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.01s ease, box-shadow 0.05s ease;
}

/* ===========================
   TABELLA VALORI NUTRIZIONALI
=========================== */
.tabella-valori {
  width: 100%;
  margin-top: 0;
  border-collapse: collapse;
  font-size: 0.75em;
}

.tabella-valori th,
.tabella-valori td {
  padding: 8px 6px;
  text-align: left;
  border: 1px solid #e6e6e6;
}

.tabella-valori th {
  background: #fff4e6;
  font-weight: 700;
}

.tabella-valori td.num {
  text-align: right;
  font-family: monospace;
}
#Nota-8 {
  font-size: 17px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 10px 60px 0;
}
#Nota-81 {
  font-size: 17px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 10px 60px 0;
}
#Nota-82 {
  font-size: 17px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 10px 60px 0;
}
#Nota-83 {
  font-size: 17px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 10px 60px 0;
}
#Nota-84 {
  font-size: 17px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  margin: 0 60px;
}
/* ===============================
   AVVISI E LOCANDINA
=============================== */
.prodotti-freschi-avviso {
  background-color: rgba(255, 250, 240, 0.7);
  border: 2px solid #f5cda7;
  border-radius: 60px;
  margin: 10px auto;
  text-align: center;
  font-family: 'Georgia', serif;
  color: #4b3e2b;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  line-height: 1.15;
  width: 100%;
  max-width: 375px;
}

.prodotti-freschi-avviso .emoji {
  font-size: 1.5rem;
}
#Nota-8A {
  font-size: 15px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center; 
  padding: 0 20px;
  line-height: 1.25;   
}
/* ===============================
   NOTE
=============================== */
#Nota-12 {
  font-size: 16px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center;
  line-height: 1.2;
  margin: 10px 50px 0;
  padding: 0 0;
}
.Nota-14 {

  text-align: center;
  margin: 5px 50px;

}

#Nota-10 {
  font-size: 40px;
  font-family: 'Nunito', sans-serif;
  color: #122E66;
  text-align: center;
  margin: 25px 0 0;
}
/* ===========================
   BOTTONE "ingredienti4"
=========================== */
.ingredienti4 {
  display: block;
  margin: 10px auto 18px;
  max-width: 200px;
  padding: 5px 0;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 25px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #FFD93D, #FFB347);
  border-radius: 80px;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transition: transform 0.01s ease, box-shadow 0.2s ease;
}

.ingredienti4:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
/* ===========================
   BOX TOTALE APERTURA
=========================== */
.totale-apertura {
  max-width: 375px;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 20px 0;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 10px;
  color: #b58346;
  background: #fff8f0;
  border-radius: 60px;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
}
/* ===========================
   NOTA-4 (box con icona pacco)
=========================== */
.Nota-4 {
  position: relative;
  overflow: hidden;
  padding: 15px;
}

.Nota-4::before {
  content: "📦";
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 200px;
  opacity: 0.2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: scrollPacco 3s linear infinite;
}
#Nota-4 {
  margin-bottom: 0;
  text-align: center;
  font-size: 35px;
  font-family: 'Baloo 2', cursive;
  color: #222;
}
/* ===========================
   REGOLE GENERALI TESTO
=========================== */
#spedizioni {
  margin-top: 3px;
  padding-left: 0;
  list-style: none;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 25px;
  line-height: 1.4;
}

#spedizioni li {
  margin-bottom: 3px;
}
/* ===========================
   TITOLO SPEDIZIONE
=========================== */
.titolo-spedizione {
  margin: 15px 30px 20px;
  padding: 0 15px;
  font-family: 'Nunito', sans-serif;
  font-size: 25px;
  color: #0D47A1;
}
/* ===========================
   SEZIONE SPEDIZIONE
=========================== */
.spedizione {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0;
  text-align: center;
}

.opzioni-spedizione-wrapper {
  display: flex;
  justify-content: center;
  gap: 5px;
}

.opzione-spedizione {
  display: inline-block;
  width: 100px;
  padding: 10px;
  text-align: center;
  border: 2px solid #ccc;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.opzione-spedizione input {
  display: none;
}

.opzione-spedizione input:checked + p {
  background-color: #ffece0; /* border-color rimosso: non applicabile a <p> */
}

.opzione-spedizione p {
  margin: 0;
  font-size: 15px;
}
/* ===========================
   CARRELLO & NOTE PAGAMENTO
=========================== */
.carrello{
  text-align: center;
  margin: 35px;
}

.carrello button {
  display: inline-block;
  margin: 0 0;
  border-radius: 60px;
  cursor: pointer;
  max-width: 125px;
  
}
#lista-carrello {
  max-width: 400px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

#lista-carrello li {
  display: flex;
  justify-content: center;
  padding: 5px 10px;
  margin: 0 0;
  font-size: 18px;
  text-align: center;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
}
#totale {
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
  font-size: 27px;
  font-weight: bold;
}
/* ===========================
   BUTTON GENERICI
=========================== */
button,
input[type="button"],
input[type="submit"] {
  display: inline-block;
  padding: 12px 10px;
  font-size: 17px;
  font-weight: bold;
  color: #fff;
background: linear-gradient(
  135deg,
  #FFD173 0%,
  #FF9B56 30%,
  #FF6A48 60%,
  #FF3E5C 100%
);
  border: none;
  border-radius: 60px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  transition: 0.01s;
  
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

button:hover {
  background: linear-gradient(
    135deg,
    #FF7A59 0%,
    #FF9966 40%,
    #FFB86B 100%
  );
}
#finale-carrello {
  font-size: 25px;
  font-family: 'Baloo 2', cursive;
  color: #800020;
  text-align: center;
  margin: 0 2px 0; 
}
/* ===========================
   BOTTONI FOOTER
=========================== */
.box-bottoni {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;            /* iOS/Android moderni ok */
  width: 100%;
  max-width: 375px;     /* metti un limite sensato, non 50px */
  margin: 0 auto;
  box-sizing: border-box;

}

.bottone-footer {
  flex: 0 0 calc(50% - 10px);  /* 2 per riga */
  min-width: 150px;            /* evita bottoni troppo piccoli */
}

.reset-carrello {
  flex: 0 0 100%;              /* va sotto a tutta riga */
}


.bottone-footer {
  background: linear-gradient(135deg, #FFE600, #00E5C0);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  font-size: 25px;

}
.bottone-footer:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FFD700;
}
.bottone-footerA {
  background: linear-gradient(135deg, #FFB6C1, #FF9EC7, #FFD6A5);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  max-width: 120px !important;
  font-size: 21px;
}

.bottone-footerA:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FF9EC7;
}
.bottone-footerB {
  background: #FFD700;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  width: 187.5px !important;
  padding: 5px 0 !important;
  font-size: 22px;  

}

.bottone-footerB:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FFD700;
  background: linear-gradient(135deg, #FFB300, #FFD700, #00C9A7);  
}
.bottone-footerC {
  background: linear-gradient(135deg, #FFB86B 0%, #FF9966 30%, #FF7A59 60%, #FF6A48 100%);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  width: 187.5px !important;
  padding: 5px 0 !important;
  font-size: 22px;
  margin: 10px 0 0 !important;

}

.bottone-footerC:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transform: translateY(-3px);
  background: linear-gradient(135deg, #FF7A59 0%, #FF9966 40%, #FFB86B 100%);
}

/* ===========================
   POPUP PAGAMENTO
=========================== */
#popup-pagamento {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  max-height: 50vh;
  overflow: hidden;
  background: #fff8f0;
  border: 2px solid #c49b63;
  border-radius: 80px;
  z-index: 9999;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  font-family: 'Baloo 2', cursive;
}

#popup-pagamento .popup-content {
  max-height: 40vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 35px 25px;
  border-radius: inherit;
  /* “momentum scrolling” su iOS (fluido) */
  -webkit-overflow-scrolling: touch;

  /* nascondi la scrollbar (senza disattivare lo scroll) */
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* vecchi IE/Edge */    
}

.popup-content::-webkit-scrollbar {
  width: 0;
  height: 0;   /* per sicurezza su contenuti orizzontali */
}
:root{ --topbar-h:75px; }
.popup-content{ padding-top: calc(var(--topbar-h) + env(safe-area-inset-top)); }

#popup-pagamento h3 {
  margin: 0 0 10px;
  padding: 5px 10px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 1.15em;
  color: #fff;
  text-align: center;
  background: linear-gradient(135deg, #3a6ea5, #5aa3c8);
  border-radius: 30px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

#popup-pagamento button {
  width: 100%;
  margin: 5px 0;
}

/* Bottone compila modulo spedizione */
#compilaModuloBtn {
  background: #FFC533;
  width: 250px !important;
  border-radius: 60px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 22px;
  margin: 10px auto !important;
  padding: 10px 3px;
  text-align: center;

}
/* Hover bottone compila modulo */
#compilaModuloBtn:hover {
  background: #FFCC4D;
  
}
#iban {
  display: none;
  margin: 5px 30px;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 1rem;
  font-weight: bold;
  color: #2c3e50;
}
.nota-pagamento {
  margin: 1px 0 10px;
  text-align: center;
  font-family: 'Baloo 2', cursive;
  font-size: 1em;
  color: #2c3e50;
}
#nutr-title {
  white-space: pre-line;
  text-align: center;
  font-size: 18px;
  font-family: 'Baloo 2', cursive;  
}
/* ===========================
   POPUP NUTRIZIONE
=========================== */
#popup-nutrizione {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10001;
  width: 90%;
  max-width: 387px;
  max-height: 87vh;
  padding: 18px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-sizing: border-box;
}
/* aperto */
#popup-nutrizione.is-open {
  display: flex;
  flex-direction: column;
}

/* contenuto scrollabile */
#popup-nutrizione #nutr-content {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 75vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 8px;
}

#popup-nutrizione h3 {
  margin: 0 0 8px;
  font-family: 'Baloo 2', cursive;
}

#popup-nutrizione .chiudi {
  float: right;
  background: transparent;
  border: none;
  font-size: 27px;
  cursor: pointer;
  color: #666;
  
}
/* ===========================
   FOOTER ELEGANTE
=========================== */
.footer-elegante {
  padding: 20px;
  text-align: center;
  color: #333;
  background-color: #fff8f0;
  font-family: 'Baloo 2', cursive;
  margin: 0 0;
}

.footer-rights {
  margin-bottom: 10px;
  padding: 0 15px;
  font-size: 2.2em;
  font-weight: bold;
}

.footer-links {
  margin: 10px 0;
}

.footer-btn {
  display: inline-block;
  margin: 0 10px;
  padding: 6px 6px;
  font-size: 1.9em;
  font-weight: 600;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to right, #00cfff, #0044ff);
  border-radius: 25px;
  transition: transform 0.01s ease;
}

.footer-btn:hover {
  transform: scale(1.2);
}

.footer-text {
  margin-top: 15px;
  padding: 0 0;
  font-size: 1.8em;
}
/* ===========================
   FOOTER
=========================== */
footer {
  text-align: center;
  font-size: 9px;
  color: #555;
}
#email-link{
  display:block;            /* il link prende tutta la riga */
  text-align:center;        /* testo centrato dentro */
  font-size:1.3em;
  font-weight:600;
  background:linear-gradient(to right,#00cfff,#0044ff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-decoration:none;
}

/* ===========================
   OVERLAY
=========================== */
#overlay {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9998;
  background: transparent;
}
/* ===========================
   ANIMAZIONI POPUP
=========================== */
@keyframes popupFade {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ===========================
   ANIMAZIONI GLOBALI
=========================== */
@keyframes spotlightPulse {
  0%   { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50%  { opacity: 0.8; transform: translateY(-50%) scale(1.1); }
  100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
}

@keyframes scrollPacco {
  0%   { transform: translate(-50%, -55%) rotate(0deg); }
  50%  { transform: translate(-50%, -45%) rotate(5deg); }
  100% { transform: translate(-50%, -55%) rotate(0deg); }
}

@keyframes glow-verde {
  0%   { box-shadow: 0 0 10px #4CAF50; }
  50%  { box-shadow: 0 0 30px #4CAF50; }
  100% { box-shadow: 0 0 25px #4CAF50; }
}

@keyframes glow-rosso {
  0%   { box-shadow: 0 0 5px #FFC785; }
  50%  { box-shadow: 0 0 30px #F29A85; }
  100% { box-shadow: 0 0 25px #F29A85; }
}

@keyframes bordoOndeggiante {
  0%   { box-shadow: 0 0 25px rgba(231, 76, 60, 0.6), 0 0 15px rgba(192, 57, 43, 0.4) inset; }
  50%  { box-shadow: 0 0 50px rgba(231, 76, 60, 1),   0 0 25px rgba(192, 57, 43, 0.6) inset; }
  100% { box-shadow: 0 0 35px rgba(231, 76, 60, 0.8), 0 0 20px rgba(192, 57, 43, 0.5) inset; }
}
/* Rimuove l’alone grigio su iOS */
* {
  -webkit-tap-highlight-color: transparent;   /* oppure rgba(0,0,0,0) */
}

/* Se il bottone prende un contorno (outline) brutto al focus: personalizza bene */
button:focus {
  outline: none;                 /* elimina il default solo se metti un’alternativa */
}
button:focus-visible {
  outline: 2px solid #0a84ff;    /* esempio accessibile */
  outline-offset: 2px;
}
  /* Stili minimi e accessibili */
  #cc-banner, #cc-modal { 
  position: fixed; 
  inset: 0; 
  display: grid; 
  place-items: end center; 
  z-index: 99999; 
  
}
  #cc-banner[hidden], #cc-modal[hidden] { display: none; }
  .cc-box{
    width: 600px;
	margin: 0 0; 
	padding: 25px;
    background: linear-gradient(180deg, #fff8f0 0%, #fdf1e1 40%, #f6e4cf 100%);
	border:1px solid #e6e6e6; 
	border-radius:80px;
    box-shadow:0 10px 30px rgba(0,0,0,.15); 
    font-family: 'Baloo 2', cursive;
	color:#2c3e50;
  }
  .cc-text{ 
  margin:0 10px 10px; 
  font-size:16px; 
  line-height:1.4; 
  }
  .cc-link{ 
  color:#0a7cff; 
  text-decoration:underline; 
  }
  .cc-actions{ 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  justify-content:center; 
  }
  .cc-btn{ 
  border:0; 
  border-radius:999px; 
  padding:10px 6px; 
  cursor:pointer; 
  font-weight:600; 
  font-size: 26px;
  transition: transform 0.01s ease;
  }
  .cc-primary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff; 
  }
  .cc-secondary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff;  
  }
  .cc-tertiary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff;  
  }
  /* Modale preferenze */
  #cc-modal{ 
  place-items:center; 
  background: linear-gradient(135deg,
    rgba(245,245,245,.70), rgba(220,220,220,.50)
  );
  }
  .cc-modal-card{
    width: 400px; 
    background: linear-gradient(180deg, #fff8f0 0%, #fdf1e1 40%, #f6e4cf 100%);
	border-radius: 120px; 
	padding:20px; 
	box-shadow:0 10px 30px rgba(0,0,0,.2);
    font-family: 'Baloo 2', cursive;
	font-size: 16px;

  }
  .cc-row{ 
  margin:10px 0; 
  }
  .cc-row small{ 
  display:block; color: black; 
  }
  .cc-switch{ 
  display:flex; 
  align-items:center; 
  gap:5px; 
  font-weight:600; 
  }

	.cc-btn:hover {
  transform: scale(1.2);
  background: #00C98B;
}
#popup-spedizione {
    position: fixed; margin: 50px auto; inset: 0; z-index: 10040; display:none;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
  }
#popup-spedizione .sped-card {
    font-family: "Baloo 2", cursive;
    max-width: 500px;
    margin: 100px auto 0; padding: 20px 18px 16px;
    border-radius: 50px;
    background: #FFF7EA;
    color: #3b2b18;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    position: relative;
    max-height: 400px; overflow: auto;
  }
#popup-spedizione h3 {
    margin: 0 0 14px; font-size: 26px; text-align: center;
  }
  #popup-telefono {
    position: fixed; margin: 50px auto; inset: 0; z-index: 10040; display:none;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
  }
#popup-telefono .sped-card {
    font-family: "Baloo 2", cursive;
    max-width: 400px;
    margin: 100px auto 0; padding: 20px 18px 16px;
    border-radius: 50px;
    background: #FFF7EA;
    color: #3b2b18;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    position: relative;
    max-height: 300px; overflow: auto;
  }
#popup-telefono h3 {
    margin: 0 0 14px; font-size: 26px; text-align: center;
  }
  .sped-close{
    position:absolute; top: 20px; right: 20px;
    border:0; background:transparent; font-size:25px; line-height:1; cursor:pointer;
    color:#5b4631;
  }
  .sped-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  }
  .sped-grid label{ display:flex; flex-direction:column; font-size:20px; gap:6px; }
  .sped-grid input, .sped-grid textarea{
    border: 1px solid #e7dccb; border-radius: 20px; padding: 10px 12px; font-size:15px;
    background:#fffdf8; outline:none; text-align: center; margin: 0 10px; color: #4A4A4A;
  }


  .sped-primary, .sped-secondary{
    border:0; border-radius: 999px; padding: 10px 16px; cursor:pointer; font-size:18px;
    font-family: "Baloo 2", cursive;
  }
 /* Contenitore della vignetta = overlay full screen centrato */
/* Overlay (invariato ma con centratura esplicita) */
.vignetta{
  position: fixed;
  inset: 0;
  padding: 24px;
  z-index: 10040;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  display: grid;
  place-items: center;
}
.vignetta[hidden]{ display: none !important; }

/* Card: 500px “target”, ma si riduce se lo schermo è più stretto */
.vignetta-card{
  box-sizing: border-box;
  width: min(500px, calc(100svw - env(safe-area-inset-left) - env(safe-area-inset-right) - 48px));
  max-width: 92svw;

  /* altezza: non supera 450px e si adatta allo schermo */
  max-height: min(70svh, 450px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background:#fff8f0;
  border:1px solid #f2d8c7;
  border-radius:110px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding: 0 18px 30px;
  font-family:'Nunito', system-ui, Arial, sans-serif;
  line-height:1.35;
  font-size: 14px;

  margin-inline: auto;      /* centro classico */
  justify-self: center;     /* centro da Grid (ridondanza utile su Android) */
}

.v-title{ margin:0 0 6px; font-weight:700; font-size: 22px;}

/* X di chiusura */
.vignetta-close{
background: rgba(214, 180, 140, 0.9);
padding: 3px 50px;

 font-size:30px !important; margin: 5px auto 0 !important;
  cursor:pointer;
  color: black;
  
}
/* Usa questa utility dove vuoi testo “smeraldo” gradiente */
.emerald-text{
  background-image: linear-gradient(90deg, #00c98b 0%, #00b37a 50%, #009a68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.08); /* leggero sostegno sul beige */
}
.bottone-info{
  font-size: 20px;
} 
.mini-nav{
  position: fixed;
  left: 14px; /* affianco al carrello che sta a right:14px */
  top: 90px;
  width: 36px; height: 36px;
  border-radius: 20px;
  background: #fff8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border: 1px solid #f0e6d8;
  cursor: pointer; z-index: 10050;
  display: inline-flex; align-items:center; justify-content:center;
}
.mini-nav-panel{
  position: fixed;
  left: 20px !important; /* allineato al pulsante ≡ */
  top: 90px !important;
  width: min(92vw, 280px);
}
.mini-cart{
  position: fixed;
  left: 60px; top: 90px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 20px;
  background: #fff8f0; /* beige */
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  font-family: 'Baloo 2', system-ui, sans-serif;
  cursor: pointer; z-index: 10050;
  border: 1px solid #f0e6d8;
}
.mini-cart-panel{
  position: fixed; left: 20px; top: 90px; width: min(92vw, 300px); max-height: 350px;
  background: #fffdfa; color:#222; border: 1px solid #f0e6d8;
  border-radius: 60px; box-shadow: 0 16px 48px rgba(0,0,0,.18);
  font-family: 'Baloo 2', system-ui, sans-serif; overflow: hidden; z-index: 10040;
  display: none;
}
#popup-pagamento .receipt-card pre{
  white-space:pre-wrap; margin:0;   font-family:'Baloo 2', cursive;
  background:#fff; border:1px dashed #eadfce; padding:10px; border-radius:12px; font-size: 13px;
}
.v-list {
  margin: 0;
  padding: 2px 16px;
  list-style-type: none; /* opzionale: rimuove i pallini */
}

.v-list li {
  border-bottom: 1px solid #ccc; /* linea sotto ogni riga */
  padding: 6px 0;               /* un po’ di spazio verticale */
}

/* opzionale: rimuove la linea dopo l’ultimo elemento */
.v-list li:last-child {
  border-bottom: none;
}
.footer-mini{
  margin-top: 0px; 
  font-size:18px;
  opacity:.95;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
}
.popup-content .nota{

  font-size: 16px;      /* piccola */

}
.conferma {

  font-size: 17px;                   /* grandezza regolabile (es. 1rem–1.5rem) */

}
#site-notice .notice__panel{
  padding: 40px 20px 10px;
  width: 300px;

}
/* --- Content --- */
#site-notice h2{

  font-size: 26px;

}
#site-notice p{

  font-size: 17px;

}
#site-notice .notice__close{
  top: 5px; right: 125px;
  width: 42px; height: 42px;
  font-size: 32px;
  line-height: 0;

}
}
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */
/* ======================================================
   IPHONE
====================================================== */

@media (min-width: 1201px){

/* ======================================================
   STILI DI BASE: BODY & HEADER
====================================================== */
body {
  background-color: #fff8f0;
  font-family: 'Nunito', sans-serif;
  margin: 0;
  padding: 0;
  text-align: center;
}

header {
  padding: 0 36px;
  text-align: center;
}

/* ======================================================
   TOP BAR
====================================================== */
.top-bar {
  align-items: center;
  backdrop-filter: blur(5px);
  background-color: rgba(255,250,245,.85);
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: 10px 25px;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-backdrop-filter: blur(5px);
  z-index: 1000;
}

/* --- LINK AREA SINISTRA --- */
.top-bar .left a {
  color: #333;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
}

/* --- LINK AREA DESTRA --- */
.top-bar .right a img {
  height: 35px;
  margin-left: 20px;
  width: 35px;
}

/* --- AREA DESTRA GRUPPO LINK --- */
.right {
  display: flex;
  gap: 15px; /* spazio tra i profili */
}

/* ======================================================
   GOOGLE LINK
====================================================== */
.top-bar a.google-link {
  color: inherit;
  display: inline-block;
  text-decoration: none;
}
.top-bar a.google-link:hover {
  transform: scale(1.1);
}

/* ======================================================
   INSTAGRAM LINK
====================================================== */
.top-bar .insta-item {
  color: inherit;
  gap: 6px;
  text-decoration: none;
}
.top-bar .insta-item span {
  display: inline-block;
}
.top-bar .insta-item:hover span {
  transform: translateY(-6px) scale(1.05);
}

/* --- BASE INSTA ITEM (generico) --- */
.insta-item {
  align-items: center;
  color: #333;
  display: flex;
  font-family: 'Baloo 2', cursive;
  font-size: 14px;
  gap: 5px; /* spazio tra logo e testo */
  text-decoration: none;
  transition: none;
}
.insta-item img {
  border-radius: 50%; /* arrotonda il logo */
  height: 22px;
  object-fit: cover;  /* mantiene proporzioni */
  width: 22px;
}
.insta-item span {
  display: inline-block;
  transform: translateY(-5px); /* alza la scritta di 5px */
}

/* ======================================================
   HERO (logo + decorazioni + titolo)
====================================================== */
.hero {
  margin: 0 10px 140px;
  position: relative;
}

#titolo-principale {
  bottom: var(--gap-titolo, 0px);
  color: #800020;
  font-size: 50px;
  left: 50%;
  position: absolute;
  text-align: center;
  transform: translateX(-50%) translateY(68%);
  z-index: 2;
}

/* LOGO CENTRALE */
.background-logo {
  margin: 0 auto;
  position: relative;        /* resta nel flusso */
  z-index: 1;                /* sopra le decorazioni */
}
.background-logo img {
  display: block;
  margin: 0 auto;
  opacity: 0.8;
  width: 500px;
  height: auto;
}

/* DECORAZIONI in overlay, fuori dal flusso */
.decorazioni {
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 0;                /* sotto logo e titolo */
}
.hero .decorazioni picture.dolce img {
  display: block;
  height: auto;
  width: 140px;
}
.decorazioni picture.dolce {
  opacity: 0.18;
  position: absolute;
}
.decorazioni .d1 {
  left: 15%;
  top: 10%;
  transform: rotate(-40deg);
}
.decorazioni .d2 {
  left: 64%;
  top: 30%;
  transform: rotate(20deg);
}
.decorazioni .d3 {
  left: 27%;
  top: 75%;
  transform: rotate(-15deg);
}

/* ======================================================
   CARRELLO
====================================================== */
#lista-carrello li.carrello-item {
  text-align: center; /* Centra le scritte delle righe nel carrello */
}

/* Contenitore principale regolamento */
.Regolamento {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: rgba(255, 248, 240, 0.7);
  border-radius: 120px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  margin: 30px auto;
  max-width: 600px;
  padding: 20px 40px;
  position: relative;
  text-align: center;
  z-index: 10;
}
/* Effetto interno Regolamento */
.Regolamento::before {
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.3), transparent 70%);
  border-radius: 120px;
  bottom: 30px;
  content: "";
  left: 30px;
  position: absolute;
  right: 30px;
  top: 30px;
  z-index: -1;
}

/* Testi Regolamento */
.Regolamento h1 {
  color: #e0b37d;
  font-family: 'Nunito', sans-serif;
  font-size: 40px;
  font-weight: normal;
  margin-bottom: 10px;
}

.Regolamento h2 {
  color: #FF7A59;
  font-family: 'Nunito', sans-serif;
  font-size: 28px;
  font-weight: normal;
  margin: 10px 0;
}

.Regolamento p {
  color: #2c3e50;
  font-family: 'Nunito', sans-serif;
  font-size: 1.1em;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Bottone Home Regolamento */
.Regolamento a.button-home {
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  border-radius: 100px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  color: white;
  display: inline-block;
  font-size: 1.6em;
  font-weight: bold;
  margin-top: 25px;
  padding: 6px 6px;
  text-decoration: none;
  transition: 0.3s;
}

.Regolamento a.button-home:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transform: translateY(-6px);
}


/* ======================================================
   CARTOLINA BASE
====================================================== */
.cartolina {
  background-color: #fffaf0;
  border: 2px solid #a23e48;
  border-radius: 160px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Baloo 2', cursive;
  font-size: 20px;
  margin: 0 auto;
  overflow: hidden;
  padding: 3px 40px;
  position: relative;
  text-align: center;
  transform-style: preserve-3d;
}

.cartolina::before {
  content: "";
  background-image: url("img/cartolina.jpg"); /* fallback */
  background-image: image-set(
    url("img/cartolina.webp") type("image/webp"),
    url("img/cartolina.jpg") type("image/jpeg")
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 160px;
  height: 100%;
  left: 0;
  opacity: 0.25;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}

.cartolina h2 {
  margin-bottom: 0;
}

.cartolina p {
  line-height: 1.4;
  margin-top: 0;
}

/* ======================================================
   TESTO CON GRADIENTE
====================================================== */
.gradient-text {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  background-clip: text;
  cursor: pointer;
  display: inline-block;
  font-size: 1.9em;
  font-weight: bold;
  transition: transform 0.01s;
  margin-bottom: 0px;
}

.gradient-text:hover {
  transform: scale(1.2);
}

/* ======================================================
   WRAPPER CARTOLINA
====================================================== */
.cartolina-wrapper {
  display: block;
  margin: 0 auto;
  max-width: 600px;
  padding: 0;
  perspective: 800px;
  position: relative;
}

.cartolina-wrapper:hover .cartolina > a.cartolina-link h2,
.cartolina-wrapper:hover .cartolina > a.cartolina-link p {
  transform: scale(1.05);
  transition: transform 0.01s ease;
}

/* ======================================================
   VERSIONE CARTOLINA CLICCABILE
====================================================== */
.cartolina-link {
  color: inherit;
  text-decoration: none;
}

.cartolina-link .cartolina {
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  margin: 30px auto;
  max-width: 600px;
  padding: 20px;
  transition: transform 0.01s, box-shadow 0.2s;
}

.cartolina-link .cartolina:hover {
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}
/* Sezione dediche & note */
#dediche-foto {
  color: #800020;
  font-family: 'Baloo 2', cursive;
  font-size: 22px;
  text-align: center;
  transform: translateY(-5px);
  margin-bottom: 0;
}

/* ===============================
   TITOLI E TESTI
=============================== */
#prodotti {
  color: #800020;
  font-family: 'Baloo 2', cursive;
  font-size: 55px;
  margin: 30px 0 0;
  text-align: center;
}
.prezzo {
  color: #364156;             /* blu-grigio elegante e bilanciato */
  font-family: 'Nunito', sans-serif;
  font-size: 1.25em;           /* leggermente più grande del testo base */
  font-weight: 600;           /* semi-grassetto */

}
.tilde-gigante {
  color: #FFCC4D;
  font-size: 150px;
  font-weight: 200;
  letter-spacing: 8px;
  line-height: 0.1;
  margin: 15px 0 30px;
  text-align: center;
}
#narrazione {
  color: black;
  font-family: 'Baloo 2', cursive;
  font-size: 26px;
  margin: 0 60px;
  text-align: center;
}
#prodotti-panettone {
  color: #800020;
  font-family: 'Baloo 2', cursive;
  font-size: 44px;
  margin: 2px 0 0;
  text-align: center;
}
#prodotti-panettoneA {
  color: #800020;
  font-family: 'Baloo 2', cursive;
  font-size: 44px;
  margin: 2px 0 0;
  text-align: center;
}
#prodotti-panettoneB {
  color: #800020;
  font-family: 'Baloo 2', cursive;
  font-size: 44px;
  margin: 2px 0 0;
  text-align: center;
}
#prodotti-panettoneC {
  color: #800020;
  font-family: 'Baloo 2', cursive;
  font-size: 44px;
  margin: 2px 0 0;
  text-align: center;
}
#prodotti-panettoneD {
  color: #800020;
  font-family: 'Baloo 2', cursive;
  font-size: 44px;
  margin: 2px 0 0;
  text-align: center;
}
#Nota-7 {
  color: black;
  font-family: 'Nunito', sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 150px 2px;
  text-align: center;
}
#Nota-7A {
  color: black;
  font-family: 'Nunito', sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 150px 2px;
  text-align: center;
}
#Nota-7B {
  color: black;
  font-family: 'Nunito', sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 150px 2px;
  text-align: center;
}
#Nota-7C {
  color: black;
  font-family: 'Nunito', sans-serif;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 150px 2px;
  text-align: center;
}
/* ===============================
   BOTTONE "CLICCA👉"
=============================== */
.storia-label {
  color: #191970;
  cursor: pointer;
  display: block;
  font-family: 'Baloo 2', cursive;
  font-size: 36px;
  font-weight: bold;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
}
.storia-label:hover {
  transform: scale(1.2);
}
/* ===============================
   MODAL
=============================== */
.storia-modal {
  background-color: rgba(0,0,0,0.7);
  display: none;
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
.storia-modal-content {
  background-color: #fff8f0;
  border: 3px solid #e0b37d;
  border-radius: 60px;
  color: #2c3e50;
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  margin: 40px auto;
  max-width: 600px;
  padding: 10px 20px;
  position: relative;
  text-align: center;
  width: 100%;
  
}
/* Abilita lo scroll verticale */
.storia-modal-content {
  overflow-y: auto;
  max-height: 80vh;        /* o l'altezza che preferisci */
  
  /* Nasconde la scrollbar in tutti i browser principali */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}

.storia-close {
  color: #2c3e50;
  cursor: pointer;
  font-size: 80px;
  font-weight: bold;
  position: absolute;
  right: 20px;
  top: -3px;
  transition: color 0.01s ease;
}
.storia-close:hover {
  color: #e74c3c;
}
/* ===============================
   VETRINE PRODOTTI
=============================== */
.vetrina {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 0 auto 0;
}

.vetrina .prodotto {
  line-height: 1.2;
  margin: 0;
}

.vetrina .valori-btn { margin-top: 6px; }

.prodotto .zoom-interno { transform: scale(1.4); }


/* ===============================
   CARD PRODOTTO
=============================== */
.prodotto {
  border: 1px solid #ccc;
  border-radius: 110px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
  padding: 35px 10px;
  position: relative;
  text-align: center;
  width: 200px;
}

.prodotto h2 {
  font-size: 22px;
  margin-top: 0;
}

.prodotto img {
  border-radius: 100px;
  display: block;
  filter: brightness(0.90) contrast(1.05);
  height: auto;
  position: relative;
  width: 100%;
  z-index: 1;
}

.prodotto .locandina::after {
  border-radius: 100px; /* stesso valore di .locandina */
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
/* Locandina */
.locandina {
  border-radius: 100px;
  height: var(--h, 330px);
  overflow: hidden;
  position: relative;
  width: var(--w, 220px);
}
.prodotto .locandina {
  width: 200px;   /* o quanto vuoi */
  height: 260px;  /* abbassa proporzioni */
}
.prodotto .locandina picture > img.zoom-interno {
  display: block;
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  position: absolute;
  transform: scale(var(--zoom, 1.25));
  transform-origin: center;
  width: 100%;
  z-index: 0;
  
}
#PAN_CLASSICO_1KG .locandina .zoom-interno{
  transform: translateY(-32px) scale(var(--zoom, 1.35));
}
#PAN_ARANCIA_850 .locandina .zoom-interno{
  transform: translateY(-30px) scale(var(--zoom, 1.35));
}
/* Input quantità */
.prodotto input[type="number"] {
  display: block;
  margin: 10px auto 0;
  text-align: center;
  width: 60px;
  border-radius: 10px;
}

.prodotto input.quantita {
  animation: none;        /* disattiva qualsiasi animazione */
  background-color: #fff; /* sfondo pieno: caret stabile */
  box-shadow: none;       /* elimina bagliore dal campo */
  caret-color: #000;      /* colore fisso per il cursore */
  position: relative;     /* stacca dall’effetto pulsante */
  transform: none;        /* disabilita trasformazioni ereditate */
  z-index: 2;             /* sopra eventuali bagliori */
}

/* Prodotti speciali con effetto glow */
.prodotto.speciale-panettone {
  animation: glow-rosso 0.8s infinite alternate;
  border: none;
  box-shadow: 0 0 25px #e74c3c;
}

.prodotto.speciale-cocco {
  animation: glow-verde 1s infinite alternate;
  border: none;
  box-shadow: 0 0 25px #4CAF50;
}
.Nota-14 {

  text-align: center;
  margin: 2px 50px;

}
/* ===============================
   INGREDIENTI & VALORI NUTRIZIONALI
=============================== */
.ingredienti {
  color: #2c3e50;
  cursor: pointer;
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-size: 1.3em;
  font-weight: bold;
  position: relative;
}

/* ===============================
   POPUP INGREDIENTI
=============================== */
.popup-ingredienti {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

.popup-ingredienti .popup-content {
  animation: popupFade 0.25s ease;
  background: #fffaf0;          /* stesso sfondo delle cartoline */
  border: 2px solid #c49b63;    /* giallo dorato già usato */
  border-radius: 60px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.25);
  color: #2c3e50;
  font-family: 'Baloo 2', cursive;
  max-width: 400px;
  padding: 25px;
  position: relative;
  text-align: center;
}

.popup-ingredienti .popup-content strong {
  color: #a23e48; /* amaranto */
}

.popup-ingredienti .chiudi {
  background: none;
  border: none;
  border-radius: 30px;
  color: #a23e48;
  cursor: pointer;
  font-size: 1.5rem;
  height: 60px;      /* dimensione pulsante */
  position: absolute;
  right: 19px;
  top: 13px;
  transition: transform 0.01s ease;
  width: 60px;
}

.popup-ingredienti .chiudi:hover {
  transform: scale(1.3);
}

.popup-ingredienti .testo {
  font-size: 1.09rem;
  line-height: 1.55;
  white-space: normal; /* interpreta <br> */
}
.quadrifoglio {
  font-size: 120px;
  left: -60px;
  pointer-events: none;
  position: absolute;
  text-shadow: 3px 3px 6px rgba(0,0,0,0.3);
  top: -25px;
  z-index: 15;
}
/* Bottone valori nutrizionali */
.valori-btn {
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  border: none;
  border-radius: 60px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: 'Baloo 2', cursive;
  font-size: 1.16em;
  font-weight: 700;
  margin: 6px 3px 3px;
  padding: 3px 3px;
  transition: transform 0.4s ease, box-shadow 0.3s ease;
}

/* Tabella valori nutrizionali */
.tabella-valori {
  border-collapse: collapse;
  font-size: 1em;
  margin-top: 2px;
  width: 100%;
}

.tabella-valori th,
.tabella-valori td {
  border: 1px solid #e6e6e6;
  padding: 8px 6px;
  text-align: left;
}

.tabella-valori th {
  background: #fff4e6;
  font-weight: 700;
}

.tabella-valori td.num {
  font-family: monospace;
  text-align: right;
}
#Nota-8 {
  color: black;
  font-family: 'Baloo 2', cursive;
  font-size: 24px;
  text-align: center;
  margin: 10px 250px;
}
#Nota-81 {
  color: black;
  font-family: 'Baloo 2', cursive;
  font-size: 24px;
  text-align: center;
  margin: 10px 250px;
}
#Nota-82 {
  color: black;
  font-family: 'Baloo 2', cursive;
  font-size: 24px;
  text-align: center;
  margin: 10px 250px;
}
#Nota-83 {
  color: black;
  font-family: 'Baloo 2', cursive;
  font-size: 24px;
  text-align: center;
  margin: 10px 250px;
}
#Nota-84 {
  color: black;
  font-family: 'Baloo 2', cursive;
  font-size: 24px;
  text-align: center;
  margin: 0 250px;
}
.prodotti-freschi-avviso {
  background-color: rgba(255, 250, 240, 0.7);
  border: 2px solid #f5cda7;
  border-radius: 100px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  color: #4b3e2b;
  font-family: 'Georgia', serif;
  line-height: 1;
  margin: 20px auto 20px;
  max-width: 600px;
  padding: 0 5px;
  text-align: center;
  width: 80%;
}
#Nota-8A {
  font-size: 22px;
  font-family: 'Baloo 2', cursive;
  color: black;
  text-align: center; 
  padding: 0 30px;
  line-height: 1.25;   
}
/* Tilde */
.tilde-piccola,
.tilde-piccola2 {
  color: #FFCC4D;
  font-size: 80px;
  font-weight: 300;
  line-height: 1;
  text-align: center;
  margin: 0 auto;
}
#Nota-12 {
  color: black;
  font-family: 'Baloo 2', cursive;
  font-size: 18px;
  line-height: 1.2;
  text-align: center;
  margin: 0 auto;
}
/* Titoli e note */
#Nota-10 {
  color: #122E66;
  font-family: 'Nunito', sans-serif;
  font-size: 42px;
  text-align: center;
  margin: 50px auto 0;
}
/* Bottone "ingredienti4" */
.ingredienti4 {
  background: linear-gradient(135deg, #FFD93D, #FFB347);
  border-radius: 80px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  color: #fff;
  cursor: pointer;
  display: block;
  font-family: 'Baloo 2', cursive;
  font-size: 26px;
  font-weight: bold;
  margin: 10px auto;
  max-width: 300px;
  padding: 5px 0;
  text-align: center;
  transition: transform 0.01s ease, box-shadow 0.2s ease;
}

.ingredienti4:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transform: scale(1.05);
}
/* Box totale apertura */
.totale-apertura {
  background: #fff8f0;
  border-radius: 120px;
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  color: #b58346;
  display: block;
  font-family: 'Baloo 2', cursive;
  font-size: 13px;
  margin: 30px auto 0;
  max-width: 600px;
  padding: 15px 50px 0;
  text-align: center;
}
/* Nota-4 (box con icona pacco) */
.Nota-4 {
  margin: 0 auto;
  overflow: hidden;
  padding: 10px 0 0;
  position: relative;
}
.Nota-4::before {
  animation: scrollPacco 3s linear infinite;
  content: "📦";
  font-size: 230px;
  left: 50%;
  opacity: 0.2;
  pointer-events: none;
  position: absolute;
  top: 50%;
  z-index: 0;
}
#Nota-4 {
  color: #222;
  font-family: 'Baloo 2', cursive;
  font-size: 45px;
  margin-bottom: 0;
  text-align: center;
}

/* Regole generali testo */
#spedizioni {
  font-family: 'Baloo 2', cursive;
  font-size: 29px;
  line-height: 1.4;
  list-style: none;
  margin-top: 3px;
  padding-left: 0;
  text-align: center;
}

#spedizioni li {
  margin-bottom: 10px;
}
.prodotti-freschi-avviso .emoji {
  font-size: 1.2rem;
}
/* Titolo spedizione */
.titolo-spedizione {
  color: #0D47A1;
  font-family: 'Nunito', sans-serif;
  font-size: 35px;
  margin: 25px 0 20px;
}
/* Sezione spedizione */
.spedizione {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin: 0 0;
  text-align: center;
}

.opzioni-spedizione-wrapper {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.opzione-spedizione {
  border: 2px solid #ccc;
  border-radius: 30px;
  cursor: pointer;
  display: inline-block;
  padding: 10px 10px;
  text-align: center;
  transition: all 0.3s ease;
  width: 150px;
}

.opzione-spedizione input {
  display: none;
}

.opzione-spedizione input:checked + p {
  background-color: #ffece0;
  border-color: #e25822;
}

.opzione-spedizione p {
  font-size: 15px;
  margin: 0;
}
/* Carrello & note pagamento */
.carrello,
.dediche {
  margin: 60px auto 0;
  text-align: center;
}
/* Carrello */
#lista-carrello {
  list-style: none;
  margin: 0 auto;
  max-width: 600px;
  padding: 0;
  text-align: center;
}

#lista-carrello li {
  align-items: center;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  display: flex;
  font-size: 20px;
  justify-content: center;
  margin: 8px 0;
  padding: 5px 15px;
}

#totale {
  font-size: 30px;
  font-weight: bold;
  margin: 20px auto;
  max-width: 400px;
  text-align: center;
}
.carrello button {
  cursor: pointer;
  display: inline-block;
  font-size: 24px;
  width: 190px;
  margin: 20px 0 0; 
  padding:10px 6px; 
  border-radius:60px;
  
}
/* Button generici */
button,
input[type="button"],
input[type="submit"] {
  background: linear-gradient(135deg, #FFB86B 0%, #FF9966 30%, #FF7A59 60%, #FF6A48 100%);
  border: none;
  border-radius: 60px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 26px;
  font-weight: bold;
  padding: 12px 10px;
  text-decoration: none;
  transition: 0.5s;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transform: translateY(-6px);
}

button:hover {
  background: linear-gradient(135deg, #FF7A59 0%, #FF9966 40%, #FFB86B 100%);
}

#finale-carrello {
  color: #800020;
  font-family: 'Baloo 2', cursive;
  font-size: 22px;
  margin: 30px 0 0;
  text-align: center;
}
.box-bottoni {
  display: flex;
  flex-wrap: wrap;     /* permette di andare a capo */
  justify-content: center;
  gap: 18px;
  max-width: 400px;    /* opzionale: limita la larghezza */
  margin: 0 auto;      /* centra il blocco */
}

.bottone-footer {
  flex: 1 1 calc(50% - 18px); /* due bottoni per riga */
  min-width: 150px;           /* evita che si rimpicciolino troppo */
}

/* il terzo bottone (reset) sarà nella riga sotto */
.reset-carrello {
  flex: 1 1 100%; /* occupa tutta la riga */
}

.bottone-footer {
  background: linear-gradient(135deg, #FFE600, #00E5C0);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;

}

.bottone-footer:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FFD700;
}
.bottone-footerA {
  background: linear-gradient(135deg, #FFB6C1, #FF9EC7, #FFD6A5);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  max-width: 100px !important;

}

.bottone-footerA:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FF9EC7;
}
.bottone-footerB {
  background: #FFD700;
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  width: 250px !important;
  padding: 5px 0 !important;
  margin: 0 0 15px !important;

}

.bottone-footerB:hover {
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.2);
  background: #FFD700;
  background: linear-gradient(135deg, #FFB300, #FFD700, #00C9A7);  
}
.bottone-footerC {
  background: linear-gradient(135deg, #FFB86B 0%, #FF9966 30%, #FF7A59 60%, #FF6A48 100%);
  border: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
  color: #fff;
  cursor: pointer;
  font-family: 'Baloo 2', cursive;
  transition: transform 0.01s ease, box-shadow 0.05s ease;
  width: 250px !important;
  padding: 5px 0 !important;

}

.bottone-footerC:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  transform: scale(1.2);
  background: linear-gradient(135deg, #FF7A59 0%, #FF9966 40%, #FFB86B 100%);
}

/* Popup pagamento */
#popup-pagamento {
  background: #fff8f0;
  border: 2px solid #c49b63;
  border-radius: 60px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  display: none;
  font-family: 'Baloo 2', cursive;
  left: 50%;
  max-width: 500px;
  overflow: hidden;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  z-index: 9999;
  padding: 20px 10px;
}

#popup-pagamento .popup-content {
  border-radius: inherit;
  max-height: 60vh;
  overflow-y: auto;
  padding: 40px 30px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,179,71,0.7) #fff8f0;
}

#popup-pagamento h3 {
  background: linear-gradient(135deg, #3a6ea5, #5aa3c8);
  border-radius: 70px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
  color: #fff;
  font-family: 'Baloo 2', cursive;
  font-size: 1.6em;
  font-weight: 700;
  margin: 0 0 10px;
  padding: 6px 10px;
  text-align: center;
}

#popup-pagamento button {
  margin: 5px 0;
  width: 100%;
}

/* Scrollbar elegante (WebKit) */
#popup-pagamento .popup-content::-webkit-scrollbar {
  width: 10px;
}

#popup-pagamento .popup-content::-webkit-scrollbar-thumb {
  background-color: rgba(255,179,71,0.7);
  border: 1px solid #fff8f0;
  border-radius: 50px;
}

#popup-pagamento .popup-content::-webkit-scrollbar-track {
  background-color: #fff8f0;
  border-radius: 50px;
}
/* Bottone compila modulo spedizione */
#compilaModuloBtn {
  background: #FFC533;
  width: 200px !important;
  border-radius: 60px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 18px;
  margin: 10px auto !important;
  padding: 10px 3px;
  text-align: center;

}
/* Hover bottone compila modulo */
#compilaModuloBtn:hover {
  background: #FFCC4D;
  
}

/* IBAN */
#iban {
  color: #2c3e50;
  display: none;
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 10px 40px;
  text-align: center;
}
/* Nota pagamento */
.nota-pagamento {
  color: #2c3e50;
  font-family: 'Baloo 2', cursive;
  font-size: 1em;
  margin: 1px 0 10px;
  text-align: center;
}

#nutr-title {
  text-align: center;
  white-space: pre-line;
}
/* Popup nutrizione */
#popup-nutrizione {
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: none;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  left: 50%;
  max-width: 520px;
  padding: 18px;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  z-index: 10001;
}
#popup-nutrizione h3 {
  font-family: 'Baloo 2', cursive;
  margin: 0 0 8px;
}

#popup-nutrizione .chiudi {
  background: transparent;
  border: none;
  color: #666;
  cursor: pointer;
  float: right;
  font-size: 26px;
  display: inline-block;
}

/* Footer elegante */
.footer-elegante {
  background-color: #fff8f0;
  color: #333;
  font-family: 'Baloo 2', cursive;
  padding: 20px;
  text-align: center;
}

.footer-rights {
  font-size: 1.6em;
  font-weight: bold;
}

.footer-links {
  margin: 10px 0 0;
}

.footer-btn {
  background: linear-gradient(to right, #00cfff, #0044ff);
  border-radius: 25px;
  color: white;
  display: inline-block;
  font-size: 1.4em;
  font-weight: 600;
  margin: 0 10px;
  padding: 6px 10px;
  text-decoration: none;
  transition: transform 0.01s ease;
}

.footer-btn:hover {
  transform: scale(1.2);
}

.footer-text {
  font-size: 1.4em;
  margin-top: 15px;
}
#email-link {
  background: linear-gradient(to right, #00cfff, #0044ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.4em;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
}
/* Overlay scuro sotto popup */
#overlay {
  background: transparent;
  bottom: 0;
  display: none;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9998;
}

/* Animazioni popup */
@keyframes popupFade {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* Animazioni globali */
@keyframes spotlightPulse {
  0%   { opacity: 0.5; transform: translateY(-50%) scale(1); }
  50%  { opacity: 0.8; transform: translateY(-50%) scale(1.1); }
  100% { opacity: 0.5; transform: translateY(-50%) scale(1); }
}

@keyframes scrollPacco {
  0%   { transform: translate(-50%, -55%) rotate(0deg); }
  50%  { transform: translate(-50%, -45%) rotate(5deg); }
  100% { transform: translate(-50%, -55%) rotate(0deg); }
}

@keyframes glow-verde {
  0%   { box-shadow: 0 0 10px #4CAF50; }
  50%  { box-shadow: 0 0 30px #4CAF50; }
  100% { box-shadow: 0 0 25px #4CAF50; }
}

@keyframes glow-rosso {
  0%   { box-shadow: 0 0 5px #FFC785; }
  50%  { box-shadow: 0 0 30px #F29A85; }
  100% { box-shadow: 0 0 25px #F29A85; }
}

@keyframes bordoOndeggiante {
  0%   { box-shadow: 0 0 25px rgba(231, 76, 60, 0.6), 0 0 15px rgba(192, 57, 43, 0.4) inset; }
  50%  { box-shadow: 0 0 50px rgba(231, 76, 60, 1), 0 0 25px rgba(192, 57, 43, 0.6) inset; }
  100% { box-shadow: 0 0 35px rgba(231, 76, 60, 0.8), 0 0 20px rgba(192, 57, 43, 0.5) inset; }
}

/* Social mobile */
.mobile-social {
  display: none;
}

footer {
  color: #555;
  font-size: 13px;
  margin: 10px 0;
  text-align: center;
}
  /* Stili minimi e accessibili */
  #cc-banner, #cc-modal { 
  position: fixed; 
  inset: 0; 
  display: grid; 
  place-items: end center; 
  z-index: 99999; 
  
}
  #cc-banner[hidden], #cc-modal[hidden] { display: none; }
  .cc-box{
    width: 600px;
	margin: 0 0; 
	padding: 25px;
    background: linear-gradient(180deg, #fff8f0 0%, #fdf1e1 40%, #f6e4cf 100%);
	border:1px solid #e6e6e6; 
	border-radius:80px;
    box-shadow:0 10px 30px rgba(0,0,0,.15); 
    font-family: 'Baloo 2', cursive;
	color:#2c3e50;
  }
  .cc-text{ 
  margin:0 10px 10px; 
  font-size:16px; 
  line-height:1.4; 
  }
  .cc-link{ 
  color:#0a7cff; 
  text-decoration:underline; 
  }
  .cc-actions{ 
  display:flex; 
  gap:8px; 
  flex-wrap:wrap; 
  justify-content:center; 
  }
  .cc-btn{ 
  border:0; 
  border-radius:999px; 
  padding:10px 6px; 
  cursor:pointer; 
  font-weight:600; 
  font-size: 26px;
  transition: transform 0.01s ease;
  }
  .cc-primary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff; 
  }
  .cc-secondary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff;  
  }
  .cc-tertiary{ 
  background: linear-gradient(135deg,
    #0E7C86 0%,   /* teal profondo */
    #11B5A4 45%,  /* giada brillante */
    #10B981 100%  /* smeraldo */
  );
  color:#fff;  
  }
  /* Modale preferenze */
  #cc-modal{ 
  place-items:center; 
  background: linear-gradient(135deg,
    rgba(245,245,245,.70), rgba(220,220,220,.50)
  );
  }
  .cc-modal-card{
    width: 400px; 
    background: linear-gradient(180deg, #fff8f0 0%, #fdf1e1 40%, #f6e4cf 100%);
	border-radius: 120px; 
	padding:20px; 
	box-shadow:0 10px 30px rgba(0,0,0,.2);
    font-family: 'Baloo 2', cursive;
	font-size: 16px;

  }
  .cc-row{ 
  margin:10px 0; 
  }
  .cc-row small{ 
  display:block; color: black; 
  }
  .cc-switch{ 
  display:flex; 
  align-items:center; 
  gap:5px; 
  font-weight:600; 
  }

	.cc-btn:hover {
  transform: scale(1.1);
  background: #00C98B;
}

#popup-spedizione {
    position: fixed; margin: 50px auto; inset: 0; z-index: 10040; display:none;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
  }
#popup-spedizione .sped-card {
    font-family: "Baloo 2", cursive;
    max-width: 600px;
    margin: 4vh auto; padding: 20px 18px 16px;
    border-radius: 50px;
    background: #FFF7EA;
    color: #3b2b18;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    position: relative;
    max-height: 335px; overflow: auto;
  }
#popup-spedizione h3 {
    margin: 0 0 14px; font-size: 26px; text-align: center;
  }
  #popup-telefono {
    position: fixed; margin: 50px auto; inset: 0; z-index: 10040; display:none;
    background: rgba(0,0,0,.35); backdrop-filter: blur(2px);
  }
#popup-telefono .sped-card {
    font-family: "Baloo 2", cursive;
    max-width: 600px;
    margin: 4vh auto; padding: 20px 18px 16px;
    border-radius: 50px;
    background: #FFF7EA;
    color: #3b2b18;
    box-shadow: 0 12px 40px rgba(0,0,0,.18);
    position: relative;
    max-height: 335px; overflow: auto;
  }
#popup-telefono h3 {
    margin: 0 0 14px; font-size: 26px; text-align: center;
  }
  .sped-close{
    position:absolute; top:20px; right:20px;
    border:0; background:transparent; font-size:22px; line-height:1; cursor:pointer;
    color:#5b4631;
  }
  .sped-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 12px 16px;
  }
  .sped-grid label{ display:flex; flex-direction:column; font-size:22px; gap:6px; }
  .sped-grid input, .sped-grid textarea{
    border: 1px solid #e7dccb; border-radius: 20px; padding: 10px 12px; font-size:19px;
    background:#fffdf8; outline:none; text-align: center; margin: 0 50px; color: #4A4A4A;
  }


  .sped-primary, .sped-secondary{
    border:0; border-radius: 999px; padding: 10px 16px; cursor:pointer; font-size:24px;
    font-family: "Baloo 2", cursive;
  }
  
/* Contenitore della vignetta = overlay full screen centrato */
.vignetta {
  position: fixed;
  inset: 0;                   /* top:0 right:0 bottom:0 left:0 */
  display: grid;
  place-items: center;        /* centra sia orizzontalmente che verticalmente */
  padding: 24px;              /* respiro ai bordi su schermi piccoli */
  z-index: 10040;             /* sopra l’overlay, sotto al toast (10050) */
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);/* usa il tuo #overlay esistente per il velo scuro */
}

/* quando è nascosta via [hidden] */
.vignetta[hidden] { display: none !important; }

/* La card: centrata e responsiva */
.vignetta-card{
  width: 650px;
  max-height: 500px;      
  overflow: auto;

  background:#fff8f0;
  border:1px solid #f2d8c7;
  border-radius:120px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding: 0 18px 30px;
  font-family:'Nunito', system-ui, Arial, sans-serif;
  line-height:1.35;
  margin: 0;                           /* evita margini che la discentrano */
  font-size: 16px;

}

.v-title{ margin:0 0 6px; font-weight:700; font-size: 22px;}

/* X di chiusura */
.vignetta-close{
background: rgba(214, 180, 140, 0.9);


 font-size:24px !important; margin-bottom: 15px !important;
  cursor:pointer;
  color: black;
  
}
/* Usa questa utility dove vuoi testo “smeraldo” gradiente */
.emerald-text{
  background-image: linear-gradient(90deg, #00c98b 0%, #00b37a 50%, #009a68 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.08); /* leggero sostegno sul beige */
}
.bottone-info{
  font-size: 25px !important;
}
.mini-nav{
  position: fixed;
  left: 14px; /* affianco al carrello che sta a right:14px */
  top: 50px;
  width: 36px; height: 36px;
  border-radius: 20px;
  background: #fff8f0;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  border: 1px solid #f0e6d8;
  cursor: pointer; z-index: 10050;
  display: inline-flex; align-items:center; justify-content:center;
}
.mini-nav-panel{
  position: fixed;
  left: 5px; /* allineato al pulsante ≡ */
  top: 50px;
  width: min(92vw, 280px);
}
.mini-cart{
  position: fixed;
  right: 14px; top: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 20px;
  background: #fff8f0; /* beige */
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  font-family: 'Baloo 2', system-ui, sans-serif;
  cursor: pointer; z-index: 10050;
  border: 1px solid #f0e6d8;
}
.mini-cart-panel{
  position: fixed; right: 5px; top: 50px; width: min(92vw, 300px); max-height: 300px;
  background: #fffdfa; color:#222; border: 1px solid #f0e6d8;
  border-radius: 60px; box-shadow: 0 16px 48px rgba(0,0,0,.18);
  font-family: 'Baloo 2', system-ui, sans-serif; overflow: hidden; z-index: 10040;
  display: none;
}
#popup-pagamento .receipt-card pre{
  white-space:pre-wrap; margin:0;   font-family:'Baloo 2', cursive;
  background:#fff; border:1px dashed #eadfce; padding:10px; border-radius:12px; font-size: 17px;
}
.v-list {
  margin: 0;
  padding: 5px 30px;
  list-style-type: none; /* opzionale: rimuove i pallini */
}

.v-list li {
  border-bottom: 1px solid #ccc; /* linea sotto ogni riga */
  padding: 6px 0;               /* un po’ di spazio verticale */
}

/* opzionale: rimuove la linea dopo l’ultimo elemento */
.v-list li:last-child {
  border-bottom: none;
}
.scadenza {
  font-size: 1rem;       /* grandezza caratteri */
  font-weight: bold;       /* grassetto */
  color: #2c3e50;          /* colore testo */
  text-align: center;      /* centra il testo */
  margin-bottom: 10px;     /* spazio sotto */
  line-height: 1.4;        /* altezza riga per leggibilità */
  font-family: 'Nunito', sans-serif;
}
.footer-mini{
  margin-top: 0px; 
  font-size:19px;
  opacity:.95;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
}
.popup-content .nota{

  font-size: 19px;      /* piccola */

}
.conferma {

  font-size: 20px;                   /* grandezza regolabile (es. 1rem–1.5rem) */

}
#site-notice .notice__panel{

  width: 350px;
  padding: 50px 30px 20px;
}
/* --- Content --- */
#site-notice h2{

  font-size: 30px;

}
#site-notice p{

  font-size: 20px;

}
#site-notice .notice__close{
  top: 5px; right: 150px;
  width: 50px; height: 44px;
  font-size: 44px;
  line-height: 0.4;

}
}



















  .sped-grid input:focus, .sped-grid textarea:focus{ border-color:#d9c4a7; box-shadow:0 0 0 3px rgba(217,196,167,.35); }
  .sped-grid .colspan{ grid-column: 1 / -1; }
  .sped-actions{
    display:flex; gap:10px; justify-content:center; margin-top:14px;
  }
  .sped-primary{ background:#D9C4A7; }
  .sped-secondary{ background:#D9C4A7; }
  .sped-grid{ grid-template-columns: 1fr; }   
  
  .sped-primary:hover {background: linear-gradient(135deg, #FFE600, #00E5C0);}
















/* =====================================
   VARIABILI SOLO PER LA PAGINA PRIVACY
===================================== */
body.privacy-page {
  --main-font: 'Nunito', sans-serif;
  --main-color: #2c3e50;
  --accent-color: #c49b63;
  --secondary-color: #FF7A59;
  --background-color: #fff8f0;
}

/* =====================================
   STILI BASE DELLA PAGINA PRIVACY
===================================== */
body.privacy-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 100dvh; /* ✅ “dvh” risolve bug 100vh su mobile */
  padding: 5vw 4vw;
  text-align: center;
  background: var(--background-color);
  color: var(--main-color);
  font-family: var(--main-font);
  font-size: clamp(12px, 2vw, 15px);
  overflow-x: hidden;
  overflow-y: auto; /* ✅ consente scorrimento se serve */
  box-sizing: border-box;
  margin-right: 0;
  margin-left: 0;
}

/* Contenitore principale */
body.privacy-page .contenuto {
  width: 100%;
  max-width: 900px;
  background: #fff;
  padding: 3vw 5vw;
  border-radius: 60px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
  margin: auto; /* ✅ mantiene centrato in ogni orientamento */
}

/* =====================================
   TESTI E TITOLI
===================================== */
body.privacy-page h1 {
  color: var(--secondary-color);
  margin-bottom: 2vh;
  font-size: clamp(1.5em, 3vw, 2.2em);
  line-height: 1.2;
}

body.privacy-page h2 {
  color: #ee8e8e;
  margin-top: 4vh;
  margin-bottom: 1.5vh;
  font-size: clamp(1.2em, 2.2vw, 1.6em);
}

body.privacy-page p,
body.privacy-page ul {
  font-size: clamp(0.95em, 1.5vw, 1.1em);
  line-height: 1.6;
  margin: 0 0 1.5em 0;
}

body.privacy-page ul {
  list-style: disc;
  padding-left: 1.5em;
  text-align: left;
  margin: 0 auto 1.5em auto;
  max-width: 90%;
}

/* =====================================
   BOTTONE HOME
===================================== */
body.privacy-page a.button-home {
  display: inline-block;
  margin-top: 1em;
  padding: 0.8em 1em;
  background: linear-gradient(135deg, #FFB86B, #FF7A59);
  color: white;
  font-weight: bold;
  border-radius: 60px;
  text-decoration: none;
  font-size: clamp(18px, 2vw, 20px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

body.privacy-page a.button-home:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
a.link-privacy {
  color: #00aaff; /* blu cielo brillante */
  text-decoration: underline; /* sempre sottolineato */
  font-weight: 900; /* leggermente più marcato ma non troppo */
  transition: color 0.3s ease;
  font-size: clamp(14px, 2vw, 20px);  
}

a.link-privacy:hover {
  color: #0095e0; /* tono un po' più intenso quando ci passi sopra */
}

  #orientation-banner{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 30px;
    width: 300px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    color: var(--ob-fg);
    border-radius: 60px;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    z-index: 2147483647; /* sopra tutto */
    opacity: 0;
    pointer-events: none;
    translate: 0 8px;
    transition: opacity .28s ease, translate .28s ease;
	font-size: 18px;
    font-family: 'Baloo 2', cursive;  
  }
  #orientation-banner.is-visible{
    opacity: 1;
    pointer-events: auto;
    translate: 0 0;
  }
  #orientation-banner .ob-ico{
    display: grid;
    place-items: center;
    opacity: .9;
  }
  #orientation-banner .ob-text{
    flex: 1 1 auto;
  }
  #orientation-banner .ob-btn{
    border: 0;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ob-accent);
    color: #04120c;
    font-weight: 700;
    cursor: pointer;
  }
  #orientation-banner .ob-btn:focus-visible,
  #orientation-banner .ob-close:focus-visible{
    outline: 2px solid #fff;
    outline-offset: 2px;
  }
  #orientation-banner .ob-close{
    background: transparent;
    border: 0;
    color: black;
    opacity: .75;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
  }	

/* Evita l’auto-zoom dei testi su iOS */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Facoltativo: rinforzo mirato sui blocchi che crescevano */
#narrazione,
[id^="Nota-8"],
#Nota-12,
#Nota-7, #Nota-7A, #Nota-7B, #Nota-7C {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* quando blocco lo scroll della pagina dietro le modali */
html.no-scroll, body.no-scroll{
  overflow: hidden !important;
  position: fixed; inset: 0; /* evita "salti" su iOS */
}

/* ====== POPUP VALORI NUTRIZIONALI: misure resilienti e scroll fluido ====== */
#popup-nutrizione{
  width: min(92vw, 340px);
  max-height: min(80dvh, 560px);
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

#popup-nutrizione #nutr-content{
  /* altezza del contenuto davvero scrollabile su iOS */
  max-height: calc(min(80dvh, 560px) - 90px); /* 90 ≈ header + padding */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* fallback quando dvh non è supportato */
@supports not (height: 100dvh){
  .storia-modal.is-open .storia-modal-content{ max-height: 72vh; }
  #popup-nutrizione{ max-height: 80vh; }
  #popup-nutrizione #nutr-content{ max-height: calc(80vh - 90px); }
}
/* --- overlay per popup ingredienti (tap fuori chiude) --- */
.popup-ingredienti-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35); /* leggero sfondo */
  z-index: 9999;               /* sotto al popup (10000) */
  overscroll-behavior: contain;
}

/* blocca lo scroll della pagina quando il popup è aperto */
body.no-scroll{
  overflow: hidden;
  touch-action: none;
  
}
    a[href^="tel"], .footer-phone {
      color: #2563EB;
    }


	
/* Mini cart floating */

.mini-cart .mc-emoji{ font-size: 20px; line-height: 1; margin-top: 19px; }
.mini-cart .mc-badge{
  position: absolute; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: #2e7d32; color: #fff;
  font-size: 12px; display: inline-flex; align-items:center; justify-content:center;
  right: -6px; top: -6px; box-shadow: 0 4px 10px rgba(0,0,0,.18);
}


.mini-cart-panel.is-open{ display: block; }
.mcp-head{
  padding: 10px 16px; background: #fff3e0; border-bottom: 1px solid #f0e6d8;
  font-size: 22px; display: flex; gap: 8px; align-items: center; justify-content: center;
}
.mcp-list{ list-style: none; margin: 0; padding: 10px 14px; max-height: 9vh; overflow: auto; }
.mcp-list li{ padding: 0 0; border-bottom: 1px dashed #efdfcf; font-size: 14px; }
.mcp-list li:last-child{ border-bottom: 0; }
.mcp-total{ display: flex; justify-content: space-between; padding: 5px 14px; font-size: 18px; }
.mcp-actions{ display: flex; gap: 8px; padding: 10px 14px 14px; }
.mcp-actions button{
  flex: 1 1 auto; padding: 10px 10px; border-radius: 999px; border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; margin: 0 0;
}
.mcp-pay{ background: #2e7d32; color: #fff; }
.mcp-close{ background: #f3e9dc; color: #222; }

/* ---- Halo smeraldo, molto sfumato + 2 spot laterali interni ---- */
.carrello.highlight{
  position: relative;
  border-radius: 16px;
  outline: none;
  isolation: isolate;
  overflow: hidden;
  --emerald: 0 229 192; /* #00E5C0 */
}

/* alone esterno morbido (sfumato) */
.carrello.highlight::before{
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--emerald)/.40), transparent 70%);
  filter: blur(16px);
  opacity: .85;
  animation: haloFade 1.2s ease-out 1 both;
}

/* due sfumature tonde interne ai lati (dal bordo verso il centro) */
.carrello.highlight::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at left center,
      rgb(var(--emerald)/.60) 0%,
      rgb(var(--emerald)/.38) 12%,
      rgb(var(--emerald)/.18) 30%,
      transparent 60%),
    radial-gradient(circle at right center,
      rgb(var(--emerald)/.60) 0%,
      rgb(var(--emerald)/.38) 12%,
      rgb(var(--emerald)/.18) 30%,
      transparent 60%);
  filter: blur(10px);
  opacity: .95;
  animation: spotsFade 1.2s ease-out 1 both;
}

/* Animazioni morbide di apparizione → dissolvenza */
@keyframes haloFade{
  0%   { opacity: .95; transform: scale(.985); }
  70%  { opacity: .55; }
  100% { opacity: 0;   transform: scale(1.01); }
}
@keyframes spotsFade{
  0%   { opacity: .95; }
  70%  { opacity: .55; }
  100% { opacity: 0; }
}

/* Accessibilità: niente animazioni se l’utente le riduce */
@media (prefers-reduced-motion: reduce){
  .carrello.highlight::before,
  .carrello.highlight::after{
    animation: none;
    opacity: .85;
  }
}		
	
	
/* ——— PIN di top bar + barra social mobile SOLO durante lo scroll via JS ——— */
html.is-scrolling-via-js { --ms-h: 0px; } /* altezza barra social mobile, messa da JS */

html.is-scrolling-via-js .mobile-social{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 10062;
}
html.is-scrolling-via-js .top-bar{
  position: fixed; top: var(--ms-h, 0px); left: 0; right: 0;
  z-index: 10061;
}

/* Spaziatori per evitare salti quando fissiamo le barre */
.mobile-social-spacer, .topbar-spacer { height: 0 !important; }

/* ——— Glow morbido SOLO sull’area con i pulsanti (Pagamento/Cartolina/Reset) ——— */
.carrello .box-bottoni.highlight{
  position: relative;
  border-radius: 22px;
  isolation: isolate;
  overflow: hidden; /* arrotonda l’alone ai bordi della box */
  --emerald: 0 229 192; /* #00E5C0 */
}

/* alone esterno */
.carrello .box-bottoni.highlight::before{
  content: "";
  position: absolute; inset: -12px;
  border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgb(var(--emerald)/.40), transparent 70%);
  filter: blur(14px); opacity: .9;
  animation: haloFade 1.1s ease-out 1 both;
}

/* due macchie laterali interne */
.carrello .box-bottoni.highlight::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at left 50%,  rgb(var(--emerald)/.55) 0%, rgb(var(--emerald)/.30) 20%, transparent 55%),
    radial-gradient(circle at right 50%, rgb(var(--emerald)/.55) 0%, rgb(var(--emerald)/.30) 20%, transparent 55%);
  filter: blur(9px); opacity: .95;
  animation: spotsFade 1.1s ease-out 1 both;
}

@keyframes haloFade{ 0%{opacity:.95;transform:scale(.985)}70%{opacity:.55}100%{opacity:0;transform:scale(1.01)} }
@keyframes spotsFade{ 0%{opacity:.95}70%{opacity:.55}100%{opacity:0} }

@media (prefers-reduced-motion: reduce){
  .carrello .box-bottoni.highlight::before,
  .carrello .box-bottoni.highlight::after{
    animation: none; opacity: .85;
  }
}

/* ===== Ricevuta ordine (usata sia da PayPal sia da IBAN) ===== */
#popup-pagamento .receipt-card{
  margin-top:12px; padding:14px; border-radius:20px;
  background:#fff8f0; border:1px solid #f0e6d8; color:#2b2b2b;
  font-family:'Baloo 2', cursive;
}
#popup-pagamento .receipt-card .rc-title{ font-size:18px; margin-bottom:8px; }

#popup-pagamento .receipt-card .receipt-actions{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
#popup-pagamento .receipt-card .btn{
  padding:10px 12px; border-radius:999px; border:1px solid #eadfce; background:#2e7d32;
  cursor:pointer; font-family:'Baloo 2', cursive; font-size:15px;
}
#popup-pagamento .receipt-card .btn-primary{ background:#2e7d32; color:#fff; border-color:#2e7d32; }

 .mcp-actions:hover {background: linear-gradient(180deg, #FFF7EA 0%, #F5E6D3 50%, #EADCC8 100%);}
 .mcp-pay:hover {background: linear-gradient(135deg, #FFE600, #00E5C0);}
  
/* mantiene lo scroll ma nasconde la scrollbar */
#popup-spedizione .sped-card {
  overflow: auto;                 /* o overflow-y: auto; */
  -ms-overflow-style: none;       /* IE/Edge legacy */
  scrollbar-width: none;          /* Firefox */
  overscroll-behavior: contain;   /* evita il “rimbalzo” che mostra lo sfondo */
  -webkit-overflow-scrolling: touch; /* scorrimento fluido su iOS */
}
#popup-telefono .sped-card {
  overflow: auto;                 /* o overflow-y: auto; */
  -ms-overflow-style: none;       /* IE/Edge legacy */
  scrollbar-width: none;          /* Firefox */
  overscroll-behavior: contain;   /* evita il “rimbalzo” che mostra lo sfondo */
  -webkit-overflow-scrolling: touch; /* scorrimento fluido su iOS */
}
#popup-spedizione .sped-card::-webkit-scrollbar{
  width: 0;
  height: 0;
}
#popup-telefono .sped-card::-webkit-scrollbar{
  width: 0;
  height: 0;
}



/* === Pulsante "≡" affianco al carrello === */

.mini-nav:focus-visible{ outline: 3px solid #00E5C0; outline-offset: 2px; }

.mn-lines{ display:inline-flex; flex-direction:column; gap:4px; }
.mn-lines span{
  display:block; width:18px; height:2px; background:#444; border-radius:2px;
}

/* === Pannellino nav: riuso stile mini-cart-panel con piccole differenze === */

.qn-list{ padding: 6px 14px; }
.qn-list li{ border-bottom: 1px dashed #efdfcf; padding: 2px 0; }
.qn-list li:last-child{ border-bottom: 0; }
.qn-list button{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 4px;
  font-family: 'Baloo 2', system-ui, sans-serif;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
  color: #222;
}
.qn-list button:hover,
.qn-list button:focus-visible{
  background: #fff3e0;
  border-radius: 10px;
  outline: none;
}

/* Ovale sfumato dietro al titolo raggiunto */
.qn-flash{
  position: relative;
  isolation: isolate;              /* crea uno stacking context: lo pseudo-element resta dietro al testo */
}

.qn-flash::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(.98);
  /* L’ovale si adatta alla dimensione del titolo, con un po’ di padding regolabile */
  width:  calc(100% + var(--qn-pad-x, 32px));
  height: calc(100% + var(--qn-pad-y, 20px));
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;                     /* dietro al testo del titolo */

  /* bagliore ovale morbido */
  background: radial-gradient(ellipse at center,
    rgba(0,229,192,.35) 0%,
    rgba(0,229,192,.18) 45%,
    rgba(0,229,192,.08) 65%,
    rgba(0,229,192,0)   78%);
  filter: blur(8px);
  opacity: 0;
  animation: qnOvalOnTitle 1.1s ease-out 1 forwards;
}

/* Dissolvenza morbida dell’ovale */
@keyframes qnOvalOnTitle{
  0%   { opacity:.95; transform: translate(-50%,-50%) scale(.98); }
  70%  { opacity:.55; }
  100% { opacity:0;   transform: translate(-50%,-50%) scale(1.03); }
}




  /* Card delicata solo per il modulo */
  #allegato-a .modulo-recesso{
    margin-top: .75rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rosa-cipria);
    border-radius: 10px;
    background: #fff; /* fallback */
  }
  /* leggero velo rosa se supportato, senza cambiare lo stile generale */
  @supports (color: color-mix(in srgb, red, white)){
    #allegato-a .modulo-recesso{
      background: color-mix(in srgb, var(--rosa-cipria) 8%, #fff);
    }
  }

  #allegato-a .modulo-note{
    margin: 0 0 .75rem 0;
    opacity: .9;
  }

  #allegato-a .lista-modulo{
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .5rem .75rem;
  }

  #allegato-a .etichetta{
    display: inline-block;
    min-width: 12ch;          /* allinea le voci */
    font-weight: 700;
  }
  #allegato-a .etichetta-inline{
    min-width: auto;
    margin-left: 1rem;
  }

  #allegato-a .valore{ display: inline-block; }

  /* “righe” da compilare, eleganti e stampabili */
  #allegato-a .linea{
    display: inline-block;
    vertical-align: baseline;
    border-bottom: 1px dashed rgba(0,0,0,.35);
    line-height: 1.8;
    transform: translateY(-.15em);
  }
  #allegato-a .linea.breve{ min-width: 10ch; }
  #allegato-a .linea.media{ min-width: 18ch; }
  #allegato-a .linea.lunga{ min-width: 32ch; }

  #allegato-a .nota-a-piede{
    margin-top: .75rem;
    font-size: .95em;
    opacity: .8;
  }

  /* Stampa: mantieni contorni e colori leggibili */
  @media print{
    #allegato-a .modulo-recesso{
      border-color: #000;
      background: #fff !important;
    }
    #allegato-a a{
      color: #000;
      text-decoration: underline;
    }
  }

/* Pulsante info coordinato */
.bottone-info{
  display:inline-block;
  margin-left:10px;
  padding:10px 16px;
  border-radius:30px;
  border:1px solid #f2d8c7;
background: linear-gradient(135deg,
  rgba(10, 68, 110, 0.9) 0%,    /* blu profondo oceano */
  rgba(26, 117, 159, 0.9) 45%,  /* blu medio */
  rgba(74, 165, 205, 0.9) 100%  /* azzurro chiaro mare */
);

  font-family:'Nunito', system-ui, Arial, sans-serif;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .15s ease;
  color: #ffff; 

}
.bottone-info:active{ transform:scale(.98); }
.bottone-info:focus{ outline:2px solid #f2d8c7; outline-offset:2px; }

.bottone-info:hover{  background: linear-gradient(135deg,
  rgba(5, 40, 70, 0.95) 0%,    /* blu notte oceano */
  rgba(15, 80, 115, 0.93) 45%, /* blu oceano medio */
  rgba(40, 120, 160, 0.9) 100% /* blu-azzurro profondo */
) !important;}

/* Banner-top “locandina” */
.locandina-pag{
  position: fixed;
  top: 12px; left: 50%;
  transform: translateX(-50%) translateY(-12px);
  opacity: 0; 
  z-index: 10070;              /* sopra overlay/popup */
  max-width: min(680px, 92vw);
  padding: 14px 18px;
  border-radius: 60px;
  background:#fff8f0;          /* “grazie” */
  border:1px solid #f2e3d5;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
  text-align:center;
  pointer-events: none;         /* finché è nascosta */
  transition: transform .25s ease, opacity .25s ease;
  font-family: inherit;
}
.locandina-pag.vuoto{
  background:#fff3f3; 
  border-color:#ffd4d4;
}
.locandina-pag .big{ font-weight:700; font-size:20px; margin:0 0 6px; }
.locandina-pag .sub{ margin:0; opacity:.9; }

/* Stato visibile (aggiunto via JS) */
.locandina-pag.is-on{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* nascondi la scrollbar del contenitore che scorre */
#vignetta-pag .vignetta-card{
  overflow-y: auto;            /* scroll sì */
  -ms-overflow-style: none;    /* IE/vecchi Edge */
  scrollbar-width: none;       /* Firefox */
}
#vignetta-pag .vignetta-card::-webkit-scrollbar{
  width: 0;                    /* Chrome/Safari/Edge */
  height: 0;
}

/* opzionale: nascondi anche l'eventuale barra dell’overlay */
#vignetta-pag{
  overflow-y: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#vignetta-pag::-webkit-scrollbar{ width: 0; height: 0; }

/* Layout riga mini-carrello */
#mini-cart-panel .mcp-li{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
}
#mini-cart-panel .mcp-li.is-supp .mcp-qty button{ opacity:.35; pointer-events:none; }

/* Nome e totale */
#mini-cart-panel .mcp-name{ font-weight:600; }
#mini-cart-panel .mcp-total{ opacity:.85; margin:0 0; }

/* Gruppo quantità: posizione/dimensione richieste */
#mini-cart-panel .mcp-qty{
  display:inline-flex; align-items:center; gap:.25rem; margin-left:.5rem; vertical-align:middle;
}

/* Bottoncini + / −: verdi, piccoli, arrotondati, simbolo bianco centrato */
#mini-cart-panel .mcp-qty button{
  width:1rem; height:1rem; border:0; border-radius:.45rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#00C98B; color:#fff; font-weight:800; line-height:1; font-size:.8rem;
  box-shadow:0 0 0 1px rgba(0,0,0,.06) inset;
}
#mini-cart-panel .mcp-qty button:active{ transform:scale(.95); }

/* (solo se un giorno userai un input numerico in mezzo) */
#mini-cart-panel .mcp-qty input{
  width:1rem; text-align:center; border:0; background:transparent; font-weight:700;
}

/* sicurezza: le <li> restano posizionabili */
#mini-cart-panel .mcp-list li{ position:relative; }

/* Link interni alle sezioni (ancore) */
.anc-interna{
  color:#00C98B;
  text-decoration:underline;
  text-underline-offset:2px;
  font-weight:700;
}
.anc-interna:focus{
  outline:2px solid #00C98B;
  outline-offset:2px;
  border-radius:4px;
}

/* stella separatrice */
.footer-mini .ft-sep{
  opacity:.45;
  display:inline-block;
  color:transparent;
  width:1.25em;          /* più grande */
  height:1.25em;         /* più grande */
  vertical-align:middle;
}

.footer-mini .ft-sep::before{
  content:"★";
  color:#1E90FF;         /* blu acceso */
  font-size:1.2em;       /* stella più grande */
  line-height:1.25em;
  display:block;
}

/* pill links */
.footer-mini .ft-link,
.footer-mini .ft-link:hover,
.footer-mini .ft-link:focus{
  text-decoration:none;             /* niente sottolineatura */
}

.footer-mini .ft-link{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding: 2px 3px;
  border-radius:999px;
  background:rgba(255,247,234,.85); /* tono caldo del sito (#FFF7EA) */
  border:1px solid #FFEA00;         /* CAMBIO: linea di contorno giallo acceso */
  color:#3b2b18;                    /* testo cacao */
  font-family:"Baloo 2", cursive;
  transition:background .2s, box-shadow .2s, transform .15s, border-color .2s;
}

.footer-mini .ft-link:hover{
  transform:translateY(-1px);
  /* CAMBIO: hover in giallo acceso con leggere sfumature */
  background:
    linear-gradient(135deg,
      rgba(255,245,157,.28) 0%,   /* giallo chiaro */
      rgba(255,235, 59,.24) 45%,  /* giallo brillante */
      rgba(255,214,  0,.22) 100%  /* giallo intenso */
    );
  border-color:#FFD400;            /* CAMBIO: contorno coerente in hover */
  box-shadow:0 8px 24px rgba(0,0,0,.08), 0 0 0 2px rgba(255,234,0,.12) inset; /* CAMBIO */
}

.footer-mini .ft-link:focus-visible{
  outline:2px solid #FFEA00;       /* CAMBIO: accento giallo acceso */
  outline-offset:2px;
}

/* Link nel testo della locandina: mantiene lo stile del testo */
.link-consiglio{
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}

/* Se hai un header fisso, evita che il target resti sotto l’header */
#consiglio-strudel { scroll-margin-top: 180px; } /* regola 80px se serve */

.mini-cart-panel .mcp-ship { margin: 0 0 5px; }
.mini-cart-panel .mcp-goto-box{
  display:inline-block;
  padding:5px 2px;
  font-size:12px;
  line-height:1;
  border:1px solid #ddd;
  border-radius:999px;
  text-decoration:none;
}
.mini-cart-panel .mcp-goto-box:hover{ background:#f6f6f6; }
.mini-cart-panel .mcp-goto-box:focus{
  outline:2px solid #00C98B; outline-offset:2px;
}

.open-istruzioni { font-weight: 700; text-decoration: none; }
.open-istruzioni mark {
  background: #fff2a8; /* giallo pastello */
  padding: 0 3px;
  border-radius: 20px;
}
.open-istruzioni:hover mark,
.open-istruzioni:focus-visible mark {
  outline: 1px solid #222;
  outline-offset: 2px;
}
.popup-content .nota{
  margin: 0 0 8px;
  line-height: 1.25;
  color: #666;              /* grigio tenue */
}
.conferma {
  display: inline-block;               /* per adattare il fondo al testo */
  color: #004d40;                      /* testo verde scuro per contrasto */
  font-weight: 700;                    /* peso regolabile (400–700) */
  padding: 0 0;              /* spazio interno */
  border-radius: 10px;               /* angoli arrotondati */
  line-height: 1.4;                    /* leggibilità */
  text-align: center;                  /* allinea bene se va su più righe */
  margin: 0 auto 5px;                 /* spazio esterno */
}

.conferma:hover {
  transform: scale(1.02);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
/* === Fallback globale per browser/WebView senza svw/svh === */
@supports not (width: 1svw){
  .popup-ingredienti .popup-content{
    width: min(90%, calc(100vw - 48px));
    max-height: 80vh;              /* stessa altezza ma con vh */
  }
}
/* Fallback globale per browser/WebView senza svw/svh */
@supports not (width: 1svw) {
  .vignetta-card{
    /* larghezza: target 500px ma si restringe se lo schermo è stretto */
    width: min(500px, calc(100vw - 48px));
    max-width: 92vw;

    /* altezza scorrevole: massimo 450px, altrimenti usa % del viewport */
    max-height: min(70vh, 450px);
  }
}
 /* --- Overlay + Panel --- */
#site-notice[hidden]{ display:none; }
#site-notice{
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  font-family: "Baloo 2", cursive;
  -webkit-tap-highlight-color: transparent; /* niente flash scuro su mobile */
}
#site-notice .notice__backdrop{
  position:absolute; inset:0;
  background: rgba(34,26,20,.28);
  backdrop-filter: blur(2px);
}
#site-notice .notice__panel{
  position: relative;
  box-sizing: border-box;
  background: #FBF5EC;            /* beige più chiaro/caldo */
  border: 2px solid #EFE6DB;       /* bordo più morbido */
  border-radius: 120px;
  box-shadow: 0 12px 30px rgba(40,32,24,.18);
  opacity: 0;
  outline: none;                    /* rimuove bordo focus */
  transition: transform 0.01s ease, opacity 0.01s ease;  
}

#site-notice .notice__panel:focus,
#site-notice .notice__panel:focus-visible{ outline: none; }

#site-notice.is-open .notice__panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* --- Content --- */
#site-notice h2{
  margin: 6px 0 6px;
  line-height: 1.15;
  color: #3E3128;                  /* testo principale */
  letter-spacing: .2px;
}
#site-notice p{
  margin: 0;
  line-height: 1.4;
  color: #6E5B4E;                  /* testo secondario */
}

/* --- Close button --- */
#site-notice .notice__close{
  position: absolute;
  display: grid; place-items: center;
  border: 1px solid #EFE6DB;
  background: #FFF6ED;             /* tono più beige */
  border-radius: 90px;
  color: #6E5B4E;
  cursor: pointer;
  outline: none;                    /* rimuove bordo focus */
  transition: transform 0.01s ease, background .15s ease, opacity 0.01s ease, box-shadow 0.01s ease;  

}

#site-notice .notice__close:hover{ transform: scale(1.04); }
#site-notice .notice__close:active{ transform: scale(.98); }
#site-notice .notice__close:focus,
#site-notice .notice__close:focus-visible{
  outline: none; 
  /* lieve alone beige (accessibile ma NON nero) */
  box-shadow: 0 0 0 3px rgba(205,186,167,.45);
}