/* ===========================================================================
   [NEW-314] Pagine interne — il layout comune
   ---------------------------------------------------------------------------
   Un template solo, che rende una sequenza di blocchi. Qui ci sono i blocchi.

   Le misure vengono dagli artboard "ABOUT - CLUB - REPAIR", lette in
   PROPORZIONI e non in pixel: fra artboard e sito non esiste un fattore unico
   (il logo dice 3,15 e la nav 2,23, perche' nel disegno la testata e'
   cambiata), quindi convertire in px «dividendo per 4» avrebbe dato numeri
   falsi. Le percentuali, invece, si trasferiscono.

   ⚠ La SCALA DEL TESTO resta quella del sito (--bb-body, --bb-h1, --bb-h2…).
   Il disegno implicherebbe corpi leggermente diversi (circa 13/16/22/37 a
   1440), ma un redesign del LAYOUT non deve forkare di nascosto il sistema
   tipografico: se Roberta vuole anche la scala nuova, e' una decisione a se',
   e si cambiano i token in un posto solo.
   =========================================================================== */

/* ── il foglio della pagina si porta il suo fondo ─────────────────────────
   ⚠ Elementor genera un foglio PER PAGINA, e quello del Club portava
   `body.elementor-page-123121 { background-color: ... }` col nero del
   vecchio disegno. Finche' la pagina era fatta di sezioni Elementor quel nero
   stava sotto e non si vedeva; con questo template le sezioni non ci sono
   piu' e resta scoperto. Misurato il 03/10 appena commutato il Club: testo
   rgba(17,17,17,.78) su fondo nero, **contrasto 1,08:1**, cioe' illeggibile.

   Perche' qui e non aspettando la pulizia dei meta Elementor: quel foglio
   resta sul server finche' qualcuno non lo cancella, la pulizia e' un passo
   separato che si fa dopo la verifica, e lo stesso tranello aspetta About
   quando verra' commutata. Una pagina che definisce il proprio impaginato
   deve definire anche il proprio fondo, invece di ereditare quello di chi
   c'era prima.

   `!important` perche' il foglio di Elementor e' generato: la sua
   specificita' cambia quando qualcuno riapre la pagina nell'editor, e una
   gara di specificita' con un file che non controlliamo si perde prima o
   poi. E' lo stesso motivo per cui `bb-page-edge` usa `!important`. */
body.bb-pagina-interna-tpl {
  background-color: var(--bb-bg, #fff) !important;
}

.bb-pagina-interna {
  /* La colonna di prosa misurata sugli artboard: 29% -> 71%, cioe' 42%.
     Sotto una certa larghezza una colonna al 42% diventa illeggibile, quindi
     la misura e' un massimo, non una costante. */
  --bb-pi-colonna: 42%;
  --bb-pi-colonna-min: 30rem;

  /* Lo stacco fra un blocco e il successivo. Sugli artboard i vuoti vanno da
     ~60 a ~80px a 1440: una misura sola, non sette casi particolari. */
  --bb-pi-stacco: clamp(40px, 5vw, 80px);

  /* Il margine laterale quando il blocco NON e' a tutta larghezza. */
  --bb-pi-gutter: clamp(16px, 3vw, 48px);
}

/* ── l'impaginato: una colonna di blocchi, niente di piu' ─────────────────── */
.bb-pagina-interna__blocchi {
  display: flex;
  flex-direction: column;
  gap: var(--bb-pi-stacco);
}

/* ⚠ Il primo blocco non ha stacco sopra: in apertura l'immagine tocca la
   testata, come negli artboard (hero a y=27, cioe' subito sotto il menu). */
.bb-pagina-interna__blocchi > .bb-blocco:first-child {
  margin-top: 0;
}

/* ── immagini: la regola comune a tutti i blocchi che ne contengono ───────── */
.bb-blocco__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ⚠ Le PROPORZIONI sono imposte, non lasciate all'immagine.
   Negli artboard i riquadri hanno una forma precisa — il duo e' quadrato
   (716x723), l'apertura e' 16:9 (1431x809), la fascia di chiusura quasi 2:1
   (1431x727) — mentre i file veri hanno proporzioni molto diverse fra loro
   (una e' 2856x4284, verticale). Senza un ritaglio imposto, la stessa fila
   esce con due immagini di altezza diversa: e' esattamente quello che si
   vedeva nella prima prova.
   `object-fit: cover` ritaglia dal centro; se un giorno servira' scegliere il
   punto di ritaglio, si aggiunge un campo e si tocca solo questa regola. */
/* ⚠ L'immagine va SFILATA dal flusso, se no la proporzione imposta perde.
   Con l'immagine nel flusso e `height: 100%` dentro un contenitore ad altezza
   automatica, il browser ricade sulla dimensione NATURALE: misurato, l'hero
   usciva 1440x1152 (la proporzione del file, 1979x1583) invece di 1440x814
   (quella del disegno). Posizionandola in assoluto il contenitore decide, e
   l'immagine riempie il riquadro. */
.bb-blocco--hero,
.bb-blocco--immagine,
.bb-blocco--duo .bb-blocco__cella,
.bb-blocco--griglia .bb-blocco__cella {
  position: relative;
  overflow: hidden;
}

/* ⚠ Discendente e non figlio diretto: sull'hero l'immagine puo' stare
   dentro un <picture> (ritaglio diverso sul telefono), e con `>` il selettore
   smetterebbe di prenderla — l'immagine perderebbe il posizionamento e il
   rapporto, senza che niente segnali l'errore.
   Non prende il lockup: quello ha la sua classe, non .bb-blocco__img. */
/* [NEW-418] L'immagine a tutta larghezza si prende per DISCENDENZA, non col
   figlio diretto: quando ha un ritaglio per il telefono sta dentro un
   <picture class="bb-blocco__scatto"> (display:contents), quindi nel DOM non e'
   piu' figlia diretta della sezione. Come la hero, che gia' usava la
   discendenza per lo stesso motivo. I blocchi senza ritaglio mobile hanno
   un'unica .bb-blocco__img e non cambiano. */
.bb-blocco--hero .bb-blocco__img,
.bb-blocco--immagine .bb-blocco__img,
.bb-blocco--duo .bb-blocco__cella > .bb-blocco__img,
.bb-blocco--griglia .bb-blocco__cella > .bb-blocco__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bb-blocco--hero     { aspect-ratio: 1431 / 809; }

/* ⚠ Sul telefono l'hero del Club e' VERTICALE, non la stessa fascia
   orizzontale rimpicciolita: sull'artboard del telefono misura 1170x1619
   (ritaglio in piedi della stessa fotografia) contro 5089x2878 sul desktop.
   Con il solo rapporto orizzontale la foto sul telefono diventa una
   striscia alta 220px e il lockup ci sta dentro a stento. */
@media (max-width: 767px) {
  .bb-blocco--hero { aspect-ratio: 1170 / 1619; }
}
.bb-blocco--immagine { aspect-ratio: 1431 / 727; }

/* [NEW-418] Pagine interne, mobile: i blocchi immagine a tutta larghezza che
   sul telefono diventerebbero una STRISCIA orizzontale (1431/727) si
   raddrizzano a 4:5 come negli artboard del telefono. Pagina per pagina e
   blocco per blocco, perche' va fatto solo dove c'e' un'immagine adatta:
   - About (25025): blocco-4, blocco-8 (foto verticale gia' caricata) +
     blocco-12 (ritaglio 4:5 via img_mobile);
   - Repair (95558): blocco-4 (foto verticale gia' caricata) + blocco-8
     (ritaglio 4:5 via img_mobile);
   - Club (123121): blocco-6 (ritaglio 4:5 via img_mobile).
   I duo e le griglie restano fuori: non sono strisce, sono composizioni. I
   blocchi che usano un ritaglio (img_mobile) entrano qui SOLO dopo che
   l'immagine e' in libreria, se no mostrerebbero una fetta di quella
   orizzontale. Desktop e video non si toccano. 1170/1456 = il 4:5 del telefono. */
@media (max-width: 767px) {
  body.page-id-25025 #blocco-4.bb-blocco--immagine,
  body.page-id-25025 #blocco-8.bb-blocco--immagine,
  body.page-id-25025 #blocco-12.bb-blocco--immagine,
  body.page-id-95558 #blocco-4.bb-blocco--immagine,
  body.page-id-95558 #blocco-8.bb-blocco--immagine,
  body.page-id-123121 #blocco-6.bb-blocco--immagine {
    aspect-ratio: 1170 / 1456;
  }
}
.bb-blocco--duo .bb-blocco__cella,
.bb-blocco--griglia .bb-blocco__cella { aspect-ratio: 1 / 1; }

/* ── pieno schermo (0 -> 99% negli artboard, la fascia piu' frequente) ────── */
.bb-blocco--hero,
.bb-blocco--immagine {
  width: 100%;
}

/* ── due immagini affiancate (0-50 / 50-99) ──────────────────────────────── */
.bb-blocco--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;   /* negli artboard le due immagini si toccano */
}

/* ── quattro in fila (0-25 / 25-50 / 50-75 / 75-99) ──────────────────────── */
.bb-blocco--griglia {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

/* ── la colonna di prosa, col titolo NEL MARGINE SINISTRO ─────────────────
   ⚠ Il titolo non sta sopra il testo: sta a sinistra, allineato in alto con
   la prima riga. Misurato sugli artboard del Club — il testo e' a 29-71% e il
   titolo a ~17%, cioe' FUORI dalla colonna. Metterlo sopra sarebbe stato
   l'errore comodo: sembra uguale finche' non si confronta con il disegno. */
.bb-blocco--prosa {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--bb-pi-colonna)) 1fr;
  align-items: start;
  padding-inline: var(--bb-pi-gutter);
}

.bb-blocco--prosa > .bb-blocco__titolo {
  /* nella prima colonna, allineato a destra verso il testo */
  grid-column: 1;
  justify-self: end;
  padding-right: clamp(16px, 2vw, 40px);
  margin: 0;
}

.bb-blocco--prosa > .bb-blocco__colonna {
  grid-column: 2;
  /* ⚠ Qui la larghezza la decide GIA' la griglia (la colonna centrale e'
     minmax(0, 42%)). Lasciare anche il `width: min(42%...)` sulla colonna
     applicava il 42% due volte: misurato, 480px invece di 605 a 1440. */
  width: 100%;
  min-width: 0;
}

.bb-blocco__colonna {
  /* `min()` e non una percentuale secca: il 42% misurato vale su schermi
     larghi, ma su un portatile stretto diventerebbe una colonna da poche
     parole per riga. */
  width: min(var(--bb-pi-colonna), 100%);
  min-width: min(var(--bb-pi-colonna-min), 100%);
  max-width: 100%;
  margin-inline: auto;
}

.bb-blocco__titolo {
  margin: 0 0 clamp(12px, 1.2vw, 20px);
  font-family: var(--bb-font, 'Jost'), sans-serif;
  font-size: var(--bb-h2);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title);
  text-transform: uppercase;
  color: var(--bb-fg);
}

.bb-blocco__testo {
  font-family: var(--bb-font-editorial, 'Playfair Display'), serif;
  font-size: var(--bb-body);
  line-height: 1.6;
}

.bb-blocco__testo p {
  margin: 0 0 1em;
}

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

/* ── il colore della prosa ────────────────────────────────────────────────
   I paragrafi editoriali vanno in NERO, non in grigio (Fabio, 14/10).

   Da dove veniva il grigio, misurato col browser e non dedotto dai fogli:
    · i <p> li prendeva `:where(p)` in 01-base.css, rgba(17,17,17,.78);
    · le voci dell'elenco NON avevano un colore proprio: EREDITAVANO il #444
      che il kit Elementor mette su `body`, e che vince sul nostro perche'
      arriva dopo a parita' di peso. Contro l'EREDITA' pero' basta una
      qualunque regola sull'elemento: e' la stessa lezione di `:where()`.

   ⚠ Perche' `:where()` sul contenitore e non `.bb-blocco__testo p`.
   Quest'ultimo pesa (0,1,1) e avrebbe travolto chi un colore suo ce l'ha
   DICHIARATO a una classe sola — la bio degli insegnanti a #333, il
   separatore «oppure» a #888 su Scuola. Cosi' invece la regola pesa (0,0,1):
   abbastanza per battere `:where(p)` (0,0,0) e l'eredita', troppo poco per
   mettersi davanti a una scelta locale. */
:where(.bb-blocco__testo) p,
:where(.bb-blocco__testo) li {
  color: var(--bb-fg);
}

/* ── l'elenco (i privilegi del Club) ──────────────────────────────────────
   Sull'artboard ogni privilegio comincia con un TRATTINO: e' il segno del
   disegno, non un pallino del browser. Quindi marcatore spento e trattino
   disegnato con ::before.
   ⚠ Il rientro e' APPESO (padding + text-indent negativo) perche' le voci
   lunghe vanno a capo — "Client Advisor a tua disposizione per consulenze
   dedicate via chat, su appuntamento in Bottega o da remoto." su due righe —
   e la seconda riga deve allinearsi al TESTO, non al trattino. Senza questo
   l'elenco sembra prosa sbilenca. */
.bb-blocco__elenco {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-blocco__elenco li {
  margin: 0 0 .6em;
  padding-left: 1.1em;
  text-indent: -1.1em;
}

.bb-blocco__elenco li:last-child {
  margin-bottom: 0;
}

.bb-blocco__elenco li::before {
  content: '\2013';
  /* ⚠ Larghezza FISSA pari al rientro, non un trattino seguito da uno spazio:
     cosi' il testo della prima riga comincia esattamente dove cominciano le
     righe successive. Con lo spazio insecabile il marcatore misurava 11px
     contro i 15.4 del rientro e le due righe della stessa voce si
     scostavano di 4px — poco, ma visibile proprio sulla voce lunga.
     `text-indent: 0` serve perche' text-indent si EREDITA: senza, il
     trattino uscirebbe dal suo riquadro verso sinistra. */
  display: inline-block;
  width: 1.1em;
  text-indent: 0;
}

/* ── il lockup SOPRA l'hero ───────────────────────────────────────────────
   ⚠ Non e' una banda separata: sull'artboard del Club il lockup bianco sta
   SOPRA la fotografia, ripetuto in orizzontale, e una delle copie comincia
   fuori dal bordo sinistro. Nella prima versione l'avevo reso come banda a
   se' — sbagliato in due modi, perche' non e' una banda e perche' ce l'ha
   SOLO il Club (Repair e About hanno l'hero nudo).
   Il lockup e' bianco, quindi qui non serve nessun fondo: sta sulla foto. */
.bb-blocco__sovra {
  position: absolute;
  inset-block: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

/* [NEW-391] L'involucro che rende il lockup il titolo della pagina.
   `display: contents` lo toglie di mezzo al layout: la scatola non esiste, e
   il lockup resta l'elemento flex che era: stessa larghezza, stessa
   posizione, stesso ritaglio. Nell'albero di accessibilita' invece
   l'intestazione c'e', col nome che le da' il testo alternativo. */
.bb-blocco__lockup-h1 {
  display: contents;
}

.bb-blocco__lockup {
  /* Sull'artboard il lockup occupa circa un terzo della larghezza sul
     desktop e due terzi sul telefono: in proporzione, non in pixel, perche'
     fra artboard e sito non c'e' un fattore di scala unico. */
  flex: 0 0 auto;
  width: 20%;
  height: auto;
  object-fit: contain;
}

/* ⚠ Questa regola va DOPO quella di base, non in cima al foglio insieme al
   rapporto dell'hero: ha la stessa specificita', e a parita' di specificita'
   vince l'ultima scritta. Messa prima, il 20% del desktop avrebbe vinto anche
   sul telefono e il marchio sarebbe uscito tre volte piu' piccolo del disegno,
   senza che niente segnalasse l'errore. */
@media (max-width: 767px) {
  .bb-blocco__lockup { width: 66%; }
}

/* La scritta sull'hero, quando non e' un lockup disegnato.
   Misurata sull'artboard di Repair: corpo 82 su un artboard largo 5089,
   cioe' l'1,6% della larghezza — a 1440 fanno 23px. Sul telefono 45 su 1170,
   cioe' il 3,8%, che a 390 fanno 15px. Quindi una misura che SEGUE la
   larghezza, non un corpo fisso. */
.bb-blocco__sovra .bb-blocco__sovratitolo {
  margin: 0;
  padding-inline: var(--bb-pi-gutter);
  font-family: var(--bb-font, 'Jost'), sans-serif;
  /* ⚠ [NEW-333] DUE CLASSI, non una: a classe sola (0,1,0) questa
     regola perdeva da `.site h1` di Shoptimizer (0,1,1) dentro
     @media (max-width: 768px), e sul telefono il titolo restava a 20px
     mentre home e Scuola stavano a 22. E' la stessa trappola gia'
     documentata da NEW-198 sull'hero della Scuola: il genitore
     `.bb-blocco__sovra` e' la struttura vera del blocco, non un
     appiglio inventato per vincere.
     ⚠ Il token condiviso degli hero, lo stesso di home e
     Scuola: i tre titoloni devono misurare uguale (Fabio). Era
     clamp(15px, 1.6vw, 26px), cioe' 23px contro i 31,7 degli altri a
     1440 e 20 contro 22 a 390.
     Questa regola veste l'hero di TUTTE le pagine interne, quindi Club e
     About si uniformeranno da sole quando passeranno al template. */
  font-size: var(--bb-h1-hero);
  font-weight: 400;
  letter-spacing: var(--bb-ls-heading);
  text-transform: uppercase;
  text-align: center;
  color: #fff;
}

/* Il rimando in fondo alla prosa: una riga, non un bottone. */
/* ⚠ [NEW-368] Il rimando e' una CTA, e le CTA vanno in JOST.
   Era in Playfair come la prosa: aveva senso quando lo si leggeva come
   «ultima riga del testo», ma e' un invito all'azione, non una frase da
   leggere — e su tutte le altre pagine (Bottega, Shopping, Scuola) gli
   inviti sono gia' in Jost. Richiesta di Fabio: questa e' l'unica CTA del
   sito rimasta in Playfair, ed e' proprio sulla pagina che fa da modello. */
.bb-blocco__rimando {
  margin: 1.4em 0 0;
  font-family: var(--bb-font, 'Jost'), sans-serif;
  font-size: var(--bb-body);
  line-height: 1.6;
}

/* [NEW-396] La CTA non e' piu' sottolineata per intero: prende il trattino
   da 22px centrato come tutte le altre del sito. La regola che lo disegna sta
   in 99-overrides.css (sistema NEW-47), una volta sola; qui resta solo l'aria
   sotto il testo perche' il trattino non tocchi le pance delle lettere. */
.bb-blocco__rimando a {
  color: inherit;
  padding-bottom: 3px;
}

/* <picture> non deve diventare un riquadro fra la sezione e l'immagine. */
.bb-blocco__scatto {
  display: contents;
}

/* ── il titolo da vetrina (il corpo piu' grande degli artboard) ───────────── */
.bb-blocco--vetrina {
  padding-inline: var(--bb-pi-gutter);
  text-align: center;
}

.bb-blocco__vetrina {
  margin: 0;
  font-family: var(--bb-font, 'Jost'), sans-serif;
  font-size: var(--bb-h1);
  font-weight: 500;
  letter-spacing: var(--bb-ls-heading);
  text-transform: uppercase;
}

/* ── la fila di rimandi (4 voci, negli artboard a 29/39/50/64%) ───────────── */
.bb-blocco--ancore {
  padding-inline: var(--bb-pi-gutter);
}

.bb-blocco--ancore ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(16px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bb-blocco--ancore a,
.bb-blocco--ancore span {
  font-family: var(--bb-font, 'Jost'), sans-serif;
  font-size: var(--bb-small);
  letter-spacing: var(--bb-ls-heading);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bb-fg);
}

/* [NEW-396] Al passaggio cambia SOLO il trattino: niente piu' schiarimento,
   come dice il sistema NEW-47. L'aria sotto serve al trattino. */
.bb-blocco--ancore a {
  padding-bottom: 4px;
}

/* ── il richiamo (40 -> 60%, cioe' 20% centrato) ──────────────────────────── */
.bb-blocco--richiamo {
  padding-inline: var(--bb-pi-gutter);
  text-align: center;
}

/* ⚠ [NEW-369] Il richiamo e' NERO PIENO, non un contorno.
   Era un bottone contornato che si riempiva solo al passaggio del mouse.
   Fabio lo vuole «nero, evidente»: un contorno su fondo bianco, in fondo a
   una pagina lunga, si legge come una nota e non come l'azione principale —
   e chi arriva da telefono il passaggio del mouse non ce l'ha proprio.
   Stesso vestito del bottone d'accesso: nero pieno, spigoli vivi, peso 500.

   Si poteva cambiare senza paura perche' NESSUNA pagina usa oggi questo
   blocco: verificato su Club, Repair e About, in italiano e in inglese,
   zero occorrenze. Il Club sara' la prima. */
.bb-blocco__richiamo {
  display: inline-block;
  min-width: min(20%, 16rem);
  padding: clamp(12px, 1.2vw, 18px) clamp(20px, 2vw, 32px);
  background: var(--bb-black, #000);
  border: var(--bb-line-width, 1px) solid var(--bb-black, #000);
  font-family: var(--bb-font, 'Jost'), sans-serif;
  font-size: var(--bb-small);
  font-weight: 500;
  letter-spacing: var(--bb-ls-heading);
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.bb-blocco__richiamo:hover,
.bb-blocco__richiamo:focus-visible {
  background: transparent;
  color: var(--bb-fg);
}

/* ⚠ Il contorno del fuoco non si toglie: chi gira con la tastiera deve
   vedere dove si trova, e qui il passaggio inverte i colori — senza questo
   il fuoco sarebbe indistinguibile dal passaggio del mouse. */
.bb-blocco__richiamo:focus-visible {
  outline: 2px solid var(--bb-fg, #111);
  outline-offset: 3px;
}

/* ⚠ Uno `span` (richiamo senza indirizzo) non e' cliccabile: non deve
   sembrarlo. */
span.bb-blocco__richiamo {
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .bb-blocco__richiamo {
    transition: none;
  }
}

/* ===========================================================================
   Telefono
   ⚠ Negli artboard mobile la fila da quattro diventa da DUE (0-50 / 50-100),
   non una colonna sola: e' misurato, non supposto.
   =========================================================================== */
@media (max-width: 767px) {
  .bb-blocco--griglia {
    grid-template-columns: repeat(2, 1fr);
  }

  .bb-blocco__colonna {
    /* a questa larghezza la colonna e' tutta la pagina meno i margini */
    width: 100%;
    min-width: 0;
  }

  /* I rimandi diventano una striscia che scorre in orizzontale, come il menu
     dell'account. Stesso modello, non uno nuovo: contenitore che scorre,
     elenco a `width: max-content` che non va a capo, barra di scorrimento
     nascosta.
     ⚠ Il padding va sull'ELENCO e non sul contenitore: su un contenitore
     che scorre, il padding destro sparisce quando si arriva in fondo, e
     l'ultima voce resta incollata al bordo. */
  .bb-blocco--ancore {
    padding-inline: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .bb-blocco--ancore::-webkit-scrollbar { display: none; }

  .bb-blocco--ancore ul {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    padding-inline: var(--bb-pi-gutter);
  }

  .bb-blocco--ancore li {
    flex: 0 0 auto;
  }

  /* Il titolo nel margine non ha piu' un margine in cui stare: torna sopra. */
  .bb-blocco--prosa {
    grid-template-columns: 1fr;
  }

  .bb-blocco--prosa > .bb-blocco__titolo {
    grid-column: 1;
    justify-self: start;
    padding-right: 0;
    margin-bottom: clamp(12px, 3vw, 20px);
  }

  .bb-blocco--prosa > .bb-blocco__colonna {
    grid-column: 1;
  }
}


/* ===========================================================================
   [NEW-368] ABOUT — la pagina interna che non è ancora passata al template

   About è una pagina di prosa come Club e Repair, ma sta ancora su
   Elementor: non ha i `.bb-blocco*` e non può ereditare le loro regole.
   Qui si allinea la SOLA cosa che il giro di conformità chiede — i
   paragrafi in Playfair — senza toccare l'impaginato di Elementor.

   ⚠ Il gancio è la classe `bb-prosa-elementor`, messa per SLUG (About IT è
   25025 e About EN 25027: una regola sull'id curerebbe una lingua sola).

   ⚠ Questo blocco è un PONTE, non una scelta: il giorno che About passa a
   `page-interna.php` va CANCELLATO a mano insieme a
   `bb_e_pagina_prosa_elementor()`. Un ponteggio che resta in piedi dopo il
   lavoro finisce nei giri di manutenzione per sempre.
   =========================================================================== */

body.bb-prosa-elementor .elementor-widget-text-editor p,
body.bb-prosa-elementor .elementor-widget-container > p {
  font-family: var(--bb-font-editorial, 'Playfair Display'), serif;
}

/* ── [NEW-382] la vetrina di prodotti scelti a mano ────────────────────────
   Le schede sono quelle del catalogo (woocommerce/content-product.php) e la
   griglia e' la sua, `bb-product-grid`: due colonne sul telefono, tre da 768,
   quattro da 1024. Qui si sistema solo quello che cambia stando dentro una
   pagina interna — il margine laterale, che i blocchi a tutta larghezza non
   hanno e una griglia di schede invece si', e lo stacco del titolo. */
.bb-blocco--prodotti {
  padding-inline: var(--bb-pi-gutter);
}

.bb-blocco__titolo-vetrina {
  margin: 0 0 clamp(20px, 2.5vw, 36px);
  font-family: var(--bb-font, 'Jost'), sans-serif;
  font-size: var(--bb-h2);
  font-weight: 500;
  letter-spacing: var(--bb-ls-heading);
  text-transform: uppercase;
  text-align: center;
  color: var(--bb-fg);
}

/* Il margine sotto che la griglia del catalogo si porta dietro (48px, serve
   li' per staccarsi dalla paginazione) qui e' di troppo: lo stacco fra i
   blocchi lo decide gia' --bb-pi-stacco, e sommati fanno un buco. */
.bb-blocco--prodotti .bb-vetrina__griglia {
  margin-bottom: 0;
}