/* xx_plugin_004_sks - Funktion "Pills"
 *
 * Nur Geometrie und Abstaende. Die Farben der Pills auf der Artikeldetailseite
 * kommen bewusst aus badge-primary (Bootstrap/NOVA), damit sie wie die uebrigen
 * Merkmal-Badges aussehen. Die Selektoren sind bewusst ohne Elternbindung, damit
 * das Plugin nicht an ein bestimmtes Template gebunden ist.
 */

/* ---------- Artikeldetailseite ---------- */
.xx-p004-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-bottom: 1.25rem;
}

.xx-p004-pills .xx-p004-pill {
    font-size: .8125rem;
    font-weight: 500;
    padding: .45rem .95rem;
    border-radius: 980px;
    white-space: normal;
    text-align: left;
    line-height: 1.35;
}

/* ---------- Produktkachel ----------
 * Die CSS-Variablen stammen aus dem Child-Template; die Fallback-Werte greifen
 * in jedem anderen Template.
 */
.xx-p004-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.xx-p004-tag {
    font-size: .72rem;
    line-height: 1.4;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--sks-surface-soft, rgba(0, 0, 0, .05));
    color: var(--sks-text-soft, inherit);
    white-space: nowrap;
}