:root{ --stickybar-h:44px; }

/* Base */
.stickybar{
  position: sticky;
  top:0;
  height:var(--stickybar-h);
  z-index:9999;
  color:#fff;

  /* visible fallback background */
  background:rgba(10,18,30,.78);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  isolation:isolate;

  border-bottom:1px solid rgba(255,255,255,.22);
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.stickybar::before{
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,18,30,.68), rgba(10,18,30,.55));
}

.stickybar-inner{
  height:100%;
  max-width:1200px; margin:0 auto;
  padding:0 14px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}

.stickybar-left{ display:flex; align-items:center; gap:10px; }

.stickybar-badge{
  background:rgba(21,128,61,.85);
  font-size:12px; font-weight:700;
  padding:3px 8px; border-radius:999px;
}

.stickybar-msg{
  font-size:14px; font-weight:700; letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stickybar-msg.shop-a{ color:#fff; text-shadow:0 0 8px rgba(255,255,255,.25); }
.stickybar-msg.shop-b{ color:#ffcc33; text-shadow:0 0 10px rgba(255,204,51,.35); }

/* Button */
.stickybar-btn{
  position:relative;
  padding:8px 14px 8px 52px;
  border-radius:999px;
  font-weight:700; font-size:14px; text-decoration:none;
  background:linear-gradient(180deg,#16a34a,#15803d);
  color:#fff; border:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s ease, box-shadow .18s ease, background .25s ease;
  white-space:nowrap;
}
.stickybar-btn:active{ transform:translateY(1px); box-shadow:0 1px 3px rgba(0,0,0,.25); }

/* Icon chip for better visibility */
.stickybar-btn::before{
  content:"";
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:999px;
  background:rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.stickybar-btn::after{
  content:"";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  width:18px; height:18px;
  background-repeat:no-repeat; background-size:18px 18px;
}

/* Shop A cart (white) */
.stickybar-btn.shop-a::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2Zm10 0c-1.1 0-1.99.9-1.99 2S15.9 22 17 22s2-.9 2-2-.9-2-2-2ZM7.16 14h9.95c.75 0 1.4-.41 1.74-1.03l3.1-5.63a1 1 0 0 0-.87-1.48H6.21L5.27 2.5A1 1 0 0 0 4.3 2H2a1 1 0 1 0 0 2h1.56l2.8 12.43A2 2 0 0 0 8.31 18H19a1 1 0 1 0 0-2H8.31a.25.25 0 0 1-.24-.2L7.16 14Z'/%3E%3C/svg%3E");
}
/* Shop B plug (white) */
.stickybar-btn.shop-b::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 2a1 1 0 0 1 1 1v6h8V3a1 1 0 1 1 2 0v6h1a1 1 0 0 1 0 2h-1v2a6 6 0 0 1-5 5.92V22a1 1 0 1 1-2 0v-1.08A6 6 0 0 1 6 13v-2H5a1 1 0 1 1 0-2h1V3a1 1 0 0 1 1-1Zm1 11a4 4 0 0 0 8 0v-2H8v2Z'/%3E%3C/svg%3E");
}
.stickybar-btn.shop-b::before{
  background:rgba(255,204,51,.22);
}

/* Mobile: fixed bottom + full-width bar + single CTA (ALWAYS VISIBLE) */
@media (max-width:768px){
  :root{ --stickybar-h:52px; }

  .stickybar{
    position:fixed; bottom:0; left:0; right:0;
    height:var(--stickybar-h);
    z-index:99999 !important;

    background:rgba(12,18,26,.94);
    backdrop-filter: blur(10px);

    border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 -4px 14px rgba(0,0,0,.18);
    padding-bottom: env(safe-area-inset-bottom);
  }

  body{
    padding-bottom: calc(var(--stickybar-h) + env(safe-area-inset-bottom));
  }

  .stickybar-inner{
    height:var(--stickybar-h);
    padding:0 12px;
    justify-content:center;
  }

  /* linke Texte komplett weg auf Mobile */
  .stickybar-left{
    display:none !important;
  }

  /* BUTTON — komplett neu proportioniert */
  .stickybar-btn{
    font-size:14px !important;
    font-weight:600;

    height:38px;
    line-height:38px;

    padding:0 18px 0 46px !important;
    border-radius:22px;

    background:#1f8f46;           /* kein Verlauf mehr */
    box-shadow:0 2px 6px rgba(0,0,0,.25);

    width:auto;
    max-width:92%;
  }

  /* Icon-Kreis kleiner */
  .stickybar-btn::before{
    width:26px;
    height:26px;
    left:10px;
    background:rgba(255,255,255,.14);
  }

  .stickybar-btn::after{
    width:15px;
    height:15px;
    left:16px;
    background-size:15px 15px;
  }
}
@media (max-width: 768px){
  .stickybar{
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--stickybar-h) !important;
    z-index: 99999 !important;
  }
}

/* Navigation arrows */
.stickybar-nav{
  width:34px;
  height:34px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  position:relative;
  cursor:pointer;
  flex:0 0 auto;
}
.stickybar-nav:active{ transform:scale(.92); }

/* arrow icons */
.stickybar-prev::after,
.stickybar-next::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:10px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  transform-origin:center;
}
.stickybar-prev::after{ transform:translate(-40%,-50%) rotate(-135deg); }
.stickybar-next::after{ transform:translate(-60%,-50%) rotate(45deg); }

/* layout mobile */
@media (max-width:768px){
  .stickybar-inner{
    justify-content:space-between;
    gap:8px;
  }

  .stickybar-btn{
    flex:1;
    text-align:center;
  }
}

/* Desktop: arrows deutlich sichtbarer */
@media (min-width: 769px){
  .stickybar-inner{ gap:12px; }

  .stickybar-nav{
    width:40px;
    height:40px;
    background:rgba(255,255,255,.14);
    box-shadow:0 6px 18px rgba(0,0,0,.22);
    border:1px solid rgba(255,255,255,.10);
  }

  /* Pfeil-Icon dicker & größer */
  .stickybar-prev::after,
  .stickybar-next::after{
    width:12px;
    height:12px;
    border-top:3px solid rgba(255,255,255,.92);
    border-right:3px solid rgba(255,255,255,.92);
  }

  /* Hover: klare Rückmeldung */
  .stickybar-nav:hover{
    background:rgba(255,255,255,.22);
    transform:translateY(-1px);
  }

  /* optional: etwas mehr Abstand vom Rand */
  .stickybar{
    padding-left:8px;
    padding-right:8px;
  }
}

/* Smooth transition for content change */
.stickybar-btn,
.stickybar-msg{
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}
.stickybar-fade-out .stickybar-btn,
.stickybar-fade-out .stickybar-msg{
  opacity: 0;
  transform: translateY(2px);
}
.stickybar-fade-in .stickybar-btn,
.stickybar-fade-in .stickybar-msg{
  opacity: 1;
  transform: translateY(0);
}

/* progress indicator */
.stickybar-progress{
  position:absolute;
  top:0;
  left:0;
  height:2px;
  width:0%;
  background:linear-gradient(90deg,#22c55e,#4ade80);
  opacity:.85;
  pointer-events:none;
}
.stickybar-progress.run{ animation: stickybarTimer 7.5s linear forwards; }

@keyframes stickybarTimer{
  from{ width:0%; }
  to{ width:100%; }
}

/* Astra focus color fix for stickybar arrows */
.stickybar-nav,
.stickybar-nav:focus,
.stickybar-nav:focus-visible,
.stickybar-nav:active{
  outline: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.22) !important;
  background: rgba(255,255,255,.14) !important;
  color:#fff !important;
}

/* remove iOS tap highlight */
.stickybar-nav{ -webkit-tap-highlight-color: transparent; }

/* prevent gold border on Safari */
.stickybar-nav::-moz-focus-inner{ border:0; }