/**
 * Front Office CSS — ingrédients, affichage compact (1.2.0, couleurs revues en 1.2.1).
 * Couleurs, police et rayons suivent les jetons du thème (avec repli) ; aucune valeur de :root.
 * Pastilles sur l'ENCRE d'accent (`--accent-ink-color`) et non sur `--primary-color`, que certains
 * thèmes règlent en couleur de fond : sur gumuchev2 (blanc cassé), les pastilles disparaissaient.
 *
 * @author    allforweb
 * @copyright allforweb
 * @license   AFL-3.0
 */

.a4w-product-ingredients {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Respiration avant le filet qui ferme l'accordéon de la fiche produit (1.2.2). */
    padding-bottom: 24px;
}

.a4w-product-ingredients__text {
    margin: 0;
    max-width: 70ch;
    line-height: 1.7;
}

.a4w-product-ingredients__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.a4w-product-ingredients__label {
    min-width: 96px;
    font-weight: 600;
}

.a4w-product-ingredients__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Étiquettes texte, sans picto d'avertissement (charte v2, CAT-02, 1.2.3) : fond et filet « alerte »
   du thème, rayon 3 px, 13 px en demi-gras. Allergènes et traces ont la même forme ; chaque rangée
   porte son libellé, la couleur n'est pas le seul signal. */
.a4w-product-ingredients__tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid var(--alert-warning-color, #8A5A00);
    border-radius: var(--border-radius, 3px);
    background: var(--alert-warning-bg-color, #FBF4E6);
    color: var(--alert-warning-color, #8A5A00);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.3;
}

.a4w-product-ingredients__tag::before,
.a4w-product-ingredients__tag::after {
    content: none;
}

.a4w-product-ingredients__tag--trace {
    background: transparent;
}

.a4w-product-ingredients__text strong {
    font-weight: 700;
}