/* ==========================================================================
   Layout guard — stops the page from ever becoming wider than the screen
   (the "mobile page swipes left/right" bug). Added 16 Sep 2026.
   Loaded on every page from header.tpl. Record: ~/projects/shops/bln/progress/changes.md
   ========================================================================== */

/* 1. Whatever sticks out sideways is cut off instead of stretching the page.
      `clip` (modern browsers) does not turn html/body into a scroll container,
      so position:sticky / scroll-anchoring keep working; `hidden` is the fallback. */
html, body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body {
    overflow-x: clip;
  }
}

/* 2. Editor content (category / CMS / product descriptions): an image with a
      fixed width="..." attribute may never be wider than its column. */
.rte img,
.category-desc-bottom img,
.index-desc-content img,
.description img,
.description_box img,
.product_desc img,
.ft-desc img {
  max-width: 100%;
  height: auto;
}

/* 3. Same blocks on phones: a wide table scrolls inside itself instead of
      pushing the whole page sideways. Desktop keeps normal table layout. */
@media (max-width: 767px) {
  .rte table,
  .category-desc-bottom table,
  .index-desc-content table,
  .description table,
  .description_box table,
  .product_desc table,
  .ft-desc table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 4. Product page, phones: the hidden free-shipping tooltip has a fixed `width:392px`
      (theme bundle assets/js/main.*.css) and stuck 22 px past the screen although
      invisible. Let it span its parent instead (found by the 16 Sep 2026 site scan on
      /de/rollup-displays/rollup-eco-light-basic). */
@media (max-width: 767px) {
  .fs-tooltip-content {
    width: auto;
    left: 0;
    right: 0;
  }
}