/*!
 * VNcms Shop · 移动端独立主题（App 风格）
 * 仅移动端加载；核心购物/账户流程使用本套版式，未单独制作的页面回退 shop.css 响应式。
 */
:root {
    --m-brand: #4f46e5;
    --m-brand-2: #7c3aed;
    --m-price: #f43f5e;
    --m-text: #1f2430;
    --m-muted: #8a93a6;
    --m-line: #eceef3;
    --m-bg: #f3f4f8;
    --m-card: #ffffff;
    --m-ok: #10b981;
    --m-danger: #ef4444;
    --m-bar-h: 48px;
    --m-tab-h: 54px;
    --m-radius: 14px;
    --m-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--m-bg); color: var(--m-text); font: 14px/1.6 var(--m-font);
    -webkit-font-smoothing: antialiased; padding-bottom: calc(var(--m-tab-h) + env(safe-area-inset-bottom));
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; vertical-align: middle; display: block; }
button, input, textarea, select { font: inherit; color: inherit; outline: none; }
.m-wrap { padding: 12px; }
.m-muted { color: var(--m-muted); }

/* ---------- 顶部应用栏 ---------- */
.m-bar {
    position: sticky; top: 0; z-index: 50; height: var(--m-bar-h);
    display: flex; align-items: center; gap: 8px; padding: 0 10px;
    background: #fff; border-bottom: 1px solid var(--m-line);
    padding-top: env(safe-area-inset-top);
}
.m-bar-back {
    position: absolute; left: 4px; top: 0; bottom: 0;
    width: 34px; display: grid; place-items: center; line-height: 1;
    font-size: 26px; color: var(--m-text); z-index: 2;
}
.m-bar-title {
    position: absolute; left: 0; right: 0; top: 0; bottom: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px; font-weight: 600; padding: 0 44px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-bar-action {
    width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-size: 19px; color: var(--m-text);
}
.m-page { min-height: calc(100vh - var(--m-bar-h) - var(--m-tab-h)); }

.m-flash { margin: 10px 12px 0; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; }
.m-flash.is-ok { background: #ecfdf5; color: #047857; }
.m-flash.is-err { background: #fef2f2; color: #b91c1c; }

/* ---------- 搜索 ---------- */
.m-search { padding: 12px; }
.m-search form { display: flex; height: 42px; background: #fff; border: 1px solid var(--m-line); border-radius: 22px; overflow: hidden; }
.m-search input { flex: 1; border: 0; background: transparent; padding: 0 16px; font-size: 14px; }
.m-search button { border: 0; width: 64px; background: linear-gradient(135deg, var(--m-brand), var(--m-brand-2)); color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.m-ico { display: block; }

/* ---------- 区块 ---------- */
.m-sec { margin-top: 6px; }
.m-sec-h { display: flex; align-items: center; padding: 14px 12px 8px; font-size: 16px; font-weight: 700; }
.m-sec-h a { margin-left: auto; font-size: 13px; font-weight: 400; color: var(--m-brand); }
.m-sec-h::before { content: ''; width: 4px; height: 15px; border-radius: 3px; background: linear-gradient(var(--m-brand), var(--m-brand-2)); margin-right: 8px; }

/* ---------- 两列网格 / 商品卡 ---------- */
.m-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 12px; }
.m-card { background: var(--m-card); border-radius: var(--m-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 4px rgba(15,23,42,.05); }
.m-card-cover { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.m-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.m-card-ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--m-brand), var(--m-brand-2) 60%, #06b6d4); }
.m-card-tag { position: absolute; top: 7px; left: 7px; font-size: 10.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; color: #fff; background: rgba(16,185,129,.94); }
.m-card-tag.is-service { left: auto; right: 7px; background: rgba(79,70,229,.94); }
.m-card-body { padding: 9px 10px 11px; display: flex; flex-direction: column; flex: 1; }
.m-card-title { font-size: 13.5px; line-height: 1.4; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.m-card-price { display: flex; align-items: baseline; gap: 5px; margin-top: auto; padding-top: 6px; }
.m-card-price b { color: var(--m-price); font-size: 16px; }
.m-card-price del { color: #b6bdca; font-size: 11px; }
.m-card-sold { font-size: 11px; color: var(--m-muted); margin-top: 2px; }

/* ---------- 分类宫格 ---------- */
.m-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 12px; }
.m-cat-card { background: var(--m-card); border-radius: 12px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 1px 4px rgba(15,23,42,.05); }
.m-cat-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 19px; }
.m-cat-card b { font-size: 12.5px; }

/* ---------- 横向 chips（分类 / 排序） ---------- */
.m-chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m-chips::-webkit-scrollbar { display: none; }
.m-chip { flex: none; padding: 7px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--m-line); font-size: 13px; color: #5b6478; white-space: nowrap; }
.m-chip.on { background: linear-gradient(135deg, var(--m-brand), var(--m-brand-2)); color: #fff; border-color: transparent; }

/* ---------- 按钮 ---------- */
.m-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--m-brand); color: #fff; font-size: 15px; font-weight: 600; }
.m-btn.primary { background: linear-gradient(135deg, var(--m-brand), var(--m-brand-2)); }
.m-btn.ghost { background: #fff; border: 1px solid var(--m-line); color: var(--m-text); }
.m-btn.block { width: 100%; }
.m-btn.lg { height: 48px; font-size: 16px; }
.m-btn[disabled], .m-btn.disabled { opacity: .5; pointer-events: none; }

/* ---------- 表单 ---------- */
.m-form { padding: 16px 12px; }
.m-form-item { margin-bottom: 14px; }
.m-form-item label { display: block; font-size: 13px; color: #5b6478; margin-bottom: 7px; }
.m-form-item label .m-req { color: var(--m-danger); }
.m-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--m-line); border-radius: 12px; background: #fff; font-size: 15px; }
textarea.m-input { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; }
.m-input:focus { border-color: var(--m-brand); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
.m-tip { font-size: 12.5px; color: var(--m-muted); margin-top: 6px; }
.m-tip a { color: var(--m-brand); }
.m-code-row { display: flex; gap: 10px; }
.m-code-row .m-input { flex: 1; letter-spacing: 3px; }
.m-code-btn { flex: none; min-width: 110px; height: 46px; border: 1px solid var(--m-brand); border-radius: 12px; background: #fff; color: var(--m-brand); font-size: 13.5px; }
.m-code-btn[disabled] { opacity: .5; }

/* ---------- 底部导航 ---------- */
.m-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; height: calc(var(--m-tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--m-line); display: flex; }
.m-tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #9aa3b5; font-size: 11px; }
.m-tabbar a span { font-size: 20px; line-height: 1; }
.m-tabbar a.on { color: var(--m-brand); }
.m-footnote { text-align: center; font-size: 11.5px; color: #b6bdca; padding: 18px 12px 8px; }
.m-footnote a { color: var(--m-brand); }

/* ---------- 详情页 ---------- */
.m-detail-img { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, #eef2ff, #e0e7ff); }
.m-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.m-detail-box { background: #fff; padding: 14px 14px 18px; margin-top: 1px; }
.m-detail-title { font-size: 17px; line-height: 1.4; font-weight: 700; }
.m-detail-sub { color: var(--m-muted); font-size: 13px; margin-top: 6px; }
.m-detail-price { display: flex; align-items: baseline; gap: 6px; margin: 14px 0 10px; color: var(--m-price); }
.m-detail-price span { font-size: 15px; font-weight: 600; }
.m-detail-price b { font-size: 30px; letter-spacing: -.5px; }
.m-detail-price del { color: #b6bdca; font-size: 13px; margin-left: 4px; }
.m-flags { display: flex; gap: 6px; flex-wrap: wrap; }
.m-flag { background: #f3f0ff; color: var(--m-brand); font-size: 11.5px; padding: 3px 9px; border-radius: 6px; }
.m-flag.is-auto { background: #ecfdf5; color: #059669; }
.m-panel { background: #fff; margin-top: 10px; padding: 14px; }
.m-panel-h { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.m-spec-group { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.m-spec-name { flex: none; width: 56px; color: var(--m-muted); font-size: 13px; padding-top: 8px; }
.m-spec-opt { border: 1px solid var(--m-line); background: #fff; border-radius: 9px; padding: 7px 15px; font-size: 14px; }
.m-spec-opt.on { border-color: var(--m-brand); background: #eef2ff; color: var(--m-brand); font-weight: 600; }
.m-qty { display: flex; align-items: center; gap: 0; border: 1px solid var(--m-line); border-radius: 9px; overflow: hidden; width: max-content; }
.m-qty button { width: 40px; height: 40px; border: 0; background: #f8fafc; font-size: 18px; color: #475569; }
.m-qty input { width: 56px; height: 40px; border: 0; border-left: 1px solid var(--m-line); border-right: 1px solid var(--m-line); text-align: center; font-size: 15px; }
.m-desc { background: #fff; margin-top: 10px; padding: 14px; font-size: 14px; line-height: 1.8; color: #374151; overflow-wrap: break-word; word-break: break-word; }
.m-desc img { border-radius: 8px; margin: 8px 0; max-width: 100%; }
.m-desc table { width: 100% !important; max-width: 100%; border-collapse: collapse; }
.m-desc td, .m-desc th { border: 1px solid var(--m-line); padding: 6px 8px; }
.m-desc video, .m-desc iframe { max-width: 100%; }
.m-desc h1, .m-desc h2, .m-desc h3 { font-size: 16px; margin: 10px 0 6px; }
.m-desc ul, .m-desc ol { padding-left: 22px; }

/* 吸底购买栏 */
.m-buybar { position: fixed; left: 0; right: 0; bottom: calc(var(--m-tab-h) + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: 12px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--m-line); box-shadow: 0 -4px 16px rgba(15,23,42,.06); }
.m-buybar-price { flex: 1; display: flex; align-items: baseline; gap: 2px; color: var(--m-price); }
.m-buybar-price span { font-size: 13px; font-weight: 600; }
.m-buybar-price b { font-size: 22px; }
.m-buybar .m-btn { flex: none; height: 46px; padding: 0 34px; }

/* ---------- 结算页 ---------- */
.m-co-goods { position: relative; display: flex; gap: 12px; background: #fff; padding: 14px; align-items: center; }
.m-co-goods img, .m-co-goods .m-card-ph { width: 64px; height: 64px; border-radius: 10px; flex: none; position: relative; }
.m-co-info { flex: 1; min-width: 0; }
.m-co-info b { font-size: 14.5px; display: block; }
.m-co-info span { font-size: 12.5px; color: var(--m-muted); }
.m-co-price { color: var(--m-price); font-weight: 700; }
.m-sum-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--m-muted); padding: 8px 0; }
.m-sum-row b { color: var(--m-text); }
.m-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px dashed var(--m-line); }
.m-sum-total b { color: var(--m-price); font-size: 22px; }
.m-subbar { position: fixed; left: 0; right: 0; bottom: calc(var(--m-tab-h) + env(safe-area-inset-bottom)); z-index: 55; display: flex; align-items: center; gap: 12px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--m-line); box-shadow: 0 -4px 16px rgba(15,23,42,.06); }
.m-subbar .m-sum-total { flex: 1; border: 0; padding: 0; }
.m-subbar .m-btn { flex: none; height: 46px; padding: 0 34px; }
.m-buybar ~ .m-footnote, .m-subbar ~ .m-footnote { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

/* ---------- 认证页 ---------- */
.m-auth { padding: 22px 16px; }
.m-auth-tabs { display: flex; gap: 6px; background: #eceef3; padding: 5px; border-radius: 12px; margin-bottom: 20px; }
.m-auth-tabs a { flex: 1; text-align: center; padding: 10px; border-radius: 9px; font-size: 15px; color: #5b6478; }
.m-auth-tabs a.on { background: #fff; color: var(--m-brand); font-weight: 600; box-shadow: 0 1px 4px rgba(15,23,42,.08); }
.m-alert { padding: 11px 14px; border-radius: 10px; font-size: 13.5px; margin-bottom: 14px; }
.m-alert.is-err { background: #fef2f2; color: #b91c1c; }
.m-alert.is-ok { background: #ecfdf5; color: #047857; }
.m-alert.is-warn { background: #fffbeb; color: #92400e; }
.m-auth-foot { text-align: center; font-size: 13px; color: var(--m-muted); margin-top: 16px; }
.m-auth-foot a { color: var(--m-brand); }
.m-auth-demo { text-align: center; font-size: 12px; color: #b6bdca; margin-top: 10px; }

/* ---------- 会员中心 ---------- */
.m-user { background: linear-gradient(150deg, #1e1b4b, #4f46e5); color: #fff; padding: calc(20px + env(safe-area-inset-top)) 16px 20px; }
.m-user-top { display: flex; align-items: center; gap: 12px; }
.m-user-avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.m-user-top b { font-size: 17px; display: block; }
.m-user-top em { font-style: normal; font-size: 12.5px; opacity: .75; }
.m-user-bal { display: flex; align-items: baseline; gap: 6px; margin-top: 16px; }
.m-user-bal span { font-size: 12.5px; opacity: .75; }
.m-user-bal b { font-size: 26px; }
.m-user-actions { display: flex; gap: 10px; margin-top: 14px; }
.m-user-actions a { flex: 1; text-align: center; padding: 9px; border-radius: 10px; background: rgba(255,255,255,.14); font-size: 13px; }
.m-menu { background: #fff; margin-top: 12px; border-radius: var(--m-radius); overflow: hidden; }
.m-menu a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--m-line); font-size: 14.5px; }
.m-menu a:last-child { border-bottom: 0; }
.m-menu a .mi { font-size: 18px; color: var(--m-brand); }
.m-menu a .mt { flex: 1; }
.m-menu a .ma { color: var(--m-muted); font-size: 13px; }

/* ---------- 订单 / 查询 ---------- */
.m-order-status { background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; padding: 20px 16px; display: flex; align-items: center; gap: 14px; }
.m-order-status .ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 22px; flex: none; }
.m-order-status h2 { font-size: 18px; }
.m-order-status p { font-size: 13px; opacity: .85; }
.m-card-s { background: #fff; margin-top: 10px; border-radius: var(--m-radius); padding: 14px; }
.m-kv { display: grid; grid-template-columns: 80px 1fr; gap: 8px 10px; font-size: 13.5px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--m-line); }
.m-kv dt { color: var(--m-muted); }
.m-deliver { margin-top: 12px; background: #f0fdf4; border: 1px dashed #a7f3d0; border-radius: 10px; padding: 12px; }
.m-deliver h3 { font-size: 14px; color: #047857; margin-bottom: 8px; }
.m-deliver pre { white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.8; color: #065f46; background: #fff; border-radius: 8px; padding: 10px; border: 1px solid #bbf7d0; }

/* ---------- 空态 ---------- */
.m-empty { text-align: center; color: var(--m-muted); padding: 60px 20px; }
.m-empty .mi { font-size: 44px; display: block; margin-bottom: 10px; opacity: .5; }
.m-empty a { color: var(--m-brand); }

/* ---------- 分页 ---------- */
.m-pager { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 16px 12px 4px; }
.m-pager a, .m-pager span { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border-radius: 9px; background: #fff; border: 1px solid var(--m-line); font-size: 13px; }
.m-pager a.on { background: linear-gradient(135deg, var(--m-brand), var(--m-brand-2)); color: #fff; border-color: transparent; }
.m-pager .disabled { color: #cbd5e1; }

/* ---------- 公告 ---------- */
.m-notice { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; margin: 12px; padding: 9px 12px; font-size: 12.5px; color: #475569; overflow: hidden; }
.m-notice b { flex: none; background: linear-gradient(135deg, #f43f5e, #fb7185); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 5px; }