> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS personalizado

> Adicione CSS personalizado para refinar seu Aftersell Cart além das configurações de design nativas.

Quando as [configurações de design](/pt/aftersell/cart/design-settings) nativas não vão longe o suficiente, adicione seu próprio **CSS personalizado** para estilizar o carrinho.

<div id="where-to-add-it">
  ## Onde adicionar
</div>

No Cart Editor, abra **Cart settings → Custom CSS**. Seu CSS **se aplica ao carrinho inteiro** e é carregado **depois** dos estilos base do carrinho, então suas regras têm precedência.

<div id="target-public-classes-only">
  ## Mire apenas as classes públicas
</div>

Estilize o carrinho usando suas **classes públicas `cart-external-*`**. O editor faz autocompletar delas e desaconselha as demais:

* **`cart-external-*`**: o alvo público e suportado. Use estas. Elas não carregam estilização própria, então existem puramente para o seu CSS se ancorar.
* **`cart-internal-*`**: a estrutura interna do carrinho, onde vive toda a estilização nativa dele. O editor marca seletores contra elas como erros. Elas não são alteradas por acaso, já que todo carrinho existente depende delas, mas pertencem ao carrinho e não são um contrato com você. Reestilize pela classe gêmea `cart-external-*` em vez disso.
* Outras classes `cart-*` que o editor não reconhece são marcadas como avisos.

<Note>
  Você verá classes `cart-internal-*` na marcação, inclusive no [template personalizado](/pt/aftersell/cart/custom-templates) padrão de cada bloco. Isso é esperado: elas são o que dá a um bloco sua aparência nativa. A regra aqui é sobre os **seletores que você escreve** neste painel, não sobre os nomes de classe que o carrinho renderiza.

  Se você estiver escrevendo um template personalizado que altera a estrutura DOM de um bloco, veja [Estilizando um template personalizado](/pt/aftersell/cart/custom-templates#styling-a-custom-template) para saber quais nomes de classe manter e quais descartar.
</Note>

<div id="shadow-dom-the-cart-is-self-contained">
  ## Shadow DOM: o carrinho é autocontido
</div>

Na loja, o carrinho inteiro é renderizado dentro do seu próprio **shadow DOM**. Isso significa que:

* O CSS do seu tema não pode vazar para dentro do carrinho, e o CSS do carrinho não pode vazar para fora, então seu CSS personalizado fica automaticamente restrito ao carrinho e não vai conflitar com o resto do seu site.
* Seus seletores devem referenciar elementos e classes **dentro do carrinho**. Seletores voltados a elementos da página fora do carrinho não alcançam o interior.

O mesmo limite se aplica ao JavaScript: `document.querySelector` também não consegue enxergar dentro do drawer. Um script que precisa de um elemento do carrinho tem que passar por [`shadowRoot`](/pt/aftersell/cart/sdk-overview#shadowroot), e ele mira essas mesmas classes `cart-external-*`.

<div id="when-to-use-design-settings-instead">
  ## Quando usar as configurações de design em vez disso
</div>

Para cores, raios, espaçamento e largura, as [configurações de design](/pt/aftersell/cart/design-settings) nativas são mais simples e seguras, então recorra ao CSS personalizado apenas para o que elas não cobrem.

<div id="where-to-go-next">
  ## Por onde continuar
</div>

* **[Configurações de design](/pt/aftersell/cart/design-settings)**: os controles de estilização nativos, e a primeira coisa a tentar.
* **[Templates personalizados](/pt/aftersell/cart/custom-templates)**: substitua a marcação de um bloco por completo quando o CSS sozinho não chega lá.
* **[Cart SDK](/pt/aftersell/cart/sdk-overview)**: para comportamento em vez de aparência.