/* A GRADE DE CARTOES DAS PAGINAS DE INDICE DE PRODUTO.
 *
 * Usada por `/pilares-produtos/` e `/lajes-produtos/`, que sao as duas telas
 * que listam subprodutos. Morava so em `pilares-produtos/styles.css` porque
 * so pilares tinha indice. Quando lajes ganhou o seu, em 29/09/2026, a saida
 * era copiar o bloco ou tira-lo daqui - e copia de CSS envelhece torto.
 *
 * `.calculation-state` NAO veio junto: ela dividia a declaracao com
 * `.product-picker span` mas pertence as telas de produto, nao ao indice. */

.product-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  width: min(1420px, calc(100% - 48px));
  margin: -30px auto 60px;
}

.product-picker a {
  display: grid;
  gap: 10px;
  min-height: 210px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: white;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
}

.product-picker span {
  display: inline-flex;
  width: max-content;
  align-items: center;
  border-radius: 999px;
  background: #eef8f4;
  color: var(--blue);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .08em;
  padding: 6px 9px;
}

.product-picker strong { color: var(--navy); font-size: 19px; line-height: 1.12; }
.product-picker small { color: var(--muted); font-size: 12px; line-height: 1.55; }

@media (max-width: 760px) {
  .product-picker { width: auto; grid-template-columns: 1fr; margin-inline: 24px; }
}