/* ============================================================
   TAM ALIMENTOS | CSS PREMIUM V7 - CONSOLIDADO
   Loja Integrada | Desktop, tablet e celular
   Cores: #006437 | #173A28 | #F8F8F8 | #FFFFFF

   Substituir TODO o CSS Avançado antigo por este arquivo.
   Mantidos os ajustes finais da V6. Regras duplicadas e
   seletores excessivamente amplos foram consolidados.
   ============================================================ */

/* 01. BASE E CABEÇALHO --------------------------------------- */
body {
  background: #F8F8F8 !important;
  font-family: 'Poppins', Arial, sans-serif !important;
  color: #173A28;
}

#cabecalho { background: #FFFFFF !important; }
#cabecalho,
#cabecalho .menu.superior,
#cabecalho .menu.superior .nivel-um { box-sizing: border-box !important; }

#cabecalho .busca input,
#cabecalho .busca-mobile input {
  background: #F7F7F7 !important;
  border: 1px solid #E5E5E5 !important;
  border-radius: 30px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* 02. CATEGORIAS - ESTILO CÁPSULA ----------------------------- */
#cabecalho .menu.superior { background: #FFFFFF !important; }

#cabecalho .menu.superior .nivel-um > li > a > strong.titulo {
  background: #FFFFFF !important;
  color: #006437 !important;
  border: 1px solid #DCE5DE !important;
  border-radius: 30px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

#cabecalho .menu.superior .nivel-um > li.ativo > a > strong.titulo,
#cabecalho .menu.superior .nivel-um > li:hover > a > strong.titulo {
  background: #006437 !important;
  color: #FFFFFF !important;
  border-color: #006437 !important;
}

/* 03. BANNER PRINCIPAL --------------------------------------- */
.secao-banners .banner.cheio {
  overflow: hidden !important;
  border-radius: 14px !important;
}
.secao-banners .banner.cheio img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 04. CARDS E IMAGENS DA VITRINE ------------------------------ */
/* A regra já abrange a página inicial e as páginas internas. */
.listagem .listagem-item {
  background: #FFFFFF !important;
  border: 1px solid #E8E8E8 !important;
  border-radius: 15px !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.listagem .listagem-item .imagem-produto {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border-radius: 15px 15px 0 0 !important;
  box-sizing: border-box !important;
}
.listagem .listagem-item .imagem-produto img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
  border-radius: 0 !important;
}

/* 05. INFORMAÇÕES E PREÇOS ----------------------------------- */
.listagem .listagem-item .info-produto {
  padding: 12px !important;
  background: #FFFFFF !important;
  text-align: left !important;
}
.listagem .nome-produto {
  color: #173A28 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-align: left !important;
}
.listagem .preco-promocional {
  color: #006437 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}
.listagem .titulo-categoria {
  color: #173A28 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  text-align: left !important;
}

/* 06. BOTÕES COMPRAR ----------------------------------------- */
.listagem .listagem-item .acoes-produto {
  background: #FFFFFF !important;
  background-image: none !important;
  padding: 8px 12px 12px !important;
  border: none !important;
  text-align: center !important;
}
.listagem .listagem-item .acoes-produto a.botao,
.listagem .listagem-item .acoes-produto button,
.listagem .listagem-item .acoes-produto .botao.principal,
.listagem .listagem-item .acoes-produto .botao-comprar,
.listagem .listagem-item a.botao-comprar,
.listagem .listagem-item .botao.principal {
  background: #006437 !important;
  background-color: #006437 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border: 1px solid #006437 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  text-align: center !important;
}
.listagem .listagem-item .acoes-produto a span,
.listagem .listagem-item .acoes-produto a strong,
.listagem .listagem-item .acoes-produto a i,
.listagem .listagem-item .botao-comprar span { color: #FFFFFF !important; }

/* 07. TARJAS E MINI-BANNERS ---------------------------------- */
/* Removido '.secao-banners + div': atingia qualquer bloco após
   os banners, inclusive vitrines, e podia alterar seus fundos. */
body.pagina-inicial .mini-banners,
body.pagina-inicial .banner-extra,
body.pagina-inicial .tarja-beneficios {
  width: calc(100% - 48px) !important;
  max-width: 1100px !important;
  margin: 12px auto 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
body.pagina-inicial .mini-banners .conteiner,
body.pagina-inicial .banner-extra .conteiner,
body.pagina-inicial .tarja-beneficios .conteiner {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.pagina-inicial .mini-banners img,
body.pagina-inicial .banner-extra img,
body.pagina-inicial .tarja-beneficios img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
}
body.pagina-inicial .mini-banners,
body.pagina-inicial .mini-banners *,
body.pagina-inicial .banner-extra,
body.pagina-inicial .banner-extra *,
body.pagina-inicial .tarja-beneficios,
body.pagina-inicial .tarja-beneficios * {
  background-color: transparent !important;
}

body.pagina-inicial .banner-tarja {
  width: 100% !important;
  max-width: 1100px !important;
  height: auto !important;
  margin: 8px auto 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}
body.pagina-inicial .banner-tarja > a {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
body.pagina-inicial .banner-tarja img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 08. BOTÕES FLUTUANTES -------------------------------------- */
.tam-whatsapp {
  position: fixed !important;
  top: 59% !important;
  bottom: auto !important;
  right: 18px !important;
  left: auto !important;
  transform: none !important;
  width: 58px !important;
  height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #25D366 !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.22) !important;
  text-decoration: none !important;
  z-index: 99999 !important;
}
.tam-whatsapp svg {
  display: block !important;
  width: 32px !important;
  height: 32px !important;
  color: #FFFFFF !important;
  fill: currentColor !important;
}
.tam-whatsapp:hover { background: #1EBE5D !important; }

/* Posicionamento do widget de WhatsApp, caso exista no tema. */
.li-whatsapp {
  position: fixed !important;
  top: 59% !important;
  bottom: auto !important;
  right: 18px !important;
  left: auto !important;
  transform: none !important;
  z-index: 99999 !important;
}



/* 09. DESKTOP E TABLET - A PARTIR DE 768PX -------------------- */
@media screen and (min-width: 768px) {
  body.pagina-inicial .listagem {
    width: calc(100% - 48px) !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .secao-banners .banner.cheio {
    width: calc(100% - 48px) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    float: none !important;
  }

  #cabecalho {
    background: linear-gradient(to bottom,
      #FFFFFF calc(100% - 90px),
      #F8F8F8 calc(100% - 90px)) !important;
  }
  #cabecalho .menu.superior,
  #cabecalho .menu.superior .nivel-um {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }
  #cabecalho .menu.superior .nivel-um {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: calc(100% - 48px) !important;
    max-width: 1200px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 12px 0 !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
    box-sizing: border-box !important;
  }
  #cabecalho .menu.superior .nivel-um::-webkit-scrollbar { display: none; }
  #cabecalho .menu.superior .nivel-um > li {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
  }
  #cabecalho .menu.superior .nivel-um > li > a {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 0 !important;
    background: transparent !important;
  }
  #cabecalho .menu.superior .nivel-um > li > a > strong.titulo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    padding: 0 18px !important;
    line-height: 1 !important;
  }
  .listagem .listagem-item {
    transition: transform .25s ease, box-shadow .25s ease !important;
  }
  .listagem .listagem-item:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  }
  .listagem .listagem-item .acoes-produto a.botao:hover,
  .listagem .listagem-item .acoes-produto button:hover {
    background: #004D2A !important;
    border-color: #004D2A !important;
    color: #FFFFFF !important;
  }
}

/* 10. MOBILE - ATÉ 767PX ------------------------------------ */
@media screen and (max-width: 767px) {
  /* Evita rolagem horizontal da página, mantendo a das categorias. */
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow-x: hidden !important;
  }
  #cabecalho, #corpo, #rodape, .conteiner-principal {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  img { max-width: 100%; }

  #cabecalho {
    background: linear-gradient(to bottom,
      #FFFFFF calc(100% - 58px),
      #F8F8F8 calc(100% - 58px)) !important;
  }
  #cabecalho .conteiner {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  #cabecalho .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    float: none !important;
    width: 100% !important;
    margin: 5px auto 8px !important;
    padding: 0 !important;
    text-align: center !important;
  }
  #cabecalho .logo a { display: block !important; margin: 0 auto !important; }
  #cabecalho .logo img {
    display: block !important;
    width: auto !important;
    max-width: 155px !important;
    height: auto !important;
    max-height: 95px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
  }

  /* Busca centralizada; reduz o quadro vazio do tema. */
  #cabecalho .busca,
  #cabecalho .busca-mobile {
    width: 88% !important;
    max-width: 340px !important;
    float: none !important;
    margin: 5px auto 10px !important;
    padding: 0 !important;
  }
  #cabecalho .busca input,
  #cabecalho .busca-mobile input {
    width: 100% !important;
    height: 44px !important;
    padding: 0 45px 0 15px !important;
    font-size: 14px !important;
  }
  #cabecalho .busca-mobile,
  #cabecalho .span8.busca-mobile {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 5px !important;
    margin-bottom: 4px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
  }
  #cabecalho .busca-mobile input {
    min-height: 44px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  #cabecalho .busca-mobile .busca.borda-alpha {
    position: relative !important;
    display: block !important;
    height: 48px !important;
    min-height: 0 !important;
    max-height: 48px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    box-sizing: border-box !important;
  }
  #cabecalho .busca-mobile .busca.borda-alpha input {
    height: 44px !important;
    min-height: 44px !important;
    background: #F7F7F7 !important;
    border: 1px solid #E5E5E5 !important;
    border-radius: 30px !important;
    box-sizing: border-box !important;
  }

  /* Menu no fluxo da página, com rolagem lateral somente interna. */
  #cabecalho .menu.superior {
    position: relative !important;
    display: block !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  #cabecalho .menu.superior .nivel-um {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scroll-snap-type: none !important;
    scrollbar-width: none;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }
  #cabecalho .menu.superior .nivel-um::-webkit-scrollbar {
    display: none !important;
  }
  #cabecalho .menu.superior .nivel-um > .cab-nav.fundo-principal {
    display: none !important;
  }
  #cabecalho .menu.superior .nivel-um > li {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    float: none !important;
    clear: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }
  #cabecalho .menu.superior .nivel-um > li > a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
  }
  /* Prevalece o último ajuste do código original: cápsula de 38px. */
  #cabecalho .menu.superior .nivel-um > li > a > strong.titulo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 15px !important;
    background: #FFFFFF !important;
    color: #173A28 !important;
    border: 1px solid #DDDDDD !important;
    border-radius: 30px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  #cabecalho .menu.superior .nivel-um > li.ativo > a > strong.titulo {
    background: #006437 !important;
    color: #FFFFFF !important;
    border-color: #006437 !important;
  }

  /* Ocultar somente o ícone de três linhas, sem alterar a busca. */
  .busca-mobile > a.atalho-menu,
  .span8.busca-mobile a.atalho-menu,
  a.atalho-menu.visible-phone,
  a.atalho-menu.botao.principal,
  a[class~="atalho-menu"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  body.pagina-inicial .secao-banners {
    position: relative !important;
    clear: both !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
  }
  body.pagina-inicial .secao-banners .banner.cheio {
    position: relative !important;
    display: block !important;
    width: 92% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    float: none !important;
    border-radius: 12px !important;
  }
  body.pagina-inicial .listagem {
    width: 94% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
  .listagem .titulo-categoria {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  .listagem .nome-produto { font-size: 13px !important; }
  .listagem .preco-promocional { font-size: 19px !important; }
  .listagem .acoes-produto .botao { font-size: 13px !important; }

  #tarja-mobile {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 5px 0 10px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  #tarja-mobile > .conteiner {
    width: 94% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
  }
  #tarja-mobile .banner-tarja {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }
  #tarja-mobile .banner-tarja img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  .scrollToTop, .voltar-topo, .back-to-top, #return-to-top {
    top: 48% !important;
    bottom: auto !important;
    right: 12px !important;
  }
  .tam-whatsapp, .li-whatsapp {
    top: 59% !important;
    bottom: auto !important;
    right: 12px !important;
  }
  .tam-whatsapp {
    width: 54px !important;
    height: 54px !important;
  }
  .tam-whatsapp svg {
    width: 30px !important;
    height: 30px !important;
  }
}

/* 11. ACESSIBILIDADE ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .listagem .listagem-item,
  .listagem .listagem-item:hover {
    transition: none !important;
    transform: none !important;
  }
}

/* FIM - TAM ALIMENTOS CSS V7 */

/* TARJA DE CATEGORIAS */
.banner.tarja-categorias,
.tarja-categorias {
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px auto 20px auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 14px !important;
}

/* IMAGEM DA TARJA */
.banner.tarja-categorias img,
.tarja-categorias img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  max-height: 120px !important; /* ajuste aqui */
  object-fit: contain !important;
}

/* ==========================================
   TAM ALIMENTOS - CORES DO RODAPÉ
   ========================================== */

/* Fundo principal do rodapé */
#rodape,
#rodape .institucional {
  background-color: #F8F8F8 !important;
}

/* Títulos: Conteúdos, Categorias e Selos */
#rodape .institucional .titulo,
#rodape .institucional h3,
#rodape .institucional h4 {
  color: #006437 !important;
  font-weight: 600 !important;
}

/* Links do rodapé */
#rodape .institucional a,
#rodape .institucional .links-rodape a,
#rodape .institucional li a {
  color: #173A28 !important;
  text-decoration: none !important;
}

/* Efeito ao passar o mouse */
#rodape .institucional a:hover {
  color: #006437 !important;
}

/* Textos informativos */
#rodape .institucional p,
#rodape .institucional span,
#rodape .institucional li {
  color: #173A28 !important;
}

/* Direitos reservados e informações da empresa */
#rodape .pagamento-selos + div,
#rodape .direitos,
#rodape .copyright {
  color: #173A28 !important;
}

/* Linhas divisórias */
#rodape .institucional .titulo {
  border-bottom-color: #006437 !important;
}



/* TAM ALIMENTOS
   REMOVER FAIXA TRANSPARENTE NO MOBILE */

@media screen and (max-width: 767px) {
  #avisoCookies {
    display: none !important;
  }
}

/* =========================================
   TAM ALIMENTOS - TARJA ACEITAMOS PIX
   VERDE UNIFORME
========================================= */

.barra-frase,
.barra-frase > .conteiner,
.barra-frase .conteiner {
    background-color: #004530 !important;
    background-image: none !important;
}

/* Remove fundos dos elementos internos */
.barra-frase .conteiner > div,
.barra-frase .conteiner > span,
.barra-frase .conteiner > p {
    background-color: transparent !important;
}

/* Mantém os textos brancos */
.barra-frase,
.barra-frase .conteiner,
.barra-frase .conteiner span,
.barra-frase .conteiner p {
    color: #FFFFFF !important;
}

/* ==========================================
   TAM ALIMENTOS
   BOTÃO TOPO PRÓXIMO AO WHATSAPP
   SOMENTE MOBILE
========================================== */

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

  a.scrollToTop,
  .scrollToTop {

    position: fixed !important;

    /* Remove o posicionamento anterior */
    top: auto !important;

    /* Coloca próximo ao WhatsApp */
    bottom: 105px !important;

    /* Alinha à direita */
    right: 16px !important;
    left: auto !important;

    z-index: 9998 !important;
  }

}

/* ============================================================
   NARDER | PALETA DE CORES
   Aplicar ao FINAL do CSS existente.
   Bege principal: #E0CFBF
   Bege suave:     #EFE0D1
   Fundo claro:    #FAF6F2
   Marrom:         #70513D
   Marrom escuro:  #49382D
   Branco:         #FFFFFF
   Mantém estrutura, fontes, medidas e comportamentos originais.
   ============================================================ */
/* 01. BASE E CABEÇALHO --------------------------------------- */
body {
  background: #f7f7f7 !important;
  color: #49382D;
}
#cabecalho,
#cabecalho .menu.superior {
  background: #FFFFFF !important;
}
#cabecalho .busca input,
#cabecalho .busca-mobile input {
  background: #f7f7f7 !important;
  border-color: #E0CFBF !important;
}
/* 02. CATEGORIAS - ESTILO CÁPSULA ----------------------------- */
#cabecalho .menu.superior .nivel-um > li > a > strong.titulo {
  background: #EFE0D1 !important;
  color: #49382D !important;
  border-color: #E0CFBF !important;
}
#cabecalho .menu.superior .nivel-um > li.ativo > a > strong.titulo,
#cabecalho .menu.superior .nivel-um > li:hover > a > strong.titulo {
  background: #d8c5b5 !important;
  color: #FFFFFF !important;
  border-color: #d8c5b5 !important;
}
/* 03. CARDS DA VITRINE --------------------------------------- */
.listagem .listagem-item {
  background: #FFFFFF !important;
  border-color: #E0CFBF !important;
  box-shadow: 0 4px 15px rgba(73, 56, 45, 0.05) !important;
}
/* 04. INFORMAÇÕES E PREÇOS ----------------------------------- */
.listagem .listagem-item .info-produto {
  background: #FFFFFF !important;
}
.listagem .nome-produto,
.listagem .titulo-categoria {
  color: #49382D !important;
}
.listagem .preco-promocional {
  color: #d8c5b5 !important;
}
/* 05. BOTÕES COMPRAR ----------------------------------------- */
.listagem .listagem-item .acoes-produto {
  background: #FFFFFF !important;
  background-image: none !important;
}
.listagem .listagem-item .acoes-produto a.botao,
.listagem .listagem-item .acoes-produto button,
.listagem .listagem-item .acoes-produto .botao.principal,
.listagem .listagem-item .acoes-produto .botao-comprar,
.listagem .listagem-item a.botao-comprar,
.listagem .listagem-item .botao.principal {
  background: #d8c5b5 !important;
  background-color: #d8c5b5 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  border-color: #d8c5b5 !important;
}
.listagem .listagem-item .acoes-produto a span,
.listagem .listagem-item .acoes-produto a strong,
.listagem .listagem-item .acoes-produto a i,
.listagem .listagem-item .botao-comprar span {
  color: #FFFFFF !important;
}
/* 06. BOTÃO FLUTUANTE ---------------------------------------- */
/* Nome da classe original preservado. */
.tam-whatsapp {
  background: #d8c5b5 !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  box-shadow: 0 5px 18px rgba(73, 56, 45, 0.22) !important;
}
.tam-whatsapp svg {
  color: #FFFFFF !important;
  fill: currentColor !important;
}
.tam-whatsapp:hover {
  background: #49382D !important;
}
/* 07. DESKTOP E TABLET --------------------------------------- */
@media screen and (min-width: 768px) {
  #cabecalho {
    background: linear-gradient(
      to bottom,
      #FFFFFF calc(100% - 90px),
      #f7f7f78 calc(100% - 90px)
    ) !important;
  }
  #cabecalho .menu.superior,
  #cabecalho .menu.superior .nivel-um {
    background: transparent !important;
    background-image: none !important;
  }
  .listagem .listagem-item:hover {
    box-shadow: 0 8px 24px rgba(73, 56, 45, 0.10) !important;
  }
  .listagem .listagem-item .acoes-produto a.botao:hover,
  .listagem .listagem-item .acoes-produto button:hover {
    background: #49382D !important;
    border-color: #49382D !important;
    color: #FFFFFF !important;
  }
}
/* 08. MOBILE ------------------------------------------------- */
@media screen and (max-width: 767px) {
  #cabecalho {
    background: linear-gradient(
      to bottom,
      #FFFFFF calc(100% - 58px),
      #f7f7f7 calc(#f7f7f7100% - 58px)
    ) !important;
  }
  #cabecalho .menu.superior,
  #cabecalho .menu.superior .nivel-um {
    background: transparent !important;
    background-image: none !important;
  }
  #cabecalho .busca-mobile .busca.borda-alpha input {
    background: #f7f7f7 !important;
    border-color: #E0CFBF !important;
  }
  #cabecalho .menu.superior .nivel-um > li > a > strong.titulo {
    background: #EFE0D1 !important;
    color: #d8c5b5 !important;
    border-color: #f7f7f7!important;
  }
  #cabecalho .menu.superior .nivel-um > li.ativo > a > strong.titulo,
  #cabecalho .menu.superior .nivel-um > li:hover > a > strong.titulo {
    background: #d8c5b5 !important;
    color: #FFFFFF !important;
    border-color: #d8c5b5 !important;
  }
}
/* 09. CORES DO RODAPÉ ---------------------------------------- */
#rodape,
#rodape .institucional {
  background-color: #FFFFFF !important;
}
#rodape .institucional .titulo,
#rodape .institucional h3,
#rodape .institucional h4 {
  color: #70513D !important;
}
#rodape .institucional a,
#rodape .institucional .links-rodape a,
#rodape .institucional li a {
  color: #d8c5b5 !important;
}
#rodape .institucional a:hover {
  color: #d8c5b5 !important;
}
#rodape .institucional p,
#rodape .institucional span,
#rodape .institucional li {
  color: #d8c5b5 !important;
}
#rodape .pagamento-selos + div,
#rodape .direitos,
#rodape .copyright {
  color: #d8c5b5 !important;
}
#rodape .institucional .titulo {
  border-bottom-color: #d8c5b5 !important;
}
/* 10. TARJA ACEITAMOS PIX ------------------------------------ */
.barra-frase,
.barra-frase > .conteiner,
.barra-frase .conteiner {
  background-color: #d8c5b5 !important;
  background-image: none !important;
}
.barra-frase .conteiner > div,
.barra-frase .conteiner > span,
.barra-frase .conteiner > p {
  background-color: transparent !important;
}
.barra-frase,
.barra-frase .conteiner,
.barra-frase .conteiner span,
.barra-frase .conteiner p {
  color: #FFFFFF !important;
}
/* FIM - PALETA NARDER */