/* ================= SCHEDA PRODOTTO =================
   Si apre dal menù: foto grande con miniature, testo, video. */

.scheda-prodotto{ padding-block:clamp(1.6rem,4vw,3rem) 2rem; }

.scheda-griglia{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(1.6rem,4vw,3.4rem); align-items:start;
}
@media (max-width:860px){ .scheda-griglia{ grid-template-columns:1fr; } }

.foto-grande{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  border-radius:var(--r-g); background:var(--crema-2);
  box-shadow:var(--ombra-alta);
  transition:opacity .26s ease;
}
.foto-grande.in-cambio{ opacity:0; }
.miniature{ display:flex; gap:.6rem; margin-top:.9rem; flex-wrap:wrap; }
.miniature button{
  padding:0; border:2px solid transparent; border-radius:14px; overflow:hidden;
  width:76px; height:76px; cursor:pointer; background:var(--crema-2);
  transition:border-color .16s, transform .16s;
}
.miniature button:hover{ transform:translateY(-2px); }
.miniature button[aria-current="true"]{ border-color:var(--amarena); }
.miniature img{ width:100%; height:100%; object-fit:cover; display:block; }

.scheda-dati h1{ font-size:clamp(2.2rem,5.4vw,3.4rem); line-height:1.05; margin:.3rem 0 .4rem; }
.scheda-nota{ color:var(--tenue); margin:0 0 .6rem; font-size:1.08rem; }
.scheda-prezzo{
  font-family:var(--titolo); font-size:1.7rem; font-weight:600;
  color:var(--amarena); margin:.2rem 0 1.2rem;
}
/* il testo arriva dal backoffice com'e' scritto: gli a capo si rispettano */
.scheda-descrizione{ white-space:pre-line; line-height:1.65; max-width:60ch; }
/* caratteristiche sotto il prezzo: fatto da noi, vegano... */
.caratteristiche{ list-style:none; margin:-.4rem 0 1.3rem; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.caratteristiche li{
  display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .75rem .28rem .32rem;
  border-radius:999px; font-size:.86rem; font-weight:500;
  background:color-mix(in srgb, var(--colore) 11%, var(--panna-2));
  color:color-mix(in srgb, var(--colore) 78%, var(--cioccolato));
}
.caratteristiche svg{
  width:26px; height:26px; padding:4px; border-radius:50%; background:var(--colore); color:#fff; flex:none;
}

/* ---- Scheda anagrafica: ingredienti e allergeni ---- */
.anagrafica{
  margin-top:clamp(2.2rem,5vw,3.4rem); padding:clamp(1.4rem,3.4vw,2.4rem);
  background:var(--panna-2); border:1px solid var(--bordo); border-radius:var(--r-g);
  box-shadow:var(--ombra);
}
.anagrafica-testa{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 1rem;
  padding-bottom:1.1rem; margin-bottom:1.4rem; border-bottom:1px dashed var(--bordo);
}
.anagrafica-testa h2{ font-size:clamp(1.6rem,3.6vw,2.2rem); margin:0; }
.anagrafica-formato{
  font-size:.92rem; font-weight:500; color:var(--nocciola);
  padding:.3rem .85rem; border:1px solid var(--bordo); border-radius:999px; background:var(--panna);
}
.anagrafica-griglia{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(1.4rem,4vw,3rem); }
@media (max-width:760px){ .anagrafica-griglia{ grid-template-columns:1fr; } }
.anagrafica h3{
  font-family:var(--testo); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--nocciola); margin:0 0 .6rem;
}
.anagrafica-col p{ margin:0 0 1.4rem; line-height:1.65; }
.anagrafica-col p:last-child{ margin-bottom:0; }
.anagrafica-ingredienti strong{ font-weight:700; color:var(--cioccolato); }
.anagrafica h4{ font-family:var(--testo); font-size:.92rem; font-weight:500; color:var(--tenue); margin:1.3rem 0 .6rem; }

.allergeni-lista{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.55rem; }
.allergeni-lista li{
  display:flex; align-items:center; gap:.65rem; padding:.45rem .8rem .45rem .45rem;
  border-radius:16px; font-weight:500; line-height:1.2;
  background:color-mix(in srgb, var(--colore) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--colore) 28%, transparent);
}
.allergene-tondo{
  width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:var(--colore); color:#fff;
}
.allergene-tondo svg{ width:26px; height:26px; }

.tracce-lista{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.45rem; }
.tracce-lista li{
  display:inline-flex; align-items:center; gap:.45rem; padding:.22rem .75rem .22rem .25rem;
  border-radius:999px; font-size:.9rem; color:var(--tenue);
  border:1px dashed color-mix(in srgb, var(--colore) 55%, transparent); background:#fff;
}
.tracce-lista .allergene-tondo{
  width:28px; height:28px; background:color-mix(in srgb, var(--colore) 14%, #fff); color:var(--colore);
}
.tracce-lista .allergene-tondo svg{ width:18px; height:18px; }

.anagrafica-nessuno{ color:var(--tenue); }
.anagrafica-nota{
  margin-top:1.1rem !important; padding:.7rem .95rem; border-radius:12px; font-size:.94rem;
  background:var(--crema-2); color:var(--cioccolato);
}
.anagrafica-legge{
  margin:1.6rem 0 0; padding-top:1rem; border-top:1px dashed var(--bordo);
  font-size:.88rem; color:var(--tenue);
}

/* ingredienti: l'inglese e' un blocco a parte, si sceglie con la lingua della pagina */
html:not([lang=en]) .solo-en, html[lang=en] .solo-it{ display:none; }

.scheda-video{ margin-top:clamp(2.4rem,6vw,4rem); }
.scheda-video h2{ font-size:clamp(1.6rem,3.6vw,2.2rem); margin-bottom:1rem; }
.video-griglia{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:1.2rem; }
.video-griglia figure{ margin:0; }
.video-griglia video,.video-cornice{
  width:100%; aspect-ratio:16/9; border-radius:var(--r); background:#20120A; display:block;
}
.video-cornice{ overflow:hidden; }
.video-cornice iframe{ width:100%; height:100%; border:0; display:block; }
.video-griglia figcaption{ margin-top:.5rem; color:var(--tenue); font-size:.95rem; }
.video-sotto-foto{ grid-template-columns:1fr; margin-top:1.2rem; }

/* riga del menù che porta alla scheda: e' un link ma non deve sembrare un link blu */
a.riga.con-scheda{ color:inherit; text-decoration:none; }
a.riga.con-scheda .nome > span:first-child{
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:.22em;
  text-decoration-color:color-mix(in srgb, var(--amarena) 45%, transparent);
}
a.riga.con-scheda:hover .nome > span:first-child{ text-decoration-color:var(--amarena); }
a.filtro{ text-decoration:none; }

/* home: formati del gelato e schede "Si prenota" portano alla pagina del prodotto */
a.formato{ color:inherit; text-decoration:none; transition:transform .16s, box-shadow .16s, border-color .16s; }
a.formato:hover{ transform:translateY(-2px); box-shadow:var(--ombra); border-color:var(--amarena); }
.scheda-link{ position:relative; transition:transform .18s, box-shadow .18s; }
.scheda-link:hover{ transform:translateY(-3px); box-shadow:var(--ombra-alta); }
.scheda-tutta{ position:absolute; inset:0; z-index:2; border-radius:inherit; }
.scheda-tutta:focus-visible{ outline:3px solid var(--amarena); outline-offset:3px; }
.scheda-chiedi{
  margin-top:1.4rem; padding:.75rem 1rem; border-radius:var(--r); max-width:46ch;
  background:var(--crema-2); color:var(--tenue); font-size:.94rem;
}

/* «Chiedi su WhatsApp» e «Torna al menù»: sempre affiancati, meta' riga ciascuno */
.scheda-azioni{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:1.6rem; max-width:30rem; }
.scheda-azioni .btn{ justify-content:center; padding:.75rem 1rem; white-space:nowrap; }
@media (max-width:480px){ .scheda-azioni .btn{ padding:.7rem .6rem; font-size:.9rem; } }