Questa guida documenta come scrivere il CSS personalizzato del layer. Ci sono due voci distinte nella configurazione, entrambe iniettate nel layer a runtime:

Ambito delle card La §12 documenta la card di default, cioè quella mostrata quando il Card Builder è spento (o acceso ma senza blocchi configurati). Le card generate dal Card Builder hanno un flusso di stile separato e non sono trattate qui.

Non stai cercando i componenti <as-*>, vero? Questa guida riguarda il layer (<accelasearch-layer>), personalizzato dal campo Custom CSS del Builder. Se invece stai integrando i componenti <as-*> nel markup di un tema (Shopify o altro), quelli si personalizzano solo tramite i design token e la guida è STYLING.md — le classi documentate qui non li raggiungono.

1. Come funziona l’iniezione del CSS

Il layer è un Web Component (<accelasearch-layer>) che usa lo Shadow DOM. Questo significa due cose fondamentali:

1. Il tuo CSS è isolato dal sito ospite. Le regole CSS della pagina su cui è installato il layer non influenzano il layer, e il tuo customCss non esce dal layer per influenzare la pagina. Stai scrivendo CSS che vive solo dentro il layer.
2. Il tuo customCss (e il cardCustomCss) viene iniettato per ultimo. Ciascuno viene aggiunto come blocco <style> in fondo allo Shadow DOM, dopo gli stili di base del componente. Per le regole dell’ordine di cascata CSS, questo significa che a parità di specificità il tuo CSS vince sugli stili predefiniti. Nella maggior parte dei casi ti basta scrivere il selettore di classe (es. .as-layer { ... }) senza dover ricorrere a !important.

Regole pratiche

• Scrivi selettori basati sulle classi documentate qui sotto. Sono stabili e pensate per essere il punto di aggancio del tuo stile.
• Non serve un prefisso o un wrapper: scrivi direttamente i selettori (.as-header, .icebreaker-chip, ecc.). Sei già dentro lo Shadow DOM.
• Usa !important solo se necessario, ad esempio per sovrascrivere stili applicati inline via JavaScript (vedi la nota su as-main/product-grid).
• Preferisci le CSS custom properties (vedi §3) quando vuoi solo cambiare un colore: sono il modo più pulito e a prova di futuro.

Esempio minimo

/* Sfondo del layer leggermente grigio e padding ridotto */
.as-layer {
  background: #fafafa;
  padding: 1.5rem;
}

/* Bottoni filtro più arrotondati */
.action-btn {
  border-radius: 999px;
}

2. Struttura generale del layer (albero DOM)

Questa è la gerarchia degli elementi e delle classi principali. Conoscere l’annidamento ti permette di scrivere selettori discendenti precisi (es. .as-main .product-grid).

<accelasearch-layer>                       (host, Shadow DOM)
└── #accelasearch-root                      (mount point React)
    └── .as-backdrop [.full-screen|.half-screen|.windowed]
        └── .as-layer                       (dialogo principale)
            ├── .as-loading-overlay         (solo durante il caricamento config)
            │   └── .as-spinner
            ├── .as-header
            │   ├── .search-bar  (SearchBar)
            │   └── .close-btn
            ├── .showcase                    (vetrina iniziale)
            ├── .action-bar                  (barra azioni: filtri + ordinamento)
            └── .as-container
                ├── .filter-panel [.filter-panel--open]
                │   └── .filter-panel__inner
                │       ├── .filter-panel__mobile-header   (solo mobile)
                │       └── .filter-panel__accordions
                │           └── .filter-accordion …        (un filtro per ciascuno)
                └── .as-main
                    ├── .icebreakers                       (chip categorie)
                    └── .product-grid                      (griglia risultati)
                        ├── .product-grid__list            (← contiene le CARD)
                        ├── .product-grid__state           (vuoto / errore / loading)
                        └── .product-grid__loader          (loader paginazione)