CSS avanzato e classi stabili
Quando i token non bastano — nascondere un elemento, spostarne un altro, un dettaglio tutto tuo —
puoi scrivere CSS direttamente sulle classi del widget. Solo quelle di questa lista
hanno supporto garantito: il resto del markup è interno e può cambiare senza preavviso.
Dove va questo CSS
Nel Custom CSS del pannello (Aspetto → Avanzato).
Il widget vive in uno shadow DOM, quindi il CSS del tuo negozio non raggiunge queste classi —
l'editor del pannello inietta il tuo all'interno. I token --fdl-*
sono l'eccezione: quelli sì, puoi dichiararli dall'esterno.
Classi con supporto stabile
Struttura
| Selettore | Cos'è |
| .findalo-search-host | Host del widget nella tua pagina (fuori dallo shadow). Il punto dove dichiarare i token --fdl-* dal tuo foglio di stile. |
| .kos-search | Radice del widget dentro lo shadow. Ambito dei token nel Custom CSS del pannello. |
| .topbar | Intestazione del widget: logo, carrello e chiusura. |
| .logo | Link del logo del negozio nell'intestazione. |
Campo di ricerca
| Selettore | Cos'è |
| .search-box | Box dell'input di ricerca. Porta la classe .searching mentre c'è una ricerca in corso. |
| .search-box input | L'input di ricerca. |
Filtri
| Selettore | Cos'è |
| .filter-bar | Barra sotto l'intestazione: chip dei filtri attivi, contatore e ordinamento. |
| .active-chip | Chip di un filtro attivo. |
| .sort-select | Selettore di ordinamento. |
| .facets | Sidebar dei filtri (marca, categoria, caratteristiche…). |
| .facet-section | Blocco di una faccetta dentro la sidebar. |
| .facet-label | Un'opzione di filtro (checkbox + testo). |
Risultati
| Selettore | Cos'è |
| .results | Contenitore principale dei risultati. |
| .grid | Griglia dei risultati (usa le colonne configurate nel pannello). In vista lista porta anche .grid--list. |
| .result-banner | Banner promozionale sopra i risultati. |
Card prodotto
| Selettore | Cos'è |
| .card | Card prodotto. |
| .card .img | Riquadro immagine della card. |
| .card .name | Nome del prodotto. |
| .card .price-row | Riga dei prezzi (attuale + barrato se c'è un'offerta). |
| .card .badge | Etichetta della card (offerta, esaurito, novità…). |
| .card .add-to-cart | Pulsante «Aggiungi al carrello» della card. |
Schermata iniziale
| Selettore | Cos'è |
| .empty-state | Schermata iniziale (prima di digitare): ricerche recenti, popolari, in evidenza. |
| .section-title | Titolo di ogni sezione della schermata iniziale. |
| .popular-card | Card del carosello dei popolari/in evidenza. |
| .recent-item | Voce delle ricerche recenti. |
| .pre-search-banner | Banner della schermata iniziale. |
| .discovery-rail | Rail di scoperta (accessi alle classifiche) della schermata iniziale. |
Overlay
| Selettore | Cos'è |
| .qv-panel | Pannello del modal di vista rapida. |
| .quiz-panel | Pannello del quiz / ricerca guidata. |
Ricette
Nascondere «Aggiungi al carrello» in una categoria
/* I prodotti puntano alla loro scheda: filtra per l'URL della categoria */
.card[href*="/tarjetas-regalo/"] .add-to-cart { display: none; } Griglia più densa sugli schermi grandi
@media (min-width: 1280px) {
.grid { grid-template-columns: repeat(6, 1fr) !important; }
} Intestazione sticky allo scroll
.kos-search .topbar { position: sticky; top: 0; z-index: 5; } Limiti: il CSS custom ammette fino a 100.000 caratteri se lo incolli nel pannello; se entra dall'Automazione IA il limite è 20.000, così un umano può rivederlo.
Le regole il cui selettore punta alle classi o all'attributo del badge (.f_brand_*, [data-findalo-brand]) vengono CANCELLATE al salvataggio —la regola intera, sostituita da un commento— e il pannello ti dice quante cadranno prima che salvi. È un filtro per pattern, non un rilevamento di intenzioni: una regola che nasconde il badge per un'altra via passa il filtro, e allora la taglia l'integrity check del widget a runtime.
