/* Shared responsive guardrails for customer-facing pages. */
html { min-width: 320px; -webkit-text-size-adjust: 100%; }
body { min-width: 320px; overflow-x: clip; }
img, video, canvas, iframe { max-inline-size: 100%; }
picture, main, section, article, aside, form { min-width: 0; }
input, select, textarea, button { max-width: 100%; }

/* Give large desktop and curved displays more usable room without stretching text indefinitely. */
@media (min-width: 1920px) {
  .container { max-width: min(1680px, calc(100% - 128px)); }
  .store-site-header .container { max-width: min(1760px, calc(100% - 128px)); }
  .shop-catalog-page .shop-page { max-width: min(1760px, calc(100% - 96px)); }
  .pdp-container { max-width: min(1680px, calc(100% - 96px)); }
}

/* Keep the product detail comfortable on portrait tablets before switching to phone rules. */
@media (min-width: 761px) and (max-width: 900px) {
  .product-page .product-detail-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .product-page .gallery-main { height: clamp(360px, 64vw, 560px); }
  .pdp-gallery-sticky { position: static; }
}

@media (max-width: 760px) {
  .container { padding-inline: 16px; }
  .shop-catalog-page .shop-page { width: 100%; max-width: 100%; padding-inline: 16px; }
  .pdp-container { width: 100%; max-width: 100%; padding-inline: 18px; }
  .store-site-header .container { padding-inline: 16px; }
}

@media (max-width: 380px) {
  .shop-catalog-page .shop-page, .pdp-container { padding-inline: 14px; }
}