{%- liquid
	if request.design_mode or search.terms == "submenu" or section.index == null
		assign lazyMn = false
	else
		assign lazyMn = section.settings.lazy_mn
	endif
-%}

{%- if lazyMn -%}
	{%- case block.type -%}
		{%- when 'mega_shop' -%}
			<hdt-lazy-submenu id="sub-{{ block.id }}" key="{{ key_brand }}" data-section="{{ section.id }}" class="hdt-sub-menu hdt-mega-menu hdt-mega-shop hdt-absolute" color-scheme="{{ block.settings.mega_menu_colors }}"> </hdt-lazy-submenu>
		{%- when 'mega_product' -%}
			<hdt-lazy-submenu id="sub-{{ block.id }}" key="{{ key_brand }}" data-section="{{ section.id }}" class="hdt-sub-menu hdt-mega-menu hdt-mega-product hdt-absolute" color-scheme="{{ block.settings.mega_menu_colors }}"> </hdt-lazy-submenu>
		{%- when 'mega_page' -%}
			<hdt-lazy-submenu id="sub-{{ block.id }}" key="{{ key_brand }}" data-section="{{ section.id }}" class="hdt-sub-menu hdt-mega-menu hdt-mega-page hdt-absolute" color-scheme="{{ block.settings.mega_menu_colors }}"> </hdt-lazy-submenu>
		{%- when 'html' -%}
			<hdt-lazy-submenu id="sub-{{ block.id }}" key="{{ key_brand }}" data-section="{{ section.id }}" class="hdt-sub-menu hdt-mega-menu hdt-mega-html hdt-absolute" color-scheme="{{ block.settings.mega_menu_colors }}"> </hdt-lazy-submenu>
	{%- endcase -%}
{%- else -%}
{%- case block.type -%}
	{%- when 'mega_shop' -%}
		<div id="sub-{{ block.id }}" class="hdt-sub-menu hdt-mega-menu hdt-mega-shop hdt-absolute" color-scheme="{{ block.settings.mega_menu_colors }}">
			{%- if block.settings.collection_list == blank and link.links == blank -%}
				{{ 'sections.header.add_content' | t: item: "shop" }}
			{%- else -%}
				{%- liquid
		     	assign row_col = 1
		     	if link.links != blank and block.settings.collection_list != blank
		   	 		assign row_col = 2
		   	 		if link.links.size >= 3 and block.settings.collection_list.count >= 3
		   	 			assign row_col = 1
		   	 		endif
		   		endif

		   		assign current_width = settings.page_width | append: 'px'
					assign space_item = "30px"
					if row_col == 2
						assign current_width = current_width | divided_by: 2
					endif
				-%}
				{%- capture sizes -%}
					calc(({{ current_width }} - ({{ space_item }} * ( {{ block.settings.collection_list.count }} - 1 ))) * 1 / {{ block.settings.collection_list.count }})
				{%- endcapture -%}
		   	<div class="hdt-container{% if block.settings.mega_width == "custom" %}-full{% endif %}">
					<div class="hdt-row-grid hdt-row-grid--modify hdt-grid-cols-{{ row_col }} hdt-justify-center hdt-header-gap-20">
					 	{%- if link.links != blank -%}
					 		<div class="hdt-menu-col">
								{%- capture content -%}
									{%- assign cols = 1 -%}
									{%- assign is_heading = false -%}
									{%- liquid
										echo '<div class="hdt-mega-item hdt-text-start">'
											echo '<ul class="hdt-mega-menu-list">'
									-%}
					 				{%- for childlink in link.links -%}
										{%- liquid
											if childlink.title contains "[is_heading]" and is_heading
												echo "</ul>"
												echo "</div>"
												echo '<div class="hdt-mega-item hdt-text-start">'
												echo '<ul class="hdt-mega-menu-list">'
												assign is_heading = false
												assign cols = cols | plus: 1
											endif
										-%}
											<li class="hdt-menu-item hdt-flex hdt-justify-center hdt-flex-col">
												<a id="hdt-menu-{{ childlink.handle }}" href="{{ childlink.url }}" class="{% if childlink.title contains "[is_heading]" %}hdt-mega-heading{%- assign is_heading = true -%}{% endif %} hdt-menu-link hdt-flex hdt-align-center hdt-justify-between hdt-relative hdt-text-base hdt-font-normal {%- if childlink.current %} hdt-menu-link--active{% endif %}"{%- if childlink.current %} aria-current="page"{% endif %}>
													{%- assign arr_title = childlink.title | remove: "[is_heading]" | split: '[' -%}
							            {%- assign arr_label = arr_title[1] | split: ',' -%}
							            <span class="hdt-menu-link-text hdt-block{% if arr_label.size > 0 %} hdt-relative hdt-title_size-{{ arr_title[0].size | at_most: 20 }} hdt-has-{{ arr_label.size | at_most: 2 }}label{% endif %}">
							              <span class="hdt-block hdt-line-clamp">{{ arr_title[0] }}</span>
							              {%- if arr_label.size > 0 -%}
							                <span class="hdt_label_menu hdt-absolute hdt-inline-flex hdt-align-center hdt-justify-center hdt-text-xs hdt-font-medium">
							                  {%- for label in arr_label limit: 2 -%}
							                    {%- assign label_text = label | remove: 'label_' | remove: ','  | remove: ']' | strip -%}
							                    <span class="hdt_label_{{ label_text | handleize }} hdt-flex hdt-align-center hdt-justify-center">{{ label_text }}</span>
							                  {% endfor %}
							                </span>
							              {%- endif -%}
							            </span>
												</a>
											</li>
										{%- liquid
											if forloop.last
													echo "</ul>"
												echo "</div>"
											endif
										-%}
					 				{%- endfor -%}
								{%- endcapture -%}
								<div class="hdt-row-grid hdt-grid-cols-{{ cols | at_most: 6 }} hdt-text-start">{{ content }}</div>
					 		</div>
					 	{%- endif -%}
					 	{%- if block.settings.collection_list != blank -%}
					 		{{ 'hdt-collections-list.css' | asset_url | stylesheet_tag }}
					 		<div class="hdt-collections-col hdt-ratio--{{ block.settings.image_ratio }} {% if block.settings.image_size %} hdt-object-cover{% else %} hdt-object-contain{% endif %}">
					 			<div class="hdt-row-grid hdt-grid-cols-{{ block.settings.collection_list.count }}" style="--content-pd: 40px;">
							 		{%- for collection in block.settings.collection_list -%}
							 			<div class="hdt-mega-item hdt-text-start">
				              {%- assign image = collection.metafields.theme.featured_image_collection.value | default: collection.image | default: collection.products.first.featured_image -%}
				              <div class="hdt-collection-item hdt-mega-item-collection hdt-rounded-f hdt-collection-style1">
											  <div class="hdt-collection-inner hdt-relative hdt-oh hdt-grid">
											    <div class="hdt-collection-img" style="--aspect-ratioapt: {{ image.aspect_ratio | default: 1.2 }};">
											      <div class="hdt-ratio" style="--aspect-ratioapt: {{ image.aspect_ratio | default: 1 }};">
						              		{{ image | image_url: width: image.width | image_tag: loading: 'lazy', width: image.width, height: image.height, class: '', sizes: sizes, widths: '250, 345, 400, 500, 700, 800, 1000, 1400, 1600, 1800, 2000' }}
						              	</div>
											      <a class="hdt-full-width-link" href="{{ collection.url }}"></a>
											    </div>
											    <div class="hdt-collection-content hdt-absolute hdt-place-self-end-center">
										        <a class="hdt-collection-title hdt-inline-flex hdt-align-center hdt-justify-center hdt-text-lg hdt-font-medium" href="{{ collection.url }}">
										          <span class="hdt-collection-title-text hdt-truncate">{{ collection.title }}</span>
										          <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M1.07692 10L0 8.92308L7.38462 1.53846H0.769231V0H10V9.23077H8.46154V2.61538L1.07692 10Z" fill="currentColor"/></svg>
										        </a>
										      </div>
											  </div>
											</div>
			              </div>
			            {%- endfor -%}
					 			</div>
					 		</div>
					 	{%- endif -%}
					</div>
				</div>
			{% endif %}
		</div>
	{%- when 'mega_product' -%}
		<div id="sub-{{ block.id }}" class="hdt-sub-menu hdt-mega-menu hdt-mega-product hdt-absolute" color-scheme="{{ block.settings.mega_menu_colors }}">
			{%- if block.settings.product_list == blank and link.links == blank -%}
				{{ 'sections.header.add_content' | t: item: "products" }}
			{%- else -%}
		   	<div class="hdt-container{% if block.settings.mega_width == "custom" %}-full{% endif %}">
					<div class="hdt-flex hdt-justify-center hdt-header-gap-20">
					 	{%- if link.links != blank -%}
					 		<div class="hdt-menu-col {% if block.settings.product_list != blank %}hdt-custom-col-8{% else %}hdt-custom-col-12{% endif %}">
								{%- capture content -%}
									{%- assign cols = 1 -%}
									{%- assign is_heading = false -%}
									{%- liquid
										echo '<div class="hdt-mega-item hdt-text-start">'
											echo '<ul class="hdt-mega-menu-list">'
									-%}
										{%- for childlink in link.links -%}
										{%- liquid
											if childlink.title contains "[is_heading]" and is_heading
												echo "</ul>"
												echo "</div>"
												echo '<div class="hdt-mega-item hdt-text-start">'
												echo '<ul class="hdt-mega-menu-list">'
												assign is_heading = false
												assign cols = cols | plus: 1
											endif
										-%}
											<li class="hdt-menu-item hdt-flex hdt-justify-center hdt-flex-col">
												<a id="hdt-menu-{{ childlink.handle }}" href="{{ childlink.url }}" class="{% if childlink.title contains "[is_heading]" %}hdt-mega-heading{%- assign is_heading = true -%}{% endif %} hdt-menu-link hdt-flex hdt-align-center hdt-justify-between hdt-relative hdt-text-base hdt-font-normal {%- if childlink.current %} hdt-menu-link--active{% endif %}"{%- if childlink.current %} aria-current="page"{% endif %}>
													{%- assign arr_title = childlink.title | remove: "[is_heading]" | split: '[' -%}
							            {%- assign arr_label = arr_title[1] | split: ',' -%}
							            <span class="hdt-menu-link-text hdt-block{% if arr_label.size > 0 %} hdt-relative hdt-title_size-{{ arr_title[0].size | at_most: 20 }} hdt-has-{{ arr_label.size | at_most: 2 }}label{% endif %}">
							              <span class="hdt-block hdt-line-clamp">{{ arr_title[0] }}</span>
							              {%- if arr_label.size > 0 -%}
							                <span class="hdt_label_menu hdt-absolute hdt-inline-flex hdt-align-center hdt-justify-center hdt-text-xs hdt-font-medium">
							                  {%- for label in arr_label limit: 2 -%}
							                    {%- assign label_text = label | remove: 'label_' | remove: ','  | remove: ']' | strip -%}
							                    <span class="hdt_label_{{ label_text | handleize }} hdt-flex hdt-align-center hdt-justify-center">{{ label_text }}</span>
							                  {% endfor %}
							                </span>
							              {%- endif -%}
							            </span>
												</a>
											</li>
										{%- liquid
											if forloop.last
													echo "</ul>"
												echo "</div>"
											endif
										-%}
									{%- endfor -%}
								{%- endcapture -%}
								<div class="hdt-row-grid hdt-grid-cols-{{ cols | at_most: 6 }} hdt-text-start">{{ content }}</div>
					 		</div>
					 		{% assign links = true %}
					 	{%- endif -%}
					 	{%- if block.settings.product_list != blank -%}
						 	{%- liquid
						 		if links
						 			assign col_pr = 2
						 		else
						 			assign col_pr = 4
						 		endif
						 		assign product_collection = block.settings.product_list | default: block.settings.collection.products
							  assign color_list = 'products.theme_settings.color' | t | downcase | strip | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq
							  assign size_list = 'products.theme_settings.size' | t | downcase | strip | replace: ' ,', ',' | replace: ', ', ',' | split: ',' | uniq
						 	-%}
						 	{%- comment -%}{{ 'hdt-card-products.css' | asset_url | stylesheet_tag }}{%- endcomment -%}

					 		<div class="hdt-products-col {% if link.links != blank %}hdt-custom-col-4{% else %}hdt-custom-col-12{% endif %}">
					 			{% if block.settings.product_list_title != blank %}
					 				<a id="hdt-mega-product-swatch" class="hdt-mega-heading hdt-flex hdt-align-center hdt-justify-between hdt-relative" href="#">
				            <span class="hdt-menu-link-text"> {{ block.settings.product_list_title }}</span>
				          </a>
					 			{% endif %}
					 			<hdt-slider id="Slider-{{ block.id }}" class="hdt-collection-products hdt-slider__products hdt-relative hdt-ratio--{{ block.settings.image_ratio }} {% if block.settings.image_size %} hdt-object-cover{% else %} hdt-object-contain{% endif %} hdt-container--stretch hdt-oh hdt-slider hdt-slides-{{ col_pr }} hdt-slide-spacing-20 md:hdt-slide-spacing-20 hdt-nav-btns-default hdt-nav-middle_in" config='{ "id": "Slider-{{ block.id }}", "navUI": true, "dotUI": false, "navUICenter": true }'>
					 				<div class="hdt-slider__viewport hdt-relative">
						 				<div class="hdt-slider__container">
											{%- liquid
						            if product_collection != blank
				                  capture btn_wishlist_code
				                    if settings.wishlist_mode != '0'
				                      render 'btn-wishlist', class: 'hdt-card-product__btn-wishlist hdt-pr_btn', placement: 'top'
				                    endif
				                  endcapture
				                  for product in product_collection
				                    unless settings.remove_collection_url or block.settings.product_list != blank
				                      assign product_url = product.url
				                    endunless
				                    render 'card-product1', card_product: product, class: "hdt-slider__slide hdt-pr-style1", section_id: block.id, sizes: sizes, image_ratio: block.settings.image_ratio, color_list: color_list, size_list: size_list, product_url: product_url, btn_wishlist_code: btn_wishlist_code
				                  endfor
						            else
						              for i in (1..4)
						                capture current
						                cycle 1, 2 , 3, 4
						                endcapture
						                assign placeholder_image = 'product-apparel-' | append: current
						                render 'card-product-placeholder', image_ratio: block.settings.image_ratio, placeholder_image: placeholder_image, section_id: section.id
						              endfor
						            endif
						          -%}
					          </div>
				          </div>
				          <button class="hdt-slider__button hdt-slider-nav hdt-slider-btn_default hdt-inline-flex hdt-align-center hdt-justify-center hdt-slider__button--prev hdt-absolute" type="button" aria-controls="Slider-{{ block.id }}" name="previous">
							      <svg xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none"><path d="M5.5 11L0 5.5L5.5 0L6.47625 0.97625L1.9525 5.5L6.47625 10.0238L5.5 11Z" fill="currentColor"/></svg>
							    </button>
							    <button class="hdt-slider__button hdt-slider-nav hdt-slider-btn_default hdt-inline-flex hdt-align-center hdt-justify-center hdt-slider__button--next hdt-absolute" type="button" aria-controls="Slider-{{ block.id }}" name="next">
							      <svg xmlns="http://www.w3.org/2000/svg" width="7" height="11" viewBox="0 0 7 11" fill="none"><path d="M1.5 11L7 5.5L1.5 0L0.52375 0.97625L5.0475 5.5L0.52375 10.0238L1.5 11Z" fill="currentColor"/></svg>
							    </button>
					 			</hdt-slider>
					 		</div>
					 	{%- endif -%}
					</div>
				</div>
			{%- endif -%}
		</div>
	{%- when 'mega_page' -%}
    <div id="sub-{{ block.id }}" class="hdt-sub-menu hdt-mega-menu hdt-mega-page hdt-absolute" color-scheme="{{ block.settings.mega_menu_colors }}">
    	{% if link.links == blank %}
				{{ 'sections.header.add_content' | t: item: "pages" }}
			{% else %}
				<div class="hdt-container{% if block.settings.mega_width == "custom" %}-full{% endif %}">
					{%- capture content -%}
						{%- assign cols = 1 -%}
						{%- assign is_heading = false -%}
						{%- liquid
							echo '<div class="hdt-mega-item hdt-text-start">'
								echo '<ul class="hdt-mega-menu-list">'
						-%}
							{%- for childlink in link.links -%}
							{%- liquid
								if childlink.title contains "[is_heading]" and is_heading
									echo "</ul>"
									echo "</div>"
									echo '<div class="hdt-mega-item hdt-text-start">'
									echo '<ul class="hdt-mega-menu-list">'
									assign is_heading = false
									assign cols = cols | plus: 1
								endif
							-%}
								<li class="hdt-menu-item hdt-flex hdt-justify-center hdt-flex-col">
									<a id="hdt-menu-{{ childlink.handle }}" href="{{ childlink.url }}" class="{% if childlink.title contains "[is_heading]" %}hdt-mega-heading{%- assign is_heading = true -%}{% endif %} hdt-menu-link hdt-flex hdt-align-center hdt-justify-between hdt-relative hdt-text-base hdt-font-normal {%- if childlink.current %} hdt-menu-link--active{% endif %}"{%- if childlink.current %} aria-current="page"{% endif %}>
										{%- assign arr_title = childlink.title | remove: "[is_heading]" | split: '[' -%}
										{%- assign arr_label = arr_title[1] | split: ',' -%}
										<span class="hdt-menu-link-text hdt-block{% if arr_label.size > 0 %} hdt-relative hdt-title_size-{{ arr_title[0].size | at_most: 20 }} hdt-has-{{ arr_label.size | at_most: 2 }}label{% endif %}">
											<span class="hdt-block hdt-line-clamp">{{ arr_title[0] }}</span>
											{%- if arr_label.size > 0 -%}
												<span class="hdt_label_menu hdt-absolute hdt-inline-flex hdt-align-center hdt-justify-center hdt-text-xs hdt-font-medium">
													{%- for label in arr_label limit: 2 -%}
														{%- assign label_text = label | remove: 'label_' | remove: ','  | remove: ']' | strip -%}
														<span class="hdt_label_{{ label_text | handleize }} hdt-flex hdt-align-center hdt-justify-center">{{ label_text }}</span>
													{% endfor %}
												</span>
											{%- endif -%}
										</span>
									</a>
								</li>
							{%- liquid
								if forloop.last
										echo "</ul>"
									echo "</div>"
								endif
							-%}
						{%- endfor -%}
					{%- endcapture -%}
					<div class="hdt-row-grid hdt-row-grid--modify hdt-grid-cols-{{ cols | at_most: 6 }} hdt-justify-center hdt-header-gap-20">{{ content }}</div>
				</div>
			{% endif %}
		</div>
  {%- when 'html' -%}
  	<div id="sub-{{ block.id }}" class="hdt-sub-menu hdt-mega-menu hdt-mega-html hdt-absolute" color-scheme="{{ block.settings.mega_menu_colors }}">
  		{%- if block.settings.html == blank and block.settings.page == blank -%}
	  		{{ 'sections.header.add_content' | t: item: "html" }}
			{%- else -%}
	  		{{- block.settings.html -}}
				{%- if block.settings.page != blank -%} {{ pages[block.settings.page].content }}{%- endif -%}
			{%- endif -%}
			{%- if block.settings.page.metafields.home.menu.value != blank -%}
				<div class="hdt-container{% if block.settings.mega_width == "custom" %}-full{% endif %} hdt-text-center">
					<div class="hdt-row-grid hdt-row-grid--modify hdt-grid-cols-1 lg:hdt-grid-cols-6 hdt-justify-center hdt-row-demos">
						{%- for item in block.settings.page.metafields.home.menu.value limit: 12 -%}
							{% assign image = item.image %}
							<div class="hdt-col hdt-demo-item hdt-text-center">
								<a href="{{ item.url }}" title="{{ item.name }}">
									{%- if image != blank -%}
										<div class="hdt-demo-image hdt-relative hdt-block">
											<img src="{{ image | image_url: width: 300 }}" width="600" height="657" srcset="{{ image | image_url: width: 300 }} 1x, {{ image | image_url: width: 600 }} 2x" sizes="300px" loading='lazy'>
											{% if item.label.value.size > 0 %}
												<div class="hdt-demo-label hdt-flex hdt-absolute">
													{%- for label in item.label.value -%}
														<span class="hdt-demo_{{ label | handle }} hdt-flex hdt-align-center hdt-justify-center hdt-text-xs hdt-font-medium">{{ label | escape }}</span>
													{%- endfor -%}
												</div>
											{% endif %}
										</div>
									{%- endif -%}
									<span class="hdt-demo-name hdt-text-base hdt-font-semibold">{{ item.name }}</span>
								</a>
							</div>
						{%- endfor -%}
					</div>
					{%- if block.settings.page.metafields.home.menu.value.count > 12 -%}
						<button aria-controls="modal-{{ block.id }}" class="hdt-viewall-demos hdt-btn hdt-text-base hdt-oh hdt-inline-flex hdt-align-center hdt-justify-center hdt-relative hdt-btn-solid hdt-font-semibold"><span>{{ 'general.demos.view_all_demo' | t }} ({{ block.settings.page.metafields.home.menu.value.count }}+)</span><svg class="hdt-icon hdt-icon-1" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 64 64" fill="currentColor"><path d="M12,56.43,36.48,32,12,7.52,19.53,0,51.61,32,19.53,64Z"></path></svg></button>
						<hdt-modal id="modal-{{ block.id }}" class="hdt-modal hdt-modal-demos hdt-hidden hdt-text-center" config="{&quot;appendToBody&quot;: true}" color-scheme="{{ block.settings.mega_menu_colors }}">
							<div slot="header"><h5 class="hdt-demos-title hdt-font-medium">{{ 'general.demos.demos_full_heading' | t }}</h5></div>
							<div class="hdt-row-grid hdt-row-grid--modify hdt-grid-cols-1 lg:hdt-grid-cols-6 hdt-justify-center hdt-row-demos">
								{%- for item in block.settings.page.metafields.home.menu.value -%}
									{% assign image = item.image %}
									<div class="hdt-col hdt-demo-item hdt-text-center">
										<a href="{{ item.url }}" title="{{ item.name }}">
											{%- if image != blank -%}
												<div class="hdt-demo-image hdt-relative hdt-block">
													<img src="{{ image | image_url: width: 300 }}" width="600" height="657" srcset="{{ image | image_url: width: 300 }} 1x, {{ image | image_url: width: 600 }} 2x" sizes="300px" loading='lazy'>
													{% if item.label.value.size > 0 %}
														<div class="hdt-demo-label hdt-flex hdt-absolute">
															{%- for label in item.label.value -%}
																<span class="hdt-demo_{{ label | handle }} hdt-flex hdt-align-center hdt-justify-center hdt-text-xs hdt-font-medium">{{ label | escape }}</span>
															{%- endfor -%}
														</div>
													{% endif %}
												</div>
											{%- endif -%}
											<span class="hdt-demo-name hdt-text-base hdt-font-semibold">{{ item.name }}</span>
										</a>
									</div>
								{%- endfor -%}
							</div>
						</hdt-modal>
					{%- endif -%}
				</div>
			{%- endif -%}
  	</div>
{%- endcase -%}
{%- endif -%}