/* 万商集前台样式 —— 模板包自带，改完刷新即生效，不需要任何构建 */

:root {
    --primary: #c8452d;
    --text: #1a1a1a;
    --sub: #8a8a8a;
    --line: #ebebeb;
    --bg: #f6f7f9;
    --radius: 10px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font: 14px/1.65 -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--text);
    background: var(--bg);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

.wrap {
    width: 1200px;
    max-width: calc(100% - 40px);
    margin: 0 auto;
}

/* ---------- 头部 ---------- */
.site-head {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 20;
}

.head-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 72px;
}

.logo { display: flex; align-items: center; gap: 10px; flex: none; }

.logo-mark {
    width: 36px; height: 36px; line-height: 36px;
    text-align: center;
    border-radius: 9px;
    background: var(--primary);
    color: #fff;
    font-weight: 700;
}

.logo-text { display: flex; flex-direction: column; font-weight: 700; font-size: 16px; }
.logo-text small { font-weight: 400; font-size: 11px; color: var(--sub); }

.search { flex: 1; display: flex; max-width: 520px; }
.search input {
    flex: 1; height: 40px; padding: 0 14px;
    border: 2px solid var(--primary); border-right: 0;
    border-radius: 20px 0 0 20px;
    outline: none; font-size: 14px;
}
.search button {
    width: 88px; height: 40px;
    background: var(--primary); color: #fff;
    border-radius: 0 20px 20px 0;
    font-size: 14px;
}

.head-nav { display: flex; gap: 20px; color: var(--sub); flex: none; }
.head-nav a:hover { color: var(--primary); }

/* ---------- 分类 ---------- */
.cats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    background: #fff;
    border-radius: var(--radius);
    padding: 18px 12px;
    margin: 20px 0;
}

/* 分类条要能自适应：分类只有 3 个时也不能在右边留一大块白 */
.cat {
    flex: 1 1 88px; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 8px 0; border-radius: 8px; font-size: 13px;
}
.cat:hover { background: #fdf5f3; color: var(--primary); }
.cat b {
    width: 42px; height: 42px; line-height: 42px;
    text-align: center; border-radius: 50%;
    background: #fdf5f3; color: var(--primary);
    font-size: 17px; font-weight: 600;
}

/* ---------- 区块 ---------- */
.block { margin-bottom: 32px; }

.block-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 8px 0 14px;
}
.block-head h2 { font-size: 21px; font-weight: 700; }
.block-head a { color: var(--sub); font-size: 13px; }
.block-head a:hover { color: var(--primary); }

/* ---------- 商品卡 ---------- */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }

.thumb { position: relative; display: block; line-height: 0; }
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; background: #f0f0f0; }

/* 活动角标/边框：叠在图上，不吃点击。位置口径和详情页一致（1 左上 … 6 整图） */
.thumb .frame {
    position: absolute; z-index: 2; height: auto; object-fit: contain; pointer-events: none;
    /* 角标必须透明底：.thumb img 给商品图垫了 #f0f0f0，img 自身的背景画在内容下面、兄弟元素上面，
       不吃这条的话整块糊成灰白板，透明 PNG 只剩一圈边框（2026-11-03） */
    background: transparent;
}
.thumb .frame.pos-1 { left: 8px; top: 8px; }
.thumb .frame.pos-2 { right: 8px; top: 8px; }
.thumb .frame.pos-3 { left: 8px; bottom: 8px; }
.thumb .frame.pos-4 { right: 8px; bottom: 8px; }
.thumb .frame.pos-5 { left: 50%; top: 8px; transform: translateX(-50%); }
.thumb .frame.pos-6 { left: 0; top: 0; width: 100% !important; height: 100%; object-fit: fill; }

/* 商品卡上的标签（新品 / 秒杀 / 包邮…）：颜色由后台标签配置决定 */
.card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ctag {
    padding: 0 5px; border: 1px solid currentColor; border-radius: 3px;
    font-size: 11px; line-height: 1.6;
}
.price .qi { font-style: normal; color: var(--primary); font-size: 12px; margin-left: -2px; }

.card .body { padding: 12px 14px 14px; }

.title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; height: 44px; font-size: 13.5px; line-height: 22px;
}
.title:hover { color: var(--primary); }

.sub {
    color: var(--sub); font-size: 12px; height: 20px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    margin-top: 4px;
}

.price { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.price b { color: var(--primary); font-size: 20px; }
.price b::first-letter { font-size: 13px; }
.price s { color: #bbb; font-size: 12px; }

.meta {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 10px; color: var(--sub); font-size: 12px;
}
.meta button {
    padding: 5px 12px; border-radius: 14px;
    background: #fdf5f3; color: var(--primary);
    font-size: 12px;
}
.meta button:hover { background: var(--primary); color: #fff; }

/* ---------- 底部 ---------- */
.site-foot {
    border-top: 1px solid var(--line);
    background: #fff;
    margin-top: 40px;
    padding: 32px 0;
    color: var(--sub);
    font-size: 13px;
}
.foot-links { display: flex; gap: 20px; margin-bottom: 12px; }
.foot-links a:hover { color: var(--primary); }

@media (max-width: 900px) {
    .cats { grid-template-columns: repeat(5, 1fr); }
    .grid { grid-template-columns: repeat(2, 1fr); }
    .head-inner { flex-wrap: wrap; height: auto; padding: 12px 0; gap: 12px; }
    .head-nav { display: none; }
}

/* ---------- 面包屑 ---------- */
.crumb { display: flex; gap: 8px; align-items: center; color: var(--sub); font-size: 13px; padding: 16px 0; }
.crumb a:hover { color: var(--primary); }

/* ---------- 筛选条 ---------- */
.filter-bar { background: #fff; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 16px; }
.filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-row label { color: var(--sub); font-size: 13px; margin-right: 4px; }
.chip {
    padding: 5px 14px; border-radius: 15px; font-size: 13px;
    background: #f5f5f7; color: #444;
}
.chip:hover { color: var(--primary); }
.chip.on { background: var(--primary); color: #fff; }

/* ---------- 详情页 ---------- */
.detail {
    display: grid; grid-template-columns: 460px 1fr; gap: 32px;
    background: #fff; border-radius: var(--radius); padding: 26px; margin-bottom: 20px;
}
.main-img { position: relative; }
.main-img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: #f7f7f7; display: block; }
.thumbs { display: flex; gap: 8px; margin-top: 10px; }
.thumbs .thumb-btn {
    padding: 0; border: 1px solid var(--line); border-radius: 6px;
    background: #fff; line-height: 0; cursor: pointer; overflow: hidden;
}
.thumbs .thumb-btn img { width: 72px; height: 72px; object-fit: cover; display: block; }
.thumbs .thumb-btn.on { border-color: var(--primary); }

.info h1 { font-size: 22px; line-height: 1.45; font-weight: 700; }
.info .sub { color: var(--sub); margin-top: 8px; font-size: 13.5px; }

.price-box {
    background: #fdf5f3; border-radius: 8px; padding: 16px 18px; margin: 18px 0;
    display: flex; align-items: baseline; gap: 14px;
}
.price-now { color: var(--primary); font-size: 34px; font-weight: 700; line-height: 1; }
.price-now i { font-size: 17px; font-style: normal; margin-right: 2px; }
.price-old { color: var(--sub); font-size: 13px; }
.price-old s { color: #bbb; }

.meta-list, .attrs { display: grid; grid-template-columns: 60px 1fr; gap: 10px 12px; font-size: 13.5px; margin-bottom: 14px; }
.meta-list dt, .attrs dt { color: var(--sub); }
.meta-list dd, .attrs dd { color: var(--text); }

/* ---------- 规格选择 ---------- */
.specs { margin: 4px 0 16px; }
.spec-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.spec-label { width: 60px; color: var(--sub); font-size: 13.5px; flex: none; }
.spec-opt {
    padding: 6px 16px; border: 1px solid var(--line); border-radius: 15px;
    background: #fff; color: #444; font-size: 13px;
}
.spec-opt:hover { border-color: var(--primary); color: var(--primary); }
.spec-opt.on { border-color: var(--primary); background: #fdf5f3; color: var(--primary); }

.buy-bar { display: flex; gap: 12px; margin-top: 22px; align-items: center; }
.qty { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.qty button { width: 38px; height: 42px; background: #fafafa; color: #666; font-size: 16px; }
.qty input { width: 52px; height: 42px; text-align: center; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); outline: none; }
.btn-cart {
    height: 42px; padding: 0 34px; border-radius: 21px;
    background: var(--primary); color: #fff; font-size: 15px; font-weight: 500;
}
.btn-cart:hover { opacity: .9; }

/* 立即购买：和加购拉开层级，主按钮实心、次按钮描边 */
.btn-buy {
    height: 42px; padding: 0 34px; border-radius: 21px;
    background: #fff; color: var(--primary); border: 1px solid var(--primary);
    font-size: 15px; font-weight: 500;
}
.btn-buy:hover { background: #fdf5f3; }

/* 服务承诺：把详情页右侧信息栏的空档填掉，也是电商该有的信息 */
.promise { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.promise span { color: var(--sub); font-size: 12.5px; position: relative; padding-left: 14px; }
.promise span::before { content: "✓"; position: absolute; left: 0; color: var(--primary); }

.thumbs img { cursor: pointer; transition: border-color .15s; }
.thumbs img.on { border-color: var(--primary); }

/* 排序条右侧的件数 */
.filter-row .count { margin-left: auto; color: var(--sub); font-size: 13px; }

/* 轻提示：替代 alert，不打断操作 */
.toast {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96);
    background: rgba(0,0,0,.78); color: #fff; font-size: 14px;
    padding: 10px 20px; border-radius: 8px; z-index: 9999;
    opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.detail-body .rich { background: #fff; border-radius: var(--radius); padding: 26px; line-height: 1.9; }
.detail-body .rich img { margin: 12px 0; border-radius: 6px; }
.detail-body .rich h3 { margin: 18px 0 10px; font-size: 17px; }
.detail-body .rich p { margin: 10px 0; color: #333; }

/* ---------- 空状态 ---------- */
.empty { background: #fff; border-radius: var(--radius); padding: 80px 20px; text-align: center; }
.empty h1 { font-size: 22px; margin-bottom: 10px; }
.empty p { color: var(--sub); margin-bottom: 20px; }
.empty a { display: inline-block; padding: 9px 26px; border-radius: 20px; background: var(--primary); color: #fff; }

@media (max-width: 900px) {
    .detail { grid-template-columns: 1fr; gap: 20px; padding: 18px; }
}

/* ==================== 通用页面骨架 ==================== */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 24px 0 16px; }
.page-head h1 { font-size: 22px; font-weight: 700; }
.page-head .desc { color: var(--sub); font-size: 13px; margin-top: 6px; }
.page-head .more { font-size: 13px; color: var(--sub); }
.page-head .more:hover { color: var(--primary); }

.panel { background: #fff; border-radius: var(--radius); padding: 22px; }
.panel + .panel { margin-top: 16px; }
.panel h2 { font-size: 17px; font-weight: 700; margin-bottom: 16px; }

/* 两栏：左侧会员菜单 + 右侧内容 */
.layout-2col { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }
.side-menu { background: #fff; border-radius: var(--radius); padding: 10px 0; position: sticky; top: 16px; }
.side-menu a { display: flex; align-items: center; gap: 9px; padding: 11px 20px; font-size: 14px; color: #444; border-left: 3px solid transparent; }
.side-menu a:hover { background: #fafafa; color: var(--primary); }
.side-menu a.on { background: #fff6f3; color: var(--primary); border-left-color: var(--primary); font-weight: 500; }
.side-menu .grp { padding: 14px 20px 6px; font-size: 12px; color: #aaa; }

/* 标签页 */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 18px; flex-wrap: wrap; }
.tabs a { padding: 10px 16px; font-size: 14px; color: #555; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--primary); }
.tabs a.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

/* 信息行 / 数据行 */
.rows { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; }
.row .t { font-size: 14.5px; font-weight: 500; }
.row .s { font-size: 12.5px; color: var(--sub); margin-top: 4px; }
.row .n { font-size: 15px; color: var(--primary); font-weight: 600; }

/* 缩略图行（订单、收藏、浏览记录） */
.thumb-row { display: flex; gap: 13px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.thumb-row:last-child { border-bottom: 0; }
.thumb-row img { width: 76px; height: 76px; object-fit: cover; border-radius: 7px; background: #f6f6f6; flex: none; }
.thumb-row .grow { flex: 1; min-width: 0; }
.thumb-row .t { font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.thumb-row .s { font-size: 12.5px; color: var(--sub); margin-top: 5px; }

/* 徽标 */
.badge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 12px; background: #f2f2f5; color: #666; }
.badge.red { background: #fdecec; color: #d93025; }
.badge.green { background: #e8f6ec; color: #1a7f37; }
.badge.orange { background: #fff2e5; color: #c2410c; }
.badge.gray { background: #f2f2f5; color: #888; }

/* 空状态 */
.blank { text-align: center; padding: 60px 20px; color: var(--sub); }
.blank .ico { font-size: 34px; opacity: .25; margin-bottom: 12px; }
.blank a { color: var(--primary); }

/* 分页 */
.pager { display: flex; gap: 7px; justify-content: center; padding: 26px 0 6px; flex-wrap: wrap; }
.pager a, .pager span { min-width: 36px; height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: #fff; font-size: 13.5px; color: #444; }
.pager a:hover { color: var(--primary); }
.pager .on { background: var(--primary); color: #fff; }
.pager .dots { background: transparent; color: #bbb; }
.pager .off { color: #ccc; }

/* 表单 */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; color: var(--sub); }
.field input, .field textarea, .field select {
    border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px;
    font-size: 14px; background: #fff; outline: none; font-family: inherit;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--primary); }
.field textarea { min-height: 96px; resize: vertical; }
.btn-line { border: 1px solid var(--line); border-radius: 8px; padding: 9px 20px; font-size: 14px; color: #444; background: #fff; }
.btn-line:hover { border-color: var(--primary); color: var(--primary); }

/* 统计数字卡 */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat { background: #fff; border-radius: var(--radius); padding: 18px 20px; }
.stat .k { font-size: 12.5px; color: var(--sub); }
.stat .v { font-size: 24px; font-weight: 700; margin-top: 8px; }
.stat .v small { font-size: 13px; font-weight: 400; color: var(--sub); margin-left: 3px; }

/* 文章 / 富文本正文 */
.prose { background: #fff; border-radius: var(--radius); padding: 30px 34px; line-height: 1.95; font-size: 15px; color: #333; }
.prose h1 { font-size: 24px; font-weight: 700; margin-bottom: 10px; line-height: 1.4; }
.prose .meta { color: var(--sub); font-size: 12.5px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.prose img { max-width: 100%; height: auto; border-radius: 6px; margin: 14px 0; }
.prose p { margin: 12px 0; }
.prose h2 { font-size: 19px; margin: 22px 0 12px; }
.prose h3 { font-size: 16px; margin: 18px 0 10px; }
.prose ul, .prose ol { padding-left: 22px; margin: 12px 0; }
.prose li { list-style: disc; margin: 6px 0; }

/* 文章卡片 */
.article-list { display: grid; gap: 14px; }
.article-card { display: flex; gap: 16px; background: #fff; border-radius: var(--radius); padding: 16px; }
.article-card img { width: 168px; height: 112px; object-fit: cover; border-radius: 8px; flex: none; background: #f6f6f6; }
.article-card .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.article-card h3 { font-size: 16px; font-weight: 600; line-height: 1.5; }
.article-card h3:hover { color: var(--primary); }
.article-card p { color: var(--sub); font-size: 13px; line-height: 1.7; margin-top: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .foot { margin-top: auto; padding-top: 10px; color: #aaa; font-size: 12px; display: flex; gap: 14px; }

@media (max-width: 900px) {
    .layout-2col { grid-template-columns: 1fr; }
    .side-menu { position: static; display: flex; overflow-x: auto; padding: 6px; }
    .side-menu a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
    .side-menu a.on { border-left: 0; border-bottom-color: var(--primary); }
    .side-menu .grp { display: none; }
    .form-grid, .stats { grid-template-columns: 1fr 1fr; }
    .article-card img { width: 108px; height: 82px; }
}

/* ==================== 头部用户区 / 二级导航 ==================== */
.head-user { display: flex; align-items: center; gap: 14px; flex: none; font-size: 13.5px; color: #555; }
.head-user a:hover { color: var(--primary); }
.head-user .hu-name { font-weight: 600; color: var(--text); max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.head-user .hu-reg { border: 1px solid var(--line); border-radius: 14px; padding: 3px 13px; }

/* 购物车：图标 + 文字 + 件数气泡。
   气泡压在「购物车」右上角，白描边是为了在任何底色上都不糊成一团。 */
.head-user .hu-cart { position: relative; display: inline-flex; align-items: center; gap: 4px; margin-right: 7px; }
.head-user .hu-cart .cart-ico { width: 16px; height: 16px; flex: none; color: var(--sub); transition: color .15s; }
.head-user .hu-cart:hover .cart-ico { color: var(--primary); }
.cart-badge {
    position: absolute; top: -7px; right: -10px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: grid; place-items: center;
    border: 2px solid #fff; border-radius: 8px;
    background: var(--primary); color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 3px rgba(200, 69, 45, .35);
    pointer-events: none;
}

/* 数字变了弹一下：加购时有个「收到了」的反馈，比数字默默跳一下更容易被看见 */
.cart-badge.bump { animation: cart-bump .32s ease; }
@keyframes cart-bump {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .cart-badge.bump { animation: none; }
}

.site-bar { background: #fff; border-bottom: 1px solid var(--line); }
.bar-inner { display: flex; gap: 4px; overflow-x: auto; }
.bar-inner a { padding: 11px 15px; font-size: 13.5px; color: #555; white-space: nowrap; border-bottom: 2px solid transparent; }
.bar-inner a:hover { color: var(--primary); }
.bar-inner a.on { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

/* ==================== 页脚 ==================== */
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 30px 0 22px; border-bottom: 1px solid #2a2a2a; }
.foot-cols .fc { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.foot-cols h4 { font-size: 13.5px; font-weight: 600; color: #ddd; margin-bottom: 4px; }
.foot-cols a { color: #999; }
.foot-cols a:hover { color: #fff; }
.foot-cols .tel { font-size: 20px; font-weight: 700; color: #fff; }
.foot-cols .time { color: #888; font-size: 12.5px; }
.foot-bottom { padding: 18px 0 26px; font-size: 12.5px; color: #888; }
.foot-bottom .copy { color: #666; margin-top: 6px; }

@media (max-width: 900px) {
    .head-user .hu-link { display: none; }
    .head-user .hu-name, .head-user .hu-reg { display: inline; }
    .foot-cols { grid-template-columns: 1fr 1fr; }
}

/* 页脚深色底：覆盖前面白底定义，放在最后保证优先级 */
.site-foot {
    background: #1c1c1e;
    color: #999;
    border-top: 0;
    margin-top: 48px;
    padding: 0 0 6px;
}

/* ==================== 店铺 ==================== */
.shop-head { display: flex; gap: 18px; align-items: center; background: #fff; border-radius: var(--radius); padding: 24px; margin-top: 18px; }
.shop-logo {
    width: 76px; height: 76px; flex: none; border-radius: 14px;
    background: linear-gradient(135deg, #c8452d, #e8735a);
    color: #fff; font-size: 30px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.shop-logo.sm { width: 52px; height: 52px; font-size: 21px; border-radius: 11px; }
.shop-info h1 { font-size: 20px; font-weight: 700; }
.shop-meta { display: flex; gap: 7px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.shop-sub { color: var(--sub); font-size: 13px; margin-top: 7px; }

.street-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.shop-card { display: flex; gap: 14px; align-items: center; background: #fff; border-radius: var(--radius); padding: 18px; transition: box-shadow .18s, transform .18s; }
.shop-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.shop-card .grow { flex: 1; min-width: 0; }
.shop-card .t { font-size: 15.5px; font-weight: 600; }
.shop-card .s { font-size: 12.5px; color: var(--sub); margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) { .street-grid { grid-template-columns: 1fr; } }

/* ==================== 营销通用 ==================== */
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mk-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid.c4 { grid-template-columns: repeat(4, 1fr); }

.mk-card { background: #fff; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s, transform .18s; }
.mk-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.mk-card .pic { aspect-ratio: 1; background: #f7f7f7; }
.mk-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.mk-card .body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.mk-card .ttl { font-size: 14.5px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-card .sub { font-size: 12.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-card .pr { display: flex; align-items: baseline; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.mk-card .pr b { color: var(--primary); font-size: 19px; font-weight: 700; }
.mk-card .pr s { color: #bbb; font-size: 12.5px; }
.mk-card .act { margin-top: 9px; }

.btn-sm { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 18px; border-radius: 16px; background: var(--primary); color: #fff; font-size: 13px; }
.btn-sm:hover { opacity: .9; }
.btn-sm.ghost { background: #fff5f2; color: var(--primary); }
.btn-sm.gray { background: #f2f2f5; color: #999; cursor: default; }

/* 优惠券 */
.coupon-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.coupon {
    display: flex; background: #fff; border-radius: var(--radius); overflow: hidden; position: relative;
}
.coupon .left {
    width: 118px; flex: none; background: linear-gradient(160deg, #c8452d, #e8735a);
    color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 18px 8px;
}
.coupon .left .v { font-size: 26px; font-weight: 700; line-height: 1; }
.coupon .left .v small { font-size: 14px; }
.coupon .left .t { font-size: 11.5px; opacity: .85; }
.coupon .right { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.coupon .right .nm { font-size: 14.5px; font-weight: 600; }
.coupon .right .ds { font-size: 12px; color: var(--sub); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px; }
.coupon .right .bt { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.coupon .right .bt .lf { font-size: 11.5px; color: #bbb; }
.coupon.off { opacity: .55; }
.coupon.off .left { background: #c4c4c4; }

/* 秒杀场次 */
.sk-session { background: #fff; border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px; }
.sk-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sk-head h2 { font-size: 17px; font-weight: 700; }
.sk-head .time { color: var(--sub); font-size: 13px; }
.sk-items { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sk-item { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.sk-item .pic { aspect-ratio: 1; background: #f7f7f7; }
.sk-item .pic img { width: 100%; height: 100%; object-fit: cover; }
.sk-item .in { padding: 10px 11px; }
.sk-item .ttl { font-size: 13px; line-height: 1.4; height: 36px; overflow: hidden; }
.sk-item .pr { color: var(--primary); font-weight: 700; font-size: 16px; margin-top: 5px; }
.sk-item .pr s { color: #bbb; font-size: 11.5px; font-weight: 400; margin-left: 5px; }
.sk-item .bar { height: 5px; background: #f0f0f0; border-radius: 3px; margin-top: 8px; overflow: hidden; }
.sk-item .bar i { display: block; height: 100%; background: var(--primary); }

/* 积分商品 */
.pt-head { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, #2b2b2b, #4a4a4a); color: #fff; border-radius: var(--radius); padding: 22px 26px; margin-bottom: 16px; }
.pt-head .bal { font-size: 30px; font-weight: 700; }
.pt-head .lb { font-size: 13px; opacity: .7; }

/* 积分兑换弹窗（点「立即兑换」弹出，对齐旧站的三段式：商品 → 地址/数量 → 合计） */
.pt-mask {
    position: fixed; inset: 0; z-index: 90; display: none;
    align-items: center; justify-content: center;
    padding: 20px; background: rgba(0, 0, 0, .45);
}
.pt-mask.on { display: flex; }
.pt-dialog {
    width: 520px; max-width: 100%; max-height: 92vh; overflow: auto;
    background: #fff; border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.pt-hd { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 12px; }
.pt-hd h3 { font-size: 16px; font-weight: 600; }
.pt-hd button { font-size: 22px; line-height: 1; color: #9a9a9a; padding: 0 2px; }
.pt-hd button:hover { color: var(--text); }
.pt-bd { padding: 0 20px 4px; }
.pt-goods { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.pt-goods .pic {
    width: 80px; height: 80px; flex: none; border-radius: 6px;
    overflow: hidden; background: #f7f7f8;
}
.pt-goods .pic img { width: 100%; height: 100%; object-fit: cover; }
.pt-goods .ttl { font-size: 14px; font-weight: 500; line-height: 1.45; margin-bottom: 8px; }
.pt-goods .pt-num { color: var(--primary); }
.pt-goods .pt-num b { font-size: 17px; font-weight: 700; }
.pt-goods .pt-num small { font-size: 12px; }
.pt-row { margin-top: 16px; }
.pt-row > label { display: block; font-size: 13px; color: var(--sub); margin-bottom: 8px; }
.pt-row select {
    width: 100%; border: 1px solid var(--line); border-radius: 8px;
    padding: 10px 12px; font-size: 14px; font-family: inherit; background: #fff;
    color: var(--text); outline: none;
}
.pt-row select:focus { border-color: var(--primary); }
.pt-qty { display: flex; align-items: center; gap: 12px; }
.pt-qty .qty button { width: 34px; height: 36px; font-size: 15px; }
.pt-qty .qty input { width: 48px; height: 36px; }
.pt-qty .max { font-size: 12.5px; color: var(--sub); }
.pt-total {
    display: flex; align-items: baseline; justify-content: space-between;
    margin-top: 18px; padding: 16px 0 18px; border-top: 1px dashed var(--line);
}
.pt-total .lb { font-size: 13px; color: var(--sub); }
.pt-total .right { text-align: right; }
.pt-total b { color: var(--primary); font-size: 22px; font-weight: 700; }
.pt-total small { display: block; font-size: 12px; color: var(--sub); margin-top: 6px; }
.pt-empty { display: none; font-size: 13px; color: #d93025; background: #fff5f5; border-radius: 8px; padding: 10px 12px; }
.pt-empty.on { display: block; }
.pt-empty a { color: var(--primary); }
.pt-ft { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.pt-ft .btn-sm { height: 38px; border-radius: 6px; padding: 0 22px; font-size: 14px; }
.pt-ft .btn-cancel { background: #fff; border: 1px solid var(--line); color: #444; }
.pt-ft .btn-cancel:hover { border-color: var(--primary); color: var(--primary); opacity: 1; }
.pt-ft .btn-sm[disabled] { background: #d8d8d8; cursor: default; }
@media (max-width: 560px) {
    .pt-dialog { border-radius: 8px; }
    .pt-bd, .pt-hd, .pt-ft { padding-left: 14px; padding-right: 14px; }
    .pt-goods .pic { width: 64px; height: 64px; }
}

/* 礼品卡 */
.gc-card {
    border-radius: 14px; padding: 22px; color: #fff; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #8b3a2a, #c8452d 60%, #e8735a);
}
.gc-card .nm { font-size: 15px; font-weight: 600; }
.gc-card .fv { font-size: 34px; font-weight: 700; margin: 12px 0 4px; }
.gc-card .fv small { font-size: 16px; font-weight: 400; }
.gc-card .sp { font-size: 13px; opacity: .85; }
.gc-card .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.gc-card .foot .btn-sm { background: #fff; color: #c8452d; }

/* 签到 */
.sign-hero { background: #fff; border-radius: var(--radius); padding: 26px; text-align: center; }
.sign-hero .big { font-size: 40px; font-weight: 700; color: var(--primary); line-height: 1; }
.sign-hero .lb { color: var(--sub); font-size: 13px; margin-top: 8px; }
.sign-days { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.sign-day { width: 62px; padding: 12px 0; border-radius: 9px; background: #f7f7f8; text-align: center; font-size: 12px; color: #888; }
.sign-day.on { background: #fff2ee; color: var(--primary); font-weight: 600; }
.sign-day .p { font-size: 14px; font-weight: 600; margin-top: 4px; color: var(--text); }
.sign-day.on .p { color: var(--primary); }

/* 抽奖 */
.lot-prizes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lot-prize { border: 1px solid var(--line); border-radius: 10px; padding: 16px 12px; text-align: center; }
.lot-prize .nm { font-size: 13.5px; font-weight: 500; }
.lot-prize .tp { font-size: 11.5px; color: var(--sub); margin-top: 5px; }

@media (max-width: 900px) {
    /* c4 的权重比单独的 .mk-grid 高，这里不点名它，窄屏会一直保持 4 列挤成一坨 */
    .mk-grid, .mk-grid.c2, .mk-grid.c4, .coupon-list { grid-template-columns: 1fr 1fr; }
    /* 两张卡片并排后每张不到 180px：价格降一档字号，「已售」让位给价格 */
    .mk-card .pr { gap: 6px; }
    .mk-card .pr b { font-size: 15px; }
    .mk-card .pr s { font-size: 11px; }
    .mk-card .card-sold { display: none; }
    .sk-items { grid-template-columns: 1fr 1fr; }
    .lot-prizes { grid-template-columns: 1fr 1fr; }
}

/* ==================== 登录注册 ==================== */
.auth-wrap { display: flex; justify-content: center; padding: 46px 0 20px; }
.auth-card { width: 400px; max-width: 100%; background: #fff; border-radius: 14px; padding: 32px 34px 34px; }
.auth-card h1 { font-size: 21px; font-weight: 700; text-align: center; }
.auth-card .sub { text-align: center; color: var(--sub); font-size: 13px; margin: 8px 0 24px; }
.auth-card .field { margin-bottom: 15px; }
.auth-card .field input { height: 44px; }
.auth-card .btn-main {
    width: 100%; height: 44px; border-radius: 8px; background: var(--primary);
    color: #fff; font-size: 15px; font-weight: 500; margin-top: 8px;
}
.auth-card .btn-main:hover { opacity: .92; }
.auth-card .btn-main:disabled { background: #d8d8d8; cursor: default; }
.auth-card .err { color: #d93025; font-size: 12.5px; min-height: 18px; margin-top: 10px; }
.auth-card .row-2 { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--sub); margin-top: 6px; }
.auth-card .row-2 a:hover { color: var(--primary); }
.auth-card .foot { text-align: center; font-size: 13px; color: var(--sub); margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.auth-card .foot a { color: var(--primary); }
.auth-card .code-row { display: flex; gap: 8px; }
.auth-card .code-row input { flex: 1; }
.auth-card .code-row button { flex: none; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: #555; background: #fff; }
.auth-card .code-row button:disabled { color: #bbb; }

/* ==================== 首页轮播 ==================== */
.hero { position: relative; margin-top: 18px; border-radius: 14px; overflow: hidden; height: 300px; background: #fff; }
.hero-track { display: flex; height: 100%; transition: transform .5s ease; }
.hero-slide {
    min-width: 100%; height: 100%; display: flex; flex-direction: column;
    justify-content: center; gap: 12px; padding: 0 56px; color: #fff; position: relative;
}
.hero-slide.g1 { background: linear-gradient(120deg, #8b3a2a, #c8452d 55%, #e8735a); }
.hero-slide.g2 { background: linear-gradient(120deg, #1e2a4a, #35507e 55%, #5b7fb8); }
.hero-slide.g3 { background: linear-gradient(120deg, #14432f, #1f6b4a 55%, #34a06c); }
.hero-slide.g4 { background: linear-gradient(120deg, #3b2350, #5f3a7d 55%, #8d5aa8); }
.hero-slide h2 { font-size: 34px; font-weight: 700; line-height: 1.35; white-space: pre-line; }
.hero-slide p { font-size: 15px; opacity: .88; }
.hero-slide .cta {
    align-self: flex-start; margin-top: 8px; padding: 9px 26px; border-radius: 20px;
    background: #fff; color: #c8452d; font-size: 14px; font-weight: 600;
}
.hero-slide img { position: absolute; right: 0; top: 0; height: 100%; width: 56%; object-fit: cover; }
.hero-slide .price-tag { font-size: 26px; font-weight: 700; }

.hero-dots { position: absolute; left: 56px; bottom: 20px; display: flex; gap: 7px; }
.hero-dots i { width: 22px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.4); cursor: pointer; }
.hero-dots i.on { background: #fff; }

/* 秒杀横幅 */
.sk-strip { background: #fff; border-radius: var(--radius); padding: 18px 20px; margin-top: 16px; }
.sk-strip .hd { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sk-strip .hd h2 { font-size: 18px; font-weight: 700; }
.sk-strip .hd .cd { color: var(--primary); font-size: 13px; font-weight: 600; }
.sk-strip .hd a { margin-left: auto; font-size: 13px; color: #888; }
.sk-strip .hd a:hover { color: var(--primary); }

/* 领券条 */
.cp-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.cp-mini {
    background: #fff; border-radius: 10px; padding: 14px 16px; display: flex;
    align-items: center; gap: 12px; border: 1px dashed #f0d5ce;
}
.cp-mini .v { color: var(--primary); font-size: 22px; font-weight: 700; flex: none; }
.cp-mini .v small { font-size: 12px; }
.cp-mini .grow { flex: 1; min-width: 0; }
.cp-mini .nm { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-mini .ds { font-size: 11.5px; color: #999; }
.cp-mini .get { font-size: 12px; color: var(--primary); flex: none; }

@media (max-width: 900px) {
    .hero { height: 210px; }
    .hero-slide { padding: 0 24px; }
    .hero-slide h2 { font-size: 22px; }
    .hero-slide img { width: 46%; opacity: .5; }
    .cp-strip { grid-template-columns: 1fr 1fr; }
}

/* 轮播按序号配色：模板里不写表达式，样式归样式管 */
.hero-slide:nth-child(1) { background: linear-gradient(120deg, #8b3a2a, #c8452d 55%, #e8735a); }
.hero-slide:nth-child(2) { background: linear-gradient(120deg, #1e2a4a, #35507e 55%, #5b7fb8); }
.hero-slide:nth-child(3) { background: linear-gradient(120deg, #14432f, #1f6b4a 55%, #34a06c); }
.hero-slide:nth-child(4) { background: linear-gradient(120deg, #3b2350, #5f3a7d 55%, #8d5aa8); }
.hero-slide:nth-child(5) { background: linear-gradient(120deg, #4a3315, #7a5426 55%, #b3833c); }

/* 图片容器必须是块级：<a> 默认 inline，aspect-ratio 对它不生效，
   结果就是图片按原始尺寸撑开，把下面的标题价格挤出可视区 */
.sk-item .pic, .mk-card .pic, .hero-slide img { display: block; }
.mk-card .pic { display: block; }

/* 轮播商品图：白底图直接压在渐变上会切出一条硬边。
   用 multiply 混合让白底融进底色，再叠一层左深右浅的遮罩把过渡拉开 */
.hero-slide img {
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 18%, #000 52%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 18%, #000 52%);
}
/* 进度条在没有库存时不该留一条红线 */
.sk-item .bar i:empty { display: none; }

/* ==================== 购物车 ==================== */
/* 表格式布局：勾选 | 商品 | 单价 | 数量 | 小计 | 操作
   列宽固定，各行才对得齐；商品列用 1fr 吃掉剩余宽度 */
.cart-panel { padding: 0 22px; }
.cart-head, .cart-row {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 110px 150px 110px 70px;
    align-items: center;
    gap: 12px;
}
.cart-head {
    padding: 14px 0; border-bottom: 1px solid var(--line);
    color: var(--sub); font-size: 13px;
}
.cart-head .c-price, .cart-head .c-sum { text-align: right; }
.cart-head .c-qty, .cart-head .c-op { text-align: center; }

.cart-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.cart-row:last-child { border-bottom: 0; }
.cart-row.off { opacity: .55; }

.cart-row .c-goods { display: flex; gap: 14px; align-items: center; min-width: 0; }
.cart-row .c-goods .pic { width: 84px; height: 84px; flex: none; border-radius: 8px; overflow: hidden; background: #f5f5f5; display: block; }
.cart-row .c-goods .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cart-row .c-goods .txt { min-width: 0; }
.cart-row .c-goods .t {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 14px; line-height: 21px;
}
.cart-row .c-goods .t:hover { color: var(--primary); }
.cart-row .s { color: var(--sub); font-size: 12.5px; margin-top: 5px; }
.cart-row .s.warn { color: #d93025; }

.cart-row .c-price { text-align: right; color: #555; font-size: 14px; }
.cart-row .c-qty { display: flex; justify-content: center; }
.cart-row .c-qty .qty { transform: scale(.9); }
.cart-row .c-sum { text-align: right; }
.cart-row .c-sum b { color: var(--primary); font-size: 16px; }
.cart-row .c-op { text-align: center; }
.cart-row .c-op button { color: var(--sub); font-size: 13px; background: none; }
.cart-row .c-op button:hover { color: #d93025; }

.cart-row input[type=checkbox], .cart-bar input[type=checkbox] {
    width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer;
}

.cart-bar { display: flex; align-items: center; gap: 16px; }
.cart-bar .pick-all { display: flex; align-items: center; gap: 8px; color: var(--sub); font-size: 13px; cursor: pointer; }
.cart-bar .grow { flex: 1; }
.cart-bar .sum-label { color: var(--sub); font-size: 13px; }
.cart-bar .sum-amount { color: var(--primary); font-size: 24px; font-weight: 700; }
.cart-bar .btn-cart { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

@media (max-width: 900px) {
    .cart-head { display: none; }
    .cart-row { grid-template-columns: 24px 1fr; gap: 10px; }
    .cart-row .c-price, .cart-row .c-qty, .cart-row .c-sum, .cart-row .c-op { grid-column: 2; text-align: left; justify-content: flex-start; }
    .cart-bar { flex-wrap: wrap; }
}

/* ==================== 结算页 ==================== */
.addr-row { display: flex; align-items: center; gap: 14px; }
.addr-row .grow { flex: 1; min-width: 0; }
.addr-row .who { font-size: 15px; font-weight: 600; }
.addr-row .who .mobile { color: #888; font-weight: 400; margin-left: 10px; }
.addr-row .where { color: #666; font-size: 13.5px; margin-top: 6px; }
.warn-text { color: #d93025; font-size: 13.5px; }

.line-price { text-align: right; flex: none; }
.line-price .n { color: #333; font-size: 14px; }
.line-price .n small { color: var(--sub); font-size: 12px; margin-left: 4px; }
.line-price .s { color: var(--sub); font-size: 12px; margin-top: 4px; }

/* 优惠券单选：一行一张，右侧标出能减多少 */
.coupon-pick { display: flex; flex-direction: column; gap: 8px; }
.cp-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
    cursor: pointer; font-size: 13.5px;
}
.cp-opt:hover { border-color: var(--primary); }
.cp-opt input { width: 15px; height: 15px; accent-color: var(--primary); flex: none; }
.cp-opt .cp-name { font-weight: 500; }
.cp-opt .cp-desc { color: var(--sub); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-opt .cp-off { margin-left: auto; color: var(--primary); font-weight: 600; flex: none; }

/* 结算页提示条 / 拼团说明 */
.notice-bar {
    color: var(--primary); background: #fff5f2;
    border: 1px solid #f7d5c9; font-size: 13.5px;
}
/* 打烊提示：比普通公告更重一档，用实心左边条压住视线 ——
   用户这时正要点「提交订单」，必须一眼看到为什么按钮是灰的 */
.shut-bar {
    color: #8a3b28; background: #fdf1ec;
    border-color: #f0c3b3; border-left: 4px solid var(--primary);
    font-weight: 600;
}
.groupon-tip {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    border: 1px dashed #d9543a; background: #fffdfc;
}
.groupon-tip .gt-price { color: var(--primary); font-weight: 700; font-size: 16px; }
.groupon-tip .gt-meta { color: #666; font-size: 13px; }
.groupon-tip .gt-note { color: var(--sub); font-size: 12.5px; flex: 1 1 100%; }

/* 金额区：左边明细，右边应付 + 提交 */
.pay-bar { display: flex; align-items: center; gap: 24px; }.amount-list { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.amount-list .li { display: flex; justify-content: space-between; color: var(--sub); max-width: 320px; }
.amount-list .li b { color: #333; font-weight: 500; }
.amount-list .li b.off { color: var(--primary); }
.amount-list .li b .free { color: #1a9c5b; font-style: normal; }

.pay-right { display: flex; align-items: center; gap: 18px; flex: none; }
.pay-sum { text-align: right; }
.pay-sum span { color: var(--sub); font-size: 13px; }
.pay-sum b { color: var(--primary); font-size: 26px; font-weight: 700; margin-left: 8px; }

@media (max-width: 900px) {
    .pay-bar { flex-direction: column; align-items: stretch; }
    .pay-right { justify-content: space-between; }
    .amount-list .li { max-width: none; }
}

/* 秒杀卡片的行动按钮：卡片整体可点，但需要一眼看到「能买」 */
.sk-item .sk-buy {
    display: block; text-align: center; margin-top: 9px;
    height: 30px; line-height: 30px; border-radius: 15px;
    background: var(--primary); color: #fff; font-size: 12.5px;
}
.sk-item .sk-buy:hover { opacity: .9; }

/* 店铺街卡片右侧的进店引导 */
.shop-card .s.addr { color: #999; font-size: 12px; }
.shop-card .shop-enter {
    flex: none; align-self: center; color: var(--sub); font-size: 12.5px;
    padding: 7px 14px; border: 1px solid var(--line); border-radius: 15px;
}
.shop-card:hover .shop-enter { color: #fff; background: var(--primary); border-color: var(--primary); }

/* ==================== 商品详情：活动角标 ==================== */
/* 角标是运营在后台传的 PNG，按主图定位，不参与点击 */
.main-img .frame {
    position: absolute; z-index: 1;
    height: auto; object-fit: contain;
    pointer-events: none;
    background: transparent;
}
.main-img .frame.pos-1 { left: 12px; top: 12px; }
.main-img .frame.pos-2 { right: 12px; top: 12px; }
.main-img .frame.pos-3 { left: 12px; bottom: 12px; }
.main-img .frame.pos-4 { right: 12px; bottom: 12px; }
.main-img .frame.pos-5 { left: 50%; top: 12px; transform: translateX(-50%); }
.main-img .frame.pos-6 { left: 0; top: 0; width: 100% !important; height: 100%; object-fit: fill; }

/* ==================== 商品详情：标签 ==================== */
.info-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.info-tags.below { margin: 8px 0 0; }
.info-tag {
    display: inline-block; padding: 2px 8px; border: 1px solid currentColor;
    border-radius: 4px; font-size: 12px; line-height: 1.5;
}

.price-flag {
    font-size: 12px; padding: 2px 8px; border-radius: 4px; line-height: 1.6;
}
.price-flag.seckill { background: #d93025; color: #fff; }
.price-flag.promo { background: #fff1ed; color: var(--primary); border: 1px solid #f6c6b8; }
.price-sales { color: var(--sub); font-size: 12.5px; margin-left: auto; }

/* ==================== 商品详情：活动条 ==================== */
/* 换购 / 赠品 / 秒杀 / 拼团 / 预售共用一个壳，只换主色，
   结构一致，运营看一处就能明白全部 */
.promo-bar {
    border-radius: 8px; padding: 12px 14px; margin-bottom: 12px;
    background: #fdf5f3; border: 1px solid #f8e2db;
}
.promo-bar .pb-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.promo-bar .pb-tag {
    flex: none; padding: 1px 7px; border-radius: 3px;
    background: var(--primary); color: #fff; font-size: 12px; line-height: 1.7;
}
.promo-bar .pb-text { font-size: 13.5px; color: #333; font-weight: 500; }
.promo-bar .pb-meta { font-size: 12px; color: #999; }
.promo-bar .pb-note { font-size: 12px; color: #999; margin-top: 8px; }
.promo-bar .pb-price { font-size: 20px; font-weight: 700; color: var(--primary); }
.promo-bar .pb-price i { font-size: 13px; font-style: normal; }
.promo-bar .pb-price em { font-size: 12px; font-weight: 400; margin-left: 5px; font-style: normal; color: var(--sub); }

.promo-bar .pb-items { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.promo-bar .pb-item {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #f2e2dc; border-radius: 6px; padding: 6px 10px 6px 6px;
}
.promo-bar .pb-item:hover { border-color: var(--primary); }
.promo-bar .pb-item img { width: 34px; height: 34px; object-fit: cover; border-radius: 4px; flex: none; }
.promo-bar .pb-item .pb-name { font-size: 12.5px; color: #555; }
.promo-bar .pb-item .pb-pirce { color: var(--primary); }

/* 拼团：虚线框 + 说明文案，和「限时活动」区分开，一眼能看出要凑人 */
.promo-bar.groupon { border: 1px dashed #d9543a; background: #fffdfc; }
.promo-bar .pb-badge {
    flex: none; padding: 1px 7px; border-radius: 3px;
    background: var(--primary); color: #fff; font-size: 12px; line-height: 1.7;
}
.promo-bar .pb-note { color: #666; line-height: 1.75; }
.promo-bar .pb-act { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.promo-bar .pb-btn {
    height: 34px; padding: 0 22px; border-radius: 17px;
    background: var(--primary); color: #fff; font-size: 13.5px;
}
.promo-bar .pb-btn:hover { opacity: .92; }
.promo-bar .pb-btn:disabled { opacity: .5; cursor: not-allowed; }
.promo-bar .pb-act .pb-link { margin-left: 0; }

/* ==================== 商品详情：库存编码行 ==================== */
.meta-row { display: flex; flex-wrap: wrap; gap: 20px; color: var(--sub); font-size: 12.5px; margin: 14px 0 16px; }
.meta-row b { color: var(--text); font-weight: 600; }

/* ==================== 商品详情：规格 ==================== */
.spec-values { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-opt.off {
    color: #cfcfcf; border-color: #eee; background: #fafafa;
    cursor: not-allowed; text-decoration: line-through;
}
.spec-opt.off:hover { border-color: #eee; color: #cfcfcf; }
.qty-row { margin-top: 2px; }

/* ==================== 商品详情：分享 / 收藏 ==================== */
.share-bar {
    display: block; width: 100%; height: 40px; margin-top: 6px;
    border: 1px solid #f3cbc0; border-radius: 8px;
    background: #fdf5f3; color: var(--primary); font-size: 13.5px;
}
.share-bar:hover { background: #fbeae4; }

.fav-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.btn-fav {
    height: 34px; padding: 0 18px; border: 1px solid var(--line); border-radius: 17px;
    background: #fff; color: #555; font-size: 13px;
}
.btn-fav:hover { border-color: var(--primary); color: var(--primary); }
.btn-fav.on { border-color: var(--primary); color: var(--primary); background: #fdf5f3; }
.btn-fav.on::before { content: "♥ "; }
.fav-hint { color: var(--sub); font-size: 12.5px; }

/* ==================== 商品详情：评价概览 ==================== */
.review-sum { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; padding: 4px 0; }
.rs-score { text-align: center; }
.rs-score b { display: block; font-size: 34px; color: var(--primary); line-height: 1.1; }
.rs-score span { color: var(--sub); font-size: 12px; }
.rs-meta { flex: 1; min-width: 200px; color: #555; font-size: 13.5px; }
.rs-bars { display: flex; gap: 16px; margin-top: 8px; color: var(--sub); font-size: 12.5px; }
.rs-rate { color: var(--sub); font-size: 13px; }

/* ==================== 商品详情：内容块白底 ==================== */
/* 评价、详情、须知、推荐这几个块原来直接压在页面灰底上，看着像「没画完」。
   统一给白底 + 圆角，和顶部商品区连成一张卡片。 */
.detail-page .block {
    background: #fff; border-radius: var(--radius);
    padding: 22px 24px; margin-bottom: 18px;
}
.detail-page .block-head { margin: 0 0 16px; }
/* 富文本块已经在 .block 里了，别再套一层白底和 26px 内边距 */
.detail-page .detail-body .rich { padding: 0; background: transparent; border-radius: 0; }

/* ==================== 商品详情：评价区 ==================== */
/* 筛选/翻页都带 #reviews，跳转后别被吸顶的头部压住 */
.rev-block { scroll-margin-top: 92px; }
.rev-head { display: grid; grid-template-columns: 190px 1fr; gap: 24px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rev-score { text-align: left; }
.rev-score .rs-label { color: var(--sub); font-size: 13px; }
.rev-score .rs-num { color: var(--primary); font-size: 42px; font-weight: 700; line-height: 1.1; }
.rev-score .rs-num i { font-size: 20px; font-style: normal; margin-left: 2px; }
.rev-score .rs-count { color: var(--sub); font-size: 12.5px; }

.rev-say { color: #333; font-size: 13.5px; margin-bottom: 10px; }
.rev-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-chip {
    padding: 4px 12px; border-radius: 14px; border: 1px solid var(--line);
    background: #fafafa; color: #555; font-size: 12.5px; line-height: 1.6;
}
.rv-chip:hover { color: var(--primary); border-color: #f0c8bd; }
.rv-chip.on { color: var(--primary); border-color: var(--primary); background: #fff; }

.rev-sort { display: flex; align-items: center; gap: 18px; padding: 14px 0; color: var(--sub); font-size: 13px; }
.rv-sort-a { color: #555; font-size: 13px; padding-bottom: 2px; border-bottom: 2px solid transparent; }
.rv-sort-a:hover { color: var(--primary); }
.rv-sort-a.on { color: var(--text); font-weight: 600; border-bottom-color: var(--text); }

.rev-list { display: flex; flex-direction: column; }
.rev-item { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--line); }
.rev-item:first-child { border-top: 0; }

.rev-user { text-align: center; }
.rev-ava {
    width: 52px; height: 52px; margin: 0 auto; border-radius: 50%;
    background: #f3f4f6; color: #9aa0a6; font-size: 18px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rev-ava img { width: 100%; height: 100%; object-fit: cover; }
.rev-nick {
    margin-top: 6px; font-size: 12px; color: var(--sub);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rev-body { min-width: 0; }
.rev-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--sub); font-size: 12px; }
.rev-spec { color: #999; }
.rev-flag {
    padding: 0 5px; border: 1px solid #f0c8bd; border-radius: 3px;
    color: var(--primary); background: #fdf5f3; font-size: 11px; line-height: 1.6;
}
.rev-flag.sel { border-color: #d8d8d8; color: #777; background: #fafafa; }

.rev-stars { margin-top: 6px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.rev-stars i { color: #e0e0e0; font-style: normal; font-size: 14px; letter-spacing: 1px; }
.rev-stars i.on { color: #f5a623; }
.rev-tags { display: inline-flex; gap: 6px; margin-left: 8px; }
.rev-tags em { font-style: normal; color: var(--sub); font-size: 11.5px; background: #f5f5f7; border-radius: 3px; padding: 1px 6px; }

.rev-txt { margin-top: 8px; font-size: 14px; line-height: 1.75; color: #333; word-break: break-word; }
.rev-txt.muted { color: #aaa; }

.rev-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.rev-imgs img {
    width: 92px; height: 92px; object-fit: cover; border-radius: 6px;
    background: #f5f5f5; border: 1px solid var(--line);
}
.rev-imgs a:hover img { border-color: var(--primary); }

.rev-box { margin-top: 12px; background: #fafafa; border-radius: 6px; padding: 12px 14px; }
.rev-box .rev-box-head { color: #666; font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.rev-box .rev-box-head span { font-weight: 400; color: #aaa; margin-left: 8px; }
.rev-box p { color: #444; font-size: 13.5px; line-height: 1.7; }
.rev-box.reply { background: #f7f7f8; }

.rev-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.rev-time { color: #b5b5b5; font-size: 12px; }
.rev-like {
    padding: 4px 12px; border: 1px solid var(--line); border-radius: 14px;
    background: #fff; color: #666; font-size: 12.5px;
}
.rev-like:hover { border-color: var(--primary); color: var(--primary); }
.rev-like.on { border-color: var(--primary); color: var(--primary); background: #fdf5f3; }
.rev-like .cnt { margin-left: 2px; }

@media (max-width: 900px) {
    .rev-head { grid-template-columns: 1fr; gap: 14px; }
    .rev-item { grid-template-columns: 54px 1fr; gap: 12px; }
    .rev-imgs img { width: 74px; height: 74px; }
}

/* ==================== 商品详情：购买须知 ==================== */
.faq dt { font-weight: 600; font-size: 14px; margin-top: 14px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { color: var(--sub); font-size: 13.5px; line-height: 1.8; margin-top: 6px; }
.promo-bar .pb-link { margin-left: auto; font-size: 12.5px; color: var(--primary); }

/* ==================== 确认订单：两栏（明细 + 金额） ==================== */
/* 窄屏用 grid 单列落在同一套类上，不另写一套结构 */
.ck-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
    padding-bottom: 40px;
}
.ck-main { min-width: 0; }
.ck-side { position: sticky; top: 92px; }

.ck-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.ck-head h2 { margin-bottom: 0; }
.ck-sub { font-size: 12.5px; color: var(--sub); }
.ck-count { margin-left: auto; font-size: 12.5px; color: var(--sub); }
.ck-link { margin-left: auto; font-size: 13px; color: var(--primary); }

/* 表头与行的列宽必须一致，否则「单价/数量/小计」对不齐 */
.ck-cols,
.ck-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px 56px 92px;
    gap: 12px;
    align-items: center;
}
.ck-cols {
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--line);
    color: var(--sub);
    font-size: 12.5px;
}
.ck-row { padding: 14px 10px; border-bottom: 1px solid var(--line); }
.ck-row:last-child { border-bottom: 0; }

/* 赠品行：淡粉底 + 不参与任何优惠的说明，跟主商品一眼能分开 */
.ck-row.is-gift { background: #fdf4f1; border-radius: 8px; border-bottom-color: transparent; }
.ck-row.is-gift + .ck-row { border-top: 1px solid var(--line); }

.ck-info { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.ck-thumb { width: 72px; height: 72px; flex: none; border-radius: 8px; overflow: hidden; background: #f6f6f6; display: block; }
.ck-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ck-text { min-width: 0; }
.ck-title {
    font-size: 14px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ck-tag {
    display: inline-block; vertical-align: 1px;
    padding: 0 5px; margin-right: 5px;
    background: var(--primary); color: #fff;
    border-radius: 3px; font-size: 11px; line-height: 17px;
}
.ck-specs { font-size: 12.5px; color: var(--sub); margin-top: 4px; }
.ck-flag { font-size: 12px; color: #b0b0b0; margin-top: 4px; }

.ck-price { font-size: 13.5px; color: #444; text-align: right; }
.ck-giftword { color: var(--primary); }
.ck-qty { font-size: 13px; color: var(--sub); text-align: center; }
.ck-total { font-size: 14px; font-weight: 600; color: var(--primary); text-align: right; }
.ta-r { text-align: right; }
.ta-c { text-align: center; }

/* 赠品说明：赠品已经是清单里的 0 元行，这里只回答「为什么多了一件」 */
.ck-giftline {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
    margin-top: 12px; padding: 10px 12px;
    background: #fdf4f1; border-radius: 8px;
    font-size: 12.5px; color: #8a5c50;
}
.ck-gtag {
    background: var(--primary); color: #fff;
    border-radius: 3px; padding: 0 5px; line-height: 17px; font-size: 11px; flex: none;
}
.ck-warn { margin-top: 8px; font-size: 12.5px; color: #b06a1f; }

.ck-remark {
    display: flex; align-items: center; gap: 12px;
    margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line);
    font-size: 13px; color: var(--sub);
}
.ck-remark span { flex: none; }
.ck-remark input {
    flex: 1; height: 38px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 6px;
    font: inherit; font-size: 13px; outline: none;
}
.ck-remark input:focus { border-color: var(--primary); }

/* ---------- 加价换购 ---------- */
.ck-tip { font-size: 12.5px; color: var(--sub); margin-bottom: 10px; }
.ck-exrow {
    display: flex; align-items: center; gap: 12px;
    padding: 12px; margin-top: 10px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fff;
}
.ck-exrow.is-on { border-color: var(--primary); background: #fdf8f6; }
.ck-exrow.is-off { opacity: .55; }
.ck-excheck { display: flex; align-items: center; flex: none; }
.ck-excheck input { width: 16px; height: 16px; accent-color: var(--primary); }
.ck-eximg { width: 64px; height: 64px; object-fit: cover; border-radius: 7px; background: #f6f6f6; flex: none; }
.ck-exinfo { flex: 1; min-width: 0; }
.ck-extitle { font-size: 13.5px; }
.ck-exmeta { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 12.5px; color: var(--sub); flex-wrap: wrap; }
.ck-exprice { color: var(--primary); font-weight: 600; font-size: 14px; }
.ck-exmeta s { color: #b0b0b0; }
.ck-out { color: #b06a1f; }

.ck-step {
    display: flex; align-items: center; flex: none;
    border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.ck-step button { width: 28px; height: 28px; background: #fafafa; color: #666; font-size: 14px; }
.ck-step button:disabled { color: #ccc; cursor: not-allowed; }
.ck-step span { width: 34px; text-align: center; font-size: 13px; }

/* ---------- 优惠券（支付方式挪到收银台再选，这里只剩券） ---------- */
.ck-dup { display: block; }
.ck-pick {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--line); border-radius: 8px;
    font-size: 13.5px;
}
.ck-pick.empty { color: var(--sub); }
.ck-picksub { font-size: 12.5px; color: var(--sub); }

/* ---------- 右栏金额 ---------- */
.ck-sum h2 { margin-bottom: 14px; }
.ck-li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 7px 0; font-size: 13.5px; color: var(--sub);
}
.ck-li b { color: #333; font-weight: 500; }
.ck-li b.off { color: var(--primary); }
.ck-li b.note { font-size: 12px; font-weight: 400; color: var(--sub); }
.ck-li i.free { color: #1a9c5b; font-style: normal; }

.ck-sumtotal {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 10px; padding: 14px 0 12px;
    border-top: 1px solid var(--line);
    font-size: 13.5px; color: var(--text);
}
.ck-sumtotal b { font-size: 26px; font-weight: 700; color: var(--primary); }
.ck-sumtip { font-size: 12px; color: var(--sub); line-height: 1.7; margin-bottom: 14px; }

.ck-submit {
    width: 100%; height: 46px; border-radius: 8px;
    background: var(--primary); color: #fff;
    font-size: 15px; font-weight: 600;
}
.ck-submit:hover { opacity: .92; }
.ck-submit:disabled { background: #d8d8d8; cursor: not-allowed; }

.ck-agree {
    display: flex; align-items: flex-start; gap: 6px;
    margin-top: 12px; font-size: 12px; color: var(--sub); line-height: 1.6;
}
.ck-agree input { width: 14px; height: 14px; margin-top: 2px; accent-color: var(--primary); flex: none; }
.ck-safe {
    margin-top: 10px; padding: 8px 10px;
    background: #fafafa; border-radius: 6px;
    font-size: 12px; color: var(--sub);
}

@media (max-width: 980px) {
    .ck-layout { grid-template-columns: 1fr; }
    .ck-side { position: static; }
}

@media (max-width: 720px) {
    .ck-cols { display: none; }
    .ck-row { grid-template-columns: 1fr auto; row-gap: 8px; padding: 14px 0; }
    .ck-info { grid-column: 1 / -1; }
    /* 窄屏放不下四列：单价省掉，只留「×N」与小计 */
    .ck-price { display: none; }
    .ck-qty { text-align: left; }
    .ck-thumb, .ck-thumb img { width: 64px; height: 64px; }
    .ck-eximg { width: 56px; height: 56px; }
    .ck-sumtotal b { font-size: 22px; }
}

/* 券下拉：和输入框同高，长券名用省略号收口 */
.ck-coupon {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fff; color: var(--text);
    font: inherit; font-size: 13.5px; outline: none;
    text-overflow: ellipsis;
}
.ck-coupon:focus { border-color: var(--primary); }
.ck-coupon + .ck-picksub { margin-top: 8px; }

/* ==========================================================================
   收银台（/pay/:orderNo、/pay/merge）
   参照「订单已提交，请完成付款」的版式：左侧选付款方式 + 付款条，
   右侧订单信息卡。整块前缀 pay-，不与其它页面的类名互相干扰。
   ========================================================================== */

.crumb em { font-style: normal; color: var(--text); }

.pay-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 18px 0 18px;
    flex-wrap: wrap;
}
.pay-head h1 { font-size: 24px; font-weight: 700; letter-spacing: .2px; }
.pay-meta { margin-top: 8px; font-size: 12.5px; color: var(--sub); }

/* ---------- 步骤条 ---------- */
.pay-steps { display: flex; align-items: center; list-style: none; padding-top: 8px; }
.pay-step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sub); white-space: nowrap; }
.pay-step i {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 50%;
    border: 1px solid #dcdcdc; background: #fff;
    font-style: normal; font-size: 11px; color: #a9a9a9;
}
.pay-step.is-done i { border-color: #1a1a1a; background: #1a1a1a; color: #fff; }
.pay-step.is-on { color: var(--text); font-weight: 600; }
.pay-step.is-on i { border-color: var(--primary); background: var(--primary); color: #fff; }
.pay-step-line { width: 46px; height: 1px; background: #e2e2e2; margin: 0 10px; }

/* ---------- 两栏 ---------- */
.pay-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.pay-main { min-width: 0; }
.pay-main > .panel + .panel { margin-top: 16px; }
.pay-side { position: sticky; top: 92px; }

/* ---------- 付款方式 ---------- */
.pay-box-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding-bottom: 14px; margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.pay-box-head h2 { margin-bottom: 0; }
.pay-due { font-size: 13px; color: var(--sub); }
.pay-due b { margin-left: 6px; font-size: 20px; font-weight: 700; color: var(--primary); }

.pay-empty {
    padding: 14px 16px; border: 1px dashed var(--line); border-radius: 8px;
    background: #fafafa; font-size: 13px; line-height: 1.7; color: var(--sub);
}

.pay-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px; list-style: none;
}

.pay-method {
    position: relative;
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fff; text-align: left;
    transition: border-color .16s, box-shadow .16s;
}
.pay-method:hover { border-color: #cfcfcf; }
.pay-method.is-on { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }

.pay-logo { display: flex; flex: none; }
.pay-mtext { display: grid; gap: 3px; min-width: 0; padding-right: 14px; }
.pay-mtext strong { font-size: 13.5px; font-weight: 600; }
.pay-mtext span {
    font-size: 12px; color: var(--sub);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.pay-radio {
    position: absolute; top: 10px; right: 10px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 1px solid #d0d0d0; background: #fff;
}
.pay-method.is-on .pay-radio { border: 4px solid var(--primary); }

/* ---------- 余额面板 ---------- */
.pay-wallet {
    margin-top: 16px; padding: 16px 18px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fafafa;
}
.pay-wallet-top {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.pay-wallet-title { font-size: 13px; font-weight: 600; color: var(--text); }
.pay-wallet-title span { margin-left: 12px; font-size: 12px; font-weight: 400; color: var(--sub); }
.pay-wallet-title em { font-style: normal; font-weight: 600; color: var(--primary); }
.pay-lack { color: var(--primary) !important; }
.pay-wallet-link { font-size: 12px; color: var(--sub); }
.pay-wallet-link:hover { color: var(--primary); }

.pay-field { display: grid; gap: 6px; margin-top: 12px; }
.pay-field-label { font-size: 12px; color: var(--sub); }
.pay-field input {
    width: 100%; height: 40px; padding: 0 12px;
    border: 1px solid #dcdcdc; border-radius: 8px;
    background: #fff; font: inherit; font-size: 14px; color: var(--text);
    outline: none; transition: border-color .16s;
}
.pay-field input:focus { border-color: var(--primary); }
#payPwd { max-width: 240px; letter-spacing: .4em; font-variant-numeric: tabular-nums; }

.pay-hint { margin-top: 9px; font-size: 12px; line-height: 1.7; color: var(--sub); }
.pay-hint a { color: var(--primary); }
.pay-hint.is-warn { color: #b0661f; }

.pay-setbtn {
    margin-top: 10px; height: 32px; padding: 0 16px;
    border: 1px solid var(--primary); border-radius: 16px;
    background: #fff; color: var(--primary); font-size: 12.5px;
}
.pay-setbtn:hover { background: #fdf5f3; }

/* ---------- 非余额通道说明 ---------- */
.pay-channel {
    margin-top: 16px; padding: 14px 18px;
    border: 1px solid var(--line); border-radius: 8px;
    background: #fafafa;
}
.pay-channel-title { font-size: 13px; font-weight: 600; }
.pay-channel-desc { margin-top: 6px; font-size: 12.5px; line-height: 1.75; color: var(--sub); }

.pay-err {
    margin-top: 14px; padding: 9px 12px; border-radius: 6px;
    background: #fdecea; color: #b3261e;
    font-size: 12.5px; line-height: 1.7;
}

/* ---------- 付款条 ---------- */
.pay-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
    margin-top: 18px; padding-top: 16px;
    border-top: 1px solid var(--line);
}
.pay-bar-amount { font-size: 13px; color: var(--sub); }
.pay-bar-amount em { margin-left: 6px; font-style: normal; font-size: 24px; font-weight: 700; color: var(--text); }
.pay-bar-remain { margin-top: 4px; font-size: 12px; color: var(--sub); }
.pay-bar-remain strong { margin-left: 4px; color: var(--primary); font-variant-numeric: tabular-nums; }

.pay-submit {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 168px; height: 46px; padding: 0 26px;
    border-radius: 8px; background: #1a1a1a; color: #fff;
    font-size: 15px; font-weight: 600;
    transition: opacity .16s;
}
.pay-submit:hover { opacity: .88; }
.pay-submit:disabled { background: #d8d8d8; color: #fff; cursor: not-allowed; }

.pay-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 130px; height: 46px; padding: 0 22px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    font-size: 14px; color: #444;
}
.pay-ghost:hover { border-color: var(--primary); color: var(--primary); }

/* ---------- 支付遇到问题 ---------- */
.pay-issues h2 { margin-bottom: 12px; }
.pay-issue + .pay-issue { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.pay-issue h3 { font-size: 13.5px; font-weight: 600; }
.pay-issue p { margin-top: 5px; font-size: 12.5px; line-height: 1.75; color: var(--sub); }
.pay-issue a { color: var(--primary); }

/* ---------- 右侧订单信息 ---------- */
.pay-card h2 { margin-bottom: 14px; }
.pay-goods { list-style: none; display: grid; gap: 12px; }
.pay-goods li { display: flex; gap: 10px; align-items: flex-start; }
.pay-goods img {
    width: 56px; height: 56px; flex: none;
    border-radius: 6px; object-fit: cover; background: #f6f6f6;
}
.pay-goods-text { min-width: 0; flex: 1; }
.pay-goods-text .t {
    font-size: 12.5px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pay-goods-text .s { margin-top: 3px; font-size: 11.5px; color: var(--sub); }
.pay-goods-text .q { margin-top: 2px; font-size: 11.5px; color: #a5a5a5; }
.pay-goods .p { flex: none; font-size: 12.5px; color: #555; }

.pay-orders { list-style: none; display: grid; gap: 10px; }
.pay-orders li { padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.pay-orders li:last-child { padding-bottom: 0; border-bottom: 0; }
.pay-order-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pay-order-top .no { font-size: 12px; color: #555; }
.pay-order-top b { font-size: 13px; color: var(--text); }
.pay-order-sub { margin-top: 3px; font-size: 11.5px; color: var(--sub); }

.pay-money { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pay-money .li {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 5px 0; font-size: 12.5px; color: var(--sub);
}
.pay-money .li b { font-weight: 500; color: #333; }
.pay-money .li b.off { color: var(--primary); }
.pay-money .li i.free { font-style: normal; color: #1a9c5b; }
.pay-money .li.is-total {
    margin-top: 8px; padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 13px; color: var(--text);
}
.pay-money .li.is-total b { font-size: 24px; font-weight: 700; color: var(--primary); }

.pay-info { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.pay-info .row {
    display: flex; gap: 10px; padding: 4px 0;
    font-size: 12.5px; line-height: 1.65;
}
.pay-info .row span { flex: none; width: 56px; color: var(--sub); }
.pay-info .row b { flex: 1; min-width: 0; font-weight: 400; color: #333; word-break: break-all; }

.pay-safe {
    margin-top: 14px; padding: 9px 10px; border-radius: 6px;
    background: #fafafa; font-size: 11.5px; line-height: 1.7; color: var(--sub);
}

/* ---------- 支付成功 / 不可付款 ---------- */
.pay-done, .pay-closed { text-align: center; padding: 34px 22px; }
.pay-done-icon { color: #1a9c5b; display: flex; justify-content: center; }
.pay-done h2, .pay-closed h2 { margin: 12px 0 8px; font-size: 20px; }
.pay-done-sub, .pay-closed p { font-size: 13px; color: var(--sub); line-height: 1.8; }
.pay-closed-tip { margin-top: 6px; }
.pay-done-actions {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin-top: 22px; flex-wrap: wrap;
}

/* ---------- 设置支付密码弹窗 ---------- */
.pay-mask {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .45);
}
.pay-modal {
    position: relative;
    width: 420px; max-width: 100%; max-height: 92vh; overflow: auto;
    padding: 24px; border-radius: 12px; background: #fff;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .22);
    text-align: left;
}
.pay-modal h3 { font-size: 17px; font-weight: 700; }
.pay-modal-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--sub); }
.pay-modal .pay-field { margin-top: 14px; }
.pay-modal-x {
    position: absolute; top: 12px; right: 12px;
    width: 28px; height: 28px; border-radius: 50%;
    font-size: 18px; line-height: 1; color: #9a9a9a;
}
.pay-modal-x:hover { background: #f4f4f4; color: #555; }
.pay-modal-err {
    margin-top: 12px; padding: 8px 10px; border-radius: 6px;
    background: #fdecea; color: #b3261e; font-size: 12.5px; line-height: 1.7;
}
.pay-modal-actions {
    display: flex; align-items: center; gap: 14px;
    margin-top: 20px;
}
.pay-modal-actions .pay-submit { flex: 1; height: 44px; min-width: 0; }
.pay-modal-cancel { font-size: 13px; color: var(--sub); }
.pay-modal-cancel:hover { color: var(--text); }

/* 显隐：用类而不是 hidden 属性，避免被上面的 display:flex 盖掉 */
.pay-hide { display: none !important; }

/* ---------- 窄屏 ---------- */
@media (max-width: 1080px) {
    .pay-layout { grid-template-columns: 1fr; }
    .pay-side { position: static; }
    .pay-steps { padding-top: 0; }
}

@media (max-width: 720px) {
    .pay-head h1 { font-size: 20px; }
    .pay-head { padding-bottom: 12px; }
    .pay-steps { width: 100%; justify-content: space-between; }
    .pay-step-line { width: auto; flex: 1; margin: 0 6px; }
    .pay-step { font-size: 11.5px; gap: 5px; }
    .pay-methods { grid-template-columns: 1fr; }
    .pay-foot { flex-direction: column; align-items: stretch; }
    .pay-submit { width: 100%; }
    #payPwd { max-width: none; }
    .pay-modal { padding: 20px; }
}

/* ==========================================================================
   结算页 · 收货信息（ca- = checkout address）
   地址簿直接铺开让选，右下角「+ 使用新地址」翻成表单；新账号没有地址时
   表单默认就是展开态。选中卡片走深色描边 + 对勾，和参考图一致。
   前缀 ca- 避免与既有的 .addr-row（用户中心地址页）互相覆盖。
   ========================================================================== */

.ca-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--line);
}
.ca-head h2 { margin-bottom: 0; flex: none; }
.ca-sub { font-size: 12.5px; color: var(--sub); }
.ca-sub a { color: var(--sub); border-bottom: 1px solid #dcdcdc; }
.ca-sub a:hover { color: var(--primary); border-color: var(--primary); }

.ca-new {
    margin-left: auto;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
}
.ca-new:hover { color: var(--primary); }

/* ---------- 地址卡片 ---------- */
.ca-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.ca-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid #e3e3e3;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .16s, box-shadow .16s;
}
.ca-item:hover { border-color: #bdbdbd; }
.ca-item.is-on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

/* 原生 radio 留着给键盘和读屏用，视觉上换成圆圈 */
.ca-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px; height: 15px;
    margin: 3px 0 0;
    flex: none;
    border: 1px solid #c4c4c4;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}
.ca-item input[type="radio"]:checked { border: 4px solid var(--text); }
.ca-item input[type="radio"]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.ca-body { display: grid; gap: 5px; min-width: 0; }
.ca-who {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 14px; font-weight: 600; line-height: 1.4;
}
.ca-who em { font-style: normal; font-weight: 400; font-size: 13px; color: #777; }
.ca-tag {
    padding: 0 6px;
    border-radius: 3px;
    background: #f2f2f2;
    font-style: normal; font-size: 11px; font-weight: 400; line-height: 18px;
    color: #666;
}
.ca-where { font-size: 12.5px; line-height: 1.6; color: #6b6b6b; word-break: break-all; }

.ca-check { color: var(--text); font-size: 14px; opacity: 0; }
.ca-item.is-on .ca-check { opacity: 1; }

/* ---------- 新地址表单 ---------- */
.ca-form { display: grid; gap: 14px; }
.ca-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ca-grid-3 { grid-template-columns: repeat(3, 1fr); }

.ca-field { display: grid; gap: 6px; min-width: 0; }
.ca-field label { font-size: 12.5px; color: var(--sub); }

.ca-field input,
.ca-field select {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--text);
    outline: none;
    transition: border-color .16s;
}
.ca-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23999' stroke-width='1.5' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.ca-field input:focus,
.ca-field select:focus { border-color: var(--primary); }
.ca-field input::placeholder { color: #b5b5b5; }

.ca-err {
    padding: 9px 12px;
    border-radius: 6px;
    background: #fdecea;
    color: #b3261e;
    font-size: 12.5px;
    line-height: 1.7;
}

.ca-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}
.ca-back { margin-right: auto; font-size: 13px; color: var(--sub); }
.ca-back:hover { color: var(--primary); }

.ca-save {
    height: 40px;
    padding: 0 24px;
    border-radius: 6px;
    background: var(--text);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    transition: opacity .16s;
}
.ca-save:hover { opacity: .88; }
.ca-save:disabled { background: #d8d8d8; cursor: not-allowed; }

.ca-hide { display: none !important; }

@media (max-width: 860px) {
    .ca-grid, .ca-grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .ca-list { grid-template-columns: 1fr; }
    .ca-head { flex-wrap: wrap; row-gap: 8px; }
    .ca-new { margin-left: 0; }
    .ca-actions { flex-direction: column-reverse; align-items: stretch; }
    .ca-save { width: 100%; }
    .ca-back { text-align: center; }
}

/* ==========================================================================
   结算页 · 静默刷新（换地址 / 换券 / 勾换购）
   这几块由脚本 fetch 同一份页面后原地替换，不再整页重载：
   滚动位置不丢、不闪白、备注和同意勾选不会被重置。
   ========================================================================== */

/* 换购块外面多包了一层壳（没有候选时整块不存在），
   补回 .panel + .panel 原本给的那 16px 间距 */
.ck-exwrap { margin-top: 16px; }
.ck-exwrap + .panel { margin-top: 16px; }

/* 请求在途时轻微压暗并挡住连点；不加 loading 骨架是为了不引起二次跳动 */
.ck-layout { transition: opacity .12s ease; }
.ck-layout.ck-busy { opacity: .55; pointer-events: none; }

/* 被替换的块内容高度会变，给金额区一个最小高度，
   避免「已加购 1 件」这类多出来的一行把右栏整体推一下 */
#sumBox { min-height: 1px; }