/* mobilefix_c — punch-list fix, owned by one agent. @media(max-width:991px) only for mobile file. */

@media (max-width: 991px) {

  /* ---------------------------------------------------------------
     A. Kill horizontal overflow (phantom scroll from the off-canvas
        cart drawer that is translated 100% off the right edge).
        overflow-x:clip does NOT create a scroll container, so it will
        not break position:sticky descendants (unlike overflow-x:hidden).
     --------------------------------------------------------------- */
  html, body { overflow-x: clip !important; }

  /* ---------------------------------------------------------------
     B. Header top row was overcrowded (burger+brand 111px + logo 190px
        + utilities 205px = 506px in a 343px row, flex-nowrap) which
        shoved the right-side icons off-screen past 390px.
        Slim the logo, tighten the utility group, and drop the two
        least-critical top-bar icons on mobile:
          - stores  -> still reachable from the footer
          - wishlist-> heart still present on every product card
     --------------------------------------------------------------- */
  .header-logo img { max-width: 140px !important; height: auto !important; }

  .header-main-panel-group { gap: 14px !important; }
  .header-main-panel-group .panel-item {
    padding-left: 0 !important;  padding-right: 0 !important;
    margin-left: 0 !important;   margin-right: 0 !important;
  }
  .header-main-panel-group .header-top-bar-block.header-main-block-icon {
    padding-left: 0 !important;  padding-right: 0 !important;  margin: 0 !important;
  }
  .header-main-panel-group .panel-item.stores,
  .header-main-panel-group .panel-item.wishlist { display: none !important; }

  /* ---------------------------------------------------------------
     C. "NEW IN" product carousel centering.
        Root cause: Swiper is initialised with slidesPerView:1.1 and
        centeredSlides:false, so one card sits flush-left and a ~0.1
        sliver of the next card peeks on the right only -> reads as a
        bug. Swiper recomputes slide widths from the container
        content-box (ResizeObserver), so adding asymmetric horizontal
        padding re-centres the active card in the viewport while keeping
        Swiper's translate math intact (the wrapper origin shifts
        uniformly, so every slide lands in the same centred spot). The
        residual right peek becomes a small, deliberate "more items" hint.
        NOTE: the fully clean single-card-no-peek look is a 1-line theme
        JS change (slidesPerView:1) — see report.
     --------------------------------------------------------------- */
  .product-tabs-carousel-wrapper.swiper-container {
    padding-left: 32px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Mobile menu offcanvas: stick to the header. The +40px top offset was
     reserving space for the BoxNow preheader bar that is now display:none,
     leaving an empty gap under the header when the menu opens. Use dvh so the
     panel ends exactly at the viewport bottom (no phantom gap/scroll under
     the mobile browser chrome). */
  #desktopMenu.offcanvas-start {
    top: calc(var(--header-height)) !important;
    height: calc(100dvh - var(--header-height)) !important;
  }

  /* Keep the STICKY header visible while ANY menu (level-1 offcanvas OR
     level-2 flyover) is open — even after the user scrolled and the auto-hide
     added .hide-on-scroll. Force it fixed at the top and above Bootstrap's
     offcanvas backdrop (z 1040) so it is never dimmed or pushed away. */
  body.offcanvas-open #header,
  body.offcanvas-open #header.hide-on-scroll {
    transform: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1060 !important;
  }

  /* Level-2 (the flyover that carries the in-menu megamenu content) must open
     BELOW the header at the SAME top as level-1 — stylesheet.css line ~2511
     pins it to top:0, which slides it over the header. Also cap the inner
     wrap to the parent height (it was 100vh inside a shorter container, which
     produced the empty gap + extra scroll at the bottom). */
  .desktop-megamenu.flyover {
    top: var(--header-height) !important;
    height: calc(100dvh - var(--header-height)) !important;
  }
  .desktop-megamenu-flyover-wrap {
    height: 100% !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Product-card brand label ("Apple Underclothing" etc.) wrapped to two
     lines with a large line-height and 2px letter-spacing -> tall, loose.
     On mobile: smaller, tight, single line (clip with ellipsis if a rare
     long brand overflows the half-width card). */
  .product-block-manufacturer {
    font-size: 10px !important;
    line-height: 1.15 !important;
    letter-spacing: 0.4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin-bottom: 2px !important;
  }

  /* #5 Product gallery on mobile: full-bleed 100%-width photo (kill the
     desktop 50px right padding / 67% width) + Swiper pagination shown BELOW
     the image (the #gallery-pagination element now exists in the template
     and the main Swiper runs slidesPerView:1). */
  .product-gallery_wrap { padding: 0 !important; width: 100% !important; }
  .product-gallery_container { padding: 0 !important; }
  .main-gallery { width: 100% !important; }
  .main-gallery .swiper-slide img { width: 100% !important; height: auto !important; }
  #gallery-pagination.swiper-pagination {
    position: relative !important;
    bottom: auto !important;
    margin-top: 10px !important;
    text-align: center !important;
  }
  #gallery-pagination .swiper-pagination-bullet { margin: 0 4px !important; }

}

/* Mobile header: language switcher vertically centered with the burger */
#header .main-nav-flex .panel-item.language {
  display: flex;
  align-items: center;
  align-self: center;
}
#header .main-nav-flex .panel-item.language form {
  margin: 0;
}
#header .main-nav-flex .panel-item.language .lang-header,
#header .main-nav-flex .panel-item.language .btn-group {
  align-items: center;
  margin: 0;
  float: none;
}
#header .main-nav-flex .panel-item.language .dropdown-toggle {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  line-height: 1;
}
#header .main-nav-flex .panel-item.language .eshop-title {
  margin: 0;
  line-height: 1;
}

/* Mobile header: keep the logo dead-center regardless of side-group widths,
   and tighten the burger→language gap */
@media (max-width: 991px) {
  #header .header-main-row { position: relative; }
  #header .header-main-row .header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  #header .main-nav-flex .panel-item.language { padding-left: 4px; }
  #header .main-nav-flex .panel-item.language:before { margin-right: 8px; }
}