/* =========================================================
   Global Responsive Safety Net
   Loaded on every page (after style.css) so nothing on the
   site — old page, new page, admin or storefront — can ever
   overflow sideways or get cut off on mobile.
   ========================================================= */

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

*, *::before, *::after{ box-sizing:border-box; }

/* Nothing wider than its container by accident */
.container, main, section, header, footer, form,
.admin-container, .form-card, .table-card, .admin-card{
  max-width:100%;
}

img, video, iframe, embed, object{
  max-width:100%;
  height:auto;
}

/* Form controls should never force a page wider than the viewport */
input, select, textarea, button{
  max-width:100%;
}

/* Long unbroken words/links (order numbers, tracking IDs, emails) wrap instead of pushing layout wide */
p, span, td, th, li, label, h1, h2, h3, h4, h5, h6, a{
  overflow-wrap:break-word;
  word-break:break-word;
}

/* Any wide data table that isn't already wrapped gets its own horizontal scroller,
   so the table scrolls instead of the whole page. */
table{ max-width:100%; }
.table-card{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Flex/grid rows should be allowed to wrap on small screens by default
   unless a page explicitly opts out with .no-wrap */
.row, .flex-row{ flex-wrap:wrap; }

pre, code{ max-width:100%; overflow-x:auto; white-space:pre-wrap; word-break:break-word; }

@media (max-width:480px){
  .container{ padding:0 14px; }
  h1{ font-size:24px; }
  h2{ font-size:20px; }
}