/** Shopify CDN: Minification failed

Line 298:25 Unexpected "{"
Line 298:26 Expected identifier but found "%"
Line 302:0 Unexpected "<"
Line 303:20 Unexpected "{"
Line 303:23 Expected ":"
Line 303:26 Unexpected "{"
Line 305:15 Expected identifier but found whitespace
Line 305:17 Unexpected "{"
Line 305:25 Expected ":"
Line 306:18 Expected identifier but found whitespace
... and 216 more hidden warnings

**/
.new-product-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.7fr 1fr;
  align-items: center;
  grid-gap: 32px;
}
.product-info-wrapper .product-title {
  margin: 0 0 18px;
}
.product-info-wrapper .product-title h2 {
  font-size: 56px;
  line-height: 100%;
  color: #ffffff;
}
.product-info-wrapper .product-short-desc {
  margin: 0 0 45px;
}
.product-info-wrapper .product-short-desc p {
  font-size: 16px;
  line-height: 30px;
  color: #b9b9b9;
}
.product-media-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
.product-media {
  width: 100%;
  overflow: hidden;
  margin: 0 0 24px;
}
.product-media .swiper-slide {
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-media .swiper-slide img,
.product-media .swiper-slide video {
  width: 100%;
  /* max-width: 380px; */
  height: 100%;
  object-fit: cover;
  @media screen and (max-width: 640px) {
    transform: scale(1.2);
  }
}
.product-quantity {
  display: flex;
  align-items: center;
}
.quantity-selector-wrapper {
  display: flex;
  align-items: center;
  background: linear-gradient(
    240.94deg,
    rgba(9, 12, 79, 0.2) -7.37%,
    rgba(255, 255, 255, 0.1) 89.52%
  );
  backdrop-filter: blur(10px);
  border: 1px solid;
  border-image-source: linear-gradient(
    240.94deg,
    rgba(0, 0, 0, 0.2) -7.37%,
    rgba(255, 255, 255, 0.1) 89.52%
  );
  border-radius: 50px;
  padding: 10px 16px;
}
.quantity-selector-wrapper input {
  background-color: transparent;
  text-align: center;
  border: none;
  outline: none;
  box-shadow: none;
  max-width: 150px;
  pointer-events: none;
  user-select: none;
}
.quantity-selector-wrapper input:focus {
  border: none;
  outline: none;
  box-shadow: none;
}
.quantity-selector-wrapper button {
  width: 28px;
  height: 25px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    100.42deg,
    rgba(255, 255, 255, 0.2) 16.09%,
    rgba(255, 255, 255, 0.04) 105.27%
  );
  border: 1px solid;
  border-radius: 50px;
}
.shopify-product-form {
  margin: 28px 0 0;
}
.product-buttons .atc__btn {
  display: flex;
  align-items: center;
  gap: 16px;
}
.product-buttons .atc__btn button[disabled] {
  cursor: not-allowed;
}
.product-buttons .atc__btn #AddToCart,
.product-buttons .atc__btn #BuyNow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  min-width: 180px;
}
.product-buttons .atc__btn #BuyNow {
  outline: none;
}

.variants-picker {
  margin: 0 0 24px;
}
.variants-picker input {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
}
.variants-picker input:checked ~ span {
  color: #fff;
}
.variants-picker .option-values {
  /* background: linear-gradient(240.94deg, #090c4f33 -7.37%, #ffffff1a 89.52%);
  border: 1px solid;
  border-image-source: linear-gradient(
    240.94deg,
    rgba(0, 0, 0, 0.2) -7.37%,
    rgba(255, 255, 255, 0.1) 89.52%
  );
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 14px 16px;
  border-radius: 50px; */
  display: flex;
  align-items: center;
  gap: 12px;
}
.variants-picker .option-values label {
  font-size: 16px;
  line-height: 24px;
  color: #9a9898;
  padding: 4px 24px;
  background: linear-gradient(
    100.42deg,
    rgba(255, 255, 255, 0.2) 16.09%,
    rgba(255, 255, 255, 0.04) 105.27%
  );
  border: 1px solid;
  /* border-image-source: linear-gradient(
    100.42deg,
    rgba(255, 255, 255, 0.5) 16.09%,
    rgba(255, 255, 255, 0.1) 105.27%
  ); */
  border-radius: 50px;
}
.product-price {
  display: flex;
  align-items: center;
  gap: 16px;
}
.product-price span {
  font-size: 40px;
  line-height: 100%;
  color: #ffffff;
}
.product-price .price {
  color: #0984FF;
}
.product-price .compare-price {
  display: inline-block;
  position: relative;
  text-decoration: line-through;
  /* background: linear-gradient(180deg, #00f2d6 -52.08%, #0054ff 77.6%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; */
}
/* .compare-price::after {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: linear-gradient(180deg, #00f2d6 -52.08%, #0054ff 77.6%);
  z-index: 99;
} */
/* Accordion Styling */
.pr-faq-item {
  border-bottom: 1px solid #454545;
  padding: 12px 0;
  cursor: pointer;
}

.pr-faq-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.pr-faq-header h4 {
  font-size: 20px;
  line-height: 130%;
  color: #B1B1B1;
}

.pr-faq-header span {
  display: flex;
  align-items: center;
}

.pr-faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.pr-faq-content p {
  font-size: 16px;
  line-height: 140%;
  font-weight: 300;
  color: #B1B1B1;
  margin: 16px 0 0;
}
.pr-faq-item.active .pr-faq-content {
  max-height: 1500px;
}
.pr-faq-item .plus,
.pr-faq-item .minus {
  width: 16px;
  height: 16px;
  transition: transform 0.3s ease-in-out;
}
.pr-faq-item .minus {
  display: none;
  transform: rotate(180deg);
}
.pr-faq-item.active .plus {
  display: none;
}
.pr-faq-item.active .minus {
  display: block;
}

@media screen and (max-width: 768px) {
  .pr-faq-header h4 {
    font-size: 18px;
  }
  .pr-faq-content p {
    font-size: 14px;
    line-height: 120%;
    margin: 12px 0 0;
  }
}
/* Accordion Styling */

@media screen and (max-width: 768px) {
  .new-product-wrapper {
    grid-template-columns: 1fr;
    grid-gap: 16px;
  }
  .product-info-wrapper {{% liquid
  assign id = section.id
%}

<style>
  #shopify-section-{{id}} {
    box-sizing: border-box;
    margin-top: {{section.settings.margin_top | append: 'px'}};
    margin-bottom: {{section.settings.margin_bottom | append: 'px'}};
    padding-top: {{section.settings.padding_top | append: 'px'}};
    padding-bottom: {{section.settings.padding_bottom | append: 'px'}};
  }

  @media(max-width: 768px) {
    #shopify-section-{{id}} {
      margin-top: {{section.settings.margin_top_m | append: 'px'}};
      margin-bottom: {{section.settings.margin_bottom_m | append: 'px'}};
      padding-top: {{section.settings.padding_top_m | append: 'px'}};
      padding-bottom: {{section.settings.padding_bottom_m | append: 'px'}};
    }
  }

</style>

{{ 'new-product.css' | asset_url | stylesheet_tag }}

<div class="section-product">
  <div class="{% unless section.settings.full_width %}page-width{% endunless %}">
    <div class="wrapper-{{ id }} new-product-wrapper">
      <div class="product-info-wrapper">
        {% for block in section.blocks %}
          {%- case block.type -%}
            {%- when '@app' -%}
              {%- render block -%}
            {% when 'title' %}
              <div class="product-title sm-hide overflow-hidden">
                <h2 data-aos="fade-up">{{ product.title }}</h2>
              </div>
            {% when 'short_desc' %}
              {% if product.metafields.custom.short_desc != blank %}
                <div class="product-short-desc sm-hide overflow-hidden">
                  <p data-aos="fade-up">{{ product.metafields.custom.short_desc }}</p>
                </div>
              {% endif %}
            {% when 'quantity' %}
              <div class="product-quantity">
                <div class="quantity-selector-wrapper">
                  <button type="button" class="quantity-button minus" aria-label="Decrease quantity">−</button>
                  <input type="number" 
                         id="Quantity" 
                         name="quantity" 
                         value="1" 
                         min="1"
                         aria-label="Quantity">
                  <button type="button" class="quantity-button plus" aria-label="Increase quantity">+</button>
                </div>
              </div>
            {% when 'buy_buttons' %}
              {% form 'product', product, id: 'AddToCartForm' %}
                <input type="hidden" name="quantity" value="1">
                <select name="id" id="ProductSelect" class="hidden">
                  {% for variant in product.variants %}
                    <option value="{{ variant.id }}" 
                            {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                            data-sku="{{ variant.sku }}"
                            data-price="{{ variant.price | money }}"
                            data-compare-price="{{ variant.compare_at_price | money }}"
                            data-available="{{ variant.available }}"
                            data-inventory="{{ variant.inventory_quantity }}"
                            data-image="{% if variant.image %}{{ variant.image | img_url: '800x' }}{% endif %}">
                      {{ variant.title }} - {{ variant.price | money }}
                    </option>
                  {% endfor %}
                </select>
                <div class="product-buttons">
                  <div class="atc__btn">
                    {% if block.settings.show_checkout %}
                    <button type="button" id="BuyNow" class="global__btn colored__btn">
                      <span class="global__btn-text" id="BuyNowText">
                        {% if product.selected_or_first_available_variant.available %}
                          Buy Now
                        {% else %}
                          Unavailable
                        {% endif %}
                      </span>
                       <span class="global__btn-icon">{%- render 'all-icons', name: 'cut' -%}</span>
                    </button>
                    {% endif %}
                    <button type="submit" name="add" id="AddToCart" class="global__btn colored__btn">
                      <span class="global__btn-text" id="AddToCartText">
                        {% if product.selected_or_first_available_variant.available %}
                          In den Warenkorb
                        {% else %}
                          Sold Out
                        {% endif %}
                      </span>
                      <span class="global__btn-icon">{% render 'all-icons', name: 'cut' %}</span>
                    </button>
                  </div>
                </div>
              {% endform %}
          {% endcase %}
        {% endfor %}
      </div>
      <div class="product-media-inner">
        {% for block in section.blocks %}
          {%- case block.type -%}
            {% when 'title' %}
              <div class="product-title lg-hide overflow-hidden">
                <h2 data-aos="fade-up">{{ product.title }}</h2>
              </div>
            {% comment %}
            {% when 'short_desc' %}
              {% if product.metafields.custom.short_desc != blank %}
                <div class="product-short-desc lg-hide overflow-hidden">
                  <p data-aos="fade-up">{{ product.metafields.custom.short_desc }}</p>
                </div>
              {% endif %}
            {% endcomment %}
            {% when 'variant_picker' %}
              <div class="variants-picker">
                {% unless product.has_only_default_variant %}
                  {% for option in product.options_with_values %}
                    <div class="product-option">
                      <div class="option-values">
                        {% for value in option.values %}
                          {% assign option_id = 'option-' | append: option.name | handleize | append: '-' | append: value | handleize %}
                          <label class="radio-option" for="{{ option_id }}">
                            <input type="radio" 
                                   id="{{ option_id }}"
                                   name="{{ option.name }}" 
                                   value="{{ value | escape }}" 
                                   {% if option.selected_value == value %}checked{% endif %}
                                   data-option-index="{{ forloop.index0 }}">
                            <span>{{ value }}</span>
                          </label>
                        {% endfor %}
                      </div>
                    </div>
                  {% endfor %}
                {% endunless %}
              </div>
          {% endcase %}
        {% endfor %}
        <div class="product-media overflow-hidden">
          <div class="swiper product-media-slider" data-aos="fade-up">
            <div class="swiper-wrapper">
             {% for image in product.images %}
                <div class="swiper-slide">
                  {% assign image_alt = image.alt | escape %}
                  {% assign variant_id = image.variants.first.id | default: '' %}
                  {{ image | image_url: width: 800 | image_tag: loading: 'lazy', class: 'product-media-item', alt: image_alt, data-variant-image: variant_id }}
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
        {% for block in section.blocks %}
          {%- case block.type -%}
            {% when 'price' %}
              <div class="product-price" id="ProductPrice">
                <span class="price">{{ product.selected_or_first_available_variant.price | money }}</span>
                {% if product.selected_or_first_available_variant.compare_at_price > product.selected_or_first_available_variant.price %}
                  <span class="compare-price">{{ product.selected_or_first_available_variant.compare_at_price | money }}</span>
                {% endif %}
              </div>
          {% endcase %}
        {% endfor %}
      </div>
     {% for block in section.blocks %}
        {% case block.type %}
          {% when 'accordion' %}
            <div class="product-faq-{{ id }} product-faqs overflow-hidden">
              <div class="product-faq-wrapper" data-aos="fade-up">
                {% if product.description != blank %}
                <div class="pr-faq-item">
                  <div class="pr-faq-header">
                    <h4>Beschreibung</h4>
                    <span>
                      {%- render 'all-icons', name: 'plus' -%}
                      {%- render 'all-icons', name: 'minus' -%}
                    </span>
                  </div>
                  <div class="pr-faq-content">
                    {{ product.description }}
                  </div>
                </div>
                {% endif %}
                {% for i in (1..2) %}
                  {% liquid
                    capture title
                      echo 'title_' | append: i
                    endcapture
                    capture content
                      echo 'content_' | append: i
                    endcapture
                  %}
                  {% if block.settings[title] != blank and block.settings[content] != blank %}
                    <div class="pr-faq-item">
                      <div class="pr-faq-header">
                        <h4>{{ block.settings[title] }}</h4>
                        <span>
                          {%- render 'all-icons', name: 'plus' -%}
                          {%- render 'all-icons', name: 'minus' -%}
                        </span>
                      </div>
                      <div class="pr-faq-content">
                        {{ block.settings[content] }}
                      </div>
                    </div>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
        {% endcase %}
      {% endfor %}
    </div>
  </div>
</div>

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

{% schema %}
  {
    "name": "New Product",
    "settings": [
      {
        "type": "checkbox",
        "id": "full_width",
        "label": "Full Width Section",
        "default": true
      },
      {
        "type": "header",
        "content": "Section Spacing Desktop"
      },
      {
        "type": "range",
        "id": "margin_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Margin Top",
        "default": 0
      },
      {
        "type": "range",
        "id": "margin_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Margin Bottom",
        "default": 0
      },
      {
        "type": "range",
        "id": "padding_top",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Top",
        "default": 0
      },
      {
        "type": "range",
        "id": "padding_bottom",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 0
      },
      {
        "type": "header",
        "content": "Section Spacing Mobile"
      },
      {
        "type": "range",
        "id": "margin_top_m",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Margin Top",
        "default": 0
      },
      {
        "type": "range",
        "id": "margin_bottom_m",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Margin Bottom",
        "default": 0
      },
      {
        "type": "range",
        "id": "padding_top_m",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Top",
        "default": 0
      },
      {
        "type": "range",
        "id": "padding_bottom_m",
        "min": 0,
        "max": 100,
        "step": 1,
        "unit": "px",
        "label": "Padding Bottom",
        "default": 0
      }
    ],
    "blocks": [
      {
        "type": "title",
        "name": "Title",
        "limit": 1
      },
      {
        "type": "short_desc",
        "name": "Short Description",
        "limit": 1
      },
      {
        "type": "quantity",
        "name": "Quantity Selector",
        "limit": 1
      },
      {
        "type": "price",
        "name": "Price",
        "limit": 1
      },
      {
        "type": "buy_buttons",
        "name": "Buy Buttons",
        "limit": 1,
        "settings": [
          {
            "type": "checkbox",
            "id": "show_checkout",
            "label": "Show Dynamic Checkout Button",
            "default": true
          }
        ]
      },
      {
        "type": "variant_picker",
        "name": "Variant Picker",
        "limit": 1
      },
      {
        "type": "accordion",
        "name": "Product Accordion",
        "limit": 1,
        "settings": [
          {
            "type": "header",
            "content": "Accordion Item"
          },
          {
            "type": "header",
            "content": "Accordion Header"
          },
          {
            "type": "text",
            "id": "title_1",
            "label": "Title"
          },
          {
            "type": "header",
            "content": "Accordion Content"
          },
          {
            "type": "richtext",
            "id": "content_1",
            "label": "Content"
          },
          {
            "type": "header",
            "content": "Accordion Item"
          },
          {
            "type": "header",
            "content": "Accordion Header"
          },
          {
            "type": "text",
            "id": "title_2",
            "label": "Title"
          },
          {
            "type": "header",
            "content": "Accordion Content"
          },
          {
            "type": "richtext",
            "id": "content_2",
            "label": "Content"
          },
              {
            "type": "header",
            "content": "Accordion Item"
          },
          {
            "type": "header",
            "content": "Accordion Header"
          },
          {
            "type": "text",
            "id": "title_3",
            "label": "Title"
          },
          {
            "type": "header",
            "content": "Accordion Content"
          },
          {
            "type": "richtext",
            "id": "content_3",
            "label": "Content"
            }
        ]
      }
    ],
    "presets": [
      {
        "name": "New Product"
      }
    ]
  }
{% endschema %}
    order: 2;
  }
  .product-media-inner {
    order: 1;
  }
  .product-faqs {
    order: 3;
  }
  .product-title {
    margin: 0 0 24px;
  }
  .product-title {
    font-size: 40px;
    line-height: 100%;
    color: #fbfbfb;
    text-align: center;
  }
  .product-short-desc {
    margin: 0 0 40px;
  }
  .product-short-desc p {
    font-size: 14px;
    line-height: 22px;
    color: #b9b9b9;
    text-align: center;
  }
  .product-media {
    margin: 0 0 24px;
    padding-top: 18px;
  }
  .product-price span {
    font-size: 30px;
  }
  .product-quantity {
    margin: 16px 0 0;
    justify-content: center;
  }
  .quantity-selector-wrapper {
    justify-content: space-between;
    width: 90%;
  }
  .quantity-selector-wrapper input {
    max-width: 100%;
  }
  .shopify-product-form {
    margin: 24px 0 0;
  }
  .product-buttons .atc__btn {
    justify-content: center;
  }
  .product-buttons .atc__btn #AddToCart,
  .product-buttons .atc__btn #BuyNow {
    font-size: 14px;
    line-height: 100%;
  }
}

@media screen and (max-width: 560px) {
  .product-buttons .atc__btn #AddToCart,
  .product-buttons .atc__btn #BuyNow {
    min-width: 100%;
  }
}