/* Categoriekleuren van SURGE Pept.

   Een bron voor twee plekken: de pillen op de catalogus (.cat-pill) en de
   labels op de homepage (.spa__pill). Per categorie staat hier alleen de kleur
   als drie getallen; tekst, rand, vulling en gloed worden daaruit afgeleid.

   Stonden eerder in sp-collection.css, dat alleen op de catalogus laadt -
   vandaar dat de labels op de homepage grijs waren. */

.pill--fat-loss-metabolic-health{--pill-c:255,106,61}
.pill--muscle-growth-performance{--pill-c:255,77,109}
.pill--recovery-injury-repair{--pill-c:53,208,186}
.pill--mitochondrial-health-energy{--pill-c:255,201,60}
.pill--cognitive-performance-focus{--pill-c:155,140,255}
.pill--sleep-recovery{--pill-c:91,140,255}
.pill--anti-aging-longevity{--pill-c:217,179,74}
.pill--skin-hair-cosmetic-peptides{--pill-c:255,123,197}
.pill--immune-support-inflammation{--pill-c:61,220,132}
.pill--sexual-health-hormonal-support{--pill-c:255,77,141}
.pill--tanning-pigmentation{--pill-c:255,159,28}
.pill--supplies{--pill-c:134,166,196}

/* de opmaak, een keer, voor beide soorten pillen */
.cat-pill[class*="pill--"],
.spa__pill[class*="pill--"],
.rh__pill[class*="pill--"]{
  color:rgb(var(--pill-c));
  border-color:rgba(var(--pill-c),.45);
  background:rgba(var(--pill-c),.10);
}

.cat-card:hover .cat-pill[class*="pill--"],
.spa__card:hover .spa__pill[class*="pill--"],
.rh__vial:hover .rh__pill[class*="pill--"]{
  box-shadow:0 0 14px rgba(var(--pill-c),.35);
}