/* === Merken-Button auf Produktseiten === */
.nm2-wl-btn {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 12px 0 0; padding: 10px 18px;
    background: #fff; border: 1px solid #d8dbe0; border-radius: 999px;
    color: #333; font-size: 14px; font-weight: 600; line-height: 1;
    cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
.nm2-wl-btn:hover { border-color: #b9bec6; color: #111; }
.nm2-wl-btn.is-on { border-color: #E8B923; background: #FFFBEC; color: #7a5c00; }
.nm2-wl-btn.is-on .nm2-wl-btn-icon svg { fill: #FFCF1B; stroke: #D9A800; }
.nm2-wl-btn-icon { display: inline-flex; }

/* === Merkliste-Seite === */
.nm2-wl-page { margin: 24px 0 40px; }
.nm2-wl-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
}
.nm2-wl-card {
    position: relative; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #e7e9ed; border-radius: 12px; overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}
.nm2-wl-card:hover { border-color: #d5d9e0; box-shadow: 0 8px 24px -12px rgba(0,0,0,.28); }
.nm2-wl-card-img { display: block; aspect-ratio: 4 / 3; background: #f6f7f9; }
.nm2-wl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nm2-wl-card-img.is-empty {
    background-color: #f6f7f9;
    background-image: linear-gradient(135deg, #f9fafb 25%, #f2f4f6 25%, #f2f4f6 50%, #f9fafb 50%, #f9fafb 75%, #f2f4f6 75%);
    background-size: 18px 18px;
}
.nm2-wl-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.nm2-wl-card-title { font-size: 14px; font-weight: 600; color: #1a1c20; line-height: 1.35; text-decoration: none; }
.nm2-wl-card-title:hover { color: #000; }
.nm2-wl-card-price { font-size: 14px; font-weight: 700; color: #7a5c00; }
.nm2-wl-card-link { margin-top: 2px; font-size: 13px; font-weight: 600; color: #8a6a00; text-decoration: none; }
.nm2-wl-card-link:hover { color: #6b5200; text-decoration: underline; }
.nm2-wl-card-remove {
    position: absolute; top: 10px; right: 10px; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.94); border: 1px solid #e2e5ea; border-radius: 50%;
    color: #6b7079; cursor: pointer; transition: color .2s, border-color .2s;
}
.nm2-wl-card-remove:hover { color: #c0392b; border-color: #e8b4ae; }

.nm2-wl-empty { padding: 44px 20px; text-align: center; color: #5f636b; }
.nm2-wl-empty p { margin: 0 0 6px; font-size: 16px; }
.nm2-wl-empty-sub { font-size: 14px; color: #8b8f97; }

@media (max-width: 600px) {
    .nm2-wl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
    .nm2-wl-card-body { padding: 12px 12px 14px; }
}