ink icon-with-text" role="tab" aria-controls="TabPanel-{{ block.id }}-{{ forloop_index }}" data-index="{{ forloop_index }}"{% if forloop_first %} disabled{% endif %}>
                    {{- tab_heading -}}
                  </button>
                  {%- liquid
                    assign forloop_first = false
                    assign forloop_index = forloop_index | plus: 1
                  -%}
                {%- else -%}
                  <a href="{{ block.settings[tab_target_link].url }}" class="mega-menu__nav-item flex gap-2 items-center opacity-0 link icon-with-text">
                    {{- tab_heading -}}
                  </a>
                {%- endif -%}
              {%- endif -%}
            {%- endfor -%}
          </tabs-element>
          {%- if block.settings.button_label != blank -%}
            <div class="mega-menu__footer relative">
              <a class="mega-menu__link link icon-with-text flex items-center justify-between w-full h-full"{% if block.settings.button_link != blank %} href="{{ block.settings.button_link }}"{% if block.settings.button_external %} target="_blank" rel="noopener"{% endif %}{% else %} role="link" aria-disabled="true"{% endif %}>
                <span class="heading link-text text-base-xl tracking-tight">{{ block.settings.button_label | escape }}</span>
                {%- render 'icon', icon: 'arrow-right', size: 'sm', class: 'transform shrink-0' -%}
              </a>
            </div>
          {%- endif -%}
        </li>
        <li class="mega-menu__item mega-menu__item--panels opacity-0 w-full">
          {%- liquid
            assign forloop_first = true
            assign forloop_index = 0
          -%}
          {%- for i in (1..5) -%}
            {%- assign tab_target_link = 'tab_target_link_' | append: i -%}
            {%- if block.settings[tab_target_link] != blank and block.settings[tab_target_link].type == 'collection_link' -%}
              {%- liquid
                assign promo_image = 'promo_image_' | append: i
                assign tab_target = 'tab_target_' | append: i
                assign tab_target_heading = block.settings[tab_target] | default: block.settings[tab_target_link].object.title
                assign tab_products = 'tab_products_' | append: i
                assign products = block.settings[tab_products] | default: block.settings[tab_target_link].object.products
              -%}
              <div id="TabPanel-{{ block.id }}-{{ forloop_index }}" class="mega-menu__panel{% if block.settings[promo_image] == blank %} without-promo{% endif %} flex w-full" role="tabpanel"{% unless forloop_first %} hidden{% endunless %}>
                <div class="grid gap-8">
                  <div class="flex items-center justify-between gap-4">
                    {%- if block.settings.heading_2 != blank -%}
                      <p class="text-sm text-opacity leading-none uppercase">{{ block.settings.heading_2 | escape }}</p>
                    {%- endif -%}
                    <a class="mega-menu__link link icon-with-text" href="{{ block.settings[tab_target_link].object.url }}">
                      <span class="heading link-text text-base-xl tracking-tight flex items-center gap-1">
                        {{- 'collections.subcollections.all_products' | t: collection: tab_target_heading -}}
                        <span class="text-base font-medium tracking-tight">({{ block.settings[tab_target_link].object.all_products_count }})</span>
                      </span>
                      {%- render 'icon', icon: 'arrow-right', size: 'sm', class: 'transform shrink-0' -%}
                    </a>
                  </div>
                  <motion-list class="product-grid card-grid card-grid--4 mobile:card-grid--1 grid" initialized>
                    {%- for product in products limit: 4 -%}
                      {%- render 'product-card',
                        product: product,
                        product_id: product.id,
                        section_id: section.id,
                        block_id: block.id,
                        lazy_load: false,
                        image_ratio: settings.product_image_ratio,
                        image_fill: settings.product_image_fill,
                        show_secondary_image: settings.product_secondary_image,
                        show_vendor: settings.product_vendor,
                        show_rating: settings.product_rating,
                        show_color_swatches: settings.product_color_swatches,
                        show_countdown: settings.product_countdown,
                        show_quick_add: settings.product_quick_add,
                        show_quick_view: settings.product_quick_view,
                        show_save_amount: settings.product_save_amount,
                        save_type: settings.product_save_type,
                        show_icon_list: false
                      -%}
                    {%- else -%}
                      {%- for i in (1..4) -%}
                        {%- capture placeholder -%}product-{% cycle '1', '2', '3', '4' %}{%- endcapture -%}
                        {%- render 'product-card-placeholder',
                          lazy_load: false,
                          image_ratio: settings.product_image_ratio,
                          image_fill: settings.product_image_fill,
                          show_secondary_image: settings.product_secondary_image,
                          show_vendor: settings.product_vendor,
                          show_rating: settings.product_rating,
                          show_color_swatches: settings.product_color_swatches,
                          show_countdown: settings.product_countdown,
                          show_quick_add: settings.product_quick_add,
                          show_quick_view: settings.product_quick_view,
                          show_save_amount: settings.product_save_amount,
                          save_type: settings.product_save_type,
                          placeholder: placeholder
                        -%}
                      {%- endfor -%}
                    {%- endfor -%}
                  </motion-list>
                </div>
                {%- if block.settings[promo_image] != blank -%}
                  {%- liquid
                    assign promo_image_ratio = 'promo_image_ratio_' | append: i
                    assign promo_heading = 'promo_heading_' | append: i
                    assign promo_subtext = 'promo_subtext_' | append: i
                    assign promo_overlay_content = 'promo_overlay_content_' | append: i
                    assign promo_link = 'promo_link_' | append: i
                    assign promo_tag = 'promo_tag_' | append: i
                    assign promo_color_text = 'promo_color_text_' | append: i
                    assign promo_color_overlay = 'promo_color_overlay_' | append: i
                    assign promo_overlay_opacity = 'promo_overlay_opacity_' | append: i
                  -%}
                  <div class="media-card media-card--{{ settings.card_style }}{% if block.settings[promo_overlay_content] %} media-card--overlap{% endif %}">
                    <a class="media-card__link flex flex-col w-full h-full relative"{% if block.settings[promo_link] != blank %} href="{{ block.settings[promo_link] }}"{% else %} role="link" aria-disabled="true"{% endif %}
                      aria-label="{{ block.settings[promo_heading] | default: block.settings[promo_subtext] | escape }}"
                      style="--color-foreground: {{ block.settings[promo_color_text].rgb }}; --color-overlay: {{ block.settings[promo_color_overlay].rgb }}; --overlay-opacity: {{ block.settings[promo_overlay_opacity] | divided_by: 100.0 }};"
                    >
                      {%- if block.settings[promo_tag] != blank -%}
                        <div class="badges z-2 absolute grid gap-3 pointer-events-none">
                          <span class="badge badge--onsale flex items-center gap-1d5 font-medium leading-none rounded-full">{{ block.settings[promo_tag] | escape }}</span>
                        </div>
                      {%- endif -%}
                      <div class="media media--{{ block.settings[promo_image_ratio] }} relative overflow-hidden">
                        {{- block.settings[promo_image] | image_url: width: block.settings[promo_image].width | image_tag: loading: 'lazy', widths: '180,360,540,720,900,1080', is: 'lazy-image' -}}
                      </div>
                      {%- if block.settings[promo_heading] != blank or block.settings[promo_subtext] != blank -%}
                        <div class="media-card__content flex justify-between items-center gap-4 w-full">
                          <div class="media-card__text opacity-0 shrink-1 grid gap-0d5">
                            {%- if block.settings[promo_heading] != blank -%}
                              <p>
                                <span class="heading reversed-link text-xl-3xl tracking-tighter leading-tight">{{ block.settings[promo_heading] | escape }}</span>
                              </p>
                            {%- endif -%}
                            {%- if block.settings[promo_subtext] != blank -%}
                              <p class="leading-none text-xs">{{ block.settings[promo_subtext] }}</p>
                            {%- endif -%}
                          </div>
                          {%- render 'icon', icon: 'arrow-right', size: 'xs', class: 'transform shrink-0 hidden xl:block' -%}
                        </div>
                      {%- endif -%}
                    </a>
                  </div>
                {%- endif -%}
              </div>
              {%- liquid
                assign forloop_first = false
                assign forloop_index = forloop_index | plus: 1
              -%}
            {%- endif -%}
          {%- endfor -%}
        </li>
      </ul>
    {%- endunless -%}
  </div>
{%- endif -%}  in this code add alphabet  and 0-9 number feature to filter menu