/* =========================================================
   Mamma Pasta — Pastificio della Basilicata
   Palette estratta dal logo (spighe, campi, casolare, tricolore)
   ========================================================= */

:root {
  /* --- colori --- */
  --panna: #fbf7ef;
  --panna-2: #f4ecdd;
  --panna-3: #ebdfc9;
  --grano: #c98a14;
  --grano-chiaro: #f0c24b;
  --grano-scuro: #9a6708;
  --verde: #5e8c34;
  --verde-scuro: #3c5c1f;
  --terra: #6b4f3a;
  --inchiostro: #2b2118;
  --inchiostro-soft: #5b4c3e;
  --rosso: #b42318;
  --rosso-scuro: #8f1a11;
  --bianco: #fff;
  --bordo: #e4d8c2;

  /* --- tipografia --- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;

  /* --- misure --- */
  --max: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 14px;
  --radius-sm: 9px;
  --ombra: 0 1px 2px rgba(43, 33, 24, 0.05), 0 8px 24px rgba(43, 33, 24, 0.07);
  --ombra-alta: 0 2px 6px rgba(43, 33, 24, 0.08), 0 20px 48px rgba(43, 33, 24, 0.14);
  --header-h: 76px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--ancora-h, calc(var(--header-h) + 16px)); }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--panna);
  -webkit-font-smoothing: antialiased;
}

/* height:auto è indispensabile: senza, gli attributi width/height sull'<img>
   fissano l'altezza e l'immagine si deforma quando si restringe */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}
h1 { font-size: clamp(2.3rem, 5.6vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.85rem); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
p { margin: 0 0 1.1em; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.sezione { padding-block: clamp(4rem, 8vw, 7rem); }
.sezione--stretta { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* occhiello decorativo ~ come sul sito originale ~ */
.occhiello {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--grano-scuro);
  letter-spacing: 0.01em;
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.occhiello::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--grano);
  flex: none;
}
.occhiello--centro { justify-content: center; }
.occhiello--centro::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--grano);
  flex: none;
}

.lead { font-size: 1.13rem; color: var(--inchiostro-soft); max-width: 62ch; }
.centro { text-align: center; }
.centro .lead { margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- pulsanti ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease,
    border-color 0.16s ease, color 0.16s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--grano-chiaro); outline-offset: 3px; }

.btn--acquista { background: var(--rosso); color: #fff; box-shadow: 0 6px 18px rgba(180, 35, 24, 0.28); }
.btn--acquista:hover { background: var(--rosso-scuro); box-shadow: 0 10px 26px rgba(180, 35, 24, 0.34); }

.btn--grano { background: var(--grano); color: #fff; box-shadow: 0 6px 18px rgba(201, 138, 20, 0.26); }
.btn--grano:hover { background: var(--grano-scuro); }

.btn--verde { background: var(--verde); color: #fff; }
.btn--verde:hover { background: var(--verde-scuro); }

.btn--ghost { border-color: currentColor; color: var(--inchiostro); background: transparent; }
.btn--ghost:hover { background: var(--inchiostro); color: var(--panna); border-color: var(--inchiostro); }

.btn--chiaro { border-color: rgba(255, 255, 255, 0.75); color: #fff; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); }
.btn--chiaro:hover { background: #fff; color: var(--inchiostro); }

.btn--sm { padding: 0.6rem 1.1rem; font-size: 0.88rem; }
.btn--full { width: 100%; }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

/* =========================================================
   Header
   ========================================================= */
.topbar {
  background: var(--inchiostro);
  color: var(--panna-2);
  font-size: 0.83rem;
  letter-spacing: 0.02em;
}
.topbar__in {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.5rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--grano-chiaro); }
.topbar__voci { display: flex; gap: 1.5rem; align-items: center; }
.topbar__solo-mobile { display: none; }

.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 247, 239, 0.92);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--bordo);
}
.header__in {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.55rem var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.marchio { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex: none; }
.marchio img { width: 54px; height: 53px; }
.marchio__testo { display: flex; flex-direction: column; line-height: 1.1; }
.marchio__nome { font-family: var(--serif); font-size: 1.28rem; font-weight: 600; color: var(--inchiostro); }
.marchio__sotto {
  font-size: 0.63rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--grano-scuro);
  font-weight: 600;
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
.nav a {
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--inchiostro-soft);
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--inchiostro); border-color: var(--grano); }

.header__azioni { display: flex; align-items: center; gap: 0.6rem; flex: none; }

.carrello-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--bordo);
  background: var(--bianco);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.carrello-btn:hover { border-color: var(--grano); transform: translateY(-1px); }
.carrello-btn svg { width: 21px; height: 21px; }
.carrello-btn__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rosso);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.carrello-btn__badge[data-attivo] { transform: scale(1); }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1.5px solid var(--bordo);
  border-radius: 50%;
  background: var(--bianco);
  cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 18px; height: 2px; background: var(--inchiostro); position: relative; }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--inchiostro);
}
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }

/* =========================================================
   Hero
   ========================================================= */
.hero { position: relative; overflow: hidden; background: var(--inchiostro); }
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 28% center;
}
.hero__velo {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(20, 14, 8, 0.72) 0%, rgba(20, 14, 8, 0.42) 38%,
    rgba(20, 14, 8, 0.55) 62%, rgba(20, 14, 8, 0.86) 100%);
}
.hero__in {
  position: relative;
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter);
  min-height: min(72vh, 600px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.hero__testo { max-width: 30rem; color: #fff; }
.hero h1 { font-size: clamp(2.1rem, 4.4vw, 3.25rem); margin-bottom: 0.6rem; }
.hero__testo .occhiello { color: var(--grano-chiaro); }
.hero__testo .occhiello::before { background: var(--grano-chiaro); }
.hero h1 { color: #fff; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.4); }
.hero h1 em { font-style: italic; color: var(--grano-chiaro); }
.hero__sotto { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin-bottom: 1.8rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.8rem; }

.hero__prove {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  margin-top: 2rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.86rem; color: rgba(255, 255, 255, 0.82);
}
.hero__prove span { display: flex; align-items: center; gap: 0.4rem; }
.hero__prove svg { width: 15px; height: 15px; color: var(--grano-chiaro); flex: none; }

/* =========================================================
   Striscia valori
   ========================================================= */
.valori { background: var(--bianco); border-bottom: 1px solid var(--bordo); }
.valori__griglia {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--bordo);
}
.valore { background: var(--bianco); padding: 2rem 1.5rem; text-align: center; }
.valore__icona {
  width: 46px; height: 46px; margin: 0 auto 0.9rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--panna-2);
  color: var(--verde);
}
.valore__icona svg { width: 23px; height: 23px; }
.valore h3 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.valore p { font-size: 0.9rem; color: var(--inchiostro-soft); margin: 0; }

/* =========================================================
   Blocchi immagine + testo
   ========================================================= */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.duo--inverso .duo__media { order: 2; }
.duo__media { position: relative; }
.duo__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--ombra-alta); }
.duo__media--storica img { filter: sepia(0.16) contrast(1.04); }
.duo__media--etichetta { max-width: 420px; margin-inline: auto; }

.didascalia {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--inchiostro-soft);
  text-align: center;
}

.timbro {
  position: absolute;
  right: -14px;
  bottom: -22px;
  width: 122px; height: 122px;
  border-radius: 50%;
  background: var(--grano);
  color: #fff;
  display: grid; place-items: center; text-align: center;
  font-family: var(--serif);
  line-height: 1.2;
  box-shadow: var(--ombra-alta);
  padding: 0.7rem;
}
.timbro strong { display: block; font-size: 1.75rem; }
.timbro span { font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }

.elenco-spunte { list-style: none; padding: 0; margin: 1.4rem 0 0; }
.elenco-spunte li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.85rem;
  color: var(--inchiostro-soft);
}
.elenco-spunte li strong { color: var(--inchiostro); }
.elenco-spunte li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
}

/* fondo scuro "laboratorio" */
.fondo-scuro { background: var(--inchiostro); color: var(--panna-2); }
.fondo-scuro h2 { color: var(--panna); }
.fondo-scuro .lead, .fondo-scuro p { color: rgba(244, 236, 221, 0.78); }
.fondo-scuro .occhiello { color: var(--grano-chiaro); }
.fondo-scuro .occhiello::before, .fondo-scuro .occhiello::after { background: var(--grano-chiaro); }
.fondo-scuro .elenco-spunte li { color: rgba(244, 236, 221, 0.78); }
.fondo-scuro .elenco-spunte li strong { color: var(--panna); }

.fondo-crema { background: var(--panna-2); }

/* =========================================================
   Formati (nuvola di nomi)
   ========================================================= */
.formati { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 2rem; }
.formati span {
  font-family: var(--serif);
  font-size: 1.02rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--bordo);
  border-radius: 999px;
  background: var(--bianco);
  color: var(--terra);
}

/* =========================================================
   Prodotti / shop
   ========================================================= */
.filtri {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
  margin-bottom: 2.5rem;
}
.filtro {
  font-family: var(--sans);
  font-size: 0.9rem; font-weight: 600;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid var(--bordo);
  background: var(--bianco);
  color: var(--inchiostro-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.filtro:hover { border-color: var(--grano); color: var(--inchiostro); }
.filtro[aria-pressed="true"] { background: var(--inchiostro); border-color: var(--inchiostro); color: var(--panna); }

.griglia-prodotti {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
}

.card {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* i bollini «Torneranno presto» e «Ne restano pochi» si appoggiano qui:
     senza questa riga scappano fuori dalla scheda */
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--ombra-alta); border-color: var(--panna-3); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--panna-2);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.card:hover .card__media img { transform: scale(1.05); }

/* segnaposto elegante per i formati ancora senza fotografia */
.card__media--disegno {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(240, 194, 75, 0.28), transparent 60%),
    linear-gradient(160deg, var(--panna-2), var(--panna-3));
}
.card__disegno { text-align: center; padding: 1rem; }
.card__disegno svg { width: 40px; height: 40px; color: var(--grano); opacity: 0.75; margin-bottom: 0.4rem; }
.card__disegno span {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.28rem;
  color: var(--terra);
}

.card__tag {
  position: absolute;
  top: 0.7rem; left: 0.7rem;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: rgba(251, 247, 239, 0.94);
  color: var(--grano-scuro);
  backdrop-filter: blur(4px);
  white-space: nowrap;
  max-width: calc(100% - 1.4rem);
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__tag--verde { color: var(--verde-scuro); }

.card__corpo { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card__nome { font-size: 1.22rem; margin-bottom: 0.2rem; }
.card__desc { font-size: 0.89rem; color: var(--inchiostro-soft); margin: 0 0 0.9rem; flex: 1; }
.card__formato { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--terra); margin-bottom: 0.7rem; }

.card__riga {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.7rem; margin-top: auto;
}
.card__prezzo { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; color: var(--inchiostro); }
.card__prezzo small { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; color: var(--inchiostro-soft); }

.stepper {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--bordo); border-radius: 999px; overflow: hidden;
  background: var(--bianco);
}
.stepper button {
  width: 32px; height: 34px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--inchiostro-soft);
}
.stepper button:hover { background: var(--panna-2); color: var(--inchiostro); }
.stepper output { min-width: 26px; text-align: center; font-weight: 600; font-size: 0.92rem; }

/* =========================================================
   Blocco B2B
   ========================================================= */
.b2b {
  background: linear-gradient(135deg, var(--verde-scuro), var(--verde));
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
.b2b h2 { color: #fff; }
.b2b p { color: rgba(255, 255, 255, 0.88); margin-bottom: 0; }
.b2b__cta { display: flex; flex-direction: column; gap: 0.7rem; }

/* =========================================================
   Contatti
   ========================================================= */
.contatti { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.scheda-contatto {
  background: var(--bianco);
  border: 1px solid var(--bordo);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  box-shadow: var(--ombra);
}
.riga-contatto {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--panna-2);
}
.riga-contatto:last-of-type { border-bottom: 0; }
.riga-contatto svg { width: 20px; height: 20px; color: var(--grano); flex: none; margin-top: 0.2rem; }
.riga-contatto strong { display: block; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--inchiostro-soft); margin-bottom: 0.15rem; }
.riga-contatto a { text-decoration: none; font-weight: 500; }
.riga-contatto a:hover { color: var(--grano-scuro); }

.mappa {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--bordo);
  box-shadow: var(--ombra);
  min-height: 420px;
  background: var(--panna-2);
}
.mappa iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }

/* L'anteprima che sta al posto della mappa finché non la si apre.
   Deve bastare a sé stessa: chi non clicca deve comunque sapere
   dove siamo e come arrivarci. */
.mappa__anteprima {
  min-height: 420px; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.55rem; padding: 2rem 1.5rem; text-align: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(201, 138, 20, 0.09), transparent 55%),
    repeating-linear-gradient(45deg, transparent 0 22px, rgba(43, 33, 24, 0.028) 22px 23px),
    var(--panna-2);
}
.mappa__spillo { width: 34px; height: 34px; color: var(--rosso); }
.mappa__anteprima strong { font-family: var(--serif); font-size: 1.35rem; }
.mappa__dove { color: var(--inchiostro-soft); line-height: 1.55; }
.mappa__azioni { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-top: 0.7rem; }
.mappa__nota { font-size: 0.8rem; color: var(--inchiostro-soft); opacity: 0.75; margin: 0.5rem 0 0; max-width: 30ch; }
.mappa--aperta { min-height: 0; }

/* in fondo alla home e alla tavola calda: la mappa affiancata al testo */
.dove { padding-block: clamp(3rem, 5vw, 4.5rem); }
.dove__in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: center; }
.dove__testo p { color: var(--inchiostro-soft); }
.dove__righe { display: grid; gap: 0.5rem; margin: 1.3rem 0 1.6rem; }
.dove__riga { display: flex; gap: 0.6rem; align-items: baseline; }
.dove__riga b { font-family: var(--sans); font-size: 0.74rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--inchiostro-soft); opacity: 0.7; min-width: 5.6rem; }
@media (max-width: 860px) {
  .dove__in { grid-template-columns: 1fr; gap: 1.6rem; }
  .mappa, .mappa__anteprima, .mappa iframe { min-height: 320px; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer { background: var(--inchiostro); color: rgba(244, 236, 221, 0.72); padding-block: 3.5rem 1.5rem; font-size: 0.92rem; }
.footer__griglia { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; }
.footer h4 {
  font-family: var(--sans); font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--grano-chiaro); margin-bottom: 1rem;
}
.footer a { text-decoration: none; }
.footer a:hover { color: var(--grano-chiaro); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.5rem; }
.footer__marchio { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.footer__marchio > img:first-child { width: 58px; height: 57px; flex: none; }
.footer__chiusura {
  margin-top: 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(244, 236, 221, 0.14);
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  font-size: 0.83rem; color: rgba(244, 236, 221, 0.5);
}

/* =========================================================
   Pagine di testo (privacy, condizioni)
   ========================================================= */
.testo-legale h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.testo-legale h2 { font-size: clamp(1.2rem, 1.9vw, 1.45rem); margin-top: 2.4rem; }
.testo-legale p, .testo-legale li { font-size: 0.97rem; }

/* =========================================================
   Carrello (pannello laterale)
   ========================================================= */
.velo {
  position: fixed; inset: 0;
  background: rgba(30, 22, 14, 0.5);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 90;
}
.velo[data-aperto] { opacity: 1; pointer-events: auto; }

.carrello {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  background: var(--panna);
  z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: -12px 0 40px rgba(43, 33, 24, 0.2);
}
.carrello[data-aperto] { transform: translateX(0); }

.carrello__testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--bordo);
  background: var(--bianco);
}
.carrello__testa h2 { margin: 0; font-size: 1.35rem; }
.chiudi {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--bordo); background: var(--bianco);
  cursor: pointer; display: grid; place-items: center; color: var(--inchiostro-soft);
}
.chiudi:hover { border-color: var(--inchiostro); color: var(--inchiostro); }
.chiudi svg { width: 17px; height: 17px; }

.carrello__corpo { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; }
.carrello__vuoto { text-align: center; padding: 3rem 1rem; color: var(--inchiostro-soft); }
.carrello__vuoto svg { width: 54px; height: 54px; color: var(--panna-3); margin-bottom: 1rem; }

.voce {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--bordo);
}
.voce__media {
  width: 68px; height: 60px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--panna-2);
  display: grid; place-items: center;
}
.voce__media img { width: 100%; height: 100%; object-fit: cover; }
.voce__media svg { width: 24px; height: 24px; color: var(--grano); }
.voce__nome { font-family: var(--serif); font-size: 1.05rem; line-height: 1.25; }
.voce__meta { font-size: 0.78rem; color: var(--inchiostro-soft); }
.voce__destra { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.voce__prezzo { font-weight: 600; font-size: 0.96rem; }
.voce__togli {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-size: 0.76rem; color: var(--inchiostro-soft); text-decoration: underline;
}
.voce__togli:hover { color: var(--rosso); }

.carrello__piede { border-top: 1px solid var(--bordo); padding: 1.2rem 1.4rem 1.5rem; background: var(--bianco); }
.riga-totale { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-size: 0.92rem; color: var(--inchiostro-soft); }
.riga-totale--grande {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  color: var(--inchiostro); margin-bottom: 1rem;
  padding-top: 0.7rem; border-top: 1px solid var(--bordo);
}
.nota-piccola { font-size: 0.78rem; color: var(--inchiostro-soft); text-align: center; margin: 0.8rem 0 0; }

/* messaggio "aggiunto" */
.brindisi {
  position: fixed; left: 50%; bottom: 26px;
  transform: translate(-50%, 130%);
  background: var(--inchiostro); color: var(--panna);
  padding: 0.8rem 1.4rem; border-radius: 999px;
  font-size: 0.92rem; font-weight: 500;
  box-shadow: var(--ombra-alta);
  z-index: 120;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  display: flex; align-items: center; gap: 0.55rem;
}
.brindisi[data-attivo] { transform: translate(-50%, 0); }
.brindisi svg { width: 17px; height: 17px; color: var(--grano-chiaro); }

/* =========================================================
   Avviso configurazione (visibile solo in locale)
   ========================================================= */
.avviso-demo {
  background: var(--grano-chiaro);
  color: #4a3405;
  font-size: 0.84rem;
  text-align: center;
  padding: 0.5rem var(--gutter);
}
.avviso-demo strong { font-weight: 700; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 960px) {
  .valori__griglia { grid-template-columns: repeat(2, 1fr); }
  .duo { grid-template-columns: 1fr; gap: 2rem; }
  .duo--inverso .duo__media { order: 0; }
  .b2b { grid-template-columns: 1fr; gap: 1.6rem; }
  .contatti { grid-template-columns: 1fr; }
  .footer__griglia { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .timbro { width: 96px; height: 96px; right: 8px; bottom: -18px; }
  .timbro strong { font-size: 1.35rem; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .topbar__nascondi-mobile { display: none; }
  .topbar__solo-mobile { display: inline; }
  .topbar { font-size: 0.78rem; }
  .topbar__in { gap: 0.9rem; }
  .sezione { padding-block: clamp(3rem, 9vw, 4rem); }

  /* le foto verticali, a piena larghezza, allungherebbero troppo la pagina */
  .duo__media--verticale { max-width: 300px; margin-inline: auto; }
  .timbro { display: none; }
  .didascalia { margin-top: 0.6rem; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(300px, 82%);
    background: var(--panna);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + 1.5rem) 1.5rem 1.5rem;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: -12px 0 40px rgba(43, 33, 24, 0.2);
    z-index: 95;
  }
  .nav[data-aperto] { transform: translateX(0); }
  .nav a { padding: 0.95rem 0; border-bottom: 1px solid var(--bordo); border-left: 0; font-size: 1.05rem; }
  .nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--bordo); color: var(--grano-scuro); }
  .burger { display: flex; }
  .marchio img { width: 46px; height: 45px; }
  .marchio__nome { font-size: 1.1rem; }
  .marchio__sotto { font-size: 0.56rem; }

  .hero__in { justify-content: flex-start; min-height: auto; padding-block: 4rem 3.5rem; }
  .hero__img { object-position: 42% center; }
  .hero__velo { background: linear-gradient(180deg, rgba(20, 14, 8, 0.55) 0%, rgba(20, 14, 8, 0.78) 100%); }
  .hero__prove { gap: 0.35rem 1rem; font-size: 0.8rem; }

  .griglia-prodotti { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; }
  .card__corpo { padding: 0.9rem 0.95rem 1.1rem; }
  .card__nome { font-size: 1.05rem; }
  .card__desc { font-size: 0.82rem; }
  .card__riga { flex-direction: column; align-items: stretch; gap: 0.55rem; }
  .card__prezzo { font-size: 1.25rem; }
  .stepper { width: 100%; justify-content: space-between; }

  .footer__griglia { grid-template-columns: 1fr; gap: 1.8rem; }
  .valore { padding: 1.5rem 1rem; }
}

@media (max-width: 420px) {
  .valori__griglia { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* rivelazione allo scroll */
.rivela { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rivela[data-visibile] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rivela { opacity: 1; transform: none; } }

/* =========================================================
   DAL GRANO ALLA PASTA — scroll-telling pinnato
   ========================================================= */
.viaggio { background: var(--inchiostro); position: relative; }
.viaggio__pin { height: 100vh; position: relative; overflow: hidden; }
.viaggio__pin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viaggio__atto {
  position: absolute; z-index: 3;
  left: clamp(1.25rem, 7vw, 6.5rem); bottom: 13vh; max-width: 430px;
  opacity: 0; transform: translateY(24px); pointer-events: none;
}
.viaggio__atto .occhiello { color: var(--grano-chiaro); }
.viaggio__atto .occhiello::before, .viaggio__atto .occhiello::after { background: var(--grano-chiaro); }
.viaggio__atto h3 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); color: var(--panna); }
.viaggio__atto p { color: rgba(244, 236, 221, 0.8); font-size: 1rem; }
.viaggio__dato {
  font-family: var(--serif); font-style: italic;
  color: var(--grano-chiaro) !important;
  border-left: 2px solid var(--grano); padding-left: 12px;
}
.viaggio__rail {
  position: absolute; right: clamp(1rem, 4vw, 3.4rem); top: 50%;
  transform: translateY(-50%); z-index: 3; height: 46vh; width: 26px;
}
.viaggio__rail svg { height: 100%; width: 100%; overflow: visible; }
.viaggio__finale {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center; opacity: 0; pointer-events: none;
}
.viaggio__card {
  background: var(--panna); border-radius: var(--radius);
  padding: 2.6rem 3rem; text-align: center; max-width: 420px;
  box-shadow: var(--ombra-alta);
}
.viaggio__card h3 { font-size: 2rem; }
.viaggio__card p { color: var(--inchiostro-soft); }
/* fallback senza animazioni */
.viaggio--statico .viaggio__pin { height: auto; padding: clamp(4rem, 8vw, 7rem) 0; }
.viaggio--statico .viaggio__atto {
  position: static; opacity: 1; transform: none;
  margin: 0 auto 3rem; pointer-events: auto;
}
.viaggio--statico .viaggio__rail, .viaggio--statico canvas { display: none; }
.viaggio--statico .viaggio__finale { position: static; opacity: 1; pointer-events: auto; }

/* =========================================================
   PACCO DA GIÙ
   ========================================================= */
.pacco {
  background: var(--grano-chiaro); border-radius: var(--radius);
  padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.8rem, 4vw, 3rem);
  display: flex; justify-content: space-between; align-items: center;
  gap: 2rem; flex-wrap: wrap; box-shadow: var(--ombra);
}
.pacco .occhiello { color: var(--grano-scuro); }
.pacco .occhiello::before, .pacco .occhiello::after { background: var(--grano-scuro); }
.pacco h2 { margin-bottom: 0.35em; }
.pacco p { max-width: 560px; margin-bottom: 0; color: var(--inchiostro-soft); }
.pacco__cta { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.pacco__prezzo { font-family: var(--serif); font-size: 1.7rem; font-weight: 600; }
.pacco__nota { font-size: 0.8rem; color: var(--inchiostro-soft); }

/* =========================================================
   LA TERRA
   ========================================================= */
.terra {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.terra__mappa { max-width: 340px; margin-inline: auto; }
.terra__mappa svg { width: 100%; height: auto; overflow: visible; font-family: var(--sans); }
.terra__motto {
  font-family: var(--serif); font-style: italic;
  font-size: 1.35rem; color: var(--grano-scuro); margin: 1.2rem 0 1.6rem;
}
@media (max-width: 820px) { .terra { grid-template-columns: 1fr; } }

/* card: la foto è un link allo shop */
.card__media > a { display: block; color: inherit; text-decoration: none; }
.card__media > a:hover img { transform: scale(1.03); }
.card__media img { transition: transform 0.4s ease; }

/* =========================================================
   CARD: seconda foto (pasta cruda) al passaggio del mouse
   ========================================================= */
.card__media > a { position: relative; }
.card__img2 {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity 0.35s ease;
}
.card__media > a:hover .card__img2 { opacity: 1; }

/* =========================================================
   CARRELLO: barra di avanzamento spedizione gratuita
   ========================================================= */
.sped-avanzamento { margin-bottom: 1rem; }
.sped-barra {
  height: 8px; border-radius: 99px; background: var(--panna-3);
  overflow: hidden;
}
.sped-barra span {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--grano), var(--grano-chiaro));
  transition: width 0.45s ease;
}
[data-sbloccata] .sped-barra span { background: var(--verde); }
.sped-nota {
  margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--inchiostro-soft);
}
[data-sbloccata] .sped-nota { color: var(--verde-scuro); font-weight: 600; }

/* =========================================================
   VETRINA FILIERA — galleria orizzontale pinnata
   ========================================================= */
.vetrina { background: var(--inchiostro); color: var(--panna-2); overflow: hidden; }
.vetrina__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.vetrina__testata { padding: 2.2rem var(--gutter) 0; }
.vetrina__testata .occhiello { color: var(--grano-chiaro); }
.vetrina__testata .occhiello::before, .vetrina__testata .occhiello::after { background: var(--grano-chiaro); }
.vetrina__testata h2 { color: var(--panna); margin-bottom: 0; }
.vetrina__binario {
  display: flex; gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: 2rem var(--gutter) 2.6rem;
  width: max-content; will-change: transform;
  align-items: stretch;
}
.vetrina__panello {
  width: min(72vw, 760px); flex: 0 0 auto;
  display: grid; grid-template-rows: 1fr auto; gap: 1.1rem;
}
.vetrina__panello--finale {
  width: min(60vw, 560px);
  display: grid; place-items: center; text-align: center;
  grid-template-rows: none;
}
.vetrina__panello--finale .vetrina__numero { font-size: 2.4rem; }
.vetrina__panello--finale h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.foto-slot {
  position: relative; border-radius: var(--radius); overflow: hidden;
  height: min(52vh, 480px); background: #241c12;
}
.foto-slot img {
  width: 106%; height: 100%; object-fit: cover; margin-left: -3%;
}
.foto-slot__nota { display: none; }
.foto-slot--vuota { border: 1.5px dashed rgba(240, 194, 75, 0.4); }
.foto-slot--vuota img { display: none; }
.foto-slot--vuota .foto-slot__nota {
  display: grid; place-items: center; position: absolute; inset: 0;
  text-align: center; font-family: var(--serif); font-style: italic;
  color: rgba(240, 194, 75, 0.75); font-size: 1.02rem; line-height: 1.7;
  padding: 1rem;
}
.vetrina__testo { display: flex; align-items: baseline; gap: 1rem; }
.vetrina__numero {
  font-family: var(--serif); font-size: 1.9rem; color: var(--grano-chiaro);
  font-style: italic; line-height: 1;
}
.vetrina__testo h3 { color: var(--panna); margin: 0; font-size: 1.45rem; white-space: nowrap; }
.vetrina__testo p { margin: 0; color: rgba(244, 236, 221, 0.72); font-size: 0.95rem; }
/* fallback statico: pannelli in colonna */
.vetrina--statica .vetrina__pin { height: auto; padding: clamp(3rem, 6vw, 5rem) 0; }
.vetrina--statica .vetrina__binario {
  flex-direction: column; width: auto; align-items: center;
}
.vetrina--statica .vetrina__panello { width: min(92vw, 760px); }

/* =========================================================
   HERO CON SLOT MEDIA (video/foto della mietitura)
   ========================================================= */
.hero--slot {
  background:
    radial-gradient(1100px 520px at 78% 10%, rgba(240, 194, 75, 0.16), transparent 60%),
    linear-gradient(165deg, #2b2118 0%, #3a2f1e 55%, #2b2118 100%);
}
.hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.hero--slot .hero__velo { z-index: 1; }
.hero--slot .hero__img { z-index: 1; }
.hero__promemoria {
  position: absolute; top: calc(var(--header-h) + 3.2rem); right: 1.2rem; z-index: 0;
  border: 1.5px dashed rgba(240, 194, 75, 0.45);
  border-radius: var(--radius-sm);
  padding: 0.7rem 1rem;
  font-family: var(--serif); font-style: italic; font-size: 0.85rem;
  color: rgba(240, 194, 75, 0.8); text-align: center; line-height: 1.6;
}

/* =========================================================
   OFFERTE (Pacco da Giù + La Scorta)
   ========================================================= */
.offerte {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 3vw, 2rem);
}
.offerta {
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  box-shadow: var(--ombra);
  display: flex; flex-direction: column; gap: 0.4rem;
}
.offerta h2 { margin-bottom: 0.2em; }
.offerta p { margin-bottom: 0.9em; }
.offerta--grano { background: var(--grano-chiaro); }
.offerta--grano .occhiello { color: var(--grano-scuro); }
.offerta--grano .occhiello::before, .offerta--grano .occhiello::after { background: var(--grano-scuro); }
.offerta--grano p { color: var(--inchiostro-soft); }
.offerta--verde { background: var(--verde-scuro); color: var(--panna-2); }
.offerta--verde h2 { color: var(--panna); }
.offerta--verde .occhiello { color: var(--grano-chiaro); }
.offerta--verde .occhiello::before, .offerta--verde .occhiello::after { background: var(--grano-chiaro); }
.offerta--verde p { color: rgba(244, 236, 221, 0.8); }
.offerta__riga {
  margin-top: auto; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.offerta__prezzo { font-family: var(--serif); font-size: 1.65rem; font-weight: 600; }
@media (max-width: 820px) { .offerte { grid-template-columns: 1fr; } }

/* =========================================================
   NOVITÀ
   ========================================================= */
.novita {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
}
.novita__voce {
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.novita__data {
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grano-scuro); font-weight: 600;
}
.novita__voce h3 { font-size: 1.25rem; margin: 0.4rem 0 0.3rem; }
.novita__voce p { font-size: 0.92rem; color: var(--inchiostro-soft); margin-bottom: 0.6rem; }
.novita__link {
  font-size: 0.88rem; font-weight: 600; color: var(--grano-scuro);
  text-decoration: none;
}
.novita__link:hover { text-decoration: underline; }

/* =========================================================
   RITOCCHI MOBILE (sezioni nuove)
   ========================================================= */
@media (max-width: 700px) {
  .viaggio__atto { left: 1.2rem; right: 1.2rem; bottom: 9vh; max-width: none; }
  .viaggio__atto h3 { font-size: 1.55rem; }
  .viaggio__atto p { font-size: 0.92rem; }
  .viaggio__rail { display: none; }
  .viaggio__card { padding: 1.8rem 1.6rem; margin-inline: 1rem; }
  .pacco { flex-direction: column; align-items: flex-start; }
  .foto-slot { height: 46vw; min-height: 220px; }
  .vetrina--statica .vetrina__testo { flex-wrap: wrap; }
  .vetrina__testo h3 { white-space: normal; }
  .hero__promemoria { top: auto; bottom: 4.6rem; right: 0.8rem; left: 0.8rem; font-size: 0.78rem; }
  .offerta__riga { justify-content: space-between; width: 100%; }
}

/* =========================================================
   IL FILO — la filiera che scorre (stile galleria su crema)
   ========================================================= */
.filo { background: var(--panna); position: relative; }
.filo__pin {
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: clamp(0.9rem, 2vh, 1.6rem);
  padding: calc(var(--header-h) * 0.6) var(--gutter) 1.4rem;
}
.filo__epigrafe {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  color: var(--grano-scuro); margin: 0; text-align: center;
}
.filo__cornice {
  position: relative; overflow: hidden;
  width: min(100%, 1040px);
  height: min(56vh, 560px);
  border-radius: var(--radius);
  box-shadow: var(--ombra-alta);
  background: var(--panna-3);
}
.filo__strato { position: absolute; inset: 0; margin: 0; }
.filo__strato img, .filo__strato video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; will-change: transform;
}
.filo__strato + .filo__strato { clip-path: inset(100% 0 0 0); }
.filo__promemoria { display: none; }
.filo__strato.senza-foto.senza-video { border: 1.5px dashed rgba(201, 138, 20, 0.45); border-radius: var(--radius); }
.filo__strato.senza-foto.senza-video .filo__promemoria {
  display: grid; place-items: center; position: absolute; inset: 0;
  text-align: center; font-family: var(--serif); font-style: italic;
  color: var(--grano-scuro); font-size: 1rem; line-height: 1.8; padding: 1rem;
}
.filo__linea {
  position: absolute; left: clamp(0.4rem, 3vw, 2.6rem); top: 50%;
  transform: translateY(-50%); height: 62vh; width: 40px;
  pointer-events: none;
}
.filo__linea circle { transition: fill 0.3s; }
.filo__tappe { position: relative; width: min(100%, 760px); min-height: 7.2rem; text-align: center; }
.filo__tappa {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.filo__tappa h3 {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  margin: 0.2rem 0 0.35rem; color: var(--inchiostro);
}
.filo__dato {
  font-family: var(--serif); font-style: italic;
  color: var(--grano-scuro); font-size: 0.98rem; margin: 0;
}
/* fallback statico: tappe impilate in colonna, testi tutti visibili */
.filo--statico .filo__pin { height: auto; padding-block: clamp(3rem, 6vw, 5rem); }
.filo--statico .filo__cornice {
  height: auto; overflow: visible; box-shadow: none; background: none;
  display: flex; flex-direction: column; gap: 1.4rem;
}
.filo--statico .filo__strato {
  position: relative; inset: auto; height: 44vh;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombra);
  clip-path: none !important;
}
.filo--statico .filo__linea { display: none; }
/* i testi spostati sotto la loro foto: niente più elenco di didascalie
   staccate dalle immagini */
.filo--statico .filo__tappe { display: none; }
.filo--statico .filo__tappa {
  position: relative; inset: auto; opacity: 1; pointer-events: auto;
  margin: -0.4rem 0 2.2rem; text-align: center; max-width: 62ch;
  margin-inline: auto;
}
.filo--statico .filo__tappa h3 { margin-top: 0.9rem; }
.filo--statico .filo__strato { height: min(46vh, 420px); }
@media (max-width: 700px) {
  .filo__cornice { height: 44vh; }
  .filo__linea { display: none; }
  .filo__tappe { min-height: 8.6rem; }
}

/* =========================================================
   HOME "STRUTTURA ALDO" — linee, famiglia, recensioni
   ========================================================= */
.linee {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.4rem;
}
.linea-tile {
  display: block; text-decoration: none;
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.linea-tile:hover { transform: translateY(-5px); box-shadow: var(--ombra-alta); }
.linea-tile .foto-slot { height: 170px; border-radius: 0; display: block; background: var(--panna-3); }
.foto-slot--chiaro.foto-slot--vuota { border-color: rgba(201, 138, 20, 0.4); }
.foto-slot--chiaro .foto-slot__nota { color: var(--grano-scuro); font-size: 0.85rem; }
.linea-tile__nome {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1.15rem; padding: 0.9rem 1rem 0.1rem; color: var(--inchiostro);
}
.linea-tile__desc {
  display: block; font-size: 0.82rem; color: var(--inchiostro-soft);
  padding: 0 1rem 1rem;
}
.video-incorniciato {
  aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--ombra); margin-top: 2.2rem;
}
.video-incorniciato iframe { width: 100%; height: 100%; border: 0; display: block; }
.recensioni {
  display: flex; gap: 1.2rem; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 0.8rem;
  -webkit-overflow-scrolling: touch;
}
.recensione {
  flex: 0 0 min(78vw, 400px); scroll-snap-align: center;
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
}
.recensione__testo { font-family: var(--serif); font-style: italic; font-size: 1.02rem; line-height: 1.65; margin: 0; }
.recensione__firma {
  margin: 0.9rem 0 0; font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--grano-scuro); font-weight: 600;
}
.stelle { color: var(--grano); font-size: 1.35rem; letter-spacing: 0.22em; }
.chips { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin: 1.1rem 0 1.5rem; }
.chip {
  background: var(--panna-2); border: 1px solid var(--bordo); border-radius: 99px;
  padding: 0.45rem 1.1rem; font-size: 0.88rem; color: var(--inchiostro-soft);
}

/* =========================================================
   SHOP: vetrina formati + catalogo a sezioni
   ========================================================= */
.vetrina-formati {
  display: flex; gap: 0.4rem; overflow-x: auto;
  padding: 0.4rem 0.2rem 0.9rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.formato-mini {
  flex: 0 0 auto; width: 108px; text-align: center;
  text-decoration: none; color: var(--inchiostro);
  scroll-snap-align: start;
}
.formato-mini__disco {
  display: grid; place-items: center;
  width: 84px; height: 84px; margin: 0 auto 0.5rem;
  border-radius: 50%; background: var(--panna-2);
  border: 1px solid var(--bordo); overflow: hidden;
  color: var(--grano); transition: transform 0.25s, border-color 0.25s;
}
.formato-mini__disco svg { width: 34px; height: 34px; }
.formato-mini__disco img { width: 100%; height: 100%; object-fit: cover; }
.formato-mini:hover .formato-mini__disco { transform: scale(1.08); border-color: var(--grano); }
.formato-mini__nome { display: block; font-size: 0.78rem; font-weight: 600; line-height: 1.25; }
/* Niente scroll-margin qui: l'altezza dell'intestazione è già tenuta dal
   scroll-padding-top su <html>. Metterla in tutti e due i posti la
   contava due volte e la sezione atterrava mezzo schermo più in basso. */
.catalogo-sezione { margin-top: clamp(2.6rem, 6vw, 4rem); }
.catalogo-sezione > h2 { margin-bottom: 1.4rem; }
.catalogo-sezione__sotto { color: var(--inchiostro-soft); margin: -0.8rem 0 1.4rem; }
.catalogo-sezione--speciale {
  background: var(--panna-2); border: 1px solid var(--bordo);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3.5vw, 2.4rem);
}
.catalogo-sezione--speciale .occhiello { color: var(--grano-scuro); }
.catalogo-sezione--speciale .occhiello::before,
.catalogo-sezione--speciale .occhiello::after { background: var(--grano-scuro); }

/* =========================================================
   TAVOLA CALDA: menù di oggi
   ========================================================= */
.menu-oggi {
  max-width: 680px; margin-inline: auto;
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--radius); box-shadow: var(--ombra);
  padding: clamp(1.6rem, 4vw, 2.6rem);
  text-align: center;
}
.menu-oggi h2 { margin-bottom: 0.9rem; }
.menu-oggi__lista { list-style: none; margin: 1.2rem 0 0.4rem; padding: 0; text-align: left; }
.menu-oggi__lista li {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.65rem 0; font-size: 1.02rem;
}
.menu-oggi__lista li span { font-family: var(--serif); }
.menu-oggi__lista li i { flex: 1; border-bottom: 1.5px dotted var(--bordo); transform: translateY(-4px); }
.menu-oggi__lista li strong { color: var(--grano-scuro); }
.menu-oggi__nota { font-size: 0.85rem; color: var(--inchiostro-soft); font-style: italic; margin: 0.8rem 0 0; }
.menu-oggi__azioni { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }

/* =========================================================
   SHOP MODELLATO: barra sezioni, stepper in card, prezzo/kg
   ========================================================= */
.barra-sezioni {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(251, 247, 239, 0.94);
  backdrop-filter: blur(8px);
  border-block: 1px solid var(--bordo);
}
.barra-sezioni__in {
  max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; gap: 0.3rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.barra-sezioni a {
  padding: 0.75rem 0.9rem; white-space: nowrap;
  font-size: 0.86rem; font-weight: 600; text-decoration: none;
  color: var(--inchiostro-soft);
  border-bottom: 2.5px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.barra-sezioni a:hover { color: var(--inchiostro); }
.barra-sezioni a[aria-current] {
  color: var(--grano-scuro); border-bottom-color: var(--grano);
}
.catalogo-sezione > h2 small {
  font-size: 0.55em; color: var(--inchiostro-soft); font-weight: 400;
}
.card__kg { display: block; font-size: 0.72rem; color: var(--inchiostro-soft); font-weight: 400; }
.card__azioni { flex: 0 0 auto; }
.stepper--card {
  display: inline-flex; align-items: center; gap: 0.7rem;
  background: var(--panna-2); border: 1px solid var(--bordo);
  border-radius: 99px; padding: 0.25rem 0.5rem;
}
.stepper--card button {
  width: 30px; height: 30px; border-radius: 50%;
  border: none; background: var(--bianco); cursor: pointer;
  font-size: 1.05rem; line-height: 1; box-shadow: var(--ombra);
}
.stepper--card output { font-weight: 700; min-width: 1.1em; text-align: center; }

/* =========================================================
   NAV: mega menu "Shop" a tutta pagina (come il riferimento)
   ========================================================= */
.nav__tendina { display: flex; align-items: center; }
.nav__tendina > a { display: inline-flex; align-items: center; gap: 5px; }
.nav__caret { width: 11px; height: 8px; transition: transform 0.2s; }
.nav__pannello {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--panna);
  border-bottom: 1px solid var(--bordo);
  box-shadow: 0 28px 48px -20px rgba(43, 33, 24, 0.22);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 59;
}
/* estende la zona attiva fino al bordo dell'header: la tendina non si
   chiude mentre il mouse scende dal menu al pannello */
.nav__pannello::before {
  content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 30px;
}
/* la tendina si apre con un clic, non passandoci sopra: così si comporta
   uguale su computer, tablet e telefono, e resta aperta il tempo di
   scegliere la sezione */
.nav__tendina:focus-within .nav__pannello,
.nav__tendina.aperta .nav__pannello {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__tendina:focus-within .nav__caret,
.nav__tendina.aperta .nav__caret { transform: rotate(180deg); }
.nav__pannello-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 0.5rem 1.4rem;
  padding-block: 1.7rem 2rem;
}
.nav__pannello a { display: block; padding: 0.75rem 0.85rem; border-radius: 9px; border-bottom: none; }
.nav__pannello a strong {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: 1.06rem; color: var(--inchiostro); margin-bottom: 0.2rem;
}
.nav__pannello a span { display: block; font-size: 0.78rem; line-height: 1.45; color: var(--inchiostro-soft); }
.nav__pannello a:hover { background: var(--panna-2); }
.nav__pannello a:hover strong { color: var(--grano-scuro); }
.nav__pannello-tutti strong { color: var(--grano-scuro); }


/* =========================================================
   SHOP BOUTIQUE — catalogo arioso, card essenziali
   ========================================================= */
.catalogo-sezione { margin-top: clamp(3.4rem, 8vw, 5.5rem); }
.catalogo-sezione > h2 { text-align: center; margin-bottom: 0.4rem; }
.catalogo-sezione > h2 small { font-size: 0.55em; color: var(--inchiostro-soft); font-weight: 400; }
.catalogo-sezione__sotto { text-align: center; margin: 0 auto 2.2rem; max-width: 520px; }
.catalogo-sezione .griglia-prodotti {
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 2.4rem 1.8rem;
}
.catalogo-sezione .card {
  background: none; border: none; border-radius: 0;
  overflow: visible; box-shadow: none;
}
.catalogo-sezione .card:hover { transform: none; box-shadow: none; }
.catalogo-sezione .card__media {
  border-radius: var(--radius); aspect-ratio: 4 / 5;
  box-shadow: var(--ombra);
  transition: box-shadow 0.25s;
}
.catalogo-sezione .card:hover .card__media { box-shadow: var(--ombra-alta); }
.catalogo-sezione .card__corpo { padding: 1rem 0.2rem 0; text-align: center; align-items: center; }
.catalogo-sezione .card__nome { font-size: 1.3rem; }
.catalogo-sezione .card__formato { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; }
.catalogo-sezione .card__desc, .catalogo-sezione .card__kg { display: none; }
.catalogo-sezione .card__riga {
  flex-direction: column; align-items: center; gap: 0.55rem; margin-top: 0.35rem;
}
.catalogo-sezione .card__prezzo { font-size: 1.15rem; }
.catalogo-sezione--speciale {
  background: none; border: none; padding: 0;
  border-top: 1px solid var(--bordo); border-radius: 0;
  padding-top: clamp(2.6rem, 6vw, 4rem);
}
.catalogo-sezione--speciale .occhiello { text-align: center; display: block; }
.catalogo-sezione--speciale .occhiello::before, .catalogo-sezione--speciale .occhiello::after { display: inline-block; }

/* =========================================================
   HERO STILE ANTINORI — titolo centrato che svanisce scendendo
   ========================================================= */
.hero--slot .hero__in { justify-content: center; }
.hero--slot .hero__testo {
  text-align: center; margin-inline: auto; max-width: 820px;
  will-change: opacity, transform;
}
.hero--slot .hero__testo h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  font-weight: 500; letter-spacing: 0.005em;
}
.hero--slot .hero__sotto { margin-inline: auto; }
.hero--slot .hero__cta { justify-content: center; }

/* =========================================================
   RICETTE FILTRABILI + TRACCIA IL TUO PACCO (spunti Armando)
   ========================================================= */
button.chip { cursor: pointer; font-family: inherit; transition: background 0.2s, color 0.2s, border-color 0.2s; }
button.chip[aria-pressed="true"] { background: var(--grano); border-color: var(--grano); color: #fff; }
.ricette-griglia {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.6rem;
}
.ricetta-card {
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--radius); padding: 1.5rem 1.6rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.ricetta-card__meta {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grano-scuro); font-weight: 600; margin: 0;
}
.ricetta-card h3 { margin: 0; font-size: 1.35rem; }
.ricetta-card__testo { color: var(--inchiostro-soft); font-size: 0.93rem; margin: 0; }
.ricetta-card__passi summary {
  cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--grano-scuro);
}
.ricetta-card__passi ol { margin: 0.6rem 0 0 1.1rem; font-size: 0.9rem; color: var(--inchiostro-soft); }
.ricetta-card__passi li { margin-bottom: 0.35rem; }
.ricetta-card__piede {
  margin-top: auto; padding-top: 0.9rem; border-top: 1px dashed var(--bordo);
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  font-size: 0.9rem; font-weight: 600;
}
.traccia {
  display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.4rem;
}
.traccia input {
  border: 1.5px solid var(--bordo); border-radius: 99px;
  padding: 0.75rem 1.3rem; font-size: 1rem; font-family: inherit;
  min-width: 220px; text-transform: uppercase; background: var(--bianco);
}
.traccia input:focus { outline: 2px solid var(--grano); border-color: var(--grano); }
.traccia__esito {
  margin: 1.1rem auto 0; max-width: 520px;
  font-family: var(--serif); font-style: italic; color: var(--grano-scuro);
}

/* slogan ufficiale nel footer */
.footer__slogan {
  font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; color: var(--grano-chiaro);
  margin: 0.2rem 0 0.6rem;
}

/* =========================================================
   CONGRUENZA ARMANDO — annunci, trust strip, card commerciali
   ========================================================= */
.topbar__annuncio {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity 0.35s; min-width: 0;
}
.trust-strip {
  border-bottom: 1px solid var(--bordo); background: var(--bianco);
}
.trust-strip__in {
  display: flex; gap: clamp(1.2rem, 3.5vw, 2.8rem);
  padding-block: 0.85rem; overflow-x: auto;
  -webkit-overflow-scrolling: touch; justify-content: space-between;
}
.trust-strip span {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--inchiostro-soft); white-space: nowrap; font-weight: 600;
}
.trust-strip svg { width: 18px; height: 18px; color: var(--grano); flex: 0 0 auto; }
.card__categoria {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--inchiostro-soft); margin: 0 0 0.15rem; font-weight: 600;
}
.card__riga--colonna { flex-direction: column; align-items: stretch; gap: 0.55rem; }
.card__riga--colonna .card__prezzo, .card__riga--colonna .card__pieno { text-align: left; }
.card__pieno { color: var(--inchiostro-soft); font-size: 0.95rem; margin-right: 0.3rem; }
.card__prezzo--promo { color: var(--rosso); }
.card__azioni--piena, .card__azioni--piena .btn { width: 100%; }
.card__azioni--piena .stepper { width: 100%; justify-content: space-between; }
.card--esaurita .card__media { opacity: 0.55; }
.card__esaurito, .card__pochi {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: var(--rosso-scuro); color: #fff;
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.35rem 0.8rem; border-radius: 99px; font-weight: 600;
}
/* quando il carrello chiede più di quello che c'è, il messaggio del server
   sta dentro il carrello, dov'è il problema */
.avviso-carrello {
  background: var(--rosso-chiaro, #fbe6e0);
  border: 1px solid rgba(184, 68, 47, 0.35);
  border-radius: 9px; padding: 0.7rem 0.9rem; margin-bottom: 0.9rem;
  font-size: 0.88rem; font-weight: 600; text-align: left; color: #8c2f1e;
}

/* «ne restano pochi» non è un allarme: è un invito, quindi grano e non rosso */
.card__pochi { background: var(--grano); color: var(--inchiostro); }
/* su una scheda stretta i due bollini si toccano: quello del magazzino
   dice una cosa più urgente, l'etichetta di reparto si fa da parte */
.card:has(.card__esaurito) .card__tag,
.card:has(.card__pochi) .card__tag { display: none; }
.ricetta-card__tag { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0; }
.ricetta-card__tag span {
  background: var(--panna-2); border-radius: 99px;
  padding: 0.2rem 0.7rem; font-size: 0.74rem; font-weight: 600;
  color: var(--grano-scuro);
}
/* nel catalogo boutique il blocco prezzo+bottone resta centrato */
.catalogo-sezione .card__riga--colonna { align-items: center; }
.catalogo-sezione .card__riga--colonna .card__prezzo { text-align: center; }
.catalogo-sezione .card__azioni--piena, .catalogo-sezione .card__azioni--piena .btn { width: auto; min-width: 180px; }
.catalogo-sezione .card__categoria { display: none; }

/* =========================================================
   PASTELLO UOVO + MARQUEE DEL LOGO (richiesta del cliente)
   ========================================================= */
:root {
  --uovo: #fdf3d8;
  --uovo-bordo: #f0dfae;
  --verde-pastello: #eaf2e0;
  --terra-pastello: #f9e8dc;
}
.fondo-uovo { background: var(--uovo); }
.fondo-verde-pastello { background: var(--verde-pastello); }
.fondo-terra-pastello { background: var(--terra-pastello); }
.trust-strip { background: var(--uovo); border-bottom-color: var(--uovo-bordo); }
.chip { background: var(--uovo); border-color: var(--uovo-bordo); }
.menu-oggi { background: var(--uovo); border-color: var(--uovo-bordo); }
.novita__voce { border-color: transparent; }
.novita__voce:nth-child(3n + 1) { background: var(--uovo); }
.novita__voce:nth-child(3n + 2) { background: var(--verde-pastello); }
.novita__voce:nth-child(3n)     { background: var(--terra-pastello); }
.recensione { border-color: transparent; }
.fondo-verde-pastello .recensione { background: var(--bianco); }
.catalogo-sezione--speciale {
  background: var(--uovo); border: 1px solid var(--uovo-bordo); border-top: 1px solid var(--uovo-bordo);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.8rem);
}
.linea-tile .foto-slot { background: var(--uovo); }

.marquee {
  overflow: hidden; background: var(--uovo);
  border-block: 1px solid var(--uovo-bordo);
  padding: 0.6rem 0;
}
.marquee__scia {
  display: flex; width: max-content;
  animation: marquee-scorri 26s linear infinite;
}
.marquee:hover .marquee__scia { animation-play-state: paused; }
.marquee__meta { display: flex; }
.marquee__voce {
  display: inline-flex; align-items: center; gap: 1.6rem;
  padding-right: 1.6rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; color: var(--grano-scuro); white-space: nowrap;
}
.marquee__voce img { width: 28px; height: auto; }
.marquee__stella { color: var(--grano); font-style: normal; font-size: 0.85rem; }
@keyframes marquee-scorri { to { transform: translateX(-50%); } }
/* la marquee scorre per tutti: è il richiamo visivo voluto dal cliente */

/* la marquee del logo scorre SEMPRE, anche con "riduci movimento":
   è il richiamo visivo chiesto dal cliente (vince sul blocco globale) */
@media (prefers-reduced-motion: reduce) {
  .marquee__scia { animation-duration: 26s !important; }
}

/* =========================================================
   SIPARIO D'APERTURA — il logo appare, poi lascia la scena
   ========================================================= */
.sipario {
  position: fixed; inset: 0; z-index: 200;
  background: var(--uovo);
  display: grid; place-content: center; justify-items: center; gap: 0.7rem;
  animation: sipario-via 0.6s ease 2s forwards;
  cursor: pointer;
}
.sipario__logo {
  width: clamp(140px, 24vw, 200px); height: auto;
  animation: sipario-logo 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.sipario__motto {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 1.1rem; color: var(--grano-scuro);
  animation: sipario-testo 0.6s ease 0.45s both;
}
@keyframes sipario-logo { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: scale(1); } }
@keyframes sipario-testo { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sipario-via { to { opacity: 0; transform: translateY(-2.5%); visibility: hidden; } }
/* deve giocare anche con "riduci movimento" attivo (vedi marquee) */
@media (prefers-reduced-motion: reduce) {
  .sipario { animation-duration: 0.6s !important; animation-delay: 2s !important; }
  .sipario__logo { animation-duration: 0.8s !important; }
  .sipario__motto { animation-duration: 0.6s !important; animation-delay: 0.45s !important; }
}

/* =========================================================
   PANNELLO OFFERTA DEL MESE — in alto, cattura chi entra
   ========================================================= */
.offerta-mese { background: var(--rosso); color: #fff; }
.offerta-mese__in {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding-block: 0.65rem; flex-wrap: wrap;
  position: relative;
}
.offerta-mese__badge {
  background: var(--grano-chiaro); color: var(--inchiostro);
  font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; padding: 0.3rem 0.8rem; border-radius: 99px;
  animation: offerta-pulsa 2.2s ease-in-out infinite;
}
.offerta-mese__testo { margin: 0; font-size: 0.95rem; }
.offerta-mese__testo strong { font-weight: 700; }
.offerta-mese__cta {
  background: #fff; color: var(--rosso-scuro); border: none;
  font-weight: 700;
}
.offerta-mese__cta:hover { background: var(--panna-2); transform: translateY(-1px); }
.offerta-mese__chiudi {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: rgba(255, 255, 255, 0.7);
  font-size: 1.5rem; line-height: 1; padding: 0.2rem 0.4rem;
}
.offerta-mese__chiudi:hover { color: #fff; }
@keyframes offerta-pulsa {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
/* il badge pulsa anche con "riduci movimento" (richiamo voluto) */
@media (prefers-reduced-motion: reduce) {
  .offerta-mese__badge { animation-duration: 2.2s !important; }
}
@media (max-width: 700px) {
  .offerta-mese__in { padding-right: 1.6rem; text-align: center; }
  .offerta-mese__testo { font-size: 0.86rem; }
}

/* =========================================================
   SFONDO DELL'ETICHETTA + HEADER CENTRATO (richiesta cliente)
   Colori presi dal PDF dell'etichetta: base #F1EAD7, riga #EDE4CD
   ========================================================= */
:root {
  --carta-etichetta: #F1EAD7;
  --carta-riga: #EAE1C9;
  --trama-etichetta: repeating-linear-gradient(
    180deg,
    var(--carta-etichetta) 0px,
    var(--carta-etichetta) 11px,
    var(--carta-riga) 12px,
    var(--carta-riga) 13px,
    var(--carta-etichetta) 14px
  );
}
body { background: var(--trama-etichetta); background-attachment: fixed; }
/* le sezioni chiare lasciano vedere la trama; il bianco resta per le card */
.sezione, .sezione--stretta { background: transparent; }
.fondo-crema, .fondo-uovo { background: rgba(255, 255, 255, 0.55); }
.fondo-verde-pastello { background: rgba(234, 242, 224, 0.6); }
.fondo-terra-pastello { background: rgba(249, 232, 220, 0.55); }
.topbar { background: var(--inchiostro); }

/* ---------- header a due piani, logo grande e centrale ---------- */
.header { background: rgba(251, 247, 239, 0.94); }
.header__alto {
  max-width: var(--max); margin-inline: auto;
  padding: 0.7rem var(--gutter) 0.3rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem;
}
.header__alto .burger { justify-self: start; }
.header__alto .header__azioni { justify-self: end; }
.marchio {
  grid-column: 2; display: flex; flex-direction: column; align-items: center;
  gap: 0.1rem; text-decoration: none; text-align: center;
}
.marchio img { width: clamp(150px, 21vw, 240px); height: auto; }
.marchio__nome {
  font-family: var(--serif); font-weight: 600; color: var(--inchiostro);
  font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.1; letter-spacing: -0.01em;
}
.marchio__nome sup { font-size: 0.42em; vertical-align: super; color: var(--grano-scuro); }
.marchio__claim {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.72rem, 1.6vw, 0.88rem); color: var(--grano-scuro);
  max-width: 34ch; line-height: 1.35;
}
.header .nav {
  margin: 0 auto; justify-content: center; flex-wrap: wrap;
  padding: 0.35rem var(--gutter) 0.6rem; gap: 1.4rem;
  border-top: 1px solid var(--bordo);
}

/* ---------- mega menu a tre colonne ---------- */
.nav__pannello-in {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0 2rem; padding-block: 1.8rem 2rem; text-align: left;
}
.nav__colonna { display: flex; flex-direction: column; gap: 0.1rem; }
.nav__titolo {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--grano-scuro); font-weight: 700;
  margin: 0 0 0.5rem; padding-left: 0.85rem;
}
.nav__pannello a strong { font-size: 1rem; }

/* ---------- mobile: menu a tutta pagina con tutte le sezioni ---------- */
@media (max-width: 900px) {
  .header .nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88%);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 1.2rem 1.4rem 2rem; overflow-y: auto;
    background: var(--panna); border-top: 0;
    box-shadow: -12px 0 40px rgba(43, 33, 24, 0.2);
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 95;
  }
  .header .nav[data-aperto] { transform: translateX(0); }
  .burger { display: flex; }
  .header .nav > a {
    padding: 0.9rem 0; border-bottom: 1px solid var(--bordo);
    font-size: 1.02rem; font-weight: 600;
  }
  .nav__tendina { order: 9; }
  .marchio__claim { display: none; }
  .offerta-mese__in { padding-block: 0.5rem; gap: 0.5rem; }
  .offerta-mese__testo { font-size: 0.8rem; }
  .offerta-mese__badge { font-size: 0.6rem; }
}
@media (max-width: 520px) {
  .header__alto { padding-inline: 0.9rem; }
  .marchio img { width: 104px; }
  .marchio__nome { font-size: 1.15rem; }
}

/* =========================================================
   I TRE RIQUADRI + LA GIOSTRA DEI FORMATI
   ========================================================= */
.riquadri {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(1rem, 2.5vw, 1.6rem); align-items: stretch;
}
.riquadro {
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column; gap: 0.5rem;
  box-shadow: var(--ombra);
}
.riquadro__eyebrow {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grano-scuro); font-weight: 700; margin: 0;
}
.riquadro h3 { margin: 0; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.riquadro__testo { color: var(--inchiostro-soft); font-size: 0.93rem; margin: 0; }
.riquadro .btn { align-self: flex-start; margin-top: auto; }
.riquadro--ripieni { background: var(--uovo); border-color: var(--uovo-bordo); }
.riquadro--tavola { background: var(--verde-pastello); border-color: transparent; }
.riquadro__disegno { color: var(--grano); margin: 0.6rem 0 1rem; }
.riquadro__disegno svg { width: 100%; max-width: 190px; height: auto; }
.riquadro__foto {
  margin: 0.7rem 0 1rem; border-radius: var(--radius-sm); overflow: hidden;
  aspect-ratio: 16 / 10;
}
.riquadro__foto img { width: 100%; height: 100%; object-fit: cover; }

.giostra { overflow: hidden; margin: 0.8rem 0 1.1rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.giostra__nastro { display: flex; width: max-content; gap: 1.1rem; animation: giostra-scorri 32s linear infinite; }
.giostra:hover .giostra__nastro { animation-play-state: paused; }
.giostra__voce { flex: 0 0 auto; width: 70px; text-align: center; text-decoration: none; color: var(--inchiostro); }
.giostra__disco {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 0.3rem;
  border-radius: 50%; background: var(--uovo); border: 1px solid var(--uovo-bordo);
  overflow: hidden; color: var(--grano);
}
.giostra__disco svg { width: 26px; height: 26px; }
.giostra__disco img { width: 100%; height: 100%; object-fit: cover; }
.giostra__nome { font-size: 0.68rem; font-weight: 600; line-height: 1.2; display: block; }
@keyframes giostra-scorri { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .giostra__nastro { animation-duration: 32s !important; }
}

/* =========================================================
   HOME SHOP-FIRST — i tre riquadri sono la prima cosa
   (semplicità, eleganza, efficacia: niente fronzoli)
   ========================================================= */
#tre-riquadri { padding-top: clamp(1.4rem, 3vw, 2.2rem); }
#tre-riquadri .riquadro { min-height: clamp(320px, 42vh, 430px); }
#tre-riquadri .riquadro h2 { font-size: clamp(1.45rem, 2.8vw, 1.95rem); margin: 0; }
#tre-riquadri .riquadro .btn { width: 100%; text-align: center; }
/* sipario più svelto: si entra subito nello shop */
.sipario { animation-delay: 1.1s !important; }
/* alleggerimento generale: più bianco, meno decorazione */
.card { box-shadow: none; }
.card:hover { box-shadow: var(--ombra); }
.recensione { background: var(--bianco); border-color: var(--bordo); }
.stelle { font-size: 1.15rem; letter-spacing: 0.18em; }

/* =========================================================
   LE TRE FASCE — grandi, una sotto l'altra: si scoprono scorrendo
   ========================================================= */
.fascia { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.fascia--shop { background: rgba(255, 255, 255, 0.72); }
.fascia--ripieni { background: var(--uovo); }
.fascia--tavola { background: var(--verde-pastello); }
.fascia__in {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
.fascia__in--inverso .fascia__testo { order: 2; }
.fascia__testo { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.fascia__eyebrow {
  font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--grano-scuro); font-weight: 700; margin: 0;
}
.fascia__testo h2 {
  font-size: clamp(2.1rem, 5.5vw, 3.4rem); margin: 0; line-height: 1.08;
}
.fascia__lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: var(--inchiostro-soft); margin: 0 0 0.6rem; max-width: 46ch; }
.btn--grande { padding: 1rem 2.4rem; font-size: 1.02rem; }
.fascia__foto {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombra-alta);
  aspect-ratio: 4 / 3;
}
.fascia__foto img { width: 100%; height: 100%; object-fit: cover; }
.fascia__foto--vuota {
  border: 1.5px dashed var(--uovo-bordo); box-shadow: none;
  background: rgba(255, 255, 255, 0.5);
}
/* la giostra dentro la fascia è più grande */
.fascia .giostra { margin: 0; }
.fascia .giostra__voce { width: 108px; }
.fascia .giostra__disco { width: 94px; height: 94px; }
.fascia .giostra__disco svg { width: 40px; height: 40px; }
.fascia .giostra__nome { font-size: 0.8rem; }
@media (max-width: 820px) {
  .fascia__in { grid-template-columns: 1fr; gap: 1.8rem; }
  .fascia__in--inverso .fascia__testo { order: 0; }
  .fascia { padding-block: clamp(2.6rem, 8vw, 4rem); }
}

/* --- fasce: stessa altezza, foto verticali valorizzate --- */
.fascia { display: grid; align-items: center; min-height: min(74vh, 600px); }
.fascia__in { width: 100%; }
.fascia__foto {
  aspect-ratio: 4 / 5; max-width: 340px; margin-inline: auto;
  border-radius: var(--radius);
}
.fascia--shop .fascia__visivo {
  background: var(--uovo); border: 1px solid var(--uovo-bordo);
  border-radius: var(--radius); padding: 1.6rem 0;
}
.fascia .giostra { mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
@media (max-width: 820px) {
  .fascia { min-height: 0; }
  .fascia__foto { max-width: 260px; }
}

/* =========================================================
   FASCE INCORNICIATE + GIOSTRE GRANDI, in stile etichetta
   ========================================================= */
.fascia__in {
  position: relative;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--grano);
  border-radius: 4px;
  padding: clamp(1.6rem, 4vw, 3rem);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}
/* la doppia riga sottile dell'etichetta */
.fascia__in::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(201, 138, 20, 0.35); border-radius: 2px;
  pointer-events: none;
}
.fascia--ripieni .fascia__in { background: rgba(255, 255, 255, 0.5); }
.fascia--tavola .fascia__in { background: rgba(255, 255, 255, 0.55); }

/* --- giostra più grande, dischi in cornice come i tondi dell'etichetta --- */
.giostra__voce { width: 132px; }
.giostra__disco {
  width: 116px; height: 116px; margin-bottom: 0.5rem;
  background: var(--bianco); border: 1.5px solid var(--grano);
  box-shadow: 0 0 0 4px rgba(201, 138, 20, 0.12);
}
.giostra__disco .forma { width: 74%; height: 74%; color: var(--grano); }
.giostra__nome {
  font-size: 0.8rem; background: var(--grano-chiaro); color: var(--inchiostro);
  border-radius: 3px; padding: 0.16rem 0.4rem; display: inline-block;
  max-width: 100%; font-weight: 700; letter-spacing: 0.01em;
}
.giostra__nastro { gap: 1.5rem; }
.giostra--sotto { margin-top: 1.2rem; }
.giostra--sotto .giostra__voce { width: 104px; }
.giostra--sotto .giostra__disco { width: 88px; height: 88px; }
.giostra--sotto .giostra__nome { font-size: 0.72rem; }
@media (max-width: 820px) {
  .giostra__voce { width: 108px; }
  .giostra__disco { width: 92px; height: 92px; }
}

/* --- la giostra scorre da sola: il visitatore non la trascina --- */
.giostra {
  overflow: hidden; touch-action: pan-y; overscroll-behavior-x: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* =========================================================
   LE TRE CORNICI + LA VETRINA CHE SCORRE  (v26)
   Le tre fasce non hanno più un fondo a tutta larghezza: sono
   tre cornici appoggiate sulla carta dell'etichetta, che resta
   visibile tutto intorno. Dentro la prima, i formati scorrono
   come nelle vetrine dei pastifici: schede pulite, passo lento
   e costante, dissolvenza ai bordi, nessun trascinamento.
   ========================================================= */

/* --- 1 · via i fondi pieni: sotto si vede lo sfondo etichetta --- */
.fascia,
.fascia--shop,
.fascia--ripieni,
.fascia--tavola { background: transparent; }
.fascia {
  min-height: 0;
  padding-block: clamp(0.9rem, 2.2vw, 1.6rem);
  padding-inline: var(--gutter);
}
#tre-riquadri { padding-block: clamp(1.6rem, 4vw, 2.8rem); }

/* --- 2 · la cornice: carta panna e doppio filetto oro --- */
.fascia__in {
  background: linear-gradient(180deg, #fffdf8, var(--panna));
  border: 1px solid rgba(201, 138, 20, 0.5);
  border-radius: 6px;
  padding: clamp(1.5rem, 3.4vw, 2.8rem);
  box-shadow: 0 1px 2px rgba(43, 33, 24, 0.05), 0 18px 46px rgba(43, 33, 24, 0.11);
}
.fascia__in::before { inset: 7px; border-color: rgba(201, 138, 20, 0.26); border-radius: 3px; }
.fascia--ripieni .fascia__in { background: linear-gradient(180deg, #fffdf5, var(--uovo)); }
.fascia--tavola .fascia__in { background: linear-gradient(180deg, #fdfefb, #eef4e6); }

/* --- 3 · lo shop: testo centrato, vetrina a tutta cornice --- */
.fascia__in--pieno { grid-template-columns: 1fr; gap: clamp(1.2rem, 2.6vw, 1.8rem); }
.fascia__in--pieno .fascia__testo { align-items: center; text-align: center; }
.fascia__in--pieno .fascia__lead { margin-bottom: 0; }
.fascia__azione { display: flex; justify-content: center; }

/* --- 4 · la vetrina che scorre --- */
.fascia__testo, .fascia__visivo { min-width: 0; }   /* senza, il nastro sfonda la cornice */
.fascia--shop .fascia__visivo { background: none; border: 0; padding: 0; }
.giostra {
  position: relative; width: 100%; min-width: 0; overflow: hidden;
  margin: 0; padding: 0.3rem 0 0.5rem;
  touch-action: pan-y; overscroll-behavior-x: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%);
}
.giostra__nastro { gap: 0.85rem; align-items: stretch; }
.giostra .giostra__voce,
.fascia .giostra__voce {
  width: 172px; display: flex; flex-direction: column; gap: 0.55rem;
  padding: 0.5rem 0.5rem 0.8rem; border-radius: 10px;
  background: var(--bianco); border: 1px solid var(--bordo);
  box-shadow: 0 1px 2px rgba(43, 33, 24, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.giostra__voce:hover { transform: translateY(-4px); border-color: var(--grano); box-shadow: var(--ombra); }
.giostra .giostra__disco,
.fascia .giostra__disco {
  width: 100%; height: auto; aspect-ratio: 1; margin: 0;
  border: 0; border-radius: 7px; box-shadow: none;
  background: var(--panna-2); overflow: hidden;
}
.giostra__disco img { width: 100%; height: 100%; object-fit: cover; }
.giostra .giostra__disco .forma,
.fascia .giostra__disco svg { width: 56%; height: 56%; color: var(--grano); }
.giostra .giostra__nome,
.fascia .giostra__nome {
  background: none; padding: 0; border-radius: 0;
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; line-height: 1.25; color: var(--inchiostro);
}
.giostra__prezzo {
  display: block; margin-top: 0.18rem;
  font-size: 0.82rem; font-weight: 700; color: var(--grano-scuro);
}
@media (max-width: 820px) {
  .giostra .giostra__voce, .fascia .giostra__voce { width: 138px; }
  .giostra .giostra__nome, .fascia .giostra__nome { font-size: 0.7rem; }
  .giostra {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
}
/* la vetrina deve scorrere anche con "riduci movimento": è il
   modo in cui il visitatore vede tutti i formati senza toccare */
@media (prefers-reduced-motion: reduce) {
  .giostra__nastro { animation-name: giostra-scorri !important; }
}

/* =========================================================
   LA VETRINA — quadrati che avanzano tre alla volta  (v27)
   Impianto delle vetrine dei pastifici online: scheda quadrata,
   nome, prezzo, disponibilità e il pulsante che porta allo shop.
   Avanza da sola ogni 5 s; con le frecce si va avanti e indietro;
   non si trascina.
   ========================================================= */
.carosello { position: relative; --vg: 0.8rem; display: grid; gap: 0.8rem; }
.carosello__telaio { overflow: hidden; touch-action: pan-y; overscroll-behavior-x: none; padding: 5px 0; margin: -5px 0; }
.carosello__pista {
  display: flex; gap: var(--vg); align-items: stretch;
  width: max-content; will-change: transform;
}

.scheda {
  flex: 0 0 var(--sw, 200px);
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.scheda:hover, .scheda:focus-visible { transform: translateY(-4px); border-color: var(--grano); box-shadow: var(--ombra); }
.scheda__foto {
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  background: var(--panna-2); border-bottom: 1px solid var(--bordo);
}
.scheda__foto img { width: 100%; height: 100%; object-fit: cover; }
.scheda__foto svg { width: 46%; height: 46%; color: var(--grano); }
.scheda__corpo { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.7rem 0.7rem; flex: 1; }
.scheda__nome {
  font-family: var(--serif); font-size: 0.92rem; font-weight: 700;
  line-height: 1.22; color: var(--inchiostro);
}
.scheda__marca { font-size: 0.72rem; color: #9a8f82; }
.scheda__prezzo { font-size: 0.98rem; font-weight: 800; margin-top: 0.2rem; }
.scheda__stato {
  display: flex; gap: 0.45rem; font-size: 0.78rem; line-height: 1.35;
  color: var(--inchiostro-soft); margin-top: 0.3rem;
}
.scheda__pallino { width: 8px; height: 8px; border-radius: 50%; background: var(--verde); flex: none; margin-top: 0.34rem; }
.scheda__piede {
  border-top: 1px solid var(--bordo); padding: 0.45rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  color: var(--rosso); transition: background 0.25s ease, color 0.25s ease;
}
.scheda__piede svg { width: 17px; height: 17px; flex: none; }
.scheda__piede em { font-style: normal; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.scheda:hover .scheda__piede { background: var(--rosso); color: #fff; }

.carosello__frec {
  position: absolute; top: 38%; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--bianco); border: 1px solid var(--bordo); color: var(--inchiostro);
  display: grid; place-items: center; padding: 0;
  box-shadow: 0 2px 10px rgba(43, 33, 24, 0.14);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.carosello__frec svg { width: 20px; height: 20px; }
.carosello__frec:hover { background: var(--grano); border-color: var(--grano); color: #fff; }
.carosello__frec--pre { left: -30px; }
.carosello__frec--pro { right: -30px; }

@media (max-width: 900px) { .carosello { --vg: 0.8rem; } .carosello__frec { top: 32%; width: 38px; height: 38px; } }
@media (max-width: 560px) {
  .carosello__frec--pre { left: -14px; }
  .carosello__frec--pro { right: -14px; }
  .scheda__nome { font-size: 1rem; }
}

/* --- il riquadro delle recensioni vere --- */
.google-box {
  max-width: 720px; margin-inline: auto; text-align: center;
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius);
  padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--ombra);
}
.google-box__occhiello {
  margin: 0 0 0.5rem; font-size: 0.74rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700; color: var(--grano-scuro);
}
.google-box__testo { margin: 0 auto 1.4rem; max-width: 52ch; color: var(--inchiostro-soft); }
.google-box__azioni { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.google-box__social { margin: 1.2rem 0 0; font-size: 0.88rem; color: var(--inchiostro-soft); }
.google-box__social a { color: var(--grano-scuro); font-weight: 600; }
.recensione__stelle { margin: 0 0 0.5rem; color: var(--grano); letter-spacing: 0.14em; }
.recensione__fonte { display: inline-block; margin-top: 0.6rem; font-size: 0.8rem; color: var(--grano-scuro); font-weight: 600; }

/* =========================================================
   LA TENDINA DELLO SHOP — una riga di voci, niente altro (v28)
   Prima erano tre colonne che ripetevano il menù principale:
   più roba da leggere, non più aiuto. Ora sono solo le cose
   che si possono comprare.
   ========================================================= */
.nav__pannello-in {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0.3rem 0.4rem; padding-block: 1.15rem; grid-template-columns: none;
}
.nav__pannello a {
  display: inline-block; padding: 0.5rem 0.95rem; border-radius: 999px;
  font-size: 0.97rem; color: var(--inchiostro); white-space: nowrap;
  border-bottom: none; transition: background 0.2s ease, color 0.2s ease;
}
.nav__pannello a:hover { background: var(--panna-2); color: var(--grano-scuro); }
.nav__pannello a em {
  font-style: normal; font-size: 0.78rem; color: var(--inchiostro-soft);
  margin-left: 0.35rem; padding: 0.1rem 0.42rem; border-radius: 999px;
  background: var(--uovo); border: 1px solid var(--uovo-bordo);
}
@media (max-width: 900px) {
  .nav__pannello-in { display: block; padding: 0.2rem 0 0.6rem 0.9rem; }
  .nav__pannello a {
    display: block; padding: 0.6rem 0; border-radius: 0;
    border-bottom: 1px solid var(--bordo); white-space: normal;
    font-size: 0.95rem; color: var(--inchiostro-soft);
  }
  .nav__pannello a:hover { background: none; }
}

/* =========================================================
   CORREZIONI E RIFINITURE  (v29)
   ========================================================= */

/* 1 · la fascia scura della filiera era diventata illeggibile:
   il fondo etichetta (`.sezione { background: transparent }`) le aveva
   tolto il nero sotto il testo chiaro. Glielo ridiamo. */
.sezione.fondo-scuro, .fondo-scuro { background: var(--inchiostro); }

/* 2 · il marchio registrato accanto al logo */
.marchio__logo { position: relative; display: inline-block; flex: none; line-height: 0; }
/* la ® accanto al nome: nel logo c'è già, ma a quella dimensione non si
   legge — questa è quella che si vede davvero sul sito */
.marchio__r {
  font-style: normal; font-size: 0.42em; font-weight: 700;
  vertical-align: super; line-height: 1; margin-left: 0.1em;
  color: var(--grano-scuro);
}
@media (max-width: 700px) { .marchio__r { right: -8px; font-size: 0.66rem; } }

/* 3 · LO SHOP — le schede come quelle della home: foto piena,
   riquadro bianco, prezzo e pulsante sempre in evidenza.
   Il difetto vero era la foto: stava dentro un <a> senza altezza,
   quindi `height:100%` non attaccava e restava mezzo riquadro vuoto. */
.card__media > a { display: block; width: 100%; height: 100%; }

.catalogo-sezione .card {
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(43, 33, 24, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.catalogo-sezione .card:hover {
  transform: translateY(-4px); border-color: var(--grano); box-shadow: var(--ombra-alta);
}
.catalogo-sezione .card__media {
  aspect-ratio: 1; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--bordo);
}
.catalogo-sezione .card:hover .card__media { box-shadow: none; }
.catalogo-sezione .card__corpo {
  padding: 0.85rem 0.95rem 1rem; text-align: left; align-items: stretch;
}
.catalogo-sezione .card__categoria { display: none; }
.catalogo-sezione .card__nome { font-size: 1.05rem; line-height: 1.25; margin: 0 0 0.1rem; }
.catalogo-sezione .card__formato {
  font-size: 0.78rem; letter-spacing: 0; text-transform: none;
  color: #9a8f82; margin: 0 0 0.5rem;
}
.catalogo-sezione .card__riga { flex-direction: column; align-items: stretch; gap: 0.6rem; margin-top: auto; }
.catalogo-sezione .card__prezzo,
.catalogo-sezione .card__riga--colonna .card__prezzo {
  font-family: var(--sans); font-size: 1.12rem; font-weight: 800; text-align: left;
}
.catalogo-sezione .card__azioni .btn { width: 100%; }
.catalogo-sezione .card__tag { top: 0.6rem; left: 0.6rem; }

/* la griglia respira meno: più schede in vista, più shop */
.catalogo-sezione .griglia-prodotti {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1.6rem 1.1rem;
}

/* il segnaposto dei formati senza foto resta, ma pieno e centrato */
.catalogo-sezione .card__media--disegno { border-bottom: 1px solid var(--bordo); }
.catalogo-sezione .card__disegno svg { width: 54px; height: 54px; }

/* sul telefono due schede per riga: si vede più shop in una schermata */
@media (max-width: 560px) {
  .catalogo-sezione .griglia-prodotti { grid-template-columns: repeat(2, 1fr); gap: 1.1rem 0.7rem; }
  .catalogo-sezione .card__corpo { padding: 0.7rem 0.7rem 0.8rem; }
  .catalogo-sezione .card__nome { font-size: 0.94rem; }
  .catalogo-sezione .card__formato { font-size: 0.72rem; margin-bottom: 0.4rem; }
  .catalogo-sezione .card__prezzo,
  .catalogo-sezione .card__riga--colonna .card__prezzo { font-size: 1rem; }
  .catalogo-sezione .card__azioni .btn { font-size: 0.76rem; padding: 0.6rem 0.4rem; }
  .catalogo-sezione .card__tag { font-size: 0.58rem; padding: 0.2rem 0.45rem; }
}
/* sulle schede strette il pulsante dice solo "Aggiungi": il testo lungo
   usciva dalla scheda */
@media (max-width: 560px) {
  .catalogo-sezione .card__azioni .btn__coda { display: none; }
  .catalogo-sezione .card__tag { white-space: normal; max-width: 88%; line-height: 1.25; }
}
/* il min-width di 180px teneva il pulsante fuori dalla scheda quando la
   griglia va a due colonne sul telefono */
@media (max-width: 560px) {
  .catalogo-sezione .card__azioni--piena,
  .catalogo-sezione .card__azioni--piena .btn { min-width: 0; width: 100%; }
}

/* =========================================================
   PALETTE DEL MARCHIO  (v75)
   Presa dai materiali "Mamma Pasta Tavola Calda" del cliente:
   arancio caldo del marchio, panna, crema, verde salvia, azzurro
   polvere, bruno morbido per i testi. Restano tinte tenui — ma
   l'arancio è vivo, perché è il colore con cui il pastificio si
   presenta già sui suoi materiali.
   ========================================================= */
:root {
  --arancio: #e4652c;        /* il colore del marchio */
  --arancio-scuro: #c6501c;  /* hover e testi arancio su chiaro */
  --arancio-tenue: #fbe0d2;  /* fondi e pastiglie */
  --rosso: var(--arancio);
  --rosso-scuro: var(--arancio-scuro);
  --rosso-testo: var(--arancio-scuro);
  --rosso-promo: var(--arancio);
  --verde: #c9d9b6;          /* salvia */
  --verde-scuro: #b3c79d;
  --verde-testo: #4f7a3c;
  --verde-pastello: #dde8d0;
  --azzurro: #cbe0ea;        /* azzurro polvere */
  --azzurro-testo: #4e7d96;
  --grano: #efc75e;          /* il giallo delle pennellate */
  --grano-chiaro: #f7e7c6;
  --grano-scuro: #8a6b1f;
  --terra: #7a6753;
  --carta-scura: #f3e7d2;
  --inchiostro: #4a3b2a;     /* bruno morbido, non nero */
  --inchiostro-soft: #7b6a55;
}

/* --- pulsanti: fondo pastello, scritta scura --- */
.btn--acquista {
  background: var(--arancio); color: #fff;
  box-shadow: 0 6px 16px rgba(228, 101, 44, 0.3);
}
.btn--acquista:hover { background: var(--arancio-scuro); }
.btn--grano {
  background: var(--grano); color: var(--inchiostro);
  box-shadow: 0 6px 16px rgba(220, 187, 119, 0.4);
}
.btn--grano:hover { background: #d0aa60; }
.btn--verde { background: var(--verde); color: var(--inchiostro); }
.btn--ghost:hover { background: var(--panna-3); color: var(--inchiostro); border-color: var(--grano); }

/* --- la barra in alto e il footer non sono più neri --- */
.topbar { background: var(--carta-scura); color: var(--inchiostro-soft); }
.topbar a:hover { color: var(--grano-scuro); }
.footer { background: var(--carta-scura); color: var(--inchiostro-soft); }
.footer h4 { color: var(--grano-scuro); }
.footer a:hover { color: var(--grano-scuro); }
.footer__chiusura { border-top-color: rgba(43, 33, 24, 0.12); color: rgba(43, 33, 24, 0.5); }

/* --- la fascia "laboratorio" della filiera: verde salvia, testo scuro --- */
.sezione.fondo-scuro, .fondo-scuro { background: var(--verde-pastello); color: var(--inchiostro-soft); }
.fondo-scuro h2, .fondo-scuro .elenco-spunte li strong { color: var(--inchiostro); }
.fondo-scuro .lead, .fondo-scuro p, .fondo-scuro .elenco-spunte li { color: var(--inchiostro-soft); }
.fondo-scuro .occhiello { color: var(--grano-scuro); }
.fondo-scuro .occhiello::before, .fondo-scuro .occhiello::after { background: var(--grano-scuro); }
.elenco-spunte li::before {
  background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232b2118' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 0.72rem no-repeat;
}

/* --- offerte e pannelli --- */
.offerta-mese { background: var(--rosso); color: var(--inchiostro); }
.offerta-mese__chiudi { color: rgba(43, 33, 24, 0.55); }
.offerta-mese__chiudi:hover { color: var(--inchiostro); }
.offerta--verde { background: var(--verde-pastello); color: var(--inchiostro-soft); }
.offerta--verde h2 { color: var(--inchiostro); }
.offerta--verde p { color: var(--inchiostro-soft); }
.offerta--verde .occhiello { color: var(--verde-testo); }
.offerta--verde .occhiello::before, .offerta--verde .occhiello::after { background: var(--verde-testo); }

/* --- blocco rivendite e ristoranti --- */
.b2b { background: linear-gradient(135deg, #cfe0c4, #e6efdd); color: var(--inchiostro-soft); }
.b2b h2 { color: var(--inchiostro); }
.b2b p { color: var(--inchiostro-soft); }
.b2b .btn--chiaro {
  background: rgba(255, 255, 255, 0.6); border-color: var(--inchiostro-soft);
  color: var(--inchiostro); backdrop-filter: none;
}
.b2b .btn--chiaro:hover { background: #fff; }

/* --- pastiglie, filtri, messaggi --- */
.filtro[aria-pressed="true"] {
  background: var(--grano-chiaro); border-color: var(--grano); color: var(--inchiostro);
}
button.chip[aria-pressed="true"] { background: var(--grano); border-color: var(--grano); color: var(--inchiostro); }
.brindisi { background: var(--grano-chiaro); color: var(--inchiostro); }
.carrello-btn__conta { color: var(--inchiostro); }
.card__esaurito { background: var(--rosso-scuro); color: var(--inchiostro); }

/* --- dove il colore fa da testo serve una tinta più profonda --- */
.card__prezzo--promo, .scheda__piede { color: var(--rosso-testo); }
.scheda:hover .scheda__piede { background: var(--rosso); color: var(--inchiostro); }
.carosello__frec:hover { background: var(--grano); border-color: var(--grano); color: var(--inchiostro); }
.footer__slogan { color: var(--grano-scuro); }

/* --- leggibilità: i grigi chiari non arrivavano al contrasto minimo --- */
.scheda__marca, .catalogo-sezione .card__formato { color: #736a5f; }
.offerta-mese__cta { background: var(--bianco); color: var(--inchiostro); border-color: var(--bianco); }
.offerta-mese__cta:hover { background: var(--panna); }

/* =========================================================
   MENU DEL TELEFONO  (v38)
   Il pannello dello Shop restava sempre aperto e il tocco su
   «Shop» chiudeva l'intero menu; il pannello si poteva chiudere
   solo aprendo un link, perché il burger finiva sotto al menu.
   Ora: tendina a fisarmonica, velo che chiude toccando fuori,
   pulsante di chiusura, blocco dello scorrimento dietro.
   ========================================================= */
@media (max-width: 900px) {
  .header .nav { z-index: 96; padding-top: 3.6rem; }

  /* la voce "Shop" apre e chiude il suo elenco */
  .nav__tendina { flex-direction: column; align-items: stretch; }
  .header .nav__tendina > a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.9rem 0; border-bottom: 1px solid var(--bordo);
    font-size: 1.02rem; font-weight: 600;
  }
  .nav__caret { display: block; width: 12px; height: 8px; transition: transform 0.25s ease; }
  .nav__pannello {
    position: static; transform: none; opacity: 1; visibility: visible;
    border: 0; box-shadow: 0 0; background: none; padding: 0; margin: 0;
    display: none;
  }
  .nav__pannello::before { display: none; }
  .nav__tendina.aperta .nav__pannello { display: block; }
  .nav__pannello-in {
    display: block; padding: 0.2rem 0 0.6rem 0.9rem; max-width: none;
  }
  .nav__pannello a {
    display: block; padding: 0.62rem 0; border-radius: 0;
    border-bottom: 1px solid var(--bordo); white-space: normal;
    font-size: 0.95rem; color: var(--inchiostro-soft);
  }
  .nav__pannello a:last-child { border-bottom: 0; }

  /* il velo dietro al menu: si tocca e il menu si chiude */
  .nav__velo {
    position: fixed; inset: 0; z-index: 94; border: 0; padding: 0;
    background: rgba(43, 33, 24, 0.35); backdrop-filter: blur(2px);
    opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
  }
  body[data-nav-aperto] .nav__velo { opacity: 1; visibility: visible; }
  body[data-nav-aperto] { overflow: hidden; }

  /* la X dentro al menu */
  .nav__chiudi {
    position: absolute; top: 0.9rem; right: 1.1rem;
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--bordo); background: var(--bianco);
    display: grid; place-items: center; cursor: pointer; padding: 0;
    color: var(--inchiostro);
  }
  .nav__chiudi svg { width: 17px; height: 17px; }
}
@media (min-width: 901px) {
  .nav__velo, .nav__chiudi { display: none; }
}

/* =========================================================
   L'APERTURA  (v71) — impianto "vetrina"
   Fondo chiaro di carta rigata come l'etichetta, a sinistra il
   messaggio con l'offerta e il pulsante, a destra i pacchi sparsi
   con i segni di spunta e il bollo dello sconto.
   ========================================================= */
.apertura {
  background: var(--carta-etichetta);
  background-image: repeating-linear-gradient(180deg,
    rgba(43, 33, 24, 0.05) 0 1px, transparent 1px 13px);
  border-bottom: 1px solid var(--uovo-bordo);
  overflow: hidden;
}
.apertura__in {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center; gap: clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(2.4rem, 6vw, 4.2rem);
}
.apertura__testo { text-align: center; }
.apertura__occhiello {
  margin: 0 0 0.2rem; font-family: var(--sans);
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--grano-scuro);
}
.apertura__slogan {
  margin: 0 0 0.8rem; font-family: var(--serif); font-style: italic;
  font-size: 1rem; color: var(--inchiostro-soft);
}
.apertura__titolo {
  margin: 0 0 1rem; font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1;
  letter-spacing: -0.015em; color: var(--inchiostro);
}
.apertura__lead {
  margin: 0 auto 1.7rem; max-width: 44ch;
  font-size: clamp(0.98rem, 1.3vw, 1.08rem); line-height: 1.6; color: var(--inchiostro-soft);
}
.apertura__lead strong { color: var(--inchiostro); font-weight: 700; }
.apertura__lead s { color: #a2968a; }

.apertura__scena { position: relative; aspect-ratio: 16 / 10; }
.apertura__pacco {
  position: absolute; height: auto; display: block;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 12px 18px rgba(43, 33, 24, 0.22));
}
.apertura__spunta {
  position: absolute; width: 4.2%; min-width: 26px; color: var(--rosso-promo);
  transform: rotate(-6deg);
}
.apertura__spunta svg { width: 100%; height: auto; display: block; }
.apertura__bollo {
  container-type: inline-size;
  position: absolute; right: -1%; top: 0;
  width: clamp(100px, 19%, 172px); aspect-ratio: 1;
  border-radius: 50%; background: var(--rosso-promo); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.1rem; text-align: center; line-height: 1;
  box-shadow: 0 12px 26px -8px rgba(184, 68, 47, 0.5);
}
.apertura__bollo strong { font-size: 26cqw; font-weight: 800; letter-spacing: -0.02em; }
.apertura__bollo em {
  font-family: var(--serif); font-style: italic; font-size: 13cqw; opacity: 0.95;
}

@media (max-width: 900px) {
  .apertura__in { grid-template-columns: 1fr; gap: 1.6rem; }
  .apertura__scena { aspect-ratio: 4 / 3; order: 2; }
  .apertura__bollo { width: clamp(84px, 22%, 130px); }
}
@media (max-width: 560px) {
  .apertura__scena { aspect-ratio: 1 / 1; }
  .apertura__testo .btn { width: 100%; text-align: center; }
}

.vantaggi { background: var(--bianco); border-bottom: 1px solid var(--bordo); }
.vantaggi__in {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem; padding-block: 1.1rem;
}
.vantaggio {
  display: flex; flex-direction: column; gap: 0.1rem; text-align: center;
  padding-inline: 0.5rem;
}
.vantaggio + .vantaggio { border-left: 1px solid var(--bordo); }
.vantaggio strong { font-size: 0.92rem; letter-spacing: 0.01em; }
.vantaggio span { font-size: 0.78rem; color: var(--inchiostro-soft); line-height: 1.35; }
@media (max-width: 780px) {
  .vantaggi__in { grid-template-columns: repeat(2, 1fr); gap: 0.9rem 0.4rem; }
  .vantaggio:nth-child(3) { border-left: 0; }
  .vantaggio strong { font-size: 0.85rem; }
  .vantaggio span { font-size: 0.72rem; }
}

/* --- sul telefono le due file devono starci tutte e due --- */
@media (max-width: 620px) {
  .carosello { --vg: 0.55rem; gap: 0.55rem; }
  .scheda__foto { aspect-ratio: 4 / 3; }
  .scheda__corpo { padding: 0.45rem 0.5rem 0.5rem; }
  .scheda__nome { font-size: 0.8rem; }
  .scheda__marca { font-size: 0.66rem; }
  .scheda__prezzo { font-size: 0.88rem; margin-top: 0.12rem; }
  .scheda__piede { padding: 0.36rem; }
  .scheda__piede svg { width: 15px; height: 15px; }
  .scheda__piede em { font-size: 0.68rem; }
  .fascia--shop .fascia__in { padding-inline: 0.9rem; }
}

/* =========================================================
   I PACCHI DI PASTA  (v49) — bozza ricostruita dall'etichetta
   Carta avorio rigata, sigillo dorato, marchio, pennellata gialla
   col nome del formato. Le misure sono in cqw: il pacco si adatta
   a qualunque larghezza della scheda senza ritocchi.
   ========================================================= */
.pacco-foto { width: 100%; height: 100%; object-fit: contain; display: block; }
/* nella vetrina dell'apertura non c'è un contenitore che dia l'altezza:
   senza rapporto d'aspetto l'immagine collassava e i pacchi sparivano */
.vetrinetta .pacco-foto { height: auto; aspect-ratio: 1; }
.scheda__foto--pacco:has(.pacco-foto) { background: #fff; padding: 0; }
/* i mockup fotografici hanno già margine e ombra dentro l'immagine:
   servono più larghi e con meno ombra aggiunta */
.vetrinetta__pezzo:has(.pacco-foto) { filter: drop-shadow(0 10px 18px rgba(20, 14, 8, 0.3)); width: clamp(112px, 46%, 280px); }
.vetrinetta__pezzo--1:has(.pacco-foto) { width: clamp(140px, 58%, 350px); }
.vetrinetta__pezzo--0:has(.pacco-foto) { transform: rotate(-7deg) translate(22%, 3%); }
.vetrinetta__pezzo--2:has(.pacco-foto) { transform: rotate(7deg) translate(-22%, 3%); }
.scheda__foto--pacco {
  container-type: inline-size;
  aspect-ratio: 1 !important;
  background: linear-gradient(180deg, var(--panna-2), var(--uovo));
  padding: 7% 12% 0;
  align-items: end;
}
.pacco {
  position: relative; display: flex; flex-direction: column;
  width: 100%; aspect-ratio: 3 / 4.1;
  border-radius: 3px 3px 9px 9px; overflow: hidden;
  background:
    linear-gradient(90deg,
      rgba(43, 33, 24, 0.17) 0%, rgba(255, 255, 255, 0.45) 15%,
      rgba(255, 255, 255, 0) 44%, rgba(43, 33, 24, 0.06) 74%, rgba(43, 33, 24, 0.21) 100%),
    repeating-linear-gradient(180deg, rgba(43, 33, 24, 0.05) 0 1px, transparent 1px 6px),
    var(--carta-etichetta);
  box-shadow: 0 12px 22px -14px rgba(43, 33, 24, 0.55);
}
.pacco__sigillo {
  flex: none; height: 9%;
  background: repeating-linear-gradient(90deg, var(--grano) 0 4px, var(--grano-scuro) 4px 8px);
  opacity: 0.9;
  border-bottom: 1px solid rgba(43, 33, 24, 0.16);
}
.pacco__corpo {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.5%;
  padding: 5% 4%; text-align: center; min-height: 0;
}
.pacco__occhiello {
  font-size: 4.4cqw; letter-spacing: 0.13em; text-transform: uppercase;
  font-weight: 700; color: var(--inchiostro-soft); line-height: 1.1;
}
.pacco__logo { width: 38cqw; height: auto; margin: 2% 0 1%; }
.pacco__grano {
  font-size: 3.6cqw; letter-spacing: 0.04em; font-weight: 700;
  color: var(--inchiostro-soft); line-height: 1.15;
}
.pacco__nome {
  margin-top: 3%; max-width: 100%;
  font-family: var(--serif); font-weight: 700; font-size: var(--fs, 9cqw); line-height: 1.05;
  text-transform: uppercase; color: var(--inchiostro);
  background: var(--grano); border-radius: 2px 9px 2px 9px;
  padding: 0.2em 0.45em;
}
.pacco__peso {
  margin-top: 4%; font-size: 5.4cqw; font-weight: 700; color: var(--inchiostro);
}
.pacco__peso em { font-style: normal; font-weight: 400; color: var(--inchiostro-soft); }

/* =========================================================
   IL MENU A SINISTRA  (v52)
   ⚠️ Perché sta FUORI dall'header: l'header ha `backdrop-filter`,
   e un elemento con filtro diventa il blocco contenitore dei suoi
   discendenti `position: fixed`. Il menu, pur essendo "fixed", si
   ancorava quindi all'header — alto quanto l'header e con le voci
   in riga. Spostato fuori, il fixed torna a riferirsi alla pagina.
   ========================================================= */
.burger { display: flex; }
.menu {
  position: fixed; top: 0; bottom: 0; left: 0;
  width: min(360px, 88%);
  display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding: 4.6rem 1.5rem 2.5rem; overflow-y: auto;
  background: var(--panna);
  border-right: 1px solid var(--bordo);
  box-shadow: 12px 0 44px rgba(43, 33, 24, 0.22);
  transform: translateX(-100%);
  transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 96;
}
.menu[data-aperto] { transform: translateX(0); }
.menu > a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.72rem 0; border-bottom: 1px solid var(--bordo);
  font-size: 1.02rem; font-weight: 600; color: var(--inchiostro); text-decoration: none;
}
.menu > a:hover { color: var(--grano-scuro); }
.menu > a[aria-current] { color: var(--grano-scuro); }
.menu > a[aria-current]::after {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grano); flex: none;
}
.menu > a em {
  font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--grano-scuro);
  background: var(--grano-chiaro); border-radius: 999px; padding: 0.12rem 0.5rem;
}
.menu__home { font-family: var(--serif); font-size: 1.16rem; }
.menu__gruppo {
  margin: 1.6rem 0 0.2rem; font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; font-weight: 700; color: var(--grano-scuro);
}
.nav__velo {
  position: fixed; inset: 0; z-index: 94; border: 0; padding: 0;
  background: rgba(43, 33, 24, 0.4); backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s;
}
body[data-nav-aperto] .nav__velo { opacity: 1; visibility: visible; }
body[data-nav-aperto] { overflow: hidden; }
.nav__chiudi {
  position: absolute; top: 1rem; right: 1.1rem;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--bordo); background: var(--bianco);
  display: grid; place-items: center; cursor: pointer; padding: 0; color: var(--inchiostro);
}
.nav__chiudi svg { width: 17px; height: 17px; }

/* =========================================================
   HOME IN ORDINE DI VENDITA  (v62)
   Prima le offerte, poi i formati con il carrello a portata di
   dito, poi ripieni e tavola calda affiancati (prima si mangiavano
   uno schermo a testa), infine una chiusura che dà un motivo per
   scrivere invece di finire nel vuoto.
   ========================================================= */

/* --- le due offerte, più presenti --- */
#offerte .offerta { padding: clamp(1.6rem, 4vw, 2.6rem); }
#offerte .offerta h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
#offerte .offerta__prezzo { font-size: 1.35rem; }

/* --- il pulsante "Aggiungi" dentro la scheda del formato --- */
.scheda { position: relative; }
.scheda__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; flex: 1; }
.scheda__piede {
  border-top: 1px solid var(--bordo); padding: 0.5rem;
  display: flex; align-items: center; justify-content: center;
}
.scheda__piede .btn { width: 100%; justify-content: center; padding-inline: 0.6rem; }
.scheda:hover .scheda__piede { background: transparent; }
.scheda .stepper--card { width: 100%; }

/* --- ripieni e tavola calda: due tessere sulla stessa riga --- */
.duetto { padding-block: clamp(2rem, 5vw, 3.4rem); }
.duetto__in { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2.6vw, 1.8rem); }
.tessera {
  display: grid; grid-template-columns: 40% 1fr; align-items: stretch;
  border: 1px solid var(--grano); border-radius: 6px; overflow: hidden;
  background: var(--bianco);
}
.tessera--uovo { background: var(--uovo); }
.tessera--verde { background: var(--verde-pastello); }
.tessera__foto { overflow: hidden; }
.tessera__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tessera__testo {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: clamp(1.1rem, 2.6vw, 1.8rem);
}
.tessera__testo h2 { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.14; }
.tessera__testo p { margin: 0; font-size: 0.92rem; color: var(--inchiostro-soft); }
.tessera__testo .btn { margin-top: auto; }
@media (max-width: 900px) {
  .duetto__in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tessera { grid-template-columns: 1fr; }
  .tessera__foto { aspect-ratio: 16 / 10; }
}

/* --- la chiusura --- */
.chiusura { background: var(--bianco); border-top: 1px solid var(--bordo); padding-block: clamp(2.6rem, 6vw, 4.2rem); }
.chiusura__in {
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start;
}
.chiusura h2 { margin: 0.2rem 0 0.6rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.chiusura h3 { margin: 0.2rem 0 0.6rem; font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
.chiusura p { color: var(--inchiostro-soft); margin: 0 0 1rem; max-width: 46ch; }
.chiusura__azioni { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.chiusura__azioni .google-box__social { flex: 1 0 100%; margin: 0.4rem 0 0; font-size: 0.85rem; }
.chiusura__contatto {
  background: var(--panna-2); border: 1px solid var(--bordo); border-radius: 6px;
  padding: clamp(1.3rem, 3vw, 2rem);
}
.chiusura__nota { font-size: 0.82rem; margin: 1rem 0 0 !important; }
.recensioni--chiusura { display: grid; gap: 0.8rem; margin-bottom: 1.2rem; }
@media (max-width: 820px) {
  .chiusura__in { grid-template-columns: 1fr; }
}

/* =========================================================
   IL LOGOTIPO  (v75)
   "Mamma Pasta" nel corsivo pieno del marchio, con la ® in
   apice a destra come sull'insegna e sull'etichetta.
   ========================================================= */
.marchio__nome {
  font-family: "Pacifico", "Brush Script MT", var(--serif), cursive;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important;
  line-height: 1.1;
  color: var(--inchiostro);
  letter-spacing: 0.005em;
  position: relative;
}
/* la ® ora sta dentro al marchio tondo, dove la vuole il cliente:
   qui non serve più, altrimenti comparirebbe due volte nella stessa testata */
.marchio__claim { margin-top: 0.15rem; }
@media (max-width: 900px) {
  .marchio__nome { font-size: 1.95rem !important; }
}

/* =========================================================
   TAVOLA CALDA — listino e consegna a domicilio  (v79)
   ========================================================= */
.listino {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
}
.listino__prezzi, .domicilio {
  background: var(--bianco); border: 1px solid var(--bordo);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2.2rem);
}
.listino__voci { list-style: none; margin: 0.8rem 0 0.9rem; padding: 0; }
.listino__voce {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px solid var(--bordo);
}
.listino__voce span { display: flex; flex-direction: column; font-weight: 600; }
.listino__voce em { font-style: normal; font-size: 0.8rem; font-weight: 400; color: var(--inchiostro-soft); }
.listino__voce strong { font-size: 1.15rem; white-space: nowrap; }
.listino__voce--forte {
  background: var(--arancio-tenue); border-radius: 8px;
  padding: 0.8rem 0.9rem; border-bottom: 0; margin-bottom: 0.3rem;
}
.listino__voce--forte strong { font-size: 1.6rem; color: var(--arancio-scuro); }
.listino__singoli { margin: 0 0 1rem; font-size: 0.88rem; color: var(--inchiostro-soft); }
.listino__claim {
  margin: 0; font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; color: var(--inchiostro);
}

.domicilio { background: var(--verde-pastello); border-color: transparent; }
.domicilio__novita {
  display: inline-block; margin: 0 0 0.4rem; background: var(--arancio); color: #fff;
  font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase;
  font-weight: 800; padding: 0.26rem 0.66rem; border-radius: 999px;
}
.domicilio h2 { margin: 0 0 1rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.domicilio__passi { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.9rem; }
.domicilio__passi li { display: flex; gap: 0.8rem; align-items: flex-start; }
.domicilio__n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--arancio); color: #fff; font-weight: 800; font-size: 0.9rem;
  display: grid; place-items: center;
}
.domicilio__passi strong { display: block; margin-bottom: 0.12rem; }
.domicilio__passi p { margin: 0; font-size: 0.9rem; color: var(--inchiostro-soft); }
.domicilio__zone { margin: 0 0 1.1rem; font-size: 0.92rem; }

.social-diretti { margin-top: clamp(1.6rem, 4vw, 2.6rem); text-align: center; }
.social-diretti__testo { margin: 0 0 0.9rem; color: var(--inchiostro-soft); }
.social-diretti__link { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }
.social-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.62rem 1.2rem; border-radius: 999px; font-weight: 700; font-size: 0.94rem;
  color: #fff; text-decoration: none; transition: transform 0.2s ease, filter 0.2s ease;
}
.social-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.social-btn--facebook { background: #1877f2; }
.social-btn--instagram { background: linear-gradient(45deg, #f09433, #dc2743 45%, #bc1888); }
.social-btn--tiktok { background: #111; }
.social-btn--whatsapp { background: #25d366; }

/* =========================================================
   TAVOLA CALDA — marchio e giostra delle foto  (v81)
   ⚠️ Il marchio qui sotto è RICOSTRUITO con i font del sito.
   Quando il cliente manda il file originale si sostituisce
   questo blocco con un semplice <img>.
   ========================================================= */
/* il marchio vero della tavola calda, estratto dal PDF del cliente */
.logo-tc {
  display: block; width: min(420px, 76%); height: auto;
  margin: 0 auto 1.2rem;
}
.tc-titolo { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-top: 0.6rem; }

.giostra-foto { overflow: hidden; touch-action: pan-y; }
.giostra-foto__pista { display: flex; gap: 0.8rem; width: max-content; will-change: transform; }
.giostra-foto__voce {
  flex: 0 0 auto; width: clamp(210px, 26vw, 330px); margin: 0;
  border-radius: var(--radius); overflow: hidden; background: var(--bianco);
  border: 1px solid var(--bordo); position: relative;
}
.giostra-foto__voce img, .giostra-foto__voce video {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
}
.giostra-foto__voce figcaption {
  padding: 0.6rem 0.8rem 0.7rem; font-size: 0.84rem; color: var(--inchiostro-soft);
  line-height: 1.35;
}

/* --- la galleria dei formati di pasta fresca --- */
.griglia-forme {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: clamp(0.5rem, 1.4vw, 0.9rem);
}
.forma {
  margin: 0; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--bianco); border: 1px solid var(--bordo);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.forma:hover { transform: translateY(-3px); box-shadow: var(--ombra); }
.forma img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.forma figcaption {
  padding: 0.5rem 0.6rem; font-size: 0.82rem; font-weight: 600;
  text-align: center; color: var(--inchiostro);
}
.forma__dubbio {
  display: block; margin-top: 0.14rem; font-style: normal;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--arancio-scuro);
}

/* --- la fascia della bottega col cesto (foto dell'archivio) --- */
.bottega { position: relative; overflow: hidden; isolation: isolate; }
.bottega__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%; z-index: -2;
}
.bottega__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(28, 20, 12, 0.82) 0%,
    rgba(28, 20, 12, 0.6) 42%, rgba(28, 20, 12, 0.18) 72%, rgba(28, 20, 12, 0.3) 100%);
}
.bottega__testo {
  padding-block: clamp(3.4rem, 9vw, 6rem);
  max-width: min(var(--max), 100%);
  color: var(--panna);
}
.bottega__testo .occhiello { color: var(--grano-chiaro); }
.bottega__testo h2 { color: var(--panna); margin: 0.3rem 0 0.7rem; }
.bottega__testo p { color: rgba(244, 236, 221, 0.88); margin: 0 0 1.5rem; max-width: 34ch; }
@media (max-width: 700px) {
  .bottega__velo { background: linear-gradient(180deg, rgba(28, 20, 12, 0.72), rgba(28, 20, 12, 0.86)); }
  .bottega__testo p { max-width: none; }
}

/* =========================================================
   MENO ARANCIONE, E IL VERDE DOV'È DI CASA  (v92)
   Il terracotta resta solo sui pulsanti che portano soldi
   (aggiungi al carrello, acquista, paga). Tutto il resto
   passa a oro o a contorno. Chi scrive su WhatsApp trova
   il verde di WhatsApp, così il pulsante si riconosce.
   ========================================================= */
.btn--whatsapp {
  background: #25d366; color: #08351a;
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
}
.btn--whatsapp:hover { background: #1fb855; color: #06280f; }
.btn--whatsapp::before {
  content: ""; display: inline-block; vertical-align: -0.18em;
  width: 1.05em; height: 1.05em; margin-right: 0.5em;
  background: currentColor;
  -webkit-mask: var(--icona-whatsapp) center / contain no-repeat;
  mask: var(--icona-whatsapp) center / contain no-repeat;
}
:root {
  --icona-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z'/%3E%3Cpath d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.13h-.01a8.2 8.2 0 0 1-4.19-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.19 8.19 0 0 1-1.26-4.36c0-4.54 3.7-8.23 8.25-8.23a8.23 8.23 0 0 1 8.24 8.24c0 4.54-3.7 8.23-8.24 8.23z'/%3E%3C/svg%3E");
}
/* i pulsanti "chiari" sul fondo scuro della fascia bottega */
.bottega .btn--chiaro {
  background: rgba(247, 244, 236, 0.12); color: var(--panna);
  border: 1.5px solid rgba(247, 244, 236, 0.55);
}
.bottega .btn--chiaro:hover { background: var(--panna); color: var(--inchiostro); border-color: var(--panna); }

/* =========================================================
   IL LOGOTIPO VERO  (v96)
   La scritta arriva dal PDF del marchio: tracciati vettoriali,
   non un font che gli somiglia. Tolto il ".it" e messa la ®
   nella sacca fra la stanghetta della t e la a finale, dentro
   all'immagine — quindi niente più ® separata in HTML.
   ========================================================= */
.marchio__nome {
  display: inline-flex; align-items: flex-start; gap: 0.06em;
  font-size: clamp(2.3rem, 4.2vw, 3.5rem) !important;   /* scritta più grande */
  line-height: 1;
}
.marchio__nome img {
  display: block; height: 1.12em; width: auto;   /* la scritta ora è più lunga: include la ® */
}
.marchio__nome .marchio__r {
  font-family: var(--sans); font-style: normal; font-weight: 700;
  font-size: 0.3em; line-height: 1; margin-top: 0.15em;
  color: var(--inchiostro);
}
/* nel footer il nome è la scritta vera, con la sua ®: prima era un
   <strong> nascosto con font-size 0 e il marchio restava senza nome */
.footer__scritta { display: block; flex: none; height: 1.4rem; width: auto; }
@media (max-width: 900px) {
  .marchio__nome { font-size: 1.95rem !important; }
}

/* --- prenotazione della pasta fresca + pagina ristoranti (v96) --- */
.prenota { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.motivi { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.motivo {
  background: var(--bianco); border: 1px solid var(--bordo); border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
}
.motivo h3 { margin: 0 0 0.5rem; font-size: 1.12rem; }
.motivo p { margin: 0; color: var(--inchiostro-soft); font-size: 0.95rem; line-height: 1.6; }
.passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.4rem; }
.passo { text-align: center; }
.passo__n {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 0.9rem;
  border-radius: 50%; background: var(--grano-chiaro); color: var(--grano-scuro);
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
}
.passo h3 { margin: 0 0 0.4rem; font-size: 1.08rem; }
.passo p { margin: 0; color: var(--inchiostro-soft); font-size: 0.94rem; }
.ristor-apre { position: relative; overflow: hidden; isolation: isolate; }
.ristor-apre__foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%; z-index: -2;
}
.ristor-apre__velo {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(28, 20, 12, 0.88) 0%, rgba(28, 20, 12, 0.7) 45%,
    rgba(28, 20, 12, 0.34) 78%, rgba(28, 20, 12, 0.45) 100%);
}
.ristor-apre__in { padding-block: clamp(3.4rem, 9vw, 6rem); color: var(--panna); }
.ristor-apre__in .occhiello { color: var(--grano-chiaro); }
.ristor-apre__in h1 { color: var(--panna); margin: 0.4rem 0 0.9rem; }
.ristor-apre__in .lead { color: rgba(244, 236, 221, 0.9); max-width: 46ch; }
.ristor-apre__cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.ristor-apre__cta .btn--chiaro { border-color: rgba(244, 236, 221, 0.5); color: var(--panna); background: transparent; }
.ristor-cosa {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}
.ristor-cosa__foto { border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombra-alta); }
.ristor-cosa__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 820px) {
  .ristor-cosa { grid-template-columns: 1fr; }
  .ristor-cosa__foto { max-width: 420px; margin-inline: auto; }
}

/* =========================================================
   ISCRIZIONE ALLA NEWSLETTER  (v104)
   In fondo a ogni pagina. Il consenso è una spunta separata e
   il pulsante resta spento finché non la si mette: in Italia
   l'iscrizione dev'essere un atto volontario e distinto.
   ========================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.iscrizione {
  margin-top: 2.6rem; padding-top: 2rem;
  border-top: 1px solid rgba(43, 33, 24, 0.12);
}
.iscrizione__form {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 0.7rem clamp(1.5rem, 4vw, 3rem); align-items: start;
}
.iscrizione__testo { grid-row: span 2; }
.iscrizione__testo h3 {
  margin: 0 0 0.35rem; font-family: var(--serif);
  font-size: 1.22rem; color: var(--inchiostro);
}
.iscrizione__testo p {
  margin: 0; font-size: 0.9rem; line-height: 1.55;
  color: var(--inchiostro-soft); max-width: 38ch;
}
.iscrizione__campi { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.iscrizione__campo { flex: 1 1 13rem; }
.iscrizione__campo input {
  width: 100%; padding: 0.78rem 1rem;
  border: 1px solid var(--bordo); border-radius: var(--radius-sm);
  background: var(--bianco); color: var(--inchiostro);
  font: inherit; font-size: 0.95rem;
}
.iscrizione__campo input:focus-visible {
  outline: 2px solid var(--grano); outline-offset: 1px; border-color: var(--grano);
}
.iscrizione__campi .btn { flex: none; }
.iscrizione__campi .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.iscrizione__consenso {
  display: flex; gap: 0.55rem; align-items: flex-start;
  font-size: 0.82rem; line-height: 1.5; color: var(--inchiostro-soft);
  cursor: pointer;
}
.iscrizione__consenso input {
  margin: 0.2rem 0 0; width: 1rem; height: 1rem; flex: none;
  accent-color: var(--rosso-promo);
}
.iscrizione__consenso a { color: var(--grano-scuro); text-decoration: underline; }
.iscrizione__esito { grid-column: 2; margin: 0; font-size: 0.86rem; min-height: 1.2em; }
.iscrizione__esito--ok { color: var(--verde-testo); font-weight: 600; }
.iscrizione__esito--ko { color: var(--rosso-testo); font-weight: 600; }
@media (max-width: 760px) {
  .iscrizione__form { grid-template-columns: 1fr; }
  .iscrizione__testo { grid-row: auto; }
  .iscrizione__esito { grid-column: 1; }
  .iscrizione__campi .btn { width: 100%; text-align: center; }
}

/* --- il filmato d'archivio non deve portare fuori dal sito (v105) --- */
.video-incorniciato { position: relative; }
.video-incorniciato iframe { pointer-events: none; }

/* --- i listini del banco: ripieni e piatti pronti (v106) --- */
.listino {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  /* le righe le disegnano le celle, non lo sfondo: così l'ultima riga
     incompleta non lascia rettangoli colorati vuoti */
  gap: 1px; background: transparent;
  border-radius: var(--radius-sm);
  /* due regole generiche del foglio arrivavano fin qui: senza queste, le
     celle non riempivano la riga e il nome finiva a destra */
  align-items: stretch;
}
.listino__voce {
  background: var(--bianco); box-shadow: 0 0 0 1px var(--bordo);
  padding: 0.85rem 1rem;
  /* niente wrap fra pallino e nome: sui nomi lunghi il pallino finiva
     su una riga tutta sua, sopra al testo */
  display: flex; align-items: flex-start; justify-content: flex-start;
  gap: 0.5rem; flex-wrap: nowrap;
  font-size: 0.94rem; line-height: 1.4;
}
.listino__voce::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--grano); flex: none; margin-top: 0.58em;
}
.listino__nome { color: var(--inchiostro); min-width: 0; }
.listino__nota {
  font-style: normal; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--verde-testo); background: var(--verde-pastello);
  padding: 0.1rem 0.4rem; border-radius: 999px;
}

/* =========================================================
   PERCHÉ COSTA DI PIÙ  (v108)
   La domanda che si fa chi guarda il prezzo. Meglio risponderle
   noi, con tre fatti, che lasciarla senza risposta.
   ========================================================= */
.perche { background: var(--bianco); border-block: 1px solid var(--bordo); }
.perche__punti {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem); margin-top: 2.4rem;
}
.perche__punto { position: relative; padding-top: 0.6rem; border-top: 2px solid var(--grano); }
.perche__n {
  display: block; font-family: var(--serif); font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--grano-scuro); margin-bottom: 0.5rem;
}
.perche__punto h3 { margin: 0 0 0.5rem; font-size: 1.2rem; }
.perche__punto p { margin: 0; font-size: 0.94rem; line-height: 1.62; color: var(--inchiostro-soft); }
.perche__chiusa {
  margin: 2.6rem auto 0; max-width: 44rem; text-align: center;
  font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.28rem);
  line-height: 1.5; color: var(--inchiostro);
}
.perche__chiusa strong { color: var(--grano-scuro); }


/* =========================================================
   IL PERCHÉ DEL PREZZO, IN UNA RIGA  (v112)
   Era un paragrafo lungo: qui basta una frase. Dice la stessa
   cosa — due ingredienti, il resto è tempo — e chi vuole il
   racconto lungo lo trova nello shop.
   ========================================================= */
.frase { background: var(--bianco); border-block: 1px solid var(--bordo); }
.frase__in {
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  padding-block: clamp(2.8rem, 6vw, 4.5rem); text-align: center;
}
.frase__testo {
  margin: 0; max-width: 26ch;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  line-height: 1.4; color: var(--inchiostro);
  text-wrap: balance;
}
.frase__testo em { font-style: italic; color: var(--grano-scuro); }
.frase__link {
  font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--grano-scuro);
  padding-bottom: 0.25rem; border-bottom: 1px solid var(--grano);
}
.frase__link:hover { color: var(--inchiostro); border-color: var(--inchiostro); }

/* il prezzo pieno barrato nel listino della tavola calda (v116) */
/* due prezzi non ci stanno in riga: il pieno barrato va sopra */
.listino__voce strong { text-align: right; white-space: nowrap; }
.listino__pieno {
  display: block; color: var(--inchiostro-soft); font-weight: 500;
  font-size: 0.86em; line-height: 1.2;
}

/* =========================================================
   COMPONI LA TUA SCORTA  (v116)
   Pannello per scegliere i formati dei pacchetti a numero
   fisso. Il pulsante di conferma resta spento finché il
   conto non torna esatto.
   ========================================================= */
.velo--compositore { opacity: 1; visibility: visible; z-index: 190; }
body[data-compositore-aperto] { overflow: hidden; }
.compositore {
  position: fixed; z-index: 200;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2rem)); max-height: min(85vh, 760px);
  display: flex; flex-direction: column;
  background: var(--panna); border: 1px solid var(--grano);
  border-radius: var(--radius); box-shadow: 0 30px 70px -20px rgba(43, 33, 24, 0.5);
  overflow: hidden;
}
.compositore__testa {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.4rem 0.9rem; border-bottom: 1px solid var(--bordo);
}
.compositore__testa h2 { margin: 0.2rem 0 0; font-size: 1.35rem; }
.compositore__conta {
  padding: 0.7rem 1.4rem; font-size: 0.9rem; font-weight: 600;
  color: var(--inchiostro-soft); background: var(--panna-2);
  border-bottom: 1px solid var(--bordo);
}
.compositore__conta--ok { color: var(--verde-testo); }
.compositore__corpo { overflow-y: auto; padding: 0.4rem 1.4rem 1rem; }
.scelta {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center; gap: 0.9rem;
  padding: 0.6rem 0; border-bottom: 1px dotted var(--bordo);
}
.scelta__media { display: grid; place-items: center; height: 54px; }
.scelta__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.scelta__media svg { width: 26px; height: 26px; color: var(--grano); }
.scelta__nome { font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.scelta__nome em {
  display: block; font-style: normal; font-weight: 400;
  font-size: 0.78rem; color: var(--inchiostro-soft);
}
.compositore__piede {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: 1rem 1.4rem; border-top: 1px solid var(--bordo);
  background: var(--bianco);
}
.compositore__totale { font-weight: 700; font-size: 0.95rem; }
.compositore__piede .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.voce__composizione {
  margin-top: 0.35rem; font-size: 0.78rem; line-height: 1.45;
  color: var(--inchiostro-soft);
}
@media (max-width: 560px) {
  .compositore { width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .compositore__piede { flex-direction: column; align-items: stretch; }
  .compositore__piede .btn { width: 100%; text-align: center; }
}

/* i cesti regalo, su richiesta (v116) */
.cesti { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.cesti__foto { border-radius: var(--radius); overflow: hidden; box-shadow: var(--ombra-alta); }
.cesti__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cesti__cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.4rem; }
@media (max-width: 780px) {
  .cesti { grid-template-columns: 1fr; }
  .cesti__foto { max-width: 460px; margin-inline: auto; }
}

/* =========================================================
   IL BOLLINO DEL GRANO, FISSO IN OGNI PAGINA  (v119)
   Piccolo, in basso a sinistra, con la frase che compare
   passandoci sopra. Sparisce quando si apre qualcosa che
   occupa lo schermo, così non si accavalla mai.
   ========================================================= */
.bollino {
  position: fixed; left: 18px; bottom: 18px; z-index: 80;
  width: 96px; display: block; line-height: 0;
  filter: drop-shadow(0 6px 14px rgba(43, 33, 24, 0.28));
  transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
}
.bollino img { width: 100%; height: auto; display: block; }
.bollino:hover, .bollino:focus-visible { transform: scale(1.06) rotate(-2deg); }
.bollino:focus-visible { outline: 2px solid var(--grano-scuro); outline-offset: 4px; border-radius: 50%; }

.bollino__fumetto {
  position: absolute; left: calc(100% + 10px); bottom: 34px;
  width: max-content; max-width: 15rem;
  background: var(--inchiostro); color: var(--panna);
  font-size: 0.76rem; line-height: 1.35; font-weight: 600;
  padding: 0.5rem 0.7rem; border-radius: 8px;
  opacity: 0; visibility: hidden; transform: translateX(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.bollino:hover .bollino__fumetto,
.bollino:focus-visible .bollino__fumetto {
  opacity: 1; visibility: visible; transform: translateX(0);
}

/* quando c'è già qualcosa di aperto, il bollino si toglie di mezzo */
body[data-nav-aperto] .bollino,
body[data-compositore-aperto] .bollino,
body:has(.carrello[aria-hidden="false"]) .bollino {
  opacity: 0; visibility: hidden; transform: scale(0.9);
}

@media (max-width: 760px) {
  .bollino { width: 64px; left: 12px; bottom: 12px; }
  .bollino__fumetto { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bollino, .bollino__fumetto { transition: none; }
  .bollino:hover, .bollino:focus-visible { transform: none; }
}

/* la misura del pacchetto, subito sotto il titolo (v122) */
.offerta__misura {
  margin: 0 0 0.5rem; font-family: var(--sans);
  font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--grano-scuro);
}