/* 玩懂自建商店｜沿用現有官網 Master CSS 的配色 token（2026-07-19 精緻電商風拉皮） */
:root {
  --wd-bg: #fcfcfd;
  --wd-surface: #ffffff;
  --wd-surface-2: #f6f7f9;
  --wd-text: #0f172a;
  --wd-muted: rgba(15, 23, 42, .62);
  --wd-line: rgba(15, 23, 42, .10);
  --wd-accent: #0b1220;
  --wd-accent-2: #a67c43;
  --wd-accent-2-dark: #8a6435;   /* 品牌金 hover 深一階 */
  --wd-gold-tint: #faf6f0;       /* 品牌金極淡底（選中/強調底色） */
  --wd-price: #c0392b;           /* 售價紅（全站統一） */
  --wd-radius: 14px;
  --wd-radius-sm: 10px;
  --wd-shadow: 0 2px 10px rgba(15, 23, 42, .05);
  --wd-shadow-hover: 0 14px 34px rgba(15, 23, 42, .12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }  /* hidden 屬性永遠贏過其他 display 規則（修彈窗欄位藏不掉的問題） */

body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
  background: var(--wd-bg);
  color: var(--wd-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 頁首（二層式：上排品牌/搜尋/動作，下排分類選單置中） */
.site-header {
  background: var(--wd-surface);
  border-bottom: 1px solid var(--wd-line);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-main {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 32px;
}
.brand { font-size: 21px; font-weight: 800; letter-spacing: .5px; color: var(--wd-accent); text-decoration: none; }
.brand span { color: var(--wd-accent-2); }
.site-nav {
  display: flex; justify-content: center; align-items: center;
  gap: 0; flex-wrap: wrap;
  max-width: 1280px; margin: 0 auto; padding: 0 16px;
  border-top: 1px solid var(--wd-line);
}
.site-nav a { color: var(--wd-text); opacity: .78; text-decoration: none; font-size: 13.5px; letter-spacing: .2px; padding: 13px 8px; transition: opacity .15s, color .15s; }
.site-nav a:hover { opacity: 1; color: var(--wd-accent); }
/* hover 金色底線從左滑入（精緻感的關鍵小動作） */
.site-nav > a, .site-nav .nav-item > a { position: relative; }
.site-nav > a::after, .site-nav .nav-item > a::after {
  content: ''; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 2px;
  background: var(--wd-accent-2); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .18s ease;
}
.site-nav > a:hover::after, .site-nav .nav-item:hover > a::after, .site-nav .nav-item:focus-within > a::after { transform: scaleX(1); }

/* 子選單下拉（滑鼠移過去展開；手機/鍵盤用點擊聚焦展開） */
.nav-item { position: relative; display: inline-block; }
.nav-caret { font-size: 10px; color: var(--wd-accent-2); display: inline-block; transition: transform .15s; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(180deg); }
.nav-sub { position: absolute; top: 100%; left: -10px; min-width: 180px; background: #fff;
  border: 1px solid var(--wd-line); border-radius: 12px; box-shadow: 0 14px 38px rgba(15,23,42,.14);
  padding: 8px; display: none; z-index: 60;
  /* 分類多達 50+：多欄排列、最高六成螢幕、超過在選單內捲動（不再衝出頁面） */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px 6px;
  width: max-content; max-width: min(720px, 90vw);
  max-height: min(62vh, 520px); overflow-y: auto; overscroll-behavior: contain; }
.nav-sub a { display: block; padding: 8px 12px; font-size: 14px; white-space: nowrap; opacity: 1; border-radius: 8px;
  overflow: hidden; text-overflow: ellipsis; }
.nav-sub-head { grid-column: 1 / -1; margin-top: 8px; padding: 12px 12px 4px; font-size: 12px; font-weight: 700;
  color: var(--wd-accent-2); letter-spacing: 2px;
  border-top: 1px solid var(--wd-line); }  /* 下拉分群標題（動漫/遊戲/卡通）：群組間加分隔線 */
.nav-sub-head:first-child { border-top: none; margin-top: 0; padding-top: 8px; }
.nav-sub a:hover { background: var(--wd-gold-tint); color: var(--wd-accent-2); }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub { display: grid; animation: nav-pop .16s ease; }
@keyframes nav-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nav-sub.flip { left: auto; right: -10px; }  /* 靠右側的選單：展開會超出畫面時由 JS 掛上，改右對齊 */
.site-search { display: flex; flex: 1; max-width: 420px; margin-left: auto; }
.site-search input { flex: 1; min-width: 0; padding: 9px 18px; border: 1px solid var(--wd-line); border-right: none; border-radius: 999px 0 0 999px; font-size: 14px; font-family: inherit; background: var(--wd-surface-2); transition: background .15s, border-color .15s; }
.site-search input:focus { outline: none; border-color: var(--wd-accent-2); background: #fff; }
.site-search button { padding: 9px 20px; border: none; border-radius: 0 999px 999px 0; background: var(--wd-accent); color: #fff; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .15s; }
.site-search button:hover { background: #1c2740; }
.site-actions { display: flex; align-items: center; gap: 20px; }
.nav-toggle { display: none; }  /* 漢堡鈕：桌機隱藏，手機才出現（見頁尾 RWD） */
.cart-link { color: var(--wd-text); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: color .15s; }
.cart-link:hover { color: var(--wd-accent-2); }

/* 購物車頁 */
.cart-table { width: 100%; border-collapse: collapse; background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: var(--wd-radius); overflow: hidden; box-shadow: var(--wd-shadow); }
.cart-table th { text-align: left; padding: 14px 16px; font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--wd-muted); background: var(--wd-surface-2); border-bottom: 1px solid var(--wd-line); }
.cart-table td { padding: 16px; border-bottom: 1px solid var(--wd-line); font-size: 14px; vertical-align: middle; }
.cart-table tbody tr:last-child td { border-bottom: none; }
.cart-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--wd-radius-sm); border: 1px solid var(--wd-line); display: block; background: #fff; }
.cart-thumb.empty { display: block; background: var(--wd-surface-2); }
.cart-name { color: var(--wd-text); text-decoration: none; font-weight: 600; }
.cart-name:hover { color: var(--wd-accent-2); }
.cart-spec { color: var(--wd-muted); }
.cart-qty-form { display: flex; gap: 6px; align-items: center; }
.cart-qty { width: 64px; padding: 6px 8px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.cart-qty-btn { padding: 6px 10px; border: 1px solid var(--wd-line); background: var(--wd-surface); border-radius: 8px; font-size: 12px; cursor: pointer; }
.cart-warn { color: #dc2626; font-size: 12px; margin-top: 4px; }
.cart-subtotal { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cart-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 16px; flex-wrap: wrap; }
.cart-continue { flex: 0 0 auto; max-width: 160px; text-align: center; text-decoration: none; }
.cart-total-box { display: flex; align-items: center; gap: 18px; background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: var(--wd-radius); padding: 14px 18px; box-shadow: var(--wd-shadow); }
.cart-total-label { color: var(--wd-muted); font-size: 14px; }
.cart-total { font-size: 26px; font-weight: 800; color: var(--wd-price); font-variant-numeric: tabular-nums; }
.cart-total-box .cart-checkout { padding: 13px 30px; letter-spacing: 2px; text-indent: 2px; }
.cart-empty-btn { display: inline-block; max-width: 160px; text-decoration: none; padding: 12px 24px; }

/* 結帳頁 */
.checkout-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .checkout-grid { grid-template-columns: 1fr; } }
.checkout-card { background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: var(--wd-radius); box-shadow: var(--wd-shadow); padding: 24px; margin-bottom: 20px; }
.checkout-h2 { font-size: 16px; font-weight: 700; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--wd-line); }
.checkout-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--wd-muted); margin-bottom: 14px; }
.checkout-form input, .checkout-form select { padding: 10px 12px; border: 1px solid var(--wd-line); border-radius: 10px; font-size: 15px; font-family: inherit; color: var(--wd-text); }
.checkout-form input:focus, .checkout-form select:focus { outline: none; border-color: var(--wd-accent-2); }
.pay-options { display: flex; flex-direction: column; gap: 10px; }
/* 選項卡片：圓鈕在左、文字左對齊、說明換行縮排（蓋過 .checkout-form label 的直向排法） */
.checkout-form label.pay-option, label.pay-option {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: var(--wd-text);
  cursor: pointer; padding: 12px 14px; border: 1px solid var(--wd-line); border-radius: var(--wd-radius-sm);
  margin-bottom: 0; transition: border-color .15s, background .15s;
}
.pay-option input[type="radio"] { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: var(--wd-accent-2); }
.pay-option:hover { border-color: rgba(166, 124, 67, .45); }
.pay-option:has(input:checked) { border-color: var(--wd-accent-2); background: var(--wd-gold-tint); }
.pay-note { flex-basis: 100%; padding-left: 27px; font-weight: 400; }

/* 結帳步驟條（購物車 → 填寫資料 → 完成訂單） */
.steps { display: flex; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: -6px 0 24px; padding: 0; }
.step { font-size: 14px; color: var(--wd-muted); padding: 6px 14px; border-radius: 999px; background: var(--wd-surface-2); white-space: nowrap; }
.step.done { color: var(--wd-accent-2); background: var(--wd-gold-tint); }
.step.cur { color: #fff; background: var(--wd-accent); font-weight: 700; }
.step + .step::before { content: none; }
.steps .step:not(:first-child) { position: relative; margin-left: 20px; }
.steps .step:not(:first-child)::after { content: '›'; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); color: var(--wd-muted); font-size: 15px; }

/* 表單欄位併排（姓名＋手機一行兩欄） */
.form-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .form-duo { grid-template-columns: 1fr; gap: 0; } }
.sum-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--wd-line); }
.sum-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: var(--wd-radius-sm); border: 1px solid var(--wd-line); background: #fff; }
.sum-info { flex: 1; min-width: 0; }
.sum-name { font-size: 14px; font-weight: 600; line-height: 1.5; }
.sum-spec { font-size: 12px; color: var(--wd-muted); margin-top: 1px; }
.sum-qty { font-size: 12.5px; color: var(--wd-muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.sum-sub { font-weight: 700; font-size: 14.5px; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.sum-sub .price-was { display: block; font-weight: 400; }
.sum-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 0; font-size: 13.5px; color: var(--wd-muted); border-bottom: 1px dashed rgba(15, 23, 42, .08); font-variant-numeric: tabular-nums; }
.sum-total.grand { border-bottom: none; border-top: 2px solid var(--wd-line); margin-top: 4px; padding-top: 16px; font-size: 14.5px; font-weight: 700; color: var(--wd-text); }
/* 折扣碼：輸入框＋套用鈕連體 */
.code-group { display: inline-flex; white-space: nowrap; }
.code-group input { width: 130px; padding: 8px 12px; border: 1px solid var(--wd-line); border-right: none; border-radius: 8px 0 0 8px; font-size: 14px; font-family: inherit; }
.code-group input:focus { outline: none; border-color: var(--wd-accent-2); }
.code-group button { padding: 8px 16px; border: none; border-radius: 0 8px 8px 0; background: var(--wd-accent); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.code-group button:hover { background: #1c2740; }
.credits-input { width: 96px; padding: 8px 10px; text-align: right; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums; }
.credits-input:focus { outline: none; border-color: var(--wd-accent-2); }
.btn-primary.sum-submit { width: 100%; margin-top: 14px; padding: 15px; font-size: 16px; letter-spacing: 3px; text-indent: 3px;
  background: var(--wd-accent-2); border-color: var(--wd-accent-2); }
.btn-primary.sum-submit:hover { background: var(--wd-accent-2-dark); border-color: var(--wd-accent-2-dark); opacity: 1; }
.sum-back { display: block; text-align: center; margin-top: 14px; color: var(--wd-muted); font-size: 13px; }

/* 訂單完成頁 */
.order-done { max-width: 560px; margin: 0 auto; text-align: center; }
.order-done-icon { font-size: 48px; margin-bottom: 8px; }
.order-number { font-size: 16px; margin-bottom: 6px; }
.order-hint { color: var(--wd-muted); font-size: 14px; line-height: 1.8; margin-bottom: 20px; }
.order-done-card { text-align: left; }
.order-done-btn { display: inline-block; text-decoration: none; padding: 12px 32px; margin-top: 16px; }

/* 後台訂單 */
.order-待付款 { background: #fef3c7; color: #92400e; }
.order-待出貨 { background: #dbeafe; color: #1e40af; }
.order-已安排運送 { background: #cffafe; color: #155e75; }
.order-已出貨 { background: #e0e7ff; color: #3730a3; }
.order-已完成 { background: #dcfce7; color: #166534; }
.order-已取消 { background: #f1f5f9; color: #64748b; }
.order-已退貨 { background: #fce7f3; color: #9d174d; }

/* 側邊欄紅字提醒 */
.nav-badge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.5; }

/* 出貨勾選/物流編號、物流設定列、付款備註 */
.act-form { display: inline-flex; align-items: center; gap: 8px; margin-right: 10px; }
.ship-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.trk-wrap { font-size: 13px; color: var(--wd-muted); white-space: nowrap; }
.trk-input { width: 150px; padding: 6px 9px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 13px; font-family: inherit; }
.cell-input { padding: 8px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; width: 100%; max-width: 200px; }
.cell-input.num { max-width: 110px; }
.cell-input:focus { outline: none; border-color: var(--wd-accent-2); }
.ship-add-grid { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.ship-add-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--wd-muted); }
.ship-add-grid input { padding: 9px 11px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; width: 150px; }
.ship-add-grid button { margin-bottom: 2px; }
.pay-note { display: block; font-size: 12px; color: var(--wd-muted); margin-top: 2px; }
.review-state { border: none; cursor: pointer; font-family: inherit; }

/* 二次確認彈窗 */
.confirm-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(15, 23, 42, .5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.confirm-box { background: var(--wd-surface); border-radius: 14px; box-shadow: var(--wd-shadow-hover); width: min(400px, 92vw); padding: 22px; }
.confirm-title { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.confirm-msg { font-size: 14px; line-height: 1.7; color: var(--wd-muted); margin-bottom: 18px; }
.confirm-btns { display: flex; justify-content: flex-end; gap: 10px; }
.confirm-msg.err { color: #dc2626; font-weight: 600; }
/* 頁尾社群圖示：官方商標原形＋品牌色（simple-icons 路徑），不再用色圈包 */
.social-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 12px; align-items: center; }
.soc { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform .12s, opacity .12s; opacity: .92; }
.soc:hover { transform: translateY(-2px); opacity: 1; }
.soc svg { width: 26px; height: 26px; display: block; }
/* 用 .social-row 拉高優先權：別讓 .footer-col a 的灰色蓋掉品牌色 */
.social-row .soc-line { color: #06C755; }
.social-row .soc-ig { color: #E4405F; }
.social-row .soc-fb { color: #1877F2; }
.social-row .soc-yt { color: #FF0000; }
.footer-line a { color: inherit; }

/* 首頁版面：前台預覽卡（GogoShop 式） */
.hp-card { background: #fff; border: 1px solid var(--wd-line); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.hp-card.hp-off { opacity: .55; }
.hp-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--wd-line); background: var(--wd-surface-2); }
.hp-title { font-weight: 700; font-size: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hp-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.hp-preview { padding: 14px 16px; }
.hp-sec-title { text-align: center; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.hp-banners { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.hp-banners img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--wd-line); }
.hp-prods { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.hp-prod { text-align: center; }
.hp-prod img, .hp-noimg { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; border: 1px solid var(--wd-line); background: var(--wd-surface-2); }
.hp-noimg { display: flex; align-items: center; justify-content: center; color: var(--wd-muted); font-size: 12px; }
.hp-prod-name { font-size: 11px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-prod-price { font-size: 11px; font-weight: 700; }
.hp-more { display: flex; align-items: center; justify-content: center; color: var(--wd-muted); font-size: 12px; border: 1px dashed var(--wd-line); border-radius: 8px; aspect-ratio: 1 / 1; }
.hp-imgtext { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: center; }
.hp-imgtext.flip { grid-template-columns: 1fr 200px; }
.hp-imgtext.flip img { order: 2; }
.hp-imgtext img { width: 100%; border-radius: 8px; border: 1px solid var(--wd-line); }
.hp-html { max-height: 180px; overflow: hidden; }
.hp-empty { color: var(--wd-muted); font-size: 13px; text-align: center; padding: 14px 0; }
.hp-add { display: block; width: 100%; padding: 16px; border: 2px dashed var(--wd-line); border-radius: 12px; background: none; color: var(--wd-muted); font-size: 14px; cursor: pointer; font-family: inherit; }
.hp-add:hover { border-color: var(--wd-accent); color: var(--wd-accent); }
.hp-card.nv-dragging { opacity: .4; }

/* 退款狀態小標 */
.refund-pill { display: inline-block; font-size: 11px; border-radius: 6px; padding: 1px 6px; margin-top: 3px; white-space: nowrap; }
.refund-pill.wait { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; font-weight: 700; }
.refund-pill.done { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; }
.refund-pill.none { color: var(--wd-muted); background: var(--wd-surface-2); border: 1px solid var(--wd-line); }
.refund-pill.check { color: #c2610c; background: #fff7ed; border: 1px solid #fed7aa; font-weight: 700; }

/* 商品頁：分享列＋手機浮動購買列（F3） */
.share-row { display: flex; gap: 10px; margin-top: 12px; }
.share-btn { display: inline-flex; align-items: center; gap: 4px; padding: 7px 14px; border: 1px solid var(--wd-line);
  border-radius: 999px; background: #fff; font-size: 13px; color: var(--wd-muted); cursor: pointer; text-decoration: none; font-family: inherit; }
.share-btn:hover { border-color: var(--wd-accent); color: var(--wd-accent); }
.float-buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none;
  align-items: center; gap: 12px; padding: 10px 14px; background: #fff;
  border-top: 1px solid var(--wd-line); box-shadow: 0 -6px 20px rgba(15,23,42,.10);
  transform: translateY(100%); transition: transform .25s; }
.float-buy.show { transform: translateY(0); }
.float-buy-name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 720px) { .float-buy { display: flex; } }

/* 首頁：圖片區塊＋商品橫向輪播（TING 2026-07-04 對齊官網） */
.home-imgs { display: grid; gap: 14px; }
.home-imgs.cols-1 { grid-template-columns: 1fr; }
.home-imgs.cols-2 { grid-template-columns: repeat(2, 1fr); }
.home-imgs.cols-3 { grid-template-columns: repeat(3, 1fr); }
.home-imgs img { width: 100%; border-radius: var(--wd-radius); display: block; border: 1px solid var(--wd-line); }
@media (max-width: 720px) { .home-imgs.cols-2, .home-imgs.cols-3 { grid-template-columns: 1fr; } }
.prod-slider { position: relative; }
.prod-slider .product-grid { display: flex; overflow-x: auto; gap: 16px; padding-bottom: 10px; scroll-snap-type: x mandatory;
  scrollbar-width: none; }  /* 藏原生捲軸（滑動照常） */
.prod-slider .product-grid::-webkit-scrollbar { display: none; }
.prod-slider .product-card { flex: 0 0 220px; scroll-snap-align: start; }
/* 尾端白色漸層＝「後面還有」的暗示；捲到底自動淡出（home.js 掛 .at-end） */
.prod-slider::after { content: ''; position: absolute; top: 0; bottom: 10px; right: 0; width: 64px;
  background: linear-gradient(90deg, transparent, var(--wd-bg)); pointer-events: none; transition: opacity .2s; }
.prod-slider.at-end::after { opacity: 0; }
.slider-arrow { position: absolute; top: 34%; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--wd-line); background: #fff; box-shadow: var(--wd-shadow-hover);
  color: var(--wd-text); font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.prod-slider:hover .slider-arrow, .slider-arrow:focus-visible { opacity: 1; }
.slider-arrow.prev { left: -14px; }
.slider-arrow.next { right: -14px; }
@media (max-width: 720px) { .slider-arrow { display: none; } }  /* 手機用手指滑，不放箭頭 */

/* 後台圖片區塊管理器 */
.hf-img-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.hf-img-row img { width: 84px; height: 42px; object-fit: cover; border-radius: 6px; border: 1px solid var(--wd-line); flex: 0 0 auto; }
.hf-img-row input { flex: 1; }

/* 首頁版位（F1） */
.home-sec { margin-bottom: 56px; }
.home-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.home-more { color: var(--wd-muted); font-size: 14px; text-decoration: none; white-space: nowrap; }
.home-more:hover { color: var(--wd-accent); }
.imgtext { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.imgtext.flip .imgtext-img { order: 2; }
.imgtext-img img { width: 100%; border-radius: var(--wd-radius); display: block; }
.imgtext-text { color: var(--wd-muted); line-height: 1.9; font-size: 15px; margin-bottom: 16px; }
@media (max-width: 720px) { .imgtext { grid-template-columns: 1fr; } .imgtext.flip .imgtext-img { order: 0; } }

/* 外觀設定：色票列 */
.color-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.color-row input[type="color"] { width: 44px; height: 32px; border: 1px solid var(--wd-line); border-radius: 8px; padding: 2px; cursor: pointer; background: #fff; }

/* 會員黑名單列 */
tr.row-blacklist td { background: rgba(15,23,42,.05); opacity: .75; }

/* 聯絡我們 */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* 商品排程上下架 */
.sched-row { display: flex; gap: 8px; margin-top: 6px; }
.sched-row select { flex: 0 0 auto; }
.sched-row input[type="datetime-local"] { flex: 1; padding: 8px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 13px; font-family: inherit; }
.sched-mini { display: inline-block; font-size: 11px; color: #c2610c; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 6px; padding: 1px 6px; margin-top: 3px; white-space: nowrap; }

/* 應用介接：服務卡片牆 */
.itg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.itg-card { display: block; background: #fff; border: 1px solid var(--wd-line); border-radius: 12px; padding: 16px 18px; text-decoration: none; color: inherit; }
.itg-card:hover { border-color: var(--wd-accent); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.itg-card.itg-locked { opacity: .7; }
.itg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.itg-icon { font-size: 24px; }
.itg-status { font-size: 12px; border-radius: 999px; padding: 3px 10px; }
.itg-status.on { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; font-weight: 700; }
.itg-status.off { color: var(--wd-muted); background: var(--wd-surface-2); border: 1px solid var(--wd-line); }
.itg-status.locked { color: #c2610c; background: #fff7ed; border: 1px solid #fed7aa; }
.itg-name { font-weight: 800; font-size: 15px; margin-bottom: 4px; }
.itg-desc { color: var(--wd-muted); font-size: 13px; line-height: 1.6; }

/* 後台儀表板 */
.dash-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.dash-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #fff;
  border: 1px solid var(--wd-line); border-radius: 12px; text-decoration: none; color: inherit; }
.dash-card .dash-num { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.dash-card .dash-label { font-size: 13px; color: var(--wd-muted); }
.dash-link:hover { border-color: var(--wd-accent); box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.dash-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; align-items: start; }
.dash-panel { background: #fff; border: 1px solid var(--wd-line); border-radius: 12px; padding: 16px 18px; }
.dash-panel-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 15px; margin-bottom: 10px; }
@media (max-width: 1100px) { .dash-cards { grid-template-columns: repeat(2, 1fr); } .dash-grid { grid-template-columns: 1fr; } }

/* 後台選單管理：拖曳排序 */
.nv-grip { cursor: grab; color: var(--wd-muted); user-select: none; text-align: center; }
tr.nv-dragging { opacity: .45; }
tr.nv-child td { background: rgba(15,23,42,.02); }
.nv-pos { display: flex; gap: 14px; margin-top: 8px; }
.nv-pos-item { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.nv-pos-item input { width: 15px; height: 15px; accent-color: var(--wd-accent); }

/* API token 頁 */
.token-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.token-box { background: var(--wd-surface-2); border: 1px solid var(--wd-line); border-radius: 8px; padding: 10px 14px; font-size: 13px; word-break: break-all; }

/* 取消原因彈窗 */
.rs-text { width: 100%; padding: 10px 12px; border: 1px solid var(--wd-line); border-radius: 10px; font-size: 14px; font-family: inherit; resize: vertical; margin-bottom: 16px; }
.rs-text:focus { outline: none; border-color: var(--wd-accent-2); }

.pw-status { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.pw-status.on { background: #dcfce7; color: #166534; }
.pw-status.off { background: #fee2e2; color: #b91c1c; }
.atm-form { display: flex; gap: 10px; }
.atm-form input { flex: 1; padding: 10px 12px; border: 1px solid var(--wd-line); border-radius: 10px; font-size: 16px; letter-spacing: 3px; font-family: inherit; }
.atm-hint { color: var(--wd-muted); font-size: 13px; margin-top: 10px; }
.atm-ok { color: #166534; font-size: 14px; }
.atm-badge { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 9px; background: #fef3c7; color: #92400e; font-size: 12px; font-weight: 700; white-space: nowrap; }
.sd-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sd-row label { width: 70px; font-size: 13px; font-weight: 600; color: var(--wd-muted); }
.sd-row select, .sd-row input { flex: 1; padding: 9px 11px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.confirm-btns .btn { flex: 0 0 auto; padding: 9px 20px; }
.act-btn { border: none; border-radius: 8px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; margin-right: 6px; font-family: inherit; }
.act-primary { background: var(--wd-accent); color: #fff; }
.act-danger { background: #fee2e2; color: #b91c1c; }
.act-outline { background: #fff; border: 1px solid var(--wd-line); color: var(--wd-text); text-decoration: none; display: inline-block; }
.act-ghost { background: var(--wd-surface); color: var(--wd-muted); border: 1px solid var(--wd-line); }
.act-btn:hover { opacity: .85; }
.order-modal-box { width: min(720px, 94vw); }
.om-items { margin-top: 16px; }
.order-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.order-status-form { display: flex; gap: 8px; align-items: center; }
.order-status-form select { padding: 7px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.order-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; font-size: 14px; }
.order-grid .order-wide { grid-column: 1 / -1; }
.order-total-line { text-align: right; margin-top: 14px; font-size: 14px; color: var(--wd-muted); }
.cart-checkout { text-decoration: none; text-align: center; }

/* 會員（登入/註冊/會員中心/追蹤） */
.auth-box { max-width: 400px; margin: 24px auto 0; }
.auth-brand { text-align: center; margin-bottom: 22px; }
.auth-brand img { height: 64px; border-radius: 50%; margin-bottom: 12px; }
.auth-brand h1 { font-size: 22px; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px; }
.auth-brand p { color: var(--wd-muted); font-size: 14px; }
.auth-form { background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: var(--wd-radius); box-shadow: var(--wd-shadow); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--wd-muted); }
.auth-form input { padding: 10px 12px; border: 1px solid var(--wd-line); border-radius: 10px; font-size: 15px; font-family: inherit; }
.auth-form input:focus { outline: none; border-color: var(--wd-accent-2); }
.auth-err { background: #fee2e2; color: #b91c1c; padding: 10px 14px; border-radius: 10px; font-size: 14px; margin-bottom: 14px; }
.auth-alt { text-align: center; margin-top: 16px; font-size: 14px; color: var(--wd-muted); }
.auth-alt a { color: var(--wd-accent-2); }
.btn-wish { flex: 0 0 52px; font-size: 22px; border: 1px solid var(--wd-line); border-radius: 12px; background: var(--wd-surface); cursor: pointer; color: #c0392b; }
.btn-wish.on { background: #fdf0ef; border-color: #c0392b; }
.wish-card { position: relative; }
.wish-link { text-decoration: none; color: inherit; display: block; }
.wish-remove { padding: 0 14px 14px; }
.wish-remove .btn { width: 100%; }

.cat-intro { color: var(--wd-muted); font-size: 14px; line-height: 1.7; margin: -8px 0 24px; }
.grid-empty { color: var(--wd-muted); text-align: center; padding: 48px 0; font-size: 15px; }

/* 回到頂部鈕（base.html；捲超過一屏才出現） */
.back-top { position: fixed; right: 22px; bottom: 26px; z-index: 90; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--wd-line); background: #fff; color: var(--wd-text);
  font-size: 19px; cursor: pointer; box-shadow: var(--wd-shadow-hover); transition: background .15s, color .15s; }
.back-top:hover { background: var(--wd-accent); color: #fff; }
@media (max-width: 720px) { .back-top { right: 14px; bottom: 84px; } }  /* 避開商品頁浮動購買列 */

/* 空狀態（空購物車/零評價…）：大圖示＋一句話，不再一片白 */
.empty-block { text-align: center; padding: 40px 20px 48px; color: var(--wd-muted); }
.empty-block .empty-ico { display: block; font-size: 44px; margin-bottom: 12px; filter: grayscale(25%); }
.empty-block p { font-size: 15px; line-height: 1.8; margin-bottom: 18px; }
.empty-block .btn { display: inline-block; text-decoration: none; padding: 12px 32px; }

/* 會員中心：VIP 卡（等級＋累積消費） */
.vip-card { position: relative; max-width: 460px; padding: 22px 26px; margin-bottom: 20px; border-radius: 18px;
  color: #f5efe4; background: linear-gradient(135deg, #171d2b 0%, #0b1220 55%, #2b2418 100%);
  box-shadow: 0 14px 34px rgba(15,23,42,.28); overflow: hidden; }
.vip-card::after { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px;
  border-radius: 50%; background: radial-gradient(circle, rgba(166,124,67,.35), transparent 70%); }
.vip-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.vip-brand { font-size: 13px; letter-spacing: 2px; opacity: .85; font-weight: 700; }
.vip-chip { width: 34px; height: 24px; border-radius: 5px;
  background: linear-gradient(135deg, #d9b06c, #a67c43); box-shadow: inset 0 0 4px rgba(0,0,0,.35); }
.vip-level { font-size: 24px; font-weight: 800; letter-spacing: 1px; color: #e8c98a; display: flex; align-items: center; gap: 10px; }
.vip-perk { font-size: 12px; font-weight: 700; color: #0b1220; background: #e8c98a; border-radius: 999px; padding: 3px 10px; letter-spacing: 0; }
.vip-name { font-size: 13px; opacity: .75; margin-top: 4px; letter-spacing: 3px; }
.vip-bottom { display: flex; gap: 36px; margin-top: 18px; }
.vip-label { display: block; font-size: 11px; opacity: .6; letter-spacing: 1px; margin-bottom: 2px; }
.vip-spent { font-size: 19px; font-weight: 800; }
.vip-progress { margin-top: 14px; position: relative; z-index: 1; }
.vip-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.vip-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #a67c43, #e8c98a); }
.vip-hint { font-size: 12px; opacity: .75; margin-top: 6px; }

/* 會員中心改版（2026-07-19）：VIP卡＋速覽磚、資料/密碼與兩份明細並排 */
.acct-hero { display: grid; grid-template-columns: minmax(320px, 460px) 1fr; gap: 20px; align-items: stretch; margin-bottom: 20px; }
.acct-hero .vip-card { margin-bottom: 0; max-width: none; }
.acct-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stat-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: var(--wd-radius);
  text-decoration: none; color: inherit; padding: 14px 10px; transition: border-color .15s, box-shadow .15s; }
.stat-tile:hover { border-color: var(--wd-accent-2); box-shadow: var(--wd-shadow-hover); }
.stat-num { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
.stat-label { font-size: 12.5px; color: var(--wd-muted); }
.acct-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.acct-duo-profile { grid-template-columns: 3fr 2fr; }
@media (max-width: 900px) {
  .acct-hero, .acct-duo, .acct-duo-profile { grid-template-columns: 1fr; }
  .acct-stats { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .stat-num { font-size: 17px; }
}
@media (max-width: 560px) { .acct-stats { grid-template-columns: repeat(2, 1fr); } }

/* 會員中心：✎ 編輯模式＋改密碼表單 */
.acct-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.acct-card-head .checkout-h2 { margin-bottom: 0; }
.acct-input { padding: 8px 10px; border: 1px solid var(--wd-accent-2); border-radius: 8px; font-size: 14px; width: 100%; max-width: 220px; margin-top: 2px; }
.acct-form { display: flex; flex-direction: column; gap: 10px; }
.acct-h3 { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.acct-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--wd-muted); }
.acct-form input { padding: 9px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; color: inherit; }
.acct-form input[disabled] { background: rgba(15, 23, 42, .04); color: var(--wd-muted); }
.acct-form .btn { align-self: flex-start; margin-top: 4px; }

/* 商品列表工具列（排序/只看有貨）＋頁碼 */
.list-toolbar { display: flex; align-items: center; gap: 16px; margin: -12px 0 18px; flex-wrap: wrap; }
.list-count { color: var(--wd-muted); font-size: 13px; margin-right: auto; }
.list-instock { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; user-select: none; }
.list-instock input { accent-color: var(--wd-accent); width: 16px; height: 16px; cursor: pointer; }
.list-toolbar select { padding: 7px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; background: #fff; cursor: pointer; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 32px 0 8px; flex-wrap: wrap; }
.pagination a, .pagination .pg-cur { min-width: 38px; padding: 9px 13px; text-align: center; border: 1px solid var(--wd-line); border-radius: var(--wd-radius-sm); font-size: 14px;
  color: var(--wd-text); text-decoration: none; background: var(--wd-surface); font-variant-numeric: tabular-nums; transition: border-color .15s, color .15s; }
.pagination a:hover { border-color: var(--wd-accent-2); color: var(--wd-accent-2); }
.pagination .pg-cur { background: var(--wd-accent); border-color: var(--wd-accent); color: #fff; font-weight: 700; }
.pagination .pg-dots { color: var(--wd-muted); padding: 0 2px; }
.content-block { font-size: 14px; line-height: 1.8; margin-bottom: 16px; }
.content-block p { margin-bottom: 8px; }

/* 前台商品評價 */
.review-avg { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--wd-line); margin-bottom: 6px; }
.review-avg-num { font-size: 20px; font-weight: 800; color: var(--wd-accent); }
.review-avg-count { color: var(--wd-muted); font-size: 13px; }
.review-item { padding: 14px 0; border-bottom: 1px solid var(--wd-line); }
.review-item:last-child { border-bottom: none; }
.review-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.review-name { font-weight: 600; font-size: 14px; }
.review-date { color: var(--wd-muted); font-size: 12px; }
.review-body { font-size: 14px; line-height: 1.7; margin: 0 0 8px; }
.review-photo { width: 88px; height: 88px; object-fit: cover; border-radius: 8px; border: 1px solid var(--wd-line); }

/* 內容區 */
.container { max-width: 1200px; margin: 0 auto; padding: 36px 32px 56px; }
.section-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.3;
  margin-bottom: 22px;
  padding-left: 12px;
  border-left: 3px solid var(--wd-accent-2);
}

/* 商品格網格 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px 20px;
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--wd-surface);
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .2s ease, border-color .2s ease;
  /* 效能：畫面外的卡片先不算圖（商品原圖 4-9MB，一頁幾十張，全算會卡死） */
  content-visibility: auto;
  contain-intrinsic-size: 250px 430px;
}
/* hover 不再位移/縮放：transform 會把 43MP 巨圖推進 GPU 合成層，圖檔瘦身(F12)前先關 */
.product-card:hover { box-shadow: var(--wd-shadow-hover); border-color: rgba(166, 124, 67, .45); }

/* 卡片圖＝整張品牌海報填滿（TING 2026-07-19 拍板 B 案）：
   商品照本身自帶金框＋玩懂 Logo，是設計好的一套——直式 4:5 原比例滿版呈現，
   卡片不再自己加框/底色，消除「框中框」違和感 */
.product-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--wd-surface-2);  /* 沒圖的商品當底色用 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.thumb-text { color: var(--wd-muted); font-size: 15px; text-align: center; padding: 16px; }
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 完售標示（列表：淡白紗＋深色小牌，不再整張蓋灰 / 商品頁標 / 後台小標） */
.soldout-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: grayscale(70%);
}
.soldout-tag {
  background: rgba(15, 23, 42, .82); color: #fff;
  padding: 7px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 700; letter-spacing: 5px; text-indent: 5px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
}
.soldout-pill {
  display: inline-block; background: #1f2430; color: #fff;
  padding: 4px 14px; border-radius: 999px; font-size: 13px; font-weight: 700;
  letter-spacing: 2px; margin-bottom: 10px;
}
.soldout-mini {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 9px;
  background: #1f2430; color: #fff; font-size: 11px; white-space: nowrap;
}
.badge {
  position: absolute;
  z-index: 3;
  top: 12px;
  left: 12px;
  background: var(--wd-accent-2);
  color: #fff;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}

/* 卡片文字：GogoShop 原版式置中四行（工作室/品名/貨號/金價） */
.product-info { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; gap: 4px; padding: 14px 14px 16px; }
.product-studio { font-size: 13px; font-weight: 700; color: var(--wd-text); letter-spacing: .5px; }
.product-title {
  font-size: 14.5px; font-weight: 600; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-price {
  margin-top: 2px;  /* 緊跟品名，不推到卡片底（TING：標題和價格中間不要開洞） */
  color: var(--wd-accent-2); font-weight: 800; font-size: 15.5px;
  font-variant-numeric: tabular-nums; letter-spacing: .3px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}

/* 麵包屑 */
.breadcrumb { font-size: 14px; color: var(--wd-muted); margin-bottom: 20px; }
.breadcrumb a { color: var(--wd-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--wd-accent); }

/* 商品詳情 */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.detail-thumb {
  position: relative; aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--wd-line); border-radius: var(--wd-radius);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.detail-title { font-size: 25px; font-weight: 700; margin-bottom: 14px; line-height: 1.35; }
.detail-title .studio { display: block; color: var(--wd-muted); font-weight: 500; font-size: 14px; letter-spacing: 1px; margin-bottom: 6px; }
.detail-price { font-size: 26px; font-weight: 800; color: var(--wd-accent); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.detail-summary { color: var(--wd-muted); font-size: 14px; line-height: 1.8; margin-bottom: 20px; }

.spec-box { border-top: 1px solid var(--wd-line); padding-top: 18px; margin-bottom: 20px; }
.spec-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.spec-label { width: 72px; color: var(--wd-muted); font-size: 14px; }
.spec-chip {
  border: 1px solid var(--wd-line); border-radius: 999px;
  padding: 6px 16px; font-size: 14px; cursor: pointer; background: var(--wd-surface);
}
.spec-chip.active { border-color: var(--wd-accent); background: var(--wd-accent); color: #fff; }
.qty { padding: 6px 12px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; }

.buy-buttons { display: flex; gap: 12px; margin-bottom: 16px; }
.btn { flex: 1; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid var(--wd-accent); font-family: inherit; transition: background .15s, opacity .15s, border-color .15s; }
.btn-outline { background: var(--wd-surface); color: var(--wd-accent); }
.btn-primary { background: var(--wd-accent); color: #fff; }
/* 商品頁購買鈕：加入購物車＝品牌金主行動（含手機浮動列） */
.buy-buttons .btn-primary, .float-buy .btn-primary {
  background: var(--wd-accent-2); border-color: var(--wd-accent-2); letter-spacing: 2px; text-indent: 2px;
}
.buy-buttons .btn-primary:hover, .float-buy .btn-primary:hover { background: var(--wd-accent-2-dark); border-color: var(--wd-accent-2-dark); opacity: 1; }
.buy-buttons .btn { padding: 15px 14px; font-size: 16px; }
.buy-buttons .btn-outline { letter-spacing: 2px; text-indent: 2px; }
.buy-buttons .btn-outline:hover { border-color: var(--wd-accent-2); color: var(--wd-accent-2); opacity: 1; }
.btn-danger { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }  /* 不可復原的刪除＝紅（A10 語意一致） */
.refund-field { display: inline-flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--wd-muted); }  /* 退款欄：label 在上、不再只靠浮水印（A6） */
.btn:hover { opacity: .9; }
.detail-note { color: var(--wd-muted); font-size: 13px; }

/* 前台商品頁：圖庫 + 規格選擇 */
.detail-main {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;  /* 跟卡片同步：海報原比例 4:5 */
  background: #fff;
  border: 1px solid var(--wd-line); border-radius: var(--wd-radius);
  display: flex; align-items: center; justify-content: center;
}
.detail-main img { width: 100%; height: 100%; object-fit: contain; }
/* 商品頁主圖左右換圖箭頭（TING 2026-07-19） */
.gal-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--wd-line);
  background: rgba(255, 255, 255, .88); color: var(--wd-text); font-size: 22px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, background .15s; }
.detail-main:hover .gal-arrow, .gal-arrow:focus-visible { opacity: 1; }
.gal-arrow:hover { background: #fff; border-color: var(--wd-accent-2); color: var(--wd-accent-2); }
.gal-arrow.prev { left: 10px; }
.gal-arrow.next { right: 10px; }
@media (max-width: 720px) { .gal-arrow { opacity: .85; width: 36px; height: 36px; } }  /* 手機常駐（也可直接滑動換圖） */

.detail-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.thumb { width: 70px; height: 70px; padding: 0; border: 1px solid var(--wd-line); border-radius: var(--wd-radius-sm); overflow: hidden; cursor: pointer; background: #fff; opacity: .75; transition: opacity .15s, border-color .15s; }
.thumb:hover { opacity: 1; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.active { border-color: var(--wd-accent-2); outline: 2px solid var(--wd-accent-2); outline-offset: -2px; opacity: 1; }
.spec-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.price-was { color: var(--wd-muted); text-decoration: line-through; font-size: 16px; font-weight: 500; margin-right: 10px; }
.price-now { color: #c0392b; }
.stock-note { color: var(--wd-muted); font-size: 13px; margin-left: 8px; }
.stock-note.out { color: #dc2626; }
.stock-note.hint { color: var(--wd-accent-2); font-weight: 600; }

/* 規格未選就按購買 → 該列紅框＋搖晃 1.6 秒（product.js 掛 .spec-missing） */
.spec-row.spec-missing { animation: wd-shake .4s; }
.spec-row.spec-missing .spec-chip { border-color: #dc2626; }
.spec-row.spec-missing .spec-label { color: #dc2626; font-weight: 700; }
@keyframes wd-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.btn.disabled, .btn:disabled { opacity: .5; cursor: not-allowed; }

/* 詳情下方分頁籤（商品介紹｜購買須知｜自訂頁籤｜評價） */
.detail-tabs { margin-top: 44px; border-top: 1px solid var(--wd-line); padding-top: 8px; }
.ptab-bar { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--wd-line); margin-bottom: 24px; }
.ptab { background: none; border: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
  padding: 13px 20px; font-family: inherit; font-size: 15px; font-weight: 700;
  color: var(--wd-muted); cursor: pointer; transition: color .15s; white-space: nowrap; }
.ptab:hover { color: var(--wd-accent); }
.ptab.active { color: var(--wd-accent); border-bottom-color: var(--wd-accent-2); }
.tab-head { display: inline-block; font-weight: 700; padding: 8px 0; border-bottom: 3px solid var(--wd-accent-2); margin-bottom: 16px; }  /* admin_form.html 頁籤預覽還在用 */
.tab-body { color: var(--wd-text); font-size: 15px; line-height: 1.9; }
.tab-body p { margin-bottom: 16px; }
@media (max-width: 720px) { .ptab { padding: 11px 12px; font-size: 14px; } }

@media (max-width: 720px) {
  .product-detail { grid-template-columns: 1fr; }
}

/* ===== 後台（商品管理） ===== */
.nav-admin { color: var(--wd-accent-2); font-weight: 700; }

.admin-card {
  background: var(--wd-surface);
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  box-shadow: var(--wd-shadow);
  padding: 24px;
  margin-bottom: 32px;
}
.admin-h2 { font-size: 18px; font-weight: 700; margin: 8px 0 18px; }

/* 新增/編輯表單：一行兩個欄位、標籤在上、輸入框整齊 */
.admin-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}
.admin-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wd-muted);
}
.admin-form input,
.admin-form select,
.admin-form textarea {
  padding: 10px 12px;
  border: 1px solid var(--wd-line);
  border-radius: 10px;
  font-size: 15px;
  color: var(--wd-text);
  background: var(--wd-surface);
  font-family: inherit;
}
.admin-form textarea { resize: none; line-height: 1.6; max-width: 100%; }  /* 框固定：不能拖拉變形（TING 2026-07-04） */

/* 開關欄位標準版型：標題在上、IOS 開關在下靠左（全案統一） */
.sw-field { display: flex; flex-direction: column; font-size: 13px; color: var(--wd-muted); font-weight: 600; }
.sw-field .field-title { margin-bottom: 8px; }
.sw-field .switch { align-self: flex-start; }
.sw-field .sw-group { display: flex; gap: 22px; }
.admin-form .seo-desc { min-height: 96px; }
.summary-box { width: 100%; padding: 12px 14px; border: 1px solid var(--wd-line); border-radius: 10px; font-size: 15px; line-height: 1.7; color: var(--wd-text); background: var(--wd-surface); font-family: inherit; resize: vertical; }
.summary-box:focus { outline: none; border-color: var(--wd-accent-2); }
.admin-form input:focus,
.admin-form select:focus,
.admin-form textarea:focus {
  outline: none;
  border-color: var(--wd-accent-2);
}
.admin-form .wide { grid-column: 1 / -1; }
.admin-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  margin-top: 6px;
}
.admin-actions .btn { flex: 0 0 auto; padding: 12px 28px; }

/* 商品列表表格 */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wd-surface);
  border: 1px solid var(--wd-line);
  border-radius: var(--wd-radius);
  overflow: hidden;
}
.admin-table th,
.admin-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--wd-line);
  font-size: 14px;
}
.admin-table thead th {
  background: var(--wd-surface-2);
  color: var(--wd-muted);
  font-weight: 700;
}
.admin-table tbody tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--wd-surface-2); }
.admin-table a { color: var(--wd-accent-2); text-decoration: none; font-weight: 600; }
.admin-table a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .admin-form { grid-template-columns: 1fr; }
}

/* ===== 後台版面（GogoShop 式：左側選單 + 主內容） ===== */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 228px; flex: 0 0 228px; min-width: 228px;  /* min-width 保險：任何情況都不准被擠成細條 */
  background: linear-gradient(180deg, #101826 0%, #0b1220 100%); color: #cbd5e1;
  display: flex; flex-direction: column;
}
.admin-logo {
  display: block; padding: 20px; font-size: 19px; font-weight: 800;
  color: #fff; text-decoration: none; letter-spacing: .5px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.admin-logo span { color: var(--wd-accent-2); }
.admin-menu { padding: 10px 0 16px; flex: 1; overflow-y: auto; scrollbar-width: thin; }
.nav-group { border-left: 3px solid transparent; }
.nav-group.open { border-left-color: rgba(166, 124, 67, .55); background: rgba(255, 255, 255, .02); }
.nav-group-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: none; border: none; color: #b6c2d4; font-size: 13.5px; font-weight: 600; letter-spacing: .5px; cursor: pointer; font-family: inherit; text-align: left; transition: background .12s, color .12s; }
.nav-group-head:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-ico { width: 18px; text-align: center; opacity: .9; }
.nav-gname { flex: 1; }
.nav-caret { font-size: 10px; color: #64748b; transition: transform .15s; }
.nav-group.open > .nav-group-head { color: #fff; }
.nav-group.open > .nav-group-head .nav-caret { transform: rotate(180deg); }
.nav-items { display: none; background: rgba(0, 0, 0, .22); padding: 4px 0 8px; }
.nav-group.open > .nav-items { display: block; }
.nav-items a { display: block; padding: 8px 16px 8px 44px; font-size: 13.5px; color: #93a3b8; text-decoration: none; border-radius: 0 8px 8px 0; margin-right: 8px; transition: color .12s, background .12s; }
.nav-items a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.nav-items a.active { color: #ffd9a0; font-weight: 700; background: rgba(166, 124, 67, .2); }
.admin-layout.sidebar-collapsed .admin-sidebar { display: none; }

.admin-content { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--wd-surface-2); }
.admin-topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 24px; background: var(--wd-surface);
  border-bottom: 1px solid var(--wd-line); font-size: 14px; color: var(--wd-muted);
}
.topbar-burger { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--wd-muted); padding: 2px 6px; }
.topbar-burger:hover { color: var(--wd-accent); }
.admin-account { margin-left: auto; }
.admin-account a { color: var(--wd-accent-2); text-decoration: none; font-weight: 600; }

/* 通用復刻頁 */
.section-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.section-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; padding: 12px 16px; border-radius: 10px; margin-bottom: 18px; font-size: 14px; line-height: 1.7; }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.admin-main { padding: 28px; flex: 1; }
.admin-main-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.admin-page-title { font-size: 22px; font-weight: 700; }
.admin-hint { color: var(--wd-muted); font-size: 13px; line-height: 1.7; margin-bottom: 14px; }

.btn-sm { flex: 0 0 auto; padding: 9px 18px; font-size: 14px; }

/* 狀態彩色標籤 */
.state-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.state-上架 { background: #dcfce7; color: #166534; }
.state-待上架 { background: #fef3c7; color: #92400e; }
.state-下架 { background: #e5e7eb; color: #6b7280; }

/* 規格設定列 */
.spec-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.spec-summary { color: var(--wd-muted); font-size: 14px; }

/* 規格彈窗 */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); display: flex; align-items: flex-start; justify-content: center; padding-top: 6vh; z-index: 100; }
.modal-overlay[hidden] { display: none; }
.modal-box { background: var(--wd-surface); width: min(780px, 92vw); max-height: 86vh; border-radius: 14px; box-shadow: var(--wd-shadow-hover); display: flex; flex-direction: column; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--wd-line); }
.modal-head h3 { font-size: 18px; font-weight: 700; }
.modal-x { background: none; border: none; font-size: 24px; line-height: 1; cursor: pointer; color: var(--wd-muted); }
.modal-body { padding: 20px 22px; overflow: auto; }
.modal-foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-top: 1px solid var(--wd-line); }
.combo-count { color: var(--wd-muted); font-size: 14px; }

.tier-radios { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; font-size: 14px; }
.tier-radios label { display: flex; align-items: center; gap: 5px; cursor: pointer; }

.tier-row { display: grid; grid-template-columns: 24px 150px 1fr auto; gap: 10px; align-items: start; margin-bottom: 12px; }
.tier-num { padding-top: 9px; color: var(--wd-muted); font-weight: 700; }
.tier-def { display: flex; flex-direction: column; gap: 6px; }
.tier-def select, .tier-def input { padding: 8px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; }
.chip-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--wd-line); border-radius: 8px; padding: 6px 8px; min-height: 40px; background: var(--wd-surface); }
.chip { background: #3b5bdb; color: #fff; border-radius: 4px; padding: 3px 8px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.chip button { background: none; border: none; color: #fff; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.chip-entry { border: none; outline: none; flex: 1; min-width: 110px; font-size: 14px; padding: 4px; font-family: inherit; }
.tier-arrows { display: flex; flex-direction: column; gap: 4px; }
.tier-arrows button { border: 1px solid var(--wd-line); background: var(--wd-surface); border-radius: 6px; cursor: pointer; width: 30px; height: 22px; font-size: 11px; line-height: 1; }

/* SKU 表（GogoShop 樣式：圖 + 每規格一欄 + 定價/售價/貨號/庫存）*/
.sku-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.sku-table th, .sku-table td { border: 1px solid var(--wd-line); padding: 8px 10px; font-size: 14px; text-align: left; vertical-align: middle; }
.sku-table thead th { background: var(--wd-surface-2); font-weight: 700; color: var(--wd-muted); }
.sku-table .col-img { width: 60px; text-align: center; }
.sku-img { display: inline-block; width: 44px; height: 44px; border-radius: 6px; border: 1px solid var(--wd-line); background: linear-gradient(135deg, var(--wd-surface-2), #eef1f5); }
.sku-variant span { display: inline-block; width: 100%; padding: 7px 9px; border: 1px solid var(--wd-line); border-radius: 6px; background: var(--wd-surface-2); color: var(--wd-muted); font-size: 14px; white-space: nowrap; }
.sku-table input { width: 100%; padding: 7px 9px; border: 1px solid var(--wd-line); border-radius: 6px; font-size: 14px; font-family: inherit; }
.price-preview { margin-top: 14px; font-weight: 700; color: var(--wd-accent); font-size: 15px; }

/* 列表頁：篩選 / 批次 / 每列操作 */
.admin-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.admin-filter select, .admin-filter input { padding: 8px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--wd-surface); }
.admin-filter input { min-width: 200px; }
.clear-filter { color: var(--wd-muted); font-size: 13px; text-decoration: none; }
.clear-filter:hover { color: var(--wd-accent); }

.batch-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.batch-bar select { padding: 8px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--wd-surface); }
.check-all-lbl { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--wd-muted); }
.admin-table .col-check { width: 34px; text-align: center; }

.row-actions { white-space: nowrap; }
.row-actions a, .row-actions .linkbtn { margin-right: 4px; }
.linkbtn { background: none; border: none; padding: 0; cursor: pointer; color: var(--wd-accent-2); font-weight: 600; font-size: 14px; font-family: inherit; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: #dc2626; }
.list-empty { padding: 28px; text-align: center; color: var(--wd-muted); }

/* 列表：縮圖 / 名稱藍字 / 分類 / icon 功能 */
.col-thumb { width: 64px; }
.list-thumb { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; border: 1px solid var(--wd-line); background: var(--wd-surface-2); display: inline-block; }
.list-thumb.empty { background: linear-gradient(135deg, var(--wd-surface-2), #eef1f5); }
.col-name .p-serial { color: var(--wd-muted); font-size: 12px; margin-right: 6px; }
.col-name .p-name { color: #2563eb; font-weight: 600; text-decoration: none; }
.col-name .p-name:hover { text-decoration: underline; }
.col-name .p-tag { display: inline-block; margin-left: 6px; font-size: 11px; color: var(--wd-muted); border: 1px solid var(--wd-line); border-radius: 4px; padding: 1px 6px; }
.col-cats { font-size: 13px; color: var(--wd-text); max-width: 220px; }
.col-cats .muted, td.muted, .col-name .muted { color: var(--wd-muted); }
.unpriced { color: #dc2626; font-size: 13px; }
.col-price { white-space: nowrap; }
.review-state { padding: 2px 9px; border-radius: 11px; font-size: 12px; white-space: nowrap; }
.review-state.on { background: #dcfce7; color: #166534; }
.review-state.off { background: #f1f5f9; color: #64748b; }
.stars { color: #f59e0b; white-space: nowrap; letter-spacing: 1px; }
.stars .star-off { color: #d1d5db; }
.review-text { max-width: 320px; white-space: normal; }
.price-orig s { color: var(--wd-muted); font-size: 12px; }
.price-sale { color: #c0392b; font-weight: 700; font-size: 15px; }
.iconbtn { display: inline-block; background: none; border: 1px solid var(--wd-line); border-radius: 6px; padding: 4px 8px; margin: 0 2px; cursor: pointer; color: var(--wd-muted); font-size: 14px; text-decoration: none; font-family: inherit; }
.iconbtn:hover { background: var(--wd-surface-2); color: var(--wd-accent); }
.iconbtn.danger:hover { color: #dc2626; border-color: #dc2626; }

/* GogoShop 式商品列表工具列 */
.gg-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tb-left select, .tb-right select, .tb-right input { padding: 8px 10px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--wd-surface); }
.tb-right input[type="date"] { width: 140px; }
.tb-icon { width: 36px; height: 36px; border: 1px solid var(--wd-line); border-radius: 8px; background: var(--wd-surface); cursor: pointer; color: var(--wd-muted); }
.tb-colon { color: var(--wd-muted); }
.btn-gg-apply { padding: 8px 14px; border: 1px solid var(--wd-line); border-radius: 8px; background: var(--wd-surface); cursor: pointer; font-size: 14px; font-family: inherit; }
.btn-gg-apply:hover { background: var(--wd-surface-2); }
.btn-gg-add { background: #f59e0b; color: #fff; padding: 9px 16px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: 14px; }
.btn-gg-add:hover { background: #d97706; }
.btn-gg-search { background: #2563eb; color: #fff; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 14px; font-family: inherit; }
.btn-gg-search:hover { background: #1d4ed8; }

/* 商品名稱欄（GogoShop 排版：編號 / 名稱藍字 [預覽] / 限用物流標）*/
.col-name .p-serial { color: var(--wd-muted); font-size: 12px; margin-bottom: 2px; }
.col-name .p-name { color: #2563eb; font-weight: 600; text-decoration: none; }
.col-name .p-name:hover { text-decoration: underline; }
.col-name .p-preview { color: var(--wd-muted); font-size: 12px; text-decoration: none; margin-left: 2px; }
.col-name .p-tag { display: inline-block; margin-top: 4px; font-size: 11px; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 1px 6px; }

/* 商品表單分頁 */
.form-tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--wd-line); margin-bottom: 20px; flex-wrap: wrap; }
.form-tab { background: none; border: none; border-bottom: 3px solid transparent; padding: 12px 20px; font-size: 15px; font-weight: 600; color: var(--wd-muted); cursor: pointer; font-family: inherit; margin-bottom: -2px; }
.form-tab.active { color: var(--wd-accent); border-bottom-color: var(--wd-accent-2); }
.form-tab:hover { color: var(--wd-accent); }
.admin-sub { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }

/* 主圖 */
.img-field { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.img-preview { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; border: 1px solid var(--wd-line); background: var(--wd-surface-2); display: flex; align-items: center; justify-content: center; color: var(--wd-muted); font-size: 13px; }
.img-inputs { display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 240px; }
.img-inputs input[type="text"] { padding: 9px 11px; border: 1px solid var(--wd-line); border-radius: 8px; font-size: 14px; font-family: inherit; }

/* 分類 / 物流 多選 */
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.check-item { display: flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.admin-form .field-title { font-size: 13px; font-weight: 600; color: var(--wd-muted); margin-bottom: 8px; }

/* 分類：可搜尋多選下拉（Select2 式）*/
/* 通用「下拉＋模糊搜尋」多選元件（分類、限用物流…共用） */
.ms-select { position: relative; }
.ms-control { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--wd-line); border-radius: 10px; padding: 7px 10px; min-height: 44px; background: var(--wd-surface); cursor: text; }
.ms-control:focus-within { border-color: var(--wd-accent-2); }
.ms-chip { background: #e0e7ff; color: #3730a3; border-radius: 4px; padding: 3px 8px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.ms-chip button { background: none; border: none; color: #3730a3; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.ms-search { border: none; outline: none; flex: 1; min-width: 120px; font-size: 15px; padding: 4px; font-family: inherit; background: transparent; }
.ms-dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: 10px; margin-top: 4px; max-height: 240px; overflow-y: auto; box-shadow: var(--wd-shadow); }
.ms-opt { padding: 9px 12px; font-size: 14px; cursor: pointer; }
.ms-opt:hover { background: var(--wd-surface-2); }
.ms-empty { padding: 9px 12px; color: var(--wd-muted); font-size: 14px; }

/* 商品圖庫（多圖、第一張為主圖） */
.gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.gimg { position: relative; width: 96px; height: 96px; border: 1px solid var(--wd-line); border-radius: 8px; overflow: hidden; background: var(--wd-surface-2); cursor: grab; }
.gimg img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.gimg:first-child { outline: 2px solid var(--wd-accent-2); outline-offset: -2px; }
.gimg:first-child::after { content: '主圖'; position: absolute; bottom: 0; left: 0; right: 0; background: var(--wd-accent-2); color: #fff; font-size: 11px; text-align: center; padding: 2px; }
.gimg.dragging { opacity: .4; cursor: grabbing; }
.gimg-del { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: none; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; z-index: 2; }
.gimg-badge { position: absolute; top: 2px; left: 2px; background: #2563eb; color: #fff; font-size: 10px; padding: 1px 4px; border-radius: 3px; }
.gallery-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gallery-add label { cursor: pointer; }
.gallery-hint { color: var(--wd-muted); font-size: 12px; }

/* 圖片預覽燈箱 */
.img-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, .7); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; }
.img-lightbox[hidden] { display: none; }
.ilb-box { background: var(--wd-surface); border-radius: 14px; box-shadow: var(--wd-shadow-hover); width: min(860px, 94vw); max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.ilb-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--wd-line); }
.ilb-tabs { display: flex; gap: 6px; flex: 1; }
.ilb-tab { border: 1px solid var(--wd-line); background: var(--wd-surface); border-radius: 999px; padding: 5px 14px; font-size: 13px; cursor: pointer; }
.ilb-tab.active { background: var(--wd-accent); color: #fff; border-color: var(--wd-accent); }
.ilb-zoom { display: flex; align-items: center; gap: 8px; }
.ilb-zoom button { width: 28px; height: 28px; border: 1px solid var(--wd-line); background: var(--wd-surface); border-radius: 6px; cursor: pointer; font-size: 15px; line-height: 1; }
.ilb-zoom span { font-size: 13px; color: var(--wd-muted); min-width: 44px; text-align: center; }
.ilb-body { overflow: auto; display: flex; align-items: center; justify-content: center; background: repeating-conic-gradient(#f3f4f6 0% 25%, #fff 0% 50%) 0 0 / 24px 24px; min-height: 320px; padding: 20px; }
.ilb-stage { display: flex; align-items: center; justify-content: center; }
.ilb-stage img { max-width: 70vw; max-height: 62vh; transition: transform .12s; transform-origin: center; display: block; }
.ilb-stage.crop { width: 340px; height: 340px; overflow: hidden; border: 2px dashed var(--wd-accent-2); border-radius: 8px; background: #fff; }
.ilb-stage.crop img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; transform: none !important; }

/* 欄位說明泡泡（? 圖示，滑鼠移過去顯示） */
.help-tip { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 5px; border-radius: 50%; background: var(--wd-muted); color: #fff; font-size: 11px; font-weight: 700; cursor: help; vertical-align: middle; }
/* 提示內容由 admin.js 動態放到 body 最上層（position:fixed），不會被表格/彈窗切掉 */
.tip-pop { position: fixed; z-index: 500; max-width: 300px; background: #1f2430; color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 12px; line-height: 1.55; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; }

/* 緊湊表單（彈窗用，避免出現捲軸）；label 文字與 ? 同一行 */
.admin-form.compact { gap: 10px 16px; }
.admin-form.compact label { margin-bottom: 0; }
.admin-form.compact input, .admin-form.compact select { padding: 8px 10px; }
.admin-form label > span:first-child { display: inline-flex; align-items: center; gap: 4px; }

/* Logo 預覽右上角 × 移除鈕 */
.img-wrap { position: relative; display: inline-block; }
.img-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: none; background: #dc2626; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; line-height: 1; box-shadow: 0 2px 6px rgba(0,0,0,.25); }

/* SKU 圖（可點，從圖庫指定） */
.sku-img { cursor: pointer; padding: 0; background-size: cover; background-position: center; }
.sku-img:hover { border-color: var(--wd-accent-2); }
.sku-img-picker { position: absolute; z-index: 120; background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: 8px; box-shadow: var(--wd-shadow-hover); padding: 8px; display: flex; flex-wrap: wrap; gap: 6px; max-width: 280px; }
.sip-opt { width: 52px; height: 52px; border: 1px solid var(--wd-line); border-radius: 6px; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--wd-muted); text-align: center; }
.sip-opt img { width: 100%; height: 100%; object-fit: cover; }
.sip-opt:hover { border-color: var(--wd-accent-2); }
.sip-empty { font-size: 12px; color: var(--wd-muted); padding: 6px; }

/* 不追蹤庫存 → 隱藏庫存量欄 */
.hide-stock .sku-table th:last-child, .hide-stock .sku-table td:last-child { display: none; }

/* 富文本編輯器 */
.rte { border: 1px solid var(--wd-line); border-radius: 10px; overflow: hidden; }
.rte-toolbar { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px; background: var(--wd-surface-2); border-bottom: 1px solid var(--wd-line); }
.rte-toolbar button { background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; font-family: inherit; }
.rte-toolbar button:hover { border-color: var(--wd-accent-2); }
.rte-body { min-height: 240px; padding: 14px 16px; font-size: 15px; line-height: 1.8; outline: none; }
.rte-body:focus { background: #fffef9; }

@media (max-width: 720px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar { width: 100%; flex: none; }
}

/* 頁尾（三欄資訊區：品牌+社群 / 購物服務 / 購物政策） */
.site-footer {
  background: var(--wd-surface);
  color: var(--wd-muted);
  font-size: 13px;
  border-top: 1px solid var(--wd-line);
  margin-top: 64px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 44px 32px 36px;
}
.footer-brand { font-size: 19px; font-weight: 800; letter-spacing: .5px; color: var(--wd-accent); margin-bottom: 12px; }
.footer-brand span { color: var(--wd-accent-2); }
.footer-contact { font-size: 13px; line-height: 2; }
.footer-brand-col .social-row { justify-content: flex-start; margin-top: 16px; margin-bottom: 0; }
.footer-brand-col .soc { width: 36px; height: 36px; }
.footer-brand-col .soc svg { width: 18px; height: 18px; }
.footer-h { font-size: 14px; font-weight: 700; color: var(--wd-text); margin-bottom: 14px; letter-spacing: 1px; }
.footer-col a { display: block; color: var(--wd-muted); text-decoration: none; font-size: 13.5px; padding: 4px 0; transition: color .15s; }
.footer-col a:hover { color: var(--wd-accent-2); }
.footer-line { text-align: center; padding: 16px 24px; border-top: 1px solid var(--wd-line); font-size: 12.5px; }
@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 32px 24px 28px; }
}

/* 會員等級折數小牌（購物車/結帳的劃線價旁） */
.lv-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: #faf6f0; border: 1px solid var(--wd-accent-2); color: var(--wd-accent-2); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* 相關商品推薦 */
.related-block { margin-top: 44px; }

/* 保修商品導購橫幅（商品頁，點了開 LINE 客服） */
.cs-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 11px 16px;
  background: #f2faf3; border: 1px solid #bfe3c5; border-radius: var(--wd-radius-sm);
  text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.cs-banner:hover { border-color: #06C755; box-shadow: 0 4px 12px rgba(6, 199, 85, .18); }
.cs-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #fff;
  border: 1px solid #bfe3c5; display: flex; align-items: center; justify-content: center; font-size: 17px; }
.cs-sub { display: block; font-size: 12.5px; color: #4b7d55; }
.cs-main { display: block; font-size: 15px; font-weight: 800; color: #1d7a3d; }

/* 完售引導（商店設定選填；空＝不顯示） */
.soldout-guide { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; padding: 12px 14px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 10px; font-size: 14px; color: #9a3412; }

/* 通用提示元件（banner/note/flag/subtitle，後台各頁共用） */
.ui-banner { padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.ui-banner.warn { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ui-banner.ok { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ui-note { font-size: 13px; color: var(--wd-muted); margin-bottom: 14px; }
.ui-note.stale { color: #b45309; font-weight: 600; }
.mono { font-family: Consolas, monospace; font-size: 13px; }
.ui-flag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.ui-flag.ok { background: #f0fdf4; color: #15803d; }
.ui-flag.diff { background: #fff7ed; color: #c2410c; }
.ui-flag.warn { background: #fef2f2; color: #b91c1c; }
.ui-subtitle { font-size: 16px; font-weight: 700; margin-bottom: 12px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { height: 40px; display: block; border-radius: 50%; }
.input-locked { background: var(--wd-surface-2) !important; color: var(--wd-muted); cursor: not-allowed; }

/* 品牌官網：公告條 / 首頁輪播 / FAQ / 據點 / 內文 / 18禁 */
.news-bar { background: var(--wd-accent); color: #fff; text-align: center; padding: 8px 16px; font-size: 14px; }
.news-bar a { color: #fff; text-decoration: underline; }
.hero { margin-bottom: 40px; border-radius: var(--wd-radius); overflow: hidden; box-shadow: var(--wd-shadow); border: 1px solid var(--wd-line); }
.hero-slide img { width: 100%; display: block; }
.faq-list { max-width: 760px; }
.faq-item { background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: 10px; margin-bottom: 10px; padding: 4px 0; }
.faq-item summary { padding: 12px 16px; font-weight: 700; cursor: pointer; }
.faq-a { padding: 0 16px 14px; color: var(--wd-muted); line-height: 1.8; }
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.doc-body { background: var(--wd-surface); border: 1px solid var(--wd-line); border-radius: var(--wd-radius); box-shadow: var(--wd-shadow); padding: 26px 28px; line-height: 1.9; }
.doc-body img { max-width: 100%; }
.adult-gate { position: fixed; inset: 0; z-index: 999; background: rgba(11, 18, 32, .96); display: flex; align-items: center; justify-content: center; padding: 20px; }
.adult-box { background: var(--wd-surface); border-radius: 14px; padding: 34px 30px; max-width: 420px; text-align: center; }
.adult-box h2 { margin-bottom: 10px; }
.adult-box p { color: var(--wd-muted); line-height: 1.8; margin-bottom: 20px; }
.adult-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 左右滑動開關（switch）：取代打勾框的啟用開關 */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track { width: 44px; height: 24px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; flex: 0 0 auto; }
.sw-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: left .15s; }
.switch input:checked + .sw-track { background: #16a34a; }
.switch input:checked + .sw-track .sw-knob { left: 22px; }
.sw-text { font-size: 14px; }

/* 首頁輪播文字疊層 */
.hero-slide { position: relative; display: block; }
.hero-cap { position: absolute; left: 6%; bottom: 12%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hero-title { color: #fff; font-size: clamp(20px, 4vw, 40px); font-weight: 800; }
.hero-sub { color: #fff; font-size: clamp(13px, 2vw, 18px); }

/* ===== 2026-07-09 backlog：折數標／商品影片／訂購備註／介紹自訂頁籤 ===== */
.discount-tag { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: 6px;
  background: #fdeceb; color: #c0392b; border: 1px solid rgba(192, 57, 43, .3);
  font-size: 12px; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 14px; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
.order-note-row { align-items: flex-start; }
.order-note { flex: 1; min-width: 200px; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px;
  font-size: 16px; font-family: inherit; resize: vertical; }
.req-star { color: #d33; margin-left: 2px; }
.cart-note { font-size: 12px; color: #888; margin-top: 2px; }
.extra-tab { border: 1px solid #e3e3e3; border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.extra-tab-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.extra-tab-head label { display: flex; align-items: center; gap: 8px; flex: 1; }
.extra-tab-head .extra-tab-title { flex: 1; max-width: 360px; }

/* ============================================================
   UIUX 第 1 批（2026-07-09）：手機版頁首 F1 ＋ 表格 F3
   ============================================================ */
@media (max-width: 720px) {
  /* --- F1 頁首（拉皮版）：一列品牌＋動作，搜尋壓成細長第二列，選單收進漢堡 --- */
  .header-main { flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px; }
  .brand { font-size: 18px; gap: 7px; }
  .brand-logo { height: 32px; }
  .site-actions { margin-left: auto; gap: 12px; }
  .cart-link { font-size: 13.5px; }
  .act-word { display: none; }  /* 手機藏「購物車」「／註冊」字樣，動作列跟 Logo 同一行 */
  .nav-toggle {
    display: inline-block; font-size: 24px; line-height: 1;
    cursor: pointer; padding: 2px 6px; color: var(--wd-accent-2); user-select: none;
  }
  .site-search { order: 5; flex: 1 1 100%; max-width: none; margin: 0; }
  .site-search input { width: 100%; flex: 1; font-size: 16px; padding: 7px 16px; }  /* 16px 防 iOS 聚焦自動放大 */
  .site-search button { padding: 7px 16px; }
  .site-nav {
    flex-direction: column; gap: 0; padding: 0 14px 8px;
    display: none; flex-wrap: nowrap; align-items: stretch;
  }
  .nav-toggle-cb:checked ~ .site-nav { display: flex; }
  .site-nav > a, .site-nav .nav-item { width: 100%; border-top: 1px solid var(--wd-line); }
  .site-nav > a, .site-nav .nav-item > a { display: block; padding: 12px 4px; font-size: 15.5px; font-weight: 600; opacity: 1; }
  .site-nav > a::after, .site-nav .nav-item > a::after { display: none; }  /* 漢堡選單內不用底線動畫 */
  /* --- 手風琴式子選單（TING 2026-07-19：子分類預設收合、點箭頭展開，主/子層級分明） --- */
  .site-nav .nav-item > a { display: flex; align-items: center; justify-content: space-between; }
  .site-nav .nav-item .nav-caret {
    flex: 0 0 44px; height: 32px; margin: -6px 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; border-left: 1px solid var(--wd-line);
  }
  .site-nav .nav-item:hover .nav-sub, .site-nav .nav-item:focus-within .nav-sub { display: none; }
  .site-nav .nav-item.open .nav-sub { display: block; animation: none; }
  .site-nav .nav-item.open > a .nav-caret { transform: rotate(180deg); }
  .nav-sub {
    position: static; display: none; box-shadow: none; border: none;
    background: var(--wd-surface-2); border-radius: 10px;
    margin: 0 0 10px; padding: 4px 8px 8px; min-width: 0; width: auto;
    max-height: none; overflow: visible;
  }
  .nav-sub a { padding: 10px 10px; font-size: 14.5px; font-weight: 400; color: var(--wd-muted); }
  .nav-sub-head { padding: 10px 10px 2px; }

  /* --- F3 購物車：7 欄表格改「一列一張卡片」堆疊，不再整頁橫捲 --- */
  .cart-table { box-shadow: none; background: transparent; }
  .cart-table thead { display: none; }
  .cart-table tbody, .cart-table tr, .cart-table td { display: block; width: 100%; }
  .cart-table tr {
    background: var(--wd-surface); border: 1px solid var(--wd-line);
    border-radius: var(--wd-radius); box-shadow: var(--wd-shadow);
    padding: 10px 12px; margin-bottom: 12px; position: relative;
  }
  .cart-table td { border: none; padding: 4px 0; font-size: 15px; }
  .cart-table td.cart-thumb-cell { position: absolute; top: 10px; right: 10px; width: auto; }
  .cart-table .cart-thumb { width: 56px; height: 56px; }
  .cart-table .cart-qty { font-size: 16px; }
  /* 每列（單價/數量/小計/規格）補上灰色小標題，手機才看得懂哪個數字是什麼 */
  .cart-table td[data-label]::before {
    content: attr(data-label); display: block; font-size: 12px;
    color: var(--wd-muted); margin-bottom: 2px; font-weight: 400;
  }
  .cart-table td.cart-name-cell { padding-right: 68px; }  /* 讓名稱不被右上縮圖壓到 */
  /* 移除鈕：靠右、加「移除」字，不再是一個突兀的大方框 */
  .cart-table td.cart-remove-cell {
    text-align: right; margin-top: 6px; padding-top: 8px;
    border-top: 1px dashed var(--wd-line);
  }
  .cart-table td.cart-remove-cell .iconbtn.danger {
    padding: 8px 16px; font-size: 15px; color: #dc2626; border-color: #f0c9c9;
  }
  .cart-table td.cart-remove-cell .iconbtn.danger::after { content: " 移除商品"; font-size: 14px; }

  /* --- F3 其餘寬表格（會員中心/後台）：改水平捲動，頁面本身不橫捲 --- */
  .account-table, .admin-table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
}

/* ===== UIUX 第 2 批（2026-07-09）：前台 toast(F6) ＋ 手機輸入框防縮放(F10) ===== */
.wd-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px);
  background: rgba(15,23,42,.92); color: #fff; padding: 11px 20px; border-radius: 999px;
  font-size: 14px; z-index: 9999; opacity: 0; transition: opacity .25s, transform .25s;
  max-width: 90vw; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.wd-toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) {
  /* 前台（.container 內）輸入框字級 ≥16px，iPhone 聚焦才不會強制放大整頁 */
  .container input, .container select, .container textarea { font-size: 16px; }
}
.field-hint { display: block; font-size: 12px; color: var(--wd-muted); margin-top: 3px; }  /* 欄位補充說明（F9） */

/* ===== 2026-07-19 精緻電商風拉皮：手機版排版雜項 ===== */
@media (max-width: 720px) {
  .container { padding: 20px 16px 40px; }
  .section-title { font-size: 19px; margin-bottom: 16px; }
  /* 商品格改兩欄（主流電商手機標配），卡片內縮小一號 */
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .product-info { padding: 10px 10px 12px; gap: 3px; }
  .product-studio { font-size: 12px; }
  .product-title { font-size: 13px; }
  .product-price { font-size: 14px; gap: 5px; }
  .prod-slider .product-card { flex: 0 0 46vw; }  /* 露出第三張一角，暗示可滑 */
  .detail-title { font-size: 21px; }
  .detail-price { font-size: 22px; }
  .buy-buttons .btn { padding: 13px 10px; font-size: 15px; }
  .thumb { width: 58px; height: 58px; }
  .home-sec { margin-bottom: 40px; }
  .hero { margin-bottom: 28px; }
}

/* F11：輪播圓點與左右箭頭（.hero 需相對定位；容器本身已是連結堆疊） */
.hero { position: relative; }
.hero-dots { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; gap: 8px; justify-content: center; z-index: 3; }
.hero-dot { width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.55); box-shadow: 0 0 3px rgba(0,0,0,.3); }
.hero-dot.on { background: #fff; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(15,23,42,.4); color: #fff; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.hero-arrow:hover { background: rgba(15,23,42,.65); }
.hero-arrow.prev { left: 10px; }
.hero-arrow.next { right: 10px; }
@media (max-width: 720px) { .hero-arrow { width: 32px; height: 32px; font-size: 20px; } }

/* ===== UIUX 第 3 批（2026-07-09 打磨）===== */
/* F17：輪播圖固定比例，載入前先佔位不跳版（CLS）。
   比例＝現役橫幅原始尺寸 2835×941（圖上有一圈設計金框，裁切會把框切成殘線——別改回 16:6） */
.hero-slide img { aspect-ratio: 2835 / 941; object-fit: cover; }
@media (max-width: 720px) {
  /* F18：購物車移除鈕觸控目標放大到 ~44px（手機好按不誤觸） */
  .cart-table .iconbtn.danger { padding: 10px 14px; font-size: 18px; }
}