/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 18:8 Expected identifier but found whitespace
Line 19:3 Expected identifier but found "%"
Line 20:0 Unexpected "{"
Line 20:1 Expected identifier but found "%"
Line 22:0 Unexpected "{"
Line 22:1 Expected identifier but found "%"
Line 23:0 Unexpected "<"
Line 26:3 Unexpected "{"
... and 94 more hidden warnings

**/
{% comment %}
  Renders product variant-picker
  Usage:
  {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}

{%- unless product.has_only_default_variant -%}
<variant-selects
  id="variant-selects-{{ section.id }}"
  data-section="{{ section.id }}"
  {{ block.shopify_attributes }}
>
  {%- for option in product.options_with_values -%}

    {%- assign option_lc = option.name | downcase -%}

    {%- assign is_color = false -%}
    {%- if option_lc contains 'color' -%}
      {%- assign is_color = true -%}
    {%- endif -%}

    {%- assign is_size = false -%}
    {%- if option_lc contains 'size' -%}
      {%- assign is_size = true -%}
    {%- endif -%}

    {%- if is_color -%}
    <!-- ================= COLOR SWATCHES ================= -->
    <fieldset class="js product-form__input product-form__input--color">
      <legend class="form__label">
        {{ option.name }}:
        <span data-selected-value>{{ option.selected_value }}</span>
      </legend>

      <!-- SELECT oculto que usa Dawn internamente -->
      <div class="visually-hidden">
        <select
          class="select__select jmj-color-select"
          name="options[{{ option.name | escape }}]"
          form="{{ product_form_id }}"
        >
          {% for value in option.values %}
            <option value="{{ value }}" {% if option.selected_value == value %}selected{% endif %}>
              {{ value }}
            </option>
          {% endfor %}
        </select>
      </div>

      <!-- Swatches visibles -->
      <div class="jmj-swatches">
        {% for value in option.values %}
          <label class="jmj-swatch">
            <input
              type="radio"
              name="options[{{ option.name | escape }}]"
              value="{{ value }}"
              {% if option.selected_value == value %}checked{% endif %}
              form="{{ product_form_id }}"
            >
            <span class="jmj-swatch-dot"></span>
            <span class="jmj-swatch-name">{{ value }}</span>
          </label>
        {% endfor %}
      </div>
    </fieldset>

    {%- elsif is_size -%}
    <!-- ================= SIZE PILLS (BOTONES) ================= -->
    <fieldset class="js product-form__input product-form__input--pill">
      <legend class="form__label">
        {{ option.name }}:
        <span data-selected-value>{{ option.selected_value }}</span>
      </legend>

      {% for value in option.values %}
        <input
          type="radio"
          id="Option-{{ section.id }}-{{ option.position }}-{{ forloop.index }}"
          name="options[{{ option.name | escape }}]"
          value="{{ value }}"
          {% if option.selected_value == value %}checked{% endif %}
          form="{{ product_form_id }}"
        >
        <label
          for="Option-{{ section.id }}-{{ option.position }}-{{ forloop.index }}"
        >
          {{ value }}
        </label>
      {% endfor %}
    </fieldset>

    {%- else -%}
    <!-- ================= DROPDOWN (OTRAS OPCIONES) ================= -->
    <div class="product-form__input product-form__input--dropdown">
      <label class="form__label">
        {{ option.name }}
      </label>
      <select
        class="select__select"
        name="options[{{ option.name | escape }}]"
        form="{{ product_form_id }}"
      >
        {% for value in option.values %}
          <option value="{{ value }}" {% if option.selected_value == value %}selected{% endif %}>
            {{ value }}
          </option>
        {% endfor %}
      </select>
    </div>
    {%- endif -%}

  {%- endfor -%}

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

<style>
.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

.jmj-swatches{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
  gap:10px;
  margin:.5rem 0 1rem;
}

.jmj-swatch{
  cursor:pointer;
  text-align:center;
}

.jmj-swatch input{
  display:none;
}

.jmj-swatch-dot{
  display:block;
  height:40px;
  border-radius:6px;
  border:1px solid #ccc;
  background:#ddd;
}

.jmj-swatch input:checked + .jmj-swatch-dot{
  outline:3px solid #111;
}
</style>
{%- endunless -%}