/* ============================================================
   Lagertechnik Direkt — Merkliste (B2B Stufe 1)
   Komponenten-CSS. Basis-Tokens/Buttons/Header stehen in site.css
   und werden nur wiederverwendet (site.css wird NICHT verändert).
   Struktur bewusst an cart.css angelehnt (visuelle Parität Warenkorb ⇄ Merkliste).
   ============================================================ */

.wish-page { padding: clamp(26px,4vw,44px) 0 80px; }
.wish-page .crumbs { color: var(--muted); font-size: var(--fs-ms); margin-bottom: .6rem; }
.wish-page .crumbs a:hover { color: var(--text); }

.wish-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.wish-head h1 { font-size: var(--fs-h2); }
.wish-head .muted { color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-md); font-family: 'Inter',sans-serif; }
.wish-head .muted b { color: var(--red); }

/* ---------- Liste ---------- */
.wish-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.wish-row {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  grid-template-areas: "art info prices actions";
  gap: 18px; align-items: center;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel);
  padding: 14px;
}
.wish-art {
  grid-area: art; width: 84px; aspect-ratio: 4/3; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--steel-2);
  background: var(--panel-2); border: 1px solid var(--line);
}
.wish-art svg { width: 62%; }
.wish-art.has-photo { background: #fff; overflow: hidden; }
.wish-art.has-photo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }

.wish-info { grid-area: info; min-width: 0; }
.wish-sys { font-size: var(--fs-xs); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--steel-2); font-weight: var(--fw-semibold); }
.wish-name { display: block; font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--text); margin: .25rem 0 .3rem; line-height: 1.3; }
.wish-meta { color: var(--muted); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: .15rem .7rem; }
.wish-meta span { white-space: nowrap; }
.wish-flag {
  display: inline-block; margin-top: .45rem; font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  color: var(--red); background: rgba(226,0,26,.1); border: 1px solid rgba(226,0,26,.25);
  padding: .14rem .55rem; border-radius: 999px;
}

.wish-prices { grid-area: prices; text-align: right; min-width: 92px; }
.wish-unit { font-family: 'Sora',sans-serif; font-weight: var(--fw-bold); font-size: var(--fs-lg); color: var(--text); font-variant-numeric: tabular-nums; }
.wish-unit small { font-family: 'Inter',sans-serif; font-weight: var(--fw-medium); font-size: var(--fs-xs); color: var(--muted); }

.wish-row-actions { grid-area: actions; display: flex; align-items: center; gap: .5rem; }
.wish-add { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.wish-add svg { width: 17px; height: 17px; }
.wish-quote { white-space: nowrap; }
.wish-remove {
  width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); cursor: pointer; transition: .18s var(--ease);
}
.wish-remove:hover { color: var(--red-text); border-color: var(--red); background: rgba(226,0,26,.12); }

/* ---------- Fußzeile (Aktionen) ---------- */
.wish-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 20px; }
.wish-add-all { display: inline-flex; align-items: center; gap: .5rem; }
.wish-add-all svg { width: 18px; height: 18px; }
.wish-clear {
  display: inline-flex; align-items: center; gap: .45rem; margin-left: auto;
  background: none; border: none; color: var(--muted); font-size: var(--fs-ms); cursor: pointer;
  padding: .4rem .2rem; transition: .15s var(--ease);
}
.wish-clear:hover { color: var(--red); }
.wish-clear svg { width: 16px; height: 16px; }
.wish-mini { color: var(--muted); font-size: var(--fs-xs); margin-top: .9rem; }

/* ---------- Leerer Zustand ---------- */
/* Als abgeschlossene, mittig gesetzte Karte (nicht als breite Drop-Zone) und
   vertikal ausbalanciert, damit unter der kurzen Botschaft kein hoher Leerraum
   bis zum Footer entsteht. */
.wish-empty {
  max-width: 700px; margin-inline: auto;
  min-height: 46vh; justify-content: center;
  text-align: center; padding: 70px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel);
}
.wish-empty-ico { color: var(--steel); }
.wish-empty h2 { font-size: var(--fs-3xl); }
.wish-empty p { color: var(--muted-2); max-width: 46ch; }

/* ============================================================
   Merken-Toggle-Button (Produktkarten + PDP)
   ============================================================ */
/* Karten-Variante: kompakter runder Icon-Button oben rechts in .pcard-art. */
.pcard-art { position: relative; }
.pcard-merk {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.92); color: var(--muted-2);
  cursor: pointer; padding: 0; transition: .15s var(--ease);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.pcard-merk svg { width: 18px; height: 18px; fill: none; }
.pcard-merk:hover { color: var(--red-text); border-color: var(--red); }
.pcard-merk.is-saved { color: var(--red); border-color: var(--red); background: rgba(226,0,26,.1); }
.pcard-merk.is-saved svg { fill: currentColor; }
/* Der Merken-Button hat KEIN sichtbares Label auf den Karten (.merk-lbl nur für PDP);
   sr-only-Label liefert das aria-label via JS. */
.pcard-merk .merk-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* PDP-Variante: Text-Button neben den Kauf-Aktionen. */
.pdp-merk {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  border: 1px solid var(--line-2); background: var(--panel); color: var(--muted-2);
  border-radius: var(--r); padding: 0 1rem; height: 46px; cursor: pointer;
  font-weight: var(--fw-semibold); font-size: var(--fs-base); transition: .15s var(--ease);
}
.pdp-merk svg { width: 19px; height: 19px; fill: none; flex: 0 0 auto; }
.pdp-merk:hover { color: var(--red-text); border-color: var(--red); }
.pdp-merk.is-saved { color: var(--red); border-color: var(--red); background: rgba(226,0,26,.07); }
.pdp-merk.is-saved svg { fill: currentColor; }

/* ---------- A11y: sichtbarer Tastatur-Fokus ---------- */
.wish-page a:focus-visible,
.wish-page button:focus-visible,
.pcard-merk:focus-visible,
.pdp-merk:focus-visible,
.site-header .icon-btn:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

/* ---------- Header-Badge (eigene Klasse, NICHT .badge → cart.js) ---------- */
.icon-btn .wish-badge {
  position: absolute; top: -6px; right: -6px; background: var(--red); color: #fff;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: var(--lh-caps); min-width: 18px; height: 18px; border-radius: 9px;
  display: grid; place-items: center; padding: 0 4px;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .wish-row {
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "art info prices"
      "art actions actions";
    gap: 10px 14px; align-items: start;
  }
  .wish-art { width: 64px; }
  .wish-prices { grid-column: 3; }
  .wish-row-actions { justify-content: flex-start; margin-top: 4px; }
}
@media (max-width: 560px) {
  .wish-row {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "art info"
      "art prices"
      "actions actions";
  }
  .wish-prices { grid-column: auto; text-align: left; }
  .wish-foot { flex-direction: column; align-items: stretch; }
  .wish-add-all { width: 100%; justify-content: center; }
  .wish-clear { margin-left: 0; justify-content: center; }
  /* Tap-Ziele ≥44px auf Touch/Mobil. */
  .wish-remove { width: 44px; height: 44px; }
  .pcard-merk { width: 40px; height: 40px; }
}