/* TOGOPEPTIDE — Per-mechanism color tags
   Cluster 12 / item 424
   Pairs with tokens.css `--tag-*` and `--tag-*-soft`.

   Usage in HTML:
     <span class="mechanism-tag mechanism-tag--fat-loss">Fat Loss</span>
     <article class="card" data-mechanism="recovery">…</article>

   The chip style works with both `data-mechanism="…"` attribute or
   `mechanism-tag--<name>` modifier class — pick one and stay
   consistent per page.
*/

/* ── Base chip ─────────────────────────────────────────────────── */
.mechanism-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill, 999px);
  font-size: var(--text-xs, 12px);
  font-weight: var(--weight-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  white-space: nowrap;
  line-height: 1.2;
  background: transparent;
}

.mechanism-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ── 11 mechanism modifiers ────────────────────────────────────── */
.mechanism-tag--fat-loss          { color: var(--tag-fat-loss);          background: var(--tag-fat-loss-soft); }
.mechanism-tag--recovery          { color: var(--tag-recovery);          background: var(--tag-recovery-soft); }
.mechanism-tag--gh-axis           { color: var(--tag-gh-axis);           background: var(--tag-gh-axis-soft); }
.mechanism-tag--cellular          { color: var(--tag-cellular);          background: var(--tag-cellular-soft); }
.mechanism-tag--cognitive         { color: var(--tag-cognitive);         background: var(--tag-cognitive-soft); }
.mechanism-tag--skin              { color: var(--tag-skin);              background: var(--tag-skin-soft); }
.mechanism-tag--melanocortin      { color: var(--tag-melanocortin);      background: var(--tag-melanocortin-soft); }
.mechanism-tag--hpg-axis          { color: var(--tag-hpg-axis);          background: var(--tag-hpg-axis-soft); }
.mechanism-tag--amylin            { color: var(--tag-amylin);            background: var(--tag-amylin-soft); }
.mechanism-tag--metabolic         { color: var(--tag-metabolic);         background: var(--tag-metabolic-soft); }
.mechanism-tag--anti-inflammatory { color: var(--tag-anti-inflammatory); background: var(--tag-anti-inflammatory-soft); }

/* ── data-mechanism attribute selector — auto-style cards/blog/PDP ── */
[data-mechanism="fat-loss"]          .mechanism-tag-auto,
[data-mechanism="fat-loss"]   > .compound-card__eyebrow,
[data-mechanism="fat-loss"]   > .blog-card__category,
[data-mechanism="fat-loss"]   > .pdp-category-pill { color: var(--tag-fat-loss); border-color: var(--tag-fat-loss); }

[data-mechanism="recovery"]          .mechanism-tag-auto,
[data-mechanism="recovery"]   > .compound-card__eyebrow,
[data-mechanism="recovery"]   > .blog-card__category,
[data-mechanism="recovery"]   > .pdp-category-pill { color: var(--tag-recovery); border-color: var(--tag-recovery); }

[data-mechanism="gh-axis"]           .mechanism-tag-auto,
[data-mechanism="gh-axis"]    > .compound-card__eyebrow,
[data-mechanism="gh-axis"]    > .blog-card__category,
[data-mechanism="gh-axis"]    > .pdp-category-pill { color: var(--tag-gh-axis); border-color: var(--tag-gh-axis); }

[data-mechanism="cellular"]          .mechanism-tag-auto,
[data-mechanism="cellular"]   > .compound-card__eyebrow,
[data-mechanism="cellular"]   > .blog-card__category,
[data-mechanism="cellular"]   > .pdp-category-pill { color: var(--tag-cellular); border-color: var(--tag-cellular); }

[data-mechanism="cognitive"]         .mechanism-tag-auto,
[data-mechanism="cognitive"]  > .compound-card__eyebrow,
[data-mechanism="cognitive"]  > .blog-card__category,
[data-mechanism="cognitive"]  > .pdp-category-pill { color: var(--tag-cognitive); border-color: var(--tag-cognitive); }

[data-mechanism="skin"]              .mechanism-tag-auto,
[data-mechanism="skin"]       > .compound-card__eyebrow,
[data-mechanism="skin"]       > .blog-card__category,
[data-mechanism="skin"]       > .pdp-category-pill { color: var(--tag-skin); border-color: var(--tag-skin); }

/* ── 425 — Duotone product-icon container ──────────────────────
   Use as: <span class="mechanism-icon mechanism-icon--fat-loss"></span>
   Pulls the matching SVG from /assets/img/icons/mechanism/<class>.svg.
   Stroke is the brand-mechanism color, fill is a 12% tint.
*/
.mechanism-icon {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  vertical-align: middle;
}
.mechanism-icon--fat-loss          { background-image: url("/assets/img/icons/mechanism/fat-loss.svg"); }
.mechanism-icon--recovery          { background-image: url("/assets/img/icons/mechanism/recovery.svg"); }
.mechanism-icon--gh-axis           { background-image: url("/assets/img/icons/mechanism/gh-axis.svg"); }
.mechanism-icon--cellular          { background-image: url("/assets/img/icons/mechanism/cellular.svg"); }
.mechanism-icon--cognitive         { background-image: url("/assets/img/icons/mechanism/cognitive.svg"); }
.mechanism-icon--skin              { background-image: url("/assets/img/icons/mechanism/skin.svg"); }
.mechanism-icon--melanocortin      { background-image: url("/assets/img/icons/mechanism/melanocortin.svg"); }
.mechanism-icon--hpg-axis          { background-image: url("/assets/img/icons/mechanism/hpg-axis.svg"); }

/* ── 426 — Per-stack hero accent gradients ─────────────────────
   Keyed by `<body data-stack="recovery">` etc. on stack-landing pages.
   Subtle radial bloom at 30% opacity in the upper-left of the hero.
*/
body[data-stack="fat-loss"]    .hero,
body[data-stack="fat-loss"]    .stack-hero {
  background-image: radial-gradient(circle at 30% 0%, var(--tag-fat-loss-soft) 0%, transparent 55%);
}
body[data-stack="recovery"]    .hero,
body[data-stack="recovery"]    .stack-hero {
  background-image: radial-gradient(circle at 30% 0%, var(--tag-recovery-soft) 0%, transparent 55%);
}
body[data-stack="cognitive"]   .hero,
body[data-stack="cognitive"]   .stack-hero {
  background-image: radial-gradient(circle at 30% 0%, var(--tag-cognitive-soft) 0%, transparent 55%);
}
body[data-stack="longevity"]   .hero,
body[data-stack="longevity"]   .stack-hero {
  background-image: radial-gradient(circle at 30% 0%, var(--tag-cellular-soft) 0%, transparent 55%);
}
body[data-stack="performance"] .hero,
body[data-stack="performance"] .stack-hero {
  background-image: radial-gradient(circle at 30% 0%, var(--tag-gh-axis-soft) 0%, transparent 55%);
}
body[data-stack="glow"]        .hero,
body[data-stack="glow"]        .stack-hero {
  background-image: radial-gradient(circle at 30% 0%, var(--tag-skin-soft) 0%, transparent 55%);
}