/* ========================================================================
   STYLE.CSS — 全站共用樣式
   目錄 TABLE OF CONTENTS（Ctrl+F 區塊名稱即可跳到下方對應的分隔標題）
   ------------------------------------------------------------------------
   01. Google Fonts ............ 字型載入
   02. Design Tokens ........... :root 設計變數（色彩 / 字型 / 圓角 / 陰影 / 間距）
   03. Base Reset .............. 基礎重置（含 .js [data-aos] 進場初始隱藏）
   04. 頁面轉場幕 .............. 站內換頁顏色覆蓋（html::before）
   05. 載入頁 Preloader ........ 首次進站／重新整理：數字 + LOGO 填滿
   06. 版心容器 ............... .container
   07. eyebrow ................ 英文小標
   08. 對角切角 motif ......... clip-path 工具類
   09. 內頁橫幅 Page Hero ..... 深色橫幅 + 麵包屑 + 揭露序列
   10. 共用元件（導覽相關 + 按鈕）
         - 導覽列（透明 → 捲動變深色縮小）
         - 漢堡按鈕（三線 ↔ 叉叉）
         - 手機／平板下拉選單
         - 導覽連結 / 分類下拉 / 語言切換 / 詢價清單圖示
         - SweetAlert2 Toast 進出場
         - 輪播卡片一次性進場（.cc-enter）
         - 右下角浮動工具（社群 + 回到頂部）
         - 按鈕系統 .btn（零圓角，hover 滑入填色）
   11. 表單欄位 ............... .form-field
   12. 提醒框 ................. .cs-note
   13. 頁尾 Footer
   14. CTA 區塊
   15. 數據展示 Stats
   16. 產品／項目卡片 ......... .product-card
   17. 產品卡 hover 浮層 + 動作按鈕
   18. 文章卡片 .............. .article-card
   19. 分頁 Pagination
   20. 卡片輪播機制 .......... .card-carousel
   21. 產品卡片網格 + 分類下拉
   22. 頁面專屬樣式（各頁合併）：index / products / product-detail / news / news-detail / about / contact / inquiry / inquiry-custom / inquiry-submit / inquiry-success / error(403,404)
   ======================================================================== */

/* ==========================================
   01. Google Fonts
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&display=swap');

/* ==========================================
   02. Design Tokens（首頁設計稿統整後定案）
   主橘 #FF723C／深色 #232837／零圓角＋對角切角
   ========================================== */
:root {
  /* Colors — Brand */
  --color-primary:      #FF723C;  /* 主橘：CTA、強調、overline 標籤 */
  --color-primary-dark: #E85F2A;  /* 按鈕 hover */
  --color-dark:         #232837;  /* 深色區塊、Footer */
  --color-dark-2:       #2E3342;  /* 深色區塊上的卡片/分隔層 */
  --color-dark-3:       #363D4A;  /* 較明顯的灰（Footer 社群按鈕 / 版權列） */
  /* 同色的 RGB 版（給半透明 rgba() 用；改色時請與上方對應的 hex 一起改） */
  --color-primary-rgb:  255, 114, 60;  /* = #FF723C */
  --color-dark-rgb:     35, 40, 55;    /* = #232837 */

  /* Colors — Neutral / Text */
  --color-text:         #2D2D2D;  /* 主要文字、標題 */
  --color-muted:        #6B7280;  /* 次要文字、內文 */
  --color-muted-light:  #B6BDC7;  /* 深色底上的次要文字（調亮一點） */

  /* Colors — Surface */
  --color-bg:           #FFFFFF;  /* 頁面預設背景 */
  --color-bg-alt:       #F8F8F8;  /* 交替淺灰區塊 */
  --color-surface:      #FFFFFF;  /* 卡片背景 */
  --color-border:       #E5E7EB;  /* 分隔線、邊框 */

  /* Colors — State */
  --color-danger:       #EF4444;
  --color-success:      #22C55E;
  --color-warning:      #F59E0B;

  /* Typography */
  --font-heading: 'Inter', 'Noto Sans TC', sans-serif;
  --font-body:    'Noto Sans TC', sans-serif;
  --font-display: 'Barlow', 'Inter', sans-serif;   /* 數據／大數字 */

  /* Radius — 零圓角風格 */
  --radius:      0px;
  --radius-full: 9999px;

  /* Clip — 45° 對角切角 motif（全站共用尺寸） */
  --clip:    24px;
  --clip-sm: 10px;  /* 小元件（icon 方塊等）用的切角 */

  /* Shadow */
  --shadow-md: 0 10px 30px rgba(0, 0, 0, .08);
  --shadow-lg: 0 20px 45px rgba(0, 0, 0, .12);

  /* Easing（全站進場/過場主曲線；近似 power3.out，原本散落多種寫法統一於此） */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Spacing */
  --space-section: 96px;  /* section 上下留白 */
  --container:     1440px;
}

/* ==========================================
   03. Base Reset
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 防止任一區塊的水平溢出把「版面視窗」撐寬（手機會因此把 fixed 頁首一起撐寬、
   導致漢堡被推出畫面）。clip 不會破壞 position: sticky。 */
html { overflow-x: clip; }
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
  margin: 0;
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
  object-fit: cover;
}

a {
  color: inherit;
  text-decoration: none;
}

/* 捲動進場元素：JS（GSAP）接手前先隱藏，避免首次繪製閃現後才被動畫抓回（取代原 aos.css 的職責）。
   僅在 <html class="js">（JS 可用）時隱藏，無 JS 時內容照常顯示；減少動畫偏好下也直接顯示。
   GSAP 進場由 script.js 的 setupScrollReveal 驅動。 */
.js [data-aos], .js [data-gsap] { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js [data-aos], .js [data-gsap] { opacity: 1 !important; }
}

/* ==========================================
   04. 頁面轉場幕（離開淡入幕約 0.5s、進入淡出幕約 0.6s）
   用 html::before 當深色覆蓋層：style.css 在 <head> 阻塞渲染，幕在「第一次繪製前」就蓋滿 → 杜絕 FOUC。
   進入：載入即以 CSS 動畫自動淡出（不依賴 JS、也不 hold，故各區塊進場動畫照常看得到）。
   離開：JS 加 .is-leaving 重新淡入覆蓋後再導航（見 script.js 的 initPageTransition）。
   僅在 <html class="js"> 啟用；無 JS 時不顯示幕，頁面照常呈現。
   ========================================== */
@keyframes page-enter { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes page-leave { from { opacity: 0; visibility: visible; } to { opacity: 1; visibility: visible; } }
html.js::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: var(--color-dark);
  pointer-events: none;
  opacity: 1;
  /* 進入新頁：先停留 0.2s（幕維持蓋滿）再花 0.6s 漸漸淡出露出頁面 */
  animation: page-enter .6s ease .2s both;
}
html.js.is-leaving::before { animation: page-leave .5s ease forwards; }
@media (prefers-reduced-motion: reduce) {
  html.js::before,
  html.js.is-leaving::before { animation-duration: .01ms; animation-delay: 0s; }
}

/* ==========================================
   05. 載入頁（preloader）：首次進站／重新整理時顯示
   深色滿版 + 正中白色 LOGO（隨進度由半透明漸亮到全白）+ 下方數字 0%→100%
   顯示與否由 <head> 行內腳本決定（內部換頁／上一頁時標記 no-preload 不顯示，改走頁面轉場）。
   進度與淡出由 script.js 的 initPreloader 驅動；減少動畫偏好則不顯示。
   ========================================== */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;                 /* 高於頁面轉場幕（9999） */
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-dark);
}
html.no-preload #preloader { display: none; }            /* 內部換頁/上一頁：不顯示載入頁 */
@media (prefers-reduced-motion: reduce) { #preloader { display: none; } }

/* 橫式 LOGO：兩層完全疊放——底層淡（空框感），上層純白由左往右被「灌滿」
   （上層 clip-path 起始全裁切，JS 依進度從右往左收回裁切量，呈現進度條填滿效果） */
.preloader__logo { position: relative; display: inline-block; }
.preloader__logo-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
}
.preloader__logo-base { opacity: 0.22; }                 /* 空的樣子 */
.preloader__logo-fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 100% 0 0);                          /* 起始全空；JS 推進到 inset(0 0 0 0) 填滿 */
}
.preloader__mark { width: 2rem; height: 2rem; flex-shrink: 0; }
.preloader__img { height: clamp(2.25rem, 1.6rem + 2.4vw, 3rem); width: auto; display: block; }
.preloader__name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.1rem, 0.9rem + 1.4vw, 1.6rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1;
  color: #FFFFFF;
}
/* 數字：畫面置底置中 */
.preloader__num {
  position: absolute;
  left: 50%;
  bottom: 2.5rem;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: #FFFFFF;
}
/* 跑到 100% 後整片淡出露出頁面 */
#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
}
/* 載入期間鎖住背景捲動 */
html.preloading { overflow: hidden; }

/* ==========================================
   06. 全局共用：版心容器
   ========================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ==========================================
   07. 全局共用：英文小標 eyebrow（PREMIUM AUTO PARTS / LATEST NEWS 等）
   ⚠ 不可用 class 名「overline」：會與 Tailwind 的 .overline
   文字裝飾工具類（text-decoration-line: overline）衝突而在文字上方多一條線
   ========================================== */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;     /* 14px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 6px;      /* 小標與下方標題的預設間距（共用；page-hero 8px、錯誤頁 0.75rem 各自覆寫） */
}
.eyebrow--light {           /* 深色區塊上使用 */
  color: #FFFFFF;
}

/* 區塊主標題（共用；各頁區塊 h2 加 .section-title，深色區塊再加 --light）
   尺寸/字重/行高/色彩集中於此，要改全站區塊標題只改這裡 */
.section-title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-text);
  font-size: clamp(1.625rem, 1rem + 1.9vw, 2.625rem);
}
.section-title--light { color: #FFFFFF; }   /* 深色區塊上的區塊標題 */
.section-title--sm {                          /* 較小的區塊標題（相關產品/文章、聯絡、客製流程） */
  line-height: 1.3;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
}

/* ==========================================
   08. 對角切角 motif（clip-path 工具類）
   方向可組合，尺寸統一吃 --clip
   ========================================== */
.clip-tr {  /* 右上切角（型錄產品圖） */
  clip-path: polygon(0 0, calc(100% - var(--clip)) 0, 100% var(--clip), 100% 100%, 0 100%);
}
.clip-tr-sm {  /* 右上小切角（icon 方塊等小元件） */
  clip-path: polygon(0 0, calc(100% - var(--clip-sm)) 0, 100% var(--clip-sm), 100% 100%, 0 100%);
}
.clip-br {  /* 右下折角（最新消息卡片） */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);
}
.clip-bl {  /* 左下切角 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--clip) 100%, 0 calc(100% - var(--clip)));
}

/* ==========================================
   09. 內頁橫幅 Page Hero（深色背景圖 + 遮罩 + 標題 + 麵包屑）
   所有內頁共用（關於我們 / 聯絡我們 / 產品 / 消息 / 403 / 404…）
   固定導覽列覆蓋其上，故上方留白需讓開 nav 高度
   ========================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-dark);
}
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
}
.page-hero__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(27, 31, 43, .88) 0%, rgba(27, 31, 43, .72) 100%);
}
.page-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 11rem;      /* 讓開固定導覽列 */
  padding-bottom: 5rem;
}
@media (max-width: 767.98px) {
  .page-hero__inner { padding-top: 8.5rem; padding-bottom: 3.5rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .page-hero__inner { padding-top: 9.5rem; padding-bottom: 4rem; }   /* 平板：頂部留白略減，banner 更緊湊 */
}
.page-hero__inner .eyebrow { margin-bottom: 8px; }
.page-hero__title {
  font-family: var(--font-heading);
  font-weight: 500;                /* 比照首頁 Hero 標題字重 */
  line-height: 1.2;
  color: #FFFFFF;
  font-size: clamp(2rem, 1rem + 3vw, 3.25rem);
}

/* 麵包屑 */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: var(--color-muted-light);
}
.breadcrumb a { transition: color .2s ease; }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep { color: rgba(255, 255, 255, .35); }
.breadcrumb__current { color: #FFFFFF; }

/* 揭露序列（效果同首頁 Hero）：群組（.page-hero__inner 或標 data-reveal 的容器，如 CTA）捲入時，
   其中 .reveal-up 標題做遮罩翻起、.reveal-fade 敘述/按鈕做淡入上移，依各自 transitionDelay 串成序列。
   初始狀態與 .ph-mask>.ph-rv 結構由 script.js 的 setupReveal 注入；減少動畫時不加 .reveal-on，元素維持原樣。 */
.ph-mask { overflow: hidden; }
.ph-rv {
  display: block;
  transform: translateY(110%);
  transition: transform .5s var(--ease-out);   /* 近似 Hero 的 GSAP power3.out */
  will-change: transform;
}
.reveal-on .reveal-fade {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}
.reveal-on.is-revealed .ph-rv       { transform: translateY(0); }
.reveal-on.is-revealed .reveal-fade { opacity: 1; transform: none; }

/* ==========================================
   10. 共用元件（導覽相關 + 按鈕；每個區塊確認後陸續補入）
   ========================================== */

/* ------------------------------------------
   導覽列（透明 → 捲動變深色縮小）
   ------------------------------------------ */
/* 品牌 Logo 圖（頁首／頁尾共用；取代原本 inline SVG + 文字佔位） */
.brand-logo { height: 2.25rem; width: auto; display: block; }
.footer-brand__logo .brand-logo { height: 2.75rem; }
@media (min-width: 1100px) { .site-nav .brand-logo { height: 2.75rem; } }   /* 電腦版頁首 logo 加大 */
.site-nav {
  background-color: transparent;
  transition: background-color .3s ease, box-shadow .3s ease;
}
/* 垂直內距放在「導覽列那一排」而非整個 header；
   如此手機/平板的下拉選單會從頁首底邊開始、剛好貼住（不被 header 下內距推開） */
.site-nav > .container {
  padding-block: 1.5rem;          /* 頂部時較高 */
  transition: padding .3s ease;
}
.site-nav.is-scrolled {
  background-color: var(--color-dark);
  box-shadow: var(--shadow-md);
}
.site-nav.is-scrolled > .container {
  padding-block: 0.75rem;         /* 捲動後縮小高度 */
}
/* 手機/平板：未置頂時上下間距縮小（桌機維持較高的 1.5rem） */
@media (max-width: 1023.98px) {
  .site-nav > .container { padding-block: 0.85rem; }
}

/* Logo 標記（inline SVG，帶 45° 切角 motif） */
.logo-mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}
/* 手機版：Logo 標記縮小（品牌字級由 text-lg md:text-xl 同步在 768px 切換） */
@media (max-width: 767.98px) {
  .logo-mark { width: 1.9rem; height: 1.9rem; }
}

/* ------------------------------------------
   漢堡按鈕：三條線 ↔ 叉叉（滑順變形；依 aria-expanded 切換）
   ------------------------------------------ */
/* === 導覽列 桌機選單 ↔ 漢堡 的切換點 ===
   依實測：logo ≈ 211px ＋ 右側選單群組 ≈ 780px ＋ 版心左右邊距 40px ≈ 1030px 才剛好不重疊。
   再保留約 70px 安全間距 → 1100px 以上顯示桌機選單、以下收成漢堡（內容不逼近 logo）。
   切換點集中在此一處；非 Tailwind 斷點，避免改動各頁 config。 */
.nav-burger { display: inline-flex; }                 /* 窄版：顯示漢堡 */
.nav-desktop,
.nav-desktop-lang,
.btn.nav-desktop-cta { display: none; }               /* 窄版：隱藏桌機選單 / 語言 / 客製詢價 */
.nav-actions { gap: 0.5rem; }                          /* 窄版：右側僅購物車＋漢堡，間距小 */
@media (min-width: 1100px) {
  .nav-burger { display: none; }                       /* 寬版：收起漢堡 */
  .nav-desktop { display: flex; }
  .nav-desktop-lang { display: block; }
  .btn.nav-desktop-cta { display: inline-flex; }
  .nav-actions { gap: 2rem; }
  .inquiry-cart { margin-left: -0.75rem; }             /* 原 xl:-ml-3 */
  #mobile-menu { display: none !important; }           /* 寬版：永不顯示下拉面板 */
}

/* 漢堡按鈕：負右邊距抵銷按鈕內的置中內距，使三條線視覺貼齊版心右緣（與左側 logo 對稱） */
.menu-toggle { margin-right: -0.625rem; }
.menu-toggle__bars {
  position: relative;
  width: 1.5rem;
  height: 1rem;
}
.menu-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  transition: top .3s ease, transform .3s ease, opacity .2s ease;
}
.menu-toggle__bar:nth-child(1) { top: 0; }
.menu-toggle__bar:nth-child(2) { top: 7px; }
.menu-toggle__bar:nth-child(3) { top: 14px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) { top: 7px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* 手機下拉選單：平滑展開/收合（grid 0fr→1fr，無卡頓）；開、關都緩和 */
#mobile-menu {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  border-top-width: 0;        /* 收合時不顯示分隔線，避免暗色頁首下方多一條 */
  transition: grid-template-rows .32s ease, opacity .32s ease;
}
#mobile-menu.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  border-top-width: 1px;      /* 展開時才顯示與頁首列的分隔線 */
}
#mobile-menu > nav { min-height: 0; overflow: hidden; }
/* 選單內層：內容過長（如產品型錄三層展開）時可捲動，避免超出畫面被切掉 */
.mobile-menu__inner {
  max-height: calc(100vh - 4.5rem);
  overflow-x: hidden;          /* 避免 overflow-y:auto 連帶把 x 變 auto 而冒出水平拉霸 */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* 選單開啟時鎖住背景捲動（由 JS 在 <html> 加 .is-menu-open）；選單自身仍可捲動 */
html.is-menu-open,
html.is-menu-open body { overflow: hidden; }

/* ------------------------------------------
   手機/平板下拉選單：主連結 + 可伸縮分類（各項上下間距一致）
   ------------------------------------------ */
.mobile-nav__group { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.mobile-nav__row { display: flex; align-items: center; }
.mobile-nav__link {
  display: block;
  flex: 1;
  padding: 1rem 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: #FFFFFF;
  transition: color .2s ease, padding-bottom .3s ease;
}
.mobile-nav__link:hover,
.mobile-nav__link[aria-current="page"] { color: var(--color-primary); }
/* 展開時主連結下方收緊到與子項相同，使「主項→第一個子項」與「子項之間」間距一致 */
.mobile-nav__group.is-open .mobile-nav__link { padding-bottom: 0.5rem; }
/* 展開鈕：與主連結同高（align-self: stretch），讓有分類/無分類的項目高度一致 */
.mobile-nav__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  align-self: stretch;
  margin-right: -0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #FFFFFF;
}
.mobile-nav__chevron {
  width: 1.1rem;
  height: 1.1rem;
  color: rgba(255, 255, 255, .6);
  transition: transform .3s ease, color .2s ease;
}
.mobile-nav__group.is-open .mobile-nav__chevron {
  transform: rotate(180deg);
  color: var(--color-primary);
}
/* 分類子清單：grid 0fr→1fr 伸縮 */
.mobile-nav__subs {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.mobile-nav__group.is-open .mobile-nav__subs { grid-template-rows: 1fr; }
.mobile-nav__subs-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-left: 1rem;        /* 只放左縮排（橫向）；垂直間距改放在子連結，避免收合時殘留空隙 */
}
.mobile-nav__sub {
  padding: 0.5rem 0;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, .6);
  text-align: left;          /* 語言項目為 <button>（預設置中），統一靠左對齊分類下拉項目 */
  transition: color .2s ease;
}
.mobile-nav__sub:hover { color: var(--color-primary); }
/* 產品型錄手機巢狀手風琴：大類 ▾ 展開中類 ▾ 展開小類（深色頁首版） */
.mnav-row { display: flex; align-items: center; }
.mnav-row--sub { padding-left: 1rem; }
.mnav-link {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, .6);
  transition: color .2s ease;
}
.mnav-link:hover { color: var(--color-primary); }
.mnav-link--cat { color: #FFFFFF; font-weight: 500; }
.mnav-link--leaf {
  display: block;
  padding: 0.5rem 0 0.5rem 2rem;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, .55);
}
.mnav-link--leaf:hover { color: var(--color-primary); }
.mnav-toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
}
.mnav__chev {
  width: 1rem;
  height: 1rem;
  color: rgba(255, 255, 255, .5);
  transition: transform .25s ease;
}
.mnav-cat.is-open > .mnav-row > .mnav-toggle .mnav__chev,
.mnav-sub.is-open > .mnav-row > .mnav-toggle .mnav__chev { transform: rotate(180deg); }
/* 展開動畫：各層用直接子代，互不影響 */
.mnav-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.mnav-cat.is-open > .mnav-panel,
.mnav-sub.is-open > .mnav-panel { grid-template-rows: 1fr; }
.mnav-panel__inner { overflow: hidden; min-height: 0; }
/* 產品型錄最後一個大類底部留白，使展開時到分隔線的間距與其他展開組一致 */
.mnav-cat:last-child { padding-bottom: 0.5rem; }
/* 語言選項與分類下拉項目完全同色（灰）；橘色只保留給「當前頁」，故不特別標當前語言 */
.mobile-nav__sub:last-child { padding-bottom: 1rem; }                            /* 展開列表底部留白，與項目間距相近 */
/* 語言項目（最後一項）：下方不要格線；上方的分隔由前一項的 border-bottom 提供 */
.mobile-nav__group:last-child { border-bottom: none; }
/* 語言切換：與分類項目相同結構（.mobile-nav__row + .mobile-nav__link + .mobile-nav__toggle）；
   文字為 span，補上指標游標讓它也可點展開 */
.mobile-nav__link[data-acc-toggle] { cursor: pointer; }

/* 導覽連結：hover 底線從左滑出 */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: #FFFFFF;
  padding-block: 0.25rem;
  transition: color .2s ease;
}
/* 底線：hover 從左側滑出（原始行為） */
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width .25s ease;
}
.nav-link:hover { color: var(--color-primary); }
.nav-link:hover::after { width: 100%; }
/* 當前頁面：橘色 + 底線常駐 */
.nav-link[aria-current="page"] { color: var(--color-primary); }
.nav-link[aria-current="page"]::after { width: 100%; }

/* 分類下拉（產品型錄 / 最新消息） */
.nav-link__chevron {
  width: 0.85rem;
  height: 0.85rem;
  margin-left: 0.25rem;
  transition: transform .2s ease;
}
.nav-item { position: relative; }
.nav-item:hover .nav-link__chevron { transform: rotate(180deg); }
/* 滑入下拉時，觸發項目本身維持橘色 + 底線 */
.nav-item:hover > .nav-link { color: var(--color-primary); }
.nav-item:hover > .nav-link::after { width: 100%; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;                 /* 置左：對齊選單項目（文字）左緣 */
  margin-top: 0.75rem;     /* 與選單之間留一點距離 */
  min-width: 12rem;
  padding: 0.5rem 0;       /* 上下留白，與產品型錄 cascade 下拉一致 */
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 60;
}
/* 透明橋接：填補與選單之間的間隙，讓滑鼠移到下拉時 hover 不中斷 */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 0.75rem;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown__link {
  display: block;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-text);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.nav-dropdown__link:hover { background-color: var(--color-bg-alt); color: var(--color-primary); }

/* 產品型錄三層階梯式飛出選單（桌機；沿用 .nav-dropdown 的出現/隱藏動畫） */
.nav-dropdown--cascade {
  left: 0;
  min-width: 13rem;
  padding: 0.5rem 0;
}
.nav-casc__item { position: relative; }
.nav-casc__link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-text);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.nav-casc__link:hover { background-color: var(--color-bg-alt); color: var(--color-primary); }
.nav-casc__chev {
  width: 0.9rem;
  height: 0.9rem;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-muted-light);
}
.nav-casc__link:hover .nav-casc__chev { color: var(--color-primary); }
.nav-casc__link--leaf { padding-left: 1.75rem; }
/* 飛出子選單：定位於父項右側，hover 父項時顯示 */
.nav-casc__sub {
  position: absolute;
  top: -0.5rem;
  left: 100%;
  min-width: 12rem;
  padding: 0.5rem 0;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 1;
}
.nav-casc__item:hover > .nav-casc__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* 語言切換（桌機下拉；手機選單內共用 .lang-switch__opt） */
.lang-switch { position: relative; }
.lang-switch__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: #FFFFFF;
  background: none;
  border: none;
  cursor: pointer;
  padding-block: 0.25rem;
  transition: color .2s ease;
}
/* hover 底線從左滑出（與 .nav-link 一致） */
.lang-switch__btn::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  transition: width .25s ease;
}
.lang-switch__btn:hover { color: var(--color-primary); }
.lang-switch__btn:hover::after { width: 100%; }
.lang-switch__chevron {
  width: 0.85rem;
  height: 0.85rem;
  transition: transform .2s ease;
}
.lang-switch:hover .lang-switch__chevron { transform: rotate(180deg); }
/* 下拉效果同分類下拉（產品型錄/最新消息）：hover 淡入滑下、下方留距離 */
.lang-switch__menu {
  position: absolute;
  top: 100%;
  left: 0;                   /* 置左：對齊按鈕左緣（同分類下拉） */
  margin-top: 0.75rem;
  min-width: 12rem;          /* 與分類下拉同寬，視覺統一 */
  padding: 0.5rem 0;         /* 上下留白，與產品型錄 cascade 下拉一致 */
  background-color: var(--color-surface);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease;
  z-index: 60;
}
/* 透明橋接：填補與按鈕之間的間隙，hover 不中斷 */
.lang-switch__menu::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 100%;
  height: 0.75rem;
}
.lang-switch:hover .lang-switch__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-switch__opt {
  display: block;
  width: 100%;
  padding: 0.85rem 1.25rem;   /* 與其他下拉項目（.nav-dropdown__link / .nav-casc__link）內距一致 */
  text-align: left;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lang-switch__opt:hover { background-color: var(--color-bg-alt); color: var(--color-primary); }
/* 桌機下拉：與分類下拉完全統一 —— 顯示全部語言、項目同色，不特別標當前語言（橘色只保留給當前頁） */

/* 詢價清單圖示 + 數量徽章 */
.inquiry-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #FFFFFF;
  transition: color .2s ease;
}
.inquiry-cart:hover { color: var(--color-primary); }
.cart-count {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  min-width: 1.15rem;
  height: 1.15rem;
  padding-inline: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}

/* ------------------------------------------
   SweetAlert2 Toast 進出場：從右側滑入 / 往右側滑出
   （取代預設彈出動畫；toast 位於右上 top-end）
   ------------------------------------------ */
@keyframes toast-slide-in-top {
  from { transform: translateY(-120%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes toast-slide-out-top {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-120%); opacity: 0; }
}
.swal2-toast-slide-in  { animation: toast-slide-in-top .4s var(--ease-out) both; }
.swal2-toast-slide-out { animation: toast-slide-out-top .3s ease-in both; }
@media (prefers-reduced-motion: reduce) {
  .swal2-toast-slide-in, .swal2-toast-slide-out { animation: none; }
}
/* 頂部置中 Toast：下移避開固定導覽列（中央彈窗為 swal2-center，不受影響） */
.swal2-container.swal2-top { padding-top: 5rem; }

/* ------------------------------------------
   輪播卡片一次性進場（捲入時可見卡片逐張淡入上移；通用 —— 首頁文章輪播與關於我們認證輪播共用）
   由輪播 JS 觸發（加 .cc-enter 隱藏、.cc-enter-in 顯示），結束後移除 class、不影響後續 hover/輪播
   ------------------------------------------ */
.cc-enter > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.cc-enter.cc-enter-in > * {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------
   右下角浮動工具：社群（切換鈕一直顯示，點擊逐顆從切換鈕往上彈出、再逐顆收回）+ 回到頂部（捲動後才出現）
   ------------------------------------------ */
.float-tools {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* 社群區：絕對定位錨在切換鈕正上方，脫離浮動列佈局 → 收合時切換鈕不會被推移 */
.float-tools__social {
  position: absolute;
  left: 50%;
  bottom: 100%;                         /* 底邊貼齊切換鈕上緣 */
  margin-bottom: 0.5rem;                /* 與切換鈕的間距（同 float-tools 的 gap） */
  transform: translateX(-50%);
  pointer-events: none;                 /* 收合時整區不可點 */
}
.float-tools.is-open .float-tools__social { pointer-events: auto; }
.float-tools__social-inner {
  display: flex;
  flex-direction: column-reverse;       /* DOM 第一顆排在最底，最靠近切換鈕 */
  align-items: center;
  gap: 0.5rem;
}

/* 方塊按鈕共用外觀 */
.float-tools__social a,
.float-tools__toggle,
.float-tools__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);   /* 較明顯陰影，淺底也有層次 */
}
/* 深色按鈕（社群 + 切換鈕）：改用較亮的深灰填色（取代白框），深色區塊上也看得出形狀 */
.float-tools__social a,
.float-tools__toggle { background-color: var(--color-dark-3); }
.float-tools__social a svg { width: 1.1rem; height: 1.1rem; }
.float-tools__toggle svg { width: 1.25rem; height: 1.25rem; }

/* 切換鈕：hover 變色 + 微上浮 */
.float-tools__toggle { transition: background-color .25s ease, transform .25s ease; }
.float-tools__toggle:hover { background-color: var(--color-primary); transform: translateY(-2px); }

/* 社群每顆：收合時縮小落回切換鈕位置並隱藏；展開逐顆往上彈出、收回逐顆縮回切換鈕。
   --ft-step = 每顆中心間距（按鈕 2.75rem + gap 0.5rem）；位移 (--i+1)*step 讓每顆都精準落回切換鈕中心 */
.float-tools__social a {
  --i: 0;
  --ft-step: 3.25rem;
  transform: translateY(calc((var(--i) + 1) * var(--ft-step))) scale(.3);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34, 1.4, .64, 1),
              opacity .25s ease,
              background-color .25s ease;
  transition-delay: calc((3 - var(--i)) * .06s);   /* 收合：最上面那顆先收，往下逐顆 */
}
.float-tools__social a:nth-child(1) { --i: 0; }    /* column-reverse 後在最底，最靠切換鈕 */
.float-tools__social a:nth-child(2) { --i: 1; }
.float-tools__social a:nth-child(3) { --i: 2; }
.float-tools__social a:nth-child(4) { --i: 3; }
.float-tools.is-open .float-tools__social a {
  transform: translateY(0) scale(1);
  opacity: 1;
  transition-delay: calc(var(--i) * .06s);          /* 展開：最底那顆先冒，往上逐顆 */
}
.float-tools__social a:hover { background-color: var(--color-primary); }  /* hover 僅變色，避免位移蓋掉展開位置 */

/* 動畫偏好降低：直接顯示／隱藏，不做逐顆位移 */
@media (prefers-reduced-motion: reduce) {
  .float-tools__social a,
  .float-tools.is-open .float-tools__social a {
    transition-duration: .01ms;
    transition-delay: 0s;
    transform: none;
  }
  .float-tools__social a { opacity: 0; }
  .float-tools.is-open .float-tools__social a { opacity: 1; }
}

/* 回到頂部：主橘；捲動超過 400px 才淡入（社群切換鈕則一直顯示） */
.float-tools__top {
  background-color: var(--color-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, background-color .25s ease, transform .25s ease;
}
.float-tools.is-visible .float-tools__top {
  opacity: 1;
  pointer-events: auto;
}
.float-tools__top:hover { background-color: var(--color-primary-dark); transform: translateY(-2px); }
.float-tools__top svg { width: 1.3rem; height: 1.3rem; }
@media (max-width: 767.98px) {
  .float-tools { right: 0.85rem; bottom: 0.85rem; }
}

/* ------------------------------------------
   按鈕系統（全站共用，零圓角）
   hover：背景由左向右滑入填色（pseudo-element）
   ------------------------------------------ */
.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;               /* 觸控友善 ≥ 44px */
  padding: 0.875rem 2rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s ease;
}
.btn:hover::before { transform: scaleX(1); }

/* Primary：主橘填色，hover 滑入深橘（邊框同步變色） */
.btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}
.btn-primary::before { background-color: var(--color-primary-dark); }
.btn-primary:hover { border-color: var(--color-primary-dark); }

/* Secondary：深底上的淺外框，hover 滑入白底深字 */
.btn-secondary {
  background-color: transparent;
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, .6);
}
.btn-secondary::before { background-color: #FFFFFF; }
.btn-secondary:hover {
  color: var(--color-dark);
  border-color: #FFFFFF;
}

/* Outline：淺底上的次要按鈕（深字 + 淺框，hover 滑入深底白字） */
.btn-outline {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-outline::before { background-color: var(--color-text); }
.btn-outline:hover { color: #FFFFFF; border-color: var(--color-text); }

/* 小尺寸（導覽列 CTA 用） */
.btn--sm {
  min-height: 2.375rem;
  padding: 0.4375rem 0.875rem;
  font-size: 0.9375rem;
}

/* 按鈕右側箭頭（hover 時向右滑動） */
.btn-arrow {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  transition: transform .25s ease;
}
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ==========================================
   11. 表單欄位（共用；聯絡我們、客製詢價等表單）
   label 在上、必填紅星、灰底輸入框、focus 橘框
   ========================================== */
.form-field { display: flex; flex-direction: column; min-width: 0; }   /* min-width:0 允許在窄欄內縮小，避免溢位破版 */
.form-field label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}
.form-field .req { color: var(--color-danger); margin-left: 0.15rem; }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  padding: 0.75rem 1rem;
  background-color: var(--color-bg-alt);   /* 灰色輸入框 */
  border: 1px solid var(--color-border);
  transition: border-color .2s ease, box-shadow .2s ease;
}
/* select：移除原生箭頭，改自訂箭頭並加右側留白（避免箭頭貼邊） */
.form-field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.1rem;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-muted-light); }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15);
}
.form-field textarea {
  resize: vertical;
  min-height: 7.5rem;
}

/* ==========================================
   12. 提醒框（共用；淺橘底 + 左橘邊 + 資訊 icon）
   外距由使用情境各自設定
   ========================================== */
.cs-note {
  display: flex;
  gap: 0.85rem;
  padding: 1.25rem 1.5rem;
  background-color: rgba(var(--color-primary-rgb), .08);
  border-left: 3px solid var(--color-primary);
}
.cs-note__icon {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-primary);
  margin-top: 0.1rem;
}
.cs-note__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.cs-note__text {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* ==========================================
   13. 全局共用：頁尾（深色；全站一致）
   ========================================== */
.site-footer {
  background-color: var(--color-dark);
  color: var(--color-muted-light);
}
.site-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-block: 4rem 7.5rem;       /* 文字區下方再加高（桌機） */
}
@media (max-width: 1023.98px) {
  .site-footer__main { padding-block: 3.5rem 4rem; }   /* 手機 */
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-footer__main { padding-block: 4.5rem 6rem; }   /* 平板 */
}
/* 第二～四區塊群組：彼此等寬、均等間距 */
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 640px) {
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  /* 第一區塊 + 群組並排；以單一 gap 控制兩者距離（群組內三欄維持等寬等間距） */
  .site-footer__main {
    display: flex;
    align-items: flex-start;
    gap: 7rem;                  /* 群組與第一區塊的距離（加大） */
  }
  .footer-brand { flex: 0 0 20rem; }   /* 第一區塊固定寬度：加大間距時不會被擠到變形 */
  .footer-cols { flex: 1; gap: 3.5rem; }
}

/* 品牌欄 */
.footer-brand__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.footer-brand__name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #FFFFFF;
}
.footer-brand__name small {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--color-muted-light);
}
.footer-brand__desc {
  max-width: 34rem;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--color-muted-light);
}
.footer-social {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: #FFFFFF;                           /* 一般：白色 icon、灰底 */
  background-color: var(--color-dark-3);
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}
.footer-social a:hover {                     /* hover：橘色 + 微微上浮 */
  background-color: var(--color-primary);
  color: #FFFFFF;
  transform: translateY(-3px);
}
.footer-social a:active {                    /* 按下：縮小，產生按壓回饋 */
  transform: scale(0.9);
}
.footer-social svg { width: 1.4rem; height: 1.4rem; }

/* 欄位標題（底線橘色點綴） */
.footer-col__title {
  position: relative;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  color: #FFFFFF;
}
.footer-col__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background-color: var(--color-primary);
}

/* 連結清單 */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.footer-links a {
  font-size: 0.9375rem;
  color: var(--color-muted-light);
  transition: color .2s ease, padding-left .2s ease;
}
.footer-links a:hover {
  color: var(--color-primary);
  padding-left: 4px;
}

/* 聯絡資訊 */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-muted-light);
}
.footer-contact svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-primary);
}
.footer-contact a { transition: color .2s ease; }
.footer-contact a:hover { color: var(--color-primary); }

/* 底部版權列（灰色，與社群按鈕一般色一致；高度較矮） */
.site-footer__bottom { background-color: var(--color-dark-3); }
.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  padding-block: 0.75rem;        /* 版權列高度改矮 */
  font-size: 0.875rem;
  color: var(--color-muted-light);
}
@media (max-width: 767.98px) {
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .site-footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;     /* 平板：版權置左 */
    text-align: left;
  }
}

/* ==========================================
   14. 全局共用：CTA 區塊（背景圖 + 暗色斜切遮罩；首頁、關於我們等多頁共用）
   遮罩比照 Hero 作法，捲入視窗時自右側滑入（.is-revealed 由 script.js 加上）
   ========================================== */
.cta {
  position: relative;
  overflow: hidden;
  background-color: var(--color-dark);   /* 圖片載入前的底色 */
}
.cta__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;   /* 可改成 X% Y% 微調定位 */
}
/* 桌機：背景固定（捲動時背景不動、內容滑過，產生視差感）
   手機不套用（iOS 不支援 background-attachment:fixed，且易有效能問題） */
@media (min-width: 1024px) {
  .cta__bg { background-attachment: fixed; }
}
/* 暗色遮罩：手機全幅深色（保文字可讀）；桌機改左下斜切多邊形、右側漸淡讓背景露出 */
/* 遮罩靜態（比照 page-hero 的 .page-hero__mask，不滑動）；文字改用遮罩翻起，故毋需遮罩動畫 */
.cta__mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(27, 31, 43, .8) 0%, rgba(27, 31, 43, .68) 100%);
}
@media (min-width: 1280px) {
  /* 斜切遮罩只在 ≥1280 套用；1024–1279 與平板維持全幅深色，避免文字戳出斜邊到亮部 */
  .cta__mask {
    background: linear-gradient(90deg,
      rgba(var(--color-dark-rgb), .35) 0%,
      rgba(27, 31, 43, .78) 40%,
      rgba(27, 31, 43, .85) 100%);
    clip-path: polygon(35% 0, 100% 0, 100% 100%, 52% 100%);
  }
}
.cta__inner {
  position: relative;
  z-index: 2;
  padding-block: 6.5rem;
}
@media (max-width: 767.98px) {
  .cta__inner { padding-block: 4.5rem; }
}
.cta__content { max-width: 38rem; }
@media (min-width: 1280px) {
  .cta__content { margin-left: auto; }   /* 大桌機：內容移到右側暗區 */
}
/* 內容文字進場：改用「遮罩翻起」（效果同 page-hero）—— 小標＋標題加 .reveal-up，由 setupReveal 處理。
   整塊不再淡入上移，避免蓋掉翻起。 */
.cta__title {
  margin-top: 0.5rem;
  line-height: 1.3;   /* 比區塊標題略緊；其餘字體沿用共用 .section-title */
}
.cta__desc {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-muted-light);
  line-break: strict;        /* 中文禁則：標點不落行首/行尾 */
}
.cta__btn { margin-top: 2rem; }
/* 斜角遮罩：捲入視窗時自右側滑入（方向與 Hero 遮罩相反；.is-revealed 由 initCtaMask 加上）
   只在 ≥1280（有斜切時）animate；<1280 維持就位。有 JS 才套初始位移，無 JS 不藏遮罩確保可讀 */
@media (min-width: 1280px) {
  .js .cta__mask {
    transform: translateX(100%);
    transition: transform 1.1s var(--ease-out);
    will-change: transform;
  }
  .js .cta.is-revealed .cta__mask { transform: translateX(0); }
}
@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
  .js .cta__mask { transform: none; transition: none; }
}

/* ==========================================
   15. 全局共用：數據展示（深色數據條；首頁、關於我們等共用）
   數字捲到視窗內由 0 跑到目標值（script.js initCounters）
   ========================================== */
.stats {
  background-color: var(--color-dark);
  padding-block: 3.5rem;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* 手機 2 欄 */
  gap: 2.75rem 1rem;
}
@media (min-width: 1024px) {
  .stats__grid { grid-template-columns: repeat(4, 1fr); }   /* 桌機 4 欄 */
}
.stat {
  overflow: hidden;          /* 遮罩：內層 .stat__rv 由下往上俐落翻起 */
}
/* 內層：承接原 .stat 的 flex 版面；上捲進場（翻完才由 JS 啟動數字計數） */
.stat__rv {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transform: translateY(110%);
  transition: transform .6s var(--ease-out);
  will-change: transform;
}
.stats.is-revealed .stat__rv { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .stat__rv { transform: none; transition: none; }   /* 減少動畫：直接顯示 */
}
.stat__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-primary);
}
.stat__icon svg { width: 2.75rem; height: 2.75rem; stroke-width: 1.5; }
.stat__num {
  display: block;
  font-family: var(--font-display);                       /* Barlow */
  font-weight: 600;
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: #FFFFFF;
}
.stat__label {
  margin-top: .45rem;
  font-size: 1rem;
  color: var(--color-muted-light);
}

/* ==========================================
   16. 全局共用：產品/項目卡片（首頁型錄、關於我們認證共用）
   圖片右下切角、hover 上浮+圖片放大；寬度由外層容器（grid/carousel）決定
   ========================================== */
.product-card {
  display: flex;
  flex-direction: column;
  transition: transform .3s ease;
}
.product-card:hover { transform: translateY(-4px); }
/* 帶 data-id 的卡片／清單列＝整塊可點進產品內頁（導頁由 script.js 委派）：空白處顯示指標游標
   首頁熱門產品、產品型錄頁皆適用；無 data-id 的卡片（關於我們認證等）不受影響 */
.product-card[data-id],
.product-row[data-id] { cursor: pointer; }
.product-card__media {
  --clip: 44px;            /* 右下斜切角（不影響全站 --clip） */
  position: relative;      /* hover 浮層定位容器 */
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-card:hover .product-card__media img { transform: scale(1.05); }
.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.75rem 0 0;
}
.product-card__tag {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}
.product-card__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
}
/* 名稱可點進產品內頁（繼承字色、hover 變橘） */
.product-card__name a {
  color: inherit;
  transition: color .2s ease;
}
.product-card__name a:hover { color: var(--color-primary); }
.product-card__spec {
  margin-top: 0.4rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-muted);
}

/* 分類標籤膠囊（共用：型錄列表頁、產品詳情頁）：淺橘底＋橘字、零圓角；不可斷字 */
.cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: normal;
  white-space: nowrap;
  color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), 0.1);
}

/* ==========================================
   17. 產品卡片 hover 浮層 + 兩顆動作按鈕（共用：型錄列表頁、產品詳情頁相關產品）
   ========================================== */
.product-card__media-link {
  display: block;
  width: 100%;
  height: 100%;
}
/* hover 浮層：深色半透明底，置中兩顆按鈕 */
.product-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  padding: 0.75rem;
  background-color: rgba(var(--color-dark-rgb), 0.55);   /* --color-dark 半透明 */
  opacity: 0;
  transition: opacity .3s ease;
}
.product-card:hover .product-card__overlay {
  opacity: 1;
}
.product-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 0.85rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  border: 1px solid var(--color-primary);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.product-card__btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
/* 查看詳情：白色外框白字（壓在深色浮層上），hover 填滿橘 */
.product-card__btn--detail {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.7);
  background-color: transparent;
}
.product-card__btn--detail:hover {
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
/* 加入詢價單：實心橘，hover 加深 */
.product-card__btn--inquiry {
  color: #FFFFFF;
  background-color: var(--color-primary);
}
.product-card__btn--inquiry:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
/* 觸控裝置（無 hover）：隱藏浮層，改由點擊圖片進入產品詳情頁 */
@media (hover: none) {
  .product-card__overlay { display: none; }
}

/* ==========================================
   18. 文章卡片（共用：首頁最新消息、文章專區頁）
   圖片 + 往上交錯的白底文字框（右下切角）；hover 內層變橘、文字轉白
   ========================================== */
.article-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 640px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .article-grid { grid-template-columns: repeat(3, 1fr); }
}
.article-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.article-card__media {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.article-card:hover .article-card__media img { transform: scale(1.05); }
/* 文字框分兩層：外層 __body 定位/位移 + drop-shadow（不可有 clip-path）；內層 __panel 白底 + 切角 + 內容 */
.article-card__body {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  width: calc(100% - 3rem);
  margin: -4.5rem auto 0;
  filter: drop-shadow(var(--shadow-md));
  transition: filter .3s ease, transform .3s ease;
}
/* 手機：壓在圖片上的內容框加寬一些（左右內縮 1.5rem → 1rem） */
@media (max-width: 767.98px) {
  .article-card__body { width: calc(100% - 2rem); }
}
.article-card__panel {
  --clip: 44px;
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 1.5rem 1.5rem 2rem;
  background-color: var(--color-surface);
  transition: background-color .3s ease, color .3s ease;
}
.article-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  color: var(--color-muted);
  margin-bottom: 0.75rem;
}

.article-card__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--color-text);
}
.article-card__excerpt {
  margin-top: 0.6rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.article-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-primary);
}
.article-card__more svg {
  width: 1rem;
  height: 1rem;
  transition: transform .25s ease;
}
/* hover：內層變橘、文字轉白；外層陰影加深並輕微上浮 */
.article-card:hover .article-card__body {
  filter: drop-shadow(var(--shadow-lg));
  transform: translateY(-6px);
}
.article-card:hover .article-card__panel { background-color: var(--color-primary); }
.article-card:hover .article-card__meta,
.article-card:hover .article-card__title,
.article-card:hover .article-card__excerpt,
.article-card:hover .article-card__more { color: #FFFFFF; }
.article-card:hover .article-card__more svg { transform: translateX(4px); }
/* 文章卡片內的分類膠囊：hover（橘底）時轉白底橘字，維持可讀 */
.article-card:hover .cat-chip {
  background-color: #FFFFFF;
  color: var(--color-primary);
}

/* ==========================================
   19. 分頁（共用：產品列表頁、文章專區頁）
   ========================================== */
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3rem;
}
.pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 0.5rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.pagination__btn:hover:not(:disabled):not(.is-active) {
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.pagination__btn.is-active {
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination__btn svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* ==========================================
   20. 卡片輪播機制（共用：產品詳情相關產品、文章詳情相關文章）
   viewport 滿版裁切、track 橫向；箭頭通常置於區塊標題列右上（.card-carousel__nav）
   ========================================== */
.card-carousel {
  position: relative;
}
.card-carousel__viewport {
  overflow: hidden;
}
.card-carousel__track {
  display: flex;
  gap: 1.25rem;          /* 對應 JS 的 GAP=20px */
  will-change: transform;
}
.card-carousel__track > * {
  flex: 0 0 auto;        /* 卡片寬度由 JS 依每頁數設定 */
}
.card-carousel__nav {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.card-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.card-carousel__arrow:hover {
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.card-carousel__arrow svg { width: 1.25rem; height: 1.25rem; }
/* 輪播箭頭位置：預設頂部右上（.card-carousel__nav--top）；
   大螢幕（≥1536，版心兩側留白）改放左右側邊、垂直置中（.card-carousel__arrow--side） */
.card-carousel__arrow--side { display: none; }
@media (min-width: 1536px) {
  .card-carousel__nav--top { display: none; }
  .card-carousel__arrow--side {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .card-carousel__arrow--side--prev { left: -3.5rem; }
  .card-carousel__arrow--side--next { right: -3.5rem; }
}

/* ==========================================
   21. 產品卡片網格 + 分類下拉（共用）
   首頁型錄區塊與產品型錄頁共用。
   （首頁專屬的分類按鈕 .cat-nav/.cat-btn 在 index.css；
     產品頁專屬的分類側欄 .cat-filter 在 products.css）
   ========================================== */
/* 分類下拉選單（窄平板與手機用；桌機隱藏） */
.cat-select-wrap {
  display: none;
  position: relative;
}
.cat-select {
  width: 100%;
  padding: 0.875rem 2.75rem 0.875rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-bg-alt);   /* 與分類按鈕一致：灰底、零圓角 */
  border: none;
  border-radius: var(--radius);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
/* 自訂下拉箭頭（CSS 三角形，取代瀏覽器預設） */
.cat-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* 產品卡片網格 */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

/* 窄平板與手機（<1024）：顯示分類下拉選單（各頁的桌機分類清單於各自 CSS 隱藏） */
@media (max-width: 1023.98px) {
  .cat-select-wrap { display: block; }
}
/* 大手機以上：產品兩欄 */
@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}
/* 桌機：產品三欄 */
@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================
   空狀態 / 找不到頁（共用：搜尋無結果、清單空、找不到產品/文章）
   ========================================== */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem;
  color: var(--color-muted);
}
.empty-state svg {
  width: 3rem;
  height: 3rem;
  color: var(--color-muted-light);
  margin-bottom: 1.25rem;
}
.empty-state__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
}
.empty-state__desc {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.7;
}
.empty-state .btn { margin-top: 1.5rem; }
/* 找不到頁：外層較大留白、標題較大 */
.empty-page { padding-block: var(--space-section); }
.empty-page .empty-state__title { font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }

/* ==========================================
   麵包屑列（共用：產品詳情 / 文章詳情 等淺色頂端頁面）
   深色橫條 + 通用工業圖 + 遮罩；頂端深色 → 頁首沿用全站預設行為
   ========================================== */
.crumb-bar {
  padding-top: 7rem;
  padding-bottom: 1.25rem;
  background-color: var(--color-dark);
  background-image:
    linear-gradient(rgba(var(--color-dark-rgb), .82), rgba(var(--color-dark-rgb), .82)),
    url('images/cta-automation.jpg');
  background-size: cover;
  background-position: center;
}
.crumb-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-muted-light);
}
.crumb-bar a { color: var(--color-muted-light); transition: color .2s ease; }
.crumb-bar a:hover { color: var(--color-primary); }
.crumb-bar__sep { color: rgba(255, 255, 255, .35); }
.crumb-bar__current { color: #FFFFFF; font-weight: 500; }

/* ########################################################################
   22. 頁面專屬樣式 PAGE-SPECIFIC（各頁原獨立 CSS 已合併於此）
   每段皆為該頁專屬選擇器，不影響其他頁。
   ######################################################################## */

/* ========================================================================
   PAGE 頁面：index.html
   ======================================================================== */
/* ------------------------------------------
   區塊 1：Hero 高度（手機矮、平板中、桌機 800px）
   ------------------------------------------ */
.hero {
  min-height: 640px;
}
/* 手機：內容往下帶（補償固定頁首遮住上方 + 箭頭移進內容後內容偏高），讓文字不會太靠上 */
@media (max-width: 767.98px) {
  .hero { padding-top: 4.5rem; }
}
@media (min-width: 768px)  { .hero { min-height: 700px; } }
@media (min-width: 1024px) { .hero { min-height: 800px; } }

/* ------------------------------------------
   區塊 1：Hero 背景輪播（3 張製造業圖，crossfade）
   ------------------------------------------ */
.hero-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-dark); /* 圖片載入前的底色，避免閃白 */
  transition: opacity 1s ease;          /* 進場：背景先淡入 */
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero-slide.is-active { opacity: 1; }

/* 緩慢 Ken Burns 推近（尊重減少動畫偏好） */
@media (prefers-reduced-motion: no-preference) {
  .hero-slide {
    transform: scale(1.06);
    transition: opacity 1.2s ease-in-out, transform 6s ease-out;
  }
  .hero-slide.is-active { transform: scale(1); }
}

/* ------------------------------------------
   區塊 1：hero-mask 遮罩形狀（比照 hero-mask.png）
   手機：全幅深色漸層（保文字可讀）
   桌機：向右收尖的五邊形，右側漸淡讓輪播圖露出
   ------------------------------------------ */
.hero-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(27, 31, 43, .9) 0%, rgba(27, 31, 43, .78) 100%);
  transition: transform .9s var(--ease-out) .25s; /* 進場：遮罩從左滑入 */
}
/* ≥1280px 才出現尖角五邊形遮罩；1024–1279（含一般平板）維持整片深色底，
   避免敘述文字跑出三角外 */
@media (min-width: 1280px) {
  .hero-mask {
    width: 64%;
    inset: 0 auto 0 0;
    clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
    background: linear-gradient(100deg,
      rgba(27, 31, 43, .97) 0%,
      rgba(var(--color-dark-rgb), .92) 52%,
      rgba(54, 60, 78, .55) 100%);
  }
}

/* ------------------------------------------
   區塊 1：Hero 頂部漸層暗化
   避免背景圖較亮時，頂部固定導覽列（白字／Logo）看不清楚
   只暗化最上方、向下淡出至透明，不影響中段主視覺與文字
   疊在背景與遮罩之上、內容（z-10）與箭頭（z-20）之下
   ------------------------------------------ */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(var(--color-dark-rgb), .6) 0%,
    rgba(var(--color-dark-rgb), .25) 14%,
    rgba(var(--color-dark-rgb), 0) 32%);
}

/* ------------------------------------------
   區塊 1：Hero 進場序列
   背景先淡入 → 遮罩從左滑入 → 文字區上移淡入
   （初始隱藏狀態只在 .js 下套用，無 JS 時內容照常顯示）
   ------------------------------------------ */
.hero-content {
  padding-inline: 0;              /* 手機：箭頭已移到下方，左右滿版（僅留容器邊距） */
  text-align: center;             /* 手機：內容置中 */
}
.hero-text { margin-top: 1.5rem; }                           /* 文字組上方多留一點呼吸空間 */
.hero-content .hero-desc { margin-inline: auto; }            /* 手機：敘述置中 */
.hero-actions { justify-content: center; align-items: stretch; } /* 手機：按鈕全寬堆疊 */
.hero-actions .btn {                                          /* 手機：按鈕小一號、全寬 */
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6rem 1.4rem;
  font-size: 0.875rem;
}

/* 平板以上：改為靠左排版（解決文字置中/靠右問題，與桌機一致） */
@media (min-width: 768px) {
  .hero-content {
    padding-inline: 0;            /* 平板/桌機：文字靠齊版心左緣（箭頭已移到下方，全裝置一致） */
    text-align: left;
  }
  .hero-content .hero-desc { margin-inline: 0; }
  .hero-actions { justify-content: flex-start; align-items: flex-start; }
  .hero-actions .btn {            /* 平板以上：自動寬度、標準尺寸 */
    width: auto;
    min-height: 3rem;
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
}
.js .hero-carousel { opacity: 0; }
.js .hero-mask { transform: translateX(-105%); }
.js .hero-content { opacity: 0; }                        /* 先隱藏整塊避免閃爍；文字逐行揭露由 GSAP 控制 */

.hero.is-loaded .hero-carousel { opacity: 1; }
.hero.is-loaded .hero-mask { transform: translateX(0); }
.hero.is-loaded .hero-content { opacity: 1; }            /* 即時顯示容器（無延遲），不再整塊淡入 */

/* 手機版：移除 Hero 遮罩滑入動態（遮罩直接就位、不滑動）；平板/桌機維持 */
@media (max-width: 767.98px) {
  .js .hero-mask,
  .hero.is-loaded .hero-mask { transform: none; transition: none; }
}

/* ------------------------------------------
   區塊 1：Hero 文字逐行遮罩揭露（往上翻起；由 GSAP 驅動；全裝置適用）
   .ln 各裝置皆為 block（見下方），遮罩翻起在手機/平板/桌機一致生效
   ------------------------------------------ */
.hero-eyebrow,
.hero-title .ln { overflow: hidden; }
.hero-rv { display: block; will-change: transform; }

/* ------------------------------------------
   區塊 1：Hero 文字排版
   ------------------------------------------ */
.hero-eyebrow {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.hero-title {
  font-family: var(--font-heading);
  font-weight: 500;                                   /* 細一號 */
  line-height: 1.25;
  color: #FFFFFF;
  font-size: clamp(1.6rem, 1rem + 2.8vw, 3.25rem);
  text-wrap: balance;                                 /* 自動平衡每行長度 */
}
.hero-title .ln { display: block; }                          /* 各裝置固定兩行（供逐行遮罩翻起；過長會在行內自動換行） */
.hero-title .ln-m { display: inline; white-space: nowrap; }  /* 強調詞不被拆斷 */
.hero-desc {
  margin-top: 1.5rem;
  max-width: 40rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: rgba(255, 255, 255, .88);                    /* 比 muted 更白、更清楚 */
}

/* ------------------------------------------
   區塊 1：Hero 手動輪播箭頭（在內容流中、跟在按鈕下方）
   手機：置中；平板/桌機：靠左（隨內容對齊版心左緣）
   ------------------------------------------ */
.hero-nav {
  display: flex;
  gap: 0.5rem;
  margin-top: 2.75rem;
  justify-content: center;     /* 手機：置中 */
}
@media (min-width: 768px) {
  .hero-nav { justify-content: flex-start; }   /* 平板/桌機：靠左 */
}
.hero-arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;   /* 手機：較小 36px */
  height: 2.25rem;
  color: #FFFFFF;
  background-color: rgba(var(--color-dark-rgb), .45);
  border: 1px solid rgba(255, 255, 255, .4);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.hero-arrow:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.hero-arrow svg { width: 1rem; height: 1rem; }
@media (min-width: 1024px) {
  .hero-arrow { width: 3rem; height: 3rem; }       /* 桌機：48px */
  .hero-arrow svg { width: 1.25rem; height: 1.25rem; }
}

/* ------------------------------------------
   尊重「減少動畫」偏好：直接顯示、不位移
   （用 .js 前綴對齊初始隱藏規則的權重，確保可覆蓋）
   ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .js .hero-carousel,
  .js .hero-mask,
  .js .hero-content,
  .js .hero-text,
  .hero-slide {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ============================================================
   區塊 2：關於我們／核心優勢（左圖 + 右文）
   ============================================================ */
.about {
  padding-top: 3.5rem;                  /* 平板/手機：上下收窄一些 */
  padding-bottom: 5rem;
}
/* 右下角灰階向量底紋（與 OUR JOURNEY 同款同位置）：放射狀緩和淡出、邊界融入白底 */
.about::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(900px, 60%);
  aspect-ratio: 3675 / 2543;
  background: url('images/bg-graphic.svg') no-repeat bottom right / cover;
  opacity: 0.4;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(115% 115% at bottom right, #000 3%, transparent 62%);
  mask-image: radial-gradient(115% 115% at bottom right, #000 3%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
/* 手機：下方再窄一些 */
@media (max-width: 767.98px) {
  .about { padding-bottom: 3.5rem; }
}
/* 桌機：上下間隔再開一些 */
@media (min-width: 1024px) {
  .about {
    padding-top: 6.5rem;
    padding-bottom: 7.5rem;
  }
}

/* 右下角裝飾：淡電路紋路 */

/* 左：人物照 */
.about-media { position: relative; }
.about-media__frame {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.about-media__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 桌機：左圖稍微縮小（比例 1/1 不變、靠左，右側多留白） */
@media (min-width: 1024px) {
  .about-media__frame { width: 94%; }
}

/* 25+ 徽章（橘底、右上切角，drop-shadow 跟隨切角形狀） */
.stat-badge {
  position: absolute;
  left: 0;              /* 平板/手機：對齊圖片左緣 */
  bottom: -3.5rem;      /* 往下到完整蓋住圖片左下角（需蓋過切角深度 3.25rem） */
  width: max-content;
  max-width: 13rem;     /* 文字寬度再窄一些 */
  padding: 2.5rem 1.75rem 2.25rem;       /* 由內部文字撐開，四周留白 */
  text-align: center;                    /* 文字置中（比照 02-01） */
  background-color: var(--color-primary);
  color: #FFFFFF;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .22));
  /* 左下角深切角（比照 02-01）；drop-shadow 會跟隨此形狀 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 3.25rem 100%, 0 calc(100% - 3.25rem));
}
.stat-badge__num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
}
.stat-badge__plus { font-size: 1.75rem; }
.stat-badge__label {
  margin-top: .85rem;   /* 25+ 與下方文字距離再開一點 */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
}
.stat-badge__desc {
  margin-top: .25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}

/* 右：標題與敘述 */
.about-title {
  margin-top: 6px;                 /* 與上方英文小標的間距 */
}
.about-lead {
  margin-top: 1.25rem;
  color: var(--color-muted);
  font-size: 1.0625rem;
  line-height: 1.9;
}

/* 特色項目 */
.about-features {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.feature { display: flex; gap: 1.1rem; align-items: flex-start; }
.feature__icon {                       /* 無背景、放大 */
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-primary);
}
.feature__icon svg { width: 2.5rem; height: 2.5rem; }
.feature__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
}
.feature__desc {
  margin-top: .35rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-muted);
}

/* CTA 按鈕間距 */
.about-cta { margin-top: 2.25rem; }

/* 手機：徽章不超出視窗、縮小 */
/* 電腦版（≥1280）：徽章調回外凸版本 */
@media (min-width: 1280px) {
  .stat-badge {
    left: -2rem;
    bottom: -2rem;
  }
}

/* 手機：徽章下方加高、數字縮小（left / bottom 沿用 base 的齊平＋下移） */
@media (max-width: 767px) {
  .stat-badge {
    padding: 2rem 1.5rem 2.75rem;
  }
  .stat-badge__num { font-size: 2.25rem; }
}

/* 區塊 3：數據展示 — 已移至 style.css（跨頁共用元件，about 等頁面也會用到） */

/* ============================================================
   區塊 4：應用產業（棋盤交錯：照片 + hover 變橘的文字卡）
   ============================================================ */
.apps {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
  background-color: var(--color-bg);
}
@media (max-width: 1023px) { .apps { padding-top: 4.5rem; } }                 /* 平板：上方留白略減 */
@media (max-width: 767px)  { .apps { padding-top: 2.5rem; padding-bottom: 3.5rem; } }  /* 手機：明顯減 */

/* 上半：小標獨立一行；標題與敘述並排、頂端對齊 */
.apps__head {
  margin-bottom: 3.5rem;
}
@media (max-width: 767px) { .apps__head { margin-bottom: 2rem; } }   /* 手機：標題區與棋盤間距縮小 */
.apps__head-row { display: grid; gap: 1.25rem; }
@media (min-width: 1024px) {
  .apps__head-row {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;        /* 右側敘述與左側「標題」頂端對齊（非英文小標） */
  }
}
.apps__title {
  margin-top: 0;
}
.apps__lead {
  color: var(--color-muted);
  font-size: 1.0625rem;
  line-height: 1.9;
}

/* 棋盤交錯網格：手機 1 欄（圖上文下）、平板 2 欄棋盤、桌機 4 欄棋盤
   DOM 為「圖→文」配對順序（利於手機與無障礙）；平板/桌機用 order 重排成交錯棋盤 */
.apps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;                       /* 棋盤格之間無間隔 */
}
/* 平板：2 欄棋盤（圖|文 → 文|圖 交錯） */
@media (min-width: 768px) {
  .apps__grid { grid-template-columns: repeat(2, 1fr); }
  .apps__grid > :nth-child(1) { order: 1; }
  .apps__grid > :nth-child(2) { order: 2; }
  .apps__grid > :nth-child(3) { order: 4; }
  .apps__grid > :nth-child(4) { order: 3; }
  .apps__grid > :nth-child(5) { order: 5; }
  .apps__grid > :nth-child(6) { order: 6; }
  .apps__grid > :nth-child(7) { order: 8; }
  .apps__grid > :nth-child(8) { order: 7; }
}
/* 桌機：4 欄棋盤（≥1280 才切 4 欄，避免窄桌機擠壓解體） */
@media (min-width: 1280px) {
  .apps__grid { grid-template-columns: repeat(4, 1fr); }
  .apps__grid > :nth-child(3) { order: 3; }
  .apps__grid > :nth-child(4) { order: 4; }
  .apps__grid > :nth-child(5) { order: 6; }
  .apps__grid > :nth-child(6) { order: 5; }
  .apps__grid > :nth-child(7) { order: 8; }
  .apps__grid > :nth-child(8) { order: 7; }
}

/* 手機：圖與其文字成一組緊貼；組與組之間留一致間隔（上下相同）。只在手機 */
@media (max-width: 767.98px) {
  .apps__grid > .apps__media:not(:first-child) { margin-top: 2rem; }
}

/* 照片格：手機用 4:3 給高度；平板以上高度改由同列文字卡決定、照片填滿 */
.apps__media {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
@media (min-width: 768px) {
  .apps__media { aspect-ratio: auto; }
}
.apps__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.apps__media:hover img { transform: scale(1.05); }

/* 產業文字卡：白底 → hover 變橘；右下角 45° 斜切角 */
.industry {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* 手機：內容靠上，避免上方留白過多 */
  padding: 1.5rem;
  background-color: var(--color-surface);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%);  /* 右下 45° 斜切角，加深 */
  transition: background-color .6s cubic-bezier(.4, 0, .2, 1);   /* 橘色底切換更緩、更平滑 */
}
@media (min-width: 768px) {
  .industry {
    justify-content: center;     /* 平板以上：內容置中於加高的格子 */
    padding: 2rem;
    min-height: 20rem;           /* 格子加高；同列照片會撐到同高 */
  }
}
.industry__icon { color: var(--color-primary); transition: color .3s ease; }
.industry__icon svg { width: 2.75rem; height: 2.75rem; }
.industry__title {
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
  transition: color .3s ease;
}
.industry__desc {
  margin-top: .5rem;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-muted);
  transition: color .3s ease;
}
.industry:hover { background-color: var(--color-primary); }
.industry:hover .industry__icon,
.industry:hover .industry__title,
.industry:hover .industry__desc { color: #FFFFFF; }

.apps__cta {
  margin-top: 3rem;
  text-align: center;
}
@media (max-width: 767px) { .apps__cta { margin-top: 1.5rem; } }   /* 手機：按鈕與上方間隔縮小 */

/* ============================================================
   區塊 5：核心優勢（灰底；左圖 + 右橘色面板）
   ============================================================ */
.advantages {
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);    /* 灰底 */
}
@media (max-width: 767.98px) {
  .advantages { padding-block: 3.5rem; }    /* 手機：縮小區塊上下間隔（96px → 56px） */
}
.advantages__head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 1.5rem;        /* 手機：縮小區塊上方間隔 */
}
@media (min-width: 768px) {
  .advantages__head { margin-bottom: 3rem; }   /* 平板以上回復較大間距 */
}

/* 內容：手機堆疊；桌機「橘 panel 右上 × 圖片左下角」對角交錯重疊 */
.advantages__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.advantages__media {
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.advantages__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.advantages__panel {
  background-color: var(--color-primary);
  color: #FFFFFF;
  padding: 2.25rem;
  /* 右下 45° 斜切角 */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 56px), calc(100% - 56px) 100%, 0 100%);
}
/* 較窄桌機（1024–1279px）：圖片與 panel「平行交疊」，垂直置中、不做對角交錯
   （未滿 1024px 的平板沿用基本的上下堆疊，與手機一致） */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .advantages__body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;         /* 垂直置中對齊 → 平行 */
    gap: 0;
  }
  .advantages__panel {
    grid-column: 5 / 13;
    grid-row: 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.5rem 2.5rem 2.5rem 8rem;   /* 較窄螢幕縮減內距 */
  }
  .advantages__media {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: center;          /* 平行交疊：圖片不向下偏移 */
    z-index: 2;
    box-shadow: var(--shadow-lg);
  }
}

/* 寬桌機（≥1280px）：橘 panel 右上 × 圖片左下角「對角交錯」重疊 */
@media (min-width: 1280px) {
  .advantages__body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
    gap: 0;
    padding-bottom: 3rem;       /* 預留圖片向下凸出的空間，避免被裁切 */
  }
  /* 橘色 panel：靠右上、較寬；左側多留白讓開壓上來的圖片 */
  .advantages__panel {
    grid-column: 5 / 13;
    grid-row: 1;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;     /* 內文在橘色區塊中垂直置中 */
    padding: 3.25rem 4.5rem 3.25rem 11rem;   /* 左右內距加大；左側額外留白讓壓上來的圖片與內文保持距離 */
  }
  /* 圖片：左下角、壓在 panel 上方，並向下／延後交錯凸出（放大為 5 欄） */
  .advantages__media {
    grid-column: 1 / 6;
    grid-row: 1;
    align-self: end;
    z-index: 2;
    margin-top: 3rem;           /* 上緣比 panel 低 → 對角交錯 */
    margin-bottom: -3rem;       /* 下緣比 panel 低 → 對角交錯 */
    box-shadow: var(--shadow-lg);
  }
}

/* 勾選清單 */
.adv-list { display: flex; flex-direction: column; gap: 1.75rem; }
.adv-item { display: flex; gap: 1rem; }
.adv-item__icon { flex-shrink: 0; color: #FFFFFF; line-height: 1; }
.adv-item__icon svg { width: 1.75rem; height: 1.75rem; }
.adv-item__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: #FFFFFF;
}
.adv-item__desc {
  margin-top: .35rem;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, .88);
}

/* ============================================================
   區塊 6：產品分類 × 熱門產品
   左：分類清單（hover / 選取變橘）；右：該分類熱門產品卡片
   ============================================================ */
.catalog {
  padding-block: var(--space-section);
  background-color: var(--color-bg);     /* 白底，與上方灰底區塊交替 */
}
@media (max-width: 767.98px) {
  .catalog { padding-block: 3.5rem; }
}

/* 標題列：左標題、右「完整型錄」CTA（手機換行） */
.catalog__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.catalog__all { flex-shrink: 0; }

/* 完整型錄 CTA：手機版隱藏頭部那顆、改用區塊底部滿版那顆 */
.catalog__all-mobile { display: none; }
@media (max-width: 767.98px) {
  .catalog__all { display: none; }
  .catalog__all-mobile {
    display: inline-flex;
    width: 100%;
    margin-top: 1.5rem;
  }
}

/* 內容：手機上下堆疊；桌機左分類 + 右產品 */
.catalog__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 左：分類清單（首頁專屬：整顆橘色大按鈕；窄螢幕改用共用的 .cat-select 下拉）
   下拉 .cat-select、產品網格 .product-grid 與 .product-card 系列在 style.css 共用 */
.cat-nav {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.cat-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 0.875rem 1.25rem;        /* 高度降低一些 */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
  text-align: left;
  color: var(--color-text);
  background-color: var(--color-bg-alt);   /* 一般狀態：灰底、無邊框 */
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.cat-btn__arrow {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  opacity: .4;
  transition: opacity .25s ease, transform .25s ease;
}
/* hover 或 選取：整顆變橘、白字、箭頭顯現 */
.cat-btn:hover,
.cat-btn.is-active {
  background-color: var(--color-primary);
  color: #FFFFFF;
}
.cat-btn:hover .cat-btn__arrow,
.cat-btn.is-active .cat-btn__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* 窄平板與手機（<1024）：分類按鈕清單改為下拉選單 */
@media (max-width: 1023.98px) {
  .cat-nav { display: none; }
}

/* 桌機：左分類欄 + 右產品（產品三欄由 style.css 的 .product-grid 控制） */
@media (min-width: 1024px) {
  .catalog__body {
    display: grid;
    grid-template-columns: minmax(240px, 288px) 1fr;
    gap: 2.5rem;
    align-items: start;
  }
}

/* ============================================================
   區塊 7：合作廠商 LOGO 牆（暗色底、可輪播）
   ============================================================ */
/* ==========================================
   GSAP 捲動進場：元素先隱藏，捲到時由 script.js（initHomeMotion）揭露
   補強 AOS 未涵蓋的 Hero 與各區塊標題；僅 .js（有 JS）時隱藏，避免無 JS 時內容被藏住
   ========================================== */
.js [data-gsap] { opacity: 0; }
.js [data-gsap="fade-up"] { transform: translateY(40px); }
.js [data-gsap="fade-right"] { transform: translateX(-50px); }
.js [data-gsap="fade-left"] { transform: translateX(50px); }
@media (prefers-reduced-motion: reduce) {
  .js [data-gsap] { opacity: 1; transform: none; }   /* 尊重減少動畫：直接顯示 */
}

.logos {
  padding-top: calc(var(--space-section) + 1rem);   /* 上方多留一點空間 */
  padding-bottom: var(--space-section);
  background-color: var(--color-dark);     /* 暗色底 */
}
@media (max-width: 767.98px) {
  .logos { padding-block: 3.5rem; }
}
.logos__head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 4rem;          /* 與下方輪播保持足夠間隔（不因 LOGO 較小而縮減） */
}

.logos__lead {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-muted-light);
}

/* 輪播容器：左右箭頭 + 中間可視區 */
.logos__carousel {
  position: relative;   /* 供 ≥1536 側邊箭頭絕對定位（同 .card-carousel） */
  display: flex;
  align-items: center;
  gap: 1rem;
}
.logos__viewport {
  flex: 1;
  overflow: hidden;
}
.logos__track {
  display: flex;
  gap: 1.5rem;
  transition: transform .5s ease;   /* 分頁輪播：一次平移一個項目 */
}

/* 單一 LOGO（單色字標 + 幾何標記） */
.logo-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  height: 5.5rem;
  padding-inline: 0.5rem;
  color: var(--color-muted-light);          /* 暗底上的淺灰，hover 轉白 */
  opacity: .7;
  transition: color .25s ease, opacity .25s ease;
  /* 手機：一次顯示 1 個 */
  width: 100%;
}
.logo-item:hover {
  color: #FFFFFF;
  opacity: 1;
}
/* LOGO 圖檔（白色 SVG；灰→白由 .logo-item 的 opacity 控制） */
.logo-item__img {
  height: 2.5rem;          /* 顯示高度；寬度依各 LOGO 比例自動 */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* 輪播箭頭（暗底；hover 變橘） */
.logos__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #FFFFFF;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.logos__arrow:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.logos__arrow svg {
  width: 1.25rem;
  height: 1.25rem;
}
/* logos 箭頭 RWD：≥1536 兩側flanking；<1536 置中於 LOGO 下方 */
.logos__arrow--side { display: none; }
.logos__nav-bottom {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
@media (min-width: 1536px) {
  /* 桌機：LOGO 滿版同版心，箭頭移到版面外兩側（同最新消息）*/
  .logos__arrow--side {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .logos__arrow--prev { left: -3.5rem; }
  .logos__arrow--next { right: -3.5rem; }
  .logos__nav-bottom { display: none; }
}

/* 大手機以上：每列 3 個 */
@media (min-width: 640px) {
  .logo-item { width: calc((100% - 2 * 1.5rem) / 3); }
}
/* 桌機：每列 5 個、間距縮小（gap 1rem 比預設小，留空間給放大的 LOGO） */
@media (min-width: 1024px) {
  .logos__track { gap: 1rem; }
  .logo-item { width: calc((100% - 4 * 1rem) / 5); }
}

/* ============================================================
   區塊 8：最新文章（卡片 hover 文字框變橘；文字框右下切角）
   ============================================================ */
.articles {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  background-color: var(--color-bg);     /* 白底 */
}
.articles > .container { position: relative; z-index: 1; }
/* 左下角灰階向量底紋（與 OUR JOURNEY 同款，但水平反轉、置於左下角） */
.articles::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: min(900px, 60%);
  aspect-ratio: 3675 / 2543;
  background: url('images/bg-graphic.svg') no-repeat bottom right / cover;
  opacity: 0.4;
  mix-blend-mode: multiply;
  transform: scaleX(-1);               /* 水平反轉：右下實心 → 左下實心、圖片鏡像 */
  -webkit-mask-image: radial-gradient(115% 115% at bottom right, #000 3%, transparent 62%);
  mask-image: radial-gradient(115% 115% at bottom right, #000 3%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767.98px) {
  .articles { padding-block: 3.5rem; }
}
.articles__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* .article-card 系列：已移至 style.css（首頁最新消息與文章專區頁共用） */

/* 最新消息輪播：卡片與輪播樣式同文章詳情頁「相關文章」（.article-related） */
.articles .card-carousel__viewport {
  overflow: hidden;
  padding-bottom: 1.25rem;        /* 下緣留空間給面板短陰影，避免被輪播框裁切 */
}
.articles .article-card__body {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}
.articles .article-card:hover .article-card__body {
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.13));
}
/* 箭頭：桌機（版心兩側有留白 ≥1536）放左右側邊；窄於此用標題右上 */

.articles__cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* 區塊 9：CTA — 已移至 style.css（跨頁共用元件，about 等頁面也會用到） */

/* ========================================================================
   PAGE 頁面：products.html
   ======================================================================== */
/* 01 頁面橫幅：完全沿用 style.css 的 .page-hero 共用元件，無需額外樣式 */

/* ============================================================
   02 產品型錄列表（左分類篩選 + 右搜尋與產品網格）
   ============================================================ */
.catalog-list {
  padding-block: var(--space-section);
  background-color: var(--color-bg);
}
@media (max-width: 767.98px) {
  .catalog-list { padding-block: 3.5rem; }
}

/* 內容：手機上下堆疊；桌機左分類欄 + 右內容 */
.catalog-list__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ---- 左側分類側欄（白色底塊、無格線：標題黑字、分類灰字、hover/當前橘字）---- */
.cat-filter {
  background-color: var(--color-surface);   /* 白色底塊 */
  box-shadow: var(--shadow-md);             /* 柔和彩色陰影襯托色塊 */
  padding: 1.75rem 1.5rem;
}
.cat-filter__title {
  margin: 0 0 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--color-border);   /* 標題下分隔線（參考詢價摘要） */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);          /* 產品分類：黑字 */
}
.cat-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* 列按鈕共用（全部 / 大分類名稱 / 子分類）：左數量、名稱 */
.cat-filter__all,
.cat-group__filter,
.cat-sub {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.625rem 0;
  font-family: var(--font-heading);
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s ease;
}
.cat-name {
  flex: 1;
  min-width: 0;
}
/* 全部、大分類名稱：灰字（層級感靠粗細與縮排） */
.cat-filter__all,
.cat-group__filter {
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-muted);
}
/* 子分類：縮排、字小、灰字 */
.cat-sub {
  padding: 0.5rem 0 0.5rem 0.85rem;
  font-weight: 400;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.cat-filter__count {
  min-width: 1.15rem;       /* 對齊各列數量、名稱起點一致 */
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted-light);
  transition: color .2s ease;
}
/* hover 或 當前：整列轉橘 */
.cat-filter__all:hover,
.cat-group__filter:hover,
.cat-sub:hover,
.cat-filter__all.is-active,
.cat-group__filter.is-active,
.cat-sub.is-active {
  color: var(--color-primary);
}
.cat-filter__all:hover .cat-filter__count,
.cat-group__filter:hover .cat-filter__count,
.cat-sub:hover .cat-filter__count,
.cat-filter__all.is-active .cat-filter__count,
.cat-group__filter.is-active .cat-filter__count,
.cat-sub.is-active .cat-filter__count {
  color: var(--color-primary);
}
/* 大分類列：名稱(篩選) + 箭頭(只展開) 兩個獨立按鈕 */
.cat-group__head {
  display: flex;
  align-items: center;
}
.cat-group__filter {
  flex: 1;            /* 名稱按鈕填滿，把箭頭推到最右 */
  min-width: 0;
}
/* 展開/收合箭頭按鈕（獨立、只負責展開，不觸發篩選；加大點擊範圍） */
.cat-group__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 0 0.625rem 0.6rem;
  background: none;
  border: none;
  cursor: pointer;
}
.cat-group__chevron {
  width: 1rem;
  height: 1rem;
  color: var(--color-muted-light);
  transition: transform .25s ease, color .2s ease;
}
/* 箭頭旋轉：各層只轉自己那顆（直接子代，避免父層展開時子層箭頭也轉） */
.cat-group.is-open > .cat-group__head .cat-group__chevron,
.cat-subgroup.is-open > .cat-group__head--sub .cat-group__chevron {
  transform: rotate(180deg);
}
.cat-group__toggle:hover .cat-group__chevron {
  color: var(--color-primary);
}
/* 子分類 / 第三層清單（展開動畫；各層用直接子代，互不影響） */
.cat-group__subs {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .45s ease;   /* 平滑展開/收合（緩一些） */
}
.cat-group.is-open > .cat-group__subs,
.cat-subgroup.is-open > .cat-group__subs { grid-template-rows: 1fr; }
.cat-group__subs-inner {
  overflow: hidden;
  min-height: 0;
  list-style: none;
  margin: 0 0 0.15rem;
  padding: 0;
}
/* 子分類列：名稱按鈕填滿、把展開箭頭推到最右（同大分類列結構） */
.cat-group__head--sub .cat-sub { flex: 1; min-width: 0; }
/* 第三層（leaf）：更深縮排、灰字；行為同其他層 */
.cat-leaf {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.45rem 0 0.45rem 1.7rem;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 0.875rem;
  text-align: left;
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  transition: color .2s ease;
}
.cat-leaf:hover,
.cat-leaf.is-active { color: var(--color-primary); }
.cat-leaf:hover .cat-filter__count,
.cat-leaf.is-active .cat-filter__count { color: var(--color-primary); }

/* 搜尋列：搜尋框（與聯絡表單框同樣式）+ 右側結果數量 */
.product-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.875rem 1.25rem;
  margin-bottom: 2.25rem;
}
.product-search__form {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 16rem;
}
.product-search__icon {
  position: absolute;
  left: 1rem;
  display: inline-flex;
  color: var(--color-muted);
  pointer-events: none;
}
.product-search__icon svg {
  width: 1.15rem;
  height: 1.15rem;
}
/* 與 .form-field input 一致：灰底 + 1px 邊框，focus 橘框 + 橘色光暈 */
.product-search__input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.85rem;   /* 左留白讓出 icon 空間 */
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.product-search__input::placeholder {
  color: var(--color-muted-light);
}
.product-search__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15);
}
/* 隱藏 search input 預設的清除叉叉（外觀統一） */
.product-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
/* 結果數量：搜尋框右側、灰字（數字不特別上色） */
.product-search__count {
  margin: 0;
  flex-shrink: 0;
  font-size: 0.9rem;
  color: var(--color-muted);
  white-space: nowrap;
}

/* 排列方式切換器：兩顆圖示按鈕，當前橘色 */
.view-toggle {
  display: inline-flex;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
}
.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-muted);
  background-color: var(--color-surface);
  border: none;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.view-toggle__btn + .view-toggle__btn {
  border-left: 1px solid var(--color-border);
}
.view-toggle__btn:hover {
  color: #FFFFFF;
  background-color: var(--color-primary);
}
.view-toggle__btn.is-active {
  color: #FFFFFF;
  background-color: var(--color-primary);
}
.view-toggle__btn svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* 空狀態：搜尋無結果 */

/* ---- 列表式（卡片）分類標籤尺寸；卡片浮層/按鈕樣式已移至 style.css 共用 ---- */
/* 分類名字體稍微加大（僅產品型錄頁，不影響首頁共用卡片） */
.catalog-list .product-card__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.15rem;       /* 標籤上方間距（列表式） */
  margin-bottom: 0.65rem;
  font-size: 0.875rem;
}
/* 列表式（卡片）分類膠囊稍大 */
.catalog-list .product-card__tag .cat-chip {
  font-size: 0.875rem;
  padding: 0.15rem 0.55rem;
}

/* 列表上下列間距（左右沿用 style.css 的 .product-grid 欄距） */
.catalog-list .product-grid {
  row-gap: 1.25rem;
}
/* 註：整卡／整列可點的指標游標（.product-card[data-id] / .product-row[data-id]）已移至 style.css 全域 */

/* ---- 清單式（list view）：規格參數表（表頭白底塊 + 資料列線條區隔）---- */
.catalog-list .product-grid--list {
  display: block;          /* 取消網格，改為表格式垂直堆疊 */
}
/* 表頭與資料列共用同一組欄寬，確保三欄對齊（產品 / 規格參數 / 訂購·詢價） */
.product-table__head,
.product-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr) 12rem;
  gap: 1.25rem;
  align-items: center;
}
/* 表頭：無底塊，黑字 + 底線分隔（與資料列同樣式：1px 灰線） */
.product-table__head {
  padding: 0 1.25rem 0.85rem;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
}
/* 資料列：無底塊，以底線區隔 */
.product-row {
  padding: 1.5rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
/* 產品欄：縮圖 + 名稱/分類 */
.product-row__product {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}
.product-row__media {
  flex-shrink: 0;
  display: block;
  width: 6rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  --clip: 18px;            /* 縮圖右下切角小一些 */
}
.product-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.product-row:hover .product-row__media img {
  transform: scale(1.05);
}
.product-row__info {
  min-width: 0;
}
.product-row__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
}
.product-row__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--color-text);
}
/* 名稱可點進產品內頁（繼承字色、hover 變橘） */
.product-row__name a {
  color: inherit;
  transition: color .2s ease;
}
.product-row__name a:hover { color: var(--color-primary); }
/* 商品編號：名稱下方、灰字 */
.product-row__code {
  margin: 0.3rem 0 0;
  font-size: 0.875rem;
  color: var(--color-muted);
}
/* 規格參數欄：逐條「項目：值」；寬度夠時自動排兩欄填滿，不夠則回一欄 */
.product-row__specs {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.3rem 1.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}
.spec-line {
  display: flex;
  gap: 0.35rem;
}
.spec-line dt {
  flex-shrink: 0;
  font-weight: 500;
  color: var(--color-muted);
}
.spec-line dt::after { content: "："; }
.spec-line dd {
  margin: 0;
  color: var(--color-text);
}
/* 訂購 / 詢價欄：MOQ + 交期 + 加入詢價單 */
.order-meta {
  margin-bottom: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.order-meta__item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--color-muted);
}
.order-meta__item svg {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--color-primary);
}
/* MOQ「N 件起」：加重、黑字 */
.order-meta__moq {
  font-weight: 500;
  color: var(--color-text);
}
/* 加入詢價單按鈕：貼合文字寬度（不撐滿整欄，左右才不會空太多） */
.product-row__order .product-card__btn {
  width: auto;
  align-self: start;
}

/* 清單式 RWD：窄螢幕（<768）隱藏表頭、資料列改上下堆疊 */
@media (max-width: 767.98px) {
  .product-table__head {
    display: none;
  }
  .product-row {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1.5rem 0;
  }
}

/* 分頁 .pagination 已移至 style.css（產品列表頁與文章專區頁共用） */

/* 窄平板與手機（<1024）：隱藏桌機分類側欄（改用 .cat-select 下拉，由 style.css 顯示） */
@media (max-width: 1023.98px) {
  .cat-filter { display: none; }
}

/* 桌機：左分類欄 + 右內容；分類欄 sticky 隨捲動跟隨 */
@media (min-width: 1024px) {
  .catalog-list__body {
    display: grid;
    grid-template-columns: minmax(240px, 288px) 1fr;
    gap: 2.5rem;
    align-items: start;
  }
  .catalog-list__side {
    position: sticky;
    top: 7rem;        /* 留出固定導覽列高度 */
  }
}

/* ========================================================================
   PAGE 頁面：product-detail.html
   ======================================================================== */

/* ============================================================
   主要：左圖庫 + 右資訊
   ============================================================ */
.pd-main {
  padding-block: 3.5rem;
}
@media (min-width: 1024px) {
  .pd-main { padding-block: var(--space-section); }
}
.pd-main__grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .pd-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3.5rem;
    align-items: start;
  }
}

/* ---- 圖庫 ---- */
.pd-gallery__main {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background-color: var(--color-bg-alt);
  --clip: 60px;
}
.pd-gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;                /* 可點擊放大檢視 */
  transition: opacity .4s ease;   /* 主圖淡入淡出（crossfade） */
}
/* 主圖左右切換箭頭：白色箭頭 + 半透明品牌深色襯底；hover 填主橘（無外框） */
.pd-gallery__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background-color: rgba(var(--color-dark-rgb), .5);   /* 半透明深色襯底（品牌深色 #232837，非外框） */
  color: #FFFFFF;                                       /* 白色箭頭 */
  cursor: pointer;
  z-index: 2;
  transition: background-color .2s var(--ease-out);
}
.pd-gallery__arrow svg { width: 1.5rem; height: 1.5rem; }
.pd-gallery__arrow--prev { left: 0.5rem; }
.pd-gallery__arrow--next { right: 0.5rem; }
.pd-gallery__arrow:hover { background-color: var(--color-primary); }   /* hover 僅變色（不位移），與全站箭頭一致 */

/* 放大鏡提示徽章（右上角；點擊穿透到主圖以開啟燈箱） */
.pd-gallery__zoom {
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  background-color: rgba(var(--color-dark-rgb), .5);
  color: #FFFFFF;
  cursor: zoom-in;        /* 本身可點擊放大 */
  z-index: 2;
  transition: background-color .2s var(--ease-out);
}
.pd-gallery__zoom svg { width: 1.25rem; height: 1.25rem; }
/* 游標移到放大鏡本身才變色（純變色，提示可放大） */
.pd-gallery__zoom:hover { background-color: var(--color-primary); }

/* ============================================================
   圖片燈箱（點主圖放大檢視）
   ============================================================ */
.pd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4.5rem 1.5rem;
  background-color: rgba(var(--color-dark-rgb), .94);
  animation: lb-fade-in .3s var(--ease-out) both;
}
.pd-lightbox[hidden] { display: none; }
@keyframes lb-fade-in { from { opacity: 0; } to { opacity: 1; } }

.pd-lightbox__stage {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: min(1100px, 92vw);
  max-height: 84vh;
}
.pd-lightbox__img {
  max-width: 100%;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
}
.pd-lightbox__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  color: #FFFFFF;
  cursor: pointer;
  transition: color .2s var(--ease-out);
}
.pd-lightbox__close:hover { color: var(--color-primary); }
.pd-lightbox__close svg { width: 1.75rem; height: 1.75rem; }
.pd-lightbox__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  background-color: rgba(255, 255, 255, .1);
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.pd-lightbox__arrow:hover { background-color: var(--color-primary); }
.pd-lightbox__arrow svg { width: 1.75rem; height: 1.75rem; }
.pd-lightbox__arrow--prev { left: 1.25rem; }
.pd-lightbox__arrow--next { right: 1.25rem; }
.pd-lightbox__counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: .05em;
  color: #FFFFFF;
  opacity: .85;
}
@media (max-width: 640px) {
  .pd-lightbox { padding: 3.5rem 0.75rem; }
  .pd-lightbox__arrow { width: 2.5rem; height: 2.5rem; }
  .pd-lightbox__arrow--prev { left: 0.5rem; }
  .pd-lightbox__arrow--next { right: 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pd-lightbox { animation: none; }
}
.pd-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.pd-thumb {
  width: 5rem;
  height: 5rem;
  padding: 0;
  overflow: hidden;
  background: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color .2s ease;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { border-color: var(--color-muted); }
.pd-thumb.is-active { border-color: var(--color-primary); }

/* ---- 右側資訊 ---- */
.pd-info__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.pd-info__cats .cat-chip {
  font-size: 0.875rem;
  padding: 0.2rem 0.65rem;
}
.pd-info__name {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
}
.pd-info__code {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  color: var(--color-muted);
}
.pd-info__code span { color: var(--color-text); font-weight: 500; }
.pd-info__intro {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-muted);
}

/* 最低訂購 / 交期（灰底資訊面板） */
.pd-meta {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background-color: var(--color-bg-alt);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pd-meta__item {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-size: 0.95rem;
}
.pd-meta__label {
  flex-shrink: 0;
  width: 6em;            /* 兩個標籤等寬，數值起點對齊 */
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-muted);
}
.pd-meta__value { color: var(--color-text); font-weight: 500; }
.pd-meta__item:first-child .pd-meta__value {
  color: var(--color-primary);
  font-weight: 500;
}

/* 數量 + 加入詢價單 */
.pd-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  margin-top: 1.5rem;
}
.pd-qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
}
.pd-qty__btn {
  width: 3rem;
  font-size: 1.25rem;
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.pd-qty__btn:hover { background-color: var(--color-primary); color: #FFFFFF; }
.pd-qty__input {
  width: 4rem;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
  border: none;
  border-inline: 1px solid var(--color-border);
  -moz-appearance: textfield;
}
.pd-qty__input::-webkit-outer-spin-button,
.pd-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-buy__add { flex: 1; min-width: 12rem; }

/* 資料下載 */
.pd-downloads {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.pd-downloads__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.875rem;
}
.pd-downloads__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.pd-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: color .2s ease, border-color .2s ease;
}
.pd-download svg { width: 1.1rem; height: 1.1rem; color: var(--color-primary); }
.pd-download:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ============================================================
   下方：規格參數 / 注意事項（分頁籤）
   ============================================================ */
.pd-detail {
  padding-bottom: var(--space-section);
}
.pd-tabs {
  display: flex;
  gap: 2rem;
  border-bottom: 1px solid var(--color-border);
}
.pd-tab {
  position: relative;
  padding: 0 0 0.875rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--color-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s ease;
}
.pd-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transition: transform .25s ease;
}
.pd-tab:hover { color: var(--color-text); }
.pd-tab.is-active { color: var(--color-primary); }
.pd-tab.is-active::after { transform: scaleX(1); }

.pd-panel { padding-top: 2rem; }

/* 規格參數表 */
.pd-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.pd-spec-table th,
.pd-spec-table td {
  padding: 0.95rem 1rem;
  text-align: left;
  vertical-align: top;
}
/* 標籤：淺色、固定寬讓數值對齊、無底色 */
.pd-spec-table th {
  width: 11rem;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-muted);
  white-space: nowrap;
}
.pd-spec-table td { color: var(--color-text); }
/* 隔列極淡底，方便左右對照 */
.pd-spec-table tr:nth-child(even) {
  background-color: var(--color-bg-alt);
}
@media (max-width: 639.98px) {
  .pd-spec-table th { width: 7.5rem; padding-left: 0.5rem; }
  .pd-spec-table td { padding-right: 0.5rem; }
}

/* 注意事項 */
.pd-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.pd-notes li {
  display: flex;
  gap: 0.75rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}
/* 每個項目前置方塊 icon 完全相同（固定尺寸、不受文字長度影響） */
.pd-notes li::before {
  content: "";
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55rem;
  background-color: var(--color-primary);
}

/* 特色與應用（內容依所選規格／項目動態對應） */
.pd-feature__hint {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.pd-feature__combo {
  display: inline-block;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.875rem;
  background-color: rgba(var(--color-primary-rgb), 0.1);   /* 淡橘色底 */
  border-left: 3px solid var(--color-primary);
  font-size: 0.9rem;
  color: var(--color-text);
}
.pd-feature__combo strong { font-weight: 500; }

/* 富文本內容容器：清單為原生 <ul>/<ol> 標記，與後台文字編輯器輸出一致 */
.pd-feature__richtext {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text);
}
.pd-feature__richtext > :first-child { margin-top: 0; }
.pd-feature__richtext p { margin: 0 0 1rem; }
.pd-feature__richtext h2,
.pd-feature__richtext h3 {
  margin: 1.75rem 0 0.875rem;
  font-family: var(--font-heading);
  font-weight: 500;
  color: var(--color-text);
}
.pd-feature__richtext h2 { font-size: 1.25rem; }
.pd-feature__richtext h3 { font-size: 1.0625rem; }
.pd-feature__richtext ul,
.pd-feature__richtext ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;          /* 原生清單縮排 */
}
.pd-feature__richtext ul { list-style: disc; }
.pd-feature__richtext ol { list-style: decimal; }
.pd-feature__richtext li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
  color: var(--color-muted);
}
.pd-feature__richtext a { color: var(--color-primary); text-decoration: underline; }
.pd-feature__richtext strong { font-weight: 500; }
.pd-feature__richtext em { font-style: italic; }

/* ============================================================
   相關產品
   ============================================================ */
.pd-related {
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);
}
/* 標題列：左標題、右箭頭 */
.pd-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

/* 相關產品（輪播）：卡片位移 hover 會被 viewport(overflow:hidden) 裁切而變形，
   故移除卡片位移，只保留「圖片縮放」（縮放被圖片框裁切、維持在圖片範圍內） */
.pd-related .product-card {
  transition: none;
}
.pd-related .product-card:hover {
  transform: none;
}
.pd-related .product-card__tag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}
/* 輪播機制（.card-carousel*）已移至 style.css 共用 */

/* ============================================================
   找不到產品
   ============================================================ */

/* ========================================================================
   PAGE 頁面：news.html
   ======================================================================== */
.news {
  padding-block: var(--space-section);
  background-color: var(--color-bg);
}
@media (max-width: 767.98px) {
  .news { padding-block: 3.5rem; }
}

/* 分類篩選列：全部 + 各分類；橫向、可換行、置中 */
.news-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.625rem;
  margin-bottom: 3rem;
}
/* 手機平板（<1024）：隱藏按鈕列，改用下拉（沿用共用 .cat-select，由 style.css 顯示） */
@media (max-width: 1023.98px) {
  .news-filter { display: none; }
}
/* 分類下拉（手機平板）：100% 寬 */
.news-select-wrap {
  margin: 0 0 2rem;
}
.news-filter__btn {
  padding: 0.5rem 1.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-muted);
  background-color: var(--color-bg-alt);
  border: 1px solid transparent;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.news-filter__btn:hover {
  color: var(--color-primary);
}
.news-filter__btn.is-active {
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* 空狀態 */

/* ========================================================================
   PAGE 頁面：news-detail.html
   ======================================================================== */

/* ============================================================
   文章主體（置中可讀欄寬）
   ============================================================ */
.article-detail {
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}
@media (min-width: 1024px) {
  .article-detail {
    padding-top: 3rem;
    padding-bottom: var(--space-section);
  }
}
/* 版面：手機平板單欄（目錄隱藏、內容滿版）；桌機左目錄 + 右內容 */
.article-detail__main {
  max-width: none;
}

/* 文章目錄
   手機平板：置頂可收合區塊（預設收起，點「目錄」展開）
   桌機：左側 sticky 卡片、常開 */
.article-toc {
  position: sticky;
  top: 4.75rem;        /* 黏在導覽列下方、留一點緩衝，避免被頁首蓋到 */
  z-index: 30;
  margin-bottom: 2rem;
  background-color: var(--color-bg-alt);
  box-shadow: 0 6px 8px -5px rgba(0, 0, 0, 0.12);   /* 下方一點陰影（黏頂時與內文區隔） */
}
.article-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.article-toc__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--color-text);
}
.article-toc__chevron {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  color: var(--color-muted);
  transition: transform .25s ease;
}
.article-toc.is-open .article-toc__chevron { transform: rotate(180deg); }
.article-toc__nav {
  display: none;
  flex-direction: column;
  padding: 0 1.25rem 1rem;
}
.article-toc.is-open .article-toc__nav { display: flex; }
.article-toc__link {
  display: block;
  padding: 0.4rem 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-muted);
  transition: color .2s ease;
}
.article-toc__link--sub { padding-left: 1rem; font-size: 0.875rem; }
.article-toc__num {
  margin-right: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.article-toc__link:hover { color: var(--color-primary); }
.article-toc__link.is-active {
  color: var(--color-primary);
  font-weight: 500;
}

@media (min-width: 1024px) {
  .article-detail__layout {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
  .article-detail__main { max-width: none; margin: 0; }
  .article-toc {
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
    padding: 1.75rem 1.5rem;                  /* 比照產品分類側欄 .cat-filter 內距 */
    background-color: var(--color-surface);   /* 白色底塊（比照產品分類側欄） */
    box-shadow: var(--shadow-md);             /* 柔和陰影襯托白色色塊 */
  }
  /* 桌機：標題當卡片標題（不可收合、底線分隔），目錄常開 */
  .article-toc__toggle {
    padding: 0 0 0.875rem;
    margin-bottom: 0.875rem;
    border-bottom: 1px solid var(--color-border);
    cursor: default;
  }
  .article-toc__chevron { display: none; }
  .article-toc__nav { display: flex; padding: 0; }
}

/* 分享至社群 + 複製網址（icon 按鈕） */
.article-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
.article-share__label {
  margin-right: 0.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-muted);
}
.article-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border: none;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.article-share__btn:hover { color: #FFFFFF; background-color: var(--color-primary); }
.article-share__btn svg { width: 1.1rem; height: 1.1rem; }

/* 上一篇 / 下一篇 */
.article-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.article-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.25rem 0;
}
.article-nav__link--next { align-items: flex-end; text-align: right; }
.article-nav__dir {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-primary);
}
.article-nav__dir svg { width: 1rem; height: 1rem; }
.article-nav__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text);
  transition: color .2s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-nav__link:hover .article-nav__title { color: var(--color-primary); }

.article-detail__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
/* 分類標籤放大 */
.article-detail__meta .cat-chip {
  font-size: 0.875rem;
  padding: 0.2rem 0.7rem;
}
.article-detail__date {
  font-size: 0.875rem;
  color: var(--color-muted);
}
.article-detail__title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem);
}

.article-detail__cover {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: 2rem 0 2.5rem;
  background-color: var(--color-bg-alt);
}
.article-detail__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 富文本內文 ---- */
.article-detail__body {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--color-text);
}
.article-detail__body > * + * { margin-top: 1.25rem; }
.article-detail__body h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-text);
  margin-top: 2.5rem;
}
.article-detail__body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-text);
  margin-top: 2rem;
}
.article-detail__body p { color: var(--color-text); }
.article-detail__body a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-detail__body ul,
.article-detail__body ol {
  padding-left: 1.5rem;
}
.article-detail__body li { margin-top: 0.5rem; }
.article-detail__body ul li::marker { color: var(--color-primary); }
.article-detail__body strong { font-weight: 500; }
.article-detail__body em { font-style: italic; }
.article-detail__body img {
  width: 100%;
  margin: 2rem 0;
}
/* 引用：單純斜體（不加框線、不變色） */
.article-detail__body blockquote {
  margin-inline: 0;
  font-style: italic;
}

/* ============================================================
   相關文章
   ============================================================ */
.article-related {
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);
}
@media (max-width: 767.98px) {
  .article-related {
    padding-top: 3.5rem;
    padding-bottom: 2.25rem;
  }
}
.article-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
/* 相關文章輪播：下緣留一點空間給面板短陰影 */
.article-related .card-carousel__viewport {
  overflow: hidden;
  padding-bottom: 1.25rem;
}
/* 相關文章卡片：陰影只加在白色斜切面板、且短小（僅作白色分界、不易被輪播框裁切） */
.article-related .article-card__body {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.1));
}
.article-related .article-card:hover .article-card__body {
  filter: drop-shadow(0 4px 9px rgba(0, 0, 0, 0.13));
}

/* ============================================================
   找不到文章
   ============================================================ */

/* ========================================================================
   PAGE 頁面：about.html
   ======================================================================== */
/* ------------------------------------------
   公司簡介（左圖 + 右文）
   ------------------------------------------ */
.about-story {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  background-color: var(--color-bg);
}
/* 內容置於裝飾之上 */
.about-story > .container { position: relative; z-index: 1; }
/* 左上角科技電路背景底紋：從左上角放射狀淡出至透明（緩和）＋ multiply 融入白底 */
.about-story::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: min(980px, 66%);
  aspect-ratio: 1500 / 1001;            /* 維持原圖比例 */
  background: url('images/bg-tech-circuit.svg') no-repeat top left / cover;
  opacity: 0.7;
  mix-blend-mode: multiply;            /* 淺色底融入白底，主要顯示線條 */
  -webkit-mask-image: radial-gradient(120% 120% at top left, #000 10%, transparent 78%);
  mask-image: radial-gradient(120% 120% at top left, #000 10%, transparent 78%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767.98px) {
  .about-story { padding-block: 3.5rem; }
}
/* 平板回歸基準 var(--space-section)=96px，與 why／certs 等區塊上下間距一致 */
@media (min-width: 1024px) {
  .about-story { padding-bottom: 8.5rem; }   /* 桌機：下方間距加高（讓右下徽章有空間） */
}
.about-story__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 1023.98px) {
  /* 1024 以下單欄堆疊：橘色徽章向圖片下方凸出 3.5rem，故把圖文間距拉大，
     扣掉徽章凸出量後仍保留約 2.5rem 的舒適間距，避免徽章貼著下方文字 */
  .about-story__grid { gap: 6rem; }
}
@media (min-width: 1024px) {
  .about-story__grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}
.about-story__media { position: relative; }   /* 容器：正方形圖框 + 重疊徽章 */
.about-story__frame {
  overflow: hidden;
  aspect-ratio: 1 / 1;          /* 正方形，與首頁 02 圖片構造相同 */
}
.about-story__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 桌機：圖片移到右側、文字在左 */
@media (min-width: 1024px) {
  .about-story__media { order: 2; }
  .about-story__text  { order: 1; }
}
/* 橘色數據徽章（比照首頁 02 構造；左下深切角 + 跟隨形狀的 drop-shadow） */
.about-story__badge {
  position: absolute;
  right: 0;
  bottom: -3.5rem;
  width: max-content;
  max-width: 13rem;
  padding: 2.5rem 1.75rem 2.25rem;
  text-align: center;
  background-color: var(--color-primary);
  color: #FFFFFF;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .22));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 3.25rem), calc(100% - 3.25rem) 100%, 0 100%);
  z-index: 2;
}
.about-story__badge-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
}
.about-story__badge-plus { font-size: 1.75rem; }
.about-story__badge-label {
  margin-top: .85rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.0625rem;
}
.about-story__badge-desc {
  margin-top: .25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .85);
}
/* 桌機：徽章外凸左移（與首頁 02 完全相同的交疊） */
@media (min-width: 1280px) {
  .about-story__badge { right: -2rem; bottom: -2rem; }
}
@media (max-width: 767px) {
  .about-story__badge { padding: 2rem 1.5rem 2.75rem; }
  .about-story__badge-num { font-size: 2.25rem; }
}
.about-story__title {
  margin-bottom: 1.25rem;
}
.about-story__text p:not(.eyebrow) {
  font-size: 1.0625rem;
  line-height: 1.9;
  color: var(--color-muted);
}
.about-story__text p + p { margin-top: 1rem; }
.about-story__cta { margin-top: 2rem; }

/* ------------------------------------------
   03 為什麼選擇我們（中間圖 + 左右各 3 特色；hover 變橘並切換中間圖）
   ------------------------------------------ */
.why {
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);
}
@media (max-width: 767.98px) {
  .why { padding-block: 3.5rem; }
}
.why__head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 3.5rem;
}

.why__body {
  display: grid;
  grid-template-columns: 1fr 1fr;    /* <1280：六項 2 欄 × 3 列 */
  gap: 2.5rem 2rem;                  /* 列距（項目↔圖片）開一點 */
  align-items: start;
}
@media (min-width: 1280px) {
  .why__body {
    grid-template-columns: 1fr minmax(340px, 420px) 1fr;   /* 大桌機：三欄夾中圖 */
    gap: 2.5rem;
    align-items: center;
  }
  .why__col { gap: 1rem; }
}
.why__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;          /* 欄內特色間距縮小 */
}

/* 中間圖：<1280 橫式、滿欄排在六項之後（下方）；大桌機改直式置中欄 */
.why__media {
  overflow: hidden;
  aspect-ratio: 2 / 1;          /* 堆疊時更扁、高度較小 */
  grid-column: 1 / -1;
  order: 3;
}
@media (min-width: 1280px) {
  .why__media { aspect-ratio: 3 / 4; grid-column: auto; order: 0; }
}
.why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 639.98px) {
  /* 手機：六項改單欄；左右兩塊之間的間距改為與塊內項目相同（0.75rem），六項視覺均勻 */
  .why__body { grid-template-columns: 1fr; row-gap: 0.75rem; }
  .why__media { margin-top: 1.75rem; }   /* 補回圖片與特色清單的間距（0.75 + 1.75 ≈ 原 2.5rem） */
}

/* 單一特色（可點擊／hover） */
.why-feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 2.25rem 1.75rem;           /* 區塊上下內距加大 */
  background-color: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: background-color .25s ease;
}
.why-feature__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  color: var(--color-primary);         /* 一般：橘色 */
  transition: color .25s ease;
}
.why-feature__icon svg { width: 2.25rem; height: 2.25rem; }
.why-feature__text { display: flex; flex-direction: column; gap: 0.3rem; }
.why-feature__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
  transition: color .25s ease;
}
.why-feature__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
  transition: color .25s ease;
}
/* hover / 作用中：整塊變橘、文字與圖示轉白 */
.why-feature:hover,
.why-feature.is-active {
  background-color: var(--color-primary);
}
.why-feature:hover .why-feature__title,
.why-feature.is-active .why-feature__title,
.why-feature:hover .why-feature__desc,
.why-feature.is-active .why-feature__desc {
  color: #FFFFFF;
}
.why-feature:hover .why-feature__icon,
.why-feature.is-active .why-feature__icon {
  color: #FFFFFF;
  opacity: 1;
}
/* 橘色區塊斜切角（深度沿用首頁 --clip）：左排切右下角、右排切左下角 */
.why__col--left .why-feature {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);
}
.why__col--right .why-feature {
  clip-path: polygon(0 0, 100% 0, 100% 100%, var(--clip) 100%, 0 calc(100% - var(--clip)));
}
/* <1280（含 1024）2×3 排列：右欄也統一切右下角；項目四邊內距縮小 */
@media (max-width: 1279.98px) {
  .why__col--right .why-feature {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);
  }
  .why-feature { padding: 1.25rem; }
  .why__head { margin-bottom: 2rem; }   /* 標題與項目間距縮小 */
}
/* 桌機：左右欄對稱夾住中圖（左欄文字靠右） */
@media (min-width: 1280px) {
  .why__col--left .why-feature { flex-direction: row-reverse; text-align: right; }
}

/* ------------------------------------------
   05 公司沿革（右側文案 + 左側時間軸；桌機右文 sticky 釘住、時間軸正常捲過）
   ------------------------------------------ */
.history {
  position: relative;
  background-color: var(--color-bg);
}
.history__pin { position: relative; }
/* 右下角灰階向量底紋：從右下角放射狀緩和淡出，邊界融入白底；pin 已 overflow:hidden 裁切 */
.history__pin::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(900px, 60%);
  aspect-ratio: 3675 / 2543;           /* 維持原圖比例 */
  background: url('images/bg-graphic.svg') no-repeat bottom right / cover;
  opacity: 0.4;
  mix-blend-mode: multiply;
  /* 白色漸層更強：實心區更小、提早轉透明，僅右下角淡淡可見 */
  -webkit-mask-image: radial-gradient(115% 115% at bottom right, #000 3%, transparent 62%);
  mask-image: radial-gradient(115% 115% at bottom right, #000 3%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
/* 手機版：隱藏背景底紋（科技電路 / 灰階向量） */
@media (max-width: 767.98px) {
  .about::before,
  .about-story::before,
  .history__pin::before,
  .articles::before,
  .contact-main::before { display: none; }
}
.history__inner {
  position: relative;
  z-index: 1;            /* 內容置於底紋之上（非釘住時也成立） */
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-block: var(--space-section);
}
@media (max-width: 767.98px) {
  .history__inner { padding-top: 3.5rem; padding-bottom: 2rem; }   /* 手機：下方間距改小 */
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .history__inner { padding-bottom: 4rem; }   /* 窄桌機（1024–1279）：下方間距；平板回歸 96px 與其他區塊一致 */
}
.history__intro { max-width: 34rem; }

.history__desc {
  margin-top: 0.85rem;
  font-size: 1.0625rem;
  line-height: 1.7;          /* 行距收窄、整塊上下更緊湊 */
  color: var(--color-muted);
}
.history__cta { margin-top: 1.5rem; }
/* <1280（含 1024）：右側文案改為置中 */
@media (max-width: 1279.98px) {
  .history__intro { max-width: 46rem; margin-inline: auto; text-align: center; }
}

.history__viewport { position: relative; }
.history__track { position: relative; }

.history__line { display: none; }    /* 手機隱藏中線 */
.hist-item__dot { display: none; }    /* 手機隱藏軸點 */

.hist-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding-block: 1.25rem;
}
.hist-item__media {
  --clip: 44px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);   /* 右下斜切，與卡片一致 */
}
.hist-item__media img { width: 100%; height: 100%; object-fit: cover; }
.hist-item__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-primary);
}
.hist-item__title {
  margin-top: 0.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
}
.hist-item__desc {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-muted);
}

/* ≥768：雙欄交錯 + 中線 + 軸點 */
@media (min-width: 768px) {
  /* 中線改由各里程的線段組成：起於第一個圓點、止於最後一個圓點（頭尾不延伸） */
  .hist-item::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background-color: var(--color-border);          /* 預設灰，捲到（is-shown）轉橘 */
    transition: background-color .4s ease;
    z-index: 0;
  }
  .hist-item.is-shown::after { background-color: var(--color-primary); }
  .hist-item:first-of-type::after { top: 50%; }     /* 起點：第一個圓點 */
  .hist-item:last-of-type::after  { bottom: 50%; }  /* 終點：最後一個圓點 */
  .hist-item {
    grid-template-columns: 1fr 1fr;
    column-gap: 3.5rem;
    align-items: center;
    padding-block: 2rem;
  }
  .hist-item__dot {              /* 軸點：圓點，預設灰、捲到轉橘 */
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    background-color: var(--color-border);
    transition: background-color .4s ease;
    border-radius: var(--radius-full);
    z-index: 2;
  }
  .hist-item.is-shown .hist-item__dot { background-color: var(--color-primary); }
  /* 圖片與文字強制同一列（避免自動排版把文字擠到下一列而跑掉） */
  .hist-item__media,
  .hist-item__body { grid-row: 1; }
  /* 左右交錯：奇數圖左文右、偶數圖右文左 */
  .hist-item--left .hist-item__media { grid-column: 1; }
  .hist-item--left .hist-item__body  { grid-column: 2; text-align: left; }
  .hist-item--right .hist-item__media { grid-column: 2; }
  .hist-item--right .hist-item__body  { grid-column: 1; text-align: right; }
}

/* 大桌機（≥1280）：釘住整個區塊，時間軸隨捲動逐步前進，捲完才放行頁面
   .is-pinned 由 script.js 加上；1024 等以下改為一般上下時間軸（線/點仍有灰→橘效果） */
@media (min-width: 1280px) {
  .history.is-pinned .history__pin {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;          /* 釘住並裁切；背景鋪滿整個 pin（已全寬） */
  }
  .history.is-pinned .history__inner {
    position: relative;
    z-index: 1;                /* 內容壓在背景之上 */
    height: 100%;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding-block: 0;
  }
  .history.is-pinned .history__viewport {
    order: 1;
    flex: 1 1 58%;
    overflow: hidden;
    position: relative;
  }
  .history.is-pinned .history__intro {
    order: 2;
    flex: 0 0 42%;
    align-self: center;         /* 垂直置中 */
    max-width: none;
    padding-left: 4rem;
  }
  .history.is-pinned .history__intro,
  .history.is-pinned .history__viewport { position: relative; z-index: 1; }
  .history.is-pinned .history__track { will-change: transform; }

  /* 內容（圖＋文）逐一揭露：未抵達隱藏並下移，抵達時滑入＋淡入 */
  .history.is-pinned .hist-item__media,
  .history.is-pinned .hist-item__body {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .history.is-pinned .hist-item.is-shown .hist-item__media,
  .history.is-pinned .hist-item.is-shown .hist-item__body {
    opacity: 1;
    transform: none;
  }
  /* 線/點的灰→橘已移到 ≥768 通用規則，釘住與非釘住共用 */
}

/* ------------------------------------------
   認證資歷（品質保證展示；灰底，認證徽章卡片）
   ------------------------------------------ */
.certs {
  padding-block: var(--space-section) 8rem;   /* 下方間距加大 */
  background-color: var(--color-bg-alt);
}
@media (max-width: 767.98px) {
  .certs { padding-block: 3.5rem; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
  .certs { padding-bottom: 6rem; }   /* 平板～含 1024：下方間距 */
}
.certs__head {
  text-align: center;
  max-width: 46rem;
  margin: 0 auto 3rem;
}

.certs__lead {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-muted);
}
/* 卡片輪播（左右箭頭；無左側分類） */
.certs__carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.certs__viewport {
  flex: 1;
  overflow: hidden;
}
.certs__track {
  display: flex;
  gap: 1.5rem;
}
/* 卡片視覺沿用全域 .product-card；此處只定每頁張數的寬度 */
.certs__track .product-card { flex: 0 0 auto; width: 100%; }      /* 手機：一張 */
/* hover 只放大圖片（框內），卡片本身不上浮，避免輪播排列變形 */
.certs__track .product-card:hover { transform: none; }
@media (min-width: 640px) {
  .certs__track .product-card { width: calc((100% - 1.5rem) / 2); }       /* 兩張 */
}
@media (min-width: 1024px) {
  .certs__track .product-card { width: calc((100% - 3 * 1.5rem) / 4); }   /* 四張 */
}

/* 輪播箭頭 */
.certs__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.certs__arrow:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
.certs__arrow svg { width: 1.25rem; height: 1.25rem; }
/* certs 箭頭 RWD：≥1536 移到版面外兩側、卡片滿版；<1536 置中於卡片下方（同 logos） */
.certs__arrow--side { display: none; }
.certs__nav-bottom {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
@media (min-width: 1536px) {
  .certs__arrow--side {
    display: inline-flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .certs__arrow--prev { left: -3.5rem; }
  .certs__arrow--next { right: -3.5rem; }
  .certs__nav-bottom { display: none; }
}

/* ========================================================================
   PAGE 頁面：contact.html
   ======================================================================== */
/* ------------------------------------------
   02 聯絡資訊（左）+ 聯絡表單（右）；下方全寬地圖
   ------------------------------------------ */
.contact-main {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);   /* 灰底 */
}
.contact-main > .container { position: relative; z-index: 1; }
/* 右下角灰階向量底紋（與 OUR JOURNEY 同款同位置）：放射狀緩和淡出、邊界融入底色 */
.contact-main::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: min(900px, 60%);
  aspect-ratio: 3675 / 2543;
  background: url('images/bg-graphic.svg') no-repeat bottom right / cover;
  opacity: 0.4;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(115% 115% at bottom right, #000 3%, transparent 62%);
  mask-image: radial-gradient(115% 115% at bottom right, #000 3%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 767.98px) {
  .contact-main { padding-block: 3.5rem; }
}
@media (min-width: 768px) and (max-width: 1151.98px) {
  /* 平板～中寬度堆疊：上方收窄、下方保留較高（內容到地圖留白足夠） */
  .contact-main { padding-top: 4.5rem; padding-bottom: 6rem; }
}

/* 兩欄：左資訊、右表單（手機堆疊） */
.contact-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 1152px) {
  /* ≥1152 才切兩欄：確保右欄夠寬、表單欄位不擠；1024–1151 維持堆疊滿寬 */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;             /* 左資訊與右表單之間的欄距 */
    align-items: start;    /* 頂端對齊 */
  }
  .contact-aside { padding-top: 0; }   /* 左欄貼齊頂端，不要多餘的上方空白 */
}

/* 左欄：聯絡資訊 */

.contact-aside__desc {
  margin-top: 0.85rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-muted);
}

/* 據點分頁（文字底線式；無框、拉開距離；位於標題下方） */
.contact-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
  border-bottom: 1px solid var(--color-border);   /* 整排 Tab 下方的灰色基準線 */
}
.contact-tab {
  padding: 0 0 0.4rem;
  margin-bottom: -1px;                /* 底線壓在容器灰線上：作用中橘線蓋過灰線、未作用露出灰線 */
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.contact-tab:hover { color: var(--color-text); }
.contact-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* 聯絡資訊清單（icon 方塊 + 標籤 + 值） */
.contact-info-list {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.contact-info-item {
  display: flex;
  align-items: center;   /* icon 與右側文字垂直置中對齊 */
  gap: 1rem;
}
.contact-info-item__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  color: var(--color-primary);   /* 無色底，純橘色 icon */
}
.contact-info-item__icon svg { width: 2rem; height: 2rem; }
.contact-info-item__label {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
}
.contact-info-item__value {
  margin-top: 0.15rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-muted);
  word-break: break-word;
}
.contact-info-item__value a { transition: color .2s ease; }
.contact-info-item__value a:hover { color: var(--color-primary); }

/* 社群 */
.contact-social { margin-top: 2rem; }
.contact-social__label {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  margin-bottom: 0.85rem;
}
.contact-social__links { display: flex; gap: 0.6rem; }
.contact-social__links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: #FFFFFF;                          /* 白 icon */
  background-color: var(--color-primary);  /* 橘底 */
  transition: background-color .2s ease;
}
.contact-social__links a:hover { background-color: var(--color-primary-dark); }  /* hover 深橘 */
.contact-social__links svg { width: 1.35rem; height: 1.35rem; }

/* 右欄：聯絡表單卡（去框 + 陰影） */
.contact-form-card {
  padding: 1.75rem;   /* 手機：內距收小 */
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .contact-form-card { padding: 3rem; }
}
.contact-form-card__title {
  margin-bottom: 1.75rem;
}

/* 表單版面（欄位基礎樣式 .form-field 已提升至 style.css 共用） */
.contact-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-form__field--full { grid-column: 1 / -1; }
}
.contact-form__submit { margin-top: 1.75rem; }

/* ------------------------------------------
   03 地圖（隨 02 據點分頁切換）
   - 堆疊（<1152）：內嵌於資訊與表單之間、容器寬（.contact-map--inline）
   - 桌機兩欄（≥1152）：全寬顯示於最下方（.contact-map--full）
   ------------------------------------------ */
.contact-map {
  line-height: 0;        /* 消除 iframe 下方行高空隙 */
}
.contact-map iframe {
  width: 100%;
  height: 420px;
  border: 0;
  display: block;
}
.contact-map--full { display: none; }        /* 預設（堆疊）隱藏全寬版 */
@media (min-width: 1152px) {
  .contact-map--inline { display: none; }    /* 桌機隱藏內嵌版 */
  .contact-map--full { display: block; }
}
@media (max-width: 767.98px) {
  .contact-map iframe { height: 300px; }
}

/* ========================================================================
   PAGE 頁面：inquiry.html
   ======================================================================== */
/* ------------------------------------------
   02 詢價清單內容（左商品列表 + 右摘要卡）
   ------------------------------------------ */
.inq {
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);   /* 灰底，與詢價流程其他頁一致（白卡浮起） */
}
@media (max-width: 767.98px) {
  .inq { padding-block: 3.5rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .inq { padding-block: 4.5rem; }
}

/* 兩欄：左列表 + 右摘要（手機堆疊） */
.inq__grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .inq__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3rem;
    align-items: start;
  }
}

/* 商品列表（整體一張白卡） */
.inq__list {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .inq__list { padding: 3rem; }   /* 桌機內距加大，與填寫詢價資料表單一致 */
}
.inq-item {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
}
.inq__list .inq-item:first-child { padding-top: 0; }
.inq__list .inq-item:last-child { padding-bottom: 0; border-bottom: none; }
.inq-item__media {
  flex-shrink: 0;
  width: 6rem;
  height: 6rem;
  overflow: hidden;
  /* 右下 45° 切角 motif（加深） */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%);
}
.inq-item__media img { width: 100%; height: 100%; object-fit: cover; }
.inq-item__body {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.inq-item__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--color-text);
}
.inq-item__moq {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
}
.inq-item__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.35rem;
}
/* 數量加減器 */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border); }
.qty__btn {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.qty__btn:hover:not(:disabled) { background-color: var(--color-primary); color: #FFFFFF; }
.qty__btn:disabled { opacity: .4; cursor: not-allowed; }
.qty__input {
  width: 3rem;
  height: 2.25rem;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-text);
  border: none;
  border-inline: 1px solid var(--color-border);
  -moz-appearance: textfield;
}
.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* 移除鈕 */
.inq-item__remove {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  color: var(--color-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s ease;
}
.inq-item__remove:hover { color: var(--color-danger); }
.inq-item__remove svg { width: 1.05rem; height: 1.05rem; }
/* 單項備註（多行，可換行、可向下拉伸） */
.inq-item__note {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  resize: vertical;
  min-height: 3.5rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.inq-item__note::placeholder { color: var(--color-muted-light); }
.inq-item__note:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15);
}

/* 右側摘要卡 */
.inq__summary {
  padding: 1.75rem;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 1024px) {
  .inq__summary { position: sticky; top: 6.5rem; }
}
.inq__summary-title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}
.inq__summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.75rem;
  border-top: 1px solid var(--color-border);
  font-size: 1rem;
  color: var(--color-muted);
}
.inq__summary-row strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-primary);
}
.inq__summary-hint {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-muted);
}
.inq__submit { width: 100%; margin-top: 1.25rem; }
.inq__continue {
  display: block;
  text-align: center;
  margin-top: 0.85rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-muted);   /* 灰色，與「修改清單」一致 */
  transition: color .2s ease;
}
.inq__continue:hover { color: var(--color-primary); }

/* 空清單狀態 */

/* ========================================================================
   PAGE 頁面：inquiry-custom.html
   ======================================================================== */
/* ------------------------------------------
   02 + 03 客製詢價：左服務流程 + 右表單
   桌機（≥1152）兩欄；平板/手機堆疊（流程在上、表單在下）
   ------------------------------------------ */
.cs-inquiry {
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);   /* 灰底，讓白色表單卡與步驟卡浮起 */
}
@media (max-width: 767.98px) {
  .cs-inquiry { padding-block: 3.5rem; }
}
@media (min-width: 768px) and (max-width: 1151.98px) {
  .cs-inquiry { padding-block: 4.5rem; }   /* 平板～中寬度堆疊：上下收窄 */
}
.cs-inquiry__grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 1152px) {
  .cs-inquiry__grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);   /* 服務流程欄較窄、表單較寬 */
    gap: 4rem;
    align-items: start;
  }
  /* 服務流程黏住：填表單往下捲時仍固定可見（top 讓開固定導覽列） */
  .cs-process {
    position: sticky;
    top: 6.5rem;
    align-self: start;
  }
}

/* 左欄：服務流程（與聯絡頁一致的清爽感；深色標題、橘色數字點綴） */
.cs-process__head {
  margin-bottom: 2rem;
}

.cs-process__lead {
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-muted);
}
.cs-process__grid {
  display: grid;
  grid-template-columns: 1fr;   /* 手機 1 欄；≥1152 兩欄版面時左欄直向（沿用此值） */
  gap: 1.5rem;
}
@media (min-width: 640px) and (max-width: 1151.98px) {
  .cs-process__grid { grid-template-columns: repeat(2, 1fr); }   /* 平板/中寬度堆疊：步驟橫列 2 欄 */
}
/* 單一步驟：圓形數字徽章 + 文字 */
.cs-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
/* 垂直連接線：連接相鄰兩個數字徽章（僅直向排列時顯示） */
.cs-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.75rem;                  /* 數字徽章下緣 */
  bottom: -1.5rem;               /* 延伸過列距，連到下一個徽章 */
  left: calc(1.375rem - 1.5px);  /* 對齊徽章中心（2.75rem / 2），線寬 3px 置中 */
  width: 3px;
  background-color: var(--color-primary);   /* 實心橘色線 */
}
@media (min-width: 640px) and (max-width: 1151.98px) {
  .cs-step:not(:last-child)::after { display: none; }   /* 平板 2 欄排列時不畫連接線 */
}
.cs-step__num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);   /* 橘色圓形底、白色數字 */
}
.cs-step__text { min-width: 0; }
.cs-step__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}
.cs-step__desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-muted);
}

/* 進場動畫：連接線由上往下延伸、數字圈圈逐一回彈冒出、文字淡入
   捲入視窗時由 JS 在 .cs-process 加上 .is-revealed 觸發；--i 為步驟索引 */
@media (prefers-reduced-motion: no-preference) {
  .js .cs-step__num { transform: scale(0); opacity: 0; }
  .js .cs-step__text { opacity: 0; transform: translateY(8px); }
  .js .cs-step:not(:last-child)::after { transform: scaleY(0); transform-origin: top; }

  .cs-process.is-revealed .cs-step__num {
    animation: ci-pop .4s cubic-bezier(.34, 1.56, .64, 1) calc(var(--i) * .45s) forwards;
  }
  .cs-process.is-revealed .cs-step__text {
    animation: ci-fade .45s ease calc(var(--i) * .45s + .1s) forwards;
  }
  .cs-process.is-revealed .cs-step:not(:last-child)::after {
    animation: ci-draw .3s ease calc(var(--i) * .45s + .15s) forwards;
  }
}
@keyframes ci-pop { to { transform: scale(1); opacity: 1; } }
@keyframes ci-fade { to { opacity: 1; transform: none; } }
@keyframes ci-draw { to { transform: scaleY(1); } }

/* 步驟下方提醒框上方間距（樣式本體 .cs-note 走 style.css 共用） */
.cs-process .cs-note { margin-top: 2rem; }

/* ------------------------------------------
   03 客製詢價表單（右欄白卡，填滿欄寬）
   ------------------------------------------ */
.cs-form {
  padding: 1.75rem;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .cs-form { padding: 3rem; }
}

/* 群組 */
.cs-form__group + .cs-form__group {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}
.cs-form__group-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}
.cs-form__group-title svg {   /* 標題前的 icon（橘色） */
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-primary);
}

/* 基本資料 2 欄 */
.cs-form__grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .cs-form__grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 詢價產品項目（可新增多筆；每筆＝編號標頭 + 產品類型 + 需求描述 + 檔案上傳） */
.ci-items {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.ci-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}
.ci-item__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ci-item__no {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-primary);
}
.ci-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--color-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .2s ease;
}
.ci-item__remove:hover { color: var(--color-danger); }
.ci-item__remove svg { width: 1.1rem; height: 1.1rem; }

/* 檔案上傳區（點擊或拖曳；input 透明覆蓋整塊以支援點擊與原生拖放） */
.ci-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.75rem 1rem;
  text-align: center;
  background-color: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
  transition: border-color .2s ease, background-color .2s ease;
}
.ci-upload:hover,
.ci-upload:focus-within {
  border-color: var(--color-primary);
  background-color: rgba(var(--color-primary-rgb), .04);
}
.ci-upload__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.ci-upload__icon { width: 1.75rem; height: 1.75rem; color: var(--color-primary); }
.ci-upload__text {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-text);
}
.ci-upload__hint {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}

/* 新增項目按鈕（虛線外框） */
.ci-add {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-primary);
  background: none;
  border: 1px dashed var(--color-primary);
  cursor: pointer;
  transition: background-color .2s ease;
}
.ci-add:hover { background-color: rgba(var(--color-primary-rgb), .08); }
.ci-add svg { width: 1.05rem; height: 1.05rem; }

/* 送出鈕：手機滿寬、桌機自動 */
.cs-form__submit {
  margin-top: 2rem;
  width: 100%;
}
@media (min-width: 640px) {
  .cs-form__submit { width: auto; }
}

/* ========================================================================
   PAGE 頁面：inquiry-submit.html
   ======================================================================== */
/* ------------------------------------------
   02 填寫詢價資料（左表單 + 右摘要）
   ------------------------------------------ */
.isub {
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);   /* 灰底，讓白卡浮起 */
}
@media (max-width: 767.98px) {
  .isub { padding-block: 3.5rem; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .isub { padding-block: 4.5rem; }
}

/* 兩欄：左表單 + 右摘要（手機堆疊） */
.isub__grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .isub__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 3rem;
    align-items: start;
  }
}

/* 表單卡（白卡浮於灰底，與聯絡／客製詢價表單一致） */
.isub-form {
  padding: 1.75rem;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .isub-form { padding: 3rem; }
}

/* 表單頂部提醒框（樣式 .cs-note 走 style.css；此處僅設下方間距） */
.isub-form__note { margin-bottom: 2rem; }

/* 表單群組 */
.isub-form__group + .isub-form__group {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}
.isub-form__group-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}
.isub-form__group-title svg {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--color-primary);
}
.isub-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) {
  .isub-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .isub-form__full { grid-column: 1 / -1; }   /* 補充說明跨整列 */
}
/* 預期交期：整個輸入框可點開日曆 */
#if-date { cursor: pointer; }

.isub-form__submit {
  margin-top: 2rem;
  width: 100%;
}
@media (min-width: 640px) {
  .isub-form__submit { width: auto; }
}

/* 右側詢價內容摘要（白卡，桌機 sticky） */
.isub-sum {
  padding: 1.75rem;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 1024px) {
  .isub-sum { position: sticky; top: 6.5rem; }
}
.isub-sum__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}
.isub-sum__list {
  display: flex;
  flex-direction: column;
}
.isub-sum__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--color-border);
}
.isub-sum__name {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-text);
}
.isub-sum__qty {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-primary);
}
.isub-sum__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 2px solid var(--color-text);
  font-size: 1rem;
  color: var(--color-muted);
}
.isub-sum__row strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-primary);   /* 合計項目數 橘色 */
}
.isub-sum__edit {
  display: block;
  text-align: center;
  margin-top: 1.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--color-muted);   /* 灰色 */
  transition: color .2s ease;
}
.isub-sum__edit:hover { color: var(--color-primary); }

/* ========================================================================
   PAGE 頁面：inquiry-success.html
   ======================================================================== */
.success {
  padding-block: var(--space-section);
  background-color: var(--color-bg-alt);   /* 灰底，讓白卡浮起 */
}
@media (max-width: 767.98px) {
  .success { padding-block: 3.5rem; }
}
.success__card {
  max-width: 38rem;
  margin: 0 auto;
  padding: 2.5rem;
  text-align: center;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 768px) {
  .success__card { padding: 3.5rem; }
}
.success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.5rem;
  color: #FFFFFF;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
}
.success__icon svg { width: 2.25rem; height: 2.25rem; }
.success__title {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text);
  font-size: clamp(1.625rem, 1rem + 1.9vw, 2.25rem);
}
.success__text {
  margin-top: 0.85rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--color-muted);
}

/* 詢價單編號 */
.success__no-box {
  margin: 2rem 0;
  padding: 1.5rem;
  background-color: var(--color-bg-alt);
  border: 1px dashed var(--color-border);
}
.success__no-label {
  font-size: 0.875rem;
  color: var(--color-muted);
}
.success__no {
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}
.success__hint {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-muted);
}

.success__actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}
.success__link {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-muted);
  transition: color .2s ease;
}
.success__link:hover { color: var(--color-primary); }

/* ========================================================================
   PAGE 頁面：error.html
   ======================================================================== */
.error-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-dark);
}
/* 背景圖（極低透明度，僅作質感層；深色底壓住、文字可讀） */
.error-page__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
}
.error-page__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
  margin-inline: auto;
  padding-block: 8rem 4rem;     /* 上方留出固定導覽列高度 */
  text-align: center;
}
.error-page__inner .eyebrow { margin-bottom: 0.75rem; }

/* 大數字（403 / 404）：白字、其中一碼橘色點綴 */
.error-page__code {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  font-size: clamp(5.5rem, 20vw, 12rem);
}
.error-page__code span { color: var(--color-primary); }

.error-page__title {
  margin-top: 1rem;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.3;
  color: #FFFFFF;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem);
}
.error-page__desc {
  margin-top: 1.1rem;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--color-muted-light);
}
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}

/* ==========================================
   23. 產品詳情：規格 / 項目 選擇（選用，後台設定後才出現）
   零圓角方塊、單選，選中＝主橘填色；未選送出時整組標紅提示
   ========================================== */
.pd-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0;
}
.pd-opt {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.pd-opt__label {
  flex-shrink: 0;
  width: 6em;                       /* 與 .pd-meta__label 對齊 */
  padding-top: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--color-muted);
  transition: color 0.2s var(--ease-out);
}
.pd-opt__choices {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}
.pd-opt__chip {
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 0.92rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out),
              color 0.2s var(--ease-out),
              background-color 0.2s var(--ease-out);
}
.pd-opt__chip:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.pd-opt__chip.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}
/* 未選擇就嘗試加入詢價：該組標紅提示 */
.pd-opt--error .pd-opt__label { color: var(--color-danger); }
.pd-opt--error .pd-opt__chip { border-color: var(--color-danger); }

@media (max-width: 640px) {
  .pd-opt { flex-direction: column; gap: 0.5rem; }
  .pd-opt__label { width: auto; padding-top: 0; }
}

/* 防呆：未選滿選項時，加入詢價單按鈕呈上鎖外觀（仍可點以觸發警示彈窗） */
.pd-buy__add.is-locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.pd-buy__add.is-locked:hover::before { transform: scaleX(0); }   /* 抑制 hover 滑入填色 */
.pd-buy__add.is-locked:hover { border-color: var(--color-primary); }

/* 詢價清單 / 摘要：帶入已選的規格 / 項目 */
.inq-item__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
}
.inq-item__opt {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.625rem;
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  font-size: 0.875rem;
  color: var(--color-text);
}
.inq-item__opt-label {
  font-size: 0.875rem;
  color: var(--color-muted);
}
.isub-sum__opts {
  margin-top: 0.2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-muted);
}