Questa guida documenta come scrivere il CSS personalizzato che inserisci nel campo CSS Editor dell'AccelaSearch Builder. Quel CSS viene iniettato nel layer a runtime.

Ambito di questa guida Qui è documentato tutto il layer tranne le card prodotto: header, barra di ricerca, vetrina (showcase), filtri, griglia, stati di caricamento, ecc. Le card hanno un flusso CSS separato (il Card Builder) e non sono trattate qui.

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 viene iniettato per ultimo. Viene aggiunto come ultimo blocco <style> dentro lo 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)

Tutto ciò che sta dentro .product-grid__list sono le card prodotto: quelle si personalizzano dal Card Builder, non da qui.