/* =========================================================
   SINGLE BELT TEMPLATE STYLES (refactored)
   Scope: single belt pages only
   Goals:
   - Keep your tight mobile layout
   - Avoid fragile selectors (e.g. :has())
   - Ensure header dropdown menus always appear above page content
   - Respect Elementor responsive visibility classes
   ========================================================= */

/* -------------------------
   1) Header dropdown stacking (critical)
   ------------------------- */
/* Elementor header wrapper */
body.single-belt .elementor-location-header {
  position: relative;
  z-index: 10000 !important;
}

/* Common Elementor dropdown containers */
body.single-belt .elementor-location-header .elementor-nav-menu--dropdown,
body.single-belt .elementor-location-header .elementor-nav-menu__container,
body.single-belt .elementor-location-header .elementor-nav-menu {
  position: relative;
  z-index: 10001 !important;
}

/* If your theme uses the "e-con" header layout */
body.single-belt .elementor-location-header .e-con,
body.single-belt .elementor-location-header .e-con-inner {
  position: relative;
  z-index: 10000 !important;
}
/* Elementor header wrapper */
body.single-belt .elementor-location-header {
  position: relative;
  z-index: 10000 !important;
}

/* Common Elementor dropdown containers */
body.single-belt .elementor-location-header .elementor-nav-menu--dropdown,
body.single-belt .elementor-location-header .elementor-nav-menu__container,
body.single-belt .elementor-location-header .elementor-nav-menu {
  position: relative;
  z-index: 10001 !important;
}

/* If your theme uses the "e-con" header layout */
body.single-belt .elementor-location-header .e-con,
body.single-belt .elementor-location-header .e-con-inner {
  position: relative;
  z-index: 10000 !important;
}

/* -------------------------
   2) Mobile: page layout & spacing
   ------------------------- */

@media (max-width: 767px) {

  /* Reduce side margins on belt spec pages for more content space */
  body.single-belt .elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
  body.single-belt .e-con:not(.elementor-location-header):not(.elementor-location-footer) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100vw !important;
  }

  /* Reduce padding on inner content */
  body.single-belt .elementor-widget-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Remove spacing from sections on belt pages */
  body.single-belt .elementor-section,
  body.single-belt .e-con {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Keep spacing below header (adjust to taste) */
  body.single-belt .elementor-location-header ~ .elementor-section:first-of-type,
  body.single-belt .elementor-location-header ~ .e-con:first-of-type {
    margin-top: 70px !important;
    padding-top: 5px !important;
  }

  /* If a specific container holds the media gallery, keep it tight */
  body.single-belt .mb-media-gallery,
  body.single-belt .mb-media-gallery__tabs,
  body.single-belt .elementor-widget-shortcode {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 480px) {
  body.single-belt .elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
  body.single-belt .e-con:not(.elementor-location-header):not(.elementor-location-footer) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100vw !important;
  }
}

/* -------------------------
   3) Gray banner (Part Number Heading)
   ------------------------- */

@media (max-width: 767px) {

  /* Target your known element id (keep, since you already use it) */
  body.single-belt .elementor-element-35d0bc8b {
    --padding-top: 15px !important;
    --padding-bottom: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    min-height: auto !important;
  }

  body.single-belt .elementor-element-35d0bc8b .e-con-inner {
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: auto !important;
  }

  body.single-belt .elementor-element-35d0bc8b .elementor-widget-heading {
    margin: 0 !important;
    padding: 0 !important;
  }

  body.single-belt .elementor-element-35d0bc8b .elementor-heading-title {
    margin: 0 !important;
    padding: 8px 0 !important;
    line-height: 1.2 !important;
  }

  /* Full width banner (your original intent) */
  body.single-belt .elementor-element-35d0bc8b {
    margin-left: -10px !important;
    margin-right: -10px !important;
    width: calc(100% + 20px) !important;
    max-width: calc(100% + 20px) !important;
  }

  body.single-belt .elementor-element-35d0bc8b .e-con-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  body.single-belt .elementor-element-35d0bc8b {
    margin-left: -5px !important;
    margin-right: -5px !important;
    width: calc(100% + 10px) !important;
    max-width: calc(100% + 10px) !important;
  }
}

/* -------------------------
   4) Specifications layout
   ------------------------- */

body.single-belt .belt-specifications {
  padding: 15px;
}

@media (max-width: 767px) {
  body.single-belt .belt-specifications {
    padding: 10px 5px;
  }
}

/* -------------------------
   5) Related fabrications table spacing
   ------------------------- */

body.single-belt .mb-related-fabs {
  margin-top: 20px;
}

@media (max-width: 767px) {
  body.single-belt .mb-related-fabs {
    margin-top: 15px;
  }
}

/* -------------------------
   6) Minimum pulley chart spacing
   ------------------------- */

body.single-belt .minimum-pulley-chart-container {
  margin: 20px 0;
}

@media (max-width: 767px) {
  body.single-belt .minimum-pulley-chart-container {
    margin: 15px 0;
  }
}

/* Mobile Content Spacing */
@media (max-width: 767px) {
    .mb-belt-container, 
    .mb-fab-table-container {
        margin-left: 55px;
        margin-right: 15px;
        width: calc(100% - 30px) !important;
    }
}

/* =========================================================
   FORCE MINIMUM CONTENT PADDING – SINGLE BELT
   Ensures at least 25px left/right at all viewport sizes
   ========================================================= */

body.single-belt
.elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
body.single-belt
.e-con:not(.elementor-location-header):not(.elementor-location-footer) {
  padding-left: max(10px, var(--padding-left, 0px)) !important;
  padding-right: max(10px, var(--padding-right, 0px)) !important;
  box-sizing: border-box !important;
}

/* Inner widgets must respect the rail */
body.single-belt .elementor-widget-container {
  padding-left: max(10px, var(--padding-left, 0px)) !important;
  padding-right: max(10px, var(--padding-right, 0px)) !important;
  box-sizing: border-box !important;
}