/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:93 Expected identifier but found whitespace
Line 19:16 Expected ":"
Line 19:35 Unexpected "-"
Line 20:16 Expected ":"
Line 20:26 Unexpected "-"
Line 21:16 Expected ":"
Line 21:26 Unexpected "-"
Line 22:16 Expected ":"
... and 188 more hidden warnings

**/
{%- doc -%}
  Renders a default variant picker, used to display the variant picker in the variants block.

  @param {object} product_resource - The product object.
  @param {object} [block] - The block object
  @param {object} section - The section object.
  @param {object} product - The current product object (used to determine selected variant state).
{%- enddoc -%}

{% assign block_settings = block.settings %}

{% liquid
  # Custom styling applies to:
  #   - dropdowns + buttons when variant_style_class == 'custom' (unselected colors)
  #   - buttons only when selected_variant_style_class == 'custom' (selected colors)
  # The 'buttons' label is kept for backwards-compat of the class name.
  assign has_custom_variant_buttons = false
  if block_settings.variant_style_class == 'custom'
    assign has_custom_variant_buttons = true
  endif
  if block_settings.variant_style == 'buttons' and block_settings.selected_variant_style_class == 'custom'
    assign has_custom_variant_buttons = true
  endif
  assign fieldset_index = 0
%}

{% unless product_resource.has_only_default_variant %}
  {% if has_custom_variant_buttons %}
    {% render 'variant-button-custom-styles', block_settings: block_settings, block_id: block.id %}
  {% endif %}
  <variant-picker
    class="variant-picker spacing-style variant-picker--{{ block_settings.alignment }}{% if has_custom_variant_buttons %} variant-picker--custom-{{ block.id }}{% endif %}"
    style="
      {% render 'spacing-style', settings: block_settings %}
       {% if block_settings.option_label_text_color != blank %}
        --variant-option-label-color: rgba({{ block_settings.option_label_text_color.rgba }});
        --variant-option-label-color-subdued: rgba({{ block_settings.option_label_text_color.rgb }} / var(--opacity-subdued-text));
      {% endif %}
    "
    data-section-id="{{ section.id }}"
    data-product-id="{{ product_resource.id }}"
    data-product-handle="{{ product_resource.handle }}"
    data-product-title="{{ product_resource.title | escape }}"
    data-block-id="{{ block.id }}"
    data-product-url="{{ product_resource.url }}"
    ref="mainVariantPicker"
    {% if product.id == product_resource.id %}
      data-template-product-match="true"
    {% endif %}
    {{ block.shopify_attributes }}
    {% if request.visual_preview_mode %}
      data-shopify-visual-preview
    {% endif %}
  >
    <form class="variant-picker__form">
{%- if product_resource.tags contains 'option-images' -%}
  {% style %}
    .variant-option--image-buttons { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
    .variant-option--image-buttons legend { grid-column: 1 / -1; }
    .variant-option__button-label--image { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: auto !important; min-height: 0; padding: 6px 6px 8px; gap: 6px; width: auto; }
    .variant-option__button-label--image .variant-option__button-label__image { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; }
    .variant-option__button-label--image .variant-option__button-label__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .variant-option__button-label--image .variant-option__button-label__text { font-size: 0.8em; line-height: 1.2; text-align: center; white-space: normal; }
  {% endstyle %}
{%- endif -%}
      {%- for product_option in product_resource.options_with_values -%}
        {%- liquid
          assign swatch_count = product_option.values | map: 'swatch' | compact | size
          assign variant_style = block_settings.variant_style

          if swatch_count > 0 and block_settings.show_swatches
            if block_settings.variant_style == 'dropdown'
              assign variant_style = 'swatch_dropdown'
            else
              assign variant_style = 'swatch'
            endif
          endif

          if variant_style == 'buttons' and settings.variant_button_width == 'equal-width-buttons'
            assign fieldset_id = section.id | append: '-' | append: product_resource.id | append: '-' | append: product_option.name | handleize
            assign option_id_attribute = 'data-option-id="' | append: fieldset_id | append: '"'
            assign longest_value = 0
          endif
        -%}

        {%- if product_option.values.size == 1 and variant_style != 'swatch' -%}
          <div
            class="variant-option"
            data-testid="variant-option-single"
          >
            {{- product_option.name | escape -}}
            <span
              class="variant-option__swatch-value"
              data-testid="variant-option-single-value"
            >
              {{- product_option.selected_value -}}
            </span>
          </div>
        {%- elsif variant_style == 'swatch' or block_settings.variant_style == 'buttons' -%}
          <fieldset
            class="variant-option variant-option--buttons{% if product_resource.tags contains 'option-images' and product_option.name != 'Size' %} variant-option--image-buttons{% endif %}{% if variant_style == 'swatch' %} variant-option--swatches{% else %} variant-option--{{ settings.variant_button_width }}{% endif %}"
            data-fieldset-index="{{ fieldset_index }}"
            ref="fieldsets[]"
            {{ option_id_attribute }}
          >
            <legend>
              {{ product_option.name | escape -}}
              {%- if variant_style == 'swatch' -%}
                <span class="variant-option__swatch-value">{{ product_option.selected_value }}</span>
              {%- endif %}
            </legend>
            {%- for product_option_value in product_option.values -%}
              {% if product_option_value.size > longest_value and option_id_attribute %}
                {% assign longest_value = product_option_value.size %}
              {% endif %}
              {%- liquid
                assign option_image = blank
                if product_resource.tags contains 'option-images'
                  for option_media in product_resource.media
                    if option_media.alt == product_option_value.name
                      assign option_image = option_media
                      break
                    endif
                  endfor
                endif
              -%}
              <label
                class="variant-option__button-label{% if option_image != blank %} variant-option__button-label--image{% endif %}{% if variant_style == 'swatch' %} variant-option__button-label--has-swatch{% endif %}"
              >
                <input
                  type="radio"
                  name="{{ product_option.name | escape }}-{{ block.id }}-{{ product_resource.id }}"
                  value="{{ product_option_value | escape }}"
                  aria-label="{{ product_option_value.name | escape }}{% if product_option_value.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}"
                  {% if product_option_value.available == false %}
                    aria-disabled="true"
                  {% endif %}
                  data-previous-checked="false"
                  data-fieldset-index="{{ fieldset_index }}"
                  data-input-index="{{ forloop.index0 }}"
                  data-input-id="{{ product_option.position }}-{{ forloop.index0 }}"
                  data-option-name="{{ product_option.name | escape }}"
                  data-option-value-id="{{ product_option_value.id }}"
                  data-option-available="{{ product_option_value.available }}"
                  data-connected-product-url="{{ product_option_value.product_url }}"
                  {% if product_option_value.variant.id %}
                    data-variant-id="{{ product_option_value.variant.id }}"
                  {% endif %}
                  {% if product_option_value.selected %}
                    data-current-checked="true"
                    checked
                  {% else %}
                    data-current-checked="false"
                  {% endif %}
                >
                {% if variant_style == 'swatch' %}
                  {% liquid
                    assign featured_media = product_option_value.variant.featured_media

                    # If the variant has no featured media, and we have a combined listing product, then fall back to
                    # using the featured media of the child product that is linked to this option value.
                    if featured_media == blank and product_option_value.product_url
                      assign featured_media = product_option_value.variant.product.featured_media
                    endif
                  %}

                  {% render 'swatch',
                    swatch: product_option_value.swatch,
                    variant_image: featured_media,
                    mode: 'unscaled'
                  %}
                {% else %}
                  {% if product_option_value.available == true %}
                    <span
                      class="variant-option__button-label__pill"
                      data-key="variant-option-pill"
                    ></span>
                  {% endif %}
                  {%- if option_image != blank -%}
                    <span class="variant-option__button-label__image">
                      {{- option_image | image_url: width: 300 | image_tag: loading: 'lazy', alt: product_option_value.name, widths: '150, 300', sizes: '150px' -}}
                    </span>
                  {%- endif -%}
                  <span
                    class="variant-option__button-label__text"
                    data-key="variant-option-text"
                  >
                    {{- product_option_value | escape -}}
                  </span>
                {% endif %}
                {% render 'strikethrough-variant', product_option: product_option_value %}
              </label>
            {%- endfor -%}
            {% if option_id_attribute %}
              {% style %}
                [data-option-id="{{ fieldset_id }}"] {
                  --variant-ch: {{ longest_value | times: 0.65 }}em;
                }
              {% endstyle %}
            {% endif %}
          </fieldset>
          {%- assign fieldset_index = fieldset_index | plus: 1 -%}
        {%- elsif block_settings.variant_style == 'dropdowns' -%}
          {%
            # There is an opportunity to build a custom select component that will allow us to style the select element further (animation for dropdown, swatches shown in the dropdown options, etc)
            # It's too bad as it mean rebuilding baked in behaviours but I think we've already done that for the locale selectors
            # in dawn. So it might mean more time spent in setting it up but worth it for future updates/styling.
          %}
          {% liquid
            assign property_being_updated = false
            if settings.variant_swatch_width != settings.variant_swatch_height
              assign property_being_updated = true
              # (original width / original height) x new height (20px at the moment) = new width
              assign new_width = settings.variant_swatch_width | times: 1.0 | divided_by: settings.variant_swatch_height | times: 20
            endif
          %}

          <div class="variant-option variant-option--dropdowns">
            <label for="Option-{{ block.id }}-{{ forloop.index0 }}">{{ product_option.name | escape }}</label>
            <div
              class="variant-option__select-wrapper"
              style="
                {%- if property_being_updated  -%}
                  --variant-picker-swatch-width: clamp(10px,{{ new_width }}px, 50px);
                {%- endif -%}
              "
            >
              <select
                id="Option-{{ block.id }}-{{ forloop.index0 }}"
                name="options[{{ product_option.name | escape }}]"
                class="variant-option__select"
              >
                {%- for product_option_value in product_option.values -%}
                  <option
                    value="{{ product_option_value | escape }}"
                    data-input-id="{{ product_option.position }}-{{ forloop.index0 }}"
                    data-option-name="{{ product_option.name | escape }}"
                    data-option-value-id="{{ product_option_value.id }}"
                    data-variant-id="{{ product_option_value.variant.id }}"
                    data-connected-product-url="{{ product_option_value.product_url }}"
                    {% if product_option_value.selected %}
                      selected="selected"
                    {% endif %}
                  >
                    {% if product_option_value.available == false %}
                      {{ product_option_value | escape }} - {{ 'content.unavailable' | t }}
                    {% else %}
                      {{ product_option_value | escape }}
                    {% endif %}
                  </option>
                {%- endfor -%}
              </select>
              <svg
                aria-hidden="true"
                focusable="false"
                class="icon icon-caret"
                viewBox="0 0 10 6"
              >
                {%- render 'icon', icon: 'caret' -%}
              </svg>
            </div>
          </div>
        {%- endif -%}
      {%- endfor -%}

      <script type="application/json">
        {{ product_resource.selected_or_first_available_variant | json }}
      </script>
    </form>
  </variant-picker>
{% endunless %}

{% render 'swatch-styles' %}
{% render 'variant-picker-styles' %}