<style>
/* Kits */

:root {
    --color-kit: {{ section.settings.color_kit_main }};
    --color-kit-20: {{ section.settings.color_kit_main | color_modify: 'alpha', 0.2 }};
    --color-kit-10: {{ section.settings.color_kit_main | color_modify: 'alpha', 0.1 }};
    --color-kit-lighten: {{ section.settings.color_kit_main | color_lighten: 40  }};
    --color-kit-darken: {{ section.settings.color_kit_main | color_darken: 10  }};
    --color-kit-badge-soldout: {{ section.settings.color_kit_badge_soldout }};
    --color-kit-badge-mostsell: {{ section.settings.color_kit_badge_mostsell }}; 
    --color-kit-badge-discount: {{ section.settings.color_kit_badge_discount }}; 
    --color-kit-badge-moreeconomy: {{ section.settings.color_kit_badge_moreeconomy }}; 
    --color-secondary-kits: {{ section.settings.color_kit_secondary }};

}

.kit-swatches {
  display: grid;
  gap: 1rem;
  padding-bottom: 1rem;
  width: 100%;
}

.kit-swatches-item {
  display: flex;
  justify-content: space-between;
  border: .12rem solid var(--color-secondary-kits);
  border-radius: 1rem;
  padding: .6em 1.2rem;
  align-items: center;
  line-height: 1.5;
  max-width: 100%;
  position: relative;
  transition: .3s;
  width: 100%;
}

.kit-swatches-item:hover {
  opacity: .8;
  transition: .3s;
  cursor: pointer;
}

.kit-badges {
  display: inline-block;
  color: #fff;
  border-radius: 5px;
  padding: .15rem .4rem;
  font-size: .75rem;
  line-height: 1;
}

.kit-mostsell-badge {
  background-color: var(--color-kit-badge-mostsell);
  position: absolute;
  top: -10px;
  text-transform: uppercase;
}

.kit-moreeconomy-badge {
  background-color: var(--color-kit-badge-moreeconomy);
  position: absolute;
  top: -10px;
  text-transform: uppercase;
}

.kit-discount-badge {
  position: absolute;
  top: -10px;
  right: 28px;
  background-color: var(--color-kit-badge-discount);
  border-bottom-right-radius: 100px;
  border-top-left-radius: 100px;  
  text-transform: uppercase;
}

.kit-soldout-badge {
  position: absolute;
  top: -10px;
  right: 28px;
  background-color: var(--color-kit-badge-soldout);
  text-transform: uppercase;
}

.kit-save-badge {
  padding: 1px 4px;
  background-color: var(--color-secondary-kits);
  color: var(--color-body-text);
  border: 1px solid var(--color-secondary-kits);
}

.kit-badge-save-icon path {
  fill: currentColor;
} 

.kit-comparation-prices {
  text-align: right;
  line-height: 1;
}

.kit-old-value-price {
  color: var(--color-secondary-kits);
  text-decoration: line-through;
}

.kit-new-value-price {
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--color-kit);
}

.kit-product-image-wrapper {
  border: .2rem solid var(--color-secondary-kits);
  border-radius: 50%;
  overflow: hidden;
  height: 65px;
  min-width: 65px;
  text-align: center;
}

.kit-product-image {
  height: 100%;
}

.kit-item-title {
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.2;
}

.kit-content-left {
  display: flex;
  align-items: center;
  gap: 2.5vw;
}

.kit-content-right {
  min-width: max-content;
}

.kit-item-title, .kit-old-value-price {
  font-size: 1rem;
}

input[type="radio"]:checked + label[class="kit-label"]  {
  background-color: transparent !important;
  color: currentColor !important;
  border: none !important;
}

input[type="radio"]:checked + label .kit-swatches-item  {
  background-color: var(--color-kit-10);
  border-color: var(--color-kit);
}

.kit-swatches input[type="radio"]:checked + label .kit-product-image-wrapper {
  border-color: var(--color-kit);
}

.kit-swatches > input[type="radio"]:checked + label .kit-swatches-item .kit-swatches-quantity .kit-save-badge {
  background-color: var(--color-kit-lighten);
  color: var(--color-kit-darken);
  border-color: var(--color-kit-darken);
}

@media only screen and (max-width: 460px) {
  .kit-item-title, .kit-old-value-price {
    font-size: 3.5vw;
  }
  .kit-new-value-price {
    font-size: 4vw;
  }
  .kit-badges {
    font-size: 2.4vw;
  }
  .kit-product-image-wrapper {
    height: 15vw;
    min-width: 15vw;
    border-width: .18rem;
  }
  .kit-swatches-item {
    gap: 1vw;
    padding: 2vw 4vw;
  }
}

@media only screen and (max-width: 360px) {
  .kit-badge-save-icon {
    display: none;
  }
}

.kit-swatches-wrapper .header h5 {
  font-weight: 700;
  line-height: normal;
}
.kit-swatches-wrapper, .kit-swatches label {
  width: 100%;
}


</style>

{% for option in product.options %}
  {% if option == kits-swatch %}
    {% assign option_index = forloop.index0 %}
  {% endif %}
{% endfor %}


<!-- Kits de produtos -->
<div class="kit-swatches-wrapper" data-option-index="{{ option_index | plus: 1 }}">

  <div class="header">
    <h5>{{ kits-swatch }}</h5>
  </div>

  <div class="kit-swatches">

    {% for value in option.values %}
      {% for variante in product.variants %}
        {% if product.options_with_values[0].selected_value == variante.option1  %}
          {% assign option1 = variante.option1%}
        {% elsif product.options_with_values[1].selected_value == variante.option2  %}
          {%assign option2 = variante.option2%}
        {% elsif product.options_with_values[2].selected_value == variante.option3 %}
          {%assign option3 = variante.option3%}
        {% endif%}
      {% endfor %}

      {% for variante in product.variants %}
        {% if value == variante.option1  %}
          {%assign option1 = variante.option1%}
        {% elsif value == variante.option2  %}
          {%assign option2 = variante.option2%}
        {% elsif value == variante.option3 %}
          {%assign option3 = variante.option3%}
        {% endif%}

        {% if variante.option1 == option1 and variante.option2 == option2 and variante.option3 == option3%}
          {%- assign kit_img = variante.featured_media -%}
            {%- assign kit_price = variante.price -%}
            {%- assign kit_compare_price = variante.compare_at_price -%}
            {%- assign kit_available = variante.available -%}
        {% endif %}
      {% endfor %}

      <div data-value="{{ value | escape }}">


        <input class="kit-label hide single-option-selector-{{ section.id }} radio_option" data-index="option{{ option_index | plus: 1 }}" 
              id="swatch-{{ option_index }}-{{ value | handle }}" 
              type="radio" 
              name="option-{{ option_index }}" 
              value="{{ value | escape }}"{% if option.selected_value == value %}checked{%endif%} {% unless variant.available %}{% endunless %} />

        <label  class="kit-label" for="swatch-{{ option_index }}-{{ value | handle }}">
          
          <div class="kit-swatches-item">
            <div class="kit-content-left">
                <div class="kit-product-image-wrapper">
                    <img class="kit-product-image" src="{{ kit_img | img_url: '500x500', crop: 'center' }}" alt="">
                </div>    
                <div class="kit-swatches-quantity">

                    {% if section.settings.show_badge_mostsell %}
                        {% if forloop.index == section.settings.badge_mostsell_position%}
                        <div class="kit-mostsell-badge kit-badges">
                            Mais Vendido
                        </div>
                        {% endif %}
                    {% endif %}

                    {% if section.settings.show_badge_moreeconomy %}
                        {% if forloop.index == section.settings.badge_moreeconomy_position%}
                        <div class="kit-moreeconomy-badge kit-badges">
                            Maior Economia
                        </div>
                        {% endif %}
                    {% endif %}

                    <div class="kit-item-title">
                        {{value}}
                    </div>

                    {% if kit_compare_price != null and kit_price < kit_compare_price %}
                    <div class="kit-save-badge kit-badges">
                        <span class="kit-badge-save-icon">
                            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M6.01754 5.04822C5.74195 4.97933 5.46635 4.84153 5.25966 4.63483C5.05296 4.56594 4.98407 4.35924 4.98407 4.22144C4.98407 4.08365 5.05296 3.87695 5.19076 3.80805C5.39746 3.67026 5.60415 3.53246 5.81085 3.60136C6.22424 3.60136 6.56873 3.80805 6.77542 4.08365L7.39551 3.25687C7.18881 3.05017 6.98212 2.91238 6.77542 2.77458C6.56873 2.63678 6.29313 2.56788 6.01754 2.56788V1.60331H5.19076V2.56788C4.84627 2.63678 4.50178 2.84348 4.22618 3.11907C3.95059 3.46356 3.7439 3.87695 3.81279 4.29034C3.81279 4.70373 3.95059 5.11712 4.22618 5.39272C4.57068 5.73721 5.05296 5.9439 5.46635 6.1506C5.67305 6.2195 5.94864 6.35729 6.15534 6.49509C6.29313 6.63289 6.36203 6.83958 6.36203 7.04628C6.36203 7.25297 6.29313 7.45967 6.15534 7.66636C5.94864 7.87306 5.67305 7.94195 5.46635 7.94195C5.19076 7.94195 4.84627 7.87306 4.63957 7.66636C4.43288 7.52856 4.22618 7.32187 4.08839 7.11517L3.3994 7.87306C3.6061 8.14865 3.81279 8.35534 4.08839 8.56204C4.43288 8.76873 4.84627 8.97543 5.25966 8.97543V9.87111H6.01754V8.83763C6.43093 8.76873 6.77542 8.56204 7.05102 8.28644C7.39551 7.94195 7.6022 7.39077 7.6022 6.90848C7.6022 6.49509 7.46441 6.0128 7.11991 5.73721C6.77542 5.39272 6.43093 5.18602 6.01754 5.04822ZM5.60415 0.225342C2.57262 0.225342 0.0922852 2.70568 0.0922852 5.73721C0.0922852 8.76873 2.57262 11.2491 5.60415 11.2491C8.63568 11.2491 11.116 8.76873 11.116 5.73721C11.116 2.70568 8.63568 0.225342 5.60415 0.225342ZM5.60415 10.4912C2.98601 10.4912 0.850167 8.35534 0.850167 5.73721C0.850167 3.11907 2.98601 0.983223 5.60415 0.983223C8.22229 0.983223 10.3581 3.11907 10.3581 5.73721C10.3581 8.35534 8.22229 10.4912 5.60415 10.4912Z" fill="#494949"/>
                            </svg>
                        </span>
                        Economize 
                        <strong> 
                            {{ kit_compare_price 
                                | minus: kit_price
                                | money
                            }}
                        </strong>
                    </div>
                    {% endif %}

                </div>
            </div>
            
            <div class="kit-content-right">
                {% if kit_price < kit_compare_price and kit_compare_price != null %}
                <div class="kit-discount-badge kit-badges">
                    {{ kit_compare_price
                        | minus: kit_price
                        | times: 100.0
                        | divided_by: kit_compare_price
                        | round
                        | prepend: '-'
                        | append: '%' }}
                </div>
                {%endif%}
                
                {% if kit_available != true %}
                <div class="kit-soldout-badge kit-badges">
                    Esgotado
                </div>
                {% endif%}

                <div class="kit-comparation-prices"> 
                    {% if kit_compare_price != null%}
                    <div class="kit-old-value-price">
                        {{ kit_compare_price | money }}
                    </div>
                    {% endif%}
                    <div class="kit-new-value-price">
                        {{ kit_price | money }}
                    </div>
                </div>
            </div>
          </div>
        </label>
      </div>
    {% endfor %}
  </div>
</div>
<!--End Kits -->
