/* ================= 前台商城（M1 交易闭环） ================= */
.shop-body{background:var(--bg)}
.snav{position:sticky;top:0;z-index:9;background:#fff;border-bottom:1px solid var(--line)}
.snav-in{max-width:1100px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:18px}
.snav .logo{font-size:16px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.snav .logo .mk{color:var(--brand)}
.snav nav{display:flex;gap:6px;align-items:center}
.snav nav a{padding:6px 12px;border-radius:8px;color:var(--text);font-size:13px}
.snav nav a:hover{background:var(--gray-bg)}
.snav nav a.on{background:#e1f5ee;color:var(--brand-d);font-weight:500}
.snav nav a .dot{display:inline-block;min-width:16px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;text-align:center;line-height:16px}
.aurora-nav{background:linear-gradient(90deg,#fff,#f4f2ff);border-bottom-color:#e3e0f8}
.aurora-nav nav a.on{background:#eceafd;color:#534ab7}
.swrap{max-width:1100px;margin:0 auto;padding:20px}
.aurora-wrap .card{border-color:#e7e4f8}
.sfoot{max-width:1100px;margin:0 auto;padding:26px 20px 40px;text-align:center;color:var(--muted);font-size:12px}
.note{border-radius:8px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.note.ok{background:#e1f5ee;color:var(--brand-d);border:1px solid #b8e6d5}
.note.err{background:var(--red-bg);color:var(--red);border:1px solid #f3c9c9}
.crumb{font-size:12px;color:var(--muted);margin-bottom:10px;display:flex;gap:6px}
.ptitle{font-size:18px;font-weight:600;margin:0 0 14px}
.hero{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin-bottom:16px}
.hero h1{margin:0 0 6px;font-size:20px}
.ssearch{display:flex;gap:8px;margin-top:14px;max-width:520px}
.ssearch .inp{flex:1;min-width:0}
.g .cover{display:flex;align-items:center;justify-content:center;height:120px;border-radius:8px;background:var(--gray-bg);margin-bottom:8px;overflow:hidden}
.g .cover img{width:100%;height:100%;object-fit:cover}
.g .cover .ph{font-size:26px;color:#a9a9a4;font-weight:600}
.g .gact{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.g .t a{color:var(--text)}
/* 真实商品标题可达 40+ 字（来自原站真实数据），统一 2 行截断，避免卡片高低不齐；
   min-height 保证「1 行标题」的卡片与邻卡片等高 */
.g .t{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;
      overflow:hidden;min-height:2.6em;font-size:14px;line-height:1.3}
.gdetail{display:flex;gap:22px}
.gdetail .gleft{flex:0 0 300px}
.gdetail .gleft img{width:100%;border-radius:10px}
.gdetail .gright{flex:1;min-width:0}
.gdetail h1{margin:0 0 8px;font-size:19px}
.gdetail .price{color:var(--red);font-size:26px;font-weight:600;margin:8px 0}
.cover.big{height:230px;border-radius:10px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.inp.qty{max-width:120px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid2 .card{margin-bottom:14px}
.desc{font-size:13px;line-height:1.9;color:#3d4351}
.pager{margin:18px 0;display:flex;gap:8px;justify-content:center;font-size:13px;align-items:center}
.pager a{padding:3px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.pager b{padding:3px 10px;border:1px solid var(--brand);border-radius:6px;background:var(--brand);color:#fff}
.sumbar{gap:16px}
.sumbar .total{font-size:14px}
.sumbar .total b{color:var(--red);font-size:20px}
.btn.mini{padding:1px 8px;font-size:12px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs a{padding:6px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;font-size:13px;color:var(--text)}
.tabs a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.tabs .cnt{font-size:11px;opacity:.75;margin-left:2px}
.gws{display:flex;gap:10px;flex-wrap:wrap}
.gw{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:10px 16px;cursor:pointer;background:#fff}
.gw.on{border-color:var(--brand);background:#f2fbf7}
.paybox{max-width:560px;margin:0 auto;text-align:center}
.paybox .amount{font-size:34px;font-weight:600;color:var(--red);margin:6px 0 10px}
.paylist{display:flex;flex-direction:column;gap:10px;margin-top:16px;text-align:left}
.payitem{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:12px 16px;background:#fff;color:var(--text)}
.payitem:hover{border-color:var(--brand)}
.payitem.on{border-color:var(--brand);background:#f2fbf7}
.sumlines{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.sumlines div{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--muted)}
.sumlines div.big b{color:var(--red);font-size:17px}

/* ==================================================================
   窄屏自适应（手机 / 小屏平板，<=820px / <=480px）
   前台是「浏览型」界面：竖排化 + 横滑导航，避免任何横向溢出。
   ================================================================== */
@media screen and (max-width:820px){
  .swrap{padding:12px}
  .snav-in{padding:10px 12px;gap:10px;flex-wrap:wrap}
  .snav nav{display:flex;flex-wrap:nowrap;overflow-x:auto;max-width:100%;
            padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .snav nav a{flex:0 0 auto;white-space:nowrap;font-size:12.5px;padding:6px 9px}
  .sfoot{padding:20px 12px 30px}
  .hero{padding:16px 14px;border-radius:10px}
  .hero h1{font-size:17px}
  .ptitle{font-size:16px}
  .ssearch{max-width:none}
  .gdetail{display:block}
  .gdetail .gleft{width:100%;flex:none;max-width:340px;margin-bottom:12px}
  .gdetail h1{font-size:17px}
  .gdetail .price{font-size:22px}
  .cover.big{height:170px}
  .grid2{grid-template-columns:1fr;gap:10px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  .tabs a{flex:0 0 auto;white-space:nowrap}
  .gws{gap:8px}
  .gw{flex:1 1 auto;padding:9px 12px;font-size:12.5px}
  .paybox .amount{font-size:27px}
  .pager{flex-wrap:wrap}
  .inp.qty{max-width:none}
  .sumbar{gap:10px}
  .sumbar .total b{font-size:17px}
}
@media screen and (max-width:480px){
  .gdetail .price{font-size:20px}
  .paybox .amount{font-size:24px}
  .gw{padding:8px 10px}
  .g .cover{height:104px}
}