/* ═══════════ §1.1 設計令牌（design-spec 逐字照抄）═══════════ */
:root{
  /* 基礎層：紙 */
  --color-paper:   #F7F4EA;
  --color-paper-2: #EFEADD;
  --color-paper-3: #E4DECB;
  --color-paper-4: #F2EADA;
  --color-white:   #FFFFFF;
  /* 基礎層：墨與灰階 */
  --color-ink:     #2A2C22;
  --color-ink-2:   #5A5D4E;
  --color-ink-3:   #8A8C7C;
  --color-ink-900: #742F22;
  /* 基礎層：草綠系 */
  --color-sage-100: #E3EADA;
  --color-sage-300: #A9BC9C;
  --color-sage-600: #4E6B44;
  --color-sage-700: #3B5233;
  --color-sage-800: #2E4029;
  /* 基礎層：米綠系 */
  --color-mint-100: #EDF0E1;
  --color-mint-300: #C2CBA6;
  --color-mint-600: #8A9463;
  --color-mint-700: #5C6640;
  /* 基礎層：灰階 */
  --color-gray-900: #2A2C22;
  --color-gray-700: #5A5D4E;
  --color-gray-500: #8A8C7C;
  --color-gray-300: #B3B0A0;
  --color-gray-100: #D6CFB8;
  /* 基礎層：線與焦點 */
  --color-line:        #D6CFB8;
  --color-line-strong: #8E8767;
  --color-focus:       #1F5F8B;
  --color-focus-dark:  #C2D0B6;
  /* 語義層 */
  --bg-paper:          var(--color-paper);
  --bg-card:           var(--color-paper-2);
  --bg-band:           var(--color-paper-3);
  --bg-sage:           var(--color-sage-100);
  --bg-ink:            var(--color-ink);
  --text-primary:      var(--color-ink);
  --text-secondary:    var(--color-ink-2);
  --text-muted:        var(--color-ink-3);
  --text-on-dark:      var(--color-paper-3);
  --text-on-dark-mute: var(--color-sage-300);
  --accent-sage:       var(--color-sage-600);
  --accent-sage-deep:  var(--color-sage-700);
  --seal-red:          #B21218;
  --plum:              #7A3B4B;
  --rose-bean:         #8E3B3B;
  /* 產品層（實拍圖逐像素取樣） */
  --liquid-shiyuan:      #CF4612;
  --liquid-shiyuan-lite: #FEC1AF;
  --liquid-plum:         #58081A;
  --script-plum:         #6D448D;
  --label-cream:         #F2EADA;
  --product-sy-accent:   var(--color-ink-900);
  --product-pl-accent:   var(--script-plum);
  /* 語義色 */
  --color-error:     #9E2B1F;
  --color-error-bg:  #FBEDEA;
  --color-success:   #2F6B3F;
  --color-success-bg:#EAF3EA;
  --color-clay-600:  #A6553C;
  /* §1.5 配料表色點真實色 */
  --dot-umei:      #4A3222;
  --dot-shanzha:   #B4342A;
  --dot-sangshu:   #6B1F3A;
  --dot-chenpi:    #D98A2B;
  --dot-meiguigua: #C2435B;
  --dot-guihua:    #E0B33C;
  --dot-haye:      #5E7A3A;
  --dot-luohanguo: #A8813F;
  --dot-hongxiaodou:#8E3B3B;
  --dot-chixiaodou: #A8503C;
  --dot-yimi:      #D8C48A;
  --dot-fuling:    #E0DCC8;
  --dot-qianshi:   #EFE7D2;
  --dot-hongzao:   #7E2A24;
  --dot-gancao:    #C6A96A;
  --dot-shanzhanong:#8E2A22;
  --dot-shui:      #C9D6DC;
  /* 間距刻度 */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;
  /* 圓角刻度 */
  --r-seal: 0px;
  --r-seal-frame: 2px;
  --r-btn: 3px;
  --r-input: 3px;
  --r-card: 4px;
  --r-pill: 999px;
  /* 陰影（暖棕） */
  --shadow-1: 0 1px 2px rgba(74,62,42,.06), 0 4px 12px -8px rgba(74,62,42,.14);
  --shadow-2: 0 2px 4px rgba(74,62,42,.07), 0 12px 28px -14px rgba(74,62,42,.20);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(74,62,42,.05);
  /* 字體棧（零 webfont） */
  --font-en: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-zh: "PingFang HK", "PingFang TC", "Noto Sans CJK TC", "Noto Sans TC",
             "Noto Sans HK", "Heiti TC", "Microsoft JhengHei", "微軟正黑體",
             "Hiragino Sans CNS", "Source Han Sans TC", "Noto Sans CJK HK", sans-serif;
  --font-body: var(--font-en), var(--font-zh);
  --font-cn-serif: "Songti TC", "Songti SC", "STSong", "PMingLiU", "MingLiU",
                   "Noto Serif CJK TC", "Noto Serif TC", "Source Han Serif TC", SimSun, serif;
  --font-cn-brush: "Kaiti TC", "STKaiti", "Kaiti SC", "DFKai-SB", "BiauKai",
                   "Hanzipen TC", "Songti TC", "Noto Serif CJK TC", serif;
  --font-hand: "Snell Roundhand", "Bradley Hand", "Segoe Print", "Kaiti TC",
               "DFKai-SB", "BiauKai", "Hanzipen SC", "幼圓", "YouYuan",
               "Comic Sans MS", cursive;
  --font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono",
              "Courier New", monospace;
  /* 排版比例 */
  --measure: 68ch;
  --container-max: 1200px;
  --container-pad: 20px;
  --gutter: 12px;
  --nav-h: 64px;
  --nav-h-md: 72px;
  color-scheme: only light;
}
/* ═══════════ §2.1 字體棧使用規則 ═══════════ */
html[lang="zh-Hant-HK"], [lang="zh-Hant-HK"] { font-family: var(--font-zh); }
[lang="en"] { font-family: var(--font-en); }
body { font-family: var(--font-body); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums;
       font-feature-settings: "tnum" 1; }

/* ═══════════ 基礎重置與排版 ═══════════ */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg-paper); color: var(--text-primary);
  font-size: 16px; line-height: 1.75; letter-spacing: .01em;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p { margin: 0 0 var(--space-4); }
ul, ol, dl { margin: 0; padding: 0; list-style: none; }
a { color: var(--accent-sage-deep); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: inherit;
}
.on-ink :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color: var(--color-focus-dark);
}

/* 跳過導航 */
.skip-link{
  position: absolute; left: var(--space-4); top: 10px; z-index: 200;
  background: var(--color-sage-700); color: #FFFFFF; padding: 10px 18px;
  border-radius: var(--r-btn); font-size: 14px; font-weight: 600; text-decoration: none;
  transform: translateY(-200%); transition: transform .15s ease;
}
.skip-link:focus, .skip-link:focus-visible{ transform: translateY(0); }

/* 標題階梯 §2.2 */
h1, .hero-title{
  /* 桌面端 42px，與 .hero__title-block 的 15em 配合，22 字固定折成兩行。
     線上（Linux 無 PingFang，回落 Noto Sans CJK，字寬更大）實測：
     容器 15em=630px 時 42px 為 2 行、斷在語義邊界；
     容器放寬到 736px 時 42–52px 均為單行，過長且氣勢不足。 */
  font-family: var(--font-body); font-size: clamp(28px, 3.1vw, 42px); line-height: 1.28;
  font-weight: 700; letter-spacing: -.005em; color: var(--color-ink);
  /* 中文長標題避免單字獨行（孤字）：balance 讓各行字數均衡，pretty 避免末行過短。
     不支援的瀏覽器忽略此屬性，不會破版。 */
  text-wrap: balance;
}
.h2{
  font-family: var(--font-cn-serif); font-size: 26px; line-height: 1.30;
  font-weight: 700; letter-spacing: 0; color: var(--color-ink);
  font-feature-settings: "palt" 1;
}
.h3{ font-family: var(--font-body); font-size: 20px; line-height: 1.40; font-weight: 600; color: var(--color-ink); }
.on-ink .h2, .on-ink .h3 { color: #FFFFFF; }
.body-sm { font-size: 15px; line-height: 1.70; color: var(--color-ink-2); }
.caption { font-size: 12.5px; line-height: 1.60; letter-spacing: .02em; color: var(--color-ink-2); }
.on-ink .caption, .on-ink .body-sm { color: var(--color-paper-3); }
.hand{ font-family: var(--font-hand); font-weight: 500; letter-spacing: .02em; }
.hand--eyebrow{ color: var(--color-sage-700); font-size: 19px; line-height: 1.55; }
.on-ink .hand--eyebrow, .on-ink .hand{ color: var(--color-sage-300); }
.underline{ display:block; width:min(320px,100%); height:12px; margin-top:2px; color: var(--color-sage-600); }
.underline path{ fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; }
.on-ink .underline{ color: var(--color-sage-300); }
/* 中英混排 §2.3 */
.en-pair{ font-size: .92em; letter-spacing: .01em; }
.h2-en, .en-pair{ vertical-align: baseline; }
/* 間距：任何與中文並置的英文片段都要有左間距。
   舊寫法 `.zh + .en` 依賴相鄰選擇器，但多處中文並無 .zh 類（直接包在 a/h2/span 內），
   導致間距失效、中英黏連。
   ⚠️ 用固定 px 而非 em：em 是相對元素自身字號計算，英文小字（12.5px）的 0.08em
   只有 1px，視覺上等於沒有間距。 */
.en, [lang="en"]{ margin-inline-start: 4px; }
.zh + .en, .en + .zh{ margin-inline-start: 4px; }
/* 以下場景英文不與中文並置，需歸零 */
.en-block, .en-pair.en-block{ margin-inline-start: 0; }
.ingredients .en, .steps__en, .trust__text .en{ margin-inline-start: 4px; }
.h2, .product-title__main{ font-feature-settings: "palt" 1; }
.en-block{ display:block; font-size: .92em; color: var(--color-ink-2); margin-top:6px; font-weight:400; }
.on-ink .en-block{ color: var(--color-sage-300); }
/* 產品主名層次：中文主名書法定色+粗體，英文名墨黑+細體+略小 */
.product-title__main .en{
  font-weight: 400; color: var(--color-ink); font-size: .82em;
  letter-spacing: .01em; margin-inline-start: .12em;
}
#product-plum .product-title__main .en{ color: var(--color-ink); }
.on-ink .product-title__main .en{ color: var(--color-paper-3); }
.measure{ max-width: var(--measure); }
.pull-quote{ max-width: 24em; }

/* ═══════════ §3.2 / §3.3 容器與柵格 ═══════════ */
.container{
  width:100%; max-width:var(--container-max); margin-inline:auto;
  padding-inline:var(--container-pad);
}
@media (min-width:640px){ :root{ --container-pad:24px; } }
@media (min-width:900px){ :root{ --container-pad:32px; --gutter:24px; } }
@media (min-width:1200px){ :root{ --container-pad:40px; } }
.grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gutter); }
@media (min-width:640px){ :root{ --gutter:20px; } .grid{ grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (min-width:900px){ .grid{ grid-template-columns:repeat(12,minmax(0,1fr)); } }
.span-full{ grid-column:1/-1; }
/* 移動端：所有區塊整行堆疊（design-spec §5.4）*/
.span-3, .span-2, .span-1, .span-visual, .span-text{ grid-column:1/-1; }
@media (min-width:640px){
  .span-3{ grid-column:span 3; } .span-2{ grid-column:span 6; } .span-1{ grid-column:span 6; }
  .span-visual{ grid-column:span 3; } .span-text{ grid-column:span 3; }
}
@media (min-width:900px){
  .span-visual{ grid-column:span 5; } .span-text{ grid-column:span 7; }
  .span-3{ grid-column:span 4; } .span-2{ grid-column:span 8; } .span-1{ grid-column:span 4; }
}

/* ═══════════ 區塊與間距 §3.1 ═══════════ */
.section{ padding-block: var(--space-7); position: relative; overflow: hidden; }
@media (min-width:900px){ .section{ padding-block: var(--space-8); } }
@media (min-width:1200px){ .section{ padding-block: var(--space-9); } }
.section__head{ margin-bottom: var(--space-6); }
.section__head .h2{ margin-bottom: var(--space-3); }
.section__lead{ font-size: 18px; line-height: 1.65; color: var(--color-ink-2); max-width: 56ch; }
.on-ink .section__lead{ color: var(--color-paper-3); }
.stack-sm > * + *{ margin-top: var(--space-3); }
.stack > * + *{ margin-top: var(--space-5); }

/* ═══════════ §6.1 宣紙肌理 ═══════════ */
.tex-paper{
  background-color: var(--color-paper);
  background-image:
    radial-gradient(ellipse 120% 90% at 18% 6%, rgba(227,234,218,.50), rgba(227,234,218,0) 62%),
    radial-gradient(ellipse 100% 80% at 86% 98%, rgba(207,70,18,.045), rgba(207,70,18,0) 58%),
    repeating-linear-gradient(92deg, rgba(90,74,48,.026) 0 1px, rgba(90,74,48,0) 1px 7px),
    repeating-linear-gradient(2deg,  rgba(90,74,48,.020) 0 1px, rgba(90,74,48,0) 1px 9px);
  background-repeat:no-repeat,no-repeat,repeat,repeat;
}
.tex-sage{
  background-color: var(--color-sage-100);
  background-image:
    radial-gradient(ellipse 110% 80% at 82% 4%, rgba(255,255,255,.42), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(92deg, rgba(78,107,68,.030) 0 1px, rgba(78,107,68,0) 1px 7px),
    repeating-linear-gradient(2deg,  rgba(78,107,68,.022) 0 1px, rgba(78,107,68,0) 1px 9px);
}
.tex-ink{
  background-color: var(--color-ink);
  background-image:
    radial-gradient(ellipse 120% 90% at 18% 4%, rgba(164,188,156,.10), rgba(164,188,156,0) 62%),
    repeating-linear-gradient(92deg, rgba(255,255,255,.022) 0 1px, rgba(255,255,255,0) 1px 8px),
    repeating-linear-gradient(2deg,  rgba(255,255,255,.016) 0 1px, rgba(255,255,255,0) 1px 10px);
  color: var(--color-paper-3);
}
#product-shiyuan{ border-top: 3px solid rgba(207,70,18,.45); }
#product-plum{ border-top: 3px solid rgba(88,8,26,.45); }
#contact{ border-top: 1px solid rgba(178,18,24,.55); }

/* ═══════════ §4.1 按鈕 ═══════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:48px; padding:12px 24px;
  font-family:var(--font-body); font-size:16px; line-height:1.2; font-weight:600;
  border-radius:var(--r-btn); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; text-align:center;
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn--primary{ background:var(--color-sage-700); color:#FFFFFF; }
.btn--primary:hover{ background:var(--color-sage-800); }
.btn--primary:active{ background:#26361F; }
.btn--secondary{ background:transparent; color:var(--color-sage-700); border-color:var(--color-sage-600); }
.btn--secondary:hover{ background:rgba(78,107,68,.08); border-color:var(--color-sage-700); }
/* 按鈕內的英文：默認跟隨按鈕文字色。
   修正前英文繼承正文 --color-ink-2（墨灰），壓在深綠按鈕上對比度僅 1.27:1（標準要求 4.5:1），
   在手機端尤其明顯發灰、難以辨認。 */
.btn .en{ color:inherit; opacity:.92; }
.btn--secondary:active{ background:rgba(78,107,68,.14); }
.on-ink .btn--secondary{ color:var(--color-sage-300); border-color:var(--color-sage-300); }
.on-ink .btn--secondary:hover{ background:rgba(169,188,156,.12); border-color:#FFFFFF; color:#FFFFFF; }
.btn--text{
  min-height:44px; padding:6px 2px; background:none; border:0;
  color:var(--color-sage-700); font-weight:600; text-decoration:none;
  position:relative; display:inline-flex; align-items:center; gap:6px;
}
.btn--text::after{
  content:""; position:absolute; left:0; right:24px; bottom:6px; height:2px;
  background:var(--color-sage-600); border-radius:2px;
}
.btn--text:hover{ color:var(--color-sage-800); }
.btn--text:hover::after{ background:var(--color-sage-700); }
.on-ink .btn--text{ color:var(--color-sage-300); }
.on-ink .btn--text::after{ background:var(--color-sage-300); }
.btn .arrow{ font-family:var(--font-en); font-size:1.05em; line-height:1; }
.btn-group{ display:flex; flex-wrap:wrap; gap:var(--space-4); align-items:center; }
.btn-group--col{ flex-direction:column; align-items:stretch; }
@media (max-width:399px){ .btn-group--col .btn{ width:100%; } }

/* 移動端底部固定 CTA 條 §4.1 */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:none; gap:var(--space-3);
  padding:10px var(--container-pad) calc(10px + env(safe-area-inset-bottom));
  background:rgba(247,244,234,.94); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--color-line);
  box-shadow:0 -2px 12px -8px rgba(74,62,42,.30);
}
@media (max-width:899px){ .cta-bar{ display:flex; } .cta-bar .btn{ flex:1; min-height:52px; } }
@media (min-width:900px){ .cta-bar{ display:none; } }
body{ padding-bottom:0; }
@media (max-width:899px){ body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); } }
/* 極窄屏（≤559px）：只保留主 CTA「查看零售點」。
   原因：兩枚 CTA 橫排在 320–359px 下會把「成為經銷夥伴」折成兩行（「成為經銷夥 / 伴」），
   豎排則整條高達 125px，遮住近 1/4 螢幕。
   「成為經銷夥伴」在 Hero 區與 #partner 區各有完整按鈕，轉化路徑不受影響。 */
@media (max-width:559px){
  .cta-bar .btn--secondary{ display:none; }
  .cta-bar .btn--primary{ flex:1; width:100%; }
}
/* 平板窄寬：CTA 標題縮至 14px 避免換行撐高 */
@media (min-width:560px) and (max-width:899px){
  .cta-bar .btn{ font-size:14px; padding:10px 12px; }
  .cta-bar .btn .en{ font-size:12px; }
}
/* 中寬屏 360–559px：兩枚並排時收緊間距與內距，保證中文不折行 */
@media (min-width:360px) and (max-width:559px){
  .cta-bar{ gap:var(--space-2); padding-left:12px; padding-right:12px; }
  .cta-bar .btn{ font-size:15px; padding:10px 8px; }
  .cta-bar .btn .en{ font-size:11.5px; margin-inline-start:3px !important; }
}

/* ═══════════ §4.2 紙卡 ═══════════ */
.paper-card{
  background:var(--color-paper-2);
  border:1px solid var(--color-line);
  border-radius:var(--r-card);
  box-shadow:var(--shadow-1), var(--shadow-inset);
  padding:var(--space-5);
}
.paper-card--flat{ box-shadow:var(--shadow-inset); }
.paper-card--outline{ background:transparent; box-shadow:none; border:1px solid var(--color-line-strong); }
.on-ink .paper-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:none; color:var(--color-paper-3);
}
.on-ink .paper-card .h3{ color:#FFFFFF; }

/* ═══════════ §4.3 印章 ═══════════ */
.seal{
  --seal-size:88px;
  width:var(--seal-size); height:var(--seal-size);
  display:grid; place-items:center; text-align:center;
  background:var(--seal-red); color:#FFFFFF;
  border:2px solid var(--seal-red);
  border-radius:var(--r-seal);
  font-family:var(--font-cn-serif); font-weight:700;
  font-size:15px; line-height:1.05; letter-spacing:.08em;
  transform:rotate(-2.2deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  position:relative; overflow:hidden;
}
.seal::after{
  content:""; position:absolute; inset:5px;
  border:1px solid rgba(255,255,255,.42); pointer-events:none;
}
.seal--num{ font-family:var(--font-num); font-size:32px; letter-spacing:-.01em; font-weight:700; }
.seal--small{ --seal-size:56px; font-size:12px; letter-spacing:.14em; line-height:1.35; }
.seal--tilt-l{ transform:rotate(-2.8deg); }
.seal--tilt-r{ transform:rotate(1.8deg); }
.seal--outline{ background:transparent; color:var(--seal-red); border-color:var(--seal-red); }
.seal--outline::after{ border-color:rgba(178,18,24,.40); }
.brand-seal{
  width:24px; height:24px; display:grid; place-items:center;
  background:var(--seal-red); color:#FFFFFF;
  border-radius:0; font-family:var(--font-cn-brush); font-size:13px; font-weight:700;
  transform:rotate(-2deg); flex:none;
}

/* ═══════════ §4.4 0 添加指標格 ═══════════ */
.zero-grid{ display:grid; gap:var(--space-3); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:640px){ .zero-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); } }
@media (min-width:1200px){ .zero-grid{ gap:var(--space-5); } }
.zero-card{
  background:var(--color-paper-2);
  border:1px solid var(--color-line);
  border-radius:var(--r-card);
  padding:var(--space-4) var(--space-3);
  display:flex; flex-direction:column; align-items:center; gap:var(--space-2);
  text-align:center;
}
.zero-card__frame{
  width:44px; height:44px; display:grid; place-items:center;
  border:1.5px solid var(--color-sage-600);
  border-radius:var(--r-seal-frame);
  color:var(--color-sage-700);
  font-family:var(--font-num); font-weight:700; font-size:26px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.zero-card__label{ font-size:15px; font-weight:600; color:var(--color-ink); line-height:1.3; }
.zero-card__en{ font-size:12.5px; color:var(--color-ink-2); line-height:1.3; }
.zero-card__note{ font-size:12px; color:var(--color-ink-2); line-height:1.5; margin-top:var(--space-1); }

/* ═══════════ §4.5 配料表 ═══════════ */
.ingredients li{
  display:grid; grid-template-columns:12px minmax(0,1fr) auto;
  align-items:baseline; column-gap:var(--space-3);
  padding:11px 0; border-bottom:1px solid var(--color-line);
}
.ingredients li:last-child{ border-bottom:0; }
.ingredients .dot{
  width:10px; height:10px; border-radius:50%; align-self:center;
  box-shadow:inset 0 0 0 1px rgba(42,44,34,.22);
}
.ingredients .zh{ font-size:15px; color:var(--color-ink); line-height:1.4; }
.ingredients .en{ font-size:12.5px; color:var(--color-ink-2); line-height:1.4; display:block; margin-top:2px; }
.ingredients .amount{
  font-family:var(--font-num); font-variant-numeric:tabular-nums;
  font-size:14px; font-weight:600; color:var(--color-ink); white-space:nowrap;
}
/* 無含量項的破折號：原用 --color-ink-3（3.12:1），改用 --color-ink-2 */
.ingredients .amount--none{ color:var(--color-ink-2); font-weight:400; }
.subhead{
  font-size:14px; font-weight:600; color:var(--color-ink);
  margin-bottom:var(--space-2); letter-spacing:.02em;
}
.subhead .en{ font-weight:400; color:var(--color-ink-2); font-size:12.5px; margin-inline-start:4px; }
.on-ink .subhead{ color:#FFFFFF; }
.on-ink .subhead .en{ color:var(--color-sage-300); }

/* ═══════════ §6.4 產品實拍圖紀律 ═══════════ */
/* 維港版新圖（2026-10-22 替換）：兩張均已去背並裁切至瓶身邊界，
   alpha 滿幅到邊緣，因此不再需要百分比裁切，只需依瓶身真實 AR 設定容器。
   濕無影 368×1315（AR 0.279848）｜ 曉田酸梅湯 505×1346（AR 0.375186） */
.bottle{ position:relative; height:100%; overflow:hidden; aspect-ratio:var(--bottle-ar, auto); }
.bottle img{ border-radius:0 !important; border:0 !important; box-shadow:none !important; filter:none !important; }
.bottle--sy{ --bottle-ar:368 / 1315; }
.bottle--sy img{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; object-fit:contain;
}
.bottle--plum{ --bottle-ar:505 / 1346; }
.bottle--plum img{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; object-fit:contain;
}
.art-wrap{ position:relative; z-index:0; display:flex; justify-content:center; align-items:flex-end; }
.art-wrap::before{
  content:""; position:absolute; z-index:-1; inset:-12% -22% -8% -22%;
  border-radius:50%;
}
#product-shiyuan .art-wrap::before{
  background:radial-gradient(closest-side, rgba(207,70,18,.10), rgba(207,70,18,0) 72%);
}
#product-plum .art-wrap::before{
  background:radial-gradient(closest-side, rgba(88,8,26,.08), rgba(88,8,26,0) 72%);
}
.art-shiyuan .bottle--sy{ height:min(560px, 68vh); }
.art-plum .bottle--plum{ height:min(480px, 58vh); }
.art-holder{ position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:center; width:100%; }
.art-holder .bottle{ flex:none; max-width:100%; }
.bottle-cap{ display:none; }

/* ═══════════ §6.3 草本線稿裝飾 ═══════════ */
.deco{ position:absolute; pointer-events:none; color:var(--color-sage-600); opacity:.24; z-index:0; }
#product-shiyuan .deco--coix{ top:-24px; right:-16px; width:120px; }
#product-plum   .deco--plum{ top:-28px; right:-20px; width:240px; }
#brand  .deco--mulberry{ bottom:24px; right:32px; width:96px; }
#partner .deco--osmanthus{ bottom:20px; right:28px; width:110px; }
@media (max-width:639px){ .deco{ display:none; } }
.hero-deco{ position:absolute; pointer-events:none; color:var(--color-sage-300); opacity:.5; z-index:0; }
.hero-waves{ position:absolute; left:0; right:0; bottom:0; width:100%; height:120px; pointer-events:none; color:var(--color-sage-600); opacity:.35; z-index:0; }

/* ═══════════ §2.4 產品名雙行結構 ═══════════ */
.product-title{ margin:0 0 var(--space-3); }
.product-title__main{
  display:block; font-family:var(--font-cn-brush);
  font-size:26px; line-height:1.20; font-weight:700; letter-spacing:.01em;
  color:var(--product-sy-accent);
}
.product-title__en{
  font-family:var(--font-en); font-size:.62em; font-weight:400;
  letter-spacing:.01em; margin-inline-start:5px;
  display:inline-block; vertical-align:baseline; color:var(--color-ink);
}
#product-plum .product-title__en{ color:var(--color-ink); }
/* 維港版包裝上「曉田酸梅湯」帶 TM 標記，站内以 <sup> 同步 */
.product-title__main .tm{
  font-size:.34em; vertical-align:super; line-height:0;
  margin-inline-start:.12em; letter-spacing:0; font-weight:400;
}
.product-title__sub{
  display:block; margin-top:4px;
  font-size:13px; line-height:1.5; font-weight:400; color:var(--color-ink-2);
}
#product-plum .product-title__main{ color:var(--product-pl-accent); }
#product-plum .product-title__sub{ color:var(--color-ink-2); }
@media (min-width:1024px){
  .product-title__main{ font-size:36px; line-height:1.15; }
  .product-title__en{ font-size:30px; }
  .product-title__sub{ font-size:18px; }
}

/* ═══════════ §3.4 圓角與陰影紀律（產品圖禁加）═══════════ */
.badge597{
  position:relative; width:88px; height:88px; display:grid; place-items:center;
  background:var(--seal-red); color:#FFFFFF;
  border:2px solid var(--seal-red); border-radius:0;
  transform:rotate(-2.2deg);
  font-family:var(--font-num); font-size:32px; font-weight:700; line-height:1;
  letter-spacing:-.01em; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.badge597::after{ content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.42); }
.badge597 small{ font-family:var(--font-cn-serif); font-size:13px; letter-spacing:.06em; }
@media (max-width:639px){ .badge597{ width:72px; height:72px; font-size:26px; } }
.badge-outline{
  width:56px; height:56px; display:grid; place-items:center; text-align:center;
  border:1.5px solid var(--color-sage-600); border-radius:var(--r-seal-frame);
  color:var(--color-sage-700); background:var(--color-paper-2);
  font-family:var(--font-num); font-size:13px; font-weight:700; line-height:1.15;
  padding:4px;
}
.badge-outline--red{ border-color:var(--seal-red); color:var(--seal-red); background:transparent; }
/* 深墨底（#proof）上的紅色描邊徽章：印章紅壓深墨底僅 1.67:1，不達 WCAG AA。
   在 .on-ink 容器內改用淺色文字（--color-paper-3，6.99:1），紅框保留品牌辨識。 */
.on-ink .badge-outline--red{ color:var(--color-paper-3); border-color:var(--seal-red); }
.badge-outline small{ display:block; font-family:var(--font-body); font-size:10.5px; letter-spacing:.02em; }
@media (max-width:639px){ .badge-outline{ width:48px; height:48px; font-size:12px; } }
.trust{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-4); align-items:center; margin-top:var(--space-7);
}
.trust__item{ display:flex; align-items:center; gap:var(--space-3); }
.trust__text{ font-size:13px; line-height:1.4; color:var(--color-ink-2); font-weight:600; }
/* 信任條英文：原用 --color-ink-3，對比度僅 3.12:1（AA 要求 4.5:1），改用 --color-ink-2。 */
.trust__text .en{ display:block; font-weight:400; font-size:12px; color:var(--color-ink-2); }
@media (max-width:519px){
  .trust{ grid-template-columns:1fr; gap:var(--space-3); }
  .trust__item{ gap:var(--space-4); }
}

/* 步驟條 §3.6 / C-6 */
.steps{ display:grid; gap:var(--space-4); counter-reset: step; }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.steps li{ display:flex; gap:var(--space-3); align-items:flex-start; counter-increment: step; }
.steps li::before{
  content:counter(step); flex:none;
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  border:1.5px solid var(--color-sage-600); color:var(--color-sage-700);
  font-family:var(--font-num); font-size:14px; font-weight:700;
}
.steps__zh{ font-size:15px; font-weight:600; color:var(--color-ink); line-height:1.4; }
.steps__en{ display:block; font-size:12.5px; font-weight:400; color:var(--color-ink-2); line-height:1.4; }
.on-ink .steps li::before{ border-color:var(--color-sage-300); color:var(--color-sage-300); }
.on-ink .steps__zh{ color:#FFFFFF; }
.on-ink .steps__en{ color:var(--color-paper-3); }

/* 標籤 chip */
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); }
.caption, .body-sm, p, li{ overflow-wrap:break-word; }
.chip{
  background:var(--color-sage-100); color:var(--color-ink);
  border:1px solid var(--color-line); border-radius:var(--r-seal-frame);
  padding:7px 12px; font-size:13.5px; font-weight:600; line-height:1.3;
}
.chip .en{ display:block; font-weight:400; font-size:12px; color:var(--color-ink-2); }
.on-ink .chip{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:#FFFFFF; }
.on-ink .chip .en{ color:var(--color-sage-300); }
.cat-chip{
  display:inline-flex; align-items:baseline; gap:.08em;
  background:var(--color-mint-100); color:var(--color-ink);
  border:1px solid var(--color-line); border-radius:var(--r-seal-frame);
  padding:4px 10px; font-size:12.5px; font-weight:600;
}
.cat-chip .en{ font-weight:400; color:var(--color-ink-2); font-size:12px; }

/* 規格定義列表 */
.spec{ display:grid; gap:var(--space-1); margin:0; }
.spec > div{
  display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:var(--space-3); padding:9px 0; border-bottom:1px solid var(--color-line);
}
.spec > div:last-child{ border-bottom:0; }
.spec dt{ font-size:14px; color:var(--color-ink-2); }
.spec dd{ margin:0; font-size:15px; color:var(--color-ink); font-weight:600; }
.spec dd .en{ display:block; font-size:12.5px; font-weight:400; color:var(--color-ink-2); margin-top:2px; }
.spec dd .num{ font-weight:600; }

/* 圖示條（飲用方式 / 適用人群） */
.facts{ display:grid; gap:var(--space-3); }
.fact{ display:flex; gap:var(--space-3); align-items:flex-start; }
.fact__icon{ flex:none; width:22px; height:22px; color:var(--color-sage-600); margin-top:2px; }
.fact__zh{ font-size:15px; color:var(--color-ink); line-height:1.5; }
.fact__en{ display:block; font-size:12.5px; color:var(--color-ink-2); line-height:1.5; }
.on-ink .fact__icon{ color:var(--color-sage-300); }
.on-ink .fact__zh{ color:#FFFFFF; }
.on-ink .fact__en{ color:var(--color-paper-3); }

/* 檢測徽章條 */
.proof-badge{
  display:inline-flex; align-items:center; gap:var(--space-3);
  border:1px solid var(--color-line); border-radius:var(--r-card);
  background:var(--color-paper-2); padding:var(--space-3) var(--space-4);
}
.proof-badge__text{ font-size:13.5px; font-weight:600; color:var(--color-ink); line-height:1.4; }
.proof-badge__text .en{ display:block; font-weight:400; font-size:12px; color:var(--color-ink-2); }
.on-ink .proof-badge{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
.on-ink .proof-badge__text{ color:#FFFFFF; }
.on-ink .proof-badge__text .en{ color:var(--color-sage-300); }

/* 賣點塊 */
.usps{ display:grid; gap:var(--space-3); }
@media (min-width:640px){ .usps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.usp{
  display:flex; gap:var(--space-3); align-items:flex-start;
  border:1px solid var(--color-line); border-radius:var(--r-card);
  background:var(--color-paper); padding:var(--space-4);
  box-shadow:var(--shadow-inset);
}
.usp__icon{ flex:none; width:26px; height:26px; color:var(--color-sage-600); }
.usp__zh{ font-size:15px; font-weight:600; color:var(--color-ink); line-height:1.4; }
.usp__en{ display:block; font-size:12.5px; color:var(--color-ink-2); line-height:1.4; }

/* 零售點卡 */
.retail-item{
  background:var(--color-paper-2); border:1px solid var(--color-line);
  border-left:3px solid var(--color-sage-600);
  border-radius:var(--r-card); box-shadow:var(--shadow-1), var(--shadow-inset);
  padding:var(--space-4) var(--space-5);
}
.retail-item + .retail-item{ margin-top: var(--space-3); }
.retail-item__type{ font-size:12.5px; font-weight:600; color:var(--color-sage-700); letter-spacing:.04em; }
.retail-item__name{ display:block; font-size:17px; font-weight:700; color:var(--color-ink); margin-top:4px; }
.retail-item__area{ display:block; font-size:13.5px; color:var(--color-ink-2); margin-top:2px; }
.retail-item__meta{ font-size:12.5px; color:var(--color-ink-2); margin-top:6px; }
.retail-item__meta .en{ display:block; }

/* 合作條件行 */
.terms li{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--space-3); padding:var(--space-3) 0; align-items:baseline;
  border-bottom:1px solid var(--color-line);
}
.terms li:last-child{ border-bottom:0; }
.terms__label{ font-size:15px; font-weight:600; color:var(--color-ink); }
.terms__label .en{ display:block; font-weight:400; font-size:12.5px; color:var(--color-ink-2); }
.terms__value{ font-size:15px; color:var(--color-ink); }
.terms__value .en{ display:block; font-size:12.5px; color:var(--color-ink-2); }
.terms__value .mark{ color:var(--seal-red); font-weight:700; }
@media (max-width:519px){ .terms li{ grid-template-columns:1fr; gap:2px; } }

/* 聯絡資訊格 */
.contact-list{ display:grid; gap:var(--space-4); grid-template-columns:minmax(0,1fr); }
@media (min-width:640px){ .contact-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .contact-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.contact-list > *{ min-width:0; }
.contact-item__label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--color-sage-300); }
.contact-item__value{
  display:inline-flex; align-items:center; flex-wrap:wrap; min-height:44px;
  max-width:100%; min-width:0; overflow-wrap:anywhere; word-break:break-word;
  font-size:16px; color:#FFFFFF; text-decoration:none;
}
.contact-item__value:hover{ text-decoration:underline; }
.contact-item__value .en{ display:block; font-size:12.5px; color:var(--color-paper-3); }
.on-ink a{ color:var(--color-sage-300); }
/* 正文內的電話 / WhatsApp 鏈接：文字僅 15–18px 高，手指難點。
   用 inline-block + padding 擴大熱區，視覺間距不受影響。 */
.retail-fallback a[href^="tel:"],
.retail-fallback a[href*="wa.me"],
a[href^="tel:"]:not(.btn):not(.contact-item__value),
a[href*="wa.me"]:not(.btn):not(.contact-item__value),
a[href^="mailto:"]:not(.btn):not(.contact-item__value){
  display:inline-block; padding:12px 2px; margin:-12px -2px;
}

/* ═══════════ §4.6 表單 ═══════════ */
.form{ display:grid; gap:var(--space-5); grid-template-columns:1fr; }
@media (min-width:640px){
  .form{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .form .field--full{ grid-column:1/-1; }
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{
  font-size:13.5px; font-weight:600; color:var(--color-ink); line-height:1.4;
  /* 觸達熱區：標籤文字本身僅 19px 高，手指點不準。加深色背景的 padding 擴大可點區域，
     視覺上無變化（背景透明，padding 不影響排版間距——間距由 input 的 margin 控制）。 */
  display:inline-block; padding:10px 0; margin-top:-10px; cursor:pointer;
}
.field label .en{ font-weight:400; color:var(--color-ink-2); }
.field .req{ color:var(--seal-red); margin-inline-start:2px; font-weight:700; }
.field .opt{ color:var(--color-ink-2); font-weight:400; }
.field input, .field select, .field textarea{
  width:100%; min-height:48px; padding:12px 14px;
  font-family:var(--font-body); font-size:16px; line-height:1.5; color:var(--color-ink);
  background:var(--color-white);
  border:1px solid var(--color-line-strong);
  border-radius:var(--r-input);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{ min-height:132px; resize:vertical; }
.field select{
  appearance:none; padding-inline-end:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233B5233' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.field ::placeholder{ color:var(--color-ink-3); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible{
  outline:2px solid var(--color-focus); outline-offset:2px;
}
.field [aria-invalid="true"]{ border-color:var(--color-error); border-width:1.5px; }
.field .field-error{
  margin:0; font-size:13px; line-height:1.5; color:var(--color-error);
  background:var(--color-error-bg); border-inline-start:3px solid var(--color-error);
  padding:8px 10px; border-radius:0 var(--r-input) var(--r-input) 0;
}
.field .field-error[hidden]{ display:none; }
.field .field-success{
  margin:0; font-size:13px; color:var(--color-success);
  background:var(--color-success-bg); border-inline-start:3px solid var(--color-success);
  padding:8px 10px; border-radius:0 var(--r-input) var(--r-input) 0;
}
/* 蜜罐欄位：移出可視區但保留在 DOM（機器人會填）。不設 display:none，
   否則部分機器人會跳過；亦不影響鍵盤可達性（tabindex=-1 + aria-hidden）。 */
.hp{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.checkbox{ display:flex; gap:10px; align-items:flex-start; }
.checkbox input{ width:20px; height:20px; min-height:20px; margin:2px 0 0; accent-color:var(--color-sage-700); flex:none; }
/* 復選框：input 本體 20px，但同組 label 高達 82px 且 for/id 已關聯，
   點文字即可勾選，實際觸達熱區充足，無需再擴大 input。 */
.checkbox label{ cursor:pointer; }
.checkbox label{ font-size:14px; font-weight:400; color:var(--color-ink); line-height:1.6; }
.checkbox label .en{ display:block; font-size:12.5px; color:var(--color-ink-2); }
.form-note{ font-size:13px; color:var(--color-ink-2); background:rgba(78,107,68,.07);
  border:1px solid var(--color-line); border-radius:var(--r-card); padding:12px 14px; line-height:1.6; }
.form-note strong{ color:var(--color-ink); }
.form-alert{
  margin:0 0 var(--space-4); padding:10px 14px; border-radius:var(--r-card);
  background:var(--color-error-bg); border-inline-start:3px solid var(--color-error);
  color:var(--color-error); font-size:14px; font-weight:600;
}
.form-alert[hidden]{ display:none; }
.form-summary{
  background:var(--color-paper-2); border:1px solid var(--color-line-strong);
  border-radius:var(--r-card); padding:var(--space-5);
}
.form-summary__title{ font-size:16px; font-weight:700; color:var(--color-success); margin-bottom:var(--space-2); }
.form-summary__body{
  font-size:14px; line-height:1.8; color:var(--color-ink);
  white-space:pre-wrap; word-break:break-word;
  background:var(--color-white); border:1px solid var(--color-line);
  border-radius:var(--r-input); padding:var(--space-4); margin:0 0 var(--space-4);
}
.form-summary__hint{ font-size:13px; color:var(--color-error); margin:0 0 var(--space-3); }
.form-summary__hint[hidden]{ display:none; }
.form-summary__actions{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

/* ═══════════ §4.7 導航 ═══════════ */
.site-nav{
  position:sticky; top:0; z-index:50;
  height:var(--nav-h);
  background:rgba(247,244,234,.88);
  backdrop-filter:blur(8px) saturate(1.15);
  -webkit-backdrop-filter:blur(8px) saturate(1.15);
  border-bottom:1px solid var(--color-line);
}
@media (min-width:900px){ :root{ --nav-h:var(--nav-h-md); } }
.site-nav__inner{ display:flex; align-items:center; gap:var(--space-5); height:100%; }
.brand{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--color-ink); flex:none; }
.brand__word{ font-family:var(--font-cn-serif); font-size:20px; font-weight:700; letter-spacing:.04em; }
.brand__reg{ font-size:11px; vertical-align:super; color:var(--color-ink-2); }
/* 頁腳（深墨底）上的 ® 需用淺色，否則對比度僅 2.10:1 */
.site-footer .brand__reg{ color:var(--color-sage-300); }
.nav-links{ display:none; margin-inline-start:auto; gap:var(--space-5); }
@media (min-width:900px){ .nav-links{ display:flex; } }
.nav-links a{
  display:inline-flex; align-items:center; min-height:44px;
  color:var(--color-ink); text-decoration:none; font-size:15px; font-weight:500;
}
.nav-links a:hover{ color:var(--color-sage-700); }
.nav-links a[aria-current="true"]{ color:var(--color-sage-700); box-shadow:inset 0 -2px 0 var(--color-sage-600); }
.nav-links a .en{ font-size:12px; color:var(--color-ink-2); }
.nav-links a:hover .en{ color:var(--color-sage-700); }
.nav-cta{ display:none; }
@media (min-width:900px){ .nav-cta{ display:inline-flex; } }
.nav-panel{ display:block; }
@media (min-width:900px){ .nav-panel{ display:none; } }
.nav-panel__summary{
  list-style:none; cursor:pointer; margin-inline-start:auto;
  min-width:44px; min-height:44px; display:grid; place-items:center; color:var(--color-ink);
}
.nav-panel__summary::-webkit-details-marker{ display:none; }
.nav-panel__summary::marker{ content:""; }
.nav-panel__summary svg{ width:24px; height:24px; }
/* 抽屜用 absolute：.site-nav 的 backdrop-filter 會成為 fixed 的包含塊，故不可用 fixed */
.nav-drawer{
  position:absolute; top:100%; left:0; right:0;
  height:calc(100vh - var(--nav-h)); height:calc(100dvh - var(--nav-h));
  z-index:49;
  background:var(--color-paper); padding:var(--space-6) var(--container-pad);
  display:grid; align-content:start; gap:var(--space-2);
  overflow-y:auto; background-image:
    repeating-linear-gradient(92deg, rgba(90,74,48,.026) 0 1px, rgba(90,74,48,0) 1px 7px);
}
.nav-drawer a{
  display:flex; align-items:center; min-height:56px; font-size:19px;
  color:var(--color-ink); border-bottom:1px solid var(--color-line); text-decoration:none;
}
.nav-drawer a[aria-current="true"]{ color:var(--color-sage-700); }
.nav-drawer a .en{ margin-inline-start:auto; font-size:13px; color:var(--color-ink-2); }
.nav-drawer .btn{ margin-top:var(--space-4); display:inline-flex; border-bottom:0; min-height:52px; }
/* 抽屜裡的「立即洽詢」是深綠實心按鈕，英文必須跟隨按鈕字色（白），
   否則被上一條 .nav-drawer a .en 的墨灰蓋住，對比度僅 1.27:1。 */
/* 注意：.nav-drawer a 把 a 的 color 設為墨色，而 .btn--primary 的白色被 .nav-drawer a 覆蓋，
   故這裡必須顯式寫白色，不能用 inherit（inherit 會拿到墨色，對比度僅 1.65:1）。 */
.nav-drawer .btn{ color:#FFFFFF; }
.nav-drawer .btn .en{ margin-inline-start:auto; color:#FFFFFF; opacity:.92; }
@media (min-width:900px){ .nav-panel{ display:none; } }
section[id], main [id]{ scroll-margin-top:88px; }
@media (max-width:899px){ section[id], main [id]{ scroll-margin-top:80px; } }

/* ═══════════ §4.8 頁腳 ═══════════ */
.site-footer{ position:relative; background:var(--color-ink); color:var(--color-paper-3); }
.site-footer::before{
  content:""; position:absolute; left:0; right:0; top:0; height:72px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='72' viewBox='0 0 240 72' fill='none' stroke='%23A9BC9C' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 58C40 54 62 44 84 30'/%3E%3Cpath d='M84 30c10 6 22 6 32 2'/%3E%3Cpath d='M84 30c-4-10 0-18 8-24'/%3E%3Cpath d='M120 22c8 6 18 4 24-4'/%3E%3Cpath d='M150 40c14 2 26-4 32-16'/%3E%3Cpath d='M196 30c10 4 22 2 30-6'/%3E%3Cpath d='M4 58c30 2 56-4 78-18'/%3E%3C/svg%3E") no-repeat left bottom / 240px 72px repeat-x;
  opacity:.22; pointer-events:none;
}
.site-footer__inner{ position:relative; padding-block:var(--space-8) var(--space-6); }
.site-footer a{ color:var(--color-sage-300); text-underline-offset:3px; }
.site-footer a:hover{ color:var(--color-paper-3); }
.site-footer__legal{ font-size:12.5px; line-height:1.7; color:var(--color-sage-300); overflow-wrap:anywhere; }
.site-footer__legal a{ overflow-wrap:anywhere; }
.site-footer__legal p{ margin:0 0 var(--space-2); }
.site-footer__grid{ display:grid; gap:var(--space-5); margin-bottom:var(--space-6); }
@media (min-width:640px){ .site-footer__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:900px){ .site-footer__grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.site-footer__brand{ display:flex; align-items:center; gap:8px; margin-bottom:var(--space-3); }
.site-footer__title{ font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--color-sage-300); margin-bottom:var(--space-2); }

/* ═══════════ §5.2 / §5.3 Hero 雙瓶 ═══════════ */
.hero{ position:relative; overflow:hidden; }
.hero__inner{ position:relative; z-index:1; }
.hero-visual{ display:flex; flex-direction:column; align-items:center; gap:24px; margin-top:var(--space-7); }
@media (min-width:640px){
  /* 維港版新幾何下兩瓶視覺重量已由高度比 1.25 平衡（酸梅湯瓶身更寬、色更深，
     故高度略低），視覺組居中即可，不再需要位移補償。 */
  .hero-visual{ flex-direction:row; align-items:flex-end; justify-content:center; gap:28px; }
}
@media (min-width:1200px){ .hero-visual{ gap:34px; } }
/* 維港版新幾何配平：濕无影 552px ↔ 酸梅湯 442px，可見高比 1.25（設計規範區間 1.15–1.25），
   面積比 0.86 —— 酸梅湯瓶身更寬且深梅紫紅色塊飽滿，故高度略低以平衡視覺重量。 */
.hero-visual .bottle--sy{ height:300px; }
.hero-visual .bottle--plum{ height:240px; }
@media (min-width:640px){ .hero-visual .bottle--sy{ height:408px; } .hero-visual .bottle--plum{ height:326px; } }
@media (min-width:900px){ .hero-visual .bottle--sy{ height:480px; } .hero-visual .bottle--plum{ height:384px; } }
@media (min-width:1200px){ .hero-visual .bottle--sy{ height:552px; } .hero-visual .bottle--plum{ height:442px; } }
@media (max-width:639px){ .hero-visual .bottle--sy{ order:1; } .hero-visual .bottle--plum{ order:2; } }
/* 標題區：容器寬度刻意受限，讓 22 字標題固定折成兩行（單行過長、氣勢不足）。
   ⚠️ 用固定 px 而非 em：em 基於元素自身字號（此處繼承 body 的 17px），
   15em 實際只有 255px，會把標題擠成 5 行。
   640px 在 42px 字號下每行容 15 字 → 斷在「曉田® 濕無影與曉田酸梅湯：」與
   「零添加的草本飲品」的語義邊界。.nb 保護產品名不拆行。 */
.hero__title-block{ max-width: 640px; }
/* 640px 容器在 42px 字號下每行容 15 字，正好在「曉田® 濕無影與曉田酸梅湯：」後斷行。
   放寬到 660px 可讓第 2 行由 8 字增至 10 字，行長更均衡。 */
@media (min-width:1200px){ .hero__title-block{ max-width: 660px; } }
/* 窄屏放開容器上限，讓標題用滿可用寬度（640px 在 375px 視口本就無效，
   但 375–640px 之間的平板若沿用 640px 會浪費空間）。 */
@media (max-width:639px){
  .hero__title-block{ max-width: none; }
  /* 375px 視口：容器 335px，26px 時每行容 12 字 → 22 字排成 2 行，無孤字。
     320px 視口容器僅 280px，24px 時每行容 11 字 → 2 行。 */
  h1, .hero-title{ font-size: 26px; line-height: 1.34; }
}
@media (max-width:359px){
  h1, .hero-title{ font-size: 24px; }
}
/* 產品名不可拆行：中文可在任意字元斷行，會把「曉田酸梅湯」拆成「曉田酸梅 / 湯」。 */
.nb{ white-space: nowrap; }
.hero__title-block .h1{ margin-bottom: var(--space-4); }
.hero__title-en{ display:block; font-family:var(--font-en); font-size:.92em; font-weight:400;
  color:var(--color-ink-2); line-height:1.4; letter-spacing:.01em; margin-top:10px; }
.hero__sub{ font-size:18px; line-height:1.7; color:var(--color-ink-2); max-width:56ch; margin-bottom:var(--space-6); }
.hero__sub .en{ display:block; font-size:.92em; margin-top:4px; }
.hero__layout{ display:grid; gap:var(--space-6); }
.hero__visual-col{ min-width:0; }
@media (min-width:900px){
  .hero__layout{ grid-template-columns:repeat(12,minmax(0,1fr)); align-items:center; }
  /* 文字欄 7 欄在視覺欄含 2 瓶並置時被擠到約 416px，22 字標題需 ≤30px 才排得下 2 行。
     改為 8 欄（視覺欄仍保有足夠空間擺放雙瓶），讓標題有更充裕的行寬。 */
  .hero__text{ grid-column:span 8; }
  .hero__visual-col{ grid-column:span 4; }
}

/* 品牌理念引言 */
.quote-block{ margin-bottom:var(--space-6); }
.quote-block__zh{
  font-family:var(--font-hand); font-size:24px; line-height:1.5; font-weight:500;
  color:var(--color-ink); letter-spacing:.02em; max-width:24em;
}
@media (min-width:1024px){ .quote-block__zh{ font-size:28px; } }
.quote-block__en{ font-size:15px; line-height:1.7; color:var(--color-ink-2); max-width:52ch; margin-top:var(--space-3); }
.on-ink .quote-block__zh{ color:var(--color-sage-300); }
.on-ink .quote-block__en{ color:var(--color-paper-3); }

/* 佔位符缺省隱藏（數據缺口類）：CSS 默認隱藏，JS 僅在填好後移除 .ph-item */
.ph-item{ display:none !important; }
.ph-group{ display:none !important; }
.is-filled{ }
/* 待替換佔位符小標記（讓用戶一眼看到待填項）*/
.ph-chip{
  display:inline-block; margin-inline-start:.5em; padding:1px 7px;
  font-family:var(--font-num); font-size:11.5px; letter-spacing:.02em;
  color:var(--color-ink-2); background:var(--color-paper-3);
  border:1px solid var(--color-line-strong); border-radius:var(--r-seal-frame);
  vertical-align:middle;
}
.placeholder-note{
  font-size:12.5px; color:var(--color-ink-3); border:1px dashed var(--color-line-strong);
  border-radius:var(--r-card); padding:8px 12px; background:var(--color-paper-3);
}
.on-ink .placeholder-note{ color:var(--color-paper-3); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }

/* ═══════════ §7.4 prefers-reduced-motion ═══════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto !important; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ═══════════ §7.5 產品區塊分段布局（多頁版 §19 規則的最小鏡像）═══════════
   本檔是多頁站的內容源，單獨打開時也需要正確呈現。完整的媒體查詢與
   瓶子高度微調在 build/build_pages.py 的 EXTRA_CSS 裡。 */
.product-detail{
  margin-top:var(--space-7); padding-top:var(--space-6);
  border-top:1px solid var(--color-line);
  display:grid; gap:var(--space-6);
}
@media (min-width:1000px){
  .product-detail{ grid-template-columns:1fr 1fr; gap:var(--space-7) var(--space-6); align-items:start; }
}
.detail-col > :last-child{ margin-bottom:0 !important; }

/* ═══════════ §17 多頁架構（追加，不動原設計令牌）═══════════ */
/* 17.1 頁面標題帶
   · 單區塊頁（檢測/零售/經銷/聯絡）：section__head 就地升級，不新增背景層 → 沒有色塊接縫
   · 多區塊頁（產品）：獨立的 .page-head 標題帶 */
.page-head{
  position:relative; overflow:hidden;
  padding-block: calc(var(--space-7) + 4px) var(--space-6);
  border-bottom:1px solid var(--color-line);
}
@media (min-width:900px){ .page-head{ padding-block: var(--space-8) var(--space-7); } }
.page-head__title{ margin-bottom: var(--space-3); }
.page-head__lead{ font-size:18px; line-height:1.65; color:var(--color-ink-2); max-width: 56ch; }
.on-ink .page-head__lead{ color:var(--color-paper-3); }
.section__head--page .page-head__title{ margin-bottom:0; }
.section__head--page .section__lead{ margin-top: var(--space-3); }

/* 17.2 麵包屑 */
.crumb{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  font-size:13.5px; line-height:1.4; color:var(--color-ink-2);
  margin-bottom: var(--space-4);
}
.crumb a{ color:var(--color-ink-2); text-decoration:none; min-height:24px; display:inline-flex; align-items:center; }
.crumb a:hover{ color:var(--color-sage-700); text-decoration:underline; text-underline-offset:3px; }
.crumb .crumb__sep{ opacity:.5; }
.crumb [aria-current="page"]{ color:var(--color-ink); font-weight:600; }
.on-ink .crumb, .on-ink .crumb a{ color:var(--color-paper-3); }
.on-ink .crumb a:hover{ color:#FFFFFF; }
.on-ink .crumb [aria-current="page"]{ color:#FFFFFF; }

/* 17.3 導航當前頁標記（原設計用 aria-current="true" 做滾動高亮） */
.nav-links a[aria-current="page"]{ color:var(--color-sage-700); box-shadow:inset 0 -2px 0 var(--color-sage-600); }
.nav-links a[aria-current="page"] .en{ color:var(--color-sage-700); }
.nav-drawer a[aria-current="page"]{ color:var(--color-sage-700); font-weight:600; }

/* 17.4 頁尾頁面導覽 */
.footer-nav{
  display:flex; flex-wrap:wrap; gap: var(--space-2) var(--space-5);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top:1px solid rgba(228,222,203,.18);
}
.footer-nav a{
  color:var(--color-paper-3); text-decoration:none; font-size:14px;
  min-height:32px; display:inline-flex; align-items:center;
}
.footer-nav a:hover{ color:#FFFFFF; text-decoration:underline; text-underline-offset:3px; }
.footer-nav a[aria-current="page"]{ color:#FFFFFF; font-weight:600; }
.footer-nav a .en{ font-size:12px; color:var(--color-sage-300); margin-inline-start:4px; }

/* 17.5 上一頁 / 下一頁 */
.pager{ border-top:1px solid var(--color-line); background:var(--color-paper-2); }
.pager__inner{
  display:grid; grid-template-columns:1fr; gap: var(--space-3);
  padding-block: var(--space-6);
}
@media (min-width:700px){
  .pager__inner{ grid-template-columns:1fr 1fr; gap: var(--space-5); }
  .pager__link--next{ justify-self:end; text-align:right; }
  /* 只有一側時不要停在半個欄位的中間 */
  .pager--only-next .pager__inner{ grid-template-columns:1fr; justify-items:end; }
  .pager--only-prev .pager__inner{ grid-template-columns:1fr; justify-items:start; }
  .pager--only-next .pager__link, .pager--only-prev .pager__link{ width:min(100%, 360px); }
}
.pager__link{
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  color:var(--color-ink); padding: var(--space-3) var(--space-4);
  border:1px solid var(--color-line); border-radius: var(--r-card);
  background: var(--color-paper); min-height:64px; justify-content:center;
  transition: border-color .18s ease, background-color .18s ease;
}
.pager__link:hover{ border-color: var(--color-sage-600); background:#FFFFFF; }
.pager__link--next{ align-items:flex-start; }
@media (min-width:700px){ .pager__link--next{ align-items:flex-end; } }
.pager__dir{ font-size:12.5px; letter-spacing:.04em; color:var(--color-ink-2); }
.pager__name{ font-family:var(--font-cn-serif); font-size:19px; font-weight:700; }
@media (max-width:559px){ .pager__name{ font-size:17px; } }

/* 17.6 首頁頻道入口 */
.quick-links{ display:grid; gap:var(--space-4); grid-template-columns:1fr; }
@media (min-width:640px){ .quick-links{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .quick-links{ grid-template-columns:repeat(4,1fr); } }
.quick-link{
  position:relative; display:flex; flex-direction:column; gap:var(--space-2);
  padding: var(--space-5); text-decoration:none; color:var(--color-ink);
  background: var(--color-paper-2); border:1px solid var(--color-line);
  border-radius: var(--r-card); min-height:180px;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.quick-link:hover{ border-color: var(--color-sage-600); background:#FFFFFF; box-shadow:var(--shadow-1); }
.quick-link:focus-visible{ outline:3px solid var(--color-focus); outline-offset:2px; }
.quick-link__idx{ font-size:12px; letter-spacing:.14em; color:var(--color-ink-3); font-variant-numeric:tabular-nums; }
.quick-link__title{ font-family:var(--font-cn-serif); font-size:21px; font-weight:700; display:flex; flex-wrap:wrap; align-items:baseline; }
.quick-link__title .en{ font-family:var(--font-body); font-size:12.5px; font-weight:400; color:var(--color-ink-2); margin-inline-start:6px; }
.quick-link__desc{ font-size:14.5px; line-height:1.6; color:var(--color-ink-2); }
.quick-link__go{ margin-top:auto; padding-top:var(--space-3); font-size:15px; font-weight:600; color:var(--color-sage-700); }
@media (max-width:639px){ .quick-link{ min-height:0; } .quick-link__go{ padding-top:var(--space-2); } }

/* 17.7 零售點空狀態 */
.retail-empty{
  border:1px dashed var(--color-line-strong); border-radius:var(--r-card);
  padding: var(--space-6) var(--space-5); background:rgba(255,255,255,.42);
  margin-bottom: var(--space-5);
}
.retail-empty__title{ font-family:var(--font-cn-serif); font-size:20px; font-weight:700; margin-bottom:var(--space-4); }
.retail-empty__title .en{ display:block; font-family:var(--font-body); font-size:12.5px; font-weight:400; color:var(--color-ink-2); margin-top:4px; letter-spacing:.02em; }
.retail-empty__body{ font-size:15.5px; line-height:1.75; color:var(--color-ink-2); max-width:48ch; }
.retail-empty__body .en{ display:block; margin-top:8px; font-size:13.5px; line-height:1.6; color:var(--color-ink-2); }
.retail-empty__acts{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); }
.retail-empty[hidden]{ display:none; }

/* 17.8 桌面導覽下拉選單（產品樹）
   · 顯示：hover / focus-within（鍵盤 Tab 進入即展開，無 JS 可用）
   · 觸控大屏（無 hover）：site.js 點父級先展開，再點一次才跳轉 */
/* 17.8.0 頂欄不能折行：中文只有兩個字，一旦換行整排就變成豎排 */
.nav-links > *{ flex:none; }
.nav-links > a, .nav-item__top{ white-space:nowrap; }
/* 900–1099 是最擠的區間（5 項 + 品牌 + 按鈕），收緊間距與字號避免互相擠壓 */
@media (min-width:900px) and (max-width:1099px){
  .site-nav__inner{ gap:var(--space-4); }
  .nav-links{ gap:var(--space-4); }
  .nav-links > a, .nav-item__top{ font-size:14px; }
  .nav-links .en{ font-size:11px; }
  .nav-cta{ font-size:14px; padding-inline:14px; }
}
.nav-item{ position:relative; display:inline-flex; align-items:center; }
.nav-item__top{ gap:5px; }
.nav-item__caret{ width:9px; height:6px; flex:none; opacity:.7; transition:transform .18s ease; }
.nav-item:hover .nav-item__caret,
.nav-item:focus-within .nav-item__caret{ transform:rotate(180deg); }
.nav-sub{
  position:absolute; top:100%; left:-14px; z-index:60;
  min-width:248px; display:none; flex-direction:column; gap:2px;
  padding:6px; margin-top:-4px;
  background:var(--color-paper);
  border:1px solid var(--color-line); border-radius:var(--r-card);
  box-shadow:var(--shadow-2);
}
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub,
.nav-item.is-open > .nav-sub{ display:flex; }
/* 子項必須左對齊：預設 align-items:stretch 會讓中英兩行各自居中，長短不一時右緣參差 */
.nav-sub a{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:1px; text-align:left;
  min-height:52px; padding:9px 14px; border-radius:var(--r-input);
  font-size:15px; line-height:1.3; white-space:nowrap;
  border-inline-start:2px solid transparent;
}
.nav-sub a:hover{ background:var(--color-paper-2); }
.nav-sub a .en{ font-size:11.5px; line-height:1.25; }
.nav-sub a[aria-current="page"]{
  color:var(--color-sage-700); font-weight:600;
  background:var(--color-paper-2);
  border-inline-start-color:var(--color-sage-600);
}
.nav-sub a[aria-current="page"] .en{ color:var(--color-sage-700); }
/* 落在產品樹時，父級「產品」也帶當前頁標記 */
.nav-item.is-current > .nav-item__top{ color:var(--color-sage-700); box-shadow:inset 0 -2px 0 var(--color-sage-600); }
.nav-item.is-current > .nav-item__top .en{ color:var(--color-sage-700); }

/* 17.9 行動版抽屜分組（產品） */
.drawer-group{ display:block; }
.drawer-group__summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:6px;
  min-height:56px; font-size:19px; font-weight:600;
  font-family:var(--font-cn-serif); color:var(--color-ink);
  border-bottom:1px solid var(--color-line);
}
.drawer-group__summary::-webkit-details-marker{ display:none; }
.drawer-group__summary::marker{ content:""; }
.drawer-group__summary .en{ margin-inline-start:auto; font-family:var(--font-body); font-size:13px; font-weight:400; color:var(--color-ink-2); }
.drawer-group__caret{ width:9px; height:6px; flex:none; opacity:.7; transition:transform .18s ease; }
.drawer-group[open] > .drawer-group__summary .drawer-group__caret{ transform:rotate(180deg); }
.drawer-group__sub{ display:flex; flex-direction:column; gap:2px; padding:var(--space-2) 0 var(--space-2) var(--space-4); border-inline-start:2px solid var(--color-line-strong); margin:var(--space-3) 0 var(--space-2) 2px; }
.drawer-group__sub a{
  min-height:44px; font-size:16px; border-bottom:0; align-items:flex-start; flex-direction:column; justify-content:center;
}
.drawer-group__sub a .en{ margin-inline-start:0; font-size:11.5px; }

/* 17.10 產品頁互跳 */
.product-switch{ border-top:1px solid var(--color-line); }
.product-switch__title{
  font-family:var(--font-cn-serif); font-size:22px; font-weight:700;
  margin-bottom:var(--space-5);
}
.product-switch__title .en{ font-family:var(--font-body); font-size:12.5px; font-weight:400; color:var(--color-ink-2); }
.quick-links--two{ grid-template-columns:1fr; max-width:860px; }
@media (min-width:640px){ .quick-links--two{ grid-template-columns:1fr 1fr; } }
.quick-link[aria-current="page"]{ border-color:var(--color-sage-600); background:#FFFFFF; }
.quick-link[aria-current="page"] .quick-link__go{ visibility:hidden; }

/* 17.11 產品子頁麵包屑（插在 container 內、grid 之前，需要自己的下距） */
.section > .container > .crumb{ margin-bottom:var(--space-5); }
@media (max-width:899px){ .section > .container > .crumb{ margin-bottom:var(--space-4); } }

/* 17.12 產品區塊：上半「圖 + 摘要」並列，下半「配料 / 零添加 / 規格」通欄
   ── 原做法是讓圖 sticky，但圖只有 560px、右欄文字 1659–2011px，
      滾動時圖被釘住不動，觀感像卡住。改為把內容拆成上下兩段：
      上半兩欄高度接近（圖 560 / 文字 ~450），圖自然隨頁面滾走，不會留白。
      注意：.section 原本 overflow:hidden，裝飾 SVG 需要裁切，保留即可。 */
.span-text{ align-self:center; }
@media (max-width:899px){ .span-text{ align-self:stretch; } }
/* 產品頁獨立成頁後，瓶子是首屏唯一內容：min(560px,68vh) 在 844 高的手機上吃掉整屏，
   標題被推到固定行動條底下。窄屏收矮，讓「圖 + 品名」一屏能同時看到。 */
@media (max-width:899px){
  .art-shiyuan .bottle--sy{ height:clamp(300px, 48vh, 392px); }
  .art-plum .bottle--plum{ height:clamp(280px, 43vh, 348px); }
}

.product-detail{
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  display: grid; gap: var(--space-6);
}
@media (min-width:1000px){
  .product-detail{
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-6);
    align-items: start;
  }
}
/* 每欄最後一塊不再留底部空白（原內聯 margin-bottom 是為單欄流準備的） */
.detail-col > :last-child{ margin-bottom:0 !important; }
/* 通欄後配料表變寬，單行更短，行距收一點兒避免拉太開 */
.product-detail .ingredients li{ padding-block:10px; }

/* 17.13 單頁專屬微調 */
.page-head + .section{ border-top:0; padding-top: var(--space-5); }
@media (min-width:900px){ .page-head + .section{ padding-top: var(--space-6); } }
main{ display:block; }