/* ==========================================================================
   product-grid — 모바일 1열 → 2열 → 데스크톱 4열
   ========================================================================== */

/* 모바일에서도 두 칸 `[2026-09-18]`.
   한 칸이면 카드 하나가 화면을 꽉 채워, 17종을 훑는 데 스크롤이 너무 길었다 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* 제품 목록만 양옆을 좁힌다 `[2026-09-18]`.
   한 줄에 둘씩 들어가면서 화면 기본 여백(20px)이 카드 폭을 갉아먹었다.
   다른 구역(글 읽는 자리)은 20px 그대로 둔다 — 글자가 화면 끝에 붙으면 읽기 어렵다 */
@media (max-width: 559px) {
  .product-grid {
    margin-inline: calc(var(--sp-3) - var(--gutter));
  }
}

@media (min-width: 560px)  { .product-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 37px; }
}