/* ============================================================
   Acer Redesign — 產品詳細頁 style.css
   Design Tokens 區塊與 laptops-list.html 逐字相同（同步維護）
   ============================================================ */
:root{
  /* palette */
  --green-500:#83B81A;   /* 品牌綠，僅用於大型 UI 與圖形 */
  --green-600:#6FA014;   /* 3.13:1，用於邊框、focus ring */
  --green-700:#4A7D15;   /* 4.96:1，通過 AA，淺底綠色文字用這個 */
  --gray-900:#0D0D0D;
  --gray-600:#555555;
  --gray-400:#888888;
  --gray-200:#E8E8E8;
  --gray-50:#F9F9F9;

  /* semantic */
  --action:var(--green-500);
  --action-text:var(--green-700);
  --text-action:var(--green-700);
  --text-primary:var(--gray-900);
  --text-secondary:#888888;
  --text-tertiary:#999999;
  --text-muted:#AAAAAA;
  --text-faint:#BBBBBB;
  --ink-strong:#333333;
  --control-border:#CCCCCC;
  --surface:#FFFFFF;
  --surface-subtle:var(--gray-50);
  --border:var(--gray-200);
  --border-strong:#DDDDDD;
  --border-faint:#F0F0F0;
  --divider:#F5F5F5;
  --track:#E0E0E0;
  --chassis-ink:#1C1C1C;
  --data-highlight:var(--green-500);
  --compare-better-bg:#EAF3DE;
  --pill-green-bg:rgba(131,184,26,.1);
  --avatar-green-bg:#E8F0E0;
  --star:#E6A800;
  --footer-bg:#0D0D0D;
  --on-dark-strong:rgba(255,255,255,.55);
  --on-dark-mid:rgba(255,255,255,.38);
  --on-dark-label:rgba(255,255,255,.35);
  --on-dark-faint:rgba(255,255,255,.28);
  --on-dark-rule:rgba(255,255,255,.08);

  /* spacing — 8pt grid */
  --space-1:4px;   --space-2:8px;   --space-3:12px;  --space-4:16px;
  --space-6:24px;  --space-8:32px;  --space-10:40px; --space-12:48px;
  --space-16:64px; --space-24:96px; --space-32:128px;

  /* motion */
  --duration-instant:120ms;
  --duration-fast:240ms;
  --duration-data:800ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);

  /* 字族 */
  --font:'Inter','Noto Sans TC',sans-serif;
  --font-ui:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --font-data:'Inter',ui-sans-serif,system-ui,sans-serif;

  /* 字級 — Desktop */
  --fs-display:56px; --fs-h1:40px; --fs-h2:28px;  --fs-h3:22px;
  --fs-h4:18px;      --fs-body:16px; --fs-body-sm:14px;
  --fs-label:13px;   --fs-caption:12px; --fs-micro:11px;

  /* 字重 */
  --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-black:900;

  /* 行高 */
  --lh-tight:1.10; --lh-snug:1.25; --lh-base:1.55; --lh-compact:1.45;
}

/* Mobile 字級（非 token 區塊本體） */
@media (max-width:768px){
  :root{
    --fs-display:36px; --fs-h1:28px; --fs-h2:22px; --fs-h3:18px;
    --fs-body:14px; --fs-body-sm:13px; --fs-label:12px; --fs-caption:10px;
  }
}

/* ============ base ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--font-ui);
  color:var(--text-primary);
  background:var(--surface);
  line-height:var(--lh-compact);
}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--green-600);outline-offset:2px;border-radius:4px}
.spec-value,.price,.model-no,[data-numeric]{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
}
.d-only{display:inline}
.m-only{display:none}

/* ============ 範圍聲明（與列表頁一致） ============ */
.scope-banner{
  position:sticky;top:0;z-index:60;
  background:var(--surface-subtle);
  border-bottom:1px solid var(--border);
  padding:7px 52px;
  font-size:var(--fs-caption);color:var(--text-secondary);
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;
}
.scope-banner a{color:var(--text-action);font-weight:var(--fw-medium);text-decoration:underline;text-underline-offset:2px}

/* ============ 機型提示（?model= 非 swift-go-14-ai 或缺省） ============ */
.model-notice{
  background:var(--compare-better-bg);
  border-bottom:1px solid var(--border);
  padding:9px 52px;
  font-size:var(--fs-label);color:var(--text-primary);
  display:flex;gap:8px;align-items:center;
}
.model-notice[hidden]{display:none}
.model-notice .dot{color:var(--text-action);font-weight:var(--fw-bold)}

/* ============ nav（靜態一條，無子品牌） ============ */
.nav{
  background:var(--surface);border-bottom:1px solid var(--border);
  height:72px;display:flex;align-items:center;
  padding:0 52px;
}
.nav-back{display:none}
.nav-logo{height:27px;width:112px;flex:none}
.nav-logo img{height:100%;width:100%;object-fit:contain}
.nav-links{display:flex;gap:32px;align-items:center;margin-left:52px;flex:1;min-width:0}
.nav-link{font-weight:var(--fw-medium);font-size:var(--fs-body-sm);color:var(--text-secondary);white-space:nowrap;cursor:default}
a.nav-link{cursor:pointer;text-decoration:none}
.nav-link.is-active{color:var(--text-primary);position:relative;padding-bottom:3px}
.nav-link.is-active::after{content:"";position:absolute;left:0;bottom:-2px;width:28px;height:2px;border-radius:1px;background:var(--green-500)}
.nav-icons{display:flex;gap:22px;align-items:center}
.nav-icon{width:20px;height:20px;color:var(--ink-strong);cursor:default}
.nav-icon svg{width:100%;height:100%;display:block}

/* ============ breadcrumb ============ */
.breadcrumb{
  background:var(--surface);border-bottom:1px solid var(--border);
  height:40px;display:flex;align-items:center;gap:8px;
  padding:0 52px;font-size:var(--fs-caption);white-space:nowrap;overflow-x:auto;
}
.breadcrumb a{color:var(--text-secondary);text-decoration:none}
.breadcrumb a:hover{color:var(--text-primary);text-decoration:underline}
.breadcrumb .sep{color:var(--control-border)}
.breadcrumb .cur{color:var(--text-primary);font-weight:var(--fw-medium)}

/* ============ Zone 1a Hero ============ */
.hero{display:flex;align-items:stretch;background:var(--surface)}
.hero-copy{width:600px;flex:none;padding:64px 52px;display:flex;flex-direction:column}
.hero-tags{display:flex;gap:8px;align-items:center}
.pill-series{background:var(--pill-green-bg);color:var(--text-action);border-radius:20px;padding:3px 8px;font-size:var(--fs-micro);font-weight:var(--fw-medium)}
.hero-tags .yr{font-size:var(--fs-micro);font-weight:var(--fw-medium);color:var(--text-secondary)}
.hero h1{
  margin-top:20px;
  font-family:var(--font-data);font-weight:var(--fw-black);
  font-size:var(--fs-display);line-height:var(--lh-tight);
}
.hero-rating{margin-top:16px;font-size:var(--fs-caption);color:var(--star);white-space:pre}
.hero-chips{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.hero-chip{background:var(--divider);border-radius:20px;padding:5px 10px;font-size:var(--fs-micro);font-weight:var(--fw-medium);color:var(--gray-600);white-space:nowrap}
.hero-lede{margin-top:16px;font-size:var(--fs-body);line-height:var(--lh-base);color:var(--gray-600);max-width:496px}
.hero-rule{height:1px;background:var(--border-faint);margin:20px 0;max-width:496px}
.hero-price-label{font-size:var(--fs-caption);color:var(--text-secondary)}
.hero-price{margin-top:6px;font-weight:var(--fw-black);font-size:var(--fs-h1);line-height:var(--lh-tight)}
.hero-ctas{margin-top:16px;display:flex;gap:10px}
.btn-primary{
  background:var(--action);color:#fff;border-radius:8px;padding:15px 36px;
  font-weight:var(--fw-bold);font-size:var(--fs-body-sm);white-space:nowrap;
}
.btn-primary:hover{background:var(--green-600)}
.btn-secondary{
  background:var(--surface);border:1.5px solid var(--border-strong);border-radius:8px;
  padding:14px 20px;font-weight:var(--fw-medium);font-size:var(--fs-label);color:var(--gray-600);white-space:nowrap;
}
.btn-secondary:hover{border-color:var(--text-tertiary);color:var(--text-primary)}
.hero-img{flex:1;min-width:0;background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:contain;max-height:560px}

/* ============ Zone 1b 敘事 ============ */
.story-row{display:flex;align-items:stretch;min-height:400px}
.story-media{width:50%;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden}
.story-media img{width:100%;height:100%;object-fit:cover}
.story-text{width:50%;flex:none;padding:64px;display:flex;flex-direction:column;justify-content:center}
.story-kicker{font-size:var(--fs-micro);font-weight:var(--fw-medium);color:var(--text-action)}
.story-title{
  margin-top:16px;font-weight:var(--fw-black);
  font-size:var(--fs-h1);line-height:var(--lh-tight);
}
.story-body{margin-top:16px;font-size:var(--fs-body);line-height:var(--lh-base);color:var(--gray-600);max-width:592px}
.story-link{
  margin-top:20px;font-size:var(--fs-caption);font-weight:var(--fw-medium);
  color:var(--text-action);text-decoration:none;align-self:flex-start;
}
.story-link:hover{text-decoration:underline;text-underline-offset:2px}
#story-1 .story-text{background:var(--surface-subtle)}
#story-2 .story-text,#story-2 .story-media{background:var(--surface)}
#story-3{background:var(--footer-bg)}
#story-3 .story-title,#story-3 .story-body{color:#fff}
#story-3 .story-kicker,#story-3 .story-link{color:var(--data-highlight)} /* 深底改用 green-500：7.9:1，green-700 於深底僅 3.8:1 */

/* 進場動畫（IntersectionObserver 掛 .reveal；JS 未載入或 reduced-motion 時不套初始位移） */
.js-anim .reveal{opacity:0;transform:translateY(24px)}
.js-anim .reveal.is-in{
  opacity:1;transform:none;
  transition:opacity var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);
}
.js-anim .reveal.is-in.reveal-late{transition-delay:120ms}

/* ============ Zone 2 Spec Viz ============ */
.spec-viz{
  background:var(--surface-subtle);
  padding:64px 52px 48px;
  display:flex;flex-direction:column;
}
.spec-viz.viz-pinned{min-height:100vh;justify-content:center;position:relative}
.viz-head{text-align:center}
.viz-kicker{font-size:var(--fs-micro);font-weight:var(--fw-medium);color:var(--text-action)}
.viz-title{margin-top:10px;font-weight:var(--fw-black);font-size:var(--fs-h1);line-height:var(--lh-tight)}
.viz-body{display:flex;gap:72px;margin-top:48px;align-items:flex-start}
.viz-stage{flex:1;min-width:0}
.viz-pinned .viz-stage{position:relative;height:440px}
.viz-module{background:none}
.viz-pinned .viz-module{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.spec-viz:not(.viz-pinned) .viz-module + .viz-module{margin-top:56px}
.viz-module-title{font-family:var(--font-data);font-weight:var(--fw-black);font-size:var(--fs-h2);line-height:var(--lh-snug)}
.viz-module-title .zh{font-family:var(--font-ui)}

/* 重量對比 bars */
.wbar-group{margin-top:28px;display:flex;flex-direction:column;gap:18px}
.wbar-row .wbar-head{display:flex;align-items:baseline;gap:8px}
.wbar-name{font-size:var(--fs-label);color:var(--gray-600)}
.wbar-row.is-hero .wbar-name{font-weight:var(--fw-bold);color:var(--text-primary)}
.wbar-val{margin-left:auto;font-weight:var(--fw-bold);font-size:var(--fs-caption);color:var(--text-primary)}
.wbar-track{margin-top:8px;height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.wbar-fill{height:100%;border-radius:3px;background:var(--control-border);transform-origin:left center}
.wbar-row.is-hero .wbar-fill{background:var(--data-highlight)}
.wbar-diff{margin-top:2px;font-size:var(--fs-caption);color:var(--text-action);font-weight:var(--fw-medium)}
.axis-ticks{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--font-data);font-size:var(--fs-micro);color:var(--text-faint);font-variant-numeric:tabular-nums}

/* 電池續航 timeline */
.battery-wrap{margin-top:28px}
.battery-head{display:flex;align-items:baseline;gap:10px}
.battery-big{font-weight:var(--fw-black);font-size:var(--fs-h2);color:var(--text-primary)}
.battery-unit{font-size:var(--fs-label);color:var(--gray-600)}
.battery-flag{margin-left:auto;font-size:var(--fs-label);font-weight:var(--fw-bold);color:var(--text-action)}
.battery-axis{position:relative;margin-top:16px;height:12px;border-radius:6px;background:var(--track);overflow:visible}
.battery-fill{position:absolute;left:0;top:0;height:100%;border-radius:6px;background:var(--data-highlight);transform-origin:left center}
.battery-marker{position:absolute;top:-8px;bottom:-8px;width:0;border-left:2px dashed var(--text-secondary)}
.battery-marker-label{position:absolute;top:calc(100% + 12px);transform:translateX(-50%);font-size:var(--fs-micro);color:var(--text-secondary);white-space:nowrap}
.battery-ticks{display:flex;justify-content:space-between;margin-top:34px;font-family:var(--font-data);font-size:var(--fs-micro);color:var(--text-faint);font-variant-numeric:tabular-nums}

/* 連接埠側視圖 */
.ports-wrap{margin-top:28px;display:flex;flex-direction:column;gap:20px}
.port-card{background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;padding:18px 24px 14px}
.port-card-title{font-weight:var(--fw-bold);font-size:var(--fs-body-sm);color:var(--text-primary)}
.port-card-sub{margin-top:2px;font-family:var(--font-data);font-size:var(--fs-micro);color:var(--text-secondary)}
.port-svg{width:100%;height:auto;margin-top:12px;display:block}
.port-svg .chassis{fill:var(--chassis-ink)}
.port-svg .port-cut{fill:var(--gray-900);stroke:var(--data-highlight);stroke-width:1.5}
.port-svg .leader{stroke:var(--border-strong);stroke-width:1}
.port-svg .port-name{font-family:var(--font-data);font-size:11px;font-weight:500;fill:var(--text-primary)}
.port-svg .port-spec{font-family:var(--font-data);font-size:11px;fill:var(--text-secondary)}
.port-svg .port{cursor:pointer;outline:none}
.port-svg .port.is-active .port-cut{stroke-width:3}
.port-svg .port.is-active .port-name{fill:var(--text-action);font-weight:700}
.port-svg.has-active .port:not(.is-active){opacity:.35}
.port-svg .port:focus-visible .port-cut{stroke-width:3}
.port-caption{margin-top:10px;font-family:var(--font-data);font-size:var(--fs-micro);color:var(--text-faint);text-align:right}
.port-touch-label{
  margin-top:4px;min-height:20px;
  font-size:var(--fs-label);color:var(--text-primary);font-weight:var(--fw-medium);
}
.port-touch-label:empty{display:none}

/* 右欄：模組說明 + 四張數據卡 */
.viz-side{width:570px;flex:none}
.viz-descs{position:relative;min-height:88px}
.viz-desc{font-size:var(--fs-h4);line-height:var(--lh-base);color:var(--gray-600)}
.viz-pinned .viz-desc{position:absolute;inset:0}
.spec-viz:not(.viz-pinned) .viz-desc + .viz-desc{margin-top:12px}
.viz-cards{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.viz-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px 24px}
.viz-card .n{font-weight:var(--fw-black);font-size:var(--fs-h2);line-height:var(--lh-snug);color:var(--text-action)} /* Figma 為 green-500，依 §4 硬規則文字改 green-700 */
.viz-card .l{margin-top:4px;font-size:var(--fs-caption);color:var(--text-secondary)}
.viz-skip{
  position:absolute;right:52px;bottom:24px;
  font-size:var(--fs-caption);color:var(--text-secondary);text-decoration:none;
  display:none;
}
.viz-skip:hover{color:var(--text-primary);text-decoration:underline}
.viz-pinned .viz-skip{display:block}

/* ============ Zone 3 規格表 ============ */
.spec-table{background:var(--surface);border-top:1px solid var(--border);padding:64px 52px}
.section-title{font-weight:var(--fw-black);font-size:var(--fs-h2);line-height:var(--lh-snug)}
.spec-rows{margin-top:32px}
.spec-row{display:flex;border-bottom:1px solid var(--divider)}
.spec-row:first-child{border-top:1px solid var(--divider)}
.spec-row dt{width:240px;flex:none;padding:14px 10px;font-size:var(--fs-label);color:var(--text-secondary);font-weight:var(--fw-regular)}
.spec-row dd{flex:1;min-width:0;padding:14px 0;font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-primary)}

/* ============ Zone 4 評測聚合 ============ */
.reviews{background:var(--surface-subtle);border-top:1px solid var(--border);padding:64px 52px}
.reviews-head{display:flex;gap:24px;align-items:baseline;flex-wrap:wrap}
.reviews-score{font-weight:var(--fw-black);font-size:var(--fs-display);line-height:var(--lh-tight);color:var(--text-action)} /* Figma 為 green-500，依 §4 硬規則文字改 green-700 */
.reviews-stars{font-size:var(--fs-body-sm);color:var(--star)}
.reviews-count{font-size:var(--fs-caption);color:var(--text-muted)}
.reviews-grid{margin-top:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.review-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px}
.review-src{display:flex;gap:8px;align-items:center}
.review-avatar{
  width:32px;height:32px;border-radius:16px;background:var(--avatar-green-bg);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-data);font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--text-action);
}
.review-name{font-family:var(--font-data);font-size:var(--fs-caption);font-weight:var(--fw-bold);color:var(--text-primary)}
.review-stars{font-family:var(--font-data);font-size:var(--fs-micro);color:var(--text-muted);white-space:pre}
.review-quote{font-size:var(--fs-label);line-height:var(--lh-compact);color:var(--gray-600)}

/* ============ Zone 5 購買 ============ */
.purchase{display:flex;align-items:stretch;background:var(--surface);border-top:1px solid var(--border)}
.purchase-col{flex:1;min-width:0;padding:32px 40px;border-right:1px solid var(--border)}
.purchase-col:last-child{border-right:0}
.purchase-col.is-store{background:var(--surface-subtle)}
.purchase-kicker{font-size:var(--fs-micro);font-weight:var(--fw-bold);color:var(--text-action)}
.purchase-title{margin-top:12px;font-weight:var(--fw-bold);font-size:var(--fs-body);line-height:var(--lh-base)}
.purchase-desc{margin-top:10px;font-size:var(--fs-label);color:var(--gray-600);max-width:300px}
.purchase-cta{
  margin-top:16px;background:var(--action);color:#fff;border-radius:8px;
  padding:12px 24px;font-weight:var(--fw-bold);font-size:var(--fs-label);
}
.purchase-cta:hover{background:var(--green-600)}
.warranty-opt{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:0;margin-top:12px}
.warranty-opt:first-of-type{margin-top:12px}
.warranty-radio{
  width:14px;height:14px;border-radius:7px;flex:none;margin-top:2px;
  border:2px solid var(--control-border);background:var(--surface);
}
.warranty-opt[aria-checked="true"] .warranty-radio{background:var(--green-500);border-color:var(--green-500)}
.warranty-name{font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--text-primary)}
.warranty-note{margin-top:3px;font-size:var(--fs-micro);color:var(--text-muted)}
.retailer-row{display:flex;align-items:center;border-bottom:1px solid var(--divider);padding:8px 0}
.retailer-row:first-of-type{margin-top:12px;border-top:1px solid var(--divider)}
.retailer-name{flex:1;font-size:var(--fs-label);font-weight:var(--fw-medium);color:var(--ink-strong)}
.retailer-stock{font-size:var(--fs-caption);color:var(--text-action)}

/* ============ Zone 6 FAQ ============ */
.faq{background:var(--surface-subtle);border-top:1px solid var(--border);padding:64px 52px}
.faq-inner{max-width:800px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:20px 0;text-align:left;
  font-size:var(--fs-body-sm);font-weight:var(--fw-medium);color:var(--text-primary);
}
.faq-q .chev{
  margin-left:auto;font-family:var(--font-data);font-size:var(--fs-h3);color:var(--text-secondary);
  transition:transform var(--duration-fast) var(--ease-out);line-height:1;
}
.faq-q[aria-expanded="true"] .chev{transform:rotate(90deg)}
.faq-a{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows var(--duration-fast) var(--ease-out);
}
.faq-a>div{overflow:hidden}
.faq-q[aria-expanded="true"]+.faq-a{grid-template-rows:1fr}
.faq-a p{padding:0 0 20px;font-size:var(--fs-body-sm);line-height:var(--lh-compact);color:var(--gray-600)}

/* ============ footer ============ */
.footer{background:var(--footer-bg);padding:60px 52px 32px;color:#fff}
.footer-cols{display:flex;gap:48px}
.footer-col{flex:1;min-width:0}
.footer-logo{height:24px;width:99px}
.footer-logo img{height:100%;width:100%;object-fit:contain}
.footer-about{margin-top:16px;font-size:var(--fs-label);color:var(--on-dark-mid);max-width:260px}
.footer-h{font-weight:var(--fw-bold);font-size:var(--fs-micro);color:var(--on-dark-label);margin-bottom:18px}
.footer-links{display:flex;flex-direction:column;gap:11px}
.footer-links span{font-size:var(--fs-label);color:var(--on-dark-strong);cursor:default}
.footer-rule{height:1px;background:var(--on-dark-rule);margin:48px 0 24px}
.footer-disclaimer{font-size:var(--fs-caption);color:var(--on-dark-mid);line-height:var(--lh-base)}
.footer-disclaimer p+p{margin-top:2px}
.footer-base{display:flex;align-items:center;margin-top:24px;font-size:var(--fs-caption);color:var(--on-dark-faint)}
.footer-base .spacer{flex:1}
.footer-base .legal{display:flex;gap:24px}
.footer-base .legal span{cursor:default}

/* ============ Sticky Buy Bar ============ */
.sticky-buy{
  position:fixed;left:0;right:0;bottom:0;z-index:999;
  background:var(--surface);border-top:1px solid var(--border);
  box-shadow:0 -4px 16px rgba(0,0,0,.08);
  min-height:64px;display:flex;align-items:center;gap:24px;
  padding:9px 52px;
  transform:translateY(110%);visibility:hidden;
  transition:transform var(--duration-fast) var(--ease-out),visibility var(--duration-fast);
}
.sticky-buy.is-visible{transform:translateY(0);visibility:visible}
.sbb-name{font-weight:var(--fw-bold);font-size:var(--fs-body);white-space:nowrap}
.sbb-name .short{display:none}
.sticky-buy .spacer{flex:1}
.sbb-price{font-weight:var(--fw-black);font-size:var(--fs-h3);line-height:var(--lh-snug);white-space:nowrap}
.sbb-cta{
  background:var(--action);color:#fff;border-radius:8px;padding:14px 36px;
  font-weight:var(--fw-bold);font-size:var(--fs-body-sm);white-space:nowrap;flex:none;
}
.sbb-cta:hover{background:var(--green-600)}

/* ============ toast ============ */
.toast{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(8px);
  background:var(--ink-strong);color:#fff;font-size:var(--fs-label);
  padding:10px 20px;border-radius:8px;z-index:1200;
  opacity:0;visibility:hidden;
  transition:opacity var(--duration-fast),transform var(--duration-fast),visibility var(--duration-fast);
  max-width:calc(100vw - 40px);text-align:center;
}
.toast a{color:#fff;font-weight:var(--fw-bold)}
.toast.is-visible{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

/* ============================================================
   Mobile ≤768
   ============================================================ */
@media (max-width:768px){
  .d-only{display:none}
  .m-only{display:inline}

  .scope-banner{padding:6px 20px;font-size:11px}
  .model-notice{padding:8px 20px;font-size:12px}
  .nav{height:56px;padding:0 20px}
  .nav-back{
    display:flex;align-items:center;justify-content:center;
    width:32px;height:32px;margin-right:4px;margin-left:-8px;
    font-family:var(--font-data);font-size:22px;color:var(--text-primary);text-decoration:none;
  }
  .nav-logo{height:18px;width:75px}
  .nav-links{display:none}
  .nav-icons{margin-left:auto;gap:18px}
  .nav-icon{width:18px;height:18px}
  .breadcrumb{height:36px;padding:0 20px}

  .hero{flex-direction:column-reverse}
  .hero-copy{width:100%;padding:28px 20px 40px}
  .hero-img{width:100%;min-height:260px}
  .hero-lede,.hero-rule{max-width:none}
  .hero-ctas{flex-wrap:wrap}
  .btn-primary{flex:1;text-align:center}

  .story-row{flex-direction:column;min-height:0}
  .story-media{width:100%;height:240px}
  .story-text{width:100%;padding:32px 20px 40px}
  #story-3{flex-direction:column-reverse}

  .spec-viz{padding:48px 20px 40px}
  .viz-body{flex-direction:column;gap:40px;margin-top:32px}
  .viz-side{width:100%}
  .viz-cards{gap:10px}
  .viz-card{padding:16px 18px}
  .port-card{padding:14px 16px 10px}
  .axis-ticks,.battery-ticks{font-size:10px}

  .spec-table{padding:48px 20px}
  .spec-row{flex-direction:column}
  .spec-row dt{width:100%;padding:12px 0 0}
  .spec-row dd{padding:2px 0 12px}

  .reviews{padding:48px 20px}
  .reviews-grid{grid-template-columns:1fr;gap:10px}

  .purchase{flex-direction:column}
  .purchase-col{border-right:0;border-bottom:1px solid var(--border);padding:28px 20px}
  .purchase-col:last-child{border-bottom:0}

  .faq{padding:48px 20px}
  .footer{padding:36px 20px 24px}
  .footer-cols{flex-wrap:wrap;gap:24px}
  .footer-col.is-brand{flex-basis:100%}
  .footer-logo{height:16px;width:65px}
  .footer-rule{margin:24px 0 18px}

  /* §7.3：375 下價格不得縮小；空間不足縮短機型名 */
  .sticky-buy{padding:8px 16px;gap:12px;min-height:56px;max-height:64px}
  .sbb-name{font-size:var(--fs-body-sm)}
  .sbb-price{font-size:18px}
  .sbb-cta{padding:12px 20px;font-size:13px}
}
@media (max-width:420px){
  .sbb-name .full{display:none}
  .sbb-name .short{display:inline}
}

/* ============ prefers-reduced-motion：全站關閉位移動畫 ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .js-anim .reveal{opacity:1;transform:none}
}