/* =========================
   GRID DA VITRINE – v9
   (repara itens lado a lado sem alterar HTML)
   ========================= */

/* 1) Contêineres de lista de produtos: liga flex com quebra */
.listagem,
.products,
.lista-produtos,
.vitrine,
.product-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;           /* espaçamento entre cards */
  align-items: stretch !important;
}

/* 2) Seleciona os CARDS dentro desses contêineres */
.listagem .produto,
.products .product,
.lista-produtos > li,
.product-list > li,
.vitrine .produto {
  box-sizing: border-box !important;
  float: none !important;         /* se o tema usa float, desliga */
  margin: 0 !important;           /* gap controla o espaçamento */
  display: block !important;
  /* Larguras responsivas */
  flex: 0 0 calc(25% - 16px) !important;   /* desktop: 4 por linha */
  max-width: calc(25% - 16px) !important;
}

/* 3) Breakpoints para tablets e celulares */
@media (max-width: 1199px){
  .listagem .produto,
  .products .product,
  .lista-produtos > li,
  .product-list > li,
  .vitrine .produto{
    flex: 0 0 calc(33.333% - 16px) !important;   /* 3 por linha */
    max-width: calc(33.333% - 16px) !important;
  }
}
@media (max-width: 991px){
  .listagem .produto,
  .products .product,
  .lista-produtos > li,
  .product-list > li,
  .vitrine .produto{
    flex: 0 0 calc(50% - 16px) !important;       /* 2 por linha */
    max-width: calc(50% - 16px) !important;
  }
}
@media (max-width: 575px){
  .listagem .produto,
  .products .product,
  .lista-produtos > li,
  .product-list > li,
  .vitrine .produto{
    flex: 0 0 100% !important;                   /* 1 por linha */
    max-width: 100% !important;
  }
}

/* 4) Garante que o conteúdo interno do card estique corretamente */
.listagem .produto *,
.products .product *,
.lista-produtos > li *,
.product-list > li *,
.vitrine .produto *{
  max-width: 100%;
}

/* 5) (Opcional) um acabamento leve nos cards — não mexe em cores do tema */
.listagem .produto,
.products .product,
.lista-produtos > li,
.product-list > li,
.vitrine .produto{
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
}