CSS avançat i classes estables

Quan els tokens no hi arriben — amagar un element, moure'n un altre, un detall molt teu — pots escriure CSS directament sobre les classes del widget. Només les d'aquesta llista tenen suport garantit: la resta del markup és intern i pot canviar sense avís.

On va aquest CSS

Al Custom CSS del panell (Aparença → Avançat). El widget viu en un shadow DOM, així que el CSS de la teva botiga no arriba a aquestes classes — l'editor del panell hi injecta el teu a dins. Els tokens --fdl-* són l'excepció: aquests sí que pots declarar-los des de fora.

Classes amb suport estable

Receptes

Amagar «Afegeix a la cistella» en una categoria

/* Els productes enllacen a la seva fitxa: filtra per l'URL de la categoria */
.card[href*="/tarjetas-regalo/"] .add-to-cart { display: none; }

Graella més densa en pantalles grans

@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(6, 1fr) !important; }
}

Capçalera enganxosa en fer scroll

.kos-search .topbar { position: sticky; top: 0; z-index: 5; }

Límits: el CSS custom admet fins a 100.000 caràcters si el pegues al panell; si entra per l'Automatització IA el límit és 20.000, perquè un humà el pugui revisar. Les regles el selector de les quals apunti a les classes o a l'atribut del badge (.f_brand_*, [data-findalo-brand]) s'ESBORREN al guardar —la regla sencera, substituïda per un comentari— i el panell et diu quantes cauran abans de guardar. És un filtre per patró, no una detecció d'intencions: una regla que amagui el badge per una altra via passa el filtre, i llavors la talla l'integrity check del widget en temps d'execució.