/* ============================================================================
   PRODUCT — full-screen product page + silencio "facts card" + recommendations
   (loads after styles.css + store.css; reuses .grid/.card + store chrome)
   ============================================================================ */

/* solid header + offset (same chrome as the store) */
body{ padding-top:46px; }
.site-header{ mix-blend-mode:normal; background:var(--bg); color:var(--ink); }
.site-header a, .site-header button{ color:var(--ink); }

.pback{ display:inline-flex; align-items:center; gap:9px; padding:26px var(--gut) 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.pback:hover{ color:var(--red); }
.pback .arw{ transition:transform .3s var(--ease); }
.pback:hover .arw{ transform:translateX(-4px); }

/* ===================================================================== HERO */
.pd{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,60px);
  padding:20px var(--gut) clamp(40px,6vw,80px); align-items:stretch; }

/* left — big product visual on a stage */
.pd__visual{
  position:relative; border:1px solid var(--line); overflow:hidden;
  min-height:clamp(360px,52vw,640px);
  background:radial-gradient(80% 70% at 50% 42%, #f7f6f3 0%, #ebe8e2 52%, #ddd9d1 100%);
  display:grid; place-items:center;
}
.pd__visual .bgv{ position:absolute; opacity:.5; filter:blur(1px); width:var(--s); left:var(--x); top:var(--y); transform:translate(-50%,-50%) rotate(var(--r,0deg)); }
.pd__hero-img{ position:relative; width:min(46%,300px); z-index:2;
  filter:drop-shadow(0 44px 36px rgba(20,18,14,.26)) drop-shadow(0 12px 16px rgba(20,18,14,.13));
  animation:pdfloat 7s ease-in-out infinite; }
@keyframes pdfloat{ 0%,100%{ transform:translateY(-10px) rotate(5deg);} 50%{ transform:translateY(12px) rotate(8deg);} }
.pd__code{ position:absolute; top:18px; left:20px; z-index:3; }
.pd__vtext{ position:absolute; left:18px; bottom:24px; z-index:3;
  writing-mode:vertical-rl; transform:rotate(180deg); transform-origin:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.pd__visual .barcode{ position:absolute; right:20px; bottom:22px; z-index:3; }

/* right — purchase panel */
.pd__panel{ display:flex; flex-direction:column; gap:18px; padding:6px 0; }
.pd__index{ font-weight:700; letter-spacing:-.04em; line-height:.8; font-size:clamp(40px,6vw,84px); color:var(--ink); }
.pd__cat{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.pd__name{ font-weight:700; letter-spacing:-.03em; line-height:.96; text-transform:uppercase; font-size:clamp(34px,5vw,68px); }
.pd__blurb{ color:var(--ink-soft); font-size:16px; line-height:1.5; max-width:48ch; }
.pd__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.pd__tags span{ font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:999px; padding:4px 9px; color:var(--ink-soft); }

.pd__doses-l{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:6px; }
.pd__doses{ display:flex; flex-wrap:wrap; gap:8px; }
.dose{ border:1px solid var(--line-2); border-radius:10px; padding:10px 13px; text-align:left; transition:border-color .2s var(--ease), background .2s var(--ease); }
.dose b{ display:block; font-size:13px; letter-spacing:-.01em; }
.dose small{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); }
.dose:hover{ border-color:var(--ink); }
.dose.sel{ border-color:var(--ink); background:var(--ink); color:var(--bg); }
.dose.sel small{ color:rgba(255,255,255,.7); }

.pd__buy{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:6px; }
.pd__price{ font-family:var(--mono); font-size:26px; }
.pd__price small{ font-size:11px; color:var(--ink-soft); }
.pd__add{ flex:1; min-width:200px; justify-content:center; }

/* ============================================================== FACTS CARD */
.facts-wrap{ padding:0 var(--gut) clamp(40px,6vw,80px); }
.facts-card{
  position:relative; border:1px solid var(--ink); border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg, #f6f5f2, #e7e4de);
  padding:clamp(26px,4vw,46px);
  padding-left:clamp(54px,8vw,92px);
  min-height:clamp(440px,60vh,680px);
  display:flex; flex-direction:column;
}
.facts-card__no{ font-weight:700; letter-spacing:-.04em; line-height:.8; font-size:clamp(64px,11vw,150px); }
.facts-card__v{
  position:absolute; left:clamp(14px,2vw,26px); top:50%; transform:translateY(-50%) rotate(180deg);
  writing-mode:vertical-rl; font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.facts-card__mid{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.facts-card__mid img{ width:min(26%,200px); opacity:.16; filter:grayscale(.2); }
.facts-card__row{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:30px; }
.facts-card__pill{ border:1px solid var(--red); color:var(--red); border-radius:999px; padding:11px 22px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.facts-card__facts{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,60px); margin-top:22px; padding-top:20px; border-top:1px solid var(--line-2); }
.ff-row{ display:flex; justify-content:space-between; gap:14px; font-family:var(--mono); font-size:12px; text-transform:uppercase; padding:2px 0; letter-spacing:.02em; }
.ff-row.ff-head{ font-weight:700; }
.ff-row.ff-head b{ font-weight:700; }
.ff-row .v0{ color:var(--red); }
.ff-ing{ font-size:14px; line-height:1.5; color:var(--ink); }
.ff-ing p{ margin-bottom:12px; }
.ff-ing .star{ color:var(--ink-soft); }

/* ============================================================ RECOMMENDED */
.pd-recs{ padding:clamp(40px,6vw,80px) 0 0; border-top:1px solid var(--line); }
.pd-recs__hd{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:12px; padding:0 var(--gut) 24px; }
.pd-recs__hd h3{ font-weight:700; letter-spacing:-.03em; text-transform:uppercase; font-size:clamp(26px,4vw,52px); }
.pd-recs .grid{ margin:0 var(--gut); }

@media (max-width:880px){
  .pd{ grid-template-columns:1fr; }
  .facts-card__facts{ grid-template-columns:1fr; gap:22px; }
}