/* ==========================================================================
   Veyra 維啦 — 設計系統（黑 × 金）
   ========================================================================== */
:root{
  --brand:#14161a; --brand-2:#2a2e34; --brand-soft:#f4f1e9;
  --accent:#d4af37; --accent-2:#96731c; --accent-soft:#f7f1e0;
  --gold-grad:linear-gradient(135deg,#f0dc9a 0%,#d4af37 48%,#a9852a 100%);
  --gold-line:rgba(201,165,74,.5);
  --ink:#15171b; --body:#3c4046; --muted:#6d7178; --faint:#9ba0a7;
  --line:#e9e4d9; --line-2:#f2eee4;
  --bg:#f8f5ef; --card:#ffffff;
  --ok:#0f9d58; --warn:#d97706; --danger:#dc2626;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(17,19,23,.06),0 1px 3px rgba(17,19,23,.04);
  --sh-2:0 4px 16px rgba(17,19,23,.07),0 2px 6px rgba(17,19,23,.04);
  --sh-3:0 18px 40px rgba(17,19,23,.12);
  --max:1200px;
  --ff:"PingFang TC","Hiragino Sans TC","Noto Sans TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--ff);color:var(--body);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
/* 觸控裝置：取消 hover 位移殘留（桌機不受影響） */
@media (hover:none){
  .card:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line)}
  .card:hover .card-img img{transform:none}
  .btn-primary:hover,.btn-dark:hover,.btn-ghost:hover,.icon-btn:hover,.chat-send:hover{transform:none}
}
h1,h2,h3,h4{color:var(--ink);margin:0 0 .5em;line-height:1.28;font-weight:700;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h2{font-size:clamp(1.3rem,2.4vw,1.75rem)}
h3{font-size:1.12rem}
a{color:var(--brand-2);text-decoration:none}
a:hover{color:var(--accent-2)}
img{max-width:100%;display:block}
button{font-family:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none !important}

/* ---------- 公告列 ---------- */
.annbar{background:var(--gold-grad);color:#1a2433;font-size:.85rem;font-weight:600;text-align:center;padding:9px 16px;letter-spacing:.01em}
.annbar a{color:#1a2433;text-decoration:underline;text-underline-offset:2px;margin-left:6px}

/* ---------- Topbar ---------- */
.topbar{background:var(--brand);color:#d6d1c3;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;height:38px;align-items:center}
.topbar b{color:#fff;font-weight:600}
.topbar-links{display:flex;gap:18px}
.topbar a{color:#d6d1c3}
.topbar a:hover{color:#fff}

/* ---------- Header ---------- */
header.site{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;box-shadow:var(--sh-1)}
.site-inner{display:flex;align-items:center;gap:22px;height:74px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.22rem;color:var(--ink);white-space:nowrap}
.logo:hover{color:var(--accent)}
.logo-mark{width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,#2b2f35,var(--brand));display:grid;place-items:center;box-shadow:var(--sh-1),inset 0 0 0 1.5px var(--gold-line)}
.logo small{display:block;font-size:.7rem;color:var(--muted);font-weight:500;letter-spacing:.04em}
.search{flex:1;max-width:520px;position:relative}
.search input{width:100%;height:44px;border:1.5px solid var(--line);background:var(--bg);border-radius:999px;padding:0 46px 0 20px;font-size:.95rem;color:var(--ink);outline:none;transition:.18s}
.search input:focus{border-color:var(--brand-2);background:#fff;box-shadow:0 0 0 4px var(--brand-soft)}
.search button{position:absolute;right:5px;top:5px;width:34px;height:34px;border-radius:50%;border:0;background:var(--brand);color:#fff;cursor:pointer;display:grid;place-items:center}
.search button:hover{background:var(--brand-2)}
.hdr-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.icon-btn{position:relative;display:flex;align-items:center;gap:8px;height:44px;padding:0 15px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-size:.9rem;font-weight:600;transition:.18s}
.icon-btn:hover{border-color:var(--brand-2);background:var(--brand-soft)}
.cart-count{position:absolute;top:-5px;right:-5px;min-width:21px;height:21px;padding:0 5px;border-radius:999px;background:var(--gold-grad);color:#1a2433;font-size:.72rem;font-weight:800;display:grid;place-items:center;border:2px solid #fff}
nav.main{background:#fff;border-bottom:1px solid var(--line)}
nav.main .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
nav.main .wrap::-webkit-scrollbar{display:none}
nav.main a{padding:13px 15px;color:#d9b44a;font-size:.93rem;font-weight:600;border-bottom:2.5px solid transparent;white-space:nowrap;transition:color .18s,background .18s,border-color .18s}
nav.main a:hover{color:#a78bfa;border-bottom-color:#8b5cf6;background:rgba(124,58,237,.2)}
nav.main a.on{color:#ffe9a8;border-bottom-color:var(--accent);background:rgba(217,180,74,.14)}
.menu-toggle{display:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:999px;border:0;font-size:.95rem;font-weight:700;cursor:pointer;transition:.18s;text-align:center}
.btn-primary{background:var(--gold-grad);color:#1a2433;box-shadow:0 6px 16px rgba(168,132,47,.3)}
.btn-primary:hover{filter:brightness(1.06);color:#1a2433;transform:translateY(-1px);box-shadow:0 10px 22px rgba(168,132,47,.4)}
.btn-dark{background:var(--brand);color:#fff}
.btn-dark:hover{background:var(--brand-2);color:#fff}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--brand-2);color:var(--brand);background:var(--brand-soft)}
.btn-block{width:100%}
.btn-sm{height:38px;padding:0 16px;font-size:.86rem}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none !important;box-shadow:none}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(120deg,#0b0d0f 0%,#191c21 58%,#2b2f35 100%);color:#fff;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:0;background:radial-gradient(620px 320px at 82% 18%,rgba(212,175,55,.30),transparent 70%),radial-gradient(420px 240px at 6% 100%,rgba(212,175,55,.12),transparent 72%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero h1{color:#fff;margin-bottom:.35em}
.hero p{color:#d8d3c5;font-size:1.05rem;margin:0 0 26px;max-width:46ch}

/* ---------- Hero 聯絡資訊卡 ---------- */
.hero-copy{display:flex;flex-direction:column;align-self:stretch}
.hero-contact{margin-top:auto;padding-top:34px}
.hero-contact .box{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);border-radius:var(--r-lg);padding:18px 22px;max-width:330px;text-align:left;backdrop-filter:blur(4px)}
.hero-contact .t{font-size:.98rem;font-weight:800;color:#fff;letter-spacing:.05em;margin-bottom:6px}
.hero-contact .r{display:flex;gap:2px;align-items:baseline;padding:3px 0;color:#d8d3c5;font-size:.9rem;line-height:1.55}
.hero-contact .r .k{color:#a49e8f;flex:0 0 auto}
.hero-contact .r b{font-weight:600;color:#f7f3e8}

/* ---------- 社群／通訊連結按鈕（聯絡卡／頁尾／聯絡我們頁共用） ---------- */
.soc-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
/* 純圖標模式：只顯示品牌圖標，無膠囊底、無文字 */
.soc{display:inline-grid;place-items:center;padding:0;background:none;border:0;box-shadow:none;cursor:pointer;text-decoration:none;transition:transform .15s;position:relative}
.soc:hover{transform:translateY(-2px) scale(1.05)}
.soc:active{transform:translateY(0)}
.soc-ic{width:40px;height:40px;display:grid;place-items:center;flex:none;border-radius:12px;background:var(--soc,#333);color:#fff}
.soc-ic svg{width:20px;height:20px;display:block}
/* 品牌去背高清 PNG 圖標：直接原樣顯示，不加任何底色 */
.soc-ic--img{background:none;border-radius:0}
.soc-ic--img img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.soc--onDark .soc-ic--img img{filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.badge-row ~ .soc-row, .hero-contact .soc-row{margin-top:14px}
.badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pill{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#efeade;padding:7px 14px;border-radius:999px;font-size:.83rem;font-weight:600}
.hero-art{display:grid;place-items:center}
.hero-art img{width:min(400px,100%);height:auto;filter:drop-shadow(0 18px 42px rgba(0,0,0,.55))}

/* ---------- Sections ---------- */
section{padding:52px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:26px;flex-wrap:wrap}
.sec-head p{margin:.35em 0 0;color:var(--muted);font-size:.95rem}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.14em;color:var(--accent-2);text-transform:uppercase;margin-bottom:8px}

/* ---------- Trust strip ---------- */
.trust{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.trust .item{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;gap:13px;box-shadow:var(--sh-1)}
.trust .ic{width:42px;height:42px;flex:none;border-radius:11px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand)}
.trust b{display:block;color:var(--ink);font-size:.95rem}
.trust span{font-size:.83rem;color:var(--muted)}

/* ---------- Category chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.chip{padding:9px 18px;border-radius:999px;border:1.5px solid rgba(212,175,55,.5);background:var(--gold-grad);color:#1a2433;font-size:.88rem;font-weight:700;cursor:pointer;transition:.18s;box-shadow:0 4px 12px rgba(168,132,47,.28)}
.chip:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 8px 18px rgba(168,132,47,.4);color:#1a2433}
.chip.on{background:var(--gold-grad);border-color:#f0dc9a;color:#1a2433;box-shadow:0 0 0 2px rgba(240,220,154,.6),0 6px 16px rgba(168,132,47,.42)}
.chip .n{opacity:.55;font-size:.8em;margin-left:5px}

/* ---------- Product grid ---------- */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.toolbar select{height:42px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;padding:0 12px;font-size:.9rem;color:var(--ink);cursor:pointer}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.2s;box-shadow:var(--sh-1)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:#ddd7c7}
.card-img{position:relative;background:#fff;aspect-ratio:1;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:.35s}
.card:hover .card-img img{transform:scale(1.06)}
.tag{position:absolute;top:10px;left:10px;padding:5px 11px;border-radius:999px;font-size:.72rem;font-weight:800;letter-spacing:.03em;background:var(--gold-grad);color:#3a2c05}
.tag.ng{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}
.tag.hot{background:linear-gradient(135deg,#2a2e34,#14161a);color:#fff}
.tag.out{background:var(--muted);color:#fff}
.card-body{padding:15px 16px 18px;display:flex;flex-direction:column;flex:1}
.card-cat{font-size:.76rem;color:var(--faint);font-weight:700;letter-spacing:.05em;margin-bottom:5px}
.card-title{font-size:.98rem;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.card-title a{color:inherit}
.card-desc{font-size:.83rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:12px}
.price{display:flex;align-items:baseline;gap:9px;margin-top:auto}
.price .now{font-size:1.22rem;font-weight:800;color:var(--accent-2)}
.price .was{font-size:.85rem;color:var(--faint);text-decoration:line-through}
.card-actions{margin-top:12px;display:flex;gap:8px}
.card-actions .btn{flex:1 1 0;min-width:0;padding:0 10px;white-space:nowrap}

/* ---------- Product detail ---------- */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start;padding-top:34px}
.gallery .main{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;aspect-ratio:1}
.gallery .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:12px;margin-top:14px}
.thumb{width:78px;height:78px;border-radius:var(--r-sm);border:2px solid var(--line);overflow:hidden;background:#fff;cursor:pointer;padding:0}
.thumb.on{border-color:var(--accent)}
.thumb img{width:100%;height:100%;object-fit:cover}
.pd-info h1{margin-bottom:.3em}
.pd-meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:.87rem;margin-bottom:16px;flex-wrap:wrap}
.price-box{background:var(--brand-soft);border:1px solid #e6dfcc;border-radius:var(--r);padding:18px 20px;margin-bottom:20px;display:flex;align-items:baseline;gap:14px}
.price-box .now{font-size:2rem;font-weight:800;color:var(--accent-2)}
.price-box .was{color:var(--faint);text-decoration:line-through}
.price-box .save{background:var(--danger);color:#fff;font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:999px}
.buy-row{display:flex;gap:12px;align-items:center;margin-bottom:16px}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card);height:46px}
.qty button{width:42px;height:100%;border:0;background:var(--card);font-size:1.15rem;color:var(--ink);cursor:pointer;font-weight:600;transition:background .15s,color .15s}
.qty button:hover{background:rgba(124,58,237,.32);color:#c4b5fd}
.qty input{width:52px;height:100%;border:0;text-align:center;font-size:1rem;font-weight:700;color:var(--ink);outline:none;background:var(--card)}
.stock-line{font-size:.88rem;margin-bottom:16px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.dot.ok{background:var(--ok)}.dot.low{background:var(--warn)}.dot.no{background:var(--muted)}
.spec-table{width:100%;border-collapse:collapse;font-size:.9rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec-table th,.spec-table td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line-2)}
.spec-table tr:last-child th,.spec-table tr:last-child td{border-bottom:0}
.spec-table th{background:#faf8f2;color:var(--muted);font-weight:600;width:32%}
.spec-table td{color:var(--ink)}
.tabs{display:flex;gap:6px;border-bottom:2px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.tab{padding:11px 18px;border:0;background:none;font-size:.95rem;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-2px}
.tab.on{color:var(--brand);border-bottom-color:var(--accent)}
.prose{font-size:.95rem;color:var(--body);max-width:74ch}
.prose ul{padding-left:20px}
.prose li{margin-bottom:7px}
.notice{background:#fdfaf1;border:1px solid #ecdcb0;border-left:4px solid var(--accent);border-radius:var(--r-sm);padding:15px 18px;font-size:.9rem;color:#6b5310;margin:18px 0}

/* ---------- Cart / Checkout ---------- */
.cart-layout{display:grid;grid-template-columns:1.6fr .9fr;gap:30px;align-items:start;padding-top:30px}
.cart-layout--checkout{grid-template-columns:1.5fr 1fr}
.cart-layout--even{grid-template-columns:1fr 1fr;gap:24px;padding-top:12px}
.sum-sticky{position:sticky;top:100px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh-1)}
.panel + .panel{margin-top:20px}
.panel h3{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.panel h3 .step{width:26px;height:26px;border-radius:50%;background:var(--brand);color:#fff;font-size:.82rem;display:grid;place-items:center;font-weight:700}
table.lines{width:100%;border-collapse:collapse;font-size:.92rem}
table.lines th{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);color:var(--muted);font-weight:600;font-size:.84rem}
table.lines td{padding:14px 8px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.lines tr:last-child td{border-bottom:0}
.line-prod{display:flex;gap:13px;align-items:center}
.line-prod img{width:66px;height:66px;border-radius:var(--r-sm);border:1px solid var(--line);object-fit:cover;flex:none}
.line-prod b{color:var(--ink);font-size:.92rem;display:block;line-height:1.35}
.line-prod span{font-size:.78rem;color:var(--faint)}
.sum-row{display:flex;justify-content:space-between;padding:9px 0;font-size:.93rem}
.sum-row.total{border-top:2px dashed var(--line);margin-top:10px;padding-top:15px;font-size:1.15rem;font-weight:800;color:var(--ink)}
.sum-row .free{color:var(--ok);font-weight:700}
.empty-state{text-align:center;padding:60px 20px;color:var(--muted)}
.empty-state svg{opacity:.35;margin-bottom:14px}

/* ---------- Forms ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.86rem;font-weight:600;color:var(--ink)}
.field label .req{color:var(--danger)}
.field input,.field select,.field textarea{height:46px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:0 14px;font-size:.94rem;font-family:inherit;color:var(--ink);background:#fff;outline:none;transition:.16s}
.field textarea{height:auto;padding:12px 14px;resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-2);box-shadow:0 0 0 4px var(--brand-soft)}
.field .hint{font-size:.78rem;color:var(--faint)}
.opt-list{display:grid;gap:11px}
.opt{display:flex;gap:13px;align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;cursor:pointer;transition:.16s;background:#fff}
.opt:hover{border-color:#e0d9c8}
.opt.on{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px rgba(18,51,92,.07)}
.opt input{margin-top:4px;accent-color:var(--brand);width:17px;height:17px}
.opt b{display:block;color:var(--ink);font-size:.94rem}
.opt small{color:var(--muted);font-size:.82rem}
.opt .fee{margin-left:auto;font-weight:700;color:var(--ink);font-size:.9rem;white-space:nowrap}

/* ---------- Steps ---------- */
.steps{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px 0 4px;flex-wrap:wrap}
.steps .s{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--faint);font-weight:600}
.steps .s .n{width:27px;height:27px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font-size:.82rem;background:#fff}
.steps .s.on{color:var(--brand)}
.steps .s.on .n{background:var(--brand);border-color:var(--brand);color:#fff}
.steps .s.done .n{background:var(--ok);border-color:var(--ok);color:#fff}
.steps .bar{width:40px;height:2px;background:var(--line)}

/* ---------- Order result ---------- */
.result{max-width:700px;margin:0 auto;text-align:center;padding:46px 0}
.tick{width:82px;height:82px;border-radius:50%;background:#e8f7ee;display:grid;place-items:center;margin:0 auto 20px}
.order-no{display:inline-block;background:var(--brand-soft);border:1px dashed #e0d9c8;color:var(--brand);font-size:1.35rem;font-weight:800;letter-spacing:.06em;padding:12px 26px;border-radius:var(--r);margin:12px 0 26px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.info-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);text-align:left;padding:24px;box-shadow:var(--sh-1)}
.kv{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:.92rem}
.kv:last-child{border-bottom:0}
.kv b{color:var(--ink)}

/* ---------- Footer ---------- */
footer.site{background:var(--brand);color:#c8c2b1;margin-top:60px;font-size:.9rem}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding:52px 0 34px}
footer.site h4{color:#fff;font-size:.95rem;margin-bottom:14px}
footer.site a{color:#c8c2b1;display:block;padding:5px 0}
footer.site a:hover{color:#fff}
footer.site .logo{color:#fff}
footer.site .logo small{color:#a8a291}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);padding:18px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.83rem;color:#a8a291}
/* 頁尾欄位結構（手機上變折疊式；桌機一律展開、外觀與原本相同） */
.fcol-t{display:flex;align-items:center;gap:8px}
.fcol-t .fv{display:none;margin-left:auto;flex:0 0 auto;transition:transform .22s ease}
.fcol-b{display:block}
.tabbar{display:none}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(120%);background:var(--card,#fff);color:var(--ink,#fff);border:1px solid var(--line,transparent);padding:14px 24px;border-radius:999px;font-size:.92rem;font-weight:600;z-index:999;box-shadow:var(--sh-3);transition:.32s cubic-bezier(.2,.8,.2,1);max-width:90vw;text-align:center}
#toast.show{transform:translateX(-50%) translateY(0)}
#toast.ok{background:var(--ok);color:#fff;border-color:transparent}#toast.err{background:var(--danger);color:#fff;border-color:transparent}

/* ---------- Breadcrumb ---------- */
.crumb{font-size:.85rem;color:var(--muted);padding:18px 0 0}
.crumb a{color:var(--muted)}.crumb a:hover{color:var(--brand)}
.crumb span{margin:0 7px;color:var(--faint)}

/* ---------- Admin ---------- */
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:18px;margin-bottom:26px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--sh-1)}
.stat .lbl{font-size:.82rem;color:var(--muted);font-weight:600}
.stat .val{font-size:1.7rem;font-weight:800;color:var(--ink);margin-top:4px}
.stat .val.accent{color:var(--accent-2)}
.tagstatus{display:inline-block;padding:3px 11px;border-radius:999px;font-size:.76rem;font-weight:700}
.st-pending{background:#fff3e0;color:#b45309}.st-paid{background:#e0f2f1;color:#0f766e}
.st-shipped{background:#ede9fe;color:#6d28d9}.st-done{background:#e8f7ee;color:#0f7a44}
.st-cancelled{background:#f1f5f9;color:#6d7178}

/* ==========================================================================
   響應式自適應：裝置分級自動套用
     ▶ 桌機（≥1025px）  ：四欄商品、左右分欄、摘要吸頂
     ▶ 平板（721–1024px）：三欄商品、分欄改上下、插圖縮小
     ▶ 手機（≤720px）   ：兩欄／單欄、表格卡片化、全寬按鈕、安全區留白
     ▶ 小手機（≤480px） ：再縮間距與字級
   全部以媒體查詢實作 → 顧客用哪種裝置打開，就自動是那一種尺寸。
   ========================================================================== */

/* ---------- 平板：iPad 直向 768／橫向 1024、小平板、小筆電 ---------- */
@media(max-width:1024px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;gap:24px;padding-top:44px;padding-bottom:38px}
  .hero p{margin-left:auto;margin-right:auto}
  .badge-row{justify-content:center}
  .hero-copy{display:block;align-self:auto}
  .hero-contact{margin:26px auto 0;padding-top:0}
  .hero-contact .box{margin:0 auto}
  .hero-art img{width:300px}
  .grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .trust{grid-template-columns:repeat(2,1fr)}
  .pd{grid-template-columns:1fr;gap:26px}
  .pd .gallery{max-width:540px;width:100%;margin:0 auto}
  /* 購物車／結帳：分欄改上下，摘要不再吸頂 */
  .cart-layout,.cart-layout--checkout,.cart-layout--even{grid-template-columns:1fr;gap:22px}
  .sum-sticky{position:static;top:auto}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:28px}
  .admin-grid{grid-template-columns:repeat(2,1fr)}
  .result{padding:34px 0}
}

/* ---------- 手機：手機直向／橫向 ---------- */
@media(max-width:720px){
  /* 手機專用：錨點避開置頂頁頭，並關掉任何意外的橫向滑動 */
  html{scroll-padding-top:118px;overflow-x:clip}
  body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .wrap{padding:0 16px}
  /* 頂欄與頁頭：縮高、搜尋獨占一列、圖示只留圖不擠字 */
  .topbar{font-size:.78rem}
  .topbar .wrap{height:auto;min-height:34px;padding:6px 16px;gap:10px}
  .topbar-links{display:none}
  .site-inner{height:auto;flex-wrap:wrap;padding-top:9px;padding-bottom:9px;gap:9px}
  .logo{font-size:1.06rem;gap:9px}
  .logo small{font-size:.66rem}
  .search{order:3;flex-basis:100%;max-width:none}
  .search input{height:42px}
  .search button{top:4px;right:4px}
  .hdr-actions{gap:7px}
  .hdr-actions .lbl{display:none}
  .icon-btn{padding:0 12px;gap:0;height:42px}
  nav.main .wrap{padding:0 16px;-webkit-overflow-scrolling:touch}
  nav.main a{padding:11px 13px;font-size:.9rem}
  /* 主視覺 */
  .hero .wrap{padding-top:30px;padding-bottom:28px;gap:18px}
  .hero p{font-size:1rem;margin-bottom:20px}
  .hero-art img{width:240px}
  .hero-contact .box{max-width:none;padding:15px 17px}
  .badge-row{margin-top:20px}
  .pill{font-size:.79rem;padding:6px 12px}
  section{padding:34px 0}
  .sec-head{margin-bottom:18px}
  /* 商品網格：兩欄 */
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .grid-3{grid-template-columns:1fr;gap:12px}
  /* 服務保障：手機壓成 2×2 緊湊小卡，不再四張直直落佔滿一屏 */
  .trust{grid-template-columns:repeat(2,1fr);gap:8px}
  .trust .item{padding:11px 12px;gap:9px;align-items:flex-start;flex-direction:column}
  .trust .ic{width:32px;height:32px;border-radius:9px}
  .trust b{font-size:.82rem;line-height:1.3}
  .trust span{font-size:.7rem;line-height:1.45}
  /* 商品卡片 */
  .card-body{padding:12px}
  .card-cat{font-size:.72rem}
  .card-title{font-size:.9rem;min-height:2.6em}
  .card-desc{font-size:.79rem;margin-bottom:9px}
  .price .now{font-size:1.1rem}
  .card-actions{gap:6px}
  .card-actions .btn{height:36px;font-size:.82rem;padding:0 8px}
  /* 商品詳情 */
  .pd{padding-top:22px}
  .pd-info h1{font-size:1.35rem}
  .price-box{padding:14px 16px;flex-wrap:wrap;gap:10px;margin-bottom:16px}
  .price-box .now{font-size:1.7rem}
  .pd-meta{gap:9px;font-size:.82rem;margin-bottom:13px}
  .buy-row{flex-wrap:wrap;gap:10px}
  .qty{flex:1;justify-content:space-between}
  .thumb{width:64px;height:64px}
  .spec-table th,.spec-table td{padding:9px 12px;font-size:.86rem}
  .spec-table th{width:38%}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:16px}
  .tabs::-webkit-scrollbar{display:none}
  .tab{white-space:nowrap;padding:10px 14px;font-size:.9rem}
  .prose{font-size:.92rem}
  .notice{padding:13px 15px;margin:14px 0}
  /* 表單：單欄；16px 避免 iOS 聚焦時自動放大畫面 */
  .form-grid{grid-template-columns:1fr}
  .field input,.field select,.field textarea,.search input,.toolbar select,.chat-ta,.chat-start input,.ca-search input,.ca-input textarea,.pm-inp,.pm-toolbar input,.pm-toolbar select,.pm-spec input,.pm-addurl input{font-size:16px}
  .btn{height:44px;padding:0 20px;font-size:.93rem}
  .btn-sm{height:38px;font-size:.84rem}
  .opt{padding:12px 13px;gap:11px}
  /* 步驟條 */
  .steps{gap:4px;padding:16px 0 2px}
  .steps .s{gap:6px;font-size:.8rem}
  .steps .s .n{width:24px;height:24px;font-size:.76rem}
  .steps .bar{width:14px}
  /* 訂單結果／明細 */
  .result{padding:26px 0}
  .order-no{font-size:1.05rem;padding:10px 16px;letter-spacing:.03em;word-break:break-all}
  .kv{gap:12px;font-size:.88rem;padding:9px 0}
  .info-card{padding:18px}
  .line-prod img{width:54px;height:54px}
  table.lines .hide-sm{display:none}
  .sum-row{font-size:.9rem}
  .sum-row.total{font-size:1.06rem}
  /* 頁尾：手機改折疊式選單，四欄不再直直落 */
  footer.site{margin-top:36px}
  footer.site .cols{grid-template-columns:1fr;gap:0;padding:22px 0 4px}
  .fcol{border-bottom:1px solid rgba(255,255,255,.1)}
  .fcol-brand{padding-bottom:16px}
  .fcol-brand p{max-width:none;font-size:.85rem}
  footer.site h4{margin-bottom:0;font-size:.93rem}
  .fcol-t{padding:14px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .fcol-t .fv{display:block;color:#a8a291}
  .fcol.open .fcol-t .fv{transform:rotate(180deg)}
  .fcol-b{display:none;padding:0 0 15px}
  .fcol.open .fcol-b{display:block}
  footer.site a{padding:8px 0;font-size:.9rem}
  .foot-bottom{padding:14px 0 calc(14px + env(safe-area-inset-bottom));font-size:.78rem}
  /* 手機底部主選單（App 式分頁列） */
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:130;display:grid;grid-template-columns:repeat(4,1fr);
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:56px;
    font-size:.66rem;font-weight:600;color:#8a8780;position:relative;text-decoration:none;-webkit-tap-highlight-color:transparent}
  .tabbar a.on{color:var(--brand)}
  .tbadge{position:absolute;top:5px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 4px;border-radius:999px;
    background:var(--gold-grad);color:#1a2433;font-size:.62rem;font-weight:800;display:grid;place-items:center;border:1.5px solid #fff}
  body.has-tabbar{padding-bottom:calc(57px + env(safe-area-inset-bottom))}
  body.has-tabbar .chat-dock{bottom:calc(72px + env(safe-area-inset-bottom))}
  body.has-tabbar #toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  /* 首頁列表：副標已含「共 N 項結果」，手機收掉重複的那行 */
  #count-line{display:none}
  .empty-state{padding:44px 16px}

  /* =========================================================
     首頁商品區：App 式佈局 —— 左側分類欄 + 右側商品列表
     （仿購物 App 分類頁：類目豎排置左、排序收成右上小控件）
     ========================================================= */
  #products .wrap{display:grid;grid-template-columns:78px minmax(0,1fr);
    grid-template-areas:"head head" "cats sort" "cats grid" "cats pager";
    column-gap:10px;row-gap:0;align-items:start}
  #products .sec-head{grid-area:head;margin-bottom:14px}
  #products .chips{grid-area:cats;align-self:start;flex-direction:column;flex-wrap:nowrap;gap:6px;
    margin:0;position:sticky;top:70px;max-height:calc(100vh - 150px);overflow-y:auto;
    scrollbar-width:none;padding:2px 0 10px}
  #products .chips::-webkit-scrollbar{display:none}
  /* 豎欄裡的類目：膠囊改塊狀按鈕，選中金底 */
  #products .chips .chip{width:100%;padding:10px 4px;border-radius:11px;text-align:center;
    font-size:.78rem;line-height:1.25;display:flex;flex-direction:column;align-items:center;gap:1px}
  #products .chips .chip .n{margin-left:0;font-size:.7em;opacity:.55}
  #products .toolbar{grid-area:sort;margin-bottom:10px;justify-content:flex-end}
  #products .toolbar #sort-wrap{width:auto;gap:6px;font-size:.78rem}
  #products .toolbar select{height:34px;padding:0 8px;font-size:.8rem;border-radius:9px}
  #products .grid{grid-area:grid;gap:8px}
  #products #pager{grid-area:pager;margin-top:16px !important}
  /* 長字串一律折行，避免撐破卡片 */
  .order-no-sm,.chat-tx,.prose,.card-title,.pm-prod-tx b{word-break:break-word}
}

/* ---------- 小手機（≤480px）：iPhone SE、安卓小尺寸 ---------- */
@media(max-width:480px){
  .wrap{padding:0 13px}
  .grid{gap:10px}
  .grid-3{gap:10px}
  .card-body{padding:10px}
  .card-cat{font-size:.68rem}
  .card-title{font-size:.85rem;min-height:2.5em}
  .card-desc{font-size:.76rem}
  .hero-art img{width:210px}
  /* 兩顆按鈕在窄卡片放不下 → 改上下全寬堆疊 */
  .card-actions{flex-direction:column;gap:6px}
  .card-actions .btn{width:100%}
  .stat-card-row,.admin-grid{grid-template-columns:1fr}
  .steps .bar{width:10px}
  .steps .s{font-size:.74rem}
  .member-card{padding:18px;gap:12px}
  .member-card .logout{margin-left:0;width:100%;text-align:center}
  .order-item{padding:14px}
  .tick{width:66px;height:66px}
}

/* ---------- 極窄手機（≤400px）：頁頭維持兩列，不要被擠成三列 ---------- */
@media(max-width:400px){
  .wrap{padding:0 12px}
  .site-inner{gap:8px;padding-top:8px;padding-bottom:8px}
  .logo{font-size:.98rem;gap:7px}
  .logo-mark{width:50px;height:50px;border-radius:14px}
  .logo-mark--img{width:64px;height:46px}
  .logo-mark--img img{border-radius:13px}
  .icon-btn{padding:0 9px;height:40px}
  .hdr-actions{gap:6px}
  .topbar{font-size:.74rem}
  .search input{height:40px}
  .card-title{font-size:.82rem}
  .price .now{font-size:1rem}
  .chips{gap:6px}
  .chip{padding:7px 11px;font-size:.8rem}
}

/* ---------- 購物車明細表：窄螢幕轉卡片式（≤560px） ---------- */
@media(max-width:560px){
  table.lines thead{display:none}
  table.lines,table.lines tbody,table.lines tr,table.lines td{display:block;width:100%}
  table.lines tr{padding:12px 0 14px;border-bottom:1px solid var(--line-2)}
  table.lines tr:last-child{border-bottom:0}
  table.lines td{padding:0;border:0}
  table.lines td[data-th]{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px}
  table.lines td[data-th]::before{content:attr(data-th);font-size:.8rem;color:var(--muted);font-weight:600;flex:none}
  table.lines td.hide-sm{display:flex}
  table.lines td.cart-del{display:flex;justify-content:flex-end;margin-top:10px}
  table.lines td.cart-del .btn{width:auto}
  .line-prod img{width:60px;height:60px}
}

/* ---------- 依裝置分級微調（html[data-device] 由 app.js 標記） ---------- */
/* 手機 GPU 對 backdrop-filter 很吃力，改用單純半透明底色 */
html[data-device="mobile"] .hero-contact .box{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.1)}
/* 平板：主視覺插圖取中間尺寸 */
html[data-device="tablet"] .hero-art img{width:300px}

/* ---------- 金色裝飾 ---------- */
.sec-head h2{position:relative;padding-bottom:9px}
.sec-head h2:after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;border-radius:2px;background:var(--gold-grad)}
.foot-bottom{border-top:1px solid var(--gold-line)}

/* ---------- 會員 ---------- */
.auth-wrap{max-width:460px;margin:44px auto}
.auth-tabs{display:flex;background:var(--brand-soft);border-radius:999px;padding:4px;margin-bottom:24px}
.auth-tabs button{flex:1;border:0;background:transparent;padding:11px;border-radius:999px;font-weight:700;font-size:.92rem;color:var(--muted);cursor:pointer;transition:.16s}
.auth-tabs button.on{background:#fff;color:var(--brand);box-shadow:var(--sh-1)}
.member-card{display:flex;align-items:center;gap:16px;padding:22px;background:linear-gradient(135deg,#2b2f35,var(--brand));border-radius:var(--r);color:#fff;position:relative;overflow:hidden;margin-bottom:22px}
.member-card:after{content:"";position:absolute;inset:0;background:radial-gradient(320px 170px at 88% 8%,rgba(201,165,74,.32),transparent 70%)}
.member-card > *{position:relative;z-index:2}
.member-card .avatar{width:56px;height:56px;border-radius:50%;background:var(--gold-grad);display:grid;place-items:center;font-weight:800;font-size:1.3rem;color:#1a2433;flex:none}
.member-card b{color:#fff;font-size:1.1rem;display:block}
.member-card span{color:#cfc9b8;font-size:.86rem}
.member-card .logout{margin-left:auto;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;padding:9px 18px;border-radius:999px;font-size:.86rem;font-weight:700;cursor:pointer}
.member-card .logout:hover{background:rgba(255,255,255,.24)}
.order-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--sh-1)}
.order-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line-2);margin-bottom:12px}
.order-no-sm{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;color:var(--ink);font-size:.98rem}
.order-thumbs{display:flex;gap:9px;flex-wrap:wrap}
.order-thumbs img{width:50px;height:50px;border-radius:9px;border:1px solid var(--line);object-fit:cover}
.avatar-lg{width:76px;height:76px;border-radius:50%;background:var(--gold-grad);display:grid;place-items:center;font-weight:800;font-size:1.8rem;color:#1a2433;margin:0 auto 14px}
.stat-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:22px}
.stat-card-row .sc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center;box-shadow:var(--sh-1)}
.stat-card-row .sc b{display:block;font-size:1.4rem;color:var(--ink)}
.stat-card-row .sc span{font-size:.8rem;color:var(--muted)}
@media(max-width:720px){.stat-card-row{grid-template-columns:1fr}}

/* ---------- 懸浮客服工具（後台可設定） ---------- */
/* 容器本身不吃事件：面板收合時仍佔布局（opacity:0），若容器可命中會蓋住整片內容，
   手機上會導致下方商品卡全部點不動。只有按鈕與展開後的面板接收點擊。 */
.chat-dock{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.chat-dock.left{right:auto;left:22px;align-items:flex-start}
/* 懸浮客服：機器人「小啦」趴在橘色藥丸按鈕上（參考樣式：機器人在上、按鈕在下） */
.chat-fab{position:relative;display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;font-family:inherit;cursor:pointer;pointer-events:auto;transition:transform .16s}
.chat-fab-bot{position:relative;display:block;margin-bottom:-16px;animation:xiaolaHop 6s infinite;filter:drop-shadow(0 10px 14px rgba(255,80,0,.22))}
.chat-fab-bot img{display:block;width:96px;height:96px}
.chat-fab-name{position:absolute;left:-2px;bottom:12px;background:#FF5000;color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;padding:2px 9px;border-radius:999px;border:1.5px solid #fff;box-shadow:0 3px 8px rgba(255,80,0,.35);white-space:nowrap}
.chat-fab-txt{position:relative;z-index:2;display:inline-flex;align-items:center;height:44px;padding:0 28px;border-radius:999px;background:linear-gradient(135deg,#FFA940,#FF5000);color:#fff;font-weight:800;font-size:.95rem;letter-spacing:.06em;box-shadow:0 10px 24px rgba(255,80,0,.35);transition:transform .16s,box-shadow .16s}
.chat-fab:hover .chat-fab-txt{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,80,0,.42)}
.chat-dock.open{flex-direction:row;align-items:stretch;gap:0}
.chat-dock.open .chat-fab{display:none}
/* 機器人每 6 秒輕輕跳兩下（其餘時間静止）；減少動態偏好時停止 */
@keyframes xiaolaHop{0%,100%{transform:translateY(0) rotate(0deg)}3%{transform:translateY(-9px) rotate(-4deg)}6.5%{transform:translateY(0) rotate(0deg)}9.5%{transform:translateY(-4px) rotate(3deg)}13%,100%{transform:translateY(0) rotate(0deg)}}
@media (prefers-reduced-motion:reduce){.chat-fab-bot{animation:none}}
.chat-dot{position:absolute;top:2px;right:2px;width:11px;height:11px;border-radius:50%;background:#e5484d;border:2px solid #fff;animation:chatPulse 1.9s infinite}
.chat-dot.hidden{display:none}
@keyframes chatPulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}70%{box-shadow:0 0 0 9px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
.chat-panel{width:min(340px,calc(100vw - 44px));background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 48px rgba(17,19,23,.24);overflow:hidden;opacity:0;visibility:hidden;transform:translateY(14px) scale(.96);transform-origin:bottom right;pointer-events:none;transition:opacity .2s,transform .22s cubic-bezier(.2,.9,.25,1),visibility 0s linear .22s;position:relative}
.chat-dock.left .chat-panel{transform-origin:bottom left}
.chat-dock.open .chat-panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .2s,transform .22s cubic-bezier(.2,.9,.25,1),visibility 0s}
.chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.chat-head-ic{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#e6c96b,#c9a54a);display:grid;place-items:center;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.chat-head-ic img{display:block}
.chat-head-tx{flex:1;min-width:0}
.chat-head-tx b{display:block;font-size:.97rem;color:var(--ink)}
.chat-head-tx span{display:block;font-size:.74rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-close{background:#f0eeea;border:0;color:#8a877f;width:30px;height:30px;border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer;flex:none;font-family:inherit}
.chat-close:hover{background:#e4e1da}
.chat-body{padding:14px 14px 4px;max-height:min(56vh,420px);overflow-y:auto}
.chat-say{background:var(--brand-soft);color:var(--ink);border-radius:4px 14px 14px 14px;padding:11px 13px;font-size:.85rem;line-height:1.7;margin-bottom:12px}
.chat-list{display:grid;gap:9px}
.chat-tx{flex:1;min-width:0}
.chat-foot{padding:8px 14px 13px;font-size:.72rem;color:var(--muted);text-align:center}
@media (max-width:720px){
  /* 懸浮客服：讓開 iPhone 底部橫條，面板改為接近滿版寬度 */
  .chat-dock{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));gap:10px}
  .chat-dock.left{right:auto;left:14px}
  .chat-fab-bot{margin-bottom:-13px}
  .chat-fab-bot img{width:76px;height:76px}
  .chat-fab-name{font-size:10px;padding:1.5px 8px;bottom:9px}
  .chat-fab-txt{height:40px;padding:0 22px;font-size:.88rem}
  .chat-panel{width:calc(100vw - 28px);border-radius:16px}
.chat-dock.open .chat-rail{border-radius:16px 0 0 16px;padding:12px 5px;gap:10px}
.chat-rail-it{width:46px}
.chat-rail-ic{width:40px;height:40px}
  .chat-body{max-height:min(52vh,380px);max-height:min(52dvh,380px)}
  .chat-dock.chat-no-sm{display:none}
}

/* ---------- 客服對話（站內即時訊息） ---------- */
.chat-panel{display:flex;flex-direction:column}
/* 單一滾動區：訊息在這裡滑；輸入區吸底固定不動 */.chat-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;display:flex;flex-direction:column}
.chat-compose{flex:none}
.chat-status{display:block;font-size:.74rem;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-msgs{min-height:190px;padding:14px 14px 6px;background:#fff;display:flex;flex-direction:column;gap:9px}
.chat-day{align-self:center;font-size:.7rem;color:var(--muted);background:rgba(17,19,23,.06);border-radius:999px;padding:2px 10px;margin:2px 0}
.chat-row{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.chat-row.me{flex-direction:row-reverse}
.chat-av{width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;margin-bottom:2px}
.chat-av img{display:block;width:20px;height:20px}
.chat-bub{max-width:78%;background:#fff;border:1px solid var(--line);border-radius:16px;padding:9px 12px;box-shadow:0 1px 2px rgba(17,19,23,.05)}
.chat-row.me .chat-bub{background:#fff;border:1.5px solid #d9c48a;border-radius:16px;box-shadow:0 1px 2px rgba(17,19,23,.05)}
.chat-bub .chat-tx{font-size:.86rem;line-height:1.65;color:var(--ink);word-break:break-word;white-space:pre-wrap}
.chat-row.me .chat-bub .chat-tx{display:inline;color:var(--ink);font-weight:500}
.chat-meta{font-size:.66rem;color:var(--muted);margin-top:4px;text-align:right;white-space:nowrap}
.chat-row.me .chat-meta{display:inline;margin:0 0 0 8px;color:#a8842c}
.chat-row.pending{opacity:.62}
.chat-fail{align-self:center;font-size:.76rem;color:#e5484d;background:rgba(229,72,77,.09);border-radius:999px;padding:5px 12px}
.chat-fail button{border:0;background:none;color:#e5484d;font-weight:800;cursor:pointer;font-family:inherit;text-decoration:underline;padding:0 2px}
.chat-quick{display:flex;gap:6px;flex-wrap:wrap;padding:4px 14px 8px;background:#fff}
.chat-chip{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:5px 11px;font-size:.76rem;cursor:pointer;font-family:inherit;transition:.15s}
.chat-chip:hover{border-color:var(--accent);color:var(--accent)}
.chat-in{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 8px;background:#fff;border-top:1px solid var(--line)}
.chat-ta{flex:1;resize:none;border:1.5px solid #d9c48a;border-radius:14px;padding:9px 12px;font-family:inherit;font-size:.86rem;line-height:1.5;max-height:112px;background:#fff;color:var(--ink)}
.chat-ta:focus{outline:none;border-color:var(--accent)}
.chat-send{width:40px;height:40px;flex:none;border:0;border-radius:50%;background:linear-gradient(135deg,#dcb54e,#b8901f);color:#2b2410;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 14px rgba(184,144,31,.35);transition:transform .15s}
.chat-send:hover{transform:translateY(-1px)}
.chat-send:active{transform:scale(.94)}
.chat-tip{font-size:.68rem;color:var(--muted);text-align:center;padding:0 12px 10px;background:#fff}
/* 面板左側社交快捷列（小啦／訂單／LINE／FB／WA／IG），展開時與面板拼成同一張白卡 */
.chat-rail{display:none;flex-direction:column;gap:12px;pointer-events:auto;padding:16px 7px;align-items:center;background:#fff;border:1px solid var(--line);border-right:0;border-radius:18px 0 0 18px}
.chat-dock.open .chat-rail{display:flex}
.chat-dock.open .chat-panel{border-radius:0 18px 18px 0}
.chat-rail-it{display:flex;flex-direction:column;align-items:center;gap:4px;width:50px;background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-decoration:none}
.chat-rail-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;box-shadow:0 4px 10px rgba(17,19,23,.16);border:1.5px solid #fff;transition:transform .15s}
.chat-rail-it:hover .chat-rail-ic{transform:translateY(-2px)}
.chat-rail-ic.rail-gold{background:linear-gradient(135deg,#e6c96b,#c9a54a);border-radius:50%;overflow:hidden}
.chat-rail-ic.rail-gold img{width:32px;height:32px}
.chat-rail-ic.rail-gold svg{display:block}
.chat-rail-ic.rail-dark{background:#15171b}
.chat-rail-ic.rail-ig{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.chat-rail-ic .chat-mark{font-size:11px;font-weight:800;letter-spacing:.02em}
.chat-rail-tx{font-size:.64rem;color:var(--muted);line-height:1.2;max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-rail-bot .chat-rail-tx{color:var(--accent);font-weight:800}
.chat-start{padding:16px 16px 14px;background:var(--bg);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.chat-start b{font-size:.88rem;color:var(--ink)}
.chat-start input{height:40px;border:1.5px solid var(--line);border-radius:11px;padding:0 12px;font-family:inherit;font-size:.86rem;background:var(--card);color:var(--ink)}
.chat-start input:focus{outline:none;border-color:var(--accent)}
.chat-go-start{height:42px;border:0;border-radius:999px;background:var(--gold-grad);color:#1b2432;font-weight:800;font-size:.9rem;font-family:inherit;cursor:pointer}
.chat-note{padding:8px 14px;font-size:.73rem;color:#8a6d1d;background:var(--accent-soft);text-align:center}
.chat-alt{border-top:1px solid var(--line);background:var(--card)}
.chat-alt-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:none;border:0;padding:11px 14px;font-family:inherit;font-size:.8rem;font-weight:700;color:var(--muted);cursor:pointer}
.chat-alt-toggle:hover{color:var(--ink)}
.chat-alt-caret{transition:transform .2s}
.chat-alt.open .chat-alt-caret{transform:rotate(180deg)}
.chat-alt-list{display:none;padding:0 12px 12px}
.chat-alt.open .chat-alt-list{display:grid;gap:9px}
.chat-dot.num{width:auto;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;font-size:.68rem;font-weight:800;color:#fff;top:2px;right:4px;border-width:2px;animation:none;line-height:1}
.chat-live .chat-panel{width:min(380px,calc(100vw - 40px));height:min(560px,calc(100vh - 190px));height:min(560px,calc(100dvh - 190px));max-height:min(86dvh,780px);overflow:hidden}
@media (max-width:720px){
  /* 手機面板拉長：最小 460px；上限＝視窗減去底部導覽列＋客服按鈕的安全值，不會超出螢幕 */
  .chat-live .chat-panel{width:calc(100vw - 28px);min-height:min(460px,calc(100dvh - 210px - env(safe-area-inset-bottom)));max-height:calc(100vh - 200px - env(safe-area-inset-bottom));max-height:calc(100dvh - 200px - env(safe-area-inset-bottom))}
  .chat-msgs{min-height:150px}
  .chat-bub{max-width:84%}
  .chat-quick{padding:4px 12px 8px}
  .chat-in{padding:9px 10px 7px}
  .chat-ta{font-size:16px}
}
/* 點「聯繫方式」時底部迷你列閃一下提示位置（已移除第三方管道，保留動畫備用） */

/* 客服視窗開啟：手機端鎖住背景滾動（面板獨立，滑不會動到背後網頁；桌機不受影響） */
@media (max-width:720px){
  html.chat-lock,html.chat-lock body{overflow:hidden;height:100%}
}

/* 旺旺式工具欄：輸入框下方一排功能圖示 */
.chat-tools{display:flex;gap:2px;padding:2px 8px 0;background:var(--bg)}
.chat-tool{display:inline-flex;align-items:center;gap:5px;border:0;background:none;padding:6px 9px;border-radius:9px;font-family:inherit;font-size:.7rem;color:var(--muted);cursor:pointer;transition:color .15s,background .15s,transform .1s}
.chat-tool svg{width:15px;height:15px;fill:currentColor;flex:none}
.chat-tool:hover{background:var(--card);color:var(--ink)}
.chat-tool.on{color:var(--accent);background:var(--card)}
.chat-tool:active{transform:scale(.94)}

/* 手機端旺旺式近滿版聊天頁：打開時面板從底部升起佔滿畫面，懸浮鈕暫時隱藏 */
@media (max-width:720px){
  .chat-dock.open{left:0;right:0;bottom:0;gap:0;align-items:stretch}
  .chat-dock.open .chat-panel{width:100%;min-height:0;height:calc(100vh - 52px);height:calc(100dvh - 52px - env(safe-area-inset-top));max-height:none;border-radius:18px 18px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transform-origin:bottom center}
  .chat-dock.open .chat-fab{display:none}
}
.chat-live .chat-panel{overflow:hidden}

/* ---------- 後台：客服訊息中心 ---------- */
.ca-hd-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;margin-left:10px;border-radius:999px;background:#e5484d;color:#fff;font-size:.76rem;font-weight:800;vertical-align:middle}
.ca-hd-badge.hidden{display:none}
.ca-grid{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start}
.ca-side{padding:0;overflow:hidden;display:flex;flex-direction:column;height:min(74vh,720px)}
.ca-search{padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.ca-search input{width:100%;height:40px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;font-family:inherit;font-size:.86rem;background:var(--card);color:var(--ink)}
.ca-search input:focus{outline:none;border-color:var(--accent)}
.ca-filters{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--line)}
.ca-threads{overflow-y:auto;flex:1}
.ca-row{width:100%;display:flex;align-items:center;gap:10px;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid var(--line);background:none;font-family:inherit;cursor:pointer;position:relative;transition:background .15s}
.ca-row:hover{background:var(--brand-soft)}
.ca-row.on{background:var(--brand-soft);box-shadow:inset 3px 0 0 var(--accent)}
.ca-row.unread .ca-row-top b{font-weight:800}
.ca-av{width:36px;height:36px;flex:none;border-radius:50%;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-weight:800;font-size:.9rem}
.ca-row.on .ca-av{background:var(--gold-grad);color:#1b2432}
.ca-row-tx{flex:1;min-width:0}
.ca-row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ca-row-top b{font-size:.88rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ca-row-top i{font-style:normal;font-size:.7rem;color:var(--muted);white-space:nowrap;flex:none}
.ca-row-last{display:block;font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.ca-row-last em{font-style:normal;color:var(--accent);font-weight:700}
.ca-badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#e5484d;color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center}
.ca-closed{flex:none;font-size:.68rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 7px}
.ca-main{padding:0;display:flex;flex-direction:column;height:min(74vh,720px);overflow:hidden}
.ca-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:30px}
.ca-empty b{color:var(--ink)}
.ca-empty-ic{font-size:2rem}
.ca-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--card)}
.ca-head-tx b{display:block;font-size:1rem;color:var(--ink)}
.ca-sub{display:block;font-size:.76rem;color:var(--muted);margin-top:3px;word-break:break-all}
.ca-head-acts{display:flex;gap:8px;flex:none;flex-wrap:wrap}
.ca-msgs{flex:1;overflow-y:auto;padding:16px;background:var(--bg);display:flex;flex-direction:column;gap:9px}
.ca-compose{border-top:1px solid var(--line);background:var(--card);padding:12px 16px 14px}
.ca-canned{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px}
.ca-chip{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:5px 11px;font-size:.76rem;cursor:pointer;font-family:inherit}
.ca-chip:hover{border-color:var(--accent);color:var(--accent)}
.ca-input{display:flex;gap:9px;align-items:flex-end}
.ca-input textarea{flex:1;resize:vertical;min-height:52px;max-height:170px;border:1.5px solid var(--line);border-radius:12px;padding:10px 12px;font-family:inherit;font-size:.88rem;line-height:1.55;background:var(--bg);color:var(--ink)}
.ca-input textarea:focus{outline:none;border-color:var(--accent)}
.ca-send{flex:none;height:46px;padding:0 22px}
.ca-hint{font-size:.72rem;color:var(--muted);margin:9px 0 0}
@media (max-width:980px){
  .ca-grid{grid-template-columns:1fr}
  .ca-side{height:auto;max-height:44vh;max-height:44dvh}
  .ca-main{height:auto;min-height:60vh;min-height:60dvh}
}
/* 後台客服中心：手機上改為上下堆疊、訊息區縮短 */
@media (max-width:720px){
  .ca-side{max-height:38vh;max-height:38dvh}
  .ca-threads{max-height:38vh;max-height:38dvh}
  .ca-row{padding:11px 12px}
  .ca-head{flex-direction:column;align-items:stretch;padding:12px 14px}
  .ca-head-acts{justify-content:flex-start}
  .ca-msgs{padding:12px}
  .ca-compose{padding:10px 12px 12px}
  .ca-input{flex-direction:column;align-items:stretch}
  .ca-input textarea{min-height:46px;max-height:120px}
  .ca-send{width:100%;height:44px}
  .ca-search input{height:42px}
}

/* ---------- 後台：商品管理 ---------- */
.btn-danger{background:#fdecec;color:#c62828;border:1px solid #f5c6c6}
.btn-danger:hover{background:#c62828;color:#fff;border-color:#c62828}
.pm-hd-acts{display:flex;gap:10px;flex-wrap:wrap}
.pm-toolbar{display:grid;grid-template-columns:minmax(200px,1.6fr) repeat(3,minmax(130px,1fr)) auto;gap:10px;align-items:center;padding:16px}
.pm-toolbar input,.pm-toolbar select{height:42px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;font-family:inherit;font-size:.88rem;background:var(--card);color:var(--ink);width:100%}
.pm-toolbar input:focus,.pm-toolbar select:focus{outline:none;border-color:var(--accent)}
.pm-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--brand);color:#fff;border-radius:12px;padding:12px 16px;margin:-8px 0 14px;box-shadow:var(--sh-1)}
.pm-bulk b{font-size:1.05rem}
.pm-bulk .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.pm-bulk .btn-ghost:hover{background:rgba(255,255,255,.22)}
.pm-linkbtn{background:none;border:0;color:#d8d3c5;font-family:inherit;font-size:.84rem;cursor:pointer;text-decoration:underline;padding:0 4px}
.pm-empty{padding:60px 20px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.pm-empty b{color:var(--ink);font-size:1.05rem}
.pm-empty p{margin:0;font-size:.86rem}

.pm-head,.pm-row{display:grid;grid-template-columns:38px minmax(200px,2.4fr) 108px 128px 96px 116px 210px;gap:12px;align-items:center}
.pm-head{padding:12px 18px;background:var(--brand-soft);border-bottom:1px solid var(--line);font-size:.76rem;font-weight:800;color:var(--muted);letter-spacing:.03em}
.pm-row{padding:12px 18px;border-bottom:1px solid var(--line);background:var(--card);transition:background .14s}
.pm-row:last-child{border-bottom:0}
.pm-row:hover{background:var(--brand-soft)}
.pm-row.off{opacity:.62}
.pm-ck{display:grid;place-items:center}
.pm-ck input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.pm-prod{display:flex;align-items:center;gap:12px;min-width:0}
.pm-thumb{width:52px;height:52px;flex:none;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff}
.pm-prod-tx{min-width:0}
.pm-prod-tx b{display:block;font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-prod-tx span{display:block;font-size:.74rem;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm-hot{font-style:normal;color:#b45309;font-weight:700}
.pm-cat{font-size:.82rem;color:var(--body)}
.pm-cell{display:flex;align-items:center;gap:4px}
.pm-cell i{font-style:normal;font-size:.74rem;color:var(--muted)}
.pm-inp{width:100%;height:36px;border:1.5px solid var(--line);border-radius:8px;padding:0 9px;font-family:inherit;font-size:.86rem;background:var(--card);color:var(--ink)}
.pm-inp:focus{outline:none;border-color:var(--accent)}
.pm-st{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.pm-switch{position:relative;display:inline-block;width:42px;height:24px;flex:none;cursor:pointer}
.pm-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.pm-switch span{position:absolute;inset:0;border-radius:999px;background:#c9c5bc;transition:.18s}
.pm-switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.18s}
.pm-switch input:checked + span{background:var(--accent)}
.pm-switch input:checked + span::after{transform:translateX(18px)}
.pm-acts{display:flex;gap:6px;flex-wrap:wrap}
.pm-btn{height:32px;padding:0 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font-family:inherit;font-size:.8rem;font-weight:600;cursor:pointer;transition:.14s}
.pm-btn:hover{border-color:var(--brand);color:var(--brand)}
.pm-btn.danger:hover{border-color:#c62828;color:#c62828}

/* 編輯抽屜 */
.pm-mask{position:fixed;inset:0;background:rgba(17,19,23,.44);z-index:90;animation:pmFade .18s ease}
@keyframes pmFade{from{opacity:0}to{opacity:1}}
.pm-drawer{position:fixed;top:0;right:0;height:100%;width:min(620px,100vw);background:var(--card);z-index:91;display:flex;flex-direction:column;box-shadow:-18px 0 52px rgba(17,19,23,.24);transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.9,.25,1);visibility:hidden}
.pm-drawer.open{transform:none;visibility:visible}
.pm-drawer-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#2b2f35,var(--brand));color:#fff;flex:none}
.pm-drawer-hd b{display:block;font-size:1.08rem;color:#fff}
.pm-drawer-hd span{display:block;font-size:.78rem;color:#cfc9b8;margin-top:3px}
.pm-x{background:rgba(255,255,255,.14);border:0;color:#fff;width:32px;height:32px;border-radius:50%;font-size:1.25rem;line-height:1;cursor:pointer;flex:none;font-family:inherit}
.pm-x:hover{background:rgba(255,255,255,.3)}
.pm-drawer-bd{flex:1;overflow-y:auto;padding:20px 22px}
.pm-drawer-ft{flex:none;display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line);background:var(--brand-soft)}
.pm-sec{margin-bottom:22px;padding-bottom:20px;border-bottom:1px dashed var(--line)}
.pm-sec:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.pm-sec h4{margin:0 0 12px;font-size:.94rem;color:var(--ink);display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pm-sec h4 small{font-size:.74rem;font-weight:500;color:var(--muted)}
.pm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pm-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.pm-req{font-size:.7rem;font-weight:700;color:#c62828;background:#fdecec;border-radius:5px;padding:1px 6px}
.pm-hint{font-size:.76rem;color:var(--muted);margin:6px 0 0;line-height:1.6}
.pm-hint a{color:var(--accent-2);font-weight:700}
.pm-check{display:flex;align-items:center;gap:9px;margin:10px 0 0;font-size:.88rem;color:var(--body);cursor:pointer}
.pm-check input{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.pm-imgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:10px;margin-bottom:12px}
.pm-img{position:relative;margin:0;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.pm-img.cover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pm-img img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.pm-img figcaption{position:absolute;top:6px;left:6px;background:var(--gold-grad);color:#1b2432;font-size:.68rem;font-weight:800;border-radius:6px;padding:2px 7px}
.pm-img-acts{display:flex;border-top:1px solid var(--line)}
.pm-img-acts button{flex:1;height:30px;border:0;border-right:1px solid var(--line);background:var(--card);color:var(--muted);font-family:inherit;font-size:.78rem;cursor:pointer}
.pm-img-acts button:last-child{border-right:0}
.pm-img-acts button:hover{background:var(--brand-soft);color:var(--brand)}
.pm-img-acts button.danger:hover{background:#fdecec;color:#c62828}
.pm-drop{border:2px dashed var(--line);border-radius:12px;padding:20px;text-align:center;cursor:pointer;background:var(--bg);transition:.16s}
.pm-drop:hover,.pm-drop.on{border-color:var(--accent);background:var(--accent-soft)}
.pm-drop.busy{opacity:.7;pointer-events:none}
.pm-drop b{display:block;color:var(--ink);font-size:.9rem;margin-bottom:4px}
.pm-drop small{display:block;color:var(--muted);font-size:.74rem;margin-top:5px}
.pm-addurl{display:flex;gap:8px;margin-top:10px}
.pm-addurl input{flex:1;height:40px;border:1.5px solid var(--line);border-radius:10px;padding:0 12px;font-family:inherit;font-size:.84rem;background:var(--card);color:var(--ink)}
.pm-addurl input:focus{outline:none;border-color:var(--accent)}
.pm-spec{display:grid;grid-template-columns:minmax(110px,1fr) minmax(140px,1.6fr) 36px;gap:8px;margin-bottom:8px}
.pm-spec input{height:40px;border:1.5px solid var(--line);border-radius:10px;padding:0 11px;font-family:inherit;font-size:.85rem;background:var(--card);color:var(--ink)}
.pm-spec input:focus{outline:none;border-color:var(--accent)}
.pm-x2{border:1.5px solid var(--line);background:var(--card);color:var(--muted);border-radius:10px;cursor:pointer;font-size:.9rem;font-family:inherit}
.pm-x2:hover{border-color:#c62828;color:#c62828}
@media (max-width:1180px){
  .pm-toolbar{grid-template-columns:1fr 1fr;gap:10px}
  .pm-toolbar input{grid-column:1/-1}
  .pm-toolbar #pm-new{grid-column:1/-1}
}
@media (max-width:980px){
  .pm-head{display:none}
  .pm-list{display:grid;gap:12px;padding:14px}
  .pm-row{grid-template-columns:38px 1fr;gap:10px 12px;border:1px solid var(--line);border-radius:14px;padding:14px}
  .pm-row .pm-prod{grid-column:2}
  .pm-cat,.pm-cell,.pm-st,.pm-acts{grid-column:2}
  .pm-acts{justify-content:flex-start}
  .pm-grid3{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pm-drawer-bd{padding:16px}
  .pm-grid2,.pm-grid3{grid-template-columns:1fr}
  .pm-imgs{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
}
/* 後台商品管理：手機單欄、工具列與編輯抽屜全寬 */
@media (max-width:720px){
  .pm-toolbar{grid-template-columns:1fr;padding:14px}
  .pm-toolbar input,.pm-toolbar #pm-new{grid-column:1/-1}
  .pm-row{padding:12px;grid-template-columns:32px 1fr}
  .pm-acts .pm-btn{flex:1 1 auto;height:36px}
  .pm-drawer{width:100vw;border-radius:0}
  .pm-drawer-hd{padding:14px 16px}
  .pm-drawer-bd{padding:14px}
  .pm-drawer-ft{padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .pm-drawer-ft .btn{flex:1}
  .pm-addurl{display:grid;grid-template-columns:1fr;gap:8px}
  .pm-addurl button{height:42px}
  .pm-spec{grid-template-columns:1fr 1fr 34px;gap:6px}
  .pm-spec input{font-size:16px}
  .pm-x2{height:40px}
}

/* ==========================================================================
   PWA 安裝 App 板塊 + standalone（App 模式）適配
   ========================================================================== */
.install-card{position:relative;display:flex;align-items:center;gap:12px;margin-top:26px;
  padding:14px 16px;background:linear-gradient(135deg,rgba(212,175,55,.14),rgba(20,22,26,.05));
  border:1px solid var(--gold-line);border-radius:16px}
.install-card[hidden]{display:none}
.ic-shield{width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,#2b2f35,#14161a);
  color:#d4af37;display:grid;place-items:center;flex:none;border:1px solid rgba(212,175,55,.4)}
.ic-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ic-tx b{color:var(--ink);font-size:.95rem;line-height:1.3}
.ic-tx span{color:var(--muted);font-size:.76rem;line-height:1.55}
.ic-x{position:absolute;top:4px;right:6px;border:0;background:none;color:var(--muted);
  font-size:1.25rem;line-height:1;cursor:pointer;padding:4px 8px}
@media (min-width:721px){.install-card{display:none}}
/* 已安裝（App 模式）：板塊隱藏；iOS 狀態列黑金條 + 內容讓出安全區 */
@media (display-mode:standalone){
  .install-card{display:none !important}
  header.site{padding-top:calc(env(safe-area-inset-top) + 6px)}
  header.site::before{content:"";position:absolute;top:0;left:0;right:0;
    height:env(safe-area-inset-top);background:#14161a}
}

/* ================= 管理中心：首頁輪播 + 顧客好評 ================= */
.cms-slides{position:relative;max-width:1200px;margin:18px auto 0;padding:0 20px}
.cms-slides-track{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1200/360;background:#e8e4da;box-shadow:0 14px 34px rgba(15,43,71,.14)}
.cms-slides-item{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}
.cms-slides-item.on{opacity:1;pointer-events:auto}
.cms-slides-item img{width:100%;height:100%;object-fit:cover;display:block}
.cms-slides-cap{position:absolute;left:0;right:0;bottom:0;padding:34px 22px 14px;color:#fff;font-weight:600;font-size:1.05rem;background:linear-gradient(transparent,rgba(10,14,20,.66))}
.cms-slides-dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:7px;z-index:2}
.cms-slides-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s,transform .2s}
.cms-slides-dots button.on{background:#fff;transform:scale(1.25)}
.rev-sec{padding:64px 0 30px}
.rev-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.rev-card{background:var(--card,#fff);border:1px solid rgba(15,43,71,.08);border-radius:16px;padding:22px;box-shadow:0 8px 22px rgba(15,43,71,.06)}
.rev-stars{color:#d4af37;font-size:1.05rem;letter-spacing:2px;margin-bottom:10px}
.rev-text{margin:0 0 14px;line-height:1.75;color:var(--body-text,#334155);font-size:.95rem}
.rev-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.85rem}
.rev-meta b{color:var(--ink,#0f172a)}
@media (max-width:720px){.cms-slides{margin-top:12px;padding:0 12px}.cms-slides-track{aspect-ratio:1200/520;border-radius:14px}.rev-sec{padding:44px 0 18px}}

/* ---------------- LINE 雙通道（ID／QR Code）加好友彈窗 ---------------- */
.socline-mask{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;background:rgba(8,6,16,.62);padding:20px;backdrop-filter:blur(3px)}
.socline-mask[hidden]{display:none}
.socline-box{position:relative;background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-radius:20px;padding:22px 18px 20px;max-width:360px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.55)}
.socline-x{position:absolute;top:8px;right:14px;background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted,#64748b);cursor:pointer;font-family:inherit;z-index:2}
.socline-x:hover{color:var(--ink)}
.socline-qr{display:flex;flex-direction:column;align-items:center;gap:10px}
.socline-qr img{width:100%;max-width:220px;aspect-ratio:1/1;object-fit:contain;border-radius:16px;background:#fff;padding:10px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.socline-qr-tip{font-size:.74rem;line-height:1.55;color:var(--muted);text-align:center}
.socline-idrow{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 10px 10px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--gold-line,rgba(217,180,74,.45))}
.socline-idrow-lb{flex:none;font-size:.76rem;letter-spacing:.08em;color:var(--muted)}
.socline-idrow-val{min-width:0;font-size:1.12rem;font-weight:800;color:var(--accent);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.socline-copy{flex:none;margin-left:auto;border:0;border-radius:999px;padding:7px 15px;font-family:inherit;font-size:.8rem;font-weight:800;color:#1a0f2b;background:var(--gold-grad);cursor:pointer;transition:filter .15s}
.socline-copy:hover{filter:brightness(1.08)}
.socline-note{font-size:.73rem;line-height:1.6;color:var(--muted);border:1px dashed var(--line,#e2e8f0);border-radius:10px;padding:8px 11px;margin-top:12px}
.socline-open{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;padding:14px 16px;border-radius:14px;background:#06c755;color:#fff;font-weight:800;font-size:1.02rem;text-decoration:none;box-shadow:0 10px 24px rgba(6,199,85,.28);transition:filter .15s}
.socline-open:hover{filter:brightness(1.07)}
.socline-open-ic svg{width:22px;height:22px;display:block}
.socline-add{display:block;width:100%;margin-top:10px;padding:14px 16px;border:0;border-radius:14px;font-family:inherit;font-weight:800;font-size:1.02rem;color:#1a0f2b;background:var(--gold-grad);cursor:pointer;box-shadow:0 10px 24px rgba(217,180,74,.22);transition:filter .15s}
.socline-add:hover{filter:brightness(1.06)}

/* ==========================================================================
   手機版商品區 —— 寶貝／分類雙頁籤（≤720px 才顯示；桌面版完全不受影響）
   版面參考天貓：四方形商品圖、兩欄格、兩行短標題、強調色價格
   ========================================================================== */
.m-prod{display:none}
.m-prod .m-tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin:2px 0 14px}
.m-prod .m-tab{appearance:none;background:none;border:0;padding:10px 2px 11px;font-size:.98rem;font-weight:700;color:var(--muted);position:relative;cursor:pointer;font-family:inherit}
.m-prod .m-tab.on{color:var(--ink)}
.m-prod .m-tab.on::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-1px;width:28px;height:3px;border-radius:2px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.m-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.m-card{display:block;background:#fff;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;text-decoration:none}
.m-card:active{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.m-card .m-img{position:relative;display:block;aspect-ratio:1/1;background:#faf7f2}
.m-card .m-img img{width:100%;height:100%;object-fit:cover;display:block}
.m-card .m-out{position:absolute;left:0;right:0;bottom:0;background:rgba(20,22,26,.62);color:#fff;font-size:.72rem;text-align:center;padding:3px 0}
.m-card .m-body{display:block;padding:8px 10px 11px}
.m-card .m-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.8rem;line-height:1.38;font-weight:600;color:var(--ink);min-height:2.76em}
.m-card .m-price{display:block;margin-top:7px;font-size:.98rem;font-weight:900;color:var(--accent)}
.m-card .m-was{font-size:.7rem;color:var(--faint);text-decoration:line-through;font-weight:400;margin-left:5px}
.m-more{display:block;width:100%;margin:14px 0 2px;padding:10px;border:1px solid var(--line);background:#fff;border-radius:10px;color:var(--body);font-size:.85rem;font-weight:600;cursor:pointer;font-family:inherit}
.m-catwrap{display:flex;gap:10px;align-items:flex-start}
.m-cats{width:88px;flex:none;background:#f7f5f0;border-radius:12px;overflow:hidden}
.m-cats .m-cat{display:block;width:100%;border:0;background:none;padding:13px 4px;font-size:.8rem;font-weight:600;color:var(--body);position:relative;cursor:pointer;font-family:inherit;text-align:center}
.m-cats .m-cat.on{background:#fff;color:var(--accent-2);font-weight:800}
.m-cats .m-cat.on::before{content:'';position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
.m-catmain{flex:1;min-width:0}
.m-prod[hidden],.m-prod [hidden]{display:none!important}
@media (max-width:720px){
  .m-prod{display:block}
  .desk-only{display:none!important}
  /* 雙頁籤佈局取代舊的「左類別欄」App 式 grid，還原成一般區塊流（同特異性、後者勝） */
  #products .wrap{display:block}
}

/* ==========================================================================
   商品詳情頁手機端修復（≤720px）
   根因：grid item 預設 min-width:auto，.pd 單列被縮圖排/min-content 撐到
   540px 固定列寬，導致整頁橫向溢出。改 minmax(0,1fr) 允許壓縮。
   ========================================================================== */
@media (max-width:720px){
  .pd{grid-template-columns:minmax(0,1fr)!important;gap:20px;padding-top:18px}
  .pd .gallery{max-width:100%!important;width:100%;margin:0}
  .gallery .main{border-radius:14px}
  .gallery .main img{width:100%;height:auto;max-height:78vh;object-fit:contain;background:#faf7f2}
  .thumbs{flex-wrap:wrap;gap:8px}
  .thumbs .thumb{width:58px;height:58px;flex:none;border-radius:10px;overflow:hidden;border:1px solid var(--line);padding:0;background:#fff;cursor:pointer}
  .thumbs .thumb.on{border-color:var(--accent)}
  .thumbs .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .pd-info h1{font-size:1.3rem;line-height:1.35}
  .pd-meta{flex-wrap:wrap;gap:6px}
  .price-box{padding:12px 14px}
  .price-box .now{font-size:1.55rem}
  .buy-row .btn-primary{min-width:0}
  .spec-table{display:block;overflow-x:auto}
  .notice{font-size:.82rem;line-height:1.6}
  .pd .prose img{max-width:100%;height:auto}
}

/* ==========================================================================
   手機端首頁精修（≤720px）
   1) Why Us 三面板改橫排一排 + 縮小
   2) Hero CTA 按鈕與藥丸縮小置中對齊
   ========================================================================== */
@media (max-width:720px){
  /* Why Us：三張變橫排一小排 */
  .grid-3{grid-template-columns:repeat(3,1fr);gap:8px}
  .panel{padding:11px 10px;border-radius:12px}
  .panel + .panel{margin-top:0}
  .panel h3{font-size:.68rem;gap:5px;margin-bottom:7px;line-height:1.35;align-items:flex-start}
  .panel h3 .step{width:17px;height:17px;font-size:.6rem;flex:none;margin-top:1px}
  .panel p{margin:0;font-size:.58rem;line-height:1.55;color:var(--body);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

  /* Hero CTA：縮小、置中、對齊 */
  .hero-cta-row{justify-content:center;gap:10px}
  .hero-copy .btn{height:40px;padding:0 18px;font-size:.85rem;border-radius:22px}
  .hero-copy .btn-primary{box-shadow:0 4px 12px rgba(255,80,0,.22)}
  .badge-row{justify-content:center;gap:7px;margin-top:16px}
  .badge-row .pill{font-size:.68rem;padding:5px 11px;gap:5px;border-radius:20px}
}

/* ==========================================================================
   手機端二輪精修（≤720px）
   1) Hero 藥丸：4 個縮小剛好放一排（均分）
   2) Trust 四卡：縮小放一排
   3) 顧客好評：縮小、雙列緊湊
   ========================================================================== */
@media (max-width:720px){
  /* 1) Hero 藥丸一排 4 個 */
  .badge-row{flex-wrap:nowrap;gap:5px;margin-top:14px}
  .badge-row .pill{flex:1 1 0;min-width:0;justify-content:center;text-align:center;white-space:normal;font-size:.55rem;line-height:1.25;padding:5px 4px;gap:3px;border-radius:16px}

  /* 2) Trust 四卡一排 */
  .trust{grid-template-columns:repeat(4,1fr);gap:6px}
  .trust .item{padding:9px 6px;gap:6px;border-radius:11px}
  .trust .ic{width:26px;height:26px;border-radius:8px;font-size:14px}
  .trust b{font-size:.58rem;line-height:1.3}
  .trust span{font-size:.5rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* 3) 顧客好評縮小雙列 */
  .rev-sec{padding:34px 0 18px}
  .rev-sec .sec-head h2{font-size:1.15rem}
  .rev-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .rev-card{padding:10px 11px;border-radius:12px}
  .rev-stars{font-size:.72rem;letter-spacing:1px;margin-bottom:5px}
  .rev-text{font-size:.6rem;line-height:1.55;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .rev-meta{font-size:.55rem;gap:6px}
}

/* ==========================================================================
   手機端頁尾縮小排版（≤720px）
   品牌區塊置上；商品分類／客戶服務／法律條款三個連結欄縮小合一排，
   取消折疊選單，連結全部直接顯示，整體高度大幅縮短。
   ========================================================================== */
@media (max-width:720px){
  footer.site{margin-top:30px}
  footer.site .cols{grid-template-columns:repeat(3,1fr);gap:10px;padding:16px 0 6px;align-items:start}
  .fcol{border-bottom:0}
  /* 品牌欄橫跨整排，與下方連結欄之間一條細線 */
  .fcol-brand{grid-column:1/-1;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--line)}
  footer.site .logo{font-size:1.02rem}
  .fcol-brand .logo-mark{width:46px;height:46px;border-radius:14px}
  .fcol-brand p{max-width:none!important;font-size:.72rem;line-height:1.55;margin-top:8px!important;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  /* 三個連結欄：標題縮小，連結直接展開不折疊 */
  footer.site h4{font-size:.74rem;margin-bottom:0}
  .fcol-t{padding:0 0 6px;cursor:default;-webkit-tap-highlight-color:transparent}
  .fcol-t .fv{display:none}
  .fcol-b{display:block!important;padding:0}
  footer.site a{padding:3px 0;font-size:.66rem;line-height:1.45}
  .foot-bottom{padding:12px 0 calc(12px + env(safe-area-inset-bottom));font-size:.62rem;
    justify-content:center;text-align:center;gap:4px 12px}
}

/* ==========================================================================
   手機端「分類」頁：左側類目欄吸頂，不跟著商品一起滾動（≤720px）
   偏移量 --m-stick-top 由 index.html 內聯腳本實測手機站頭高度後寫入
   （含 notch 安全區），避免類目欄被吸頂站頭蓋住；欄高超過餘值時欄內自滾。
   ========================================================================== */
@media (max-width:720px){
  .m-cats{position:sticky;top:var(--m-stick-top,70px);
    max-height:calc(100vh - var(--m-stick-top,70px) - 14px);
    max-height:calc(100dvh - var(--m-stick-top,70px) - 14px);
    overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ---------- 賣場入口（前台） ---------- */
/* 以下三個入口全部由 JS 在「賣場模式」（已登入賣場）下才注入，顧客看不到；
   未登入者由頁頭 logo 連點 6 下的隱藏入口進入賣場模式 */
.topbar-links .seller-mode{color:var(--accent);font-weight:800;white-space:nowrap;text-decoration:none}
/* 蓋過 .topbar a:hover{color:#fff}，避免自訂主題淺色頂欄下懸停變白字消失 */
.topbar-links .seller-mode:hover{color:var(--accent-2);text-decoration:underline;text-underline-offset:3px}
/* 「退出賣場」：低調灰字，與金色後台入口區分 */
.topbar-links .seller-exit{color:var(--muted);font-weight:600;white-space:nowrap;text-decoration:none;font-size:.92em}
.topbar-links .seller-exit:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Hero CTA 行「平台運營數據」按鈕：虛線金框，與「購物指南」並排但可區分 */
.seller-data-btn{border-style:dashed;border-color:var(--accent);color:var(--accent-2);font-weight:800}
.seller-data-btn:hover{background:var(--accent-soft);color:var(--accent-2)}
/* 頁尾低調連結 */
.seller-data-link{color:var(--faint);text-decoration:none;font-size:.72rem;opacity:.8}
.seller-data-link:hover{color:var(--accent-2);opacity:1}
@media (max-width:720px){
  .foot-bottom .seller-data-link{font-size:.62rem}
}


/* ---------- 賣場模式：賣家收件匣（接管聊天面板） ---------- */
/* 對話視圖的返回鈕 */
.chat-back{border:0;background:none;color:#fff;font-size:1.35rem;line-height:1;padding:2px 8px 2px 0;cursor:pointer;font-family:inherit}
.chat-back:hover{opacity:.8}
/* 收件匣列表（FB 式） */
.sth-list{display:flex;flex-direction:column}
.sth-item{display:flex;align-items:center;gap:11px;padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
.sth-item:hover{background:var(--bg)}
.sth-item:active{background:#f0ebdf}
.sth-avatar{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1rem}
.sth-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sth-top{display:flex;align-items:baseline;gap:8px}
.sth-top b{flex:1;min-width:0;font-size:.9rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sth-top i{font-style:normal;flex:none;font-size:.66rem;color:var(--faint)}
.sth-last{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sth-unread{flex:none;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e5484d;color:#fff;font-size:.64rem;font-weight:800;display:grid;place-items:center}
.sth-empty{text-align:center;color:var(--faint);font-size:.85rem;padding:44px 18px;line-height:1.8}
.sth-empty small{font-size:.72rem}

/* ---- 收件匣頁簽與篩選（訊息／留言） ---- */
.sth-tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--line);flex:none}
.sth-tab{flex:1;border:none;background:none;padding:11px 4px 9px;font-size:.9rem;font-weight:700;color:var(--muted);cursor:pointer;position:relative}
.sth-tab.on{color:var(--accent)}
.sth-tab.on::after{content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:3px;border-radius:3px;background:var(--accent)}
.sth-tab-n{font-style:normal;display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:5px;padding:0 5px;border-radius:999px;background:#e5484d;color:#fff;font-size:.64rem;font-weight:800;vertical-align:2px}
.sth-chips{display:flex;gap:7px;padding:10px 12px 8px;overflow-x:auto;flex:none;scrollbar-width:none}
.sth-chips::-webkit-scrollbar{display:none}
.sth-chip{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 13px;font-size:.78rem;font-weight:600;color:var(--muted);cursor:pointer}
.sth-chip.on{border-color:var(--accent);background:var(--accent);color:#fff}
.sth-tip2{text-align:center;color:var(--faint);font-size:.72rem;padding:0 16px 10px;flex:none}

/* ---- 手機端：收件匣／對話全螢幕 ---- */
@media (max-width:720px){
  #chat-dock.sth-mode.open{align-items:stretch;justify-content:stretch}
  #chat-dock.sth-mode.open .chat-panel{position:fixed;inset:0;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;display:flex;flex-direction:column}
  /* 全屏聊天開啟時隱藏底部導覽列（參考設計為全屏對話，無 tabbar） */
  body.sth-open .tabbar{display:none}
  /* 隱藏傳統滾動條（參考設計無滾動條；真機 overlay 滾動條不受影響） */
  #chat-dock.sth-mode.open .chat-scroll{scrollbar-width:none;-ms-overflow-style:none}
  #chat-dock.sth-mode.open .chat-scroll::-webkit-scrollbar{display:none}
  #chat-dock.sth-mode.open .chat-panel .chat-head{background:linear-gradient(135deg,var(--accent-2,#c2410c),var(--accent,#ff5000));color:#fff;border-bottom:none;padding:14px 12px}
  #chat-dock.sth-mode.open .chat-panel .chat-head b{color:#fff}
  #chat-dock.sth-mode.open .chat-panel .chat-head .chat-status{color:rgba(255,255,255,.82)}
  #chat-dock.sth-mode.open .chat-panel .chat-head .chat-close,
  #chat-dock.sth-mode.open .chat-panel .chat-head .chat-back{color:#fff}
  #chat-dock.sth-mode.open .chat-panel .chat-head .chat-close:hover,
  #chat-dock.sth-mode.open .chat-panel .chat-head .chat-back:hover{background:rgba(255,255,255,.18)}
  #chat-dock.sth-mode.open .chat-panel .chat-compose{border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  #chat-dock.sth-mode.open .chat-panel .chat-in{background:var(--line-2,#f4f0e8);border-radius:999px;padding:4px 4px 4px 14px}
  #chat-dock.sth-mode.open .chat-panel .chat-ta{background:transparent;border:none;box-shadow:none}
  #chat-dock.sth-mode.open .chat-panel .chat-send{width:40px;height:40px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
  #chat-dock.sth-mode.open .chat-panel .chat-tip{color:var(--faint);font-size:.7rem;text-align:center;margin-top:6px}
  #chat-dock.sth-mode.open .chat-panel .sth-avatar{width:46px;height:46px;font-size:1.05rem}
  #chat-dock.sth-mode.open .chat-panel .sth-item{padding:12px 4px;border-bottom:1px solid var(--line-2,#f4f0e8)}
  #chat-dock.sth-mode.open .chat-panel .sth-top b{font-size:.94rem}
  #chat-dock.sth-mode.open .chat-panel .sth-top i{font-size:.72rem;color:var(--faint)}
  #chat-dock.sth-mode.open .chat-panel .sth-last{font-size:.8rem}
  #chat-dock.sth-mode.open .chat-panel .chat-msgs{padding:16px 12px}
  #chat-dock.sth-mode.open .chat-panel .chat-bub{max-width:76%}
}

/* ---- 賣場模式：平台運營數據區塊（直接內嵌首頁，非彈窗） ---- */
.sdash-sec{margin:34px auto 8px;padding:0 20px;max-width:1200px}
.sdash-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sdash-head h3{margin:0;font-size:1.15rem;display:flex;align-items:baseline;gap:10px}
.sdash-sub{font-size:.72rem;font-weight:500;color:var(--faint);letter-spacing:.04em}
.sdash-refresh{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 14px;font-size:.8rem;color:var(--muted);cursor:pointer}
.sdash-refresh:hover{color:var(--accent);border-color:var(--accent)}
.sdash-loading{text-align:center;color:var(--faint);padding:40px 0;font-size:.9rem}
.sdash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.sdash-card{background:var(--soft,#faf7f1);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.sdash-card span{font-size:.76rem;color:var(--muted)}
.sdash-card b{font-size:1.4rem;color:var(--ink);font-weight:800}
.sdash-card em{font-style:normal;font-size:.72rem;color:var(--faint)}
.sdash-block{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.sdash-block h4{margin:0 0 12px;font-size:.9rem;color:var(--ink)}
.sdash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.sdash-grid{grid-template-columns:1fr}}
.sdash-chart{display:flex;align-items:flex-end;gap:8px;height:110px;padding:0 4px}
.sdash-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}
.sdash-bar{width:100%;max-width:34px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--accent),#e3c98f)}
.sdash-bar-col span{font-size:.68rem;color:var(--faint)}
.sdash-note{margin:10px 0 0;font-size:.74rem;color:var(--faint);text-align:right}
.sdash-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:.85rem}
.sdash-row:last-child{border-bottom:none}
.sdash-row span{color:var(--muted);display:flex;align-items:center;gap:7px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sdash-row b{color:var(--ink);flex:none;margin-left:10px}
.sdash-dot{width:8px;height:8px;border-radius:50%;flex:none}
.sdash-none{color:var(--faint);font-size:.82rem;text-align:center;padding:14px 0;margin:0}


/* ── 客服面板展開態（左側快捷列與面板拼成一張卡）────────────
   必須放在 .chat-live .chat-panel（673 行）之後才能覆蓋它的寬度 */
.chat-dock.open .chat-panel,
.chat-dock.chat-live.open .chat-panel{width:min(380px,calc(100vw - 104px));border-radius:0 18px 18px 0}
.chat-dock.open .chat-rail{border-radius:18px 0 0 18px}
@media (max-width:720px){
  .chat-dock.open .chat-panel,
  .chat-dock.chat-live.open .chat-panel{width:calc(100vw - 108px);border-radius:0 16px 16px 0}
  .chat-dock.open .chat-rail{border-radius:16px 0 0 16px;padding:12px 5px;gap:10px}
}

/* ── 賣家收件匣（賣場模式）是獨立介面 ─────────────────────────
   它復用同一個 #chat-dock 容器，但屬於後台功能，不該繼承前台客服聊天窗
   新增的左側社交列與加寬規則。這裡把它還原成原本的獨立面板。 */
#chat-dock.sth-mode .chat-rail{display:none!important}
@media (min-width:721px){
  #chat-dock.sth-mode.open .chat-panel{width:min(380px,calc(100vw - 40px));border-radius:18px}
}

/* ── 聊天窗結構對齊參考站（5601）：頭部通欄 → 左 roster 58px ＋ 右對話舞台 ── */
.chat-panel{display:flex;flex-direction:column;background:#fff}
.chat-main{flex:1 1 auto;display:flex;min-height:0;min-width:0}
.chat-stage{flex:1 1 auto;display:flex;flex-direction:column;min-width:0;min-height:0}
.chat-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}

/* roster：58px 窄列，32px 圖標，5px 內距（原站數值） */
.chat-dock .chat-rail{display:none;width:58px;flex:none;flex-direction:column;gap:3px;padding:7px 4px;background:#fff;border:0;border-right:1px solid var(--line);border-radius:0;overflow-y:auto;align-items:center}
.chat-dock.open .chat-rail{display:flex}
.chat-rail-it{width:52px;padding:5px 1px;border-radius:11px;border:1.5px solid transparent;gap:4px;background:none}
.chat-rail-ic{width:32px;height:32px;border-radius:10px;border:0;box-shadow:0 3px 7px rgba(17,19,23,.12)}
.chat-rail-ic svg{width:16px;height:16px}
.chat-rail-ic .chat-mark{font-size:9px}
.chat-rail-tx{font-size:.56rem;font-weight:700;color:var(--ink);max-width:52px;line-height:1.1}
.chat-rail-bot{background:var(--accent-soft);border-color:rgba(212,175,55,.45)}
.chat-rail-bot .chat-rail-tx{color:var(--accent)}
.chat-rail-bot .chat-rail-ic{box-shadow:0 3px 8px rgba(184,144,31,.28)}

/* 面板寬度（含 roster）：桌面 396px，手機滿版減邊距 */
.chat-dock.open{gap:0}
.chat-dock.open .chat-panel,
.chat-dock.chat-live.open .chat-panel{width:min(396px,calc(100vw - 44px));border-radius:18px}
@media (max-width:720px){
  .chat-dock.open .chat-panel,
  .chat-dock.chat-live.open .chat-panel{width:calc(100vw - 28px);border-radius:16px}
  .chat-rail{width:52px;padding:6px 4px}
  .chat-rail-ic{width:30px;height:30px;border-radius:9px}
  .chat-rail-tx{font-size:.52rem;max-width:46px}
}

/* 氣泡：10px 圓角＋2px 小尾巴，flex 讓時間與文字同排（參考站做法） */
.chat-bub{max-width:82%;background:#fff;border:1px solid var(--line);border-radius:10px 10px 10px 2px;padding:7px 11px;display:flex;align-items:flex-end;gap:6px}
.chat-row.me .chat-bub{border:1.5px solid #d9c48a;border-radius:10px 10px 2px 10px;background:#fff}
.chat-bub .chat-tx{font-size:.8rem;line-height:1.55}
.chat-row.me .chat-bub .chat-tx{display:block;color:var(--ink);font-weight:500}
.chat-meta{font-size:.6rem;color:var(--muted);margin:0;text-align:right;white-space:nowrap;order:1;flex:none;align-self:flex-end}
.chat-row.me .chat-meta{order:1;color:#9a7b1f}
.chat-row.them .chat-meta{order:-1;text-align:left;color:var(--muted)}

/* 賣家收件匣照舊獨立 */
#chat-dock.sth-mode .chat-rail{display:none!important}
#chat-dock.sth-mode .chat-main{display:block}

/* ── LINE 加好友彈窗：手機端讓 ID 完整顯示（不截斷）────────────── */
.socline-idrow{flex-wrap:wrap;row-gap:8px}
.socline-idrow-val{flex:1 1 140px;white-space:normal;overflow-wrap:anywhere;word-break:break-all;text-overflow:clip;line-height:1.35}
.socline-copy{margin-left:0}
@media (max-width:380px){
  .socline-idrow-val{font-size:1rem}
  .socline-copy{padding:7px 12px}
}