/*
 * Chinese product-card responsive layout v1 · 2026-07-28
 *
 * Preserve a visible content gutter on listing pages, keep two tablet columns
 * through 680px, then center a bounded single card on narrower screens.
 */

.container.page:has(.product-grid) {
  padding-right: var(--page-pad);
  padding-left: var(--page-pad);
}

@media (max-width: 734px) {
  html body main .section.container:has(> .product-grid),
  html body .container.page:has(.product-grid) {
    padding-right: 20px;
    padding-left: 20px;
  }

  html body .container > .product-grid {
    gap: 22px;
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (min-width: 680px) and (max-width: 734px) {
  html body .container > .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  html body .container > .product-grid .product-card {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 679px) {
  html body .container > .product-grid {
    grid-template-columns: 1fr;
  }

  html body .container > .product-grid .product-card {
    width: min(100%, 520px);
    justify-self: center;
  }
}