Besoins d'aidee CSS

Bonjour à tous,

Je viens solliciter votre aide. J'ai un site internet (WordPress/WooCommerce) spécialisé dans les compléments alimentaires. Pour le produit Whey Protéine, il y a des variations de saveur et de format.

Un ami m'a aidé à créer un code qui permet d'afficher une couleur différente lorsque je clique sur le bouton de sélection de la saveur : marron pour le chocolat et beige pour la vanille.

Le problème est que nous n'arrivons pas à synchroniser la couleur de la section Saveur avec le format (900 g). La couleur de la variation 900 g reste par défaut, c'est-à-dire rouge.

Voici le code CSS qu'il a mis en place pour les couleurs des saveurs :

#chocolat-btn.selected {
    background-color: #D2691E; /* marron clair */
    color: white;
}

#vanille-btn.selected {
    background-color: #F3E5AB; /* couleur vanille */
    color: black;
}
.ast-single-variation[data-slug="Chocolat"].active {
background: #6e2c00 !important;
 color: white;
}
.ast-single-variation[data-slug="Vanille"].active {
background: #F3E5AB !important;
 color: white;
}

.ast-single-variation[data-slug="Chocolat"]:hover {
background: #6e2c00 !important;
 color: white;
}
.ast-single-variation[data-slug="Vanille"]:hover {
background: #F3E5AB !important;
 color: white;
}

Ce que je veux

Je voudrais que la couleur de la section Saveur soit synchronisée avec le format sélectionné

quelqu'un pourrait m'aidée ? Merci a tous