/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:52 Unexpected "/"
Line 20:20 Expected ":"
Line 20:37 Expected identifier but found whitespace
Line 21:18 Expected ":"
Line 21:50 Expected identifier but found whitespace
Line 22:28 Expected ":"
Line 22:95 Expected identifier but found whitespace
Line 24:3 Expected identifier but found "%"
... and 234 more hidden warnings

**/
{% comment %}
  Renders product variant-picker with enhanced color/size layout

  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.
  Usage:
  {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id %}
{% endcomment %}
{%- 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: ','
    
    # Sortowanie opcji - COLOR na górze, SIZE na dole
    assign color_option = null
    assign size_option = null
    assign other_options = array
    
    for option in product.options_with_values
      assign option_name_lower = option.name | downcase
      if option_name_lower contains 'color' or option_name_lower contains 'colour' or option_name_lower contains 'kolor'
        assign color_option = option
        assign color_option_index = forloop.index0
      elsif option_name_lower contains 'size' or option_name_lower contains 'rozmiar'
        assign size_option = option
        assign size_option_index = forloop.index0
      else
        assign other_options = other_options | append: option
      endif
    endfor
  %}

  <variant-selects
    id="variant-selects-{{ section.id }}"
    data-section="{{ 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;"
    {{ block.shopify_attributes }}
  >
    
    {%- comment -%} COLOR SECTION - ALWAYS ON TOP {%- endcomment -%}
    {%- if color_option -%}
      {% assign color_values_count = color_option.values | size %}
      {% assign type = 'swatch' %}
      
      {% capture label_content %} 
        {% assign downcase_name = color_option.name | downcase %}
        {% assign uppercase_name = color_option.name | upcase %}
        {{
          block.settings.custom_labels
          | replace: '[count]', color_option_index | plus: 1
          | replace: '[name]', color_option.name
          | replace: '[name_lowercase]', downcase_name
          | replace: '[name_uppercase]', uppercase_name
          | replace: '[selected]', color_option.selected_value
        }} 
      {% endcapture %}

      <fieldset class="js product-form__input product-form__input--swatch product-form__input--color">
        <legend class="form__label">
          {{ label_content }}
        </legend>

        <div class="color-variant-container">
          <div class="color-variant-main">
            {% comment %} Pokazuj pierwsze 2 kolory {% endcomment %}
            <div class="color-variant-main-display">
              {% assign color_counter = 0 %}
              {% for value in color_option.values %}
                {% if color_counter < 2 %}
                  {% assign color_counter = color_counter | plus: 1 %}
                  {% render 'product-variant-options', 
                    product: product, 
                    option: color_option, 
                    block: block, 
                    picker_type: type,
                    value_filter: value
                  %}
                {% endif %}
              {% endfor %}
            </div>
            
            {% comment %} "See more colors" button jeśli jest więcej niż 2 {% endcomment %}
            {% if color_values_count > 2 %}
              <button type="button" class="see-more-colors-btn" onclick="openColorModal()">
                <span class="see-more-text">See more colors ({{ color_values_count | minus: 2 }})</span>
              </button>
            {% endif %}
          </div>
        </div>
      </fieldset>

      {% comment %} COLOR MODAL {% endcomment %}
      {% if color_values_count > 2 %}
        <div id="color-modal-{{ section.id }}" class="color-modal" onclick="closeColorModal(event)">
          <div class="color-modal-content" onclick="event.stopPropagation()">
            <div class="color-modal-header">
              <h3>Choose Color</h3>
              <button type="button" class="color-modal-close" onclick="closeColorModal()">&times;</button>
            </div>
            <div class="color-modal-body">
              {% for value in color_option.values %}
                <div class="modal-color-item" data-color-value="{{ value | escape }}">
                  {% render 'product-variant-options', 
                    product: product, 
                    option: color_option, 
                    block: block, 
                    picker_type: type,
                    value_filter: value,
                    is_modal: true
                  %}
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      {% endif %}
    {%- endif -%}

    {%- comment -%} OTHER OPTIONS {%- endcomment -%}
    {%- for option in other_options -%}
      {% assign option_loop_index = forloop.index0 | plus: 1 %}
      {% if color_option %}
        {% assign option_loop_index = option_loop_index | plus: 1 %}
      {% endif %}
      {% assign type = types_array[option_loop_index] | strip | replace: ' ', '-' %}
      
      {%- liquid
        if type == 'swatches'
          assign type = 'swatch'
        elsif type == 'pills'
          assign type = 'button'
        elsif type != 'dropdown'
          assign type = 'button'
        endif
      -%}

      {% capture label_content %} 
        {% assign downcase_name = option.name | downcase %}
        {% assign uppercase_name = option.name | upcase %}
        {{
          block.settings.custom_labels
          | replace: '[count]', option_loop_index
          | replace: '[name]', option.name
          | replace: '[name_lowercase]', downcase_name
          | replace: '[name_uppercase]', uppercase_name
          | replace: '[selected]', option.selected_value
        }} 
      {% endcapture %}

      {%- if type == 'swatch' -%}
        <fieldset class="js product-form__input product-form__input--swatch">
          <legend class="form__label">
            {{ label_content }}
          </legend>
          <div class="variant-options-grid">
            {% render 'product-variant-options', product: product, option: option, block: block, picker_type: type %}
          </div>
        </fieldset>
      {%- elsif type == 'button' -%}
        <fieldset class="js product-form__input product-form__input--pill">
          <legend class="form__label">{{ label_content }}</legend>
          <div class="variant-options">
            {% render 'product-variant-options', product: product, option: option, block: block, picker_type: type %}
          </div>
        </fieldset>
      {%- else -%}
        <div class="product-form__input product-form__input--dropdown">
          <label class="form__label" for="Option-{{ section.id }}-{{ option_loop_index }}">
            {{ label_content }}
          </label>
          <div class="select">
            <select
              id="Option-{{ section.id }}-{{ option_loop_index }}"
              class="select__select"
              name="options[{{ option.name | escape }}]"
              form="{{ product_form_id }}"
            >
              {% render 'product-variant-options', product: product, option: option, block: block, picker_type: type %}
            </select>
            <span class="svg-wrapper">
              {{- 'icon-caret.svg' | inline_asset_content -}}
            </span>
          </div>
        </div>
      {%- endif -%}
    {%- endfor -%}

    {%- comment -%} SIZE SECTION - ALWAYS ON BOTTOM {%- endcomment -%}
    {%- if size_option -%}
      {% assign type = 'button' %}
      
      {% capture label_content %} 
        {% assign downcase_name = size_option.name | downcase %}
        {% assign uppercase_name = size_option.name | upcase %}
        {{
          block.settings.custom_labels
          | replace: '[count]', size_option_index | plus: 1
          | replace: '[name]', size_option.name
          | replace: '[name_lowercase]', downcase_name
          | replace: '[name_uppercase]', uppercase_name
          | replace: '[selected]', size_option.selected_value
        }} 
      {% endcapture %}

      <fieldset class="js product-form__input product-form__input--pill product-form__input--size-pills">
        <legend class="form__label">{{ label_content }}</legend>
        <div class="size-variant-options">
          {% for value in size_option.values %}
            {%- liquid
              assign option_disabled = true
              if value.available
                assign option_disabled = false
              endif
            -%}
            
            {%- capture input_id -%}
              {{ section.id }}-{{ size_option.position }}-{{ forloop.index0 }}
            {%- endcapture -%}
            
            {%- capture input_name -%}
              {{ size_option.name }}-{{ size_option.position }}
            {%- endcapture -%}
            
            {%- capture input_dataset -%}
              data-product-url="{{ value.product_url }}"
              data-option-value-id="{{ value.id }}"
            {%- endcapture -%}
            
            {%- capture label_unavailable -%}
              <span class="visually-hidden label-unavailable">
                {{- 'products.product.variant_sold_out_or_unavailable' | t -}}
              </span>
            {%- endcapture -%}
            
            <input
              type="radio"
              id="{{ input_id }}"
              name="{{ input_name | escape }}"
              value="{{ value | escape }}"
              form="{{ product_form_id }}"
              {% if value.selected %}
                checked
              {% endif %}
              {% if option_disabled %}
                disabled
              {% endif %}
              {{ input_dataset }}
            >
            <label for="{{ input_id }}" class="size-option-label">
              {{ value }}
              {% if option_disabled %}
                {{ label_unavailable }}
              {% endif %}
            </label>
          {% endfor %}
        </div>
      </fieldset>
    {%- endif -%}

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

  <style>
    /* COLOR STYLES */
    .product-form__input--color {
      margin-bottom: 2rem;
    }
    
    .color-variant-container {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
    
    .color-variant-main {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    
    .color-variant-main-display {
      display: flex;
      gap: 1rem;
      align-items: center;
    }
    
    .color-variant-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.5rem;
    }
    
    .color-variant-label {
      font-size: 12px;
      text-align: center;
      color: #666;
    }
    
    .see-more-colors-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f8f8f8;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 14px;
      font-weight: 500;
      text-decoration: none;
    }
    
    .see-more-colors-btn:hover {
      border-color: #333;
      background-color: #e8e8e8;
    }
    
    /* COLOR MODAL STYLES */
    .color-modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
      animation: fadeIn 0.3s ease;
    }
    
    .color-modal.active {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .color-modal-content {
      background-color: white;
      border-radius: 8px;
      width: 90%;
      max-width: 600px;
      max-height: 80vh;
      overflow-y: auto;
      animation: slideIn 0.3s ease;
    }
    
    .color-modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.5rem;
      border-bottom: 1px solid #eee;
    }
    
    .color-modal-header h3 {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 600;
    }
    
    .color-modal-close {
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      padding: 0;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .color-modal-body {
      padding: 1.5rem;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
      gap: 1rem;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    
    @keyframes slideIn {
      from { 
        opacity: 0;
        transform: translateY(-20px);
      }
      to { 
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* SIZE STYLES */
    .product-form__input--size-pills {
      margin-top: 2rem;
    }
    
    .size-variant-options {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 8px;
    }

    .size-variant-options input[type="radio"] {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .size-variant-options label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 8px 12px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #fff;
      cursor: pointer;
      transition: all 0.2s ease;
      font-size: 14px;
      font-weight: 500;
      text-align: center;
      white-space: nowrap;
    }

    .size-variant-options label:hover {
      border-color: #333;
      background-color: #f5f5f5;
    }

    .size-variant-options input[type="radio"]:checked + label {
      border-color: #333;
      background-color: #333;
      color: #fff;
    }

    .size-variant-options input[type="radio"]:disabled + label {
      opacity: 0.4;
      cursor: not-allowed;
      text-decoration: line-through;
    }

    .size-variant-options input[type="radio"]:disabled + label:hover {
      border-color: #ccc;
      background-color: #fff;
      color: inherit;
    }

    /* RESPONSIVE */
    @media (max-width: 768px) {
      .color-modal-content {
        width: 95%;
        margin: 1rem;
      }
      
      .color-modal-body {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 0.75rem;
        padding: 1rem;
      }
      
      .size-variant-options {
        gap: 6px;
      }

      .size-variant-options label {
        min-width: 36px;
        height: 36px;
        padding: 6px 10px;
        font-size: 13px;
      }
    }
  </style>

  <script>
    function openColorModal() {
      const modal = document.getElementById('color-modal-{{ section.id }}');
      if (modal) {
        modal.classList.add('active');
        document.body.style.overflow = 'hidden';
      }
    }
    
    function closeColorModal(event) {
      if (event && event.target !== event.currentTarget) return;
      
      const modal = document.getElementById('color-modal-{{ section.id }}');
      if (modal) {
        modal.classList.remove('active');
        document.body.style.overflow = '';
      }
    }
    
    // Close modal on ESC key
    document.addEventListener('keydown', function(event) {
      if (event.key === 'Escape') {
        closeColorModal();
      }
    });
    
    // Handle color selection in modal
    document.addEventListener('change', function(event) {
      if (event.target.type === 'radio' && event.target.name.includes('Color')) {
        // Update main color display
        const mainColorInputs = document.querySelectorAll('.color-variant-main input[type="radio"][name="' + event.target.name + '"]');
        mainColorInputs.forEach(input => {
          input.checked = input.value === event.target.value;
        });
        
        // Close modal after selection
        setTimeout(() => {
          closeColorModal();
        }, 300);
        
        // Trigger variant change
        if (typeof window.updateVariant === 'function') {
          window.updateVariant();
        }
      }
    });
  </script>
{%- endunless -%}