/* ============================================================
   retailers.css — i rivenditori per continente

   [NEW-367] Rifatto rispetto al CSS dello snippet di produzione, che
   impilava le nazioni in colonne di larghezza fissa e lasciava decidere il
   numero di elementi per colonna a un attributo scritto a mano nella pagina
   (`custom_distribution="9,1,8,8,2"`). Due difetti, non uno: le colonne si
   sbilanciavano appena si aggiungeva una nazione, e una nazione lunga poteva
   spezzarsi in fondo a una colonna e ripartire nella successiva.

   Qui le colonne le fa `columns`, che BILANCIA DA SOLA l'altezza, e
   `break-inside: avoid` tiene insieme ogni nazione. Il numero scritto a mano
   non serve piu' a nessuno.

   La divisione per continente resta, com'e' stato chiesto: la fa la pagina,
   una chiamata di shortcode per continente.

   Il vestito e' quello del sito: maiuscolo spaziato per i titoli, filetto
   sottile, nero su bianco, nessun colore nuovo.
   ============================================================ */

.bb-retailers {
  color: var(--bb-fg, #111);
  text-align: left;
}

/* ⚠ Le colonne stanno sul GRUPPO delle nazioni piccole, non sull'intera
   griglia. Misurato: con tutto in un unico blocco a colonne, l'Italia (47
   negozi, 32% del totale) fissava da sola l'altezza e l'Europa usava 3
   colonne su 4, lasciando 329px vuoti a destra. Il bilanciamento non puo'
   fare colonne piu' basse del blocco piu' alto, e spezzare l'Italia sarebbe
   peggio: si perde l'intestazione e non si sa piu' in che paese si sta.

   Il conto delle colonne NON e' scritto: si dichiara la larghezza minima e il
   browser ne mette quante ce ne stanno, cosi' regge anche le larghezze che
   non abbiamo provato. */
.bb-retailers__blocco--gruppo {
  columns: 15.5rem auto;
  column-gap: clamp(20px, 2.6vw, 44px);
}

/* Una nazione GRANDE prende tutta la larghezza e sono i suoi NEGOZI a
   incolonnarsi: 47 nomi su quattro colonne si scorrono, su una sola no. */
.bb-retailers__blocco--fascia {
  margin-bottom: clamp(26px, 2.6vw, 44px);
}

.bb-retailers__nazione--fascia .bb-retailers__elenco {
  columns: 15.5rem auto;
  column-gap: clamp(20px, 2.6vw, 44px);
}

.bb-retailers__nazione--fascia .bb-retailers__negozio {
  break-inside: avoid;
  page-break-inside: avoid;
}

/* ============================================================
   LA NAZIONE
   ============================================================ */
.bb-retailers__nazione {
  /* ⚠ La riga che evita il difetto peggiore del CSS vecchio: una nazione non
     si spezza mai fra due colonne. */
  break-inside: avoid;
  page-break-inside: avoid; /* per i motori piu' vecchi */
  margin: 0 0 clamp(26px, 2.6vw, 44px);
}

/* ⚠ Due classi: sotto i 768px `.site h3` di Shoptimizer vale (0,1,1) e batte
   una classe sola, rimandando il titolo alla misura del tema. E' la trappola
   di NEW-198 e NEW-333. */
.bb-retailers .bb-retailers__paese--titolo {
  margin: 0 0 clamp(10px, 1vw, 16px);
  padding: 0 0 8px;
  border-bottom: 1px solid var(--bb-line, #e3e3e3);
  font-size: var(--bb-small, 12px);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title, .18em);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--bb-fg, #111);
}

/* ============================================================
   L'ELENCO
   ============================================================ */
.bb-retailers__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-retailers__negozio {
  margin: 0 0 clamp(14px, 1.4vw, 22px);
}

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

/* Il nome: la riga che si legge per prima scorrendo l'elenco. */
.bb-retailers__nome {
  margin: 0;
  font-size: var(--bb-body, 14px);
  font-weight: 500;
  line-height: 1.45;
}

/* La citta': in corsivo e piu' tenue, come nel disegno di partenza — serve a
   separare due negozi dello stesso paese, non a essere letta per prima. */
.bb-retailers__citta {
  margin: 2px 0 0;
  font-size: var(--bb-small, 12px);
  font-style: italic;
  line-height: 1.45;
  color: var(--bb-muted, #6b6b6b);
}

.bb-retailers__indirizzo {
  margin: 4px 0 0;
  font-size: var(--bb-small, 12px);
  line-height: 1.5;
}

/* ⚠ Il collegamento NON e' sottolineato di suo e lo diventa al passaggio:
   in una colonna fitta decine di righe sottolineate diventano rumore, e
   l'indirizzo si distingue gia' perche' e' l'unica parte cliccabile. Il
   contorno del fuoco resta, perche' chi gira con la tastiera deve vedere
   dove si trova. */
.bb-retailers__indirizzo a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--bb-line, #e3e3e3);
  transition: border-color .2s ease, color .2s ease;
}

.bb-retailers__indirizzo a:hover,
.bb-retailers__indirizzo a:focus-visible {
  color: var(--bb-black, #000);
  border-bottom-color: currentColor;
}

.bb-retailers__indirizzo a:focus-visible {
  outline: 2px solid var(--bb-fg, #111);
  outline-offset: 2px;
}

/* L'avviso lo vede solo chi puo' modificare le pagine: shortcode scritto male. */
.bb-retailers__avviso {
  margin: 0;
  padding: 10px 14px;
  border: 1px dashed var(--bb-line, #e3e3e3);
  font-size: var(--bb-small, 12px);
  color: var(--bb-muted, #6b6b6b);
}

/* ============================================================
   TELEFONO
   ============================================================ */
@media (max-width: 767px) {
  /* ⚠ Una colonna sola, non due. Con due colonne a 375px ogni colonna sta
     in ~165px: i nomi dei negozi vanno a capo tre volte e l'elenco diventa
     illeggibile. Meglio scorrere di piu' e leggere. */
  .bb-retailers__blocco--gruppo,
  .bb-retailers__nazione--fascia .bb-retailers__elenco {
    columns: 1;
  }
}

/* ============================================================
   Chi ha chiesto meno animazioni non le riceve.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bb-retailers__indirizzo a {
    transition: none;
  }
}


/* ============================================================
   LA PAGINA (template page-retailers.php, senza Elementor)

   ⚠ Il fondo si dichiara qui. Una pagina che lascia Elementor si porta
   dietro il suo `post-<id>.css`, che dipinge il fondo del body — spesso
   scuro — e il testo nero ci finisce sopra (NEW-315, contrasto 1,08:1).
   Il foglio Elementor lo togliamo in functions.php, ma il template deve
   comunque dire di che colore e'.
   ============================================================ */
body.bb-retailers-tpl {
  background: #fff;
}

/* ⚠ LA PAGINA ERA STRETTA E SPOSTATA A SINISTRA, e non per colpa nostra.
   Misurato a 1440: `.content-area` era larga 944 dentro un `.col-full` di
   1243, allineata a sinistra — il suo centro cadeva a 563 mentre il centro
   dello schermo (e il logo in testata) sta a 713. E' lo spazio che
   Shoptimizer riserva alla BARRA LATERALE: solo che su questa pagina la
   barra NON ESISTE (cercata: zero elementi). Si teneva vuoto un quarto di
   schermo per un ospite che non arriva, e tutto il resto scivolava di lato.

   Si libera qui invece di combattere a valle con margini negativi: la
   larghezza va chiesta a chi la stringe. */
body.bb-retailers-tpl .content-area {
  width: 100%;
  max-width: none;
  float: none;
  margin-inline: 0;
}

body.bb-retailers-tpl .col-full {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}

.bb-retailers-page {
  /* a tutta larghezza: lo spazio ai lati e' solo il respiro tipografico */
  max-width: none;
  margin-inline: 0;
  padding-block: clamp(28px, 4vw, 72px) clamp(48px, 7vw, 120px);
  padding-inline: clamp(20px, 3.2vw, 56px);
  color: var(--bb-fg, #111);
}

/* ---------- apertura ---------- */
.bb-retailers-page__apertura {
  text-align: center;
  margin-bottom: clamp(26px, 3.4vw, 52px);
}

/* ⚠ Due classi: sotto i 768px `.site h1` di Shoptimizer vale (0,1,1). */
.bb-retailers-page .bb-retailers-page__titolo {
  margin: 0;
  font-size: var(--bb-h1-hero, clamp(22px, 2.2vw, 32px));
  font-weight: 300;
  letter-spacing: var(--bb-ls-title, .18em);
  text-transform: uppercase;
  line-height: 1.25;
}

.bb-retailers-page__intro {
  margin: clamp(12px, 1.6vw, 20px) auto 0;
  max-width: 58ch;
  font-size: var(--bb-body, 14px);
  line-height: 1.75;
  color: var(--bb-muted, #6b6b6b);
}

/* ---------- la ricerca ---------- */
.bb-retailers-page__cerca {
  max-width: 440px;
  margin: 0 auto clamp(22px, 2.6vw, 40px);
}

.bb-retailers-page__cerca-etichetta {
  display: block;
  margin-bottom: 8px;
  font-size: var(--bb-tiny, 10px);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title, .18em);
  text-transform: uppercase;
  text-align: center;
}

/* ⚠ 16px e non meno: sotto questa misura il telefono INGRANDISCE la pagina
   da solo quando si entra nel campo, e tutto salta (stessa ragione dei campi
   dell'accesso, NEW-201). */
.bb-retailers-page__cerca-campo {
  width: 100%;
  padding: 12px 16px;
  background: var(--bb-bg, #fff);
  border: 1px solid var(--bb-black, #000);
  border-radius: 0;
  box-shadow: none;
  font-size: 16px;
  color: var(--bb-fg, #111);
}

.bb-retailers-page__cerca-campo:focus-visible {
  outline: 2px solid var(--bb-fg, #111);
  outline-offset: 2px;
}

.bb-retailers-page__esito {
  margin: 8px 0 0;
  min-height: 1.2em; /* non fa saltare la pagina quando compare */
  font-size: var(--bb-small, 12px);
  text-align: center;
  color: var(--bb-muted, #6b6b6b);
}

/* ---------- la barra dei continenti ---------- */
.bb-retailers-page__continenti {
  position: sticky;
  top: 0;
  z-index: 2;
  margin-bottom: clamp(24px, 3vw, 44px);
  padding-block: 10px;
  background: #fff;
  border-bottom: 1px solid var(--bb-line, #e3e3e3);
}

.bb-retailers-page__continenti-elenco {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.bb-retailers-page__continente-link {
  display: inline-block;
  padding: 4px 2px;
  font-size: var(--bb-small, 12px);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title, .18em);
  text-transform: uppercase;
  color: var(--bb-muted, #6b6b6b);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.bb-retailers-page__continente-link:hover,
.bb-retailers-page__continente-link:focus-visible {
  color: var(--bb-fg, #111);
  border-bottom-color: currentColor;
}

/* ---------- le sezioni ---------- */
.bb-retailers-page__continente {
  margin-bottom: clamp(40px, 5vw, 80px);

  /* ⚠ L'ancora non deve finire SOTTO la barra appiccicata: senza questo, chi
     clicca «Asia» vede il titolo tagliato a meta' dalla barra stessa. */
  scroll-margin-top: 72px;
}

.bb-retailers-page .bb-retailers-page__h2 {
  margin: 0 0 clamp(16px, 2vw, 28px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bb-fg, #111);
  font-size: var(--bb-body, 14px);
  font-weight: 500;
  letter-spacing: var(--bb-ls-title, .18em);
  text-transform: uppercase;
  line-height: 1.3;
}

.bb-retailers-page__nessuno,
.bb-retailers-page__vuoto {
  margin: clamp(24px, 4vw, 48px) 0;
  text-align: center;
  font-size: var(--bb-body, 14px);
  color: var(--bb-muted, #6b6b6b);
}

.bb-retailers-page__totale {
  margin: clamp(24px, 3vw, 44px) 0 0;
  padding-top: clamp(16px, 2vw, 24px);
  border-top: 1px solid var(--bb-line, #e3e3e3);
  text-align: center;
  font-size: var(--bb-tiny, 10px);
  letter-spacing: var(--bb-ls-title, .18em);
  text-transform: uppercase;
  color: var(--bb-muted, #6b6b6b);
}

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