/* ==================================================
   BOTOFÉ — ARREDONDAMENTOS E ESPAÇAMENTOS
   Cole no final do CSS personalizado
================================================== */

/* CONTROLES PRINCIPAIS
   Altere apenas estes valores para ajustar o visual
*/
:root {
  --botofe-raio-card: 18px;
  --botofe-raio-imagem: 14px;
  --botofe-raio-banner: 20px;
  --botofe-raio-botao: 10px;

  --botofe-espaco-secao: 22px;
  --botofe-espaco-titulo: 34px;
  --botofe-padding-card: 14px;
  --botofe-padding-lateral: 20px;

  --botofe-borda-card: 1px solid rgba(0, 0, 0, 0.07);
  --botofe-sombra-card: 0 8px 24px rgba(0, 0, 0, 0.06);
  --botofe-sombra-hover: 0 14px 34px rgba(0, 0, 0, 0.10);
}


/* ==================================================
   1. ESPAÇAMENTO LATERAL DO CONTEÚDO
================================================== */

#corpo .conteiner {
  box-sizing: border-box;
  padding-left: var(--botofe-padding-lateral);
  padding-right: var(--botofe-padding-lateral);
}


/* ==================================================
   2. ESPAÇAMENTO ENTRE BANNER E PRODUTOS
================================================== */

.pagina-inicial .secao-banners {
  margin-bottom: var(--botofe-espaco-secao) !important;
}


/* ==================================================
   3. ARREDONDAMENTO DOS BANNERS
================================================== */

.pagina-inicial .secao-banners .flexslider,
.pagina-inicial .secao-banners .banner.cheio,
.pagina-inicial .secao-banners .banner {
  border-radius: var(--botofe-raio-banner);
  overflow: hidden;
}

.pagina-inicial .secao-banners img {
  border-radius: var(--botofe-raio-banner);
  display: block;
}


/* ==================================================
   4. ESPAÇAMENTO DAS VITRINES
   Lançamentos, Mais Vendidos e Destaques
================================================== */

.pagina-inicial .listagem .titulo-categoria {
  margin-top: var(--botofe-espaco-secao) !important;
  margin-bottom: var(--botofe-espaco-titulo) !important;
}

.pagina-inicial .listagem .listagem-linha {
  margin-bottom: 24px;
}


/* ==================================================
   5. CARDS DOS PRODUTOS
================================================== */

.listagem .listagem-item {
  box-sizing: border-box;
  position: relative;

  background: #ffffff;
  border: var(--botofe-borda-card);
  border-radius: var(--botofe-raio-card);

  padding: var(--botofe-padding-card);
  box-shadow: var(--botofe-sombra-card);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.listagem .listagem-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--botofe-sombra-hover);
  border-color: rgba(0, 0, 0, 0.11);
}


/* ==================================================
   6. IMAGENS DOS PRODUTOS
================================================== */

.listagem .listagem-item .imagem-produto {
  border-radius: var(--botofe-raio-imagem);
  overflow: hidden;
  background: #f8f8f8;
}

.listagem .listagem-item .imagem-produto img {
  border-radius: var(--botofe-raio-imagem);
  transition: transform 0.35s ease;
}

.listagem .listagem-item:hover .imagem-produto img {
  transform: scale(1.025);
}


/* ==================================================
   7. TEXTOS DOS CARDS
================================================== */

.listagem .listagem-item .nome-produto {
  display: block;
  margin-top: 14px;
  margin-bottom: 10px;

  line-height: 1.4;
  min-height: 40px;
}

.listagem .listagem-item .preco-produto {
  margin-top: 8px;
  margin-bottom: 8px;
}


/* ==================================================
   8. BOTÕES DOS CARDS E PÁGINA DE PRODUTO
================================================== */

.listagem .listagem-item .botao,
.listagem .acoes-produto .botao,
.produto .comprar .botao,
.produto .acoes-produto .botao,
.botao.principal {
  border-radius: var(--botofe-raio-botao) !important;
  box-sizing: border-box;
  padding: 12px 20px;
  min-height: 42px;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.listagem .listagem-item .botao:hover,
.produto .comprar .botao:hover,
.botao.principal:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}


/* ==================================================
   9. PÁGINA INTERNA DO PRODUTO
================================================== */

.pagina-produto .produto .imagem-principal {
  border-radius: var(--botofe-raio-card);
  overflow: hidden;
}

.pagina-produto .produto .imagem-principal img {
  border-radius: var(--botofe-raio-card);
}

.pagina-produto .produto .acoes-produto {
  border-radius: var(--botofe-raio-card);
  padding: 24px;
}


/* ==================================================
   10. CAMPOS DE FORMULÁRIO
================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
select,
textarea {
  box-sizing: border-box;
  border-radius: 10px !important;
}


/* ==================================================
   11. NEWSLETTER
================================================== */

.newsletter .conteiner {
  box-sizing: border-box;
  border-radius: var(--botofe-raio-card);
  padding-top: 30px;
  padding-bottom: 30px;
}


/* ==================================================
   12. RODAPÉ
================================================== */

#rodape .institucional {
  padding-top: 48px;
  padding-bottom: 40px;
}


/* ==================================================
   13. AJUSTES PARA CELULAR
================================================== */

@media screen and (max-width: 767px) {

  :root {
    --botofe-raio-card: 14px;
    --botofe-raio-imagem: 12px;
    --botofe-raio-banner: 14px;

    --botofe-espaco-secao: 34px;
    --botofe-espaco-titulo: 18px;
    --botofe-padding-card: 10px;
    --botofe-padding-lateral: 12px;
  }

  .pagina-inicial .secao-banners {
    margin-bottom: 30px !important;
  }

  .listagem .listagem-item {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  }

  .listagem .listagem-item:hover {
    transform: none;
  }

  .listagem .listagem-item .nome-produto {
    min-height: auto;
    margin-top: 10px;
    line-height: 1.3;
  }

  .pagina-produto .produto .acoes-produto {
    padding: 16px;
  }

  #rodape .institucional {
    padding-top: 32px;
    padding-bottom: 28px;
  }
}