/* Favoriten -- Herz an Produkten + Liste in Mein Konto (23.08.2026).
   Farben und Radien orientieren sich an shop2.css/konto2.css, damit sich das Feature
   nicht wie ein Fremdkoerper anfuehlt. Das Herz ist im Ruhezustand nur Kontur; gefuellt
   heisst gemerkt -- ohne Text, aber mit aria-pressed und title fuer alles, was keinen
   Blick darauf werfen kann. */

.zsf-herz {
  appearance: none;
  border: 0;
  background: rgba(255, 255, 255, .92);
  color: #10c956;
  padding: 6px;
  line-height: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  transition: transform .12s, background .12s;
}
.zsf-herz svg { fill: none; stroke: currentColor; stroke-width: 2; }
.zsf-herz.is-an svg { fill: currentColor; }
.zsf-herz:hover { transform: scale(1.08); }
.zsf-herz:focus-visible { outline: 2px solid #10c956; outline-offset: 2px; }
.zsf-herz.is-busy { opacity: .5; pointer-events: none; }

/* Kurzes Aufpoppen beim Merken -- die einzige Rueckmeldung, die es auf der Karte gibt,
   deshalb sichtbar aber nicht albern. Wer Animationen abbestellt hat, bekommt keine. */
@keyframes zsf-puls { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }
.zsf-herz.is-puls { animation: zsf-puls .28s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .zsf-herz, .zsf-herz.is-puls { transition: none; animation: none; }
}

/* Auf der Produktkarte sitzt das Herz als Overlay oben rechts ueber dem Bild.
   .z2-card ist bereits position:relative in shop2.css; zur Sicherheit hier nochmal,
   sonst wuerde das Herz an den Seitenrand rutschen. */
.z2-card { position: relative; }
.zsf-herz--karte { position: absolute; top: 10px; right: 10px; z-index: 3; }

/* Auf der Produktseite steht es in der Textspalte, nicht ueber dem Bild. */
.zsf-herz--seite {
  position: static;
  background: transparent;
  box-shadow: none;
  padding: 4px 0;
  margin: 4px 0 10px;
}

/* ── Kontoliste ─────────────────────────────────────────────────────────── */

.zsf-kopf { margin-bottom: 14px; }
.zsf-titel { font-size: 20px; margin: 0 0 4px; }
.zsf-hinweis { font-size: 13px; color: #666; margin: 0; line-height: 1.6; max-width: 620px; }

.zsf-leer { border: 1px dashed #d8d8d8; border-radius: 10px; padding: 24px; text-align: center; }
.zsf-leer p { margin: 0 0 12px; color: #666; font-size: 14px; }
.zsf-btn {
  display: inline-block; background: #10c956; color: #fff; text-decoration: none;
  padding: 10px 18px; border-radius: 8px; font-size: 14px; font-weight: 600;
}

.zsf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.zsf-item {
  display: grid;
  grid-template-columns: 28px 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.zsf-item.is-zieht { opacity: .55; }
/* Zielmarkierung beim Ziehen: eine Linie oben, damit man sieht wo es landet, statt
   die Zeilen live zu verschieben (das ruckelt auf dem Handy). */
.zsf-item.is-ziel { box-shadow: inset 0 2px 0 #10c956; }

.zsf-griff { appearance: none; border: 0; background: none; color: #b0b0b0; cursor: grab; padding: 4px; line-height: 0; }
.zsf-griff:active { cursor: grabbing; }

.zsf-bild { display: block; line-height: 0; }
.zsf-bild img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; display: block; }

.zsf-text { min-width: 0; }
.zsf-name { display: block; font-size: 14px; font-weight: 600; color: #111; text-decoration: none; }
.zsf-name:hover { text-decoration: underline; }
.zsf-meta { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.zsf-preis { font-size: 13px; color: #333; }
.zsf-preis del { color: #999; margin-right: 4px; }
.zsf-status { font-size: 11px; color: #a06000; }

.zsf-aktionen { display: flex; align-items: center; gap: 10px; }

.zsf-schalter { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.zsf-schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.zsf-schalter-spur {
  width: 36px; height: 20px; border-radius: 999px; background: #d8d8d8;
  position: relative; flex: none; transition: background .15s;
}
.zsf-schalter-spur::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left .15s;
}
.zsf-schalter input:checked + .zsf-schalter-spur { background: #10c956; }
.zsf-schalter input:checked + .zsf-schalter-spur::after { left: 18px; }
.zsf-schalter input:focus-visible + .zsf-schalter-spur { outline: 2px solid #10c956; outline-offset: 2px; }
.zsf-schalter-text { font-size: 12px; color: #555; }

.zsf-weg { appearance: none; border: 0; background: none; color: #b0b0b0; cursor: pointer; padding: 4px; line-height: 0; border-radius: 6px; }
.zsf-weg:hover { color: #c0392b; background: #f7f7f7; }

.zsf-fuss { font-size: 12px; color: #666; margin: 10px 0 0; min-height: 18px; }

/* Handy: Bild und Text nebeneinander, Aktionen darunter in eigener Zeile --
   sonst wird der Name auf 40 Pixel zusammengequetscht. */
@media (max-width: 600px) {
  .zsf-item { grid-template-columns: 24px 56px minmax(0, 1fr); }
  .zsf-bild img { width: 56px; height: 56px; }
  .zsf-aktionen { grid-column: 2 / -1; justify-content: space-between; width: 100%; }
  .zsf-schalter-text { font-size: 11px; }
}