/*
You can type here custom CSS code, which will be loaded both on your admin and front-end pages. Please make sure to not override layout properties (positions and sizes), as they can interfere with the sliders built-in responsive functionality. Here are few example targets to help you get started:
*/

#index section#wrapper {
z-index: 1;
position: relative;
padding-top: 0px;
}

.ls-container { /* Slider container */

}

.ls-layers { /* Layers wrapper */

}

.ls-3d-box div { /* Sides of 3D transition objects */

}


/* ---------- LOWER ONLY SLIDER #6 (all screens) ---------- */
#creativeslider_6,
#creativeslider_6 .ls-v6-container,
#creativeslider_6 .ls-wp-container,
#creativeslider_6 .ls-inner,
#creativeslider_6 .ls-wrapper,
#creativeslider_6 .ls-overflow,
#creativeslider_6 .ls-bg-outer {
  position: relative !important;
  z-index: 0 !important;
}

/* ---------- DESKTOP DROPDOWN FIX ---------- */
#_desktop_top_menu .sub-menu {
  position: absolute !important;
  z-index: 10000 !important;
}
#_desktop_top_menu,
#_desktop_top_menu .top-menu {
  position: relative !important;
  z-index: 1000 !important;
}

/* ---------- MOBILE/TABLET OFF-CANVAS FIX ---------- */
@media (max-width: 991.98px) {
  #mobile_top_menu_wrapper,
  #menuCanvas {
    position: fixed !important;
    z-index: 100020 !important;
  }

  #_mobile_top_menu,
  #mobile_top_menu_wrapper .js-top-menu,
  #mobile_top_menu_wrapper .js-top-menu .sub-menu {
    position: relative !important;
    z-index: 100021 !important;
  }

  #header { overflow: visible !important; }
}


/* === Cart flyout must sit above menus and slider === */
#header .blockcart {                      /* cart icon wrapper */
  position: relative !important;
  z-index: 100050 !important;
}
#header .blockcart .cart-preview,
#header .blockcart .cart_block {          /* the dropdown panel */
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 8px) !important;       /* drop under the icon */
  z-index: 100060 !important;             /* higher than menu & slider */
  pointer-events: auto !important;
}

/* If your theme uses ps_shoppingcart/shopping_cart wrappers */
#header .ps-shoppingcart,
#header .shopping_cart {
  position: relative !important;
  z-index: 100050 !important;
}

/* Prevent the cart panel from accidentally triggering menu hovers */
@media (min-width: 992px) {
  #_desktop_top_menu .sub-menu { pointer-events: none; }
  #_desktop_top_menu li:hover > .sub-menu { pointer-events: auto; }
}


/* When the mobile side menu is used, the dark overlay should cover the cart too */
@media (max-width: 991.98px) {
  /* Make menu panel the top-most, then overlay, then everything else */
  #mobile_top_menu_wrapper { z-index: 100120 !important; } /* white panel */
  #menuCanvas { z-index: 100110 !important; }              /* dark overlay */

  /* Put the cart BELOW the overlay on mobile/tablet */
  #header .blockcart { z-index: 10000 !important; }
  #header .blockcart .cart-preview,
  #header .blockcart .cart_block { z-index: 10001 !important; }
}