CSS avancé et classes stables
Quand les tokens ne suffisent pas — masquer un élément, en déplacer un autre, un détail bien à toi —
tu peux écrire du CSS directement sur les classes du widget. Seules celles de cette liste
ont un support garanti : le reste du markup est interne et peut changer sans préavis.
Où va ce CSS
Dans le Custom CSS du panneau (Apparence → Avancé).
Le widget vit dans un shadow DOM, donc le CSS de ta boutique n'atteint pas ces classes —
l'éditeur du panneau injecte le tien à l'intérieur. Les tokens --fdl-*
sont l'exception : eux, tu peux les déclarer depuis l'extérieur.
Classes avec support stable
Structure
| Sélecteur | Ce que c'est |
| .findalo-search-host | Host du widget dans ta page (hors du shadow). L'endroit où déclarer les tokens --fdl-* depuis ta propre feuille de styles. |
| .kos-search | Racine du widget dans le shadow. Portée des tokens dans le Custom CSS du panneau. |
| .topbar | En-tête du moteur de recherche : logo, panier et fermeture. |
| .logo | Lien du logo de la boutique dans l'en-tête. |
Recherche
| Sélecteur | Ce que c'est |
| .search-box | Boîte de l'input de recherche. Porte la classe .searching tant qu'une recherche est en cours. |
| .search-box input | L'input de recherche. |
Filtres
| Sélecteur | Ce que c'est |
| .filter-bar | Barre sous l'en-tête : chips des filtres actifs, compteur et tri. |
| .active-chip | Chip d'un filtre actif. |
| .sort-select | Sélecteur de tri. |
| .facets | Sidebar des filtres (marque, catégorie, caractéristiques…). |
| .facet-section | Bloc d'une facette dans la sidebar. |
| .facet-label | Une option de filtre (checkbox + texte). |
Résultats
| Sélecteur | Ce que c'est |
| .results | Conteneur principal des résultats. |
| .grid | Grille des résultats (utilise les colonnes configurées dans le panneau). En vue liste, porte aussi .grid--list. |
| .result-banner | Bannière promotionnelle au-dessus des résultats. |
Card produit
| Sélecteur | Ce que c'est |
| .card | Card produit. |
| .card .img | Boîte d'image de la card. |
| .card .name | Nom du produit. |
| .card .price-row | Ligne des prix (actuel + barré s'il y a une promo). |
| .card .badge | Étiquette de la card (promo, épuisé, nouveauté…). |
| .card .add-to-cart | Bouton « Ajouter au panier » de la card. |
Écran initial
| Sélecteur | Ce que c'est |
| .empty-state | Écran initial (avant la saisie) : récents, populaires, mis en avant. |
| .section-title | Titre de chaque section de l'écran initial. |
| .popular-card | Card du carrousel des populaires / mis en avant. |
| .recent-item | Item des recherches récentes. |
| .pre-search-banner | Bannière de l'écran initial. |
| .discovery-rail | Rail de découverte (accès aux classements) de l'écran initial. |
Overlays
| Sélecteur | Ce que c'est |
| .qv-panel | Panneau du modal d'aperçu rapide. |
| .quiz-panel | Panneau du quiz / de la recherche guidée. |
Recettes
Masquer « Ajouter au panier » dans une catégorie
/* Les produits pointent vers leur fiche : filtre par l'URL de la catégorie */
.card[href*="/tarjetas-regalo/"] .add-to-cart { display: none; } Grille plus dense sur les grands écrans
@media (min-width: 1280px) {
.grid { grid-template-columns: repeat(6, 1fr) !important; }
} En-tête sticky au scroll
.kos-search .topbar { position: sticky; top: 0; z-index: 5; } Limites : le CSS custom accepte jusqu'à 100 000 caractères si tu le colles dans le panneau ; s'il arrive par l'Automatisation IA, la limite est de 20 000, pour qu'un humain puisse le relire.
Les règles dont le sélecteur cible les classes ou l'attribut du badge (.f_brand_*, [data-findalo-brand]) sont SUPPRIMÉES à l'enregistrement —la règle entière, remplacée par un commentaire— et le panneau t'indique combien vont tomber avant que tu enregistres. C'est un filtre par motif, pas une détection d'intention : une règle qui masque le badge autrement passe le filtre, et c'est alors l'integrity check du widget qui la coupe à l'exécution.
