/* how.shop — 買家前台樣式（紫色時尚風） */

/* 原子 token（status / text / shadow / radius / font）已移至 tokens.css。
 * 這裡只保留買家前台專屬的品牌色、底色與 layout 變數。 */
:root {
  --primary: #7c3aed;
  --primary-hover: #6d28d9;
  --primary-light: #f3f0ff;
  --secondary: #1e1b4b;
  /* ── 主色家族衍生變數（賣場主題色用：店家選一色，JS 推導整組覆寫；對照表見 docs/task-store-theme.md §5.1）── */
  --primary-grad: #8b5cf6;          /* 漸層亮端（header/頭像/404） */
  --primary-deep: #9333ea;          /* 漸層深端（訂單 hero） */
  --primary-soft: #a78bfa;          /* 漸層中段（banner/logo 預設） */
  --primary-softer: #c4b5fd;        /* 漸層淡段 */
  --primary-pill: #ddd6fe;          /* 底部導覽 active pill */
  --primary-pale: #ede9fe;          /* 分類 icon 漸層尾 */
  --primary-dim: #6b5b8a;           /* 底部導覽未選 icon（主色混灰） */
  --primary-rgb: 124, 58, 237;      /* rgba 陰影/邊框母值 */
  --primary-deep-rgb: 76, 29, 149;  /* 深色陰影母值 */
  --primary-glass-rgb: 58, 8, 145; /* dock 玻璃母值（HSL 深而不濁：同色相、S×1.3、L=30%） */
  --glass-hue-rotate: 224deg;       /* dock backdrop 染色角度（主色色相 − sepia 基底 38°） */
  --on-primary: #fff;               /* 主色上的文字（淺主題色時 JS 換黑） */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-card: #ffffff;
  --border: #e9ecef;
  --header-height: 56px;
  --bottom-nav-height: 60px;
}

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

/* 捲動讓位：聚焦欄位/錨點捲動時自動避開固定頂欄（scrollIntoView / :target / focus 皆適用）。
   底部讓位只給手機——固定底列（bottom-nav / pdp-cta-bar）僅 ≤768 存在，桌機不留死偏移 */
html { scroll-padding-top: calc(var(--header-height) + 12px); }
@media (max-width: 768px) {
  html { scroll-padding-bottom: calc(var(--bottom-nav-height) + 12px); }
}

body {
  font-family: var(--font-sans);
  background: var(--bg-secondary);
  color: var(--text-primary);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }

/* ===== Header (mobile-first) ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: linear-gradient(180deg, var(--primary-grad) 0%, var(--primary) 100%);
  color: var(--on-primary); /* 主色底上的字走 --on-primary（淺主題自動轉深），header 子元素同 */
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 10px;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}

.header-logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--on-primary);
  letter-spacing: -0.03em;
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
}
.header-logo-dot { color: #fde047; /* 黃色重音點 */ }

/* 店內 header：店名（取代品牌 logo） */
.header-store-name {
  flex: 1;
  min-width: 0; /* 允許收縮 → 長店名 ellipsis 而非擠掉右側 actions */
  font-size: 16px;
  font-weight: 700;
  color: var(--on-primary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 480px) {
  .header { padding: 0 16px; gap: 14px; }
}

/* 彈性 spacer，把 actions 推到右側 */
.header-spacer { flex: 1; min-width: 0; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Language selector：globe + 短碼 pill；下拉用 native select 透明覆蓋 */
.lang-selector {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  color: var(--on-primary);
  cursor: pointer;
  transition: background-color 0.15s;
  user-select: none;
}
.lang-selector:hover,
.lang-selector:focus-within { background-color: rgba(255,255,255,0.3); }
.lang-icon { font-size: 12px; }
.lang-label { font-size: 12px; font-weight: 600; line-height: 1; }
.lang-selector select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-size: 16px; /* >= 16px 避免 iOS 對焦時放大頁面 */
}
.lang-selector select option {
  color: var(--text-primary);
  background: white;
  font-size: 14px;
}

/* Cart icon button — 圓形 hover */
.header-cart {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  font-size: 18px;
  border-radius: 50%;
  transition: background-color 0.15s;
  flex-shrink: 0;
  text-decoration: none;
}
.header-cart:hover,
.header-cart:active { background-color: rgba(255,255,255,0.22); color: var(--on-primary); }

/* 手機店內頁購物車單一入口：底部導覽已有 cart tab，header 那顆冗餘 → 藏；
   例外＝pdp-no-nav（商品詳情頁底部導覽讓位給加購列，header 是唯一「查看購物車」入口）。
   桌機（≥769 導覽整條隱藏）不受此規則影響，header 恆顯。 */
@media (max-width: 768px) {
  body:not(.pdp-no-nav) .header-cart { display: none; }
}

.cart-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  background: #ff3b30;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  text-align: center;
  line-height: 14px;
  border: 1.5px solid var(--primary);
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* 找店家：header 圓形放大鏡鈕（只在根頁顯示） */
.header-iconbtn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  font-size: 16px;
  border: none;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s;
}
.header-iconbtn:hover,
.header-iconbtn:active { background-color: rgba(255,255,255,0.3); }

/* 帳號頭像鈕（header 右上，app-dropdown 觸發鈕）；有圖顯圖、無圖顯名字首字 */
.header-avatar {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  color: var(--on-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
  transition: background-color 0.15s;
}
.header-avatar:hover,
.header-avatar.is-open { background-color: rgba(255,255,255,0.36); }
.header-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ===== Dropdown 操作選單（買家端：admin-base.css 不載入，這裡獨立移植；hover 走品牌淺紫） ===== */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: fixed; z-index: 300;
  min-width: 180px; padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  animation: dropdownIn 0.12s ease-out;
}
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.dropdown-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: none; border-radius: 8px;
  background: none; color: var(--text-primary);
  font-size: 14px; text-align: left; white-space: nowrap; cursor: pointer;
}
.dropdown-item i { width: 16px; text-align: center; flex: none; color: var(--text-secondary); }
.dropdown-item:hover { background: var(--primary-light); }
.dropdown-item:hover i { color: var(--primary); }
.dropdown-item-danger { color: var(--danger); }
.dropdown-item-danger i { color: var(--danger); }
.dropdown-item-danger:hover { background: var(--status-danger-bg); }
.dropdown-item-danger:hover i { color: var(--danger); }
.dropdown-divider { height: 1px; margin: 6px 4px; background: var(--border); }

/* 帳號識別列（#header slot）：頭像選單頂端顯示姓名 + 手機 */
.dropdown-header {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.dropdown-account-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.dropdown-account-sub { font-size: 12px; color: var(--text-secondary); }

/* 找店家：覆蓋整條 header 的搜尋列 */
.store-finder-bar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: linear-gradient(180deg, var(--primary-grad) 0%, var(--primary) 100%);
  z-index: 1;
}
.store-finder-back {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  font-size: 17px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s;
}
.store-finder-back:hover,
.store-finder-back:active { background-color: rgba(255,255,255,0.22); }
.store-finder-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  background: #fff;
  border-radius: 999px;
}
.store-finder-icon { color: #9aa0a6; font-size: 14px; flex-shrink: 0; }
.store-finder-field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: 16px; /* >= 16px 避免 iOS 對焦放大頁面 */
  color: #2d3436;
}
.store-finder-clear {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9aa0a6;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 15px;
}
.store-finder-clear:hover { color: #5f6368; }

/* 展開 / 收起動畫：由右側放大鏡處滑入淡入 */
.store-finder-enter-active,
.store-finder-leave-active { transition: opacity 0.18s ease, transform 0.18s ease; }
.store-finder-enter-from,
.store-finder-leave-to { opacity: 0; transform: translateX(12px); }

/* ===== Main Content ===== */
.main-content {
  padding-top: calc(var(--header-height) + 12px);
  padding-bottom: calc(var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom));
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ===== Bottom Navigation v2 (Material 3 Expressive + Frosted) =====
 * 設計參考：Material 3 Expressive NavigationBar / Google Drive mobile / Pinkoi
 * 主要視覺：
 *   - active：pill bg var(--primary-pill)（purple-200，比 primary-light 深一階）+ soft 投影
 *   - inactive：icon 帶極淺紫 tint（屬於品牌色系，不是死灰）
 *   - 整條 nav 半透明白 + backdrop blur（frosted glass）
 *   - 加大 icon 19→22px、pill 56×28 → 60×34
 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--bottom-nav-height);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(var(--primary-rgb), 0.08);
  display: flex;
  z-index: 100;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(var(--primary-deep-rgb), 0.06);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 共用滑塊（050）：active 藥丸背景。位置/尺寸由 app.js 量測 active tab 的 .nav-icon
 * 後以 inline transform/width/height 設定；切 tab 時靠 transition 從 A 滑到 B。
 * 微過衝曲線（>1 的第二控制點）做出 Threads 式的彈性吸附感。
 * DOM 在所有 <a> 之前 → 同為 positioned 元素，自然墊在 icon 底下。 */
.nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 999px;
  background-color: var(--primary-pill);
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.18);
  opacity: 0;
  pointer-events: none;
  will-change: transform;
  transition:
    transform 0.34s cubic-bezier(0.3, 1.18, 0.4, 1),
    width 0.34s cubic-bezier(0.3, 1.18, 0.4, 1),
    height 0.34s cubic-bezier(0.3, 1.18, 0.4, 1),
    opacity 0.18s ease;
}
.nav-indicator.shown { opacity: 1; }
.nav-indicator.no-anim { transition: none; } /* 滑塊重新出現／樣板切換：直接就位不滑 */

/* 前庭友善：減動效使用者不做橫向滑行，藥丸直接換位 */
@media (prefers-reduced-motion: reduce) {
  .nav-indicator { transition: none; }
}

.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--primary-dim); /* 偏紫的灰 — 暗示品牌色系，不是純死灰 */
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .nav-icon {
  position: relative;
  width: 60px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  border-radius: 999px;
  /* 藥丸背景/投影已搬到 .nav-indicator，icon 只剩顏色與按壓縮放會變 */
  transition: color 0.22s ease, transform 0.15s ease;
}

.bottom-nav .nav-label {
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, font-weight 0.2s ease;
}

/* Active state — 藥丸背景已搬到共用滑塊 .nav-indicator（為了 A→B 滑動），
   tab 本身只負責顏色與 label 加粗 */
.bottom-nav a.active { color: var(--primary); }
.bottom-nav a.active .nav-icon { color: var(--primary); }
.bottom-nav a.active .nav-label { font-weight: 700; }

/* Tap feedback */
.bottom-nav a:active .nav-icon { transform: scale(0.92); }

/* Cart badge — 紅色徽章，2px 白邊浮在 pill 右上 */
.nav-cart-badge {
  position: absolute;
  top: -3px;
  right: 4px;
  background: #ff3b30;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 9px;
  min-width: 17px;
  height: 17px;
  text-align: center;
  line-height: 15px;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}

/* ===== Bottom Nav 樣板 dock（懸浮膠囊；SPT theme_nav_style=dock，app.js 掛 body.nav-dock，新樣板照此再開 body.nav-*）=====
 * Threads 式離邊懸浮深色玻璃膠囊。--bottom-nav-height=膠囊高+離地12+safe-area，讓 main-content/paybar 貼底讓位 */
body.nav-dock { --bottom-nav-height: calc(68px + env(safe-area-inset-bottom)); }

/* dock 的 --bottom-nav-height 已含 safe-area，padding 不再另加 env，避免雙重計入（notch 機多算 ~34px） */
body.nav-dock .main-content { padding-bottom: calc(var(--bottom-nav-height) + 12px); }

body.nav-dock .bottom-nav {
  left: 0;
  right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom));
  /* 置中改用 auto margin（不佔 transform）：transform 專留給捲動隱藏，
     避免樣板切換(bar↔dock)時 translateX 被 transition 帶出滑動 */
  margin: 0 auto;
  /* fit-content：寬度貼 tab 數收，免 tab 少時兩端空白；窄機在 max-width 內均縮 */
  width: fit-content;
  max-width: calc(100% - 32px);
  height: 56px;
  padding: 0 6px;
  align-items: center;
  border-radius: 999px;
  /* 透視玻璃：深色靠 backdrop brightness 壓暗後方內容（非高 alpha tint 蓋色，那會擋住輪廓），tint 僅染主色相；
     玻璃母值走 HSL 深而不濁（雷：混黑會把暖色拖成土色）。filter 序 blur→brightness→sepia→saturate→hue-rotate
     把透進的內容染到主色相；gradient 上白下暗=曲面受光/厚度。真折射 feDisplacementMap iOS Safari 不支援 backdrop，不用 */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.10) 100%),
    rgba(var(--primary-glass-rgb), 0.22);
  backdrop-filter: blur(16px) brightness(0.52) sepia(0.5) saturate(240%) hue-rotate(var(--glass-hue-rotate));
  -webkit-backdrop-filter: blur(16px) brightness(0.52) sepia(0.5) saturate(240%) hue-rotate(var(--glass-hue-rotate));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -10px 18px -10px rgba(0, 0, 0, 0.3),
    0 12px 32px rgba(var(--primary-glass-rgb), 0.45);
}

/* 無 backdrop-filter 的舊瀏覽器：玻璃不成立（低 alpha 會直接透底），退回近實色保可讀 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.nav-dock .bottom-nav { background: rgba(var(--primary-glass-rgb), 0.94); }
}

/* 純 icon 藏 label；tab 寬 78（fit-content 量尺）、藥丸 70×46（56 高內上下留 5）；inactive 半透明白 */
body.nav-dock .bottom-nav .nav-label { display: none; }
body.nav-dock .bottom-nav a { color: rgba(255, 255, 255, 0.72); flex: 0 1 78px; }
body.nav-dock .bottom-nav .nav-icon { width: 70px; height: 46px; font-size: 21px; }
body.nav-dock .bottom-nav a.active,
body.nav-dock .bottom-nav a.active .nav-icon { color: #fff; }

/* 深調玻璃上的滑塊：半透明白 spotlight（中性高光，色相由玻璃底承擔） */
body.nav-dock .nav-indicator {
  background-color: rgba(255, 255, 255, 0.22);
  box-shadow: none;
}

/* 玻璃上的徽章：白邊改玻璃底色免光圈；錨定框中心（貼購物車右肩），藥丸寬再調不跑位 */
body.nav-dock .nav-cart-badge {
  border-color: rgba(var(--primary-glass-rgb), 0.9);
  top: 1px;
  right: calc(50% - 20px);
}

/* 手機 ≤390px：dock 在 390 偏大，輕縮高度/tab/icon（保留接近原本份量）；藥丸 app.js 量 .nav-icon 自動跟縮 */
@media (max-width: 390px) {
  body.nav-dock { --bottom-nav-height: calc(66px + env(safe-area-inset-bottom)); }
  body.nav-dock .bottom-nav { height: 54px; padding: 0 5px; }
  body.nav-dock .bottom-nav a { flex: 0 1 72px; }
  body.nav-dock .bottom-nav .nav-icon { width: 64px; height: 44px; font-size: 20px; }
}

/* 捲動隱藏（行動瀏覽器工具列收合對策）：捲動「過程中」工具列收合時 position:fixed
 * 不重算位置而錯位（捲停才 snap）。捲動時把底欄滑出畫面避開該時段，捲停／近頂端滑回。
 * 位移＝自身高(100%)+離地偏移+safe-area，連向上/向下毛玻璃陰影一併推出視窗。
 * bar/dock 置中都不佔 transform，故共用同一條規則。 */
.bottom-nav.nav-scroll-hidden {
  transform: translateY(calc(100% + 20px + env(safe-area-inset-bottom)));
}
@media (prefers-reduced-motion: reduce) {
  .bottom-nav { transition: none; }
}


/* ===== Product Grid ===== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}

.product-card {
  position: relative; /* 折數徽章定位錨 */
  background: var(--bg-card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}

/* 商品卡折數徽章（蝦皮式右上角）：多件優惠最低公開階換算；紅=價格慣例 */
.product-deal-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.product-card:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}

.product-card-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--bg-secondary);
  display: block;
}

.product-card-body {
  padding: 10px 12px 14px;
}

.product-card-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* 固定預留兩行高（line-height 1.35 × 2）：1 行與 2 行名稱的卡片價格列才會對齊 */
  min-height: 2.7em;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.product-card-price {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
}

.product-card-original {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: line-through;
  margin-left: 4px;
}

.product-card-badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 4px;
}

.badge-installment {
  background: var(--primary-light);
  color: var(--primary);
}

.badge-discount {
  background: #fef3c7;
  color: #92400e;
}

/* ===== Category Bar ===== */
.category-bar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
}

.category-bar::-webkit-scrollbar { display: none; }

.category-chip {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 20px;
  background: white;
  border: 1px solid var(--border);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.category-chip.active,
.category-chip:hover {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-primary {
  background: var(--primary);
  color: var(--on-primary);
}
.btn-primary:hover { background: var(--primary-hover); }

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: var(--border); }

.btn-success {
  background: var(--success);
  color: white;
}

.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Forms ===== */
.form-group {
  margin-bottom: 16px;
}

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text-primary);
  background: white;
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.form-textarea { resize: vertical; min-height: 80px; }

/* ===== Cards ===== */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin-bottom: 12px;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

/* ===== 個人資料（iOS 設定頁風：圓形頭像 hero + grouped inset list） ===== */
.profile-page { max-width: 560px; margin: 0 auto; padding-top: 4px; }

/* 帳號 hero：頭像置中 + 姓名 + 手機 */
.profile-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 24px;
}
.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--on-primary);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(140deg, var(--primary-grad) 0%, var(--primary) 100%);
  box-shadow: 0 6px 18px rgba(var(--primary-rgb), 0.28);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-name { font-size: 22px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.profile-hero-sub { font-size: 14px; color: var(--text-secondary); }

/* 本店 VIP 等級徽章（hero 手機號下方）：VIP 金色漸層、一般會員灰 */
.profile-vip-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #7a4d00;
  background: linear-gradient(135deg, #ffe9b8, #ffd166);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.profile-vip-chip img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
}
.profile-vip-chip.vip-general {
  background: #eef1f5;
  color: var(--text-secondary);
  box-shadow: none;
}

/* 區塊小標：iOS 灰色大寫副標 */
.profile-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  padding: 0 16px 7px;
}

/* grouped inset 容器：白底圓角卡，列間 hairline 內縮分隔 */
.profile-group {
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.profile-group-gap { margin-top: 22px; }

.profile-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 16px;
  position: relative;
}
/* hairline：左緣內縮對齊文字（iOS 風），首列不畫 */
.profile-group > .profile-row:not(:first-child)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 16px;
  right: 0;
  height: 1px;
  background: var(--border);
}
.profile-row-label {
  flex: none;
  font-size: 15px;
  color: var(--text-primary);
}
/* 唯讀值（手機）：右對齊灰字 */
.profile-row-value {
  flex: 1;
  text-align: right;
  font-size: 15px;
  color: var(--text-secondary);
}
/* 唯讀列：值後接小鎖頭，明示「不可變更」（語言無關） */
.profile-row-readonly {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}
.profile-row-readonly i { font-size: 11px; color: var(--text-muted); }
/* 行內可編輯：無框透明、右對齊，看起來像值卻可改 */
.profile-row-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  text-align: right;
  font-size: 15px;
  color: var(--text-primary);
  padding: 0;
  font-family: inherit;
}
.profile-row-input::placeholder { color: var(--text-muted); }

/* 語言列：值 + chevron，native select 透明覆蓋整列 */
.profile-row-select { cursor: pointer; }
.profile-row-selectval {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-size: 15px;
  color: var(--text-secondary);
}
.profile-row-selectval i { font-size: 11px; color: var(--text-muted); }
.profile-row-select select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 16px; /* >=16px 避免 iOS 對焦放大 */
  border: none;
  appearance: none;
  -webkit-appearance: none;
}

.profile-fade-enter-active, .profile-fade-leave-active { transition: opacity 0.2s; }
.profile-fade-enter-from, .profile-fade-leave-to { opacity: 0; }

/* 儲存成功回饋改用共用 <app-toast>（showToast）*/

/* 儲存：實心主色（僅 dirty 時浮現，故份量正當）。圓角、滿版、不過重 */
.profile-save {
  width: 100%;
  margin-top: 22px;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, opacity 0.15s;
}
.profile-save:hover:not(:disabled) { background: var(--primary-hover); }
.profile-save:active:not(:disabled) { transform: scale(0.99); }
.profile-save:disabled { opacity: 0.5; cursor: not-allowed; }

/* 登出：裸紅字、置中、無卡無底線；上方留白讓它沉到表單下方（不貼底撞 tab bar） */
.profile-logout {
  display: block;
  width: 100%;
  margin-top: 36px;
  padding: 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: center;
  font-size: 15px;
  color: var(--danger);
  font-family: inherit;
}
.profile-logout:active { opacity: 0.6; }

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 16px;
}

.modal {
  background: white;
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal h3 {
  margin-bottom: 16px;
}

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-success { background: #d4edda; color: #155724; }
.badge-warning { background: #fff3cd; color: #856404; }
.badge-danger { background: #f8d7da; color: #721c24; }
.badge-secondary { background: var(--bg-secondary); color: var(--text-secondary); }

/* ===== Utilities ===== */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }
.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-sm { font-size: 12px; }
.font-bold { font-weight: 600; }
.w-full { width: 100%; }

/* ===== Empty State（搭配共用 <app-empty> 元件 components/Empty.js） ===== */
.empty-state {
  text-align: center;
  padding: 48px 16px;
  color: var(--text-muted);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  color: var(--text-muted);
}
.empty-state-text {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--text-secondary);
}
.empty-state-actions {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.empty-state-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* size=lg：整頁級空狀態（如 store-not-found / 訂單為空），加大 padding 與字級 */
.empty-state-lg { padding: 96px 24px; }
.empty-state-lg .empty-state-icon { font-size: 64px; margin-bottom: 20px; opacity: 0.5; }
.empty-state-lg .empty-state-title { font-size: 22px; }
.empty-state-lg .empty-state-text { font-size: 15px; max-width: 420px; margin-left: auto; margin-right: auto; }

/* 購物車空狀態：scoped 美化（圓形 tinted icon + 垂直置中 + pill 按鈕），不影響其他 app-empty 使用處 */
.cart-empty {
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-empty .empty-state-lg { padding: 24px; }
.cart-empty .empty-state-icon {
  width: 112px;
  height: 112px;
  margin: 0 auto 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  color: var(--primary);
  background: var(--primary-light);
  border-radius: 50%;
  opacity: 1;
}
.cart-empty .empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.cart-empty .empty-state-text { color: var(--text-muted); }
.cart-empty .empty-state-actions { margin-top: 26px; }
.cart-empty .empty-state-actions .btn {
  border-radius: 999px;
  padding-left: 30px;
  padding-right: 30px;
}

/* ===== 404 Not Found（買家前台，整頁置中；Apple 風漸層大字） ===== */
.notfound {
  /* svh：手機 UI 展開時不溢出；舊瀏覽器不識 svh，自動 fallback 上一行 vh */
  min-height: calc(100vh - var(--header-height) - var(--bottom-nav-height) - 48px);
  min-height: calc(100svh - var(--header-height) - var(--bottom-nav-height) - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}
.notfound-code {
  font-size: 104px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -3px;
  background: linear-gradient(180deg, var(--primary-grad) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}
.notfound-title {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.notfound-desc {
  font-size: 15px;
  color: var(--text-secondary);
  max-width: 360px;
  line-height: 1.6;
  margin: 0 0 28px;
}
.notfound-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ===== Page Back FAB（業界主流：mobile 詳情頁左上浮層返回鈕） =====
 * 用 position: fixed 黏在 viewport 左上、永遠可達；半透明深底 + 白 icon，
 * 跟商品圖／白卡內容皆對比清楚。
 */
.page-back-fab {
  position: fixed;
  top: 64px;            /* 全域 header 下方 */
  left: 12px;
  z-index: 50;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  transition: background-color 0.15s ease;
}
.page-back-fab:hover,
.page-back-fab:focus-visible {
  background: rgba(0, 0, 0, 0.72);
  outline: none;
}

/* ===== Loading ===== */
.loading-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: var(--text-muted);
}

/* ===== Auth Page（群組欄位 + 大圓角 + 品牌字 hero） ===== */
.auth-page {
  /* svh：手機 UI 展開時不溢出；舊瀏覽器 fallback 上一行 vh */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* 大尺寸的大片留白靠品牌色微光撐住（柔和漸層） */
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(var(--primary-rgb), 0.08), transparent 65%),
    radial-gradient(900px 600px at 88% 110%, rgba(var(--primary-rgb), 0.06), transparent 65%),
    var(--bg-secondary);
}

.auth-card {
  background: var(--bg-card);
  border-radius: 24px;
  padding: 40px 32px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  animation: auth-card-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-card { animation: none; }
}

/* 手機：卡片退場，內容直接坐在灰底上（inset group） */
@media (max-width: 480px) {
  .auth-card {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 12px 4px;
  }
}

/* 桌機：卡片放大一號、留白更慷慨 */
@media (min-width: 1024px) {
  .auth-card {
    max-width: 420px;
    padding: 48px 40px;
  }
  .auth-brand { font-size: 32px; }
}

.auth-brand {
  text-align: center;
  color: var(--primary);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.auth-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 15px;
  margin: 6px 0 28px;
}

/* 群組欄位：白底圓角容器 + 髮絲分隔線，focus 時整組亮邊 */
.auth-field-group {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.auth-field-group:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08);
}

.auth-field {
  display: block;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding: 15px 16px;
  font-size: 16px; /* 16px：行動版 Safari 聚焦不觸發自動縮放的下限 */
  font-family: inherit;
  color: var(--text-primary);
}

.auth-field::placeholder { color: var(--text-muted); }

.auth-field + .auth-field { border-top: 1px solid var(--border); }

/* 電話列：國碼下拉 + 號碼輸入並排（E.164，國碼與號碼分開輸入、送出前組合） */
.auth-phone-row {
  display: flex;
  align-items: stretch;
}
.auth-phone-row + .auth-field { border-top: 1px solid var(--border); }
.auth-field + .auth-phone-row { border-top: 1px solid var(--border); }

.auth-phone-row .auth-dial {
  flex: 0 0 auto;
  width: auto;
  padding-right: 8px;
  border-right: 1px solid var(--border);
  appearance: none;
  cursor: pointer;
}
.auth-phone-row .auth-phone { flex: 1 1 auto; min-width: 0; }

/* 按鈕：大圓角 + 17px 半粗體 + 按壓回彈（.btn 基底已含 transition: all） */
.auth-card .btn {
  border-radius: 14px;
  padding: 15px 20px;
  font-size: 17px;
  font-weight: 600;
}

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

.auth-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-divider span { padding: 0 12px; }

.btn-line {
  background: #06C755;
  color: white;
  width: 100%;
}
.btn-line:hover { background: #05b34d; }
.btn-line .fa-line { font-size: 20px; }

/* 語言切換：可見文字＋透明 select 覆蓋（同 .lang-selector 模式；直接顯示 select 會撐到最長選項寬） */
.auth-lang {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 28px auto 0;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 13px;
  transition: background-color 0.15s;
}

.auth-lang:hover,
.auth-lang:focus-within { background: rgba(0, 0, 0, 0.05); }

.auth-lang .fa-angle-down { font-size: 11px; }

.auth-lang select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  cursor: pointer;
}

/* ===== Checkout ===== */
.checkout-summary {
  background: white;
  border-radius: var(--radius-lg);
  padding: 16px;
  position: sticky;
  top: calc(var(--header-height) + 12px);
}

.payment-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s;
  margin-bottom: 8px;
}

.payment-option.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.payment-option input[type="radio"] {
  accent-color: var(--primary);
}

/* ===== Product Detail ===== */
.product-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

.product-main-image {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 1;
  object-fit: cover;
  background: #f0f0f0;
}

.product-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
}

.product-thumb {
  width: 60px;
  height: 60px;
  border-radius: var(--radius);
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}

.product-thumb.active,
.product-thumb:hover {
  border-color: var(--primary);
}

.product-title { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 6px; }
.product-store { color: var(--text-secondary); font-size: 14px; margin-bottom: 16px; }
.product-store a { color: var(--primary); }

.product-price-block {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 20px; padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.product-price { font-size: 28px; font-weight: 700; color: var(--primary); }
.product-original-price { font-size: 16px; color: var(--text-muted); text-decoration: line-through; }
.product-discount { font-size: 14px; color: var(--danger); font-weight: 600; }

.installment-badge {
  display: inline-block;
  background: var(--primary-light);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* 多件優惠級距表：品牌色 tinted 面板 + 表格列（數量 → 每件單價 → 省）。
 * 主流業界作法：以「每件單價」為主角（比「省 X%」直覺）。 */
.multibuy-deal {
  background: var(--primary-light);
  border: 1px solid rgba(var(--primary-rgb), 0.1);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.multibuy-deal-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 8px;
  color: var(--primary);
  font-weight: 700; font-size: 13px; letter-spacing: 0.01em;
}
.multibuy-tier-list { list-style: none; margin: 0; padding: 0; }
.multibuy-tier {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 9px 0;
}
.multibuy-tier + .multibuy-tier { border-top: 1px solid rgba(var(--primary-rgb), 0.08); }
.multibuy-tier-qty {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.multibuy-tier-unit {
  text-align: right;
  font-size: 15px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.multibuy-tier-save {
  font-size: 11px; font-weight: 600;
  color: var(--success); background: rgba(0, 184, 148, 0.1);
  border-radius: 999px; padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.multibuy-tier-vip {
  font-size: 11px; font-weight: 600;
  color: var(--primary); background: var(--bg-primary);
  border-radius: 999px; padding: 2px 8px;
}
.multibuy-deal-note { margin: 9px 0 0; font-size: 12px; color: var(--text-secondary); }

/* sheet 試算：折後價旁的原價刪除線 */
.variant-sheet-price-was {
  margin-left: 8px;
  font-size: 15px; font-weight: 400;
  color: var(--text-muted); text-decoration: line-through;
}

/* 數量選擇器停用態（未選完規格前禁止調整） */
.quantity-selector button:disabled,
.quantity-selector input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.product-description { margin-bottom: 20px; color: var(--text-secondary); line-height: 1.7; }

.product-stock { margin-bottom: 16px; font-size: 14px; }
.product-stock.out-of-stock { color: var(--danger); }

.quantity-selector {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.quantity-selector button {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-secondary);
  color: var(--primary);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.quantity-selector button:hover { background: var(--primary-light); }
.quantity-selector input {
  width: 50px;
  height: 36px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 14px;
}
.quantity-selector input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* 購買區：庫存 + 數量 一組（Apple：選項 → 購買 連貫，描述移到最後）*/
.buy-block { margin-top: 4px; }
.quantity-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.quantity-label { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.quantity-row .quantity-selector { margin-bottom: 0; }

/* 商品描述（general 版型專用 modifier）：移到買購區之後，標題 + 上分隔線分段 */
.product-desc-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.product-desc-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}

/* 商品描述輕量富文本（RichDescription 元件）：文字 / YouTube / 圖片片段 */
.rich-desc-text {
  white-space: pre-wrap;
  /* 無空格超長字串（長網址、連續英數）強制斷行，避免撐破描述區 */
  overflow-wrap: anywhere;
  margin: 0 0 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.rich-desc-text:last-child { margin-bottom: 0; }
.rich-desc-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 12px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}
.rich-desc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.rich-desc-image {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  margin: 12px 0;
}

.product-actions { margin-top: 12px; }
/* 桌機 CTA 撐滿購買欄（與手機底部購買列一致；避免按鈕只貼文字寬而左浮顯小） */
.product-actions .btn { width: 100%; }

/* 手機版固定底部購買列（取代 bottom-nav；≥769 桌機/平板本就無 nav，故僅手機顯示）*/
.pdp-cta-bar { display: none; }
.pdp-cta-btn { flex: 1; padding: 13px 20px; font-size: 16px; border-radius: 12px; }

/* 變體選擇器：主規格縮圖卡片（格狀；無圖時 picker 走文字膠囊 .variant-pill）*/
.variant-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}
.variant-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 6px;
  border: 1.5px solid #ccc;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.variant-card-thumb {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}
.variant-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.variant-card-label { font-size: 13px; font-weight: 500; color: #222; line-height: 1.3; }
.variant-card.active {
  border-color: var(--primary);
  background: var(--primary-light);
}
.variant-card.active .variant-card-label { color: var(--primary); font-weight: 600; }
.variant-card.unavail { opacity: 0.45; cursor: not-allowed; }
.variant-card.unavail .variant-card-label { text-decoration: line-through; }

/* 變體選擇器：文字膠囊（無圖規格軸；原為 inline style，改 class 對齊卡片式）*/
.variant-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.variant-pill {
  min-width: 44px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-weight: 400;
  cursor: pointer;
}
.variant-pill.active {
  border: 2px solid var(--primary);
  background: var(--primary-light);
  font-weight: 600;
}
.variant-pill.unavail {
  color: #bbb;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* ===== 手機版規格選擇 bottom sheet（兩步驟加購）===== */
.variant-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
}
.variant-sheet {
  position: relative;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 20px 20px 0 0;
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
}
.variant-sheet-grab {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: #d9dde3;
  margin: 0 auto 16px;
}
.variant-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 50%;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.variant-sheet-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 0 36px 16px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.variant-sheet-thumb {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--bg-secondary);
  flex: none;
}
.variant-sheet-price { font-size: 24px; font-weight: 700; color: var(--primary); }
.variant-sheet-stock { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.variant-sheet-stock.out-of-stock { color: var(--danger); }
.variant-sheet-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.variant-sheet-qty {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.variant-sheet-footer { padding-top: 16px; }
.variant-sheet-confirm { width: 100%; border-radius: 12px; }

@media (min-width: 769px) {
  .variant-sheet-overlay { display: none; }
}

/* sheet 滑入/淡出動畫 */
.vsheet-enter-active,
.vsheet-leave-active { transition: opacity 0.25s ease; }
.vsheet-enter-from,
.vsheet-leave-to { opacity: 0; }
.vsheet-enter-active .variant-sheet,
.vsheet-leave-active .variant-sheet { transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); }
.vsheet-enter-from .variant-sheet,
.vsheet-leave-to .variant-sheet { transform: translateY(100%); }

/* ===== Cart ===== */
/* 購物車收成單欄合理寬度（置中）：避免在寬視窗被 .container(1200px) 拉太寬，
   造成小圖配超寬卡片、中間/左下大留白。對齊結帳頁 .phone-detail 的限寬作法。 */
.cart-page { max-width: 560px; margin: 0 auto; padding-bottom: 108px; /* 讓出 fixed 結帳列的高度 */ }

/* 標題列：全選 checkbox ＋ 頁名＋件數（左）＋ 店鋪連結（右），合併原本的標題與全選兩排 */
.cart-header {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 4px 4px 10px; margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* 頁名＋件數：副標，灰字推到最右 */
.cart-header-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 0 auto; flex-shrink: 0;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
}
/* 件數 pill：補底部導覽沒有的資訊量（總件數） */
.cart-page-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 8px;
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--primary); background: var(--primary-light);
  border-radius: 12px;
}
/* 店鋪連結＝主角：大粗體放左側，店名過長省略，整塊可點進賣場 */
.cart-store-link {
  min-width: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.cart-store-link .fa-store { flex-shrink: 0; color: var(--text-muted); font-size: 14px; }
.cart-store-link .cart-store-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 品牌聚合：分店卡片（docs/task-brand-layer.md）=====
 * 單層容器、卡內 items 平面化——不做卡中卡，行與行用 0.5px 分隔線；
 * 未勾選的列整列降不透明度（視覺狀態＝checkbox 狀態）。轉場皆 0.2s 內。 */
.cart-heading {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary);
}
.cart-store-card {
  background: #fff;
  border-radius: 18px;
  padding: 0 16px 4px;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}
/* 選中店不加外框：radio 狀態已由勾選框＋未選列降透明度＋結帳列店名承載，
   容器保持安靜（試過主色細環，整圈框太突兀，2026-07-10 David 否決） */
/* 卡頭：該店全選＋店名（鏈結＋chevron）＋件數。hairline 收底 */
.cart-store-head {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 6px 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.cart-store-head .cart-store-link { font-size: 16px; gap: 6px; min-width: 0; }
.cart-store-chevron { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.cart-store-count {
  margin-left: auto; flex-shrink: 0;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
/* ── 卡內 items 平面化：拆掉卡中卡 ── */
.cart-store-card .cart-items { gap: 0; margin-bottom: 0; }
.cart-store-card .cart-item {
  background: none; border-radius: 0; box-shadow: none;
  padding: 14px 0 12px;
  transition: opacity 0.18s ease;
}
.cart-store-card .cart-item + .cart-item { border-top: 0.5px solid rgba(0, 0, 0, 0.07); }
/* 未勾選列：整列退後（視覺＝勾選狀態），價格回歸文字色不搶主角 */
.cart-store-card .cart-item.is-off { opacity: 0.55; }
.cart-store-card .cart-item.is-off .cart-item-price-now { color: var(--text-primary); font-weight: 600; }
/* 圖片收到 64：右欄內容少（單行品名＋價）時不留大片空白 */
.cart-store-card .cart-item-img { width: 64px; height: 64px; border-radius: 14px; }
/* 品名讓出右上刪除鈕（列已無水平 padding，鈕貼右緣 0） */
.cart-store-card .cart-item-name { font-size: 15px; padding-right: 36px; }
/* 刪除鈕：退為安靜的次要控制；隨平面列重新定位（列 padding 14px 0） */
.cart-store-card .cart-item-remove { top: 8px; right: -6px; opacity: 0.4; transition: opacity 0.15s; }
.cart-store-card .cart-item-remove:hover { opacity: 0.85; }
/* 列腳（數量＋小計）：左 stepper、右小計，兩端錨定（試過縮排對齊文字欄，
   短列時 stepper 懸空不穩，2026-07-10 David 否決改回靠左）；小計降半階，別跟單價搶主角 */
.cart-store-card .cart-item-footer {
  border-top: none; margin-top: 10px; padding-top: 0;
}
.cart-store-card .cart-item-subtotal { font-size: 16px; font-weight: 600; }
/* 數量控制：緊湊 stepper（hairline、透明底、按下才給回饋） */
.cart-store-card .quantity-selector {
  border: 0.5px solid rgba(0, 0, 0, 0.15);
  border-radius: 9px;
}
.cart-store-card .quantity-selector button {
  width: 28px; height: 28px; font-size: 12px;
  background: transparent;
}
.cart-store-card .quantity-selector button:active { background: var(--bg-secondary); }
.cart-store-card .quantity-selector input {
  width: 44px; height: 28px; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-left: 0.5px solid rgba(0, 0, 0, 0.12);
  border-right: 0.5px solid rgba(0, 0, 0, 0.12);
  background: transparent;
}
/* 卡內失效區：同樣平面化 */
.cart-store-card .cart-invalid-section { margin-top: 0; border-top: 0.5px solid rgba(0, 0, 0, 0.07); padding-top: 4px; }
/* 該店勾選小計：hairline 上緣，label 安靜、金額主角 */
.cart-store-foot {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  padding: 10px 0 8px;
  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
  font-size: 13px; color: var(--text-secondary);
}
.cart-store-foot b {
  font-size: 17px; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
/* ── 底部結帳列：店名（小字導引）→ 金額（主角）＋件數（隨侍） ── */
.cart-summary-store {
  font-size: 12px; font-weight: 600; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cart-summary-amount { display: flex; align-items: baseline; gap: 7px; }
.cart-summary-count { font-size: 13px; color: var(--text-muted); flex-shrink: 0; }

/* 自訂 checkbox：圓角方塊，勾選填主色 + 置中白勾（SVG，幾何精準） */
.cart-check {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 6px;
  background: #fff; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.cart-check:hover { border-color: var(--primary); }
.cart-check:active { transform: scale(0.9); }
.cart-check:checked {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20fill='none'%20stroke='%23fff'%20stroke-width='2.4'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3.5%208.5%206.5%2011.5%2012.5%205'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}
/* 半勾（群組部分勾選）：appearance:none 會吃掉原生 indeterminate 外觀，故自訂為白色橫線 */
.cart-check:indeterminate {
  background-color: var(--primary);
  border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20stroke='%23fff'%20stroke-width='2.4'%20stroke-linecap='round'%20d='M4%208h8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.cart-items { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }

.cart-item {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.cart-item-main { display: flex; align-items: flex-start; gap: 14px; }
/* checkbox 欄：頂部對齊品名（與圖片上緣切齊同一條線，消除兩套對齊基準）；
   44×44 命中區、左負 margin 貼齊卡片邊 */
.cart-item-check {
  display: flex; align-items: flex-start; justify-content: center;
  flex-shrink: 0; min-width: 44px; min-height: 44px;
  margin-left: -8px; padding: 2px 0 0 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cart-item-img {
  width: 76px; height: 76px; flex-shrink: 0;
  border-radius: var(--radius-lg); object-fit: cover;
  background: var(--bg-secondary);
}
.cart-item-info { flex: 1; min-width: 0; }
.cart-item-name {
  display: block; text-decoration: none;
  font-weight: 600; font-size: 16px; line-height: 1.3;
  color: var(--text-primary); margin-bottom: 2px;
  padding-right: 30px; /* 讓出右上角刪除鈕的位置，長品名不被壓住 */
}
.cart-item-variant {
  display: inline-block; text-decoration: none;
  font-size: 13px; color: var(--text-secondary); margin-bottom: 6px;
}
.cart-item-price { display: flex; align-items: baseline; gap: 7px; }
.cart-item-price-now {
  color: var(--primary); font-weight: 700; font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.cart-item-price-was { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }

.cart-item-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.multibuy-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary);
  font-size: 12px; font-weight: 600; line-height: 1.2;
}
/* 誘導 pill：amber 語意色（token 無對應，刻意保留），幾何/字重與 .multibuy-tag 一致 */
.multibuy-nudge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: #fff4e5; color: #b26a00;
  font-size: 12px; font-weight: 600; line-height: 1.2;
}

.cart-item-footer {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cart-item-footer .quantity-selector { margin-bottom: 0; }
/* 購物車內數量鈕：放大命中區，icon 不再縮成 13px */
.cart-item-footer .quantity-selector button { width: 38px; height: 38px; font-size: 14px; }
.cart-item-footer .quantity-selector button:active { background: var(--primary-light); }
.cart-item-footer .quantity-selector input { height: 38px; }
.cart-item-subtotal {
  flex: 1; text-align: right;
  font-weight: 700; font-size: 16px; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
/* 刪除鈕：卡片右上角（破壞性操作與價格/數量分開，對齊蝦皮/淘寶/Amazon） */
.cart-item-remove {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: none; background: transparent; border-radius: var(--radius);
  color: var(--text-muted); font-size: 15px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.cart-item-remove:hover { background: #fdeaea; color: var(--danger); }
.cart-item-remove:active { transform: scale(0.9); }

/* 結帳列：貼死視窗底部的通欄列（2026-07-10 David 指示：不要懸浮卡）。
   fixed + translateX 置中，與 .cart-page 內容欄同寬（手機即全寬貼邊）；
   不透明白底＋上緣 hairline＋向上陰影。
   ⚠ 刻意不用負 margin、不用 backdrop-filter——舊懸浮卡年代
   sticky+backdrop-filter+負 margin 在 iOS Safari 有合成層繪製錯位（實測翻車兩次），
   本版三個因子都避開。捲動空間由 .cart-page padding-bottom 預留。 */
.cart-summary {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0;
  width: 100%; max-width: 560px;
  z-index: 60;
  display: flex; align-items: center; gap: 14px;
  background: #fff;
  border-radius: 18px 18px 0 0; /* 圓頂：bottom-sheet 語感，貼底但頂緣圓潤（hairline 改陰影承擔分界） */
  padding: 14px 16px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.08);
}
.cart-summary-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.cart-summary-label { font-size: 13px; color: var(--text-secondary); }
.cart-total {
  font-size: 22px; font-weight: 700; line-height: 1.1;
  color: var(--primary); font-variant-numeric: tabular-nums;
}
.cart-checkout-btn { flex-shrink: 0; min-width: 132px; }
.cart-checkout-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cart-checkout-btn:not(:disabled):active { transform: scale(0.98); }

/* fixed 結帳列已脫離文流：貼底偏移不再分斷點（桌機/手機皆 bottom:0） */

/* 購物車返回鈕（cart 藏 nav 後的主要出口）：標題列最左，chevron 純圖示 */
.cart-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: -4px; flex: none;
  border: none; background: none; color: var(--text-secondary);
  font-size: 14px; cursor: pointer;
}
.cart-back:active { opacity: 0.6; }

/* 跨款合併計件小字：點出件數是「同商品所有款式合併」，避免逐列徽章被誤解為各自達標。
   定位為安靜註腳 —— 比徽章弱一階（muted 色 + 11.5px），緊貼促銷群組（margin-top 6px） */
.cart-item-basis {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px;
  font-size: 11.5px; color: var(--text-muted); line-height: 1.35;
}
.cart-item-basis .fa-circle-info { flex-shrink: 0; font-size: 11px; opacity: 0.85; }

/* ===== 失效商品區 / 庫存提示 ===== */
/* 庫存不足提示（留在正常列內）：黃字一行，跟 multibuy 群組同節奏。
   #b26a00 同 .multibuy-nudge 的刻意 hardcode（tokens 無對應 amber 文字色），兩處同改 */
.cart-stock-warn {
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px;
  font-size: 12px; font-weight: 600; color: #b26a00; line-height: 1.35;
}
.cart-stock-warn i { flex-shrink: 0; font-size: 11px; }
/* 數量 + 鈕觸頂（cap 在庫存）時的禁用態 */
.quantity-selector button:disabled { opacity: 0.35; cursor: not-allowed; }

/* 失效區：上邊框分隔 + 標題列（名稱左、清空鈕右）。
   margin-bottom 隔開下方合計列——灰階靜區與高亮操作區性格相反，貼著會互相干擾 */
.cart-invalid-section { margin-top: 20px; margin-bottom: 20px; padding-top: 14px; border-top: 1px solid var(--border); }
/* 正常區全空（只剩失效列）時失效區直接接在標題列後：免去孤立分隔線與大段留白 */
.cart-header + .cart-invalid-section { margin-top: 4px; padding-top: 4px; border-top: none; }
.cart-invalid-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.cart-invalid-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.cart-invalid-clear {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border: none; border-radius: 999px;
  background: transparent; color: var(--text-muted);
  font-size: 12.5px; cursor: pointer;
}
.cart-invalid-clear:hover { color: var(--danger); background: #fdf0ef; }

/* 失效列：整列降透明、圖灰階；無勾選框、無價格、無數量列 */
.cart-item--invalid { opacity: 0.55; }
.cart-item--invalid .cart-item-img { filter: grayscale(1); }
.cart-item--invalid .cart-item-name { color: var(--text-secondary); }
.cart-invalid-reason {
  /* block-level flex：標籤自成一行，不跟規格文字擠同行 */
  display: flex; align-items: center; gap: 5px;
  margin-top: 6px; width: fit-content;
  padding: 2px 8px; border-radius: 999px;
  background: var(--status-muted-bg); color: var(--status-muted-text);
  font-size: 11.5px; font-weight: 600; line-height: 1.4;
}
.cart-invalid-reason i { font-size: 10.5px; }

/* ===== Checkout Layout ===== */
.checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 560px; /* 與購物車頁同寬：固定結帳列 max-width 560，內容不同寬會與列錯邊 */
  margin: 0 auto;
  padding-bottom: 108px; /* 讓出固定結帳列高度（同 .cart-page） */
}

.checkout-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.checkout-item-img { width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; }
/* 直排（同購物車列文法）：品名上、規格下；價格獨立右欄垂直置中 */
.checkout-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.checkout-item-name { font-size: 15px; }
.checkout-item-variant { font-size: 13px; color: var(--text-muted); }
/* 行項小計收成安靜深色：全頁金額重音只留固定結帳列的應付金額 */
.checkout-item-price { flex-shrink: 0; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.checkout-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; font-size: 18px; }

/* 訂單摘要金額拆解（商品小計 / 點數折抵） */
.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  font-size: 14px;
  color: var(--text-secondary);
}
.checkout-summary-row .discount { color: var(--success); font-weight: 600; }

/* 完成訂單可獲得回饋（點數/券/免運）：與價格明細切開、自成一張柔和回饋卡，逐型一行 */
.checkout-earn {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  padding: 11px 14px;
  background: var(--primary-light);
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--primary);
}
/* 回饋卡標題（預計＋完成後發放）：比回饋列安靜一階的 caption */
.checkout-earn-title { font-size: 12px; font-weight: 600; opacity: .72; }
.checkout-earn-row { display: flex; align-items: center; gap: 8px; }
.checkout-earn i { font-size: 16px; flex-shrink: 0; width: 18px; text-align: center; }

/* 點數折抵卡 */
.points-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.points-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}
.points-head-title i { color: var(--primary); }
.points-balance {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 10px;
  border-radius: 999px;
}
.points-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
}
.points-toggle-label { font-size: 15px; }
.points-toggle-label.is-disabled { color: var(--text-muted); }

/* toggle 開關 */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: var(--border);
  border-radius: 999px;
  transition: background .2s;
}
.switch-slider::before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: transform .2s;
}
.switch input:checked + .switch-slider { background: var(--primary); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
.switch input:disabled + .switch-slider { opacity: .5; cursor: not-allowed; }

.points-applied {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--primary-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.points-applied-amount { font-size: 18px; font-weight: 700; color: var(--primary); }
.points-applied-hint { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.points-none-hint { margin-top: 10px; font-size: 13px; color: var(--text-muted); }

/* 自訂折抵點數輸入 */
.points-redeem-body { margin-top: 12px; }
.points-input-row { display: flex; gap: 8px; align-items: stretch; }
.points-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0 12px;
  background: #fff;
  transition: border-color .15s;
}
.points-input-wrap:focus-within { border-color: var(--primary); }
.points-input {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  padding: 10px 0;
  -moz-appearance: textfield;
}
.points-input::-webkit-outer-spin-button,
.points-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.points-input-suffix { font-size: 13px; color: var(--text-muted); margin-left: 6px; }
.points-max-btn {
  flex-shrink: 0;
  padding: 0 16px;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius);
  background: #fff;
  color: var(--primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.points-max-btn:hover { background: var(--primary-light); }
.points-max-hint { margin-top: 6px; font-size: 12px; color: var(--text-muted); }

.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.radio-label input { accent-color: var(--primary); }

.gateway-options { display: flex; flex-direction: column; gap: 8px; }
.gateway-block { display: flex; flex-direction: column; gap: 6px; }
.gateway-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.gateway-option.selected { border-color: var(--primary); background: var(--primary-light); }
/* radio 圓點視覺隱藏（選中態已有 邊框+底色+✓，三重指示是冗餘）；保留 input 供 v-model 與鍵盤操作 */
.gateway-option input { position: absolute; opacity: 0; pointer-events: none; }

/* multi gateway 展開的 sub-method radio：縮排即從屬（iOS 慣例；豎線對白底對比趨近 1:1 看不見，已移除） */
.method-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-left: 28px;
  padding: 8px 12px;
}
.method-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.95em;
}
.method-option.selected { border-color: var(--primary); background: var(--primary-light); }
/* 同 gateway-option：圓點隱藏，選中態靠 邊框+底色+icon 變色 */
.method-option input { position: absolute; opacity: 0; pointer-events: none; }
/* 列右側金額（期數「每期 $X」/取貨運費）：未選淡灰、選中主色加粗。
   規則：帶金額的列不放 ✓，選中靠 紫框＋金額轉紫；無金額的列才放 ✓ */
.gateway-option .mo-amount,
.method-option .mo-amount { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.gateway-option.selected .mo-amount,
.method-option.selected .mo-amount { color: var(--primary); font-weight: 600; }

/* 鎖定態付款卡（Asia Life 取貨綁定唯一代收）：同卡片幾何不跳、安靜呈現（不可選就不裝可選），鎖頭靠右對齊比照 ✓ */
.gateway-option.is-locked { cursor: default; color: var(--text-secondary); }
.gateway-option.is-locked .gw-icon { color: var(--text-muted); }
.gateway-option.is-locked .opt-lock { margin-left: auto; font-size: 12px; color: var(--text-muted); }

/* 區段中性說明字（取代彩色 alert：低優先資訊不配彩色裝置） */
.pay-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.pay-note i { margin-top: 3px; }

/* 純序號單免物流說明卡：tonal 資訊卡（對齊「預計回饋」的視覺語言），icon 做圓形底座聚焦 */
.ck-digital-note {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 12px;
  background: #eff6ff; border: 1px solid #dbeafe;
  font-size: 13.5px; line-height: 1.55; color: #1e40af;
}
.ck-digital-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #dbeafe; color: #2563eb; font-size: 14px;
}

/* 鍵盤焦點環（radio 視覺隱藏後的必要補償） */
.gateway-option:has(input:focus-visible),
.method-option:has(input:focus-visible),
.seg-control .seg-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ─── 結帳優惠券：可點券卡（折價=紫 / 運費=綠，色票分流）─── */
.coupon-group + .coupon-group { margin-top: 16px; }
.coupon-group-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; }
.coupon-list { display: flex; flex-direction: column; gap: 8px; }
/* 票券造型：左側彩色票根（icon＋類別）＋虛線齒孔＋上下咬口；折價=紫、運費=綠 */
.coupon-option {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.05);
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s ease, border-color .18s ease;
}
.coupon-option:not(.is-disabled):active { transform: scale(.985); }
.coupon-option.is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
/* 票根同步去彩：飽和色票降半透明在手機上仍讀作「可點」，灰階才讀作「不可用」 */
.coupon-option.is-disabled .coupon-stub { filter: grayscale(1); opacity: .75; }
.coupon-option.is-disabled .coupon-option-value { color: var(--text-secondary); }
.coupon-option:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* 選中態：類別色描邊環 + 同色柔光暈（抬升感，不改底色，齒孔咬口維持白底）*/
.coupon-option--discount.selected {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--primary), 0 10px 22px rgba(var(--primary-rgb), 0.18);
}
.coupon-option--shipping.selected {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--success), 0 10px 22px rgba(0, 184, 148, 0.20); /* success #00b894 */
}

/* 票根：滿版彩色 + 斜向高光，icon 收進半透明圓角 tile；左角隨卡片圓角。
   類別文字不再上票根（清單小標已講、原直排字正是卡片高度的元兇）——縮成 56px 色帶，類別由色票＋圖示表達 */
.coupon-stub {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
  color: #fff;
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 58%);
}
.coupon-stub i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 15px;
}
.coupon-option--discount .coupon-stub { background-color: var(--primary); }
.coupon-option--shipping .coupon-stub { background-color: var(--success); }

/* 票根與內容間的虛線撕線（齒孔）；內容垂直置中，與票根對齊不偏上 */
.coupon-option-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 26px 10px 14px;
}
.coupon-option-main::before {
  content: "";
  position: absolute;
  left: 0; top: 11px; bottom: 11px;
  border-left: 2px dashed var(--border);
}
/* 兩行文法：主數字＋券名同行（baseline 對齊、券名過長截斷）、條件＋狀態同行 */
.coupon-option-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.coupon-option-value { font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: var(--primary); flex-shrink: 0; }
.coupon-option-name { font-size: 13px; font-weight: 500; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coupon-option-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.coupon-option--shipping .coupon-option-value { color: var(--success); }
/* 選中勾：右上角、類別色 */
.coupon-check { position: absolute; top: 10px; right: 12px; font-size: 18px; color: var(--primary); z-index: 2; }
.coupon-option--shipping .coupon-check { color: var(--success); }
.coupon-hint { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
/* 不可用原因狀態（還差多少可用）：內聯接在條件後，暖色與灰階票卡對比，整卡 55% 透明下仍可辨 */
.coupon-option-state { font-size: 12px; font-weight: 600; color: #e8590c; margin-left: 6px; }

/* 取貨運費套運費券後：原價劃線 + 折後綠字 */
.mo-amount .fee-original { text-decoration: line-through; color: var(--text-muted); font-weight: 400; margin-right: 6px; }
.mo-amount .fee-discounted { color: var(--success); font-weight: 600; }

/* ─── 結帳付款區重設計 ─── */
/* 區段：細分隔線分隔 付款方式 / 付款管道 / 取貨 / 備註 */
.pay-section { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
.pay-section:first-of-type { padding-top: 0; margin-top: 0; border-top: none; }
.pay-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.pay-section-title i { color: var(--primary); width: 16px; text-align: center; }

/* 付款方式：兩張可點卡 */
.pay-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s;
}
.pay-type-card i { font-size: 22px; color: var(--text-muted); transition: color .15s; }
.pay-type-card .pay-type-label { font-size: 14px; font-weight: 600; }
.pay-type-card.active { border-color: var(--primary); background: var(--primary-light); }
.pay-type-card.active i { color: var(--primary); }

/* 分期期數 pill */
.period-picker { display: flex; gap: 8px; margin-top: 12px; }
.period-pill {
  flex: 1;
  padding: 10px 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.period-pill:hover { border-color: var(--primary); }
.period-pill.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

/* gateway 卡：加 icon + 選中勾選 */
.gateway-option .gw-icon { color: var(--primary); width: 18px; text-align: center; }
.gateway-option .gw-check { margin-left: auto; color: var(--primary); }
.method-option .m-icon { color: var(--text-muted); width: 16px; text-align: center; }
.method-option.selected .m-icon { color: var(--primary); }

.installment-preview {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--primary-light);
  border-radius: var(--radius);
  color: var(--primary);
  font-weight: 500;
}

.alert { padding: 12px 16px; border-radius: var(--radius); margin-bottom: 12px; font-size: 14px; }
.alert-warning { background: #ffeaa7; color: #856404; }
.alert-warning a { color: var(--primary); margin-left: 8px; }

/* ===== Orders（清單）===== */
.orders-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 16px; }

/* 分頁籤：購物旅程分桶；橫向可捲（窄螢幕溢出時），底線標示 active */
.order-tabs {
  display: flex; gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.order-tabs::-webkit-scrollbar { display: none; }
.order-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 14px;
  background: none; border: none;
  font-size: 14px; color: var(--text-secondary);
  white-space: nowrap; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* 蓋住 tabs 底線，active 底線接合 */
  transition: color .15s;
}
.order-tab:hover { color: var(--text-primary); }
.order-tab.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.order-tab-count {
  display: inline-block; margin-left: 4px;
  padding: 0 6px; min-width: 18px;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  color: var(--primary); background: var(--primary-light); border-radius: 99px;
  font-variant-numeric: tabular-nums;
}
.order-tab-hint {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 2px 0 16px;
  padding: 9px 13px;
  font-size: 12.5px; line-height: 1.5;
  color: var(--text-secondary);
  background: var(--primary-light);
  border-radius: var(--radius);
}
.order-tab-hint i { color: var(--primary); font-size: 13px; margin-top: 1px; flex-shrink: 0; }

.order-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.order-card:hover { box-shadow: var(--shadow-md); }
.order-card:active { transform: scale(0.99); }

.order-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.order-no { font-weight: 600; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.order-card-body { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; }
.order-card-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.order-item-count { font-size: 13px; color: var(--text-secondary); }
.order-item-count i { color: var(--text-muted); margin-right: 4px; }
.order-total { font-weight: 800; font-size: 20px; color: var(--text-primary); letter-spacing: -0.02em; }

.order-card-footer {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: var(--text-muted);
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.order-payment-type i { margin-right: 4px; }
.order-footer-right { display: inline-flex; align-items: center; gap: 8px; }
.order-footer-right .fa-chevron-right { color: var(--text-muted); font-size: 11px; }

/* status pill（清單 + 詳情共用） */
.order-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.status-pending { background: #fff4d6; color: #8a6d00; }
.status-confirmed { background: #dceeff; color: #0a5bd3; }
.status-shipping { background: #d4f6f0; color: #0a7d6e; }
.status-ready_pickup { background: var(--primary-light); color: var(--primary); }
.status-completed { background: #d6f7e4; color: #0a7a47; }
.status-cancelled { background: #ffe1da; color: #b32d12; }

.page-back { margin-bottom: 16px; }
.page-back a { color: var(--text-secondary); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }

.info-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 14px; }

/* ===== Order Detail ===== */
/* 動作區改 sticky 後自身佔文件流，不需再為 fixed 讓出留白（保留 class 供其他樣式沿用） */
.order-detail.has-paybar { padding-bottom: 16px; }

.od-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 18px 18px 20px;
  color: var(--on-primary);
  margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.od-hero-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.od-hero .od-date { font-size: 12px; opacity: .85; }
.od-hero .od-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, 0.22); color: var(--on-primary);
}
.od-orderno {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--on-primary); font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.od-orderno i { font-size: 15px; opacity: .8; }
.od-copied { margin-top: 6px; font-size: 12px; opacity: .9; }

.od-cancelled { display: flex; align-items: center; gap: 10px; color: #b32d12; font-weight: 600; }
.od-cancelled i { font-size: 18px; }

/* 進度條 */
.od-progress-card { overflow: hidden; }
.od-stepper { display: flex; margin-top: 4px; }
.od-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; }
.od-step-line { position: absolute; top: 15px; right: 50%; left: -50%; height: 2px; background: var(--border); z-index: 0; }
.od-step.is-done .od-step-line, .od-step.is-active .od-step-line { background: var(--primary); }
.od-step-node {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-secondary); color: var(--text-muted);
  font-size: 13px; border: 2px solid var(--border);
}
.od-step.is-done .od-step-node { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.od-step.is-active .od-step-node {
  background: #fff; color: var(--primary); border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-light);
}
.od-step-label { margin-top: 8px; font-size: 11px; text-align: center; color: var(--text-muted); }
.od-step.is-done .od-step-label, .od-step.is-active .od-step-label { color: var(--text-primary); font-weight: 600; }

/* 履約群組標題（多組時才顯示交付方式與該組狀態；單組單維持原本外觀） */
.od-fgroup-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.od-fgroup-title i { margin-right: 6px; color: var(--text-muted); }
.od-fgroup-tracking {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px; font-size: 13px; color: var(--text-muted);
}
.od-fgroup-tracking code, .od-fgroup-tracking a { font-size: 13px; color: var(--text-primary); }

/* 商品列 */
.od-item { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.od-item:last-child { border-bottom: none; padding-bottom: 0; }
.od-item-img { width: 48px; height: 48px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.od-item-main { flex: 1; min-width: 0; }
.od-item-name { font-size: 15px; font-weight: 600; }
.od-item-variant {
  display: block; margin-top: 2px;
  font-size: 12px; color: var(--text-muted);
}
.od-item-meta { text-align: right; flex-shrink: 0; }
.od-item-price { font-size: 12px; color: var(--text-muted); }
.od-item-orig { text-decoration: line-through; margin-right: 4px; }

/* 電子序號：付款後配發，買家在訂單詳情看到並複製（憑證卡樣式） */
.od-serials {
  margin: 0 0 12px; padding: 12px 14px;
  background: #eff6ff; border: 1px solid #dbeafe; border-radius: 10px;
}
.od-serials-title {
  font-size: 13px; font-weight: 600; color: #1d4ed8;
  margin-bottom: 8px; display: flex; align-items: center; gap: 6px;
}
.od-serial-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-top: 1px solid #dbeafe;
}
.od-serial-row:first-of-type { border-top: none; }
.od-serial-code {
  flex: 1; min-width: 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 14px; font-weight: 600; letter-spacing: .5px; color: #0f172a;
  word-break: break-all;
}
.od-serial-copy {
  flex-shrink: 0; border: 1px solid #bfdbfe; background: #fff; color: #1d4ed8;
  border-radius: 7px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; transition: background .15s;
}
.od-serial-copy:hover { background: #dbeafe; }
/* 兌換說明列＝tel: 連結：手機點了直接撥號（膠囊按鈕樣式，表達可點） */
.od-serial-dial {
  font-size: 13px; font-weight: 600; color: #1d4ed8; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; background: #fff; border: 1px solid #bfdbfe; border-radius: 9px;
  text-decoration: none; transition: background .15s;
}
.od-serial-dial:active { background: #dbeafe; }
.od-serial-dial-go { margin-left: auto; font-size: 11px; opacity: .55; }
/* 一組序號的多欄呈現：code＝主角（大字、四碼分組）、sn＝次要小灰字 */
.od-serial-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.od-serial-field { display: flex; align-items: baseline; gap: 8px; }
.od-serial-label { flex-shrink: 0; font-size: 12px; color: #64748b; min-width: 56px; }
.od-serial-field:not(.is-primary) .od-serial-code {
  font-size: 12.5px; font-weight: 500; color: #64748b; letter-spacing: .3px;
}
.od-serial-field.is-primary .od-serial-code {
  font-size: 17px; font-weight: 700; letter-spacing: 1px; color: #0f172a;
}
.od-item-sub { font-size: 14px; font-weight: 600; margin-top: 2px; }
/* 有快照的品項整列可點（進交易快照頁）：按壓微回饋 */
.od-item.is-link { cursor: pointer; }
.od-item.is-link:active { opacity: .6; }

/* 交易快照頁（下單當下商品頁存檔，唯讀） */
.order-snapshot { padding-bottom: 72px; /* 預留底部快照 banner 高度 */ }
.snap-gallery { margin-bottom: 12px; }
.snap-main-image {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius); background: var(--bg-muted, #f5f5f5);
}
.snap-thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; }
.snap-thumb {
  width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover;
  flex-shrink: 0; cursor: pointer; border: 2px solid transparent; opacity: .7;
}
.snap-thumb.active { border-color: var(--primary); opacity: 1; }
.snap-title { font-size: 17px; font-weight: 700; margin: 0; }
.snap-subtitle { margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.snap-captured { margin-top: 8px; font-size: 12px; color: var(--text-muted); }
.snap-captured i { margin-right: 4px; }
/* 本單購買卡：主色淡底，與快照內容（白卡）區隔「這是你的成交記錄」 */
.snap-bought { background: var(--primary-light); }
.snap-bought-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--primary);
}
.snap-bought-orderno { margin-left: auto; font-size: 11px; font-weight: 400; color: var(--text-muted); }
.snap-bought-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0 0; margin-top: 9px; font-size: 14px;
}
.snap-bought-row + .snap-bought-row { border-top: 1px dashed var(--border); }
.snap-bought-label { flex: 1; min-width: 0; font-weight: 600; }
.snap-bought-qty { color: var(--text-muted); font-size: 13px; white-space: nowrap; }
.snap-bought-price { font-weight: 700; white-space: nowrap; }
.snap-bought-price .snap-original-price { font-weight: 400; margin-right: 4px; }

.snap-price-row { display: flex; align-items: baseline; gap: 8px; }
.snap-price { font-size: 22px; font-weight: 800; color: var(--primary); }
.snap-original-price { font-size: 13px; color: var(--text-muted); text-decoration: line-through; }
.snap-installment { margin-top: 8px; font-size: 13px; color: var(--text-secondary, var(--text-muted)); }
.snap-installment i { margin-right: 4px; }
.snap-sku-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--border); font-size: 14px;
}
.snap-sku-row:last-child { border-bottom: none; padding-bottom: 0; }
.snap-sku-img { width: 36px; height: 36px; border-radius: var(--radius); object-fit: cover; flex-shrink: 0; }
.snap-sku-label { flex: 1; min-width: 0; }
.snap-sku-price { font-weight: 600; white-space: nowrap; }
.snap-sku-price .snap-original-price { font-weight: 400; margin-left: 4px; }
.snap-spec-grid { display: flex; flex-direction: column; }
.snap-spec-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px;
}
.snap-spec-row:last-child { border-bottom: none; }
.snap-spec-label { color: var(--text-muted); flex-shrink: 0; }
.snap-spec-value { text-align: right; }
.snap-store-link { font-size: 14px; font-weight: 600; color: var(--text-primary); }
/* 資訊橫幅：浮框（快照頁 nav 隱藏；動作列才貼地） */
.snap-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 600px; margin: 0 auto;
  padding: 12px 16px;
  background: rgba(33, 41, 54, .96); color: #fff; font-size: 14px;
  border-radius: 18px;
}
.snap-banner-btn {
  border: 1px solid rgba(255, 255, 255, .7); color: #fff; background: transparent;
  font-size: 13px; padding: 7px 14px; white-space: nowrap;
}

/* 金額明細 */
.od-price-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; }
.od-price-row small { color: var(--text-muted); font-size: 12px; }
.od-price-discount { color: var(--primary); }
.od-price-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 16px; font-weight: 800; }

.info-row--note span:last-child { max-width: 60%; text-align: right; color: var(--text-secondary); }
/* 長值列（如取貨門市「名稱｜地址」）：限寬靠右換行，不擠壓左側標籤 */
.info-row--wrap span:last-child { max-width: 62%; text-align: right; }

/* 付款紀錄 */
.od-record { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.od-record-hint { flex-basis: 100%; font-size: 12px; color: var(--text-muted); margin-top: -2px; }
.od-record:last-child { border-bottom: none; padding-bottom: 0; }
.od-record-gw { font-size: 14px; font-weight: 500; }
.od-record-time { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.od-record-ref { word-break: break-all; }
.od-record-side { text-align: right; flex-shrink: 0; }
.od-record-amount { font-size: 14px; font-weight: 600; margin-bottom: 4px; }

/* 付款列：貼視窗底（內頁 nav 隱藏），毛玻璃配方同 .pdp-cta-bar */
.od-paybar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(var(--primary-deep-rgb), 0.06);
  z-index: 50; max-width: 600px; margin: 0 auto;
}
.od-paybar-amount { display: flex; flex-direction: column; line-height: 1.2; }
.od-paybar-amount span { font-size: 11px; color: var(--text-muted); }
.od-paybar-amount strong { font-size: 18px; color: var(--text-primary); }
.od-paybar .btn { flex: 1; }

/* 確認收貨列：貨已寄出/到店時固定在頁面底部（主流版型：主要動作不插在清單裡）。
   沿用 .od-paybar 的版面，只覆寫左側提示文字與按鈕伸縮。 */
.od-receivebar { flex-wrap: wrap; }
/* 提示文字不參與伸縮：兩組實體在途時有兩顆按鈕，不加 flex:none 會被擠到換行斷字 */
.od-receivebar-hint { flex: none; font-size: 13px; color: var(--text-secondary); line-height: 1.3; }
.od-receivebar .btn { flex: 1; min-width: 128px; }
.od-receivebar-tag { margin-left: 6px; font-size: 11px; opacity: 0.85; }
/* 底部動作區：收貨列與付款列可能並存（分期單付到 partial 即可出貨，後端只擋 unpaid），
   兩者都是主要動作不可互相遮蔽，故包在同一容器內由容器 fixed，內部依文件流上下堆疊。
   維持 fixed（不改 sticky）：paybar 原本就以 fixed + z-index 壓在底部導覽膠囊之上，
   換定位模型會連帶改動該層疊關係。高度交給文件流，容器不設高。 */
.od-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50; max-width: 600px; margin: 0 auto;
}
/* 併入容器後由容器定位，各列取消自身的 fixed（安全區只由最底一列扣一次） */
.od-actionbar .od-paybar { position: static; max-width: none; margin: 0; }
.od-actionbar .od-receivebar { padding-bottom: 12px; }
/* 容器內只有收貨列（未到付款階段）時，它就是最底一列，要自己扣安全區 */
.od-actionbar .od-receivebar:last-child { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
/* 堆疊時上層列不重複畫陰影，避免中間出現一道深色接縫 */
.od-actionbar .od-receivebar:not(:last-child) { box-shadow: none; }

.payment-result { margin-top: 16px; padding: 16px; background: var(--primary-light); border-radius: var(--radius); }
.payment-ref { margin-bottom: 8px; }

/* ===== Profile ===== */
.kyc-status-block { display: flex; align-items: center; gap: 12px; }

/* ===== KYC Form ===== */
.kyc-preview {
  margin-top: 8px;
  max-width: 200px;
  max-height: 150px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ===== Store Page ===== */
.store-header { margin-bottom: 20px; }

.store-banner {
  width: 100%;
  aspect-ratio: 4 / 1;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.store-banner--empty {
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-soft) 60%, var(--primary-softer) 100%);
}

/* 店家身分卡：在 banner 下方 */
.store-identity {
  position: relative; /* 收合搜尋（store-search-wrap absolute）的定位錨 */
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 22px; /* 下緣留白：原由常駐搜尋框的外距撐開，搜尋收合後補回段落分界 */
}

.store-logo {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  border: 3px solid var(--bg-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-soft) 100%);
}
.store-logo img { width: 100%; height: 100%; object-fit: cover; }
.store-logo span { color: var(--on-primary); font-size: 36px; font-weight: 700; line-height: 1; text-transform: uppercase; }

.store-identity-text { flex: 1; min-width: 0; }
.store-name { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0; }
.store-desc { color: var(--text-secondary); font-size: 14px; margin-top: 4px; line-height: 1.5; }

/* 店內搜尋列：iOS search field 風（柔灰底、SF 次級色 placeholder、≥16px 避免對焦放大） */
.store-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eceef0;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 0 0 14px; /* 與下方分類同屬「瀏覽控制」→ 靠近 */
}
.store-search .fa-magnifying-glass { color: #8e8e93; font-size: 15px; }
.store-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-size: 16px;
  color: var(--text-primary);
}
.store-search input::placeholder { color: #8e8e93; }

/* 店內分類快捷：squircle 圖示橫列（退讓商品 grid → 體積收斂、陰影輕）。
   有圖顯圖；無圖顯彩色字母 monogram（Contacts 風），兩態皆飽滿不破版。 */
.store-cats {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox 隱藏捲軸 */
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 4px;
  margin-bottom: 24px; /* 段落分界：大於組內間距，與下方商品區拉開 */
}
.store-cats::-webkit-scrollbar { display: none; }

.store-cat {
  flex: none;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.store-cat-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px; /* squircle 感 */
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s;
}
.store-cat:active .store-cat-icon { transform: scale(0.94); }
.store-cat-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }

.store-cat-mono {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
}
.store-cat-name {
  font-size: 12.5px;
  line-height: 1.25;
  color: #636e72;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 64px;
}

/* 商品區塊 */
.store-section-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.store-section-head h2 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin: 0; }
.store-section-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-light);
  padding: 1px 9px;
  border-radius: 99px;
}

/* ===== Badges ===== */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-success { background: #55efc4; color: #00695c; }
.badge-warning { background: #ffeaa7; color: #856404; }
.badge-danger { background: #fab1a0; color: #8b0000; }
.badge-muted { background: #dfe6e9; color: #636e72; }
.badge-info { background: #74b9ff; color: #0056b3; }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-paid { background: #55efc4; color: #00695c; }
.badge-unpaid { background: #ffeaa7; color: #856404; }
.badge-partial { background: #fdcb6e; color: #856404; }

/* ===== Data Table ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.data-table th { font-weight: 600; color: var(--text-secondary); font-size: 12px; text-transform: uppercase; }

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

/* ===== Misc ===== */
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-muted { color: var(--text-muted); }

.btn-icon { background: none; border: none; cursor: pointer; font-size: 16px; }
.btn-danger-text { color: var(--danger); background: none; border: none; cursor: pointer; }
.btn-danger-text:hover { text-decoration: underline; }

.btn-block { display: block; width: 100%; }
.btn-lg { padding: 14px 24px; font-size: 16px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-outline { background: none; border: 1px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary-light); }

.btn-danger { background: var(--danger); color: white; border: none; padding: 10px 20px; border-radius: var(--radius); cursor: pointer; }
.btn-danger:hover { opacity: 0.9; }

.form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  background: white;
}
.form-select-sm { padding: 4px 8px; font-size: 12px; width: auto; }

.form-hint { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
}
.lightbox img { max-width: 90vw; max-height: 90vh; border-radius: var(--radius); }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .product-detail {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* PDP：行內加購鈕改由底部固定列負責，並隱藏 bottom-nav 讓位 */
  .product-actions { display: none; }
  .pdp-cta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px 16px max(10px, env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(var(--primary-deep-rgb), 0.06);
  }
  body.pdp-no-nav .bottom-nav { display: none; }

  /* 變體商品手機：上方規格/購買區隱藏 → 商品描述收掉上分隔線，
     避免與「價格下分隔線」形成兩條夾空白的雙線 */
  .product-desc-section.desc-tight-mobile {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

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

  .container { padding: 0 8px; }

  .hide-mobile { display: none; }

  .store-identity { gap: 12px; }
  .store-logo { width: 68px; height: 68px; }
  .store-logo span { font-size: 28px; }
  .store-name { font-size: 18px; }
}

@media (min-width: 769px) {
  .bottom-nav { display: none; }

  .product-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
  }

  .main-content {
    padding-bottom: 24px;
  }
}

/* ==================== 二手手機版型 ==================== */
.phone-detail {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 88px; /* 留空間給 fixed CTA */
}
.phone-gallery {
  background: #fff;
  position: relative;
}
.phone-main-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain; /* 完整顯示商品比例，不裁切（非 1:1 圖在白底留白） */
  display: block;
}
.phone-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
  background: #fff;
}
.phone-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.phone-thumb.active {
  border-color: var(--primary);
}
.phone-header {
  background: #fff;
  padding: 16px;
  margin-top: 8px;
}
.phone-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.phone-condition-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: #00b894;
}
.phone-condition-badge.cond-99 { background: #00b894; }
.phone-condition-badge.cond-95 { background: #0984e3; }
.phone-condition-badge.cond-90 { background: #6c5ce7; }
.phone-condition-badge.cond-85 { background: #fdcb6e; color: #2d3436; }
.phone-condition-badge.cond-80 { background: #e17055; }
.phone-verified-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--primary);
  background: var(--primary-light);
  border: 1px solid var(--primary);
}
.phone-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  line-height: 1.35;
}
.phone-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
}
.phone-price-card {
  background: linear-gradient(135deg, #fff7ed 0%, #fff 100%);
  padding: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.phone-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.phone-price {
  font-size: 28px;
  font-weight: 700;
  color: #e17055;
}
.phone-original-price {
  font-size: 16px;
  color: var(--text-muted);
  text-decoration: line-through;
}
.phone-installment {
  margin-top: 8px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 500;
}
.phone-card {
  background: #fff;
  margin-top: 8px;
  padding: 16px;
}
.phone-card-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}
.phone-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
.phone-spec-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phone-spec-label {
  font-size: 12px;
  color: var(--text-muted);
}
.phone-spec-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.phone-warranty,
.phone-accessories {
  padding: 8px 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.phone-defects-card {
  background: #fff5f5;
  border-left: 4px solid var(--danger);
}
.phone-defects-text {
  color: #c0392b;
  line-height: 1.6;
  white-space: pre-wrap;
}
.phone-store-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}
.phone-stock {
  padding: 12px 16px;
  background: #fff;
  margin-top: 8px;
  font-size: 14px;
  color: var(--success);
  font-weight: 500;
}
.phone-stock.out-of-stock {
  color: var(--danger);
  background: #fff5f5;
  font-weight: 700;
}
.phone-cta-footer {
  position: fixed;
  bottom: 0; /* 內頁 nav 隱藏，貼視窗底 */
  left: 0;
  right: 0;
  background: #fff;
  padding: 12px 16px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  z-index: 50;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
}
.phone-cta-btn {
  width: 100%;
}

/* ===== 售完狀態（業界主流：圖片遮罩徽章 + 灰化 + 灰底停用 CTA；可重用於各版型）===== */
.soldout-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.14);
}
.soldout-overlay-badge {
  display: inline-block;
  padding: 11px 28px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  text-indent: 2px;
  color: #fff;
  background: rgba(28, 28, 30, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.phone-main-image.is-soldout { filter: grayscale(0.55) opacity(0.9); }
.btn-soldout,
.btn-soldout:disabled {
  background: #e5e7eb;
  color: #6b7280;
  cursor: not-allowed;
  opacity: 1;
}

/* ==================== 服飾版型 ==================== */
.apparel-detail {
  max-width: 720px;
  margin: 0 auto;
}
.apparel-gallery {
  background: #fff;
}
.apparel-main-image {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: contain; /* 完整顯示商品比例，不裁切（非 4:5 圖在白底留白） */
  display: block;
}
.apparel-thumbs {
  display: flex;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
}
.apparel-thumb {
  width: 60px;
  height: 75px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.apparel-thumb.active {
  border-color: var(--primary);
}
.apparel-info {
  background: #fff;
  padding: 20px 16px;
}
.apparel-brand-line {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.apparel-brand {
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.apparel-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 500;
}
.apparel-title {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 6px;
  line-height: 1.35;
}
.apparel-store {
  margin-bottom: 12px;
  font-size: 13px;
}
.apparel-store a { color: var(--primary); text-decoration: none; }
.apparel-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.apparel-price {
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
}
.apparel-original-price {
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: 15px;
}
.apparel-discount {
  background: var(--primary);
  color: var(--on-primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
.apparel-spec-block {
  margin: 16px 0;
}
.apparel-spec-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.apparel-pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.apparel-pill {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: default;
}
.apparel-pill.active {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  font-weight: 600;
}
.apparel-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 13px;
}
.apparel-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.apparel-meta-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ==================== Home v2 (Zhuanzhuan-style) ==================== */
.home-root { padding-bottom: 24px; }

.home-banner {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0;
  background: #eee;
}
.home-banner-track {
  display: flex;
  transition: transform .4s ease;
}
.home-banner-slide {
  flex: 0 0 100%;
  position: relative;
  cursor: pointer;
}
.home-banner-slide img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16/7;
  object-fit: cover;
}
.home-banner-caption {
  position: absolute;
  bottom: 8px; left: 12px;
  color: white;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.home-banner-dots {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.home-banner-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  cursor: pointer;
  transition: background .2s;
}
.home-banner-dot.active { background: white; }

.home-section { margin: 16px 0; }
.home-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.home-section-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.home-section-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* 首頁賣場列表 */
.store-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.store-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border, #eee);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: box-shadow .2s, transform .1s;
}
.store-list-item:active { transform: scale(.99); }
.store-list-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.store-list-logo {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(120deg, var(--primary) 0%, var(--primary-soft) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  font-size: 24px;
  font-weight: 700;
}
.store-list-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.store-list-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.store-list-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text, #2d3436);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-list-desc {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.store-list-count {
  font-size: 12px;
  color: var(--text-muted);
}
.store-list-arrow {
  flex: none;
  font-size: 22px;
  color: var(--text-muted);
  line-height: 1;
}

.home-cat-section {
  padding-top: 4px;
}
.home-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 12px 8px;
}
.home-cat-tile {
  background: none;
  border: none;
  padding: 4px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}
.home-cat-tile:active { transform: scale(0.96); }

.home-cat-icon {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-pale) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.08);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.home-cat-tile:hover .home-cat-icon {
  box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.18);
}

/* FA fallback — 永遠墊在底層；img 載入失敗時兜底
 * fa-tag 形狀傾斜 ↗，bbox 置中時視覺偏左上 → translate(4px, 4px) 補光學置中 */
.home-cat-icon-fallback {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  color: var(--primary);
  pointer-events: none;
  transform: translate(10px, 4px);
}
/* 真實 icon 圖：contain + 70% size 留白，icon 不裁切 */
.home-cat-icon img {
  position: relative;
  z-index: 1;
  width: 70%;
  height: 70%;
  object-fit: contain;
}
.home-cat-name {
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
  text-align: center;
  line-height: 1.3;
}

.home-promo-banner {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  margin-bottom: 12px;
}
.home-promo-banner img { width: 100%; display: block; aspect-ratio: 16/7; object-fit: cover; }

.home-hscroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.home-hscroll::-webkit-scrollbar { display: none; }
.home-hscroll-card {
  flex: 0 0 140px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  cursor: pointer;
  position: relative;
}
.home-hscroll-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.home-hscroll-name {
  font-size: 13px;
  padding: 6px 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-hscroll-price {
  padding: 2px 8px 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.home-hscroll-price .price-now {
  color: #e53935;
  font-weight: 700;
  font-size: 15px;
}
.home-hscroll-price .price-was {
  color: var(--text-muted);
  font-size: 11px;
  text-decoration: line-through;
}
.hot-rank {
  position: absolute;
  top: 6px; left: 6px;
  width: 22px; height: 22px;
  border-radius: 4px;
  background: rgba(0,0,0,.55);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 1;
}
.hot-rank.r1 { background: #e53935; }
.hot-rank.r2 { background: #fb8c00; }
.hot-rank.r3 { background: #fdd835; color: #333; }

/* ==================== Category Landing ==================== */
.cat-landing { padding-bottom: 24px; }

.cat-banner {
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0;
}
.cat-banner img { width: 100%; display: block; aspect-ratio: 16/7; object-fit: cover; }

/* Apple-style hero title：大字 semibold、左對齊、上下大留白 */
.cat-title { position: relative; margin: 20px 0; padding: 0 4px; }
.cat-title h1 {
  margin: 0 0 6px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #1d1d1f;
}
.cat-title .cat-subtitle {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: #6e6e73;
}

/* 店內搜尋收合：右上角放大鏡圖示，點擊展開覆蓋整個標題列輸入 */
.store-search-wrap {
  position: absolute;
  top: 0;
  right: 4px;
  bottom: 0;
  display: flex;
  align-items: center;
}
.store-search-toggle {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #eceef0;
  color: #6e6e73;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.store-search-wrap.open {
  left: 4px;
  right: 4px;
  align-items: stretch; /* 拉滿標題列高度 → 完整遮住標題 */
}
.store-search--overlay {
  flex: 1;
  margin: 0;
  align-items: center;
}
.store-search-close {
  border: none;
  background: none;
  color: #8e8e93;
  font-size: 18px;
  padding: 0 2px 0 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.cat-section { margin: 12px 0; }

.cat-brand-row {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 6px 0;
  scrollbar-width: none;
}
.cat-brand-row::-webkit-scrollbar { display: none; }
.cat-brand-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  opacity: .7;
  transition: opacity .2s;
}
.cat-brand-item.active { opacity: 1; }
.cat-brand-logo {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: white;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
}
.cat-brand-item.active .cat-brand-logo {
  border-color: var(--primary, #0076ff);
}
.cat-brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-brand-name { font-size: 12px; }

.cat-series-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cat-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f0f2f5;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
}
.cat-chip.active {
  background: var(--primary, #0076ff);
  color: var(--on-primary);
}

.cat-sort-bar {
  display: flex;
  gap: 16px;
  padding: 10px 4px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: white;
  z-index: 3;
}
.cat-sort-item {
  cursor: pointer;
  font-size: 14px;
  color: var(--text-muted);
}
.cat-sort-item.active {
  color: var(--text);
  font-weight: 600;
}

.cat-filter-panel {
  background: #fafbfc;
  padding: 12px;
  border-radius: 8px;
  margin: 8px 0;
  border: 1px solid #eee;
}
.cat-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px dashed #eee;
}
.cat-filter-row:last-of-type { border-bottom: none; }
.cat-filter-row label {
  font-size: 13px;
  color: var(--text-muted);
  min-width: 72px;
}
/* 價格區間：等寬輸入框 + 紫色 focus 光暈 + 去除數字微調箭頭 */
.cat-price-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.cat-price-range input {
  flex: 1;
  width: 0;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #e3e6ea;
  border-radius: 9px;
  font-size: 14px;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  -moz-appearance: textfield;
}
.cat-price-range input::-webkit-outer-spin-button,
.cat-price-range input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cat-price-range input::placeholder { color: #b3b9c2; }
.cat-price-range input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
}
.cat-price-sep { flex: 0 0 auto; color: var(--text-muted); font-weight: 500; }
.cat-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* ==================== Phone detail v2 ==================== */
.phone-grade-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
  margin-right: 6px;
}
.phone-grade-chip.grade-appearance {
  background: #e3f2fd;
  color: #1565c0;
}
.phone-grade-chip.grade-function {
  background: #fff3e0;
  color: #e65100;
}

.phone-sale-count {
  margin-left: 12px;
  font-size: 12px;
  color: var(--text-muted);
  background: #fff3e0;
  padding: 2px 8px;
  border-radius: 4px;
}
.phone-price-refs {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}
.phone-subtle { color: var(--text-muted); font-weight: 400; font-size: 13px; }

/* ─── 結帳：出貨細節群組（Apple 式淺底容器）——收件資訊（宅配）與取貨門市（門市取貨）共用 ─── */
.recipient-group {
  margin-top: 14px;
  padding: 14px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
}
.recipient-group .form-input,
.recipient-group .form-select { background: #fff; }
.recipient-group .form-group { margin-bottom: 12px; }
.recipient-group .form-group:last-child { margin-bottom: 0; }
.recipient-group label { font-size: 13px; color: var(--text-secondary); }
.recipient-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.recipient-title i { color: var(--primary); }
.recipient-addr-row { display: flex; gap: 10px; }
/* 郵遞區號：自動帶出的唯讀欄，置中淺灰與可輸入欄區隔 */
.recipient-group .recipient-zip {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  text-align: center;
}

/* iOS 風分段切換（發票 個人/公司行號）：灰軌＋白色選中片浮起。
   兩層 class 確保壓過 .recipient-group label 的字級/色 */
.seg-control { display: flex; background: rgba(0, 0, 0, .05); border-radius: 10px; padding: 3px; }
.seg-control .seg-option {
  position: relative; flex: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 8px 4px; font-size: 14px; color: var(--text-secondary);
  border-radius: 8px; cursor: pointer; user-select: none; transition: color .15s;
}
.seg-control .seg-option.selected {
  background: #fff; color: var(--text-primary); font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.seg-control .seg-option input { position: absolute; opacity: 0; pointer-events: none; }

.phone-grade-card .phone-grade-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.phone-grade-section {
  background: #fafbfc;
  border-radius: 8px;
  padding: 10px;
}
.phone-grade-head {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.phone-grade-notes {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: #555;
  line-height: 1.7;
}

.phone-same-model {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.phone-same-model::-webkit-scrollbar { display: none; }
.phone-same-item {
  flex: 0 0 100px;
  text-decoration: none;
  color: inherit;
  background: white;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
}
.phone-same-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
}
.phone-same-grades {
  padding: 4px 0 0;
  font-size: 0;
}
.phone-same-grades .phone-grade-chip {
  margin-right: 0;
  font-size: 10px;
  padding: 1px 4px;
  margin: 0 1px;
}
.phone-same-price {
  padding: 4px;
  color: #e53935;
  font-weight: 700;
  font-size: 13px;
}

/* ==================== 分期付款 UI ==================== */
/* 灰容器統一 --bg-secondary（與 recipient-group 同色票）；自帶藍灰票已淘汰 */
.installment-plan {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 8px 0 16px;
}

/* 分期摘要行：透明、靠左、文字化展開鈕＋chevron（不像 alert 也不像按鈕） */
.plan-summary {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.plan-summary-head { display: flex; align-items: center; gap: 8px; }
.plan-summary-head > i { color: var(--text-muted); font-size: 15px; }
.plan-summary-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.plan-summary-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--primary);
}
.plan-summary-toggle i { font-size: 11px; transition: transform .2s; }
.plan-summary-toggle i.open { transform: rotate(180deg); }
.plan-summary-sub { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.installment-plan .installment-plan-head { margin-top: 12px; }
.installment-plan-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-weight: 700;
  margin-bottom: 8px;
}
.installment-plan-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
.installment-schedule-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.installment-schedule-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.4fr;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.installment-schedule-row:last-child { border-bottom: none; }
.installment-schedule-label { font-weight: 600; }
/* 紅＝金額僅留給頭款（紅一多就不再是強調）；常規期走深灰粗體；橘黃整列填色已淘汰 */
.installment-schedule-amount {
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
}
.installment-schedule-row.is-downpayment .installment-schedule-amount {
  font-weight: 700;
  color: #e53935;
}
.installment-schedule-due {
  text-align: right;
  color: var(--text-muted);
  font-size: 12px;
}
.installment-plan-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.alert-info {
  background: #e7f3ff;
  color: #0b5394;
  border: 1px solid #b8d9f7;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  margin: 10px 0;
}
.pickup-asialife-note { margin-top: -4px; }

/* ==================== 響應式 ==================== */
@media (max-width: 480px) {
  .phone-spec-grid { grid-template-columns: 1fr; }
  .phone-grade-card .phone-grade-detail { grid-template-columns: 1fr; }
  .installment-schedule-row {
    grid-template-columns: 1fr 1fr;
  }
  .installment-schedule-due {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 0;
  }
}

/* ===== Search Results Page ===== */
.search-page {
  /* container 已有 padding，這裡只負責內部結構 */
}

.search-stats {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  font-size: 14px;
  color: var(--text-secondary);
  position: sticky;
  top: var(--header-height);
  background: var(--bg-secondary);
  z-index: 10;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.search-stats-query {
  color: var(--text-primary);
  font-weight: 700;
}

.search-stats-count {
  color: var(--text-secondary);
}

.search-stats-count strong {
  color: var(--primary);
  font-weight: 700;
}

.empty-state-title {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.search-loadmore {
  display: flex;
  justify-content: center;
  padding: 24px 0 12px;
}

.btn-loadmore {
  background: var(--bg-card);
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 20px;
  padding: 10px 32px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-loadmore:hover:not(:disabled) {
  background: var(--primary-light);
}

.btn-loadmore:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.search-allloaded {
  color: var(--text-muted);
  font-size: 13px;
  padding: 12px 0;
}

/* App Toast 樣式已抽至共用 toast.css（三端共用）*/

/* ===== 個人資料：導覽列（drill-in 到子頁） ===== */
.profile-row-nav { text-decoration: none; cursor: pointer; }
.profile-row-nav .profile-row-label { display: inline-flex; align-items: center; gap: 10px; }
.profile-row-nav .profile-row-label i { color: var(--primary); font-size: 15px; width: 18px; text-align: center; }
.profile-row-chevron { margin-left: auto; font-size: 13px; color: var(--text-muted); }

/* ===== 我的地址（帳號層收件地址簿） ===== */
.addr-page { padding-bottom: 24px; }
.addr-title { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 6px 0 16px; }

.addr-list { display: flex; flex-direction: column; gap: 12px; }
.addr-card { background: var(--bg-card); border-radius: 14px; box-shadow: var(--shadow-sm); overflow: hidden; }
.addr-card-body { position: relative; padding: 14px 38px 12px 16px; cursor: pointer; }
.addr-card-top { display: flex; align-items: baseline; gap: 10px; }
.addr-name { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.addr-phone { font-size: 13px; color: var(--text-secondary); }
.addr-line { margin-top: 4px; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.addr-chevron { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-muted); }
.addr-card-foot { display: flex; align-items: center; min-height: 40px; padding: 0 16px; border-top: 1px solid var(--border); }
.addr-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--primary); }
.addr-setdefault { border: none; background: none; padding: 0; cursor: pointer; font-size: 13px; color: var(--text-secondary); font-family: inherit; }
.addr-setdefault:hover { color: var(--primary); }

/* 新增地址：虛線塊狀鈕 */
.addr-add { width: 100%; margin-top: 16px; padding: 14px; border: 1px dashed var(--border); border-radius: 14px; background: var(--bg-card); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--primary); font-family: inherit; }

/* 編輯頁：群組表單（複用 .profile-group/.profile-row）+ 郵遞區號註腳 + 開關 + 儲存/刪除 */
.addr-zip-inline { color: var(--text-muted); font-size: 13px; }
.profile-row-selectval.is-placeholder { color: var(--text-muted); }
.profile-row.is-disabled-row { opacity: 0.5; }
.profile-row.is-disabled-row .profile-row-selectval { color: var(--text-muted); }
/* 開關（設為預設） */
.addr-switch { position: relative; display: inline-block; width: 44px; height: 26px; margin-left: auto; flex: none; }
.addr-switch input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.addr-switch-track { position: absolute; inset: 0; background: #e5e5ea; border-radius: 999px; transition: background .2s; pointer-events: none; }
.addr-switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.addr-switch input:checked + .addr-switch-track { background: var(--primary); }
.addr-switch input:checked + .addr-switch-track::after { transform: translateX(18px); }
.addr-save { width: 100%; margin-top: 26px; padding: 14px; border: none; border-radius: 12px; background: var(--primary); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; font-family: inherit; }
.addr-save:disabled { opacity: 0.45; cursor: not-allowed; }
.addr-delete { width: 100%; margin-top: 12px; padding: 12px; border: none; background: none; color: var(--danger); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

/* 結帳：已存地址選擇器（摘要 / 選單 / 輸入 三態） */
.recip-summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); cursor: pointer; }
.recip-summary-body { flex: 1; min-width: 0; }
.recip-change { flex: none; font-size: 13px; color: var(--primary); white-space: nowrap; }
.recip-change i { font-size: 11px; }
.recip-line-top { display: flex; align-items: baseline; gap: 8px; }
.recip-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.recip-phone { font-size: 12px; color: var(--text-secondary); }
.recip-line-sub { margin-top: 3px; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.recip-badge { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--primary); }
.recip-picker { display: flex; flex-direction: column; gap: 8px; max-height: 232px; overflow-y: auto; }
.recip-opt { display: flex; align-items: flex-start; gap: 10px; text-align: left; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); cursor: pointer; font-family: inherit; }
.recip-opt.is-on { border-color: var(--primary); }
.recip-opt-mark { margin-top: 2px; font-size: 16px; color: var(--text-muted); flex: none; }
.recip-opt.is-on .recip-opt-mark { color: var(--primary); }
.recip-opt-body { flex: 1; min-width: 0; }
.recip-new { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px; border: 1px dashed var(--border); border-radius: 12px; background: var(--bg-card); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primary); font-family: inherit; }
/* 必經步驟的選擇鈕：實線主色 tonal——虛線幽靈框是「選填新增」的語言，必填不適用 */
.recip-new.recip-required { border: 1.5px solid rgba(var(--primary-rgb), 0.35); background: var(--primary-light); }
.recip-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; border: none; background: none; padding: 0; cursor: pointer; font-size: 14px; color: var(--primary); font-family: inherit; }
.addr-save-check { display: flex; align-items: center; gap: 8px; margin: 4px 2px 0; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.addr-save-check input { width: 16px; height: 16px; accent-color: var(--primary); }
/* 已存地址時取代儲存勾選的說明行：淡綠底色塊，比純灰字明顯 */
.addr-saved-hint { display: flex; align-items: center; gap: 8px; margin: 10px 0 2px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 184, 148, 0.12); font-size: 13px; font-weight: 500; color: var(--text-primary); }
.addr-saved-hint i { color: var(--success); font-size: 15px; }

/* ===== 地址照片（拍照模式，063）===== */
.addr-mode-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.addr-mode-tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--text-secondary); font-family: inherit; }
.addr-mode-tab.is-on { border-color: var(--primary); color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.addr-photo-zone { display: flex; gap: 10px; }
.addr-photo-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 10px; border: 1.5px dashed var(--border); border-radius: 12px; background: var(--bg-card); cursor: pointer; font-size: 14px; font-weight: 600; color: var(--primary); font-family: inherit; }
.addr-photo-btn i { font-size: 26px; }
.addr-photo-hint { display: flex; align-items: flex-start; gap: 6px; margin: 10px 2px 0; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.addr-photo-hint i { margin-top: 2px; flex: none; }
.addr-photo-preview { position: relative; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-secondary); cursor: zoom-in; }
.addr-photo-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 14px; pointer-events: none; }
/* 全螢幕檢視：黑底置中，點任意處關（含右上 X，給明確出口） */
.addr-photo-viewer { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.9); cursor: zoom-out; }
.addr-photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.addr-photo-viewer-close { position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 14px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; font-size: 18px; cursor: pointer; }
.addr-photo-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, 0.72); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.addr-photo-overlay i { font-size: 26px; color: var(--primary); }
.addr-photo-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; }
.addr-photo-actions { display: flex; gap: 8px; margin-top: 10px; }
/* 蓋掉 btn-sm 的扁高度：比 btn-sm 略高即可（迭代定案 7px） */
.addr-photo-actions .btn { flex: 1; padding: 7px 12px; font-size: 14px; }
/* 訂單詳情：地址照片縮圖（點開原圖） */
.addr-photo-thumb { display: block; max-width: 180px; max-height: 130px; border: 1px solid var(--border); border-radius: 8px; }

/* ===== Landing（平台招商首頁）===== */
.landing { padding-bottom: 0; }

/* Hero：hero.png 當背景，文字疊在左側，左側加紫色遮罩確保可讀 */
.landing-hero {
  position: relative;
  margin: -16px -16px 0;
  min-height: 480px;
  display: flex;
  align-items: center;
  padding: 56px 20px;
  color: var(--on-primary);
  overflow: hidden;
  background-image:
    linear-gradient(90deg,
      rgba(var(--primary-deep-rgb), 0.92) 0%,
      rgba(var(--primary-deep-rgb), 0.60) 38%,
      rgba(var(--primary-deep-rgb), 0.05) 62%,
      rgba(var(--primary-deep-rgb), 0) 80%),
    url('/images/hero.png');
  background-size: cover;
  background-position: center;
}
.landing-hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1140px; margin: 0 auto; }
.landing-hero-copy { max-width: 540px; text-align: left; }
.landing-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 13px; font-weight: 600;
  margin-bottom: 18px;
  backdrop-filter: blur(4px);
}
.landing-hero-title {
  font-size: 34px; font-weight: 800; line-height: 1.25;
  letter-spacing: -0.02em; margin-bottom: 16px;
}
.landing-hero-sub {
  font-size: 16px; line-height: 1.7; opacity: 0.92;
  max-width: 520px; margin: 0 0 28px;
}
.landing-hero-cta { display: flex; gap: 12px; justify-content: flex-start; flex-wrap: wrap; }

.landing-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 28px; border-radius: 999px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  border: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.landing-btn:active { transform: translateY(1px); }
.landing-btn--primary { background: #fff; color: var(--primary); box-shadow: 0 8px 20px rgba(var(--primary-deep-rgb), 0.25); }
.landing-btn--primary:hover { color: var(--primary-hover); box-shadow: 0 10px 26px rgba(var(--primary-deep-rgb), 0.32); }
.landing-btn--ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); }
.landing-btn--ghost:hover { background: rgba(255, 255, 255, 0.24); }
.landing-btn--lg { padding: 16px 40px; font-size: 16px; }

/* Hero 下方數據條（淺色帶）*/
.landing-herostats {
  margin: 0 -16px;
  padding: 24px 20px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.landing-stats {
  display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
  max-width: 1140px; margin: 0 auto;
}
.landing-stat {
  min-width: 110px;
  padding: 12px 20px;
  border-radius: var(--radius-lg);
  background: var(--primary-light);
  display: flex; flex-direction: column; gap: 4px;
}
.landing-stat-num { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--primary); }
.landing-stat-label { font-size: 12px; color: var(--text-secondary); }

/* Section 通用 */
.landing-section { padding: 48px 4px; max-width: 960px; margin: 0 auto; }
.landing-section--soft {
  background: var(--bg-secondary);
  max-width: none;
  margin: 0 -16px;
  padding-left: 20px; padding-right: 20px;
}
.landing-section--soft > * { max-width: 960px; margin-left: auto; margin-right: auto; }
.landing-section-head { text-align: center; margin-bottom: 32px; }
.landing-section-head h2 {
  font-size: 25px; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-primary); margin-bottom: 10px;
}
.landing-section-head p { font-size: 15px; color: var(--text-secondary); }

/* 功能特色格 */
.landing-feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.landing-feature {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.landing-feature-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--primary-light); color: var(--primary);
  font-size: 20px; margin-bottom: 14px;
}
.landing-feature h3 { font-size: 17px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.landing-feature p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); }

/* 金流卡 */
.landing-pay-row { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.landing-pay-card {
  flex: 1 1 180px; max-width: 240px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 20px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.landing-pay-card i { font-size: 30px; color: var(--primary); }
.landing-pay-card span { font-size: 15px; font-weight: 600; color: var(--text-primary); }

/* 多語系 chips */
.landing-lang-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.landing-lang-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  background: var(--primary-light); color: var(--primary);
  font-size: 15px; font-weight: 600;
}
.landing-lang-flag {
  width: 22px; height: 16px; object-fit: cover;
  border-radius: 3px; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* 現有店家格 */
.landing-store-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.landing-store-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 12px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.landing-store-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.landing-store-logo {
  width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-soft), var(--primary-softer));
  color: #fff; font-size: 22px; font-weight: 700;
}
.landing-store-logo img { width: 100%; height: 100%; object-fit: cover; }
.landing-store-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.landing-store-count { font-size: 12px; color: var(--text-muted); }

/* 結尾 CTA：負 margin 吃掉 main-content 底部留白讓紫色直達頁底，
   再用 padding-bottom 把內容抬離懸浮 bottom-nav */
.landing-final {
  text-align: center;
  margin: 8px -16px calc(-1 * (var(--bottom-nav-height) + 12px + env(safe-area-inset-bottom)));
  padding: 56px 20px calc(40px + var(--bottom-nav-height) + env(safe-area-inset-bottom));
  background: linear-gradient(150deg, var(--secondary) 0%, var(--primary) 120%);
  color: #fff;
}
/* dock 樣板的 --bottom-nav-height 已含 safe-area（同 .main-content 註解），不再另加 env */
body.nav-dock .landing-final {
  margin-bottom: calc(-1 * (var(--bottom-nav-height) + 12px));
  padding-bottom: calc(40px + var(--bottom-nav-height));
}
/* 桌機無 bottom-nav：只需吃掉 main-content 的 24px */
@media (min-width: 769px) {
  .landing-final,
  body.nav-dock .landing-final { margin-bottom: -24px; padding-bottom: 56px; }
}
.landing-final h2 { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.landing-final p { font-size: 15px; opacity: 0.9; margin-bottom: 28px; }

/* ── 手機（≤768）── */
@media (max-width: 768px) {
  .landing-hero {
    min-height: 420px;
    padding: 40px 18px;
    /* 窄螢幕：遮罩加重並覆蓋更廣，避免文字壓在圖上不清楚 */
    background-image:
      linear-gradient(90deg,
        rgba(var(--primary-deep-rgb), 0.94) 0%,
        rgba(var(--primary-deep-rgb), 0.78) 55%,
        rgba(var(--primary-deep-rgb), 0.45) 100%),
      url('/images/hero.png');
  }
  .landing-hero-title { font-size: 27px; }
  .landing-hero-sub { font-size: 15px; }
  .landing-section { padding: 40px 4px; }
  .landing-feature-grid { grid-template-columns: 1fr; gap: 12px; }
  .landing-feature { padding: 20px 18px; }
  .landing-store-grid { grid-template-columns: repeat(2, 1fr); }
  .landing-section-head h2 { font-size: 22px; }
}