/* ============================================================================
   MAXDECAL STORE — SHOP (Frame One design language)
   黑 #0B0B0D + Maxdecal 紅 #E32027 + Archivo Black / IBM Plex Mono
   CJK:實心 Noto Sans TC 900(全站禁 text-stroke)
   ============================================================================ */
:root{
  --bg:#0B0B0D; --bg2:#111114; --panel:#16161A;
  --ink:#F4F2EF; --ink2:#A6A3AB; --ink3:#77747D;
  --red:#E32027; --red-t:#FF5A60; --line:#232228;
  --f-disp:'Archivo Black','Noto Sans TC',system-ui,sans-serif;
  --f-body:'Archivo','Noto Sans TC',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',monospace;
  --pad0:clamp(20px,4.5vw,72px);   /* 基準值(給要在上面疊置中容器的區塊參照) */
  --pad:var(--pad0);
  --ease:cubic-bezier(.22,.9,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select{font-family:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:#fff}
/* CJK 標題:實心 900,行高放寬(禁 text-stroke) */
html[lang^="zh"] .disp{font-weight:900;line-height:1.12;letter-spacing:.01em}
.disp{font-family:var(--f-disp);text-transform:uppercase}

/* ---------- top nav ---------- */
/* 導覽內容置中對齊全站同一個容器:1304px = sitenav 黑條的 max-width 1340 − 2×18 內距。
   背景仍然滿版,只有內容被收進中間那格(brand / xtreme 那些掛黑條的頁面就是這個位置)。*/
.nav{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:14px;
  padding:0 max(clamp(16px,3vw,40px),(100% - 1304px)/2);height:64px;
  background:linear-gradient(#0B0B0Dcc,#0B0B0D00);transition:background .35s var(--ease)}
.nav.solid{background:#0B0B0Df2;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav-logo{display:inline-flex;align-items:center;min-height:44px}   /* 觸控目標(圖仍是 28px) */
.nav-logo img{height:28px;width:auto}   /* 全站統一 v2(2026-08-06):logo 28px、選單 14px */
.nav-links{display:flex;gap:22px;margin-left:20px}
.nav-links a{font:500 14px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding:12px 0;position:relative;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;left:0;bottom:6px;height:2px;width:0;background:var(--red);transition:width .25s var(--ease)}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.on::after{width:100%}
/* 系列頁專用頁首:系列名牌 + 頁內錨點(比照 /m/shop-livery 的頁首) */
.nav-links.nav-series{gap:18px;align-items:center;min-width:0}
.nav-tag{font:400 11.5px/1 var(--f-mono);letter-spacing:.16em;color:var(--ink2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:46ch;padding-right:4px}
.nav-jump{font:500 14px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);
  padding:12px 0;position:relative;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
.nav-jump::after{content:'';position:absolute;left:0;bottom:6px;height:2px;width:0;background:var(--red);transition:width .25s var(--ease)}
.nav-jump:hover{color:var(--ink)}
.nav-jump:hover::after{width:100%}
@media(max-width:1080px){.nav-links.nav-series{display:flex}.nav-tag{display:none}}
@media(max-width:700px){.nav-links.nav-series{display:none}}
.nav-spacer{flex:1}
.nav-ico{display:flex;align-items:center;gap:6px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;color:var(--ink2);padding:10px;min-height:44px;min-width:44px;justify-content:center}
.nav-ico:hover{color:var(--ink)}
.nav-ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.6}
.cart-n{font:500 11px/1 var(--f-mono);background:var(--red);color:#fff;border-radius:2px;padding:3px 5px;margin-left:2px;min-width:18px;text-align:center}
.cart-n.zero{background:#3A3941}
.lang-btn{font:500 12px/1 var(--f-mono);letter-spacing:.1em;color:var(--ink2);border:1px solid var(--line);height:38px;padding:0 12px;transition:color .2s,border-color .2s}
.lang-btn:hover{color:var(--ink);border-color:var(--red)}
.menu-btn{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--f-mono);letter-spacing:.18em;color:var(--ink);
  border:1px solid var(--line);padding:0 16px;height:44px;transition:border-color .2s}
.menu-btn:hover{border-color:var(--red)}
.menu-btn .bars{display:inline-block;width:18px}
.menu-btn .bars i{display:block;height:2px;background:currentColor;margin:4px 0}
@media(max-width:1080px){.nav-links{display:none}}
@media(max-width:560px){.menu-btn{padding:0 12px;letter-spacing:.08em}}

/* ---------- fullscreen menu ---------- */
.overlay{position:fixed;inset:0;z-index:70;background:#0B0B0D;display:flex;flex-direction:column;
  transform:translateY(-102%);transition:transform .55s var(--ease);overflow-y:auto}
.overlay.open{transform:translateY(0)}
.ov-top{display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,40px);height:64px;flex:0 0 auto}
.ov-close{font:500 12px/1 var(--f-mono);letter-spacing:.18em;border:1px solid var(--line);padding:0 16px;height:44px}
.ov-close:hover{border-color:var(--red)}
.ov-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:40px;padding:24px clamp(16px,3vw,40px) 44px;align-content:start}
.ov-list{list-style:none}
.ov-list li{border-bottom:1px solid var(--line)}
.ov-list a{display:flex;align-items:baseline;gap:18px;padding:15px 0;transition:padding-left .25s var(--ease);min-height:48px}
.ov-list a:hover{padding-left:14px}
.ov-list .idx{font:400 12px/1 var(--f-mono);color:var(--red-t);min-width:32px}
.ov-list .word{font:400 clamp(24px,4.2vw,48px)/1.08 var(--f-disp);text-transform:uppercase}
html[lang^="zh"] .ov-list .word{font-weight:900}
.ov-list .sub{font:400 12px/1.4 var(--f-mono);color:var(--ink2);margin-left:auto;text-align:right;display:none}
@media(min-width:720px){.ov-list .sub{display:block}}
.ov-side{border-left:1px solid var(--line);padding-left:32px;display:flex;flex-direction:column;gap:22px}
.ov-side h4{font:400 11px/1 var(--f-mono);letter-spacing:.22em;color:var(--ink2);text-transform:uppercase;margin-bottom:10px}
.ov-side a{display:block;font:500 14px/2.3 var(--f-body);color:var(--ink2);min-height:32px}
.ov-side a:hover{color:var(--ink)}
@media(max-width:960px){.ov-body{grid-template-columns:minmax(0,1fr);gap:16px}
  .ov-side{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px;flex-direction:row;flex-wrap:wrap;gap:28px}}

/* ---------- shared ---------- */
main{min-height:70svh}
.chap{padding:clamp(56px,9vw,120px) var(--pad)}
.chap-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(26px,4vw,48px);border-bottom:1px solid var(--line);padding-bottom:18px;flex-wrap:wrap}
.chap-no{font:400 12px/1 var(--f-mono);color:var(--red-t);letter-spacing:.2em;white-space:nowrap}
.chap h2{font:400 clamp(24px,4vw,50px)/1.08 var(--f-disp);text-transform:uppercase}
html[lang^="zh"] .chap h2{font-weight:900;line-height:1.14}
.chap-link{margin-left:auto;font:500 12px/1.5 var(--f-mono);letter-spacing:.12em;color:var(--ink2);white-space:nowrap;padding:6px 0}
.chap-link:hover{color:var(--red-t)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:600 13px/1.2 var(--f-body);letter-spacing:.1em;text-transform:uppercase;
  padding:0 26px;height:52px;transition:transform .2s var(--ease),background .2s,color .2s;will-change:transform;text-align:center}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#fff;color:#0B0B0D}
.btn-ghost{border:1px solid #ffffff59;color:var(--ink)}
.btn-ghost:hover{border-color:#fff;background:#ffffff14}
.mono-note{font:400 12px/1.7 var(--f-mono);color:var(--ink2)}
.demo-star{color:var(--red-t)}

/* reveals — 捲動進場(2026-08-06 升級:方向變體 + 交錯延遲 --rvd + 主控 .rvh)
   .rv          預設上升淡入
   data-rv=…    left / right / scale / skew / clip / line 變體
   --rvd        交錯延遲(秒),由 app.js 在 markup 上寫 style="--rvd:.12s"
   .rvh         主控節點:自己不動,只負責把 .in 傳給子元素(見 .bill / .stat 等) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--rvd,0s)}
.rv.in{opacity:1;transform:none}
.rv[data-rv="left"]{transform:translateX(-44px)}
.rv[data-rv="right"]{transform:translateX(44px)}
.rv[data-rv="scale"]{transform:scale(.94)}
.rv[data-rv="skew"]{transform:translateY(54px) skewX(-4deg)}
.rv[data-rv="clip"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);
  transition:clip-path 1.05s var(--ease);transition-delay:var(--rvd,0s)}
.rv[data-rv="clip"].in{clip-path:inset(0 0 0 0)}
.rv[data-rv="line"]{opacity:1;transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ease);transition-delay:var(--rvd,0s)}
/* ⚠️ 必須放在所有變體之後:變體選擇器 (0,2,0) 與 .rv.in 同特異度,
   靠源碼順序取勝 —— 少了這條,left/right/scale 會永遠停在位移狀態。 */
.rv[data-rv].in{transform:none}

/* ---------- hero (home) ---------- */
/* ⚠️ 大標與固定 nav / hero-meta 的淨空(2026-08-06 使用者回報「大字壓到 menu」):
   欄向 flex + padding-top 保留頂部 chrome 區,內容用 margin-top:auto 貼底 —— 空間不足時
   內容往下溢出而不是往上壓到導覽列;字級再用 svh 上限自動收斂(見 .hero h1)。 */
.hero{position:relative;height:100svh;min-height:560px;overflow:clip;
  display:flex;flex-direction:column;padding-top:132px}
.hero-img{position:absolute;inset:0;background:url('assets/hero-livery.jpg') center 38%/cover no-repeat;animation:kenburns 22s var(--ease) both}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#0B0B0D66 0%,#0B0B0D00 30%,#0B0B0D00 55%,#0B0B0Df0 92%)}
.letterbox{position:absolute;left:0;right:0;height:9svh;background:#000;z-index:3}
.letterbox.t{top:0;transform-origin:top;animation:lbOpen 1.1s .25s var(--ease) both}
.letterbox.b{bottom:0;transform-origin:bottom;animation:lbOpen 1.1s .25s var(--ease) both}
@keyframes lbOpen{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.hero-meta{position:absolute;top:86px;left:var(--pad);z-index:4;font:400 11px/1.9 var(--f-mono);color:#D8D5DB;letter-spacing:.14em}
.hero-meta b{color:var(--red-t);font-weight:500}
.hero-inner{position:relative;z-index:4;width:100%;margin-top:auto;padding:0 var(--pad) clamp(40px,7svh,84px)}
/* 字級同時吃寬與高:min(vw,svh) 讓矮視窗自動收字,不會把三行大標推上導覽列 */
.hero h1{font:400 clamp(42px,min(8.6vw,12svh),112px)/0.94 var(--f-disp);text-transform:uppercase;letter-spacing:-.01em;max-width:14ch}
html[lang^="zh"] .hero h1{font-weight:900;font-size:clamp(40px,min(7.8vw,11svh),100px);line-height:1.08;letter-spacing:.01em}
.hero h1 .ln{display:block;overflow:clip}
.hero h1 .ln span{display:inline-block;animation:rise .9s var(--ease) both}
.hero h1 .ln:nth-child(2) span{animation-delay:.12s}
.hero h1 .ln:nth-child(3) span{animation-delay:.24s;color:var(--red)}
@keyframes rise{from{transform:translateY(110%)}to{transform:translateY(0)}}
.hero-sub{margin-top:18px;max-width:52ch;color:#D8D5DB;font-size:clamp(15px,1.4vw,17px)}
.hero-cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
/* 窄螢幕 hero-meta 會折成兩行(EN 字串較長)→ 頂部淨空再加一點 */
@media(max-width:720px){.hero{padding-top:150px}}
.scroll-cue{position:absolute;right:var(--pad);bottom:28px;z-index:4;font:400 10px/1 var(--f-mono);letter-spacing:.3em;color:#D8D5DB;
  writing-mode:vertical-rl;display:flex;align-items:center;gap:10px}
.scroll-cue::after{content:'';width:1px;height:44px;background:linear-gradient(var(--red),transparent);animation:cue 1.6s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- ticker ---------- */
.ticker{border-block:1px solid var(--line);overflow:clip;background:var(--bg2)}
.ticker-track{display:flex;width:max-content;animation:tick 36s linear infinite}
.ticker span{font:400 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);padding:16px 0;white-space:nowrap}
.ticker em{font-style:normal;color:var(--red-t);padding:0 22px}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- CH·02 六大類索引(list + 影像舞台)---------- */
.catsx-wrap{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);gap:clamp(24px,4vw,60px);align-items:stretch}
.catsx-list{list-style:none}
.catsx-list li{border-top:1px solid var(--line)}
.catsx-list li:last-child{border-bottom:1px solid var(--line)}
.catsx-list a{display:flex;align-items:center;gap:clamp(14px,2vw,26px);padding:clamp(16px,2.2vw,26px) 6px;
  transition:padding-left .3s var(--ease),background .3s;min-height:64px;position:relative}
.catsx-list a:hover,.catsx-list a.hot{padding-left:clamp(14px,1.6vw,22px)}
.cx-no{font:400 12px/1 var(--f-mono);color:var(--red-t);letter-spacing:.18em;flex:0 0 auto}
.cx-main{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.cx-name{font:400 clamp(20px,2.5vw,36px)/1.1 var(--f-disp);text-transform:uppercase;color:var(--ink);transition:color .25s}
html[lang^="zh"] .cx-name{font-weight:900;line-height:1.18}
.catsx-list a:hover .cx-name,.catsx-list a.hot .cx-name{color:var(--red-t)}
.cx-desc{font:400 13px/1.6 var(--f-body);color:var(--ink2);max-width:52ch}
.cx-meta{font:400 12px/1.6 var(--f-mono);color:var(--ink);white-space:nowrap;flex:0 0 auto}
.cx-meta b{font-weight:400;color:var(--ink2);font-size:10.5px;letter-spacing:.12em}
.cx-thumb{display:none}
.cx-arrow{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);display:grid;place-items:center;
  font:400 16px/1 var(--f-mono);color:var(--ink2);transition:background .25s,border-color .25s,color .25s;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.catsx-list a:hover .cx-arrow,.catsx-list a.hot .cx-arrow{background:var(--red);border-color:var(--red);color:#fff}
.catsx-stage{position:relative;overflow:clip;background:var(--panel);min-height:420px;
  clip-path:polygon(0 0,100% 2.5vw,100% 100%,0 calc(100% - 2.5vw))}
.catsx-stage .stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);transition:opacity .5s var(--ease),transform 1.2s var(--ease)}
.catsx-stage .stage-img.on{opacity:1;transform:scale(1)}
.stage-band{position:absolute;left:0;bottom:0;top:0;width:6px;z-index:2;transition:background .4s}
@media(max-width:960px){
  .catsx-wrap{grid-template-columns:minmax(0,1fr)}
  .catsx-stage{display:none}
  .cx-desc{display:none}
  .cx-meta{display:none}
  .cx-thumb{display:block;flex:0 0 auto;width:74px;height:56px;background-size:cover;background-position:center;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
  .cx-name{font-size:clamp(19px,5vw,24px)}
  .catsx-list a{padding:14px 2px;min-height:72px}
}

/* ---------- stats ---------- */
.stats{border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--bg2)}
@media(max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{padding:clamp(26px,4vw,48px) var(--pad);border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
@media(max-width:820px){.stat:nth-child(2n){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}}
.stat .n{font:400 clamp(30px,4.4vw,56px)/1 var(--f-disp);color:var(--ink)}
.stat .n em{font-style:normal;color:var(--red)}
.stat .k{font:400 11.5px/1.6 var(--f-mono);letter-spacing:.14em;color:var(--ink2);text-transform:uppercase;margin-top:10px}

/* ---------- feature quote ---------- */
.feature{position:relative;min-height:66svh;display:flex;align-items:flex-end;overflow:clip}
.feature>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.feature::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0B0B0De6 0%,#0B0B0D66 55%,#0B0B0D26)}
.feat-inner{position:relative;z-index:2;padding:clamp(48px,8vw,96px) var(--pad);max-width:760px}
.feat-inner .tag{font:400 11px/1.6 var(--f-mono);letter-spacing:.2em;color:var(--red-t)}
.feat-inner blockquote{font:400 clamp(22px,3.2vw,38px)/1.25 var(--f-disp);text-transform:uppercase;margin:16px 0 14px}
html[lang^="zh"] .feat-inner blockquote{font-weight:900;line-height:1.3}
.feat-inner figcaption{font:400 12px/1.8 var(--f-mono);color:#D8D5DB}

/* ---------- CTA band ---------- */
.band{border-top:1px solid var(--line);padding:clamp(56px,8vw,100px) var(--pad);display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:36px;align-items:center}
@media(max-width:820px){.band{grid-template-columns:minmax(0,1fr)}}
.band h2{font:400 clamp(24px,4vw,46px)/1.1 var(--f-disp);text-transform:uppercase}
html[lang^="zh"] .band h2{font-weight:900;line-height:1.18}
.band p{color:var(--ink2);margin-top:12px;max-width:52ch}
.band-cta{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);background:var(--bg2)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:28px;padding:clamp(40px,6vw,72px) var(--pad)}
@media(max-width:1000px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.foot-grid{grid-template-columns:minmax(0,1fr)}}
.foot-brand img{height:24px;width:auto;margin-bottom:16px}
.foot-brand p{font:400 12px/1.9 var(--f-mono);color:var(--ink2);max-width:32ch}
.fcol h4{font:400 11px/1 var(--f-mono);letter-spacing:.2em;color:var(--ink2);text-transform:uppercase;margin-bottom:14px}
.fcol a{display:block;font:400 13.5px/2.3 var(--f-body);color:var(--ink2);min-height:30px}
.fcol a:hover{color:var(--ink)}
.foot-base{border-top:1px solid var(--line);padding:18px var(--pad);display:flex;flex-wrap:wrap;gap:14px;align-items:center;font:400 11.5px/1.7 var(--f-mono);color:var(--ink2)}
.foot-base .sp{flex:1}

/* ============================================================
   SHOP — 共用 chips / 搜尋(系列頁的子分類列與 SKU 搜尋在用;#/shop 版面本體在檔尾)
   ============================================================ */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:500 12.5px/1.2 var(--f-body);letter-spacing:.04em;color:var(--ink2);border:1px solid var(--line);
  padding:0 14px;min-height:40px;display:inline-flex;align-items:center;gap:8px;transition:color .2s,border-color .2s,background .2s}
.chip .dot{width:9px;height:9px;border-radius:50%}
.chip .n{font:400 11px/1 var(--f-mono);color:var(--ink2)}
.chip:hover{color:var(--ink);border-color:#3A3941}
.chip.on{background:var(--ink);color:#0B0B0D;border-color:var(--ink)}
.chip.on .n{color:#55524A}
.shop-search{margin-left:auto;display:flex;align-items:center;border:1px solid var(--line);height:40px;min-width:200px}
.shop-search svg{width:15px;height:15px;stroke:var(--ink2);fill:none;stroke-width:1.8;margin:0 8px 0 12px}
.shop-search input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:400 13.5px/1 var(--f-body);padding:0 12px 0 0;height:100%}
.shop-search input::placeholder{color:var(--ink2)}
@media(max-width:760px){.shop-search{margin-left:0;width:100%}}

.series-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:18px var(--pad) clamp(56px,8vw,100px)}
@media(max-width:1180px){.series-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.series-grid{grid-template-columns:minmax(0,1fr)}}
.scard{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;text-align:left;
  transition:border-color .25s,transform .25s var(--ease)}
.scard:hover{border-color:#3A3941;transform:translateY(-4px)}
.scard-media{position:relative;aspect-ratio:16/8.5;overflow:clip}
.scard-plate{position:absolute;inset:0}
.scard-plate::after{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(-58deg,#0000 0 26px,#0b0b0d14 26px 32px),
  linear-gradient(120deg,#0000 40%,#0b0b0d59 96%)}
.scard-code{position:absolute;left:16px;bottom:10px;z-index:2;font:400 clamp(30px,3.4vw,44px)/1 var(--f-disp);color:#fff;
  text-transform:uppercase;text-shadow:0 2px 14px #0008}
.scard-cls{position:absolute;top:12px;left:16px;z-index:2;font:400 10.5px/1 var(--f-mono);letter-spacing:.18em;color:#fff;
  background:#0B0B0Db3;border:1px solid #ffffff2e;padding:7px 10px;text-transform:uppercase}
.scard-pc{position:absolute;top:12px;right:12px;z-index:2;font:500 11px/1 var(--f-mono);background:#0B0B0Dcc;color:#fff;
  border:1px solid #ffffff30;padding:7px 9px}
.scard-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1}
.scard-name{font:600 16px/1.35 var(--f-body)}
.scard-one{font:400 12.5px/1.7 var(--f-mono);color:var(--ink2)}
.scard-pos{font:400 13.5px/1.65 var(--f-body);color:var(--ink2)}
.scard-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line)}
.scard-roll{font:400 11.5px/1.5 var(--f-mono);color:var(--ink2)}
.scard-go{font:600 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#0B0B0D;
  padding:0 16px;height:40px;display:inline-flex;align-items:center;transition:background .2s,color .2s;white-space:nowrap}
.scard:hover .scard-go{background:var(--red);color:#fff}

/* ============================================================
   SERIES DETAIL — 黑紅白 LIVERY(比照 /m/shop-livery.html 的設計語言)
   黑色 hero 決標牌 → 紅色規格帶 → 白色選購區 → 紅色 CTA → 黑色頁尾(全站 chrome)
   ⚠️ 白底區塊的文字色一律用 --liv-* 這組(Frame One 的 --ink/--ink2 是給黑底用的)
   ============================================================ */
:root{
  --liv-black:#0B0B0C; --liv-line-d:#2A2A2E; --liv-red:#C2151F; --liv-red-ink:#B0121B;
  --liv-red-soft:#FFE3E4; --liv-red-lite:#FF6A72; --liv-mut-d:#B7B4AC; --liv-lede-d:#D5D2CA;
  --liv-ink:#101013; --liv-ink2:#3B3934; --liv-mut:#5E5A52; --liv-line:#E1DED6; --liv-ph:#F0EDE5;
  --tb-line:#ffffff6b;   /* 圖框 hairline(白 42%,在黑板上 ≈3.9:1) */
  --f-liv:'Archivo','Noto Sans TC',system-ui,sans-serif;
}
.sd{background:#fff;color:var(--liv-ink)}
/* livery 招牌字:Archivo 900 斜體大寫(拉丁);含中文的標題改 Noto 900 直立 */
.sd-disp,.sd-floor-t,.sd-ctaband h2,.ed-t{font-family:var(--f-liv);font-weight:900;font-style:italic;letter-spacing:.01em;text-transform:uppercase}
html[lang^="zh"] .sd-floor-t,html[lang^="zh"] .sd-ctaband h2,html[lang^="zh"] .ed-t{
  font-family:'Noto Sans TC',sans-serif;font-weight:900;font-style:normal;letter-spacing:0;text-transform:none}
/* 紅白斜切簽名條 */
.liv-rule{display:flex;gap:9px;margin:22px 0}
.liv-rule i{display:block;height:9px;width:52px;background:var(--liv-red);transform:skewX(-18deg)}
.liv-rule i:nth-child(2){width:20px;background:#fff}
.liv-rule i:nth-child(3){width:30px}

/* ---------- hero:黑色圖框(TITLE BLOCK)---------- */
/* ⚠️ .sd-hero 同時是 #/shop 入口頁的黑板(.sg-hero 沒有自己的規則)→ 通用規則不能動,
   圖框版的差異一律掛在 body.sd-view(只有系列頁會有這個 class)底下。 */
.sd-hero{position:relative;overflow:hidden;background:var(--liv-black);color:#fff;
  padding:calc(64px + clamp(26px,5vw,54px)) var(--pad) clamp(44px,5.5vw,68px)}
.sd-hero::after{content:'';position:absolute;left:-6%;right:-6%;bottom:0;height:10px;
  background:repeating-linear-gradient(-56deg,var(--liv-red) 0 26px,#fff 26px 34px,var(--liv-red) 34px 60px)}
/* 系列頁=工程圖語彙:hairline 格線才是簽名,斜紋帶會跟它打架 → 只在系列頁關掉 */
body.sd-view .sd-hero{padding-bottom:clamp(40px,5vw,60px)}
body.sd-view .sd-hero::after{display:none}
.sd-hero-in{max-width:1320px;margin-inline:auto}
/* 對位十字 + 右緣直排 rail(裝飾,但仍是文字 → 用過得了 4.5:1 的灰) */
.sd-reg{position:absolute;font:400 15px/1 var(--f-mono);font-style:normal;color:#8A867E;pointer-events:none;user-select:none}
.sd-reg-tl{top:74px;left:10px}
.sd-reg-br{bottom:12px;right:10px}
.sd-rail{position:absolute;right:14px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;z-index:1;
  font:400 10px/1 var(--f-mono);letter-spacing:.34em;color:#8A867E;white-space:nowrap;pointer-events:none;user-select:none}
.sd-crumb{font:400 12px/1.7 var(--f-mono);color:var(--liv-mut-d);display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.sd-crumb a{display:inline-flex;align-items:center;min-height:38px}
.sd-crumb a:hover{color:var(--liv-red-lite)}
.sd-crumb .cur{color:#fff}
.sd-kicker{font:400 12px/1 var(--f-mono);letter-spacing:.22em;color:var(--liv-red-lite);margin-bottom:16px}
.sd-disp{font-size:clamp(46px,7.6vw,104px);line-height:.94;color:#fff}

/* 標題欄:紅色代碼格 + 兩格 hairline metadata(系列身分不靠巨字,靠圖框登錄) */
.sd-tblock{display:grid;grid-template-columns:auto 1.4fr 1fr;border:1px solid var(--tb-line);
  background:#ffffff05;margin-bottom:clamp(26px,3.8vw,42px)}
.tb-code{display:flex;align-items:center;background:var(--liv-red);color:#fff;
  font-family:var(--f-liv);font-weight:900;font-style:italic;letter-spacing:.01em;
  font-size:clamp(28px,3.2vw,44px);line-height:1;padding:12px 26px 12px 22px;
  border-right:1px solid var(--tb-line);white-space:nowrap}
.tb-cell{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:12px 18px 13px;min-width:0}
.tb-name{border-right:1px solid var(--tb-line)}
.tb-k{font:400 10px/1.4 var(--f-mono);letter-spacing:.16em;color:var(--liv-mut-d)}
.tb-v{font:400 13.5px/1.5 var(--f-mono);letter-spacing:.05em;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 主列:標語 + 圖 */
.sd-main{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,52px);align-items:center}
/* 系列頁 hero 主標 = 該系列的定位句(比照 livery 的標語式大標;系列代碼留在 kicker 與麵包屑,
   不做「巨字系列代碼取代標題」——那個版本使用者看過後不喜歡) */
.sd-say{font-family:var(--f-liv);font-weight:900;font-style:italic;letter-spacing:.01em;
  font-size:clamp(26px,3.1vw,42px);line-height:1.1;color:#fff;max-width:20ch;text-wrap:balance}
html[lang^="zh"] .sd-say{font-family:'Noto Sans TC',sans-serif;font-style:normal;letter-spacing:0;
  font-size:clamp(24px,2.8vw,37px);line-height:1.34;max-width:19ch}
.sd-say + .liv-rule{margin-top:20px}
.sd-pos{margin-top:10px;max-width:46ch;font-size:clamp(15px,1.35vw,16.5px);line-height:1.8;color:var(--liv-lede-d)}
.sd-mark{margin-top:10px;max-width:52ch;font:400 12px/1.75 var(--f-mono);color:var(--liv-mut-d)}
.sd-actions{display:flex;gap:12px 16px;flex-wrap:wrap;align-items:center;margin-top:28px}
.sd-btn-a,.sd-btn-b{display:inline-flex;align-items:center;min-height:48px;padding:13px 30px;
  font:700 14.5px/1.2 var(--f-body);letter-spacing:.03em;transition:background .18s,border-color .18s,color .18s}
.sd-btn-a{background:var(--liv-red);color:#fff;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.sd-btn-a:hover{background:#9E0F18}
.sd-btn-b{border:1px solid #ffffff8c;color:#fff}
.sd-btn-b:hover{border-color:var(--liv-red-lite);color:var(--liv-red-lite)}
.sd-off{display:inline-flex;align-items:center;min-height:38px;font:400 12px/1.6 var(--f-mono);
  color:var(--liv-mut-d);border-bottom:1px solid #ffffff45}
.sd-off:hover{color:var(--liv-red-lite);border-color:var(--liv-red-lite)}
.sd-fig{position:relative;border:1px solid var(--liv-line-d);background:#141416;overflow:hidden}
/* 圖角裁切十字(工程圖的對位記號) */
.sd-fig::before,.sd-fig::after{content:'+';position:absolute;top:7px;z-index:2;pointer-events:none;
  font:400 13px/1 var(--f-mono);color:#fffc}
.sd-fig::before{left:9px}
.sd-fig::after{right:9px}
.sd-fig img{width:100%;height:clamp(230px,29vw,370px);object-fit:cover}
.sd-fig figcaption{display:flex;flex-direction:column;gap:5px;padding:12px 16px;border-top:3px solid var(--liv-red);
  font:400 11.5px/1.5 var(--f-mono);letter-spacing:.06em;color:var(--liv-mut-d);text-transform:uppercase}
.sd-figrow{display:flex;justify-content:space-between;gap:12px}
.sd-figrow span:last-child{color:#fff}
.sd-figno{color:#fff;letter-spacing:.12em}
.sd-figai{font-size:10.5px;letter-spacing:.1em;color:#96938C}

/* 統計帶:四格 hairline(款數 / 子分類 / 每卷尺寸 / 耐候),與標題欄同一套格線語言 */
.sd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--tb-line);
  background:#ffffff05;margin-top:clamp(26px,3.6vw,38px)}
.sd-stat{padding:13px 18px;border-right:1px solid var(--tb-line);min-width:0}
.sd-stat:last-child{border-right:0}
.sd-stat .k{font:400 10.5px/1.4 var(--f-mono);letter-spacing:.12em;color:var(--liv-mut-d);margin-bottom:5px;text-transform:uppercase}
.sd-stat .v{font:700 16px/1.4 var(--f-body);color:#fff;font-variant-numeric:tabular-nums}

/* ---------- 規格帶:紅色 ---------- */
.sd-specs{background:var(--liv-red);color:#fff}
/* 欄數 = 實際規格欄位數(3–5);上限 340px 讓「只有 1–2 欄」的系列不會被拉成整條空帶 */
.sd-specs-in{max-width:1320px;margin-inline:auto;padding-inline:var(--pad);counter-reset:spec;
  display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,340px))}
.sd-spec{padding:22px clamp(14px,1.8vw,26px);border-right:1px solid #ffffff59;min-width:0;counter-increment:spec}
/* 編號的規格格 = 圖說註記 01 — 材質 */
.sd-spec .k::before{content:counter(spec,decimal-leading-zero) ' — ';letter-spacing:.06em}
.sd-spec:first-child{padding-left:0}
.sd-spec:last-child{padding-right:0;border-right:0}
.sd-spec .k{font:400 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--liv-red-soft);text-transform:uppercase;margin-bottom:9px}
.sd-spec .v{font:600 14px/1.55 var(--f-body);color:#fff;overflow-wrap:anywhere}

/* ---------- 系列深度內容:紙白編輯區(規格帶與選購區之間)----------
   內容由 tools/www/gen_www_shells.mjs 烤進 shell(SEO:文字在初始 HTML 裡),
   app.js 只負責把節點搬進位置 → 這裡是唯一的樣式來源。紙白 #FAF9F6 與選購區的
   純白拉開層次,不必再加一條分隔帶。 */
.sd-ed{background:#FAF9F6;color:var(--liv-ink);border-bottom:1px solid var(--liv-line)}
.sd-ed-in{max-width:1320px;margin-inline:auto;padding:clamp(32px,4.6vw,60px) var(--pad)}
.ed-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.ed-sec + .ed-sec{margin-top:clamp(26px,3.4vw,42px);padding-top:clamp(24px,3.2vw,38px);border-top:1px solid var(--liv-line)}
@media (min-width:1000px){
  .ed-sec{grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:0 clamp(24px,3.2vw,56px)}
  .ed-h{position:sticky;top:124px;align-self:start}   /* 124 = nav 64 + 系列 sub-bar 44 + 16 */
}
.ed-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0}
.ed-no{font:400 12px/1.4 var(--f-mono);letter-spacing:.14em;color:var(--liv-red-ink)}
.ed-t{font-size:clamp(18px,1.9vw,23px);line-height:1.25;color:var(--liv-ink)}
.ed-lead p{font-size:clamp(15.5px,1.3vw,17px);line-height:1.85;color:var(--liv-ink2);max-width:70ch}
.ed-lead p + p{margin-top:14px}
/* 特色 / 技術注意:每條一列 hairline,原文自己的開頭升格成小標(見產生器 splitLead) */
.ed-hl,.ed-notes{list-style:none;max-width:74ch}
.ed-hl li,.ed-notes li{padding:13px 0;border-top:1px solid var(--liv-line);
  font-size:clamp(15px,1.2vw,16px);line-height:1.75;color:var(--liv-ink2)}
.ed-hl li:first-child,.ed-notes li:first-child{border-top:0;padding-top:0}
.ed-hl b,.ed-notes b{display:block;margin-bottom:4px;font-weight:700;color:var(--liv-ink)}
/* 應用:hairline 網格(gap 1px 露出底色當格線) */
.ed-apps{display:grid;gap:1px;background:var(--liv-line);border:1px solid var(--liv-line)}
@media (min-width:640px){ .ed-apps{grid-template-columns:repeat(2,minmax(0,1fr))} }
.ed-app{background:#fff;padding:16px 18px}
.ed-app h3{font:700 15px/1.4 var(--f-body);color:var(--liv-ink);margin-bottom:5px}
.ed-app p{font-size:15px;line-height:1.7;color:var(--liv-ink2)}
/* 系列圖庫:自家 CDN 的情境/實拍圖(點開看原圖) */
.ed-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.ed-gal a{display:block;aspect-ratio:4/3;background:var(--liv-ph);border:1px solid var(--liv-line);overflow:hidden}
.ed-gal img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.ed-gal a:hover{border-color:var(--liv-red-ink)}
.ed-gal a:hover img{transform:scale(1.05)}
/* FAQ:真的可展開的揭示清單 */
.ed-faq{max-width:74ch}
.ed-faq details{border-top:1px solid var(--liv-line)}
.ed-faq details:first-child{border-top:0}
.ed-faq summary{list-style:none;cursor:pointer;padding:14px 34px 14px 0;position:relative;
  font:600 15.5px/1.6 var(--f-body);color:var(--liv-ink)}
.ed-faq summary::-webkit-details-marker{display:none}
.ed-faq summary::after{content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font:400 18px/1 var(--f-mono);color:var(--liv-red-ink)}
.ed-faq details[open] summary::after{content:'–'}
.ed-faq summary:hover{color:var(--liv-red-ink)}
.ed-faq .ed-ans{padding:0 0 15px}
.ed-faq .ed-ans p{font-size:15.5px;line-height:1.8;color:var(--liv-ink2)}
.ed-faq .ed-ans p + p{margin-top:11px}
/* 拆列(同一官方系列的不同子分類)只放一條指回主列的連結,不重複整份長文 */
.sd-ed-ref .sd-ed-in{padding-block:clamp(20px,2.6vw,30px)}
.ed-ref{font-size:15.5px;line-height:1.8;color:var(--liv-ink2);max-width:74ch}
/* 行內連結:用 text-decoration 而非 border-bottom,才能靠 padding-block 把觸控
   目標補到 38px 而不讓底線跟著往下掉 */
.ed-ref a{color:var(--liv-red-ink);font-weight:600;padding-block:11px;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.ed-ref a:hover{color:var(--liv-ink)}

/* ---------- 選購區:白色賣場 ---------- */
.sd-floor{background:#fff;color:var(--liv-ink)}
/* 選購區內容收進與本頁其他區塊相同的 1320px 置中容器(規格帶 .sd-specs-in / 系列介紹
   .sd-ed-in / CTA .sd-cta-in 本來就是這一格)。原本只有這一區是滿版貼齊 --pad,
   寬螢幕上 SKU 卡會拉到 340px 幾乎頂到兩側;收進來之後左右各留一格空白。
   在容器上改寫 --pad → 底下的 floorhead / toolbar / subnav / sub-head(含紅色 kick 的
   left) / sku-grid 全部自動跟上,背景與分隔線仍然滿版。 */
body.sd-view .sd-floor{--pad:calc(var(--pad0) + max(0px,(100% - 1320px)/2))}
.sd-floorhead{padding:clamp(26px,3.4vw,40px) var(--pad) 14px}
.sd-floor-t{font-size:clamp(21px,2.3vw,28px);line-height:1.2;color:var(--liv-ink)}
/* 常駐工具列只留搜尋+筆數(標題不進 sticky,手機才不會被 64px nav + 高工具列吃掉畫面) */
.sd-toolbar{position:sticky;top:108px;z-index:40;background:#fffffff2;backdrop-filter:blur(10px);   /* 108 = nav 64 + 系列 sub-bar 44 */
  border-block:1px solid var(--liv-line);padding:13px var(--pad);display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap}
.sd-count{margin-left:auto;font:400 12.5px/1.6 var(--f-mono);color:var(--liv-mut)}
.sd-count b{color:var(--liv-ink);font-weight:500}
.sd-toolbar .shop-search{margin-left:0;flex:1 1 240px;max-width:420px;border-color:var(--liv-line);background:#fff}
.sd-toolbar .shop-search svg{stroke:var(--liv-mut)}
.sd-toolbar .shop-search input{color:var(--liv-ink)}
.sd-toolbar .shop-search input::placeholder{color:var(--liv-mut)}
.sd-toolbar .shop-search:focus-within{border-color:var(--liv-black)}
/* 白底上的共用零件重新配色(chips / 空狀態 / 骨架 / 註記) */
.sd-floor .chip{color:var(--liv-ink2);border-color:var(--liv-line)}
.sd-floor .chip .n{color:var(--liv-mut)}
.sd-floor .chip:hover{color:var(--liv-red-ink);border-color:var(--liv-red-ink)}
.sd-floor .chip.on{background:var(--liv-black);border-color:var(--liv-black);color:#fff}
/* 系列頁:選中的 chip 掛紅色檔案夾邊條(圖框語彙;入口頁 #/shop 的 chips 不套) */
body.sd-view .sd-floor .chip.on{box-shadow:inset 3px 0 0 var(--liv-red)}
.sd-floor .chip.on .n{color:#D7D4CD}
.sd-floor .mono-note{color:var(--liv-mut)}
.sd-floor .demo-star{color:var(--liv-red-ink)}
.sd-floor .skel{border-color:var(--liv-line);
  background:linear-gradient(100deg,#F4F2ED 40%,#E7E4DC 50%,#F4F2ED 60%);background-size:200% 100%}
.sd-floor .err-box{background:#FAF8F4;border-color:var(--liv-line)}
.sd-floor .err-box p{color:var(--liv-ink2)}
.sd-floor .btn-red{background:var(--liv-red);color:#fff}
.sd-floor .btn-red:hover{background:var(--liv-black);color:#fff}
.sd-floor .btn-ghost{border-color:var(--liv-line);color:var(--liv-ink)}
.sd-floor .btn-ghost:hover{border-color:var(--liv-black);background:#0000000a}

/* 子分類:導覽列 + 分段標題(標題可點,回到導覽列) */
.sd-subnav{padding:24px var(--pad) 4px}
.sd-block{position:relative}
.sd-block + .sd-block{margin-top:10px}
.sub-head{width:100%;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;position:relative;
  background:none;border:0;border-top:2px solid var(--liv-black);padding:16px var(--pad) 4px;
  text-align:left;cursor:pointer;transition:background .2s}
/* 結構靠黑色頂線,紅色短條當 livery kick */
.sub-head::before{content:'';position:absolute;top:-2px;left:var(--pad);width:58px;height:4px;background:var(--liv-red)}
.sub-head:hover,.sub-head:focus-visible{background:#0000000a}
.sub-head-no{font-family:var(--f-liv);font-weight:900;font-style:italic;font-size:15px;line-height:1;
  color:var(--liv-red-ink);flex:none;font-variant-numeric:tabular-nums}
.sub-head-t{font:600 14.5px/1.35 var(--f-body);letter-spacing:.01em;color:var(--liv-ink)}
/* SKU 區間:圖框語言用「範圍」說話 */
.sub-head-r{font:400 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--liv-mut);font-variant-numeric:tabular-nums}
.sub-head-n{font:400 11px/1 var(--f-mono);color:#fff;background:var(--liv-black);padding:5px 9px;flex:none;white-space:nowrap}
.sub-head-back{margin-left:auto;white-space:nowrap;font:400 11px/1 var(--f-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--liv-mut);transition:color .2s}
.sub-head-back .ar{margin-right:6px}
.sub-head:hover .sub-head-back,.sub-head:focus-visible .sub-head-back{color:var(--liv-red-ink)}
@media(hover:none){.sub-head-back{color:var(--liv-red-ink)}}
@media(max-width:560px){.sub-head{padding-top:14px}.sub-head-back{font-size:11px;letter-spacing:.04em}}
.sd-block .sku-grid{padding-top:16px;padding-bottom:26px}
/* 每行最多 5 支:min 軌道取 max(200px, 五等分寬) → 寬螢幕封頂 5 欄,窄螢幕照舊自動遞減 */
.sku-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(200px,(100% - 4*14px)/5),1fr));gap:14px;padding:20px var(--pad) clamp(46px,7vw,80px)}
@media(max-width:560px){.sku-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.sku{background:#fff;border:1px solid var(--liv-line);display:flex;flex-direction:column;text-align:left;
  transition:border-color .2s,transform .2s var(--ease);cursor:pointer;min-height:44px}
.sku:hover{border-color:var(--liv-black);transform:translateY(-3px)}
.sku-media{position:relative;aspect-ratio:4/3;overflow:clip;background:var(--liv-ph)}
.sku-media img{width:100%;height:100%;object-fit:cover}
/* 照片型 SKU(官網產品照皆為 1:1):圖區改正方形完整顯示,不裁切 */
.sku-media.ph{aspect-ratio:1/1}
/* 色票:內縮 hairline 讓白色色票在白底也看得見 */
.sku-sw{position:absolute;inset:0;box-shadow:inset 0 0 0 1px #00000021}
.sku-sw::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,#ffffff42 0%,#0000 36%)}
.sku-body{padding:12px 12px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.sku-code{font:400 11.5px/1.4 var(--f-mono);color:var(--liv-mut);letter-spacing:.05em;word-break:break-all;font-variant-numeric:tabular-nums}
.sku-name{font:600 13.5px/1.4 var(--f-body);color:var(--liv-ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sku-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px}
.sku-price{font:500 13px/1.2 var(--f-mono);color:var(--liv-ink)}
.sku-price small{color:var(--liv-mut);font-size:10.5px;margin-left:2px}
.sku-buy{font:600 10.5px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--liv-line);
  color:var(--liv-ink2);padding:0 12px;height:36px;display:inline-flex;align-items:center;transition:background .2s,color .2s,border-color .2s}
.sku:hover .sku-buy{background:var(--liv-red);border-color:var(--liv-red);color:#fff}
@media(max-width:560px){.sku-buy{height:40px}}

/* ---------- CTA:紅色帶 + 黑色斜切 ---------- */
.sd-ctaband{position:relative;overflow:hidden;background:var(--liv-red);color:#fff}
.sd-ctaband::before{content:'';position:absolute;top:-60px;bottom:-60px;right:-110px;width:200px;
  background:var(--liv-black);transform:skewX(-14deg)}
.sd-cta-in{position:relative;z-index:1;max-width:1320px;margin-inline:auto;padding:clamp(46px,6vw,72px) var(--pad)}
.sd-cta-k{font:400 12px/1 var(--f-mono);letter-spacing:.22em;color:var(--liv-red-soft);margin-bottom:14px}
.sd-ctaband h2{font-size:clamp(27px,3.4vw,44px);line-height:1.06;max-width:22ch;color:#fff}
html[lang^="zh"] .sd-ctaband h2{line-height:1.28}
.sd-cta-sub{margin:16px 0 26px;font-size:15px;line-height:1.8;color:var(--liv-red-soft);max-width:52ch}
.sd-cta-btn{display:inline-flex;align-items:center;min-height:50px;background:#fff;color:var(--liv-red-ink);
  font:700 15px/1.2 var(--f-body);letter-spacing:.03em;padding:14px 34px;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:background .18s,color .18s}
.sd-cta-btn:hover{background:var(--liv-black);color:#fff}
.sd-cta-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- 規格視窗:系列頁走白色 livery 版 ---------- */
body.sd-view .buy{background:#fff;border-color:var(--liv-line)}
body.sd-view .buy-vis{background:var(--liv-ph)}
body.sd-view .buy-sku{color:var(--liv-red-ink)}
body.sd-view .buy-name{color:var(--liv-ink)}
body.sd-view .buy-spec .k{color:var(--liv-mut)}
body.sd-view .buy-spec .v{color:var(--liv-ink)}
body.sd-view .opt-k{color:var(--liv-mut)}
body.sd-view .opt{color:var(--liv-ink2);border-color:var(--liv-line)}
body.sd-view .opt:hover{color:var(--liv-ink);border-color:var(--liv-black)}
body.sd-view .opt.on{background:var(--liv-black);border-color:var(--liv-black);color:#fff}
body.sd-view .qty{border-color:var(--liv-line)}
body.sd-view .qty button{color:var(--liv-ink2)}
body.sd-view .qty button:hover{color:var(--liv-red-ink)}
body.sd-view .qty span{color:var(--liv-ink)}
body.sd-view .buy-price{color:var(--liv-ink)}
body.sd-view .buy-price small{color:var(--liv-mut)}
body.sd-view .buy-add{background:var(--liv-red);color:#fff}
body.sd-view .buy-add:hover{background:var(--liv-black);color:#fff}
body.sd-view .buy-note{color:var(--liv-mut)}
body.sd-view .buy-note .demo-star{color:var(--liv-red-ink)}
body.sd-view .buy-links a{color:var(--liv-mut);border-color:var(--liv-line)}
body.sd-view .buy-links a:hover{color:var(--liv-red-ink);border-color:var(--liv-red-ink)}
body.sd-view .buy-off{color:var(--liv-red-ink)}
body.sd-view .buy-off:hover{color:#fff;background:var(--liv-red-ink)}
body.sd-view .buy-about{border-color:var(--liv-line)}
body.sd-view .buy-about::before{background:var(--liv-red)}
body.sd-view .buy-about-k{color:var(--liv-red-ink)}
body.sd-view .buy-about-t{color:var(--liv-ink2);opacity:1}
body.sd-view .buy-about-k em{color:var(--liv-mut)}
body.sd-view .buy-about-t b{color:var(--liv-ink)}
body.sd-view .buy-facts{border-color:var(--liv-line)}
body.sd-view .buy-fact .k{color:var(--liv-mut)}
body.sd-view .buy-fact b{color:var(--liv-ink)}
body.sd-view .buy-tbl,body.sd-view .buy-tbl th,body.sd-view .buy-tbl td{border-color:var(--liv-line)}
body.sd-view .buy-tbl th{color:var(--liv-mut)}
body.sd-view .buy-tbl tr.key th{color:var(--liv-ink2)}
body.sd-view .buy-tbl tr.key th::before{background:var(--liv-red)}
body.sd-view .buy-tbl td{color:var(--liv-ink)}
body.sd-view .buy-tbl tr:not(.g):nth-child(odd) th,body.sd-view .buy-tbl tr:not(.g):nth-child(odd) td{background:color-mix(in srgb,var(--liv-ph) 55%,transparent)}
body.sd-view .buy-tbl tr:not(.g):hover th,body.sd-view .buy-tbl tr:not(.g):hover td{background:var(--liv-red-soft)}
body.sd-view .buy-tbl tr.g th{color:var(--liv-ink);background:var(--liv-ph)}
body.sd-view .buy-tbl tr.g th .no{color:var(--liv-red-ink)}
body.sd-view .buy-tbl tr.g th em{color:var(--liv-mut)}
body.sd-view .buy-tags span,body.sd-view .buy-chip{border-color:var(--liv-line);color:var(--liv-ink)}
body.sd-view .buy-grip{background:#fff}
body.sd-view .buy-grip span{background:var(--liv-mut)}
body.sd-view .buy-bar{background:#fff;border-color:var(--liv-line)}
body.sd-view .buy-bar-s{color:var(--liv-mut)}
body.sd-view .buy-bar-s b{color:var(--liv-ink)}
body.sd-view .buy-bar-s .k{color:var(--liv-mut)}
body.sd-view .buy-bar-add{background:var(--liv-red);color:#fff}

/* ---------- 手機 ---------- */
@media(max-width:860px){
  .sd-hero{padding-bottom:36px}
  .sd-rail,.sd-reg{display:none}
  /* 標題欄:代碼 + 官方名一列,識別名整列落到下面(不隱藏內容) */
  .sd-tblock{grid-template-columns:auto minmax(0,1fr)}
  .tb-code{font-size:27px;padding:10px 18px}
  .tb-name{border-right:0}
  .tb-id{grid-column:1/-1;border-top:1px solid var(--tb-line)}
  .tb-v{white-space:normal;font-size:13px}
  .sd-main{grid-template-columns:minmax(0,1fr);gap:26px}
  .sd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd-stat:nth-child(2n){border-right:0}
  .sd-stat:nth-child(-n+2){border-bottom:1px solid var(--tb-line)}
  .sd-stat .v{font-size:15.5px}
  .sd-stat .k{font-size:11px}
  .sd-fig img{height:clamp(190px,44vw,260px)}
  .sd-say,html[lang^="zh"] .sd-say{font-size:clamp(26px,7vw,34px);max-width:none}
  .sd-specs-in{grid-template-columns:repeat(2,minmax(0,1fr));padding-inline:var(--pad)}
  .sd-spec{padding:18px 16px;border-bottom:1px solid #ffffff59}
  .sd-spec:first-child,.sd-spec:nth-child(odd){padding-left:0}
  .sd-spec:nth-child(2n){border-right:0;padding-right:0}
  .sd-spec:last-child{border-bottom:0}
  .sd-floorhead{padding-bottom:12px}
  .sd-toolbar{padding-block:11px;gap:8px 12px}
  .sd-toolbar .shop-search{flex:1 1 100%;max-width:none}
  .sd-count{margin-left:0}
  .sd-spec .v,.sd-pos{font-size:15px}
  .sd-count,.sd-crumb,.sd-mark,.sub-head-r,.sub-head-n{font-size:12px}
  .sku-name{font-size:15px}
  .sku-code{font-size:12px}
  .sku-price{font-size:13.5px}
  .sub-head-t{font-size:15px}
  .sd-ctaband::before{display:none}
  .sd-cta-sub{font-size:15px}
}

/* loading / error */
.load-wrap{padding:26px var(--pad) 60px}
.skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(200px,(100% - 4*12px)/5),1fr));gap:12px}
.skel{aspect-ratio:4/4.2;background:linear-gradient(100deg,var(--panel) 40%,#1C1C21 50%,var(--panel) 60%);background-size:200% 100%;animation:sk 1.2s linear infinite;border:1px solid var(--line)}
@keyframes sk{to{background-position:-200% 0}}
.err-box{border:1px solid var(--line);background:var(--bg2);padding:26px;max-width:560px}
.err-box p{color:var(--ink2);font:400 13px/1.8 var(--f-mono)}
.err-box .btn{margin-top:16px;height:44px}

/* ============================================================
   BUY PANEL (modal)
   ============================================================ */
.veil{position:fixed;inset:0;background:#000a;z-index:80;opacity:0;pointer-events:none;transition:opacity .3s}
.veil.on{opacity:1;pointer-events:auto}
.buy{position:fixed;z-index:82;inset:auto 0 0 0;max-height:92svh;overflow-y:auto;background:var(--bg2);border-top:1px solid var(--line);
  transform:translateY(103%);transition:transform .45s var(--ease)}
@media(min-width:861px){.buy{inset:50% auto auto 50%;transform:translate(-50%,-46%);opacity:0;pointer-events:none;
  width:min(860px,94vw);max-height:88svh;border:1px solid var(--line);transition:opacity .3s,transform .3s var(--ease)}}
.buy.open{transform:translateY(0);pointer-events:auto}
@media(min-width:861px){.buy.open{transform:translate(-50%,-50%);opacity:1}.buy.buy-beta{width:min(1040px,94vw)}}
.buy-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
@media(max-width:860px){.buy-grid{grid-template-columns:minmax(0,1fr)}}
.buy-vis{position:relative;min-height:240px;background:var(--panel)}
@media(max-width:860px){.buy-vis{aspect-ratio:16/9;min-height:0}}
.buy-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.buy-vis.ph img{object-fit:contain}
.buy-vis .sw{position:absolute;inset:0}
.buy-vis .sw::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,#ffffff26 0%,#0000 40%)}
.buy-close{position:absolute;top:12px;right:12px;z-index:5;width:44px;height:44px;display:grid;place-items:center;
  background:#0B0B0Dd9;color:#fff;font:400 18px/1 var(--f-mono);border:1px solid #ffffff30}
.buy-close:hover{border-color:var(--red)}
.buy-nav{position:absolute;top:50%;translate:0 -50%;z-index:5;width:44px;height:56px;display:grid;place-items:center;
  background:#0B0B0Dd9;color:#fff;font:400 24px/1 var(--f-mono);border:1px solid #ffffff30}
.buy-nav.prev{left:12px}.buy-nav.next{right:12px}
.buy-nav:hover:not(:disabled){border-color:var(--red)}
.buy-nav:disabled{opacity:.32;cursor:default}
.buy-pos{position:absolute;right:12px;bottom:10px;z-index:5;padding:5px 10px;background:#0B0B0Dd9;color:#fff;
  font:400 11px/1 var(--f-mono);letter-spacing:.08em;border:1px solid #ffffff30}
.buy-info{padding:clamp(20px,3vw,30px);display:flex;flex-direction:column;gap:14px}
/* 2026-08-22 使用者:規格視窗字體參考 XTREME 特輯燈箱(眉標 Space Grotesk 小字距大寫、大標/群組標 Saira Condensed 800 italic、值 Archivo 600;去 mono)*/
.buy-sku{font:700 11.5px/1.4 'Space Grotesk',var(--f-body);color:var(--red-t);letter-spacing:.18em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
/* 官方產品頁:小紅地球(2026-08-22 使用者;有 productUrl 才出現) */
.buy-off{margin-left:auto;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  color:var(--red-t);border-radius:50%;transition:color .2s,background .2s}
.buy-off svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.buy-off:hover{color:#fff;background:var(--red)}
.buy-name{font:italic 800 clamp(22px,2.5vw,28px)/1.1 'Saira Condensed',var(--f-body);text-transform:uppercase;letter-spacing:.01em}
.buy-spec{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:7px 18px;align-items:baseline}
.buy-spec .k{font:700 10px/1.6 'Space Grotesk',var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);white-space:nowrap}
.buy-spec .v{font:600 14px/1.55 var(--f-body);color:var(--ink);overflow-wrap:anywhere}
.opt-k{font:700 10.5px/1 'Space Grotesk',var(--f-body);letter-spacing:.18em;color:var(--ink2);text-transform:uppercase;margin-bottom:8px}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{font:600 13px/1.2 var(--f-body);color:var(--ink2);border:1px solid var(--line);padding:0 14px;min-height:42px;
  display:inline-flex;align-items:center;transition:color .2s,border-color .2s,background .2s}
.opt:hover{border-color:#3A3941;color:var(--ink)}
.opt.on{background:var(--ink);color:#0B0B0D;border-color:var(--ink)}
.buy-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:2px}
.qty{display:inline-flex;border:1px solid var(--line)}
.qty button{width:42px;height:46px;font:400 15px/1 var(--f-body);color:var(--ink2)}
.qty button:hover{color:var(--red-t)}
.qty span{width:44px;display:grid;place-items:center;font:600 14px/1 var(--f-body)}
.buy-price{font:500 20px/1.2 var(--f-body)}
.buy-price small{color:var(--ink2);font-size:11px;margin-left:4px}
.buy-add{margin-top:4px;height:52px;font:italic 800 17px/1 'Saira Condensed',var(--f-body);letter-spacing:.08em;text-transform:uppercase;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.buy-note{font:400 12px/1.7 var(--f-body);color:var(--ink2)}
.buy-links{display:flex;gap:16px;flex-wrap:wrap;font:400 12.5px/1.8 var(--f-body)}
.buy-links a{color:var(--ink2);border-bottom:1px solid var(--line);padding:2px 0}
.buy-links a:hover{color:var(--red-t);border-color:var(--red-t)}
/* ---------- 產品資料表(視窗下半段全寬:左「關於本系列」| 右單一張規格表;9700 試行) ---------- */
.buy-grip{display:none}
.buy-about{padding:clamp(22px,3vw,32px) clamp(20px,3vw,30px) clamp(24px,3vw,34px);border-top:1px solid var(--line);position:relative;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:28px clamp(28px,4vw,52px);align-items:start}
.buy-about::before{content:"";position:absolute;top:-1px;left:clamp(20px,3vw,30px);width:44px;height:2px;background:var(--red)}
.buy-about-l{position:sticky;top:0}
.buy-about-k{font:700 11px/1.4 'Space Grotesk',var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--red-t);margin-bottom:12px}
.buy-about-k.gap{margin-top:24px}
.buy-about-k em{font-style:normal;font-weight:500;letter-spacing:.08em;color:var(--ink2)}
.buy-about-t{margin:0;font:400 15px/1.8 var(--f-body);color:var(--ink);opacity:.9;max-width:52ch}
.buy-links-l{margin-top:16px}
.buy-about-t b{font-weight:700;color:var(--ink);opacity:1}
.buy-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;border-top:1px solid var(--line);padding-top:16px}
.buy-fact{display:flex;flex-direction:column;gap:5px;min-width:0}
.buy-fact .k{font:700 10px/1.3 'Space Grotesk',var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.buy-fact b{font:600 15.5px/1.35 var(--f-body);color:var(--ink);overflow-wrap:anywhere}
.buy-tbl{width:100%;border-collapse:collapse;font:400 14px/1.55 var(--f-body);border:1px solid var(--line)}
.buy-tbl th,.buy-tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
.buy-tbl th{width:11em;font:700 10.5px/1.9 'Space Grotesk',var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);border-right:1px solid var(--line);position:relative}
.buy-tbl td{color:var(--ink);overflow-wrap:anywhere}
.buy-tbl tr.key th::before{content:"";position:absolute;left:0;top:0;bottom:-1px;width:3px;background:var(--red)}
.buy-tbl tr.key th{color:var(--ink);padding-left:17px}
.buy-tbl tr.key td{font-weight:600}
.buy-tbl tr:not(.g):nth-child(odd) th,.buy-tbl tr:not(.g):nth-child(odd) td{background:color-mix(in srgb,var(--panel) 55%,transparent)}
.buy-tbl tr:not(.g):hover th,.buy-tbl tr:not(.g):hover td{background:color-mix(in srgb,var(--red) 7%,transparent)}
.buy-tbl tr.g th{width:auto;border-right:0;padding:8px 14px;color:var(--ink);background:var(--panel)}
.buy-tbl tr.g th .gh{display:flex;align-items:center;gap:10px;font:italic 800 15px/1.3 'Saira Condensed',var(--f-body);letter-spacing:.05em;text-transform:uppercase}
.buy-tbl tr.g th .no{font:inherit;color:var(--red-t)}
.buy-tbl tr.g th em{margin-left:auto;font:500 10px/1.3 'Space Grotesk',var(--f-body);font-style:normal;letter-spacing:.12em;color:var(--ink2)}
.buy-tbl tbody + tbody tr.g th{border-top:1px solid var(--line)}
.buy-skuv{font:italic 800 19px/1.1 'Saira Condensed',var(--f-body);letter-spacing:.02em;text-transform:uppercase}
.buy-chip{display:inline-block;font:700 10.5px/1.5 'Space Grotesk',var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--line);color:var(--ink)}
.buy-tags{display:flex;flex-wrap:wrap;gap:6px}
.buy-tags span{font:700 10.5px/1.5 'Space Grotesk',var(--f-body);letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--line);color:var(--ink)}
/* 手機/窄幅:單欄 + 黏底動作列 */
.buy-bar{display:none}
@media(max-width:860px){
  .buy-grip{display:grid;place-items:center;position:sticky;top:0;z-index:6;width:100%;height:24px;background:var(--bg2)}
  .buy-grip span{width:44px;height:4px;border-radius:2px;background:var(--ink3);opacity:.6}
  .buy-about{grid-template-columns:minmax(0,1fr);gap:26px}
  .buy-about-l{position:static}
  .buy-about-t{font-size:15px;max-width:none}
  .buy-tbl{font-size:14.5px;line-height:1.5}
  .buy-tbl th{width:7.5em;white-space:normal;padding-right:12px}
  .buy-tbl th,.buy-tbl td{padding-top:10px;padding-bottom:10px;padding-left:12px;padding-right:12px}
  .buy-tbl tr.key th{padding-left:15px}
  .buy-tbl tr.g th{padding:9px 12px}
  .buy-tags span,.buy-chip{font-size:13px}
  .buy-fact b{font-size:15px}
  .buy-beta .buy-info .buy-add,.buy-beta .buy-info .buy-links{display:none}
  .buy-bar{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:var(--bg2);border-top:1px solid var(--line);box-shadow:0 -10px 24px -14px #0008}
  .buy-bar-s{display:flex;flex-direction:column;min-width:0;flex:1;font:400 12px/1.35 var(--f-body);color:var(--ink2)}
  .buy-bar-s .k{font:700 10px/1.35 'Space Grotesk',var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
  .buy-bar-s b{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buy-bar-s .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buy-bar-add{height:48px;padding:0 20px;flex:0 0 auto;font:italic 800 14px/1 'Saira Condensed',var(--f-body);letter-spacing:.08em;text-transform:uppercase;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
}
/* ============================================================
   CART DRAWER
   ============================================================ */
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);background:var(--bg2);z-index:81;border-left:1px solid var(--line);
  transform:translateX(103%);transition:transform .45s var(--ease);display:flex;flex-direction:column}
.drawer.open{transform:none}
.dr-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}
.dr-head b{font:400 15px/1.3 var(--f-disp);text-transform:uppercase;letter-spacing:.04em}
html[lang^="zh"] .dr-head b{font-weight:900}
.dr-close{font:400 20px/1 var(--f-mono);padding:8px 12px;min-height:44px;min-width:44px}
.dr-items{flex:1;overflow-y:auto;padding:10px 22px}
.dr-empty{padding:40px 0;text-align:center;color:var(--ink2);font:400 13px/2 var(--f-mono)}
.dr-it{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.dr-sw{width:60px;height:60px;border:1px solid var(--line);background-size:cover;background-position:center}
.dr-it .nm{font:600 13.5px/1.45 var(--f-body)}
.dr-it .mt{font:400 11.5px/1.7 var(--f-mono);color:var(--ink2)}
.dr-it .qty{margin-top:8px}
.dr-it .qty button{width:34px;height:38px}
.dr-it .qty span{width:36px}
.dr-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.dr-pr{font:500 13px/1.2 var(--f-mono);text-align:right}
.dr-rm{font:400 11px/1 var(--f-mono);color:var(--ink2);padding:8px;min-height:36px}
.dr-rm:hover{color:var(--red-t)}
.dr-foot{border-top:1px solid var(--line);padding:16px 22px 22px}
.dr-line{display:flex;justify-content:space-between;font:400 12.5px/2 var(--f-mono);color:var(--ink2)}
.dr-line.total{color:var(--ink);font-size:14.5px;margin:4px 0 14px}
.dr-note{font:400 11px/1.7 var(--f-mono);color:var(--ink2);margin-top:10px}
.btn-w{width:100%;justify-content:center}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,80px);z-index:90;background:var(--ink);color:#0B0B0D;
  font:600 13px/1.2 var(--f-body);padding:14px 22px;transition:transform .35s var(--ease);pointer-events:none;letter-spacing:.04em}
.toast.on{transform:translate(-50%,0)}

/* ============================================================
   CHECKOUT
   ============================================================ */
.co-wrap{padding:calc(64px + clamp(30px,6vw,64px)) var(--pad) clamp(56px,8vw,100px);max-width:1080px}
.co-wrap .kicker{font:400 12px/1 var(--f-mono);letter-spacing:.22em;color:var(--red-t)}
.co-wrap h1{font:400 clamp(32px,5.6vw,72px)/1.02 var(--f-disp);text-transform:uppercase;margin-top:14px}
html[lang^="zh"] .co-wrap h1{font-weight:900;line-height:1.12}
.co-tablewrap{overflow-x:auto;border:1px solid var(--line);margin-top:clamp(22px,3.5vw,36px)}
.co-table{width:100%;border-collapse:collapse;min-width:640px;background:var(--panel)}
.co-table th{font:400 10.5px/1.4 var(--f-mono);letter-spacing:.18em;color:var(--ink2);text-transform:uppercase;text-align:left;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg2)}
.co-table td{padding:14px 16px;border-bottom:1px solid var(--line);font:400 13px/1.6 var(--f-body);vertical-align:middle}
.co-table td.mono{font-family:var(--f-mono);font-size:12.5px;color:var(--ink2)}
.co-table td.pr{font-family:var(--f-mono);text-align:right;white-space:nowrap}
.co-table .sw{width:38px;height:38px;border:1px solid var(--line);background-size:cover;background-position:center}
.co-total{display:flex;justify-content:flex-end;gap:26px;padding:18px 16px;font:400 14px/1.6 var(--f-mono)}
.co-total b{font-weight:500}
.co-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.co-note{margin-top:22px;font:400 12px/1.9 var(--f-mono);color:var(--ink2);max-width:72ch}
.co-done{border:1px solid var(--line);background:var(--bg2);padding:clamp(24px,4vw,40px);margin-top:26px}
.co-done h2{font:400 clamp(20px,2.6vw,30px)/1.2 var(--f-disp);text-transform:uppercase}
html[lang^="zh"] .co-done h2{font-weight:900}
.co-done p{color:var(--ink2);margin-top:12px;max-width:64ch}
.co-empty{margin-top:30px;color:var(--ink2);font:400 13px/2 var(--f-mono)}

/* ---- 詢價品項表:可編輯版(數量 −/輸入/+、移除、新增品項搜尋、全部清除) ---- */
.co-table-edit{min-width:720px}
.co-table-edit th:nth-child(4){text-align:center}
.co-table-edit td.co-rmcell{text-align:right;white-space:nowrap}
.co-qty{vertical-align:middle}
.co-qty button{width:40px;height:44px}
.co-qty input{width:52px;height:44px;text-align:center;background:transparent;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);
  color:var(--ink);font:400 14px/1 var(--f-mono);-moz-appearance:textfield;appearance:textfield}
.co-qty input::-webkit-outer-spin-button,.co-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.co-qty input:focus{outline:none;background:#ffffff0d;color:#fff}
.co-rm{font-size:11.5px;letter-spacing:.06em;white-space:nowrap}
.co-sum{padding:12px 16px 0;font:400 12px/1.6 var(--f-mono);letter-spacing:.06em;color:var(--ink2);text-align:right}
.co-actions-edit .btn{height:46px;padding:0 20px;font-size:12px}
.co-actions-edit .btn.on{border-color:#fff;background:#ffffff14}
.co-clear{margin-left:auto;color:var(--ink2);border-color:#ffffff33}
.co-clear:hover,.co-clear.armed{color:#fff;border-color:var(--red);background:var(--red)}
.co-addp{margin-top:14px;border:1px solid var(--line);background:var(--bg2);padding:16px}
.co-addq{display:block}
.co-addq span{display:block;font:400 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.co-addq input{width:100%;height:48px;background:var(--bg);border:1px solid var(--line);color:var(--ink);padding:0 14px;font:400 15px/1 var(--f-body)}
.co-addq input:focus{outline:none;border-color:var(--red)}
.co-addq input::placeholder{color:var(--ink2)}
.co-addq input::-webkit-search-cancel-button{-webkit-appearance:none}
.co-addres{margin-top:8px}
.co-addmsg{padding:14px 2px 4px;color:var(--ink2);font:400 12.5px/1.7 var(--f-mono)}
.co-addit{display:grid;grid-template-columns:34px minmax(0,1fr) auto 32px;gap:12px;align-items:center;width:100%;text-align:left;
  padding:9px 8px;margin-top:4px;border:1px solid transparent;color:var(--ink);transition:background .15s,border-color .15s;min-height:52px}
.co-addit:hover,.co-addit:focus-visible{background:#ffffff0a;border-color:var(--line);outline:none}
.co-addit .sw{width:34px;height:34px;border:1px solid var(--line);background-size:cover;background-position:center;display:block}
.co-addit-t{min-width:0;display:grid}
.co-addit-t b{font:600 13.5px/1.35 var(--f-body)}
.co-addit-t span{font:400 12px/1.5 var(--f-mono);color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-addit-s{font:400 11px/1.4 var(--f-mono);letter-spacing:.06em;color:var(--ink2);white-space:nowrap}
.co-addit-s em{font-style:normal;color:var(--red-t)}
.co-addit-go{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);font:400 16px/1 var(--f-mono);color:var(--ink2)}
.co-addit:hover .co-addit-go{border-color:var(--red);color:#fff;background:var(--red)}
@media(max-width:700px){
  /* 手機:表格改成卡片(不橫向捲動);表頭藏起來 */
  .co-tablewrap:has(.co-table-edit){overflow:visible;border:0}
  .co-table-edit{min-width:0;display:block;background:transparent}
  .co-table-edit thead{display:none}
  .co-table-edit tbody{display:grid;gap:10px}
  .co-table-edit tr{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"sw item" "sw size" "qty rm";
    gap:6px 12px;align-items:center;border:1px solid var(--line);background:var(--panel);padding:12px 12px 10px}
  .co-table-edit td{display:block;padding:0;border:0}
  .co-table-edit td:nth-child(1){grid-area:sw;align-self:start}
  .co-table-edit td:nth-child(1) .sw{width:44px;height:44px}
  .co-table-edit td:nth-child(2){grid-area:item;font-size:15px}
  .co-table-edit td:nth-child(2) span{font-size:13px!important}
  .co-table-edit td:nth-child(3){grid-area:size;font-size:13px}
  .co-table-edit td:nth-child(4){grid-area:qty;justify-self:start;margin-top:8px}
  .co-table-edit td.co-rmcell{grid-area:rm;justify-self:end;margin-top:8px}
  .co-qty button{width:44px;height:46px}
  .co-qty input{width:56px;height:46px;font-size:15px}
  .co-rm{font-size:12.5px;min-height:44px;padding:8px 10px}
  .co-sum{text-align:left;padding-left:2px;font-size:13px}
  .co-actions-edit{gap:10px}
  .co-actions-edit .btn{flex:1 1 calc(50% - 5px);height:48px;font-size:12.5px;padding:0 12px}
  .co-clear{margin-left:0;flex-basis:100%}
  .co-addit{grid-template-columns:34px minmax(0,1fr) 32px;grid-template-areas:"sw t go" "sw s go"}
  .co-addit .sw{grid-area:sw}.co-addit-t{grid-area:t}.co-addit-s{grid-area:s;white-space:normal}.co-addit-go{grid-area:go}
  .co-addit-t b{font-size:15px}.co-addit-t span{font-size:13px;white-space:normal}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html{scroll-behavior:auto}
}


/* ============================================================
   CH·01 深度特輯 — 全幅斜切 BILLBOARD(v3 大氣版)
   四張全寬 72svh 影像看板,鋸齒斜縫相接;每張用該頁自己的
   簽名字體與色調,巨型標題壓在影像上,ghost 編號 20vw。
   ============================================================ */
.feats{padding:clamp(56px,9vw,120px) 0 0}
.feats .chap-head,.feats .feats-sub{margin-inline:var(--pad)}
.feats-sub{font:400 13px/1.8 var(--f-mono);color:var(--ink2);margin-top:-10px;margin-bottom:30px}
.bills{position:relative}
.bill{position:relative;display:block;min-height:clamp(430px,74svh,660px);overflow:clip;
  clip-path:polygon(0 0,100% 4.5vw,100% 100%,0 100%)}
.bill+.bill{margin-top:-4.6vw}
.bill.bill-rev{clip-path:polygon(0 4.5vw,100% 0,100% 100%,0 100%)}
.bill:first-child{clip-path:none}
.bill-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease);filter:saturate(1.02)}
.bill:hover .bill-img{transform:scale(1.045)}
.bill-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,#0B0B0Df2 0%,#0B0B0Db8 34%,#0B0B0D42 62%,#0B0B0D14 100%),
  linear-gradient(0deg,#0B0B0Dcc 0%,transparent 34%)}
.bill-rev .bill-shade{background:
  linear-gradient(270deg,#0B0B0Df2 0%,#0B0B0Db8 34%,#0B0B0D42 62%,#0B0B0D14 100%),
  linear-gradient(0deg,#0B0B0Dcc 0%,transparent 34%)}
/* PPF 這張底圖本身是夜景暗調(車底碎石飛濺)—— 右段與底部的黑幕放亮,
   車體與碎石才看得出來;左側 0–34% 一律維持原值(那是文案的 scrim,
   .bill-tag 11px 紅字 #FF5A60 靠它撐住 4.66:1,放亮就會掉到 4.5 以下)。 */
.bill-ppf .bill-shade{background:
  linear-gradient(90deg,#0B0B0Df2 0%,#0B0B0Db8 34%,#0B0B0D2b 60%,#0B0B0D00 100%),
  linear-gradient(0deg,#0B0B0D80 0%,transparent 28%)}
/* 反過來,MULTIPURPOSE 那張的底圖左下是白色印刷膜卷 —— 通用 scrim 壓不住,
   .bill-tag 最壞像素只有 3.69:1(16% 的像素低於 4.5)。文案側加深到 .82,
   右段維持通用值不動(那張本來就不暗)。 */
.bill-multi .bill-shade{background:
  linear-gradient(90deg,#0B0B0Df5 0%,#0B0B0Dd1 34%,#0B0B0D42 62%,#0B0B0D14 100%),
  linear-gradient(0deg,#0B0B0Dcc 0%,transparent 34%)}
.bill-num{position:absolute;top:clamp(48px,7vw,90px);right:clamp(16px,3vw,54px);z-index:2;
  font-size:clamp(90px,17vw,240px);line-height:1;color:#ffffff12;pointer-events:none;user-select:none}
.bill-rev .bill-num{right:auto;left:clamp(16px,3vw,54px)}
.bill-body{position:absolute;z-index:3;left:var(--pad);right:var(--pad);bottom:clamp(30px,5vw,64px);
  display:flex;flex-direction:column;gap:13px;align-items:flex-start;max-width:640px}
.bill-rev .bill-body{left:auto;align-items:flex-end;text-align:right;margin-left:auto}
.bill-tag{font:500 11px/1.7 var(--f-mono);letter-spacing:.2em;color:var(--red-t)}
.bill-name{font:italic 800 clamp(58px,9vw,138px)/0.9 'Saira Condensed',var(--f-disp);
  text-transform:uppercase;color:#fff;letter-spacing:0}
.bill-name em{font-style:italic;color:var(--red);font-size:.45em;vertical-align:.62em;margin-left:6px}
.bill-multi .bill-name{font-family:'Anton',var(--f-disp);font-style:normal;font-weight:400;
  font-size:clamp(40px,6.6vw,104px);line-height:.98;letter-spacing:.01em}
.bill-desc{font:400 clamp(15px,1.3vw,17px)/1.7 var(--f-body);color:#E6E4E8;max-width:52ch}
.bill-specs{display:flex;gap:8px;flex-wrap:wrap}
.bill-rev .bill-specs{justify-content:flex-end}
.bill-specs i{font:400 11.5px/1 var(--f-mono);font-style:normal;letter-spacing:.1em;color:#fff;
  border:1px solid #ffffff45;background:#0B0B0D80;padding:9px 12px;
  clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%)}
.bill-cta{font:600 13.5px/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:#fff;
  border-bottom:2px solid var(--red);padding-bottom:5px;margin-top:4px;transition:color .25s}
.bill:hover .bill-cta{color:var(--red-t)}
@media(max-width:760px){
  .bill{min-height:clamp(380px,72svh,560px)}
  /* ⚠️ 手機一定要換成「由下往上」的黑幕:文案在 375px 下幾乎滿寬,而桌機那道
     左暗右亮的橫向 scrim 到 70% 寬處已經接近透明 —— 實測 .bill-tag 最壞只有
     1.0–2.8:1;bill-rev 的兩張更慘(文案被改成左對齊,scrim 卻還在右邊,
     等於完全沒有遮蔽)。改直向後五張最低 4.77:1。 */
  .bill-shade,.bill-rev .bill-shade,.bill-ppf .bill-shade{background:
    linear-gradient(0deg,#0B0B0Df2 0%,#0B0B0Dd1 46%,#0B0B0D59 72%,transparent 100%)}
  .bill-multi .bill-shade{background:  /* 白色印刷膜卷底圖,同樣參數壓不住 */
    linear-gradient(0deg,#0B0B0Df7 0%,#0B0B0De0 50%,#0B0B0D6b 74%,#0B0B0D0f 100%)}
  .bill-ppf .bill-shade{background:  /* 底圖的金色斜光橫過 tag 行,通用值只有 4.30 */
    linear-gradient(0deg,#0B0B0Df2 0%,#0B0B0Ddc 46%,#0B0B0D80 72%,transparent 100%)}
  .bill-body{left:20px;right:20px;bottom:30px}
  .bill-rev .bill-body{align-items:flex-start;text-align:left}
  .bill-rev .bill-specs{justify-content:flex-start}
  .bill-name{font-size:clamp(46px,13vw,72px)}
  .bill-multi .bill-name{font-size:clamp(30px,9.4vw,52px)}
  .bill-num{top:24px;font-size:clamp(70px,22vw,110px)}
  .bill-rev .bill-num{left:auto;right:16px}
}

/* ============================================================
   de-boxing:ghost 章節數字 / 斜角按鈕(livery 語言)
   ============================================================ */
.chap-head{position:relative}
.chap-ghost{position:absolute;right:0;bottom:-6px;font-size:clamp(60px,9vw,140px);line-height:1;color:#ffffff09;pointer-events:none;user-select:none}
.btn,.scard-go,.sku-buy,.add{clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%);padding-left:30px;padding-right:30px}
.sku-buy{padding-left:18px;padding-right:18px}
.scard-go{padding-left:22px;padding-right:22px}

/* ============================================================
   SHOP · 依用途選膜(#/shop)— 編輯式分章,比照 /m/use.html 的設計語言
   紙白 hero(章節縮圖 + 搜尋)→ 六個分章(paper / red / ink 交替)→ 紅色收尾帶
   每一列都直達站內 #/series/CODE 整卷選購頁。
   ⚠️ 這一頁是紙白版面,固定頁首必須維持實心黑(body.sgu-view 規則,見下)
   ⚠️ 分章的 --c-* 色組沿用 /m/use.css 已量測過的值,改色請重跑對比度稽核
   ============================================================ */
body.sgu-view .nav{background:#0B0B0Df2;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}

.sgu{
  --u-bg:#FBFAF7; --u-ink:#141416; --u-ink2:#3A3833; --u-muted:#63605A;
  --u-line:#D3CEC3; --u-line2:#BFB9AB; --u-red:#C2151F; --u-red-ink:#A8121B;
  background:var(--u-bg);color:var(--u-ink);
  font-family:'Space Grotesk','Noto Sans TC',system-ui,sans-serif;
  text-wrap:pretty}
.sgu .serif{font-family:'Noto Serif TC','Iowan Old Style',Georgia,serif;font-weight:900;letter-spacing:-.005em}
.sgu .u-dot{color:var(--u-red)}
@keyframes sgu-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- hero:黑板(2026-08-06 使用者指示「header 改為黑色背景風格」)----------
   色值沿用系列頁黑板那組 --liv-*(已量測)。⚠️ 改色請重跑對比度稽核(黑底 #0B0B0C:
   #fff 20.4 / --liv-lede-d 12.6 / --liv-mut-d 8.7 / --liv-red-lite 6.5)
   ⚠️ 底緣不要加紅白斜紋帶(2026-08-06 使用者:「避免這種斑馬紋」;同 /m/store-c 那次)
   → 黑板直接硬接紙白分章 */
.sgu-hero{position:relative;overflow:hidden;background:var(--liv-black);color:#fff;
  padding:calc(64px + clamp(34px,5vw,72px)) var(--pad) clamp(30px,4vw,54px)}
.sgu-hero .sgu-eyebrow{color:var(--liv-red-lite)}
.sgu-hero .sgu-h1{color:#fff}
.sgu-hero .sgu-lede{color:var(--liv-lede-d)}
.sgu-hero .sgu-find{border-bottom-color:rgba(255,255,255,.44)}
.sgu-hero .sgu-find:focus-within{border-bottom-color:var(--liv-red-lite)}
.sgu-hero .sgu-find svg{stroke:var(--liv-mut-d)}
.sgu-hero .sgu-find input{color:#fff}
.sgu-hero .sgu-find input::placeholder{color:var(--liv-mut-d)}
.sgu-hero .sgu-result{color:var(--liv-mut-d)}
.sgu-hero .sgu-result b{color:#fff}
.sgu-hero .sgu-clear{color:var(--liv-red-lite)}
.sgu-hero .sgu-clear:hover{color:#fff}
.sgu-hero .sgu-thumb{background:#1C1C21}
.sgu-hero .sgu-credit{color:var(--liv-mut-d)}
.sgu-hgrid{max-width:1320px;margin-inline:auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));
  gap:clamp(26px,4vw,56px);align-items:end}
.sgu-eyebrow{font:700 12.5px/1.6 var(--f-mono);letter-spacing:.24em;text-transform:uppercase;color:var(--u-red-ink)}
.sgu-h1{margin:14px 0 16px;font-size:clamp(42px,7.4vw,100px);line-height:1.16;animation:sgu-rise .8s ease .08s both}
.sgu-lede{font-size:16px;line-height:1.9;color:var(--u-muted);max-width:34em;animation:sgu-rise .8s ease .18s both}
.sgu-find{margin-top:24px;max-width:440px;display:flex;align-items:center;gap:10px;
  border-bottom:1.5px solid var(--u-line2);padding-bottom:9px;transition:border-color .2s}
.sgu-find:focus-within{border-color:var(--u-red)}
.sgu-find svg{flex:0 0 auto;width:17px;height:17px;stroke:var(--u-muted);fill:none;stroke-width:1.8}
/* ⚠️ 別用 font 簡寫配 inherit(`font:400 15.5px/1.5 inherit` 整條無效 → 掉回 UA 的 13.3px) */
.sgu-find input{flex:1;min-width:0;border:0;background:none;color:var(--u-ink);
  font-family:inherit;font-weight:400;font-size:15.5px;line-height:1.5;min-height:38px}
.sgu-find input::placeholder{color:var(--u-muted);opacity:1}
.sgu-find input:focus-visible{outline:none}
.sgu-result{margin-top:11px;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  font:400 12.5px/1.7 var(--f-mono);color:var(--u-muted)}
.sgu-result b{font-weight:500;color:var(--u-ink)}
.sgu-clear{font:400 12.5px/1 var(--f-mono);color:var(--u-red-ink);border-bottom:1px solid currentColor;
  padding:4px 0;min-height:24px}
.sgu-clear:hover{color:var(--u-ink)}

.sgu-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;animation:sgu-rise .9s ease .24s both}
.sgu-thumb{position:relative;display:block;aspect-ratio:4/3;overflow:clip;background:var(--u-line)}
.sgu-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.sgu-thumb:hover img{transform:scale(1.06)}
.sgu-thumb span{position:absolute;left:0;right:0;bottom:0;padding:7px 9px;
  font:700 11.5px/1.4 var(--f-body);letter-spacing:.06em;color:#fff;
  /* 實色底條而非漸層:縮圖若是淺色照片,白字仍 ≥9:1 */
  background:rgba(0,0,0,.78)}
.sgu-credit{margin-top:12px;font-size:12px;line-height:1.7;color:var(--u-muted);text-align:right}

/* ---------- 六個用途分章:三種固定色調交替 ---------- */
.sgu-ch{background:var(--c-bg);color:var(--c-fg);scroll-margin-top:76px;
  padding:clamp(46px,7vw,92px) var(--pad)}
.sgu-ch[data-tone='paper']{--c-bg:#F6F4EF;--c-fg:#141416;--c-muted:#5C594F;--c-line:#D3CEC3;
  --c-accent:#A8121B;--c-hbg:#C2151F;--c-hfg:#FFFFFF}
.sgu-ch[data-tone='red']{--c-bg:#C2151F;--c-fg:#FFFFFF;--c-muted:rgba(255,255,255,.94);--c-line:rgba(255,255,255,.36);
  --c-accent:#FFFFFF;--c-hbg:#141416;--c-hfg:#FFFFFF}
.sgu-ch[data-tone='ink']{--c-bg:#070708;--c-fg:#F2F0EC;--c-muted:#ABA8A1;--c-line:#2A2A2F;
  --c-accent:#FF7B80;--c-hbg:#C2151F;--c-hfg:#FFFFFF}
.sgu-chgrid{max-width:1320px;margin-inline:auto;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
  gap:clamp(26px,4.5vw,62px);align-items:start}
.sgu-chhead{display:flex;align-items:baseline;gap:16px}
.sgu-chno{font:700 15px/1 var(--f-mono);letter-spacing:.2em;color:var(--c-accent);font-variant-numeric:tabular-nums}
.sgu-chhead h2{font-size:clamp(28px,4.4vw,50px);line-height:1.3}
.sgu-desc{margin:14px 0 22px;font-size:15.5px;line-height:1.9;color:var(--c-muted);max-width:32em}
.sgu-fig{margin:0;position:relative;overflow:clip;aspect-ratio:16/10;background:rgba(0,0,0,.1)}
.sgu-fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sgu-fig:hover img{transform:scale(1.05)}
.sgu-fig figcaption{position:absolute;right:9px;bottom:9px;display:flex;gap:10px;flex-wrap:wrap;
  padding:5px 9px;font:400 11.5px/1.6 var(--f-mono);letter-spacing:.06em;color:#fff;background:rgba(0,0,0,.74)}

/* 系列列:整列可點 → #/series/CODE */
.sgu-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:clamp(15px,2.1vw,21px) clamp(8px,1.3vw,17px);
  border-top:1px solid var(--c-line);color:var(--c-fg);
  transition:background .22s ease,color .22s ease,padding-left .22s ease}
.sgu-row:last-of-type{border-bottom:0}
.sgu-row:hover,.sgu-row:focus-visible{background:var(--c-hbg);color:var(--c-hfg);
  padding-left:clamp(18px,2.5vw,32px);outline:none}
.sgu-rtop{display:flex;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.sgu-code{font-weight:700;font-size:clamp(19px,2.7vw,29px);line-height:1.2;letter-spacing:-.01em}
.sgu-nm{font:700 14px/1.4 var(--f-body);letter-spacing:.02em;color:var(--c-muted)}
.sgu-blurb{display:block;margin-top:5px;font-size:13.5px;line-height:1.6;color:var(--c-muted)}
.sgu-mark{display:block;margin-top:3px;font:400 11px/1.6 var(--f-mono);color:var(--c-muted)}
.sgu-rend{display:flex;align-items:baseline;gap:16px;white-space:nowrap}
.sgu-n{font:400 12.5px/1 var(--f-mono);color:var(--c-muted)}
.sgu-n b{font-weight:700;font-size:16px;font-family:var(--f-body);font-variant-numeric:tabular-nums}
.sgu-ar{font-size:21px;line-height:1}
.sgu-row:hover .sgu-nm,.sgu-row:focus-visible .sgu-nm,
.sgu-row:hover .sgu-blurb,.sgu-row:focus-visible .sgu-blurb,
.sgu-row:hover .sgu-mark,.sgu-row:focus-visible .sgu-mark,
.sgu-row:hover .sgu-n,.sgu-row:focus-visible .sgu-n{color:inherit;opacity:.9}
.sgu-chend{border-top:1px solid var(--c-line)}
.sgu-chfoot{padding:12px clamp(8px,1.3vw,17px) 0;font:400 12.5px/1.7 var(--f-mono);color:var(--c-muted)}

.sgu-empty{max-width:1320px;margin-inline:auto;display:flex;align-items:center;gap:18px 26px;flex-wrap:wrap}
.sgu-empty p{font-size:16px;line-height:1.8;color:var(--c-muted)}

/* ---------- 收尾:紅色帶 ---------- */
.sgu-close{background:var(--u-red);color:#fff;padding:clamp(50px,7.5vw,96px) var(--pad)}
.sgu-close-in{max-width:1320px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;
  gap:24px 32px;flex-wrap:wrap}
.sgu-close h2{margin-bottom:10px;font-size:clamp(26px,4.4vw,50px);line-height:1.3}
.sgu-close p{font-size:15.5px;line-height:1.9;color:rgba(255,255,255,.94);max-width:34em}
.sgu-btn{display:inline-flex;align-items:center;min-height:46px;padding:15px 32px;background:#141416;color:#fff;
  font:700 15.5px/1.2 var(--f-body);letter-spacing:.06em;transition:background .2s}
.sgu-btn:hover{background:#000}
.sgu-btn-line{background:none;color:var(--c-fg);box-shadow:inset 0 0 0 1px var(--c-line);font-size:14.5px;min-height:44px;padding:12px 24px}
.sgu-btn-line:hover{background:var(--c-hbg);color:var(--c-hfg)}

@media(max-width:760px){
  .sgu-h1{font-size:clamp(38px,11vw,58px);line-height:1.2}
  .sgu-lede{font-size:15.5px}
  .sgu-find{max-width:none}
  .sgu-find input{font-size:16px;min-height:40px}   /* <16px 會讓 iOS 對焦時自動放大 */
  .sgu-thumbs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sgu-credit{text-align:left;font-size:12.5px}
  .sgu-desc,.sgu-blurb,.sgu-empty p,.sgu-nm{font-size:15px}
  .sgu-result,.sgu-chfoot,.sgu-clear{font-size:13px}
  .sgu-row{padding-inline:4px}
  .sgu-row:hover,.sgu-row:focus-visible{padding-left:4px}
  .sgu-chfoot{padding-inline:4px}
  .sgu-close-in{align-items:flex-start}
}
@media(max-width:420px){
  .sgu-rend{gap:10px}
}

/* ============================================================================
   WWW OVERRIDES — maxdecalglobal.com 官網專屬(Batch 1 附加層)
   上方為 /shop/style.css 的官網副本;本區之後才是官網新元件。
   對比實證(黑底 #0B0B0D):--ink 17.4 / --ink2 7.3 / --red-t 6.4;
   panel #16161A 上 --ink2 6.6。全部 ≥4.5(部署前程式重驗)。
   ============================================================================ */

/* ---------- CH·02 模式切換(依用途 ⇄ 依系列)---------- */
.mode-sw{margin-left:auto;display:inline-flex;border:1px solid var(--line);z-index:1}
.mode-sw button{font:600 12px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);
  min-height:42px;padding:0 18px;transition:color .2s,background .2s}
html[lang^="zh"] .mode-sw button{letter-spacing:.02em;text-transform:none;font-size:13.5px}
.mode-sw button:hover{color:var(--ink)}
.mode-sw button.on{background:var(--ink);color:#0B0B0D}
@media(max-width:700px){.mode-sw{margin-left:0;flex-basis:100%;display:flex}
  .mode-sw button{flex:1;min-height:44px}}

/* ---------- CH·02 依系列(27 列選購入口)---------- */
.bser-hint{font:400 12.5px/1.8 var(--f-mono);color:var(--ink2);margin-bottom:26px;max-width:72ch}
.bser-g{margin-bottom:34px}
.bser-gh{display:flex;align-items:center;gap:10px;font:400 11.5px/1 var(--f-mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink2);padding-bottom:12px;border-bottom:1px solid var(--line)}
.bser-gh i{width:22px;height:9px;transform:skewX(-18deg)}
.bser-gh span{margin-left:auto;letter-spacing:.08em}
.bser-row{display:grid;grid-template-columns:clamp(88px,9vw,128px) minmax(0,1fr) max-content 34px;
  align-items:center;gap:16px;padding:16px 2px;border-bottom:1px solid var(--line);
  transition:background .2s,border-color .2s}
.bser-row:hover{background:var(--panel)}
.bser-code{font:400 clamp(17px,1.8vw,22px)/1 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.bser-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.bser-nm{font:600 14.5px/1.4 var(--f-body)}
.bser-one{font:400 12.5px/1.6 var(--f-mono);color:var(--ink2)}
.bser-k{font:400 12px/1 var(--f-mono);color:var(--ink2);white-space:nowrap}
.bser-k i{font-style:normal;letter-spacing:.1em;font-size:10px}
.bser-ar{font:400 18px/1 var(--f-mono);color:var(--ink2);transition:color .2s,transform .2s var(--ease)}
.bser-row:hover .bser-ar{color:var(--red-t);transform:translateX(4px)}
@media(max-width:700px){
  .bser-row{grid-template-columns:minmax(0,1fr) 34px;row-gap:6px;padding:15px 2px}
  .bser-code{grid-column:1}
  .bser-main{grid-column:1/-1}
  .bser-k{grid-column:1}
  .bser-ar{grid-row:1;grid-column:2}
  .bser-nm{font-size:15.5px}
  .bser-one{font-size:15px;font-family:var(--f-body)}
}

/* ---------- 品牌頁 / 選膜指南(黑底編輯頁,借 .co-wrap 骨架)---------- */
.br-lede{margin-top:clamp(20px,3vw,30px);max-width:62ch;font:400 clamp(15.5px,1.5vw,18px)/1.8 var(--f-body);color:#D8D5DB}
.br-sec{margin-top:clamp(40px,6vw,64px);font:400 12px/1 var(--f-mono);letter-spacing:.24em;color:var(--red-t);text-transform:uppercase;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.br-miles{display:grid;grid-template-columns:minmax(0,1fr)}
.br-mile{display:grid;grid-template-columns:clamp(54px,6vw,84px) clamp(88px,10vw,120px) minmax(0,1fr);gap:18px;
  padding:clamp(20px,3vw,30px) 2px;border-bottom:1px solid var(--line);align-items:start}
.br-no{font:400 clamp(26px,3.4vw,44px)/1 var(--f-disp);color:var(--ink3)}
.br-tag{font:400 11px/1.8 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--red-t);padding-top:6px}
.br-mile b{font:700 clamp(16px,1.8vw,20px)/1.45 var(--f-body);display:block}
.br-mile p{margin-top:8px;font:400 14px/1.8 var(--f-body);color:var(--ink2);max-width:58ch}
.br-now{margin-top:22px;max-width:62ch;font:400 15.5px/1.85 var(--f-body);color:#D8D5DB}
@media(max-width:700px){
  .br-mile{grid-template-columns:minmax(0,1fr)}
  .br-no{display:none}
  .br-mile p{font-size:15px}
}

.sel-groups{margin-top:clamp(26px,4vw,40px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:960px){.sel-groups{grid-template-columns:minmax(0,1fr)}}
.sel-g{background:var(--panel);border:1px solid var(--line);padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:16px}
.sel-gh{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px;position:relative;padding-right:34px}
.sel-no{font:400 26px/1 var(--f-disp);color:var(--ink3)}
.sel-gh b{font:700 17px/1.4 var(--f-body);display:block}
.sel-gh p{margin-top:6px;font:400 13.5px/1.7 var(--f-body);color:var(--ink2)}
.sel-band{position:absolute;top:4px;right:0;width:22px;height:9px;transform:skewX(-18deg)}
.sel-chips{display:flex;flex-wrap:wrap;gap:8px}
.sel-chip{font:500 12.5px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink);border:1px solid #3A3941;
  min-height:40px;padding:0 13px;display:inline-flex;align-items:center;gap:8px;transition:border-color .2s,background .2s,color .2s}
.sel-chip span{font-size:10.5px;color:var(--ink2)}
.sel-chip:hover{border-color:var(--red);background:var(--red);color:#fff}
.sel-chip:hover span{color:#FFE3E4}
.sel-go{margin-top:auto;font:500 12px/1.6 var(--f-mono);letter-spacing:.1em;color:var(--ink2);min-height:38px;display:inline-flex;align-items:center}
.sel-go:hover{color:var(--red-t)}
.sel-note{margin-top:26px;font:400 12.5px/1.9 var(--f-mono);color:var(--ink2);max-width:76ch}
@media(max-width:700px){.sel-gh p{font-size:15px}.sel-note{font-size:13px}}

/* ---------- 聯絡與詢價 ---------- */
.co-sec{margin-top:clamp(34px,5vw,52px);margin-bottom:16px;font:400 12px/1 var(--f-mono);letter-spacing:.24em;
  color:var(--red-t);text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid var(--line)}
.inq-form{margin-top:clamp(30px,4.5vw,46px);border:1px solid var(--line);background:var(--panel);
  padding:clamp(20px,3.2vw,36px)}
.inq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
@media(max-width:700px){.inq-grid{grid-template-columns:minmax(0,1fr)}}
.inq-f{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.inq-f span{font:400 11px/1.4 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.inq-f span i{font-style:normal;color:var(--red-t);letter-spacing:.08em}
.inq-f input,.inq-f textarea{background:var(--bg);border:1px solid var(--line);color:var(--ink);
  font:400 15px/1.6 var(--f-body);padding:13px 14px;min-height:48px;width:100%}
.inq-f textarea{resize:vertical;min-height:120px}
.inq-f input:focus,.inq-f textarea:focus{outline:none;border-color:var(--red)}
.inq-f input::placeholder,.inq-f textarea::placeholder{color:var(--ink2)}
/* honeypot:真人看不到、bot 會填(不能 display:none — 太多 bot 會跳過) */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.inq-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.inq-privacy{font:400 12.5px/1.8 var(--f-mono);color:var(--ink2)}
.inq-privacy a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.inq-privacy a:hover{color:var(--red-t)}
.inq-err{margin-top:14px;font:500 13.5px/1.6 var(--f-body);color:var(--red-t)}
.co-fail h2{color:var(--red-t)}
button[disabled]{opacity:.6;cursor:default}
@media(max-width:700px){.inq-privacy{font-size:13px}}

/* ---------- 語言建議列(geo 只做建議,不自動轉址)---------- */
.lang-bar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:16px;
  background:#16161Af5;border-top:1px solid var(--line);backdrop-filter:blur(8px);
  padding:12px var(--pad);font:400 13.5px/1.6 var(--f-body);color:var(--ink)}
.lang-bar a{color:#fff;background:var(--red);font:600 12px/1 var(--f-body);letter-spacing:.06em;
  padding:0 16px;min-height:40px;display:inline-flex;align-items:center;white-space:nowrap}
.lang-bar a:hover{background:#fff;color:#0B0B0D}
.lang-bar button{margin-left:auto;color:var(--ink2);font:400 15px/1 var(--f-mono);min-height:40px;min-width:40px}
.lang-bar button:hover{color:var(--ink)}
@media(max-width:700px){.lang-bar{flex-wrap:wrap;font-size:15px}}

/* ---------- 頁尾公司名 ---------- */
.foot-co{margin-top:12px;font:500 12px/1.8 var(--f-mono);color:var(--ink2)}

/* ---------- 修:系列頁(sd-view)的白色視窗 .qty 規則會污染黑色抽屜 ----------
   抽屜是全站黑 chrome,任何檢視都開得到 → 抽屜內的數量鈕釘回深底配色。
   (/shop/ 原版同病未修;官網這裡先修。) */
body.sd-view .drawer .qty{border-color:var(--line)}
body.sd-view .drawer .qty button{color:var(--ink2)}
body.sd-view .drawer .qty button:hover{color:var(--red-t)}
body.sd-view .drawer .qty span{color:var(--ink)}

/* ---------- 選膜指南:三張對照表卡(Batch 2)---------- */
.sel-tables{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:4px}
@media(max-width:960px){.sel-tables{grid-template-columns:minmax(0,1fr)}}
.sel-tb{background:var(--panel);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s,transform .25s var(--ease)}
.sel-tb:hover{border-color:var(--red);transform:translateY(-3px)}
.sel-tb b{font:700 16.5px/1.4 var(--f-body)}
.sel-tb p{font:400 13.5px/1.75 var(--f-body);color:var(--ink2)}
.sel-tb .go{margin-top:auto;padding-top:10px;font:500 12px/1.6 var(--f-mono);letter-spacing:.1em;color:var(--red-t)}
@media(max-width:700px){.sel-tb p{font-size:15px}}

/* ============================================================
   系列頁 sub-bar — 主導覽常駐五項後,系列名+頁內跳點降到這條
   (fixed 於 nav 下方 44px;系列頁 hero 頂距同步 +44)
   ============================================================ */
.nav-sub{position:fixed;top:64px;left:0;right:0;z-index:59;display:flex;align-items:center;gap:20px;
  padding:0 max(clamp(16px,3vw,40px),(100% - 1304px)/2);height:44px;   /* 與上方 .nav 同一格 */
  background:#0B0B0Df2;border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.nav-sub-name{font:400 11.5px/1 var(--f-mono);letter-spacing:.16em;color:var(--ink2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.nav-sub .nav-jump{flex:none}
body.sd-view .sd-hero{padding-top:calc(108px + clamp(26px,5vw,54px))}

/* ============================================================
   MOTION LAYER(2026-08-06)— 首頁進場與滑鼠互動
   語彙對齊 /xtreme/:捲動進場交錯、hero 視差、指標紅光、
   數字 count-up、頂部捲動進度線。全部在 prefers-reduced-motion
   下自動關閉(檔尾 guard),觸控裝置不跑指標相關效果。
   ============================================================ */

/* 捲動進度線(app.js 動態插入,固定在最上緣) */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;pointer-events:none;background:#ffffff0f}
.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--red-t));
  transform:scaleX(0);transform-origin:left;will-change:transform}

/* ---- hero:雙層視差(外層吃捲動、內層吃滑鼠,最內層維持 kenburns) ---- */
.hero-par{position:absolute;inset:-7% 0;will-change:transform}
.hero-tilt{position:absolute;inset:0 -4%;transition:transform .8s var(--ease);will-change:transform}
.hero-inner{transition:transform .8s var(--ease)}
.scroll-cue{transition:opacity .5s var(--ease)}
.hero.past .scroll-cue{opacity:0}

/* ---- 跑馬燈:滑到就停,讀得完 ---- */
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---- CH·01 BILLBOARD:進場 = 影像退焦推近 + 文案逐項升起 ---- */
.bill .bill-img{transform:scale(1.14);opacity:.2;transition:transform 1.5s var(--ease),opacity 1.1s var(--ease)}
.bill.in .bill-img{transform:scale(1);opacity:1}
.bill.in:hover .bill-img{transform:scale(1.045)}
.bill .bill-num{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease) .18s,transform .9s var(--ease) .18s}
.bill.in .bill-num{opacity:1;transform:none}
.bill .bill-body>*{opacity:0;transform:translateY(26px);
  transition:opacity .72s var(--ease),transform .72s var(--ease)}
.bill-rev .bill-body>*{transform:translateY(26px) translateX(18px)}
.bill.in .bill-body>*{opacity:1;transform:none}
.bill.in .bill-body>:nth-child(1){transition-delay:.10s}
.bill.in .bill-body>:nth-child(2){transition-delay:.18s}
.bill.in .bill-body>:nth-child(3){transition-delay:.26s}
.bill.in .bill-body>:nth-child(4){transition-delay:.34s}
.bill.in .bill-body>:nth-child(5){transition-delay:.42s}
/* 指標紅光:跟著滑鼠在看板上移動(--mx/--my 由 app.js 寫入)。
   ⚠️ z-index 必須低於 .bill-shade —— 紅光是打在「影像」上,文案的黑色
   scrim 蓋在紅光之上,小字(.bill-tag 紅字 11px)才不會被打亮到對比不足。 */
.bill-shade{z-index:1}
.bill::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease);mix-blend-mode:screen;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(227,32,39,.34),transparent 66%)}
.bill:hover::after{opacity:1}
.bill-cta{position:relative}
.bill:hover .bill-cta{color:var(--red-t)}

/* ---- CH·02 六大類:滑過整列的紅色掃入 ---- */
/* 紅色掃入用 background-size 做(不動堆疊順序,文字永遠在最上層) */
.catsx-list a{background-image:linear-gradient(90deg,rgba(227,32,39,.16),rgba(227,32,39,0) 62%);
  background-repeat:no-repeat;background-size:0% 100%;
  transition:padding-left .3s var(--ease),background-size .5s var(--ease)}
.catsx-list a:hover,.catsx-list a.hot{background-size:100% 100%}
.cx-no{transition:color .25s,transform .3s var(--ease)}
.catsx-list a:hover .cx-no,.catsx-list a.hot .cx-no{transform:translateX(2px)}
.cx-arrow{transition:background .25s,border-color .25s,color .25s,transform .3s var(--ease)}
.catsx-list a:hover .cx-arrow,.catsx-list a.hot .cx-arrow{transform:translateX(4px)}

/* ---- 依系列清單:整組交錯升起 ---- */
.bser-row{transition:background .25s,padding-left .3s var(--ease)}
.bser-row:hover{background:#ffffff08;padding-left:10px}

/* ---- 數字帶:count-up + 滑過轉紅 ---- */
.stat{transition:background .3s}
.stat:hover{background:var(--panel)}
.stat .n{transition:color .3s}
.stat:hover .n{color:var(--red-t)}
.stat .k{position:relative}
.stat .k::after{content:'';position:absolute;left:0;bottom:-9px;width:34px;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.stat.in .k::after{transform:none}

/* ---- 引句帶:影像由上而下擦入,並在滑過時微推近 ---- */
.feature>img{transition:transform 1.2s var(--ease)}
.feature:hover>img{transform:scale(1.035)}

@media(prefers-reduced-motion:reduce){
  .rv,.rv[data-rv]{opacity:1!important;transform:none!important;clip-path:none!important}
  .bill .bill-img,.bill .bill-num,.bill .bill-body>*{opacity:1!important;transform:none!important}
  .bill::after{display:none}
  .hero-par,.hero-tilt,.hero-inner{transform:none!important}
  .prog{display:none}
}
/* 觸控裝置:指標紅光與 hover 推近不套用(避免點擊後殘留) */
@media(hover:none){
  .bill::after{display:none}
  .feature:hover>img{transform:none}
}

/* ============================================================
   系列頁 V2(2026-08-18;白名單 app.js SD2,先 9700)
   黑 hero+色牆 → 白理由卡 → 灰白色盤 → 黑家族 → 白場景 → 灰白規格 → 紅 CTA
   ============================================================ */
.sd2-in{max-width:1320px;margin-inline:auto;padding:clamp(44px,5.4vw,80px) var(--pad)}
.sd2-h{font-family:var(--f-liv);font-weight:900;font-style:italic;letter-spacing:.005em;text-transform:uppercase;
  font-size:clamp(25px,2.7vw,38px);line-height:1.08;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:clamp(20px,2.6vw,34px)}
html[lang^="zh"] .sd2-h{font-family:'Noto Sans TC',sans-serif;font-style:normal;letter-spacing:0;text-transform:none;line-height:1.25}
.sd2-h em{font:400 13px/1 var(--f-mono);letter-spacing:.06em;color:var(--liv-mut);font-style:normal;text-transform:none}
.sd2-h-sm{font-size:clamp(20px,2vw,26px)}
.sd2-no{font:400 12px/1 var(--f-mono);letter-spacing:.2em;color:var(--liv-red-ink);font-style:normal;padding-bottom:4px}
.sd2-sub{margin:-10px 0 26px;font-size:15.5px;line-height:1.7;color:var(--liv-mut);max-width:60ch}

/* ---- 0 hero:黑板 + 色牆 ---- */
.sd2-hero{padding:calc(108px + clamp(24px,3.6vw,52px)) var(--pad) clamp(40px,5vw,64px)}
body.sd-view .sd2-hero{padding-bottom:clamp(40px,5vw,64px)}
.sd2-hero-in{max-width:1320px;margin-inline:auto}
.sd2-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,4.4vw,72px);align-items:center;margin-top:8px}
.sd2-eyebrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:400 12px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--liv-mut-d);margin-bottom:22px}
.sd2-eyebrow .sep{color:#ffffff40}
.sd2-code{font-family:var(--f-liv);font-weight:900;font-style:italic;font-size:15px;letter-spacing:.02em;background:var(--liv-red);color:#fff;padding:5px 10px 4px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
.sd2-hook{font-family:var(--f-liv);font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(34px,4.5vw,64px);line-height:1.02;color:#fff;max-width:14ch}
.sd2-hook em{font-style:inherit;color:var(--liv-red-lite)}
html[lang^="zh"] .sd2-hook{font-family:'Noto Sans TC',sans-serif;font-style:normal;text-transform:none;letter-spacing:0;font-size:clamp(30px,4vw,56px);line-height:1.22;max-width:16ch}
.sd2-lede{margin-top:6px;font-size:16.5px;line-height:1.8;color:var(--liv-lede-d);max-width:54ch}
.sd2-hero .sd-actions{margin-top:26px}
.sd2-keys{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:34px;border-top:1px solid #ffffff2e}
.sd2-keys > div{padding:14px 14px 0 0;border-right:1px solid #ffffff1c}
.sd2-keys > div:last-child{border-right:0}
.sd2-keys > div + div{padding-left:14px}
.sd2-keys dt{font:400 10.5px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--liv-mut-d)}
.sd2-keys dd{margin-top:5px;font-family:var(--f-liv);font-weight:800;font-size:clamp(18px,1.7vw,24px);line-height:1.1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sd2-wall-wrap{position:relative}
.sd2-wall{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px 8px;align-items:start}
.sd2-wall-hint{margin-top:16px;font:400 11px/1.5 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--liv-mut-d);text-align:right}
.sd2-chip{position:relative;display:flex;flex-direction:column;gap:6px;padding:0;text-align:left;background:none;transition:transform .25s var(--ease)}
.sd2-wall .sd2-chip:nth-child(even){margin-top:16px}
.sd2-chip:hover,.sd2-chip:focus-visible{transform:translateY(-5px)}
.sd2-chip:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sd2-chip.skel{aspect-ratio:3/4.6;background:#1c1c20;border:0}
.sd2-chip-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.sd2-chip-l b{font:500 11px/1.2 var(--f-mono);letter-spacing:.04em;color:#fff;font-variant-numeric:tabular-nums}
.sd2-chip-l i{font:400 10.5px/1.3 var(--f-body);font-style:normal;color:var(--liv-mut-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 色票本體(hero 色牆 .sw2 與產品卡 .sku-sw 共用同一套紋理) */
.sw2{display:block;width:100%;aspect-ratio:3/4;background:var(--c,#3a3a3e);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff2b;transition:box-shadow .2s}
.sd2-chip:hover .sw2,.sd2-chip:focus-visible .sw2{box-shadow:inset 0 0 0 1px #ffffff2b,0 0 0 2px var(--liv-red-lite)}
.sw2::after{content:'';position:absolute;inset:0;background:linear-gradient(118deg,#ffffff4d 0%,#0000 38%,#0000 70%,#ffffff12 100%)}
.sw2.is-matt::after,.sku-sw.is-matt::after{background:linear-gradient(118deg,#ffffff1c 0%,#0000 40%)}
.tx-metal::before{content:'';position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(-32deg,#ffffff00 0 1px,#ffffff10 1px 2px,#00000000 2px 4px),linear-gradient(150deg,#ffffff2e,#0000 45%,#00000030 100%)}
.tx-carbon::before{content:'';position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(45deg,#ffffff1a 0 1.5px,#0000 1.5px 4px),repeating-linear-gradient(-45deg,#ffffff12 0 1.5px,#0000 1.5px 4px)}
.tx-peel::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 30% 30%,#ffffff1c 0 1px,#0000 1.6px) 0 0/5px 5px,radial-gradient(circle at 70% 70%,#00000033 0 1px,#0000 1.6px) 0 0/5px 5px}
.sw-photo{background:#fff}
.sw-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sw-photo::after{display:none}
.sw-clear{background:conic-gradient(#e6e6ea 25%,#fff 0 50%,#e6e6ea 0 75%,#fff 0) 0 0/16px 16px;box-shadow:inset 0 0 0 1px #00000024}
.sw-clear::after{background:linear-gradient(120deg,#ffffffd9 0%,#ffffff26 42%,#0000 60%),linear-gradient(0deg,#00000012,#0000 40%)}
.sw-clear::before{content:'';position:absolute;left:14%;right:14%;top:12%;bottom:12%;z-index:1;border:1.5px solid #ffffffd0;box-shadow:0 2px 12px #0000002e;background:#ffffff33}
/* 產品卡:色票在上、實拍縮圖右下角(只在 V2 頁) */
.sku-thumb{display:none}
body.sd2-view .sku-thumb{display:block;position:absolute;right:8px;bottom:8px;width:36%;height:auto;aspect-ratio:1/1;object-fit:cover;
  border:2px solid #fff;box-shadow:0 2px 10px #00000040;border-radius:2px;z-index:2}
body.sd2-view .sku-media{aspect-ratio:1/1;background:#fff}
body.sd2-view .sku-name{font-size:14.5px}
body.sd2-view .sku-code{font-size:12px}

/* ---- 1 為什麼 ---- */
.sd2-why{background:#fff;color:var(--liv-ink)}
.sd2-why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px)}
.sd2-why-card{position:relative;border-top:2px solid var(--liv-black);padding:22px 0 0}
.sd2-why-card::before{content:'';position:absolute;top:-2px;left:0;width:58px;height:4px;background:var(--liv-red)}
.sd2-why-k{font-family:var(--f-liv);font-weight:900;font-style:italic;font-size:clamp(34px,3.6vw,50px);line-height:1;color:var(--liv-red-ink);letter-spacing:-.01em}
.sd2-why-card h3{margin-top:12px;font:700 18px/1.4 var(--f-body);color:var(--liv-ink)}
.sd2-why-card p{margin-top:10px;font-size:15.5px;line-height:1.8;color:var(--liv-ink2)}
.sd2-viz{margin-top:18px;max-width:300px}
.sd2-viz svg{width:100%;height:auto;display:block}
.vz-k{font:400 10.5px var(--f-mono);fill:var(--liv-mut);letter-spacing:.06em}
.vz-a{fill:#D5D2CA}.vz-b{fill:var(--liv-red)}.vz-c{fill:var(--liv-ink)}.vz-g{fill:#DCE7EF;stroke:#9FB4C4;stroke-width:1}

/* ---- 2 色盤(產品區) ---- */
.sd2-floor{background:#FAF9F6}
.sd2-floor > .sd2-in{padding-bottom:0}
.sd2-floorhead .sd2-h{margin-bottom:22px}
.sd2-pairs{margin-bottom:8px}
.sd2-pairs-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.sd2-pairs-h h3{font:700 15px/1.4 var(--f-body);color:var(--liv-ink)}
.sd2-pairs-h span{font:400 12px/1.5 var(--f-mono);color:var(--liv-mut)}
.sd2-pair-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.sd2-pair{display:grid;grid-template-columns:1fr 1fr;gap:2px 3px;background:#fff;border:1px solid var(--liv-line);padding:8px 8px 9px;transition:border-color .2s}
.sd2-pair:hover{border-color:var(--liv-black)}
.sd2-pair button{display:flex;flex-direction:column;gap:5px;padding:0;text-align:left;min-height:44px}
.sd2-pair button .sw2{aspect-ratio:1/1;box-shadow:inset 0 0 0 1px #00000021}
.sd2-pair button em{font:400 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--liv-mut);font-style:normal}
.sd2-pair button b{font:500 11.5px/1 var(--f-mono);color:var(--liv-ink);font-variant-numeric:tabular-nums}
.sd2-pair button:hover .sw2,.sd2-pair button:focus-visible .sw2{box-shadow:inset 0 0 0 1px #00000021,0 0 0 2px var(--liv-red)}
.sd2-pair-n{grid-column:1/-1;margin-top:6px;font:600 13px/1.4 var(--f-body);color:var(--liv-ink)}
body.sd2-view .sd-toolbar{display:none}
body.sd2-view .sd-subnav{position:sticky;top:108px;z-index:40;background:#faf9f6f2;backdrop-filter:blur(10px);border-bottom:1px solid var(--liv-line);padding:12px var(--pad);margin-top:26px}
body.sd2-view .sd-subnav .chip{min-height:38px}
body.sd2-view .sub-head{border-top-color:var(--liv-black);padding-top:22px}
body.sd2-view .sub-head-no{font-size:22px}
body.sd2-view .sub-head-t{font-size:17px}
body.sd2-view .sd-block .sku-grid{padding-bottom:36px}
body.sd2-view .sd-block:last-child .sku-grid{padding-bottom:clamp(50px,7vw,84px)}
body.sd2-view .sku{background:#fff}

/* ---- 3 家族 ---- */
.sd2-family{background:var(--liv-black);color:#fff;position:relative;overflow:hidden}
.sd2-family::before{content:'';position:absolute;top:-80px;bottom:-80px;right:-120px;width:240px;background:var(--liv-red);transform:skewX(-14deg);opacity:.9}
.sd2-family .sd2-in{position:relative;z-index:1}
.sd2-family .sd2-h{color:#fff}
.sd2-family .sd2-no{color:var(--liv-red-lite)}
.sd2-family .sd2-sub{color:var(--liv-mut-d)}
.sd2-fam-grid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px}
.sd2-fam{position:relative;border:1px solid #ffffff2a;padding:26px 22px 22px;display:flex;flex-direction:column;gap:6px;background:#111114}
.sd2-fam::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--tint)}
.sd2-fam.me{background:#fff;color:var(--liv-ink);border-color:#fff}
.sd2-fam-here{position:absolute;top:14px;right:14px;font:400 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;background:var(--liv-red);color:#fff;padding:5px 8px}
.sd2-fam-code{font-family:var(--f-liv);font-weight:900;font-style:italic;font-size:clamp(28px,2.6vw,36px);line-height:1}
.sd2-fam-name{font:600 14px/1.4 var(--f-body);color:var(--liv-mut-d)}
.sd2-fam.me .sd2-fam-name{color:var(--liv-mut)}
.sd2-fam dl{margin-top:14px;display:flex;flex-direction:column;gap:0;border-top:1px solid #ffffff22}
.sd2-fam.me dl{border-top-color:var(--liv-line)}
.sd2-fam dl > div{padding:9px 0;border-bottom:1px solid #ffffff14}
.sd2-fam.me dl > div{border-bottom-color:var(--liv-line)}
.sd2-fam dt{font:400 10.5px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--liv-mut-d)}
.sd2-fam.me dt{color:var(--liv-mut)}
.sd2-fam dd{margin-top:3px;font-size:14.5px;line-height:1.55;color:#fff}
.sd2-fam.me dd{color:var(--liv-ink)}
.sd2-fam-go{margin-top:auto;padding-top:16px;font:600 13px/1.2 var(--f-body);letter-spacing:.04em;color:#fff;border-bottom:1px solid #ffffff55;align-self:flex-start;min-height:40px;display:inline-flex;align-items:flex-end}
.sd2-fam-go:hover{color:var(--liv-red-lite);border-color:var(--liv-red-lite)}

/* ---- 4 應用 ---- */
.sd2-apps{background:#fff;color:var(--liv-ink)}
.sd2-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.sd2-app{margin:0;display:flex;flex-direction:column;background:#fff;border:1px solid var(--liv-line)}
.sd2-app img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:saturate(.96)}
.sd2-app figcaption{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;position:relative}
.sd2-app-no{font:400 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--liv-red-ink)}
.sd2-app h3{font:700 16.5px/1.4 var(--f-body);color:var(--liv-ink)}
.sd2-app p{font-size:14.5px;line-height:1.7;color:var(--liv-ink2)}
.sd2-notfor{margin-top:26px;padding:16px 20px;border-left:4px solid var(--liv-red);background:#FAF9F6;font-size:15px;line-height:1.75;color:var(--liv-ink2);max-width:80ch}
.sd2-notfor b{color:var(--liv-ink)}
.sd2-notfor a{color:var(--liv-red-ink);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* ---- 5 規格 + FAQ ---- */
.sd2-specs{background:#FAF9F6;color:var(--liv-ink);border-top:1px solid var(--liv-line)}
.sd2-specs-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.sd2-tbl{width:100%;border-collapse:collapse;border-top:2px solid var(--liv-black);background:#fff}
.sd2-tbl th,.sd2-tbl td{padding:12px 14px;border-bottom:1px solid var(--liv-line);vertical-align:top;text-align:left}
.sd2-tbl th{width:9.5em;font:400 11.5px/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--liv-mut);background:#FAF9F6;border-right:1px solid var(--liv-line)}
.sd2-tbl td{font-size:15px;line-height:1.65;color:var(--liv-ink)}
.sd2-tbl a{color:var(--liv-red-ink);text-decoration:underline;text-underline-offset:3px}
.sd2-tbl .buy-tags{display:flex;flex-wrap:wrap;gap:6px}
.sd2-tbl .buy-tags span{font:500 12.5px/1.2 var(--f-body);border:1px solid var(--liv-line);padding:5px 9px;color:var(--liv-ink2)}
.sd2-notes{margin:0;padding-left:1.1em;font-size:14.5px;color:var(--liv-ink2)}
.sd2-notes li + li{margin-top:4px}
.sd2-from{margin-top:10px;font:400 11px/1.5 var(--f-mono);letter-spacing:.06em;color:var(--liv-mut)}
.sd2-faq{max-width:none}
.sd2-faq details{background:#fff;border:1px solid var(--liv-line);padding:0 16px;margin-bottom:8px}
.sd2-faq details:first-child{border-top:1px solid var(--liv-line)}
.sd2-faq summary::after{right:0}

/* ---- 手機黏底動作列 ---- */
.sd2-bar{display:none}
@media(max-width:860px){
  .sd2-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--liv-line);
    padding:10px var(--pad0) calc(10px + env(safe-area-inset-bottom));gap:10px;box-shadow:0 -6px 20px #0000000f}
  .sd2-bar-a,.sd2-bar-b{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font:700 15px/1 var(--f-body);letter-spacing:.03em}
  .sd2-bar-a{border:1px solid var(--liv-black);color:var(--liv-ink);background:#fff}
  .sd2-bar-b{background:var(--liv-red);color:#fff;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
  .sd2-bar-b .n{font:600 11px/1 var(--f-mono);background:#fff;color:var(--liv-red-ink);padding:4px 7px;border-radius:999px}
  .sd2-bar-b .n[hidden]{display:none}
  body.sd2-view:has(#buy.open) .sd2-bar,body.sd2-view:has(#drawer.open) .sd2-bar{display:none}
  body.sd2-view{padding-bottom:78px}
}

/* ---- 響應式 ---- */
@media(max-width:1100px){
  .sd2-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd2-fam-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sd2-wall{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:860px){
  .sd2-hero{padding-top:calc(108px + 18px)}
  .sd2-hero-grid{grid-template-columns:minmax(0,1fr);gap:26px}
  .sd2-hook{font-size:clamp(32px,9vw,44px)}
  html[lang^="zh"] .sd2-hook{font-size:clamp(26px,7vw,36px);max-width:none}
  /* 手機閱讀順序:主張 → 一句話 → 色牆 → 兩顆鈕 → 關鍵數字(色盤先於按鈕) */
  .sd2-hero-txt{display:contents}
  .sd2-hero-grid > .sd2-hero-txt > .sd2-eyebrow{order:1}
  .sd2-hero-grid > .sd2-hero-txt > .sd2-hook{order:2}
  .sd2-hero-grid > .sd2-hero-txt > .liv-rule{order:3;margin:14px 0 4px}
  .sd2-hero-grid > .sd2-hero-txt > .sd2-lede{order:4}
  .sd2-hero-grid > .sd2-wall-wrap{order:5}
  .sd2-hero-grid > .sd2-hero-txt > .sd-actions{order:6;margin-top:4px}
  .sd2-hero-grid > .sd2-hero-txt > .sd2-keys{order:7;margin-top:8px}
  .sd2-hero-grid{gap:16px}
  .sd2-eyebrow{margin-bottom:0}
  .sd2-lede{margin-top:0}
  .sd2-lede{font-size:15.5px}
  .sd2-keys{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:26px}
  .sd2-keys > div:nth-child(2){border-right:0}
  .sd2-keys > div:nth-child(3){padding-left:0;border-right:1px solid #ffffff1c}
  .sd2-keys > div:nth-child(n+3){border-top:1px solid #ffffff1c;margin-top:12px}
  .sd2-wall-wrap{margin-inline:calc(-1*var(--pad));padding-inline:var(--pad)}
  .sd2-wall{display:flex;overflow-x:auto;gap:10px;padding:6px 0 4px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .sd2-wall::-webkit-scrollbar{display:none}
  .sd2-wall .sd2-chip{flex:0 0 76px;scroll-snap-align:start}
  .sd2-wall .sd2-chip:nth-child(even){margin-top:0}
  .sd2-chip.skel{width:76px;height:118px}
  .sd2-chip-l b{font-size:11.5px}
  .sd2-chip-l i{font-size:11px}
  .sd2-wall-hint{text-align:left;font-size:11px}
  .sd2-why-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .sd2-why-card p{font-size:15px}
  .sd2-specs-grid{grid-template-columns:minmax(0,1fr)}
  .sd2-tbl th{width:7.5em;font-size:11px}
  .sd2-tbl td{font-size:15px}
  .sd2-family::before{display:none}
  .sd2-fam{padding:20px 16px 18px}
  .sd2-fam dd{font-size:14px}
  .sd2-app h3{font-size:16px}
  .sd2-app p{font-size:15px}
  .sd2-pair-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){
  .sd2-app-grid{grid-template-columns:minmax(0,1fr)}
  .sd2-fam-grid{grid-template-columns:minmax(0,1fr)}
  .sd2-fam dl{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
  .sd2-fam dl > div:first-child{grid-column:1/-1}
}

/* ============================================================
   手機字級 pass(2026-08-23)— 手機閱讀內文升到 16px 對齊
   iOS 17pt / Material 16sp 慣例;說明與卡片文字 13–13.5 → 14.5;
   規格 ticks 與統計標籤 11.5 → 12.5。
   眉標 / .tag / .chap-no / .ticker 等 mono 裝飾標籤刻意不動
   (非閱讀主體)。詢價表編輯鈕(.co-actions-edit .btn)有更高
   特異性的既有規則,不受此處 .btn 影響。
   ============================================================ */
@media(max-width:760px){
  /* 閱讀內文 → 16px */
  .ed-lead p,.ed-ref,.ed-faq .ed-ans p,.ed-faq summary,.ed-hl li,.ed-notes li{font-size:16px}
  .ed-app p,.ed-app h3{font-size:15.5px}
  .sd-pos,.hero-sub{font-size:16px}
  .sd-spec .v,.sd-cta-sub,.buy-about-t{font-size:15.5px}
  /* CTA 按鈕與導覽連結 */
  .btn{font-size:14.5px}
  html[lang^="zh"] .mode-sw button{font-size:14.5px}
  .mode-sw button{font-size:13px}
  .fcol a{font-size:14.5px}
  .dr-empty{font-size:14.5px}
  .scard-pos{font-size:14.5px}
  /* 說明小字 13 → 14 級距 */
  .feat-inner figcaption{font-size:13px}
  .foot-brand p,.foot-co{font-size:13px}
  .bser-hint{font-size:13px}
  .chip{font-size:13px}
  /* 規格 ticks 與統計標籤 */
  .bill-specs i{font-size:12.5px}
  .stat .k{font-size:12.5px}
}

/* ============================================================
   選購視窗深色版(BUY_DARK 白名單,2026-08-23)—
   使用者:產品跳出來的視窗顯示黑色,先從 7700 系列測試。
   app.js 依 BUY_DARK 白名單在 #buy 掛 .buy-dark;樣式沿用
   08-23 深色實驗驗證過的覆蓋(tools/www/backup/
   style.css.dark_experiment_20260823.bak):sd-view 亮色覆蓋
   全走 --liv-*,scope 重定義即翻黑,再蓋掉 6 處寫死色。
   ▶ 要退回白底:app.js 的 BUY_DARK 清空或刪本段。
   ============================================================ */
body.sd-view .buy.buy-dark{background:#101014;border-color:#ffffff26;
  --liv-ink:#F4F2EE;--liv-ink2:#D8D5CC;--liv-mut:#A8A49B;
  --liv-line:#ffffff26;--liv-ph:#1A1A20;--liv-red-ink:#FF5A60;
  --liv-black:#F4F2EE;--liv-red-soft:#3A181B}
body.sd-view .buy.buy-dark .opt.on{color:#0B0B0D}
body.sd-view .buy.buy-dark .buy-add:hover{background:#F4F2EE;color:#0B0B0D}
body.sd-view .buy.buy-dark .buy-off:hover{color:#0B0B0D}
body.sd-view .buy.buy-dark .buy-grip{background:#101014}
body.sd-view .buy.buy-dark .buy-bar{background:#101014;border-color:#ffffff26}
/* —— XTREME 燈箱風(2026-08-23 第二輪)——
   使用者附 /xtreme/es.html 快速檢視燈箱截圖:「這個設計更棒,改到類似這樣」。
   深色視窗的資訊欄改 XTREME 版式:圖上 SKU 紅籤、特大斜體標題、描述上移、
   髮線分隔的雙欄規格格(標籤上/值下)、應用邊框籤;規格對的 .sp wrapper
   在白底版走 display:contents(版面零改變),只有深色版展開成格子。 */
.buy-spec .sp{display:contents}
body.sd-view .buy.buy-dark .buy-info{gap:16px}
body.sd-view .buy.buy-dark .buy-tag{position:absolute;top:14px;left:14px;z-index:2;background:var(--liv-red);color:#fff;
  font:700 12px/1 'Space Grotesk',var(--f-body);letter-spacing:.14em;text-transform:uppercase;padding:9px 13px}
body.sd-view .buy.buy-dark .buy-name{font-size:clamp(27px,2.9vw,40px);line-height:1.04;margin-top:6px}
/* 寬度/長度/數量併成一列(右欄變矮 → 方形產品圖上下不留空;窄幅自動換行) */
body.sd-view .buy.buy-dark .buy-osz{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:flex-start}
body.sd-view .buy.buy-dark .buy-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 24px;
  border-top:1px solid var(--liv-line);padding-top:16px}
body.sd-view .buy.buy-dark .buy-spec .sp{display:block}
body.sd-view .buy.buy-dark .buy-spec .k{display:block;margin-bottom:5px;white-space:normal}
body.sd-view .buy.buy-dark .buy-spec .v{font:700 15.5px/1.45 var(--f-body)}
body.sd-view .buy.buy-dark .buy-apps span{font-size:11px;padding:7px 12px}
body.sd-view .buy.buy-dark .buy-add{height:56px}
@media(max-width:860px){
  body.sd-view .buy.buy-dark .buy-spec{gap:13px 16px}
}
/* 深色版圖欄:實照 contain 之下鋪同圖模糊放大當環境底(XTREME 燈箱的滿版感,
   又不必 cover 裁掉產品照下緣的品號帶) */
body.sd-view .buy.buy-dark .buy-vis{overflow:hidden}
body.sd-view .buy.buy-dark .buy-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  filter:blur(34px) saturate(1.05) brightness(.55);transform:scale(1.2)}

/* ============================================================
   選購區優先版(FLOOR_FIRST / .sd-ff,先開 7700 測試;2026-08-24)
   ① 標題列合併:「本系列產品」+ 搜尋框 + 件數 同一條 sticky 列
      (.sd-headrow 疊在 .sd-toolbar 上,沿用其 sticky/搜尋框樣式)
   ② 碳黑章節帶 .sd-edband(產品清單 → 系列介紹的層次轉場:
      紅色斜切 + 幽靈系列代碼 + 章節標題;紅白簽名條貼上緣當點綴)
   要退回:app.js 把代碼從 FLOOR_FIRST 拿掉,這段規則就沒人掛。
   ============================================================ */
.sd-headrow{padding-block:13px}
.sd-headrow .sd-floor-t{flex:0 1 auto;font-size:clamp(20px,2.1vw,26px);line-height:1.15;margin-right:8px}
.sd-headrow .shop-search{margin-left:auto}
.sd-headrow .sd-count{margin-left:0;flex:none}
@media(max-width:700px){
  .sd-headrow .sd-floor-t{flex:1 1 auto;margin-right:0}
  .sd-headrow .sd-count{margin-left:auto}
  /* 搜尋框吃既有 ≤700 規則 flex:1 1 100% → 自動折到第二列全寬 */
}
/* 產品清單收底:小幅留白直接接章節帶(收尾簽名條已改掛在章節帶上緣) */
.sd-ff .sd-floor{padding-bottom:clamp(22px,3vw,38px)}
/* 碳黑章節帶:進入系列介紹的轉場;紅白簽名條貼著上緣當點綴 */
.sd-edband{position:relative;overflow:hidden;background:var(--liv-black);color:#fff}
.sd-edband::before{content:'';position:absolute;top:-12%;bottom:-12%;right:clamp(-30px,-2vw,-14px);
  width:clamp(46px,6vw,90px);background:var(--liv-red);transform:skewX(-18deg)}
.sd-edband-in{position:relative;z-index:1;max-width:1320px;margin-inline:auto;padding:clamp(38px,5vw,66px) var(--pad)}
.sd-edband-in .liv-rule{position:absolute;top:0;left:var(--pad);margin:0}
.sd-edband-k{font:500 11.5px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--red-t);margin:0 0 13px}
.sd-edband-t{font-family:var(--f-liv);font-weight:900;font-style:italic;letter-spacing:.01em;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,44px);line-height:1.06;margin:0}
html[lang^="zh"] .sd-edband-t{font-family:'Noto Sans TC',sans-serif;font-style:normal;letter-spacing:0;text-transform:none}
.sd-edband-s{margin:14px 0 0;max-width:56ch;color:#D8D5CC;font-size:15px;line-height:1.75}
.sd-edband-code{position:absolute;right:clamp(60px,8vw,150px);top:50%;transform:translateY(-50%) skewX(-8deg);
  font:italic 900 clamp(72px,11vw,150px)/1 var(--f-liv);color:transparent;-webkit-text-stroke:1px #ffffff30;
  letter-spacing:.02em;pointer-events:none;user-select:none}
@media(max-width:860px){.sd-edband-code{display:none}}
/* ff:hero 兩顆按鈕配色對調 — 「系列介紹」(頁面遠端目的地)變紅色主鈕,
   「開始選規格」(產品就在下一屏)退為黑底白框 */
.sd-ff .sd-btn-a{background:none;clip-path:none;border:1px solid #ffffff8c;color:#fff}
.sd-ff .sd-btn-a:hover{background:none;border-color:var(--liv-red-lite);color:var(--liv-red-lite)}
.sd-ff .sd-btn-b{border:0;background:var(--liv-red);color:#fff;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.sd-ff .sd-btn-b:hover{background:#9E0F18;color:#fff}
/* ff:hero 統計列只剩 SKU / 子分類 兩格(每卷尺寸/耐候與緊鄰的紅色規格帶重複,已拿掉) */
.sd-ff .sd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.sd-ff .sd-stat:nth-child(-n+2){border-bottom:0}
.sd-ff .sd-stat:nth-child(2){border-right:0}
/* ff:子分類標示強化 — 篩選列加 mono 眉標,chips 放大加粗,
   選中的變紅色斜切塊(與主鈕同語彙) */
.sd-subk{font:500 11px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--liv-red-ink);margin:0 0 12px}
.sd-ff .sd-subnav{padding-top:26px}
.sd-ff .sd-subnav .chips{gap:10px}
.sd-ff .sd-subnav .chip{font:700 14px/1.2 var(--f-body);letter-spacing:.02em;min-height:48px;
  padding:0 20px;border:2px solid var(--liv-ink);color:var(--liv-ink)}
.sd-ff .sd-subnav .chip .n{font:700 12px/1 var(--f-mono);color:var(--liv-mut)}
.sd-ff .sd-subnav .chip:hover{color:var(--liv-red-ink);border-color:var(--liv-red-ink)}
.sd-ff .sd-subnav .chip.on{background:var(--liv-red);border:0;color:#fff;padding:0 26px;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.sd-ff .sd-subnav .chip.on .n{color:#FFD9DB}
body.sd-view .sd-ff .sd-subnav .chip.on{box-shadow:none}
/* ff:分段標題升級 — 大紅編號 + 900 粗體大標 + 黑色斜切件數籤 */
.sd-ff .sub-head{border-top-width:3px;padding-top:18px;gap:12px 16px;align-items:baseline}
.sd-ff .sub-head::before{top:-3px;height:5px;width:74px}
.sd-ff .sub-head-no{font-size:clamp(24px,2.6vw,32px)}
.sd-ff .sub-head-t{font-family:var(--f-liv);font-weight:900;font-style:italic;letter-spacing:.01em;
  text-transform:uppercase;font-size:clamp(17px,1.9vw,23px);line-height:1.12}
html[lang^="zh"] .sd-ff .sub-head-t{font-family:'Noto Sans TC',sans-serif;font-style:normal;
  letter-spacing:0;text-transform:none}
.sd-ff .sub-head-r{font-size:11.5px}
.sd-ff .sub-head-n{font:700 12px/1 var(--f-mono);padding:7px 12px;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)}
/* ff:右下角浮動「回到頁首」— 捲過一屏才現身,碳黑方塊,hover 轉紅 */
.sd-top{position:fixed;right:18px;bottom:18px;z-index:56;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;background:#0B0B0Cf0;color:#fff;
  border:0;cursor:pointer;box-shadow:0 4px 14px #00000030;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s,background .2s}
.sd-top.show{opacity:1;visibility:visible;transform:none}
.sd-top:hover,.sd-top:focus-visible{background:var(--liv-red)}
.sd-top svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:square}
@media(max-width:700px){.sd-top{right:14px;bottom:14px;width:44px;height:44px}}
/* ff:系列介紹內文重點字(app.js edEmphasize 自動標示)—
   規格數字紅色加粗、系列代碼墨色加粗 */
/* display:inline 蓋掉 .ed-hl b / .ed-notes b 的 display:block(那是給清單開頭標籤用的) */
.sd-ff .sd-ed b.ed-key{display:inline;margin:0;font-weight:700;color:var(--liv-red-ink);font-variant-numeric:tabular-nums}
.sd-ff .sd-ed b.ed-code{display:inline;margin:0;font-weight:700;color:var(--liv-ink)}

/* ---------- 官網詢價單工具列(/inquiry/ 登入 CRM 後才出現;2026-08-24)----------
   深色 Frame One 主題(詢價頁本體);對比程式驗:red-t/#111114=6.2、ink2/#111114≈6.9、
   dirty 琥珀 #F2B84B/#111114≈9.8、armed 白/紅=4.66(全站 btn-red 既有值)。 */
.co-qbar{margin:26px 0 8px;border:1px solid var(--line);background:var(--bg2);padding:14px 16px}
.co-qbar-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.co-qbar-k{font:400 11px/1 var(--f-mono);letter-spacing:.18em;color:var(--red-t);text-transform:uppercase;white-space:nowrap}
.co-qbar-name{font:700 15px/1.35 var(--f-body);color:var(--ink);background:none;border:0;border-bottom:1px dashed #ffffff2e;
  padding:2px 4px;cursor:text;text-align:left;max-width:100%;overflow-wrap:anywhere}
.co-qbar-name:hover{border-bottom-color:var(--red-t);color:#fff}
.co-qbar-st{font:400 11.5px/1.5 var(--f-mono);color:var(--ink2)}
.co-qbar-st.dirty{color:#F2B84B}
.co-qbar-btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.co-qbar .btn{height:40px;padding:0 14px;font-size:11.5px}
.co-qbar .btn.armed{background:var(--red);border-color:var(--red);color:#fff}
.co-qbar-nrow{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.co-qbar-nrow[hidden],.co-qbar-list[hidden]{display:none}   /* display:flex 會蓋過 hidden 的 UA 樣式,要補回 */
.co-qbar-nrow input{flex:1;min-width:220px;height:42px;background:var(--panel);border:1px solid var(--line);
  color:var(--ink);padding:0 12px;font:400 14px/1 var(--f-body)}
.co-qbar-nrow input:focus{outline:0;border-color:var(--red)}
.co-qbar-list{margin-top:12px;border-top:1px solid var(--line)}
.co-qbar-empty{padding:14px 2px;font:400 12.5px/1.7 var(--f-mono);color:var(--ink2)}
.co-qrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.co-qrow b{font:700 14px/1.4 var(--f-body);color:var(--ink);overflow-wrap:anywhere}
.co-qrow .m{font:400 11.5px/1.5 var(--f-mono);color:var(--ink2);white-space:nowrap}
.co-qrow .sp{flex:1}
.co-qrow button{font:600 11px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid #ffffff40;color:var(--ink);padding:0 12px;min-height:34px}
.co-qrow button:hover{border-color:var(--red-t);color:var(--red-t)}
.co-qrow button.armed,.co-qrow button.armed:hover{background:var(--red);border-color:var(--red);color:#fff}
.co-qrow-in{height:36px;background:var(--panel);border:1px solid var(--red);color:var(--ink);
  padding:0 10px;font:700 14px/1 var(--f-body);min-width:200px;flex:1}
.co-qrow-in:focus{outline:0}
@media(max-width:700px){
  .co-qbar{padding:12px}
  .co-qbar-btns{margin-left:0;width:100%}
  .co-qbar .btn{flex:1 1 calc(50% - 4px);height:46px;font-size:12px;padding:0 8px}
  .co-qbar-nrow input{min-width:0;flex-basis:100%}
  .co-qbar-nrow .btn{flex:1}
  .co-qrow{gap:8px}
  .co-qrow .m{white-space:normal}
  .co-qrow button{min-height:44px;flex:1 1 calc(33% - 6px)}
  .co-qrow b{flex-basis:100%}
  .co-qrow .sp{display:none}
}