<style>
    :root {
        --color-button-addtocart: {{section.settings.color_button_addtocart}};
        --color-button-buynow: {{section.settings.color_button_buynow}};

        --color-button-addtocart-hover: {{section.settings.color_button_addtocart_hover}};
        --color-button-buynow-hover: {{section.settings.color_button_buynow_hover}};

        --color-text-button-addtocart: {{section.settings.color_text_button_addtocart}};
        --color-text-button-buynow: {{section.settings.color_text_button_buynow}};

        --color-text-button-addtocart-hover: {{section.settings.color_text_button_addtocart_hover}};
        --color-text-button-buynow-hover: {{section.settings.color_text_button_buynow_hover}};
    }

    .buttonAddtoCart {
        color: var(--color-text-button-addtocart) !important;
        background: var(--color-button-addtocart) !important;
    }

    .buttonAddtoCart:hover {
        color: var(--color-text-button-addtocart-hover) !important;
        background: var(--color-button-addtocart-hover) !important;
    }
    .buttonBuyNow-wrapper {
        padding: 0 5px;
    }
    .buttonBuyNow {
        width: 100%;
        border-radius: 100px;
        margin-top: -15px;
        background: var(--color-button-buynow);
        color: var(--color-text-button-buynow);
        border: 1px solid var(--color-button-buynow);
        min-height: auto;
        padding: 11px 0 12px;
        font-size: 16px;
        text-transform: uppercase;
        position: relative;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        float: left;
        letter-spacing: normal;
        border: 0;
        box-shadow: 3px 3px 3px #00000040;
        margin-bottom: 10px;
    }
    .buttonBuyNow span {
        font-weight: 600;
    }
    .buttonBuyNow:hover {
        background: var(--color-button-buynow-hover);
        color: var(--color-text-button-buynow-hover);
    }
    .buttonBuyNow[disabled], .buttonBuyNow[aria-disabled]{
        opacity: 0.5;
    }
</style>

{% capture "form_classes" -%}
    product-form product-form-{{ section.id }}
    {%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
    {%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
    {% if settings.show_swatch %} hidedropdown{% endif %}
{%- endcapture %}

{% form 'product', product, class: form_classes, novalidate: 'novalidate', data-product-form: '' %}

    {% render 'astron_parcelamento', current_variant: current_variant %}

    {%- for block in section.blocks -%}
        {%- case block.type -%}
            {%- when 'addition-information' -%}
                {% include 'additional-information' %}
        {% endcase %}
    {% endfor %}

    {%- if settings.quantity_msg -%}
        {%- assign enableqtyMsg = true -%}
        {%- if current_variant.inventory_management == "shopify" and current_variant.inventory_quantity < settings.max_quantity and current_variant.inventory_quantity != 0 -%}
            {%- assign enableqtyMsg = flase -%}
        {%- endif -%}
        {% assign qtyMsg = 'products.product.quantity_message' | t | split: '{{items}}' %}
        <div id="quantity_message" data-qty="{{ settings.max_quantity }}"
             {%- if enableqtyMsg -%}style="display:none;"{%- endif -%}>{{ qtyMsg[0] }} <span
                    class="items">{{ product.selected_or_first_available_variant.inventory_quantity }}</span> {{ qtyMsg[1] }}
        </div>
        {% for variant in product.variants %}<span class="hide"
                                                   id="pvr-{{ variant.id }}">{{ variant.inventory_quantity }}</span>{% endfor %}
    {%- endif -%}

    {% if section.settings.variant == 'dropdown' %}
        {% unless product.has_only_default_variant %}
            <div class="product-form__controls-group swatch_variants dropdown">
                {% for option in product.options_with_values %}
                    <div class="selector-wrapper js product-form__item">
                        <label for="SingleOptionSelector-{{ forloop.index0 }}">
                            {{ option.name }}
                        </label>
                        <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                                id="SingleOptionSelector-{{ forloop.index0 }}"
                                data-index="option{{ forloop.index }}"
                        >
                            {% for value in option.values %}
                                <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                            {% endfor %}
                        </select>
                    </div>
                {% endfor %}
            </div>
        {% endunless %}
    {% endif %}


    <div class="product-form__controls-group">
        {% if section.settings.variant == 'swatch' %}
            {% unless product.has_only_default_variant %}

                {% for option in product.options_with_values %}

                    {% if option.name == 'Color' or option.name == 'Cor'  or option.name == 'Escolha a cor'%}
                        <!-- SWATCHES: uncomment the code above to rollback and remove the code below -->
                        {% include 'swatch' with 'Color' %}
                        <!-- END SWATCHES -->

                    {% elsif option.name == 'Kits' %}
                        {% include 'kits-swatch' with option.name %}

                    {% elsif option.name != 'Color' %}
                        {% include 'text-swatch' with option.name %}

                    {% else %}
                        <div class="selector-wrapper js product-form__item">
                            <label for="SingleOptionSelector-{{ forloop.index0 }}">
                                {{ option.name }}
                            </label>
                            <select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
                                    id="SingleOptionSelector-{{ forloop.index0 }}"
                                    data-index="option{{ forloop.index }}"
                            >
                                {% for value in option.values %}
                                    <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    {% endif %}
                {% endfor %}

            {% endunless %}

        {% endif %}

        <select name="id" id="ProductSelect-{{ section.id }}" class="product-form__variants no-js">
            {% for variant in product.variants %}
                <option value="{{ variant.id }}"
                        {%- if variant == current_variant %} selected="selected" {%- endif -%}
                >
                    {{ variant.title }}  {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                </option>
            {% endfor %}
        </select>


        <div class="product_add_to_cart">
            <div class="product-form__error-message-wrapper product-form__error-message-wrapper--hidden{% if section.settings.enable_payment_button %} product-form__error-message-wrapper--has-payment-button{% endif %}"
                 data-error-message-wrapper
                 role="alert"
            >
                <span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
                {% include 'icon-error' %}
                <span class="product-form__error-message"
                      data-error-message>{{ 'products.product.quantity_minimum_message' | t }}</span>
            </div>


            <div class="pro_qty_add_cart">
                {% if section.settings.show_quantity_selector %}
                    <div class="product-form__controls-group quantity">
                        <div class="product-form__item">
                            {% comment %}
                            <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                            {% endcomment %}
                            <div class="qty_box">
                                <button type='button' class='qtyminus' field='Quantity-{{ section.id }}'>
                                    <span>
                                        <svg width="15" height="3" viewBox="0 0 15 3" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <line x1="1.5" y1="1.5" x2="13.5" y2="1.5" stroke="#ffffff" stroke-width="3" stroke-linecap="round"/>
                                        </svg>
                                    </span>
                                </button>
                                <input type="text" id="Quantity-{{ section.id }}"
                                       name="quantity" value="1" min="1" pattern="[0-9]*"
                                       class="product-form__input product-form__input--quantity" data-quantity-input
                                >
                                <button type='button' class='qtyplus' field='Quantity-{{ section.id }}'>
                                    <span>
                                        <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <line y1="7.5" x2="15" y2="7.5" stroke="white" stroke-width="3"/>
                                        <line x1="7.5" y1="15" x2="7.5" stroke="white" stroke-width="3"/>
                                        </svg>
                                    </span>
                                </button>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <div {% unless section.settings.enable_addtocart_button == true %} style="display: none !important;" {% endunless %}
                        class="product-form__controls-group product-form__controls-group--submit">
                    <div class="product-form__item product-form__item--submit
                        {%- if section.settings.enable_payment_button %} product-form__item--payment-button {%- endif -%}
                        {%- if product.has_only_default_variant %} product-form__item--no-variants {%- endif -%}"
                    >
                        <button type="submit" name="add"
                                {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                                aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                                class="btn buttonAddtoCart product-form__cart-submit{% if section.settings.enable_payment_button %} btn--primary-accent{% endif %}"
                            {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
                                data-add-to-cart>
                                    <span data-add-to-cart-text>
                                        {% unless current_variant.available %}
                                            {{ 'products.product.sold_out' | t }}
                                        {% else %}
                                            {{ 'products.product.add_to_cart' | t }}
                                        {% endunless %}
                                    </span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="shopify_payment_btn">
                {% if section.settings.enable_payment_button %}
                    {{ form | payment_button }}
                {% endif %}
            </div>


            <div {% unless section.settings.enable_buy_button == true %} style="display: none !important;" {% endunless %}
                    class="buttonBuyNow-wrapper">
                <!--Botao comprar agora-->
                <button class="buttonBuyNow"
                        {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                        aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.buy_now' | t }}{% endunless %}"
                        data-buy-now>
                        <span data-buy-now-text>
                            {% unless current_variant.available %}
                                {{ 'products.product.sold_out' | t }}
                            {% else %}
                                {{ 'products.product.buy_now' | t }}
                            {% endunless %}
                        </span>
                </button>
            </div>
        </div>

        <div class="secure_payment text-center">
            {% if settings.formas_pagamento %}
                <img src="{{ settings.formas_pagamento | img_url: 'master' }}" alt="formas de pagamento">
            {% else %}
                <img src="{{ 'formas-de-pagamento.png' | asset_url }}" alt="formas de pagamento"/>
            {% endif %}
        </div>

        <div class="btn_product_wishlist {% if product.tags contains 'sizeguide' or product.tags contains 'ask_question' %}with_ask_question{% endif %}">
            {% if product.tags contains 'sizeguide' %}
                <div class="size_guide_option">
                    <span class="sizeguide">{% include 'icon-size_chart' %}<font>Size Guide</font></span>
                </div>
            {% endif %}
            {% if product.tags contains 'ask_question' %}
                <div class="ask_question">
                    <span><i class="fa fa-question-circle-o"
                             aria-hidden="true"></i>&nbsp;<font>Ask Question?</font></span>
                </div>
            {% endif %}
        </div>
    </div>

    {%- for block in section.blocks -%}
        {%- case block.type -%}
            {%- when 'whatsapp-button' -%}
                {% assign productname = product.title %}
                {% assign productlink = shop.url | append: product.url %}
                <style>
                    .whatsapp-button {
                        margin: 30px 10px 10px 10px;
                        border-radius: 10px;
                        padding: 11px 50px;
                        background-color: {{ block.settings.whatsapp-button-color }};
                        color: {{ block.settings.whatsapp-button-text-color }};
                        display: flex;
                        font-weight: 400;
                        justify-content: center;
                        align-items: center;
                    }

                    .whatsapp-button span {
                        margin-right: 10px;
                    }

                    .whatsapp-button span svg {
                        fill: {{ block.settings.whatsapp-button-text-color }};
                    }
                </style>
                <div>
                    <a class="whatsapp-button"
                            {% if block.settings.new_tab_whatsapp %} target="_blank" {% endif %}
                       href="https://wa.me/55{{ block.settings.whatsapp-phone-text }}?text={{ block.settings.descwhats | replace: '[linkproduto]', productlink | replace: '[nomeproduto]', productname }}"><span>{% render 'icon-whatsapp' %}</span>{{ block.settings.whatsapp-button-text }}
                    </a>
                </div>
        {% endcase %}
    {% endfor %}
{% endform %}

<!-- {% render "simulador-cep" %} -->


<script type="lazyload2" defer="defer">
  $(function(){
    $(".swatch_item").find(".swatch-element").each(function(){
      if($(this).find("input").is(':checked')){
        $(this).parents('.swatch_item').prev(".header").find('h5').append(":<span> "+$(this).find("input").val()+"</span>");
      }
    });

    $(".swatch_item .swatch-element input").change(function(){
      if($(this).is(":checked") ){
        var val = $(this).val();
        $(this).parents(".swatch_item").prev(".header").find('h5 span').text(" " +val);
      }
    });
  });

</script>
