* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; background:#e9e2d8; font-family:'Songti SC','STSong','Noto Serif SC','PingFang SC','Microsoft YaHei',serif; color:#352f2a; font-size:14px; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
img { display:block; width:100%; height:100%; max-width:100%; object-fit:cover; }
.wrap { max-width:480px; margin:0 auto; min-height:100vh; padding-bottom:60px; background:#f8f3ea; position:relative; }
.topbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:12px; padding:12px 14px; background:rgba(248,243,234,.96); border-bottom:1px solid #e8ded0; backdrop-filter:blur(12px); }
.topbar.home-head { padding-top:15px; padding-bottom:11px; }
.home-head .brand { flex:1; }
.home-head .brand small { display:block; color:#a33b32; font-family:Georgia,serif; font-size:8px; letter-spacing:2.2px; margin-bottom:2px; }
.home-head .brand h1 { text-align:left; font-size:21px; letter-spacing:4px; font-weight:600; }
.topbar .back { font-size:20px; padding:4px 8px; }
.topbar h1 { flex:1; font-size:16px; margin:0; font-weight:600; text-align:center; }
.topbar .right { font-size:13px; color:#a33b32; }
.search-bar { display:flex; gap:10px; padding:10px 14px; background:#f8f3ea; border-bottom:1px solid #e8ded0; }
.search-bar input { flex:1; border:1px solid #e1d5c6; outline:none; background:#fffdf8; border-radius:4px; padding:10px 14px; font-size:13px; color:#51483f; }
.cat-row { display:grid; grid-template-columns:repeat(5,1fr); padding:14px 10px 8px; gap:6px; background:#f8f3ea; border-bottom:none; }
.cat-row button { min-width:0; padding:6px 2px; font-size:11px; border-radius:0; background:transparent; color:#655a50; display:flex; flex-direction:column; align-items:center; gap:6px; }
.cat-row button i { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid #cdbdab; border-radius:50%; color:#8b2e2e; background:#fffaf2; font-style:normal; font-size:14px; box-shadow:0 3px 10px rgba(64,42,28,.06); }
.cat-row button.active { background:transparent; color:#8b2e2e; font-weight:600; }
.cat-row button.active i { background:#8b2e2e; color:#fff8ed; border-color:#8b2e2e; }
.banner { margin:10px 14px 18px; height:170px; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:flex-start; color:#fff; position:relative; box-shadow:0 8px 22px rgba(48,31,20,.16); }
.banner::after { display:none; }
.banner-copy { position:relative; z-index:1; padding-left:22px; display:flex; flex-direction:column; align-items:flex-start; }
.banner-copy small { font-size:10px; letter-spacing:3px; color:#ead9c4; margin-bottom:10px; }
.banner-copy strong { font-size:20px; font-weight:500; letter-spacing:3px; margin-bottom:8px; }
.banner-copy span { font-size:11px; color:#f3e9dd; letter-spacing:1px; }
.section-title { padding:0 14px 12px; display:flex; align-items:flex-end; justify-content:space-between; }
.section-title small { color:#a33b32; font-family:Georgia,serif; font-size:8px; letter-spacing:2px; }
.section-title h2 { font-size:18px; letter-spacing:3px; margin:2px 0 0; font-weight:600; }
.section-title > span { color:#9a8c7d; font-size:11px; padding-bottom:2px; }
.products { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 14px 14px; }
.product { background:#fffdf8; border-radius:4px; overflow:hidden; border:1px solid #e8ded0; display:flex; flex-direction:column; box-shadow:0 5px 16px rgba(67,48,34,.06); }
.product .img { width:100%; aspect-ratio:1/1; background:#eee7dd; overflow:hidden; }
.product .info { padding:10px; flex:1; display:flex; flex-direction:column; }
.product .name { font-size:13px; line-height:1.45; margin:0 0 7px; font-weight:500; letter-spacing:.3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.product .price { color:#a33b32; font-size:16px; font-weight:700; font-family:Georgia,'Songti SC',serif; }
.product .price small { color:#a89b8e; font-size:10px; text-decoration:line-through; margin-left:4px; font-weight:400; }
.product .footer { display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
.product .tag { font-size:9px; color:#a33b32; border:1px solid #c99a91; padding:2px 5px; border-radius:1px; }
.product .tag.new { color:#536b67; border-color:#8ea49f; }
.product .add { width:27px; height:27px; border-radius:50%; background:#8b2e2e; color:#fff; font-size:16px; font-weight:400; display:flex; align-items:center; justify-content:center; }
.pd-img { width:100%; aspect-ratio:1/1; background:#fafafa; }
.pd-info { padding:14px; background:#fff; }
.pd-info .price-row { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.pd-info .price { color:#a33b32; font-size:24px; font-weight:700; }
.pd-info .old { color:#aaa; text-decoration:line-through; font-size:13px; }
.pd-info .name { font-size:17px; font-weight:600; margin:0 0 8px; }
.pd-info .sales { color:#999; font-size:12px; }
.pd-desc { margin-top:10px; padding:12px 14px; background:#fff; color:#666; line-height:1.7; font-size:13px; }
.spec-row { display:flex; gap:8px; padding:10px 14px; background:#fff; border-top:1px solid #f0f0f0; align-items:center; flex-wrap:wrap; }
.spec-row label { color:#666; font-size:13px; width:60px; flex-shrink:0; }
.spec-row button { padding:6px 14px; border:1px solid #ddd; border-radius:6px; font-size:13px; background:#fff; }
.spec-row button.active { border-color:#a33b32; color:#a33b32; background:#fff5f0; }
.pd-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:480px; width:100%; display:flex; align-items:center; background:#fff; padding:10px 14px; border-top:1px solid #f0f0f0; gap:10px; z-index:90; }
.pd-bar .bar-icon { display:flex; flex-direction:column; align-items:center; font-size:11px; color:#666; width:44px; }
.pd-bar .bar-icon .emoji { font-size:20px; }
.pd-bar button { flex:1; padding:11px 0; border-radius:22px; font-size:14px; font-weight:600; }
.pd-bar .btn-cart { background:#fff; border:1px solid #a33b32; color:#a33b32; }
.pd-bar .btn-buy { background:#a33b32; color:#fff; }
.tabbar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:480px; width:100%; display:flex; background:#fff; border-top:1px solid #eee; z-index:90; padding-bottom: env(safe-area-inset-bottom); }
.tabbar button { flex:1; display:flex; flex-direction:column; align-items:center; padding:8px 0; color:#999; font-size:11px; position:relative; }
.tabbar button.active { color:#a33b32; }
.tabbar button .emoji { font-size:22px; line-height:1; margin-bottom:2px; }
.tabbar .cart-badge { position:absolute; top:3px; right:50%; transform:translateX(12px); background:#a33b32; color:#fff; font-size:10px; border-radius:10px; padding:1px 5px; min-width:16px; text-align:center; font-weight:600; }
.cart-list { background:#fff; }
.cart-item { display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid #f5f5f5; align-items:center; }
.cart-item .chk { width:20px; height:20px; border:1.5px solid #ccc; border-radius:50%; flex-shrink:0; }
.cart-item .chk.on { background:#a33b32; border-color:#a33b32; position:relative; }
.cart-item .chk.on::after { content:'✓'; color:#fff; font-size:12px; position:absolute; top:-2px; left:4px; }
.cart-item .img { width:72px; height:72px; border-radius:6px; flex-shrink:0; background:#fafafa; }
.cart-item .info { flex:1; min-width:0; }
.cart-item .name { font-size:13px; margin:0 0 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cart-item .price { color:#a33b32; font-size:15px; font-weight:600; }
.cart-item .qty { display:flex; align-items:center; gap:10px; margin-top:6px; }
.cart-item .qty button { width:26px; height:26px; border:1px solid #ddd; border-radius:4px; font-size:14px; background:#fff; }
.cart-item .del { color:#999; font-size:12px; padding:4px 8px; }
.cart-foot { position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:480px; width:100%; background:#fff; padding:10px 14px; border-top:1px solid #eee; display:flex; align-items:center; gap:10px; z-index:90; }
.cart-foot .chk { width:20px; height:20px; border:1.5px solid #ccc; border-radius:50%; flex-shrink:0; }
.cart-foot .chk.on { background:#a33b32; border-color:#a33b32; position:relative; }
.cart-foot .chk.on::after { content:'✓'; color:#fff; font-size:12px; position:absolute; top:-2px; left:4px; }
.cart-foot .total { flex:1; text-align:right; }
.cart-foot .total small { color:#999; font-size:12px; }
.cart-foot .total strong { color:#a33b32; font-size:18px; margin-left:4px; }
.cart-foot button { background:#a33b32; color:#fff; padding:11px 24px; border-radius:22px; font-size:14px; font-weight:600; }
.empty { text-align:center; padding:60px 20px; color:#999; }
.empty .emoji { font-size:64px; margin-bottom:10px; }
.empty button { background:#a33b32; color:#fff; padding:10px 30px; border-radius:20px; margin-top:14px; font-size:14px; }
.section { background:#fff; margin-top:10px; padding:14px; }
.section h3 { font-size:15px; margin:0 0 10px; font-weight:600; }
.row { display:flex; padding:10px 0; border-bottom:1px solid #f5f5f5; font-size:14px; }
.row:last-child { border-bottom:none; }
.row label { color:#666; width:80px; flex-shrink:0; }
.row .val { flex:1; color:#333; }
.row .val.right { text-align:right; color:#a33b32; }
.row .val.gray { color:#999; }
.addr-card { border:1px solid #eee; border-radius:8px; padding:12px; margin-bottom:8px; cursor:pointer; }
.addr-card .name { font-weight:600; font-size:14px; }
.addr-card .phone { color:#666; font-size:13px; margin-left:10px; }
.addr-card .detail { color:#666; font-size:13px; margin-top:4px; line-height:1.5; }
.pay-method { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #f5f5f5; cursor:pointer; }
.pay-method:last-child { border-bottom:none; }
.pay-method .emoji { font-size:24px; }
.pay-method .name { flex:1; font-size:14px; }
.pay-method .radio { width:20px; height:20px; border:1.5px solid #ccc; border-radius:50%; position:relative; }
.pay-method .radio.on { border-color:#a33b32; }
.pay-method .radio.on::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:#a33b32; }
.fixed-bar { position:fixed; bottom:0; left:50%; transform:translateX(-50%); max-width:480px; width:100%; background:#fff; padding:10px 14px; border-top:1px solid #eee; display:flex; align-items:center; gap:10px; z-index:90; }
.fixed-bar .left { flex:1; font-size:13px; color:#666; }
.fixed-bar .left strong { color:#a33b32; font-size:20px; font-weight:700; }
.fixed-bar button { background:#a33b32; color:#fff; padding:11px 30px; border-radius:22px; font-size:15px; font-weight:600; }
.success { text-align:center; padding:80px 20px; }
.success .check { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,#a33b32,#c28a57); color:#fff; font-size:44px; margin:0 auto 20px; display:flex; align-items:center; justify-content:center; }
.success h2 { font-size:18px; margin:0 0 8px; }
.success p { color:#999; font-size:13px; margin:0 0 30px; }
.success .btn-row { display:flex; gap:12px; justify-content:center; }
.success .btn-row button { padding:10px 22px; border-radius:20px; font-size:14px; font-weight:600; }
.success .btn-row .outline { border:1px solid #ddd; color:#666; background:#fff; }
.success .btn-row .primary { background:#a33b32; color:#fff; }
.order-card { background:#fff; margin-top:10px; padding:14px; }
.order-card .head { display:flex; justify-content:space-between; font-size:13px; margin-bottom:10px; }
.order-card .head .no { color:#999; }
.order-card .head .status { color:#a33b32; font-weight:600; }
.order-card .item { display:flex; gap:10px; padding:6px 0; }
.order-card .item .img { width:54px; height:54px; border-radius:4px; flex-shrink:0; background:#fafafa; }
.order-card .item .info { flex:1; min-width:0; }
.order-card .item .name { font-size:13px; margin:0 0 4px; color:#333; }
.order-card .item .meta { font-size:12px; color:#999; }
.order-card .foot { display:flex; justify-content:space-between; align-items:center; margin-top:8px; padding-top:10px; border-top:1px solid #f5f5f5; font-size:13px; }
.order-card .foot .total { color:#a33b32; font-size:15px; font-weight:600; }
.order-card .foot button { border:1px solid #a33b32; color:#a33b32; padding:5px 14px; border-radius:14px; font-size:12px; cursor:pointer; }
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:flex; align-items:flex-end; justify-content:center; }
.modal { max-width:480px; width:100%; background:#fff; border-radius:14px 14px 0 0; padding:20px; max-height:80vh; overflow:auto; }
.modal h3 { margin:0 0 14px; font-size:16px; }
.modal .close-btn { float:right; color:#999; font-size:14px; cursor:pointer; }
.modal input { width:100%; padding:10px 12px; border:1px solid #ddd; border-radius:8px; margin-bottom:10px; font-size:14px; font-family:inherit; }
.modal button.primary { width:100%; background:#a33b32; color:#fff; padding:12px; border-radius:22px; font-size:15px; font-weight:600; cursor:pointer; }
.coupon-opt { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #eee; border-radius:8px; margin-bottom:8px; cursor:pointer; }
.coupon-opt.on { border-color:#a33b32; background:#fffaf6; }
.coupon-opt .voucher { width:80px; text-align:center; border-right:1px dashed #ddd; padding-right:10px; }
.coupon-opt .voucher strong { color:#a33b32; font-size:20px; }
.coupon-opt .voucher small { color:#a33b32; font-size:12px; }
.coupon-opt .desc { flex:1; font-size:13px; color:#666; }
.coupon-opt .radio { width:20px; height:20px; border:1.5px solid #ccc; border-radius:50%; }
.coupon-opt .radio.on { background:#a33b32; border-color:#a33b32; position:relative; }
.coupon-opt .radio.on::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:10px; height:10px; border-radius:50%; background:#fff; }