/*
Theme Name:   Xstore child
Theme URI:    https://xstore.8theme.com
Description:  XStore is a multi-purpose theme that offers the ultimate WordPress and WooCommerce synergy, providing a comprehensive, all-in-one solution.
Author:       8theme
Author URI:   https://www.8theme.com
Template:     xstore
Version:      1.0
Text Domain:  xstore-child
Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, custom-logo, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, translation-ready, ecommerce, woocommerce, shop, elementor, business, corporate, blog, news, light, dark
*/

/* NoorNoorani :: TASK-2-FIXES :: START */
/* ==========================================================================
   NoorNoorani — Task 2 UI fixes  (menu bar to black / hero height / dropdown
   stacking).  Added 2026-10-10.  Safe to delete this whole block to revert.
   --------------------------------------------------------------------------
   Site facts these rules are written against:
     · Header = Elementor Pro template #1778  ->  <header class="elementor
       elementor-1778 elementor-location-header">
     · Brown menu bar  = container .elementor-element-58beb1cd (#C09578)
       holding the "All Departments" widget (75d096e2) + main nav (16119220)
     · Hero = HTML widget .nn-hero / .nn-hero__stage (was 780px mobile,
       640px tablet, 680px desktop)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. MENU BAR -> BLACK (#0A0A0A) + gold hairline, cream text, gold hover
   -------------------------------------------------------------------------- */

/* 1a. the bar itself (real selector + the generic aliases requested) */
header.elementor-location-header .elementor-element-58beb1cd,
header.elementor-location-header .elementor-element-58beb1cd > .e-con-inner,
header.elementor-location-header .main-nav,
header.elementor-location-header .bottom-header,
header.elementor-location-header .nav-bar,
header.elementor-location-header .all-departments-bar,
header.elementor-location-header .et_b_header-bottom {
	background: #0A0A0A !important;
	background-color: #0A0A0A !important;
	border-bottom: 1px solid rgba(184, 155, 92, 0.14) !important;
}

/* 1b. menu text: cream #F5F2EB  |  hover / active: gold #D8C99E */
header.elementor-location-header .elementor-element-58beb1cd .elementor-item,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu-item,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu-item-parent .elementor-item,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu-item-parent a,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu-item-icon i,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu-item-arrow,
header.elementor-location-header .elementor-element-58beb1cd a {
	color: #F5F2EB !important;
	fill: #F5F2EB !important;
	background: transparent !important;
	background-color: transparent !important;
	transition: color .25s ease, background-color .25s ease !important;
}

header.elementor-location-header .elementor-element-58beb1cd .elementor-item:hover,
header.elementor-location-header .elementor-element-58beb1cd .elementor-item:focus,
header.elementor-location-header .elementor-element-58beb1cd .elementor-item.elementor-item-active,
header.elementor-location-header .elementor-element-58beb1cd li:hover > .etheme-elementor-nav-menu-item-parent .elementor-item,
header.elementor-location-header .elementor-element-58beb1cd li.dropdown-opened > .etheme-elementor-nav-menu-item-parent .elementor-item,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu-item:hover,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu-item-parent:hover .elementor-item,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu-item-parent .elementor-item:hover,
header.elementor-location-header .elementor-element-58beb1cd .current-menu-item > a,
header.elementor-location-header .elementor-element-58beb1cd a:hover {
	color: #0A0A0A !important;
	fill: #0A0A0A !important;
	background: #D8C99E !important;
	background-color: #D8C99E !important;
}

/* 1c. underline / framed pointer effects + focus ring follow the gold */
header.elementor-location-header .elementor-element-58beb1cd .elementor-item:before,
header.elementor-location-header .elementor-element-58beb1cd .elementor-item:after {
	background-color: #B89B5C !important;
	border-color: #B89B5C !important;
}

/* 1d. dropdown / mega-menu panels: keep XStore's proven light panel (its
       content is AJAX-loaded product blocks) but tie it to the black bar
       with a gold hairline + deep shadow so it reads as part of the menu. */
header.elementor-location-header .elementor-element-58beb1cd .nav-sublist-dropdown,
header.elementor-location-header .elementor-element-58beb1cd .etheme-elementor-nav-menu--dropdown,
header.elementor-location-header .elementor-element-58beb1cd .menu-static-block {
	border: 1px solid rgba(184, 155, 92, 0.35) !important;
	border-top: 2px solid #B89B5C !important;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
}

/* gold hover accent on the panel links */
header.elementor-location-header .elementor-element-58beb1cd .nav-sublist-dropdown a:hover,
header.elementor-location-header .elementor-element-58beb1cd .nav-sublist-dropdown .etheme-elementor-nav-menu-item:hover,
header.elementor-location-header .elementor-element-58beb1cd .item-design-dropdown .nav-sublist-dropdown ul > li > .etheme-elementor-nav-menu-item:hover,
header.elementor-location-header .elementor-element-58beb1cd .item-design-mega-menu .nav-sublist-dropdown ul > li > .etheme-elementor-nav-menu-item:hover {
	color: #B89B5C !important;
	fill: #B89B5C !important;
}

/* item hover overlay that XStore paints with currentColor */
header.elementor-location-header .elementor-element-58beb1cd .nav-sublist-dropdown .etheme-elementor-nav-menu-item:before {
	background-color: #B89B5C !important;
}


/* --------------------------------------------------------------------------
   2. HERO HEIGHT — 520px desktop (never taller than 58vh), 380px mobile
   -------------------------------------------------------------------------- */

/* 2a. the real hero on this site (custom .nn-hero slider) */
.nn-hero {
	--nn-stage-h: 380px;
}
.nn-hero__stage {
	height: 380px !important;
	max-height: 58vh !important;
	overflow: hidden !important;
}
.nn-hero .nn-slide__bg img,
.nn-hero .nn-card img,
.nn-hero .nn-leh__main img,
.nn-hero .nn-leh__detail img {
	object-fit: cover !important;
	object-position: center !important;
}
.nn-hero .nn-wrap {
	height: 100%;
	padding-top: 22px;
	padding-bottom: 46px;
}
.nn-hero .nn-title {
	font-size: 30px !important;
}
.nn-hero .nn-title em {
	font-size: 14px !important;
	margin-top: 6px;
}
.nn-hero .nn-kicker {
	margin-bottom: 10px;
}
.nn-hero .nn-sub {
	margin-top: 12px;
}
.nn-hero .nn-cta-row {
	margin-top: 14px;
}
.nn-hero .nn-hero__fade {
	height: 70px;
}
/* right-hand visual panels (lehenga collage / watch card) — hidden on phones,
   250px tall main panel from tablet up, as requested */
.nn-hero .nn-leh__main img {
	height: 140px !important;
}
.nn-hero .nn-leh__detail img {
	height: 48px !important;
}
.nn-hero .nn-note {
	padding: 10px !important;
}
.nn-hero .nn-note__hr {
	margin-top: 8px;
}
.nn-hero .nn-note__f {
	margin-top: 8px;
}
.nn-hero .nn-measure {
	display: none;
}
.nn-hero .nn-ctrl {
	bottom: 10px;
}

@media (max-width: 767px) {
	.nn-hero .nn-visual {
		display: none !important;
	}
	.nn-hero .nn-copy {
		width: 100% !important;
	}
}

@media (min-width: 768px) {
	.nn-hero {
		--nn-stage-h: 520px;
	}
	.nn-hero__stage {
		height: 520px !important;
		max-height: 58vh !important;
	}
	.nn-hero .nn-wrap {
		padding-top: 0;
		padding-bottom: 52px;
	}
	.nn-hero .nn-title {
		font-size: 48px !important;
	}
	.nn-hero .nn-title em {
		font-size: 19px !important;
	}
	.nn-hero .nn-kicker {
		margin-bottom: 16px;
	}
	.nn-hero .nn-sub {
		margin-top: 18px;
	}
	.nn-hero .nn-cta-row {
		margin-top: 24px;
	}
	.nn-hero .nn-hero__fade {
		height: 100px;
	}
	/* right-side small banners / panels = 250px */
	.nn-hero .nn-leh__main img {
		height: 250px !important;
	}
	.nn-hero .nn-leh__detail img {
		height: 66px !important;
	}
	.nn-hero .nn-note {
		padding: 14px !important;
	}
	.nn-hero .nn-note__t {
		font-size: 15px;
	}
	.nn-hero .nn-note__d {
		font-size: 10.5px;
		margin-top: 6px;
	}
	.nn-hero .nn-note__hr {
		margin-top: 10px;
	}
	.nn-hero .nn-note__f {
		margin-top: 10px;
	}
	.nn-hero .nn-measure {
		display: block;
		padding: 8px 14px;
	}
	.nn-hero .nn-card img {
		aspect-ratio: 16 / 8 !important;
	}
	.nn-hero .nn-ctrl {
		bottom: 18px;
	}
}

@media (min-width: 1024px) {
	.nn-hero .nn-title {
		font-size: 54px !important;
	}
	.nn-hero .nn-title em {
		font-size: 20px !important;
	}
	.nn-hero .nn-leh__main img {
		height: 250px !important;
	}
	.nn-hero .nn-leh__detail img {
		height: 70px !important;
	}
	.nn-hero .nn-note {
		padding: 16px !important;
	}
}

/* 2b. generic aliases (Elementor slides / Slider Revolution / XStore slider) —
       kept in case the hero is ever rebuilt with a real slider widget */
.hero-slider,
.rev_slider,
.rev_slider_wrapper,
.elementor-slides,
.etheme-elementor-slider,
.main-slider,
.hero-section .swiper,
.hero-section .swiper-container {
	height: 520px !important;
	max-height: 58vh !important;
}
.hero-slider img,
.elementor-slides img,
.main-slider img {
	object-fit: cover !important;
	object-position: center !important;
}
@media (max-width: 767px) {
	.hero-slider,
	.rev_slider,
	.rev_slider_wrapper,
	.elementor-slides,
	.etheme-elementor-slider,
	.main-slider,
	.hero-section .swiper,
	.hero-section .swiper-container {
		height: 380px !important;
		max-height: 58vh !important;
	}
}
/* right-hand promo banners next to a slider (250px) — scoped so it can never
   touch the banners further down the homepage */
.hero-slider + .banner,
.hero-section .banner,
.slider-section .banner,
.main-slider + .banner {
	height: 250px !important;
	max-height: 250px !important;
}
.hero-slider + .banner img,
.hero-section .banner img,
.slider-section .banner img,
.main-slider + .banner img {
	object-fit: cover !important;
	height: 100% !important;
}
@media (max-width: 767px) {
	.hero-slider + .banner,
	.hero-section .banner,
	.slider-section .banner,
	.main-slider + .banner {
		height: 180px !important;
		max-height: 180px !important;
	}
}


/* --------------------------------------------------------------------------
   3. "ALL DEPARTMENTS" DROPDOWN MUST PAINT OVER THE HERO (z-index / stacking)
      Root cause: the header had no z-index at all, while the hero slides use
      .nn-slide.is-active{z-index:10} and .nn-hero__fade{z-index:15}, so the
      hero (later in the DOM) painted on top of the open dropdown.
   -------------------------------------------------------------------------- */

/* 3a. header above the page content */
header.elementor-location-header,
.elementor-location-header,
.mobile-header-wrapper,
.header-wrapper {
	position: relative;
	z-index: 9999 !important;
}

/* 3b. never let the sticky header drop below the hero */
.etheme-elementor-header-sticky.sticky-on,
.etheme-elementor-header-sticky.sticky-on .etheme-elementor-header-wrapper,
#header.sticky-on,
header.elementor-location-header.sticky-on {
	z-index: 9999 !important;
}

/* 3c. the menu bar + menu widgets are positioned and above their siblings
       (mobile off-canvas menu is deliberately excluded — it must stay static) */
header.elementor-location-header .elementor-element-58beb1cd,
header.elementor-location-header .all-departments,
header.elementor-location-header .departments-menu,
header.elementor-location-header .vertical-menu,
header.elementor-location-header .elementor-widget-theme-etheme_departments_menu,
header.elementor-location-header .elementor-widget-theme-etheme_nav_menu,
header.elementor-location-header .etheme-elementor-nav-menu--main {
	position: relative;
	z-index: 10000 !important;
}

/* 3d. the dropdown panels themselves */
header.elementor-location-header .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu--dropdown,
header.elementor-location-header .elementor-widget-theme-etheme_departments_menu .nav-sublist-dropdown,
header.elementor-location-header .elementor-widget-theme-etheme_nav_menu .etheme-elementor-nav-menu--main > ul > li > .nav-sublist-dropdown,
header.elementor-location-header .elementor-widget-theme-etheme_nav_menu .etheme-elementor-nav-menu--main > ul > li > .etheme-elementor-nav-menu--dropdown,
header.elementor-location-header .all-departments-dropdown,
header.elementor-location-header .departments-dropdown,
header.elementor-location-header .mega-menu,
.et_b_header-menu .nav-sublist-dropdown {
	position: absolute !important;
	z-index: 10001 !important;
}

/* top-level panels hang directly under the bar (nested fly-outs keep their
   own top:50% centring, so they are excluded here) */
header.elementor-location-header .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu--main > ul > li > .nav-sublist-dropdown,
header.elementor-location-header .elementor-widget-theme-etheme_departments_menu .etheme-elementor-nav-menu--main > ul > li > .etheme-elementor-nav-menu--dropdown,
header.elementor-location-header .elementor-widget-theme-etheme_nav_menu .etheme-elementor-nav-menu--main > ul > li > .nav-sublist-dropdown,
header.elementor-location-header .elementor-widget-theme-etheme_nav_menu .etheme-elementor-nav-menu--main > ul > li > .etheme-elementor-nav-menu--dropdown {
	top: 100% !important;
}

/* 3e. nothing between the bar and the panel may clip it */
header.elementor-location-header,
header.elementor-location-header .elementor-element-58beb1cd,
header.elementor-location-header .elementor-element-58beb1cd > .e-con-inner,
header.elementor-location-header .elementor-widget-theme-etheme_departments_menu,
header.elementor-location-header .elementor-widget-theme-etheme_nav_menu,
header.elementor-location-header .elementor-widget-theme-etheme_departments_menu .elementor-widget-container,
header.elementor-location-header .elementor-widget-theme-etheme_nav_menu .elementor-widget-container,
header.elementor-location-header .etheme-elementor-nav-menu--main {
	overflow: visible !important;
}

/* 3f. hero / page content sits below the header.
       The hero is inside the Elementor page wrapper, NOT inside <header>,
       so these rules cannot affect the dropdown panels. */
.nn-hero,
.hero-section,
.slider-section,
.main-slider,
.elementor[data-elementor-type="wp-page"],
.elementor[data-elementor-type="wp-post"],
.elementor-location-single > .elementor,
.elementor-location-archive > .elementor {
	position: relative;
	z-index: 1 !important;
}

/* keep the whole hero block under the header stacking context */
.elementor-15 .elementor-element-b79b9a2,
.elementor-location-header ~ .container {
	z-index: 1 !important;
}

/* ==========================================================================
   End of Task 2 UI fixes
   ========================================================================== */
/* NoorNoorani :: TASK-2-FIXES :: END */