/** Shopify CDN: Minification failed

Line 677:9 Expected identifier but found "addEventListener("
Line 1059:0 Unexpected "}"

**/
.crunch-animation-box{
  position:fixed;
  right:24px;
  top:120px;
  z-index:9999;
  transition:all .7s ease;
}

.crunch-dose{
  width:270px;
  padding:18px;
  border-radius:28px;
  background:rgba(6,6,6,.94);
  border:2px solid #ff2b87;
  box-shadow:0 0 55px rgba(255,43,135,.75);
  color:white;
  backdrop-filter:blur(12px);
}

.dose-lid{
  width:165px;
  height:24px;
  background:#ff2b87;
  border-radius:30px;
  margin:0 auto -4px;
  box-shadow:0 0 25px #ff2b87;
}

.dose-glass{
  position:relative;
  height:285px;
  border:4px solid rgba(255,255,255,.7);
  border-radius:60px 60px 34px 34px;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
  box-shadow:inset 0 0 25px rgba(255,255,255,.18);
}

.dose-content{
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:0%;
  transition:height .45s ease;
  overflow:hidden;
}

.crunch-piece,
.ingredient-piece{
  position:absolute;
  object-fit:cover;
  border-radius:50%;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));
  animation:pieceDrop .35s ease;
}

@keyframes pieceDrop{
  from{transform:translateY(-70px) scale(.4);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}

.dose-shine{
  position:absolute;
  top:0;
  left:22px;
  width:50px;
  height:100%;
  background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,0));
  pointer-events:none;
}

.dose-label{
  position:absolute;
  top:118px;
  width:100%;
  text-align:center;
  font-size:26px;
  font-weight:900;
  line-height:1;
  text-shadow:0 0 18px #ff2b87;
  pointer-events:none;
}

.dose-label span{
  color:#ff2b87;
}

.dose-info{
  margin-top:14px;
  font-size:13px;
}

.dose-info strong{
  display:block;
  text-align:center;
  color:#ff2b87;
  font-size:20px;
  margin-bottom:10px;
  text-transform:uppercase;
}

.dose-info p{
  margin:9px 0 5px;
  display:flex;
  justify-content:space-between;
}

.bar{
  height:9px;
  background:#222;
  border-radius:20px;
  overflow:hidden;
}

.bar span{
  display:block;
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#ff2b87,#ff7ac8);
  box-shadow:0 0 18px #ff2b87;
  transition:.4s;
}

.mix-list{
  margin-top:14px;
  font-size:12px;
  line-height:1.4;
  max-height:170px;
  overflow:auto;
}

.mix-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  border:1px solid rgba(255,43,135,.25);
  background:rgba(255,255,255,.04);
  border-radius:10px;
  padding:7px 8px;
  margin-bottom:6px;
}

.mix-row button{
  background:#ff2b87;
  color:white;
  border:0;
  border-radius:8px;
  width:26px;
  height:26px;
  cursor:pointer;
  font-weight:900;
}

.checkout-btn{
  display:none;
  width:100%;
  margin-top:14px;
  padding:14px;
  border:0;
  border-radius:16px;
  background:#ff2b87;
  color:white;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 25px rgba(255,43,135,.8);
  animation:pulseBtn 1.3s infinite;
}

@keyframes pulseBtn{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}

.fly-img{
  position:fixed;
  width:85px;
  height:85px;
  object-fit:cover;
  border-radius:18px;
  z-index:99999;
  pointer-events:none;
  transition:all .85s cubic-bezier(.2,.9,.2,1);
}

.basis-card.active,
.topping-card.active{
  border-color:#ff2b87!important;
  box-shadow:0 0 35px rgba(255,43,135,.95)!important;
  transform:scale(1.03);
}

.crunch-final-center{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%) scale(1.15);
  z-index:99999;
}

.ingredient-rain{
  position:fixed;
  top:-30px;
  z-index:999999;
  animation:ingredientFall 3s linear forwards;
  box-shadow:0 2px 6px rgba(0,0,0,.45);
}

@keyframes ingredientFall{
  to{
    transform:translateY(110vh) rotate(900deg);
    opacity:0;
  }
}

.done-message{
  position:fixed;
  top:45%;
  left:50%;
  transform:translate(-50%,-50%);
  background:#050505;
  color:white;
  border:2px solid #ff2b87;
  box-shadow:0 0 55px #ff2b87;
  padding:30px 45px;
  border-radius:25px;
  font-size:32px;
  font-weight:900;
  z-index:999999;
  text-align:center;
  animation:popMessage 2.4s ease forwards;
}

@keyframes popMessage{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6);}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1.1);}
  80%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.85);}
}

@media(max-width:900px){
  .crunch-animation-box{
    position:fixed!important;
    right:12px!important;
    left:auto!important;
    bottom:90px!important;
    top:auto!important;
    width:150px!important;
    transform:none!important;
    z-index:9999;
  }

  .crunch-dose{
    width:150px!important;
    padding:8px!important;
    border-radius:18px!important;
  }

  .dose-lid{
    width:90px!important;
    height:14px!important;
  }

  .dose-glass{
    height:115px!important;
    border-radius:32px 32px 20px 20px!important;
    border-width:3px!important;
  }

  .dose-label{
    top:45px!important;
    font-size:14px!important;
  }

  .dose-info strong{
    font-size:13px!important;
    margin-bottom:5px!important;
  }

  .dose-info{
    font-size:9px!important;
  }

  .dose-info p{
    margin:4px 0 2px!important;
  }

  .bar{
    height:5px!important;
  }

  .mix-list{
    max-height:55px!important;
    font-size:8px!important;
  }

  .mix-row{
    padding:3px 4px!important;
    margin-bottom:3px!important;
  }

  .mix-row button{
    width:18px!important;
    height:18px!important;
    font-size:10px!important;
  }

  .checkout-btn{
    padding:8px!important;
    font-size:11px!important;
    border-radius:10px!important;
  }

  .crunch-final-center{
    width:220px!important;
    left:50%!important;
    right:auto!important;
    top:50%!important;
    bottom:auto!important;
    transform:translate(-50%,-50%)!important;
  }

  .crunch-final-center .crunch-dose{
    width:220px!important;
  }

  .crunch-final-center .dose-glass{
    height:180px!important;
  }

  .done-message{
    width:80%;
    font-size:22px;
    padding:22px;
  }
}
@media(max-width:900px){
  .crunch-animation-box{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:calc(100% - 24px);
    margin:20px auto 35px;
    z-index:5;
  }

  .crunch-animation-box.is-sticky{
    position:fixed;
    right:10px;
    left:auto;
    bottom:88px;
    width:170px;
    margin:0;
    z-index:99999;
    animation:stickyMixIn .25s ease;
  }

  .crunch-animation-box.is-sticky .crunch-dose{
    padding:10px;
    border-radius:18px;
  }

  .crunch-animation-box.is-sticky .dose-lid{
    width:78px;
    height:11px;
  }

  .crunch-animation-box.is-sticky .dose-glass{
    height:100px;
    border-radius:32px 32px 18px 18px;
  }

  .crunch-animation-box.is-sticky .dose-label{
    top:38px;
    font-size:13px;
  }

  .crunch-animation-box.is-sticky .dose-info strong{
    font-size:15px;
  }

  .crunch-animation-box.is-sticky .dose-info{
    font-size:10px;
  }

  .crunch-animation-box.is-sticky .mix-list{
    max-height:55px;
    font-size:9px;
  }

  .crunch-animation-box.is-sticky .checkout-btn{
    padding:9px;
    font-size:12px;
    border-radius:12px;
  }
}

@keyframes stickyMixIn{
  from{
    opacity:0;
    transform:translateX(30px);
  }
  to{
    opacity:1;
    transform:translateX(0);
  }
}
/* ===== PREMIUM AUSWAHL-EFFEKT ===== */



.dose-size-card,
.basis-card,
.topping-card{
  position:relative;
}

.dose-pop,
.basis-pop,
.topping-pop{
  animation:crunchPop .28s ease;
}

@keyframes crunchPop{
  0%{transform:scale(1)}
  50%{transform:scale(1.08)}
  100%{transform:scale(1)}
}

.basis-card.active,
.topping-card.active{
  border-color:#ff2b87!important;
  box-shadow:0 0 40px rgba(255,43,135,.9)!important;
  transform:scale(1.03);
}

.basis-card.active .basis-button,
.topping-card.active .topping-button{
  background:#ff2b87;
  box-shadow:0 0 22px rgba(255,43,135,.9);
}
/* ===== Premium Hover / Schwebe / Neon-Blitz ===== */

.dose-size-card.active{
  animation:doseFloat 2.8s ease-in-out infinite;
}

@keyframes doseFloat{
  0%,100%{
    transform:scale(1.04) translateY(0);
  }
  50%{
    transform:scale(1.04) translateY(-4px);
  }
}

.dose-size-card{
  overflow:hidden;
}

.dose-size-card::after{
  pointer-events:none;
}

.dose-size-card.neon-flash::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-80%;
  width:55%;
  height:180%;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.22),
    rgba(255,43,135,.45),
    transparent
  );
  transform:rotate(18deg);
  animation:neonFlash .55s ease forwards;
  z-index:20;
}

@keyframes neonFlash{
  from{
    left:-80%;
  }
  to{
    left:130%;
  }
}

@media(max-width:900px){
  @keyframes doseFloat{
    0%,100%{
      transform:scale(1.03) translateY(0);
    }
    50%{
      transform:scale(1.03) translateY(-3px);
    }
  }
}
/* ===== CrunchLab Info Popup ===== */

.crunch-info-btn{
  position:absolute;
  right:14px;
  bottom:18px;
  width:38px;
  height:38px;
  border-radius:50%;
  border:2px solid #ff2b87;
  background:#151515;
  color:white;
  font-size:22px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 18px rgba(255,43,135,.8);
  z-index:20;
}

.crunch-info-btn:hover{
  background:#ff2b87;
}

.crunch-info-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.crunch-info-overlay.open{
  display:flex;
}

.crunch-info-modal{
  width:min(720px,100%);
  max-height:82vh;
  overflow:auto;
  background:#151515;
  border:2px solid #ff2b87;
  border-radius:26px;
  padding:22px;
  color:white;
  box-shadow:0 0 45px rgba(255,43,135,.75);
  animation:infoPop .25s ease;
}

@keyframes infoPop{
  from{transform:translateY(30px);opacity:0}
  to{transform:translateY(0);opacity:1}
}

.crunch-info-close{
  position:absolute;
  top:18px;
  right:18px;
  width:34px;
  height:34px;
  border-radius:50%;
  border:2px solid #ff2b87;
  background:#111;
  color:white;
  font-size:22px;
  cursor:pointer;
}

.crunch-info-head{
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:20px;
}

.crunch-info-head img{
  width:95px;
  height:95px;
  object-fit:cover;
  border-radius:18px;
  border:2px solid #ff2b87;
}

.crunch-info-head h3{
  margin:0;
  font-size:26px;
}

.crunch-info-head p{
  color:#ff2b87;
  font-weight:900;
  margin:8px 0 0;
}

.crunch-info-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}

.crunch-info-tab{
  border:1px solid #555;
  border-radius:999px;
  background:#111;
  color:white;
  padding:12px;
  font-weight:800;
  cursor:pointer;
}

.crunch-info-tab.active{
  background:#ff2b87;
  border-color:#ff2b87;
}

.crunch-info-content{
  display:none;
  line-height:1.6;
}

.crunch-info-content.active{
  display:block;
}

.crunch-nutrition-row{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.14);
  padding:9px 0;
}

.crunch-animation-box.info-hidden{
  opacity:0 !important;
  transform:translateX(120px) scale(.92) !important;
  pointer-events:none !important;
}

@media(max-width:900px){
  .crunch-info-modal{
    max-height:78vh;
    padding:18px;
  }

  .crunch-info-head h3{
    font-size:21px;
  }

  .crunch-info-tabs{
    grid-template-columns:1fr;
  }

  .crunch-info-btn{
    width:34px;
    height:34px;
    font-size:19px;
    right:12px;
    bottom:14px;
  }
}
document.addEventListener("DOMContentLoaded", function(){

  const overlay = document.createElement("div");
  overlay.className = "crunch-info-overlay";
  overlay.innerHTML = `
    <div class="crunch-info-modal">
      <button class="crunch-info-close" type="button">×</button>

      <div class="crunch-info-head">
        <img id="infoImage" src="" alt="">
        <div>
          <h3 id="infoTitle"></h3>
          <p id="infoAmount"></p>
        </div>
      </div>

      <div class="crunch-info-tabs">
        <button class="crunch-info-tab active" data-tab="nutrition" type="button">📊 Nährwerte</button>
        <button class="crunch-info-tab" data-tab="ingredients" type="button">🥣 Zutaten</button>
        <button class="crunch-info-tab" data-tab="allergens" type="button">⚠️ Allergene</button>
      </div>

      <div class="crunch-info-content active" id="tab-nutrition"></div>
      <div class="crunch-info-content" id="tab-ingredients"></div>
      <div class="crunch-info-content" id="tab-allergens"></div>
    </div>
  `;

  document.body.appendChild(overlay);

  const mixBox = document.querySelector(".crunch-animation-box");

  document.addEventListener("click", function(e){
    const infoBtn = e.target.closest(".crunch-info-btn");

    if(infoBtn){
      e.preventDefault();
      e.stopPropagation();

      const card = infoBtn.closest(".basis-card, .topping-card");

      if(!card) return;

      const img = card.querySelector("img");
      const title = card.querySelector("h3")?.innerText || "Produkt";

      document.getElementById("infoImage").src = img ? img.src : "";
      document.getElementById("infoTitle").innerText = title;
      document.getElementById("infoAmount").innerText = infoBtn.dataset.amount || "";

      document.getElementById("tab-nutrition").innerHTML = `
        <div class="crunch-nutrition-row"><span>Energie</span><strong>${infoBtn.dataset.energy || "-"}</strong></div>
        <div class="crunch-nutrition-row"><span>Fett</span><strong>${infoBtn.dataset.fat || "-"}</strong></div>
        <div class="crunch-nutrition-row"><span>davon gesättigte Fettsäuren</span><strong>${infoBtn.dataset.saturates || "-"}</strong></div>
        <div class="crunch-nutrition-row"><span>Kohlenhydrate</span><strong>${infoBtn.dataset.carbs || "-"}</strong></div>
        <div class="crunch-nutrition-row"><span>davon Zucker</span><strong>${infoBtn.dataset.sugar || "-"}</strong></div>
        <div class="crunch-nutrition-row"><span>Ballaststoffe</span><strong>${infoBtn.dataset.fiber || "-"}</strong></div>
        <div class="crunch-nutrition-row"><span>Eiweiß</span><strong>${infoBtn.dataset.protein || "-"}</strong></div>
        <div class="crunch-nutrition-row"><span>Salz</span><strong>${infoBtn.dataset.salt || "-"}</strong></div>
      `;

      document.getElementById("tab-ingredients").innerText =
        infoBtn.dataset.ingredients || "Keine Zutaten eingetragen.";

      document.getElementById("tab-allergens").innerText =
        infoBtn.dataset.allergens || "Keine Allergene eingetragen.";

      overlay.classList.add("open");

      if(mixBox){
        mixBox.classList.add("info-hidden");
      }
    }

    const closeBtn = e.target.closest(".crunch-info-close");

    if(closeBtn || e.target.classList.contains("crunch-info-overlay")){
      overlay.classList.remove("open");

      if(mixBox){
        mixBox.classList.remove("info-hidden");
      }
    }

    const tabBtn = e.target.closest(".crunch-info-tab");

    if(tabBtn){
      document.querySelectorAll(".crunch-info-tab").forEach(btn => btn.classList.remove("active"));
      document.querySelectorAll(".crunch-info-content").forEach(tab => tab.classList.remove("active"));

      tabBtn.classList.add("active");
      document.getElementById("tab-" + tabBtn.dataset.tab).classList.add("active");
    }
  });

});
.basis-card,
.topping-card{
  position:relative !important;
}

.ingredient-info-btn{
  position:absolute !important;
  right:18px !important;
  bottom:18px !important;
  width:38px !important;
  height:38px !important;
  border-radius:50% !important;
  border:2px solid #ff2b87 !important;
  background:#151515 !important;
  color:#fff !important;
  font-size:20px !important;
  font-weight:900 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  box-shadow:0 0 18px rgba(255,43,135,.85) !important;
  z-index:50 !important;
}

.ingredient-info-btn:hover{
  background:#ff2b87 !important;
}
/* ===== TOPPINGS BUTTON + INFO AUSRICHTUNG ===== */

.topping-card{
  position: relative !important;
  padding-bottom: 72px !important;
  overflow: visible !important;
}

.topping-card .topping-button{
    position: absolute !important;
    left: 16px !important;
    right: 56px !important;
    bottom: 16px !important;

    width: auto !important;
    max-width: none !important;
    margin: 0 !important;

    height: 42px !important;
    border-radius: 14px !important;

    font-size: 20px !important;
    font-weight: 700 !important;

    padding: 0 18px !important;
}

.topping-card .ingredient-info-btn{
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  border: 2px solid #ff2b87 !important;
  background: #151515 !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 0 18px rgba(255,43,135,.8) !important;
  z-index: 999 !important;
  cursor: pointer !important;
}
/* ===== BASIS BUTTON + INFO AUSRICHTUNG ===== */

.basis-card{
  position: relative !important;
  padding-bottom: 72px !important;
  overflow: visible !important;
}

.basis-card .basis-button{
  position: absolute !important;
  left: 16px !important;
  right: 56px !important;
  bottom: 16px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  height: 42px !important;
  border-radius: 14px !important;
  font-size: 18px !important;
  padding: 0 18px !important;
}

.basis-card .ingredient-info-btn{
    position: absolute !important;
    right: 16px !important;
    bottom: 16px !important;

    width: 34px !important;
    height: 34px !important;

    border-radius: 50% !important;
    border: 2px solid #ff2b87 !important;
    background: #151515 !important;
    color: #fff !important;

    font-size: 18px !important;
    font-weight: 900 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    box-shadow: 0 0 18px rgba(255,43,135,.8) !important;
    z-index: 999 !important;
    cursor: pointer !important;
}
/* ===== INFO POPUP ===== */

.ingredient-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.ingredient-popup-overlay.active{
  display:flex;
}

.ingredient-popup{
  position:relative;
  width:min(720px,100%);
  max-height:86vh;
  overflow-y:auto;
  background:#070707;
  border:3px solid #ff2b87;
  border-radius:28px;
  padding:24px;
  color:#fff;
  box-shadow:0 0 45px rgba(255,43,135,.8);
}

.ingredient-popup-close{
  position:absolute;
  top:16px;
  right:16px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:2px solid #ff2b87;
  background:#111;
  color:#fff;
  font-size:28px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 0 18px rgba(255,43,135,.8);
}

.ingredient-popup-img{
  width:100%;
  max-height:300px;
  object-fit:contain;
  border-radius:20px;
  margin-bottom:14px;
}

.ingredient-popup h2{
  text-align:center;
  font-size:42px;
  margin:8px 0 4px;
  font-weight:900;
}

.ingredient-popup-subtitle{
  text-align:center;
  color:#ff2b87;
  font-size:20px;
  font-weight:800;
  margin-bottom:18px;
}

.ingredient-popup-text{
  font-size:18px;
  line-height:1.5;
  margin-bottom:18px;
}

.ingredient-box{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:18px;
  margin-bottom:14px;
}

.ingredient-box h3{
  color:#ff2b87;
  font-size:20px;
  margin:0 0 10px;
  font-weight:900;
}

.nutri-row{
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:7px 0;
  gap:14px;
}

.popup-add-btn{
  position:sticky;
  bottom:0;
  width:100%;
  height:58px;
  border:none;
  border-radius:16px;
  background:#ff2b87;
  color:#fff;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
  margin-top:18px;
  box-shadow:0 0 24px rgba(255,43,135,.75);
}

.crunch-animation-box.popup-hidden{
  opacity:0 !important;
  transform:translateX(120px) scale(.92) !important;
  pointer-events:none !important;
}

@media(max-width:900px){
  .ingredient-popup{
    max-height:82vh;
    padding:18px;
  }

  .ingredient-popup h2{
    font-size:32px;
  }

  .ingredient-popup-text{
    font-size:16px;
  }

  .popup-add-btn{
    height:52px;
    font-size:20px;
  }
}
.crunch-animation-box{
  display:none !important;
}

.crunch-animation-box.show-mix{
  display:block !important;
}
.mix-jar-wrap{
    position:relative;
    width:180px;
    margin:0 auto 20px;
}

.mix-jar-img{
    width:100%;
    max-height:120px;
    object-fit:contain;
    object-position:top;

    display:block;
    margin:0 auto;

    filter:drop-shadow(0 0 20px rgba(255,43,135,.45));
    position:relative;
    z-index:1;
}
}

.mix-jar-wrap #doseContent{
  position:absolute;
  left:31%;
  bottom:18%;
  width:38%;
  height:34%;
  overflow:hidden;
  border-radius:0 0 18px 18px;
  z-index:3;
  pointer-events:none;
  opacity:.85;
}
@media (max-width:900px){

  .mix-jar-wrap{
      display:flex;
      justify-content:center;
      align-items:flex-start;
      width:100%;
      margin:0 auto 12px;
  }

  .mix-jar-img{
      width:120px !important;
      margin:0 auto !important;
      display:block;
  }

}
.mix-jar-wrap #doseContent{
  display:none !important;
}