/** Shopify CDN: Minification failed

Line 16:302 Unexpected "<"
Line 19:1 Expected identifier but found "%"
Line 20:0 Unexpected "<"
Line 21:1 Expected identifier but found "%"
Line 22:0 Unexpected "<"
Line 23:1 Expected identifier but found "%"
Line 23:41 Unexpected "<"
Line 23:115 Expected identifier but found "%"
Line 25:0 Unexpected "{"
Line 25:1 Expected identifier but found "%"
... and 809 more hidden warnings

**/
                                                                                                                                                                                                                                                                                                              <link rel="stylesheet" href="{{ 'component-pickup-availability.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'section-main-product.css' | asset_url }}">
<link rel="stylesheet" href="{{ 'rte.css' | asset_url }}">
{% if product.media.size > 1 or section.settings.gallery_layout == 'thumbnail_slider' %}
<link rel="stylesheet" href="{{ 'component-slider.css' | asset_url }}">
{% endif %}
<link rel="stylesheet" href="{{ 'component-deferred-media.css' | asset_url }}">
{%- if settings.cart_type == 'drawer' -%}<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>{%- endif -%}

{%- style -%}
  .section-{{ section.id }}{
    background: {{ section.settings.background }};
  }

  .video-wrapper {
    width:100%;
    overflow: hidden;
  }
  .video-wrapper video {
    object-fit: cover;
    width:100%;
    height:auto;
  }
  {% if section.settings.enable_sticky_info %}
  @media screen and (min-width: 750px){
    .template-product{
        padding-bottom: 80px;
    }
  }
  {% endif %}
  .ProductForm__Inventory {
    color: {{ settings.sold_out_badge_color }};
  }
  .ProductForm__Inventory svg {
    fill: {{ settings.sold_out_badge_color }};
  }
  {%- if section.settings.enable_size_chart -%}
  .product-section variant-radios .product-form__input.variant_size {
    margin-bottom: 5rem !important;
    position: relative;
  }
  {% endif %}
  @media screen and (max-width: 767px) {
    .section-{{ section.id }}{
      padding: 15px;
    }
  }
{%- endstyle -%}


{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}
{%- if first_3d_model -%}
  <link rel="stylesheet" href="{{ 'component-product-model.css' | asset_url }}">
  <link id="ModelViewerStyle" rel="stylesheet" href="/cdn/shopifycloud/model-viewer-ui/assets/v1.0/model-viewer-ui.css"  >
  <link id="ModelViewerOverride" rel="stylesheet" href="{{ 'component-model-viewer-ui.css' | asset_url }}"  >
{%- endif -%}

<section class="section-{{ section.id }} product-section">
  <div class="product product--{{ section.settings.media_size }} product--{{ section.settings.gallery_layout }} grid grid--1-col {% if product.media.size > 0 %}grid--2-col-tablet{% else %}product--no-media{% endif %}"
        itemscope itemtype="http://schema.org/Product"
        id="section-{{ section.id }}"
        data-picker-type="{{ picker_type }}"
        data-section-id="{{ section.id }}"
        data-product-id="{{ product.id }}"
        data-product-handle="{{ product.handle }}"
        data-section-type="product-template"
        data-thumbs-location="{{ thumbs_location }}"
        data-product-first-available-variant="{{ product.selected_or_first_available_variant.featured_media }}"
        data-image-zoom-type="true"
        data-enable-history-state="true"
        data-product-selector="select">
    
    <div class="grid__item product__media-wrapper">
      <media-gallery id="MediaGallery-{{ section.id }}" product-image="{{ product.media.size }}" role="region" {% if section.settings.enable_sticky_info %}class="product__media-gallery"{% endif %} aria-label="{{ 'products.product.media.gallery_viewer' | t }}" data-desktop-layout="{{ section.settings.gallery_layout }}">
        <div id="GalleryStatus-{{ section.id }}" class="visually-hidden" role="status"></div>
        <slider-component id="GalleryViewer-{{ section.id }}" class="slider-mobile-gutter {%- if section.settings.gallery_layout == 'stacked' -%}stack-images{%- endif -%}">
          <a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">
            {{ "accessibility.skip_to_product_info" | t }}
          </a>
          <ul id="my-gallery" class="pswp-gallery product__media-list grid grid--peek list-unstyled slider slider--mobile" role="list">
            {%- liquid
              assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src'
              assign media_count = product.media.size

              if section.settings.media_size == 'large'
                assign media_width = 0.65
              elsif section.settings.media_size == 'medium'
                assign media_width = 0.55
              elsif section.settings.media_size == 'small'
                assign media_width = 0.45
              endif
            -%}
            {%- if product.selected_or_first_available_variant.featured_media != null -%}
              {%- assign featured_media = product.selected_or_first_available_variant.featured_media -%}
              <li id="Slide-{{ section.id }}-{{ featured_media.id }}" class="product__media-item grid__item slider__slide is-active{% if featured_media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains featured_media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ featured_media.id }}">
                {%- assign media_position = 1 -%}
                {% render 'product-thumbnail', media: featured_media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: false %}
              </li>
            {%- endif -%}
            {%- for media in product.media -%}
              {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
                <li id="Slide-{{ section.id }}-{{ media.id }}" class="product__media-item grid__item slider__slide{% if product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} is-active{% endif %}{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
                  {%- assign media_position = media_position | default: 0 | plus: 1 -%}
                  {% render 'product-thumbnail', media: media, position: media_position, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true, media_width: media_width, lazy_load: true %}
                </li>
              {%- endunless -%}
            {%- endfor -%}
          </ul>
        </slider-component>
        {%- if media_count > 1 and section.settings.gallery_layout != 'stacked' -%}
          <slider-component id="GalleryThumbnails-{{ section.id }}" class="thumbnail-slider slider-mobile-gutter quick-add-hidden {% if media_count <= 3 %} thumbnail-slider--no-slide{% endif %}">
            <button type="button" class="link slide-arrow prev-arrow slider-button slider-button--prev{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}" name="previous" aria-label="{{ 'general.slider.previous_slide' | t }}" aria-controls="GalleryThumbnails-{{ section.id }}" data-step="3">
               <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-caret" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 256 256" xml:space="preserve"><g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" ><path d="M 65.75 90 c 0.896 0 1.792 -0.342 2.475 -1.025 c 1.367 -1.366 1.367 -3.583 0 -4.949 L 29.2 45 L 68.225 5.975 c 1.367 -1.367 1.367 -3.583 0 -4.95 c -1.367 -1.366 -3.583 -1.366 -4.95 0 l -41.5 41.5 c -1.367 1.366 -1.367 3.583 0 4.949 l 41.5 41.5 C 63.958 89.658 64.854 90 65.75 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" /></g></svg>
            </button>
            <ul id="Slider-Thumbnails-{{ section.id }}" class="thumbnail-list list-unstyled slider slider--mobile{% if section.settings.gallery_layout == 'thumbnail_slider' %} slider--tablet-up{% endif %}">
              {%- if featured_media != null -%}
                {%- liquid
                  capture media_index
                    if featured_media.media_type == 'model'
                      increment model_index
                    elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video'
                      increment video_index
                    elsif featured_media.media_type == 'image'
                      increment image_index
                    endif
                  endcapture
                  assign media_index = media_index | plus: 1
                -%}
                <li id="Slide-Thumbnails-{{ section.id }}-0" class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains featured_media.src %} thumbnail-list_item--variant{% endif %}" data-target="{{ section.id }}-{{ featured_media.id }}" data-media-position="{{ media_index }}">
                   <button class="thumbnail global-media-settings global-media-settings--no-shadow {% if featured_media.preview_image.aspect_ratio > 1 %}thumbnail--wide{% else %}thumbnail--narrow{% endif %}"
                    aria-label="{%- if featured_media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif featured_media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif featured_media.media_type == 'video' or featured_media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                    aria-current="true"
                    aria-controls="GalleryViewer-{{ section.id }}"
                    aria-describedby="Thumbnail-{{ section.id }}-0"
                  >
                    <img id="Thumbnail-{{ section.id }}-0" srcset="{% if featured_media.preview_image.width >= 54 %}{{ featured_media.preview_image | image_url: width: 54 }} 54w,{% endif %}
                      {% if featured_media.preview_image.width >= 74 %}{{ featured_media.preview_image | image_url: width: 74 }} 74w,{% endif %}
                      {% if featured_media.preview_image.width >= 104 %}{{ featured_media.preview_image | image_url: width: 104 }} 104w,{% endif %}
                      {% if featured_media.preview_image.width >= 162 %}{{ featured_media.preview_image | image_url: width: 162 }} 162w,{% endif %}
                      {% if featured_media.preview_image.width >= 208 %}{{ featured_media.preview_image | image_url: width: 208 }} 208w,{% endif %}
                      {% if featured_media.preview_image.width >= 324 %}{{ featured_media.preview_image | image_url: width: 324 }} 324w,{% endif %}
                      {% if featured_media.preview_image.width >= 416 %}{{ featured_media.preview_image | image_url: width: 416 }} 416w,{% endif %},
                      {{ featured_media.preview_image | image_url }} {{ media.preview_image.width }}w"
                      src="{{ featured_media | image_url: width: 416 }}"
                      sizes="(min-width: {{ settings.page_width }}px) calc(({{ settings.page_width | minus: 100 | times: media_width | round }} - 4rem) / 4), (min-width: 990px) calc(({{ media_width | times: 100 }}vw - 4rem) / 4), (min-width: 750px) calc((100vw - 15rem) / 8), calc((100vw - 14rem) / 3)"
                      alt="{{ featured_media.alt | escape }}"
                      height="208"
                      width="208"
                      loading="lazy"
                    >
                  </button>
                </li>
              {%- endif -%}
              {%- for media in product.media -%}
                {%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
                  {%- liquid
                    capture media_index
                      if media.media_type == 'model'
                        increment model_index
                      elsif media.media_type == 'video' or media.media_type == 'external_video'
                        increment video_index
                      elsif media.media_type == 'image'
                        increment image_index
                      endif
                    endcapture
                    assign media_index = media_index | plus: 1
                  -%}
                   <li id="Slide-Thumbnails-{{ section.id }}-{{ forloop.index }}" class="thumbnail-list__item slider__slide{% if section.settings.hide_variants and variant_images contains media.src %} thumbnail-list_item--variant{% endif %}" data-target="{{ section.id }}-{{ media.id }}"  data-media-position="{{ media_index }}">
                    {%- if media.media_type == 'model' -%}
                      <span class="thumbnail__badge" aria-hidden="true">
                        {%- render 'icon' with '3d-model' -%}
                      </span>
                    {%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}
                      <span class="thumbnail__badge" aria-hidden="true">
                        {%- render 'icon' with 'play' -%}
                      </span>
                    {%- endif -%}
                    <button class="thumbnail global-media-settings global-media-settings--no-shadow {% if media.preview_image.aspect_ratio > 1 %}thumbnail--wide{% else %}thumbnail--narrow{% endif %}"
                      aria-label="{%- if media.media_type == 'image' -%}{{ 'products.product.media.load_image' | t: index: media_index }}{%- elsif media.media_type == 'model' -%}{{ 'products.product.media.load_model' | t: index: media_index }}{%- elsif media.media_type == 'video' or media.media_type == 'external_video' -%}{{ 'products.product.media.load_video' | t: index: media_index }}{%- endif -%}"
                      {% if media == product.selected_or_first_available_variant.featured_media or product.selected_or_first_available_variant.featured_media == null and forloop.index == 1 %} aria-current="true"{% endif %}
                      aria-controls="GalleryViewer-{{ section.id }}"
                      aria-describedby="Thumbnail-{{ section.id }}-{{ forloop.index }}"
                    >
                      <img id="Thumbnail-{{ section.id }}-{{ forloop.index }}"
                        srcset="{% if media.preview_image.width >= 59 %}{{ media.preview_image | image_url: width: 59 }} 59x,{% endif %}
                                {% if media.preview_image.width >= 118 %}{{ media.preview_image | image_url: width: 118 }} 118w,{% endif %}
                                {% if media.preview_image.width >= 84 %}{{ media.preview_image | image_url: width: 84 }} 84w,{% endif %}
                                {% if media.preview_image.width >= 168 %}{{ media.preview_image | image_url: width: 168 }} 168w,{% endif %}
                                {% if media.preview_image.width >= 130 %}{{ media.preview_image | image_url: width: 130 }} 130w,{% endif %}
                                {% if media.preview_image.width >= 260 %}{{ media.preview_image | image_url: width: 260 }} 260w{% endif %}"
                        src="{{ media | image_url: width: 84, height: 84 }}"
                        sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 12), (min-width: 750px) calc((100vw - 16.5rem) / 8), calc((100vw - 8rem) / 5)"
                        alt="{{ media.alt | escape }}"
                        height="200"
                        width="200"
                        loading="lazy"
                      >
                    </button>
                  </li>
                {%- endunless -%}
              {%- endfor -%}
            </ul>
            <button type="button" class="link slide-arrow next-arrow slider-button slider-button--next{% if media_count <= 3 %} small-hide{% endif %}{% if media_count <= 4 %} medium-hide large-up-hide{% endif %}" name="next" aria-label="{{ 'general.slider.next_slide' | t }}" aria-controls="GalleryThumbnails-{{ section.id }}" data-step="3">
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="icon icon-caret" viewBox="0 0 256 256" xml:space="preserve"><g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" ><path d="M 24.25 90 c -0.896 0 -1.792 -0.342 -2.475 -1.025 c -1.367 -1.366 -1.367 -3.583 0 -4.949 L 60.8 45 L 21.775 5.975 c -1.367 -1.367 -1.367 -3.583 0 -4.95 c 1.367 -1.366 3.583 -1.366 4.95 0 l 41.5 41.5 c 1.367 1.366 1.367 3.583 0 4.949 l -41.5 41.5 C 26.042 89.658 25.146 90 24.25 90 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" /></g></svg>
            </button>
          </slider-component>
        {%- endif -%}
      </media-gallery>
    </div>
    <div class="product__info-wrapper {% if settings.page_width > 1400 and section.settings.media_size == 'small' %} product__info-wrapper--extra-padding{% endif %} qu_product">
      <div id="ProductInfo-{{ section.id }}" class="product__info-container">
        {%- assign product_form_id = 'product-form-' | append: section.id | append: product.id -%}
          {% if section.settings.breadcrumb %}
            {% include 'breadcrumbs' %}
          {% endif %}
        {%- for block in section.blocks -%}
          {%- case block.type -%}
          {%- when '@app' -%}
            {% render block %}
          {%- when 'text' -%}
            <p class="product__text{% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %}" {{ block.shopify_attributes }}>
              {{- block.settings.text -}}
            </p>
          {%- when 'title' -%}
            <h1 class="product__title" {{ block.shopify_attributes }}>
              {{ product.title | escape }}
            </h1>
          {%- when 'price' -%}
            <div class="no-js-hidden" id="price-{{ product.id }}" role="status" {{ block.shopify_attributes }}>
              {%- render 'price', product: product, product_save_amount: true, product_save_type: dollar, use_variant: true, show_badges: true, price_class: 'price--large' -%}
            </div>
            {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
              <div class="product__tax" style="color: #287c2a;">
                {%- if cart.taxes_included -%}
                  {{ 'products.product.include_taxes' | t }}
                {%- endif -%}
                {%- if shop.shipping_policy.body != blank -%}
                  {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                {%- endif -%}
              </div>
            {%- endif -%}
            <div {{ block.shopify_attributes }}>
              {%- assign product_form_installment_id = 'product-form-installment-' | append: section.id -%}
                {%- form 'product', product, id: product_form_installment_id, class: 'installment caption-large' -%}
                  <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                  {{ form | payment_terms }}
                {%- endform -%}
            </div>
          {%- when 'trust-badge' -%}
          {%- if block.settings.image != blank -%}
            {% assign alt = block.settings.image.alt | default: shop.name | escape %}
            {% assign title = block.settings.image.alt | default: shop.name | escape %}
            {{ block.settings.image | image_url: width: block.settings.image.width | image_tag:
              loading: 'lazy',
              sizes: sizes,
              data-sizes: 'auto',
              alt: alt,
              title: title,
              class: 'Image--lazyLoad',
              widths: '246, 493, 600, 713, 823, 990, 1000, 1500',
              height: 'auto'
            }}    
          {%- endif -%}
          {%- when 'description' -%}
            {%- if product.description != blank -%}
              <div class="product__description rte baytuluk-product-summary">
                {{ product.description | strip_html | truncatewords: 45 }}
              </div>
            {%- endif -%}
        <hr>
          {%- when 'custom_liquid' -%}
            {{ block.settings.custom_liquid }}
          {%- when 'collapsible_tab' -%}
            <link rel="stylesheet" href="{{ 'accordion.css' | asset_url }}">
            <div class="product__accordion accordion" {{ block.shopify_attributes }}>
              <details id="Details-{{ block.id }}-{{ section.id }}">
                <summary>
                  <div class="summary__title">
                    <h2 class="h4 accordion__title">
                      {{ block.settings.heading | default: block.settings.page.title }}
                    </h2>
                  </div>
                  {% render 'icon' with 'caret' %}
                </summary>
                <div class="accordion__content rte" id="ProductAccordion-{{ block.id }}-{{ section.id }}">
                  {{ block.settings.content }}
                  {{ block.settings.page.content }}
                </div>
              </details>
            </div>
          {%- when 'popup' -%}
              <modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ block.id }}" {{ block.shopify_attributes }}>
                <button id="ProductPopup-{{ block.id }}" class="product-popup-modal__button" type="button" aria-haspopup="dialog">{{ block.settings.text | default: block.settings.page.title }}</button>
              </modal-opener>
          
          {%- when 'share' -%}
            <div class="social-sharing">
            {%- assign share_url = shop.url | append: product.url -%}
            {%- assign twitter_text = product.title -%}
            {%- assign pinterest_description = product.description | strip_html | truncatewords: 15 | url_param_escape -%}
            {%- assign pinterest_image = product.featured_image | img_url: 'large' | prepend: 'https:' -%}
            
              <label class="form__label">{{ block.settings.share_label }}</label>
                <a target="_blank" rel="noopener" href="//facebook.com/sharer.php?u={{ shop.url | append: product.url }}" class="full-unstyled-link social-sharing__link" title="{{ 'general.social.facebook' | t }}">
                  {%- render 'icon' with 'facebook' -%}
                </a>
                <a target="_blank" rel="noopener" href="//twitter.com/share?text={{ share_title | url_param_escape }}&amp;url={{ shop.url | append: product.url }}" class="full-unstyled-link social-sharing__link" title="{{ 'general.social.twitter' | t }}">
                  {%- render 'icon' with 'twitter' -%}
                </a>
                <a target="_blank" rel="noopener" href="//pinterest.com/pin/create/button/?url={{ shop.url | append: product.url }}&amp;media={{ product.featured_image | img_url: 'large' | prepend: 'https:' }}&amp;description={{ product.description | strip_html | truncatewords: 15 | url_param_escape }}" class="full-unstyled-link social-sharing__link" title="{{ 'general.social.pinterest' | t }}">
                  {%- render 'icon' with 'pinterest' -%}
                </a>
              </div>
              
          {%- when 'variant_picker' -%}
            {%- unless product.has_only_default_variant -%}
              {%- if block.settings.picker_type == 'button' -%}
                <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-product="{{ product.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                  {%- for option in product.options_with_values -%}
                    {% assign variantCount = forloop.index %}
                      <fieldset class="js product-form__input variant_{{ option.name | downcase }}">
                        <legend class="form__label">{{ option.name }}</legend>

                        {%- if section.settings.enable_size_chart -%}
                          {%- if option.name == 'Size' or option.name == 'size' and section.settings.enable_size_chart -%}
                            <div>
                          {%- endif -%}
                        {%- endif -%}
                    <div class="variant_name_place">
                        <div class="variant-options">
                          {%- for value in option.values -%}
                             {%- assign variant_option = 'option' | append: variantCount -%}
                            {%- for variant in product.variants -%}
                              {%- if variant[variant_option] == value -%}
                                {%- assign variant_for_value = variant -%}
                                {%- break -%}
                              {%- endif -%}                              
                            {%- endfor -%}
                            <input type="radio" class="variant_name_{{ option.name | downcase }}" id="{{ section.id }}-{{ product.id }}-{{ option.position }}-{{ forloop.index0 }}"
                                  name="{{ option.name }}"
                                  value="{{ value | escape }}"
                                  form="{{ product_form_id }}"
                                  {% if option.selected_value == value %}checked{% endif %}
                            >
                            <label for="{{ section.id }}-{{ product.id }}-{{ option.position }}-{{ forloop.index0 }}" {% if option.name == 'Color' %}style="background-color: {{ value }}"{% endif %} {% if variant_for_value.image != blank %}class="image_change"{% endif %} data-variant-src="{{ variant_for_value.image | img_url: 'master' }}">
                              {{ value }}
                            </label>
                          {%- endfor -%}
                        </div>
                        {%- if option.name == 'Color' %}
                          {%- for value in option.values limit:1 -%}
                            {%- assign variant_option = 'option' | append: variantCount -%}
                            {%- for variant in product.variants -%}
                              {%- if variant[variant_option] == value -%}
                                {%- assign variant_for_value = variant -%}
                                {%- break -%}
                              {%- endif -%}                              
                            {%- endfor -%}
                            <span id="data-variant-name" data-variant-name>{{ value }}</span>
                          {% endfor %}
                        {%- endif -%}
                    </div>
                        {%- if section.settings.enable_size_chart and section.settings.page != blank -%}
                          {%- if option.name == 'Size' or option.name == 'size' and section.settings.enable_size_chart -%}
                            <modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-{{ section.id }}" {{ section.shopify_attributes }}>
                              <button id="ProductPopup-{{ section.id }}" class="product-popup-modal__button" type="button" aria-haspopup="dialog">{{ 'templates.product.size_chart.title' | t }}</button>
                            </modal-opener>
                          </div>
                          {%- endif -%}
                        {%- endif -%}
                      </fieldset>                      
                  {%- endfor -%}
                  <script type="application/json">
                    {{ product.variants | json }}
                  </script>
                  <hr>
                </variant-radios>
              {%- else -%}
                <variant-selects class="no-js-hidden" data-section="{{ section.id }}" data-product="{{ product.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                  {%- for option in product.options_with_values -%}
                    {% assign variantCount = forloop.index %}
                    <div class="product-form__input product-form__input--dropdown sevariant_{{ option.name | downcase }}">
                      <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                        {{ option.name }}
                      </label>
                      <div class="select">
                        <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                          class="select__select"
                          name="options[{{ option.name | escape }}]"
                          form="{{ product_form_id }}"
                        >
                          {%- for value in option.values -%}
                            {%- assign variant_option = 'option' | append: variantCount -%}
                            {%- for variant in product.variants -%}
                              {%- if variant[variant_option] == value -%}
                                {%- assign variant_for_value = variant -%}
                                {%- break -%}
                              {%- endif -%}                              
                            {%- endfor -%}
                            <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %} {% if variant_for_value.image != blank %}data-variant-src="{{ variant_for_value.image | img_url: 'master' }}"{% endif %}>
                              {{ value }}
                            </option>
                          {%- endfor -%}
                        </select>
                        {% render 'icon' with 'caret' %}
                      </div>
                    </div>
                  {%- endfor -%}

                  <script type="application/json">
                    {{ product.variants | json }}
                  </script>
                  <hr>
                </variant-selects>
              {%- endif -%}
            {%- endunless -%}
          {%- when 'buy_buttons' -%}
            {%- liquid
              assign gift_card_recipient_feature_active = false
              if block.settings.show_gift_card_recipient and product.gift_card?
                assign gift_card_recipient_feature_active = true
              endif
        
              assign show_dynamic_checkout = false
              if block.settings.show_dynamic_checkout and gift_card_recipient_feature_active == false
                assign show_dynamic_checkout = true
              endif
            -%}
            
            <div {{ block.shopify_attributes }}>
              <product-form class="product-form" data-hide-errors="{{ gift_card_recipient_feature_active }}">
                <div class="product-form__error-message-wrapper" role="alert" hidden>
                  <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
                    <circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
                    <circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
                    <path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
                    <path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7" />
                  </svg>
                  <span class="product-form__error-message"></span>
                </div>

                {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                  {%- if gift_card_recipient_feature_active -%}
                    {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
                  {%- endif -%}
                <div class="product_addtocart_from">
                  <div class="product-form__input product-form__quantity" {{ block.shopify_attributes }}>
                  {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
                    <label class="form__label" for="Quantity-{{ section.id }}">
                      {{ 'products.product.quantity.label' | t }}
                    </label>
                    <quantity-input class="quantity">
                      <button class="quantity__button  {% if settings.cart_type == 'drawer' %} no-js-hidden{% endif %}" name="minus" type="button">
                        <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
                        {%- render 'icon' with 'minus' -%}
                      </button>
                      <input class="quantity__input" type="number" name="quantity" id="Quantity-{{ section.id }}" min="1" value="1" form="{{ product_form_id }}">
                      <button class="{% if settings.cart_type == 'drawer' %} no-js-hidden {% endif %}  quantity__button" name="plus" type="button">
                        <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
                        {%- render 'icon' with 'plus' -%}
                      </button>
                    </quantity-input>
                  </div>
                  <button class="button--primary-outline button AddToCart"
                  type="submit"
                  name="add"
                  {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                >
                    <span data-add-to-cart-text>
                      {%- if product.selected_or_first_available_variant.available -%}
                        {{ 'products.product.add_to_cart' | t }}
                      {%- else -%}
                        {{ 'products.product.sold_out' | t }}
                      {%- endif -%}
                    </span>
                    <div class="loading-overlay__spinner hidden">
                      <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                      </svg>
                    </div>
                </button>
              </div>
                
                  <input type="hidden" name="id" data-productid="{{ product.id }}" value="{{ product.selected_or_first_available_variant.id }}">
                  
                  <div class="product-form__buttons">
                    {%- if block.settings.show_dynamic_checkout -%}
                      {{ form | payment_button }}
                    {%- endif -%}
                  </div>
                   {%- if settings.show_inventory_quantity -%}
                  <div id="ProductForm__Inventory_main">                  
                      <p class="ProductForm__Inventory Text--subdued text-italic">
                        {%- if settings.inventory_quantity_threshold >= product.selected_or_first_available_variant.inventory_quantity and product.selected_or_first_available_variant.inventory_quantity != 0 -%}
                          <span class="Dot"></span>{{- 'products.product.only_piece_in_stock' | t: product_count: product.selected_or_first_available_variant.inventory_quantity | escape -}}
                        {%- endif -%}
                      </p>                                   
                  </div>
                {% endif %}   
                {%- endform -%}

                <div class="baytuluk-promise-panel" aria-label="Sipariş avantajları">
                  <div class="baytuluk-delivery-note" data-baytuluk-delivery>
                    <span class="baytuluk-delivery-dot" aria-hidden="true"></span>
                    <span><strong>Hızlı kargo:</strong> <span data-baytuluk-delivery-text>Bugün sipariş verirsen bir sonraki iş gününde kargoda.</span></span>
                  </div>
                  <div class="baytuluk-trust-grid">
                    <div class="baytuluk-trust-item">
                      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2 4 5v6c0 5.1 3.4 9.7 8 11 4.6-1.3 8-5.9 8-11V5l-8-3Zm0 2.2 6 2.2V11c0 3.9-2.4 7.6-6 8.8C8.4 18.6 6 14.9 6 11V6.4l6-2.2Zm-1 10.4-2.3-2.3-1.4 1.4 3.7 3.7 6.2-6.2-1.4-1.4-4.8 4.8Z"/></svg>
                      <span><strong>Güvenli Ödeme</strong><small>PayTR altyapısı</small></span>
                    </div>
                    <div class="baytuluk-trust-item">
                      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h11v9h2.2l1.8-4h3l2 4v4h-2a3 3 0 0 1-6 0H9a3 3 0 0 1-6 0H1V8a2 2 0 0 1 2-2Zm0 2v7.2A3 3 0 0 1 8.8 17H14V8H3Zm13 5v4h.2a3 3 0 0 1 4.6 0h.2v-.8L19.7 13H16ZM6 18a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm13 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/></svg>
                      <span><strong>Hızlı Kargo</strong><small>İş günlerinde hızlı çıkış</small></span>
                    </div>
                    <div class="baytuluk-trust-item">
                      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 7h10V4l5 5-5 5v-3H8a4 4 0 1 0 0 8h8v2H8A6 6 0 1 1 8 9h9V7H7Z"/></svg>
                      <span><strong>Kolay İade</strong><small>14 gün içinde</small></span>
                    </div>
                  </div>
                </div>

                {%- assign whatsapp_number = section.settings.whatsapp_number | remove: '+' | remove: ' ' | remove: '(' | remove: ')' | remove: '-' -%}
                {%- capture whatsapp_message -%}{{ product.title }} ürünü hakkında bilgi almak istiyorum: {{ shop.url }}{{ product.url }}{%- endcapture -%}
                <a
                  class="baytuluk-whatsapp-button"
                  href="https://wa.me/{% if whatsapp_number != blank %}{{ whatsapp_number }}{% else %}905300000000{% endif %}?text={{ whatsapp_message | url_encode }}"
                  target="_blank"
                  rel="noopener"
                  aria-label="WhatsApp üzerinden ürün hakkında bilgi alın"
                >
                  <svg viewBox="0 0 32 32" aria-hidden="true">
                    <path fill="currentColor" d="M16.04 3C9.42 3 4.03 8.31 4.03 14.84c0 2.31.69 4.57 1.98 6.49L4 29l7.89-2.06a12.15 12.15 0 0 0 4.14.73h.01c6.62 0 12.01-5.31 12.01-11.84C28.05 9.31 22.66 3 16.04 3Zm0 22.67h-.01a10.1 10.1 0 0 1-5.15-1.39l-.37-.22-4.68 1.22 1.25-4.5-.24-.38a9.75 9.75 0 0 1-1.52-5.56C5.32 9.41 10.13 5 16.04 5s10.72 4.41 10.72 9.84-4.81 10.83-10.72 10.83Zm5.88-7.38c-.32-.16-1.9-.93-2.2-1.04-.29-.1-.51-.16-.72.16-.21.32-.83 1.04-1.02 1.25-.19.21-.37.24-.69.08-.32-.16-1.35-.49-2.57-1.56-.95-.83-1.59-1.86-1.78-2.18-.19-.32-.02-.49.14-.65.14-.14.32-.37.48-.56.16-.19.21-.32.32-.53.11-.21.05-.4-.03-.56-.08-.16-.72-1.72-.99-2.36-.26-.62-.52-.54-.72-.55h-.61c-.21 0-.56.08-.85.4-.29.32-1.12 1.09-1.12 2.65 0 1.56 1.15 3.07 1.31 3.28.16.21 2.26 3.42 5.47 4.8.76.33 1.36.52 1.83.67.77.24 1.47.21 2.02.13.62-.09 1.9-.77 2.17-1.51.27-.75.27-1.4.19-1.53-.08-.13-.29-.21-.61-.37Z"/>
                  </svg>
                  <span>WhatsApp ile Sipariş Ver / Bilgi Al</span>
                </a>

               
                <a href="{{ product.url }}"  class="quick_href main-link">{{ 'products.product.view_full_details' | t }}</a>
              </product-form>

              {% if template contains 'product' %}
              {%- assign pick_up_availabilities = product.selected_or_first_available_variant.store_availabilities | where: 'pick_up_enabled', true -%}

              <pickup-availability class="product__pickup-availabilities no-js-hidden"
                {% if product.selected_or_first_available_variant.available and pick_up_availabilities.size > 0 %} available{% endif %}
                data-root-url="{{ routes.root_url }}"
                data-variant-id="{{ product.selected_or_first_available_variant.id }}"
                data-has-only-default-variant="{{ product.has_only_default_variant }}"
              >
                <template>
                  <pickup-availability-preview class="pickup-availability-preview">
                    <div class="pickup-availability-info">
                      <p class="caption-large">{{ 'products.product.pickup_availability.unavailable' | t }}</p>
                      <button class="pickup-availability-button link link--text underlined-link">{{ 'products.product.pickup_availability.refresh' | t }}</button>
                    </div>
                  </pickup-availability-preview>
                </template>
              </pickup-availability>
                      <script src="{{ 'pickup-availability.js' | asset_url }}" defer="defer"></script>
              {% endif %}
            </div>
        
        {%- when 'rating' -%}
        {%- if product.metafields.reviews.rating.value != blank -%}
          <link rel="stylesheet" href="{{ 'component-rating.css' | asset_url }}">
        {% liquid
               assign rating_decimal = 0
               assign decimal = product.metafields.reviews.rating.value.rating | modulo: 1
               if decimal >= 0.3 and decimal <= 0.7
                assign rating_decimal = 0.5
              elsif decimal > 0.7
                assign rating_decimal = 1
               endif
              %}
        <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: product.metafields.reviews.rating.value, rating_max: product.metafields.reviews.rating.value.scale_max }}">
          <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
        </div>
        <p class="rating-text caption">
          <span aria-hidden="true">{{ product.metafields.reviews.rating.value }} / {{ product.metafields.reviews.rating.value.scale_max }}</span>
        </p>
        <p class="rating-count caption">
          <span aria-hidden="true">({{ product.metafields.reviews.rating_count }})</span>
          <span class="visually-hidden">{{ product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
        </p>
        {%- endif -%}
        {%- when 'complementary' -%}
          {% if block.settings.enable_quick_add %}
            {{ 'quickview.css' | asset_url | stylesheet_tag }}
            {{ 'quickview.js' | asset_url | script_tag }}
            <script>
              {% capture content %}{% include 'quickview' %}{% endcapture %}
              var content = {{ content | json }};
            </script>
          {% endif %}
          {%- if recommendations.performed -%}
          {%- if recommendations.products_count > 0 -%}
            <div class="product-recommendations">
              <div class="box">
                <div class="wrapper">
                  {%- unless block.settings.block_heading == blank -%}
                    <h2 class="title">{{ block.settings.block_heading | escape }}</h2>
                  {%- endunless -%}

                  <div id="ProductGrid-{{ section.id }}" class="complementary_product">
                    {%- for product in recommendations.products -%}
                      <div class="recommendations complementary_product-grid">
                        {% render 'card-product',
                          card_product: product,
                          media_aspect_ratio: settings.image_ratio,
                          show_secondary_image: block.settings.show_secondary_image,
                          show_quick_add: block.settings.enable_quick_add,
                          lazy_load: lazy_load
                        %}
                      </div>
                    {%- endfor -%}              
                  </div>
                </div>
              </div>
            </div>
          {%- endif -%}
        {%- else -%}
          <div id="productRecommendationsSections"
              class="section-{{ section.id }}-padding"
              data-product-id="{{ product.id }}"
              data-section-id="{{ section.id }}"
              data-section-type="product-recommendations"
              data-section-url="{{ routes.product_recommendations_url }}"
              data-limit="{{ block.settings.products_per_page }}">
          </div>
         <script>
            ProductRecommendation = (function () {
            function ProductRecommendation(containers) {
              this.$containers = $('#productRecommendationsSections');
              const selfs = this;
              const productIds = this.$containers.data("productId");
              const sectionIds = this.$containers.data("sectionId");
              const recommendationsURLs = this.$containers.data("sectionUrl");
              const limits = this.$containers.data("limit");
                  const recommendationsSectionUrls = `${recommendationsURLs}?&section_id=${sectionIds}&product_id=${productIds}&limit=${limits}&intent=complementary`;
              
              $.get(recommendationsSectionUrls).then(function (section) {
                const parsedMarkups = new DOMParser().parseFromString(section, "text/html");
                const recommendationsMarkups = parsedMarkups.querySelector(".product-recommendations");
                    
                if (recommendationsMarkups) {
                  selfs.$containers.html(recommendationsMarkups);
                  theme.cache.$body.trigger("afterRecommendationLoad");
                }
              });
            }
            return ProductRecommendation;
          })();
          
          ProductRecommendation();
        </script>
        {%- endif -%}
        {%- if recommendations.performed -%}
  <div id="product-recommendations">
    {%- if recommendations.products_count > 0 -%}
      
      <ul>
        {%- for product in recommendations.products -%}
          <li class="grid__item small--one-half medium-up--one-quarter">
            <a href="{{ product.url }}">
              <span>{{ product.title }}</span>
              <span>{{ product.price | money }}</span>
            </a>
          </li>
        {%- endfor -%}
      </ul>
    {%- endif -%}
  </div>
{%- endif -%}

        {%- endcase -%}
        {%- endfor -%}
      </div>
    </div>
  </div>

{%- if section.settings.enable_size_chart or section.settings.page != blank -%}
<modal-dialog id="PopupModal-{{ section.id }}" class="product-popup-modal" {{ section.shopify_attributes }}>
  <div role="dialog" aria-label="{{ section.settings.text }}" aria-modal="true" class="product-popup-modal__content" tabindex="-1">
    <button id="ModalClose-{{ section.id }}" type="button" class="product-popup-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon' with 'close' %}</button>
    <div class="product-popup-modal__content-info">
      <h2 class="title">{{ section.settings.page.title }}</h2>
      {{ section.settings.page.content }}
    </div>
  </div>
</modal-dialog>
{% endif %}
</section>

{%- for media in product.media -%}
  {%- if media.media_type == 'video'-%}
    {% for source in media.sources %}  
      <div class="video-wrapper">
        <video controls autoplay muted loop playsinline preload="metadata">
          <source src="{{source.url}}" loading="lazy">
        </video>
      </div>
    {%endfor%}
  {% endif %}
{%- endfor -%}

{% if product.media.size > 1 %}
  <script src="{{ 'media-gallery.js' | asset_url }}" defer="defer"></script>
{% endif %}

{% if section.settings.enable_sticky_info %}
<div class="stickyCart" id="sticky-{{ section.id }}" data-section-id="product-template" data-section-type="product">
  <div class="main-con-sticky" data-section-id="sticky-cart" data-section-type="sticky-cart" >      
    <form action="/cart/add" id="stickyform-{{ product.id }}" data-productid="{{ product.id }}" method="post" data-product-form="" class="product-form form">
      {%- assign current_variant = product.selected_or_first_available_variant -%}
      {%- assign featured_img_src = current_variant.featured_image.src | default: product.featured_image.src -%}
      <div class="sticky_main">
        <div class="img_title">
          <div class="img">
          {%- include 'image-size', sizes: '25, 35, 45, 85, 95, 100', image: featured_img_src -%}
              {%- assign image_url = featured_img_src | img_url: '100x' | replace: '_1x1.', '_{width}x.' -%}

              <img class="Image--lazyLoad FeaturedImage-{{ section.id }} product-featured-img sticky-img"
                data-src="{{ image_url }}"
                data-widths="{{ supported_sizes }}"
                data-sizes="auto"
                alt="{{ featured_img_src.alt | escape }}"
                title="{{ featured_img_src.alt | escape }}">
          </div>
          <div class="sticky-title-flex">
            <div class="sticky-title">{{ product.title }}</div>
            <div class="baytuluk-sticky-price">
              <span class="baytuluk-sticky-current">{{ product.selected_or_first_available_variant.price | money_without_trailing_zeros }}</span>
              {%- if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price -%}
                <span class="baytuluk-sticky-compare">{{ product.selected_or_first_available_variant.compare_at_price | money_without_trailing_zeros }}</span>
                {%- assign sticky_discount = product.selected_or_first_available_variant.compare_at_price | minus: product.selected_or_first_available_variant.price | times: 100.0 | divided_by: product.selected_or_first_available_variant.compare_at_price | round -%}
                <span class="baytuluk-sticky-discount">%{{ sticky_discount }} İndirim</span>
              {%- endif -%}
            </div>
          </div>
        </div>

        <div class="stickyOptions">
          <div class="selectedOpt">
          {% if product.available and product.variants.size > 0 and product.variants[0].title != 'Default Title'  %}
          {%- for option in product.options_with_values -%}          
            {%- for value in option.selected_value -%}
            <div class="sticky_flex">
              <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
              <span><strong>{{ value }}</strong></span>
            </div>
            {%- endfor -%}
          {% endfor %}
          {% endif %}
          </div>
        </div>
        
      <div class="stickyop_variant">

        <input type="hidden" id="var_id" class="sticky-id" name="id" data-productid="{{ product.id }}" value="{{ product.selected_or_first_available_variant.id }}">

        <quantity-input class="quantity">
        <button class="quantity__button  {% if settings.cart_type == 'drawer' %} no-js-hidden{% endif %}" name="minus" type="button">
          <span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
          {%- render 'icon' with 'minus' -%}
        </button>
          <input class="quantity__input" type="number" name="quantity" id="Quantity-sticky-{{ section.id }}" min="1" value="1">
        <button class="{% if settings.cart_type == 'drawer' %} no-js-hidden {% endif %}  quantity__button" name="plus" type="button">
          <span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
          {%- render 'icon' with 'plus' -%}
        </button>
        </quantity-input>
      </div>        
        <div class="Addbtns">
          <button type="submit" name="add" class="product-form__submit full-btns AddToCart" data-add-to-cart {% if product.selected_or_first_available_variant.available == false %}disabled{% endif %}>
            <span data-add-to-cart-text>
              {%- if product.selected_or_first_available_variant.available -%}
              {{ 'products.product.add_to_cart' | t }}
              {%- else -%}
              {{ 'products.product.sold_out' | t }}
              {%- endif -%}
            </span>
            <div class="loading-overlay__spinner hidden">
              <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
              </svg>
            </div>
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<script>    
  $(window).scroll(function(){ 
    var sticky = false;
    var top = $(window).scrollTop();
    if (800 < top) {
      $(".stickyCart").css('bottom', '10px'); sticky = true;
      $(".stickyCart").addClass('stickyCart-active');
    } else {
      $(".stickyCart").css('bottom', '-150px');
      $(".stickyCart").removeClass('stickyCart-active');
    }
  });
</script>
{% endif %}

<script type="module">
  import PhotoSwipeLightbox from '//cdn.shopify.com/s/files/1/0644/7526/7316/t/2/assets/product-zoom.js';
  const options = {
    gallery: '#my-gallery',
    children: 'a',
    pswpModule: () => import('//cdn.shopify.com/s/files/1/0644/7526/7316/t/2/assets/product-esm.js')
  };
  const lightbox = new PhotoSwipeLightbox(options);
  lightbox.init();
</script>

  
<script>
  document.addEventListener('DOMContentLoaded', function() {
    function isIE() {
      const ua = window.navigator.userAgent;
      const msie = ua.indexOf('MSIE ');
      const trident = ua.indexOf('Trident/');

      return (msie > 0 || trident > 0);
    }

    if (!isIE()) return;
    const hiddenInput = document.querySelector('#{{ product_form_id }} input[name="id" data-productid="{{ product.id }}"]');
    const noScriptInputWrapper = document.createElement('div');
    const variantSwitcher = document.querySelector('variant-radios[data-section="{{ product.id }}"]') || document.querySelector('variant-selects[data-section="{{ product.id }}"]');
                                           console.log('variantSwitcher');        
    noScriptInputWrapper.innerHTML = document.querySelector('.product-form__noscript-wrapper-{{ section.id }}').textContent;
    variantSwitcher.outerHTML = noScriptInputWrapper.outerHTML;

    document.querySelector('#Variants-{{ section.id }}').addEventListener('change', function(event) {
      hiddenInput.value = event.currentTarget.value;
    });
  });
</script>

{%- if first_3d_model -%}
  <script type="application/json" id="ProductJSON-{{ product.id }}">
    {{ product.media | where: 'media_type', 'model' | json }}
  </script>

  <script src="{{ 'product-model.js' | asset_url }}" defer></script>
{%- endif -%}

{%- liquid
  if product.selected_or_first_available_variant.featured_media
    assign seo_media = product.selected_or_first_available_variant.featured_media
  else
    assign seo_media = product.featured_media
  endif
-%}

<script type="application/ld+json">
  {
    "@context": "http://schema.org/",
    "@type": "Product",
    "name": {{ product.title | json }},
    "url": {{ shop.url | append: product.url | json }},
    {% if seo_media -%}
      {%- assign media_size = seo_media.preview_image.width | append: 'x' -%}
      "image": [
        {{ seo_media | img_url: media_size | prepend: "https:" | json }}
      ],
    {%- endif %}
    "description": {{ product.description | strip_html | json }},
    {% if product.selected_or_first_available_variant.sku != blank -%}
      "sku": {{ product.selected_or_first_available_variant.sku | json }},
    {%- endif %}
    "brand": {
      "@type": "Thing",
      "name": {{ product.vendor | json }}
    },
    "offers": [
      {%- for variant in product.variants -%}
        {
          "@type" : "Offer",
          {%- if variant.sku != blank -%}
            "sku": {{ variant.sku | json }},
          {%- endif -%}
          "availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
          "price" : {{ variant.price | divided_by: 100.00 | json }},
          "priceCurrency" : {{ cart.currency.iso_code | json }},
          "url" : {{ shop.url | append: variant.url | json }}
        }{% unless forloop.last %},{% endunless %}
      {%- endfor -%}
    ]
  }
</script>

{% schema %}
{
  "name": "t:sections.main-product.name",
  "tag": "section",
  "class": "section",
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "text",
      "name": "t:sections.main-product.blocks.text.name",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "default": "Text block",
          "label": "t:sections.main-product.blocks.text.settings.text.label"
        },
        {
          "type": "select",
          "id": "text_style",
          "options": [
            {
              "value": "body",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__1.label"
            },
            {
              "value": "subtitle",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__2.label"
            },
            {
              "value": "uppercase",
              "label": "t:sections.main-product.blocks.text.settings.text_style.options__3.label"
            }
          ],
          "default": "body",
          "label": "t:sections.main-product.blocks.text.settings.text_style.label"
        }
      ]
    },
    {
      "type": "title",
      "name": "t:sections.main-product.blocks.title.name",
      "limit": 1
    },
    {
      "type": "price",
      "name": "t:sections.main-product.blocks.price.name",
      "limit": 1
    },
    {
      "type": "variant_picker",
      "name": "t:sections.main-product.blocks.variant_picker.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "picker_type",
          "options": [
            {
              "value": "dropdown",
              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__1.label"
            },
            {
              "value": "button",
              "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.options__2.label"
            }
          ],
          "default": "button",
          "label": "t:sections.main-product.blocks.variant_picker.settings.picker_type.label"
        }
      ]
    },
    {
      "type": "buy_buttons",
      "name": "t:sections.main-product.blocks.buy_buttons.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_dynamic_checkout",
          "default": true,
          "label": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.label",
          "info": "t:sections.main-product.blocks.buy_buttons.settings.show_dynamic_checkout.info"
        },
        {
          "type": "checkbox",
          "id": "show_gift_card_recipient",
          "default": false,
          "label": "t:sections.main-product.blocks.buy_buttons.settings.show_gift_card_recipient.label",
          "info": "t:sections.main-product.blocks.buy_buttons.settings.show_gift_card_recipient.info"
        }
      ]
    },
    {
      "type": "complementary",
      "name": "t:sections.main-product.blocks.complementary_products.name",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.complementary_products.settings.paragraph.content"
        },
        {
          "type": "text",
          "id": "block_heading",
          "default": "Pairs well with",
          "label": "t:sections.main-product.blocks.complementary_products.settings.heading.label"
        },
        {
          "type": "range",
          "id": "products_per_page",
          "min": 1,
          "max": 10,
          "step": 1,
          "default": 2,
          "label": "t:sections.main-product.blocks.complementary_products.settings.products_per_page.label"
        },
        {
          "type": "checkbox",
          "id": "enable_quick_add",
          "default": true,
          "label": "t:sections.featured-collection.settings.enable_quick_buy.label"
        }
      ]
    },
    {
      "type": "description",
      "name": "t:sections.main-product.blocks.description.name",
      "limit": 1
    },
    {
      "type": "share",
      "name": "t:sections.main-product.blocks.share.name",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "t:sections.main-product.blocks.share.settings.text.label",
          "default": "Share"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.share.settings.featured_image_info.content"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.share.settings.title_info.content"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name": "t:sections.main-product.blocks.custom_liquid.name",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.label",
          "info": "t:sections.main-product.blocks.custom_liquid.settings.custom_liquid.info"
        }
      ]
    },
    {
      "type": "collapsible_tab",
      "name": "t:sections.main-product.blocks.collapsible_tab.name",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "default": "Collapsible row",
          "info": "t:sections.main-product.blocks.collapsible_tab.settings.heading.info",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.heading.label"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.content.label"
        },
        {
          "type": "page",
          "id": "page",
          "label": "t:sections.main-product.blocks.collapsible_tab.settings.page.label"
        }
      ]
    },
    {
      "type": "trust-badge",
      "name": "t:sections.main-product.blocks.trust-badge.name",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.main-product.blocks.trust-badge.settings.image.label"
        }
      ]
    },
    {
      "type": "rating",
      "name": "t:sections.main-product.blocks.rating.name",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "t:sections.main-product.blocks.rating.settings.paragraph.content"
        }
      ]
    }
  ],
  "settings": [
    {
      "type": "color",
      "id": "background",
      "label": "t:sections.main-product.settings.background.label",
      "default": "#eff1f3"
    },
    {
      "type": "header",
      "content": "t:sections.main-product.settings.header.content",
      "info": "t:sections.main-product.settings.header.info"
    },
    {
      "type": "select",
      "id": "gallery_layout",
      "options": [
        {
          "value": "stacked",
          "label": "t:sections.main-product.settings.gallery_layout.options__1.label"
        },
        {
          "value": "thumbnail_slider",
          "label": "t:sections.main-product.settings.gallery_layout.options__2.label"
        }
    ],
    "default": "thumbnail_slider",
    "label": "t:sections.main-product.settings.gallery_layout.label"
    },    
    {
      "type": "select",
      "id": "media_size",
      "options": [
        {
          "value": "small",
          "label": "t:sections.main-product.settings.media_size.options__1.label"
        },
        {
          "value": "medium",
          "label": "t:sections.main-product.settings.media_size.options__2.label"
        },
        {
          "value": "large",
          "label": "t:sections.main-product.settings.media_size.options__3.label"
        }
      ],
      "default": "large",
      "label": "t:sections.main-product.settings.media_size.label",
      "info": "t:sections.main-product.settings.media_size.info"
    },
	  {
      "type": "checkbox",
      "id": "breadcrumb",
      "default": true,
      "label": "Show breadcrumb"
    },
	  {
      "type": "checkbox",
      "id": "enable_sticky_info",
      "default": true,
      "label": "Enable sticky product"
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "default": false,
      "label": "t:sections.main-product.settings.enable_video_looping.label"
    },
    {
      "type": "checkbox",
      "id": "enable_size_chart",
      "default": true,
      "label": "t:sections.main-product.settings.enable_size_chart.label"
    },
    {
      "id": "page",
      "type": "page",
      "label": "t:sections.main-product.blocks.popup.settings.page.label",
      "info": "Select page for size chart"
    },

    {
      "type": "header",
      "content": "WhatsApp"
    },
    {
      "type": "text",
      "id": "whatsapp_number",
      "label": "WhatsApp numarası",
      "info": "Ülke koduyla boşluksuz yazın. Örnek: 905551112233"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}