/*
Theme Name: Rowan Peptides
Theme URI: https://rowanpeptides.com
Description: Custom theme for Rowan Peptides
Version: 4.0
Author: Rowan Peptides
Text Domain: rowan
*/

:root {
  --plum:      #3D1A2E;
  --plum-mid:  #5C2845;
  --berry:     #8B3560;
  --cream:     #F5F0EB;
  --cream-mid: #EDE6DD;
  --cream-card:#EEEBE6;
  --near-black:#1A1212;
  --mid-gray:  #9A918A;
  --light-gray:#D5CEC6;

  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --max-w: 1360px;
  --gutter: 24px;
  --transition: 220ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { font-family: var(--font); background: var(--cream); color: var(--near-black); line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* ============================================================
   SHIPPING BAR
   ============================================================ */
.shipping-bar {
  background: var(--plum);
  text-align: center;
  padding: 9px var(--gutter);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: rgba(245,240,235,0.6);
}
.shipping-bar strong { color: var(--cream); font-weight: 600; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--cream);
  border-bottom: 1px solid var(--light-gray);
}
.site-header__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 58px;
}
.site-logo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  justify-self: center;
  text-align: center;
}
.logo-mark {
  font-size: 0.9rem;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--plum);
  line-height: 1;
}
.logo-sub {
  font-size: 0.38rem;
  font-weight: 500;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--berry);
  line-height: 1;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.site-nav--left { justify-self: start; }
.site-nav--right { justify-self: end; }
.site-nav a {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
  transition: color var(--transition);
}
.site-nav a:hover { color: var(--plum); }
.site-nav--right .nav-toggle { margin-left: 4px; }
.cart-link {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
  transition: color var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.cart-link:hover { color: var(--plum); }
.cart-count {
  background: var(--plum);
  color: var(--cream);
  font-size: 0.55rem;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   PILL BUTTON — Rhode-style
   ============================================================ */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}
.pill--outline-cream {
  border: 1.5px solid rgba(245,240,235,0.6);
  color: var(--cream);
  background: transparent;
}
.pill--outline-cream:hover { background: rgba(245,240,235,0.12); }

.pill--outline-plum {
  border: 1.5px solid var(--plum);
  color: var(--plum);
  background: transparent;
}
.pill--outline-plum:hover { background: var(--plum); color: var(--cream); }

.pill--solid-plum { background: var(--plum); color: var(--cream); border: none; }
.pill--solid-plum:hover { background: var(--plum-mid); }

/* ============================================================
   HERO — Rhode style: full image + bold text overlaid
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 600px;
  overflow: hidden;
  background: #2A1A22;
}
.hero__slides {
  position: absolute;
  inset: 0;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.hero__slide.is-active {
  opacity: 1;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* keep single-img fallback */
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 30%,
    rgba(26,8,20,0.55) 100%
  );
}
.hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 var(--gutter) 56px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.hero__headline {
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--cream);
  text-transform: lowercase;
}
.hero__sub {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(245,240,235,0.72);
  max-width: 42ch;
}

/* ============================================================
   EDITORIAL CARD — image + cream card below, Rhode style
   ============================================================ */
.editorial {
  background: var(--cream);
  padding: var(--gutter);
  max-width: var(--max-w);
  margin: 48px auto;
}
.editorial__img-wrap {
  width: 100%;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
.editorial__img-wrap img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: center 25%;
}
.editorial__card {
  background: var(--cream-card);
  border-radius: 0 0 20px 20px;
  padding: 40px 48px 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.editorial__card-text { max-width: 55ch; }
.editorial__headline {
  font-size: clamp(1.6rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--plum);
  text-transform: lowercase;
  margin-bottom: 12px;
}
.editorial__body {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--mid-gray);
}
.editorial__card-action { flex-shrink: 0; }

/* ============================================================
   PRODUCT GRID — consistent vials
   ============================================================ */
.shop-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter) 80px;
}
.shop-grid__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
}
.shop-grid__title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid-gray);
}
.shop-grid__link {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color var(--transition);
}
.shop-grid__link:hover { color: var(--plum); }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.p-card { display: block; text-decoration: none; cursor: pointer; }
.p-card__img-wrap {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--cream-mid);
}
.p-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms ease;
}
.p-card:hover .p-card__img { transform: scale(1.035); }
.p-card__info { padding: 12px 2px 0; }
.p-card__concern {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--berry);
  display: block;
  margin-bottom: 3px;
}
.p-card__name {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--plum);
  display: block;
  margin-bottom: 2px;
}
.p-card__dose {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  color: var(--mid-gray);
  display: block;
  margin-bottom: 4px;
}
.p-card__price {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--near-black);
  display: block;
}

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto {
  border-top: 1px solid var(--light-gray);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 72px var(--gutter) 80px;
}
.manifesto p {
  font-size: clamp(1rem, 2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--mid-gray);
  max-width: 60ch;
}
.manifesto p strong { color: var(--plum); font-weight: 700; }

/* ============================================================
   Y2K EDITORIAL STRIP — bento grid after manifesto
   ============================================================ */
.y2k-strip {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 300px 300px;
  gap: 8px;
  padding: 0 var(--gutter);
  max-width: var(--max-w);
  margin: 0 auto 80px;
}
.y2k-strip__cell {
  overflow: hidden;
  border-radius: 16px;
  position: relative;
}
.y2k-strip__cell--main {
  grid-row: 1 / 3;
}
.y2k-strip__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.y2k-strip__cell:hover img {
  transform: scale(1.05);
}
@media (max-width: 768px) {
  .y2k-strip {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 180px 180px;
    gap: 6px;
  }
}
@media (max-width: 480px) {
  .y2k-strip {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .y2k-strip__cell--main { grid-row: auto; }
  .y2k-strip__cell img { aspect-ratio: 4/3; height: auto; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--plum);
  padding: 64px 0 32px;
}
.site-footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(245,240,235,0.07);
  margin-bottom: 32px;
}
.footer-brand .logo-mark { color: var(--cream); font-size: 0.88rem; }
.footer-brand .logo-sub { color: rgba(245,240,235,0.35); }
.footer-brand p {
  font-size: 0.75rem;
  line-height: 1.65;
  color: rgba(245,240,235,0.38);
  margin-top: 14px;
  max-width: 24ch;
}
.footer-col h5 {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,235,0.2);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a {
  font-size: 0.75rem;
  color: rgba(245,240,235,0.42);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--cream); }
.disclaimer {
  font-size: 0.62rem;
  line-height: 1.7;
  color: rgba(245,240,235,0.15);
  margin-bottom: 24px;
}
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: rgba(245,240,235,0.15);
}

/* ============================================================
   WOOCOMMERCE
   ============================================================ */
.woocommerce-notices-wrapper { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.woocommerce-page .site-main { padding-top: 40px; }
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 10px !important;
  padding: 0 var(--gutter) !important;
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
}
.woocommerce ul.products li.product { margin: 0 !important; }
.woocommerce ul.products li.product a img { border-radius: 16px; aspect-ratio: 3/4; object-fit: cover; }
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--plum) !important; color: var(--cream) !important;
  font-family: var(--font) !important; font-size: 0.68rem !important;
  font-weight: 600 !important; letter-spacing: 0.12em !important;
  text-transform: uppercase !important; padding: 13px 24px !important;
  border-radius: 100px !important; border: none !important;
  transition: background var(--transition) !important; width: 100% !important; margin-top: 12px !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--plum-mid) !important; }
.woocommerce div.product { padding-top: 80px; }
.woocommerce div.product .product_title { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--plum); }
.woocommerce div.product p.price { color: var(--plum) !important; font-size: 1.2rem !important; font-weight: 600 !important; }
.woocommerce form .form-row input.input-text { border: 1px solid var(--light-gray) !important; border-radius: 12px !important; padding: 13px 16px !important; }
.woocommerce form .form-row input.input-text:focus { border-color: var(--plum) !important; outline: none !important; box-shadow: none !important; }

/* ============================================================
   PRODUCT PAGE
   ============================================================ */
.pp-wrap { background: var(--cream); }

/* Split hero */
.pp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 88vh;
  max-width: 100%;
}
.pp-hero__media {
  background: var(--cream-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  position: sticky;
  top: 58px;
  height: calc(100vh - 58px);
}
.pp-hero__vial {
  max-height: 72vh;
  width: auto;
  object-fit: contain;
}
.pp-hero__info {
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
}
.pp-concern {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--berry);
}
.pp-name {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--plum);
  text-transform: lowercase;
}
.pp-tagline {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--mid-gray);
  max-width: 44ch;
}
.pp-price-wrap .price {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: var(--near-black) !important;
}
.pp-atc .quantity { display: none !important; }
.pp-atc .single_add_to_cart_button {
  display: inline-flex !important;
  width: auto !important;
  margin-top: 0 !important;
  padding: 15px 32px !important;
  border-radius: 100px !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.pp-wrap .stock { display: none !important; }
.pp-wrap .woocommerce-variation-availability { display: none !important; }
.pp-specs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--light-gray);
  margin-top: 4px;
}
.pp-spec {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
}
.pp-spec__label { color: var(--mid-gray); }
.pp-spec__val { font-weight: 600; color: var(--near-black); font-family: var(--font-mono); font-size: 0.7rem; }
/* BAC water add-on */
.pp-addon {
  border: 1.5px solid var(--light-gray);
  border-radius: 14px;
  padding: 14px 16px;
  transition: border-color var(--transition);
}
.pp-addon:has(.pp-addon__check:checked) { border-color: var(--berry); background: rgba(139,53,96,0.04); }
.pp-addon__label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
.pp-addon__check {
  width: 18px; height: 18px;
  accent-color: var(--plum);
  flex-shrink: 0;
  cursor: pointer;
}
.pp-addon__info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pp-addon__name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--near-black);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-addon__tag {
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--berry);
  background: rgba(139,53,96,0.1);
  padding: 2px 7px;
  border-radius: 100px;
}
.pp-addon__desc { font-size: 0.68rem; color: var(--mid-gray); }
.pp-addon__price { font-size: 0.82rem; font-weight: 700; color: var(--plum); flex-shrink: 0; }

/* Stack upsell */
.pp-stack-upsell { margin-top: 4px; }
.pp-stack-upsell__eyebrow {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mid-gray);
  display: block;
  margin-bottom: 10px;
}
.pp-stack-upsell__card {
  background: var(--cream-mid);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pp-stack-upsell__info { display: flex; flex-direction: column; gap: 3px; }
.pp-stack-upsell__name { font-size: 0.82rem; font-weight: 700; color: var(--plum); }
.pp-stack-upsell__desc { font-size: 0.68rem; color: var(--mid-gray); }
.pp-stack-upsell__action { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pp-stack-upsell__price { font-size: 0.9rem; font-weight: 700; color: var(--near-black); }

.pp-disclaimer {
  font-size: 0.62rem;
  color: var(--mid-gray);
  line-height: 1.5;
  margin-top: 4px;
}

/* Editorial image band */
.pp-editorial {
  position: relative;
  width: 100%;
  height: 70vh;
  overflow: hidden;
}
.pp-editorial__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.pp-editorial__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(26,8,20,0.6) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 48px 56px;
}
.pp-editorial__concern {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,240,235,0.55);
  margin-bottom: 8px;
}
.pp-editorial__headline {
  font-size: clamp(2.4rem, 5vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--cream);
  text-transform: lowercase;
}

/* Stats row — purity/research numbers */
.pp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--light-gray);
}
.pp-stat {
  padding: 40px 48px;
  border-right: 1px solid var(--light-gray);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-stat:last-child { border-right: none; }
.pp-stat__num {
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--plum);
  line-height: 1;
}
.pp-stat__label {
  font-size: 0.72rem;
  color: var(--mid-gray);
  line-height: 1.4;
}

/* Mechanism section */
.pp-mechanism {
  background: var(--cream);
  padding: 72px 0;
  border-bottom: 1px solid var(--light-gray);
}
.pp-mechanism__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 56px;
}
.pp-mechanism__title {
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--plum);
  text-transform: lowercase;
  margin-bottom: 20px;
}
.pp-mechanism__body {
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--mid-gray);
  max-width: 72ch;
  margin-bottom: 40px;
}
.pp-callouts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.pp-callout {
  background: var(--cream-mid);
  border-radius: 16px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pp-callout__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--berry);
  flex-shrink: 0;
}
.pp-callout__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--plum);
}

/* Accordion */
.pp-accordion-wrap {
  padding: 0 0 80px;
  border-bottom: 1px solid var(--light-gray);
}
.pp-accordion-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 56px;
}
.pp-accordion {
  border-top: 1px solid var(--light-gray);
}
.pp-accordion__head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--near-black);
  letter-spacing: 0;
  text-align: left;
}
.pp-accordion__icon {
  font-size: 1.2rem;
  color: var(--mid-gray);
  transition: transform var(--transition);
  font-weight: 300;
}
.pp-accordion__body {
  display: none;
  padding-bottom: 32px;
}
.pp-accordion.is-open .pp-accordion__body { display: block; }
.pp-accordion__text {
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--mid-gray);
  max-width: 72ch;
}

/* Citations */
.pp-cite {
  padding: 20px 0;
  border-bottom: 1px solid var(--light-gray);
}
.pp-cite:last-child { border-bottom: none; }
.pp-cite__authors {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--plum);
  margin-bottom: 4px;
}
.pp-cite__title {
  font-size: 0.82rem;
  color: var(--near-black);
  line-height: 1.5;
  margin-bottom: 4px;
}
.pp-cite__journal {
  font-size: 0.68rem;
  color: var(--mid-gray);
  font-family: var(--font-mono);
}

/* COA table inside accordion */
.pp-coa-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-width: 480px;
}
.pp-coa-row {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--light-gray);
  font-size: 0.78rem;
}
.pp-coa-row span:first-child { color: var(--mid-gray); }
.pp-coa-row span:last-child { font-weight: 600; color: var(--near-black); }
.pp-coa-row .pass { color: #2D7A45; }

/* FAQs */
.pp-faq { padding: 16px 0; border-bottom: 1px solid var(--light-gray); }
.pp-faq:last-child { border-bottom: none; }
.pp-faq__q { font-size: 0.82rem; font-weight: 600; color: var(--plum); margin-bottom: 6px; }
.pp-faq__a { font-size: 0.82rem; color: var(--mid-gray); line-height: 1.7; }

/* Reviews */
.pp-reviews {
  padding: 72px 0 80px;
  border-top: 1px solid var(--light-gray);
  border-bottom: 1px solid var(--light-gray);
}
.pp-reviews__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 56px;
}
.pp-reviews__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
  gap: 24px;
}
.pp-reviews__agg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pp-reviews__avg {
  font-size: clamp(2.4rem, 4vw, 4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--plum);
  line-height: 1;
}
.pp-reviews__stars { display: flex; gap: 3px; }
.star { font-size: 1rem; }
.star--full, .star--half { color: var(--berry); }
.star--empty { color: var(--light-gray); }
.pp-reviews__count {
  font-size: 0.72rem;
  color: var(--mid-gray);
  margin-top: 2px;
}
.pp-reviews__new {
  font-size: 0.82rem;
  color: var(--mid-gray);
  font-style: italic;
}
.pp-reviews__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}
.pp-review-card {
  background: var(--cream-mid);
  border-radius: 20px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pp-review-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pp-review-card__stars { display: flex; gap: 2px; }
.pp-review-card__verified {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2D7A45;
}
.pp-review-card__text {
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--near-black);
  flex: 1;
}
.pp-review-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--light-gray);
}
.pp-review-card__author {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--plum);
}
.pp-review-card__date {
  font-size: 0.65rem;
  color: var(--mid-gray);
  font-family: var(--font-mono);
}

/* Review form */
.pp-review-form { max-width: 600px; }
.pp-form-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--plum);
  text-transform: lowercase;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.pp-review-form .comment-form-author,
.pp-review-form .comment-form-email,
.pp-review-form .comment-form-comment { margin-bottom: 14px; }
.pp-review-form input[type="text"],
.pp-review-form input[type="email"],
.pp-review-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--light-gray);
  border-radius: 14px;
  background: var(--cream);
  font-family: var(--font);
  font-size: 0.84rem;
  color: var(--near-black);
  resize: vertical;
  transition: border-color var(--transition);
}
.pp-review-form input:focus,
.pp-review-form textarea:focus {
  outline: none;
  border-color: var(--plum);
}
.pp-form-submit { margin-top: 20px; }
/* WC star rating field in form */
.pp-review-form .comment-form-rating { margin-bottom: 16px; }
.pp-review-form .comment-form-rating label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid-gray);
  display: block;
  margin-bottom: 8px;
}
.pp-review-form .stars a { color: var(--berry); font-size: 1.3rem; }
.pp-review-form p.stars span a { color: var(--berry); }
.pp-review-form .comment-form-cookies-consent { display: none !important; }
.pp-review-form .comment-notes { display: none !important; }

/* Reviews responsive */
@media (max-width: 900px) {
  .pp-reviews__inner { padding: 0 24px; }
  .pp-reviews__list { grid-template-columns: 1fr 1fr; }
  .pp-reviews__header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .pp-reviews__list { grid-template-columns: 1fr; }
}

/* Related */
.pp-related { padding: 64px 0 80px; }
.pp-related__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 56px;
}

/* Product page responsive */
@media (max-width: 900px) {
  .pp-hero { grid-template-columns: 1fr; min-height: auto; }
  .pp-hero__media { position: static; height: auto; max-height: 260px; padding: 24px; }
  .pp-hero__info { padding: 40px 24px; }
  .pp-stats { grid-template-columns: 1fr 1fr; }
  .pp-callouts { grid-template-columns: repeat(2,1fr); }
  .pp-mechanism__inner, .pp-accordion-inner, .pp-related__inner { padding: 0 24px; }
  .pp-editorial__overlay { padding: 32px 24px; }
  .pp-stat { padding: 28px 24px; }
}

/* ============================================================
   CART DRAWER
   ============================================================ */

.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,8,15,0.45);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(2px);
}
.cart-overlay.is-visible {
  opacity: 1;
  pointer-events: all;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 95vw;
  background: var(--cream);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.38s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 40px rgba(0,0,0,0.12);
}
.cart-drawer.is-open { transform: translateX(0); }

/* Head */
.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--cream-mid);
  flex-shrink: 0;
}
.cart-drawer__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--plum);
}
.cart-drawer__count {
  font-weight: 400;
  color: #999;
}
.cart-drawer__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #999;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}
.cart-drawer__close:hover { color: var(--plum); }

/* Free shipping bar */
.cart-drawer__ship {
  padding: 12px 24px;
  background: var(--cream-card);
  border-bottom: 1px solid var(--cream-mid);
  flex-shrink: 0;
}
.cart-drawer__ship-bar {
  height: 3px;
  background: var(--cream-mid);
  border-radius: 3px;
  margin-bottom: 8px;
  overflow: hidden;
}
.cart-drawer__ship-fill {
  display: block;
  height: 100%;
  background: var(--berry);
  border-radius: 3px;
  transition: width 0.5s ease;
}
.cart-drawer__ship-msg {
  font-size: 12px;
  color: #666;
  margin: 0;
}
.cart-drawer__ship-msg strong { color: var(--plum); }

/* Items */
.cart-drawer__items {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}
.cart-drawer__empty {
  text-align: center;
  color: #aaa;
  font-size: 14px;
  padding: 40px 24px;
}

.drawer-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--cream-mid);
  position: relative;
}
.drawer-item__img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--cream-card);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.drawer-item__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.drawer-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.drawer-item__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--plum);
}
.drawer-item__dose {
  font-size: 11px;
  color: #aaa;
}
.drawer-item__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.drawer-item__qty { font-size: 12px; color: #888; }
.drawer-item__price { font-size: 14px; font-weight: 700; color: var(--plum); }
.drawer-item__remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #ccc;
  padding: 2px 4px;
  flex-shrink: 0;
  transition: color 0.2s;
}
.drawer-item__remove:hover { color: var(--plum); }

/* Upsells */
.cart-drawer__upsells {
  flex-shrink: 0;
  border-top: 1px solid var(--cream-mid);
}
.drawer-upsell {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  background: var(--cream-card);
  border-bottom: 1px solid var(--cream-mid);
}
.drawer-upsell--stack { background: #f0eae7; }
.drawer-upsell__img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
.drawer-upsell__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.drawer-upsell__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-upsell__tag {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--berry);
  font-weight: 700;
}
.drawer-upsell__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--plum);
}
.drawer-upsell__sub { font-size: 11px; color: #888; }
.drawer-upsell__add {
  background: var(--plum);
  color: white;
  border: none;
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.drawer-upsell__add:hover { opacity: 0.85; }
.drawer-upsell__add:disabled { opacity: 0.5; cursor: default; }
.drawer-upsell__add--stack {
  background: var(--berry);
}

/* Footer */
.cart-drawer__foot {
  flex-shrink: 0;
  border-top: 1px solid var(--cream-mid);
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cart-drawer__subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
}
.cart-drawer__subtotal-val {
  font-size: 18px;
  font-weight: 900;
}
.cart-drawer__foot-note {
  font-size: 11px;
  color: #aaa;
  margin: -4px 0 0;
}
.cart-drawer__checkout {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 16px;
  font-size: 13px;
  letter-spacing: 0.08em;
}
.cart-drawer__view-cart {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #888;
  text-decoration: none;
  margin-top: -4px;
  transition: color 0.2s;
}
.cart-drawer__view-cart:hover { color: var(--plum); }

/* ============================================================
   CHECKOUT — branded + AOV bumps
   ============================================================ */

.woocommerce-checkout .woocommerce { max-width: 1160px; margin: 0 auto; padding: 60px 40px; }
.woocommerce-checkout #customer_details { flex: 1.1; }
.woocommerce-checkout #order_review_heading { display: none; }

/* Page title */
.woocommerce-checkout h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--plum);
  margin: 0 0 40px;
}

/* Two-column layout */
.woocommerce-checkout .woocommerce-checkout-review-order-table { border-collapse: collapse; width: 100%; }
.woocommerce-checkout .checkout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: start; }

/* Field styling */
.woocommerce-checkout .form-row label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #888;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}
.woocommerce-checkout .form-row input,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
  border: 1.5px solid var(--cream-mid);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  background: white;
  width: 100%;
  box-sizing: border-box;
  color: var(--plum);
  transition: border-color 0.2s;
  font-family: inherit;
}
.woocommerce-checkout .form-row input:focus,
.woocommerce-checkout .form-row select:focus {
  outline: none;
  border-color: var(--plum);
}
.woocommerce-checkout .form-row { margin-bottom: 16px; }

/* Section headings */
.woocommerce-checkout h3 {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aaa;
  font-weight: 700;
  border-bottom: 1px solid var(--cream-mid);
  padding-bottom: 12px;
  margin: 32px 0 20px;
}
.woocommerce-checkout h3:first-child { margin-top: 0; }

/* Order summary panel */
.woocommerce-checkout #order_review {
  background: var(--cream-card);
  border-radius: 16px;
  padding: 28px;
  position: sticky;
  top: 100px;
}
.woocommerce-checkout table.shop_table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table th {
  padding: 10px 0;
  border-bottom: 1px solid var(--cream-mid);
  font-size: 13px;
  color: var(--plum);
  vertical-align: middle;
}
.woocommerce-checkout table.shop_table th { font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.woocommerce-checkout .cart-subtotal td,
.woocommerce-checkout .order-total td { font-weight: 900; font-size: 16px; }
.woocommerce-checkout .order-total td { font-size: 18px; }

/* Submit button */
.woocommerce-checkout #place_order {
  width: 100%;
  background: var(--plum);
  color: white;
  border: none;
  border-radius: 100px;
  padding: 18px 32px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
  font-family: inherit;
}
.woocommerce-checkout #place_order:hover { opacity: 0.85; }

/* Payment section */
.woocommerce-checkout #payment {
  background: white;
  border: 1.5px solid var(--cream-mid);
  border-radius: 12px;
  padding: 20px;
  margin-top: 16px;
}
.woocommerce-checkout #payment .payment_methods { list-style: none; padding: 0; margin: 0; }
.woocommerce-checkout #payment .payment_methods li { padding: 10px 0; border-bottom: 1px solid var(--cream-mid); }
.woocommerce-checkout #payment .payment_methods li:last-child { border-bottom: none; }

/* Order bumps */
.co-bumps {
  background: var(--cream-card);
  border: 1.5px solid var(--cream-mid);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 20px;
}
.co-bumps__heading {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
  font-weight: 700;
  margin: 0 0 16px;
}
.co-bump {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--cream-mid);
  cursor: pointer;
}
.co-bump:last-child { border-bottom: none; padding-bottom: 0; }
.co-bump:first-of-type { padding-top: 0; }
.co-bump__check {
  width: 18px;
  height: 18px;
  accent-color: var(--plum);
  flex-shrink: 0;
  margin-top: 2px;
}
.co-bump__info { flex: 1; }
.co-bump__label {
  font-size: 14px;
  font-weight: 700;
  color: var(--plum);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.co-bump__tag {
  background: var(--berry);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
}
.co-bump__sub { font-size: 12px; color: #888; display: block; margin-top: 3px; }
.co-bump__price {
  font-size: 13px;
  font-weight: 700;
  color: var(--berry);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Disclaimer on checkout */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper {
  font-size: 11px;
  color: #aaa;
  margin-top: 8px;
}

/* ============================================================
   PRODUCT CARDS — Rhode style
   ============================================================ */

.pcard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--cream-mid);
}
.pcard-grid--shop {
  padding: 0;
}

.pcard {
  position: relative;
  background: var(--cream);
  display: flex;
  flex-direction: column;
}

/* Media block */
.pcard__media-link { display: block; overflow: hidden; }
.pcard__media {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--cream);
}
.pcard__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease, transform 0.6s ease;
}
.pcard__img--vial {
  opacity: 1;
  object-fit: contain;
  padding: 12%;
  z-index: 1;
}
.pcard__img--life {
  opacity: 0;
  z-index: 2;
  object-position: center 20%;
}
.pcard:hover .pcard__img--vial { opacity: 0; transform: scale(1.03); }
.pcard:hover .pcard__img--life { opacity: 1; transform: scale(1.03); }

/* ATC button — slides up on hover */
.pcard__atc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--plum);
  color: white;
  border: none;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.pcard:hover .pcard__atc {
  opacity: 1;
  transform: translateY(0);
}
.pcard__atc:disabled { opacity: 0.7; cursor: default; }

/* Info panel */
.pcard__info {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pcard__concern {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--berry);
  font-weight: 700;
}
.pcard__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pcard__name {
  font-size: 15px;
  font-weight: 900;
  color: var(--plum);
  letter-spacing: -0.02em;
}
.pcard__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--plum);
  flex-shrink: 0;
}
.pcard__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pcard__stars {
  font-size: 11px;
  color: var(--berry);
  letter-spacing: -0.5px;
}
.pcard__rcount {
  font-size: 11px;
  color: #999;
}
.pcard__dose {
  font-size: 11px;
  color: #aaa;
}

/* ============================================================
   QUIZ CTA BLOCK
   ============================================================ */

.quiz-cta {
  background: var(--plum);
  overflow: hidden;
}
.quiz-cta__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 480px;
}
.quiz-cta__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 80px;
  gap: 0;
}
.quiz-cta__eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  margin-bottom: 20px;
  display: block;
}
.quiz-cta__headline {
  font-size: clamp(2.8rem, 5vw, 4.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: white;
  margin: 0 0 20px;
}
.quiz-cta__sub {
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
  margin: 0 0 36px;
  max-width: 340px;
}
.quiz-cta__img {
  overflow: hidden;
}
.quiz-cta__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: brightness(0.75) saturate(0.85);
  transition: transform 0.6s ease;
}
.quiz-cta:hover .quiz-cta__img img { transform: scale(1.03); }

/* Shop archive hero — cinematic full-bleed */
.shop-archive__hero {
  position: relative;
  overflow: hidden;
  min-height: 52vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: #2A1A22;
}
.shop-archive__hero-media {
  position: absolute;
  inset: 0;
}
.shop-archive__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.shop-archive__hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26,8,20,0.15) 0%,
    rgba(26,8,20,0.72) 100%
  );
}
.shop-archive__hero-text {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 40px 72px;
}
.shop-archive__eyebrow {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245,240,235,0.55);
  font-weight: 700;
  display: block;
  margin-bottom: 16px;
}
.shop-archive__headline {
  font-size: clamp(3rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--cream);
  margin: 0 0 16px;
}
.shop-archive__sub {
  font-size: 15px;
  color: rgba(245,240,235,0.65);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Concern filter bar */
.concern-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 24px 40px;
  background: var(--cream);
  border-bottom: 1px solid var(--light-gray);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.concern-filter::-webkit-scrollbar { display: none; }
.concern-filter__btn {
  flex-shrink: 0;
  padding: 8px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--light-gray);
  background: transparent;
  color: var(--near-black);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
.concern-filter__btn:hover {
  border-color: var(--plum);
  color: var(--plum);
}
.concern-filter__btn.is-active {
  background: var(--plum);
  border-color: var(--plum);
  color: #fff;
}
.pcard { transition: opacity 0.2s; }

/* ============================================================
   Quiz nav link */
.nav-quiz {
  color: var(--berry) !important;
  font-weight: 700 !important;
}

/* ============================================================
   QUIZ
   ============================================================ */

.quiz-wrap {
  min-height: 100vh;
  background: var(--cream);
}

/* Screens */
.quiz-screen {
  display: none;
  min-height: calc(100vh - 96px);
  animation: quizFade 0.35s ease;
}
.quiz-screen.active { display: flex; }
@keyframes quizFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* INTRO */
.quiz-intro {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 72px;
  max-width: 600px;
}
#screen-intro { align-items: stretch; }
.quiz-intro__img {
  flex: 1;
  max-width: 50%;
}
.quiz-intro__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.quiz-eyebrow {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--berry);
  font-weight: 600;
  margin-bottom: 20px;
  display: block;
}
.quiz-intro__headline {
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--plum);
  margin: 0 0 24px;
}
.quiz-intro__sub {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  margin: 0 0 36px;
  max-width: 380px;
}
.quiz-intro__disclaimer {
  margin-top: 16px;
  font-size: 11px;
  color: #aaa;
}

/* QUESTIONS */
.quiz-q-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 120px;
  max-width: 800px;
  margin: 0 auto;
  width: 100%;
}
.quiz-progress {
  width: 100%;
  height: 2px;
  background: var(--cream-mid);
  border-radius: 2px;
  margin-bottom: 20px;
}
.quiz-progress__fill {
  display: block;
  height: 100%;
  background: var(--plum);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.quiz-step {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 28px;
  display: block;
}
.quiz-q {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  color: var(--plum);
  margin: 0 0 48px;
}
.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.quiz-option {
  display: flex;
  align-items: center;
  gap: 20px;
  background: white;
  border: 1.5px solid var(--cream-mid);
  border-radius: 16px;
  padding: 20px 28px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
  width: 100%;
}
.quiz-option:hover {
  border-color: var(--plum);
  background: var(--cream);
  transform: translateX(4px);
}
.quiz-option.selected {
  border-color: var(--plum);
  background: var(--plum);
}
.quiz-option.selected .quiz-option__label,
.quiz-option.selected .quiz-option__sub { color: white; }
.quiz-option__icon {
  font-size: 18px;
  color: var(--cream-mid);
  flex-shrink: 0;
  transition: color 0.2s;
}
.quiz-option:hover .quiz-option__icon { color: var(--berry); }
.quiz-option.selected .quiz-option__icon { color: rgba(255,255,255,0.4); }
.quiz-option__label {
  font-size: 16px;
  font-weight: 700;
  color: var(--plum);
  display: block;
  line-height: 1.2;
}
.quiz-option__sub {
  font-size: 12px;
  color: #999;
  display: block;
  margin-top: 2px;
}

/* RESULT */
#screen-result { flex-direction: column; align-items: stretch; }
.quiz-result { display: flex; flex-direction: column; }

.quiz-result__img-wrap {
  position: relative;
  height: 55vh;
  overflow: hidden;
}
.quiz-result__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
.quiz-result__img-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(61,26,46,0.85) 0%, rgba(61,26,46,0.1) 60%, transparent 100%);
}
.quiz-result__img-text {
  position: absolute;
  bottom: 40px;
  left: 60px;
  color: white;
}
.quiz-result__match {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
}
.quiz-result__headline {
  font-size: clamp(2.2rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  margin: 0;
  color: white;
}

.quiz-result__body {
  padding: 48px 60px 60px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.quiz-result__sub {
  font-size: 15px;
  color: #555;
  line-height: 1.65;
  margin: 0 0 32px;
}
.quiz-result__products {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 28px;
}
.quiz-result__product {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--plum);
}
.quiz-result__product-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--berry);
  flex-shrink: 0;
}
.quiz-result__total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--cream-mid);
  border-bottom: 1px solid var(--cream-mid);
  padding: 16px 0;
  margin-bottom: 24px;
}
.quiz-result__total-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #999;
  display: block;
  margin-bottom: 4px;
}
.quiz-result__total {
  font-size: 26px;
  font-weight: 900;
  color: var(--plum);
}
.quiz-result__savings {
  display: block;
  font-size: 12px;
  color: var(--berry);
  font-weight: 600;
  margin-top: 2px;
}

/* BAC water add-on inside quiz */
.quiz-addon {
  background: var(--cream-card);
  border: 1.5px solid var(--cream-mid);
  border-radius: 12px;
  margin-bottom: 20px;
  transition: border-color 0.2s;
}
.quiz-addon:has(.quiz-addon__check:checked) {
  border-color: var(--berry);
}
.quiz-addon__label {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  cursor: pointer;
}
.quiz-addon__check {
  width: 18px;
  height: 18px;
  accent-color: var(--plum);
  flex-shrink: 0;
}
.quiz-addon__info { flex: 1; }
.quiz-addon__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--plum);
  display: flex;
  align-items: center;
  gap: 8px;
}
.quiz-addon__tag {
  background: var(--berry);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
}
.quiz-addon__desc {
  font-size: 12px;
  color: #888;
  display: block;
  margin-top: 2px;
}
.quiz-addon__price {
  font-size: 14px;
  font-weight: 700;
  color: var(--plum);
  flex-shrink: 0;
}

.quiz-atc {
  width: 100%;
  font-size: 15px;
  padding: 18px 32px;
  margin-bottom: 16px;
  cursor: pointer;
  border: none;
}
.quiz-result__restart {
  text-align: center;
  margin: 0 0 12px;
}
.quiz-result__restart a {
  font-size: 12px;
  color: #999;
  text-decoration: none;
}
.quiz-result__restart a:hover { color: var(--plum); }
.quiz-result__disclaimer {
  font-size: 11px;
  color: #bbb;
  text-align: center;
  margin: 0;
}

/* ============================================================
   MOBILE NAV
   ============================================================ */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 12px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--plum);
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}
.nav-toggle.is-active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 85vw);
  background: var(--plum);
  z-index: 1001;
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  display: flex;
  flex-direction: column;
  padding: 0;
}
.mobile-nav.is-open { transform: translateX(0); }

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,8,15,0.5);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-nav-overlay.is-visible { opacity: 1; pointer-events: all; }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mobile-nav__brand {
  font-size: 14px;
  font-weight: 900;
  color: white;
  letter-spacing: 0.05em;
}
.mobile-nav__brand span { font-weight: 400; opacity: 0.6; margin-left: 6px; }
.mobile-nav__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}

.mobile-nav__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  overflow-y: auto;
}
.mobile-nav__links a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s;
  letter-spacing: -0.01em;
}
.mobile-nav__links a:hover { background: rgba(255,255,255,0.06); }
.mobile-nav__quiz {
  color: #E8A0C4 !important;
}

.mobile-nav__foot {
  padding: 24px 28px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   RESPONSIVE — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  /* Grid legacy */
  .grid-3 { grid-template-columns: repeat(2,1fr); }
  .woocommerce ul.products { grid-template-columns: repeat(2,1fr) !important; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }

  /* Editorial */
  .editorial__card { flex-direction: column; align-items: flex-start; gap: 24px; }

  /* Product cards */
  .pcard-grid { grid-template-columns: repeat(2,1fr); }

  /* Product page — stack the 50/50 split */
  .pp-hero { grid-template-columns: 1fr; min-height: auto; }
  .pp-hero__media { position: static; height: auto; max-height: 280px; border-radius: 0; padding: 28px; }
  .pp-hero__info { padding: 32px 28px 40px; }
  .pp-stats { grid-template-columns: repeat(3,1fr); }

  /* Quiz intro — stack */
  #screen-intro { flex-direction: column-reverse; }
  .quiz-intro { max-width: 100%; padding: 52px 40px; }
  .quiz-intro__img { max-width: 100%; height: 50vw; flex: none; }
  .quiz-intro__img img { object-position: center 25%; }

  /* Quiz questions */
  .quiz-q-wrap { padding: 60px 48px; }

  /* Quiz CTA — stack */
  .quiz-cta__inner { grid-template-columns: 1fr; }
  .quiz-cta__text { padding: 52px 40px; }
  .quiz-cta__img { height: 55vw; }

  /* Checkout — single column */
  .woocommerce-checkout .checkout { grid-template-columns: 1fr; gap: 32px; }
  .woocommerce-checkout #order_review { position: static; }
}

/* ============================================================
   RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Header */
  .site-nav--left a { display: none; }
  .site-nav--right .nav-quiz,
  .site-nav--right a:not(.cart-link) { display: none; }
  .nav-toggle { display: flex; }
  .site-header__inner {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
  }
  .site-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    justify-self: unset;
    text-align: center;
  }
  .site-nav--left { display: flex; }
  .site-nav--right { gap: 16px; }

  /* Shipping bar */
  .shipping-bar { font-size: 11px; padding: 8px 16px; }

  /* Hero */
  .hero { height: 88vh; }
  .hero__content { padding: 32px 24px; bottom: 32px; }
  .hero__headline { font-size: clamp(2.2rem, 9vw, 4rem); }
  .hero__sub { font-size: 14px; max-width: 280px; }

  /* Product cards — 2 columns tight */
  .pcard-grid { grid-template-columns: repeat(2,1fr); gap: 1px; }
  .pcard__media { aspect-ratio: 3/4; }
  .pcard__info { padding: 10px 12px 14px; }
  .pcard__name { font-size: 13px; }
  .pcard__price { font-size: 13px; }
  .pcard__stars { font-size: 10px; }
  .pcard__dose { display: none; }
  .pcard__atc { font-size: 10px; padding: 11px 12px; }
  .shop-grid__header { padding: 28px 20px 16px; }

  /* Product page */
  .pp-hero { min-height: auto; }
  .pp-hero__media { height: auto; max-height: 240px; padding: 20px; }
  .pp-hero__info { padding: 24px 20px 32px; }
  .pp-name { font-size: 2.2rem; }
  .pp-stats { grid-template-columns: 1fr 1fr; }
  .pp-stat { padding: 20px 16px; }
  .pp-callouts { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pp-callout { padding: 14px 12px; }
  .pp-lifestyle { height: 60vw; }
  .pp-reviews__grid { grid-template-columns: 1fr; }
  .pp-related { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .has-lifestyle .pp-hero__info {
    padding: 28px 20px 32px;
  }
  .pp-editorial {
    height: 58vw;
    max-height: 360px;
  }

  /* Editorial */
  .editorial { flex-direction: column; }
  .editorial__img-wrap { width: 100%; }
  .editorial__img-wrap img { aspect-ratio: 4/5; }
  .editorial__card { padding: 28px 24px 36px; }
  .editorial__headline { font-size: 2rem; }

  /* Quiz */
  .quiz-q-wrap { padding: 36px 24px; max-width: 100%; }
  .quiz-q { font-size: clamp(1.8rem, 7vw, 2.8rem); margin-bottom: 32px; }
  .quiz-option { padding: 16px 20px; }
  .quiz-option__label { font-size: 15px; }
  .quiz-intro { padding: 40px 24px; }
  .quiz-intro__headline { font-size: clamp(2.6rem, 10vw, 4rem); }
  .quiz-intro__img { height: 45vw; }
  .quiz-result__img-wrap { height: 60vw; }
  .quiz-result__img-text { left: 24px; bottom: 28px; }
  .quiz-result__headline { font-size: 2rem; }
  .quiz-result__body { padding: 32px 24px 48px; }

  /* Quiz CTA */
  .quiz-cta__text { padding: 44px 24px; }
  .quiz-cta__headline { font-size: 2.4rem; }
  .quiz-cta__img { height: 60vw; }

  /* Cart drawer — full width */
  .cart-drawer { width: 100%; max-width: 100%; border-radius: 0; }

  /* Manifesto */
  .manifesto { padding: 48px 24px; font-size: 1.1rem; }

  /* Footer */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .site-footer__inner { padding: 48px 24px 32px; }

  /* Shop archive */
  .shop-archive__hero { min-height: 40vh; }
  .shop-archive__hero-text { padding: 40px 24px 52px; }
  .shop-archive__headline { font-size: 3rem; }

  /* Checkout */
  .woocommerce-checkout .woocommerce { padding: 40px 20px; }
  .woocommerce-checkout h1 { font-size: 2rem; margin-bottom: 28px; }
  .woocommerce-checkout #order_review { padding: 20px; border-radius: 12px; }

  /* Accordion / spec table on product page */
  .pp-spec-table { font-size: 12px; }
  .pp-spec-table td { padding: 8px 0; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE (max 430px)
   ============================================================ */
@media (max-width: 430px) {
  .hero__headline { font-size: 2rem; }
  .pcard-grid { gap: 0; }
  .pcard__info { padding: 8px 10px 12px; }
  .pcard__name { font-size: 12px; }
  .quiz-intro__headline { font-size: 2.4rem; }
  .site-footer__grid { grid-template-columns: 1fr; }
  .pp-stats { grid-template-columns: 1fr; }
  .pp-callouts { grid-template-columns: 1fr; }
  .editorial__headline { font-size: 1.8rem; }
}

/* ============================================================
   STICKY CHECKOUT BAR
   ============================================================ */
.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  background: var(--plum);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 32px;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.18);
}
.sticky-bar.is-visible {
  transform: translateY(0);
}
.sticky-bar__left {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.sticky-bar__count { color: rgba(255,255,255,0.7); }
.sticky-bar__sep { color: rgba(255,255,255,0.3); }
.sticky-bar__total { color: #fff; }
.sticky-bar__btn {
  background: #fff;
  color: var(--plum);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.sticky-bar__btn:hover { opacity: 0.85; }

@media (max-width: 640px) {
  .sticky-bar { padding: 12px 20px; }
  .sticky-bar__left { font-size: 13px; }
  .sticky-bar__btn { padding: 10px 20px; font-size: 12px; }
}

/* Shop grid footer CTA */
.shop-grid__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 0 16px;
}
.shop-grid__footer-note {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid-gray);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

/* ── Hero word reveal ── */
.word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.22em;
}
.word:last-child { margin-right: 0; }
.word-inner {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
}
@keyframes wordReveal {
  to { transform: translateY(0); opacity: 1; }
}
.word-animate {
  animation: wordReveal 0.72s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Hero sub + CTA fade ── */
.hero-fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.hero-fade-in.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Scroll-triggered: generic [data-animate] ── */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.72s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-left"] {
  transform: translateX(-32px);
}
[data-animate="fade-right"] {
  transform: translateX(32px);
}
[data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* ── Product card stagger ── */
.pcard--animate {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pcard--animate.is-visible {
  opacity: 1;
  transform: none;
}

/* ── Vial entrance on product page ── */
@keyframes vialEntrance {
  from { opacity: 0; transform: scale(0.92) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.vial-entrance {
  animation: vialEntrance 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ── Concern filter slide down ── */
.filter-reveal {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.filter-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── View Transitions ── */
@keyframes vt-fade-in  { from { opacity: 0; } }
@keyframes vt-fade-out { to   { opacity: 0; } }
::view-transition-old(root) {
  animation: 220ms ease-out both vt-fade-out;
}
::view-transition-new(root) {
  animation: 280ms ease-in both vt-fade-in;
}

/* Reduced-motion: kill everything */
@media (prefers-reduced-motion: reduce) {
  [data-animate], .hero-fade-in, .pcard--animate,
  .word-inner, .vial-entrance, .filter-reveal {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}