/* ------------------------------------------------------------------
   Ajustes do site novo, por cima do template OneUI 3.
   Arquivo próprio de propósito: o oneui.css é do template e um dia
   pode ser trocado por uma versão nova. O que é nosso fica aqui.
   ------------------------------------------------------------------ */

/* Grade de produtos com cards de altura igual.

   O Bootstrap 3 monta colunas com float. Quando uma fica mais alta que
   as outras, ela prende as de baixo e abre um buraco na grade - foi o
   que aconteceu na home em 04/09/2026, com o "Sacos Transparentes"
   subindo para o vão deixado pelo card ao lado.

   Flexbox na linha faz todos os cards da mesma fileira terem a altura
   do mais alto. As três regras seguintes fixam as duas coisas que
   variam de card para card: a altura do cabeçalho (nome do produto com
   uma ou duas linhas) e a altura da foto (cada produto tem uma
   proporção diferente). */

.grade-produtos {
    display: flex;
    flex-wrap: wrap;
}

.grade-produtos > [class*="col-"] {
    display: flex;
    margin-bottom: 20px;
}

.grade-produtos > [class*="col-"] > .block {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
}

/* Cabeçalho: altura de duas linhas sempre, com o texto centralizado no
   meio. Assim o nome curto e o nome longo começam a foto na mesma
   altura. */
.grade-produtos .block-header {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grade-produtos .block-header .block-title {
    margin: 0;
    line-height: 1.3;
}

/* Caixa da foto: altura fixa, imagem centralizada e limitada por
   altura em vez de largura - é o que faz uma foto quadrada e uma
   deitada ocuparem o mesmo espaço. */
.grade-produtos .caixa-foto {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}

.grade-produtos .caixa-foto img {
    max-height: 140px;
    max-width: 100%;
    width: auto;
}

/* Empurra o bloco do botão para o rodapé do card, para os botões de
   toda a fileira ficarem na mesma linha. */
.grade-produtos .rodape-card {
    margin-top: auto;
}