/* =====================================================
   mushshop 商城样式 v4 —— 一比一复刻汇联商城（shopay.hljhpay.cn）
   主题色：#A74BFD（紫）  布局：PC 三栏+楼层 / 手机搜索+宫格+爆品
   ===================================================== */
:root {
    --p: #A74BFD;          /* 主色紫 */
    --p2: #8B3DF5;         /* 深紫 hover */
    --p3: #F6F0FE;         /* 浅紫底 */
    --price: #A74BFD;      /* 价格紫 */
    --bg: #f5f5f5;
    --card: #fff;
    --line: #e5e5e5;
    --text: #333;
    --muted: #999;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "PingFang SC","Microsoft YaHei",Arial,sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; outline: 0; }
.container { max-width: 1440px; margin: 0 auto; padding: 0 12px; }

/* ============ 顶部通栏（参考站） ============ */
.ref-top { background: #fff; border-bottom: 1px solid #f0f0f0; }
.ref-top-inner { max-width: 1440px; margin: 0 auto; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 13px; color: #666; }
.ref-top-inner .links a { margin-left: 16px; color: #666; }
.ref-top-inner .links a:hover { color: var(--p); }

/* ============ 主 Header（参考站） ============ */
.ref-hd { background: #fff; border-bottom: 1px solid #f5f5f5; }
.ref-hd-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 40px; padding: 18px 12px 8px; }
.ref-hd .logo { font-size: 26px; font-weight: 700; color: var(--p); letter-spacing: 1px; white-space: nowrap; }
.ref-hd .logo small { display: block; font-size: 10px; color: #aaa; font-weight: 400; letter-spacing: 1px; margin-top: 2px; }
.ref-hd .search { display: flex; align-items: center; flex: 1; max-width: 560px; background: var(--p3); border-radius: 26px; height: 42px; padding: 3px; }
.ref-hd .search input { flex: 1; border: 0; background: transparent; padding: 0 18px; font-size: 14px; color: #333; }
.ref-hd .search input::placeholder { color: #b9a8d6; }
.ref-hd .search button { background: var(--p); color: #fff; border: 0; border-radius: 22px; padding: 0 34px; font-size: 14px; height: 36px; }
.ref-hd .search button:hover { background: var(--p2); }
.ref-hd .cart-btn { background: var(--p3); color: var(--p); border: 0; border-radius: 22px; padding: 9px 24px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.ref-hd .cart-btn:hover { background: var(--p); color: #fff; }

/* ============ 搜索热词（参考站） ============ */
.ref-hot { max-width: 1440px; margin: 0 auto; padding: 6px 12px 0; }
.ref-hot span { font-size: 12px; color: var(--muted); margin-right: 12px; }
.ref-hot a { font-size: 12px; color: var(--muted); margin-right: 12px; }
.ref-hot a:hover { color: var(--p); }

/* ============ 导航条（参考站） ============ */
.ref-nav { background: #fff; border-top: 1px solid #f5f5f5; }
.ref-nav-inner { max-width: 1440px; margin: 0 auto; display: flex; gap: 6px; padding: 8px 12px; }
.ref-nav-inner a { padding: 7px 18px; font-size: 15px; color: #333; border-radius: 6px; }
.ref-nav-inner a:hover, .ref-nav-inner a.active { color: var(--p); font-weight: 600; }

/* ============ 首页三栏（参考站） ============ */
.ref-main { width: 100%; display: grid; grid-template-columns: 240px 1fr 300px; gap: 14px; padding: 16px 0; align-items: start; }
/* 左：分类栏 */
.ref-side { background: var(--card); border-radius: 8px; overflow: hidden; }
.ref-side .st { background: var(--p); color: #fff; font-size: 16px; font-weight: 600; padding: 16px; }
.ref-side a.cat { display: flex; justify-content: space-between; align-items: center; padding: 18px 16px; font-size: 14.5px; color: #444; border-bottom: 1px solid #f7f7f7; }
.ref-side a.cat:hover { background: var(--p3); color: var(--p); }
.ref-side a.cat .arr { color: #c9c9c9; font-size: 16px; }
.ref-side a.cat .ic { width: 26px; height: 26px; border-radius: 8px; background: var(--p3); color: var(--p); font-style: normal; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; }
.ref-side a.cat .nm { flex: 1; }
/* 中：banner + 楼层 */
.ref-mid .banner { height: 400px; border-radius: 10px; background: linear-gradient(120deg, #A74BFD 0%, #c06cff 60%, #e0b3ff 100%); color: #fff; display: flex; align-items: center; padding: 0 44px; position: relative; overflow: hidden; }
.ref-mid .banner::after { content: ""; position: absolute; right: -50px; top: -60px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.12); }
.ref-mid .banner::before { content: ""; position: absolute; right: 120px; bottom: -90px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.08); }
.ref-mid .banner .bc { z-index: 2; }
.ref-mid .banner .bk { font-size: 13px; letter-spacing: 8px; opacity: .9; }
.ref-mid .banner h1 { font-size: 38px; font-weight: 700; letter-spacing: 2px; margin: 14px 0 10px; }
.ref-mid .banner p { font-size: 15px; opacity: .92; }
.ref-mid .banner .btns { display: flex; gap: 10px; margin-top: 20px; }
.ref-mid .banner .btns a { background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.6); color: #fff; font-size: 14px; padding: 9px 26px; border-radius: 22px; }
.ref-mid .banner .btns a:hover { background: #fff; color: var(--p); }
.ref-mid .banner img { position: absolute; right: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }
.ref-floor { background: var(--card); border-radius: 10px; margin-top: 14px; padding: 20px 22px 22px; }
.ref-floor .fh { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.ref-floor .fh .l { display: flex; align-items: baseline; gap: 12px; }
.ref-floor .fh .l h2 { font-size: 22px; color: #222; }
.ref-floor .fh .l h2 i { font-style: normal; color: var(--p); }
.ref-floor .fh .l span { font-size: 12.5px; color: var(--muted); }
.ref-floor .fh a.more { font-size: 13px; color: var(--muted); }
.ref-floor .fh a.more:hover { color: var(--p); }
.goods-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.goods-card { background: var(--card); border-radius: 8px; cursor: pointer; position: relative; transition: box-shadow .2s, transform .2s; }
.goods-card:hover { box-shadow: 0 6px 18px rgba(167,75,253,.12); transform: translateY(-3px); }
.goods-card .cover { width: 100%; height: 210px; object-fit: cover; border-radius: 10px 10px 0 0; }
.goods-card .tags { position: absolute; top: 8px; left: 8px; z-index: 2; }
.goods-card .tag { color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.goods-card .tag.hot { background: var(--p); }
.goods-card .tag.new { background: #ff9f43; }
.goods-card .info { padding: 12px 14px 14px; }
.goods-card .name { font-size: 14px; color: #333; height: 42px; line-height: 21px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.goods-card .price-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.goods-card .price { color: var(--price); font-size: 19px; font-weight: 700; font-family: Arial; }
.goods-card .price i { font-style: normal; font-size: 12px; }
.goods-card .sales { color: var(--muted); font-size: 12px; }
/* 右：欢迎 + 资讯 */
.ref-rside .welcome { background: var(--card); border-radius: 10px; padding: 24px 22px; margin-bottom: 14px; }
.ref-rside .welcome h3 { font-size: 17px; color: #222; }
.ref-rside .welcome h3 i { font-style: normal; color: var(--p); }
.ref-rside .welcome p { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.7; }
.ref-rside .news { background: var(--card); border-radius: 10px; padding: 14px 16px; }
.ref-rside .news h4 { font-size: 14px; color: #222; margin-bottom: 10px; }
.ref-rside .news h4 i { font-style: normal; color: var(--p); margin-right: 4px; }
.ref-rside .news a.n { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: #666; padding: 7px 0; border-bottom: 1px dashed #f2f2f2; line-height: 1.5; }
.ref-rside .news a.n:last-child { border-bottom: 0; }
.ref-rside .news a.n:hover { color: var(--p); }
.ref-rside .news a.n .new-tag { flex-shrink: 0; background: var(--p3); color: var(--p); font-size: 10.5px; padding: 1px 6px; border-radius: 3px; margin-top: 1px; }

/* ============ 精选店铺横条卡（参考站） ============ */
.ref-shops { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 0 12px; }
.ref-shopcard { background: var(--card); border-radius: 10px; padding: 16px 18px; cursor: pointer; transition: box-shadow .2s; }
.ref-shopcard:hover { box-shadow: 0 6px 18px rgba(167,75,253,.12); }
.ref-shopcard .sh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ref-shopcard .sh .self { background: var(--p); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 3px; }
.ref-shopcard .sh h3 { font-size: 15px; color: #222; }
.ref-shopcard .sh .stats { font-size: 12px; color: var(--muted); margin-left: auto; }
.ref-shopcard .sh .stats b { color: #ff9f43; }
.ref-shopcard .sg { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ref-shopcard .sg .gi { text-align: center; }
.ref-shopcard .sg .gi img { width: 100%; height: 78px; object-fit: cover; border-radius: 6px; }
.ref-shopcard .sg .gi .gp { color: var(--price); font-size: 12.5px; font-weight: 700; margin-top: 5px; font-family: Arial; }
.ref-shopcard .sg .gi .gp i { font-style: normal; font-size: 10px; }

/* ============ 服务保障（参考站） ============ */
.ref-svc { width: 100%; padding: 0 0 12px; }
.ref-svc-inner { background: var(--card); border-radius: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 18px 24px; }
.ref-svc .svc { display: flex; align-items: center; gap: 12px; justify-content: center; }
.ref-svc .svc .ico { width: 42px; height: 42px; border-radius: 50%; background: var(--p3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ref-svc .svc .ico svg { width: 22px; height: 22px; fill: var(--p); }
.ref-svc .svc b { display: block; font-size: 14px; color: #333; }
.ref-svc .svc p { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* ============ 页脚 ============ */
.ref-foot { width: 100%; padding: 20px 0 30px; text-align: center; font-size: 12px; color: var(--muted); }

/* ============ 右侧悬浮栏（参考站） ============ */
.ref-float { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 6px; }
.ref-float a { width: 56px; height: 56px; background: var(--card); border: 1px solid #eee; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: #666; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ref-float a:hover { color: var(--p); border-color: var(--p); }
.ref-float a svg { width: 20px; height: 20px; fill: var(--p); margin-bottom: 3px; }
.ref-float a .n { position: absolute; margin-top: -34px; margin-left: 30px; background: var(--p); color: #fff; font-size: 10px; border-radius: 9px; padding: 0 5px; min-width: 16px; text-align: center; }

/* ============ 公告 ============ */
.notice-bar { background: var(--p3); color: var(--p); border-radius: 8px; padding: 8px 14px; font-size: 13px; margin: 12px 0; }

/* ============ 手机端（参考站） ============ */
.m-hd, .m-banner, .m-cats5, .m-shoprow, .m-floor, .m-tabbar { display: none; }
@media (max-width: 768px) {
    .ref-top, .ref-nav, .ref-float, .hide-m, .ref-main, .ref-shops, .ref-svc, .notice-bar { display: none; }
    body { overflow-x: hidden; }
    .m-hd, .m-banner, .m-cats5, .m-shoprow, .m-floor { display: block; }
    .m-cats5, .m-shoprow, .m-floor { display: grid; }
    .m-shoprow, .m-floor { display: block; }
    body { padding-bottom: 58px; background: #f5f5f5; }
    .container { padding: 0 10px; }
    /* 手机搜索条 */
    .m-hd { background: #fff; display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
    .ref-hd, .ref-hot { display: none; }
    .m-hd .logo { font-size: 18px; font-weight: 700; color: var(--p); flex-shrink: 0; }
    .m-hd .search { flex: 1; display: flex; align-items: center; background: #f5f5f5; border-radius: 18px; height: 34px; padding: 0 14px; color: #b9a8d6; font-size: 13px; }
    .m-hd .search svg { width: 15px; height: 15px; fill: var(--p); margin-right: 8px; }
    .m-hd .search input { flex: 1; border: 0; background: transparent; font-size: 13px; }
    .m-hd .cart { flex-shrink: 0; color: var(--p); font-size: 11px; text-align: center; position: relative; }
    .m-hd .cart svg { width: 19px; height: 19px; fill: var(--p); display: block; margin: 0 auto 1px; }
    .m-hd .cart .n { position: absolute; right: -6px; top: -5px; background: var(--p); color: #fff; font-size: 9px; border-radius: 8px; padding: 0 4px; min-width: 13px; }
    /* 手机 banner（批量采购） */
    .m-banner { margin: 10px 0 0; height: 120px; border-radius: 10px; background: linear-gradient(120deg, #A74BFD, #c06cff); color: #fff; display: flex; align-items: center; padding: 0 20px; position: relative; overflow: hidden; }
    .m-banner h2 { font-size: 20px; font-weight: 700; }
    .m-banner p { font-size: 11.5px; opacity: .92; margin-top: 6px; line-height: 1.6; }
    .m-banner .coupon { position: absolute; right: 16px; background: rgba(255,255,255,.18); border: 1px dashed rgba(255,255,255,.5); border-radius: 10px; padding: 10px 12px; text-align: center; }
    .m-banner .coupon b { display: block; font-size: 20px; }
    .m-banner .coupon span { font-size: 10px; opacity: .9; }
    /* 手机分类宫格（5个） */
    .m-cats5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; background: #fff; border-radius: 10px; margin: 10px 0 0; padding: 14px 6px; }
    .m-cats5 a { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; color: #444; }
    .m-cats5 a .ic { width: 44px; height: 44px; border-radius: 14px; color: #fff; font-style: normal; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; }
    /* 手机精选店铺横条 */
    .m-shoprow { background: #fff; border-radius: 10px; margin: 10px 0 0; padding: 14px 12px; }
    .m-shoprow .sh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .m-shoprow .sh .enter { background: var(--p); color: #fff; font-size: 12px; padding: 5px 12px; border-radius: 16px; flex-shrink: 0; }
    .m-shoprow .sh h3 { font-size: 14px; color: #222; }
    .m-shoprow .sh .more { margin-left: auto; font-size: 11px; color: var(--muted); }
    .m-shoprow .sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .m-shoprow .sg .gi { text-align: center; }
    .m-shoprow .sg .gi img { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; }
    .m-shoprow .sg .gi .gp { color: var(--price); font-size: 11.5px; font-weight: 700; margin-top: 4px; font-family: Arial; }
    .m-shoprow .sg .gi .gp i { font-style: normal; font-size: 9px; }
    /* 手机楼层 */
    .m-floor { background: #fff; border-radius: 10px; margin: 10px 0 0; padding: 14px 12px; }
    .m-floor .fh { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
    .m-floor .fh h3 { font-size: 15px; color: #222; }
    .m-floor .fh h3 i { font-style: normal; color: var(--p); }
    .m-floor .fh a { font-size: 11px; color: var(--muted); }
    .goods-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .goods-card .cover { height: 150px; }
    .m-floor .goods-card .cover { height: 150px; }
    /* 手机底部 tabbar（5项） */
    .m-tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eee; z-index: 99; }
    .m-tabbar a { flex: 1; text-align: center; padding: 8px 0 9px; font-size: 11px; color: #999; }
    .m-tabbar a.active { color: var(--p); }
    .m-tabbar a .ico { display: block; line-height: 1; margin-bottom: 3px; }
    .m-tabbar a .ico svg { width: 20px; height: 20px; fill: currentColor; display: inline-block; vertical-align: middle; }
    .m-tabbar .cart-num { position: absolute; margin-left: 14px; margin-top: -20px; background: var(--p); color: #fff; font-size: 9px; border-radius: 8px; padding: 0 4px; min-width: 13px; text-align: center; }
    /* 详情页手机适配 */
    .detail-wrap { padding: 12px; gap: 12px; }
    .detail-cover { width: 100%; }
    .detail-cover img { width: 100%; }
    .detail-info h1 { font-size: 17px; }
    .buy-row .btn { min-width: 0; }
    .form-box { margin: 20px 12px; padding: 20px; }
    .user-wrap { flex-direction: column; }
    .user-side { width: 100%; display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
    .user-side a { padding: 8px 12px; white-space: nowrap; }
    .user-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cart-item { padding: 10px; }
    .cart-item .thumb { width: 56px; height: 56px; }
    .coupon-card .left { width: 100px; }
    .shop-scroll { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 4px; }
    .shop-scroll .shop-card { flex: 0 0 200px; margin-bottom: 0; padding: 12px; }
}

/* ============ 通用页面（详情/购物车/下单/个人中心 等） ============ */
.page { max-width: 1440px; margin: 14px auto; padding: 0 12px; }
.page-white { background: var(--card); border-radius: 10px; padding: 20px; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: var(--p); }
.detail-wrap { display: flex; gap: 28px; background: var(--card); border-radius: 10px; padding: 28px; margin-bottom: 14px; flex-wrap: wrap; }
.detail-cover { width: 400px; flex-shrink: 0; }
.detail-cover img { width: 100%; border-radius: 10px; }
.detail-info { flex: 1; min-width: 260px; }
.detail-info h1 { font-size: 22px; color: #222; margin-bottom: 8px; line-height: 1.4; }
.detail-info .sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.detail-info .pbox { background: var(--p3); border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.detail-info .price { color: var(--price); font-size: 28px; font-weight: 700; font-family: Arial; }
.detail-info .price i { font-style: normal; font-size: 16px; }
.detail-info .price-row2 { display: flex; gap: 24px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.detail-info .meta { font-size: 13px; color: #666; margin-bottom: 10px; }
.detail-info .meta b { color: var(--p); }
.detail-info .meta .num-box { display: inline-flex; align-items: center; border: 1px solid #e4e4e4; border-radius: 4px; vertical-align: middle; }
.detail-info .meta .num-box button { width: 28px; height: 28px; border: 0; background: #f7f7f7; cursor: pointer; font-size: 15px; }
.detail-info .meta .num-box button:hover { color: var(--p); }
.detail-info .meta .num-box input { width: 40px; text-align: center; border: 0; height: 28px; font-size: 13px; }
.buy-row { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.buy-row .btn { flex: 1; min-width: 170px; max-width: 230px; }
.btn { display: inline-block; text-align: center; padding: 12px 0; border-radius: 22px; font-size: 15px; cursor: pointer; border: 0; }
.btn-primary { background: var(--p); color: #fff; }
.btn-primary:hover { background: var(--p2); color: #fff; }
.btn-danger { background: var(--p); color: #fff; }
.btn-danger:hover { background: var(--p2); color: #fff; }
.btn-plain { background: #fff; color: var(--p); border: 1px solid var(--p); }
.btn-plain:hover { background: var(--p3); color: var(--p); }
.btn-gray { background: #fff; color: #666; border: 1px solid #e4e4e4; }
.btn-gray:hover { background: #f7f7f7; }
.btn-sm { padding: 7px 14px; font-size: 13px; border-radius: 16px; display: inline-block; }
.detail-body { background: var(--card); border-radius: 10px; padding: 20px; }
.detail-body h3 { font-size: 16px; margin-bottom: 12px; }
.detail-body h3 i { font-style: normal; color: var(--p); margin-right: 6px; }
.form-box { max-width: 420px; margin: 40px auto; background: var(--card); border-radius: 10px; padding: 32px; box-shadow: 0 4px 20px rgba(0,0,0,.05); }
.form-box h2 { text-align: center; margin-bottom: 22px; color: #222; }
.form-box .tip { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.form-row input { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; font-size: 14px; }
.form-row input:focus { border-color: var(--p); }
.form-row select { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; font-size: 14px; }
.form-row textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 11px 14px; font-size: 14px; min-height: 80px; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--p); }
.form-box .btn { width: 100%; margin-top: 8px; }
.link-btn { color: var(--p); font-size: 13px; }
.cart-page { background: var(--card); border-radius: 10px; }
.cart-head { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; font-size: 13px; color: #666; }
.cart-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
.cart-item:hover { background: var(--p3); }
.cart-item .ck { width: 20px; height: 20px; accent-color: var(--p); }
.cart-item .thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.cart-item .name { flex: 1; font-size: 14px; color: #333; }
.cart-item .name .sub { color: var(--muted); font-size: 12px; margin-top: 4px; }
.cart-item .price { color: var(--price); font-weight: 700; font-family: Arial; }
.cart-item .num-box { display: flex; align-items: center; border: 1px solid #e4e4e4; border-radius: 4px; }
.cart-item .num-box button { width: 28px; height: 28px; border: 0; background: #f7f7f7; cursor: pointer; font-size: 16px; }
.cart-item .num-box button:hover { color: var(--p); }
.cart-item .num-box input { width: 42px; text-align: center; border: 0; outline: 0; height: 28px; font-size: 14px; }
.cart-item .del { color: #aaa; cursor: pointer; padding: 6px; }
.cart-item .del:hover { color: var(--p); }
.cart-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px; flex-wrap: wrap; gap: 10px; }
.cart-foot .total b { color: var(--price); font-size: 22px; font-family: Arial; }
.order-confirm { background: var(--card); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.order-confirm h3 { font-size: 15px; margin-bottom: 12px; }
.order-confirm h3 i { font-style: normal; color: var(--p); margin-right: 6px; }
.order-confirm .addr { border: 1px dashed var(--line); border-radius: 8px; padding: 12px; font-size: 13px; color: #666; }
.order-confirm .addr b { color: #222; }
.pay-bar { display: flex; align-items: center; justify-content: space-between; background: var(--card); border-radius: 10px; padding: 16px; flex-wrap: wrap; gap: 10px; }
.pay-bar .total { font-size: 14px; color: #666; }
.pay-bar .total b { color: var(--price); font-size: 24px; font-family: Arial; }
.order-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.order-tabs a { background: var(--card); border-radius: 20px; padding: 8px 20px; font-size: 13px; color: #666; }
.order-tabs a.active { background: var(--p); color: #fff; }
.order-list { background: var(--card); border-radius: 10px; }
.order-item { border-bottom: 1px solid #f5f5f5; padding: 14px 16px; }
.order-item .head { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.order-item .goods { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.order-item .goods img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.order-item .goods .nm { font-size: 13px; color: #333; flex: 1; min-width: 140px; }
.order-item .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.order-item .foot .total { font-size: 14px; }
.order-item .foot .total b { color: var(--price); }
.order-item .ops { display: flex; gap: 8px; }
.order-item .ops a { font-size: 12.5px; padding: 6px 16px; border: 1px solid var(--line); border-radius: 16px; color: #555; }
.order-item .ops a.primary { border-color: var(--p); color: var(--p); }
.user-wrap { display: flex; gap: 14px; align-items: flex-start; }
.user-side { width: 200px; background: var(--card); border-radius: 10px; padding: 12px 0; flex-shrink: 0; }
.user-side a { display: block; padding: 12px 18px; font-size: 14px; color: #555; }
.user-side a.active, .user-side a:hover { color: var(--p); background: var(--p3); border-left: 3px solid var(--p); }
.user-main { flex: 1; background: var(--card); border-radius: 10px; padding: 20px; }
.user-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.user-stats a { background: var(--p3); border-radius: 10px; text-align: center; padding: 18px 8px; }
.user-stats a b { display: block; font-size: 22px; color: var(--p); font-family: Arial; }
.user-stats a span { font-size: 12px; color: #666; margin-top: 4px; }
.user-info-row { display: flex; padding: 12px 0; border-bottom: 1px dashed #f0f0f0; font-size: 14px; }
.user-info-row label { width: 110px; color: var(--muted); flex-shrink: 0; }
.coupon-card { display: flex; background: #fff; border: 1px dashed var(--p); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.coupon-card .left { width: 120px; background: var(--p3); color: var(--p); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.coupon-card .left b { font-size: 24px; font-family: Arial; }
.coupon-card .left span { font-size: 12px; }
.coupon-card .right { flex: 1; padding: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.coupon-card .right .nm { font-size: 14px; color: #333; }
.coupon-card .right .sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.empty { text-align: center; padding: 50px 20px; color: var(--muted); }
.empty .ico { font-size: 40px; margin-bottom: 10px; }
.pagination { display: flex; justify-content: center; gap: 6px; padding: 18px 0; }
.pagination a, .pagination span { padding: 7px 14px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: #555; }
.pagination a:hover, .pagination .cur { background: var(--p); border-color: var(--p); color: #fff; }
.goods-list-head { background: var(--card); border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.goods-list-head a { font-size: 13px; color: #666; padding: 6px 14px; border-radius: 16px; }
.goods-list-head a.active { background: var(--p); color: #fff; }
.shop-card { background: var(--card); border-radius: 10px; padding: 16px; margin-bottom: 12px; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.shop-card .logo { width: 56px; height: 56px; border-radius: 50%; background: var(--p); color: #fff; font-size: 24px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.shop-card .info { flex: 1; }
.shop-card .info h3 { font-size: 15px; color: #222; }
.shop-card .info p { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.muted { color: var(--muted); }

/* banner 手机示意图（复刻参考站） */
.m-phone { position: absolute; right: 60px; top: 50%; transform: translateY(-50%); width: 210px; height: 330px; background: #fff; border-radius: 24px; box-shadow: 0 18px 50px rgba(0,0,0,.25); padding: 14px 10px 10px; z-index: 3; }
.m-phone::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 44px; height: 5px; border-radius: 3px; background: #e4e4e4; }
.m-phone .ph-hd { display: flex; align-items: center; gap: 6px; padding: 4px 4px 10px; border-bottom: 1px solid #f2f2f2; }
.m-phone .ph-hd .bar { flex: 1; height: 10px; border-radius: 5px; background: #f0f0f0; }
.m-phone .ph-hd .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--p); }
.m-phone .ph-banner { height: 64px; border-radius: 10px; background: linear-gradient(120deg, #A74BFD, #c06cff); margin: 12px 0 0; position: relative; }
.m-phone .ph-banner b { position: absolute; left: 10px; top: 10px; color: #fff; font-size: 12px; }
.m-phone .ph-banner span { position: absolute; right: 10px; bottom: 10px; background: rgba(255,255,255,.9); color: var(--p); font-size: 9px; padding: 1px 6px; border-radius: 8px; }
.m-phone .ph-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.m-phone .ph-grid i { height: 46px; border-radius: 10px; background: var(--p3); }
.m-phone .ph-grid i:nth-child(2) { background: #fdf1e6; }
.m-phone .ph-grid i:nth-child(3) { background: #e6f7f0; }
.m-phone .ph-grid i:nth-child(4) { background: #e6f0fe; }
.m-phone .ph-grid i:nth-child(5) { background: #fde8f0; }
.m-phone .ph-grid i:nth-child(6) { background: #f5f0fe; }
.m-phone .ph-goods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.m-phone .ph-goods i { height: 56px; border-radius: 8px; background: #f7f7f7; }
.m-phone .ph-goods i:nth-child(2) { background: #fdf1e6; }
.m-phone .ph-goods i:nth-child(3) { background: #e6f7f0; }
.m-phone .ph-goods i:nth-child(4) { background: #e6f0fe; }
.m-phone .ph-tab { position: absolute; bottom: 8px; left: 10px; right: 10px; display: flex; justify-content: space-around; }
.m-phone .ph-tab i { width: 18px; height: 18px; border-radius: 5px; background: #e4e4e4; }
.m-phone .ph-tab i:first-child { background: var(--p); }
@media (max-width: 1400px) { .m-phone { right: 26px; transform: translateY(-50%) scale(.85); transform-origin: center; } }
@media (max-width: 1100px) { .m-phone { display: none; } }
@media (max-width: 768px) { .m-phone { display: none; } }

/* ============ 详情/购物车/个人中心 手机适配（末尾覆盖） ============ */
@media (max-width: 768px) {
    .detail-wrap { padding: 12px; gap: 12px; }
    .detail-cover { width: 100%; }
    .detail-cover img { width: 100%; }
    .detail-info h1 { font-size: 17px; }
    .buy-row .btn { min-width: 0; max-width: none; }
    .form-box { margin: 20px 12px; padding: 20px; }
    .user-wrap { flex-direction: column; }
    .user-side { width: 100%; display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
    .user-side a { padding: 8px 12px; white-space: nowrap; }
    .user-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .cart-item { padding: 10px; }
    .cart-item .thumb { width: 56px; height: 56px; }
    .coupon-card .left { width: 100px; }
    .shop-scroll { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 4px; }
    .shop-scroll .shop-card { flex: 0 0 200px; margin-bottom: 0; padding: 12px; }
}