/* ==========================================================================
   Pagine interne: chi siamo, servizi, contatti.
   ========================================================================== */

/* --- Chi siamo: ritratto d'apertura -------------------------------------- */

.ritratto {
  position: relative;
  overflow: clip;
  padding-block: var(--step-4);
  background:
    radial-gradient(85% 70% at 20% 10%, oklch(from var(--honey-wash) l c h / 0.8) 0%, transparent 60%),
    var(--canvas);
}

.ritratto__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--step-3);
  align-items: center;
}

.ritratto h1 {
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem);
  margin-bottom: var(--step-1);
}

.ritratto__lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  color: var(--text-secondary);
  margin: 0;
}

.ritratto__foto { margin: 0; }

/* La foto d'apertura e' un tramonto con il cielo blu pieno: sulla tela calda
   stonerebbe. Due veli di luce la scaldano senza ritoccarla: l'alone del sole
   dal lato sinistro, dove la pagina ha la sua macchia di miele, e una tinta di
   miele sul cielo. Il verde e il magenta dei fiori restano quelli della foto. */
.ritratto__quadro {
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow-far);
  overflow: clip;
}

.ritratto__quadro::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border-subtle);
  background:
    radial-gradient(70% 80% at 6% 36%, oklch(88% 0.13 85 / 0.4), transparent 70%),
    linear-gradient(to bottom, oklch(72% 0.155 72 / 0.22), transparent 55%);
  mix-blend-mode: soft-light;
}

.ritratto__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.ritratto__foto figcaption,
.nome__foto figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

@media (max-width: 52rem) {
  .ritratto__inner { grid-template-columns: 1fr; }
}

/* --- Cronologia ---------------------------------------------------------- */
/* Numerare le tappe sarebbe decorazione: l'anno e' gia' l'ordinamento, ed e'
   un'informazione vera. */

.cronologia { padding-block: var(--step-4); }

.cronologia__testa { margin-bottom: var(--step-3); max-width: 46ch; }
.cronologia__testa p { color: var(--text-secondary); margin: var(--step-0) 0 0; }

.cronologia__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Sette date: quattro sulla prima fila, tre sulla seconda. Con `auto-fit` ne
     stavano cinque e due, e la seconda fila sembrava avanzata. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--border);
}

@media (max-width: 62rem) {
  .cronologia__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 36rem) {
  .cronologia__lista { grid-template-columns: 1fr; }
}

.cronologia__lista li {
  padding: var(--step-1) var(--step-1) var(--step-2) 0;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
}

/* Il filo che lega le tappe: sta sotto l'anno, non intorno al testo. */
.cronologia__lista li::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: 2.5rem;
  height: 3px;
  background: var(--honey);
}

.cronologia__anno {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--honey-deep);
  margin: 0 0 0.2rem;
}

.cronologia__titolo { font-size: 1.15rem; margin: 0 0 0.4rem; }

.cronologia__testo {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 40ch;
}

/* --- Fascia "il mestiere" ------------------------------------------------ */

.mestiere {
  position: relative;
  overflow: clip;
  background: var(--deep);
  color: var(--deep-text);
  /* Piu' la striscia della soglia, sopra e sotto (theme.css). */
  padding-block: calc(var(--step-4) + var(--soglia-sopra, 0px)) calc(var(--step-4) + var(--soglia-sotto, 0px));
}

.mestiere .comb-field::before { opacity: 0.14; }

.mestiere__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--step-3);
  align-items: center;
}

.mestiere__foto { margin: 0; }

.mestiere__foto img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-far);
}

.mestiere h2 { max-width: 20ch; margin-bottom: var(--step-0); font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem); }

.mestiere__claim {
  font-family: var(--font-display);
  /* Cinque paragrafi: a 1,8rem e 30 caratteri per riga la colonna di testo era
     due volte piu' alta della foto, che restava sola in mezzo con un vuoto sopra e
     sotto. Corpo piu' piccolo e riga piu' lunga la riportano alla sua altezza. */
  font-size: clamp(1.02rem, 0.96rem + 0.32vw, 1.2rem);
  line-height: 1.5;
  color: var(--gold);
  max-width: 52ch;
  margin-bottom: var(--step-0);
}

.mestiere__claim p { margin-bottom: 0.7rem; }

.mestiere p { color: oklch(from var(--deep-text) l c h / 0.86); }

/* Frase in evidenza: un filetto ambra a sinistra, il carattere dei titoli.
   Nessun corsivo, nessuna virgoletta decorativa. */
.mestiere__citazione {
  margin: var(--step-1) 0 0;
  padding-inline-start: var(--step-1);
  border-inline-start: 2px solid var(--honey);
}

.mestiere__citazione blockquote { margin: 0; }

.mestiere__citazione blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.45;
  color: var(--gold);
}

.mestiere__citazione figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: oklch(from var(--deep-text) l c h / 0.7); }

@media (max-width: 52rem) {
  .mestiere__inner { grid-template-columns: 1fr; }
}

/* --- "Perché Artemide" --------------------------------------------------- */

.nome {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: var(--step-3);
  align-items: center;
  padding-block: var(--step-4);
}

.nome__foto { margin: 0; text-align: center; }
.nome__foto figcaption { margin-inline: auto; max-width: 32ch; }

.dea__statua {
  /* La statua e' un ritaglio su fondo trasparente: sta direttamente sulla pagina,
     senza cornice, bordo ne' riquadro. Alta e stretta (circa 1:2), quindi la si
     tiene per altezza: a tutta larghezza di colonna sarebbe lunga piu' di mille
     pixel. L'ombra segue la sagoma (drop-shadow), non il rettangolo. */
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: clamp(26rem, 78vh, 40rem);
  margin-inline: auto;
  filter: drop-shadow(0 14px 22px oklch(30% 0.06 55 / 0.22));
}

/* Su telefono la statua non deve riempire lo schermo: a un po' piu' di meta'
   altezza si legge intera e il titolo resta vicino. */
@media (max-width: 52rem) {
  .dea__statua { max-height: 30rem; }
}

/* --- La statua e le sue api ----------------------------------------------- *
   `.dea` e' un riquadro che aderisce alla statua, cosi' le api si posizionano in
   percentuale della foto (713 x 1414). Ferme stanno dove stavano nell'immagine
   (scripts/ritaglia-api-dea.py): senza animazione la pagina e' identica a prima.
   Ogni ape e' due strati: il <span> compie il giro, l'<img> ronza sul posto.
   Ombra come quella della statua, perche' la foto originale la proiettava
   anche sulle api. */

.dea {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  line-height: 0;
}

.dea__statua { display: block; }

.dea__ape,
.dea__luce {
  position: absolute;
  pointer-events: none;
}

.dea__ape { display: block; }

.dea__ape img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 22px oklch(30% 0.06 55 / 0.22));
}

.dea__ape--1 { left: 16.129%; top: 7.001%;  width: 8.696%; }
.dea__ape--2 { left: 80.084%; top: 27.086%; width: 9.958%; }
.dea__ape--3 { left: 1.403%;  top: 48.869%; width: 10.238%; }

/* Il riflesso scorre sull'oro con la sagoma della statua come maschera: la
   maschera e' la foto stessa, non una forma che la imiti. */
.dea__luce {
  inset: 0;
  overflow: hidden;
  -webkit-mask: var(--dea-sagoma) center / 100% 100% no-repeat;
  mask: var(--dea-sagoma) center / 100% 100% no-repeat;
}

.dea__luce::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 32%;
  background: linear-gradient(100deg, transparent 10%, oklch(96% 0.09 90 / 0.3) 50%, transparent 90%);
  opacity: 0;
  translate: -110% 0;
}

/* Il movimento parte solo quando la statua e' in vista (artemide.js) e mai con
   `prefers-reduced-motion`: li' le api restano dov'erano nella foto. Ogni ape
   ha tre moti con periodi diversi, che non si sincronizzano mai: ne esce una
   deriva che non si ripete, senza le pause di un percorso a tappe. */
@media (prefers-reduced-motion: no-preference) {
  .dea__ape {
    animation:
      dea-deriva-x var(--dea-tx) cubic-bezier(0.45, 0, 0.55, 1) var(--dea-ritardo) infinite,
      dea-deriva-y var(--dea-ty) cubic-bezier(0.45, 0, 0.55, 1) var(--dea-ritardo) infinite,
      dea-inclina var(--dea-tx) cubic-bezier(0.45, 0, 0.55, 1) var(--dea-ritardo) infinite;
  }

  .dea__ape img { animation: dea-ronzio 1.4s ease-in-out infinite alternate; }

  .dea__ape--1 { --dea-ax: 150%; --dea-bx: -60%;  --dea-ay: -120%; --dea-by: 90%;  --dea-tx: 12s;   --dea-ty: 8s;    --dea-ritardo: 0s;   }
  .dea__ape--2 { --dea-ax: 150%; --dea-bx: -50%;  --dea-ay: -150%; --dea-by: 100%; --dea-tx: 14s;   --dea-ty: 9.5s;  --dea-ritardo: 1.4s; }
  .dea__ape--3 { --dea-ax: 170%; --dea-bx: -10%;  --dea-ay: -260%; --dea-by: 80%;  --dea-tx: 10s;   --dea-ty: 13s;   --dea-ritardo: 2.6s; }

  .dea__luce::before { animation: dea-riflesso 12s cubic-bezier(0.45, 0, 0.55, 1) 1.5s infinite; }

  /* Dopo le shorthand, che altrimenti rimetterebbero tutto in marcia. */
  .dea__ape,
  .dea__ape img,
  .dea__luce::before {
    animation-play-state: paused;
  }

  .dea--in-vista .dea__ape,
  .dea--in-vista .dea__ape img,
  .dea--in-vista .dea__luce::before {
    animation-play-state: running;
  }
}

@keyframes dea-deriva-x {
  0%, 100% { translate: 0 0; }
  35%      { translate: var(--dea-ax) 0; }
  70%      { translate: var(--dea-bx) 0; }
}

@keyframes dea-deriva-y {
  0%, 100% { transform: translateY(0); }
  40%      { transform: translateY(var(--dea-ay)); }
  75%      { transform: translateY(var(--dea-by)); }
}

/* L'inclinazione segue il verso del moto: l'ape si piega verso dove va. */
@keyframes dea-inclina {
  0%, 100% { rotate: 0deg; }
  18%      { rotate: 12deg; }
  50%      { rotate: -6deg; }
  82%      { rotate: -12deg; }
}

@keyframes dea-ronzio {
  from { translate: 0 -6%; rotate: -1.5deg; }
  to   { translate: 0 6%;  rotate: 1.5deg; }
}

/* La fascia e' larga un terzo della statua: -110% la tiene fuori a sinistra,
   320% fuori a destra. */
@keyframes dea-riflesso {
  0%   { translate: -110% 0; opacity: 0; }
  4%   { opacity: 1; }
  24%  { translate: 320% 0;  opacity: 1; }
  28%  { translate: 320% 0;  opacity: 0; }
  100% { translate: 320% 0;  opacity: 0; }
}

.nome h2 { margin-bottom: var(--step-1); }

@media (max-width: 52rem) {
  .nome { grid-template-columns: 1fr; }
}

/* --- Servizi ------------------------------------------------------------- */

.servizio { padding-block: var(--step-3); }
.servizio + .servizio { border-top: 1px solid var(--border-subtle); }

.servizio__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--step-3);
  align-items: center;
}

.servizio--invertito .servizio__foto { order: 2; }

.servizio__foto { margin: 0; }

.servizio__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-near);
}

.servizio h2 { margin-bottom: var(--step-1); }

.servizio .prose ul {
  list-style: none;
  padding: 0;
  margin-block: var(--step-0);
  border-top: 1px solid var(--border-subtle);
}

.servizio .prose li {
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  margin: 0;
}

@media (max-width: 52rem) {
  .servizio__inner { grid-template-columns: 1fr; }
  .servizio--invertito .servizio__foto { order: 0; }
}

/* --- Contatti ------------------------------------------------------------ */

.contatti {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--step-4) var(--step-3);
  align-items: start;
}

.contatti__mappa { grid-column: 1 / -1; }

.contatti h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); margin-bottom: var(--step-1); }

@media (max-width: 52rem) {
  .contatti { grid-template-columns: 1fr; }
}

/* --- Modulo -------------------------------------------------------------- */

.modulo { display: grid; gap: var(--step-0); }

.modulo__coppia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--step-0);
}

.modulo__campo { display: grid; gap: 0.35rem; margin: 0; max-width: none; }

.modulo__campo label {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
}

.modulo input,
.modulo select,
.modulo textarea {
  font: inherit;
  width: 100%;
  padding: 0.75rem 0.9rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.modulo textarea { resize: vertical; min-height: 8rem; }

/* Il menu a tendina ha un'altezza sua: senza questo, accanto agli altri campi
   della stessa riga restava piu' basso. */
.modulo select { min-height: 3.3rem; }

.modulo input:focus-visible,
.modulo select:focus-visible,
.modulo textarea:focus-visible { border-color: var(--honey-deep); }

/* Trappola per i robot: fuori dallo schermo, mai raggiungibile da tastiera. */
.modulo__trappola {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.modulo__consenso { margin: 0; max-width: none; }

.modulo__consenso label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.modulo__consenso input { width: 1.1rem; height: 1.1rem; margin-top: 0.2rem; }

.avviso {
  padding: var(--step-0) var(--step-1);
  border-radius: var(--radius);
  border: 1px solid var(--border-subtle);
  margin-bottom: var(--step-1);
  max-width: none;
}

.avviso--ok { background: oklch(from var(--success) 95% 0.03 h); border-color: oklch(from var(--success) 82% 0.06 h); }
.avviso--errore { background: oklch(from var(--danger) 95% 0.035 h); border-color: oklch(from var(--danger) 82% 0.07 h); }

/* --- Mappa a caricamento volontario -------------------------------------- */

.mappa {
  position: relative;
  overflow: clip;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface);
  min-height: clamp(18rem, 45vh, 26rem);
  display: grid;
  place-items: center;
}

.mappa__invito {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--step-2);
  max-width: 34rem;
}

.mappa__dove {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 0.6rem;
  max-width: none;
}

.mappa__nota {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: var(--step-1);
  max-width: none;
}

.mappa__azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--step-0);
  justify-content: center;
  margin: 0;
  max-width: none;
}

.mappa iframe {
  width: 100%;
  height: clamp(18rem, 45vh, 26rem);
  border: 0;
  display: block;
}

.mappa[data-caricata="true"] { display: block; }
.mappa[data-caricata="true"] .mappa__invito,
.mappa[data-caricata="true"] .comb-field { display: none; }

/* --- Prodotti: le tre linee ---------------------------------------------- */

.linea { padding-block: var(--step-4); }
.linea--alternata { background: var(--wax); }

/* Le fasce alternate hanno bisogno di respiro proprio, non di un bordo. */
.linea--alternata + .linea { padding-top: var(--step-4); }

/* Prima questa pagina era: titolo, riga di note, fila di miniature da 9rem,
   paragrafo. In una colonna larga milleduecento pixel le miniature diventavano
   francobolli e la meta' destra restava bianca. Qui il testo prende una colonna
   sua, resta appeso mentre si scorre, e i prodotti hanno la stessa dimensione
   che hanno nel negozio: e' una vetrina editoriale, non un indice. */

.linea__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--step-4) var(--step-3);
  align-items: start;
}

.linea__testo { position: sticky; top: calc(var(--step-2) + 4rem); }

.linea__nota {
  color: var(--text-secondary);
  margin: var(--step-0) 0 0;
  max-width: 40ch;
  font-size: 1.05rem;
}

.linea__prosa { margin-top: var(--step-1); }
.linea__prosa p { font-size: 0.95rem; color: var(--text-secondary); }

.linea__vai { margin: var(--step-1) 0 0; }

.linea__prodotti { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 60rem) {
  .linea__inner { grid-template-columns: 1fr; gap: var(--step-2); }
  .linea__testo { position: static; }
  .linea__nota { max-width: 52ch; }
}

/* --- 404 e ricerca ------------------------------------------------------- */

.smarrito {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--step-3);
  align-items: start;
}

.smarrito h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin-bottom: var(--step-0); }

.cerca {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--step-0);
}

.cerca input[type="search"] {
  font: inherit;
  flex: 1 1 12rem;
  padding: 0.75rem 0.9rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cerca input[type="search"]:focus-visible { border-color: var(--honey-deep); }

.risultati { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-subtle); }

.risultati li { padding-block: var(--step-1); border-bottom: 1px solid var(--border-subtle); }

.risultati__tipo {
  margin: 0 0 0.2rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bronze);
}

.risultati h2 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem); margin: 0 0 0.3rem; }
.risultati h2 a { color: inherit; text-decoration: none; }
.risultati h2 a:hover { color: var(--honey-deep); }
.risultati__estratto { color: var(--text-secondary); margin: 0; }

/* --- Domande frequenti ---------------------------------------------------- */
/* <details> nativi: funzionano senza JS, si aprono da tastiera e il browser li
   trova con la ricerca di pagina anche da chiusi. */

/* Vive su /prodotti/, che carica pagine.css e non il foglio del negozio.
   Nessun max-width qui: la classe .shell centra gia' il blocco a 76rem, e un
   secondo limite piu' stretto sullo stesso elemento lo faceva ricentrare a
   meta' pagina, fuori asse rispetto a tutto il resto. La misura di lettura la
   prendono le voci. */
.faq { padding-block: var(--step-4); }
.faq h2.struck,
.faq__voce { max-width: var(--measure); }

.faq h2.struck { margin: 0 0 var(--step-0); }

.faq__voce { border-bottom: 1px solid var(--border-subtle); }
.faq__voce:first-of-type { border-top: 1px solid var(--border-subtle); }

.faq__voce summary {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding-block: var(--step-0);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  transition: color var(--t-state) var(--ease-press);
}

.faq__voce summary::-webkit-details-marker { display: none; }

.faq__voce summary:hover { color: var(--honey-deep); }

/* Il segno di apertura e' l'esagono del cartiglio che ruota, non una freccetta
   di sistema: ruotando di 90 gradi un esagono resta un esagono, ma cambia
   appoggio — si vede che qualcosa e' successo senza aggiungere una forma nuova. */
.faq__voce summary::before {
  content: "";
  flex: none;
  width: 0.62rem;
  height: 0.7rem;
  margin-top: 0.35em;
  background: var(--comb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: rotate var(--t-move) var(--ease-press), background-color var(--t-state) var(--ease-press);
}

.faq__voce[open] summary::before { rotate: 90deg; background: var(--honey); }

.faq__risposta {
  padding-bottom: var(--step-1);
  padding-inline-start: 1.37rem;
}

.faq__risposta p { margin: 0; color: var(--text-secondary); }


/* --- Recensioni su Google (Chi siamo) -----------------------------------
   Un carosello, non una griglia: con le recensioni Google sono un centinaio,
   e in griglia la pagina diventerebbe un muro. La pista e' uno scorrimento
   orizzontale nativo — col dito, col trackpad, con le frecce della tastiera —
   e i comandi (artemide.js) si aggiungono sopra: senza script resta una fila
   che si scorre a mano, con la sua barra.

   Le stelle sono celle di favo che si riempiono di miele, le stesse della
   media in testa; la foto del profilo Google e' sostituita da una sigla,
   perche' caricarla manderebbe ogni visitatore da Google. */

.recensioni { padding-block: var(--step-4); overflow: clip; }

.recensioni__testa {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--step-1) var(--step-3);
  margin-bottom: var(--step-2);
}

.recensioni__testa p { color: var(--text-secondary); max-width: 56ch; margin: var(--step-0) 0 0; }

.recensioni__voto { display: grid; gap: 0.6rem; justify-items: end; }

.recensioni .recensioni__media {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin: 0;
  max-width: none;
}

.recensioni__numero {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.recensioni__conto { font-size: 0.92rem; }

.recensioni .recensioni__link {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--step-1);
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

@media (max-width: 44rem) {
  .recensioni__voto { justify-items: start; }
}

/* Le celle del voto: riempite da sinistra quanto dice --pieno, cosi' anche
   una media come 4,7 si disegna giusta. */
.celle-voto { display: inline-flex; gap: 0.2rem; }

.celle-voto i {
  display: block;
  width: 0.8rem;
  height: 0.92rem;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(to right, var(--honey) var(--pieno, 0%), var(--border) var(--pieno, 0%));
}

.celle-voto--grande { gap: 0.28rem; }
.celle-voto--grande i { width: 1.2rem; height: 1.38rem; }

/* --- La pista ------------------------------------------------------------ */

/* La spalla e' il margine della colonna di testo: la prima scheda si allinea
   al titolo, e la pista prosegue fino al bordo dello schermo, cosi' si vede
   che continua. */
.giostra { --spalla: max(1.25rem, (100% - var(--shell)) / 2); }

@media (max-width: 40rem) {
  .giostra { --spalla: 0.875rem; }
}

/* `position: relative` non e' decorativo: i testi per lettori di schermo
   (.visually-hidden) sono posizionati in assoluto, e senza un antenato
   posizionato dentro la pista scappavano dal suo ritaglio. Quelli dell'ultima
   scheda, a quattordicimila pixel, allargavano tutta la pagina, e il telefono
   la rimpiccioliva per farla stare. */
.giostra__pista {
  position: relative;
  display: flex;
  gap: var(--step-1);
  margin: 0;
  padding: 0.5rem var(--spalla) 1.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--spalla);
  scrollbar-color: var(--comb) transparent;
}

/* Con i comandi la barra non serve: c'e' il filo sotto, che dice anche dove
   si e' arrivati. */
.js-giostra .giostra__pista { scrollbar-width: none; }
.js-giostra .giostra__pista::-webkit-scrollbar { display: none; }

.giostra__pista:focus-visible { outline-offset: -2px; }

.recensione {
  flex: 0 0 calc((100% - 2 * var(--step-1)) / 3);
  display: flex;
  padding: var(--step-1);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-near);
  scroll-snap-align: start;
}

@media (max-width: 60rem) {
  .recensione { flex-basis: calc((100% - var(--step-1)) / 2); }
}

@media (max-width: 40rem) {
  .giostra__pista { gap: 0.75rem; }
  .recensione { flex-basis: 86%; }
}

.recensione figure {
  display: flex;
  flex-direction: column;
  gap: var(--step-0);
  width: 100%;
  margin: 0;
}

.recensione__voto { margin: 0; line-height: 0; }

.recensione__testo { flex: 1; margin: 0; }

/* Sei righe, poi "Leggi tutta". Il testo non si accorcia: e' tutto nella
   pagina, solo nascosto finche' non lo si apre. */
.recensione__testo p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
          line-clamp: 6;
  overflow: hidden;
  margin: 0;
  max-width: none;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--text);
}

/* Le schede di una fila sono alte uguali, e una recensione di cinque parole
   restava sola in cima a una scheda vuota. Le brevi diventano citazioni: piu'
   grandi, come una frase detta ad alta voce. */
.recensione--breve .recensione__testo p {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.recensione[data-aperta="true"] .recensione__testo p {
  display: block;
  -webkit-line-clamp: unset;
          line-clamp: none;
}

.recensione__apri {
  align-self: start;
  margin-top: -0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--honey-deep);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.recensione__apri:hover { text-decoration-thickness: 2px; }

.recensione figcaption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--step-0);
  border-top: 1px solid var(--border-subtle);
  font-size: 0.9rem;
  line-height: 1.35;
}

.recensione figcaption b { display: block; font-weight: 600; color: var(--text); }
.recensione figcaption b + span { color: var(--text-secondary); }

.recensione__sigla {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.4rem;
  height: 2.76rem;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: var(--honey-wash);
  color: var(--honey-deep);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* --- Il nastro: le recensioni scorrono senza fine ------------------------------ *
 *
 * Con il movimento normale la pista smette di essere uno scorrimento a mano e
 * diventa un nastro: le schede sono duplicate (le copie sono nascoste a chi legge
 * con lo schermo e non si raggiungono con la tastiera) e il nastro trasla di
 * mezza lunghezza in un ciclo lineare, che ricomincia senza stacco. Si ferma
 * passandoci sopra, con il fuoco della tastiera, quando e' fuori dallo schermo e
 * con il pulsante di pausa. Con il movimento ridotto non c'e' nastro: resta lo
 * scorrimento a mano con le frecce. */

.giostra__finestra { overflow: hidden; }

.giostra--nastro .giostra__finestra {
  /* Ai lati le schede entrano ed escono dissolvendosi, non tagliate di netto. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}

.giostra--nastro .giostra__pista {
  width: max-content;
  padding-inline: 0;
  gap: 0;
  overflow: visible;
  scroll-snap-type: none;
  animation: giostra-corri var(--durata, 90s) linear infinite;
  will-change: transform;
}

.giostra--nastro .recensione {
  flex: 0 0 clamp(17rem, 27vw, 23rem);
  margin-inline-end: var(--step-1);
  scroll-snap-align: none;
}

@keyframes giostra-corri {
  to { transform: translateX(-50%); }
}

@media (hover: hover) {
  .giostra--nastro:hover .giostra__pista { animation-play-state: paused; }
}

/* Il fuoco ferma il nastro solo se sta su una scheda (un "Leggi tutta" da
   leggere con calma), non sul pulsante di pausa: altrimenti, dopo "Riprendi", il
   fuoco restava li' e il nastro non ripartiva. */
.giostra--nastro:has(.giostra__pista :focus-visible) .giostra__pista,
.giostra--nastro[data-ferma="true"] .giostra__pista,
.giostra--nastro[data-fuori="true"] .giostra__pista { animation-play-state: paused; }

@media (max-width: 40rem) {
  .giostra--nastro .recensione { flex-basis: 78vw; margin-inline-end: 0.75rem; }
}

/* Sul nastro restano solo la pausa: niente frecce, contatore e filo. */
.giostra--nastro .giostra__filo,
.giostra--nastro .giostra__conto,
.giostra--nastro .giostra__vai { display: none; }

.giostra--nastro .giostra__comandi { justify-content: flex-end; }

/* --- I comandi ------------------------------------------------------------ */

.giostra__comandi {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.giostra__comandi[hidden] { display: none; }

/* Il filo: la parte di pista in vista, sulla pista intera. Con cento
   recensioni e' corto, e scorre: dice dove si e' arrivati meglio di un numero. */
.giostra__filo {
  position: relative;
  flex: 1;
  height: 2px;
  margin-inline-end: var(--step-0);
  border-radius: 2px;
  background: var(--border-subtle);
  overflow: hidden;
}

.giostra__filo span {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--vista, 100%);
  border-radius: 2px;
  background: linear-gradient(90deg, var(--honey), var(--gold));
  translate: calc(var(--pos, 0) * 100%) 0;
}

.giostra__conto {
  min-width: 7ch;
  margin: 0 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.giostra__vai--indietro svg { scale: -1 1; }

.giostra__vai[disabled] { opacity: 0.35; cursor: default; }
.giostra__vai[disabled]:hover { background: transparent; color: var(--text); border-color: transparent; }

.giostra__pausa .icona--riproduci,
.giostra__pausa[aria-pressed="true"] .icona--pausa { display: none; }

.giostra__pausa[aria-pressed="true"] .icona--riproduci { display: block; }



/* ==========================================================================
   Bomboniere e segnaposto — "La partecipazione"
   Non e' un negozio: si guarda, si legge cosa si puo' preparare e si scrive per
   accordarsi. Il filo e' il biglietto: il pannello di carta che apre la pagina,
   il modulo che e' una partecipazione da compilare, il sigillo che si imprime
   quando la richiesta parte. Stesso mondo della home (carta, ceralacca, favo),
   composto in modo diverso: qui il pannello sta sulla foto, non accanto al sigillo.
   ========================================================================== */

/* --- 1. L'apertura ------------------------------------------------------- */

.bomb-apertura {
  position: relative;
  overflow: clip;
  padding-block: clamp(var(--step-2), 5vw, var(--step-4));
  background:
    radial-gradient(85% 70% at 18% 8%, oklch(from var(--honey-wash) l c h / 0.85) 0%, transparent 62%),
    var(--canvas);
}

.bomb-apertura__layout {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  /* Foto e pannello occupano la stessa riga e la riempiono tutta: stesso bordo
     in alto, stesso bordo in basso. Prima la foto aveva un'altezza sua e usciva
     di qualche pixel sopra e sotto il pannello. */
  align-items: stretch;
}

/* La foto sta a destra e il pannello le cavalca il bordo sinistro: e' il foglio
   appoggiato sul tavolo, non una colonna di testo accanto a un'immagine. */
.bomb-apertura__foto { grid-column: 5 / -1; grid-row: 1; display: flex; min-height: 26rem; }

/* La foto riempie la cella senza contarci dentro: se fosse in flusso, la sua
   altezza naturale (e' quadrata) farebbe la riga piu' alta del pannello. */
.bomb-apertura__foto .bomb-foto { --ar: auto; position: relative; flex: 1; min-width: 0; }
.bomb-apertura__foto .bomb-foto img { position: absolute; inset: 0; width: 100%; height: 100%; }

.bomb-apertura__carta {
  grid-column: 1 / span 7;
  grid-row: 1;
  position: relative;
  z-index: 2;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  /* Il filo di luce sul bordo alto: lo fa leggere come un foglio, non come un
     rettangolo di colore. */
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.55), var(--shadow-far);
  padding: clamp(var(--step-2), 4vw, var(--step-4));
}

.bomb-apertura__carta h1 {
  font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.75rem);
  margin-bottom: var(--step-1);
  max-width: 14ch;
}

.bomb-apertura__carta h1 em { font-style: normal; color: var(--honey-deep); }

.bomb-apertura__lede {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--text-secondary);
  max-width: 44ch;
  margin-bottom: var(--step-1);
  text-wrap: pretty;
}

.bomb-apertura__nota {
  font-size: 0.95rem;
  color: var(--text-secondary);
  max-width: 46ch;
  padding-top: var(--step-0);
  margin: var(--step-1) 0 0;
  border-top: 1px solid var(--border-subtle);
}

.bomb-apertura__azioni { display: flex; flex-wrap: wrap; gap: var(--step-0); }

/* Il sigillo sul bordo del foglio, a cavallo con la foto: l'angolo dove la
   ceralacca si mette su un biglietto vero. */
.bomb-apertura__sigillo {
  position: absolute;
  right: calc(var(--step-3) * -1);
  bottom: calc(var(--step-2) * -1);
  z-index: 3;
  width: clamp(5.75rem, 11vw, 9rem);
  height: auto;
  rotate: -8deg;
  filter: drop-shadow(0 8px 14px oklch(30% 0.06 55 / 0.28)) drop-shadow(0 22px 40px oklch(30% 0.06 55 / 0.2));
  pointer-events: none;
}

@media (max-width: 62rem) {
  .bomb-apertura__layout { grid-template-columns: 1fr; }
  .bomb-apertura__foto { grid-column: 1; grid-row: 1; min-height: 0; }
  .bomb-apertura__foto .bomb-foto { --ar: 3 / 2; }
  .bomb-apertura__foto .bomb-foto img { position: static; height: auto; }

  /* Stessa larghezza della foto: i due bordi laterali coincidono, il pannello
     sale solo a coprire la parte bassa dell'immagine. */
  .bomb-apertura__carta {
    grid-column: 1;
    grid-row: 2;
    margin: calc(var(--step-3) * -1) 0 0;
    padding: var(--step-1) var(--step-1) var(--step-1);
  }

  .bomb-apertura__carta h1 { margin-bottom: var(--step-0); }

  .bomb-apertura__sigillo {
    right: var(--step-0);
    top: calc(var(--step-2) * -1);
    bottom: auto;
    width: clamp(4.75rem, 20vw, 6.5rem);
  }
}

/* L'entrata non nasconde mai niente: foto e pannello sono visibili al primo
   fotogramma, e il movimento e' solo uno spostamento. Una versione precedente
   partiva da foto ritagliata e pannello trasparente e aspettava che l'immagine
   fosse decodificata: la pagina sembrava vuota per piu' di un secondo. Qui la
   foto si assesta con una lenta scala, il pannello si posa, il sigillo si imprime. */
@media (prefers-reduced-motion: no-preference) {
  .bomb-apertura__foto .bomb-foto img { animation: bomb-zoom 1500ms var(--ease-press) both; }
  .bomb-apertura__carta { animation: bomb-posa 560ms var(--ease-press) both; }
  .bomb-apertura__sigillo { animation: bomb-imprime 700ms var(--ease-press) 380ms both; }
}

@keyframes bomb-posa {
  from { translate: 0 1.25rem; }
  to   { translate: none; }
}

/* La foto si assesta da una scala appena piu' grande: nessun ritaglio, nessuna
   trasparenza, quindi e' sempre tutta visibile. */
@keyframes bomb-zoom {
  from { scale: 1.08; }
  to   { scale: 1; }
}

/* Come in home: il conio scende, si assesta, resta. */
@keyframes bomb-imprime {
  from { opacity: 0; transform: scale(1.3) rotate(-10deg); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

/* --- Le foto: una cornice sola -------------------------------------------- */

.bomb-foto { margin: 0; }

.bomb-foto img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar, 1);
  object-fit: cover;
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-near);
}

.bomb-foto figcaption {
  margin-top: 0.6rem;
  max-width: 36ch;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

/* --- 2. Le composizioni --------------------------------------------------- */

.bomb-tavola { padding-block: var(--step-4); }

.bomb-tavola__testa { display: grid; gap: 0.6rem; margin-bottom: var(--step-2); }
.bomb-tavola__testa h2,
.bomb-prepariamo h2,
.bomb-passi h2,
.bomb-richiesta h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); }
.bomb-tavola__testa p { margin: 0; color: var(--text-secondary); }

.bomb-tavola__mosaico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--step-2) var(--step-1);
  align-items: start;
}

/* Cinque foto, due righe: una alta e una larga sopra, tre uguali sotto, con la
   centrale un poco piu' in basso. Le proporzioni diverse sono l'unico ritmo. */
.bomb-foto--a { grid-column: 1 / span 5; --ar: 4 / 5; }
.bomb-foto--b { grid-column: 6 / span 7; --ar: 7 / 5; align-self: end; }
.bomb-foto--c { grid-column: 1 / span 4; }
.bomb-foto--d { grid-column: 5 / span 4; margin-top: var(--step-2); }
.bomb-foto--e { grid-column: 9 / span 4; }

@media (max-width: 52rem) {
  .bomb-tavola__mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-1) 0.75rem; }
  .bomb-foto--a,
  .bomb-foto--b,
  .bomb-foto--e { grid-column: 1 / -1; }
  .bomb-foto--a { --ar: 1; }
  .bomb-foto--b { --ar: 6 / 5; }
  .bomb-foto--c,
  .bomb-foto--d { grid-column: auto; margin-top: 0; }
  .bomb-foto--e { --ar: 6 / 5; }
}

/* --- 3. Da cosa si puo' partire ------------------------------------------- */

.bomb-prepariamo {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--step-3);
  align-items: start;
  padding-block: var(--step-1) var(--step-4);
}

.bomb-prepariamo__testo p { margin: var(--step-0) 0 0; color: var(--text-secondary); }

/* Un elenco solo: prima erano due colonne, bomboniere e segnaposto, che
   ripetevano meta' delle voci. Qui ogni prodotto compare una volta, e quando
   vale per un uso solo lo dice. */
.bomb-prepariamo__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: var(--step-3);
  border-top: 1px solid var(--border);
}

/* L'esagono e' quello del cartiglio sul vetro, come nella targa delle schede. */
.bomb-prepariamo li {
  display: flex;
  align-items: baseline;
  gap: 0.1rem 0.7rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
  break-inside: avoid;
}

.bomb-prepariamo li small {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* Il testo va a capo accanto all'esagono, mai sotto. */
.bomb-prepariamo li > span { flex: 1 1 0; min-width: 0; }

.bomb-prepariamo li::before {
  content: "";
  flex: none;
  align-self: flex-start;
  margin-top: 0.62em;
  width: 0.5rem;
  height: 0.57rem;
  background: var(--comb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

@media (max-width: 52rem) {
  .bomb-prepariamo { grid-template-columns: 1fr; gap: var(--step-2); }
}

/* --- Creazioni: le occasioni --------------------------------------------- */
/* Tre blocchi alla pari, ciascuno con la sua ancora (le sottovoci del menu
   "Creazioni" ci portano). Foto in alto, poi titolo e una riga: niente riquadri
   attorno, il ritmo lo da' la foto. */

.creazioni-occasioni { padding-block: var(--step-4) var(--step-1); }

.creazioni-occasioni__elenco {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--step-2) var(--step-2);
  align-items: start;
}

.creazioni-occasione { scroll-margin-top: 10rem; }
.creazioni-occasione__foto { --ar: 4 / 5; margin-bottom: var(--step-0); }
.creazioni-occasione h3 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); margin-bottom: 0.4rem; }
.creazioni-occasione p { margin: 0; color: var(--text-secondary); max-width: 38ch; }

@media (max-width: 52rem) {
  .creazioni-occasioni__elenco { grid-template-columns: 1fr; gap: var(--step-3); }
  .creazioni-occasione__foto { --ar: 6 / 5; }
}

/* La foto sotto il testo, accanto all'elenco dei prodotti. */
.creazioni-prodotti__foto { --ar: 6 / 5; margin-top: var(--step-2); }

/* --- Creazioni: da sapere --------------------------------------------------- */
/* Due avvisi, non due promesse: stanno prima del modulo perche' chi scrive li
   abbia letti. Fondo --surface e filo --comb a sinistra, senza icone ne' colori
   d'allarme: sono informazioni utili, non un errore. */

.creazioni-avvisi { padding-block: var(--step-1) var(--step-3); }
.creazioni-avvisi h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.6rem); margin-bottom: var(--step-1); }

.creazioni-avvisi__elenco {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--step-1);
  align-items: start;
}

.creazioni-avviso {
  background: var(--surface);
  border-inline-start: 3px solid var(--comb);
  padding: var(--step-1) var(--step-2);
}

.creazioni-avviso h3 { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); margin-bottom: 0.4rem; }
.creazioni-avviso p { margin: 0; color: var(--text-secondary); max-width: 52ch; }

@media (max-width: 52rem) {
  .creazioni-avvisi__elenco { grid-template-columns: 1fr; }
}

@media (max-width: 40rem) {
  .bomb-prepariamo__elenco { columns: 1; }
}

/* --- 4. Come ci si accorda: la fascia scura ------------------------------- */
/* Il bordo a favo, il padding in piu' e lo sfondo vengono da [data-soglia]
   (theme.css): qui resta il contenuto. */

.bomb-passi {
  position: relative;
  overflow: clip;
  color: var(--deep-text);
  padding-block:
    calc(var(--step-5) + var(--soglia-sopra, 0px))
    calc(var(--step-5) + var(--soglia-sotto, 0px));
}

.bomb-passi .comb-field::before { opacity: 0.14; }

.bomb-passi__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--step-4);
  align-items: start;
}

.bomb-passi h2 { max-width: 14ch; margin-bottom: var(--step-1); }

.bomb-passi__elenco { list-style: none; margin: 0; padding: 0; counter-reset: passo; }

.bomb-passi__elenco li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0 var(--step-0);
  padding-block: var(--step-1);
  border-top: 1px solid oklch(from var(--deep-text) l c h / 0.18);
}

.bomb-passi__elenco li:last-child { border-bottom: 1px solid oklch(from var(--deep-text) l c h / 0.18); }

/* Il numero qui conta: e' l'ordine in cui si fanno le cose. */
.bomb-passi__elenco li::before {
  content: counter(passo);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  /* Cifre alte e tutte uguali: con quelle "antiche" del carattere l'uno sembra una I. */
  font-variant-numeric: lining-nums;
  color: var(--gold);
}

.bomb-passi__elenco b {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold);
}

.bomb-passi__elenco span { color: oklch(from var(--deep-text) l c h / 0.86); }

.bomb-passi__voci { display: grid; gap: var(--step-2); padding-top: var(--step-1); }

.bomb-voce { margin: 0; }
.bomb-voce + .bomb-voce { padding-top: var(--step-2); border-top: 1px solid oklch(from var(--deep-text) l c h / 0.18); }
.bomb-voce blockquote { margin: 0; }

.bomb-voce blockquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  line-height: 1.4;
  color: var(--deep-text);
  max-width: 34ch;
}

.bomb-voce figcaption {
  margin-top: 0.7rem;
  font-size: 0.88rem;
  color: oklch(from var(--deep-text) l c h / 0.72);
}

.bomb-voce figcaption b { font-weight: 600; color: var(--gold); }

/* Senza i tre passi restano solo le due recensioni, affiancate. */
.bomb-passi__inner--solo { grid-template-columns: 1fr; }
.bomb-passi__inner--solo .bomb-passi__voci { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--step-4); padding-top: 0; }
.bomb-passi__inner--solo .bomb-voce + .bomb-voce { padding-top: 0; border-top: 0; }

@media (max-width: 52rem) {
  .bomb-passi__inner { grid-template-columns: 1fr; gap: var(--step-3); }
  .bomb-passi__inner--solo .bomb-passi__voci { grid-template-columns: 1fr; gap: var(--step-2); }
  .bomb-passi__inner--solo .bomb-voce + .bomb-voce { padding-top: var(--step-2); border-top: 1px solid oklch(from var(--deep-text) l c h / 0.18); }
}

/* --- 5. La richiesta: il biglietto da compilare --------------------------- */

/* Il modulo sta a tutta larghezza sotto l'intestazione: a fianco del testo lasciava
   una colonna mezza vuota. In alto, titolo e riga a sinistra, recapiti a destra. */
.bomb-richiesta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--step-2);
  align-items: start;
  padding-block: var(--step-4);
  scroll-margin-top: 6rem;
}

.bomb-richiesta__intro p { color: var(--text-secondary); margin-top: var(--step-0); }
.bomb-richiesta__intro .register { margin-top: var(--step-1); }

@media (min-width: 56rem) {
  .bomb-richiesta__intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 30rem);
    gap: 0 var(--step-3);
    align-items: end;
  }

  /* Titolo e frase nella colonna di sinistra, i recapiti a destra sulle stesse due righe. */
  .bomb-richiesta__intro h2,
  .bomb-richiesta__intro p { grid-column: 1; }
  .bomb-richiesta__intro h2 { align-self: end; margin-bottom: 0; }
  .bomb-richiesta__intro p { align-self: start; margin: 0.6rem 0 0; }
  .bomb-richiesta__intro .register { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }

  /* Griglia a 12 colonne: ogni campo dice quante ne occupa (meta' o un terzo),
     il resto va a tutta riga. Le coppie del markup si sciolgono nella griglia. */
  .bomb-richiesta .modulo {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--step-1);
  }

  .bomb-richiesta .modulo > * { grid-column: 1 / -1; }
  .bomb-richiesta .modulo__coppia { display: contents; }
  .bomb-richiesta .modulo__campo--meta  { grid-column: span 6; }
  .bomb-richiesta .modulo__campo--terzo { grid-column: span 4; }
}

/* Dopo l'invio non serve la riga intera: una scheda leggibile. */
.bomb-richiesta .bomb-fatto { max-width: 46rem; }

/* La carta: lo stesso foglio dell'apertura. */
.modulo--carta,
.bomb-fatto {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.55), var(--shadow-far);
  padding: clamp(var(--step-1), 3.5vw, var(--step-3));
}

.modulo--carta .avviso { margin-bottom: 0; color: var(--text); }

.modulo__gruppo { border: 0; margin: 0; padding: 0; min-width: 0; }

.modulo__gruppo legend {
  padding: 0;
  margin-bottom: 0.55rem;
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bronze);
}

.modulo__gruppo legend small {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-secondary);
}

.scelte { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Le scelte non sono caselle da spuntare ma etichette da prendere: il segno e'
   l'esagono, che si riempie di miele. Il campo vero resta nel documento (tastiera
   e lettori di schermo lo vedono), solo fuori dallo schermo. */
.scelta { position: relative; display: inline-flex; }

.modulo .scelta input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  opacity: 0;
}

.scelta span {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.5rem 0.95rem;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--t-state) var(--ease-press),
              border-color var(--t-state) var(--ease-press),
              color var(--t-state) var(--ease-press);
}

.scelta span::before {
  content: "";
  flex: none;
  width: 0.62rem;
  height: 0.7rem;
  background: var(--border);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: background-color var(--t-state) var(--ease-press), rotate var(--t-move) var(--ease-press);
}

.scelta:hover span { border-color: var(--honey-deep); }
.scelta input:focus-visible + span { outline: 2px solid var(--honey-deep); outline-offset: 2px; }

.scelta input:checked + span {
  background: var(--honey-wash);
  border-color: var(--honey-deep);
  color: var(--honey-deep);
  font-weight: 600;
}

.scelta input:checked + span::before { background: var(--honey); rotate: 30deg; }

.modulo__aiuto {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.modulo__invio { margin: var(--step-0) 0 0; }

.modulo__nota { margin: 0; max-width: none; font-size: 0.9rem; color: var(--text-secondary); }

/* La casella del consenso e' del browser: nei colori del sito, non in bianco e blu. */
.modulo__consenso input { accent-color: var(--honey-deep); }

@media (max-width: 34rem) {
  .modulo__invio .btn { width: 100%; justify-content: center; }
}

/* --- Richiesta partita: il sigillo si imprime ------------------------------ */

.bomb-fatto { display: grid; gap: var(--step-0); justify-items: start; }

.bomb-fatto h3 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.bomb-fatto p { margin: 0; color: var(--text-secondary); max-width: 46ch; }

.bomb-fatto__sigillo {
  width: clamp(5.5rem, 14vw, 8rem);
  height: auto;
  rotate: -6deg;
  filter: drop-shadow(0 8px 14px oklch(30% 0.06 55 / 0.28)) drop-shadow(0 20px 36px oklch(30% 0.06 55 / 0.2));
}

@media (prefers-reduced-motion: no-preference) {
  .bomb-fatto__sigillo { animation: bomb-imprime 760ms var(--ease-press) 120ms both; }
}


/* --- Riconoscimenti in Chi siamo -------------------------------------------- *
   Il blocco e' quello della home: l'elenco delle Gocce d'oro e, sotto, il
   concorso regionale. Qui non c'e' la griglia a due colonne della home, e il
   titolo del secondo concorso ha solo bisogno di un po' d'aria. */

.awards .awards__secondary-title {
  max-width: 40ch;
  margin: var(--step-3) 0 0;
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.7rem);
}

.awards .awards__meta { color: var(--text-secondary); font-size: 0.85rem; white-space: nowrap; }


/* --- Chiusura di Chi siamo: la rete e l'invito, affiancati ------------------ *
   Due blocchi di pari peso sotto i premi: a sinistra l'appartenenza a Mielerie
   Aperte (marchio e testo), a destra l'invito a venire in azienda. L'ultimo filetto dei
   riconoscimenti li stacca da sopra e uno in mezzo li tiene distinti. Sotto le
   62rem si impilano. */

.chiusura {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--step-3);
  padding-block: var(--step-2) var(--step-4);
}

.chiusura h2 {
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
  margin-bottom: 0.5rem;
}

.chiusura p { margin: 0 0 var(--step-0); max-width: 46ch; color: var(--text-secondary); }

/* Il secondo blocco ha il suo filetto a sinistra: sottile, a una sola riga di
   spessore, come i filetti dei registri. */
.invito {
  padding-inline-start: var(--step-3);
  border-inline-start: 1px solid var(--border-subtle);
}

.invito__azioni { display: flex; flex-wrap: wrap; gap: var(--step-0); margin: var(--step-1) 0 0; }

.rete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--step-1);
}

.rete__marchio {
  width: clamp(5.5rem, 8vw, 7rem);
  height: auto;
}

.rete h2 sup { font-size: 0.55em; vertical-align: super; line-height: 0; }

.rete__testo p:last-child { margin-bottom: 0; }

/* I premi hanno otto rem di respiro sotto; col blocco che segue bastano due. */
.awards:has(+ .chiusura) { padding-bottom: var(--step-2); }

@media (max-width: 62rem) {
  .chiusura { grid-template-columns: 1fr; gap: var(--step-3); }
  .invito { padding-inline-start: 0; border-inline-start: 0; padding-top: var(--step-3); border-top: 1px solid var(--border-subtle); }
}

@media (max-width: 36rem) {
  .rete { grid-template-columns: 1fr; }
  .rete__marchio { width: 6rem; }
}

/* Funzione di recesso (inc/recesso.php): il riepilogo prima della conferma. */
.recesso { margin-block: var(--step-2); padding-block-start: var(--step-1); border-top: 1px solid var(--border-subtle); }
.recesso__riepilogo { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem var(--step-1); margin: var(--step-0) 0; }
.recesso__riepilogo dt { color: var(--text-secondary); }
.recesso__riepilogo dd { margin: 0; overflow-wrap: anywhere; }