{% comment %}
  Renders product variant-picker with show more functionality

  Accepts:
  - product: {Object} product object.
  - block: {Object} passing the block information.
  - product_form_id: {String} Id of the product form to which the variant picker is associated.
  - update_url: {Boolean} whether or not to update url when changing variants. If false, the url isn't updated. Default: true (optional).
  Usage:
  {% render 'ascendify-product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}

{%- style -%}
  {% if block.settings.variant_pills_checkmark %}
  .product-form__input:not(.product-form__input--toggle) input[type=radio]:checked+label:after {
    background-color: {% if block.settings.variant_pills_checkmark_use_custom_color %}{{ block.settings.variant_pills_checkmark_custom_color }}{% else %}rgb(var(--color-base-accent-1)){% endif %};
    color: rgb(var(--color-background));
    position: absolute;
    content: "\2713";
    top: -15px;
    right: -8px;
    border: 0px;
    border-radius: 100%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: bold;
  }
  {% endif %}

  {% if block.settings.variantborder %}
  .product-form__input {
   border-bottom: 1px solid #e6e6e6;
   padding-bottom: 20px;
   max-width: 100%;
  }
  {% endif %}

  .custom-variant-flex {
        display: flex !important;
        width: 50% !important;
        gap: 10px;
    }

    {% comment %} Step number styling {% endcomment %}
    {% if block.settings.show_variant_step_numbers %}
    .variant-step-number {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: {{ block.settings.step_number_background_color | default: '#000000' }};
      color: {{ block.settings.step_number_text_color | default: '#ffffff' }};
      border-radius: {{ block.settings.step_number_border_radius | default: 50 }}%;
      width: {{ block.settings.step_number_size | default: 24 }}px;
      height: {{ block.settings.step_number_size | default: 24 }}px;
      font-size: {{ block.settings.step_number_font_size | default: 12 }}px;
      font-weight: {{ block.settings.step_number_font_weight | default: 'bold' }};
      margin-right: {{ block.settings.step_number_margin_right | default: 8 }}px;
      min-width: {{ block.settings.step_number_size | default: 24 }}px;
      flex-shrink: 0;
    }

    .form__label--with-step {
      display: flex;
      align-items: center;
    }
    {% endif %}

    {% comment %} Show More functionality styles {% endcomment %}
    .variant-options-container {
      position: relative;
    }

    .show-more-trigger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: {{ block.settings.show_more_bg_color | default: '#f5f5f5' }};
      color: {{ block.settings.show_more_text_color | default: '#333' }};
      border: {{ block.settings.show_more_border_width | default: 1 }}px solid {{ block.settings.show_more_border_color | default: '#ddd' }};
      border-radius: {{ block.settings.show_more_border_radius | default: 4 }}px;
      padding: 8px 12px;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.2s ease;
      margin: 5px 5px 5px 0;
      min-height: 40px;
      font-weight: 500;
    }

    .show-more-trigger:hover {
      background-color: {{ block.settings.show_more_hover_bg_color | default: '#e8e8e8' }};
      transform: translateY(-1px);
    }

    .show-less-trigger {
      display: none;
      margin-top: 10px;
      font-size: 14px;
      color: {{ block.settings.show_more_text_color | default: '#333' }};
      cursor: pointer;
      text-decoration: underline;
    }

    .variant-option-item.hidden {
      display: none !important;
    }

    .swatch.hidden {
      display: none !important;
    }

    {% if block.settings.show_divider_line %}
    .form__label.form__label--with-divider {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .form__label.form__label--with-divider::after {
      content: "";
      flex: 1;
      height: {{ block.settings.divider_thickness }}px;
      background-color: {{ block.settings.divider_color }};
      margin-left: {{ block.settings.space_between }}px;
      {% if block.settings.divider_style == 'dashed' %}
      background-image: repeating-linear-gradient(to right, {{ block.settings.divider_color }} 0px, {{ block.settings.divider_color }} 5px, transparent 5px, transparent 10px);
      background-color: transparent;
      {% endif %}
    }
    {% endif %}

  {% if block.settings.swatch_soldout_line %}
  .color-swatch:has(input.disabled)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10%;
    width: 120%;
    height: {{ block.settings.swatch_soldout_line_width | default: 2 }}px;
    background-color: {{ block.settings.swatch_soldout_line_color | default: '#FF0000' }};
    transform: translateY(-50%) rotate({{ block.settings.swatch_soldout_line_direction | default: '45' }}deg);
    transform-origin: center;
    pointer-events: none;
    z-index: 2;
  }
  {% endif %}

    /* Complete Toggle Button Styles */

  /* Remove background/border from toggle variant input wrapper */
  .product-form__input--toggle {
    border: none !important;
    background: none !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  .product-form__input--toggle .product-form__label-container {
    margin-bottom: 10px !important;
  }

  /* Main toggle container */
  .product-form__input--toggle .toggle-container {
    display: flex !important;
    background-color: #f5f5f5 !important;
    border: 2px solid #ddd !important;
    border-radius: 50px !important;
    padding: 0 !important;
    position: relative !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 18px 0 !important;
    height: 48px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1) !important;
  }

  /* Toggle option base styles */
  .product-form__input--toggle .toggle-option {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    position: relative !important;
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
    color: #666 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-align: center !important;
  }

  /* Unselected toggle options */
  .product-form__input--toggle .toggle-option:not(.selected) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #666 !important;
  }

  /* Selected toggle option */
  .product-form__input--toggle .toggle-option.selected {
    background-color: {{ block.settings.toggle_selected_color | default: '#000000' }} !important;
    color: {{ block.settings.toggle_selected_text_color | default: 'white' }} !important;
    border-radius: 46px !important;
    margin: 2px !important;
    box-shadow: 0 2px 4px rgba(139, 69, 19, 0.3) !important;
    border: none !important;
  }

  /* Ensure first and last selected options have proper border radius */
  .product-form__input--toggle .toggle-option:first-child.selected {
    border-radius: 46px 46px 46px 46px !important;
  }

  .product-form__input--toggle .toggle-option:last-child.selected {
    border-radius: 46px 46px 46px 46px !important;
  }

  /* Hide radio inputs */
  .product-form__input--toggle .toggle-option input[type="radio"] {
    display: none !important;
  }

  /* Toggle option labels */
  .product-form__input--toggle .toggle-option label {
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: inherit !important;
    color: inherit !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: none !important;
  }

  /* Toggle price display */
  .product-form__input--toggle .toggle-price {
    font-size: 11px !important;
    opacity: 0.9 !important;
    margin-top: 1px !important;
  }

  /* Toggle badge (for special offers) */
  .product-form__input--toggle .toggle-badge {
    text-align: center !important;
    font-size: 8px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: normal !important;
    text-transform: uppercase !important;
    border-radius: 200px !important;
    color: {{ block.settings.toggle_badge_text_color | default: 'white' }} !important;
    background: {{ block.settings.toggle_badge_bg_color | default: '#FF0000' }} !important;
    padding: 5px 10px !important;
    width: fit-content !important;
    position: absolute !important;
    transform: translateX(-50%) !important;
    left: 50% !important;
    top: -15px !important;
    max-width: fit-content !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
    z-index: 1;
  }

  /* Remove any default styling from all child elements */
  .product-form__input--toggle .toggle-option * {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
  }

  /* Hover effect for unselected options */
  .product-form__input--toggle .toggle-option:not(.selected):hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-radius: 46px !important;
    margin: 2px !important;
  }

  /* Mobile optimizations */
  @media (max-width: 767px) {
    .product-form__input--toggle .toggle-container {
      margin: 18px 0 18px 0 !important;
      height: 44px !important;
    }

    .product-form__input--toggle .toggle-option {
      padding: 6px 8px !important;
      font-size: 11px !important;
    }

    .product-form__input--toggle .toggle-price {
      font-size: 9px !important;
      margin-top: 2px !important;
    }

    .product-form__input--toggle .toggle-badge {
      font-size: 7px !important;
      padding: 3px 6px !important;
      top: -12px !important;
    }
  }

  @media (max-width: 480px) {
    .product-form__input--toggle .toggle-option {
      padding: 4px 6px !important;
      font-size: 10px !important;
    }

    .product-form__input--toggle .toggle-container {
      height: 40px !important;
    }

    .product-form__input--toggle .toggle-price {
      font-size: 8px !important;
    }
  }
  /* Vertical Cards Style */
  .product-form__input--vertical-cards {
    border: none !important;
    padding-bottom: 0 !important;
  }

  .vertical-cards-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
  }

  /* Grid layout (2 per row) */
  .vertical-cards-container.layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .vertical-card-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border: 2px solid {{ block.settings.vertical_card_border_color | default: '#e6e6e6' }};
    border-radius: {{ block.settings.vertical_card_border_radius | default: 8 }}px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    position: relative;
  }

  /* Compact style for grid layout */
  .vertical-cards-container.layout-grid .vertical-card-option {
    padding: 10px 12px;
  }

  .vertical-card-option:hover {
    border-color: {{ block.settings.vertical_card_border_color | color_darken: 10 }};
  }

  .vertical-card-option.selected {
    border-color: {{ block.settings.vertical_card_border_color_selected | default: '#000' }};
    background-color: {{ block.settings.vertical_card_bg_color_selected | default: '#f9f9f9' }};
  }

  .vertical-card-option input[type="radio"] {
    display: none;
  }

  .vertical-card-image {
    width: 48px;
    height: 48px;
    border-radius: {{ block.settings.vertical_card_image_border_radius | default: 24 }}px;
    object-fit: cover;
    margin-right: 16px;
    flex-shrink: 0;
  }

  /* Smaller image for grid layout */
  .vertical-cards-container.layout-grid .vertical-card-image {
    width: 40px;
    height: 40px;
    margin-right: 12px;
  }

  .vertical-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .vertical-card-name {
    font-size: 16px;
    font-weight: 500;
    color: {{ block.settings.vertical_card_name_color | default: '#000' }};
    margin-bottom: 2px;
  }

  /* Smaller text for grid layout */
  .vertical-cards-container.layout-grid .vertical-card-name {
    font-size: 14px;
  }

  .vertical-card-badge {
    font-size: {{ block.settings.vertical_card_badge_font_size | default: 12 }}px;
    color: {{ block.settings.vertical_card_badge_color | default: '#666' }};
    margin-top: 2px;
    font-weight: 400;
  }

  /* Smaller badge for grid layout */
  .vertical-cards-container.layout-grid .vertical-card-badge {
    font-size: 10px;
  }

  .vertical-card-subtitle {
    font-size: 13px;
    color: #666;
  }

  /* Smaller subtitle for grid layout */
  .vertical-cards-container.layout-grid .vertical-card-subtitle {
    font-size: 11px;
  }

  .vertical-card-selected {
    font-size: 14px;
    font-weight: 500;
    color: #000;
    margin-left: auto;
    display: none;
  }

  .vertical-card-option.selected .vertical-card-selected {
    display: block;
  }

  /* Hide selected text in grid layout */
  .vertical-cards-container.layout-grid .vertical-card-selected {
    display: none !important;
  }

  /* Mobile optimizations for grid layout */
  @media (max-width: 767px) {
    .vertical-cards-container.layout-grid .vertical-card-option {
      padding: 8px 10px;
    }

    .vertical-cards-container.layout-grid .vertical-card-image {
      width: 36px;
      height: 36px;
      margin-right: 10px;
    }

    .vertical-cards-container.layout-grid .vertical-card-name {
      font-size: 13px;
    }

    .vertical-cards-container.layout-grid .vertical-card-subtitle {
      font-size: 10px;
    }
  }

  .vertical-card-notes {
    font-size: {{ block.settings.vertical_card_notes_font_size | default: 13 }}px;
    color: {{ block.settings.vertical_card_notes_color | default: '#b5934a' }};
    margin-top: 2px;
    font-weight: 400;
  }

  .vertical-card-description {
    font-size: {{ block.settings.vertical_card_description_font_size | default: 13 }}px;
    color: {{ block.settings.vertical_card_description_color | default: '#555555' }};
    margin-top: 4px;
    font-weight: 400;
    line-height: 1.4;
  }

  .vertical-cards-container.layout-grid .vertical-card-notes,
  .vertical-cards-container.layout-grid .vertical-card-description {
    font-size: 11px;
  }
  {% if block.settings.swatch_custom_selected_border %}
  .color-swatch input:checked + .color-swatch__image {
    box-shadow: 0 0 0 {{ block.settings.swatch_selected_border_width }}px {{ block.settings.swatch_selected_border_color }} !important;
  }
{% endif %}
{%- endstyle -%}

{%- unless product.has_only_default_variant -%}
  {% liquid
    assign types_string = block.settings.picker_types | downcase
    if types_string == blank
      assign types_string = 'pills,pills,pills'
    endif
    assign types_array = types_string | split: ','
    assign show_more_limit = block.settings.show_more_limit | default: 4
    assign enable_show_more = block.settings.enable_show_more | default: false
  %}
  <variant-selects
    id="variant-selects-{{ section.id }}"
    class="no-js-hidden  {% if block.settings.horizontalvariants %}custom-variant-flex{% endif %}"
    data-section="{{ section.id }}"
    data-url="{{ product.url }}"
    data-skip-non-existent="true"
    data-skip-unavailable="{{ block.settings.skip_unavailable }}"
    {% if update_url == false %}
      data-update-url="false"
    {% endif %}
    {% if has_filtering %}
      data-has-filtering="true"
    {% endif %}
    {% if types_string contains 'quantity breaks' %}
      data-has-quantity-breaks-picker="true"
      data-quantity-breaks-picker-style="{{ block.settings.breaks_style }}"
      data-quantity-breaks-picker-displayed-images="{{ block.settings.breaks_displayed_images }}"
    {% endif %}
    style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
    {{ block.shopify_attributes }}
  >
    {%- for option in product.options_with_values -%}
      {% liquid
        assign type = types_array[forloop.index0] | strip | replace: ' ', '-'
        if type != 'dropdown' and type != 'swatches' and type != 'quantity-breaks' and type != 'hidden' and type != 'toggle' and type != 'vertical-cards'
          assign type = 'pills'
        endif
        assign option_values_count = option.values.size
        assign should_show_more = false
        assign target_option_names = block.settings.show_more_option_names | default: '' | downcase | split: ','
        assign current_option_name = option.name | downcase | strip
        assign option_name_match = false

        if target_option_names.size > 0
          for target_name in target_option_names
            assign clean_target_name = target_name | strip
            if clean_target_name == current_option_name
              assign option_name_match = true
              break
            endif
          endfor
        else
          assign option_name_match = true
        endif

        if enable_show_more and option_values_count > show_more_limit and type != 'dropdown' and type != 'quantity-breaks' and type != 'hidden' and option_name_match
          assign should_show_more = true
        endif
      %}
      <div
        class="product-form__input product-form__input--{{ type }}{% if block.settings.full_width_dropdowns %} product-form__input--full{% endif %}{% if type == 'hidden' %} hidden{% endif %}"
        style="{% if block.settings.horizontalvariants %}border-bottom: none!important;padding-bottom: 0px!important;{% endif %} "
      >
        <div class="visually-hidden product-form__input__type" data-type="{{ type }}">&nbsp</div>
        {% unless type == 'quantity-breaks' %}
          {% liquid
            assign variant_option_number = block.settings.variant_option_variant | plus: 0
            assign should_displayvariant = false
            if forloop.index == variant_option_number and block.settings.trigger_variant_message != blank
              assign should_displayvariant = true
            endif
          %}
          {%- assign trigger_option_name = block.settings.trigger_variant_option_name | strip | escape -%}
          {%- assign trigger_option_value = block.settings.trigger_variant_option_value | strip -%}

          {% if should_displayvariant and block.settings.variant_message_position == 'above_label' %}
            <div
              id="variant-specific-message-{{ section.id }}"
              class="inventory-warning-variant"
              style="display:none;margin: 5px 0 10px; font-size: 14px;"
            >
              <div
                {% if block.settings.blinkdotvariant %}
                  class="sfrom_text_variant"
                {% endif %}
              >
                {{ block.settings.trigger_variant_message }}
              </div>
            </div>
          {% endif %}

          <div
            class="product-form__label-container"
            id="SizeChartAppend-{{ section.id }}-option_{{ forloop.index }}_label_container"
          >
            <label
              class="form__label{% if block.settings.show_variant_step_numbers %} form__label--with-step{% endif %} {% if block.settings.show_divider_line %} form__label--with-divider{% endif %}"
              for="Option-{{ section.id }}-{{ forloop.index0 }}"
              style="font-size:{{ block.settings.variantnamefont_size }}px;"
            >
              {% if block.settings.show_variant_step_numbers %}
                <span class="variant-step-number">{{ forloop.index }}</span>
              {% endif %}
              {% if block.settings.custom_labels == blank %}
                {{ option.name }}
              {% else %}
                <span id="custom-label-{{ section.id }}-{{ forloop.index }}">
                  {% assign downcase_name = option.name | downcase %}
                  {% assign uppercase_name = option.name | upcase %}
                  {{
                    block.settings.custom_labels
                    | replace: '[count]', forloop.index
                    | replace: '[name]', option.name
                    | replace: '[name_lowercase]', downcase_name
                    | replace: '[name_uppercase]', uppercase_name
                    | replace: '[selected]', option.selected_value
                  }}
                </span>
              {% endif %}
            </label>
            {% capture current_append %}option_{{ forloop.index }}_label_container{% endcapture %}
            {% if sizing_chart_html != null and sizing_chart_append == current_append %}
              {{ sizing_chart_html }}
            {% endif %}
          </div>

          {% liquid
            assign variant_option_number = block.settings.variant_option_text | plus: 0
            assign should_display = false
            if forloop.index == variant_option_number and block.settings.variant_description_text != blank
              assign should_display = true
            endif
          %}

          {% if block.settings.position == 'ontop' %}
            {% if should_display %}
              <div class="variant-description-text" style="margin: 5px 0 10px; font-size: 14px; line-height: 1.4;">
                {{ block.settings.variant_description_text }}
              </div>
            {% endif %}
          {% endif %}

          {% if should_displayvariant and block.settings.variant_message_position != 'above_label' %}
            <div
              id="variant-specific-message-{{ section.id }}"
              class="inventory-warning-variant"
              style="display:none;margin: 5px 0 10px; font-size: 14px;"
            >
              <div
                {% if block.settings.blinkdotvariant %}
                  class="sfrom_text_variant"
                {% endif %}
              >
                {{ block.settings.trigger_variant_message }}
              </div>
            </div>
          {% endif %}

          <script>
            (function () {
              function initVariantMessageHandler() {
                // Get the option names as an array by splitting the comma-separated string
                const optionNamesString = '{{ trigger_option_name }}';
                const optionNames = optionNamesString.split(',').map((name) => name.trim());

                // Get target values
                const valuesString = '{{ trigger_option_value }}';
                const targetValues = valuesString.split(',').map((v) => v.trim().toLowerCase());

                const messageElement = document.getElementById('variant-specific-message-{{ section.id }}');

                if (!messageElement || optionNames.length === 0 || targetValues.length === 0) return;

                function checkAndUpdateMessage() {
                  let found = false;
                  let selectedValue = null;

                  // Try each option name
                  for (let i = 0; i < optionNames.length; i++) {
                    // Try select dropdown first
                    const select = document.querySelector(
                      `select[name="${optionNames[i]}{{ custom_name_identifier }}"]`
                    );
                    if (select) {
                      selectedValue = select.value;
                      found = true;
                      break;
                    }

                    // Try radio buttons
                    const checkedRadio = document.querySelector(
                      `input[type="radio"][name="${optionNames[i]}{{ custom_name_identifier }}"]:checked`
                    );
                    if (checkedRadio) {
                      selectedValue = checkedRadio.value;
                      found = true;
                      break;
                    }
                  }

                  // If we found a selected value, check if it matches our target values
                  if (found && selectedValue) {
                    const matchFound = targetValues.includes(selectedValue.toLowerCase().trim());
                    messageElement.style.display = matchFound ? 'block' : 'none';
                  } else {
                    messageElement.style.display = 'none';
                  }
                }

                // Check immediately
                checkAndUpdateMessage();

                // Setup event listeners for all form elements
                const form = document.querySelector(`#variant-selects-{{ section.id }}`);
                if (form) {
                  form.addEventListener('change', checkAndUpdateMessage);
                }

                // Listen for variant changes (works with theme editor updates)
                document.addEventListener('variant:change', checkAndUpdateMessage);

                // For Shopify theme editor
                if (window.Shopify && window.Shopify.designMode) {
                  document.addEventListener('shopify:section:load', function (event) {
                    if (event.detail.sectionId === '{{ section.id }}') {
                      setTimeout(checkAndUpdateMessage, 100);
                    }
                  });

                  document.addEventListener('shopify:block:select', function (event) {
                    if (event.detail.sectionId === '{{ section.id }}') {
                      setTimeout(checkAndUpdateMessage, 100);
                    }
                  });

                  document.addEventListener('shopify:section:select', function (event) {
                    if (event.detail.sectionId === '{{ section.id }}') {
                      setTimeout(checkAndUpdateMessage, 100);
                    }
                  });
                }
              }

              // Run on initial load
              document.addEventListener('DOMContentLoaded', initVariantMessageHandler);

              // Also run immediately in case the DOM is already loaded
              if (document.readyState === 'complete' || document.readyState === 'interactive') {
                initVariantMessageHandler();
              }
            })();
          </script>
        {% endunless %}
        {% case type %}
          {% when 'dropdown' %}
            <div class="select no-background color-{{ settings.pickers_color_scheme }} accent-color-{{ settings.pickers_overlay_color }} accent-2-color-{{ settings.pickers_text_color }}">
              <select
                id="Option-{{ section.id }}-{{ forloop.index0 }}"
                class="select__select"
                name="options[{{ option.name | escape }}]"
                form="{{ product_form_id }}"
              >
                {% render 'ascendify-product-variant-options', product: product, option: option, block: block, type: 'dropdown' %}
              </select>
              {% render 'icon-caret' %}
            </div>
          {% when 'swatches' %}
            <div
              class="color-swatches-container color-swatches-container--size-{{ block.settings.swatches_size }}"
              data-option-index="{{ forloop.index0 }}"
              data-show-more="{{ should_show_more }}"
              data-show-limit="{{ show_more_limit }}"
              data-option-name="{{ option.name }}"
            >
              {% render 'ascendify-product-variant-options', product: product, option: option, block: block, type: 'swatches' %}
              {% if should_show_more %}
                {% assign remaining_options = option_values_count | minus: show_more_limit %}
                <div class="show-more-trigger" onclick="toggleShowMore(this, '{{ section.id }}', {{ forloop.index0 }})">
                  +{{ remaining_options }}
                </div>
                <div class="show-less-trigger" onclick="toggleShowLess(this, '{{ section.id }}', {{ forloop.index0 }})">
                  {{ block.settings.show_less_text | default: 'Show Less' }}
                </div>
              {% endif %}
            </div>
          {% when 'toggle' %}
            <div class="toggle-container" data-option-name="{{ option.name }}">
              {% for value in option.values limit: 4 %}
                {% assign variant_for_value = product.variants | where: option.name, value | first %}
                <div
                  class="toggle-option{% if option.selected_value == value %} selected{% endif %}"
                  onclick="selectToggleOption(this, '{{ section.id }}', {{ forloop.index0 }}, '{{ option.name | escape }}', '{{ value | escape }}')"
                >
                  {% comment %} Add badge for special offers {% endcomment %}
                  {% if block.settings.toggle_badge_text != blank and block.settings.toggle_badge_values != blank %}
                    {% assign badge_texts = block.settings.toggle_badge_text | split: ',' %}
                    {% assign badge_values = block.settings.toggle_badge_values | split: ',' %}
                    {% assign clean_value = value | strip | downcase %}

                    {% for badge_value in badge_values %}
                      {% assign clean_badge_value = badge_value | strip | downcase %}
                      {% if clean_value contains clean_badge_value %}
                        {% assign badge_index = forloop.index0 %}
                        {% if badge_texts[badge_index] != blank %}
                          <div class="toggle-badge">{{ badge_texts[badge_index] | strip }}</div>
                        {% endif %}
                        {% break %}
                      {% endif %}
                    {% endfor %}
                  {% endif %}

                  <input
                    type="radio"
                    id="Option-{{ section.id }}-{{ forloop.index0 }}-{{ forloop.parentloop.index0 }}"
                    name="options[{{ option.name | escape }}]"
                    value="{{ value | escape }}"
                    form="{{ product_form_id }}"
                    {% if option.selected_value == value %}
                      checked
                    {% endif %}
                  >

                  <label for="Option-{{ section.id }}-{{ forloop.index0 }}-{{ forloop.parentloop.index0 }}">
                    {{ value }}
                    {% if block.settings.show_price_in_toggle and variant_for_value %}
                      <div class="toggle-price">{{ variant_for_value.price | money }}</div>
                    {% endif %}
                  </label>
                </div>
              {% endfor %}
            </div>

          {% when 'vertical-cards' %}
            <div
              class="vertical-cards-container layout-{{ block.settings.vertical_card_layout | default: 'vertical' }}"
              data-option-name="{{ option.name }}"
            >
              {% for value in option.values %}
                {% comment %} Find the correct variant that matches this option value {% endcomment %}
                {% assign variant_for_value = null %}
                {% for variant in product.variants %}
                  {% if variant.options contains value %}
                    {% assign variant_for_value = variant %}
                    {% break %}
                  {% endif %}
                {% endfor %}

                {% liquid
                  assign _notes_lines = block.settings.vertical_card_notes_list | newline_to_br | split: '<br />'
                  assign _desc_lines = block.settings.vertical_card_description_list | newline_to_br | split: '<br />'
                  assign _card_index = forloop.index0
                %}

                <div
                  class="vertical-card-option{% if option.selected_value == value %} selected{% endif %}"
                  onclick="selectVerticalCard(this, '{{ section.id }}', {{ forloop.index0 }}, '{{ option.name | escape }}', '{{ value | escape }}')"
                >
                  <input
                    type="radio"
                    id="VerticalCard-{{ section.id }}-{{ forloop.index0 }}-{{ forloop.parentloop.index0 }}"
                    name="options[{{ option.name | escape }}]"
                    value="{{ value | escape }}"
                    form="{{ product_form_id }}"
                    {% if option.selected_value == value %}
                      checked
                    {% endif %}
                  >

                  {% comment %} Only show variant image if assigned {% endcomment %}
                  {% if variant_for_value.image %}
                    <img
                      class="vertical-card-image"
                      src="{{ variant_for_value.image | image_url: width: 2048 }}"
                      alt="{{ value }}"
                    >
                  {% endif %}

                  <div class="vertical-card-content">
                    <div class="vertical-card-name">{{ value }}</div>

                    {% if _notes_lines[_card_index] != blank %}
                      <div class="vertical-card-notes">{{ _notes_lines[_card_index] | strip }}</div>
                    {% endif %}

                    {% if _desc_lines[_card_index] != blank %}
                      <div class="vertical-card-description">{{ _desc_lines[_card_index] | strip }}</div>
                    {% endif %}

                    {% comment %} Show badge if this variant matches any of the badge variants {% endcomment %}
                    {% if block.settings.vertical_card_badge_text != blank
                      and block.settings.vertical_card_badge_variant != blank
                    %}
                      {% assign badge_variants = block.settings.vertical_card_badge_variant | split: ',' %}
                      {% assign clean_value = value | strip | downcase %}
                      {% assign show_badge = false %}

                      {% for badge_variant in badge_variants %}
                        {% assign clean_badge_variant = badge_variant | strip | downcase %}
                        {% if clean_value == clean_badge_variant %}
                          {% assign show_badge = true %}
                          {% break %}
                        {% endif %}
                      {% endfor %}

                      {% if show_badge %}
                        <div class="vertical-card-badge">{{ block.settings.vertical_card_badge_text }}</div>
                      {% endif %}
                    {% endif %}

                    {% if block.settings.show_vertical_card_subtitle and variant_for_value %}
                      <div class="vertical-card-subtitle">{{ variant_for_value.price | money }}</div>
                    {% endif %}
                  </div>

                  <div class="vertical-card-selected">
                    {{ block.settings.vertical_card_selected_text | default: 'Selected' }}
                  </div>
                </div>
              {% endfor %}
            </div>

          {% when 'quantity-breaks' %}
            <div
              class="quantity-breaks quantity-breaks--{{ block.settings.breaks_style }} accent-color-{{ block.settings.breaks_color_scheme }}{% if block.settings.breaks_space_images %} quantity-breaks--space-images{% endif %}{% if block.settings.breaks_badges != blank %} quantity-breaks--has-badge{% endif %} quantity-breaks--vertical-image-{{ block.settings.breaks_vertical_images_position }} quantity-breaks--vertical-prices-{{ block.settings.breaks_vertical_prices_layout }}{% if block.settings.breaks_display_selected_indicator %} quantity-breaks--show-indicator{% endif %}{% if block.settings.breaks_image_width == 100 %} quantity-breaks--max-width-images{% endif %}"
              data-items="{{ option.values.size }}"
              style="--items-count:{{ option.values.size }};--image-width:{{ block.settings.breaks_image_width }}%;--border-radius:{{ block.settings.breaks_border_radius | divided_by: 10.0 }}rem;--border-width:{{ block.settings.breaks_border_width | divided_by: 10.0 }}rem;"
            >
              {% if block.settings.breaks_headline != blank %}
                <h3 class="quantity-breaks__title flex-center">
                  <span></span>
                  <span>{{ block.settings.breaks_headline }}</span>
                  <span></span>
                </h3>
              {% endif %}
              <div class="quantity-breaks-container">
                {% render 'ascendify-product-variant-options',
                  product: product,
                  option: option,
                  block: block,
                  type: 'quantity-breaks'
                %}
              </div>
            </div>
          {% else %}
            <div
              class="variant-options-container"
              data-option-index="{{ forloop.index0 }}"
              data-show-more="{{ should_show_more }}"
              data-show-limit="{{ show_more_limit }}"
              data-option-name="{{ option.name }}"
            >
              {% render 'ascendify-product-variant-options', product: product, option: option, block: block, type: 'pills' %}
              {% if should_show_more %}
                {% assign remaining_options = option_values_count | minus: show_more_limit %}
                <div class="show-more-trigger" onclick="toggleShowMore(this, '{{ section.id }}', {{ forloop.index0 }})">
                  +{{ remaining_options }}
                </div>
                <div class="show-less-trigger" onclick="toggleShowLess(this, '{{ section.id }}', {{ forloop.index0 }})">
                  {{ block.settings.show_less_text | default: 'Show Less' }}
                </div>
              {% endif %}
            </div>

            {% if block.settings.position == 'bottom' %}
              {% if should_display %}
                <div class="variant-description-text" style="margin: 15px 0 10px; font-size: 14px; line-height: 1.4;">
                  {{ block.settings.variant_description_text }}
                </div>
              {% endif %}
            {% endif %}
        {% endcase %}
        {% capture current_append %}option_{{ forloop.index }}_under_container{% endcapture %}
        <div class="product-form__under-container">
          {% if sizing_chart_html != null and sizing_chart_append == current_append %}{{ sizing_chart_html }}{% endif %}
        </div>
      </div>
    {%- endfor -%}

    <script type="application/json">
      {{ product.variants | json }}
    </script>
  </variant-selects>

  <script>
    // Show More functionality
    function initShowMoreFunctionality() {
      // Initialize show more for all containers
      const containers = document.querySelectorAll('[data-show-more="true"]');

      containers.forEach(function (container) {
        const showLimit = parseInt(container.getAttribute('data-show-limit')) || 4;
        const optionName = container.getAttribute('data-option-name');

        console.log('Processing container for option:', optionName, 'with limit:', showLimit);

        // Find all input elements (radio buttons) within this container
        const radioInputs = container.querySelectorAll('input[type="radio"]');
        console.log('Found radio inputs:', radioInputs.length);

        // If no radio inputs, try to find fieldset elements or other containers
        if (radioInputs.length === 0) {
          // Look for any clickable elements that might be variant options
          const possibleOptions = container.querySelectorAll('label, .variant-option, .swatch, [data-value]');
          console.log('Found possible options:', possibleOptions.length);

          possibleOptions.forEach(function (option, index) {
            if (index >= showLimit) {
              option.classList.add('hidden');
              console.log('Hiding option', index, option);
            }
          });
        } else {
          // Hide radio inputs and their associated labels beyond the limit
          radioInputs.forEach(function (input, index) {
            if (index >= showLimit) {
              // Hide the input
              input.classList.add('hidden');

              // Find and hide associated label
              const label =
                input.nextElementSibling ||
                input.parentElement.querySelector('label[for="' + input.id + '"]') ||
                input.closest('label') ||
                input.parentElement;

              if (label) {
                label.classList.add('hidden');
                console.log('Hiding input and label', index, input, label);
              }
            }
          });
        }
      });
    }

    function toggleShowMore(element, sectionId, optionIndex) {
      const container = element.closest('.variant-options-container, .color-swatches-container');
      if (container) {
        console.log('Showing more options for container:', container);

        const hiddenOptions = container.querySelectorAll('.hidden');
        console.log('Found hidden options:', hiddenOptions.length);

        hiddenOptions.forEach(function (option) {
          option.classList.remove('hidden');
        });

        // Show the "Show Less" button and hide "Show More"
        const showMoreTrigger = container.querySelector('.show-more-trigger');
        const showLessTrigger = container.querySelector('.show-less-trigger');

        if (showMoreTrigger) showMoreTrigger.style.display = 'none';
        if (showLessTrigger) showLessTrigger.style.display = 'inline-block';
      }
    }

    function toggleShowLess(element, sectionId, optionIndex) {
      const container = element.closest('.variant-options-container, .color-swatches-container');
      if (container) {
        const showLimit = parseInt(container.getAttribute('data-show-limit')) || 4;
        console.log('Showing less options, limit:', showLimit);

        // Find all radio inputs and hide those beyond the limit
        const radioInputs = container.querySelectorAll('input[type="radio"]');

        if (radioInputs.length === 0) {
          const possibleOptions = container.querySelectorAll('label, .variant-option, .swatch, [data-value]');
          possibleOptions.forEach(function (option, index) {
            if (index >= showLimit) {
              option.classList.add('hidden');
            }
          });
        } else {
          radioInputs.forEach(function (input, index) {
            if (index >= showLimit) {
              input.classList.add('hidden');

              const label =
                input.nextElementSibling ||
                input.parentElement.querySelector('label[for="' + input.id + '"]') ||
                input.closest('label') ||
                input.parentElement;

              if (label) {
                label.classList.add('hidden');
              }
            }
          });
        }

        // Show the "Show More" button and hide "Show Less"
        const showMoreTrigger = container.querySelector('.show-more-trigger');
        const showLessTrigger = container.querySelector('.show-less-trigger');

        if (showMoreTrigger) showMoreTrigger.style.display = 'inline-flex';
        if (showLessTrigger) showLessTrigger.style.display = 'none';
      }
    }

    // Initialize with a slight delay to ensure DOM is fully rendered
    function delayedInit() {
      setTimeout(initShowMoreFunctionality, 500);
    }

    // Initialize on DOM ready
    document.addEventListener('DOMContentLoaded', delayedInit);

    // Also initialize immediately if DOM is already ready
    if (document.readyState === 'complete' || document.readyState === 'interactive') {
      delayedInit();
    }

    // Reinitialize when variants change (for AJAX themes)
    document.addEventListener('variant:change', function () {
      setTimeout(initShowMoreFunctionality, 100);
    });

    // For Shopify theme editor
    if (window.Shopify && window.Shopify.designMode) {
      document.addEventListener('shopify:section:load', function (event) {
        setTimeout(initShowMoreFunctionality, 500);
      });
    }

    // Toggle functionality
    function selectToggleOption(element, sectionId, optionIndex, optionName, value) {
      const container = element.closest('.toggle-container');
      const options = container.querySelectorAll('.toggle-option');
      const radioInput = element.querySelector('input[type="radio"]');

      // Remove selected class from all options
      options.forEach((option) => option.classList.remove('selected'));

      // Add selected class to clicked option
      element.classList.add('selected');

      // Check the radio button
      if (radioInput) {
        radioInput.checked = true;

        // Trigger change event to update variant
        const event = new Event('change', { bubbles: true });
        radioInput.dispatchEvent(event);
      }
    }
  </script>
{%- endunless -%}

<noscript
  class="product-form__noscript-wrapper-{{ section.id }}"
  style="--margin-top: {{ block.settings.margin_top | divided_by: 10.0 }}rem;--margin-bottom: {{ block.settings.margin_bottom | divided_by: 10.0 }}rem;"
>
  <div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %} {% if block.settings.show_divider_line %} form__label--with-divider{% endif %}">
    <label
      class="form__label"
      for="Variants-{{ section.id }}"
      style="font-size:{{ block.settings.variantnamefont_size }}px;"
    >
      {{- 'products.product.product_variants' | t -}}
    </label>
    <div class="select">
      <select
        name="id"
        id="Variants-{{ section.id }}"
        class="select__select"
        form="{{ product_form_id }}"
      >
        {%- for variant in product.variants -%}
          <option
            {% if variant == product.selected_or_first_available_variant %}
              selected="selected"
            {% endif %}
            {% if variant.available == false %}
              disabled
            {% endif %}
            value="{{ variant.id }}"
          >
            {%- liquid
              echo variant.title
              echo variant.price | money | strip_html | prepend: ' - '
              if variant.available == false
                echo 'products.product.sold_out' | t | prepend: ' - '
              endif
              if variant.quantity_rule.increment > 1
                echo 'products.product.quantity.multiples_of' | t: quantity: variant.quantity_rule.increment | prepend: ' - '
              endif
              if variant.quantity_rule.min > 1
                echo 'products.product.quantity.minimum_of' | t: quantity: variant.quantity_rule.min | prepend: ' - '
              endif
              if variant.quantity_rule.max != null
                echo 'products.product.quantity.maximum_of' | t: quantity: variant.quantity_rule.max | prepend: ' - '
              endif
              # TODO: enable theme-check once `item_count_for_variant` is accepted as valid filter
              # theme-check-disable
              assign cart_quantity = cart | item_count_for_variant: variant.id
              # theme-check-enable
              if cart_quantity > 0
                echo 'products.product.quantity.in_cart_html' | t: quantity: cart_quantity | prepend: ' - '
              endif
            -%}
          </option>
        {%- endfor -%}
      </select>
      {% render 'icon-caret' %}
    </div>
  </div>
</noscript>

<style>
  .inventory-warning-variant {
    display: flex;
    background:  {{block.settings.warningbackground}};
    color:  {{block.settings.warningtextcolor}};
    border-radius: {{block.settings.warningtextborderradius}}px;
    padding: 7px 8px;
    align-items: center;
    margin: 10px auto;
    justify-content: flex-start;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: normal !important;
    margin: 0;
    text-transform: none !important;
    line-height: 1.5;
  }

  .sfrom_text_variant:before {
    position: relative;
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: {{ block.settings.dot_color }};
    margin-right: 5px;
    animation: blink 1.5s infinite;
  }
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.5;
    }
    100% {
      opacity: 1;
    }
  }
</style>

<script>
  // Vertical Cards functionality
  function selectVerticalCard(element, sectionId, optionIndex, optionName, value) {
    const container = element.closest('.vertical-cards-container');
    const options = container.querySelectorAll('.vertical-card-option');
    const radioInput = element.querySelector('input[type="radio"]');

    // Remove selected class from all options
    options.forEach((option) => option.classList.remove('selected'));

    // Add selected class to clicked option
    element.classList.add('selected');

    // Check the radio button
    if (radioInput) {
      radioInput.checked = true;

      // Trigger change event to update variant
      const event = new Event('change', { bubbles: true });
      radioInput.dispatchEvent(event);
    }
  }
</script>
