/* 共用版型骨架。顏色、字型、字級一律用 var()，各站在 theme.css 覆寫 */

/* 字型：拉丁用自 host 的 Sen / Hanken Grotesk（與原站同款），
   中文交給系統字型，避免載入數 MB 的中文 webfont */

/* 骨架用得到的基础变数。颜色与字型由各版型的 style 覆写，
   这里只放「不管哪个版型都要有」的字级、字重、容器宽与缓动。 */
:root{
    --wrap:1240px;
    --fs-hero:clamp(30px,4.2vw,54px);
    --fs-h2:clamp(22px,2.6vw,34px);
    --fs-h3:clamp(18px,1.9vw,25px);
    --fs-h4:17px;
    --fs-h5:15px;
    --fs-body:15px;
    --fs-sm:13.5px;
    --fs-xs:12px;
    --fw-light:300;
    --fw-norm:400;
    --fw-semi:600;
    --fw-bold:700;
    --ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:var(--fs-body);font-weight:var(--fw-norm);
    color:var(--ink);background:var(--bg);line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4,h5{font-family:var(--f-title);font-weight:var(--fw-semi);line-height:1.5;letter-spacing:.04em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--f-title);font-size:var(--fs-xs);font-weight:var(--fw-semi);
    letter-spacing:.3em;color:var(--ink-3);text-transform:uppercase;margin-bottom:10px}

/* 圖片：載入完成才淡入 */
.fig{overflow:hidden;background:var(--bg-3);position:relative}
.fig img{width:100%;height:100%;object-fit:cover;display:block;
    opacity:0;transition:opacity .7s var(--ease),transform 1.1s var(--ease)}
.fig img.loaded{opacity:1}
.ph{display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#efeae2 0%,#e0d9cd 100%)}
.ph span{font-size:12px;letter-spacing:.1em;color:#b0a699;padding:0 14px;text-align:center}

.reveal{opacity:0;transform:translateY(26px);
    transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* topbar */
.topbar{background:var(--ink);color:#cfc7bc;font-size:12px;font-weight:var(--fw-norm);letter-spacing:.05em}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar i{opacity:.65;margin-right:4px}
.tb-mid{color:#9d958a}

/* header */
.head{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.95);
    border-bottom:1px solid var(--line);backdrop-filter:saturate(1.3) blur(10px);
    transition:box-shadow .35s var(--ease)}
.head.stuck{box-shadow:0 6px 28px rgba(27,24,20,.08)}
.head-in{display:flex;align-items:center;gap:28px;height:86px;transition:height .35s var(--ease)}
.head.stuck .head-in{height:70px}
.logo{display:flex;flex-direction:column;line-height:1.2;white-space:nowrap}
.logo-zh{font-family:var(--f-title);font-size:21px;font-weight:var(--fw-bold);letter-spacing:.14em}
.logo-en{font-size:9.5px;font-weight:var(--fw-semi);letter-spacing:.34em;
    color:var(--ink-3);text-transform:uppercase;margin-top:3px}
.nav{display:flex;flex-wrap:wrap;gap:22px;font-size:14.5px;font-weight:var(--fw-norm);flex:1;justify-content:center}
.nav a{position:relative;padding:6px 0;color:var(--ink-2);transition:color .3s var(--ease)}
.nav a::after{content:"";position:absolute;left:50%;right:50%;bottom:0;height:1px;
    background:var(--ink);transition:left .35s var(--ease),right .35s var(--ease)}
.nav a:hover,.nav a.on{color:var(--ink)}
.nav a:hover::after,.nav a.on::after{left:0;right:0}
.nav .nav-top{color:var(--ink);font-weight:var(--fw-semi)}

/* 右上功能鍵 */
.head-act{display:flex;align-items:center;gap:4px;padding-left:10px;
    border-left:1px solid var(--line);margin-left:4px}
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;border:none;background:none;cursor:pointer;
    font-size:22px;color:var(--ink);border-radius:50%;
    transition:background .3s var(--ease),color .3s var(--ease),transform .15s var(--ease)}
.icon-btn:hover{background:var(--bg-2);color:var(--accent)}
.icon-btn:active{transform:scale(.92)}
.icon-btn[data-tip]::after{content:attr(data-tip);position:absolute;top:100%;left:50%;
    transform:translate(-50%,4px);background:var(--ink);color:#fff;font-size:10.5px;
    font-family:var(--f-body);letter-spacing:.1em;padding:4px 9px;white-space:nowrap;
    opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.icon-btn[data-tip]:hover::after{opacity:1;transform:translate(-50%,8px)}
.cart{position:relative}
.badge{position:absolute;top:5px;right:4px;min-width:19px;height:19px;line-height:19px;
    background:var(--accent);color:#fff;border-radius:10px;font-size:11px;
    font-weight:var(--fw-semi);text-align:center;padding:0 5px;
    font-family:var(--f-body);border:2px solid #fff}
.burger{display:none}

/* 搜尋列 */
.searchbar{display:none;border-top:1px solid var(--line);background:#fff}
.searchbar.open{display:block;animation:dropin .35s var(--ease)}
@keyframes dropin{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.searchbar .wrap{padding:26px 28px 30px}
.search-box{display:flex;align-items:center;gap:14px;max-width:720px;margin:0 auto;
    border:1px solid var(--line);background:var(--bg-2);padding:0 18px;height:56px;
    transition:border-color .3s var(--ease),background .3s var(--ease)}
.search-box:focus-within{border-color:var(--ink);background:#fff}
.search-box>i{font-size:18px;color:var(--ink-3)}
.search-box input{flex:1;border:none;outline:none;font-size:15px;font-weight:var(--fw-norm);
    font-family:inherit;background:none;color:var(--ink)}
.search-box input::placeholder{color:var(--ink-3)}
.search-x{border:none;background:none;cursor:pointer;color:var(--ink-3);font-size:15px;
    padding:6px;transition:color .3s var(--ease)}
.search-x:hover{color:var(--ink)}
.search-hot{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
    max-width:720px;margin:16px auto 0;font-size:12.5px}
.search-hot span{color:var(--ink-3);letter-spacing:.1em;margin-right:2px}
.search-hot a{border:1px solid var(--line);padding:5px 13px;color:var(--ink-2);transition:all .3s var(--ease)}
.search-hot a:hover{border-color:var(--ink);color:var(--ink);background:var(--bg-2)}

/* ===== hero 輪播 ===== */
.hero{position:relative;height:86vh;min-height:520px;overflow:hidden;background:var(--ink)}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;
    transition:opacity 1.1s var(--ease),visibility 1.1s}
.slide.on{opacity:1;visibility:visible}
.slide-img,.slide-img .fig{position:absolute;inset:0;width:100%;height:100%}
.slide-img .fig{aspect-ratio:auto !important}
.slide.on .fig img{transform:scale(1.07);transition:transform 7s linear,opacity .7s var(--ease)}
.hero-mask{position:absolute;inset:0;
    background:
        radial-gradient(ellipse 58% 46% at 50% 60%,rgba(16,13,10,.48) 0%,rgba(16,13,10,0) 100%),
        linear-gradient(180deg,rgba(20,17,14,.46) 0%,rgba(20,17,14,.26) 42%,rgba(20,17,14,.66) 100%)}
.hero-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
    align-items:center;justify-content:center;text-align:center;color:#fff;padding:0 70px}
.slide.on .hero-eyebrow{animation:rise .9s var(--ease) .15s both}
.slide.on h1{animation:rise .9s var(--ease) .3s both}
.slide.on .hero-sub{animation:rise .9s var(--ease) .45s both}
.slide.on .btn{animation:rise .9s var(--ease) .6s both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.hero-eyebrow{font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:.42em;opacity:.85;margin-bottom:22px}
.hero h1{font-size:var(--fs-hero);font-weight:var(--fw-bold);letter-spacing:.18em;
    text-shadow:0 2px 30px rgba(0,0,0,.42)}
.hero-sub{font-size:15px;font-weight:var(--fw-light);letter-spacing:.2em;opacity:.9;
    margin:20px 0 40px;text-shadow:0 1px 16px rgba(0,0,0,.4)}

/* 左右箭頭：桌機 hover 浮現，手機常駐 */
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
    width:52px;height:52px;border:1px solid rgba(255,255,255,.5);background:rgba(20,17,14,.22);
    color:#fff;font-size:21px;cursor:pointer;backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
    opacity:0;transition:opacity .4s var(--ease),background .3s,border-color .3s,color .3s}
.hero:hover .hero-nav{opacity:1}
.hero-nav:hover{background:#fff;color:var(--ink);border-color:#fff}
.hero-nav.prev{left:28px}
.hero-nav.next{right:28px}

.hero-dots{position:absolute;left:0;right:0;bottom:84px;z-index:3;display:flex;justify-content:center;gap:12px}
.dot{border:none;background:none;cursor:pointer;padding:8px 4px;line-height:0}
.dot i{display:block;width:30px;height:2px;background:rgba(255,255,255,.4);
    transition:background .35s var(--ease),width .35s var(--ease)}
.dot.on i{background:#fff;width:46px}
.dot:hover i{background:rgba(255,255,255,.75)}
.hero-scroll{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
    z-index:3;color:#fff;font-size:22px;opacity:.65;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* 按鈕 */
.btn{display:inline-flex;align-items:center;gap:8px;padding:14px 38px;
    border:1px solid currentColor;font-size:13.5px;font-weight:var(--fw-semi);
    letter-spacing:.16em;cursor:pointer;background:none;font-family:var(--f-title);color:var(--ink);
    transition:background .4s var(--ease),color .4s var(--ease)}
.btn i{transition:transform .4s var(--ease)}
.btn:hover i{transform:translateX(5px)}
.btn:hover{background:var(--ink);color:#fff}
.btn-light{color:#fff}
.btn-light:hover{background:#fff;color:var(--ink)}
.btn-solid{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-solid:hover{background:var(--accent);border-color:var(--accent)}

/* notice */
.notice{background:var(--bg-2);font-size:var(--fs-sm);font-weight:var(--fw-norm);
    color:var(--ink-2);border-bottom:1px solid var(--line)}
.notice .wrap{padding:17px 28px;text-align:center}
.notice i{color:var(--accent);margin-right:4px}

/* sections */
.sec{padding:92px 0}
.sec-alt{background:var(--bg-2)}
.sec-head{text-align:center;margin-bottom:52px}
.sec-t{font-size:var(--fs-h3);font-weight:var(--fw-semi);letter-spacing:.16em}
.sec-more{text-align:center;margin-top:52px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:46px}

.pillars{padding:74px 0;border-bottom:1px solid var(--line)}
.pillar{text-align:center;padding:0 14px}
.pillar>i{font-size:27px;color:var(--accent);display:block;margin-bottom:16px}
.pillar h4{font-size:var(--fs-h4);font-weight:var(--fw-semi);letter-spacing:.16em}
.pillar-en{font-size:10.5px;font-weight:var(--fw-semi);letter-spacing:.22em;
    color:var(--ink-3);text-transform:uppercase;margin:7px 0 13px}
.pillar-desc{font-size:var(--fs-sm);font-weight:var(--fw-light);color:var(--ink-2);line-height:1.95}

/* 分類 */
.cate-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:40px 26px}
.cate{text-align:center;display:block}
.cate-fig{position:relative;overflow:hidden}
.cate-fig::after{content:"";position:absolute;inset:0;background:rgba(27,24,20,0);transition:background .5s var(--ease)}
.cate:hover .fig img{transform:scale(1.07)}
.cate:hover .cate-fig::after{background:rgba(27,24,20,.07)}
.cate h5{font-size:var(--fs-h5);font-weight:var(--fw-semi);letter-spacing:.16em;margin-top:18px}
.cate h5 .cate-g{display:block;font-size:11px;font-weight:var(--fw-norm);letter-spacing:.14em;color:var(--ink-2,#999);margin-bottom:3px}
.cate .go{display:inline-flex;align-items:center;gap:2px;font-size:12px;font-weight:var(--fw-norm);
    color:var(--ink-3);letter-spacing:.1em;margin-top:5px;transition:color .3s var(--ease)}
.cate:hover .go{color:var(--accent)}

/* 商品卡 */
.prod-fig{display:block;position:relative;overflow:hidden}
.prod:hover .fig img{transform:scale(1.05)}
.prod-tag{position:absolute;top:14px;left:14px;z-index:2;background:#fff;
    color:var(--ink);font-size:10px;font-weight:var(--fw-bold);font-family:var(--f-title);
    letter-spacing:.2em;padding:6px 12px}
.quick{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;
    display:flex;align-items:center;justify-content:center;gap:7px;
    padding:13px;border:none;cursor:pointer;font-family:inherit;font-size:13px;
    font-weight:var(--fw-semi);letter-spacing:.1em;background:rgba(255,255,255,.95);color:var(--ink);
    opacity:0;transform:translateY(12px);
    transition:opacity .4s var(--ease),transform .4s var(--ease),background .3s,color .3s}
.prod:hover .quick{opacity:1;transform:none}
.quick:hover{background:var(--ink);color:#fff}
.prod-cate{font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:.22em;
    color:var(--ink-3);margin-top:20px}
.prod h5{font-size:15px;font-family:var(--f-body);font-weight:var(--fw-norm);
    line-height:1.7;margin:7px 0 10px;min-height:53px}
.price{font-size:19px;font-weight:var(--fw-bold);letter-spacing:.03em;font-family:var(--f-title)}

/* 品牌故事 */
.story{padding:0 0 92px}
.story:first-of-type{padding-top:92px}
.story-in{display:grid;grid-template-columns:1.15fr 1fr;gap:66px;align-items:center}
.story.rev .story-in{direction:rtl}
.story.rev .story-txt{direction:ltr}
.story-fig .fig{box-shadow:0 20px 56px rgba(27,24,20,.09)}
.story:hover .fig img{transform:scale(1.04)}
.story-txt h3{font-size:var(--fs-h3);font-weight:var(--fw-semi);letter-spacing:.14em;margin-bottom:20px}
.story-body{color:var(--ink-2);font-size:14.5px;font-weight:var(--fw-light);line-height:2.1}
.link{display:inline-flex;align-items:center;gap:2px;margin-top:26px;font-size:13px;
    font-weight:var(--fw-semi);font-family:var(--f-title);letter-spacing:.16em;
    border-bottom:1px solid var(--ink);padding-bottom:3px}
.link i{transition:transform .35s var(--ease)}
.link:hover i{transform:translateX(5px)}

/* 標語 */
.slogan{background:var(--bg-2);padding:104px 0;text-align:center}
.slogan>.wrap>i{font-size:34px;color:var(--ink-3);opacity:.5}
.slogan h2{font-size:var(--fs-h2);font-weight:var(--fw-semi);letter-spacing:.14em;line-height:1.75;margin:14px 0 26px}
.slogan p{color:var(--ink-2);font-size:14.5px;font-weight:var(--fw-light);line-height:2.15}

/* footer */
.foot{background:var(--ink);color:#b9b1a6;padding:76px 0 0;font-size:var(--fs-sm);font-weight:var(--fw-light)}
.foot-in{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.1fr;gap:44px;padding-bottom:58px}
.foot h4{font-size:14px;color:#fff;letter-spacing:.18em;margin-bottom:20px;
    font-family:var(--f-title);font-weight:var(--fw-semi)}
.foot-logo{font-family:var(--f-title);font-size:19px;font-weight:var(--fw-bold);color:#fff;
    letter-spacing:.16em;margin-bottom:18px}
.foot-col p{margin-bottom:12px;line-height:1.95}
.foot-col i{opacity:.55;margin-right:7px}
.foot-cates{display:flex;flex-direction:column;gap:9px}
.foot-cates a{transition:color .3s var(--ease)}
.foot-cates a:hover{color:#fff}
.copy{border-top:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#7e766c}
.copy .wrap{padding:22px 28px;display:flex;justify-content:space-between;align-items:center}
.copy-ico i{font-size:15px;margin-left:12px;opacity:.5}

.totop{position:fixed;right:24px;bottom:24px;z-index:70;width:46px;height:46px;
    border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
    font-size:18px;opacity:0;pointer-events:none;
    transition:opacity .4s var(--ease),background .3s,color .3s}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{background:var(--ink);color:#fff}

/* ===== 內頁共用 ===== */
.page-head{background:var(--bg-2);border-bottom:1px solid var(--line);padding:44px 0 46px;text-align:center}
.page-head h1{font-size:var(--fs-h3);font-weight:var(--fw-semi);letter-spacing:.18em}
.crumb{font-size:12px;color:var(--ink-3);letter-spacing:.08em;margin-top:12px}
.crumb a:hover{color:var(--ink)}
.crumb i{font-size:10px;margin:0 6px;opacity:.6}

.toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:28px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar .count{font-size:13px;color:var(--ink-3);letter-spacing:.06em}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line);padding:7px 16px;font-size:13px;color:var(--ink-2);
    transition:all .3s var(--ease)}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}

.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:44px 26px;padding:48px 0 0}

.empty{text-align:center;padding:90px 0;color:var(--ink-3)}
.empty i{font-size:46px;opacity:.4;display:block;margin-bottom:18px}
.empty p{margin-bottom:26px;font-size:14px}

/* 商品明細 */
.pd{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;padding:56px 0 86px}
.pd-main .fig{margin-bottom:14px}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pd-thumbs .fig{cursor:pointer;border:1px solid transparent;transition:border-color .3s var(--ease)}
.pd-thumbs .fig.on{border-color:var(--ink)}
.pd-cate{font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:.22em;color:var(--ink-3)}
.pd h1{font-size:25px;font-family:var(--f-body);font-weight:var(--fw-norm);
    line-height:1.6;margin:10px 0 18px;letter-spacing:.02em}
.pd-price{font-size:30px;font-weight:var(--fw-bold);font-family:var(--f-title);
    padding-bottom:24px;border-bottom:1px solid var(--line)}
.pd-row{display:flex;align-items:center;gap:16px;padding:22px 0;border-bottom:1px solid var(--line)}
.pd-row>span:first-child{width:62px;font-size:13px;color:var(--ink-3);letter-spacing:.1em}
.sizes{display:flex;flex-wrap:wrap;gap:9px}
.size{border:1px solid var(--line);min-width:50px;padding:9px 14px;font-size:13px;
    cursor:pointer;background:none;font-family:inherit;transition:all .3s var(--ease)}
.size:hover{border-color:var(--ink)}
.size.on{background:var(--ink);border-color:var(--ink);color:#fff}
.qty{display:flex;align-items:center;border:1px solid var(--line)}
.qty button{width:40px;height:40px;border:none;background:none;cursor:pointer;
    font-size:15px;color:var(--ink-2);transition:background .3s}
.qty button:hover{background:var(--bg-2)}
.qty span{width:50px;text-align:center;font-size:14px}
.pd-acts{display:flex;gap:12px;margin:28px 0 24px}
.pd-acts .btn{flex:1;justify-content:center}
.pd-note{font-size:13px;color:var(--ink-2);line-height:2;background:var(--bg-2);padding:20px 22px}
.pd-note i{color:var(--accent);margin-right:7px}

/* 購物車 */
.cart-wrap{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;padding:48px 0 86px;align-items:start}
.cart-list{border-top:1px solid var(--line)}
.cart-item{display:grid;grid-template-columns:96px 1fr auto;gap:20px;
    padding:24px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-item h5{font-size:14.5px;font-family:var(--f-body);font-weight:var(--fw-norm);line-height:1.6}
.cart-item .meta{font-size:12px;color:var(--ink-3);margin-top:5px}
.cart-item .rm{border:none;background:none;cursor:pointer;color:var(--ink-3);font-size:15px;transition:color .3s}
.cart-item .rm:hover{color:#a4452f}
.sum{background:var(--bg-2);padding:30px 28px;position:sticky;top:110px}
.sum h4{font-size:15px;letter-spacing:.16em;margin-bottom:22px}
.sum-row{display:flex;justify-content:space-between;font-size:14px;padding:9px 0;color:var(--ink-2)}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;
    border-top:1px solid var(--line);margin-top:14px;padding-top:18px}
.sum-total b{font-size:24px;font-family:var(--f-title);font-weight:var(--fw-bold)}
.sum .btn{width:100%;justify-content:center;margin-top:22px}

/* 會員 */
.auth{max-width:440px;margin:0 auto;padding:60px 0 92px}
.auth-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:34px}
.auth-tab{flex:1;padding:14px 0;text-align:center;font-size:14.5px;cursor:pointer;
    color:var(--ink-3);border-bottom:2px solid transparent;transition:all .3s var(--ease);
    background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.auth-tab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:var(--fw-semi)}
.field{margin-bottom:20px}
.field label{display:block;font-size:12.5px;color:var(--ink-3);letter-spacing:.1em;margin-bottom:8px}
.field input{width:100%;border:1px solid var(--line);background:var(--bg-2);
    padding:0 16px;height:50px;font-size:14.5px;font-family:inherit;color:var(--ink);
    outline:none;transition:border-color .3s var(--ease),background .3s var(--ease)}
.field input:focus{border-color:var(--ink);background:#fff}
.auth .btn{width:100%;justify-content:center;margin-top:8px}
.auth-alt{text-align:center;font-size:13px;color:var(--ink-3);margin-top:20px}
.auth-alt a{border-bottom:1px solid var(--line);color:var(--ink-2)}

/* 響應式 */
@media(max-width:1180px){
    .cate-grid{grid-template-columns:repeat(4,1fr)}
    .grid-4{grid-template-columns:repeat(3,1fr)}
    .nav{gap:16px;font-size:13px}
}
@media(max-width:1024px){
    .head-in{gap:14px}
    .burger{display:inline-flex}
    .logo{flex:1}
    .head-act{border-left:none;padding-left:0;margin-left:0}
    .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
        border-bottom:1px solid var(--line);flex-direction:column;gap:0;
        padding:10px 28px 22px;justify-content:flex-start;
        box-shadow:0 18px 40px rgba(27,24,20,.09)}
    .nav.open{display:flex}
    .nav a{padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
    .nav a::after{display:none}
    /* 手機沒有 hover，子分類直接攤開 */
    .nav-dd{width:100%}
    .nav-dd-t{width:100%;padding:13px 0;border-bottom:1px solid var(--line);justify-content:space-between}
    .nav-dd-t i{transform:none !important}
    .nav-panel{position:static;transform:none;opacity:1;visibility:visible;border:none;
        box-shadow:none;padding:0 0 8px;min-width:0;background:var(--bg-2)}
    .nav-panel a{padding:11px 20px;border-bottom:1px solid rgba(0,0,0,.05);font-size:14px}
    .nav-panel-all{border-bottom:1px solid rgba(0,0,0,.08) !important;margin-bottom:0}
    .cate-grid{grid-template-columns:repeat(3,1fr)}
    .story-in{grid-template-columns:1fr;gap:32px}
    .story.rev .story-in{direction:ltr}
    .tb-mid{display:none}
    .hero-nav{opacity:1;width:44px;height:44px;font-size:18px}
    .hero-nav.prev{left:14px}
    .hero-nav.next{right:14px}
    .icon-btn[data-tip]::after{display:none}
    .pd{grid-template-columns:1fr;gap:36px}
    .cart-wrap{grid-template-columns:1fr;gap:34px}
    .sum{position:static}
}
@media(max-width:700px){
    .wrap{padding:0 18px}
    .topbar{font-size:11px}
    .topbar .wrap{height:34px}
    .head-in{height:66px}
    .head.stuck .head-in{height:60px}
    .logo-zh{font-size:17px}
    .icon-btn{width:42px;height:42px;font-size:20px}
    .grid-3{grid-template-columns:1fr;gap:40px}
    .grid-4{grid-template-columns:repeat(2,1fr);gap:32px 16px}
    .cate-grid{grid-template-columns:repeat(2,1fr);gap:28px 16px}
    .sec{padding:60px 0}
    .story{padding-bottom:60px}
    .story:first-of-type{padding-top:60px}
    .hero{height:78vh;min-height:460px}
    .hero-in{padding:0 20px}
    .hero-sub{font-size:13px;letter-spacing:.14em;margin:16px 0 32px}
    .hero-dots{bottom:68px}
    .dot i{width:22px}
    .dot.on i{width:34px}
    .prod h5{min-height:0}
    .quick{opacity:1;transform:none;position:static;margin-top:14px}
    .searchbar .wrap{padding:18px 18px 22px}
    .search-box{height:50px;padding:0 14px}
    .foot-in{grid-template-columns:1fr;gap:38px}
    .copy .wrap{flex-direction:column;gap:12px;text-align:center}
    .slogan{padding:72px 0}
    .cart-item{grid-template-columns:76px 1fr auto;gap:14px}
    .pd h1{font-size:21px}
    .pd-price{font-size:25px}
}

/* ===== 會員中心 ===== */
.icon-btn.signed{color:var(--accent)}
.flash{display:flex;align-items:center;gap:8px;padding:13px 18px;font-size:13.5px;margin-bottom:22px}
.flash.ok{background:#eef3ec;color:#4a6b43}
.flash.err{background:#f8efec;color:#a4452f}
.mem{display:grid;grid-template-columns:320px 1fr;gap:48px;padding:48px 0 92px;align-items:start}
.mem-card{background:var(--bg-2);padding:30px 28px;position:sticky;top:110px}
.mem-top{display:flex;align-items:center;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.mem-avatar{width:54px;height:54px;border-radius:50%;background:var(--ink);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.mem-top h4{font-size:17px;letter-spacing:.08em}
.mem-top p{font-size:12.5px;color:var(--ink-3);word-break:break-all;margin-top:3px}
.mem-meta{display:flex;flex-direction:column;gap:7px;font-size:12.5px;color:var(--ink-2);padding:18px 0 22px}
.mem-t{font-size:16px;letter-spacing:.14em;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:24px}
.mem-form{max-width:430px}
.mem-form .btn{margin-top:6px}
.field input:disabled{background:var(--bg-3);color:var(--ink-3);cursor:not-allowed}
.mem-table{width:100%;border-collapse:collapse;font-size:13.5px}
.mem-table th{text-align:left;font-weight:var(--fw-semi);color:var(--ink-3);font-size:12px;
    letter-spacing:.1em;padding:10px 12px;border-bottom:1px solid var(--line)}
.mem-table td{padding:14px 12px;border-bottom:1px solid var(--line)}
.mem-none{color:var(--ink-3);font-size:14px}
@media(max-width:1024px){
    .mem{grid-template-columns:1fr;gap:32px}
    .mem-card{position:static}
}

/* ===== 結帳流程 ===== */
.steps{background:var(--bg-2);border-bottom:1px solid var(--line);padding:38px 0 42px}
.steps-t{text-align:center;font-size:19px;letter-spacing:.18em;margin-bottom:28px}
.steps-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;list-style:none}
.step{position:relative;background:#fff;border:1px solid var(--line);padding:24px 10px 20px;
    text-align:center;transition:all .4s var(--ease);display:flex;flex-direction:column;
    align-items:center;justify-content:center}
.step::after{content:"";position:absolute;top:50%;right:-10px;width:10px;height:1px;background:var(--line);z-index:1}
.step:last-child::after{display:none}
.step-n{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
    width:24px;height:24px;line-height:22px;border-radius:50%;background:#fff;
    border:1px solid var(--line);font-size:11px;font-family:var(--f-title);
    font-weight:var(--fw-bold);color:var(--ink-3)}
.step i{font-size:26px;color:var(--ink-3);display:block;margin-bottom:10px;transition:color .4s var(--ease)}
.step-t{font-size:12.5px;color:var(--ink-2);letter-spacing:.04em}
.step.done{border-color:var(--ink-3)}
.step.done i{color:var(--accent)}
.step.done .step-n{background:var(--accent);border-color:var(--accent);color:#fff}
.step.now{border-color:var(--ink);box-shadow:0 10px 30px rgba(27,24,20,.09)}
.step.now i,.step.now .step-t{color:var(--ink)}
.step.now .step-n{background:var(--ink);border-color:var(--ink)}

/* 結帳頁 */
.co{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding:50px 0 92px;align-items:start}
.co-t{font-size:17px;letter-spacing:.14em;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:26px}
.co-form .field label b{color:#a4452f;font-weight:var(--fw-norm)}
.co-form textarea{width:100%;border:1px solid var(--line);background:var(--bg-2);padding:13px 16px;
    font-size:14.5px;font-family:inherit;color:var(--ink);outline:none;resize:vertical;line-height:1.8;
    transition:border-color .3s var(--ease),background .3s var(--ease)}
.co-form textarea:focus{border-color:var(--ink);background:#fff}
.co-ship{font-size:13px;color:var(--ink-2);line-height:1.95;background:var(--bg-2);
    padding:16px 18px;margin-bottom:22px}
.co-sum{background:var(--bg-2);padding:30px 28px;position:sticky;top:110px}
.co-head{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3);
    letter-spacing:.1em;padding-bottom:12px;border-bottom:1px solid var(--line)}
.co-item{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;
    padding:16px 0;border-bottom:1px solid var(--line)}
.co-item-n{font-size:13.5px;line-height:1.6}
.co-item-n b{font-weight:var(--fw-semi)}
.co-item-p{font-size:14px;white-space:nowrap}
.co-items{margin-bottom:18px}
.co-empty{text-align:center;color:var(--ink-3);font-size:14px;padding:30px 0}
.co-empty a{border-bottom:1px solid var(--line);color:var(--ink)}

.co-pay{margin-top:24px;border-top:1px solid var(--line);padding-top:22px}
.pay-opt{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px;
    font-weight:var(--fw-semi);padding-bottom:16px}
.pay-opt input{accent-color:var(--accent);width:16px;height:16px}
.pay-bank{background:#fff;border-left:3px solid var(--accent);padding:20px 22px}
.pay-bank-t{font-size:13px;font-weight:var(--fw-semi);margin-bottom:14px}
.pay-bank-t i{color:var(--accent);margin-right:5px}
.pay-bank dl,.done-bank dl{display:grid;grid-template-columns:56px 1fr;gap:9px 14px;font-size:13.5px}
.pay-bank dt,.done-bank dt{color:var(--ink-3)}
.pay-bank dd,.done-bank dd{font-weight:var(--fw-semi)}
.acct{font-family:var(--f-title);letter-spacing:.06em}
.pay-bank-n,.done-bank-n{font-size:12px;color:var(--ink-2);line-height:1.85;
    margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.pay-bank-n i,.done-bank-n i{color:#4a8a52;margin-right:4px}
.co-privacy{font-size:12px;color:var(--ink-3);line-height:1.9;margin:20px 0 18px}
.btn-order{width:100%;justify-content:center;background:#e8862a;border-color:#e8862a;color:#fff;
    font-size:15px;padding:17px}
.btn-order:hover{background:var(--ink);border-color:var(--ink)}
.btn-order:disabled{opacity:.5;cursor:not-allowed}

/* 訂單完成頁 */
.done{padding:50px 0 92px}
.done-t{font-size:clamp(26px,3.4vw,38px);font-weight:var(--fw-bold);letter-spacing:.06em;
    padding-bottom:26px;border-bottom:1px solid var(--line)}
.done-meta{padding:26px 0 34px;display:flex;flex-direction:column;gap:11px;font-size:14px}
.done-meta li{display:flex;gap:14px}
.done-meta li::before{content:"·";color:var(--ink-3)}
.done-meta span{color:var(--ink-2);min-width:76px}
.done-meta b{font-weight:var(--fw-semi)}
.done-meta .hl{color:var(--accent)}
.done-bank{background:#f1f5ef;border-left:4px solid #7a9b6e;padding:28px 30px;margin-bottom:30px}
.done-bank h4{font-size:19px;letter-spacing:.08em;margin-bottom:16px}
.done-bank h4 i{color:#5c7a52;margin-right:7px}
.done-bank-lead{font-size:13.5px;color:var(--ink-2);margin-bottom:18px}
.done-warn{font-size:13.5px;color:var(--ink-2);line-height:2.05;margin-bottom:40px}
.done-detail{border:1px solid var(--line);padding:36px 34px}
.done-detail h2{font-size:26px;font-weight:var(--fw-bold);letter-spacing:.06em;
    padding-bottom:20px;border-bottom:1px solid var(--line)}
.done-no{font-size:13.5px;margin:18px 0 24px}
.done-no b{font-family:var(--f-title);letter-spacing:.08em}
.done-sum{margin-top:20px}
.done-sum .sum-row{border-bottom:1px solid var(--line);padding:13px 0}
.done-sum .sum-row:last-child{border-bottom:none}
.done-acts{display:flex;gap:12px;margin-top:34px}

@media(max-width:1024px){
    .co{grid-template-columns:1fr;gap:34px}
    .co-sum{position:static}
    .steps-row{grid-template-columns:repeat(3,1fr);gap:14px}
    .step::after{display:none}
}
@media(max-width:700px){
    .steps{padding:28px 0 32px}
    .steps-row{grid-template-columns:repeat(2,1fr)}
    .step{padding:18px 8px 14px}
    .step i{font-size:22px}
    .step-t{font-size:11.5px}
    .done-detail{padding:24px 20px}
    .done-acts{flex-direction:column}
    .done-acts .btn{justify-content:center}
}

/* 分頁 */
.pager{display:flex;justify-content:center;align-items:center;gap:7px;padding:56px 0 0;flex-wrap:wrap}
.pg{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--line);font-size:13.5px;font-family:var(--f-title);color:var(--ink-2);
    transition:all .3s var(--ease)}
.pg:hover{border-color:var(--ink);color:var(--ink)}
.pg.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pg-nav{font-size:15px}
.pg-gap{color:var(--ink-3);padding:0 2px}

/* 取貨方式 */
.ship-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}
.ship-opt{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
    gap:2px 12px;align-items:center;border:1px solid var(--line);padding:18px 20px;cursor:pointer;
    transition:border-color .3s var(--ease),background .3s var(--ease)}
.ship-opt:hover{border-color:var(--ink-3)}
.ship-opt input{grid-row:1/3;accent-color:var(--accent);width:16px;height:16px}
.ship-opt i{display:none}
.ship-opt:has(input:checked){border-color:var(--ink);background:var(--bg-2)}
.ship-t{font-size:14.5px;font-weight:var(--fw-semi)}
.ship-d{grid-column:2;font-size:12px;color:var(--ink-3);line-height:1.6}
@media(max-width:700px){ .ship-opts{grid-template-columns:1fr} }

/* 導覽下拉（男裝／女裝） */
.nav-dd{position:relative}
.nav-dd-t{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:var(--fw-semi)}
.nav-dd-t i{font-size:10px;transition:transform .3s var(--ease)}
.nav-dd:hover .nav-dd-t i{transform:rotate(180deg)}
.nav-panel{position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
    min-width:184px;background:#fff;border:1px solid var(--line);
    box-shadow:0 18px 44px rgba(27,24,20,.11);padding:10px 0;
    opacity:0;visibility:hidden;transition:opacity .28s var(--ease),transform .28s var(--ease);z-index:70}
.nav-dd:hover .nav-panel{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-panel::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:14px}
.nav-panel a{display:block;padding:9px 22px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.nav-panel a::after{display:none}
.nav-panel a:hover{background:var(--bg-2);color:var(--ink)}
.nav-panel-all{font-weight:var(--fw-semi);color:var(--ink) !important;
    border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:12px !important}

/* 規格與缺貨 */
.size .dot{display:inline-block;width:11px;height:11px;border-radius:50%;
    border:1px solid rgba(0,0,0,.18);margin-right:6px;vertical-align:-1px}
.size.out{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.prod.out .fig img{filter:grayscale(.7);opacity:.72}
.prod-out{position:absolute;top:14px;left:14px;z-index:2;background:rgba(27,24,20,.82);color:#fff;
    font-size:11px;font-weight:var(--fw-semi);letter-spacing:.14em;padding:6px 12px}
.cart-item .spec{color:var(--ink-2)}
.co-spec{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* 紅利折抵 */
.pt-box{border:1px solid var(--line);background:#fff;padding:14px 16px;margin:16px 0 4px}
.pt-head{display:flex;justify-content:space-between;align-items:center;font-size:13.5px;
    font-weight:var(--fw-semi);margin-bottom:10px}
.pt-head i{color:var(--accent);margin-right:4px}
.pt-have{font-weight:var(--fw-norm);color:var(--ink-2)}
.pt-have b{color:var(--accent);font-family:var(--f-title)}
.pt-row{display:flex;gap:8px}
.pt-row input{flex:1;border:1px solid var(--line);background:var(--bg-2);padding:0 12px;height:40px;
    font-size:14px;font-family:inherit;color:var(--ink);outline:none;text-align:right}
.pt-row input:focus{border-color:var(--ink);background:#fff}
.pt-max{border:1px solid var(--line);background:none;padding:0 14px;font-size:12.5px;cursor:pointer;
    font-family:inherit;color:var(--ink-2);white-space:nowrap;transition:all .3s var(--ease)}
.pt-max:hover{border-color:var(--ink);color:var(--ink)}
.pt-note{font-size:11.5px;color:var(--ink-3);margin-top:8px;line-height:1.6}
.pt-guest{font-size:12.5px;color:var(--ink-2);background:var(--bg-3);padding:12px 14px;margin:16px 0 4px;line-height:1.7}
.pt-guest i{color:var(--accent);margin-right:4px}
.pt-guest a{border-bottom:1px solid var(--ink-3)}
.pt-earn{font-size:12px;color:var(--accent);margin-top:8px;text-align:right}
.minus{color:#a4452f}
.dimtext{color:var(--ink-3);font-size:11.5px;font-weight:var(--fw-norm)}
.mem-points{display:flex;align-items:center;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}
.mem-points i{color:var(--accent);font-size:19px}
.mem-points b{font-size:22px;font-family:var(--f-title);font-weight:var(--fw-bold)}
.mem-points span{font-size:12.5px;color:var(--ink-3)}

/* 規格庫存提示 */
.pd-stock{min-height:58px}
.stock-ok{font-size:13.5px;color:#4a6b43}
.stock-low{font-size:13.5px;color:#b06a1f}
.stock-out{font-size:13.5px;color:#a4452f}
.size:disabled{cursor:not-allowed}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:none;color:inherit}
.btn-solid:disabled:hover{background:var(--ink);color:#fff}

/* 顏色色塊（照一般电商做法：纯色块，选中加外环，名称另外显示） */
.pd-opt>span{padding-top:10px;align-self:flex-start}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{position:relative;width:34px;height:34px;padding:0;border:none;background:none;cursor:pointer;
    border-radius:50%;transition:box-shadow .25s var(--ease)}
.sw i{display:block;width:100%;height:100%;border-radius:50%;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.09)}
.sw.sw-light i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.sw:hover{box-shadow:0 0 0 1px var(--ink-3)}
.sw.on{box-shadow:0 0 0 1px var(--ink)}
.sw.on::after{content:"";position:absolute;inset:4px;border-radius:50%;
    box-shadow:inset 0 0 0 2px #fff}
.sw.sw-light.on::after{box-shadow:inset 0 0 0 2px rgba(0,0,0,.28)}
.sw.out{cursor:not-allowed;opacity:.5}
.sw.out::before{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1px;
    background:var(--ink-3);transform:rotate(-45deg)}
.opt-now{font-size:13px;color:var(--ink-2);margin-top:9px;letter-spacing:.04em}

/* 商品說明分頁 */
.pd-tabs{border-top:1px solid var(--line);padding:56px 0 20px}
.tab-head{display:flex;justify-content:center;gap:56px;border-bottom:1px solid var(--line);margin-bottom:44px}
.tab-t{border:none;background:none;cursor:pointer;font-family:var(--f-title);font-size:15px;
    font-weight:var(--fw-semi);letter-spacing:.14em;color:var(--ink-3);padding:0 2px 16px;
    margin-bottom:-1px;border-bottom:2px solid transparent;transition:all .3s var(--ease)}
.tab-t:hover{color:var(--ink-2)}
.tab-t.on{color:var(--ink);border-bottom-color:var(--ink)}
.tab-body{display:none;max-width:720px;margin:0 auto}
.tab-body.on{display:block;animation:fadein .4s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tab-body h4{font-size:15px;letter-spacing:.14em;margin:30px 0 12px;padding-bottom:9px;
    border-bottom:1px solid var(--line)}
.tab-body h4:first-child{margin-top:0}
.tab-body p{font-size:14px;color:var(--ink-2);line-height:1.95;margin-bottom:6px}
.size-tb-wrap{overflow-x:auto}
.size-tb{width:100%;border-collapse:collapse;font-size:13.5px;margin-bottom:12px}
.size-tb th,.size-tb td{border:1px solid var(--line);padding:10px 12px;text-align:center}
.size-tb tr:first-child th{background:var(--bg-2);font-weight:var(--fw-semi);font-size:12.5px;
    letter-spacing:.08em;color:var(--ink-2)}
.size-tb tr th:first-child{background:var(--bg-2);font-weight:var(--fw-semi)}
.size-note{font-size:12.5px;color:var(--ink-3);line-height:1.9;margin:0}
.care-list{font-size:13.5px;color:var(--ink-2);line-height:2.1}

/* 新品上市：男女分組 */
.new-group{margin-bottom:58px}
.new-group:last-of-type{margin-bottom:0}
.new-head{display:flex;justify-content:space-between;align-items:baseline;
    padding-bottom:16px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.new-head h4{font-size:19px;letter-spacing:.18em;font-weight:var(--fw-semi)}
.new-head .link{margin-top:0;font-size:12.5px;border-bottom-color:var(--line)}

/* 空状态 / 错误页的线稿插图 */
.empty-illu{display:block;margin:0 auto 14px;width:180px;height:auto;opacity:.82;mix-blend-mode:multiply}