/* === Areia & Espresso — base === */
:root{
  --areia: #FAF7F1;
  --branco: #FFFFFF;
  --borda: #E9E2D8;

  --texto: #1F1E1C;
  --texto-2: #6C655C;

  --espresso: #2B2622;
  --terracota: #B8745E;
}

/* Fundo geral */
body{
  background: var(--areia) !important;
  color: var(--texto) !important;
}

/* Links (mais chic e menos “varejo”) */
a{
  color: var(--texto) !important;
}
a:hover{
  color: var(--terracota) !important;
}

/* Cards / blocos (se o tema usar contornos) */
.produto, .listagem-item, .box, .caixa, .conteiner{
  border-color: var(--borda) !important;
}

/* Botões (tentativa ampla: vários temas usam essas classes) */
.botao, .btn, button, input[type="submit"]{
  background: var(--espresso) !important;
  color: #fff !important;
  border-color: var(--espresso) !important;
}
.botao:hover, .btn:hover, button:hover, input[type="submit"]:hover{
  filter: brightness(1.08);
}

/* Preços: deixa elegante e legível */
.preco, .preco-produto, .produto-preco{
  color: var(--texto) !important;
}
.preco-de, .preco-antigo{
  color: var(--texto-2) !important;
  opacity: .8;
}

/* Selos/Tags/Desconto (quando existir) */
.tag, .selo, .desconto, .porcentagem-desconto{
  background: color-mix(in srgb, var(--terracota) 14%, transparent) !important;
  color: var(--terracota) !important;
  border: 1px solid color-mix(in srgb, var(--terracota) 35%, transparent) !important;
}