/* Quantum — responsive hardening.
   Loaded LAST on every page so it augments (never rewrites) the per-page CSS.
   Targets: iPhone / Android phones, iPad portrait+landscape, MacBook Pro and any laptop/desktop.
   Scope is deliberately narrow: content media + known layout containers only,
   so full-bleed background videos (intro tunnel, hero) are never touched. */

/* Kill horizontal scrolling on every device */
html, body { max-width: 100%; overflow-x: hidden; }

/* Every content media stays inside its frame and scales with the viewport.
   (Background/cover videos already use width:100%/height:100% + object-fit:cover.) */
.shop-card-media video,
.product-media video, .product-media img,
.wavevid-frame video,
.vcard video, .vcard img,
.card video, .card img,
.work-card video, .work-card img { max-width: 100%; }

/* ---- iPad landscape and small laptops (≤1024px) ---- */
@media (max-width: 1024px){
  .shop-grid{ margin-top: -3cm; }           /* soften the desktop pull-up so cards don't collide with the hero */
}

/* ---- iPad portrait / large phones (≤900px) ---- */
@media (max-width: 900px){
  .shop-grid{ margin-top: 0; }              /* remove the pull-up entirely — no overlap on narrow screens */
  .shop-card.featured{ grid-template-columns: 1fr; }
  .shop-card.featured .shop-card-media{ min-height: 220px; }
}

/* ---- Phones (≤600px) ---- */
@media (max-width: 600px){
  .shop-grid{ margin-top: 0; padding: 24px 16px 70px; gap: 20px; }
  .wrap-narrow{ padding: 0 16px; }
  .shop-card-media{ aspect-ratio: 16/10; }
  .wavevid{ padding: 28px 16px 8px; }
}

/* ---- Small phones (iPhone SE / mini, ≤380px) ---- */
@media (max-width: 380px){
  .shop-card-cta, .product-cta, .product-back{ font-size: .82rem; }
  .wrap-narrow{ padding: 0 12px; }
}