.elementor-3820 .elementor-element.elementor-element-8c27dfa{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}/* Start custom CSS for html, class: .elementor-element-e3bf4d4 *//*
=======================================================
  VapeTrends360 Header — Elementor Custom CSS Fix
  Add this in: Elementor > Site Settings > Custom CSS
  OR: Select the HTML widget > Advanced > Custom CSS
=======================================================
*/

/* 1. Force the Elementor section/column wrapping the header
      to not clip overflow (needed for dropdowns + subscribe btn) */
.elementor-location-header,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-column,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .elementor-widget,
.elementor-location-header .elementor-widget-html {
  overflow: visible !important;
}

/* 2. Remove Elementor's default padding/margin on the column
      wrapping the HTML widget — it pushes content and causes clipping */
.elementor-location-header .elementor-widget-html {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* 3. The header section itself must be full-width with no padding */
.elementor-location-header > .elementor-section:first-child,
.elementor-location-header > .e-con:first-child {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 4. Elementor containers (Flexbox Container) also need overflow:visible */
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner {
  overflow: visible !important;
  padding: 0 !important;
}

/* 5. The #vt-header wrapper itself */
#vt-header {
  width: 100% !important;
  overflow: visible !important;
  position: relative !important;
}

/* 6. Fix navbar bar — Elementor resets height:auto on divs.
      Force the nav row to its correct height */
#vt-header .vt-navbar {
  min-height: 52px !important;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
}

#vt-header .vt-navbar-inner {
  display: flex !important;
  align-items: stretch !important;
  height: 52px !important;
  overflow: visible !important;
}

/* 7. Masthead actions row — prevent Subscribe button clipping */
#vt-header .vt-masthead-inner {
  overflow: visible !important;
}

#vt-header .vt-actions {
  overflow: visible !important;
  flex-shrink: 0 !important;
}

/* 8. Mobile: ensure burger shows at correct breakpoint.
      Elementor may override display:none/flex on .vt-burger */
@media (max-width: 900px) {
  #vt-header .vt-burger {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  #vt-header .vt-nav-list,
  #vt-header .vt-nav-right {
    display: none !important;
  }
}

/* 9. Drawer and overlay z-index must beat Elementor's sticky header
      z-index (Elementor uses z-index:9999 on sticky headers) */
#vt-header .vt-drawer  { z-index: 999999 !important; }
#vt-header .vt-overlay { z-index: 999998 !important; }/* End custom CSS */