/* 
  正晴官網 - 全域樣式 
  Antigravity Generated
*/

:root {
  --primary-bg: #ffffff;
  --secondary-bg: #f9fafb;
  --dark-bg: #101828;
  --section-bg: #e5e7eb;

  --text-main: #1e2939;
  --text-heading: #364153;
  --text-secondary: #6a7282;
  --text-muted: #99a1af;
  --text-light: #e5e7eb;

  --border-color: #d1d5dc;
  --border-dark: #1e2939;

  --brand-red: #d01;
  --brand-red-light: #ff1a3d;

  --font-main: "Inter", "Noto Sans TC", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden; /* 萬能防止全站被桌機版其他元素在行動端橫向撐開 */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  color: var(--text-main);
  background-color: var(--primary-bg);
  line-height: 1.5;
}

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ==========================================================================
   正晴品牌紅色分隔線樣式組 (繁體中文註解)
   ========================================================================== */

/* 品牌精緻分隔線 - 實線版 */
.brand-divider-solid {
  border: none;
  height: 1.5px;
  background-color: var(--brand-red);
  width: 100%;
  max-width: 688px;
  margin: 40px auto;
  opacity: 0.95;
}

/* 品牌精緻分隔線 - 奢華漸變版 */
.brand-divider-gradient {
  border: none;
  height: 1.5px;
  background: linear-gradient(to right, transparent, var(--brand-red) 20%, var(--brand-red) 80%, transparent);
  width: 100%;
  max-width: 688px;
  margin: 40px auto;
}

/* 滾動展開動畫效果 */
.brand-divider-animate {
  border: none;
  height: 1.5px;
  background-color: var(--brand-red);
  width: 0;
  max-width: 688px;
  margin: 40px auto;
  transition: width 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.brand-divider-animate.is-visible {
  width: 100%;
}

/* ==========================================================================
   全域 Logo 高解析渲染與防滾動穿透樣式 (繁體中文註解)
   ========================================================================== */


/* 手機側邊欄開啟時，全域滾動穿透防禦鎖定 */
body.mobile-menu-active {
  overflow: hidden !important;
  height: 100vh !important;
}

/* Header */
* {
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
}

.main-header {
  background: #000;
  padding: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-header .container {
  padding: 0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 15px 40px; /* 調整以符合約 99px 的總高度 */
}

.logo-group {
  display: flex;
  gap: 20px;
  align-items: center;
}

.logo-img-link {
  display: flex;
  align-items: center;
  width: 240px;
  height: 60px;
  overflow: hidden;
}

.logo-img-link img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* 讓 Logo 自動適應容器高度 */
.main-logo img {
  height: 100%;
  object-fit: contain;
}

.sub-logo img {
  height: 100%;
  object-fit: contain;
}

.logo-divider {
  width: 1px;
  height: 20px;
  background-color: #333;
}

.search-group {
  display: flex;
  gap: 15px;
  align-items: center;
}

.search-container {
  display: flex;
  align-items: center;
  background: #1a1a1a; /* 符合 Figma 深色背景 */
  border: 1px solid #333;
  width: 448px; /* 桌機版固定寬度 */
  max-width: 100%; /* 防止手機版 X 軸溢出 */
  height: 34px;
  position: relative;
  overflow: visible;
}

.search-input {
  flex: 1;
  height: 34px; /* 符合 Figma h-[34px] */
  padding: 0 16px 0 40px; /* 圖示在左側，故左邊 padding 增加 */
  background: transparent;
  border: none;
  color: #fff; /* 配合深色背景改為白色文字 */
  font-size: 14px;
  outline: none;
}

.search-input::placeholder {
  color: #818181;
}

.search-input:focus {
  border-color: #99a1af;
}

.search-btn {
  height: 34px; /* 符合 Figma h-[34px] */
  padding: 0 15px; /* 符合 Figma 電子型錄按鈕的比例 */
  background: #4a5565; /* 符合 Figma bg-[#4a5565] */
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  transition: background 0.2s;
  text-decoration: none;
}

/* 放大鏡圖示放在左側 */
.search-icon-fixed {
  position: absolute;
  left: 12px; /* 修正：移回左側，符合最新設計稿 */
  top: 50%;
  transform: translateY(-50%);
  width: 16px; /* 符合 Figma size-[16px] */
  height: 16px;
  pointer-events: none;
  opacity: 0.5;
  filter: none; /* 移除白色濾鏡，使用原始顏色 */
}

.catalog-btn {
  background: #d01;
  color: white;
  height: 40px;
  padding: 0 24px;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  letter-spacing: 1.2px;
}

.catalog-btn:hover {
  opacity: 0.9;
}

.nav-menu {
  background: #d01;
  width: 100%;
  padding: 10px 0;
}

.nav-menu .container {
  display: flex;
  justify-content: center;
}

.nav-link {
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 0 24px; /* 符合 Figma px-[24px] */
  height: 40px; /* 符合 Figma h-[40px] */
  display: flex;
  align-items: center;
  gap: 5px; /* 符合 Figma gap-[5px] */
  transition: opacity 0.2s;
  letter-spacing: 1.2px; /* 符合 Figma tracking-[1.2px] */
}

.nav-link:hover {
  opacity: 0.8;
}

/* ============================================
   漢堡選單按鈕 (只在手機顯示)
   ============================================ */
.hamburger-btn {
  display: none; /* 桌機版隱藏 */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  z-index: 1001;
}

.hamburger-btn .bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* 漢堡選單打開時的動畫 (X 形狀) */
.hamburger-btn.is-open .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.is-open .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn.is-open .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   手機版全螢幕側邊欄選單
   ============================================ */
.mobile-menu-overlay {
  display: none; /* JS 控制顯示 */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(3px);
}

.mobile-menu-overlay.is-open {
  display: block;
  opacity: 1;
}

.mobile-menu-panel {
  position: fixed;
  top: 0;
  right: -100%;
  width: min(320px, 85vw);
  height: 100%;
  background: #111;
  z-index: 1000;
  overflow-y: auto;
  transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  padding-bottom: 40px;
}

.mobile-menu-panel.is-open {
  right: 0;
}

/* 手機選單頂部 */
.mobile-menu-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #2a2a2a;
  background: #000;
  position: sticky;
  top: 0;
  z-index: 1;
}

.mobile-logo-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mobile-logo-link {
  display: flex;
  align-items: center;
  height: 30px;
  overflow: hidden;
}

.mobile-logo-link.main-logo-mobile img {
  height: 100%;
  object-fit: contain;
}

.mobile-logo-link.sub-logo-mobile img {
  height: 100%;
  object-fit: contain;
}

.mobile-logo-divider {
  width: 1px;
  height: 16px;
  background-color: #333;
}

.mobile-menu-logo {
  object-fit: contain;
}

.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  padding: 0;
}

/* 手機版搜尋框 */
.mobile-search-wrapper {
  padding: 16px 20px;
  border-bottom: 1px solid #2a2a2a;
}

.mobile-search-form {
  display: flex;
  align-items: center;
  background: #1a1a1a;
  border: 1px solid #333;
  height: 44px;
  width: 100%;
  position: relative;
}

.mobile-search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  opacity: 0.5;
  pointer-events: none;
}

.mobile-search-input {
  flex: 1;
  height: 44px;
  padding: 0 16px 0 40px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  outline: none;
}

.mobile-search-input::placeholder {
  color: #555;
}

.mobile-search-btn {
  height: 44px;
  padding: 0 16px;
  background: #4a5565;
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}

/* 手機版主選單連結 */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}

.mobile-nav-item {
  border-bottom: 1px solid #1e1e1e;
}

.mobile-nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 54px; /* 符合 44px+ 觸控熱區 */
  text-decoration: none;
  color: #e5e5e5;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition:
    background 0.2s,
    color 0.2s;
}

.mobile-nav-link:hover,
.mobile-nav-link:active {
  background: #1e1e1e;
  color: #fff;
}

.mobile-nav-link .mobile-nav-arrow {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  filter: brightness(0) invert(1);
  transition: transform 0.3s;
}

/* 手機版子選單 (重構為手風琴平滑動畫) */
.mobile-sub-list {
  list-style: none;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  background: #0a0a0a;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-nav-item.is-expanded > .mobile-sub-list {
  /* 高度改由 JavaScript 動態寫入 scrollHeight 以維持完美自適應動畫 */
}

.mobile-nav-item.is-expanded > .mobile-nav-link .mobile-nav-arrow {
  transform: rotate(90deg);
  opacity: 1;
}

.mobile-sub-link {
  display: block;
  padding: 14px 20px 14px 36px;
  text-decoration: none;
  color: #aaa;
  font-size: 14px;
  border-bottom: 1px solid #1a1a1a;
  transition:
    background 0.2s,
    color 0.2s;
}

.mobile-sub-link:hover,
.mobile-sub-link:active {
  background: #1e1e1e;
  color: #fff;
}

/* 手機版底部電子型錄按鈕 */
.mobile-menu-footer {
  padding: 20px;
  margin-top: auto;
}

.mobile-catalog-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background: #d01;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1px;
  border-radius: 2px;
  transition: opacity 0.2s;
}

.mobile-catalog-btn:active {
  opacity: 0.85;
}

/* ==========================================================================
   頁首 Header 響應式設計 (桌機/平板/手機) 精準重構
   ========================================================================== */

/* --------------------------------------------------------------------------
   【斷點：平板版 Header】(768px - 1200px) 
   * 核心修正：電子型錄按鈕白名單 nowrap，消除兩行折行
   * 彈性縮小搜尋框與 Logo 高度，獲取呼吸空間，絕不擠壓
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1200px) {
  /* 隱藏桌機版水平導覽列，開啟更清爽的漢堡選單 */
  .nav-menu {
    display: none;
  }

  .hamburger-btn {
    display: flex;
    margin-left: 20px; /* 與搜尋組拉開舒適的間距 */
  }

  .header-top {
    padding: 12px 24px;
    gap: 16px;
  }
  
  .logo-group {
    gap: 12px;
  }
  
  .logo-img-link.main-logo {
    width: auto;
    height: 34px; /* 平板版高度稍微縮小 */
  }
  
  .logo-img-link.sub-logo {
    width: auto;
    height: 34px;
  }
  
  .logo-divider {
    height: 16px;
  }

  .search-group {
    gap: 10px;
  }

  .search-container {
    width: 280px; /* 平板寬度彈性限制，防止擠爆 */
  }

  .catalog-btn {
    height: 34px;
    padding: 0 16px;
    font-size: 13px;
    white-space: nowrap; /* 核心優化：強制不折行 */
  }

  /* 平板版側邊欄選單 Logo 比照手機改為垂直上下呈現，防擠壓與 50% 截斷 */
  .mobile-logo-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .mobile-logo-link {
    height: 28px;
  }

  .mobile-logo-divider {
    display: none !important; /* 垂直排版不需水平分隔線 */
  }
}

/* --------------------------------------------------------------------------
   【斷點：手機版 Header】(767px 以下) 
   * 核心修正：手機 Header 只展示單一主 Logo，隱藏分隔線與次 Logo
   * 側邊欄內雙 Logo 改為垂直堆疊，完美防止 50% 截斷重疊
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 隱藏桌機版導覽列 */
  .nav-menu {
    display: none;
  }

  /* 顯示漢堡選單按鈕並靠右 */
  .hamburger-btn {
    display: flex;
    margin-left: auto;
    width: 40px;
    height: 40px;
  }

  /* 調整頂部 Header 的 padding */
  .header-top {
    padding: 10px 16px;
    height: 60px; /* 固定流暢高度 */
  }

  /* 搜尋框區塊改為不顯示（搜尋已移入漢堡選單） */
  .search-group {
    display: none;
  }

  /* 讓 Logo 組合能佔滿剩餘空間，僅保留主 Logo 以獲得最佳呼吸空間 */
  .logo-group {
    flex: 1;
    gap: 0;
  }

  .logo-img-link.main-logo {
    width: auto;
    height: 32px;
    max-width: 100%;
    display: flex;
    align-items: center;
  }
  
  .logo-img-link.main-logo img {
    height: 32px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* 手機版 Header 寬度有限，隱藏副 Logo 與分隔線防止交疊破版 */
  .logo-img-link.sub-logo,
  .logo-divider {
    display: none !important;
  }

  /* 手機版側邊欄選單修正 */
  .mobile-menu-panel {
    width: 290px;
  }

  /* 側邊欄頂部 Logo 組改為「上下垂直堆疊」，解決正晴 Logo 被截斷 50% 問題 */
  .mobile-logo-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
  }

  .mobile-logo-link {
    height: 28px;
  }

  .mobile-logo-divider {
    display: none !important; /* 垂直排版不需水平分隔線 */
  }

  .mobile-menu-close {
    align-self: flex-start;
    margin-top: -6px;
  }

  .mobile-search-wrapper {
    padding: 12px 16px;
  }

  /* 手機版深色搜尋自動完成建議清單樣式 */
  #mobile-search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1a1a1a; /* 深色背景，融合側邊欄 */
    border: 1px solid #333;
    border-top: none;
    z-index: 1050; /* 確保高於選單其他內容 */
    display: none;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
    max-height: 250px;
    overflow-y: auto;
    border-radius: 0 0 6px 6px;
  }

  #mobile-search-suggestions .suggestion-item {
    color: #f5f5f5 !important; /* 灰白高對比度文字，杜絕看不見的 Bug */
    border-bottom: 1px solid #2a2a2a;
    background: #1a1a1a;
  }

  #mobile-search-suggestions .suggestion-item:hover,
  #mobile-search-suggestions .suggestion-item:active {
    background: #262626 !important; /* 點擊與 hover 時深灰高亮 */
  }

  #mobile-search-suggestions .suggestion-model {
    color: #aaa !important; /* 輔助說明灰色 */
  }

  .mobile-menu-footer {
    padding: 16px;
  }
}

/* Banner */
.hero-banner {
  width: 100%;
  /* 繁體中文註解：鎖定 Banner 為 1920:500 原始長寬比，確保桌機版 100% 完整呈現且 0% 裁切 */
  height: auto;
  aspect-ratio: 1920 / 500;
  background-color: var(--section-bg);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 768px) {
  .hero-banner {
    height: auto !important; /* 移除 60vh，高度由比例自適應 (繁體中文註解) */
    min-height: unset !important;
    aspect-ratio: 16 / 9; /* 強制在手機版維持 16:9 的黃金寬高比例 */
  }

  /* 手機版 Banner 標題縮小，防折行與破版 (繁體中文註解) */
  .banner-title {
    font-size: 20px !important;
    margin-bottom: 8px !important;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6) !important; /* 強化在淺色圖上的易讀性 */
  }

  /* 手機版導覽按鈕位置微調，配合變窄的 Banner 貼合底部 (繁體中文註解) */
  .banner-nav-group {
    bottom: 12px !important;
  }
  .banner-nav-group .nav-btn {
    width: 44px !important;
    height: 34px !important;
  }
}

.banner-content {
  text-align: center;
}

.banner-title {
  font-size: 36px;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.banner-subtitle {
  font-size: 20px;
  color: var(--text-muted);
}

/* Section Common */
.section {
  padding: 60px 0;
}

/* 行動端間距修正 (避免 Fixed/Sticky Header 遮擋) */
@media (max-width: 768px) {
  main {
    padding-top: 0;
  }
  .section {
    padding: 40px 0;
  }
  .latest-events-section {
    padding-top: 20px; /* 針對首個區塊微調 */
  }
}

/* --- 產品類別區塊 (Figma 優化版) --- */
.category-section {
  background: #131313; /* 深色背景 */
  padding: 60px 0;
}

.section-title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
}

.section-title-wrapper .section-title {
  color: #333; /* 預設為深色，適用於淺色背景 */
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 0;
  letter-spacing: 1.5px;
}

.category-section .section-title {
  color: #ffffff; /* 僅在產品類別區塊（深色背景）使用白色標題 */
}

.title-underline {
  width: 125px;
  height: 5px;
  background: #d11919;
}

.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  background: transparent;
  overflow: hidden;
}

.cat-img-box {
  background: #ffffff;
  aspect-ratio: 303 / 310; /* 符合 Figma 比例 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  position: relative;
}

.cat-img-box img {
  width: 80%;
  height: 80%;
  object-fit: contain;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
}

.cat-name-banner {
  background: #d11919;
  padding: 12px 20px;
  text-align: center;
  transition: background 0.3s ease;
}

.cat-name {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* Hover 特效 */
.cat-card:hover {
  transform: translateY(-10px);
}

.cat-card:hover .cat-img-box img {
  transform: scale(1.1);
}

.cat-card:hover .cat-name-banner {
  background: #b01414; /* 稍微變深 */
}

/* 響應式斷點 */
@media (max-width: 1200px) {
  .grid-5 {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .section-title-wrapper .section-title {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .grid-5 {
    grid-template-columns: repeat(2, 1fr); /* 手機版維持一排兩個 */
  }
}

/* --- 精選影片區塊 (Featured Videos) --- */
.video-section {
  position: relative;
  padding: 80px 0;
  background: transparent;
}
.video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 大幅調降白色遮罩至優雅的 45% 不透明度，防止底圖被 85% 純白完全遮蔽 (繁體中文註解) */
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.45)),
    url("../img/event-video-bg.png");
  background-size: cover;
  background-position: center bottom;
  z-index: -1;
  pointer-events: none;
}

.video-slider-container {
  position: relative;
  padding: 0 70px !important; /* 確保箭頭與卡片間距，防止重疊 */
  margin-top: 40px;
}

.video-slider-viewport {
  overflow: hidden;
  width: 100%;
}

.video-slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
/* 卡片數量少時安全置中，溢出時維持靠左 */
.video-slider-track::before,
.video-slider-track::after {
  content: "";
  margin: auto;
}

.video-slide {
  flex: 0 0 33.333%; /* 桌機版影片卡片寬度維持 33.333% 原樣完全不動 (繁體中文註解) */
  padding: 0 15px;
  min-width: 0; /* 💡 避免子元素不換行文字 (nowrap) 強行撐開 Flex 項目寬度 */
}

@media (max-width: 1200px) {
  .video-slide {
    flex: 0 0 55%; /* 平板放大顯示為 1.8 欄 (繁體中文註解) */
  }
}

@media (max-width: 768px) {
  .video-slide {
    /* 繁體中文註解：用「固定 40px peek」取代「85% 比例」——比例會讓 peek 隨螢幕變寬而放大
       （667px 下達 42px），使貼在容器邊緣的箭頭離中央卡片愈來愈遠而脫節破版。
       改 calc(100% - 40px) 後 peek 恆為 20px/側，箭頭在 375~767px 都緊貼卡片邊緣 */
    flex: 0 0 calc(100% - 40px) !important;
    scroll-snap-align: center !important;
  }
  .video-slider-viewport {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding: 0 8px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .video-slider-viewport::-webkit-scrollbar {
    display: none !important;
  }
  .video-slider-track {
    transform: none !important;
    transition: none !important;
  }
  .video-slider-container {
    /* 繁體中文註解：手機版溝槽由 44px 縮為 12px，箭頭改疊在卡片邊緣（見下），
       釋出寬度讓影片縮圖由 136px 放大約 1.5 倍 */
    padding: 0 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  /* 繁體中文註解：手機版箭頭移到卡片外側的深色區塊（螢幕邊到容器約 40px 外距），
     避免蓋到中央卡片與露出的鄰卡縮圖；紅箭頭在深色底上對比足夠，故不加底盤（維持原設計透明樣式）。
     -22px = 抵銷容器 12px padding＋箭頭 36px 寬，使箭頭右緣恰好落在 viewport 起點外側（不壓到 peek 圖） */
  .video-section .event-nav-btn {
    display: flex !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
  }
  .video-section .event-nav-btn.prev {
    left: -22px !important;
  }
  .video-section .event-nav-btn.next {
    right: -22px !important;
  }
}

/* Video Card Styles */
.video-card {
  cursor: pointer;
  transition: all 0.4s ease;
}

.video-thumb-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  border-radius: 4px;
}

.video-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.video-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.play-icon-wrapper {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.3s ease;
}

.video-card:hover .video-mask {
  background: rgba(0, 0, 0, 0.3);
}

.video-card:hover .play-icon-wrapper {
  opacity: 1;
  transform: scale(1);
}

.video-card:hover .video-img {
  transform: scale(1.05);
}

.video-content {
  padding: 15px 0;
}

.video-title-text {
  font-size: 16px;
  font-weight: 500;
  color: #000;
  line-height: 1.5;
  letter-spacing: 0.9px;
  transition: color 0.3s;
  text-align: center;
}

.video-card:hover .video-title-text {
  color: #d11919;
}

/* Video Modal (Lightbox) */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(5px);
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 1000px;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.video-modal-close {
  position: absolute;
  top: -50px;
  right: 0;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  line-height: 1;
  transition: transform 0.3s;
}

.video-modal-close:hover {
  transform: rotate(90deg);
}

.video-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* --- 最新活動輪播 (Latest Events) --- */
.latest-events-section {
  position: relative;
  padding: 80px 0;
  background: transparent;
}
.latest-events-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/event-video-bg.png");
  background-size: cover;
  background-position: center top;
  z-index: -1;
  pointer-events: none;
}

.latest-events-section .section-title {
  color: #ffffff;
}

.event-slider-container {
  position: relative;
  padding: 0 70px !important; /* 確保箭頭與卡片間距，防止重疊 */
  margin-top: 40px;
}

.event-slider-viewport {
  overflow: hidden;
  width: 100%;
}

.event-slider-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* 卡片數量少時安全置中，溢出時維持靠左 */
.event-slider-track::before,
.event-slider-track::after {
  content: "";
  margin: auto;
}

.event-slide {
  flex: 0 0 20%; /* 預設 5 欄 (與前台 Carousel 的 visibleDesktop = 5 對齊，繁體中文註解) */
  padding: 0 15px;
}

@media (max-width: 1200px) {
  .event-slide {
    flex: 0 0 50%;
  }
}

@media (max-width: 768px) {
  .event-slide {
    /* 手機版顯示 85%，讓下一張卡片邊緃微露，形成滑動暨示 */
    flex: 0 0 85%;
    scroll-snap-align: center;
  }
  .event-slider-viewport {
    /* 影片啟用原生滑動反射，无法定寞中心 */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px; /* 智慧滾動邊距對齊，確保慣性滾動後與 16px 邊界切齊 (繁體中文註解) */
    -webkit-overflow-scrolling: touch; /* iOS 滑動加速 */
    scrollbar-width: none; /* 隱藏 Firefox 滝動条 */
  }
  .event-slider-viewport::-webkit-scrollbar {
    display: none; /* 隱藏 Chrome/Safari 滝動条 */
  }
  .event-slider-track {
    /* CSS Scroll Snap 模式下移除 JS transform 控制 */
    transform: none !important;
    transition: none;
  }
  .event-slider-container {
    /* 繁體中文註解：手機版必須加 !important 覆寫基礎規則的 padding:0 70px !important，
       否則 70px 死留白會把 DM 卡片壓到僅 102px（手機箭頭已隱藏，不需大溝槽） */
    padding: 0 16px !important;
  }
  .event-nav-btn {
    /* 繁體中文註解：必須 !important——基礎 .event-nav-btn{display:flex} 寫在此 media 之後，
       同特異性下會以源碼順序勝出，導致手機箭頭沒被藏（收窄 padding 後更會疊到卡片邊緣）。
       最新活動手機採原生滑動＋圓點導覽，箭頭多餘故隱藏 */
    display: none !important;
  }
}

/* 導覽按鈕 (Figma 優化版) */
.event-nav-btn {
  position: absolute;
  top: 40%; /* 向上偏移以對齊卡片圖片中心，而非整個卡片 */
  transform: translateY(-50%);
  width: 42px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  padding: 0;
}

.event-nav-btn:hover {
  transform: translateY(-50%) scale(1.15);
  opacity: 1;
}

.event-nav-btn.prev {
  left: 0px;
}
.event-nav-btn.next {
  right: 0px;
}

.event-nav-icon {
  width: 42px;
  height: 40px;
  object-fit: contain;
}

/* 分頁指標 */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5e7eb;
  cursor: pointer;
  transition: all 0.3s;
}

.slider-dot.active {
  background: #d11919;
  transform: scale(1.3);
}

/* 隱藏原生捲軸 (供 JS 使用) */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
}

/* 卡片優化 (DM Card) */
.dm-card {
  background: transparent;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dm-image {
  width: 100%;
  aspect-ratio: 224 / 317; /* 符合 Figma 比例 */
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 15px;
}

.dm-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.dm-info {
  padding: 0;
}

.dm-text {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.9px;
  text-align: center;
}

.dm-title-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hover 效果 */
.dm-card:hover {
  transform: translateY(-8px);
}

.dm-card:hover .dm-image img {
  transform: scale(1.08);
}

.dm-card:hover .dm-text {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* 觸控回尋 (:active 狀態) */
.dm-card:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.cat-card:active {
  transform: scale(0.97);
  opacity: 0.9;
}

.video-card:active {
  transform: scale(0.97);
  opacity: 0.9;
}

/* Footer */
.main-footer {
  background: #000;
  color: var(--text-light);
  padding: 60px 0 0 0; /* 核心修正：將底部 padding 歸零，留白交由 copyright 元件自行控制 */
  /* 移除 margin-top，由各頁面 section 自己控制間距，避免首頁精選影片後方出現空白區塊 */
  margin-top: 0;
  position: relative;
  overflow: hidden;
  border-top: 5px solid #d11919;
}




/* 頁尾左上角斜角多邊形裝飾 */
.footer-corner-decor {
  position: absolute;
  top: -5px;
  left: 0;
  width: 125px;
  height: 135px;
  z-index: 2;
  pointer-events: none;
}

@media (max-width: 768px) {
  .footer-corner-decor {
    display: none;
  }
}

/* 頁尾功能按鈕組 */
.footer-btn-group {
  display: flex;
  gap: 16px;
  margin-top: 30px;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 32px;
  font-size: 14px;
  color: #fff;
  border: 1px solid #4b4c4d;
  background: transparent;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
}

.footer-btn:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-2px);
}

.footer-btn:active {
  transform: scale(0.97);
}

.footer-btn.btn-red {
  background: #d11919;
  border-color: #d11919;
}

.footer-btn.btn-red:hover {
  background: #e22222;
  border-color: #e22222;
}

/* ==========================================================================
   頁尾 Footer 響應式設計 (桌機/平板/手機) 精準重構
   ========================================================================== */

/* 頁尾內容佈局：桌機版預設 */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 桌機版下雙 Logo 皆往右邊偏移，視覺佈局更加和諧富餘 */
.footer-logos-wrapper {
  margin-left: 60px;
}

.footer-logos-group {
  display: flex;
  align-items: center;
  gap: 30px;
}

.footer-logo-item {
  display: flex;
  align-items: center;
  width: 240px;
  overflow: hidden;
}

.footer-logo-item img {
  width: 100%;
  height: 100%;
  max-width: 240px;  /* 補回原 inline style 的寬度限制，交由 CSS 統一控制 */
  object-fit: contain;
  object-position: left center;
}

.footer-logo-item:first-child,
.footer-logo-item:last-child {
  height: 60px; /* 限制主副 Logo 桌機高度為 60px */
}

.footer-right {
  display: flex;
  gap: 77px;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   【斷點：平板版 Footer】(768px - 1200px) 
   * 僅將 Logo 改為垂直上下堆疊呈現，其他頁尾客服資訊與按鈕維持桌機版水平並列格局
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1200px) {
  .footer-logos-wrapper {
    margin-left: 40px; /* 平板版也往右靠 40px，拉開與左側切角邊緣的優雅間距 */
  }

  /* 平板版頁尾雙 Logo 比照手機改為垂直上下呈現，居左對齊以適配排版 */
  .footer-logos-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .footer-logo-item:first-child,
  .footer-logo-item:last-child {
    width: auto;
    height: 32px; /* 平板垂直堆疊後，高度縮小為 32px */
  }
}

/* --------------------------------------------------------------------------
   【斷點：手機版 Footer】(767px 以下) 
   * 核心修正：單欄中軸置中排版，提供大器典雅的視覺呼吸感
   * 雙 Logo 改為垂直上下堆疊並置中，消滅強行並排的窒息擁擠感
   * 消除胖手指誤觸：按鈕群垂直滿版，高度為人體工學的 44px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .main-footer {
    padding: 40px 0 30px 0;
  }

  .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .footer-logos-wrapper {
    margin-left: 0; /* 手機版重置左邊距，確保中軸完全對齊 */
  }

  /* 雙 Logo 垂直置中堆疊，高度適當限制為 32px，保持流暢視覺 */
  .footer-logos-group {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  /* 核心修正：直接重置 .footer-logo-item，避免繼承桌機 width: 240px 導致 iOS Safari 尺寸異常 */
  .footer-logo-item {
    width: auto;
    overflow: visible;
  }

  .footer-logo-item:first-child,
  .footer-logo-item:last-child {
    width: auto;
    height: 32px;
  }

  /* 手機版 Logo img 取消桌機 max-width 限制，改由容器 height 控制自然等比縮放 */
  .footer-logo-item img {
    width: auto;
    height: 100%;
    max-width: none;
  }

  .footer-right {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 32px;
  }

  .footer-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 確保內容在欄位中水平置中 (繁體中文註解) */
  }

  /* 聯絡資訊改為塊級置中、內部靠左排版，圖文極致對齊 (繁體中文註解) */
  .contact-list {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 12px;
  }

  .contact-list .contact-item {
    display: flex;
    align-items: flex-start;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    gap: 8px;
  }

  .contact-list .contact-item .footer-icon {
    margin-top: 3px; /* 微調圖示以對齊首行文字 (繁體中文註解) */
    flex-shrink: 0;
  }

  .contact-text {
    word-break: break-all;
    overflow-wrap: break-word;
  }

  /* 核心優化：消除胖手指誤觸。按鈕群垂直堆疊，寬度 100%，高度為 44px 觸控熱區 */
  .footer-btn-group {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 12px;
    margin-top: 24px;
    padding: 0 16px; /* 兩側安全邊距 */
  }

  .footer-btn {
    width: 100%;
    height: 44px; /* 黃金點擊高度 */
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 4px; /* 微圓角現代化 */
  }

  /* 社群連結置中與觸碰加大 */
  .social-links {
    justify-content: center;
    margin-top: 8px;
    gap: 20px;
  }

  .social-icon {
    width: 44px;
    height: 44px;
  }

  .copyright {
    margin-top: 32px;
    padding-top: 16px;
    font-size: 11px;
  }
}

.footer-col {
  width: auto;
}

.footer-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 18px;
}

.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-item {
  color: var(--text-muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-label {
  white-space: nowrap; /* 確保「聯絡地址：」等標籤與冒號永遠不折行 (繁體中文註解) */
  flex-shrink: 0;      /* 防止 flex 容器壓縮標籤 (繁體中文註解) */
}

.footer-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;        /* 防止 flex 容器壓縮圖示 */
  filter: brightness(0.8);
}

.social-links {
  display: flex;
  gap: 16px;
  align-items: center;
}

.social-icon {
  width: 40px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icon:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}

.social-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.copyright {
  text-align: center;          /* 修正：文字置中對齊 */
  font-size: 12px;
  color: #fff;
  margin-top: 45px;
  padding-top: 24.5px;
  padding-bottom: 24.5px;      /* 新增：與頂部 padding 呼應，實現極致上下對稱與精緻高度 */
  border-top: 0.5px solid #818181; /* 依 Figma 規格：使用 #818181 灰色邊框 */
  opacity: 0.8;
  padding-right: 24px;         /* 依 Figma 規格：px-24px 安全邊距 */
  padding-left: 24px;
}

.copyright a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.copyright a:hover {
  opacity: 1;
}
/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: none; /* Hidden by default */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  width: 912px;
  max-width: 95%;
  max-height: 90vh; /* 限制最大高度為螢幕的 90% */
  overflow-y: auto; /* 超出時顯示捲軸 */
  padding: 30px 40px;
  border-radius: 8px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modal-close {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 28px;
  cursor: pointer;
  color: var(--text-muted);
}

.modal-header {
  margin-bottom: 20px;
}

.modal-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.modal-title {
  font-size: 30px;
  font-weight: bold;
  color: var(--text-main);
}

.modal-body-img {
  display: block;
  max-width: 400px; /* 再縮小一點 */
  max-height: 45vh; /* 限制垂直高度，確保不會撐爆螢幕 */
  width: auto;
  height: auto;
  border-radius: 8px;
  margin: 0 auto 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  cursor: zoom-in;
}

.modal-body-img:hover {
  transform: scale(1.02);
}

.modal-section-title {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-main);
  margin-bottom: 12px;
}

.modal-desc {
  font-size: 14px;
  color: var(--text-heading);
  line-height: 1.6;
  margin-bottom: 15px;
}

/* About Page Specific */
.about-hero {
  background: var(--section-bg);
  border: 1px solid var(--border-color);
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 60px;
}

.about-hero h1 {
  font-size: 24px;
  letter-spacing: 7.2px;
  color: var(--text-muted);
  margin-bottom: 12px;
}

.about-section {
  max-width: 1215px;
  margin: 0 auto 100px;
}

.brand-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: flex-start;
}

.story-text p {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 26px;
  margin-bottom: 16px;
}

.story-img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 595/320;
  object-fit: cover;
  background: var(--section-bg);
}

/* Core Values */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 30px;
}

.value-card {
  border: 1px solid #e5e7eb;
  padding: 60px 30px;
  border-radius: 8px;
  text-align: center;
}

.value-card h4 {
  font-size: 20px;
  color: var(--dark-bg);
  margin-bottom: 16px;
}

/* Timeline */
.timeline-section {
  background: #f9fafb;
  padding: 60px 0;
  width: 100%;
}

.timeline-container {
  position: relative;
  max-width: 1228px;
  margin: 0 auto;
  padding: 40px 0;
}

.timeline-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--border-color);
}

.timeline-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
}

.timeline-item:nth-child(even) {
  flex-direction: row-reverse;
}

.timeline-box {
  width: 45%;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 25px;
  position: relative;
}

.timeline-dot {
  width: 40px;
  height: 40px;
  background: #e5e7eb;
  border: 2px solid var(--text-muted);
  border-radius: 50%;
  z-index: 1;
}

.timeline-year {
  font-weight: bold;
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 8px;
}

/* Partner Brands */
.partners-grid {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 30px;
}

.partner-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
}

/* Store Locator Banner */
.store-banner {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 60px;
}

.store-icon-circle {
  width: 96px;
  height: 96px;
  background: #e5e7eb;
  border: 1px solid #d1d5dc;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.store-icon-circle img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.store-btn {
  background: #1e2939; /* Use Figma color */
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
}

.btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Dropdown Navigation */
.nav-item-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #1c1b1b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  display: none;
  z-index: 1000;
}

.nav-item-dropdown:hover > .dropdown-menu {
  display: block;
}

.dropdown-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  position: relative;
  transition: background 0.2s;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.dropdown-item:hover {
  background: #4b4c4d;
  color: #ffffff;
}

/* Sub-dropdown (Level 2) */
.sub-dropdown {
  position: absolute;
  left: 100%;
  top: 0;
  background: #1c1b1b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  min-width: 200px;
  display: none;
}

.dropdown-item:hover > .sub-dropdown {
  display: block;
}

.sub-dropdown .dropdown-item {
  color: #fff;
}

.sub-dropdown .dropdown-item:hover {
  background: #4b4c4d;
  color: #fff;
}

.nav-icon {
  width: 14px; /* 符合 Figma size-[14px] */
  height: 14px; /* 符合 Figma size-[14px] */
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: brightness(0) invert(1); /* 使圖標變為白色 */
}

/* 修正箭頭方向：Figma 原始圖標為向下，需旋轉 -90 度變為向右 */
.nav-icon[alt="right"] {
  transform: rotate(-90deg);
}

/* --- Products Page Specific --- */
.products-page {
  padding: 30px 0 100px;
}

.products-header-section {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 17px;
  margin-bottom: 30px;
}

.page-title {
  font-size: 30px;
  font-weight: bold;
  color: #1e2939;
}

.products-layout {
  display: flex;
  gap: 80px;
  align-items: flex-start;
}

/* Sidebar Styling */
.products-sidebar {
  width: 256px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

/* 側欄收合橫桿：桌機（≥1024px）隱藏，<1024px 時顯示並取代整塊選單佔版（規則見下方 1023px media query） */
.sidebar-collapse-bar {
  display: none;
}

.sidebar-section {
  border-bottom: 1px solid #e5e7eb;
}

.sidebar-section:last-child {
  border-bottom: none;
}

.sidebar-header {
  background: #ffffff;
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 16px;
  color: #364153;
}

.sidebar-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

/* 修正圖標方向問題：展開時旋轉 180 度變為朝上 */
.sidebar-arrow.expanded {
  transform: rotate(180deg);
}

.sidebar-list {
  list-style: none;
  padding: 0;
  display: none;
}

.sidebar-section.expanded .sidebar-list {
  display: block;
}

.sidebar-list li {
  background: transparent;
  transition: background 0.2s;
}

.sidebar-list li.active {
  background: #6a7282;
}

.sidebar-list li a {
  display: block;
  padding: 8px 24px;
  text-decoration: none;
  font-size: 14px;
  color: #4a5565;
}

.sidebar-list li.active a {
  color: #ffffff;
}

/* Main Content & Product Grid */
.products-main {
  flex: 1;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* RWD 自適應優化 */
  gap: 24px;
}

/* 產品卡片外框 */
.product-card {
  background: #ffffff;
  border: 1px solid #000000; /* Figma 純黑細邊框 */
  text-decoration: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

/* Hover 卡片浮起與投影 */
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* 圖片展示區容器 (已整合防 CLS 優化) */
.product-card-img {
  background: #ffffff;
  aspect-ratio: 1 / 1; /* 防 CLS 佈局抖動 */
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* 保障 Hover 圖片不溢出 */
  position: relative;
}

/* ==========================================================================
   產品卡片標記 (Hot & New) 精緻視覺樣式 (繁體中文註解)
   ========================================================================== */
.product-card-badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 10;
  pointer-events: none; /* 點擊事件穿透，不干擾卡片點擊 */
}

.badge-tag {
  font-family: var(--font-main, 'Inter', sans-serif);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 3px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 熱門 HOT 標籤：使用品牌亮紅色，並帶有精緻微漸變與小投影 */
.badge-tag.hot {
  background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%);
  color: #ffffff;
}

/* 新品 NEW 標籤：使用尊爵純黑色漸變，與品牌紅色完美撞色 */
.badge-tag.new {
  background: linear-gradient(135deg, #374151 0%, #111827 100%);
  color: #ffffff;
}

/* 卡片 Hover 時，標籤微微隆起的奢華互動 */
.product-card:hover .badge-tag {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* 產品圖片渲染 */
.product-img-render {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 20px;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover 圖片 3D 放大優化 */
.product-card:hover .product-img-render {
  transform: scale(1.05);
}

.product-card-placeholder {
  background: #f3f4f6;
  color: #9ba3af;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 14px;
}

/* 黑底資訊欄 */
.product-card-info {
  background: #000000; /* Figma 黑色背景 */
  padding: 15px 24px;  /* Figma 內距：上下 15px，左右 24px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.product-card-text {
  flex: 1;
  min-width: 0;
}

.product-badges {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.badge-new {
  background-color: #e0f2fe;
  color: #0369a1;
}

.badge-hot {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* 型號 */
.product-model {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #9b9b9b; /* Figma 灰色型號 */
  line-height: 20px;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 名稱 */
.product-name {
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff; /* Figma 白色文字 */
  line-height: 24px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 箭頭容器 */
.product-card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.product-card-arrow svg {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Hover 箭頭向右滑動動畫 */
.product-card:hover .product-card-arrow svg {
  transform: translateX(4px);
}

/* Pagination */
.pagination {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

.page-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #6a7282;
  font-size: 16px;
  transition: all 0.2s;
}

.page-btn.active {
  background: #1e2939;
  border-color: #1e2939;
  color: #ffffff;
  font-weight: 500;
}

.page-btn:hover:not(.active) {
  border-color: #6a7282;
  color: #1e2939;
}

.page-dots {
  color: #6a7282;
}

/* --- Product Detail Page Specific --- */
.product-detail-page {
  padding: 60px 0 100px;
}

.product-main-info {
  display: flex;
  gap: 48px;
  margin-bottom: 60px;
}

/* Gallery */
.product-gallery {
  display: flex;
  gap: 26px;
}

/* 繁體中文註解：舊版圖庫類別 .thumb-list / .thumb / .main-image 已於 2026-07-18 清除死碼；
   現行圖庫樣式（.main-image-container / .thumbnail-list / .thumb-item）定義於 product-detail.php 頁內 style 區塊 */

/* Details */
.product-details {
  flex: 1;
  max-width: 620px; /* 放寬最大寬度，避免品名折行，同時保持與左側底部良好對齊 */
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px; /* 由 12px 收緊至 10px */
}

.model-code {
  font-size: 14px; /* 還原 Figma 14px */
  font-weight: bold;
  color: #6a7282;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 6px; /* Figma gap 6px */
}

.product-title {
  font-size: 30px; /* 還原 Figma 30px */
  font-weight: bold;
  color: #1e2939;
  margin-top: 0;
  line-height: 36px; /* 還原 Figma 36px */
}

/* 品牌紅色分隔線 (精準還原 Figma Node 632:4974) */
.brand-divider {
  width: 100%;
  max-width: 688px;
  height: 1.5px;
  background-color: var(--brand-red, #d01);
  margin: 15px 0 15px 0; /* 還原為 Figma 的 15px Gap */
}

/* ==========================================================================
   產品詳情頁：技術文件行動列（產品手冊 / 零件圖查詢）
   兩顆按鈕水平並列，圖示為內嵌 SVG 且以 currentColor 跟隨文字色，
   故 hover 換色時圖示自動跟著換，不需要 filter 硬轉。
   ⚠️ 主次由**配色**區分（實心深灰＝主、白底黑框＝次），不靠圖示區分。
   歷史：舊版是 .btn-part-query（標題列右上，固定 106×34px）＋ .part-search-btn
   （手冊鈕）兩套。後者的定義同時存在於本檔與 product-detail.php 的頁面級 <style>，
   而按鈕上還壓著一整串 inline style，把本檔那份的 border/color/padding/font-weight
   四個屬性全數覆寫而形同虛設。本次改寫一併收斂為這一組 .product-action-btn。
   ========================================================================== */
.product-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
}

.product-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 4px;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-action-btn svg {
  flex-shrink: 0;
}

/* 主要動作：下載產品手冊 */
.product-action-btn.is-primary {
  background-color: #4b5563;
  color: #ffffff;
  border: 1px solid #4b5563;
}
.product-action-btn.is-primary:hover {
  background-color: #374151;
  border-color: #374151;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(75, 85, 99, 0.2);
}

/* 次要動作：零件圖查詢 */
.product-action-btn.is-secondary {
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #000000;
}
.product-action-btn.is-secondary:hover {
  background-color: #d11919; /* 懸停改為品牌紅 */
  color: #ffffff;
  border-color: #d11919;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(209, 25, 25, 0.25);
}

/* 桌機與手機共用同一組文案。曾有過「桌機完整／手機縮短」的雙文案機制，
   那是因為最初的「下載產品手冊 (PDF)」帶圖示需 201px、超過手機每顆 166px 的上限。
   文案改為五個字後只需 120px，機制連同 media query 與 :only-child 例外一併移除。
   ⚠️ 文案若再變長，先量再決定要不要加回來（PROJECT_SKILLS 51）。 */

.info-section {
  margin-top: 18px; /* 由 22px 收緊至 18px */
}

.info-section h3 {
  font-size: 16px; /* 由 18px ➔ 16px */
  font-weight: 600;
  color: #1e2939;
  margin-bottom: 6px; /* 由 8px ➔ 6px */
}

.specs-list,
.features-list {
  list-style: none;
  padding: 0;
}

.specs-list li,
.features-list li,
.specs-content,
.features-content,
.specs-table td {
  font-size: 13px; /* 由 14px ➔ 13px */
  line-height: 18px; /* 行高調降，縮小文字間距，更為精緻 */
  color: #364153;
}

.specs-table th {
  font-size: 13px; /* 由 14px ➔ 13px */
  color: #1e2939;
  font-weight: 600;
}

/* 規格表懸停高亮平滑漸變 */
.specs-table tr {
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.specs-table tr:hover {
  background-color: #f9fafb;
}

/* Video Section（僅限產品詳情頁，避免與首頁 .video-section 衝突）*/
.product-detail-page .video-section {
  border-top: 1px solid #d1d5dc;
  padding-top: 40px;
  margin-top: 60px;
}

.section-header h2 {
  font-size: 24px;
  font-weight: bold;
  color: #1e2939;
  margin-bottom: 32px;
}

.video-placeholder {
  /* 修正：從固定 768px 改為響應式 max-width，防止手機爆版 */
  max-width: 768px;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  background: #e5e7eb;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.play-btn {
  width: 64px;
  height: 64px;
  background: #99a1af;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.play-btn img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.video-text {
  text-align: center;
}

.video-text p {
  font-size: 14px;
  color: #6a7282;
  margin-bottom: 4px;
}

.video-text span {
  font-size: 12px;
  color: #99a1af;
}

/* Video Tabs System */
.video-tabs {
  border-bottom: 1px solid #d1d5dc;
  display: flex;
  margin-bottom: 32px;
  width: 100%;
}

.video-tab {
  height: 54px;
  padding: 11px 16px;
  font-size: 18px;
  font-weight: 500;
  color: #1e2939;
  border-bottom: 2px solid #1e2939;
  cursor: pointer;
  text-align: center;
  min-width: 104px;
}

/* Related Products Section */
.related-products {
  border-top: 1px solid #e5e7eb;
  padding-top: 49px;
  margin-top: 60px;
}

/* ==========================================================================
   產品列表頁 & 產品詳情頁 — RWD 響應式斷點
   平板 768px~1023px / 手機 < 768px
   ========================================================================== */

/* --- 平板版 (768px ~ 1023px) --- */
@media (max-width: 1023px) {
  /* 產品詳情頁：主圖高度限制（防止平板主圖過高） */
  .main-image-container img {
    max-height: 450px;
  }

  /* 影片佔位框平板下維持 16:9 比例，全寬自動縮放 */
  .video-placeholder {
    max-width: 100%;
  }
}

/* --- 手機＋平板直向 (< 1024px)：側欄收合為橫桿 ---
   為何是 1024：768（iPad 直向）時左側欄 256px＋gap 80px 吃掉 44% 寬度，
   播放器僅剩 352px 比手機還小；<1024 一律側欄置頂收合、內容全寬。
   ⚠ 此斷點（側欄擺哪）與播放頁雙欄斷點 1280（內容分幾欄）語意不同，嚴禁誤併為同一個。 */
@media (max-width: 1023px) {
  /* 側邊欄改為上方全寬，主內容在下 */
  .products-layout {
    flex-direction: column;
    gap: 20px;
  }

  .products-sidebar {
    width: 100%;   /* 全寬側邊欄 */
    flex-shrink: unset;
  }

  /* 主內容區全寬：products-layout 轉為 column 後，基礎規則的
     align-items: flex-start 仍生效，主內容不會被拉伸，其 auto 寬度會依內容
     shrink-to-fit（如影音播放模式的長影片標題會撐到約 391px），溢出欄寬並
     把標題、資訊、按鈕推出右側裁切。明確補 width:100% 強制填滿欄寬。 */
  .products-main {
    width: 100%;
    min-width: 0;
  }

  /* 收合橫桿：常駐顯示「分類：當前分類名」＋箭頭，點擊展開（收合不隱藏，比照後台規範 7.11.5 精神） */
  .sidebar-collapse-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #364153;
    background: #ffffff;
  }
  .collapse-bar-current {
    color: #d11919;
    font-weight: 700;
  }
  .collapse-bar-arrow {
    width: 16px;
    height: 16px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar-open .collapse-bar-arrow {
    transform: rotate(180deg);
  }
  .sidebar-open .sidebar-collapse-bar {
    border-bottom: 1px solid #e5e7eb;
  }

  /* 分類面板本體：預設收合，展開走既有 350ms 抽屜動效 */
  .sidebar-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .sidebar-open .sidebar-body {
    max-height: 1200px; /* 大於實際內容高度，留有緩動彈性 */
  }
}

/* --- 手機版 (< 768px) --- */
@media (max-width: 767px) {
  /* === 全站 container 手機內距收窄 === */
  /* 僅在產品頁套用，避免影響其他頁面 */
  .products-page .container,
  .product-detail-page .container {
    padding: 0 16px;
  }

  /* 產品卡片格子：手機改為兩欄最小 150px */
  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  /* === 產品詳情頁：主圖區 === */
  .product-detail-page {
    padding: 24px 0 60px;
  }

  /* 手機主圖限高 350px，防止圖片撐滿整個螢幕 */
  .main-image-container img {
    max-height: 350px;
  }

  /* 縮圖在手機版改小尺寸 (96px → 68px)，橫排四張不會爆出邊界 */
  .thumb-item {
    width: 68px !important;
    height: 68px !important;
    flex-shrink: 0;
  }

  /* === 產品詳情頁：標題與按鈕 RWD 佈局 === */
  .detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
  }


  /* === 產品詳情頁：標題文字縮小 === */
  /* 30px 在 390px 螢幕上會造成「附收納箱)」單獨成行 */
  .product-title {
    font-size: 24px;
    line-height: 30px;
  }

  /* 型號碼在手機維持 14px，但字間距保留品牌感 */
  .model-code {
    font-size: 14px;
    letter-spacing: 1px;
  }

  /* === 技術文件按鈕：手機仍水平並列，兩顆等寬平分 ===
     舊版是 flex-direction: column 堆疊。改為並列的前提是文案縮短——
     實測「下載產品手冊 (PDF)」帶圖示需 201px，而 375px 下每顆上限為
     (375 − 內距 32 − gap 12) ÷ 2 = 166px，不縮短放不下。 */
  .product-actions {
    gap: 10px;
  }

  .product-action-btn {
    flex: 1;
    min-width: 0; /* 允許 flex 子項收縮到內容寬度以下，否則長文案會撐爆容器 */
    padding: 10px 12px;
  }


  /* 規格表格：手機版 key 欄收窄到 40% */
  .specs-table th {
    width: 40%;
    font-size: 14px;
  }

  .specs-table td {
    font-size: 14px;
  }

  /* 產品特色清單：手機縮小字體 */
  .features-list li,
  .specs-content {
    font-size: 14px;
  }

  /* 影片區塊上下間距收縮 */
  .product-detail-page .video-section {
    margin-top: 40px;
    padding-top: 30px;
  }

  /* 相關產品：手機下 padding 收縮 */
  .related-products {
    padding-top: 30px;
    margin-top: 40px;
  }

  /* 相關產品標題縮小 */
  .related-products .section-header h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }
}

/* --- Part Query Page --- */
.part-query-page {
  background-color: #ffffff;
  padding: 60px 0 100px;
  min-height: calc(100vh - 450px);
}

.part-query-header {
  text-align: center;
  margin-bottom: 40px;
}

.part-query-title {
  font-size: 24px;
  font-weight: 700;
  color: #005999;
  letter-spacing: 0.5px;
}

.part-viewer-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.part-image-wrapper {
  width: 100%;
  position: relative;
  background: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
}

.part-main-image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
  transform-origin: center center;
}

/* Zoom Controls */
.zoom-controls {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.zoom-btn {
  width: 36px;
  height: 36px;
  background: #005999;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.zoom-btn:hover {
  background: #004a80;
}

.zoom-btn.zoom-out {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Fullscreen Button */
.fullscreen-btn {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 40px;
  height: 40px;
  background: #005999;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: background 0.2s;
}

.fullscreen-btn:hover {
  background: #004a80;
}

/* Pagination */
.part-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  width: 100%;
}

.pag-arrow {
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: #6a7282;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}

.pag-arrow:hover {
  color: #005999;
}

.pag-numbers {
  display: flex;
  gap: 8px;
}

.pag-number {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  color: #4a5565;
  cursor: pointer;
  transition: all 0.2s;
}

.pag-number.active {
  background: #005999;
  color: white;
}

.pag-number:not(.active):hover {
  background: #f3f4f6;
}

/* 繁體中文註解：視窗式分頁的省略號（純指示、不可點），避免上百頁碼一次渲染造成 4152px 橫向溢出 */
.pag-ellipsis {
  min-width: 24px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #99a1af;
  user-select: none;
}

.pag-numbers {
  flex-wrap: wrap;
  justify-content: center;
}

/* --- Header Dropdown Adjustments --- */
.dropdown-menu {
  border: 0.25px solid #99a1af;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  min-width: 168px;
}

.dropdown-item.active-item {
  background: #6a7282;
  color: #ffffff;
}

.dropdown-item.active-item span {
  color: #ffffff;
}

.dropdown-item.active-item .nav-icon {
  filter: brightness(0) invert(1); /* 將圖示變為白色 */
}

.sub-dropdown {
  border: 0.25px solid #99a1af;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  min-width: 126px;
  left: 100%;
  top: 0;
}

.sub-dropdown .dropdown-item {
  text-align: center;
  justify-content: center;
  height: 32px;
  /* 子分類名稱不折行：長名稱（如「靜音變頻發電機」）在 126px 固定寬度下會斷字換行並溢出 32px 高度，改為單行讓浮層自動撐寬 */
  white-space: nowrap;
}

/* --- Product Videos Page Styles --- */
/* 播放模式雙欄佈局：左＝播放器/標題/推薦卡（flex 1.9 ≈ 65%），右＝本分類影片直式清單。
   播放器因此天然縮至可入鏡尺寸（1440px 下約 655×369），第一屏同時看得到標題、推薦卡與清單；
   <1280px 回退單欄堆疊（右欄清單轉為全寬橫式列，與手機版動線一致） */
.video-play-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.video-main-col {
  flex: 1.9;
  min-width: 0;
}
.video-side-col {
  flex: 1;
  min-width: 0;
}
.video-side-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.video-side-item {
  display: flex;
  gap: 10px;
  padding: 6px;
  border: 1.5px solid transparent; /* 佔位透明框：與播放中紅框同厚度，避免 hover/切換時跳動 */
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.video-side-item:hover {
  background: #f9fafb;
}
.video-side-item.playing {
  border-color: #d11919;
  background: #fff5f5;
}
.video-side-item .side-thumb {
  width: 128px;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #eee;
}
.video-side-item .side-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-side-item .side-meta {
  min-width: 0;
}
.video-side-item .side-title {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #364153;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-side-item .side-model {
  font-size: 11px;
  color: #b91c1c;
  font-weight: 700;
}
/* <1280px 時左側另有分類側欄，內容欄不足以再分兩欄（實測 1024px 下播放器僅剩 387px），回退單欄堆疊 */
@media (max-width: 1279px) {
  .video-play-layout {
    flex-direction: column;
  }
  .video-side-col {
    width: 100%;
  }
}

.video-display-container {
  background-color: #e5e7eb;
  border-radius: 8px;
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* ========== 影片 façade（點縮圖才載入播放器，根治 iOS 內嵌，見 PROJECT_SKILLS 27）========== */
.yt-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0;
  cursor: pointer;
  background-color: #000;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.yt-facade::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.3s ease;
}

.yt-facade:hover::before,
.yt-facade:focus-visible::before {
  background: rgba(0, 0, 0, 0.06);
}

.yt-facade-play {
  position: relative;
  z-index: 1;
  opacity: 0.88;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.yt-facade-play-shape {
  fill: #212121;
  fill-opacity: 0.8;
}

.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play {
  opacity: 1;
  transform: scale(1.06);
}

.yt-facade:hover .yt-facade-play-shape,
.yt-facade:focus-visible .yt-facade-play-shape {
  fill: #f00;
  fill-opacity: 1;
}

.yt-facade.is-loading {
  cursor: progress;
}

.yt-facade.is-loading .yt-facade-play {
  opacity: 0.4;
}

.yt-facade-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-player-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.play-icon-circle {
  width: 64px;
  height: 64px;
  background: #99a1af; /* Figma's gradient base */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.play-icon-circle:hover {
  transform: scale(1.1);
}

.play-icon-circle img {
  width: 32px;
  height: 32px;
}

.video-info-text {
  text-align: center;
}

.video-placeholder-text {
  color: #6a7282;
  font-size: 14px;
  margin: 0;
}

.video-resolution {
  color: #99a1af;
  font-size: 12px;
}

/* --- Service Points Page Styles --- */
.service-points-page {
  padding: 40px 0;
}

.service-search-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 30px;
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  align-items: center;
}

.search-input-wrapper {
  flex: 1;
  position: relative;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.search-input-wrapper input {
  border: none;
  padding: 12px;
  width: 100%;
  font-size: 16px;
  outline: none;
}

.filter-dropdown {
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  min-width: 120px;
  justify-content: space-between;
}

.search-submit-btn {
  background-color: #1e2939;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
}

.service-layout {
  display: flex;
  gap: 20px;
  height: 600px;
}

.service-map-area {
  flex: 1;
  background: #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  border: 1px solid #d1d5dc;
}

.map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #6a7282;
}

.map-marker {
  position: absolute;
  width: 32px;
  height: 32px;
  background: #1e2939;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
}

.service-list-sidebar {
  width: 426px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

/* --- Locations Page Specific --- */
.locations-page {
  padding: 30px 0 100px;
}

.locations-header-section {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  position: relative;
  width: 100%;
  padding-bottom: 0; /* 移除舊有的 padding 以符合 Figma 版面間距 */
  margin-bottom: 30px; /* 與下方篩選列的間距 */
}

.locations-title-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  width: 100%;
}

.locations-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 1.4px;
  color: var(--brand-red, #d11919); /* 英文副標紅色 */
  text-transform: uppercase;
  margin: 0;
}

.locations-header-section .page-title {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-weight: 700;
  font-size: 40px; /* 還原 Figma 的 40px 標題字級 */
  line-height: 36px;
  color: var(--dark-bg, #101828); /* 標題文字深邃碳黑 */
  margin: 0;
  border: none;
  padding: 0;
}

.locations-brand-line {
  width: 100%;
  height: 1.5px;
  background-color: var(--brand-red, #d11919); /* 品牌亮紅色裝飾底線 Line 3 */
  margin-top: 0;
}

/* 行動端響應式微調 */
@media (max-width: 767px) {
  .locations-header-section .page-title {
    font-size: 28px;
    line-height: 32px;
  }
  .locations-header-section {
    gap: 20px;
    margin-bottom: 20px;
  }
}

/* 繁體中文註解：還原 Figma Frame 364 的 40px 高度服務據點搜尋與篩選列 */
.locations-filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  background: white;
  padding: 16px 0;
  margin-bottom: 30px;
  border-radius: 8px;
  width: 100%;
}

/* Figma 300px 寬度搜尋輸入框 */
.search-input-group {
  width: 300px;
  position: relative;
  height: 40px;
  border: 1px solid #818181;
  border-radius: 4px;
  display: flex;
  align-items: center;
  background: white;
}

.search-icon-wrapper {
  padding: 0 12px;
  display: flex;
  align-items: center;
}

.search-icon-wrapper img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
  /* 繁體中文註解：search-icon.svg 內建填色為 white（供深色頂欄使用），
     白底輸入框需以 filter 轉深灰，否則白圖示在白底上隱形 */
  filter: brightness(0);
  opacity: 0.45;
}

.location-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: #1e2939;
  padding-right: 12px;
  background: transparent;
}

.location-search-input::placeholder {
  color: rgba(10, 10, 10, 0.5);
}

.filter-dropdown-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Figma 統一 40px 自訂下拉選單樣式 */
.custom-select-native {
  height: 40px;
  border: 1px solid #818181;
  border-radius: 4px;
  background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23818181%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 12px center;
  background-size: 10px auto;
  padding: 0 30px 0 15px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #000;
  cursor: pointer;
  min-width: 125px;
  appearance: none;
  outline: none;
}

/* Figma 78px 品牌紅搜尋按鈕 */
.search-locations-btn {
  background: #d11919;
  color: white;
  height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: 4px;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 1.2px;
  transition: background 0.3s;
}

.search-locations-btn:hover {
  background: #b01212;
}

/* 繁體中文註解：行動端與平板之響應式篩選佈局調整 */
@media (max-width: 1200px) {
  .locations-filter-bar {
    flex-wrap: wrap;
    gap: 12px;
  }
  .search-input-group {
    width: 100%;
  }
  .filter-dropdown-group {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .custom-select-native {
    min-width: 0;
    width: 100%;
  }
  .search-locations-btn {
    width: 100%;
  }
}

.locations-content-layout {
  display: flex;
  gap: 24px;
  height: 658px; /* 繁體中文註解：還原 Figma Frame 379 完美高度 */
  align-items: stretch; /* 繁體中文註解：強迫地圖與側邊欄高寬完全一致拉伸 */
}

.map-container {
  flex: 1;
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #d1d5dc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 繁體中文註解：優化精緻懸浮陰影 */
  position: relative; /* 繁體中文註解：為載入毛玻璃覆蓋層絕對定位 */
}

/* 繁體中文註解：地圖載入 Skeleton 毛玻璃遮罩與動畫 */
.map-loader-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px); /* 繁體中文註解：毛玻璃質感 */
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.map-loader-overlay.is-loading {
  opacity: 1;
  pointer-events: auto;
}

/* 繁體中文註解：骨架屏掃描流光特效 */
.skeleton-pulse {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(243, 244, 246, 0.1) 25%,
    rgba(229, 231, 235, 0.45) 50%,
    rgba(243, 244, 246, 0.1) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-sweep 1.5s infinite linear;
  z-index: 1;
}

@keyframes skeleton-sweep {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 繁體中文註解：旋轉載入器 */
.loader-spinner-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
}

.premium-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(209, 25, 25, 0.1);
  border-top-color: #d11919; /* 繁體中文註解：品牌亮紅 */
  border-radius: 50%;
  animation: spin 0.8s infinite linear;
}

.loader-text {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: #1e2939;
  font-weight: 500;
  letter-spacing: 0.5px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.map-placeholder {
  width: 100%;
  height: 100%;
  background: #e5e7eb;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.map-placeholder-content {
  text-align: center;
}

.map-placeholder-icon {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin-bottom: 12px;
}

.map-placeholder-title {
  font-size: 24px;
  color: #6a7282;
  margin-bottom: 4px;
}

.map-placeholder-desc {
  color: #99a1af;
}

.map-pin {
  position: absolute;
  width: 32px;
  height: 36px;
}

.map-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
}

.pin-head {
  width: 32px;
  height: 32px;
  background: #1e2939;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.pin-head.secondary {
  background: #6a7282;
}

.pin-head img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.pin-tip {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #1e2939;
  margin-top: -2px; /* Slight overlap to ensure no gap */
}

.pin-tip.secondary {
  border-top-color: #6a7282;
}

/* 繁體中文註解：還原 Figma Frame 379 的側邊欄與無框分割線據點卡片設計 */
.locations-sidebar {
  width: 418px;
  background: white;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%; /* 繁體中文註解：高度改為 100% 依附父容器，確保左右兩側地圖與列表絕對等高對齊 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 46px 白底細線頂部欄 */
.sidebar-top-bar {
  background: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  height: 46px;
}

.results-count {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: #0a0a0a;
}

.results-highlight {
  font-weight: 700;
  color: #d11919;
}

/* 極簡清除篩選按鈕 (灰字帶 Close Icon) */
.clear-filter-btn-minimal {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #737373;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

.clear-filter-btn-minimal:hover {
  color: #d11919;
}

.clear-filter-btn-minimal .close-icon {
  width: 14px;
  height: 14px;
}

/* 據點滾動區與全瀏覽器相容精細灰色滾動條 (可在優化之處) */
.locations-scroll-area {
  padding: 0;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Firefox 相容滾動條 */
  scrollbar-width: thin;
  scrollbar-color: #99a1af transparent;
}

/* Chrome, Safari, Edge 專屬高解析客製化滾動條 */
.locations-scroll-area::-webkit-scrollbar {
  width: 12px; /* 滾動條整體寬度 */
}

.locations-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.locations-scroll-area::-webkit-scrollbar-thumb {
  background-color: #99a1af; /* 滑塊灰色 */
  border-radius: 99px; /* 圓角滑軌 */
  border: 3px solid transparent; /* 滑塊內縮效果 */
  background-clip: padding-box;
}

.locations-scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: #737373; /* Hover 時變深 */
}

/* ── 捲動續載（首屏只送 40 筆，捲到底再抓下一批）─────────────────────────── */
.locations-load-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 20px 16px 28px;
  flex-shrink: 0; /* 父層是 flex column，不加會被壓扁到看不見 */
}

.locations-load-more-btn {
  display: inline-block;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main, #1a1a1a);
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.3s;
}

.locations-load-more-btn:hover:not(:disabled) {
  border-color: #d11919;
  color: #d11919;
}

.locations-load-more-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.locations-load-more-status {
  font-size: 13px;
  color: #d11919;
  min-height: 18px; /* 常駐佔位，出現訊息時不會把列表往上頂 */
}

/* 據點卡片：高雅無框下邊線設計 */
.location-card {
  position: relative; /* 繁體中文註解：為了 ::before 品牌紅條定位 */
  border-bottom: 1px solid #d1d5dc;
  padding: 20px 15px;
  transition: background-color 0.2s, padding-left 0.2s;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.location-card:hover {
  background-color: #f9fafb;
}

/* 繁體中文註解：據點卡片 Active 選中狀態 */
.location-card.is-active {
  background-color: #f8fafc; /* 繁體中文註解：選中時的雅緻背景色 */
  padding-left: 22px; /* 繁體中文註解：卡片內容稍微右縮，讓出空間給紅色邊條 */
}

/* 繁體中文註解：以偽元素滑出 4px 品牌紅垂直選中條與 Transition 微動畫 */
.location-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background-color: #d11919; /* 繁體中文註解：品牌亮紅色 */
  transition: width 0.2s ease-in-out;
}

.location-card.is-active::before {
  width: 4px; /* 繁體中文註解：選中時寬度變為 4px */
}

.location-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

/* Figma 15px 據點標題 */
.location-name {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #171717;
  margin: 0;
}

/* 據點類型標籤組 */
.location-badges {
  display: flex;
  gap: 7px;
}

.badge {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 16.5px;
  display: inline-block;
}

.badge-repair {
  background-color: #e5e5e5;
  color: #404040;
}

.badge-purchase {
  background-color: #ffe2e2;
  color: #d11919;
}

.badge-exhibit {
  background-color: #fef08a; /* 金黃色展示中心標籤 */
  color: #854d0e;
}

/* 聯絡資訊 Figma 13px */
.location-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.info-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.6;
}

.info-text {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 13px;
  color: #525252;
}

/* 按鈕並列操作區 */
.location-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* 地圖定位灰框白底按鈕 */
.action-btn-panto {
  border: 1px solid #d4d4d4;
  background: white;
  color: #0a0a0a;
  height: 30px;
  padding: 0 15px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  outline: none;
}

.action-btn-panto:hover {
  background-color: #f5f5f5;
}

/* Google Map 導航亮紅實體按鈕 */
.action-btn-external {
  background-color: #d11919;
  color: white;
  height: 30px;
  padding: 0 15px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  font-family: "Noto Sans TC", sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s;
  outline: none;
}

.action-btn-external:hover {
  background-color: #b01212;
}

/* FAQ Page Styles */
/* 繁體中文註解：常見問題頁面樣式 */
.faq-page {
  background-color: #fff;
  padding-top: 80px; /* 繁體中文註解：替代原有 faq-hero 區塊，提供優雅的頂部留白 */
  padding-bottom: 80px;
}

/* 繁體中文註解：保留備用 Hero 樣式，但 faq.php 中已移除 */
.faq-hero {
  background-color: #f9fafb;
  padding: 60px 0;
  margin-bottom: 40px;
}

.brand-image-placeholder {
  background-color: #e5e7eb;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  height: 350px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.brand-image-placeholder h2 {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #99a1af;
  letter-spacing: 7.2px;
  margin-bottom: 12px;
}

.brand-image-placeholder p {
  font-size: 14px;
  color: #99a1af;
  letter-spacing: 1.4px;
}

/* 繁體中文註解：全新 Figma 規格常見問題標題區塊 */
.faq-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 45px; /* 繁體中文註解：對應 Figma 的 gap-45px */
}

/* 繁體中文註解：Figma 規格 14px 品牌紅英文上標 */
.faq-header .page-category {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: #d11919;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 14px; /* 繁體中文註解：對應 Figma 標題間的 gap-14px */
}

/* 繁體中文註解：Figma 規格 40px 網頁主標題 */
.faq-header .page-title {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 36px;
  color: #101828;
  margin: 0;
}

/* 繁體中文註解：保留備用副標題樣式 */
.faq-header .page-subtitle {
  font-size: 14px;
  color: #6a7282;
  max-width: 636px;
  margin: 14px auto 0;
  line-height: 1.6;
}

/* 繁體中文註解：Figma 規格 1000px 寬度頁籤導覽容器 */
.faq-tabs {
  max-width: 1000px;
  width: 100%;
  height: 55px;
  margin: 0 auto 45px; /* 繁體中文註解：下方間距對應 Figma 的 gap-45px */
  border-bottom: 0.5px solid #818181; /* 繁體中文註解：細灰色下底線 */
  display: flex;
  justify-content: flex-start; /* 繁體中文註解：頁籤從左側開始排起 */
  gap: 15px; /* 繁體中文註解：頁籤按鈕間距 15px */
  align-items: flex-start;
  padding-bottom: 0.5px;
  box-sizing: border-box;
}

/* 繁體中文註解：Figma 規格極簡精緻頁籤按鈕 */
.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-bottom: 3px solid transparent; /* 繁體中文註解：預設透明底線以防震動 */
  width: 104px; /* 繁體中文註解：Figma 寬度 */
  height: 54px; /* 繁體中文註解：Figma 高度 */
  padding: 0;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-size: 18px; /* 繁體中文註解：Figma 字級 */
  font-weight: 500;
  color: #667085; /* 繁體中文註解：全端優化 - 未選中狀態使用中灰色提高視覺層級對比 */
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  box-sizing: border-box;
}

/* 繁體中文註解：Hover 微互動狀態 */
.tab-btn:hover {
  color: #101828;
  border-bottom-color: #d1d5dc;
}

/* 繁體中文註解：Figma 規格選中 Active 狀態 */
.tab-btn.active {
  color: #101828; /* 繁體中文註解：選中狀態為深黑色 */
  font-weight: 600;
  border-bottom-color: #d11919; /* 繁體中文註解：3px 品牌紅底線 */
}

.faq-accordion-list {
  max-width: 1000px;
  margin: 0 auto 60px;
  display: flex;
  flex-direction: column;
  gap: 10px; /* 繁體中文註解：對齊 Figma 規格，從 12px 微調為 10px */
}

.accordion-item {
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  overflow: hidden;
}

.accordion-header {
  width: 100%;
  background: none;
  border: none;
  min-height: 69px; /* 繁體中文註解：對齊 Figma 规格 69px Header 高度 */
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
}

/* 繁體中文註解：手風琴選項悸停狀態微互動 */
.accordion-header:hover {
  background-color: #f9fafb;
}

.accordion-header span {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-size: 18px; /* 繁體中文註解：對齊 Figma 18px 說明字體大小 */
  font-weight: 500; /* 繁體中文註解：對齊 Figma Medium 字重，取代半體 700 */
  color: #101828;
  line-height: 1.5;
  padding-right: 16px; /* 繁體中文註解：與右側箭頭保持間距 */
}

.accordion-header .arrow-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  object-fit: contain;
}

.accordion-item.expanded .arrow-icon {
  transform: rotate(180deg);
}

/* 繁體中文註解：使用 CSS Grid grid-template-rows 取代 max-height hack
   優勢：零 Reflow、硬體加速、任意內容長度都能平滑展開 */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr; /* 繁體中文註解：收合狀態為 0 行高 */
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
  background-color: #fcfcfc;
}

/* 繁體中文註解：展開狀態改為 1fr，允許內容自然擐高 */
.accordion-item.expanded .accordion-content {
  grid-template-rows: 1fr;
}

/* 繁體中文註解：內層包裹 div， min-height: 0 是 CSS Grid 動畫的關鍵處，不可移除 */
.accordion-content-inner {
  min-height: 0;
  overflow: hidden;
  border-top: 0;
  transition: border-top-color 0.3s ease;
}

.accordion-item.expanded .accordion-content-inner {
  border-top: 1px solid #d1d5dc; /* 繁體中文註解：展開時才顯示分隔線 */
}

/* 繁體中文註解：手風琴回答內容文字樣式 */
.accordion-answer {
  padding: 20px 20px 30px 20px;
  line-height: 1.8;
  color: #4b5563;
  white-space: pre-line;
  font-size: 15px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
}

/* 繁體中文註解：空狀態提示文字樣式 */
.faq-empty {
  text-align: center;
  color: #99a1af;
  padding: 60px 20px;
  font-size: 15px;
}

.guide-section {
  margin-bottom: 24px;
}

.guide-section h4 {
  font-size: 14px;
  font-weight: 700;
  color: #1e2939;
  margin-bottom: 12px;
}

.guide-list {
  list-style: none;
  padding-left: 0;
}

.guide-list li {
  font-size: 14px;
  color: #4a5565;
  margin-bottom: 8px;
  position: relative;
  padding-left: 28px;
}

.guide-list li::before {
  content: counter(li-counter) ".";
  counter-increment: li-counter;
  position: absolute;
  left: 0;
  font-weight: 700;
  color: #99a1af;
}

.guide-list {
  counter-reset: li-counter;
}

.guide-summary {
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 4px;
}

.guide-summary strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e2939;
  margin-bottom: 8px;
}

.guide-summary p {
  font-size: 14px;
  color: #4a5565;
  margin: 0;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

/* 繁體中文註解：未選中頁碼按鈕樣式，對齊 Figma 深黑邊框 #2a2a2a */
.page-link {
  width: 32px;
  height: 32px;
  border: 1px solid #2a2a2a; /* 繁體中文註解： Figma 規格深黑邊框 */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #2a2a2a; /* 繁體中文註解： Figma 規格深黑字色 */
  font-size: 16px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-weight: 400;
  transition: all 0.2s ease;
}

/* 繁體中文註解：悸停狀態微互動 */
.page-link:hover:not(.active) {
  background-color: #f3f4f6;
}

/* 繁體中文註解：選中狀態改為 Figma 品牌紅 #d11919，字重加重為 Medium 500 */
.page-link.active {
  background-color: #d11919;
  border-color: #d11919;
  color: #fff;
  font-weight: 500;
}

/* 繁體中文註解：省略號（...)樣式，無邊框無背景符合 Figma 視覺 */
.page-dots {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a2a2a;
  font-size: 16px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  user-select: none;
}

/* Warranty Page Specific */
.warranty-page {
  padding: 60px 0 100px;
}

/* 繁體中文註解：頁面 Header 區域，分隔線改品牌紅對齊 Figma */
.warranty-header {
  max-width: 630px;
  margin: 0 auto 40px;
  border-bottom: 2px solid #d11919;
  padding-bottom: 30px;
}

/* 繁體中文註解：WARRANTY LOGIN 小標，對齊 Figma 14px Bold 紅色 letter-spacing */
.warranty-category-label {
  display: block;
  font-family: var(--font-main);
  font-weight: 700;
  font-size: 14px;
  color: #d11919;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.warranty-header .page-title {
  font-size: 40px;
  font-weight: 700;
  color: #101828;
  line-height: 1.1;
  margin-bottom: 15px;
}

.warranty-header .page-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: #000;
  line-height: 24px;
}

/* 繁體中文註解：表單容器，移除外框，寬度對齊 Figma 630px */
.warranty-form-container {
  max-width: 630px;
  margin: 0 auto;
}

/* 繁體中文註解：表單整體垂直間距 */
.warranty-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 繁體中文註解：兩欄並排格線，對齊 Figma 300px+300px 雙欄排列 */
.warranty-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

/* 繁體中文註解：地址欄等全寬單欄 */
.warranty-form-row.full {
  grid-template-columns: 1fr;
}

/* 繁體中文註解：單個欄位 — Label 在上，Input 在下，gap: 5px 對齊 Figma */
.warranty-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 繁體中文註解：欄位標籤，Inter Medium 16px #364153 */
.warranty-field-label {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
}

/* 繁體中文註解：必填星號，品牌紅 #d11919 對齊全站設計規範 */
.required-star {
  color: #d11919;
  margin-right: 2px;
}

/* 繁體中文註解：欄位提示文字（如：機身貼紙標示 code 處），12px 灰色 */
.field-hint {
  font-size: 12px;
  color: #6a7282;
  font-weight: 500;
  line-height: 24px;
  margin-top: 2px;
}

/* 繁體中文註解：文字輸入框，高度改為 Figma 規格 35px（原 42px） */
.warranty-field-input {
  width: 100%;
  height: 35px;
  background: #f9fafb;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  padding: 0 16px;
  font-size: 16px;
  font-family: var(--font-main);
  color: var(--text-main);
  outline: none;
  transition: border-color 0.2s;
}

.warranty-field-input:focus {
  border-color: #d11919;
}

.warranty-field-input::placeholder {
  color: #99a1af;
}

/* 繁體中文註解：購買日期欄位（含日期選擇器 icon 調整） */
.warranty-field-input[type="date"] {
  cursor: pointer;
}

/* 繁體中文註解：自訂拖曳上傳區，對齊 Figma 168px 虛線框設計 */
.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 168px;
  background: #f9fafb;
  border: 2px dashed #d1d5dc;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  padding: 34px;
  box-sizing: border-box;
}

.upload-dropzone:hover {
  border-color: #99a1af;
}

/* 繁體中文註解：拖曳進入時高亮顯示 */
.upload-dropzone.dragover {
  border-color: #d11919;
  background: #fff5f5;
}

/* 繁體中文註解：上傳 icon 圓形白底圓鈕，對齊 Figma 48x48 drop-shadow */
.upload-icon-circle {
  width: 48px;
  height: 48px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 繁體中文註解：上傳提示文字，14px #99a1af Inter Medium */
.upload-hint-text {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #99a1af;
  text-align: center;
}

/* 繁體中文註解：已選取的檔名顯示 */
.upload-filename {
  font-size: 12px;
  color: #6a7282;
  font-weight: 500;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 繁體中文註解：成功提示框 */
.warranty-success {
  background: #dcfce7;
  color: #166534;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;
  text-align: center;
  font-weight: 500;
}

/* 繁體中文註解：表單送出區域，含上分隔線 */
.form-footer {
  margin-top: 20px;
  padding-top: 33px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  justify-content: center;
}

/* 繁體中文註解：送出按鈕改為品牌紅 #d11919（原為深藍黑 #1e2939），對齊 Figma */
.submit-btn {
  width: 200px;
  height: 52px;
  background: #d11919;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-main);
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1);
}

.submit-btn:hover {
  background: #b71212;
}

/* --- Contact Page Specific (Figma 改版) --- */
.contact-page {
  padding: 80px 0 120px;
  background-color: #fafbfc; /* 繁體中文註解： 給予高雅淺底背景色 */
  font-family: "Inter", "Noto Sans TC", sans-serif;
}

/* 繁體中文註解： 容器最大寬度 1200px */
.contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 繁體中文註解： 雙欄網格配置：375px 左欄資訊，630px 右欄表單，中間大間距 160px，對齊 Figma */
.contact-grid {
  display: grid;
  grid-template-columns: 375px 630px;
  gap: 160px;
  justify-content: center;
  align-items: flex-start;
}

/* ==========================================
   左欄：聯絡資訊
   ========================================== */
.contact-info-section {
  width: 375px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 繁體中文註解： 標題組 */
.contact-title-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-bottom: 30px;
  position: relative;
}

.contact-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #d11919;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.contact-title {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-weight: 700;
  font-size: 40px;
  color: #101828;
  margin: 0;
  line-height: 1.2;
}

/* 繁體中文註解： 紅色裝飾下劃線，對齊 Figma */
.title-underline {
  width: 100%;
  height: 2px;
  background: #d11919;
  position: absolute;
  bottom: 0;
  left: 0;
}

/* 繁體中文註解： 聯絡列表 */
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: center;
}

.info-icon-wrapper {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d11919; /* 繁體中文註解： 圖示紅色主色調 */
}

.info-svg-icon {
  width: 24px;
  height: 24px;
  stroke: #d11919;
  stroke-width: 2;
  transition: transform 0.3s ease;
}

/* 繁體中文註解： 滑鼠移入聯絡資訊時的放大動效 */
.contact-info-item:hover .info-svg-icon {
  transform: scale(1.15);
}

.info-text-content {
  flex-grow: 1;
}

.info-main-text,
.info-link-text {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #1e2939;
  margin: 0;
  text-decoration: none;
  display: inline-block;
  transition: color 0.2s ease;
}

.info-link-text:hover {
  color: #d11919;
}

/* ==========================================
   左欄：可點的聯絡方式（規範第 10 章）
   ------------------------------------------
   表單下架後，這些連結是訪客唯一的聯絡動線，因此「看得出來可以點」
   比視覺乾淨更重要——動作提示一律常駐顯示，不做 hover 才出現。
   ⚠️ 服務時間沒有動作，故不套用 .is-actionable，也不得有任何 hover 回饋
      （規範 2.3：「有回饋卻無作用」的假可點狀態使用者只會以為自己沒點準）。
   ========================================== */
.contact-info-item {
  align-items: flex-start;
  /* ⚠️ 必須明寫 stretch：≤1199px 的既有規則 .contact-info-list{align-items:flex-start}
     會讓每一列縮成自己的內容寬度，複製鈕於是各自停在文字尾端、四列參差不齊
     （實測 375px 下右緣分別落在 367/223/280/324）。桌機因為預設 stretch 看不出來。 */
  align-self: stretch;
  padding: 10px 12px;
  /* 負 margin 讓熱區向外撐開，但維持與標題同一條視覺左緣 */
  margin: 0 -12px;
  border-radius: 10px;
  transition: background-color 0.25s ease;
}

/* 上方 .contact-info-list 的 gap 為 15px，加上本區塊的縱向 padding 會過鬆 */
.contact-info-list {
  gap: 4px;
}

.contact-info-item.is-actionable:hover {
  background-color: rgba(209, 25, 25, 0.05);
}

.info-main-link {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1 1 auto;
  min-width: 0; /* 讓長地址能正常換行而不撐破 flex 容器 */
  text-decoration: none;
}

/* 圖示在 flex-start 下需微調，才與第一行文字的視覺中心對齊 */
.contact-info-item .info-icon-wrapper {
  margin-top: 2px;
}

.info-text-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.info-main-link .info-main-text {
  display: block;
  transition: color 0.2s ease;
}

.contact-info-item.is-actionable:hover .info-main-text {
  color: #d11919;
}

/* 動作提示：告訴使用者「點這裡會發生什麼」 */
.info-action-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  color: #6a7282;
  transition: color 0.2s ease;
}

.contact-info-item.is-actionable:hover .info-action-hint {
  color: #d11919;
}

.info-hint-arrow {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* 複製按鈕：桌機點 tel: 多半沒有反應，這是不分裝置都有效的備援動線 */
.info-copy-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #9ca3af;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.info-copy-btn svg {
  width: 16px;
  height: 16px;
}

.info-copy-btn:hover {
  border-color: #d11919;
  color: #d11919;
}

.info-copy-btn.is-copied {
  border-color: #16a34a;
  color: #16a34a;
}

.info-copy-btn.is-failed {
  border-color: #d11919;
  color: #d11919;
}

/* 複製結果提示（成功與失敗都要講，靜默失敗會讓人貼上空白而不自知） */
.info-copy-btn[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  white-space: nowrap;
  background: #1e2939;
  color: #fff;
  font-size: 12px;
  line-height: 1;
  padding: 6px 8px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 5;
}

/* ==========================================
   右欄：主視覺（規範第 10 章；2026-08-04 起取代嵌入地圖）
   ------------------------------------------
   限高並垂直置中對齊左欄：圖片是純視覺，不該比聯絡資訊還搶版面。
   ⚠️ 一律 object-fit: contain，嚴禁 cover——營運換上的圖比例不可控，
      cover 會把主體（吉祥物、文字）裁掉，而且不會有任何警告。
   ========================================== */
.contact-visual-section {
  width: 630px;
  align-self: stretch;      /* 撐滿左欄高度，好讓圖片在其中垂直置中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-visual {
  width: 100%;
  display: flex;
  justify-content: center;
}

.contact-visual img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 480px;        /* 限高：與左欄資訊列的整體高度相當 */
  height: auto;
  object-fit: contain;
}

/* LINE 字符是**實心路徑**，不是描邊：
   .info-svg-icon 帶有 stroke:#d11919 + stroke-width:2，套上去會讓每一條路徑再多一圈
   2px 紅框而糊成一團，必須個別關掉。顏色改由 fill="currentColor" 承接
   .info-icon-wrapper 的 #d11919，與其餘四個描邊圖示同色。hover 放大動效保留。 */
.info-svg-icon.is-brand {
  stroke: none;
}

/* 未設定主視覺時退回單欄置中，不留空白（.is-single 由 contact.php 依設定加上） */
.contact-grid.is-single {
  grid-template-columns: minmax(0, 630px);
  justify-content: center;
}


/* 頁面引導文案：頁面性質已從「送出表單」改為「選擇聯絡方式」，必須明講 */
.contact-intro {
  margin: 0;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-size: 15px;
  line-height: 24px;
  color: #6a7282;
}

/* ==========================================
   右欄：聯絡表單
   ========================================== */
.contact-form-section {
  width: 630px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 表單啟用時改放在地圖下方的全寬區，而非與地圖爭奪右欄（規範第 10 章） */
.contact-form-section.is-standalone {
  margin: 60px auto 0;
  padding-top: 48px;
  border-top: 1px solid #e5e7eb;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* 繁體中文註解： 欄位並排 row，對齊 Figma 300px + 300px */
.form-row {
  display: grid;
  grid-template-columns: 300px 300px;
  gap: 30px;
}

/* 繁體中文註解： 欄位組 */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group.full-width {
  width: 100%;
}

.form-label {
  font-family: "Inter", "Noto Sans TC", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  color: #364153;
}

.form-label .required {
  color: #fb2c36;
  margin-right: 4px;
}

/* 繁體中文註解： 輸入框控制項，採用 Figma 規格：#f9fafb 背景, #d1d5dc 邊框, 35px 高度 */
.form-control {
  width: 100%;
  height: 35px;
  background: #f9fafb;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  padding: 0 12px;
  font-size: 15px;
  font-family: "Inter", "Noto Sans TC", sans-serif;
  color: #101828;
  outline: none;
  box-sizing: border-box;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 繁體中文註解： 多行留言區，高度為 Figma 規格 200px */
textarea.form-control.text-area {
  height: 200px;
  padding: 10px 12px;
  resize: vertical;
}

/* 繁體中文註解： Focus 平滑微發光與變紅 */
.form-control:focus {
  background: #ffffff;
  border-color: #d11919;
  box-shadow: 0 0 0 3px rgba(209, 25, 25, 0.1);
}

.form-control:hover:not(:focus) {
  border-color: #99a1af;
}

.form-control::placeholder {
  color: #99a1af;
  opacity: 0.7;
}

/* 繁體中文註解： 提交按鈕區域 */
.form-submit-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

/* 繁體中文註解： 送出表單按鈕，對齊 Figma (#d11919) */
.contact-submit-btn {
  width: 200px;
  height: 52px;
  background: #d11919;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0px 1px 1.5px rgba(0,0,0,0.1), 0px 1px 1px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}

.contact-submit-btn:hover {
  background: #b01414;
  transform: translateY(-1px);
  box-shadow: 0px 4px 6px rgba(209, 25, 25, 0.15), 0px 2px 4px rgba(0,0,0,0.06);
}

.contact-submit-btn:active {
  transform: translateY(0);
  background: #901010;
}

/* 繁體中文註解： 載入 spinner 動畫樣式 */
.btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.contact-submit-btn.loading .btn-spinner {
  display: inline-block;
}

/* ==========================================
   通知訊息框樣式
   ========================================== */
.contact-alert {
  padding: 15px 20px;
  border-radius: 6px;
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.05);
}

.alert-success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.alert-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

/* ==========================================
   響應式佈局 (RWD)
   ========================================== */
@media (max-width: 1199px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 60px;
    justify-items: center;
  }
  
  .contact-info-section,
  .contact-form-section,
  .contact-visual-section {
    width: 100%;
    max-width: 630px;
  }

  .contact-info-list {
    align-items: flex-start;
  }
}

@media (max-width: 767px) {
  .contact-page {
    padding: 40px 0 80px;
  }

  .contact-title {
    font-size: 32px;
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .contact-submit-btn {
    width: 100%; /* 繁體中文註解： 手機端按鈕滿寬，點擊更便利 */
  }

  /* 地圖按桌機比例縮放會變成一條無用的細長條，改為固定高度。
     DOM 順序為「聯絡資訊 → 地圖」，堆疊後正好先給能立刻行動的電話。 */
  .contact-visual img {
    max-height: 320px;
  }

  .contact-form-section.is-standalone {
    margin-top: 40px;
    padding-top: 32px;
  }

  /* ==========================================
     保固登錄手機版 (RWD) 優化 (繁體中文註解)
     ========================================== */
  .warranty-page {
    padding: 40px 0 60px;
  }
  .warranty-page .container {
    padding: 0 16px; /* 覆寫手機端容器邊距，防止版面爆開 (繁體中文註解) */
  }
  .warranty-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    max-width: 100%;
  }
  .warranty-header .page-title {
    font-size: 28px; /* 縮小手機端標題字體 (繁體中文註解) */
  }
  .warranty-header .page-subtitle {
    font-size: 14px;
    line-height: 22px;
  }
  .warranty-form {
    gap: 20px; /* 縮小表單行間距 (繁體中文註解) */
  }
  .warranty-form-row {
    grid-template-columns: 1fr; /* 核心修正：雙欄強制改為單欄排列 (繁體中文註解) */
    gap: 20px;
  }
  .upload-dropzone {
    height: 140px; /* 壓縮拖曳區高度，節省手機縱向空間 (繁體中文註解) */
    padding: 20px;
  }
  .submit-btn {
    width: 100%; /* 手機端按鈕滿寬，消除胖手指誤觸 (繁體中文註解) */
    height: 48px;
  }
}

/* --- Catalog Page Specific --- */
.catalog-page {
  padding: 30px 0 100px;
}

.page-header {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 17px;
  margin-bottom: 38px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 36px 24px;
  margin-bottom: 48px;
}

/* 繁體中文註解：手機版型錄改 2 欄，避免桌機 5 欄在 375px 下把封面壓到僅 40px（形同未載入） */
@media (max-width: 768px) {
  .catalog-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 16px;
  }
}

.dm-image-placeholder {
  width: 100%;
  aspect-ratio: 259/345;
  background: #e5e7eb;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.dm-placeholder-text {
  font-size: 20px;
  font-weight: 700;
  color: #99a1af;
}

.dm-placeholder-sub {
  font-size: 12px;
  color: #99a1af;
}

.dm-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dm-title {
  font-size: 14px;
  font-weight: 500;
  color: #364153;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.8em; /* 確保標題高度一致 */
}

.dm-date {
  font-size: 12px;
  color: #99a1af;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

.page-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d1d5dc;
  border-radius: 4px;
  color: #6a7282;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.2s;
}

.page-btn:hover {
  border-color: #99a1af;
  background: #f9fafb;
}

.page-btn.active {
  background: #1e2939;
  border-color: #1e2939;
  color: #ffffff;
  font-weight: 500;
}

.page-dots {
  color: #6a7282;
  font-size: 16px;
  padding: 0 4px;
}

/* --- Catalog Viewer Specific --- */
.catalog-viewer-body {
  background: #000;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.viewer-top-bar {
  height: 64px;
  background: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

.viewer-main {
  height: calc(100vh - 128px);
  margin-top: 64px;
  background: #323232;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.book-container {
  display: flex;
  box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.5);
  background: #fff;
  transition: transform 0.3s ease;
}

.book-page {
  width: 576px;
  height: 713px;
  background: #fff;
  position: relative;
  overflow: hidden;
}

.book-page.left {
  background: #f3f4f6;
  border-right: 1px solid #d1d5dc;
}

.book-page.left::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);
}

.book-page.right::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 32px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.05), transparent);
}

.page-content-mock {
  padding: 32px;
}

.mock-block {
  background: #e5e7eb;
  border-radius: 4px;
  margin-bottom: 24px;
}

.mock-title {
  height: 48px;
  width: 75%;
}
.mock-image {
  height: 192px;
  background: #d1d5dc;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6a7282;
}
.mock-text {
  height: 16px;
  margin-bottom: 12px;
}

.viewer-bottom-bar {
  height: 64px;
  background: #000;
  position: fixed;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  z-index: 1000;
}

.viewer-controls-left,
.viewer-controls-right {
  display: flex;
  gap: 10px;
}

.viewer-nav-center {
  display: flex;
  align-items: center;
  gap: 12px;
}

.viewer-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.viewer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.viewer-btn.nav-small {
  width: 28px;
  height: 28px;
}

.viewer-btn img,
.viewer-btn svg {
  width: 20px !important;
  height: 20px !important;
  display: block;
}

.viewer-btn.nav-small svg {
  width: 16px !important;
  height: 16px !important;
}

.logo-placeholder {
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
}

.page-input {
  width: 48px;
  height: 28px;
  background: #fff;
  border: none;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  outline: none;
}

.page-total {
  color: #d1d5dc;
  font-size: 14px;
}

.viewer-close {
  color: white;
  font-size: 24px;
  text-decoration: none;
  padding: 10px;
}

/* --- Figma 特色分類區塊重構 --- */
/* 大特色卡網格 (Figma 首排雙大卡，繁體中文註解) */
.feat-large-slider-container {
  width: 100%;
}

.feat-large-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 30px;
  width: 100%;
}

.feat-cat-card.feat-large {
  grid-column: span 3;
}

/* 小特色卡網格容器 (Figma 次排三小卡，繁體中文註解) */
.feat-small-slider-container {
  margin-top: 16px;
  width: 100%;
}

.feat-small-track {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
}

.feat-cat-card.feat-small {
  grid-column: span 2;
}

.feat-cat-card {
  position: relative;
  height: 217px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px 30px;
  text-decoration: none !important;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.feat-cat-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
  z-index: 1;
}

/* 遮罩，確保文字清晰 */
.feat-cat-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0) 50%
  );
}

.feat-cat-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 確保靠左對齊 */
  gap: 5px;
}

.feat-cat-title {
  color: white; /* 修正：原本寫成 #white，改為 white */
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.feat-cat-line {
  width: 72px;
  height: 2px;
  background: #d11919; /* 直接用顏色，不用圖片更乾淨 */
}

.feat-cat-desc {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  margin: 0;
  text-decoration: none !important;
}

/* Hover 效果 */
.feat-cat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.feat-cat-card:hover .feat-cat-bg {
  transform: scale(1.05);
}

/* 響應式：平板 2 欄 (繁體中文註解) */
@media (max-width: 1024px) {
  .feat-large-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .feat-large-track .feat-cat-card.feat-large {
    grid-column: span 1 !important;
  }
  .feat-small-track {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .feat-small-track .feat-cat-card.feat-small {
    grid-column: span 1 !important;
  }
}

/* 響應式：手機版特色大卡改為 2 欄並排、小卡改為 3 欄並排網格全部顯示，且小卡隱藏描述 (繁體中文註解) */
@media (max-width: 768px) {
  .feat-large-slider-container,
  .feat-small-slider-container {
    margin-top: 16px !important;
    margin-left: 0 !important; /* 移除負外距，恢復與主容器對齊 */
    margin-right: 0 !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .feat-large-viewport,
  .feat-small-viewport {
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    scroll-padding: 0 !important;
    padding: 4px 0 !important; /* 留出微量 hover 陰影空間 */
    -webkit-overflow-scrolling: auto !important;
  }

  .feat-large-viewport::-webkit-scrollbar,
  .feat-small-viewport::-webkit-scrollbar {
    display: none !important;
  }

  /* 大特色卡改為 Grid 2 欄並排 (繁體中文註解) */
  .feat-large-track {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  /* 小特色卡改為 Grid 3 欄並排 (繁體中文註解) */
  .feat-small-track {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    padding-right: 0 !important;
  }

  /* 大特色卡卡片樣式優化 */
  .feat-cat-card.feat-large {
    flex: none !important;
    width: 100% !important;
    height: 120px !important; /* 高度調降至 120px */
    padding: 12px 14px !important;
    box-sizing: border-box !important;
  }

  /* 小特色卡卡片樣式優化 */
  .feat-cat-card.feat-small {
    flex: none !important;
    width: 100% !important;
    height: 100px !important; /* 高度調降至 100px */
    padding: 10px 10px !important;
    box-sizing: border-box !important;
  }

  /* 佔位卡片在行動端的高度同步 */
  .feat-large-track .placeholder-card {
    height: 120px !important;
  }
  .feat-small-track .placeholder-card {
    height: 100px !important;
  }

  /* 下方 3 欄小特色卡隱藏簡介描述，釋放呼吸感 (繁體中文註解) */
  .feat-small-track .feat-cat-desc {
    display: none !important;
  }

  /* 大卡標題字體大小 */
  .feat-large-track .feat-cat-title {
    font-size: 15px !important;
  }
  /* 小卡標題字體大小 */
  .feat-small-track .feat-cat-title {
    font-size: 13px !important;
  }

  /* 大特色卡簡介文字微調 */
  .feat-large-track .feat-cat-desc {
    font-size: 11px !important;
  }
}

/* 首頁產品類別區塊大背景 */
.feat-category-section {
  position: relative;
  background-image: url("../img/bg_gradient.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.feat-category-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.2);
  mix-blend-mode: hard-light;
  z-index: 1;
}

.feat-category-section .container {
  position: relative;
  z-index: 2;
}

/* 產品類別大標題改為紅色 */
.feat-category-section .section-title {
  color: #d11919 !important;
}

/* ==========================================================================
   💡 行動端與平板 (max-width: 992px) 的前台據點等高響應式佈局重構
   ========================================================================== */
@media (max-width: 992px) {
  .locations-content-layout {
    flex-direction: column; /* 繁體中文註解：改為單欄垂直排列 */
    height: auto; /* 繁體中文註解：移除桌機固定高度 */
    gap: 20px;
  }
  
  .map-container {
    width: 100%;
    height: 380px; /* 繁體中文註解：手機版最優雅的固定比例高度，避免高度坍塌 */
    flex: none;
  }
  
  .locations-sidebar {
    width: 100%;
    height: 480px; /* 繁體中文註解：手機版列表最優雅的固定高度，允許內部獨立滑動 */
    flex: none;
  }
}

/* 💡 Figma 精選影片重構樣式追加 (繁體中文註解) */
.figma-video-content {
  background-color: #d11919 !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 10px 24px !important;
  box-sizing: border-box !important;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.figma-video-title {
  color: #ffffff !important;
  font-family: "Noto Sans TC", sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0.9px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
  line-height: 1 !important;
  transition: opacity 0.3s ease !important;
}

.video-card:hover .figma-video-title {
  opacity: 0.9 !important;
}

/* 精選影片左右紅色箭頭高保真優化 */
.video-section .event-nav-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.video-section .event-nav-btn:hover {
  background: transparent !important;
}

/* 💡 影片卡片防禦性排版，防止 Flex 項目被不換行文本撐大變形 */
.video-card {
  width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* 特色分類預設佔位卡片樣式 (繁體中文註解) */
.feat-cat-card.placeholder-card {
  background: rgba(255, 255, 255, 0.02) !important;
  border: 2px dashed rgba(255, 255, 255, 0.2) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 217px;
  border-radius: 12px;
  pointer-events: none;
  box-sizing: border-box;
  padding: 20px;
}

.placeholder-card .placeholder-content {
  text-align: center;
}

.placeholder-card .placeholder-title {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 15px;
  font-weight: bold;
  margin: 0;
  letter-spacing: 1px;
}

.feat-small.placeholder-card .placeholder-title {
  font-size: 14px;
}

.placeholder-card .placeholder-desc {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: 11px;
  margin: 6px 0 0 0;
}

/* ==========================================================================
   💡 手機端 RWD 精選影片圖卡紅色區塊文字強制覆寫 (防止被後方全域樣式覆蓋，繁體中文註解)
   ========================================================================== */
@media (max-width: 768px) {
  .video-card .figma-video-title {
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
  }
}



/* ==========================================================================
   麵包屑導覽 (Breadcrumb)
   由 includes/ui-components.php 的 render_breadcrumb() 統一渲染，全站共用。
   ⚠️ 原本這組樣式寫在 products.php 的頁面級 <style> 內，導致其他頁面即使
   渲染出相同的 class 也沒有樣式可套。要新增麵包屑到別的頁面時，樣式一律
   改在這裡，嚴禁再寫回個別頁面。
   ========================================================================== */
.breadcrumb-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: #6a7282;
  margin-bottom: 12px;
  font-family: 'Inter', 'Noto Sans TC', sans-serif;
}
.breadcrumb-link {
  color: #6a7282;
  text-decoration: none;
  transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.breadcrumb-link:hover {
  color: #d11919; /* 正晴紅懸停 */
}
.breadcrumb-separator {
  margin: 0 8px;
  color: #9ca3af;
  user-select: none;
}
.breadcrumb-current {
  color: #1e2939;
  font-weight: 500;
}


/* --------------------------------------------------------------------------
   導覽下拉：主分類標籤連結
   熱區以負 margin 抵銷 .dropdown-item 的 padding，讓整列（箭頭除外）都可點，
   而非只有文字本身那幾個字寬。無子分類時標籤是唯一子元素，右側 padding 也一併吃下。
   -------------------------------------------------------------------------- */
.dropdown-item-label {
  flex: 1;
  color: inherit;
  text-decoration: none;
  padding: 12px 20px;
  margin: -12px 0 -12px -20px;
  /* 分類名稱不折行，讓浮層自行撐寬（min-width 168px、width auto）。
     與 .sub-dropdown .dropdown-item 同一個理由——子選單早就因「靜音變頻發電機」
     加過這條，第一層直到「引擎園藝工具」才碰到。 */
  white-space: nowrap;
}
.dropdown-item-label:only-child {
  margin-right: -20px;
}
/* ⚠️ 有箭頭時右側 padding 是多餘的：flex 的 gap:10px 已經分隔了標籤與箭頭，
   而這 20px 會直接吃掉文字寬度。實測「引擎園藝工具」可用 83px／需要 84px，
   就差這 1px 而折成兩行——熱區用的負 margin 只抵銷了左側，右側沒抵銷。 */
.dropdown-item-label:not(:only-child) {
  padding-right: 0;
}
.dropdown-item.active-item .dropdown-item-label {
  color: #ffffff;
}