/* ══════════ 網站本體樣式 ══════════
   2026-07-27 改版:粗襯線工業風(樣張 2)
   ‧ 標題 Young Serif / 內文 Instrument Sans,自架
   ‧ 零卡片:靠細線、留白、對齊分層,不用邊框+圓角+陰影
   ‧ 按鈕維持直角(user 2026-07-27 決定)
   ‧ class 名稱一律沿用舊版,後台 editor.js 靠 data-e/data-sec 抓元素,不受影響
   ══════════════════════════════════ */
:root{
  /* — primitive — */
  --steel-050:oklch(97.2% .003 248); --steel-100:oklch(95.8% .004 248);
  --steel-200:oklch(92.5% .005 248); --steel-300:oklch(84.8% .006 250);
  --steel-400:oklch(70.0% .009 250);
  --ink-950:oklch(18% .009 250); --ink-800:oklch(43.5% .010 250);
  --ink-600:oklch(52% .009 250); --ink-450:oklch(59.8% .008 250);
  --white:oklch(99.2% .001 248);
  --brick-700:oklch(42.5% .150 30); --brick-600:oklch(50.5% .152 30); --brick-050:oklch(94% .022 30);

  /* — semantic — */
  /* 2026-07-27 user 指示:全站底色改純白,不要灰白 */
  --paper:oklch(100% 0 0);
  --bg-page:var(--paper); --bg-tile:var(--paper); --bg-inset:var(--steel-200);
  --bg-deep:var(--ink-950);
  --text-primary:var(--ink-950); --text-secondary:var(--ink-800);
  --text-muted:var(--ink-600); --text-faint:var(--ink-450);
  --rule:var(--steel-300); --rule-soft:var(--steel-200); --rule-firm:var(--steel-400);
  --accent:var(--brick-600); --accent-deep:var(--brick-700); --accent-wash:var(--brick-050);
  --focus-ring:var(--brick-700);
  --cta-bg:var(--accent); --cta-text:oklch(99% 0 0);
  --tile-border:var(--rule-soft); --chip-bg:transparent;
  --hover-wash:oklch(96.5% .004 248);

  /* — type — */
  --font-text:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Young Serif",Georgia,"Times New Roman",serif;
  --font-ui:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;
  --width-wide:100%; --width-normal:100%;   /* Young Serif 無可變字寬,保留變數避免舊規則失效 */

  --space-2xs:4px; --space-xs:9px; --space-sm:14px; --space-md:18px;
  --space-lg:28px; --space-xl:38px; --space-2xl:60px; --space-3xl:88px;
  --ease-out:cubic-bezier(0,0,.2,1);
  --shadow-tile:none;
  --edit:oklch(55% .17 262);      /* 編輯器強調色,刻意跟網站磚紅分開 */
  --edit-wash:oklch(96% .04 265);
  --bad:oklch(52% .19 27); --bad-wash:oklch(95% .05 25);
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip; scroll-behavior:smooth; -webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg-page);color:var(--text-primary);
  font-family:var(--font-text);font-size:17px;line-height:1.7;overflow-x:clip;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:400;margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:0}
/* 等寬數字只給要上下對齊的規格欄 —— 全域套會撐寬逗號句號 */
.specs,.fact,.f-base,.gauge{font-variant-numeric:tabular-nums}

.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(20px,3.5vw,64px)}
.label{font-family:var(--font-text);font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint)}

/* ── 頁首:刻意不做「wordmark + 連結 + 右側按鈕」那種標準列 ── */
.head{background:var(--bg-tile);border-bottom:1px solid var(--rule)}
.head-in{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-md) var(--space-xl);
  padding-block:var(--space-lg) var(--space-sm)}
.wordmark{display:inline-flex;align-items:baseline;gap:9px;text-decoration:none}
.wm-mark{width:0;height:0;overflow:hidden;flex:none}   /* 圓圈圖示拿掉,只留文字字標 */
.wm-text{display:inline-flex;align-items:baseline;gap:.3em;line-height:1}
.wm-text .sz{font-family:var(--font-display);font-weight:400;font-size:25px;letter-spacing:-.02em;color:var(--accent)}
/* 頁尾是深色底,磚紅要調亮才看得清楚 */
footer .wm-text .sz{color:oklch(66% .16 30)}
.wm-text .v{font-family:var(--font-display);font-weight:400;font-size:25px;letter-spacing:-.01em;color:var(--text-secondary)}
.head-nav{display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-xl);margin-left:auto}
.head-nav a{font-size:14.5px;font-weight:500;text-decoration:none;color:var(--text-secondary);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color 160ms var(--ease-out),border-color 160ms var(--ease-out)}
.head-nav a:hover{color:var(--text-primary);border-bottom-color:var(--rule-firm)}
.head-nav a.cur{color:var(--text-primary);font-weight:600;border-bottom-color:var(--accent)}

/* ── 手機漢堡選單:純 CSS(checkbox),公開站不載入 JS ── */
.navtog-input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.navtoggle{display:none}
/* 斷點 960px:導覽 7 項實測橫排最少要 888px(2026-07-27 加了 FAQ),留 72px 餘裕 */
@media (max-width:960px){
  .head-in{align-items:center;gap:var(--space-sm) var(--space-md);padding-block:var(--space-md)}
  .navtoggle{display:flex;flex-direction:column;justify-content:center;gap:5px;
    margin-left:auto;width:44px;height:44px;padding:11px 9px;cursor:pointer;
    border:1px solid var(--rule);background:transparent;flex:none}
  .navtoggle span{display:block;height:1.5px;background:var(--text-primary);
    transition:transform 180ms var(--ease-out),opacity 120ms var(--ease-out)}
  .navtog-input:checked ~ .navtoggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .navtog-input:checked ~ .navtoggle span:nth-child(2){opacity:0}
  .navtog-input:checked ~ .navtoggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  .navtog-input:focus-visible ~ .navtoggle{outline:2px solid var(--focus-ring);outline-offset:2px}
  .head-nav{display:none;width:100%;margin-left:0;flex-direction:column;gap:0;
    margin-top:var(--space-sm);border-top:1px solid var(--rule)}
  .navtog-input:checked ~ .head-nav{display:flex}
  .head-nav a{padding:15px 2px;font-size:16.5px;border-bottom:1px solid var(--rule-soft)}
  .head-nav a:hover{color:var(--text-primary);border-bottom-color:var(--rule-soft)}
  .head-nav a.cur{color:var(--accent-deep);border-bottom-color:var(--rule-soft)}
}

/* ── Hero:非對稱網格 ── */
.pitch{background:var(--bg-tile);border-bottom:1px solid var(--rule);position:relative;overflow:hidden}
.pitch-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.pitch-bg::after{content:"";position:absolute;inset:0;background:oklch(18% .009 250 / var(--ov,.45))}
.pitch.full .pitch-in{position:relative;z-index:1}
/* ⚠️ 2026-07-27 user 定案「亮版」:目前的背景照(不鏽鋼管路)是亮白調,
   所以框用白色磨砂、文字維持全站的碳黑,遮罩 overlay 設 0 讓照片保持通透。
   日後若換成深色照片,要做三件事:①文字改白 ②框改深色半透明 ③後台把遮罩調高。
   舊的「白字」規則已移除 —— 它們在亮照片上會整片消失。 */
.pitch.full .fact{border-color:rgba(0,0,0,.18);color:var(--text-secondary)}
.pitch-in{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:var(--space-2xl) clamp(40px,6vw,96px);
  align-items:start;padding-block:clamp(40px,5.5vw,104px) clamp(32px,4vw,64px)}
.pitch.side .pitch-in{grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);align-items:start}
.pitch.side .side-col{display:flex;flex-direction:column;gap:var(--space-md)}
.side-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;background:var(--bg-inset);display:block}
.pitch h1{font-weight:400;
  font-size:clamp(2rem,1.15rem + 3.5vw,4rem);letter-spacing:-.02em;line-height:1.04;max-width:16ch}

/* ── 標題框(2026-07-27 定案) ──
   無背景圖時:細灰線 + 黑色 8% 底,白底頁面也看得清楚
   有背景圖時(bgMode=full):深色半透明框壓在照片上,文字轉白 —— 參考 user 給的工程機械站版型 */
.pitch-copy{border:1px solid var(--rule-firm);background:rgba(0,0,0,.08);
  padding:clamp(24px,2.8vw,44px)}
.pitch-copy h1{max-width:none}

.pitch.full .pitch-in{grid-template-columns:minmax(0,1fr);
  padding-block:clamp(56px,8vw,132px) clamp(56px,8vw,132px)}
/* 白色磨砂框:38% 白 + 模糊,照片透得出來但字讀得到 */
.pitch.full .pitch-copy{max-width:min(470px,39%);border-color:rgba(0,0,0,.16);
  background:rgba(255,255,255,.38);backdrop-filter:blur(10px);padding:clamp(22px,2.1vw,30px)}
.pitch.full .pitch-copy h1{font-size:clamp(1.3rem,.95rem + 1.15vw,1.7rem);line-height:1.22;
  color:var(--ink-950)}
.pitch.full .pitch-copy h1 .lt{color:var(--ink-800)}
.pitch.full .pitch-copy .lede{color:var(--ink-800);border-top-color:rgba(0,0,0,.22);
  font-size:14px;max-width:none;margin-top:var(--space-md);padding-top:var(--space-md)}
.pitch.full .pitch-copy .pitch-cta{padding-top:0;margin-top:var(--space-md)}
.pitch.full .pitch-copy .cta{align-self:flex-start;width:auto;
  padding:11px 18px;font-size:13.5px;font-weight:600;gap:.55em}
/* 背景圖被移除時的佔位底(亮版:淺灰,才看得到白框與黑字) */
.pitch.full.noimg{background:var(--steel-200)}
.pitch h1 .lt{color:var(--text-secondary);letter-spacing:-.02em}
.pitch p.lede{margin-top:var(--space-lg);padding-top:var(--space-lg);border-top:1px solid var(--rule-firm);
  max-width:46ch;color:var(--text-secondary);font-size:17.5px}
.pitch-facts{display:grid;gap:0;margin-top:0;border-top:1px solid var(--rule-firm)}
.fact{background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;
  padding:var(--space-md) 0;font-size:15px;font-weight:500;color:var(--text-secondary)}
.pitch-cta{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-lg);
  padding-top:clamp(6px,1vw,18px)}
/* 拿掉規格清單後右欄變短 —— 沉到底跟左欄說明文齊平,留白集中在上方 */
.pitch-in > .pitch-cta{align-self:end;padding-bottom:6px}
.pitch-cta p{margin:0;font-size:14.5px;line-height:1.75;color:var(--text-muted);max-width:38ch}
.pitch-cta p a{color:var(--accent-deep);font-weight:600}
.pitch.full .pitch-cta p a{color:oklch(80% .10 30)}
.cta{display:inline-flex;align-items:center;justify-content:space-between;gap:.7em;
  background:var(--cta-bg);color:var(--cta-text);
  font-family:var(--font-text);font-size:15.5px;font-weight:600;letter-spacing:.002em;
  text-decoration:none;padding:18px 26px;border-radius:0;
  transition:background 160ms var(--ease-out),transform 120ms var(--ease-out)}
.cta:hover{background:var(--accent-deep)}
.cta:active{transform:scale(.985)}

/* 索引列(JUMP TO)於 2026-07-27 依 user 指示整個移除,樣式一併刪除 */

/* ── 精密鑄造流程:七步驟,照片 + 編號 + 說明 ── */
.casting{border-bottom:1px solid var(--rule);padding-block:clamp(48px,6vw,88px)}
.casting-head{margin-bottom:clamp(28px,3.5vw,52px);display:flex;flex-wrap:wrap;
  align-items:flex-end;justify-content:space-between;gap:var(--space-md) var(--space-lg)}
.ch-txt{max-width:62ch;flex:1 1 min(100%,52ch)}
.casting-head h2{font-size:clamp(1.6rem,1.1rem + 1.8vw,2.4rem);line-height:1.14;
  margin-top:var(--space-sm);letter-spacing:-.015em}
.casting-lede{margin-top:var(--space-md);color:var(--text-secondary);font-size:16px}
/* 八個步驟排成 4×2 網格(2026-07-28 user 指示改回,不要滑動) */
.steps{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.2vw,32px)}
.step{display:flex;flex-direction:column}
/* height:auto 不能省 —— img 上的 height 屬性會變成固定高度,把 aspect-ratio 蓋掉(2026-07-27 踩到) */
.step img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--bg-inset)}
.step-txt{padding-top:var(--space-sm);margin-top:2px}
.step .sn{font-family:var(--font-text);font-size:11px;font-weight:600;letter-spacing:.18em;
  color:var(--accent-deep);font-variant-numeric:tabular-nums}
.step h3{font-size:17px;line-height:1.25;margin-top:4px}
.step p{margin-top:6px;font-size:13.5px;line-height:1.6;color:var(--text-muted)}

@media (max-width:1000px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:720px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:460px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ── 產品分類條:banner 下方一排卡片,點了進該產品頁 ── */
.catstrip{border-bottom:1px solid var(--rule);background:var(--bg-page)}
.catstrip-in{display:grid;grid-template-columns:repeat(var(--cols,7),minmax(0,1fr));
  border-left:1px solid var(--rule-soft)}
.catcard{display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:1/1;gap:14px;padding:14px 10px;text-decoration:none;color:var(--text-secondary);
  border-right:1px solid var(--rule-soft);
  transition:background 160ms var(--ease-out),color 160ms var(--ease-out)}
.catcard:hover{background:var(--hover-wash);color:var(--text-primary)}
.catcard .ci{width:clamp(62px,6.4vw,100px);height:clamp(62px,6.4vw,100px);flex:none;stroke-width:1.05}
/* 白底去背產品圖:正方形,contain 才不會被裁到 */
.catcard .cp{width:100%;max-width:clamp(80px,8.2vw,128px);aspect-ratio:1/1;object-fit:contain;flex:none}
/* 有照片的格子:照片佔滿整格、不顯示文字,滑過時放大(user 2026-07-28 指定)。
   產品名稱仍寫在 alt 與 title 裡 —— 螢幕閱讀器與 Google 讀得到,滑鼠停留也看得到。 */
.catcard.has-photo{padding:0;overflow:hidden;gap:0}
.catcard.has-photo .cp{width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;
  transition:transform 380ms var(--ease-out)}
.catcard.has-photo .cn{display:none}
.catcard.has-photo:hover{background:transparent}
.catcard.has-photo:hover .cp{transform:scale(1.09)}
@media (prefers-reduced-motion:reduce){.catcard.has-photo:hover .cp{transform:none}}
/* min-height 撐兩行 —— 一行與兩行的卡片才會等高,底線不會參差 */
.catcard .cn{font-size:12px;line-height:1.3;text-align:center;text-wrap:balance;
  min-height:2.7em;display:flex;align-items:center}

@media (max-width:900px){
  .catstrip-in{grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--rule-soft)}
  .catcard{border-bottom:1px solid var(--rule-soft);padding:18px 8px 16px}
}
@media (max-width:520px){
  .catstrip-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .catcard .ci{width:48px;height:48px}
  .catcard .cn{font-size:11.5px}
}

/* ── 產品:卡片改成細線列表 ── */
.cat{padding-block:clamp(48px,5vw,96px) var(--space-2xl)}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.tile{background:transparent;border:0;border-top:1px solid var(--rule);border-radius:0;box-shadow:none;
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.82fr) auto;
  column-gap:clamp(20px,2.6vw,44px);row-gap:var(--space-sm);
  padding:var(--space-xl) var(--space-md) var(--space-xl) 0;position:relative;
  transition:background 160ms var(--ease-out)}
.tile:last-of-type{border-bottom:1px solid var(--rule)}
.tile:hover{background:var(--hover-wash);box-shadow:none}
.tile.wide{grid-column:span 1}
.tile-top{grid-column:1;grid-row:1;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md)}
.tile-icon{display:none}   /* 2026-07-27:列表式版面下圖示會孤立在中間,先收起。要找回來把這行改成 width:26px;height:26px */
.tile-photo{grid-column:1;width:100%;max-width:340px;aspect-ratio:16/10;object-fit:cover;
  border-radius:0;background:var(--bg-inset);margin-top:var(--space-sm)}
.tile h3{font-weight:400;font-size:clamp(1.35rem,1rem + 1.1vw,1.78rem);letter-spacing:-.018em;line-height:1.14}
.tile .model{font-family:var(--font-text);font-size:11.5px;font-weight:600;
  letter-spacing:.09em;color:var(--accent);margin-bottom:5px}
.tile .desc{grid-column:1;grid-row:2;font-size:15.5px;color:var(--text-secondary);max-width:48ch}
.specs{grid-column:2;grid-row:1 / span 2;align-self:start;
  display:grid;grid-template-columns:auto 1fr;gap:7px var(--space-md);font-size:14.5px;
  border-top:0;padding-top:3px}
.specs dt{color:var(--text-faint);font-weight:400}
.specs dd{margin:0;color:var(--text-primary);font-weight:500}
.tile-link{grid-column:3;grid-row:1 / span 2;align-self:start;
  font-size:14.5px;font-weight:600;color:var(--accent);text-decoration:none;white-space:nowrap;
  padding-top:3px;border-bottom:1px solid transparent;transition:border-color 160ms var(--ease-out)}
.tile-link:hover{border-bottom-color:var(--accent)}

/* ── 資訊面板:卡片改成邊注式兩欄 ── */
.info{padding-bottom:clamp(48px,5vw,96px)}
.info-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.panel{background:transparent;border:0;border-radius:0;position:relative}
/* 兩欄邊注佈局「只」給首頁資訊區 —— 聯絡表單卡(.formcard)與
   產品規格卡(.specpanel)也叫 .panel,但結構不同,套上去會被擠成窄欄 */
.info-grid > .panel{border-top:1px solid var(--rule);padding:var(--space-2xl) 0;
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.6fr);
  gap:var(--space-sm) clamp(32px,5vw,88px);align-items:start}
.info-grid > .panel:last-of-type{border-bottom:1px solid var(--rule)}
.info-grid > .panel .label{grid-column:1;display:block;margin-bottom:var(--space-xs)}
.info-grid > .panel h2,.info-grid > .panel h3{grid-column:1;font-weight:400;font-size:clamp(1.35rem,1.02rem + 1.1vw,1.9rem);
  letter-spacing:-.018em;line-height:1.16;margin-bottom:0}
.info-grid > .panel p{grid-column:2;font-size:16px;color:var(--text-secondary);max-width:62ch}
.info-grid > .panel p + p{margin-top:var(--space-md)}
/* 區塊底部的延伸連結(例如「更多關於工廠」) */
.panel-link{grid-column:2;justify-self:start;margin-top:var(--space-md);
  font-size:14.5px;font-weight:600;color:var(--accent-deep);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color 140ms var(--ease-out)}
.panel-link:hover{border-bottom-color:var(--accent)}
/* 手機:資訊區塊內部的「左標題右內文」要疊成單欄,
   不然標題會被擠成一個字一行(2026-07-29 實測 OEM 頁抓到) */
@media (max-width:820px){
  .info-grid > .panel{grid-template-columns:minmax(0,1fr);gap:var(--space-xs)}
  .info-grid > .panel p{grid-column:1}
  .panel-link{grid-column:1}
}
.info-grid > .panel > .label + h2,.info-grid > .panel > .label + h3{margin-top:-2px}

/* ── 常見問題:左標題右問答的兩欄邊注,跟資訊區塊同一個節奏 ── */
.faq{border-bottom:1px solid var(--rule);padding-block:clamp(48px,6vw,88px)}
.faq-in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:var(--space-lg) clamp(32px,5vw,88px);align-items:start}
.faq-head h2{font-size:clamp(1.5rem,1.05rem + 1.5vw,2.1rem);line-height:1.14;
  margin-top:var(--space-xs);letter-spacing:-.015em}
.faq-list{border-top:1px solid var(--rule)}
.qa{border-bottom:1px solid var(--rule-soft)}
.qa summary{cursor:pointer;list-style:none;padding:var(--space-md) 32px var(--space-md) 0;
  position:relative;font-size:16.5px;font-weight:600;color:var(--text-primary);
  transition:color 140ms var(--ease-out)}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent-deep)}
/* 用 CSS 畫加號/減號,不載入圖示字型 */
.qa summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:1.5px;
  background:var(--text-muted);transform:translateY(-50%)}
.qa summary::before{content:"";position:absolute;right:11px;top:50%;width:1.5px;height:11px;
  background:var(--text-muted);transform:translateY(-50%);
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.qa[open] summary::before{opacity:0;transform:translateY(-50%) rotate(90deg)}
.qa p{padding:0 32px var(--space-md) 0;margin:0;font-size:15px;line-height:1.65;
  color:var(--text-secondary);max-width:66ch}
@media (max-width:820px){
  .faq-in{grid-template-columns:minmax(0,1fr)}
  .qa summary{font-size:15.5px}
}

/* 頁首背景圖:文字是深色的,所以圖上壓一層白色漸層,左側(文字區)壓得比右側重 */
.pagehead.has-bg{position:relative;background-size:cover;background-position:center bottom;
  border-bottom:1px solid var(--rule);min-height:clamp(360px,28vw,460px);display:flex;align-items:center}
/* OEM 那張的視覺重心在中段(六邊形照片組),取中間才不會把它切一半;
   左側工程圖是有意義的元素,遮罩放淡一點讓它透出來 */
.oem-page .pagehead.has-bg{background-position:center 34%}
/* FAQ 頁:問答清單的分隔線移除(user 2026-07-29 指定),改用間距分段 */
.faq-page .faq-list{border-top:0}
.faq-page .qa{border-bottom:0}
.faq-page .qa summary{padding-block:var(--space-sm)}
.faq-page .qa + .qa{margin-top:var(--space-xs)}

/* FAQ 那張的主體是中央的大問號,用 bottom 會把它上半截掉 */
.faq-page .pagehead.has-bg{background-position:center 58%}
.oem-page .pagehead.has-bg::before{
  background:linear-gradient(100deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.82) 40%,rgba(255,255,255,.42) 74%,rgba(255,255,255,.22) 100%)}
.pagehead.has-bg > .wrap{width:100%}
.pagehead.has-bg::before{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.88) 38%,rgba(255,255,255,.55) 72%,rgba(255,255,255,.35) 100%)}
.pagehead.has-bg > .wrap{position:relative;z-index:1}

/* ── About 頁(2026-07-28 改版,版面參考山野電機) ── */

/* 沿革長文 + 直式廠房照:左文右圖,長文三段的高度剛好對得上直式照片 */
.story{padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--rule)}
.story-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,4.5vw,72px);align-items:start}
.story-txt h2{font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);line-height:1.16;
  letter-spacing:-.015em;margin-bottom:var(--space-lg)}
.story-body p{font-size:16px;color:var(--text-secondary);max-width:62ch}
.story-body p + p{margin-top:var(--space-md)}
.story-fig{margin:0}
.story-fig img{width:100%;height:auto;display:block;background:var(--bg-inset)}
.story-fig figcaption{margin-top:var(--space-xs);font-family:var(--font-text);font-size:11px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}

/* 兩個數字橫排,字級放大 —— 版面讓給真正有份量的那兩個 */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-lg);margin:clamp(36px,4.5vw,64px) 0 0;
  padding-top:clamp(26px,3.2vw,44px);border-top:1px solid var(--rule)}
.fact-i dt{font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.6rem,1.8rem + 2.8vw,4.2rem);line-height:.95;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;color:var(--accent)}
.fact-i dd{margin:var(--space-xs) 0 0;font-size:14px;line-height:1.4;color:var(--text-muted)}

/* 四張對稱卡片(山野那一排的對應) —— 靠細線分隔,不用邊框與陰影 */
.cards{padding-block:clamp(40px,5vw,72px);border-bottom:1px solid var(--rule)}
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,3.5vw,56px) clamp(32px,4vw,72px)}
.acard{padding-top:var(--space-md);border-top:1px solid var(--rule-firm)}
.acard h2{font-size:clamp(1.25rem,1rem + .9vw,1.65rem);line-height:1.2;
  letter-spacing:-.012em;margin:var(--space-2xs) 0 var(--space-sm)}
.acard p{font-size:15px;line-height:1.65;color:var(--text-secondary)}
.acard p + p{margin-top:var(--space-sm)}

@media (max-width:900px){
  .story-grid{grid-template-columns:minmax(0,1fr)}
  .story-fig{max-width:520px;margin-inline:auto}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-md)}
  .card-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:460px){.facts{grid-template-columns:minmax(0,1fr)}}

/* 首頁:產品分類條「下方那條線」以上全部保留,再往下的分隔線移除(user 2026-07-28 指定)。 */
.home-page .casting{border-bottom:0}
.home-page .info-grid > .panel{border-top:0}
.home-page .info-grid > .panel:last-of-type{border-bottom:0}

/* About 頁只保留兩條線:導覽列下方、頁首下方(user 2026-07-28 指定)。
   用 .about-page 限定,首頁與其他頁的分隔線不受影響。 */
.about-page .story,
.about-page .cards{border-bottom:0}
.about-page .facts,
.about-page .acard{border-top:0}
.about-page .info-grid > .panel{border-top:0}
.about-page .info-grid > .panel:last-of-type{border-bottom:0}

/* ── OEM 頁(2026-07-28) ── */

/* 四步驟流程:大編號 + 標題 + 說明,橫排四欄 */
.flow{padding-block:clamp(36px,4.5vw,64px);border-bottom:1px solid var(--rule)}
.flow-grid{list-style:none;margin:var(--space-lg) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
.flow-i{padding-top:var(--space-md);border-top:1px solid var(--rule-firm)}
.flow-i .fn{font-family:var(--font-display);font-size:13px;font-weight:400;
  letter-spacing:.12em;color:var(--accent);font-variant-numeric:tabular-nums}
.flow-i h2{font-size:clamp(1.05rem,.92rem + .5vw,1.3rem);line-height:1.24;
  margin:var(--space-2xs) 0 var(--space-sm)}
.flow-i p{font-size:14px;line-height:1.6;color:var(--text-secondary)}

/* 為什麼在這裡做:左文右圖 */
.why{padding-block:clamp(36px,4.5vw,64px);border-bottom:1px solid var(--rule)}
.why-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.why-txt h2{font-size:clamp(1.4rem,1.05rem + 1.2vw,1.95rem);line-height:1.18;
  letter-spacing:-.015em;margin:var(--space-2xs) 0 var(--space-md)}
.why-txt p{font-size:16px;color:var(--text-secondary);max-width:60ch}
.why-img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--bg-inset)}

/* 買家疑問:左標題右問答 */
.oemqa{padding-block:clamp(36px,4.5vw,64px)}
.oemqa-in{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:var(--space-lg) clamp(32px,5vw,88px);align-items:start}
.oemqa-head h2{font-size:clamp(1.4rem,1.05rem + 1.2vw,1.95rem);line-height:1.18;
  letter-spacing:-.015em;margin-top:var(--space-xs)}
.oemqa-list{margin:0;border-top:1px solid var(--rule)}
.oemqa-i{padding:var(--space-md) 0;border-bottom:1px solid var(--rule-soft)}
.oemqa-i dt{font-size:16px;font-weight:600;color:var(--text-primary)}
.oemqa-i dd{margin:var(--space-xs) 0 0;font-size:15px;line-height:1.62;
  color:var(--text-secondary);max-width:64ch}

@media (max-width:1000px){.flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .why-grid{grid-template-columns:minmax(0,1fr)}
  .oemqa-in{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){.flow-grid{grid-template-columns:minmax(0,1fr)}}

/* OEM 頁:流程區以下的分隔線全部移除(user 2026-07-29 指定),只留頁首下方那條 */
.oem-page .flow,
.oem-page .why{border-bottom:0}
.oem-page .flow-i{border-top:0}
.oem-page .info-grid > .panel{border-top:0}
.oem-page .info-grid > .panel:last-of-type{border-bottom:0}
.oem-page .oemqa-list{border-top:0}
.oem-page .oemqa-i{border-bottom:0}

/* ── 詢價帶:改深色,當作頁面的收尾重音 ── */
.quote-strip{background:var(--bg-deep);border-block:0;position:relative}
.qs-in{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;
  gap:var(--space-sm) clamp(32px,5vw,88px);padding-block:clamp(24px,2.4vw,38px)}
.qs-in h2{font-weight:400;color:var(--white);
  font-size:clamp(1.2rem,.95rem + 1.15vw,1.75rem);letter-spacing:-.018em;line-height:1.14;max-width:38ch}
.qs-in h2 .lt{color:oklch(72% .008 250)}
.qs-in p{font-size:15px;color:oklch(74% .008 250);margin-top:var(--space-xs)}
/* 深色帶上的詢價按鈕:磚紅底白字(2026-07-28 user 指定);hover 用更亮的紅,在深底上才看得出變化。
   width:auto + justify-self:start —— 不然 grid 會把它拉滿整欄,跟首頁那顆寬度差很多 */
.quote-strip .cta{background:var(--accent);color:var(--cta-text);
  width:auto;justify-self:start;padding:12px 20px;font-size:14px;gap:.55em}
.quote-strip .cta:hover{background:oklch(58% .16 30)}

/* ── 頁尾:深色,不做四欄連結牆的標準長相 ── */
footer{background:var(--bg-deep);color:oklch(70% .008 250);
  padding-block:clamp(22px,2.2vw,32px) clamp(18px,1.8vw,26px)}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--space-md) var(--space-xl)}
.f-grid .label{display:block;margin-bottom:var(--space-xs);color:oklch(58% .008 250)}
.f-grid p,.f-grid a{font-size:14px;line-height:1.62;color:oklch(78% .008 250);text-decoration:none;display:block}
.f-grid a:hover{color:var(--white)}
.f-base{margin-top:var(--space-xl);padding-top:var(--space-md);border-top:1px solid oklch(30% .012 250);
  display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;font-size:12px;color:oklch(58% .008 250)}

@media (max-width:1000px){
  .tile{grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
  .tile-link{grid-column:1;grid-row:3;align-self:start;padding-top:var(--space-xs)}
}
@media (max-width:820px){
  .pitch-in,.pitch.side .pitch-in{grid-template-columns:1fr}
  .head-nav{margin-left:0;width:100%;gap:var(--space-sm) var(--space-lg)}
  .panel{grid-template-columns:1fr;gap:var(--space-sm)}
  .panel p{grid-column:1}
  .qs-in{grid-template-columns:1fr;align-items:start}
}
@media (max-width:680px){
  .tile{grid-template-columns:minmax(0,1fr);row-gap:var(--space-md)}
  .tile .desc,.specs,.tile-link{grid-column:1}
  .specs{grid-row:auto}
  .tile-link{grid-row:auto}
  .tile-photo{max-width:100%}
}
/* 滿版背景圖模式:框在手機要放到滿寬,不然 52% 會把文字擠成一條(2026-07-27 實測) */
@media (max-width:820px){
  .pitch.full .pitch-copy{max-width:none}
  .pitch.full .pitch-in{padding-block:clamp(36px,7vw,72px)}
}
@media (max-width:520px){
  .cta{width:100%;font-size:14px;padding:15px 18px}
  .pitch.full .pitch-copy .cta{width:auto;font-size:13px;padding:12px 16px;
    white-space:nowrap;justify-content:center;gap:.5em}
  .pitch.full .pitch-copy h1{font-size:clamp(1.3rem,1rem + 1.6vw,1.6rem)}
}


/* ══════════ 編輯器外殼(只在編輯模式出現) ══════════ */
.ebar{position:fixed;left:0;right:0;top:0;height:52px;z-index:9000;
  background:oklch(22% .02 265);color:#fff;display:flex;align-items:center;gap:10px;
  padding:0 14px;font-family:var(--font-ui);font-size:13.5px}
.ebar .sp{flex:1}
.ebar b{font-weight:600;letter-spacing:-.01em}
.ebar button{background:oklch(30% .025 265);color:#fff;border:1px solid oklch(38% .03 265);
  border-radius:5px;padding:6px 11px;font:inherit;cursor:pointer;white-space:nowrap;
  transition:background 120ms var(--ease-out)}
.ebar button:hover{background:oklch(38% .04 265)}
.ebar button.on{background:var(--edit);border-color:var(--edit)}
.ebar button.pub{background:var(--green-600);border-color:var(--green-600);font-weight:600}
.ebar button.pub:hover{background:var(--green-700)}
.ebar button:disabled{opacity:.4;cursor:not-allowed}
.ebar .dot{width:7px;height:7px;border-radius:99px;background:oklch(65% .16 75);display:inline-block;margin-right:5px}
.ebar .dot.saved{background:oklch(70% .15 152)}
.ebar .st{font-size:12.5px;color:oklch(78% .02 265)}
body.editing{padding-top:52px}

/* 手機預覽框 */
body.phone #page{max-width:390px;margin:0 auto;border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  box-shadow:0 0 40px rgba(0,0,0,.10);min-height:calc(100vh - 52px);background:var(--bg-page)}

/* 可編輯元素 */
body.editing [data-e]{outline:1px dashed transparent;outline-offset:3px;border-radius:2px;
  transition:outline-color 120ms var(--ease-out),background 120ms var(--ease-out);cursor:text}
body.editing [data-e]:hover{outline-color:oklch(70% .12 262)}
body.editing [data-e]:focus{outline:2px solid var(--edit);background:oklch(98% .02 265)}
body.editing.phone [data-e]{outline-offset:1px}
[data-e].rl-bad{background:var(--bad-wash) !important;outline-color:var(--bad) !important;
  box-shadow:inset 0 -2px 0 var(--bad)}

/* 區塊控制 */
body.editing [data-sec]{position:relative}
body.editing [data-sec]::before{content:attr(data-name);position:absolute;left:0;top:0;z-index:60;
  background:var(--edit);color:#fff;font-family:var(--font-ui);font-size:10.5px;font-weight:600;
  padding:2px 8px;border-radius:0 0 4px 0;opacity:0;transition:opacity 120ms var(--ease-out);pointer-events:none}
body.editing [data-sec]:hover::before{opacity:1}
.sec-tools{position:absolute;right:8px;top:8px;z-index:61;display:none;gap:4px;
  background:var(--white);border:1px solid var(--rule);border-radius:6px;padding:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.12)}
body.editing [data-sec]:hover > .sec-tools{display:flex}
.sec-tools button{background:none;border:1px solid var(--rule);border-radius:4px;
  font-family:var(--font-ui);font-size:11.5px;padding:3px 8px;cursor:pointer;color:var(--ink-800);white-space:nowrap}
.sec-tools button:hover{background:var(--edit-wash);border-color:var(--edit);color:var(--edit)}
body:not(.editing) .sec-tools{display:none !important}
[data-sec].hidden-sec{display:none}
body.editing [data-sec].hidden-sec{display:block;opacity:.38;filter:grayscale(1)}

/* 浮動文字工具列 */
.ttool{position:absolute;z-index:9100;display:none;gap:3px;background:oklch(22% .02 265);
  border-radius:7px;padding:4px;box-shadow:0 6px 22px rgba(0,0,0,.26);font-family:var(--font-ui)}
.ttool.on{display:flex}
.ttool button{background:none;border:0;color:#fff;font:inherit;font-size:12.5px;
  padding:5px 9px;border-radius:4px;cursor:pointer;white-space:nowrap}
.ttool button:hover{background:oklch(34% .03 265)}
.ttool button.on{background:var(--edit)}
.ttool .div{width:1px;background:oklch(38% .03 265);margin:3px 2px}

/* 面板(背景圖設定 / 版本 / 產品編輯) */
.pop{position:fixed;right:14px;top:62px;z-index:9200;width:min(360px,calc(100vw - 28px));
  background:var(--white);border:1px solid var(--rule);border-radius:10px;
  box-shadow:0 14px 44px rgba(0,0,0,.20);font-family:var(--font-ui);display:none;max-height:calc(100vh - 80px);overflow:auto}
.pop.on{display:block}
.pop h4{margin:0;padding:13px 16px;border-bottom:1px solid var(--rule-soft);font-size:14px;font-weight:600;
  display:flex;align-items:center;gap:8px}
.pop h4 .sp{flex:1}
.pop h4 button{background:none;border:0;font-size:18px;cursor:pointer;color:var(--ink-600);line-height:1;padding:0 2px}
.pop .body{padding:14px 16px}
.pop label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-800);margin:0 0 5px}
.pop .fr{margin-bottom:14px}
.pop input[type=text],.pop textarea,.pop select{width:100%;border:1px solid var(--rule);border-radius:5px;
  padding:7px 9px;font:inherit;font-size:13.5px}
.pop textarea{min-height:70px;resize:vertical}
.pop input:focus,.pop textarea:focus,.pop select:focus{outline:0;border-color:var(--edit);box-shadow:0 0 0 3px var(--edit-wash)}
.pop .seg{display:flex;gap:0;border:1px solid var(--rule);border-radius:5px;overflow:hidden}
.pop .seg button{flex:1;background:var(--white);border:0;border-left:1px solid var(--rule);
  font:inherit;font-size:12.5px;padding:7px 4px;cursor:pointer;color:var(--ink-800)}
.pop .seg button:first-child{border-left:0}
.pop .seg button.on{background:var(--edit);color:#fff;font-weight:600}
.pop input[type=range]{width:100%}
.pop .drop{border:2px dashed var(--rule);border-radius:6px;padding:18px;text-align:center;
  font-size:12.5px;color:var(--ink-600);cursor:pointer}
.pop .drop:hover{border-color:var(--edit);background:var(--edit-wash);color:var(--edit)}
.pop .btn{background:var(--edit);color:#fff;border:0;border-radius:5px;padding:8px 13px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pop .btn.gh{background:none;color:var(--ink-800);border:1px solid var(--rule)}
.pop .btn.dg{background:none;color:var(--bad);border:1px solid var(--rule)}
.pop .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.pop .ver{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule-soft);font-size:12.5px}
.pop .ver .sp{flex:1;color:var(--ink-600)}
.pop .note{font-size:12px;color:var(--ink-600);line-height:1.55}
.pop .warnbox{background:var(--bad-wash);border:1px solid var(--bad);color:var(--bad);
  border-radius:5px;padding:9px 11px;font-size:12.5px;margin-bottom:12px}
.pop .warnbox b{display:block;margin-bottom:3px}

/* 產品卡片上的編輯鈕 */
.tile-tools{position:absolute;right:6px;top:6px;z-index:5;display:none;gap:4px}
body.editing .tile:hover .tile-tools,
body.editing .catcard:hover .tile-tools{display:flex}
body.editing .catcard{position:relative;cursor:default}
.tile-tools button{background:var(--white);border:1px solid var(--rule);border-radius:4px;
  font-family:var(--font-ui);font-size:11px;padding:3px 7px;cursor:pointer;color:var(--ink-800)}
.tile-tools button:hover{background:var(--edit-wash);border-color:var(--edit);color:var(--edit)}
.addtile{border:2px dashed var(--rule);background:none;border-radius:4px;min-height:150px;
  display:none;align-items:center;justify-content:center;font-family:var(--font-ui);
  font-size:14px;color:var(--ink-600);cursor:pointer}
body.editing .addtile{display:flex}
.addtile:hover{border-color:var(--edit);color:var(--edit);background:var(--edit-wash)}

/* 紅線總表 */
.rlpanel{position:fixed;left:14px;bottom:14px;z-index:9150;width:min(380px,calc(100vw - 28px));
  background:var(--bad-wash);border:1px solid var(--bad);border-radius:9px;padding:12px 14px;
  font-family:var(--font-ui);font-size:12.5px;color:var(--bad);display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.16);max-height:40vh;overflow:auto}
.rlpanel.on{display:block}
.rlpanel b{display:block;margin-bottom:5px;font-size:13px}
.rlpanel ul{margin:0;padding-left:17px}
.rlpanel li{margin-top:3px}
.rlpanel code{background:rgba(0,0,0,.07);padding:1px 4px;border-radius:3px;font-family:ui-monospace,Menlo,monospace}

.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);
  background:oklch(22% .02 265);color:#fff;padding:11px 18px;border-radius:7px;font-size:13.5px;
  font-family:var(--font-ui);opacity:0;pointer-events:none;z-index:9500;
  transition:opacity 170ms var(--ease-out),transform 170ms var(--ease-out)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.bad{background:var(--bad)}
.enter-btn{position:fixed;right:14px;bottom:14px;z-index:8000;background:oklch(22% .02 265);color:#fff;
  border:0;border-radius:99px;padding:11px 18px;font-family:var(--font-ui);font-size:13.5px;font-weight:600;
  cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.22)}
body.editing .enter-btn{display:none}
@media print{.ebar,.enter-btn,.pop,.ttool,.rlpanel,.sec-tools,.tile-tools,.addtile{display:none !important}}

/* ══════════ 雲端版新增:多人協作 ══════════ */
.ebar .who{font-size:12.5px;color:oklch(78% .02 265)}
.ebar .lnk{color:oklch(80% .02 265);text-decoration:none;font-size:12.5px;padding:6px 8px;white-space:nowrap}
.ebar .lnk:hover{color:#fff;text-decoration:underline}
.lockmsg{font-family:var(--font-ui);font-size:11px;font-weight:600;color:var(--bad);
  align-self:center;padding:0 4px;white-space:nowrap}
body.editing [data-sec].locked{position:relative}
body.editing [data-sec].locked::after{content:"";position:absolute;inset:0;z-index:55;
  background:repeating-linear-gradient(135deg,transparent,transparent 9px,
    oklch(52% .19 27 / .045) 9px,oklch(52% .19 27 / .045) 18px);pointer-events:none}
body.editing [data-sec].locked [data-e]{cursor:not-allowed;outline-color:transparent !important}
body.editing [data-sec].locked .sec-tools{display:flex}
a.enter-btn{text-decoration:none;display:inline-block}

/* ══════════ 內頁 ══════════ */
.pagehead{background:var(--bg-tile);border-bottom:1px solid var(--rule);
  padding-block:clamp(32px,5vw,64px)}
.pagehead h1{font-weight:400;
  font-size:clamp(1.75rem,1.15rem + 2.4vw,2.9rem);letter-spacing:-.028em;line-height:1.06;max-width:20ch}
.pagehead .lede{margin-top:var(--space-md);max-width:60ch;font-size:1.0625rem;color:var(--text-secondary)}
.pagenote{margin-top:var(--space-lg);font-size:13px;color:var(--text-muted);max-width:80ch}
.todo-inline{background:var(--edit-wash);border:1px dashed var(--edit);border-radius:0;
  padding:9px 12px;font-family:var(--font-ui);font-size:12.5px;color:var(--edit)}

/* 聯絡頁 */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--space-md);align-items:start}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.formcard{padding-top:var(--space-lg)}
.formcard h3{font-weight:400;font-size:1.35rem;letter-spacing:-.02em}
.formnote{font-size:13.5px;color:var(--text-muted);margin-top:4px;margin-bottom:var(--space-lg)}
.rfq label{display:block;font-size:12.5px;font-weight:600;color:var(--text-secondary);
  margin-bottom:var(--space-md)}
.rfq input[type=text],.rfq input[type=email],.rfq input[type=tel],.rfq select,.rfq textarea{
  width:100%;margin-top:5px;border:1px solid var(--rule);border-radius:0;
  padding:9px 11px;font:inherit;font-size:14.5px;font-weight:400;color:var(--text-primary);
  background:var(--bg-tile);transition:border-color 120ms var(--ease-out),box-shadow 120ms var(--ease-out)}
.rfq textarea{resize:vertical;line-height:1.6}
.rfq input:focus,.rfq select:focus,.rfq textarea:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}
.rfq .row2{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-md)}
@media (max-width:560px){.rfq .row2{grid-template-columns:1fr}}
.rfq .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rfq button.cta{border:0;cursor:pointer;margin-top:var(--space-xs)}
.sent{background:var(--accent-wash);border:1px solid var(--accent);border-radius:0;
  padding:var(--space-lg);color:var(--accent-deep);font-size:15px;line-height:1.6}

/* ══════════ 產品詳細頁 ══════════ */
.backlink{display:inline-block;font-size:13px;font-weight:500;color:var(--accent-deep);
  text-decoration:none;margin-bottom:var(--space-md)}
.backlink:hover{text-decoration:underline}
.pagehead .model{font-family:var(--font-display);font-stretch:var(--width-wide);
  font-size:11.5px;font-weight:700;letter-spacing:.075em;color:var(--accent-deep);margin-bottom:6px}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:var(--space-md);align-items:start}
@media (max-width:820px){.detail-grid{grid-template-columns:1fr}}
/* 產品說明三欄(Overview/應用/選型)都還沒填時,不要留左邊一大片空洞 */
/* 說明三欄還沒填時:左欄放產品大圖、右欄放規格,不要塌成中間一條
   (2026-07-30 修:原本整塊縮到 760px,右邊留一大片空白) */
.detail-grid.no-detail{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  max-width:none;gap:clamp(28px,3.5vw,56px)}
.detail-grid.no-detail .specpanel .tile-photo{display:none}
.detail-hero{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--bg-inset)}
@media (max-width:820px){.detail-grid.no-detail{grid-template-columns:minmax(0,1fr)}}
/* 詢價按鈕:窄欄裡不要撐滿整列 */
.specpanel .cta{display:inline-flex;width:auto;text-align:left}
.specpanel{position:sticky;top:var(--space-md);padding-top:var(--space-md)}
@media (max-width:820px){.specpanel{position:static}}
.bigspecs{font-size:13.5px;gap:7px var(--space-md)}
.bigspecs dt{padding-top:1px}
.specpanel .cta{display:block;text-align:center}

/* ══════════ 文章 ══════════ */
.postlist{display:flex;flex-direction:column;gap:var(--space-sm)}
.postrow{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:var(--space-lg);
  background:var(--bg-tile);border:1px solid var(--tile-border);border-radius:0;
  padding:var(--space-lg);text-decoration:none;
  transition:border-color 140ms var(--ease-out),box-shadow 140ms var(--ease-out)}
.postrow:hover{border-color:var(--rule);box-shadow:var(--shadow-tile)}
.postrow.is-draft{border-style:dashed;opacity:.75}
.pr-date{font-size:12.5px;color:var(--text-faint);font-variant-numeric:tabular-nums;padding-top:3px}
.postrow h3{font-weight:400;font-size:1.2rem;letter-spacing:-.018em}
.postrow p{font-size:13.5px;color:var(--text-muted);margin-top:5px}
@media (max-width:640px){.postrow{grid-template-columns:1fr;gap:var(--space-xs)}}
/* ── 產品總覽頁(2026-07-30,結構參考 user 指定的設計) ── */

/* ── 產品頁(2026-07-30 套用 user 指定的設計) ── */

/* 通用的紅色短線裝飾 */
.rule{display:block;width:44px;height:3px;background:var(--accent);margin:var(--space-md) 0}

/* 頁首 */
.pgh{background-size:cover;background-position:center bottom;position:relative;
  min-height:clamp(360px,28vw,460px);display:flex;align-items:center;
  border-bottom:1px solid var(--rule)}
/* 2026-07-30 user:圖要原色,不加遮罩。這張左半是明亮落地窗,深色字壓上去仍可讀。 */
.pgh-in{position:relative;z-index:1;width:100%;padding-block:clamp(36px,4.5vw,60px)}
.pgh .crumb{margin-bottom:var(--space-md)}
.pgh .crumb .on{color:var(--accent-deep);font-weight:600}
.pgh h1{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);line-height:1.04;letter-spacing:-.025em;
  text-transform:uppercase;margin-bottom:var(--space-lg);color:var(--ink-950);
  text-shadow:0 0 18px rgba(255,255,255,.92),0 0 42px rgba(255,255,255,.75)}
.pgh .lede{max-width:48ch;color:var(--ink-950);font-size:16px;font-weight:500;
  text-shadow:0 0 14px rgba(255,255,255,.95),0 0 30px rgba(255,255,255,.8)}

/* 置中的區段標題 */
.sechead{text-align:center;margin-bottom:clamp(28px,3.4vw,48px)}
.sechead-t{display:block;font-family:var(--font-text);font-size:13px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep)}
.sechead .rule{margin:var(--space-sm) auto 0}

/* 左側分類框 + 右側卡片 */
.prod-layout{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);
  gap:clamp(28px,3.4vw,56px);align-items:start}
.pnav{position:sticky;top:var(--space-lg);border:1px solid var(--rule)}
.pnav .label{display:block;margin:0;padding:14px 16px;
  background:var(--bg-deep);color:#fff;letter-spacing:.16em}
.pnav ul{list-style:none;margin:0;padding:0}
.pnav li + li{border-top:1px solid var(--rule-soft)}
.pnav a{display:block;padding:13px 16px 13px 15px;font-size:14px;line-height:1.35;
  color:var(--text-secondary);text-decoration:none;border-left:3px solid transparent;
  transition:background 140ms var(--ease-out),color 140ms var(--ease-out),border-color 140ms var(--ease-out)}
.pnav a:hover{background:var(--hover-wash);color:var(--text-primary);border-left-color:var(--rule-firm)}
.pnav a.on{background:var(--hover-wash);color:var(--accent-deep);font-weight:600;
  border-left-color:var(--accent)}

/* 編號卡片:淺灰底 */
.prodgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(18px,2vw,26px)}
.pitem{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--steel-050);padding:clamp(20px,2.2vw,28px);
  transition:background 180ms var(--ease-out),transform 180ms var(--ease-out)}
.pitem:hover{background:var(--steel-100);transform:translateY(-2px)}
.pitem-no{font-family:var(--font-display);font-size:clamp(1.8rem,1.4rem + 1.4vw,2.4rem);
  line-height:1;color:var(--steel-300);font-variant-numeric:tabular-nums;
  margin-bottom:var(--space-md)}
.pitem .rule{width:34px;height:2px;margin:var(--space-xs) 0 var(--space-md)}
.pitem-img{display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:var(--space-md)}
.pitem-img img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform 340ms var(--ease-out)}
.pitem:hover .pitem-img img{transform:scale(1.04)}
.pitem-img svg{width:46%;height:46%;margin:27% auto;display:block;color:var(--text-faint)}
.pitem-name{display:block;font-family:var(--font-display);font-size:clamp(1rem,.94rem + .3vw,1.15rem);
  line-height:1.24;color:var(--text-primary);text-transform:uppercase;letter-spacing:.01em}
.pitem-spec{display:block;margin-top:var(--space-xs);font-size:13px;line-height:1.5;
  color:var(--text-muted);font-variant-numeric:tabular-nums}
.pitem-more{display:flex;align-items:center;gap:.5em;margin-top:auto;
  padding-top:var(--space-md);font-family:var(--font-text);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-deep)}
.pitem-go{transition:transform 200ms var(--ease-out)}
.pitem:hover .pitem-go{transform:translateX(4px)}

/* 2026-09-01「不上線」的產品卡 —— 只有後台看得到(前台的卡片已在程式端濾掉)。
   虛線框＋淡化＋左上角紅標,一眼分得出哪張還沒對外。 */
.pitem.is-off{position:relative;opacity:.62;outline:1px dashed var(--steel-300);outline-offset:-1px}
.pitem-off{position:absolute;top:8px;left:8px;z-index:2;
  background:var(--accent-deep);color:#fff;font-family:var(--font-text);
  font-size:11px;font-weight:600;letter-spacing:.1em;padding:3px 8px;border-radius:2px}

/* 深色 CTA 橫幅 */
.prodband{padding-block:clamp(24px,3vw,44px)}
.prodband-in{background:var(--bg-deep);color:oklch(78% .008 250);
  padding:clamp(26px,3vw,44px);display:flex;flex-wrap:wrap;gap:var(--space-lg);
  align-items:center;justify-content:space-between}
.prodband h2{color:#fff;font-size:clamp(1.3rem,1.1rem + .9vw,1.8rem);line-height:1.2}
.prodband h2 .hl{color:oklch(66% .16 30)}
.prodband p{margin-top:var(--space-sm);font-size:14px;line-height:1.6;max-width:56ch}
.prodband .cta{flex:none;width:auto;padding:13px 22px;font-size:14px}

@media (max-width:1000px){
  /* 手機/平板:分類框改成橫向可滑的一排,放在卡片上方 */
  .prod-layout{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}
  .pnav{position:static;border:0;border-bottom:1px solid var(--rule)}
  .pnav .label{background:transparent;color:var(--text-faint);padding:0 0 var(--space-sm)}
  .pnav ul{display:flex;gap:var(--space-xs);overflow-x:auto;scrollbar-width:none}
  .pnav ul::-webkit-scrollbar{display:none}
  .pnav li + li{border-top:0}
  .pnav a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:6px 2px 8px}
  .pnav a:hover{border-left:0;border-bottom-color:var(--rule-firm)}
  .pnav a.on{border-left:0;border-bottom-color:var(--accent)}
  .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){.prodgrid{grid-template-columns:minmax(0,1fr)}}

/* ── 產品詳細頁(2026-07-30 重新設計,左選單移除) ── */
.pd-top{padding-block:clamp(32px,4vw,60px)}
.pd-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(32px,4.5vw,72px);align-items:start}
.pd-photo{background:var(--bg-inset);aspect-ratio:4/3;overflow:hidden;display:block}
.pd-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pd-photo svg{width:46%;height:46%;margin:27% auto;display:block;color:var(--text-faint)}

.pd-spec{position:sticky;top:var(--space-lg)}
.pd-spec .label{display:block;margin-bottom:var(--space-md)}
.pd-spec dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-sm) var(--space-lg);
  margin:0 0 var(--space-lg);padding-bottom:var(--space-lg);border-bottom:1px solid var(--rule)}
.pd-spec dt{font-size:13px;color:var(--text-faint);letter-spacing:.04em;padding-top:2px}
.pd-spec dd{margin:0;font-size:16px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.pd-spec .cta{display:inline-flex;width:auto}
.pd-note{margin-top:var(--space-md);font-size:13px;line-height:1.55;color:var(--text-muted);
  max-width:34ch}

/* 說明區:單欄置中限寬,長文才讀得舒服 */
.pd-body{padding-block:clamp(28px,3.5vw,52px);border-top:1px solid var(--rule)}
.pd-body-in{max-width:70ch}
.pd-block + .pd-block{margin-top:clamp(28px,3.4vw,44px)}
.pd-block h2{font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem);line-height:1.2;
  margin-bottom:var(--space-sm)}
.pd-block p{font-size:16px;line-height:1.72;color:var(--text-secondary)}
.pd-block p + p{margin-top:var(--space-md)}

/* 其他構造:取代原本的左選單 */
.pd-others{padding-block:clamp(32px,4vw,56px);border-top:1px solid var(--rule)}

@media (max-width:900px){
  .pd-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}
  .pd-spec{position:static}
}

/* ── Blog 列表(2026-07-29):卡片網格 + 分類列 ── */
.catbar{border-bottom:1px solid var(--rule)}
.catbar-in{display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-lg);padding-block:var(--space-md)}
.catbar a{font-size:14px;font-weight:500;text-decoration:none;color:var(--text-muted);
  padding-bottom:3px;border-bottom:1px solid transparent;
  transition:color 140ms var(--ease-out),border-color 140ms var(--ease-out)}
.catbar a:hover{color:var(--text-primary)}
.catbar a.on{color:var(--text-primary);font-weight:600;border-bottom-color:var(--accent)}

.bloglist{padding-block:clamp(36px,4.5vw,64px)}
.postgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(28px,3.4vw,52px) clamp(24px,2.8vw,40px)}
.pcard{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.pc-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:var(--bg-inset);
  transition:opacity 200ms var(--ease-out)}
.pcard:hover .pc-img{opacity:.86}
.pc-none{background:var(--steel-200)}
.pc-meta{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-sm);align-items:baseline;
  margin-top:var(--space-sm);font-family:var(--font-text);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase}
.pc-cat{color:var(--accent-deep)}
.pc-date{color:var(--text-faint);font-variant-numeric:tabular-nums}
.pcard h2{font-size:clamp(1.15rem,1rem + .55vw,1.45rem);line-height:1.24;
  margin:var(--space-2xs) 0 var(--space-xs);letter-spacing:-.012em}
.pcard:hover h2{color:var(--accent-deep)}
.pcard p{font-size:14.5px;line-height:1.6;color:var(--text-muted)}
.pcard.is-draft{opacity:.55}

@media (max-width:1000px){.postgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.postgrid{grid-template-columns:minmax(0,1fr)}}

/* ── 文章頁(2026-07-29) ── */
.postwrap{padding-block:clamp(36px,4.5vw,64px)}
/* 長文靠左貼邊很難讀:欄寬限制 + 置中,是閱讀舒適度的基本 */
.article-body{max-width:68ch;margin-inline:auto;font-size:1.0625rem;line-height:1.78;color:var(--text-secondary)}
.crumb{display:flex;gap:.5em;align-items:center;font-family:var(--font-text);font-size:12.5px;
  color:var(--text-muted);margin-bottom:var(--space-sm)}
.crumb a{color:var(--accent-deep);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.post-page .pagehead .lede{margin-top:var(--space-md)}
.morereads{max-width:68ch;margin:clamp(40px,5vw,72px) auto 0;padding-top:var(--space-lg);
  border-top:1px solid var(--rule)}
.morereads ul{list-style:none;margin:var(--space-sm) 0 0;padding:0}
.morereads li{padding:var(--space-xs) 0}
.morereads a{font-family:var(--font-display);font-size:1.1rem;color:var(--text-primary);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color 140ms var(--ease-out)}
.morereads a:hover{border-bottom-color:var(--accent)}
.post-page .backlink{display:inline-block;max-width:68ch;margin:clamp(32px,4vw,56px) auto 0;
  width:100%}
.article-body h2{font-weight:400;font-size:1.5rem;margin:1.6em 0 .5em;color:var(--text-primary)}
.article-body h3{font-weight:400;font-size:1.22rem;margin:1.4em 0 .4em;color:var(--text-primary)}
.article-body p{margin-bottom:1em}
.article-body ul,.article-body ol{padding-left:1.3em;margin-bottom:1em}
.article-body li{margin-bottom:.35em}
.article-body a{color:var(--accent-deep)}

/* ── 文章頁改版(2026-08-12,user 指定「版面照 ballvalves」) ──
   ① 內文靠左 + 右側欄(放 More from the plant),取代原本的置中單欄
   ② 頁首不畫下框線(user 指定拿掉,只拿文章頁的,其他頁保留)
   ③ 內文兩端對齊。⚠️ hyphens 不能拿掉 —— 英文只開 justify 不開斷字,
      字距會被撐開成不均勻的空隙(rivers),看起來比不對齊還糟。
   ④ 圖與表格的樣式:2026-08-12 之前站上沒有文章用過,所以從來沒寫。 */
.post-page .postwrap .wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(32px,4vw,72px);align-items:start}
.post-page .article-body{max-width:none;margin-inline:0;grid-column:1}
.post-page .morereads{grid-column:2;grid-row:1;max-width:none;margin:0;
  padding-top:0;border-top:0;position:sticky;top:24px}
.post-page .backlink{grid-column:1;margin-top:clamp(32px,4vw,56px)}
.post-page .pagehead{border-bottom:0}
/* 文章標題放寬(2026-08-19 user:「標題我要整排的」)——20ch 是產品頁短標題的設計,長文標題會折成四行 */
.post-page .pagehead h1{max-width:none}
/* 副標行長平衡(2026-08-19 user:「不要像截斷」)——balance 讓斷行落在語意處、兩行等長 */
.post-page .pagehead .lede{text-wrap:balance;max-width:58ch}
.post-page .article-body p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* 圖:後台貼進來的圖是原始像素寬,沒有這條會撐破欄寬 */
.article-body img{max-width:100%;height:auto;display:block}
.article-body figure{margin:0 0 var(--space-lg)}
/* 表格(2026-08-12 user 要求「改成表格」= 要看得出格子,原本只有橫線像散文):
   完整格線 + 標題列淺底,規格對照表用這種最好讀 —— 眼睛沿著欄位掃不會跑掉行。 */
.article-body table{width:100%;border-collapse:collapse;margin:1.5em 0;
  font-size:.96rem;line-height:1.5;border:1px solid var(--rule)}
.article-body th{text-align:left;font-family:var(--font-display);font-weight:400;
  /* --bg-tile 在這一頁是純白,標題列會看不出來,所以直接給一個淡灰 */
  color:var(--text-primary);background:oklch(96.8% .004 250);padding:.6em .9em;
  border-right:1px solid var(--rule);border-bottom:1.5px solid var(--text-primary)}
.article-body td{padding:.62em .9em;border-right:1px solid var(--rule);
  border-bottom:1px solid var(--rule);vertical-align:top}
.article-body th:last-child,.article-body td:last-child{border-right:0}
.article-body tr:last-child td{border-bottom:0}
@media(max-width:900px){
  /* ⚠️ 必須是 minmax(0,1fr) 不能寫 1fr —— 1fr 的最小寬是 auto,
     裡面那張 nowrap 的表格會把整欄撐到比螢幕寬(實測 390px 螢幕變成 486px 爆版) */
  .post-page .postwrap .wrap{grid-template-columns:minmax(0,1fr)}
  .post-page .morereads{grid-column:1;grid-row:auto;position:static;
    margin-top:40px;padding-top:24px;border-top:1px solid var(--rule)}
  /* 窄螢幕欄寬不夠,兩端對齊的空隙會很醜,改回自然斷行 */
  .post-page .article-body p{text-align:left}
  /* 表格放不下時讓它自己橫向捲,不要撐破頁面 */
  .article-body table{display:block;overflow-x:auto;white-space:nowrap}
}
.emptystate{background:var(--bg-tile);border:1px dashed var(--rule);border-radius:0;
  padding:var(--space-3xl) var(--space-lg);text-align:center;color:var(--text-muted);font-size:14.5px}

/* ══════════ 詢價收件匣 ══════════ */
.inq{margin-bottom:var(--space-sm)}
.inq.unseen{border-left:3px solid var(--accent)}
.inq.seen{opacity:.72}
.inq-top{display:flex;justify-content:space-between;gap:var(--space-md);flex-wrap:wrap;
  margin-bottom:var(--space-sm)}
.inq-top h3{font-weight:400;font-size:1.12rem}
.inq-top a{color:var(--accent-deep);font-size:13.5px}
.inq-when{font-size:12.5px;color:var(--text-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.newdot{background:var(--accent-deep);color:#fff;border-radius:0;padding:1px 7px;
  font-size:10.5px;font-weight:600;font-family:var(--font-ui)}
.inq-msg{margin-top:var(--space-sm);padding-top:var(--space-sm);border-top:1px solid var(--rule-soft);
  font-size:13.5px;color:var(--text-secondary);white-space:pre-wrap}
.inq-acts{display:flex;gap:var(--space-xs);margin-top:var(--space-md);flex-wrap:wrap}
.btn-sm{background:var(--bg-tile);border:1px solid var(--rule);border-radius:0;
  font-family:var(--font-ui);font-size:12.5px;padding:5px 11px;cursor:pointer;
  color:var(--text-secondary);text-decoration:none;display:inline-block}
.btn-sm:hover{background:var(--accent-wash);border-color:var(--accent);color:var(--accent-deep)}
.btn-sm.danger:hover{background:var(--bad-wash);border-color:var(--bad);color:var(--bad)}

/* 後台頁面選單 */
.ebar select#pageSel{background:oklch(30% .025 265);color:#fff;border:1px solid oklch(38% .03 265);
  border-radius:0;padding:6px 9px;font:inherit;font-size:13px;max-width:210px;cursor:pointer}
.ebar select#pageSel:hover{background:oklch(38% .04 265)}
/* 後台語言切換下拉（2026-11-06 晚，取代一排語言按鈕），樣式跟頁面選單一致 */
.ebar select#langSel{background:oklch(30% .025 265);color:#fff;border:1px solid oklch(38% .03 265);
  border-radius:0;padding:6px 9px;font:inherit;font-size:13px;max-width:110px;cursor:pointer}
.ebar select#langSel:hover{background:oklch(38% .04 265)}

/* ══════════════════════════════════════════════════════════════════════
   2026-07-30 首頁套版:依 user 提供的設計稿(Codex 生成的整頁圖)逐區復刻
   ‧ 素材做法:從設計稿裁出圖片區域 → 用純色/漸層蓋掉稿上的文字 → Lanczos 放大
     → cwebp 壓到 50KB 內。五張:hero-foundry / ordering-bg / oem-laser
     / company-pipes / quote-arc(帶 alpha,左緣羽化)
   ‧ ⚠️ 這五張是設計稿裡的 AI 生成示意圖,不是自家廠實拍。user 2026-07-30
     知情後仍要求「首頁跟這張圖一模一樣」。8 張鑄造流程照與產品照仍為自家實拍,未動。
   ‧ 寫在檔尾 = 靠後蓋前,要回退整段刪掉即可(備份 site.css.bak-2026-07-30-before-codex)
   ══════════════════════════════════════════════════════════════════════ */

/* ── 頁首:深色底、選單靠右、右側詢價按鈕(全站共用) ── */
.head{background:oklch(20.5% .008 250);border-bottom:1px solid oklch(29% .010 250)}
.head-in{align-items:center;padding-block:var(--space-sm)}
.head .wm-text .sz{color:oklch(66% .16 30)}
.head .wm-text .v{color:oklch(94% .003 250)}
/* 2026-08-10 user 指示:選單從置中改成靠右、貼近紅色詢價按鈕。
   margin-left:auto 把整組推到右邊;margin-right 留 0,靠 .head-in 本身的 38px flex gap
   跟按鈕分開(額外再加 margin 會變成 74px,看起來又鬆掉)。
   原本是 margin-inline:auto = 兩側均分 = 置中。 */
.head-nav{margin-left:auto;margin-right:0;
  gap:var(--space-sm) clamp(14px,1.8vw,26px)}
.head-nav a{color:oklch(79% .006 250)}
.head-nav a:hover{color:var(--white);border-bottom-color:oklch(46% .010 250)}
.head-nav a.cur{color:var(--white);font-weight:600;border-bottom-color:var(--accent)}
.head-cta{flex:none;display:inline-flex;align-items:center;gap:.5em;
  padding:9px 15px;font-size:13px;font-weight:600;text-decoration:none;
  color:oklch(96% .003 250);border:1px solid var(--accent);background:transparent;
  transition:background 150ms var(--ease-out),color 150ms var(--ease-out)}
.head-cta:hover{background:var(--accent);color:var(--cta-text)}
.navtoggle span{background:oklch(90% .004 250)}
@media (max-width:960px){
  .head-nav{margin-inline:0;border-top-color:oklch(30% .010 250)}
  .head-nav a{border-bottom-color:oklch(28% .010 250)}
  .head-nav a:hover,.head-nav a.cur{color:var(--white);border-bottom-color:oklch(28% .010 250)}
  .navtoggle{border-color:oklch(36% .010 250)}
  .head-cta{order:3;margin-left:auto;margin-right:var(--space-sm)}
}
@media (max-width:560px){ .head-cta{display:none} }   /* 手機:標題列只留字標與漢堡,詢價按鈕頁尾與內文都有 */

/* ── Hero:深色照片 + 白字直接壓在圖上(不再用白色磨砂框) ── */
.pitch{border-bottom:0}
/* 高度照設計稿比例:稿寬 853 對 hero 高 420 → 佔頁寬 49%。文字垂直居中。 */
.pitch.full .pitch-in{display:flex;align-items:center;
  min-height:clamp(420px,49vw,760px);padding-block:clamp(40px,5vw,80px)}
.pitch.full .pitch-copy{max-width:min(620px,48%);
  background:transparent;backdrop-filter:none;border:0;padding:0}
/* 字級與框寬一起決定折行位置:設計稿是「Stainless ball valve /
   manufacturer in Taiwan.」兩行。太窄會折成三行,太寬會擠成一行。 */
.pitch.full .pitch-copy h1{color:oklch(98% .002 250);
  font-size:clamp(1.8rem,1.08rem + 2.2vw,2.75rem);line-height:1.1;letter-spacing:-.022em}
.pitch.full .pitch-copy h1 .lt{color:oklch(87% .004 250)}
.pitch.full .pitch-copy .lede{color:oklch(83% .006 250);
  border-top:0;padding-top:0;margin-top:var(--space-lg);
  font-size:15.5px;line-height:1.75;max-width:42ch}
.pitch.full .pitch-copy .pitch-cta{margin-top:var(--space-lg)}
.pitch.full .pitch-copy .cta{padding:13px 21px;font-size:14px;font-weight:600}
.pitch.full .fact{border-color:oklch(100% 0 0 / .18);color:oklch(84% .006 250)}
.pitch.full .pitch-cta p{color:oklch(76% .006 250)}
@media (max-width:820px){
  .pitch.full .pitch-copy{max-width:none}
  .pitch.full .pitch-in{min-height:clamp(340px,58vw,460px)}
}

/* ── 產品分類條 ──
   ⚠️ 2026-07-31 依高解析稿逐像素量測修正(user 指出「這張圖是沒有縫隙的」):
   ‧ 底色 #E4E4E5 連續貫穿整條,**格子本身是透明的**。
     原本給 .catcard 白底 + gap:1px,結果變成「白方塊 + 灰縫」,設計稿沒有這東西。
   ‧ 格與格之間只有 1px 深灰線(量到 #D0D0D2,背景 #E5E5E5),**滿格高**,
     第一格左側與最後一格右側都沒有線 → 用 .catcard + .catcard 的左邊框。
   ‧ 格子是正方形(量測:線高 450px、格寬 427px 於 2560 稿,比例 1:1),
     區塊上下各留白約 4.5vw。照片 contain 不裁切(cover 會切掉橫躺閥門的兩端)。 */
.catstrip{background:#E4E4E5;border-bottom:0;
  padding-block:clamp(24px,4.5vw,66px)}
.catstrip-in{border-left:0;gap:0}
.catcard{background:transparent;border-right:0;aspect-ratio:1/1}
.catcard + .catcard{border-left:1px solid #D2D2D4}
.catcard:hover{background:rgba(255,255,255,.42)}
.catcard.has-photo .cp{object-fit:contain;padding:0}
.catcard.has-photo:hover .cp{transform:scale(1.05)}
/* 手機:折成多列後,`+` 選擇器算的是 DOM 順序不是視覺列,
   不排除每列第一格的話,最左邊會冒出一條貼齊畫面邊緣的線。 */
@media (max-width:900px){
  .catstrip{padding-block:clamp(14px,2.8vw,26px)}
  .catstrip-in{border-top:0}
  .catcard,.catcard + .catcard{border-left:1px solid #D2D2D4;border-bottom:0;padding:0}
  .catcard:nth-child(4n+1){border-left:0}
}
@media (max-width:520px){
  .catcard:nth-child(4n+1){border-left:1px solid #D2D2D4}
  .catcard:nth-child(3n+1){border-left:0}
}

/* ── 鑄造流程:維持白底,間距壓到設計稿的節奏(原本上下各 88px 太鬆) ── */
.casting{border-bottom:0;padding-block:clamp(40px,3.9vw,60px) clamp(28px,2.7vw,42px)}
.casting-head{margin-bottom:clamp(22px,2.5vw,38px)}
.steps{row-gap:clamp(20px,2.2vw,34px)}
.step-txt{padding-top:var(--space-xs)}

/* ══ 資訊區塊:三格各自一種橫幅版型(設計稿的最大差異) ══
   .info-grid 原本在 .wrap 裡會被限寬 —— 這裡取消限寬讓背景滿版,
   文字內距改由每個 panel 自己算,對齊 .wrap 的內容起點。
   ⚠️ 精確選擇器 .home-page .info-grid > .panel —— .panel 這個 class
      聯絡表單(.formcard)與產品規格卡(.specpanel)也在用,不能寫成 .panel */
.home-page .info{padding-bottom:0}
.home-page .info-grid{max-width:none;padding-inline:0;
  --gut:max(clamp(20px,3.5vw,64px), calc(50% - 660px + clamp(20px,3.5vw,64px)))}
.home-page .info-grid > .panel{border-top:0;padding:0}
.home-page .info-grid > .panel:last-of-type{border-bottom:0}

/* 第 1 格 Ordering:整塊深色 + 右側紅斜線光效,文字單欄靠左 */
/* ⚠️ size 用 100% 100%(不用 cover):區塊比圖高時 cover 會放大裁切,把圖左側
   那塊「保護文字用的純黑」裁掉,斜線就會壓進字裡(2026-07-30 實測)。
   再疊一層由左到右的深色漸層當保險,文字區永遠讀得到。 */
.home-page .info-grid > .panel.pn-0{
  background:
    linear-gradient(90deg,#101619 0%,#101619 33%,rgba(16,22,25,.72) 45%,rgba(16,22,25,0) 60%),
    #101619 var(--bgimg, url('img/ordering-bg.webp')) right center / 100% 100% no-repeat;
  display:block;padding:clamp(44px,5vw,76px) var(--gut);
  min-height:clamp(280px,24vw,346px)}
.home-page .info-grid > .panel.pn-0 > *{max-width:min(39%,520px)}
.home-page .info-grid > .panel.pn-0 .label{color:var(--accent);margin-bottom:var(--space-sm)}
.home-page .info-grid > .panel.pn-0 h2{color:oklch(98% .002 250);
  font-size:clamp(1.5rem,1.05rem + 1.5vw,2.3rem);line-height:1.14;margin-bottom:var(--space-md)}
.home-page .info-grid > .panel.pn-0 p{color:oklch(82% .006 250);font-size:15.5px;line-height:1.72}
.home-page .info-grid > .panel.pn-0 .panel-link{color:oklch(72% .17 32);display:inline-block}
.home-page .info-grid > .panel.pn-0 .panel-link:hover{border-bottom-color:oklch(72% .17 32)}

/* 第 2 格 OEM / ODM:淺底,左標題中內文,右半邊一張雷射刻印照(貼齊右邊界、滿高) */
.home-page .info-grid > .panel.pn-1{
  /* ⚠️ 照片欄寬用 calc 對齊背景圖:background-size 的 36% 算的是 padding box
     (含左側 gut),grid 的 % 算的是 content box —— 直接寫 36% 會差幾十 px,
     文字就壓到照片上。改 background-origin 雖然對齊了,卻讓照片縮進上下 padding、
     不再滿高。兩個坑都踩過(2026-07-30),這行 calc 是同時解掉兩者的寫法。 */
  background:oklch(96.5% .002 250) var(--bgimg, url('img/oem-laser.webp')) right center / 36% 100% no-repeat;
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.2fr) calc(36% + var(--gut) * .36);
  gap:0 clamp(20px,2.2vw,34px);align-items:center;
  padding:clamp(34px,3.4vw,50px) 0 clamp(34px,3.4vw,50px) var(--gut);
  min-height:clamp(230px,18vw,270px)}
.home-page .info-grid > .panel.pn-1 .label{grid-column:1;color:var(--accent);margin-bottom:var(--space-xs)}
.home-page .info-grid > .panel.pn-1 h2{grid-column:1;grid-row:2;
  font-size:clamp(1.3rem,.95rem + 1.15vw,1.95rem);line-height:1.14}
.home-page .info-grid > .panel.pn-1 > div,
.home-page .info-grid > .panel.pn-1 p{grid-column:2;grid-row:1 / span 3;
  align-self:center;font-size:15px;line-height:1.72;max-width:56ch}
.home-page .info-grid > .panel.pn-1 .panel-link{grid-column:2;grid-row:4;
  align-self:start;margin-top:var(--space-sm)}

/* 第 3 格 The company:左邊界一張管路照(滿高),右邊左標題右內文 */
.home-page .info-grid > .panel.pn-2{
  background:var(--paper) var(--bgimg, url('img/company-plant-floor.webp')) left center / 26% 100% no-repeat;
  display:grid;grid-template-columns:calc(26% + var(--gut) * .26) minmax(0,.5fr) minmax(0,1fr);
  gap:0 clamp(20px,2.2vw,34px);align-items:center;
  padding:clamp(30px,3vw,44px) var(--gut) clamp(30px,3vw,44px) 0;
  min-height:clamp(200px,15.6vw,235px)}
.home-page .info-grid > .panel.pn-2 .label{grid-column:2;color:var(--accent);margin-bottom:var(--space-xs)}
.home-page .info-grid > .panel.pn-2 h2{grid-column:2;grid-row:2;
  font-size:clamp(1.3rem,.95rem + 1.15vw,1.95rem);line-height:1.14}
.home-page .info-grid > .panel.pn-2 > div,
.home-page .info-grid > .panel.pn-2 p{grid-column:3;grid-row:1 / span 3;
  align-self:center;font-size:15px;line-height:1.72;max-width:56ch}
.home-page .info-grid > .panel.pn-2 .panel-link{grid-column:3;grid-row:4;
  align-self:start;margin-top:var(--space-sm)}

/* 手機:三格都疊成單欄,背景照改成上方一條(圖不再當側欄) */
@media (max-width:900px){
  /* 手機:文字滿寬,橫向的漸層保護就沒用了 —— 改成垂直漸層,
     光效只在底部隱約透出。不改的話紅斜線會直接壓在字上(2026-07-30 實測) */
  .home-page .info-grid > .panel.pn-0{
    background:
      linear-gradient(180deg,rgba(16,22,25,.94) 0%,rgba(16,22,25,.9) 62%,rgba(16,22,25,.45) 100%),
      #101619 var(--bgimg, url('img/ordering-bg.webp')) right center / cover no-repeat;
    padding-block:clamp(36px,7vw,56px)}
  .home-page .info-grid > .panel.pn-0 > *{max-width:none}
  .home-page .info-grid > .panel.pn-1,
  .home-page .info-grid > .panel.pn-2{
    display:block;background-size:100% 190px;
    padding:0 var(--gut) clamp(36px,6vw,52px)}
  .home-page .info-grid > .panel.pn-1{background-position:center top;padding-top:calc(190px + clamp(28px,5vw,40px))}
  .home-page .info-grid > .panel.pn-2{background-position:center top;padding-top:calc(190px + clamp(28px,5vw,40px))}
  .home-page .info-grid > .panel.pn-1 h2,
  .home-page .info-grid > .panel.pn-2 h2{margin-bottom:var(--space-md)}
}

/* ── 底部詢價帶:深色 + 紅光弧橫幅(2026-07-31 user 提供 2048×160 的整條背景圖) ──
   圖是 12.8:1 的長條,詢價帶在 1440 寬時約 12.7:1 —— 用 cover 幾乎不裁切,構圖剛好對上。
   ⚠️ 左側疊一層深色漸層:圖的深黑區只到約 25%,而標題寬度到 41%,
   不壓的話「We will price it.」會落在漸亮的灰區上、白字糊掉。漸層在 56% 前收乾淨,
   不會碰到從 45% 才開始的紅光弧。 */
.quote-strip{background:
  linear-gradient(90deg,rgba(13,17,20,.90) 0%,rgba(13,17,20,.85) 34%,rgba(13,17,20,.30) 47%,rgba(13,17,20,0) 56%),
  var(--bg-deep) var(--bgimg, url('img/quote-arc.webp')) center center / cover no-repeat}
.qs-in{padding-block:clamp(22px,2.2vw,34px);position:relative;z-index:1}
.qs-in h2{font-size:clamp(1.25rem,.98rem + 1.25vw,1.85rem)}
.quote-strip .cta{padding:13px 21px;font-size:14px}
@media (max-width:820px){
  /* 2026-08-09 user 選定「F 版」:手機把光弧圖放大鋪滿(cover),讓紅光成為大片背景,
     文字直接壓在紅色上。

     ⚠️ 為什麼是 right center —— 圖是 2048×160(12.8:1),cover 到手機的 375×91(約 4:1)
        會放大到約 1165px 寬,只看得到其中 32%。靠右才取得到紅光弧那一段;
        靠左只會取到深黑區,等於整張圖白放。

     ⚠️ 舊版是 `right bottom / auto 42%`(2026-07-31 訂),已作廢:
        42% 高換算後圖只有 488px 寬而螢幕 375px,左緣被切掉 23%,
        看起來是「一段斷掉的亮痕」而不是一道弧,而且正好壓在 We will price it. 上。

     ⚠️ 文字色一定要一起提亮 —— .lt 與 p 的預設是灰色(為黑底設計的),
        壓在亮紅光上會整段消失。 */
  .quote-strip{background:
    linear-gradient(100deg,rgba(13,17,20,.62) 0%,rgba(13,17,20,.30) 45%,rgba(13,17,20,.05) 100%),
    var(--bg-deep) var(--bgimg, url('img/quote-arc.webp')) right center / cover no-repeat}
  .qs-in h2{color:#fff}
  .qs-in h2 .lt,.qs-in p{color:rgba(255,255,255,.86)}
  .qs-in > div{max-width:30ch}
}
/* 手機 hero:背景往右移(不然熔爐整個在畫面外,只剩一片黑),
   同時左側壓一層漸層 —— 手機文字是滿寬的,沒有桌機那塊天然暗區可以靠 */
@media (max-width:700px){
  .pitch-bg{background-position:74% center}
  .pitch-bg::after{background:linear-gradient(92deg,
    rgba(11,14,16,.92) 0%,rgba(11,14,16,.78) 52%,rgba(11,14,16,.42) 100%)}
}

/* ══════════ About 頁改版(2026-07-31,依 user 高解析設計稿) ══════════
   結構:紅光效 hero → 沿革左文右照 → 深色統計帶 → 2×2 主張格(上亮下暗)
   → 品質(亮)+市場(暗,點陣地圖) 。寫在檔尾靠後蓋前;舊 .facts/.cards 樣式留著無害。 */

/* hero:深黑底、紅色光效居右,文字壓左側(圖左側已烘進純黑) */
.about-hero{background:#070C0F center right / cover no-repeat;position:relative}
.ah-in{padding-block:clamp(56px,7.5vw,120px)}
.ah-in .label{color:oklch(78% .01 250);letter-spacing:.24em}
/* max-width 10ch:讓標題照設計稿折成三行(The plant, / not the / middleman)
   —— 8ch 會折成四行、13ch 只折兩行,實測 10ch 才是三行 */
.ah-in h1{color:oklch(98% .002 250);max-width:10ch;
  font-size:clamp(2rem,1.2rem + 2.6vw,3.3rem);line-height:1.1;letter-spacing:-.022em;
  margin-top:var(--space-md)}
.ah-in .lede{color:oklch(82% .006 250);font-size:15.5px;line-height:1.8;
  max-width:38ch;margin-top:var(--space-lg)}

/* 沿革:白底,左文右照,照片下有小字圖說 */
.about-page .story{border-bottom:0}
.about-page .story-grid{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:var(--space-xl) clamp(36px,5vw,80px);align-items:start}
.about-page .story-fig img{aspect-ratio:auto}
.about-page .story-fig figcaption{letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--text-muted)}

/* 統計帶:深色滿版三格置中 */
.statband{background:var(--bg-deep)}
.statband-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-md);padding-block:clamp(26px,2.6vw,40px);text-align:center}
.stat .sn{display:block;font-family:var(--font-display);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.1rem);
  color:oklch(97% .002 250);line-height:1.1}
.stat .st{display:block;margin-top:6px;font-size:13px;color:oklch(70% .008 250)}

/* 2×2 主張格:上排亮、下排暗,格內距對齊 .wrap 起點
   —— 用跟首頁橫幅同一套 --gut 讓滿版底色下的文字對齊內容欄 */
.claims{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  --gut:max(clamp(20px,3.5vw,64px), calc(50% - 660px + clamp(20px,3.5vw,64px)))}
.claim{padding:clamp(36px,4vw,60px) clamp(24px,3vw,52px)}
.claim.c-0{padding-left:var(--gut)}
.claim.c-2{padding-left:var(--gut)}
.claim.c-1{padding-right:var(--gut)}
.claim.c-3{padding-right:var(--gut)}
.claim .label{color:var(--accent);display:block;margin-bottom:var(--space-sm)}
.claim h2{font-size:clamp(1.3rem,1rem + 1.05vw,1.85rem);line-height:1.18;margin-bottom:var(--space-md)}
.claim p{font-size:15px;line-height:1.72;color:var(--text-secondary);max-width:52ch}
.claim p + p{margin-top:var(--space-sm)}
.claim.c-2,.claim.c-3{background:var(--bg-deep)}
.claim.c-2 h2,.claim.c-3 h2{color:oklch(97% .002 250)}
.claim.c-2 p,.claim.c-3 p{color:oklch(78% .008 250)}
.claim.c-2 .label,.claim.c-3 .label{color:oklch(72% .17 32)}

/* 品質+市場:左亮右暗;右格鋪點陣世界地圖 */
.qm{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  --gut:max(clamp(20px,3.5vw,64px), calc(50% - 660px + clamp(20px,3.5vw,64px)))}
.qm-pad{padding:clamp(36px,4vw,60px) clamp(24px,3vw,52px)}
.qm-quality{background:var(--bg-page)}
.qm-quality .qm-pad{padding-left:var(--gut)}
.qm-quality .label{color:var(--accent);display:block;margin-bottom:var(--space-sm)}
.qm-quality h2{font-size:clamp(1.3rem,1rem + 1.05vw,1.8rem);line-height:1.18;margin-bottom:var(--space-md)}
.qm-quality p{font-size:14.5px;line-height:1.7;color:var(--text-secondary);max-width:44ch}
.certs{display:flex;gap:10px;margin-top:var(--space-lg);flex-wrap:wrap}
.cert{font-family:var(--font-text);font-size:13px;font-weight:600;letter-spacing:.04em;
  padding:7px 14px;border:1.5px solid var(--ink-950);color:var(--ink-950)}
/* 2026-07-31 user 指示:直接用白底原圖,不做去背或反轉 → 這格改成淺底、文字轉黑。
   底色取圖片自身的白(#F7F7F5),圖與底才接得起來、看不出邊界。
   size 仍用 `auto 100%` 靠右:cover 會裁掉北美,contain 會把地圖縮成小小一塊。 */
.qm-markets{background:#F7F7F5 var(--bgimg, url('img/world-map-dots.webp')) right center / auto 100% no-repeat;
  display:flex;align-items:center}
.qm-markets .qm-pad{padding-right:var(--gut)}
.qm-markets h2{color:var(--ink-950);font-size:clamp(1.25rem,1rem + 1vw,1.7rem);
  line-height:1.2;margin-bottom:var(--space-sm)}
.qm-markets p{font-size:14.5px;line-height:1.7;color:var(--text-secondary);max-width:34ch}

@media (max-width:820px){
  /* 手機 hero:文字滿寬會壓到紅色光效,疊一層半透明深色(桌機文字在左側純黑區,不用) */
  .about-hero::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(7,12,15,.82) 0%,rgba(7,12,15,.62) 100%)}
  .ah-in{position:relative}
  .about-page .story-grid{grid-template-columns:minmax(0,1fr)}
  .statband-in{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xs)}
  .stat .st{font-size:11.5px}
  .claims,.qm{grid-template-columns:minmax(0,1fr)}
  /* 單欄後每格都要有左右 gut(桌機只給邊緣格) */
  .claim,.qm-pad{padding-inline:var(--gut) !important}
  /* c-1 在手機掉到亮排下面,補一條分隔線;暗色地圖格圖改滿寬淡出 */
  .claim.c-1{border-top:1px solid var(--rule)}
  .qm-markets{background-size:cover;background-position:center}
  .qm-markets .qm-pad{padding-block:clamp(44px,9vw,64px)}
}

/* ══════════ 產品總覽頁改版(2026-07-31,依 user 高解析設計稿) ══════════
   量測基準:2560px 稿。頁底 #FCFCFC、卡片 #EFF0F2、選單 #0F1316、分隔線 #191D21。
   ⚠️ 設計稿的產品頁標題系統改用「無襯線粗體大寫」(其他頁是 Young Serif 襯線),
      這是稿子刻意的工業/規格感,不是筆誤 —— 只套用在本頁,不影響全站。 */

/* hero:深色 CNC 加工照,白色無襯線粗體大標
   ⚠️ 舊版 .pgh h1/.lede 有一組白色 text-shadow(那是為了讓深色字壓在亮照片上仍可讀)。
      這頁換深色照 + 白字後,那組光暈會讓字看起來糊掉一圈 —— 一定要歸零。
   高度照稿:hero 佔頁寬 60%(2560 稿量到 1531px),1440 寬時約 860px。 */
.products-page .pgh{background-position:center;background-color:#030507;
  min-height:clamp(420px,58vw,880px);border-bottom:0}
.products-page .pgh::after{content:none}
.products-page .pgh-in{padding-block:clamp(56px,7vw,110px)}
.products-page .pgh h1{font-family:var(--font-text);font-weight:700;
  text-transform:uppercase;letter-spacing:-.01em;color:oklch(99% 0 0);
  text-shadow:none;
  font-size:clamp(1.9rem,1.15rem + 2.5vw,3.15rem);line-height:1.05;max-width:none}
.products-page .pgh .lede{color:oklch(84% .006 250);font-weight:400;text-shadow:none;
  font-size:15.5px;line-height:1.8;max-width:34ch;margin-top:var(--space-lg)}

/* 產品區:頁底純白,卡片淺灰 */
.products-page .prodsec{background:#FCFCFC;padding-block:clamp(30px,3.4vw,52px) clamp(40px,4.6vw,72px)}
.products-page .prod-layout{grid-template-columns:minmax(0,242px) minmax(0,1fr);
  gap:clamp(20px,2.2vw,34px)}

/* 左選單:整塊深色(舊版是白底細框),當前項紅色左邊條
   ⚠️ 拿掉 position:sticky —— 稿子是一整條「跟卡片區等高」的深色欄,
      sticky 會讓它只有內容高度、下面露出白底。改 static 後 grid 預設 stretch 就滿高了。 */
.products-page .pnav{border:0;background:#0F1316;position:static;height:100%;
  padding-bottom:var(--space-2xl)}
.products-page .pnav .label{padding:22px 22px 18px;color:oklch(88% .004 250);
  letter-spacing:.2em;font-size:11.5px}
.products-page .pnav li + li{border-top:1px solid #191D21}
/* 項目高度照稿:2560 稿量到間距 142px → 1440 寬時約 80px */
.products-page .pnav a{padding:26px 34px 26px 22px;color:oklch(84% .006 250);
  font-size:14.5px;border-left:3px solid transparent;position:relative}
/* 右側的 › 箭頭用 CSS 畫,不載入圖示字型 */
.products-page .pnav a::after{content:"";position:absolute;right:20px;top:50%;
  width:7px;height:7px;border-right:1.5px solid oklch(62% .008 250);
  border-bottom:1.5px solid oklch(62% .008 250);transform:translateY(-50%) rotate(-45deg)}
.products-page .pnav a:hover{background:#0A0D10;color:var(--white);border-left-color:#191D21}
.products-page .pnav a.on{background:#0A0D10;color:var(--white);font-weight:600;
  border-left-color:var(--accent)}

/* 產品卡:淺灰底、卡片間留白 */
.products-page .prodgrid{gap:clamp(14px,1.6vw,24px)}
/* 卡片照稿是縱向長方形(2560 稿量到寬 588 / 高 1155 ≈ 1:1.96),
   所以內距加大、圖區比正方形再高一點 */
.products-page .pitem{background:#EFF0F2;padding:clamp(24px,2.8vw,38px);
  transition:background 180ms var(--ease-out),transform 180ms var(--ease-out)}
.products-page .pitem:hover{background:#E8E9EC;transform:translateY(-2px)}
.products-page .pitem-img{aspect-ratio:1/1.12;margin-bottom:clamp(20px,2.4vw,34px)}
.products-page .pitem-name{font-family:var(--font-text);font-weight:700;
  text-transform:uppercase;letter-spacing:-.005em;line-height:1.22;
  font-size:clamp(.95rem,.88rem + .34vw,1.12rem)}
.products-page .pitem-spec{margin-top:var(--space-sm);font-size:13.5px;color:var(--text-muted)}
.products-page .pitem-more{margin-top:var(--space-lg);font-size:12.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

@media (max-width:900px){
  .products-page .prod-layout{grid-template-columns:minmax(0,1fr)}
  /* 手機:分類改成「會換行的標籤牆」,六個分類一次全看得到。
     ⚠️ 舊版是橫向可滑的一排 + 右緣漸層遮罩 —— 390px 下只露得出 1.5 個分類,
     其餘四個藏在漸層後面,買家根本不會發現還有別的(2026-08-07 user 抓到)。
     捲軸在手機上沒有可見的提示,不要再用。 */
  .products-page .pnav{position:static;height:auto;padding:0 0 var(--space-md)}
  .products-page .pnav .label{padding:16px 18px 12px}
  /* 兩欄網格:實測 390px 下高度 229px,一欄排會變 323px。
     overflow 要明確寫回 visible —— 上面 900px 的通用規則給了 overflow-x:auto */
  .products-page .pnav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;padding-inline:18px;overflow:visible}
  .products-page .pnav li + li{border-top:0}
  /* 標籤字要能換行(白名單分類名有長有短),不然窄欄會被裁掉 */
  .products-page .pnav a{padding:10px 12px;border-left:0;
    border:1px solid #232A30;color:oklch(84% .006 250);
    font-size:13px;line-height:1.25;white-space:normal}
  .products-page .pnav a::after{content:none}     /* 標籤裡再掛箭頭會很擠 */
  .products-page .pnav a:hover{background:#0A0D10;border-color:#2F3941}
  .products-page .pnav a.on{background:var(--accent);border-color:var(--accent);
    color:var(--white);font-weight:600}
  .products-page .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  /* 手機 hero:文字滿寬會壓到 CNC 圖,補一層由左至下的深色漸層 */
  .products-page .pgh{min-height:clamp(340px,68vw,460px);position:relative}
  .products-page .pgh::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(3,5,7,.86) 0%,rgba(3,5,7,.72) 60%,rgba(3,5,7,.5) 100%)}
  .products-page .pgh-in{position:relative;z-index:1}
}
@media (max-width:560px){
  .products-page .prodgrid{grid-template-columns:minmax(0,1fr)}
  .products-page .pgh .lede{max-width:none}
}

/* ══════════ OEM / ODM 頁改版(2026-07-31,依 user 設計稿) ══════════
   量測(862 稿):步驟卡 #EAEAE8、編號方塊 01 紅其餘深黑、深色區 #0A0C0F、淺灰區 #EEEEEB。
   標題系統跟產品頁一致改用無襯線粗體。文案未動(稿子就是用現有內容生成的)。 */

/* hero:深色六角拼貼 + OEM/ODM 浮水印,文字壓左側純黑區 */
/* 高度照稿:hero 380/862 = 佔頁寬 44%,1440 寬時約 634px */
.oem-hero{background:#060809 center right / cover no-repeat;position:relative;
  display:flex;align-items:center;min-height:clamp(380px,44vw,680px)}
.oh-in{padding-block:clamp(52px,6.6vw,104px);width:100%}
.oh-in .label{color:var(--accent);letter-spacing:.2em;display:block}
/* 18ch:讓標題照稿折成「Valves under your / own name」
   實測 13ch/17ch 會在 under 後就斷、20ch 會擠成一行,18ch 才是稿子的兩行 */
.oh-in h1{font-family:var(--font-text);font-weight:700;color:oklch(99% 0 0);
  letter-spacing:-.02em;line-height:1.06;max-width:19ch;margin-top:var(--space-md);
  font-size:clamp(1.9rem,1.15rem + 2.5vw,3.1rem)}
.oh-in .lede{color:oklch(84% .006 250);font-size:15.5px;line-height:1.8;
  max-width:40ch;margin-top:var(--space-lg)}

/* 四步驟:淺灰卡片 + 編號方塊(第一格紅、其餘深黑) */
.oem-page .flow{padding-block:clamp(44px,5vw,76px) clamp(36px,4vw,60px)}
.flow-head{font-family:var(--font-text);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.4rem,1.05rem + 1.3vw,2rem);margin-bottom:clamp(24px,2.8vw,40px)}
.oem-page .flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px);list-style:none;margin:0;padding:0}
.oem-page .flow-i{background:#EAEAE8;padding:clamp(20px,2.2vw,30px);border:0}
.oem-page .flow-i .fn{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;background:#17191B;color:oklch(98% 0 0);
  font-family:var(--font-text);font-size:12.5px;font-weight:700;letter-spacing:.02em;
  margin-bottom:var(--space-md)}
.oem-page .flow-i:first-child .fn{background:var(--accent)}
.oem-page .flow-i h3{font-family:var(--font-text);font-weight:700;line-height:1.24;
  font-size:clamp(.95rem,.9rem + .28vw,1.1rem);margin-bottom:var(--space-sm)}
.oem-page .flow-i p{font-size:13px;line-height:1.62;color:var(--text-muted)}

/* Marking:左半照片、右半深色 + 標籤 */
.markband{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  --gut:max(clamp(20px,3.5vw,64px), calc(50% - 660px + clamp(20px,3.5vw,64px)))}
.mb-img{background:#111 center / cover no-repeat;min-height:clamp(240px,26vw,380px)}
.mb-txt{background:#0A0C0F;display:flex;align-items:center}
.mb-pad{padding:clamp(32px,3.6vw,56px) var(--gut) clamp(32px,3.6vw,56px) clamp(28px,3.2vw,52px)}
.mb-pad .label{color:var(--accent);display:block;margin-bottom:var(--space-sm)}
.mb-pad h2{font-family:var(--font-text);font-weight:700;color:oklch(98% .002 250);
  letter-spacing:-.015em;line-height:1.18;margin-bottom:var(--space-md);
  font-size:clamp(1.3rem,1rem + 1.1vw,1.9rem)}
.mb-pad p{font-size:14.5px;line-height:1.72;color:oklch(80% .008 250);max-width:48ch}
.mb-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-lg)}
.mb-tag{font-family:var(--font-text);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:8px 13px;color:oklch(86% .006 250);
  border:1px solid oklch(38% .01 250);background:oklch(24% .008 250)}

/* Assemblies | Materials:左白右淺灰,左右並排 */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  --gut:max(clamp(20px,3.5vw,64px), calc(50% - 660px + clamp(20px,3.5vw,64px)))}
.duo-pad{padding:clamp(34px,3.8vw,58px) clamp(28px,3.2vw,52px)}
.duo-i.d-0{background:var(--bg-page)}
.duo-i.d-0 .duo-pad{padding-left:var(--gut)}
.duo-i.d-1{background:#EEEEEB}
.duo-i.d-1 .duo-pad{padding-right:var(--gut)}
.duo-i .label{color:var(--accent);display:block;margin-bottom:var(--space-sm)}
.duo-i h2{font-family:var(--font-text);font-weight:700;letter-spacing:-.015em;
  line-height:1.18;margin-bottom:var(--space-md);
  font-size:clamp(1.25rem,1rem + 1.05vw,1.8rem)}
.duo-i p{font-size:14.5px;line-height:1.72;color:var(--text-secondary);max-width:46ch}

/* FAQ:左深色標題、右白底問答 */
.oem-page .oemqa{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  border-bottom:0;padding:0;
  --gut:max(clamp(20px,3.5vw,64px), calc(50% - 660px + clamp(20px,3.5vw,64px)))}
.oemqa-head{background:#0A0C0F;display:flex;align-items:flex-start}
.oemqa-pad{padding:clamp(36px,4vw,62px) clamp(28px,3.2vw,52px) clamp(36px,4vw,62px) var(--gut)}
.oemqa-head .label{color:var(--accent);display:block;margin-bottom:var(--space-md)}
.oemqa-head h2{font-family:var(--font-text);font-weight:700;color:oklch(98% .002 250);
  letter-spacing:-.02em;line-height:1.14;max-width:9ch;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem)}
.oem-page .oemqa-list{background:var(--bg-page);margin:0;
  padding:clamp(36px,4vw,62px) var(--gut) clamp(36px,4vw,62px) clamp(28px,3.2vw,52px)}
.oem-page .oemqa-i{border-bottom:1px solid var(--rule-soft);padding-bottom:var(--space-lg)}
.oem-page .oemqa-i + .oemqa-i{padding-top:var(--space-lg)}
.oem-page .oemqa-i:last-child{border-bottom:0;padding-bottom:0}
.oem-page .oemqa-i dt{font-family:var(--font-text);font-weight:700;font-size:15.5px;
  line-height:1.35;margin-bottom:var(--space-xs)}
.oem-page .oemqa-i dd{margin:0;font-size:14px;line-height:1.68;color:var(--text-secondary);max-width:62ch}

@media (max-width:900px){
  .oem-page .flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .markband,.duo,.oem-page .oemqa{grid-template-columns:minmax(0,1fr)}
  .mb-img{min-height:clamp(190px,42vw,260px)}
  .mb-pad,.duo-pad,.oemqa-pad,.oem-page .oemqa-list{padding-inline:var(--gut) !important}
  .oemqa-head h2{max-width:none}
}
@media (max-width:560px){
  .oem-page .flow-grid{grid-template-columns:minmax(0,1fr)}
}

/* ══════════ FAQ 頁改版(2026-07-31,依 user 設計稿) ══════════
   量測(862 稿):頁底 #F3F3F1、白卡 #FFF、深卡 #12161A、Q 方塊 深黑/紅。
   ⚠️ 從摺疊清單改成「全展開卡片牆」—— 答案文字直接在畫面上,AEO 抓得到。 */

/* hero:深色 + 紅色問號,文字壓左側純黑區 */
.faq-hero{background:#060708 center right / cover no-repeat;
  display:flex;align-items:center;min-height:clamp(360px,42vw,640px)}
.fh-in{padding-block:clamp(52px,6.6vw,104px);width:100%}
.fh-in .label{color:var(--accent);letter-spacing:.2em;display:block}
.fh-in h1{font-family:var(--font-text);font-weight:700;color:oklch(99% 0 0);
  letter-spacing:-.02em;line-height:1.06;max-width:14ch;margin-top:var(--space-md);
  font-size:clamp(1.9rem,1.15rem + 2.5vw,3.1rem)}
.fh-in .lede{color:oklch(84% .006 250);font-size:15.5px;line-height:1.8;
  max-width:42ch;margin-top:var(--space-lg)}

/* 卡片牆:淺灰底、兩欄 */
.faqwall{background:#F3F3F1;padding-block:clamp(40px,4.6vw,72px) clamp(48px,5.4vw,86px)}
.fw-head{font-family:var(--font-text);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.4rem,1.05rem + 1.3vw,2rem);margin-bottom:clamp(24px,2.8vw,40px)}
.fw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);align-items:start}
.fw-i{background:var(--white);padding:clamp(22px,2.4vw,32px)}
/* Q 方塊:深黑底白字,強調卡轉紅 */
.fw-q{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;background:#17191B;color:oklch(98% 0 0);
  font-family:var(--font-display);font-size:16px;line-height:1;
  margin-bottom:var(--space-md)}
.fw-i h3{font-family:var(--font-text);font-weight:700;line-height:1.28;
  font-size:clamp(1rem,.94rem + .32vw,1.16rem);margin-bottom:var(--space-sm)}
.fw-i p{font-size:13.5px;line-height:1.68;color:var(--text-secondary)}
/* 強調卡(第一題與最後一題) */
.fw-i.fw-dark{background:#12161A}
.fw-i.fw-dark .fw-q{background:var(--accent)}
.fw-i.fw-dark h3{color:oklch(98% .002 250)}
.fw-i.fw-dark p{color:oklch(80% .008 250)}
/* 最後一題:滿版兩欄,Q 方塊與文字左右並排 */
.fw-i.fw-wide{grid-column:1 / -1;display:grid;
  grid-template-columns:auto minmax(0,1fr);gap:0 clamp(20px,2.4vw,36px);align-items:start}
.fw-i.fw-wide .fw-q{margin-bottom:0}
.fw-i.fw-wide p{max-width:70ch}

@media (max-width:820px){
  .fw-grid{grid-template-columns:minmax(0,1fr)}
  .fw-i.fw-wide{grid-template-columns:minmax(0,1fr)}
  .fw-i.fw-wide .fw-q{margin-bottom:var(--space-md)}
}
@media (max-width:700px){
  /* 手機 hero:文字滿寬會壓到紅問號 */
  .faq-hero{position:relative;min-height:clamp(320px,64vw,440px)}
  .faq-hero::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(6,7,8,.88) 0%,rgba(6,7,8,.66) 100%)}
  .fh-in{position:relative;z-index:1}
  .fh-in h1{max-width:none}
}

/* ══════════ Blog 列表頁改版(2026-07-31,依 user 設計稿) ══════════
   量測(862 稿):頁底 #F3F3F1、卡片白、箭頭方塊 #36383B、分頁當前 #DD342E。 */

/* hero:深色工業照 + 紅色圓形光暈 */
.blog-hero{background:#040507 center right / cover no-repeat;
  display:flex;align-items:center;min-height:clamp(320px,36vw,540px)}
.bh-in{padding-block:clamp(48px,6vw,92px);width:100%}
.bh-in h1{font-family:var(--font-text);font-weight:700;color:oklch(99% 0 0);
  letter-spacing:-.02em;line-height:1.06;max-width:16ch;
  font-size:clamp(1.9rem,1.15rem + 2.5vw,3.1rem)}
.bh-in .lede{color:oklch(84% .006 250);font-size:15.5px;line-height:1.8;
  max-width:42ch;margin-top:var(--space-lg)}

/* 分類列:白底(壓在淺灰區之上) */
.blog-page .catbar{background:var(--white);border-bottom:1px solid var(--rule-soft)}
.blog-page .catbar-in{padding-block:var(--space-lg)}

/* 文章卡:白卡、圖貼齊卡頂、左下方形箭頭 */
.blog-page .bloglist{background:#F3F3F1;padding-block:clamp(34px,4vw,60px) clamp(44px,5vw,78px)}
.blog-page .postgrid{gap:clamp(14px,1.6vw,24px)}
.blog-page .pcard{background:var(--white);
  transition:transform 180ms var(--ease-out),box-shadow 180ms var(--ease-out)}
.blog-page .pcard:hover{transform:translateY(-3px);box-shadow:0 6px 22px rgba(0,0,0,.07)}
.blog-page .pc-img{margin-bottom:0;aspect-ratio:16/10}
.pc-body{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.8vw,24px)}
.blog-page .pc-meta{margin-top:0;margin-bottom:var(--space-xs)}
.blog-page .pcard h2{font-family:var(--font-text);font-weight:700;line-height:1.3;
  font-size:clamp(1rem,.94rem + .32vw,1.15rem)}
.blog-page .pcard p{margin-top:var(--space-xs);font-size:13.5px;line-height:1.66;
  color:var(--text-muted)}
/* 箭頭方塊:推到卡片底部,滑過往右移 */
.pc-go{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;margin-top:auto;padding-top:var(--space-lg);
  box-sizing:content-box;color:transparent;position:relative}
.pc-go::after{content:"→";position:absolute;left:0;bottom:0;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:#36383B;color:oklch(98% 0 0);font-size:15px;
  transition:background 180ms var(--ease-out),transform 180ms var(--ease-out)}
.blog-page .pcard:hover .pc-go::after{background:var(--accent);transform:translateX(3px)}

/* 分頁:方塊按鈕,當前頁紅底 */
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  margin-top:clamp(28px,3.2vw,48px)}
.pager a{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 12px;background:var(--white);
  font-family:var(--font-text);font-size:13.5px;font-weight:600;
  text-decoration:none;color:var(--text-primary);
  transition:background 160ms var(--ease-out),color 160ms var(--ease-out)}
.pager a:hover{background:#E6E6E4}
.pager a.on{background:var(--accent);color:var(--cta-text)}
.pager .pg-next{background:#17191B;color:oklch(98% 0 0)}
.pager .pg-next:hover{background:var(--accent)}

@media (max-width:900px){
  .blog-page .postgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .blog-page .postgrid{grid-template-columns:minmax(0,1fr)}
  .blog-hero{min-height:clamp(280px,56vw,400px)}
  .bh-in h1{max-width:none}
}

/* ══════════ 2026-07-31 user 指示:全站內頁 hero 統一高度 ══════════
   基準 = 關於我們頁的實測高度 540px(於 1440 寬)= 37.5vw。
   ⚠️ 首頁(.pitch)不在此列 —— user 明確指示首頁不動。
   舊值:oem 655 / faq 626 / blog 540 / products 856 —— 全部收斂到同一組 clamp。 */
.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero,.products-page .pgh{
  display:flex;align-items:center;
  min-height:clamp(320px,37.5vw,620px)}
/* About 原本沒設 min-height(靠內容撐),補上 flex 置中後內距要收一點才不會超過基準。
   ⚠️ `width:100%` 一定要補 —— 沒有的話 .wrap 在 flex 容器裡會收縮成內容寬度並被置中,
      文字整塊跑到畫面中間(其他頁的 .oh-in/.fh-in/.bh-in 本來就有這行)。 */
.ah-in{padding-block:clamp(44px,5.6vw,88px);width:100%}
.oh-in,.fh-in,.bh-in,.ch-in{padding-block:clamp(44px,5.6vw,88px)}
.products-page .pgh-in{padding-block:clamp(44px,5.6vw,88px)}

@media (max-width:700px){
  .about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero,.products-page .pgh{
    min-height:clamp(300px,58vw,430px)}
}

/* 2026-07-31 Blog 換上新背景圖(工程桌面配閥門)後補的手機遮罩:
   新圖的細節分布比舊圖(純漸層+紅光暈)滿很多,手機文字滿寬會壓在卡尺與閥件上。 */
@media (max-width:700px){
  .blog-hero{position:relative}
  .blog-hero::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,5,7,.88) 0%,rgba(4,5,7,.7) 62%,rgba(4,5,7,.5) 100%)}
  .bh-in{position:relative;z-index:1}
}

/* ══════════ 聯絡頁改版(2026-07-31,依 user 設計稿) ══════════
   量測(862 稿):頁底 #F3F3F1、表單白卡 #FAFAF9、聯絡深卡 #151920。
   右下「24 小時回覆」那塊是純漸層 → **用 CSS 重畫,不裁圖**(無限清晰、零檔案)。 */

.contact-hero{background:#040506 center right / cover no-repeat}
.ch-in{width:100%}
.ch-in h1{font-family:var(--font-text);font-weight:700;color:oklch(99% 0 0);
  letter-spacing:-.02em;line-height:1.06;max-width:22ch;
  font-size:clamp(1.9rem,1.15rem + 2.5vw,3.1rem)}
.ch-in .lede{color:oklch(84% .006 250);font-size:15.5px;line-height:1.8;
  max-width:52ch;margin-top:var(--space-lg)}

.contactwrap{background:#F3F3F1;padding-block:clamp(36px,4.2vw,64px) clamp(46px,5.2vw,82px)}
.contact-page .contact-grid{display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);
  gap:clamp(14px,1.6vw,24px);align-items:start}

/* 左:表單白卡 */
.contact-page .formcard{background:#FAFAF9;padding:clamp(26px,3vw,44px);border:0}
.contact-page .formcard h2{font-size:clamp(1.4rem,1.05rem + 1.3vw,2rem);
  line-height:1.16;letter-spacing:-.018em}
.contact-page .formnote{margin-top:var(--space-xs);font-size:14px;color:var(--text-muted)}
.contact-page .rfq{margin-top:var(--space-xl)}

/* 右:深色聯絡卡 + 24 小時回覆帶 */
.cside{display:flex;flex-direction:column}
.cside-info{background:#151920;padding:clamp(26px,3vw,44px);flex:1}
.cside-info h2{color:oklch(98% .002 250);font-size:clamp(1.35rem,1.02rem + 1.2vw,1.9rem);
  line-height:1.16;letter-spacing:-.018em;margin-bottom:var(--space-lg)}
.cside-info p{font-size:14.5px;line-height:1.72;color:oklch(82% .008 250)}
.cside-info a{color:oklch(84% .008 250);text-decoration:none}
.cside-info a:hover{color:var(--white)}
.cside-info .label{display:block;color:var(--accent);margin:var(--space-lg) 0 var(--space-xs)}
/* 24 小時回覆:深灰底 + 底部紅光弧,整塊用 CSS 畫 */
.cside-reply{position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 130% 66% at 52% 122%,
      rgba(226,62,32,.72) 0%,rgba(150,36,18,.34) 42%,transparent 72%),
    linear-gradient(180deg,#2c2d30 0%,#1b1c1f 100%);
  min-height:clamp(150px,15vw,210px);
  display:flex;align-items:center;justify-content:center;padding:clamp(24px,2.6vw,38px)}
.cside-reply p{font-family:var(--font-text);font-weight:700;color:oklch(99% 0 0);
  font-size:clamp(1.05rem,.92rem + .6vw,1.35rem);letter-spacing:-.015em;text-align:center}

@media (max-width:900px){
  .contact-page .contact-grid{grid-template-columns:minmax(0,1fr)}
  .cside-reply{min-height:clamp(130px,26vw,180px)}
}
@media (max-width:700px){
  .contact-hero{position:relative}
  .contact-hero::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,5,6,.88) 0%,rgba(4,5,6,.68) 100%)}
  .ch-in{position:relative;z-index:1}
  .ch-in h1,.ch-in .lede{max-width:none}
}

/* 2026-07-31 OEM 換上雷射打標新圖後補的手機遮罩:
   新圖亮部(金屬板)延伸到畫面左側,手機文字滿寬會整段壓在上面。
   FAQ 的新圖左半天生是暗的,所以不需要。 */
@media (max-width:700px){
  .oem-hero{position:relative}
  .oem-hero::before{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(6,8,9,.88) 0%,rgba(6,8,9,.74) 60%,rgba(6,8,9,.6) 100%)}
  .oh-in{position:relative;z-index:1}
}


/* ══════════ 產品詳細頁(2026-08-01 依 user 設計稿重做) ══════════
   hero → 黑色規格帶 → 概述 → 規格表 → 應用 → 品質保證 → 客製選項 → 詢價欄位 → FAQ → 其他產品。
   ⚠️ 設計稿的尺寸表是 Codex 編的,user 確認移除,這裡沒有對應樣式。 */

/* hero:左圖右資訊 */
.pdh{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  --gut:max(clamp(20px,3.5vw,64px), calc(50% - 660px + clamp(20px,3.5vw,64px)))}
.pdh-img{background:#fff url('img/pd-hero-l.webp') center/contain no-repeat;position:relative;display:flex;align-items:center;
  justify-content:center;padding:clamp(26px,3.4vw,56px);min-height:clamp(280px,32vw,480px)}
.pdh-img img{width:100%;max-width:520px;height:auto;object-fit:contain;position:relative;z-index:1}
.pdh-img svg{width:36%;height:36%;color:var(--text-faint)}
.pdh-wm{position:absolute;right:clamp(18px,2.6vw,42px);bottom:clamp(12px,1.8vw,28px);
  font-family:var(--font-text);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1.4rem,.9rem + 2.2vw,2.9rem);color:rgba(0,0,0,.05);line-height:1;z-index:0}
/* 2026-08-06 深夜二換:user 提供工程線稿框底圖(左=圓規線稿、右=紅頂條框),
   兩半各鋪一欄、contain 完整顯示框線,白底補邊無縫 */
.pdh-info{background:#fff url('img/pd-hero-r.webp') center/contain no-repeat;display:flex;align-items:center}
.pdh-pad{padding:clamp(28px,3.2vw,52px) var(--gut) clamp(28px,3.2vw,52px) clamp(24px,2.8vw,48px);width:100%}
.pd-page .crumb{font-size:12px;color:var(--text-muted);margin-bottom:var(--space-lg)}
.pd-page .crumb a{color:var(--text-muted);text-decoration:none}
.pd-page .crumb a:hover{color:var(--accent)}
.pd-page .crumb span{margin-inline:7px}
.pdh-series{display:block;color:var(--accent);margin-bottom:var(--space-sm)}
.pdh-info h1{font-family:var(--font-text);font-weight:700;letter-spacing:-.022em;line-height:1.1;
  font-size:clamp(1.6rem,1.05rem + 1.9vw,2.5rem);max-width:14ch}
.pdh-info .lede{margin-top:var(--space-md);font-size:14.5px;line-height:1.72;
  color:var(--text-secondary);max-width:46ch}
.pdh-info .cta{width:auto;padding:14px 22px;font-size:14px;margin-top:clamp(20px,2.4vw,32px)}
/* 2026-08-04 hero 的尺寸圖:一排小連結,每份標明接口型式 */
.pdh-sheets{margin-top:var(--space-lg)}
.pdh-sheets-lab{display:block;font-family:var(--font-text);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px}
.pdh-sheets-row{display:flex;flex-wrap:wrap;gap:8px}
.pdh-sheets-row a{font-family:var(--font-text);font-size:13px;font-weight:600;
  color:var(--text-primary);text-decoration:none;
  border:1px solid var(--rule);border-radius:5px;padding:7px 13px;
  transition:border-color 140ms var(--ease-out),color 140ms var(--ease-out)}
.pdh-sheets-row a:hover{border-color:var(--accent);color:var(--accent)}
.pdh-dl{display:inline-block;margin-top:var(--space-lg);font-size:13.5px;font-weight:600;
  color:var(--text-primary);text-decoration:underline;text-underline-offset:4px}
.pdh-dl:hover{color:var(--accent)}

/* 黑色規格帶:等寬分欄,細線分隔 */
.pdband{background:#0D0F11}
/* ⚠️ 2026-08-05 改用 flex：原本寫死 repeat(6,1fr)，但各產品頁的規格項數不同
   （一片式 6 項、兩/三片式 5 項、三通與真空 3 項）→ 項數少的頁面右邊會空掉一大塊
   （實測 5 項時右側空白 255px）。flex:1 1 0 讓每一項不管幾個都平均撐滿整條。別改回 grid。 */
.pdband-in{display:flex;flex-wrap:wrap;
  max-width:1320px;margin-inline:auto;padding-inline:clamp(20px,3.5vw,64px)}
.pdb-i{flex:1 1 0;min-width:0;padding:clamp(18px,2vw,26px) clamp(10px,1.4vw,20px);
  border-left:1px solid oklch(28% .008 250)}
/* 每一列開頭那格：文字要對齊頁面左邊界，所以 padding-left 歸零；
   但歸零會讓這格比別格窄，所以把省下的補到 padding-right，各格才等寬。 */
.pdb-i:first-child{border-left:0;padding-left:0;
  padding-right:calc(2 * clamp(10px,1.4vw,20px))}
.pdb-k{display:block;font-family:var(--font-text);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:oklch(62% .008 250);margin-bottom:7px}
.pdb-v{display:block;font-family:var(--font-text);font-weight:700;font-size:15px;
  line-height:1.25;color:oklch(98% 0 0)}

/* 內容區段 */
.pdsec{background:var(--white);padding-block:clamp(38px,4.4vw,68px)}
.pdsec-grey{background:#F7F7F6}
.pdsec-in{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:var(--space-lg) clamp(30px,4vw,72px);align-items:start}
.pdsec-head .label{display:block;color:var(--accent);margin-bottom:var(--space-sm)}
.pdsec-head h2{font-family:var(--font-text);font-weight:700;letter-spacing:-.02em;line-height:1.14;
  font-size:clamp(1.5rem,1.1rem + 1.5vw,2.2rem)}
.pdsec-lab{display:block;color:var(--accent);margin-bottom:var(--space-lg)}
.pdsec-body p{font-size:14.5px;line-height:1.75;color:var(--text-secondary);max-width:60ch}
.pdsec-body p + p{margin-top:var(--space-md)}
/* 2026-08-30 產品概述問句小標（## 開頭段落） */
.pdsec-body .pd-q{font-size:17px;font-weight:600;line-height:1.4;color:var(--text-primary);max-width:60ch;margin:var(--space-lg) 0 var(--space-sm)}
.pdsec-body .pd-q + p{margin-top:0}
/* 產品特徵:兩欄網格、每項上方細線(2026-08-06 user 嫌換行亂,改掉直線分隔的 flex 排法) */
.pdfeats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px clamp(28px,3.2vw,52px);margin-top:clamp(22px,2.6vw,36px)}
.pdf-i{font-family:var(--font-text);font-weight:600;font-size:14px;line-height:1.4}

/* 技術規格表 */
.pdtable{margin:0}
.pdtr{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  border-bottom:1px solid var(--rule-soft)}
.pdtr:first-child{border-top:1px solid var(--rule)}
.pdtr dt,.pdtr dd{padding:12px 0;margin:0;font-size:14px}
.pdtr dt{color:var(--text-muted)}
.pdtr dd{color:var(--text-primary)}
/* 2026-08-04 多型號對照表:右邊改成 N 欄,一欄一個型號 */
.pdtable.multi .pdtr{grid-template-columns:minmax(0,.42fr) repeat(var(--sc,2),minmax(0,1fr));
  gap:0 var(--space-lg)}
.pdtable.multi .pdhead{border-bottom:1px solid var(--rule)}
.pdtable.multi .pdhead dd{display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding-bottom:14px}
.pdtable.multi .spec-photo{width:100%;max-width:190px;aspect-ratio:1/1;object-fit:contain;
  background:var(--bg-inset);border-radius:6px}
.pdtable.multi .spec-name{font-family:var(--font-text);font-weight:700;font-size:12px;
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-primary);line-height:1.35}
.pdtable.multi .spec-pdf{font-family:var(--font-text);font-size:12.5px;color:var(--accent);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.pdtable.multi .spec-pdf:hover{opacity:.72}
.pdtable.multi .pdhead dt{padding:0}
@media (max-width:760px){
  /* 手機:型號欄疊起來會擠成一團,改成一列一個型號、值前面標型號名 */
  .pdtable.multi .pdtr{grid-template-columns:minmax(0,1fr)}
  .pdtable.multi .pdtr dt{padding-bottom:2px;font-weight:700;color:var(--text-primary)}
  .pdtable.multi .pdtr dd{padding:2px 0 8px}
  .pdtable.multi .pdtr dd:last-child{padding-bottom:12px}
  /* 手機:表頭裡有照片與 PDF 連結,不能整個藏掉 —— 改成橫向並排一排 */
  .pdtable.multi .pdhead{display:grid;grid-template-columns:repeat(var(--sc,2),minmax(0,1fr));
    gap:var(--space-md);padding-bottom:var(--space-md)}
  .pdtable.multi .pdhead dt{display:none}
  .pdtable.multi .spec-photo{max-width:100%}
  .pdtable.multi .spec-name{font-size:11px}
  .pdtable.multi .pdtr dd::before{content:attr(data-m) " ";color:var(--text-muted);font-size:12.5px}
}

/* 應用:等寬五欄,細線分隔
   ⚠️ 原本用 flex-wrap,第五項會掉到第二行、而且還拖著一條孤立的左邊框(2026-08-01 user 抓到)。
      改成 grid 等分就永遠一排對齊,文字長的自己折行,邊框位置不會亂。 */
/* 2026-08-04 應用場合改版:原本五格硬塞在右半欄、字 13.5px,
   遇到「Steam condensate」這種兩行的就高度參差、分隔線對不齊。
   改成自動換行的卡片格,每格等高、字放大,項目多寡都排得好看。 */
.pdapps{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:clamp(10px,1.2vw,16px)}
.pda-i{display:flex;align-items:center;min-height:74px;
  font-family:var(--font-text);font-weight:600;font-size:16px;line-height:1.35;
  color:var(--text-primary);
  padding:16px 18px;background:var(--bg-inset);border-radius:8px;
  border-left:3px solid var(--accent)}
@media (max-width:760px){
  .pdapps{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px}
  .pda-i{min-height:62px;font-size:14.5px;padding:13px 14px}
}

/* 品質保證:黑底 */
.pdqa{background:#0D0F11;padding-block:clamp(30px,3.4vw,52px)}
.pdqa .label{display:block;color:var(--accent);margin-bottom:var(--space-sm)}
.pdqa h2{font-family:var(--font-text);font-weight:700;color:oklch(98% 0 0);
  letter-spacing:-.02em;line-height:1.15;font-size:clamp(1.4rem,1.05rem + 1.4vw,2.1rem)}
.pdqa p{margin-top:var(--space-xs);font-size:14px;color:oklch(76% .008 250)}

/* 客製選項:兩欄連結列 */
.pdcust{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(28px,4vw,72px)}
.pdc-i{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  padding:15px 0;border-bottom:1px solid var(--rule-soft);
  font-size:14.5px;color:var(--text-primary);text-decoration:none;
  transition:color 150ms var(--ease-out)}
.pdc-i span{color:var(--text-faint);transition:transform 160ms var(--ease-out),color 150ms var(--ease-out)}
.pdc-i:hover{color:var(--accent)}
.pdc-i:hover span{color:var(--accent);transform:translateX(3px)}

/* 詢價欄位:五格 + 按鈕 */
.pdorder-form{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-md) clamp(14px,1.6vw,24px);align-items:end}
.pdorder-form label{display:block;font-family:var(--font-text);font-size:12.5px;
  font-weight:600;color:var(--text-secondary)}
.pdorder-form input{display:block;width:100%;margin-top:7px;padding:11px 12px;
  border:1px solid var(--rule);background:var(--white);border-radius:0;
  font:inherit;font-size:14px;color:var(--text-primary)}
.pdorder-form input:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:transparent}
.pdorder-form .cta{grid-column:1 / -1;justify-self:start;width:auto;
  margin-top:var(--space-xs);padding:13px 22px;font-size:14px}
.pdorder-note{margin-top:var(--space-md);font-size:12.5px;color:var(--text-muted)}

/* FAQ:手風琴 */
.pdfaq{border-top:1px solid var(--rule)}
.pdfaq .qa{border-bottom:1px solid var(--rule-soft)}
.pdfaq .qa summary{font-size:14.5px;font-weight:600;padding-block:14px}
.pdfaq .qa p{font-size:13.5px;padding-bottom:var(--space-md)}

/* 其他產品 */
.pd-others{background:var(--white);padding-block:clamp(30px,3.6vw,56px) clamp(40px,4.6vw,72px);
  border-top:1px solid var(--rule-soft)}
.browse-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md);
  margin-bottom:var(--space-lg)}
.pd-others .prodgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(12px,1.4vw,20px)}
.pd-others .pitem{background:#F1F1F0;padding:clamp(14px,1.6vw,22px);text-align:left}
.pd-others .pitem-img{aspect-ratio:1/1;margin-bottom:var(--space-sm)}
.pd-others .pitem-name{font-family:var(--font-text);font-weight:700;font-size:13px;line-height:1.3}
.pd-others .pitem-spec{font-size:12px;color:var(--text-muted);margin-top:3px}

@media (max-width:1000px){
  /* flex-grow 設 0：不然項數不是 3 的倍數時，最後一列會被撐成 1.5 倍寬，
     跟上面幾列的格子大小對不起來（實測 5 項 @980px：上列 304、下列 456）。 */
  .pdb-i{flex:0 1 calc(100%/3 - 1px)}          /* 一列 3 個，格子固定等寬 */
  .pdb-i:nth-child(3n+1){border-left:0;padding-left:0;
    padding-right:calc(2 * clamp(10px,1.4vw,20px))}
  .pd-others .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .pdh{grid-template-columns:minmax(0,1fr)}
  /* 2026-08-09 手機版 hero 外框修正(user 回報「超出框」)。
     桌機的外框是兩張背景圖(pd-hero-l/r.webp)各鋪一欄,靠 contain 撐滿。
     直向堆疊後兩欄的長寬比全變了,contain 把框畫在區塊中央 → 紅槓正好
     橫切「V-2D-MF · TWO-PIECE SERIES」那行,左右也跟內容對不齊。
     手機改用真的 CSS 邊框:永遠貼齊區塊,而且線寬不會被縮放。 */
  .pdh{padding:14px 12px 20px}
  .pdh-img,.pdh-info{background-image:none}
  .pdh-img{border:1px solid var(--text-primary)}
  .pdh-info{border:1px solid var(--text-primary);
    border-top:5px solid var(--accent);margin-top:14px}
  .pdh-pad{padding-inline:16px !important}
  .pdsec-in{grid-template-columns:minmax(0,1fr)}
  .pdorder-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdcust{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .pdb-i{flex:0 1 calc(100%/2 - 1px)}          /* 一列 2 個，格子固定等寬 */
  .pdb-i:nth-child(3n+1){border-left:1px solid oklch(28% .008 250);
    padding-left:clamp(10px,1.4vw,20px);padding-right:clamp(10px,1.4vw,20px)}
  .pdb-i:nth-child(2n+1){border-left:0;padding-left:0;
    padding-right:calc(2 * clamp(10px,1.4vw,20px))}
  .pdorder-form{grid-template-columns:minmax(0,1fr)}
  .pd-others .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pdfeats{grid-template-columns:1fr;gap:10px}
  .pdapps{grid-template-columns:minmax(0,1fr);gap:10px}
  .pdf-i,.pda-i{border-left:0;padding-left:0;padding-block:0}
}

/* ── 產品詳細頁:工程尺寸(2026-08-01) ──
   左線稿圖 + 代號說明,右尺寸表。表格用真的 <table>,Google 與 AI 都讀得到 —— 
   這是把數據放在 HTML 而不是只丟 PDF 的重點。 */
.pddim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,3vw,52px);align-items:start}
.pddim.nofig{grid-template-columns:minmax(0,1fr)}
/* 代號說明排在表格下方時:改用 flex 橫向流動,dt/dd 才會成對不錯位 */
.pddim-key.inline{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 8px;
  margin-top:var(--space-lg);padding-top:var(--space-md);border-top:1px solid var(--rule-soft)}
.pddim-key.inline dd{margin:0 20px 0 0}
.pddim-fig{margin:0}
/* 2026-08-02 user 指示:圖紙一律不要白底 —— 線稿圖已做透明背景,
   這裡不能再墊白底,否則透明就沒意義了。 */
.pddim-fig img{width:100%;height:auto;display:block}
.pddim-key{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-md);
  margin-top:var(--space-lg);font-size:13px}
.pddim-key dt{font-family:var(--font-text);font-weight:700;color:var(--text-primary)}
.pddim-key dd{margin:0;color:var(--text-muted)}
.pddim-tbl table{width:100%;border-collapse:collapse;font-size:13.5px}
.pddim-tbl thead th{background:#17191B;color:oklch(98% 0 0);
  font-family:var(--font-text);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:11px 10px;text-align:right}
.pddim-tbl thead th:first-child{text-align:left}
.pddim-tbl tbody th{font-family:var(--font-text);font-weight:700;text-align:left;
  padding:11px 10px;border-bottom:1px solid var(--rule-soft)}
.pddim-tbl tbody td{padding:11px 10px;text-align:right;font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--rule-soft);color:var(--text-secondary)}
.pddim-tbl tbody tr:nth-child(even) th,.pddim-tbl tbody tr:nth-child(even) td{background:oklch(97% .002 250)}
.pddim-note{margin-top:var(--space-md);font-size:12.5px;color:var(--text-muted)}
.pddim-note a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .pddim{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .pddim-tbl table{font-size:12.5px}
  .pddim-tbl thead th,.pddim-tbl tbody th,.pddim-tbl tbody td{padding:9px 6px}
}

/* ══════════════════════════════════════════════════
   2026-08-02 後台:產品面板改成分頁式
   欄位從 10 個長到 30 幾個,擠在一張單子上會滑到找不到東西。
   .pop.wide 只給產品面板加寬,其他面板維持原本 360px。
   ══════════════════════════════════════════════════ */
.pop.wide{width:min(560px,calc(100vw - 28px))}
.pop .tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 16px;
  border-bottom:1px solid var(--rule-soft);padding-bottom:10px}
.pop .tabs button{background:none;border:1px solid transparent;border-radius:5px;
  font:inherit;font-size:12.5px;padding:6px 11px;cursor:pointer;color:var(--ink-600)}
.pop .tabs button:hover{background:var(--edit-wash);color:var(--edit)}
.pop .tabs button.on{background:var(--edit);border-color:var(--edit);color:#fff;font-weight:600}
.pop .tp{display:none}
.pop .tp.on{display:block}
.pop .tphint{font-size:12px;color:var(--ink-600);line-height:1.6;margin:0 0 14px;
  background:var(--wash);border-radius:5px;padding:9px 11px}
.pop .tphint b{color:var(--ink-800)}
.pop label .hint{display:block;font-weight:400;font-size:11.5px;color:var(--ink-600);margin-top:2px}
.pop .fr > .hint{display:block;font-size:11.5px;color:var(--ink-600);margin-top:5px}
@media (max-width:620px){
  .pop.wide{width:calc(100vw - 28px)}
  .pop.wide .row2{grid-template-columns:1fr}
}

/* 全站圖片說明總表 */
.pop .altgrp{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-600);margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--rule-soft)}
.pop .altgrp:first-child{margin-top:0}
.pop .altrow{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.pop .altrow img{width:62px;height:62px;object-fit:contain;background:var(--wash);
  border:1px solid var(--rule-soft);border-radius:5px;flex:none}
.pop .altfld{flex:1;min-width:0}
.pop .altfld label{font-size:12px;margin-bottom:4px}
.pop .altlen{display:block;font-size:11.5px;color:var(--ink-600);margin-top:4px}

/* 2026-08-04 尺寸表支援兩組(同頁掛兩個型號時) */
.pddim-th{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:0 0 12px;padding-top:6px}
.pddim-tbl .pddim-th:not(:first-child){margin-top:34px;padding-top:26px;
  border-top:1px solid var(--rule-soft)}
.pddim-th h3{margin:0;font-family:var(--font-ui);font-size:13px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-primary)}
.pddim-th a{font-family:var(--font-ui);font-size:12.5px;color:var(--accent);
  text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px}
.pddim-th a:hover{opacity:.72}

/* ══════════════════════════════════════════════════
   2026-08-04 產品 hero 照片輪播（純 CSS，不用 JavaScript）
   ⚠️ 三張 <img> 全部在 HTML 裡，只用 transform 位移做動畫 ——
      Google 三張都讀得到，alt 也都算數。
   一張停 3.5 秒，換場 0.7 秒；--n 是張數，由程式帶進來。
   ══════════════════════════════════════════════════ */
.pdh-slider{position:relative;width:100%;height:100%;overflow:hidden}
.pdh-track{display:flex;width:calc(var(--n) * 100%);height:100%;
  animation:pdh-slide calc(var(--n) * 4.2s) infinite}
.pdh-track figure{width:calc(100% / var(--n));height:100%;margin:0;flex:none;
  display:flex;align-items:center;justify-content:center}
.pdh-track img{width:100%;height:100%;object-fit:contain}

/* 兩張 */
@keyframes pdh-slide{
  0%,42%      {transform:translateX(0)}
  50%,92%     {transform:translateX(-50%)}
  100%        {transform:translateX(0)}
}
/* 三張以上用同一組關鍵影格會不準,這裡只支援 2-3 張(實務夠用) */
.pdh-slider[style*="--n:3"] .pdh-track{animation-name:pdh-slide3}
@keyframes pdh-slide3{
  0%,28%      {transform:translateX(0)}
  33%,61%     {transform:translateX(calc(-100% / 3))}
  66%,94%     {transform:translateX(calc(-200% / 3))}
  100%        {transform:translateX(0)}
}

/* 進度圓點 */
.pdh-dots{position:absolute;left:0;right:0;bottom:clamp(14px,2vw,26px);
  display:flex;justify-content:center;gap:7px;pointer-events:none}
.pdh-dots span{width:7px;height:7px;border-radius:50%;background:var(--steel-300);
  animation:pdh-dot calc(var(--n) * 4.2s) infinite;
  animation-delay:calc(var(--i) * 4.2s)}
@keyframes pdh-dot{0%,22%{background:var(--accent)}24%,100%{background:var(--steel-300)}}

/* 會暈眩的人:停止動畫,只顯示第一張 */
@media (prefers-reduced-motion:reduce){
  .pdh-track,.pdh-dots span{animation:none}
  .pdh-track{transform:translateX(0)}
}

/* 後台:輪播照片的可上傳列表（2026-08-04） */
.pop .hprow{display:flex;gap:10px;align-items:flex-start;
  padding:10px;margin-bottom:8px;background:var(--wash);border-radius:6px}
.pop .hpimg{width:62px;height:62px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--rule-soft);border-radius:5px;overflow:hidden}
.pop .hpimg img{width:100%;height:100%;object-fit:contain}
.pop .hpimg span{font-size:10.5px;color:var(--ink-600);text-align:center;line-height:1.3}
.pop .hpfld{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.pop .hpfld .btn{align-self:flex-start;padding:5px 11px;font-size:12px}
.pop .hp-del{align-self:center;padding:4px 10px;font-size:15px;line-height:1}

/* ══ 後台圖庫（2026-08-05）══ */
.mediagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:11px}
.mitem{border:1px solid var(--rule-soft);border-radius:7px;overflow:hidden;background:var(--white)}
.mthumb{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  background:var(--wash);overflow:hidden}
.mthumb img{width:100%;height:100%;object-fit:contain}
.mmeta{font-size:11px;color:var(--ink-600);padding:5px 7px 0;text-align:center}
.macts{display:flex;gap:4px;padding:5px 6px 6px}
.macts .btn{flex:1;padding:5px 4px;font-size:11.5px}
.macts .btn.dg{flex:0 0 34px}
/* 上傳區:兩行說明 */
.pop .drop .dropmain{display:block;font-weight:600;color:var(--ink-800)}
.pop .drop .dropsub{display:block;font-size:11.5px;margin-top:3px}

/* ══ 2026-08-06 產品總覽的編輯層(user 要求:總覽頁可直接編輯產品與分類) ══ */
body.editing .pitem{position:relative}
body.editing .pitem:hover .tile-tools{display:flex}
body.editing .pnav li{position:relative}
.pnav-ed{display:none;position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:#fff;border:1px solid #bbb;border-radius:3px;padding:2px 7px;font-size:12px;cursor:pointer;z-index:5}
body.editing .pnav li:hover .pnav-ed{display:block}

body.editing .pitem[data-goto]{cursor:pointer}

/* ══════════ 2026-08-08 產品總覽頁:側欄不再滿高、卡片改一排四張 ══════════
   user 回報兩件事:①左邊黑條拉到跟卡片區一樣長(14 個產品時約 3000px)
   ②頁面太長,想捲動看完所有產品。
   ① 的成因是 1246 行為了照設計稿寫死的 height:100% + position:static
      (當時只有 7 個產品,黑條剛好)。這裡改回「只有內容高 + 跟著捲動」。
   ② 卡片圖區從 1:1.12 改正方形、內距與字級縮一階,欄數 3 → 4。
   靠後蓋前;要回退把這整段刪掉即可。 */

/* 側欄:高度只到最後一個分類,捲動時跟著走 */
.products-page .pnav{height:auto;align-self:start;position:sticky;
  top:clamp(14px,1.6vw,26px);padding-bottom:0}
/* 後台編輯模式上方有 54px 工具列,sticky 不讓開的話「VALVE TYPES」會被切掉。
   公開站沒有那條列,所以只加在 body.editing。 */
body.editing .products-page .pnav{top:66px}
/* 項目高度也跟著縮一階(原本 26px 上下內距是配滿高黑條的) */
.products-page .pnav a{padding:18px 34px 18px 22px}
.products-page .pnav .label{padding:18px 22px 14px}

/* 卡片:一排四張、圖區正方形、內距與字級縮一階 */
.products-page .prodgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
.products-page .pitem{padding:clamp(16px,1.6vw,22px)}
.products-page .pitem-img{aspect-ratio:1/1;margin-bottom:clamp(12px,1.3vw,18px)}
.products-page .pitem-name{font-size:clamp(.85rem,.8rem + .2vw,.97rem);line-height:1.25}
.products-page .pitem-more{margin-top:var(--space-md);font-size:11.5px}

/* 中間寬度補一階三欄,不然 4 欄在 1100 以下每張太窄 */
@media (max-width:1100px){
  .products-page .prodgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* ⚠️ 手機版必須把上面的 sticky 收回 static ——
   這段寫在原本 900px 斷點之後,不重新宣告的話會蓋掉它、手機側欄變成黏在畫面上。 */
@media (max-width:900px){
  .products-page .pnav{position:static;height:auto;align-self:stretch;
    padding:0 0 var(--space-md)}
  .products-page .pnav .label{padding:16px 18px 12px}
  .products-page .pnav a{padding:10px 12px}
  .products-page .prodgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .products-page .prodgrid{grid-template-columns:minmax(0,1fr)}
}

/* 「＋ 新增產品」卡片(只在編輯模式出現,公開站不會渲染) */
body.editing .products-page .pitem-new{background:transparent;border:2px dashed #C6C9CE;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;cursor:pointer;color:var(--text-muted);font:inherit;
  min-height:200px;transition:border-color 160ms var(--ease-out),background 160ms var(--ease-out)}
body.editing .products-page .pitem-new:hover{background:#F4F5F6;border-color:var(--accent);
  transform:none}
body.editing .pnew-plus{font-size:30px;line-height:1;color:var(--accent)}
body.editing .pnew-t{font-weight:700;font-size:14px;color:var(--text-primary)}
body.editing .pnew-h{font-size:11.5px;line-height:1.4;max-width:20ch;opacity:.8}

/* ══════════ 2026-08-09 產品頁 hero:兩個框改成完全一樣大 ══════════
   user 指示「我要的是兩個框框一樣大,要跟這張圖完全一樣」。

   為什麼原本不一樣大(實測 1440 視窗):
     左欄 784px、右欄 713px(grid 設 1.1fr : 1fr),
     而框是「背景圖 + contain」,每張圖各自縮到塞進自己那一欄
     → 左框渲染成 772x623、右框 713x575。換幾次圖都不會一樣。

   改法:①兩欄等寬 ②不用背景圖畫框,改用真正的 CSS 邊框
        (手機版 2026-08-09 已經是這個做法,桌機沿用同一套,兩邊終於一致)

   ⚠️ pd-hero-l.webp / pd-hero-r.webp 從此不再被使用,但檔案留著沒刪
      —— 要回退整段刪掉這個區塊即可,舊行為會自動回來。
   要回退:刪掉本區塊(從上面那行 ══ 到檔尾)。備份 舊素材備份/site.css.bak-2026-08-09-before-equal-frames */
@media (min-width:901px){
  .pdh{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);   /* 等寬,這是「一樣大」的關鍵 */
    gap:clamp(22px,4.2vw,61px);
    padding:clamp(18px,2.2vw,34px) clamp(24px,3.2vw,46px) clamp(26px,3.4vw,52px);
    align-items:stretch;                                  /* 兩欄同高 */
  }
  /* 邊框粗細照參考圖的比例換算:黑框約 0.33% 框寬、紅槓約 1.84% 框高 */
  .pdh-img,.pdh-info{background-image:none;background-color:#fff}
  .pdh-img{border:2px solid var(--text-primary)}
  .pdh-info{border:2px solid var(--text-primary);border-top:11px solid var(--accent)}
  /* 原本右欄內距用 --gut(整站外緣留白),現在框已經內縮,改成一般內距免得文字被推太裡面 */
  .pdh-pad{padding:clamp(28px,3.2vw,52px) clamp(26px,3vw,50px)}
}

/* ── 2026-08-09 左側分類欄不再黏住（user 指示）──────────────────
   原本 .products-page .pnav 是 position:sticky，往下捲時會一直停在畫面上方跟著走。
   user：「往下滑的時候，左邊的分類不要跟著移動」「像內容一樣，滑過去就滑過去」。
   → 改成 static，跟其他內容一起捲走。
   要回退：刪掉這一段（sticky 的原規則還在上面，會自動生效）。 */
.products-page .pnav{position:static}
body.editing .products-page .pnav{top:auto}

/* ── 2026-08-09 導覽列圖片商標（user 提供，取代原本的文字字標）──────────
   圖是接近正方形（內容 1022x858），導覽列很扁，所以只能做小。
   user：「小就小先做上去給我看」。
   高度 44px、寬度自動；圖檔本身是 132px 高（3 倍），Retina 螢幕不會糊。
   要回退：刪掉這段，並把 _worker.js 的 <img class="wm-img"> 換回原本的 wm-text 那段。 */
.wordmark .wm-img{height:44px;width:auto;display:block;flex:none}
@media (max-width:600px){ .wordmark .wm-img{height:36px} }

/* ── 2026-08-10 FAQ 牆卡片同排等高（user：「格子都沒有對齊」）──────────
   原本 .fw-grid 設 align-items:start，每張卡只長到自己內容的高度，
   同一排兩張卡高度不同 → 版面參差。改回 grid 預設的 stretch：
   同一排以較高那張為準，兩張一樣高，每排底邊切齊。
   要回退：刪這段（上面的 start 規則會自動生效）。 */
.fw-grid{align-items:stretch}

/* ── 2026-08-10 後台「🖼 背景圖」面板改成清單（user：每個區塊都要能自己換圖）──
   一頁可能有 1–5 張圖，原本單張的版面塞不下，所以面板加寬、每張圖一列。
   只影響後台編輯介面，公開站完全不受影響。 */
.pop.wide{width:min(420px,calc(100vw - 28px))}
.bgrow{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--rule-soft)}
.bgrow:first-child{border-top:0;padding-top:0}
.bgrow .bgthumb{width:104px;flex:none;border:1px solid var(--rule);border-radius:6px;overflow:hidden;
  background:var(--steel-100);cursor:pointer;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.bgrow .bgthumb:hover{border-color:var(--edit);box-shadow:0 0 0 3px var(--edit-wash)}
.bgrow .bgthumb img{width:100%;height:100%;object-fit:cover;display:block}
.bgrow .bgthumb.drag{border-color:var(--edit);background:var(--edit-wash)}
.bgrow .bgthumb .ph{font-size:11.5px;color:var(--ink-450);text-align:center;padding:6px;line-height:1.4}
.bgrow .bgmeta{flex:1;min-width:0}
.bgrow .bgmeta b{display:block;font-size:13px;color:var(--ink-900)}
.bgrow .bgmeta .note{margin:3px 0 0;font-size:11.5px;line-height:1.55}
.bgrow .bgacts{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.bgrow .bgacts .btn{padding:5px 10px;font-size:12px}
.bgrow .bgstate{font-size:11px;color:var(--ink-450);margin-top:5px}
.bgrow .bgstate.custom{color:var(--edit);font-weight:600}

/* ── 2026-08-11 首頁 hero 文字改深色（user 在後台換了明亮的鑄造車間照）──────
   前提：這套只在「背景是亮照片」時成立。上面 963 行起那組是白字版（配暗照），
   這一段靠後蓋前把它蓋掉。**要換回暗色照片，把這一整段刪掉，白字自動回來。**

   ⚠️ 不壓暗、不加框（user 2026-08-10 兩次明確要求）。深色字唯一的風險是壓到
   地板的斜向陰影帶時對比掉下來 → 加一層很淡的白色柔光把字托起來。
   那是 text-shadow 光暈，不是白框，亮處看不出來。 */
.pitch[data-tone="light"].full .pitch-copy h1{color:oklch(20% .014 250);
  text-shadow:0 1px 16px rgba(255,255,255,.62), 0 0 3px rgba(255,255,255,.5)}
.pitch[data-tone="light"].full .pitch-copy h1 .lt{color:oklch(38% .014 250)}
.pitch[data-tone="light"].full .pitch-copy .lede{color:oklch(28% .012 250);font-weight:500;
  text-shadow:0 1px 12px rgba(255,255,255,.72), 0 0 3px rgba(255,255,255,.55)}
.pitch[data-tone="light"].full .pitch-cta p{color:oklch(32% .012 250)}
.pitch[data-tone="light"].full .fact{border-color:rgba(0,0,0,.20);color:oklch(32% .012 250)}

/* 手機：原本把背景推到 74%（熔爐那側）並壓一層深漸層，那是配白字的。
   深色字壓在熔爐與暗牆上會整段消失 → 背景改推到 22%（左側亮地板）、漸層取消。 */
@media (max-width:700px){
  .pitch[data-tone="light"] .pitch-bg{background-position:22% center}
  .pitch[data-tone="light"] .pitch-bg::after{background:none}
}

/* ── 2026-08-11 Ordering 橫幅改亮版（user 在後台換成左側米白的零件照）───────
   ⚠️ 他問「為什麼換了圖左邊還是黑的」——**左邊那片黑不是圖，是漸層**：
   原本 pn-0 疊了一層 `linear-gradient(90deg,#101619 0→33%…)` 用來保護白字，
   配舊的深色斜線圖看不出來，換成左側本來就乾淨的照片後，它就變成一塊突兀的黑。
   → 漸層拿掉，文字改深色（跟 hero 同一套邏輯：底變亮，壓在上面的東西就要換色）。
   要回退成深色版：刪掉這一段。 */
.home-page .info-grid > .panel.pn-0[data-tone="light"]{
  background:#F6F1EB var(--bgimg, url('img/ordering-bg.webp')) right center / 100% 100% no-repeat}
.home-page .info-grid > .panel.pn-0[data-tone="light"] h2{color:oklch(20% .014 250)}
.home-page .info-grid > .panel.pn-0[data-tone="light"] p{color:oklch(30% .012 250)}
.home-page .info-grid > .panel.pn-0[data-tone="light"] .panel-link{color:var(--accent-deep)}
.home-page .info-grid > .panel.pn-0[data-tone="light"] .panel-link:hover{border-bottom-color:var(--accent-deep)}
@media (max-width:900px){
  /* 手機同樣拿掉那層垂直漸層；文字滿寬壓在照片上，所以背景改對齊左側乾淨區 */
  .home-page .info-grid > .panel.pn-0[data-tone="light"]{
    background:#F6F1EB var(--bgimg, url('img/ordering-bg.webp')) left center / cover no-repeat}
}

/* ══════════════════════════════════════════════════════════════════════
   2026-08-11 區塊文字明暗切換（後台「🖼 背景圖」面板每一列的「白字／黑字」）
   ── 為什麼要做：8/11 一天內 hero／頁首／分類條／Ordering 連撞四次同一件事 ——
      背景換成亮照片，壓在上面的白字就消失，每次都要 user 回報、我改程式。

   規則：render 在區塊上輸出 data-tone="dark|light"。
     dark  = 現況（深色遮罩 + 白字）→ 沿用上面既有的規則，這裡不寫。
     light = 亮底版（遮罩拿掉 + 深色字）→ 全部寫在下面。
   ⚠️ 選擇器一定要帶原本的 class 鏈（例如 .oh-in h1 前面加 .oem-hero[data-tone]），
      光寫 `[data-tone="light"] h1` 特異性只有 0,1,1，蓋不過既有的 0,2,1 規則。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 底部詢價帶 ── 深色版是「深色漸層 + 光弧圖 + 白字」，亮版把漸層拿掉 */
.quote-strip[data-tone="light"]{
  background:#F6F1EB var(--bgimg, url('img/quote-arc.webp')) center center / cover no-repeat}
.quote-strip[data-tone="light"] .qs-in h2{color:oklch(20% .014 250)}
.quote-strip[data-tone="light"] .qs-in h2 .lt{color:oklch(38% .014 250)}
.quote-strip[data-tone="light"] .qs-in p{color:oklch(30% .012 250)}
.quote-strip[data-tone="light"] .cta{background:var(--accent);color:var(--cta-text)}
@media (max-width:700px){
  .quote-strip[data-tone="light"]{
    background:#F6F1EB var(--bgimg, url('img/quote-arc.webp')) right center / cover no-repeat}
  .quote-strip[data-tone="light"] .qs-in h2{color:oklch(20% .014 250)}
  .quote-strip[data-tone="light"] .qs-in h2 .lt,
  .quote-strip[data-tone="light"] .qs-in p{color:oklch(32% .012 250)}
}

/* ── 六個內頁的頁首大圖 ── 文字元素各頁不同（.ah-in/.oh-in/.fh-in/.bh-in/.ch-in/.pgh-in），
      但要改的東西一樣：小標、h1、lede 三層。 */
.about-hero[data-tone="light"] .label,
.oem-hero[data-tone="light"] .label,
.faq-hero[data-tone="light"] .label,
.blog-hero[data-tone="light"] .label{color:var(--accent-deep)}
.about-hero[data-tone="light"] .ah-in h1,
.oem-hero[data-tone="light"] .oh-in h1,
.faq-hero[data-tone="light"] .fh-in h1,
.blog-hero[data-tone="light"] .bh-in h1,
.contact-hero[data-tone="light"] .ch-in h1,
.products-page .pgh[data-tone="light"] h1{color:oklch(20% .014 250);
  text-shadow:0 1px 16px rgba(255,255,255,.6), 0 0 3px rgba(255,255,255,.5)}
.about-hero[data-tone="light"] .ah-in .lede,
.oem-hero[data-tone="light"] .oh-in .lede,
.faq-hero[data-tone="light"] .fh-in .lede,
.blog-hero[data-tone="light"] .bh-in .lede,
.contact-hero[data-tone="light"] .ch-in .lede,
.products-page .pgh[data-tone="light"] .lede{color:oklch(30% .012 250);font-weight:500;
  text-shadow:0 1px 12px rgba(255,255,255,.7), 0 0 3px rgba(255,255,255,.55)}
.products-page .pgh[data-tone="light"] .crumb,
.products-page .pgh[data-tone="light"] .crumb a{color:oklch(35% .012 250)}
/* About 頁首的認證章與標籤（深色版是白字白框） */
.about-hero[data-tone="light"] .ah-certs span{color:oklch(28% .012 250);border-color:rgba(0,0,0,.24)}
/* 手機：這幾頁的深色遮罩（::before）在亮版要關掉，否則深色字壓在深遮罩上一樣看不見 */
@media (max-width:700px){
  .oem-hero[data-tone="light"]::before,
  .faq-hero[data-tone="light"]::before,
  .blog-hero[data-tone="light"]::before,
  .contact-hero[data-tone="light"]::before,
  .about-hero[data-tone="light"]::before{background:none}
}
/* 背景清單每一列的「白字／黑字」切換（只有文字壓在圖上的區塊才會出現） */
.bgrow .bgtone{display:flex;align-items:center;gap:8px;margin-top:8px}
.bgrow .bgtone > span{font-size:11.5px;color:var(--ink-600);flex:none}
.bgrow .bgtone .seg{flex:none;width:auto}
.bgrow .bgtone .seg button{padding:5px 12px;font-size:12px;flex:none}

/* ── 2026-08-11 頁尾改米白（user 指定 footer-bg.webp）────────────────────
   原本是深色底（--bg-deep）配白字。跟前面幾次一樣，底變亮就得換掉壓在上面的所有顏色：
   標題、內文、連結、hover、分隔線，還有字標「SZ Valves」——
   那顆 SZ 原本用亮紅 oklch(66% .16 30)（為深底調亮過），放到米白上會刺眼、改回品牌紅。

   頁尾同時接進後台的「🖼 背景圖」清單（key: footer，全站共用），
   所以之後換深色照片只要把那一列切回「白字」，下面這組就會整組讓位給上面的深色版。 */
footer[data-tone="light"]{background:#FCF6EE var(--bgimg, url('img/footer-bg.webp')) center center / cover no-repeat}
footer[data-tone="light"]{color:oklch(38% .010 250)}
footer[data-tone="light"] .f-grid .label{color:oklch(45% .012 250)}
footer[data-tone="light"] .f-grid p,
footer[data-tone="light"] .f-grid a{color:oklch(33% .010 250)}
footer[data-tone="light"] .f-grid a:hover{color:oklch(18% .012 250)}
footer[data-tone="light"] .f-base{border-top-color:rgba(0,0,0,.14);color:oklch(45% .012 250)}
footer[data-tone="light"] .wm-text .sz{color:var(--accent)}
footer[data-tone="light"] .wm-text .v{color:oklch(28% .010 250)}
footer[data-tone="light"] p[style*="text-faint"],
footer[data-tone="light"] .f-grid p[style]{color:oklch(42% .010 250) !important}
/* 切回白字（深色照片）時，底色回到原本的深色，避免米白透出來 */
footer[data-tone="dark"]{background-color:var(--bg-deep)}
/* 亮版頁尾跟上方內容同色，界線會不見（深色版本來靠色差自然分隔）→ 補一條細線 */
footer[data-tone="light"]{border-top:1px solid rgba(0,0,0,.10)}


/* ══════════════════════════════════════════════════════════════════════
   2026-09-19 全站 v2 共用層＋首頁:明亮版(user 提供整頁設計稿,「內容不變,只改配色、排版與圖」)
   ‧ _worker.js 的 SITE_V2 開關為 true 時每頁 <body> 掛 class="site-v2",本段每條規則都以
     body.site-v2 開頭 → 關掉開關就整套退場。頁首、頁尾、詢價帶、色票、字型是全站共用。
   ‧ 回退 = 整段刪掉 + 把 _worker.js 的 SITE_V2 改成 false(備份在上一層:網站原始碼/site.css.bak-2026-09-19-before-home-v2;不能放 assets/,部署檢查會擋 .bak)。
   ‧ 字型:Cormorant Garamond(標題,斜體強調是設計稿指定)+ Source Sans 3(內文),
     自架於 assets/fonts,宣告在 szv-fonts-v2.css。
   ‧ 後台換圖機制照舊:三個資訊區塊的照片仍走 var(--bgimg, 預設圖),只是從「區塊背景」
     改畫在 ::after 的圓角圖框上。⚠️ 本段不准出現 important 旗標(8/11 踩過:會讓後台換圖失效)。
   ‧ 動效只有滑鼠互動(user 9/17 拍板):卡片抬起、照片微放大、按鈕回饋;只動 transform/opacity。
   ══════════════════════════════════════════════════════════════════════ */
body.site-v2{
  /* primitive */
  --v2-white:oklch(100% 0 0);
  --v2-mist-050:oklch(97.9% .003 250);   /* #F7F8FA 區塊淺底 */
  --v2-mist-100:oklch(96.6% .004 250);   /* #F4F6F8 頁首 */
  --v2-mist-200:oklch(95.4% .006 250);   /* #EEF1F4 頁尾 */
  --v2-mist-300:oklch(91.5% .008 250);   /* 細線 */
  --v2-slate-500:oklch(52% .028 245);    /* #5C6B78 內文 */
  --v2-slate-900:oklch(27% .022 250);    /* #232B35 標題 */
  --v2-red-600:oklch(54.5% .172 29);     /* #C0392B */
  --v2-red-700:oklch(47% .16 29);
  /* semantic(同時覆寫站內既有語意變數,讓沿用它們的舊規則自動跟著換色) */
  --v2-surface:var(--v2-mist-050); --v2-line:var(--v2-mist-300);
  --v2-ink:var(--v2-slate-900); --v2-muted:var(--v2-slate-500);
  --accent:var(--v2-red-600); --accent-deep:var(--v2-red-700);
  --text-primary:var(--v2-ink); --text-secondary:var(--v2-muted); --text-muted:var(--v2-muted);
  --text-faint:var(--v2-muted); --focus-ring:var(--v2-red-700);
  --font-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;  /* 2026-11-03 原 Cormorant Garamond */
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-text:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;  /* 2026-11-03 原 Source Sans 3 */
  --font-ui:"Manrope",-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;  /* 2026-11-03 跟預覽一致；中文照舊退回蘋方／思源黑體 */
  --v2-radius:10px; --v2-radius-lg:14px;
  /* 陰影取主色相(藍灰),不用純黑 */
  --v2-shadow-sm:0 1px 2px oklch(40% .03 250 / .06),0 4px 14px oklch(40% .03 250 / .06);
  --v2-shadow-md:0 2px 4px oklch(40% .03 250 / .07),0 14px 34px oklch(40% .03 250 / .13);
  --v2-ease-out:cubic-bezier(0,0,.2,1);
  --v2-pad:clamp(20px,4vw,48px);
  /* 內容欄寬 1120:全幅區塊用 --v2-gut 對齊 .wrap 的內容起點 */
  --v2-gut:max(var(--v2-pad), calc(50% - 560px));
  color:var(--v2-ink);
}
body.site-v2 .wrap{max-width:calc(1120px + var(--v2-pad) * 2);padding-inline:var(--v2-pad)}
body.site-v2 h1,body.site-v2 h2,body.site-v2 h3{font-weight:500;letter-spacing:-.005em}
body.site-v2 .label{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent)}

/* ── 頁首:淺灰底、深色字、外框線按鈕 ── */
body.site-v2 .head{background:var(--v2-mist-100);border-bottom:1px solid var(--v2-line)}
body.site-v2 .head-nav a{color:var(--v2-ink);font-size:14.5px}
body.site-v2 .head-nav a:hover{color:var(--accent);border-bottom-color:transparent}
body.site-v2 .head-nav a.cur{color:var(--v2-ink);font-weight:600;border-bottom-color:var(--accent)}
body.site-v2 .head-cta{color:var(--v2-ink);background:var(--v2-white);border:1.5px solid var(--accent);
  border-radius:6px;padding:10px 18px;font-size:14px;
  transition:transform 160ms var(--v2-ease-out),background 160ms var(--v2-ease-out),color 160ms var(--v2-ease-out)}
body.site-v2 .head-cta:hover{background:var(--accent);color:var(--v2-white);transform:translateY(-1px)}
body.site-v2 .head-cta:active{transform:translateY(0) scale(.98)}
body.site-v2 .navtoggle{border-color:var(--v2-line)}
body.site-v2 .navtoggle span{background:var(--v2-ink)}
@media (max-width:960px){
  body.site-v2 .head-nav{border-top-color:var(--v2-line)}
  body.site-v2 .head-nav a,
  body.site-v2 .head-nav a:hover,
  body.site-v2 .head-nav a.cur{color:var(--v2-ink);border-bottom-color:var(--v2-line)}
}

/* ── Hero:明亮照片 + 白霧遮罩,文字欄落在版心偏左 ── */
body.site-v2 .pitch{background:var(--v2-surface);border-bottom:1px solid var(--v2-line)}
body.site-v2 .pitch .pitch-bg{background-position:right center}
body.site-v2 .pitch .pitch-bg::after{background:linear-gradient(90deg,
  oklch(100% 0 0 / .90) 0%,oklch(100% 0 0 / .78) 42%,oklch(100% 0 0 / .46) 72%,oklch(100% 0 0 / .30) 100%)}
body.site-v2 .pitch.full .pitch-in{min-height:clamp(400px,36vw,560px);padding-block:clamp(48px,6vw,88px)}
body.site-v2 .pitch.full .pitch-copy{max-width:min(600px,100%);margin-left:clamp(0px,17.4vw,250px)}
body.site-v2 .pitch.full .pitch-copy h1{color:var(--v2-ink);text-shadow:none;text-wrap:wrap;
  font-size:clamp(2.1rem,1.3rem + 2.5vw,3.15rem);line-height:1.14;letter-spacing:-.01em}
/* 斜體紅字強調:設計稿指定(user 2026-09-19) */
body.site-v2 .pitch.full .pitch-copy h1 .lt{color:var(--accent);font-style:italic;letter-spacing:-.005em}
body.site-v2 .pitch.full .pitch-copy .lede{color:var(--v2-muted);font-weight:400;text-shadow:none;
  font-size:clamp(16px,.9rem + .3vw,18px);line-height:1.7;max-width:50ch;margin-top:var(--space-md)}
body.site-v2 .pitch .cta{border-radius:6px}
/* 後台若把首頁大圖切回「白字」(換成深色照片):遮罩改深、字改白 */
body.site-v2 .pitch[data-tone="dark"] .pitch-bg::after{background:linear-gradient(90deg,
  oklch(18% .02 250 / .82) 0%,oklch(18% .02 250 / .62) 50%,oklch(18% .02 250 / .30) 100%)}
body.site-v2 .pitch[data-tone="dark"].full .pitch-copy h1{color:var(--v2-white)}
body.site-v2 .pitch[data-tone="dark"].full .pitch-copy h1 .lt{color:oklch(78% .13 30)}
body.site-v2 .pitch[data-tone="dark"].full .pitch-copy .lede{color:oklch(90% .006 250)}
@media (max-width:820px){
  body.site-v2 .pitch.full .pitch-copy{margin-left:0}
  body.site-v2 .pitch.full .pitch-in{min-height:clamp(320px,62vw,440px)}
  body.site-v2 .pitch .pitch-bg{background-position:78% center}
  body.site-v2 .pitch[data-tone="light"] .pitch-bg::after{background:linear-gradient(90deg,
    oklch(100% 0 0 / .92) 0%,oklch(100% 0 0 / .82) 60%,oklch(100% 0 0 / .62) 100%)}
}

/* ── 產品卡:白底圓角卡,照片在上、品名在下 ── */
body.site-v2 .catstrip{background:var(--v2-white);border-bottom:1px solid var(--v2-line);
  padding-block:clamp(32px,4vw,56px)}
body.site-v2 .catstrip-in{max-width:calc(1120px + var(--v2-pad) * 2);margin-inline:auto;
  padding-inline:var(--v2-pad);gap:clamp(8px,1vw,14px);border:0}
body.site-v2 .catcard,
body.site-v2 .catcard + .catcard{aspect-ratio:auto;background:var(--v2-white);
  border:1px solid var(--v2-line);border-radius:var(--v2-radius);
  padding:clamp(8px,.9vw,12px);gap:var(--space-xs);justify-content:flex-start;overflow:hidden;
  color:var(--v2-ink);text-decoration:none;
  transition:transform 200ms var(--v2-ease-out),box-shadow 200ms var(--v2-ease-out),border-color 200ms var(--v2-ease-out)}
body.site-v2 .catcard:hover{background:var(--v2-white);transform:translateY(-4px);
  box-shadow:var(--v2-shadow-md);border-color:oklch(86% .012 250)}
body.site-v2 .catcard:active{transform:translateY(-1px)}
body.site-v2 .catcard.has-photo .cp{width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  background:var(--v2-surface);border-radius:6px;padding:6px;
  transition:transform 260ms var(--v2-ease-out)}
body.site-v2 .catcard.has-photo:hover .cp{transform:scale(1.04)}
body.site-v2 .catcard.has-photo .cn,
body.site-v2 .catcard .cn{display:block;font-size:13px;font-weight:600;line-height:1.35;
  color:var(--v2-ink);text-align:center;text-wrap:balance;min-height:calc(1.35em * 3);padding:4px 4px 6px}
@media (max-width:900px){
  body.site-v2 .catstrip-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.site-v2 .catcard,body.site-v2 .catcard + .catcard,
  body.site-v2 .catcard:nth-child(4n+1),body.site-v2 .catcard:nth-child(3n+1){
    border:1px solid var(--v2-line);padding:8px}
}
@media (max-width:520px){
  body.site-v2 .catstrip-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.site-v2 .catcard .cn{min-height:calc(1.35em * 2)}
}

/* ── 鑄造流程(簽名元素):淺底上的 4×2 白卡,照片滿版壓在卡片上緣 ── */
body.site-v2 .casting{background:var(--v2-surface);border-bottom:0;
  padding-block:clamp(48px,5.5vw,80px) clamp(56px,6vw,88px)}
body.site-v2 .casting-head{margin-bottom:clamp(24px,2.6vw,36px)}
body.site-v2 .ch-txt{max-width:none}
body.site-v2 .casting-head h2{font-size:clamp(1.9rem,1.2rem + 2.2vw,2.9rem);line-height:1.12;
  margin-top:var(--space-sm);letter-spacing:-.01em}
body.site-v2 .casting-lede{color:var(--v2-muted);font-size:clamp(16px,.9rem + .25vw,17.5px);
  line-height:1.65;max-width:62ch;margin-top:var(--space-sm)}
body.site-v2 .steps{gap:clamp(12px,1.5vw,20px)}
body.site-v2 .step{background:var(--v2-white);border:1px solid var(--v2-line);
  border-radius:var(--v2-radius);overflow:hidden;box-shadow:var(--v2-shadow-sm);
  transition:transform 220ms var(--v2-ease-out),box-shadow 220ms var(--v2-ease-out)}
body.site-v2 .step:hover{transform:translateY(-5px);box-shadow:var(--v2-shadow-md)}
body.site-v2 .step img{aspect-ratio:4/3;transition:transform 320ms var(--v2-ease-out)}
body.site-v2 .step:hover img{transform:scale(1.045)}
/* 文字區要蓋在放大的照片上面,不然 hover 時照片會吃到標題 */
body.site-v2 .step-txt{position:relative;background:var(--v2-white);margin-top:0;
  padding:var(--space-sm) clamp(12px,1.1vw,16px) var(--space-md)}
body.site-v2 .step .sn{color:var(--accent);font-size:10.5px;font-weight:700;letter-spacing:.14em}
body.site-v2 .step h3{font-size:clamp(19px,1rem + .45vw,22px);line-height:1.2;margin-top:2px}
body.site-v2 .step p{color:var(--v2-muted);font-size:14.5px;line-height:1.55;margin-top:6px}

/* 手機:八張卡單欄會長到 3300px,改兩欄並把字縮一級 */
@media (max-width:600px){
  body.site-v2 .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body.site-v2 .step-txt{padding:10px 10px 14px}
  body.site-v2 .step h3{font-size:18px}
  body.site-v2 .step p{font-size:13.5px;line-height:1.5}
}

/* ── 三個資訊區塊:一邊文字、一邊圓角照片,左右交替;白/淺灰/白 分段 ── */
body.site-v2 .home-page .info{padding:0;border:0}
body.site-v2 .home-page .info-grid{max-width:none;padding-inline:0}
body.site-v2 .home-page .info-grid > .panel.pn-0,
body.site-v2 .home-page .info-grid > .panel.pn-1,
body.site-v2 .home-page .info-grid > .panel.pn-2{
  display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  grid-template-rows:1fr auto auto auto auto 1fr;
  gap:0 clamp(28px,4.5vw,64px);align-items:start;
  background:var(--v2-white);min-height:0;border:0;
  padding:clamp(48px,5.5vw,80px) var(--v2-gut)}
body.site-v2 .home-page .info-grid > .panel.pn-1{background:var(--v2-surface);
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr)}
body.site-v2 .home-page .info-grid > .panel::after{content:"";grid-column:2;grid-row:1 / -1;align-self:center;
  width:100%;aspect-ratio:16 / 11;border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-md);
  background:var(--v2-mist-200) var(--bgimg, url('img/ordering-stock-mto.webp')) center / cover no-repeat}
body.site-v2 .home-page .info-grid > .panel.pn-1::after{grid-column:1;
  background-image:var(--bgimg, url('img/oem-cartons.webp'))}
body.site-v2 .home-page .info-grid > .panel.pn-2::after{
  background-image:var(--bgimg, url('img/company-inspection.webp'))}
/* ⚠️ .panel[class] 是刻意加的特異性:舊層用 .panel.pn-2 .label{grid-column:2} 這種 0,5,0 的規則排三欄,
   不加的話子元素會被舊規則拉去第 2、3 欄(2026-09-19 實測:公司區塊的小標被照片蓋住、連結跑到最右)。 */
body.site-v2 .home-page .info-grid > .panel[class] > *{grid-column:1;max-width:none}
body.site-v2 .home-page .info-grid > .panel.pn-1[class] > *{grid-column:2}
body.site-v2 .home-page .info-grid > .panel[class] > .label{grid-row:2;color:var(--accent);margin-bottom:var(--space-sm)}
body.site-v2 .home-page .info-grid > .panel[class] > h2{grid-row:3;color:var(--v2-ink);
  font-size:clamp(1.7rem,1.15rem + 1.7vw,2.4rem);line-height:1.14;margin-bottom:var(--space-md)}
body.site-v2 .home-page .info-grid > .panel[class] > div{grid-row:4;align-self:start;max-width:60ch}
body.site-v2 .home-page .info-grid > .panel[class] p{color:var(--v2-muted);font-size:16px;line-height:1.7;
  grid-column:auto;grid-row:auto;max-width:none}
body.site-v2 .home-page .info-grid > .panel[class] p + p{margin-top:var(--space-sm)}
body.site-v2 .home-page .info-grid > .panel[class] > .panel-link{grid-row:5;justify-self:start;align-self:start;
  margin-top:var(--space-md);color:var(--accent);font-size:14.5px;font-weight:600;
  text-decoration:none;border-bottom:1px solid transparent;display:inline-block}
body.site-v2 .home-page .info-grid > .panel[class] > .panel-link:hover{border-bottom-color:var(--accent)}
@media (max-width:900px){
  body.site-v2 .home-page .info-grid > .panel.pn-0,
  body.site-v2 .home-page .info-grid > .panel.pn-1,
  body.site-v2 .home-page .info-grid > .panel.pn-2{
    grid-template-columns:minmax(0,1fr);grid-template-rows:none;
    padding:clamp(36px,8vw,56px) var(--v2-pad)}
  body.site-v2 .home-page .info-grid > .panel::after,
  body.site-v2 .home-page .info-grid > .panel.pn-1::after{grid-column:1;grid-row:1;margin-bottom:var(--space-lg)}
  body.site-v2 .home-page .info-grid > .panel[class] > *,
  body.site-v2 .home-page .info-grid > .panel.pn-1[class] > *{grid-column:1;grid-row:auto}
}

/* ── 底部詢價帶:淺底 + 右下角兩道細弧(純 CSS,不吃全站共用的深色光弧圖) ── */
body.site-v2 .quote-strip,
body.site-v2 .quote-strip[data-tone="light"]{border-top:1px solid var(--v2-line);
  background:
    radial-gradient(circle at 118% 170%,transparent 0 37.6%,oklch(54.5% .172 29 / .22) 37.8% 38.4%,transparent 38.7% 41%,oklch(60% .09 250 / .26) 41.2% 42.2%,transparent 42.6%),
    linear-gradient(100deg,var(--v2-mist-100) 0%,var(--v2-mist-200) 100%)}
body.site-v2 .qs-in{padding-block:clamp(48px,6vw,84px);display:block}
body.site-v2 .quote-strip .qs-in h2{color:var(--v2-ink);
  font-size:clamp(1.8rem,1.2rem + 2vw,2.7rem);line-height:1.2}
body.site-v2 .quote-strip .qs-in h2 span{display:block}
body.site-v2 .quote-strip .qs-in h2 .lt{color:var(--v2-muted);font-style:italic;margin-top:2px}
body.site-v2 .quote-strip .qs-in p{color:var(--v2-muted)}
body.site-v2 .quote-strip .qs-in > div{max-width:none}
body.site-v2 .quote-strip .cta{border-radius:6px;margin-top:var(--space-lg)}

/* ── 頁尾:淺灰底深色字(只在首頁;其他頁維持原樣) ── */
body.site-v2 footer,
body.site-v2 footer[data-tone="light"],
body.site-v2 footer[data-tone="dark"]{background:var(--v2-mist-200);color:var(--v2-muted);
  border-top:1px solid var(--v2-line)}
body.site-v2 footer .f-grid .label{color:var(--accent)}
body.site-v2 footer .f-grid p,
body.site-v2 footer .f-grid a{color:var(--v2-muted)}
body.site-v2 footer .f-grid a:hover{color:var(--v2-ink)}
body.site-v2 footer .f-base{border-top-color:var(--v2-line);color:var(--v2-muted)}
body.site-v2 footer .wm-text .sz{color:var(--accent)}
body.site-v2 footer .wm-text .v{color:var(--v2-ink)}

@media (prefers-reduced-motion:reduce){
  body.site-v2 .catcard,body.site-v2 .catcard .cp,body.site-v2 .step,body.site-v2 .step img,
  body.site-v2 .head-cta{transition:none}
  body.site-v2 .catcard:hover,body.site-v2 .step:hover,body.site-v2 .head-cta:hover,
  body.site-v2 .catcard.has-photo:hover .cp,body.site-v2 .step:hover img{transform:none}
}


/* ══════════════════════════════════════════════════════════════════════
   2026-09-19 全站 v2(內頁):user 提供八張內頁設計稿,「所有頁面設計都按照這些改版」。
   ‧ 共同語言:淺底、白色圓角卡、1px 細線、紅色小標、襯線標題;深色區塊與頁首背景照全部退場。
   ‧ 頁首背景照:_worker.js 在 SITE_V2 開啟時不再輸出 inline background-image(CSS 蓋不掉 inline)。
   ‧ 麵包屑列 .v2-crumb 由 _worker.js 的 siteHeader 在內頁輸出。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 麵包屑列 ── */
body.site-v2 .v2-crumb{background:var(--v2-white);border-bottom:1px solid var(--v2-line);font-size:13.5px}
body.site-v2 .v2-crumb .wrap{display:flex;align-items:center;gap:10px;padding-block:14px;min-width:0}
body.site-v2 .v2-crumb a{color:var(--v2-muted);text-decoration:none;white-space:nowrap}
body.site-v2 .v2-crumb a:hover{color:var(--accent)}
body.site-v2 .v2-crumb-sep{color:oklch(78% .01 250)}
body.site-v2 .v2-crumb-cur{color:var(--v2-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ── 六個內頁頁首 + 文章頁首:淺色漸層、小標 + 襯線大標 + 說明 ── */
body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero),
body.site-v2 .products-page .pgh,
body.site-v2 .post-page .pagehead{
  background:linear-gradient(180deg,var(--v2-mist-050) 0%,var(--v2-white) 100%);
  border-bottom:1px solid var(--v2-line);min-height:0}
body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero)::before,
body.site-v2 .products-page .pgh::before{background:none}
body.site-v2 :is(.ah-in,.oh-in,.fh-in,.bh-in,.ch-in,.pgh-in){padding-block:clamp(44px,5.4vw,72px) clamp(40px,4.6vw,60px);min-height:0}
body.site-v2 .about-hero .ah-in h1,
body.site-v2 .oem-hero .oh-in h1,
body.site-v2 .faq-hero .fh-in h1,
body.site-v2 .blog-hero .bh-in h1,
body.site-v2 .contact-hero .ch-in h1,
body.site-v2 .products-page .pgh h1,
body.site-v2 .post-page .pagehead h1{font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  text-shadow:none;font-size:clamp(2.2rem,1.35rem + 2.6vw,3.3rem);line-height:1.1;letter-spacing:-.01em;
  max-width:22ch;margin-top:0}
body.site-v2 .about-hero .ah-in .lede,
body.site-v2 .oem-hero .oh-in .lede,
body.site-v2 .faq-hero .fh-in .lede,
body.site-v2 .blog-hero .bh-in .lede,
body.site-v2 .contact-hero .ch-in .lede,
body.site-v2 .products-page .pgh .lede,
body.site-v2 .post-page .pagehead .lede{color:var(--v2-muted);font-weight:400;text-shadow:none;
  font-size:clamp(16px,.92rem + .3vw,18px);line-height:1.65;max-width:64ch;margin-top:var(--space-md)}
/* 頁首上方的紅色小標(純裝飾,跟麵包屑同義,所以用 CSS 產生、不進 HTML) */
body.site-v2 :is(.oh-in,.fh-in,.bh-in,.ch-in,.pgh-in)::before{display:block;margin-bottom:var(--space-sm);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
body.site-v2 .oh-in::before{content:"OEM / ODM"}
body.site-v2 .fh-in::before{content:"FAQ"}
body.site-v2 .bh-in::before{content:"Blog"}
body.site-v2 .ch-in::before{content:"Contact"}
body.site-v2 .pgh-in::before{content:"Products"}

/* ── FAQ:單欄收合卡 ── */
body.site-v2 .faqwall{background:var(--v2-white);padding-block:clamp(36px,4vw,56px) clamp(48px,5.4vw,80px)}
body.site-v2 .fw-head{font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem);letter-spacing:-.005em;margin-bottom:var(--space-lg)}
body.site-v2 .fw-grid{grid-template-columns:minmax(0,1fr);gap:12px;max-width:860px}
body.site-v2 .fw-i,
body.site-v2 .fw-i.fw-dark,
body.site-v2 .fw-i.fw-wide{display:block;grid-column:auto;background:var(--v2-white);
  border:1px solid var(--v2-line);border-radius:var(--v2-radius);padding:0;
  transition:border-color 160ms var(--v2-ease-out),box-shadow 160ms var(--v2-ease-out)}
body.site-v2 .fw-i:hover{border-color:oklch(84% .014 250);box-shadow:var(--v2-shadow-sm)}
body.site-v2 .fw-i .fw-q{display:none}
body.site-v2 .fw-i > summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  justify-content:space-between;gap:var(--space-md);padding:18px 22px}
body.site-v2 .fw-i > summary::-webkit-details-marker{display:none}
body.site-v2 .fw-i > summary::after{content:"+";flex:none;color:var(--accent);font-size:20px;line-height:1;font-weight:400}
body.site-v2 .fw-i[open] > summary::after{content:"–"}
body.site-v2 .fw-i h3,
body.site-v2 .fw-i.fw-dark h3{font-family:var(--font-text);font-weight:600;font-size:17px;line-height:1.35;
  color:var(--v2-ink);margin:0}
body.site-v2 .fw-i p,
body.site-v2 .fw-i.fw-dark p,
body.site-v2 .fw-i.fw-wide p{color:var(--v2-muted);font-size:16px;line-height:1.7;max-width:70ch;
  padding:0 22px 20px;margin:0}
/* 後台編輯時收合卡一律攤開,不然答案點不到 */
body.site-v2.editing .fw-i > summary{cursor:text}

/* ── 聯絡頁:白卡表單 + 淺色資訊卡 ── */
body.site-v2 .contactwrap{background:var(--v2-white);padding-block:clamp(36px,4vw,56px) clamp(48px,5.4vw,80px)}
body.site-v2 .contact-grid{gap:clamp(16px,2vw,28px)}
body.site-v2 .contact-grid > .panel.formcard{background:var(--v2-white);border:1px solid var(--v2-line);
  border-radius:var(--v2-radius-lg);padding:clamp(22px,2.6vw,34px);box-shadow:var(--v2-shadow-sm)}
body.site-v2 .formcard h2{font-size:clamp(1.5rem,1.2rem + .9vw,1.9rem);color:var(--v2-ink)}
body.site-v2 .formcard .formnote{color:var(--v2-muted);font-size:15px}
body.site-v2 .rfq label{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--v2-ink)}
body.site-v2 .rfq input[type=text],body.site-v2 .rfq input[type=email],body.site-v2 .rfq input[type=tel],
body.site-v2 .rfq select,body.site-v2 .rfq textarea{border:1px solid oklch(86% .01 250);border-radius:8px;
  background:var(--v2-white);font-size:16px;color:var(--v2-ink)}
body.site-v2 .rfq input:focus,body.site-v2 .rfq select:focus,body.site-v2 .rfq textarea:focus{
  border-color:var(--accent);outline:2px solid oklch(54.5% .172 29 / .22);outline-offset:0}
body.site-v2 .cta{border-radius:6px;transition:transform 160ms var(--v2-ease-out),background 160ms var(--v2-ease-out)}
body.site-v2 .cta:hover{transform:translateY(-1px)}
body.site-v2 .cta:active{transform:translateY(0) scale(.985)}
body.site-v2 .cside{gap:clamp(12px,1.4vw,18px)}
body.site-v2 .cside-info{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius-lg)}
body.site-v2 .cside-info h2{color:var(--v2-ink);font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem)}
body.site-v2 .cside-info p{color:var(--v2-muted);font-size:15.5px}
body.site-v2 .cside-info a{color:var(--accent);font-weight:600}
body.site-v2 .cside-info a:hover{color:var(--accent-deep)}
body.site-v2 .cside-reply{background:var(--v2-mist-100);border:1px solid var(--v2-line);
  border-radius:var(--v2-radius);min-height:0;padding:18px 22px}
body.site-v2 .cside-reply::before,body.site-v2 .cside-reply::after{display:none}
body.site-v2 .cside-reply p{color:var(--v2-ink);font-weight:600;font-size:15.5px;text-align:left}

/* ── Blog 列表:白色圓角卡 ── */
body.site-v2 .catbar{background:var(--v2-white);border-bottom:1px solid var(--v2-line)}
body.site-v2 .catbar a{color:var(--v2-muted)}
body.site-v2 .catbar a:hover,body.site-v2 .catbar a.on{color:var(--v2-ink)}
body.site-v2 .bloglist{background:var(--v2-white)}
body.site-v2 .postgrid{gap:clamp(14px,1.6vw,22px)}
body.site-v2 .pcard{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius);
  overflow:hidden;transition:transform 220ms var(--v2-ease-out),box-shadow 220ms var(--v2-ease-out)}
body.site-v2 .pcard:hover{transform:translateY(-4px);box-shadow:var(--v2-shadow-md)}
body.site-v2 .pcard .pc-img{border-radius:0;transition:transform 320ms var(--v2-ease-out)}
body.site-v2 .pcard:hover .pc-img{opacity:1;transform:scale(1.035)}
body.site-v2 .pc-body{position:relative;background:var(--v2-white)}
body.site-v2 .pc-cat{color:var(--accent);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
body.site-v2 .pc-date{color:var(--v2-muted)}
body.site-v2 .pcard h2{font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  font-size:clamp(1.35rem,1.1rem + .7vw,1.7rem);line-height:1.18}
body.site-v2 .pcard:hover h2{color:var(--accent)}
body.site-v2 .pcard p{color:var(--v2-muted);font-size:15.5px}
body.site-v2 .pc-go::after,
body.site-v2 .blog-page .pcard:hover .pc-go::after{background:transparent;color:var(--accent);justify-content:flex-start;font-size:17px}
body.site-v2 .blog-page .pcard:hover .pc-go::after{transform:translateX(4px)}

/* ── 文章頁 ── */
/* 麵包屑列 9/19 停用後,文章頁原本頁首內的小路徑(Notes › 標題)恢復顯示 */
body.site-v2 .post-page .pagehead .crumb{color:var(--v2-muted);margin-bottom:var(--space-sm)}
body.site-v2 .post-page .pagehead .crumb a{color:var(--accent)}
body.site-v2 .post-page .pagehead .model{font-family:var(--font-text);color:var(--v2-muted);font-size:14px;letter-spacing:0}
body.site-v2 .post-page .pagehead h1{max-width:22ch}
body.site-v2 .article-body{color:oklch(34% .02 250);font-size:17.5px}
body.site-v2 .article-body h2,body.site-v2 .article-body h3{font-family:var(--font-display);font-weight:500;color:var(--v2-ink)}
body.site-v2 .article-body h2{font-size:clamp(1.6rem,1.3rem + 1vw,2.05rem)}
body.site-v2 .article-body a{color:var(--accent)}
body.site-v2 .article-body figure img,body.site-v2 .article-body img{border-radius:var(--v2-radius)}
body.site-v2 .article-body table{border:1px solid var(--v2-line);border-radius:var(--v2-radius);overflow:hidden;border-collapse:separate;border-spacing:0}
body.site-v2 .article-body th{background:var(--v2-mist-100);color:var(--v2-ink);font-family:var(--font-text);font-weight:700;
  border-right-color:var(--v2-line);border-bottom:1px solid var(--v2-line)}
body.site-v2 .article-body td{border-right-color:var(--v2-line);border-bottom-color:var(--v2-line)}
body.site-v2 .morereads{border-top-color:var(--v2-line)}
body.site-v2 .morereads a{font-family:var(--font-display);font-weight:500;color:var(--v2-ink)}
body.site-v2 .backlink{color:var(--accent)}

/* ── About 頁 ── */
body.site-v2 .ah-in::before{content:"About";display:block;margin-bottom:var(--space-sm);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
body.site-v2 .about-hero .ah-certs span{color:var(--v2-ink);border-color:var(--v2-line);background:var(--v2-white);border-radius:999px}
body.site-v2 .about-page .story{background:var(--v2-white);border-bottom:1px solid var(--v2-line)}
body.site-v2 .about-page .story h2,
body.site-v2 .about-page .claim h2,
body.site-v2 .about-page .qm h2{font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  font-size:clamp(1.7rem,1.2rem + 1.6vw,2.3rem);line-height:1.14;letter-spacing:-.005em}
body.site-v2 .about-page .story-body p,
body.site-v2 .about-page .claim p,
body.site-v2 .about-page .qm p{color:var(--v2-muted);font-size:16px;line-height:1.7}
body.site-v2 .about-page .story-fig img{border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-md)}
body.site-v2 .about-page .story-fig figcaption{color:var(--v2-muted)}
/* 統計帶:深色條 → 三張淺色卡 */
body.site-v2 .statband{background:var(--v2-white);border-bottom:1px solid var(--v2-line);padding-block:clamp(28px,3.4vw,44px)}
body.site-v2 .statband-in{gap:clamp(10px,1.2vw,16px)}
body.site-v2 .statband .stat{background:var(--v2-mist-100);border:1px solid var(--v2-line);border-radius:var(--v2-radius);
  padding:clamp(18px,2vw,26px);border-left:1px solid var(--v2-line);text-align:left;align-items:flex-start}
body.site-v2 .statband .stat .sn{font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  font-size:clamp(2rem,1.5rem + 1.6vw,2.7rem);line-height:1}
body.site-v2 .statband .stat .st{color:var(--v2-muted);font-size:14.5px;letter-spacing:0;text-transform:none}
/* 四個主張格:上亮下暗 → 全部白卡 */
body.site-v2 .claims{background:var(--v2-surface);gap:clamp(12px,1.4vw,20px);
  padding:clamp(40px,5vw,72px) var(--v2-gut);border-bottom:1px solid var(--v2-line)}
body.site-v2 .claims .claim,
body.site-v2 .claims .claim.c-0,body.site-v2 .claims .claim.c-1,
body.site-v2 .claims .claim.c-2,body.site-v2 .claims .claim.c-3{background:var(--v2-white);
  border:1px solid var(--v2-line);border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-sm)}
body.site-v2 .claims .claim-in{padding:clamp(22px,2.6vw,36px);max-width:none;margin:0}
body.site-v2 .claims .claim .label{color:var(--accent)}
/* 品質 + 市場:右半深色地圖 → 兩張並排的淺色區 */
body.site-v2 .about-page .qm{background:var(--v2-white)}
body.site-v2 .qm-quality{background:var(--v2-white)}
body.site-v2 .qm-markets{background:var(--v2-mist-100);background-image:none}
body.site-v2 .qm .label{color:var(--accent)}
body.site-v2 .qm-markets h2,body.site-v2 .qm-markets p{color:var(--v2-ink)}
body.site-v2 .qm-markets p{color:var(--v2-muted)}
body.site-v2 .certs .cert{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius);
  color:var(--v2-ink);font-weight:600}
body.site-v2 .qm-markets :is(li,.mk,.market,span){color:var(--v2-ink)}

/* ── OEM 頁 ── */
body.site-v2 .oem-page .flow{background:var(--v2-white);border-bottom:1px solid var(--v2-line)}
body.site-v2 .oem-page :is(.flow-head,.markband h2,.duo h2,.oemqa h2){font-family:var(--font-display);font-weight:500;
  color:var(--v2-ink);font-size:clamp(1.7rem,1.2rem + 1.6vw,2.3rem);line-height:1.14}
body.site-v2 .flow-grid{grid-template-columns:minmax(0,1fr);gap:12px}
body.site-v2 .flow-i{display:grid;grid-template-columns:70px minmax(0,1fr);gap:2px var(--space-md);align-items:start;
  background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius);
  padding:clamp(18px,2vw,26px);border-top:1px solid var(--v2-line);
  transition:transform 200ms var(--v2-ease-out),box-shadow 200ms var(--v2-ease-out)}
body.site-v2 .flow-i:hover{transform:translateY(-3px);box-shadow:var(--v2-shadow-md)}
body.site-v2 .flow-i .fn{grid-row:1 / span 2;font-family:var(--font-display);font-weight:500;color:var(--accent);
  font-size:clamp(1.7rem,1.4rem + 1vw,2.2rem);line-height:1}
body.site-v2 .flow-i h3{font-family:var(--font-display);font-weight:500;font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);color:var(--v2-ink);margin:0}
body.site-v2 .flow-i p{color:var(--v2-muted);font-size:16px;line-height:1.65;max-width:none}
body.site-v2 .markband{background:var(--v2-surface);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(44px,5vw,72px) var(--v2-gut)}
body.site-v2 .markband .mb-img{border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-md);min-height:clamp(240px,26vw,360px)}
body.site-v2 .markband .mb-txt{background:transparent}
body.site-v2 .markband .mb-pad{padding:0}
body.site-v2 .markband .label,body.site-v2 .duo .label{color:var(--accent)}
body.site-v2 .markband p,body.site-v2 .duo p{color:var(--v2-muted);font-size:16px;line-height:1.7}
body.site-v2 .mb-tag{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:999px;color:var(--v2-ink);font-weight:600}
body.site-v2 .duo{background:var(--v2-surface);gap:clamp(12px,1.4vw,20px);padding:0 var(--v2-gut) clamp(44px,5vw,72px)}
body.site-v2 .duo .duo-i,
body.site-v2 .duo .duo-i.d-0,body.site-v2 .duo .duo-i.d-1{background:var(--v2-white);background-image:none;
  border:1px solid var(--v2-line);border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-sm)}
body.site-v2 .duo .duo-pad{padding:clamp(22px,2.6vw,36px)}
body.site-v2 .duo h2{color:var(--v2-ink)}
body.site-v2 .oemqa{background:var(--v2-white)}
body.site-v2 .oemqa .label{color:var(--accent)}
body.site-v2 .oemqa-list{gap:12px;display:grid}
body.site-v2 .oemqa-i{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius);
  padding:18px 22px;border-top:1px solid var(--v2-line)}
body.site-v2 .oemqa-i dt{font-family:var(--font-text);font-weight:600;font-size:17px;color:var(--v2-ink)}
body.site-v2 .oemqa-i dd{color:var(--v2-muted);font-size:16px;line-height:1.7;margin:8px 0 0}
/* 修正輪(2026-09-19):舊層留下的色塊與不對齊 */
body.site-v2 .flow-i .fn{background:none;width:auto;height:auto;display:block;padding:0;color:var(--accent)}
body.site-v2 .oemqa{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding:clamp(44px,5vw,72px) var(--v2-gut)}
body.site-v2 .oemqa-head{background:transparent}
body.site-v2 .oemqa-pad,body.site-v2 .oem-page .oemqa-list{padding:0}
body.site-v2 .oemqa-head h2{font-family:var(--font-display);font-weight:500;color:var(--v2-ink)}
body.site-v2 .oemqa-list{max-width:860px}
body.site-v2 .claims .claim{padding:0;min-height:0}
body.site-v2 .qm{gap:clamp(12px,1.4vw,20px);padding:clamp(40px,5vw,72px) var(--v2-gut);align-items:stretch}
body.site-v2 .qm-quality,body.site-v2 .qm-markets{border:1px solid var(--v2-line);border-radius:var(--v2-radius-lg)}
body.site-v2 .qm .qm-pad,body.site-v2 .qm-quality .qm-pad{padding:clamp(22px,2.6vw,36px)}
body.site-v2 .oem-page .flow-i .fn,body.site-v2 .oem-page .flow-i:first-child .fn{background:none;color:var(--accent);display:block;width:auto;height:auto}

/* ── 產品總覽 ── */
body.site-v2 .products-page .pgh h1{text-transform:none;letter-spacing:-.01em}
body.site-v2 .products-page .prodsec{background:var(--v2-white)}
body.site-v2 .prod-layout{gap:clamp(18px,2.4vw,32px)}
body.site-v2 .pnav{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius);overflow:hidden;padding:6px}
body.site-v2 .pnav .label{background:transparent;color:var(--accent);padding:12px 12px 8px;border:0}
body.site-v2 .pnav li + li{border-top:0}
body.site-v2 .pnav a{background:transparent;color:var(--v2-ink);border-left:0;border-radius:6px;padding:9px 12px;font-size:14.5px}
body.site-v2 .pnav a::after{display:none}
body.site-v2 .pnav a:hover{background:var(--v2-mist-100);color:var(--v2-ink)}
body.site-v2 .pnav a.on{background:oklch(96% .02 29);color:var(--accent);font-weight:600}
body.site-v2 .prodgrid{gap:clamp(12px,1.4vw,18px)}
body.site-v2 .pitem,
body.site-v2 .pd-others .pitem{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius);
  padding:0;overflow:hidden;
  transition:transform 220ms var(--v2-ease-out),box-shadow 220ms var(--v2-ease-out),border-color 220ms var(--v2-ease-out)}
body.site-v2 .pitem:hover{background:var(--v2-white);transform:translateY(-4px);box-shadow:var(--v2-shadow-md);border-color:oklch(86% .012 250)}
body.site-v2 .pitem-img,
body.site-v2 .pd-others .pitem-img{background:var(--v2-surface);margin:0 0 var(--space-sm);aspect-ratio:4/3;padding:10px;
  border-bottom:1px solid var(--v2-line)}
body.site-v2 .pitem-img img{transition:transform 300ms var(--v2-ease-out);mix-blend-mode:multiply}
body.site-v2 .pitem-name,
body.site-v2 .pd-others .pitem-name{font-family:var(--font-text);font-weight:600;font-size:15px;line-height:1.35;
  color:var(--v2-ink);text-transform:none;letter-spacing:0;padding-inline:14px}
body.site-v2 .pitem-spec,body.site-v2 .pd-others .pitem-spec{padding-inline:14px;color:var(--v2-muted)}
body.site-v2 .pitem-more{color:var(--accent);font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0;
  padding:var(--space-sm) 14px 14px}
body.site-v2 .pd-others .pitem > :last-child{padding-bottom:14px}

/* ── 產品詳細頁 ── */
body.site-v2 .pdh{background:linear-gradient(180deg,var(--v2-mist-050) 0%,var(--v2-white) 100%);
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;
  padding:clamp(36px,4.4vw,60px) var(--v2-gut) clamp(28px,3vw,40px);border:0}
body.site-v2 .pdh-info{order:1;background:none;border:0;display:block}
body.site-v2 .pdh-img{order:2;background:var(--v2-white);background-image:none;border:1px solid var(--v2-line);
  border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-md);overflow:hidden;min-height:0;aspect-ratio:4/3}
body.site-v2 .pdh-info::before,body.site-v2 .pdh-img::before,body.site-v2 .pdh-info::after{display:none}
body.site-v2 .pdh-pad{padding:0}
body.site-v2 .pdh .pdh-series{color:var(--accent)}
body.site-v2 .pdh h1{font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  font-size:clamp(2.1rem,1.3rem + 2.4vw,3.1rem);line-height:1.1;letter-spacing:-.01em}
body.site-v2 .pdh .lede{color:var(--v2-muted);font-size:clamp(16px,.92rem + .25vw,17.5px);line-height:1.65;max-width:56ch}
body.site-v2 .pdh-sheets-lab{color:var(--v2-ink)}
body.site-v2 .pdh-sheets-row a{border:1px solid var(--v2-line);border-radius:6px;background:var(--v2-white);color:var(--accent);font-weight:600;
  transition:transform 160ms var(--v2-ease-out),border-color 160ms var(--v2-ease-out)}
body.site-v2 .pdh-sheets-row a:hover{transform:translateY(-1px);border-color:var(--accent);background:var(--v2-white);color:var(--accent)}
body.site-v2 .pdh-dots span{background:oklch(82% .01 250)}
/* 規格帶:深色長條 → 一排淺色小卡 */
body.site-v2 .pdband{background:var(--v2-white);border-bottom:1px solid var(--v2-line);padding:0 var(--v2-gut) clamp(28px,3vw,40px)}
body.site-v2 .pdband-in{max-width:none;padding:0;gap:clamp(8px,1vw,12px)}
body.site-v2 .pdb-i,body.site-v2 .pdb-i:first-child{background:var(--v2-mist-100);border:1px solid var(--v2-line);border-radius:var(--v2-radius);
  padding:14px 16px;flex:1 1 150px}
body.site-v2 .pdb-k{color:var(--accent);font-weight:700;letter-spacing:.12em}
body.site-v2 .pdb-v{color:var(--v2-ink);font-size:15.5px}
/* 內文區 */
body.site-v2 .pd-page .pdsec{background:var(--v2-white);border-bottom:1px solid var(--v2-line)}
body.site-v2 .pd-page .pdsec.pdsec-grey{background:var(--v2-surface)}
body.site-v2 .pd-page .pdsec .label,body.site-v2 .pd-page .pdsec-lab{color:var(--accent)}
body.site-v2 .pd-page :is(.pdsec h2,.pdqa h2,.pd-others h2){font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  font-size:clamp(1.8rem,1.25rem + 1.7vw,2.5rem);line-height:1.12;letter-spacing:-.005em}
body.site-v2 .pdsec-body p{color:var(--v2-muted);font-size:16px;line-height:1.72;max-width:66ch}
body.site-v2 .pdsec-body .pd-q{font-family:var(--font-display);font-weight:500;font-size:1.45rem;color:var(--v2-ink)}
body.site-v2 .pdfeats{grid-template-columns:minmax(0,1fr);gap:0;background:var(--v2-mist-100);border:1px solid var(--v2-line);
  border-radius:var(--v2-radius-lg);padding:clamp(16px,1.8vw,24px);margin-top:var(--space-lg)}
body.site-v2 .pdf-i{display:flex;gap:12px;align-items:baseline;padding:10px 0;border:0;color:var(--v2-ink);font-size:15.5px;font-weight:600}
body.site-v2 .pdf-i + .pdf-i{border-top:1px solid var(--v2-line)}
body.site-v2 .pdf-i::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent);transform:translateY(-1px)}
/* 規格表:白色圓角卡 */
body.site-v2 .pdtable{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius-lg);
  overflow:hidden;box-shadow:var(--v2-shadow-sm);margin-top:var(--space-md)}
body.site-v2 .pdtr,body.site-v2 .pdtr:first-child{border-top:0;border-bottom:1px solid var(--v2-line)}
body.site-v2 .pdtr:last-child{border-bottom:0}
body.site-v2 .pdtr dt,body.site-v2 .pdtr dd{padding:13px 18px;font-size:15px}
body.site-v2 .pdtr dt{background:var(--v2-mist-100);color:var(--v2-ink);font-weight:600;border-right:1px solid var(--v2-line)}
body.site-v2 .pdtr dd{color:var(--v2-muted)}
body.site-v2 .pdtable.multi .pdhead dd{padding:16px 18px}
body.site-v2 .pdtable.multi .pdhead dt{background:var(--v2-mist-100);padding:0}
body.site-v2 .pdtable.multi .spec-name{font-family:var(--font-display);font-weight:500;font-size:1.25rem;letter-spacing:0;color:var(--v2-ink)}
body.site-v2 .pdtable.multi .spec-pdf{color:var(--accent)}
/* 應用:白卡 */
body.site-v2 .pdapps{gap:clamp(10px,1.2vw,14px)}
body.site-v2 .pda-i{background:var(--v2-white);border:1px solid var(--v2-line);border-left:1px solid var(--v2-line);
  border-radius:var(--v2-radius);color:var(--v2-ink);font-size:15.5px;
  transition:transform 200ms var(--v2-ease-out),box-shadow 200ms var(--v2-ease-out)}
body.site-v2 .pda-i:hover{transform:translateY(-3px);box-shadow:var(--v2-shadow-sm)}
/* 客製 + FAQ:深色區 → 淺底 */
body.site-v2 .pdqa{background:var(--v2-surface);border-bottom:1px solid var(--v2-line)}
body.site-v2 .pdqa h2{color:var(--v2-ink)}
body.site-v2 .pdqa p{color:var(--v2-muted);font-size:16px}
body.site-v2 .pdcust{gap:10px}
body.site-v2 .pdc-i{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius);color:var(--v2-ink);
  padding:14px 18px;font-size:15.5px;transition:transform 160ms var(--v2-ease-out),border-color 160ms var(--v2-ease-out)}
body.site-v2 .pdc-i:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}
body.site-v2 .pdfaq{border-top:0;display:grid;gap:10px;max-width:860px;margin-top:var(--space-lg)}
body.site-v2 .pdfaq .qa{background:var(--v2-white);border:1px solid var(--v2-line);border-radius:var(--v2-radius);border-bottom:1px solid var(--v2-line)}
body.site-v2 .pdfaq .qa summary{font-size:16.5px;font-weight:600;color:var(--v2-ink);padding:16px 20px}
body.site-v2 .pdfaq .qa summary::after,body.site-v2 .pdfaq .qa summary::before{color:var(--accent);background-color:var(--accent)}
body.site-v2 .pdfaq .qa p{font-size:16px;line-height:1.7;color:var(--v2-muted);padding:0 20px 18px}
body.site-v2 .pd-others{background:var(--v2-white);border-top:0}
body.site-v2 .tile-link{color:var(--accent)}
@media (max-width:900px){
  body.site-v2 .pdh{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .pdh-img{order:1}
  body.site-v2 .pdh-info{order:2}
}

/* ══════════════════════════════════════════════════════════════════════
   2026-09-19 下午 全站 v2 第二輪:user 再給六張內頁設計稿(Blog／聯絡／FAQ／產品總覽／About／OEM),
   「每個頁面的設計跟圖片按照他這樣做」。
   ‧ 內頁頁首:右側一張照片、左側白色漸層淡出、文字在左。照片走 --bgimg(_worker.js heroBgStyle),後台可換。
   ‧ 列表類從「白卡」改成「細線分隔」:FAQ、OEM 問答、OEM 流程、Blog 列表、About 統計與認證。
   ‧ 寫在最後 = 蓋掉上一輪同名規則;回退這一輪只要刪這段。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 內頁頁首:右側照片 ── */
body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero),
body.site-v2 .products-page .pgh{position:relative;overflow:hidden;background:var(--v2-white);
  min-height:clamp(280px,26vw,400px);display:flex;align-items:center}
body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero)::after,
body.site-v2 .products-page .pgh::after{content:"";position:absolute;top:0;bottom:0;right:0;width:min(62%,1000px);z-index:0;
  background:var(--bgimg, none) right center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0 / .55) 26%,#000 52%);
          mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0 / .55) 26%,#000 52%)}
body.site-v2 :is(.ah-in,.oh-in,.fh-in,.bh-in,.ch-in,.pgh-in){position:relative;z-index:1;width:100%}
body.site-v2 :is(.ah-in,.oh-in,.fh-in,.bh-in,.ch-in,.pgh-in) > :is(h1,.lede,.label,.ah-certs){max-width:min(100%,520px)}
body.site-v2 .about-hero .ah-in h1,body.site-v2 .oem-hero .oh-in h1,body.site-v2 .faq-hero .fh-in h1,
body.site-v2 .blog-hero .bh-in h1,body.site-v2 .contact-hero .ch-in h1,body.site-v2 .products-page .pgh h1{max-width:min(100%,540px)}
body.site-v2 .about-hero .ah-in .lede,body.site-v2 .oem-hero .oh-in .lede,body.site-v2 .faq-hero .fh-in .lede,
body.site-v2 .blog-hero .bh-in .lede,body.site-v2 .contact-hero .ch-in .lede,body.site-v2 .products-page .pgh .lede{
  max-width:min(100%,500px);color:oklch(36% .022 250)}
@media (max-width:820px){
  body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero)::after,
  body.site-v2 .products-page .pgh::after{width:100%;opacity:.26;
    -webkit-mask-image:linear-gradient(90deg,rgb(0 0 0 / .3) 0%,#000 100%);mask-image:linear-gradient(90deg,rgb(0 0 0 / .3) 0%,#000 100%)}
  body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero),
  body.site-v2 .products-page .pgh{min-height:0}
}

/* ── FAQ 頁 + OEM 問答:白卡 → 細線列 ── */
body.site-v2 .fw-grid{gap:0;border-top:1px solid var(--v2-line)}
body.site-v2 .fw-i,body.site-v2 .fw-i.fw-dark,body.site-v2 .fw-i.fw-wide{border:0;border-bottom:1px solid var(--v2-line);border-radius:0;background:transparent}
body.site-v2 .fw-i:hover{box-shadow:none;border-color:var(--v2-line)}
body.site-v2 .fw-i > summary{padding:20px 4px;transition:color 160ms var(--v2-ease-out)}
body.site-v2 .fw-i > summary:hover h3{color:var(--accent)}
body.site-v2 .fw-i p,body.site-v2 .fw-i.fw-dark p,body.site-v2 .fw-i.fw-wide p{padding:0 4px 22px}
body.site-v2 .oemqa-list{gap:0;border-top:1px solid var(--v2-line)}
body.site-v2 .oemqa-i{border:0;border-bottom:1px solid var(--v2-line);border-radius:0;padding:20px 4px}

/* ── Blog 列表:單欄細線列、不放封面圖 ── */
body.site-v2 .postgrid{grid-template-columns:minmax(0,1fr);gap:0;max-width:800px;border-top:1px solid var(--v2-line)}
body.site-v2 .pcard{border:0;border-bottom:1px solid var(--v2-line);border-radius:0;background:transparent;overflow:visible}
body.site-v2 .pcard:hover{transform:none;box-shadow:none}
body.site-v2 .pcard .pc-img{display:none}
body.site-v2 .pc-body{padding:clamp(26px,3vw,38px) 0;background:transparent}
body.site-v2 .pcard h2{font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem);transition:color 160ms var(--v2-ease-out)}
body.site-v2 .pcard p{font-size:16px;line-height:1.65;max-width:70ch}
body.site-v2 .pc-go{width:auto;height:auto;padding-top:var(--space-md);min-height:24px}
body.site-v2 .pc-go::after,
body.site-v2 .blog-page .pcard:hover .pc-go::after{content:"Read article →";position:static;width:auto;height:auto;
  font-family:var(--font-text);font-size:14.5px;font-weight:600;color:var(--accent);background:transparent}
body.site-v2 .pc-date{font-size:14px}

/* ── 聯絡頁:上方三欄資訊、下方表單 ── */
body.site-v2 .contact-grid{grid-template-columns:minmax(0,1fr);gap:clamp(28px,3.4vw,44px)}
body.site-v2 .contact-grid > .cside{order:-1}
body.site-v2 .cside-info{border:0;border-radius:0;padding:0;background:transparent;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;grid-auto-flow:column;
  gap:6px clamp(20px,3vw,48px);align-items:start}
body.site-v2 .cside-info h2{font-family:var(--font-text);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0}
body.site-v2 .cside-info .label{margin:0}
body.site-v2 .cside-info p{font-size:16px;line-height:1.75}
body.site-v2 .cside-reply{background:transparent;border:0;border-top:1px solid var(--v2-line);border-radius:0;
  padding:16px 0 0;max-width:640px}
body.site-v2 .cside-reply p{font-weight:400;color:var(--v2-muted);font-size:15.5px}
body.site-v2 .contact-grid > .panel.formcard{max-width:640px;border:0;border-top:1px solid var(--v2-line);border-radius:0;
  box-shadow:none;padding:clamp(24px,3vw,36px) 0 0}
@media (max-width:760px){
  body.site-v2 .cside-info{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;grid-template-rows:none}
  body.site-v2 .cside-info h2,body.site-v2 .cside-info .label{margin-top:var(--space-md)}
}

/* ── OEM:流程與能力區從卡片改成細線列 ── */
body.site-v2 .flow-grid{gap:0}
body.site-v2 .flow-i{border:0;border-radius:0;border-bottom:1px solid var(--v2-line);padding:clamp(24px,3vw,36px) 0;background:transparent}
body.site-v2 .flow-i:last-child{border-bottom:0}
body.site-v2 .flow-i:hover{transform:none;box-shadow:none}
body.site-v2 .oem-page .flow-i .fn,body.site-v2 .oem-page .flow-i:first-child .fn{color:var(--v2-ink)}
body.site-v2 .duo .duo-i,body.site-v2 .duo .duo-i.d-0,body.site-v2 .duo .duo-i.d-1{background:transparent;border:0;border-top:1px solid var(--v2-line);
  border-radius:0;box-shadow:none}
body.site-v2 .duo .duo-pad{padding:clamp(22px,2.6vw,32px) 0 0}
body.site-v2 .duo{gap:clamp(24px,4vw,56px)}

/* ── About:統計與認證改細線 ── */
body.site-v2 .statband .stat{background:transparent;border:0;border-top:1px solid var(--v2-line);border-radius:0;padding:18px 0 0}
body.site-v2 .certs .cert{background:transparent;border:0;border-top:1px solid var(--v2-line);border-radius:0;padding:12px 18px 0 0}
body.site-v2 .pc-go{align-self:flex-start;justify-content:flex-start}
body.site-v2 .cside-reply p{text-align:left}
body.site-v2 .contact-page .cside .cside-reply,body.site-v2 .contact-page .cside .cside-reply p{text-align:left;justify-content:flex-start}

/* ── 2026-09-19 傍晚:user 提供六張 2000×800 的頁首原圖(左側留白、主體在右的滿版構圖)。
      照片從「只佔右側 62%」改成鋪滿整個頁首;左側再疊一層白色漸層保護文字(聯絡頁那張左下有電話機)。 ── */
body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero),
body.site-v2 .products-page .pgh{min-height:clamp(300px,29vw,460px)}
body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero)::after,
body.site-v2 .products-page .pgh::after{width:100%;
  background:linear-gradient(90deg,oklch(100% 0 0 / .95) 0%,oklch(100% 0 0 / .92) 36%,oklch(100% 0 0 / .62) 52%,oklch(100% 0 0 / 0) 72%),
    var(--bgimg, none) right center / cover no-repeat;
  -webkit-mask-image:none;mask-image:none}
@media (max-width:820px){
  body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero)::after,
  body.site-v2 .products-page .pgh::after{opacity:1;-webkit-mask-image:none;mask-image:none;
    background:linear-gradient(90deg,oklch(100% 0 0 / .92) 0%,oklch(100% 0 0 / .80) 60%,oklch(100% 0 0 / .55) 100%),
      var(--bgimg, none) 78% center / cover no-repeat}
}

/* ── 2026-09-19 傍晚:首頁大標靠左(user 指示「不要置中;內頁頁首文字也是靠左」)。
      原本 margin-left 最多推 250px 是照第一張設計稿;現在跟內頁一樣貼齊版心左緣。
      同時換上 2400×864 的新首頁大圖,左側白霧加長,文字才不會壓到機櫃。 ── */
body.site-v2 .pitch.full .pitch-copy{margin-left:0;text-align:left;max-width:min(560px,100%)}
body.site-v2 .pitch[data-tone="light"] .pitch-bg::after,
body.site-v2 .pitch .pitch-bg::after{background:linear-gradient(90deg,
  oklch(100% 0 0 / .94) 0%,oklch(100% 0 0 / .88) 34%,oklch(100% 0 0 / .50) 52%,oklch(100% 0 0 / 0) 74%)}
body.site-v2 .pitch[data-tone="dark"] .pitch-bg::after{background:linear-gradient(90deg,
  oklch(18% .02 250 / .82) 0%,oklch(18% .02 250 / .62) 50%,oklch(18% .02 250 / .30) 100%)}
@media (max-width:820px){
  body.site-v2 .pitch[data-tone="light"] .pitch-bg::after{background:linear-gradient(90deg,
    oklch(100% 0 0 / .92) 0%,oklch(100% 0 0 / .82) 60%,oklch(100% 0 0 / .62) 100%)}
}

/* ══ 2026-09-19 晚:Blog 列表雜誌版(user README 指示:「單欄純文字太窄太空」→ 精選大圖 + 三欄卡、寬度拉滿) ══
   ‧ 第一張卡 = 精選:左大圖 55%、右文字;其餘 = 三欄,上圖 4:3。不用圓角陰影卡,靠留白與細線。
   ‧ 「More from the plant」小標是精選卡底下的 ::after(純分隔用,文章頁本來就有同一句)。
   ‧ 蓋掉本檔稍早「單欄細線列、不放封面圖」那一段。 */
body.site-v2 .catbar{border-bottom:0}
body.site-v2 .catbar-in{gap:8px;padding-block:clamp(20px,2.4vw,30px) 0;border-bottom:0}
body.site-v2 .catbar a,body.site-v2 .catbar a.on{border:1px solid var(--v2-line);border-radius:999px;padding:7px 16px;
  font-size:14px;font-weight:500;color:var(--v2-ink);background:var(--v2-white);
  transition:background 160ms var(--v2-ease-out),color 160ms var(--v2-ease-out),border-color 160ms var(--v2-ease-out)}
body.site-v2 .catbar a:hover{border-color:var(--v2-ink);color:var(--v2-ink)}
body.site-v2 .catbar a.on{background:var(--v2-ink);border-color:var(--v2-ink);color:var(--v2-white);font-weight:600}
body.site-v2 .bloglist{padding-block:clamp(28px,3.4vw,44px) clamp(56px,6vw,88px)}
body.site-v2 .postgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(36px,4vw,52px) clamp(20px,2.4vw,32px);
  max-width:none;border-top:1px solid var(--v2-line);padding-top:clamp(28px,3.4vw,44px)}
body.site-v2 .pcard{border:0;border-radius:0;background:transparent;overflow:visible;display:flex;flex-direction:column}
body.site-v2 .pcard .pc-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;
  transition:transform 420ms var(--v2-ease-out)}
/* 圖放大時不能溢出:用 clip-path 裁在原框內(卡片本身不能 overflow:hidden,精選卡的 ::after 要露出來) */
body.site-v2 .pcard .pc-img{clip-path:inset(0)}
body.site-v2 .pcard:hover .pc-img{transform:scale(1.03);opacity:1}
body.site-v2 .pc-body{padding:var(--space-md) 0 0;background:transparent;flex:1}
body.site-v2 .pcard h2{font-size:clamp(1.3rem,1.1rem + .7vw,1.6rem);line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
body.site-v2 .pcard p{font-size:15.5px;line-height:1.6;max-width:none;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* 精選 */
body.site-v2 .postgrid > .pcard:first-child{grid-column:1 / -1;display:grid;
  grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:0 clamp(24px,3.4vw,44px);align-items:center}
body.site-v2 .postgrid > .pcard:first-child .pc-img{aspect-ratio:16/10}
body.site-v2 .postgrid > .pcard:first-child .pc-body{padding:0}
body.site-v2 .postgrid > .pcard:first-child h2{font-size:clamp(1.8rem,1.3rem + 1.7vw,2.5rem);line-height:1.12;-webkit-line-clamp:4}
body.site-v2 .postgrid > .pcard:first-child p{font-size:16.5px;-webkit-line-clamp:4}
body.site-v2 .postgrid > .pcard:first-child:not(:only-child)::after{content:"More from the plant";grid-column:1 / -1;
  margin-top:clamp(36px,4vw,52px);padding-top:clamp(28px,3.2vw,40px);border-top:1px solid var(--v2-line);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--v2-muted)}
body.site-v2 .postgrid > .pcard:first-child + .pcard,
body.site-v2 .postgrid > .pcard:first-child + .pcard + .pcard,
body.site-v2 .postgrid > .pcard:first-child + .pcard + .pcard + .pcard{margin-top:calc(clamp(36px,4vw,52px) * -1 + 18px)}
@media (max-width:900px){
  body.site-v2 .postgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.site-v2 .postgrid > .pcard:first-child{grid-template-columns:minmax(0,1fr);gap:var(--space-md) 0}
  body.site-v2 .postgrid > .pcard:first-child .pc-body{padding-top:0}
}
@media (max-width:560px){
  body.site-v2 .postgrid{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .catbar-in{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  body.site-v2 .catbar a{white-space:nowrap;flex:none}
}
@media (prefers-reduced-motion:reduce){
  body.site-v2 .pcard .pc-img{transition:none}
  body.site-v2 .pcard:hover .pc-img{transform:none}
}
/* .pc-go 裡原本那個透明的「→」字會把後面的 Read article 往右頂一格 → 字級歸零 */
body.site-v2 .pc-go{font-size:0;gap:0}
/* 精選卡下方那一排的「往上收」只該作用在緊接精選卡的那一列:兩欄時第 4 張、單欄時第 3、4 張要還原 */
@media (max-width:900px){ body.site-v2 .postgrid > .pcard:first-child + .pcard + .pcard + .pcard{margin-top:0} }
@media (max-width:560px){ body.site-v2 .postgrid > .pcard:first-child + .pcard + .pcard{margin-top:0} }

/* ══ 2026-09-19 晚:FAQ 雙欄版(user README:「單欄 accordion 過窄,桌機右半大片空白」) ══
   DOM 順序是「問答在前、側欄在後」(手機要問答先出現);桌機用 grid 把側欄擺到左邊並 sticky。 */
body.site-v2 .fq2-in{display:grid;grid-template-columns:minmax(0,34fr) minmax(0,66fr);
  gap:0 clamp(32px,4.6vw,64px);align-items:start}
body.site-v2 .fq2-main{grid-column:2;grid-row:1;min-width:0}
body.site-v2 .fq2-side{grid-column:1;grid-row:1;position:sticky;top:var(--space-lg)}
body.site-v2 .fq2 .fw-head{font-size:clamp(1.7rem,1.3rem + 1.3vw,2.2rem);margin-bottom:var(--space-md)}
body.site-v2 .fq2 .fw-grid{max-width:none;border-top:0;gap:0;counter-reset:fq}
body.site-v2 .fq2-group + .fq2-group{margin-top:clamp(28px,3.4vw,44px)}
body.site-v2 .fq2-glabel{font-family:var(--font-text);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--v2-muted);padding-bottom:14px;border-bottom:1px solid var(--v2-line);margin:0}
body.site-v2 .fq2 .fw-i{counter-increment:fq}
body.site-v2 .fq2 .fw-i > summary{padding:20px 2px;gap:var(--space-md);align-items:center}
body.site-v2 .fq2 .fw-i > summary::before{content:counter(fq,decimal-leading-zero);flex:none;width:30px;
  font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--v2-muted)}
body.site-v2 .fq2 .fw-i h3{flex:1;font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.25rem,1.1rem + .55vw,1.5rem);line-height:1.25;letter-spacing:-.005em}
body.site-v2 .fq2 .fw-i > summary::after{content:"+";width:30px;height:30px;border-radius:50%;
  border:1px solid var(--v2-line);display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;color:var(--accent);background:var(--v2-white);
  transition:background 160ms var(--v2-ease-out),color 160ms var(--v2-ease-out),border-color 160ms var(--v2-ease-out)}
body.site-v2 .fq2 .fw-i > summary:hover::after{border-color:var(--v2-ink)}
body.site-v2 .fq2 .fw-i[open] > summary::after{content:"–";background:var(--v2-ink);border-color:var(--v2-ink);color:var(--v2-white)}
body.site-v2 .fq2 .fw-i p{padding:0 46px 24px 48px;max-width:68ch;font-size:16.5px}
/* 側欄 */
body.site-v2 .fq2-stitle{font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  font-size:clamp(1.6rem,1.25rem + 1.1vw,2rem);line-height:1.15}
body.site-v2 .fq2-sbody{color:var(--v2-muted);font-size:16px;line-height:1.65;margin-top:var(--space-sm)}
body.site-v2 .fq2-card{margin-top:var(--space-lg);border:1px solid var(--v2-line);background:var(--v2-white)}
body.site-v2 .fq2-card img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
body.site-v2 .fq2-cardtxt{padding:18px 18px 20px}
body.site-v2 .fq2-cardtxt h3{font-family:var(--font-text);font-weight:700;font-size:16px;color:var(--v2-ink)}
body.site-v2 .fq2-cardtxt p{color:var(--v2-muted);font-size:14.5px;line-height:1.55;margin-top:6px}
body.site-v2 .fq2-cardtxt .cta{margin-top:var(--space-sm);padding:10px 16px;font-size:14px;display:inline-flex}
@media (max-width:900px){
  body.site-v2 .fq2-in{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .fq2-main,body.site-v2 .fq2-side{grid-column:1;grid-row:auto;position:static}
  body.site-v2 .fq2-side{margin-top:clamp(40px,8vw,56px);padding-top:clamp(32px,6vw,44px);border-top:1px solid var(--v2-line)}
  body.site-v2 .fq2-card{display:grid;grid-template-columns:minmax(0,120px) minmax(0,1fr);align-items:center}
  body.site-v2 .fq2-card img{aspect-ratio:1/1;height:100%}
  body.site-v2 .fq2 .fw-i p{padding:0 8px 22px 46px}
}

/* ══ 2026-09-19 夜:About v2(user README)+ 全站頁首標語貼左 ══ */
/* 頁首標語貼左(README 標「必做」,第二次要求):文字不再跟著 1120 內容欄置中,改貼視窗左緣 max(16px,2vw)。
   六個內頁頁首與首頁大標區一起改。⚠️ 寬螢幕上標語會比 logo／下方內容更靠左 —— 這是 user 指定的。 */
body.site-v2 .wrap:is(.ah-in,.oh-in,.fh-in,.bh-in,.ch-in,.pgh-in),
body.site-v2 .pitch.full .wrap.pitch-in{max-width:none;margin-inline:0;padding-left:max(16px,2vw);padding-right:var(--v2-pad)}

/* 沿革:左文右圖,圖不加陰影 */
body.site-v2 .about-page .story-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
body.site-v2 .about-page .story-fig img{border-radius:0;box-shadow:none}

/* 數據帶:淺底三欄、欄間細豎線、紅字小標 + 超大襯線數字 */
body.site-v2 .statband{background:linear-gradient(180deg,var(--v2-mist-050) 0%,var(--v2-white) 100%);
  border-top:1px solid var(--v2-line);border-bottom:1px solid var(--v2-line);padding-block:clamp(36px,4.4vw,60px)}
body.site-v2 .statband-in{gap:0}
body.site-v2 .statband .stat{border:0;border-radius:0;background:transparent;padding:0 clamp(18px,2.4vw,32px);
  border-left:1px solid var(--v2-line);display:block;text-align:left}
body.site-v2 .statband .stat:first-child{border-left:0}
body.site-v2 .statband .stat .sk{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
body.site-v2 .statband .stat .sn{display:block;font-family:var(--font-display);font-weight:500;color:var(--v2-ink);
  font-size:clamp(3rem,2rem + 3.4vw,4.6rem);line-height:1;letter-spacing:-.02em;margin-top:10px}
body.site-v2 .statband .stat .sn .plus{color:var(--accent);font-size:.62em;vertical-align:.32em;margin-left:.06em}
body.site-v2 .statband .stat .st{display:block;color:var(--v2-muted);font-size:15px;margin-top:12px}

/* 主張 2×2:一個外框 + 內部十字細線,不用陰影卡 */
body.site-v2 .claims{background:var(--v2-white);gap:0;border-bottom:1px solid var(--v2-line);
  padding:clamp(48px,5.5vw,80px) var(--v2-gut)}
body.site-v2 .claims .claim,
body.site-v2 .claims .claim.c-0,body.site-v2 .claims .claim.c-1,
body.site-v2 .claims .claim.c-2,body.site-v2 .claims .claim.c-3{background:var(--v2-white);border-radius:0;box-shadow:none;
  border:1px solid var(--v2-line);margin:0 -1px -1px 0}
body.site-v2 .claims .claim-in{padding:clamp(22px,2.8vw,38px)}
body.site-v2 .claims .claim-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:var(--space-md)}
body.site-v2 .about-page .claim h2{font-size:clamp(1.4rem,1.15rem + .9vw,1.8rem);line-height:1.18}

/* 底部:左 品質與認證 / 右 出貨市場,中間一條豎線 */
body.site-v2 .qm{gap:0;padding:0 var(--v2-gut);align-items:stretch;background:var(--v2-white)}
body.site-v2 .qm-quality,body.site-v2 .qm-markets{border:0;border-radius:0;background:var(--v2-white)}
body.site-v2 .qm-markets{border-left:1px solid var(--v2-line)}
body.site-v2 .qm .qm-pad,body.site-v2 .qm-quality .qm-pad{padding:clamp(40px,5vw,64px) clamp(24px,3vw,40px) clamp(40px,5vw,64px) 0}
body.site-v2 .qm-markets .qm-pad{padding-left:clamp(24px,3vw,40px);padding-right:0}
body.site-v2 .qm .label{color:var(--v2-muted)}
body.site-v2 .certs .cert{border:1px solid var(--v2-line);border-radius:4px;padding:6px 12px;background:var(--v2-white);
  font-size:12px;letter-spacing:.08em}
body.site-v2 .mk-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--space-md)}
body.site-v2 .mk-chip{background:var(--v2-mist-100);border-radius:4px;padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--v2-ink)}
@media (max-width:820px){
  body.site-v2 .about-page .story-grid{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .statband-in{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .statband .stat{border-left:0;border-top:1px solid var(--v2-line);padding:22px 0 0;margin-top:22px}
  body.site-v2 .statband .stat:first-child{border-top:0;padding-top:0;margin-top:0}
  body.site-v2 .claims{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .qm{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .qm-markets{border-left:0;border-top:1px solid var(--v2-line)}
  body.site-v2 .qm-markets .qm-pad{padding-left:0}
}

/* ══ 2026-09-19 夜:OEM v2(user README:大數字垂直步驟列 + 全幅打標區 + 組裝大圖 + 材料雙欄 + FAQ;不要四格平鋪) ══ */
/* 流程:每步一橫列 = [大數字][標題+內文][配圖];偶數列淡底。「Step」小字是 CSS 產生的裝飾。 */
body.site-v2 .oem-page .flow{padding-block:clamp(48px,5.5vw,80px)}
body.site-v2 .oem-page .flow-head{max-width:12ch;padding-bottom:clamp(28px,3.4vw,44px);border-bottom:1px solid var(--v2-line);margin-bottom:0}
body.site-v2 .flow-grid{display:block}
body.site-v2 .flow-i{display:grid;grid-template-columns:clamp(72px,9vw,120px) minmax(0,1fr) minmax(0,39%);
  grid-template-rows:auto auto;gap:6px clamp(20px,3vw,44px);align-items:center;align-content:center;
  padding:clamp(24px,3vw,36px) 0;border:0;border-bottom:1px solid var(--v2-line);border-radius:0;background:transparent}
body.site-v2 .flow-i:last-child{border-bottom:1px solid var(--v2-line)}
body.site-v2 .flow-i:nth-child(even){background:linear-gradient(90deg,var(--v2-mist-100) 0%,var(--v2-white) 62%)}
body.site-v2 .oem-page .flow-i .fn,body.site-v2 .oem-page .flow-i:first-child .fn{grid-column:1;grid-row:1 / span 2;align-self:center;
  font-family:var(--font-display);font-weight:500;color:var(--v2-ink);font-size:clamp(2.8rem,2rem + 2.6vw,4rem);line-height:1;letter-spacing:-.02em}
body.site-v2 .oem-page .flow-i .fn::before{content:"Step";display:block;font-family:var(--font-text);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
body.site-v2 .flow-i h3{grid-column:2;grid-row:1;align-self:end;font-size:clamp(1.35rem,1.15rem + .7vw,1.7rem)}
body.site-v2 .flow-i p{grid-column:2;grid-row:2;align-self:start;max-width:52ch}
body.site-v2 .flow-i .flow-img{grid-column:3;grid-row:1 / span 2;display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  clip-path:inset(0);transition:transform 420ms var(--v2-ease-out)}
body.site-v2 .flow-i:hover .flow-img{transform:scale(1.03)}
body.site-v2 .flow-i:nth-child(even){padding-left:clamp(12px,1.6vw,24px)}

/* 打標區:整條全幅照片,左側白霧壓字 */
body.site-v2 .markband{position:relative;display:block;padding:0;background:var(--v2-white);overflow:hidden;
  min-height:clamp(340px,33vw,520px)}
body.site-v2 .markband .mb-img{position:absolute;inset:0;min-height:0;border-radius:0;box-shadow:none;
  background-size:cover;background-position:right center}
body.site-v2 .markband .mb-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,
  oklch(100% 0 0 / .94) 0%,oklch(100% 0 0 / .88) 30%,oklch(100% 0 0 / .45) 48%,oklch(100% 0 0 / 0) 66%)}
body.site-v2 .markband .mb-txt{position:relative;z-index:1;max-width:min(520px,100%);
  padding:clamp(56px,7vw,110px) 0 clamp(56px,7vw,110px) max(16px,2vw)}
body.site-v2 .markband .label{color:var(--v2-muted)}
body.site-v2 .mb-tag{border-radius:4px;background:var(--v2-white)}

/* Assemblies = 左大圖(貼齊左邊界)右文字;Materials = 左文字右圖(在內容欄內) */
body.site-v2 .duo{display:block;padding:0;background:var(--v2-white)}
body.site-v2 .duo .duo-i,body.site-v2 .duo .duo-i.d-0,body.site-v2 .duo .duo-i.d-1{display:grid;align-items:center;border:0;background:var(--v2-white)}
body.site-v2 .duo .duo-i.d-0{grid-template-columns:minmax(0,58fr) minmax(0,42fr);border-bottom:1px solid var(--v2-line)}
body.site-v2 .duo .duo-i.d-0 .duo-img{display:block;width:100%;height:100%;min-height:clamp(260px,26vw,400px);object-fit:cover}
body.site-v2 .duo .duo-i.d-0 .duo-pad{padding:clamp(28px,4vw,56px) var(--v2-pad) clamp(28px,4vw,56px) clamp(24px,3.4vw,48px);max-width:560px}
body.site-v2 .duo .duo-i.d-1{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);
  padding:clamp(48px,5.5vw,80px) var(--v2-gut)}
body.site-v2 .duo .duo-i.d-1 .duo-img{order:2;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
body.site-v2 .duo .duo-i.d-1 .duo-pad{order:1;padding:0}
body.site-v2 .duo .label{color:var(--v2-muted)}

/* 問答:淺灰底,左標題、右一個白框裡細線分隔 */
body.site-v2 .oemqa{background:var(--v2-mist-100);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(24px,4vw,56px);align-items:start;border-top:1px solid var(--v2-line)}
body.site-v2 .oemqa-list{max-width:none;background:var(--v2-white);border:1px solid var(--v2-line);
  padding:4px clamp(18px,2.2vw,28px);gap:0}
body.site-v2 .oemqa-i{padding:20px 0}
body.site-v2 .oemqa-i:last-child{border-bottom:0}
body.site-v2 .oemqa-i dt{font-family:var(--font-display);font-weight:500;font-size:clamp(1.2rem,1.05rem + .5vw,1.4rem)}
@media (max-width:820px){
  body.site-v2 .flow-i{grid-template-columns:64px minmax(0,1fr)}
  body.site-v2 .flow-i .flow-img{grid-column:1 / -1;grid-row:3;margin-top:var(--space-md)}
  body.site-v2 .markband .mb-img::after{background:linear-gradient(90deg,oklch(100% 0 0 / .93) 0%,oklch(100% 0 0 / .84) 60%,oklch(100% 0 0 / .6) 100%)}
  body.site-v2 .markband .mb-txt{padding-right:var(--v2-pad)}
  body.site-v2 .duo .duo-i.d-0,body.site-v2 .duo .duo-i.d-1{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .duo .duo-i.d-0 .duo-pad{padding:var(--space-lg) var(--v2-pad) clamp(36px,8vw,52px)}
  body.site-v2 .duo .duo-i.d-1 .duo-img{order:0}
  body.site-v2 .oemqa{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){ body.site-v2 .flow-i .flow-img{transition:none} body.site-v2 .flow-i:hover .flow-img{transform:none} }
/* OEM v2 修正輪:流程標題放寬(底線要橫跨整欄)、問答白框的內距被上一輪 .oem-page .oemqa-list{padding:0} 蓋掉 → 提高特異性 */
body.site-v2 .oem-page .flow .flow-head{max-width:none}
body.site-v2 .oem-page .oemqa .oemqa-list{padding:4px clamp(18px,2.2vw,28px)}
body.site-v2 .oem-page .oemqa-head h2{max-width:14ch}

/* ══ 2026-09-19 夜:頁首照片完整顯示,不裁切(user:「背景圖可以調整好完整放進去,不要又被裁掉」) ══
   原因:頁首高度(約 29vw、上限 460px)比照片比例(內頁 2000×800 = 5:2;首頁 2400×864)矮,cover 會切掉上下。
   做法:頁首的長寬比直接等於照片的長寬比 → cover 剛好整張放進去。文字過高時區塊會自己長高(那時才會微裁)。
   ⚠️ 之後換頁首圖請維持同比例(內頁 5:2、首頁 25:9),不同比例一樣會被裁。 */
body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero),
body.site-v2 .products-page .pgh{aspect-ratio:5 / 2;min-height:0}
body.site-v2 .pitch.full .pitch-in{min-height:min(36vw,864px)}
body.site-v2 .pitch.full{aspect-ratio:2400 / 864}
/* 手機:文字區比 5:2 高得多,壓在圖上一定會裁 → 照片改成文字上方的一條完整橫幅,文字放在白底上 */
@media (max-width:820px){
  body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero),
  body.site-v2 .products-page .pgh{aspect-ratio:auto;display:flex;flex-direction:column;align-items:stretch}
  body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero)::after,
  body.site-v2 .products-page .pgh::after{position:static;order:-1;width:100%;aspect-ratio:5 / 2;opacity:1;
    background:var(--bgimg, none) center / cover no-repeat}
  body.site-v2 :is(.ah-in,.oh-in,.fh-in,.bh-in,.ch-in,.pgh-in){padding-block:clamp(24px,6vw,36px) clamp(28px,7vw,40px)}
  body.site-v2 .pitch.full{aspect-ratio:auto}
  body.site-v2 .pitch[data-tone="light"] .pitch-bg{position:static;width:100%;aspect-ratio:2400 / 864;background-position:center}
  body.site-v2 .pitch[data-tone="light"] .pitch-bg::after{display:none}
  body.site-v2 .pitch[data-tone="light"].full .pitch-in{min-height:0;padding-block:clamp(24px,6vw,36px) clamp(28px,7vw,40px)}
  body.site-v2 .pitch[data-tone="light"]{background:var(--v2-white)}
}

/* ══ 2026-09-19 夜:文章頁標題區背景圖(每篇共用;user 指定放標題區,不是內文第一張圖) ══
   圖是 16:9、標題區是 5:2 → 圖「等高靠右、整張不裁」,左緣用 mask 淡出,文字貼左壓在白底上。 */
body.site-v2 .post-page .pagehead.has-v2bg{position:relative;overflow:hidden;background:var(--v2-white);
  aspect-ratio:5 / 2;display:flex;align-items:center}
body.site-v2 .post-page .pagehead.has-v2bg::after{content:"";position:absolute;top:0;bottom:0;right:0;height:100%;aspect-ratio:16 / 9;z-index:0;
  background:var(--bgimg, none) center / cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0 / .35) 22%,#000 52%);
          mask-image:linear-gradient(90deg,transparent 0%,rgb(0 0 0 / .35) 22%,#000 52%)}
body.site-v2 .post-page .pagehead.has-v2bg > .wrap{position:relative;z-index:1;width:100%;max-width:none;margin-inline:0;
  padding-left:max(16px,2vw);padding-right:var(--v2-pad)}
body.site-v2 .post-page .pagehead.has-v2bg :is(h1,.lede,.crumb){max-width:min(100%,560px)}
body.site-v2 .post-page .pagehead.has-v2bg .crumb span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){
  body.site-v2 .post-page .pagehead.has-v2bg{aspect-ratio:auto;flex-direction:column;align-items:stretch}
  body.site-v2 .post-page .pagehead.has-v2bg::after{position:static;order:-1;width:100%;height:auto;aspect-ratio:16 / 9;
    -webkit-mask-image:none;mask-image:none}
  body.site-v2 .post-page .pagehead.has-v2bg > .wrap{padding-block:clamp(24px,6vw,36px) clamp(28px,7vw,40px)}
}

/* ══ 2026-09-20 產品總覽頁 v2(依 ~/Desktop/products-list-for-claude 參考稿)══
   稿子要修的三件事:①頁首左側太空、文案沒收攏 ②左側分類層級弱 ③卡片胖、灰、圓角,像一堆盒子。
   做法:頁首文案收窄並在 lede 上加一條細線;分類改白底細線軌、當前項左紅磚+淡紅底;
   卡片改「共用細線的表格」——白底、零圓角、零陰影、不上浮,只靠 1px 線分格。
   ⚠️ 字型維持全站的 Cormorant Garamond(--font-display),沒有照稿子換 Instrument Serif。
   ⚠️ 手機分類維持「會換行的標籤牆」,沒有照稿子改回橫向捲軸列
      (2026-08-07 user 抓過:捲軸在 390px 只露得出 1.5 個分類,其餘藏在畫面外)。 */

/* ── 頁首:文案收攏成一欄(~380px),lede 上方一條細線 ── */
body.site-v2 .products-page .pgh-in > h1{max-width:min(100%,400px)}
body.site-v2 .products-page .pgh .lede{max-width:min(100%,380px);
  padding-top:14px;border-top:1px solid var(--v2-mist-300)}

/* ── 工具列:左「All builds / 分類名」右「N products」,下面一條線接住卡片格 ── */
body.site-v2 .products-page .prod-toolbar{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--v2-line)}
body.site-v2 .products-page .prod-toolbar .hint{font-size:12.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--v2-muted)}
body.site-v2 .products-page .prod-toolbar .count{font-size:12.5px;font-weight:500;color:var(--v2-muted);
  font-variant-numeric:tabular-nums}

/* ── 左側分類:白底細線軌,比舊版密;當前項=左紅磚+淡紅底+加粗 ── */
body.site-v2 .products-page .prod-layout{grid-template-columns:minmax(0,208px) minmax(0,1fr);
  gap:clamp(24px,3vw,40px)}
body.site-v2 .products-page .pnav{position:sticky;top:var(--space-lg);
  background:var(--v2-white);border:1px solid var(--v2-line);border-radius:0;padding:0;height:auto}
body.site-v2 .products-page .pnav .label{display:block;padding:14px 14px 12px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  border-bottom:1px solid var(--v2-line);background:transparent}
body.site-v2 .products-page .pnav ul{padding:4px 0}
body.site-v2 .products-page .pnav li + li{border-top:1px solid var(--v2-mist-200)}
body.site-v2 .products-page .pnav a{display:block;padding:9px 14px 9px 12px;font-size:13.5px;line-height:1.35;
  color:var(--v2-muted);background:transparent;border-left:2px solid transparent;border-radius:0;
  transition:color 150ms var(--v2-ease-out),background 150ms var(--v2-ease-out),border-color 150ms var(--v2-ease-out)}
body.site-v2 .products-page .pnav a:hover{color:var(--v2-ink);background:var(--v2-mist-050)}
body.site-v2 .products-page .pnav a.on{color:var(--accent-deep);font-weight:600;
  background:oklch(97% .016 29);border-left-color:var(--accent)}

/* ── 產品卡:共用 1px 細線的格子(卡片本身不留外距、不圓角、不上浮)──
   線的畫法:每張卡自己畫四邊,再用負 margin 讓相鄰的兩條疊成一條(同 About 頁主張格的做法)。
   ⚠️ 不要改成「容器畫上+左、卡片畫右+下」——那樣在「某分類只有 3 個產品」時,
      容器的上框會橫跨整排寬度,右邊多出一截沒有卡片的線。 */
body.site-v2 .products-page .prodgrid{gap:0}
body.site-v2 .products-page .prodgrid .pitem{background:var(--v2-white);border-radius:0;
  box-shadow:none;padding:0;overflow:hidden;
  border:1px solid var(--v2-line);margin:0 -1px -1px 0;
  transition:background 150ms var(--v2-ease-out)}
body.site-v2 .products-page .prodgrid .pitem:hover{background:var(--v2-mist-050);
  transform:none;box-shadow:none;border-color:var(--v2-line)}
body.site-v2 .products-page .prodgrid .pitem-img{aspect-ratio:4/3;margin:0;padding:10px;
  background:var(--v2-white);border:0;border-bottom:1px solid var(--v2-mist-200);border-radius:0}
body.site-v2 .products-page .prodgrid .pitem-name{font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.05rem,.98rem + .3vw,1.24rem);line-height:1.28;letter-spacing:-.01em;color:var(--v2-ink);
  padding:12px 14px 4px;margin:0;
  /* 參考稿是「一律切兩行」,但實測 54 個品名裡有 23 個會被切掉(四欄每格只有 218px)。
     品名是買家判斷與搜尋的依據,不能切 → 上限放寬到 4 行(實測 0 個被切),
     下限維持兩行的高度,短品名才不會讓同列卡片參差。 */
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(1.28em * 2 + 16px)}
body.site-v2 .products-page .prodgrid .pitem-more{margin-top:auto;padding:2px 14px 14px;
  font-size:12px;font-weight:500;letter-spacing:.01em;color:var(--v2-muted);text-transform:none}
body.site-v2 .products-page .prodgrid .pitem-go{color:var(--accent)}
body.site-v2 .products-page .prodgrid .pitem:hover .pitem-go{transform:translateX(3px)}

/* ── 手機:分類改標籤牆(白底細線膠囊),卡片格維持細線但改兩欄/單欄 ── */
@media (max-width:900px){
  body.site-v2 .products-page .prod-layout{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .products-page .pnav{position:static;border:0;border-bottom:1px solid var(--v2-line);
    padding:0 0 var(--space-md)}
  body.site-v2 .products-page .pnav .label{padding:0 0 10px;border-bottom:0}
  body.site-v2 .products-page .pnav ul{display:flex;flex-wrap:wrap;gap:8px;padding:0;overflow:visible}
  body.site-v2 .products-page .pnav li + li{border-top:0}
  body.site-v2 .products-page .pnav a{border:1px solid var(--v2-line);border-left:1px solid var(--v2-line);
    border-radius:999px;padding:7px 14px;font-size:13px;white-space:normal;color:var(--v2-ink);
    background:var(--v2-white)}
  body.site-v2 .products-page .pnav a:hover{border-color:var(--v2-ink);background:var(--v2-white)}
  body.site-v2 .products-page .pnav a.on{background:var(--accent);border-color:var(--accent);
    color:var(--v2-white);font-weight:600}
}
@media (prefers-reduced-motion:reduce){
  body.site-v2 .products-page .prodgrid .pitem,
  body.site-v2 .products-page .prodgrid .pitem-go{transition:none}
  body.site-v2 .products-page .prodgrid .pitem:hover .pitem-go{transform:none}
}

/* 後台編輯模式的兩個例外(本段規則的特異性比舊的 body.editing 那組高,不補會壞):
   ①側欄吸頂要讓開後台上方 54px 工具列,否則「VALVE TYPES」被蓋住。
   ②「＋ 新增產品」卡片要留回虛線框與內距(新版卡片是 padding:0、border:0)。 */
body.site-v2.editing .products-page .pnav{top:66px}
body.site-v2.editing .products-page .prodgrid .pitem-new{border:2px dashed #C6C9CE;
  border-radius:0;padding:18px;min-height:200px;background:transparent}
body.site-v2.editing .products-page .prodgrid .pitem-new:hover{background:var(--v2-mist-050);
  border-color:var(--accent)}

/* ═══ 2026-09-22 About 第二版(交接包 ~/Desktop/about-for-claude/)═══
   只動數據帶、品質／市場區;頁首圖與主張格配圖是同檔名換圖,版面沿用 9/19 那層。
   數據帶:三張白底細線卡、左側紅條、數字在上用無襯線等寬數字,小標在數字下面(HTML 順序不動,用 order 排)。 */
body.site-v2 .statband{background:var(--v2-mist-050);background-image:none}
body.site-v2 .statband-in{gap:clamp(12px,1.6vw,22px)}
body.site-v2 .statband .stat,
body.site-v2 .statband .stat:first-child{display:flex;flex-direction:column;align-items:flex-start;background:var(--v2-white);
  border:1px solid var(--v2-line);border-left:3px solid var(--accent);padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,32px)}
body.site-v2 .statband .stat .sn{order:-1;font-family:var(--font-text);font-weight:700;font-variant-numeric:tabular-nums lining-nums;
  font-size:clamp(2.4rem,1.9rem + 1.6vw,3.2rem);letter-spacing:-.03em;line-height:1;margin-top:0}
body.site-v2 .statband .stat .sn .plus{font-size:.55em;vertical-align:.7em;margin-left:.04em}
body.site-v2 .statband .stat .sk{color:var(--v2-muted);margin-top:14px}
body.site-v2 .statband .stat .st{margin-top:8px;max-width:24ch}

/* 品質區:文字左、配圖右;市場區改淺灰底並延伸到視窗右緣 */
body.site-v2 .qm{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
body.site-v2 .qm-quality.has-img{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(20px,2.4vw,32px);align-items:center;padding-right:clamp(24px,3vw,40px)}
body.site-v2 .qm-quality.has-img .qm-pad{padding-right:0}
body.site-v2 .qm-fig{margin:0}
body.site-v2 .qm-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--v2-line)}
body.site-v2 .qm-markets{background:var(--v2-mist-050);box-shadow:0 0 0 100vmax var(--v2-mist-050);clip-path:inset(0 -100vmax 0 0)}
body.site-v2 .qm-markets .mk-chip{background:var(--v2-white);border:1px solid var(--v2-line)}
@media (max-width:1080px){
  body.site-v2 .qm-quality.has-img{grid-template-columns:minmax(0,1fr);padding-bottom:clamp(32px,4vw,48px)}
  body.site-v2 .qm-quality.has-img .qm-pad{padding-bottom:0}
}
@media (max-width:820px){
  body.site-v2 .statband .stat,body.site-v2 .statband .stat:first-child{margin-top:0;padding:20px 22px}
  body.site-v2 .qm{grid-template-columns:minmax(0,1fr)}
  body.site-v2 .qm-quality.has-img{padding-right:0}
  body.site-v2 .qm-markets{clip-path:inset(0 -100vmax)}
}

/* ═══ 2026-09-22 聯絡頁第二版(user 貼設計稿)═══
   左欄:表單標題＋回覆承諾＋淺灰聯絡資訊卡(小圖示);右欄:白底細框表單,標籤改一般大小寫、必填欄位後加 *、送出鈕滿版。
   全部限定 .contact-page,產品頁的詢價表單不受影響。 */
body.site-v2 .contact-page .contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,3.4vw,48px);align-items:start}
body.site-v2 .contact-page .contact-grid > .cside{order:0;display:block}
body.site-v2 .contact-page .cside-title{font-size:clamp(2rem,1.5rem + 1.6vw,2.7rem);line-height:1.1;color:var(--v2-ink);margin:0 0 var(--space-sm)}
body.site-v2 .contact-page .cside > .formnote{color:var(--v2-muted);font-size:clamp(1.05rem,1rem + .3vw,1.25rem);line-height:1.5;margin:0 0 var(--space-lg)}
body.site-v2 .contact-page .cside-info{display:block;background:var(--v2-mist-100);border:1px solid var(--v2-line);border-radius:6px;
  padding:clamp(22px,2.4vw,30px)}
body.site-v2 .contact-page .cside-info h2{font-family:var(--font-display);font-size:clamp(1.3rem,1.1rem + .6vw,1.55rem);font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--v2-ink);margin:0 0 12px}
body.site-v2 .contact-page .cside-info .label{display:block;margin:20px 0 10px;padding-top:18px;border-top:1px solid var(--v2-line);color:var(--v2-muted)}
body.site-v2 .contact-page .cside-info p{margin:0 0 10px;font-size:16px;line-height:1.5;color:var(--v2-ink)}
body.site-v2 .contact-page .cside-info .ci{display:flex;gap:12px;align-items:flex-start}
body.site-v2 .contact-page .cside-info .ci-ic{flex:none;color:var(--v2-ink);margin-top:1px}
body.site-v2 .contact-page .cside-info .ci a{color:var(--v2-ink);font-weight:500;text-decoration:none;overflow-wrap:anywhere}
body.site-v2 .contact-page .cside-info .ci a:hover{color:var(--accent);text-decoration:underline}
body.site-v2 .contact-page .cside-info .ci-hours{color:var(--v2-muted);font-size:15px;margin:0}

body.site-v2 .contact-page .contact-grid > .panel.formcard{max-width:none;background:var(--v2-white);border:1px solid var(--v2-line);
  border-radius:6px;padding:clamp(22px,2.6vw,34px);box-shadow:none}
body.site-v2 .contact-page .rfq label{font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--v2-ink)}
body.site-v2 .contact-page .rfq label .lt{display:block;margin-bottom:8px}
body.site-v2 .contact-page .rfq label:has([required]) .lt::after{content:" *";color:var(--accent)}
body.site-v2 .contact-page .rfq input[type=text],body.site-v2 .contact-page .rfq input[type=email],body.site-v2 .contact-page .rfq input[type=tel],
body.site-v2 .contact-page .rfq textarea{border-radius:4px;min-height:50px;font-size:16px;background:var(--v2-white)}
body.site-v2 .contact-page .rfq textarea{min-height:140px}
body.site-v2 .contact-page .formcard .rfq{margin-top:0}
body.site-v2 .contact-page .rfq .cta{display:flex;width:100%;justify-content:center;align-items:center;gap:10px;
  min-height:52px;border-radius:4px;font-size:16.5px;margin-top:var(--space-md)}
body.site-v2 .contact-page .rfq .cta::after{content:"→";font-size:1.15em;line-height:1}
@media (max-width:820px){
  body.site-v2 .contact-page .contact-grid{grid-template-columns:minmax(0,1fr)}
}
/* 2026-09-22 聯絡頁新增欄位:下拉選單、附檔框、已選檔案清單;後台收件匣的附檔清單 */
body.site-v2 .contact-page .rfq select{border:1px solid oklch(86% .01 250);border-radius:4px;min-height:50px;font-size:16px;
  background:var(--v2-white);width:100%;padding:0 12px;color:var(--v2-ink)}
body.site-v2 .contact-page .rfq .upbox{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;
  border:1.5px dashed oklch(82% .01 250);border-radius:4px;padding:18px 16px;margin-top:var(--space-sm);cursor:pointer;
  color:var(--v2-muted);text-align:left;transition:border-color .15s,background .15s}
body.site-v2 .contact-page .rfq .upbox:hover,body.site-v2 .contact-page .rfq .upbox:focus-within{border-color:var(--accent);background:var(--v2-mist-050)}
body.site-v2 .contact-page .rfq .upbox input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
body.site-v2 .contact-page .rfq .upbox .up-ic{flex:none;color:var(--v2-muted);display:flex}
body.site-v2 .contact-page .rfq .upbox .lt{margin:0;color:var(--v2-ink)}
body.site-v2 .contact-page .rfq .upbox .up-hint{display:block;font-size:13.5px;color:var(--v2-muted);font-weight:400;margin-top:2px}
body.site-v2 .contact-page .up-list{list-style:none;margin:8px 0 0;padding:0;font-size:14px;color:var(--v2-ink)}
body.site-v2 .contact-page .up-list li{padding:4px 0}
body.site-v2 .contact-page .up-list li.up-err{color:var(--accent)}
.inq-files{list-style:none;margin:10px 0 0;padding:0;font-size:14px}
.inq-files li{padding:3px 0}
.inq-files li span{color:#888;font-size:12.5px;margin-left:6px}
.inq-files li.bad{color:#999}

/* ══ 2026-09-24:內頁頁首大圖改成跟首頁同尺寸(user:「所有頁面上面的背景圖大小都調整跟首頁一樣」) ══
   首頁 .pitch.full 是 2400:864;內頁原本 5:2 → 高了約 60px(1512 寬時 597 vs 537)。
   內頁照片仍是 2000×800,放進 25:9 框會上下各裁約 5%(cover 置中)。 */
body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero),
body.site-v2 .products-page .pgh,
body.site-v2 .post-page .pagehead.has-v2bg{aspect-ratio:2400 / 864}
@media (max-width:820px){
  body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero),
  body.site-v2 .products-page .pgh,
  body.site-v2 .post-page .pagehead.has-v2bg{aspect-ratio:auto}
  body.site-v2 :is(.about-hero,.oem-hero,.faq-hero,.blog-hero,.contact-hero)::after,
  body.site-v2 .products-page .pgh::after{aspect-ratio:2400 / 864}
}

/* ── 右下角 WhatsApp 浮動鈕（2026-10-11，user 選第 9 版）──────────
   白底細框圓鈕＋線條圖示（跟聯絡頁 CI.wa 同一套），電腦與手機長一樣，不展開文字；
   滑過／鍵盤聚焦時反成深石板底白圖示。HTML 在 _worker.js shell() 的 waFab；/contact 與編輯模式不出現。 */
.wa-fab{position:fixed;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:900;
  display:grid;place-items:center;width:54px;height:54px;box-sizing:border-box;border-radius:50%;
  background:#fff;border:1.5px solid oklch(27% .022 250);color:oklch(27% .022 250);
  box-shadow:0 10px 26px oklch(40% .03 250 / .14);text-decoration:none;-webkit-tap-highlight-color:transparent;
  transition:background .2s cubic-bezier(0,0,.2,1),color .2s cubic-bezier(0,0,.2,1),transform .12s cubic-bezier(0,0,.2,1)}
.wa-fab svg{display:block}
.wa-fab:hover,.wa-fab:focus-visible{background:oklch(27% .022 250);color:#fff}
.wa-fab:focus-visible{outline:2px solid oklch(47% .16 29);outline-offset:3px}
.wa-fab:active{transform:scale(.96)}
@media (max-width:720px){.wa-fab{right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom))}}
@media print{.wa-fab{display:none}}
@media (prefers-reduced-motion:reduce){.wa-fab{transition:none}}

/* 2026-10-11 部落格分類鈕篇數（All 10、Selection 6…）：按鈕內的小圓底徽章。
   第一版是「淡色小字直接接在後面」，user 反映看起來像跑版 → 改成有底色的徽章，一看就知道是數字標記。 */
.catbar a{display:inline-flex;align-items:center;gap:8px}
.catbar .cat-n{display:inline-grid;place-items:center;min-width:22px;height:20px;padding:0 6px;box-sizing:border-box;
  border-radius:999px;background:oklch(95.4% .006 250);color:oklch(40% .02 250);
  font-size:12px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
body.site-v2 .catbar a.on .cat-n{background:oklch(100% 0 0 / .18);color:#fff}

/* 2026-10-14 圖庫面板:圖片拖進來時框線變色 */
#popMedia.dragin{outline:2px dashed var(--edit);outline-offset:-6px}

/* ── 2026-10-15 OEM v3：整頁改用首頁元件（user 給的 ~/Desktop/index.html 設計稿）──
   滿版 hero(.pitch.full) → 四步橫排(.casting .steps.x-steps4) → 四條左右圖文列(.x-row) → 兩欄問答(.x-faq) → 詢價帶。
   選擇器刻意跟設計稿一字不差（含特異性），放在檔尾＝設計稿裡 <style> 在 site.css 之後的同一個層疊結果；
   例外是設計稿用 !important 的 .x-steps4，這裡改用 .oem-page .steps.x-steps4(0,3,0) 蓋過 .steps 各斷點(≤0,2,1)。
   設計稿裡沒用到的 .info-grid／.info .panel 那幾條沒搬（DOM 根本沒有）。
   舊版型 .oem-hero/.flow/.markband/.duo/.why/.oemqa 的規則留著沒刪，HTML 已不再產生。 */
.oem-page .steps.x-steps4{grid-template-columns:repeat(4,1fr)}
.x-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.x-tags span{border:1px solid currentColor;opacity:.85;padding:6px 12px;font-size:13px;letter-spacing:.04em}
.x-faq .oemqa-list{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--rule);margin-top:24px}
.x-faq .oemqa-i{padding:28px 32px 28px 0;border-bottom:1px solid var(--rule)}
.x-faq dt{font-family:var(--font-display);font-size:21px;line-height:1.3;margin-bottom:10px;color:var(--text-primary)}
.x-faq dd{margin:0;color:var(--text-muted)}
.x-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;background:#fff}
.x-row.mist{background:var(--steel-050)}.x-row.dark{background:var(--ink-950);color:#fff}.x-row.dark h2{color:#fff}.x-row.dark p{color:oklch(85% .005 250)}
.x-row.rev .x-ri{order:2}.x-ri img{width:100%;height:100%;min-height:440px;object-fit:cover;display:block}
.x-rt{padding:clamp(48px,6vw,96px) var(--gut,64px);align-self:center;max-width:680px}.x-row:not(.rev) .x-rt{padding-left:clamp(40px,5vw,88px)}.x-row.rev .x-rt{margin-left:auto;padding-right:clamp(40px,5vw,88px)}
.x-rt p{margin-top:14px;color:var(--text-muted)}
/* 沒有照片的列（例如 why 區還沒傳圖）：文字獨佔一欄，不留半邊空白 */
.x-row.noimg{grid-template-columns:1fr}
@media(max-width:900px){.oem-page .steps.x-steps4,.x-faq .oemqa-list{grid-template-columns:1fr}.x-row{grid-template-columns:1fr}.x-row.rev .x-ri{order:0}.x-ri img{min-height:260px}}
/* 設計稿寫的 .x-faq .oemqa-i{padding:28px 32px 28px 0}(0,2,0) 右邊距被上面 body.site-v2 .oemqa-i{padding:20px 0}(0,2,1) 蓋掉，
   左欄長問題（「…changes to a standard valve?」）會貼到右欄 → 只把右邊距補回來，上下節奏維持跟設計稿渲染出來的一樣。 */
body.site-v2 .oem-page .x-faq .oemqa-i{padding-right:32px}

/* ── 2026-11-03 字型換 junbao 風格（user 看過 Chrome 預覽後說「ok改好直接部署」）──
   !important 是為了跟 Chrome 預覽一致（預覽就是這樣蓋的），壓過各區塊自己的字距／斜體設定。
   標題／內文 Manrope（變數在 body.site-v2 區塊）；小標改 IBM Plex Mono 等寬＋拉字距。
   Manrope 沒有斜體 → 紅字強調 .lt 改正體，避免瀏覽器硬斜出假斜體。
   還原：舊素材備份/字型換Manrope前_2026-11-03/ 的 site.css、szv-fonts-v2.css 蓋回即可。 */
body.site-v2 h1,body.site-v2 h2,body.site-v2 h3{font-weight:500!important;letter-spacing:-.02em!important}
body.site-v2 .lt{font-style:normal!important}
body.site-v2 .label,body.site-v2 .step .sn,body.site-v2 .pdsec-lab{font-family:var(--font-mono)!important;font-weight:500!important;letter-spacing:.14em!important;text-transform:uppercase}
body.site-v2 .head-nav a{letter-spacing:.04em}

/* ══ 2026-11-05 日文版 /ja/（只作用在 <html lang="ja"> 與語言切換鈕，英文頁不受影響）══
   字型：英數字照舊 Manrope，日文字退回日本系統字（Mac 冬青黑體／Windows 游ゴシック・Meiryo），
   不讓日文漢字掉進原本排在前面的「蘋方-繁／思源黑體 TC」——繁中字形的漢字日本人一看就怪。 */
html[lang="ja"] body.site-v2{
  --font-display:"Manrope","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",sans-serif;
  --font-text:"Manrope","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",sans-serif;
  --font-ui:"Manrope","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","YuGothic","Meiryo",sans-serif;
}
html[lang="ja"] body{line-break:strict}
/* 標題：英文版的負字距會讓日文擠在一起 → 字距歸 0。
   斷行：keep-all＝日文標題只在標點、空白、或內容裡的「看不見斷點」（U+200B）處換行，不會把「液冷」切成兩行；
   真的整句都沒斷點又太長，overflow-wrap:anywhere 當保險。（auto-phrase 實測 Chrome 157 仍把「液／冷」切開，不用） */
html[lang="ja"] body.site-v2 h1,html[lang="ja"] body.site-v2 h2,html[lang="ja"] body.site-v2 h3{letter-spacing:0!important;word-break:keep-all;overflow-wrap:anywhere}
/* 產品名稱卡（首頁分類條、產品列表、相關產品）：卡片太窄，整詞不斷會被硬切、把「、」切到行首 →
   改用日文一般斷行＋禁則（strict：標點、小字不落行首）。只有大標用整詞斷行。 */
html[lang="ja"] .catcard .cn,html[lang="ja"] .pitem-name{word-break:normal;line-break:strict;overflow-wrap:normal}
html[lang="ja"] body.site-v2 .lede,html[lang="ja"] body.site-v2 p{word-break:normal;overflow-wrap:anywhere}
/* 語言切換鈕（英文頁「日本語」、日文頁「EN」）：紅字，跟導覽列同一排 */
.head-nav a.langsw,body.site-v2 .head-nav a.langsw{color:var(--accent);font-weight:600}
.head-nav a.langsw:hover,body.site-v2 .head-nav a.langsw:hover{color:var(--accent-deep)}
/* 日文版：CSS 寫死的英文小標換日文（英文頁不受影響） */
html[lang="ja"] body.site-v2 .fh-in::before{content:"よくある質問"}
html[lang="ja"] body.site-v2 .bh-in::before{content:"ブログ"}
html[lang="ja"] body.site-v2 .ch-in::before{content:"お問い合わせ"}
html[lang="ja"] body.site-v2 .pgh-in::before{content:"製品"}
html[lang="ja"] body.site-v2 .ah-in::before{content:"会社概要"}
html[lang="ja"] body.site-v2 .postgrid > .pcard:first-child:not(:only-child)::after{content:"ほかの記事"}
html[lang="ja"] body.site-v2 .oem-page .flow-i .fn::before{content:"ステップ"}
html[lang="ja"] body.site-v2 .blog-page .pcard:hover .pc-go::after{content:"記事を読む →"}
/* 日文版 OEM 頁大圖區：日文說明比英文長，固定長寬比會把最後一行裁掉 → 改成內容撐高（最小高度照舊） */
html[lang="ja"] body.site-v2 .oem-page .pitch.full{aspect-ratio:auto}
/* 日文版長標題（文章標題、內文小標、文章卡片、FAQ 問句）：句子長、沒有預放斷點，整詞不斷會把「：」擠成單獨一行
   → 改用日文一般斷行＋禁則。短的大標（首頁、產品名、區塊標題）仍用上面的整詞斷行。 */
html[lang="ja"] body.site-v2 .post-page h1,
html[lang="ja"] body.site-v2 .article-body h2,html[lang="ja"] body.site-v2 .article-body h3,html[lang="ja"] body.site-v2 .article-body h4,
html[lang="ja"] body.site-v2 .pcard h2,html[lang="ja"] body.site-v2 .faq-page h3,html[lang="ja"] body.site-v2 .fq2-glabel{word-break:normal;line-break:strict;overflow-wrap:normal}

/* ══ 2026-11-06 阿拉伯文版 /ar/（<html lang="ar" dir="rtl">，只作用在阿拉伯文頁）══
   版面大多靠 dir="rtl" 自動左右翻（flex、grid、文字對齊）；下面補的是「寫死左右」或「照片／漸層方向」的地方。 */
html[lang="ar"] body.site-v2{
  --font-display:"Manrope","SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI","Tahoma",sans-serif;
  --font-text:"Manrope","SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI","Tahoma",sans-serif;
  --font-ui:"Manrope","SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI","Tahoma",sans-serif;
  --font-mono:"Manrope","SF Arabic","Geeza Pro","Noto Sans Arabic","Segoe UI","Tahoma",sans-serif;
}
/* 阿拉伯文字母是連寫的，字距一拉開字就斷掉 → 全部字距歸 0 */
html[lang="ar"] body.site-v2 *,html[lang="ar"] body.site-v2 *::before,html[lang="ar"] body.site-v2 *::after{letter-spacing:0!important}
html[lang="ar"] body.site-v2 h1,html[lang="ar"] body.site-v2 h2,html[lang="ar"] body.site-v2 h3{line-height:1.35}
/* 大圖區：英文版是「左邊白色漸層墊文字、照片在右」→ 阿拉伯文文字在右，整層照片＋漸層水平鏡像 */
html[dir="rtl"] body.site-v2 .pitch-bg{transform:scaleX(-1)}
html[dir="rtl"] body.site-v2 :is(.about-hero,.blog-hero,.contact-hero,.faq-hero,.pgh)::after{transform:scaleX(-1)}
html[dir="rtl"] body.site-v2 .post-page .pagehead.has-v2bg::after{right:auto;left:0;transform:scaleX(-1)}
/* 頁首：英文版選單靠右（margin-left:auto），阿拉伯文要靠左 */
html[dir="rtl"] body.site-v2 .head-nav{margin-left:0;margin-right:auto}
/* CSS 寫死的英文小標換阿拉伯文 */
html[lang="ar"] body.site-v2 .fh-in::before{content:"الأسئلة الشائعة"}
html[lang="ar"] body.site-v2 .bh-in::before{content:"المدونة"}
html[lang="ar"] body.site-v2 .ch-in::before{content:"اتصل بنا"}
html[lang="ar"] body.site-v2 .pgh-in::before{content:"المنتجات"}
html[lang="ar"] body.site-v2 .ah-in::before{content:"من نحن"}
html[lang="ar"] body.site-v2 .postgrid > .pcard:first-child:not(:only-child)::after{content:"مقالات أخرى"}
html[lang="ar"] body.site-v2 .blog-page .pcard:hover .pc-go::after{content:"اقرأ المقال ←"}
html[lang="ar"] body.site-v2 .oem-page .flow-i .fn::before{content:"خطوة"}
html[lang="ar"] body.site-v2 .oem-page .pitch.full{aspect-ratio:auto}

/* ══ 2026-11-06 語言選單（user：「右上角點下去選語言，整理到同一個位置」）══
   <details class="langdd">：地球圖示＋目前語言，點開列出 English／日本語／العربية。
   inset-inline-end 讓選單在英文頁靠右、阿拉伯文頁靠左，不用另寫 RTL。只有外語版存在時才會出現。 */
.langdd{position:relative;align-self:center}
.langdd>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;user-select:none;
  font-size:14px;font-weight:600;color:var(--accent);padding:5px 11px;border:1px solid var(--v2-line,#dcdfe3);border-radius:999px;line-height:1.2}
.langdd>summary::-webkit-details-marker{display:none}
.langdd>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);margin-inline-start:2px}
.langdd[open]>summary::after{transform:translateY(1px) rotate(-135deg)}
.langdd>summary:hover{border-color:var(--accent)}
.langdd>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.langdd-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;min-width:156px;z-index:60;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--v2-line,#e3e5e8);border-radius:10px;box-shadow:0 12px 32px rgb(15 23 42 / .14);padding:6px}
body.site-v2 .head-nav .langdd .langdd-i,.head-nav .langdd .langdd-i{display:block;padding:9px 12px;border-radius:7px;border-bottom:0;
  font-size:14.5px;font-weight:500;color:var(--v2-ink,#1f2933);text-decoration:none;white-space:nowrap}
body.site-v2 .head-nav .langdd a.langdd-i:hover{background:var(--v2-mist,#f3f4f6);color:var(--accent)}
body.site-v2 .head-nav .langdd .langdd-i.on{color:var(--accent);font-weight:600;cursor:default}
/* 手機版那一份（放在 ☰ 旁邊）：電腦版不顯示 */
.langdd-m{display:none}
@media (max-width:960px){
  /* 2026-11-06 user：手機版語言按鈕要直接看得到 → 顯示 ☰ 旁那一份、藏掉選單裡那一份。
     margin-inline-start:auto 讓它在英文頁靠右、阿拉伯文頁靠左，緊貼 ☰。 */
  .langdd-m{display:block;margin-inline-start:auto}
  .langdd-m ~ .navtoggle{margin-left:0}
  .head-nav .langdd{display:none}
  .langdd-m>summary{padding:6px 10px;font-size:13.5px}
  .langdd-m .langdd-menu{min-width:150px}
  body.site-v2 .head-in .langdd-m .langdd-i{display:block;padding:10px 12px;border-radius:7px;font-size:15px;font-weight:500;
    color:var(--v2-ink,#1f2933);text-decoration:none;white-space:nowrap;border:0}
  body.site-v2 .head-in .langdd-m .langdd-i.on{color:var(--accent);font-weight:600}
}
/*__L5CSS_START__*/
/* ══ 2026-11-06 晚 西／德／葡／法／韓（由 build5.py 產生，請改翻譯檔重產，不要手改）══
   拉丁語系沿用英文字型；德文單字長，標題允許斷字（hyphens）；韓文用韓文系統字、整詞不斷（keep-all）。 */
html[lang="es"] body.site-v2 .fh-in::before{content:"FAQ"}
html[lang="es"] body.site-v2 .bh-in::before{content:"Blog"}
html[lang="es"] body.site-v2 .ch-in::before{content:"Contacto"}
html[lang="es"] body.site-v2 .pgh-in::before{content:"Productos"}
html[lang="es"] body.site-v2 .ah-in::before{content:"Nosotros"}
html[lang="es"] body.site-v2 .postgrid > .pcard:first-child:not(:only-child)::after{content:"Más de la planta"}
html[lang="es"] body.site-v2 .oem-page .flow-i .fn::before{content:"Paso"}
html[lang="es"] body.site-v2 .blog-page .pcard:hover .pc-go::after{content:"Leer artículo →"}
html[lang="es"] body.site-v2 .oem-page .pitch.full{aspect-ratio:auto}
html[lang="es"] body.site-v2 h1,html[lang="es"] body.site-v2 h2,html[lang="es"] body.site-v2 h3{overflow-wrap:break-word}
html[lang="de"] body.site-v2 .fh-in::before{content:"FAQ"}
html[lang="de"] body.site-v2 .bh-in::before{content:"Blog"}
html[lang="de"] body.site-v2 .ch-in::before{content:"Kontakt"}
html[lang="de"] body.site-v2 .pgh-in::before{content:"Produkte"}
html[lang="de"] body.site-v2 .ah-in::before{content:"Über uns"}
html[lang="de"] body.site-v2 .postgrid > .pcard:first-child:not(:only-child)::after{content:"Mehr aus dem Werk"}
html[lang="de"] body.site-v2 .oem-page .flow-i .fn::before{content:"Schritt"}
html[lang="de"] body.site-v2 .blog-page .pcard:hover .pc-go::after{content:"Artikel lesen →"}
html[lang="de"] body.site-v2 .oem-page .pitch.full{aspect-ratio:auto}
html[lang="de"] body.site-v2 h1,html[lang="de"] body.site-v2 h2,html[lang="de"] body.site-v2 h3{overflow-wrap:break-word}
html[lang="de"] body.site-v2 h1,html[lang="de"] body.site-v2 h2,html[lang="de"] body.site-v2 h3,html[lang="de"] body.site-v2 .catcard .cn,html[lang="de"] body.site-v2 .pitem-name{hyphens:auto;-webkit-hyphens:auto}
html[lang="pt-BR"] body.site-v2 .fh-in::before{content:"FAQ"}
html[lang="pt-BR"] body.site-v2 .bh-in::before{content:"Blog"}
html[lang="pt-BR"] body.site-v2 .ch-in::before{content:"Contato"}
html[lang="pt-BR"] body.site-v2 .pgh-in::before{content:"Produtos"}
html[lang="pt-BR"] body.site-v2 .ah-in::before{content:"Sobre"}
html[lang="pt-BR"] body.site-v2 .postgrid > .pcard:first-child:not(:only-child)::after{content:"Da fábrica"}
html[lang="pt-BR"] body.site-v2 .oem-page .flow-i .fn::before{content:"Etapa"}
html[lang="pt-BR"] body.site-v2 .blog-page .pcard:hover .pc-go::after{content:"Ler artigo →"}
html[lang="pt-BR"] body.site-v2 .oem-page .pitch.full{aspect-ratio:auto}
html[lang="pt-BR"] body.site-v2 h1,html[lang="pt-BR"] body.site-v2 h2,html[lang="pt-BR"] body.site-v2 h3{overflow-wrap:break-word}
html[lang="fr"] body.site-v2 .fh-in::before{content:"FAQ"}
html[lang="fr"] body.site-v2 .bh-in::before{content:"Blog"}
html[lang="fr"] body.site-v2 .ch-in::before{content:"Contact"}
html[lang="fr"] body.site-v2 .pgh-in::before{content:"Produits"}
html[lang="fr"] body.site-v2 .ah-in::before{content:"À propos"}
html[lang="fr"] body.site-v2 .postgrid > .pcard:first-child:not(:only-child)::after{content:"Nouvelles de l'usine"}
html[lang="fr"] body.site-v2 .oem-page .flow-i .fn::before{content:"Étape"}
html[lang="fr"] body.site-v2 .blog-page .pcard:hover .pc-go::after{content:"Lire l'article →"}
html[lang="fr"] body.site-v2 .oem-page .pitch.full{aspect-ratio:auto}
html[lang="fr"] body.site-v2 h1,html[lang="fr"] body.site-v2 h2,html[lang="fr"] body.site-v2 h3{overflow-wrap:break-word}
html[lang="ko"] body.site-v2 .fh-in::before{content:"FAQ"}
html[lang="ko"] body.site-v2 .bh-in::before{content:"블로그"}
html[lang="ko"] body.site-v2 .ch-in::before{content:"문의"}
html[lang="ko"] body.site-v2 .pgh-in::before{content:"제품"}
html[lang="ko"] body.site-v2 .ah-in::before{content:"회사 소개"}
html[lang="ko"] body.site-v2 .postgrid > .pcard:first-child:not(:only-child)::after{content:"더 보기"}
html[lang="ko"] body.site-v2 .oem-page .flow-i .fn::before{content:"단계"}
html[lang="ko"] body.site-v2 .blog-page .pcard:hover .pc-go::after{content:"글 읽기 →"}
html[lang="ko"] body.site-v2 .oem-page .pitch.full{aspect-ratio:auto}
html[lang="ko"] body.site-v2 h1,html[lang="ko"] body.site-v2 h2,html[lang="ko"] body.site-v2 h3{overflow-wrap:break-word}
html[lang="ko"] body.site-v2{--font-display:"Manrope","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;--font-text:"Manrope","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;--font-ui:"Manrope","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif}
html[lang="ko"] body.site-v2 h1,html[lang="ko"] body.site-v2 h2,html[lang="ko"] body.site-v2 h3{letter-spacing:0!important;word-break:keep-all}
html[lang="ko"] body.site-v2 p,html[lang="ko"] body.site-v2 .lede,html[lang="ko"] body.site-v2 li{word-break:keep-all;overflow-wrap:anywhere}
html[lang="ko"] .catcard .cn,html[lang="ko"] .pitem-name{word-break:keep-all;overflow-wrap:anywhere}
/*__L5CSS_END__*/