/* ============================================================
   Products page — color-driven cards, page transition curtain
   Uses base palette from aman.css
   ============================================================ */

.prod-page{background:var(--paper)}

.nav-active{color:var(--ink) !important;font-weight:600}
.nav-active::after{width:100% !important}

/* ---------- Page transition curtain ---------- */
.curtain{
  position:fixed;inset:0;z-index:9999;display:flex;pointer-events:none;
}
.curtain-panel{
  flex:1;background:var(--ink);
  transform:translateY(0);
  animation:curtain-up .9s cubic-bezier(.86,0,.07,1) forwards;
}
.curtain-panel:nth-child(1){animation-delay:.05s}
.curtain-panel:nth-child(2){animation-delay:.15s}
.curtain-panel:nth-child(3){animation-delay:.25s}
.curtain-panel:nth-child(4){animation-delay:.35s}
@keyframes curtain-up{
  0%{transform:translateY(0)}
  100%{transform:translateY(-100%)}
}

/* ---------- Hero ---------- */
.prod-hero{
  position:relative;padding:140px 0 60px;overflow:hidden;
  background:linear-gradient(180deg, #faf5e7 0%, #ede3ca 100%);
  border-bottom:1px solid var(--rule);
}
.prod-hero-bg{position:absolute;inset:0;pointer-events:none}
.prod-orb{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;
}
.orb-1{top:-10%;left:60%;width:520px;height:520px;
  background:radial-gradient(circle,#f4d06a 0%, transparent 70%);
  animation:orbfloat1 18s ease-in-out infinite;
}
.orb-2{top:30%;right:-8%;width:380px;height:380px;
  background:radial-gradient(circle,#8cb26a 0%, transparent 70%);
  animation:orbfloat2 22s ease-in-out infinite;
}
.orb-3{bottom:-20%;left:-5%;width:480px;height:480px;
  background:radial-gradient(circle,#4b6a3a 0%, transparent 70%);
  opacity:.3;animation:orbfloat3 24s ease-in-out infinite;
}
@keyframes orbfloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
@keyframes orbfloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-30px)}}
@keyframes orbfloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-40px) scale(1.1)}}

.prod-crumb{
  display:flex;align-items:center;gap:10px;
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-muted);margin-bottom:30px;
}
.prod-crumb a{color:var(--ink-muted);transition:color .2s ease}
.prod-crumb a:hover{color:var(--moss)}
.prod-crumb span:not(:nth-child(2)){color:var(--ink)}

.prod-title{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(48px, 8vw, 110px);line-height:.95;letter-spacing:-0.025em;
  color:var(--ink);margin-bottom:24px;
}
.prod-title .line{display:block;overflow:hidden;padding:6px 0}
.prod-title .word{
  display:inline-block;transform:translateY(110%);opacity:0;
  animation:word-rise 1s cubic-bezier(.2,.7,.2,1) forwards;
}
.prod-title .line:nth-child(1) .word:nth-child(1){animation-delay:1s}
.prod-title .line:nth-child(1) .word:nth-child(2){animation-delay:1.1s}
.prod-title .line:nth-child(2) .word{animation-delay:1.2s}
.prod-title .word.italic{font-style:italic;font-weight:400;color:var(--moss-deep)}
@keyframes word-rise{to{transform:translateY(0);opacity:1}}

.prod-lead{
  max-width:620px;font-size:18px;line-height:1.55;color:var(--ink-soft);
  opacity:0;transform:translateY(20px);
  animation:fade-up .9s ease 1.5s forwards;
}
.prod-lead em{color:var(--moss);font-style:italic}
@keyframes fade-up{to{opacity:1;transform:translateY(0)}}

/* ---------- Filters ---------- */
.filters{
  position:relative;display:flex;flex-wrap:wrap;gap:8px;margin-top:48px;
  padding:8px;background:rgba(31,42,26,.04);border:1px solid var(--rule);
  border-radius:999px;width:fit-content;max-width:100%;
  opacity:0;animation:fade-up .9s ease 1.7s forwards;
}
.filter-pill{
  position:relative;padding:11px 20px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--ink-soft);
  cursor:none;transition:color .3s ease;z-index:2;display:inline-flex;align-items:center;gap:8px;
}
.filter-pill em{
  font-style:normal;font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:2px 6px;border-radius:6px;background:rgba(31,42,26,.08);color:var(--ink-muted);
  transition:background .3s ease, color .3s ease;
}
.filter-pill.active{color:var(--paper)}
.filter-pill.active em{background:rgba(251,248,240,.2);color:var(--paper)}
.filter-pill:hover:not(.active){color:var(--ink)}
.filter-indicator{
  position:absolute;top:8px;height:calc(100% - 16px);
  background:var(--ink);border-radius:999px;z-index:1;
  transition:left .5s cubic-bezier(.7,0,.3,1), width .5s cubic-bezier(.7,0,.3,1);
}
@media (max-width:640px){
  .filters{padding:6px}
  .filter-pill{padding:9px 14px;font-size:12px}
}

/* ---------- Grid ---------- */
.prod-grid-wrap{padding:80px 0 100px;background:var(--bg)}
.prod-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media (max-width:1024px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.prod-grid{grid-template-columns:1fr}}

.pcard{
  position:relative;aspect-ratio:1/1.22;perspective:1400px;
  opacity:0;transform:translateY(40px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.pcard.in{opacity:1;transform:translateY(0)}
.pcard.hide{display:none}

.pcard-inner{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.7,0,.3,1);
}
.pcard.flipped .pcard-inner{transform:rotateY(180deg)}

.pcard-front, .pcard-back{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:28px;overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--rule);
}

/* FRONT */
.pcard-front{
  background:linear-gradient(180deg, var(--pc-soft) 0%, #ffffff 60%);
  padding:24px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.pcard:hover .pcard-front{
  transform:translateY(-4px);
  box-shadow:0 40px 70px -30px color-mix(in srgb, var(--pc-deep) 40%, transparent);
}

.pcard-meta{
  display:flex;align-items:center;justify-content:space-between;
  font-family:'JetBrains Mono',monospace;font-size:11px;
}
.pcard-tag{
  background:var(--pc-deep);color:#fff;padding:5px 11px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.18em;font-weight:600;
}
.pcard-tag-pro{background:var(--ink)}
.pcard-id{color:var(--ink-muted);letter-spacing:.1em}

.pcard-pic{
  position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  margin:6px -10px;min-height:0;
}
.pcard-pic img{
  max-height:100%;max-width:90%;width:auto;
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.18));
  transform:translateY(0) rotate(0);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
}
.pcard:hover .pcard-pic img{transform:translateY(-12px) rotate(-3deg) scale(1.04)}

.pcard-glow{
  position:absolute;inset:auto 10% -8% 10%;height:30px;border-radius:50%;
  background:radial-gradient(ellipse,color-mix(in srgb, var(--pc) 40%, transparent) 0%,transparent 70%);
  filter:blur(14px);transition:opacity .4s ease, transform .6s ease;
}
.pcard:hover .pcard-glow{transform:scale(1.2);opacity:.8}

.pcard-info h3{
  font-family:'Fraunces',serif;font-size:24px;font-weight:600;color:var(--ink);
  line-height:1;letter-spacing:-.01em;
}
.pcard-info h3 span{color:var(--pc-deep);font-style:italic;font-weight:400}
.pcard-info p{font-size:13px;color:var(--ink-muted);line-height:1.45;margin-top:8px;min-height:38px}

.pcard-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.chip{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  padding:4px 10px;border-radius:999px;background:rgba(31,42,26,.06);
  color:var(--ink-soft);
}
.pcard:hover .chip{background:color-mix(in srgb, var(--pc) 18%, transparent);color:var(--pc-deep)}

.pcard-flip{
  position:absolute;bottom:18px;right:18px;
  width:42px;height:42px;border-radius:50%;
  background:var(--ink);color:var(--paper);
  display:flex;align-items:center;justify-content:center;
  transition:transform .3s ease, background .3s ease;
}
.pcard-flip:hover{transform:rotate(45deg);background:var(--pc-deep)}

/* BACK */
.pcard-back{
  background:var(--ink);color:var(--paper);
  transform:rotateY(180deg);padding:28px 24px 24px;
}
.pcard-back h3{font-family:'Fraunces',serif;font-size:22px;font-weight:600;color:var(--paper)}
.pcard-tagline{font-size:12.5px;color:var(--pc);
  font-family:'JetBrains Mono',monospace;letter-spacing:.05em;margin-top:4px;margin-bottom:18px}
.pcard-specs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-bottom:18px}
.pcard-specs li{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:6px 0;border-bottom:1px dashed rgba(251,248,240,.15);
  font-size:12px;
}
.pcard-specs li span{color:rgba(251,248,240,.55)}
.pcard-specs li strong{color:var(--paper);font-family:'JetBrains Mono',monospace;font-weight:600;font-size:12px}
.pcard-dose{
  padding:14px;border-radius:14px;background:color-mix(in srgb, var(--pc) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--pc) 30%, transparent);
}
.pcard-dose span{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--pc);margin-bottom:6px}
.pcard-dose strong{display:block;font-size:13px;color:var(--paper);font-weight:500;line-height:1.5}

.pcard-back-btn{
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;border-radius:50%;
  background:rgba(251,248,240,.08);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .3s ease, transform .3s ease;
}
.pcard-back-btn:hover{background:rgba(251,248,240,.18);transform:scale(1.08)}
.pcard-back-btn span{display:none}

/* ---------- CTA Strip ---------- */
.cta-strip{
  position:relative;margin-top:80px;
  background:linear-gradient(135deg, var(--moss-deep) 0%, var(--ink) 100%);
  border-radius:32px;padding:56px 48px;overflow:hidden;color:var(--paper);
}
.cta-strip-bg{
  position:absolute;inset:auto 0 0 0;width:100%;height:60%;
  pointer-events:none;
}
.cta-strip-inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;max-width:680px;
}
.cta-strip h3{font-family:'Fraunces',serif;font-size:clamp(26px,3.4vw,40px);font-weight:500;line-height:1.1;color:var(--paper)}
.cta-strip p{font-size:15px;color:rgba(251,248,240,.75);max-width:520px}
.cta-strip .btn{margin-top:18px}
.cta-strip .btn-primary{background:var(--paper);color:var(--ink)}
.cta-strip .btn-primary:hover{background:var(--ochre);color:var(--ink)}
@media (max-width:640px){.cta-strip{padding:36px 24px;border-radius:24px}}