/*
 * Produtos relacionados manual - Bibu Boutique (Loja Integrada)
 * -------------------------------------------------------------
 * Estilos do bloco #relacionados-custom.
 * Cores continuam herdadas do tema (classes cor-principal, cor-secundaria,
 * botao-comprar principal, fundo-principal). Nada de hex aqui.
 */

#relacionados-custom {
  margin-top: 30px;
  clear: both;
  text-align: center; /* centraliza título e conteúdo do bloco na página */
}

#relacionados-custom > ul {
  margin: 0;
}

#relacionados-custom .listagem-linha {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Grid flex: 4 por linha, cards de mesma altura, centralizados */
#relacionados-custom ul.row-fluid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

#relacionados-custom li.span3 {
  box-sizing: border-box;
  float: none;
  list-style: none;
  display: flex;
  flex: 1 1 0;      /* divide o espaço igualmente -> evita quebra do 4º card */
  min-width: 0;
  margin: 0;
  padding: 0 8px;
}

#relacionados-custom .listagem-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 15px;
}

/* Corrige o position:absolute nativo e limita o tamanho da imagem */
#relacionados-custom .imagem-produto {
  position: relative;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

#relacionados-custom .imagem-produto img {
  position: static !important;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Info ocupa o espaço livre; nome e preço centralizados */
#relacionados-custom .info-produto {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#relacionados-custom .nome-produto,
#relacionados-custom .preco-produto {
  text-align: center;
  width: 100%;
}

/* Preço na base do bloco de info e botões alinhados na base do card */
#relacionados-custom .info-produto .preco-produto {
  margin-top: auto;
}

#relacionados-custom .acoes-produto,
#relacionados-custom .acoes-produto-responsiva {
  margin-top: auto;
}

#relacionados-custom .titulo {
  text-align: center;
}

/* Responsivo */
@media (max-width: 768px) {
  #relacionados-custom li.span3 { flex: 0 0 50%; }
}

@media (max-width: 480px) {
  #relacionados-custom li.span3 { flex: 0 0 100%; }
}