:root{
  --bg:#faf8f5; --card:#ffffff; --ink:#17191c; --ink2:#4a4f55; --muted:#8a847b;
  --brass:#a17a4f; --brass-soft:#c9ab86; --line:#e8e2d9; --line2:#f1ece4;
  --radius:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
body{padding-bottom:76px}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit;text-decoration:none}
.serif{font-family:Georgia,"Songti SC","Noto Serif SC","Times New Roman",serif}

/* top */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 10px;max-width:560px;margin:0 auto}
.brand{display:flex;align-items:center;gap:11px}
.mark{width:40px;height:40px;border:1px solid var(--brass);color:var(--brass);display:grid;place-items:center;font-family:Georgia,"Songti SC",serif;font-size:19px}
.shop-name{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:18px;letter-spacing:3px}
.shop-sub{font-size:8.5px;letter-spacing:2.6px;color:var(--muted);margin-top:3px}
.cart-btn{position:relative;font-size:13px;letter-spacing:2px;color:var(--ink2);padding:8px 10px;border:1px solid var(--line);border-radius:2px}
.badge{position:absolute;top:-7px;right:-7px;min-width:17px;height:17px;border-radius:9px;background:var(--brass);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}

/* search */
.searchwrap{position:sticky;top:0;z-index:20;background:rgba(250,248,245,.94);backdrop-filter:blur(10px);padding:6px 18px 12px;max-width:560px;margin:0 auto}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 14px;height:42px}
.search input{flex:1;border:0;outline:none;font-size:13.5px;background:transparent;color:var(--ink);letter-spacing:.3px}
.search input::placeholder{color:#b3ada3}
.sicon{color:var(--brass);font-size:16px;transform:translateY(-1px)}
.sclear{display:none;color:var(--muted);font-size:12px;padding:4px}
.search.active .sclear{display:block}

main{padding:6px 18px 12px;max-width:560px;margin:0 auto}

/* hero ad */
.hero{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(135deg,#e9e0d3 0%,#d8cbb8 55%,#c9b79e 100%);padding:34px 24px 30px;margin-bottom:26px}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;border:1px solid rgba(255,255,255,.5);border-radius:50%}
.hero .eyebrow{font-size:9.5px;letter-spacing:3px;color:#5f5344;margin-bottom:12px}
.hero h1{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:34px;font-weight:400;letter-spacing:2px;margin:0 0 8px;color:#2b241d}
.hero p{font-size:12.5px;color:#5d5244;line-height:1.8;margin:0 0 18px;letter-spacing:.5px}
.hero .cta{display:inline-block;font-size:11px;letter-spacing:2px;border:1px solid #4b3f31;color:#3b3126;padding:9px 16px}

/* section head */
.sechead{display:flex;align-items:baseline;justify-content:space-between;margin:6px 0 16px}
.sechead .lbl{font-size:9.5px;letter-spacing:3px;color:var(--brass)}
.sechead h2{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:20px;font-weight:400;letter-spacing:2px;margin:3px 0 0}
.sechead .more{font-size:11px;color:var(--muted);letter-spacing:1px}

/* grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.pcard{display:flex;flex-direction:column}
.pcard .thumb{position:relative;aspect-ratio:4/5;background:linear-gradient(160deg,#f3efe8,#e9e3d9);border-radius:3px;display:grid;place-items:center;overflow:hidden}
.pcard .thumb svg{width:46%;height:46%;stroke:#6d6154;fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.pcard .tag{position:absolute;top:8px;left:8px;font-size:8.5px;letter-spacing:1.5px;color:#fff;background:rgba(23,25,28,.62);padding:3px 6px}
.pcard .info{padding:10px 2px 0}
.pcard .name{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:14.5px;letter-spacing:.6px;line-height:1.45}
.pcard .cat{font-size:10px;color:var(--muted);letter-spacing:1.5px;margin-top:4px}
.pcard .price{font-size:14px;color:var(--brass);letter-spacing:.8px;margin-top:6px}
.pcard .add{margin-top:8px;font-size:10.5px;letter-spacing:1.6px;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:4px;align-self:flex-start}

/* ad strips */
.ad{border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;margin:22px 0;background:#fff;display:flex;justify-content:space-between;align-items:center;gap:14px}
.ad.dark{background:#1d1f22;border-color:#1d1f22;color:#f3efe8}
.ad .lbl{font-size:9px;letter-spacing:3px;color:var(--brass);margin-bottom:7px}
.ad h3{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:19px;font-weight:400;letter-spacing:1.6px;margin:0 0 6px}
.ad p{font-size:11.5px;color:var(--muted);line-height:1.7;margin:0;letter-spacing:.4px}
.ad.dark p{color:#a9a29a}
.ad .adcta{flex:0 0 auto;font-size:10.5px;letter-spacing:1.6px;border:1px solid currentColor;padding:8px 12px;white-space:nowrap}

.empty{text-align:center;color:var(--muted);font-size:12.5px;padding:50px 20px;line-height:1.9;letter-spacing:.5px}

/* detail */
.gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -18px 10px;padding:0 18px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gallery::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:1/1;position:relative;display:grid;place-items:center;overflow:hidden;border-radius:4px}
.slide .stage{width:100%;height:100%;display:grid;place-items:center}
.slide svg{stroke:#5b5044;fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.slide .vnum{position:absolute;top:10px;right:12px;font-size:9.5px;letter-spacing:1.5px;color:#6b5f51}
.slide .vlabel{position:absolute;bottom:10px;left:12px;font-size:9px;letter-spacing:2px;color:#6b5f51}
.v1{background:linear-gradient(160deg,#f5f1ea,#e8e1d5)}
.v1 svg{width:52%;height:52%}
.v2{background:linear-gradient(160deg,#efe8dc,#dcd0bd)}
.v2 svg{width:82%;height:82%}
.v3{background:linear-gradient(160deg,#ece9e2,#d9d3c7)}
.v3 svg{width:42%;height:42%}
.v4{background:linear-gradient(160deg,#efece5,#ded7cb)}
.v4 svg{width:62%;height:62%;transform:scaleX(-1)}
.v5{background:linear-gradient(160deg,#f4f0e9,#e5dccd)}
.v5 svg{width:38%;height:38%}
.thumbs{display:flex;gap:8px;margin-bottom:18px;overflow-x:auto;scrollbar-width:none}
.thumbs::-webkit-scrollbar{display:none}
.thumb-i{flex:0 0 56px;height:56px;border:1px solid var(--line);border-radius:3px;display:grid;place-items:center;background:#f6f2eb;padding:0}
.thumb-i.active{border-color:var(--brass);outline:1px solid var(--brass)}
.thumb-i svg{width:56%;height:56%;stroke:#6b5f51;fill:none;stroke-width:1.2}
.detail-thumb{aspect-ratio:1/1;background:linear-gradient(160deg,#f3efe8,#e6dfd4);border-radius:4px;display:grid;place-items:center;margin-bottom:20px}
.detail-thumb svg{width:44%;height:44%;stroke:#5f5448;fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.detail-name{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:23px;font-weight:400;letter-spacing:1.6px;margin:0 0 6px;line-height:1.5}
.detail-sub{font-size:11px;letter-spacing:2px;color:var(--muted)}
.detail-price{font-size:24px;color:var(--brass);letter-spacing:1px;margin:14px 0}
.detail-desc{font-size:13px;color:var(--ink2);line-height:1.9;letter-spacing:.4px}

/* generic */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--muted);font-size:11.5px;letter-spacing:.4px}
.btn{display:block;width:100%;text-align:center;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:2px;padding:15px;border-radius:2px}
.btn.brand{background:var(--brass)}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.sm{display:inline-block;width:auto;padding:8px 14px;font-size:10.5px;letter-spacing:1.4px;border-radius:2px}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff}
.qty button{width:34px;height:34px;font-size:15px;color:var(--ink2)}
.qty span{min-width:36px;text-align:center;font-size:12.5px}

.cart-item{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line2);align-items:center}
.cart-item:last-child{border-bottom:0}
.cart-thumb{width:62px;height:76px;border-radius:3px;display:grid;place-items:center;background:linear-gradient(160deg,#f3efe8,#e9e3d9);flex:0 0 62px}
.cart-thumb svg{width:60%;height:60%;stroke:#6d6154;fill:none;stroke-width:1.2;stroke-linecap:round}
.cart-info{flex:1;min-width:0}
.cart-name{font-family:Georgia,"Songti SC","Noto Serif SC",serif;font-size:14px;letter-spacing:.6px;line-height:1.5}
.cart-price{color:var(--brass);font-size:13px;margin-top:4px}
.total-row{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0 6px;font-size:12px;color:var(--ink2);letter-spacing:.6px}
.total-row b{color:var(--brass);font-size:21px;letter-spacing:1px}

.field{margin-bottom:14px}
.field label{display:block;font-size:10px;letter-spacing:2px;color:var(--muted);margin-bottom:6px}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:2px;padding:12px;font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);outline:none}
.field input:focus,.field textarea:focus{border-color:var(--brass)}
.field textarea{min-height:74px;resize:vertical}

.order-head{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);letter-spacing:.5px;margin-bottom:10px}
.order-item{display:flex;justify-content:space-between;font-size:12.5px;padding:5px 0}
.order-total{display:flex;justify-content:space-between;font-size:12.5px;margin-top:10px;border-top:1px solid var(--line2);padding-top:10px}
.status{font-size:9.5px;letter-spacing:1.4px;color:var(--brass);border:1px solid var(--brass-soft);padding:3px 8px}

.admin-head{display:flex;justify-content:space-between;align-items:center;margin:4px 0 14px}
.admin-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line2)}
.admin-item:last-child{border-bottom:0}
.admin-thumb{width:46px;height:56px;border-radius:3px;display:grid;place-items:center;background:linear-gradient(160deg,#f3efe8,#e9e3d9);flex:0 0 46px}
.admin-thumb svg{width:60%;height:60%;stroke:#6d6154;fill:none;stroke-width:1.2}

.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:rgba(250,248,245,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
.tabbar a{flex:1;text-align:center;font-size:10px;letter-spacing:2px;color:var(--muted);padding:10px 0}
.tabbar a.active{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(16px);background:rgba(23,25,28,.92);color:#fff;font-size:12px;letter-spacing:.8px;padding:10px 16px;opacity:0;transition:.25s;z-index:50;pointer-events:none;max-width:80vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:340px){ .grid{grid-template-columns:1fr} }

/* ---------- 桌面端 ---------- */
.topnav{display:none}

@media (min-width:900px){
  body{padding-bottom:0}
  .topbar{max-width:1200px;padding:26px 32px 14px}
  .brand{gap:14px}
  .mark{width:46px;height:46px;font-size:22px}
  .shop-name{font-size:21px;letter-spacing:4px}
  .shop-sub{font-size:9px;letter-spacing:3px}
  .topnav{display:flex;gap:32px;margin-left:auto;margin-right:30px}
  .topnav a{font-size:11px;letter-spacing:2.4px;color:var(--ink2)}
  .topnav a.active{color:var(--brass)}
  .searchwrap{position:static;background:transparent;max-width:1200px;padding:4px 32px 18px}
  .search{max-width:680px;height:46px}
  main{max-width:1200px;padding:0 32px 56px}
  .hero{padding:58px 52px;margin-bottom:44px;min-height:400px;display:flex;flex-direction:column;justify-content:center}
  .hero::after{width:320px;height:320px;right:-80px;top:-80px}
  .hero h1{font-size:58px;letter-spacing:5px}
  .hero p{font-size:14px;letter-spacing:1px}
  .hero .cta{font-size:11.5px;padding:11px 20px}
  .sechead{margin:10px 0 22px}
  .sechead h2{font-size:27px}
  .sechead .lbl{font-size:10px}
  .grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .pcard .name{font-size:15.5px}
  .pcard .price{font-size:15px}
  .pcard .add{font-size:11px}
  .ad{padding:34px 40px}
  .ad h3{font-size:27px}
  .ad p{font-size:12.5px}
  .tabbar{display:none}
  .detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .gallery{margin:0;padding:0;gap:0}
  .slide{border-radius:4px}
  .thumbs{margin-top:14px;margin-bottom:0}
  .detail-name{font-size:32px;margin-top:2px}
  .detail-sub{font-size:11.5px}
  .detail-price{font-size:30px}
  .detail-desc{font-size:14.5px}
  body[data-view="cart"] main,body[data-view="checkout"] main,body[data-view="orders"] main{max-width:760px}
  body[data-view="admin"] main{max-width:960px}
  .btn{font-size:13px}
  .empty{padding:80px 20px;font-size:13.5px}
}