/* =============================================================
   YELLA.UZ — Mobile Centering Fix v1
   Problem: All content shifted left, too much whitespace on right
   Solution: Fix container padding symmetry, stretch cards to edges,
             balance margins/padding proportionally on mobile
   Scope: max-width: 767px (mobile only)
   Load order: AFTER all other CSS (last in cascade)
   ============================================================= */

@media (max-width: 767px) {

  /* ── 1. BODY & ROOT — force full viewport width, centered ── */
  html {
    overflow-x: hidden;
    width: 100vw;
  }
  body {
    overflow-x: hidden;
    width: 100%;
    min-width: 100%;
  }

  /* ── 2. CONTAINER — symmetric padding, full width ──
     Bootstrap .container has padding-left/right: 10px + margin auto.
     On mobile we want slightly more breathing room but perfectly symmetrical.
  ── */
  .container {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .container-fluid {
    width: 100% !important;
    max-width: 100vw !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ── 3. ROW — zero negative margin so it doesn't pull content left ── */
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* ── 4. MEGASLIDER / BANNER — stretch edge-to-edge with compensation ──
     The slideshow has margin-left/right: -10px from stylesheet.css.
     We override that and let the banner breathe evenly.
  ── */
  .megasliderpro,
  .swiper-slideshow,
  .container-slideshow,
  .module-slideshow {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .megasliderpro.col-xs-12,
  .megasliderpro.col-md-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .container-slideshow .swiper-slideshow {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Banner slides fill width */
  .megasliderpro .swiper-slide.item-ms img,
  .swiper-slideshow .swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
  }

  /* ── 5. PRODUCT MODULES (container-module) — full width, balanced ── */
  .container-module {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Section titles — reduce left padding, center visually */
  .container-module .title-module {
    padding: 14px 4px 16px 2px !important;
    margin-bottom: 6px !important;
  }
  .container-module .title-module span {
    font-size: 17px !important;
    padding: 0 4px 0 6px !important;
  }

  /* The d-flex wrapper around swiper + navigation */
  .container-module > .d-flex {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── 6. SWIPER MODULE (product carousel) — use full module width ── */
  .container-module .swiper-module {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 12px !important;
    overflow: hidden !important;
  }

  /* ── 7. PRODUCT CARDS — 3 columns with minimal gap, edge-to-edge ──
     Each slide is 33.333%. Remove double-padding issue.
     Cards touch the screen edges with tiny gap.
  ── */
  .swiper-module .item.swiper-slide {
    width: 33.333% !important;
    min-width: 33.333% !important;
    max-width: 33.333% !important;
    /* Minimal horizontal padding — cards go nearly edge-to-edge */
    padding-left: 3px !important;
    padding-right: 3px !important;
  }

  /* Card shell — tighter margin on mobile so cards fill the space */
  .swiper-module .item .product-thumb {
    margin: 2.5px !important;
    border-radius: 8px !important;
  }

  /* ── 8. NAVIGATION ARROWS — hide on mobile (save space, use swipe) ── */
  .swiper-mod-navigation {
    display: none !important;
  }

  /* ── 9. BOTTOM NAV (yella-bnav) — full width, pinned ── */
  .yella-bnav {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* ── 10. "УМНЫЙ ДОМ XIAOMI!" style section banners — full width ── */
  .container-module .box-banner-container,
  .banner-footer,
  .block-banner-footer {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── 11. FOOTER — full width on mobile ── */
  footer {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  footer .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* ── 12. STORE REVIEWS section — full width ── */
  .store-reviews,
  .average-reviews__content,
  .rating-summary__content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ── 13. Any remaining column classes — no negative pull ── */
  [class*="col-xs-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .col-xs-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* ── 14. SEARCH WRAPPER — full width ── */
  .yella-mob-search,
  .search-wrapper.visible-xs {
    width: 100% !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ── 15. HEADER — ensure it spans full width ── */
  header.up-header,
  .up-header {
    width: 100% !important;
    max-width: 100vw !important;
  }
  header.up-header > .container,
  .up-header > .container {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

}

/* ── Extra small phones (<360px): 2 columns instead of 3 ── */
@media (max-width: 359px) {
  .swiper-module .item.swiper-slide {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}