/* === Grid === */
.mg-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--mg-space-6);
}
@media (max-width: 900px) {
  .mg-product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--mg-space-5); }
}
@media (max-width: 540px) {
  .mg-product-grid { grid-template-columns: 1fr; }
}

/* === Card === */
.mg-product {
  display: flex;
  flex-direction: column;
  background: var(--mg-bg);
  border: 1px solid var(--mg-color-border);
  border-radius: var(--mg-radius-lg);
  overflow: hidden;
  transition:
    transform   var(--mg-transition),
    box-shadow  var(--mg-transition),
    border-color var(--mg-transition);
}
.mg-product:hover {
  transform: translateY(-2px);
  box-shadow: var(--mg-shadow-md);
  border-color: color-mix(in srgb, var(--mg-color-border) 40%, var(--mg-color-accent));
}

.mg-product__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--mg-color-surface);
  overflow: hidden;
  display: block;
}
button.mg-product__image { cursor: zoom-in; }
.mg-product__image--empty { cursor: default; }
.mg-product__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--mg-space-5);
  transition: transform var(--mg-transition-slow);
}
.mg-product:hover .mg-product__image img { transform: scale(1.04); }

.mg-product__no-image {
  display: block;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(135deg, transparent 49.5%, var(--mg-color-border) 49.5% 50.5%, transparent 50.5%),
    var(--mg-color-surface);
}

.mg-product__body {
  display: flex;
  flex-direction: column;
  gap: var(--mg-space-2);
  padding: var(--mg-space-4) var(--mg-space-5) var(--mg-space-5);
  flex: 1;
}

.mg-product__brand {
  font-family: var(--mg-font-heading);
  font-size: var(--mg-text-xs);
  font-weight: var(--mg-weight-semibold);
  letter-spacing: var(--mg-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mg-color-gold);
  margin: 0;
}
.mg-product__title {
  font-size: var(--mg-text-md);
  font-weight: var(--mg-weight-semibold);
  color: var(--mg-color-primary);
  line-height: 1.35;
  margin: 0;
}
.mg-product__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-2);
  margin-top: var(--mg-space-2);
}
.mg-product__chips li {
  background: var(--mg-color-surface);
  border: 1px solid var(--mg-color-border);
  border-radius: var(--mg-radius-pill);
  padding: 2px var(--mg-space-3);
  font-size: var(--mg-text-xs);
  color: var(--mg-fg-muted);
  font-weight: var(--mg-weight-medium);
}
.mg-product__chips li.is-more {
  background: transparent;
  color: var(--mg-color-accent);
  border-color: transparent;
  padding-inline: 0;
}

/* === Pagination === */
.pagination .nav-links,
.navigation.pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: var(--mg-space-2);
  margin-top: var(--mg-space-7);
  flex-wrap: wrap;
}
.nav-links .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: var(--mg-space-3);
  border: 1px solid var(--mg-color-border);
  border-radius: var(--mg-radius-md);
  font-family: var(--mg-font-heading);
  font-weight: var(--mg-weight-medium);
  color: var(--mg-color-primary);
  transition: background var(--mg-transition), border-color var(--mg-transition), color var(--mg-transition);
}
.nav-links .page-numbers:hover { background: var(--mg-color-surface); }
.nav-links .page-numbers.current {
  background: var(--mg-color-primary);
  color: var(--mg-color-on-dark);
  border-color: var(--mg-color-primary);
}
.nav-links .page-numbers.dots { border-color: transparent; }

/* The brand label leads to that brand's archive */
.mg-product__brand a {
  color: inherit;
  text-decoration: none;
}
.mg-product__brand a:hover,
.mg-product__brand a:focus-visible {
  color: var(--mg-color-accent);
  text-decoration: underline;
}

/* Per-product inquiry button.
   `margin-top: auto` pins it to the foot of the card, so a row of cards keeps
   its buttons on one line however long the product names run. */
.mg-product__inquire {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mg-space-2);
  margin-top: auto;
  padding: 10px var(--mg-space-4);
  font-size: var(--mg-text-sm);
  font-weight: var(--mg-weight-semibold);
  color: var(--mg-color-on-dark);
  text-decoration: none;
  background: var(--mg-color-whatsapp);
  border-radius: var(--mg-radius-md);
  transition: background var(--mg-transition);
}
.mg-product__inquire > svg { flex: none; }
.mg-product__inquire:hover,
.mg-product__inquire:focus-visible {
  color: var(--mg-color-on-dark);
  background: color-mix(in srgb, var(--mg-color-whatsapp) 85%, black);
}
/* The chips sit directly above, so keep a little air even when they wrap. */
.mg-product__chips + .mg-product__inquire { margin-top: var(--mg-space-4); }