/* ==========================================================
   精修層 refine.css — 疊在 style.css 之後
   1. 字體：思源黑體（Noto Sans TC）＋數字用 Barlow Condensed
   2. 中文字距改回正常（不再負字距擠字）
   3. 雙11 節慶感：倒數、跑馬燈、數字跳動、捲動浮現
   ========================================================== */
:root{
  --gold:#e6c35c;
  --gold-deep:#c9a43c;
  --olive:#4a6037;
  --night:#141a15;
  --zh:"Noto Sans TC","PingFang TC","Heiti TC","Microsoft JhengHei",sans-serif;
  --num:"Barlow Condensed","DIN Condensed","Arial Narrow",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- 字體與字距 ---------- */
body{font-family:var(--zh);letter-spacing:.02em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:var(--zh);letter-spacing:.02em;font-weight:900}
h2{line-height:1.38}
.section-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.35}
.eyebrow{letter-spacing:.12em;font-weight:700;font-size:12px}
.eyebrow:before{content:"";display:inline-block;width:18px;height:2px;background:currentColor;vertical-align:4px;margin-right:10px}
.mystery .eyebrow:before{display:none}

/* 數字統一用窄體，價格更有力 */
.hero-off strong,.offer-nav strong,.discount b,.trade-bar p b,.calc-result>strong,
.tiers strong,.secret-price strong,.secret-price b,.carousel-caption h2,.product h3,
.warranty-tabs strong,.steps b,.pay b,.calculator input,.num-big,.cd-unit b,
.trade-bar strong,.mystery-num,.hero-warranty>span{
  font-family:var(--num);font-weight:700;letter-spacing:0;font-variant-numeric:tabular-nums
}
.product h3{font-size:30px;letter-spacing:.01em}
.carousel-caption h2{font-size:38px}
.discount b{font-size:30px}
.calc-result>strong{font-size:76px;letter-spacing:0;line-height:1.05}
.tiers strong{font-size:22px}
.tiers .top-tier strong{font-size:34px}
.offer-nav strong{font-size:30px}
.calculator input{font-size:40px}

/* ---------- 頂部捲動進度 ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.scroll-progress i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(60% 70% at 85% 35%,#2b3a26 0,transparent 70%),
  radial-gradient(40% 50% at 10% 90%,#1f2a1d 0,transparent 70%),#141a15}
.hero:before{content:"11";position:absolute;right:-2%;bottom:-18%;font:800 clamp(260px,34vw,520px)/1 var(--num);color:#ffffff06;pointer-events:none;letter-spacing:-.02em}
.hero-inner{position:relative}
.festival-line{margin-bottom:18px}
.festival-line span:first-child{border-color:var(--gold-deep);color:var(--gold);font-weight:700;letter-spacing:.12em}

.countdown{display:flex;align-items:center;gap:6px;margin:0 0 34px;flex-wrap:wrap}
.cd-label{font-size:12px;color:#a9b59e;margin-right:8px;letter-spacing:.08em}
.cd-unit{display:inline-flex;align-items:baseline;gap:3px;font-size:11px;color:#8d9a83}
.cd-unit b{display:inline-block;min-width:44px;text-align:center;font-size:30px;line-height:1;color:#f5f7ef;background:#ffffff0d;border:1px solid #ffffff14;border-radius:6px;padding:7px 6px 5px}
.cd-unit b.tick{animation:cd-tick .45s var(--ease)}
@keyframes cd-tick{0%{transform:translateY(-6px);opacity:.3}100%{transform:none;opacity:1}}
.countdown.is-live .cd-label{color:var(--gold);font-weight:700}
.countdown.is-over .cd-unit{display:none}

.hello{color:var(--gold);font-weight:700;letter-spacing:.14em;font-size:14px;margin-bottom:12px}
h1{letter-spacing:.02em;line-height:1.15;font-weight:900}
.h1-line{display:block}
.h1-line:first-child{font-size:clamp(34px,3.6vw,52px);color:#f5f7ef;margin-bottom:8px}
.h1-line:last-child{font-size:clamp(30px,3vw,44px);color:#dfe6d4}
.handline{color:var(--gold)}
.num-big{font-size:clamp(72px,8.4vw,124px);line-height:.9;color:var(--gold);display:inline-block;vertical-align:-.08em;text-shadow:0 8px 40px #e6c35c33}
.intro{color:#b9c2b0;font-size:15px}

.hero-warranty{border-left-color:var(--gold-deep)}
.hero-warranty>span{color:var(--gold);font-size:44px}

.hero .button.red{background:var(--gold);color:#1b2216;position:relative;overflow:hidden;font-size:14px;font-weight:700}
.hero .button.red:hover{background:#f0d27a}
.hero .button.red:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff8c 50%,transparent 70%);transform:translateX(-120%);animation:shine 4.5s 1.5s infinite}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.button .arrow-icon,.text-link .arrow-icon,.offer-nav .arrow-icon{transition:transform .35s var(--ease)}
.button:hover .arrow-down{transform:rotate(90deg) translateX(4px)}
.button:hover .arrow-ne,.offer-nav a:hover .arrow-ne{transform:rotate(-45deg) translateX(4px)}
.button:hover .arrow-right,.text-link:hover .arrow-right{transform:translateX(4px)}
.text-link{transition:border-color .3s,color .3s}.text-link:hover{color:var(--gold);border-color:var(--gold)}

/* 輪播卡片 */
.hero-art{border-radius:14px;box-shadow:0 30px 80px #00000055;padding:22px 26px 14px}
.carousel-stage{border-radius:10px}
.carousel-heading>span{font-weight:700;color:#2a3324}
.carousel-heading b{font-family:var(--num);font-size:16px;color:#6d7765}
.carousel-slide img{transition:transform 6s ease-out}
.carousel-slide.active img{transform:scale(1.05)}
.hero-off strong{font-size:44px;color:var(--olive)}
.pop{animation:pop .5s var(--ease)}
@keyframes pop{0%{transform:scale(.8);opacity:.2}60%{transform:scale(1.08)}100%{transform:none;opacity:1}}

/* ---------- 跑馬燈 ---------- */
.ticker{background:var(--gold);color:#1b2216;overflow:hidden;white-space:nowrap;border-top:1px solid #00000010;border-bottom:1px solid #00000010}
.ticker-track{display:inline-flex;animation:ticker 32s linear infinite;padding:12px 0}
.ticker span{font-weight:900;font-size:15px;letter-spacing:.06em;padding:0 28px;position:relative}
.ticker span:after{content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;background:#1b2216;transform:translateY(-50%) rotate(45deg)}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- 三種省法 ---------- */
.trade-intro p{font-size:13px;color:var(--olive);font-weight:700;letter-spacing:.06em}
.trade-intro h2{font-size:clamp(26px,2.6vw,34px)}
.offer-nav>a{padding:18px 20px 18px 0;transition:transform .35s var(--ease)}
.offer-nav>a:hover{transform:translateY(-3px)}
.offer-nav b{font-size:15px;font-weight:700}
.offer-nav small{font-size:12px}
.offer-number{width:40px;height:40px;font-size:16px;font-weight:900;background:var(--olive);color:#f1f4ea}

/* ---------- 商品卡 ---------- */
.product{transition:transform .4s var(--ease)}
.product img{border-radius:12px;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.product:hover{transform:translateY(-6px)}
.product:hover img{transform:none;box-shadow:0 18px 40px #2b3a2626}
.product[aria-pressed=true] img{box-shadow:0 0 0 3px var(--olive),0 18px 40px #2b3a2626}
.product .select-dot{transition:transform .3s var(--ease)}
.product[aria-pressed=true] .select-dot{animation:pop .45s var(--ease)}
.product small,.kit-grid small{font-size:12px}
.trade-bar{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin-top:28px;box-shadow:0 10px 30px #2b3a260d}
.trade-bar strong{font-size:30px}
.trade-bar p b{font-size:34px}
.steps{font-size:14px}
.steps b{font-size:28px}

/* ---------- 滿額折 ---------- */
.warning{font-weight:700}
.tiers button{transition:padding .3s var(--ease),border-color .3s}
.tiers button:hover{padding-left:6px}
.tiers button.active strong{color:#1b2216}
.tiers button.active{background:linear-gradient(90deg,#e6c35c40,transparent)}
.calculator{border-radius:16px;box-shadow:0 20px 50px #2b3a2614}
.tier-meter{position:relative;height:8px;background:#e1e6d8;border-radius:8px;margin:2px 0 8px}
.tier-fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:8px;background:linear-gradient(90deg,var(--olive),var(--gold-deep));transition:width .6s var(--ease)}
.tier-meter i{position:absolute;top:-3px;width:2px;height:14px;background:#b9c2ad;transform:translateX(-1px)}
.tier-meter i.hit{background:var(--olive)}
.tier-scale{position:relative;height:18px;margin-bottom:20px}
.tier-scale span{position:absolute;white-space:nowrap;transform:translateX(-50%);font-size:11px;color:var(--muted);font-family:var(--zh)}
.tier-scale span:last-child{transform:translateX(-100%)}
.calc-result>span{font-size:13px;font-weight:700;color:var(--olive)}
.calc-result p{font-size:13px}

/* ---------- 四類 88 折 ---------- */
.kit-grid button{transition:transform .4s var(--ease)}
.kit-grid button:hover{transform:translateY(-6px)}
.kit-photo{border-radius:12px;transition:box-shadow .4s var(--ease),transform .4s var(--ease)}
.kit-grid button:hover .kit-photo{transform:none;box-shadow:0 18px 40px #2b3a2626}
.kit-grid button[aria-pressed=true] .kit-photo{box-shadow:0 0 0 3px var(--olive),0 18px 40px #2b3a2626}
.kit-grid button[aria-pressed=true] .kit-check{animation:pop .45s var(--ease)}
.kit-grid button>span:last-child{font-size:13px}
.kit-status{gap:24px;justify-content:flex-start}
.kit-status>div:nth-child(2){flex:1}
.kit-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:140px;flex-shrink:0}
.kit-meter i{height:10px;border-radius:3px;background:#dfe4d6;transition:background .35s var(--ease),transform .35s var(--ease)}
.kit-meter i.on{background:var(--olive);transform:scaleY(1.25)}
.kit-status.complete .kit-meter i{background:var(--gold-deep)}
.kit-status strong{font-size:20px;font-family:var(--zh)}
.kit-status.complete strong{color:var(--olive)}
.kit-status.complete{animation:celebrate .7s var(--ease)}
@keyframes celebrate{0%{transform:scale(.98)}40%{transform:scale(1.015)}100%{transform:none}}
.burst{position:fixed;pointer-events:none;z-index:70;width:8px;height:8px;border-radius:2px;animation:burst .9s var(--ease) forwards}
@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}

/* ---------- 神秘禮包 ---------- */
.mystery{border-radius:20px;background:radial-gradient(70% 90% at 50% 0,#2e3d2a 0,#1a221a 70%);position:relative;overflow:hidden}
.mystery h2{font-size:clamp(28px,3vw,40px)}
.mystery-num{color:var(--gold);font-size:1.5em;vertical-align:-.08em}
.mystery-participation{margin-top:10px}
#reveal{font-size:inherit;border:0;background:none;padding:10px 30px;margin:20px auto 10px}
#reveal:hover{background:none}
.gift{position:relative;display:block;width:130px;height:120px;margin:0 auto;animation:wiggle 2.6s ease-in-out infinite}
.gift-box{position:absolute;left:10px;right:10px;bottom:0;height:78px;background:var(--gold);border-radius:6px;box-shadow:inset 0 -8px 0 #0000001a}
.gift-box:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:18px;transform:translateX(-50%);background:#596b40}
.gift-lid{position:absolute;left:0;right:0;top:20px;height:28px;background:#f0d27a;border-radius:6px;z-index:1;transition:transform .7s var(--ease)}
.gift-lid:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:18px;transform:translateX(-50%);background:#6b7f4e}
.gift-lid:after{content:"";position:absolute;left:50%;top:-22px;width:46px;height:24px;transform:translateX(-50%);border:7px solid #6b7f4e;border-bottom:0;border-radius:24px 24px 0 0}
#reveal:hover .gift{animation:wiggle .5s ease-in-out infinite}
@keyframes wiggle{0%,80%,100%{transform:rotate(0)}85%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
#reveal small{font-size:13px;color:#b9c9a6;margin-top:18px}
#reveal.opened{font-size:inherit;padding:0}
#reveal.opened .gift{animation:none;transform:scale(.55);height:70px;margin-bottom:-6px}
#reveal.opened .gift-lid{transform:translate(40px,-40px) rotate(28deg)}
#secret:not([hidden]){animation:secret-in .7s var(--ease)}
@keyframes secret-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.mystery .kit-grid>div{border-radius:12px}
.secret-price strong{font-size:58px;color:var(--gold)}
.secret-price b{font-size:30px;color:var(--gold)}

/* ---------- FAQ / 結尾 ---------- */
summary{font-size:16px;font-weight:700;transition:color .2s}
summary:hover{color:var(--olive)}
summary span{transition:transform .3s var(--ease);font-size:20px}
details p{font-size:14px;line-height:2}
.end-banner{background:#141a15;position:relative;overflow:hidden}
.end-banner p{font-family:var(--num);font-size:20px;letter-spacing:.2em;color:var(--gold)}
.end-banner h2{font-size:clamp(34px,4vw,52px)}
.end-banner .button{background:var(--gold);font-weight:700}
.warranty-tabs button{border-radius:14px}
.line-button{border-radius:999px;padding:16px 26px;font-weight:700;background:#06c755;color:#fff}
.line-button:hover{background:#05b04b}
.line-word{border-color:#ffffffaa;color:#fff}

/* ---------- 捲動浮現（依序） ---------- */
.rv{opacity:0;transform:translateY(32px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*90ms)}
.rv.on{opacity:1;transform:none}
.hero .rv{transition-duration:1s}

/* ---------- 手機 ---------- */
@media(max-width:700px){
  .countdown{margin-bottom:26px;gap:4px}
  .cd-label{width:100%;margin-bottom:4px}
  .cd-unit b{font-size:26px;min-width:40px}
  .h1-line:first-child{font-size:36px}
  .h1-line:last-child{font-size:28px}
  .num-big{font-size:84px}
  .hero:before{font-size:280px;bottom:-6%}
  .ticker span{font-size:13px;padding:0 20px}
  .offer-nav strong{font-size:28px}
  .product h3{font-size:26px}
  .discount b{font-size:26px}
  .trade-bar{padding:16px}
  .trade-bar strong{font-size:26px}
  .trade-bar p b{font-size:28px}
  .steps{font-size:12px}
  .calc-result>strong{font-size:64px}
  .kit-status{display:flex;flex-wrap:wrap}
  .kit-meter{width:100%}
  .kit-status .button{width:100%;margin-top:4px}
  .secret-price strong{font-size:44px}
  .gift{transform:scale(.85)}
}

@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none}
  .ticker-track,.gift,.hero .button.red:after{animation:none}
}

/* ==========================================================
   手機專屬體驗（v2）
   ========================================================== */
h1,h2,h3{text-wrap:balance}
.m-br{display:none}
.story-cap-m{display:none}

/* 觸控裝置：取消會「卡住」的懸停，改成按壓回饋 */
@media(hover:none){
  .product:hover,.kit-grid button:hover,.offer-nav>a:hover,.warranty-tabs button:hover{transform:none}
  .product:hover img,.kit-grid button:hover .kit-photo{box-shadow:none}
  .product[aria-pressed=true] img,.kit-grid button[aria-pressed=true] .kit-photo{box-shadow:0 0 0 3px var(--olive),0 14px 30px #2b3a2626}
  .tiers button:hover{padding-left:0}
  .product,.kit-grid button,.offer-nav>a,.tiers button,.button,.warranty-tabs button,#reveal,.mobile-dock a,.line-button,summary{transition:transform .25s var(--ease)}
  .product:active,.kit-grid button:active,.offer-nav>a:active,.tiers button:active,.warranty-tabs button:active{transform:scale(.96)}
  .button:active,.mobile-dock a:active,.line-button:active{transform:scale(.95)}
  #reveal:active .gift{transform:scale(.9)}
}

@media(max-width:800px){
  /* 精簡頂部：一列 logo，選單變成可滑動的膠囊，往下滑自動收起 */
  header{height:auto;min-height:0;padding:10px 5% 0;transition:transform .45s var(--ease);will-change:transform}
  header.tuck{transform:translateY(-100%)}
  .brand,.brand img{width:100px}.brand{height:40px}.brand img{height:70px}
  .shop-link{font-size:12px;border:1px solid #ffffff2e;border-radius:999px;padding:5px 12px}
  header nav{padding:10px 0 12px;gap:8px;border-top:0;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  header nav::-webkit-scrollbar{display:none}
  header nav>a{background:#ffffff10;border:1px solid #ffffff18;border-radius:999px;padding:6px 13px 6px 7px;font-size:13px}
  header nav>a:last-child{padding-left:13px;margin-right:30px}
  header nav>a.here{background:var(--gold);color:#1b2216;border-color:var(--gold)}
  header nav>a.here .nav-number{border-color:#1b2216;color:#1b2216}
  html{scroll-padding-top:20px}
}

@media(max-width:700px){
  .m-br{display:inline}
  .section{padding:64px 0}
  .section-head h2{font-size:32px}

  /* Hero */
  .hero{padding:28px 0 40px}
  .hero-copy>.hello{margin-bottom:6px}
  .hero-links{flex-direction:column;align-items:stretch;gap:14px}
  .hero-links .button{width:100%;padding:16px;font-size:15px;border-radius:12px}
  .hero-links .text-link{align-self:center}
  .hero-art{border-radius:20px;padding:16px 16px 10px;margin-top:4px}
  .carousel-stage{height:260px;border-radius:14px}
  .carousel-stage:after{content:"← 左右滑動 →";position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:11px;color:#6d7765;background:#ffffffcc;padding:3px 10px;border-radius:999px;animation:hint-fade 4s 1.5s forwards;pointer-events:none}
  @keyframes hint-fade{0%,70%{opacity:1}100%{opacity:0}}
  .carousel-stage.dragging .carousel-slide{transition:none}
  .hero-off strong{font-size:40px}

  /* 三種省法：橫向滑動卡片 */
  .offer-nav{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 5% 18px;margin:20px 0 0;width:100%;scrollbar-width:none;border:0}
  .offer-nav::-webkit-scrollbar{display:none}
  .offer-nav>a,.offer-nav>a:last-child{flex:0 0 74%;scroll-snap-align:center;flex-direction:column;align-items:flex-start;gap:14px;padding:20px;border:0;border-radius:18px;background:#fff;box-shadow:0 8px 24px #2b3a2612;min-height:150px;position:relative}
  .offer-nav>a:first-child{flex:0 0 74%;background:var(--night);color:#f1f4ea}
  .offer-nav>a:first-child small{color:#a9b59e}
  .offer-nav>a:first-child strong{color:var(--gold)}
  .offer-nav>a:first-child .offer-number{background:var(--gold);color:#1b2216}
  .offer-nav>a>span:last-child{position:absolute;right:18px;top:20px}
  .offer-nav strong{font-size:40px}
  .offer-rule{text-align:center}

  /* 商品、四類：橫向滑卡 + 頁碼點 */
  .product-grid,#kit{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -5.6%;padding:6px 5.6% 8px;scrollbar-width:none}
  .product-grid::-webkit-scrollbar,#kit::-webkit-scrollbar{display:none}
  .product-grid>.product,#kit>button{flex:0 0 72%;scroll-snap-align:center;border:0}
  .product img,#kit .kit-photo{height:250px;border-radius:18px}
  .product h3{font-size:30px}
  .snap-dots{display:flex;justify-content:center;gap:6px;margin:14px 0 4px}
  .snap-dots i{width:6px;height:6px;border-radius:6px;background:#c9d0bf;transition:width .35s var(--ease),background .35s}
  .snap-dots i.on{width:22px;background:var(--olive)}
  .trade-bar{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));z-index:20;border-radius:18px;margin-top:16px;padding:12px 14px;box-shadow:0 12px 30px #2b3a2626;flex-wrap:nowrap;gap:10px}
  .trade-bar>div span,.trade-bar p{font-size:11px}
  .trade-bar strong{font-size:22px}
  .trade-bar p{margin:0;line-height:1.3}
  .trade-bar p b{font-size:24px;display:block;margin:0}
  .trade-bar .button{width:auto;padding:12px 14px;border-radius:12px;gap:8px;white-space:nowrap}
  .steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;border:0}
  .steps>span{display:none}
  .steps p{background:#fff;border-radius:14px;padding:12px;margin:0}

  /* 換新動畫：完整場景 + 旁白 */
  .trade-story{border-radius:18px}
  .story-top{flex-wrap:wrap;min-height:0}
  .story-lead{display:none}
  .story-cap-m{display:grid;flex:1;font-size:15px;color:#3f5530;min-height:24px}
  .story-cap-m b{grid-area:1/1;opacity:0}
  .story-cap-m .caption-one{animation:caption-first 12s infinite}
  .story-cap-m .caption-two{animation:caption-second 12s infinite}
  .story-cap-m .caption-three{animation:caption-third 12s infinite}
  .trade-story.is-paused .story-cap-m b{animation-play-state:paused}

  /* 滿額級距：一列一級，像價目表 */
  .tiers{grid-template-columns:1fr;gap:0}
  .tiers button{padding:14px 4px;font-size:14px}
  .tiers strong{font-size:26px}
  .tiers .top-tier strong{font-size:34px}
  .calculator{border-radius:20px}

  .kit-status{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));z-index:20;background:#fff;border:0;border-radius:18px;padding:14px 16px;margin-top:16px;box-shadow:0 12px 30px #2b3a2626;gap:10px}
  .kit-status strong{font-size:18px}
  .kit-status p{font-size:12px;margin:2px 0 0}
  .kit-status .button{padding:13px;border-radius:12px}

  .mystery{border-radius:24px;width:90%;padding:44px 18px}
  .mystery .kit-grid{grid-template-columns:1fr 1fr;gap:10px}

  .warranty-tabs button{border-radius:16px}
  .line-contact h2{font-size:24px}

  /* 底部按鈕：毛玻璃膠囊 */
  .mobile-dock{background:#f5f6f1cc;-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 -1px 0 #2b3a2614;padding:10px 14px max(10px,env(safe-area-inset-bottom));transition:transform .45s var(--ease)}
  .mobile-dock a{border-radius:999px;padding:13px;font-weight:700;font-size:14px}
  .mobile-dock a:last-child{background:var(--night);border-color:var(--night)}
  .mobile-dock.away{transform:translateY(110%)}
}
@media(prefers-reduced-motion:reduce){.story-cap-m .caption-three{opacity:1}.carousel-stage:after{display:none}}
h1{text-wrap:wrap}
@media(max-width:700px){
  .h1-line:last-child{white-space:nowrap}
  .h1-line:last-child .handline{display:block;white-space:nowrap}
  .trade-bar,.kit-status{position:static;box-shadow:0 8px 24px #2b3a2612}
}

/* ==========================================================
   換新動畫 v3：場景重繪 + 程式控制時間軸
   ========================================================== */
.trade-story{background:linear-gradient(180deg,#eef3e6 0,#e6eddb 100%);border:1px solid #dbe4cf;border-radius:22px;position:relative}
.story-top{padding:18px 22px 0;align-items:center}
.story-lead{display:none}
.story-cap-m{display:grid!important;flex:1;font-size:17px;font-weight:700;color:#2f4426;min-height:28px}
.story-cap-m b,.story-cap-m .cap{grid-area:1/1;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);animation:none!important}
.story-cap-m .cap.on{opacity:1;transform:none}
.story-top button{border-radius:999px;padding:6px 14px;font-size:12px;background:#ffffffaa}
.scene2{display:block;width:100%;height:auto;aspect-ratio:1000/340}
.scene2 text{font-family:var(--zh)}
.scene2 .num{font-family:var(--num)}
.story-bottom{gap:10px!important;padding:6px 18px 20px;min-height:0}
.story-bottom>span+span:before{display:none!important}
.sb-step{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#8a9a7a;background:#ffffff80;border:1px solid #d5dfc8;border-radius:999px;padding:7px 14px;transition:all .45s var(--ease)}
.sb-step.on{background:#2f4426;color:#fff;border-color:#2f4426;transform:translateY(-2px);box-shadow:0 8px 18px #2f442633}
.sb-step.done{color:#4a6037;border-color:#a7bb8c}
.warranty-tick{animation:none!important;opacity:1!important;transform:none!important}
.sb-step.on .warranty-tick{background:var(--gold);color:#1b2216}
@media(max-width:700px){
  .scene2{aspect-ratio:680/340}
  .story-top{padding:14px 14px 0}
  .story-cap-m{font-size:15px}
  .sb-step{font-size:12px;padding:6px 10px}
  .story-bottom{gap:6px!important;padding:4px 10px 16px}
}

/* ==========================================================
   導覽列：「找附近活動店家」主按鈕
   ========================================================== */
.head-actions{display:flex;align-items:center;gap:18px}
.stores-cta{position:relative;display:inline-flex;align-items:center;gap:7px;background:var(--gold);color:#141a15;font-weight:900;font-size:14px;letter-spacing:.04em;padding:9px 10px 9px 15px;border-radius:999px;box-shadow:0 6px 20px #e6c35c40;transition:transform .3s var(--ease),box-shadow .3s,background .3s;white-space:nowrap}
.stores-cta>span:not(.cta-ring){position:relative}
.stores-cta:hover{transform:translateY(-2px);background:#f0d27a;box-shadow:0 10px 28px #e6c35c66}
.stores-cta:active{transform:scale(.95)}
.cta-pin{position:relative;flex-shrink:0;animation:pin-hop 3.2s var(--ease) infinite}
@keyframes pin-hop{0%,78%,100%{transform:none}84%{transform:translateY(-5px)}90%{transform:none}94%{transform:translateY(-2px)}}
.cta-count{position:relative;font:700 13px/1 var(--num);background:#141a15;color:var(--gold);border-radius:999px;min-width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;padding:0 7px;margin-left:3px}
.cta-ring{position:absolute;inset:0;border-radius:inherit;border:2px solid var(--gold);animation:cta-ring 2.6s ease-out infinite;pointer-events:none}
@keyframes cta-ring{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.18,1.45);opacity:0}}
.stores-cta[aria-current=page]{background:#ffffff14;color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold)}
.stores-cta[aria-current=page] .cta-ring,.stores-cta[aria-current=page] .cta-pin{animation:none;display:none}
.stores-cta[aria-current=page] .cta-count{background:var(--gold);color:#141a15}
.mobile-dock .dock-stores{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--gold)!important;color:#141a15!important;border-color:var(--gold)!important;font-weight:900}
.mobile-dock .dock-stores+a{background:#fff!important;color:#2a3324!important;border-color:#cdd6c1!important}
@media(max-width:1100px){.head-actions{gap:12px}.stores-cta{font-size:13px;padding:8px 8px 8px 12px}}
@media(max-width:800px){
  .head-actions{order:1;gap:8px}
  .stores-cta{font-size:13px;padding:6px 6px 6px 11px}
  .cta-count{height:22px;min-width:22px;font-size:12px}
}
@media(max-width:420px){.cta-long{display:none}.shop-link{padding:5px 10px}}
@media(prefers-reduced-motion:reduce){.cta-ring,.cta-pin{animation:none}}