:root{--red:#8c1f28;--red2:#a8323d;--gold:#c9a050;--bg:#f6f4ee;--ink:#2b2326;--sub:#8a8177;--line:#eee7db;--card:#fff}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--ink);font:14px/1.5 -apple-system,"PingFang SC","Microsoft YaHei",sans-serif}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
input{font:inherit;border:0;outline:none;background:none}
img{max-width:100%}
#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;padding-bottom:76px;box-shadow:0 0 24px rgba(0,0,0,.06)}
#toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:rgba(43,35,38,.92);color:#fff;padding:10px 18px;border-radius:22px;font-size:13px;z-index:99;opacity:0;pointer-events:none;transition:opacity .25s}
#toast.show{opacity:1}
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,var(--red),#6d161d);color:#fff;padding:10px 12px;display:flex;align-items:center;gap:8px}
.store-chip{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.14);border-radius:16px;padding:5px 10px;font-size:12px;max-width:150px;white-space:nowrap;overflow:hidden}
.searchbar{flex:1;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border-radius:16px;padding:6px 12px;color:#999}
.searchbar input{flex:1;color:var(--ink)}
.topbar .mine-ico{font-size:18px}
.banner{margin:10px 12px;border-radius:14px;height:132px;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:0 22px;position:relative;overflow:hidden}
.banner .be{position:absolute;right:14px;bottom:6px;font-size:64px;opacity:.5}
.banner h2{font-size:22px;letter-spacing:1px}
.banner p{font-size:12px;opacity:.9;margin-top:4px}
.banner .dots{position:absolute;left:22px;bottom:10px;display:flex;gap:5px}
.banner .dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.45)}
.banner .dots i.on{width:14px;background:#fff}
.svcbar{display:flex;justify-content:space-around;margin:0 12px 10px;background:var(--card);border-radius:12px;padding:9px 4px;font-size:11px;color:var(--sub);box-shadow:0 1px 4px rgba(0,0,0,.04)}
.svcbar b{color:var(--red);display:block;font-size:12px}
.sec{margin:14px 12px 8px;display:flex;align-items:center;justify-content:space-between}
.sec h3{font-size:16px;font-weight:700}
.sec h3 em{font-style:normal;color:var(--red)}
.sec .more{color:var(--sub);font-size:12px}
.catgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 4px;margin:0 12px;background:var(--card);border-radius:12px;padding:14px 6px}
.catgrid button{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:11px;color:var(--ink)}
.catgrid .ci{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px}
.hscroll{display:flex;gap:8px;overflow-x:auto;padding:2px 12px 8px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.skcard{min-width:118px;background:var(--card);border-radius:12px;padding:8px;position:relative}
.skcard .pimg{height:74px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:38px}
.skcard .pname{font-size:12px;margin:6px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.skcard .price{color:var(--red);font-weight:700}
.skcard .price s{color:#bbb;font-weight:400;font-size:11px;margin-left:4px}
.skbar{height:5px;border-radius:3px;background:#f3d9d4;margin-top:6px;overflow:hidden}
.skbar i{display:block;height:100%;background:linear-gradient(90deg,var(--red),var(--gold))}
.skcard .skt{font-size:10px;color:var(--sub);margin-top:3px}
.couponrow{display:flex;gap:8px;overflow-x:auto;padding:2px 12px 6px;scrollbar-width:none}
.couponrow::-webkit-scrollbar{display:none}
.coupon{min-width:150px;border-radius:10px;background:linear-gradient(135deg,#fff,#fdf6ec);border:1px solid var(--line);display:flex;align-items:center;overflow:hidden}
.coupon .cl{padding:8px 10px;color:var(--red);text-align:center;border-right:1px dashed var(--line)}
.coupon .cl b{font-size:18px}
.coupon .cl span{display:block;font-size:10px}
.coupon .cr{flex:1;padding:6px 8px;font-size:11px}
.coupon .cr b{display:block;font-size:12px;color:var(--ink)}
.coupon .cr button{color:#fff;background:var(--gold);border-radius:10px;padding:2px 10px;font-size:11px;margin-top:3px}
.coupon .cr button:disabled{background:#ccc}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 12px}
.pcard{background:var(--card);border-radius:12px;padding:8px;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.pimg{border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:44px;height:96px}
.pname{font-size:13px;margin:6px 0 2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.ptags span{display:inline-block;font-size:10px;color:var(--red);border:1px solid #e6c1c5;border-radius:4px;padding:0 4px;margin-right:4px}
.prow{display:flex;align-items:center;margin-top:6px}
.prow b{color:var(--red);font-size:15px}
.prow s{color:#bbb;font-size:11px;margin-left:5px}
.addbtn{margin-left:auto;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center}
.loadmore{display:block;margin:14px auto;color:var(--sub);font-size:12px;border:1px solid var(--line);border-radius:16px;padding:6px 22px;background:var(--card)}
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;display:flex;border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;padding:7px 0 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--sub)}
.tabbar button .ti{font-size:19px}
.tabbar button.on{color:var(--red);font-weight:700}
.tabbar .badge{position:relative;top:-4px;right:-8px;background:var(--red);color:#fff;border-radius:9px;font-size:10px;padding:0 5px}
.catewrap{display:flex;height:calc(100vh - 118px)}
.catelist{width:92px;background:#f0ece3;overflow-y:auto;flex-shrink:0}
.catelist button{display:block;width:100%;padding:13px 4px;font-size:12px;color:var(--sub);text-align:center}
.catelist button.on{background:#fff;color:var(--red);font-weight:700;border-left:3px solid var(--red)}
.catemain{flex:1;overflow-y:auto;padding:10px}
.sortbar{display:flex;gap:14px;font-size:12px;color:var(--sub);margin-bottom:10px}
.sortbar button.on{color:var(--red);font-weight:700}
.prowcard{display:flex;gap:10px;background:var(--card);border-radius:12px;padding:8px;margin-bottom:10px}
.prowcard .pimg{width:84px;height:84px;font-size:36px;flex-shrink:0}
.prowcard .info{flex:1;display:flex;flex-direction:column}
.prowcard .pname{min-height:0;-webkit-line-clamp:1}
.prowcard .sub{font-size:11px;color:var(--sub)}
.cartline{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:10px;margin:0 12px 10px}
.cartline .pimg{width:64px;height:64px;font-size:30px;flex-shrink:0}
.cartline .info{flex:1}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:22px;height:22px;border-radius:50%;border:1px solid var(--red);color:var(--red);font-size:14px;display:flex;align-items:center;justify-content:center}
.stepper button.plus{background:var(--red);color:#fff}
.cartbar{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;padding:8px 14px;z-index:25}
.cartbar .tot{flex:1}
.cartbar .tot b{color:var(--red);font-size:18px}
.gobuy{background:linear-gradient(90deg,var(--red),var(--red2));color:#fff;border-radius:20px;padding:10px 26px;font-size:14px;font-weight:700}
.gobuy:disabled{background:#ccc}
.minehead{background:linear-gradient(135deg,var(--red),#6d161d);color:#fff;padding:26px 18px 40px;border-radius:0 0 18px 18px}
.minehead .ava{width:52px;height:52px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;font-size:26px}
.minehead .row{display:flex;align-items:center;gap:12px}
.minehead .lv{font-size:11px;background:rgba(255,255,255,.2);border-radius:10px;padding:1px 8px}
.minestats{display:flex;background:var(--card);border-radius:12px;margin:-26px 12px 12px;padding:12px 0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.minestats button{flex:1;text-align:center}
.minestats b{font-size:17px;color:var(--red)}
.minestats span{display:block;font-size:11px;color:var(--sub)}
.mcell{background:var(--card);border-radius:12px;margin:0 12px 12px;overflow:hidden}
.mcell button{display:flex;width:100%;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line);font-size:13px}
.mcell button:last-child{border-bottom:0}
.mcell .arr{margin-left:auto;color:#ccc}
.ordercard{background:var(--card);border-radius:12px;margin:0 12px 12px;padding:12px}
.ordercard .hd{display:flex;justify-content:space-between;font-size:12px;color:var(--sub);border-bottom:1px solid var(--line);padding-bottom:8px}
.ordercard .hd b{color:var(--ink)}
.ordercard .st{font-weight:700}
.st-待发货{color:#e6a23c}.st-配送中{color:#409eff}.st-已完成{color:#67c23a}.st-退款中{color:#f56c6c}.st-已取消{color:#999}
.oline{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:12px}
.oline .pimg{width:44px;height:44px;font-size:22px;flex-shrink:0}
.oline .q{margin-left:auto;color:var(--sub)}
.tabs{display:flex;gap:6px;margin:10px 12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{flex-shrink:0;border-radius:16px;padding:6px 14px;font-size:12px;background:#ece7dd;color:var(--sub)}
.tabs button.on{background:var(--red);color:#fff}
.detailbox{background:var(--card);margin:10px 12px;border-radius:14px;padding:14px}
.bigimg{height:210px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:96px}
.qtyrow{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.fixbar{position:fixed;bottom:56px;left:50%;transform:translateX(-50%);width:100%;max-width:480px;background:#fff;display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);z-index:25}
.fixbar .addcart{flex:1;border:1px solid var(--red);color:var(--red);border-radius:20px;padding:10px 0;font-weight:700}
.fixbar .buynow{flex:1;background:linear-gradient(90deg,var(--red),var(--gold));color:#fff;border-radius:20px;padding:10px 0;font-weight:700}
.storecard{background:var(--card);border-radius:12px;margin:0 12px 10px;padding:12px;display:flex;gap:10px;align-items:center}
.storecard .si{width:44px;height:44px;border-radius:10px;background:#f7e9e4;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.storecard .info{flex:1}
.storecard .info b{font-size:13px}
.storecard .sub{font-size:11px;color:var(--sub);margin-top:2px}
.storecard .pick{border:1px solid var(--red);color:var(--red);border-radius:14px;padding:4px 12px;font-size:12px}
.storecard .pick.cur{background:var(--red);color:#fff}
.formcard{background:var(--card);border-radius:12px;margin:0 12px 10px;padding:14px}
.formcard h4{font-size:13px;margin-bottom:10px;color:var(--sub);font-weight:400}
.optrow{display:flex;gap:8px;flex-wrap:wrap}
.optrow button{border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-size:12px;background:#fbf9f5}
.optrow button.on{border-color:var(--red);color:var(--red);background:#fdf3f2;font-weight:700}
.moneyline{display:flex;justify-content:space-between;font-size:13px;margin:6px 0}
.moneyline.total{font-size:15px;font-weight:700;border-top:1px solid var(--line);padding-top:8px}
.moneyline .v{color:var(--red)}
.empty{text-align:center;color:var(--sub);padding:60px 0;font-size:13px}
.empty .e{font-size:52px;display:block;margin-bottom:10px}
.pagehead{background:linear-gradient(135deg,var(--red),#6d161d);color:#fff;text-align:center;padding:12px 40px;font-size:15px;position:sticky;top:0;z-index:20}
.pagehead .back{position:absolute;left:10px;top:12px;font-size:16px}

/* ========== 自适应：平板 / 电脑宽屏 ========== */
@media (min-width:768px){
  body{background:#efece4}
  #app{max-width:none;box-shadow:none;padding-bottom:88px}
  .topbar{padding:12px 22px;gap:12px}
  .store-chip{max-width:240px;padding:6px 12px;font-size:13px}
  .searchbar{padding:8px 14px;border-radius:18px}
  .banner{margin:16px 22px;height:200px;border-radius:16px}
  .banner h2{font-size:30px}
  .banner p{font-size:14px}
  .banner .be{font-size:96px;right:30px}
  .banner .dots{left:26px}
  .svcbar{margin:0 22px 12px;padding:13px 8px;font-size:13px;border-radius:14px}
  .svcbar b{font-size:15px}
  .sec{margin:20px 22px 12px}
  .sec h3{font-size:18px}
  .sec .more{font-size:13px}
  .catgrid{grid-template-columns:repeat(10,1fr);margin:0 22px;padding:20px 12px;border-radius:14px}
  .catgrid button{font-size:13px}
  .catgrid .ci{width:56px;height:56px;font-size:28px}
  .hscroll{padding:4px 22px 12px;gap:12px}
  .skcard{min-width:160px;border-radius:14px}
  .skcard .pimg{height:96px;font-size:48px}
  .skcard .pname{font-size:13px}
  .couponrow{padding:4px 22px 10px;gap:12px}
  .coupon{min-width:190px}
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:0 22px}
  .pcard{border-radius:14px;padding:10px}
  .pimg{height:132px;font-size:56px}
  .pname{font-size:14px}
  .prow b{font-size:17px}
  .addbtn{width:28px;height:28px;font-size:18px}
  .loadmore{font-size:13px;padding:8px 30px}
  .tabbar button{padding:9px 0 8px;font-size:13px}
  .tabbar button .ti{font-size:21px}
  .cartbar,.fixbar{padding:10px 22px}
  .catewrap{height:calc(100vh - 132px)}
  .catelist{width:140px}
  .catelist button{padding:16px 8px;font-size:13px}
  .catemain{padding:16px 22px;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px;align-content:start}
  .catemain .sortbar{grid-column:1/-1;margin-bottom:0;font-size:13px;gap:20px}
  .catemain .prowcard{margin-bottom:0}
  .minehead{padding:34px 26px 48px;border-radius:0}
  .minestats{margin:-30px 22px 16px}
  .mcell{margin:0 22px 14px}
  .ordercard{margin:0 22px 14px;padding:14px 16px}
  .tabs{margin:12px 22px}
  .detailbox{margin:14px 22px;padding:18px}
  .bigimg{height:300px;font-size:120px}
  .cartline{margin:0 22px 12px;padding:12px}
  .storecard{margin:0 22px 12px;padding:14px}
  .formcard{margin:0 22px 12px;padding:16px}
  .empty{padding:90px 0}
  .pagehead{padding:14px 40px;font-size:16px}
}
@media (min-width:1600px){
  .pgrid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
  .banner{height:240px}
}

/* 真实商品图 */
.pimg img.fimg,.bigimg img.fimg{width:100%;height:100%;object-fit:cover;display:block}
img.himg{width:30px;height:30px;object-fit:cover;border-radius:6px;vertical-align:-8px}

/* ========== 第一步：商品详情页升级 ========== */
.pagehead .favtop{position:absolute;right:12px;top:10px;font-size:16px}
.dlayout{display:block}
.dslides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;background:var(--card)}
.dslides::-webkit-scrollbar{display:none}
.dslide{min-width:100%;scroll-snap-align:center;height:280px;display:flex;align-items:center;justify-content:center;font-size:96px;position:relative}
.dslide img.fimg{width:100%;height:100%;object-fit:cover;display:block}
.dcard2{flex-direction:column;gap:6px;text-align:center;padding:20px}
.dcard2 .c2e{font-size:64px}
.dcard2 b{font-size:17px;color:var(--ink)}
.dcard2 p{font-size:12px;color:var(--sub)}
.dcard2 em{font-style:normal;font-size:11px;color:#7a4e1f;border:1px solid var(--gold);border-radius:10px;padding:1px 8px;margin-top:6px}
.ddots{display:flex;justify-content:center;gap:5px;background:var(--card);padding:8px 0 12px}
.ddots i{width:6px;height:6px;border-radius:3px;background:#ddd;cursor:pointer}
.ddots i.on{width:14px;background:var(--red)}
.dprice{display:flex;align-items:baseline;gap:8px}
.dprice b{color:var(--red);font-size:24px}
.dprice s{color:#bbb;font-size:12px}
.dprice .dj{margin-left:auto;font-size:11px;color:var(--sub)}
.dmem{display:flex;align-items:center;gap:6px;background:linear-gradient(90deg,#fdf6ec,#fff);border:1px solid #f0e2c8;border-radius:8px;padding:6px 10px;font-size:12px;color:#7a4e1f;margin-top:8px;flex-wrap:wrap}
.dmem b{color:#7a4e1f}
.cstrip{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.cstrip-c{font-size:11px;color:var(--red);border:1px dashed #e6c1c5;border-radius:6px;padding:2px 6px;display:inline-flex;align-items:center;gap:4px}
.cstrip-c button{background:var(--red);color:#fff;border-radius:8px;font-size:10px;padding:1px 6px}
.cstrip-c button:disabled{background:#ccc}
.dpromo{background:linear-gradient(90deg,#fdf0ef,#fff);border-radius:8px;margin-top:8px;padding:7px 10px;font-size:12px;color:var(--red)}
.dpromo em{font-style:normal;font-weight:700}
.dtitle{font-size:17px;margin-top:10px}
.dstat{font-size:12px;color:var(--sub);margin-top:4px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid var(--line);border-radius:8px;padding:6px 12px;font-size:12px;background:#fbf9f5;color:var(--ink)}
.chip.on{border-color:var(--red);color:var(--red);background:#fdf3f2;font-weight:700}
.drow{display:flex;align-items:center;gap:6px;font-size:13px;padding:4px 0;cursor:pointer}
.drow .arr2{margin-left:auto;color:var(--red);font-size:12px}
.dslots{margin-top:8px}
.svcchips{display:flex;gap:8px;flex-wrap:wrap}
.svcchips span{font-size:12px;color:#2f7d4f;background:#eef7f0;border-radius:6px;padding:4px 10px}
.ptable{width:100%;border-collapse:collapse;font-size:12px;margin-top:8px}
.ptable td{border:1px solid var(--line);padding:6px 10px}
.ptable td:first-child{width:76px;color:var(--sub);background:#faf8f3}
.revhead{display:flex;justify-content:space-between;align-items:center}
.rscore{color:var(--red);font-weight:700}
.rscore i{font-style:normal;font-size:11px;color:var(--sub);font-weight:400;margin-left:4px}
.revtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.revtags button{font-size:11px;background:#f4f1ea;border-radius:12px;padding:3px 10px;color:var(--sub);border:1px solid transparent}
.revtags button.on{background:#fdf3f2;color:var(--red);border-color:#e6c1c5}
.rtabs{display:flex;gap:12px;margin-top:10px;font-size:12px;color:var(--sub)}
.rtabs button.on{color:var(--red);font-weight:700}
.revline{display:flex;gap:8px;border-top:1px solid var(--line);margin-top:10px;padding-top:10px}
.rava{width:30px;height:30px;border-radius:50%;background:#f4f1ea;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.rbody{flex:1}
.rhd{display:flex;align-items:center;gap:6px;font-size:12px}
.rhd .stars{color:var(--gold);font-size:11px}
.rhd .rd{margin-left:auto;color:var(--sub);font-size:11px}
.rbody p{font-size:13px;margin-top:3px}
.rspec{font-size:11px;color:var(--sub);margin-top:2px}
.bline{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)}
.bline:first-of-type{border-top:0;margin-top:6px}
.bline .pimg{width:56px;height:56px;font-size:26px;flex-shrink:0}
.bline .info{flex:1}
.bline .pname{min-height:0;-webkit-line-clamp:1;margin:0 0 2px}
.bline b{color:var(--red);font-size:13px}
.hscroll .pcard{min-width:132px;flex-shrink:0}
.dbar{bottom:0}
.dbar .dicon{display:flex;flex-direction:column;align-items:center;font-size:16px;color:var(--sub);gap:1px;min-width:42px}
.dbar .dicon i{font-style:normal;font-size:10px}
.modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.modalcard{background:#fff;width:100%;max-width:480px;border-radius:16px 16px 0 0;padding:16px;max-height:70vh;overflow-y:auto}
.modalcard h4{font-size:14px;margin-bottom:10px;text-align:center}
.spick{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.spick .info{flex:1}
.spick .info b{font-size:13px}
.spick .sub{font-size:11px;color:var(--sub)}
.spick .pick{border:1px solid var(--red);color:var(--red);border-radius:14px;padding:4px 12px;font-size:12px}
.spick .pick.cur{background:var(--red);color:#fff}
@media (min-width:768px){
  .dlayout{display:grid;grid-template-columns:minmax(340px,480px) 1fr;gap:20px;margin:16px 22px 0;align-items:start}
  .dl-left{position:sticky;top:70px;background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}
  .dl-right .detailbox{margin:0 0 14px}
  .dslide{height:380px}
  .modal-ov{align-items:center}
  .modalcard{max-width:560px;border-radius:16px}
  .dbar{max-width:760px;bottom:0}
}