/* ──────────────────────────────────────────────────────────────────────────────
   Hagn Wunschliste – Styles
   ────────────────────────────────────────────────────────────────────────────── */

/* ── Heart Button ────────────────────────────────────────────────────────────── */

.custom-wishlist-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, background 0.2s ease;
}

.custom-wishlist-btn:hover {
  background: #fff;
  transform: scale(1.1);
}

.custom-wishlist-btn svg path {
  fill: none;
  stroke: #999;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.custom-wishlist-btn.is-active svg path {
  fill: #000;
  stroke: #000;
}

@keyframes wishlist-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.custom-wishlist-btn.bounce {
  animation: wishlist-bounce 0.4s ease forwards;
}

li.product .inner_product {
  position: relative;
}

/* ── Wishlist-Filter ─────────────────────────────────────────────────────────── */

body.wishlist-filter-active li.product.not-on-wishlist {
  display: none !important;
}

body.wishlist-filter-active li.product {
  transition: opacity 0.3s ease;
}

/* ── Leere Wunschliste ───────────────────────────────────────────────────────── */

#wishlist-empty-msg {
  display: none;
  width: 100%;
  text-align: center;
  padding: 60px 20px;
  color: #666;
  font-size: 1.1em;
}

#wishlist-empty-msg.is-visible {
  display: block;
}

/* ── Filter-Banner (wird über der Produktliste eingeblendet) ─────────────────── */

.wishlist-filter-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  margin-bottom: 24px;
  background: #fdf6f5;
  border: 1px solid #e8c8c5;
  border-radius: 6px;
  font-size: 0.95em;
}

.wishlist-filter-banner__text {
  color: #7a2e2a;
}

.wishlist-filter-banner__reset {
  color: #c0392b;
  text-decoration: underline;
  white-space: nowrap;
}

.wishlist-filter-banner__reset:hover {
  color: #922b21;
}

/* ── Menü-Badge ──────────────────────────────────────────────────────────────── */

.wishlist-menu-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  margin-left: 4px;
  border-radius: 9px;
  background: #c0392b;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
}

.wishlist-menu-badge.is-visible {
  opacity: 1;
  transform: scale(1);
}