/* ==========================================================================
   GROVYN — PDP (Product Detail Page)
   套用設計稿 product.html 的 7 區塊樣式，scoped 在 .grovyn-pdp 容器內

   來源：設計稿 product.html line 199–796
   已剝除：:root token / 全域 reset / body 預設 / img/svg/a/button 全域元素 /
           .ts-header / .ts-nav / .ts-mega / .ts-footer 樣式（重複於 header.php/footer.php）
   保留：所有 .pdp-* / .fade-up / .alt-warm / .alt-dark / 瓶子 / @keyframes
   ========================================================================== */

.grovyn-pdp { background: var(--ts-cream); color: var(--ts-ink); }

/* ===== PRODUCT HERO ===== */
.grovyn-pdp .pdp-hero{
  position:relative;
  min-height:100vh;
  display:flex; align-items:center;
  background:radial-gradient(ellipse at 70% 20%, #3d4258 0%, var(--ts-navy) 40%, var(--ts-navy-deep) 100%);
  color:var(--ts-cream);
  overflow:hidden;
}
.grovyn-pdp .pdp-hero::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(73,84,52,.5), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(238,205,194,.1), transparent 60%);
  animation:ts-breath 8s var(--ts-ease-natural) infinite;
}
@keyframes ts-breath{ 0%,100%{opacity:.85} 50%{opacity:1} }

.grovyn-pdp .pdp-hero-grid{
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto;
  width:100%; padding:160px var(--ts-sp-4) var(--ts-sp-7);
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--ts-sp-6); align-items:center;
}
.grovyn-pdp .pdp-hero-text .pdp-eyebrow,
.grovyn-pdp .pdp-eyebrow{
  font-family:var(--ts-font-mono);
  font-size:12px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ts-peach);
  margin-bottom:var(--ts-sp-3);
}
.grovyn-pdp .pdp-hero-text h1{
  font-family:var(--ts-font-serif-zh);
  font-weight:500;
  font-size:clamp(40px,5.5vw,72px);
  line-height:1.1; letter-spacing:-.02em;
  margin:0 0 var(--ts-sp-3);
}
.grovyn-pdp .pdp-hero-text .pdp-sub{
  font-family:var(--ts-font-display-en);
  font-style:italic; font-weight:300;
  font-size:clamp(20px,2vw,26px);
  color:var(--ts-peach); margin-bottom:var(--ts-sp-4);
}
.grovyn-pdp .pdp-hero-text .pdp-lede{
  max-width:480px; font-size:16.5px; line-height:1.8;
  color:rgba(238,234,231,.78);
  margin:0 0 var(--ts-sp-5);
}
.grovyn-pdp .pdp-meta{
  display:flex; gap:var(--ts-sp-5); flex-wrap:wrap;
  padding-top:var(--ts-sp-4);
  border-top:1px solid rgba(238,234,231,.12);
}
.grovyn-pdp .pdp-meta-item small,
.grovyn-pdp .pdp-meta-item .pdp-meta-label{
  display:block;
  font-family:var(--ts-font-mono);
  font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(238,205,194,.7);
  margin-bottom:4px;
}
.grovyn-pdp .pdp-meta-item strong,
.grovyn-pdp .pdp-meta-item .pdp-meta-value{
  font-family:var(--ts-font-serif-zh);
  font-size:18px; font-weight:500;
  color:var(--ts-cream);
}

.grovyn-pdp .pdp-hero-visual{
  position:relative;
  aspect-ratio:1;
  display:grid; place-items:center;
}
.grovyn-pdp .pdp-bottle{
  width:62%; aspect-ratio:.42;
  border-radius:36% 36% 16% 16% / 14% 14% 8% 8%;
  background:linear-gradient(180deg,
    rgba(73,84,52,.85) 0%,
    rgba(54,61,38,.95) 50%,
    rgba(40,44,60,.95) 100%);
  position:relative;
  box-shadow:
    inset 0 -20px 40px rgba(0,0,0,.4),
    inset 6px 0 20px rgba(255,255,255,.06),
    inset -6px 0 20px rgba(0,0,0,.3),
    0 30px 60px rgba(0,0,0,.5);
}
.grovyn-pdp .pdp-bottle::before{
  content:""; position:absolute;
  top:-12%; left:50%; transform:translateX(-50%);
  width:30%; height:18%;
  background:linear-gradient(180deg, #2a2e3c, #1a1d29);
  border-radius:6px 6px 4px 4px;
  box-shadow:0 4px 8px rgba(0,0,0,.4);
}
.grovyn-pdp .pdp-bottle::after{
  content:""; position:absolute; inset:30% 18% auto 18%;
  height:38%;
  background:linear-gradient(180deg,
    rgba(238,205,194,.08) 0%,
    rgba(238,205,194,.02) 100%);
  border-radius:4px;
  border-top:1px solid rgba(238,205,194,.2);
  border-bottom:1px solid rgba(238,205,194,.1);
}
.grovyn-pdp .pdp-bottle-shine{
  position:absolute; top:8%; left:14%;
  width:14%; height:60%;
  background:linear-gradient(180deg, rgba(238,205,194,.3), transparent);
  border-radius:50% 50% 4px 4px;
  filter:blur(4px);
}
.grovyn-pdp .pdp-bottle-mist{
  position:absolute; inset:auto -20% -20% -20%;
  height:50%;
  background:radial-gradient(ellipse at 50% 70%, rgba(163,172,153,.4), transparent 60%);
  filter:blur(30px);
  animation:ts-breath 6s var(--ts-ease-natural) infinite;
}
.grovyn-pdp .pdp-bottle-label{
  position:absolute;
  inset:38% 26% auto 26%;
  text-align:center;
  font-family:var(--ts-font-display-en);
  font-style:italic; color:rgba(238,205,194,.7);
  font-size:9px; letter-spacing:.18em;
}
.grovyn-pdp .pdp-bottle-label strong{
  display:block;
  font-family:var(--ts-font-serif-zh); font-style:normal;
  color:var(--ts-cream); font-weight:500;
  font-size:13px; letter-spacing:.04em; margin:4px 0;
}

/* ===== STORY SECTIONS ===== */
.grovyn-pdp .pdp-story{ padding:var(--ts-sp-8) var(--ts-sp-4) }
.grovyn-pdp .pdp-story-inner{ max-width:1100px; margin:0 auto }
.grovyn-pdp .pdp-story-eyebrow{
  display:block;
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ts-forest); margin-bottom:var(--ts-sp-3);
}
.grovyn-pdp .pdp-story h2{
  font-family:var(--ts-font-serif-zh);
  font-size:clamp(36px,5.5vw,64px);
  font-weight:500; line-height:1.15; letter-spacing:-.02em;
  margin:0 0 var(--ts-sp-4);
  text-wrap:balance; max-width:880px;
}
.grovyn-pdp .pdp-story h2 em{
  font-style:normal; font-family:var(--ts-font-display-en);
  font-weight:400; color:var(--ts-forest);
}
.grovyn-pdp .pdp-story p{ max-width:640px; font-size:17px; line-height:1.85 }
.grovyn-pdp .pdp-story.alt-dark{
  background:var(--ts-navy); color:var(--ts-cream);
}
.grovyn-pdp .pdp-story.alt-dark h2 em{ color:var(--ts-peach) }
.grovyn-pdp .pdp-story.alt-dark p{ color:rgba(238,234,231,.78) }
.grovyn-pdp .pdp-story.alt-dark .pdp-story-eyebrow{ color:var(--ts-peach) }
.grovyn-pdp .pdp-story.alt-warm{ background:var(--ts-warm) }

/* split layout */
.grovyn-pdp .pdp-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--ts-sp-6); align-items:center;
}
.grovyn-pdp .pdp-split-flip > div:first-child{ order:2 }
.grovyn-pdp .pdp-image-block{
  position:relative;
  aspect-ratio:4/5;
  border-radius:var(--ts-radius-xl);
  overflow:hidden;
}
.grovyn-pdp .pdp-image-mossroom{
  background:radial-gradient(ellipse at 50% 30%, var(--ts-moss) 0%, var(--ts-forest) 50%, var(--ts-forest-deep) 100%);
}
.grovyn-pdp .pdp-image-canopy{
  background:linear-gradient(160deg, var(--ts-forest-deep), var(--ts-navy));
}
.grovyn-pdp .pdp-image-canopy::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(238,205,194,.3), transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(238,231,141,.15), transparent 50%);
}
.grovyn-pdp .pdp-image-mist{
  background:linear-gradient(180deg, var(--ts-cream), var(--ts-warm) 50%, var(--ts-moss));
}
.grovyn-pdp .pdp-image-mist::after{
  content:""; position:absolute; inset:30% 0 0 0;
  background:repeating-linear-gradient(180deg,
    transparent 0, transparent 8px,
    rgba(40,44,60,.04) 9px, transparent 10px);
}
.grovyn-pdp .pdp-image-caption{
  position:absolute; inset:auto 0 0 0;
  padding:var(--ts-sp-3) var(--ts-sp-4);
  background:linear-gradient(180deg, transparent, rgba(40,44,60,.7));
  color:var(--ts-cream);
  font-family:var(--ts-font-mono); font-size:11px; letter-spacing:.14em;
}

/* ===== SCIENCE GRID ===== */
.grovyn-pdp .pdp-science{
  padding:var(--ts-sp-8) var(--ts-sp-4);
  background:var(--ts-navy);
  color:var(--ts-cream);
}
.grovyn-pdp .pdp-science-inner,
.grovyn-pdp .pdp-section-head{ max-width:1280px; margin:0 auto var(--ts-sp-5); }
.grovyn-pdp .pdp-science-head{ max-width:880px; margin:0 0 var(--ts-sp-6) }
.grovyn-pdp .pdp-science-head h2,
.grovyn-pdp .pdp-science .pdp-section-head h2{
  font-family:var(--ts-font-serif-zh);
  font-size:clamp(32px,4.5vw,52px);
  font-weight:500; line-height:1.2; letter-spacing:-.01em;
  margin:0 0 var(--ts-sp-3);
}
.grovyn-pdp .pdp-science-head p{ font-size:16px; color:rgba(238,234,231,.72); max-width:640px }

.grovyn-pdp .pdp-science-grid{
  display:grid; gap:var(--ts-sp-5);
  grid-template-columns:1fr 1fr;
  max-width:1280px; margin:0 auto;
  align-items:center;
}
.grovyn-pdp .pdp-science-stat{
  padding:var(--ts-sp-5);
  background:rgba(238,234,231,.04);
  border:1px solid rgba(238,234,231,.08);
  border-radius:var(--ts-radius-lg);
  text-align:center;
}
.grovyn-pdp .pdp-science-stat .pdp-stat-label{
  display:block; margin-top:var(--ts-sp-3);
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ts-peach);
}
.grovyn-pdp [data-pdp-counter]{
  font-family:var(--ts-font-display-en);
  font-size:clamp(48px,7vw,88px);
  font-weight:500; color:var(--ts-peach);
  letter-spacing:-.02em; line-height:1;
}
.grovyn-pdp .pdp-science-copy p{
  font-size:16px; line-height:1.85;
  color:rgba(238,234,231,.78);
  max-width:520px;
}

.grovyn-pdp .pdp-formula-grid{
  display:grid; gap:var(--ts-sp-3);
  grid-template-columns:repeat(4, 1fr);
}
.grovyn-pdp .pdp-formula{
  position:relative;
  padding:var(--ts-sp-5) var(--ts-sp-4);
  background:rgba(238,234,231,.04);
  border:1px solid rgba(238,234,231,.08);
  border-radius:var(--ts-radius-lg);
  transition:background-color var(--ts-dur-base) var(--ts-ease-natural),
             transform var(--ts-dur-base) var(--ts-ease-natural);
}
.grovyn-pdp .pdp-formula:hover{
  background:rgba(238,234,231,.07);
  transform:translateY(-2px);
}
.grovyn-pdp .pdp-formula-num{
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.14em;
  color:var(--ts-peach); margin-bottom:var(--ts-sp-3);
}
.grovyn-pdp .pdp-formula-glyph{
  width:48px; height:48px; border-radius:50%;
  margin-bottom:var(--ts-sp-3);
  display:grid; place-items:center;
}
.grovyn-pdp .pdp-formula-glyph svg{ stroke:var(--ts-cream); }
.grovyn-pdp .pdp-formula-1 .pdp-formula-glyph{ background:rgba(73,84,52,.4); }
.grovyn-pdp .pdp-formula-2 .pdp-formula-glyph{ background:rgba(163,172,153,.25); }
.grovyn-pdp .pdp-formula-3 .pdp-formula-glyph{ background:rgba(238,205,194,.18); }
.grovyn-pdp .pdp-formula-4 .pdp-formula-glyph{ background:rgba(238,231,141,.18); }
.grovyn-pdp .pdp-formula h4{
  font-family:var(--ts-font-serif-zh);
  font-size:22px; font-weight:500; line-height:1.3;
  margin:0 0 var(--ts-sp-2); color:var(--ts-cream);
}
.grovyn-pdp .pdp-formula p{
  margin:0 0 var(--ts-sp-3);
  font-size:14px; line-height:1.7;
  color:rgba(238,234,231,.7);
}
.grovyn-pdp .pdp-formula-data{
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.04em;
  color:var(--ts-peach);
  border-top:1px solid rgba(238,234,231,.12);
  padding-top:var(--ts-sp-2);
  display:flex; justify-content:space-between;
}

/* ===== SCENARIO ===== */
.grovyn-pdp .pdp-scenarios{ padding:var(--ts-sp-8) var(--ts-sp-4) }
.grovyn-pdp .pdp-scenarios-inner{ max-width:1280px; margin:0 auto }
.grovyn-pdp .pdp-scenarios h2{
  font-family:var(--ts-font-serif-zh);
  font-size:clamp(32px,4.5vw,52px);
  font-weight:500; line-height:1.2; letter-spacing:-.01em;
  margin:0 0 var(--ts-sp-6); max-width:680px;
}
.grovyn-pdp .pdp-scenarios-grid,
.grovyn-pdp .pdp-scenario-grid{
  display:grid; gap:var(--ts-sp-4);
  grid-template-columns:repeat(3,1fr);
  max-width:1280px; margin:0 auto;
}
.grovyn-pdp .pdp-scenario{
  background:var(--ts-cream);
  border:1px solid rgba(40,44,60,.06);
  border-radius:var(--ts-radius-lg);
  overflow:hidden;
  padding:var(--ts-sp-5) var(--ts-sp-4);
  transition:transform var(--ts-dur-base) var(--ts-ease-natural),
             box-shadow var(--ts-dur-base) var(--ts-ease-natural);
}
.grovyn-pdp .pdp-scenario:hover{ transform:translateY(-2px); box-shadow:var(--ts-shadow-md) }
.grovyn-pdp .pdp-scenario-img{
  aspect-ratio:5/3;
  background:linear-gradient(160deg, var(--ts-warm), var(--ts-moss));
  position:relative;
}
.grovyn-pdp .pdp-scenario:nth-child(2) .pdp-scenario-img{
  background:linear-gradient(160deg, var(--ts-navy), var(--ts-forest));
}
.grovyn-pdp .pdp-scenario:nth-child(3) .pdp-scenario-img{
  background:linear-gradient(160deg, var(--ts-peach), var(--ts-warm));
}
.grovyn-pdp .pdp-scenario-img::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 70%, rgba(255,255,255,.15), transparent 60%);
}
.grovyn-pdp .pdp-scenario-body{ padding:var(--ts-sp-4) var(--ts-sp-4) var(--ts-sp-5) }
.grovyn-pdp .pdp-scenario-body small,
.grovyn-pdp .pdp-scenario-num{
  font-family:var(--ts-font-mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ts-forest); margin-bottom:var(--ts-sp-2); display:block;
}
.grovyn-pdp .pdp-scenario-body h4,
.grovyn-pdp .pdp-scenario h3{
  font-family:var(--ts-font-serif-zh);
  font-size:22px; font-weight:500; line-height:1.4;
  margin:0 0 var(--ts-sp-2);
}
.grovyn-pdp .pdp-scenario-body p,
.grovyn-pdp .pdp-scenario p{
  margin:0; font-size:14.5px; line-height:1.7;
  color:rgba(40,44,60,.75);
}

/* ===== SPEC SELECTOR (sticky CTA section) ===== */
.grovyn-pdp .pdp-spec{
  background:var(--ts-cream);
  padding:var(--ts-sp-8) var(--ts-sp-4);
  border-top:1px solid rgba(40,44,60,.05);
}
.grovyn-pdp .pdp-spec-inner,
.grovyn-pdp .pdp-spec-grid{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.1fr 1fr;
  gap:var(--ts-sp-6); align-items:start;
}
.grovyn-pdp .pdp-spec-visual,
.grovyn-pdp .pdp-spec-stuck{
  position:sticky; top:120px;
}
.grovyn-pdp .pdp-spec-stuck h2{
  font-family:var(--ts-font-serif-zh);
  font-size:clamp(28px,3.5vw,40px);
  font-weight:500; line-height:1.2; letter-spacing:-.01em;
  margin:0 0 var(--ts-sp-3);
}
.grovyn-pdp .pdp-spec-note{
  font-family:var(--ts-font-mono);
  font-size:12px; letter-spacing:.06em;
  color:rgba(40,44,60,.6);
}
.grovyn-pdp .pdp-spec-visual{
  aspect-ratio:4/5;
  background:linear-gradient(180deg, var(--ts-warm), var(--ts-cream));
  border-radius:var(--ts-radius-xl);
  display:grid; place-items:center;
  overflow:hidden;
}
.grovyn-pdp .pdp-spec-visual .pdp-bottle{ width:55%; box-shadow:0 30px 60px rgba(40,44,60,.2),inset 0 -20px 40px rgba(0,0,0,.3),inset 6px 0 20px rgba(255,255,255,.06),inset -6px 0 20px rgba(0,0,0,.2); }

.grovyn-pdp .pdp-spec-form{ padding-top:var(--ts-sp-3) }
.grovyn-pdp .pdp-spec-form .pdp-eyebrow{
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ts-forest); margin-bottom:var(--ts-sp-2);
}
.grovyn-pdp .pdp-spec-form h2{
  font-family:var(--ts-font-serif-zh);
  font-size:clamp(28px,3.5vw,40px);
  font-weight:500; line-height:1.2; letter-spacing:-.01em;
  margin:0 0 var(--ts-sp-2);
}
.grovyn-pdp .pdp-price{
  display:flex; align-items:baseline; gap:var(--ts-sp-2);
  margin:0 0 var(--ts-sp-5);
  padding-bottom:var(--ts-sp-4);
  border-bottom:1px solid rgba(40,44,60,.08);
}
.grovyn-pdp .pdp-price strong{
  font-family:var(--ts-font-serif-zh);
  font-size:32px; font-weight:500;
  letter-spacing:.02em;
}
.grovyn-pdp .pdp-price-from{ color:rgba(40,44,60,.5); font-size:13px }
.grovyn-pdp .pdp-price-mono{
  font-family:var(--ts-font-mono); font-size:11px;
  color:var(--ts-forest); letter-spacing:.08em;
  margin-left:auto;
}

.grovyn-pdp .pdp-field{ margin-bottom:var(--ts-sp-5) }
.grovyn-pdp .pdp-field-head{
  display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:var(--ts-sp-2);
}
.grovyn-pdp .pdp-field-head h5{
  margin:0; font-size:14px; font-weight:500;
  font-family:var(--ts-font-mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ts-navy);
}
.grovyn-pdp .pdp-field-head .pdp-selected{
  font-family:var(--ts-font-serif-zh);
  font-size:15px; color:var(--ts-forest);
}

.grovyn-pdp .pdp-options{ display:flex; flex-wrap:wrap; gap:8px }

/* size / qty as pill */
.grovyn-pdp .pdp-opt{
  position:relative;
  padding:14px 22px;
  background:transparent;
  border:1px solid rgba(40,44,60,.15);
  border-radius:9999px;
  font-size:14px;
  cursor:pointer;
  transition:border-color var(--ts-dur-quick) var(--ts-ease-standard),
             background-color var(--ts-dur-quick) var(--ts-ease-standard);
}
.grovyn-pdp .pdp-opt:hover{ border-color:var(--ts-forest) }
.grovyn-pdp .pdp-opt[data-selected="true"]{
  background:var(--ts-navy); color:var(--ts-cream); border-color:var(--ts-navy);
}
.grovyn-pdp .pdp-opt small{
  display:block; font-family:var(--ts-font-mono); font-size:10px;
  color:rgba(40,44,60,.5); margin-top:2px; letter-spacing:.04em;
}
.grovyn-pdp .pdp-opt[data-selected="true"] small{ color:rgba(238,234,231,.6) }

/* ===== WC variation radios（套用 .pdp-opt 風格） ===== */
.grovyn-pdp .pdp-variations{
  border:0; margin:0 0 var(--ts-sp-5); padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.grovyn-pdp .pdp-variations-legend{
  width:100%;
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ts-navy);
  margin:0 0 var(--ts-sp-2);
  padding:0;
}
.grovyn-pdp .pdp-variation-label{
  position:relative;
  cursor:pointer;
  display:inline-flex;
}
.grovyn-pdp .pdp-variation-label input[type="radio"]{
  position:absolute; opacity:0; pointer-events:none;
}
.grovyn-pdp .pdp-variation-content{
  display:inline-flex; flex-direction:column; align-items:flex-start;
  padding:14px 22px;
  background:transparent;
  border:1px solid rgba(40,44,60,.15);
  border-radius:var(--ts-radius-md);
  font-size:14px;
  line-height:1.4;
  transition:border-color var(--ts-dur-quick) var(--ts-ease-standard),
             background-color var(--ts-dur-quick) var(--ts-ease-standard),
             color var(--ts-dur-quick) var(--ts-ease-standard);
}
.grovyn-pdp .pdp-variation-label:hover .pdp-variation-content{ border-color:var(--ts-forest) }
.grovyn-pdp .pdp-variation-label input[type="radio"]:checked + .pdp-variation-content{
  background:var(--ts-navy); color:var(--ts-cream); border-color:var(--ts-navy);
}
.grovyn-pdp .pdp-variation-content strong{
  font-family:var(--ts-font-serif-zh);
  font-weight:500; font-size:15px; margin-bottom:2px;
}
.grovyn-pdp .pdp-variation-desc{
  font-family:var(--ts-font-sans-zh);
  font-weight:400; font-size:12px; margin-left:6px;
  color:rgba(40,44,60,.55);
}
.grovyn-pdp .pdp-variation-label input[type="radio"]:checked + .pdp-variation-content .pdp-variation-desc{
  color:rgba(238,234,231,.65);
}
.grovyn-pdp .pdp-variation-price{
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.06em;
  color:rgba(40,44,60,.6);
}
.grovyn-pdp .pdp-variation-label input[type="radio"]:checked + .pdp-variation-content .pdp-variation-price{
  color:rgba(238,234,231,.7);
}

/* color/variant cards */
.grovyn-pdp .pdp-variants{
  display:grid; gap:var(--ts-sp-2);
  grid-template-columns:repeat(2, 1fr);
}
.grovyn-pdp .pdp-variant{
  position:relative;
  display:grid; grid-template-columns:44px 1fr; gap:14px; align-items:center;
  padding:14px 16px;
  background:var(--ts-cream);
  border:1px solid rgba(40,44,60,.12);
  border-radius:var(--ts-radius-md);
  cursor:pointer;
  text-align:left;
  transition:border-color var(--ts-dur-quick) var(--ts-ease-standard),
             background-color var(--ts-dur-quick) var(--ts-ease-standard);
}
.grovyn-pdp .pdp-variant:hover{ border-color:var(--ts-forest) }
.grovyn-pdp .pdp-variant[data-selected="true"]{
  border-color:var(--ts-navy);
  background:var(--ts-warm);
  box-shadow:0 0 0 1px var(--ts-navy);
}
.grovyn-pdp .pdp-variant-swatch{
  width:44px; height:44px; border-radius:50%; position:relative;
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.15);
}
.grovyn-pdp .pdp-variant-swatch::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 50%);
  border-radius:50%;
}
.grovyn-pdp .pdp-variant-1 .pdp-variant-swatch{ background:linear-gradient(160deg, var(--ts-forest), var(--ts-forest-deep)) }
.grovyn-pdp .pdp-variant-2 .pdp-variant-swatch{ background:linear-gradient(160deg, var(--ts-moss), var(--ts-forest)) }
.grovyn-pdp .pdp-variant-3 .pdp-variant-swatch{ background:linear-gradient(160deg, var(--ts-navy), #1f2230) }
.grovyn-pdp .pdp-variant-4 .pdp-variant-swatch{ background:linear-gradient(160deg, var(--ts-peach), #b88474) }
.grovyn-pdp .pdp-variant-meta strong{
  display:block; font-family:var(--ts-font-serif-zh);
  font-size:15.5px; font-weight:500; margin-bottom:2px;
}
.grovyn-pdp .pdp-variant-meta small{
  font-size:12.5px; color:rgba(40,44,60,.6); line-height:1.5;
}

/* qty stepper */
.grovyn-pdp .pdp-qty{
  display:inline-flex; align-items:center;
  background:var(--ts-cream);
  border:1px solid rgba(40,44,60,.15);
  border-radius:9999px;
  overflow:hidden;
}
.grovyn-pdp .pdp-qty button{
  width:42px; height:42px;
  font-size:18px; line-height:1;
  transition:background-color var(--ts-dur-quick) var(--ts-ease-standard);
}
.grovyn-pdp .pdp-qty button:hover{ background:rgba(40,44,60,.04) }
.grovyn-pdp .pdp-qty span{
  width:48px; text-align:center;
  font-family:var(--ts-font-mono);
  font-size:15px;
}

/* CTA */
.grovyn-pdp .pdp-add{
  margin-top:var(--ts-sp-5);
  display:grid; gap:var(--ts-sp-2);
}
.grovyn-pdp .pdp-add-detail{
  font-size:13px; color:rgba(40,44,60,.6);
  display:flex; gap:var(--ts-sp-3); flex-wrap:wrap;
  font-family:var(--ts-font-mono); letter-spacing:.06em;
}
.grovyn-pdp .pdp-add-detail span{ display:inline-flex; align-items:center; gap:6px }
.grovyn-pdp .pdp-add-detail svg{ flex-shrink:0 }

/* PDP quantity selector */
.grovyn-pdp .pdp-qty-row{
  display:flex; align-items:center; gap:var(--ts-sp-3);
  margin-top:var(--ts-sp-3);
}
.grovyn-pdp .pdp-qty-label{
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ts-forest);
}
.grovyn-pdp .pdp-qty{
  display:inline-flex; align-items:center;
  background:var(--ts-cream);
  border:1px solid rgba(40,44,60,.15);
  border-radius:9999px;
  overflow:hidden;
}
.grovyn-pdp .pdp-qty-btn{
  width:38px; height:38px;
  font-size:16px; line-height:1; color:var(--ts-navy);
  background:transparent; border:none; cursor:pointer;
  transition:background-color 180ms ease;
}
.grovyn-pdp .pdp-qty-btn:hover{ background:rgba(40,44,60,.05); }
.grovyn-pdp .pdp-qty-input{
  width:48px; text-align:center;
  font-family:var(--ts-font-mono); font-size:14px;
  background:transparent; border:none; color:var(--ts-navy);
  -moz-appearance:textfield;
}
.grovyn-pdp .pdp-qty-input::-webkit-outer-spin-button,
.grovyn-pdp .pdp-qty-input::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}
.grovyn-pdp .pdp-qty-input:focus{ outline:none; }

/* PDP add-to-cart row + button */
.grovyn-pdp .pdp-add-cart-row{
  display:flex; align-items:center; gap:var(--ts-sp-4);
  flex-wrap:wrap;
  margin-top:var(--ts-sp-4);
}
.grovyn-pdp .pdp-price-display{
  display:flex; flex-direction:column;
  font-family:var(--ts-font-serif-zh);
  font-size:28px; font-weight:500; color:var(--ts-ink);
  letter-spacing:.02em;
  line-height:1.1;
}
.grovyn-pdp .pdp-price-display small{
  font-family:var(--ts-font-mono);
  font-size:11px; letter-spacing:.08em;
  color:var(--ts-forest);
  margin-top:4px;
}
.grovyn-pdp .pdp-price-detail{
  font-variant-numeric:tabular-nums;
  color:rgba(40,44,60,.55) !important;
}
.grovyn-pdp .pdp-add-cart-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  padding:16px 36px;
  background:var(--ts-navy); color:var(--ts-cream);
  border:0; border-radius:9999px;
  font-family:var(--ts-font-sans-zh);
  font-size:15.5px; font-weight:500; letter-spacing:.04em;
  cursor:pointer;
  overflow:hidden;
  transition:transform var(--ts-dur-quick) var(--ts-ease-standard),
             background-color var(--ts-dur-base) var(--ts-ease-natural);
}
.grovyn-pdp .pdp-add-cart-btn:hover{
  background:var(--ts-forest);
  transform:translateY(-1px);
}
.grovyn-pdp .pdp-add-cart-btn.is-firing{
  animation:pdp-fire 1.2s var(--ts-ease-natural);
}
.grovyn-pdp .pdp-add-cart-fx{
  position:absolute; inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(238,205,194,.4), transparent 60%);
  opacity:0; pointer-events:none;
  transition:opacity var(--ts-dur-base) var(--ts-ease-natural);
}
.grovyn-pdp .pdp-add-cart-btn.is-firing .pdp-add-cart-fx{ opacity:1 }
.grovyn-pdp .pdp-add-cart-btn--oos,
.grovyn-pdp .pdp-add-cart-btn--oos:hover{
  opacity:.5; cursor:not-allowed; transform:none;
  background:var(--ts-navy);
}
@keyframes pdp-fire{
  0%{ transform:scale(1) }
  20%{ transform:scale(.96) }
  60%{ transform:scale(1.03) }
  100%{ transform:scale(1) }
}

/* Sticky bottom bar */
.grovyn-pdp .pdp-sticky-bar{
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(238,234,231,.92);
  backdrop-filter:saturate(1.4) blur(20px);
  -webkit-backdrop-filter:saturate(1.4) blur(20px);
  border-top:1px solid rgba(40,44,60,.08);
  padding:14px var(--ts-sp-4);
  display:flex; align-items:center; gap:var(--ts-sp-3);
  transform:translateY(120%);
  transition:transform var(--ts-dur-breath) var(--ts-ease-natural);
  z-index:40;
}
.grovyn-pdp .pdp-sticky-bar[data-on="true"]{ transform:translateY(0) }
.grovyn-pdp .pdp-sticky-inner{
  max-width:1280px; margin:0 auto;
  width:100%;
  display:flex; align-items:center; gap:var(--ts-sp-3);
}
.grovyn-pdp .pdp-sticky-bar-info{ flex:1 }
.grovyn-pdp .pdp-sticky-bar-info strong,
.grovyn-pdp .pdp-sticky-title{
  display:block; font-family:var(--ts-font-serif-zh);
  font-size:15px; line-height:1.3;
  flex:1;
}
.grovyn-pdp .pdp-sticky-bar-info small,
.grovyn-pdp .pdp-sticky-price{
  font-family:var(--ts-font-mono);
  font-size:13px; color:var(--ts-forest); letter-spacing:.06em;
}
.grovyn-pdp .pdp-sticky-cta{
  padding:10px 22px;
  background:var(--ts-navy); color:var(--ts-cream);
  border-radius:9999px;
  font-size:13.5px; font-weight:500; letter-spacing:.04em;
  transition:background-color var(--ts-dur-base) var(--ts-ease-natural);
}
.grovyn-pdp .pdp-sticky-cta:hover{ background:var(--ts-forest) }

/* ===== TRUST STRIP ===== */
.grovyn-pdp .pdp-trust{
  background:var(--ts-warm);
  padding:var(--ts-sp-6) var(--ts-sp-4);
}
.grovyn-pdp .pdp-trust-inner,
.grovyn-pdp .pdp-trust-grid{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:var(--ts-sp-5);
}
.grovyn-pdp .pdp-trust-col p{
  margin:0; font-size:13.5px; color:rgba(40,44,60,.65); line-height:1.6;
}
.grovyn-pdp .pdp-trust-col{
  padding:var(--ts-sp-3) 0;
}
.grovyn-pdp .pdp-trust-eyebrow{
  font-family:var(--ts-font-mono);
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ts-forest);
  margin-bottom:var(--ts-sp-2);
}
.grovyn-pdp .pdp-trust-col h4{
  font-family:var(--ts-font-serif-zh);
  font-size:20px; font-weight:500; line-height:1.3;
  margin:0 0 var(--ts-sp-2);
  color:var(--ts-ink);
}

/* fade-on-scroll：mobile 直接顯示（避免空白感、改善 LCP） */
.grovyn-pdp .fade-up{ opacity:0; transform:translateY(20px); transition:opacity 600ms var(--ts-ease-natural), transform 600ms var(--ts-ease-natural) }
.grovyn-pdp .fade-up[data-shown="true"]{ opacity:1; transform:translateY(0) }
@media(max-width:768px){
  .grovyn-pdp .fade-up{ opacity:1; transform:none }
}

/* RWD */
@media(max-width:1024px){
  .grovyn-pdp .pdp-hero-grid{ grid-template-columns:1fr; gap:var(--ts-sp-5); padding-top:140px }
  .grovyn-pdp .pdp-hero-visual{ max-width:480px; margin:0 auto }
  .grovyn-pdp .pdp-split{ grid-template-columns:1fr; gap:var(--ts-sp-5) }
  .grovyn-pdp .pdp-split-flip > div:first-child{ order:0 }
  .grovyn-pdp .pdp-science-grid{ grid-template-columns:1fr }
  .grovyn-pdp .pdp-formula-grid{ grid-template-columns:1fr 1fr }
  .grovyn-pdp .pdp-scenarios-grid,
  .grovyn-pdp .pdp-scenario-grid{ grid-template-columns:1fr }
  .grovyn-pdp .pdp-spec-inner,
  .grovyn-pdp .pdp-spec-grid{ grid-template-columns:1fr; gap:var(--ts-sp-5) }
  .grovyn-pdp .pdp-spec-visual{ position:static; max-width:480px; margin:0 auto }
  .grovyn-pdp .pdp-spec-stuck{ position:static }
  .grovyn-pdp .pdp-trust-inner,
  .grovyn-pdp .pdp-trust-grid{ grid-template-columns:1fr 1fr }
}
@media(max-width:640px){
  .grovyn-pdp .pdp-formula-grid{ grid-template-columns:1fr }
  .grovyn-pdp .pdp-variants{ grid-template-columns:1fr }
  .grovyn-pdp .pdp-trust-inner,
  .grovyn-pdp .pdp-trust-grid{ grid-template-columns:1fr }
  .grovyn-pdp .pdp-meta{ gap:var(--ts-sp-3) }
  .grovyn-pdp .pdp-add-cart-row{ gap:var(--ts-sp-3) }
  .grovyn-pdp .pdp-sticky-title{ font-size:13px }
  .grovyn-pdp .pdp-sticky-cta{ padding:10px 16px; font-size:12.5px }
}
@media(prefers-reduced-motion:reduce){
  .grovyn-pdp *,
  .grovyn-pdp *::before,
  .grovyn-pdp *::after{ animation-duration:.01ms!important; transition-duration:.01ms!important }
}


/* 修正：避免被 grovyn-overrides 全域 h1-h4 { navy } 遮色 */
.grovyn-pdp .pdp-hero-text h1 { color: var(--ts-cream); }
.grovyn-pdp .pdp-story h2 { color: inherit; }
.grovyn-pdp .pdp-story.alt-dark h2 { color: var(--ts-cream); }
.grovyn-pdp .pdp-science h2 { color: var(--ts-cream); }
.grovyn-pdp .pdp-scenarios h2 { color: var(--ts-ink); }
.grovyn-pdp .pdp-scenario h3 { color: var(--ts-ink); }
.grovyn-pdp .pdp-spec h2 { color: var(--ts-ink); }
.grovyn-pdp .pdp-trust h4 { color: var(--ts-ink); }