/* ═══════ 條碼服飾 BARCODE · 設計系統 v2（CELINE／Chanel 極簡精品）═══════
   黑白米、極大留白、全大寫細標、巨幅圖、克制慢動畫。
   後台可調：主色 body[data-theme]、逐區字級 --k-*、全站縮放 --scale。
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --ink:#16140f; --bone:#f6f3ec; --cream:#fbf9f4; --paper:#fffefb;
  --mute:#16140f7a; --line:#16140f17; --line2:#16140f2e; --sand:#ece5d8;
  --accent:#16140f;                 /* 主色（後台切換）*/
  --f-display:"Fraunces",serif; --f-body:"Inter",sans-serif; --f-mono:"Inter",sans-serif;
  --scale:1;
  --k-hero:1; --k-secttl:1; --k-name:1; --k-price:1; --k-body:1; --k-nav:1;  /* 逐區字級倍率 */
  --gut:56px; --maxw:1320px;
  --radius:0; --card-ratio:3 / 4; --pgrid-min:280px;   /* 卡片：圓角/比例/網格密度（後台可調）*/
}
/* ═ 三種模板（後台一鍵切換整體調性）═ */
/* 預設＝極簡編輯（CELINE/Chanel）；以下兩個覆蓋底色/字/圓角/比例 */
body[data-template="warm"]{--cream:#f3ece1;--paper:#fbf6ee;--ink:#2b2218;--mute:#2b221885;--line:#2b221817;--line2:#2b221830;--sand:#e6dccb;--accent:#9a7b4f;--radius:2px;--card-ratio:4 / 5}
body[data-template="signature"]{--cream:#ffffff;--paper:#ffffff;--ink:#141414;--mute:#14141485;--line:#1414140f;--line2:#14141422;--sand:#f1f1f1;--accent:#0aa9a0;--radius:0;--card-ratio:3 / 4}
/* 精品主色 presets（覆蓋重點色，可疊在任何模板上）*/
body[data-theme="camel"]{--accent:#9a7b4f}
body[data-theme="tiffany"]{--accent:#0aa9a0}
body[data-theme="fendi"]{--accent:#b8902a}
body[data-theme="rose"]{--accent:#b07a72}
body[data-theme="sage"]{--accent:#7f8a6f}
body[data-theme="bordeaux"]{--accent:#7d3b3b}
body[data-theme="noir"]{--accent:#000}
/* 卡片風格 */
body[data-card="border"] .pcard .ph{border:1px solid var(--line2)}
body[data-card="frame"] .pcard{padding:10px;background:var(--paper);border:1px solid var(--line)}

*{box-sizing:border-box}
html{font-size:calc(16px*var(--scale));scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;opacity:0;transition:opacity .6s ease}
body.ready{opacity:1}
.font-display{font-family:var(--f-display)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.label{font-size:calc(11px*var(--k-nav));letter-spacing:.26em;text-transform:uppercase;color:var(--mute);font-weight:400}
::selection{background:var(--ink);color:var(--cream)}

/* ── 進場動畫 ── */
.fx{opacity:0;transform:translateY(30px);transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
.fx.in{opacity:1;transform:none}
.fx-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s cubic-bezier(.16,1,.3,1)}
.fx-clip.in{clip-path:inset(0 0 0 0)}
[data-split]{display:inline-block}
[data-split] .ch{display:inline-block;opacity:0;transform:translateY(.7em);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
[data-split].in .ch{opacity:1;transform:none}
[data-mag]{transition:transform .4s cubic-bezier(.2,1,.3,1)}
@media(prefers-reduced-motion:reduce){body{opacity:1}.fx,.fx-clip,[data-split] .ch{opacity:1!important;transform:none!important;clip-path:none!important}}

/* ── 導覽列 ── */
.nav{position:sticky;top:0;z-index:50;background:#fbf9f4ee;backdrop-filter:blur(12px);border-bottom:1px solid var(--line);transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.nav.nav-solid{box-shadow:0 10px 30px #16140f0a}
.nav.nav-up{transform:translateY(-100%)}
.nav-in{display:flex;align-items:center;gap:36px;height:80px}
.brand{font-family:var(--f-display);font-size:26px;font-weight:500;letter-spacing:.04em;line-height:1}
.brand small{display:block;font-size:9px;letter-spacing:.34em;text-transform:uppercase;color:var(--mute);margin-top:3px;font-weight:400}
.nav-links{display:flex;gap:30px;margin-left:auto;font-size:calc(12px*var(--k-nav));letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.nav-links a{position:relative;padding:4px 0;color:var(--ink);opacity:.8}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .4s cubic-bezier(.16,1,.3,1)}
.nav-links a:hover{opacity:1}.nav-links a:hover::after{width:100%}
.nav-ico{display:flex;gap:18px;align-items:center;font-size:19px}
.bag-btn{position:relative;cursor:pointer}
.bag-count{position:absolute;top:-7px;right:-10px;background:var(--accent);color:#fff;font-size:10px;min-width:16px;height:16px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-weight:400}
.live-dot{width:7px;height:7px;border-radius:50%;background:#c0392b;display:inline-block;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ── 按鈕（極簡：細框 / 文字底線）── */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:400;padding:16px 32px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;transition:.4s cubic-bezier(.16,1,.3,1)}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn-fill{background:var(--ink);color:var(--cream)}
.btn-fill:hover{background:var(--accent);border-color:var(--accent)}
.btn-line{border:0;border-bottom:1px solid var(--ink);padding:6px 0;background:none}
.btn-line:hover{background:none;color:var(--accent);border-color:var(--accent)}
.btn-sm{padding:11px 20px;font-size:11px}

/* ── Hero 全幅 ── */
.hero{position:relative;min-height:calc(100svh - 80px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:115%;object-fit:cover;will-change:transform}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 30%,#16140f66 100%)}
.hero-in{position:relative;z-index:2;width:100%;padding-bottom:7vh;color:var(--cream)}
.hero-top{position:absolute;top:104px;left:0;right:0;display:flex;justify-content:space-between}
.hero-title{font-family:var(--f-display);font-weight:400;font-size:calc(clamp(58px,13vw,184px)*var(--k-hero));line-height:.92;letter-spacing:-.01em;margin:0}
.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-top:26px;border-top:1px solid #f6f3ec33;padding-top:22px}
.hero-row p{max-width:460px;font-size:calc(15px*var(--k-body));opacity:.85;margin:0}
.hero .label{color:#f6f3ecaa}

/* ── 區塊 ── */
.sec{padding:clamp(64px,10vw,140px) 0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:24px;flex-wrap:wrap}
.sec-title{font-family:var(--f-display);font-weight:400;font-size:calc(clamp(30px,4.6vw,56px)*var(--k-secttl));line-height:1.02;margin:0;letter-spacing:-.01em}

/* ── 商品網格 ── */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--pgrid-min),1fr));gap:clamp(20px,2.4vw,38px) clamp(16px,1.8vw,28px)}
.pcard{display:block;cursor:pointer}
.pcard .ph{position:relative;aspect-ratio:var(--card-ratio);overflow:hidden;background:var(--sand);border-radius:var(--radius)}
.pcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.pcard:hover .ph img{transform:scale(1.04)}
.pcard .ph .hov{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.pcard:hover .ph .hov{opacity:1}
.pcard .tag{position:absolute;top:14px;left:14px;background:#fbf9f4;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:5px 11px;font-weight:400}
.pcard .tag.sold{background:var(--ink);color:var(--cream)}
.pcard .meta{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;gap:12px}
.pcard .pname{font-size:calc(14px*var(--k-name));font-weight:400;letter-spacing:.01em}
.pcard .pcat{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:4px}
.pcard .price{font-size:calc(13px*var(--k-price));letter-spacing:.04em;white-space:nowrap;color:var(--ink)}

/* ── 跑馬燈 ── */
.marquee{overflow:hidden;white-space:nowrap;border-block:1px solid var(--line);padding:26px 0}
.marquee .track{display:inline-block;animation:mq 34s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.marquee b{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:clamp(24px,3.4vw,40px);margin:0 26px}
.marquee i{font-style:normal;color:var(--accent);margin:0 6px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ── 直播帶貨 ── */
.live-band{background:var(--ink);color:var(--cream);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.live-band .tagrow{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#e9cdaf}
.live-card{background:#23211b;padding:18px;display:flex;gap:15px;align-items:center;margin-top:14px}
.live-card .thumb{width:62px;height:78px;border-radius:0;object-fit:cover;background:#3a382f;flex:none}

/* ── 數據帶 ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;border-block:1px solid var(--line);padding:clamp(36px,5vw,60px) 0}
.stats .num{font-family:var(--f-display);font-size:clamp(40px,6vw,72px);font-weight:400;line-height:1}
.stats .lab{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:12px}

/* ── 頁尾 ── */
.foot{background:var(--ink);color:var(--cream);padding:clamp(56px,8vw,96px) 0 40px;margin-top:0}
.foot a{opacity:.65;transition:opacity .3s}.foot a:hover{opacity:1}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:36px}
.foot h4{font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin:0 0 16px;font-weight:400}
.foot ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px;font-size:14px}
.foot .big{font-family:var(--f-display);font-size:34px;font-weight:500;letter-spacing:.04em}
.foot-admin{display:inline-flex;align-items:center;gap:7px;border:1px solid #f6f3ec2e;padding:8px 16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.65;transition:.35s cubic-bezier(.16,1,.3,1)}
.foot-admin:hover{background:var(--accent);border-color:var(--accent);opacity:1;color:#fff}

/* ── 購物車抽屜 ── */
.drawer-mask{position:fixed;inset:0;background:#16140f70;z-index:90;opacity:0;pointer-events:none;transition:.4s}
.drawer-mask.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100%;width:min(440px,94vw);background:var(--cream);z-index:91;transform:translateX(100%);transition:transform .5s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--line)}
.drawer-body{flex:1;overflow:auto;padding:8px 24px}
.drawer-foot{border-top:1px solid var(--line);padding:22px 24px}
.citem{display:flex;gap:15px;padding:18px 0;border-bottom:1px solid var(--line)}
.citem img{width:72px;height:92px;object-fit:cover;background:var(--sand);flex:none}
.citem .qty{display:inline-flex;align-items:center;gap:12px;font-size:13px;margin-top:8px}
.citem .qty button{width:24px;height:24px;border:1px solid var(--line2);background:transparent;cursor:pointer;font-size:14px}

/* ════ 手機 ════ */
@media(max-width:860px){
  :root{--gut:26px}
  .nav-in{height:64px;gap:18px}.nav-links{display:none}
  .live-band{grid-template-columns:1fr;gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .hero-row{gap:14px}
  .pgrid{grid-template-columns:repeat(2,1fr);gap:30px 18px}
  .pcard .meta{flex-direction:column;gap:3px}
}
@media(max-width:430px){
  :root{--gut:22px}
  .pgrid{gap:26px 16px}
  .pcard .pname{font-size:calc(13px*var(--k-name))}
}