Theming con i token --fdl-*

I token sono la via supportata per cambiare l'aspetto della ricerca con il CSS. Sono custom properties versionate: le dichiari una volta e il widget le applica in tutti i suoi componenti, sopra la configurazione del pannello e il preset visivo attivo.

Uso di base

Da un foglio di stile qualsiasi del tuo negozio (non serve toccare il pannello):

.findalo-search-host {
  --fdl-primary: #0d7a5e;
  --fdl-radius-md: 14px;
  --fdl-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  --fdl-font-display: "Poppins", sans-serif;
}

Oppure dal Custom CSS del pannello (Aspetto → Avanzato), sulla radice del widget:

.kos-search {
  --fdl-primary: #0d7a5e;
  --fdl-btn-radius: 8px;
}

Riferimento dei token

Precedenza

Dalla priorità più alta alla più bassa: i tuoi token → impostazioni del pannello (colori, colonne…) → preset visivo → default del widget. Un token che dichiari vince sempre su quanto configurato nel pannello per quella stessa proprietà.

Valori responsive

Dichiara il token sempre (fuori dalle media query) e cambia il suo valore al loro interno. La presenza del token viene rilevata al caricamento; il suo valore invece viene seguito in tempo reale.

.findalo-search-host { --fdl-card-pad: 12px; }

@media (max-width: 640px) {
  .findalo-search-host { --fdl-card-pad: 8px; }
}