/* ============================================================
   RODAPÉ + BANNER INSTITUCIONAL — versão única consolidada
   ============================================================ */

/* ============================================================
   1. BASE — CELULAR (e ponto de partida para tudo)
   ============================================================ */

/* ---- Banner institucional no fim da listagem ---- */
html body.pagina-inicial #listagemProdutos:after {
  display: block !important;
  width: 92% !important;
  max-width: 92% !important;
  height: 64px !important;
  margin: 10px auto 12px !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* ---- Faixa institucional ---- */
html body #rodape .institucional {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 6px 14px 0 !important;
  background: #FBF7F4 !important;
}

/* Contêiner e colunas do Bootstrap 2 viram blocos de largura total */
html body #rodape .institucional .conteiner,
html body #rodape .institucional .conteiner > .row-fluid,
html body #rodape .institucional .conteiner > .row-fluid > .span9,
html body #rodape .institucional .span9 > .row-fluid {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Blocos ocultos no rodapé (em qualquer tela) */
html body #rodape .institucional .conteiner .row-fluid .span3,
html body #rodape .contato-ev,
html body #rodape .sobre-loja-rodape img,
html body #rodape .sobre-loja-rodape .logo,
html body #rodape .odge-rodape img,
html body #rodape .odge-rodape .logo,
html body #rodape .odge-rodape .logorodape {
  display: none !important;
}

/* Ocultos APENAS no celular (reativados no bloco desktop) */
html body #rodape .sobre-loja-rodape,
html body #rodape .institucional .visible-phone {
  display: none !important;
}

/* Colunas visíveis no celular: empilhadas e centralizadas */
html body #rodape .redes-sociais,
html body #rodape .pagamento,
html body #rodape .selos {
  display: block !important;
  float: none !important;
  width: 100% !important;
  max-width: 330px !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 auto 4px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* Títulos das colunas */
html body #rodape .institucional .titulo,
html body #rodape .redes-sociais .titulo {
  margin: 0 0 3px !important;
  padding: 0 !important;
  font-size: 11px !important;
  line-height: 15px !important;
  text-align: center !important;
}

/* Textos e links */
html body #rodape .institucional li,
html body #rodape .institucional a,
html body #rodape .sobre-loja-rodape p:after {
  font-size: 10px !important;
  line-height: 14px !important;
}

/* Listas de pagamento e selos */
html body #rodape .pagamento ul,
html body #rodape .selos ul {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body #rodape .pagamento li {
  display: inline-block !important;
  float: none !important;
  width: auto !important;
  margin: 0 4px 4px !important;
  vertical-align: middle !important;
}

html body #rodape .selos img {
  width: auto !important;
  max-width: 100px !important;
  height: auto !important;
}

/* ---- Barra de créditos do tema ---- */
html body #rodape .odge-rodape,
html body #rodape .odge-rodape .conteiner,
html body #rodape .odge-rodape .direitos,
html body #rodape .odge-rodape .direitos > div {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 2px 8px !important;
  border: 0 !important;
  background: #FBF7F4 !important;
  text-align: center !important;
}

html body #rodape .odge-rodape p,
html body #rodape .odge-rodape .direitos p {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 8px !important;
  line-height: 11px !important;
}

/* Remove sombra/borda residual do rodapé */
html body #rodape,
html body #rodape > div,
html body #rodape > section {
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ---- Logo do cabeçalho (mobile) ---- */
@media screen and (max-width: 767px) {
  #cabecalho .logo {
    height: 36px !important;
    max-height: 36px !important;
    margin: 6px auto !important;
  }
}

/* ---- Banner institucional (Fabricação Própria / Estoque etc.) — mobile ---- */
@media screen and (max-width: 767px) {
  html body div.amb-institucional-final picture,
  html body div.amb-institucional-final img {
    width: 100% !important;
    height: 140px !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #FBF7F4 !important;
  }
}


/* ============================================================
   2. DESKTOP E TABLET — a partir de 768px
   ============================================================ */

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

  /* ---- Banner institucional maior (fim da listagem) ---- */
  html body.pagina-inicial #listagemProdutos:after {
    width: 820px !important;
    max-width: 88% !important;
    height: 92px !important;
    margin: 14px auto 20px !important;
  }

  /* ---- Faixa institucional ---- */
  html body #rodape .institucional {
    padding: 12px 0 8px !important;
  }

  html body #rodape .institucional .conteiner {
    width: 100% !important;
    max-width: 945px !important;
    margin: 0 auto !important;
  }

  html body #rodape .institucional .span9 > .row-fluid {
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    -webkit-justify-content: space-between !important;
    justify-content: space-between !important;
    -webkit-align-items: flex-start !important;
    align-items: flex-start !important;
  }

  html body #rodape .sobre-loja-rodape,
  html body #rodape .institucional .visible-phone,
  html body #rodape .redes-sociais,
  html body #rodape .pagamento,
  html body #rodape .selos {
    display: block !important;
    position: static !important;
    float: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  html body #rodape .sobre-loja-rodape {
    -webkit-order: 1 !important;
    order: 1 !important;
    width: 23% !important;
    margin: 0 2% 0 0 !important;
  }

  html body #rodape .institucional .visible-phone {
    -webkit-order: 2 !important;
    order: 2 !important;
    width: 23% !important;
    margin: 0 2% 0 0 !important;
  }

  html body #rodape .redes-sociais {
    -webkit-order: 3 !important;
    order: 3 !important;
    width: 12% !important;
    max-width: none !important;
    margin: 0 2% 0 0 !important;
  }

  html body #rodape .pagamento {
    -webkit-order: 4 !important;
    order: 4 !important;
    width: 18% !important;
    max-width: none !important;
    margin: 0 2% 0 0 !important;
  }

  html body #rodape .selos {
    -webkit-order: 5 !important;
    order: 5 !important;
    width: 16% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body #rodape .institucional .titulo,
  html body #rodape .redes-sociais .titulo {
    margin: 0 0 8px !important;
    padding: 0 0 5px !important;
    line-height: 16px !important;
    text-align: left !important;
  }

  html body #rodape .institucional li,
  html body #rodape .institucional a,
  html body #rodape .sobre-loja-rodape p:after {
    font-size: 11px !important;
    line-height: 16px !important;
  }

  html body #rodape .pagamento li {
    margin: 0 5px 5px 0 !important;
  }

  html body #rodape .selos img {
    max-width: 140px !important;
  }

  html body #rodape .odge-rodape,
  html body #rodape .odge-rodape .conteiner,
  html body #rodape .odge-rodape .direitos,
  html body #rodape .odge-rodape .direitos > div {
    padding: 3px 10px !important;
  }

  html body #rodape .odge-rodape p,
  html body #rodape .odge-rodape .direitos p {
    font-size: 9px !important;
    line-height: 13px !important;
  }

  /* ---- Banner institucional — desktop ---- */
  .amb-institucional-final picture,
  .amb-institucional-final img {
    width: 100% !important;
    height: 190px !important;
  }
}


/* ============================================================
   SELO "PRONTA ENTREGA" nos cards de produto
   ============================================================ */

.listagem-item .preco-produto:after {
  content: "Pronta entrega";
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #5A342B;
  text-transform: uppercase;
}

@media screen and (max-width: 767px) {
  .listagem-item .preco-produto:after {
    font-size: 9px;
    margin-top: 3px;
  }
}


/* ============================================================
   FAIXA DE ESTOQUE (topo, logo abaixo do cabeçalho)
   ============================================================ */

#ambFaixaEstoque {
  background: #5A342B;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .3px;
  padding: 9px 12px;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
  #ambFaixaEstoque {
    font-size: 11px;
    line-height: 15px;
    padding: 7px 10px;
  }
}