Theming with --fdl-* tokens

Tokens are the supported way to change the search's look with CSS. They're versioned custom properties: declare them once and the widget applies them across all its components, on top of the panel configuration and the active visual preset.

Basic usage

From any of your store's stylesheets (no need to touch the panel):

.findalo-search-host {
  --fdl-primary: #0d7a5e;
  --fdl-radius-md: 14px;
  --fdl-card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  --fdl-font-display: "Poppins", sans-serif;
}

Or from the panel's Custom CSS (Appearance → Advanced), on the widget root:

.kos-search {
  --fdl-primary: #0d7a5e;
  --fdl-btn-radius: 8px;
}

Token reference

Color

Token	Default	Controls
--fdl-primary	#18181b	Primary color: buttons, focus, active elements. Equivalent to the panel's “Primary color”.
--fdl-primary-soft	#f4f4f5	Soft version of the primary color (active chip backgrounds, pronounced hovers).
--fdl-accent	#dc2626	Accent color: sale prices, discount badges. Equivalent to the panel's “Accent color”.
--fdl-text	#18181b	Main text color.
--fdl-text-muted	#71717a	Secondary text: categories, counters, subtitles.
--fdl-bg	#fafafa	Overall background of the search.
--fdl-surface	#ffffff	Background of elevated surfaces: cards, panels, dropdowns.
--fdl-border	#e4e4e7	Color of borders and dividers.
--fdl-hover	#f4f4f5	Background of elements on hover.

Cart

Token	Default	Controls
--fdl-cart-btn-bg	color principal	Background of the “Add to cart” button.
--fdl-cart-btn-text	#ffffff	Text and icon of the “Add to cart” button.
--fdl-cart-btn-hover-bg	auto (aclarado)	Button background on hover.
--fdl-cart-btn-hover-text	hereda	Button text on hover.
--fdl-cart-badge-bg	verde	Background of the cart unit counter (header).

Image

Token	Default	Controls
--fdl-img-bg	gris suave	Background of the product image box in cards.

Shape

Token	Default	Controls
--fdl-radius-sm	0px	Small border radius (inputs, inner chips).
--fdl-radius-md	0px	Medium border radius (cards, panels).
--fdl-radius-lg	0px	Large border radius (modal, sheets).
--fdl-btn-radius	999px	Radius of the “Add to cart” button (999px = pill).
--fdl-chip-radius	999px	Radius of chips and suggestions.
--fdl-card-pad	0px	Inner padding of the product card.
--fdl-card-shadow	none	Shadow of the product cards.
--fdl-modal-shadow	0 20px 60px rgba(0,0,0,.18)	Shadow of the search modal.

Typography

Token	Default	Controls
--fdl-font-display	hereda	Typeface for titles and product names.
--fdl-font-body	hereda	Typeface for all other text.

Animation

Token	Default	Controls
--fdl-anim-duration	180ms	Duration of the widget's transitions.
--fdl-anim-easing	ease	Easing curve of the widget's transitions.

Precedence

From highest to lowest priority: your tokens → panel settings (colors, columns…) → visual preset → widget defaults. A token you declare always wins over what the panel configures for that same property.

Responsive values

Always declare the token (outside media queries) and change its value inside them. The token's presence is detected on load; its value is tracked live.

.findalo-search-host { --fdl-card-pad: 12px; }

@media (max-width: 640px) {
  .findalo-search-host { --fdl-card-pad: 8px; }
}