/* Card vertical — independent image-first tile presentation. */
.catalog-grid--grid {
  display: grid;
  /* Desktop largo: seis cards maiores e uniformes por linha. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.catalog-grid--grid > * {
  min-width: 0;
}

.pcard--vertical {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pcard--vertical .pcard-product-link {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pcard--vertical .pcard-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 230px;
}

/* A foto preenche toda a área reservada (leve zoom, sem faixas em volta).
   O 1% a mais faz a foto passar um pouco da borda: durante as animações de hover
   (card subindo, foto aproximando), frações de pixel não deixam aparecer o fundo
   da área (#f2f2f2 no tema escuro) como uma linha clara. */
.pcard--vertical .pcard-img img {
  padding: 0;
  object-fit: cover;
  transform: translate(var(--product-image-x, 0), var(--product-image-y, 0)) scale(calc(var(--product-image-scale, 1) * 1.01));
}

.pcard--vertical .pcard-info {
  min-height: 112px;
  padding: 16px 16px 14px;
  text-align: center;
  align-items: center;
}

.pcard--vertical .pcard-code {
  font-size: 24.2px;
}

.pcard--vertical .pcard-colors-section {
  width: 100%;
  margin-top: 12px;
  padding-top: 8px;
}

.pcard--vertical .pcard-spec-section {
  padding-top: 12px;
}

.pcard--vertical .pcard-fav {
  right: 12px;
  left: auto;
}

/* Mantem os cards inteiros quando a janela desktop fica menor. */
@media (max-width: 1640px) {
  .catalog-grid--grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1370px) {
  .catalog-grid--grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1120px) {
  .catalog-grid--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}