/* /assets/css/pages/productos/cards.css */

/* Product grid container. Product cards are owned by design-system.css. */

/* ── Section wrapper ── */

.seccion-categorias {
  padding-block: var(--section-vertical);
  background: transparent;
}

.seccion-categorias .container,
.seccion-categorias .row {
  max-width: var(--container-max);
  padding-inline: var(--container-gutter);
  margin-inline: auto;
}

/* ── Grid ── */

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  max-width: var(--container-max);
  margin-inline: auto;
}

.product-grid:has(.ds-product-card) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
}

/* ── Responsive ── */

@media (max-width: 599.98px) {
  .seccion-categorias {
    padding-block: var(--section-vertical-sm);
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .product-grid:has(.ds-product-card) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

}

@media (min-width: 600px) and (max-width: 767.98px) {
  .seccion-categorias {
    padding-block: var(--section-vertical-sm);
  }

  .product-grid,
  .product-grid:has(.ds-product-card) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .product-grid:has(.ds-product-card) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}