CSS avanzado y clases estables
Cuando los tokens no llegan — ocultar un elemento, mover otro, un detalle muy tuyo —
puedes escribir CSS directamente sobre las clases del widget. Solo las de esta lista
tienen soporte garantizado: el resto del markup es interno y puede cambiar sin aviso.
Dónde va este CSS
En el Custom CSS del panel (Apariencia → Avanzado).
El widget vive en un shadow DOM, así que el CSS de tu tienda no llega a estas clases —
el editor del panel inyecta el tuyo dentro. Los tokens --fdl-*
son la excepción: esos sí puedes declararlos desde fuera.
Clases con soporte estable
Estructura
| Selector | Qué es |
| .findalo-search-host | Host del widget en tu página (fuera del shadow). El sitio donde declarar los tokens --fdl-* desde tu propia hoja de estilos. |
| .kos-search | Raíz del widget dentro del shadow. Ámbito de los tokens en el Custom CSS del panel. |
| .topbar | Cabecera del buscador: logo, cesta y cerrar. |
| .logo | Enlace del logo del comercio en la cabecera. |
Buscador
| Selector | Qué es |
| .search-box | Caja del input de búsqueda. Lleva la clase .searching mientras hay una búsqueda en vuelo. |
| .search-box input | El input de búsqueda. |
Filtros
| Selector | Qué es |
| .filter-bar | Barra bajo la cabecera: chips de filtros activos, contador y orden. |
| .active-chip | Chip de un filtro activo. |
| .sort-select | Selector de ordenación. |
| .facets | Sidebar de filtros (marca, categoría, características…). |
| .facet-section | Bloque de una faceta dentro del sidebar. |
| .facet-label | Una opción de filtro (checkbox + texto). |
Resultados
| Selector | Qué es |
| .results | Contenedor principal de resultados. |
| .grid | Rejilla de resultados (usa las columnas configuradas en el panel). Con vista lista lleva además .grid--list. |
| .result-banner | Banner promocional sobre los resultados. |
Card de producto
| Selector | Qué es |
| .card | Card de producto. |
| .card .img | Caja de imagen de la card. |
| .card .name | Nombre del producto. |
| .card .price-row | Fila de precios (actual + tachado si hay oferta). |
| .card .badge | Etiqueta de la card (oferta, agotado, novedad…). |
| .card .add-to-cart | Botón «Añadir al carrito» de la card. |
Pantalla inicial
| Selector | Qué es |
| .empty-state | Pantalla inicial (antes de escribir): recientes, populares, destacados. |
| .section-title | Título de cada sección de la pantalla inicial. |
| .popular-card | Card del carrusel de populares/destacados. |
| .recent-item | Item de búsquedas recientes. |
| .pre-search-banner | Banner de la pantalla inicial. |
| .discovery-rail | Rail de descubrimiento (accesos a rankings) de la pantalla inicial. |
Overlays
| Selector | Qué es |
| .qv-panel | Panel del modal de vista rápida. |
| .quiz-panel | Panel del quiz / buscador guiado. |
Recetas
Ocultar «Añadir al carrito» en una categoría
/* Los productos enlazan a su ficha: filtra por la URL de la categoría */
.card[href*="/tarjetas-regalo/"] .add-to-cart { display: none; } Rejilla más densa en pantallas grandes
@media (min-width: 1280px) {
.grid { grid-template-columns: repeat(6, 1fr) !important; }
} Cabecera pegajosa al hacer scroll
.kos-search .topbar { position: sticky; top: 0; z-index: 5; } Límites: el CSS custom admite hasta 100.000 caracteres si lo pegas en el panel; si entra por la Automatización IA el tope es de 20.000, para que un humano pueda revisarlo.
Las reglas cuyo selector apunte a las clases o al atributo del badge (.f_brand_*, [data-findalo-brand]) se BORRAN al guardar —la regla entera, sustituida por un comentario— y el panel te dice cuántas caerán antes de que guardes. Es un filtro por patrón, no una detección de intenciones: una regla que oculte el badge por otra vía pasa el filtro, y entonces la corta el integrity check del widget en tiempo de ejecución.
