/* BSK Mobile Shell 0.3.1: phone fit guards. Phones only (below 721px). Desktop is not changed.
   Problem seen on the home page of a phone: one wide block (a row of buttons that does not wrap, and columns that do
   not stack) made the whole page wider than the screen, so it slid sideways and the top bar moved off the left edge.
   These rules stop that: the page cannot be panned sideways, flex and grid children may not grow past the screen,
   Elementor columns stack, and an HTML button row wraps (anything still too wide scrolls inside its own box). */

@media (max-width: 720px) {
  /* The page cannot be panned sideways. overflow-x: clip is the modern value; hidden is the fallback. */
  body.bsk-m-app { overflow-x: hidden; overflow-x: clip; }

  /* A flex or grid child takes at most the width of its parent, however wide its content is */
  body.bsk-m-app .elementor-container,
  body.bsk-m-app .elementor-column,
  body.bsk-m-app .elementor-widget-wrap,
  body.bsk-m-app .elementor-widget,
  body.bsk-m-app .e-con { min-width: 0; max-width: 100%; }

  /* Columns stack, one under the other, on phones */
  body.bsk-m-app .elementor-column { width: 100% !important; }
  body.bsk-m-app .e-con > .e-con { width: 100% !important; }

  /* HTML widgets: rows of buttons wrap; anything still too wide scrolls inside its own box */
  body.bsk-m-app .elementor-widget-html .elementor-widget-container { overflow-x: auto; white-space: normal !important; }
  body.bsk-m-app .elementor-widget-html [style*="display:flex"],
  body.bsk-m-app .elementor-widget-html [style*="display: flex"] { flex-wrap: wrap !important; }
  body.bsk-m-app .elementor-widget-html img { max-width: 100%; height: auto; }

  /* Elementor button widgets: a long label wraps instead of pushing the page wider */
  body.bsk-m-app .elementor-widget-button .elementor-button { max-width: 100%; white-space: normal; }
}