/* ===========================================================================
   I PULSANTI DELLE CATEGORIE E DEI FILTRI DELLA VETRINA  —  blocco 81805
   MARCA_81805_VETRINA_PULSANTI_DI_CASA
   ===========================================================================

   Giovanni, 27 settembre 2026: «Le categorie e i filtri: i pulsanti falli
   piu' carini».

   COM'ERA, guardato a 1280 e a 390 punti, tema chiaro e scuro:
   - "Cosa vuoi vedere" (Tutto / Solo foto / Solo video): pastiglie con un
     bordo da 1 punto quasi invisibile, e quella scelta un blocco pieno di
     colore accento, netto e pesante;
   - "Categoria" (Tutte le categorie / Matrimoni / ...): scritte NUDE, senza
     bordo ne' fondo, con solo una lineetta sotto quella scelta. Non
     sembravano pulsanti: sembravano titoli;
   - il numero dei video scritto fra parentesi tonde dentro il testo;
   - le due file avevano altezze diverse e non stavano su una griglia sola.

   COM'E' ADESSO, E DA DOVE VIENE. Niente stile nuovo: si porta qui la
   PASTIGLIA CHE REGIAPRO HA GIA', quella dei filtri della bacheca Live
   Moments (.gal-live-pastiglia in modern-theme.css, riga ~9694): bordo da
   1,5 punti, angoli tondi pieni, fondo --surface, altezza minima 36 punti,
   e da scelta bordo --accent su fondo --accent-soft. Il numero diventa la
   stessa pastiglina del conteggio (.gal-live-conta).

   RESTANO DUE FILTRI DIVERSI, e non e' un dettaglio: che sembrassero lo
   stesso filtro scritto due volte era gia' stato un difetto segnalato da
   Giovanni («vedo duplicato la scritta tutto foto e video»). Quindi:
   - "Cosa vuoi vedere" e' la scelta principale -> pastiglia PIENA quando e'
     scelta (fondo --accent, scritta --on-accent);
   - "Categoria" e' la scelta secondaria -> stessa pastiglia, ma quando e'
     scelta resta CHIARA (bordo --accent su fondo --accent-soft).
   Stessa forma, due pesi: si vede che sono due domande diverse, e tutte e
   due si vedono che sono pulsanti.

   FOGLIO A PARTE, non modern-theme.css: quel file lo stanno toccando altri
   reparti in questi giorni. Stessa scelta di contatti-studio.css.
   Solo token della grafica: nessun colore scritto a mano, quindi tema
   chiaro, tema scuro e i sei temi della vetrina continuano a comandare.
   ========================================================================= */

/* ---- la fila, e lo spazio fra le due domande ---- */
.pf-filtri{
  gap:16px;
}
.pf-filtro-gruppo{
  gap:9px;
}
.pf-tab{
  gap:9px;
  align-items:center;
}

/* ---- la pastiglia di casa, uguale per tutte e due le file ---- */
.pf-tab button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:8px 16px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--surface);
  color:var(--ink-2);
  font:inherit;
  font-size:13.5px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  transition:background var(--tr,.2s),border-color var(--tr,.2s),
             color var(--tr,.2s);
}
.pf-tab button:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-ink);
}
/* Il contorno di chi naviga con il tasto di tabulazione: c'era sul
   pulsante di prima solo per via del bordo, e senza bordo sparisce. */
.pf-tab button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---- "Cosa vuoi vedere": la scelta principale, pastiglia piena ---- */
.pf-tab-media button{
  font-weight:600;
}
.pf-tab-media .pf-tab-attiva{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}
.pf-tab-media .pf-tab-attiva:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
}

/* ---- "Categoria": la scelta secondaria, pastiglia chiara ---- */
.pf-tab-categoria button{
  /* Qui il foglio comune scriveva "background:none; border:0;
     border-bottom:2px solid; border-radius:0; padding:6px 12px",
     cioe' toglieva la pastiglia. Si rimette. */
  background:var(--surface);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:8px 16px;
  color:var(--ink-2);
}
.pf-tab-categoria button:hover{
  border-color:var(--accent);
  background:var(--accent-soft);
  color:var(--accent-ink);
}
.pf-tab-categoria .pf-tab-attiva{
  background:var(--accent-soft);
  border-color:var(--accent);
  color:var(--accent-ink);
  font-weight:600;
}

/* ---- il numero dei video: la pastiglina del conteggio, non le parentesi ---- */
.pf-tab-conta{
  min-width:20px;
  padding:1px 6px;
  border-radius:999px;
  background:var(--sunken);
  color:var(--ink-3);
  font-size:11.5px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
}
.pf-tab-media .pf-tab-attiva .pf-tab-conta{
  background:var(--surface);
  color:var(--accent-ink);
}

/* ---- la didascalia sopra ogni fila: un filo piu' staccata ---- */
.pf-filtro-titolo{
  margin-bottom:1px;
}

/* ---- telefono: si tocca col pollice e la fila va a capo per bene ---- */
@media (max-width:640px){
  .pf-tab{gap:8px}
  .pf-tab button,
  .pf-tab-categoria button{
    min-height:42px;
    padding:9px 15px;
    font-size:13px;
  }
}