/*
 * np-list-item.css — Vereinheitlichtes Item-Render-Pattern für die
 * Listen-Ansicht, das Suggestion-Dropdown und das Scan-Modal.
 *
 * Vor `nicer.css` und `np-mobile.css` einbinden, damit die Tokens
 * (np-line-soft, np-paper, np-graphite, font-display) bereits resolved
 * sind und die Specificity konsistent bleibt.
 *
 * Drei Größen:
 *   default (48x48) für die Hauptliste,
 *   --sm    (36x36) für das Suggestion-Dropdown,
 *   --lg    (56x56) für das Scan-Modal.
 *
 * Placeholder-Variante rendert einen ersten Buchstaben / Emoji als
 * Display-Font in einem Paper-Hintergrund — vermeidet broken-image-Icons
 * und Layout-Shift, wenn ein Produkt kein Bild hat.
 */
.np-list-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.np-list-item__thumb {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--np-line-soft);
}

.np-list-item__thumb--placeholder {
    background: var(--np-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 380;
    color: var(--np-graphite);
    letter-spacing: -0.02em;
}

.np-list-item__thumb--sm {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.np-list-item__thumb--lg {
    width: 56px;
    height: 56px;
    font-size: 26px;
}