/* =========================================================
   ENVELOPARIA CONVITES - CSS COMPATIVEL LOJA INTEGRADA
   Cole em: Personalize sua loja > Editar CSS
   Versao conservadora para evitar aviso de sintaxe do painel.
   ========================================================= */

/* =========================================================
   1. VARIAVEIS VISUAIS
   Paleta aplicada diretamente, sem variaveis CSS.
   ========================================================= */

body {
  background: #fbf8f5;
  color: #393431;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

a {
  color: #9f776d;
}

a:hover {
  color: #b89462;
}

.conteiner {
  max-width: 1180px;
}

.titulo,
.titulo-categoria,
.listagem .titulo-categoria,
.pagina-produto .nome-produto,
.produto .nome-produto {
  color: #393431;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0;
}

/* =========================================================
   2. TOPO / CABECALHO
   ========================================================= */

.barra-inicial,
#barraTopo,
.topo,
#cabecalho {
  background: #ffffff;
}

.barra-inicial,
#barraTopo {
  border-bottom: 1px solid #eaded6;
  color: #756c66;
  font-size: 12px;
}

.barra-inicial a,
#barraTopo a {
  color: #756c66;
}

#cabecalho {
  border-bottom: 1px solid #eaded6;
}

#cabecalho .conteiner {
  padding-top: 18px;
  padding-bottom: 18px;
}

.logo img {
  display: inline-block;
  max-height: 96px;
}

.busca input,
.busca .input-busca,
.busca form input[type="text"],
#form-buscar input {
  background: #ffffff;
  border: 1px solid #eaded6;
  border-radius: 30px;
  color: #393431;
  min-height: 42px;
  padding-left: 18px;
  padding-right: 48px;
}

.busca input:focus,
.busca .input-busca:focus,
#form-buscar input:focus {
  border-color: #cda89c;
  outline: none;
}

.busca .botao,
.busca .botao-busca,
#form-buscar .botao {
  background: #9f776d;
  border-color: #9f776d;
  border-radius: 30px;
  color: #ffffff;
}

.acoes-conta,
.carrinho,
.carrinho a,
.atalhos-conta,
.bem-vindo {
  color: #756c66;
}

.carrinho,
.carrinho a,
.carrinho-interno {
  border-color: #eaded6;
  border-radius: 8px;
}

/* =========================================================
   3. MENU
   ========================================================= */

.menu.superior,
#cabecalho .menu,
.menu.superior .nivel-um {
  background: #ffffff;
  border: 0;
}

.menu.superior {
  border-top: 1px solid #eaded6;
  border-bottom: 1px solid #eaded6;
}

.menu.superior .nivel-um li {
  border: 0;
}

.menu.superior .nivel-um li a,
.menu.superior .nivel-um li strong {
  color: #393431;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.menu.superior .nivel-um li a:hover,
.menu.superior .nivel-um li:hover a {
  background: #f6eee8;
  color: #9f776d;
}

.menu.superior .nivel-dois,
.menu.superior .nivel-tres {
  background: #ffffff;
  border: 1px solid #eaded6;
}

.menu.superior .nivel-dois a,
.menu.superior .nivel-tres a {
  color: #756c66;
  font-size: 13px;
}

.menu.superior .nivel-dois a:hover,
.menu.superior .nivel-tres a:hover {
  background: #fbf8f5;
  color: #9f776d;
}

/* =========================================================
   4. BANNERS
   ========================================================= */

.secao-banners,
.banner,
.banner.tarja {
  margin-bottom: 28px;
}

.secao-banners img,
.banner img,
.flexslider img {
  border-radius: 8px;
}

.envp-comercial {
  background: #ffffff;
  border-top: 1px solid #eaded6;
  border-bottom: 1px solid #eaded6;
  margin: 0 0 28px;
}

.envp-comercial__inner {
  max-width: 1180px;
  margin: 0 auto;
  overflow: hidden;
}

.envp-comercial__item {
  background: #ffffff;
  border-left: 1px solid #eaded6;
  box-sizing: border-box;
  float: left;
  min-height: 128px;
  padding: 22px 18px;
  text-align: center;
  width: 25%;
}

.envp-comercial__item:first-child {
  border-left: 0;
}

.envp-comercial__item strong {
  display: block;
  color: #393431;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 6px;
}

.envp-comercial__item span {
  color: #756c66;
  display: block;
  font-size: 13px;
  line-height: 1.45;
}

.envp-orcamento {
  background: #f6eee8;
  border: 1px solid #eaded6;
  border-radius: 8px;
  margin: 28px auto;
  max-width: 1180px;
  padding: 28px;
  text-align: center;
}

.envp-orcamento h2 {
  color: #393431;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 8px;
}

.envp-orcamento p {
  color: #756c66;
  font-size: 15px;
  margin: 0 auto 18px;
  max-width: 680px;
}

/* =========================================================
   5. VITRINE DE PRODUTOS
   ========================================================= */

.listagem {
  margin-top: 18px;
}

.listagem .titulo-categoria {
  border: 0;
  font-size: 30px;
  line-height: 1.2;
  margin: 22px 0 18px;
  padding: 0;
  text-align: center;
}

.listagem .titulo-categoria:after {
  background: #d9c3a5;
  content: "";
  display: block;
  height: 1px;
  margin: 13px auto 0;
  width: 72px;
}

.listagem-item,
.produto,
.produto-listagem {
  border-radius: 8px;
}

.listagem-item {
  background: #ffffff;
  border: 1px solid #eaded6;
  overflow: hidden;
}

.listagem-item:hover {
  border-color: #d9c3a5;
}

.listagem-item .imagem-produto,
.listagem-item .produto-imagem {
  background: #ffffff;
  padding: 12px;
}

.listagem-item .imagem-produto img,
.listagem-item .produto-imagem img {
  border-radius: 6px;
}

.listagem-item .info-produto,
.listagem-item .dados-produto {
  padding: 14px 14px 18px;
  text-align: center;
}

.listagem-item .nome-produto,
.produto .nome-produto,
.produto-nome {
  color: #393431;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
}

.listagem-item .codigo-produto,
.produto .codigo-produto,
.produto-sku {
  color: #756c66;
  font-size: 11px;
}

.listagem-item .acoes-produto,
.listagem-item .produto-sobrepor {
  background: #ffffff;
}

/* =========================================================
   6. PAGINA DE CATEGORIA
   ========================================================= */

.pagina-categoria .conteudo,
.pagina-categoria .coluna,
.pagina-busca .conteudo {
  color: #393431;
}

.pagina-categoria .breadcrumbs,
.breadcrumb,
.breadcrumbs {
  color: #756c66;
  font-size: 12px;
  margin-bottom: 16px;
}

.pagina-categoria h1,
.pagina-busca h1,
.categoria h1 {
  color: #393431;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
}

.ordenar-listagem,
.filtro,
.menu.lateral,
.coluna .menu {
  background: #ffffff;
  border: 1px solid #eaded6;
  border-radius: 8px;
}

.menu.lateral .nivel-um li a,
.coluna .menu .nivel-um li a {
  color: #393431;
}

.menu.lateral .nivel-dois a,
.coluna .menu .nivel-dois a {
  color: #756c66;
}

.menu.lateral a:hover,
.coluna .menu a:hover {
  color: #9f776d;
}

/* =========================================================
   7. PAGINA DE PRODUTO
   ========================================================= */

.pagina-produto .produto {
  background: #ffffff;
  border: 1px solid #eaded6;
  border-radius: 8px;
  padding: 22px;
}

.pagina-produto .produto .principal,
.produto .principal {
  color: #393431;
}

.pagina-produto .nome-produto,
.produto .principal .nome-produto {
  font-size: 34px;
  line-height: 1.18;
  margin-bottom: 12px;
}

.pagina-produto .codigo-produto,
.produto .codigo-produto {
  color: #756c66;
}

.produto .imagem-principal,
.produto .galeria,
.produto .miniaturas {
  border-color: #eaded6;
}

.pagina-produto .atributos,
.pagina-produto .acoes-produto,
.pagina-produto .parcelas-produto,
.pagina-produto .produto-compartilhar {
  border-color: #eaded6;
}

.pagina-produto .produto-descricao,
.abas-custom,
.abas-conteudo {
  background: #ffffff;
  border: 1px solid #eaded6;
  border-radius: 8px;
  color: #393431;
}

.pagina-produto .produto-descricao h2,
.pagina-produto .produto-descricao h3,
.abas-custom .titulo {
  color: #393431;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

/* =========================================================
   8. BOTOES
   ========================================================= */

.botao,
button,
input[type="submit"],
.btn {
  border-radius: 30px;
  font-weight: 700;
}

.botao.principal,
.botao-comprar,
.comprar .botao,
.acoes-produto .comprar .botao,
.finalizar-compra .botao,
.envp-btn {
  background: #9f776d;
  border: 1px solid #9f776d;
  color: #ffffff;
}

.botao.principal:hover,
.botao-comprar:hover,
.comprar .botao:hover,
.finalizar-compra .botao:hover,
.envp-btn:hover {
  background: #393431;
  border-color: #393431;
  color: #ffffff;
}

.botao.secundario,
.botao.pequeno,
.envp-btn--outline {
  background: #ffffff;
  border: 1px solid #d9c3a5;
  color: #9f776d;
}

.botao.secundario:hover,
.botao.pequeno:hover,
.envp-btn--outline:hover {
  background: #f6eee8;
  color: #393431;
}

/* =========================================================
   9. PRECO / ORCAMENTO
   ========================================================= */

.preco-produto,
.produto .preco-produto,
.listagem-item .preco-produto {
  color: #393431;
}

.preco-promocional,
.preco-venda,
.produto .preco-promocional,
.listagem-item .preco-promocional {
  color: #9f776d;
  font-size: 22px;
  font-weight: 700;
}

.listagem-item .preco-promocional,
.listagem-item .preco-venda {
  font-size: 20px;
}

.preco-parcela,
.parcelas,
.parcelamento,
.listagem-item .parcelamento {
  color: #756c66;
  font-size: 13px;
}

.produto .comprar,
.produto .acoes-produto {
  background: #fbf8f5;
  border-radius: 8px;
  padding: 16px;
}

.produto .atributos .atributo-comum a,
.produto .atributos .atributo-cor a,
.produto .atributos ul li a {
  border-color: #eaded6;
  border-radius: 6px;
}

.produto .atributos .active a,
.produto .atributos .atributo-comum a:hover,
.produto .atributos .atributo-cor a:hover {
  border-color: #9f776d;
}

/* =========================================================
   10. RODAPE
   ========================================================= */

#rodape,
.rodape {
  background: #ffffff;
  border-top: 1px solid #eaded6;
  color: #756c66;
}

#rodape .institucional,
#rodape .pagamento-selos,
#rodape .links-rodape,
#rodape .sobre-loja-rodape {
  background: transparent;
  border-color: #eaded6;
}

#rodape .titulo,
#rodape h3,
#rodape h4 {
  color: #393431;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
}

#rodape a {
  color: #756c66;
}

#rodape a:hover {
  color: #9f776d;
}

#rodape .redes-sociais a,
.redes-sociais a {
  border-color: #eaded6;
  color: #9f776d;
}

#rodape .redes-sociais a:hover,
.redes-sociais a:hover {
  background: #f6eee8;
}

#rodape .creditos,
#rodape .conteiner p {
  color: #756c66;
  font-size: 12px;
}

/* =========================================================
   11. AJUSTES MOBILE
   ========================================================= */

@media screen and (max-width: 979px) {
  #cabecalho .conteiner {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .logo img {
    max-height: 76px;
  }

  .menu.superior .nivel-um li a,
  .menu.superior .nivel-um li strong {
    font-size: 12px;
  }

  .envp-comercial__item {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  body {
    font-size: 14px;
  }

  .conteiner {
    width: auto;
  }

  .barra-inicial {
    font-size: 11px;
  }

  .busca input,
  .busca .input-busca,
  #form-buscar input {
    min-height: 40px;
  }

  .listagem .titulo-categoria,
  .pagina-categoria h1,
  .pagina-busca h1,
  .pagina-produto .nome-produto,
  .produto .principal .nome-produto {
    font-size: 26px;
  }

  .listagem-item {
    margin-bottom: 16px;
  }

  .listagem-item .info-produto,
  .listagem-item .dados-produto {
    padding: 12px;
  }

  .listagem-item .nome-produto,
  .produto .nome-produto,
  .produto-nome {
    font-size: 16px;
  }

  .preco-promocional,
  .preco-venda,
  .produto .preco-promocional,
  .listagem-item .preco-promocional {
    font-size: 20px;
  }

  .pagina-produto .produto {
    padding: 14px;
  }

  .produto .comprar,
  .produto .acoes-produto {
    padding: 12px;
  }

  .botao.principal,
  .botao-comprar,
  .comprar .botao,
  .finalizar-compra .botao,
  .envp-btn {
    display: inline-block;
    max-width: 100%;
    min-height: 42px;
  }

  .envp-comercial {
    margin-bottom: 20px;
  }

  .envp-comercial__item {
    border-left: 0;
    border-top: 1px solid #eaded6;
    float: none;
    min-height: 0;
    padding: 18px 16px;
    width: auto;
  }

  .envp-comercial__item:first-child {
    border-top: 0;
  }

  .envp-orcamento {
    margin: 20px 12px;
    padding: 22px 16px;
  }

  .envp-orcamento h2 {
    font-size: 24px;
  }

  #rodape {
    text-align: left;
  }
}

@media screen and (max-width: 480px) {
  .logo img {
    max-height: 64px;
  }

  .listagem .titulo-categoria,
  .pagina-categoria h1,
  .pagina-produto .nome-produto,
  .produto .principal .nome-produto {
    font-size: 23px;
  }

  .envp-comercial__item strong {
    font-size: 17px;
  }
}
