/* ============================================================
   ACCENTO MOVEIS - CSS personalizado (v2, sem @import e sem variaveis)
   Cole este arquivo inteiro em:
   Painel Loja Integrada > Aparencia > Editar tema > CSS personalizado
   ============================================================ */

/* Paleta usada neste arquivo (referencia, nao precisa colar isto):
   fundo creme:      #F7F5F0
   card:              #FFFFFF
   texto:             #2B2B28
   texto secundario:  #706C64
   borda:             #E3E0D8
   vermelho da marca: #AD343E
*/

/* ============================================================
   1. BASE
   ============================================================ */
body {
  background: #F7F5F0 !important;
  color: #2B2B28 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px;
  line-height: 1.65;
}
.conteiner { max-width: 1220px; }
#corpo { padding: 40px 0 56px; }

/* ============================================================
   2. CABECALHO
   ============================================================ */
.barra-inicial { background: #2B2B28 !important; }
.barra-inicial .canais-contato a,
.barra-inicial .canais-contato span { color: rgba(255,255,255,.85) !important; }

#cabecalho { background: #fff; border-bottom: 1px solid #E3E0D8; padding: 14px 0; }
#cabecalho .logo img { max-height: 54px; }

.menu.superior .nivel-um > li { border-color: #E3E0D8 !important; }
.menu.superior .nivel-um > li > a strong.titulo {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .02em;
  color: #2B2B28 !important;
}

.busca input {
  border: 1px solid #E3E0D8 !important;
  border-radius: 6px 0 0 6px;
  background: #F7F5F0 !important;
}
.busca .botao-busca { border-radius: 0 6px 6px 0; }

/* ============================================================
   3. TITULO DE SECAO ("Mais vendidos", etc.)
   ============================================================ */
.titulo-categoria {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #E3E0D8 !important;
  padding: 0 0 14px !important;
  margin-bottom: 28px !important;
}
.titulo-categoria strong {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 24px;
  color: #2B2B28 !important;
  letter-spacing: -0.01em;
}

/* ============================================================
   4. CARDS DE PRODUTO
   ============================================================ */
.listagem-item {
  background: #FFFFFF !important;
  border: 1px solid #E3E0D8 !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: border-color .2s ease;
}
.listagem-item:hover { border-color: #706C64 !important; }

.listagem-item .imagem-produto {
  background: #F7F5F0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
}
.listagem-item .imagem-produto img { mix-blend-mode: multiply; }

.nome-produto {
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #2B2B28 !important;
  line-height: 1.45;
}

.preco-produto .preco-promocional,
.preco-produto .preco-venda {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 21px;
  font-weight: 600;
  color: #2B2B28 !important;
}
.preco-a-partir > span:first-child {
  font-size: 11px;
  color: #706C64 !important;
  text-transform: none;
}
.preco-parcela, .preco-parcela strong {
  font-size: 12px;
  color: #706C64 !important;
  font-weight: 400 !important;
}
.desconto-a-vista { font-size: 12px; color: #AD343E !important; }
.desconto-a-vista strong { color: #AD343E !important; }

.bandeira-promocao {
  background: #AD343E !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
}

/* ============================================================
   5. BOTOES
   ============================================================ */
.botao.principal,
.botao.botao-comprar.principal {
  background: transparent !important;
  border: 1px solid #2B2B28 !important;
  color: #2B2B28 !important;
  border-radius: 6px !important;
  padding: 9px 22px !important;
  font-weight: 500 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  transition: background .15s ease, color .15s ease;
}
.botao.principal:hover,
.botao.botao-comprar.principal:hover {
  background: #2B2B28 !important;
  color: #fff !important;
}
.tag-comprar.fundo-principal { background: #AD343E !important; }

/* ============================================================
   6. MENU LATERAL DE CATEGORIAS
   ============================================================ */
.menu.lateral { background: transparent !important; border: none !important; }
.menu.lateral .nivel-um > li { border-bottom: 1px solid #E3E0D8 !important; }
.menu.lateral .nivel-um > li a strong.titulo {
  font-weight: 400;
  font-size: 14px;
  color: #2B2B28 !important;
}

/* ============================================================
   7. NEWSLETTER
   ============================================================ */
.componente.newsletter {
  background: #FFFFFF !important;
  border: 1px solid #E3E0D8 !important;
  border-radius: 12px !important;
  padding: 22px !important;
}
.componente.newsletter .titulo {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 16px;
  color: #2B2B28 !important;
}
.componente.newsletter input[type="text"] {
  border: 1px solid #E3E0D8 !important;
  border-radius: 6px !important;
}

/* ============================================================
   8. RODAPE
   ============================================================ */
#rodape .institucional.fundo-secundario {
  background: #2B2B28 !important;
  padding: 48px 0 !important;
}
#rodape .links-rodape .titulo,
#rodape .sobre-loja-rodape .titulo,
#rodape .pagamento .titulo,
#rodape .selos .titulo {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5) !important;
  font-weight: 600;
}
#rodape .links-rodape ul li a {
  color: rgba(255,255,255,.85) !important;
  font-size: 14px;
}
#rodape .sobre-loja-rodape p {
  color: rgba(255,255,255,.7) !important;
  font-size: 13px;
  line-height: 1.65;
}