/* Card + imagem com 10px */
#listagemProdutos .listagem-item{
  border-radius: 10px;
  overflow: hidden;
}

#listagemProdutos .listagem-item .imagem-produto{
  border-radius: 10px;
  overflow: hidden; /* extra segurança */
}

#listagemProdutos .listagem-item .imagem-produto .imagem-principal{
  border-radius: 10px;
}
#listagemProdutos .listagem-item .imagem-produto{
  overflow: hidden;
}
/* Título do produto no card */
#listagemProdutos .listagem-item .info-produto .nome-produto{
  display: block;              /* pra padding funcionar direitinho no link */
  font-size: 18px;             /* fonte maior (ajuste se quiser) */
  font-weight: 700;            /* bold */
  color: #ff5bb0 ;   /* cor principal */
  padding: 10px 15px 10px;     /* topo, laterais, baixo */
  line-height: 1.2;
}

/* Mantém a cor no hover/visited também */
#listagemProdutos .listagem-item .info-produto .nome-produto:hover,
#listagemProdutos .listagem-item .info-produto .nome-produto:focus,
#listagemProdutos .listagem-item .info-produto .nome-produto:visited{
  color: #ff5bb0 ;
}
@media (max-width: 767px){
  #listagemProdutos .listagem-item .info-produto .nome-produto{
    font-size: 16px;
  }
}
/* Mobile: reduzir padding do card da listagem */
@media (max-width: 767px){
  .g_ #listagemProdutos.listagem .listagem-item{
    padding: 6px; /* ajuste aqui (ex.: 6px, 8px, etc.) */
  }
}
/* ── Tira o overlay e deixa as ações sempre visíveis ── */
#listagemProdutos .listagem-item .acoes-produto {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between; /* distribui o espaço entre os dois elementos */
  width: 100%;
  padding: 8px 15px 12px;
  box-sizing: border-box; /* garante que o padding não estoura o width */
}

/* ── Garante empilhamento correto no card ── */
#listagemProdutos .listagem-item {
  display: flex;
  flex-direction: column;
}

/* ── Seletor de quantidade ── */
#listagemProdutos .listagem-item .acoes-produto .qtde-adicionar-carrinho {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

/* ── Botão de comprar ocupa largura total ── */
#listagemProdutos .listagem-item .acoes-produto .botao-comprar {
  width: 100%;
  text-align: center;
  border-radius: 8px;
}

/* ── Mobile: mantém o comportamento ── */
@media (max-width: 767px) {
  #listagemProdutos .listagem-item .acoes-produto {
    padding: 6px 10px 10px;
  }
}
@media (max-width: 767px) {
  #listagemProdutos .listagem-linha > ul > li.span3 {
    width: 50% !important;
    float: left !important;
    box-sizing: border-box;
    padding: 4px; /* espaço entre os cards */
  }

  /* Garante que o ul não quebre o float */
  #listagemProdutos .listagem-linha > ul {
    display: flow-root; /* clearfix moderno */
  }
}