/*!
 * UI Design & Front-End Architecture by Woomark Studio
 * Exclusive theme developed for synergyo2.com
 *
 * theme-synergy4.css — product accent for synergy4.html (load AFTER product.css).
 * Synergy4 purple #72368C (from the bottle) layered over the brand blues.
 * Scoped to body.theme-synergy4, so no other page changes.
 *
 * Where the purple goes (and where it doesn't):
 *  - Signature: blue → purple gradient on the serif italics of every heading, the subtitle and the final CTA box.
 *  - Accents: hero kicker, gallery badge, breadcrumb, "How to use" icons, DHEA pillar, right column of the
 *    nutrient orbit (left column stays blue), benefit icons, FAQ open state, video play icon, glows on navy.
 *  - Unchanged on purpose: green = buy / join, action navy = explore, header, footer, cart, modals.
 */
.theme-synergy4 {
  --s4: #72368c;
  --s4-deep: #4f2163;
  --s4-light: #c9a3e0; /* readable on navy */
  --s4-soft: #f5eefa;
  --s4-line: #e4d3ef;
  --s4-grad: linear-gradient(100deg, var(--blue2) 0%, #4a52b8 45%, var(--s4) 100%);
  --s4-grad-dark: linear-gradient(100deg, var(--cyan) 0%, #9fb6f0 45%, var(--s4-light) 100%);
}

/* ---------- Signature: gradient serif italics ---------- */
.theme-synergy4 .h-lg em,
.theme-synergy4 .pdp-sub {
  color: var(--s4); /* fallback */
  background: var(--s4-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.08em; /* the italic's last letter is not clipped */
}
.theme-synergy4 .on-dark .h-lg em {
  color: var(--s4-light);
  background: var(--s4-grad-dark);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- Hero ---------- */
.theme-synergy4 .pdp-hero::before {
  background: radial-gradient(circle, #eee8fa 0%, rgba(238, 232, 250, 0) 68%);
}
.theme-synergy4 .pdp-hero::after {
  content: "";
  position: absolute;
  right: -280px;
  top: -220px;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 111, 214, 0.08) 0%, rgba(31, 111, 214, 0) 65%);
  pointer-events: none;
}
.theme-synergy4 .pdp-hero > .wrap {
  position: relative;
  z-index: 1;
}
.theme-synergy4 .pdp-info .kicker,
.theme-synergy4 .crumbs [aria-current] {
  color: var(--s4);
}
.theme-synergy4 .gal-badge {
  background: var(--s4);
}
.theme-synergy4 .use-step i {
  color: var(--s4);
  border-color: var(--s4-line);
  background: var(--s4-soft);
}

/* ---------- Pillars (navy) ---------- */
.theme-synergy4 .pdp-pillars::before {
  border-color: rgba(201, 163, 224, 0.22);
}
.theme-synergy4 .pdp-pillars::after {
  content: "";
  position: absolute;
  left: -240px;
  bottom: -320px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 54, 140, 0.4), transparent 65%);
  pointer-events: none;
}
.theme-synergy4 .pdp-pillars > .wrap {
  position: relative;
  z-index: 1;
}

/* ---------- What is ---------- */
.theme-synergy4 .about-facts i {
  color: var(--s4);
}

/* ---------- Nutrient orbit (mist): blue on the left, purple on the right ---------- */
.theme-synergy4 .nut-col:not(.left) .nut-icon {
  background: var(--s4-soft);
  color: var(--s4);
}
.theme-synergy4 .nut-col:not(.left) .nut-card:hover {
  border-color: var(--s4-line);
  box-shadow: 0 26px 50px -30px rgba(79, 33, 99, 0.35);
}
.theme-synergy4 .nut-center .ring.r1 {
  background: radial-gradient(circle, #fff 0%, #efeafa 70%);
  box-shadow:
    0 0 0 34px rgba(228, 220, 246, 0.55),
    0 0 0 72px rgba(228, 220, 246, 0.3);
}
.theme-synergy4 .nut-center .ring.r2 {
  border-color: rgba(114, 54, 140, 0.3);
}
.theme-synergy4 .nut-center .ring.r2::after {
  background: var(--s4);
  box-shadow: 0 0 0 5px rgba(114, 54, 140, 0.2);
}
.theme-synergy4 .nut-center img {
  filter: drop-shadow(0 30px 30px rgba(54, 24, 80, 0.28));
}
.theme-synergy4 .nut-blend i {
  color: var(--s4);
}

/* ---------- Benefits ---------- */
.theme-synergy4 .ben i {
  background: var(--s4-soft);
  color: var(--s4);
}
.theme-synergy4 .ben:hover {
  background: var(--s4-soft);
  border-color: var(--s4-line);
}
.theme-synergy4 .ben:hover i {
  background: var(--s4);
  color: #fff;
}

/* ---------- Ritual (navy) ---------- */
.theme-synergy4 .pdp-ritual::before {
  background: radial-gradient(circle, rgba(31, 111, 214, 0.3), transparent 65%);
}
.theme-synergy4 .pdp-ritual::after {
  content: "";
  position: absolute;
  right: -260px;
  top: -280px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(114, 54, 140, 0.38), transparent 65%);
  pointer-events: none;
}
.theme-synergy4 .ritual-steps::before {
  background: linear-gradient(var(--cyan), var(--s4-light) 70%, rgba(201, 163, 224, 0.1));
}
.theme-synergy4 .ritual-step:last-child .ritual-num {
  border-color: rgba(201, 163, 224, 0.6);
  color: var(--s4-light);
}

/* ---------- Video + FAQ ---------- */
.theme-synergy4 .video-play {
  color: var(--s4);
}
.theme-synergy4 .video-body > i {
  background: var(--s4-soft);
  color: var(--s4);
}
.theme-synergy4 .video-body small {
  color: var(--s4);
}
.theme-synergy4 .video-cover::after {
  background: linear-gradient(to top, rgba(40, 16, 58, 0.55), rgba(40, 16, 58, 0) 55%);
}
.theme-synergy4 .faq-item[open] .faq-icon {
  background: var(--s4);
  border-color: var(--s4);
}

/* ---------- Final CTA box: navy → blue → purple ---------- */
.theme-synergy4 .cta-box {
  background: linear-gradient(120deg, #0a2550 0%, #1f4fb0 52%, var(--s4) 100%);
}

/* ---------- Sticky bar ---------- */
.theme-synergy4 .sticky-name span {
  color: var(--s4);
}
.theme-synergy4 .ritual-grid {
  z-index: 1; /* above the purple glow */
}
.theme-synergy4 .video-grid.is-single .video-body {
  background: linear-gradient(160deg, #fff 30%, var(--s4-soft));
}

/* ---------- Customer stories: band in Synergy4 purple (not navy) ---------- */
.theme-synergy4 .pdp-stories {
  background: linear-gradient(160deg, #2a1136 0%, var(--s4-deep) 52%, #5f2a78 100%);
}
.theme-synergy4 .pdp-stories::before {
  background: radial-gradient(circle, rgba(201, 163, 224, 0.2), transparent 65%);
}
.theme-synergy4 .pdp-stories .kicker,
.theme-synergy4 .pdp-stories .t-prod,
.theme-synergy4 .pdp-stories .t-all {
  color: var(--s4-light);
}
.theme-synergy4 .pdp-stories .sec-head p {
  color: #dcc9ea;
}
.theme-synergy4 .pdp-stories .t-card-who span,
.theme-synergy4 .pdp-stories .t-note {
  color: #c9b2da;
}
.theme-synergy4 .pdp-stories .t-card blockquote {
  color: #f3eaf9;
}
.theme-synergy4 .pdp-stories .t-card:hover {
  border-color: rgba(201, 163, 224, 0.45);
}
.theme-synergy4 .pdp-stories .t-carousel {
  --wmk-dot-active: var(--s4-light);
}
.theme-synergy4 .pdp-stories .arrow:hover {
  color: var(--s4-deep);
}
.theme-synergy4 .pdp-stories .t-avatar {
  --av-bg: #8e4fae;
  --av-fg: #f3e8fa;
  box-shadow: 0 0 0 3px rgba(201, 163, 224, 0.3);
}
.theme-synergy4 .pdp-stories .t-card[style*="--av: 1"] .t-avatar {
  --av-bg: #5b48b8;
  --av-fg: #ebe7ff;
}
.theme-synergy4 .pdp-stories .t-card[style*="--av: 2"] .t-avatar {
  --av-bg: #a3528c;
  --av-fg: #fbeaf5;
}