/** Shopify CDN: Minification failed

Line 145:0 Unexpected "<"
Line 147:1 Expected identifier but found "%"
Line 156:0 Unexpected "<"
Line 157:2 Expected identifier but found "%"
Line 158:1 Unexpected "{"
Line 158:2 Expected identifier but found "%"
Line 160:1 Unexpected "<"
Line 161:3 Expected identifier but found "%"
Line 162:3 Unexpected "<"
Line 163:5 Expected identifier but found "%"
... and 145 more hidden warnings

**/

	/* --- FULL SCREEN SPLIT SIDEBAR (FIXED LAYOUT) --- */
	
	/* 1. Main Drawer Container - Poora Screen */
	.menu-drawer {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important; /* Left side se start */
		right: 0 !important;
		width: 100% !important; /* Poora width */
		height: 100vh !important;
		height: 100dvh !important;
		
		padding: 0 !important;
		border: none !important;
		background-color: #ffffff !important;
		
		/* Animation */
		transform: translateX(100%) !important; /* Right side se slide karega */
		transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
		
		z-index: 9999 !important;
		visibility: visible !important;
		opacity: 1 !important;
		overflow: hidden !important; /* Scroll inner container karega */
	}
	
	/* 2. Drawer Open State */
	details[open] > .menu-drawer,
	details.menu-opening > .menu-drawer {
		transform: translateX(0) !important;
	}
	
	/* 3. Inner Container - Flexbox Split Layout */
	.menu-drawer__inner-container {
		display: flex !important; /* Grid ki jagah Flex use kiya hai */
		flex-direction: row !important;
		width: 100% !important;
		height: 100% !important;
		background-color: #ffffff !important;
	}
	
	/* 4. Left Side: Menu Area (Fixed Width) */
	.menu-drawer__navigation-container {
		width: 320px !important; /* Menu ki fixed width */
		min-width: 280px !important;
		height: 100% !important;
		background-color: #ffffff !important;
		border-right: 1px solid #e5e5e5 !important; /* Divider line */
		
		display: flex !important;
		flex-direction: column !important;
		padding: 80px 20px 20px 20px !important; /* Top padding for close btn */
		
		overflow-y: auto !important;
		overflow-x: hidden !important;
		flex-shrink: 0 !important; /* Width shrink nahi hogi */
	}

	/* 5. Right Side: Images/Promo Area (Remaining Space) */
	.menu-drawer__main,
	.menu-drawer__utility-links {
		flex-grow: 1 !important; /* Baaki space le lega */
		height: 100% !important;
		background-color: #f9f9f9 !important; /* Light grey background */
		
		display: flex !important;
		flex-direction: column !important;
		justify-content: center !important;
		align-items: center !important;
		padding: 30px !important;
		
		overflow-y: auto !important;
	}

	/* 6. Overlay (Dark Background) */
	menu-drawer > details[open] > summary::before {
		content: "" !important;
		position: fixed !important;
		inset: 0 !important;
		background-color: rgba(0, 0, 0, 0.5) !important;
		z-index: 9998 !important;
		opacity: 1 !important;
		visibility: visible !important;
	}

	/* 7. Close Button - FIXED AND VISIBLE */
	.menu-drawer__close-button {
		display: flex !important; /* Force display */
		position: absolute !important;
		top: 20px !important;
		left: 20px !important; /* Left side mein shift kiya */
		width: 50px !important;
		height: 50px !important;
		border-radius: 50% !important;
		background: #f5f5f5 !important;
		z-index: 99999 !important; /* Highest z-index */
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
		box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
	}

	/* X Icon SVG Styling */
	.menu-drawer__close-button svg {
		width: 20px !important;
		height: 20px !important;
		color: #333 !important;
	}
    
    /* 8. Menu Links Styling */
    .menu-drawer__menu-item {
        font-size: 18px !important;
        padding: 12px 5px !important;
        border-bottom: 1px solid #eee !important;
    }

    /* 9. Mobile Responsive: Small screen par full width menu */
    @media screen and (max-width: 768px) {
        .menu-drawer__navigation-container {
            width: 100% !important; /* Mobile par full width */
            border-right: none !important;
        }
        /* Right side images ko mobile par chhota karein ya hide karein */
        .menu-drawer__main,
        .menu-drawer__utility-links {
            display: none !important; /* Ya width 100% kar dein agar images dikhani hain */
        }
    }
</style>

{% liquid
	assign enable_burger_menu = false
	for block in section.blocks
		if block.type == 'burger_menu'
			assign enable_burger_menu = true
		endif
	endfor
%}

<div class='menu_left_block'>
	{% render 'desktop-burger-menu' %}
	{% render 'header-logo', tag: 'h1' %}

	<nav class='header__inline-menu'>
		{%- if section.settings.menu != blank -%}
			<ul class='list-menu list-menu--inline' role='list'>
				{%- for link in section.settings.menu.links -%}
					{% liquid
						assign mega_menu = false
					%}
					{%- if link.links != blank -%}
						{% if section.blocks.size > 0 %}
							{% for block in section.blocks %}
								{% liquid
									assign mega_menu_trigger = block.settings.mega_menu_trigger | handle | strip
									if link.handle == mega_menu_trigger
										assign mega_menu = true
										assign shopify_attributes = block.shopify_attributes
									endif
								%}
							{% endfor %}
						{% endif %}
						<li class='list-menu-item {% if mega_menu %}list-menu--megamenu {% else %}list-menu--submenu{% endif %}' {{ shopify_attributes }}>
							{% if mega_menu %}
								{% render 'mega-menu', link: link, blocks: section.blocks %}
							{% endif %}
							<a href='{{ link.url }}' class='header__menu-item list-menu__item link focus-inset {%- if link.active %} header__active-menu-item{% endif %}' aria-label='{{ link.title | escape }}'>
								<span class='list-menu-line link-hover-line' title='{{ link.title | escape }}'>{{ link.title | escape }}</span>
							</a>
							{% if mega_menu == false %} {% render 'submenu', link: link %} {% endif %}
						</li>
					{%- else -%}
						<li class='list-menu-item'>
							<a href='{{ link.url }}' class='header__menu-item list-menu__item link focus-inset {%- if link.active %} header__active-menu-item{% endif %}' aria-label='{{ link.title | escape }}'>
								<span class='list-menu-line link-hover-line' title='{{ link.title | escape }}'>{{ link.title | escape }}</span>
							</a>
						</li>
					{%- endif -%}
				{%- endfor -%}
			</ul>
		{%- endif -%}
	</nav>
</div>

<div class='header__column'>
	<div class='header__icons'>
		{% render 'header-region', section: section %}
		{%- if section.settings.scheme_position == 'right' -%} {% render 'color-scheme' %} {%- endif -%}
			{%- comment -%} 2. SEARCH {%- endcomment -%}
			{%- if section.settings.enable_search -%}
				{% if request.page_type != 'search' %}
					<div class='header__search header__icons--hover{% if section.settings.search_button_type == 'icon' %} only_icon{% elsif section.settings.search_button_type == 'text' %} only_text{% endif %}{% if section.settings.search_mobile_button_type == 'icon' %} mobile_only_icon{% elsif section.settings.search_mobile_button_type == 'text' %} mobile_only_text{% endif %}'>
						<div class='header__icon header__icon--search link--text header__icon--summary focus-inset modal__toggle header__icons--container' aria-haspopup='dialog' role='button' id='search-icon-open'>
							{% render 'icon-search' %}
							<span class='link-hover-line search-name'>{{- 'sections.header.search' | t -}}</span>
						</div>
					</div>
				{% else %}
					<div class='header__search header__icons--hover{% if section.settings.search_button_type == 'icon' %} only_icon{% elsif section.settings.search_button_type == 'text' %} only_text{% endif %}{% if section.settings.search_mobile_button_type == 'icon' %} mobile_only_icon{% elsif section.settings.search_mobile_button_type == 'text' %} mobile_only_text{% endif %}'>
						<a href='{{ routes.search_url }}' class='header__icon header__icon--search focus-inset header__icons--container' aria-label='{{ 'general.search.search' | t }}'>
							{% render 'icon-search' %}
							<span class='link-hover-line search-name'>{{- 'sections.header.search' -}}</span>
						</a>
					</div>
				{% endif %}
			{%- endif -%}

			{%- comment -%} 3. ACCOUNT {%- endcomment -%}
			{%- if shop.customer_accounts_enabled -%}
				<div class='header__account header__icons--hover{% if section.settings.account_button_type == 'icon' %} only_icon{% endif %}'>
					{%- if request.page_type != 'customers/account' and settings.account_type == 'drawer' -%}
						<details>
							<summary class='header__icon header__icon--account link--text header__icon--summary focus-inset modal__toggle header__icons--container' aria-haspopup='dialog' id='account-icon-open'>
								{%- if section.settings.account_button_type == 'icon' or section.settings.account_button_type == 'icon-and-text' -%} {% render 'icon-account' %} {% endif %}
								{%- if section.settings.account_button_type == 'text' or section.settings.account_button_type == 'icon-and-text' -%} <span class='link-hover-line'>{{- 'sections.header.account' -}}</span> {% endif %}
							</summary>
						</details>
					{%- else -%}
						<a class='header__icon header__icon-link header__icon--account link--text header__icon--summary focus-inset modal__toggle header__icons--container' href='{%- if customer -%}{{ routes.account_url }}{%- else -%}{{ routes.account_login_url }}{%- endif -%}'>
							{%- if section.settings.account_button_type == 'icon' or section.settings.account_button_type == 'icon-and-text' -%} {% render 'icon-account' %} {% endif %}
							{%- if section.settings.account_button_type == 'text' or section.settings.account_button_type == 'icon-and-text' -%} <span class='link-hover-line'>{{- 'sections.header.account' -}}</span> {% endif %}
						</a>
					{%- endif -%}
				</div>
			{%- endif -%}

			{%- comment -%} 4. CART {%- endcomment -%}
			<div class='header__cart header__icons--hover{% if request.page_type == 'cart' %} header__cart--page{% endif %}{% if section.settings.cart_button_type == 'text' %} only_text{% elsif section.settings.cart_button_type == 'icon' %} only_icon{% endif %}{%if section.settings.cart_mobile_button_type == 'text' %} mobile_only_text{% elsif section.settings.cart_mobile_button_type == 'icon' %} mobile_only_icon{% endif %}'>
				<a href='{{ routes.cart_url }}' class='header__icon header__icon--cart link link--text focus-inset header__icons--container' id='cart-icon-bubble'>
					{% render 'icon-cart' %}
					<div class='header__cart--text link-hover-line header__icon--cart'>
						<span class='text-cart'>{{ 'sections.header.cart' | t }}</span>
						<span class='visually-hidden'>{{ 'templates.cart.cart' | t }}</span>
						<div class='cart-count-bubble'>
							{%- if cart.item_count < 100 -%} <span aria-hidden='true'>({{ cart.item_count }})</span> {%- endif -%}
							<span class='visually-hidden'>{{- 'sections.header.cart_count' | t: count: cart.item_count -}}</span>
						</div>
					</div>
				</a>
			</div>

			{%- comment -%} 5. BURGER ICON {%- endcomment -%}
			{%- if section.settings.menu != blank or enable_burger_menu -%}
				<div class="header__mobile-burger header__icons--hover">
					{% render 'header-drawer' %}
				</div>
			{%- endif -%}

		</div>
	</div>
</div>