CSS avançado e classes estáveis
Quando os tokens não chegam — ocultar um elemento, mover outro, um detalhe muito seu —
pode escrever CSS diretamente sobre as classes do widget. Só as desta lista
têm suporte garantido: o resto do markup é interno e pode mudar sem aviso.
Onde vai este CSS
No Custom CSS do painel (Aparência → Avançado).
O widget vive num shadow DOM, por isso o CSS da sua loja não chega a estas classes —
o editor do painel injeta o seu lá dentro. Os tokens --fdl-*
são a exceção: esses pode declará-los a partir de fora.
Classes com suporte estável
Estrutura
| Seletor | O que é |
| .findalo-search-host | Host do widget na sua página (fora do shadow). O sítio onde declarar os tokens --fdl-* a partir da sua própria folha de estilos. |
| .kos-search | Raiz do widget dentro do shadow. Âmbito dos tokens no Custom CSS do painel. |
| .topbar | Cabeçalho da pesquisa: logótipo, carrinho e fechar. |
| .logo | Ligação do logótipo da loja no cabeçalho. |
Pesquisa
| Seletor | O que é |
| .search-box | Caixa do input de pesquisa. Leva a classe .searching enquanto há uma pesquisa em curso. |
| .search-box input | O input de pesquisa. |
Filtros
| Seletor | O que é |
| .filter-bar | Barra sob o cabeçalho: chips de filtros ativos, contador e ordenação. |
| .active-chip | Chip de um filtro ativo. |
| .sort-select | Seletor de ordenação. |
| .facets | Sidebar de filtros (marca, categoria, características…). |
| .facet-section | Bloco de uma faceta dentro da sidebar. |
| .facet-label | Uma opção de filtro (checkbox + texto). |
Resultados
| Seletor | O que é |
| .results | Contentor principal de resultados. |
| .grid | Grelha de resultados (usa as colunas configuradas no painel). Em vista de lista leva também .grid--list. |
| .result-banner | Banner promocional por cima dos resultados. |
Card de produto
| Seletor | O que é |
| .card | Card de produto. |
| .card .img | Caixa de imagem do card. |
| .card .name | Nome do produto. |
| .card .price-row | Linha de preços (atual + riscado se houver promoção). |
| .card .badge | Etiqueta do card (promoção, esgotado, novidade…). |
| .card .add-to-cart | Botão «Adicionar ao carrinho» do card. |
Ecrã inicial
| Seletor | O que é |
| .empty-state | Ecrã inicial (antes de escrever): recentes, populares, destacados. |
| .section-title | Título de cada secção do ecrã inicial. |
| .popular-card | Card do carrossel de populares/destacados. |
| .recent-item | Item de pesquisas recentes. |
| .pre-search-banner | Banner do ecrã inicial. |
| .discovery-rail | Rail de descoberta (acessos a rankings) do ecrã inicial. |
Overlays
| Seletor | O que é |
| .qv-panel | Painel do modal de vista rápida. |
| .quiz-panel | Painel do quiz / pesquisa guiada. |
Receitas
Ocultar «Adicionar ao carrinho» numa categoria
/* Os produtos ligam à sua página: filtre pelo URL da categoria */
.card[href*="/tarjetas-regalo/"] .add-to-cart { display: none; } Grelha mais densa em ecrãs grandes
@media (min-width: 1280px) {
.grid { grid-template-columns: repeat(6, 1fr) !important; }
} Cabeçalho fixo ao fazer scroll
.kos-search .topbar { position: sticky; top: 0; z-index: 5; } Limites: o CSS personalizado admite até 100.000 caracteres se o colar no painel; se entrar pela Automatização IA o limite é 20.000, para que um humano o possa revisar.
As regras cujo seletor aponte para as classes ou o atributo do badge (.f_brand_*, [data-findalo-brand]) são APAGADAS ao guardar —a regra inteira, substituída por um comentário— e o painel diz-te quantas vão cair antes de guardares. É um filtro por padrão, não uma deteção de intenções: uma regra que esconda o badge por outra via passa o filtro, e então o integrity check do widget corta-a em tempo de execução.
