<?php if ( get_header_image() ) : ?>
	<a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="custom-header" rel="home">
		<img src="<?php echo esc_url(get_header_image()); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr(get_bloginfo( 'title' )); ?>">
	</a>	
<?php endif;  ?>

<header id="header" class="header header-one">
	<div id="above-header" class="above-header">
	   <div class="header-widget header-dark">
			<div class="container">			
				<div class="d-flex align-items-center justify-content-between">
					<div class="widget-left text-lg-left text-center">
						<?php do_action('electromix_abv_hdr_group_1');	?>								
					</div>
					<div class="widget-right justify-content-lg-end text-right text-center">
						<?php do_action('electromix_abv_hdr_group_2');	?>								
					</div>
				</div>
			</div>
	   </div>
	</div>

<!-- start middle-area -->
	<div class="navigator-wrapper">
		<div class="navigation-middle">
			<div class="main-navigation-area d-lg-block d-none">
				<div class="container">
					<div class="row navigation-middle-row">
						<div class="col-lg-3 my-auto">
							<div class="logo">
								<?php do_action('electromix_logo'); ?>
							</div>
						</div>
						<div class="col-lg-9 my-auto">
							<div class="main-menu-right d-flex align-items-center justify-content-end">
								<?php 
								if ( class_exists( 'Ecommerce_Comp_Customizer' ) ) {
									do_action('electromix_hdr_slides');
								}
								?>
								<ul class="menu-right-list">
									<?php 
									do_action('electromix_hdr_account'); 
									do_action('electromix_hdr_cart'); 
									?> 
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<?php get_template_part('template-parts/sections/header-section/mobile','menu'); ?>
		</div>
	</div>
	 <!--===// Start: Header Search 
        =================================-->
		<?php if( class_exists('WooCommerce')) { ?>
		<div id="header-search-bar" class="header-search-bar d-none d-lg-block">
			<div class="container">
			
				<div class="row gx-2">
					<div class="col-3 my-auto">
					<?php 
					$browse_cat_ttl		= get_theme_mod( 'browse_cat_ttl');
					$hs_browse_cat		= get_theme_mod( 'hs_browse_cat','1');
					
					if(class_exists( 'woocommerce' ) && $hs_browse_cat == '1'): 
					?>
						<div class="product-category-browse">
							<button type="button" class="product-category-btn category-toggle" data-target="#category-popup">
								<i class="fa fa-th-large"></i> <?php echo wp_kses_post($browse_cat_ttl); ?>
							</button>
							<div class="docker-widget-popup docker-left" id="category-popup">
								 <div class="docker-div">
									<div class="docker-anim">
										<div class="docker-top">
											<button type="button" class="docker-widget-close close-style"></button>
											<div class="heading">
												<i class="fa fa-th-large" aria-hidden="true"></i>
												<h2><?php echo wp_kses_post($browse_cat_ttl); ?></h2>
											</div>
											<?php do_action('electromix_hdr_product_search'); ?>
										</div>
										<div class="docker-category position-relative">										
											<?php do_action( 'electromix_hdr_browse_cat' ); ?>
										</div>
									</div>
								</div>								
							</div>
						</div>
						<?php endif; ?>
					</div>
					<div class="col-9 my-auto d-flex align-items-center">
						<?php do_action('electromix_hdr_product_search'); ?>
					</div>
				</div>
			</div>
		</div>
		<?php } ?>
		<div class="nav-area d-lg-block d-none">
			<div class="navbar-area sticky-nav <?php echo electromix_sticky_menu(); ?>">
				<div class="container">
					<div class="navigation-content">
						<div class="theme-menu w-100">
							<nav class="menubar main-navbar" id="stMenu">
								<div class="logo d-lg-none">
									<?php do_action('electromix_logo'); ?>
								</div>
								<?php do_action('electromix_main_nav');	?>
							</nav>
						</div>
						<div class="right-widget">
                            <?php hdr_contact_widget(); ?>
                        </div>
					</div>
				</div>
			</div>
		</div>					
<!-- end middle-area -->
</header>