/* 柳敘堂 liu3.com — 樣式表
   視覺判據：清、靜、虛、拙、素。朱砂僅用於印章、價格與 CTA，全頁面積不超過 5%。
   佈局：手機優先（390px 基準），逐級增強至 768 / 1180。 */
:root{
  /* 台灣國學向：宣紙為底、墨為骨、朱砂為神、黃銅為飾、青瓷為綴。
     結構色（頁頭、頁腳、首屏、標題帶）用墨；朱砂只留印章、價格、CTA、分類圓標、通告卡。 */
  --ink:#241F1A; --ink-soft:#6B6157;
  --xuan:#FFFFFF; --card:#FFFFFF;
  --paper:#F7F4ED;
  --xuan-black:#241F1A;
  --panel:#1B1714; --panel-line:rgba(214,196,152,.20);
  --cinnabar:#A62B24; --red:#A62B24; --red-deep:#8A221B;
  --ivory:#FCF3E4;
  --gold:#B08D57; --gold-l:#D9C49B; --gold-soft:#EDE1C7;
  --bronze:#8E6E3C;
  --sand:#E8E1D2;
  --line:rgba(92,76,54,.20); --line-strong:rgba(92,76,54,.36);
  --gold-line:rgba(176,141,87,.52);
  --display:"LXGW WenKai TC","Ma Shan Zheng","LXGW WenKai","Noto Serif TC",serif;
  --serif:"Noto Serif TC","Source Han Serif TC","Songti SC","Noto Serif SC","PMingLiU",serif;
  --sans:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Noto Sans SC",-apple-system,BlinkMacSystemFont,sans-serif;
  --r:3px; --bar:52px; --bottom:64px;
  --shadow:0 10px 30px rgba(36,28,20,.10);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--xuan);color:var(--ink);font:15px/1.85 var(--sans);padding-bottom:calc(var(--bottom) + env(safe-area-inset-bottom,0px))}
body.no-bottombar{padding-bottom:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0;border-radius:0;appearance:none}
button{cursor:pointer}
h1,h2,h3,h4,.serif{font-family:var(--serif);font-weight:400;letter-spacing:.16em}
.brand b,.hero h1,.hero .hero-h,.sec-h h2,.dt h1,footer .cols b{font-family:var(--display);letter-spacing:.12em}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.hair{height:1px;background:var(--line);border:0}
.orn{position:relative;height:1px;background:var(--line);margin:34px 0}
.orn::after{content:"";position:absolute;left:50%;top:-3.5px;width:7px;height:7px;background:var(--xuan);border:1px solid var(--bronze);transform:translateX(-50%) rotate(45deg)}
.seal{display:inline-block;background:var(--cinnabar);color:#fff;font-family:var(--serif);font-size:11px;line-height:1.15;letter-spacing:.2em;padding:7px 5px;writing-mode:vertical-rl;border-radius:2px}
.muted{color:var(--ink-soft)}
.eyebrow{font-size:10.5px;letter-spacing:.3em;color:var(--bronze);text-transform:uppercase}

/* ── 頂部：公告 + 頁頭 ───────────────────────── */
.announce{background:#0D0B0A;color:#C6BDAB;font-size:11px;letter-spacing:.12em;text-align:center;padding:7px 14px}
.announce span{display:none}
.hdr{position:sticky;top:0;z-index:60;background:var(--xuan-black);color:#F1EDE3;border-bottom:1px solid var(--panel-line)}
.hdr-in{display:flex;align-items:center;gap:12px;height:var(--bar);max-width:1180px;margin:0 auto;padding:0 14px}
.brand{display:flex;align-items:baseline;gap:7px;flex:none}
.brand b{font-family:var(--serif);font-size:19px;font-weight:400;letter-spacing:.26em}
.brand i{font-style:normal;font-size:8.5px;letter-spacing:.24em;color:#9C9384}
.hdr-sp{flex:1}
.hdr-btn{position:relative;display:flex;align-items:center;gap:6px;height:36px;padding:0 11px;border:1px solid var(--panel-line);border-radius:var(--r);font-size:11.5px;letter-spacing:.1em;color:#E6E0D3}
.hdr-btn .dot{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;border-radius:99px;background:var(--cinnabar);color:#fff;font-size:10px;line-height:17px;text-align:center;padding:0 4px}
.langbtn{gap:2px}
.nav,.hdr-cta{display:none}
.menubtn{width:38px;height:38px;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 9px;border:1px solid var(--panel-line);border-radius:var(--r)}
.menubtn i{display:block;height:1px;background:#E6E0D3}
.drawer{position:fixed;inset:var(--bar) 0 auto 0;z-index:59;background:var(--xuan-black);border-bottom:1px solid var(--panel-line);padding:6px 0 16px;display:none}
.drawer.open{display:block}
.drawer a{display:block;padding:13px 20px;color:#E6E0D3;font-size:14px;letter-spacing:.14em;border-bottom:1px solid rgba(241,237,227,.07)}
.drawer a:last-child{border-bottom:0}
.drawer .langs{display:flex;gap:8px;padding:14px 20px 4px}
.drawer .langs button{border:1px solid var(--panel-line);padding:7px 13px;font-size:12px;color:#E6E0D3;border-radius:var(--r)}
.drawer .langs button.on{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}

/* ── 手機底部固定條 ─────────────────────────── */
.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:10px;
  background:rgba(245,241,228,.97);border-top:1px solid rgba(36,31,27,.14);
  padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px))}
.bottombar .bl{flex:1;color:var(--ink);font-size:12px;letter-spacing:.1em;display:flex;align-items:center;gap:9px}
.bottombar .bl b{font-size:15px;color:var(--ink);font-weight:400}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;
  border:1px solid var(--ink);border-radius:var(--r);font-size:13px;letter-spacing:.18em;color:var(--ink);background:none}
.btn.solid{background:var(--ink);color:var(--xuan)}
.btn.cin{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.btn.ghost-light{border-color:rgba(241,237,227,.45);color:#F1EDE3}
.btn.light{background:#F1EDE3;border-color:#F1EDE3;color:var(--ink)}
.btn.block{width:100%}
.btn.sm{min-height:38px;padding:0 14px;font-size:12px;letter-spacing:.12em}
.btn:disabled{opacity:.45}
.link-u{border-bottom:1px solid var(--line-strong);padding-bottom:2px;font-size:12.5px;letter-spacing:.1em}

/* ── 首屏 ───────────────────────────────────── */
.hero{position:relative;background:var(--xuan-black);color:#F1EDE3;overflow:hidden}
.hero-art{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.hero-in{position:relative;z-index:2;padding:34px 18px 30px;max-width:1180px;margin:0 auto}
.hero h1{font-size:34px;line-height:1.5;letter-spacing:.16em;margin:16px 0 12px}
.hero .sub{font-size:11px;letter-spacing:.26em;color:#A79E8D;margin-bottom:16px}
.hero p{font-size:13.5px;line-height:2;color:#B9B0A0;max-width:460px;margin-bottom:22px}
.hero .cta{display:grid;gap:10px}
.hero .trust{display:flex;flex-wrap:wrap;gap:7px 14px;margin-top:20px;font-size:10.5px;letter-spacing:.1em;color:#9C9384}
.hero .trust span::before{content:"·";margin-right:6px;color:var(--bronze)}

/* ── 區段 ───────────────────────────────────── */
.sec{padding-top:30px;padding-bottom:30px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:16px}
.sec-h h2{font-size:20px}
.sec-h .more{font-size:11.5px;color:var(--bronze);letter-spacing:.1em;flex:none}
.sec-h em{display:block;font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--ink-soft);margin-top:6px}
.sec.dark{background:#F7EFE7;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec.dark .sec-h em,.sec.dark .muted{color:#84705F}
.sec.dark .hair{background:var(--line)}

/* ── 卡與格 ─────────────────────────────────── */
.grid{display:grid;gap:10px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:1fr}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative;display:flex;flex-direction:column}
.card .art{position:relative;aspect-ratio:1/1.16;background:linear-gradient(180deg,#FDFCFA,#F4EFE4);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line)}
.card .art svg{width:58%;height:58%;stroke:var(--ink);fill:none;stroke-width:1.25;opacity:.82}
.card .art .cap{position:absolute;left:8px;bottom:7px;font-size:9.5px;letter-spacing:.14em;color:var(--bronze)}
.card .art > img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover}
.card .glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(120% 80% at 50% 0,rgba(212,175,55,.18),rgba(212,175,55,0) 62%)}
.card .add{position:absolute;right:8px;bottom:8px;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;background:rgba(255,253,248,.94);font-size:17px;line-height:30px;text-align:center;color:var(--ink)}
.card .add.on{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.card .body{padding:11px 11px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.card .tag{font-size:10px;letter-spacing:.14em;color:var(--bronze)}
.card h3{font-family:var(--serif);font-size:14px;line-height:1.5;letter-spacing:.06em}
.card .tl{font-size:11.5px;color:var(--ink-soft);line-height:1.7;min-height:2.6em}
.card .pl{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-top:auto;padding-top:8px}
.card .price{font-family:var(--serif);font-size:17px;letter-spacing:.02em;color:var(--red)}
.card .wh{font-size:10px;color:var(--ink-soft);letter-spacing:.06em}
.card .quote{font-size:13px;color:var(--bronze);letter-spacing:.16em}
.card.dark{background:var(--panel);border-color:var(--panel-line);color:#F1EDE3}
.card.dark .art{background:linear-gradient(180deg,#221E1A,#171412);border-color:var(--panel-line)}
.card.dark .art svg{stroke:#EFE9DC}
.card.dark .tl{color:#9C9384}

/* 場景與分類 chips */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);border-radius:99px;padding:8px 15px;font-size:12px;letter-spacing:.1em;color:var(--ink-soft);background:var(--card)}
.chip.on{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.chip.compact{padding:6px 12px;font-size:11.5px}

/* ── 列表工具列 ─────────────────────────────── */
.tools{position:sticky;top:var(--bar);z-index:40;background:rgba(250,246,238,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:9px 0}
.search{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:0 12px;height:42px;margin-bottom:9px}
.search input{flex:1;font-size:13.5px}
.search svg{width:15px;height:15px;stroke:var(--ink-soft);fill:none;stroke-width:1.6;flex:none}
.count{font-size:11.5px;letter-spacing:.12em;color:var(--ink-soft)}

/* ── 詳情 ───────────────────────────────────── */
.dots{display:flex;gap:6px;justify-content:center;padding:10px 0 2px}
.dots i{width:5px;height:5px;border-radius:50%;background:var(--sand)}
.dots i.on{background:var(--bronze)}
.dt{padding:20px 0 26px}
.dt .tag{font-size:10.5px;letter-spacing:.2em;color:var(--bronze)}
.dt h1{font-size:23px;line-height:1.5;margin:10px 0 8px}
.dt .lead{font-size:13.5px;color:var(--ink-soft);line-height:1.9}
.dt .pricebox{display:flex;align-items:flex-end;justify-content:space-between;margin:18px 0 6px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dt .pricebox .p{font-size:26px;font-family:var(--serif);color:var(--cinnabar);letter-spacing:.02em}
.dt .pricebox .alt{font-size:11.5px;color:var(--ink-soft);text-align:right;line-height:1.9}
.dt .stock{font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft)}
.dt .cta{display:grid;gap:10px;margin:18px 0 6px}
.dt .ship{font-size:11.5px;color:var(--ink-soft);line-height:2;margin-top:14px}
details{border-top:1px solid var(--line);padding:15px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{list-style:none;display:flex;align-items:center;justify-content:space-between;font-family:var(--serif);font-size:14.5px;letter-spacing:.14em;cursor:pointer}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";font-family:var(--sans);font-size:14px;color:var(--bronze);letter-spacing:0}
details[open] summary::after{content:"－"}
details .dbody{font-size:13px;color:var(--ink-soft);line-height:2;padding-top:11px}
details .dbody b{font-weight:400;color:var(--ink)}

/* ── 詢盤清單 ───────────────────────────────── */
.line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.line .thumb{width:64px;height:74px;flex:none;border:1px solid var(--line);background:linear-gradient(180deg,#F7F4EC,#EBE6DA);display:flex;align-items:center;justify-content:center}
.line .thumb svg{width:60%;height:60%;stroke:var(--ink);fill:none;stroke-width:1.3;opacity:.8}
.line .info{flex:1;min-width:0}
.line h3{font-size:13.5px;line-height:1.6;letter-spacing:.04em}
.line .meta{font-size:11.5px;color:var(--ink-soft);margin-top:3px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r);height:34px;margin-top:9px;width:118px}
.qty button{width:34px;height:32px;font-size:15px;color:var(--ink-soft)}
.qty span{flex:1;text-align:center;font-size:13px}
.line .rm{font-size:11px;color:var(--ink-soft);border-bottom:1px solid var(--line);align-self:flex-start;padding-bottom:1px}
.sum{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:16px 0}
.sum dl{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:var(--ink-soft)}
.sum dl b{font-weight:400;color:var(--ink)}
.sum .tot{border-top:1px solid var(--line);margin-top:8px;padding-top:10px;font-size:14px}
.sum .tot b{color:var(--cinnabar);font-size:17px;font-family:var(--serif)}
.sum .fine{font-size:11px;color:var(--ink-soft);margin-top:9px;line-height:1.9}
.field{margin-bottom:12px}
.field label{display:block;font-size:11.5px;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:12px;font-size:14px}
.field textarea{min-height:88px;resize:vertical;line-height:1.8}
.form-note{font-size:11.5px;color:var(--ink-soft);line-height:1.9;margin-top:10px}
.alert{border:1px solid var(--line-strong);border-left:3px solid var(--cinnabar);background:var(--card);padding:14px;font-size:12.5px;line-height:1.95;margin:14px 0}
.alert b{font-family:var(--serif);letter-spacing:.1em;font-weight:400;display:block;margin-bottom:5px;font-size:14px}
.empty{text-align:center;padding:46px 0;color:var(--ink-soft)}
.empty .seal{margin-bottom:14px}

/* ── 信任 / 批發 / 內容 ─────────────────────── */
.trustrow{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.trustrow div b{display:block;font-family:var(--serif);font-size:13.5px;letter-spacing:.14em;margin-bottom:4px}
.trustrow div span{font-size:11.5px;color:var(--ink-soft)}
.tier{width:100%;border-collapse:collapse;font-size:13px}
.tier td{padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.tier td:last-child{text-align:right;color:var(--cinnabar)}
.tier .lk{letter-spacing:.24em;opacity:.5}
.art3{display:grid;gap:10px;grid-template-columns:1fr}
.art3 .card .art{aspect-ratio:16/9}
.notice{border:1px dashed var(--line-strong);padding:16px;font-size:12.5px;line-height:2;color:var(--ink-soft)}
.prose h2{font-size:19px;margin:30px 0 12px}
.prose h3{font-size:15.5px;margin:22px 0 8px}
.prose p{font-size:14px;line-height:2.05;color:var(--ink-soft);margin-bottom:12px}
.prose ul{margin:0 0 14px 18px;color:var(--ink-soft);font-size:13.5px;line-height:2}
.prose b{font-weight:400;color:var(--ink)}
.prose img{display:block;max-width:100%;height:auto;margin:18px auto;border:0}

/* ── 頁腳 ───────────────────────────────────── */
footer{background:var(--xuan-black);color:#B9B0A0;margin-top:34px;padding:34px 0 30px;border-top:1px solid var(--panel-line)}
footer .cols{display:grid;gap:24px}
footer b{display:block;font-family:var(--serif);font-size:12.5px;letter-spacing:.2em;color:#F1EDE3;margin-bottom:11px;font-weight:400}
footer a,footer p{display:block;font-size:12px;line-height:2.3;letter-spacing:.08em}
footer .legal a{color:#E6E0D3}
footer .end{margin-top:26px;padding-top:16px;border-top:1px solid var(--panel-line);font-size:11px;color:#89806F;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}

/* ── Toast ──────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(var(--bottom) + 18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,14px);
  z-index:90;background:var(--xuan-black);color:#F1EDE3;border:1px solid var(--panel-line);padding:11px 18px;font-size:12.5px;letter-spacing:.1em;border-radius:var(--r);opacity:0;transition:.28s}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── 平板 ───────────────────────────────────── */
@media (min-width:768px){
  :root{--bar:64px}
  body{padding-bottom:0;font-size:15.5px}
  .bottombar{display:none}
  .announce span{display:inline}
  .menubtn{display:none}
  .nav{display:flex;gap:24px;margin-left:18px;font-size:12.5px;letter-spacing:.14em;color:#B9B0A0}
  .nav a:hover{color:#fff}
  .hdr-cta{display:inline-flex}
  .drawer{display:none!important}
  .hero-in{padding:58px 18px 54px}
  .hero h1{font-size:46px}
  .hero .cta{display:flex}
  .g3{grid-template-columns:repeat(3,1fr)}
  .g2{grid-template-columns:repeat(3,1fr)}
  .grid{gap:14px}
  .sec{padding-top:52px;padding-bottom:52px}
  .sec-h h2{font-size:25px}
  .trustrow{grid-template-columns:repeat(4,1fr)}
  .art3{grid-template-columns:repeat(3,1fr)}
  .dt .cta{display:flex}
  .dt h1{font-size:30px}
  footer .cols{grid-template-columns:repeat(4,1fr);gap:34px}
  .line{margin:0}
  .toolgrid{display:flex;gap:14px;align-items:center}
  .toolgrid .search{flex:1;margin-bottom:0}
  .modal .panel{max-width:560px}
}
@media (min-width:1180px){
  .g2{grid-template-columns:repeat(4,1fr)}
  .hero h1{font-size:52px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.card h3 a{display:block}
/* 手機端溢出修正 */
html,body{max-width:100%;overflow-x:hidden}
.hdr-btn .hic{width:16px;height:16px;flex:none}
.hdr-btn .lbl{display:none}
@media (min-width:768px){.hdr-btn .hic{display:none}.hdr-btn .lbl{display:inline}}
@media (max-width:420px){.brand i.bsub{display:none}.brand b{font-size:18px;letter-spacing:.2em}}
.bottombar .bl{text-decoration:none}
.bottombar .bl .arw{margin-left:auto;opacity:.55;font-size:14px}
.bottombar .bb .btn{min-width:0}
.announce{line-height:1.7}
.sum dl span:last-child,.sum dl b{text-align:right}
.tools .chips{padding-bottom:8px}
/* 溢出防護（手機） */
html,body{width:100%;max-width:100%;overflow-x:hidden}
.wrap{max-width:100%}
.announce{white-space:normal;word-break:break-word;padding-left:12px;padding-right:12px}
.bottombar .bl{min-width:0}
.bottombar .bl>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bottombar .bb{flex:none}
.bottombar .btn{padding:0 14px;white-space:nowrap}
.toast{max-width:calc(100vw - 36px);text-align:center}
.sum dl{align-items:baseline;gap:10px}
.sum dl>span:first-child{flex:none}
.sum dl>b,.sum dl>span:last-child{text-align:right;min-width:0}
@media (max-width:420px){
  .brand i.bsub{display:none}
  .brand b{font-size:18px;letter-spacing:.18em}
  .hdr-in{padding:0 10px;gap:8px}
  .hdr-btn{padding:0 9px}
  .hero h1{font-size:30px}
  .dt .pricebox .p{font-size:23px}
}
/* ── 多通道觸達（LINE／WhatsApp／微信／Email）──────── */
.fab{display:none;position:fixed;right:22px;bottom:22px;z-index:80;flex-direction:column;gap:9px}
.fab button{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(20,17,15,.22);border:1px solid rgba(0,0,0,.08)}
.fab .wa{background:#25D366;color:#0b3d20}
.fab .ln{background:#06C755;color:#083d1e}
.fab .mail{background:#14110F;color:#F1EDE3}
.fab .wc{background:#07C160;color:#fff}
.fab svg{width:24px;height:24px;fill:currentColor}
@media (min-width:768px){.fab{display:flex}}
.bottombar .bb{display:flex;gap:9px}
.bottombar .btn{min-height:44px;padding:0 15px;font-size:12.5px;letter-spacing:.1em}
.bottombar .btn.wa{background:#25D366;border-color:#25D366;color:#0b3d20;font-weight:600}
.bottombar .btn.ln{background:#06C755;border-color:#06C755;color:#083d1e;font-weight:600}
.bottombar .btn.wechat{background:#07C160;border-color:#07C160;color:#ffffff;font-weight:600}
.btn.wa{background:#25D366;border-color:#25D366;color:#0b3d20;font-weight:600}
.btn.ln{background:#06C755;border-color:#06C755;color:#083d1e;font-weight:600}
.btn.mail{background:var(--ink);border-color:var(--ink);color:var(--xuan)}
.chlist{display:flex;flex-direction:column;gap:9px;margin:14px 0}
.chlist button,.chlist>a{display:flex;align-items:center;gap:12px;border:1px solid var(--line);background:var(--card);border-radius:var(--r);padding:12px 14px;text-align:left;width:100%}
footer .chlist button{border-color:var(--panel-line);background:transparent;color:#E6E0D3}
.chlist .ic{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;color:#fff}
.chlist .ic svg{width:19px;height:19px;fill:currentColor}
.chlist .ic.wa{background:#25D366;color:#0b3d20}
.chlist .ic.ln{background:#06C755;color:#083d1e}
.chlist .ic.wc{background:#07C160}
.chlist .ic.mail{background:#241F1B}
.chlist b{display:block;font-weight:400;font-family:var(--serif);letter-spacing:.12em;font-size:13.5px}
.chlist span span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:2px}
footer .chlist span span{color:#9C9384}
.chlist .go{margin-left:auto;color:var(--bronze);font-size:12px;flex:none}
.hours{font-size:11.5px;color:var(--ink-soft);letter-spacing:.06em;line-height:1.9}
footer .hours{color:#9C9384}
.line .info{min-width:0}
.line h3{overflow-wrap:anywhere}
/* 桌機頁頭與首屏微調 */
.nav a{white-space:nowrap}
.hdr-btn{white-space:nowrap}
.hdr-cta{display:none}
@media (min-width:768px){
  .nav{gap:18px}
  .nav a{font-size:12px}
  .hdr-cta{display:inline-flex}
  .hdr-in{gap:14px}
}
@media (min-width:1500px){.nav{gap:24px}}
.hero{background:#12100E}
.ridge-far{opacity:.9}
@media (min-width:768px){.hero-in{padding-top:64px;padding-bottom:60px}}
/* 頁頭導航收斂：中螢幕只留主要分類，其餘進選單 */
@media (min-width:768px) and (max-width:1499px){
  .nav:not(.nav-custom) > a:nth-child(n+6):not(:last-child){display:none}
}

/* ── PC 端（≥900px）加強 ───────────────────────── */
@media (min-width:900px){
  .hero{min-height:540px}
  /* 詳情：左圖集、右資訊，右欄吸頂 */
  .dtgrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:start;padding:26px 0 10px}
  .dtleft{min-width:0}
  .dots{display:none}
  .dtright{position:sticky;top:calc(var(--bar) + 22px)}
  .dt{padding:0}
  .dt .cta{display:flex;flex-wrap:wrap;gap:12px}
  .dt .cta .btn{flex:1 1 auto;min-width:200px}
  .dt .cta .btn.block,.dt .cta .btn{width:auto}
  .dt h1{font-size:31px}
  /* 詢盤：左清單、右表單，表單吸頂 */
  .inqgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
  .inqleft{min-width:0}
  .inqgrid>[data-form-wrap]{position:sticky;top:calc(var(--bar) + 22px);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
  .inqgrid>[data-form-wrap] .orn{display:none}
  .inqgrid>[data-form-wrap] form{padding-top:0}
  .line .thumb{width:72px;height:84px}
  /* 列表：工具列單行，四欄 */
  .toolgrid{display:flex;align-items:center;justify-content:space-between;gap:18px}
  .tools{padding:14px 0}
  .sec-h h2{font-size:26px}
  /* 卡片互動 */
  .card{transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease}
  .card:hover{box-shadow:0 14px 34px rgba(20,17,15,.10);transform:translateY(-3px);border-color:var(--line-strong)}
  .card .art svg{transition:transform .5s ease}
  .card:hover .art svg{transform:scale(1.04)}
  .card .add{transition:background .25s ease,color .25s ease,border-color .25s ease}
  .card .add:hover{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
  .btn{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
  .btn:hover{background:var(--ink);color:var(--xuan);border-color:var(--ink)}
  .btn.solid:hover{background:#3A332C;border-color:#3A332C;color:var(--xuan)}
  .btn.cin:hover{background:#8C2818;border-color:#8C2818;color:#fff}
  .btn.wa:hover{background:#1FBF5B;border-color:#1FBF5B;color:#0b3d20}
  .btn.ln:hover{background:#05B24C;border-color:#05B24C;color:#083d1e}
  .btn.light:hover{background:#fff;border-color:#fff;color:var(--ink)}
  .chips .chip{transition:border-color .25s ease,background .25s ease,color .25s ease}
  .chips .chip:hover{border-color:var(--ink);color:var(--ink)}
  .chips .chip.on:hover{color:var(--xuan)}
  footer a:hover,footer .chlist button:hover{color:#fff}
  .chlist button:hover{border-color:var(--line-strong)}
  .line .rm:hover{color:var(--cinnabar);border-color:var(--cinnabar)}
  details summary:hover{color:var(--bronze)}
  .link-u:hover{color:var(--cinnabar);border-color:var(--cinnabar)}
}
@media (min-width:1180px){
  .dtgrid{gap:56px}
  .grid.g2{grid-template-columns:repeat(4,1fr)}
}
/* PC 卡片比例收斂，避免圖片過大 */
@media (min-width:900px){
  .card .art{aspect-ratio:1/1.04}
  .art3 .card .art{aspect-ratio:16/9}
  .card h3{font-size:14.5px}
  .card .tl{font-size:12px}
}
/* ════════ 版面容積規整（間距尺度 + 圖片區收斂）════════
   以 8pt 尺度統一 margin/padding：6 / 10 / 14 / 20 / 28 / 40 / 56 / 72 */
:root{--s1:6px;--s2:10px;--s3:14px;--s4:20px;--s5:28px;--s6:40px;--s7:56px;--s8:72px}

/* 容器與區段節奏 */
.wrap{padding:0 20px}
.sec{padding-top:var(--s5);padding-bottom:var(--s5)}
.sec-h{margin-bottom:var(--s4);gap:12px;align-items:flex-end}
.sec-h h2{font-size:20px;letter-spacing:.14em;line-height:1.45}
.sec-h em{margin-top:5px;font-size:11px;letter-spacing:.14em}
.sec-h .more{font-size:11.5px;padding-bottom:3px}
.orn{margin:var(--s5) 0}
hr.hair{margin:0}

/* 卡片：圖片區收斂、內距統一 */
.grid{gap:12px}
.card .art{aspect-ratio:1/1.12;padding:10%}
.card .art svg{width:100%;height:100%;max-width:92px;max-height:92px;opacity:.72}
.card .add{right:var(--s2);bottom:var(--s2);width:34px;height:34px;line-height:31px;font-size:16px}
.card .body{padding:var(--s3) var(--s3) var(--s3);gap:5px}
.card .tag{font-size:10px;letter-spacing:.16em}
.card h3{font-size:13.5px;line-height:1.6;letter-spacing:.04em}
.card .tl{font-size:11.5px;line-height:1.7;min-height:0}
.card .pl{padding-top:var(--s2);gap:8px}
.card .price{font-size:15px}
.card .wh{font-size:10px}

/* 首屏內距 */
.hero-in{padding:var(--s6) 20px var(--s5)}
.hero h1{margin:var(--s3) 0 var(--s2)}
.hero .sub{margin-bottom:var(--s3)}
.hero p{margin-bottom:var(--s4);line-height:1.95}
.hero .cta{gap:var(--s2)}
.hero .trust{margin-top:var(--s5);gap:6px 12px}

/* 信任列與清單 */
.trustrow{gap:var(--s4) var(--s3)}
.trustrow div b{margin-bottom:3px}
.chlist{gap:8px;margin:var(--s3) 0}
.chlist button,.chlist>a{padding:11px 13px;gap:11px}
.chlist .ic{width:32px;height:32px}
.line{padding:var(--s3) 0}
.line .thumb{width:60px;height:70px}
.line .info{min-width:0;padding-right:var(--s1)}
.line .meta{margin-top:2px}
.qty{margin-top:8px}
.sum{padding:var(--s4);margin:var(--s4) 0}
.sum dl{padding:5px 0}
.sum .fine{margin-top:var(--s2)}

/* 表單與詳情 */
.field{margin-bottom:var(--s3)}
.field label{margin-bottom:5px}
.field input,.field select,.field textarea{padding:11px}
.dt{padding:var(--s4) 0 var(--s5)}
.dt h1{margin:var(--s2) 0 6px}
.dt .pricebox{margin:var(--s4) 0 var(--s1);padding:var(--s3) 0}
.dt .cta{gap:var(--s2);margin:var(--s4) 0 var(--s1)}
.dt .ship{margin-top:var(--s3)}
details{padding:var(--s3) 0}
details .dbody{padding-top:var(--s2)}

/* 頁腳與浮動鈕 */
footer{padding:var(--s6) 0 var(--s5);margin-top:var(--s5)}
footer b{margin-bottom:8px}
footer .end{margin-top:var(--s4);padding-top:var(--s3)}
.fab{right:20px;bottom:20px;gap:8px}
.fab button{width:48px;height:48px}

@media (min-width:768px){
  .wrap{padding:0 var(--s5)}
  .sec{padding-top:var(--s7);padding-bottom:var(--s7)}
  .sec-h{margin-bottom:var(--s5)}
  .sec-h h2{font-size:25px}
  .grid{gap:var(--s4)}
  .card .art{padding:8%}
  .card .art svg{max-width:118px;max-height:118px}
  .card .body{padding:var(--s4) var(--s4) var(--s4)}
  .card h3{font-size:14.5px}
  .hero-in{padding:var(--s8) var(--s5) var(--s7)}
  .hero .cta{gap:var(--s3)}
  .hero .trust{margin-top:var(--s6)}
  footer{padding:var(--s7) 0 var(--s6);margin-top:var(--s7)}
  .fab button{width:52px;height:52px}
}

@media (min-width:900px){
  /* 商品卡改為接近方形，圖片不再壓過文字 */
  .card .art{aspect-ratio:1/1}
  /* 入門路徑卡：圖片區明顯收短，讓標題與價格成為主角 */
  [data-bundles]{gap:var(--s4)}
  [data-bundles] .card .art{aspect-ratio:16/9;padding:0}
  [data-bundles] .card .art svg{max-width:76px;max-height:76px}
  [data-bundles] .card .body{padding:var(--s4);gap:6px}
  [data-bundles] .card h3{font-size:15px}
  [data-bundles] .card .pl{padding-top:var(--s3)}
  [data-bundles] .card .btn{margin-top:var(--s3)!important}
  /* 內容導讀卡 */
  .art3{gap:var(--s3)}
  .art3 .card .art{aspect-ratio:16/9;padding:8%}
  .dtgrid{gap:var(--s7);padding:var(--s5) 0 var(--s3)}
  .inqgrid{gap:var(--s7)}
  .inqgrid>[data-form-wrap]{padding:var(--s5)}
  .tier td{padding:12px 0}
}

@media (min-width:1180px){
  .grid.g2{gap:var(--s4)}
  .card .art svg{max-width:132px;max-height:132px}
}

/* 入門路徑卡：圖片區在所有尺寸都收短 */
[data-bundles] .card .art{aspect-ratio:16/9;padding:0}
[data-bundles] .card .art svg{max-width:76px;max-height:76px}
[data-bundles] .card .body{gap:6px}
[data-bundles] .card .pl{padding-top:var(--s3)}
[data-bundles] .card .btn{margin-top:var(--s3)!important}
/* 商品卡：圖片區改 4:3，文字區成為主角 */
.card .art{aspect-ratio:4/3;padding:6%}
.card .art svg{max-width:108px;max-height:108px}
.card .body{padding:var(--s3) var(--s3) var(--s3)}
@media (min-width:900px){
  .card .art{aspect-ratio:4/3}
  .card .art svg{max-width:120px;max-height:120px}
}
@media (min-width:1180px){
  .card .art svg{max-width:132px;max-height:132px}
}

/* ════════ PC 版式（≥1024px）：加大頁邊、收斂閱讀寬度、列表改左欄篩選 ════════ */
:root{--pad:20px;--content:1180px}
@media (min-width:768px){:root{--pad:28px}}
@media (min-width:1024px){:root{--pad:40px;--content:1160px}}
@media (min-width:1440px){:root{--pad:56px;--content:1260px}}

.wrap{width:100%;max-width:var(--content);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.hdr-in{width:100%;max-width:var(--content);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.hero-in{max-width:var(--content);padding-left:var(--pad);padding-right:var(--pad)}

/* 列表頁：手機維持頂部工具列，PC 改左欄篩選 */
.shop{display:block}
.tools-in{max-width:none}
.fgroup{margin-bottom:9px}
.fgroup>h3{display:none}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.sortwrap{display:flex;align-items:center;gap:8px}
.results{padding-top:var(--s5);padding-bottom:var(--s7)}
@media (min-width:1024px){
  .shop{display:grid;grid-template-columns:236px minmax(0,1fr);gap:44px;align-items:start;padding-top:var(--s5)}
  .tools{position:sticky;top:calc(var(--bar) + 22px);z-index:20;background:none;border:0;backdrop-filter:none;padding:0}
  .tools .search{margin-bottom:var(--s5)}
  .fgroup>h3{display:block;font-family:var(--serif);font-size:12.5px;letter-spacing:.18em;font-weight:400;color:var(--ink);margin-bottom:10px}
  .fgroup{margin-bottom:var(--s4)}
  .fgroup .chips{flex-direction:column;align-items:stretch;overflow:visible;gap:7px;padding:0}
  .fgroup .chip{text-align:left;border-radius:var(--r);padding:9px 12px;font-size:12.5px;background:transparent;border-color:transparent}
  .fgroup .chip:hover{background:var(--card);border-color:var(--line)}
  .fgroup .chip.on{background:var(--card);border-color:var(--line-strong);color:var(--ink)}
  .fgroup .chip.compact{padding:8px 12px;font-size:12px}
  .fgroup .chip.on::before{content:"— "}
  .fbar{flex-direction:column;align-items:flex-start;gap:10px;margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)}
  .results{padding:0 0 var(--s7)}
  .results .grid{gap:var(--s4)}
  .results .card .art{padding:7%}
  .results .card .art svg{max-width:126px;max-height:126px}
  .results .grid.g2{grid-template-columns:repeat(3,1fr)}
  .sec{padding-top:var(--s7);padding-bottom:var(--s7)}
  body{font-size:16px}
  .prose p,.prose ul{max-width:74ch}
  .sec-h h2{font-size:27px}
  .hero p{max-width:520px}
  .trustrow{gap:var(--s5)}
  footer .cols{gap:var(--s6)}
  footer{padding-top:var(--s8);padding-bottom:var(--s6)}
}
@media (min-width:1440px){
  .shop{grid-template-columns:252px minmax(0,1fr);gap:56px}
  .sec{padding-top:88px;padding-bottom:88px}
  .results .grid.g2{grid-template-columns:repeat(4,1fr)}
}
/* 手機／平板：工具列仍為滿版（容器有內距，用負邊距拉回） */
@media (max-width:1023px){
  .shop>.tools{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding-left:var(--pad);padding-right:var(--pad)}
}
/* 結果列：手機在 chips 之下，PC 在網格之上並加分隔線 */
.results-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:var(--s3);flex-wrap:wrap}
.results-tools{display:flex;align-items:center;gap:14px}
@media (min-width:1024px){
  .results-bar{padding-bottom:var(--s3);border-bottom:1px solid var(--line);margin-bottom:var(--s4)}
  .sortwrap select{background:transparent;border-color:var(--line)}
  .chip.on{background:var(--card);border-color:transparent;color:var(--ink);font-weight:500}
  .chip.on::before{content:"— "}
  .fbar{display:none}
}
/* ── 語言與頁頭穩定性 ───────────────────────── */
.nav{min-width:0;overflow:hidden;flex-wrap:nowrap}
/* 導覽二級（站點設定裡配的子項）：跟在主項後面縮排＋細線區隔。
   .nav 是 overflow:hidden 的一行容器，所以不做絕對定位的下拉。 */
.nav-grp{display:inline-flex;align-items:center}
.nav-grp .nav-sub{display:inline-flex;align-items:center;margin-left:2px;padding-left:7px;border-left:1px solid rgba(241,237,227,.22)}
.nav-grp .nav-sub a{font-size:11.5px;color:#B9B0A0;letter-spacing:.1em}
.nav-grp .nav-sub a:hover{color:#fff}
.drawer a.sub{padding-left:36px;font-size:13px;color:#B9B0A0}
.announce{overflow-wrap:anywhere}
/* 英文版若日後啟用：拉丁字母不得沿用中文字距 */
html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] .serif,html[lang="en"] .seal{letter-spacing:.015em}
html[lang="en"] .hero h1{font-size:clamp(28px,3.6vw,46px);line-height:1.28;letter-spacing:.01em}
html[lang="en"] .sec-h h2{font-size:24px}
html[lang="en"] .card h3{letter-spacing:.01em}
html[lang="en"] .btn{letter-spacing:.06em}

/* ── 首屏輪播（資料在 data/hero.js）─────────────────
   預設 tone=red：朱紅底、描金線、象牙字。
   換 tone 就能放別的素材：paper＝淺色照片／插畫（象牙底墨字）、ink＝深色照片（玄墨底淺字）。 */
.hero{position:relative;isolation:isolate;background:#96231D;color:#F7EFDE;overflow:hidden}
.hero-stage{position:absolute;inset:0;z-index:0;background:#96231D}
.hero-bg{position:absolute;inset:0;opacity:0;background:#96231D;transition:opacity .9s ease}
.hero-bg picture{position:absolute;inset:0;display:block}
.hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center right}
.hero-bg.on{opacity:1}
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(104,22,18,.92) 0%,rgba(104,22,18,.76) 32%,rgba(104,22,18,.2) 66%,rgba(104,22,18,.32) 100%)}

.hero-in{position:relative;z-index:2;max-width:var(--content);margin:0 auto;padding:var(--s5) var(--pad) var(--s4)}
.hero-copy{display:grid}
.hero-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease,transform .55s ease,visibility .5s}
.hero-slide.on{opacity:1;visibility:visible;transform:none}
.hero .seal{margin-bottom:var(--s3)}
.hero .kicker{font-size:10.5px;letter-spacing:.3em;color:var(--gold-soft);margin-bottom:2px}
.hero h1,.hero .hero-h{font-size:32px;line-height:1.44;letter-spacing:.14em;margin:var(--s2) 0;color:#FCF6E6}
.hero .sub{font-size:11px;letter-spacing:.26em;color:#E5CDA4;margin-bottom:var(--s3)}
.hero .hero-lead{font-size:13.5px;line-height:1.95;color:#F0DFC4;max-width:480px;margin-bottom:var(--s4)}
.hero .cta{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero .cta .btn{flex:1 1 140px;min-width:0}
/* 通道鈕走描金素面，品牌色只留在頁腳與底部條 */
.hero .cta .hero-ch{background:none;border-color:rgba(233,214,172,.5);color:#FCF6E6}
.hero .cta .hero-ch:hover{background:rgba(233,214,172,.12);border-color:rgba(233,214,172,.8)}
.hero .cta .hero-ch svg{fill:currentColor}

/* 指示條與控制項 */
.hero-bar{position:relative;z-index:3;margin-top:var(--s5);border-top:1px solid rgba(233,214,172,.28);
  background:linear-gradient(180deg,rgba(120,26,21,0) 0%,rgba(104,22,18,.72) 100%)}
.hero-bar-in{max-width:var(--content);margin:0 auto;padding:11px var(--pad) 13px;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap}
.hero-dots{display:flex;gap:6px;flex:1 1 auto;flex-wrap:wrap}
.hero-dots button{display:flex;align-items:center;gap:8px;height:30px;font-size:11px;letter-spacing:.16em;color:rgba(247,239,222,.55)}
.hero-dots button i{display:block;width:14px;height:2px;background:rgba(233,214,172,.3);transition:width .4s,background .4s}
.hero-dots button.on{color:#FCF6E6}
.hero-dots button.on i{width:28px;background:var(--gold)}
.hero-dots .lb{display:none}
.hero-trust{flex:1 1 100%;order:3;display:flex;flex-wrap:wrap;gap:5px 12px;font-size:10.5px;letter-spacing:.1em;color:#E0C69E}
.hero-trust span::before{content:"·";margin-right:6px;color:var(--gold)}
.hero-ctl{display:flex;gap:8px;flex:none}
.hero-ctl button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(233,214,172,.32);border-radius:var(--r);color:#F7EFDE;transition:border-color .25s,background .25s}
.hero-ctl button:hover{border-color:rgba(233,214,172,.7);background:rgba(233,214,172,.1)}
.hero-ctl svg{width:16px;height:16px}
.hero-prog{position:absolute;left:0;right:0;top:-1px;height:1px;display:block;overflow:hidden;background:rgba(233,214,172,.2)}
.hero-prog i{display:block;width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;
  animation:heroProg var(--hero-ms,7000ms) linear forwards}
.hero-prog.idle i{animation:none;transform:scaleX(0)}
.no-auto .hero-prog,.no-auto .hero-dots button i{transition:none}
@keyframes heroProg{to{transform:scaleX(1)}}

/* tone=paper：淺色素材（象牙底、墨字） */
.hero[data-tone="paper"]{background:#F5F1E4;color:var(--ink)}
.hero[data-tone="paper"] .hero-bg{background:#F5F1E4}
.hero[data-tone="paper"] .hero-bg::after{background:linear-gradient(96deg,rgba(245,241,228,.97) 0%,rgba(245,241,228,.9) 30%,rgba(245,241,228,.42) 64%,rgba(245,241,228,.18) 100%)}
.hero[data-tone="paper"] h1,.hero[data-tone="paper"] .hero-h{color:var(--ink)}
.hero[data-tone="paper"] .kicker{color:var(--bronze)}
.hero[data-tone="paper"] .sub{color:#8C8170}
.hero[data-tone="paper"] .hero-lead{color:var(--ink-soft)}
.hero[data-tone="paper"] .hero-trust{color:#8C8170}
.hero[data-tone="paper"] .hero-bar{border-top-color:rgba(36,31,27,.12);background:linear-gradient(180deg,rgba(245,241,228,0) 0%,rgba(242,237,224,.85) 100%)}
.hero[data-tone="paper"] .hero-dots button{color:rgba(36,31,27,.45)}
.hero[data-tone="paper"] .hero-dots button i{background:rgba(36,31,27,.2)}
.hero[data-tone="paper"] .hero-dots button.on{color:var(--ink)}
.hero[data-tone="paper"] .hero-ctl button{border-color:rgba(36,31,27,.2);color:var(--ink)}
.hero[data-tone="paper"] .hero-prog{background:rgba(36,31,27,.1)}
.hero[data-tone="paper"] .cta .hero-ch{border-color:rgba(36,31,27,.24);color:var(--ink)}
.hero[data-tone="paper"] .cta .btn.light{background:var(--ink);border-color:var(--ink);color:var(--xuan)}
.hero[data-tone="paper"] .cta .hero-ch svg{fill:currentColor}

/* tone=ink：深色素材（玄墨底、淺字） */
.hero[data-tone="ink"]{background:#14110F;color:#F1EDE3}
.hero[data-tone="ink"] .hero-bg{background:#12100E}
.hero[data-tone="ink"] .hero-bg::after{background:linear-gradient(100deg,rgba(18,16,14,.96) 0%,rgba(18,16,14,.88) 30%,rgba(18,16,14,.46) 62%,rgba(18,16,14,.6) 100%)}
.hero[data-tone="ink"] .hero-bar{border-top-color:rgba(241,237,227,.12);background:linear-gradient(180deg,rgba(20,17,15,0) 0%,rgba(20,17,15,.72) 100%)}

@media (max-width:380px){.hero h1,.hero .hero-h{font-size:28px}}
@media (min-width:560px){.hero h1,.hero .hero-h{font-size:36px}}
@media (max-width:899px){
  .hero-bg img{object-position:52% 44%}
  .hero-bg::after{background:linear-gradient(172deg,rgba(104,22,18,.92) 0%,rgba(104,22,18,.66) 42%,rgba(104,22,18,.24) 100%)}
  .hero[data-tone="paper"] .hero-bg::after{background:linear-gradient(172deg,rgba(245,241,228,.94) 0%,rgba(245,241,228,.7) 42%,rgba(245,241,228,.3) 100%)}
  .hero[data-tone="ink"] .hero-bg::after{background:linear-gradient(172deg,rgba(18,16,14,.92) 0%,rgba(18,16,14,.68) 42%,rgba(18,16,14,.42) 100%)}
}
@media (min-width:900px){
  .hero h1,.hero .hero-h{font-size:46px;line-height:1.38}
  .hero-in{padding:var(--s7) var(--pad) var(--s6)}
  .hero .hero-lead{max-width:520px;font-size:14px}
  .hero .cta{gap:var(--s3)}
  .hero .cta .btn{flex:0 0 auto;min-width:158px}
  .hero-bar{margin-top:var(--s6)}
  .hero-bar-in{padding:13px var(--pad) 15px;gap:8px 20px}
  .hero-dots{gap:16px}
  .hero-dots .lb{display:inline}
  .hero-trust{order:0;flex:1 1 auto;justify-content:flex-end}
  .hero-ctl{gap:10px}
  .hero-ctl button{width:38px;height:38px}
}
@media (min-width:1180px){.hero h1,.hero .hero-h{font-size:52px}}

/* ── 頁頭與公告：朱紅底描金 ─────────────────── */
.announce{background:#6E1713;color:#E9D6AC}
.hdr{background:var(--xuan-black);color:#F7EFDE;border-bottom:1px solid rgba(233,214,172,.26);
  -webkit-backdrop-filter:none;backdrop-filter:none}
.hdr .brand i{color:#DCC28C}
.hdr .nav a{color:#EDE0C6}
.hdr .nav a:hover{color:#fff}
.hdr-btn{border-color:rgba(233,214,172,.34);color:#F7EFDE}
.hdr-btn:hover{border-color:rgba(233,214,172,.7)}
.menubtn{border-color:rgba(233,214,172,.34)}
.menubtn i{background:#F7EFDE}
.drawer{background:#8E1F1A;border-bottom:1px solid rgba(233,214,172,.26)}
.drawer a{color:#F2E6CE;border-bottom-color:rgba(233,214,172,.14)}
.drawer .langs button{border-color:rgba(233,214,172,.34);color:#F7EFDE}

/* ── 規整化：分區標題、分類入口、卡片 ─────────── */
/* 每個分區標題上方一道朱紅短線，整頁節奏一致 */
.sec-h h2::before{content:"";display:block;width:26px;height:2px;background:var(--cinnabar);margin-bottom:10px}
.cards .card,.grid .card{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.grid .card:hover{border-color:var(--gold);box-shadow:0 10px 26px rgba(120,26,21,.1);transform:translateY(-2px)}

/* 分類入口：圓形圖標一排，手機四欄、桌機七欄 */
.cats-sec{padding-top:var(--s5);padding-bottom:var(--s3)}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 10px}
.cats .cat{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.cats .ic{width:100%;max-width:74px;aspect-ratio:1;border-radius:50%;background:var(--card);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,box-shadow .25s,transform .25s}
.cats .ic svg{width:56%;height:56%;stroke:var(--cinnabar);fill:none;stroke-width:1.2}
.cats b{font-size:11.5px;font-weight:400;letter-spacing:.06em;color:var(--ink-soft);line-height:1.5;min-height:2.9em}
.cats .cat:hover .ic{border-color:var(--gold);box-shadow:0 8px 18px rgba(120,26,21,.1);transform:translateY(-2px)}
.cats .cat:hover b{color:var(--ink)}
@media (min-width:700px){
  .cats{grid-template-columns:repeat(7,minmax(0,1fr));gap:20px 14px}
  .cats .ic{max-width:88px}
  .cats b{font-size:12.5px}
}


/* ── 東方紋樣與細節（克制使用）─────────────────
   回紋：分區分隔用的金色細線；窗櫺：區塊四角的金線折角。 */
.rule{height:12px;background-repeat:repeat-x;background-size:22px 12px;opacity:.38;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M0 11H18V1H6V6H12' fill='none' stroke='%23D4AF37' stroke-width='.9'/%3E%3C/svg%3E")}
.rule.mid{max-width:var(--content);margin:0 auto}
.frame{position:relative;border:1px solid var(--gold-line);background:var(--card)}
.frame::before,.frame::after{content:"";position:absolute;width:16px;height:16px;border:1px solid var(--gold);pointer-events:none}
.frame::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.frame::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

/* 吉祥價標籤與庫存 */
.card .pricelab{font-size:9.5px;letter-spacing:.14em;color:var(--bronze);flex:none}
.card .stock{font-size:10.5px;letter-spacing:.06em;color:var(--ink-soft);flex:none;margin-left:auto}
.card .stock.low{color:var(--red)}
.card .add-btn{margin-top:10px;min-height:40px;font-size:12px;letter-spacing:.14em}
.card .add-btn.on{background:var(--red);border-color:var(--red);color:#fff}

/* 卡片懸停：柔和金光暈染 + 金邊微亮 */
.grid .card:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.35),0 14px 30px rgba(163,52,50,.1)}
.grid .card:hover .glow{opacity:1}
.grid .card:hover .art svg{transform:scale(1.03)}
.card .art svg{transition:transform .5s ease}


/* ════════ 國潮分節層（參考台港中式電商的分節方式，口徑改為文房器物）════════
   1. 居中分節標題：細金線穿過，標題後一枚朱紅菱
   2. 通告區：金線窗櫺框，內含兩則描金 banner
   3. 專題：大圖 banner，中央專題字，四角金線折角
   4. 主推區：朱紅標題帶（下緣金色回紋）+ 網格 + 居中「查看更多」 */
[hidden]{display:none!important}
.sech-c{position:relative;text-align:center;margin-bottom:var(--s5)}
.sech-c .l{position:relative;text-align:center}
.sech-c .l::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,rgba(212,175,55,0),rgba(212,175,55,.5) 16%,rgba(212,175,55,.5) 84%,rgba(212,175,55,0))}
.sech-c h2{position:relative;z-index:1;display:inline-block;background:var(--xuan);padding:0 var(--s4);
  font-family:var(--display);font-size:21px;line-height:1.5;letter-spacing:.22em}
.sech-c h2::after{content:"";display:inline-block;width:6px;height:6px;margin-left:10px;
  background:var(--cinnabar);transform:rotate(45deg) translateY(-1px)}
.sech-c em{display:block;font-style:normal;font-size:11px;letter-spacing:.16em;color:var(--ink-soft);margin-top:10px}
.sec.dark .sech-c h2{background:#F7EFE7}

/* 通告框 */
.notice{position:relative;border:1px solid var(--gold-line);padding:var(--s3);
  background:linear-gradient(180deg,#FFFDF8,#FBF6EC)}
.notice::before,.notice::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold);pointer-events:none}
.notice::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.notice::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.notice-grid{display:grid;gap:var(--s3)}

/* 通告 banner：一紅一紙，右下一枚線描器物 */
.promo{position:relative;display:block;overflow:hidden;min-height:150px;padding:var(--s4);
  border:1px solid var(--gold-line);background:linear-gradient(120deg,#FFFEFB,#F7F1E3);
  transition:border-color .25s ease,box-shadow .25s ease}
.promo .art{position:absolute;right:-14px;bottom:-14px;width:132px;height:132px;opacity:.14;pointer-events:none}
.promo .art svg{width:100%;height:100%;stroke:var(--bronze);fill:none;stroke-width:1.1}
.promo .txt{position:relative;z-index:1;display:block;max-width:80%}
.promo .kick{font-size:10px;letter-spacing:.24em;color:var(--bronze)}
.promo h3{font-family:var(--display);font-size:18px;line-height:1.5;letter-spacing:.14em;margin:7px 0 6px}
.promo p{font-size:12.5px;line-height:1.9;color:var(--ink-soft)}
.promo .go{display:inline-block;margin-top:11px;padding-bottom:3px;font-size:11.5px;letter-spacing:.14em;
  color:var(--red);border-bottom:1px solid var(--gold-line)}
.promo.red{background:linear-gradient(120deg,#A33432,#8B2A27);border-color:rgba(231,211,161,.46)}
.promo.red .art svg{stroke:#E7D3A1}
.promo.red .kick{color:#E7D3A1}
.promo.red h3{color:#FBF3E2}
.promo.red p{color:#E9D6AC}
.promo.red .go{color:#FBF3E2;border-bottom-color:rgba(231,211,161,.62)}
.promo:hover{border-color:var(--gold);box-shadow:0 12px 28px rgba(163,52,50,.12)}

/* 專題 banner */
.topics{display:grid;gap:var(--s3)}
.topics.topics-image{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:190px;padding:var(--s5) var(--s4);overflow:hidden;
  border:1px solid var(--gold-line);background:linear-gradient(170deg,#FFFDF8,#F4EDDF);
  transition:border-color .25s ease,box-shadow .25s ease}
.topic::before,.topic::after{content:"";position:absolute;width:18px;height:18px;border:1px solid var(--gold);pointer-events:none}
.topic::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.topic::after{right:-1px;bottom:-1px;border-left:0;border-top:0}
.topic .art{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:62%;max-width:210px;opacity:.10;pointer-events:none}
.topic .art svg{width:100%;height:100%;stroke:var(--bronze);fill:none;stroke-width:1.1}
.topic .kick{position:relative;z-index:1;font-size:10px;letter-spacing:.3em;color:var(--bronze)}
.topic b{position:relative;z-index:1;display:block;font-family:var(--display);font-weight:400;
  font-size:24px;line-height:1.6;letter-spacing:.24em;margin:10px 0 8px}
.topic .sub{position:relative;z-index:1;display:block;max-width:32ch;font-size:12px;line-height:1.9;color:var(--ink-soft)}
.topic:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.3),0 16px 32px rgba(163,52,50,.1)}
.topic.has-image{display:block;min-height:0;aspect-ratio:16/9;padding:0;background:#181512;color:#F8F0E1}
.topic.has-image .topic-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.topic.has-image:hover .topic-img{transform:scale(1.045)}
.topic.has-image::before,.topic.has-image::after{border-color:rgba(231,211,161,.55);z-index:2}
@media (max-width:900px){
  .topics.topics-image{grid-template-columns:1fr}
}

/* 圖片卡片組：標題 + 副標題 + 1-4 列圖片（圖片本身帶文案） */
.image-cards{display:grid;gap:var(--s3)}
.image-cards.cols-1{grid-template-columns:1fr}
.image-cards.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.image-cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.image-cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.image-card{display:block;overflow:hidden;border:1px solid var(--gold-line);background:#181512;
  transition:border-color .25s ease,box-shadow .25s ease}
.image-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.image-card:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(212,175,55,.3),0 16px 32px rgba(163,52,50,.1)}
.image-card:hover img{transform:scale(1.035)}
.image-card.is-empty{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  background:linear-gradient(170deg,#FFFDF8,#F4EDDF);color:#A88B5A;font-size:12px;letter-spacing:.18em}
.image-card.is-empty:hover{border-color:var(--gold-line);box-shadow:none}
@media (max-width:900px){
  .image-cards.cols-3,.image-cards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .image-cards.cols-2,.image-cards.cols-3,.image-cards.cols-4{grid-template-columns:1fr}
}

/* 主推區：朱紅標題帶 + 描金回紋下緣 */
.block{border:1px solid var(--gold-line);background:var(--card)}
.band{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s4) calc(var(--s4) + 4px);color:#F7EFDE;background:linear-gradient(100deg,#A33432,#8E2C2A)}
.band h2{font-family:var(--display);font-size:21px;letter-spacing:.2em;color:#FBF3E2}
.band em{display:block;font-style:normal;font-size:11px;letter-spacing:.16em;color:#E0C795;margin-top:6px}
.band .more{flex:none;padding-bottom:3px;font-size:11.5px;letter-spacing:.1em;color:#F2E6CE;
  border-bottom:1px solid rgba(231,211,161,.55)}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;opacity:.55;
  background-repeat:repeat-x;background-size:22px 12px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M0 11H18V1H6V6H12' fill='none' stroke='%23E7D3A1' stroke-width='.9'/%3E%3C/svg%3E")}
.block-b{padding:var(--s4)}
.block-b .card .art{background:linear-gradient(180deg,#FFFDF7,#F6F0E1)}
.morewrap{display:flex;justify-content:center;margin-top:var(--s5)}
.btn.morebtn{min-width:196px;border-color:var(--red);color:var(--red);background:#FFFDF9;letter-spacing:.2em}
.btn.morebtn:hover{background:var(--red);border-color:var(--red);color:#fff}

/* 分類圓標：朱紅底描金，對齊中式電商的圓形圖標排 */
.cats .ic{background:linear-gradient(160deg,#A33432,#8B2A27);border-color:var(--gold);
  box-shadow:inset 0 0 0 3px rgba(231,211,161,.16)}
.cats .ic svg{stroke:#F0E2BC;stroke-width:1.15}
.cats b{color:var(--ink)}
.cats .cat:hover .ic{border-color:var(--gold);
  box-shadow:inset 0 0 0 3px rgba(231,211,161,.3),0 10px 22px rgba(120,26,21,.22)}

/* 通告與專題分節：比一般分節收一級，避免整頁被撐鬆 */
.sec.tight{padding-top:var(--s4);padding-bottom:var(--s4)}

@media (min-width:768px){
  .notice{padding:var(--s4)}
  .notice-grid{grid-template-columns:1fr 1fr}
  .topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topic{min-height:214px}
  .band{padding:var(--s5) var(--s5) calc(var(--s5) + 4px)}
  .block-b{padding:var(--s5)}
  .sec.tight{padding-top:var(--s6);padding-bottom:var(--s6)}
}
@media (min-width:1024px){
  .topics{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
  .sech-c{margin-bottom:var(--s6)}
  .sech-c h2{font-size:23px}
}

/* 詳情頁左欄加寬，方圖才大得起來（方圖邊長＝欄寬減縮圖列） */
@media (min-width:1024px){
  .dtgrid{grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);gap:48px}
}

/* ════════ 色系調整（2026-10-15）：台灣國學向 ════════
   原稿是朱紅佔滿頁頭、頁腳與首屏，讀起來偏大陸直播帶貨的「國潮開運」。
   這一版把結構色換成墨，朱砂退回印章、價格、CTA、分類圓標與通告卡，
   紅的面積從整頁降到兩成以內；黃銅金壓低一階，另補青瓷作次級強調。
   這裡只覆蓋硬寫死色的規則，色票本身在檔頭 :root。 */
.hero{background:#241F1A;color:#F4EEE2}
.hero-stage,.hero-bg{background:#241F1A}
.hero-bg::after{background:linear-gradient(96deg,rgba(30,25,20,.93) 0%,rgba(30,25,20,.78) 32%,rgba(30,25,20,.22) 66%,rgba(30,25,20,.34) 100%)}
.hero h1,.hero .hero-h{color:#FBF4E4}
.hero .sub{color:#E3CFA6}
.hero .hero-lead{color:#EEDFC6}
.hero-bar{border-top-color:rgba(217,196,155,.26);background:linear-gradient(180deg,rgba(30,25,20,0) 0%,rgba(24,20,16,.74) 100%)}
.hero .cta .hero-ch{border-color:rgba(217,196,155,.5);color:#FBF4E4}
.hero .cta .hero-ch:hover{background:rgba(217,196,155,.12);border-color:rgba(217,196,155,.8)}
.hero-dots button i{background:rgba(217,196,155,.3)}
.hero-ctl button{border-color:rgba(217,196,155,.32);color:#F4EEE2}
.hero-ctl button:hover{border-color:rgba(217,196,155,.7);background:rgba(217,196,155,.1)}
.hero-prog{background:rgba(217,196,155,.2)}
@media (max-width:899px){
  .hero-bg::after{background:linear-gradient(172deg,rgba(30,25,20,.93) 0%,rgba(30,25,20,.68) 42%,rgba(30,25,20,.26) 100%)}
}
.hero[data-tone="paper"]{background:#F2EDE2}
.hero[data-tone="paper"] .hero-bg{background:#F2EDE2}
.hero[data-tone="paper"] .hero-bg::after{background:linear-gradient(96deg,rgba(243,238,228,.97) 0%,rgba(243,238,228,.9) 30%,rgba(243,238,228,.44) 64%,rgba(243,238,228,.2) 100%)}
.hero[data-tone="paper"] .hero-bar{background:linear-gradient(180deg,rgba(243,238,228,0) 0%,rgba(239,233,222,.86) 100%)}
.hero[data-tone="ink"] .hero-bg::after{background:linear-gradient(100deg,rgba(26,22,18,.94) 0%,rgba(26,22,18,.8) 32%,rgba(26,22,18,.2) 64%,rgba(26,22,18,.28) 100%)}
@media (max-width:899px){
  .hero[data-tone="ink"] .hero-bg::after{background:linear-gradient(178deg,rgba(26,22,18,.9) 0%,rgba(26,22,18,.62) 40%,rgba(26,22,18,.86) 100%)}
}
.announce{background:#1B1714;color:#D9C49B}
.drawer{background:#2A2420;border-bottom-color:rgba(217,196,155,.24)}
.drawer a{color:#EFE5CF}
.sec.dark{background:#EAE3D5}
.sec.dark .sech-c h2{background:#EAE3D5}
.sec.dark .sec-h em,.sec.dark .muted{color:#7B6E5E}
.band{background:linear-gradient(100deg,#2A2420,#1B1714)}
.band h2{color:#F6EEDC}
.band em{color:#CFB489}
.band .more{color:#EFE2C8;border-bottom-color:rgba(217,196,155,.5)}
.promo.red{background:linear-gradient(120deg,#A62B24,#7F1E19)}
.cats .ic{background:linear-gradient(160deg,#A62B24,#7F1E19)}
.bottombar{background:rgba(243,238,228,.97)}
footer{color:#B2A692}
.toast{color:#F6EFE0}
.grid .card:hover{box-shadow:0 0 0 1px rgba(176,141,87,.35),0 14px 30px rgba(60,40,28,.12)}
.topic:hover{box-shadow:0 0 0 1px rgba(176,141,87,.3),0 16px 32px rgba(60,40,28,.12)}
.promo:hover{box-shadow:0 12px 28px rgba(60,40,28,.12)}
.promo.red:hover{box-shadow:0 12px 28px rgba(124,49,38,.22)}
@media (min-width:900px){
  .btn.cin:hover{background:#8A3629;border-color:#8A3629;color:#fff}
  .grid .card:hover{box-shadow:0 0 0 1px rgba(176,141,87,.35),0 14px 30px rgba(60,40,28,.12)}
}

/* ════════ 商品圖位：宣紙圖錄感（實拍圖到位前的佔位樣式）════════
   空白的卡片圖位看起來像沒做完。這裡把圖位做成「圖錄的一頁」：
   宣紙底、內圈黃銅細框、四角極淡的紙纖維，器物線描壓在正中。
   實拍圖到位後，把 img 放進同一個容器即可，內框會疊在照片上當作統一收邊。 */
.card .art,.dt .art{background:linear-gradient(180deg,#FCF9F2,#EFE9DA)}
.card .art::before{content:"";position:absolute;inset:9px;border:1px solid rgba(176,141,87,.24);pointer-events:none;z-index:1}
.card .art svg{position:relative;z-index:1;stroke:var(--ink);opacity:.82}
.card .art .cap{z-index:2}
@media (min-width:768px){
  .card .art::before{inset:12px}
}
/* 圖錄的紙纖維：兩道極淡斜線，只在桌機顯示，避免手機糊成灰 */
@media (min-width:1024px){
  .card .art{background-image:linear-gradient(180deg,#FCF9F2,#EFE9DA),
    repeating-linear-gradient(58deg,rgba(146,126,96,.045) 0 1px,rgba(0,0,0,0) 1px 7px),
    repeating-linear-gradient(-42deg,rgba(146,126,96,.035) 0 1px,rgba(0,0,0,0) 1px 9px)}
}

/* ════════ 代理招商頁 ════════
   目標是「B 看了想代理」：把合作方式、供貨價、權益、流程、退路一次講清楚，
   全程不承諾收益。內容在 data/agency.js，這裡只負責版式。 */
.lead-c{max-width:62ch;margin:0 auto;text-align:center;font-size:14px;line-height:2.05;color:var(--ink-soft)}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:var(--s4);
  font-size:12px;letter-spacing:.08em;color:var(--ink-soft)}
.facts span::before{content:"·";margin-right:7px;color:var(--gold)}

/* 四種合作方式 */
.plans{display:grid;gap:var(--s3)}
.plan{position:relative;display:flex;flex-direction:column;padding:var(--s4);
  border:1px solid var(--line);background:var(--card);
  transition:border-color .25s ease,box-shadow .25s ease}
.plan .hd h3{font-family:var(--display);font-size:19px;letter-spacing:.16em;margin-bottom:6px}
.plan .who{display:block;min-height:2.6em;font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft)}
.plan dl{margin:var(--s3) 0;padding:var(--s2) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.plan dl>div{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;line-height:2}
.plan dt{color:var(--ink-soft);letter-spacing:.1em}
.plan dd{text-align:right;color:var(--ink)}
.plan dd.p{font-family:var(--serif);color:var(--cinnabar)}
.plan .note{flex:1;margin-bottom:var(--s3);font-size:12px;line-height:1.95;color:var(--ink-soft)}
.plan .btn{margin-top:auto}
.plan:hover{border-color:var(--gold);box-shadow:0 0 0 1px rgba(176,141,87,.3),0 14px 30px rgba(60,40,28,.1)}

/* 代理權益 */
.perks{display:grid;gap:var(--s4) var(--s5)}
.perk{position:relative;padding-left:18px}
.perk::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;
  border:1px solid var(--gold);transform:rotate(45deg)}
.perk b{display:block;margin-bottom:5px;font-family:var(--serif);font-weight:400;font-size:14px;letter-spacing:.14em}
.perk span{font-size:12.5px;line-height:1.95;color:var(--ink-soft)}

/* 合作流程 */
.steps{display:grid;gap:var(--s5)}
.step{border-top:2px solid var(--cinnabar);padding-top:var(--s3)}
.step b{display:block;margin-bottom:6px;font-family:var(--serif);font-weight:400;font-size:14.5px;letter-spacing:.12em}
.step span{font-size:12.5px;line-height:1.95;color:var(--ink-soft)}

/* FAQ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}

/* 申請表單：桌機兩欄 */
.fgrid{display:grid}
.prose-narrow p{max-width:74ch}

@media (min-width:560px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .perks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fgrid{grid-template-columns:1fr 1fr;gap:0 var(--s4)}
  .fgrid .wide{grid-column:1 / -1}
}
@media (min-width:1024px){
  .plans{grid-template-columns:repeat(4,minmax(0,1fr))}
  .perks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* 首頁那格只放四條，排成 2×2 比 3+1 好看 */
  [data-whole-perks]{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ════════ 渠道色收斂（2026-10-15）════════
   LINE／WhatsApp／微信 的品牌綠是辨識度，不能改；但同一個綠在頁腳清單、右下懸浮鈕、
   內文按鈕同時出現，整頁就雜。改法：只有「主通道」填品牌色，其餘走描邊，
   綠色在一屏裡只出現一次。顏色之外的圖示與文案不動，通道辨識不受影響。 */
.chlist .ic{background:transparent;border:1px solid currentColor}
.chlist .ic.wa{background:transparent;border-color:#1DA84F;color:#1DA84F}
.chlist .ic.ln{background:transparent;border-color:#04A344;color:#04A344}
.chlist .ic.wc{background:transparent;border-color:#069B4B;color:#069B4B}
.chlist .ic.mail{background:transparent;border-color:var(--ink-soft);color:var(--ink-soft)}
.chlist .ic.on{background:#25D366;border-color:#25D366;color:#0B3D20}
.chlist .ic.on.ln{background:#06C755;border-color:#06C755;color:#083D1E}
.chlist .ic.on.wc{background:#07C160;border-color:#07C160;color:#fff}
.chlist .ic.on.mail{background:var(--ink);border-color:var(--ink);color:var(--xuan)}
/* 頁腳底色是墨，描邊色改用暖金以免綠線在深底上發螢光 */
footer .chlist .ic{background:transparent;border-color:currentColor}
footer .chlist .ic.wa{background:transparent;border-color:#4FBF7F;color:#4FBF7F}
footer .chlist .ic.ln{background:transparent;border-color:#45C57A;color:#45C57A}
footer .chlist .ic.wc{background:transparent;border-color:#48BE7C;color:#48BE7C}
footer .chlist .ic.mail{background:transparent;border-color:#D9C49B;color:#D9C49B}
footer .chlist .ic.on{background:#25D366;border-color:#25D366;color:#0B3D20}
footer .chlist .ic.on.ln{background:#06C755;border-color:#06C755;color:#083D1E}
footer .chlist .ic.on.wc{background:#07C160;border-color:#07C160;color:#fff}
footer .chlist .ic.on.mail{background:#D9C49B;border-color:#D9C49B;color:#241F1A}

/* 右下懸浮鈕：主通道填色，次通道改象牙底＋品牌色圖示 */
.fab .wa,.fab .ln,.fab .wc,.fab .mail{background:var(--card);border:1px solid var(--line-strong)}
.fab .wa{color:#1DA84F}
.fab .ln{color:#04A344}
.fab .wc{color:#069B4B}
.fab .mail{color:var(--ink)}
.fab .wa.on{background:#25D366;border-color:#25D366;color:#0B3D20}
.fab .ln.on{background:#06C755;border-color:#06C755;color:#083D1E}
.fab .wc.on{background:#07C160;border-color:#07C160;color:#fff}
.fab .mail.on{background:var(--ink);border-color:var(--ink);color:var(--xuan)}

/* 內文渠道鈕：品牌色只留在圖示與描邊，不再鋪滿整顆。
   主轉化區——詢盤清單（.inqleft）、手機底部條（.bottombar）、首屏——維持填滿，
   那些位置本來就只有一顆按鈕，填色不會跟別的顏色打架。 */
.btn.wa,.btn.ln{background:var(--card);color:var(--ink)}
.btn.wa{border-color:#1DA84F}
.btn.ln{border-color:#04A344}
.btn.wa svg{fill:#1DA84F}
.btn.ln svg{fill:#04A344}
@media (min-width:900px){
  .btn.wa:hover{background:#25D366;border-color:#25D366;color:#0B3D20}
  .btn.ln:hover{background:#06C755;border-color:#06C755;color:#083D1E}
  .btn.wa:hover svg,.btn.ln:hover svg{fill:currentColor}
}
.inqleft .btn.wa{background:#25D366;border-color:#25D366;color:#0B3D20}
.inqleft .btn.ln{background:#06C755;border-color:#06C755;color:#083D1E}
.inqleft .btn.wa svg,.inqleft .btn.ln svg{fill:currentColor}

/* Telegram：同樣只走描邊，品牌藍留在圖示 */
.chlist .ic.tg{background:transparent;border-color:#229ED9;color:#229ED9}
.chlist .ic.on.tg{background:#229ED9;border-color:#229ED9;color:#fff}
footer .chlist .ic.tg{background:transparent;border-color:#5CB7E2;color:#5CB7E2}
footer .chlist .ic.on.tg{background:#229ED9;border-color:#229ED9;color:#fff}
.fab .tg{color:#229ED9}
.fab .tg.on{background:#229ED9;border-color:#229ED9;color:#fff}
.btn.tg{background:var(--card);color:var(--ink);border-color:#229ED9}
.btn.tg svg{fill:#229ED9}
@media (min-width:900px){
  .btn.tg:hover{background:#229ED9;border-color:#229ED9;color:#fff}
  .btn.tg:hover svg{fill:currentColor}
}

/* ════════ 商品詳情：主圖與商品描述 ════════
   實拍圖到位前，主圖做成「圖錄的一頁」：宣紙底、內圈黃銅細框、尺度參照角標。
   照片進來時把 <img> 放進 .mainimg 即可，內框與角標會自動疊上去。 */

/* 主圖輪播：手機水平滑動，桌機用縮圖切換；媒體可以是圖、影片或線描佔位 */
.gal{position:relative}
.galtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;border:1px solid var(--line);background:linear-gradient(180deg,#FCF9F2,#EFE9DA)}
.galtrack::-webkit-scrollbar{display:none}
.galtrack.single{cursor:default}
.galslide{position:relative;flex:0 0 100%;margin:0;scroll-snap-align:center;overflow:hidden;
  display:flex;align-items:center;justify-content:center;aspect-ratio:var(--r,4/3);padding:9%}
/* 內圈黃銅細框：墊在媒體之上，實拍圖進來時當統一收邊 */
.galslide::before{content:"";position:absolute;inset:14px;z-index:2;pointer-events:none;
  border:1px solid rgba(176,141,87,.3)}
.galslide-art svg{position:relative;z-index:1;width:100%;height:100%;max-width:340px;max-height:340px;
  stroke:var(--ink);fill:none;stroke-width:1.1;opacity:.86}
.galslide-img,.galslide-video{padding:0;background:#EDE7D9}
.galslide-img img,.galslide-video video{position:relative;z-index:1;display:block;
  width:100%;height:100%;object-fit:cover}
.galslide .seal-s{position:absolute;right:24px;top:24px;z-index:3;background:var(--cinnabar);color:#fff;
  font-family:var(--display);font-size:10px;line-height:1.15;letter-spacing:.2em;padding:6px 4px;
  writing-mode:vertical-rl;border-radius:2px}
.galslide figcaption{position:absolute;left:26px;right:26px;bottom:26px;z-index:3;display:flex;
  justify-content:space-between;gap:12px;font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft)}
.galslide-img figcaption,.galslide-video figcaption{left:0;right:0;bottom:0;padding:10px 24px;
  color:#F6EFE0;background:linear-gradient(180deg,rgba(24,20,16,0),rgba(24,20,16,.7))}
/* 尺度參照：底邊一道帶刻度的細線，沒有實拍時用來交代尺寸這件事 */
.galslide .scale{position:absolute;left:26px;right:26px;bottom:0;height:14px;z-index:3;opacity:.5;
  background-repeat:repeat-x;background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M.5 14V6M7.5 14V9' fill='none' stroke='%23B08D57' stroke-width='.9'/%3E%3Cpath d='M0 14h14' fill='none' stroke='%23B08D57' stroke-width='.9'/%3E%3C/svg%3E")}
/* 影片：居中播放鈕，播放中淡出，移入再出現 */
.playbtn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(246,239,224,.7);background:rgba(24,20,16,.45);
  transition:opacity .25s ease,background .25s ease}
.playbtn svg{width:24px;height:24px;fill:#F6EFE0}
.playbtn:hover{background:rgba(24,20,16,.68)}
.galslide.playing .playbtn{opacity:0}
.galslide.playing:hover .playbtn{opacity:1}
/* 縮圖列（多張時才出現） */
/* 縮圖列：多張圖時橫向排列，放不下就橫捲並亮出左右鍵 */
.galthumbs-bar{display:none;align-items:center;gap:8px;margin-top:12px}
.galthumbs{display:flex;flex:1;min-width:0;flex-wrap:nowrap;gap:8px;padding:2px 0;
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.galthumbs::-webkit-scrollbar{display:none}
.gth-nav{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line-strong);background:#fff;color:var(--ink);
  transition:opacity .2s ease,border-color .2s ease,background .2s ease}
.gth-nav svg{width:16px;height:16px}
.gth-nav:disabled{opacity:.26;cursor:default}
.gth-nav:not(:disabled):hover{border-color:var(--gold);background:#FFFDF9}
/* 縮圖放得下就不顯示箭頭——兩個禁用箭頭掛在那裡比沒有更怪 */
.galthumbs-bar:not(.overflow) .gth-nav{display:none}
.galthumb{position:relative;flex:none;width:64px;height:64px;padding:6px;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,#FCF9F2,#EFE9DA);
  display:flex;align-items:center;justify-content:center;transition:border-color .25s ease,box-shadow .25s ease}
.galthumb img{width:100%;height:100%;object-fit:cover}
.galthumb svg{width:72%;height:72%;stroke:var(--ink);fill:none;stroke-width:1.2;opacity:.8}
.galthumb.on{border-color:var(--red);box-shadow:0 0 0 1px rgba(167,50,41,.35)}
.galthumb .vbadge{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:50%;
  background:rgba(24,20,16,.72);display:flex;align-items:center;justify-content:center}
.galthumb .vbadge svg{width:8px;height:8px;fill:#fff;stroke:none;opacity:1}
.gal .dots{margin-top:10px}

@media (min-width:900px){
  /* 主圖位改淘寶式版式：縮圖豎排在主圖左側，主圖本身做高把視覺佔滿。
     左欄的空白不靠往下方塞內容解決——那會多一批沒人看的東西。 */
  /* 主圖是方圖，不是長方形——電商慣例，換圖時不用重拍。
     縮圖橫排在主圖下方，不佔側邊寬度：豎排縮圖更像淘寶，但代價是方圖小一號，
     左欄反而更空。橫排之後方圖吃滿整欄，左欄高度也才追得上右欄。 */
  .galthumbs-bar{display:flex}
  /* 縮圖放大到 96：一來看得清，二來左欄高度才追得上右欄，下方不留空白 */
  .galthumb{width:96px;height:96px}
  .galslide{padding:8%;aspect-ratio:1/1;height:auto}
  .galslide::before{inset:18px}
  .galslide-art svg{max-width:400px;max-height:400px}
  .gal .dots{display:none}
}

/* 商品描述 */
.dt-desc{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.dt-desc .prose p{margin-bottom:var(--s3)}
.dt-desc .prose h3{font-size:14.5px;letter-spacing:.16em;margin:var(--s5) 0 var(--s2)}
.dt-desc .prose h3:first-of-type{margin-top:var(--s4)}
/* 商品描述正文铺满：74ch 是长文阅读栏宽度，详情页两侧会空太多 */
.dt-desc .prose p,.dt-desc .prose ul{max-width:100%}
.dt-desc .prose img{width:100%;max-width:100%;margin:18px 0}
.dt-desc .note{font-size:11.5px;line-height:1.95;color:var(--ink-soft);margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--line)}
/* 圖文區塊：圖片可以單獨成段，整段都是圖也成立 */
.dblocks{margin-top:var(--s5)}
.dblocks h3{font-size:14.5px;letter-spacing:.16em;margin:var(--s5) 0 var(--s2)}
.dblocks h3:first-child{margin-top:0}
.dblocks p{max-width:74ch;font-size:14px;line-height:2.05;color:var(--ink-soft);margin-bottom:var(--s3)}
.dblocks ul{margin:0 0 var(--s3) 18px;color:var(--ink-soft);font-size:13.5px;line-height:2}
.dfig{margin:var(--s4) 0}
.dfig img,.dfig video{display:block;width:100%;aspect-ratio:var(--r,4/3);object-fit:cover;
  border:1px solid var(--line);background:#EDE7D9}
.dfig figcaption{margin-top:9px;font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft)}
.dfig.bleed{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
.dfig.bleed img,.dfig.bleed video{border-left:0;border-right:0}

/* 購買與配送：這幾條是問答，不是購買決策的一部分。
   留在右欄會把它拉長、左邊主圖跟著顯空，所以移到描述下方、整頁寬排兩欄。 */
.dt-qa{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.qa-grid{display:grid;gap:0 var(--s6)}
.qa-grid details{border-bottom:1px solid var(--line)}
@media (min-width:768px){.qa-grid{grid-template-columns:1fr 1fr}}

/* ════════ 內容區改白底（2026-10-15）════════
   原因：供應商與美編給的商品圖、詳情長圖幾乎都是白底，米黃底一貼上去就出現色塊接縫；
   白底也讓整頁更明亮規整。改成：頁面與內容區全白，暖紙色只留在少數裝飾區塊
   （通告框、專題卡、分節交替帶），深色仍是墨（頁頭、頁腳、首屏、標題帶）。
   白底上細線容易看不見，所以線色同時加深一階——這是配套動作，不能只改底色。 */
body{background:#FFFFFF}
:root{--line:rgba(92,76,54,.22);--line-strong:rgba(92,76,54,.38)}
.card .art{background:#FFFFFF}
.block-b .card .art{background:#FFFFFF}
.galtrack{background:#FFFFFF}
.galthumb{background:#FFFFFF}
/* 圖位用中性淺灰，等圖進來時不會跟白底打架，也不會跟暖紙色打架 */
.galslide-img,.galslide-video{background:#F4F2EE}
.dfig img,.dfig video{background:#F4F2EE}
.sec.dark{background:#F7F5F0}
.bottombar{background:rgba(255,255,255,.97)}
.sum,.field input,.field select,.field textarea{background:#FFFFFF}
/* ── 規格（SKU）：縮圖｜名稱＋規格價＋庫存｜數量步進。照淘寶的排法放在購買區 ── */
.skus{margin-top:var(--s4)}
/* 規格多的品項（例如十個鞋碼）自己出滑塊，不把右欄一路拉長 */
.skus-body{max-height:min(44vh,360px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.skus-body::-webkit-scrollbar{width:6px}
.skus-body::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
.skus-body::-webkit-scrollbar-track{background:transparent}
.skus-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:var(--s2)}
.skus-h b{font-family:var(--serif);font-weight:400;font-size:13.5px;letter-spacing:.16em}
.skus-h span{font-size:11.5px;color:var(--ink-soft)}
.sku{display:grid;grid-template-columns:50px minmax(0,1fr) auto;grid-template-rows:auto auto;
  column-gap:12px;row-gap:3px;align-items:center;padding:11px 8px;border-top:1px solid var(--line);
  cursor:pointer;transition:background .2s ease,box-shadow .2s ease}
.sku.on{background:linear-gradient(90deg,rgba(166,43,36,.05),rgba(166,43,36,0))}
/* 目前預覽中的規格：左緣一道朱砂短線，跟「已加數量」的底色區分開 */
.sku.sel{box-shadow:inset 2px 0 0 var(--cinnabar);background:linear-gradient(90deg,rgba(166,43,36,.05),rgba(166,43,36,0))}
.sk-th{grid-area:1/1/3/2;width:50px;height:50px;display:flex;align-items:center;justify-content:center;
  padding:5px;overflow:hidden;border:1px solid var(--line);background:#fff}
.sk-th img{width:100%;height:100%;object-fit:cover}
.sk-th svg{width:90%;height:90%;stroke:var(--ink);fill:none;stroke-width:1.15;opacity:.85}
.sk-n{grid-area:1/2/2/3;font-size:13px;line-height:1.7;letter-spacing:.02em}
.sk-m{grid-area:2/2/3/3;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-soft);letter-spacing:.06em}
.sk-m b{font-family:var(--serif);font-weight:400;font-size:13px;color:var(--red)}
.sk-q{grid-area:1/3/3/4;display:flex;align-items:stretch;border:1px solid var(--line-strong)}
.sk-q button{width:32px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:16px;line-height:1;color:var(--ink);transition:background .2s ease}
.sk-q button:hover{background:#F4F2EE}
.sk-q i{width:40px;line-height:36px;text-align:center;font-style:normal;font-size:13px;
  border-left:1px solid var(--line);border-right:1px solid var(--line)}
@media (max-width:420px){
  .sku{grid-template-columns:44px minmax(0,1fr) auto;column-gap:10px}
  .sk-th{width:44px;height:44px}
  .sk-q button{width:28px}
  .sk-q i{width:34px}
}
/* 通告框與專題卡也改白，中段維持整片白，靠金線與留白分區 */
.notice{background:#FFFFFF}
.topic{background:#FFFFFF}
.promo{background:#FFFFFF}
.sec.dark{background:#F8F7F4}
.sec.dark .sech-c h2{background:#F8F7F4}

/* 規格圖版：沒有實拍時的第二張圖，把規格當圖錄的一頁排版，
   這樣主圖位一開始就是畫廊（兩張、有縮圖），而不是一張圖孤零零掛著 */
.plate{position:relative;z-index:1;max-width:420px;text-align:center}
.plate b{display:block;margin-bottom:var(--s3);font-family:var(--display);font-size:15px;letter-spacing:.24em;color:var(--ink)}
.plate .tx{display:block;font-size:14px;line-height:2.2;letter-spacing:.08em;color:var(--ink-soft)}
.galthumb .tbadge{position:absolute;right:3px;bottom:3px;width:16px;height:16px;border-radius:50%;
  background:rgba(24,20,16,.72);color:#F6EFE0;font-size:9px;line-height:16px;text-align:center;font-style:normal}

/* 左欄改為跟隨：右欄折疊項比圖長，圖跟著滾才不會一路掛在半空 */
@media (min-width:900px){
  /* 這條必須壓在後面：第 457 行有一條無條件的 .dt padding，會把上面的 .dt{padding:0} 蓋掉，
     結果右欄標題比左圖低 20px。同權重下後者生效，所以在檔尾再宣一次。 */
  .dt{padding:0}
  /* 標籤行高收到 1.2，讓右欄第一行與左圖上沿齊平（行高 1.85 會多出約 4px 的視覺落差） */
  .dt .tag{display:block;line-height:1.2}
  .dtleft{position:sticky;top:calc(var(--bar) + 22px)}
  .dtright{position:static}
}

/* ════════ 朱砂主色與主按鈕（2026-10-15）════════
   原本的 #9E4034 彩度只有 50%，大面積鋪成按鈕會發悶、偏棕。改三件事：
   1. 色相往正紅收、彩度提到 62%，仍壓在深赭範圍，不變成正紅。
   2. 主按鈕從平塗改成極淺的上下漸層，再加一道黃銅內描邊——中式做法，紅底描金。
   3. 紅底上的字從純白改成暖象牙，純白壓在這種紅上會發灰，象牙才跟紙底同一家族。 */
.btn.cin{
  background:linear-gradient(180deg,#B33629,#95261E);
  border-color:#8A231B;
  color:var(--ivory);
  box-shadow:inset 0 0 0 1px rgba(214,182,130,.26),0 1px 2px rgba(58,18,12,.16)
}
.seal{color:var(--ivory)}
.chip.on{color:var(--ivory)}
.card .add.on{color:var(--ivory)}
@media (min-width:900px){
  .btn.cin:hover{
    background:linear-gradient(180deg,#9C2820,#7F1F18);
    border-color:#731C15;
    box-shadow:inset 0 0 0 1px rgba(214,182,130,.42),0 2px 7px rgba(58,18,12,.22)
  }
}

/* ── 全部器物：前端分頁 ───────────────────────── */
.pager{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line)}
.pgbtn{cursor:pointer;min-width:36px;height:36px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-soft);font:inherit;font-size:12.5px;letter-spacing:.04em}
.pgbtn.on{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.pgbtn:hover:not(:disabled):not(.on){border-color:var(--ink);color:var(--ink)}
.pgbtn:disabled{opacity:.35;cursor:not-allowed}
.pgstep{font-size:20px;line-height:1;padding:0 10px}
.pggap{padding:0 2px;color:var(--ink-soft)}
.pgstat{margin-left:8px;font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft)}
@media (max-width:559px){.pgstat{flex-basis:100%;text-align:center;margin:2px 0 0}}

/* ── 三條入門路徑：三張大卡片，產品方圖與整卡可點 ───────── */
.bundle-card .art{aspect-ratio:1/1;padding:0;background:#F7F5F0}
.bundle-card .bundle-hit .art > img{object-fit:contain;background:#F7F5F0}
.bundle-card .bundle-hit{display:block;color:inherit;text-decoration:none}
.bundle-card .bundle-title{display:block;color:inherit;text-decoration:none}
.bundle-card .bundle-cta{margin-top:10px}
.bundle-card .bundle-hit .art img{transition:transform .45s ease}
.bundle-card .bundle-hit:hover .art img{transform:scale(1.03)}