/*!
 * UI Design & Front-End Architecture by Woomark Studio
 * Exclusive theme developed for synergyo2.com
 *
 * theme-collageno2.css — product accent for collageno2.html (load AFTER product.css).
 * Collagen-O2 burgundy #63102A (from the canister) layered over the brand blues.
 * Scoped to body.theme-collageno2, so no other page changes. Same pattern as theme-synergy4.css.
 *
 * Where the burgundy goes (and where it doesn't):
 *  - Signature: blue → burgundy 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, collagen 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-collageno2 {
  --c2: #63102a;
  --c2-deep: #460a1d;
  --c2-light: #e9a7bb; /* readable on navy */
  --c2-soft: #fbf0f3;
  --c2-line: #f1d4dd;
  --c2-grad: linear-gradient(100deg, var(--blue2) 0%, #6a2f78 45%, var(--c2) 100%);
  --c2-grad-dark: linear-gradient(100deg, var(--cyan) 0%, #c9b2e6 45%, var(--c2-light) 100%);
}

/* ---------- Signature: gradient serif italics ---------- */
.theme-collageno2 .h-lg em,
.theme-collageno2 .pdp-sub {
  color: var(--c2); /* fallback */
  background: var(--c2-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-collageno2 .on-dark .h-lg em {
  color: var(--c2-light);
  background: var(--c2-grad-dark);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ---------- Hero ---------- */
.theme-collageno2 .pdp-hero::before {
  background: radial-gradient(circle, #f8ebef 0%, rgba(238, 232, 250, 0) 68%);
}
.theme-collageno2 .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-collageno2 .pdp-hero > .wrap {
  position: relative;
  z-index: 1;
}
.theme-collageno2 .pdp-info .kicker,
.theme-collageno2 .crumbs [aria-current] {
  color: var(--c2);
}
.theme-collageno2 .gal-badge {
  background: var(--c2);
}
.theme-collageno2 .use-step i {
  color: var(--c2);
  border-color: var(--c2-line);
  background: var(--c2-soft);
}

/* ---------- Pillars (navy) ---------- */
.theme-collageno2 .pdp-pillars::before {
  border-color: rgba(233, 167, 187, 0.22);
}
.theme-collageno2 .pdp-pillars::after {
  content: "";
  position: absolute;
  left: -240px;
  bottom: -320px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 32, 70, 0.42), transparent 65%);
  pointer-events: none;
}
.theme-collageno2 .pdp-pillars > .wrap {
  position: relative;
  z-index: 1;
}

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

/* ---------- Nutrient orbit (mist): blue on the left, burgundy on the right ---------- */
.theme-collageno2 .nut-col:not(.left) .nut-icon {
  background: var(--c2-soft);
  color: var(--c2);
}
.theme-collageno2 .nut-col:not(.left) .nut-card:hover {
  border-color: var(--c2-line);
  box-shadow: 0 26px 50px -30px rgba(70, 10, 29, 0.35);
}
.theme-collageno2 .nut-center .ring.r1 {
  background: radial-gradient(circle, #fff 0%, #f9eef1 70%);
  box-shadow:
    0 0 0 34px rgba(246, 226, 232, 0.55),
    0 0 0 72px rgba(246, 226, 232, 0.3);
}
.theme-collageno2 .nut-center .ring.r2 {
  border-color: rgba(99, 16, 42, 0.3);
}
.theme-collageno2 .nut-center .ring.r2::after {
  background: var(--c2);
  box-shadow: 0 0 0 5px rgba(99, 16, 42, 0.2);
}
.theme-collageno2 .nut-center img {
  filter: drop-shadow(0 30px 30px rgba(60, 10, 28, 0.28));
}
.theme-collageno2 .nut-blend i {
  color: var(--c2);
}

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

/* ---------- Ritual (navy) ---------- */
.theme-collageno2 .pdp-ritual::before {
  background: radial-gradient(circle, rgba(31, 111, 214, 0.3), transparent 65%);
}
.theme-collageno2 .pdp-ritual::after {
  content: "";
  position: absolute;
  right: -260px;
  top: -280px;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(150, 32, 70, 0.4), transparent 65%);
  pointer-events: none;
}
.theme-collageno2 .ritual-steps::before {
  background: linear-gradient(var(--cyan), var(--c2-light) 70%, rgba(233, 167, 187, 0.1));
}
.theme-collageno2 .ritual-step:last-child .ritual-num {
  border-color: rgba(233, 167, 187, 0.6);
  color: var(--c2-light);
}

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

/* ---------- Final CTA box: navy → blue → burgundy ---------- */
.theme-collageno2 .cta-box {
  background: linear-gradient(120deg, #0a2550 0%, #3a3f9a 50%, var(--c2) 100%);
}

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

/* ---------- Customer stories: band in Collagen-O2 burgundy (not navy) ---------- */
.theme-collageno2 .pdp-stories {
  background: linear-gradient(160deg, #2e0613 0%, var(--c2-deep) 52%, #6e1632 100%);
}
.theme-collageno2 .pdp-stories::before {
  background: radial-gradient(circle, rgba(233, 167, 187, 0.18), transparent 65%);
}
.theme-collageno2 .pdp-stories .kicker,
.theme-collageno2 .pdp-stories .t-prod,
.theme-collageno2 .pdp-stories .t-all {
  color: var(--c2-light);
}
.theme-collageno2 .pdp-stories .sec-head p {
  color: #eccfd8;
}
.theme-collageno2 .pdp-stories .t-card-who span,
.theme-collageno2 .pdp-stories .t-note {
  color: #d9b3c0;
}
.theme-collageno2 .pdp-stories .t-card blockquote {
  color: #fbeef2;
}
.theme-collageno2 .pdp-stories .t-card:hover {
  border-color: rgba(233, 167, 187, 0.45);
}
.theme-collageno2 .pdp-stories .t-carousel {
  --wmk-dot-active: var(--c2-light);
}
.theme-collageno2 .pdp-stories .arrow:hover {
  color: var(--c2-deep);
}
.theme-collageno2 .pdp-stories .t-avatar {
  --av-bg: #9b2a4f;
  --av-fg: #fdebf0;
  box-shadow: 0 0 0 3px rgba(233, 167, 187, 0.3);
}
.theme-collageno2 .pdp-stories .t-card[style*="--av: 1"] .t-avatar {
  --av-bg: #6a2f78;
  --av-fg: #f2e8f7;
}
.theme-collageno2 .pdp-stories .t-card[style*="--av: 2"] .t-avatar {
  --av-bg: #b8556f;
  --av-fg: #fff0f3;
}