/**
 * 関連商品セクション（タクソノミー連携）のグリッド器。
 * 各カードは mga-box（商品ボックス）を再利用するため、ここではレイアウトのみ定義する。
 * 色は極力ニュートラル + フォールバック付き（フロントに管理トークンが無くても崩れない）。
 */
.mg-related-products {
  margin: 2rem 0;
}

.mg-related-products__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--mg-color-primary, #2271b1);
}

.mg-related-products__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* カードは器いっぱいに伸ばして高さを揃える */
.mg-related-products__item {
  min-width: 0;
}

.mg-related-products__item .mga-box {
  height: 100%;
  margin: 0;
}

/* タブレット以上で列化（data-cols で 2〜4 列。狭い端末は常に 1 列） */
@media (min-width: 600px) {
  .mg-related-products[data-cols="2"] .mg-related-products__grid,
  .mg-related-products[data-cols="4"] .mg-related-products__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mg-related-products[data-cols="3"] .mg-related-products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .mg-related-products[data-cols="3"] .mg-related-products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mg-related-products[data-cols="4"] .mg-related-products__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}