/* ============================================================
   LASTGROVE · 可交互原型样式
   前台 + 后台共用一套 token，后台以 .adm 命名空间隔离
   ============================================================ */
:root{
  --sea:#1B3A34; --sea-d:#132B26; --sea-l:#2A5249;
  --cream:#FAF6EF; --cream-d:#F2EBDF; --sand:#E7DAC8; --sand-d:#D8C7AF;
  --brass:#B08A56; --brass-l:#C9A876;
  --ink:#16130F; --ink-2:#2E2A25; --muted:#6E675E; --muted-2:#948C81;
  --line:#E2DCD2; --line-2:#CFC5B8;
  --clay:#B4472F; --olive:#4A6B4A; --amber:#C08A2E;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif;
  --pad:40px; --max:1440px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--cream); color:var(--ink-2);
  font-family:var(--sans); font-size:14px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.no-scroll{overflow:hidden}
body.drawer-open, body.menu-open{overflow:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; font-size:inherit; cursor:pointer; border:0; background:none; color:inherit}
input,select,textarea{font-family:inherit; font-size:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:400; font-family:var(--serif); letter-spacing:.02em; color:var(--ink)}
p{margin:0 0 12px}
ul{margin:0; padding:0; list-style:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
.eyebrow{font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); font-weight:500}
.rule{height:1px; background:var(--line); border:0; margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; background:var(--sea); color:var(--cream);
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  border-radius:1px; transition:background .22s var(--ease), transform .22s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--sea-d)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent; color:var(--sea); border:1px solid var(--sea)}
.btn--ghost:hover{background:var(--sea); color:var(--cream)}
.btn--light{background:var(--cream); color:var(--sea)}
.btn--light:hover{background:#fff}
.btn--full{width:100%}
.btn[disabled]{opacity:.45; cursor:not-allowed}
.btn--sm{padding:9px 16px; font-size:9.5px; letter-spacing:.14em}
.link-u{border-bottom:1px solid var(--line-2); padding-bottom:1px; transition:border-color .2s}
.link-u:hover{border-color:var(--sea)}

/* ---------- 公告栏 ---------- */
.annbar{
  background:var(--sea); color:var(--cream); overflow:hidden; height:34px;
  display:flex; align-items:center; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
}
.annbar__track{display:flex; gap:56px; animation:marq 34s linear infinite; white-space:nowrap; padding-left:56px}
.annbar__track span{opacity:.9}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 页头 ---------- */
.hdr{position:sticky; top:0; z-index:70; background:var(--cream); border-bottom:1px solid var(--line); transition:box-shadow .25s}
.hdr.stuck{box-shadow:0 1px 14px rgba(22,19,15,.07)}
.hdr__inner{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:66px; gap:16px}
.hdr__nav{display:flex; gap:13px; align-items:center; min-width:0}
.hdr__nav a{
  font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2);
  white-space:nowrap; padding:6px 0; position:relative; transition:color .2s;
}
.hdr__nav a:hover{color:var(--sea)}
.hdr__nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:1px; height:1px;
  background:var(--sea); transition:right .28s var(--ease);
}
.hdr__nav a:hover::after{right:0}
.hdr__nav a.hot{color:var(--clay)}
.brand{display:flex; align-items:center; gap:9px; justify-self:center}
.brand svg{width:26px; height:26px; color:var(--sea); flex:none}
.brand__word{font-family:var(--serif); font-size:21px; letter-spacing:.3em; text-indent:.3em; color:var(--sea); line-height:1}
.hdr__tools{display:flex; justify-content:flex-end; gap:16px; align-items:center}
.icon-btn{position:relative; width:22px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--ink-2)}
.icon-btn svg{width:17px; height:17px}
.icon-btn:hover{color:var(--sea)}
.bag-count{
  position:absolute; top:-4px; right:-7px; min-width:15px; height:15px; padding:0 3px;
  background:var(--sea); color:var(--cream); border-radius:9px;
  font-size:9px; line-height:15px; text-align:center; font-weight:600;
}

/* ---------- Hero ---------- */
.hero{display:grid; grid-template-columns:46fr 54fr; min-height:min(78vh,660px)}
.hero__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:64px var(--pad) 56px; min-width:0; position:relative;
}
.hero__copy .eyebrow{margin-bottom:20px}
.hero h1{
  font-size:clamp(38px,4.6vw,68px); line-height:.98; letter-spacing:-.01em;
  margin-bottom:20px; color:var(--ink);
}
.hero h1 em{font-style:italic; color:var(--sea)}
.hero__desc{max-width:38ch; font-size:14.5px; color:var(--muted); margin-bottom:30px}
.hero__actions{display:flex; gap:12px; flex-wrap:wrap}
.hero__meta{
  display:flex; gap:28px; margin-top:44px; padding-top:20px;
  border-top:1px solid var(--line); flex-wrap:wrap;
}
.hero__meta div{font-size:11px; color:var(--muted); line-height:1.5}
.hero__meta b{display:block; color:var(--ink); font-size:12px; letter-spacing:.1em; font-weight:600}
.hero__media{position:relative; overflow:hidden; background:var(--sand)}
.hero__media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:0; transition:opacity .9s var(--ease); transform:scale(1.02)}
.hero__media img.on{opacity:1; transform:scale(1); transition:opacity .9s var(--ease), transform 6s linear}
.hero__dots{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:7px; z-index:3}
.hero__dots i{width:22px; height:2px; background:rgba(250,246,239,.4); cursor:pointer; transition:background .3s}
.hero__dots i.on{background:var(--cream)}

/* ---------- 数字背书 ---------- */
.proof{display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--line); background:var(--cream-d)}
.proof div{padding:26px 20px; text-align:center; border-right:1px solid var(--line)}
.proof div:last-child{border-right:0}
.proof b{display:block; font-family:var(--serif); font-size:27px; color:var(--sea); line-height:1.1}
.proof span{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* ---------- 区块头 ---------- */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:52px 0 22px}
.sec-head h2{font-size:31px; line-height:1.1}
.sec-head .eyebrow{margin-bottom:7px}
.sec-head__arrow{display:flex; gap:6px; flex:none}
.arrow-btn{width:34px; height:34px; border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; color:var(--ink-2); transition:.2s}
.arrow-btn:hover{background:var(--sea); color:var(--cream); border-color:var(--sea)}

/* ---------- 商品网格与卡片 ---------- */
.grid{display:grid; gap:26px 18px; grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--home{grid-template-columns:repeat(4,1fr)}

.rail{display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 54px)/4); gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}

.card{position:relative; display:flex; flex-direction:column; min-width:0}
.card__media{position:relative; aspect-ratio:4/5; overflow:hidden; background:var(--cream-d); display:block}
.card__media img{width:100%; height:100%; object-fit:cover; transition:opacity .45s var(--ease), transform .8s var(--ease)}
.card__media img.alt{position:absolute; inset:0; opacity:0}
.card:hover .card__media img.alt{opacity:1}
.card:hover .card__media img{transform:scale(1.03)}
.card__badge{
  position:absolute; top:10px; left:10px; z-index:2; padding:4px 8px;
  background:var(--cream); color:var(--ink); font-size:8.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600;
}
.card__badge.sale{background:var(--clay); color:#fff}
.card__badge.new{background:var(--sea); color:var(--cream)}
.card__sw{position:absolute; top:10px; right:10px; z-index:2; display:flex; gap:4px}
.card__sw i{width:11px; height:11px; border-radius:50%; border:1px solid rgba(22,19,15,.22); box-shadow:0 0 0 1.5px var(--cream)}
.card__sw i.gold{background:linear-gradient(140deg,#E3C48B,#B9924F)}
.card__sw i.silver{background:linear-gradient(140deg,#E4E4E2,#A9A9A6)}
.card__sw i.rose{background:linear-gradient(140deg,#EFC9B8,#C9947C)}
.card__body{padding:11px 0 0; display:flex; flex-direction:column; gap:3px}
.card__title{font-size:12.5px; color:var(--ink); line-height:1.4; letter-spacing:.01em}
.card__rate{font-size:10px; color:var(--muted); letter-spacing:.02em; display:flex; align-items:center; gap:5px}
.card__rate .st{color:var(--brass); letter-spacing:.5px; font-size:9.5px}
.card__price{display:flex; align-items:baseline; gap:7px; margin-top:1px}
.card__price b{font-size:12.5px; font-weight:600; color:var(--ink)}
.card__price s{font-size:11px; color:var(--muted-2); font-weight:400}
.card__price em{font-size:9.5px; font-style:normal; color:var(--clay); letter-spacing:.06em; font-weight:600}
.card__add{
  margin-top:9px; width:100%; padding:9px; border:1px solid var(--line-2);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  background:transparent; transition:.22s;
}
.card__add:hover{background:var(--sea); border-color:var(--sea); color:var(--cream)}
.card__add.done{background:var(--olive); border-color:var(--olive); color:#fff}

/* ---------- 题材磁贴 ---------- */
.tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:8px 0 0}
.tile{position:relative; aspect-ratio:3/4; overflow:hidden; display:block}
.tile img{width:100%;height:100%;object-fit:cover; transition:transform .9s var(--ease)}
.tile:hover img{transform:scale(1.045)}
.tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 42%,rgba(19,43,38,.86))}
.tile__cap{position:absolute; left:20px; bottom:18px; z-index:2; color:var(--cream)}
.tile__cap span{display:block; font-size:9px; letter-spacing:.2em; text-transform:uppercase; opacity:.75; margin-bottom:5px}
.tile__cap b{font-family:var(--serif); font-size:23px; font-weight:400; letter-spacing:.02em}

/* ---------- 品牌故事 ---------- */
.story{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:0; background:var(--cream-d); margin:56px 0}
.story img{width:100%; height:100%; object-fit:cover; aspect-ratio:5/4}
.story__copy{padding:56px 60px}
.story__copy h2{font-size:33px; line-height:1.12; margin:14px 0 16px}
.story__copy p{color:var(--muted); font-size:13.5px; max-width:42ch}
.story__sig{margin-top:22px; font-family:var(--serif); font-style:italic; font-size:17px; color:var(--sea)}

/* ---------- 出生石条 ---------- */
.birth{background:var(--sea); color:var(--cream); display:flex; align-items:center; gap:28px; padding:38px 44px; margin:0 0 56px}
.birth>div:first-child{flex:1; min-width:0}
.birth h3{color:var(--cream); font-size:26px}
.birth p{color:rgba(250,246,239,.72); font-size:12.5px; margin:6px 0 0; max-width:46ch}
.birth__stones{display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; flex:none}
.birth__stones a{display:flex; align-items:center; gap:7px; padding:8px 14px; border:1px solid rgba(250,246,239,.26); font-size:10px; letter-spacing:.12em; text-transform:uppercase; transition:.2s}
.birth__stones a:hover{background:var(--cream); color:var(--sea); border-color:var(--cream)}
.birth__stones i{width:9px; height:9px; border-radius:50%; display:block}

/* ---------- 评价 ---------- */
.revs{background:var(--cream-d); padding:52px 0 56px; margin-top:56px}
.revs__hd{text-align:center; margin-bottom:30px}
.revs__hd h2{font-size:30px; margin-bottom:6px}
.revs__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.rev{background:var(--cream); padding:22px 22px 20px; border:1px solid var(--line); display:flex; flex-direction:column}
.rev .st{color:var(--brass); font-size:12px; letter-spacing:2px; margin-bottom:9px}
.rev h4{font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px; line-height:1.4}
.rev p{font-size:12px; color:var(--muted); line-height:1.7; margin-bottom:14px; flex:1}
.rev__foot{display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted-2); letter-spacing:.02em; border-top:1px solid var(--line); padding-top:11px}
.rev__foot b{color:var(--ink-2); font-weight:500}
.verified{display:inline-flex; align-items:center; gap:3px; color:var(--olive); font-size:9px; letter-spacing:.08em; text-transform:uppercase}

/* ---------- 订阅 ---------- */
.news{background:var(--sand); padding:56px 0; text-align:center}
.news h2{font-size:30px; margin-bottom:8px}
.news p{color:#6B5E4B; font-size:13px; margin-bottom:22px}
.news form{display:flex; gap:0; max-width:420px; margin:0 auto}
.news input{flex:1; padding:13px 16px; border:1px solid var(--line-2); background:var(--cream); font-size:12.5px; outline:none}
.news input:focus{border-color:var(--sea)}
.news .btn{border-radius:0}

/* ---------- 页脚 ---------- */
.ftr{background:var(--sea); color:rgba(250,246,239,.72); padding:54px 0 0; font-size:11.5px}
.ftr__top{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:34px; padding-bottom:40px}
.ftr h5{font-family:var(--sans); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); margin:0 0 14px; font-weight:600}
.ftr li{margin-bottom:8px}
.ftr a:hover{color:var(--cream)}
.ftr__brand .brand{justify-self:auto; justify-content:flex-start; width:-moz-fit-content; width:fit-content}
.ftr__brand .brand__word{color:var(--cream); font-size:19px}
.ftr__brand svg{color:var(--cream); width:24px;height:24px}
.ftr__brand p{max-width:26ch; margin-top:14px; line-height:1.8; color:rgba(250,246,239,.6)}
.ftr__bot{border-top:1px solid rgba(250,246,239,.14); padding:16px 0 20px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:10px; letter-spacing:.04em; flex-wrap:wrap}
.ftr__pay{display:flex; gap:6px}
.ftr__pay span{padding:3px 7px; border:1px solid rgba(250,246,239,.22); font-size:8px; letter-spacing:.08em}

/* ---------- 面包屑 ---------- */
.crumbs{padding:16px 0; font-size:10.5px; color:var(--muted); letter-spacing:.05em}
.crumbs a:hover{color:var(--sea)}
.crumbs span{margin:0 7px; opacity:.5}

/* ---------- 集合页 ---------- */
.coll-head{padding:14px 0 22px}
.coll-head h1{font-size:36px; margin-bottom:7px}
.coll-head p{font-size:12.5px; color:var(--muted); max-width:56ch}
.coll-bar{
  display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); flex-wrap:wrap; position:sticky; top:66px; background:var(--cream); z-index:40;
}
.chip{padding:7px 13px; border:1px solid var(--line-2); font-size:10px; letter-spacing:.1em; text-transform:uppercase; background:transparent; transition:.18s; white-space:nowrap}
.chip:hover{border-color:var(--sea)}
.chip.on{background:var(--sea); color:var(--cream); border-color:var(--sea)}
.coll-bar__sep{width:1px; height:16px; background:var(--line)}
.coll-bar__count{margin-left:auto; margin-right:18px; font-size:10.5px; color:var(--muted); letter-spacing:.06em}
.sortsel{padding:7px 26px 7px 12px; border:1px solid var(--line-2); font-size:10px; letter-spacing:.08em; text-transform:uppercase; background:var(--cream) url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0l4.5 6L9 0z' fill='%236E675E'/%3E%3C/svg%3E") no-repeat right 10px center; appearance:none; outline:none}
.empty{padding:70px 0; text-align:center; color:var(--muted)}
.empty h3{font-size:23px; margin-bottom:8px; color:var(--ink)}
.empty p{font-size:12.5px; margin-bottom:18px}
.loadmore{text-align:center; padding:36px 0 50px}

/* ---------- 商品详情 ---------- */
.pdp{display:grid; grid-template-columns:1.18fr 1fr; gap:56px; padding:20px 0 60px; align-items:start}
.gal{display:grid; grid-template-columns:76px 1fr; gap:12px; position:sticky; top:86px}
.gal__thumbs{display:flex; flex-direction:column; gap:9px}
.gal__thumbs img{aspect-ratio:4/5; object-fit:cover; cursor:pointer; border:1px solid transparent; opacity:.72; transition:.2s}
.gal__thumbs img.on{border-color:var(--sea); opacity:1}
.gal__main{aspect-ratio:4/5; overflow:hidden; background:var(--cream-d); position:relative}
.gal__main img{width:100%;height:100%;object-fit:cover}
.pdp__info{padding-top:6px}
.pdp__info h1{font-size:31px; line-height:1.14; margin-bottom:10px}
/* 标题与收藏按钮同一行：收藏不该和加购挤在购买行里抢宽度 */
.pdp__title{display:flex; align-items:flex-start; gap:12px}
.pdp__title h1{flex:1; min-width:0; margin-bottom:10px}
.pdp__title .wishbtn{width:40px; height:40px; border:0; margin-top:2px; color:var(--muted-2)}
.pdp__title .wishbtn:hover{color:var(--clay); background:var(--cream-d)}
.pdp__title .wishbtn.on{color:var(--clay); border:0}
.pdp__title .wishbtn svg{width:19px; height:19px}
.pdp__rate{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); margin-bottom:14px}
.pdp__rate .st{color:var(--brass); letter-spacing:2px; font-size:10px}
.pdp__price{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.pdp__price b{font-size:20px; font-weight:600; color:var(--ink)}
.pdp__price s{font-size:13px; color:var(--muted-2)}
.pdp__price em{font-size:10px; font-style:normal; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--clay); padding:2px 7px}
.pdp__tax{font-size:10.5px; color:var(--muted); margin-bottom:18px}
/* 商品描述（后台 Description 文本框）：textarea 可换行，用 pre-line 保留段落；
   空描述时前端根本不渲染该节点，所以这里不用处理空态 */
.pdp__desc{font-size:12.5px; line-height:1.75; color:var(--ink-2); margin-bottom:20px; white-space:pre-line; overflow-wrap:break-word}
.usp-list{border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:14px 0; margin-bottom:20px}
.usp-list li{display:flex; gap:9px; align-items:flex-start; font-size:11.5px; color:var(--ink-2); padding:4px 0; line-height:1.5}
.usp-list li b{font-weight:600}
.usp-list svg{flex:none; width:13px; height:13px; margin-top:2px; color:var(--sea)}
.opt{margin-bottom:18px}
.opt__hd{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.opt__hd span{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.opt__hd b{font-size:10.5px; font-weight:400; color:var(--ink-2)}
.sizes{display:flex; gap:7px; flex-wrap:wrap}
.size{min-width:52px; padding:9px 12px; border:1px solid var(--line-2); font-size:11px; transition:.18s; text-align:center}
.size:hover{border-color:var(--sea)}
.size.on{background:var(--sea); color:var(--cream); border-color:var(--sea)}
.size[disabled]{opacity:.35; text-decoration:line-through; cursor:not-allowed}
.swatches{display:flex; gap:9px}
.sw-opt{width:30px; height:30px; border-radius:50%; border:1px solid var(--line-2); position:relative; transition:.18s}
.sw-opt.gold{background:linear-gradient(140deg,#E3C48B,#B9924F)}
.sw-opt.silver{background:linear-gradient(140deg,#E4E4E2,#A9A9A6)}
.sw-opt.rose{background:linear-gradient(140deg,#EFC9B8,#C9947C)}
.sw-opt.on::after{content:""; position:absolute; inset:-4px; border:1px solid var(--sea); border-radius:50%}
.qtyrow{display:flex; gap:10px; align-items:stretch}
.stepper{display:flex; border:1px solid var(--line-2); align-items:center}
.stepper button{width:34px; height:44px; font-size:15px; color:var(--ink-2)}
.stepper button:hover{background:var(--cream-d)}
.stepper input{width:34px; height:44px; text-align:center; border:0; background:transparent; outline:none; font-size:12.5px; -moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qtyrow .btn{flex:1}
.stock-note{font-size:10.5px; margin-top:8px; color:var(--olive); letter-spacing:.04em}
.stock-note.low{color:var(--amber)}
.stock-note.out{color:var(--clay)}
.acc{border-top:1px solid var(--line); margin-top:22px}
.acc__item{border-bottom:1px solid var(--line)}
.acc__hd{width:100%; display:flex; justify-content:space-between; align-items:center; padding:14px 0; font-size:11px; letter-spacing:.12em; text-transform:uppercase; text-align:left; color:var(--ink)}
.acc__hd i{font-style:normal; font-size:17px; color:var(--muted); line-height:1; width:16px; text-align:center; display:inline-block}
.acc__body{padding:0 0 16px; font-size:12px; color:var(--muted); line-height:1.8; display:none}
.acc__item.open .acc__body{display:block}
.acc__body dl{display:grid; grid-template-columns:104px 1fr; gap:5px 10px; margin:0}
.acc__body dt{color:var(--muted-2); font-size:11px}
.acc__body dd{margin:0; color:var(--ink-2); font-size:11.5px}
.pdp-sec{padding:44px 0; border-top:1px solid var(--line)}
.pdp-sec h2{font-size:27px; margin-bottom:20px}
.rev-list{display:grid; gap:14px}
.rev-row{border-bottom:1px solid var(--line); padding-bottom:14px; display:grid; grid-template-columns:150px 1fr; gap:20px}
.rev-row__meta{font-size:11px; color:var(--muted)}
.rev-row__meta b{display:block; color:var(--ink); font-size:12px; font-weight:600; margin-bottom:2px}
.rev-row .st{color:var(--brass); letter-spacing:2px; font-size:10px; margin-bottom:5px; display:block}

/* ---------- 购物车抽屉 ---------- */
.overlay{position:fixed; inset:0; background:rgba(22,19,15,.42); opacity:0; pointer-events:none; transition:opacity .32s; z-index:90}
body.drawer-open .overlay{opacity:1; pointer-events:auto}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(420px,92vw); background:var(--cream);
  z-index:95; transform:translateX(100%); transition:transform .38s var(--ease);
  display:flex; flex-direction:column;
}
body.drawer-open .drawer{transform:none}
.drawer__hd{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line)}
.drawer__hd b{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.drawer__body{flex:1; overflow-y:auto; padding:0 22px}
.drawer__ft{border-top:1px solid var(--line); padding:18px 22px 22px; background:var(--cream)}
.progress{margin:16px 0 0}
.progress + .progress{margin-top:16px}
.progress__bar{height:3px; background:var(--line); overflow:hidden; margin-bottom:7px}
.progress__bar i{display:block; height:100%; background:var(--sea); transition:width .5s var(--ease)}
.progress__txt{font-size:10.5px; color:var(--muted); letter-spacing:.03em}
.progress__txt b{color:var(--sea); font-weight:600}
.progress.gift .progress__bar i{background:var(--brass)}
.progress.gift .progress__txt b{color:#8A6A3A}
.cline{display:grid; grid-template-columns:64px 1fr; gap:12px; padding:16px 0; border-bottom:1px solid var(--line)}
.cline__img{aspect-ratio:4/5; overflow:hidden; background:var(--cream-d)}
.cline__img img{width:100%;height:100%;object-fit:cover}
.cline__info{display:flex; flex-direction:column; gap:3px; min-width:0}
.cline__title{font-size:12px; color:var(--ink); line-height:1.35}
.cline__var{font-size:10.5px; color:var(--muted)}
.cline__row{display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:6px}
.cline .stepper{border-color:var(--line)}
.cline .stepper button{width:24px; height:28px; font-size:13px}
.cline .stepper input{width:26px; height:28px; font-size:11px}
.cline__price{font-size:12px; font-weight:600; color:var(--ink)}
.cline__rm{font-size:9.5px; color:var(--muted-2); text-decoration:underline; letter-spacing:.04em}
.cline__rm:hover{color:var(--clay)}
.cline.gift{background:rgba(176,138,86,.07); margin:0 -22px; padding:14px 22px}
.gift-tag{display:inline-block; background:var(--brass); color:#fff; font-size:8px; letter-spacing:.16em; padding:2px 6px; margin-bottom:3px}
.coupon{display:flex; gap:0; margin:14px 0 4px}
.coupon input{flex:1; padding:10px 12px; border:1px solid var(--line-2); background:transparent; font-size:11.5px; outline:none; text-transform:uppercase; letter-spacing:.08em}
.coupon input:focus{border-color:var(--sea)}
.coupon button{padding:0 16px; border:1px solid var(--sea); border-left:0; background:var(--sea); color:var(--cream); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase}
.coupon-msg{font-size:10.5px; margin-top:6px; line-height:1.5}
.coupon-msg.err{color:var(--clay)}
.coupon-msg.ok{color:var(--olive)}
.coupon-applied{display:flex; justify-content:space-between; align-items:center; padding:9px 12px; background:rgba(74,107,74,.09); border:1px solid rgba(74,107,74,.25); font-size:11px; margin:12px 0 4px}
.coupon-applied b{letter-spacing:.1em; color:var(--olive)}
.coupon-applied button{font-size:9.5px; text-decoration:underline; color:var(--muted)}
.sum{display:grid; gap:7px; margin-bottom:14px}
.sum__row{display:flex; justify-content:space-between; font-size:12px; color:var(--ink-2)}
.sum__row.disc{color:var(--olive)}
.sum__row.tot{font-size:15px; font-weight:600; color:var(--ink); border-top:1px solid var(--line); padding-top:11px; margin-top:4px}
.sum__row small{font-size:10px; color:var(--muted); font-weight:400}
.drawer__note{font-size:9.5px; color:var(--muted-2); text-align:center; margin-top:9px; letter-spacing:.03em}

/* ---------- 结算 ---------- */
.co{display:grid; grid-template-columns:1.25fr .85fr; gap:64px; padding:26px 0 70px; align-items:start}
.co__steps{display:flex; gap:0; margin-bottom:26px; border-bottom:1px solid var(--line)}
.co__step{padding:0 0 12px; margin-right:26px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); position:relative}
.co__step.on{color:var(--ink); font-weight:600}
.co__step.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--sea)}
.co__step.is-done{color:var(--olive)}
.fld{margin-bottom:14px}
.fld label{display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.fld input,.fld select,.fld textarea{
  width:100%; padding:12px 13px; border:1px solid var(--line-2); background:var(--cream);
  font-size:13px; outline:none; transition:border-color .18s; border-radius:0;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--sea); box-shadow:0 0 0 2px rgba(27,58,52,.07)}
.fld input.err,.fld select.err{border-color:var(--clay); background:rgba(180,71,47,.03)}
.fld__err{font-size:10px; color:var(--clay); margin-top:4px; display:none}
.fld.bad .fld__err{display:block}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px}
.co__block{margin-bottom:26px}
.co__block h3{font-size:18px; margin-bottom:14px; font-family:var(--sans); font-weight:600; letter-spacing:.01em}
.shipopt{display:flex; gap:11px; align-items:flex-start; padding:13px 15px; border:1px solid var(--line-2); margin-bottom:9px; cursor:pointer; transition:.18s}
.shipopt.on{border-color:var(--sea); background:rgba(27,58,52,.035)}
.shipopt input{margin-top:2px; accent-color:var(--sea)}
.shipopt b{font-size:12px; font-weight:600; color:var(--ink); display:block}
.shipopt span{font-size:10.5px; color:var(--muted)}
.shipopt .pr{margin-left:auto; font-size:12px; font-weight:600; color:var(--ink)}
.cardfield{border:1px solid var(--line-2); padding:14px; background:#fff; margin-bottom:12px}
.cardfield__row{display:flex; gap:8px; align-items:center; margin-bottom:10px}
.cardfield__row input{flex:1 1 auto; width:auto; min-width:0}
.cardfield__row .cardbrand{flex:none; margin-left:0}
.cardfield input{border:1px solid var(--line); padding:9px 10px; font-size:12.5px; outline:none; width:100%; font-family:ui-monospace,Consolas,monospace; letter-spacing:.06em}
.cardfield input:focus{border-color:var(--sea)}
.cardbrand{display:flex; gap:5px; margin-left:auto}
.cardbrand i{width:26px; height:17px; border:1px solid var(--line); display:block; border-radius:2px; background:#fff; position:relative}
.cardbrand i::after{content:""; position:absolute; left:3px; top:3px; right:3px; height:3px; border-radius:1px}
.cardbrand i.v::after{background:#2A5AA8}
.cardbrand i.m::after{background:#C0392B; border-radius:50%; width:9px; height:9px; top:4px; left:8px}
.paysum{background:var(--cream-d); padding:20px 22px; border:1px solid var(--line); position:sticky; top:90px}
.paysum h4{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-family:var(--sans); font-weight:600; margin-bottom:14px; color:var(--muted)}
.paysum__line{display:grid; grid-template-columns:46px 1fr auto; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); align-items:center}
.paysum__line img{aspect-ratio:4/5; object-fit:cover; width:100%}
.paysum__line div{font-size:11.5px; line-height:1.4}
.paysum__line span{font-size:10px; color:var(--muted); display:block}
.mono{font-family:ui-monospace,Consolas,monospace}
.secure{display:flex; align-items:center; gap:6px; justify-content:center; font-size:9.5px; color:var(--muted); margin-top:12px; letter-spacing:.04em}
.secure svg{width:12px; height:12px; flex:none}
.paysum .secure{justify-content:flex-start}

/* ---------- 订单完成 / 查询 ---------- */
.orderdone{max-width:600px; margin:0 auto; text-align:center; padding:64px 0 70px}
.done__ic{width:52px;height:52px;border-radius:50%;background:var(--sea);color:var(--cream);display:flex;align-items:center;justify-content:center;margin:0 auto 22px}
.orderdone h1{font-size:34px; margin-bottom:10px}
.orderdone p{color:var(--muted); font-size:13px}
.done__box{border:1px solid var(--line); padding:22px; margin:26px 0; text-align:left; background:var(--cream-d)}
.done__box dl{display:grid; grid-template-columns:130px 1fr; gap:7px 12px; margin:0; font-size:12px}
.done__box dt{color:var(--muted); font-size:11px}
.done__box dd{margin:0; color:var(--ink)}
.acct{max-width:540px; margin:0 auto; padding:50px 0 70px}
.acct h1{font-size:32px; margin-bottom:8px}
.acct>p{color:var(--muted); font-size:12.5px; margin-bottom:26px}
.acct form{display:grid; gap:4px}

/* ---------- 搜索浮层 ---------- */
.searchlayer{
  position:fixed; inset:0; z-index:88; background:rgba(250,246,239,.97);
  opacity:0; pointer-events:none; transition:opacity .28s;
  padding-top:0;
}
body.search-open .searchlayer{opacity:1; pointer-events:auto}
.searchlayer__in{max-width:760px; margin:0 auto; padding:60px 24px}
.searchlayer__box{display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--ink); padding-bottom:12px}
.searchlayer__box svg{width:20px;height:20px;color:var(--muted)}
.searchlayer__box input{flex:1; border:0; background:transparent; font-size:22px; outline:none; font-family:var(--serif)}
.searchlayer__hint{font-size:11px; color:var(--muted); margin-top:16px; letter-spacing:.06em}
.searchlayer__res{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:26px}
.searchlayer__res .card__add{display:none}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:200;
  background:var(--ink); color:var(--cream); padding:12px 22px; font-size:11.5px;
  letter-spacing:.04em; opacity:0; pointer-events:none; transition:.3s var(--ease); border-radius:2px;
  max-width:88vw;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast.ok{background:var(--olive)}
.toast.err{background:var(--clay)}

/* ---------- 内容页 ---------- */
.page{display:grid; grid-template-columns:220px 1fr; gap:60px; padding:30px 0 80px}
.page__toc{position:sticky; top:92px; align-self:start}
.page__toc a{display:block; padding:7px 0; font-size:11.5px; color:var(--muted); letter-spacing:.04em; border-left:2px solid transparent; padding-left:12px}
.page__toc a:hover{color:var(--sea); border-color:var(--brass)}
.page__body{max-width:720px}
.page__body h1{font-size:38px; margin-bottom:16px}
.page__body h3{font-size:20px; margin:30px 0 10px}
.page__body p{font-size:13.5px; color:var(--ink-2); line-height:1.85}
.page__body ul{padding-left:18px; list-style:disc}
.page__body li{font-size:13.5px; margin-bottom:7px; color:var(--ink-2)}
.page__body table{width:100%; border-collapse:collapse; font-size:12.5px; margin:16px 0}
.page__body th{text-align:left; padding:9px 11px; background:var(--cream-d); font-size:10px; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid var(--line)}
.page__body td{padding:9px 11px; border-bottom:1px solid var(--line)}

/* ---------- 404 ---------- */
.nf{text-align:center; padding:100px 0}
.nf h1{font-size:72px; color:var(--sea); line-height:1}
.nf p{color:var(--muted); margin:14px 0 26px}

/* ============================================================
   后台
   ============================================================ */
.adm{display:grid; grid-template-columns:238px 1fr; min-height:100vh; background:#F6F2EA; font-family:var(--sans)}
.adm__side{background:var(--sea); color:rgba(250,246,239,.7); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto}
.adm__brand{padding:22px 20px 18px; display:flex; align-items:center; gap:9px; border-bottom:1px solid rgba(250,246,239,.1)}
.adm__brand svg{width:24px;height:24px;color:var(--sand)}
.adm__brand span{font-family:var(--serif); font-size:16px; letter-spacing:.28em; text-indent:.28em; color:var(--cream)}
.adm__brand em{font-style:normal; font-size:8px; letter-spacing:.14em; color:rgba(250,246,239,.45); display:block; margin-top:2px; text-indent:0}
.adm__nav{padding:14px 0; flex:1}
.adm__grp{font-size:8.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(250,246,239,.34); padding:14px 20px 6px}
.adm__nav a{display:flex; align-items:center; gap:10px; padding:9px 20px; font-size:12px; color:rgba(250,246,239,.72); border-left:2px solid transparent; transition:.16s}
.adm__nav a:hover{background:rgba(250,246,239,.06); color:var(--cream)}
.adm__nav a.on{background:rgba(250,246,239,.1); color:var(--cream); border-left-color:var(--brass)}
.adm__nav a .badge{background:var(--brass); color:#fff; font-size:8.5px; padding:1px 5px; border-radius:2px; margin-left:auto; letter-spacing:.04em}
.adm__foot{padding:14px 20px; border-top:1px solid rgba(250,246,239,.1); font-size:10px; color:rgba(250,246,239,.42); line-height:1.7}
.adm__main{min-width:0; display:flex; flex-direction:column}
.adm__top{height:58px; background:var(--cream); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 26px; position:sticky; top:0; z-index:30}
.adm__top h1{font-size:17px; font-family:var(--sans); font-weight:600; letter-spacing:.01em}
.adm__top-r{display:flex; align-items:center; gap:14px; font-size:11px; color:var(--muted)}
.adm__top-r .who{display:flex; align-items:center; gap:7px}
.adm__top-r .who i{width:24px;height:24px;border-radius:50%;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:9px;font-style:normal;color:var(--sea);font-weight:600}
.adm__body{padding:24px 26px 46px; min-width:0}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px}
.kpi{background:var(--cream); border:1px solid var(--line); padding:16px 18px}
.kpi span{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:7px}
.kpi b{font-family:var(--serif); font-size:27px; color:var(--ink); line-height:1; font-weight:400; display:block}
.kpi em{font-style:normal; font-size:10px; color:var(--olive); letter-spacing:.04em; display:block; margin-top:6px}
.kpi em.dn{color:var(--clay)}
.panel{background:var(--cream); border:1px solid var(--line); margin-bottom:16px}
.panel__hd{display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap}
.panel__hd h2{font-size:13px; font-family:var(--sans); font-weight:600; letter-spacing:.02em}
.panel__hd .sub{font-size:10.5px; color:var(--muted)}
.panel__bd{padding:16px 18px}
.panel__bd.flush{padding:0}
.two{display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start}
.two-eq{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}

.atable{width:100%; border-collapse:collapse; font-size:12px}
.atable th{text-align:left; padding:9px 14px; font-size:9.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--line); font-weight:600; background:rgba(231,218,200,.18); white-space:nowrap}
.atable td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.atable tr:last-child td{border-bottom:0}
.atable tbody tr:hover{background:rgba(231,218,200,.14)}
.atable .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.atable .mono{font-family:ui-monospace,Consolas,monospace; font-size:10.5px; color:var(--muted)}
.pill{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; font-size:9.5px; letter-spacing:.06em; border-radius:10px; font-weight:500; white-space:nowrap}
.pill.paid{background:rgba(27,58,52,.1); color:var(--sea)}
.pill.fulfilling{background:rgba(192,138,46,.14); color:#8A6318}
.pill.fulfilled{background:rgba(74,107,74,.14); color:var(--olive)}
.pill.completed{background:rgba(74,107,74,.2); color:#33512F}
.pill.refunded{background:rgba(180,71,47,.12); color:var(--clay)}
.pill.cancelled{background:rgba(110,103,94,.14); color:var(--muted)}
.pill.pending{background:rgba(148,140,129,.16); color:var(--muted)}
.pill.active{background:rgba(74,107,74,.14); color:var(--olive)}
.pill.expired{background:rgba(110,103,94,.13); color:var(--muted)}
.pill.scheduled{background:rgba(192,138,46,.14); color:#8A6318}
.pill.on{background:rgba(74,107,74,.14); color:var(--olive)}
.pill.off{background:rgba(110,103,94,.13); color:var(--muted)}
.pill.vip{background:var(--sea); color:var(--cream)}
.pill.repeat{background:rgba(176,138,86,.2); color:#7A5A2E}
.pill.new{background:rgba(110,103,94,.1); color:var(--muted)}

.abtn{display:inline-flex; align-items:center; gap:5px; padding:6px 11px; border:1px solid var(--line-2); font-size:10.5px; letter-spacing:.04em; background:var(--cream); transition:.16s; white-space:nowrap}
.abtn:hover{border-color:var(--sea); color:var(--sea)}
.abtn.solid{background:var(--sea); color:var(--cream); border-color:var(--sea)}
.abtn.solid:hover{background:var(--sea-d)}
.abtn.danger{border-color:rgba(180,71,47,.4); color:var(--clay)}
.abtn.danger:hover{background:var(--clay); color:#fff; border-color:var(--clay)}
.abtn.sm{padding:4px 8px; font-size:9.5px}
.afld{margin-bottom:12px}
.afld label{display:block; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:5px; font-weight:600}
.afld input,.afld select,.afld textarea{width:100%; padding:9px 11px; border:1px solid var(--line-2); background:#fff; font-size:12px; outline:none}
.afld input:focus,.afld select:focus,.afld textarea:focus{border-color:var(--sea)}
.afld small{font-size:10px; color:var(--muted-2); display:block; margin-top:4px}
.afld.inline{display:flex; align-items:center; gap:8px; margin-bottom:9px}
.afld.inline label{margin:0; flex:1}
.afld.inline input{width:90px; text-align:right}
.atoolbar{display:flex; gap:9px; align-items:center; margin-bottom:14px; flex-wrap:wrap}
.atoolbar input,.atoolbar select{padding:8px 11px; border:1px solid var(--line-2); background:var(--cream); font-size:11.5px; outline:none}
.atoolbar input:focus{border-color:var(--sea)}
.atoolbar .sp{flex:1}

.chart{width:100%; height:210px; display:block}
.chart-legend{display:flex; gap:16px; font-size:10px; color:var(--muted); margin-top:8px; letter-spacing:.04em}
.chart-legend i{width:8px;height:8px;display:inline-block;margin-right:5px;border-radius:1px}

.costgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; font-size:11.5px}
.costgrid div{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dotted var(--line)}
.costgrid span{color:var(--muted)}
.costgrid b{font-weight:600; color:var(--ink)}
.costgrid .sum{border-bottom:0; border-top:1px solid var(--line); margin-top:4px; padding-top:9px}
.costgrid .sum span{color:var(--ink); font-weight:600}
.costgrid .sum b{font-size:13px}

.stockbar{width:70px; height:4px; background:var(--line); display:inline-block; vertical-align:middle; margin-right:7px; position:relative; top:-1px}
.stockbar i{display:block;height:100%;background:var(--olive)}
.stockbar i.low{background:var(--amber)}
.stockbar i.out{background:var(--clay)}

.toggle{display:inline-block; vertical-align:middle; position:relative; width:34px; height:19px; background:var(--line-2); border-radius:10px; transition:.2s; flex:none; cursor:pointer}
.toggle::after{content:""; position:absolute; top:2px; left:2px; width:15px; height:15px; background:#fff; border-radius:50%; transition:.2s}
.toggle.on{background:var(--olive)}
.toggle.on::after{left:17px}

.loginwrap{min-height:100vh; display:grid; grid-template-columns:1fr 1fr; background:var(--cream)}
.loginwrap__img{position:relative; overflow:hidden}
.loginwrap__img img{width:100%;height:100%;object-fit:cover}
.loginwrap__img::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(19,43,38,.15),rgba(19,43,38,.62))}
.loginwrap__img .cap{position:absolute; left:40px; bottom:36px; z-index:2; color:var(--cream)}
.loginwrap__img .cap b{font-family:var(--serif); font-size:26px; display:block; font-weight:400}
.loginwrap__img .cap span{font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.72}
.loginwrap__form{display:flex; flex-direction:column; justify-content:center; padding:0 12%}
/* order:0 必须显式写：refine.css 给页头字标设了 order:1（让字标排在导航之前），
   登录页的表单列也是 flex 容器，order 在纵向上同样生效，会把字标甩到最底部、压在演示账号框上。 */
.loginwrap__form .brand{order:0; justify-self:start; margin-bottom:36px; display:flex; gap:9px; align-items:center}
.loginwrap__form h1{font-size:29px; margin-bottom:6px}
.loginwrap__form>p{font-size:12px; color:var(--muted); margin-bottom:26px}
.loginwrap__form form{max-width:330px}
.loginwrap__hint{margin-top:18px; padding:12px 14px; background:rgba(231,218,200,.4); border-left:2px solid var(--brass); font-size:10.5px; color:#6B5B45; line-height:1.7}
.loginwrap__hint code{font-family:ui-monospace,Consolas,monospace; background:#fff; padding:1px 4px}

/* 后台响应式 */
@media(max-width:1180px){
  .kpis{grid-template-columns:1fr 1fr}
  .two,.two-eq{grid-template-columns:1fr}
}
@media(max-width:900px){
  .adm{grid-template-columns:1fr}
  .adm__side{position:fixed; left:0; top:0; bottom:0; width:238px; transform:translateX(-100%); transition:.3s; z-index:80}
  .adm__side.open{transform:none}
  .adm__body{padding:18px 14px 40px}
  .loginwrap{grid-template-columns:1fr}
  .loginwrap__img{display:none}
  .loginwrap__form{padding:0 26px}
}

/* ---------- 前台响应式 ---------- */
@media(max-width:1280px){
  :root{--pad:28px}
  .hdr__nav{gap:9px}
  .hdr__nav a{font-size:9px; letter-spacing:.02em}
  .grid,.grid--home{grid-template-columns:repeat(3,1fr)}
  .rail{grid-auto-columns:calc((100% - 36px)/3)}
}
@media(max-width:980px){
  .hdr__nav{display:none}
  .hdr__inner{grid-template-columns:44px 1fr 44px; height:56px}
  .brand{justify-self:center}
  .brand__word{font-size:18px}
  .mob-menu-btn{display:flex !important}
  .hero{grid-template-columns:1fr; min-height:0}
  .hero__copy{padding:44px var(--pad) 32px; order:2}
  .hero__media{order:1; aspect-ratio:4/3}
  .hero__meta{margin-top:26px}
  .pdp{grid-template-columns:1fr; gap:26px}
  .gal{position:static; grid-template-columns:1fr}
  .gal__thumbs{flex-direction:row; order:2}
  .gal__thumbs img{width:64px}
  .co{grid-template-columns:1fr; gap:30px}
  .paysum{position:static}
  .story{grid-template-columns:1fr}
  .story img{aspect-ratio:16/10}
  .story__copy{padding:34px var(--pad)}
  .revs__grid,.grid--3{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:1fr 1fr}
  .birth{grid-template-columns:1fr; padding:28px}
  .page{grid-template-columns:1fr; gap:20px}
  .page__toc{position:static; display:flex; gap:16px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:10px}
  .page__toc a{border-left:0; padding-left:0}
  .ftr__top{grid-template-columns:1fr 1fr}
  .searchlayer__res{grid-template-columns:1fr 1fr}
  .rev-row{grid-template-columns:1fr; gap:8px}
  .coll-bar{position:static}
}
@media(max-width:620px){
  :root{--pad:18px}
  .grid,.grid--home{grid-template-columns:1fr 1fr; gap:22px 12px}
  .rail{grid-auto-columns:72%}
  .revs__grid,.grid--3,.tiles{grid-template-columns:1fr}
  .hero__actions{flex-direction:column}
  .hero__actions .btn{width:100%}
  .hero h1{font-size:34px}
  .proof div{padding:18px 8px}
  .proof b{font-size:20px}
  .proof span{font-size:8.5px; letter-spacing:.1em}
  .sec-head{padding:36px 0 16px}
  .sec-head h2{font-size:25px}
  .row2,.row3{grid-template-columns:1fr}
  .card__add{padding:8px; font-size:9px}
  .card__title{font-size:11.5px}
  .ftr__top{grid-template-columns:1fr 1fr; gap:22px}
  .ftr__bot{flex-direction:column; align-items:flex-start}
  .news form{flex-direction:column}
  .news .btn{padding:12px}
  .gal__thumbs img{width:52px}
  .pdp__info h1{font-size:24px}
  .orderdone h1{font-size:26px}
  .done__box dl{grid-template-columns:100px 1fr}
  .drawer{width:100%}
  .searchlayer__res{grid-template-columns:1fr 1fr}
  .coll-head h1{font-size:26px}
  .coll-bar{gap:8px}
  .chip{padding:6px 10px; font-size:9px}
  .kpis{grid-template-columns:1fr 1fr; gap:9px}
  .kpi b{font-size:21px}
  .atable{font-size:11px}
  .atable th,.atable td{padding:8px 9px}
}
.mob-menu-btn{display:none; width:34px;height:34px;align-items:center;justify-content:center;color:var(--ink-2)}
.mob-drawer{position:fixed; inset:0 auto 0 0; width:82vw; max-width:330px; background:var(--cream); z-index:96; transform:translateX(-100%); transition:transform .34s var(--ease); overflow-y:auto; padding:20px}
body.menu-open .mob-drawer{transform:none}
.mob-drawer a{display:block; padding:11px 0; border-bottom:1px solid var(--line); font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.mob-drawer__close{display:flex; justify-content:flex-end; margin-bottom:10px}
body.menu-open .overlay{opacity:1; pointer-events:auto}

/* 搜索页输入框 */
.sform__row{display:flex; gap:10px}
.sform__row input{
  flex:1; min-width:0; height:48px; padding:0 14px; border:1px solid var(--line);
  background:#fff; font:inherit; font-size:13px; color:var(--ink); border-radius:0;
  -webkit-appearance:none; appearance:none;
}
.sform__row input:focus{outline:none; border-color:var(--sea)}
.sform__row .btn{height:48px; padding:0 26px; white-space:nowrap; flex:none}
.sform__hint{margin-top:12px; font-size:11px; color:var(--muted)}
.sform__hint a{margin-right:1px}
@media(max-width:620px){
  .sform__row{flex-direction:column}
  .sform__row .btn{width:100%}
}

/* ============================================================
   账户体系 · 登录注册 / 用户中心
   ============================================================ */

/* 页头登录态 */
.hdr__signin{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 12px; border:1px solid var(--line-2); color:var(--ink);
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.hdr__signin:hover{border-color:var(--sea); background:var(--sea); color:var(--cream)}
.hdr__acct{display:none}
.hdr__me{font-size:11.5px; color:var(--muted); padding:6px 4px; white-space:nowrap}
.hdr__me b{color:var(--ink); font-weight:600}
.hdr__me:hover b{color:var(--sea)}

/* 登录 / 注册卡片 */
.authcard{
  max-width:430px; margin:0 auto; padding:64px 0 88px;
  text-align:center;
}
.authcard__mk{width:38px; height:38px; margin:0 auto 18px; color:var(--brass)}
.authcard__mk svg{width:100%; height:100%}
.authcard h1{font-size:34px; line-height:1.15; margin-bottom:8px}
.authcard__sub{font-size:12.5px; color:var(--muted); margin-bottom:26px}
.authcard form{text-align:left}
.authcard__row{display:flex; justify-content:space-between; align-items:center; margin:2px 0 18px; font-size:11.5px}
.authcard__foot{
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--muted); line-height:1.9;
}
.formerr{
  text-align:left; margin-bottom:16px; padding:11px 14px; font-size:12px;
  background:#FBF0EC; border-left:3px solid var(--clay); color:var(--clay);
}
.gate{display:flex; flex-direction:column; gap:10px}
.demo-tip{
  margin-top:18px; padding:12px 14px; background:var(--cream-d);
  border:1px dashed var(--line-2); text-align:left; font-size:11px; color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
}
.demo-tip b{color:var(--ink); font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:9.5px}
.demo-tip span{font-family:var(--sans); color:var(--ink-2)}
.demo-tip button{
  margin-left:auto; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  border-bottom:1px solid var(--brass); color:var(--brass); padding-bottom:1px;
}

.chk{display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color:var(--muted); line-height:1.5}
.chk input{width:auto; margin-top:2px; accent-color:var(--sea); flex:none}

/* 用户中心外壳 */
.acct2{
  display:grid; grid-template-columns:216px 1fr; gap:56px;
  padding:44px 0 92px; align-items:start;
}
.acct2__side{position:sticky; top:96px}
.acct2__hi{
  padding-bottom:16px; margin-bottom:14px; border-bottom:1px solid var(--line);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2);
  display:flex; flex-direction:column; gap:5px;
}
.acct2__hi b{font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--ink-2); font-weight:500; word-break:break-all}
.acct2__nav{display:flex; flex-direction:column; gap:1px}
.acct2__nav a{
  font-size:12.5px; padding:9px 12px; color:var(--muted);
  border-left:2px solid transparent; transition:.18s var(--ease);
}
.acct2__nav a:hover{color:var(--ink); background:var(--cream-d)}
.acct2__nav a.on{color:var(--sea); border-left-color:var(--sea); background:var(--cream-d); font-weight:500}
.acct2__out{
  margin-top:20px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); padding:9px 12px; text-align:left; width:100%;
}
.acct2__out:hover{color:var(--clay)}
.acct2__main{min-width:0}
.acct2__main h1{font-size:40px; line-height:1.1; margin-bottom:6px}
.acct2__lead{font-size:12px; color:var(--muted); margin-bottom:28px}

/* 概览统计 */
.stat3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:28px}
.stat3__c{
  background:var(--cream); padding:22px 20px; display:flex; flex-direction:column; gap:4px;
  transition:background .2s var(--ease);
}
.stat3__c:hover{background:var(--cream-d)}
.stat3__c span{font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.stat3__c b{font-family:var(--serif); font-size:34px; line-height:1.1; font-weight:400; color:var(--ink)}
.stat3__c i{font-style:normal; font-size:10.5px; color:var(--brass)}

.panel-lite{
  border:1px solid var(--line); padding:22px 24px; margin-bottom:18px; background:#fff;
}
.panel-lite h3{font-size:16px; margin-bottom:12px}
.panel-lite__hd{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; gap:12px}
.panel-lite__hd h3{margin-bottom:0}
.panel-lite__hd .sub{font-size:10.5px; color:var(--muted)}
.panel-lite__meta{font-size:11.5px; color:var(--muted); line-height:1.7; margin:0}
.danger-zone{border-color:#E8D2CC; background:#FDF8F6}
.danger-zone .btn--ghost{border-color:#D8B5AC; color:var(--clay)}

/* 订单进度时间轴 */
.tl{display:flex; align-items:flex-start; margin:14px 0 4px}
.tl__step{flex:1; text-align:center; position:relative}
.tl__step i{
  display:block; height:2px; background:var(--line); margin-bottom:9px;
}
.tl__step.on i{background:var(--sea)}
.tl__step span{
  font-size:9px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2);
}
.tl__step.on span{color:var(--sea); font-weight:500}

/* 订单列表 */
.olist{display:flex; flex-direction:column; gap:12px}
.ol{
  display:block; border:1px solid var(--line); background:#fff; padding:16px 18px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.ol:hover{border-color:var(--line-2); box-shadow:0 2px 14px rgba(22,19,15,.05)}
.ol__top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.ol__top b{font-size:11.5px; letter-spacing:.06em}
.ol__date{margin-left:auto; font-size:11px; color:var(--muted)}
.ol__body{display:flex; align-items:center; gap:14px}
.ol__thumbs{display:flex; gap:5px; flex:none}
.ol__thumbs img{width:48px; height:48px; object-fit:cover; background:var(--cream-d)}
.ol__meta{flex:1; font-size:11.5px; color:var(--ink-2); line-height:1.55; min-width:0}
.ol__meta span{color:var(--muted)}
.ol__tot{font-size:12.5px; font-weight:600; flex:none}

/* 订单详情 */
.odtop{display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:6px}
.odtop__d{font-size:11.5px; color:var(--muted); margin-left:10px}
.shipbar{
  display:flex; align-items:center; gap:12px; margin:18px 0;
  padding:14px 16px; background:var(--cream-d); border-left:2px solid var(--brass);
}
.shipbar svg{width:18px; height:18px; color:var(--brass); flex:none}
.shipbar div{flex:1; display:flex; flex-direction:column; gap:2px}
.shipbar b{font-size:11.5px; font-weight:600}
.shipbar span{font-size:10.5px; color:var(--muted)}
.odgrid{display:grid; grid-template-columns:1.35fr 1fr; gap:16px; align-items:start}
.oditem{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.oditem:first-of-type{border-top:0}
.oditem img{width:56px; height:56px; object-fit:cover; background:var(--cream-d); flex:none}
.oditem div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.oditem a{font-size:12px; color:var(--ink)}
.oditem a:hover{text-decoration:underline}
.oditem span{font-size:10.5px; color:var(--muted)}
.odaddr{font-size:11.5px; color:var(--muted); line-height:1.85}
.odfoot{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap}

/* 地址簿 */
.addrgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:18px}
.addrc{border:1px solid var(--line); background:#fff; padding:18px 20px}
.addrc.def{border-color:var(--sea)}
.addrc__hd{display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; gap:8px}
.addrc__hd b{font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:600}
.addrc p{font-size:11.5px; color:var(--muted); line-height:1.8; margin:0 0 14px}
.addrc__ft{display:flex; gap:14px; font-size:10.5px; border-top:1px solid var(--line); padding-top:11px}
.addrc__ft .link-u{color:var(--muted)}
.addrc__ft .link-u:hover{color:var(--ink)}
.addrc__ft .link-u.danger:hover{color:var(--clay)}

/* 心愿单 */
.wishwrap{position:relative}
.wishrm{
  position:absolute; top:10px; right:10px; z-index:2;
  width:30px; height:30px; display:grid; place-items:center;
  background:rgba(250,246,239,.92); border-radius:50%; color:var(--clay);
  transition:transform .18s var(--ease);
}
.wishrm:hover{transform:scale(1.12)}
.wishrm svg{width:15px; height:15px}
.wishbtn{
  width:46px; height:46px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line-2); color:var(--muted);
  transition:.2s var(--ease);
}
.wishbtn:hover{border-color:var(--clay); color:var(--clay)}
.wishbtn.on{color:var(--clay); border-color:var(--clay)}
.wishbtn svg{width:18px; height:18px}

/* ============================================================
   结算 · 支付
   ============================================================ */
.paytabs{display:flex; gap:2px; margin-bottom:14px; background:var(--cream-d); padding:3px}
.paytab{
  flex:1; padding:10px 8px; font-size:11px; letter-spacing:.05em;
  color:var(--muted); background:transparent; transition:.18s var(--ease);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.paytab:hover{color:var(--ink)}
.paytab.on{background:#fff; color:var(--sea); font-weight:600; box-shadow:0 1px 3px rgba(22,19,15,.07)}

.testrow{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; align-items:center}
.testrow span{font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-right:2px}
.testrow button{
  font-size:9.5px; font-family:var(--sans); letter-spacing:.02em;
  padding:4px 8px; border:1px solid var(--line); color:var(--muted);
  background:#fff; transition:.16s var(--ease);
}
.testrow button:hover{border-color:var(--brass); color:var(--brass)}
.cardnote{
  display:flex; align-items:center; gap:6px; margin-top:10px;
  font-size:9.5px; color:var(--muted-2);
}
.cardnote svg{width:11px; height:11px; flex:none}

.walletbox{
  border:1px solid var(--line); background:#fff; padding:22px; text-align:center;
  margin-bottom:12px;
}
.walletbox__lg{
  font-size:17px; font-weight:600; letter-spacing:.01em; color:var(--ink);
  margin-bottom:10px;
}
.walletbox p{font-size:11px; color:var(--muted); line-height:1.7; margin:0}

.payerr{
  display:flex; align-items:flex-start; gap:8px; margin:14px 0 18px;
  padding:11px 13px; background:#FBF0EC; border-left:3px solid var(--clay);
  font-size:11.5px; color:var(--clay); line-height:1.6;
}
.payerr svg{width:13px; height:13px; flex:none; margin-top:2px}

.locked{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:11px 14px; background:var(--cream-d); border:1px solid var(--line);
  font-size:11.5px; color:var(--muted);
}
.locked span{display:flex; align-items:center; gap:7px}
.locked svg{width:14px; height:14px; color:var(--sea); flex:none}
.locked b{color:var(--ink); font-weight:600}

/* 响应式 */
@media(max-width:980px){
  .acct2{grid-template-columns:1fr; gap:24px; padding:32px 0 64px}
  .acct2__side{position:static; display:flex; flex-wrap:wrap; align-items:center; gap:8px}
  .acct2__hi{display:none}
  .acct2__nav{flex-direction:row; flex-wrap:wrap; gap:0}
  .acct2__nav a{border-left:0; border-bottom:2px solid transparent; padding:7px 10px}
  .acct2__nav a.on{border-left:0; border-bottom-color:var(--sea)}
  .acct2__out{margin-top:0; width:auto; padding:7px 10px}
  .acct2__main h1{font-size:32px}
  .odgrid{grid-template-columns:1fr}
  .addrgrid{grid-template-columns:1fr}
  /* 窄屏放不下文字，改用图标，否则手机上根本没有账户入口 */
  .hdr__me,.hdr__signin{display:none}
  .hdr__acct{display:grid}
  .acct2__out{margin-left:auto}
}
@media(max-width:620px){
  .stat3{grid-template-columns:1fr}
  .authcard{padding:40px 0 60px}
  .authcard h1{font-size:28px}
  .ol__thumbs img{width:40px; height:40px}
  .ol__tot{font-size:11.5px}
  .paytab{font-size:10px; padding:9px 4px}
  .odfoot{flex-direction:column}
  .odfoot .btn{width:100%}
}

/* 抽屉里的登录状态提示 */
.drawer__who{
  display:flex; align-items:flex-start; gap:7px; margin-top:14px;
  font-size:10.5px; color:var(--muted); line-height:1.5;
}
.drawer__who svg{width:13px; height:13px; flex:none; margin-top:2px; color:var(--brass)}
.drawer__who b{color:var(--ink); font-weight:600}
.drawer__who a{text-decoration:underline; color:var(--sea)}