<div class="header__inline-menu"{% if section.settings.logo_position ==  'top-left' %} style="--menu-bar-background: {{ section.settings.menu_bar_color }}; --menu-text-color: {{ section.settings.menu_text_color }}"{% endif %}>
    <nav>
        <ul class="list-menu list-menu--inline" role="list">
            {%- for link in section.settings.menu.links -%}
                {% assign customindex = forloop.index | times: 1 %}
                <li data-index="{{ customindex }}" data-value="{{ link.title | handleize }}">
                    {%- liquid
                        for block in section.blocks
                            if block.type == 'megamenu'

                                assign menu_block = blank
                                assign set_megamenu = false
                                assign menu_block = blank
                                assign select_main_menu = block.settings.select_main_menu | times: 1

                                    if select_main_menu == customindex
                                        assign set_megamenu = true
                                        assign menu_block = block
                                        break
                                    endif
                                endif
                        endfor
                    -%}

                    {%- if set_megamenu -%}
                        {% assign menu_columns = menu_block.settings.menu_columns %}
                        <header-menu>
                            <details id="Details-HeaderMenu-{{ forloop.index }}" class="mega-menu">
                                <summary class="header__menu-item header__mege-menu-item header__menu-item-alpha list-menu__item link focus-inset">
                                    <a href="{{ link.url }}" class="header__menu-item-link full-unstyled-link" aria-label="{{ link.url }}">
                                        <span
                                        {% if link.title == section.settings.unique_link %}
                                            class="unique-link"
                                        {% endif %}
                                        >
                                        {{- link.title | escape | upcase -}}
                                        </span>
                                    </a>
                                </summary>
                                <div
                                    id="MegaMenu-Content-{{ forloop.index }}"
                                    class="mega-menu__content gradient motion-reduce global-settings-popup"
                                    tabindex="-1"
                                    style="--menu-columns: {{ menu_columns }};"
                                >
                                    <div class="mega-menu__content-wrap">
                                        {% for i in (1..menu_columns) %}
                                            {% if forloop.first and menu_block.settings.contains_featured_col %}
                                                <div class="mega-menu__item mega-menu__featured-item mega-menu__item-{{ i }} color-{{ menu_block.settings.featured_color_scheme }} gradient">
                                                    {% for j in (1..2) %}
                                                        {% assign heading = 'column***_menu###_heading' | replace: '***', i | replace: '###', j %}
                                                        {% assign heading_link = 'column***_menu###_heading_link' | replace: '***', i | replace: '###', j %}
                                                        {% assign menu = 'column***_menu###' | replace: '***', i | replace: '###', j %}

                                                        {% assign heading_val = menu_block.settings[heading] %}
                                                        {% assign heading_link_val = menu_block.settings[heading_link] %}
                                                        {% assign menu_val = menu_block.settings[menu] %}

                                                        {% if heading_val != blank or menu_val != blank  %}
                                                            <div class="mega-menu__wrap mega-menu__wrap-{{ j }} mega-menu__wrap-featured">
                                                                <a class="mega-menu__title h3" href="{{ heading_link_val }}">{{ heading_val }}</a>
                                                                {% if menu_val.links != blank %}
                                                                    <ul>
                                                                    {% for link in menu_val.links %}
                                                                        <li>
                                                                        <a class="mega-menu__title" href="{{ link.url }}">{{ link.title }}</a>
                                                                        </li>
                                                                    {% endfor %}
                                                                    </ul>
                                                                {% endif %}

                                                            </div>
                                                        {% endif %}
                                                    {% endfor %}

                                                    {% if menu_block.settings.featured_button  %}
                                                        {% capture featured_button %}
                                                            <a class="button featured-button" href="{{ menu_block.settings.feartured_url }}">
                                                                {{ menu_block.settings.featured_button }}
                                                            </a>
                                                        {% endcapture %}
                                                    {% endif %}

                                                </div>
                                            {% else %}
                                                {% assign image = 'column***_image' | replace: '***', i %}
                                                {% assign url = 'column***_url' | replace: '***', i %}
                                                {% assign label = 'column***_label' | replace: '***', i %}

                                                {% assign image_val = menu_block.settings[image] %}
                                                {% assign url_val = menu_block.settings[url] %}
                                                {% assign label_val = menu_block.settings[label] %}


                                                <div class="mega-menu__item mega-menu__simple-item mega-menu__item-{{ i }}">
                                                    {% for j in (1..2) %}
                                                        {% assign heading = 'column***_menu###_heading' | replace: '***', i | replace: '###', j %}
                                                        {% assign heading_link = 'column***_menu###_heading_link' | replace: '***', i | replace: '###', j %}
                                                        {% assign menu = 'column***_menu###' | replace: '***', i | replace: '###', j %}

                                                        {% assign heading_val = menu_block.settings[heading] %}
                                                        {% assign heading_link_val = menu_block.settings[heading_link] %}
                                                        {% assign menu_val = menu_block.settings[menu] %}

                                                        {% if heading_val != blank or menu_val != blank  %}
                                                            <div class="mega-menu__wrap mega-menu__wrap-{{ j }}">
                                                                <a class="mega-menu__title" href="{{ heading_link_val }}">{{ heading_val }}</a>
                                                                {% if menu_val.links != blank %}
                                                                    <ul>
                                                                    {% for link in menu_val.links %}
                                                                        <li>
                                                                        <a class="mega-menu__link" href="{{ link.url }}">{{ link.title }}</a>
                                                                        </li>
                                                                    {% endfor %}
                                                                    </ul>
                                                                {% endif %}

                                                            </div>
                                                        {% endif %}
                                                    {% endfor %}

                                                    <a class="mega-menu__link mega-menu__img" href="{{ url_val }}">
                                                        {% if image_val != blank %}
                                                            {% render 'image', image: image_val %}
                                                        {% endif %}
                                                        <h5 class="mega-menu-item_label">{{ label_val }}</h5>
                                                    </a>
                                                </div>
                                            {% endif %}
                                        {% endfor %}

                                        {% if menu_block.settings.contains_featured_col %}
                                            <div class="mega-menu__item mega-menu__featured-button color-{{ menu_block.settings.featured_color_scheme }} gradient">
                                                {{ featured_button }}
                                            </div>
                                        {% endif %}

                                        {% if menu_block.settings.popular_brands %}
                                            <div class="mega-menu__item menu-footer">   
                                                <ul>
                                                    {% for brand in menu_block.settings.popular_brands %}
                                                        {% if forloop.first %}
                                                            <li class="mega-menu__title" href="{{ menu_block.settings.footer_heading_link }}" aria-label="">{{ menu_block.settings.footer_heading }}</li>
                                                        {% endif %}
                                                        <li class="mega-menu__logo-item" aria-label="{{ brand.name | handleize }}">
                                                            <a class="mega-menu__logo" href="{{ brand.link }}">
                                                                {{ brand.image | image_url: width: brand.image.width | image_tag }}
                                                            </a>
                                                        </li>
                                                    {% endfor %}
                                                </ul>                                               
                                            </div>   
                                        {% endif %}                                   
                                    </div>
                                </div>
                            </details>
                        </header-menu>
                    {%- else -%}
                        <a
                            href="{{ link.url }}"
                            class="header__menu-item header__menu-item-terra list-menu__item link link--text focus-inset"
                            {% if link.current %}
                            aria-current="page"
                            {% endif %}
                        >
                            <span class="{%- if link.current %}header__active-menu-item {% endif %}{% if link.title == section.settings.unique_link %}unique-link{% endif %}">
                            {{- link.title | escape | upcase -}}
                            </span>
                        </a>
                    {%- endif -%}
                </li>
            {%- endfor -%}
        </ul>
    </nav>
    <div class="nav-annoucement-bar color-{{ section.settings.announcement_color_scheme }} gradient">
        <slideshow-component
            class="announcement-bar"
            role="region"
            aria-roledescription="{{ 'sections.announcements.carousel' | t }}"
            aria-label="{{ 'sections.announcements.announcement_bar' | t }}"
        >
            <div class="announcement-bar-slider slider-buttons">
            <button
                type="button"
                class="slider-button slider-button--prev"
                name="previous"
                aria-label="{{ 'sections.announcements.previous_announcement' | t }}"
                aria-controls="Slider-{{ section.id }}"
            >
                <span class="svg-wrapper">
                {{- 'icon-caret.svg' | inline_asset_content -}}
                </span>
            </button>
            <div
                class="grid grid--1-col slider slider--everywhere"
                id="Slider-{{ section.id }}"
                aria-live="polite"
                aria-atomic="true"
                data-autoplay="{{ section.settings.auto_rotate }}"
                data-speed="{{ section.settings.change_slides_speed }}"
            >
                {%- for block in section.blocks -%}
                {%- case block.type -%}
                    {%- when 'announcement' -%}
                    <div
                        class="slideshow__slide slider__slide grid__item grid--1-col"
                        id="Slide-{{ section.id }}-{{ forloop.index }}"
                        {{ block.shopify_attributes }}
                        role="group"
                        aria-roledescription="{{ 'sections.announcements.announcement' | t }}"
                        aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
                        tabindex="-1"
                    >
                        <div
                        class="announcement-bar__announcement"
                        role="region"
                        aria-label="{{ 'sections.header.announcement' | t }}"
                        >
                        {%- if block.settings.text != blank -%}
                            {%- if block.settings.link != blank -%}
                            <a
                                href="{{ block.settings.link }}"
                                class="announcement-bar__link link link--text focus-inset animate-arrow"
                            >
                            {%- endif -%}
                            <h5 class="announcement-bar__message h5 {{ block.settings.text_alignment }}">
                            <span>{{ block.settings.text | escape }}</span>
                            {%- if block.settings.link != blank -%}
                                {{- 'icon-arrow.svg' | inline_asset_content -}}
                            {%- endif -%}
                            </h5>
                            {%- if block.settings.link != blank -%}
                            </a>
                            {%- endif -%}
                        {%- endif -%}
                        </div>
                    </div>
                    {% endcase %}
                {%- endfor -%}
            </div>
            <button
                type="button"
                class="slider-button slider-button--next"
                name="next"
                aria-label="{{ 'sections.announcements.next_announcement' | t }}"
                aria-controls="Slider-{{ section.id }}"
            >
                <span class="svg-wrapper">
                {{- 'icon-caret.svg' | inline_asset_content -}}
                </span>
            </button>
            </div>
        </slideshow-component>
    </div>
    {% render 'header-search', input_id: 'Search-In-Modal' %} 
</div>