Advanced CSS and stable classes
When tokens aren't enough — hiding one element, moving another, a detail that's very much yours —
you can write CSS directly against the widget's classes. Only the ones on this list
have guaranteed support: the rest of the markup is internal and can change without notice.
Where this CSS goes
In the panel's Custom CSS (Appearance → Advanced).
The widget lives in a shadow DOM, so your store's CSS never reaches these classes —
the panel's editor injects yours inside. The --fdl-* tokens
are the exception: those you can declare from outside.
Classes with stable support
Structure
| Selector | What it is |
| .findalo-search-host | Widget host on your page (outside the shadow). The place to declare the --fdl-* tokens from your own stylesheet. |
| .kos-search | Widget root inside the shadow. Scope for the tokens in the panel's Custom CSS. |
| .topbar | Search header: logo, cart and close. |
| .logo | The store's logo link in the header. |
Search box
| Selector | What it is |
| .search-box | Search input box. Carries the .searching class while a search is in flight. |
| .search-box input | The search input. |
Filters
| Selector | What it is |
| .filter-bar | Bar below the header: active filter chips, counter and sorting. |
| .active-chip | Chip for an active filter. |
| .sort-select | Sort selector. |
| .facets | Filter sidebar (brand, category, features…). |
| .facet-section | Block for one facet inside the sidebar. |
| .facet-label | One filter option (checkbox + text). |
Results
| Selector | What it is |
| .results | Main results container. |
| .grid | Results grid (uses the columns configured in the panel). In list view it also carries .grid--list. |
| .result-banner | Promotional banner above the results. |
Product card
| Selector | What it is |
| .card | Product card. |
| .card .img | The card's image box. |
| .card .name | Product name. |
| .card .price-row | Price row (current + strikethrough when on sale). |
| .card .badge | Card badge (sale, out of stock, new…). |
| .card .add-to-cart | The card's “Add to cart” button. |
Start screen
| Selector | What it is |
| .empty-state | Start screen (before typing): recent, popular, featured. |
| .section-title | Title of each start-screen section. |
| .popular-card | Card in the popular/featured carousel. |
| .recent-item | Recent-searches item. |
| .pre-search-banner | Start-screen banner. |
| .discovery-rail | Discovery rail (links to rankings) on the start screen. |
Overlays
| Selector | What it is |
| .qv-panel | Quick view modal panel. |
| .quiz-panel | Quiz / guided search panel. |
Recipes
Hide “Add to cart” in one category
/* Products link to their page: filter by the category URL */
.card[href*="/tarjetas-regalo/"] .add-to-cart { display: none; } Denser grid on large screens
@media (min-width: 1280px) {
.grid { grid-template-columns: repeat(6, 1fr) !important; }
} Sticky header on scroll
.kos-search .topbar { position: sticky; top: 0; z-index: 5; } Limits: custom CSS accepts up to 100,000 characters if you paste it in the panel; if it comes through the AI Automation the cap is 20,000, so a human can review it.
Rules whose selector targets the badge classes or attribute (.f_brand_*, [data-findalo-brand]) are DELETED on save —the whole rule, replaced by a comment— and the panel tells you how many will go before you save. It is a pattern filter, not intent detection: a rule that hides the badge some other way passes the filter, and then the widget's integrity check cuts it at runtime.
