/**
 * HumanError — Chips de taxonomía
 * Notas de cata y certificaciones de la ficha del café.
 *
 * Todo el aspecto sale de variables CSS: el widget de Elementor las pisa desde su
 * pestaña Estilo, y en un shortcode se pueden pisar con CSS propio, por ejemplo:
 *   .mi-seccion .he-chips { --he-chip-bg: #eee; }
 */

/* ── Contenedor ──────────────────────────────────────────────────────────── */
.he-chips {
    --he-chip-bg: #d4e79e;
    --he-chip-color: #1f2a14;
    --he-chip-radius: 2px;
    --he-chip-gap: 6px;

    display: flex;
    flex-wrap: wrap;
    gap: var(--he-chip-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Colores por defecto de cada taxonomía (según el diseño de la ficha) */
.he-chips--certificacion {
    --he-chip-bg: #1d8a6e;
    --he-chip-color: #e9f5d5;
}

/* ── Chip ────────────────────────────────────────────────────────────────── */
.he-chip {
    display: inline-block;
    margin: 0;
    padding: 3px 8px;
    background: var(--he-chip-bg);
    color: var(--he-chip-color);
    border-radius: var(--he-chip-radius);
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}