/* ═══════════════════════════════════════════════════════════════════
   LA CHIOCCIOLA · LUMÉ — il negozio
   «IL SENTIERO» — la pagina è il percorso che la lumaca fa dal campo
   alla tavola. Le sezioni sono tappe, e la scia le tiene insieme.

   La regola di questo foglio: LA LUCE.
   Fondo panna, fotografie grandi e luminose, un verde d'orto e un oro
   di spiga presi dal logo del cliente. Qui è mattina, sempre.
   ═══════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: 'Newsreader';
  src: url('/assets/fonts/newsreader.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Figtree';
  src: url('/assets/fonts/figtree.woff2') format('woff2');
  font-weight: 400 700; font-display: swap; font-style: normal;
}

:root {
  /* la luce, in tre gradi */
  --panna:    #FCF9F0;
  --panna-2:  #F5EFE1;
  --panna-3:  #EDE4D1;

  /* l'inchiostro, dal guscio del logo */
  --bruno:    #2B1B0E;
  --bruno-2:  #6A5946;
  --bruno-3:  #9B8B76;

  /* i due colori del disegno: la foglia e le spighe */
  --oliva:    #56682F;
  --oliva-2:  #6F8440;
  --grano:    #C9A55D;
  --grano-2:  #E8D3A0;

  /* il caldo del sugo, per i prezzi e le cose che si premono */
  --terra:    #8A3F1E;

  --bordo:    #E2D6BF;
  --ombra:    0 1px 2px #2b1b0e0d, 0 8px 28px #2b1b0e0f;
  --ombra-2:  0 2px 6px #2b1b0e12, 0 22px 50px #2b1b0e1a;
  --ombra-3:  0 30px 70px #2b1b0e24;

  --raggio:   14px;
  --raggio-2: 22px;

  --dentro:   clamp(1.15rem, 5vw, 4.5rem);
  --respiro:  clamp(4.5rem, 11vw, 9rem);

  --curva:    cubic-bezier(.2, .8, .25, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* le ancore non finiscono più sotto l'intestazione */
:target, [id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  background: var(--panna);
  color: var(--bruno);
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .serif {
  font-family: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.012em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; max-width: 62ch; }
img, picture, video, svg { display: block; max-width: 100%; }
a { color: inherit; }

:focus-visible {
  outline: 2.5px solid var(--oliva);
  outline-offset: 3px;
  border-radius: 4px;
}

.salta {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--bruno); color: var(--panna); padding: .85rem 1.3rem;
  font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
}
.salta:focus { left: .6rem; top: .6rem; }

.dentro { width: min(1280px, 100%); margin-inline: auto; padding-inline: var(--dentro); }
.stretto { width: min(760px, 100%); margin-inline: auto; padding-inline: var(--dentro); }

/* ═══ L'OCCHIELLO — la parolina sopra ogni titolo ═══ */
.occhiello {
  font-size: .715rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--oliva); font-weight: 700; margin: 0 0 1.15rem;
  display: flex; align-items: center; gap: .7rem;
}
.occhiello::before {
  content: ''; width: 26px; height: 1.5px; background: var(--grano);
  transform-origin: left; transform: scaleX(0); transition: transform .7s var(--curva) .1s;
}
.entra.dentro-schermo .occhiello::before,
.sez.dentro-schermo .occhiello::before { transform: scaleX(1); }

/* ═══════════════════════════════════════════════════════════
   1 · L'INTESTAZIONE
   ═══════════════════════════════════════════════════════════ */
.testa {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem var(--dentro);
  transition: background-color .35s var(--curva), box-shadow .35s var(--curva), padding .35s var(--curva);
}
.testa[data-fissa='1'] {
  background: var(--panna);          /* piena: niente testo che traspare da sotto */
  box-shadow: 0 1px 0 var(--bordo), 0 10px 30px #2b1b0e0a;
  padding-block: .55rem;
}

.testa__logo { display: flex; align-items: center; gap: .68rem; text-decoration: none; }
.testa__logo img { width: 54px; height: auto; transition: transform .5s var(--curva); }
.testa__logo:hover img { transform: rotate(-7deg) scale(1.07); }
.testa__nome {
  font-family: 'Newsreader', Georgia, serif; font-size: 1.32rem; line-height: 1;
  display: flex; flex-direction: column; gap: .16rem;
}
.testa__nome small {
  font-family: 'Figtree', sans-serif; font-size: .58rem; letter-spacing: .34em;
  color: var(--oliva); font-weight: 700;
}

.testa nav { display: flex; align-items: center; gap: 1.6rem; }
.testa nav a {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; font-weight: 600; color: var(--bruno-2);
  position: relative; padding-block: .3rem;
  transition: color .3s var(--curva);
}
.testa nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--oliva); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--curva);
}
.testa nav a:hover { color: var(--bruno); }
.testa nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.carrello-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  background: var(--bruno); color: var(--panna); border: 0;
  padding: .72rem 1.15rem; border-radius: 100px; cursor: pointer;
  font: inherit; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  transition: transform .3s var(--curva), box-shadow .3s var(--curva), background-color .3s var(--curva);
}
.carrello-btn:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); background: var(--terra); }
.carrello-btn:active { transform: translateY(0); }
.carrello-btn__n {
  min-width: 20px; height: 20px; border-radius: 100px; background: var(--grano); color: var(--bruno);
  display: grid; place-items: center; font-size: .72rem; padding-inline: .3rem;
  animation: pop .38s var(--curva);
}
.carrello-btn__n[hidden] { display: none; }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* il menu del telefono */
.menu-btn {
  display: none; background: none; border: 0; cursor: pointer; padding: .4rem;
  width: 42px; height: 38px; position: relative;
}
.menu-btn span {
  position: absolute; left: 8px; right: 8px; height: 1.8px; background: var(--bruno);
  transition: transform .4s var(--curva), opacity .25s var(--curva);
}
.menu-btn span:nth-child(1) { top: 12px; }
.menu-btn span:nth-child(2) { top: 18px; }
.menu-btn span:nth-child(3) { top: 24px; }
.testa[data-menu='1'] .menu-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.testa[data-menu='1'] .menu-btn span:nth-child(2) { opacity: 0; transform: scaleX(.3); }
.testa[data-menu='1'] .menu-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   2 · 🐌 LA FIRMA — LA SCIA CHE RESTA
   Il marchio del cliente cammina lungo il margine mentre si scorre,
   e lascia dietro di sé una scia madreperlata che non si cancella.
   A fondo pagina la scia è il percorso intero, dal campo alla tavola.
   ═══════════════════════════════════════════════════════════ */
.scia {
  position: fixed; left: max(.5rem, 1.6vw); top: 0; bottom: 0; width: 46px;
  z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--curva);
}
.scia[data-viva='1'] { opacity: 1; }
.scia svg { width: 100%; height: 100%; }

.scia__traccia { fill: none; stroke: url(#bava); stroke-width: 7; stroke-linecap: round; }
.scia__filo    { fill: none; stroke: var(--grano); stroke-width: 1.1; stroke-linecap: round; opacity: .5; }

.scia__bestia { transition: none; }
.scia__bestia img { width: 30px; height: auto; filter: drop-shadow(0 3px 6px #2b1b0e33); }

/* le tappe: un puntino sulla scia per ogni sezione, si accende al passaggio */
.scia__tappa {
  fill: var(--panna); stroke: var(--grano); stroke-width: 1.6; r: 3.2;
  transition: r .45s var(--curva), fill .45s var(--curva), stroke-width .45s var(--curva);
}
.scia__tappa[data-fatta='1'] { fill: var(--oliva); stroke: var(--oliva); r: 5; stroke-width: 2.4; }

@media (max-width: 1100px) {
  /* da telefono la scia diventa il filo di avanzamento in cima */
  .scia { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 3px; }
  .scia svg,
  .scia__bestia { display: none; }   /* niente lumaca a spasso: qui c'è solo il filo */
  .scia::after {
    content: ''; position: absolute; inset: 0; transform-origin: left;
    transform: scaleX(var(--avanzo, 0));
    background: linear-gradient(90deg, var(--oliva), var(--grano) 60%, var(--grano-2));
  }
}

/* ═══════════════════════════════════════════════════════════
   3 · L'APERTURA — il video del mattino
   ═══════════════════════════════════════════════════════════ */
.apertura {
  position: relative; min-height: min(96svh, 880px);
  display: grid; align-items: end;
  padding: 8rem 0 2.4rem;
  overflow: hidden;
  background: var(--panna-3);
}
.apertura__sfondo { position: absolute; inset: 0; z-index: 0; }
.apertura__sfondo video,
.apertura__sfondo img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center;
  animation: respiro 26s ease-in-out infinite alternate;
}
/* il respiro resta, ma leggero: più ingrandisce, più il video viene tagliato */
@keyframes respiro { from { transform: scale(1); } to { transform: scale(1.025); } }

/* il velo: tiene leggibile il testo senza spegnere il cibo */
.apertura__sfondo::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to top, #fcf9f0 2%, #fcf9f0f0 16%, #fcf9f08c 42%, #fcf9f01f 70%),
    linear-gradient(100deg, #fcf9f0d9 0 26%, #fcf9f000 62%);
}

.apertura__dentro { position: relative; z-index: 2; }
.apertura h1 {
  font-size: clamp(2.6rem, 6.6vw, 5.2rem);
  margin: 0 0 1.5rem; max-width: 15ch;
}
.apertura h1 em {
  font-style: italic; color: var(--terra);
  display: inline-block;
  animation: entra-titolo .9s var(--curva) .25s both;
}
@keyframes entra-titolo {
  from { opacity: 0; transform: translateY(.42em) rotate(-1.4deg); }
  to   { opacity: 1; transform: none; }
}
.apertura h1 > span {
  display: block;
  animation: entra-titolo .8s var(--curva) both;
}
.apertura h1 > span:nth-child(1) { animation-delay: .05s; }
.apertura h1 > span:nth-child(2) { animation-delay: .15s; }

.apertura__sotto {
  font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: var(--bruno-2);
  max-width: 40ch; margin-bottom: 2.1rem;
  animation: sali .8s var(--curva) .34s both;
}
@keyframes sali { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.apertura__bottoni {
  display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2.8rem;
  animation: sali .8s var(--curva) .44s both;
}

/* ── i pulsanti ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  padding: 1.02rem 1.85rem; border-radius: 100px; border: 1.5px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  background: var(--bruno); color: var(--panna);
  transition: transform .34s var(--curva), box-shadow .34s var(--curva), color .34s var(--curva), border-color .34s var(--curva);
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--terra);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--curva);
}
.btn:hover { transform: translateY(-3px); box-shadow: var(--ombra-2); }
.btn:hover::before { transform: scaleX(1); transform-origin: left; }
.btn:active { transform: translateY(-1px); }
.btn[disabled] { opacity: .42; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--vuoto { background: transparent; color: var(--bruno); border-color: var(--bruno-3); }
.btn--vuoto::before { background: var(--bruno); }
.btn--vuoto:hover { color: var(--panna); border-color: var(--bruno); }

.btn--grano { background: var(--grano); color: var(--bruno); }
.btn--grano::before { background: var(--grano-2); }

/* ── la fascia di fiducia sotto l'apertura ────────────────── */
.fiducia {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .6rem 2.4rem;
  padding-top: 1.5rem; border-top: 1px solid #2b1b0e1f;
  animation: sali .8s var(--curva) .54s both;
}
.fiducia li {
  list-style: none; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bruno-2); display: flex; align-items: center; gap: .55rem;
  transition: color .3s var(--curva);
}
.fiducia li:hover { color: var(--oliva); }
.fiducia li b { color: var(--bruno); font-weight: 700; }
.fiducia li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--grano);
  transition: transform .3s var(--curva);
}
.fiducia li:hover::before { transform: scale(1.8); }

/* ═══════════════════════════════════════════════════════════
   4 · LE SEZIONI — le tappe del sentiero
   ═══════════════════════════════════════════════════════════ */
.sez { padding-block: var(--respiro); position: relative; }
.sez--panna { background: var(--panna-2); }
.sez--orlo  { border-top: 1px solid var(--bordo); }

.sez__titolo { font-size: clamp(2rem, 4.4vw, 3.4rem); margin-bottom: 1.1rem; max-width: 18ch; }
.sez__sotto  { color: var(--bruno-2); max-width: 52ch; font-size: 1.05rem; }

/* comparsa al passaggio */
.entra > * { opacity: 0; transform: translateY(26px); }
.entra.dentro-schermo > * {
  opacity: 1; transform: none;
  transition: opacity .75s var(--curva), transform .75s var(--curva);
}
.entra.dentro-schermo > *:nth-child(2) { transition-delay: .07s; }
.entra.dentro-schermo > *:nth-child(3) { transition-delay: .14s; }
.entra.dentro-schermo > *:nth-child(4) { transition-delay: .21s; }
.entra.dentro-schermo > *:nth-child(5) { transition-delay: .28s; }

/* ═══════════════════════════════════════════════════════════
   5 · IL CATALOGO
   ═══════════════════════════════════════════════════════════ */
.barra-catalogo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.05rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--bordo);
}
.filtri { display: flex; flex-wrap: wrap; gap: .45rem; }
.filtro {
  font: inherit; font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  background: transparent; color: var(--bruno-2); border: 1.5px solid var(--bordo);
  padding: .6rem 1.15rem; border-radius: 100px; cursor: pointer;
  transition: background-color .3s var(--curva), color .3s var(--curva), border-color .3s var(--curva), transform .3s var(--curva);
}
.filtro:hover { border-color: var(--oliva); color: var(--oliva); transform: translateY(-2px); }
.filtro[aria-pressed='true'] { background: var(--oliva); border-color: var(--oliva); color: var(--panna); }
#catalogo-conta { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bruno-3); }

.griglia-prod {
  display: grid; gap: clamp(1rem, 2.2vw, 1.9rem);
  grid-template-columns: repeat(2, 1fr);          /* 2 per riga da telefono — regola THK */
}
/* Tre per riga da schermo largo, non quattro: i prodotti sono sei e le due
   categorie ne hanno tre ciascuna. Così nessun filtro lascia una riga monca. */
@media (min-width: 760px) { .griglia-prod { grid-template-columns: repeat(3, 1fr); } }

.prod { display: flex; flex-direction: column; background: none; border: 0; padding: 0; }
/* 🔴 senza questa riga il filtro non nasconde niente: .prod è display:flex */
.prod[hidden] { display: none !important; }

.prod__foto {
  /* 5:4 e non quadrata: la scheda si accorcia di un ottavo senza che le
     etichette, che hanno margine bianco intorno, perdano una parola */
  position: relative; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: var(--raggio); background: var(--panna-3);
  box-shadow: var(--ombra);
  transition: box-shadow .5s var(--curva), transform .5s var(--curva);
}
.prod:hover .prod__foto { transform: translateY(-5px); box-shadow: var(--ombra-2); }
.prod__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--curva);
}
.prod:hover .prod__foto img { transform: scale(1.06); }

.prod__tag {
  position: absolute; top: .75rem; left: .75rem; z-index: 2;
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  padding: .36rem .7rem; border-radius: 100px;
  background: var(--panna); color: var(--oliva);
  box-shadow: var(--ombra);
}
.prod__tag--presto { color: var(--terra); }

/* la scheda senza foto non è un buco: è un guscio disegnato */
.prod__attesa {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--panna-3), var(--panna-2));
}
.prod__attesa svg { width: 46%; height: auto; }
.prod__attesa path { fill: none; stroke: var(--grano); stroke-width: 2.2; stroke-linecap: round; }

.prod__corpo { padding: 1.05rem .2rem 0; display: flex; flex-direction: column; flex: 1; }
.prod__nome { font-size: 1.16rem; margin-bottom: .2rem; }
.prod__formato { font-size: .8rem; color: var(--bruno-3); letter-spacing: .04em; margin-bottom: .55rem; }
.prod__prezzo { font-size: 1.22rem; font-family: 'Newsreader', Georgia, serif; color: var(--terra); margin-bottom: .95rem; }
.prod__prezzo small { font-size: .78rem; font-family: 'Figtree', sans-serif; color: var(--bruno-3); letter-spacing: .05em; }
.prod__azione { margin-top: auto; }
.prod__azione .btn { width: 100%; padding: .82rem 1rem; font-size: .71rem; }

/* ═══════════════════════════════════════════════════════════
   6 · IL CONFRONTO — vive oppure già cotte
   ═══════════════════════════════════════════════════════════ */
.bivio {
  display: grid; gap: clamp(1rem, 2.4vw, 2rem);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .bivio { grid-template-columns: 1fr 1fr; } }

.via {
  position: relative; overflow: hidden; border-radius: var(--raggio-2);
  background: var(--panna); box-shadow: var(--ombra);
  transition: transform .5s var(--curva), box-shadow .5s var(--curva);
}
.via:hover { transform: translateY(-6px); box-shadow: var(--ombra-3); }
.via__foto { aspect-ratio: 16/10; overflow: hidden; }
.via__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.via:hover .via__foto img { transform: scale(1.07); }
.via__corpo { padding: clamp(1.2rem, 2.6vw, 2rem); }
.via__corpo h3 { font-size: 1.62rem; margin-bottom: .5rem; }
.via__quando {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-family: 'Newsreader', Georgia, serif; color: var(--terra);
  font-size: 2.3rem; line-height: 1; margin-bottom: .3rem;
}
.via__quando small { font-family: 'Figtree', sans-serif; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bruno-3); }
.via dl { margin: 1.1rem 0 0; display: grid; gap: .55rem; }
.via dl div { display: flex; gap: .8rem; align-items: baseline; padding-bottom: .55rem; border-bottom: 1px solid var(--bordo); }
.via dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bruno-3); min-width: 84px; }
.via dd { margin: 0; font-size: .93rem; }

/* ═══════════════════════════════════════════════════════════
   7 · 🧺 LA CASSETTA — la cosa da FARE
   ═══════════════════════════════════════════════════════════ */
.cassetta { display: grid; gap: clamp(1.4rem, 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .cassetta { grid-template-columns: 1fr 1.05fr; align-items: start; } }

.cassetta__posti {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem;
  padding: clamp(1rem, 2.4vw, 1.6rem);
  background: var(--panna); border-radius: var(--raggio-2);
  box-shadow: var(--ombra); border: 1px solid var(--bordo);
}
.posto {
  aspect-ratio: 1; border-radius: 10px; position: relative; overflow: hidden;
  background: repeating-linear-gradient(45deg, var(--panna-2) 0 7px, var(--panna-3) 7px 14px);
  display: grid; place-items: center;
  border: 1.5px dashed var(--bordo);
  transition: border-color .4s var(--curva), transform .4s var(--curva), box-shadow .4s var(--curva);
}
.posto[data-pieno='1'] { border-style: solid; border-color: var(--oliva); box-shadow: var(--ombra); }
.posto[data-pieno='1']:hover { transform: scale(.97); }
.posto img { width: 100%; height: 100%; object-fit: cover; animation: cade .45s var(--curva); }
@keyframes cade {
  0%   { opacity: 0; transform: translateY(-38%) rotate(-9deg) scale(.86); }
  70%  { transform: translateY(3%) rotate(2deg) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
.posto__n {
  font-family: 'Newsreader', Georgia, serif; font-size: 1.5rem; color: var(--bruno-3);
  transition: color .3s var(--curva);
}
.posto__via {
  position: absolute; inset: auto .3rem .3rem auto; z-index: 3;
  width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer;
  background: #fcf9f0e6; color: var(--terra); font-size: 1rem; line-height: 1;
  display: grid; place-items: center; opacity: 0;
  transition: opacity .3s var(--curva), transform .3s var(--curva);
}
.posto:hover .posto__via { opacity: 1; }
.posto__via:hover { transform: scale(1.15); }

.cassetta__scelte { display: grid; gap: .6rem; }
.cassetta__scelta {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left;
  font: inherit; cursor: pointer;
  background: var(--panna); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: .6rem .8rem;
  transition: border-color .3s var(--curva), transform .3s var(--curva), box-shadow .3s var(--curva);
}
.cassetta__scelta:hover { border-color: var(--oliva); transform: translateX(4px); box-shadow: var(--ombra); }
.cassetta__scelta:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.cassetta__scelta img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.cassetta__scelta b { display: block; font-size: .96rem; font-weight: 600; }
.cassetta__scelta span { font-size: .76rem; color: var(--bruno-3); }
.cassetta__riepilogo {
  margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--bordo);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.cassetta__conto { font-family: 'Newsreader', Georgia, serif; font-size: 1.35rem; }

/* ═══════════════════════════════════════════════════════════
   8 · LE FASCE CON FOTO — mai una gigante sotto l'altra
   ═══════════════════════════════════════════════════════════ */
.fascia { display: grid; gap: clamp(1.6rem, 4vw, 4rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .fascia { grid-template-columns: 1fr 1fr; }
  .fascia--rovescio .fascia__foto { order: -1; }
}
.fascia__foto {
  position: relative; overflow: hidden; border-radius: var(--raggio-2);
  aspect-ratio: 4/3; box-shadow: var(--ombra-2);
}
.fascia__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva); }
.fascia__foto:hover img { transform: scale(1.05); }

/* i passi numerati */
.passi { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 1.15rem; counter-reset: p; }
.passi li {
  display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  counter-increment: p; padding-bottom: 1.15rem; border-bottom: 1px solid var(--bordo);
}
.passi li:last-child { border-bottom: 0; padding-bottom: 0; }
.passi li::before {
  content: '0' counter(p);
  font-family: 'Newsreader', Georgia, serif; font-size: 1.08rem; color: var(--grano);
  padding-top: .1rem; transition: color .35s var(--curva), transform .35s var(--curva);
}
.passi li:hover::before { color: var(--oliva); transform: scale(1.18); }
.passi b { display: block; font-size: 1.04rem; font-weight: 600; margin-bottom: .12rem; }
.passi span { font-size: .93rem; color: var(--bruno-2); }

/* ═══════════════════════════════════════════════════════════
   9 · L'ETICHETTINA DI SEZIONE — «Cosa ci metti» nel kit
   (qui stava lo strumento «Cosa ci faccio?», sezione eliminata:
   del blocco resta solo la regola che la cassetta usa ancora)
   ═══════════════════════════════════════════════════════════ */
.domanda { font-size: .76rem; letter-spacing: .15em; text-transform: uppercase; color: var(--bruno-3); margin: 1.5rem 0 .75rem; }
.domanda:first-of-type { margin-top: 0; }

/* ═══════════════════════════════════════════════════════════
   10 · L'ETICHETTA — pastiglie e valori
   ═══════════════════════════════════════════════════════════ */
.pastiglie { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.pastiglie li {
  font-size: .78rem; padding: .42rem .9rem; border-radius: 100px;
  background: var(--panna); border: 1px solid var(--bordo); color: var(--bruno-2);
  transition: border-color .3s var(--curva), color .3s var(--curva), transform .3s var(--curva);
}
.pastiglie li:hover { border-color: var(--grano); color: var(--bruno); transform: translateY(-2px); }
.pastiglie li b { color: var(--terra); font-weight: 600; }

.valori { width: 100%; border-collapse: collapse; margin-top: 1.3rem; font-size: .9rem; }
.valori th, .valori td { text-align: left; padding: .65rem .5rem; border-bottom: 1px solid var(--bordo); }
.valori th { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--bruno-3); font-weight: 600; }
.valori tr { transition: background-color .3s var(--curva); }
.valori tbody tr:hover { background: var(--panna-2); }
.valori td:last-child { text-align: right; font-family: 'Newsreader', Georgia, serif; font-size: 1.02rem; }

/* ═══════════════════════════════════════════════════════════
   11 · LE DOMANDE
   ═══════════════════════════════════════════════════════════ */
.domande { display: grid; gap: 0; }
.qa { border-bottom: 1px solid var(--bordo); }
.qa summary {
  cursor: pointer; list-style: none; padding: 1.3rem 2.5rem 1.3rem 0; position: relative;
  font-size: clamp(1.02rem, 1.8vw, 1.2rem); font-family: 'Newsreader', Georgia, serif;
  transition: color .3s var(--curva), padding-left .35s var(--curva);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--oliva); padding-left: .45rem; }
.qa summary::after {
  content: ''; position: absolute; right: .4rem; top: 50%; width: 13px; height: 13px;
  border-right: 1.6px solid var(--grano); border-bottom: 1.6px solid var(--grano);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .4s var(--curva), border-color .3s var(--curva);
}
.qa[open] summary::after { transform: translateY(-20%) rotate(-135deg); border-color: var(--oliva); }
.qa__corpo { padding: 0 2.5rem 1.4rem 0; color: var(--bruno-2); animation: apri .4s var(--curva); }

/* ═══════════════════════════════════════════════════════════
   12 · IL CARRELLO A CASSETTO
   ═══════════════════════════════════════════════════════════ */
.velo {
  position: fixed; inset: 0; z-index: 100; background: #2b1b0e5c;
  opacity: 0; pointer-events: none; transition: opacity .4s var(--curva);
}
.velo[data-aperto='1'] { opacity: 1; pointer-events: auto; }

.cassetto {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 110;
  width: min(420px, 100%); background: var(--panna);
  transform: translateX(101%); transition: transform .48s var(--curva);
  display: flex; flex-direction: column;
  box-shadow: -20px 0 60px #2b1b0e1f;
}
.cassetto[data-aperto='1'] { transform: none; }
.cassetto__testa {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem var(--dentro) 1.1rem; border-bottom: 1px solid var(--bordo);
}
.cassetto__testa h2 { font-size: 1.35rem; }
.cassetto__chiudi {
  background: none; border: 0; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--bruno-2);
  width: 40px; height: 40px; border-radius: 50%;
  transition: background-color .3s var(--curva), transform .3s var(--curva);
}
.cassetto__chiudi:hover { background: var(--panna-3); transform: rotate(90deg); }
.cassetto__corpo { flex: 1; overflow-y: auto; padding: 1.2rem var(--dentro); }
.cassetto__corpo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cassetto__corpo li {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--bordo);
  animation: sali .35s var(--curva);
}
.cassetto__corpo li span { grid-column: 1; font-size: .8rem; color: var(--bruno-3); }
.cassetto__via {
  grid-column: 2; justify-self: end; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .76rem; color: var(--terra); text-decoration: underline;
  text-underline-offset: 3px; padding: 0;
  transition: opacity .25s var(--curva);
}
.cassetto__via:hover { opacity: .6; }
.cassetto__piede { padding: 1.2rem var(--dentro) 1.6rem; border-top: 1px solid var(--bordo); }
.cassetto__totale { font-family: 'Newsreader', Georgia, serif; font-size: 1.3rem; margin-bottom: .9rem; }
.cassetto__piede .btn { width: 100%; }
.cassetto__nota { font-size: .78rem; color: var(--bruno-3); margin: .8rem 0 0; }

/* ═══════════════════════════════════════════════════════════
   13 · IL PIEDE
   ═══════════════════════════════════════════════════════════ */
.piede { background: var(--panna-2); border-top: 1px solid var(--bordo); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.piede__griglia { display: grid; gap: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 680px) { .piede__griglia { grid-template-columns: 1.4fr 1fr 1fr; } }
.piede h3 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bruno-3); margin-bottom: .9rem; font-family: 'Figtree', sans-serif; font-weight: 700; }
.piede ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .93rem; }
.piede a { text-decoration: none; color: var(--bruno-2); transition: color .3s var(--curva), padding-left .3s var(--curva); }
.piede a:hover { color: var(--oliva); padding-left: .25rem; }
.piede__firma {
  margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--bordo);
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  font-size: .8rem; color: var(--bruno-3);
}
.piede__firma a { color: var(--bruno-2); text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════
   14 · IL BANNER COOKIE — una riga sola
   ═══════════════════════════════════════════════════════════ */
.cookie {
  position: fixed; inset: auto 0 0 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  padding: .6rem 1rem; font-size: .8rem;
  background: #fcf9f0f7; border-top: 1px solid var(--bordo);
  animation: sali .5s var(--curva);
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; max-width: none; }
.cookie a { color: var(--oliva); }
.cookie button {
  font: inherit; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  background: none; border: 1.5px solid var(--bordo); color: var(--bruno);
  padding: .4rem 1rem; border-radius: 100px; cursor: pointer;
  transition: border-color .3s var(--curva), background-color .3s var(--curva);
}
.cookie button:hover { border-color: var(--oliva); background: var(--panna-3); }

/* ═══════════════════════════════════════════════════════════
   16 · IL TELEFONO
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  .menu-btn { display: block; }
  /* il pannello scende da sotto la barra: sta SOPRA la pagina, mai dietro */
  .testa nav {
    position: fixed; inset: 0 0 auto 0; z-index: -1;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--panna); padding: 5.4rem var(--dentro) 1.6rem;
    box-shadow: 0 20px 50px #2b1b0e1a;
    transform: translateY(-101%); transition: transform .45s var(--curva);
    visibility: hidden;
  }
  .testa[data-menu='1'] nav { transform: none; visibility: visible; z-index: 1; }
  /* con il menu aperto la barra è piena, altrimenti il logo resta sul video */
  .testa[data-menu='1'] {
    background: var(--panna);
    box-shadow: 0 1px 0 var(--bordo);
  }
  .testa[data-menu='1'] .testa__logo,
  .testa[data-menu='1'] .carrello-btn,
  .testa[data-menu='1'] .menu-btn { position: relative; z-index: 2; }
  .testa nav a { padding: 1rem 0; border-bottom: 1px solid var(--bordo); font-size: .92rem; letter-spacing: .06em; }
  .testa nav a::after { display: none; }

  .apertura { min-height: min(92svh, 760px); padding-top: 6.5rem; }
  .fiducia { gap: .5rem 1.4rem; }
  .fiducia li { font-size: .68rem; }
  .cassetta__posti { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 420px) {
  .prod__azione .btn { font-size: .64rem; padding: .78rem .5rem; letter-spacing: .08em; }
  .btn { padding: .95rem 1.35rem; }
}

/* niente animazioni per chi le ha disattivate */
@media (prefers-reduced-motion: reduce) {
  .entra > * { opacity: 1; transform: none; }
  .apertura__sfondo video, .apertura__sfondo img { animation: none; }
  .scia { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   17 · LE RICETTE (pagina ricette.html)
   ═══════════════════════════════════════════════════════════ */
.ricetta {
  display: grid; gap: clamp(1.4rem, 3.4vw, 3.4rem); align-items: start;
  grid-template-columns: 1fr; padding-block: clamp(2.6rem, 6vw, 4.6rem);
  border-top: 1px solid var(--bordo);
}
@media (min-width: 900px) {
  .ricetta { grid-template-columns: 1.05fr .95fr; }
  .ricetta:nth-of-type(even) .ricetta__foto { order: -1; }
}
.ricetta:first-of-type { border-top: 0; }

.ricetta__foto {
  position: relative; overflow: hidden; border-radius: var(--raggio-2);
  aspect-ratio: 4/3; box-shadow: var(--ombra-2); position: sticky; top: 100px;
}
.ricetta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--curva); }
.ricetta__foto:hover img { transform: scale(1.05); }

.ricetta__dati {
  display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 1.2rem 0 1.8rem;
  padding: 1rem 0; border-block: 1px solid var(--bordo);
  list-style: none;
}
.ricetta__dati li { display: flex; flex-direction: column; gap: .1rem; }
.ricetta__dati b {
  font-family: 'Newsreader', Georgia, serif; font-size: 1.85rem; line-height: 1; color: var(--terra);
  transition: transform .35s var(--curva);
}
.ricetta__dati li:hover b { transform: translateY(-2px); }
.ricetta__dati span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bruno-3); }

.ricetta h3 {
  font-size: .74rem; letter-spacing: .15em; text-transform: uppercase; color: var(--oliva);
  font-family: 'Figtree', sans-serif; font-weight: 700; margin: 1.6rem 0 .8rem;
}
.ricetta ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem; }
.ricetta ul li {
  padding-left: 1.3rem; position: relative; font-size: .97rem;
  transition: padding-left .3s var(--curva);
}
.ricetta ul li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--grano);
  transition: background-color .3s var(--curva), transform .3s var(--curva);
}
.ricetta ul li:hover { padding-left: 1.55rem; }
.ricetta ul li:hover::before { background: var(--oliva); transform: scale(1.3); }

.ricetta ol { margin: 0; padding: 0; list-style: none; counter-reset: r; display: grid; gap: 1rem; }
.ricetta ol li {
  counter-increment: r; display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  font-size: .97rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bordo);
}
.ricetta ol li:last-child { border-bottom: 0; }
.ricetta ol li::before {
  content: counter(r);
  font-family: 'Newsreader', Georgia, serif; font-size: 1.15rem; color: var(--grano);
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--bordo);
  display: grid; place-items: center;
  transition: background-color .35s var(--curva), color .35s var(--curva), border-color .35s var(--curva);
}
.ricetta ol li:hover::before { background: var(--oliva); color: var(--panna); border-color: var(--oliva); }

.ricetta__salva { margin-top: 1.8rem; }

/* il divisore: una chiocciola disegnata, con misura dichiarata —
   senza width/height un SVG con viewBox diventa un quadrato da 300px */
.divisore { display: grid; place-items: center; padding-block: 1rem; }
.divisore svg { width: 34px; height: 34px; opacity: .55; }
.divisore path { fill: none; stroke: var(--grano); stroke-width: 3; stroke-linecap: round; }

/* ═══ LA STAMPA — «salva la ricetta» stampa SOLO quella ═══ */
@media print {
  .testa, .scia, .cookie, .cassetto, .velo, .piede,
  .salta, .ricetta__salva, .apertura__bottoni,
  .elenco-ricette, .sez--orlo { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .ricetta__foto { box-shadow: none; position: static; }
  .sez { padding-block: 0; }
  .ricetta { page-break-inside: avoid; border: 0; }
  /* con data-sola sul body si stampa una ricetta soltanto */
  body[data-sola] .ricetta { display: none !important; }
  body[data-sola='crostini']  #crostini,
  body[data-sola='pasta']     #pasta,
  body[data-sola='padella']   #padella { display: grid !important; }
}

/* ═══════════════════════════════════════════════════════════
   18 · COSA C'È DENTRO — i dati veri dell'etichetta, nella scheda
   ═══════════════════════════════════════════════════════════ */
.prod__dentro { margin: -.3rem 0 .9rem; border-top: 1px solid var(--bordo); }
.prod__dentro summary {
  list-style: none; cursor: pointer; padding: .6rem 1.2rem .6rem 0; position: relative;
  font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  color: var(--bruno-3);
  transition: color .3s var(--curva);
}
.prod__dentro summary::-webkit-details-marker { display: none; }
.prod__dentro summary:hover { color: var(--oliva); }
.prod__dentro summary::after {
  content: ''; position: absolute; right: .15rem; top: 50%;
  width: 8px; height: 8px; border-right: 1.5px solid var(--grano); border-bottom: 1.5px solid var(--grano);
  transform: translateY(-75%) rotate(45deg); transition: transform .35s var(--curva);
}
.prod__dentro[open] summary::after { transform: translateY(-25%) rotate(-135deg); }
.prod__dentro__corpo { padding-bottom: .9rem; animation: apri .35s var(--curva); }
.prod__dentro__corpo p { font-size: .84rem; line-height: 1.55; margin: 0 0 .6rem; max-width: none; }
.prod__dentro__corpo b { font-weight: 600; }
.prod__allergeni {
  color: var(--terra); font-weight: 600;
  padding: .45rem .7rem; background: #8a3f1e0f; border-radius: 8px;
}
.prod__valori { width: 100%; border-collapse: collapse; font-size: .8rem; margin: .2rem 0 .8rem; }
.prod__valori caption {
  text-align: left; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bruno-3); padding-bottom: .35rem;
}
.prod__valori th, .prod__valori td { text-align: left; padding: .34rem 0; border-bottom: 1px solid var(--bordo); }
.prod__valori th { font-weight: 400; color: var(--bruno-2); }
.prod__valori td { text-align: right; font-variant-numeric: tabular-nums; }
.prod__valori td small { display: block; color: var(--bruno-3); font-size: .72rem; }
.prod__valori tr { transition: background-color .25s var(--curva); }
.prod__valori tr:hover { background: var(--panna-2); }

/* ═══ LE ETICHETTE VERE, in fila ═══ */
.etichette { display: grid; gap: clamp(1rem, 2.4vw, 1.8rem); grid-template-columns: 1fr; }
@media (min-width: 900px) { .etichette { grid-template-columns: repeat(3, 1fr); } }
.etichetta {
  border-radius: var(--raggio); overflow: hidden; background: var(--panna);
  box-shadow: var(--ombra); border: 1px solid var(--bordo);
  transition: transform .45s var(--curva), box-shadow .45s var(--curva);
}
.etichetta:hover { transform: translateY(-4px); box-shadow: var(--ombra-2); }
.etichetta img { width: 100%; height: auto; display: block; }
.etichetta figcaption {
  padding: .8rem 1rem 1rem; font-size: .8rem; color: var(--bruno-2);
}
.etichetta figcaption b { display: block; font-size: .95rem; color: var(--bruno); margin-bottom: .1rem; }

/* ═══════════════════════════════════════════════════════════
   19 · LE VARIANTI — un prodotto, più formati
   Bersagli grandi: da telefono si preme col pollice.
   ═══════════════════════════════════════════════════════════ */
.prod__sommario {
  font-size: .86rem; color: var(--bruno-2); line-height: 1.5;
  margin: 0 0 .75rem; max-width: none;
}

.varianti { margin: 0 0 .8rem; }
.varianti__titolo {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bruno-3); margin: 0 0 .45rem; max-width: none;
}
.varianti__scelte {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem;
}
/* una variante sola occupa tutta la riga, e così l'ultima quando sono dispari:
   il blocco formato resta alto uguale in ogni scheda */
.variante:only-child,
.variante:last-child:nth-child(odd) { grid-column: 1 / -1; }

.variante {
  min-width: 0; min-height: 48px;                      /* 48px: bersaglio da dito */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .05rem; padding: .5rem .7rem; cursor: pointer;
  font: inherit; text-align: center;
  background: var(--panna); border: 1.5px solid var(--bordo); border-radius: 10px;
  transition: border-color .28s var(--curva), background-color .28s var(--curva),
              transform .28s var(--curva), box-shadow .28s var(--curva);
}
.variante:hover { border-color: var(--oliva); transform: translateY(-2px); box-shadow: var(--ombra); }
.variante__peso { font-size: .88rem; font-weight: 700; line-height: 1.1; }
.variante__prezzo { font-size: .74rem; color: var(--bruno-3); line-height: 1.1; }

.variante[aria-checked='true'] {
  background: var(--bruno); border-color: var(--bruno); color: var(--panna);
}
.variante[aria-checked='true'] .variante__prezzo { color: var(--grano-2); }

.prod__prezzo { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem; }
.prod__dapartire {
  font-family: 'Figtree', sans-serif; font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bruno-3);
}
.prod__prezzo__n { font-family: 'Newsreader', Georgia, serif; font-size: 1.3rem; color: var(--terra); }
.prod__prezzo__formato { font-size: .76rem; color: var(--bruno-3); letter-spacing: .03em; }

/* ═══ le righe del carrello, con la quantità ═══ */
.riga {
  display: grid !important;
  grid-template-columns: 56px 1fr auto;
  grid-template-areas: 'foto testo prezzo' 'foto quanti via';
  gap: .35rem .8rem; align-items: center;
}
.riga__foto { grid-area: foto; width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.riga__testo { grid-area: testo; }
.riga__testo b { display: block; font-size: .95rem; line-height: 1.25; }
.riga__testo span { font-size: .78rem; color: var(--bruno-3); }
.riga__prezzo { grid-area: prezzo; justify-self: end; font-family: 'Newsreader', Georgia, serif; font-size: 1.05rem; }
.riga__quanti {
  grid-area: quanti; display: inline-flex; align-items: center; gap: .1rem;
  border: 1px solid var(--bordo); border-radius: 100px; padding: .1rem;
}
.riga__quanti button {
  width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font: inherit; font-size: 1.05rem; line-height: 1; color: var(--bruno);
  transition: background-color .25s var(--curva), color .25s var(--curva);
}
.riga__quanti button:hover { background: var(--bruno); color: var(--panna); }
.riga__n { min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; font-size: .9rem; }
.riga .cassetto__via { grid-area: via; justify-self: end; }

@media (max-width: 420px) {
  .variante { padding: .45rem .5rem; }
  .prod__sommario { display: none; }     /* sul telefono la scheda resta corta */
}

/* il secondo pulsante dei formati grandi: si vede, ma non ruba la scena al listino */
.prod__preventivo { width: 100%; margin-top: .45rem; font-size: .66rem; padding: .7rem .5rem; }
.prod__preventivo__nota {
  font-size: .74rem; line-height: 1.4; color: var(--bruno-3);
  margin: .5rem 0 0; max-width: none;
}

/* ═══════════════════════════════════════════════════════════
   20 · LE SCENE — una trovata per sezione
   Tutte guidate dallo scroll dalla stessa regia in chiara.js.
   Si animano solo transform, opacity e tratti SVG.
   ═══════════════════════════════════════════════════════════ */

/* ─── l'invito a scendere, sotto l'apertura ─── */
.apertura__giu {
  position: absolute; left: 50%; bottom: 1.2rem; z-index: 3;
  width: 1px; height: 46px; overflow: hidden; transform: translateX(-50%);
}
.apertura__giu span {
  position: absolute; inset: 0; background: var(--bruno-3);
  transform-origin: top; animation: cola 2.4s ease-in-out infinite;
}
@keyframes cola {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ─── 4 · I QUATTRO MINUTI ─── */
.sez--tempo { padding-block: var(--respiro); }
.tempo { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 880px) { .tempo { grid-template-columns: 1.15fr .85fr; } }

.tempo__passi { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem; counter-reset: tp; }
.tempo__passo {
  counter-increment: tp;
  display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline;
  padding: .9rem 1rem .9rem .9rem; border-radius: var(--raggio);
  background: transparent; border: 1px solid transparent;
  transition: background-color .5s var(--curva), border-color .5s var(--curva),
              transform .5s var(--curva), opacity .5s var(--curva);
  opacity: .42;
}
.tempo__passo::before {
  content: '0' counter(tp);
  font-family: 'Newsreader', Georgia, serif; font-size: 1.05rem; color: var(--grano);
  transition: color .5s var(--curva);
}
.tempo__passo[data-acceso='1'] {
  opacity: 1; background: var(--panna); border-color: var(--bordo);
  transform: translateX(6px); box-shadow: var(--ombra);
}
.tempo__passo[data-acceso='1']::before { color: var(--oliva); }
.tempo__passo b { display: block; font-size: 1.02rem; font-weight: 600; }
.tempo__passo span { font-size: .9rem; color: var(--bruno-2); }

.tempo__orologio { position: relative; justify-self: center; width: min(320px, 78vw); aspect-ratio: 1; }
.tempo__orologio svg { width: 100%; height: 100%; }
.tempo__pista { fill: none; stroke: var(--bordo); stroke-width: 6; }
.tempo__arco {
  fill: none; stroke: var(--oliva); stroke-width: 6; stroke-linecap: round;
  filter: drop-shadow(0 2px 10px #56682f2e);
}
.tempo__centro {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .1rem;
}
.tempo__cifra {
  font-family: 'Newsreader', Georgia, serif; font-size: clamp(3.4rem, 9vw, 5rem);
  line-height: 1; color: var(--terra); font-variant-numeric: tabular-nums;
}
.tempo__unita {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--bruno-3);
}

/* ─── 6 · UNA STAGIONE INTERA — la sezione si ferma e il tempo passa ─── */
.sez--stagioni { position: relative; height: 320svh; }
.stagioni__fisso {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1fr;
}
@media (min-width: 900px) { .stagioni__fisso { grid-template-columns: 1fr 1fr; } }

.stagioni__foto { position: relative; overflow: hidden; }
.stagioni__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.6s var(--curva), filter 1.2s var(--curva);
}
.sez--stagioni[data-tappa='1'] .stagioni__foto img { transform: scale(1.14) translateY(-1.5%); }
.sez--stagioni[data-tappa='2'] .stagioni__foto img { transform: scale(1.2) translateY(-3%); filter: saturate(.92); }
.sez--stagioni[data-tappa='3'] .stagioni__foto img { transform: scale(1.26) translateY(-4.5%); filter: saturate(.86) brightness(1.04); }
.stagioni__velo {
  position: absolute; inset: 0;
  background: linear-gradient(to top, #fcf9f0cc 0%, #fcf9f000 42%);
}
@media (min-width: 900px) {
  .stagioni__velo { background: linear-gradient(to right, #fcf9f000 55%, #fcf9f0e6 100%); }
}

.stagioni__testo {
  display: grid; align-content: center;
  padding: clamp(1.4rem, 4vw, 3rem) var(--dentro);
  background: var(--panna);
}
@media (min-width: 900px) { .stagioni__testo { background: transparent; } }
.stagioni__dentro { width: min(560px, 100%); }

.stagioni__tappe { position: relative; margin-top: clamp(1.4rem, 3vw, 2.2rem); display: grid; }
.stagione {
  grid-area: 1 / 1; opacity: 0; transform: translateY(14px);
  /* esce SUBITO, entra dopo: due testi sovrapposti non si leggono mai */
  transition: opacity .18s var(--curva), transform .18s var(--curva);
  pointer-events: none;
}
.stagione[data-viva='1'] {
  opacity: 1; transform: none; pointer-events: auto;
  transition: opacity .45s var(--curva) .16s, transform .5s var(--curva) .16s;
}
.stagione__n {
  display: block; font-family: 'Newsreader', Georgia, serif; font-size: 1.1rem;
  color: var(--grano); margin-bottom: .3rem;
}
.stagione b { display: block; font-family: 'Newsreader', Georgia, serif; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; line-height: 1.12; margin-bottom: .4rem; }
.stagione p { color: var(--bruno-2); max-width: 34ch; margin: 0; }

.stagioni__barra {
  margin-top: clamp(1.6rem, 3vw, 2.4rem); height: 2px; background: var(--bordo);
  border-radius: 2px; overflow: hidden;
}
.stagioni__barra span {
  display: block; height: 100%; background: var(--oliva);
  transform: scaleX(0); transform-origin: left;
}

/* ─── 9 · I NUMERI CHE SI CONTANO ─── */
.numeri {
  list-style: none; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr);
}
.numeri li {
  padding: 1.1rem 1.2rem; background: var(--panna); border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  transition: transform .4s var(--curva), box-shadow .4s var(--curva), border-color .4s var(--curva);
}
.numeri li:hover { transform: translateY(-4px); box-shadow: var(--ombra); border-color: var(--grano); }
.numeri b {
  display: block; font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.9rem, 4.4vw, 2.7rem); line-height: 1; color: var(--terra);
  font-variant-numeric: tabular-nums; margin-bottom: .25rem;
}
.numeri span { font-size: .82rem; color: var(--bruno-2); line-height: 1.4; display: block; }
@media (max-width: 620px) {
  .numeri { grid-template-columns: 1fr; }
  .numeri li { display: flex; align-items: baseline; gap: .8rem; }
  .numeri b { margin: 0; font-size: 1.8rem; }
}

/* ─── 10 · IL VIAGGIO DEL PACCO ─── */
.viaggio { margin-top: clamp(1.8rem, 3.4vw, 2.8rem); }
.viaggio__mappa { width: 100%; height: clamp(74px, 11vw, 120px); display: block; }
.viaggio__ombra { fill: none; stroke: var(--bordo); stroke-width: 2.5; stroke-linecap: round; }
.viaggio__filo {
  fill: none; stroke: var(--oliva); stroke-width: 2.5; stroke-linecap: round;
  filter: drop-shadow(0 1px 6px #56682f26);
}
.viaggio__soste {
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) { .viaggio__soste { grid-template-columns: repeat(3, 1fr); } }
.viaggio__sosta {
  padding-top: 1rem; border-top: 2px solid var(--bordo);
  opacity: .45; transition: opacity .55s var(--curva), border-color .55s var(--curva), transform .55s var(--curva);
}
.viaggio__sosta[data-toccata='1'] { opacity: 1; border-color: var(--oliva); transform: translateY(-3px); }
.viaggio__sosta b { display: block; font-size: 1.02rem; font-weight: 600; margin-bottom: .15rem; }
.viaggio__sosta span { font-size: .9rem; color: var(--bruno-2); }

/* ─── la citazione del titolare ─── */
.dice { margin: 1.8rem 0 0; padding-left: 1.2rem; border-left: 2px solid var(--grano); }
.dice p {
  font-family: 'Newsreader', Georgia, serif; font-size: 1.22rem; line-height: 1.4;
  margin-bottom: .5rem;
}
.dice footer {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bruno-3);
}

/* ─── il legamento di testo: un filo che si tira ─── */
.filo {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  color: var(--oliva); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.filo::after {
  content: ''; width: 22px; height: 1.5px; background: currentColor;
  transition: width .35s var(--curva);
}
.filo:hover::after { width: 38px; }

/* ─── le fotografie che respirano nella cornice ─── */
[data-parallasse] { overflow: hidden; }
[data-parallasse] img { will-change: transform; }

/* ─── chi ha chiesto meno movimento vede tutto fermo e completo ─── */
@media (prefers-reduced-motion: reduce) {
  .sez--stagioni { height: auto; }
  .stagioni__fisso { position: static; height: auto; }
  .stagioni__tappe { display: grid; gap: 1.6rem; }
  .stagione { grid-area: auto; opacity: 1; transform: none; pointer-events: auto; }
  .tempo__passo { opacity: 1; }
  .viaggio__sosta { opacity: 1; border-color: var(--oliva); }
  .apertura__giu { display: none; }
  .apertura__sfondo { clip-path: none !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   21 · I VIDEO NELLE SEZIONI
   ═══════════════════════════════════════════════════════════ */
.stagioni__video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* la colonna destra dei «quattro minuti»: il gesto e il quadrante */
.tempo__lato { display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); justify-items: center; }
.tempo__gesto {
  width: 100%; max-width: 420px; aspect-ratio: 16/10;
  border-radius: var(--raggio-2); overflow: hidden; box-shadow: var(--ombra-2);
}
.tempo__gesto video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* il video dentro una fascia prende le stesse misure di una fotografia */
.fascia__foto video { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 879px) {
  .tempo__lato { grid-template-columns: 1fr; }
  .tempo__gesto { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   22 · SCHEDE TUTTE DELLA STESSA ALTEZZA
   Le righe della scheda sono fissate una per una: qualunque sia
   la lunghezza del testo, i prezzi e i pulsanti restano allineati
   fra una scheda e l'altra, su ogni riga della griglia.
   ═══════════════════════════════════════════════════════════ */
.griglia-prod { align-items: stretch; grid-auto-rows: 1fr; }

.prod__corpo {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;   /* nome · sommario · formato · prezzo · azione */
  padding: 1.05rem .2rem 0;
}

/* il sommario occupa sempre due righe, anche quando il testo ne riempie una */
.prod__sommario {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(.86rem * 1.5 * 2);
}

/* Lo slot del formato c'è sempre, anche con un formato solo: così «Formato»,
   prezzo e pulsante stanno alla stessa altezza in tutte le schede. In griglia
   basta UNA riga di pillole, perché lì sono strette e senza prezzo. */
.prod .varianti { min-height: 74px; }
/* il nome tiene sempre due righe: così «Formato», prezzo e pulsante
   stanno alla stessa altezza in tutte le schede, non solo la scheda */
.prod__nome { min-height: calc(1.16rem * 1.18 * 2); }

.prod__prezzo { min-height: 2.1rem; align-items: baseline; }

/* il pulsante resta incollato in fondo alla scheda */
.prod__azione { align-self: end; padding-bottom: .2rem; }

/* Quando la scheda è stretta «Aggiungi al carrello» va su due righe mentre
   «Scegli il formato» ne occupa una: il pulsante cambierebbe altezza appena
   scegli il formato. Qui gli riserviamo due righe fin dall'inizio, ma solo
   nelle schede strette — su schermo largo il pulsante resta basso. */
.prod { container-type: inline-size; }
@container (max-width: 230px) {
  .prod__azione .btn { min-height: calc(3.36em + 1.64rem + 3px); }
}

@media (max-width: 480px) {
  .prod__sommario { display: none; }      /* sul telefono la scheda resta corta */
  .prod__corpo { grid-template-rows: auto auto auto 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   23 · L'ELENCO DELLE RICETTE — l'indice che si apre
   Da telefono è una lista vera: foto piccola a sinistra, testo a
   destra. Da schermo largo diventa una griglia di tre schede.
   ═══════════════════════════════════════════════════════════════ */

.elenco-ricette {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.9rem, 2vw, 1.5rem);
  /* tutte le righe alte uguali: nessuna scheda più corta dell'altra
     perché il titolo va a capo una volta sola */
  grid-auto-rows: 1fr;
}
@media (min-width: 900px) { .elenco-ricette { grid-template-columns: repeat(3, 1fr); } }

.anteprima {
  display: grid; grid-template-columns: 116px 1fr; gap: 1rem;
  align-items: center; height: 100%;
  text-decoration: none; color: inherit;
  background: var(--panna);
  border: 1px solid var(--bordo); border-radius: var(--raggio-2);
  padding: .7rem; overflow: hidden;
  transition: transform .5s var(--curva), box-shadow .5s var(--curva), border-color .5s var(--curva);
}
@media (min-width: 900px) {
  .anteprima { grid-template-columns: 1fr; align-items: start; gap: 0; padding: .55rem .55rem 1.15rem; }
}
.anteprima:hover, .anteprima:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--ombra-2);
  border-color: var(--grano);
}

.anteprima__foto {
  display: block; position: relative; overflow: hidden;
  border-radius: calc(var(--raggio-2) - 8px);
  aspect-ratio: 1 / 1; background: var(--panna-3);
}
@media (min-width: 900px) { .anteprima__foto { aspect-ratio: 4 / 3; } }
.anteprima__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.1s var(--curva);
}
.anteprima:hover .anteprima__foto img { transform: scale(1.06); }

/* il tempo, appoggiato sulla foto */
.anteprima__tempo {
  position: absolute; left: .45rem; bottom: .45rem;
  display: inline-block; padding: .18rem .5rem;
  background: var(--panna); border-radius: 100px;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--bruno);
}

.anteprima__corpo { display: grid; align-content: start; gap: .3rem; }
@media (min-width: 900px) { .anteprima__corpo { padding: 1rem .6rem 0; gap: .35rem; } }

.anteprima__occhiello {
  display: block; font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 700; color: var(--oliva);
}
.anteprima__nome {
  display: block; font-size: clamp(1.02rem, 2.1vw, 1.22rem);
  line-height: 1.24; font-weight: 600; color: var(--bruno);
}
.anteprima__riga {
  display: block; font-size: .86rem; line-height: 1.5; color: var(--bruno-2);
}
.anteprima__dati {
  display: block; font-size: .76rem; color: var(--bruno-3);
}
.anteprima__dati b { color: var(--bruno-2); font-weight: 700; }

/* la freccia dell'elenco cresce al passaggio, come gli altri fili */
.anteprima .filo { margin-top: .35rem; }
.anteprima:hover .filo::after { width: 38px; }

/* da telefono la riga di descrizione e la freccia si tolgono:
   l'elenco resta scorrevole con il pollice */
@media (max-width: 560px) {
  .anteprima__riga, .anteprima .filo { display: none; }
  .anteprima__corpo { gap: .25rem; }
}

/* la ricetta aperta non finisce sotto l'intestazione fissa */
.ricetta { scroll-margin-top: 92px; }

/* ═══════════════════════════════════════════════════════════════
   24 · IL KIT DA COMPORRE — è un prodotto, sta dentro il catalogo
   La cassetta non è più una sezione a sé: è l'ultima scheda della
   linea vasetti, larga quanto la griglia, e si compone qui dentro.
   ═══════════════════════════════════════════════════════════════ */

.kit {
  background: var(--panna-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-2);
  padding: clamp(1.3rem, 3.4vw, 2.6rem);
}
.kit .sez__sotto { max-width: 46ch; }

/* il cartellino del kit si distingue dagli altri due */
.prod__tag--kit { color: var(--grano); }

/* la riga dei kit: quello già fatto a sinistra, quello da comporre a destra.
   Due elementi, mai uno solo in riga. */
.kit-riga { display: grid; gap: clamp(1rem, 2.2vw, 1.9rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .kit-riga { grid-template-columns: 1fr 2fr; } }

/* ═══════════════════════════════════════════════════════════════
   25 · LA PAGINA DEL PRODOTTO
   Una per prodotto, il file si chiama come l'handle: è la forma che
   avranno su Shopify. Sopra foto e acquisto, sotto la scheda tecnica.
   ═══════════════════════════════════════════════════════════════ */

/* la scheda in griglia è cliccabile: tutta la foto è un collegamento */
.prod__vai { position: absolute; inset: 0; z-index: 1; }
.prod__nome a {
  color: inherit; text-decoration: none;
  background-image: linear-gradient(var(--grano), var(--grano));
  background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--curva);
}
.prod:hover .prod__nome a, .prod__nome a:focus-visible { background-size: 100% 1.5px; }

/* ── le briciole ── */
.briciole {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .78rem; color: var(--bruno-3); margin-bottom: clamp(1.4rem, 3vw, 2.4rem);
}
.briciole a { color: var(--bruno-2); text-decoration: none; }
.briciole a:hover { color: var(--oliva); }
.briciole b { color: var(--bruno); font-weight: 600; }

/* ── foto e acquisto ── */
.pdp__alto { display: grid; gap: clamp(1.6rem, 4vw, 3.4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .pdp__alto { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .pdp__alto { grid-template-columns: 1.1fr .9fr; } }

.pdp__foto {
  position: relative; overflow: hidden; border-radius: var(--raggio-2);
  background: var(--panna-2); box-shadow: var(--ombra-2); aspect-ratio: 1;
}
.pdp__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .pdp__foto { position: sticky; top: 92px; } }

.pdp__nome { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: .5rem; }
.pdp__sommario { font-size: 1.04rem; color: var(--bruno-2); margin-bottom: 1.6rem; max-width: 46ch; }
.pdp .varianti { max-width: 30rem; }
.pdp__prezzo { font-size: 1.9rem; margin-bottom: 1.2rem; }
.pdp__azione .btn { width: 100%; max-width: 30rem; padding: 1.05rem 1.4rem; }
.pdp__preventivo { margin-top: .7rem; }
.pdp__preventivo .btn { width: 100%; max-width: 30rem; }
.pdp__nota { font-size: .84rem; color: var(--bruno-3); margin-top: .6rem; max-width: 42ch; }

.pdp__sintesi {
  margin: 2rem 0 0; padding-top: 1.3rem; border-top: 1px solid var(--bordo);
  display: grid; gap: .75rem; max-width: 30rem;
}
.pdp__sintesi > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.pdp__sintesi dt { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--bruno-3); }
.pdp__sintesi dd { margin: 0; font-size: .92rem; text-align: right; }

/* ── la scheda tecnica, sotto ── */
.pdp__basso {
  margin-top: clamp(2.6rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--bordo);
  display: grid; gap: clamp(1.6rem, 3.4vw, 2.6rem); grid-template-columns: 1fr;
}
@media (min-width: 760px)  { .pdp__basso { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pdp__basso { grid-template-columns: repeat(3, 1fr); } }

.pdp__blocco h2 {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oliva); font-weight: 700; margin: 0 0 .8rem;
}
.pdp__blocco h3 {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bruno-3); font-weight: 700; margin: 1.3rem 0 .5rem;
}
.pdp__blocco p { font-size: .93rem; color: var(--bruno-2); }
.pdp__valori { width: 100%; }
.pdp__contiene { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; }
.pdp__contiene li { font-size: .93rem; padding-bottom: .55rem; border-bottom: 1px solid var(--bordo); }
.pdp__contiene a { color: var(--bruno); text-decoration: none; border-bottom: 1.5px solid var(--grano); }
.pdp__contiene a:hover { color: var(--oliva); border-color: var(--oliva); }

.pdp__indietro { margin-top: clamp(2rem, 4vw, 3rem); }

/* ── della stessa linea ── */
.pdp__altri {
  list-style: none; margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; padding: 0;
  display: grid; gap: clamp(1rem, 2.2vw, 1.8rem); grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .pdp__altri { grid-template-columns: repeat(3, 1fr); } }
.pdp__altri a {
  display: grid; gap: .6rem; text-decoration: none; color: inherit;
  transition: transform .45s var(--curva);
}
.pdp__altri a:hover { transform: translateY(-4px); }
.pdp__altri__foto {
  display: block; overflow: hidden; border-radius: var(--raggio);
  aspect-ratio: 1; background: var(--panna-3); box-shadow: var(--ombra);
}
.pdp__altri__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--curva); }
.pdp__altri a:hover .pdp__altri__foto img { transform: scale(1.06); }
.pdp__altri__nome { display: block; font-size: .98rem; line-height: 1.25; }
.pdp__altri__prezzo {
  display: block; font-family: 'Newsreader', Georgia, serif;
  font-size: 1.1rem; color: var(--terra);
}

/* nella pagina del prodotto non serve riservare niente: la scheda è una sola */
.pdp .varianti { min-height: 0; }

/* ═══════════════════════════════════════════════════════════════
   26 · LE CATEGORIE — la prima cosa dopo l'apertura
   Tutte in riga: due per riga dal telefono, tre da schermo largo.
   ═══════════════════════════════════════════════════════════════ */

.sez--corta { padding-block: clamp(2.4rem, 5vw, 4rem); }

.categorie {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(.7rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);      /* telefono: due per riga, il resto a capo */
  grid-auto-rows: 1fr;                        /* nomi di lunghezza diversa, riquadri uguali */
}
@media (min-width: 760px) { .categorie { grid-template-columns: repeat(3, 1fr); } }

.categorie a {
  display: grid; gap: .1rem; height: 100%;
  text-decoration: none; color: inherit;
  padding: .55rem .55rem 1rem;
  background: var(--panna); border: 1px solid var(--bordo); border-radius: var(--raggio-2);
  transition: transform .45s var(--curva), box-shadow .45s var(--curva), border-color .45s var(--curva);
}
.categorie a:hover, .categorie a:focus-visible {
  transform: translateY(-4px); box-shadow: var(--ombra-2); border-color: var(--grano);
}

.categorie__foto {
  display: block; overflow: hidden; margin-bottom: .75rem;
  border-radius: calc(var(--raggio-2) - 8px);
  aspect-ratio: 3 / 2; background: var(--panna-3);
}
.categorie__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1s var(--curva); }
.categorie a:hover .categorie__foto img { transform: scale(1.06); }

.categorie__nome {
  display: block; padding-inline: .45rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(1.02rem, 2.2vw, 1.3rem); line-height: 1.2; color: var(--bruno);
}
.categorie__conta {
  display: block; padding-inline: .45rem;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--oliva);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════
   27 · LE PILLOLE DEL FORMATO IN GRIGLIA
   Nella scheda servono solo a dire quanti formati ci sono: strette,
   su una riga sola, senza prezzo. Il prezzo per formato sta nella
   pagina del prodotto, dove c'è lo spazio per leggerlo.
   ═══════════════════════════════════════════════════════════════ */
.prod .variante__prezzo { display: none; }
.prod .variante { min-height: 38px; padding: .4rem .3rem; border-radius: 8px; }
.prod .variante__peso { font-size: .8rem; }
.prod .varianti__scelte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.prod .varianti__scelte:has(.variante:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* con tre formati la riga è piena: la regola che allargava l'ultimo dispari
   vale solo dove le colonne restano due */
.prod .varianti__scelte:has(.variante:nth-child(3)) .variante:last-child:nth-child(odd) { grid-column: auto; }

/* ═══════════════════════════════════════════════════════════════
   28 · IL TRACCIAMENTO
   Un modulo solo: corriere + numero. Non abbiamo un server, quindi
   il numero si apre sul sito del corriere — ma il cliente non deve
   ricopiarlo a mano da nessuna parte.
   ═══════════════════════════════════════════════════════════════ */

.traccia {
  margin-top: clamp(1.8rem, 3.4vw, 2.6rem);
  padding: clamp(1.3rem, 3vw, 2.2rem);
  background: var(--panna-2);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio-2);
}
.traccia__riga { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .traccia__riga { grid-template-columns: minmax(0,1fr) minmax(0,1.4fr); } }

.traccia__campo { display: grid; gap: .45rem; }
.traccia__campo label {
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--bruno-3); font-weight: 700;
}
.traccia__campo select,
.traccia__campo input {
  font: inherit; font-size: 1rem; color: var(--bruno);
  background: var(--panna); border: 1.5px solid var(--bordo); border-radius: 10px;
  padding: .85rem .9rem; width: 100%; min-height: 50px;
  transition: border-color .3s var(--curva), box-shadow .3s var(--curva);
}
.traccia__campo select:focus-visible,
.traccia__campo input:focus-visible {
  outline: 0; border-color: var(--oliva); box-shadow: 0 0 0 3px #56682f22;
}

.traccia__aiuto { font-size: .86rem; color: var(--bruno-3); margin: .9rem 0 0; }
.traccia__esito { font-size: .9rem; margin: .5rem 0 0; min-height: 1.4rem; }
.traccia__esito[data-stato='no'] { color: var(--terra); font-weight: 600; }
.traccia__esito[data-stato='si'] { color: var(--oliva); font-weight: 600; }

.traccia__fondo {
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--bordo);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}

.traccia__note {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid; gap: clamp(1.2rem, 2.6vw, 2rem); grid-template-columns: 1fr;
}
@media (min-width: 760px) { .traccia__note { grid-template-columns: repeat(3, 1fr); } }
.traccia__note h2 {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oliva); font-weight: 700; margin: 0 0 .6rem;
}
.traccia__note p { font-size: .93rem; color: var(--bruno-2); }

/* i tre corrieri, nella pagina spedizione */
.corrieri {
  list-style: none; margin: clamp(1.4rem,3vw,2.2rem) 0 0; padding: 0;
  display: grid; gap: clamp(.8rem,2vw,1.4rem); grid-template-columns: 1fr;
}
@media (min-width: 760px) { .corrieri { grid-template-columns: repeat(3, 1fr); } }
.corrieri li {
  background: var(--panna); border: 1px solid var(--bordo); border-radius: var(--raggio);
  padding: 1.1rem 1.2rem;
}
.corrieri b { display: block; font-family: 'Newsreader', Georgia, serif; font-size: 1.2rem; margin-bottom: .3rem; }
.corrieri span { font-size: .9rem; color: var(--bruno-2); }

/* ═══════════════════════════════════════════════════════════════
   29 · IL TRITTICO DELL'ALLEVAMENTO — 20/09/2026
   Tre riquadri con le fotografie vere dell'azienda: nasce · cresce ·
   mangia. Da telefono è una riga che scorre (mai una gigante sotto
   l'altra), da 640 px in su diventa una riga di tre.
   ═══════════════════════════════════════════════════════════════ */
.trittico {
  list-style: none; padding: 0;
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  display: grid; gap: clamp(.9rem, 2vw, 1.5rem);
  grid-auto-flow: column; grid-auto-columns: 74%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .4rem;
}
.trittico::-webkit-scrollbar { display: none; }
.trittico > li { scroll-snap-align: start; }
@media (min-width: 640px) {
  .trittico {
    grid-auto-flow: row; grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible; padding-bottom: 0;
  }
}
.trittico__foto {
  display: block; overflow: hidden;
  border-radius: var(--raggio); aspect-ratio: 4/3;
  background: var(--panna-3); box-shadow: var(--ombra);
  margin-bottom: .85rem;
}
.trittico__foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--curva);
}
.trittico > li:hover .trittico__foto img { transform: scale(1.05); }
.trittico b {
  display: block; font-family: 'Newsreader', Georgia, serif;
  font-size: 1.16rem; line-height: 1.25; margin-bottom: .22rem;
}
.trittico > li > span:last-child { font-size: .9rem; color: var(--bruno-2); }
@media (prefers-reduced-motion: reduce) {
  .trittico__foto img { transition: none; }
  .trittico > li:hover .trittico__foto img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   30 · L'ALBUM DELL'ALLEVAMENTO — 20/09/2026
   Le fotografie del cliente, in griglia. Due per riga da telefono,
   tre da 760 px: mai una gigante sotto l'altra.
   ═══════════════════════════════════════════════════════════════ */
.galleria {
  list-style: none; padding: 0;
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  display: grid; gap: clamp(.6rem, 1.6vw, 1.1rem);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 760px) { .galleria { grid-template-columns: repeat(3, 1fr); } }
.galleria li {
  overflow: hidden; border-radius: var(--raggio);
  aspect-ratio: 4/3; background: var(--panna-3); box-shadow: var(--ombra);
}
.galleria img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1s var(--curva);
}
.galleria li:hover img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .galleria img { transition: none; }
  .galleria li:hover img { transform: none; }
}