/* ═══════════════════════════════════════════
   ACO 農民曆色彩計畫 — token
   ═══════════════════════════════════════════ */
:root{
  --paper:#f8f4ec; --paper-warm:#f2ece0; --paper-card:#fdfaf4;
  --pine:#2c4a35; --pine-mid:#3d6148; --pine-light:#e8efe9; --leaf:#618f5e;
  --vermillion:#c8402a; --vermillion-mid:#d4563e; --vermillion-pale:#faede9;
  --gold:#c49428; --gold-mid:#d9a942; --gold-pale:#fdf6e3;
  --leaf-pale:#eef3ea; --moss:#8fa883;
  --earth:#8b6f4f; --earth-mid:#a58968; --earth-pale:#f0e8dc;
  --ink:#1e2820; --ink-mid:#4a5448; --ink-light:#8a9488;
  --rule:#d8d0c0; --rule-dark:#bdb5a4;
  --font-serif:"Noto Serif TC",ui-serif,serif;
  --font-sans:"Noto Sans TC","DM Sans",sans-serif;
  --font-latin:"DM Sans",sans-serif;
  /* Hero 臉部安全區：文字寬度上限由此推算，確保不擋農夫臉 */
  --face-safe-x: 50vw;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:17px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(max-width:640px){html{font-size:15.5px}}
body{background:var(--paper);color:var(--ink);font-family:var(--font-sans);line-height:1.85;letter-spacing:0.04em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font:inherit;color:inherit;background:none;border:0}
.latin{font-family:var(--font-latin);letter-spacing:0.08em}
.serif{font-family:var(--font-serif)}
.container{max-width:1360px;margin:0 auto;padding:0 1.5rem}
@media(min-width:1024px){.container{padding:0 3rem}}

/* 朱紅印章 */
.stamp{display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;color:#fff;background:var(--vermillion);font-family:var(--font-serif);font-size:.85rem;border-radius:2px;transform:rotate(-4deg);box-shadow:0 1px 0 rgba(0,0,0,.15)}
.stamp.lg{width:3.5rem;height:3.5rem;font-size:1rem}
.stamp.xl{width:4rem;height:4rem;font-size:1.1rem}

/* 通用按鈕 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:0 1.5rem;height:2.75rem;font-weight:500;letter-spacing:.08em;border-radius:2px;transition:background-color .2s,color .2s,border-color .2s}
.btn-lg{height:3.5rem;padding:0 2rem;font-size:1.05rem}
.btn-cta{background:var(--vermillion);color:var(--paper)}
.btn-cta:hover{background:var(--vermillion-mid)}
.btn-solid{background:var(--pine);color:var(--paper)}
.btn-solid:hover{background:var(--pine-mid)}
.btn-outline{border:1px solid var(--pine);color:var(--pine)}
.btn-outline:hover{background:var(--pine-light)}

/* Badge */
.badge{display:inline-flex;align-items:center;padding:.15rem .6rem;border-radius:2px;font-size:.75rem;letter-spacing:.08em;border:1px solid var(--rule);color:var(--ink-mid);background:var(--paper-card)}
.badge.pine{border-color:rgba(44,74,53,.3);color:var(--pine);background:var(--pine-light)}
.badge.ver{border-color:rgba(200,64,42,.3);color:var(--vermillion);background:var(--vermillion-pale)}

/* ═══ TOPBAR ═══ */
.topbar{background:var(--paper-warm);color:var(--ink-mid);text-align:center;padding:.6rem 1rem;font-size:.72rem;letter-spacing:.18em;font-family:var(--font-latin);border-bottom:1px solid var(--rule);white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
.topbar::-webkit-scrollbar{display:none}
.topbar .dot{display:inline-block;width:5px;height:5px;background:var(--vermillion);border-radius:50%;vertical-align:middle;margin:0 .75rem}
@media(max-width:640px){.topbar{font-size:.65rem;letter-spacing:.12em}.topbar .dot{margin:0 .5rem}}
.topbar a{color:var(--pine);border-bottom:1px solid var(--pine);margin-left:.25rem}
.topbar a:hover{color:var(--vermillion);border-color:var(--vermillion)}

/* ═══ NAVBAR ═══ */
nav.main{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#f5cf54 0%,#eab83a 100%);border-bottom:1px solid var(--rule-dark);isolation:isolate;color:#1a3a2a}
nav.main::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:url("../images/nav-paper.png") repeat;background-size:520px auto;mix-blend-mode:multiply;opacity:.55;filter:contrast(1.1) brightness(1.1) saturate(1.05)}
nav.main > *{position:relative;z-index:1}
.nav-inner{max-width:1360px;margin:0 auto;height:4.5rem;padding:0 1.5rem;display:flex;align-items:center;gap:2rem}
@media(min-width:1024px){.nav-inner{height:5rem;padding:0 3rem}}
.brand{display:flex;align-items:center;gap:.75rem;flex-shrink:0}
.brand-logo{height:2.75rem;width:auto;display:block}
@media(min-width:1024px){.brand-logo{height:3.2rem}}
.nav-links{display:none;list-style:none;gap:1.75rem;flex:1;justify-content:center}
@media(min-width:1024px){.nav-links{display:flex}}
.nav-links a{font-size:.88rem;color:#1a3a2a;letter-spacing:.12em}
.nav-links a:hover{color:var(--vermillion)}
.nav-links a.active{color:var(--vermillion);border-bottom:1px solid var(--vermillion);padding-bottom:.25rem}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:1.1rem;color:#1a3a2a}
.nav-actions svg{width:22px;height:22px}
.nav-actions button,.nav-actions a{color:#1a3a2a}
.nav-actions a:hover,.nav-actions button:hover{color:var(--vermillion)}
.nav-actions .cart-count{background:var(--vermillion);color:#fdfaf4}
.cart-wrap{position:relative}
.cart-count{position:absolute;top:-4px;right:-4px;font-family:var(--font-latin);font-size:10px;background:var(--vermillion);color:var(--paper);width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* ═══ HERO — 100vw 滿版背景圖 + 文字疊層 ═══ */
.hero{position:relative;overflow:hidden;background:var(--paper);width:100%;aspect-ratio:16/9;max-height:820px;min-height:540px}
.hero-img-full{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:100% 35%;z-index:1}
@media(max-width:1024px){
  .hero{display:block;aspect-ratio:auto;max-height:none;min-height:auto}
  .hero-img-full{position:relative;inset:auto;width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center 28%;opacity:1}
}
@media(max-width:640px){.hero-img-full{aspect-ratio:5/4}}
.hero-overlay-wrap{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-overlay-wrap>*{pointer-events:auto}
.hero-overlay-wrap::before{content:"";position:absolute;inset:0;background:linear-gradient(to right,var(--paper) 0%,var(--paper) 20%,rgba(248,244,236,.85) 28%,rgba(248,244,236,.4) 40%,rgba(248,244,236,.1) 52%,transparent 62%);pointer-events:none;z-index:-1}
@media(max-width:1024px){
  .hero-overlay-wrap{position:relative;inset:auto}
  .hero-overlay-wrap::before{display:none}
  .hero-overlay-inner{padding:2.25rem 1.5rem 3rem;height:auto}
  .hero-overlay{max-width:100%}
}
@media(max-width:1024px) and (min-width:640px){.hero-overlay-inner{padding:3rem 1.5rem 3.5rem}}
.hero-overlay-inner{max-width:1360px;margin:0 auto;padding:2.5rem 1.5rem;position:relative;height:100%}
@media(min-width:1024px){.hero-overlay-inner{padding:5rem 3rem}}
.hero-overlay{position:relative;max-width:100%;width:100%}
@media(min-width:640px){.hero-overlay{max-width:min(420px,calc(var(--face-safe-x) - 5rem))}}
.hero-top-line{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.hero-top-line .line{width:2rem;height:1px;background:rgba(30,40,32,.5)}
.hero-top-line .label{font-family:var(--font-latin);font-size:.64rem;letter-spacing:.3em;color:var(--vermillion);text-transform:uppercase}
.hero-h1{font-family:var(--font-serif);font-size:clamp(1.85rem,3.2vw,2.6rem);line-height:1.35;color:var(--pine);font-weight:400;letter-spacing:.18em}
.hero-h1 .accent{position:relative;color:var(--vermillion)}
.hero-h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:rgba(196,148,40,.7)}
.hero-lead{margin-top:1.25rem;color:var(--ink-mid);line-height:1.95;max-width:360px;font-size:.82rem}
@media(min-width:1024px){.hero-lead{margin-top:1.5rem;font-size:.85rem}}
.hero-stats{margin-top:1.6rem;display:flex;gap:1.25rem;flex-wrap:wrap}
@media(min-width:640px){.hero-stats{gap:2rem}}
@media(min-width:1024px){.hero-stats{margin-top:2rem;gap:2.25rem}}
.hero-stat dt{display:flex;align-items:baseline;gap:2px}
.hero-stat .num{font-family:var(--font-serif);font-size:1.7rem;line-height:1;color:var(--pine)}
@media(min-width:1024px){.hero-stat .num{font-size:1.95rem}}
.hero-stat .sup{font-family:var(--font-latin);font-size:.8rem;color:var(--gold)}
.hero-stat dd{margin-top:.5rem;font-family:var(--font-latin);font-size:.6rem;letter-spacing:.22em;color:var(--ink-light)}
.hero-cta{margin-top:1.75rem}
@media(min-width:1024px){.hero-cta{margin-top:2.25rem}}
.hero-cta a{display:inline-flex;align-items:center;justify-content:space-between;gap:1.25rem;width:100%;max-width:260px;height:2.75rem;padding:0 1.1rem;border:1px solid var(--pine);color:var(--pine);transition:background-color .25s,color .25s;font-size:.72rem;letter-spacing:.22em;background:rgba(248,244,236,.7);backdrop-filter:blur(2px)}
.hero-cta a:hover{background:var(--pine);color:var(--paper)}
.hero-cta a .arrow{transition:transform .3s}
.hero-cta a:hover .arrow{transform:translateX(4px)}

/* ═══ FarmerStorySection ═══ */
.farmers-section{background:linear-gradient(to bottom,transparent 0,transparent 40px,var(--paper-warm) 40px);overflow:visible;position:relative;margin-top:-60px;z-index:2}
.farmers-stage{position:relative;z-index:1}
.farmers-section::before{content:"";position:absolute;left:0;right:0;top:-1px;height:80px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,42 C40,12 110,8 165,38 C210,58 260,28 320,22 C380,16 430,48 500,44 C560,40 610,14 680,18 C740,22 780,52 860,46 C920,42 970,20 1040,26 C1100,32 1140,58 1215,50 C1275,44 1320,24 1385,30 C1410,32 1428,38 1440,36 L1440,80 L0,80 Z' fill='%23f2ece0'/%3E%3C/svg%3E") no-repeat top center;background-size:100% 100%;pointer-events:none;z-index:1}
.farmers-head{display:flex;flex-direction:column;gap:1.5rem;padding-top:7rem;padding-bottom:2rem;align-items:flex-start;justify-content:space-between;position:relative;z-index:2}
@media(min-width:1024px){.farmers-head{flex-direction:row;align-items:flex-end;padding-top:9rem}}
.farmers-label{font-family:var(--font-latin);font-size:.72rem;letter-spacing:.24em;color:var(--ink-light);text-transform:uppercase}
.farmers-title{margin-top:.5rem;font-family:var(--font-serif);font-size:1.7rem;color:var(--ink);font-weight:400;line-height:1.35}
@media(min-width:640px){.farmers-title{font-size:2rem}}
.farmers-title em{font-style:normal;color:var(--gold);font-family:var(--font-latin);font-size:.85em;margin:0 .35em}
@media(min-width:1024px){.farmers-title{font-size:3rem}}
.farmers-seeall{font-size:.85rem;color:var(--ink-mid);border-bottom:1px solid var(--rule-dark);padding-bottom:.25rem;letter-spacing:.12em}
.farmers-seeall:hover{color:var(--vermillion)}
.farmers-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;padding-bottom:2.5rem;align-items:start;min-height:520px}
@media(min-width:1024px){.farmers-stage{grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);gap:2.5rem;align-items:center}}
.farmers-portrait{position:relative}
.farmers-portrait-box{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--ink)}
.farmers-portrait-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s}
.farmers-portrait-box img.active{opacity:1}
.farmers-portrait .stamp{position:absolute;top:-1rem;left:-1rem;width:3.2rem;height:3.2rem;font-size:.85rem}
.farmers-text{display:flex;flex-direction:column;gap:1.25rem}
.farmers-text .loc{display:flex;align-items:center;gap:.75rem;font-size:.85rem;color:var(--ink-mid);font-family:var(--font-latin)}
.farmers-text .loc .line{width:2rem;height:1px;background:var(--rule-dark)}
.farmers-text .nick{font-family:var(--font-serif);font-size:2.2rem;color:var(--ink);line-height:1.2;font-weight:400}
@media(min-width:640px){.farmers-text .nick{font-size:3rem}}
@media(min-width:1024px){.farmers-text .nick{font-size:4rem}}
.farmers-text blockquote{border-left:2px solid var(--vermillion);padding:.25rem 0 .25rem 1.25rem}
.farmers-text blockquote p{font-family:var(--font-serif);font-size:1.15rem;color:var(--pine);line-height:1.65}
@media(min-width:640px){.farmers-text blockquote p{font-size:1.4rem}}
@media(min-width:1024px){.farmers-text blockquote p{font-size:1.7rem}}
.farmers-text .intro{color:var(--ink-mid);line-height:1.9;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.farmers-text .tags{display:flex;flex-wrap:wrap;gap:.5rem;padding-top:.25rem}
.farmers-text .ctas{display:flex;gap:.75rem;padding-top:.5rem}
.farmers-nav{order:3;border-top:1px solid var(--rule-dark);background:var(--paper);margin:0 -1.5rem;padding:0 1.5rem;min-width:0;max-width:100vw}
@media(min-width:1024px){.farmers-nav{order:0;margin:0;padding:0;border-top:0;background:transparent;align-self:stretch}}
.farmers-nav-ul{list-style:none;display:flex;overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
@media(min-width:1024px){.farmers-nav-ul{flex-direction:column;overflow-x:visible;gap:.4rem}}
.farmers-nav-btn{flex:1;min-width:160px;display:flex;align-items:center;gap:.6rem;padding:.85rem .5rem;border-right:1px solid var(--rule);text-align:left;transition:background-color .2s;width:100%}
@media(min-width:640px){.farmers-nav-btn{min-width:180px;gap:.75rem;padding:1rem .5rem}}
@media(min-width:1024px){.farmers-nav-btn{flex:none;min-width:0;width:100%;border-right:0;border-bottom:1px solid var(--rule);padding:.9rem .75rem;gap:.85rem}}
.farmers-nav-ul li:last-child .farmers-nav-btn{border-right:0}
@media(min-width:1024px){.farmers-nav-ul li:last-child .farmers-nav-btn{border-bottom:0}}
.farmers-nav-btn:hover{background:rgba(242,236,224,.5)}
.farmers-nav-btn.active{background:var(--paper-warm)}
@media(min-width:1024px){.farmers-nav-btn.active{background:var(--paper-card);border-left:2px solid var(--vermillion);padding-left:calc(.75rem - 2px)}}
.farmers-nav-avatar{width:2.5rem;height:2.5rem;border-radius:50%;overflow:hidden;background:var(--paper-warm);flex-shrink:0;border:2px solid transparent}
.farmers-nav-btn.active .farmers-nav-avatar{border-color:var(--vermillion)}
.farmers-nav-avatar img{width:100%;height:100%;object-fit:cover}
.farmers-nav-info{min-width:0}
.farmers-nav-info .nk{display:block;font-family:var(--font-serif);font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.farmers-nav-info .rg{display:block;font-family:var(--font-latin);font-size:.7rem;color:var(--ink-light)}

/* ═══ Seasonal ═══ */
.seasonal{background:var(--pine);color:var(--paper-warm);padding:4rem 0;position:relative;overflow:hidden}
.seasonal::after{content:"";position:absolute;inset:0;background:url('../images/meat-pattern.jpg') repeat;background-size:520px;opacity:.15;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.seasonal::before{content:"穀雨";position:absolute;top:2rem;right:3rem;font-family:var(--font-serif);font-size:14rem;color:var(--gold);line-height:.8;pointer-events:none;letter-spacing:.08em;z-index:1;font-weight:500}
@media(max-width:1024px){.seasonal::before{font-size:8rem;right:1rem}}
.seasonal .seasonal-lead{color:rgba(242,236,224,.8)}
.seasonal .seasonal-h2{color:var(--paper)}
.seasonal .seasonal-h2 .en{color:rgba(242,236,224,.5)}
.seasonal .farmers-seeall{color:var(--paper-warm);border-color:rgba(242,236,224,.3)}
.seasonal .farmers-seeall:hover{color:var(--gold)}
.seasonal-deco{position:absolute;pointer-events:none;opacity:.22;color:var(--gold);z-index:1}
.seasonal-deco.tl{top:2rem;left:1.5rem;width:120px;transform:rotate(-8deg)}
.seasonal-deco.br{bottom:2rem;right:2rem;width:140px;transform:rotate(5deg)}
.seasonal-deco.bl{bottom:3rem;left:2rem;width:96px;transform:rotate(12deg);opacity:.18}
@media(max-width:1024px){.seasonal-deco{display:none}}
.seasonal .container{position:relative;z-index:2}

/* 分類區 */
.cat-emblem{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin-right:.5rem;color:currentColor;opacity:.7;vertical-align:-.35rem}
.cat-tab.active .cat-emblem{opacity:1}
.category{position:relative;overflow:hidden}
.category-brush{position:absolute;right:-4rem;top:5rem;width:280px;opacity:.06;pointer-events:none;color:var(--ink)}
.category-brush.bl{left:-4rem;right:auto;top:auto;bottom:3rem;transform:scaleX(-1)}
@media(max-width:1024px){.category-brush{display:none}}
@media(min-width:1024px){.seasonal{padding:6rem 0}}
.seasonal-head{display:flex;flex-direction:column;gap:1.5rem;margin-bottom:3rem}
@media(min-width:1024px){.seasonal-head{flex-direction:row;align-items:flex-end;justify-content:space-between}}
.seasonal-h2{margin-top:.75rem;font-family:var(--font-serif);font-size:2rem;color:var(--ink);display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;font-weight:400}
@media(min-width:640px){.seasonal-h2{font-size:2.5rem;gap:1rem}}
.seasonal-h2 .term{color:var(--gold)}
.seasonal-h2 .en{font-family:var(--font-latin);font-size:1rem;color:var(--ink-light);letter-spacing:.14em}
@media(min-width:1024px){.seasonal-h2{font-size:3rem}}
.seasonal-lead{margin-top:.9rem;color:var(--ink-mid);max-width:620px;line-height:1.9}
.product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:1024px){.product-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.product-card{position:relative;background:var(--paper-card);border:1px solid var(--rule);border-radius:2px;transition:transform .5s cubic-bezier(.2,.9,.3,1),border-color .3s,box-shadow .4s,filter .3s;z-index:1}
.product-card::before{content:"";position:absolute;inset:0;background:var(--earth-pale);border:1px solid var(--rule-dark);border-radius:2px;z-index:-1;transform:translate(0,0) rotate(0);transform-origin:center;transition:transform .5s cubic-bezier(.2,.9,.3,1),border-color .3s,box-shadow .4s;box-shadow:0 0 0 rgba(0,0,0,0)}
.product-card::after{content:"";position:absolute;top:-2px;right:22px;width:28px;height:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 52'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M8 0v34M14 0v44M20 0v34' stroke='%23c49428' stroke-width='2'/%3E%3Cg stroke='%23c49428' stroke-width='1.7'%3E%3Cpath d='M8 18q-3 1-5 2.5M8 22q-3 1-5 2.5M8 26q-3 1-5 2.5M8 30q-3 1-5 2.5'/%3E%3Cpath d='M14 22q-3.2 1-5.5 2.5M14 26q-3.2 1-5.5 2.5M14 30q-3.2 1-5.5 2.5M14 34q-3.2 1-5.5 2.5M14 38q-3.2 1-5.5 2.5'/%3E%3Cpath d='M14 22q3.2 1 5.5 2.5M14 26q3.2 1 5.5 2.5M14 30q3.2 1 5.5 2.5M14 34q3.2 1 5.5 2.5M14 38q3.2 1 5.5 2.5'/%3E%3Cpath d='M20 18q3 1 5 2.5M20 22q3 1 5 2.5M20 26q3 1 5 2.5M20 30q3 1 5 2.5'/%3E%3C/g%3E%3Cg fill='%23d9a942' stroke='%23c49428' stroke-width='.9'%3E%3Cellipse cx='8' cy='36' rx='2.6' ry='3.8'/%3E%3Cellipse cx='14' cy='46' rx='3.2' ry='4.6'/%3E%3Cellipse cx='20' cy='36' rx='2.6' ry='3.8'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") no-repeat top center;background-size:28px 52px;transition:height .55s cubic-bezier(.2,.9,.3,1) .1s;z-index:2;pointer-events:none}
.product-card:hover{transform:translate(-6px,-7px) rotate(-2deg);border-color:var(--pine);box-shadow:-8px 10px 20px -10px rgba(30,40,32,.16),-2px 2px 0 rgba(30,40,32,.04)}
.product-card:hover::before{transform:translate(7px,8px) rotate(2.5deg) scale(1.035);border-color:var(--earth);box-shadow:5px -3px 12px -8px rgba(139,111,79,.18)}
.product-card:hover::after{height:52px}
.product-img{aspect-ratio:4/5;background:var(--paper-warm);overflow:hidden;position:relative;border-radius:2px 2px 0 0}
.product-img img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform .7s}
.product-card:hover .product-img img{transform:scale(1.16)}
.product-tag{position:absolute;top:.75rem;left:.75rem}
.product-body{padding:1rem}
.product-farmer{font-size:.72rem;color:var(--vermillion);font-family:var(--font-latin);letter-spacing:.08em}
.product-farmer:hover{text-decoration:underline}
.product-name{margin-top:.35rem;font-family:var(--font-serif);font-size:.95rem;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
.product-price{margin-top:.8rem;font-family:var(--font-latin);font-size:1.1rem;color:var(--ink)}
.product-price .strike{color:var(--ink-light);text-decoration:line-through;font-size:.8rem;margin-left:.4rem}

/* 商品分類區 */
.category{background:var(--paper);padding:4rem 0}
@media(min-width:1024px){.category{padding:6rem 0}}
.category-head{text-align:center;margin-bottom:2.5rem}
.category-h2{margin-top:.75rem;font-family:var(--font-serif);font-size:1.9rem;color:var(--ink);font-weight:400}
@media(min-width:640px){.category-h2{font-size:2.3rem}}
@media(min-width:1024px){.category-h2{font-size:3rem}}
.category-tabs{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:.25rem;margin-bottom:2.5rem;border-bottom:1px solid var(--rule);overflow-x:auto;-webkit-overflow-scrolling:touch}
.category-tabs::-webkit-scrollbar{display:none}
@media(min-width:1024px){.category-tabs{flex-wrap:wrap;justify-content:center;overflow-x:visible}}
.cat-tab{padding:.75rem 1rem;font-size:.85rem;letter-spacing:.12em;border-bottom:2px solid transparent;margin-bottom:-1px;color:var(--ink-mid);transition:color .2s,border-color .2s;flex-shrink:0;white-space:nowrap}
@media(min-width:1024px){.cat-tab{padding:.75rem 1.25rem;font-size:.88rem}}
.cat-tab .zh{font-family:var(--font-serif)}
.cat-tab .en{margin-left:.5rem;font-family:var(--font-latin);font-size:.72rem;color:var(--ink-light)}
.cat-tab:hover{color:var(--ink)}
.cat-tab.active{color:var(--vermillion);border-color:var(--vermillion)}
.category-more{text-align:center;margin-top:3rem}
.category-more a{display:inline-block;padding:0 2rem;height:3rem;line-height:3rem;border:1px solid var(--pine);color:var(--pine);font-size:.88rem;letter-spacing:.14em;transition:background-color .2s,color .2s}
.category-more a:hover{background:var(--pine);color:var(--paper)}
.product-card.sq .product-img{aspect-ratio:1/1}

/* ═══ Shorts ═══ */
.shorts{background:var(--paper-warm);padding:4rem 0;position:relative;overflow:hidden}
.shorts::before{content:"";position:absolute;inset:0;background:url('../images/paper-texture.png') repeat;background-size:320px auto;mix-blend-mode:multiply;opacity:.50;pointer-events:none;z-index:0}
.shorts .container{position:relative;z-index:1}
@media(min-width:1024px){.shorts{padding:5.5rem 0}}
.shorts-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2rem;align-items:flex-start}
@media(min-width:1024px){.shorts-head{flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:2.5rem}}
.shorts-label{font-family:var(--font-latin);font-size:.72rem;letter-spacing:.3em;color:var(--vermillion);text-transform:uppercase}
.shorts-h2{margin-top:.35rem;font-family:var(--font-serif);font-size:1.7rem;color:var(--ink);font-weight:400;line-height:1.3}
@media(min-width:640px){.shorts-h2{font-size:2rem}}
@media(min-width:1024px){.shorts-h2{font-size:2.4rem}}
.shorts-lead{color:var(--ink-mid);font-size:.88rem;margin-top:.35rem;max-width:420px}
.shorts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:640px){.shorts-grid{grid-template-columns:repeat(3,1fr);gap:1rem}}
@media(min-width:1024px){.shorts-grid{grid-template-columns:repeat(5,1fr);gap:1.25rem}}
.short-card{position:relative;aspect-ratio:9/16;overflow:hidden;background:var(--ink);border-radius:4px;cursor:pointer;display:block;transition:transform .4s}
.short-card:hover{transform:translateY(-4px)}
.short-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.short-card:hover img{transform:scale(1.08)}
.short-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,40,32,.85) 0%,rgba(30,40,32,.15) 45%,transparent 75%);z-index:1;pointer-events:none}
.short-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(248,244,236,.92);display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .3s,background-color .3s}
.short-play svg{width:16px;height:16px;fill:var(--ink);margin-left:2px}
.short-card:hover .short-play{transform:translate(-50%,-50%) scale(1.1);background:var(--gold)}
.short-duration{position:absolute;top:.55rem;right:.55rem;padding:.18rem .45rem;background:rgba(30,40,32,.65);color:var(--paper);font-size:.62rem;font-family:var(--font-latin);letter-spacing:.1em;border-radius:2px;z-index:2;backdrop-filter:blur(4px)}
.short-meta{position:absolute;bottom:0;left:0;right:0;padding:.75rem .85rem;color:var(--paper);z-index:2}
.short-title{font-family:var(--font-serif);font-size:.88rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.short-sub{font-family:var(--font-latin);font-size:.62rem;margin-top:.3rem;color:var(--gold);letter-spacing:.14em;text-transform:uppercase}

/* ═══ Films ═══ */
.films{background:var(--pine);color:var(--paper-warm);padding:4rem 0;position:relative;overflow:hidden}
@media(min-width:1024px){.films{padding:6rem 0}}
.films::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,rgba(196,148,40,.08) 0%,transparent 50%),radial-gradient(circle at 85% 100%,rgba(200,64,42,.06) 0%,transparent 45%);pointer-events:none}
.films::after{content:"";position:absolute;left:-13rem;bottom:-12rem;width:min(840px,72vw);height:min(840px,72vw);background:url('../images/tulip-lineart.png') no-repeat center;background-size:contain;filter:invert(1);mix-blend-mode:screen;opacity:.4;pointer-events:none;z-index:1}
@media(max-width:640px){.films::after{width:110vw;height:110vw;left:-15vw;bottom:0;opacity:.3}}
.films .container{position:relative;z-index:1}
.films-head{display:flex;flex-direction:column;gap:.5rem;margin-bottom:2.5rem;align-items:flex-start}
@media(min-width:1024px){.films-head{flex-direction:row;align-items:flex-end;justify-content:space-between;margin-bottom:3rem}}
.films-label{font-family:var(--font-latin);font-size:.72rem;letter-spacing:.3em;color:var(--gold);text-transform:uppercase}
.films-h2{margin-top:.4rem;font-family:var(--font-serif);font-size:1.85rem;color:var(--paper);font-weight:400;line-height:1.3}
@media(min-width:640px){.films-h2{font-size:2.2rem}}
@media(min-width:1024px){.films-h2{font-size:2.7rem}}
.films-lead{color:rgba(242,236,224,.7);font-size:.9rem;max-width:460px;line-height:1.85}
.films-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:1024px){.films-grid{grid-template-columns:1.7fr 1fr;gap:2rem}}
.film-featured{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--pine);display:block;cursor:pointer}
.film-side{display:grid;grid-template-columns:1fr;gap:1.25rem}
@media(min-width:640px) and (max-width:1023px){.film-side{grid-template-columns:1fr 1fr}}
.film-card{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--pine);display:block;cursor:pointer}
.film-featured img,.film-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.film-featured:hover img,.film-card:hover img{transform:scale(1.04)}
.film-featured::before,.film-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,40,32,.95) 0%,rgba(30,40,32,.5) 35%,rgba(30,40,32,.1) 65%,transparent 100%);z-index:1;pointer-events:none}
.film-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:50%;background:rgba(248,244,236,.9);display:flex;align-items:center;justify-content:center;z-index:2;transition:transform .3s,background-color .3s}
.film-play svg{width:22px;height:22px;fill:var(--ink);margin-left:3px}
.film-featured:hover .film-play,.film-card:hover .film-play{transform:translate(-50%,-50%) scale(1.1);background:var(--gold)}
.film-card .film-play{width:48px;height:48px}
.film-card .film-play svg{width:16px;height:16px}
.film-duration{position:absolute;top:1rem;right:1rem;padding:.3rem .7rem;background:rgba(30,40,32,.7);color:var(--paper);font-size:.7rem;font-family:var(--font-latin);letter-spacing:.14em;border-radius:2px;z-index:2;backdrop-filter:blur(6px)}
.film-card .film-duration{padding:.2rem .5rem;font-size:.62rem}
.film-meta{position:absolute;bottom:0;left:0;right:0;padding:1.25rem 1.5rem;z-index:2}
.film-card .film-meta{padding:.9rem 1rem}
.film-tag{display:inline-block;font-family:var(--font-latin);font-size:.64rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase;padding-bottom:.2rem}
.film-title{font-family:var(--font-serif);font-size:1.35rem;color:var(--paper);line-height:1.35;margin-top:.3rem}
@media(min-width:1024px){.film-featured .film-title{font-size:1.9rem}}
.film-card .film-title{font-size:.95rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.film-sub{margin-top:.4rem;font-family:var(--font-latin);font-size:.7rem;color:rgba(242,236,224,.7);letter-spacing:.1em}
.films-foot{margin-top:3rem;text-align:center}
.films-foot a{display:inline-flex;align-items:center;gap:.75rem;color:var(--gold);border-bottom:1px solid rgba(196,148,40,.5);padding:.3rem 0;font-size:.86rem;letter-spacing:.14em;transition:color .2s,border-color .2s}
.films-foot a:hover{color:var(--paper);border-color:var(--paper)}

/* ═══ Selected ═══ */
.selected{background:var(--paper-card);padding:4rem 0;position:relative;overflow:hidden}
@media(min-width:1024px){.selected{padding:6rem 0}}
.selected::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(to right,transparent,var(--rule-dark) 20%,var(--rule-dark) 80%,transparent)}
.selected-head{max-width:680px;margin:0 auto 3rem;text-align:center;position:relative;z-index:2}
.selected-label{font-family:var(--font-latin);font-size:.72rem;letter-spacing:.3em;color:var(--earth);text-transform:uppercase}
.selected-h2{margin-top:.75rem;font-family:var(--font-serif);font-size:1.9rem;color:var(--ink);font-weight:400;line-height:1.35}
@media(min-width:640px){.selected-h2{font-size:2.3rem}}
@media(min-width:1024px){.selected-h2{font-size:2.6rem}}
.selected-sub{margin-top:.9rem;font-family:var(--font-latin);font-size:.75rem;letter-spacing:.18em;color:var(--ink-light)}
.selected-lead{margin-top:1.25rem;color:var(--ink-mid);line-height:1.95;font-size:.92rem}
.product-reason{margin-top:.6rem;display:flex;align-items:flex-start;gap:.5rem;font-size:.78rem;color:var(--pine-mid);line-height:1.6}
.product-reason span{flex-shrink:0;display:inline-block;padding:.1rem .45rem;background:var(--leaf-pale);color:var(--pine);font-family:var(--font-latin);font-size:.66rem;letter-spacing:.12em;border-radius:2px;margin-top:.1rem}
.selected .product-grid{position:relative;z-index:2}
.product-story{margin-top:.5rem;font-family:var(--font-serif);font-size:.82rem;color:var(--ink-mid);line-height:1.75;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.product-price-quiet{margin-top:.9rem;font-family:var(--font-latin);font-size:.82rem;color:var(--ink-light);letter-spacing:.06em;border-top:1px solid var(--rule);padding-top:.7rem}
.selected-foot{margin-top:3rem;text-align:center;position:relative;z-index:2}
.selected-foot a{display:inline-flex;align-items:center;gap:.75rem;color:var(--earth);border-bottom:1px solid var(--earth);padding:.25rem 0;font-size:.88rem;letter-spacing:.14em;transition:color .2s,border-color .2s}
.selected-foot a:hover{color:var(--vermillion);border-color:var(--vermillion)}

/* ═══ Article ═══ */
.article{background:var(--earth-pale);padding:4rem 0;position:relative;overflow:hidden}
.article::before{content:"";position:absolute;inset:0;background:url('../images/hands-lineart.png') no-repeat;background-position:right 0 bottom -30px;background-size:32% auto;opacity:.2;filter:invert(1);mix-blend-mode:multiply;pointer-events:none;z-index:0}
@media(max-width:640px){.article::before{background-size:50% auto;background-position:right 0 bottom -20px}}
.article .container{position:relative;z-index:3}
@media(min-width:1024px){.article{padding:6rem 0}}
.article-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:1024px){.article-grid{grid-template-columns:1.1fr 1fr;gap:3.5rem}}
.article-img-wrap{position:relative}
.article-img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-warm)}
.article-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.article-grid:hover .article-img img{transform:scale(1.02)}
.article-tag{position:absolute;top:1rem;left:1rem;padding:.3rem .75rem;background:var(--paper);font-size:.72rem;letter-spacing:.14em;color:var(--earth);border:1px solid rgba(139,111,79,.4);font-family:var(--font-latin)}
.article-h2{margin-top:1rem;font-family:var(--font-serif);font-size:1.85rem;color:var(--ink);line-height:1.3;font-weight:400}
@media(min-width:640px){.article-h2{font-size:2.3rem}}
@media(min-width:1024px){.article-h2{font-size:3rem}}
.article-lead{margin-top:1.5rem;color:var(--ink-mid);line-height:1.9}
.article-meta{margin-top:2rem;display:flex;align-items:center;gap:1rem;font-size:.72rem;color:var(--ink-light);font-family:var(--font-latin);letter-spacing:.12em}
.article-meta .dot{width:1.5rem;height:1px;background:var(--rule-dark)}
.article-cta{margin-top:2rem;display:inline-block;font-size:.9rem;color:var(--vermillion);border-bottom:1px solid rgba(200,64,42,.5);padding-bottom:.25rem}
.article-cta:hover{border-color:var(--vermillion)}

/* ═══ Trust ═══ */
.trust{background:var(--paper-warm);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:2.5rem 0}
.trust-label{text-align:center;font-family:var(--font-latin);font-size:.72rem;letter-spacing:.28em;color:var(--ink-light);text-transform:uppercase;margin-bottom:1.5rem}
.trust-list{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.25rem 2.5rem}
.trust-item{display:flex;align-items:center;gap:.75rem}
.trust-seal{display:flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border:1px solid rgba(139,111,79,.5);color:var(--earth);font-family:var(--font-serif);font-size:.88rem;background:var(--earth-pale)}
.trust-text{font-size:.85rem;color:var(--ink-mid);letter-spacing:.08em}

/* ═══ B2B ═══ */
.b2b{position:relative;background:var(--pine);color:var(--paper-warm);overflow:hidden}
.b2b::before{content:"";position:absolute;inset:0;opacity:.1;background-image:repeating-linear-gradient(135deg,transparent 0 24px,var(--gold) 24px 25px);pointer-events:none}
.b2b-inner{position:relative;padding:4rem 0;display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:1024px){.b2b-inner{grid-template-columns:1.2fr 1fr;padding:5rem 0}}
.b2b-label{font-family:var(--font-latin);font-size:.72rem;letter-spacing:.24em;color:var(--gold);text-transform:uppercase}
.b2b-h2{margin-top:.75rem;font-family:var(--font-serif);font-size:1.7rem;line-height:1.3;font-weight:400}
@media(min-width:640px){.b2b-h2{font-size:2rem}}
@media(min-width:1024px){.b2b-h2{font-size:3rem}}
.b2b-h2 .gold{color:var(--gold)}
.b2b-lead{margin-top:1.2rem;color:rgba(242,236,224,.85);line-height:1.9;max-width:520px}
.b2b-btn{margin-top:2rem;display:inline-block;padding:0 2rem;height:3rem;line-height:3rem;background:var(--vermillion);color:var(--paper);font-size:.88rem;letter-spacing:.14em;transition:background-color .2s}
.b2b-btn:hover{background:var(--vermillion-mid)}
.b2b-kpi{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.b2b-kpi li{border-left:2px solid var(--gold);padding:.5rem 0 .5rem 1rem}
.b2b-kpi .k{font-family:var(--font-serif);font-size:1.1rem}
.b2b-kpi .v{margin-top:.35rem;font-size:.72rem;color:rgba(242,236,224,.7);font-family:var(--font-latin);letter-spacing:.1em}

/* ═══ Footer ═══ */
footer{background:var(--ink);color:var(--paper-warm)}
.foot-inner{display:grid;grid-template-columns:1fr;gap:2.5rem;padding:3rem 0}
@media(min-width:640px){.foot-inner{gap:3rem;padding:4rem 0}}
@media(min-width:1024px){.foot-inner{grid-template-columns:2fr 3fr 2fr;padding:5rem 0}}
.foot-brand{display:flex;align-items:center;gap:.75rem}
.foot-brand .mark{display:flex;flex-direction:column;align-items:center;justify-content:center;width:3rem;height:3rem;border:1.5px solid rgba(242,236,224,.6)}
.foot-brand .mark .zh{font-family:var(--font-serif);font-size:.75rem;line-height:1}
.foot-brand .mark .en{font-family:var(--font-latin);font-size:8px;margin-top:2px;letter-spacing:.1em}
.foot-brand-name{font-family:var(--font-serif);font-size:1.2rem}
.foot-desc{margin-top:1.25rem;font-size:.88rem;color:rgba(242,236,224,.7);line-height:1.9}
.foot-addr{margin-top:1.25rem;font-style:normal;font-family:var(--font-latin);font-size:.72rem;color:rgba(242,236,224,.6);line-height:1.9}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media(max-width:480px){.foot-cols{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
.foot-col-title{font-family:var(--font-latin);font-size:.72rem;letter-spacing:.18em;color:rgba(242,236,224,.5);text-transform:uppercase;margin-bottom:1rem}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.foot-col a{font-size:.88rem}
.foot-col a:hover{color:var(--vermillion)}
.foot-news p{font-size:.88rem;color:rgba(242,236,224,.8);margin-bottom:1rem}
.foot-news-form{display:flex;gap:0}
.foot-news-form input{flex:1;min-width:0;background:rgba(242,236,224,.1);border:1px solid rgba(242,236,224,.2);padding:0 .75rem;height:2.75rem;color:var(--paper);font-family:var(--font-sans);font-size:.85rem}
.foot-news-form input::placeholder{color:rgba(242,236,224,.4)}
.foot-news-form input:focus{outline:none;border-color:var(--vermillion)}
.foot-news-form button{height:2.75rem;padding:0 1.25rem;background:var(--vermillion);color:var(--paper);font-size:.85rem;letter-spacing:.1em}
.foot-news-form button:hover{background:var(--vermillion-mid)}
.foot-bottom{border-top:1px solid rgba(242,236,224,.1)}
.foot-bottom-inner{padding:1.25rem 0;display:flex;flex-direction:column;gap:.75rem;align-items:center;justify-content:space-between;font-size:.72rem;color:rgba(242,236,224,.5);font-family:var(--font-latin)}
@media(min-width:640px){.foot-bottom-inner{flex-direction:row}}
.foot-bottom .links{display:flex;gap:1.25rem}
.foot-bottom .links a:hover{color:var(--paper)}

/* ═══ Utilities ═══ */
.hidden-lg{display:block}
@media(min-width:1024px){.hidden-lg{display:none}}
.show-lg{display:none}
@media(min-width:1024px){.show-lg{display:inline-block}}

/* ═══════════════════════════════════════════
   一級頁共用元件：Breadcrumb / Page Hero / Filter Bar / Pagination
   ═══════════════════════════════════════════ */

/* Breadcrumb — 透明融入：浮在下一個 hero 上方，讓 hero 背景往上吃掉米色 gap */
.breadcrumb{background:transparent;border:0;padding:1rem 0 .75rem;position:relative;z-index:5;margin-bottom:-2.6rem}
.breadcrumb-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:.72rem;color:var(--ink-light);font-family:var(--font-latin);letter-spacing:.1em;opacity:.78;text-transform:uppercase}
.breadcrumb-list a{color:inherit;text-decoration:none;transition:color .2s,opacity .2s;border-bottom:1px dotted transparent;padding-bottom:1px}
.breadcrumb-list a:hover{color:var(--vermillion);border-bottom-color:var(--vermillion)}
.breadcrumb-list .sep{color:inherit;opacity:.45;margin:0 .05rem;font-weight:300}
.breadcrumb-list .current{color:inherit;opacity:1;font-weight:500;letter-spacing:.08em}

/* 下一個是深色 hero（有圖片／有 scrim／專題 hero）→ breadcrumb 反白 */
.breadcrumb:has(+ .page-hero.has-photo) .breadcrumb-list,
.breadcrumb:has(+ .story-hero) .breadcrumb-list,
.breadcrumb:has(+ .farmers-hero) .breadcrumb-list,
.breadcrumb:has(+ .summer-hero) .breadcrumb-list,
.breadcrumb:has(+ .winter-hero) .breadcrumb-list,
.breadcrumb:has(+ .spring-hero) .breadcrumb-list,
.breadcrumb:has(+ .autumn-hero) .breadcrumb-list,
.brand-stage .breadcrumb-list,
.summer-stage .breadcrumb-list,
.spring-stage .breadcrumb-list,
.winter-stage .breadcrumb-list,
.autumn-stage .breadcrumb-list,
.story-stage .breadcrumb-list{color:var(--paper);opacity:.7;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.breadcrumb:has(+ .page-hero.has-photo) .breadcrumb-list .current,
.breadcrumb:has(+ .story-hero) .breadcrumb-list .current,
.breadcrumb:has(+ .farmers-hero) .breadcrumb-list .current,
.brand-stage .breadcrumb-list .current,
.summer-stage .breadcrumb-list .current,
.spring-stage .breadcrumb-list .current,
.winter-stage .breadcrumb-list .current,
.autumn-stage .breadcrumb-list .current,
.story-stage .breadcrumb-list .current{color:var(--paper);opacity:1}

/* Page Hero — 一級頁標題區（低調版，保留農民曆氣質） */
.page-hero{background:var(--paper);padding:3rem 0 2.5rem;border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.brand-stage .page-hero,
.brand-stage .page-hero.has-photo{border-bottom:0 !important}
.brand-stage .breadcrumb{background:transparent;border-bottom:0}
@media(min-width:1024px){.page-hero{padding:4.5rem 0 3.5rem}}
.page-hero::before{content:"";position:absolute;right:-4rem;top:-2rem;width:260px;height:260px;background:url('../images/tulip-lineart.png') no-repeat center/contain;opacity:.06;pointer-events:none;transform:rotate(8deg)}
@media(max-width:640px){.page-hero::before{width:180px;height:180px;right:-3rem;opacity:.04}}
.page-hero .container{position:relative;z-index:1}
.page-hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:end}
@media(min-width:1024px){.page-hero-grid{grid-template-columns:1.3fr 1fr;gap:3rem}}
.page-hero-label{display:flex;align-items:center;gap:.75rem;font-family:var(--font-latin);font-size:.68rem;letter-spacing:.32em;color:var(--vermillion);text-transform:uppercase}
.page-hero-label .line{width:2rem;height:1px;background:var(--ink-mid);opacity:.4}
.page-hero-h1{margin-top:1.25rem;font-family:var(--font-serif);font-size:2.2rem;color:var(--pine);line-height:1.2;font-weight:400;letter-spacing:.04em}
@media(min-width:640px){.page-hero-h1{font-size:3rem}}
@media(min-width:1024px){.page-hero-h1{font-size:4rem}}
.page-hero-h1 .accent{color:var(--vermillion);position:relative}
.page-hero-h1 .accent::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;background:rgba(196,148,40,.7)}
.page-hero-lead{margin-top:1.5rem;color:var(--ink-mid);line-height:1.95;max-width:540px;font-size:.95rem}
.page-hero-stats{margin-top:2.25rem;display:flex;gap:2.5rem;flex-wrap:wrap}
.page-hero-stat{display:flex;flex-direction:column}
.page-hero-stat .num{font-family:var(--font-serif);font-size:2.2rem;color:var(--pine);line-height:1}
.page-hero-stat .num .sup{font-family:var(--font-latin);font-size:.9rem;color:var(--gold);margin-left:2px;vertical-align:super}
.page-hero-stat .lbl{font-family:var(--font-latin);font-size:.62rem;letter-spacing:.22em;color:var(--ink-light);margin-top:.5rem;text-transform:uppercase}

/* Filter Bar 分類篩選 */
.filter-bar{background:var(--paper-card);border-bottom:1px solid var(--rule);padding:1rem 0;position:sticky;top:4.5rem;z-index:30;backdrop-filter:blur(4px)}
@media(min-width:1024px){.filter-bar{top:5rem}}
.filter-inner{display:flex;flex-direction:column;gap:.9rem}
@media(min-width:1024px){.filter-inner{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:1.25rem 2rem}.filter-inner .filter-sort:last-child{margin-left:auto}}
.filter-group{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.filter-label{font-family:var(--font-latin);font-size:.68rem;letter-spacing:.2em;color:var(--ink-light);text-transform:uppercase;margin-right:.5rem;flex-shrink:0}
.filter-chip{padding:.4rem .9rem;border:1px solid var(--rule);border-radius:999px;font-size:.82rem;color:var(--ink-mid);background:var(--paper);transition:all .2s;cursor:pointer;font-family:inherit}
.filter-chip:hover{border-color:var(--pine);color:var(--pine)}
.filter-chip.active{background:var(--pine);color:var(--paper);border-color:var(--pine)}
.filter-sort{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink-mid)}
.filter-sort label{font-family:var(--font-latin);font-size:.68rem;letter-spacing:.2em;color:var(--ink-light);text-transform:uppercase}
.filter-sort select{padding:.45rem .75rem;border:1px solid var(--rule);background:var(--paper);font-family:inherit;font-size:.82rem;color:var(--ink);cursor:pointer}
.filter-sort select:focus{outline:none;border-color:var(--pine)}
.filter-search{display:flex;align-items:center;gap:.55rem;flex:1 1 100%;min-width:0;padding:.55rem .9rem;border:1px solid var(--rule);background:var(--paper);transition:border-color .2s}
.filter-search:focus-within{border-color:var(--pine)}
.filter-search svg{width:16px;height:16px;color:var(--ink-light);flex-shrink:0}
.filter-search input{flex:1;min-width:0;border:0;background:transparent;font-family:inherit;font-size:.88rem;color:var(--ink);letter-spacing:.02em}
.filter-search input:focus{outline:none}
.filter-search input::placeholder{color:var(--ink-light);letter-spacing:.04em}
@media(min-width:1024px){.filter-search{flex:0 1 320px;order:-1}}

/* ═══════════════════════════════════════════
   Farmers Hub — 農友一級頁卡片
   ═══════════════════════════════════════════ */
.farmers-hub{background:var(--paper);padding:3rem 0 5rem;position:relative;overflow:hidden}
@media(min-width:1024px){.farmers-hub{padding:4rem 0 6rem}}
.farmers-hub::before{content:"";position:absolute;inset:0;background:url('../images/paper-texture.png') repeat;background-size:320px auto;mix-blend-mode:multiply;opacity:.45;pointer-events:none;z-index:0}
.farmers-hub > .container{position:relative;z-index:1}
.farmer-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
@media(min-width:640px){.farmer-grid{grid-template-columns:repeat(2,1fr);gap:1.75rem}}
@media(min-width:1024px){.farmer-grid{grid-template-columns:repeat(3,1fr);gap:2rem}}
.farmer-card{position:relative;background:var(--paper-card);border:1px solid var(--rule);display:block;transition:transform .4s,border-color .3s,box-shadow .4s;overflow:hidden}
.farmer-card[hidden]{display:none}
.farmer-card:hover{transform:translateY(-4px);border-color:var(--pine);box-shadow:0 14px 32px -18px rgba(30,40,32,.25)}
.farmer-card-img{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--paper-warm)}
.farmer-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.farmer-card:hover .farmer-card-img img{transform:scale(1.05)}
.farmer-card-stamp{position:absolute;top:1rem;left:1rem;z-index:2}
.farmer-card-region{position:absolute;top:1rem;right:1rem;z-index:2;padding:.28rem .65rem;background:rgba(248,244,236,.92);color:var(--earth);font-family:var(--font-latin);font-size:.65rem;letter-spacing:.18em;backdrop-filter:blur(4px);text-transform:uppercase}
.farmer-card-body{padding:1.25rem 1.25rem 1.5rem;position:relative}
.farmer-card-farm{font-family:var(--font-latin);font-size:.68rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}
.farmer-card-nick{margin-top:.4rem;font-family:var(--font-serif);font-size:1.5rem;color:var(--ink);line-height:1.25;font-weight:400}
@media(min-width:1024px){.farmer-card-nick{font-size:1.75rem}}
.farmer-card-quote{margin-top:.85rem;font-family:var(--font-serif);font-size:.88rem;color:var(--pine);line-height:1.7;border-left:2px solid var(--vermillion);padding-left:.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.farmer-card-tags{margin-top:1rem;display:flex;gap:.4rem;flex-wrap:wrap}
.farmer-card-tags .badge{font-size:.7rem;padding:.12rem .55rem}
.farmer-card-cta{margin-top:1.15rem;padding-top:1rem;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;font-family:var(--font-latin);font-size:.75rem;color:var(--ink-mid);letter-spacing:.12em;transition:color .2s}
.farmer-card:hover .farmer-card-cta{color:var(--vermillion)}
.farmer-card-cta .arrow{transition:transform .3s}
.farmer-card:hover .farmer-card-cta .arrow{transform:translateX(4px)}

/* Pagination 分頁 */
.pagination{display:flex;align-items:center;justify-content:center;gap:.3rem;margin-top:3.5rem;flex-wrap:wrap}
.pagination a,.pagination span,.pagination button{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:2.5rem;padding:0 .75rem;font-family:var(--font-latin);font-size:.85rem;color:var(--ink-mid);border:1px solid var(--rule);background:var(--paper-card);transition:all .2s;letter-spacing:.04em}
.pagination a:hover,.pagination button:hover{color:var(--pine);border-color:var(--pine);background:var(--paper)}
.pagination .active{background:var(--pine);color:var(--paper);border-color:var(--pine)}
.pagination .ellipsis{border:0;background:transparent;color:var(--ink-light);min-width:1.5rem;padding:0}
.pagination .nav-prev,.pagination .nav-next{padding:0 1rem;font-size:.8rem}
.pagination .nav-prev[aria-disabled=true],.pagination .nav-next[aria-disabled=true]{color:var(--ink-light);cursor:not-allowed;pointer-events:none;background:var(--paper-warm)}

/* ═══════════════════════════════════════════
   Mega Menu — 主選單下拉（hover panel）
   ═══════════════════════════════════════════ */

/* li 設 static 讓 panel 以 nav.main 為定位基準，可橫跨整個 nav 寬度 */
.nav-links li{position:static}

/* 有子選單的項目：加小三角 caret */
.nav-has-sub > a{display:inline-flex;align-items:center;gap:.3rem;position:relative}
/* hover 橋：覆蓋 <a> 底部到 panel 頂部之間的空隙，避免游標下移時 :hover 斷開 */
.nav-has-sub > a::before{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:28px;pointer-events:auto}
.nav-has-sub > a::after{
  content:"";width:0;height:0;
  border-left:3.5px solid transparent;
  border-right:3.5px solid transparent;
  border-top:4px solid currentColor;
  opacity:.65;transition:transform .25s;
}
.nav-has-sub:hover > a::after{transform:rotate(180deg)}

/* Mega 面板 — 橫跨 nav.main 全寬 */
.mega-panel{
  position:absolute;top:100%;left:0;right:0;
  background:var(--paper-card);
  border-top:1px solid var(--rule-dark);
  border-bottom:1px solid var(--rule-dark);
  box-shadow:0 14px 36px -16px rgba(30,40,32,.2);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility 0s .22s;
  z-index:45;
}
.nav-has-sub:hover > .mega-panel,
.nav-has-sub:focus-within > .mega-panel{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
  transition:opacity .22s,transform .22s,visibility 0s;
}

.mega-inner{
  max-width:1360px;margin:0 auto;padding:2.25rem 3rem;
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:2rem 2.75rem;
}
.mega-col-title{
  font-family:var(--font-latin);font-size:.64rem;letter-spacing:.26em;
  color:var(--vermillion);text-transform:uppercase;
  margin-bottom:.9rem;padding-bottom:.55rem;
  border-bottom:1px solid var(--rule);
}
.mega-col ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.mega-col a{
  font-size:.88rem;color:var(--ink-mid);
  transition:color .2s;display:flex;align-items:baseline;gap:.5rem;
  letter-spacing:.04em;
}
.mega-col a:hover{color:var(--vermillion)}
.mega-col a .en{
  font-family:var(--font-latin);font-size:.62rem;color:var(--ink-light);
  letter-spacing:.1em;text-transform:uppercase;
}
.mega-col a .pill{
  display:inline-block;padding:.05rem .4rem;
  background:var(--vermillion-pale);color:var(--vermillion);
  font-family:var(--font-latin);font-size:.58rem;letter-spacing:.12em;
  border-radius:2px;margin-left:.25rem;
}

/* Feature 卡：mega 內右側精選 */
.mega-feature{
  background:var(--paper-warm);border:1px solid var(--rule-dark);
  padding:1rem;border-radius:2px;
  display:flex;flex-direction:column;gap:.65rem;
}
.mega-feature-img{aspect-ratio:4/3;overflow:hidden;background:var(--paper-card);border-radius:2px}
.mega-feature-img img{width:100%;height:100%;object-fit:cover}
.mega-feature-label{
  font-family:var(--font-latin);font-size:.6rem;letter-spacing:.22em;
  color:var(--gold);text-transform:uppercase;
}
.mega-feature h4{
  font-family:var(--font-serif);font-size:1.05rem;color:var(--pine);
  font-weight:400;line-height:1.35;
}
.mega-feature p{font-size:.78rem;color:var(--ink-mid);line-height:1.65}
.mega-feature-cta{
  margin-top:auto;font-size:.78rem;color:var(--vermillion);
  letter-spacing:.1em;display:inline-flex;align-items:center;gap:.35rem;
  border-bottom:1px solid rgba(200,64,42,.4);padding-bottom:.15rem;
  align-self:flex-start;
}
.mega-feature-cta:hover{color:var(--vermillion-mid);border-color:var(--vermillion)}

/* 手機 (≤1023): mega 隱藏；nav 本身另做抽屜選單，此版本不處理 */
@media(max-width:1023px){
  .mega-panel{display:none}
  .nav-has-sub > a::after{display:none}
}

/* ═══ PRODUCTS HUB (products.html) ═══ */
/* 五格 promo 橫條 */
/* 書籤式 promo-strip — 插入 flash-strip 頂端，共用暖色背景形成一體感 */
.promo-strip{background:#fff;border:0;padding:1.5rem 0 0;position:relative;z-index:3;margin-bottom:-1.4rem}
.promo-strip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:640px){.promo-strip-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.promo-strip-grid{grid-template-columns:repeat(6,1fr)}}
.promo-tile{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.3rem;padding:.85rem .65rem 1.6rem;background:#fff;border:1px solid rgba(192,57,43,.18);border-bottom:0;text-align:center;transition:transform .35s ease,box-shadow .35s ease,background .35s ease;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),50% 100%,0 calc(100% - 14px));filter:drop-shadow(0 4px 6px rgba(192,57,43,.08));position:relative}
.promo-tile:hover{transform:translateY(-4px);background:#fffaf2;filter:drop-shadow(0 8px 14px rgba(192,57,43,.18))}
.promo-tile .icn{font-size:1.2rem;line-height:1;color:var(--vermillion)}
.promo-tile .zh{font-family:var(--font-serif);font-size:.92rem;color:var(--ink)}
.promo-tile .en{font-family:var(--font-latin);font-size:.58rem;letter-spacing:.2em;color:var(--vermillion);text-transform:uppercase}
.promo-tile.hot{background:linear-gradient(180deg,var(--vermillion) 0%,#d8553d 100%)}
.promo-tile.hot:hover{background:linear-gradient(180deg,var(--vermillion-mid) 0%,#d8553d 100%)}
.promo-tile.hot .icn,.promo-tile.hot .zh,.promo-tile.hot .en{color:#fff}
/* 限時優惠：跟導覽列同色同質感（紙紋 multiply overlay）*/
.promo-tile.sale{background:linear-gradient(180deg,#f5cf54 0%,#eab83a 100%);isolation:isolate}
.promo-tile.sale::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:url("../images/nav-paper.png") repeat;background-size:520px auto;mix-blend-mode:multiply;opacity:.55;filter:contrast(1.1) brightness(1.1) saturate(1.05)}
.promo-tile.sale > *{position:relative;z-index:1}
.promo-tile.sale:hover{background:linear-gradient(180deg,#f8d96a 0%,#edbe44 100%)}
.promo-tile.sale .icn,.promo-tile.sale .zh,.promo-tile.sale .en{color:#1a3a2a;text-shadow:none}

/* Fresh tabs — 當季鮮食分類頁籤（farmers-nav-btn 風格）*/
.fresh-tabs{list-style:none;display:flex;overflow-x:auto;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:0 0 1.75rem;padding:0;background:var(--paper)}
.fresh-tabs li{flex:1;min-width:140px}
.fresh-tab{width:100%;display:flex;align-items:center;gap:.6rem;padding:.7rem .75rem;border:0;border-right:1px solid var(--rule);background:transparent;text-align:left;font:inherit;cursor:pointer;transition:background-color .2s;color:var(--ink);position:relative}
.fresh-tabs li:last-child .fresh-tab{border-right:0}
/* Desktop 版：tabs 改為左側縱向欄 */
@media(min-width:1024px){
  /* 側邊欄格線只套在有 fresh-tabs 側欄的 cat-group（products.html 的當季鮮食）
     沒有 tabs 的 cat-group（例：product-detail 的 You may also like）維持正常單欄 */
  .cat-group:has(.fresh-tabs) .container{display:grid;grid-template-columns:220px 1fr;grid-template-areas:"head head" "tabs panels";column-gap:2rem;row-gap:1.25rem}
  .cat-group:has(.fresh-tabs) .cat-group-head{grid-area:head}
  .fresh-tabs{grid-area:tabs;flex-direction:column;overflow:visible;border-top:0;border-bottom:0;margin:0;background:transparent;align-self:start}
  .fresh-tabs li{flex:none;min-width:0;width:100%}
  .fresh-tab{border-right:0;border-bottom:1px solid var(--rule);padding:.85rem .75rem;gap:.85rem}
  .fresh-tabs li:last-child .fresh-tab{border-bottom:0}
  .fresh-panel{grid-area:panels;min-width:0}
  .fresh-panel .product-grid.prod-4{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1440px){
  .fresh-panel .product-grid.prod-4{grid-template-columns:repeat(4,1fr)}
}
.fresh-tab:hover{background:rgba(242,236,224,.5)}
.fresh-tab.active{background:var(--paper-warm)}
.fresh-tab.active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--vermillion)}
.fresh-tab-icn{width:2rem;height:2rem;border-radius:50%;background:var(--paper-card);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .2s}
.fresh-tab.active .fresh-tab-icn{border-color:var(--vermillion);background:#fff}
.fresh-tab-icn svg{width:18px;height:18px;color:var(--pine);stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fresh-tab.active .fresh-tab-icn svg{color:var(--vermillion)}
.fresh-tab-info{min-width:0;display:flex;flex-direction:column}
.fresh-tab-info .nk{font-family:var(--font-serif);font-size:.92rem;color:var(--ink);white-space:nowrap}
.fresh-tab.active .fresh-tab-info .nk{color:var(--vermillion)}
.fresh-tab-info .rg{font-family:var(--font-latin);font-size:.66rem;letter-spacing:.1em;color:var(--ink-light);white-space:nowrap}
.fresh-panel[hidden]{display:none}

/* 導購圖卡片 — icon 版 product-img（無實照時使用）*/
.product-img.is-icon{background:linear-gradient(135deg,var(--paper-warm,#f5f0e6) 0%,var(--paper-card) 100%);display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;position:relative}
.product-img.is-icon svg{width:72px;height:72px;color:var(--pine);stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.72}
.product-img.is-icon::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(58,93,61,.06),transparent 60%);pointer-events:none}

/* 分類群組（Fresh / Pantry / Gift）*/
.cat-group{padding:3.5rem 0 1rem;position:relative;overflow:hidden}

/* 看全部連結 — 與 count 同列緊湊排列，hover 時綠筆畫→黃填充＋長出麥穗 */
.cat-group-head .r{display:inline-flex;align-items:center;gap:.7rem;flex-wrap:nowrap}
.cat-group-head .r .sep{width:1px;height:.85rem;background:var(--rule);flex-shrink:0}
.cat-view-all{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--font-serif);font-size:.82rem;letter-spacing:.08em;color:var(--pine);-webkit-text-stroke:.5px var(--pine);text-stroke:.5px var(--pine);text-decoration:none;padding:0;line-height:1;transition:color .45s ease,-webkit-text-stroke-color .45s ease;cursor:pointer}
.cat-view-all .cv-arrow{font-family:var(--font-latin);font-size:.9rem;color:var(--pine);line-height:1;transition:color .45s ease,transform .35s ease}
.cat-view-all .cv-wheat{width:0;height:16px;overflow:visible;opacity:0;color:var(--gold);transition:width .5s cubic-bezier(.22,.8,.25,1) .05s,opacity .3s ease;flex-shrink:0}
.cat-view-all .cv-wheat svg{width:34px;height:16px;display:block}
.cat-view-all .cv-wheat path{fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .6s ease .08s}
.cat-view-all:hover,.cat-view-all:focus-visible{color:var(--gold);-webkit-text-stroke-color:var(--gold);-webkit-text-stroke-width:0;text-shadow:0 0 .01px var(--gold)}
.cat-view-all:hover .cv-arrow,.cat-view-all:focus-visible .cv-arrow{color:var(--gold);transform:translateX(3px)}
.cat-view-all:hover .cv-wheat,.cat-view-all:focus-visible .cv-wheat{width:34px;opacity:1}
.cat-view-all:hover .cv-wheat path,.cat-view-all:focus-visible .cv-wheat path{stroke-dashoffset:0}
.cat-view-all:focus-visible{outline:1px dashed var(--gold);outline-offset:4px}
.cat-group.alt{background:var(--paper-warm)}
/* ─── Unified line-art icon spec (matches .cat-emblem) ─── */
.g-icn{width:22px;height:22px;flex-shrink:0;display:inline-block;vertical-align:middle;color:currentColor;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.g-icn-sm{width:18px;height:18px}
.g-icn-md{width:26px;height:26px}
.g-icn-lg{width:32px;height:32px}
.g-icn-xl{width:40px;height:40px}

.cat-group-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:2rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.cat-group-head .l{display:flex;flex-direction:column;gap:.4rem}
.cat-group-head .l:has(.g-icn-lg){flex-direction:row;align-items:center;gap:1rem}
.cat-group-head .l-text{display:flex;flex-direction:column;gap:.4rem}
.cat-group-head .g-icn-lg{color:var(--pine);padding:.45rem;background:rgba(58,90,76,.08);border-radius:10px;box-sizing:content-box;width:28px;height:28px;stroke-width:1.4}
.cat-group-head .en{font-family:var(--font-latin);font-size:.68rem;letter-spacing:.28em;color:var(--vermillion);text-transform:uppercase}
.cat-group-head .zh{font-family:var(--font-serif);font-size:1.55rem;color:var(--pine);font-weight:400;letter-spacing:.05em}
.cat-group-head .count{font-family:var(--font-latin);font-size:.78rem;color:var(--ink-light);letter-spacing:.12em}

.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:1024px){.cat-grid{grid-template-columns:repeat(5,1fr);gap:1.25rem}}
.cat-card{position:relative;background:var(--paper-card);border:1px solid var(--rule);padding:1.25rem 1.1rem 1.35rem;display:flex;flex-direction:column;gap:.7rem;transition:transform .35s,border-color .3s,box-shadow .4s;overflow:hidden}
.cat-card:hover{transform:translateY(-4px);border-color:var(--pine);box-shadow:0 14px 30px -16px rgba(30,40,32,.22)}
.cat-card::before{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--pine);transform:scaleX(0);transform-origin:left;transition:transform .4s}
.cat-card:hover::before{transform:scaleX(1)}
.cat-card-img{aspect-ratio:4/3;background:var(--paper-warm);margin:-1.25rem -1.1rem .25rem;overflow:hidden;position:relative}
.cat-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.cat-card:hover .cat-card-img img{transform:scale(1.08)}
.cat-card-img .badge{position:absolute;top:.7rem;right:.7rem;padding:.2rem .55rem;background:rgba(248,244,236,.92);color:var(--earth);font-family:var(--font-latin);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase}
.cat-card-icon{aspect-ratio:4/3;background:linear-gradient(135deg,var(--paper-warm) 0%,var(--leaf-pale) 100%);margin:-1.25rem -1.1rem .25rem;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cat-card-icon::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(58,90,76,.08) 0%,transparent 55%)}
.cat-card-icon .g-icn{color:var(--pine);width:64px;height:64px;stroke-width:1.3;position:relative;z-index:1;transition:transform .5s ease}
.cat-card:hover .cat-card-icon .g-icn{transform:scale(1.12) rotate(-3deg)}
.cat-card-icon .badge{position:absolute;top:.7rem;right:.7rem;padding:.2rem .55rem;background:rgba(248,244,236,.92);color:var(--earth);font-family:var(--font-latin);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;z-index:2}
.cat-card-en{font-family:var(--font-latin);font-size:.6rem;letter-spacing:.22em;color:var(--gold);text-transform:uppercase}
.cat-card-zh{font-family:var(--font-serif);font-size:1.25rem;color:var(--ink);line-height:1.25;font-weight:400}
.cat-card-subs{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.1rem}
.cat-card-subs span{font-size:.7rem;padding:.16rem .5rem;background:var(--leaf-pale);color:var(--pine-mid);border-radius:2px}
.cat-card-cta{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;font-family:var(--font-latin);font-size:.72rem;color:var(--ink-mid);letter-spacing:.12em;transition:color .2s}
.cat-card:hover .cat-card-cta{color:var(--vermillion)}
.cat-card-cta .arrow{transition:transform .3s}
.cat-card:hover .cat-card-cta .arrow{transform:translateX(4px)}

/* 節氣 banner */
.season-banner{margin:4rem 0 0;padding:3rem 0;background:linear-gradient(135deg,var(--pine) 0%,var(--pine-mid) 100%);color:var(--paper);position:relative;overflow:hidden}
.season-banner::after{content:"";position:absolute;right:-6rem;bottom:-6rem;width:360px;height:360px;background:url('../images/tulip-lineart.png') no-repeat center/contain;opacity:.08;filter:invert(1);pointer-events:none}
.season-banner-inner{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:center;position:relative;z-index:1}
@media(min-width:768px){.season-banner-inner{grid-template-columns:1.5fr 1fr}}
.season-banner .en{font-family:var(--font-latin);font-size:.7rem;letter-spacing:.3em;color:var(--gold-mid);text-transform:uppercase}
.season-banner h2{margin-top:.85rem;font-family:var(--font-serif);font-size:2rem;line-height:1.3;font-weight:400;letter-spacing:.05em}
.season-banner h2 .accent{color:var(--gold-mid)}
.season-banner p{margin-top:1rem;opacity:.82;line-height:1.9;max-width:460px;font-size:.92rem}
.season-banner-cta{justify-self:start}
@media(min-width:768px){.season-banner-cta{justify-self:end}}
.season-banner-cta a{display:inline-flex;align-items:center;gap:1rem;padding:0 1.5rem;height:3.2rem;background:var(--paper);color:var(--pine);font-size:.85rem;letter-spacing:.15em;transition:background-color .2s,color .2s}
.season-banner-cta a:hover{background:var(--gold);color:var(--ink)}

/* ═══ 農友列表 · 結果計數 / 空狀態 ═══ */
.result-count{font-family:var(--font-latin);font-size:.8rem;color:var(--ink-light);letter-spacing:.1em;margin-bottom:1.25rem;padding:0 .1rem}
.result-count strong{font-family:var(--font-serif);font-size:1.05rem;color:var(--pine);margin:0 .2rem;font-weight:500}
.no-result{text-align:center;padding:4rem 1.5rem;border:1px dashed var(--rule-dark);background:var(--paper-warm);margin:1rem 0 2rem}
.no-result-en{font-family:var(--font-latin);font-size:.68rem;letter-spacing:.3em;color:var(--vermillion);text-transform:uppercase;margin-bottom:.75rem}
.no-result h3{font-family:var(--font-serif);font-size:1.4rem;color:var(--pine);font-weight:400;margin-bottom:.5rem}
.no-result-hint{color:var(--ink-mid);font-size:.9rem;line-height:1.8;max-width:420px;margin:0 auto 1.5rem}
.no-result-cta{padding:.75rem 1.75rem;border:1px solid var(--pine);background:transparent;color:var(--pine);font-family:inherit;font-size:.85rem;letter-spacing:.14em;cursor:pointer;transition:background-color .2s,color .2s}
.no-result-cta:hover{background:var(--pine);color:var(--paper)}

/* ═══ PAGE HERO — 帶滿版背景照片的版本 ═══ */
.page-hero.has-photo{padding:6rem 0 4rem;min-height:560px;display:flex;align-items:center}
.page-hero.has-photo > .container{width:100%;flex:1 1 auto}
@media(min-width:768px){.page-hero.has-photo{padding:8rem 0 5rem;min-height:620px}}
.page-hero.has-photo::before{display:none}          /* 去掉鬱金香裝飾，避免跟照片搶 */
.page-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:0}
.page-hero-scrim{position:absolute;inset:0;z-index:0;background:
  linear-gradient(90deg, rgba(30,40,32,.78) 0%, rgba(30,40,32,.55) 35%, rgba(30,40,32,.2) 70%, rgba(30,40,32,0) 100%),
  linear-gradient(180deg, rgba(30,40,32,.25) 0%, rgba(30,40,32,0) 30%, rgba(30,40,32,.3) 100%)}
.page-hero.has-photo .container{position:relative;z-index:1}

/* 照片模式下的文字反白配色 */
.page-hero.has-photo .page-hero-label{color:#f2c46a}
.page-hero.has-photo .page-hero-label .line{background:#f2c46a;opacity:.6}
.page-hero.has-photo .page-hero-h1{color:var(--paper)}
.page-hero.has-photo .page-hero-h1 .accent{color:#f2c46a}
.page-hero.has-photo .page-hero-h1 .accent::after{background:rgba(242,196,106,.55)}
.page-hero.has-photo .page-hero-lead{color:rgba(248,244,236,.88)}
.page-hero.has-photo .page-hero-stat .num{color:var(--paper)}
.page-hero.has-photo .page-hero-stat .num .sup{color:#f2c46a}
.page-hero.has-photo .page-hero-stat .lbl{color:rgba(248,244,236,.7)}

/* page-hero 單欄堆疊：數字列內嵌在 lead 下方 */
.page-hero-stack{grid-template-columns:1fr !important;max-width:780px;margin-left:0;margin-right:auto;align-items:start !important;justify-items:start !important;text-align:left}
.page-hero-stack > div{text-align:left}
.page-hero-stats-inline{margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:flex-start;gap:1.5rem;flex-wrap:wrap}
.page-hero-stats-inline .page-hero-stat .num{font-size:1.8rem}
.page-hero-stats-inline .page-hero-stat .lbl{margin-top:.25rem;font-size:.58rem}
.page-hero-stat-divider{display:inline-block;width:1px;height:34px;background:var(--rule-dark);opacity:.6}
/* 照片版：分隔線換成淡金 */
.page-hero.has-photo .page-hero-stats-inline{border-top-color:rgba(242,196,106,.35)}
.page-hero.has-photo .page-hero-stat-divider{background:rgba(242,196,106,.4)}

/* mega-col 中的次分段標題（所為 sub-head 在「所做」之下） */
.mega-col-title-sub{margin-top:1.4rem}

/* ═══════════════════════════════════════════════════
   BRAND STORY PAGE
   ═══════════════════════════════════════════════════ */

/* 01 · Origin — long-form story */
.brand-story{padding:6rem 0;background:var(--paper)}
.brand-story-inner{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:900px){.brand-story-inner{grid-template-columns:280px 1fr;gap:5rem}}
.brand-story-side{position:sticky;top:6rem;align-self:start}
.brand-story-kicker{
  display:inline-block;font-family:var(--font-latin);
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--vermillion);margin-bottom:1rem;
}
.brand-story-h2{
  font-family:var(--font-serif);font-weight:500;
  font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.35;color:var(--ink);
  margin:0 0 .75rem;
}
.brand-story-h2 .accent{color:var(--vermillion)}
.brand-story-caption{color:var(--ink-mid);font-size:.95rem;font-style:italic}
.brand-story-body{max-width:640px}
.brand-story-body p{
  font-size:1.02rem;line-height:1.95;color:var(--ink-mid);
  margin:0 0 1.35rem;
}
.brand-story-body p:last-child{margin-bottom:0}
.brand-story-body strong{color:var(--ink);font-weight:500}
.brand-lead-para{
  font-family:var(--font-serif);font-size:1.25rem !important;
  line-height:1.75 !important;color:var(--ink) !important;
  border-left:2px solid var(--vermillion);padding-left:1.2rem;
  margin-bottom:1.75rem !important;
}

/* 02 · MIT */
.brand-mit{padding:6rem 0;background:#f4ede3;position:relative}
.brand-mit::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url('../images/paper-texture.png') repeat;
  background-size:320px auto;mix-blend-mode:multiply;opacity:.35;
}
.brand-mit > .container{position:relative}
.brand-mit-head{max-width:720px;margin-bottom:3rem}
.brand-mit-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:900px){.brand-mit-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.brand-mit-intro p{font-size:1rem;line-height:1.9;color:var(--ink-mid);margin:0 0 1.2rem}
.brand-mit-list{list-style:none;display:flex;flex-direction:column;gap:1.6rem}
.brand-mit-list li{
  display:grid;grid-template-columns:60px 1fr;gap:1.2rem;
  padding-bottom:1.6rem;border-bottom:1px solid rgba(60,40,20,.15);
}
.brand-mit-list li:last-child{border-bottom:0;padding-bottom:0}
.brand-mit-num{
  font-family:var(--font-serif);font-size:2.2rem;color:var(--vermillion);
  line-height:1;padding-top:.15rem;
}
.brand-mit-list h3{
  font-family:var(--font-serif);font-size:1.12rem;font-weight:500;
  color:var(--ink);margin:0 0 .45rem;
}
.brand-mit-list p{font-size:.95rem;line-height:1.75;color:var(--ink-mid);margin:0}

/* 03 · Co-op */
.brand-coop{padding:6rem 0;background:var(--paper)}
.brand-coop-quote{max-width:860px;margin-bottom:3rem}
.brand-coop-quote .accent{color:var(--vermillion)}
.brand-coop-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:900px){.brand-coop-grid{grid-template-columns:1fr 340px;gap:4rem}}
.brand-coop-main p{font-size:1rem;line-height:1.9;color:var(--ink-mid);margin:0 0 1.35rem}
.brand-coop-aside{
  background:#fff7ec;border:1px solid rgba(200,130,50,.25);
  padding:1.4rem 1.5rem;border-radius:4px;font-size:.95rem !important;
  line-height:1.8 !important;color:var(--ink) !important;margin-top:.5rem !important;
}
.brand-coop-aside strong{color:var(--vermillion);display:block;margin-bottom:.4rem}
.brand-coop-stats{
  background:var(--ink);color:var(--paper);padding:2.5rem 2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:1.75rem 1.25rem;
  align-self:start;border-radius:3px;
}
.brand-coop-stat{display:flex;flex-direction:column;gap:.35rem}
.brand-coop-num{
  font-family:var(--font-serif);font-size:2.4rem;font-weight:300;
  line-height:1;color:var(--paper);
}
.brand-coop-num sup{
  font-size:.9rem;color:var(--vermillion);
  margin-left:.2rem;font-weight:400;
}
.brand-coop-label{
  font-size:.8rem;letter-spacing:.15em;color:rgba(245,240,230,.7);
}

/* 04 · Safety */
.brand-safety{padding:6rem 0;background:#2d2419;color:var(--paper)}
.brand-safety-inner{max-width:780px;margin:0 auto;text-align:left}
.brand-safety .brand-story-kicker{color:#e8a85e}
.brand-safety .brand-story-h2{color:var(--paper);margin-bottom:1.5rem}
.brand-safety p{
  font-size:1.05rem;line-height:1.95;color:rgba(245,240,230,.85);
  margin:0 0 1.35rem;
}
.brand-safety-tag{
  font-family:var(--font-serif) !important;font-size:1.15rem !important;
  color:#e8a85e !important;border-left:2px solid #e8a85e;
  padding-left:1.2rem;margin-top:2rem !important;
}

/* 05 · Service */
.brand-service{padding:6rem 0;background:var(--paper)}
.brand-service-head{max-width:720px;margin-bottom:3rem}
.brand-service-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:800px){.brand-service-grid{grid-template-columns:1fr 1fr}}
.brand-service-card{
  background:#fff;border:1px solid var(--rule);padding:2.5rem 2.25rem;
  display:flex;flex-direction:column;gap:.8rem;
  transition:transform .3s,box-shadow .3s;
}
.brand-service-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(60,40,20,.08)}
.brand-service-icon{
  font-size:1.6rem;color:var(--vermillion);line-height:1;margin-bottom:.3rem;
}
.brand-service-card h3{
  font-family:var(--font-serif);font-size:1.35rem;font-weight:500;
  color:var(--ink);margin:0;
}
.brand-service-desc{font-size:.98rem;line-height:1.8;color:var(--ink-mid);margin:0 0 .5rem}
.brand-service-list{
  list-style:none;display:flex;flex-direction:column;gap:.55rem;
  padding:1rem 0;border-top:1px dashed var(--rule);
}
.brand-service-list li{
  font-size:.9rem;color:var(--ink-mid);padding-left:1.1rem;position:relative;
}
.brand-service-list li::before{
  content:"·";position:absolute;left:.3rem;top:0;
  color:var(--vermillion);font-weight:700;
}
.brand-service-cta{
  margin-top:auto;padding-top:.9rem;font-size:.92rem;font-weight:500;
  color:var(--vermillion);letter-spacing:.08em;
}
.brand-service-cta:hover{color:var(--ink)}

/* Closing */
.brand-closing{
  padding:6rem 0;background:var(--ink);color:var(--paper);
  text-align:center;
}
.brand-closing-kicker{
  font-family:var(--font-latin);font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:#e8a85e;margin:0 0 1.5rem;
}
.brand-closing-h2{
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.65;
  color:var(--paper);max-width:780px;margin:0 auto 2.5rem;
}
.brand-closing-h2 .accent{color:#e8a85e}
.brand-closing-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.brand-closing-primary{
  padding:.95rem 2rem;background:var(--vermillion);color:var(--paper);
  font-size:.95rem;letter-spacing:.1em;transition:background .2s;
}
.brand-closing-primary:hover{background:#a83826}
.brand-closing-secondary{
  padding:.95rem 2rem;border:1px solid rgba(245,240,230,.4);
  color:var(--paper);font-size:.95rem;letter-spacing:.1em;
  transition:border-color .2s,color .2s;
}
.brand-closing-secondary:hover{border-color:#e8a85e;color:#e8a85e}

/* ═══════════════════════════════════════════════════
   SCROLL STAGE — sticky hero + wave overlay
   ═══════════════════════════════════════════════════ */
.scroll-stage{position:relative}

@media(min-width:900px){
  .scroll-stage .hero{
    position:sticky;top:0;z-index:0;
    /* 讓 hero 在被蓋過程中輕微縮小並淡出，增加景深 */
    will-change:transform,opacity;
  }
  .scroll-stage .hero .hero-overlay-wrap{
    transform:translateY(calc(var(--hero-progress, 0) * -40px));
    opacity:calc(1 - var(--hero-progress, 0) * 1.15);
    transition:transform .1s linear,opacity .1s linear;
  }
  .scroll-stage .hero .hero-img-full{
    transform:scale(calc(1 + var(--hero-progress, 0) * .06));
    transition:transform .15s linear;
  }
  .scroll-stage .farmers-section{
    position:relative;z-index:2;
    /* 拉升 120px 覆蓋 hero 底部，搭配 sticky hero 形成「滑上蓋掉」效果 */
    margin-top:-120px;
  }
}

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL — 漸入動畫
   ═══════════════════════════════════════════════════ */
[data-reveal]{
  opacity:0;transform:translateY(36px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1),
             transform .9s cubic-bezier(.2,.7,.2,1);
  will-change:opacity,transform;
}
[data-reveal].is-visible{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.14s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.28s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.42s}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
  .scroll-stage .hero{position:relative !important}
  .scroll-stage .hero .hero-overlay-wrap,
  .scroll-stage .hero .hero-img-full{transform:none !important;opacity:1 !important}
}

/* ═══════════════════════════════════════════════════
   SCROLL THREAD — 左側直向進度線
   ═══════════════════════════════════════════════════ */
.scroll-thread{
  display:none;
}
@media(min-width:1180px){
  .scroll-thread{
    display:block;
    position:fixed;left:30px;top:0;bottom:0;
    width:180px;z-index:35;pointer-events:none;
    opacity:0;transform:translateX(-8px);
    transition:opacity .6s ease,transform .6s ease;
  }
  .scroll-thread.is-visible{opacity:1;transform:none}
  .scroll-thread-line{
    position:absolute;left:8px;top:18vh;bottom:18vh;
    width:1px;background:rgba(120,100,80,.25);
  }
  .scroll-thread-fill{
    position:absolute;left:8px;top:18vh;
    width:1px;background:var(--vermillion);
    height:calc((100vh - 36vh) * var(--p, 0));
    transition:height .15s linear;
  }
  .scroll-thread-chapters{
    list-style:none;position:absolute;left:0;top:18vh;
    display:flex;flex-direction:column;
    height:calc(100vh - 36vh);
    justify-content:space-between;
  }
  .scroll-thread-chapters li{
    position:relative;padding-left:24px;
    font-family:var(--font-latin);font-size:.68rem;letter-spacing:.14em;
    color:var(--ink-light);
    pointer-events:auto;cursor:pointer;
    transition:color .3s;
  }
  .scroll-thread-chapters li .dot{
    position:absolute;left:4px;top:50%;transform:translateY(-50%);
    width:9px;height:9px;border-radius:50%;
    background:var(--paper);border:1px solid rgba(120,100,80,.4);
    transition:background .3s,border-color .3s,transform .3s;
  }
  .scroll-thread-chapters li .lbl{
    opacity:0;transform:translateX(-4px);
    display:inline-flex;gap:.5rem;align-items:baseline;
    transition:opacity .3s,transform .3s;
    white-space:nowrap;
  }
  .scroll-thread-chapters li .lbl b{
    font-weight:500;color:var(--vermillion);
    font-size:.62rem;letter-spacing:.2em;
  }
  .scroll-thread-chapters li:hover .lbl,
  .scroll-thread-chapters li.is-active .lbl{
    opacity:1;transform:none;
  }
  .scroll-thread-chapters li.is-active{color:var(--ink)}
  .scroll-thread-chapters li.is-active .dot{
    background:var(--vermillion);border-color:var(--vermillion);
    transform:translateY(-50%) scale(1.3);
  }
}

/* ═══════════════════════════════════════════════════
   BRAND HERO — 照片較深，加強文字底層遮色片
   ═══════════════════════════════════════════════════ */
.brand-stage .page-hero-scrim,
.page-hero.has-photo .page-hero-scrim.scrim-dark{
  background:
    linear-gradient(90deg,
      rgba(20,28,22,.92) 0%,
      rgba(20,28,22,.82) 25%,
      rgba(20,28,22,.58) 55%,
      rgba(20,28,22,.25) 80%,
      rgba(20,28,22,0) 100%),
    linear-gradient(180deg,
      rgba(20,28,22,.5) 0%,
      rgba(20,28,22,.15) 35%,
      rgba(20,28,22,.45) 100%) !important;
}

/* ═══ Thread 章節節點改金色 ═══ */
@media(min-width:1180px){
  .scroll-thread-chapters li{color:rgba(200,150,60,.65)}
  .scroll-thread-chapters li .lbl b{color:var(--gold)}
  .scroll-thread-chapters li.is-active{color:var(--gold)}
  .scroll-thread-chapters li:hover{color:var(--gold)}
  .scroll-thread-chapters li .dot{
    background:transparent;border-color:rgba(200,150,60,.55);
  }
  .scroll-thread-chapters li.is-active .dot{
    background:var(--gold);border-color:var(--gold);
  }
  .scroll-thread-fill{background:var(--gold)}
  .scroll-thread-line{background:rgba(200,150,60,.25)}
}

/* ═══ Brand hero · 毛玻璃文字襯板 + 金色統計 caption ═══ */
.brand-hero-glass{
  position:relative;
  max-width:520px;
  padding:2rem 2rem 1.8rem;
  background:rgba(18,24,20,.32);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(242,196,106,.2);
  border-radius:2px;
  box-shadow:
    0 12px 40px rgba(10,20,14,.4),
    inset 0 1px 0 rgba(255,240,200,.08);
}
/* 讓 hero 內的標題在窄板內重新縮排；數字列改直式堆疊也更緊湊 */
.brand-hero-glass .page-hero-h1{
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  line-height:1.35;
}
.brand-hero-glass .page-hero-lead{
  font-size:.95rem;line-height:1.85;
}
.brand-hero-glass .page-hero-stats-inline{
  gap:1.2rem;flex-wrap:wrap;
}

@media(min-width:768px){
  .brand-hero-glass{padding:2.4rem 2.6rem 2.1rem;max-width:540px}
}
@media(min-width:1200px){
  .brand-hero-glass{max-width:580px}
}

/* ═══ Brand hero · 雙欄＋下方橫排統計 ═══
   左：標題　右：敘述文　下：600+/15萬/2021 */
.brand-hero-split{padding:4rem 0 5rem}
.brand-hero-split-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto auto;
  column-gap:3rem;row-gap:2.5rem;
  align-items:start;
}
/* 左側標題：不用毛玻璃容器，直接浮在照片上（加 text-shadow 保底可讀性） */
.brand-hero-title{
  grid-column:1;grid-row:1;max-width:560px;justify-self:start;
  background:transparent !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:0 !important;border-radius:0 !important;
  box-shadow:none !important;
  padding:1rem 0 0 !important;
}
.brand-hero-title .page-hero-h1{
  text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4);
}
.brand-hero-title .page-hero-label{
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.brand-hero-lead-panel{
  grid-column:2;grid-row:1;max-width:440px;justify-self:end;align-self:end;
  background:transparent !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  border:0 !important;border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
.brand-hero-lead-panel .page-hero-lead{
  margin:0;font-size:.95rem;line-height:1.95;
  color:rgba(248,244,236,.95);
  text-shadow:0 1px 10px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.4);
}
.brand-hero-stats-strip{
  grid-column:1 / -1;grid-row:2;
  display:flex;align-items:center;justify-content:center;gap:2.5rem;
  padding:1.6rem 2.4rem;margin-top:1rem;
  background:rgba(18,24,20,.32);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(242,196,106,.2);
  border-radius:2px;
  box-shadow:0 12px 40px rgba(10,20,14,.4),inset 0 1px 0 rgba(255,240,200,.08);
}
.brand-hero-stats-strip .page-hero-stat{text-align:center}
.brand-hero-stats-strip .page-hero-stat dt{font-size:2.1rem;line-height:1;color:#f2c46a;font-family:var(--font-serif);font-weight:400}
.brand-hero-stats-strip .page-hero-stat dt .sup{font-size:1rem;margin-left:.15rem;color:#f2c46a}
.brand-hero-stats-strip .page-hero-stat dd{margin:.5rem 0 0;font-family:var(--font-latin);font-size:.68rem;letter-spacing:.22em;color:#f2c46a;text-transform:none}
.brand-hero-stats-strip .page-hero-stat-divider{width:1px;height:36px;background:rgba(242,196,106,.32)}

@media(max-width:900px){
  .brand-hero-split-grid{grid-template-columns:1fr;row-gap:1.5rem}
  .brand-hero-title,
  .brand-hero-lead-panel{grid-column:1;max-width:100%;justify-self:stretch}
  .brand-hero-title{grid-row:1}
  .brand-hero-lead-panel{grid-row:2}
  .brand-hero-stats-strip{grid-row:3;gap:1.5rem;padding:1.2rem 1rem;flex-wrap:wrap}
  .brand-hero-stats-strip .page-hero-stat-divider{display:none}
}

/* 品牌 hero 的 <dd> 統計標籤改金字 */
.page-hero.has-photo .page-hero-stat dd{
  font-family:var(--font-latin);
  font-size:.62rem;letter-spacing:.22em;
  color:#f2c46a;
  margin:.4rem 0 0;text-transform:uppercase;
}
/* 統計數字底下的金色分隔線更柔和 */
.brand-hero-glass .page-hero-stats-inline{
  border-top-color:rgba(242,196,106,.28);
  padding-top:1.1rem;margin-top:1.3rem;
}


/* ═══════════════════════════════════════════════════
   BRAND STORY — 全頁毛玻璃＋照片底＋金色落款
   ═══════════════════════════════════════════════════ */

.brand-stage{background:#121a14}
.brand-stage .brand-story,
.brand-stage .brand-mit,
.brand-stage .brand-coop,
.brand-stage .brand-safety,
.brand-stage .brand-service,
.brand-stage .brand-closing{
  position:relative;background:transparent;overflow:hidden;
}

.brand-stage .brand-mit::before{display:none}
.brand-stage .brand-story > .container,
.brand-stage .brand-mit > .container,
.brand-stage .brand-coop > .container,
.brand-stage .brand-safety > .container,
.brand-stage .brand-service > .container,
.brand-stage .brand-closing > .container{
  position:relative;z-index:1;
}

.brand-stage .brand-story-body,
.brand-stage .brand-mit-grid,
.brand-stage .brand-coop-main,
.brand-stage .brand-coop-stats,
.brand-stage .brand-safety-inner,
.brand-stage .brand-service-card,
.brand-stage .brand-closing > .container{
  position:relative;
  background:rgba(18,24,20,.30);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(242,196,106,.18);
  border-radius:2px;
  box-shadow:0 12px 40px rgba(6,12,8,.45),inset 0 1px 0 rgba(255,240,200,.07);
}

.brand-stage .brand-story-body{padding:2.2rem 2.4rem}
.brand-stage .brand-mit-grid{padding:2.5rem 2.6rem;gap:3rem}
.brand-stage .brand-coop-main{padding:2.2rem 2.4rem}
.brand-stage .brand-safety-inner{padding:2.6rem 2.8rem;margin:0 auto}
.brand-stage .brand-closing > .container{padding:3rem 2.8rem}



.brand-stage .brand-story-kicker{color:#f2c46a}
.brand-stage .brand-story-h2{color:var(--paper)}
.brand-stage .brand-story-h2 .accent{color:#f2c46a}
.brand-stage .brand-story-caption{color:rgba(248,244,236,.7)}
.brand-stage .brand-story-body p{color:rgba(248,244,236,.85)}
.brand-stage .brand-story-body strong{color:#f2c46a}
.brand-stage .brand-lead-para{color:var(--paper) !important;border-left-color:#f2c46a}

.brand-stage .brand-mit-intro p{color:rgba(248,244,236,.85)}
.brand-stage .brand-mit-list li{border-bottom-color:rgba(242,196,106,.2)}
.brand-stage .brand-mit-num{color:#f2c46a}
.brand-stage .brand-mit-list h3{color:var(--paper)}
.brand-stage .brand-mit-list p{color:rgba(248,244,236,.75)}

.brand-stage .brand-coop-quote .accent{color:#f2c46a}
.brand-stage .brand-coop-main p{color:rgba(248,244,236,.85)}
.brand-stage .brand-coop-aside{
  background:rgba(242,196,106,.08) !important;border-color:rgba(242,196,106,.25) !important;
  color:var(--paper) !important;
}
.brand-stage .brand-coop-aside strong{color:#f2c46a}
.brand-stage .brand-coop-stats{
  background:rgba(8,14,10,.55) !important;border-color:rgba(242,196,106,.25);
  padding:2.2rem 2rem !important;
}
.brand-stage .brand-coop-num{color:var(--paper)}
.brand-stage .brand-coop-num sup{color:#f2c46a}
.brand-stage .brand-coop-label{color:rgba(248,244,236,.6)}

.brand-stage .brand-safety{background:transparent;color:var(--paper)}
.brand-stage .brand-safety-inner p{color:rgba(248,244,236,.82)}
.brand-stage .brand-safety-tag{color:#f2c46a !important;border-left-color:#f2c46a}

.brand-stage .brand-service-head .brand-story-h2{color:var(--paper)}
.brand-stage .brand-service-card{padding:2.4rem 2.2rem !important}
.brand-stage .brand-service-card:hover{
  background:rgba(30,38,32,.40);border-color:rgba(242,196,106,.35);
}
.brand-stage .brand-service-icon{color:#f2c46a}
.brand-stage .brand-service-card h3{color:var(--paper)}
.brand-stage .brand-service-desc{color:rgba(248,244,236,.82)}
.brand-stage .brand-service-list{border-top-color:rgba(242,196,106,.25)}
.brand-stage .brand-service-list li{color:rgba(248,244,236,.72)}
.brand-stage .brand-service-list li::before{color:#f2c46a}
.brand-stage .brand-service-cta{color:#f2c46a}
.brand-stage .brand-service-cta:hover{color:var(--paper)}

.brand-stage .brand-closing{background:transparent;color:var(--paper)}
.brand-stage .brand-closing-kicker{color:#f2c46a}
.brand-stage .brand-closing-h2{color:var(--paper)}
.brand-stage .brand-closing-h2 .accent{color:#f2c46a}
.brand-stage .brand-closing-primary{background:#c48432;color:#12190f}
.brand-stage .brand-closing-primary:hover{background:#f2c46a}
.brand-stage .brand-closing-secondary{border-color:rgba(242,196,106,.45);color:#f2c46a}
.brand-stage .brand-closing-secondary:hover{
  border-color:#f2c46a;color:var(--paper);background:rgba(242,196,106,.08);
}


/* ═══ BRAND STAGE · 單一容器覆蓋 hero + 01-05 + Our Promise ═══ */
.brand-stage{
  position:relative;isolation:isolate;
  background:
    linear-gradient(180deg,rgba(25,45,32,.38) 0%,rgba(25,45,32,.42) 50%,rgba(25,45,32,.50) 100%),
    url("../images/brand-hero.png") center/cover fixed;
}

/* stage 內的每個 section 都透明，讓底圖透過 */
.brand-stage .page-hero,
.brand-stage .page-hero.has-photo,
.brand-stage .brand-story,
.brand-stage .brand-mit,
.brand-stage .brand-coop,
.brand-stage .brand-safety,
.brand-stage .brand-service,
.brand-stage .brand-closing{
  position:relative;background:transparent !important;z-index:1;
}
.brand-stage .page-hero.has-photo::before{display:none}
.brand-stage .brand-mit::before{display:none}


/* ═══ Brand sections · 縮短間距 + 浮上動畫 ═══ */
.brand-stage .brand-story,
.brand-stage .brand-mit,
.brand-stage .brand-coop,
.brand-stage .brand-safety,
.brand-stage .brand-service{padding:3.2rem 0 !important}
.brand-stage .brand-closing{padding:4rem 0 !important}
.brand-stage .page-hero.has-photo{padding-bottom:2.5rem !important;min-height:540px}

/* 章節聚焦：panel 依滾動進度 0→1→0 浮起 / 淡出 */
.brand-stage [data-float]{
  --focus:0;
  opacity:var(--focus);
  transform:translateY(calc((1 - var(--focus)) * 44px));
  transition:opacity .18s linear,transform .18s linear;
  will-change:opacity,transform;
}
@media(prefers-reduced-motion:reduce){
  .brand-stage [data-float]{--focus:1 !important;opacity:1 !important;transform:none !important}
}

/* ═══════════════════════════════════════════════
   SUMMER STAGE · 夏 · 節氣選品
   ═══ 視覺語言沿用 brand-stage：固定背景、毛玻璃、
       聚焦淡入；加上三層不同速度的雨幕營造涼意
   ═══════════════════════════════════════════════ */
.summer-stage{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    /* 淡青色雨幕調子，讓照片看起來像剛下過雨 */
    linear-gradient(180deg,
      rgba(30,56,52,.38) 0%,
      rgba(34,63,60,.32) 40%,
      rgba(30,56,52,.42) 100%),
    url("../images/summer-hero.jpg") center/cover fixed;
}
/* 微弱的水光，模擬空氣中的水氣 */
.summer-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 1200px 500px at 50% 0%, rgba(200,225,215,.18) 0%, transparent 70%),
    radial-gradient(circle at 18% 22%, rgba(180,230,210,.08) 0, transparent 40%),
    radial-gradient(circle at 82% 68%, rgba(140,200,190,.08) 0, transparent 45%);
  mix-blend-mode:screen;
}
/* 讓內部所有內容都浮在雨幕之上 */
.summer-stage > section{position:relative;z-index:2}

/* ─── 雨幕：三層不同密度、角度、速度 ─── */
.rain-layer{
  position:absolute;inset:-20% 0;pointer-events:none;z-index:1;
  opacity:.55;
  will-change:transform,background-position;
}
.rain-layer-far{
  opacity:.14;
  background:
    repeating-linear-gradient(
      94deg,
      transparent 0 48px,
      rgba(220,240,232,.28) 48px 48.5px,
      transparent 48.5px 160px
    );
  background-size:160px 260px;
  animation:rainFall 3.4s linear infinite;
  filter:blur(.8px);
}
.rain-layer-mid{
  opacity:.22;
  background:
    repeating-linear-gradient(
      97deg,
      transparent 0 72px,
      rgba(230,245,238,.45) 72px 72.7px,
      transparent 72.7px 220px
    );
  background-size:220px 340px;
  animation:rainFall 2.2s linear infinite;
  filter:blur(.4px);
}
.rain-layer-near{
  opacity:.3;
  background:
    repeating-linear-gradient(
      100deg,
      transparent 0 110px,
      rgba(240,250,245,.65) 110px 111px,
      transparent 111px 320px
    );
  background-size:320px 520px;
  animation:rainFall 1.4s linear infinite;
}
@keyframes rainFall{
  0%{background-position:0 -220px}
  100%{background-position:-80px 220px}
}
@media(prefers-reduced-motion:reduce){
  .rain-layer{animation:none;opacity:.25}
}

/* ─── PAGE HERO ─── */
.summer-stage .page-hero,
.summer-stage .page-hero.has-photo,
.summer-stage .breadcrumb{border-bottom:0 !important;background:transparent}
.summer-hero{padding:5rem 0 4.5rem;min-height:78vh;display:flex;align-items:center}
@media(max-width:768px){.summer-hero{padding:3.5rem 0;min-height:auto}}

.summer-hero-glass{
  max-width:820px;
  padding:3rem 2.75rem 2.5rem;
  background:rgba(15,30,28,.42);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border:1px solid rgba(242,196,106,.22);
  border-radius:4px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55);
  color:#f4f1e8;
}
.summer-hero-glass .page-hero-label{color:#f2c46a;letter-spacing:.22em}
.summer-hero-glass .page-hero-label .line{background:#f2c46a}
.summer-hero-glass .page-hero-h1{color:#faf8f0}
.summer-hero-glass .page-hero-h1 .accent{color:#f2c46a;font-style:italic}
.summer-hero-glass .page-hero-lead{color:rgba(244,241,232,.85)}
.summer-hero-glass .page-hero-stats .num,
.summer-hero-glass .page-hero-stats .sup{color:#f2c46a}
.summer-hero-glass .page-hero-stats dd{color:rgba(244,241,232,.75)}
.summer-hero-glass .page-hero-stat-divider{background:rgba(242,196,106,.35)}

.summer-hero-scroll{
  margin-top:2rem;display:flex;align-items:center;gap:.75rem;
  font-size:.78rem;letter-spacing:.28em;color:rgba(242,196,106,.75);
}
.summer-hero-scroll-line{
  width:36px;height:1px;background:#f2c46a;
  animation:scrollLineBlink 2.4s ease-in-out infinite;
}
@keyframes scrollLineBlink{
  0%,100%{opacity:.4;transform:scaleX(.6)}
  50%{opacity:1;transform:scaleX(1)}
}

/* ─── 節氣 SECTION ─── */
.summer-term{padding:4.5rem 0;position:relative}
.summer-term-inner{
  display:grid;grid-template-columns:280px 1fr;gap:3.5rem;align-items:start;
}
.summer-term-inner-reverse{grid-template-columns:1fr 280px}
.summer-term-inner-reverse .summer-term-side{order:2;text-align:right}
.summer-term-inner-reverse .summer-term-side .brand-story-kicker{justify-content:flex-end}
@media(max-width:900px){
  .summer-term-inner,
  .summer-term-inner-reverse{grid-template-columns:1fr;gap:1.5rem}
  .summer-term-inner-reverse .summer-term-side{order:0;text-align:left}
}

.summer-term-side{position:sticky;top:6rem;color:#f4f1e8}
.summer-term-side .brand-story-kicker{color:#f2c46a;display:inline-flex}
.summer-kicker-hot{color:#f9b464 !important}
.summer-term-h2{
  font-family:"Noto Serif TC",serif;
  font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:400;line-height:1.15;margin:.6rem 0 .4rem;color:#faf8f0;
  letter-spacing:.04em;
}
.summer-term-date{
  font-size:.82rem;letter-spacing:.18em;color:rgba(242,196,106,.85);
  margin-bottom:.4rem;font-family:"DM Sans",sans-serif;
}
.summer-term-caption{
  font-size:.92rem;color:rgba(244,241,232,.7);
  font-family:"Noto Serif TC",serif;font-style:italic;
}

.summer-term-body{
  padding:2.5rem 2.25rem;
  background:rgba(15,30,28,.38);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(242,196,106,.18);
  border-radius:4px;
  color:rgba(244,241,232,.88);
  line-height:1.85;font-size:1rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.5);
}
.summer-term-body p{margin:0 0 1rem}
.summer-lead{
  font-family:"Noto Serif TC",serif;
  font-size:1.18rem;line-height:1.75;color:#faf8f0;
  padding-bottom:1rem;margin-bottom:1.25rem !important;
  border-bottom:1px solid rgba(242,196,106,.2);
}

.summer-picks{
  list-style:none;padding:0;margin:1.5rem 0 0;
  display:flex;flex-direction:column;gap:.75rem;
}
.summer-picks li{
  display:flex;align-items:center;gap:.85rem;
  padding:.6rem 0;
  font-size:.95rem;color:#f4f1e8;
  border-bottom:1px dashed rgba(242,196,106,.18);
}
.summer-picks li:last-child{border-bottom:0}
.summer-pick-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#f2c46a;box-shadow:0 0 12px rgba(242,196,106,.6);
}
.summer-pick-origin{
  margin-left:auto;font-size:.82rem;letter-spacing:.06em;
  color:rgba(244,241,232,.55);font-family:"Noto Sans TC",sans-serif;
}

/* 夏至 / 大暑 特殊熱度感：雨幕減弱、金光增強 */
.summer-term-solstice .summer-term-body,
.summer-term-peak .summer-term-body{
  border-color:rgba(249,180,100,.3);
  box-shadow:0 24px 60px -30px rgba(249,180,100,.25),0 0 0 1px rgba(249,180,100,.08) inset;
}

/* ─── CLOSING ─── */
.summer-closing{padding:6rem 0 7rem;text-align:center;position:relative;z-index:2}
.summer-closing > .container{
  max-width:820px;
  padding:3.5rem 2.5rem;
  background:rgba(15,30,28,.4);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(242,196,106,.22);
  border-radius:4px;
}
.summer-closing-kicker{
  font-family:"DM Sans",sans-serif;letter-spacing:.32em;
  font-size:.78rem;color:#f2c46a;margin:0 0 1rem;
}
.summer-closing-h2{
  font-family:"Noto Serif TC",serif;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:400;line-height:1.7;color:#faf8f0;margin:0 0 2rem;
}
.summer-closing-h2 .accent{color:#f2c46a}
.summer-closing-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.summer-closing-primary,
.summer-closing-secondary{
  padding:.9rem 1.75rem;font-size:.92rem;letter-spacing:.1em;
  border-radius:2px;transition:all .25s;
  text-decoration:none;
}
.summer-closing-primary{
  background:#f2c46a;color:#223f3c;font-weight:500;
}
.summer-closing-primary:hover{background:#f9d68a;transform:translateY(-2px)}
.summer-closing-secondary{
  border:1px solid rgba(242,196,106,.4);color:#f2c46a;background:transparent;
}
.summer-closing-secondary:hover{background:rgba(242,196,106,.12)}

/* ─── 聚焦淡入：沿用 brand-stage 的節奏 ─── */
.summer-stage [data-float]{
  --focus:0;
  opacity:var(--focus);
  transform:translateY(calc((1 - var(--focus)) * 44px));
  transition:opacity .18s linear,transform .18s linear;
  will-change:opacity,transform;
}
@media(prefers-reduced-motion:reduce){
  .summer-stage [data-float]{--focus:1 !important;opacity:1 !important;transform:none !important}
}

/* ══════════════════════════════════════════════
   nav-actions: search / cart / login
   ══════════════════════════════════════════════ */
body.na-locked{overflow:hidden}

.na-backdrop{
  position:fixed;inset:0;z-index:100;
  background:rgba(15,30,22,.55);
  backdrop-filter:blur(4px);
  opacity:0;transition:opacity .28s ease;
}
.na-backdrop.is-open{opacity:1}
.na-backdrop[hidden]{display:none}

.na-close{
  background:transparent;border:0;cursor:pointer;
  font-size:1.1rem;line-height:1;color:inherit;
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .18s ease;
}
.na-close:hover{background:rgba(0,0,0,.08)}

/* ── Search overlay ── */
.na-overlay.na-search{
  position:fixed;left:0;right:0;top:0;z-index:110;
  background:#f8f3e6;
  border-bottom:1px solid rgba(26,58,42,.15);
  transform:translateY(-24px);opacity:0;
  transition:transform .32s cubic-bezier(.2,.7,.2,1),opacity .32s ease;
  box-shadow:0 18px 40px -20px rgba(15,30,22,.35);
}
.na-overlay.na-search.is-open{transform:translateY(0);opacity:1}
.na-overlay[hidden]{display:none}
.na-search-inner{
  max-width:880px;margin:0 auto;padding:2.4rem 1.5rem 2rem;
  color:#1a3a2a;
}
.na-search-kicker{
  display:block;font-size:.72rem;letter-spacing:.22em;
  color:#6b7a68;margin-bottom:.8rem;
}
.na-search-field{
  display:flex;align-items:center;gap:.8rem;
  border-bottom:2px solid #1a3a2a;padding:.5rem .2rem;
}
.na-search-field svg{width:22px;height:22px;flex-shrink:0;color:#1a3a2a}
.na-search-field input{
  flex:1;border:0;outline:0;background:transparent;
  font-size:1.5rem;color:#1a3a2a;font-family:inherit;
}
.na-search-field input::placeholder{color:#8a9a86}
.na-search-hints{
  margin-top:1.2rem;display:flex;flex-wrap:wrap;
  align-items:center;gap:.5rem;
}
.na-search-hint-label{font-size:.85rem;color:#6b7a68;margin-right:.3rem}
.na-search-hints button{
  background:#fff;border:1px solid rgba(26,58,42,.18);
  color:#1a3a2a;padding:.38rem .85rem;border-radius:999px;
  font-size:.85rem;cursor:pointer;font-family:inherit;
  transition:background .18s,border-color .18s;
}
.na-search-hints button:hover{background:#1a3a2a;color:#f8f3e6;border-color:#1a3a2a}
.na-search-recent{margin-top:1.6rem}
.na-search-sub{font-size:.8rem;letter-spacing:.12em;color:#6b7a68;margin-bottom:.5rem}
.na-search-recent ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.35rem}
.na-search-recent a{color:#1a3a2a;text-decoration:none;font-size:.95rem}
.na-search-recent a:hover{text-decoration:underline}

/* ── Cart drawer ── */
.na-drawer.na-cart{
  position:fixed;right:0;top:0;bottom:0;z-index:110;
  width:min(420px,92vw);
  background:#fdfaf4;color:#1a3a2a;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .34s cubic-bezier(.2,.7,.2,1);
  box-shadow:-20px 0 48px -20px rgba(15,30,22,.4);
}
.na-drawer.na-cart.is-open{transform:translateX(0)}
.na-drawer[hidden]{display:none}
.na-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 1.3rem;border-bottom:1px solid rgba(26,58,42,.12);
  font-weight:600;letter-spacing:.05em;
}
.na-cart-count{
  display:inline-block;margin-left:.4rem;
  background:var(--vermillion,#c83c2a);color:#fdfaf4;
  font-size:.72rem;font-style:normal;
  padding:.1rem .5rem;border-radius:999px;
}
.na-cart-list{
  flex:1;overflow-y:auto;list-style:none;
  padding:.6rem 1rem;margin:0;
  display:flex;flex-direction:column;gap:.9rem;
}
.na-cart-item{
  display:flex;gap:.85rem;padding:.6rem 0;
  border-bottom:1px dashed rgba(26,58,42,.12);
}
.na-cart-img{
  width:72px;height:72px;border-radius:6px;overflow:hidden;
  background:#e8e0d0;flex-shrink:0;
}
.na-cart-img img{width:100%;height:100%;object-fit:cover;display:block}
.na-cart-meta{flex:1;min-width:0}
.na-cart-name{margin:0 0 .15rem;font-size:.95rem;font-weight:600}
.na-cart-origin{margin:0 0 .4rem;font-size:.75rem;color:#6b7a68}
.na-cart-ctrl{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.82rem;
}
.na-qty{
  width:24px;height:24px;border:1px solid rgba(26,58,42,.25);
  background:#fff;border-radius:50%;cursor:pointer;
  line-height:1;color:#1a3a2a;font-family:inherit;
}
.na-qty:hover{background:#1a3a2a;color:#fdfaf4;border-color:#1a3a2a}
.na-qty-n{min-width:1.5rem;text-align:center}
.na-cart-price{margin-left:auto;font-weight:600}
.na-cart-del{
  background:transparent;border:0;color:#6b7a68;
  cursor:pointer;font-size:.78rem;margin-left:.3rem;
  text-decoration:underline;font-family:inherit;
}
.na-cart-del:hover{color:var(--vermillion,#c83c2a)}
.na-drawer-foot{
  border-top:1px solid rgba(196,148,40,.25);
  background:var(--gold-pale);
  padding:1rem 1.3rem 1.2rem;
}
.na-cart-total{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:.3rem;
  color:var(--pine);
}
.na-cart-sum{font-size:1.3rem;color:var(--pine);font-weight:600}
.na-cart-note{font-size:.75rem;color:#6b7a68;margin:.2rem 0 .9rem}
.na-cart-cta{
  display:block;text-align:center;text-decoration:none;
  background:#1a3a2a;color:#fdfaf4;
  padding:.85rem 1rem;border-radius:4px;font-weight:600;
  letter-spacing:.05em;transition:background .18s;
}
.na-cart-cta:hover{background:#2a5a42}

/* ── Login modal ── */
.na-modal.na-login{
  position:fixed;inset:0;z-index:110;
  display:flex;align-items:center;justify-content:center;
  padding:1.5rem;
  opacity:0;transition:opacity .28s ease;
  pointer-events:none;
}
.na-modal.na-login.is-open{opacity:1;pointer-events:auto}
.na-modal[hidden]{display:none}
.na-modal-inner{
  position:relative;
  background:#fdfaf4;color:#1a3a2a;
  width:min(420px,100%);padding:2rem 2rem 2.2rem;
  border-radius:8px;
  box-shadow:0 30px 60px -20px rgba(15,30,22,.5);
  transform:translateY(20px) scale(.98);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
}
.na-modal.na-login.is-open .na-modal-inner{transform:translateY(0) scale(1)}
.na-modal-inner .na-close{position:absolute;top:.6rem;right:.6rem}
.na-login-kicker{
  font-size:.72rem;letter-spacing:.22em;color:#6b7a68;
  margin:0 0 .4rem;text-transform:uppercase;
}
.na-login-h{
  margin:0 0 .5rem;font-size:1.6rem;line-height:1.3;
  font-weight:600;color:#1a3a2a;
}
.na-login-sub{font-size:.85rem;color:#6b7a68;margin:0 0 1.4rem}
.na-login-sub a{color:#1a3a2a;text-decoration:underline}
.na-login-form label{display:block;margin-bottom:.9rem;font-size:.85rem}
.na-login-form label > span{
  display:block;color:#6b7a68;margin-bottom:.25rem;letter-spacing:.05em;
}
.na-login-form input[type=email],
.na-login-form input[type=password]{
  width:100%;padding:.7rem .85rem;
  border:1px solid rgba(26,58,42,.2);border-radius:4px;
  background:#fff;font-family:inherit;font-size:.95rem;color:#1a3a2a;
}
.na-login-form input:focus{outline:2px solid #1a3a2a;outline-offset:1px;border-color:#1a3a2a}
.na-login-row{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.8rem;margin:.3rem 0 1.1rem;
}
.na-check{display:inline-flex;align-items:center;gap:.4rem;color:#6b7a68;margin:0 !important}
.na-login-forgot{color:#1a3a2a;text-decoration:underline}
.na-login-submit{
  width:100%;padding:.85rem 1rem;
  background:#1a3a2a;color:#fdfaf4;border:0;border-radius:4px;
  font-weight:600;letter-spacing:.05em;cursor:pointer;
  font-family:inherit;font-size:.95rem;transition:background .18s;
}
.na-login-submit:hover:not(:disabled){background:#2a5a42}
.na-login-submit:disabled{opacity:.75;cursor:default}
.na-login-or{text-align:center;font-size:.78rem;color:#6b7a68;margin:1rem 0}
.na-login-alt{
  width:100%;padding:.8rem 1rem;
  background:#fff;color:#1a3a2a;
  border:1px solid rgba(26,58,42,.25);border-radius:4px;
  cursor:pointer;font-family:inherit;font-size:.9rem;
  transition:background .18s,border-color .18s;
}
.na-login-alt:hover{background:#1a3a2a;color:#fdfaf4;border-color:#1a3a2a}

@media(max-width:560px){
  .na-search-inner{padding:1.6rem 1.2rem 1.4rem}
  .na-search-field input{font-size:1.15rem}
  .na-modal-inner{padding:1.6rem 1.4rem 1.8rem}
  .na-login-h{font-size:1.35rem}
}

/* ══════════════════════════════════════════════
   春 · spring-stage
   背景：插秧照片 + 溫暖金色光束 + 飄浮光塵
   ══════════════════════════════════════════════ */
.spring-stage{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    /* 暖陽色調，讓泥田更溫潤 */
    linear-gradient(180deg,
      rgba(80,60,32,.22) 0%,
      rgba(60,48,28,.18) 45%,
      rgba(45,36,22,.32) 100%),
    url("../images/spring-hero.jpg") center/cover fixed;
}
/* 整體金色暈染，模擬空氣中的花粉與水氣 */
.spring-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 1400px 700px at 85% -10%, rgba(255,225,150,.28) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 12% 105%, rgba(180,210,130,.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 40%, rgba(255,240,200,.06) 0, transparent 55%);
  mix-blend-mode:screen;
}
.spring-stage > section{position:relative;z-index:3}

/* ─── 太陽光源：右上角柔光球 ─── */
.sun-source{
  position:absolute;top:-180px;right:-120px;z-index:1;
  width:720px;height:720px;pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,240,180,.55) 0%,
    rgba(255,220,140,.35) 22%,
    rgba(255,200,110,.15) 45%,
    transparent 70%);
  filter:blur(20px);
  animation:sunBreath 7s ease-in-out infinite;
}
@keyframes sunBreath{
  0%,100%{opacity:.85;transform:scale(1)}
  50%{opacity:1;transform:scale(1.04)}
}

/* ─── 光束幕：三層不同角度與速度的 god rays ─── */
.sun-layer{
  position:absolute;inset:-25% -10%;pointer-events:none;z-index:2;
  will-change:transform,opacity;
  transform-origin:85% 0%;
  mix-blend-mode:screen;
}
.sun-layer-far{
  opacity:.32;
  background:
    linear-gradient(
      112deg,
      transparent 0%,
      transparent 4%,
      rgba(255,240,190,.50) 8%,
      rgba(255,240,190,.50) 17%,
      transparent 22%,
      transparent 31%,
      rgba(255,240,190,.38) 34%,
      rgba(255,240,190,.38) 40%,
      transparent 45%,
      transparent 56%,
      rgba(255,240,190,.55) 61%,
      rgba(255,240,190,.55) 74%,
      transparent 79%,
      transparent 87%,
      rgba(255,240,190,.40) 90%,
      rgba(255,240,190,.40) 96%,
      transparent 100%
    );
  filter:blur(14px);
  animation:sunDrift 18s ease-in-out infinite alternate;
}
.sun-layer-mid{
  opacity:.38;
  background:
    repeating-linear-gradient(
      115deg,
      transparent 0 180px,
      rgba(255,230,170,.55) 180px 340px,
      transparent 340px 560px
    );
  filter:blur(8px);
  animation:sunDrift 13s ease-in-out infinite alternate-reverse;
}
.sun-layer-near{
  opacity:.14;
  background:
    linear-gradient(
      118deg,
      transparent 0%,
      transparent 11%,
      rgba(255,245,210,.42) 14%,
      rgba(255,245,210,.42) 19%,
      transparent 23%,
      transparent 43%,
      rgba(255,245,210,.38) 47%,
      rgba(255,245,210,.38) 55%,
      transparent 60%,
      transparent 77%,
      rgba(255,245,210,.45) 81%,
      rgba(255,245,210,.45) 86%,
      transparent 92%,
      transparent 100%
    );
  filter:blur(3px);
  animation:sunDrift 9s ease-in-out infinite alternate;
}
@keyframes sunDrift{
  0%  {transform:translate3d(0,0,0) rotate(0deg);opacity:var(--o,.22)}
  50% {opacity:calc(var(--o,.22) * 1.3)}
  100%{transform:translate3d(-4%,2%,0) rotate(1.4deg);opacity:var(--o,.22)}
}

/* ─── 光塵：飄浮的小亮點 ─── */
.sun-dust{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    radial-gradient(circle at 12% 30%, rgba(255,250,220,.9) 0, rgba(255,250,220,0) 2px),
    radial-gradient(circle at 28% 62%, rgba(255,245,200,.85) 0, rgba(255,245,200,0) 1.5px),
    radial-gradient(circle at 55% 18%, rgba(255,250,220,.9) 0, rgba(255,250,220,0) 2.5px),
    radial-gradient(circle at 72% 48%, rgba(255,240,190,.8) 0, rgba(255,240,190,0) 2px),
    radial-gradient(circle at 40% 82%, rgba(255,250,220,.7) 0, rgba(255,250,220,0) 1.5px),
    radial-gradient(circle at 88% 72%, rgba(255,245,210,.9) 0, rgba(255,245,210,0) 2px),
    radial-gradient(circle at 65% 92%, rgba(255,250,220,.7) 0, rgba(255,250,220,0) 2px),
    radial-gradient(circle at 8% 78%, rgba(255,245,200,.6) 0, rgba(255,245,200,0) 1.5px);
  background-size:100% 100%;
  animation:dustFloat 24s linear infinite;
  opacity:.85;
  mix-blend-mode:screen;
}
@keyframes dustFloat{
  0%  {transform:translate3d(0,0,0)}
  50% {transform:translate3d(-12px,-24px,0)}
  100%{transform:translate3d(8px,-48px,0)}
}

@media(prefers-reduced-motion:reduce){
  .sun-layer,.sun-dust,.sun-source{animation:none}
}

/* ─── PAGE HERO ─── */
.spring-stage .page-hero,
.spring-stage .page-hero.has-photo,
.spring-stage .breadcrumb{border-bottom:0 !important;background:transparent}
.spring-hero{padding:5rem 0 4.5rem;min-height:78vh;display:flex;align-items:center}
@media(max-width:768px){.spring-hero{padding:3.5rem 0;min-height:auto}}

.spring-hero-glass{
  max-width:820px;
  padding:3rem 2.75rem 2.5rem;
  background:rgba(45,36,22,.38);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,220,140,.28);
  border-radius:4px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.55),0 0 60px -20px rgba(255,220,140,.25) inset;
  color:#f8f1dd;
}
.spring-hero-glass .page-hero-label{color:#ffd976;letter-spacing:.22em}
.spring-hero-glass .page-hero-label .line{background:#ffd976}
.spring-hero-glass .page-hero-h1{color:#fdf8e8}
.spring-hero-glass .page-hero-h1 .accent{color:#ffd976;font-style:italic}
.spring-hero-glass .page-hero-lead{color:rgba(248,241,221,.88)}
.spring-hero-glass .page-hero-stats .num,
.spring-hero-glass .page-hero-stats .sup{color:#ffd976}
.spring-hero-glass .page-hero-stats dd{color:rgba(248,241,221,.78)}
.spring-hero-glass .page-hero-stat-divider{background:rgba(255,220,140,.38)}

.spring-hero-scroll{
  margin-top:2rem;display:flex;align-items:center;gap:.75rem;
  font-size:.78rem;letter-spacing:.28em;color:rgba(255,220,140,.8);
}
.spring-hero-scroll-line{
  width:36px;height:1px;background:#ffd976;
  animation:scrollLineBlink 2.4s ease-in-out infinite;
}

/* ─── 節氣 SECTION ─── */
.spring-term{padding:4.5rem 0;position:relative}
.spring-term-inner{
  display:grid;grid-template-columns:280px 1fr;gap:3.5rem;align-items:start;
}
.spring-term-inner-reverse{grid-template-columns:1fr 280px}
.spring-term-inner-reverse .spring-term-side{order:2;text-align:right}
.spring-term-inner-reverse .spring-term-side .brand-story-kicker{justify-content:flex-end}
@media(max-width:900px){
  .spring-term-inner,
  .spring-term-inner-reverse{grid-template-columns:1fr;gap:1.5rem}
  .spring-term-inner-reverse .spring-term-side{order:0;text-align:left}
}

.spring-term-side{position:sticky;top:6rem;color:#f8f1dd}
.spring-term-side .brand-story-kicker{color:#ffd976;display:inline-flex}
.spring-kicker-warm{color:#ffc360 !important}
.spring-term-h2{
  font-family:"Noto Serif TC",serif;
  font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:400;line-height:1.15;margin:.6rem 0 .4rem;color:#fdf8e8;
  letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:.7rem;flex-wrap:wrap;
}
.spring-term-date{
  font-size:.82rem;letter-spacing:.18em;color:rgba(255,220,140,.9);
  margin-bottom:.4rem;font-family:"DM Sans",sans-serif;
}
.spring-term-caption{
  font-size:.92rem;color:rgba(248,241,221,.75);
  font-family:"Noto Serif TC",serif;font-style:italic;
}

/* 本節氣徽章 */
.spring-current-badge{
  display:inline-block;font-size:.62rem;letter-spacing:.22em;
  padding:.25rem .6rem;border-radius:2px;
  background:#ffd976;color:#5a3d10;font-family:"DM Sans",sans-serif;
  font-weight:500;vertical-align:middle;
  animation:badgePulse 2.2s ease-in-out infinite;
}
@keyframes badgePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,217,118,.7)}
  50%    {box-shadow:0 0 0 10px rgba(255,217,118,0)}
}

.spring-term-body{
  padding:2.5rem 2.25rem;
  background:rgba(45,36,22,.35);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(255,220,140,.2);
  border-radius:4px;
  color:rgba(248,241,221,.9);
  line-height:1.85;font-size:1rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.55);
}
.spring-term-body p{margin:0 0 1rem}
.spring-lead{
  font-family:"Noto Serif TC",serif;
  font-size:1.18rem;line-height:1.75;color:#fdf8e8;
  padding-bottom:1rem;margin-bottom:1.25rem !important;
  border-bottom:1px solid rgba(255,220,140,.25);
}

.spring-picks{
  list-style:none;padding:0;margin:1.5rem 0 0;
  display:flex;flex-direction:column;gap:.75rem;
}
.spring-picks li{
  display:flex;align-items:center;gap:.85rem;
  padding:.6rem 0;
  font-size:.95rem;color:#f8f1dd;
  border-bottom:1px dashed rgba(255,220,140,.2);
}
.spring-picks li:last-child{border-bottom:0}
.spring-pick-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#ffd976;box-shadow:0 0 12px rgba(255,217,118,.7);
}
.spring-pick-origin{
  margin-left:auto;font-size:.82rem;letter-spacing:.06em;
  color:rgba(248,241,221,.6);font-family:"Noto Sans TC",sans-serif;
}

/* 春分 / 穀雨：更強的金光 */
.spring-term-equinox .spring-term-body,
.spring-term-current .spring-term-body{
  border-color:rgba(255,195,96,.38);
  box-shadow:
    0 24px 60px -30px rgba(255,195,96,.35),
    0 0 0 1px rgba(255,195,96,.1) inset;
}
.spring-term-current .spring-term-body{
  background:rgba(55,40,20,.4);
  box-shadow:
    0 30px 80px -30px rgba(255,195,96,.5),
    0 0 0 1px rgba(255,220,140,.18) inset,
    0 0 120px -30px rgba(255,220,140,.35) inset;
}

/* ─── CLOSING ─── */
.spring-closing{padding:6rem 0 7rem;text-align:center;position:relative;z-index:3}
.spring-closing > .container{
  max-width:820px;
  padding:3.5rem 2.5rem;
  background:rgba(45,36,22,.42);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(255,220,140,.28);
  border-radius:4px;
}
.spring-closing-kicker{
  font-family:"DM Sans",sans-serif;letter-spacing:.32em;
  font-size:.78rem;color:#ffd976;margin:0 0 1rem;
}
.spring-closing-h2{
  font-family:"Noto Serif TC",serif;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:400;line-height:1.7;color:#fdf8e8;margin:0 0 2rem;
}
.spring-closing-h2 .accent{color:#ffd976}
.spring-closing-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.spring-closing-primary,
.spring-closing-secondary{
  padding:.9rem 1.75rem;font-size:.92rem;letter-spacing:.1em;
  border-radius:2px;transition:all .25s;
  text-decoration:none;
}
.spring-closing-primary{
  background:#ffd976;color:#5a3d10;font-weight:500;
}
.spring-closing-primary:hover{background:#ffe6a0;transform:translateY(-2px)}
.spring-closing-secondary{
  border:1px solid rgba(255,220,140,.45);color:#ffd976;background:transparent;
}
.spring-closing-secondary:hover{background:rgba(255,220,140,.14)}

/* ─── 聚焦淡入 ─── */
.spring-stage [data-float]{
  --focus:0;
  opacity:var(--focus);
  transform:translateY(calc((1 - var(--focus)) * 44px));
  transition:opacity .18s linear,transform .18s linear;
  will-change:opacity,transform;
}
@media(prefers-reduced-motion:reduce){
  .spring-stage [data-float]{--focus:1 !important;opacity:1 !important;transform:none !important}
}

/* ══════════════════════════════════════════════
   冬 · winter-stage
   背景：辛香料木桌 + 爐火暖光 + 緩慢升騰的蒸氣
   ══════════════════════════════════════════════ */
.winter-stage{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    /* 深琥珀色調，讓木紋更溫暖更深邃 */
    linear-gradient(180deg,
      rgba(30,18,10,.55) 0%,
      rgba(40,24,14,.38) 35%,
      rgba(55,32,18,.32) 65%,
      rgba(30,18,10,.48) 100%),
    url("../images/winter-hero.jpg") center/cover fixed;
}
/* 周圍暗角，把視線聚到中央 */
.winter-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 1200px 700px at 50% 50%, transparent 0%, rgba(15,8,4,.35) 85%),
    radial-gradient(ellipse 800px 400px at 0% 0%, rgba(200,130,60,.08) 0%, transparent 60%);
  mix-blend-mode:multiply;
}
.winter-stage > section{position:relative;z-index:3}

/* ─── 爐火暖光：右下角低調的熱源 ─── */
.hearth-glow{
  position:absolute;bottom:-240px;right:-180px;z-index:1;
  width:820px;height:820px;pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,160,80,.38) 0%,
    rgba(240,130,60,.25) 20%,
    rgba(200,100,45,.14) 40%,
    transparent 65%);
  filter:blur(30px);
  mix-blend-mode:screen;
  animation:hearthFlicker 4.5s ease-in-out infinite;
}
@keyframes hearthFlicker{
  0%,100%{opacity:.82;transform:scale(1)}
  25%    {opacity:.95;transform:scale(1.03)}
  55%    {opacity:.75;transform:scale(.98)}
  80%    {opacity:.92;transform:scale(1.02)}
}

/* ─── 蒸氣層：兩層不同高度、速度 ─── */
.steam-layer{
  position:absolute;inset:-15% 0 -5%;pointer-events:none;z-index:2;
  will-change:transform,opacity;
  mix-blend-mode:screen;
}
.steam-layer-far{
  opacity:.26;
  background:
    radial-gradient(ellipse 280px 160px at 22% 78%, rgba(255,225,185,.55) 0%, transparent 65%),
    radial-gradient(ellipse 340px 200px at 58% 88%, rgba(255,215,170,.45) 0%, transparent 60%),
    radial-gradient(ellipse 220px 140px at 82% 72%, rgba(255,230,190,.5) 0%, transparent 65%),
    radial-gradient(ellipse 300px 180px at 38% 65%, rgba(255,220,180,.35) 0%, transparent 62%);
  filter:blur(20px);
  animation:steamRise 14s ease-in-out infinite;
}
.steam-layer-near{
  opacity:.22;
  background:
    radial-gradient(ellipse 200px 120px at 68% 82%, rgba(255,240,210,.6) 0%, transparent 60%),
    radial-gradient(ellipse 160px 100px at 28% 68%, rgba(255,230,190,.5) 0%, transparent 58%),
    radial-gradient(ellipse 260px 160px at 85% 58%, rgba(255,225,180,.4) 0%, transparent 62%);
  filter:blur(10px);
  animation:steamRise 9s ease-in-out infinite reverse;
}
@keyframes steamRise{
  0%   {transform:translate3d(0,0,0) scale(1);opacity:var(--o,.22)}
  30%  {opacity:calc(var(--o,.22) * 1.4)}
  60%  {transform:translate3d(-1%,-18%,0) scale(1.08);opacity:calc(var(--o,.22) * 0.9)}
  100% {transform:translate3d(2%,-32%,0) scale(1.15);opacity:0}
}

/* ─── 暖色粉塵：飄浮的辛香料顆粒 ─── */
.spice-dust{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:
    radial-gradient(circle at 15% 82%, rgba(255,200,130,.9) 0, rgba(255,200,130,0) 2px),
    radial-gradient(circle at 32% 68%, rgba(255,180,100,.85) 0, rgba(255,180,100,0) 1.5px),
    radial-gradient(circle at 48% 88%, rgba(255,210,150,.85) 0, rgba(255,210,150,0) 2px),
    radial-gradient(circle at 68% 74%, rgba(255,190,110,.9) 0, rgba(255,190,110,0) 2.5px),
    radial-gradient(circle at 82% 62%, rgba(255,220,160,.8) 0, rgba(255,220,160,0) 1.5px),
    radial-gradient(circle at 12% 52%, rgba(255,200,130,.7) 0, rgba(255,200,130,0) 2px),
    radial-gradient(circle at 58% 42%, rgba(255,210,150,.6) 0, rgba(255,210,150,0) 1.5px),
    radial-gradient(circle at 92% 38%, rgba(255,190,110,.75) 0, rgba(255,190,110,0) 2px);
  background-size:100% 100%;
  animation:emberFloat 20s linear infinite;
  opacity:.85;
  mix-blend-mode:screen;
}
@keyframes emberFloat{
  0%  {transform:translate3d(0,0,0)}
  50% {transform:translate3d(-6px,-40px,0)}
  100%{transform:translate3d(10px,-80px,0)}
}

@media(prefers-reduced-motion:reduce){
  .steam-layer,.spice-dust,.hearth-glow{animation:none}
}

/* ─── PAGE HERO ─── */
.winter-stage .page-hero,
.winter-stage .page-hero.has-photo,
.winter-stage .breadcrumb{border-bottom:0 !important;background:transparent}
.winter-hero{padding:5rem 0 4.5rem;min-height:78vh;display:flex;align-items:center}
@media(max-width:768px){.winter-hero{padding:3.5rem 0;min-height:auto}}

.winter-hero-glass{
  max-width:820px;
  padding:3rem 2.75rem 2.5rem;
  background:rgba(30,18,10,.55);
  backdrop-filter:blur(20px) saturate(1.15);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  border:1px solid rgba(240,170,90,.28);
  border-radius:4px;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.7),
    0 0 80px -20px rgba(255,160,80,.2) inset;
  color:#f6e9d3;
}
.winter-hero-glass .page-hero-label{color:#f0a95e;letter-spacing:.22em}
.winter-hero-glass .page-hero-label .line{background:#f0a95e}
.winter-hero-glass .page-hero-h1{color:#fbf2de}
.winter-hero-glass .page-hero-h1 .accent{color:#f0a95e;font-style:italic}
.winter-hero-glass .page-hero-lead{color:rgba(246,233,211,.88)}
.winter-hero-glass .page-hero-stats .num,
.winter-hero-glass .page-hero-stats .sup{color:#f0a95e}
.winter-hero-glass .page-hero-stats dd{color:rgba(246,233,211,.78)}
.winter-hero-glass .page-hero-stat-divider{background:rgba(240,170,90,.35)}

.winter-hero-scroll{
  margin-top:2rem;display:flex;align-items:center;gap:.75rem;
  font-size:.78rem;letter-spacing:.28em;color:rgba(240,170,90,.8);
}
.winter-hero-scroll-line{
  width:36px;height:1px;background:#f0a95e;
  animation:scrollLineBlink 2.4s ease-in-out infinite;
}

/* ─── 節氣 SECTION ─── */
.winter-term{padding:4.5rem 0;position:relative}
.winter-term-inner{
  display:grid;grid-template-columns:280px 1fr;gap:3.5rem;align-items:start;
}
.winter-term-inner-reverse{grid-template-columns:1fr 280px}
.winter-term-inner-reverse .winter-term-side{order:2;text-align:right}
.winter-term-inner-reverse .winter-term-side .brand-story-kicker{justify-content:flex-end}
@media(max-width:900px){
  .winter-term-inner,
  .winter-term-inner-reverse{grid-template-columns:1fr;gap:1.5rem}
  .winter-term-inner-reverse .winter-term-side{order:0;text-align:left}
}

.winter-term-side{position:sticky;top:6rem;color:#f6e9d3}
.winter-term-side .brand-story-kicker{color:#f0a95e;display:inline-flex}
.winter-kicker-warm{color:#ff9146 !important}
.winter-term-h2{
  font-family:"Noto Serif TC",serif;
  font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:400;line-height:1.15;margin:.6rem 0 .4rem;color:#fbf2de;
  letter-spacing:.04em;
}
.winter-term-date{
  font-size:.82rem;letter-spacing:.18em;color:rgba(240,170,90,.9);
  margin-bottom:.4rem;font-family:"DM Sans",sans-serif;
}
.winter-term-caption{
  font-size:.92rem;color:rgba(246,233,211,.72);
  font-family:"Noto Serif TC",serif;font-style:italic;
}

.winter-term-body{
  padding:2.5rem 2.25rem;
  background:rgba(30,18,10,.52);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(240,170,90,.2);
  border-radius:4px;
  color:rgba(246,233,211,.9);
  line-height:1.85;font-size:1rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7);
}
.winter-term-body p{margin:0 0 1rem}
.winter-lead{
  font-family:"Noto Serif TC",serif;
  font-size:1.18rem;line-height:1.75;color:#fbf2de;
  padding-bottom:1rem;margin-bottom:1.25rem !important;
  border-bottom:1px solid rgba(240,170,90,.25);
}

.winter-picks{
  list-style:none;padding:0;margin:1.5rem 0 0;
  display:flex;flex-direction:column;gap:.75rem;
}
.winter-picks li{
  display:flex;align-items:center;gap:.85rem;
  padding:.6rem 0;
  font-size:.95rem;color:#f6e9d3;
  border-bottom:1px dashed rgba(240,170,90,.2);
}
.winter-picks li:last-child{border-bottom:0}
.winter-pick-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#f0a95e;box-shadow:0 0 14px rgba(255,145,70,.8);
}
.winter-pick-origin{
  margin-left:auto;font-size:.82rem;letter-spacing:.06em;
  color:rgba(246,233,211,.6);font-family:"Noto Sans TC",sans-serif;
}

/* 冬至 / 大寒：更強的爐火感 */
.winter-term-solstice .winter-term-body,
.winter-term-peak .winter-term-body{
  border-color:rgba(255,145,70,.38);
  box-shadow:
    0 24px 60px -30px rgba(255,145,70,.4),
    0 0 0 1px rgba(255,145,70,.1) inset,
    0 0 100px -30px rgba(255,145,70,.3) inset;
}

/* ─── CLOSING ─── */
.winter-closing{padding:6rem 0 7rem;text-align:center;position:relative;z-index:3}
.winter-closing > .container{
  max-width:820px;
  padding:3.5rem 2.5rem;
  background:rgba(30,18,10,.58);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(240,170,90,.28);
  border-radius:4px;
}
.winter-closing-kicker{
  font-family:"DM Sans",sans-serif;letter-spacing:.32em;
  font-size:.78rem;color:#f0a95e;margin:0 0 1rem;
}
.winter-closing-h2{
  font-family:"Noto Serif TC",serif;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:400;line-height:1.7;color:#fbf2de;margin:0 0 2rem;
}
.winter-closing-h2 .accent{color:#f0a95e}
.winter-closing-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.winter-closing-primary,
.winter-closing-secondary{
  padding:.9rem 1.75rem;font-size:.92rem;letter-spacing:.1em;
  border-radius:2px;transition:all .25s;
  text-decoration:none;
}
.winter-closing-primary{
  background:#f0a95e;color:#3a1f0c;font-weight:500;
}
.winter-closing-primary:hover{background:#f7c287;transform:translateY(-2px)}
.winter-closing-secondary{
  border:1px solid rgba(240,170,90,.45);color:#f0a95e;background:transparent;
}
.winter-closing-secondary:hover{background:rgba(240,170,90,.14)}

/* ─── 聚焦淡入 ─── */
.winter-stage [data-float]{
  --focus:0;
  opacity:var(--focus);
  transform:translateY(calc((1 - var(--focus)) * 44px));
  transition:opacity .18s linear,transform .18s linear;
  will-change:opacity,transform;
}
@media(prefers-reduced-motion:reduce){
  .winter-stage [data-float]{--focus:1 !important;opacity:1 !important;transform:none !important}
}

/* ══════════════════════════════════════════════
   秋 · autumn-stage
   背景：金黃稻田 + 夕陽側光 + 風吹稻浪 + 飄落葉
   ══════════════════════════════════════════════ */
.autumn-stage{
  position:relative;isolation:isolate;overflow:hidden;
  background:
    /* 暖金覆蓋讓稻田飽和 */
    linear-gradient(180deg,
      rgba(70,50,20,.28) 0%,
      rgba(60,42,16,.20) 40%,
      rgba(50,32,12,.34) 100%),
    url("../images/autumn-hero.jpg") center/cover fixed;
}
/* 金色暈染，讓整體更溫暖 */
.autumn-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 1400px 700px at 15% 0%, rgba(255,200,100,.3) 0%, transparent 60%),
    radial-gradient(ellipse 900px 500px at 90% 110%, rgba(200,120,50,.15) 0%, transparent 60%);
  mix-blend-mode:screen;
}
.autumn-stage > section{position:relative;z-index:3}

/* ─── 夕陽：左上角低調的暖光源 ─── */
.autumn-sun{
  position:absolute;top:-140px;left:-100px;z-index:1;
  width:680px;height:680px;pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,210,130,.45) 0%,
    rgba(255,180,90,.3) 25%,
    rgba(230,140,60,.14) 50%,
    transparent 72%);
  filter:blur(22px);
  mix-blend-mode:screen;
  animation:autumnSunPulse 8s ease-in-out infinite;
}
@keyframes autumnSunPulse{
  0%,100%{opacity:.88;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.04)}
}

/* ─── 稻浪風感：兩層水平暖色波紋，緩緩橫向移動 ─── */
.wind-layer{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  will-change:transform;
  mix-blend-mode:screen;
}
.wind-layer-far{
  opacity:.22;
  background:
    linear-gradient(
      92deg,
      transparent 0%,
      transparent 8%,
      rgba(255,220,140,.35) 12%,
      rgba(255,220,140,.35) 22%,
      transparent 28%,
      transparent 44%,
      rgba(255,210,130,.3) 48%,
      rgba(255,210,130,.3) 62%,
      transparent 68%,
      transparent 82%,
      rgba(255,215,135,.32) 85%,
      rgba(255,215,135,.32) 93%,
      transparent 100%
    );
  filter:blur(18px);
  animation:windSway 16s ease-in-out infinite alternate;
}
.wind-layer-near{
  opacity:.14;
  background:
    linear-gradient(
      88deg,
      transparent 0%,
      transparent 20%,
      rgba(255,235,180,.28) 25%,
      rgba(255,235,180,.28) 35%,
      transparent 42%,
      transparent 65%,
      rgba(255,230,170,.3) 70%,
      rgba(255,230,170,.3) 78%,
      transparent 85%,
      transparent 100%
    );
  filter:blur(6px);
  animation:windSway 11s ease-in-out infinite alternate-reverse;
}
@keyframes windSway{
  0%  {transform:translate3d(0,0,0)}
  100%{transform:translate3d(-5%,0,0)}
}

/* ─── 飄落葉片：六片隨機形狀、大小、路徑 ─── */
.leaf{
  position:absolute;pointer-events:none;z-index:2;
  width:14px;height:18px;
  background:radial-gradient(ellipse at 50% 20%,
    rgba(230,140,50,.9) 0%,
    rgba(200,100,35,.8) 50%,
    rgba(150,70,25,.7) 100%);
  border-radius:100% 0 100% 0;
  filter:blur(.5px) drop-shadow(0 2px 4px rgba(0,0,0,.3));
  opacity:.85;
}
.leaf-1{top:-5%;left:15%;animation:leafFall 17s linear infinite;animation-delay:-2s;transform:rotate(18deg)}
.leaf-2{top:-8%;left:38%;width:10px;height:14px;animation:leafFall 22s linear infinite;animation-delay:-8s;
  background:radial-gradient(ellipse at 50% 20%,rgba(240,180,90,.9) 0%,rgba(210,130,45,.8) 60%,transparent 100%)}
.leaf-3{top:-6%;left:62%;width:16px;height:20px;animation:leafFall 19s linear infinite;animation-delay:-12s;
  background:radial-gradient(ellipse at 50% 30%,rgba(190,80,30,.9) 0%,rgba(130,55,20,.8) 100%)}
.leaf-4{top:-10%;left:78%;width:12px;height:16px;animation:leafFall 25s linear infinite;animation-delay:-4s;
  background:radial-gradient(ellipse at 50% 20%,rgba(250,200,120,.85) 0%,rgba(220,150,70,.75) 100%)}
.leaf-5{top:-4%;left:28%;width:9px;height:13px;animation:leafFall 28s linear infinite;animation-delay:-15s;
  background:radial-gradient(ellipse at 50% 30%,rgba(210,110,40,.85) 0%,rgba(150,70,25,.75) 100%)}
.leaf-6{top:-7%;left:88%;width:13px;height:17px;animation:leafFall 20s linear infinite;animation-delay:-19s;
  background:radial-gradient(ellipse at 50% 20%,rgba(235,160,70,.9) 0%,rgba(180,90,30,.8) 100%)}

@keyframes leafFall{
  0%   {transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  8%   {opacity:.85}
  25%  {transform:translate3d(-30px,25vh,0) rotate(120deg)}
  50%  {transform:translate3d(40px,50vh,0) rotate(260deg)}
  75%  {transform:translate3d(-20px,75vh,0) rotate(400deg)}
  92%  {opacity:.85}
  100% {transform:translate3d(30px,110vh,0) rotate(560deg);opacity:0}
}

@media(prefers-reduced-motion:reduce){
  .wind-layer,.leaf,.autumn-sun{animation:none}
  .leaf{display:none}
}

/* ─── PAGE HERO ─── */
.autumn-stage .page-hero,
.autumn-stage .page-hero.has-photo,
.autumn-stage .breadcrumb{border-bottom:0 !important;background:transparent}
.autumn-hero{padding:5rem 0 4.5rem;min-height:78vh;display:flex;align-items:center}
@media(max-width:768px){.autumn-hero{padding:3.5rem 0;min-height:auto}}

.autumn-hero-glass{
  max-width:820px;
  padding:3rem 2.75rem 2.5rem;
  background:rgba(45,28,12,.48);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(235,170,80,.28);
  border-radius:4px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6),0 0 70px -20px rgba(255,180,90,.2) inset;
  color:#f8ecd4;
}
.autumn-hero-glass .page-hero-label{color:#e8a858;letter-spacing:.22em}
.autumn-hero-glass .page-hero-label .line{background:#e8a858}
.autumn-hero-glass .page-hero-h1{color:#fdf4df}
.autumn-hero-glass .page-hero-h1 .accent{color:#e8a858;font-style:italic}
.autumn-hero-glass .page-hero-lead{color:rgba(248,236,212,.88)}
.autumn-hero-glass .page-hero-stats .num,
.autumn-hero-glass .page-hero-stats .sup{color:#e8a858}
.autumn-hero-glass .page-hero-stats dd{color:rgba(248,236,212,.78)}
.autumn-hero-glass .page-hero-stat-divider{background:rgba(235,170,80,.38)}

.autumn-hero-scroll{
  margin-top:2rem;display:flex;align-items:center;gap:.75rem;
  font-size:.78rem;letter-spacing:.28em;color:rgba(235,170,80,.82);
}
.autumn-hero-scroll-line{
  width:36px;height:1px;background:#e8a858;
  animation:scrollLineBlink 2.4s ease-in-out infinite;
}

/* ─── 節氣 SECTION ─── */
.autumn-term{padding:4.5rem 0;position:relative}
.autumn-term-inner{
  display:grid;grid-template-columns:280px 1fr;gap:3.5rem;align-items:start;
}
.autumn-term-inner-reverse{grid-template-columns:1fr 280px}
.autumn-term-inner-reverse .autumn-term-side{order:2;text-align:right}
.autumn-term-inner-reverse .autumn-term-side .brand-story-kicker{justify-content:flex-end}
@media(max-width:900px){
  .autumn-term-inner,
  .autumn-term-inner-reverse{grid-template-columns:1fr;gap:1.5rem}
  .autumn-term-inner-reverse .autumn-term-side{order:0;text-align:left}
}

.autumn-term-side{position:sticky;top:6rem;color:#f8ecd4}
.autumn-term-side .brand-story-kicker{color:#e8a858;display:inline-flex}
.autumn-kicker-warm{color:#d87840 !important}
.autumn-term-h2{
  font-family:"Noto Serif TC",serif;
  font-size:clamp(2.4rem,4vw,3.4rem);
  font-weight:400;line-height:1.15;margin:.6rem 0 .4rem;color:#fdf4df;
  letter-spacing:.04em;
}
.autumn-term-date{
  font-size:.82rem;letter-spacing:.18em;color:rgba(235,170,80,.9);
  margin-bottom:.4rem;font-family:"DM Sans",sans-serif;
}
.autumn-term-caption{
  font-size:.92rem;color:rgba(248,236,212,.72);
  font-family:"Noto Serif TC",serif;font-style:italic;
}

.autumn-term-body{
  padding:2.5rem 2.25rem;
  background:rgba(45,28,12,.45);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(235,170,80,.2);
  border-radius:4px;
  color:rgba(248,236,212,.9);
  line-height:1.85;font-size:1rem;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.6);
}
.autumn-term-body p{margin:0 0 1rem}
.autumn-lead{
  font-family:"Noto Serif TC",serif;
  font-size:1.18rem;line-height:1.75;color:#fdf4df;
  padding-bottom:1rem;margin-bottom:1.25rem !important;
  border-bottom:1px solid rgba(235,170,80,.25);
}

.autumn-picks{
  list-style:none;padding:0;margin:1.5rem 0 0;
  display:flex;flex-direction:column;gap:.75rem;
}
.autumn-picks li{
  display:flex;align-items:center;gap:.85rem;
  padding:.6rem 0;
  font-size:.95rem;color:#f8ecd4;
  border-bottom:1px dashed rgba(235,170,80,.2);
}
.autumn-picks li:last-child{border-bottom:0}
.autumn-pick-dot{
  width:8px;height:8px;border-radius:50%;flex:none;
  background:#e8a858;box-shadow:0 0 14px rgba(216,120,64,.75);
}
.autumn-pick-origin{
  margin-left:auto;font-size:.82rem;letter-spacing:.06em;
  color:rgba(248,236,212,.6);font-family:"Noto Sans TC",sans-serif;
}

/* 秋分 / 霜降：更深的暖橙感 */
.autumn-term-equinox .autumn-term-body,
.autumn-term-peak .autumn-term-body{
  border-color:rgba(216,120,64,.38);
  box-shadow:
    0 24px 60px -30px rgba(216,120,64,.38),
    0 0 0 1px rgba(216,120,64,.1) inset,
    0 0 110px -30px rgba(216,120,64,.25) inset;
}

/* ─── CLOSING ─── */
.autumn-closing{padding:6rem 0 7rem;text-align:center;position:relative;z-index:3}
.autumn-closing > .container{
  max-width:820px;
  padding:3.5rem 2.5rem;
  background:rgba(45,28,12,.52);
  backdrop-filter:blur(16px) saturate(1.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);
  border:1px solid rgba(235,170,80,.28);
  border-radius:4px;
}
.autumn-closing-kicker{
  font-family:"DM Sans",sans-serif;letter-spacing:.32em;
  font-size:.78rem;color:#e8a858;margin:0 0 1rem;
}
.autumn-closing-h2{
  font-family:"Noto Serif TC",serif;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:400;line-height:1.7;color:#fdf4df;margin:0 0 2rem;
}
.autumn-closing-h2 .accent{color:#e8a858}
.autumn-closing-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.autumn-closing-primary,
.autumn-closing-secondary{
  padding:.9rem 1.75rem;font-size:.92rem;letter-spacing:.1em;
  border-radius:2px;transition:all .25s;
  text-decoration:none;
}
.autumn-closing-primary{
  background:#e8a858;color:#3a1f0c;font-weight:500;
}
.autumn-closing-primary:hover{background:#f3c07d;transform:translateY(-2px)}
.autumn-closing-secondary{
  border:1px solid rgba(235,170,80,.45);color:#e8a858;background:transparent;
}
.autumn-closing-secondary:hover{background:rgba(235,170,80,.14)}

/* ─── 聚焦淡入 ─── */
.autumn-stage [data-float]{
  --focus:0;
  opacity:var(--focus);
  transform:translateY(calc((1 - var(--focus)) * 44px));
  transition:opacity .18s linear,transform .18s linear;
  will-change:opacity,transform;
}
@media(prefers-reduced-motion:reduce){
  .autumn-stage [data-float]{--focus:1 !important;opacity:1 !important;transform:none !important}
}


/* ═══════════════════════════════════════════════════
   PRODUCTS PAGE · Brand band / Occasion / Trust / Enhanced cards
   ═══════════════════════════════════════════════════ */

/* ── Shop by Brand ── */
.brand-band{padding:3.2rem 0 2.4rem;background:linear-gradient(180deg,#faf7f0,#fff)}
.brand-band-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap}
.brand-band-head .l{display:flex;align-items:center;gap:1rem}
.brand-band-head .g-icn-lg{color:var(--pine);padding:.45rem;background:rgba(58,90,76,.08);border-radius:10px;box-sizing:content-box;width:28px;height:28px;stroke-width:1.4}
.brand-band-head .l-text{display:flex;flex-direction:column;gap:.35rem}
.brand-band-head .l .en{display:block;font-family:'DM Sans',sans-serif;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--pine);margin-bottom:.35rem}
.brand-band-head .l .zh{font-family:'Noto Serif TC',serif;font-size:1.35rem;color:var(--ink);font-weight:500}
.brand-band-all{font-family:'DM Sans',sans-serif;font-size:.86rem;color:var(--pine);border-bottom:1px solid var(--pine);padding-bottom:2px}
.brand-band-all:hover{color:var(--ink);border-color:var(--ink)}
.brand-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.brand-chip{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(28,51,42,.09);border-radius:14px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.brand-chip:hover{transform:translateY(-4px);box-shadow:0 14px 34px -18px rgba(28,51,42,.22);border-color:rgba(28,51,42,.2)}
.brand-chip-mark{aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(135deg,#f2ede0,#e9e1cd)}
.brand-chip-mark img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease,filter .5s ease;filter:saturate(.92) contrast(.97)}
.brand-chip-mark::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,51,42,0) 40%,rgba(28,51,42,.55) 100%);pointer-events:none}
.brand-chip:hover .brand-chip-mark img{transform:scale(1.05);filter:saturate(1.05) contrast(1)}
.brand-chip-seal{position:absolute;left:.85rem;bottom:.75rem;z-index:2;width:3.2rem;height:3.2rem;display:flex;align-items:center;justify-content:center;background:var(--vermillion);color:#fff;font-family:var(--font-serif);font-size:.95rem;line-height:1.05;letter-spacing:.05em;text-align:center;border:2px solid #fff;box-shadow:0 4px 10px -2px rgba(192,57,43,.45);border-radius:2px;transform:rotate(-3deg)}
.brand-chip-body{padding:1rem 1.1rem 1.2rem}
.brand-chip-en{font-family:'DM Sans',sans-serif;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8a8778;display:block;margin-bottom:.35rem}
.brand-chip-body h3{font-family:'Noto Serif TC',serif;font-size:1.1rem;color:var(--ink);margin-bottom:.45rem;font-weight:500}
.brand-chip-body p{font-family:'Noto Sans TC',sans-serif;font-size:.82rem;color:#666;line-height:1.55}

/* ── Enhanced product card (brand / spec / badge) ── */
.product-grid.prod-4{grid-template-columns:repeat(4,1fr)}
.product-card .product-img{position:relative}
.prod-badge{position:absolute;top:.7rem;left:.7rem;z-index:2;padding:.22rem .55rem;border-radius:999px;background:rgba(28,51,42,.88);color:#fff;font-family:'DM Sans',sans-serif;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.product-card .product-brand{display:inline-block;font-family:'Noto Serif TC',serif;font-size:.78rem;color:var(--pine);letter-spacing:.05em;margin-bottom:.35rem;padding:.15rem .5rem;background:rgba(58,90,76,.08);border-radius:4px}
.product-card .product-spec{display:block;font-family:'Noto Sans TC',sans-serif;font-size:.78rem;color:#8a8778;margin:.3rem 0}
.product-card .product-farmer{display:block;font-size:.76rem;color:#a39f93;margin-bottom:.6rem;font-style:normal}
.product-card .product-name{font-size:1.02rem;line-height:1.45;margin-bottom:.25rem}
.product-card .product-price{margin-top:auto;font-family:'DM Sans',sans-serif;font-size:1.1rem;color:var(--ink);font-weight:500}
.product-card .product-price .strike{font-size:.82rem;color:#b8b5a8;text-decoration:line-through;margin-left:.35rem;font-weight:300}

/* ── Shop by Occasion ── */
.occasion-strip{padding:3.6rem 0 4.8rem;background:linear-gradient(180deg,#fffaf2 0%,#fff 60%);position:relative}
/* 預設 intro 面板（顯示於 occ-stage 內，未選刻度時） */
.occ-intro-panel{align-items:flex-start;gap:.6rem;padding:.2rem 0;position:relative}
.occ-intro-panel .occ-kicker{display:inline-block;font-family:var(--font-latin);font-size:.7rem;letter-spacing:.3em;color:var(--vermillion);text-transform:uppercase;margin-bottom:.4rem}
.occ-intro-panel .occ-h2{font-family:var(--font-serif);font-size:2rem;line-height:1.4;color:var(--pine);font-weight:400;letter-spacing:.06em;margin:0 0 .9rem}
.occ-intro-panel .occ-lead{font-family:var(--font-serif);font-size:1rem;line-height:1.9;color:var(--ink);margin:0 0 1.4rem;max-width:28em}
.occ-intro-panel .occ-hint{font-family:var(--font-serif);font-size:.82rem;letter-spacing:.1em;color:var(--ink-light);padding:.55rem 0;border-top:1px dashed rgba(28,51,42,.22);display:inline-block;align-self:stretch}
/* ── 時間刻度式情境選物（Time Scrubber UI）── */
.occasion-picker{display:grid;grid-template-columns:180px 1fr;gap:2.5rem;align-items:stretch;min-height:420px}
.occ-scale{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:1rem 0;min-height:380px}
/* 軸線（置於刻度點正中央） */
.occ-rail{position:absolute;left:.9rem;top:1.4rem;bottom:1.4rem;width:2px;margin-left:-1px;background:linear-gradient(180deg,rgba(192,57,43,.5) 0%,rgba(192,57,43,.2) 100%);border-radius:2px;pointer-events:none}
/* 刻度按鈕（扁平，靠 absolute 圓點貼齊軸線） */
.occ-tick{appearance:none;background:transparent;border:0;margin:0;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;padding:.4rem .4rem .4rem 2rem;text-align:left;font:inherit;color:var(--ink-light);transition:color .3s ease;font-family:var(--font-serif);min-height:40px}
.occ-tick .tick-dot{position:absolute;left:.9rem;top:50%;transform:translate(-50%,-50%);width:10px;height:10px;border-radius:50%;background:#fff;border:1.5px solid rgba(192,57,43,.5);transition:width .35s ease,height .35s ease,background .35s ease,border-color .35s ease,box-shadow .35s ease;box-sizing:border-box;z-index:1}
.occ-tick .tick-label{font-family:var(--font-serif);font-size:1.1rem;line-height:1.15;color:var(--pine);letter-spacing:.08em;transition:color .3s ease,font-size .3s ease}
.occ-tick .tick-time{font-family:var(--font-latin);font-size:.72rem;letter-spacing:.14em;color:var(--ink-light);transition:color .3s ease}
.occ-tick:hover .tick-dot{border-color:var(--vermillion);width:12px;height:12px}
.occ-tick:hover .tick-label,.occ-tick:hover .tick-time{color:var(--vermillion)}
.occ-tick.active .tick-dot{background:var(--vermillion);border-color:var(--vermillion);width:16px;height:16px;box-shadow:0 0 0 5px rgba(192,57,43,.14)}
.occ-tick.active .tick-label{color:var(--vermillion);font-size:1.25rem}
.occ-tick.active .tick-time{color:var(--vermillion)}
.occ-tick.active::after{content:"";position:absolute;left:2rem;right:-6%;top:50%;height:1px;background:linear-gradient(90deg,var(--vermillion) 0%,transparent 100%);transform:translateY(-50%);z-index:0;pointer-events:none}
.occ-tick:focus-visible{outline:2px dashed var(--vermillion);outline-offset:3px;border-radius:4px}

/* 舞台外框 — 分兩欄：左為書籤卡片，右為懸浮照片 */
.occ-stage-wrap{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
/* 懸浮照片（靠右欄 polaroid） */
.occ-float{align-self:center;justify-self:stretch;height:300px;background-size:cover;background-position:center;background-repeat:no-repeat;border:8px solid #fff;box-shadow:0 20px 44px -20px rgba(28,51,42,.42),0 4px 10px -4px rgba(28,51,42,.2);transform:rotate(-1.5deg);transition:transform .7s cubic-bezier(.22,.8,.25,1),background-image .4s ease;background-image:url(../images/tfa/intro-01.jpg)}
.occasion-picker:not([data-active="intro"]) .occ-float{transform:rotate(-1deg)}
.occasion-picker[data-active="breakfast"] .occ-float{background-image:url(../images/tfa/breakfast-01.jpg)}
.occasion-picker[data-active="picnic"] .occ-float{background-image:url(../images/tfa/picnic-01.jpg)}
.occasion-picker[data-active="nourish"] .occ-float{background-image:url(../images/tfa/goat-01.jpg)}
.occasion-picker[data-active="gift"] .occ-float{background-image:url(../images/tfa/posesha-02.jpg)}
.occasion-picker[data-active="festive"] .occ-float{background-image:url(../images/tfa/calendar-01.jpg)}
/* 舞台卡片 — 沿用 promo-tile 配色，底部切平 */
.occ-stage{position:relative;background:linear-gradient(180deg,#fff9ef 0%,#fff4e6 100%);border:1px solid rgba(192,57,43,.18);box-shadow:0 8px 14px -6px rgba(192,57,43,.1);padding:2.6rem 2.2rem;display:flex;flex-direction:column;justify-content:center;min-height:420px;z-index:1}
.occ-panel{display:none;flex-direction:column;gap:.5rem;animation:occFadeIn .5s ease both}
.occ-panel.is-active{display:flex}
.occ-panel[hidden]{display:none}
@keyframes occFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.occ-panel .occ-num{align-self:flex-start;font-family:var(--font-latin);font-size:.7rem;letter-spacing:.22em;color:var(--vermillion);background:rgba(255,255,255,.85);border:1px solid rgba(192,57,43,.4);border-radius:999px;padding:.2rem .7rem;margin-bottom:.35rem}
.occ-panel .occ-clock{font-family:var(--font-serif);font-size:.85rem;letter-spacing:.16em;color:var(--ink-light);margin-bottom:.4rem}
.occ-panel .occ-icn{color:var(--pine);margin-bottom:.4rem;width:48px;height:48px}
.occ-panel .occ-zh{font-family:var(--font-serif);font-size:2rem;color:var(--ink);letter-spacing:.08em;font-weight:400;margin:0}
.occ-panel .occ-en{font-family:var(--font-latin);font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;color:var(--pine);margin-bottom:.9rem}
.occ-panel .occ-story{font-family:var(--font-serif);font-style:italic;font-size:1.05rem;line-height:1.85;color:var(--ink);padding:.85rem 0;margin:0 0 .5rem;border-top:1px dashed rgba(28,51,42,.22);border-bottom:1px dashed rgba(28,51,42,.22);letter-spacing:.05em;max-width:28em}
.occ-panel .occ-sub{font-family:var(--font-sans);font-size:.82rem;color:var(--ink-light);letter-spacing:.1em;margin-bottom:1.4rem}
.occ-panel .occ-cta{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-serif);font-size:.95rem;color:var(--pine);text-decoration:none;padding:.65rem 1.2rem;border:1px solid var(--pine);border-radius:2px;background:rgba(255,255,255,.55);transition:all .3s ease}
.occ-panel .occ-cta:hover{background:var(--vermillion);border-color:var(--vermillion);color:#fff;transform:translateX(3px)}

/* ── Trust strip ── */
.trust-strip{padding:2.4rem 0 3.4rem;background:#faf7f0;border-top:1px solid rgba(28,51,42,.06)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.trust-item{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1rem;background:#fff;border-radius:12px;border:1px solid rgba(28,51,42,.06)}
.trust-item .ico{font-size:1.7rem;flex-shrink:0;line-height:1}
.trust-item h4{font-family:'Noto Serif TC',serif;font-size:.98rem;color:var(--ink);margin-bottom:.3rem;font-weight:500}
.trust-item p{font-family:'Noto Sans TC',sans-serif;font-size:.78rem;color:#666;line-height:1.6}

/* ── Category lead paragraph ── */
.category-head .category-lead{max-width:620px;margin:.8rem auto 0;font-family:'Noto Sans TC',sans-serif;font-size:.92rem;line-height:1.75;color:#555;text-align:center}

/* ── Responsive ── */
@media (max-width:960px){
  .brand-grid{grid-template-columns:repeat(3,1fr)}
  .brand-grid > :nth-child(4){grid-column:1/2}
  .brand-grid > :nth-child(5){grid-column:2/4}
  .product-grid.prod-4{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  /* 情境選物 — 刻度改為頂部橫向 */
  .occasion-picker{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:1.6rem;min-height:0}
  .occ-scale{flex-direction:row;justify-content:space-between;align-items:flex-start;padding:2rem .6rem .6rem;gap:.5rem;min-height:0}
  .occ-rail{left:1.2rem;right:1.2rem;top:1.4rem;bottom:auto;margin:0;width:auto;height:2px;background:linear-gradient(90deg,rgba(192,57,43,.5) 0%,rgba(192,57,43,.2) 100%)}
  .occ-tick{flex:1;flex-direction:column;align-items:center;padding:1.2rem .2rem .3rem;gap:.25rem;text-align:center;min-height:0}
  .occ-tick .tick-dot{left:50%;top:-.4rem;transform:translate(-50%,-50%)}
  .occ-tick:hover .tick-dot{width:12px;height:12px}
  .occ-tick.active .tick-dot{width:16px;height:16px}
  .occ-tick.active::after{display:none}
  .occ-stage{min-height:0;padding:1.8rem 1.4rem 2.2rem}
  .occ-stage-wrap{grid-template-columns:1fr;gap:1.4rem}
  .occ-float{height:200px;width:90%;justify-self:center}
}
@media (max-width:560px){
  .brand-grid{grid-template-columns:repeat(2,1fr)}
  .brand-grid > :nth-child(4),.brand-grid > :nth-child(5){grid-column:auto}
  .brand-grid > :nth-child(5){grid-column:1/3}
  .product-grid.prod-4{grid-template-columns:1fr}
  .occasion-h2{font-size:1.55rem}
  .occ-scale{overflow-x:auto;justify-content:flex-start;gap:2rem;padding:1.4rem .4rem 0}
  .occ-tick{flex-shrink:0;min-width:52px}
  .occ-tick .tick-time{font-size:.65rem;letter-spacing:.08em}
  .occ-panel .occ-zh{font-size:1.55rem}
  .occ-panel .occ-story{font-size:.92rem}
  .trust-grid{grid-template-columns:1fr}
}

/* ═══ PRODUCT DETAIL PAGE ═══ */
.pd-hero{padding:2.6rem 0 3rem;background:#fff}
.pd-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:flex-start}
.pd-gallery{display:flex;flex-direction:column;gap:.9rem;position:sticky;top:1.5rem}
.pd-main{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#f5f1e8}
.pd-main img{width:100%;height:100%;object-fit:cover;display:block}
.pd-badge{position:absolute;top:1rem;left:1rem;padding:.4rem .85rem;background:rgba(28,51,42,.92);color:#fff;border-radius:999px;font-family:'DM Sans',sans-serif;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.pd-thumb{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:none;cursor:pointer;transition:border-color .2s ease;aspect-ratio:1/1}
.pd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pd-thumb.active{border-color:var(--pine)}
.pd-thumb:hover{border-color:rgba(58,90,76,.5)}
.pd-panel{padding-top:.3rem}
.pd-brand-link{display:inline-block;font-family:'DM Sans',sans-serif;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pine);border-bottom:1px solid rgba(58,90,76,.3);padding-bottom:2px;margin-bottom:1rem}
.pd-title{font-family:'Noto Serif TC',serif;font-size:2.2rem;color:var(--ink);font-weight:400;line-height:1.25;margin-bottom:.4rem}
.pd-subtitle{font-family:'Noto Sans TC',sans-serif;font-size:.98rem;color:#8a8778;margin-bottom:1.1rem;line-height:1.6}
.pd-rating{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem;font-family:'Noto Sans TC',sans-serif;font-size:.85rem;color:#666}
.pd-rating .stars{color:#d4a53a;letter-spacing:.1em}
.pd-rating .rate-num{font-weight:500;color:var(--ink)}

/* 已購買數（取代評星）*/
.pd-buyers{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.5rem .95rem;
  background:rgba(58,90,76,.06);
  border:1px solid rgba(58,90,76,.18);
  border-radius:999px;
  margin-bottom:1.4rem;
  font-family:'Noto Sans TC',sans-serif;font-size:.9rem;
  line-height:1;                 /* 鎖定 line-height，避免子元素被字型 metric 撐高 */
  color:var(--ink-mid);
  width:fit-content;
}
.pd-buyers-icn{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:var(--pine);flex-shrink:0;
}
.pd-buyers-icn svg{width:20px;height:20px;display:block}
.pd-buyers-num{
  font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:600;
  color:var(--pine);letter-spacing:.02em;line-height:1;
}
.pd-buyers-lbl{color:var(--ink-mid);letter-spacing:.04em;line-height:1}
.pd-price-row{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;padding:1.2rem 0;border-top:1px solid rgba(28,51,42,.08);border-bottom:1px solid rgba(28,51,42,.08);margin-bottom:1.4rem}
.pd-price{font-family:'DM Sans',sans-serif;font-size:2.4rem;font-weight:500;color:var(--ink)}
.pd-strike{font-family:'DM Sans',sans-serif;font-size:1.05rem;color:#b8b5a8;text-decoration:line-through}
.pd-save{padding:.25rem .6rem;background:#e9f0e6;color:var(--pine);border-radius:4px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500}
.pd-tag-row{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.6rem}
.pd-tag{padding:.32rem .7rem;border:1px solid rgba(28,51,42,.14);border-radius:4px;font-family:'Noto Sans TC',sans-serif;font-size:.78rem;color:#666}
.pd-tag-hot{background:#fdecec;border-color:#f5c8c8;color:#c0392b}
.pd-tag-season{background:#fff4d8;border-color:#e8c97a;color:#8a6a1a}
.pd-form-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem;flex-wrap:wrap}
.pd-form-row label{font-family:'Noto Sans TC',sans-serif;font-size:.88rem;color:#555;min-width:52px}
.pd-opts{display:flex;gap:.5rem;flex-wrap:wrap}
.pd-opt{padding:.55rem 1rem;border:1px solid rgba(28,51,42,.18);border-radius:6px;background:#fff;font-family:'Noto Sans TC',sans-serif;font-size:.88rem;color:#333;cursor:pointer;transition:all .2s ease}
.pd-opt:hover{border-color:var(--pine)}
.pd-opt.active{background:var(--pine);color:#fff;border-color:var(--pine)}
.pd-qty{display:flex;align-items:center;gap:.5rem}
.pd-qty button{width:36px;height:36px;border:1px solid rgba(28,51,42,.18);background:#fff;border-radius:6px;font-size:1rem;cursor:pointer;color:var(--ink)}
.pd-qty button:hover{border-color:var(--pine);color:var(--pine)}
.pd-qty input{width:56px;height:36px;text-align:center;border:1px solid rgba(28,51,42,.18);border-radius:6px;font-family:'DM Sans',sans-serif;font-size:.95rem}
.pd-stock{font-family:'Noto Sans TC',sans-serif;font-size:.78rem;color:#8a8778;margin-left:.4rem}
.pd-cta{display:flex;gap:.6rem;margin:1.5rem 0 1.6rem;align-items:stretch}
.pd-add{flex:1;padding:1rem 1.5rem;background:#fff;border:1.5px solid var(--pine);color:var(--pine);border-radius:8px;font-family:'Noto Sans TC',sans-serif;font-size:.98rem;font-weight:500;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.pd-add:hover{background:var(--pine);color:#fff}
.pd-add.is-added{background:var(--pine);color:#fff;border-color:var(--pine)}
.pd-buy{flex:1.2;display:flex;align-items:center;justify-content:center;padding:1rem 1.5rem;background:var(--ink);color:#fff;border-radius:8px;font-family:'Noto Sans TC',sans-serif;font-size:.98rem;font-weight:500;transition:background .2s ease}
.pd-buy:hover{background:var(--pine)}
/* 愛心 icon：固定寬度 4.2rem (67px)，高度由 align-self:stretch 撐到兄弟同高 → 接近正方形 */
.pd-fav{flex:0 0 4.2rem;align-self:stretch;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid rgba(28,51,42,.18);background:#fff;border-radius:8px;color:var(--ink);cursor:pointer;transition:all .25s ease}
.pd-fav svg{width:24px;height:24px;transition:transform .25s ease}
.pd-fav:hover{color:#c0392b;border-color:#c0392b}
.pd-fav:hover svg{transform:scale(1.1)}
.pd-fav.is-faved{color:#c0392b;border-color:#c0392b;background:rgba(192,57,43,.06)}
.pd-fav.is-faved svg{fill:currentColor}
.pd-promises{list-style:none;padding:1.2rem 1.4rem;background:#faf7f0;border-radius:10px}
.pd-promises li{font-family:'Noto Sans TC',sans-serif;font-size:.86rem;color:#444;padding:.35rem 0;display:flex;align-items:center;gap:.55rem}
.pd-promises .ico{font-size:1.05rem}
.pd-promises .g-icn{color:var(--pine);flex-shrink:0}
.co-ship-head .g-icn{color:var(--pine)}
.co-pay .g-icn,.co-inv .g-icn{color:var(--pine);flex-shrink:0}
.co-reward .g-icn{color:#8a6a1a;flex-shrink:0}
.co-trust .g-icn{color:var(--pine);margin-right:.35rem;vertical-align:-3px}

.pd-story{padding:4rem 0;background:#faf7f0}
.pd-story-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.pd-story-img{aspect-ratio:4/5;border-radius:14px;overflow:hidden}
.pd-story-img img{width:100%;height:100%;object-fit:cover;display:block}
.pd-story-h2{font-family:'Noto Serif TC',serif;font-size:1.85rem;color:var(--ink);font-weight:400;line-height:1.45;margin:1rem 0 1.4rem}
.pd-story-body p{font-family:'Noto Sans TC',sans-serif;font-size:.98rem;line-height:1.85;color:#444;margin-bottom:1.1rem}
.pd-story-body strong{color:var(--ink);font-weight:500;background:linear-gradient(to top,#fff4d8 50%,transparent 50%);padding:0 3px}
.pd-story-link{display:inline-block;margin-top:.8rem;color:var(--pine);font-family:'DM Sans',sans-serif;font-size:.92rem;border-bottom:1px solid var(--pine);padding-bottom:2px}

.pd-spec{padding:4rem 0;background:#fff}
.pd-spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem}
.pd-spec-col h3{font-family:'Noto Serif TC',serif;font-size:1.15rem;color:var(--ink);margin-bottom:1rem;padding-bottom:.7rem;border-bottom:1px solid rgba(28,51,42,.1)}
.pd-spec-col dl{font-family:'Noto Sans TC',sans-serif}
.pd-spec-col dt{font-size:.82rem;color:#8a8778;margin-top:.8rem}
.pd-spec-col dd{font-size:.92rem;color:#333;line-height:1.6;margin-top:.2rem}
.pd-certs{list-style:none;padding:0}
.pd-certs li{display:flex;gap:.9rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px dashed rgba(28,51,42,.08)}
.pd-certs .cert{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--pine);color:#fff;border-radius:6px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:500;letter-spacing:.05em}
.pd-certs p{font-family:'Noto Sans TC',sans-serif;font-size:.88rem;color:#444;line-height:1.55;padding-top:.3rem}

.pd-trace{padding:4rem 0;background:#faf7f0}
.pd-timeline{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:2rem;padding:0;position:relative}
.pd-timeline::before{content:'';position:absolute;top:28px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--pine),rgba(58,90,76,.3));z-index:0}
.pd-timeline li{position:relative;padding:0 1rem;text-align:center;z-index:1}
.pd-timeline .dot{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:#fff;border:2px solid var(--pine);color:var(--pine);border-radius:50%;font-family:'DM Sans',sans-serif;font-size:1.2rem;font-weight:500;margin-bottom:.9rem}
.pd-timeline time{display:block;font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--pine);letter-spacing:.06em;margin-bottom:.3rem}
.pd-timeline h4{font-family:'Noto Serif TC',serif;font-size:.98rem;color:var(--ink);margin-bottom:.4rem;font-weight:500}
.pd-timeline p{font-family:'Noto Sans TC',sans-serif;font-size:.78rem;color:#666;line-height:1.6}

.pd-reviews{padding:4rem 0;background:#fff}
.pd-reviews-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-bottom:2.4rem;padding-bottom:1.8rem;border-bottom:1px solid rgba(28,51,42,.1)}
.pd-reviews-summary .row{display:flex;align-items:center;gap:.8rem;margin-bottom:.6rem;font-family:'Noto Sans TC',sans-serif;font-size:.88rem}
.pd-reviews-summary .lbl{width:50px;color:#666}
.pd-reviews-summary .bar{flex:1;height:6px;background:#ede9db;border-radius:3px;overflow:hidden}
.pd-reviews-summary .bar span{display:block;height:100%;background:var(--pine)}
.pd-reviews-summary .num{width:30px;text-align:right;font-family:'DM Sans',sans-serif;color:var(--ink)}
.pd-reviews-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.pd-review{padding:1.4rem;background:#faf7f0;border-radius:10px;border:1px solid rgba(28,51,42,.06)}
.pd-review-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.pd-review-head .avatar{width:38px;height:38px;border-radius:50%;background:var(--pine);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif TC',serif;font-size:.98rem;flex-shrink:0}
.pd-review-head h4{font-family:'Noto Sans TC',sans-serif;font-size:.9rem;color:var(--ink);font-weight:500;margin-bottom:.1rem}
.pd-review-head time{font-family:'DM Sans',sans-serif;font-size:.72rem;color:#999}
.pd-review-head .stars{margin-left:auto;color:#d4a53a;font-size:.82rem;letter-spacing:.05em}
.pd-review p{font-family:'Noto Sans TC',sans-serif;font-size:.88rem;line-height:1.75;color:#444;margin-bottom:.8rem}
.pd-review .verified{font-family:'Noto Sans TC',sans-serif;font-size:.75rem;color:var(--pine)}

/* ═══ CHECKOUT PAGE ═══ */
.co-body{background:#faf7f0;min-height:100vh;display:flex;flex-direction:column}
.co-header{background:#fff;border-bottom:1px solid rgba(28,51,42,.08);padding:1rem 0}
.co-header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.co-header .brand-logo{height:36px}
.co-steps{display:flex;gap:2.2rem;list-style:none;padding:0;flex:1;justify-content:center}
.co-steps li{display:flex;align-items:center;gap:.55rem;font-family:'Noto Sans TC',sans-serif;font-size:.88rem;color:#8a8778;position:relative}
.co-steps li:not(:last-child)::after{content:'';position:absolute;right:-1.4rem;top:50%;width:.9rem;height:1px;background:rgba(28,51,42,.15)}
.co-steps .n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#ede9db;color:#8a8778;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500}
.co-steps .done .n{background:var(--pine);color:#fff;font-size:0}
.co-steps .done .n::before{content:'\2713';font-size:.85rem}
.co-steps .done{color:var(--ink)}
.co-steps .active .n{background:var(--ink);color:#fff}
.co-steps .active{color:var(--ink);font-weight:500}
.co-back{font-family:'Noto Sans TC',sans-serif;font-size:.86rem;color:var(--pine);white-space:nowrap}
.co-back:hover{color:var(--ink)}

.co-main{flex:1;padding:2.4rem 0 4rem}
.co-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:2rem;align-items:flex-start}
.co-block{background:#fff;border-radius:14px;padding:1.8rem 2rem;margin-bottom:1.2rem;border:1px solid rgba(28,51,42,.06)}
.co-block-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.4rem;padding-bottom:1rem;border-bottom:1px solid rgba(28,51,42,.08)}
.co-num{flex-shrink:0;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;background:var(--pine);color:#fff;border-radius:50%;font-family:'DM Sans',sans-serif;font-weight:500;font-size:.92rem}
.co-block-head h2{font-family:'Noto Serif TC',serif;font-size:1.2rem;color:var(--ink);font-weight:500;margin-bottom:.2rem}
.co-block-head p{font-family:'Noto Sans TC',sans-serif;font-size:.82rem;color:#8a8778}

.co-row{display:grid;gap:1rem;margin-bottom:1rem}
.co-row-2{grid-template-columns:1fr 1fr}
.co-row-3{grid-template-columns:1fr 1.2fr 1.2fr}
.co-field{display:flex;flex-direction:column;gap:.35rem}
.co-field > span{font-family:'Noto Sans TC',sans-serif;font-size:.82rem;color:#555}
.co-field input,.co-field select{padding:.72rem .9rem;border:1px solid rgba(28,51,42,.15);border-radius:7px;background:#fff;font-family:'Noto Sans TC',sans-serif;font-size:.92rem;color:var(--ink);transition:border-color .2s ease}
.co-field input:focus,.co-field select:focus{outline:none;border-color:var(--pine)}
.co-check{display:flex;align-items:center;gap:.55rem;font-family:'Noto Sans TC',sans-serif;font-size:.86rem;color:#555;padding:.4rem 0;cursor:pointer}

.co-ship-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.4rem}
.co-ship{display:block;padding:1rem 1.2rem;border:1.5px solid rgba(28,51,42,.12);border-radius:10px;cursor:pointer;transition:all .2s ease;background:#fff}
.co-ship:hover{border-color:rgba(58,90,76,.5)}
.co-ship.active{border-color:var(--pine);background:#f4f8f2}
.co-ship input{display:none}
.co-ship-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.co-ship-head .icn{font-size:1.15rem}
.co-ship-head h3{flex:1;font-family:'Noto Sans TC',sans-serif;font-size:.95rem;color:var(--ink);font-weight:500}
.co-ship-head .price{font-family:'DM Sans',sans-serif;font-size:.92rem;color:var(--ink);font-weight:500}
.co-ship-head .price.free{color:var(--pine);font-size:.8rem;letter-spacing:.08em}
.co-ship p{font-family:'Noto Sans TC',sans-serif;font-size:.78rem;color:#666;line-height:1.55}

.co-pay-grid,.co-inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-bottom:1.4rem}
.co-pay,.co-inv{display:flex;gap:.8rem;align-items:center;padding:.9rem 1rem;border:1.5px solid rgba(28,51,42,.12);border-radius:9px;cursor:pointer;transition:all .2s ease;background:#fff}
.co-pay:hover,.co-inv:hover{border-color:rgba(58,90,76,.5)}
.co-pay.active,.co-inv.active{border-color:var(--pine);background:#f4f8f2}
.co-pay input,.co-inv input{display:none}
.co-pay .icn,.co-inv .icn{font-size:1.4rem;flex-shrink:0}
.co-pay h3,.co-inv h3{font-family:'Noto Sans TC',sans-serif;font-size:.9rem;color:var(--ink);font-weight:500;margin-bottom:.2rem}
.co-pay p,.co-inv p{font-family:'Noto Sans TC',sans-serif;font-size:.76rem;color:#8a8778;line-height:1.5}
.co-card-form{padding:1.2rem 1.4rem;background:#faf7f0;border-radius:10px}

.co-submit-row{padding:1.4rem 0 0;text-align:center}
.co-submit{width:100%;padding:1.15rem 2rem;background:var(--ink);color:#fff;border:none;border-radius:10px;font-family:'Noto Sans TC',sans-serif;font-size:1.02rem;font-weight:500;letter-spacing:.05em;cursor:pointer;transition:background .2s ease}
.co-submit:hover{background:var(--pine)}
.co-terms{margin-top:.9rem;font-family:'Noto Sans TC',sans-serif;font-size:.78rem;color:#8a8778}
.co-terms a{color:var(--pine);border-bottom:1px dashed var(--pine)}

.co-summary{position:sticky;top:1.5rem}
.co-summary-inner{background:#fff;border-radius:14px;padding:1.6rem 1.6rem 1.4rem;border:1px solid rgba(28,51,42,.06)}
.co-summary-h2{display:flex;align-items:baseline;justify-content:space-between;font-family:'Noto Serif TC',serif;font-size:1.15rem;color:var(--ink);font-weight:500;margin-bottom:1.2rem;padding-bottom:1rem;border-bottom:1px solid rgba(28,51,42,.08)}
.co-summary-h2 .count{font-family:'Noto Sans TC',sans-serif;font-size:.82rem;color:#8a8778;font-weight:400}

.co-items{list-style:none;padding:0;margin-bottom:1rem}
.co-item{display:grid;grid-template-columns:62px 1fr auto;gap:.85rem;padding:.9rem 0;border-bottom:1px dashed rgba(28,51,42,.1)}
.co-item:last-child{border-bottom:0}
.co-item-img{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:#f5f1e8}
.co-item-img img{width:100%;height:100%;object-fit:cover;display:block}
.co-item-img .qty{position:absolute;top:-6px;right:-6px;min-width:22px;height:22px;padding:0 6px;background:var(--ink);color:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-size:.72rem;font-weight:500}
.co-item-body .brand{display:block;font-family:'DM Sans',sans-serif;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pine);margin-bottom:.15rem}
.co-item-body h4{font-family:'Noto Serif TC',serif;font-size:.92rem;color:var(--ink);font-weight:500;margin-bottom:.2rem;line-height:1.4}
.co-item-body .spec{font-family:'Noto Sans TC',sans-serif;font-size:.76rem;color:#8a8778}
.co-item-price{text-align:right;display:flex;flex-direction:column;gap:.1rem}
.co-item-price span{font-family:'DM Sans',sans-serif;font-size:.92rem;color:var(--ink);font-weight:500}
.co-item-price .strike{font-size:.75rem;color:#b8b5a8;text-decoration:line-through;font-weight:400}

.co-coupon{display:flex;gap:.5rem;margin:1rem 0 .4rem}
.co-coupon input{flex:1;padding:.6rem .8rem;border:1px solid rgba(28,51,42,.15);border-radius:7px;font-family:'Noto Sans TC',sans-serif;font-size:.86rem}
.co-coupon button{padding:.6rem 1rem;background:var(--pine);color:#fff;border:none;border-radius:7px;font-family:'Noto Sans TC',sans-serif;font-size:.86rem;cursor:pointer}
.co-coupon-applied{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;background:#e9f0e6;border-radius:7px;font-family:'Noto Sans TC',sans-serif;font-size:.8rem;color:var(--pine);margin-bottom:1rem}
.co-coupon-applied strong{font-weight:500;color:var(--ink)}
.co-coupon-applied button{margin-left:auto;background:none;border:none;color:var(--pine);font-size:1.1rem;cursor:pointer;line-height:1}

.co-totals{margin:1rem 0;padding:1rem 0;border-top:1px solid rgba(28,51,42,.08);border-bottom:1px solid rgba(28,51,42,.08)}
.co-totals > div{display:flex;justify-content:space-between;padding:.35rem 0;font-family:'Noto Sans TC',sans-serif;font-size:.9rem;color:#444}
.co-totals dd{font-family:'DM Sans',sans-serif;color:var(--ink)}
.co-totals .discount dd{color:#c0392b}
.co-totals .free-hint{font-size:.76rem;color:#8a8778;font-style:italic}
.co-totals .grand{padding-top:.8rem;margin-top:.4rem;border-top:1px dashed rgba(28,51,42,.1);font-size:1rem;color:var(--ink);font-weight:500}
.co-totals .grand .big{font-family:'DM Sans',sans-serif;font-size:1.45rem;margin-left:.2rem;color:var(--pine)}

.co-reward{display:flex;gap:.7rem;align-items:center;padding:.8rem 1rem;background:#fff4d8;border-radius:8px;margin-bottom:1rem}
.co-reward .icn{font-size:1.2rem;flex-shrink:0}
.co-reward p{font-family:'Noto Sans TC',sans-serif;font-size:.82rem;color:#6a5a2a;line-height:1.55}
.co-reward strong{color:#8a6a1a;font-weight:500}

.co-trust{list-style:none;padding:.6rem 0 0;display:flex;flex-direction:column;gap:.4rem}
.co-trust li{font-family:'Noto Sans TC',sans-serif;font-size:.78rem;color:#666}

.co-footer{padding:1.5rem 0;background:#fff;border-top:1px solid rgba(28,51,42,.06)}
.co-footer p{font-family:'Noto Sans TC',sans-serif;font-size:.8rem;color:#8a8778;text-align:center}
.co-footer a{color:#666}
.co-footer a:hover{color:var(--pine)}

@media (max-width:960px){
  .pd-grid{grid-template-columns:1fr;gap:2rem}
  .pd-gallery{position:static}
  .pd-story-grid{grid-template-columns:1fr;gap:2rem}
  .pd-spec-grid{grid-template-columns:1fr;gap:2rem}
  .pd-timeline{grid-template-columns:repeat(3,1fr);gap:1.5rem 0}
  .pd-timeline::before{display:none}
  .pd-reviews-head{grid-template-columns:1fr;gap:1.4rem}
  .pd-reviews-list{grid-template-columns:1fr}
  .co-grid{grid-template-columns:1fr}
  .co-summary{position:static}
  .co-steps{gap:1.2rem}
  .co-steps .lbl{display:none}
  .co-steps li:not(:last-child)::after{right:-.8rem;width:.6rem}
  .co-ship-grid,.co-pay-grid,.co-inv-grid{grid-template-columns:1fr}
  .co-row-2,.co-row-3{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pd-title{font-size:1.75rem}
  .pd-price{font-size:1.9rem}
  /* 手機：pd-add + pd-fav 同列、pd-buy 第二列 */
  .pd-cta{flex-wrap:wrap;gap:.55rem}
  .pd-add{flex:1 1 auto;order:1}
  .pd-fav{flex:0 0 52px;order:2;aspect-ratio:1}
  .pd-buy{flex:1 1 100%;order:3}
  .pd-timeline{grid-template-columns:repeat(2,1fr)}
  .co-header-inner{flex-wrap:wrap;gap:1rem}
  .co-back{display:none}
  .co-block{padding:1.3rem 1.2rem}
}

/* ═══════════════════════════════════════════
   PRODUCTS PAGE · momo/蝦皮式 閱讀流 redesign
   ═══════════════════════════════════════════ */

/* Slim hero */
.page-hero-slim{padding:2.2rem 0 1.8rem;background:linear-gradient(180deg,var(--paper-warm) 0%,#fff 100%)}
.page-hero-slim-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.page-hero-slim-l{flex:1;min-width:320px}
.page-hero-slim .page-hero-h1{font-size:2rem;line-height:1.25;margin:.6rem 0 .5rem}
.page-hero-slim .page-hero-lead{font-size:.92rem;color:#666;margin-bottom:1.1rem}
.hero-cta-row{display:flex;flex-wrap:wrap;gap:.55rem}
.hero-cta-chip{padding:.5rem 1rem;border:1.5px solid var(--rule);border-radius:999px;background:#fff;color:var(--ink);font-family:'Noto Sans TC',sans-serif;font-size:.88rem;font-weight:500;transition:all .2s ease;display:inline-flex;align-items:center;gap:.45rem}
.hero-cta-chip:hover{border-color:var(--pine);color:var(--pine);background:#f4f8f2;transform:translateY(-1px)}
.hero-cta-chip.hot{background:#c0392b;border-color:#c0392b;color:#fff}
.hero-cta-chip.hot:hover{background:#a6321f;border-color:#a6321f;color:#fff}
.hero-cta-chip .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:flashDot 1.2s infinite}
@keyframes flashDot{0%,100%{opacity:1}50%{opacity:.35}}
.page-hero-stats.compact{display:flex;gap:1.6rem}
.page-hero-stats.compact .page-hero-stat{text-align:center}
.page-hero-stats.compact .num{font-size:1.55rem}

/* FLASH SALE */
.flash-strip{padding:3rem 0 2.4rem;background:linear-gradient(135deg,#fff4e6 0%,#ffe0cc 100%);position:relative;overflow:hidden}
.flash-strip::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(192,57,43,.08) 0%,transparent 50%)}
.flash-strip > .container{position:relative;z-index:1}
.flash-head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-bottom:1.4rem;flex-wrap:wrap}
.flash-head-l{display:flex;align-items:center;gap:1rem}
.flash-head-l .g-icn{color:#c0392b;padding:.55rem;background:rgba(192,57,43,.12);border-radius:12px;box-sizing:content-box}
.flash-h2{font-family:'Noto Serif TC',serif;font-size:1.55rem;color:var(--ink);font-weight:500;margin-bottom:.15rem}
.flash-sub{font-family:'Noto Sans TC',sans-serif;font-size:.82rem;color:#8a5a3a}
.flash-timer{display:flex;align-items:center;gap:.45rem;font-family:'DM Sans',sans-serif;color:#c0392b;font-size:1.1rem;font-weight:500}
.flash-timer .tlbl{font-family:'Noto Sans TC',sans-serif;font-size:.82rem;color:#8a5a3a;margin-right:.3rem;font-weight:400}
.flash-timer .tbox{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;padding:.35rem .5rem;background:var(--ink);color:#fff;border-radius:6px;font-weight:500}
.flash-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:1rem;overflow-x:auto;padding-bottom:.6rem;scrollbar-width:thin}
.flash-rail::-webkit-scrollbar{height:6px}
.flash-rail::-webkit-scrollbar-thumb{background:rgba(192,57,43,.3);border-radius:3px}
.flash-card{background:#fff;border-radius:12px;overflow:hidden;border:1px solid rgba(28,51,42,.06);transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column}
.flash-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(0,0,0,.2)}
.flash-img{aspect-ratio:4/3;position:relative;overflow:hidden;background:#f5f1e8}
.flash-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.flash-card:hover .flash-img img{transform:scale(1.08)}
.flash-discount{position:absolute;top:.6rem;left:.6rem;padding:.25rem .55rem;background:#c0392b;color:#fff;border-radius:4px;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:500;letter-spacing:.02em}
.flash-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.5rem}
.flash-body h4{font-family:'Noto Sans TC',sans-serif;font-size:.92rem;color:var(--ink);font-weight:500;line-height:1.4}
.flash-price{display:flex;align-items:baseline;gap:.5rem}
.flash-price .now{font-family:'DM Sans',sans-serif;font-size:1.25rem;color:#c0392b;font-weight:500}
.flash-price .was{font-family:'DM Sans',sans-serif;font-size:.82rem;color:#b8b5a8;text-decoration:line-through}
.flash-stock{display:flex;align-items:center;gap:.55rem}
.flash-stock .bar{flex:1;height:5px;background:#ffe0cc;border-radius:3px;overflow:hidden}
.flash-stock .bar span{display:block;height:100%;background:linear-gradient(90deg,#e67e22,#c0392b);border-radius:3px}
.flash-stock .txt{font-family:'Noto Sans TC',sans-serif;font-size:.74rem;color:#c0392b;font-weight:500;white-space:nowrap}

/* TOP 10 RANKING */
.top10-strip{padding:3rem 0;background:#faf7f0}
.top10-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;flex-wrap:wrap;padding-bottom:1rem;border-bottom:1px solid var(--rule)}
.top10-head .l{display:flex;align-items:center;gap:1rem}
.top10-head .g-icn{color:#d4a53a;padding:.45rem;background:rgba(212,165,58,.12);border-radius:10px;box-sizing:content-box;width:28px;height:28px}
.top10-head .l-text{display:flex;flex-direction:column;gap:.25rem}
.top10-head .en{font-family:'DM Sans',sans-serif;font-size:.75rem;letter-spacing:.18em;color:var(--pine);text-transform:uppercase}
.top10-head .zh{font-family:'Noto Serif TC',serif;font-size:1.15rem;color:var(--ink);font-weight:500}
.top10-all{font-family:'Noto Sans TC',sans-serif;font-size:.88rem;color:var(--pine);border-bottom:1px solid var(--pine);padding-bottom:2px}
.top10-all:hover{color:var(--vermillion);border-color:var(--vermillion)}
.top10-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);gap:1rem;overflow-x:auto;padding-bottom:.8rem}
.top10-rail::-webkit-scrollbar{height:6px}
.top10-rail::-webkit-scrollbar-thumb{background:rgba(58,90,76,.3);border-radius:3px}
.top10-card{position:relative;background:#fff;border-radius:10px;overflow:hidden;border:1px solid rgba(28,51,42,.06);transition:transform .25s ease,box-shadow .25s ease;display:flex;flex-direction:column}
.top10-card:hover{transform:translateY(-4px);box-shadow:0 14px 28px -16px rgba(0,0,0,.18)}
.top10-card .rank{position:absolute;top:0;left:0;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--ink);color:#fff;font-family:'DM Sans',sans-serif;font-size:1.25rem;font-weight:500;clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%)}
.top10-card.rank-1 .rank{background:linear-gradient(135deg,#d4a53a,#b8852a)}
.top10-card.rank-2 .rank{background:linear-gradient(135deg,#b0b0b0,#888)}
.top10-card.rank-3 .rank{background:linear-gradient(135deg,#c47d4a,#8b5530)}
.top10-img{aspect-ratio:1/1;overflow:hidden;background:#f5f1e8}
.top10-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.top10-card:hover .top10-img img{transform:scale(1.08)}
.top10-body{padding:.85rem 1rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.top10-body .brand{font-family:'DM Sans',sans-serif;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pine)}
.top10-body h4{font-family:'Noto Sans TC',sans-serif;font-size:.92rem;color:var(--ink);font-weight:500;line-height:1.4}
.top10-body .meta{display:flex;gap:.7rem;font-family:'Noto Sans TC',sans-serif;font-size:.72rem;color:#8a8778}
.top10-body .meta .rate{color:#d4a53a;font-weight:500}
.top10-body .price{font-family:'DM Sans',sans-serif;font-size:1.1rem;color:#c0392b;font-weight:500;margin-top:.1rem}

/* COUPON CLAIM */
.coupon-strip{padding:3rem 0;background:linear-gradient(135deg,#f4f8f2 0%,#e9f0e6 100%)}
.coupon-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.coupon-head .l{display:flex;align-items:center;gap:1rem}
.coupon-head .g-icn{color:var(--pine);padding:.45rem;background:rgba(58,90,76,.1);border-radius:10px;box-sizing:content-box;width:28px;height:28px}
.coupon-head .l-text{display:flex;flex-direction:column;gap:.25rem}
.coupon-head .en{font-family:'DM Sans',sans-serif;font-size:.75rem;letter-spacing:.18em;color:var(--pine);text-transform:uppercase}
.coupon-head .zh{font-family:'Noto Serif TC',serif;font-size:1.15rem;color:var(--ink);font-weight:500}
.coupon-cd{font-family:'Noto Sans TC',sans-serif;font-size:.88rem;color:#8a5a3a}
.coupon-cd strong{color:#c0392b;font-weight:500}
.coupon-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.coupon{display:flex;background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(28,51,42,.06);position:relative}
.coupon::before{content:"";position:absolute;top:50%;left:38%;width:10px;height:10px;background:#e9f0e6;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 -18px 0 #e9f0e6,0 18px 0 #e9f0e6}
.coupon-l{flex:0 0 38%;background:linear-gradient(135deg,var(--pine) 0%,#2a4a3a 100%);color:#fff;padding:1.1rem 1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.3rem;text-align:center;position:relative}
.coupon-amt{display:flex;align-items:baseline;gap:.1rem;line-height:1}
.coupon-amt .cur{font-family:'DM Sans',sans-serif;font-size:.8rem;font-weight:400}
.coupon-amt .num{font-family:'DM Sans',sans-serif;font-size:2rem;font-weight:500}
.coupon-amt.free .num{font-family:'Noto Serif TC',serif;font-size:1.5rem}
.coupon-cond{font-family:'Noto Sans TC',sans-serif;font-size:.7rem;opacity:.9;line-height:1.4}
.coupon-r{flex:1;padding:.9rem 1rem;display:flex;flex-direction:column;gap:.35rem;justify-content:center}
.coupon-tag{font-family:'Noto Sans TC',sans-serif;font-size:.82rem;color:var(--ink);font-weight:500}
.coupon-r p{font-family:'Noto Sans TC',sans-serif;font-size:.72rem;color:#8a8778;line-height:1.5}
.coupon-btn{margin-top:.3rem;padding:.45rem .8rem;background:transparent;border:1.5px solid var(--pine);color:var(--pine);border-radius:6px;font-family:'Noto Sans TC',sans-serif;font-size:.78rem;font-weight:500;cursor:pointer;transition:all .2s ease;align-self:flex-start}
.coupon-btn:hover{background:var(--pine);color:#fff}
.coupon-btn.claimed{background:#ede9db;border-color:#ede9db;color:#8a8778;cursor:default}

/* Product card meta (升級舊卡片) */
.product-meta{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;margin-top:.4rem;font-family:'Noto Sans TC',sans-serif;font-size:.72rem;color:#8a8778;line-height:1.4}
.product-meta .pm-rate{color:#d4a53a;font-weight:500}
.product-meta .pm-sold{color:#8a8778}
.product-meta .pm-ship{padding:.12rem .45rem;background:rgba(58,90,76,.1);color:var(--pine);border-radius:3px;font-size:.68rem;font-weight:500;letter-spacing:.04em}
.product-meta .pm-reward{padding:.12rem .45rem;background:rgba(192,57,43,.08);color:#c0392b;border-radius:3px;font-size:.68rem;font-weight:500;letter-spacing:.04em}

/* Responsive */
@media (max-width:960px){
  .coupon-grid{grid-template-columns:1fr 1fr}
  .flash-rail,.top10-rail{grid-auto-columns:minmax(180px,1fr)}
  .page-hero-slim-inner{flex-direction:column;align-items:flex-start}
  .page-hero-stats.compact{gap:1.2rem}
}
@media (max-width:560px){
  .coupon-grid{grid-template-columns:1fr}
  .flash-head,.top10-head,.coupon-head{flex-direction:column;align-items:flex-start}
  .flash-timer{align-self:flex-start}
}

/* ══════════════════════════════════════════════════════
   FARMER DETAIL PAGE
   ══════════════════════════════════════════════════════ */

/* Farmer Hero */
.farmer-hero{background:var(--paper);padding:3rem 0 2.5rem;border-bottom:1px solid var(--rule)}
@media(min-width:1024px){.farmer-hero{padding:4rem 0 3rem}}
.fh-grid{display:grid;grid-template-columns:1fr;gap:2.2rem;align-items:center}
@media(min-width:960px){.fh-grid{grid-template-columns:1.05fr 1fr;gap:3.5rem}}
.fh-portrait{margin:0;position:relative}
.fh-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;border:10px solid #fff;box-shadow:0 24px 48px -24px rgba(28,51,42,.45),0 6px 14px -4px rgba(28,51,42,.18);transform:rotate(-1deg)}
.fh-portrait-cap{font-family:var(--font-serif);font-size:.82rem;color:var(--ink-mid);letter-spacing:.05em;margin-top:1.4rem;padding-left:1rem;border-left:2px solid var(--vermillion);line-height:1.4}
.fh-body{padding:0}
.fh-kicker{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-serif);font-size:.82rem;letter-spacing:.2em;color:var(--pine);text-transform:uppercase;margin-bottom:1.2rem}
.fh-kicker .line{width:32px;height:1px;background:var(--pine)}
.fh-name-row{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:.4rem}
.fh-name{font-family:var(--font-serif);font-size:clamp(3rem,7vw,5.2rem);font-weight:500;line-height:1;color:var(--ink);margin:0}
.fh-seal{width:3.4rem;height:3.4rem;font-size:.95rem;line-height:1.05;transform:rotate(-5deg)}
.fh-farm{font-family:var(--font-serif);font-size:1.05rem;color:var(--ink-mid);letter-spacing:.08em;margin:0 0 1.8rem}
.fh-quote{font-family:var(--font-serif);font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.55;color:var(--pine);border-left:3px solid var(--vermillion);padding:.3rem 0 .3rem 1.3rem;margin:0 0 2rem;font-style:italic}
.fh-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:0 0 2rem;padding:1.4rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.fh-meta>div{display:flex;flex-direction:column;gap:.3rem}
.fh-meta dt{font-size:.72rem;letter-spacing:.15em;color:var(--ink-light);text-transform:uppercase}
.fh-meta dd{margin:0;font-family:var(--font-serif);font-size:1.02rem;color:var(--ink);font-weight:500}
.fh-actions{display:flex;gap:.8rem;flex-wrap:wrap}
@media(max-width:560px){.fh-meta{grid-template-columns:repeat(2,1fr)}}

/* At-a-Glance Strip */
.fd-glance{background:var(--pine);color:var(--paper);padding:1.8rem 0}
.fd-glance-row{display:flex;align-items:center;justify-content:space-around;gap:1rem;flex-wrap:wrap}
.fd-glance-item{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
.fd-glance-item .num{font-family:var(--font-serif);font-size:2.4rem;line-height:1;color:var(--gold-mid);font-weight:500}
.fd-glance-item .lbl{font-size:.8rem;letter-spacing:.1em;color:rgba(255,255,255,.75)}
.fd-glance .sep{width:1px;height:2.2rem;background:rgba(255,255,255,.2)}
@media(max-width:768px){.fd-glance .sep{display:none}.fd-glance-row{gap:1.4rem 2rem}.fd-glance-item .num{font-size:1.9rem}}

/* Story · 專訪 */
.fd-story{padding:5rem 0 4rem;background:var(--paper)}
.fd-story-grid{display:grid;grid-template-columns:1fr;gap:2.5rem}
@media(min-width:1024px){.fd-story-grid{grid-template-columns:220px 1fr;gap:4rem;align-items:start}}
.fd-toc{position:sticky;top:6rem}
.fd-toc-title{font-family:var(--font-serif);font-size:.78rem;letter-spacing:.25em;color:var(--ink-light);text-transform:uppercase;margin:0 0 1rem;padding-bottom:.8rem;border-bottom:1px solid var(--rule)}
.fd-toc ol{list-style:none;counter-reset:toc;padding:0;margin:0}
.fd-toc li{counter-increment:toc;margin-bottom:.9rem}
.fd-toc li a{display:flex;gap:.7rem;font-family:var(--font-serif);font-size:.92rem;color:var(--ink-mid);line-height:1.5;text-decoration:none;transition:color .3s ease}
.fd-toc li a::before{content:counter(toc,decimal-leading-zero);font-family:"DM Sans",sans-serif;font-size:.72rem;color:var(--vermillion);padding-top:.2rem;flex-shrink:0}
.fd-toc li a:hover{color:var(--vermillion)}
@media(max-width:1023px){.fd-toc{position:static;padding:1.2rem 1.4rem;background:var(--paper-card);border:1px solid var(--rule)}}

.fd-article{max-width:760px}
.fd-kicker{display:inline-block;font-family:var(--font-serif);font-size:.82rem;letter-spacing:.2em;color:var(--vermillion);text-transform:uppercase;margin-bottom:1rem}
.fd-h2{font-family:var(--font-serif);font-size:clamp(2rem,4vw,2.8rem);line-height:1.3;color:var(--ink);font-weight:500;margin:0 0 2.5rem}
.fd-qa{margin-bottom:3rem;padding-bottom:3rem;border-bottom:1px solid var(--rule)}
.fd-qa:last-child{border-bottom:0}
.fd-q{font-family:var(--font-serif);font-size:1.25rem;color:var(--pine);line-height:1.55;margin:0 0 1.2rem;padding-left:1.2rem;border-left:3px solid var(--gold)}
.fd-a{font-family:var(--font-serif);font-size:1.08rem;line-height:2;color:var(--ink);margin:0 0 1.2rem;letter-spacing:.02em}
.fd-a.fd-dropcap::first-letter{font-size:3.4rem;line-height:.9;float:left;margin:.2rem .6rem 0 0;color:var(--vermillion);font-weight:500;font-family:var(--font-serif)}
.fd-a.fd-sign{color:var(--ink-light);font-size:.95rem;margin-top:2rem;text-align:right}
.fd-pull{font-family:var(--font-serif);font-size:1.45rem;line-height:1.6;color:var(--pine);background:var(--pine-light);border-left:4px solid var(--vermillion);padding:1.6rem 1.8rem;margin:2rem 0;font-style:italic}

/* Gallery */
.fd-gallery{padding:5rem 0 4rem;background:var(--paper-warm)}
.fd-section-head{margin-bottom:3rem}
.fd-section-head-inline{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1.5rem}
.fd-gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:280px;gap:1.4rem}
.fd-photo{margin:0;position:relative;overflow:hidden;background:#e8dfcf}
.fd-photo-lg{grid-row:span 2}
.fd-photo img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.22,.8,.25,1)}
.fd-photo:hover img{transform:scale(1.05)}
.fd-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:2rem 1.4rem 1.2rem;background:linear-gradient(180deg,transparent 0%,rgba(30,40,32,.85) 100%);color:#fff;font-family:var(--font-serif);font-size:.95rem;line-height:1.55}
.fd-time{display:inline-block;font-family:"DM Sans",sans-serif;font-size:.78rem;letter-spacing:.15em;color:var(--gold-mid);margin-right:.7rem;padding:.1rem .5rem;border:1px solid rgba(217,169,66,.5);border-radius:1px}
@media(max-width:768px){.fd-gallery-grid{grid-template-columns:1fr;grid-auto-rows:240px}.fd-photo-lg{grid-row:auto}}

/* Products · 他種的 */
.fd-products{padding:5rem 0 4rem;background:var(--paper)}
.fd-product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
@media(max-width:960px){.fd-product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fd-product-grid{grid-template-columns:1fr}}
.fd-product-card{display:flex;flex-direction:column;background:var(--paper-card);border:1px solid var(--rule);text-decoration:none;color:inherit;transition:transform .5s ease,box-shadow .5s ease,border-color .4s ease}
.fd-product-card:hover{transform:translateY(-4px);border-color:var(--vermillion);box-shadow:0 18px 32px -18px rgba(28,51,42,.25)}
.fd-product-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#e8dfcf}
.fd-product-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.fd-product-card:hover .fd-product-img img{transform:scale(1.06)}
.fd-product-stamp{position:absolute;left:.9rem;top:.9rem;background:var(--vermillion);color:#fff;padding:.25rem .6rem;font-family:var(--font-serif);font-size:.8rem;letter-spacing:.05em;transform:rotate(-3deg);border:1.5px solid #fff;box-shadow:0 2px 4px rgba(192,57,43,.3)}
.fd-product-body{padding:1.3rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.4rem}
.fd-product-cat{font-family:"DM Sans",sans-serif;font-size:.75rem;letter-spacing:.15em;color:var(--ink-light);text-transform:uppercase;margin:0}
.fd-product-name{font-family:var(--font-serif);font-size:1.15rem;color:var(--ink);font-weight:500;line-height:1.45;margin:0}
.fd-product-desc{font-size:.88rem;color:var(--ink-mid);line-height:1.7;margin:.3rem 0 .8rem}
.fd-product-foot{display:flex;align-items:center;justify-content:space-between;padding-top:.9rem;border-top:1px solid var(--rule);margin-top:auto}
.fd-product-price{font-family:var(--font-serif);font-size:1.2rem;color:var(--vermillion);font-weight:500}
.fd-product-price .unit{font-family:var(--font-sans);font-size:.75rem;color:var(--ink-light);font-weight:400;margin-left:.2rem}
.fd-product-cta{font-family:var(--font-serif);font-size:.85rem;color:var(--pine);transition:color .3s ease}
.fd-product-card:hover .fd-product-cta{color:var(--vermillion)}

/* Location */
.fd-location{padding:5rem 0 4rem;background:var(--paper-warm)}
.fd-loc-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center}
@media(min-width:960px){.fd-loc-grid{grid-template-columns:1fr 1.1fr;gap:4rem}}
/* 單欄變體：地圖移除後（方案 D），用置中限寬讓內容不會太寬 */
.fd-loc-grid--single{grid-template-columns:1fr;max-width:680px;margin:0 auto}
@media(min-width:960px){.fd-loc-grid--single{grid-template-columns:1fr;max-width:780px}}
.fd-loc-lead{font-family:var(--font-serif);font-size:1.05rem;line-height:1.9;color:var(--ink-mid);margin:0 0 1.8rem}
.fd-loc-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.9rem}
.fd-loc-list li{font-size:.95rem;line-height:1.65;color:var(--ink);padding-left:1.2rem;border-left:2px solid var(--gold);padding-top:.15rem;padding-bottom:.15rem}
.fd-loc-list strong{display:inline-block;color:var(--pine);margin-right:.7rem;font-family:var(--font-serif);font-weight:500}
.fd-loc-map{background:#f2ece0;border:1px solid var(--rule);aspect-ratio:1;overflow:hidden}
.fd-loc-map svg{width:100%;height:100%;display:block}

/* Related Farmers */
.fd-related{padding:5rem 0 4rem;background:var(--paper)}
.fd-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.fd-related-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.fd-related-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:960px){.fd-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.fd-related-grid,.fd-related-grid-4{grid-template-columns:1fr}}

/* CTA Strip */
.fd-cta-strip{background:var(--pine);color:var(--paper);padding:3rem 0}
.fd-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.fd-cta-h2{font-family:var(--font-serif);font-size:1.6rem;line-height:1.4;color:var(--paper);margin:0 0 .5rem;font-weight:500}
.fd-cta-lead{font-size:.95rem;color:rgba(255,255,255,.75);margin:0;max-width:44ch}
.fd-cta-form{display:flex;gap:.6rem;flex:1;min-width:280px;max-width:440px}
.fd-cta-form input{flex:1;padding:.85rem 1.1rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:var(--paper);font-size:.95rem;border-radius:2px}
.fd-cta-form input::placeholder{color:rgba(255,255,255,.45)}
.fd-cta-form input:focus{outline:0;border-color:var(--gold);background:rgba(255,255,255,.12)}
.fd-cta-form .btn{white-space:nowrap}

/* ══════════════════════════════════════════════════════
   STORY LANDING PAGE (e.g. 返鄉青農)
   ══════════════════════════════════════════════════════ */

/* Editorial Hero */
.story-hero{position:relative;min-height:70vh;display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.story-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.85) contrast(1.05)}
.story-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,40,32,.35) 0%,rgba(30,40,32,.75) 100%)}
.story-hero .container{position:relative;z-index:2;padding-top:5rem;padding-bottom:5rem}
.story-hero-body{max-width:720px;color:var(--paper)}
.story-hero-kicker{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--font-serif);font-size:.82rem;letter-spacing:.25em;color:var(--gold-mid);text-transform:uppercase;margin-bottom:1.8rem}
.story-hero-kicker .line{width:40px;height:1px;background:var(--gold-mid)}
.story-hero-h1{font-family:var(--font-serif);font-size:clamp(3.6rem,9vw,7rem);line-height:.95;color:var(--paper);font-weight:500;margin:0 0 2rem;letter-spacing:-.02em}
.story-hero-h1 .accent{color:var(--gold-mid);font-style:italic}
.story-hero-lead{font-family:var(--font-serif);font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.75;color:rgba(255,255,255,.88);margin:0 0 2.4rem;max-width:28ch}
.story-hero-meta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:rgba(255,255,255,.65);letter-spacing:.1em}
.story-hero-meta .dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.45)}

/* Editor's Note */
.story-note{padding:5rem 0 3.5rem;background:var(--paper-card)}
.story-note-inner{max-width:720px;margin:0 auto}
.story-note-body{font-family:var(--font-serif);font-size:1.12rem;line-height:2;color:var(--ink);margin:0 0 1.4rem;letter-spacing:.02em}
.story-note-body strong{color:var(--vermillion);font-weight:500}
.story-note-dropcap{font-size:3.6rem;line-height:.9;float:left;margin:.3rem .7rem 0 0;color:var(--vermillion);font-weight:500;font-family:var(--font-serif)}
.story-note-sign{font-family:var(--font-serif);color:var(--ink-light);font-size:.95rem;text-align:right;margin-top:2rem;font-style:italic}

/* Chapter blocks */
.story-chapter{padding:5rem 0;background:var(--paper)}
.story-chapter.alt{background:var(--paper-warm)}
.story-chapter-head{display:flex;align-items:flex-start;gap:1.8rem;max-width:900px;margin:0 auto 2.5rem;padding-left:0}
.story-num{font-family:var(--font-serif);font-size:4.5rem;line-height:.9;color:var(--vermillion);font-weight:500;opacity:.85;flex-shrink:0;padding-top:.3rem}
.story-chapter-body{max-width:720px;margin:0 auto}
.story-chapter-body p{font-family:var(--font-serif);font-size:1.1rem;line-height:2.05;color:var(--ink);margin:0 0 1.4rem;letter-spacing:.02em}
.story-chapter-body p strong{color:var(--vermillion);font-weight:500}
.story-chapter-body .fd-pull{text-align:left}
.story-chapter-body .fd-pull cite{display:block;margin-top:.9rem;font-size:.9rem;color:var(--ink-light);font-style:normal;letter-spacing:.05em}
@media(max-width:640px){.story-num{font-size:3.2rem}.story-chapter-head{gap:1rem}}

/* ─── Taiwan Map Section ─── */
/* Background matches the sketch paper tone (sampled ~#FAF3E8) and uses
   mix-blend-mode:darken — when container bg === paper color, paper pixels
   blend invisibly and only the darker ink strokes remain. */
.tw-map-section{background:#faf3e8;padding:3.4rem 0;border-bottom:1px solid var(--rule)}
.tw-map-head{text-align:center;max-width:680px;margin:0 auto 2.2rem}
.tw-map-head .fd-kicker{display:inline-block}
.tw-map-head .fd-h2{margin:.5rem 0 1rem}
.tw-map-lead{color:var(--muted);line-height:1.8;font-size:1rem}
.tw-map-wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:3.2rem;align-items:start;max-width:1180px;margin:0 auto}
.tw-map-wrap .tw-map-stage{margin:0;justify-self:start;max-width:480px}
.tw-map-wrap .tw-region-panel{justify-self:end;width:100%;max-width:560px}
@media(max-width:860px){.tw-map-wrap{grid-template-columns:1fr;gap:1.6rem;max-width:560px}.tw-map-wrap .tw-map-stage,.tw-map-wrap .tw-region-panel{justify-self:center;max-width:560px}}
.tw-map-stage{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1728/2454;background:#faf3e8}
.tw-map-sketch{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:darken;filter:brightness(1.05) contrast(.95);pointer-events:none;user-select:none;-webkit-user-drag:none}
.tw-map-overlay{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.tw-county{cursor:pointer;transform-box:fill-box;transform-origin:center bottom;transition:transform .25s ease}
.tw-county .pin-body{transition:fill .25s ease,filter .3s ease;filter:drop-shadow(0 2px 3px rgba(30,40,32,.35))}
.tw-county .pin-halo{transition:opacity .25s ease,r .25s ease}
.tw-county:hover .pin-body{fill:#a02d1f;filter:drop-shadow(0 4px 10px rgba(200,64,42,.55))}
.tw-county.island:hover .pin-body{fill:#b8851a}
.tw-county:hover .pin-halo{opacity:.7}
.tw-map-legend{background:var(--paper);border:1px solid var(--rule);padding:1.6rem 1.4rem}
.tw-map-legend .legend-title{font-family:var(--font-serif);font-size:.82rem;color:var(--vermillion);letter-spacing:.1em;text-transform:uppercase;margin:0 0 .9rem}
.tw-map-legend .legend-list{list-style:none;padding:0;margin:0 0 1.2rem;display:flex;flex-direction:column;gap:.55rem}
.tw-map-legend .legend-list li{display:flex;align-items:center;gap:.6rem;font-size:.92rem;color:var(--ink-light)}
.tw-map-legend .legend-list .dot{width:.75rem;height:.75rem;border-radius:50%;background:var(--vermillion);flex-shrink:0}
.tw-map-legend .legend-list .dot.lg{width:1rem;height:1rem}
.tw-map-legend .legend-list .dot.md{width:.85rem;height:.85rem}
.tw-map-legend .legend-list .dot.sm{width:.7rem;height:.7rem}
.tw-map-legend .legend-list .dot.xs{width:.6rem;height:.6rem;background:var(--gold-mid)}
.tw-map-legend .legend-total{font-family:var(--font-serif);font-size:.95rem;line-height:1.6;color:var(--ink);border-top:1px solid var(--rule);padding-top:1rem;margin:0 0 .6rem}
.tw-map-legend .legend-total strong{color:var(--vermillion);font-size:1.2rem;font-weight:500}
.tw-map-legend .legend-hint{font-size:.78rem;color:var(--muted);margin:0;line-height:1.6;font-style:italic}

/* Region chip panel — clear labels beside the sketch map (right column) */
.tw-region-panel{padding:1.6rem 1.4rem 1.4rem;background:var(--paper);border:1px solid var(--rule);box-shadow:0 1px 0 rgba(30,40,32,.02),0 12px 28px -20px rgba(30,40,32,.15);position:sticky;top:100px}
.tw-region-head{margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px dashed var(--rule)}
.tw-region-head .fd-kicker{margin:0;display:block}
.tw-region-hint{margin:.4rem 0 0;font-size:.82rem;color:var(--muted);font-style:italic;line-height:1.5}
.tw-region-density{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;padding:.6rem .8rem;margin-bottom:1rem;background:var(--paper-warm);border:1px solid var(--rule)}
.tw-region-density .legend-title{font-family:var(--font-serif);font-size:.72rem;color:var(--vermillion);letter-spacing:.1em;text-transform:uppercase;margin:0;flex-shrink:0}
.tw-region-density .legend-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.55rem .85rem}
.tw-region-density .legend-list li{display:flex;align-items:center;gap:.32rem;font-size:.75rem;color:var(--ink-light)}
.tw-region-density .legend-list .dot{width:.62rem;height:.62rem;border-radius:50%;background:var(--vermillion);flex-shrink:0}
.tw-region-density .legend-list .dot.lg{width:.82rem;height:.82rem}
.tw-region-density .legend-list .dot.md{width:.7rem;height:.7rem}
.tw-region-density .legend-list .dot.sm{width:.58rem;height:.58rem}
.tw-region-density .legend-list .dot.xs{width:.5rem;height:.5rem;background:var(--gold-mid)}
.tw-region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.tw-region-total{margin:1rem 0 0;padding-top:.9rem;border-top:1px dashed var(--rule);font-family:var(--font-serif);font-size:.88rem;color:var(--ink-light);text-align:center}
.tw-region-total strong{color:var(--vermillion);font-weight:500}
@media(max-width:860px){.tw-region-panel{position:static}.tw-region-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
.tw-region-chip{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.7rem .9rem;background:var(--paper-warm);border:1px solid var(--rule);font-family:var(--font-serif);font-size:.98rem;color:var(--ink);cursor:pointer;transition:all .2s ease;text-align:left}
.tw-region-chip .rc-name{font-weight:500;letter-spacing:.02em}
.tw-region-chip .rc-count{font-family:'DM Sans',sans-serif;font-size:.78rem;color:var(--vermillion);background:rgba(200,64,42,.08);padding:.12rem .5rem;border-radius:999px;font-weight:500;min-width:1.8rem;text-align:center}
.tw-region-chip:hover{border-color:var(--vermillion);background:var(--paper);color:var(--vermillion);transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(200,64,42,.35)}
.tw-region-chip:hover .rc-count{background:var(--vermillion);color:#fff}
.tw-region-chip.featured{border-color:var(--vermillion);border-width:1.5px}
.tw-region-chip.featured .rc-count{background:var(--vermillion);color:#fff}
.tw-region-chip.island{background:rgba(212,163,50,.08);border-style:dashed}
.tw-region-chip.island .rc-count{background:rgba(212,163,50,.18);color:var(--gold-deep,#8a6a1e)}
.tw-region-chip.island:hover{border-style:solid;border-color:var(--gold-mid);color:var(--ink)}
.tw-region-chip.island:hover .rc-count{background:var(--gold-mid);color:#fff}
@media(max-width:520px){.tw-region-grid{grid-template-columns:repeat(3,1fr);gap:.45rem}.tw-region-chip{padding:.55rem .65rem;font-size:.88rem}.tw-region-chip .rc-name{font-size:.88rem}}

/* ─── Load More ─── */
.load-more-wrap{text-align:center;padding:2.2rem 0 1rem;margin-top:2rem;border-top:1px dashed var(--rule)}
.load-more-note{font-family:var(--font-serif);font-size:.92rem;color:var(--muted);margin:0 0 1.2rem}
.load-more-note strong{color:var(--vermillion);font-weight:500}
.load-more-btn{display:inline-flex;flex-direction:column;align-items:center;gap:.2rem;background:var(--pine);color:var(--paper);border:none;padding:1rem 2.6rem;font-family:var(--font-serif);font-size:1.05rem;cursor:pointer;transition:all .3s ease;letter-spacing:.05em}
.load-more-btn:hover:not(:disabled){background:var(--vermillion);transform:translateY(-2px);box-shadow:0 8px 20px -10px rgba(200,64,42,.45)}
.load-more-btn:disabled{opacity:.6;cursor:wait}
.load-more-btn .load-more-count{font-size:.78rem;opacity:.78;letter-spacing:.06em;font-family:DM Sans,sans-serif}
.load-more-hint{margin:1.1rem 0 0;font-size:.9rem;color:var(--muted)}
.load-more-hint a{color:var(--vermillion);text-decoration:none;border-bottom:1px dotted var(--vermillion);padding-bottom:1px;font-family:var(--font-serif)}
.load-more-hint a:hover{background:var(--vermillion);color:#fff;border-color:var(--vermillion)}

/* ══════════════════════════════════════════════
   pd-manual: 產品敘述（一頁式宣傳圖容器）
   多張圖垂直堆疊，無間距，適合農友自製 EDM
   ══════════════════════════════════════════════ */
.pd-manual{padding:3.5rem 0;background:var(--paper-warm);border-top:1px solid var(--rule)}
.pd-manual-head{max-width:880px;margin:0 auto 1.6rem}
.pd-manual-stack{
  max-width:880px;margin:0 auto;
  background:#fff;
  border:1px solid var(--rule);
  display:flex;flex-direction:column;
  /* 圖片之間零間距，因為多張通常是接續設計 */
}
.pd-manual-stack img{
  display:block;width:100%;height:auto;
  cursor:zoom-in;
  transition:filter .25s ease;
}
.pd-manual-stack img:hover{filter:brightness(.96)}
.pd-manual-note{
  max-width:880px;margin:1rem auto 0;
  text-align:center;
  font-family:var(--font-latin);font-size:.78rem;
  letter-spacing:.16em;color:var(--ink-light);
}

/* Lightbox（點圖放大）*/
.pd-manual-lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(15,20,18,.92);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  opacity:0;visibility:hidden;
  transition:opacity .28s ease,visibility 0s .28s;
  cursor:zoom-out;
}
.pd-manual-lightbox.is-open{opacity:1;visibility:visible;transition:opacity .28s ease}
.pd-manual-lightbox img{
  max-width:min(100%,1200px);
  max-height:90vh;
  object-fit:contain;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.pd-manual-lightbox-close{
  position:absolute;top:1.4rem;right:1.6rem;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:1.4rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .25s;
}
.pd-manual-lightbox-close:hover{background:rgba(255,255,255,.2);transform:rotate(90deg)}
.pd-manual-lightbox-counter{
  position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  font-family:var(--font-latin);font-size:.78rem;letter-spacing:.18em;
  color:rgba(255,255,255,.65);
}
.pd-manual-lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .25s,transform .25s;
}
.pd-manual-lightbox-nav:hover{background:rgba(255,255,255,.2)}
.pd-manual-lightbox-nav.prev{left:1.6rem}
.pd-manual-lightbox-nav.next{right:1.6rem}
@media (max-width:640px){
  .pd-manual-lightbox-nav{width:38px;height:38px;font-size:1.3rem}
  .pd-manual-lightbox-nav.prev{left:.6rem}
  .pd-manual-lightbox-nav.next{right:.6rem}
}

/* ══════════════════════════════════════════════
   tfa-youtube: Lite YouTube Embed
   點縮圖才載 iframe，省 ~500KB JS + 隱私加分
   ══════════════════════════════════════════════ */

/* 主播放器（站內展開型） */
.tfa-yt{
  position:relative;
  aspect-ratio:16/9;
  background:#000;
  cursor:pointer;
  overflow:hidden;
  border-radius:2px;
  border:1px solid var(--rule);
  isolation:isolate;
  transition:border-color .3s,box-shadow .3s;
}
.tfa-yt:focus-visible{outline:2px solid var(--vermillion);outline-offset:3px}
.tfa-yt:hover{border-color:var(--vermillion);box-shadow:0 12px 28px -14px rgba(30,40,32,.35)}
.tfa-yt.is-playing{cursor:default;border-color:var(--ink)}
.tfa-yt.is-playing:hover{box-shadow:none}

.tfa-yt-thumb{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .35s;
}
.tfa-yt:hover .tfa-yt-thumb{transform:scale(1.045);filter:brightness(.82) saturate(1.1)}

.tfa-yt-play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:72px;height:50px;
  border:0;background:transparent;cursor:pointer;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));
  transition:transform .35s cubic-bezier(.2,.7,.2,1);
  z-index:2;
}
.tfa-yt-play svg{width:100%;height:100%;display:block}
.tfa-yt:hover .tfa-yt-play{transform:translate(-50%,-50%) scale(1.12)}
.tfa-yt:active .tfa-yt-play{transform:translate(-50%,-50%) scale(.95)}

.tfa-yt-caption{
  position:absolute;left:1.1rem;bottom:1rem;right:5rem;z-index:2;
  color:#fff;
  font-family:var(--font-serif);font-size:1rem;line-height:1.45;
  letter-spacing:.04em;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
  opacity:.95;pointer-events:none;
  transition:opacity .25s;
}
.tfa-yt-caption.is-playing{opacity:0}

/* 漸層遮罩讓字更清楚 */
.tfa-yt::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:50%;z-index:1;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 100%);
  pointer-events:none;
  transition:opacity .25s;
}
.tfa-yt.is-playing::after{opacity:0}

.tfa-yt iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3;
}

/* 影片區塊外的小標籤（type: youtube） */
.tfa-yt-tag{
  position:absolute;top:.85rem;left:.9rem;z-index:2;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .55rem;
  background:rgba(255,255,255,.92);
  font-family:var(--font-latin);font-size:.6rem;letter-spacing:.18em;
  color:var(--ink);text-transform:uppercase;border-radius:2px;
}
.tfa-yt-tag::before{content:"";width:8px;height:8px;background:#f00;border-radius:50%;display:inline-block}

/* ── 列表卡片版（小縮圖 + 標題，多半外連到 YT）── */
.tfa-yt-card{
  display:flex;flex-direction:column;gap:.6rem;
  text-decoration:none;color:var(--ink);
  transition:transform .3s;
}
.tfa-yt-card:hover{transform:translateY(-3px)}
.tfa-yt-card-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:#000;border-radius:2px;border:1px solid var(--rule);
  transition:border-color .25s;
}
.tfa-yt-card:hover .tfa-yt-card-thumb{border-color:var(--vermillion)}
.tfa-yt-card-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s,filter .3s;
}
.tfa-yt-card:hover .tfa-yt-card-thumb img{transform:scale(1.06);filter:brightness(.85)}
.tfa-yt-card-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:34px;
  background:rgba(255,0,0,.92);color:#fff;
  border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;line-height:1;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
  transition:transform .3s,background .25s;
}
.tfa-yt-card:hover .tfa-yt-card-play{transform:translate(-50%,-50%) scale(1.1);background:#f00}
.tfa-yt-card-title{
  font-family:var(--font-serif);font-size:.96rem;
  line-height:1.45;color:var(--ink);font-weight:400;
  margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.tfa-yt-card:hover .tfa-yt-card-title{color:var(--vermillion)}
.tfa-yt-card-meta{
  font-family:var(--font-latin);font-size:.7rem;letter-spacing:.12em;
  color:var(--ink-light);text-transform:uppercase;
}

/* ── 影片區塊 wrapper（含上方標題列）── */
.tfa-yt-block{display:flex;flex-direction:column;gap:.85rem;margin:2rem 0}
.tfa-yt-block-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule);
}
.tfa-yt-block-kicker{
  font-family:var(--font-latin);font-size:.66rem;letter-spacing:.28em;
  color:var(--vermillion);text-transform:uppercase;
}
.tfa-yt-block-title{
  font-family:var(--font-serif);font-size:1.35rem;color:var(--ink);
  font-weight:400;margin:.2rem 0 0;letter-spacing:.04em;
}
@media(max-width:640px){
  .tfa-yt-block-title{font-size:1.15rem}
  .tfa-yt-caption{font-size:.86rem;right:4rem}
}

@media (prefers-reduced-motion: reduce){
  .tfa-yt-thumb,.tfa-yt-play,.tfa-yt-card-thumb img,.tfa-yt-card-play{
    transition:none !important;transform:none !important;
  }
}

/* ── 直式短影音（9:16，模擬 YouTube Shorts）── */
.tfa-yt-card-vert .tfa-yt-card-thumb{aspect-ratio:9/16}
.tfa-yt-card-vert .tfa-yt-card-thumb img{
  /* mqdefault/hqdefault 是 16:9，要裁中央當直式 */
  object-fit:cover;object-position:center;
  transform:scale(1.5);  /* 放大讓裁切後內容飽滿 */
}
.tfa-yt-card-vert:hover .tfa-yt-card-thumb img{transform:scale(1.55)}
.tfa-yt-card-vert .tfa-yt-card-play{
  background:rgba(255,255,255,.95);color:#f00;
  width:42px;height:42px;border-radius:50%;
  font-size:.95rem;
}
.tfa-yt-card-vert:hover .tfa-yt-card-play{background:#fff;color:#f00}

/* Shorts grid：手機 2 欄、平板 3 欄、桌機 5 欄 */
.farmers-shorts-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
}
@media(min-width:640px){
  .farmers-shorts-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
}
@media(min-width:1024px){
  .farmers-shorts-grid{grid-template-columns:repeat(5,1fr);gap:1.4rem}
}

/* ══════════════════════════════════════════════
   loader: 稻穗生長 Loading
   ══════════════════════════════════════════════ */
body.tfa-loader-lock{overflow:hidden}

.tfa-loader{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 62%,rgba(245,207,84,.18),transparent 70%),
    linear-gradient(180deg,#fbf6ea 0%,#f5ede0 60%,#ede2cc 100%);
  opacity:1;               /* 預設顯示 — 初次 attach 瞬間可見，不等 rAF */
  transition:opacity .42s ease;
  isolation:isolate;
}
/* 未加 is-on（= 準備 fade out） → 變透明 */
.tfa-loader:not(.is-on){opacity:0}
.tfa-loader::before{
  /* 紙紋 overlay */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../images/nav-paper.png") repeat;background-size:520px auto;
  mix-blend-mode:multiply;opacity:.28;
}
.tfa-loader::after{
  /* 光暈 */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 48%,rgba(255,255,255,.6) 0%,transparent 40%);
  mix-blend-mode:overlay;opacity:.7;
}
.tfa-loader.is-on{opacity:1}
.tfa-loader[hidden]{display:none}

.tfa-loader-stage{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:1.1rem;
  padding:2rem 2.5rem;
}
.tfa-loader-rice{
  width:140px;height:168px;display:block;
  filter:drop-shadow(0 8px 14px rgba(60,80,40,.18));
}
.tfa-loader-kicker{
  margin:0;font-family:var(--font-latin);font-size:.7rem;
  letter-spacing:.32em;color:var(--pine);text-transform:uppercase;
}
.tfa-loader-hint{
  margin:0;font-family:var(--font-serif);font-size:.92rem;
  color:var(--ink-mid);letter-spacing:.12em;
  animation:tfa-hint-breathe 2.2s ease-in-out infinite;
}

/* ── SVG 動畫 ── */
.tfa-loader-rice .rice-soil-dots circle{fill:#8a6a3a;opacity:.45}

/* 主莖：stroke-dasharray 從下到上畫線 */
.tfa-loader-rice .rice-stem{
  stroke-dasharray:260;stroke-dashoffset:260;
  animation:tfa-rice-grow 1.3s cubic-bezier(.45,.1,.25,1) infinite;
}

/* 葉片：由中心向外 scale + sway */
.tfa-loader-rice .leaf{
  transform-origin:100px 100px;transform:scale(0);opacity:0;
  animation:tfa-leaf-unfurl 1.3s cubic-bezier(.35,.1,.3,1) infinite;
}
.tfa-loader-rice .leaf-l1{transform-origin:100px 168px;animation-delay:.18s}
.tfa-loader-rice .leaf-r1{transform-origin:101px 148px;animation-delay:.28s}
.tfa-loader-rice .leaf-l2{transform-origin:99px  120px;animation-delay:.40s}
.tfa-loader-rice .leaf-r2{transform-origin:101px 95px; animation-delay:.50s}

/* 穀粒：由下往上逐顆出現 + 芒尖 fade in */
.tfa-loader-rice .grain{
  transform-box:fill-box;transform-origin:center;
  transform:scale(0);opacity:0;
  animation:tfa-grain-pop 1.3s cubic-bezier(.35,.1,.2,1.4) infinite;
}
.tfa-loader-rice .awn{
  stroke-dasharray:18;stroke-dashoffset:18;opacity:0;
  animation:tfa-awn-draw 1.3s ease infinite;
}
.tfa-loader-rice .g1,.tfa-loader-rice .a1{animation-delay:.55s}
.tfa-loader-rice .g2,.tfa-loader-rice .a2{animation-delay:.60s}
.tfa-loader-rice .g3,.tfa-loader-rice .a3{animation-delay:.66s}
.tfa-loader-rice .g4,.tfa-loader-rice .a4{animation-delay:.71s}
.tfa-loader-rice .g5,.tfa-loader-rice .a5{animation-delay:.77s}
.tfa-loader-rice .g6,.tfa-loader-rice .a6{animation-delay:.82s}
.tfa-loader-rice .g7,.tfa-loader-rice .a7{animation-delay:.88s}
.tfa-loader-rice .g8,.tfa-loader-rice .a8{animation-delay:.93s}

/* 整株輕微搖擺（風的感覺） */
.tfa-loader-rice .rice-leaves,
.tfa-loader-rice .rice-grains{
  transform-origin:100px 218px;
  animation:tfa-rice-sway 2.2s ease-in-out infinite;
}

@keyframes tfa-rice-grow{
  0%   {stroke-dashoffset:260}
  30%  {stroke-dashoffset:0}
  100% {stroke-dashoffset:0;opacity:.9}
}
@keyframes tfa-leaf-unfurl{
  0%,15%  {transform:scale(0);opacity:0}
  35%     {transform:scale(1.08);opacity:1}
  50%,95% {transform:scale(1);opacity:1}
  100%    {transform:scale(1);opacity:.9}
}
@keyframes tfa-grain-pop{
  0%,20%  {transform:scale(0);opacity:0}
  40%     {transform:scale(1.25);opacity:1}
  55%,95% {transform:scale(1);opacity:1}
  100%    {transform:scale(1);opacity:.95}
}
@keyframes tfa-awn-draw{
  0%,30%  {stroke-dashoffset:18;opacity:0}
  55%     {stroke-dashoffset:0;opacity:.8}
  95%     {stroke-dashoffset:0;opacity:.8}
  100%    {stroke-dashoffset:0;opacity:.6}
}
@keyframes tfa-rice-sway{
  0%,100% {transform:rotate(-1.4deg)}
  50%     {transform:rotate(1.6deg)}
}
@keyframes tfa-hint-breathe{
  0%,100% {opacity:.55}
  50%     {opacity:1}
}

@media (prefers-reduced-motion: reduce){
  .tfa-loader-rice .rice-stem,
  .tfa-loader-rice .leaf,
  .tfa-loader-rice .grain,
  .tfa-loader-rice .awn,
  .tfa-loader-rice .rice-leaves,
  .tfa-loader-rice .rice-grains{
    animation:none !important;
    stroke-dashoffset:0 !important;transform:none !important;opacity:1 !important;
  }
  .tfa-loader-hint{animation:none}
}

/* ══════════════════════════════════════════════
   mobile-nav: 手機版漢堡抽屜
   ══════════════════════════════════════════════ */

/* ── 漢堡按鈕（桌機隱藏）── */
.mnav-burger{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;border:0;cursor:pointer;
  color:#1a3a2a;padding:.35rem .55rem;
  font-family:var(--font-latin);font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;
  border-left:1px solid rgba(26,58,42,.18);margin-left:.25rem;
}
.mnav-burger-label{line-height:1}
.mnav-burger-lines{position:relative;width:22px;height:14px;display:inline-block}
.mnav-burger-lines span{
  position:absolute;left:0;right:0;height:1.5px;background:currentColor;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),opacity .2s ease,top .28s cubic-bezier(.2,.7,.2,1);
  transform-origin:center;
}
.mnav-burger-lines span:nth-child(1){top:0}
.mnav-burger-lines span:nth-child(2){top:calc(50% - .75px)}
.mnav-burger-lines span:nth-child(3){top:calc(100% - 1.5px)}
.mnav-burger.is-open .mnav-burger-lines span:nth-child(1){top:calc(50% - .75px);transform:rotate(45deg)}
.mnav-burger.is-open .mnav-burger-lines span:nth-child(2){opacity:0}
.mnav-burger.is-open .mnav-burger-lines span:nth-child(3){top:calc(50% - .75px);transform:rotate(-45deg)}
.mnav-burger:hover{color:var(--vermillion)}
@media(min-width:1024px){.mnav-burger{display:none}}

/* ── 抽屜主體（右側滑入）── */
.mnav-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:120;
  width:min(88vw,380px);
  background:#f5ede0;
  color:var(--ink);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.7,.2,1);
  box-shadow:-20px 0 60px -20px rgba(15,30,22,.45);
  border-left:1px solid rgba(26,58,42,.18);
  overflow:hidden;isolation:isolate;
}
.mnav-drawer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("../images/nav-paper.png") repeat;background-size:420px auto;
  mix-blend-mode:multiply;opacity:.35;
}
.mnav-drawer::after{
  /* 上緣金邊 + 右緣飾線 */
  content:"";position:absolute;left:0;right:0;top:0;height:3px;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--gold) 0%,#e8b837 50%,var(--vermillion) 100%);
}
.mnav-drawer > *{position:relative;z-index:1}
.mnav-drawer.is-open{transform:translateX(0)}
.mnav-drawer[hidden]{display:none}

/* ── Head ── */
.mnav-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.25rem 1.25rem .9rem;
  border-bottom:1px solid rgba(26,58,42,.15);
  background:rgba(245,207,84,.08);
}
.mnav-kicker{
  font-family:var(--font-latin);font-size:.68rem;
  letter-spacing:.3em;color:var(--pine);text-transform:uppercase;
}
.mnav-close{
  background:transparent;border:0;cursor:pointer;color:var(--ink);
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s,color .2s;
}
.mnav-close svg{width:20px;height:20px}
.mnav-close:hover{background:rgba(26,58,42,.08);color:var(--vermillion)}

/* ── Body（滾動區）── */
.mnav-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.5rem 0 1rem}
.mnav-body::-webkit-scrollbar{width:6px}
.mnav-body::-webkit-scrollbar-thumb{background:rgba(26,58,42,.2);border-radius:3px}

/* ── 頂層項目 ── */
.mnav-item{border-bottom:1px solid rgba(26,58,42,.1)}
.mnav-item:last-child{border-bottom:0}
.mnav-top,
.mnav-top-link{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:1.05rem 1.35rem;
  background:transparent;border:0;cursor:pointer;
  font-family:var(--font-serif);font-size:1.08rem;color:var(--ink);
  text-align:left;letter-spacing:.06em;
  transition:background .2s,color .2s;
}
.mnav-top-link{text-decoration:none}
.mnav-top:hover,
.mnav-top-link:hover{background:rgba(245,207,84,.12);color:var(--vermillion)}
.mnav-item-solo{position:relative}
.mnav-item-solo::after{
  content:"→";position:absolute;right:1.35rem;top:50%;transform:translateY(-50%);
  color:var(--gold);font-family:var(--font-latin);font-size:.95rem;
  transition:transform .25s ease;
}
.mnav-item-solo:hover::after{transform:translate(4px,-50%);color:var(--vermillion)}

.mnav-top-label{flex:1}
.mnav-top-caret{
  width:20px;height:20px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),color .2s;
}
.mnav-top-caret svg{width:100%;height:100%}
.mnav-item[data-open="true"] .mnav-top-caret{transform:rotate(180deg);color:var(--vermillion)}
.mnav-item[data-open="true"] .mnav-top{background:rgba(245,207,84,.1);color:var(--pine)}

/* ── 展開面板 ── */
.mnav-panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1);
  background:rgba(255,250,238,.55);
  border-top:1px dashed rgba(26,58,42,.12);
}
.mnav-panel-inner{min-height:0;overflow:hidden}
.mnav-item[data-open="true"] .mnav-panel{grid-template-rows:1fr}
/* fallback：不支援 grid 動畫的老瀏覽器 */
@supports not (grid-template-rows: 1fr){
  .mnav-panel{display:block;max-height:0;overflow:hidden;transition:max-height .35s ease}
  .mnav-item[data-open="true"] .mnav-panel{max-height:2400px}
}
.mnav-panel .mnav-overview{
  display:block;padding:.9rem 1.35rem;
  font-family:var(--font-latin);font-size:.72rem;letter-spacing:.2em;
  color:var(--vermillion);text-transform:uppercase;
  border-bottom:1px solid rgba(26,58,42,.08);
}
.mnav-panel .mnav-overview:hover{background:rgba(200,64,42,.06)}

.mnav-col{padding:.85rem 1.35rem .6rem}
.mnav-col + .mnav-col{border-top:1px dotted rgba(26,58,42,.12)}
.mnav-col-title{
  font-family:var(--font-latin);font-size:.62rem;letter-spacing:.28em;
  color:var(--ink-light);text-transform:uppercase;
  margin:0 0 .55rem;
}
.mnav-sub-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.mnav-sub-list li{margin:0}
.mnav-sub-list a{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
  padding:.5rem 0;
  font-family:var(--font-serif);font-size:.95rem;color:var(--ink-mid);
  text-decoration:none;transition:color .2s,padding-left .2s;
}
.mnav-sub-list a:hover{color:var(--vermillion);padding-left:.35rem}
.mnav-sub-list .en{
  font-family:var(--font-latin);font-size:.66rem;letter-spacing:.18em;
  color:var(--ink-light);text-transform:uppercase;
}
.mnav-sub-list .pill{
  display:inline-block;padding:.1rem .45rem;
  font-family:var(--font-latin);font-size:.58rem;letter-spacing:.18em;
  color:var(--paper);background:var(--vermillion);
  border-radius:2px;text-transform:uppercase;
}

/* ── Foot ── */
.mnav-foot{
  padding:1rem 1.35rem 1.2rem;
  border-top:1px solid rgba(26,58,42,.15);
  background:rgba(26,58,42,.04);
}
.mnav-foot-link{
  display:block;text-align:center;
  padding:.8rem;margin-bottom:.75rem;
  border:1px solid var(--pine);
  font-family:var(--font-serif);font-size:.95rem;color:var(--pine);
  text-decoration:none;letter-spacing:.12em;
  transition:background .2s,color .2s;
}
.mnav-foot-link:hover{background:var(--pine);color:var(--paper-warm)}
.mnav-foot-note{
  display:flex;justify-content:space-between;align-items:center;gap:.75rem;
  margin:0;font-family:var(--font-latin);font-size:.58rem;
  letter-spacing:.18em;color:var(--ink-light);text-transform:uppercase;
}
.mnav-foot-seal{color:var(--gold)}

/* ── 手機版調整 nav-inner，避免文字溢出 ── */
@media(max-width:1023px){
  .nav-inner{gap:1rem}
  .nav-actions{gap:.6rem}
  .nav-actions .show-lg{display:none}
}