/* ==========================================================================
   Layout guard — stops the page from ever becoming wider than the screen
   (the "mobile page swipes left/right" bug). Added 28 Sep 2026 after a scan
   of all 219 sitemap pages at phone width: every page was 484 px wide.
   Loaded on every page from header.tpl with a ?v= version tag (now 20260929) — bump the
   tag whenever this file changes, theme CSS is cached by browsers.
   Record: ~/projects/shops/lfp-hack/progress/2026-09-28-mobile-overflow-scan.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.
      Also removes the 17 px horizontal scrollbar on desktop caused by the
      product-slider and reviews-slider arrows sitting outside the container. */
html, body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html, body {
    overflow-x: clip;
  }
}

/* 2. Header, screens up to 992 px: the "Happy Hours" + Google-rating block
      (.navbar-header > .d-flex) collapses to 0 px width, the Happy Hours image
      disappears, but the Google badge (height 40px, width auto, margin-left 3rem)
      cannot shrink and stuck 84 px past the right edge of every page — invisible
      to the customer, yet the page could be swiped sideways. It was never visible
      below 993 px, so hiding the whole block changes nothing on screen. */
@media (max-width: 992px) {
  .navbar-header > .d-flex {
    display: none !important; /* the bundle's .d-flex rule is !important too */
  }
}

/* 3. Editor content (CMS pages, category / product descriptions): an image with
      a fixed width="..." attribute may never be wider than its column
      (found: width="1200" on four /info/ pages). */
.rte img,
.cms-content img,
#search-cms img,
article.article img,
.category-description img,
.grid-product-bot-right img,
.product-description img {
  max-width: 100%;
  height: auto;
}

/* 3b. CMS info pages: the 1200 px header images (b1, neutraler-versand, printed-in-berlin)
      were inserted without any alignment and sat flush left in the 1320 px desktop column
      (Oleg, 29 Sep 2026). Centre them; on phones they are full width anyway. The HP-Latex
      page centres its image with an inline wrapper and is not affected. */
#search-cms img[width="1200"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* 4. Same blocks on phones: a wide table scrolls inside itself instead of
      pushing the whole page sideways (found on 7 category / product pages).
      Desktop keeps normal table layout. */
@media (max-width: 767px) {
  .rte table,
  .cms-content table,
  #search-cms table,
  article.article table,
  .category-description table,
  .grid-product-bot-right table,
  .product-description table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 5. Home page reviews slider: the arrows sit outside the section (left:-30px /
      right:-23px on desktop, -20px on phones, theme bundle). On phones the right
      one was cut by the screen edge; on a 1366 px desktop the left one was fully
      off-screen and the right one added a 17 px horizontal scrollbar. Keep them
      in the 15 px column gutter, fully on screen at every width. Swiping the
      cards works independently (pointer events in the bundle). */
#reviews-slider .arrow.prev {
  left: -15px;
}
#reviews-slider .arrow.next {
  right: -15px;
}

/* 6. Sitemap page, phones: three columns in a non-wrapping flex row
      (.ml-5 / .ml-auto) pushed the "Seiten" column off the screen.
      Stack the columns instead. */
@media (max-width: 767px) {
  body#sitemap #center_column .d-flex {
    flex-wrap: wrap;
  }
  body#sitemap #center_column .d-flex > div {
    width: 100%;
    margin-left: 0 !important;
  }
}