/* Teintes de vignette par famille de produit — valeurs MESUREES sur le template servi
   (localhost:4188, regles .tone-hair/.tone-skincare/.tone-supplements/.tone-bio et les
   variantes du tiroir panier). C'est ce qui donne au catalogue son aspect « chaque produit a
   sa couleur ». La classe est posee par gbs_product_card()/les cartes reco a partir du champ
   `tone` du catalogue (4 valeurs : supplements 184, hair 79, bio 61, skincare 55).
   Fichier transverse (accueil + catalogue + panier + fiche), charge apres base.css. */
.gbs-product-card__media.tone-hair.tone-hair,.gbs-reco-card__media.tone-hair.tone-hair{background:linear-gradient(145deg,#ebe7df,#c9c2b7)}
.gbs-product-card__media.tone-skincare.tone-skincare,.gbs-reco-card__media.tone-skincare.tone-skincare{background:linear-gradient(145deg,#efe6df,#dac9bd)}
.gbs-product-card__media.tone-supplements.tone-supplements,.gbs-reco-card__media.tone-supplements.tone-supplements{background:linear-gradient(145deg,#e8eadf,#cdd2bd)}
.gbs-product-card__media.tone-bio.tone-bio,.gbs-reco-card__media.tone-bio.tone-bio{background:linear-gradient(145deg,#e6eadf,#c4cfb7)}
/* Le tiroir panier utilise des teintes plus douces dans le template. */
.gbs-cart .gbs-reco-card__media.tone-skincare.tone-skincare{background:linear-gradient(150deg,#f5eee5,#e9ded0)}
.gbs-cart .gbs-reco-card__media.tone-supplements.tone-supplements{background:linear-gradient(150deg,#f2eadf,#ddd6c9)}
.gbs-cart .gbs-reco-card__media.tone-bio.tone-bio{background:linear-gradient(150deg,#e9efe4,#d8e2d1)}
.gbs-cart .gbs-reco-card__media.tone-hair.tone-hair{background:linear-gradient(150deg,#f1ede6,#dcd6cc)}
/* V36 — les quatre teintes de LIGNE de panier ont ete retirees : `cart_panel()` n'a jamais pose
   de classe `tone-*` sur `.gbs-cart-line__media`, donc aucune ne s'appliquait. Les rebrancher
   aurait CREE un ecart au lieu d'en fermer un : dans le template, `.tone-*` perd contre
   `.cart-item-media` (declare plus bas a specificite egale), et la vignette de ligne y est
   toujours le degrade neutre `linear-gradient(145deg,#ebe7df,#d0c8bc)` — celui que porte deja
   `.gbs-cart-line__media`. Les cartes reco, elles, sont bien teintees des deux cotes. */

/* Pastille d'objectif posee sur la vignette — valeurs relevees sur `.objective-tag` du
   template (l. 8328), decalage `bottom/inset-inline-start: 10px` de sa variante sur
   `.product-media` (l. 8133). Elle vit DANS le media : elle ne change pas la hauteur du
   corps de carte, donc elle n'interfere pas avec la repartition verticale de la carte. */
.gbs-product-card__media .gbs-product-card__tag{
  position:absolute;z-index:2;bottom:10px;inset-inline-start:10px;
  max-width:calc(100% - 20px);overflow:hidden;
  border:1px solid rgba(20,61,47,.22);border-radius:999px;padding:3px 9px;
  background:rgba(255,253,248,.92);backdrop-filter:blur(3px);
  color:var(--green-dark,#143d2f);font-size:10.5px;font-weight:700;letter-spacing:.01em;
  line-height:1.4;white-space:nowrap;text-overflow:ellipsis;
}