/* WooCommerce Shop Attributes — Front-end
   Version: 2.1.0 | Author: Julien OSTIZ
   Les valeurs dynamiques (font-size, logo height) sont injectées
   en inline via wcsa_front_css_dynamic() dans wp_head.
   ------------------------------------------------------------------ */

/* Conteneur de la liste d'attributs */
.wcsa-attr-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin: 6px 0 4px;
    padding: 0;
    list-style: none;
}

/* Badge individuel
   Divi applique color:var(--gcid-line-color) sur tous les descendants
   des <a> de boucle produit. On coupe l'héritage avec currentColor
   remis à la couleur du texte courant via 'unset'. */
/* Divi force color:#555555 sur tous les éléments via un reset global.
   On utilise currentColor du body plutôt qu'une valeur codée en dur —
   mais puisque unset/inherit remonte quand même à Divi, on cible
   directement la variable CSS Divi si elle existe, sinon #333 par défaut. */
.wcsa-attr,
.wcsa-attr .wcsa-lbl,
.wcsa-attr .wcsa-val {
    color: var(--gcid-body-font-color, #333333) !important;
    text-decoration: none !important;
}

.wcsa-attr {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}

/* Label de l'attribut */
.wcsa-lbl { opacity: .75; }

/* Styles de badges */
.wcsa-badge-pill    { background: #f3f3f3; border-radius: 20px; padding: 2px 9px; }
.wcsa-badge-square  { background: #f3f3f3; border-radius: 3px;  padding: 2px 7px; }
.wcsa-badge-outline { border: 1px solid #ccc; border-radius: 3px; padding: 1px 7px; }
.wcsa-badge-plain   { padding: 0; margin-right: 8px; }

/* Logo — propriétés statiques
   Les propriétés dynamiques (height) sont dans le bloc inline.
   Les !important sont nécessaires pour contrer WooCommerce et Divi
   qui appliquent des règles agressives sur toutes les <img>. */
.wcsa-attr-list img.wcsa-logo-img {
    width: auto !important;
    max-width: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    object-fit: contain !important;
    margin-right: 4px !important;
    box-shadow: none !important;
}