/* =========================================================================
   O CARRINHO
   -------------------------------------------------------------------------
   Primeira etapa da reconstrução da experiência de compra: o carrinho
   lateral, que é o que a pessoa vê no segundo seguinte ao "Adicionar".

   POR QUE COMEÇAR AQUI, E NÃO PELO CHECKOUT

   O checkout deste site é o clássico por shortcode, com o plugin
   brasileiro de campos por cima. Mexer nele é mexer no caminho do
   dinheiro de um site que está vendendo. O carrinho lateral é o passo
   anterior, tem risco menor, e é onde a quebra estava visível.

   O QUE ESTAVA ERRADO, MEDIDO NA TELA

     · `.quantity` saía como PÍLULA COM BORDA e o número cortado. O tema
       veste `.quantity` como o seletor de quantidade, que em outras
       páginas é um campo com mais e menos. No mini-carrinho ela é só o
       texto "1 × R$286,00", então virava uma cápsula vazia com texto
       espremido dentro. Medido: `border: 1px solid rgb(207,206,201)`,
       `border-radius: 999px`, `display: flex`.

     · "Finalização de compra" no botão principal. É a tradução literal
       do WooCommerce e não é como se fala. Corrigido no plugin de
       português.

     · Tipografia do tema, sem relação com as páginas novas.

     · Nenhuma informação de frete ou prazo, que é a primeira dúvida de
       quem acabou de colocar algo no carrinho.

   ESCOPO

   Tudo está preso a `.cart-widget-side` ou `.woocommerce-cart`. Nenhuma
   regra alcança o resto da loja. Para desligar: apague o plugin.
   ========================================================================= */

/* `body.woocommerce-cart`, SEM espaço: `woocommerce-cart` é classe do
   PRÓPRIO body, não de um filho. Escrevi com espaço na primeira versão e
   nenhuma regra da página de carrinho pegou: os botões continuaram
   mostarda e o frete continuou alinhado à direita. Tudo carregado, nada
   aplicado, e o navegador não reclama de seletor que simplesmente não
   casa com ninguém. */
.cart-widget-side,
body.woocommerce-cart {
  --dx-preto:   #0B0B0A;
  --dx-carvao:  #2E2E2B;
  --dx-inox:    #6E6F6C;
  --dx-inox-c:  #9A9B98;
  --dx-fio:     #E4E3DF;
  --dx-fio-f:   #CFCEC9;
  --dx-papel:   #FFFFFF;
  --dx-morno:   #F7F6F3;
  --dx-ambar:   #FE5C21;
  --dx-ambar-f: #FFF1EB;

  --dx-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --dx-ui:      'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;

  --dx-r:       14px;
  --dx-r-p:     8px;
  --dx-saida:   cubic-bezier(0.16, 1, 0.30, 1);
}

/* =========================================================================
   O CARRINHO LATERAL
   ========================================================================= */

/* Mais largo. Em 340px o nome do produto quebrava em duas linhas e a
   quantidade disputava espaço com o preço. 400px cabe o nome inteiro na
   maioria dos produtos deste catálogo, e ainda é menos de um terço de uma
   tela de notebook. */
@media (min-width: 768px) {
  html body .cart-widget-side { width: 400px; }
}

html body .cart-widget-side {
  background: var(--dx-papel);
  font-family: var(--dx-ui);
}

/* ---------- O cabeçalho ---------- */
html body .cart-widget-side .wd-heading {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--dx-fio);
}

html body .cart-widget-side .wd-heading .title {
  font-family: var(--dx-display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--dx-preto);
  text-transform: none;
}

html body .cart-widget-side .close-side-widget .wd-action-text {
  font-family: var(--dx-ui);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--dx-inox);
  text-transform: none;
  letter-spacing: normal;
}
html body .cart-widget-side .close-side-widget:hover .wd-action-text { color: var(--dx-preto); }

/* ---------- A lista ---------- */
html body .cart-widget-side .widget_shopping_cart_content { padding: 0; }

html body .cart-widget-side ul.woocommerce-mini-cart {
  margin: 0;
  padding: 6px 24px;
  list-style: none;
}

html body .cart-widget-side li.mini_cart_item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--dx-fio);
}
html body .cart-widget-side li.mini_cart_item:last-child { border-bottom: 0; }

/* A foto num ladrilho de papel morno: os PNG recortados do catálogo
   flutuam, e as fotos de cena ganham moldura em vez de encostar no
   branco da coluna. */
html body .cart-widget-side li.mini_cart_item .cart-item-image {
  display: block;
  width: 72px;
  height: 72px;
  border: 1px solid var(--dx-fio);
  border-radius: var(--dx-r-p);
  background: var(--dx-morno);
  overflow: hidden;
}
html body .cart-widget-side li.mini_cart_item .cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;   /* some o branco do JPEG sobre o papel morno */
}

html body .cart-widget-side li.mini_cart_item > a:not(.remove):not(.cart-item-link):not(.cart-item-image) {
  grid-column: 2;
  font-family: var(--dx-display);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--dx-preto);
  text-decoration: none;
}

/* ---------- A quantidade ----------
   O defeito principal. Aqui ela volta a ser o que é: uma frase curta.
   Sem borda, sem pílula, sem fundo. O preço em âmbar porque é o número
   que a pessoa confere. */
html body .cart-widget-side li.mini_cart_item .quantity {
  display: block;
  width: auto;
  min-height: 0;
  margin-top: 5px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--dx-ui);
  font-size: 0.84rem;
  font-weight: 500;
  color: var(--dx-inox);
  font-variant-numeric: tabular-nums;
}
html body .cart-widget-side li.mini_cart_item .quantity .amount {
  color: var(--dx-preto);
  font-weight: 700;
}

/* ---------- Remover ----------
   Alvo de 28px, canto superior direito, discreto até o hover. Remover é
   ação destrutiva: tem que estar à mão sem convidar. */
html body .cart-widget-side li.mini_cart_item a.remove {
  position: absolute;
  top: 16px;
  right: 0;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: none;
  color: var(--dx-inox-c);
  font-size: 1.05rem;
  line-height: 1;
  text-decoration: none;
  transition: background 180ms var(--dx-saida), color 180ms var(--dx-saida);
}
html body .cart-widget-side li.mini_cart_item a.remove:hover {
  background: var(--dx-ambar-f);
  color: var(--dx-ambar);
}

/* ---------- O rodapé do carrinho ---------- */
html body .cart-widget-side .widget_shopping_cart_content > .total,
html body .cart-widget-side p.woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 20px 24px 14px;
  border-top: 1px solid var(--dx-fio);
}

html body .cart-widget-side p.woocommerce-mini-cart__total strong {
  font-family: var(--dx-ui);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--dx-inox);
}

html body .cart-widget-side p.woocommerce-mini-cart__total .amount {
  font-family: var(--dx-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--dx-preto);
  font-variant-numeric: tabular-nums;
}

/* ---------- Os dois botões ----------
   Empilhados, largura inteira. Lado a lado num painel de 400px os dois
   ficam estreitos e o principal perde peso. O secundário vem primeiro
   porque é o passo mais cauteloso, e o olho desce até o âmbar. */
html body .cart-widget-side p.woocommerce-mini-cart__buttons {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0 24px calc(24px + env(safe-area-inset-bottom));
}

html body .cart-widget-side p.woocommerce-mini-cart__buttons a {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 52px;
  padding: 0 18px;
  border-radius: var(--dx-r);
  font-family: var(--dx-ui);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  transition: background 200ms var(--dx-saida), border-color 200ms var(--dx-saida),
              transform 200ms var(--dx-saida);
}

html body .cart-widget-side p.woocommerce-mini-cart__buttons a.btn-cart {
  border: 1px solid var(--dx-fio-f);
  background: var(--dx-papel);
  color: var(--dx-preto);
}
html body .cart-widget-side p.woocommerce-mini-cart__buttons a.btn-cart:hover {
  border-color: var(--dx-preto);
}

html body .cart-widget-side p.woocommerce-mini-cart__buttons a.checkout {
  border: 0;
  background: var(--dx-ambar);
  color: #fff;
}
html body .cart-widget-side p.woocommerce-mini-cart__buttons a.checkout:hover {
  background: #e8501a;
  transform: translateY(-1px);
}
html body .cart-widget-side p.woocommerce-mini-cart__buttons a.checkout:active { transform: none; }

/* ---------- O carrinho vazio ----------
   O desenho antigo era um carrinho riscado cinza de 120px e um link
   quase invisível. Vazio não é erro: é um estado comum, e o que a pessoa
   precisa dali é um caminho de volta. */
html body .cart-widget-side .wd-empty-mini-cart,
html body .cart-widget-side .woocommerce-mini-cart__empty-message {
  padding: 56px 24px;
  text-align: center;
  font-family: var(--dx-ui);
  font-size: 0.95rem;
  color: var(--dx-inox);
}
html body .cart-widget-side .wd-empty-mini-cart .wd-empty-mini-cart-icon,
html body .cart-widget-side .wd-empty-mini-cart::before { opacity: 0.25; }

html body .cart-widget-side .wd-empty-mini-cart .btn,
html body .cart-widget-side .return-to-shop .button {
  display: inline-grid;
  place-items: center;
  min-height: 48px;
  margin-top: 18px;
  padding: 0 24px;
  border-radius: var(--dx-r);
  background: var(--dx-ambar);
  color: #fff;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  html body .cart-widget-side p.woocommerce-mini-cart__buttons a { transition: none; }
  html body .cart-widget-side p.woocommerce-mini-cart__buttons a:hover { transform: none; }
}

/* ---------- O × duplicado ----------
   DEFEITO VISTO NA TELA: cada item mostrava DOIS xis, um embaixo do
   outro.

   Medido: existe um só `a.remove`, cujo texto é o caractere "×", e o
   tema ainda desenha um segundo xis num `::after` com `content: ""`.
   Como o conteúdo é string vazia e não `none`, o pseudo-elemento EXISTE
   e o tema o veste com a forma de cruz.

   Fica o caractere, que é o que este arquivo estiliza e posiciona. O
   rótulo para leitor de tela não depende de nenhum dos dois: está no
   `aria-label` do próprio link. */
html body .cart-widget-side li.mini_cart_item a.remove::after,
html body .cart-widget-side li.mini_cart_item a.remove::before { display: none; }

/* =========================================================================
   A PÁGINA DE CARRINHO
   -------------------------------------------------------------------------
   Mesmo desenho do lateral, em largura inteira.

   O QUE ESTAVA ERRADO, VISTO NA TELA

     · Os botões saíam MOSTARDA, não no âmbar da marca. "Aplicar cupom" e
       "Continuar para finalização" com a cor antiga do tema, ao lado de
       páginas novas que usam #FE5C21. Duas laranjas diferentes na mesma
       jornada leem como dois sites.

     · As opções de frete vinham alinhadas à direita, com o rádio na
       ponta, longe do texto. Alvo pequeno e leitura invertida: o olho lê
       o nome, viaja até a borda e volta para marcar.

     · Tipografia em caixa alta do tema, sem relação com o resto.
   ========================================================================= */

/* ---------- A tabela ---------- */
html body.woocommerce-cart table.shop_table {
  border: 0;
  border-collapse: collapse;
}
html body.woocommerce-cart table.shop_table th {
  padding: 0 0 14px;
  border: 0;
  border-bottom: 1px solid var(--dx-fio);
  font-family: var(--dx-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dx-inox);
}
html body.woocommerce-cart table.shop_table td {
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--dx-fio);
  vertical-align: middle;
}

html body.woocommerce-cart td.product-thumbnail img {
  width: 76px;
  height: 76px;
  border: 1px solid var(--dx-fio);
  border-radius: var(--dx-r-p);
  background: var(--dx-morno);
  object-fit: contain;
  mix-blend-mode: multiply;
}

html body.woocommerce-cart td.product-name a {
  font-family: var(--dx-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--dx-preto);
  text-decoration: none;
}

html body.woocommerce-cart td.product-price,
html body.woocommerce-cart td.product-subtotal {
  font-family: var(--dx-ui);
  font-variant-numeric: tabular-nums;
  color: var(--dx-preto);
}
html body.woocommerce-cart td.product-subtotal { font-weight: 700; }

/* ---------- Os botões ----------
   Uma laranja só no site inteiro. O mostarda do tema era de outra fase. */
html body.woocommerce-cart .button,
html body.woocommerce-cart button.button,
html body.woocommerce-cart input.button,
html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
  min-height: 50px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--dx-r);
  background: var(--dx-ambar);
  color: #fff;
  font-family: var(--dx-ui);
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  transition: background 200ms var(--dx-saida), transform 200ms var(--dx-saida);
}
html body.woocommerce-cart .button:hover,
html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background: #e8501a;
  transform: translateY(-1px);
}

/* Ações secundárias não competem com o botão de seguir. */
html body.woocommerce-cart .actions .button[name="update_cart"],
html body.woocommerce-cart a.wc-save-share-cart-btn,
html body.woocommerce-cart .wc-save-share-cart a {
  background: var(--dx-papel);
  border: 1px solid var(--dx-fio-f);
  color: var(--dx-preto);
}
html body.woocommerce-cart .actions .button[name="update_cart"]:hover {
  background: var(--dx-papel);
  border-color: var(--dx-preto);
  transform: none;
}

html body.woocommerce-cart .coupon input[type="text"] {
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid var(--dx-fio-f);
  border-radius: var(--dx-r);
  font-family: var(--dx-ui);
}

/* ---------- O painel de totais ---------- */
html body.woocommerce-cart .cart_totals {
  padding: 26px;
  border: 1px solid var(--dx-fio);
  border-radius: var(--dx-r);
  background: var(--dx-papel);
}
html body.woocommerce-cart .cart_totals h2 {
  margin: 0 0 18px;
  font-family: var(--dx-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--dx-preto);
}
html body.woocommerce-cart .cart_totals table th,
html body.woocommerce-cart .cart_totals table td {
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--dx-fio);
  font-family: var(--dx-ui);
}
html body.woocommerce-cart .cart_totals .order-total td .amount {
  font-family: var(--dx-display);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--dx-preto);
}

/* ---------- As opções de frete ----------
   Rádio à ESQUERDA e texto alinhado com ele. O tema jogava o rádio na
   borda direita, longe do nome: o olho lia o serviço, atravessava a
   coluna e voltava para marcar. Aqui cada opção é uma linha inteira
   clicável, com alvo de 44px. */
html body.woocommerce-cart #shipping_method {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
html body.woocommerce-cart #shipping_method li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 8px;
  border-radius: var(--dx-r-p);
  text-align: left;
  transition: background 160ms var(--dx-saida);
}
html body.woocommerce-cart #shipping_method li:hover { background: var(--dx-morno); }
html body.woocommerce-cart #shipping_method li input { margin-top: 3px; flex: none; }
html body.woocommerce-cart #shipping_method li label {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--dx-ui);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--dx-carvao);
  cursor: pointer;
}
html body.woocommerce-cart #shipping_method li label .amount {
  font-weight: 700;
  color: var(--dx-preto);
}
html body.woocommerce-cart .woocommerce-shipping-destination { text-align: left; font-size: 0.86rem; color: var(--dx-inox); }

@media (prefers-reduced-motion: reduce) {
  html body.woocommerce-cart .button,
  html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button { transition: none; }
  html body.woocommerce-cart .button:hover,
  html body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { transform: none; }
}

/* ---------- Acertos finos, vistos na tela ---------- */

/* O nome encostava na foto: a tabela do tema não dá respiro entre as
   colunas, e com a miniatura maior os dois ficaram colados. */
html body.woocommerce-cart td.product-name { padding-left: 16px; }
html body.woocommerce-cart td.product-thumbnail { width: 76px; padding-right: 0; }

/* "Compartilhar carrinho" é ação secundária e estava saindo em âmbar,
   competindo com "Aplicar cupom". O plugin usa classe própria, que a
   minha regra anterior não alcançava. */
html body.woocommerce-cart [class*="save-share"] .button,
html body.woocommerce-cart [class*="save_share"] .button,
html body.woocommerce-cart a[class*="share-cart"],
html body.woocommerce-cart .wc-save-share-cart-button {
  background: var(--dx-papel);
  border: 1px solid var(--dx-fio-f);
  color: var(--dx-preto);
}
html body.woocommerce-cart [class*="save-share"] .button:hover,
html body.woocommerce-cart a[class*="share-cart"]:hover {
  background: var(--dx-papel);
  border-color: var(--dx-preto);
  transform: none;
}

/* "Mudar endereço" é um link, não um botão: tipografia de link. */
html body.woocommerce-cart .shipping-calculator-button {
  font-family: var(--dx-ui);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dx-ambar);
  text-decoration: none;
  border-bottom: 1px solid rgba(254, 92, 33, 0.35);
}
html body.woocommerce-cart .shipping-calculator-button:hover { border-bottom-color: var(--dx-ambar); }

/* =========================================================================
   O CAMPO-ISCA DO HONEYPOT
   -------------------------------------------------------------------------
   ACHADO GRAVE DA AUDITORIA, e não é cosmético.

   O plugin de honeypot injeta `div.altEmail_container` com um
   `<label>Alternative:</label>` e um campo. Ele existe para ROBÔS
   preencherem: formulário que vem com esse campo cheio é descartado como
   automação.

   Medido no checkout: o contêiner estava VISÍVEL, com `display: block`.
   Ou seja, um cliente de verdade via um campo "Alternative:" no meio do
   formulário de pagamento e podia preenchê-lo. Se preenchesse, o pedido
   dele seria tratado como robô.

   Isso não é defeito de aparência: é pedido perdido sem ninguém saber
   por quê.

   FORA DA TELA, E NÃO `display: none`. Robô que lê CSS pula o que está
   com `display: none` ou `visibility: hidden`, e a armadilha perde o
   efeito. Tirar da área visível mantendo o campo renderizado é a prática
   que funciona: humano não vê, robô preenche.

   `aria-hidden` não entra aqui porque o elemento é do plugin e eu não
   edito o markup dele. Para leitor de tela, `clip-path` com tamanho 1px
   já é o padrão de conteúdo visualmente oculto.
   ========================================================================= */
.altEmail_container,
.wpa_hidden_field,
div[class*="altEmail"] {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* =========================================================================
   O AVISO DE COOKIES
   -------------------------------------------------------------------------
   DECISÃO DE ARQUITETURA, e ela importa mais que o visual.

   O pedido era um aviso digno de site de alto nível, e a opção estava
   entre construir um plugin novo ou vestir o que já existe. Fica o que
   existe, e o motivo é este: o difícil num aviso de cookies NÃO é o
   desenho. É BLOQUEAR os scripts de analytics e pixel antes do aceite,
   guardar prova do consentimento e permitir revogar depois.

   O cookie-notice já faz esse bloqueio e está rodando em produção há
   tempo. Reescrever isso do zero significaria eu assumir a chance de o
   site passar a disparar pixel sem consentimento, que é exposição legal
   de verdade, não defeito de layout.

   O QUE MUDOU ALÉM DA APARÊNCIA

     · Passou a ter BOTÃO DE RECUSAR. Antes era só "Ok": sem caminho para
       dizer não, o consentimento não é escolha, e é escolha que a LGPD
       pede.
     · O texto diz o que o site faz com os dados, em vez da frase genérica
       de plugin.
     · Link para a política de privacidade.

   As cores saem da marca: preto do header, âmbar na ação.
   ========================================================================= */

#cookie-notice.dx-cookies,
body #cookie-notice {
  background-color: #0B0B0A !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -24px 60px -30px rgba(0, 0, 0, 0.9);
  font-family: 'Inter Tight', -apple-system, sans-serif;
}

body #cookie-notice .cookie-notice-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  max-width: 1180px;
  margin-inline: auto;
  padding: 20px 24px;
  color: #F4F1EC !important;
}

body #cookie-notice #cn-notice-text {
  flex: 1 1 320px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(244, 241, 236, 0.76);
  text-align: left;
}

body #cookie-notice #cn-notice-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

body #cookie-notice .cn-button {
  min-height: 46px;
  padding: 0 22px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.16, 1, 0.30, 1),
              border-color 200ms cubic-bezier(0.16, 1, 0.30, 1);
}

/* Aceitar é a ação principal. */
body #cookie-notice #cn-accept-cookie {
  background-color: #FE5C21 !important;
  color: #fff !important;
}
body #cookie-notice #cn-accept-cookie:hover { background-color: #e8501a !important; }

/* Recusar tem o MESMO peso de leitura, em contorno.
   Recusa escondida ou apagada é recusa que não existe. */
body #cookie-notice #cn-refuse-cookie {
  background: none !important;
  border: 1px solid rgba(244, 241, 236, 0.3) !important;
  color: #F4F1EC !important;
}
body #cookie-notice #cn-refuse-cookie:hover { border-color: #F4F1EC !important; }

body #cookie-notice #cn-more-info {
  background: none !important;
  padding: 0 4px;
  min-height: 0;
  color: rgba(244, 241, 236, 0.6) !important;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body #cookie-notice #cn-more-info:hover { color: #F4F1EC !important; }

/* O × de fechar sem escolher sai: fechar sem responder é consentimento
   presumido, que é exatamente o que a lei não aceita. */
body #cookie-notice #cn-close-notice { display: none !important; }

@media (max-width: 600px) {
  body #cookie-notice .cookie-notice-container { padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); }
  body #cookie-notice #cn-notice-buttons { width: 100%; }
  body #cookie-notice .cn-button { flex: 1 1 auto; justify-content: center; }
}

/* ---------- O consentimento no checkout ----------
   Discreto, legível, e com alvo de toque decente na caixa. Ele não é a
   ação da página: a ação é pagar. */
html body.woocommerce-checkout .dx-optin {
  margin: 18px 0 20px;
  padding: 16px;
  border: 1px solid var(--dx-fio, #E4E3DF);
  border-radius: 12px;
  background: var(--dx-morno, #F7F6F3);
}
html body.woocommerce-checkout .dx-optin label {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  margin: 0;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #2E2E2B;
  cursor: pointer;
}
html body.woocommerce-checkout .dx-optin input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: #FE5C21;
  cursor: pointer;
}

/* ---------- O botão de pagar ----------
   Ficou mostarda porque as regras de botão estavam presas a
   `body.woocommerce-cart`, e o checkout tem a sua própria classe. Uma
   laranja só da vitrine ao pagamento. */
html body.woocommerce-checkout #place_order,
html body.woocommerce-checkout .button.alt,
html body.woocommerce-checkout button.button {
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 14px;
  background: #FE5C21;
  color: #fff;
  font-family: 'Inter Tight', -apple-system, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  transition: background 200ms cubic-bezier(0.16, 1, 0.30, 1);
}
html body.woocommerce-checkout #place_order:hover { background: #e8501a; }