/* ============================================================
   SOLVÉ — Peptide detail page styles
   Companion to brand.css
   ============================================================ */

body { background: var(--ivory); }

/* ============================================================
   HERO — product info + collage
   ============================================================ */
.pep-hero {
  position: relative;
  padding: 28px 0 48px;
  overflow: hidden;
}
@media (min-width: 720px)  { .pep-hero { padding: 40px 0 80px; } }
@media (min-width: 1024px) { .pep-hero { padding: 56px 0 96px; } }
.pep-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 700px 460px at 95% 10%, rgba(125,217,217,.20), transparent 65%),
    radial-gradient(ellipse 600px 400px at 0% 90%, rgba(196,239,240,.45), transparent 70%);
  pointer-events: none;
}

/* Breadcrumb */
.pep-crumbs {
  position: relative;
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--ink-4);
  margin-bottom: 28px;
  letter-spacing: .02em;
}
.pep-crumbs a { color: var(--ink-3); transition: color .15s; }
.pep-crumbs a:hover { color: var(--teal-700); }
.pep-crumbs .sep { color: var(--ink-5); }

.pep-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: flex-start;
}
@media (min-width: 900px) { .pep-hero-grid { grid-template-columns: 1.05fr .95fr; gap: 64px; } }
@media (min-width: 1200px) { .pep-hero-grid { gap: 88px; } }

/* Left column */
.pep-cat-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal-50); color: var(--teal-700);
  padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 18px;
}
.pep-cat-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); }

.pep-title {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(46px, 9vw, 88px);
  line-height: 1;
  letter-spacing: -.024em;
  color: var(--ink-0);
  margin-bottom: 8px;
  text-wrap: balance;
}
.pep-aka {
  font-family: var(--display);
  font-style: italic; font-weight: 400;
  font-size: 17px;
  color: var(--ink-4);
  margin-bottom: 22px;
}

.pep-tagline {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--ink-3);
  line-height: 1.55;
  margin-bottom: 22px;
  max-width: 50ch;
}

.pep-badges {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.pep-badge {
  background: white;
  border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  color: var(--ink-2);
}
.pep-badge.first { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-700); }

/* Size picker */
.pep-sizes {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.pep-size {
  flex: 1; min-width: 100px;
  border: 2px solid var(--line);
  background: white;
  border-radius: var(--r);
  padding: 12px 14px;
  cursor: pointer;
  transition: all .18s var(--ease);
  text-align: left;
}
.pep-size:hover { border-color: var(--teal-200); }
.pep-size.active {
  border-color: var(--teal-500);
  background: var(--teal-50);
}
.pep-size-dose {
  display: block;
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--ink-0);
  line-height: 1.05;
}
.pep-size-price {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 3px;
  font-size: 13px;
  color: var(--teal-700);
  font-weight: 700;
}
.pep-size-price .strike {
  font-size: 11px;
  color: var(--ink-4);
  text-decoration: line-through;
  font-weight: 400;
}
.pep-size.active .pep-size-dose { color: var(--teal-800); }

.pep-price-row {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pep-price-now {
  font-family: var(--display);
  font-size: 40px; font-weight: 500;
  color: var(--ink-0);
  line-height: 1;
}
.pep-price-now .mem {
  font-size: 10px; font-weight: 700;
  font-family: var(--sans);
  color: var(--teal-700);
  letter-spacing: .08em;
  margin-left: 6px; vertical-align: middle;
  text-transform: uppercase;
}
.pep-price-strike {
  font-size: 16px;
  color: var(--ink-4);
  text-decoration: line-through;
}
.pep-price-save {
  background: var(--teal-50); color: var(--teal-700);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}

.pep-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 28px;
}
.pep-actions .btn-primary { flex: 1; min-width: 200px; }

.pep-perks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 28px;
  padding: 16px 18px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.pep-perk {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--ink-2);
}
.pep-perk svg {
  width: 16px; height: 16px;
  color: var(--teal-600);
  flex-shrink: 0;
}
.pep-perk strong {
  display: block;
  font-size: 12.5px; font-weight: 700; color: var(--ink-0); line-height: 1.2;
}
.pep-perk span {
  display: block;
  font-size: 10.5px; color: var(--ink-4); margin-top: 1px;
}

/* COA pill row */
.pep-coa-row {
  display: flex; flex-direction: column; gap: 10px;
}
.pep-coa-pill {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
  transition: all .18s;
}
.pep-coa-pill:hover { border-color: var(--teal-200); }
.pep-coa-ic {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-700);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pep-coa-ic svg { width: 16px; height: 16px; }
.pep-coa-info {
  flex: 1;
  font-size: 12px; color: var(--ink-3);
}
.pep-coa-info strong {
  display: block;
  font-size: 13px; color: var(--ink-0); font-weight: 700; line-height: 1.2;
}
.pep-coa-info code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.pep-coa-pill .arrow {
  color: var(--teal-600);
  flex-shrink: 0;
}

/* Right column — collage */
.pep-collage {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
}
.pep-img-main {
  position: absolute;
  inset: 0 12% 14% 0;
  border-radius: var(--r-xl);
  background-size: cover; background-position: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.pep-img-main::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(15,24,34,.18));
}
.pep-img-aux {
  position: absolute;
  width: 46%; aspect-ratio: 4/5;
  bottom: 0; right: 0;
  border-radius: var(--r-xl);
  background-size: cover; background-position: center;
  border: 8px solid var(--ivory);
  box-shadow: var(--shadow-lg);
}
.pep-purity-card {
  position: absolute;
  top: 6%; right: -8px;
  background: white;
  padding: 14px 18px;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  z-index: 3;
  min-width: 180px;
}
.pep-purity-card .label {
  font-size: 10px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 4px;
}
.pep-purity-card .value {
  font-family: var(--display);
  font-size: 32px; font-weight: 400;
  line-height: 1;
  color: var(--ink-0);
}
.pep-purity-card .lot {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
  margin-top: 6px;
  letter-spacing: .04em;
}
.pep-coa-badge {
  position: absolute;
  bottom: 14%; right: -16px;
  background: var(--teal-500); color: white;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 14px 38px rgba(16,180,180,.32);
  z-index: 3;
}
.pep-coa-badge svg { width: 14px; height: 14px; }

/* ============================================================
   QUICK FACTS STRIP
   ============================================================ */
.pep-facts {
  background: white;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.pep-facts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}
@media (min-width: 720px) { .pep-facts-row { grid-template-columns: repeat(4, 1fr); } }
.pep-fact {
  font-size: 12px; color: var(--ink-3); letter-spacing: .02em;
}
.pep-fact .label {
  display: block;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-4); margin-bottom: 4px;
}
.pep-fact .value {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--ink-0); line-height: 1.05;
}

/* ============================================================
   CONTENT (overview + sidebar)
   ============================================================ */
.pep-content {
  padding: 72px 0 88px;
  background: var(--ivory);
}
.pep-content-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 900px) { .pep-content-grid { grid-template-columns: 1.6fr .85fr; gap: 56px; } }

/* Article column */
.pep-article h2,
.pep-article h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink-0);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.pep-article h2 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 300;
  margin: 36px 0 16px;
}
.pep-article h2 em { font-style: italic; color: var(--teal-600); font-weight: 400; }
.pep-article h2:first-child { margin-top: 0; }
.pep-article h3 {
  font-size: 22px;
  margin: 28px 0 12px;
}
.pep-article p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.pep-article p em {
  font-family: var(--display); font-style: italic; color: var(--teal-700);
  font-size: 1em;
}
.pep-article ul {
  margin: 14px 0 18px;
  padding-left: 0;
  list-style: none;
}
.pep-article ul li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
}
.pep-article ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 14px;
  width: 12px; height: 1px;
  background: var(--teal-500);
}
.pep-article strong { color: var(--ink-0); font-weight: 600; }
.pep-article .eyebrow { margin-bottom: 8px; }

.pep-sequence-block {
  margin: 24px 0;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 22px;
}
.pep-sequence-block .label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 6px;
}
.pep-sequence-block code {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.6;
  word-break: break-word;
}

.pep-studies {
  margin-top: 28px;
  padding: 22px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pep-studies .label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 12px;
}
.pep-studies-list { display: flex; flex-direction: column; gap: 8px; }
.pep-studies-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r);
  font-size: 13.5px;
  color: var(--ink-1);
  transition: all .15s;
}
.pep-studies-list a:hover { border-color: var(--teal-300); transform: translateX(2px); }
.pep-studies-list svg { color: var(--teal-600); flex-shrink: 0; }

/* Sidebar */
.pep-side {
  display: flex; flex-direction: column; gap: 18px;
}
.pep-side-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.pep-side-card .eyebrow { margin-bottom: 12px; }
.pep-side-card h4 {
  font-family: var(--display);
  font-size: 22px; font-weight: 500;
  color: var(--ink-0);
  line-height: 1.1;
  margin-bottom: 10px;
}
.pep-side-card h4 em { font-style: italic; color: var(--teal-600); font-weight: 500; }
.pep-side-card p {
  font-size: 13.5px;
  color: var(--ink-3); line-height: 1.6;
}

/* LOCKED dosing card */
.pep-dosing-locked {
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy), var(--navy-2));
  border: 1px solid rgba(255,255,255,.08);
  color: white;
}
.pep-dosing-locked::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 400px 200px at 80% 0%, rgba(16,180,180,.18), transparent 60%);
  pointer-events: none;
}
.pep-dosing-locked .lock-row {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 16px;
}
.pep-dosing-locked .lock-ic {
  width: 44px; height: 44px;
  background: rgba(16,180,180,.16); color: var(--teal-300);
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pep-dosing-locked .lock-ic svg { width: 22px; height: 22px; }
.pep-dosing-locked .eyebrow { color: var(--teal-300); margin-bottom: 0; }
.pep-dosing-locked .eyebrow::before { background: var(--teal-300); }
.pep-dosing-locked h4 { color: white; position: relative; }
.pep-dosing-locked h4 em { color: var(--teal-300); }
.pep-dosing-locked p { color: rgba(255,255,255,.6); position: relative; font-size: 13.5px; }
.pep-dosing-locked .btn {
  margin-top: 14px;
  width: 100%;
  position: relative;
}

/* Recon preset card */
.pep-recon {
  background: linear-gradient(155deg, white, var(--teal-50));
  border: 1px solid var(--teal-100);
}
.pep-recon .stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 18px;
}
.pep-recon .stat {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 14px;
}
.pep-recon .stat .l {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); font-weight: 700;
  margin-bottom: 4px;
}
.pep-recon .stat .v {
  font-family: var(--display); font-size: 18px; font-weight: 500; color: var(--ink-0);
}
.pep-recon .stat .v em { font-style: italic; color: var(--teal-600); }

/* ============================================================
   RUO WARNING BLOCK
   ============================================================ */
.pep-ruo-block {
  margin: 40px 0;
  padding: 24px;
  background: white;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal-500);
  border-radius: var(--r);
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.65;
}
.pep-ruo-block strong {
  display: block;
  font-size: 10px;
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 8px;
}

/* ============================================================
   FAQ — pep-faq
   ============================================================ */
.pep-faq {
  padding: 80px 0;
  background: var(--cream);
}
.pep-faq-head {
  text-align: center;
  max-width: 620px; margin: 0 auto 40px;
}
.pep-faq-head .eyebrow { justify-content: center; display: inline-flex; }
.pep-faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
}
.pep-faq-item {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 22px;
  cursor: pointer;
  transition: all .2s;
}
.pep-faq-item:hover { border-color: var(--teal-200); }
.pep-faq-item-q {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 600; font-size: 15px; color: var(--ink-0); gap: 16px;
}
.pep-faq-item-ic {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  transition: transform .2s;
}
.pep-faq-item.open .pep-faq-item-ic { transform: rotate(45deg); background: var(--teal-500); color: white; }
.pep-faq-item-a {
  max-height: 0; overflow: hidden;
  font-size: 14px; color: var(--ink-3); line-height: 1.65;
  transition: max-height .3s ease, padding-top .3s;
}
.pep-faq-item.open .pep-faq-item-a { max-height: 360px; padding-top: 14px; }

/* ============================================================
   RELATED
   ============================================================ */
.pep-related {
  padding: 88px 0;
  background: var(--ivory);
}
.pep-related-head { max-width: 720px; margin-bottom: 40px; }
.pep-related-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 600px) { .pep-related-grid { grid-template-columns: repeat(3, 1fr); } }

/* uses .card from home.html */

/* ============================================================
   STICKY MOBILE BUY BAR
   ============================================================ */
.pep-sticky {
  position: fixed;
  bottom: 12px; left: 12px; right: 12px;
  background: var(--navy);
  color: white;
  border-radius: var(--r-pill);
  padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  box-shadow: 0 20px 40px rgba(15,24,34,.4);
  z-index: 80;
}
@media (min-width: 900px) { .pep-sticky { display: none; } }
.pep-sticky .info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.pep-sticky strong { color: white; font-size: 13px; font-weight: 700; display: block; line-height: 1.1; }
.pep-sticky span { color: rgba(255,255,255,.55); font-size: 11px; }
.pep-sticky a {
  background: var(--teal-500); color: white;
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}