/* Zeus Anacardi — pages.css v3 (redesign 2026-07-16)
   Identità: "Apotecario mediterraneo" (brand.md) — erbario editoriale + calore.
   Mai clinica fredda, mai spa-botanica generica.
   Palette BLOCCATA da Marco: salvia (colore-firma, parsimonia) + bianco carta + neutro caldo
   + inchiostro verde-scurissimo. Motivo firma: MEANDRO GRECO.
   design.md: ogni sezione ha un registro proprio — niente fotocopie strutturali.
   Mobile-first. Gli effetti hover non portano mai contenuto essenziale. */

/* ============ Device firma: meandro greco ============ */
.meandro { height: 1rem; background-color: var(--color-primary); opacity: .55;
  -webkit-mask-image: var(--meandro); mask-image: var(--meandro);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 2rem 1rem; mask-size: 2rem 1rem;
  -webkit-mask-position: center; mask-position: center; }

/* ============ §01 — Hero (video reale) ============ */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end;
  min-height: min(92svh, 44rem); border-bottom: 1px solid var(--color-border); }
.hero__media { position: absolute; z-index: -2; inset: 0; background: var(--color-primary-dark); }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* SEMPRE (design.md): il testo si protegge sempre dal video sotto. */
.hero__media::after { position: absolute; inset: 0; content: '';
  background: linear-gradient(180deg, hsl(114 24% 12% / .30) 0%, hsl(114 24% 12% / .58) 48%, hsl(114 24% 12% / .90) 100%); }
.hero .wrap { position: relative; padding-block: clamp(5rem, 12vw, 7rem) clamp(2.2rem, 5vw, 3.6rem); }
.hero__payoff { display: inline-flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem;
  color: var(--color-accent-soft); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.hero__payoff::before { width: 2rem; height: .75rem; content: ''; background-color: var(--color-accent-soft);
  -webkit-mask-image: var(--meandro); mask-image: var(--meandro);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 2rem .75rem; mask-size: 2rem .75rem; }
.hero h1 { max-width: 15ch; color: var(--primitive-white); }
.hero__lead { max-width: 44rem; margin: 0; color: hsl(0 0% 100% / .92); font-size: var(--fs-lead); line-height: 1.5; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.hero .btn-secondary { color: var(--primitive-white); border-color: hsl(0 0% 100% / .5); }
.hero .btn-secondary:hover { border-color: var(--primitive-white); background: hsl(0 0% 100% / .12); }

/* ============ §01 — Striscia condizioni, sopra la hero ============ */
/* Scorre in continuo su tutte le larghezze, come sui siti ufficiali di Zeus.
   Tre copie della lista: mentre la prima esce, la seconda è già in campo, quindi
   il ciclo non ha mai un vuoto. L'animazione trasla di un terzo esatto. */
.marquee { overflow: hidden; border-bottom: 1px solid var(--color-border);
  background: var(--color-primary-dark); color: var(--primitive-white); }
.marquee__track { display: flex; width: max-content; animation: marquee-scorre 42s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__list { display: flex; flex: none; align-items: center; gap: clamp(1.8rem, 4vw, 3.4rem);
  margin: 0; padding: .8rem clamp(.9rem, 2vw, 1.7rem) .8rem 0; list-style: none; }
.marquee li { display: flex; flex: none; align-items: center; gap: clamp(1.8rem, 4vw, 3.4rem);
  font-size: var(--fs-small); font-weight: 500; letter-spacing: .015em; white-space: nowrap; }
.marquee li::after { width: 2.2rem; height: .75rem; content: ''; background-color: var(--color-accent-soft);
  opacity: .85;
  -webkit-mask-image: var(--meandro); mask-image: var(--meandro);
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x; -webkit-mask-size: 2.2rem .75rem; mask-size: 2.2rem .75rem; }
@keyframes marquee-scorre { to { transform: translateX(-33.3333%); } }
/* Nessuna eccezione per `prefers-reduced-motion` (decisione di Marco, 2026-07-27).
   Prima c'era: con gli "Effetti animazione" di Windows spenti la striscia restava
   ferma, mostrava una sola delle tre copie e sembrava rotta — è il difetto
   segnalato il 2026-07-27. I siti ufficiali di Zeus scorrono comunque, e questa
   striscia deve fare la stessa cosa per tutti. Resta la pausa al passaggio del
   mouse, che è l'appiglio per chi ha bisogno di fermarla per leggere. */

/* ============ §03 — Chi siamo: tessere con immagine (LAY-003) ============ */
/* Griglia di tessere quadrate: foto, velo scuro, numero e titolo in basso.
   Il click apre il testo in un dialog — la fisarmonica precedente costringeva
   a scorrere mezza pagina per leggere due righe. */
.temi { background: var(--color-canvas); }
.temi__intro { max-width: 44rem; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.temi__grid { display: grid; grid-template-columns: 1fr; gap: .55rem; }
@media (min-width: 640px) { .temi__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .temi__grid { grid-template-columns: repeat(3, 1fr); } }

.tema { position: relative; isolation: isolate; overflow: hidden; display: grid; align-content: end;
  gap: .3rem; aspect-ratio: 1 / 1; padding: clamp(1rem, 2.4vw, 1.6rem); border: 0;
  background: var(--color-primary-dark); color: var(--primitive-white);
  cursor: pointer; text-align: left; font: inherit; }
.tema img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.tema::after { position: absolute; z-index: -1; inset: 0; content: '';
  background: linear-gradient(180deg, hsl(114 24% 10% / .12) 30%, hsl(114 24% 10% / .84));
  transition: background .35s ease; }
@media (hover: hover) {
  .tema:hover img { transform: scale(1.05); }
  .tema:hover::after { background: linear-gradient(180deg, hsl(114 24% 10% / .3) 10%, hsl(114 24% 10% / .9)); }
}
.tema:focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.tema__n { color: var(--color-accent-soft); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .16em; }
.tema__t { max-width: 16ch; color: var(--primitive-white); font-family: var(--ff-display);
  font-size: clamp(1.35rem, 2.5vw, 1.85rem); font-weight: 500; line-height: 1.1; letter-spacing: -.02em; }
.tema__go { position: absolute; top: clamp(1rem, 2.4vw, 1.6rem); right: clamp(1rem, 2.4vw, 1.6rem);
  display: grid; width: 2.1rem; height: 2.1rem; border: 1px solid hsl(0 0% 100% / .5); border-radius: 50%;
  color: var(--primitive-white); font-size: 1.1rem; line-height: 1; place-items: center; transition: background .25s ease; }
.tema:hover .tema__go { background: hsl(0 0% 100% / .18); }
/* La tessera delle certificazioni ha la sua foto dal 2026-07-27 (prima era una
   tessera verde piatta, l'unica senza immagine della griglia). Il velo qui è
   più scuro delle altre: sopra ci vanno tre pastiglie di testo, non solo un
   titolo, e sul chiaro non si leggerebbero. */
.tema--certs { background: var(--color-primary); }
.tema--certs::after { background: linear-gradient(180deg, hsl(114 24% 10% / .3) 20%, hsl(114 24% 10% / .9)); }
.tema--certs .certs { margin-top: .8rem; }
.tema--certs .cert-badge { border-color: hsl(0 0% 100% / .45); color: var(--primitive-white); }

.tema-dialog { max-width: min(46rem, 92vw); padding: clamp(1.6rem, 4vw, 2.6rem); border: 0;
  border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); box-shadow: var(--ombra-forte); }
.tema-dialog::backdrop { background: hsl(114 24% 8% / .58); }
.tema-dialog h3 { margin: .2rem 0 1rem; font-size: clamp(1.6rem, 4vw, 2.3rem); }
.tema-dialog p { max-width: 58ch; color: var(--color-text-soft); }
.tema-dialog > div > :last-child { margin-bottom: 0; }
.tema-dialog__x { position: absolute; top: .8rem; right: .8rem; width: 2.2rem; height: 2.2rem;
  border: 1px solid var(--color-border-strong); border-radius: 50%; background: transparent; cursor: pointer; }
.tema-dialog__fig { margin: 1.2rem 0 0; }
.tema-dialog__fig video { width: 100%; border: 1px solid var(--color-border); }
.tema-dialog__fig figcaption { margin-top: .4rem; color: var(--color-text-soft); font-size: var(--fs-micro); }
.tema-dialog__out { color: var(--color-primary); font-weight: 600; }
.tema-dialog__out:hover { text-decoration: underline; }

/* ============ §04 — Recensioni (REC-001) ============ */
/* Valutazione complessiva in cima, poi carosello: la card scelta si alza e va a fuoco,
   le altre restano visibili ai lati. Frecce laterali + pallini. */
.rec { border-top: 1px solid var(--color-border); background: var(--color-surface-soft); }
.rec__score { display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .8rem clamp(1.2rem, 3vw, 2.4rem); max-width: 34rem; margin: 0 auto clamp(1.8rem, 4vw, 2.8rem);
  padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-s);
  background: var(--color-surface); box-shadow: var(--ombra-s); }
.rec__avg { display: flex; align-items: baseline; gap: .35rem; }
.rec__avg strong { font-family: var(--ff-display); font-size: clamp(2.2rem, 5vw, 2.9rem); font-weight: 600; line-height: 1; }
.rec__avg small { color: var(--color-text-soft); font-size: var(--fs-micro); }
.rec__meta { display: grid; gap: .15rem; }
.rec__stars { color: var(--color-accent); font-size: 1.05rem; letter-spacing: .2em; }
.rec__count { color: var(--color-text-soft); font-size: var(--fs-small); }
.rec__src { color: var(--color-primary); font-weight: 600; font-size: var(--fs-small); }
.rec__src:hover { text-decoration: underline; }

.rec__stage { position: relative; display: flex; align-items: center; gap: .5rem; }
.rec__track { display: flex; overflow-x: auto; gap: .9rem; margin: 0; padding: .9rem .2rem 1.4rem;
  list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.rec__track::-webkit-scrollbar { display: none; }
.rec__card { display: grid; flex: 0 0 min(26rem, 78vw); align-content: start; gap: .7rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem); border: 1px solid var(--color-border); border-radius: var(--radius-s);
  background: var(--color-surface); cursor: pointer; scroll-snap-align: center;
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease; opacity: .55; }
.rec__card[data-active] { opacity: 1; box-shadow: var(--ombra-forte); transform: translateY(-.5rem); }
.rec__cardstars { color: var(--color-accent); font-size: .95rem; letter-spacing: .18em; }
.rec__card blockquote { margin: 0; color: var(--color-text); font-family: var(--ff-display);
  font-size: 1.05rem; font-style: italic; line-height: 1.5; }
.rec__card footer { display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin-top: .2rem; padding-top: .7rem; border-top: 1px solid var(--color-border); }
.rec__who { font-size: var(--fs-small); font-weight: 600; }
.rec__badge { padding: .2rem .55rem; border-radius: var(--radius-pill); background: var(--color-surface-soft);
  color: var(--color-text-soft); font-size: var(--fs-micro); }
.rec__arrow { flex: none; width: 2.6rem; height: 2.6rem; border: 1px solid var(--color-border-strong);
  border-radius: 50%; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.rec__arrow:hover { border-color: var(--color-primary); color: var(--color-primary); }
.rec__dots { display: flex; justify-content: center; gap: .5rem; }
.rec__dots button { width: .7rem; height: .7rem; padding: 0; border: 1px solid var(--color-border-strong);
  border-radius: 50%; background: transparent; cursor: pointer; }
.rec__dots button[data-active] { border-color: var(--color-primary); background: var(--color-primary); }

/* ============ §05 — Parlano di noi (bento) ============ */
/* Cinque celle, due delle quali sono video (2026-07-30). La griglia è a 6 colonne
   per una ragione sola: 6 è divisibile sia per 2 sia per 3, quindi i due video
   stanno a metà nella prima riga e le tre card di stampa si dividono in parti
   uguali la seconda. Prima erano 4 celle e i video occupavano due righe con uno
   `span`: con cinque celle quello schema lasciava un buco in fondo. */
.bento { display: grid; grid-template-columns: 1fr; gap: .55rem; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .bento__cell--big { grid-column: span 2; }
}
@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  /* 🐞 2026-08-24 — Questi tre `span` erano scritti su `.bento__cell` nudo,
     senza lo scoping a `.bento`. `.bento__cell` è anche la classe-card generica
     riusata fuori da qui (l'area rivenditori la mette dentro una griglia a 2
     colonne, non a 6): «span 2» su una griglia a 2 colonne vuol dire «tutta la
     riga», e le due card del B2B si impilavano invece di affiancarsi — con
     l'immagine grande che ci stava dentro, il problema si è visto. Con lo
     scoping questi span contano SOLO dentro `.bento` (oggi: solo la sezione
     «Parlano di noi» in home), dove sono nati per starci. */
  .bento .bento__cell { grid-column: span 2; }
  .bento .bento__cell--video { grid-column: span 3; }
  .bento .bento__cell--big { grid-column: span 2; }
}
.bento__cell { display: grid; align-content: start; gap: .45rem; padding: clamp(1.1rem, 2.4vw, 1.6rem);
  border: 1px solid var(--color-border); background: var(--color-surface); }
.bento__cell--video { padding: 0; overflow: hidden; background: var(--color-primary-dark); }
.bento__cell--video video { width: 100%; max-height: 26rem; object-fit: cover; background: var(--color-primary-dark); }
/* Il video di Cortese è girato in verticale (360×640). `cover` gli taglierebbe
   testa e prodotto: qui si mostra intero, con lo sfondo scuro della card ai lati. */
.bento__cell--ritratto video { object-fit: contain; aspect-ratio: 16 / 10; max-height: 24rem; }

/* Facciata del video YouTube: immagine + pulsante, nessuna richiesta a YouTube
   finché non si preme play (vedi il commento nello script della home). */
.yt-facade { position: relative; display: grid; background: var(--color-primary-dark); aspect-ratio: 16 / 9; }
.yt-facade img, .yt-facade iframe { width: 100%; height: 100%; border: 0; object-fit: cover; display: block; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 4.2rem; height: 4.2rem; display: grid;
  place-items: center; border: 0; border-radius: 50%; cursor: pointer; color: var(--color-primary-dark);
  background: hsl(0 0% 100% / .92); box-shadow: 0 .4rem 1.4rem hsl(0 0% 0% / .35); transition: transform .18s ease, background .18s ease; }
.yt-play svg { width: 1.9rem; height: 1.9rem; margin-left: .18rem; }
.yt-play:hover, .yt-play:focus-visible { transform: scale(1.08); background: var(--primitive-white); }

/* «Chi è…»: la card resta corta, il testo lungo lo apre chi vuole */
.bento__chi { margin-top: .3rem; }
.bento__chi summary { cursor: pointer; color: var(--color-accent-soft); font-size: var(--fs-small);
  font-weight: 600; list-style: none; }
.bento__chi summary::-webkit-details-marker { display: none; }
.bento__chi summary::after { content: ' ↓'; }
.bento__chi[open] summary::after { content: ' ↑'; }
.bento__chi summary:hover { text-decoration: underline; }
.bento__chi p { margin-top: .5rem; }
.bento__body { padding: clamp(1.1rem, 2.4vw, 1.6rem); color: var(--primitive-white); }
.bento__cell--video .bento__k { color: var(--color-accent-soft); }
.bento__cell--video h3 { color: var(--primitive-white); }
.bento__cell--big { background: var(--color-surface-sage); }
.bento__k { margin: 0; color: var(--color-primary); font-size: var(--fs-micro); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; }
.bento__cell h3 { margin: 0; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.18; }
.bento__cell p { margin: 0; color: var(--color-text-soft); font-size: var(--fs-small); }
/* 🔴 2026-08-03 — il testo delle due card video era ILLEGGIBILE: `.bento__cell p`
   qui sopra e `.bento__body p` più in alto hanno la STESSA specificità, quindi
   vinceva quella scritta dopo e sul fondo verde scuro finiva un grigio-verde da
   contrasto 1,2:1 (misurato: #3E4E3B su #2A4224). Non era il reveal dello scroll.
   La regola giusta deve stare DOPO e pesare di più: due classi invece di una. */
.bento__cell--video .bento__body p,
.bento__cell--video .bento__chi p { color: hsl(0 0% 100% / .86); }
.bento__link { margin-top: .35rem; color: var(--color-primary); font-weight: 600; font-size: var(--fs-small); }
.bento__link:hover { text-decoration: underline; }
.bento__nota { color: var(--color-text-soft); font-size: var(--fs-micro); font-style: italic; }
/* dentro le celle video il fondo è scuro: il grigio di testo-soft ci sparirebbe */
.bento__cell--video .bento__nota { color: hsl(0 0% 100% / .6); }

/* ============ §05 — Il ricettario (lista tipografica) ============ */
/* Meccanismo TIP-003: lista bold + reveal immagine. NON l'ennesima griglia di card.
   Su mobile la miniatura è sempre visibile: l'hover non porta contenuto essenziale. */
.ricettario { border-top: 1px solid var(--color-border-strong); }
.ricettario__row { position: relative; display: flex; align-items: center; gap: 1rem;
  padding: clamp(.9rem, 2vw, 1.4rem) 0; border-bottom: 1px solid var(--color-border); }
.ricettario__n { flex: none; width: 2.2rem; color: var(--color-primary); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; }
.ricettario__thumb { flex: none; width: 4.6rem; height: 3.4rem; object-fit: cover; }
.ricettario__t { flex: 1; margin: 0; font-family: var(--ff-display); font-size: clamp(1.15rem, 3vw, 2.1rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -.02em; transition: color .25s ease, transform .25s ease; }
.ricettario__cat { flex: none; color: var(--color-text-soft); font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; }
@media (min-width: 900px) {
  .ricettario__thumb { position: absolute; z-index: 2; top: 50%; right: 8rem; width: 15rem; height: 10rem;
    opacity: 0; pointer-events: none; transform: translateY(-50%) rotate(-3deg) scale(.92);
    box-shadow: var(--ombra-forte); transition: opacity .3s ease, transform .3s ease; }
  .ricettario__row:hover .ricettario__thumb { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1); }
  .ricettario__row:hover .ricettario__t { color: var(--color-primary); transform: translateX(.5rem); }
}

/* ============ §06 — Le due linee ============ */
/* Il testo sta SOTTO la foto, non sopra: prima il velo scuro mangiava l'immagine e
   il testo restava comunque poco leggibile. Le due foto hanno la stessa proporzione
   fissa, quindi le colonne non ballano più. */
.linee { display: grid; grid-template-columns: 1fr; gap: clamp(1.2rem, 3vw, 2rem); }
@media (min-width: 820px) { .linee { grid-template-columns: repeat(2, 1fr); } }
.linea { display: grid; align-content: start; gap: 0; }
.linea__media { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-surface-sage); }
.linea__media img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .linea__media:hover img { transform: scale(1.04); } }
.linea__body { padding: clamp(1rem, 2.4vw, 1.5rem) 0 0; }
.linea__k { margin: 0 0 .45rem; color: var(--color-primary); font-size: var(--fs-micro);
  font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.linea h3 { max-width: 18ch; margin: 0 0 .5rem; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.14; }
.linea p { max-width: 42ch; margin: 0 0 1.1rem; color: var(--color-text-soft); font-size: var(--fs-small); }
.linea .btn { align-self: start; }

.b2b-min { display: inline-block; margin-top: .3rem; padding: .15rem .5rem; border-radius: var(--radius-pill);
  background: var(--color-surface-sage); color: var(--color-primary-dark); font-size: var(--fs-micro); font-weight: 600; }

/* 2026-08-09 — BUG corretto: queste regole erano scope su `.bento-b2b`, il
   contenitore della vecchia griglia a 6 celle asimmetriche. La home B2B è
   stata ricomposta in due file da 2 (`.cols-2`) e quel contenitore non esiste
   più: `.bento__cell--regole` non prendeva più lo sfondo verde scuro, e il
   testo bianco di `.regole li` restava bianco su bianco — invisibile.
   `.bento__cell--foto` non serviva più a nessuna pagina: tolta.
   Sciolto lo scope: la regola ora vale da sola, senza genitore. */
.bento__cell--regole { background: var(--color-primary-dark); color: var(--primitive-white); }
.bento__cell--regole h3 { color: var(--primitive-white); }
.bento__cell--regole .bento__k { color: var(--color-accent-soft); }
.regole { margin: .4rem 0 0; padding: 0; list-style: none; }
.regole li { padding: .4rem 0; border-bottom: 1px solid hsl(0 0% 100% / .16); color: hsl(0 0% 100% / .85); font-size: var(--fs-small); }
.regole li:last-child { border-bottom: 0; }
.regole strong { color: var(--primitive-white); }
/* tre campi affiancati nel modulo rivenditore (CAP / Città / Provincia)
   `min-width: 0` sulle celle (2026-07-27): senza, ogni cella di griglia resta
   larga almeno quanto la larghezza naturale del suo input (~20 caratteri), le
   tre colonne non si stringono e la terza — la provincia — usciva dal riquadro
   a destra. È il modulo «che si vede male» segnalato da Marco. */
.field--tre { display: grid; grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 1.1fr); gap: .6rem; }
.field--tre span { display: grid; min-width: 0; gap: .3rem; }
.field--tre input, .field--tre select { width: 100%; min-width: 0; }
@media (max-width: 560px) {
  .field--tre { grid-template-columns: 7rem minmax(0, 1fr); }
  .field--tre span:last-child { grid-column: 1 / -1; }
}

/* ============ Certificazioni (usate nel credo) ============ */
.certs { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.2rem; }
.cert-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .05em; }
.cert-badge::before { color: var(--color-primary); content: '✓'; }

/* ============ Le due linee — variante B2B (riusata da /b2b/) ============ */
.two-worlds { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.world { position: relative; z-index: 0; display: grid; overflow: hidden; align-content: end; gap: .4rem;
  min-height: 25rem; padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: var(--radius); color: var(--primitive-white); }
.world::after { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(175deg, transparent 32%, hsl(114 24% 12% / .72)); }
.world img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.world--cosmetici { background: linear-gradient(150deg, var(--primitive-sage-400), var(--color-primary-dark)); }
.world--food { background: linear-gradient(150deg, var(--primitive-gold-300), var(--primitive-gold-500)); }
.world .eyebrow { color: hsl(0 0% 100% / .82); }
.world h3 { max-width: 12ch; color: var(--primitive-white); font-size: clamp(1.6rem, 3vw, 2.5rem); }
.world p { max-width: 32ch; color: hsl(0 0% 100% / .88); font-size: var(--fs-small); }
.world .btn { align-self: start; margin-top: .6rem; color: var(--color-text); background: var(--primitive-white); }

/* ============ Filtri shop (/alimentari/ e /cosmetici/) ============ */
/* Stessa pastiglia dei filtri ricette, ma con il contatore dentro: davanti a
   21 alimentari serve sapere quanti prodotti c'è dietro un filtro prima di
   cliccarlo. Le due righe si separano solo quando c'è spazio. */
.shop-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.4rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border); }
.shop-filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.shop-filters__row--tail { margin-left: auto; }
.shop-filters .chip { display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: var(--primitive-white); color: inherit; font: inherit; font-size: var(--fs-small);
  font-weight: 600; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.shop-filters .chip:hover { border-color: var(--color-primary-dark); }
.shop-filters .chip[aria-pressed='true'] { border-color: var(--color-primary-dark);
  background: var(--color-primary-dark); color: var(--primitive-white); }
.shop-filters .chip-n { color: var(--color-text-soft); font-size: .78em; font-weight: 500; }
.shop-filters .chip[aria-pressed='true'] .chip-n { color: hsl(0 0% 100% / .72); }
.shop-filters .chip--sale[aria-pressed='true'] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-primary-dark); }
.shop-filters .chip--sale[aria-pressed='true'] .chip-n { color: hsl(101 30% 18% / .6); }
.shop-sort { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-small); }
.shop-sort span { color: var(--color-text-soft); }
.shop-sort select { padding: .5rem .7rem; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill); background: var(--primitive-white); font: inherit; font-size: var(--fs-small); }
@media (max-width: 660px) {
  .shop-filters__row--tail { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* ============ Ricette (pagina /ricette/) ============ */
.recipe-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.recipe-filters button { padding: .55rem 1.05rem; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill); background: transparent; font-size: var(--fs-small); font-weight: 600; }
.recipe-filters button[aria-pressed='true'] { border-color: var(--color-primary-dark); background: var(--color-primary-dark); color: var(--primitive-white); }
.recipe-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.recipe-card { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-surface); transition: transform .25s ease, box-shadow .25s ease; }
.recipe-card:hover { box-shadow: var(--card-shadow); transform: translateY(-4px); }
.recipe-card .media-frame { min-height: 11rem; aspect-ratio: 16 / 10; }
.recipe-card__body { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 1rem 1.15rem 1.3rem; }
.recipe-tag { align-self: flex-start; color: var(--color-primary); font-size: var(--fs-micro); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.recipe-card h3 { margin: 0; font-size: 1.18rem; }
.recipe-card p { margin: 0; color: var(--color-text-soft); font-size: var(--fs-small); }
/* Le 5 ricette complete: card cliccabili con foto vera. Le altre restano
   riquadri senza pagina, e lo dicono ("In arrivo") invece di fingersi link. */
.recipe-card__media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-surface-soft); }
.recipe-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
a.recipe-card { color: inherit; }
a.recipe-card:hover .recipe-card__media img { transform: scale(1.04); }
.recipe-meta { margin-top: auto; padding-top: .5rem; color: var(--color-text-soft); font-size: var(--fs-micro); }
.recipe-card--teaser { opacity: .82; }
.recipe-presto { align-self: flex-start; margin-top: auto; padding: .25rem .6rem; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill); color: var(--color-text-soft); font-size: var(--fs-micro); font-weight: 600; }

/* ============ Pagina della singola ricetta ============ */
.ricetta { max-width: 68rem; margin: 0 auto; }
.ricetta__testa { max-width: 44rem; padding-top: clamp(1rem, 3vw, 2rem); }
.ricetta__testa h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.ricetta__meta { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 1.5rem 0 0; padding: 1rem 0 0;
  border-top: 1px solid var(--color-border); list-style: none; }
.ricetta__meta li { display: grid; gap: .15rem; }
.ricetta__meta span { color: var(--color-text-soft); font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; }
.ricetta__meta strong { font-family: var(--ff-display); font-size: 1.15rem; font-weight: 600; }
.ricetta__foto { overflow: hidden; margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; border-radius: var(--radius); }
.ricetta__foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ricetta__corpo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.ricetta__testo h2 { margin-top: 2rem; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.ricetta__passi { display: grid; gap: 1.1rem; margin: 1.2rem 0 0; padding: 0; list-style: none; counter-reset: passo; }
.ricetta__passi li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .9rem; }
.ricetta__passi li::before { display: grid; width: 2rem; height: 2rem; place-items: center;
  border-radius: 50%; background: var(--color-primary-dark); color: var(--primitive-white);
  counter-increment: passo; content: counter(passo); font-family: var(--ff-display); font-size: .95rem; font-weight: 600; }
.ricetta__lato { display: grid; align-content: start; gap: 1.4rem; }
.ricetta__ingredienti { padding: clamp(1.2rem, 2.6vw, 1.6rem); border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-surface-soft); }
.ricetta__ingredienti h2 { margin: 0 0 .8rem; font-size: 1.3rem; }
.ricetta__ingredienti ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.ricetta__ingredienti li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; font-size: .92rem; }
.ricetta__ingredienti li::before { color: var(--color-primary); content: '·'; font-weight: 700; }
.ricetta__prodotto { display: grid; gap: .6rem; padding: clamp(1.2rem, 2.6vw, 1.6rem);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); }
.ricetta__prodotto h3 { margin: 0; font-size: 1.1rem; }
.ricetta__prodotto-media { display: grid; aspect-ratio: 1; place-items: center; background: var(--primitive-white); }
.ricetta__prodotto-media img { width: 82%; height: 82%; object-fit: contain; }
@media (max-width: 900px) { .ricetta__corpo { grid-template-columns: 1fr; } }
@media (max-width: 660px) { .recipe-grid { grid-template-columns: 1fr; } }

/* ============ Carte regalo ============ */
.giftcard { display: grid; grid-template-columns: minmax(15rem, .8fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; padding: clamp(1.8rem, 4vw, 3rem); border: 1px solid var(--color-border);
  border-radius: var(--radius); background: linear-gradient(135deg, var(--color-surface-soft), var(--color-surface-sage)); }
/* 2026-08-17 — Qui c'era un rettangolo verde disegnato in CSS con dentro due
   parole: era il «da alcune parti non ci sono le grafiche» segnalato da Marco.
   Ora mostra la carta regalo vera, la stessa che si vede nella scheda prodotto. */
.giftcard__visual { display: grid; place-items: center; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--card-shadow); background: var(--primitive-white); }
/* 4/3 e non 1/1: il file è quadrato ma la carta sta al centro, con margini
   bianchi sopra e sotto. Il taglio toglie il vuoto e lascia la carta intera
   (un 16/10 le mangerebbe i bordi). */
.giftcard__visual img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gift-amounts { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0; }
.gift-amounts button { min-width: 4.5rem; padding: .7rem .9rem; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-s); background: var(--color-surface); font-family: var(--ff-display); font-weight: 600; }
.gift-amounts button[aria-pressed='true'] { border-color: var(--color-primary); background: var(--color-surface-sage); }

/* ============ Sotto-sito B2B: header e footer propri ============ */
/* Marco 2026-07-16: premendo B2B si entra in un'AREA diversa → nav propria (Home · Alimentari ·
   Cosmetici · B2C) e header scuro, così si *sente* di essere altrove. Non è la nav B2C. */
/* Le regole .b2b-footer* stavano qui e sono state tolte il 2026-08-24: il footer
   rivenditori non ha piu' un impianto suo, riusa .site-footer del B2C (richiesta
   del cliente). L'id #b2b-footer resta come punto d'innesto in pagina. */
.b2b-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid hsl(0 0% 100% / .14);
  background: var(--color-primary-dark); color: var(--primitive-white); }
.b2b-header__inner { display: flex; min-height: 4.4rem; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; padding-block: .5rem; }
/* 🐞 2026-08-24 — Marco: «il carrello in b2b è bianco». Il bottone del carrello
   è condiviso col B2C (`.cart-btn`, in base.css): cerchio chiaro fisso
   (`background: var(--color-surface)`) e icona SVG con `stroke="currentColor"`.
   Sul B2C `color` resta quello scuro di default, quindi l'icona si vede. Qui
   `.b2b-header` mette `color: var(--primitive-white)` per i testi del suo
   header — e quel bianco arriva anche all'icona del carrello, che finiva
   bianca sopra un cerchio bianco. Non si tocca `.cart-btn` in base.css (romperebbe
   il B2C): si scurisce l'icona SOLO dentro l'header rivenditori. */
.b2b-header .cart-btn { color: var(--color-primary-dark); }
.b2b-header .brand { display: inline-flex; align-items: center; gap: .65rem; }
.b2b-header .brand-logo { width: 2.4rem; height: 2.4rem; border-radius: 50%; }
.b2b-brand-text { display: flex; flex-direction: column; color: var(--primitive-white);
  font-family: var(--ff-display); font-size: 1.05rem; font-weight: 600; line-height: 1; }
.b2b-brand-text small { margin-top: .32rem; color: var(--color-accent-soft); font-family: var(--ff-body);
  font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.b2b-nav { display: flex; gap: clamp(1rem, 2.5vw, 2.2rem); margin-left: auto; }
.b2b-nav a { position: relative; padding: .5rem 0; color: hsl(91 24% 91% / .82);
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; }
.b2b-nav a:hover, .b2b-nav a[aria-current='page'] { color: var(--primitive-white); }
.b2b-nav a[aria-current='page']::after { position: absolute; right: 0; bottom: .12rem; left: 0; height: 1px;
  content: ''; background: var(--color-accent); }
.b2b-exit { display: inline-flex; flex: none; align-items: center; gap: .4rem; padding: .45rem .85rem;
  border: 1px solid hsl(0 0% 100% / .38); border-radius: var(--radius-pill);
  color: var(--primitive-white); font-size: var(--fs-micro); font-weight: 600; }
.b2b-exit:hover { border-color: var(--primitive-white); background: hsl(0 0% 100% / .12); }
@media (max-width: 660px) {
  .b2b-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; padding-bottom: .2rem; }
  .b2b-exit { margin-left: auto; }
}

/* Fascia a movimento B2B (richiesta Marco 2026-07-23) — soglia 250 € dal sito live */
.b2b-marquee { overflow: hidden; border-bottom: 1px solid var(--color-border); background: var(--color-accent); color: var(--color-primary-dark); }
.b2b-marquee__track { display: flex; width: max-content; gap: 2.2rem; padding: .48rem 0; animation: b2b-marquee 22s linear infinite; }
.b2b-marquee__track span { flex: none; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
@keyframes b2b-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.b2b-marquee:hover .b2b-marquee__track { animation-play-state: paused; }
/* Come la striscia B2C: nessuna eccezione reduced-motion, si ferma col mouse sopra. */

/* Fascia avviso «Prezzi riservati» — a tutta larghezza sotto la testata.
   Prima era un <p> dentro `.product-grid`: come cella di griglia occupava una
   colonna sola e restava incastrata a sinistra (segnalato da Marco 2026-07-27). */
.b2b-avviso { border-block: 1px solid var(--color-border); background: var(--color-surface-sage);
  padding-block: .9rem; font-size: var(--fs-small); text-align: center; }
.b2b-avviso .wrap { display: flex; flex-wrap: wrap; gap: .35rem; justify-content: center; }
.b2b-avviso a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

/* Pulsante fisso: foglio d'ordine */
.b2b-fab { position: fixed; z-index: 55; right: clamp(.9rem, 3vw, 2rem); bottom: clamp(.9rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: .5rem; padding: .8rem 1.25rem;
  border-radius: var(--radius-pill); background: var(--color-primary-dark); color: var(--primitive-white);
  font-size: .88rem; font-weight: 600; box-shadow: var(--ombra-forte);
  transition: opacity .25s ease, transform .25s ease; }
.b2b-fab:hover { background: var(--color-primary); color: var(--primitive-white); }
.b2b-fab svg { flex: none; }
/* Sulle pagine con il pulsante fisso si lascia sotto lo spazio per scorrerci
   oltre: senza, il fondo pagina finisce sempre sotto la pastiglia. */
.page-b2b { padding-bottom: 5.5rem; }

/* ============ B2B ============ */
.nav-b2b { padding: .3rem .85rem !important; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); }
.nav-b2b::after { display: none; }
.nav-b2b:hover { background: var(--color-surface-sage); }
.b2b-hero { border-bottom: 1px solid var(--color-border); background: linear-gradient(120deg, var(--color-primary-dark), var(--primitive-sage-600)); color: var(--primitive-white); }
.b2b-hero .eyebrow { color: var(--color-accent-soft); }
.b2b-hero h1 { color: var(--primitive-white); }
.b2b-hero .lead { color: hsl(0 0% 100% / .9); }

/* 2026-08-24 — Contrasto dei due bottoni della hero rivenditori.
   Il cliente: «i pulsanti non si vedono, c'è poco contrasto, puoi anche fare un
   bordino oro». Il primario usava --button-primary-bg, cioè lo stesso verde
   scuro del gradiente della hero: spariva dentro lo sfondo. Qui il primario
   diventa BIANCO con testo verde — massimo contrasto possibile su questo fondo —
   e il secondario resta trasparente ma con il bordo oro pieno invece del bianco
   al 50 % che usa la hero del B2C. Così si vedono tutti e due, e si capisce
   quale dei due è l'azione principale. */
.b2b-hero .btn-primary {
  color: var(--color-primary-dark);
  background: var(--primitive-white);
  border: 2px solid var(--color-accent);
}
.b2b-hero .btn-primary:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}
.b2b-hero .btn-secondary {
  color: var(--primitive-white);
  border: 2px solid var(--color-accent);
  background: hsl(0 0% 100% / .06);
}
.b2b-hero .btn-secondary:hover {
  background: hsl(0 0% 100% / .16);
  border-color: var(--color-accent-soft);
}
.b2b-adv { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.b2b-card { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
.b2b-card .ic { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; margin-bottom: .9rem;
  border-radius: 50%; background: var(--color-surface-sage); color: var(--color-primary); font-family: var(--ff-display); font-weight: 600; }
.b2b-card h3 { font-size: 1.22rem; }
.b2b-card p { margin: 0; color: var(--color-text-soft); font-size: var(--fs-small); }
.b2b-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, .82fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.b2b-login { padding: clamp(1.5rem, 3vw, 2.2rem); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface); }
.msrp { display: inline-flex; align-items: baseline; gap: .5rem; color: var(--color-text-soft); font-size: var(--fs-small); }
.msrp strong { color: var(--color-text); font-family: var(--ff-display); }
.b2b-price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin: .6rem 0 1rem; }
.b2b-price-row .dealer { font-family: var(--ff-display); font-size: 1.8rem; font-weight: 600; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .b2b-split { grid-template-columns: 1fr; }
  .b2b-adv, .recipe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 660px) {
  .two-worlds, .b2b-adv, .recipe-grid, .giftcard { grid-template-columns: 1fr; }
  .world { min-height: 20rem; }
  .ricettario__cat { display: none; }
}

/* ============ Rassegna stampa BigMood (2026-08-09) ============ */
/* Le sei uscite di BigMood sono doppie pagine di rivista: larghissime, e su un
   telefono da 375 px il testo non si legge. Quindi la doppia pagina fa da
   copertina della card, e il testo leggibile sta nel dialogo — stessa meccanica
   di `.tema-dialog` in home, di cui questo e' solo una variante piu' stretta.
   Nota: i ritagli «testo» sono 305-380 px di lato lungo alla sorgente. Il
   dialogo e' tenuto stretto apposta, cosi' l'ingrandimento non supera ~1,4x e
   il testo non sfarina. Se un giorno arrivano ritagli piu' grandi, bastano gli
   stessi nomi file: la pagina non cambia. */
.stampa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.6rem, 3.4vw, 2.8rem) var(--gap); }
.stampa-card { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--color-border);
  border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--ombra-s); cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, border-color .2s ease; }
@media (hover: hover) {
  .stampa-card:hover { border-color: var(--color-border-strong); box-shadow: var(--ombra); transform: translateY(-.25rem); }
}
/* La doppia pagina e' quasi tutta bianca: il bordo sotto la stacca dal testo. */
.stampa-card__img { width: 100%; border-bottom: 1px solid var(--color-border); background: var(--primitive-white); }
.stampa-card__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(1.1rem, 2.4vw, 1.7rem); }
.stampa-card__k { margin-bottom: .5rem; }
.stampa-card__t { margin: 0 0 .55rem; font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
.stampa-card__d { margin: 0 0 1.2rem; color: var(--color-text-soft); font-size: var(--fs-small); }
.stampa-card__go { display: inline-flex; min-height: 2.5rem; align-items: center; gap: .45rem; margin-top: auto;
  padding: .5rem 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill);
  background: transparent; font-size: .82rem; font-weight: 600;
  transition: color .2s ease, background .2s ease, border-color .2s ease; }
.stampa-card:hover .stampa-card__go, .stampa-card__go:hover { border-color: var(--color-primary-dark);
  background: var(--color-primary-dark); color: var(--primitive-white); }
.stampa-nota { max-width: 44rem; margin: clamp(2rem, 4vw, 3rem) 0 0; color: var(--color-text-soft); font-size: var(--fs-small); }
.stampa-nota a { color: var(--color-primary); font-weight: 600; text-decoration: underline; }

/* Il dialogo: piu' stretto di `.tema-dialog` perche' dentro ci va una colonna di
   testo fotografata, non del testo vero. `display:flex` solo su [open], se no
   il dialogo chiuso resterebbe visibile (la regola d'autore batte lo stile del
   browser che lo nasconde). */
.stampa-dialog { max-width: min(29rem, 96vw); max-height: 92vh; max-height: 92dvh; padding: clamp(.9rem, 3vw, 1.5rem); }
.stampa-dialog[open] { display: flex; flex-direction: column; }
.stampa-dialog__scroll { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.stampa-dialog .eyebrow, .stampa-dialog h3 { padding-right: 2.4rem; }
.stampa-dialog h3 { margin: .1rem 0 .5rem; font-size: clamp(1.3rem, 4.4vw, 1.75rem); }
.stampa-dialog__d { margin: 0 0 1rem; font-size: var(--fs-micro); line-height: 1.5; }
.stampa-dialog__fig { margin: 0; }
.stampa-dialog__fig img { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-s); background: var(--primitive-white); }
.stampa-dialog__fig figcaption { margin-top: .55rem; color: var(--color-text-soft); font-size: var(--fs-micro); }

@media (max-width: 860px) {
  .stampa-grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
  /* Sul telefono ogni pixel di larghezza e' testo leggibile in piu': il dialogo
     si allarga fin quasi al bordo e i margini interni si riducono. */
  .stampa-dialog { max-width: 98vw; padding: .8rem .55rem 1.1rem; }
  .stampa-dialog .eyebrow, .stampa-dialog h3 { padding-right: 2.2rem; }
}


/* ============================================================================
   Invito all'accesso rivenditori — popup allo scroll (2026-08-24)
   Sta nelle pagine listino B2B. Il markup lo costruisce js/b2b.js.
   ========================================================================== */
.b2b-invito {
  position: relative;   /* ancora la X, come fa .tema-dialog */
  max-width: 32rem;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 14px);
  background: var(--color-surface);
  color: var(--color-text);
}
.b2b-invito::backdrop { background: hsl(120 12% 8% / .55); }
.b2b-invito h2 { margin: .2rem 0 .6rem; }
.b2b-invito p { margin: 0 0 .8rem; }
.b2b-invito__x {
  position: absolute; top: .6rem; right: .8rem;
  width: 2.2rem; height: 2.2rem;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--color-text-soft);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.b2b-invito__x:hover { background: var(--color-surface-sage); color: var(--color-text); }
.b2b-invito__scelte { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.2rem; }
.b2b-invito__scelte .btn { flex: 1 1 auto; justify-content: center; }
@media (max-width: 480px) {
  .b2b-invito__scelte { flex-direction: column; }
}


/* Card delle due linee, area rivenditori: la foto sta in cima, a filo dei bordi
   (2026-08-24).
   ⚠️ Il margine negativo DEVE usare la stessa clamp del padding di .bento__cell
   (riga ~173), non un valore fisso: il padding è responsivo, e un numero secco
   lasciava la foto disallineata di qualche pixel alle larghezze intermedie.
   `aspect-ratio` fisso perché le due immagini hanno proporzioni diverse fra loro
   e affiancate la differenza si vedeva. */
.bento__cell--foto { --foto-bleed: clamp(1.1rem, 2.4vw, 1.6rem); }
.bento__cell--foto > img {
  display: block;
  width: calc(100% + 2 * var(--foto-bleed));
  /* 16/10 come `.linea__media` del B2C (2026-08-24, richiesta di Marco: «le
     voglio come le immagini della pagina b2c»). Con 4/3 le card erano molto più
     alte e la foto dominava il testo. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: calc(-1 * var(--foto-bleed)) calc(-1 * var(--foto-bleed)) 1.1rem;
  background: var(--color-surface-sage);
}

/* Moduli d'ordine riservati, card «Ordini» della home rivenditori (2026-08-24). */
.b2b-moduli { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }
.b2b-moduli .btn { justify-content: flex-start; font-size: var(--fs-micro); }
.b2b-moduli__errore { display: block; margin-top: .4rem; color: var(--color-danger, #a4332a); font-size: var(--fs-micro); }

/* Avviso «traduzione di cortesia», solo nelle pagine legali e solo nelle lingue
   diverse dall'italiano (2026-08-24). Lo mostra/nasconde js/i18n.js con
   l'attributo `hidden`, non il CSS: dipende dalla lingua attiva. */
.notice--traduzione {
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-soft);
  font-size: var(--fs-small);
  font-style: italic;
}

/* Nota sotto una recensione mostrata in una lingua diversa dall'italiano
   (2026-08-26). Le recensioni sono di persone vere: la traduzione si mostra,
   ma si dichiara. In italiano non compare: il testo E' l'originale. */
.rec__tradotta {
  margin: .6rem 0 0;
  font-size: var(--fs-micro);
  color: var(--color-text-soft);
  font-style: italic;
}