/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Unexpected "{"
Line 16:3 Expected identifier but found "'main-product.css'"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 18:21 Expected identifier but found whitespace
Line 18:102 Expected identifier but found "%"
Line 19:0 Unexpected "{"
Line 19:1 Expected identifier but found "%"
Line 20:0 Unexpected "{"
... and 856 more hidden warnings

**/
{{ 'main-product.css' | asset_url | stylesheet_tag }}

{%- comment -%} MINX: Gestaltung der neuen PDP vor dem Inhalt laden, damit beim Laden nichts springt {%- endcomment -%}
{% render 'minx-groesse-pflicht', part: 'css' %}
{% render 'minx-pdp-mobil', part: 'css' %}
{% render 'minx-pdp-desktop', part: 'css' %}
{% render 'minx-bewertungen', part: 'css' %}
<style>
  .product__model--in-title { display: block; white-space: nowrap; letter-spacing: normal; line-height: 20.5px; }
  /* Beim Laden: Abstand über dem Textbereich von Anfang an (sonst setzt ihn das Theme erst nachträglich – die Seite springt um 15 px) */
  .product__section-contentWrapper.grid__wrapper-mobile.row-mobile { margin-top: 15px; }
  /* Bild und Text der Produktseite nicht nachträglich einblenden (Einblend-Effekt des Themes) */
  .product__section-images[data-aos], .product__section-contentWrapper[data-aos] { opacity: 1 !important; transform: none !important; transition-property: none !important; }
  /* Beim Laden: sofort das erste Bild der gewählten Farbe zeigen. Die Galerie dahinter bleibt
     unsichtbar, bis die Bilder-App auf die Farbe gefiltert hat (sonst erst alle Bilder, dann Sprung). */
  .minx-gallery-ph { display: none; }
  html.js:not(.minx-gallery-loaded) .minx-gallery-ph { display: block; position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1 / 1.15; z-index: 2; pointer-events: none; overflow: hidden; }
  .minx-gallery-ph img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
  html.js:not(.minx-gallery-loaded) .js-product-gallery .carousel-main { visibility: hidden; }
  @media (max-width: 798px) {
    html.js:not(.minx-gallery-loaded) .minx-gallery-ph { aspect-ratio: auto; height: min(calc(100vw * 560 / 390), 75vh); }
  }
</style>

<script>
  window.ProductData = {
    variants: {{ product.variants | json }}
  };
</script>

<style>
.desktop--only {
  display: none;
}

@media only screen and (max-width: 600px) {
    .wishlist-engine__gallery {
        position: absolute;
        right: 25px;
        z-index: 9;
        bottom: 10%;
    }
}


@media (min-width: 768px) {
  .desktop--only {
    display: block;
  }

  .desktop--only {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .wishlist-engine__gallery {
           position: absolute;
        bottom: 10%;
        right: 5%;
        z-index: 9;
}
}

/* Nur auf Mobile sichtbar (bis 767px) */
.mobile--only {
  display: block;
}

@media (min-width: 768px) {
  .mobile--only {
    display: none;
  }
}

  
/* MINX: Slider-Pfeile auf der Produktseite wieder einblenden — display:none auskommentiert */
/*
#product-{{ product.id }} button.flickity-button.flickity-prev-next-button.next,
#product-{{ product.id }} button.flickity-button.flickity-prev-next-button.previous {
  display: none;
}
*/

#product-{{ product.id }} .flickity-page-dots {
 position: absolute;
  bottom: -2px !important;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
  min-height: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#product-{{ product.id }} .flickity-enabled .flickity-page-dots {
  opacity: 1;
  visibility: visible;
}

.size-box-selected {
    border: 1px solid black;
    padding: 1rem;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
    height: 50px;
}


@media screen and (max-width: 798px) {
/* MINX: Platz für das Bild schon vor dem Start des Sliders freihalten (sonst springt die Seite beim Laden) */
#product-{{ product.id }} .carousel-main:not(.flickity-enabled) {
    height: min(calc(100vw * 560 / 390), 75vh);
    overflow: hidden;
}
/* MINX: Bildhöhe mobil wie Board B-Mobile-v4 (390 × 560), höchstens 75 % der Bildschirmhöhe */
 #product-{{ product.id }} .slides.product-image-container.carousel.carousel-main.js-carousel-main.flickity-enabled.is-draggable.is-fade {
    height: min(calc(100vw * 560 / 390), 75vh);
}

#product-{{ product.id }} .flickity-viewport {
    height: min(calc(100vw * 560 / 390), 75vh) !important;
}

#product-{{ product.id }} .image-zoom-container img {
    display: block;
    width: 100%;
    height: min(calc(100vw * 560 / 390), 75vh);
    transition: transform 0.4s ease;
    transform-origin: center center;
    object-fit: cover;
}
  
#product-{{ product.id }} .image-zoom-container {
  position: relative;
  pointer-events: auto;
  height: min(calc(100vw * 560 / 390), 75vh) !important;
  z-index: 12312; 
}
  
 #product-{{ product.id }} .carousel-cell.js-main-carousel-cell.image-slide {
    height: min(calc(100vw * 560 / 390), 75vh) !important;
}  
}  
</style>


{%- liquid

  assign current_variant = product.selected_or_first_available_variant
  assign thumbnail_position = section.settings.thumbnail_position
  assign click_to_enlarge = section.settings.click_to_enlarge
  assign enable_video_looping = section.settings.enable_video_looping

  assign tabs_active = false
  for block in section.blocks
    if block.type == 'tab_content' or block.type == 'tab_question'
      assign tabs_active = true
      break
    endif
  endfor

  assign product_tabs_shown = false

  assign product_buttons_form_id = 'product-form-buttons-' | append: section.id

  if product.template_suffix == 'pre-order'
    assign button_text = 'products.product.pre_order' | t
  else
    assign button_text = 'products.product.add_to_cart' | t
  endif

-%}

<section id="product-{{ product.id }}"
  class="product__section product-template global__section row grid__wrapper"
  data-product-id="{{ product.id }}"
  data-section-id="{{ section.id }}"
  data-url="{{ product.url }}"
  data-section-type="product__section"
  data-sale-format="{{ settings.sale_items }}"
  data-initial-variant="{{ current_variant.featured_media.id }}">

  {% render 'product-json',
    product: product %}

  {% capture product_gallery_config %}{
    "thumbPosition": {{ section.settings.thumbnail_position | json }},
    "enableVideoLooping": {{ section.settings.enable_video_looping | json }},
    "mainSlider": {% if product.media.size <= 1 %}false{% else %}true{% endif %},
    "thumbSlider": {% if product.media.size >= 4 %}true{% else %}false{% endif %},
    "productId": {{ product.id | json }},
    "thumbsShown": 4,
    "clickToEnlarge": {{ click_to_enlarge | json }},
    "isQuick": false,
    "adaptiveHeight": {{ section.settings.adaptive_height | json }},
  "pageDots": true
 }
{% endcapture %}

 {% capture product_form_config %}
   { "money_format": {{ shop.money_format | json }},
     "enable_history": true,
     "sold_out": {{ "products.product.sold_out" | t | json }},
     "button": {{ button_text | json }},
     "unavailable": {{ 'products.product.unavailable' | t | json }},
     "savings": {{ 'products.general.savings' | t | json }},
     "only_left": {
       "one": {{ 'products.product.only_left.one' | t | json }},
       "other": {{ 'products.product.only_left.other' | t | json }}
     },
     "quickview": {% if template == 'product.quick' %}true{% else %}false{% endif %},
     "featured_product": false,
     "swatches": {{ settings.product_variants | json }}
   }
 {% endcapture %}

  <div class="product__section-images product__section-image--{{ thumbnail_position }} carousel-container js-product-gallery span-8 md-span-12 sm-span-12 auto"
    data-product-gallery data-product-single-media-group
    data-gallery-config='{{ product_gallery_config }}' data-aos="fade">

    {%- comment -%} MINX: Platzhalter mit dem ersten Bild der gewählten Farbe (nur während des Ladens sichtbar, Bild-Alt bleibt unverändert) {%- endcomment -%}
    {%- liquid
      assign minx_ph = current_variant.featured_media
      if minx_ph == blank
        assign minx_ph = product.featured_media
      endif
    -%}
    {%- if minx_ph != blank -%}
      <div class="minx-gallery-ph" data-minx-ph="{{ minx_ph.id }}" aria-hidden="true">
        {{ minx_ph.preview_image | image_url: width: 1200 | image_tag: widths: '400, 600, 800, 1000, 1200', sizes: '(max-width: 980px) 100vw, 65vw', loading: 'eager', fetchpriority: 'high', alt: '' }}
      </div>
    {%- endif -%}

    {%- if product.featured_media -%}
      {% render 'product-image-gallery',
         thumbnail_position: thumbnail_position,
         click_to_enlarge: click_to_enlarge,
         enable_video_looping: enable_video_looping,
         product_gallery_config: product_gallery_config %}
    {%- else -%}
      {% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
      <div class="span-12">
        {{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
      </div>
    {%- endif -%}
<div class="progress-bar-carousel"></div>
      
<div
 class="wishlist-engine wishlist-engine__gallery hello"
 data-product_id="{{  product.id }}"
 data-variant_id="{{ product.selected_or_first_available_variant.id }}"
 data-full_button="true"
 data-css="true"
></div>
  </div>

  
  <div class="product__section-contentWrapper span-4 md-span-12 sm-span-12 auto grid__wrapper-mobile row-mobile" data-aos="fade" data-aos-anchor="#identity">
    <div class="product__section-content">
      <div class="product__section-details">
        <div class="product__section--header product__section--element" {{ block.shopify_attributes }}>

          {% capture product_tabs %}
            {% if tabs_active %}
            <div class="product__section--tabs product__tabs-container js-tabbed-product-container">
              <ul class="product__tabs">
                {% for block in section.blocks %}
                  {% if block.type == 'product_description' %}
                    <li class="product__tab-trigger" {{ block.shopify_attributes }} data-tab-index="{{ forloop.index }}">
                      <a class="js-tab-trigger" data-content="{{ block.id }}-tab-{{ forloop.index }}" href="#{{ block.id }}-tab-{{ forloop.index }}">
                        {{ 'products.product.details' | t }}
                      </a>
                    </li>
                  {% endif %}
                  {% if block.type == 'tab_content' %}
                    {% liquid
                      assign has_title = false
                      assign has_content = false

                      if block.settings.tab_title != blank
                        assign has_title = true
                      endif

                      if block.settings.tab_text != blank
                        assign has_content = true
                      endif
                    %}
                    {% if has_title and has_content %}
                    <li class="product__tab-trigger" {{ block.shopify_attributes }} data-tab-index="{{ forloop.index }}">
                      <a class="js-tab-trigger" data-content="{{ block.id }}-tab-{{ forloop.index }}" href="#{{ block.id }}-tab-{{ forloop.index }}">
                        {{ block.settings.tab_title | escape }}
                      </a>
                    </li>
                    {% endif %}
                  {% endif %}
                  {% if block.type == 'tab_question' %}
                    {% liquid
                      assign has_title = false

                      if block.settings.tab_title != blank
                        assign has_title = true
                      endif
                    %}
                    {% if has_title %}
                    <li class="product__tab-trigger" {{ block.shopify_attributes }} data-tab-index="{{ forloop.index }}">
                      <a class="js-tab-trigger" data-content="{{ block.id }}-tab-{{ forloop.index }}" href="#{{ block.id }}-tab-{{ forloop.index }}">
                        {{ block.settings.tab_title | escape }}
                      </a>
                    </li>
                    {% endif %}
                  {% endif %}
                {% endfor %}
              </ul>
              <div class="clear"></div>

              {%- for block in section.blocks -%}
                {% if block.type == 'product_description' %}
                  <div class="tabbed__product-content tabbed__product-{{ block.id }} js-tabbed-content" id="{{ block.id }}-tab-{{ forloop.index }}" {{ block.shopify_attributes }}>
                    {{ product.description }}
                  </div>
                {%- endif -%}
                {%- if block.type == 'tab_content' -%}
                  {% liquid
                    assign has_title = false
                    assign has_content = false

                    if block.settings.tab_title != blank
                      assign has_title = true
                    endif

                    if block.settings.tab_text != blank
                      assign has_content = true
                    endif
                  %}
                  {% if has_title and has_content %}
                  <div class="tabbed__product-content tabbed__product-{{ block.id }} js-tabbed-content" id="{{ block.id }}-tab-{{ forloop.index }}" {{ block.shopify_attributes }}>
                    {{ block.settings.tab_text }}
                  </div>
                  {% endif %}
                {%- endif -%}
                {%- if block.type == 'tab_question' -%}
                  {% liquid
                    assign has_title = false

                    if block.settings.tab_title != blank
                      assign has_title = true
                    endif
                  %}
                  {% if has_title %}
                  <div class="tabbed__product-content tabbed__product-{{ block.id }} js-tabbed-content js-tabbed-question" id="{{ block.id }}-tab-{{ forloop.index }}" {{ block.shopify_attributes }}>
                    {{ block.settings.tab_text }}
                      {% render 'question' %}
                  </div>
                  {% endif %}
                {%- endif -%}
              {%- endfor -%}
            </div>
            {% endif %}
          {% endcapture %}

          {% if collection %}
            <div class="product__nav">
              {% if collection.previous_product %}
                <a href="{{ collection.previous_product }}" title="{{ 'general.pagination.prev' | t }}">
                  {% render 'snip-icons',
                     wrapper: '.product__nav',
                     type: 'apollo',
                     icon: 'left-carrot',
                     classes: 'product__nav--icon vib-center',
                     size: '12px',
                     fill: 'var(--directional-color)',
                     hover: 'var(--directional-hover-color)' %}
                </a>
              {% endif %}
              {% if collection.next_product %}
                <a href="{{ collection.next_product }}" title="{{ 'general.pagination.next' | t }}">
                  {% render 'snip-icons',
                     wrapper: '.product__nav',
                     type: 'apollo',
                     icon: 'right-carrot',
                     classes: 'product__nav--icon vib-center',
                     size: '12px',
                     fill: 'var(--directional-color)',
                     hover: 'var(--directional-hover-color)' %}
                </a>
              {% endif %}
            </div>
          {% endif %}

        </div>
        {%- for block in section.blocks -%}
          {%- case block.type -%}

          {% when 'product_price' %}
            <div class="custom--hide__mobile product__section--header product__section--element product__section--{{ block.type }}" {{ block.shopify_attributes }}>
              {% render 'product-price', variant: current_variant, product: product %}

              {%- comment -%} MINX: Preisangabe mit MwSt./Versand immer zeigen {%- endcomment -%}
              {% if block.type == 'product_price' %}
                {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
                  <div class="product__policies rte" data-product-policies>
                    {%- if cart.taxes_included -%}
                      {{ 'products.product.include_taxes' | t }}
                    {%- endif -%}
                    {%- if cart.taxes_included and shop.shipping_policy.body != blank %} {% endif -%}
                    {%- if shop.shipping_policy.body != blank -%}
                      {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                    {%- endif -%}
                  </div>
                {%- endif -%}
              {% endif %}

              {%- form 'product', product, id: 'product-form-installment' -%}
                <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                <select style="display:none;" name='id'>
                  {% for variant in product.variants %}
                    <option value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}></option>
                  {% endfor %}
                </select>
                <div class="spi-banner">
                  {{ form | payment_terms }}
                </div><!-- /#spi-banner -->
              {%- endform -%}
            </div>

          {% when 'product_vendor' %}
            <div class="product__section--header product__section--element product__section--{{ block.type }}" {{ block.shopify_attributes }}>
              <p class="product__vendor">{{ product.vendor }}</p>
            </div>

          {% when 'product_title' %}
            <div class="product__section--header product__section--element product__section--{{ block.type }}" {{ block.shopify_attributes }}>
              <h1 class="product__section-title product-title">{%- if product.metafields.my_fields.modellBezeichnung != blank -%}<span class="product__model product__model--in-title">{{ product.metafields.my_fields.modellBezeichnung }}</span> {% endif -%}{{ product.title }}</h1>
            <div class="custom--hide product__section--header product__section--element product__section--{{ block.type }}" {{ block.shopify_attributes }}>
              {% render 'product-price', variant: current_variant, product: product %}

              {%- comment -%} MINX: Preisangabe mit MwSt./Versand immer zeigen (Titel-Block hat keine eigene Einstellung) {%- endcomment -%}
              {% if block.type == 'product_title' or block.settings.show_tax_information %}
                {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}
                  <div class="product__policies rte" data-product-policies>
                    {%- if cart.taxes_included -%}
                      {{ 'products.product.include_taxes' | t }}
                    {%- endif -%}
                    {%- if cart.taxes_included and shop.shipping_policy.body != blank %} {% endif -%}
                    {%- if shop.shipping_policy.body != blank -%}
                      {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
                    {%- endif -%}
                  </div>
                {%- endif -%}
              {% endif %}

              {%- form 'product', product, id: 'product-form-installment' -%}
                <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
                <select style="display:none;" name='id'>
                  {% for variant in product.variants %}
                    <option value="{{ variant.id }}" {% if variant == current_variant %}selected="selected"{% endif %}></option>
                  {% endfor %}
                </select>
                <div class="spi-banner">
                  {{ form | payment_terms }}
                </div><!-- /#spi-banner -->
              {%- endform -%}
            </div>
            </div>

          {%- when 'product_variants' -%}
            {%- liquid
              assign show_size_chart = block.settings.show_size_chart
              assign size_chart_label = block.settings.size_chart_label
              assign size_chart_page = block.settings.content
              assign size_chart_option_name = block.settings.size_chart_option_name
            -%}
            {%- assign product_form_id = 'product-form-' | append: section.id -%}
            {% form 'product', product,
               id: product_form_id,
               class: "product__form-container product_form relative",
               data-product-form: product_form_config,
               data-product-id: product.id %}

              {%- unless product.has_only_default_variant -%}
               {%- if settings.product_variants == 'swatches' -%}
                 <div class="product__variants-swatches mt4 mb6 no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                   {% for option in product.options_with_values %}
                     {% render "swatch",
                       option: option,
                       current_variant: current_variant,
                       product: product,
                       show_color_swatches: settings.show_color_swatches,
                       color_swatch_shape: settings.color_swatch_shape,
                       color_swatch_style: settings.color_swatch_style,
                       show_size_chart: show_size_chart,
                       size_chart_label: size_chart_label,
                       content: block.settings.content,
                       size_chart_option_name: size_chart_option_name
                      %}
                   {% endfor %}
                 </div>
               {%- else -%}
                 <div class="product__variants-select no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
                   {%- for option in product.options_with_values -%}

                     {% unless template == 'product.quick' %}
                       {% assign option_name = option.name | downcase %}
                       {% if show_size_chart and option_name contains 'size' %}
                           <div class="size-chart">
                           <button
                             class="button-as-link js-modal-open"
                             type="button"
                             name="button"
                             aria-label="Open popup"
                             data-wau-modal-target="product-modal--{{ section.id }}--{{ forloop.index }}">
                             {{ size_chart_label }}
                           </button>
                           <!-- modal content -->
                           <div data-wau-modal-content="product-modal--{{ section.id }}--{{ forloop.index }}" style="display: none;">
                             <div class="rte">
                               {{ block.settings.content }}
                             </div><!-- /.rte -->
                           </div>
                         </div>
                       {% endif %}
                     {% endunless %}

                     <div class="product-form__input product-form__input--dropdown product__section--element">
                       <label class="form__label" for="Option-{{ section.id }}-{{ forloop.index0 }}">
                         {{ option.name }}
                       </label>
                       <div class="select">
                         <select id="Option-{{ section.id }}-{{ forloop.index0 }}"
                           class="js-variant-selector styled-select"
                           name="options[{{ option.name | escape }}]"
                           form="product-form-{{ section.id }}"
                         >
                           {%- for value in option.values -%}
                             <option value="{{ value | escape }}" {% if option.selected_value == value %}selected="selected"{% endif %}>
                               {{ value }}
                             </option>
                           {%- endfor -%}
                         </select>
                       </div>
                     </div>
                   {%- endfor -%}
                 </div>
               {%- endif -%}
              {%- endunless -%}

              <noscript class="product__variants-select product-form__noscript-wrapper-{{ section.id }}">
                <div class="product-form__input product-form__input--dropdown{% if product.has_only_default_variant %} hidden{% endif %} product__section--element">
                  <label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.select_option' | t }}</label>
                  <div class="select">
                    <select name="id" id="Variants-{{ section.id }}" class="styled-select">
                      {%- for variant in product.variants -%}
                        <option
                          {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
                          {% if variant.available == false %}disabled{% endif %}
                          value="{{ variant.id }}"
                        >
                          {{ variant.title }}
                          {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
                          - {{ variant.price | money | strip_html }}
                        </option>
                      {%- endfor -%}
                    </select>
                  </div>
                </div>
              </noscript>

          <input class="formVariantId js-variant-id" name="id" type="hidden" value="{{ product.selected_or_first_available_variant.id }}">

            {% endform %}

          {%- when 'product_availability' -%}
            <div class="product-single__store-availability-container product__section--element"
              data-variant-id="{{ current_variant.id }}"
              data-product-title="{{ product.title | escape }}"
              data-root-url="{{ routes.root_url }}"
              style="visibility:hidden; min-height: 120px;" data-store-availability-container {{ block.shopify_attributes }}>
            </div>

          {%- when 'product_quantity' -%}
            <div class="product__section--qty qty-selection product__section--element" data-product-qty {{ block.shopify_attributes }}>
              <label for="qty-{{ product.id }}" class="h5">{{ 'products.product.quantity' | t }}</label>
              <div class="product__quantity--wrapper">
                <button class="down quantity-control-down" type="button">
                  <span class="visuallyhidden">{{ 'products.product.decrease' | t: product: product.title | escape }}</span>
                -</button>
                  <input id="qty-{{ product.id }}" min="1" type="text" name="quantity" class="formQty quantity" value="1" />
                <button class="up quantity-control-up" type="button">
                  <span class="visuallyhidden">{{ 'products.product.increase' | t: product: product.title | escape }}</span>
                +</button>
              </div>
            </div>

          {%- when 'product_sku' -%}
            <div class="product__section--sku sku product__section--element" {{ block.shopify_attributes }}>
              <label for="variantSku">{{ 'products.product.sku' | t }}:</label>
              <span id="variantSku" class="variant_sku">{{ current_variant.sku }}</span>
            </div>

          {%- when 'text_content' -%}
            {% if block.settings.text != blank %}
              <div class="product__section--text product__section--element rte" {{ block.shopify_attributes }}>
                {{ block.settings.text }}
              </div>
            {% endif %}

          {%- when 'text_popup' -%}
            {% if block.settings.text != blank and block.settings.popup_trigger != blank %}
              <div class="product__section--popup product__section--element{% if block.settings.show_inline %} inline{% endif %}" {{ block.shopify_attributes }}>
                <button class="product__contact-trigger button-as-link js-modal-open js-contact-trigger" type="button" name="button" data-wau-modal-target="popup-content--{{ block.id }}" >{{ block.settings.popup_trigger }}</button>
                <div data-wau-modal-content="popup-content--{{ block.id }}" style="display: none">
                  {{ block.settings.text }}
                </div>
              </div>
            {% endif %}

          {%- when 'text_with_icon' -%}
            {% liquid
              assign icon = block.settings.icon
              assign type = 'fash-theme'
              case icon
              when 'bag', 'cart', 'chat', 'checkmark', 'gift', 'grid', 'home', 'menu-dots', 'money', 'promo', 'sale-tag', 'search', 'secure', 'share', 'ship-truck', 'star', 'user', 'wish', 'wish-focus'
                assign type = 'apollo'
              endcase
            %}
            {% unless block.settings.text == blank %}
              <div class="product__section--text-with-icon product__section--element" {{ block.shopify_attributes }}>
                <div class="product--text-with-icon__icon">
                  {% render 'snip-icons',
                    wrapper: '.product__block-icon',
                    type: type,
                    icon: block.settings.icon,
                    size: '20px' %}
                  </div>
                  <div class="product--text-with-icon__text">
                    {{ block.settings.text }}
                  </div>
              </div>
            {% endunless %}

          {% when 'payment_icons' %}
            <div class="product__section--payment-icons product__section--element"
                style="background-color:{{ block.settings.background_color }};" {{ block.shopify_attributes }}>
              {% if block.settings.title != blank %}
                <h5>{{ block.settings.title | escape }}</h5>
              {% endif %}
            {% for type in shop.enabled_payment_types %}
              {{ type | payment_type_svg_tag: class:'payment-icon' }}
            {% endfor %}
            </div>

          {% when 'stock_levels' %}
            <div class="product__section-stockLevels" {{ block.shopify_attributes }}>
              {% if block.settings.threshold > 0 %}
                {%- liquid
                  assign show_hidden_class = false
                  if current_variant.inventory_management and current_variant.inventory_quantity < block.settings.threshold and current_variant.inventory_quantity > 0
                    assign show_hidden_class = true
                  endif
                -%}
                {% capture variant_stock_levels_classes %}
                  variant-stock-levels js-variant-stock-levels variant-stock-levels--{{ section.id }} {% unless show_hidden_class %}visually-hidden{% endunless %}
                {% endcapture %}

                <div
                  id="variant-stock-levels--{{ section.id }}"
                  class="{{ variant_stock_levels_classes | strip }}"
                  data-stock-level-threshold="{{ block.settings.threshold }}"
                >
                  <div class="variant-stock-levels__inner product__section--element">
                    <span class="pulse__icon"></span>
                    <span class="js-variant-stock-levels__message">
                      {{ 'products.product.only_left' | t: count: current_variant.inventory_quantity }}
                    </span>
                  </div><!-- /.variant-stock-levels__inner -->
                </div><!-- /#variant-stock-levels -->
              {% endif %}
              {% style %}
                .pulse__icon {
                  background: rgba({{ block.settings.pulse_background | color_to_rgb | remove: 'rgb(' | remove: ')' }});
                  box-shadow: 0 0 0 0 rgba({{ block.settings.pulse_background | color_to_rgb | remove: 'rgb(' | remove: ')' }});
                  transform: scale(1);
                  animation: pulse-color 2s infinite;
                }
                @keyframes pulse-color {
                  0% {
                    transform: scale(0.95);
                    box-shadow: 0 0 0 0 rgba({{ block.settings.pulse_background | color_to_rgb | remove: 'rgb(' | remove: ')' }}, 0.7);
                  }
                  70% {
                    transform: scale(1);
                    box-shadow: 0 0 0 10px rgba({{ block.settings.pulse_background | color_to_rgb | remove: 'rgb(' | remove: ')' }}, 0);
                  }
                  100% {
                    transform: scale(0.95);
                    box-shadow: 0 0 0 0 rgba({{ block.settings.pulse_background | color_to_rgb | remove: 'rgb(' | remove: ')' }}, 0);
                  }
                }
               {% endstyle %}
            </div>
  {%- when 'breadcrumbs' -%}
              {%- comment -%} MINX: kurzer Breadcrumb „Startseite / Kategorie / MODELL“ {%- endcomment -%}
              <nav class="product__section-breadcrumbs minx-crumbs" aria-label="Breadcrumb" {{ block.shopify_attributes }}>
                <a href="{{ routes.root_url }}">{{ 'general.breadcrumbs.home' | t | default: 'Startseite' }}</a>
                <span class="separator" aria-hidden="true">/</span>
                {%- if collection and collection.handle != blank -%}
                  <a href="{{ collection.url }}">{{ collection.title }}</a>
                {%- else -%}
                  {{ product.type | link_to_type }}
                {%- endif -%}
                <span class="separator" aria-hidden="true">/</span>
                <span class="page-title" aria-current="page">{{ product.title }}</span>
              </nav>


          {%- when 'product_buttons' -%}
            <div class="product__section--buttons product-add product__section--element" {{ block.shopify_attributes }}>
              {% 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
               %}
              {% form 'product', product,
                 id: product_buttons_form_id,
                 class: "product__form-buttons js-prod-form-submit relative",
                 data-product-id: product.id,
                 data-hide-errors: gift_card_recipient_feature_active %}

                {%- liquid

                  if product.template_suffix == 'pre-order'
                    assign call_to_action = 'products.product.pre_order' | t
                  else
                    assign call_to_action = 'products.product.add_to_cart' | t
                  endif
                  unless current_variant.available
                    assign call_to_action = 'products.product.sold_out' | t
                  endunless

                  assign product_form_id = 'product-form-' | append: section.id

                -%}

                {% if block.settings.show_gift_card_recipient and product.gift_card? %}
                  {%- render 'gift-card-recipient-form', product: product, form: form, section: section -%}
                {%- endif -%}

                <input class="formVariantId" name="id" type="hidden" value="{{ product.selected_or_first_available_variant.id }}">
                <input class="formQty" type="hidden" name="quantity" value="1" />
                <div class="note note-success js-added-msg" style="display: none">
                  <strong>{{ 'products.product.added' | t }}</strong>&nbsp;&nbsp;&nbsp;<a class="underline" href="{{ routes.cart_url }}">{{ 'products.product.view_cart' | t }}</a> {{ 'products.product.or' | t }} <a class="underline" href="{{ routes.all_products_collection_url }}">{{ 'products.product.continue' | t }}</a>.
                </div>
                <div class="note note-error js-error-msg" style="display: none" role="alert">
                  <b class="note__heading">{{ 'cart.general.cart_error' | t }}</b>&nbsp;&nbsp;&nbsp;<span class="note__body">{{ 'cart.general.update_qty_error' | t }}</span>
                </div>

               <input id="addToCart"
       type="submit"
       name="button"
       class="add clearfix AddtoCart js-ajax-submit"
       value="{{ call_to_action }}"
       {% unless current_variant.available %}disabled{% endunless %} />

<button type="button"
        id="requestSize"
        class="request-size-button"
        style="display: none;">
  Jetzt anfragen
</button>

                {% if settings.show_payment_button %}
                 {{ form | payment_button }}
                {% endif %}
              {%-  endform -%}
            </div>
            {%- comment -%} MINX: Service-Zeile unter dem Warenkorb-Button (Texte in minx-service pflegen) {%- endcomment -%}
            {% render 'minx-service', style: 'line' %}

          {%- when 'product_description' -%}

            {%- comment -%} MINX: Beschreibung und Reiter ersetzt durch aufklappbare Abschnitte (minx-pdp-details) {%- endcomment -%}
            {% if product_tabs_shown == false %}
              <div class="product__section--{{ block.type }} product__decription-container product__section--element" {{ block.shopify_attributes }}>
                {% render 'minx-pdp-details', product: product %}
                {% assign product_tabs_shown = true %}
              </div>
            {% endif %}
          {% when 'tab_content' %}
            {% if product_tabs_shown == false %}
            <div class="product__section--{{ block.type }} product__decription-container product__section--element" {{ block.shopify_attributes }}>
                {% render 'minx-pdp-details', product: product %}
                {% assign product_tabs_shown = true %}
            </div>
            {% endif %}
          {% when 'tab_question' %}
            {% if product_tabs_shown == false %}
            <div class="product__section--{{ block.type }} product__decription-container product__section--element" {{ block.shopify_attributes }}>
                {% render 'minx-pdp-details', product: product %}
                {% assign product_tabs_shown = true %}
            </div>
            {% endif %}
          {%- when 'product_customization' -%}

            <div class="product__line-item product__section--element {{ block.shopify_attributes }}">
              {%
                render 'product-customizations',
                block: block,
                product_buttons_form_id: product_buttons_form_id
              %}
            </div>

          {% when 'complementary_products' %}
            {%
              render 'complementary-product',
              block: block,
              section: section,
              product: product
            %}

          {%- when 'image' -%}
            {% if block.settings.image != blank %}
            {% liquid
              assign loading = 'lazy'
              assign fetch_priority = 'auto'
              if section.index < 3 and forloop.index < 3
                assign loading = 'eager'
                assign fetch_priority = 'high'
              endif
             %}
            <div class="product__section--image product__section--element" {{ block.shopify_attributes }}>
              {% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
                  {%
                    render 'basic-responsive-image',
                    type: block.settings.image,
                    width: 2400,
                    loading: loading,
                    fetchpriority: fetch_priority
                  %}
              {% if block.settings.link != blank %}</a>{% endif %}
            </div>
            {% endif %}

          {%- when 'share' -%}
            <div class="product__section--share product__share-container product__section--element" {{ block.shopify_attributes }}>
              {% render 'social' with product %}
            </div>

          {% when '@app' %}
            <div class="product__section--app product__section--element {{ block.shopify_attributes }}">
              {% render block %}
            </div>
            {%- comment -%} MINX: Sterne mobil sofort neben „inkl. MwSt. zzgl. Versandkosten“ setzen (vor dem ersten Zeichnen) {%- endcomment -%}
            <script>
              (function () {
                var b = document.currentScript && document.currentScript.previousElementSibling;
                if (!b || !b.querySelector('.klaviyo-star-rating-widget') || !window.matchMedia('(max-width: 767px)').matches) return;
                var t = document.querySelector('.product__section--header.product__section--product_title:not(.custom--hide)');
                if (t) { b.classList.add('minx-stars'); t.appendChild(b); }
              })();
            </script>

          {% when 'custom_liquid' %}
            {%- comment -%} MINX: Modellbezeichnung steht jetzt in der H1 (Block „Produkttitel“) {%- endcomment -%}
            {%- if block.settings.custom_liquid contains 'product__model' -%}{%- continue -%}{%- endif -%}
            <div class="product__section--custom_liquid product__section--element {{ block.shopify_attributes }}">
              {{ block.settings.custom_liquid }}
            </div>
          {% endcase %}

        {%- endfor -%}

      </div>
    </div>
  </div>

  <style>
    .product__section-container {
        background: {{ section.settings.product_background }};
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .product__section-container .contact__form--input label,
    .theme-features__ghost-buttons--true .product__section-container .secondary-button,
    small.property--required {
      background: {{ section.settings.product_background }} !important;
    }
    {% if section.settings.thumbnail_position == 'bottom' %}
      #product-{{ product.id }} .thumb-slider-slides {
        transition: left 0.5s ease-in-out;
      }
    {% else %}
      #product-{{ product.id }} .thumb-slider-slides {
        transition: top 0.5s ease-in-out;
      }
    {% endif %}

  </style>
</section>

<script>
  /* MINX: Galerie freigeben, sobald sie das erste Bild der gewählten Farbe zeigt (spätestens nach 3 s) */
  (function () {
    var root = document.documentElement;
    var sec = document.getElementById('product-{{ product.id }}');
    var ph = sec && sec.querySelector('.minx-gallery-ph');
    var want = ph ? ph.getAttribute('data-minx-ph') : null;
    var obs = null;
    /* MINX 29.09.2026: Platzhalter erst ausblenden, wenn das Galeriebild wirklich
       geladen ist – sonst war beim Umschalten kurz eine weiße Fläche zu sehen. */
    var revealed = false;
    function reveal() {
      if (revealed) return;
      revealed = true;
      root.classList.add('minx-gallery-loaded');
      if (obs) obs.disconnect();
    }
    function visibleGallery() {
      var gs = sec.querySelectorAll('.js-product-gallery');
      for (var i = 0; i < gs.length; i++) { if (gs[i].offsetParent !== null) return gs[i]; }
      return null;
    }
    function galleryImg() {
      var g = visibleGallery();
      if (!g) return null;
      return g.querySelector('.carousel-cell.is-selected img') || g.querySelector('.carousel-cell img');
    }
    function preload() {
      /* das gesuchte Bild in der (noch unsichtbaren) Galerie schon jetzt laden */
      var g = visibleGallery();
      if (!g || !want) return;
      var c = g.querySelector('.carousel-cell[data-image-id="' + want + '"] img');
      if (c && c.loading === 'lazy') c.loading = 'eager';
    }
    function done() {
      if (revealed || done.waiting) return;
      if (obs) obs.disconnect();
      var img = galleryImg();
      if (!img) { reveal(); return; }
      if (img.loading === 'lazy') img.loading = 'eager';
      done.waiting = true;
      setTimeout(reveal, 1500); /* Sicherheitsnetz */
      if (img.complete && img.naturalWidth) {
        if (img.decode) { img.decode().then(reveal, reveal); } else { reveal(); }
        return;
      }
      img.addEventListener('load', function () {
        if (img.decode) { img.decode().then(reveal, reveal); } else { reveal(); }
      }, { once: true });
      img.addEventListener('error', reveal, { once: true });
    }
    function check() {
      if (!want) { done(); return; }
      preload();
      var gs = sec.querySelectorAll('.js-product-gallery');
      for (var i = 0; i < gs.length; i++) {
        var g = gs[i];
        if (g.offsetParent === null) continue;
        var cells = g.querySelectorAll('.carousel-cell');
        if (cells.length <= 1) { done(); return; }
        if (!g.querySelector('.flickity-enabled')) continue;
        if (cells[0].getAttribute('data-image-id') === want) { setTimeout(done, 80); return; }
      }
    }
    if (!sec) { done(); return; }
    if (window.MutationObserver) {
      obs = new MutationObserver(check);
      obs.observe(sec, { subtree: true, childList: true, attributes: true, attributeFilter: ['class', 'style'] });
    }
    check();
    setTimeout(done, 3000);
  })();
</script>
{% render 'minx-groesse-pflicht', part: 'js' %}
{% render 'minx-pdp-mobil', part: 'js' %}
{% render 'minx-pdp-desktop', part: 'js' %}
{% render 'minx-groessen-drawer', product: product %}
{% render 'minx-pdp-weitere', product: product %}
{% render 'minx-bewertungen', part: 'js' %}

<script type="application/json" id="ModelJson-{{ section.id }}">
  {{ product.media | where: 'media_type', 'model' | json }}
</script>

{% schema %}
{
  "name": "Product page",
  "class":"product__section-container",
  "settings": [
    {
      "type":"color",
      "id":"product_background",
      "label":"Background color"
    },
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "select",
      "id": "thumbnail_position",
      "label": "Thumbnail position",
      "options": [{
          "value": "right",
          "label": "Right"
        },
        {
          "value": "left",
          "label": "Left"
        },
        {
          "value": "bottom",
          "label": "Bottom"
        }
      ]
    },
    {
      "type": "checkbox",
      "id": "click_to_enlarge",
      "label": "Enable click to enlarge",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "enable_video_looping",
      "label": "Enable video looping",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "adaptive_height",
      "label": "Adaptive height",
      "default": true,
      "info":"Slideshow will adjust height to match the current slide"
    },
    {
      "type": "paragraph",
      "content": "Learn more about [Media types](https:\/\/help.shopify.com/en\/manual\/products\/product-media\)"
    }
  ],
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "complementary_products",
      "name": "Complementary products",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "To select complementary products, add the Search & Discovery app. [Learn more](https:\/\/shopify.dev\/themes\/product-merchandising\/recommendations)"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Pair it with"
        },
        {
          "type": "range",
          "id": "limit",
          "min": 1,
          "max": 10,
          "step": 1,
          "label": "Complementary products to show",
          "default": 2
        },
        {
          "type": "radio",
          "id": "appearance",
          "label": "Appearance",
          "default":"simple",
          "options": [
            {
              "value": "full",
              "label": "Full"
            },
            {
              "value": "simple",
              "label": "Simple"
            }
          ]
        }
      ]
    },
    {
      "type": "product_title",
      "name":"Product title",
      "settings": []
    },
    {
      "type": "product_vendor",
      "name":"Product vendor",
      "settings": []
    },
    {
      "type": "product_price",
      "name":"Product price",
      "settings": [
        {
          "type": "checkbox",
          "id": "show_tax_information",
          "label": "Show tax information",
          "default": false,
          "info":"If tax is included within the product price"
        }
      ]
    },
    {
      "type": "custom_liquid",
      "name":"Custom liquid",
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "Custom liquid",
          "info":"Add app snippets or other Liquid code to create advanced customizations [Learn more](https:\/\/shopify.dev\/docs\/api\/liquid)"
        }
      ]
    },
    {
      "type": "image",
      "name": "Image",
      "settings": [
      {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link",
          "info": "Optional"
        }
      ]
    },
    {
      "type": "payment_icons",
      "name": "Payment icons",
      "limit": 1,
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Secure online shopping"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Background",
          "default": "#f5f5f5"
        }
      ]
    },
      {
      "type": "breadcrumbs",
      "name": "Breadcrumbs",
      "settings": [
        {
          "type": "header",
          "content": "Breadcrumbs"
        }
      ]
    },
    {
      "type": "product_availability",
      "name": "Pickup availability",
      "limit": 1,
      "settings": []
    },
    {
      "type": "product_buttons",
      "name": "Buttons",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_gift_card_recipient",
          "default": false,
          "label": "Show recipient information form for gift card products",
          "info": "Gift card products can optionally be sent direct to a recipient along with a personal message. [Learn more](https:\/\/help.shopify.com\/manual\/online-store\/themes\/customizing-themes\/add-gift-card-recipient-fields)"
        }
      ]
    },
    {
      "type": "product_customization",
      "name": "Product customization",
      "limit": 3,
      "settings": [
        {
          "type": "paragraph",
          "content": "Product customizations allow you to capture additional information when your customers place an order."
        },
        {
          "type": "select",
          "id": "property_type",
          "label": "Choose a property",
          "options": [
            {
              "value": "text",
              "label": "Single line text"
            },
            {
              "value": "multi_line_text",
              "label": "Multiple line text"
            },
            {
              "value": "image",
              "label": "Image"
            }
          ]
        },
        {
          "type": "text",
          "id": "title",
          "label": "Heading",
          "default": "Label"
        },
        {
          "type": "checkbox",
          "id": "required",
          "label": "Required",
          "default": false
        }
      ]
    },
    {
      "type": "product_description",
      "name": "Product description",
      "limit": 1,
      "settings": []
    },
    {
      "type": "product_quantity",
      "name": "Quantity",
      "limit": 1,
      "settings": []
    },
    {
      "type": "product_sku",
      "name": "Sku",
      "limit": 1,
      "settings": []
    },
    {
      "type": "product_variants",
      "name": "Variants",
      "limit": 1,
      "settings":
      [
        {
          "type":"checkbox",
          "id":"show_size_chart",
          "label":"Show size chart",
          "default":false
        },
        {
          "type":"liquid",
          "id":"content",
          "label":"Add size chart content",
          "default": "<p>Add content here</p>"
        },
        {
          "type":"text",
          "id":"size_chart_label",
          "label":"Label",
          "default":"Size chart"
        },
        {
          "type":"text",
          "id":"size_chart_option_name",
          "label":"Option name",
          "info": "The option that you want the size chart to appear on.",
          "default":"Size"
        }
      ]
    },
    {
      "type": "share",
      "name": "Social sharing",
      "limit": 1,
      "settings": []
    },
    {
      "type": "stock_levels",
      "name": "Stock levels",
      "limit": 1,
      "settings": [
        {
          "type": "range",
          "id": "threshold",
          "min": 0,
          "max": 50,
          "step": 1,
          "label": "Threshold",
          "info": "Increase buyer urgency if inventory below selected number, set to 0 to disable.",
          "default": 4
        },
        {
          "type":"color",
          "id":"pulse_background",
          "label":"Pulse background",
          "default": "#ff6600"
        }
      ]
    },
    {
      "type": "tab_content",
      "name": "Tab content",
      "settings": [
        {
          "label": "Title",
          "id": "tab_title",
          "type": "text",
          "default": "Tab title"
        },
        {
          "label": "Text",
          "id": "tab_text",
          "type": "liquid",
          "default": "<p>Add text which will be shown in tabs across all product pages</p>"
        }
      ]
    },
    {
      "type": "tab_question",
      "name": "Tab contact form",
      "limit": 1,
      "settings": [
        {
          "label": "Title",
          "id": "tab_title",
          "type": "text",
          "default": "Ask a question"
        },
        {
          "label": "Text",
          "id": "tab_text",
          "type": "richtext",
          "default": "<p>Add text which will be shown in tabs across all product pages</p>"
        }
      ]
    },
    {
      "name":"Text",
      "type": "text_content",
      "settings":
      [
        {
          "label": "Text",
          "id": "text",
          "type": "richtext",
          "default": "<p>Add additional text content</p>"
        }
      ]
    },
    {
      "name":"Text popup",
      "type": "text_popup",
      "settings":
      [
        {
          "label": "Popup modal label",
          "id": "popup_trigger",
          "type": "text",
          "default": "Popup label"
        },
        {
          "label": "Text",
          "id": "text",
          "type": "richtext",
          "default": "<p>Add additional text content</p>"
        },
        {
          "label": "Show popup label inline",
          "id": "show_inline",
          "type": "checkbox",
          "default": false,
          "info": "Show inline with other popup links where selected"
        }
      ]
    },
    {
      "type": "text_with_icon",
      "name": "Text with icon",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "<p>Add text alongside an icon</p>"
        },
        {
          "type": "select",
          "id": "icon",
          "label": "Choose an icon",
          "options": [
          {
            "value": "appliance",
            "label": "Appliance"
          },
          {
            "value": "bag",
            "label": "Bag"
          },
          {
            "value": "battery",
            "label": "Battery"
          },
          {
            "value": "bed",
            "label": "Bed"
          },
          {
            "value": "bell",
            "label": "Bell"
          },
          {
            "value": "calendar",
            "label": "Calendar"
          },
          {
            "value": "camera",
            "label": "Camera"
          },
          {
            "value": "chair",
            "label": "Chair"
          },
          {
            "value": "chat",
            "label": "Chat"
          },
          {
            "value": "checkmark",
            "label": "Checkmark"
          },
          {
            "value": "child",
            "label": "Child"
          },
          {
            "value": "clock",
            "label": "Clock"
          },
          {
            "value": "disability",
            "label": "Disability"
          },
          {
            "value": "dishwasher",
            "label": "Dishwasher"
          },
          {
            "value": "display",
            "label": "Display"
          },
          {
            "value": "drill",
            "label": "Drill"
          },
          {
            "value": "drink",
            "label": "Drink"
          },
          {
            "value": "eco",
            "label": "Eco"
          },
          {
            "value": "filter",
            "label": "Filter"
          },
          {
            "value": "flower",
            "label": "Flower"
          },
          {
            "value": "food",
            "label": "Food"
          },
          {
            "value": "gift",
            "label": "Gift"
          },
          {
            "value": "globe",
            "label": "Globe"
          },
          {
            "value": "grid",
            "label": "Grid"
          },
          {
            "value": "hammer",
            "label": "Hammer"
          },
          {
            "value": "hanger",
            "label": "Hanger"
          },
          {
            "value": "headphones",
            "label": "Headphones"
          },
          {
            "value": "wish",
            "label": "Heart"
          },
          {
            "value": "wish-focus",
            "label": "Heart filled"
          },
          {
            "value": "help",
            "label": "Help"
          },
          {
            "value": "home",
            "label": "Home"
          },
          {
            "value": "laptop",
            "label": "Laptop"
          },
          {
            "value": "laundry",
            "label": "Laundry"
          },
          {
            "value": "lights",
            "label": "Lights"
          },
          {
            "value": "location",
            "label": "Location"
          },
          {
            "value": "lock",
            "label": "Lock"
          },
          {
            "value": "menu-dots",
            "label": "Menu dots"
          },
          {
            "value": "microphone",
            "label": "Microphone"
          },
          {
            "value": "money",
            "label": "Money"
          },
          {
            "value": "oven",
            "label": "Oven"
          },
          {
            "value": "phone",
            "label": "Phone"
          },
          {
            "value": "pine",
            "label": "Pine"
          },
          {
            "value": "planet",
            "label": "Planet"
          },
          {
            "value": "promo",
            "label": "Promo"
          },
          {
            "value": "receiver",
            "label": "Receiver"
          },
          {
            "value": "returns",
            "label": "Returns"
          },
          {
            "value": "sale-tag",
            "label": "Sale tag"
          },
          {
            "value": "search",
            "label": "Search"
          },
          {
            "value": "secure",
            "label": "Secure"
          },
          {
            "value": "security",
            "label": "Security"
          },
          {
            "value": "share",
            "label": "Share"
          },
          {
            "value": "ship-truck",
            "label": "Shipping truck"
          },
          {
            "value": "speaker",
            "label": "Speaker"
          },
          {
            "value": "star",
            "label": "Star"
          },
          {
            "value": "support",
            "label": "Support"
          },
          {
            "value": "trophy",
            "label": "Trophy"
          },
          {
            "value": "tv",
            "label": "TV"
          },
          {
            "value": "user",
            "label": "User"
          },
          {
            "value": "verified",
            "label": "Verified"
          },
          {
            "value": "video",
            "label": "Video"
          },
          {
            "value": "watch",
            "label": "Watch"
          }
        ]
      }
      ]
    }
  ]
}
{% endschema %}
<style>
.size-box-options {
  display: none;
  position: absolute;
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 100;
  margin-top: 4px;
}

.size-box-options.open {
  display: block;
}

.size-box-selected {
    border: 1px solid black;
    padding: 1rem;
    display: flex;
    cursor: pointer;
    justify-content: space-between;
}

.size-box-option {
  padding: 1rem;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}

.size-box-option:hover {
  background: #f9f9f9;
}
button#requestSize {
    width: 100%;
}

.value-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

  .value-note {
    text-decoration: underline;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll('.js-size-box-dropdown').forEach(function (dropdown) {
    const toggle = dropdown.querySelector('.js-size-toggle');
    const options = dropdown.querySelector('.js-size-options');
    const input = dropdown.querySelector('input[type="hidden"]');
    const selectedMain = dropdown.querySelector('.selected-main');
    const selectedNote = dropdown.querySelector('.selected-note');

    const addToCartBtn = document.querySelector('#addToCart');
    const requestBtn = document.querySelector('#requestSize');

    toggle.addEventListener('click', function () {
      options.classList.toggle('open');
    });

    dropdown.querySelectorAll('.js-size-option').forEach(function (option) {
      option.addEventListener('click', function () {
        const value = option.getAttribute('data-value');
        const noteText = option.querySelector('.value-note')?.textContent || '';

        input.value = value;
        selectedMain.textContent = value;
        selectedNote.textContent = noteText;

        const isRequest = option.classList.contains('size-request');

        if (addToCartBtn && requestBtn) {
          if (isRequest) {
            addToCartBtn.style.display = 'none';
            requestBtn.style.display = 'inline-block';
          } else {
            addToCartBtn.style.display = 'inline-block';
            requestBtn.style.display = 'none';
          }
        }

        options.classList.remove('open');
      });
    });
document.querySelectorAll('.js-size-option').forEach(option => {
  option.addEventListener('click', function () {
    const selectedValue = this.getAttribute('data-value');

    const dropdown = this.closest('.js-size-box-dropdown');
    const selectedMain = dropdown.querySelector('.selected-main');
    if (selectedMain) {
      selectedMain.textContent = selectedValue;
    }

    const hiddenInput = dropdown.querySelector('input[type="hidden"]');
    if (hiddenInput) {
      hiddenInput.value = selectedValue;
    }

    const optionIndex = dropdown.dataset.optionIndex;
    const sizeLabel = document.querySelector(`#selected-option-${optionIndex}`);
    if (sizeLabel) {
      sizeLabel.textContent = selectedValue;
    }
  });
});
const allInputs = document.querySelectorAll('.js-size-box-dropdown input[type="hidden"]');
const allValues = Array.from(allInputs).map(input => input.value);

const matchingVariant = window.ProductData.variants.find(variant => {
  return variant.options.every((opt, idx) => opt === allValues[idx]);
});

const variantIdInput = document.querySelector('.js-variant-id');
if (variantIdInput && matchingVariant) {
  variantIdInput.value = matchingVariant.id;
}

   
    document.addEventListener('click', function (e) {
      if (!dropdown.contains(e.target)) {
        options.classList.remove('open');
      }
    });
  });
});

</script>
                <script>
                
document.addEventListener("DOMContentLoaded", function () {
  var carousel = document.querySelector('.js-carousel');
  var progressBar = document.querySelector('.progress-bar');

  if (carousel && progressBar) {
    var flkty = Flickity.data(carousel); 

    if (flkty) {
      flkty.on('scroll', function (progress) {
        progress = Math.max(0, Math.min(1, progress));
        progressBar.style.width = (progress * 100) + '%';
      });
    }
  }
});

                </script>
{% comment %}
<script>
  (function() {

    document.querySelectorAll('.image-zoom-container').forEach(wrapper => {
    

      const icon = wrapper.querySelector('.zoom-icon');
      const img  = wrapper.querySelector('img');

      if (!icon || !img) {
        return;
      }

      const plusSVG = `
        <svg width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <line x1="8" y1="3" x2="8" y2="13" stroke="#000" stroke-width="1"/>
          <line x1="3" y1="8" x2="13" y2="8" stroke="#000" stroke-width="1"/>
        </svg>
      `;

      const minusSVG = `
        <svg width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <line x1="3" y1="8" x2="13" y2="8" stroke="#000" stroke-width="1"/>
        </svg>
      `;

      // Startzustand: Plus
      icon.innerHTML = plusSVG;

      wrapper.addEventListener('mousemove', function(e) {
        const rect = wrapper.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        icon.style.left = x + 'px';
        icon.style.top = y + 'px';
        icon.style.opacity = 1;

        img.style.transformOrigin = `${x}px ${y}px`;
      });

      wrapper.addEventListener('mouseleave', function() {
        icon.style.opacity = 0;
      });

      wrapper.addEventListener('click', function() {
        wrapper.classList.toggle('zoomed');
        icon.innerHTML = wrapper.classList.contains('zoomed') ? minusSVG : plusSVG;
      });
    });
  })();
</script>
                {% endcomment %}

        


                <style>
                  @media screen and (max-width: 768px) {

                    label.swatches__form--label,
                    label.swatches__form--label:hover {
                     border: none;
        display: flex;
        justify-content: space-between;
                    }
  .variant-fake-dropdown-wrapper {
    position: relative;
    width: 100%;
  }

  .variant-fake-dropdown-toggle {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px solid #ccc;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: black;
  }

  .variant-fake-dropdown-options {
    position: absolute;
    top: 82%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    display: none;
    z-index: 100;
  }

  .variant-fake-dropdown-wrapper.open .variant-fake-dropdown-options {
    display: flex;
    flex-direction: column;
  }

  .variant-fake-dropdown-label {
    flex-grow: 1;
  }

  .swatches__form--label {
    display: block;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
  }

  .swatches__form--input {
    display: none;
  }
}
button.variant-fake-dropdown-toggle:hover {
    color: black;
    background: white;
}

                  span.variant-fake-dropdown-icon {
                    display: flex;
                  }
                </style>
<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelectorAll('.variant-fake-dropdown-toggle').forEach(function (toggle) {
    toggle.addEventListener('click', function () {
      const wrapper = toggle.closest('.variant-fake-dropdown-wrapper');
      wrapper.classList.toggle('open');
    });
  });

  document.querySelectorAll('.variant-fake-dropdown-options .swatches__form--label').forEach(function (label) {
    label.addEventListener('click', function () {
      const wrapper = label.closest('.variant-fake-dropdown-wrapper');
      const text = label.textContent.trim();
      wrapper.querySelector('.variant-fake-dropdown-label').textContent = text;
      wrapper.classList.remove('open');
    });
  });
});
</script>
<script>
                
document.addEventListener('DOMContentLoaded', function () {
  const variantSelectors = document.querySelectorAll('select[name="id"], input[name="id"][type="radio"]');

  variantSelectors.forEach(selector => {
    selector.addEventListener('change', function () {
      const newVariantId = this.value;
      const wishlistDiv = document.querySelector('.wishlist-engine');

      if (wishlistDiv && newVariantId) {
        wishlistDiv.setAttribute('data-variant_id', newVariantId);

        // Optional: neu initialisieren, wenn die App es erfordert
        if (typeof WishlistEngine !== 'undefined' && typeof WishlistEngine.reInit === 'function') {
          WishlistEngine.reInit(); // oder eine ähnliche Methode
        }
      }
    });
  });
});
</script>

            
<script>
  function removeThemeGallery() {
    const themeGallery = document.querySelector('.product-gallery--theme');
    if (themeGallery) {
      themeGallery.remove();
    }
  }

  function initZoomOnWrapper(wrapper, img, zoomIcon) {

    if (wrapper.classList.contains('zoom-initialized')) {
      return;
    }
    wrapper.classList.add('zoom-initialized');

    wrapper.addEventListener('mouseenter', () => {
    });

    wrapper.addEventListener('mousemove', function (e) {
      const rect = wrapper.getBoundingClientRect();
      const x = e.clientX - rect.left;
      const y = e.clientY - rect.top;

      zoomIcon.style.left = `${e.clientX}px`;
      zoomIcon.style.top = `${e.clientY}px`;
      zoomIcon.style.opacity = 1;

      img.style.transformOrigin = `${x}px ${y}px`;
    });

    wrapper.addEventListener('mouseleave', () => {
      zoomIcon.style.opacity = 0;
    });

    wrapper.addEventListener('click', () => {
      wrapper.classList.toggle('zoomed');
      const isZoomed = wrapper.classList.contains('zoomed');
      img.style.transform = isZoomed ? 'scale(2)' : 'scale(1)';
      zoomIcon.innerHTML = isZoomed
        ? `<svg width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <line x1="3" y1="8" x2="13" y2="8" stroke="#000" stroke-width="1"/>
           </svg>`
        : `<svg width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
             <line x1="8" y1="3" x2="8" y2="13" stroke="#000" stroke-width="1"/>
             <line x1="3" y1="8" x2="13" y2="8" stroke="#000" stroke-width="1"/>
           </svg>`;
    });
  }

  function initGlobalZoomIcon() {

    let zoomIcon = document.querySelector('.zoom-icon-global');
    if (!zoomIcon) {
      zoomIcon = document.createElement('div');
      zoomIcon.className = 'zoom-icon zoom-icon-global';
      zoomIcon.innerHTML = `
        <svg width="12" height="12" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
          <line x1="8" y1="3" x2="8" y2="13" stroke="#000" stroke-width="1"/>
          <line x1="3" y1="8" x2="13" y2="8" stroke="#000" stroke-width="1"/>
        </svg>`;
      document.body.appendChild(zoomIcon);
    }

    document.querySelectorAll('.image-zoom-container').forEach(wrapper => {
      const img = wrapper.querySelector('img');
      if (!img) return;

      const init = () => initZoomOnWrapper(wrapper, img, zoomIcon);

      if (img.complete) {
        console.log('[Zoom] Bild bereits geladen');
        init();
      } else {
        img.addEventListener('load', () => {
          init();
        });
      }
    });
  }

  function waitForStarAppsGalleryAndInitZoom() {
    const starAppsGallery = document.querySelector('.js-product-gallery.starapps');

    if (starAppsGallery) {
      initGlobalZoomIcon();
      return;
    }

    const observer = new MutationObserver((mutations, obs) => {
      const gallery = document.querySelector('.js-product-gallery.starapps');
      if (gallery) {
        obs.disconnect();
        setTimeout(() => {
          initGlobalZoomIcon();
        }, 200);
      }
    });

    observer.observe(document.body, { childList: true, subtree: true });
  }

  document.addEventListener('DOMContentLoaded', () => {
    removeThemeGallery();
    waitForStarAppsGalleryAndInitZoom();
  });
</script>