/* =========================================================
   ADORO TERRÁRIOS
   CSS COMPLETO — BLOCO 1 + BLOCO 2
   ========================================================= */


/* =========================================================
   BLOCO 1
   BASE VISUAL + HEADER + MENU + CARRINHO + BANNER
   ========================================================= */


/* =========================================================
   1. BASE DA LOJA
   ========================================================= */

body {
  background: #f3eadc;
  color: #22301f;
}


/* =========================================================
   2. CORES DA MARCA
   ========================================================= */

.fundo-principal {
  background-color: #284421 !important;
}

.cor-principal {
  color: #284421 !important;
}

.borda-principal {
  border-color: #284421 !important;
}


/* =========================================================
   3. BOTÕES
   ========================================================= */

.botao.principal {
  background: #284421 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
  font-weight: 700;
  box-shadow: none !important;
}

.botao {
  border-radius: 999px !important;
}


/* =========================================================
   4. TÍTULOS
   ========================================================= */

.titulo {
  color: #22301f;
}


/* =========================================================
   5. CORPO DA LOJA
   ========================================================= */

#corpo {
  background: #f3eadc;
}


/* =========================================================
   6. CABEÇALHO
   ========================================================= */

#cabecalho {
  background: #f7f0e5 !important;
  border-bottom: 1px solid rgba(40, 68, 33, 0.10);
  box-shadow: none !important;
}


/* =========================================================
   7. BUSCA
   ========================================================= */

#cabecalho .busca input {
  background: #fffaf3 !important;
  color: #22301f !important;
  border: 1px solid rgba(40, 68, 33, 0.16) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

#cabecalho .busca input::placeholder {
  color: #8b8378;
}


/* =========================================================
   8. MENU PRINCIPAL
   ========================================================= */

.menu.superior {
  background: #f7f0e5 !important;
  border-top: 0 !important;
  border-bottom: 1px solid rgba(40, 68, 33, 0.10) !important;
  box-shadow: none !important;
}

.menu.superior .nivel-um > li {
  border: 0 !important;
}

.menu.superior .nivel-um > li > a {
  background: transparent !important;
  color: #22301f !important;
  font-weight: 600;
}

.menu.superior .nivel-um > li > a:hover {
  background: transparent !important;
  color: #49623e !important;
}


/* =========================================================
   9. SUBMENU
   ========================================================= */

.menu.superior .nivel-dois {
  background: #fffaf3 !important;
  border-color: rgba(40, 68, 33, 0.12) !important;
  box-shadow: 0 10px 30px rgba(44, 36, 26, 0.10) !important;
}

.menu.superior .nivel-dois li a {
  color: #22301f !important;
}

.menu.superior .nivel-dois li a:hover {
  background: #efe3d1 !important;
  color: #284421 !important;
}


/* =========================================================
   10. CONTA + CARRINHO — DESKTOP
   ========================================================= */

@media (min-width: 768px) {

  #cabecalho .acoes-conta,
  #cabecalho .carrinho {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  #cabecalho .acoes-conta a,
  #cabecalho .carrinho > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    width: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }

  #cabecalho .acoes-conta,
  #cabecalho .acoes-conta a,
  #cabecalho .carrinho,
  #cabecalho .carrinho a {
    font-size: 14px !important;
  }

  #cabecalho .carrinho .qtd-carrinho {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    width: 20px;
    height: 20px;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px;
    line-height: 20px !important;
    font-size: 11px !important;
  }

  #cabecalho .carrinho .titulo,
  #cabecalho .carrinho .valor-total {
    display: none !important;
  }

}


/* =========================================================
   11. BANNERS
   ========================================================= */

.secao-banners .flexslider .slides img {
  display: block;
  width: 100%;
  height: auto;
}

.secao-banners .flexslider,
.secao-banners .flexslider .slides,
.secao-banners .flexslider .slides > li {
  max-height: none !important;
}


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

#rodape {
  background: #173019;
  color: #f3eadc;
}


/* =========================================================
   13. AJUSTE DO CARRINHO
   ========================================================= */

#cabecalho .carrinho > a i,
#cabecalho .carrinho > a .icon-shopping-cart,
#cabecalho .carrinho .icone-carrinho {
  font-size: 32px !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
}

#cabecalho .carrinho {
  min-width: 0 !important;
}

#cabecalho .carrinho > a {
  min-height: 50px !important;
  padding: 5px 10px !important;
}


/* =========================================================
   14. FUNDO BEGE DA ÁREA PRINCIPAL
   ========================================================= */

#corpo,
#corpo > .container,
#corpo .container {
  background-color: #f7f0e5 !important;
}



/* =========================================================
   BLOCO 2
   SIDEBAR DE LEMBRANCINHAS + LOJA À DIREITA
   ========================================================= */


/* =========================================================
   15. ESTRUTURA GERAL
   ========================================================= */

.adoro-layout-sidebar {
  display: flex !important;
  align-items: flex-start !important;

  width: 100% !important;
  max-width: 100% !important;

  gap: 26px !important;

  margin: 38px 0 50px !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}


/* =========================================================
   16. SIDEBAR ESQUERDA
   ========================================================= */

.adoro-sidebar {
  flex: 0 0 250px !important;

  width: 250px !important;
  min-width: 250px !important;

  margin: 0 !important;
  padding: 18px 14px !important;

  box-sizing: border-box !important;

  background: #efe3d1 !important;

  border: 1px solid rgba(40, 68, 33, 0.08) !important;
  border-radius: 16px !important;

  color: #22301f !important;

  text-align: center !important;

  box-shadow: 0 6px 20px rgba(44, 36, 26, 0.06) !important;
}


/* =========================================================
   17. CABEÇALHO DA SIDEBAR
   ========================================================= */

.adoro-sidebar__topo {
  margin: 0 0 16px !important;
  padding: 0 !important;
}


.adoro-sidebar__eyebrow {
  display: block !important;

  margin: 0 0 5px !important;

  color: #8f755e !important;

  font-size: 9px !important;
  font-weight: 700 !important;

  line-height: 1.3 !important;

  letter-spacing: 0.15em !important;
}


.adoro-sidebar h2 {
  margin: 0 0 8px !important;

  color: #284421 !important;

  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}


.adoro-sidebar p {
  margin: 0 !important;

  color: #70685f !important;

  font-size: 12px !important;
  line-height: 1.45 !important;
}


/* =========================================================
   18. ÁREA DAS FOTOS
   ========================================================= */

.adoro-sidebar__fotos {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  box-sizing: border-box !important;
}


/* CADA FOTO / LINK */

.adoro-sidebar__fotos a {
  display: block !important;

  width: 100% !important;

  margin: 0 0 12px !important;
  padding: 0 !important;

  border: 0 !important;

  text-decoration: none !important;

  overflow: hidden !important;

  border-radius: 12px !important;
}


/* IMAGENS */

.adoro-sidebar__fotos img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 12px !important;

  object-fit: cover !important;

  box-sizing: border-box !important;

  transition: transform 0.20s ease !important;
}


/* EFEITO AO PASSAR O MOUSE */

.adoro-sidebar__fotos a:hover img {
  transform: scale(1.02) !important;
}


/* =========================================================
   19. BOTÃO WHATSAPP
   ========================================================= */

.adoro-sidebar__whatsapp {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  min-height: 42px !important;

  margin: 4px 0 0 !important;
  padding: 0 15px !important;

  box-sizing: border-box !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: #284421 !important;

  color: #ffffff !important;

  font-size: 12px !important;
  font-weight: 700 !important;

  line-height: 1.2 !important;

  text-decoration: none !important;

  box-shadow: none !important;
}


.adoro-sidebar__whatsapp:hover {
  background: #173019 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}


/* =========================================================
   20. LOJA NATIVA À DIREITA
   ========================================================= */

.adoro-layout-sidebar > .listagem {
  flex: 1 1 0 !important;

  min-width: 0 !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  float: none !important;

  box-sizing: border-box !important;
}


/* GARANTE QUE AS LINHAS DA LOJA USEM A ÁREA DISPONÍVEL */

.adoro-layout-sidebar > .listagem .listagem-linha {
  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box !important;
}


/* =========================================================
   21. AJUSTE PARA NOTEBOOK / TABLET MAIOR
   ========================================================= */

@media (min-width: 768px) and (max-width: 1100px) {

  .adoro-layout-sidebar {
    gap: 20px !important;
  }

  .adoro-sidebar {
    flex-basis: 220px !important;

    width: 220px !important;
    min-width: 220px !important;

    padding: 16px 12px !important;
  }

  .adoro-sidebar h2 {
    font-size: 20px !important;
  }

  .adoro-sidebar p {
    font-size: 11px !important;
  }

}


/* =========================================================
   22. MOBILE
   SIDEBAR VIRA BLOCO ACIMA DA LOJA
   ========================================================= */

@media (max-width: 767px) {

  .adoro-layout-sidebar {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 25px 0 35px !important;
    padding: 0 !important;
  }


  .adoro-sidebar {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 30px !important;
    padding: 20px 16px !important;

    box-sizing: border-box !important;
  }


  .adoro-layout-sidebar > .listagem {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
  }


  .adoro-sidebar h2 {
    font-size: 26px !important;
  }


  .adoro-sidebar p {
    font-size: 13px !important;
  }


  .adoro-sidebar__fotos {
    width: 100% !important;
  }


  .adoro-sidebar__fotos a {
    width: 100% !important;

    margin-bottom: 14px !important;
  }


  .adoro-sidebar__fotos img {
    width: 100% !important;
    height: auto !important;
  }


  .adoro-sidebar__whatsapp {
    min-height: 46px !important;

    font-size: 13px !important;
  }

}