/* ===========================
   CTAs — configuração rápida
   =========================== */
:root{
  --cta-h: 38px;         /* altura dos botões (38–44 funciona bem) */
  --cta-r: 10px;         /* raio arredondado */
  --cta-fs: 14px;        /* font-size */
  --cta-gap: 8px;        /* espaço entre ícone e texto */

  --buy: #DB3A61;        /* cor do COMPRAR */
  --buy-glow: 219,58,97; /* mesma cor em RGB para a sombra */

  --wa:  #25d366;        /* cor do WhatsApp */
  --wa-glow: 37,211,102; /* RGB para a sombra do Whats */
}

/* Evita “corte” de sombras/raios */
.listagem-item .acoes-produto.hidden-phone,
.listagem-item .acoes-produto-responsiva.visible-phone{ overflow: visible; }

/* ===========================
   Base comum para TODOS os CTAs
   (comprar desktop + comprar mobile + whatsapp)
   =========================== */
.listagem-item .acoes-produto .botao.botao-comprar.principal,
.listagem-item .acoes-produto-responsiva .tag-comprar,
.acoes-produto .mbg-wa-btn,
.acoes-produto-responsiva .mbg-wa-btn{
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 100%; box-sizing: border-box;
  height: var(--cta-h) !important;        /* força altura */
  min-height: 0 !important;               /* mata min-height do tema */
  padding: 0 16px !important;             /* sem padding vertical extra */
  border-radius: var(--cta-r) !important;
  border: 1px solid transparent;
  text-transform: uppercase;
  font-weight: 700 !important;
  font-size: var(--cta-fs) !important;
  line-height: 1 !important;
  letter-spacing: .02em;
  text-decoration: none !important;
  gap: var(--cta-gap);
  transition: transform .15s ease, box-shadow .15s ease, filter .2s ease, background-color .2s ease, border-color .2s ease;
}

/* ===========================
   COMPRAR — Desktop
   =========================== */
.listagem-item .acoes-produto .botao.botao-comprar.principal{
  background: var(--buy) !important;
  color: #fff !important;
  border-color: var(--buy) !important;
}
.listagem-item .acoes-produto .botao.botao-comprar.principal:hover{
  filter: brightness(.96);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(var(--buy-glow), .22);
}

/* ===========================
   COMPRAR — Mobile
   (o tema usa .tag-comprar com um <span class="titulo"> dentro)
   =========================== */
.listagem-item .acoes-produto-responsiva .tag-comprar{
  background: var(--buy) !important;
  color: #fff !important;
  border-color: var(--buy) !important;
}
.listagem-item .acoes-produto-responsiva .tag-comprar:hover{
  filter: brightness(.96);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(var(--buy-glow), .22);
}
/* normaliza o texto interno para não “engordar” o botão */
.listagem-item .acoes-produto-responsiva .tag-comprar .titulo{
  color:#fff !important;
  padding:0 !important; margin:0 !important;
  font: inherit !important;
  text-transform: inherit !important;
  line-height: 1 !important;
}

/* ===========================
   WHATSAPP — Desktop & Mobile
   =========================== */
.acoes-produto .mbg-wa-btn,
.acoes-produto-responsiva .mbg-wa-btn{
  background: var(--wa);
  color: #fff !important;
  border-color: var(--wa);
  margin-top: 8px; /* espaço abaixo do COMPRAR */
}
.acoes-produto .mbg-wa-btn:hover,
.acoes-produto-responsiva .mbg-wa-btn:hover{
  filter: brightness(.95);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(var(--wa-glow), .22);
}
/* ícone do Font Awesome */
.mbg-wa-btn .fa-whatsapp{
  font-size: 15px; line-height: 0; displ





/* O overlay passa a cobrir só a imagem */
.listagem-item .imagem-produto{ position: relative; }
.listagem-item .imagem-produto .produto-sobrepor{
  position: absolute !important;
  left:0; right:0; top:0; bottom:0;
  z-index: 10;
}

/* Ações sempre acima (desktop e mobile) */
.listagem-item .acoes-produto,
.listagem-item .acoes-produto-responsiva{
  position: relative;
  z-index: 20;
}

/* Compacta o espaço título x preço (opcional) */
.listagem-item .info-produto .nome-produto{ margin-bottom:6px !important; }
.listagem-item .preco-produto{ margin-top:0 !important; }



/* Vitrine (cards): força tamanhos do bloco de preço */
.listagem-item .info-produto .preco-produto { line-height:1.25 !important; }

/* "De:" riscado */
.listagem-item .info-produto .preco-produto s.preco-venda,
.listagem-item .info-produto .preco-produto .preco-venda{
  font-size:14px !important;
}

/* "por:" atual (inclui variação com .titulo) */
.listagem-item .info-produto .preco-produto strong.preco-promocional,
.listagem-item .info-produto .preco-produto .preco-promocional,
.listagem-item .info-produto .preco-produto .preco-promocional.titulo{
  font-size:19px !important;
  font-weight:800 !important;
}

/* parcelas */
.listagem-item .info-produto .preco-parcela{
  font-size:14px !important;
}





/* === Título da PDP (principal e barra flutuante) === */
body[class*="produto"] .info-principal-produto h1,
body[class*="produto"] .info-principal-produto h1.nome-produto,
body[class*="produto"] .info-principal-produto .nome-produto.titulo,
body[class*="produto"] h1.nome-produto,
body[class*="produto"] h1.nome-produto a,
body[class*="produto"] .acoes-flutuante .nome-produto.titulo{
  color:#DB3A61 !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
}

/* === Descrição: remover sombra/borda/fundo === */
body[class*="produto"] .abas-custom,
body[class*="produto"] .abas-custom .tab-content,
body[class*="produto"] .abas-custom .tab-pane,
body[class*="produto"] #descricao,
body[class*="produto"] #descricao .borda-alpha,
body[class*="produto"] [id*="descricao"],
body[class*="produto"] [class*="descricao"]{
  box-shadow:none !important;
  -webkit-box-shadow:none !important;
  border:0 !important;
  background:transparent !important;
}



/* 1) Override específico (varias variações: conteiner / container, page class, pseudo-elements) */
body.pagina-inicial.tema-transparente .conteiner-principal .conteiner,
body.pagina-inicial.tema-transparente .container-principal .container,
.conteiner-principal .conteiner,
.container-principal .container,
#cabecalho .conteiner,
#cabecalho .container,
#cabecalho,
#cabecalho * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  filter: none !important;
  background-image: none !important;
  background: transparent !important;
  border-bottom: none !important;
}

/* pseudo-elementos */
#cabecalho *::before,
#cabecalho *::after,
.conteiner-principal .conteiner::before,
.conteiner-principal .conteiner::after,
.container-principal .container::before,
.container-principal .container::after {
  box-shadow: none !important;
  filter: none !important;
}

/* regra de contingência para mobile */
@media (max-width: 1024px) {
  #cabecalho, #cabecalho * {
    box-shadow: none !important;
    filter: none !important;
    background: transparent !important;
  }
}


#corpo .titulo-center{ text-align:center !important; }
#corpo .titulo-center::after{ left:50%; transform:translateX(-50%); }

@media screen and (max-width: 767px) {
  .listagem .listagem-item {
    height: auto !important;
    min-height: 480px !important; /* ajuste conforme necessário */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .listagem-item .info-produto {
    flex-grow: 1 !important;
  }

  .listagem-item-acoes-produto {
    margin-top: auto !important;
  }
}