/* ═══════════════════════════════════════════════════════════════════════
   site.css — 前台（dev-site）
   取代舊站的 Metronic layout3 + Bootstrap 3。沒有框架、沒有 jQuery。
   品牌藍沿用舊站的 #004890。
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --brand:#004890;
  --brand-ink:#00305f;
  --brand-soft:#e9f0f8;
  --brand-line:#c9daee;
  --accent:#0f7b6c;

  --bg:#ffffff;
  --bg-2:#f4f6f9;
  --surface:#ffffff;
  --ink:#16202b;
  --ink-2:#4d5a67;
  --ink-3:#7d8893;
  --rule:#e2e7ec;
  --rule-2:#cbd3da;

  --r:8px;
  --shadow:0 1px 2px rgba(22,32,43,.05);
  --shadow-md:0 4px 16px rgba(22,32,43,.09);

  --maxw:1200px;     /* 整頁最大寬度 */
  --readw:760px;     /* 長文字的最大行寬 —— 見下面 .rich 的說明 */

  /* 間距尺度：全站只用這幾個值，版面才有一致的節奏 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.75 "Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0;line-height:1.35;font-weight:700;text-wrap:balance;}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
mark{background:#fff3c4;padding:0 2px;border-radius:2px;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:16px;}

/* 跳到主要內容（鍵盤使用者） */
.skip{position:absolute;left:-9999px;}
.skip:focus{left:16px;top:8px;z-index:100;background:#fff;padding:8px 14px;border-radius:var(--r);box-shadow:var(--shadow-md);}

/* ── 頁首：Apple 式單排頂欄 ＋ 整頁寬大面板 ─────────────────
   結構重點不是顏色，是三件事：
     ① 頂欄只放最上層分類，字小、間距鬆、整排置中
     ② 滑過去展開的面板是**整頁寬**的，不是掛在項目底下的小方塊
     ③ 面板裡用字級對比分層：分區小灰標 → 大類大字 → 子類小字
   ────────────────────────────────────────────────────────── */
.site-top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--rule);}

.appbar{position:relative;z-index:47;}
.appbar .wrap{display:flex;align-items:center;gap:var(--s4);height:48px;}

.logo{font-weight:700;font-size:17px;color:var(--brand);letter-spacing:.01em;white-space:nowrap;line-height:1.15;}
.logo:hover{text-decoration:none;}
.logo small{display:block;font-size:9px;color:var(--ink-3);letter-spacing:.16em;font-weight:400;}

/* 整排置中：左右兩側用 flex:1 推，中間那排就會落在版面正中 */
.mainnav{flex:1;display:flex;justify-content:center;align-items:center;gap:2px;min-width:0;}
.mainnav a{
  padding:6px 14px;border-radius:6px;font-size:13.5px;color:var(--ink-2);white-space:nowrap;
  line-height:1.6;transition:color .12s,background .12s;
}
.mainnav a:hover,.mainnav a.open{color:var(--ink);background:rgba(0,0,0,.04);text-decoration:none;}
.mainnav a.on{color:var(--brand);font-weight:700;}

.tools{display:flex;align-items:center;gap:var(--s1);}
.ic{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;border:none;background:none;color:var(--ink-2);cursor:pointer;padding:0;}
.ic:hover{background:rgba(0,0,0,.05);color:var(--ink);text-decoration:none;}
.ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.burger{display:none;}

/* 搜尋列 */
.searchbar{border-top:1px solid var(--rule);background:#fff;}
.searchbar[hidden]{display:none;}
.searchbar form{display:flex;gap:var(--s2);padding-block:var(--s3);}
.searchbar input[type=search]{
  flex:1;font:inherit;font-size:16px;padding:10px 14px;border:1px solid var(--rule-2);border-radius:var(--r);
}
.searchbar input:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px var(--brand-soft);}

/* ── 第二排：目前所在的分區與大類 ───────────────────────────
   跟上面的大面板分工：面板是「瀏覽全部」，這一排是「我在哪、切換同層」。
   所以這裡不掛下拉，視覺上也比頂欄更輕（淺灰底、膠囊鈕）。 */
.subnav{border-top:1px solid var(--rule);background:var(--bg-2);position:relative;z-index:47;}
.subnav .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);
  min-height:40px;padding-block:5px;}

.subnav .zones{display:flex;flex-wrap:wrap;gap:var(--s1);}
.subnav a{padding:5px 13px;border-radius:999px;font-size:13.5px;color:var(--ink-2);
  white-space:nowrap;line-height:1.6;position:relative;}
.subnav a:hover{background:#fff;color:var(--brand);text-decoration:none;}
.subnav a.on{background:#fff;color:var(--brand);font-weight:700;box-shadow:var(--shadow);}

/* 展開中的那一個：底下接一條短線，指向下方的面板 */
.subnav a.open{background:#fff;color:var(--brand);box-shadow:var(--shadow);}
.subnav a.open::after{content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  width:0;height:0;border:6px solid transparent;border-bottom-color:#fff;}

/* ── 大面板 ────────────────────────────────────────────────── */
.mm{
  position:absolute;left:0;right:0;top:100%;z-index:45;
  background:#fff;border-bottom:1px solid var(--rule);
  box-shadow:0 14px 28px -18px rgba(22,32,43,.28);
  overflow:hidden;
}
.mm[hidden]{display:none;}
.mm .wrap{padding-block:var(--s5) var(--s6);max-height:min(78vh,720px);overflow-y:auto;}

/* 展開動畫：只動 opacity 與位移，不動高度（高度變化會逼瀏覽器重排整頁） */
@keyframes mmIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.mm.show{animation:mmIn .18s ease-out;}

/* 用 CSS 多欄讓內容在欄之間**流動**，不要一個分區固定一欄 ——
   分區的量差很多（最大 64 行、最小 3 行），固定一欄會讓面板被最高的那一欄撐爆。 */
/* 次類全展開後內容量變多 → 寬螢幕多給一欄，面板才不會往下長太多 */
.mm-cols{columns:5;column-gap:var(--s5);}
@media (max-width:1240px){.mm-cols{columns:4;}}
@media (max-width:1040px){.mm-cols{columns:3;}}
@media (max-width:820px){.mm-cols{columns:2;}}

/* 分區：小灰標題（Apple 的「探索 iPhone」那一行）。
   break-after:avoid 讓標題不會孤零零留在欄底。 */
.mm-z{font-size:12px;color:var(--ink-3);line-height:1.6;
  margin:var(--s5) 0 var(--s3);break-after:avoid;}
.mm-cols > .mm-z:first-child{margin-top:0;}

/* 大類連同底下的次類是一組，**不可拆**。
   拆了的話次類會跟標題分家，跑到別欄變成一組看不出屬於誰的孤兒。 */
.mm-grp{break-inside:avoid;page-break-inside:avoid;margin-bottom:var(--s5);}
.mm-sub{break-inside:avoid;page-break-inside:avoid;}

/* 例外：超過 500px 的大組（目前只有 tp-link，739px）會把整個面板的高度綁死。
   讓它橫跨整個面板，標題仍在正上方，底下的次類自己再分欄 ——
   標題與內容沒有分家，高度也壓下來了。
   這些組在 main.php 一律排到最後，因為橫跨元素會把多欄的流動區切成前後兩段，
   卡在中間就會讓前後各剩一兩組、欄位填不滿、高度被硬疊起來。

   內部欄數刻意與外層 .mm-cols 同為 5：寬度對齊，整個面板讀起來是同一個網格，
   tp-link 那組的內部也從 3 欄變 5 欄，整個面板 809px → 534px。 */
.mm-grp.wide{column-span:all;margin-block:var(--s3) var(--s5);
  padding-top:var(--s3);border-top:1px solid var(--rule);}
.mm-grp.wide .mm-lag{column-span:all;margin-bottom:var(--s2);}
.mm-grp.wide .mm-subs{columns:5;column-gap:var(--s5);}
/* 斷點與外層 .mm-cols 一模一樣（5→4→3→2），欄寬才會真的對齊 */
@media (max-width:1240px){.mm-grp.wide .mm-subs{columns:4;}}
@media (max-width:1040px){.mm-grp.wide .mm-subs{columns:3;}}
@media (max-width:820px){.mm-grp.wide .mm-subs{columns:2;}}

/* 大類：大字（Apple 的「iPhone 18 Pro」那一欄） */
.mm-lag{display:block;font-size:18px;font-weight:700;color:var(--ink);line-height:1.5;
  letter-spacing:-.01em;margin-bottom:var(--s1);}
.mm-lag:hover{color:var(--brand);text-decoration:none;}

/* 次類：大類與子類之間的那一層。字最小、顏色最淡，
   讓它看起來是「分組標籤」而不是可點的項目（它本身不是一個頁面）。 */
.mm-med{font-size:11px;color:var(--ink-3);line-height:1.8;letter-spacing:.03em;
  margin-top:var(--s2);padding-left:9px;position:relative;}
.mm-med::before{content:"";position:absolute;left:0;top:50%;width:5px;height:1px;background:var(--rule-2);}
.mm-grp .mm-med:first-of-type{margin-top:var(--s1);}

/* 子類：小字（Apple 右側那幾欄的連結）。縮排一格，看得出掛在次類底下。 */
.mm-sml{display:block;font-size:12.5px;color:var(--ink-2);line-height:1.95;padding-left:9px;}
.mm-sml:hover{color:var(--brand);text-decoration:none;}
.mm-sml.on{color:var(--brand);font-weight:700;}

/* 超過上限時的出口 */
.mm-more{display:block;font-size:12px;color:var(--brand);line-height:1.95;margin-top:var(--s1);padding-left:9px;}
.mm-more:hover{text-decoration:underline;}

/* 面板打開時整頁壓一層薄灰，視線集中在面板上 */
/* 遮罩是 <header> 的兄弟節點（見樣板的說明），以視窗為基準蓋住整頁；
   頁首 z-index 50 比它高，所以頁首與面板照樣看得見。 */
.mm-veil{position:fixed;inset:0;z-index:44;background:rgba(22,32,43,.16);}
.mm-veil[hidden]{display:none;}

/* ── 麵包屑 ───────────────────────────────────────────────
   上面兩排已經標出目前位置，這裡只當定位與 SEO 用 → 視覺重量壓到最輕。 */
.crumbs{border-top:1px solid var(--rule);}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:4px 5px;align-items:center;
  padding-block:7px;font-size:12.5px;color:var(--ink-3);}
.crumbs a{color:var(--ink-3);}
.crumbs a:hover{color:var(--brand);}
.crumbs [aria-current=page]{color:var(--ink-2);}
.crumbs .sep{color:var(--rule-2);}

/* ── 區塊 ───────────────────────────────────────────────── */
main{min-height:46vh;}

/* 區塊節奏：第一個區塊離導覽近一點，後面的區塊之間拉開。
   全站只用 --s* 這組間距，不要臨時寫數字。 */
.sec{padding-block:var(--s5) var(--s7);}
.sec + .sec{padding-top:0;}
.sec-head{margin-bottom:var(--s5);}
.sec-head h1{font-size:clamp(22px,3.2vw,30px);letter-spacing:-.01em;}
.sec-head h2{font-size:clamp(18px,2.4vw,23px);}
.sec-head .sub{color:var(--ink-3);margin-top:var(--s1);font-size:14.5px;}
/* .eyebrow 已全數移除（內容都與麵包屑重複），樣式一併刪掉 */

/* ── Banner ─────────────────────────────────────────────── */
.banner{margin-block:14px 4px;border-radius:var(--r);overflow:hidden;background:var(--bg-2);}
.banner img{width:100%;aspect-ratio:3.9;object-fit:cover;}
.banner-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none;}
.banner-track::-webkit-scrollbar{display:none;}
.banner-track > *{flex:0 0 100%;scroll-snap-align:start;}

/* ── 商品卡片 ───────────────────────────────────────────── */
.pm-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));}
.pm-grid.equip{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px;}

.pm{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);overflow:hidden;transition:box-shadow .15s,transform .15s;color:inherit;
}
.pm:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none;}
.pm .pic{background:var(--bg-2);aspect-ratio:16/9;overflow:hidden;}
.pm-grid.equip .pm .pic{aspect-ratio:1/1;background:#fff;}
.pm .pic img{width:100%;height:100%;object-fit:cover;}
.pm-grid.equip .pm .pic img{object-fit:contain;padding:12px;}
.pm .pic .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:13px;}
.pm .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1;}
.pm .nm{font-weight:700;font-size:16px;line-height:1.45;color:var(--ink);}
.pm .md{font-size:13px;color:var(--ink-3);}
.pm .tp{font-size:13.5px;color:var(--ink-2);line-height:1.65;}
.pm .intro{font-size:14px;color:var(--ink-2);line-height:1.7;}

/* 名稱與售價同一列：有售價才切 70:30，沒有的話名稱自己一整行
   （包了 flex 的話長名稱會被壓成七成寬、平白多折一行）。 */
.pm .nmrow{display:flex;gap:10px;align-items:baseline;}
.pm .nmrow .nm{flex:70 1 0;min-width:40%;}
.pm .pricebox{flex:30 1 0;display:flex;align-items:baseline;gap:2px;white-space:nowrap;justify-content:flex-end;}
.pm .prrow{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px;}
.pm .prrow .pricebox{flex:0 0 auto;justify-content:flex-start;}
.pm .pl{font-size:11.5px;color:var(--ink-3);margin-right:3px;}
.pm .pnt{font-size:12px;color:#c0392b;font-weight:700;}
.pm .price{font-size:14px;font-weight:700;color:#c0392b;letter-spacing:.2px;}

/* ⚠ 資料自帶的字級要壓掉。
   這幾個欄位存的是後台富文本的 innerHTML，裡面常帶 <span style="font-size:13.5px">
   這類 inline 樣式；不壓的話同一排價格會大小不一。舊站也是這樣處理的。 */
.pm .price *,.pm .nm .nm-d{font-size:inherit!important;color:inherit!important;}

/* 空狀態 */
.empty-wall{
  border:1px dashed var(--rule-2);border-radius:var(--r);padding:var(--s7) var(--s5);
  text-align:center;color:var(--ink-3);background:var(--bg-2);font-size:14.5px;
}
.empty-wall b{display:block;color:var(--ink-2);font-size:17px;margin-bottom:var(--s1);}

/* ── 專業設備：左篩選右卡片 ─────────────────────────────── */
.eq-layout{display:grid;grid-template-columns:248px minmax(0,1fr);gap:26px;align-items:start;}
.eq-filter{position:sticky;top:78px;border:1px solid var(--rule);border-radius:var(--r);background:#fff;overflow:hidden;}
.eq-filter .hd{padding:12px 14px;border-bottom:1px solid var(--rule);font-weight:700;font-size:15px;display:flex;align-items:center;}
.eq-filter .hd .n{margin-left:auto;font-size:12px;color:var(--ink-3);font-weight:400;}
.eq-filter .bd{max-height:62vh;overflow-y:auto;padding:8px 6px 12px;}
.eq-filter .lag{padding:9px 10px 3px;font-weight:700;font-size:14px;color:var(--ink);}
.eq-filter .med{padding:6px 10px 2px;font-size:12.5px;color:var(--ink-3);}
.eq-filter label{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 20px;font-size:14px;color:var(--ink-2);cursor:pointer;border-radius:5px;}
.eq-filter label:hover{background:var(--bg-2);}
.eq-filter input{width:15px;height:15px;accent-color:var(--brand);margin:0;}
.eq-filter .c{margin-left:auto;font-size:11.5px;color:var(--ink-3);}
.eq-filter .ft{padding:10px 12px;border-top:1px solid var(--rule);display:flex;gap:8px;}
@media (max-width:900px){
  .eq-layout{grid-template-columns:minmax(0,1fr);}
  .eq-filter{position:static;}
  .eq-filter .bd{max-height:300px;}
}

/* ── 商品內頁 ───────────────────────────────────────────── */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s7);
  align-items:center;padding-block:var(--s6);border-radius:var(--r);}
.hero.img-right{direction:rtl;}
.hero.img-right > *{direction:ltr;}
.hero.full{grid-template-columns:minmax(0,1fr);}

/* 右欄沒什麼料時（名稱、型號、價格卡都不印的商品有 17 件）改成單欄置中：
   圖在上、文字在下。兩欄硬撐會在右半邊留一大片空白，圖也被壓小。 */
.hero.thin{grid-template-columns:minmax(0,1fr);max-width:820px;margin-inline:auto;gap:var(--s5);}
.hero.thin .fig{margin-inline:auto;}

.hero .fig{border-radius:var(--r);overflow:hidden;background:var(--bg-2);}
.hero .fig img{width:100%;}
.hero h1{font-size:clamp(22px,3.4vw,32px);margin-bottom:var(--s2);letter-spacing:-.01em;}
.hero .model{color:var(--ink-3);font-size:15px;margin-bottom:var(--s3);}
.hero .topic{color:var(--ink-2);font-size:16px;line-height:1.85;max-width:var(--readw);}
@media (max-width:860px){.hero{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding-block:var(--s5);}}

/* 價格卡 */
.price-cards{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5);}
.price-card{border:1px solid var(--brand-line);background:var(--brand-soft);border-radius:var(--r);
  padding:var(--s3) var(--s4);min-width:170px;}
.price-card .k{font-size:12px;color:var(--brand);font-weight:700;letter-spacing:.04em;}
.price-card .v{font-size:22px;font-weight:700;color:var(--brand-ink);line-height:1.4;}
/* 同上：價格卡的金額也要壓掉資料自帶的字級 */
.price-card .v *,.price-card .k *{font-size:inherit!important;color:inherit!important;}
.price-card .n{font-size:12.5px;color:var(--ink-2);line-height:1.6;margin-top:3px;}

/* 服務保證方格 */
.svc{display:grid;gap:var(--s2);grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:var(--s5);border:1px solid var(--rule);border-radius:var(--r);padding:var(--s2);background:var(--bg-2);}
.svc div{border-radius:6px;padding:var(--s3) var(--s2);text-align:center;
  font-weight:500;font-size:14px;color:var(--ink-2);background:#fff;}
.svc div .ic{display:inline-block;font-size:12px;color:var(--brand);margin-right:5px;}

/* 功能說明：一件商品通常一筆，標題＋內容，不要再包一層框 */
.fn-sec{border-top:1px solid var(--rule);}
.fn-head{font-size:clamp(18px,2.4vw,22px);font-weight:700;margin-bottom:14px;}
.fn-head *{font-size:inherit!important;}

/* 分區頁籤 */
.tabs{display:flex;gap:3px;border-bottom:2px solid var(--rule);margin-bottom:var(--s5);
  overflow-x:auto;scrollbar-width:none;}
.tabs::-webkit-scrollbar{display:none;}
.tabs button{
  font:inherit;font-size:15px;font-weight:500;padding:10px 18px;border:none;background:none;cursor:pointer;
  color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;
}
.tabs button:hover{color:var(--brand);}
.tabs button[aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand);font-weight:700;}
.tabpanel[hidden]{display:none;}

/* 內容區塊 */
.blk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s6);align-items:center;
  padding-block:var(--s5);border-bottom:1px solid var(--rule);}
.blk:last-child{border-bottom:none;}
.blk.img-right{direction:rtl;}
.blk.img-right > *{direction:ltr;}

/* 整寬／純文字版型：欄位本身是滿版，但裡面的字要收斂行寬，
   不然一行會排到 148 個中文字（見 .rich 的說明）。 */
.blk.full,.blk.text{grid-template-columns:minmax(0,1fr);max-width:960px;}
.blk.text{max-width:var(--readw);}

.blk .fig{border-radius:var(--r);overflow:hidden;background:var(--bg-2);}
.blk h3{font-size:18px;margin-bottom:var(--s2);}
@media (max-width:860px){.blk{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding-block:var(--s4);}}

/* ── 富文本內容 ─────────────────────────────────────────
   ⚠ 行寬一定要壓。版面最大 1200px，長文不限寬的話一行會排到
   **148 個中文字**（舒適是 35–45 字）—— 眼睛回到下一行的行首會找不到位置。
   760px 約 45 字，是長文可讀的上限。
   兩欄版面裡的欄位本來就比這窄，所以這條規則不會讓它變形。 */
.rich{font-size:15.5px;line-height:1.9;color:var(--ink-2);max-width:var(--readw);}
.rich p{margin:0 0 .9em;}
.rich ul,.rich ol{margin:0 0 .9em;padding-left:1.4em;}
.rich li{margin-bottom:.3em;}
.rich img{border-radius:var(--r);margin:.6em 0;}
.rich table{border-collapse:collapse;width:100%;margin:.8em 0;font-size:14.5px;}
.rich th,.rich td{border:1px solid var(--rule);padding:7px 10px;text-align:left;}
.rich th{background:var(--bg-2);}
.rich a{text-decoration:underline;}
.rich h2,.rich h3,.rich h4{margin:1.2em 0 .5em;color:var(--ink);}

/* ── 目錄頁（網站地圖）────────────────────────────────── */
/* 目錄頁（網站地圖）：大類是卡片、次類是小標、子類是連結。
   ⚠ 卡片高度落差極大（最少 1 行、最多 28 行）。用 grid 會留下一堆參差的空洞，
   所以改用 CSS 多欄：卡片由上往下填、填滿才換欄，版面自然緊湊。
   break-inside:avoid 保證一張卡不會被切成兩半。 */
.map-grid{columns:3;column-gap:var(--s4);}
@media (max-width:1040px){.map-grid{columns:2;}}
@media (max-width:680px){.map-grid{columns:1;}}

.map-card{break-inside:avoid;page-break-inside:avoid;display:inline-block;width:100%;
  border:1px solid var(--rule);border-radius:var(--r);padding:var(--s4);background:#fff;
  margin-bottom:var(--s4);transition:border-color .15s,box-shadow .15s;}
.map-card:hover{border-color:var(--brand-line);box-shadow:var(--shadow);}
.map-card h3{font-size:15.5px;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--rule);}
.map-card h3 a{color:var(--ink);}
.map-card h3 a:hover{color:var(--brand);}

/* 次類小標：加一條短底線當群組起點，28 個項目的卡片才看得出分組 */
.map-card .m{font-size:11.5px;color:var(--ink-3);margin:var(--s3) 0 var(--s1);
  font-weight:700;letter-spacing:.04em;}
.map-card .m:first-of-type{margin-top:0;}
.map-card a{display:block;padding:2px 0 2px var(--s2);font-size:14px;color:var(--ink-2);
  line-height:1.6;border-left:2px solid var(--rule);margin-left:1px;}
.map-card a:hover{color:var(--brand);border-left-color:var(--brand);}

/* ── 搜尋結果 ───────────────────────────────────────────── */
.stabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5);}
.stabs a{padding:6px 14px;border:1px solid var(--rule);border-radius:999px;font-size:14px;color:var(--ink-2);}
.stabs a:hover{background:var(--bg-2);text-decoration:none;}
.stabs a.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:500;}

.sres{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;margin-bottom:var(--s6);max-width:900px;}
.sres .it{display:flex;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--rule);color:inherit;}
.sres .it:last-child{border-bottom:none;}
.sres .it:hover{background:var(--bg-2);text-decoration:none;}
.sres .it img{width:88px;height:58px;object-fit:cover;border-radius:5px;flex:0 0 auto;background:var(--bg-2);}
.sres .it > div{min-width:0;}
.sres .it .t{font-weight:700;color:var(--ink);font-size:15px;line-height:1.5;}
.sres .it .p{font-size:12px;color:var(--ink-3);margin-top:1px;}
.sres .it .d{font-size:13.5px;color:var(--ink-2);margin-top:var(--s1);line-height:1.65;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ── 公告 ───────────────────────────────────────────────── */
.nt-list{border-top:1px solid var(--rule);max-width:900px;}
.nt-list a{display:flex;gap:var(--s4);align-items:baseline;padding:var(--s3) var(--s2);
  border-bottom:1px solid var(--rule);color:inherit;border-radius:5px;}
.nt-list a:hover{background:var(--bg-2);text-decoration:none;}
.nt-list .d{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;}
.nt-list .s{font-weight:500;color:var(--ink);line-height:1.6;}

/* ── 服務中心 ───────────────────────────────────────────── */
.win-grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start;}
.win{border:1px solid var(--rule);border-radius:var(--r);padding:var(--s5);background:#fff;
  display:flex;flex-direction:column;}
.win h3{font-size:17px;margin-bottom:var(--s1);}
.win .ds{color:var(--ink-2);font-size:14px;margin-bottom:var(--s3);}
.win ul{margin:0 0 var(--s4);padding-left:1.2em;font-size:14px;color:var(--ink-2);line-height:1.8;}
.win .btn,.win .inline{margin-top:auto;}

/* ── 按鈕 ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-size:15px;
  padding:9px 18px;border-radius:var(--r);border:1px solid var(--rule-2);background:#fff;color:var(--ink);cursor:pointer;}
.btn:hover{background:var(--bg-2);text-decoration:none;}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink);color:#fff;}
.btn-sm{padding:5px 11px;font-size:13.5px;}

/* ── 頁尾 ─────────────────────────────────────────────────
   原本只有一排按鈕＋一行小字。改成三欄（聯絡／服務公告／商品分類），
   把常用入口放進來，頁尾才有實際用途。 */
.site-foot{margin-top:var(--s8);border-top:1px solid var(--rule);background:var(--bg-2);}
.foot-cols{display:grid;gap:var(--s5) var(--s6);padding-block:var(--s6) var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:start;}
.foot-cols .fc-wide{grid-column:span 1;}
.fc h2{font-size:13px;letter-spacing:.08em;color:var(--ink);margin-bottom:var(--s3);font-weight:700;}
.fc ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1);}
/* ⚠ 只能選到清單裡的連結。寫成 .fc a 的話權重 (0,1,1) 會贏過 .btn-primary 的 (0,1,0)，
   把頁尾那顆「服務中心」按鈕的白字染成深灰藍，按鈕看起來像壞掉。 */
.fc ul a{color:var(--ink-2);font-size:14px;}
.fc ul a:hover{color:var(--brand);}

.fc-contact li{display:flex;gap:var(--s2);align-items:baseline;font-size:14px;}
.fc-contact .k{color:var(--ink-3);font-size:12.5px;flex:0 0 auto;min-width:4.5em;}
.fc-contact a{font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums;}
.fc-btns{margin-top:var(--s3);}

.fc-cates{flex-direction:row!important;flex-wrap:wrap;gap:var(--s1) var(--s4)!important;}

.foot-info{border-top:1px solid var(--rule);padding-block:var(--s4) var(--s6);
  font-size:12.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);}
.foot-info .cp{margin-left:auto;}
.foot-info a{color:var(--ink-3);}

/* ── 分頁 ───────────────────────────────────────────────── */
.pager{display:flex;gap:var(--s1);justify-content:center;margin-top:var(--s6);flex-wrap:wrap;}
.pager a,.pager span{padding:6px 12px;border:1px solid var(--rule);border-radius:var(--r);font-size:14px;color:var(--ink-2);}
.pager a:hover{background:var(--bg-2);text-decoration:none;}
.pager .on{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ── 工具 ───────────────────────────────────────────────── */
.muted{color:var(--ink-3);}
.small{font-size:13.5px;}
.inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.tw{overflow-x:auto;}

/* ── 手機（≤980px）：頂欄收成漢堡，面板攤平成清單 ──────────── */
@media (max-width:980px){
  .burger{display:inline-flex;}
  .mainnav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:46;
    background:#fff;border-bottom:1px solid var(--rule);box-shadow:var(--shadow-md);
    flex-direction:column;align-items:stretch;gap:0;padding:var(--s2);
    max-height:calc(100vh - 49px);overflow-y:auto;
  }
  .site-top.nav-open .mainnav{display:flex;}
  .mainnav a{padding:11px 12px;font-size:15.5px;border-radius:6px;text-align:left;}

  /* 面板在手機上不浮動，直接接在清單底下攤開；遮罩也不需要 */
  .mm{position:static;box-shadow:none;border-bottom:none;}
  .mm .wrap{padding-block:var(--s4) var(--s5);}
  .mm-cols{grid-template-columns:minmax(0,1fr);gap:var(--s5);}
  .mm-lag{font-size:17px;}
  .mm-sml{font-size:13.5px;line-height:2.1;}
  .mm-veil{display:none!important;}

  /* 第二排在窄螢幕改成單行橫向捲，不要折行把畫面吃掉 */
  .subnav .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .subnav .wrap::-webkit-scrollbar{display:none;}
  .subnav .zones{flex-wrap:nowrap;}

  .crumbs .wrap{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .crumbs .wrap::-webkit-scrollbar{display:none;}
}

@media (max-width:560px){
  .logo{font-size:15.5px;}
  .logo small{display:none;}
  .appbar .wrap{gap:var(--s2);}
}

/* ── 手機（≤640px）─────────────────────────────────────── */
@media (max-width:640px){
  body{font-size:15.5px;}
  :root{--s5:18px;--s6:24px;--s7:32px;--s8:44px;}
  .sec{padding-block:var(--s4) var(--s6);}
  .sec-head{margin-bottom:var(--s4);}
  .pm-grid{gap:var(--s4);grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));}
  .pm-grid.equip{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));gap:var(--s3);}
  .pm .body{padding:var(--s3);}
  .pm .nmrow{flex-wrap:wrap;}
  .pm .nmrow .nm,.pm .pricebox{flex:1 1 100%;justify-content:flex-start;}
  .hero{padding-block:var(--s4);}
  .price-card{flex:1 1 100%;min-width:0;}
  .svc{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));}
  .map-grid,.win-grid{grid-template-columns:minmax(0,1fr);}
  .sres .it img{width:68px;height:46px;}
  .nt-list a{flex-direction:column;gap:var(--s1);}
  .foot-cols{gap:var(--s5);padding-block:var(--s5) var(--s4);}
  .foot-info .cp{margin-left:0;}
  .tabs button{padding:9px 14px;font-size:14.5px;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important;}
}

/* 視覺隱藏但螢幕閱讀器讀得到。用在 pj_name_on=0（前台不印名稱）的商品內頁，
   讓頁面仍然有一個 h1。 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ══ 會員網的登入／註冊／掃碼頁（layout/bare.php）══════════════════════════
   刻意不畫導覽：這幾頁的訪客都還沒登入，而會員網的導覽本身就是內容。 */
.gate{background:var(--bg-2);}
.gate-wrap{min-height:100svh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:var(--s4);padding:var(--s6) var(--s4);}
.gate-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--rule);
  border-radius:12px;padding:var(--s6) var(--s5);box-shadow:0 1px 3px rgba(22,32,43,.05);}
.gate-logo{display:block;text-align:center;font-size:19px;font-weight:700;color:var(--ink);
  line-height:1.3;margin-bottom:var(--s5);}
.gate-logo:hover{text-decoration:none;}
.gate-logo small{display:block;font-size:11.5px;font-weight:500;color:var(--ink-3);
  letter-spacing:.06em;margin-top:3px;}
.gate-h1{font-size:21px;line-height:1.4;margin:0 0 var(--s2);text-align:center;}
.gate-sub{font-size:14px;line-height:1.75;color:var(--ink-2);margin:0 0 var(--s4);text-align:center;}
.gate-msg{font-size:13.5px;line-height:1.7;border-radius:6px;padding:10px 12px;margin-bottom:var(--s4);}
.gate-msg.bad{background:#fdf1f1;border:1px solid #f3cccc;color:#9b2c2c;}
.gate-msg.ok{background:#eef8f2;border:1px solid #bfe3cd;color:#1f7a4d;}
.gate-gbtn{display:flex;justify-content:center;min-height:44px;}
.gate-or{display:flex;align-items:center;gap:var(--s3);margin:var(--s4) 0;
  color:var(--ink-3);font-size:12.5px;}
.gate-or::before,.gate-or::after{content:"";flex:1;height:1px;background:var(--rule);}
.gate-qrbtn{width:100%;}
.gate-qr{display:flex;justify-content:center;min-height:200px;align-items:center;margin:var(--s4) 0;}
.gate-qr canvas,.gate-qr img{border:1px solid var(--rule);border-radius:8px;}
.gate-note{font-size:12.5px;line-height:1.8;color:var(--ink-3);text-align:center;margin:var(--s4) 0 0;}
.gate-err{font-size:12.5px;color:#9b2c2c;margin-top:5px;}
.gate-foot{font-size:12px;color:var(--ink-3);margin:0;}
.gate-form .field{margin-bottom:var(--s4);}
.gate-form label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:5px;}
.gate-form .req{font-weight:500;font-size:11.5px;color:#b4553f;margin-left:4px;}
.gate-form input{width:100%;font:inherit;font-size:15px;padding:9px 11px;
  border:1px solid var(--rule-2);border-radius:6px;background:var(--surface);color:var(--ink);}
.gate-form input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand);}
.gate-form .hint{font-size:12px;color:var(--ink-3);margin-top:4px;line-height:1.6;}
.gate-submit{width:100%;margin-top:var(--s2);}

/* 我的會員資料 */
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:10px var(--s4);margin:0;}
dl.kv dt{font-size:13px;color:var(--ink-3);}
dl.kv dd{margin:0;font-size:14.5px;color:var(--ink);}