/* =========================================================
   SINGLE FABRICATION TEMPLATE STYLES
   Scope: Single fabrication pages only (body.single-fabrication)
   For: fabrication_new single post template (Elementor)
   Loaded only on single fabrication pages
   ========================================================= */

/* -------------------------
   1) Header dropdown stacking (critical)
   FIXED: Sticky header must stay above scrolling content
   ------------------------- */
   
/* Elementor header wrapper */
body.single-fabrication .elementor-location-header {
  position: relative;
  z-index: 10000 !important;
}

/* When header becomes sticky, increase z-index even more */
body.single-fabrication .elementor-location-header.elementor-sticky,
body.single-fabrication .elementor-location-header .elementor-sticky,
body.single-fabrication .elementor-location-header [data-settings*="sticky"] {
  z-index: 99999 !important;
}

/* Sticky wrapper from Elementor Pro */
body.single-fabrication .elementor-sticky__wrapper {
  z-index: 99999 !important;
}

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

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

/* CRITICAL: Ensure page content stays below sticky header */
body.single-fabrication .elementor-section:not(.elementor-location-header),
body.single-fabrication .e-con:not(.elementor-location-header) {
  z-index: 1 !important;
  position: relative;
}

/* Ensure main content area respects z-index */
body.single-fabrication main,
body.single-fabrication #main,
body.single-fabrication .site-content {
  position: relative;
  z-index: 1 !important;
}

/* -------------------------
   2) Mobile: Reduce header spacing
   FIXED: Reduce padding but maintain logo size
   ------------------------- */


  /* FIX STICKY HEADER DUPLICATION AND MARGINS */
  body.single-fabrication .elementor-location-header {
    position: relative !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  body.single-fabrication .elementor-location-header.elementor-sticky--active {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Reduce header section padding ONLY - not logo size */
  body.single-fabrication .elementor-location-header .elementor-section,
  body.single-fabrication .elementor-location-header .e-con {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    min-height: auto !important;
  }
  
  /* Reduce inner container padding */
  body.single-fabrication .elementor-location-header .elementor-container,
  body.single-fabrication .elementor-location-header .e-con-inner {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: auto !important;
  }
  
  /* Tighten logo widget margins - but DON'T change logo size */
  body.single-fabrication .elementor-location-header .elementor-widget-image {
    margin: 0 !important;
    padding: 5px 0 !important;
  }
  
  /* REMOVED: Logo sizing - let Elementor control this */
}

@media (max-width: 767px) {
  /* Even tighter padding on mobile */
  body.single-fabrication .elementor-location-header .elementor-section,
  body.single-fabrication .elementor-location-header .e-con {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  
  /* REMOVED: Logo sizing - let Elementor control this */
}

/* -------------------------
   3) Mobile: Page layout & spacing
   ------------------------- */

@media (max-width: 767px) {
  /* Remove side margins - full width content */
  body.single-fabrication .elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
  body.single-fabrication .e-con:not(.elementor-location-header):not(.elementor-location-footer) {
    margin-left: 0px !important;
    margin-right: 0px !important;
    max-width: 100vw !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  
  /* Reduce padding on inner content */
  body.single-fabrication .elementor-widget-container {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  
  /* If a specific container holds the media gallery, keep it tight */
  body.single-fabrication .mb-media-gallery,
  body.single-fabrication .mb-media-gallery__tabs,
  body.single-fabrication .elementor-widget-shortcode {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

@media (max-width: 480px) {
  /* Full width on very small screens */
  body.single-fabrication .elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
  body.single-fabrication .e-con:not(.elementor-location-header):not(.elementor-location-footer) {
    margin-left: 0px !important;
    margin-right: 0px !important;
    max-width: 100vw !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}

/* -------------------------
   4) Gray banner (Part Number / Fabrication Title)
   Similar to belt pages
   ------------------------- */

@media (max-width: 767px) {
  /* Target the heading container (adjust element ID if different) */
  /* If fabrications use a similar gray banner, add the element ID here */
  body.single-fabrication .elementor-widget-heading:first-of-type {
    --padding-top: 15px !important;
    --padding-bottom: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    min-height: auto !important;
  }

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

/* -------------------------
   5) Specifications layout
   ------------------------- */

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

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

/* -------------------------
   6) Related products/items spacing
   ------------------------- */

body.single-fabrication .related-items,
body.single-fabrication .mb-related-items {
  margin-top: 20px;
}

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

/* -------------------------
   7) Media Gallery spacing
   Same pattern as belts
   ------------------------- */

@media (max-width: 767px) {
  /* Remove spacing from title banner area */
  body.single-fabrication .elementor-widget-heading,
  body.single-fabrication .elementor-heading-title {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }
}

/* -------------------------
   8) Unit Toggle Widget
   Ensure proper display on fabrication pages
   ------------------------- */

body.single-fabrication .unit-toggle {
  margin: 15px auto;
  padding: 8px 12px;
  text-align: left;
  box-sizing: border-box;
  display: inline-block;
}

body.single-fabrication .unit-system-toggle {
  display: inline-flex !important;
  justify-content: left;
  align-items: left;
  gap: 12px;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
}

@media (max-width: 767px) {
  body.single-fabrication .unit-toggle {
    padding: 6px 10px;
    font-size: 14px;
  }
  
  body.single-fabrication .unit-system-toggle {
    justify-content: flex-start !important;
    gap: 8px !important;
  }
}

@media (max-width: 767px) {
  .elementor-147791 .elementor-element.elementor-element-33584628 {
    --width: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Optional: if it’s being centered and you want it to “stick” full width */
  .elementor-147791 .elementor-element.elementor-element-33584628.e-con {
    align-self: stretch !important;
  }
}


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

#fab-menu {
margin-top: 70px !important
}


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

body.single-fabrication
.elementor-section:not(.elementor-location-header):not(.elementor-location-footer),
body.single-fabrication
.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-fabrication .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;
}