/* ==========================================================================
   元鴻茶間 — 商品詳情頁樣式
   來源：客戶提供的銷售頁原稿（_工作素材/客戶提供/20260805-銷售頁/）
   原稿為單檔內嵌 CSS，此處抽成共用檔供六款商品頁引用，視覺未更動。
   ========================================================================== */

:root{
  --green:#445f4c;
  --green-dark:#2f4337;
  --yellow:#ffef85;
  --amber:#a9744f;
  --linen:#bfaf78;
  --cream:#faf6ec;
  --cream-2:#f1ead9;
  --ink:#231f1a;
  --radius:18px;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Noto Sans TC', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.en{font-family:'Cinzel', serif; letter-spacing:.08em;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
section{padding:96px 0;}
h2.section-title{
  font-size:clamp(28px,4vw,40px);
  font-weight:900;
  color:var(--green-dark);
  text-align:center;
}
.section-kicker{
  text-align:center;
  font-family:'Cinzel',serif;
  letter-spacing:.3em;
  font-size:12px;
  color:var(--amber);
  text-transform:uppercase;
  margin-bottom:10px;
}
.section-sub{
  text-align:center;
  color:#6b6255;
  max-width:560px;
  margin:14px auto 0;
  font-size:15px;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 30px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.05em;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:.25s ease;
}
.btn-primary{ background:var(--yellow); color:var(--green-dark); }
.btn-primary:hover{ background:#fff5b0; transform:translateY(-2px); }
.btn-dark{ background:var(--green-dark); color:var(--cream);}
.btn-dark:hover{ background:var(--green); }

/* NAV */
header{ position:relative; background:var(--green-dark); padding:16px 0; }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; gap:12px; color:#fff; }
.logo svg{ width:34px; height:22px; }
.logo .logo-text{ line-height:1.1; }
.logo .logo-text .zh{ font-size:17px; font-weight:700; letter-spacing:.05em; }
.logo .logo-text .en{ font-size:9px; opacity:.8; }
.navlinks{ display:flex; gap:32px; font-size:14px; color:#f2ede1; }
.navlinks a{ opacity:.9; }
.navlinks a:hover, .navlinks a.active{ opacity:1; color:var(--yellow); }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

/* PRODUCT HERO：雲霧茶山氛圍 */
.product-hero{
  position:relative;
  padding:60px 0 70px;
  background:
    radial-gradient(circle at 85% 10%, rgba(255,239,133,.1), transparent 45%),
    linear-gradient(180deg, var(--green-dark) 0%, #253a2c 100%);
  overflow:hidden;
  color:#fff;
}
.cloud-layer{
  position:absolute;
  border-radius:50%;
  filter:blur(14px);
  background:radial-gradient(ellipse at center, rgba(255,255,255,.95), rgba(255,255,255,0) 68%);
}
.product-hero .cloud-1{ top:-10%; left:-15%; width:70%; height:60%; opacity:.22; }
.product-hero .cloud-3{ bottom:-15%; right:-10%; width:80%; height:60%; opacity:.16; }
.leaf-accent{ position:absolute; opacity:.5; pointer-events:none; }
.breadcrumb{ font-size:12.5px; color:#c9c2b0; margin-bottom:36px; }
.breadcrumb a:hover{ color:var(--yellow); }
.product-hero-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;
}
.product-visual{
  position:relative;
  aspect-ratio:1/1;
  border-radius:24px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.06), transparent 70%);
}
.product-visual .tin{
  position:relative; z-index:2;
  width:56%;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.35));
}
.product-visual .placeholder-note{
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  z-index:3; font-size:11px; color:rgba(255,255,255,.6); letter-spacing:.05em;
  background:rgba(0,0,0,.25); padding:4px 14px; border-radius:999px;
}
.product-kicker{
  font-family:'Cinzel',serif; letter-spacing:.35em; font-size:12px; color:var(--yellow);
  margin-bottom:16px;
}
.product-info h1{ font-size:clamp(28px,3.6vw,40px); font-weight:900; margin-bottom:14px; }
.product-info .tagline{ color:#e3dfd2; font-size:15.5px; margin-bottom:24px; }
.tag-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.tag-pills span{
  font-size:12.5px; font-weight:700; padding:7px 16px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#f2ede1;
}
.tag-pills span.accent{ background:rgba(255,239,133,.15); border-color:rgba(255,239,133,.4); color:var(--yellow); }
.product-price-row{ display:flex; align-items:baseline; gap:10px; margin-bottom:28px; }
.product-price-row .now{ font-family:'Cinzel',serif; font-size:34px; font-weight:700; color:#fff; }
.product-price-row .unit{ font-size:14px; color:#c9c2b0; }
.trust-badges{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:32px; }
.trust-badges .item{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:#d9d4c6; }
.trust-badges .item .dot{ width:6px; height:6px; border-radius:50%; background:var(--yellow); }

/* tea photo carousel */
.tea-gallery{ background:var(--cream-2); overflow:hidden; }
.tea-carousel{ position:relative; margin-top:20px; }
.carousel-track{
  display:flex; gap:32px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:28px 10vw 20px;
  margin:0 -24px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.carousel-track::-webkit-scrollbar{ display:none; }
.tea-photo-card{
  flex:0 0 auto;
  width:260px;
  scroll-snap-align:center;
  background:#fff;
  padding:14px 14px 26px;
  border-radius:3px;
  box-shadow:0 14px 34px rgba(68,95,76,.14);
  transform:rotate(var(--r, 0deg));
  transition:transform .3s ease, box-shadow .3s ease;
}
.tea-photo-card:hover{ transform:rotate(0deg) translateY(-6px); box-shadow:0 20px 42px rgba(68,95,76,.2); }
.tea-photo-card:nth-child(1){ --r:-2.5deg; }
.tea-photo-card:nth-child(2){ --r:1.5deg; }
.tea-photo-card:nth-child(3){ --r:-1deg; }
.tea-photo-card:nth-child(4){ --r:2deg; }
.tea-photo-card:nth-child(5){ --r:-1.8deg; }
.img-placeholder{
  position:relative;
  background:repeating-linear-gradient(135deg, #e8e0cb, #e8e0cb 14px, #ded4b8 14px, #ded4b8 28px);
  border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  border:1px dashed #c9bd9e;
}
.img-placeholder .label{
  background:rgba(255,255,255,.85);
  color:#7a7264;
  font-size:12.5px; font-weight:700;
  padding:6px 16px; border-radius:999px;
  letter-spacing:.05em;
}
.tea-photo-card .img-placeholder{ aspect-ratio:4/5; border-radius:2px; }
.tea-photo-card .caption{
  margin-top:16px; text-align:center;
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:.18em;
  color:#8a8171; text-transform:uppercase;
}
.tea-photo-card .caption .zh{
  display:block; font-family:'Noto Sans TC',sans-serif; letter-spacing:.02em;
  font-size:13px; color:#5c5648; margin-top:4px; text-transform:none;
}
.carousel-nav{
  position:absolute; top:44%; transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  background:#fff; border:1px solid #e4dcc7;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--green-dark); cursor:pointer;
  box-shadow:0 8px 20px rgba(68,95,76,.15);
  z-index:2; transition:.2s ease;
}
.carousel-nav:hover{ background:var(--green-dark); color:#fff; }
.carousel-nav.prev{ left:6px; }
.carousel-nav.next{ right:6px; }
.carousel-counter{
  text-align:center; margin-top:6px;
  font-family:'Cinzel',serif; font-size:11px; letter-spacing:.2em; color:#a89f8c;
}

/* PRODUCT DETAILS: 3-tier layers */
.product-details{ background:var(--cream); }
.detail-layer{ max-width:820px; margin:0 auto; }
.detail-layer + .detail-layer{ margin-top:64px; padding-top:64px; border-top:1px solid #e8e0cb; }
.layer-label{
  font-family:'Cinzel',serif; letter-spacing:.3em; font-size:11.5px;
  color:var(--amber); text-align:center; margin-bottom:12px; text-transform:uppercase;
}
.detail-layer > h3{
  font-size:22px; font-weight:900; color:var(--green-dark); text-align:center; margin-bottom:22px;
}
.detail-layer > p.lead{ color:#7a7264; font-size:14.5px; text-align:center; max-width:560px; margin:0 auto 8px; }

.flavor-notes{ max-width:460px; margin:28px auto 0; display:flex; flex-direction:column; gap:14px; }
.flavor-row{ display:grid; grid-template-columns:70px 1fr 34px; align-items:center; gap:12px; }
.flavor-row .label{ font-size:12.5px; color:#6b6255; font-weight:700; }
.flavor-row .track{ height:8px; border-radius:999px; background:#ece4d2; overflow:hidden; }
.flavor-row .fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--linen), var(--amber)); }
.flavor-row .pct{ font-size:11.5px; color:#a89f8c; text-align:right; }

.brew-steps{
  display:flex; align-items:flex-start; justify-content:center;
  flex-wrap:wrap; gap:6px; margin-top:32px;
}
.brew-step{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:104px; text-align:center;
}
.brew-step .icon{
  width:54px; height:54px; border-radius:50%;
  background:#fff; border:1px solid #ece4d2;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; box-shadow:0 8px 18px rgba(68,95,76,.1);
}
.brew-step .label{ font-size:12px; color:#6b6255; line-height:1.5; }
.step-arrow{ color:#cabf9f; font-size:16px; align-self:center; padding-top:20px; }

.suits-tags{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:26px; }
.suits-item{
  background:#fff; border:1px solid #ece4d2; border-radius:999px;
  padding:11px 22px; font-size:13.5px; color:#5c5648;
}
.draft-note{ margin-top:22px; text-align:center; font-size:12px; color:#a89f8c; font-style:italic; }

/* satellite origin map */
.origin-map{ background:var(--green-dark); color:#fff; }
.origin-map .wrap{ text-align:center; }
.origin-map .section-kicker{ color:var(--yellow); }
.origin-map .section-title{ color:#fff; }
.origin-map .section-sub{ color:#c9c2b0; }
.origin-map-frame{
  margin-top:44px; border-radius:var(--radius); overflow:hidden;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.origin-map-frame iframe{ width:100%; height:420px; border:0; display:block; filter:saturate(1.05); }
.origin-map-caption{ margin-top:16px; font-size:12.5px; color:#a9a08c; }

/* related products */
.related-strip{ background:var(--cream-2); }
.related-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; margin-top:44px; }
.related-card{
  background:#fff; border:1px solid #ece4d2; border-radius:16px; overflow:hidden;
  transition:.2s ease; text-align:center;
}
.related-card:hover{ transform:translateY(-4px); box-shadow:0 12px 26px rgba(68,95,76,.12); }
.related-card .thumb{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.related-card .thumb svg{ width:42%; opacity:.9; }
.related-card .info{ padding:14px 12px 18px; }
.related-card .region{ font-size:10.5px; color:var(--amber); font-weight:700; }
.related-card .name{ font-size:13px; font-weight:700; color:var(--green-dark); margin:4px 0 6px; line-height:1.4; }
.related-card .now{ font-size:13px; font-weight:900; color:var(--green-dark); }

/* FOOTER */
footer{ background:var(--green-dark); color:#d9d4c6; padding:64px 0 28px; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px;
  padding-bottom:40px; border-bottom:1px solid rgba(250,246,236,.12);
}
.footer-logo{ display:flex; align-items:center; gap:12px; color:#fff; margin-bottom:16px; }
.footer-logo svg{ width:32px; }
.footer-desc{ font-size:13.5px; color:#b7b1a0; max-width:280px; }
.footer-col h4{ color:#fff; font-size:13.5px; letter-spacing:.1em; margin-bottom:16px; }
.footer-col a, .footer-col p{ display:block; font-size:13.5px; color:#b7b1a0; margin-bottom:10px; }
.footer-col a:hover{ color:var(--yellow); }
.footer-social{ display:flex; gap:12px; margin-top:6px; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(250,246,236,.25);
  display:flex; align-items:center; justify-content:center; font-size:13px;
}
.footer-social a:hover{ border-color:var(--yellow); color:var(--yellow); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12px; color:#8f8977; flex-wrap:wrap; gap:10px;}

@media (max-width:880px){
  .navlinks{ display:none; }
  .nav-toggle{ display:block; }
  .product-hero-grid{ grid-template-columns:1fr; }
  .related-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .tea-photo-card{ width:210px; }
  .carousel-track{ padding:24px 6vw 16px; gap:20px; }
  .carousel-nav{ width:38px; height:38px; font-size:15px; }
  .origin-map-frame iframe{ height:280px; }
}
@media (max-width:600px){
  .step-arrow{ display:none; }
  .brew-step{ width:84px; }
}
@media (max-width:560px){
  section{ padding:72px 0; }
}

/* 庫存提醒（原稿沒有此元件，依 HANDOFF 紅線第 4 條新增；色票沿用原稿變數） */
.stock-alert{
  margin:18px 0 4px; padding:12px 16px; border-radius:12px;
  background:rgba(169,116,79,.10); border:1px solid rgba(169,116,79,.30);
  font-size:13.5px; color:var(--amber); line-height:1.6;
}
.stock-alert b{ font-weight:700; }
.stock-alert span{ display:block; margin-top:4px; font-size:11.5px; color:#a89f8c; }

/* ==========================================================================
   手機版導覽展開（原稿只有 .nav-toggle 的樣式、沒有實作展開，這裡補上）
   ========================================================================== */
@media (max-width:880px){
  header nav.wrap{ position:relative; flex-wrap:wrap; }
  .nav-toggle{ order:3; margin-left:8px; }
  .navlinks{
    display:flex; flex-direction:column; gap:2px;
    position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:60;
    padding:12px; border-radius:14px;
    background:var(--green-dark); border:1px solid rgba(250,246,236,.16);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:.28s ease;
  }
  .navlinks.open{ opacity:1; visibility:visible; transform:none; }
  .navlinks a{ padding:11px 12px; border-radius:8px; font-size:14px; }
  .navlinks a:hover{ background:rgba(250,246,236,.08); }
}

/* 標誌尺寸（改用 class，避免 inline style 蓋過 media query） */
.logo-img{ height:34px; width:auto; display:block; }
.footer-logo-img{ height:38px; width:auto; display:block; margin-bottom:16px; }

@media (max-width:880px){
  /* 三個元素同一行：logo 206px 太寬會把 ☰ 擠到第二行 */
  header nav.wrap{ flex-wrap:nowrap; gap:10px; }
  .logo-img{ height:28px; }
  header .btn.btn-primary{ padding:8px 16px !important; font-size:12px !important; }
  .nav-toggle{ order:3; margin-left:auto; margin-right:0; }
}
@media (max-width:400px){
  .logo-img{ height:24px; }
  header .btn.btn-primary{ padding:7px 12px !important; font-size:11px !important; }
}

@media (max-width:880px){
  /* 觸控目標：footer 連結與電話原本 20-22px 高，手指點不準 */
  .footer-col a{ display:inline-block; padding-block:8px; margin-bottom:2px; }
  /* 輪播箭頭在手機上也要好按 */
  .carousel-nav{ width:40px; height:40px; }
}

@media (max-width:880px){
  /* 麵包屑連結原本僅 19px 高 */
  .breadcrumb a{ display:inline-block; padding-block:6px; }
}