/* ============================================================
   ScanToShop360 — responsive overrides. Loaded LAST so these win the
   cascade over theme/store/admin/pos stylesheets.
   ============================================================ */

/* House rule for intrinsic grids, enforced in the skin/admin sheets rather than
   here: write `minmax(min(280px,100%),1fr)`, never `minmax(280px,1fr)`. A bare
   floor is a promise the column will never be narrower than 280px — which a
   320px phone cannot keep, so the column overflows its card. And because the
   guard below clips rather than scrolls, that overflow is cut off instead of
   reachable. min() keeps the floor everywhere there is room for it and drops to
   100% where there is not. */

/* Hard guard: nothing should force the page wider than the screen.
   Use `overflow-x:clip`, never `overflow-x:hidden` — `hidden` makes the root a
   scroll container, which silently disables every `position:sticky` descendant
   (the storefront header and the admin top bar both rely on it). `clip` does not. */
@media (max-width:900px){
  html{overflow-x:clip}
  img,svg,video,canvas{max-width:100%;height:auto}

  /* storefront layout → single column */
  .shop-wrap{grid-template-columns:1fr !important;padding:20px 16px !important}
  .hero-inner{grid-template-columns:1fr !important;padding:40px 16px !important}
  .hero-art{display:none !important}
  .filters,.summary{position:static !important}
  .footer-grid{grid-template-columns:1fr 1fr !important}
  .site-header-inner{flex-wrap:wrap;gap:10px 14px !important}
  .site-header .search{order:3;flex-basis:100%;max-width:none}

  /* generic two-up layouts stack */
  .form-grid,.set-grid,.checkout-grid,.cart-layout,.pdp,.contact-grid,.about-grid{grid-template-columns:1fr !important}
}

@media (max-width:560px){
  .container{padding-left:14px !important;padding-right:14px !important}
  .prod-grid{grid-template-columns:repeat(2,1fr) !important;gap:12px !important}
  .footer-grid{grid-template-columns:1fr !important}
  .band-grid{grid-template-columns:repeat(2,1fr) !important}
  .cart-row{flex-wrap:wrap}
  .shop-head h1,.page-head h1,.page-head h2{font-size:1.5rem}
  /* modals span the phone screen (they are already width-capped above this) */
  .pmodal-card,.cmodal-box{width:100% !important}
  /* lux hero */
  .lux-title{font-size:clamp(2.2rem,12vw,3.2rem) !important}
  .lux-hero .hero-cta{flex-direction:column;align-items:stretch !important;width:100%}
  .lux-hero .hero-cta .btn{justify-content:center;width:100%}
}

@media (max-width:380px){
  .prod-grid{grid-template-columns:1fr !important}
}

/* Standalone data tables scroll horizontally instead of overflowing.
   Tables inside an admin .tcard are excluded — that card is already the
   scroll container, and nesting one scroller inside another traps the touch. */
@media (max-width:768px){
  .table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .tcard .table{display:table;overflow:visible}
}