/* Wunschliste — Herz-Buttons auf Karten + Panel von rechts (Julian, 20.08.2026).
   Self-contained, damit es auf Layout-Seiten und den Standalone-V4-Seiten
   gleich aussieht. Logik: js/wunschliste.js */

/* ── Herz auf einer Karte ── */
/* Immer oben rechts — auf jeder Kartenart gleich (Julian, 20.08.2026).
   Dort ist überall Platz: Plus-Buttons sitzen unten bzw. mittig, das
   Sold-out-Pill oben links. */
.mmd-herz {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(17, 17, 17, 0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(17, 17, 17, 0.5); cursor: pointer; padding: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}
/* Touch: unsichtbares Trefferfeld auf 44 px. Der weiße Kreis bleibt 30 px —
   größer würde er das Produktbild überdecken (gemessen 10.09.2026: 30 × 30). */
@media (hover: none) {
  .mmd-herz::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; }
}

.mmd-herz:hover { background: #fff; color: #e0455f; transform: scale(1.08); }
.mmd-herz svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.mmd-herz.active { color: #e0455f; }
.mmd-herz.active svg { fill: #e0455f; }
.mmd-herz:focus-visible { outline: 2px solid #0d0d0d; outline-offset: 2px; }


/* ── Nav-Icon mit Zähler ── steht seit 05.10.2026 in v4-nav.css, zusammen mit
   dem Warenkorb-Zähler (eine Regel, s. dort). Jede Seite mit Wunschliste lädt
   v4-nav.css. */

/* ── Panel ── */
#mmd-wunsch-panel {
  position: fixed; inset: 0; z-index: 9995;
  background: rgba(0, 0, 0, 0); backdrop-filter: blur(0px);
  transition: background 0.26s ease, backdrop-filter 0.26s ease;
  font-family: 'DM Sans', sans-serif;
}
#mmd-wunsch-panel[hidden] { display: none; }
#mmd-wunsch-panel.offen { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); }

.mmd-wunsch-blatt {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
  background: #fff; display: flex; flex-direction: column;
  box-shadow: -12px 0 44px rgba(0, 0, 0, 0.2);
  transform: translateX(100%); transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
#mmd-wunsch-panel.offen .mmd-wunsch-blatt { transform: translateX(0); }

.mmd-wunsch-kopf {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.mmd-wunsch-kopf h2 {
  margin: 0; font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 20px; letter-spacing: 0.02em; color: #0d0d0d; text-transform: uppercase;
}
.mmd-wunsch-zu {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: rgba(13, 13, 13, 0.06); color: #0d0d0d; font-size: 19px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.mmd-wunsch-zu:hover { background: rgba(13, 13, 13, 0.12); }

.mmd-wunsch-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mmd-wunsch-leer { margin: 30px 6px; font-size: 13.5px; line-height: 1.6; color: rgba(13, 13, 13, 0.5); }

/* Zwei Zeilen statt einer (Julian, 25.08.2026): der Knopf heißt jetzt „Im
   Konfigurator öffnen" und hätte in einer Reihe den Titel plattgedrückt. Oben
   Bild + Name + Entfernen, darunter der Weg in den Konfigurator über die ganze
   Breite. Das Vorschaubild ist zugleich größer, damit ein Motiv erkennbar ist. */
.mmd-wunsch-item {
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center;
  gap: 6px 12px; padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; background: #fff;
}
.mmd-wunsch-bild {
  width: 64px; height: 64px; flex: none; border-radius: 10px; overflow: hidden;
  background: #f1efec; display: flex; align-items: center; justify-content: center;
}
.mmd-wunsch-bild img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.mmd-wunsch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mmd-wunsch-text strong { font-size: 13.5px; font-weight: 700; color: #0d0d0d; }
/* Untertitel einzeilig halten (Produkt + Farbe wird sonst zweizeilig und
   schiebt die Karten auseinander) */
.mmd-wunsch-text span {
  font-size: 12px; color: rgba(13, 13, 13, 0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mmd-wunsch-aktionen { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; }
.mmd-wunsch-oeffnen {
  flex: 1; text-align: center;
  font-size: 12.5px; font-weight: 600; color: #0d0d0d; text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.16); border-radius: 100px; padding: 8px 13px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mmd-wunsch-oeffnen:hover { background: #0d0d0d; border-color: #0d0d0d; color: #fff; }
.mmd-wunsch-weg {
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: rgba(13, 13, 13, 0.4); font-size: 17px; line-height: 1;
}
.mmd-wunsch-weg:hover { background: rgba(13, 13, 13, 0.07); color: #0d0d0d; }

.mmd-wunsch-fuss { padding: 14px 16px 18px; border-top: 1px solid rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; gap: 8px; }
.mmd-wunsch-fuss[hidden] { display: none; }
.mmd-wunsch-cta {
  display: block; text-align: center; padding: 14px; border-radius: 100px;
  background: #0d0d0d; color: #fff; font-size: 13.5px; font-weight: 700;
  text-decoration: none; transition: background 0.15s;
}
.mmd-wunsch-cta:hover { background: #2a2a2a; }
.mmd-wunsch-hinweis { margin: 0; font-size: 11.5px; line-height: 1.5; color: rgba(13, 13, 13, 0.45); text-align: center; }