/*
Theme Name: Hello Child
Theme URI: https://elementor.com/
Description: Child theme for the Hello Elementor theme.
Author: Your Name
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-child
*/

/* ===== FIX: Remove Left Margin Artifact ===== */
html {
  scrollbar-gutter: stable !important; /* only one edge reserved, not both */
}
body {
  overflow-x: hidden; /* ensures no horizontal overflow */
  max-width: 100%;
}

/* ===== Viewport overflow hardener (Elementor + 100vw fixes) ===== */

/* 1) Make widths/padding predictable everywhere */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2) Never allow horizontal creep */
html {
  scrollbar-gutter: stable;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* 3) Kill 100vw-induced overflow in our areas */
.bm-spot-row,
.bm-spot-row .bm-grid,
img,
video {
  max-width: 100%;
}

/* TEST FIX: remove vw width from product grids */
.bm-spot-row,
.bm-spot-row .bm-grid {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* 4) Elementor “Stretch Section” can over-shoot by a px or two on resize.
      Force it back to the viewport at tablet/mobile. */
@media (max-width: 1024.98px) {
  .elementor-section.elementor-section-stretched {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  /* Keep containers honest on small screens */
  .elementor-section .elementor-container {
    max-width: 100% !important;
  }
}

/* 5) Any rogue element wider than the viewport: clamp it */
@media (max-width: 1024.98px) {
  [style*="width: 100vw"],
  [style*="width:100vw"],
  [class*="vw-100"] {
    width: 100% !important;
  }
}

/* 6) Common culprits: sliders/rows that add a subpixel overflow on transform */
@media (max-width: 1024.98px) {
  .swiper,
  .swiper-container,
  .swiper-wrapper {
    overflow: hidden;
  }
}

/* 7) Belt-and-suspenders for any full-bleed hero/row with padding or shadows */
@media (max-width: 1024.98px) {
  .elementor-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}