@charset "UTF-8";
/* ==========================================================================
   SWalker 岸行者 — 前台樣式
   品牌色取自 logo：炭黑 #343938 與海洋藍綠 #1c7a7f → #20a4be
   所有顏色先在裸 :root 定義完整一套，深色只覆寫，不在元件裡寫死色碼。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design token
   -------------------------------------------------------------------------- */
:root {
  /* 間距：4px 階梯 */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* 字級：內文 16px 起跳 */
  --text-xs: 12px;  --text-sm: 14px;  --text-base: 16px;
  --text-lg: 20px;  --text-xl: 26px;  --text-2xl: 34px; --text-3xl: 44px;

  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 16px;

  --maxw: 1240px;

  /* 淺色（預設） */
  --bg:            #ffffff;
  --bg-subtle:     #f4f6f7;
  --surface:       #ffffff;
  --surface-alt:   #f4f6f7;
  --border:        #dde3e5;   /* 裝飾性分隔線 */
  --border-strong: #7e8a8f;   /* 控制項邊界，對白底 3.55:1 */
  --text:          #1b2124;   /* 16.3:1 */
  --text-muted:    #5a666b;   /*  5.9:1 */
  --brand:         #12707a;   /*  5.8:1 */
  --brand-deep:    #0d5b63;
  --brand-bright:  #20a4be;
  --on-brand:      #ffffff;

  /* 浮標橘：主要行動色。
     原本主按鈕與連結、logo 同樣是品牌藍綠，CTA 在畫面上不跳。
     橘色只用在「要人點的東西」與目前位置，其他地方仍是藍綠。
     配深色字而不是白字 —— 白字在這個橘上只有 2.6:1，深色字有 8.0:1。 */
  --action:        #ff7a32;
  --action-hover:  #f26a1f;
  --on-action:     #0b1724;   /* 深海字在橘底上 6.95:1，比岩黑的 5.82:1 更保險 */
  /* 橘色「當文字」用的版本。#FF7A32 對白底只有 2.60:1，當文字是不合格的，
     所以另外調一支燒橘：對白底 5.29:1、對淺灰底 4.88:1，兩個都過 AA。
     色塊、按鈕底色仍然用 --action，只有文字改用這支。 */
  --action-ink:    #b8480c;

  /* 深海藍：header 與品牌故事區的深色底 */
  --deep-sea:      #0b1724;
  --on-deep:       #f4f7f9;
  --on-deep-muted: #b3c0c9;
  --shop:          #cf3d1a;   /* 蝦皮橘，白字 4.8:1 */
  --shop-hover:    #b83414;
  /* 雙色焦點框的兩個顏色。刻意用白＋深海藍這種極端組合，
     這樣不管底下是什麼顏色，至少有一圈的對比是夠的。 */
  --focus-inner:   #ffffff;
  --focus-outer:   #0b1724;
  --shadow-sm:     0 1px 2px rgb(16 32 36 / .08);
  --shadow:        0 2px 4px rgb(16 32 36 / .06), 0 8px 24px rgb(16 32 36 / .07);
  --shadow-lg:     0 8px 16px rgb(16 32 36 / .10), 0 24px 48px rgb(16 32 36 / .12);
  --overlay:       rgb(10 20 22 / .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --action:        #ff8f52;
    --action-hover:  #ffa470;
    --on-action:     #0b1724;
    --action-ink:    #ff8f52;
    --deep-sea:      #0b1724;
    --on-deep:       #f4f7f9;
    --on-deep-muted: #b3c0c9;
    --bg:            #0e1416;
    --bg-subtle:     #151d20;
    --surface:       #151d20;
    --surface-alt:   #1b2529;
    --border:        #2a3439;
    --border-strong: #63727a;
    --text:          #e6ecee;
    --text-muted:    #a0aeb3;
    --brand:         #5cc6d8;
    --brand-deep:    #8ad9e6;
    --brand-bright:  #5cc6d8;
    --on-brand:      #06232a;
    --shop:          #ff6a45;
    --shop-hover:    #ff845f;
    --shadow-sm:     0 1px 2px rgb(0 0 0 / .5);
    --shadow:        0 2px 8px rgb(0 0 0 / .5);
    --shadow-lg:     0 12px 32px rgb(0 0 0 / .6);
    --overlay:       rgb(4 10 12 / .65);
  }
}

:root[data-theme="dark"] {
  --action:        #ff8f52;
  --action-hover:  #ffa470;
  --on-action:     #0b1724;
  --action-ink:    #ff8f52;
  --deep-sea:      #0b1724;
  --on-deep:       #f4f7f9;
  --on-deep-muted: #b3c0c9;
  --bg:            #0e1416;
  --bg-subtle:     #151d20;
  --surface:       #151d20;
  --surface-alt:   #1b2529;
  --border:        #2a3439;
  --border-strong: #63727a;
  --text:          #e6ecee;
  --text-muted:    #a0aeb3;
  --brand:         #5cc6d8;
  --brand-deep:    #8ad9e6;
  --brand-bright:  #5cc6d8;
  --on-brand:      #06232a;
  --shop:          #ff6a45;
  --shop-hover:    #ff845f;
  --shadow-sm:     0 1px 2px rgb(0 0 0 / .5);
  --shadow:        0 2px 8px rgb(0 0 0 / .5);
  --shadow-lg:     0 12px 32px rgb(0 0 0 / .6);
  --overlay:       rgb(4 10 12 / .65);
}

/* --------------------------------------------------------------------------
   2. Reset 與基礎
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* 系統字型（不下載網頁字型，見 layout-head）。英數字用系統的，中文依序：
     蘋方（iPhone／Mac）→ 思源黑體（Android 內建、或電腦有裝）→ 微軟正黑體（Windows） */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
               "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;
  font-size: var(--text-base);
  line-height: 1.65;
  overflow-x: hidden;          /* 頁面本體永不橫向捲動 */
  -webkit-font-smoothing: antialiased;
}

img, picture, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  line-height: 1.3; margin: 0 0 var(--space-4); font-weight: 700; letter-spacing: -.01em;
  /* 中文可以在任何字之間斷行，標題很容易把最後一兩個字連標點擠到下一行
     （例如「我們，都曾經從岸邊出／發。」）。balance 會讓各行長度平均，
     瀏覽器不支援時就是維持原本的斷行，不會壞掉。 */
  text-wrap: balance;
}
h1 { font-size: clamp(26px, 4.4vw, 44px); }
h2 { font-size: clamp(21px, 3vw, 34px); }
h3 { font-size: var(--text-lg); }
p  { margin: 0 0 var(--space-4); }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

/* 雙色焦點框。
 *
 * 單色的問題：同一個焦點色不可能在白底商品區、深海藍 header、以及主視覺
 * 照片上同時看得清楚。舊的青色 #12707A 對 header 底色只有 2.2:1，
 * 鍵盤 Tab 到導覽列時焦點框幾乎看不見。
 *
 * 改成內圈白、外圈深海藍：任何底色至少會有一圈跟它對比夠高。
 * 最糟的中灰底 #808080 之下，白圈 3.95:1、深藍圈 4.28:1，兩圈都還過
 * WCAG 2.2 對非文字元素的 3:1 門檻。
 *
 * box-shadow 的 3px 擴散剛好填滿 outline-offset 讓出來的縫，
 * 所以兩圈是連在一起的，不會看起來像兩個分開的框。
 * 不在這裡動 border-radius —— outline 會自己跟著元素的圓角走，
 * 硬設成 4px 會讓藥丸狀的 chip 一被聚焦就變成方角。
 */
:focus-visible {
  outline: 2px solid var(--focus-outer);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--focus-inner);
}
/* 深色底的元素（header、主視覺）把兩圈對調，亮圈在外比較醒目 */
.site-header :focus-visible,
.hero :focus-visible,
.brand-quote :focus-visible {
  outline-color: var(--focus-inner);
  box-shadow: 0 0 0 3px var(--focus-outer);
}

/* header 是 sticky 的，Tab 到剛好在它下面的元素時，瀏覽器捲過去之後
   焦點會被 header 蓋住（WCAG 2.2 SC 2.4.11）。給所有可聚焦的元素留出
   header 的高度，捲動就會多停一點。 */
a, button, input, select, textarea, summary, [tabindex] {
  scroll-margin-top: 76px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 跳過導覽，鍵盤使用者按 Tab 第一個就是它 */
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 200;
  background: var(--brand); color: var(--on-brand);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: var(--space-4); color: var(--on-brand); }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 768px) { .wrap { padding-inline: var(--space-6); } }

.stack > * + * { margin-top: var(--space-4); }

/* --------------------------------------------------------------------------
   3. 頁首
   -------------------------------------------------------------------------- */
/* header 用深海藍。這是規格裡「品牌情緒交給深色、商品區維持明亮」的分工，
   不是把全站塗黑 —— 商品格線與卡片仍然是白底。 */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--deep-sea);
  border-bottom: 1px solid rgb(255 255 255 / .10);
}
.site-header .brand__name,
.site-header .brand__sub { color: var(--on-deep-muted); }
.site-header .brand__sub { border-left-color: rgb(255 255 255 / .22); }
.site-header .site-nav__link { color: var(--on-deep); }
.site-header .site-nav__link:hover { background: rgb(255 255 255 / .10); color: #fff; }
/* 目前位置：橘色文字在深海底上有 6.95:1，而且另外加了底線與粗體，
   不是只靠顏色傳達狀態。 */
.site-header .site-nav__link[aria-current="page"] {
  color: var(--action); background: transparent; font-weight: 700;
  box-shadow: inset 0 -2px 0 var(--action);
  border-radius: 0;
}
.site-header .site-nav__link--ext::after { color: var(--on-deep-muted); }
.site-header .nav-toggle,
.site-header .theme-toggle { color: var(--on-deep); border-color: rgb(255 255 255 / .35); }
.site-header .nav-toggle:hover,
.site-header .theme-toggle:hover { background: rgb(255 255 255 / .12); }
.site-header__bar {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 64px;
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; flex: 0 0 auto; }
.brand img { height: 34px; width: auto; }
/* Logo 旁的副標。窄螢幕藏起來，免得跟漢堡按鈕擠在一起。 */
.brand__text { display: none; }
@media (min-width: 640px) { .brand__text { display: block; } }
.brand__name { font-weight: 700; color: var(--text); font-size: var(--text-base); line-height: 1.2; }
.brand__sub {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.2;
  letter-spacing: .06em;
  white-space: nowrap;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
}
@media (min-width: 1100px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; }

.site-nav { margin-left: auto; }
@media (max-width: 1099px) {
  .site-nav {
    position: fixed; inset: 64px 0 auto 0;
    background: var(--deep-sea); border-bottom: 1px solid rgb(255 255 255 / .12);
    padding: var(--space-3) var(--space-4) var(--space-5);
    box-shadow: var(--shadow);
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .site-nav[hidden] { display: none; }

  /* 沒有 JS 的情況：漢堡鍵按不動，fixed 的選單就永遠蓋在主視覺上。
     退回一般區塊排在頁首下方，所有連結照樣看得到、點得到。
     另外把連結改成會換行的橫排 —— 直排六列會讓頁首高到佔掉半個手機畫面。 */
  .no-js .site-header__bar { flex-wrap: wrap; }
  .no-js .site-nav {
    position: static; inset: auto;
    flex: 0 0 100%; margin-left: 0;
    padding: 0 0 var(--space-3);
    max-height: none; overflow: visible; box-shadow: none; border-bottom: 0;
  }
  .no-js .site-nav__list { flex-direction: row; flex-wrap: wrap; }
}
/* 兩顆純 JS 的按鈕，沒有 JS 時按了不會有反應，直接不要顯示 */
.no-js .nav-toggle,
.no-js .theme-toggle { display: none; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
@media (min-width: 1100px) {
  .site-nav__list { flex-direction: row; align-items: center; gap: var(--space-1); }
}
.site-nav__link {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius); text-decoration: none;
  color: var(--text); font-weight: 500; font-size: var(--text-sm);
}
.site-nav__link:hover { background: var(--bg-subtle); color: var(--text); }
.site-nav__link[aria-current="page"] { color: var(--brand); background: var(--bg-subtle); font-weight: 700; }
/* 2026-10-01 加了「官網訂購」「購物車」之後導覽變 9 項：橫排時不准斷字（之前 1100px 會斷成「產品介/紹」），
   漢堡選單的斷點從 900 拉到 1100，1100～1279 之間收掉 Logo 旁的副標、縮小間距。 */
.site-nav__link { white-space: nowrap; }
@media (min-width: 1100px) and (max-width: 1279px) {
  .site-header .brand__text { display: none; }
  .site-nav__link { padding-inline: var(--space-2); }
}
.site-nav__link--ext::after {
  content: "↗"; font-size: var(--text-xs); color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   4. 公告跑馬（改為靜態輪播，不用外掛）
   -------------------------------------------------------------------------- */
.notice {
  background: var(--brand-deep); color: #fff;
  font-size: var(--text-sm);
}
:root[data-theme="dark"] .notice,
:root:not([data-theme="light"]) .notice { color: var(--on-brand); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .notice { background: var(--brand); }
}
/* 這條帶子現在放的是品牌語，不是促銷訊息，所以置中而不是靠左，
   看起來像緞帶而不是公告欄。內容由 config.php 的 NOTICE_TEXT 控制，
   留空整條就不會輸出。 */
.notice__inner {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); min-height: 40px; padding-block: var(--space-2);
  text-align: center;
}
.notice__item { margin: 0; }
.notice__item b { font-weight: 700; }
.notice__item--en {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   5. 主視覺
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   主視覺輪播

   做法刻意單純：所有張數都在 DOM 裡，用 opacity 交叉淡入。
   沒有 transform 位移、沒有無限迴圈的 DOM 複製 ——
   舊站就是被一個輪播外掛拋例外，害整站卡在載入遮罩後面看不到內容。
   這裡就算 JS 完全不執行，第一張也是正常顯示的。
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; background: var(--brand-deep); display: grid; }

/* 所有 slide 疊在同一個網格位置 */
.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility 0s linear .6s;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility 0s;
}
/* 沒有 JS 時，第一張要看得見（.is-active 由伺服器端就印好了） */

/* <picture> 本身要是 block。維持 inline 的話，即使裡面的 <img> 是絕對定位，
   空的 inline 盒仍然會在 .hero__slide 裡撐出一個 line box，主視覺會多出一行高度。
   空的 block 盒高度是 0，不會有這個問題。 */
.hero__pic { display: block; }
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.hero__slide::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(6 20 24 / .34) 0%, rgb(6 20 24 / .66) 100%);
}
.hero__inner { padding-block: clamp(56px, 12vw, 128px) clamp(80px, 13vw, 150px); color: #fff; max-width: 62ch; }

.hero__title {
  color: #fff;
  font-size: clamp(26px, 4.4vw, 44px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0 0 var(--space-4);
  text-shadow: 0 2px 12px rgb(0 0 0 / .35);
}

/* --- 控制列 ---
   圓點是主要的導覽方式，做得明顯；
   左右箭頭與暫停鍵刻意做小做淡，滑過或用鍵盤 focus 才浮出來，
   不要跟主視覺的標題與按鈕搶注意力。
   暫停鍵保留而不是拿掉：內容會自動輪播，依無障礙規範要給使用者停下來的方法。 */
.hero__controls {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(12px, 2.4vw, 26px); z-index: 3;
  display: flex; align-items: center; gap: var(--space-1);
}
.hero__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: 0 0 auto; padding: 0;
  border: 0; background: none;
  color: #fff; border-radius: 50%; cursor: pointer;
  opacity: .5;
  transition: opacity .15s ease, background-color .15s ease;
}
.hero__nav:hover,
.hero__nav:focus-visible { opacity: 1; background: rgb(10 22 26 / .45); }
.hero__nav svg {
  width: 16px; height: 16px;
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / .6));
}
/* 暫停鍵再低調一階；被按下（已暫停）時提高存在感，讓狀態看得出來 */
.hero__nav--play { opacity: .35; }
.hero__nav--play[aria-pressed="true"] { opacity: .9; }
.hero__nav--play .icon-play { display: none; }
.hero__nav--play[aria-pressed="true"] .icon-pause { display: none; }
.hero__nav--play[aria-pressed="true"] .icon-play { display: block; }

.hero__dots { display: flex; gap: 0; list-style: none; margin: 0; padding: 0 var(--space-1); }
/* 視覺上只是一顆小點，但點擊區維持 44px 高、寬度也夠手指按 */
.hero__dot {
  width: 30px; height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.hero__dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgb(255 255 255 / .5);
  box-shadow: 0 1px 3px rgb(0 0 0 / .5);
  transition: background-color .2s ease, width .2s ease;
}
.hero__dot:hover::before { background: rgb(255 255 255 / .85); }
.hero__dot.is-active::before { background: #fff; width: 22px; border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide { transition: none; }
}
.hero__lead { font-size: clamp(16px, 2.2vw, 20px); color: #eef4f5; margin-bottom: var(--space-5); text-shadow: 0 1px 8px rgb(0 0 0 / .4); }

/* 英文標語。當裝飾用，字距拉開，不要跟中文副標搶注意力。 */
.hero__slogan {
  font-size: var(--text-sm);
  letter-spacing: .18em;
  font-weight: 600;
  color: #cfe4e7;
  margin-bottom: var(--space-8);
  text-shadow: 0 1px 8px rgb(0 0 0 / .45);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   品牌金句
   -------------------------------------------------------------------------- */
.brand-quote {
  background: var(--brand-deep);
  color: #fff;
  padding-block: clamp(36px, 6vw, 64px);
  text-align: center;
}
:root[data-theme="dark"] .brand-quote { background: var(--surface-alt); color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-quote { background: var(--surface-alt); color: var(--text); }
}
.brand-quote__text {
  margin: 0 auto var(--space-3);
  max-width: 22ch;
  font-size: clamp(22px, 3.6vw, 36px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .01em;
}
.brand-quote__by {
  margin: 0;
  font-size: var(--text-sm);
  letter-spacing: .14em;
  opacity: .85;
}

/* --------------------------------------------------------------------------
   6. 按鈕（五態）
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-3) var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: var(--text-sm); font-weight: 600;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; pointer-events: none;
}

/* 主要行動：浮標橘。深色字，不用白字（白字在這個橘上只有 2.6:1）。 */
.btn--primary { background: var(--action); color: var(--on-action); font-weight: 700; }
.btn--primary:hover { background: var(--action-hover); color: var(--on-action); }

/* 次要行動：品牌藍綠。用在「也可以點，但不是這一頁要你做的事」 */
.btn--brand { background: var(--brand); color: var(--on-brand); }
.btn--brand:hover { background: var(--brand-deep); color: var(--on-brand); }

.btn--shop { background: var(--shop); color: #fff; }
.btn--shop:hover { background: var(--shop-hover); color: #fff; }

.btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--bg-subtle); color: var(--text); }

.btn--onhero { background: rgb(255 255 255 / .12); color: #fff; border-color: rgb(255 255 255 / .55); backdrop-filter: blur(6px); }
.btn--onhero:hover { background: rgb(255 255 255 / .22); color: #fff; }

.btn--lg { min-height: 52px; font-size: var(--text-base); padding-inline: var(--space-6); }
.btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   7. 區塊標題
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(40px, 7vw, 80px); }
.section--tint { background: var(--bg-subtle); }

/* 底色區塊放在 .wrap 裡面時的補救。
 *
 * 首頁與品牌頁的寫法是 <section class="section--tint"><div class="wrap">，
 * 左右留白由裡面的 .wrap 提供，色塊自然是滿版。
 * 但釣點頁與資料來源頁是反過來的 <div class="wrap"><section class="section--tint">，
 * .wrap 的留白在色塊外面，色塊自己 padding-inline 是 0 ——
 * 結果文字直接貼死在灰底邊緣（實測 padding-left: 0px）。
 *
 * 這裡用「負邊距剛好抵銷 .wrap 的留白，再把同樣的值加回 padding」，
 * 色塊會延伸到 .wrap 的外緣，而裡面的文字仍然跟其他區塊切齊。
 * 兩個值必須跟 .wrap 的 padding-inline 一致，改那邊要記得改這裡。
 * 因為負邊距等於 .wrap 的內距，色塊外緣最多到 .wrap 的邊界，不會產生橫向捲軸。
 */
.wrap > .section--tint {
  margin-inline: calc(var(--space-4) * -1);
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .wrap > .section--tint {
    margin-inline: calc(var(--space-6) * -1);
    padding-inline: var(--space-6);
  }
}
.section__head {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-6);
}
.section__head h2 { margin: 0; }
/* text-wrap: pretty 是為了避免最後一行只剩一兩個字（實測「…電子浮標。」
   的「標。」會自己掉到第三行）。不支援的瀏覽器就是照舊斷行，不會壞。 */
.section__lead {
  color: var(--text-muted); margin: var(--space-2) 0 0; max-width: 62ch;
  text-wrap: pretty;
}

/* 分類頁的系列標語 */
.cat-slogan {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  color: var(--brand);
  letter-spacing: .03em;
  margin: calc(var(--space-2) * -1) 0 var(--space-2);
}

/* --------------------------------------------------------------------------
   8. 商品格線與卡片
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 700px)  { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } }
@media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.card:focus-within { border-color: var(--brand); box-shadow: var(--shadow); }

/* 商品圖一律完整顯示，不裁切。
   原本是 object-fit:cover，方形卡片會把細長的浮標標尾切掉 ——
   標尾的節數與配色正是磯釣浮標的辨識重點，裁掉等於把商品最關鍵的資訊藏起來。
   底色用白，因為商品照多半是白底去背，contain 留下的邊才不會出現色塊。 */
.card__media {
  position: relative; aspect-ratio: 1 / 1;
  background: #fff; overflow: hidden;
}
.card__media img { width: 100%; height: 100%; object-fit: contain; }
.card__body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }

.card__cat {
  font-size: var(--text-xs); color: var(--text-muted);
  text-transform: none; letter-spacing: .02em;
}
.card__title { margin: 0; font-size: var(--text-sm); font-weight: 600; line-height: 1.45; }
@media (min-width: 700px) { .card__title { font-size: var(--text-base); } }
.card__title a {
  color: var(--text); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__title a:hover { color: var(--brand); }
/* 讓整張卡片可點，但保留標題連結的語意與鍵盤焦點 */
.card__title a::after { content: ""; position: absolute; inset: 0; }

.card__meta { margin-top: auto; font-size: var(--text-xs); color: var(--text-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--space-2); border-radius: 999px;
  font-size: var(--text-xs); font-weight: 600; line-height: 1.6;
  background: var(--surface-alt); color: var(--text-muted);
  border: 1px solid var(--border);
}
.badge--brand { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }

/* --------------------------------------------------------------------------
   9. 篩選列
   -------------------------------------------------------------------------- */
.filters { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-6); }

.searchbar { display: flex; gap: var(--space-2); }
.searchbar__field { position: relative; flex: 1; }
.input {
  width: 100%; min-height: 44px;
  padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit; font-size: var(--text-base);
}
.input::placeholder { color: var(--text-muted); }

.label { display: block; font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-size: var(--text-sm); font-weight: 500; text-decoration: none;
  white-space: nowrap;
}
.chip:hover { background: var(--bg-subtle); color: var(--text); border-color: var(--brand); }
.chip[aria-current="true"] {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 700;
}
/* 不再用 opacity 調淡：品牌色底上的白字、白底上的品牌色字，淡化後對比只剩 4.32 與 3.84（WCAG AA 要 4.5） */
.chip__count { font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

.result-count { color: var(--text-muted); font-size: var(--text-sm); }

/* 商品列表版面：手機單欄，桌機左欄分類 + 右欄結果。
   同一份 HTML 兩種排法，chips 在桌機直接轉成直向清單。 */
.catalog { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.catalog__side { margin-bottom: var(--space-2); }

@media (min-width: 1024px) {
  .catalog {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  /* 分類欄跟著捲動，但留一點上緣間距，才不會貼死在視窗頂端。
     最多 10 個分類，不會長到超過一個視窗高度。 */
  .catalog__side { position: sticky; top: var(--space-4); margin-bottom: 0; }
  .cat-rail__list { flex-direction: column; align-items: stretch; gap: var(--space-1); }
  .cat-rail__list .chip {
    justify-content: space-between;
    width: 100%;
    border-radius: var(--radius);
    border-color: transparent;
    background: transparent;
    padding-inline: var(--space-3);
  }
  .cat-rail__list .chip:hover { background: var(--bg-subtle); border-color: var(--border); }
  /* 選中的那一列必須同時寫 background 與 color。
     踩過：上面的 `.cat-rail__list .chip` 把 background 撞成 transparent，
     而它跟 `.chip[aria-current="true"]` 權重一樣都是 (0,2,0)、又寫在後面，
     所以贏——但它沒覆寫 color，於是變成 --on-brand（白）配透明底，
     淺色主題下整個列是白字白底，只看得到一個空框（使用者 2026-09-10 回報）。
     同系列的 `.chip--own[aria-current]` 因為寫在更下面所以沒事，這種差別很難看出來。 */
  .cat-rail__list .chip[aria-current="true"] {
    background: var(--brand); color: var(--on-brand); border-color: var(--brand);
  }
  .cat-rail__list .chip[aria-current="true"]:hover {
    background: var(--brand); color: var(--on-brand);
  }
}

/* 兩個篩選欄之間要看得出來是兩組，不然「吃鉛量」會讀成分類的小標題。 */
.cat-rail + .cat-rail { margin-top: var(--space-5); }

/*
 * 吃鉛量欄：桌機上不跟分類一樣一列一個，改排成換行藥丸。
 *
 * 理由是版面，不是好看：`.catalog__side` 是 sticky，
 * 上面那段註解原本寫著「最多 10 個分類，不會長到超過一個視窗高度」——
 * 但加上吃鉛量的 10 列之後，實測側欄高 836px（1280×900），
 * 在 768px 高的筆電上就超過一個視窗，sticky 會把底部卡住捲不到。
 * 錢數的標籤本來就短（「3 錢 92」），一列一個是浪費。
 */
@media (min-width: 1024px) {
  .cat-rail--wrap .cat-rail__list { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }
  .cat-rail--wrap .cat-rail__list .chip {
    width: auto; justify-content: center;
    border-radius: 999px; padding-inline: var(--space-3);
    border-color: var(--border-strong); background: var(--surface);
  }
  /* 這條必須緊跟在上一條後面。兩者權重都是 (0,3,0)，
     寫在前面就會被覛掉背景——那正是白字白底那個 bug 的機制。 */
  .cat-rail--wrap .cat-rail__list .chip[aria-current="true"] {
    background: var(--brand); color: var(--on-brand); border-color: var(--brand);
  }
}

/* 自有品牌那一欄用橘色左邊界標出來，跟代理商品的分類區隔開。
   不是只靠顏色 —— 文字本身就寫著「岸行者浮標」。 */
.chip--own { border-color: var(--action); font-weight: 600; }
.chip--own:hover { border-color: var(--action); }
.chip--own[aria-current="true"] {
  background: var(--action); color: var(--on-action); border-color: var(--action);
}
@media (min-width: 1024px) {
  .cat-rail__list .chip--own { border-left: 3px solid var(--action); border-radius: var(--radius); }
  .cat-rail__list .chip--own[aria-current="true"] {
    background: var(--action); color: var(--on-action); border-color: var(--action);
  }
}

/* 首頁自有品牌專區 */
.own-head { max-width: 62ch; }
.own-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .16em;
  color: var(--action-ink);
  text-transform: uppercase;
}
.own-eyebrow::before {
  content: ""; width: 24px; height: 3px; border-radius: 2px;
  background: var(--action); flex: 0 0 auto;
}
.own-note {
  margin: var(--space-5) 0 0;
  font-size: var(--text-sm); color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   10. 分頁
   -------------------------------------------------------------------------- */
.pagination { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; align-items: center; margin-top: var(--space-10); list-style: none; padding: 0; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  text-decoration: none; color: var(--text); font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.pagination a:hover { background: var(--bg-subtle); border-color: var(--brand); color: var(--text); }
.pagination [aria-current="page"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); font-weight: 700; }
.pagination .is-gap { border: 0; min-width: auto; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   11. 空狀態
   -------------------------------------------------------------------------- */
.empty {
  text-align: center; padding: var(--space-16) var(--space-4);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface);
}
.empty h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.empty p { color: var(--text-muted); max-width: 52ch; margin-inline: auto; }
.empty__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   12. 麵包屑
   -------------------------------------------------------------------------- */
.breadcrumb { padding-block: var(--space-4); font-size: var(--text-sm); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "／"; color: var(--text-muted); margin-right: var(--space-2); }
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   13. 商品詳情
   -------------------------------------------------------------------------- */
/* 手機上的單欄必須寫 `minmax(0, 1fr)`。
   不寫 grid-template-columns 的話，隱式欄是 `auto`，
   而 auto 軌的最小寬是項目的 min-content——圖廊的 min-content 排得出 544px，
   於是整個欄被撜到 544px、溢出 358px 的 .product，
   手機上從圖片開始整頁變寬並且可以左右捲（使用者 2026-09-10 回報）。
   `1fr` 也不行，它的最小值同樣是 auto。這個坑在 .entry-grid 上已經踩過一次。 */
.product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-bottom: var(--space-12); }
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: start; }
}
/* 圖廊釘住。
   右欄加了規格表、比例尺、規格選項、同吃鉛量出口之後，
   實測高度 2,500px 上下，而圖廊只有 666px——不釘的話往下捲時
   左半邊會空白兩千多像素，而且要回頭看圖必須捲到頂。
   76px 是 sticky 頁首的高度，跟 .gallery__slide 的 scroll-margin-top 一致。

   但高度不夠就不釘：666 + 92 = 758px，若視窗比這短，
   釘住反而讓下方的縮圖列永遠捲不到。
   這種矮視窗（例如 1366×768 筆電）維持原本的行為。 */
@media (min-width: 900px) and (min-height: 800px) {
  .gallery { position: sticky; top: calc(76px + var(--space-4)); }
}

.gallery { display: flex; flex-direction: column; gap: var(--space-3); }
/* 圖片軌道：所有圖排成一列橫向捲動，用 scroll-snap 卡在整張。
   手機的左右滑動是瀏覽器原生行為，沒有 JS 也能用。 */
.gallery__viewport {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* 滑到底不要把整頁往回帶 */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius);
  /* 捲軸藏起來，靠下面的縮圖與「1 / 7」告訴使用者還有幾張 */
  scrollbar-width: none;
}
.gallery__viewport::-webkit-scrollbar { display: none; }
.gallery__viewport.is-single { overflow: hidden; }

.gallery__slide {
  flex: 0 0 100%;
  /* 沒有 JS 時縮圖是 #pimg-N 錨點，瀏覽器會連著把頁面往上捲，
     留出 sticky header 的高度才不會剛好被蓋住。 */
  scroll-margin-top: 76px;
  scroll-snap-align: center;
  scroll-snap-stop: always;         /* 一次只跳一張，不會一滑滑過三張 */
  margin: 0;
  aspect-ratio: 1 / 1;
}
.gallery__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }

.gallery__counter {
  margin: 0; text-align: center;
  font-size: var(--text-sm); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* 桌機有縮圖列就夠了，計數器只在手機幫忙 */
@media (min-width: 900px) { .gallery__counter { display: none; } }
/* 沒有 JS 就沒人更新這個數字，會一直停在「1 /
   7」而跟實際看到的那張對不上，寧可不顯示。圖片本身照樣滑得動。 */
.no-js .gallery__counter { display: none; }
.gallery__thumbs { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.gallery__thumb {
  display: block;
  width: 68px; height: 68px; padding: 0; overflow: hidden;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-alt); cursor: pointer;
  text-decoration: none;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--brand); }
.gallery__thumb:hover { border-color: var(--brand-bright); }

@media (min-width: 900px) { .product__info { position: sticky; top: 88px; } }
.product__cat { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--space-2); }
.product h1 { font-size: clamp(22px, 3vw, 32px); margin-bottom: var(--space-4); }

/* 規格一覽 */
.spec { margin-bottom: var(--space-6); }
.spec h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.spec-list { margin: 0 0 var(--space-5); }
.spec-list__row {
  display: grid; grid-template-columns: 7em minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}
.spec-list__row:first-child { border-top: 1px solid var(--border); }
.spec-list dt { color: var(--text-muted); font-size: var(--text-sm); margin: 0; }
.spec-list dd { margin: 0; min-width: 0; word-break: break-word; }
.spec-id { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.spec-list--tight .spec-list__row { padding: var(--space-2) 0; }
.spec-list--tight { margin-bottom: var(--space-4); }

.spec-note { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-4) 0 0; }

.specs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; }

.buybox {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-alt); padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.buybox__title { font-size: var(--text-lg); margin: 0 0 var(--space-4); }
/* 說明在按鈕下方，所以上邊距在上、下邊距歸零 */
.buybox__note { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-4) 0 0; }
/* 產品介紹頁（官網不能下單）售價下方的出處與日期 */
.buybox__ref { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-1) 0 var(--space-3); }
.buybox__actions { display: flex; flex-direction: column; gap: var(--space-3); }
/* 外連圖示：跟文字同一個 currentColor，按鈕變色時它會跟著變 */
.btn__ext { width: 1em; height: 1em; flex: 0 0 auto; opacity: .85; }
@media (min-width: 560px) { .buybox__actions { flex-direction: row; } .buybox__actions .btn { flex: 1; } }

.desc { font-size: var(--text-base); }
.desc h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.desc__body {
  white-space: pre-wrap;      /* 規格對照表靠換行才讀得懂 */
  word-break: break-word;
  color: var(--text);
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   14. 情境磚
   -------------------------------------------------------------------------- */
.scenes { display: grid; gap: var(--space-4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px)  { .scenes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .scenes { grid-template-columns: repeat(4, 1fr); } }
.scene {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius); aspect-ratio: 16 / 9;
  text-decoration: none; isolation: isolate;
}
.scene img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.scene:hover img { transform: scale(1.04); }
.scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(6 20 24 / .05) 40%, rgb(6 20 24 / .72) 100%);
}
.scene__text {
  position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3);
  z-index: 1; display: flex; flex-direction: column; gap: 2px;
}
.scene__label {
  color: #fff; font-weight: 700; font-size: var(--text-lg);
  text-shadow: 0 1px 8px rgb(0 0 0 / .5);
}
.scene__desc {
  color: #dceaec; font-size: var(--text-xs);
  text-shadow: 0 1px 6px rgb(0 0 0 / .6);
}

/* --------------------------------------------------------------------------
   14b. 分類入口（文字型）

   規格建議「缺少適當分類照片時用文字加序號設計」。
   這裡直接採文字方案：現有商品照多是蝦皮促銷海報，裁成分類封面會很雜；
   而概念圖裡那幾張分類插圖是 concept-only，不是可用素材。
   -------------------------------------------------------------------------- */
/* 一定要用 minmax(0, 1fr)，不能只寫 1fr。
   1fr 的最小值是 auto，也就是內容的 min-content 寬；.entry__desc 是
   white-space: nowrap（配 ellipsis 截斷），它的 min-content 等於整句話的寬度，
   於是欄軌被撐成 367px 塞進 328px 的容器裡，360px 的手機會出現橫向捲軸。
   實測重現過。minmax(0, …) 讓欄軌可以縮到比內容還窄，截斷才會真的發生。 */
.entry-grid {
  display: grid; gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px)  { .entry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .entry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.entry {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 88px; padding: var(--space-4) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.entry:hover {
  border-color: var(--action); border-left-color: var(--action);
  box-shadow: var(--shadow); transform: translateY(-2px); color: var(--text);
}
.entry__no {
  font-size: var(--text-sm); font-weight: 700; letter-spacing: .08em;
  color: var(--text-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums;
}
.entry__body { flex: 1; min-width: 0; }
.entry__name { display: block; font-weight: 700; font-size: var(--text-lg); line-height: 1.3; }
.entry__desc {
  display: block; font-size: var(--text-xs); color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entry__count {
  flex: 0 0 auto; font-size: var(--text-xs); color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.entry__arrow { flex: 0 0 auto; color: var(--action); font-weight: 700; }

/* --------------------------------------------------------------------------
   15. 頁尾
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--bg-subtle); border-top: 1px solid var(--border);
  padding-block: var(--space-12) var(--space-6); margin-top: var(--space-16);
}
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-footer h2 { font-size: var(--text-base); margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer a { color: var(--text-muted); text-decoration: none; font-size: var(--text-sm); display: inline-flex; min-height: 32px; align-items: center; }
.site-footer a:hover { color: var(--brand); text-decoration: underline; }
.site-footer__brand p { color: var(--text-muted); font-size: var(--text-sm); max-width: 44ch; }
.site-footer__slogan {
  color: var(--brand) !important;
  font-size: var(--text-base) !important;
  font-weight: 700;
  letter-spacing: .04em;
}
.site-footer__en {
  display: block;
  letter-spacing: .14em;
  margin-top: var(--space-1);
}
@media (min-width: 700px) {
  .site-footer__en { display: inline; margin-left: var(--space-3); }
}
.site-footer__bottom {
  margin-top: var(--space-10); padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
  font-size: var(--text-xs); color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   16. 雜項
   -------------------------------------------------------------------------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto;
  background: none; border: 1px solid var(--border-strong);
  border-radius: var(--radius); color: var(--text); cursor: pointer;
}
.theme-toggle:hover { background: var(--bg-subtle); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* --------------------------------------------------------------------------
   品牌故事（about.php）
   -------------------------------------------------------------------------- */
.story-hero {
  padding-block: clamp(32px, 6vw, 72px) clamp(24px, 4vw, 48px);
  border-bottom: 1px solid var(--border);
}
.story-hero__eyebrow {
  font-size: var(--text-sm); letter-spacing: .22em; font-weight: 700;
  color: var(--brand); margin-bottom: var(--space-4);
}
.story-hero h1 { max-width: 20ch; margin-bottom: var(--space-6); }
.story-hero__lead {
  font-size: clamp(17px, 2.2vw, 21px); line-height: 1.9;
  color: var(--text-muted); max-width: 46ch; margin: 0;
}

/* 故事段落刻意窄一點、行距高一點，讀起來像散文而不是說明書 */
.story { max-width: 56ch; font-size: clamp(16px, 1.8vw, 18px); line-height: 1.95; }
.story h2 { margin-bottom: var(--space-5); }
.story > p { margin-bottom: var(--space-5); }

.story__lead {
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 600;
  line-height: 1.8;
  color: var(--text);
}

/* 三個「訊號」用左側短線標出來，取代項目符號 */
.story__signals { list-style: none; margin: 0 0 var(--space-6); padding: 0; }
.story__signals li {
  padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 2px solid var(--brand);
  margin-bottom: var(--space-2);
  color: var(--text-muted);
}

.story__punch {
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 700;
  line-height: 1.7;
  color: var(--brand);
  padding-top: var(--space-2);
}

.story__slogan {
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 700;
  letter-spacing: .06em;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

/* 三個品牌信念 */
.belief {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .belief { grid-template-columns: repeat(3, 1fr); } }
.belief li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.belief h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); }
.belief p { margin: 0; color: var(--text-muted); }

.prose { max-width: 68ch; }
.prose h2 { margin-top: var(--space-10); }
.prose ul { padding-left: 1.4em; }
.prose li { margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   16. 釣行情報
   -------------------------------------------------------------------------- */

/* 警示框。三種狀態要一眼分得出來，而且不能只靠顏色 ——
   每一種都有自己的標題文字（「無法確認」／「目前沒有」／警報名稱）。 */
.alertbox {
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--surface);
}
.alertbox__title { margin: 0 0 var(--space-2); font-weight: 700; font-size: var(--text-base); }
.alertbox__body,
.alertbox__time,
.alertbox__areas { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.alertbox__text {
  margin-top: var(--space-3); font-size: var(--text-sm);
  white-space: pre-wrap; word-break: break-word; color: var(--text);
}
.alertbox__tag {
  display: inline-block; margin-right: var(--space-2);
  padding: 1px var(--space-2); border-radius: var(--radius-sm);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--text-xs); font-weight: 700; vertical-align: 2px;
}
/* 生效中的警報用橘色框。橘色是全站的「要注意這裡」，跟 CTA 同一支色。 */
.alertbox--warn { border-left-color: var(--action); background: color-mix(in srgb, var(--action) 7%, var(--surface)); }
.alertbox--warn .alertbox__title { color: var(--action-ink); }
/* 「無法確認」跟「沒有警報」刻意用不同的框：前者是我們不知道，不是安全。 */
.alertbox--unknown { border-left-color: var(--text-muted); background: var(--bg-subtle); }
.alertbox--clear { border-left-color: var(--brand); }

.callout {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--space-4) var(--space-5); margin-top: var(--space-5);
  background: var(--bg-subtle);
}
.callout p { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.callout p:last-child { margin-bottom: 0; }
.callout--warn { border-left: 4px solid var(--action); }

/* 出處區塊。預設收合，展開才看細節 —— 顯名義務要盡到，但不能把版面淹掉。 */
.srcnote {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  font-size: var(--text-sm);
}
.srcnote summary {
  cursor: pointer; color: var(--text-muted);
  padding: var(--space-1) 0;
  min-height: 32px; display: flex; align-items: center;
}
.srcnote summary:hover { color: var(--text); }
.srcnote dl { margin: var(--space-3) 0 0; }
.srcnote dl > div {
  display: grid; grid-template-columns: 6em minmax(0, 1fr);
  gap: var(--space-3); padding: var(--space-1) 0;
}
.srcnote dt { color: var(--text-muted); margin: 0; }
.srcnote dd { margin: 0; min-width: 0; word-break: break-word; }

/* 釣點列表 */
.spot-region {
  font-size: var(--text-base); margin: var(--space-6) 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}
.spot-region__n {
  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 var(--space-2);
  font-variant-numeric: tabular-nums;
}
.spot-grid {
  display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr);
  list-style: none; margin: 0; padding: 0;
}
@media (min-width: 640px)  { .spot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .spot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.spot-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-height: 92px; padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand); border-radius: var(--radius);
  text-decoration: none; color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.spot-card:hover {
  border-color: var(--action); border-left-color: var(--action);
  box-shadow: var(--shadow); transform: translateY(-2px); color: var(--text);
}
.spot-card__name { font-weight: 700; }
.spot-card__meta { font-size: var(--text-sm); color: var(--text-muted); }
.spot-card__stats { display: flex; gap: var(--space-5); margin-top: auto; padding-top: var(--space-2); }
.spot-card__stat { display: flex; flex-direction: column; }
.spot-card__k { font-size: var(--text-xs); color: var(--text-muted); }
.spot-card__v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* 表格的橫向捲動容器。
   先前誤用了後台的 .ad-table-wrap —— 那個 class 定義在 admin.css，
   前台根本沒載入，結果表格在手機被壓到每一欄都在換行。
   欄位保持自然寬度、容器自己捲，比硬擠成三行好讀。 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* 可捲動區域要能用鍵盤捲，所以會被聚焦；給它跟其他元素一致的焦點框 */
  border-radius: var(--radius);
}
.table-scroll > table { min-width: 34rem; }
/* 窄表格不套最小寬度。34rem 是為潮汐表設計的（多行潮時需要寬度），
   咬鉛重量表這種四欄短數字在手機上本來塞得下，套了反而要左右滑 ——
   而選標指南 81% 的曝光來自手機（2026-09-23 GSC）。 */
.table-scroll--fit > table { min-width: 0; }
.table-scroll--fit td { font-variant-numeric: tabular-nums; }

/* 潮汐表 */
.tide-next {
  font-size: var(--text-lg); margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.tide-table, .wave-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tide-table th, .tide-table td,
.wave-table th, .wave-table td {
  padding: var(--space-3); text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.tide-table thead th, .wave-table thead th {
  font-size: var(--text-xs); color: var(--text-muted); font-weight: 600;
  white-space: nowrap;
}
.tide-table tbody th, .wave-table tbody th { white-space: nowrap; font-weight: 600; }
.wave-table td { font-variant-numeric: tabular-nums; }
.tide-table .is-today { background: var(--bg-subtle); }
.tide-today {
  display: inline-block; margin-left: var(--space-1);
  padding: 0 var(--space-2); border-radius: 999px;
  background: var(--action); color: var(--on-action);
  font-size: var(--text-xs); font-weight: 700;
}
.tide-times { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.tide-times li { display: flex; align-items: baseline; gap: var(--space-1); }
.tide-times__t { font-weight: 700; font-variant-numeric: tabular-nums; }
.tide-times__k { font-size: var(--text-xs); padding: 0 var(--space-2); border-radius: 999px; }
/* 滿潮／乾潮除了顏色也有文字，不是只靠顏色分辨 */
.tide-times__k--high { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand); }
.tide-times__k--low  { background: var(--surface-alt); color: var(--text-muted); }
.tide-times__h { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tide-range { font-size: var(--text-xs); padding: 0 var(--space-2); border-radius: 999px; border: 1px solid var(--border-strong); }
.tide-range--big { border-color: var(--action); color: var(--action-ink); font-weight: 700; }

/* 天氣時段 */
.wx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
@media (min-width: 700px) { .wx-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wx {
  padding: var(--space-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.wx__when { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.wx__wx { font-weight: 700; }
.wx__row { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); }

/* 魚種統計 */
.species { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.species__row {
  display: grid; grid-template-columns: 8em minmax(0, 1fr) 4em;
  gap: var(--space-3); align-items: center;
  padding: var(--space-2) 0; border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.species__name { font-weight: 600; }
.species__bar { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.species__bar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.species__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); }
@media (max-width: 480px) {
  .species__row { grid-template-columns: minmax(0, 1fr) 3.5em; }
  .species__bar { grid-column: 1 / -1; }
}

/* 釣行情報頁裡的小標（h3.label）需要跟上一段拉開，
   .label 原本是表單標籤用的，沒有上邊距。 */
.section .species + .label,
.section .chips + .label,
.section .section__lead + .label,
.section p + .label { margin-top: var(--space-5); }

/* 資料來源頁的每一個資料集區塊 */
.srcblock {
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.srcblock h3 { font-size: var(--text-base); margin: 0 0 var(--space-3); }
.srcblock .spec-list { margin-bottom: 0; }

/* 資料的附註：小字、次要色。
   這是給使用者的補充（例如「這是預報不是實測」），
   不是拿來寫營運說明或設計理由的地方 —— 那些屬於 README 與 TASK_STATE。 */
.page-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 68ch;
  margin: var(--space-3) 0 0;
}

/* 「買之前該知道」的事實框。刻意做得像規格標籤而不像促銷貼紙 ——
   它的內容是既有文案裡挖出來的事實，不是行銷訊息。 */
.factbox {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--action);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-sm);
}
.factbox__k { color: var(--text-muted); }
.factbox__v { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.factbox__note { color: var(--action-ink); font-weight: 600; }

/* 全長比例尺。條與刻度用同一個比例算，不是示意圖。 */
.scalewrap { margin: var(--space-4) 0 var(--space-2); }
.scalebar { display: block; width: 100%; height: auto; max-width: 440px; }
.scalebar__axis, .scalebar__tick { stroke: var(--border-strong); stroke-width: 1; }
.scalebar__label { fill: var(--text-muted); font-size: 11px; }
.scalebar__len { fill: var(--text); font-size: 13px; font-weight: 700; }
.scalebar__bar { fill: var(--brand); }
.scalebar__bar--range { fill: var(--brand); opacity: .38; }

.prose-narrow { max-width: 68ch; }
.prose-narrow ul { padding-left: 1.4em; }
.prose-narrow li { margin-bottom: var(--space-2); }

/* --- 選標指南 ------------------------------------------------------------ */

/* 場地卡。跟 .spot-card 長得像，但它不是連結（整張沒有單一目的地，
   卡內有多個吃鉛量連結），所以不做 hover 位移，免得看起來可以整張點。 */
.guide-grid {
  display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-5);
}
@media (min-width: 768px)  { .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.guide-card {
  padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand); border-radius: var(--radius);
}
.guide-card > p { margin: 0 0 var(--space-2); }
.guide-card > p:last-child { margin-bottom: 0; }
.guide-card__name { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.guide-card__range { color: var(--text-muted); font-size: var(--text-sm); }
.guide-card__range strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* 商品列表左欄的吃鉛量說明。跟 .cat-rail__list 之間要有明顯間隔，
   否則會被讀成最後一個 chip 的說明。 */
.cat-rail__note {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: 1.6;
}

/* 規格表列標題旁的公克換算。
   必須是行內：`.tide-table tbody th` 是 white-space: nowrap，
   這個 span 若用 display:block 會把每一列撜成兩行，
   五列的規格表會憑空拉高將近一個螢幕（實測踩過）。 */
.spec-g {
  margin-left: var(--space-2);
  font-size: var(--text-xs); font-weight: 400; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* 四欄的標型卡。三欄版在 .guide-grid，這裡只改欄數。 */
@media (min-width: 768px) and (max-width: 1023px) {
  .guide-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .guide-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 剩餘浮力示意圖。viewBox 以 360 為基準（手機實寬），
   max-width 壓在 440px，桌機最多放大 1.22 倍——理由同 .scalebar。 */
.buoyfig { display: block; width: 100%; height: auto; max-width: 440px; margin: var(--space-5) 0; }
.buoyfig__body { fill: var(--brand); }
.buoyfig__tail { fill: var(--action); }
.buoyfig__water { fill: var(--brand); opacity: .16; }
.buoyfig__line { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 4 3; }
.buoyfig__label { fill: var(--text-muted); font-size: 11px; }
.buoyfig__cap { fill: var(--text); font-size: 12px; font-weight: 700; }

/* 圖版。
   生圖出來的是白底 PNG，沒辦法像 SVG 那樣跟著主題變色。
   深色主題下直接貼上去會是一塊刺眼的白方塊，
   所以包一層白底卡片，讓它讀起來像一張印刷圖版而不是破圖。 */
.figpanel { margin: var(--space-5) 0; }
.figpanel picture { display: block; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--space-3); }
.figpanel img { display: block; width: 100%; height: auto; }
.figpanel figcaption { margin-top: var(--space-2); font-size: var(--text-sm);
  color: var(--text-muted); line-height: 1.7; max-width: 68ch; }

/* 標型示意圖的其餘元件。
   兩欄以上的圖比單支浮標的圖寬，上限放寬到 560px；
   viewBox 一律以 360 為基準（手機實寬），理由同 .scalebar。 */
.buoyfig--wide { max-width: 560px; }
/* 釣組示意圖（intro 篇）：線、金屬件、鉛。浮標本體沿用 .buoyfig__body／__tail。 */
.rigfig__line  { stroke: var(--text-muted); stroke-width: 1.2; fill: none; }
.rigfig__metal { fill: none; stroke: var(--text); stroke-width: 1.4; }
.rigfig__lead  { fill: var(--text-muted); }
.rigfig__part  { fill: var(--action); }
.rigfig__tick  { stroke: var(--border-strong); stroke-width: 1; }

.buoyfig__cell { fill: none; stroke: var(--border); stroke-width: 1; }
/* 水面那一刀。這條線的長度就是「水面切口」本身，所以要明顯 */
.buoyfig__cut { stroke: var(--action); stroke-width: 4; stroke-linecap: round; }
/* 圖上的顏色語義必須全組一致：
   橘色＝正在被講的那個量（水面切口、受風面積），青色＝標體本身。
   不一致的話同一個橘色在圖 1 是切口、在圖 4 却是標尾，讀起來會互相干擾。 */
.buoyfig__cutarea { fill: var(--action); }
.buoyfig__drop { fill: var(--text-muted); }
/* 來回搖晃的弧線與箭頭 */
.buoyfig__sway { fill: none; stroke: var(--action); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 受風面積：用橘色半透明，跟水下的標體區分開 */
/* 受風面積。只用半透明填色的話，深色主題下會變成一塊混濁的深棕色（實測），
   所以加一圈不透明的輪廓，兩種主題下都看得出範圍。 */
.buoyfig__wind { fill: var(--action); fill-opacity: .42; stroke: var(--action); stroke-width: 1.5; }
/* 力臂 */
.buoyfig__arm { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 3 2; }
.buoyfig__dot { fill: var(--text); }
.buoyfig__gust { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* --- 圖示與動態 --------------------------------------------------------- */

/* 圖示跟著文字走：尺寸用 em，顏色吃 currentColor。
 *
 * **對齊交給容器用 flex 做，不用 vertical-align。**
 * 原本寫 `vertical-align: -0.18em`（徽章是 -0.5em），
 * 那是魔術數字：只在某一個字級剛好對齊，
 * h2（text-2xl）、h3（text-lg）、內文（text-sm）各差一截，
 * 所以全站的圖示看起來都沒有上下置中（使用者 2026-09-10 回報）。
 * 改成容器 `display: flex; align-items: center` 之後，
 * 不管字級多大都是真的對中。 */
.icon {
  width: 1.1em; height: 1.1em;
  flex: 0 0 auto;
}

/* 圖示＋文字的容器。這一串就是全站會放圖示的地方。 */
.sec-h,
.spot-card__name, .spot-card__k,
.leadrow__g, .leadrow__l, .leadrow__u,
.guide-card__name, .guide-card__range,
.tide-next {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}
/* 行內的那幾個不能撑滿一整列 */
.spot-card__k, .leadrow__g, .leadrow__l, .leadrow__u { display: inline-flex; flex-wrap: nowrap; }

/* 區塊標題左邊的圖示徽章。
   寬高用固定的 em 而不是 padding，保證它是正方形。 */
.sec-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.8em; height: 1.8em;
  border-radius: var(--radius);
  background: var(--brand); color: var(--on-brand);
}
.sec-icon .icon { width: 1em; height: 1em; }

/* 倒數計時的數字。tabular-nums 讓秒數跳動時寬度不變，
   不然整行字會每秒抖一下。 */
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; }

/* 浪高長條。
   **刻意不做紅黃綠分級** —— 那等於本站在對海況下安全結論，
   而本站的原則是不做安全結論式的判斷。這裡只呈現「相對多高」，
   分級留給中央氣象署自己發布的長浪警特報。 */
.wavebar {
  display: block; height: 6px; border-radius: 999px;
  background: var(--surface-alt); overflow: hidden;
  /* 拉滿整張卡片的寬度。夾在窄欄位裡的話，卡片之間的長短差看不出來，
     而這條存在的意義就是跨卡片比較（實測踩過）。 */
  width: 100%; margin-top: var(--space-3);
}
.wavebar > span { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* 進場淡入。
   只在使用者沒有要求減少動態時才套用 —— 前庭功能障礙者會因為位移動畫不適，
   `prefers-reduced-motion` 是他們在作業系統層級表達過的意願，必須尊重。 */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .38s cubic-bezier(.22,.8,.3,1) both; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }
  .spot-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
}

/* 流線與紊流。流線用中性灰——橘色已經被「正在被講的那個量」占走，
   這張圖的主角是標體與流向，不是某個被量測的量。 */
.buoyfig__flow { fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.buoyfig__eddy { fill: none; stroke: var(--action); stroke-width: 1.6; stroke-linecap: round; }

/* 標腳（底下那根短桿）與「水面以上」那一段的分色 */
.buoyfig__foot { fill: var(--border-strong); }
/* 「水面以上」那一段。
   **不能用 var(--surface)** —— 它在深色主題是近黑（#151d20），
   同一張圖在兩個主題下會變成相反的意思（實測踩過）。
   用標體色的低透明疊在實心標體上，讀起來就是「同一支標，但這一截在空氣裡」。 */
.buoyfig__exposed { fill: var(--brand); fill-opacity: .35; stroke: var(--brand); stroke-width: 1.2; }

/* --- 選標指南：吃鉛量列、標型卡、問答 ------------------------------------- */

/* 吃鉛量：捨棄表格改成列。表格在手機上一定要橫向捲，
   而這裡每一列的欄位數不固定（有些錢數沒有適用場景），列比表格好排。 */
.leadlist { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.leadrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--surface);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.leadrow__w { font-size: var(--text-base); min-width: 4.5em; }
.leadrow__w strong { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.leadrow__g { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.leadrow__l { color: var(--text); }
.leadrow__u { color: var(--text-muted); }
.leadrow__n { margin-left: auto; font-weight: 700; white-space: nowrap; }
/* 一整句說明。**不要用 .leadrow__u 放長句**：那是 inline-flex + nowrap，
   設計給「圖示＋幾個字」，放長句會擠在同一行、文字與連結被切成好幾個 flex 項目。
   這個不是 flex，窄螢幕時自己換到標籤下一行。 */
.leadrow__d { flex: 1 1 16em; min-width: 0; color: var(--text-muted); line-height: 1.75; }

/* 吃鉛量篩選頁（?w=）的導言。
   這幾頁是全站少數跟蝦皮不重複的內容，所以值得排得比一般列表頁詳細。

   圖示一律用 flex 容器對齊，**不用 vertical-align 魔術數字** ——
   先前全站圖示就是因為拿 vertical-align 微調而歪掉的。 */
.wfacts {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.wfact {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-subtle);
  font-size: var(--text-sm); color: var(--text-muted);
}
.wfact strong { color: var(--text); font-variant-numeric: tabular-nums; }
.wfact .icon { color: var(--brand); }

/* 這個錢數落在哪幾個釣場的起手範圍。
   邊界值（2.0、4.0 錢）會同時出現兩張，這是刻意的，
   因為賣家給的範圍本來就是重疊的「左右」「不等」。 */
.wscenes { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.wscene {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius); background: var(--surface);
  font-size: var(--text-sm);
}
.wscene__name {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 600; color: var(--text);
}
.wscene__name .icon { color: var(--brand); }
.wscene__range { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* 桌機把標型推到右邊；手機段線包下來自己一列，不拉寬容器。 */
.wscene__shapes { min-width: 0; }
@media (min-width: 700px) { .wscene__shapes { margin-left: auto; } }

.wnb { margin-top: var(--space-4); }

/* 文章底部的來源標示。
   用 flex 是因為裡面有圖示 —— 全站的規則是圖示放 flex 容器，
   不准用 vertical-align 微調（先前全站圖示就是那樣歪掉的）。
   上緣一條細線把它跟內文分開，讓人看得出這是附註不是內文。 */
.article-note {
  display: flex; align-items: flex-start; gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  max-width: 68ch;
}
.article-note .icon { color: var(--text-muted); margin-top: .2em; }

/* 錢 ↔ 公克換算器。兩個輸入框中間一個等號，手機上也維持並排 ——
   輸入框很小，疊成兩列反而看不出「左右互相換算」的關係。
   單欄一律 minmax(0, 1fr)：這個專案踩過兩次 1fr 被 min-content 撐爆的坑。 */
.conv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end; gap: var(--space-2) var(--space-3);
  max-width: 420px;
  margin-top: var(--space-4);
}
.conv__field { min-width: 0; }
.conv__eq {
  padding-bottom: 10px;
  font-size: var(--text-lg); font-weight: 700; color: var(--text-muted);
}
.conv__note { grid-column: 1 / -1; min-height: 1.6em; margin: 0; }
.conv .input { font-variant-numeric: tabular-nums; }

/* 頁尾的法務連結。放在版權那一行上面，字級跟頁尾一致但不要太顯眼。 */
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.site-footer__legal span { color: var(--text-muted); }

/* 分布長條圖。用在類型落地頁的電池型號那種「幾款用這個」的比較。
   刻意做成單色深淺而不是多色 —— 這是同一個量的多個項目，
   不同顏色會讓人以為代表不同意義。 */
.dist { display: flex; flex-direction: column; gap: var(--space-2); }
.dist__row {
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto;
  align-items: center; gap: var(--space-3);
  font-size: var(--text-sm);
}
.dist__label { color: var(--text); font-variant-numeric: tabular-nums; }
.dist__bar {
  height: 10px; border-radius: 999px;
  background: var(--bg-subtle); border: 1px solid var(--border);
  overflow: hidden;
}
.dist__fill { display: block; height: 100%; background: var(--brand); }
.dist__n { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dist__row--muted .dist__label,
.dist__row--muted .dist__n { color: var(--text-muted); }
.dist__row--muted .dist__fill { background: var(--border-strong); }
/* 手機把標籤放到長條上方，11em 的欄寬在 360px 會把長條擠成一條線 */
@media (max-width: 560px) {
  .dist__row { grid-template-columns: minmax(0, 1fr) auto; }
  .dist__label { grid-column: 1 / -1; }
}

/* 但書框。用 --action 的左邊界而不是整塊底色，
   免得看起來像促銷貼紙 —— 這是提醒不是行銷訊息。 */
.notebox {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--action); border-radius: var(--radius);
  background: var(--bg-subtle);
  font-size: var(--text-sm); color: var(--text-muted); line-height: 1.7;
  max-width: 68ch; margin: var(--space-4) 0 0;
}
.notebox .icon { color: var(--action); margin-top: .15em; }

/* 標型卡：縮圖在左、文字在右，比較圖橫跨整張卡底部 */
.typegrid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4);
  margin-bottom: var(--space-4);
}
@media (min-width: 700px)  { .typegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.typecard {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.typecard__head { display: flex; gap: var(--space-4); align-items: flex-start; }
.typecard__name { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.typecard__body { margin: 0; font-size: var(--text-sm); line-height: 1.75; }
.typethumb { flex: 0 0 auto; width: 56px; height: auto; }

/* 五軸比較圖 */
.typechart { display: block; width: 100%; max-width: 200px; height: auto; margin-top: var(--space-4); }
.typechart__lab { fill: var(--text-muted); font-size: 11px; }
.typechart__on  { fill: var(--brand); }
.typechart__off { fill: var(--surface-alt); }
.typechart__na  { fill: var(--text-muted); font-size: 9px; }

/* 問答：用原生 <details>，沒有 JS 也能展開，鍵盤與螢幕閱讀器天生就支援 */
.qalist { display: flex; flex-direction: column; gap: var(--space-2); }
.qa {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.qa > summary {
  padding: var(--space-4) var(--space-5);
  cursor: pointer; font-weight: 600; line-height: 1.6;
  list-style: none; position: relative; padding-right: 2.75em;
}
.qa > summary::-webkit-details-marker { display: none; }
/* 自己畫箭頭：預設的三角形在各瀏覽器長得不一樣，而且沒辦法給它過場 */
.qa > summary::after {
  content: ""; position: absolute; right: var(--space-5); top: 1.35em;
  width: .55em; height: .55em;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transform-origin: center;
}
.qa[open] > summary::after { transform: rotate(-135deg); }
.qa > summary:hover { background: var(--bg-subtle); }
.qa > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.qa__body { padding: 0 var(--space-5) var(--space-4); font-size: var(--text-sm); line-height: 1.85; }
.qa__body > p { margin: 0 0 var(--space-3); max-width: 68ch; }
.qa__body ul { margin: 0 0 var(--space-3); padding-left: 1.4em; }
.qa__body li { margin-bottom: var(--space-2); }
.qa--why { margin-top: var(--space-5); }
@media (prefers-reduced-motion: no-preference) {
  .qa > summary::after { transition: transform .2s ease; }
}

/* 標型卡底部的商品出口 */
.typecard__go {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); font-weight: 600; font-size: var(--text-sm);
}

/* ===========================================================================
   官網下單（2026-10-01）：購物車、結帳、訂單查詢、問與答。
   全部沿用站上的 token，深色主題自動跟著換。
   ========================================================================== */
.shop { padding-block: var(--space-6) var(--space-10); }
.shop h1 { margin-bottom: var(--space-4); }
.shop-h2 { font-size: var(--text-lg); margin: 0 0 var(--space-4); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.shop-flash {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  border-left: 3px solid var(--brand); background: var(--bg-subtle);
  font-size: var(--text-sm); margin: 0 0 var(--space-4); max-width: 68ch;
}
.shop-flash--error { border-left-color: var(--shop); }
.shop-flash--warn { border-left-color: var(--action); }

.shop-form { display: flex; flex-direction: column; gap: var(--space-4); }
.shop-form--narrow { max-width: 28rem; }
.shop-form--inline { margin-top: var(--space-3); }
.shop-field { display: flex; flex-direction: column; gap: var(--space-2); }
.shop-label { font-size: var(--text-sm); font-weight: 600; }
.shop-input {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: inherit; font-size: var(--text-base);
}
textarea.shop-input { min-height: 88px; resize: vertical; }
.shop-input--qty { width: 5.5rem; text-align: center; font-variant-numeric: tabular-nums; }
.shop-input--code { max-width: 12rem; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.shop-hint { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.shop-err { font-size: var(--text-sm); color: var(--shop); font-weight: 600; margin: 0; }
.shop-muted { color: var(--text-muted); font-size: var(--text-sm); }
.shop-check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); }
/* 「我不是機器人」（app/BotCheck.php、shop.js 第 6 段） */
.botcheck {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); font-size: var(--text-sm); margin-block: var(--space-2);
}
.botcheck__box { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; cursor: pointer; }
.botcheck__box input { width: 20px; height: 20px; margin: 0; }
.botcheck__status { color: var(--text-muted); }
.botcheck.is-done .botcheck__status { color: var(--brand); font-weight: 600; }
.botcheck.is-done .botcheck__status::before { content: "✓ "; }
.botcheck.is-error { border-color: var(--shop); }
.botcheck.is-error .botcheck__status { color: var(--shop); font-weight: 600; }
.botcheck__noscript { margin: 0; flex-basis: 100%; color: var(--shop); font-weight: 600; }
.shop-check input { margin-top: .25em; width: 18px; height: 18px; flex: 0 0 auto; }
.shop-radios { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.shop-link { background: none; border: 0; padding: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; font-size: var(--text-sm); }
.shop-danger { color: var(--shop); border-color: var(--shop); }
.shop-submit { width: 100%; }

.shop-cols { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .shop-cols { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.shop-col--sum { align-self: start; }
.shop-prefill { margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); }
.shop-prefill summary { cursor: pointer; font-weight: 600; font-size: var(--text-sm); }
.shop-forget { margin-top: var(--space-4); }

/* 購物車 */
.shop-lines { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.shop-line {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--space-2) var(--space-4);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--border); align-items: start;
}
.shop-line__img { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-subtle); grid-row: span 2; }
.shop-line__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.shop-line__title { font-weight: 600; }
.shop-line__price { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.shop-line__qty { display: flex; align-items: center; gap: var(--space-3); }
.shop-line__sub { grid-column: 2; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
  .shop-line { grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; }
  .shop-line__img { grid-row: auto; }
  .shop-line__sub { grid-column: auto; min-width: 6em; text-align: right; }
}
.shop-opt {
  display: inline-block; font-size: var(--text-xs); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px var(--space-2); margin-top: 2px; width: fit-content;
}
.shop-sum { margin: 0 0 var(--space-3) auto; max-width: 24rem; }
.shop-sum div { display: flex; justify-content: space-between; padding: var(--space-1) 0; }
.shop-sum dt { color: var(--text-muted); }
.shop-sum dd { margin: 0; font-variant-numeric: tabular-nums; }
.shop-sum__total { border-top: 1px solid var(--border); margin-top: var(--space-2); font-weight: 700; }
.shop-sum__total dt { color: var(--text); }

/* 品項表 */
.shop-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.shop-table th, .shop-table td { padding: var(--space-2); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.shop-table thead th { font-size: var(--text-xs); color: var(--text-muted); }
.shop-table tbody th { font-weight: 600; }
.shop-table tbody th .shop-opt { display: block; }
.shop-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shop-table tfoot th { text-align: right; font-weight: 400; color: var(--text-muted); }
.shop-table .shop-total th, .shop-table .shop-total td { font-weight: 700; color: var(--text); font-size: var(--text-base); }

/* 門市搜尋 */
.shop-store-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; max-height: 18rem; overflow-y: auto; }
.shop-store-list:empty { display: none; }
.shop-store-list button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  padding: var(--space-2) var(--space-3); text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-top: 0; font: inherit;
}
.shop-store-list li:first-child button { border-top: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.shop-store-list button:hover, .shop-store-list button:focus-visible { background: var(--bg-subtle); }
.shop-store-list button span { font-size: var(--text-xs); color: var(--text-muted); }
.shop-store-list__empty { font-size: var(--text-sm); color: var(--text-muted); padding: var(--space-2) 0; }
.shop-store-picked {
  display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--brand); border-radius: var(--radius); background: var(--bg-subtle); font-size: var(--text-sm);
}

/* 訂單 */
.shop-no { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.shop-no strong { font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.shop-linkbox { display: flex; flex-direction: column; gap: var(--space-2); max-width: 36rem; margin: var(--space-4) 0; }
.shop-info { display: grid; gap: var(--space-2); margin: var(--space-4) 0; font-size: var(--text-sm); max-width: 40rem; }
.shop-info div { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: var(--space-3); }
.shop-info dt { color: var(--text-muted); }
.shop-info dd { margin: 0; overflow-wrap: anywhere; }
.shop-status {
  display: inline-block; width: fit-content; padding: 2px var(--space-3); border-radius: 999px;
  font-size: var(--text-sm); font-weight: 700; background: var(--bg-subtle); border: 1px solid var(--border-strong);
}
.shop-status--pending, .shop-status--open { border-color: var(--action); color: var(--action-ink); }
.shop-status--shipped, .shop-status--answered { border-color: var(--brand); color: var(--brand); }
.shop-status--cancelled, .shop-status--returned { color: var(--text-muted); }
.shop-steps { display: flex; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-4) 0; }
.shop-steps li {
  flex: 1; text-align: center; font-size: var(--text-sm); padding: var(--space-2);
  border-top: 3px solid var(--border); color: var(--text-muted);
}
.shop-steps li.is-done { border-top-color: var(--brand); color: var(--text); font-weight: 600; }
.shop-orders { list-style: none; margin: 0; padding: 0; }
.shop-orders li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border); }
.shop-orders__no { font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-cancel { margin-top: var(--space-6); }

/* 問與答 */
.shop-qa { display: flex; flex-direction: column; gap: var(--space-4); margin: var(--space-5) 0; max-width: 46rem; }
.shop-qa__q, .shop-qa__a { padding: var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); }
.shop-qa__a { background: var(--bg-subtle); border-left: 3px solid var(--brand); }
.shop-qa p { margin: var(--space-2) 0 0; }
.shop-qa__who { font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }

/* 商品頁：官網價格與加入購物車 */
.buyform { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.buyform__price { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.buyform__row { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: flex-end; }
.buyform__row .shop-field { flex: 1 1 12rem; }
.buyform__row .buyform__qty { flex: 0 0 auto; }
.buyform__btns { display: flex; flex-direction: column; gap: var(--space-2); }
.pqa { margin-top: var(--space-8); }
.pqa__item { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.pqa__q { font-weight: 600; margin: 0 0 var(--space-2); }
.pqa__a { margin: 0; color: var(--text-muted); }
.site-nav__count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em;
  margin-left: var(--space-1); padding: 0 .3em; border-radius: 999px;
  background: var(--action); color: var(--on-action); font-size: var(--text-xs); font-variant-numeric: tabular-nums;
}
.card__price { font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }

/* 頂端公告輪播（官網能下單時取代品牌語，2026-10-02）。
   一次一句、上下換；句子比橫幅寬時由 shop.js 把整句往左捲完才換。沒有 JS 時固定顯示第一句（過長用 …）。 */
.notice--promo .notice__inner {
  display: flex; align-items: stretch; justify-content: flex-start;
  gap: 0; padding: 0; min-height: 40px;
}
.notice__ticker {
  flex: 1 1 auto; min-width: 0; display: block;
  color: inherit; text-decoration: none;
}
.notice__ticker:hover, .notice__ticker:focus-visible { color: inherit; }
.notice__ticker:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.notice__viewport { display: block; height: 40px; overflow: hidden; }
.notice__list { display: block; transition: transform .5s ease; }
.notice__msg {
  display: block; height: 40px; line-height: 40px;
  padding-inline: var(--space-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
}
.notice__msg.is-long { text-align: left; text-overflow: clip; }
.notice__text { display: inline-block; font-weight: 700; letter-spacing: .03em; }
.notice__pause {
  flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: inherit; border: 0; border-left: 1px solid rgb(255 255 255 / .2);
  cursor: pointer; opacity: .8;
}
.notice__pause:hover { opacity: 1; }
.notice__play-i { display: none; }
.notice.is-paused .notice__pause-i { display: none; }
.notice.is-paused .notice__play-i { display: inline; }
.no-js .notice__pause { display: none; }
@media (prefers-reduced-motion: reduce) {
  .notice__list, .notice__text { transition: none !important; }
}

/* 官網價與其他通路價比較 */
.buyform__was { margin: calc(var(--space-2) * -1) 0 0; font-size: var(--text-sm); color: var(--text-muted); display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.buyform__was[hidden] { display: none; }
.buyform__save {
  display: inline-block; padding: 1px var(--space-2); border-radius: 999px;
  background: var(--action); color: var(--on-action); font-weight: 700; font-size: var(--text-xs);
}
.buyform__save[hidden] { display: none; }
.card__was, .shop-line__was { font-weight: 400; color: var(--text-muted); font-size: var(--text-xs); margin-left: var(--space-1); }
.shop-saved { font-weight: 700; color: var(--action-ink); margin: 0 0 var(--space-2) auto; max-width: 24rem; text-align: right; }

/* 產品介紹的「全部｜官網可訂」切換、購物車電池加購、文章與指南的官網商品帶（2026-10-02） */
.view-toggle { margin: 0 0 var(--space-4); }
.shop-upsell {
  margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
}
.shop-upsell__q { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.shop-upsell__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.shop-upsell__title { font-weight: 600; flex: 1 1 14rem; min-width: 0; }
.shop-strip .page-note { margin-top: 0; }

/* chip 太長（例：電池篇列出的商品全名）時不准撐破版面：比畫面寬才換行，平常的短 chip 不受影響。
   2026-10-02 實測電池篇在 375px 手機上整頁變 447px 寬、可以左右滑。 */
.chips > li { max-width: 100%; }
.chips .chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* hidden 屬性一律生效。display:flex／grid 的元素（例：結帳頁的 .shop-store-picked）會蓋掉瀏覽器預設的
   [hidden]{display:none}，2026-10-02 實測結帳頁門市欄位下面多出一個空的框。 */
[hidden] { display: none !important; }

/* ===========================================================================
   購物流程稽核後的調整（2026-10-02）：頁首購物車圖示、商品頁黏著購買列與保障列、
   結帳摘要列、列表篩選收合、缺貨標示、下單完成的「接下來」
   ========================================================================== */
/* 頁首購物車圖示：手機上導覽收在漢堡裡，購物車要在外面看得到 */
.cart-link {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; margin-left: var(--space-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--text); text-decoration: none;
}
.site-header .cart-link { color: var(--on-deep); border-color: rgb(255 255 255 / .25); }
.cart-link svg { width: 22px; height: 22px; }
.cart-link:hover, .cart-link[aria-current="page"] { background: rgb(255 255 255 / .10); }
.cart-link__count {
  position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 999px;
  background: var(--action); color: var(--on-action); font-size: var(--text-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (min-width: 1100px) { .cart-link { margin-left: var(--space-3); } }

/* 商品頁：購買保障列、缺貨、底部黏著購買列 */
.buyform__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.buyform__trust li::before { content: "✓ "; color: var(--brand); font-weight: 700; }
.buyform__price--out { color: var(--text-muted); }
.badge--out { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-strong); }
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgb(0 0 0 / .14);
}
.buybar__price { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: var(--text-lg); font-variant-numeric: tabular-nums; line-height: 1.15; }
.buybar__was { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); }
.buybar .btn { flex: 0 0 auto; }
body.has-buybar { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { .buybar { display: none !important; } body.has-buybar { padding-bottom: 0; } }

/* 結帳：手機上的摘要列在表單上方；桌機維持右欄 */
.shop-sumbar { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.shop-sumbar summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.shop-sumbar summary::marker { color: var(--brand); }
.shop-sumbar__main { font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-sumbar__sub { font-size: var(--text-sm); color: var(--text-muted); }
.shop-sumbar[open] summary { margin-bottom: var(--space-3); }
.shop-col--sum { display: none; }
@media (min-width: 900px) { .shop-sumbar { display: none; } .shop-col--sum { display: block; } }
.shop-store-manual { display: flex; flex-direction: column; gap: var(--space-2); }
.shop-store-alt { margin: 0; font-size: var(--text-sm); }
.shop-next { margin: var(--space-4) 0; padding-left: 1.4em; max-width: 46rem; }
.shop-next li { margin: var(--space-2) 0; }

/* 列表：手機上篩選區預設收合 */
.filter-toggle {
  display: none; align-items: center; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--text); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.filter-toggle[aria-expanded="true"] { border-color: var(--brand); color: var(--brand); }
@media (max-width: 1023px) {
  .filter-toggle { display: inline-flex; }
  .catalog__side { display: none; }
  .catalog__side.is-open, .no-js .catalog__side { display: block; }
  .no-js .filter-toggle { display: none; }
}

/* 商品說明的原創首段（稽核第二批）與文章內文中段的相關商品卡 */
.desc__intro { font-size: var(--text-base); line-height: 1.8; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--brand); background: var(--bg-subtle); border-radius: 0 var(--radius) var(--radius) 0; }
.article-pick {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2) var(--space-4); align-items: center;
  margin: var(--space-6) 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.article-pick__img img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); background: var(--bg-subtle); display: block; }
.article-pick__body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.article-pick__why { margin: 0; font-size: var(--text-sm); color: var(--text-muted); }
.article-pick__title { font-weight: 700; text-decoration: none; color: var(--text); }
.article-pick__title:hover { color: var(--brand); }
.article-pick__price { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.article-pick__btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 640px) {
  .article-pick { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .article-pick__btn { grid-column: auto; }
}

/* 官網訂購的排序列（products.php ?buy=1，2026-10-04）。原本有類型、價格、排序三排，使用者只留排序。
   手機上放不下就左右滑、不換行 */
.quickbar { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); }
.quickbar__row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.quickbar__label { flex: 0 0 auto; font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; }
.chips.quickbar__chips { flex-wrap: nowrap; overflow-x: auto; min-width: 0; padding-block: 2px; scrollbar-width: none; }
.chips.quickbar__chips::-webkit-scrollbar { display: none; }
.chips.quickbar__chips > li { flex: 0 0 auto; max-width: none; }
.chips.quickbar__chips .chip { white-space: nowrap; overflow-wrap: normal; }