/* Paradise Mystery Box — three design variants to compare.
   Shared base, then .pmb-v1 / .pmb-v2 / .pmb-v3. */

@property --pmb-ang{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

.pmb-mystery{ position:relative !important; border-radius:16px !important; overflow:hidden !important; }
.pmb-mystery .productbox-inner{ position:relative; z-index:1; }

/* "Begrenzte Stückzahl" scarcity badge — bigger, animated (shine + pulse) */
.pmb-mystery .productbox-quick-actions{ top:10px !important; left:10px !important; }
.pmb-mystery .ribbon-8{
  position:relative !important; overflow:hidden !important;
  background:linear-gradient(90deg,#b91c1c,#e11d48) !important;
  color:#ffffff !important;
  font-size:11px !important; font-weight:800 !important; letter-spacing:.03em !important;
  white-space:nowrap !important; padding:5px 12px !important; border-radius:7px !important;
  box-shadow:0 4px 14px rgba(200,20,45,.55) !important;
  animation:pmb-badge-pulse 1.9s ease-in-out infinite;
}
.pmb-mystery .ribbon-8::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.6) 50%,transparent 72%);
  transform:translateX(-120%);animation:pmb-badge-shine 2.6s ease-in-out infinite;
}
@keyframes pmb-badge-shine{ 0%,55%{transform:translateX(-120%);} 100%{transform:translateX(120%);} }
@keyframes pmb-badge-pulse{ 0%,100%{box-shadow:0 4px 14px rgba(200,20,45,.5);} 50%{box-shadow:0 6px 22px rgba(225,29,72,.85);} }

/* ============================================================
   Design 1 — Flowing gradient frame + shine + diagonal ribbon
   ============================================================ */
.pmb-v1{
  background:#0e0d13 !important;                                   /* full black (slightly purple) */
  box-shadow:0 18px 50px -16px rgba(124,58,237,.55) !important;
}
.pmb-v1 .productbox-inner{ background:transparent !important; }
/* text readable on black */
.pmb-v1 .productbox-title,
.pmb-v1 .productbox-title a{ color:#ffffff !important; }
.pmb-v1 .old-price,
.pmb-v1 .old-price *{ color:#ffffff !important; }                 /* struck old price -> white */
.pmb-v1 .price-special,
.pmb-v1 .price.price-special,
.pmb-v1 .price-special .value{ color:#ff5a6a !important; }        /* deal price pops */
.pmb-v1 .vat_info, .pmb-v1 .vat_info *, .pmb-v1 .vat_info a,
.pmb-v1 .productbox-prices_vat-info, .pmb-v1 .productbox-prices_netto,
.pmb-v1 .price-note, .pmb-v1 .price-note *,
.pmb-v1 .base_price, .pmb-v1 .base_price .value,
.pmb-v1 .delivery-status, .pmb-v1 .delivery-status *{ color:#ffffff !important; }
.pmb-v1::before{
  content:"";position:absolute;inset:0;border-radius:16px;padding:2.5px;pointer-events:none;z-index:5;
  background:conic-gradient(from var(--pmb-ang), #f59e0b, #ec4899, #a855f7, #f59e0b);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:pmb-rot 4s linear infinite;
}
@keyframes pmb-rot{ to{ --pmb-ang:360deg; } }
.pmb-v1 .productbox-images{ overflow:hidden; }
.pmb-v1 .productbox-images::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 49%,transparent 63%);
  transform:translateX(-130%);animation:pmb-shine 4.6s ease-in-out infinite;
}
@keyframes pmb-shine{ 0%,72%{transform:translateX(-130%);} 88%,100%{transform:translateX(130%);} }
.pmb-ribbon{ position:absolute;top:0;right:0;width:160px;height:160px;z-index:7;pointer-events:none;overflow:hidden; }
.pmb-ribbon span{
  position:absolute;top:34px;right:-50px;transform:rotate(45deg);
  display:block;width:220px;text-align:center;white-space:nowrap;
  background:linear-gradient(90deg,#1b0a33,#4c1d95 55%,#1b0a33);color:#ffffff;
  font-family:inherit;font-weight:800;font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:7px 0;
  box-shadow:0 5px 14px rgba(40,10,80,.5);border-top:1px solid rgba(255,255,255,.35);border-bottom:1px solid rgba(255,255,255,.18);
}
.pmb-ribbon span::before,.pmb-ribbon span::after{ content:"\2726";margin:0 .3em;color:#ffffff;opacity:.85; }

/* ============================================================
   Design 2 — Bold purple frame + dark top banner (gold text)
   ============================================================ */
.pmb-v2{
  background:#ffffff !important;
  box-shadow:0 0 0 2.5px #7c3aed, 0 16px 46px -14px rgba(124,58,237,.55) !important;
}
.pmb-v2 .productbox-inner{ padding-top:30px; }   /* room for the banner */
.pmb-banner{
  position:absolute;top:0;left:0;right:0;z-index:7;pointer-events:none;
  background:linear-gradient(90deg,#17091f,#4c1d95 50%,#17091f);color:#fbbf24;
  text-align:center;font-family:inherit;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:7px 8px;box-shadow:0 3px 10px rgba(0,0,0,.35);
}
.pmb-banner span::before,.pmb-banner span::after{ content:"\2726";margin:0 .5em;color:#fbbf24; }

/* ============================================================
   Design 3 — Neon emerald glow (pulse) + glass pill badge
   ============================================================ */
.pmb-v3{
  background:#ffffff !important;
  box-shadow:0 0 0 1.5px rgba(16,185,129,.6), 0 0 26px -2px rgba(16,185,129,.45), 0 14px 40px -16px rgba(5,150,105,.5) !important;
  animation:pmb-pulse 2.6s ease-in-out infinite;
}
@keyframes pmb-pulse{
  0%,100%{ box-shadow:0 0 0 1.5px rgba(16,185,129,.55), 0 0 22px -4px rgba(16,185,129,.4),  0 14px 40px -16px rgba(5,150,105,.45); }
  50%    { box-shadow:0 0 0 1.5px rgba(52,211,153,.85),0 0 34px 0 rgba(16,185,129,.6),      0 16px 46px -16px rgba(5,150,105,.6); }
}
.pmb-pill{ position:absolute;top:12px;right:12px;z-index:7;pointer-events:none; }
.pmb-pill span{
  display:inline-block;background:linear-gradient(90deg,#065f46,#059669);color:#eafff5;
  font-family:inherit;font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;box-shadow:0 4px 12px rgba(5,120,80,.45);border:1px solid rgba(255,255,255,.35);
}
.pmb-pill span::before{ content:"\2726";margin-right:.35em; }

/* ---- Mobile: scale the ribbon + badges down so nothing overflows ---- */
@media (max-width:767px){
  .pmb-ribbon{ width:122px;height:122px; }
  .pmb-ribbon span{ top:25px;right:-54px;width:190px;font-size:8.5px;padding:5px 0; }
  .pmb-mystery .productbox-quick-actions{ top:7px !important; left:7px !important; }
  .pmb-mystery .ribbon-8{ font-size:9px !important;padding:4px 9px !important; }
  .pmb-banner{ font-size:9px;letter-spacing:.08em;padding:5px 6px; }
  .pmb-v2 .productbox-inner{ padding-top:26px; }
  .pmb-pill{ top:9px;right:9px; }
  .pmb-pill span{ font-size:9px;padding:4px 9px; }
}

@media (prefers-reduced-motion:reduce){
  .pmb-v1::before{ animation:none; }
  .pmb-v1 .productbox-images::after{ display:none; }
  .pmb-v3{ animation:none; }
  .pmb-mystery .ribbon-8{ animation:none !important; }
  .pmb-mystery .ribbon-8::after{ display:none; }
}