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

/* 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{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}
}