/* ============================================================
   Dr. Thaj — Product detail pages: fluid motion system
   Accent palette per page via CSS vars: --pa (accent), --pb (accent 2)
   ============================================================ */

/* ---------- animated hero ---------- */
.pp-hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: radial-gradient(120% 120% at 20% 10%, #fffaf6 0%, #fdf1ea 45%, #f9e4dc 100%);
  padding: clamp(28px, 5vw, 72px);
  isolation: isolate;
}
.pp-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  z-index: -1;
  animation: pp-drift 16s ease-in-out infinite alternate;
}
.pp-blob.b1 { width: 46vw; height: 46vw; background: var(--pa); top: -18%; right: -12%; }
.pp-blob.b2 { width: 34vw; height: 34vw; background: var(--pb); bottom: -22%; left: -10%; animation-duration: 21s; animation-delay: -6s; }
.pp-blob.b3 { width: 20vw; height: 20vw; background: var(--brand-soft); top: 46%; left: 38%; opacity: .35; animation-duration: 26s; animation-delay: -12s; }
@keyframes pp-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-6%, 7%) scale(1.12); }
  100% { transform: translate(5%, -6%) scale(0.94); }
}

.pp-hero-copy .eyebrow { color: var(--brand); }
.pp-hero-copy h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.04;
  color: var(--brand-deep);
  margin: 10px 0 18px;
}
.pp-hero-copy .pp-sub {
  font-size: clamp(1rem, 1.4vw, 1.13rem);
  line-height: 1.65;
  color: var(--muted);
  max-width: 50ch;
  margin: 0 0 26px;
}
.pp-price-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.pp-chip {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand-deep);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  padding: 8px 15px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.pp-cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.pp-amazon {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 16px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--brand) 38%, transparent);
  transition: transform 0.25s cubic-bezier(.2,.7,.3,1), box-shadow 0.25s ease, background 0.25s ease;
  cursor: pointer;
}
.pp-amazon:hover { transform: translateY(-3px); box-shadow: 0 20px 44px color-mix(in srgb, var(--brand) 48%, transparent); background: var(--brand-deep); }
.pp-amazon svg { flex-shrink: 0; }

/* hero visual: floating product */
.pp-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}
.pp-float {
  position: relative;
  width: min(320px, 68%);
  animation: pp-bob 6.5s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(0 34px 44px color-mix(in srgb, var(--pa) 34%, rgba(67,18,38,.28)));
}
@keyframes pp-bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-22px) rotate(1.4deg); }
}
.pp-halo {
  position: absolute;
  inset: auto;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--pa) 45%, transparent);
  animation: pp-spin 40s linear infinite;
}
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ---------- sticky buy bar ---------- */
.pp-buybar {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translate(-50%, 140%);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(255, 250, 246, 0.88);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 12px 10px 22px;
  box-shadow: 0 18px 44px rgba(67, 18, 38, 0.22);
  transition: transform 0.5s cubic-bezier(.2,.7,.25,1);
  max-width: calc(100vw - 32px);
}
.pp-buybar.show { transform: translate(-50%, 0); }
.pp-buybar strong { font-size: 0.95rem; color: var(--brand-deep); white-space: nowrap; }
.pp-buybar .pp-amazon { padding: 12px 22px; font-size: 0.9rem; }

/* ---------- scroll reveals ---------- */
.ppjs .rv { opacity: 0; transform: translateY(38px); transition: opacity 0.7s cubic-bezier(.2,.7,.3,1), transform 0.7s cubic-bezier(.2,.7,.3,1); will-change: transform, opacity; }
.rv.in { opacity: 1; transform: none; }
.ppjs .rv-l { opacity: 0; transform: translateX(-46px); transition: opacity 0.75s cubic-bezier(.2,.7,.3,1), transform 0.75s cubic-bezier(.2,.7,.3,1); }
.ppjs .rv-r { opacity: 0; transform: translateX(46px);  transition: opacity 0.75s cubic-bezier(.2,.7,.3,1), transform 0.75s cubic-bezier(.2,.7,.3,1); }
.rv-l.in, .rv-r.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 0.08s; } .rv-d2 { transition-delay: 0.18s; } .rv-d3 { transition-delay: 0.28s; } .rv-d4 { transition-delay: 0.38s; }

/* ---------- feature panels ---------- */
.pp-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.pp-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s ease;
}
.pp-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(67, 18, 38, 0.12); }
.pp-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pa), var(--pb));
}
.pp-card .pp-ic {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pa) 14%, #fff);
  color: var(--brand);
  margin-bottom: 14px;
}
.pp-card h3 { margin: 0 0 8px; font-size: 1.08rem; color: var(--brand-deep); }
.pp-card p { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--muted); }

/* ---------- how to use steps ---------- */
.pp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: step; }
.pp-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 26px 22px 24px;
  position: relative;
}
.pp-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: "Cormorant Garamond", serif;
  font-size: 2.6rem;
  line-height: 1;
  color: color-mix(in srgb, var(--pa) 55%, var(--brand));
  display: block;
  margin-bottom: 10px;
}
.pp-step h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--brand-deep); }
.pp-step p { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }

/* ---------- marquee strip ---------- */
.pp-marquee {
  overflow: hidden;
  border-block: 1px solid var(--line);
  padding: 16px 0;
  margin: 8px 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--pa) 7%, #fffaf6), color-mix(in srgb, var(--pb) 7%, #fffaf6));
}
.pp-marquee-track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: pp-marquee 26s linear infinite;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.25rem;
  color: var(--brand-deep);
  white-space: nowrap;
}
.pp-marquee-track span { display: inline-flex; align-items: center; gap: 46px; }
.pp-marquee-track em { font-style: normal; color: var(--brand); }
@keyframes pp-marquee { to { transform: translateX(-50%); } }

/* ---------- related products ---------- */
.pp-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.pp-rel-card {
  display: block;
  text-decoration: none;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.2,.7,.3,1), box-shadow 0.35s ease;
  cursor: pointer;
}
.pp-rel-card:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 22px 44px rgba(67,18,38,.14); }
.pp-rel-visual { height: 130px; display: flex; align-items: center; justify-content: center; }
.pp-rel-visual svg { height: 104px; }
.pp-rel-card .pp-rel-body { padding: 16px 18px 20px; }
.pp-rel-card h3 { margin: 0 0 4px; font-size: 1rem; color: var(--brand-deep); }
.pp-rel-card p { margin: 0; font-size: 0.84rem; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 880px) {
  .pp-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 42px; }
  .pp-hero-visual { order: -1; min-height: 300px; }
  .pp-float { width: min(240px, 62%); }
  .pp-buybar strong { display: none; }
  /* wide, flat buy bar on mobile — full-width button, less bubble */
  .pp-buybar { width: calc(100vw - 28px); padding: 8px; justify-content: stretch; }
  .pp-buybar .pp-amazon { width: 100%; justify-content: center; padding: 14px 18px; font-size: 1rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pp-blob, .pp-float, .pp-halo, .pp-marquee-track { animation: none !important; }
  .rv, .rv-l, .rv-r { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pp-buybar { transition: none; }
}