/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:0 Unexpected "{"
Line 17:1 Expected identifier but found "%"
Line 18:0 Unexpected "{"
Line 18:1 Expected identifier but found "%"
Line 19:0 Unexpected "{"
Line 19:1 Expected identifier but found "%"
Line 20:0 Unexpected "{"
Line 20:1 Expected identifier but found "%"
... and 2423 more hidden warnings

**/
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign is_en = false -%}
{%- assign is_it = false -%}
{%- assign _l_it = localization.language.iso_code | default: request.locale.iso_code | downcase -%}
{%- if _l_it contains 'it' -%}{%- assign is_it = true -%}{%- endif -%}
{%- if request.locale.iso_code == 'en' or request.path contains '/en-eu' or request.path contains '/en-' -%}{%- assign is_en = true -%}{%- endif -%}
{%- assign is_usa = false -%}
{%- if request.path contains '/en-wt' or localization.country.iso_code == 'US' -%}{%- assign is_usa = true -%}{%- assign is_en = true -%}{%- endif -%}

{%- comment -%} PDF-Links: auf EN die englische Fassung, sonst die deutsche {%- endcomment -%}
{%- assign kpd_cert_pdf = section.settings.cert_pdf -%}
{%- if is_en and section.settings.cert_pdf_en != blank -%}{%- assign kpd_cert_pdf = section.settings.cert_pdf_en -%}{%- endif -%}
{%- assign kpd_guide_pdf = section.settings.guide_pdf -%}
{%- if is_en and section.settings.guide_pdf_en != blank -%}{%- assign kpd_guide_pdf = section.settings.guide_pdf_en -%}{%- endif -%}

<style>
/* ---- Block 0 aus main-product-keramik.liquid ---- */
.kpd-steps-mobile { display: none; }

@media (max-width: 768px) {
  .kpd-steps-desktop { display: none !important; }

  .kpd-steps-mobile { display: block; }

  .kpd-steps-stack {
    position: relative;
  }

  /* Jede Sticky-Section ist so hoch wie 60vh damit man scrollen kann */
  .kpd-step-sticky {
    height: 70vh;
    display: flex;
    align-items: flex-start;
    position: relative;
  }

  /* Die eigentliche Karte klebt oben fest */
  .kpd-step-card {
    position: sticky;
    top: 80px;
    background: #FFFFFF;
    border: 1px solid #E4E0D8;
    padding: 36px 24px;
    text-align: center;
    width: 100%;
    border-radius: 2px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    z-index: 1;
  }

  /* Jede Karte liegt über der vorherigen */
  .kpd-step-sticky:nth-child(1) .kpd-step-card { z-index: 1; }
  .kpd-step-sticky:nth-child(2) .kpd-step-card { z-index: 2; }
  .kpd-step-sticky:nth-child(3) .kpd-step-card { z-index: 3; }

  .kpd-step-number {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F5F3EF;
    border: 1px solid #E4E0D8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 300;
    color: #9A7B3C;
  }
  .kpd-step-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #2D2D2D;
    font-family: 'DM Sans', sans-serif;
    margin-bottom: 12px;
  }
  .kpd-step-text {
    font-size: 14px;
    color: #8A8880;
    line-height: 1.75;
    font-weight: 300;
    font-family: 'DM Sans', sans-serif;
  }
}

/* ---- Block 1 aus main-product-keramik.liquid ---- */
@media (max-width: 768px) {
          #kpd-guarantee-track {
            grid-template-columns: none !important;
            display: flex !important;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 0 !important;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
          }
          #kpd-guarantee-track::-webkit-scrollbar { display: none; }
          .kpd-guarantee-item {
            flex: 0 0 100% !important;
            scroll-snap-align: center;
            padding: 0 12px;
          }
          .kpd-guarantee-dots { display: flex !important; }
        }

/* ---- Block 3 aus main-product-keramik.liquid ---- */
@media (max-width: 768px) {
          .kpd-cert-grid { grid-template-columns:1fr !important; justify-items:center; text-align:center; }
          .kpd-cert-specs { grid-template-columns:1fr 1fr !important; }
        }

/* ---- Block 4 aus main-product-keramik.liquid ---- */
@media (max-width: 768px) {
          .kpd-box-grid { grid-template-columns: 1fr !important; }
          .kpd-box-grid > div { order: unset !important; }
        }

/* ---- Block 5 aus main-product-keramik.liquid ---- */
/* ── Overflow-Sicherung ──────────────────────────────────────────
   Verhindert, dass Inhalte horizontal ausbrechen und die Seite auf
   schmalen Displays seitlich scrollbar oder abgeschnitten wird. */
.kpd-product-section {
  max-width: 100%;
  overflow-x: clip;
}
/* Medien nie ueber den Container hinaus */
.kpd-product-section img,
.kpd-product-section video,
.kpd-product-section iframe {
  max-width: 100%;
}
/* Lange Woerter / URLs umbrechen statt die Zeile zu sprengen */
.kpd-product-section p,
.kpd-product-section h1,
.kpd-product-section h2,
.kpd-product-section h3,
.kpd-product-section li {
  overflow-wrap: break-word;
}
/* Grid- und Flex-Kinder duerfen nicht an ihrem Inhalt haengen bleiben.
   Ohne min-width:0 erzwingt breiter Inhalt eine zu breite Spalte. */
.kpd-product-section .kpd-grid > *,
.kpd-product-section .kpd-info > * {
  min-width: 0;
}

.kpd-images { position:relative; overflow-x:clip; }
.kpd-badge-mobile { display:none; }
.kpd-sold-badge-mobile { display:none; }
.kpd-cert-seal-mobile { display:none; }
.kpd-carousel-wrap { display:contents; }
.kpd-grid { display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:start; }
@keyframes kpd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.kpd-main-image {
  position:relative;
  background:transparent;
  overflow:hidden;
  border:none;
  margin-bottom:12px;
  /* Safari-compatible square aspect ratio */
  width:100%;
  padding-bottom:100%;
  height:0;
}
.kpd-main-image img,
.kpd-main-image #kpd-featured-img {
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  object-fit:contain;
}
.kpd-main-image .kpd-badge {
  position:absolute;
  top:12px;left:12px;
  z-index:2;
}
.kpd-badge { position:absolute;top:16px;left:16px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;padding:5px 12px;font-weight:600;font-family:'DM Sans',sans-serif;background:#2D2D2D;color:#FAFAF8; }
.kpd-first-only, .kpd-first-only-mobile { transition:opacity .45s ease; }

.kpd-thumbs { display:flex;flex-wrap:wrap;gap:8px; }
.kpd-mobile-carousel { display:none; }
.kpd-video-btn-mobile { display:none; }
.kpd-carousel-dots { display:none; }

/* Lightbox / Bild-Vergroesserung (global, per JS getoggelt) */
.kpd-lightbox {
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(20,18,16,.94);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  align-items:center;
  justify-content:center;
}
.kpd-lightbox.open { display:flex; }
.kpd-lightbox-track {
  width:100%;
  height:100%;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.kpd-lightbox-track::-webkit-scrollbar { display:none; }
.kpd-lightbox-cell {
  flex:0 0 100%;
  width:100%;
  height:100%;
  scroll-snap-align:center;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  box-sizing:border-box;
}
.kpd-lightbox-img {
  max-width:94vw;
  max-height:86vh;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:4px;
  background:#F5F3EF;
}
.kpd-lightbox-video {
  max-width:94vw;
  max-height:86vh;
  width:auto;
  height:auto;
  border-radius:4px;
  background:#000;
}
.kpd-lightbox-dots {
  position:absolute;
  bottom:18px;left:0;right:0;
  display:flex;justify-content:center;gap:6px;
  z-index:2;
}
.kpd-lightbox-dot {
  width:6px;height:6px;border-radius:50%;
  background:rgba(255,255,255,.4);transition:background .2s,width .2s;
}
.kpd-lightbox-dot.active { background:#FFFFFF;width:18px;border-radius:3px; }
.kpd-lightbox-close {
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  width:42px;height:42px;
  border:none;border-radius:50%;
  background:rgba(255,255,255,.16);
  color:#FFFFFF;
  font-size:28px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.kpd-thumb { width:72px;height:72px;border:1px solid #E4E0D8;background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#F5F3EF;cursor:pointer;transition:border-color .2s;flex-shrink:0; }
.kpd-thumb:hover { border-color:#8A8880; }
.kpd-thumb--active { border-color:#2D2D2D !important; }
.kpd-colors { display:flex;flex-wrap:wrap;gap:10px; }
.kpd-color-btn { width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer;position:relative;transition:transform .2s,border-color .2s;flex-shrink:0; }
.kpd-color-btn:hover { transform:scale(1.15); }
.kpd-option-btn { transition: all .2s; }
.kpd-option-btn--active { border-color: #2D2D2D !important; background: #2D2D2D !important; color: #FFFFFF !important; }
.kpd-option-btn:hover { border-color: #2D2D2D; }
.kpd-color-btn--active { transform:scale(1.05);box-shadow:0 0 0 2px #FFFFFF,0 0 0 3.5px #2D2D2D; }
.kpd-accordion { border-bottom:1px solid #E4E0D8; }
.kpd-accordion-summary { display:flex;justify-content:space-between;align-items:center;padding:16px 0;cursor:pointer;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#2D2D2D;font-weight:500;font-family:'DM Sans',sans-serif;list-style:none;outline:none; }
.kpd-accordion-summary::-webkit-details-marker { display:none; }
.kpd-accordion-icon { font-size:20px;color:#9A7B3C;font-weight:300;transition:transform .3s;line-height:1; }
details[open] .kpd-accordion-icon { transform:rotate(45deg); }
.kpd-accordion-body { padding:0 0 18px;font-size:14px;color:#8A8880;line-height:1.8;font-weight:300;font-family:'DM Sans',sans-serif; }

@media (max-width: 768px) {
  .kpd-upsell-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .hiw-wrapper { grid-template-columns: 1fr !important; }
  .kpd-quality-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .kpd-quality-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .kpd-grid { grid-template-columns:1fr;gap:0; }
  .kpd-breadcrumb { display:none; }
  .kpd-main-image { border-left:none;border-right:none;border-top:none; }
  /* Mobile: statisches Hauptbild + Thumbnails aus, Swipe-Karussell an */
  .kpd-main-image { display:none !important; }
  .kpd-thumbs-wrap { display:none !important; }
  .kpd-badge-mobile {
    display:block;
    position:absolute;
    top:12px;left:12px;
    z-index:4;
    font-size:9px;letter-spacing:.18em;text-transform:uppercase;
    padding:5px 12px;font-weight:600;font-family:'DM Sans',sans-serif;
    background:#2D2D2D;color:#FAFAF8;
  }
  .kpd-carousel-wrap {
    display:block;
    position:relative;
  }
  .kpd-cert-seal-mobile {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:absolute;
    bottom:14px;right:14px;
    width:48px;height:48px;
    min-width:48px;
    aspect-ratio:1/1;
    flex-shrink:0;
    border-radius:50%;
    background:rgba(45,45,45,.92);
    border:1px solid #9A7B3C;
    text-decoration:none;
    z-index:4;
    box-sizing:border-box;
    overflow:hidden;
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
  }
  .kpd-sold-badge-mobile {
    display:flex;
    position:absolute;
    top:12px;right:0;
    align-items:center;gap:6px;
    background:#E8443A;color:#FFFFFF;
    font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;
    padding:6px 12px 6px 14px;border-radius:20px 0 0 20px;
    z-index:4;
    opacity:0;
    transform:translateX(100%);
    transition:transform .6s cubic-bezier(.16,1,.3,1), opacity .4s ease;
  }
  .kpd-mobile-carousel {
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:0;
    aspect-ratio:1/1;
    background:#F5F3EF;
    position:relative;
  }
  .kpd-mobile-carousel::-webkit-scrollbar { display:none; }
  .kpd-video-btn-mobile { display:flex !important; }
  .kpd-mobile-slide {
    flex:0 0 100%;
    width:100%;
    height:100%;
    scroll-snap-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#F5F3EF;
  }
  .kpd-mobile-slide img {
    width:100%;
    height:100%;
    object-fit:contain;
    box-sizing:border-box;
  }
  .kpd-mobile-slide video {
    width:100%;
    height:100%;
    object-fit:contain;
    background:#F5F3EF;
  }
  .kpd-carousel-dots {
    display:flex;
    justify-content:center;
    gap:6px;
    padding:12px 0 4px;
  }
  .kpd-carousel-dot {
    width:6px;height:6px;border-radius:50%;
    background:#D4D0C8;transition:background .2s,width .2s;
  }
  .kpd-carousel-dot.active { background:#2D2D2D;width:18px;border-radius:3px; }

  .kpd-color-btn { width:40px;height:40px; }
  .kpd-colors { gap:12px; }
  .kpd-trust-grid { grid-template-columns:1fr !important; }
  .kpd-steps-grid { grid-template-columns:1fr !important; }
  .kpd-material-grid { grid-template-columns:1fr !important; }
  .kpd-reviews-grid { grid-template-columns:1fr !important; }
  .kpd-related-grid { grid-template-columns:1fr 1fr !important; }
  .kpd-qty-row { flex-wrap:wrap; }
}
@media (min-width:481px) and (max-width:768px) {
  .kpd-reviews-grid { grid-template-columns:1fr 1fr !important; }
}

/* ── FAQ Section ── */
.kpd-faq-item {
  border-bottom: 1px solid #E4E0D8;
  background: #FFFFFF;
}
.kpd-faq-item:first-of-type { border-top: 1px solid #E4E0D8; }
.kpd-faq-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  cursor: pointer;
  font-size: 14px;
  color: #2D2D2D;
  font-weight: 400;
  font-family: 'DM Sans', sans-serif;
  list-style: none;
  outline: none;
  gap: 16px;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
.kpd-faq-summary::-webkit-details-marker { display: none; }
.kpd-faq-summary:hover { color: #9A7B3C; }
.kpd-faq-summary span:first-child { flex: 1; line-height: 1.5; }
.kpd-faq-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #E4E0D8;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9A7B3C;
  transition: background .25s, transform .35s;
}
details[open] .kpd-faq-icon {
  background: #9A7B3C;
  color: #FFFFFF;
  transform: rotate(45deg);
  border-color: #9A7B3C;
}
details[open] .kpd-faq-summary { color: #9A7B3C; }
.kpd-faq-body {
  padding: 0 28px 24px;
  font-size: 14px;
  color: #8A8880;
  line-height: 1.8;
  font-weight: 300;
  font-family: 'DM Sans', sans-serif;
}
.kpd-faq-body p { margin: 0; }
.kpd-faq-body ul { margin: 8px 0 0 16px; padding: 0; }
.kpd-faq-body li { margin-bottom: 6px; }
@media (max-width: 768px) {
  .kpd-faq-summary { padding: 18px 20px; font-size: 13px; }
  .kpd-faq-body { padding: 0 20px 18px; }
}

/* ---- Block 6 aus main-product-keramik.liquid ---- */
@media (max-width: 768px) {
  .kpd-sticky-bar { bottom: 0 !important; }
}
.kpd-sticky-bar { display:none !important; }
/* Push ProvenExpert and chat above sticky bar */
#provenexpert_circle_widget_qnvdc { bottom: 20px !important; }
</style>
<div class="kpd-product-section" style="background:#FFFFFF;overflow-x:clip;">

  {%- comment -%} BREADCRUMB {%- endcomment -%}
  <div class="kpd-breadcrumb" style="border-bottom:1px solid #E4E0D8;padding:14px clamp(20px,4vw,64px);">
    <div style="max-width:1320px;margin:0 auto;font-size:11px;color:#B8B5AF;letter-spacing:.08em;font-family:'DM Sans',sans-serif;">
      <a href="/" style="color:#B8B5AF;text-decoration:none;">Home</a>
      <span style="margin:0 8px;opacity:.5;">›</span>
      <a href="{{ product.collections.first.url }}" style="color:#B8B5AF;text-decoration:none;">{{ product.collections.first.title | default: 'Armbänder' }}</a>
      <span style="margin:0 8px;opacity:.5;">›</span>
      <span style="color:#8A8880;">{{ product.title }}</span>
    </div>
  </div>

  {%- comment -%} HAUPT-LAYOUT {%- endcomment -%}
  <div style="max-width:1320px;margin:0 auto;padding:clamp(20px,4vw,72px) clamp(16px,4vw,64px);">
    <div class="kpd-grid">

      {%- comment -%} LINKE SPALTE: BILDER {%- endcomment -%}
      <div class="kpd-images">
        {%- assign product_videos = product.media | where: 'media_type', 'video' -%}
        {%- if is_en or is_it -%}{%- assign product_videos = '' | split: ',' -%}{%- endif -%}
        {%- assign display_image = current_variant.image | default: product.featured_image -%}
        {%- comment -%}
          LCP-Preload: Auf Mobil ist .kpd-main-image per CSS versteckt; das sichtbare
          Bild baut erst JS als erste Karussell-Slide. Ohne diesen Hinweis startet
          der Download des wichtigsten Bildes viel zu spaet. Gleiche URL wie die
          erste Slide, der Browser laedt also nur einmal.
        {%- endcomment -%}
        {%- if display_image != blank -%}
          <link rel="preload" as="image" href="{{ display_image | image_url: width: 1000 }}" fetchpriority="high">
        {%- endif -%}

        <div class="kpd-main-image" id="kpd-main-image">
          {%- if display_image -%}
            <img src="{{ display_image | image_url: width: 1000 }}" alt="{{ product.title | escape }}"
              id="kpd-featured-img" loading="eager"
              style="transition:opacity 0.18s ease, transform 0.18s ease;transform-origin:center;">
          {%- endif -%}
          {%- if product_videos.size > 0 -%}
            {%- assign first_video = product_videos.first -%}
            <video id="kpd-featured-video" controls playsinline preload="metadata"
              poster="{{ first_video.preview_image | image_url: width: 1000 }}"
              style="display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#F5F3EF;padding:24px;box-sizing:border-box;">
              {%- for src in first_video.sources -%}
                <source src="{{ src.url }}" type="{{ src.mime_type }}">
              {%- endfor -%}
            </video>
          {%- endif -%}
          <span class="kpd-badge kpd-first-only">{{ section.settings.badge_text | default: 'Keramik Armband' }}</span>
          {%- if section.settings.show_cert_seal -%}
            {%- assign seal_tag = 'div' -%}
            {%- if kpd_cert_pdf != blank -%}{%- assign seal_tag = 'a' -%}{%- endif -%}
            <{{ seal_tag }}
              {% if seal_tag == 'a' %}href="{{ kpd_cert_pdf }}" target="_blank" rel="noopener"{% endif %}
              class="kpd-cert-seal kpd-first-only"
              title="{% if is_en %}97% biobased carbon – ASTM D6866, independently tested{% else %}97 % biobasierter Kohlenstoff – ASTM D6866, unabhängig geprüft{% endif %}"
              style="position:absolute;bottom:16px;right:16px;z-index:3;width:74px;height:74px;border-radius:50%;background:rgba(45,45,45,.92);border:1px solid #9A7B3C;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:transform .25s;{% if seal_tag == 'a' %}cursor:pointer;{% endif %}"
              {% if seal_tag == 'a' %}onmouseover="this.style.transform='scale(1.06)'" onmouseout="this.style.transform='scale(1)'"{% endif %}>
              <span style="font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;font-weight:300;color:#9A7B3C;line-height:1;">
                {{ section.settings.cert_seal_number | default: '97%' }}
              </span>
              <span style="font-family:'DM Sans',sans-serif;font-size:6.5px;letter-spacing:.12em;text-transform:uppercase;color:#C4C2BA;margin-top:3px;text-align:center;line-height:1.4;padding:0 6px;">
                {%- if is_it -%}Biobasato<br>certificato{%- elsif is_en -%}Biobased<br>Carbon{%- else -%}Biobasiert<br>geprüft{%- endif -%}
              </span>
            </{{ seal_tag }}>
          {%- endif -%}
          <div id="kpd-sold-badge" style="position:absolute;top:12px;right:12px;background:#E8443A;color:#FFFFFF;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:700;letter-spacing:.06em;padding:6px 12px 6px 14px;border-radius:20px 0 0 20px;display:flex;align-items:center;gap:6px;transform:translateX(100%);transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s ease;z-index:3;">
            <svg width="10" height="10" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
            <span id="kpd-sold-count">2</span>{%- if is_it -%} VENDUTI OGGI{%- elsif is_en -%} SOLD TODAY{%- else -%} HEUTE VERKAUFT{%- endif -%}
          </div>
          {%- comment -%} PLAY-BUTTON unten links (nur wenn Produktvideo-URL gesetzt) {%- endcomment -%}
          {%- assign kpd_video_url = section.settings.product_video_url | default: '' -%}
          {%- if kpd_video_url != blank -%}
            <button type="button" onclick="kpdOpenProductVideo()" class="kpd-first-only" aria-label="{% if is_it %}Riproduci il video{% elsif is_en %}Play video{% else %}Video abspielen{% endif %}"
              style="position:absolute;bottom:16px;left:16px;z-index:3;display:flex;align-items:center;justify-content:center;width:52px;height:52px;background:rgba(154,123,60,.95);border:none;cursor:pointer;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.22);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:transform .2s,background .2s,opacity .45s ease;-webkit-tap-highlight-color:transparent;"
              onmouseover="this.style.transform='scale(1.08)';this.style.background='rgba(45,45,45,.95)'"
              onmouseout="this.style.transform='scale(1)';this.style.background='rgba(154,123,60,.95)'">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="#FAFAF8" style="margin-left:2px;"><path d="M8 5v14l11-7z"/></svg>
            </button>
          {%- endif -%}
        </div>
        <div class="kpd-carousel-wrap">
        <div class="kpd-mobile-carousel" id="kpd-mobile-carousel" aria-label="Produktbilder"></div>
        <span class="kpd-badge kpd-badge-mobile kpd-first-only-mobile">{{ section.settings.badge_text | default: 'Keramik Armband' }}</span>
        {%- if section.settings.show_cert_seal -%}
          {%- assign mseal_tag = 'div' -%}
          {%- if kpd_cert_pdf != blank -%}{%- assign mseal_tag = 'a' -%}{%- endif -%}
          <{{ mseal_tag }}
            {% if mseal_tag == 'a' %}href="{{ kpd_cert_pdf }}" target="_blank" rel="noopener"{% endif %}
            class="kpd-cert-seal-mobile kpd-first-only-mobile"
            title="{% if is_it %}97% di carbonio biobasato – ASTM D6866{% elsif is_en %}97% biobased carbon – ASTM D6866{% else %}97 % biobasierter Kohlenstoff – ASTM D6866{% endif %}">
            <span style="font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;font-weight:300;color:#9A7B3C;line-height:1;">
              {{ section.settings.cert_seal_number | default: '97%' }}
            </span>
            <span style="font-family:'DM Sans',sans-serif;font-size:4px;letter-spacing:.08em;text-transform:uppercase;color:#C4C2BA;margin-top:1px;text-align:center;line-height:1.35;padding:0 3px;">
              {%- if is_it -%}Biobasato<br>certificato{%- elsif is_en -%}Biobased<br>Carbon{%- else -%}Biobasiert<br>geprüft{%- endif -%}
            </span>
          </{{ mseal_tag }}>
        {%- endif -%}
        <div class="kpd-sold-badge-mobile" id="kpd-sold-badge-mobile">
          <svg width="10" height="10" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
          <span id="kpd-sold-count-mobile">2</span>{%- if is_it -%} VENDUTI OGGI{%- elsif is_en -%} SOLD TODAY{%- else -%} HEUTE VERKAUFT{%- endif -%}
        </div>
        {%- if kpd_video_url != blank -%}
          <button type="button" onclick="kpdOpenProductVideo()" class="kpd-video-btn-mobile kpd-first-only-mobile" aria-label="{% if is_it %}Riproduci il video{% elsif is_en %}Play video{% else %}Video abspielen{% endif %}"
            style="position:absolute;bottom:14px;left:14px;z-index:4;align-items:center;justify-content:center;width:48px;height:48px;background:rgba(154,123,60,.95);border:none;cursor:pointer;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.24);-webkit-tap-highlight-color:transparent;">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="#FAFAF8" style="margin-left:2px;"><path d="M8 5v14l11-7z"/></svg>
          </button>
        {%- endif -%}
        </div>
        <div class="kpd-thumbs-wrap">
        <div class="kpd-thumbs" id="kpd-thumbs">
          {%- for image in product.images -%}
            <button class="kpd-thumb"
              data-img-src="{{ image | image_url: width: 1000 }}"
              data-img-alt="{{ image.alt | escape }}"
              onclick="kpdSetImage('{{ image | image_url: width: 1000 }}', this)"
              style="background-image:url('{{ image | image_url: width: 200 }}');display:none;">
            </button>
          {%- endfor -%}
          {%- if product_videos.size > 0 -%}
            {%- assign first_video = product_videos.first -%}
            <button class="kpd-thumb kpd-thumb-video" type="button"
              onclick="kpdShowVideo(this)"
              style="background-image:url('{{ first_video.preview_image | image_url: width: 200 }}');background-size:cover;position:relative;">
              <span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="#FFFFFF"><path d="M8 5v14l11-7z"/></svg>
              </span>
            </button>
          {%- endif -%}
        </div>
        </div>
        {%- comment -%} INFO-BUTTONS: Zertifikat, Anleitung {%- endcomment -%}
{%- if kpd_cert_pdf != blank -%}
        <a href="{{ kpd_cert_pdf }}" target="_blank" rel="noopener" class="kpd-cert-trigger" style="display:flex;align-items:center;gap:12px;width:100%;background:#FFFFFF;border:1px solid #E4E0D8;padding:13px 15px;margin-top:14px;cursor:pointer;text-align:left;transition:border-color .2s;font-family:'DM Sans',sans-serif;box-sizing:border-box;text-decoration:none;" onmouseover="this.style.borderColor='#9A7B3C'" onmouseout="this.style.borderColor='#E4E0D8'">
          <span style="flex-shrink:0;display:inline-flex;width:40px;height:40px;border-radius:50%;background:#2D2D2D;align-items:center;justify-content:center;">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/><path d="M8.5 13.5 7 22l5-2.5L17 22l-1.5-8.5"/></svg>
          </span>
          <span style="flex:1;">
            <span style="display:block;font-size:14px;font-weight:600;color:#2D2D2D;line-height:1.2;">{%- if is_it -%}Certificato dei materiali{%- elsif is_en -%}Material certificate{%- else -%}Materialzertifikat{%- endif -%}</span>
            <span style="display:block;font-size:12px;color:#8A8880;margin-top:1px;">{%- if is_it -%}97% di carbonio biobasato · ASTM D6866{%- elsif is_en -%}97% biobased carbon · ASTM D6866{%- else -%}97 % biobasierter Kohlenstoff · ASTM D6866{%- endif -%}</span>
          </span>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><polyline points="9 18 15 12 9 6"/></svg>
        </a>
        {%- endif -%}
{%- if kpd_guide_pdf != blank -%}
        <a href="{{ kpd_guide_pdf }}" target="_blank" rel="noopener" class="kpd-pdf-trigger" style="display:flex;align-items:center;gap:12px;width:100%;background:#FFFFFF;border:1px solid #E4E0D8;padding:13px 15px;margin-top:10px;cursor:pointer;text-align:left;transition:border-color .2s;font-family:'DM Sans',sans-serif;box-sizing:border-box;text-decoration:none;" onmouseover="this.style.borderColor='#9A7B3C'" onmouseout="this.style.borderColor='#E4E0D8'">
          <span style="flex-shrink:0;display:inline-flex;width:40px;height:40px;border-radius:50%;background:#2D2D2D;align-items:center;justify-content:center;">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9 15 12 18 15 15"/></svg>
          </span>
          <span style="flex:1;">
            <span style="display:block;font-size:14px;font-weight:600;color:#2D2D2D;line-height:1.2;">{%- if is_it -%}Regolare la lunghezza del cinturino{%- elsif is_en -%}Adjust strap length{%- else -%}Armbandlänge anpassen{%- endif -%}</span>
            <span style="display:block;font-size:12px;color:#8A8880;margin-top:1px;">{%- if is_it -%}Apri le istruzioni in PDF{%- elsif is_en -%}Open PDF guide{%- else -%}Anleitung als PDF öffnen{%- endif -%}</span>
          </span>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><polyline points="9 18 15 12 9 6"/></svg>
        </a>
        {%- endif -%}
        <script id="kpd-images-data" type="application/json">
          [{%- for image in product.images -%}{"src":"{{ image | image_url: width: 1000 }}","alt":{{ image.alt | default: product.title | json }}}{% unless forloop.last %},{% endunless %}{%- endfor -%}]
        </script>
        <script>window.kpdIsEn = {% if is_en %}true{% else %}false{% endif %}; window.kpdIsIt = {% if is_it %}true{% else %}false{% endif %}; /* Bildauswahl: Italien nutzt die englische Galerie */ window.kpdImgEn = {% if is_en or is_it %}true{% else %}false{% endif %};</script>
      </div>

      {%- comment -%} RECHTE SPALTE: INFO {%- endcomment -%}
      <div class="kpd-info">

        {%- comment -%} Titel & Preis {%- endcomment -%}
        <div style="margin-bottom:20px;">
          <div style="font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;margin-bottom:10px;">
            {{ section.settings.product_label | default: 'Vollkeramik · Swatch Royal Pop' }}
          </div>
          <h1 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,3.5vw,44px);font-weight:300;color:#2D2D2D;line-height:1.1;letter-spacing:-.02em;margin-bottom:14px;">{{ product.title }}</h1>

          {%- comment -%} Judge.me Sterne-Badge {%- endcomment -%}
          <!-- Start of Judge.me code -->
          <div id="kpd-badge-clickable" class='jdgm-widget jdgm-preview-badge' data-id='{{ product.id }}' data-auto-install='false' style="margin-bottom:14px;cursor:pointer;">
            {{ product.metafields.judgeme.badge }}
          </div>
          <!-- End of Judge.me code -->

          {%- comment -%} TRUST-ZEILE (ehrlich, ohne Fake-Sterne) {%- endcomment -%}
          <div style="display:flex;flex-wrap:wrap;align-items:center;gap:7px 14px;margin-bottom:20px;font-family:'DM Sans',sans-serif;">
            {%- if section.settings.trust_sold_text != blank -%}
              <span style="display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#9A7B3C;font-weight:600;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="#9A7B3C"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
                {{ section.settings.trust_sold_text }}
              </span>
              <span style="color:#E4E0D8;">·</span>
            {%- endif -%}
            <span style="display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#4A4845;">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#15803D" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
              {%- if is_it -%}Controllato singolarmente{%- elsif is_en -%}Individually inspected{%- else -%}Einzeln geprüft{%- endif -%}
            </span>
            <span style="color:#E4E0D8;">·</span>
            <span style="display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#4A4845;">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#15803D" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
              {%- if is_it -%}30 giorni di reso{%- elsif is_en -%}30-day returns{%- else -%}30 Tage Rückgabe{%- endif -%}
            </span>
          </div>

        {%- comment -%} FARBAUSWAHL {%- endcomment -%}
        {%- for option in product.options_with_values -%}
          {%- if option.name == 'Farbe' or option.name == 'Color' -%}
            {%- assign color_data = 'Schwarz:#1A1A1A:Black:Nero|Weiß:#FEFEFE:White:Bianco|Hellrosa:#F5D5D8:Light Pink:Rosa chiaro|Grün:#2E7D32:Green:Verde|Hellgrün:#B5D96B:Lime Green:Verde lime|Dunkelblau:#1F3A5F:Dark Blue:Blu scuro|Hellblau:#A8C8E8:Sky Blue:Azzurro|Schwarz-Weiß:#1A1A1A/#FEFEFE:Black and White:Bianco e nero|Schwarz - 3 Uhr:#1A1A1A:Black - 3 oclock:Nero - ore 3|Weiß - 3 Uhr:#FEFEFE:White - 3 oclock:Bianco - ore 3|Pink:#F5A6C0:Pink:Rosa|Blau:#3B82F6:Blue:Blu|Hellblau - 3 Uhr:#A8C8E8:Sky Blue - 3 oclock:Azzurro - ore 3|Blau-Hellblau:#3B82F6/#A8C8E8:Blue and Sky Blue:Blu e azzurro|Mitternachtsblau:#1E3A5F:Midnight Blue:Blu notte|Altrosa:#F472B6:Dusty Pink:Rosa antico' | split: '|' -%}
            <div style="margin-bottom:24px;">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;">
                <span style="font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#2D2D2D;font-weight:600;font-family:'DM Sans',sans-serif;">{%- if is_it -%}Colore:{%- elsif is_en -%}Colour:{%- else -%}Farbe:{%- endif -%}</span>
                <span id="kpd-selected-color" style="font-size:12px;color:#8A8880;font-family:'DM Sans',sans-serif;">{%- if is_en or is_it -%}{%- assign fv = option.values.first -%}{%- assign fl = fv -%}{%- for line in color_data -%}{%- assign p = line | strip | split: ':' -%}{%- if p[0] == fv -%}{%- if is_it -%}{%- assign fl = p[3] | default: p[2] -%}{%- else -%}{%- assign fl = p[2] -%}{%- endif -%}{%- endif -%}{%- endfor -%}{{ fl }}{%- else -%}{{ option.values.first }}{%- endif -%}</span>
              </div>

              {%- comment -%}
                Swatch-Button-HTML einmal als Vorlage bauen, dann in jeder Gruppe
                pro Farbwert ausgeben. Platzhalter ~~VAL~~/~~HEX~~/~~LBL~~/~~VID~~/~~ACTIVE~~/~~RING~~.
              {%- endcomment -%}

              {%- comment -%} Gruppierung nach Kronenposition (optional via Setting) {%- endcomment -%}
              {%- comment -%}
                3-Uhr-Farben FEST im Code (deutsch + englisch), damit die
                Uebersetzungs-App (Translate & Adapt) das Setting nicht mehr
                zerschiessen kann. Das Setting wird bewusst ignoriert.
                Bei neuen 3-Uhr-Farben hier beide Sprachnamen ergaenzen.
              {%- endcomment -%}
              {%- assign crown_raw = 'Blau, Altrosa, Weiß - 3 Uhr, Schwarz - 3 Uhr, Hellblau - 3 Uhr, Blau-Hellblau, Blue, Old Rose, Dusty Pink, White - 3 oclock, Black - 3 oclock, Sky Blue - 3 oclock, Blue-Light Blue, Blue and Sky Blue, Light Blue - 3 oclock' -%}

              {%- if crown_raw != blank -%}
                {%- assign crown3_list = crown_raw | downcase | replace: ', ', ',' | split: ',' -%}

                {%- comment -%}
                  Normalisierte 3-Uhr-Liste: nur Kleinbuchstaben/Ziffern, keine
                  Leer-/Sonderzeichen. Vergleich rein nach den deutschen Namen
                  aus dem Setting – gilt fuer beide Sprachen.
                {%- endcomment -%}
                {%- assign crown3_norm = '' -%}
                {%- for c in crown3_list -%}
                  {%- assign cn = c | downcase | remove: ' ' | remove: '-' | remove: '·' | remove: "'" | remove: '.' -%}
                  {%- assign crown3_norm = crown3_norm | append: '|' | append: cn | append: '|' -%}
                {%- endfor -%}

                {%- assign group12 = '' -%}
                {%- assign group3 = '' -%}
                {%- for value in option.values -%}
                  {%- assign vnorm = value | downcase | strip | remove: ' ' | remove: '-' | remove: '·' | remove: "'" | remove: '.' -%}
                  {%- assign vtest = '|' | append: vnorm | append: '|' -%}
                  {%- if crown3_norm contains vtest -%}
                    {%- assign group3 = group3 | append: value | append: '§' -%}
                  {%- else -%}
                    {%- assign group12 = group12 | append: value | append: '§' -%}
                  {%- endif -%}
                {%- endfor -%}

                {%- assign crown_groups = '12::' | append: group12 | append: '|||3::' | append: group3 | split: '|||' -%}
                {%- assign kpd_first_done = false -%}
                {%- for grp in crown_groups -%}
                  {%- assign gparts = grp | split: '::' -%}
                  {%- assign gnum = gparts[0] -%}
                  {%- assign gvalues = gparts[1] | split: '§' -%}
                  {%- if gvalues.size > 0 -%}
                    <div style="font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8880;font-family:'DM Sans',sans-serif;margin:0 0 8px;">
                      {%- if gnum == '12' -%}{%- if is_it -%}Corona a ore 12{%- elsif is_en -%}Crown at 12 o'clock{%- else -%}12 Uhr Krone{%- endif -%}{%- else -%}{%- if is_it -%}Corona a ore 3{%- elsif is_en -%}Crown at 3 oclock{%- else -%}3 Uhr Krone{%- endif -%}{%- endif -%}
                    </div>
                    <div class="kpd-colors" style="margin-bottom:18px;">
                      {%- for value in gvalues -%}
                        {%- assign hex = '#CCCCCC' -%}
                        {%- assign en_name = value -%}{%- assign it_name = value -%}
                        {%- for line in color_data -%}
                          {%- assign parts = line | strip | split: ':' -%}
                          {%- if parts[0] == value -%}{%- assign hex = parts[1] -%}{%- assign en_name = parts[2] -%}{%- assign it_name = parts[3] | default: parts[2] -%}{%- endif -%}
                        {%- endfor -%}
                        {%- if is_it -%}{%- assign display_value = it_name -%}{%- elsif is_en -%}{%- assign display_value = en_name -%}{%- else -%}{%- assign display_value = value -%}{%- endif -%}
                        {%- assign variant_id = '' -%}
                        {%- for variant in product.variants -%}
                          {%- if variant.options contains value -%}{%- assign variant_id = variant.id -%}{%- endif -%}
                        {%- endfor -%}
                        {%- assign is_active = false -%}
                        {%- unless kpd_first_done -%}{%- assign is_active = true -%}{%- assign kpd_first_done = true -%}{%- endunless -%}
                        {%- comment -%} Zweifarbig: hex "hexA/hexB" -> diagonaler Verlauf {%- endcomment -%}
                        {%- assign swatch_dot = '' -%}
                        {%- if hex contains '/' -%}
                          {%- assign hexparts = hex | split: '/' -%}
                          {%- assign swatch_bg = hexparts[0] -%}
                          {%- assign swatch_dot = hexparts[1] -%}
                        {%- else -%}
                          {%- assign swatch_bg = hex -%}
                        {%- endif -%}
                        <button class="kpd-color-btn {% if is_active %}kpd-color-btn--active{% endif %}"
                          data-value="{{ value | escape }}" data-variant="{{ variant_id }}"
                          data-hex="{{ hex }}" data-label="{{ display_value | escape }}"
                          onclick="kpdSelectColor(this)" title="{{ display_value }}"
                          style="background:{{ swatch_bg }};" aria-label="{{ display_value }}">
                          {%- if hex == '#FEFEFE' or hex == '#FFFFFF' or hex == '#C8CCD0' -%}<span style="position:absolute;inset:0;border-radius:50%;border:1px solid #CBC6BC;"></span>{%- endif -%}
                          {%- if swatch_dot != '' -%}<span style="position:absolute;right:3px;bottom:3px;width:13px;height:13px;border-radius:50%;background:{{ swatch_dot }};border:1.5px solid #FFFFFF;box-shadow:0 0 0 0.5px #CBC6BC;"></span>{%- endif -%}
                        </button>
                      {%- endfor -%}
                    </div>
                  {%- endif -%}
                {%- endfor -%}

              {%- else -%}
                {%- comment -%} Standard: eine Reihe, kein Setting gesetzt {%- endcomment -%}
                <div class="kpd-colors">
                  {%- for value in option.values -%}
                    {%- assign hex = '#CCCCCC' -%}
                    {%- assign en_name = value -%}{%- assign it_name = value -%}
                    {%- for line in color_data -%}
                      {%- assign parts = line | strip | split: ':' -%}
                      {%- if parts[0] == value -%}{%- assign hex = parts[1] -%}{%- assign en_name = parts[2] -%}{%- assign it_name = parts[3] | default: parts[2] -%}{%- endif -%}
                    {%- endfor -%}
                    {%- if is_it -%}{%- assign display_value = it_name -%}{%- elsif is_en -%}{%- assign display_value = en_name -%}{%- else -%}{%- assign display_value = value -%}{%- endif -%}
                    {%- assign variant_id = '' -%}
                    {%- for variant in product.variants -%}
                      {%- if variant.options contains value -%}{%- assign variant_id = variant.id -%}{%- endif -%}
                    {%- endfor -%}
                    {%- assign swatch_dot = '' -%}
                    {%- if hex contains '/' -%}
                      {%- assign hexparts = hex | split: '/' -%}
                      {%- assign swatch_bg = hexparts[0] -%}
                      {%- assign swatch_dot = hexparts[1] -%}
                    {%- else -%}
                      {%- assign swatch_bg = hex -%}
                    {%- endif -%}
                    <button class="kpd-color-btn {% if forloop.first %}kpd-color-btn--active{% endif %}"
                      data-value="{{ value | escape }}" data-variant="{{ variant_id }}"
                      data-hex="{{ hex }}" data-label="{{ display_value | escape }}"
                      onclick="kpdSelectColor(this)" title="{{ display_value }}"
                      style="background:{{ swatch_bg }};" aria-label="{{ display_value }}">
                      {%- if hex == '#FEFEFE' or hex == '#FFFFFF' or hex == '#C8CCD0' -%}<span style="position:absolute;inset:0;border-radius:50%;border:1px solid #CBC6BC;"></span>{%- endif -%}
                      {%- if swatch_dot != '' -%}<span style="position:absolute;right:3px;bottom:3px;width:13px;height:13px;border-radius:50%;background:{{ swatch_dot }};border:1.5px solid #FFFFFF;box-shadow:0 0 0 0.5px #CBC6BC;"></span>{%- endif -%}
                    </button>
                  {%- endfor -%}
                </div>
              {%- endif -%}
            </div>
          {%- endif -%}
        {%- endfor -%}

        {%- comment -%} ANDERE OPTIONEN (z.B. Länge) {%- endcomment -%}
        {%- for option in product.options_with_values -%}
          {%- unless option.name == 'Farbe' or option.name == 'Color' -%}
            <div style="margin-bottom:24px;">
              <div style="margin-bottom:12px;">
                <span style="font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#2D2D2D;font-weight:600;font-family:'DM Sans',sans-serif;">{{ option.name }}:</span>
              </div>
              <div style="display:flex;flex-wrap:wrap;gap:8px;">
                {%- for value in option.values -%}
                  <button
                    class="kpd-option-btn {% if forloop.first %}kpd-option-btn--active{% endif %}"
                    data-option-name="{{ option.name | escape }}" data-option-index="{{ forloop.index }}"
                    data-option-value="{{ value | escape }}"
                    onclick="kpdSelectOption(this)"
                    style="padding:9px 18px;border:1px solid {% if forloop.first %}#2D2D2D{% else %}#E4E0D8{% endif %};background:{% if forloop.first %}#2D2D2D{% else %}#FFFFFF{% endif %};color:{% if forloop.first %}#FFFFFF{% else %}#2D2D2D{% endif %};font-family:'DM Sans',sans-serif;font-size:12px;font-weight:400;cursor:pointer;letter-spacing:.04em;transition:all .2s;-webkit-tap-highlight-color:transparent;">
                    {{ value }}
                  </button>
                {%- endfor -%}
              </div>
            </div>
          {%- endunless -%}
        {%- endfor -%}




          <div style="display:flex;align-items:baseline;gap:12px;">
            <span id="kpd-price" style="font-family:'Cormorant Garamond',Georgia,serif;font-size:34px;font-weight:300;color:#9A7B3C;">{{ current_variant.price | money }}</span>
            {%- if current_variant.compare_at_price > current_variant.price -%}
              <span style="font-size:16px;color:#B8B5AF;text-decoration:line-through;">{{ current_variant.compare_at_price | money }}</span>
              {%- assign saving = current_variant.compare_at_price | minus: current_variant.price -%}
              <span style="font-size:12px;font-weight:600;color:#FFFFFF;background:#15803D;padding:3px 9px;border-radius:3px;font-family:'DM Sans',sans-serif;">{%- if is_it -%}Risparmia {%- elsif is_en -%}Save {%- else -%}Spare {%- endif -%}{{ saving | money }}</span>
            {%- endif -%}
          </div>
          <div style="font-size:12px;color:#B8B5AF;margin-top:6px;font-family:'DM Sans',sans-serif;">{%- if request.locale.iso_code == 'de-CH' or request.path contains '/de-ch' -%}Versandkosten werden an der Kasse berechnet{%- elsif is_usa -%}Duties, taxes & shipping calculated at checkout.{%- elsif is_it -%}IVA inclusa · Spedizione calcolata alla cassa{%- elsif is_en -%}Shipping calculated at checkout.{%- else -%}Inkl. MwSt. · Versandkosten werden an der Kasse berechnet{%- endif -%}</div>

          {%- comment -%} VIDEO LIGHTBOX {%- endcomment -%}
          {%- if section.settings.intro_video != blank -%}
          <div id="kpd-video-overlay" style="display:none;position:fixed;inset:0;background:rgba(26,26,26,.92);z-index:99999;align-items:center;justify-content:center;padding:20px;" onclick="kpdCloseVideo(event)">
            <div style="position:relative;width:100%;max-width:380px;">
              <button type="button" onclick="kpdCloseVideo()" aria-label="Schließen" style="position:absolute;top:-44px;right:0;background:none;border:none;cursor:pointer;padding:6px;">
                <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#FAFAF8" stroke-width="1.8"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
              </button>
              <video id="kpd-video-el" src="{{ section.settings.intro_video }}" controls playsinline
                {%- if section.settings.intro_video_poster != blank %} poster="{{ section.settings.intro_video_poster | image_url: width: 800 }}"{% endif %}
                style="width:100%;border-radius:6px;background:#1A1A1A;display:block;"></video>
            </div>
          </div>
          {%- endif -%}

          {%- comment -%} COUNTDOWN (nach dem Preis – erst Wert, dann Dringlichkeit) {%- endcomment -%}
          <div style="display:flex;align-items:center;gap:8px;background:#F0FDF4;border:1px solid #BBF7D0;padding:10px 14px;margin-top:12px;">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#15803D" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
            <span style="font-size:12px;color:#15803D;font-family:'DM Sans',sans-serif;font-weight:500;">{%- if is_it -%}Offerta valida ancora: {%- elsif is_en -%}Sale ends in: {%- else -%}Sonderpreis endet in: {%- endif -%}<strong id="kpd-timer">23:59:59</strong></span>
          </div>
        </div>

        {%- comment -%} KURZBESCHREIBUNG {%- endcomment -%}
        {%- if section.settings.short_description != blank and section.settings.short_description != ' ' -%}
          <p style="font-size:14px;color:#4A4845;line-height:1.75;font-weight:300;font-family:'DM Sans',sans-serif;margin-bottom:16px;">{{ section.settings.short_description }}</p>
        {%- endif -%}

        {%- comment -%} HÄKCHEN-BLÖCKE {%- endcomment -%}
        {%- assign check_blocks = section.blocks | where: 'type', 'checkmark' -%}
        {%- if check_blocks.size > 0 -%}
          <div style="display:flex;flex-direction:column;gap:9px;margin-bottom:20px;">
            {%- for block in check_blocks -%}
              <div style="display:flex;align-items:center;gap:10px;font-size:13px;color:#2D2D2D;font-family:'DM Sans',sans-serif;" {{ block.shopify_attributes }}>
                <span style="width:20px;height:20px;border-radius:50%;background:#F5F3EF;border:1px solid #E4E0D8;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#9A7B3C;font-size:11px;font-weight:700;">✓</span>
                {{ block.settings.text }}
              </div>
            {%- endfor -%}
          </div>
        {%- endif -%}

        <div style="height:1px;background:#E4E0D8;margin-bottom:20px;"></div>

        {%- comment -%} SOCIAL PROOF {%- endcomment -%}
        {%- if section.settings.show_social_proof -%}
          <div style="background:#F5F3EF;border:1px solid #E4E0D8;padding:14px 18px;margin-bottom:20px;display:flex;align-items:center;gap:12px;">
            <div style="display:flex;">
              {%- assign sp_colors = '#2D2D2D,#9A7B3C,#3B82F6,#22C55E,#F472B6' | split: ',' -%}
              {%- for col in sp_colors -%}
                <div style="width:28px;height:28px;border-radius:50%;background:{{ col }};border:2px solid #FFFFFF;margin-left:{% if forloop.first %}0{% else %}-8px{% endif %};flex-shrink:0;"></div>
              {%- endfor -%}
            </div>
            <div>
              <div style="font-size:12px;font-weight:600;color:#2D2D2D;font-family:'DM Sans',sans-serif;">
                <span style="color:#9A7B3C;">★★★★★</span> {{ section.settings.social_proof_text | default: 'Bereits viele Male gekauft' }}
              </div>
              <div style="font-size:11px;color:#8A8880;font-family:'DM Sans',sans-serif;">{%- if is_it -%}{{ section.settings.social_proof_sub | default: 'Spedizione 8,99 € · consegna rapida' }}{%- elsif is_en -%}{{ section.settings.social_proof_sub_en | default: '€8.99 shipping · fast delivery' }}{%- else -%}{{ section.settings.social_proof_sub | default: 'Kostenloser Versand · Schnelle Lieferung' }}{%- endif -%}</div>
            </div>
          </div>
        {%- endif -%}

        {%- comment -%} MENGE + ATC {%- endcomment -%}
        {%- form 'product', product, id: 'kpd-form' -%}
          <input type="hidden" name="id" id="kpd-variant-id" value="{{ current_variant.id }}">
          <div class="kpd-qty-row" style="display:flex;align-items:center;gap:12px;margin-bottom:16px;">
            <div style="display:flex;align-items:center;border:1px solid #E4E0D8;">
              <button type="button" onclick="kpdQty(-1)" style="width:48px;height:52px;background:none;border:none;cursor:pointer;font-size:20px;color:#8A8880;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;">−</button>
              <input type="number" name="quantity" id="kpd-qty" value="1" min="1" style="width:52px;height:52px;text-align:center;border:none;border-left:1px solid #E4E0D8;border-right:1px solid #E4E0D8;font-family:'DM Sans',sans-serif;font-size:14px;color:#2D2D2D;background:none;">
              <button type="button" onclick="kpdQty(1)" style="width:48px;height:52px;background:none;border:none;cursor:pointer;font-size:20px;color:#8A8880;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;">+</button>
            </div>
            <div style="font-family:'DM Sans',sans-serif;">
              {%- if current_variant.available -%}
                <div style="display:flex;align-items:center;gap:6px;font-size:12px;color:#16A34A;font-weight:500;">
                  <span style="width:7px;height:7px;border-radius:50%;background:#16A34A;display:inline-block;animation:kpd-pulse 1.5s infinite;flex-shrink:0;"></span>
                  {%- if is_it -%}Disponibile{%- elsif is_en -%}In stock{%- else -%}Auf Lager{%- endif -%}
                </div>
              {%- else -%}
                <div style="font-size:12px;color:#DC2626;">{%- if is_it -%}✗ Esaurito{%- elsif is_en -%}✗ Sold out{%- else -%}✗ Ausverkauft{%- endif -%}</div>
              {%- endif -%}
            </div>
          </div>



          <div style="display:flex;flex-direction:column;gap:10px;margin-bottom:24px;">
            <div style="display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:4px;font-family:'DM Sans',sans-serif;">
              <span style="display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#4A4845;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#15803D" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>
                {%- if is_it -%}30 giorni soddisfatti o rimborsati{%- elsif is_en -%}30-day money-back{%- else -%}30 Tage Geld-zurück{%- endif -%}
              </span>
              <span style="display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#4A4845;">
                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#15803D" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
                {%- if is_it -%}Pagamento sicuro{%- elsif is_en -%}Secure checkout{%- else -%}Sichere Zahlung{%- endif -%}
              </span>
            </div>
            <button type="submit" name="add"
              style="width:100%;padding:18px 32px;background:#2D2D2D;color:#FAFAF8;border:none;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:background .3s;-webkit-tap-highlight-color:transparent;"
              onmouseover="this.style.background='#9A7B3C'" onmouseout="this.style.background='#2D2D2D'">
              {%- if is_it -%}Aggiungi al carrello{%- elsif is_en -%}Add to cart{%- else -%}In den Warenkorb{%- endif -%}
            </button>

            {%- comment -%} PayPal Button {%- endcomment -%}
            {{ form | payment_button }}

          </div>

        {%- endform -%}

        {%- comment -%} VIDEO-BUTTON {%- endcomment -%}
{%- if section.settings.intro_video != blank -%}
        <button type="button" onclick="kpdOpenVideo()" class="kpd-video-trigger" style="display:flex;align-items:center;gap:12px;width:100%;background:#FFFFFF;border:1px solid #E4E0D8;padding:13px 15px;margin-top:20px;cursor:pointer;text-align:left;transition:border-color .2s;font-family:'DM Sans',sans-serif;box-sizing:border-box;" onmouseover="this.style.borderColor='#9A7B3C'" onmouseout="this.style.borderColor='#E4E0D8'">
          <span style="flex-shrink:0;display:inline-flex;width:40px;height:40px;border-radius:50%;background:#2D2D2D;align-items:center;justify-content:center;">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="#9A7B3C" stroke="none" style="margin-left:2px;"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          </span>
          <span style="flex:1;">
            <span style="display:block;font-size:14px;font-weight:600;color:#2D2D2D;line-height:1.2;">{%- if is_it -%}Ecco come si monta{%- elsif is_en -%}See how it works{%- else -%}So wird es eingebaut{%- endif -%}</span>
            <span style="display:block;font-size:12px;color:#8A8880;margin-top:1px;">{%- if is_it -%}Guarda il video{%- elsif is_en -%}Watch the video{%- else -%}Video ansehen{%- endif -%}</span>
          </span>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><polyline points="9 18 15 12 9 6"/></svg>
        </button>
        {%- endif -%}


        {%- comment -%} INKLUSIVE-KASTEN (Box + Kürzungs-Set) {%- endcomment -%}
        <div style="border:1px solid #E4E0D8;background:#FFFFFF;margin-bottom:16px;overflow:hidden;">
          <div style="background:#F5F3EF;padding:9px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #E4E0D8;">
            <span style="font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FAFAF8;background:#9A7B3C;padding:2px 8px;font-family:'DM Sans',sans-serif;">{%- if is_it -%}Incluso{%- elsif is_en -%}Included{%- else -%}Inklusive{%- endif -%}</span>
            <span style="font-size:11px;font-weight:600;letter-spacing:.04em;color:#2D2D2D;font-family:'DM Sans',sans-serif;">{%- if is_it -%}Ecco cosa è incluso{%- elsif is_en -%}This is all included{%- else -%}Das ist alles dabei{%- endif -%}</span>
          </div>

          {%- comment -%} Box {%- endcomment -%}
          <div style="display:flex;align-items:center;gap:13px;padding:12px 14px;">
            {%- if section.settings.box_image != blank -%}
              <img src="{{ section.settings.box_image | image_url: width: 160 }}" alt="WristPop Box" loading="lazy" style="width:48px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#F5F3EF;">
            {%- else -%}
              <div style="width:48px;height:48px;border-radius:4px;background:#2D2D2D;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.5"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
              </div>
            {%- endif -%}
            <div style="flex:1;">
              <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:300;color:#2D2D2D;line-height:1.2;">{%- if is_it -%}Elegante box WristPop{%- elsif is_en -%}Premium WristPop Box{%- else -%}Hochwertige WristPop Box{%- endif -%}</div>
              <div style="font-size:11px;color:#8A8880;font-family:'DM Sans',sans-serif;line-height:1.4;margin-top:1px;">{%- if is_it -%}Box elegante – perfetta da regalare.{%- elsif is_en -%}Elegant box — ready to gift.{%- else -%}Edle Box – perfekt zum Verschenken.{%- endif -%}</div>
            </div>
          </div>

          {%- comment -%} Kürzungs-Set {%- endcomment -%}
          <div style="display:flex;align-items:center;gap:13px;padding:12px 14px;border-top:1px solid #F0EDE7;">
            {%- if section.settings.tool_image != blank -%}
              <img src="{{ section.settings.tool_image | image_url: width: 160 }}" alt="Armband Kürzungs-Set" loading="lazy" style="width:48px;height:48px;object-fit:cover;border-radius:4px;flex-shrink:0;background:#F5F3EF;">
            {%- else -%}
              <div style="width:48px;height:48px;border-radius:4px;background:#2D2D2D;display:flex;align-items:center;justify-content:center;flex-shrink:0;">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.5"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z"/></svg>
              </div>
            {%- endif -%}
            <div style="flex:1;">
              <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-weight:300;color:#2D2D2D;line-height:1.2;">{%- if is_it -%}Kit per accorciare il cinturino{%- elsif is_en -%}Strap Sizing Tool{%- else -%}Armband-Kürzungs-Set{%- endif -%}</div>
              <div style="font-size:11px;color:#8A8880;font-family:'DM Sans',sans-serif;line-height:1.4;margin-top:1px;">{%- if is_it -%}Per una vestibilità perfetta – senza sovrapprezzo.{%- elsif is_en -%}For the perfect fit — no extra cost.{%- else -%}Für die perfekte Passform – ohne Aufpreis.{%- endif -%}</div>
            </div>
          </div>
        </div>

        {%- comment -%} BUNDLE BANNER {%- endcomment -%}
        <div style="border:1px solid #E4E0D8;margin-bottom:16px;overflow:hidden;">
          <div style="background:#F5F3EF;padding:10px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #E4E0D8;">
            <span style="font-size:14px;">🎁</span>
            <span style="font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#2D2D2D;font-family:'DM Sans',sans-serif;">{%- if is_it -%}Offerta bundle{%- elsif is_en -%}Bundle Offer{%- else -%}Bundle Angebot{%- endif -%}</span>
            <span style="margin-left:auto;background:#9A7B3C;color:#FAFAF8;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;font-family:'DM Sans',sans-serif;">-15%</span>
          </div>
          <div style="padding:14px 16px;background:#FFFFFF;">
            <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:18px;font-weight:300;color:#2D2D2D;margin-bottom:6px;">{%- if is_it -%}Acquista 2 – risparmia il 15%{%- elsif is_en -%}Buy 2 – save 15%{%- else -%}Kaufe 2 – spare 15%{%- endif -%}</div>
            <div style="font-size:12px;color:#8A8880;font-family:'DM Sans',sans-serif;margin-bottom:14px;line-height:1.6;">{%- if is_it -%}Combina prodotti o colori a piacere. Lo sconto viene applicato automaticamente alla cassa.{%- elsif is_en -%}Combine any products or colours. The discount is applied automatically at checkout.{%- else -%}Kombiniere beliebige Produkte oder Farben. Der Rabatt wird automatisch beim Checkout angewendet.{%- endif -%}</div>
            <a href="/collections/all" style="display:flex;align-items:center;justify-content:center;padding:11px;background:#2D2D2D;color:#FAFAF8;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s;" onmouseover="this.style.background='#9A7B3C'" onmouseout="this.style.background='#2D2D2D'">
              {%- if is_it -%}Scegli il 2° prodotto →{%- elsif is_en -%}Choose 2nd product →{%- else -%}2. Produkt wählen →{%- endif -%}
            </a>
          </div>
        </div>

        {%- comment -%} ZAHLUNGSARTEN {%- endcomment -%}
        <div style="margin-top:16px;text-align:center;">
          <div style="font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#B8B5AF;font-family:'DM Sans',sans-serif;margin-bottom:10px;">{%- if is_it -%}Pagamento sicuro{%- elsif is_en -%}Secure Payment{%- else -%}Sichere Zahlung{%- endif -%}</div>
          <div style="display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;">
            <!-- Visa -->
            <svg width="42" height="28" viewBox="0 0 42 28" fill="none" xmlns="http://www.w3.org/2000/svg" style="border:1px solid #E4E0D8;border-radius:3px;padding:3px;background:#fff;">
              <rect width="42" height="28" rx="3" fill="white"/>
              <text x="21" y="18" text-anchor="middle" font-family="Arial" font-size="11" font-weight="700" fill="#1A1F71">VISA</text>
            </svg>
            <!-- Mastercard -->
            <svg width="42" height="28" viewBox="0 0 42 28" xmlns="http://www.w3.org/2000/svg" style="border:1px solid #E4E0D8;border-radius:3px;background:#fff;">
              <rect width="42" height="28" rx="3" fill="white"/>
              <circle cx="16" cy="14" r="8" fill="#EB001B"/>
              <circle cx="26" cy="14" r="8" fill="#F79E1B"/>
              <path d="M21 7.5a8 8 0 0 1 0 13 8 8 0 0 1 0-13z" fill="#FF5F00"/>
            </svg>
            <!-- PayPal -->
            <svg width="42" height="28" viewBox="0 0 42 28" xmlns="http://www.w3.org/2000/svg" style="border:1px solid #E4E0D8;border-radius:3px;padding:3px;background:#fff;">
              <rect width="42" height="28" rx="3" fill="white"/>
              <text x="21" y="12" text-anchor="middle" font-family="Arial" font-size="6" font-weight="700" fill="#003087">Pay</text>
              <text x="21" y="20" text-anchor="middle" font-family="Arial" font-size="6" font-weight="700" fill="#009cde">Pal</text>
            </svg>
            <!-- Apple Pay -->
            <svg width="42" height="28" viewBox="0 0 42 28" xmlns="http://www.w3.org/2000/svg" style="border:1px solid #E4E0D8;border-radius:3px;padding:3px;background:#000;">
              <rect width="42" height="28" rx="3" fill="#000"/>
              <text x="21" y="19" text-anchor="middle" font-family="Arial" font-size="9" fill="white"> Pay</text>
            </svg>
            <!-- Google Pay -->
            <svg width="42" height="28" viewBox="0 0 42 28" xmlns="http://www.w3.org/2000/svg" style="border:1px solid #E4E0D8;border-radius:3px;padding:3px;background:#fff;">
              <rect width="42" height="28" rx="3" fill="white"/>
              <text x="21" y="18" text-anchor="middle" font-family="Arial" font-size="7" font-weight="500" fill="#444">G Pay</text>
            </svg>
            <!-- Klarna -->
            <svg width="42" height="28" viewBox="0 0 42 28" xmlns="http://www.w3.org/2000/svg" style="border:1px solid #E4E0D8;border-radius:3px;padding:4px;background:#FFB3C7;">
              <rect width="42" height="28" rx="3" fill="#FFB3C7"/>
              <text x="21" y="19" text-anchor="middle" font-family="Arial" font-size="9" font-weight="700" fill="#000">klarna</text>
            </svg>
          </div>
        </div>

        {%- comment -%} TRUST PUNKTE {%- endcomment -%}
        <div class="kpd-trust-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;">
          {%- assign trust_blocks = section.blocks | where: 'type', 'trust_point' -%}
          {%- if trust_blocks.size > 0 -%}
            {%- for block in trust_blocks -%}
              {%- assign bt = block.settings.text -%}
              {%- if is_usa -%}
                {%- assign btl = bt | downcase -%}
                {%- if btl contains 'shipping' or btl contains 'versand' -%}
                  {%- assign bt = 'DDP - duties, taxes & shipping at checkout' -%}
                {%- endif -%}
              {%- elsif is_en -%}
                {%- assign btl = bt | downcase -%}
                {%- if btl contains 'free shipping' or btl contains 'kostenloser versand' or btl contains 'versand ab' or btl contains 'orders over' -%}
                  {%- assign bt = '€8.99 shipping · 4-6 business days' -%}
                {%- endif -%}
              {%- endif -%}
              <div style="display:flex;align-items:center;gap:8px;font-size:11.5px;color:#8A8880;font-family:'DM Sans',sans-serif;" {{ block.shopify_attributes }}>
                <span style="color:#9A7B3C;font-size:12px;">✓</span> {{ bt }}
              </div>
            {%- endfor -%}
          {%- else -%}
            {%- if request.locale.iso_code == 'de-CH' or request.path contains '/de-ch' -%}
              {%- assign default_trust = 'Versand 9.99 CHF - 4-6 Werktage,30 Tage Rückgabe,Einzeln geprüft,Royal Pop kompatibel' | split: ',' -%}
            {%- elsif request.locale.iso_code == 'de-AT' or request.path contains '/de-at' -%}
              {%- assign default_trust = 'Versand 8.99 EUR - 2-4 Werktage,30 Tage Rückgabe,Einzeln geprüft,Royal Pop kompatibel' | split: ',' -%}
            {%- elsif is_usa -%}
              {%- assign default_trust = 'DDP - duties taxes & shipping at checkout,30-day returns,Individually inspected,Fits all Swatch Royal Pop' | split: ',' -%}
            {%- elsif is_it -%}
              {%- assign default_trust = 'Spedizione 8.99 € · 4-6 giorni lavorativi,30 giorni di reso,Controllato singolarmente,Compatibile con Royal Pop' | split: ',' -%}
            {%- elsif is_en -%}
              {%- assign default_trust = '€8.99 shipping · 4-6 business days,30-day returns,Individually inspected,Royal Pop compatible' | split: ',' -%}
            {%- else -%}
              {%- assign default_trust = 'Kostenloser Versand ab 25 EUR,30 Tage Rückgabe,Einzeln geprüft,Royal Pop kompatibel' | split: ',' -%}
            {%- endif -%}
            {%- for t in default_trust -%}
              <div style="display:flex;align-items:center;gap:8px;font-size:11.5px;color:#8A8880;font-family:'DM Sans',sans-serif;">
                <span style="color:#9A7B3C;">✓</span> {{ t }}
              </div>
            {%- endfor -%}
          {%- endif -%}
        </div>

        <div style="height:1px;background:#E4E0D8;margin-bottom:20px;"></div>

        {%- comment -%} AKKORDEON TABS – nur normale Tabs (kein FAQ) {%- endcomment -%}
        {%- assign tab_blocks = section.blocks | where: 'type', 'accordion_tab' -%}
        {%- if tab_blocks.size > 0 -%}
          {%- for block in tab_blocks -%}
            {%- unless block.settings.title contains 'FAQ' -%}
              <details class="kpd-accordion" {{ block.shopify_attributes }}>
                <summary class="kpd-accordion-summary">
                  {{ block.settings.title }}
                  <span class="kpd-accordion-icon">+</span>
                </summary>
                <div class="kpd-accordion-body">
                  {%- if block.settings.title == 'Versand & Rückgabe' or block.settings.title == 'Shipping & Returns' -%}
                    {%- if request.locale.iso_code == 'de-CH' or request.path contains '/de-ch' -%}
                      <p>Versand in die Schweiz: <strong>9,99 CHF</strong> pauschal per DHL International · 4–6 Werktage.<br>Keine deutsche MwSt. Schweizer MwSt. (8,1%) und Bearbeitungsgebühr werden bei Zustellung erhoben.<br>30 Tage kostenlose Rückgabe.</p>
                    {%- elsif request.locale.iso_code == 'de-AT' or request.path contains '/de-at' -%}
                      <p>Versand nach Österreich: <strong>8,99 €</strong> pauschal per DHL · 2–4 Werktage.<br>Keine Zollgebühren (EU). Österreichische MwSt. (20%) bereits im Preis enthalten.<br>30 Tage kostenlose Rückgabe.</p>
                    {%- elsif is_en -%}
                      <p>Shipping across the EU: <strong>€8.99</strong> flat rate via DHL · 4–6 business days.<br>No customs fees within the EU. VAT already included in the price.<br>30-day free returns.</p>
                    {%- else -%}
                      {{ block.settings.content }}
                    {%- endif -%}
                  {%- else -%}
                    {{ block.settings.content }}
                  {%- endif -%}
                </div>
              </details>
            {%- endunless -%}
          {%- endfor -%}
        {%- else -%}
          {%- if is_it -%}
            {%- assign default_tabs = 'Descrizione prodotto,Materiali e misure,Compatibilità,Spedizione e resi' | split: ',' -%}
            {%- assign default_contents = product.description | append: '|||Ceramica integrale (Bioceramic). Peso: circa 45 g. Adatto a polsi da 16 a 22 cm.|||Compatibile con tutti i modelli Swatch Royal Pop. Nessun attrezzo necessario.|||Spedizione forfettaria 8,99 € in tutta l’UE · 4–6 giorni lavorativi. 30 giorni di reso gratuito.' | split: '|||' -%}
          {%- elsif is_en -%}
            {%- assign default_tabs = 'Product description,Material & dimensions,Compatibility,Shipping & Returns' | split: ',' -%}
            {%- assign default_contents = product.description | append: '|||Full ceramic (Bioceramic). Weight: approx. 45g. Fits wrist circumference 16–22 cm.|||Compatible with all Swatch Royal Pop models. No tools required.|||€8.99 flat-rate shipping across the EU · 4–6 business days. 30-day free returns.' | split: '|||' -%}
          {%- else -%}
            {%- assign default_tabs = 'Produktbeschreibung,Material & Maße,Kompatibilität,Versand & Rückgabe' | split: ',' -%}
            {%- assign default_contents = product.description | append: '|||Vollkeramik (Bioceramic). Gewicht: ca. 45g. Passend für Handgelenkumfang 16–22 cm.|||Kompatibel mit allen Swatch Royal Pop Modellen. Kein Werkzeug notwendig.|||Kostenloser Versand ab 25 €. Deutschland: 1–3 Werktage. 30 Tage kostenlose Rückgabe.' | split: '|||' -%}
          {%- endif -%}
          {%- for tab in default_tabs -%}
            <details class="kpd-accordion">
              <summary class="kpd-accordion-summary">{{ tab }}<span class="kpd-accordion-icon">+</span></summary>
              <div class="kpd-accordion-body">{{ default_contents[forloop.index0] }}</div>
            </details>
          {%- endfor -%}
        {%- endif -%}

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

  {%- comment -%} CONTENT BLÖCKE (editierbar) {%- endcomment -%}
  {%- for block in section.blocks -%}

    {%- if block.type == 'image_text' -%}
      <div style="padding:clamp(48px,6vw,80px) clamp(20px,4vw,64px);background:{% if block.settings.dark_bg %}#2D2D2D{% else %}#FFFFFF{% endif %};border-top:1px solid #E4E0D8;" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1320px;margin:0 auto;">
          <div class="kpd-material-grid" style="display:grid;grid-template-columns:{% if block.settings.image_right %}1fr 1fr{% else %}1fr 1fr{% endif %};gap:clamp(32px,5vw,72px);align-items:center;">
            {%- assign bt_img = block.settings.image -%}
            {%- if is_en and block.settings.image_en != blank -%}{%- assign bt_img = block.settings.image_en -%}{%- endif -%}
            {%- if block.settings.image_right -%}
              <div>
                <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:14px;margin-bottom:16px;">
                  <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>{{ block.settings.eyebrow }}
                </div>
                <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,42px);font-weight:300;color:{% if block.settings.dark_bg %}#FAFAF8{% else %}#2D2D2D{% endif %};line-height:1.1;letter-spacing:-.02em;margin-bottom:18px;">{{ block.settings.heading }}</h2>
                <p style="font-size:14px;color:{% if block.settings.dark_bg %}rgba(250,250,248,.6){% else %}#8A8880{% endif %};line-height:1.8;font-weight:300;font-family:'DM Sans',sans-serif;">{{ block.settings.text }}</p>
              </div>
              <div style="overflow:hidden;background:#F5F3EF;">
                {%- if bt_img != blank -%}
                  {{ bt_img | image_url: width: 900 | image_tag: loading: 'lazy', alt: block.settings.heading, style: 'width:100%;height:100%;object-fit:cover;' }}
                {%- else -%}
                  <div style="aspect-ratio:1;background:#EDE9E2;display:flex;align-items:center;justify-content:center;">
                    <p style="font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B8B5AF;font-family:'DM Sans',sans-serif;">Bild hochladen</p>
                  </div>
                {%- endif -%}
              </div>
            {%- else -%}
              <div style="overflow:hidden;background:#F5F3EF;">
                {%- if bt_img != blank -%}
                  {{ bt_img | image_url: width: 900 | image_tag: loading: 'lazy', alt: block.settings.heading, style: 'width:100%;height:100%;object-fit:cover;' }}
                {%- else -%}
                  <div style="aspect-ratio:1;background:#EDE9E2;display:flex;align-items:center;justify-content:center;">
                    <p style="font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B8B5AF;font-family:'DM Sans',sans-serif;">Bild hochladen</p>
                  </div>
                {%- endif -%}
              </div>
              <div>
                <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:14px;margin-bottom:16px;">
                  <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>{{ block.settings.eyebrow }}
                </div>
                <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,42px);font-weight:300;color:{% if block.settings.dark_bg %}#FAFAF8{% else %}#2D2D2D{% endif %};line-height:1.1;letter-spacing:-.02em;margin-bottom:18px;">{{ block.settings.heading }}</h2>
                <p style="font-size:14px;color:{% if block.settings.dark_bg %}rgba(250,250,248,.6){% else %}#8A8880{% endif %};line-height:1.8;font-weight:300;font-family:'DM Sans',sans-serif;">{{ block.settings.text }}</p>
              </div>
            {%- endif -%}
          </div>
        </div>
      </div>

    {%- elsif block.type == 'steps' -%}
      <div style="background:{% if block.settings.dark_bg %}#2D2D2D{% else %}#F5F3EF{% endif %};border-top:1px solid #E4E0D8;padding:clamp(48px,6vw,80px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1320px;margin:0 auto;">
          <div style="text-align:center;max-width:520px;margin:0 auto 48px;">
            <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;">
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
              {{ block.settings.eyebrow | default: 'So wird es eingebaut' }}
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
            </div>
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,44px);font-weight:300;color:{% if block.settings.dark_bg %}#FAFAF8{% else %}#2D2D2D{% endif %};letter-spacing:-.02em;">{{ block.settings.heading | default: 'In 3 Schritten – keine Werkzeuge' }}</h2>
          </div>

          {%- comment -%} Desktop: 3 Spalten nebeneinander {%- endcomment -%}
          <div class="kpd-steps-grid kpd-steps-desktop" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#E4E0D8;border:1px solid #E4E0D8;">
            {%- for i in (1..3) -%}
              {%- assign step_title = 'step_title_' | append: i -%}
              {%- assign step_text = 'step_text_' | append: i -%}
              <div style="background:#FFFFFF;padding:36px 28px;text-align:center;">
                <div style="width:52px;height:52px;border-radius:50%;background:#F5F3EF;border:1px solid #E4E0D8;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;">
                  <span style="font-family:'Cormorant Garamond',Georgia,serif;font-size:22px;font-weight:300;color:#9A7B3C;">{{ i }}</span>
                </div>
                <div style="font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2D2D2D;font-family:'DM Sans',sans-serif;margin-bottom:10px;">{{ block.settings[step_title] | default: 'Schritt' }}</div>
                <div style="font-size:13px;color:#8A8880;line-height:1.75;font-weight:300;font-family:'DM Sans',sans-serif;">{{ block.settings[step_text] }}</div>
              </div>
            {%- endfor -%}
          </div>

          {%- comment -%} Mobile: Stack-Scroll – Karten stapeln sich übereinander {%- endcomment -%}
          <div class="kpd-steps-mobile">
            <div class="kpd-steps-stack">
              {%- for i in (1..3) -%}
                {%- assign step_title = 'step_title_' | append: i -%}
                {%- assign step_text = 'step_text_' | append: i -%}
                <div class="kpd-step-sticky" data-index="{{ i }}">
                  <div class="kpd-step-card">
                    <div class="kpd-step-number">{{ i }}</div>
                    <div class="kpd-step-title">{{ block.settings[step_title] | default: 'Schritt' }}</div>
                    <div class="kpd-step-text">{{ block.settings[step_text] }}</div>
                  </div>
                </div>
              {%- endfor -%}
            </div>
          </div>

        </div>
      </div>




    {%- elsif block.type == 'how_it_works' -%}
      <div style="background:#FFFFFF;border-top:1px solid #E4E0D8;padding:clamp(56px,7vw,100px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1320px;margin:0 auto;">
          <div style="text-align:center;max-width:620px;margin:0 auto 52px;" data-reveal>
            <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;">
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
              {{ block.settings.hiw_eyebrow | default: 'So wird es eingebaut' }}
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
            </div>
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,4vw,50px);font-weight:300;color:#2D2D2D;line-height:1.08;letter-spacing:-.02em;">
              {{ block.settings.hiw_heading | default: 'In Sekunden am Handgelenk' }}
            </h2>
          </div>
          <div class="hiw-wrapper" style="display:grid;grid-template-columns:1fr 0.56fr;gap:16px;align-items:start;margin-bottom:16px;">
            <div>
              <div style="overflow:hidden;background:#F5F3EF;position:relative;">
                {%- if block.settings.hiw_image != blank -%}
                  <div style="position:relative;width:100%;padding-top:100%;">
                    {{ block.settings.hiw_image | image_url: width: 1200 | image_tag:
                      loading: 'lazy', alt: 'WristPop Armband einbauen',
                      style: 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;'
                    }}
                  </div>
                {%- else -%}
                  <div style="width:100%;padding-top:100%;position:relative;background:#EDE9E2;">
                    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;">
                      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#CBC6BC" stroke-width="1"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                      <p style="font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#B8B5AF;font-family:'DM Sans',sans-serif;">Bild hochladen</p>
                    </div>
                  </div>
                {%- endif -%}
              </div>
              <p style="font-size:12.5px;color:#8A8880;line-height:1.7;font-weight:300;font-family:'DM Sans',sans-serif;padding:12px 4px 0;">{{ block.settings.hiw_caption_left | default: 'Das fertige Armband – die Swatch Royal Pop sitzt bündig im Gehäuse, am Handgelenk getragen.' }}</p>
            </div>
            <div>
              <div style="overflow:hidden;background:#EDE9E2;position:relative;">
                {%- if block.settings.hiw_video != blank -%}
                  <div style="position:relative;width:100%;padding-top:177.78%;">
                    <video src="{{ block.settings.hiw_video }}" controls playsinline preload="metadata"
                      {%- if block.settings.hiw_video_poster != blank %} poster="{{ block.settings.hiw_video_poster | image_url: width: 800 }}"{% endif %}
                      style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;background:#1A1A1A;"></video>
                  </div>
                {%- elsif block.settings.hiw_image_right != blank -%}
                  <div style="position:relative;width:100%;padding-top:177.78%;">
                    {{ block.settings.hiw_image_right | image_url: width: 800 | image_tag:
                      loading: 'lazy', alt: 'WristPop einbauen',
                      style: 'position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;'
                    }}
                  </div>
                {%- else -%}
                  <div style="width:100%;padding-top:177.78%;position:relative;background:#EDE9E2;">
                    <div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;">
                      <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#CBC6BC" stroke-width="1"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>
                      <p style="font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#B8B5AF;font-family:'DM Sans',sans-serif;">Video URL einfügen</p>
                    </div>
                  </div>
                {%- endif -%}
              </div>
              <p style="font-size:12.5px;color:#8A8880;line-height:1.7;font-weight:300;font-family:'DM Sans',sans-serif;padding:12px 4px 0;">{{ block.settings.hiw_caption_right | default: 'Einrasten, fertig. Kein Werkzeug, keine Modifikation.' }}</p>
            </div>
          </div>
        </div>
      </div>

    {%- elsif block.type == 'guarantee' -%}
      <div style="background:#2D2D2D;border-top:1px solid #E4E0D8;padding:clamp(44px,5.5vw,72px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:920px;margin:0 auto;text-align:center;">
          <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;margin-bottom:14px;">{{ block.settings.eyebrow | default: 'Unser Versprechen' }}</div>
          <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,40px);font-weight:300;color:#FAFAF8;letter-spacing:-.02em;line-height:1.15;margin-bottom:40px;">{{ block.settings.heading | default: 'Kauf ohne Risiko' }}</h2>
          <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;" class="kpd-guarantee-grid" id="kpd-guarantee-track">

            <div class="kpd-guarantee-item" style="display:flex;flex-direction:column;align-items:center;gap:12px;">
              <div style="width:52px;height:52px;border-radius:50%;border:1px solid rgba(154,123,60,.4);display:flex;align-items:center;justify-content:center;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/></svg>
              </div>
              <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;color:#FAFAF8;font-weight:300;">{%- if is_it -%}2 anni di garanzia{%- elsif is_en -%}2-Year Warranty{%- else -%}2 Jahre Gewährleistung{%- endif -%}</div>
              <p style="font-size:12.5px;color:rgba(250,250,248,.55);line-height:1.6;font-family:'DM Sans',sans-serif;max-width:240px;">{%- if is_it -%}Garanzia legale su difetti di materiale e fabbricazione – inclusa, naturalmente.{%- elsif is_en -%}Statutory warranty on material and manufacturing defects — included as standard.{%- else -%}Gesetzliche Gewährleistung auf Material- und Herstellungsfehler – selbstverständlich inklusive.{%- endif -%}</p>
            </div>

            <div class="kpd-guarantee-item" style="display:flex;flex-direction:column;align-items:center;gap:12px;">
              <div style="width:52px;height:52px;border-radius:50%;border:1px solid rgba(154,123,60,.4);display:flex;align-items:center;justify-content:center;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.5"><path d="M9 12l2 2 4-4"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/><path d="M3 5c0-1.66 4-3 9-3s9 1.34 9 3-4 3-9 3-9-1.34-9-3z"/></svg>
              </div>
              <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;color:#FAFAF8;font-weight:300;">{%- if is_it -%}30 giorni soddisfatti o rimborsati{%- elsif is_en -%}30-Day Money-Back{%- else -%}30 Tage Geld-zurück{%- endif -%}</div>
              <p style="font-size:12.5px;color:rgba(250,250,248,.55);line-height:1.6;font-family:'DM Sans',sans-serif;max-width:240px;">{%- if is_it -%}Non sei soddisfatto? Rispediscilo entro 30 giorni – ti rimborsiamo l'intero importo.{%- elsif is_en -%}Not satisfied? Send it back within 30 days — we'll refund the full purchase price.{%- else -%}Nicht zufrieden? Schick es innerhalb von 30 Tagen zurück – wir erstatten dir den vollen Kaufpreis.{%- endif -%}</p>
            </div>

            <div class="kpd-guarantee-item" style="display:flex;flex-direction:column;align-items:center;gap:12px;">
              <div style="width:52px;height:52px;border-radius:50%;border:1px solid rgba(154,123,60,.4);display:flex;align-items:center;justify-content:center;">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
              </div>
              <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:19px;color:#FAFAF8;font-weight:300;">{%- if is_it -%}Controllato singolarmente{%- elsif is_en -%}Individually Inspected{%- else -%}Einzeln geprüft{%- endif -%}</div>
              <p style="font-size:12.5px;color:rgba(250,250,248,.55);line-height:1.6;font-family:'DM Sans',sans-serif;max-width:240px;">{%- if is_it -%}Ogni cinturino viene controllato a mano prima della spedizione – per una qualità costante.{%- elsif is_en -%}Every strap is hand-checked before shipping — for consistent quality.{%- else -%}Jedes Armband wird vor dem Versand von Hand kontrolliert – für gleichbleibende Qualität.{%- endif -%}</p>
            </div>

          </div>
          <div class="kpd-guarantee-dots" style="display:none;justify-content:center;gap:8px;margin-top:24px;">
            <span class="kpd-gdot" style="width:7px;height:7px;border-radius:50%;background:#9A7B3C;transition:all .3s;"></span>
            <span class="kpd-gdot" style="width:7px;height:7px;border-radius:50%;background:rgba(250,250,248,.25);transition:all .3s;"></span>
            <span class="kpd-gdot" style="width:7px;height:7px;border-radius:50%;background:rgba(250,250,248,.25);transition:all .3s;"></span>
          </div>
        </div>
      </div>

    {%- elsif block.type == 'comparison' -%}
      <div style="background:#F5F3EF;border-top:1px solid #E4E0D8;padding:clamp(48px,6vw,80px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:780px;margin:0 auto;">
          <div style="text-align:center;margin-bottom:40px;">
            <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;margin-bottom:14px;">{%- if block.settings.eyebrow != blank -%}{{ block.settings.eyebrow }}{%- elsif is_en -%}The Difference{%- else -%}Der Unterschied{%- endif -%}</div>
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,40px);font-weight:300;color:#2D2D2D;letter-spacing:-.02em;line-height:1.15;">{%- if block.settings.heading != blank -%}{{ block.settings.heading }}{%- elsif is_en -%}Why WristPop?{%- else -%}Warum WristPop?{%- endif -%}</h2>
          </div>

          <div style="background:#FFFFFF;border:1px solid #E4E0D8;overflow:hidden;">
            {%- comment -%} Kopfzeile {%- endcomment -%}
            <div style="display:grid;grid-template-columns:1fr 80px 80px;background:#2D2D2D;">
              <div style="padding:16px 20px;"></div>
              <div style="padding:16px 8px;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;color:#FAFAF8;border-left:1px solid rgba(255,255,255,.12);">WristPop</div>
              <div style="padding:16px 8px;text-align:center;font-family:'DM Sans',sans-serif;font-size:11px;color:rgba(250,250,248,.55);letter-spacing:.04em;border-left:1px solid rgba(255,255,255,.12);line-height:1.3;">{%- if block.settings.competitor_label != blank -%}{{ block.settings.competitor_label }}{%- elsif is_en -%}Others{%- else -%}Andere{%- endif -%}</div>
            </div>

            {%- comment -%} Zeilen mit Icons {%- endcomment -%}
            {%- if block.settings.rows != blank -%}
              {%- assign rows = block.settings.rows | split: '|' -%}
            {%- elsif is_en -%}
              {%- assign rows = 'Full ceramic & premium materials|Exact fit for Swatch Royal Pop|Each piece individually inspected|Ships from Germany|Premium box included' | split: '|' -%}
            {%- else -%}
              {%- assign rows = 'Vollkeramik & hochwertige Materialien|Exakte Passform für Swatch Royal Pop|Jedes Stück einzeln geprüft|Versand aus Deutschland|Inklusive Premium-Box' | split: '|' -%}
            {%- endif -%}
            {%- for row in rows -%}
              <div style="display:grid;grid-template-columns:1fr 80px 80px;border-top:1px solid #E4E0D8;align-items:center;">
                <div style="padding:15px 20px;display:flex;align-items:center;gap:13px;">
                  <span style="flex-shrink:0;display:inline-flex;width:34px;height:34px;border-radius:50%;background:#F5F3EF;align-items:center;justify-content:center;">
                    {%- case forloop.index -%}
                    {%- when 1 -%}<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><path d="M6 3h12l4 6-10 13L2 9Z"/><path d="M11 3 8 9l4 13 4-13-3-6"/><path d="M2 9h20"/></svg>
                    {%- when 2 -%}<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="2"/></svg>
                    {%- when 3 -%}<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z"/><path d="m9 12 2 2 4-4"/></svg>
                    {%- when 4 -%}<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><rect x="3" y="6" width="18" height="12" rx="1"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="3" y1="14" x2="21" y2="14"/></svg>
                    {%- when 5 -%}<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
                    {%- else -%}<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="1.6"><circle cx="12" cy="12" r="9"/></svg>
                    {%- endcase -%}
                  </span>
                  <span style="font-family:'DM Sans',sans-serif;font-size:13.5px;color:#2D2D2D;line-height:1.4;">{{ row }}</span>
                </div>
                <div style="padding:15px 8px;text-align:center;border-left:1px solid #E4E0D8;">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="2.5" style="display:inline-block;"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div style="padding:15px 8px;text-align:center;border-left:1px solid #E4E0D8;">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#C9C4BC" stroke-width="2.5" style="display:inline-block;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
                </div>
              </div>
            {%- endfor -%}
          </div>
        </div>
      </div>

    {%- elsif block.type == 'lifestyle_gallery' -%}
      {%- assign kpd_imgs = '' -%}
      {%- if block.settings.img1 != blank -%}{%- assign kpd_imgs = kpd_imgs | append: 'A' -%}{%- endif -%}
      {%- if block.settings.img2 != blank -%}{%- assign kpd_imgs = kpd_imgs | append: 'A' -%}{%- endif -%}
      {%- if block.settings.img3 != blank -%}{%- assign kpd_imgs = kpd_imgs | append: 'A' -%}{%- endif -%}
      {%- if block.settings.img4 != blank -%}{%- assign kpd_imgs = kpd_imgs | append: 'A' -%}{%- endif -%}
      {%- if block.settings.img5 != blank -%}{%- assign kpd_imgs = kpd_imgs | append: 'A' -%}{%- endif -%}
      {%- if block.settings.img6 != blank -%}{%- assign kpd_imgs = kpd_imgs | append: 'A' -%}{%- endif -%}
      {%- assign kpd_img_count = kpd_imgs | size -%}
      {%- if kpd_img_count > 0 -%}
      <div style="padding:clamp(44px,6vw,80px) clamp(20px,4vw,64px);background:#FFFFFF;" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1200px;margin:0 auto;">

          {%- comment -%} KOPF {%- endcomment -%}
          <div style="text-align:center;margin-bottom:clamp(28px,4vw,44px);">
            {%- if block.settings.eyebrow != blank -%}
            <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;">
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
              {{ block.settings.eyebrow }}
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
            </div>
            {%- endif -%}
            {%- if block.settings.heading != blank -%}
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,3.4vw,42px);font-weight:300;color:#2D2D2D;line-height:1.15;margin:0 0 12px;">{{ block.settings.heading }}</h2>
            {%- endif -%}
            {%- if block.settings.subtext != blank -%}
            <p style="font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.7;color:#8A8880;max-width:600px;margin:0 auto;">{{ block.settings.subtext }}</p>
            {%- endif -%}
          </div>

          {%- comment -%} SLIDER (Desktop 3 sichtbar, Mobile 1) {%- endcomment -%}
          <div class="kpd-ls-slider-wrap">
            <button type="button" class="kpd-ls-arrow kpd-ls-arrow--prev" id="kpd-ls-prev-{{ block.id }}" aria-label="Zurück">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2D2D2D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
            </button>
            <div class="kpd-lifestyle-grid" id="kpd-ls-grid-{{ block.id }}">
            {%- if block.settings.img1 != blank -%}<div class="kpd-lifestyle-cell"><img src="{{ block.settings.img1 | image_url: width: 800 }}" srcset="{{ block.settings.img1 | image_url: width: 400 }} 400w, {{ block.settings.img1 | image_url: width: 800 }} 800w" sizes="(max-width:768px) 100vw, 33vw" alt="{{ block.settings.heading | default: 'WristPop' | escape }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;"></div>{%- endif -%}
            {%- if block.settings.img2 != blank -%}<div class="kpd-lifestyle-cell"><img src="{{ block.settings.img2 | image_url: width: 800 }}" srcset="{{ block.settings.img2 | image_url: width: 400 }} 400w, {{ block.settings.img2 | image_url: width: 800 }} 800w" sizes="(max-width:768px) 100vw, 33vw" alt="{{ block.settings.heading | default: 'WristPop' | escape }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;"></div>{%- endif -%}
            {%- if block.settings.img3 != blank -%}<div class="kpd-lifestyle-cell"><img src="{{ block.settings.img3 | image_url: width: 800 }}" srcset="{{ block.settings.img3 | image_url: width: 400 }} 400w, {{ block.settings.img3 | image_url: width: 800 }} 800w" sizes="(max-width:768px) 100vw, 33vw" alt="{{ block.settings.heading | default: 'WristPop' | escape }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;"></div>{%- endif -%}
            {%- if block.settings.img4 != blank -%}<div class="kpd-lifestyle-cell"><img src="{{ block.settings.img4 | image_url: width: 800 }}" srcset="{{ block.settings.img4 | image_url: width: 400 }} 400w, {{ block.settings.img4 | image_url: width: 800 }} 800w" sizes="(max-width:768px) 100vw, 33vw" alt="{{ block.settings.heading | default: 'WristPop' | escape }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;"></div>{%- endif -%}
            {%- if block.settings.img5 != blank -%}<div class="kpd-lifestyle-cell"><img src="{{ block.settings.img5 | image_url: width: 800 }}" srcset="{{ block.settings.img5 | image_url: width: 400 }} 400w, {{ block.settings.img5 | image_url: width: 800 }} 800w" sizes="(max-width:768px) 100vw, 33vw" alt="{{ block.settings.heading | default: 'WristPop' | escape }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;"></div>{%- endif -%}
            {%- if block.settings.img6 != blank -%}<div class="kpd-lifestyle-cell"><img src="{{ block.settings.img6 | image_url: width: 800 }}" srcset="{{ block.settings.img6 | image_url: width: 400 }} 400w, {{ block.settings.img6 | image_url: width: 800 }} 800w" sizes="(max-width:768px) 100vw, 33vw" alt="{{ block.settings.heading | default: 'WristPop' | escape }}" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block;"></div>{%- endif -%}
          </div>
            <button type="button" class="kpd-ls-arrow kpd-ls-arrow--next" id="kpd-ls-next-{{ block.id }}" aria-label="Weiter">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#2D2D2D" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
            </button>
          </div>
          {%- comment -%} Dots {%- endcomment -%}
          <div class="kpd-ls-dots" id="kpd-ls-dots-{{ block.id }}" aria-hidden="true"></div>
        </div>
      </div>
      <script>
      (function(){
        function initLsSlider(){
          var grid = document.getElementById('kpd-ls-grid-{{ block.id }}');
          var dotsWrap = document.getElementById('kpd-ls-dots-{{ block.id }}');
          var prev = document.getElementById('kpd-ls-prev-{{ block.id }}');
          var next = document.getElementById('kpd-ls-next-{{ block.id }}');
          if(!grid) return;
          var cells = grid.querySelectorAll('.kpd-lifestyle-cell');
          if(cells.length < 2) {
            if(prev) prev.style.display='none';
            if(next) next.style.display='none';
            return;
          }

          if(dotsWrap && !dotsWrap.children.length){
            for(var i=0;i<cells.length;i++){
              var d = document.createElement('span');
              d.className = 'kpd-ls-dot' + (i===0 ? ' kpd-ls-dot--active' : '');
              dotsWrap.appendChild(d);
            }
          }
          var dots = dotsWrap ? dotsWrap.querySelectorAll('.kpd-ls-dot') : [];

          function updateArrows(){
            if(!prev || !next) return;
            var maxScroll = grid.scrollWidth - grid.clientWidth;
            prev.disabled = grid.scrollLeft <= 4;
            next.disabled = maxScroll <= 4 || grid.scrollLeft >= maxScroll - 4;
          }

          var ticking = false;
          grid.addEventListener('scroll', function(){
            if(ticking) return;
            ticking = true;
            requestAnimationFrame(function(){
              ticking = false;
              var idx = Math.round(grid.scrollLeft / grid.clientWidth);
              for(var i=0;i<dots.length;i++){
                dots[i].className = 'kpd-ls-dot' + (i===idx ? ' kpd-ls-dot--active' : '');
              }
              updateArrows();
            });
          }, { passive:true });

          function step(){
            var cell = grid.querySelector('.kpd-lifestyle-cell');
            var gap = 14;
            return cell ? cell.getBoundingClientRect().width + gap : Math.round(grid.clientWidth * 0.8);
          }
          if(prev) prev.onclick = function(e){ e.preventDefault(); grid.scrollBy({ left: -step(), behavior: 'smooth' }); };
          if(next) next.onclick = function(e){ e.preventDefault(); grid.scrollBy({ left: step(), behavior: 'smooth' }); };

          updateArrows();
          // Nach dem Laden der Bilder Breiten neu berechnen
          window.addEventListener('load', updateArrows);
          setTimeout(updateArrows, 500);
        }
        if(document.readyState === 'loading'){
          document.addEventListener('DOMContentLoaded', initLsSlider);
        } else {
          initLsSlider();
        }
      })();
      </script>
      <style>
        .kpd-ls-slider-wrap { position:relative; }
        .kpd-lifestyle-grid {
          display:flex;
          gap:clamp(10px,1.4vw,18px);
          overflow-x:auto;
          scroll-snap-type:x mandatory;
          -webkit-overflow-scrolling:touch;
          scrollbar-width:none;
          padding-bottom:4px;
        }
        .kpd-lifestyle-grid::-webkit-scrollbar { display:none; }
        .kpd-lifestyle-cell {
          flex:0 0 calc((100% - 2 * clamp(10px,1.4vw,18px)) / {% if kpd_img_count > 3 %}3.2{% else %}3{% endif %});
          scroll-snap-align:start;
          aspect-ratio:4/5;
          overflow:hidden;
          background:#F5F3EF;
        }
        /* Pfeile (Desktop) */
        .kpd-ls-arrow {
          position:absolute;top:50%;transform:translateY(-50%);
          width:44px;height:44px;border-radius:50%;
          background:rgba(255,255,255,.92);border:1px solid #E4E0D8;
          display:flex;align-items:center;justify-content:center;
          cursor:pointer;z-index:3;transition:background .2s,box-shadow .2s;
          box-shadow:0 3px 12px rgba(0,0,0,.1);
        }
        .kpd-ls-arrow:hover { background:#FFFFFF;box-shadow:0 4px 16px rgba(0,0,0,.16); }
        .kpd-ls-arrow--prev { left:-10px; }
        .kpd-ls-arrow--next { right:-10px; }
        .kpd-ls-arrow[disabled] { opacity:.3;cursor:default;box-shadow:none; }
        .kpd-ls-dots { display:none; }
        @media (max-width: 768px) {
          /* Mobile: 1 grosses Bild, Pfeile aus, Dots an */
          .kpd-lifestyle-cell { flex:0 0 82%; scroll-snap-align:center; }
          .kpd-ls-arrow { display:none; }
          .kpd-ls-dots {
            display:flex;justify-content:center;gap:7px;margin-top:16px;
          }
          .kpd-ls-dot {
            width:7px;height:7px;border-radius:50%;
            background:#D8D4CC;transition:background .25s,width .25s;
          }
          .kpd-ls-dot--active { background:#9A7B3C;width:20px;border-radius:4px; }
        }
      </style>
      {%- endif -%}

    {%- elsif block.type == 'certificate' -%}
      <div style="background:#2D2D2D;border-top:1px solid #E4E0D8;padding:clamp(48px,6vw,80px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1320px;margin:0 auto;">

          {%- comment -%} KOPF {%- endcomment -%}
          <div style="text-align:center;margin-bottom:clamp(32px,4vw,48px);">
            <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;">
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
              {%- if block.settings.eyebrow != blank -%}{{ block.settings.eyebrow }}{%- elsif is_en -%}Independently Tested{%- else -%}Unabhängig geprüft{%- endif -%}
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
            </div>
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,3.4vw,42px);font-weight:300;color:#FAFAF8;line-height:1.15;margin:0 0 14px;">
              {%- if block.settings.heading != blank -%}{{ block.settings.heading }}{%- elsif is_en -%}Not just a claim.{%- else -%}Kein Versprechen. Ein Nachweis.{%- endif -%}
            </h2>
            {%- if block.settings.subtext != blank -%}
              <p style="font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.7;color:#A8A69E;max-width:620px;margin:0 auto;">{{ block.settings.subtext }}</p>
            {%- endif -%}
          </div>

          {%- comment -%} SIEGEL + WERTE {%- endcomment -%}
          <div class="kpd-cert-grid" style="display:grid;grid-template-columns:auto 1fr;gap:clamp(32px,5vw,64px);align-items:center;">

            {%- comment -%} PRUEFSIEGEL {%- endcomment -%}
            <div style="display:flex;flex-direction:column;align-items:center;gap:16px;">
              <div style="width:150px;height:150px;border-radius:50%;border:1px solid #9A7B3C;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex-shrink:0;">
                <div style="position:absolute;inset:7px;border-radius:50%;border:1px solid rgba(154,123,60,.3);"></div>
                <span style="font-family:'Cormorant Garamond',Georgia,serif;font-size:44px;font-weight:300;color:#9A7B3C;line-height:1;">
                  {{ block.settings.big_number | default: '97%' }}
                </span>
                <span style="font-family:'DM Sans',sans-serif;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:#A8A69E;margin-top:6px;text-align:center;padding:0 18px;line-height:1.5;">
                  {%- if is_it -%}Carbonio biobasato{%- elsif is_en -%}Biobased Carbon{%- else -%}Biobasierter Kohlenstoff{%- endif -%}
                </span>
              </div>
              <span style="font-family:'DM Sans',sans-serif;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#6E6C66;text-align:center;line-height:1.6;">
                ASTM D6866<br>ISO/IEC 17025
              </span>
            </div>

            {%- comment -%} RECHTE SPALTE {%- endcomment -%}
            <div>
              {%- if block.settings.body != blank -%}
                <div style="font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.8;color:#C4C2BA;margin-bottom:28px;">{{ block.settings.body }}</div>
              {%- endif -%}

              {%- comment -%} MESSWERTE {%- endcomment -%}
              {%- if block.settings.specs != blank -%}
                {%- assign spec_rows = block.settings.specs | split: '|' -%}
                <div class="kpd-cert-specs" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:rgba(154,123,60,.2);border:1px solid rgba(154,123,60,.2);margin-bottom:28px;">
                  {%- for row in spec_rows -%}
                    {%- assign cells = row | strip | split: ':' -%}
                    {%- if cells.size >= 2 -%}
                      <div style="background:#2D2D2D;padding:18px 16px;text-align:center;">
                        <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:24px;font-weight:300;color:#FAFAF8;line-height:1.1;margin-bottom:6px;">{{ cells[1] | strip }}</div>
                        <div style="font-family:'DM Sans',sans-serif;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8A8880;line-height:1.5;">{{ cells[0] | strip }}</div>
                      </div>
                    {%- endif -%}
                  {%- endfor -%}
                </div>
              {%- endif -%}

              {%- comment -%} PDF-LINK {%- endcomment -%}
              {%- if block.settings.pdf_url != blank -%}
                <a href="{{ block.settings.pdf_url }}" target="_blank" rel="noopener"
                   style="display:inline-flex;align-items:center;gap:12px;padding:14px 24px;border:1px solid #9A7B3C;color:#9A7B3C;text-decoration:none;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;transition:background .25s,color .25s;"
                   onmouseover="this.style.background='#9A7B3C';this.style.color='#2D2D2D';"
                   onmouseout="this.style.background='transparent';this.style.color='#9A7B3C';">
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                  {%- if block.settings.pdf_label != blank -%}{{ block.settings.pdf_label }}{%- elsif is_en -%}View lab report{%- else -%}Prüfbericht ansehen{%- endif -%}
                </a>
              {%- endif -%}

              {%- if block.settings.footnote != blank -%}
                <p style="font-family:'DM Sans',sans-serif;font-size:11px;line-height:1.7;color:#6E6C66;margin:20px 0 0;">{{ block.settings.footnote }}</p>
              {%- endif -%}
            </div>
          </div>
        </div>
      </div>

    {%- elsif block.type == 'box_feature' -%}
      <div style="background:{% if block.settings.dark_bg %}#2D2D2D{% else %}#F5F3EF{% endif %};border-top:1px solid #E4E0D8;padding:clamp(48px,6vw,80px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1320px;margin:0 auto;">
          <div class="kpd-box-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center;">

            {%- comment -%} BILD {%- endcomment -%}
            <div style="order:{% if block.settings.image_right %}2{% else %}1{% endif %};">
              {%- assign box_img = block.settings.image -%}
              {%- if is_en and block.settings.image_en != blank -%}{%- assign box_img = block.settings.image_en -%}{%- endif -%}
              {%- if box_img != blank -%}
                <img src="{{ box_img | image_url: width: 1200 }}" alt="{{ block.settings.heading | escape }}" loading="lazy" style="width:100%;height:auto;border-radius:4px;display:block;">
              {%- else -%}
                <div style="aspect-ratio:1/1;background:#E4E0D8;border-radius:4px;display:flex;align-items:center;justify-content:center;color:#9A7B3C;font-family:'DM Sans',sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;">Bild hochladen</div>
              {%- endif -%}
            </div>

            {%- comment -%} TEXT {%- endcomment -%}
            <div style="order:{% if block.settings.image_right %}1{% else %}2{% endif %};">
              <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;gap:14px;margin-bottom:16px;">
                <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>{%- if block.settings.eyebrow != blank -%}{{ block.settings.eyebrow }}{%- elsif is_en -%}Included{%- else -%}Inklusive{%- endif -%}
              </div>
              <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,40px);font-weight:300;color:{% if block.settings.dark_bg %}#FAFAF8{% else %}#2D2D2D{% endif %};line-height:1.15;letter-spacing:-.02em;margin-bottom:18px;">{%- if block.settings.heading != blank -%}{{ block.settings.heading }}{%- elsif is_en -%}Premium WristPop Box{%- else -%}Hochwertige WristPop Box{%- endif -%}</h2>
              <p style="font-size:14px;color:{% if block.settings.dark_bg %}rgba(250,250,248,.6){% else %}#8A8880{% endif %};line-height:1.8;font-weight:300;font-family:'DM Sans',sans-serif;margin-bottom:28px;">{%- if block.settings.text != blank -%}{{ block.settings.text }}{%- elsif is_en -%}Every WristPop strap arrives in an elegant box with a matte finish and soft lining — built for protection and made to impress. Perfect to gift or as a treat for yourself.{%- else -%}Jedes WristPop Armband kommt in einer edlen Box mit mattem Finish und weichem Innenfutter – entwickelt für Schutz und gemacht für den großen Eindruck. Perfekt zum Verschenken oder als Krönung für dich selbst.{%- endif -%}</p>

              {%- comment -%} FEATURE-PUNKTE {%- endcomment -%}
              <div style="display:flex;flex-direction:column;gap:14px;">
                {%- if block.settings.features != blank -%}
                  {%- assign feat = block.settings.features | split: '|' -%}
                {%- elsif is_en -%}
                  {%- assign feat = 'Soft lining protects your watch|Includes cushion for a secure hold|Premium packaging with an elegant feel|Perfect for gifting' | split: '|' -%}
                {%- else -%}
                  {%- assign feat = 'Weiches Innenfutter schützt deine Uhr|Inklusive Kissen für sicheren Halt|Premium-Verpackung mit edler Haptik|Perfekt zum Verschenken' | split: '|' -%}
                {%- endif -%}
                {%- for f in feat -%}
                  <div style="display:flex;align-items:flex-start;gap:11px;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9A7B3C" stroke-width="2" style="flex-shrink:0;margin-top:2px;"><polyline points="20 6 9 17 4 12"/></svg>
                    <span style="font-size:13.5px;color:{% if block.settings.dark_bg %}rgba(250,250,248,.85){% else %}#4A4845{% endif %};font-family:'DM Sans',sans-serif;line-height:1.5;">{{ f }}</span>
                  </div>
                {%- endfor -%}
              </div>
            </div>

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

    {%- elsif block.type == 'judgeme_reviews' -%}
      <div style="background:#FAFAF8;border-top:1px solid #E4E0D8;padding:clamp(40px,5vw,72px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1100px;margin:0 auto;">
          {%- if block.settings.heading != blank -%}
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,40px);font-weight:300;color:#2D2D2D;letter-spacing:-.02em;text-align:center;margin-bottom:32px;">{{ block.settings.heading }}</h2>
          {%- endif -%}
          {%- comment -%} Judge.me Review-Widget {%- endcomment -%}
          <!-- Start of Judge.me code -->
          {% assign has_legacy = false %}
          {% if product.metafields.judgeme.widget.size > 20 %}{% assign has_legacy = true %}{% endif %}
          <div style='clear:both'></div>
          <div id='judgeme_product_reviews' class='jdgm-widget jdgm-review-widget' data-product-title='{{ product.title | escape }}' data-id='{{ product.id }}' data-product-id='{{ product.id }}' data-widget='review' data-auto-install='false' data-shop-reviews-count='{{ shop.metafields.judgeme.shop_reviews_count | default: 0 | escape }}' data-entry-point='review_widget.js' data-entry-key='review-widget/main.js'>
            {% if has_legacy %}<div class='jdgm-legacy-widget-content' style='display: none;'>{{ product.metafields.judgeme.widget }}</div>{% endif %}
          </div>
          {% if product.metafields.judgeme.review_widget_data %}<script>jdgm.data ||= {}; jdgm.data.reviewWidget ||= {}; jdgm.data.reviewWidget[{{ product.id }}] = {{ product.metafields.judgeme.review_widget_data }}</script>{% endif %}
          <!-- End of Judge.me code -->
        </div>
      </div>

    {%- elsif block.type == 'reviews' -%}
      <div style="background:#FAFAF8;border-top:1px solid #E4E0D8;padding:clamp(48px,6vw,80px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1320px;margin:0 auto;">
          <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:36px;flex-wrap:wrap;gap:16px;">
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,40px);font-weight:300;color:#2D2D2D;letter-spacing:-.02em;">{{ block.settings.heading | default: 'Was unsere Kunden sagen' }}</h2>
            <div style="text-align:right;">
              <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:44px;font-weight:300;color:#2D2D2D;line-height:1;">{{ block.settings.rating | default: '4.9' }}</div>
              <div style="color:#9A7B3C;font-size:14px;letter-spacing:2px;">★★★★★</div>
              <div style="font-size:11px;color:#B8B5AF;font-family:'DM Sans',sans-serif;">{{ block.settings.review_count | default: 'Erste Bewertungen' }}</div>
            </div>
          </div>
          <div class="kpd-reviews-grid" style="display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#E4E0D8;border:1px solid #E4E0D8;">
            {%- for i in (1..3) -%}
              {%- assign r_text = 'review_text_' | append: i -%}
              {%- assign r_author = 'review_author_' | append: i -%}
              {%- assign r_color = 'review_color_' | append: i -%}
              {%- if block.settings[r_text] != blank -%}
                <div style="background:#FFFFFF;padding:26px 26px 30px;">
                  <div style="color:#9A7B3C;font-size:13px;letter-spacing:2px;margin-bottom:12px;">★★★★★</div>
                  <p style="font-family:'Cormorant Garamond',Georgia,serif;font-size:16px;font-style:italic;font-weight:300;color:#2D2D2D;line-height:1.65;margin-bottom:18px;">„{{ block.settings[r_text] }}"</p>
                  <div style="font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#B8B5AF;font-family:'DM Sans',sans-serif;">— {{ block.settings[r_author] }}</div>
                  {%- if block.settings[r_color] != blank -%}
                    <div style="font-size:10px;color:#9A7B3C;margin-top:4px;font-family:'DM Sans',sans-serif;">✓ Verifizierter Kauf · {{ block.settings[r_color] }}</div>
                  {%- endif -%}
                </div>
              {%- endif -%}
            {%- endfor -%}
          </div>
        </div>
      </div>

    {%- elsif block.type == 'banner_image' -%}
      <div style="border-top:1px solid #E4E0D8;" data-reveal {{ block.shopify_attributes }}>
        {%- assign banner_img = block.settings.image -%}
        {%- if is_en and block.settings.image_en != blank -%}{%- assign banner_img = block.settings.image_en -%}{%- endif -%}
        {%- if banner_img != blank -%}
          <div style="{% if block.settings.height == 'small' %}height:300px{% elsif block.settings.height == 'large' %}height:600px{% else %}height:450px{% endif %};overflow:hidden;position:relative;">
            {{ banner_img | image_url: width: 2000 | image_tag: loading: 'lazy', alt: block.settings.heading, style: 'width:100%;height:100%;object-fit:cover;' }}
            {%- if block.settings.heading != blank -%}
              <div style="position:absolute;inset:0;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;">
                <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(32px,5vw,64px);font-weight:300;color:#FAFAF8;letter-spacing:-.02em;text-align:center;padding:0 20px;">{{ block.settings.heading }}</h2>
              </div>
            {%- endif -%}
          </div>
        {%- else -%}
          <div style="height:300px;background:#EDE9E2;display:flex;align-items:center;justify-content:center;">
            <p style="font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B8B5AF;font-family:'DM Sans',sans-serif;">Bannerbild hochladen</p>
          </div>
        {%- endif -%}
      </div>

    {%- elsif block.type == 'judgeme_carousel' -%}
      <div id="kpd-reviews-carousel" style="background:#F5F3EF;border-top:1px solid #E4E0D8;padding:clamp(40px,5vw,72px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1200px;margin:0 auto;">
          <!-- Start of Judge.me code -->
          <div class='jdgm-carousel-wrapper'>
            {% assign jm_metafields = shop.metafields.judgeme %}
            <div class='jdgm-carousel-title-and-link'>
              <h2 class='jdgm-carousel-title'>{{ block.settings.heading | default: 'Das sagen unsere Kunden' }}</h2>
              <span class='jdgm-all-reviews-rating-wrapper' href='javascript:void(0)'>
                <span style='display:block' data-score='{{ jm_metafields.all_reviews_rating }}' class='jdgm-all-reviews-rating' aria-label='{{ jm_metafields.all_reviews_rating }} stars' tabindex='0' role='img'></span>
                <span style='display: block' class='jdgm-carousel-number-of-reviews' data-number-of-reviews='{{ jm_metafields.all_reviews_count }}'>
{%- if is_it -%}su {{ shop.metafields.judgeme.all_reviews_count }} recensioni{%- elsif is_en -%}from {{ shop.metafields.judgeme.all_reviews_count }} reviews{%- else -%}aus {{ shop.metafields.judgeme.all_reviews_count }} Bewertungen{%- endif -%}
                </span>
              </span>
            </div>
            {{ jm_metafields.featured_carousel }}
          </div>
          <!-- End of Judge.me code -->
        </div>
      </div>

    {%- elsif block.type == 'upsell' -%}
      <div style="background:#FAFAF8;border-top:1px solid #E4E0D8;padding:clamp(40px,5vw,64px) clamp(20px,4vw,64px);" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:1320px;margin:0 auto;">
          <div style="text-align:center;margin-bottom:36px;">
            <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:12px;">
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
              {{ block.settings.heading | default: 'Das könnte dir auch gefallen' }}
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
            </div>
            {%- if block.settings.subtext != blank -%}
              <p style="font-size:13px;color:#B8B5AF;font-family:'DM Sans',sans-serif;">{{ block.settings.subtext }}</p>
            {%- endif -%}
          </div>

          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;" class="kpd-upsell-grid">

            {%- comment -%} Produkt 1 {%- endcomment -%}
            {%- if block.settings.product_1 != blank -%}
              {%- assign up1 = all_products[block.settings.product_1] -%}
              <a href="{{ up1.url }}" style="background:#FFFFFF;border:1px solid #E4E0D8;display:block;text-decoration:none;transition:border-color .3s,transform .4s cubic-bezier(.16,1,.3,1);" onmouseover="this.style.borderColor='#2D2D2D';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='#E4E0D8';this.style.transform='translateY(0)'">
                <div style="aspect-ratio:1;overflow:hidden;background:#F5F3EF;">
                  {%- if up1.featured_image -%}
                    {{ up1.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: up1.title, style: 'width:100%;height:100%;object-fit:contain;padding:20px;' }}
                  {%- endif -%}
                </div>
                <div style="padding:18px 20px 22px;">
                  {%- if block.settings.product_1_label != blank -%}
                    <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;margin-bottom:6px;">{{ block.settings.product_1_label }}</div>
                  {%- endif -%}
                  <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:300;color:#2D2D2D;margin-bottom:8px;line-height:1.2;">{{ up1.title }}</div>
                  <div class='jdgm-widget jdgm-preview-badge' data-id='{{ up1.id }}' style="margin-bottom:8px;">{{ up1.metafields.judgeme.badge }}</div>
                  <div style="font-size:14px;font-weight:500;color:#9A7B3C;font-family:'DM Sans',sans-serif;">{{ up1.price | money }}</div>
                </div>
              </a>
            {%- endif -%}

            {%- comment -%} Produkt 2 {%- endcomment -%}
            {%- if block.settings.product_2 != blank -%}
              {%- assign up2 = all_products[block.settings.product_2] -%}
              <a href="{{ up2.url }}" style="background:#FFFFFF;border:1px solid #E4E0D8;display:block;text-decoration:none;transition:border-color .3s,transform .4s cubic-bezier(.16,1,.3,1);" onmouseover="this.style.borderColor='#2D2D2D';this.style.transform='translateY(-3px)'" onmouseout="this.style.borderColor='#E4E0D8';this.style.transform='translateY(0)'">
                <div style="aspect-ratio:1;overflow:hidden;background:#F5F3EF;">
                  {%- if up2.featured_image -%}
                    {{ up2.featured_image | image_url: width: 600 | image_tag: loading: 'lazy', alt: up2.title, style: 'width:100%;height:100%;object-fit:contain;padding:20px;' }}
                  {%- endif -%}
                </div>
                <div style="padding:18px 20px 22px;">
                  {%- if block.settings.product_2_label != blank -%}
                    <div style="font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;margin-bottom:6px;">{{ block.settings.product_2_label }}</div>
                  {%- endif -%}
                  <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:20px;font-weight:300;color:#2D2D2D;margin-bottom:8px;line-height:1.2;">{{ up2.title }}</div>
                  <div class='jdgm-widget jdgm-preview-badge' data-id='{{ up2.id }}' style="margin-bottom:8px;">{{ up2.metafields.judgeme.badge }}</div>
                  <div style="font-size:14px;font-weight:500;color:#9A7B3C;font-family:'DM Sans',sans-serif;">{{ up2.price | money }}</div>
                </div>
              </a>
            {%- endif -%}

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

    {%- elsif block.type == 'text_block' -%}
      <div style="padding:clamp(40px,5vw,72px) clamp(20px,4vw,64px);background:{% if block.settings.dark_bg %}#2D2D2D{% else %}#FFFFFF{% endif %};border-top:1px solid #E4E0D8;text-align:{% if block.settings.center %}center{% else %}left{% endif %};" data-reveal {{ block.shopify_attributes }}>
        <div style="max-width:{% if block.settings.center %}680px{% else %}1320px{% endif %};margin:0 auto;">
          {%- if block.settings.eyebrow != blank -%}
            <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;{% if block.settings.center %}justify-content:center;{% endif %}gap:14px;margin-bottom:16px;">
              <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>{{ block.settings.eyebrow }}
            </div>
          {%- endif -%}
          {%- if block.settings.heading != blank -%}
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(26px,3.5vw,48px);font-weight:300;color:{% if block.settings.dark_bg %}#FAFAF8{% else %}#2D2D2D{% endif %};letter-spacing:-.02em;margin-bottom:16px;line-height:1.08;">{{ block.settings.heading }}</h2>
          {%- endif -%}
          {%- if block.settings.text != blank -%}
            <p style="font-size:15px;color:{% if block.settings.dark_bg %}rgba(250,250,248,.6){% else %}#8A8880{% endif %};line-height:1.8;font-weight:300;font-family:'DM Sans',sans-serif;">{{ block.settings.text }}</p>
          {%- endif -%}
        </div>
      </div>

    {%- endif -%}
  {%- endfor -%}


  {%- comment -%}━━━ QUALITÄT ━━━{%- endcomment -%}
  {%- if section.settings.show_hiw -%}

  {%- comment -%}━━━ QUALITÄTS-CLAIMS ━━━{%- endcomment -%}
  <div style="background:#2D2D2D;padding:clamp(48px,6vw,80px) clamp(20px,4vw,64px);" data-reveal>
    <div style="max-width:1320px;margin:0 auto;">

      <div style="text-align:center;margin-bottom:48px;" data-reveal>
        <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;">
          <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
          {{ section.settings.quality_eyebrow | default: 'Qualitätsversprechen' }}
          <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
        </div>
        <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,4vw,48px);font-weight:300;color:#FAFAF8;line-height:1.08;letter-spacing:-.02em;">
          {{ section.settings.quality_heading | default: 'Entwickelt mit Leidenschaft. Geprüft mit Anspruch.' }}
        </h2>
      </div>

      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);" class="kpd-quality-grid" data-reveal>

        {%- assign q1_title = section.settings.q1_title | default: 'Passgenau entwickelt' -%}
        {%- assign q1_text  = section.settings.q1_text  | default: 'Millimetergenaue Passform für alle Swatch Royal Pop Modelle. Kein Wackeln, kein Spiel.' -%}
        {%- assign q2_title = section.settings.q2_title | default: 'Hochwertige Materialien' -%}
        {%- assign q2_text  = section.settings.q2_text  | default: 'Bioceramic, Echtleder, Silikon – dieselben Materialien die Swatch selbst verwendet.' -%}
        {%- assign q3_title = section.settings.q3_title | default: 'Einzeln geprüft' -%}
        {%- assign q3_text  = section.settings.q3_text  | default: 'Jedes Armband wird vor dem Versand auf Passform und Verarbeitung kontrolliert.' -%}
        {%- assign q4_title = section.settings.q4_title | default: '30 Tage Rückgabe' -%}
        {%- assign q4_text  = section.settings.q4_text  | default: 'Gefällt es nicht? 30 Tage kostenlose Rückgabe – unkompliziert und ohne Wenn und Aber.' -%}

        {%- for i in (1..4) -%}
          {%- assign qt = 'q' | append: i | append: '_title' -%}
          {%- assign qx = 'q' | append: i | append: '_text' -%}
          <div style="background:#2D2D2D;padding:32px 26px;transition:background .3s;" onmouseover="this.style.background='#383838'" onmouseout="this.style.background='#2D2D2D'">
            <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:48px;font-weight:300;color:transparent;-webkit-text-stroke:1px rgba(154,123,60,0.35);line-height:1;margin-bottom:16px;">0{{ i }}</div>
            <div style="font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#FAFAF8;margin-bottom:10px;font-family:'DM Sans',sans-serif;">{{ section.settings[qt] | default: 'Punkt' }}</div>
            <div style="font-size:13px;color:rgba(250,250,248,.5);line-height:1.75;font-weight:300;font-family:'DM Sans',sans-serif;">{{ section.settings[qx] }}</div>
          </div>
        {%- endfor -%}

      </div>
    </div>
  </div>
  {%- endif -%}


  {%- comment -%}━━━ FAQ SECTION ━━━{%- endcomment -%}
  {%- assign faq_blocks = section.blocks | where: 'type', 'accordion_tab' -%}
  {%- assign has_faq = false -%}
  {%- for block in faq_blocks -%}
    {%- if block.settings.title contains 'FAQ' -%}{%- assign has_faq = true -%}{%- endif -%}
  {%- endfor -%}
  {%- if has_faq -%}
  <div style="background:#F5F3EF;border-top:1px solid #E4E0D8;padding:clamp(56px,7vw,96px) clamp(20px,4vw,64px);" data-reveal>
    <div style="max-width:1320px;margin:0 auto;">
      <div style="text-align:center;max-width:620px;margin:0 auto 52px;" data-reveal>
        <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;">
          <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
          {%- if is_it -%}Domande frequenti{%- elsif is_en -%}Frequently Asked Questions{%- else -%}Häufige Fragen{%- endif -%}
          <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
        </div>
        <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(30px,4vw,50px);font-weight:300;color:#2D2D2D;line-height:1.08;letter-spacing:-.02em;">{%- if is_it -%}Tutto quello che vuoi sapere{%- elsif is_en -%}Everything you need to know{%- else -%}Alles was du wissen möchtest{%- endif -%}</h2>
      </div>
      <div style="max-width:760px;margin:0 auto;" data-reveal data-delay="2">
        {%- for block in faq_blocks -%}
          {%- if block.settings.title contains 'FAQ' -%}
            <details class="kpd-faq-item" {{ block.shopify_attributes }}>
              <summary class="kpd-faq-summary">
                <span>{{ block.settings.title | remove: 'FAQ – ' }}</span>
                <span class="kpd-faq-icon">
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                </span>
              </summary>
              <div class="kpd-faq-body">{{ block.settings.content }}</div>
            </details>
          {%- endif -%}
        {%- endfor -%}
      </div>
    </div>
  </div>
  {%- endif -%}

  {%- comment -%} WEITERE FARBEN {%- endcomment -%}
  {%- if section.settings.show_related -%}
    {%- assign related_col = section.settings.related_collection | default: product.collections.first -%}
    {%- if related_col.products.size > 1 -%}
      <div style="padding:0 clamp(20px,4vw,64px) clamp(48px,6vw,80px);background:#FFFFFF;border-top:1px solid #E4E0D8;" data-reveal>
        <div style="max-width:1320px;margin:0 auto;">
          <div style="display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;padding-top:clamp(40px,5vw,64px);flex-wrap:wrap;gap:16px;">
            <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(24px,3vw,40px);font-weight:300;color:#2D2D2D;letter-spacing:-.02em;">{%- if is_it -%}{{ section.settings.related_title | default: 'Altri colori' }}{%- elsif is_en -%}{{ section.settings.related_title_en | default: 'More Colours' }}{%- else -%}{{ section.settings.related_title | default: 'Weitere Farben' }}{%- endif -%}</h2>
            <a href="{{ related_col.url }}" style="font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#8A8880;font-family:'DM Sans',sans-serif;text-decoration:none;border-bottom:1px solid #E4E0D8;padding-bottom:2px;">{%- if is_it -%}Vedi tutte →{%- elsif is_en -%}View all →{%- else -%}Alle ansehen →{%- endif -%}</a>
          </div>
          <div class="kpd-related-grid" style="display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#E4E0D8;border:1px solid #E4E0D8;">
            {%- for p in related_col.products limit: 4 -%}
              {%- unless p.id == product.id -%}
                <a href="{{ p.url }}" style="background:#FFFFFF;display:block;text-decoration:none;">
                  <div style="aspect-ratio:1;overflow:hidden;background:#F5F3EF;">
                    {%- if p.featured_image -%}
                      {{ p.featured_image | image_url: width: 400 | image_tag: loading: 'lazy', alt: p.title, style: 'width:100%;height:100%;object-fit:contain;padding:16px;' }}
                    {%- endif -%}
                  </div>
                  <div style="padding:14px 16px 18px;">
                    <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:17px;font-weight:300;color:#2D2D2D;margin-bottom:6px;">{{ p.title }}</div>
                    <div style="font-size:13px;font-weight:500;color:#9A7B3C;font-family:'DM Sans',sans-serif;">{{ p.price | money }}</div>
                  </div>
                </a>
              {%- endunless -%}
            {%- endfor -%}
          </div>
        </div>
      </div>
    {%- endif -%}
  {%- endif -%}

</div>


<script>
  /* Produktdaten. Muessen inline stehen, weil hier Liquid ausgewertet wird.
     Laeuft vor dem defer-Skript. */
  window.kpdVariantsData = {{ product.variants | json }};
</script>



<!-- STICKY ADD TO CART BAR -->
<div id="kpd-sticky-bar" style="position:fixed;bottom:0;left:0;right:0;background:#FFFFFF;border-top:1px solid #E4E0D8;padding:12px 20px;z-index:500;display:flex;align-items:center;gap:12px;box-shadow:0 -4px 20px rgba(0,0,0,.08);transition:transform .35s cubic-bezier(.16,1,.3,1);" class="kpd-sticky-bar">
  <div id="kpd-sticky-img" style="width:48px;height:48px;background:#F5F3EF;border:1px solid #E4E0D8;overflow:hidden;flex-shrink:0;">
    <img id="kpd-sticky-img-el" src="" style="width:100%;height:100%;object-fit:contain;padding:4px;">
  </div>
  <div style="flex:1;min-width:0;">
    <div style="font-family:'Cormorant Garamond',Georgia,serif;font-size:15px;font-weight:300;color:#2D2D2D;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ product.title }}</div>
    <div id="kpd-sticky-price" style="font-size:13px;color:#9A7B3C;font-family:'DM Sans',sans-serif;font-weight:500;"></div>
  </div>
  <button onclick="kpdStickyAddToCart(this)" style="padding:12px 20px;background:#2D2D2D;color:#FAFAF8;border:none;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:background .2s;" onmouseover="this.style.background='#9A7B3C'" onmouseout="this.style.background='#2D2D2D'">
    {%- if is_it -%}Aggiungi al carrello{%- elsif is_en -%}Add to cart{%- else -%}In den Warenkorb{%- endif -%}
  </button>
</div>

<!-- EXIT INTENT POPUP -->
<div id="kpd-exit-popup" style="display:none;position:fixed;inset:0;z-index:1000;align-items:center;justify-content:center;padding:20px;">
  <div style="position:absolute;inset:0;background:rgba(0,0,0,.6);" onclick="kpdClosePopup()"></div>
  <div style="position:relative;background:#FFFFFF;max-width:440px;width:100%;padding:40px 36px;text-align:center;z-index:1;">
    <button onclick="kpdClosePopup()" style="position:absolute;top:14px;right:14px;background:none;border:none;cursor:pointer;font-size:20px;color:#B8B5AF;-webkit-tap-highlight-color:transparent;">&#10005;</button>
    <div style="font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;margin-bottom:12px;">{%- if is_it -%}Solo per te{%- elsif is_en -%}Just for you{%- else -%}Nur für dich{%- endif -%}</div>
    <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:32px;font-weight:300;color:#2D2D2D;margin-bottom:12px;line-height:1.1;">{%- if is_it -%}Aspetta! Ecco il tuo sconto esclusivo.{%- elsif is_en -%}Wait! Here's your exclusive discount.{%- else -%}Warte! Hier ist dein exklusiver Rabatt.{%- endif -%}</h2>
    <p style="font-size:14px;color:#8A8880;font-family:'DM Sans',sans-serif;margin-bottom:24px;line-height:1.6;">{%- if is_it -%}Inserisci la tua e-mail e ricevi <strong style="color:#2D2D2D;">10% di sconto</strong> sul tuo primo ordine.{%- elsif is_en -%}Enter your email and get <strong style="color:#2D2D2D;">10% off</strong> your first order.{%- else -%}Trage deine E-Mail ein und erhalte <strong style="color:#2D2D2D;">10% Rabatt</strong> auf deine erste Bestellung.{%- endif -%}</p>
    <div style="display:flex;gap:8px;margin-bottom:16px;">
      <input type="email" id="kpd-popup-email" placeholder="{%- if is_it -%}latua@email.it{%- elsif is_en -%}your@email.com{%- else -%}deine@email.de{%- endif -%}" style="flex:1;padding:13px 16px;border:1px solid #E4E0D8;font-family:'DM Sans',sans-serif;font-size:13px;color:#2D2D2D;outline:none;min-width:0;" onfocus="this.style.borderColor='#9A7B3C'" onblur="this.style.borderColor='#E4E0D8'">
      <button onclick="kpdClaimDiscount()" style="padding:13px 18px;background:#2D2D2D;color:#FAFAF8;border:none;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .2s;" onmouseover="this.style.background='#9A7B3C'" onmouseout="this.style.background='#2D2D2D'">
        {%- if is_it -%}Ottieni lo sconto{%- elsif is_en -%}Get discount{%- else -%}Rabatt sichern{%- endif -%}
      </button>
    </div>
    <div id="kpd-popup-success" style="display:none;background:#F0FDF4;border:1px solid #BBF7D0;padding:12px;font-size:13px;color:#15803D;font-family:'DM Sans',sans-serif;margin-bottom:12px;">
      {%- if is_it -%}&#10003; Il tuo codice sconto: <strong>{{ section.settings.popup_code | default: 'WELCOME10' }}</strong> &ndash; Buono shopping!{%- elsif is_en -%}&#10003; Your discount code: <strong>{{ section.settings.popup_code | default: 'WELCOME10' }}</strong> &ndash; Enjoy your shopping!{%- else -%}&#10003; Dein Rabattcode: <strong>{{ section.settings.popup_code | default: 'WELCOME10' }}</strong> &ndash; Viel Spaß beim Einkaufen!{%- endif -%}
    </div>
    <button onclick="kpdClosePopup()" style="font-size:11px;color:#B8B5AF;background:none;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;">
      {%- if is_it -%}No grazie, preferisco pagare il prezzo pieno{%- elsif is_en -%}No thanks, I'd rather pay full price{%- else -%}Nein danke, ich zahle lieber den vollen Preis{%- endif -%}
    </button>
  </div>
</div>

{%- comment -%} WIEDERÖFFNEN-TAB (erscheint nach Schließen des Popups) {%- endcomment -%}
<button id="kpd-reopen-tab" onclick="kpdReopenPopup()" style="display:none;position:fixed;left:0;bottom:196px;z-index:999;background:#9A7B3C;color:#FAFAF8;border:none;cursor:pointer;padding:11px 16px 11px 14px;font-family:'DM Sans',sans-serif;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:0 6px 6px 0;box-shadow:0 4px 14px rgba(0,0,0,.18);align-items:center;gap:7px;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .35s ease;">
  <strong style="font-weight:700;">10%</strong>
  {%- if is_it -%}Sconto{%- elsif is_en -%}off{%- else -%}Rabatt{%- endif -%}
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#FAFAF8" stroke-width="2"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
</button>





{%- comment -%} ÖSTERREICH FAQ {%- endcomment -%}
{%- if request.locale.iso_code == 'de-AT' or request.path contains '/de-at' -%}
<div style="background:#F5F3EF;border-top:1px solid #E4E0D8;padding:clamp(48px,6vw,72px) clamp(20px,4vw,64px);" data-reveal>
  <div style="max-width:1320px;margin:0 auto;">

    <div style="text-align:center;max-width:620px;margin:0 auto 48px;">
      <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;">
        <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
        🇦🇹 Versand nach Österreich
        <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
      </div>
      <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,4vw,44px);font-weight:300;color:#2D2D2D;line-height:1.08;letter-spacing:-.02em;">Informationen für Österreichische Kunden</h2>
    </div>

    <div style="max-width:760px;margin:0 auto;">

      <details class="kpd-faq-item" open>
        <summary class="kpd-faq-summary">
          <span>Wie lange dauert die Lieferung nach Österreich?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>Wir versenden nach Österreich mit <strong>DHL Paket</strong>. Die Laufzeit beträgt ca. <strong>2–4 Werktage</strong>.</p>
        </div>
      </details>

      <details class="kpd-faq-item">
        <summary class="kpd-faq-summary">
          <span>Fallen Zollgebühren an?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>✅ <strong>Nein</strong> – Österreich ist Teil der EU. Es fallen <strong>keine Zollgebühren</strong> an. Die Lieferung läuft wie ein normaler Versand innerhalb der EU.</p>
        </div>
      </details>

      <details class="kpd-faq-item">
        <summary class="kpd-faq-summary">
          <span>Welche MwSt. wird berechnet?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>Die im Shop angezeigten Preise enthalten die <strong>österreichische MwSt. (20%)</strong>. Es kommen keine weiteren Steuern oder Abgaben hinzu.</p>
        </div>
      </details>

      <details class="kpd-faq-item">
        <summary class="kpd-faq-summary">
          <span>Ab wann ist der Versand kostenlos?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>Der Versand nach Österreich kostet <strong>8,99 €</strong> (pauschal, unabhängig vom Bestellwert).</p>
        </div>
      </details>

      <details class="kpd-faq-item">
        <summary class="kpd-faq-summary">
          <span>Wie läuft die Rückgabe aus Österreich ab?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>Du hast <strong>30 Tage</strong> Zeit für eine kostenlose Rückgabe. Schreib uns einfach an <strong>info@wristpop.de</strong> und wir kümmern uns um alles.</p>
        </div>
      </details>

    </div>
  </div>
</div>
{%- endif -%}


{%- comment -%} SCHWEIZ FAQ {%- endcomment -%}
{%- if request.locale.iso_code == 'de-CH' or request.path contains '/de-ch' -%}
<div style="background:#F5F3EF;border-top:1px solid #E4E0D8;padding:clamp(48px,6vw,72px) clamp(20px,4vw,64px);" data-reveal>
  <div style="max-width:1320px;margin:0 auto;">

    <div style="text-align:center;max-width:620px;margin:0 auto 48px;">
      <div style="font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:#9A7B3C;font-family:'DM Sans',sans-serif;display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:16px;">
        <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
        🇨🇭 Versand in die Schweiz
        <span style="display:block;width:28px;height:1px;background:#9A7B3C;"></span>
      </div>
      <h2 style="font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(28px,4vw,44px);font-weight:300;color:#2D2D2D;line-height:1.08;letter-spacing:-.02em;">Wichtige Informationen für Schweizer Kunden</h2>
    </div>

    <div style="max-width:760px;margin:0 auto;">

      <details class="kpd-faq-item" open>
        <summary class="kpd-faq-summary">
          <span>Welche Versandoptionen gibt es?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>Wir versenden in die Schweiz ausschließlich mit <strong>DHL Paket International</strong>. Die Laufzeit beträgt ca. <strong>4–6 Werktage</strong>.</p>
        </div>
      </details>

      <details class="kpd-faq-item">
        <summary class="kpd-faq-summary">
          <span>Muss ich deutsche MwSt. bezahlen?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>✅ <strong>Nein</strong> – bei Lieferungen in die Schweiz berechnen wir keine deutsche MwSt. Die Preise im Shop sind <strong>Nettopreise</strong>.</p>
        </div>
      </details>

      <details class="kpd-faq-item">
        <summary class="kpd-faq-summary">
          <span>Welche Kosten fallen bei der Lieferung in der Schweiz an?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>Bei Zustellung erhebt die Schweizer Post / DHL Schweiz folgende Gebühren:</p>
          <ul>
            <li><strong>Schweizer Einfuhrumsatzsteuer (MwSt. 8,1%)</strong> auf Warenwert + Versandkosten</li>
            <li><strong>Bearbeitungsgebühr / Vorweisungstaxe</strong> der Post für die Zollabwicklung</li>
          </ul>
        </div>
      </details>

      <details class="kpd-faq-item">
        <summary class="kpd-faq-summary">
          <span>Warum entstehen diese Zusatzkosten?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>Die Schweiz erhebt auf <strong>alle Importe</strong> Mehrwertsteuer. Zusätzlich verlangt die Post eine Bearbeitungsgebühr für die Zollabwicklung. Auf diese Kosten haben wir als Händler <strong>keinen Einfluss</strong>.</p>
        </div>
      </details>

      <details class="kpd-faq-item">
        <summary class="kpd-faq-summary">
          <span>Kann ich alle Kosten schon beim Kauf bezahlen (DDP)?</span>
          <span class="kpd-faq-icon">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          </span>
        </summary>
        <div class="kpd-faq-body">
          <p>❌ <strong>Nein</strong> – mit DHL Paket International ist das leider nicht möglich. Die zusätzlichen Kosten (MwSt. + Bearbeitungsgebühr) müssen immer <strong>bei Zustellung in der Schweiz</strong> bezahlt werden.</p>
        </div>
      </details>

    </div>
  </div>
</div>
{%- endif -%}


{%- comment -%} PRODUKTVIDEO-OVERLAY {%- endcomment -%}
{%- assign kpd_video_url = section.settings.product_video_url | default: '' -%}
{%- if kpd_video_url != blank -%}
<div id="kpd-video-overlay" style="display:none;position:fixed;inset:0;z-index:1100;align-items:center;justify-content:center;padding:20px;">
  <div style="position:absolute;inset:0;background:rgba(0,0,0,.85);" onclick="kpdCloseProductVideo()"></div>
  <div style="position:relative;z-index:1;width:100%;max-width:{% if section.settings.product_video_portrait %}420px{% else %}900px{% endif %};">
    <button type="button" onclick="kpdCloseProductVideo()" aria-label="Close"
      style="position:absolute;top:-44px;right:0;background:none;border:none;color:#FFFFFF;font-size:30px;cursor:pointer;line-height:1;-webkit-tap-highlight-color:transparent;">&#10005;</button>
    <video id="kpd-product-video" controls playsinline preload="metadata"
      style="width:100%;height:auto;max-height:82vh;display:block;background:#000;border-radius:2px;{% if section.settings.product_video_portrait %}aspect-ratio:9/16;object-fit:contain;{% endif %}">
      <source src="{{ kpd_video_url }}" type="video/mp4">
    </video>
  </div>
</div>
{%- endif -%}



<script>
/* Skripte der Produktseite, wieder in die Section eingebettet.
   Steht bewusst am Ende: so ist beim Ausfuehren das gesamte Markup der
   Section geparst, genau wie zuvor beim defer-Laden. */
/* ===== Block 1 aus main-product-keramik.liquid ===== */
function kpdOpenVideo(){
            var o=document.getElementById('kpd-video-overlay');
            o.style.display='flex';
            document.body.style.overflow='hidden';
            var v=document.getElementById('kpd-video-el');
            if(v){ try{ v.currentTime=0; v.play(); }catch(e){} }
          }
          function kpdCloseVideo(e){
            if(e && e.target && e.target.id !== 'kpd-video-overlay') return;
            var o=document.getElementById('kpd-video-overlay');
            var v=document.getElementById('kpd-video-el');
            if(v){ v.pause(); }
            o.style.display='none';
            document.body.style.overflow='';
          }

/* ===== Block 2 aus main-product-keramik.liquid ===== */
(function(){
        var track = document.getElementById('kpd-guarantee-track');
        if(!track) return;
        var dots = track.parentNode.querySelectorAll('.kpd-gdot');
        track.addEventListener('scroll', function(){
          var idx = Math.round(track.scrollLeft / track.clientWidth);
          dots.forEach(function(d,i){
            d.style.background = i === idx ? '#9A7B3C' : 'rgba(250,250,248,.25)';
          });
        }, { passive: true });
      })();

/* ===== Block 5 aus main-product-keramik.liquid ===== */
var kpdLightboxImages = [];
var KPD_COLORS = {
  'Schwarz':'#1A1A1A','Weiß':'#FEFEFE','Hellrosa':'#F9A8C9',
  'Grün':'#22C55E','Hellgrün':'#86EFAC','Mitternachtsblau':'#1E3A5F',
  'Blau':'#3B82F6','Altrosa':'#F472B6','Hellblau':'#7EC8E3',
  'Gelb':'#F5C800','Rot':'#DC2626'
};

function kpdShowImagesForColor(colorName) {
  var container = document.getElementById('kpd-thumbs');
  if (!container) return;
  var thumbs = container.querySelectorAll('.kpd-thumb:not(.kpd-thumb-video)');
  var first = null;
  var colorLower = (colorName || '').trim().toLowerCase();

  thumbs.forEach(function(t) {
    var altRaw = (t.getAttribute('data-img-alt') || '').trim().toLowerCase();
    // Sprach-Filter: Bilder mit "noen"/"de-only" auf englischer Seite ausblenden.
    if (window.kpdImgEn && (altRaw.indexOf('noen') !== -1 || altRaw.indexOf('de-only') !== -1 || altRaw.indexOf('deonly') !== -1)) {
      t.style.display = 'none'; t.classList.remove('kpd-thumb--active'); return;
    }
    if (!window.kpdImgEn && (altRaw.indexOf('enonly') !== -1 || altRaw.indexOf('en-only') !== -1)) {
      t.style.display = 'none'; t.classList.remove('kpd-thumb--active'); return;
    }
    // Sprach-Marker aus Alt-Text entfernen, damit die Farb-Erkennung weiter funktioniert
    var alt = altRaw.replace('noen','').replace('de-only','').replace('deonly','').replace('enonly','').replace('en-only','').trim();
    // Universal-Bilder (Box/Verpackung): immer anzeigen.
    var isUniversal = alt === '' || alt.indexOf('box') !== -1 || alt.indexOf('verpackung') !== -1 ||
                      alt.indexOf('alle') !== -1 || alt.indexOf('all') !== -1 ||
                      alt.indexOf('universal') !== -1 || alt === '*';
    // Exact color match (prevents "Blau" matching "Mitternachtsblau")
    var show = isUniversal || alt === colorLower;
    t.style.display = show ? 'block' : 'none';
    t.classList.remove('kpd-thumb--active');
    // Hauptbild nur aus farb-passenden Bildern waehlen, nicht aus Universal/Box
    if (show && !isUniversal && !first) first = t;
  });

  // Fallback: falls nur Universal-Bilder sichtbar sind, nimm das erste sichtbare
  if (!first) {
    var firstVisible = null;
    thumbs.forEach(function(t){ if (t.style.display !== 'none' && !firstVisible) firstVisible = t; });
    first = firstVisible;
  }

  if (first) {
    first.classList.add('kpd-thumb--active');
    var img = document.getElementById('kpd-featured-img');
    var src = first.getAttribute('data-img-src');
    if (img && src && img.getAttribute('src') !== src) {
      // Smooth crossfade
      img.style.transition = 'opacity 0.15s ease, transform 0.15s ease';
      img.style.opacity = '0';
      img.style.transform = 'scale(0.96)';
      setTimeout(function() {
        img.setAttribute('src', src);
        img.onload = function() {
          img.style.opacity = '1';
          img.style.transform = 'scale(1)';
        };
        if (img.complete) {
          img.style.opacity = '1';
          img.style.transform = 'scale(1)';
        }
      }, 120);
    }
  }

  // Mobile-Swipe-Karussell aus den sichtbaren Bildern neu aufbauen
  kpdBuildMobileSlides(thumbs);
}

function kpdBuildMobileSlides(thumbs) {
  var car = document.getElementById('kpd-mobile-carousel');
  if (!car) return;
  // Nur bauen wenn Mobile (Karussell sichtbar)
  if (window.getComputedStyle(car).display === 'none') return;

  // Signatur der aktuell sichtbaren Bilder bilden. Ist sie identisch mit dem
  // was schon im Karussell steht, NICHT neu bauen -> sonst Sprung auf Bild 1.
  var sig = [];
  thumbs.forEach(function(t){
    if (t.style.display === 'none') return;
    var src = t.getAttribute('data-img-src');
    if (src) sig.push(src);
  });
  sig = sig.join('|');
  if (car.getAttribute('data-sig') === sig && car.children.length) return;
  car.setAttribute('data-sig', sig);

  car.innerHTML = '';
  var slides = [];
  kpdLightboxImages = [];
  thumbs.forEach(function(t, idx) {
    if (t.style.display === 'none') return;
    var src = t.getAttribute('data-img-src');
    if (!src) return;
    var slide = document.createElement('div');
    slide.className = 'kpd-mobile-slide';
    var im = document.createElement('img');
    im.src = src;
    // Erste Slide ist auf Mobil das LCP-Element -> sofort laden.
    if (idx === 0) { im.loading = 'eager'; im.setAttribute('fetchpriority','high'); }
    else { im.loading = 'lazy'; }
    im.alt = t.getAttribute('data-img-alt') || '';
    im.style.cursor = 'zoom-in';
    var imgIndex = kpdLightboxImages.length;
    kpdLightboxImages.push({ type: 'image', src: src });
    // Tap (kein Swipe) oeffnet die Lightbox beim richtigen Bild
    (function(idx){
      var sx = 0, sy = 0;
      slide.addEventListener('touchstart', function(e){
        if (e.touches && e.touches[0]) { sx = e.touches[0].clientX; sy = e.touches[0].clientY; }
      }, {passive:true});
      slide.addEventListener('touchend', function(e){
        var tx = (e.changedTouches && e.changedTouches[0]) ? e.changedTouches[0].clientX : sx;
        var ty = (e.changedTouches && e.changedTouches[0]) ? e.changedTouches[0].clientY : sy;
        if (Math.abs(tx - sx) < 12 && Math.abs(ty - sy) < 12) {
          kpdOpenLightbox(idx);
        }
      }, {passive:true});
      slide.addEventListener('click', function(){ kpdOpenLightbox(idx); });
    })(imgIndex);
    slide.appendChild(im);
    car.appendChild(slide);
    slides.push(slide);
  });

  // Video als letzte Slide
  var vidEl = document.getElementById('kpd-featured-video');
  if (vidEl && vidEl.querySelector('source')) {
    var vsrc = vidEl.querySelector('source').getAttribute('src');
    var vtype = vidEl.querySelector('source').getAttribute('type') || 'video/mp4';
    var poster = vidEl.getAttribute('poster') || '';
    var vslide = document.createElement('div');
    vslide.className = 'kpd-mobile-slide';
    var v = document.createElement('video');
    v.controls = true; v.playsInline = true; v.preload = 'metadata';
    if (poster) v.poster = poster;
    var s = document.createElement('source');
    s.src = vsrc; s.type = vtype;
    v.appendChild(s);
    vslide.appendChild(v);
    car.appendChild(vslide);
    slides.push(vslide);
    // Video auch in der Lightbox verfuegbar machen (als letzte Slide)
    kpdLightboxImages.push({ type: 'video', src: vsrc, vtype: vtype, poster: poster });
  }

  // Dots
  var dotsId = 'kpd-carousel-dots';
  var dots = document.getElementById(dotsId);
  if (!dots) {
    dots = document.createElement('div');
    dots.className = 'kpd-carousel-dots';
    dots.id = dotsId;
    car.parentNode.insertBefore(dots, car.nextSibling);
  }
  dots.innerHTML = '';
  slides.forEach(function(_, i) {
    var d = document.createElement('div');
    d.className = 'kpd-carousel-dot' + (i === 0 ? ' active' : '');
    dots.appendChild(d);
  });

  // Dot-Update beim Scrollen + Overlays nur bei Bild 0 zeigen
  car.onscroll = function() {
    var idx = Math.round(car.scrollLeft / car.clientWidth);
    var ds = dots.querySelectorAll('.kpd-carousel-dot');
    ds.forEach(function(d, i) { d.classList.toggle('active', i === idx); });
    var showFirst = (idx === 0);
    document.querySelectorAll('.kpd-first-only-mobile').forEach(function(el){
      el.style.opacity = showFirst ? '1' : '0';
      el.style.pointerEvents = showFirst ? '' : 'none';
    });
  };
  car.scrollLeft = 0;
}

function kpdOpenLightbox(startIndex) {
  var imgs = kpdLightboxImages || [];
  if (!imgs.length) return;
  if (typeof startIndex !== 'number') startIndex = 0;

  var lb = document.getElementById('kpd-lightbox');
  if (!lb) {
    lb = document.createElement('div');
    lb.id = 'kpd-lightbox';
    lb.className = 'kpd-lightbox';
    lb.innerHTML =
      '<button class="kpd-lightbox-close" aria-label="Schließen">&times;</button>' +
      '<div class="kpd-lightbox-track" id="kpd-lightbox-track"></div>' +
      '<div class="kpd-lightbox-dots" id="kpd-lightbox-dots"></div>';
    document.body.appendChild(lb);
    lb.querySelector('.kpd-lightbox-close').addEventListener('click', kpdCloseLightbox);
    document.addEventListener('keydown', function(e){
      if (e.key === 'Escape') kpdCloseLightbox();
    });
  }

  var track = lb.querySelector('#kpd-lightbox-track');
  var dots = lb.querySelector('#kpd-lightbox-dots');
  track.innerHTML = '';
  dots.innerHTML = '';

  imgs.forEach(function(item, i){
    var cell = document.createElement('div');
    cell.className = 'kpd-lightbox-cell';
    if (item.type === 'video') {
      var v = document.createElement('video');
      v.className = 'kpd-lightbox-video';
      v.controls = true; v.playsInline = true; v.preload = 'metadata';
      if (item.poster) v.poster = item.poster;
      var s = document.createElement('source');
      s.src = item.src; s.type = item.vtype || 'video/mp4';
      v.appendChild(s);
      cell.appendChild(v);
    } else {
      var im = document.createElement('img');
      im.src = item.src;
      im.className = 'kpd-lightbox-img';
      im.alt = '';
      cell.appendChild(im);
    }
    track.appendChild(cell);

    var d = document.createElement('div');
    d.className = 'kpd-lightbox-dot' + (i === startIndex ? ' active' : '');
    dots.appendChild(d);
  });

  // Tap auf Hintergrund (nicht auf Bild) schliesst
  track.onclick = function(e){
    if (e.target === track || e.target.classList.contains('kpd-lightbox-cell')) kpdCloseLightbox();
  };

  // Dot-Update beim Scrollen
  track.onscroll = function(){
    var idx = Math.round(track.scrollLeft / track.clientWidth);
    var ds = dots.querySelectorAll('.kpd-lightbox-dot');
    ds.forEach(function(d, i){ d.classList.toggle('active', i === idx); });
  };

  lb.style.display = 'flex';
  lb.classList.add('open');
  document.body.style.overflow = 'hidden';

  // Zum angetippten Bild springen (nach Layout)
  requestAnimationFrame(function(){
    track.scrollLeft = startIndex * track.clientWidth;
  });
}

function kpdCloseLightbox() {
  var lb = document.getElementById('kpd-lightbox');
  if (!lb) return;
  lb.classList.remove('open');
  lb.style.display = 'none';
  document.body.style.overflow = '';
}

function kpdSelectOption(btn) {
  var optionName = btn.getAttribute('data-option-name');
  var optionValue = btn.getAttribute('data-option-value');

  // Update button styles
  var container = btn.parentElement;
  container.querySelectorAll('.kpd-option-btn').forEach(function(b) {
    b.classList.remove('kpd-option-btn--active');
    b.style.borderColor = '#E4E0D8';
    b.style.background = '#FFFFFF';
    b.style.color = '#2D2D2D';
  });
  btn.classList.add('kpd-option-btn--active');
  btn.style.borderColor = '#2D2D2D';
  btn.style.background = '#2D2D2D';
  btn.style.color = '#FFFFFF';

  // Update label
  var optionIndex = btn.getAttribute('data-option-index');
  var label = document.getElementById('kpd-selected-option-' + optionIndex);
  if (label) label.textContent = optionValue;

  // Find matching variant
  kpdUpdateVariant();
}

function kpdGetSelectedOptions() {
  var options = {};
  document.querySelectorAll('.kpd-color-btn--active').forEach(function(b) {
    options['Farbe'] = b.getAttribute('data-value');
  });
  document.querySelectorAll('.kpd-option-btn--active').forEach(function(b) {
    options[b.getAttribute('data-option-name')] = b.getAttribute('data-option-value');
  });
  return options;
}

function kpdUpdateVariant() {
  var selected = kpdGetSelectedOptions();
  var variants = window.kpdVariantsData;
  
  for (var i = 0; i < variants.length; i++) {
    var v = variants[i];
    var match = true;
    
    if (selected['Farbe'] && v.option1 !== selected['Farbe']) match = false;
    if (selected['Länge'] && v.option2 !== selected['Länge'] && v.option1 !== selected['Länge']) match = false;
    
    if (match) {
      document.getElementById('kpd-variant-id').value = v.id;
      var priceEl = document.getElementById('kpd-price');
      if (priceEl) {
        var price = (v.price / 100).toFixed(2).replace('.', ',');
        priceEl.textContent = price + '\u00a0€';
      }
      break;
    }
  }
}

function kpdSelectColor(btn) {
  document.querySelectorAll('.kpd-color-btn').forEach(function(b){ b.classList.remove('kpd-color-btn--active'); });
  btn.classList.add('kpd-color-btn--active');
  var value = btn.getAttribute('data-value');
  var displayLabel = btn.getAttribute('data-label') || value;
  var vid = btn.getAttribute('data-variant');
  var label = document.getElementById('kpd-selected-color');
  if (label) label.textContent = displayLabel;
  var vidInput = document.getElementById('kpd-variant-id');
  if (vid && vidInput) vidInput.value = vid;
  kpdShowImagesForColor(value);
}

function kpdShowVideo(thumb) {
  var img = document.getElementById('kpd-featured-img');
  var vid = document.getElementById('kpd-featured-video');
  if (!vid) return;
  document.querySelectorAll('.kpd-thumb').forEach(function(t){ t.classList.remove('kpd-thumb--active'); });
  if (thumb) thumb.classList.add('kpd-thumb--active');
  if (img) img.style.display = 'none';
  vid.style.display = 'block';
  try { vid.play(); } catch(e) {}
}

function kpdSetImage(src, thumb) {
  var vid = document.getElementById('kpd-featured-video');
  if (vid) { vid.pause(); vid.style.display = 'none'; }
  document.querySelectorAll('.kpd-thumb').forEach(function(t){ t.classList.remove('kpd-thumb--active'); });
  if (thumb) thumb.classList.add('kpd-thumb--active');
  // Overlays (Badge, Play, Siegel) nur beim ersten Bild zeigen
  var allThumbs = document.querySelectorAll('.kpd-thumb');
  var isFirst = allThumbs.length > 0 && thumb === allThumbs[0];
  document.querySelectorAll('.kpd-main-image .kpd-first-only').forEach(function(el){
    el.style.opacity = isFirst ? '1' : '0';
    el.style.pointerEvents = isFirst ? '' : 'none';
  });
  var img = document.getElementById('kpd-featured-img');
  if (img) img.style.display = '';
  if (img && src) {
    img.style.opacity = '0';
    img.style.transform = 'scale(0.97)';
    setTimeout(function(){
      img.setAttribute('src', src);
      img.onload = function(){
        img.style.opacity = '1';
        img.style.transform = 'scale(1)';
      };
      // Fallback if already cached
      if (img.complete) {
        img.style.opacity = '1';
        img.style.transform = 'scale(1)';
      }
    }, 100);
  }
}

function kpdQty(delta) {
  var input = document.getElementById('kpd-qty');
  var val = parseInt(input.value) + delta;
  if (val < 1) val = 1;
  input.value = val;
}


document.addEventListener('DOMContentLoaded', function() {
  var firstBtn = document.querySelector('.kpd-color-btn--active');
  if (firstBtn) {
    kpdShowImagesForColor(firstBtn.getAttribute('data-value'));
    var label = document.getElementById('kpd-selected-color');
    if (label) label.textContent = firstBtn.getAttribute('data-label') || firstBtn.getAttribute('data-value');
  } else {
    document.querySelectorAll('.kpd-thumb').forEach(function(t){ t.style.display='block'; });
    var first = document.querySelector('.kpd-thumb');
    if (first) { first.classList.add('kpd-thumb--active'); }
    // Karussell aus allen Thumbs bauen
    var allThumbs = document.querySelectorAll('#kpd-thumbs .kpd-thumb:not(.kpd-thumb-video)');
    if (allThumbs.length) kpdBuildMobileSlides(allThumbs);
  }

  // Beim Wechsel Desktop <-> Mobile Karussell neu aufbauen.
  // WICHTIG: nur bei BREITEN-Aenderung reagieren. Auf iOS/Android faehrt beim
  // Scrollen die Adressleiste ein/aus -> das aendert die Hoehe und feuert resize.
  // Wuerde man darauf neu bauen, springt das Karussell zurueck auf Bild 1.
  var kpdResizeTimer;
  var kpdLastWidth = window.innerWidth;
  window.addEventListener('resize', function() {
    if (window.innerWidth === kpdLastWidth) return; // nur Hoehe geaendert -> ignorieren
    kpdLastWidth = window.innerWidth;
    clearTimeout(kpdResizeTimer);
    kpdResizeTimer = setTimeout(function() {
      var active = document.querySelector('.kpd-color-btn--active');
      var thumbs = document.querySelectorAll('#kpd-thumbs .kpd-thumb:not(.kpd-thumb-video)');
      if (active) {
        kpdShowImagesForColor(active.getAttribute('data-value'));
      } else if (thumbs.length) {
        kpdBuildMobileSlides(thumbs);
      }
    }, 200);
  });
});

/* ===== Block 6 aus main-product-keramik.liquid ===== */
function kpdStickyAddToCart(btn) {
  var vidInput = document.getElementById('kpd-variant-id');
  if(!vidInput || !vidInput.value) {
    // Fallback: submit the form
    var form = document.getElementById('kpd-form');
    if(form) form.dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
    return;
  }
  var orig = btn.textContent.trim();
  btn.disabled = true;
  btn.textContent = '...';
  fetch('/cart/add.js', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({id: parseInt(vidInput.value), quantity: 1})
  })
  .then(function(r){ return r.json(); })
  .then(function(){
    btn.disabled = false;
    btn.textContent = orig;
    window.location.href = '/cart';
  })
  .catch(function(){
    btn.disabled = false;
    btn.textContent = orig;
  });
}

(function(){
  var el = document.getElementById('kpd-viewers');
  if(!el) return;

  // Start with random number between 9-17
  var current = Math.floor(Math.random() * 9) + 9;
  el.textContent = current;

  // Fluctuate randomly every 8-22 seconds - looks organic
  function update() {
    var change = Math.random();
    if(change < 0.45) {
      // Go up by 1-2
      current += Math.random() < 0.7 ? 1 : 2;
    } else if(change < 0.85) {
      // Go down by 1
      current = Math.max(7, current - 1);
    }
    // Keep in realistic range
    current = Math.min(21, Math.max(7, current));
    el.textContent = current;

    // Next update in 8-22 seconds
    var next = Math.floor(Math.random() * 14000) + 8000;
    setTimeout(update, next);
  }

  // First update after 10-20 seconds
  setTimeout(update, Math.floor(Math.random() * 10000) + 10000);
})();

/* ===== Block 7 aus main-product-keramik.liquid ===== */
// ── EXIT INTENT POPUP ──
(function(){
  if(sessionStorage.getItem('kpd_exit_shown')) return;
  var popup = document.getElementById('kpd-exit-popup');
  if(!popup) return;

  function showPopup(){
    if(sessionStorage.getItem('kpd_exit_shown')) return;
    popup.style.display = 'flex';
    sessionStorage.setItem('kpd_exit_shown', '1');
  }

  // Desktop: Maus verlaesst das Fenster nach oben
  document.addEventListener('mouseleave', function(e){
    if(e.clientY <= 5) showPopup();
  });

  // Mobile: schnelles Hochscrollen nahe am Seitenanfang
  var lastScrollY = window.scrollY;
  var scrollTimer, ticking = false;
  window.addEventListener('scroll', function(){
    if (ticking) return;
    ticking = true;
    requestAnimationFrame(function(){
      ticking = false;
      clearTimeout(scrollTimer);
      scrollTimer = setTimeout(function(){
        var currentY = window.scrollY;
        if(lastScrollY - currentY > 200 && currentY < 100) showPopup();
        lastScrollY = currentY;
      }, 100);
    });
  }, { passive: true });

  // Fallback: nach 15 Sekunden
  setTimeout(showPopup, 15000);
})();

function kpdClosePopup(){
  var popup = document.getElementById('kpd-exit-popup');
  if(popup) popup.style.display = 'none';
  var tab = document.getElementById('kpd-reopen-tab');
  if(tab) tab.style.display = 'flex';
}

function kpdReopenPopup(){
  var popup = document.getElementById('kpd-exit-popup');
  if(popup) popup.style.display = 'flex';
  var tab = document.getElementById('kpd-reopen-tab');
  if(tab) tab.style.display = 'none';
}

// Tab faehrt beim ersten Scrollen nach links ein und BLEIBT dort.
// Oeffnen nur noch per Klick (kpdReopenPopup). Kein automatisches Ausfahren.
(function(){
  var ticking = false, isIn = false;
  window.addEventListener('scroll', function(){
    if (ticking || isIn) return;
    ticking = true;
    requestAnimationFrame(function(){
      ticking = false;
      var tab = document.getElementById('kpd-reopen-tab');
      if(!tab || tab.style.display === 'none') return;
      if(window.scrollY > 40){ tab.style.transform = 'translateX(-75%)'; isIn = true; }
    });
  }, { passive: true });

  // Beim Ueberfahren/Antippen kurz herausschauen, damit er anklickbar bleibt
  document.addEventListener('DOMContentLoaded', function(){
    var tab = document.getElementById('kpd-reopen-tab');
    if(!tab) return;
    tab.addEventListener('mouseenter', function(){ tab.style.transform = 'translateX(0)'; });
    tab.addEventListener('mouseleave', function(){ if(isIn) tab.style.transform = 'translateX(-75%)'; });
  });
})();

function kpdClaimDiscount(){
  var emailInput = document.getElementById('kpd-popup-email');
  var email = (emailInput.value || '').trim();
  if(!email || email.indexOf('@') === -1) {
    emailInput.style.borderColor = '#DC2626';
    return;
  }

  // HINWEIS: Shopifys Kundenformular verlangt einen CAPTCHA-Token, den ein
  // verstecktes Formular nicht liefern kann. Daher wird hier nichts an
  // Shopify gesendet. Falls Klaviyo geladen ist, geht die Adresse dorthin.
  if (window._learnq) {
    window._learnq.push(['identify', { '$email': email }]);
    window._learnq.push(['track', 'Newsletter Signup', { '$email': email }]);
  }

  document.getElementById('kpd-popup-success').style.display = 'block';
  emailInput.style.display = 'none';
  var claimBtn = document.querySelector('#kpd-exit-popup button[onclick="kpdClaimDiscount()"]');
  if (claimBtn) claimBtn.style.display = 'none';
  setTimeout(kpdClosePopup, 6000);
}

// ── COUNTDOWN TIMER ──
(function(){
  var timerEl = document.getElementById('kpd-timer');
  if(!timerEl) return;

  // Get or set expiry - resets every 24h per session
  var key = 'kpd_timer_expiry';
  var expiry = sessionStorage.getItem(key);
  if(!expiry || Date.now() > parseInt(expiry)) {
    // Random time between 45min and 8 hours to look organic
    var ms = (Math.floor(Math.random() * 7 * 60) + 45) * 60 * 1000;
    expiry = Date.now() + ms;
    sessionStorage.setItem(key, expiry);
  }

  function update(){
    var remaining = parseInt(expiry) - Date.now();
    if(remaining <= 0){
      timerEl.textContent = '00:00:00';
      return;
    }
    var h = Math.floor(remaining / 3600000);
    var m = Math.floor((remaining % 3600000) / 60000);
    var s = Math.floor((remaining % 60000) / 1000);
    timerEl.textContent =
      String(h).padStart(2,'0') + ':' +
      String(m).padStart(2,'0') + ':' +
      String(s).padStart(2,'0');
    setTimeout(update, 1000);
  }
  update();
})();

// ── STICKY BAR ──
(function(){
  var bar = document.getElementById('kpd-sticky-bar');
  var form = document.getElementById('kpd-form');
  if(!bar || !form) return;

  // Set image and price
  var img = document.getElementById('kpd-featured-img');
  var stickyImg = document.getElementById('kpd-sticky-img-el');
  var stickyPrice = document.getElementById('kpd-sticky-price');

  if(img && stickyImg) stickyImg.src = img.src;
  var priceEl = document.getElementById('kpd-price');
  if(priceEl && stickyPrice) stickyPrice.textContent = priceEl.textContent;

  // Update image and price
  setInterval(function(){
    if(img && stickyImg && img.src) stickyImg.src = img.src;
    if(priceEl && stickyPrice) stickyPrice.textContent = priceEl.textContent;
  }, 500);

  // Hide on scroll down, show on scroll up
  var lastY = window.scrollY;
  window.addEventListener('scroll', function(){
    var currentY = window.scrollY;
    if(currentY > lastY && currentY > 200) {
      bar.style.transform = 'translateY(100%)';
    } else {
      bar.style.transform = 'translateY(0)';
    }
    lastY = currentY;
  }, { passive: true });
})();

/* ===== Block 8 aus main-product-keramik.liquid ===== */
(function(){
  // Calculate sold count based on time of day
  // Starts at 2 at midnight (00:00), reaches ~124 by 23:59
  function getSoldCount() {
    var now = new Date();
    var hour = now.getHours();
    var min = now.getMinutes();
    var sec = now.getSeconds();
    var timeDecimal = hour + min / 60 + sec / 3600; // 0 .. 24

    var START = 2;    // Wert um 00:00
    var END = 124;    // Wert um 24:00

    // Tagesfortschritt 0..1
    var t = timeDecimal / 24;

    // Realistische Kurve: morgens langsam, nachmittags/abends schneller.
    // ease-in-out-aehnlich, trifft exakt 0 -> START und 1 -> END.
    var curve = t * t * (3 - 2 * t); // smoothstep (0..1)
    var base = START + (END - START) * curve;

    // Kleine organische Schwankung (+/-1), aber nie unter dem bisherigen Tageswert
    var variation = Math.floor(Math.random() * 3) - 1;
    var val = Math.round(base + variation);
    if (val < START) val = START;
    if (val > END) val = END;
    return val;
  }

  // Show badge with slide-in from right, then blink every 5s
  var badge = document.getElementById('kpd-sold-badge');
  var badgeMobile = document.getElementById('kpd-sold-badge-mobile');
  var count = document.getElementById('kpd-sold-count');
  var countMobile = document.getElementById('kpd-sold-count-mobile');
  if(countMobile) countMobile.textContent = getSoldCount();
  if(!badge || !count) {
    // Falls Desktop-Badge fehlt, trotzdem Mobile animieren
    if(badgeMobile) kpdBlinkMobileBadge(badgeMobile);
    return;
  }

  count.textContent = getSoldCount();

  // Slide in after 1.2s
  setTimeout(function(){
    badge.style.transform = 'translateX(0)';

    // Blink: hide after 5s, show after 5s, repeat
    function blinkBadge(){
      setTimeout(function(){
        badge.style.opacity = '0';
        badge.style.transform = 'translateX(100%)';
        if(badgeMobile){ badgeMobile.style.opacity = '0'; badgeMobile.style.transform = 'translateX(100%)'; }
        setTimeout(function(){
          badge.style.opacity = '1';
          badge.style.transform = 'translateX(0)';
          if(badgeMobile){ badgeMobile.style.opacity = '1'; badgeMobile.style.transform = 'translateX(0)'; }
          blinkBadge();
        }, 5000);
      }, 5000);
    }
    blinkBadge();
  }, 2000);

  function kpdBlinkMobileBadge(b){
    setTimeout(function(){
      function loop(){
        setTimeout(function(){
          b.style.opacity = '0'; b.style.transform = 'translateX(100%)';
          setTimeout(function(){
            b.style.opacity = '1'; b.style.transform = 'translateX(0)';
            loop();
          }, 5000);
        }, 5000);
      }
      loop();
    }, 2000);
  }
})();

/* ===== Block 9 aus main-product-keramik.liquid ===== */
(function(){
  // Klick auf Judge.me Sterne-Badge -> sanft zum Karussell scrollen
  document.addEventListener('click', function(e){
    var badge = e.target.closest('#kpd-badge-clickable');
    if(!badge) return;
    // Erst eigenes Karussell suchen, sonst App-Karussell (jdgm-carousel-wrapper)
    var carousel = document.getElementById('kpd-reviews-carousel')
                || document.querySelector('.jdgm-carousel-wrapper');
    if(carousel){
      e.preventDefault();
      carousel.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
})();

/* ===== Block 10 aus main-product-keramik.liquid ===== */
function kpdOpenProductVideo(){
  var ov = document.getElementById('kpd-video-overlay');
  if(!ov) return;
  ov.style.display = 'flex';
  document.body.style.overflow = 'hidden';
}
function kpdCloseProductVideo(){
  var ov = document.getElementById('kpd-video-overlay');
  var vid = document.getElementById('kpd-product-video');
  if(!ov) return;
  ov.style.display = 'none';
  document.body.style.overflow = '';
  if(vid){ try { vid.pause(); } catch(e){} }
}
document.addEventListener('keydown', function(e){
  if(e.key === 'Escape') kpdCloseProductVideo();
});
</script>

{% schema %}
{
  "name": "Keramik Produktseite",
  "max_blocks": 20,
  "settings": [
    {
      "type": "header",
      "content": "Allgemein"
    },
    {
      "type": "text",
      "id": "intro_video",
      "label": "Produktvideo-URL (Play-Button unter Preis)",
      "info": "Shopify → Inhalte → Dateien → Video hochladen → URL kopieren. Leer = kein Button."
    },
    {
      "type": "image_picker",
      "id": "intro_video_poster",
      "label": "Video-Vorschaubild (im Popup)"
    },
    {
      "type": "text",
      "id": "popup_code",
      "label": "Rabattcode im Popup",
      "default": "WELCOME10",
      "info": "Muss in Shopify unter Rabatte angelegt sein, sonst funktioniert er an der Kasse nicht."
    },
    {
      "type": "text",
      "id": "guide_pdf",
      "label": "PDF-Anleitung Armbandlänge (URL)",
      "info": "Shopify → Inhalte → Dateien → PDF hochladen → URL kopieren. Leer = kein Button."
    },
    {
      "type": "text",
      "id": "crown_3uhr_colors",
      "label": "Farben mit 3-Uhr-Krone",
      "info": "Kommagetrennt, z.B.: Blau, Altrosa. Diese Farben werden unter '3 Uhr Krone' gruppiert, alle anderen unter '12 Uhr Krone'. Leer = keine Gruppierung."
    },
    {
      "type": "text",
      "id": "guide_pdf_en",
      "label": "PDF-Anleitung – EN (URL)",
      "info": "Optional. Nur im englischen Markt. Leer = deutsche Fassung wird verwendet."
    },
    {
      "type": "header",
      "content": "Materialzertifikat"
    },
    {
      "type": "text",
      "id": "cert_pdf",
      "label": "PDF-Materialnachweis (URL)",
      "info": "Deutsche Fassung. Shopify → Inhalte → Dateien → hochladen → URL kopieren. Leer = kein Button, Siegel bleibt ohne Link."
    },
    {
      "type": "text",
      "id": "cert_pdf_en",
      "label": "PDF-Materialnachweis – EN (URL)",
      "info": "Optional. Nur im englischen Markt. Leer = deutsche Fassung wird verwendet."
    },
    {
      "type": "checkbox",
      "id": "show_cert_seal",
      "label": "Siegel auf dem Produktbild anzeigen",
      "default": true
    },
    {
      "type": "text",
      "id": "cert_seal_number",
      "label": "Zahl im Siegel",
      "default": "97%"
    },
    {
      "type": "image_picker",
      "id": "box_image",
      "label": "Box-Bild (Inklusive-Hinweis beim Warenkorb)",
      "info": "Kleines Bild der WristPop Box. Leer = Icon wird angezeigt."
    },
    {
      "type": "image_picker",
      "id": "tool_image",
      "label": "Kürzungs-Set-Bild (Inklusive-Hinweis)",
      "info": "Kleines Bild des Armband-Kürzungs-Sets. Leer = Icon wird angezeigt."
    },
    {
      "type": "url",
      "id": "product_video_url",
      "label": "Produktvideo (MP4-URL)",
      "info": "Shopify → Inhalte → Dateien → Video hochladen → URL kopieren. Leer = kein Play-Button."
    },
    {
      "type": "checkbox",
      "id": "product_video_portrait",
      "label": "Video ist Hochformat (9:16)",
      "default": false
    },
    {
      "type": "text",
      "id": "badge_text",
      "label": "Badge Text",
      "default": "Keramik Armband"
    },
    {
      "type": "text",
      "id": "product_label",
      "label": "Produkt-Label (über Titel)",
      "default": "Vollkeramik · Swatch Royal Pop"
    },
    {
      "type": "text",
      "id": "trust_sold_text",
      "label": "Trust-Zeile Verkaufstext (leer = aus). Nur WAHRE Angaben!",
      "info": "z.B. 'Über 500 verkauft' – nur wenn es stimmt. Leer lassen, wenn du noch keine Zahlen hast."
    },
    {
      "type": "textarea",
      "id": "short_description",
      "label": "Kurzbeschreibung (leer = automatisch aus Produktbeschreibung)"
    },
    {
      "type": "header",
      "content": "How it Works Section"
    },
    {
      "type": "checkbox",
      "id": "show_hiw",
      "label": "Qualitäts-Bereich anzeigen",
      "default": true
    },
    {
      "type": "header",
      "content": "Qualitäts-Claims"
    },
    {
      "type": "text",
      "id": "quality_eyebrow",
      "label": "Eyebrow",
      "default": "Qualitätsversprechen"
    },
    {
      "type": "text",
      "id": "quality_heading",
      "label": "Überschrift",
      "default": "Entwickelt mit Leidenschaft. Geprüft mit Anspruch."
    },
    {
      "type": "text",
      "id": "q1_title",
      "label": "Punkt 1 Titel",
      "default": "Passgenau entwickelt"
    },
    {
      "type": "textarea",
      "id": "q1_text",
      "label": "Punkt 1 Text",
      "default": "Millimetergenaue Passform für alle Swatch Royal Pop Modelle. Kein Wackeln, kein Spiel."
    },
    {
      "type": "text",
      "id": "q2_title",
      "label": "Punkt 2 Titel",
      "default": "Hochwertige Materialien"
    },
    {
      "type": "textarea",
      "id": "q2_text",
      "label": "Punkt 2 Text",
      "default": "Bioceramic, Echtleder, Silikon – dieselben Materialien die Swatch selbst verwendet."
    },
    {
      "type": "text",
      "id": "q3_title",
      "label": "Punkt 3 Titel",
      "default": "Einzeln geprüft"
    },
    {
      "type": "textarea",
      "id": "q3_text",
      "label": "Punkt 3 Text",
      "default": "Jedes Armband wird vor dem Versand auf Passform und Verarbeitung kontrolliert."
    },
    {
      "type": "text",
      "id": "q4_title",
      "label": "Punkt 4 Titel",
      "default": "30 Tage Rückgabe"
    },
    {
      "type": "textarea",
      "id": "q4_text",
      "label": "Punkt 4 Text",
      "default": "Gefällt es nicht? 30 Tage kostenlose Rückgabe – unkompliziert und ohne Wenn und Aber."
    },
    {
      "type": "header",
      "content": "Vorbestellung"
    },
    {
      "type": "checkbox",
      "id": "show_preorder",
      "label": "Vorbestellung anzeigen",
      "default": true
    },
    {
      "type": "textarea",
      "id": "preorder_text",
      "label": "Vorbestellungs-Text",
      "default": "Dieses Produkt wird nachproduziert. Versandbereit ab 25.06.2026."
    },
    {
      "type": "text",
      "id": "preorder_btn",
      "label": "Button Text",
      "default": "Jetzt vorbestellen"
    },
    {
      "type": "header",
      "content": "Social Proof"
    },
    {
      "type": "checkbox",
      "id": "show_social_proof",
      "label": "Social Proof Bar anzeigen",
      "default": true
    },
    {
      "type": "text",
      "id": "social_proof_text",
      "label": "Social Proof Haupttext",
      "default": "Bereits viele Male gekauft"
    },
    {
      "type": "text",
      "id": "social_proof_sub",
      "label": "Social Proof Untertext",
      "default": "Kostenloser Versand · Schnelle Lieferung"
    },
    {
      "type": "text",
      "id": "social_proof_sub_en",
      "label": "Social Proof Untertext (EN)",
      "default": "€8.99 shipping · fast delivery"
    },
    {
      "type": "header",
      "content": "Weitere Produkte"
    },
    {
      "type": "checkbox",
      "id": "show_related",
      "label": "Weitere Farben anzeigen",
      "default": true
    },
    {
      "type": "collection",
      "id": "related_collection",
      "label": "Kollektion für weitere Farben"
    },
    {
      "type": "text",
      "id": "related_title",
      "label": "Titel 'Weitere Farben'",
      "default": "Weitere Farben"
    },
    {
      "type": "text",
      "id": "related_title_en",
      "label": "Titel 'Weitere Farben' (EN)",
      "default": "More Colours"
    }
  ],
  "blocks": [
    {
      "type": "checkmark",
      "name": "✓ Häkchen-Punkt",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "100% passend für alle Swatch Royal Pop Modelle"
        }
      ]
    },
    {
      "type": "trust_point",
      "name": "✓ Trust-Punkt (klein)",
      "settings": [
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Kostenloser Versand ab 25 €"
        }
      ]
    },
    {
      "type": "accordion_tab",
      "name": "▾ Akkordeon Tab",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Tab Titel",
          "default": "Produktbeschreibung"
        },
        {
          "type": "richtext",
          "id": "content",
          "label": "Inhalt"
        }
      ]
    },
    {
      "type": "image_text",
      "name": "◫ Bild + Text",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Bild"
        },
        {
          "type": "image_picker",
          "id": "image_en",
          "label": "Bild (Englisch / en-eu)"
        },
        {
          "type": "checkbox",
          "id": "image_right",
          "label": "Bild rechts (Text links)",
          "default": false
        },
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow Text"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text"
        },
        {
          "type": "checkbox",
          "id": "dark_bg",
          "label": "Dunkler Hintergrund",
          "default": false
        }
      ]
    },
    {
      "type": "steps",
      "name": "① Schritt-für-Schritt",
      "settings": [
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow",
          "default": "So wird es eingebaut"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "In 3 Schritten – keine Werkzeuge"
        },
        {
          "type": "checkbox",
          "id": "dark_bg",
          "label": "Dunkler Hintergrund",
          "default": false
        },
        {
          "type": "text",
          "id": "step_title_1",
          "label": "Schritt 1 Titel",
          "default": "Armband öffnen"
        },
        {
          "type": "textarea",
          "id": "step_text_1",
          "label": "Schritt 1 Text",
          "default": "Das Gehäuse lässt sich durch leichten Druck öffnen. Kein Werkzeug notwendig."
        },
        {
          "type": "text",
          "id": "step_title_2",
          "label": "Schritt 2 Titel",
          "default": "Uhr einlegen"
        },
        {
          "type": "textarea",
          "id": "step_text_2",
          "label": "Schritt 2 Text",
          "default": "Die Swatch Royal Pop wird eingelegt – sie rastet hörbar ein und sitzt bombenfest."
        },
        {
          "type": "text",
          "id": "step_title_3",
          "label": "Schritt 3 Titel",
          "default": "Anlegen & fertig"
        },
        {
          "type": "textarea",
          "id": "step_text_3",
          "label": "Schritt 3 Text",
          "default": "Verschlussband anpassen – die Uhr sitzt perfekt am Handgelenk. Wechsel jederzeit in Sekunden."
        }
      ]
    },
    {
      "type": "how_it_works",
      "name": "So wird es eingebaut",
      "settings": [
        {
          "type": "text",
          "id": "hiw_eyebrow",
          "label": "Eyebrow (kleine Zeile oben)",
          "default": "So wird es eingebaut"
        },
        {
          "type": "text",
          "id": "hiw_heading",
          "label": "Überschrift",
          "default": "In Sekunden am Handgelenk"
        },
        {
          "type": "image_picker",
          "id": "hiw_image",
          "label": "Bild links (quadratisch)"
        },
        {
          "type": "text",
          "id": "hiw_caption_left",
          "label": "Bildunterschrift links",
          "default": "Das fertige Armband – die Swatch Royal Pop sitzt bündig im Gehäuse, am Handgelenk getragen."
        },
        {
          "type": "text",
          "id": "hiw_video",
          "label": "Video-URL rechts (hochformat)"
        },
        {
          "type": "image_picker",
          "id": "hiw_video_poster",
          "label": "Video-Vorschaubild (vor dem Abspielen)"
        },
        {
          "type": "image_picker",
          "id": "hiw_image_right",
          "label": "Bild rechts (falls kein Video)"
        },
        {
          "type": "text",
          "id": "hiw_caption_right",
          "label": "Bildunterschrift rechts",
          "default": "Einrasten, fertig. Kein Werkzeug, keine Modifikation."
        }
      ]
    },
    {
      "type": "guarantee",
      "name": "Garantie / Versprechen",
      "settings": [
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow (kleine Zeile oben)",
          "default": "Unser Versprechen"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Kauf ohne Risiko"
        }
      ]
    },
    {
      "type": "comparison",
      "name": "Vergleichstabelle",
      "settings": [
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow (kleine Zeile oben)",
          "default": "Der Unterschied"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Warum WristPop?"
        },
        {
          "type": "text",
          "id": "competitor_label",
          "label": "Spalten-Label (Wettbewerber)",
          "default": "Andere"
        },
        {
          "type": "textarea",
          "id": "rows",
          "label": "Vergleichspunkte (mit | trennen)",
          "info": "Jeder Punkt durch | getrennt. WristPop bekommt ✓, Andere bekommen ✗.",
          "default": "Vollkeramik & hochwertige Materialien|Exakte Passform für Swatch Royal Pop|Jedes Stück einzeln geprüft|Versand aus Deutschland|Inklusive Premium-Box"
        }
      ]
    },
    {
      "type": "lifestyle_gallery",
      "name": "📸 Lifestyle-Galerie",
      "settings": [
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow",
          "default": "Getragen"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Für jeden Moment gemacht"
        },
        {
          "type": "textarea",
          "id": "subtext",
          "label": "Untertitel",
          "default": "Vom Alltag bis zum großen Auftritt – dein Konversionsarmband macht jeden Look mit."
        },
        {
          "type": "image_picker",
          "id": "img1",
          "label": "Bild 1"
        },
        {
          "type": "image_picker",
          "id": "img2",
          "label": "Bild 2"
        },
        {
          "type": "image_picker",
          "id": "img3",
          "label": "Bild 3"
        },
        {
          "type": "image_picker",
          "id": "img4",
          "label": "Bild 4"
        },
        {
          "type": "image_picker",
          "id": "img5",
          "label": "Bild 5 (optional)"
        },
        {
          "type": "image_picker",
          "id": "img6",
          "label": "Bild 6 (optional)"
        }
      ]
    },
    {
      "type": "certificate",
      "name": "🏅 Zertifikat",
      "settings": [
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow",
          "default": "Unabhängig geprüft"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Kein Versprechen. Ein Nachweis."
        },
        {
          "type": "textarea",
          "id": "subtext",
          "label": "Untertitel"
        },
        {
          "type": "text",
          "id": "big_number",
          "label": "Große Zahl im Siegel",
          "default": "97%"
        },
        {
          "type": "richtext",
          "id": "body",
          "label": "Fließtext"
        },
        {
          "type": "textarea",
          "id": "specs",
          "label": "Messwerte",
          "info": "Format: Label:Wert|Label:Wert — z.B. Zugfestigkeit:80 MPa|Biegefestigkeit:120 MPa"
        },
        {
          "type": "text",
          "id": "pdf_url",
          "label": "PDF-Prüfbericht (URL)",
          "info": "Shopify → Inhalte → Dateien → PDF hochladen → URL kopieren."
        },
        {
          "type": "text",
          "id": "pdf_label",
          "label": "Button-Text",
          "default": "Prüfbericht ansehen"
        },
        {
          "type": "textarea",
          "id": "footnote",
          "label": "Fußnote (klein)",
          "info": "Für rechtlich präzise Einordnung der Messwerte."
        }
      ]
    },
    {
      "type": "box_feature",
      "name": "Box-Feature",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Box-Bild"
        },
        {
          "type": "image_picker",
          "id": "image_en",
          "label": "Box-Bild (Englisch / en-eu)"
        },
        {
          "type": "checkbox",
          "id": "image_right",
          "label": "Bild rechts statt links",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "dark_bg",
          "label": "Dunkler Hintergrund",
          "default": false
        },
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow (kleine Zeile oben)",
          "default": "Inklusive"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Hochwertige WristPop Box"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Beschreibungstext",
          "default": "Jedes WristPop Armband kommt in einer edlen Box mit mattem Finish und weichem Innenfutter – entwickelt für Schutz und gemacht für den großen Eindruck. Perfekt zum Verschenken oder als Krönung für dich selbst."
        },
        {
          "type": "textarea",
          "id": "features",
          "label": "Feature-Punkte (mit | trennen)",
          "info": "Jeder Punkt durch | getrennt, z.B. Punkt 1|Punkt 2|Punkt 3",
          "default": "Weiches Innenfutter schützt deine Uhr|Inklusive Kissen für sicheren Halt|Premium-Verpackung mit edler Haptik|Perfekt zum Verschenken"
        }
      ]
    },
    {
      "type": "judgeme_carousel",
      "name": "Judge.me Karussell",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Das sagen unsere Kunden"
        }
      ]
    },
    {
      "type": "judgeme_reviews",
      "name": "Judge.me Reviews",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Kundenbewertungen"
        }
      ]
    },
    {
      "type": "reviews",
      "name": "★ Bewertungen",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Was unsere Kunden sagen"
        },
        {
          "type": "text",
          "id": "rating",
          "label": "Gesamtbewertung",
          "default": "4.9"
        },
        {
          "type": "text",
          "id": "review_count",
          "label": "Anzahl Bewertungen",
          "default": "Erste Bewertungen"
        },
        {
          "type": "textarea",
          "id": "review_text_1",
          "label": "Bewertung 1 Text"
        },
        {
          "type": "text",
          "id": "review_author_1",
          "label": "Bewertung 1 Autor"
        },
        {
          "type": "text",
          "id": "review_color_1",
          "label": "Bewertung 1 Farbe"
        },
        {
          "type": "textarea",
          "id": "review_text_2",
          "label": "Bewertung 2 Text"
        },
        {
          "type": "text",
          "id": "review_author_2",
          "label": "Bewertung 2 Autor"
        },
        {
          "type": "text",
          "id": "review_color_2",
          "label": "Bewertung 2 Farbe"
        },
        {
          "type": "textarea",
          "id": "review_text_3",
          "label": "Bewertung 3 Text"
        },
        {
          "type": "text",
          "id": "review_author_3",
          "label": "Bewertung 3 Autor"
        },
        {
          "type": "text",
          "id": "review_color_3",
          "label": "Bewertung 3 Farbe"
        }
      ]
    },
    {
      "type": "banner_image",
      "name": "🖼 Banner Bild",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Bild"
        },
        {
          "type": "image_picker",
          "id": "image_en",
          "label": "Bild (Englisch / en-eu)"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Text über Bild (optional)"
        },
        {
          "type": "select",
          "id": "height",
          "label": "Höhe",
          "options": [
            {
              "value": "small",
              "label": "Klein (300px)"
            },
            {
              "value": "medium",
              "label": "Mittel (450px)"
            },
            {
              "value": "large",
              "label": "Groß (600px)"
            }
          ],
          "default": "medium"
        }
      ]
    },
    {
      "type": "text_block",
      "name": "✍ Text Block",
      "settings": [
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Text"
        },
        {
          "type": "checkbox",
          "id": "center",
          "label": "Zentriert",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "dark_bg",
          "label": "Dunkler Hintergrund",
          "default": false
        }
      ]
    },
    {
      "type": "upsell",
      "name": "💡 Das könnte dir gefallen",
      "settings": [
        {
          "type": "text",
          "id": "heading",
          "label": "Überschrift",
          "default": "Das könnte dir auch gefallen"
        },
        {
          "type": "text",
          "id": "subtext",
          "label": "Untertext",
          "default": "Entdecke günstigere Varianten"
        },
        {
          "type": "product",
          "id": "product_1",
          "label": "Produkt 1"
        },
        {
          "type": "text",
          "id": "product_1_label",
          "label": "Label Produkt 1",
          "default": "Günstiger"
        },
        {
          "type": "product",
          "id": "product_2",
          "label": "Produkt 2"
        },
        {
          "type": "text",
          "id": "product_2_label",
          "label": "Label Produkt 2",
          "default": "Edel"
        }
      ]
    },
    {
      "type": "length_visual",
      "name": "📏 Längen-Guide",
      "settings": []
    }
  ],
  "presets": [
    {
      "name": "Keramik Produktseite",
      "blocks": [
        {
          "type": "checkmark",
          "settings": {
            "text": "100% passend für alle Swatch Royal Pop Modelle"
          }
        },
        {
          "type": "checkmark",
          "settings": {
            "text": "Wechsel in unter 5 Sekunden – kein Werkzeug"
          }
        },
        {
          "type": "checkmark",
          "settings": {
            "text": "Vollkeramik – leicht, kratzfest & edel"
          }
        },
        {
          "type": "checkmark",
          "settings": {
            "text": "Einzeln geprüft vor dem Versand"
          }
        },
        {
          "type": "trust_point",
          "settings": {
            "text": "Kostenloser Versand ab 25 €"
          }
        },
        {
          "type": "trust_point",
          "settings": {
            "text": "30 Tage Rückgabe"
          }
        },
        {
          "type": "trust_point",
          "settings": {
            "text": "Einzeln geprüft"
          }
        },
        {
          "type": "trust_point",
          "settings": {
            "text": "Royal Pop kompatibel"
          }
        },
        {
          "type": "accordion_tab",
          "settings": {
            "title": "Produktbeschreibung"
          }
        },
        {
          "type": "accordion_tab",
          "settings": {
            "title": "Material & Maße"
          }
        },
        {
          "type": "accordion_tab",
          "settings": {
            "title": "Kompatibilität"
          }
        },
        {
          "type": "accordion_tab",
          "settings": {
            "title": "Versand & Rückgabe"
          }
        },
        {
          "type": "steps"
        },
        {
          "type": "reviews"
        }
      ]
    }
  ]
}
{% endschema %}
