/* Mobile overflow fix: prevents white sidebar on phones */
html {
  overflow-x: hidden !important;
}
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Only hide overflow on elements that have animated/marquee content */
.oversized-strip,
.announcement-bar,
.hero-slider,
.banner-collection,
.editorial-section {
  overflow-x: hidden !important;
}

@media (max-width: 768px) {
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix product grid to fit within viewport */
  .products-grid,
  .products-grid-2,
  .products-grid-5,
  #best-sellers-grid,
  #oversized-featured-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure product cards don't overflow */
  .product-card {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .product-card-img-wrap {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .product-card-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .product-card-info {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .product-card-prices {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.25rem !important;
  }

  .product-card-emi {
    width: 100% !important;
    text-align: center !important;
  }

  .product-card-swatches {
    justify-content: center !important;
  }

  /* Fix bundle offer banner */
  .bundle-offer-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 1.5rem 1rem !important;
  }

  .bundle-offer-banner h2 {
    font-size: 1.75rem !important;
  }

  .bundle-offer-banner div[style*="min-width: 200px"] {
    min-width: 140px !important;
  }

  /* Fix editorial background text */
  .editorial-bg-text {
    overflow: hidden !important;
  }

  /* Fix horizontal scroll container */
  .horizontal-scroll-container {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .horizontal-scroll-container .product-card {
    min-width: 200px !important;
  }

  /* Fix slide content */
  .slide-content {
    max-width: 90% !important;
  }

  /* Section and footer containment */
  section,
  footer,
  header,
  #app {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Editorial layout fix */
  .editorial-showcase {
    gap: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}