/* ============================================================
   MEMBERS WAREHOUSE — mobile-safe.css
   ------------------------------------------------------------
   Stops horizontal overflow on phones.

   The usual cause is that flex and grid children default to
   min-width:auto, so a long word, a wide image or an unbroken
   URL refuses to shrink and pushes the whole page wider than
   the screen. In portrait you scroll sideways; in landscape
   there's enough room so it looks fine — which is exactly how
   the bug presents.

   Load this LAST so it wins over page styles.
   ============================================================ */

/* Never let the page itself scroll sideways.
   overflow-x:clip is used in preference to hidden because
   hidden on an ancestor silently breaks position:sticky. */
html, body {
  max-width: 100%;
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Media should never exceed its column */
img, video, iframe, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* Long words, URLs and pasted text must wrap rather than push */
h1, h2, h3, h4, h5, h6,
p, span, a, li, dd, dt, td, th, label, blockquote, figcaption {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

pre, code, kbd, samp {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Wide tables scroll inside themselves instead of the page */
table {
  max-width: 100%;
}

@media (max-width: 900px) {
  /* The core fix: let flex and grid children shrink.
     Without this a single long product title can widen the page. */
  [class*="grid"] > *,
  [class*="card"],
  [class*="row"] > *,
  [class*="col"],
  [class*="item"],
  [class*="tile"],
  [class*="listing"],
  [class*="product"],
  [class*="store"],
  main > *,
  .container > * {
    min-width: 0;
  }

  /* Anything laid out with flex should be free to wrap */
  [class*="actions"],
  [class*="meta"],
  [class*="badges"],
  [class*="filters"],
  [class*="btns"],
  [class*="buttons"] {
    flex-wrap: wrap;
  }

  /* Inputs and selects commonly carry a browser default width
     wider than a narrow phone */
  input, select, textarea, button {
    max-width: 100%;
  }

  /* Tables become independently scrollable */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Very narrow phones.
   Deliberately NOT forcing every grid to one column — that would
   stack things like photo thumbnail strips vertically. Grids built
   with minmax() already collapse on their own. */
@media (max-width: 380px) {
  .products-grid,
  .store-grid,
  .listing-grid {
    grid-template-columns: 1fr;
  }
}

/* Share buttons: 5 across is too wide for a phone, let them wrap
   into a comfortable 2-3 per row */
@media (max-width: 480px) {
  .mw-share-btns a,
  .mw-share-btns button {
    min-width: 0 !important;
    flex: 1 1 30% !important;
  }
}