/* ============================================================
   NovaMall · 前台商城样式
   现代电商风 · 渐变 · 圆角卡片 · 微动效
   ============================================================ */

.shop-body {
    background: #f7f8fc;
    color: #1e293b;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- 顶栏 ---------- */
.shop-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #eef1f7;
}
.shop-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    height: 68px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.shop-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.shop-logo, .shop-logo-mark {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
}
.shop-logo { object-fit: cover; }
.shop-logo-mark {
    font-weight: 800; color: #fff; font-size: 18px;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
}
.shop-brand-name { font-size: 17px; font-weight: 700; color: #1e293b; }

.shop-nav { display: flex; align-items: center; gap: 4px; flex: 1; margin-left: 28px; }
.shop-nav a { padding: 9px 12px; border-radius: 10px; font-size: 15px; font-weight: 500; color: #64748b; text-decoration: none; transition: all .18s; white-space: nowrap; }
.shop-nav a:hover { color: #6366f1; background: #f1f3ff; }
.shop-nav a.active { color: #ffffff; background: linear-gradient(135deg, #4c1d95, #312e81); font-weight: 700; }

.shop-header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.shop-cart-btn {
    position: relative; width: 40px; height: 40px; display: grid; place-items: center;
    border-radius: 11px; color: #64748b; transition: all .18s;
}
.shop-cart-btn:hover { color: #6366f1; background: #f1f3ff; }
.shop-cart-badge {
    position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px;
    padding: 0 4px; display: grid; place-items: center; border-radius: 99px;
    background: linear-gradient(135deg, #6366f1, #06b6d4); color: #fff;
    font-size: 11px; font-weight: 700;
}
.shop-account-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #64748b; }
.shop-account-btn:hover { color: #6366f1; background: #f1f3ff; }
.shop-login-link {
    padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: #fff; text-decoration: none; background: linear-gradient(135deg, #6366f1, #06b6d4);
}

/* ---------- 主体 ---------- */
.shop-main { flex: 1; max-width: 1180px; width: 100%; margin: 0 auto; padding: 24px; }

/* ---------- Hero ---------- */
.shop-hero {
    border-radius: 22px; overflow: hidden; position: relative;
    background: linear-gradient(120deg, #4f46e5 0%, #7c3aed 45%, #06b6d4 100%);
    color: #fff; padding: 48px 52px; margin-bottom: 28px;
}
.shop-hero::after {
    content: ''; position: absolute; right: -60px; top: -80px;
    width: 280px; height: 280px; border-radius: 50%;
    background: rgba(255,255,255,.12); filter: blur(20px);
}
.shop-hero-inner { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.shop-hero-copy { max-width: 520px; }
.shop-hero-tag {
    display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: rgba(255,255,255,.18); margin-bottom: 16px;
}
.shop-hero-copy h1 { font-size: 34px; font-weight: 800; line-height: 1.25; margin-bottom: 12px; }
.shop-hero-copy p { font-size: 15px; color: rgba(255,255,255,.85); margin-bottom: 26px; }
.shop-hero-graphic { color: rgba(255,255,255,.4); }
.shop-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 26px;
    border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; transition: all .2s;
}
.shop-btn-primary { background: #fff; color: #4f46e5; }
.shop-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.2); }

/* ---------- 分区 ---------- */
.shop-section { margin-bottom: 32px; }
.shop-section-title { font-size: 20px; font-weight: 700; margin-bottom: 18px; }

/* ---------- 分类 ---------- */
.shop-category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.shop-category-card {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 22px 16px; background: #fff; border: 1px solid #eef1f7;
    border-radius: 16px; text-decoration: none; color: #1e293b; transition: all .2s;
}
.shop-category-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(30,41,59,.1); border-color: #c7d0f5; }
.shop-category-icon { color: #6366f1; }
.shop-category-card b { font-size: 14px; }

/* ---------- 商品网格 ---------- */
.shop-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.shop-product-card {
    background: #fff; border: 1px solid #eef1f7; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: inherit; transition: all .22s;
}
.shop-product-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(30,41,59,.12); }
.shop-product-img {
    height: 180px; display: flex; align-items: center; justify-content: center;
    background: #f1f4f9; color: #cbd5e1; overflow: hidden;
}
.shop-product-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-product-info { padding: 14px 16px; }
.shop-product-name { font-size: 14px; font-weight: 600; line-height: 1.4; height: 40px; overflow: hidden; }
.shop-product-sub { font-size: 12px; color: #94a3b8; margin: 6px 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-product-foot { display: flex; align-items: center; justify-content: space-between; }
.shop-product-price { font-size: 18px; font-weight: 800; color: #ec4899; }
.shop-product-origin { font-size: 11px; color: #94a3b8; background: #f1f4f9; padding: 3px 8px; border-radius: 6px; }

/* ---------- 空状态 ---------- */
.shop-empty { text-align: center; padding: 48px 20px; color: #94a3b8; }
.shop-empty .icon { color: #cbd5e1; margin-bottom: 12px; }
.shop-empty p { font-size: 14px; }

/* ---------- 页脚 ---------- */
.shop-footer { border-top: 1px solid #eef1f7; background: #fff; }
.shop-footer-inner {
    max-width: 1180px; margin: 0 auto; padding: 28px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.shop-footer-brand b { font-size: 15px; }
.shop-footer-brand p { font-size: 12.5px; color: #94a3b8; margin-top: 4px; }
.shop-footer-links span { font-size: 12.5px; color: #94a3b8; }

/* ---------- 响应式 ---------- */
@media (max-width: 760px) {
    .shop-header-inner { gap: 12px; }
    .shop-nav { display: none; }
    .shop-hero { padding: 32px 24px; }
    .shop-hero-copy h1 { font-size: 26px; }
    .shop-hero-graphic { display: none; }
    .shop-product-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 商品筛选 ---------- */
.shop-filter { margin-bottom: 20px; }
.shop-filter-form { display: flex; gap: 12px; flex-wrap: wrap; }
.shop-search-box {
    flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1.5px solid #eef1f7; border-radius: 12px; padding: 0 14px;
}
.shop-search-box .icon { color: #94a3b8; }
.shop-search-box input {
    flex: 1; height: 44px; border: none; outline: none; font-size: 14px; font-family: inherit;
}
.shop-catalog-meta { font-size: 13px; color: #94a3b8; margin-bottom: 14px; }

/* ---------- 详情页 ---------- */
.shop-detail-main { max-width: 1080px; }
.shop-back {
    display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: #64748b;
    margin-bottom: 18px; text-decoration: none;
}
.shop-back .icon { transform: rotate(180deg); }
.shop-back:hover { color: #6366f1; }
.shop-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
    background: #fff; border-radius: 20px; padding: 32px; border: 1px solid #eef1f7;
}
.shop-detail-img {
    display: flex; align-items: center; justify-content: center; min-height: 360px;
    background: #f1f4f9; border-radius: 16px; color: #cbd5e1; overflow: hidden;
}
.shop-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-detail-cat { display: inline-block; font-size: 12px; color: #6366f1; background: #eef0ff; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; }
.shop-detail-title { font-size: 24px; font-weight: 800; line-height: 1.3; }
.shop-detail-sub { font-size: 14px; color: #94a3b8; margin-top: 8px; }
.shop-detail-price { font-size: 30px; font-weight: 800; color: #ec4899; margin: 20px 0; }
.shop-detail-meta { border-top: 1px dashed #eef1f7; border-bottom: 1px dashed #eef1f7; padding: 14px 0; }
.shop-detail-meta .desc-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13.5px; }
.shop-detail-meta .desc-row span { color: #94a3b8; }
.shop-detail-actions { display: flex; gap: 14px; margin-top: 24px; align-items: center; }
.shop-qty { display: flex; align-items: center; border: 1.5px solid #eef1f7; border-radius: 12px; overflow: hidden; }
.shop-qty button { width: 42px; height: 48px; border: none; background: #f7f8fc; font-size: 18px; cursor: pointer; color: #64748b; }
.shop-qty input { width: 56px; height: 48px; border: none; text-align: center; font-size: 16px; font-weight: 600; outline: none; }
.shop-detail-actions .shop-btn[disabled] { opacity: .45; pointer-events: none; }
.shop-detail-desc { margin-top: 24px; background: #fff; border-radius: 20px; padding: 28px 32px; border: 1px solid #eef1f7; }
.shop-detail-desc h3 { font-size: 16px; margin-bottom: 12px; }
.shop-detail-desc p { font-size: 14px; color: #64748b; line-height: 1.9; }

@media (max-width: 760px) {
    .shop-detail-grid { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
    .shop-detail-img { min-height: 240px; }
    .shop-detail-actions { flex-direction: column; align-items: stretch; }
}

/* ---------- 购物车 / 结算 / 成功 ---------- */
.shop-page-title { font-size: 24px; font-weight: 800; margin-bottom: 22px; }

.shop-cart-layout { display: grid; grid-template-columns: 1fr 320px; gap: 22px; align-items: start; }
.shop-cart-list { display: flex; flex-direction: column; gap: 12px; }
.shop-cart-item {
    display: flex; align-items: center; gap: 16px; background: #fff;
    border: 1px solid #eef1f7; border-radius: 16px; padding: 14px 16px;
}
.shop-cart-img { width: 72px; height: 72px; flex: none; border-radius: 12px; overflow: hidden; background: #f1f4f9; display: grid; place-items: center; color: #cbd5e1; }
.shop-cart-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-cart-info { flex: 1; min-width: 0; }
.shop-cart-name { font-size: 14px; font-weight: 600; color: #1e293b; text-decoration: none; }
.shop-cart-name:hover { color: #6366f1; }
.shop-cart-price { font-size: 13px; color: #94a3b8; margin-top: 4px; }
.shop-cart-qty { display: flex; gap: 8px; align-items: center; }
.shop-cart-qty input { width: 64px; height: 38px; text-align: center; border: 1.5px solid #eef1f7; border-radius: 10px; }
.shop-cart-subtotal { font-size: 16px; font-weight: 700; min-width: 80px; text-align: right; }
.shop-cart-remove { width: 36px; height: 36px; border: none; background: #f1f4f9; border-radius: 10px; color: #94a3b8; cursor: pointer; display: grid; place-items: center; }
.shop-cart-remove:hover { background: #fee2e2; color: #ef4444; }

.shop-cart-summary, .shop-checkout-summary {
    background: #fff; border: 1px solid #eef1f7; border-radius: 16px; padding: 22px;
}
.shop-cart-summary h3, .shop-checkout-summary h3 { font-size: 15px; margin-bottom: 14px; }
.shop-summary-row { display: flex; justify-content: space-between; padding: 10px 0; font-size: 14px; color: #64748b; }
.shop-summary-row b { color: #1e293b; }
.shop-summary-total { border-top: 1px dashed #eef1f7; margin-top: 8px; font-weight: 700; font-size: 16px; color: #1e293b; }
.shop-summary-total b { color: #ec4899; font-size: 20px; }
.shop-summary-line { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: #64748b; }

.shop-checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 22px; align-items: start; }
.shop-checkout-card { background: #fff; border: 1px solid #eef1f7; border-radius: 16px; padding: 24px; }
.shop-checkout-card h3 { font-size: 15px; margin-bottom: 16px; }

.shop-success { max-width: 560px; margin: 40px auto; text-align: center; background: #fff; border: 1px solid #eef1f7; border-radius: 22px; padding: 48px 40px; }
.shop-success-icon { width: 80px; height: 80px; margin: 0 auto 20px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #10b981, #06b6d4); }
.shop-success h1 { font-size: 24px; margin-bottom: 8px; }
.shop-success > p { color: #64748b; font-size: 14px; }
.shop-success-order { text-align: left; margin: 24px 0; background: #f8f9fd; border-radius: 14px; padding: 16px 20px; }
.shop-success-order .desc-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.shop-success-order .desc-row span { color: #94a3b8; }
.shop-success-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
    .shop-cart-layout, .shop-checkout-layout { grid-template-columns: 1fr; }
    .shop-cart-item { flex-wrap: wrap; }
}

/* ---------- 前台登录/注册 ---------- */
.shop-auth { display: flex; justify-content: center; padding: 40px 20px; }
.shop-auth-card {
    width: 100%; max-width: 440px; background: #fff;
    border: 1px solid #eef1f7; border-radius: 20px; padding: 36px 34px;
}
.shop-auth-card h2 { font-size: 22px; font-weight: 800; }
.shop-auth-card .auth-switch { font-size: 13px; color: #94a3b8; margin: 6px 0 24px; }
.shop-auth-card .auth-switch a { color: #6366f1; font-weight: 600; }

/* ---------- 账户 ---------- */
.shop-account-card, .shop-order-card {
    background: #fff; border: 1px solid #eef1f7; border-radius: 18px; padding: 24px;
}
.shop-account-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #eef1f7; }
.shop-account-avatar {
    width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
    color: #fff; font-size: 20px; font-weight: 700; background: linear-gradient(135deg, #6366f1, #06b6d4);
}
.shop-account-head b { display: block; font-size: 16px; }
.shop-account-head span { font-size: 13px; color: #94a3b8; }
.shop-account-meta { padding: 16px 0; }
.shop-account-meta .desc-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; }
.shop-account-meta .desc-row span { color: #94a3b8; }
.shop-account-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }

/* ---------- 订单列表 ---------- */
.shop-orders-list { display: flex; flex-direction: column; gap: 14px; }
.shop-order-card { display: block; text-decoration: none; color: inherit; transition: all .2s; }
.shop-order-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(30,41,59,.1); }
.shop-order-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop-order-no { font-weight: 700; font-size: 14px; }
.shop-order-body { display: flex; align-items: center; justify-content: space-between; }
.shop-order-time { font-size: 13px; color: #94a3b8; }
.shop-order-amount { font-size: 18px; color: #ec4899; }
.shop-order-status { font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.shop-status-pending   { background: #fef3c7; color: #d97706; }
.shop-status-paid      { background: #dbeafe; color: #2563eb; }
.shop-status-shipped   { background: #ede9fe; color: #7c3aed; }
.shop-status-completed { background: #d1fae5; color: #059669; }
.shop-status-cancelled { background: #f1f5f9; color: #64748b; }
.shop-status-refunded  { background: #fee2e2; color: #dc2626; }
/* ============================================================
   Home v2 · 商业级首页样式
   ============================================================ */

/* ① 公告条 */
.sh-announce {
    background: linear-gradient(90deg, #4f46e5, #7c3aed, #06b6d4);
    color: #fff;
    font-size: 13px;
    padding: 10px 0;
    text-align: center;
    letter-spacing: .3px;
}
.sh-announce-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.sh-announce-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,.8);
    animation: sh-pulse 1.6s infinite;
}
@keyframes sh-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
    70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* ② Hero */
.sh-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: #fff;
    padding: 90px 0 100px;
}
.sh-hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    pointer-events: none;
}
.sh-hero-glow-1 {
    width: 500px; height: 500px;
    background: #6366f1;
    top: -200px; left: -100px;
    animation: sh-float 10s ease-in-out infinite;
}
.sh-hero-glow-2 {
    width: 400px; height: 400px;
    background: #06b6d4;
    bottom: -180px; right: -80px;
    animation: sh-float 12s ease-in-out infinite reverse;
}
@keyframes sh-float {
    0%,100% { transform: translate(0,0); }
    50% { transform: translate(20px,-30px); }
}
.sh-hero-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}
.sh-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    border-radius: 999px;
    font-size: 13px;
    color: #c7d2fe;
    margin-bottom: 24px;
}
.sh-hero-tag-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}
.sh-hero-title {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.5px;
    margin-bottom: 18px;
    background: linear-gradient(120deg, #fff 30%, #a5b4fc 70%, #67e8f9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sh-hero-sub {
    font-size: 16px;
    color: #cbd5e1;
    margin-bottom: 34px;
    max-width: 520px;
    line-height: 1.7;
}
.sh-hero-search {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
    max-width: 520px;
    margin-bottom: 36px;
    transition: border-color .25s, box-shadow .25s;
}
.sh-hero-search:focus-within {
    border-color: rgba(99,102,241,.7);
    box-shadow: 0 0 0 4px rgba(99,102,241,.18);
}
.sh-hero-search-icon {
    display: inline-flex;
    color: #94a3b8;
    margin-right: 10px;
}
.sh-hero-search input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 14px;
    padding: 12px 0;
}
.sh-hero-search input::placeholder { color: #94a3b8; }
.sh-hero-search button {
    padding: 12px 26px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(90deg, #6366f1, #06b6d4);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.sh-hero-search button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(99,102,241,.5);
}

.sh-hero-stats {
    display: flex;
    gap: 40px;
}
.sh-stat b {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
}
.sh-stat > span {
    font-size: 28px;
    font-weight: 800;
    color: #a5b4fc;
    margin-left: 2px;
}
.sh-stat em {
    display: block;
    font-style: normal;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 4px;
    letter-spacing: .5px;
}

.sh-hero-visual {
    display: flex;
    justify-content: center;
}
.sh-hero-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(20px);
    border-radius: 24px;
    padding: 36px 32px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
    animation: sh-card-rise .8s cubic-bezier(.2,.8,.2,1);
}
@keyframes sh-card-rise {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: none; }
}
.sh-hero-card-icon {
    width: 72px; height: 72px;
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    margin-bottom: 22px;
    color: #fff;
}
.sh-hero-card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 8px;
}
.sh-hero-card-sub {
    font-size: 14px;
    color: #cbd5e1;
    margin-bottom: 22px;
    line-height: 1.7;
}
.sh-hero-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sh-hero-card-tags span {
    padding: 6px 14px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    font-size: 12px;
    color: #e0e7ff;
}

/* ③ 特色服务 */
.sh-features {
    background: #fff;
    padding: 40px 0;
    border-bottom: 1px solid #f1f5f9;
}
.sh-features-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
.sh-feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.sh-feature-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    margin-bottom: 8px;
}
.sh-feature-icon.c1 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.sh-feature-icon.c2 { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.sh-feature-icon.c3 { background: linear-gradient(135deg, #10b981, #06b6d4); }
.sh-feature-icon.c4 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.sh-feature b {
    font-size: 15px;
    color: #0f172a;
    font-weight: 700;
}
.sh-feature span {
    font-size: 13px;
    color: #64748b;
}

/* ④⑤ Section */
.sh-section {
    max-width: 1280px;
    margin: 0 auto;
    padding: 70px 24px;
}
.sh-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 36px;
}
.sh-section-title {
    font-size: 30px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.5px;
    margin-bottom: 6px;
}
.sh-section-sub {
    font-size: 14px;
    color: #64748b;
}
.sh-section-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #6366f1;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: gap .2s;
}
.sh-section-more:hover { gap: 8px; }

/* 分类卡片 */
.sh-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}
.sh-cat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    text-decoration: none;
    color: #0f172a;
    transition: all .25s cubic-bezier(.2,.8,.2,1);
    overflow: hidden;
}
.sh-cat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(99,102,241,.06), rgba(6,182,212,.06));
    opacity: 0;
    transition: opacity .25s;
}
.sh-cat-card:hover {
    transform: translateY(-4px);
    border-color: #c7d2fe;
    box-shadow: 0 20px 40px -20px rgba(99,102,241,.35);
}
.sh-cat-card:hover::before { opacity: 1; }
.sh-cat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #6366f1;
    flex-shrink: 0;
}
.sh-cat-card b { flex: 1; font-size: 15px; font-weight: 700; }
.sh-cat-arrow {
    color: #cbd5e1;
    transition: transform .25s, color .25s;
}
.sh-cat-card:hover .sh-cat-arrow {
    transform: translateX(4px);
    color: #6366f1;
}

/* 商品卡片 */
.sh-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}
.sh-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;
    text-decoration: none;
    color: #0f172a;
    transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.sh-product-card:hover {
    transform: translateY(-6px);
    border-color: #c7d2fe;
    box-shadow: 0 30px 50px -25px rgba(15,23,42,.25);
}
.sh-product-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 5px 12px;
    background: linear-gradient(90deg, #ef4444, #f59e0b);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: .5px;
    box-shadow: 0 4px 12px rgba(239,68,68,.35);
}
.sh-product-img {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f8fafc, #eef2ff);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.sh-product-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.sh-product-card:hover .sh-product-img img { transform: scale(1.06); }
.sh-product-img-ph { color: #cbd5e1; }
.sh-product-info { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.sh-product-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 42px;
}
.sh-product-sub {
    font-size: 12.5px;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sh-product-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
}
.sh-product-price {
    font-size: 20px;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: -.3px;
}
.sh-price-symbol { font-size: 14px; margin-right: 1px; }
.sh-product-origin {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: #64748b;
    padding: 4px 10px;
    background: #f1f5f9;
    border-radius: 999px;
}

.sh-empty {
    text-align: center;
    padding: 60px 20px;
    color: #94a3b8;
}
.sh-empty p { margin-top: 12px; }

/* ⑥ Newsletter */
.sh-newsletter {
    background: linear-gradient(120deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
    color: #fff;
    padding: 70px 0;
    position: relative;
    overflow: hidden;
}
.sh-newsletter::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(99,102,241,.6), transparent 70%);
    filter: blur(60px);
}
.sh-newsletter-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}
.sh-newsletter-copy h3 {
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -.3px;
}
.sh-newsletter-copy p { color: #cbd5e1; font-size: 14px; }
.sh-newsletter-form {
    display: flex;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: 5px 5px 5px 22px;
    width: 100%;
    max-width: 460px;
}
.sh-newsletter-form input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font-size: 14px;
}
.sh-newsletter-form input::placeholder { color: #94a3b8; }
.sh-newsletter-form button {
    padding: 12px 26px;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(90deg, #6366f1, #06b6d4);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: transform .2s;
}
.sh-newsletter-form button:hover { transform: translateY(-1px); }

/* 响应式 */
@media (max-width: 960px) {
    .sh-hero-inner { grid-template-columns: 1fr; gap: 40px; }
    .sh-hero-title { font-size: 38px; }
    .sh-features-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .sh-newsletter-inner { flex-direction: column; align-items: flex-start; }
    .sh-section-title { font-size: 24px; }
}
@media (max-width: 640px) {
    .sh-hero { padding: 60px 0 70px; }
    .sh-hero-title { font-size: 30px; }
    .sh-hero-stats { gap: 22px; }
    .sh-stat b, .sh-stat > span { font-size: 22px; }
    .sh-features-inner { grid-template-columns: 1fr; }
    .sh-section { padding: 50px 20px; }
    .sh-section-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}


/* ============================================================
   Home v3 · 视觉精修（覆盖 v2）
   ============================================================ */

/* --- 公告条：改成深色金属质感 --- */
.sh-announce {
    background: linear-gradient(90deg, #0b1220 0%, #1a1f3a 50%, #0b1220 100%);
    color: #cbd5e1;
    font-size: 12.5px;
    padding: 9px 0;
    letter-spacing: .4px;
    border-bottom: 1px solid rgba(148,163,184,.08);
    position: relative;
    overflow: hidden;
}
.sh-announce::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.35), transparent);
    animation: sh-announce-shine 6s linear infinite;
    pointer-events: none;
}
@keyframes sh-announce-shine {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.sh-announce-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 12px #10b981, 0 0 0 4px rgba(16,185,129,.15);
    animation: none;
}

/* --- Hero：更高、光晕更明显、比例更舒服 --- */
.sh-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(ellipse at 20% 0%, #1e1b4b 0%, #0f172a 45%, #0a0e1a 100%);
    color: #fff;
    padding: 80px 0 100px;
    min-height: 560px;
}
.sh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 30%, rgba(99,102,241,.35), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(6,182,212,.28), transparent 45%),
        radial-gradient(circle at 60% 10%, rgba(139,92,246,.25), transparent 35%);
    pointer-events: none;
    z-index: 0;
}
.sh-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(148,163,184,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}
.sh-hero-inner {
    position: relative;
    z-index: 1;
    grid-template-columns: 1.05fr .95fr;
    gap: 80px;
    align-items: center;
    padding-top: 20px;
}

.sh-hero-glow { display: none; }  /* 用 ::before 光晕替代，避免乱飘 */

.sh-hero-tag {
    padding: 8px 16px;
    background: rgba(99,102,241,.12);
    border: 1px solid rgba(99,102,241,.35);
    color: #a5b4fc;
    font-weight: 500;
    letter-spacing: .5px;
    margin-bottom: 28px;
    box-shadow: 0 0 24px rgba(99,102,241,.15);
}
.sh-hero-tag-dot {
    background: #22d3ee;
    box-shadow: 0 0 10px #22d3ee, 0 0 0 3px rgba(34,211,238,.2);
}

.sh-hero-title {
    font-size: 64px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -1.5px;
    margin-bottom: 22px;
    background: linear-gradient(120deg, #ffffff 20%, #c7d2fe 55%, #67e8f9 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 60px rgba(99,102,241,.3);
}

.sh-hero-sub {
    font-size: 16.5px;
    color: #94a3b8;
    line-height: 1.75;
    margin-bottom: 40px;
    max-width: 500px;
}

/* 搜索框：更大、更悬浮、按钮渐变更亮 */
.sh-hero-search {
    max-width: 540px;
    padding: 8px 8px 8px 24px;
    background: rgba(15,23,42,.65);
    border: 1px solid rgba(99,102,241,.35);
    backdrop-filter: blur(20px);
    border-radius: 999px;
    box-shadow:
        0 20px 50px -20px rgba(99,102,241,.5),
        inset 0 1px 0 rgba(255,255,255,.06);
    margin-bottom: 44px;
    transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.sh-hero-search:hover {
    border-color: rgba(99,102,241,.6);
    box-shadow:
        0 24px 60px -20px rgba(99,102,241,.7),
        inset 0 1px 0 rgba(255,255,255,.08);
}
.sh-hero-search:focus-within {
    border-color: #818cf8;
    box-shadow:
        0 0 0 4px rgba(99,102,241,.2),
        0 24px 60px -20px rgba(99,102,241,.8);
}
.sh-hero-search input { padding: 14px 0; font-size: 14.5px; }
.sh-hero-search button {
    padding: 14px 32px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    font-weight: 700;
    letter-spacing: .3px;
    box-shadow: 0 8px 24px -8px rgba(99,102,241,.8);
}
.sh-hero-search button:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -8px rgba(99,102,241,1);
}

/* 统计数字：更大、更鲜明 */
.sh-hero-stats {
    gap: 48px;
    padding-top: 4px;
    border-top: 1px solid rgba(148,163,184,.12);
    padding-top: 28px;
    max-width: 500px;
}
.sh-stat b {
    font-size: 34px;
    font-weight: 900;
    background: linear-gradient(135deg, #fff, #c7d2fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    letter-spacing: -1px;
}
.sh-stat > span {
    font-size: 34px;
    font-weight: 900;
    color: #67e8f9;
    letter-spacing: -1px;
    text-shadow: 0 0 20px rgba(103,232,249,.4);
}
.sh-stat em {
    color: #94a3b8;
    font-size: 12.5px;
    margin-top: 6px;
    letter-spacing: .8px;
    text-transform: uppercase;
}

/* 右侧玻璃卡片：更大、更精致、带光边 */
.sh-hero-visual { align-items: center; justify-content: flex-end; }
.sh-hero-card {
    background:
        linear-gradient(135deg, rgba(99,102,241,.12) 0%, rgba(6,182,212,.08) 100%),
        rgba(15,23,42,.6);
    border: 1px solid rgba(148,163,184,.18);
    backdrop-filter: blur(24px);
    border-radius: 28px;
    padding: 42px 38px;
    max-width: 420px;
    position: relative;
    box-shadow:
        0 40px 100px -30px rgba(0,0,0,.7),
        inset 0 1px 0 rgba(255,255,255,.08);
}
.sh-hero-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 29px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99,102,241,.6), rgba(6,182,212,.3), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.sh-hero-card-icon {
    width: 84px; height: 84px;
    border-radius: 22px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);
    box-shadow:
        0 16px 40px -10px rgba(99,102,241,.7),
        inset 0 1px 0 rgba(255,255,255,.3);
    margin-bottom: 26px;
}
.sh-hero-card-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.3px;
    margin-bottom: 10px;
}
.sh-hero-card-sub {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 26px;
}

/* 国家标签：大一点、更像 chips */
.sh-hero-card-tags { gap: 10px; }
.sh-hero-card-tags span {
    padding: 8px 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(148,163,184,.2);
    color: #e2e8f0;
    font-size: 12.5px;
    font-weight: 500;
    transition: all .2s;
}
.sh-hero-card-tags span:hover {
    background: rgba(99,102,241,.15);
    border-color: rgba(99,102,241,.5);
    transform: translateY(-2px);
}

/* Hero 底部过渡到白色 */
.sh-hero::after { z-index: 0; }
.sh-hero-inner::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(99,102,241,.4), transparent);
}

/* ============================================================
   Home v3.2 · 强制铺满全屏
   ============================================================ */

html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }

.shop-main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Hero 全屏铺满 */
.sh-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding: 90px 0 110px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* Hero 内容仍限制 1280px 居中 */
.sh-hero > .sh-hero-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 公告条铺满 */
.sh-announce {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}
.sh-announce > .sh-announce-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

/* 特色服务铺满 */
.sh-features {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}
.sh-features > .sh-features-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

/* Newsletter 铺满 */
.sh-newsletter {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}
.sh-newsletter > .sh-newsletter-inner {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
}

/* Section 保持 1280 居中 */
.sh-section {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 70px 40px !important;
    box-sizing: border-box !important;
}

/* ============================================================
   v3.4 · 全站铺满（精准版）
   ============================================================ */

/* 1. body/main 铺满 */
.shop-body { margin: 0; padding: 0; overflow-x: hidden; }
.shop-main { max-width: 100%; width: 100%; padding: 0; margin: 0; }

/* 2. 商品页容器铺满 */
.shop-catalog {
    max-width: 100% !important;
    width: 100% !important;
    padding: 40px 60px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 3. 商品网格铺满 —— 每行根据屏幕宽度自动排更多列 */
.shop-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
}

/* 4. 首页的卡片网格也铺满 */
.sh-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
}

/* 5. 首页 Section 保持左右 60px 内边距（不要贴边） */
.sh-section {
    max-width: 100% !important;
    padding: 70px 60px !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

/* 6. 搜索过滤器也要铺满 */
.shop-filter {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 7. 公告/hero/features/newsletter 保持全屏，内部 1280 居中 */
.sh-announce > .sh-announce-inner,
.sh-hero > .sh-hero-inner,
.sh-features > .sh-features-inner,
.sh-newsletter > .sh-newsletter-inner {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 60px !important;
    box-sizing: border-box !important;
}

/* 8. 大屏适配（>1600px 时，卡片再宽一点） */
@media (min-width: 1600px) {
    .shop-product-grid,
    .sh-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
        gap: 26px !important;
    }
    .shop-catalog { padding: 40px 80px !important; }
    .sh-section { padding: 70px 80px !important; }
}

/* ============================================================
   v3.5 · 全站 100% 铺满（含商品页 / 详情页）
   ============================================================ */

/* 1. body/main 强制铺满 */
html, body, .shop-body {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
}
.shop-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* 2. 商品列表页铺满 */
.shop-catalog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 40px 60px !important;
    box-sizing: border-box !important;
}

/* 3. 商品详情页容器铺满 */
.shop-product-detail,
.shop-detail,
.shop-product,
.shop-product-page,
.shop-product-wrap,
.shop-product-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 40px 60px !important;
    box-sizing: border-box !important;
}

/* 4. 详情页左右两栏：图片左、信息右，撑满宽度 */
.shop-product-detail .shop-detail-grid,
.shop-detail-grid,
.shop-product-detail-grid,
.shop-product-detail-inner {
    display: grid !important;
    grid-template-columns: minmax(400px, 1fr) minmax(400px, 1.2fr) !important;
    gap: 60px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 5. 商品详情里所有卡片铺满 */
.shop-product-detail .card,
.shop-detail .card,
.shop-product-page .card {
    max-width: 100% !important;
    width: 100% !important;
}

/* 6. 商品网格铺满 */
.shop-product-grid,
.sh-product-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 7. 首页 Hero / Section 仍保持全宽 */
.sh-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 70px 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* 8. 搜索栏铺满 */
.shop-filter,
.shop-filter-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* 9. 宽屏优化 */
@media (min-width: 1600px) {
    .shop-catalog,
    .shop-product-detail,
    .shop-detail,
    .shop-product-page { padding: 24px 60px 80px !important; }
    .sh-section { padding: 80px 60px !important; }
    .shop-product-grid,
    .sh-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
    }
}

/* ============================================================
   v3.6 · 精准铺满（商品页 + 详情页）
   ============================================================ */

/* 详情页外层铺满 */
.shop-detail {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.shop-detail-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 40px 40px !important;
    box-sizing: border-box !important;
}

/* 详情页两栏：左侧图片 + 右侧信息，铺满整屏 */
.shop-detail-grid {
    display: grid !important;
    grid-template-columns: minmax(360px, 1.1fr) minmax(400px, 1fr) !important;
    gap: 60px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
}

/* 详情页图片放大一点 */
.shop-detail-img {
    width: 100% !important;
    max-width: 100% !important;
}
.shop-detail-img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 18px !important;
}

/* 详情页商品描述整宽 */
.shop-detail-desc {
    width: 100% !important;
    max-width: 100% !important;
}

/* 相关商品 section 铺满 */
.shop-detail .shop-section {
    width: 100% !important;
    max-width: 100% !important;
    padding: 60px 40px !important;
    box-sizing: border-box !important;
}

/* 商品列表页铺满（再次确认） */
.shop-catalog {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 24px 40px 60px !important;
    box-sizing: border-box !important;
}
.shop-catalog .shop-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
    gap: 22px !important;
}

/* 大屏优化 */
@media (min-width: 1600px) {
    .shop-detail-main { padding: 30px 60px 60px !important; }
    .shop-detail-grid { gap: 80px !important; }
    .shop-detail .shop-section { padding: 70px 60px !important; }
    .shop-catalog { padding: 30px 60px 80px !important; }
}

/* 小屏适配 */
@media (max-width: 900px) {
    .shop-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
    .shop-detail-main { padding: 20px 20px 40px !important; }
    .shop-catalog { padding: 20px 20px 40px !important; }
}

/* 页头铺满 */
.shop-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.shop-header-inner {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 40px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}
@media (min-width: 1600px) {
    .shop-header-inner { padding: 0 60px !important; }
}

/* ============================================================
   NovaMall · 商业级 UI v4
   - 品牌色贯穿 / 渐变卡片 / 悬浮动效 / 光晕 / 玻璃拟态
   ============================================================ */

:root {
    --nm-brand-1: #6366f1;
    --nm-brand-2: #8b5cf6;
    --nm-brand-3: #06b6d4;
    --nm-brand-4: #ec4899;
    --nm-ink: #0f172a;
    --nm-ink-2: #1e293b;
    --nm-muted: #64748b;
    --nm-line: #e2e8f0;
    --nm-bg: #f8fafc;
}

/* ---------- 页面整体背景：加一层极淡的渐变网格 ---------- */
.shop-body {
    background:
        radial-gradient(circle at 10% 0%, rgba(99,102,241,.06), transparent 45%),
        radial-gradient(circle at 90% 100%, rgba(6,182,212,.05), transparent 40%),
        #f8fafc !important;
}

/* ============================================================
   1. 商品卡片：渐变边框 + 悬浮上浮 + 图片放大 + 渐变阴影
   ============================================================ */
.shop-product-card,
.sh-product-card {
    position: relative;
    border-radius: 20px !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(99,102,241,.35), rgba(6,182,212,.25), rgba(139,92,246,.2)) border-box !important;
    box-shadow:
        0 1px 2px rgba(15,23,42,.04),
        0 8px 24px -8px rgba(99,102,241,.10) !important;
    transition: all .35s cubic-bezier(.2,.8,.2,1) !important;
    overflow: hidden;
}
.shop-product-card::before,
.sh-product-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(99,102,241,.06), rgba(6,182,212,.04), transparent 60%);
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
    z-index: 0;
}
.shop-product-card:hover,
.sh-product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 4px 8px rgba(15,23,42,.06),
        0 28px 60px -20px rgba(99,102,241,.45) !important;
    border-color: transparent !important;
}
.shop-product-card:hover::before,
.sh-product-card:hover::before { opacity: 1; }

.shop-product-img,
.sh-product-img {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #ecfeff 100%) !important;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.shop-product-img::after,
.sh-product-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.6), transparent 60%);
    pointer-events: none;
}
.shop-product-img img,
.sh-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.8,.2,1) !important;
}
.shop-product-card:hover .shop-product-img img,
.sh-product-card:hover .sh-product-img img {
    transform: scale(1.08) !important;
}

/* 商品名 / 价格 */
.shop-product-name,
.sh-product-name {
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.2px;
}
.shop-product-price,
.sh-product-price {
    background: linear-gradient(135deg, #ef4444, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 800 !important;
}

/* 悬浮时图片上出现「快速加入购物车」按钮 */
.shop-product-card .shop-product-img::before,
.sh-product-card .sh-product-img::before {
    content: '🛒  快速加购';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 18px;
    border-radius: 999px;
    opacity: 0;
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 10px 30px -8px rgba(99,102,241,.8);
    white-space: nowrap;
}
.shop-product-card:hover .shop-product-img::before,
.sh-product-card:hover .sh-product-img::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================
   2. 分类卡片：渐变底 + 图标浮动
   ============================================================ */
.sh-cat-card,
.shop-category-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    border: 1px solid transparent !important;
    background-clip: padding-box !important;
    position: relative;
    border-radius: 18px !important;
    transition: all .35s cubic-bezier(.2,.8,.2,1) !important;
    box-shadow: 0 4px 16px -6px rgba(15,23,42,.06) !important;
}
.sh-cat-card::before,
.shop-category-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 19px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(99,102,241,.5), rgba(6,182,212,.35), rgba(139,92,246,.4));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
}
.sh-cat-card:hover::before,
.shop-category-card:hover::before { opacity: 1; }
.sh-cat-card:hover,
.shop-category-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 24px 48px -16px rgba(99,102,241,.35) !important;
}
.sh-cat-icon {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #cffafe 100%) !important;
    color: #6366f1 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.7),
        0 8px 20px -8px rgba(99,102,241,.35) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sh-cat-card:hover .sh-cat-icon { transform: scale(1.1) rotate(-4deg); }

/* ============================================================
   3. 特色服务卡片：柔和渐变底 + 玻璃拟态
   ============================================================ */
.sh-feature {
    padding: 24px 22px !important;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid rgba(226,232,240,.8);
    border-radius: 18px;
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    position: relative;
    overflow: hidden;
}
.sh-feature::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99,102,241,.08), transparent 50%);
    opacity: 0;
    transition: opacity .35s;
}
.sh-feature:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -16px rgba(99,102,241,.3);
    border-color: rgba(99,102,241,.3);
}
.sh-feature:hover::before { opacity: 1; }
.sh-feature-icon {
    width: 52px !important;
    height: 52px !important;
    border-radius: 16px !important;
    box-shadow:
        0 12px 28px -10px rgba(99,102,241,.6),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sh-feature:hover .sh-feature-icon { transform: scale(1.08) rotate(-5deg); }
.sh-feature b {
    font-size: 15.5px !important;
    background: linear-gradient(135deg, #0f172a, #334155);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ============================================================
   4. 页面级动效：Hero 流光 + 卡片入场
   ============================================================ */
.sh-hero::before {
    animation: sh-hero-shift 18s ease-in-out infinite alternate;
}
@keyframes sh-hero-shift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, 20px) scale(1.05); }
}

/* 卡片入场动画（配合 JS） */
.sh-product-card, .shop-product-card, .sh-cat-card {
    animation: sh-card-in .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes sh-card-in {
    from { opacity: 0; transform: translateY(18px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* 商品卡片错峰入场 */
.shop-product-grid > *:nth-child(1) { animation-delay: 0ms; }
.shop-product-grid > *:nth-child(2) { animation-delay: 40ms; }
.shop-product-grid > *:nth-child(3) { animation-delay: 80ms; }
.shop-product-grid > *:nth-child(4) { animation-delay: 120ms; }
.shop-product-grid > *:nth-child(5) { animation-delay: 160ms; }
.shop-product-grid > *:nth-child(6) { animation-delay: 200ms; }
.shop-product-grid > *:nth-child(7) { animation-delay: 240ms; }
.shop-product-grid > *:nth-child(8) { animation-delay: 280ms; }

/* ============================================================
   5. 顶部导航栏：玻璃拟态 + 流光底边
   ============================================================ */
.shop-header {
    background: rgba(255,255,255,.85) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid rgba(226,232,240,.6) !important;
    position: sticky;
    top: 0;
    z-index: 100;
}
.shop-nav a.active {
    background: linear-gradient(135deg, #4c1d95 0%, #312e81 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px -8px rgba(76,29,149,.6) !important;
    border-radius: 10px !important;
}
.shop-login-link {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 8px 24px -8px rgba(99,102,241,.8);
    transition: all .25s;
}
.shop-login-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(99,102,241,1);
}

/* ============================================================
   6. 筛选栏 / 搜索框：圆角 + 渐变按钮
   ============================================================ */
.shop-filter-form {
    background: #fff;
    border: 1px solid rgba(226,232,240,.8);
    border-radius: 999px;
    padding: 6px 6px 6px 18px;
    box-shadow: 0 8px 24px -12px rgba(15,23,42,.12);
    display: flex;
    align-items: center;
    gap: 10px;
}
.shop-search-box {
    background: transparent !important;
    border: 0 !important;
}
.shop-filter-form .btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 10px 26px !important;
    font-weight: 600 !important;
    box-shadow: 0 10px 24px -8px rgba(99,102,241,.7);
    transition: all .25s;
}
.shop-filter-form .btn-primary:hover { transform: translateY(-2px); }
.shop-filter-form select {
    background: transparent !important;
    border: 0 !important;
    font-weight: 500;
}

/* ============================================================
   7. 分页 / 底部
   ============================================================ */
.pagination .page {
    border-radius: 10px !important;
    transition: all .25s;
}
.pagination .page:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff !important;
    border-color: transparent !important;
    transform: translateY(-2px);
}
.pagination .page.current {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ============================================================
   8. 滚动条美化
   ============================================================ */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #c7d2fe, #cffafe);
    border-radius: 999px;
    border: 2px solid #f8fafc;
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #a5b4fc, #67e8f9);
}

/* 鼠标跟随光斑 */
.shop-product-card::after,
.sh-product-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mx, 50%) var(--my, 50%),
        rgba(99,102,241,.10),
        transparent 40%
    );
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
    z-index: 1;
}
.shop-product-card:hover::after,
.sh-product-card:hover::after { opacity: 1; }

/* 详情页：图片圆角 + 阴影 + hover 放大 */
.shop-detail-img {
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow:
        0 20px 60px -20px rgba(99,102,241,.25),
        0 4px 12px rgba(15,23,42,.04) !important;
    background: linear-gradient(135deg, #eef2ff, #f5f3ff, #ecfeff);
    position: relative;
}
.shop-detail-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.5), transparent 55%);
    pointer-events: none;
}
.shop-detail-title {
    background: linear-gradient(135deg, #0f172a, #334155);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800 !important;
    letter-spacing: -.5px;
}
.shop-detail-price {
    font-size: 42px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #ef4444, #ec4899);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    letter-spacing: -1px;
}
.shop-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 16px 40px -12px rgba(99,102,241,.8) !important;
    font-weight: 700 !important;
    transition: all .3s cubic-bezier(.2,.8,.2,1) !important;
}
.shop-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 50px -12px rgba(99,102,241,1) !important;
}
.shop-detail-cat {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #6366f1;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12.5px;
    display: inline-block;
}

/* ============================================================
   v5 · 强制彩色卡片（覆盖 v4 白底）
   ============================================================ */

/* ---------- ① 特色服务卡片：彩色渐变底 ---------- */
.sh-features-inner { gap: 24px !important; }

.sh-feature {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #ecfeff 100%) !important;
    border: 1px solid rgba(99,102,241,.15) !important;
    border-radius: 22px !important;
    padding: 28px 26px !important;
    box-shadow:
        0 4px 12px rgba(99,102,241,.06),
        0 20px 40px -20px rgba(99,102,241,.25) !important;
    position: relative;
    overflow: hidden;
    transition: all .35s cubic-bezier(.2,.8,.2,1);
}
.sh-feature:nth-child(1) { background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important; }
.sh-feature:nth-child(2) { background: linear-gradient(135deg, #ecfeff, #cffafe) !important; }
.sh-feature:nth-child(3) { background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important; }
.sh-feature:nth-child(4) { background: linear-gradient(135deg, #fef3c7, #fed7aa) !important; }

.sh-feature::before {
    content: '';
    position: absolute;
    top: -60%;
    right: -60%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,.7), transparent 45%);
    opacity: 0;
    transition: opacity .4s;
    pointer-events: none;
}
.sh-feature:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 8px 16px rgba(99,102,241,.12),
        0 30px 60px -20px rgba(99,102,241,.5) !important;
}
.sh-feature:hover::before { opacity: 1; }

.sh-feature-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
    box-shadow:
        0 12px 28px -10px rgba(99,102,241,.6),
        inset 0 1px 0 rgba(255,255,255,.4) !important;
    margin-bottom: 14px !important;
}
.sh-feature b {
    font-size: 16.5px !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
    display: block;
    margin-bottom: 4px;
}
.sh-feature span {
    font-size: 13px !important;
    color: #64748b !important;
}

/* ---------- ② 分类卡片：彩色渐变底 + 大图标 ---------- */
.sh-cat-grid { gap: 20px !important; }

.sh-cat-card {
    background: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%) !important;
    border: 1px solid rgba(99,102,241,.12) !important;
    border-radius: 22px !important;
    padding: 26px 24px !important;
    box-shadow:
        0 4px 12px rgba(99,102,241,.06),
        0 20px 40px -20px rgba(99,102,241,.2) !important;
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    position: relative;
    overflow: hidden;
}
.sh-cat-card:nth-child(1) { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important; }
.sh-cat-card:nth-child(2) { background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%) !important; }
.sh-cat-card:nth-child(3) { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important; }
.sh-cat-card:nth-child(4) { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important; }
.sh-cat-card:nth-child(5) { background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%) !important; }
.sh-cat-card:nth-child(6) { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important; }

.sh-cat-card:hover {
    transform: translateY(-8px) scale(1.02) !important;
    box-shadow:
        0 8px 16px rgba(99,102,241,.12),
        0 32px 60px -20px rgba(99,102,241,.45) !important;
}
.sh-cat-icon {
    width: 60px !important;
    height: 60px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow:
        0 12px 28px -10px rgba(99,102,241,.7),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
    margin-right: 18px;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sh-cat-card:hover .sh-cat-icon {
    transform: scale(1.12) rotate(-6deg);
}
.sh-cat-card b {
    font-size: 16.5px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.3;
}
.sh-cat-card:hover b { color: #6366f1; }

/* ---------- ③ 商品卡片：柔和彩底 + 强阴影 ---------- */
.shop-product-card,
.sh-product-card {
    border-radius: 22px !important;
    overflow: hidden;
    background: #fff !important;
    box-shadow:
        0 4px 12px rgba(15,23,42,.05),
        0 20px 40px -24px rgba(99,102,241,.35) !important;
    transition: all .35s cubic-bezier(.2,.8,.2,1) !important;
}
.shop-product-card:hover,
.sh-product-card:hover {
    transform: translateY(-10px) !important;
    box-shadow:
        0 8px 16px rgba(15,23,42,.08),
        0 40px 80px -24px rgba(99,102,241,.6) !important;
}
.shop-product-img,
.sh-product-img {
    background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 50%, #ecfeff 100%) !important;
    aspect-ratio: 1 / 1;
    position: relative;
    overflow: hidden;
}
.shop-product-img::after,
.sh-product-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.75), transparent 55%);
    pointer-events: none;
}

/* ---------- ④ 商品价格：渐变 + 大字号 ---------- */
.shop-product-price,
.sh-product-price {
    font-size: 22px !important;
    font-weight: 900 !important;
    letter-spacing: -.5px;
    background: linear-gradient(135deg, #ef4444 0%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* ---------- ⑤ 商品卡片的分类标签 ---------- */
.shop-product-origin,
.sh-product-origin {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
    color: #6366f1 !important;
    font-weight: 600 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
}

/* ---------- ⑥ 商品卡片悬浮时显示「+购物车」 ---------- */
.shop-product-img::before,
.sh-product-img::before {
    content: '+ 加入购物车';
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%) translateY(24px);
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 10px 22px;
    border-radius: 999px;
    opacity: 0;
    transition: all .35s cubic-bezier(.2,.8,.2,1);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 12px 32px -8px rgba(99,102,241,.9);
    white-space: nowrap;
}
.shop-product-card:hover .shop-product-img::before,
.sh-product-card:hover .sh-product-img::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---------- ⑦ 商品卡片名 / 副标题 ---------- */
.shop-product-name,
.sh-product-name {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -.2px;
}
.shop-product-sub,
.sh-product-sub {
    color: #94a3b8 !important;
    font-size: 12.5px !important;
}

/* ---------- ⑧ 页面背景：极淡渐变，避免死灰 ---------- */
.shop-body {
    background:
        radial-gradient(ellipse at 10% 0%, rgba(99,102,241,.08), transparent 50%),
        radial-gradient(ellipse at 90% 100%, rgba(6,182,212,.06), transparent 45%),
        linear-gradient(180deg, #fafbff 0%, #f5f7ff 100%) !important;
}

/* ============================================================
   v5.1 · 修复商品卡片图片区不铺满
   ============================================================ */

/* 卡片本身用 flex 竖直布局，宽度严格跟随网格 */
.shop-product-card,
.sh-product-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 图片区强制铺满宽度 */
.shop-product-img,
.sh-product-img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    position: relative;
    overflow: hidden;
}

/* 图片本身也铺满 */
.shop-product-img img,
.sh-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 没有图片时的占位 svg 居中 */
.shop-product-img > svg,
.sh-product-img > svg {
    width: 48px !important;
    height: 48px !important;
    opacity: .5;
}

/* 信息区铺满宽度 */
.shop-product-info,
.sh-product-info {
    width: 100% !important;
    padding: 16px 18px 20px !important;
    box-sizing: border-box !important;
}

/* 商品名和副标题：让它们占满一行，不撑宽 */
.shop-product-name,
.sh-product-name {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shop-product-sub,
.sh-product-sub {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 价格 + 产地一行 */
.shop-product-foot,
.sh-product-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 8px;
}

/* 「快速加购」按钮位置调整——不要贴边 */
.shop-product-img::before,
.sh-product-img::before {
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(24px) !important;
}

/* ============================================================
   v5.2 · 所有网格卡片强制对齐（不歪不斜）
   ============================================================ */
.shop-product-grid,
.sh-product-grid {
    align-items: stretch !important;
}

.shop-product-grid > *,
.sh-product-grid > * {
    height: 100%;
    min-width: 0;
}

/* 商品网格用 auto-fit 让最后一行卡片拉伸铺满 */
.shop-product-grid,
.sh-product-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 22px !important;
}

/* ============================================================
   v5.3 · 修复快速加购按钮位置 + 清除残留描边
   ============================================================ */

/* 1. 快速加购按钮：贴图片区底部居中 */
.shop-product-img,
.sh-product-img {
    position: relative !important;
}

.shop-product-img::before,
.sh-product-img::before {
    content: '🛒  快速加购' !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    top: auto !important;
    transform: translateX(-50%) translateY(30px) !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 9px 20px !important;
    border-radius: 999px !important;
    opacity: 0 !important;
    transition: all .35s cubic-bezier(.2,.8,.2,1) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    box-shadow: 0 12px 32px -8px rgba(99,102,241,.9) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

.shop-product-card:hover .shop-product-img::before,
.sh-product-card:hover .sh-product-img::before {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* 2. 彻底清除卡片残留描边和伪元素 */
.shop-product-card,
.sh-product-card {
    border: none !important;
    outline: none !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow:
        0 2px 6px rgba(15,23,42,.04),
        0 20px 40px -24px rgba(99,102,241,.35) !important;
}
.shop-product-card::before,
.sh-product-card::before,
.shop-product-card::after,
.sh-product-card::after {
    display: none !important;
    content: none !important;
}

/* 3. 图片区彻底去边框 */
.shop-product-img,
.sh-product-img {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
}

/* 图片本身铺满且居中 */
.shop-product-img img,
.sh-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

/* 占位 svg 居中 */
.shop-product-img > svg,
.sh-product-img > svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    opacity: .35 !important;
}

/* 4. 图片区光晕层也去掉（之前那层 radial 会导致右侧发亮） */
.shop-product-img::after,
.sh-product-img::after {
    display: none !important;
    content: none !important;
}

/* 5. 图片区背景更干净 */
.shop-product-img,
.sh-product-img {
    background: linear-gradient(135deg, #f5f7ff 0%, #eef2ff 100%) !important;
}

/* ============================================================
   v6 · 分类卡片 / 商品卡片 文字排版修复
   ============================================================ */

/* ---------- 1. 分类卡片：紧凑纵向布局 ---------- */
.sh-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 20px !important;
}

.sh-cat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 26px 26px !important;
    gap: 14px !important;
    text-align: left !important;
    min-height: 160px !important;
    position: relative;
    overflow: hidden;
}

/* 图标上移，独立一行 */
.sh-cat-card .sh-cat-icon {
    width: 56px !important;
    height: 56px !important;
    border-radius: 16px !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow:
        0 12px 28px -10px rgba(99,102,241,.7),
        inset 0 1px 0 rgba(255,255,255,.3) !important;
}

/* 文字：横向铺满，强制不折行 */
.sh-cat-card b {
    display: block !important;
    width: 100% !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    letter-spacing: -.2px !important;
    white-space: normal !important;
    word-break: keep-all !important;
    margin: 0 !important;
}

/* 隐藏右侧箭头，视觉更干净 */
.sh-cat-card .sh-cat-arrow {
    display: none !important;
}

/* 悬浮时：整卡上浮 + 图标旋转 */
.sh-cat-card:hover {
    transform: translateY(-8px) !important;
    box-shadow:
        0 8px 16px rgba(99,102,241,.12),
        0 32px 60px -20px rgba(99,102,241,.45) !important;
}
.sh-cat-card:hover .sh-cat-icon {
    transform: scale(1.1) rotate(-6deg);
}

/* ---------- 2. 商品卡片：文字更紧凑、更清晰 ---------- */
.shop-product-info,
.sh-product-info {
    padding: 16px 18px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.shop-product-name,
.sh-product-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    letter-spacing: -.2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.shop-product-sub,
.sh-product-sub {
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.shop-product-foot,
.sh-product-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 6px !important;
    gap: 8px !important;
}

/* 价格更大更抢眼 */
.shop-product-price,
.sh-product-price {
    font-size: 19px !important;
    font-weight: 900 !important;
    letter-spacing: -.5px !important;
    background: linear-gradient(135deg, #ef4444 0%, #ec4899 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* 产地标签：小、圆、颜色柔和 */
.shop-product-origin,
.sh-product-origin {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff) !important;
    color: #6366f1 !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* ---------- 3. HOT / NEW 角标：更精致 ---------- */
.sh-product-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    padding: 5px 12px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    border-radius: 999px !important;
    color: #fff !important;
    z-index: 10 !important;
    box-shadow: 0 6px 16px rgba(239,68,68,.4) !important;
    background: linear-gradient(135deg, #ef4444, #f59e0b) !important;
}

/* ---------- 4. Section 标题排版 ---------- */
.sh-section-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
    color: #0f172a !important;
    line-height: 1.2 !important;
    margin-bottom: 6px !important;
}
.sh-section-sub {
    font-size: 14px !important;
    color: #94a3b8 !important;
    line-height: 1.5 !important;
}
.sh-section-more {
    color: #6366f1 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: gap .2s !important;
}
.sh-section-more:hover { gap: 10px !important; }

/* ---------- 5. 分类 Section 标题左侧装饰线 ---------- */
.sh-section-title {
    position: relative;
    padding-left: 18px;
}
.sh-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 60%;
    background: linear-gradient(180deg, #6366f1, #8b5cf6, #06b6d4);
    border-radius: 999px;
    box-shadow: 0 0 12px rgba(99,102,241,.6);
}

/* ============================================================
   v6.1 · 分类卡片强制一行 4 个
   ============================================================ */

.sh-cat-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
}

/* 中屏（900-1200px）一行 3 个 */
@media (max-width: 1200px) {
    .sh-cat-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

/* 小屏（640-900px）一行 2 个 */
@media (max-width: 900px) {
    .sh-cat-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* 手机（<640px）一行 1 个 */
@media (max-width: 640px) {
    .sh-cat-grid { grid-template-columns: 1fr !important; }
}

/* 分类卡片本身更紧凑一点，一行 4 个时高度别太高 */
.sh-cat-card {
    min-height: 150px !important;
    padding: 24px 22px !important;
}
.sh-cat-card .sh-cat-icon {
    width: 50px !important;
    height: 50px !important;
    border-radius: 14px !important;
}
.sh-cat-card b {
    font-size: 15px !important;
    line-height: 1.4 !important;
}

/* ============================================================
   v6.2 · 彻底修复商品图片区"右侧白条"
   ============================================================ */

/* 1. 强制清掉图片区的 ::before / ::after 所有伪元素 */
.shop-product-img::before,
.shop-product-img::after,
.sh-product-img::before,
.sh-product-img::after {
    display: none !important;
    content: none !important;
    background: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. 图片区：单层渐变，无内阴影、无额外光晕 */
.shop-product-img,
.sh-product-img {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
    background-image: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%) !important;
    box-shadow: none !important;
    filter: none !important;
    border: none !important;
    outline: none !important;
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. 图片本身：铺满、无边框、无内阴影 */
.shop-product-img img,
.sh-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    filter: none !important;
    background: none !important;
}

/* 4. 占位 svg：居中，去掉背景 */
.shop-product-img > svg,
.sh-product-img > svg {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 48px !important;
    height: 48px !important;
    opacity: .35 !important;
    background: none !important;
    color: #a5b4fc !important;
    z-index: 1 !important;
}

/* 5. 卡片本身也不要干扰 */
.shop-product-card,
.sh-product-card {
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
}
.shop-product-card > *,
.sh-product-card > * {
    background-clip: padding-box !important;
}

/* 6. 「快速加购」按钮：悬浮时贴图片区底部 */
.shop-product-img::before,
.sh-product-img::before {
    content: '' !important;
    display: none !important;
}

/* 用一个独立元素模拟悬浮按钮——放到 info 里替代 */
.shop-product-card::after {
    content: '' !important;
    display: none !important;
}

/* 7. 悬浮时用 outline 代替，不加任何背景 */
.shop-product-card:hover .shop-product-img,
.sh-product-card:hover .sh-product-img {
    background: linear-gradient(135deg, #e0e7ff 0%, #dbeafe 100%) !important;
}

/* ============================================================

/* ============================================================
   v8 · 购物车页居中留白（最小改动）
   ============================================================ */

/* 1. 购物车外层：限制宽度居中 */
.shop-cart-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 40px 60px;
    box-sizing: border-box;
}

/* 2. 左右两栏：2:1 布局 */
.shop-cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 30px;
    align-items: start;
}

/* 3. 订单汇总：白色卡片 + sticky */
.shop-cart-summary {
    background: #fff;
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: 0 4px 12px rgba(15,23,42,.04), 0 20px 40px -24px rgba(99,102,241,.2);
    border: 1px solid #f1f5f9;
    position: sticky;
    top: 90px;
}

/* 4. 商品条目：白色卡片 + 圆角 */
.shop-cart-list {
    background: #fff;
    border-radius: 18px;
    padding: 8px 24px;
    box-shadow: 0 4px 12px rgba(15,23,42,.04), 0 20px 40px -24px rgba(99,102,241,.15);
}

@media (max-width: 900px) {
    .shop-cart-layout { grid-template-columns: 1fr; }
    .shop-cart-page { padding: 20px 20px 40px; }
    .shop-cart-summary { position: static; }
}

/* ============================================================
   v8.1 · 购物车页对齐修复
   ============================================================ */

/* 1. 页面标题：左对齐但不贴边，居中容器 */
.shop-page-title {
    max-width: 1200px;
    margin: 0 auto 24px;
    padding: 0 40px;
    font-size: 28px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -.5px;
}

/* 2. 空购物车状态：垂直 + 水平居中 */
.shop-empty {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - 280px) !important;
    gap: 20px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    padding: 40px 20px !important;
}

.shop-empty svg {
    width: 72px !important;
    height: 72px !important;
    opacity: .35 !important;
    color: #a5b4fc !important;
}

.shop-empty p {
    font-size: 15px !important;
    color: #64748b !important;
    margin: 0 !important;
}

.shop-empty .shop-btn {
    padding: 12px 32px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 16px 40px -12px rgba(99,102,241,.7) !important;
    transition: all .3s cubic-bezier(.2,.8,.2,1) !important;
    margin-top: 8px !important;
}
.shop-empty .shop-btn:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 24px 50px -12px rgba(99,102,241,1) !important;
}

/* 3. 购物车有商品时：两列布局，左右留白 */
.shop-cart-layout {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 40px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 30px !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

.shop-cart-list {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 8px 24px !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.04), 0 20px 40px -24px rgba(99,102,241,.15) !important;
}

.shop-cart-summary {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 26px 24px !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.04), 0 20px 40px -24px rgba(99,102,241,.2) !important;
    border: 1px solid #f1f5f9 !important;
    position: sticky !important;
    top: 90px !important;
}

@media (max-width: 900px) {
    .shop-cart-layout { grid-template-columns: 1fr !important; padding: 0 20px !important; }
    .shop-cart-summary { position: static !important; }
    .shop-page-title { padding: 0 20px; font-size: 22px; }
    .shop-empty { min-height: calc(100vh - 320px) !important; }
}

/* ============================================================
   v8.2 · 结算页居中留白
   ============================================================ */

/* 1. 结算页外层容器：居中 1200px */
.shop-checkout,
.shop-checkout-page,
.checkout-page,
.shop-page {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 30px 40px 60px !important;
    box-sizing: border-box !important;
}

/* 2. 页面标题左对齐，但居中容器内 */
.shop-page-title,
.shop-checkout-title {
    font-size: 28px !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    letter-spacing: -.5px !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
}

/* 3. 左右两栏：2:1 布局 */
.shop-checkout-layout,
.shop-checkout-grid,
.checkout-layout,
.checkout-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 30px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* 4. 左侧表单卡片：白底 + 圆角 + 阴影 */
.shop-checkout-form,
.shop-checkout-info,
.checkout-form {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 30px 28px !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.04), 0 20px 40px -24px rgba(99,102,241,.15) !important;
    border: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
}

/* 5. 右侧订单汇总卡片：白底 + 圆角 + sticky */
.shop-checkout-summary,
.checkout-summary,
.shop-summary {
    background: #fff !important;
    border-radius: 18px !important;
    padding: 28px 26px !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.04), 0 20px 40px -24px rgba(99,102,241,.2) !important;
    border: 1px solid #f1f5f9 !important;
    position: sticky !important;
    top: 90px !important;
    box-sizing: border-box !important;
}

/* 6. 汇总标题 */
.shop-checkout-summary h3,
.checkout-summary h3,
.shop-summary h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin: 0 0 20px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

/* 7. 汇总行 */
.shop-summary-row,
.checkout-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    color: #64748b !important;
}
.shop-summary-row b,
.checkout-summary-row b {
    color: #0f172a !important;
    font-weight: 600 !important;
}

/* 8. 总计行 */
.shop-summary-total,
.checkout-summary-total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 0 !important;
    margin-top: 8px !important;
    border-top: 1px dashed #e2e8f0 !important;
    font-size: 15px !important;
    color: #0f172a !important;
    font-weight: 700 !important;
}
.shop-summary-total b,
.checkout-summary-total b {
    font-size: 24px !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #ef4444, #ec4899) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

/* 9. 提交订单按钮 */
.shop-checkout-summary .shop-btn-primary,
.checkout-summary .shop-btn-primary,
.shop-summary .shop-btn-primary {
    display: block !important;
    width: 100% !important;
    margin-top: 22px !important;
    padding: 14px 24px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    border: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 16px 40px -12px rgba(99,102,241,.8) !important;
    transition: all .3s cubic-bezier(.2,.8,.2,1) !important;
}
.shop-checkout-summary .shop-btn-primary:hover,
.checkout-summary .shop-btn-primary:hover,
.shop-summary .shop-btn-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 24px 50px -12px rgba(99,102,241,1) !important;
}

/* 10. 表单输入框样式统一 */
.shop-checkout-form input,
.shop-checkout-form select,
.shop-checkout-form textarea,
.checkout-form input,
.checkout-form select,
.checkout-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    background: #f8fafc !important;
    font-size: 14px !important;
    color: #0f172a !important;
    outline: none !important;
    transition: all .2s !important;
    box-sizing: border-box !important;
}
.shop-checkout-form input:focus,
.shop-checkout-form select:focus,
.shop-checkout-form textarea:focus,
.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus {
    border-color: #6366f1 !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(99,102,241,.12) !important;
}

/* 11. 响应式：小屏单列 */
@media (max-width: 900px) {
    .shop-checkout,
    .shop-checkout-page,
    .checkout-page {
        padding: 20px 20px 40px !important;
    }
    .shop-checkout-layout,
    .shop-checkout-grid,
    .checkout-layout,
    .checkout-grid {
        grid-template-columns: 1fr !important;
    }
    .shop-checkout-summary,
    .checkout-summary,
    .shop-summary {
        position: static !important;
    }
}

/* ============================================================
   商品详情 v2：多图 + SKU 规格 + 富文本
   ============================================================ */
.sd-gallery{display:flex;flex-direction:column;gap:12px}
.sd-main-img{width:100%;aspect-ratio:1;background:#f9fafb;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.sd-main-img img{width:100%;height:100%;object-fit:cover;display:block}
.sd-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.sd-thumb{width:72px;height:72px;border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s;background:#fff}
.sd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sd-thumb:hover{border-color:#a5b4fc}
.sd-thumb.active{border-color:#6366f1;box-shadow:0 0 0 2px rgba(99,102,241,.15)}

.sd-old-price{margin-left:10px;color:#9ca3af;font-size:15px;font-weight:500}

.sd-attrs{margin:16px 0;padding:16px 0;border-top:1px solid #f3f4f6;border-bottom:1px solid #f3f4f6}
.sd-attr-row{display:flex;gap:14px;align-items:flex-start;margin-bottom:12px}
.sd-attr-row:last-child{margin-bottom:0}
.sd-attr-label{flex:0 0 60px;color:#6b7280;font-size:14px;padding-top:6px;font-weight:600}
.sd-attr-values{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.sd-attr-btn{padding:6px 14px;border:1.5px solid #e5e7eb;background:#fff;border-radius:8px;cursor:pointer;font-size:14px;color:#374151;transition:all .15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit}
.sd-attr-btn img{width:22px;height:22px;border-radius:4px;object-fit:cover}
.sd-attr-btn:hover{border-color:#a5b4fc;color:#4f46e5}
.sd-attr-btn.active{border-color:#6366f1;background:#eef2ff;color:#4f46e5;font-weight:600}

.sd-desc-content{margin-top:10px;color:#374151;font-size:14px;line-height:1.75;word-break:break-word}
.sd-desc-content img{max-width:100%;height:auto;border-radius:8px;margin:12px 0;display:block}
.sd-desc-content h1,.sd-desc-content h2,.sd-desc-content h3,.sd-desc-content h4{font-weight:700;margin:18px 0 10px;color:#111827;line-height:1.35}
.sd-desc-content h1{font-size:22px}
.sd-desc-content h2{font-size:19px}
.sd-desc-content h3{font-size:17px}
.sd-desc-content p{margin:10px 0}
.sd-desc-content ul,.sd-desc-content ol{margin:10px 0;padding-left:24px}
.sd-desc-content li{margin:4px 0}
.sd-desc-content a{color:#6366f1;text-decoration:underline}
.sd-desc-content a:hover{color:#4f46e5}
.sd-desc-content table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14px}
.sd-desc-content table td,.sd-desc-content table th{border:1px solid #e5e7eb;padding:8px 12px;text-align:left}
.sd-desc-content table th{background:#f9fafb;font-weight:600}
.sd-desc-content blockquote{border-left:3px solid #6366f1;padding:6px 16px;margin:12px 0;background:#f9fafb;color:#6b7280;border-radius:0 6px 6px 0}
.sd-desc-content code{background:#f3f4f6;padding:2px 6px;border-radius:4px;font-size:13px;color:#dc2626}
.sd-desc-content pre{background:#1f2937;color:#f9fafb;padding:14px;border-radius:8px;overflow-x:auto;margin:12px 0}
.sd-desc-content pre code{background:transparent;color:inherit;padding:0}
.sd-desc-content hr{border:0;border-top:1px solid #e5e7eb;margin:20px 0}

/* 购物车 SKU 规格文字 */
.shop-cart-sku{display:inline-block;margin:4px 0;padding:2px 8px;background:#f3f4f6;color:#6b7280;font-size:12px;border-radius:4px}

/* 立即购买按钮（橙红渐变，区别于加购的蓝紫） */
.shop-btn-buy{
  background:linear-gradient(135deg,#f59e0b,#ef4444);
  color:#fff;
  border:0;
  padding:12px 24px;
  border-radius:10px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:all .2s;
  font-size:15px;
  font-family:inherit;
}
.shop-btn-buy:hover:not(:disabled){
  background:linear-gradient(135deg,#ea580c,#dc2626);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(239,68,68,.28);
}
.shop-btn-buy:disabled{opacity:.5;cursor:not-allowed}

/* 结算页 · 支付方式选择 */
.payment-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.payment-item{
  display:flex;align-items:center;gap:12px;padding:14px 16px;
  border:1.5px solid #e5e7eb;border-radius:10px;cursor:pointer;
  transition:all .15s;background:#fff;position:relative;
}
.payment-item:hover{border-color:#a5b4fc;background:#fafaff}
.payment-item input[type=radio]{
  position:absolute;opacity:0;pointer-events:none;
}
.payment-radio{
  width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;
  flex-shrink:0;position:relative;transition:all .15s;
}
.payment-item input:checked ~ .payment-radio{
  border-color:#6366f1;
}
.payment-item input:checked ~ .payment-radio::after{
  content:'';position:absolute;inset:3px;border-radius:50%;background:#6366f1;
}
.payment-item:has(input:checked){
  border-color:#6366f1;background:#eef2ff;
  box-shadow:0 0 0 3px rgba(99,102,241,.08);
}
.payment-body{display:flex;flex-direction:column;gap:2px;flex:1}
.payment-name{font-weight:600;color:#111827;font-size:14px}
.payment-desc{color:#6b7280;font-size:12px}
.payment-tag{
  margin-left:auto;background:#f3f4f6;color:#6b7280;
  font-size:11px;padding:3px 8px;border-radius:4px;font-weight:600;
}
.sku-mini{color:#9ca3af;font-size:12px;margin-left:4px}

/* ============ 买家账户中心 ============ */
.shop-account-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;max-width:1200px;margin:24px auto;padding:0 20px}
.shop-account-side{background:#fff;border-radius:12px;padding:20px;border:1px solid #f3f4f6;height:fit-content;position:sticky;top:80px}
.side-user{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid #f3f4f6;margin-bottom:16px}
.side-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
.side-name{font-weight:700;color:#111827;font-size:14px}
.side-email{font-size:12px;color:#6b7280;word-break:break-all}
.side-nav{display:flex;flex-direction:column;gap:2px}
.side-nav a{padding:10px 12px;border-radius:8px;color:#4b5563;font-size:14px;text-decoration:none;transition:all .15s}
.side-nav a:hover{background:#f9fafb;color:#111827}
.side-nav a.active{background:#eef2ff;color:#4f46e5;font-weight:600}
.shop-account-main{min-width:0}
.account-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.account-head h2{margin:0;font-size:22px;color:#111827}
.account-card{background:#fff;border-radius:12px;padding:24px;border:1px solid #f3f4f6}

/* 地址卡片 */
.address-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.address-card{background:#fff;border:1.5px solid #e5e7eb;border-radius:12px;padding:18px;position:relative;transition:all .15s}
.address-card:hover{border-color:#a5b4fc;box-shadow:0 4px 16px rgba(99,102,241,.08)}
.address-card.is-default{border-color:#6366f1;background:#fafaff}
.addr-badge{position:absolute;top:-10px;right:14px;background:#6366f1;color:#fff;font-size:11px;padding:3px 8px;border-radius:6px;font-weight:700}
.addr-name{font-weight:700;color:#111827;font-size:15px;margin-bottom:6px}
.addr-name small{color:#6b7280;font-weight:400;font-size:12px;margin-left:8px}
.addr-line{color:#4b5563;font-size:13px;line-height:1.6}
.addr-zip{color:#9ca3af;font-size:12px;margin-top:4px}
.addr-ops{margin-top:14px;display:flex;gap:14px;padding-top:12px;border-top:1px dashed #e5e7eb;font-size:13px}
.btn-link{background:none;border:0;color:#6366f1;cursor:pointer;padding:0;font-size:13px;font-family:inherit}
.btn-link:hover{text-decoration:underline}
.btn-link.btn-danger{color:#ef4444}
.check-line{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px}

/* 响应式 */
@media (max-width: 768px){
  .shop-account-layout{grid-template-columns:1fr}
  .shop-account-side{position:static}
}

/* ============ 结算页 v3 ============ */
.card-head-flex{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card-head-flex h3{margin:0}

/* 弹窗 */
.nm-modal{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;padding:20px}
.nm-modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(4px)}
.nm-modal-box{position:relative;background:#fff;border-radius:14px;width:100%;max-width:520px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.nm-modal-head{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid #f3f4f6}
.nm-modal-head h3{margin:0;font-size:16px;font-weight:700;color:#111827}
.nm-modal-close{background:none;border:0;font-size:24px;color:#9ca3af;cursor:pointer;line-height:1;padding:0 4px}
.nm-modal-close:hover{color:#111827}
.nm-modal-body{padding:16px 22px;overflow-y:auto;flex:1}
.nm-modal-foot{padding:14px 22px;border-top:1px solid #f3f4f6;text-align:right}

/* 地址选择项 */
.addr-pick-item{padding:14px 16px;border:1.5px solid #e5e7eb;border-radius:10px;margin-bottom:10px;cursor:pointer;transition:all .15s}
.addr-pick-item:hover{border-color:#a5b4fc;background:#fafaff}
.addr-pick-item.is-default{border-color:#6366f1;background:#fafaff}
.addr-pick-name{font-weight:700;color:#111827;font-size:14px;margin-bottom:4px}
.addr-pick-name small{color:#6b7280;font-weight:400;font-size:12px;margin-left:6px}
.addr-pick-line{color:#4b5563;font-size:13px;line-height:1.6}
.mini-badge{background:#6366f1;color:#fff;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:700;margin-left:4px}

.ship-fee{font-weight:700;font-size:14px}

/* ============ 账户 dashboard ============ */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-card{background:#fff;border:1px solid #f3f4f6;border-radius:12px;padding:18px;display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;transition:all .15s}
.stat-card:hover{border-color:#a5b4fc;transform:translateY(-2px);box-shadow:0 6px 20px rgba(99,102,241,.08)}
.stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.stat-num{font-size:24px;font-weight:800;color:#111827;line-height:1}
.stat-label{color:#6b7280;font-size:13px;margin-top:4px}

.recent-order-row{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid #f9fafb;text-decoration:none;color:inherit;font-size:13px}
.recent-order-row:last-child{border-bottom:0}
.recent-order-row:hover{background:#fafaff;margin:0 -12px;padding:14px 12px;border-radius:8px}
.ro-no{font-weight:600;color:#4b5563;font-family:monospace}
.ro-amount{color:#ef4444;font-weight:700}
.ro-status{padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;background:#f3f4f6;color:#6b7280}
.ro-status.status-pending{background:#fef3c7;color:#92400e}
.ro-status.status-paid{background:#dbeafe;color:#1e40af}
.ro-status.status-shipped{background:#cffafe;color:#0e7490}
.ro-status.status-completed{background:#dcfce7;color:#166534}
.ro-status.status-cancelled{background:#fee2e2;color:#991b1b}
.ro-date{color:#9ca3af;font-size:12px}

/* 收藏移除按钮 */
.shop-product-card{position:relative}
.fav-remove{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(239,68,68,.9);color:#fff;border:0;cursor:pointer;font-size:18px;line-height:1;z-index:2;display:flex;align-items:center;justify-content:center;padding:0}
.fav-remove:hover{background:#dc2626}

@media (max-width: 768px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
}

/* 商品详情页 · 收藏按钮 */
.pd-fav-btn{background:none;border:1.5px solid #e5e7eb;border-radius:50%;width:36px;height:36px;cursor:pointer;margin-left:8px;vertical-align:middle;transition:all .15s;display:inline-flex;align-items:center;justify-content:center;padding:0}
.pd-fav-btn:hover{border-color:#ec4899;background:#fdf2f8}
.pd-fav-btn .fav-heart{font-size:18px;color:#9ca3af;line-height:1}
.pd-fav-btn.active .fav-heart{color:#ec4899}
.pd-fav-btn.active{border-color:#ec4899}

/* ============ 优惠券选择 ============ */
.coupon-list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.coupon-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1.5px solid #e5e7eb;border-radius:10px;cursor:pointer;background:#fff;transition:all .15s;position:relative}
.coupon-item:hover{border-color:#a5b4fc;background:#fafaff}
.coupon-item input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.coupon-radio{width:18px;height:18px;border-radius:50%;border:2px solid #d1d5db;flex-shrink:0;position:relative;transition:all .15s;margin-top:1px}
.coupon-item input:checked ~ .coupon-radio{border-color:#22c55e}
.coupon-item input:checked ~ .coupon-radio::after{content:'';position:absolute;inset:3px;border-radius:50%;background:#22c55e}
.coupon-item:has(input:checked){border-color:#22c55e;background:#f0fdf4;box-shadow:0 0 0 3px rgba(34,197,94,.08)}
.coupon-body{flex:1;display:flex;flex-direction:column;gap:3px}
.coupon-title{font-weight:700;color:#111827;font-size:14px}
.coupon-desc{color:#6b7280;font-size:12px}
.coupon-none .coupon-title{color:#9ca3af;font-weight:400}

/* ============ 领券中心 / 我的券包 ============ */
.coupon-center{max-width:1200px;margin:0 auto;padding:20px}
.coupon-hero{text-align:center;padding:30px 20px 40px}
.coupon-hero h1{font-size:32px;font-weight:800;color:#111827;margin:0 0 8px}
.coupon-hero p{color:#6b7280;margin:0}

.coupon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.coupon-card{display:flex;background:#fff;border-radius:14px;overflow:hidden;border:1.5px solid #e5e7eb;transition:all .15s;position:relative}
.coupon-card:hover{border-color:#a5b4fc;box-shadow:0 6px 20px rgba(99,102,241,.08)}
.cc-left{flex:0 0 120px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;position:relative}
.cc-left::after{content:'';position:absolute;right:-1px;top:0;bottom:0;width:6px;background:radial-gradient(circle at left, transparent 3px, #fff 3.5px, #fff 4px, transparent 4.5px) repeat-y;background-size:6px 12px}
.coupon-card.type-1 .cc-left{background:linear-gradient(135deg,#ef4444,#dc2626)}
.coupon-card.type-2 .cc-left{background:linear-gradient(135deg,#6366f1,#8b5cf6)}
.coupon-card.type-3 .cc-left{background:linear-gradient(135deg,#06b6d4,#0ea5e9)}
.coupon-card.is-claimed .cc-left,
.coupon-card.is-used .cc-left,
.coupon-card.is-expired .cc-left{background:linear-gradient(135deg,#9ca3af,#6b7280);opacity:.6}

.cc-face{font-size:26px;font-weight:900;line-height:1;letter-spacing:-.5px}
.cc-sub{font-size:11px;margin-top:6px;opacity:.85;text-align:center;padding:0 6px}

.cc-right{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cc-name{font-weight:700;color:#111827;font-size:14px}
.cc-info{color:#9ca3af;font-size:12px}
.cc-btn{margin-top:auto;align-self:flex-start;padding:6px 16px;border-radius:8px;background:#6366f1;color:#fff;border:0;cursor:pointer;font-size:13px;font-weight:600;text-decoration:none;font-family:inherit}
.cc-btn:hover{background:#4f46e5}
.cc-btn.is-disabled{background:#e5e7eb;color:#9ca3af;cursor:not-allowed}

.coupon-card.is-used,
.coupon-card.is-expired{opacity:.65}

/* ============ 评价表单 ============ */
.rv-product{display:flex;gap:14px;align-items:center;padding:14px;background:#f9fafb;border-radius:10px;margin-bottom:20px}
.rv-product img{width:64px;height:64px;border-radius:8px;object-fit:cover}
.rv-product-name{font-weight:700;color:#111827;font-size:14px}
.rv-product-sku{color:#9ca3af;font-size:12px;margin-top:4px}

.star-picker{display:flex;align-items:center;gap:4px}
.star-picker .star{font-size:32px;color:#e5e7eb;cursor:pointer;transition:all .1s;user-select:none}
.star-picker .star:hover,
.star-picker .star.hover,
.star-picker .star.active{color:#f59e0b;transform:scale(1.08)}
.star-label{margin-left:12px;color:#6b7280;font-size:14px}

.rv-images{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.rv-add-img{width:88px;height:88px;border:2px dashed #d1d5db;border-radius:10px;background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#9ca3af;font-size:12px;font-family:inherit}
.rv-add-img:hover{border-color:#6366f1;color:#6366f1;background:#fafaff}
.rv-img-thumb{width:88px;height:88px;border-radius:10px;overflow:hidden;position:relative;border:1px solid #e5e7eb}
.rv-img-thumb img{width:100%;height:100%;object-fit:cover}
.rv-img-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.7);color:#fff;border:0;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}

/* 我的评价 */
.my-rv-list{display:flex;flex-direction:column;gap:14px}
.my-rv-item{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px;background:#fff;border:1px solid #f3f4f6;border-radius:12px}
.my-rv-thumb{width:64px;height:64px;border-radius:8px;overflow:hidden;background:#f9fafb}
.my-rv-thumb img{width:100%;height:100%;object-fit:cover}
.my-rv-name{font-weight:700;color:#111827;font-size:14px}
.my-rv-stars{margin:6px 0;font-size:14px;color:#e5e7eb}
.my-rv-stars .on{color:#f59e0b}
.my-rv-time{color:#9ca3af;font-size:12px;margin-left:10px}
.my-rv-content{color:#4b5563;font-size:13px;line-height:1.7}
.my-rv-images{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.my-rv-images img{width:70px;height:70px;object-fit:cover;border-radius:6px;cursor:pointer}
.my-rv-reply{margin-top:10px;padding:10px 12px;background:#f0f9ff;border-left:3px solid #0ea5e9;border-radius:0 8px 8px 0;font-size:13px;color:#0c4a6e}
.reply-time{color:#9ca3af;font-size:11px;margin-top:4px}
.my-rv-ops{font-size:13px}
.my-rv-ops a{color:#6366f1}

/* 订单详情评价按钮 */
.rv-btn{display:inline-block;margin-left:10px;padding:3px 10px;font-size:12px;border-radius:6px;text-decoration:none;font-weight:600}
.rv-btn-new{background:#fef3c7;color:#92400e;border:1px solid #fde68a}
.rv-btn-new:hover{background:#fde68a}
.rv-btn-done{background:#f3f4f6;color:#6b7280;border:1px solid #e5e7eb}

/* 商品详情评价区 */
.sd-reviews{margin-top:32px;padding-top:28px;border-top:1px solid #f3f4f6}
.sd-reviews-title{font-size:18px;font-weight:700;color:#111827;margin:0 0 20px;display:flex;align-items:center;gap:10px}
.sd-rating-overview{display:grid;grid-template-columns:140px 1fr;gap:24px;padding:20px;background:#f9fafb;border-radius:12px;margin-bottom:20px}
.sd-rating-score{text-align:center;padding-right:24px;border-right:1px solid #e5e7eb}
.rs-num{font-size:36px;font-weight:900;color:#f59e0b;line-height:1}
.rs-stars{font-size:18px;color:#e5e7eb;margin:8px 0}
.rs-stars .on{color:#f59e0b}
.rs-count{color:#9ca3af;font-size:12px}
.sd-rating-bars{display:flex;flex-direction:column;gap:6px}
.rb-row{display:grid;grid-template-columns:32px 1fr 36px;gap:10px;align-items:center;font-size:12px;color:#6b7280}
.rb-track{height:8px;background:#e5e7eb;border-radius:4px;overflow:hidden}
.rb-fill{height:100%;background:linear-gradient(90deg,#f59e0b,#fbbf24);border-radius:4px;transition:width .3s}
.rb-count{text-align:right}

.sd-review-list{display:flex;flex-direction:column;gap:16px}
.sd-review-item{display:flex;gap:12px;padding-bottom:16px;border-bottom:1px solid #f9fafb}
.sd-review-item:last-child{border-bottom:0}
.sr-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.sr-body{flex:1;min-width:0}
.sr-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.sr-name{font-weight:700;color:#111827;font-size:13px}
.sr-stars{font-size:12px;color:#e5e7eb}
.sr-stars .on{color:#f59e0b}
.sr-time{color:#9ca3af;font-size:12px;margin-left:auto}
.sr-content{color:#4b5563;font-size:13px;line-height:1.7}
.sr-images{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.sr-images img{width:72px;height:72px;object-fit:cover;border-radius:6px;cursor:pointer;transition:transform .15s}
.sr-images img:hover{transform:scale(1.05)}
.sr-reply{margin-top:10px;padding:10px 14px;background:#f0f9ff;border-left:3px solid #0ea5e9;border-radius:0 8px 8px 0;font-size:13px;color:#0c4a6e;line-height:1.6}
.sd-reviews-empty{text-align:center;padding:40px;color:#9ca3af}
.sd-reviews-empty p{margin:10px 0 0}

@media (max-width:768px){
  .sd-rating-overview{grid-template-columns:1fr;gap:16px}
  .sd-rating-score{padding-right:0;padding-bottom:16px;border-right:0;border-bottom:1px solid #e5e7eb}
}

/* ============ 会员积分 ============ */
.points-hero{display:grid;grid-template-columns:1fr auto;gap:20px;padding:24px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:14px;color:#fff}
.ph-level{display:flex;align-items:center;gap:14px}
.ph-icon{font-size:36px}
.ph-name{font-size:20px;font-weight:800;margin-bottom:4px}
.ph-discount{font-size:13px;opacity:.85}
.ph-points{text-align:right}
.pp-num{font-size:40px;font-weight:900;line-height:1}
.pp-label{font-size:12px;opacity:.85;margin-top:4px}

.level-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.ls-item{padding:14px;border:2px solid #f3f4f6;border-radius:12px;display:flex;gap:12px;align-items:center;transition:all .15s}
.ls-item.current{border-color:#6366f1;background:#f5f3ff}
.ls-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.ls-name{font-weight:700;color:#111827;font-size:14px}
.ls-req{color:#9ca3af;font-size:12px;margin:2px 0}
.ls-benefit{color:#6366f1;font-weight:600;font-size:12px}

.pl-list{display:flex;flex-direction:column}
.pl-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f9fafb}
.pl-item:last-child{border-bottom:0}
.pl-remark{font-weight:600;color:#374151;font-size:13px}
.pl-time{color:#9ca3af;font-size:12px;margin-top:2px}
.pl-pts{font-weight:700;font-size:16px;align-self:center}
.pl-pts.plus{color:#22c55e}
.pl-pts.minus{color:#ef4444}

/* ============ 分销中心 ============ */
.dist-hero{text-align:center;padding:36px 24px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:14px;color:#fff}
.dh-icon{font-size:56px;margin-bottom:12px}
.dist-hero h3{margin:0 0 8px;font-size:22px;font-weight:800}
.dist-hero p{margin:0;opacity:.9;font-size:14px;line-height:1.7}
.dh-info{margin-top:16px;padding:8px 16px;background:rgba(255,255,255,.15);border-radius:8px;display:inline-block;font-size:13px}

.dist-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.ds-card{background:#fff;border:1px solid #f3f4f6;border-radius:12px;padding:18px;text-align:center}
.ds-num{font-size:22px;font-weight:800;color:#6366f1;line-height:1.2}
.ds-label{font-size:12px;color:#6b7280;margin-top:4px}

.dist-code-box{margin-top:14px;padding:12px;background:#f5f3ff;border-radius:8px;text-align:center;font-size:13px;color:#6b7280}

.dist-log-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f9fafb;align-items:center}
.dist-log-row:last-child{border-bottom:0}

/* ============ 分销海报 ============ */
.poster-layout{display:grid;grid-template-columns:1fr 360px;gap:24px}
@media (max-width:900px){.poster-layout{grid-template-columns:1fr}}
.poster-preview-wrap{text-align:center;padding:20px;background:#f3f4f6;border-radius:14px}

.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.theme-item{cursor:pointer;text-align:center;position:relative}
.theme-item input{position:absolute;opacity:0;pointer-events:none}
.theme-item span{display:block;width:100%;height:44px;border-radius:8px;border:2px solid transparent;transition:all .15s}
.theme-item input:checked + span{border-color:#111827;box-shadow:0 0 0 3px rgba(17,24,39,.1)}
.theme-item em{display:block;font-size:11px;color:#6b7280;font-style:normal;margin-top:4px}

.poster-product{display:flex;gap:10px;align-items:center;padding:10px;background:#f9fafb;border-radius:8px}
.poster-product img{width:48px;height:48px;object-fit:cover;border-radius:6px}
.poster-product > div{flex:1;font-size:13px}

.poster-tip{margin-top:16px;padding:12px;background:#f0f9ff;border-left:3px solid #0ea5e9;border-radius:0 8px 8px 0;font-size:12px;line-height:1.7;color:#0c4a6e}

/* 素材库 */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.mat-card{background:#fff;border:1px solid #f3f4f6;border-radius:12px;overflow:hidden;transition:all .15s}
.mat-card:hover{border-color:#a5b4fc;box-shadow:0 6px 20px rgba(99,102,241,.08)}
.mat-img{aspect-ratio:1;background:#f9fafb;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mat-img img{width:100%;height:100%;object-fit:cover}
.mat-body{padding:12px}
.mat-name{font-weight:600;color:#111827;font-size:13px;line-height:1.4;height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mat-foot{display:flex;justify-content:space-between;align-items:center;margin:6px 0 10px;font-size:12px}
.mat-price{color:#ef4444;font-weight:700;font-size:15px}
.mat-sales{color:#9ca3af}
.mat-ops{display:flex;gap:6px}

/* ============ 商品评价区样式对齐商品描述 ============ */
.sd-reviews{
    margin-top: 24px !important;
    background: #fff !important;
    border-radius: 20px !important;
    padding: 28px 32px !important;
    border: 1px solid #eef1f7 !important;
    border-top: 1px solid #eef1f7 !important;
}
.sd-reviews-title{
    font-size: 16px !important;
    font-weight: 700;
    color: #111827;
    margin: 0 0 16px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    gap: 10px;
}
.sd-reviews-empty{
    padding: 40px 20px !important;
}

/* ============ 我的订单 v2 ============ */
.my-order-tabs{display:flex;gap:6px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #f3f4f6;overflow-x:auto}
.my-order-tab{padding:8px 16px;border-radius:8px;color:#6b7280;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.my-order-tab:hover{background:#f9fafb;color:#111827}
.my-order-tab.active{background:#eef2ff;color:#4f46e5}
.my-order-tab .tab-count{background:#e5e7eb;color:#6b7280;font-size:11px;padding:1px 6px;border-radius:8px;font-weight:700}
.my-order-tab.active .tab-count{background:#4f46e5;color:#fff}

.my-order-list{display:flex;flex-direction:column;gap:14px}
.my-order-card{background:#fff;border:1px solid #f3f4f6;border-radius:14px;overflow:hidden;transition:all .15s}
.my-order-card:hover{border-color:#e0e7ff;box-shadow:0 6px 20px rgba(99,102,241,.06)}

.mo-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#f9fafb;border-bottom:1px solid #f3f4f6}
.mo-no{font-size:13px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mo-time{color:#9ca3af;font-size:12px;margin-left:6px}
.mo-status{font-size:12px;font-weight:700;padding:4px 12px;border-radius:8px}

.mo-body{display:grid;grid-template-columns:1fr auto;gap:20px;padding:16px 18px;align-items:center}
.mo-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.mo-row{display:flex;gap:10px;font-size:13px;align-items:baseline}
.mo-row > span{color:#9ca3af;flex-shrink:0;min-width:70px}
.mo-row > b{color:#374151;word-break:break-all}

.mo-amount{text-align:right;padding-left:20px;border-left:1px solid #f3f4f6}
.mo-amount-label{font-size:12px;color:#9ca3af;margin-bottom:4px}
.mo-amount-num{font-size:22px;font-weight:800;color:#ef4444;line-height:1}

.mo-foot{padding:12px 18px;background:#fafbfc;border-top:1px solid #f3f4f6;display:flex;justify-content:flex-end;gap:10px}

@media (max-width:640px){
  .mo-body{grid-template-columns:1fr;gap:12px}
  .mo-amount{text-align:left;padding-left:0;padding-top:12px;border-left:0;border-top:1px dashed #f3f4f6}
}

/* ============================================================
   签到日历 + 等级 + 积分明细
   ============================================================ */
.checkin-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 4px;
}
.cc-day {
    background: #f9fafb;
    border: 2px solid #eef0f4;
    border-radius: 10px;
    padding: 10px 4px 8px;
    text-align: center;
    transition: all .15s ease;
    min-width: 0;
}
.cc-day.is-checked {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-color: #a5b4fc;
    box-shadow: 0 2px 8px -2px rgba(124,58,237,.2);
}
.cc-day.is-today {
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
.cc-date {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    line-height: 1.2;
}
.cc-icon {
    font-size: 16px;
    line-height: 1;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #10b981;
    font-weight: 900;
}
.cc-points {
    font-size: 11px;
    color: #f59e0b;
    font-weight: 700;
    line-height: 1.2;
    min-height: 14px;
}

/* 积分明细行 */
.pl-remark { font-size: 13.5px; color: #1f2937; }
.pl-time { font-size: 11.5px; color: #9ca3af; margin-top: 2px; }
.pl-pts { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pl-pts.plus { color: #22c55e; }
.pl-pts.minus { color: #ef4444; }

/* 等级阶梯补充 */
.ls-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.ls-body { flex: 1; min-width: 0; }
.ls-name { font-size: 14px; font-weight: 700; color: #111827; }
.ls-req { font-size: 12px; color: #9ca3af; margin-top: 2px; }
.ls-benefit { font-size: 12.5px; color: #6366f1; margin-top: 4px; font-weight: 600; }

/* 英雄卡内部字段补充 */
.ph-icon { font-size: 32px; line-height: 1; }
.ph-name { font-size: 18px; font-weight: 800; letter-spacing: -.3px; }
.ph-discount { font-size: 12.5px; opacity: .9; margin-top: 4px; }
.pp-label { font-size: 12px; opacity: .85; margin-top: 4px; }

/* ============================================================
   积分卡 · 精致优化版（覆盖旧样式）
   ============================================================ */
.points-hero {
    position: relative;
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    align-items: center;
    gap: 24px !important;
    padding: 28px 30px !important;
    border-radius: 20px !important;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 55%, #a855f7 100%) !important;
    box-shadow: 0 16px 40px -20px rgba(99,102,241,.6), 0 4px 12px rgba(99,102,241,.15) !important;
    isolation: isolate;
}
/* 右上角光晕装饰 */
.points-hero::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(255,255,255,.28) 0%, transparent 62%);
    pointer-events: none;
    z-index: 0;
}
/* 左下角光晕 */
.points-hero::after {
    content: '';
    position: absolute;
    bottom: -100px; left: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(139,92,246,.35) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}
.points-hero > * {
    position: relative;
    z-index: 1;
}

/* 会员信息 */
.ph-level {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}
.ph-icon {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 30px !important;
    line-height: 1 !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.22) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -8px rgba(15,23,42,.4) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    flex: 0 0 auto;
}
.ph-name {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    line-height: 1.15 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.ph-discount {
    font-size: 13px !important;
    opacity: .92 !important;
    margin-top: 5px !important;
    color: rgba(255,255,255,.92) !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 积分数 */
.ph-points {
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-left: 20px;
    border-left: 1px solid rgba(255,255,255,.18);
    min-width: 96px;
}
.pp-num {
    font-size: 42px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -1.5px !important;
    color: #fff !important;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 8px rgba(15,23,42,.18);
    background: linear-gradient(180deg, #ffffff 0%, #e9e4ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.pp-num::after {
    content: '分';
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    -webkit-text-fill-color: rgba(255,255,255,.85);
    background: none;
    margin-left: 2px;
}
.pp-label {
    font-size: 12px !important;
    opacity: .82 !important;
    margin-top: 6px !important;
    color: rgba(255,255,255,.9) !important;
    letter-spacing: .3px;
    font-weight: 500;
}

/* 小屏适配 */
@media (max-width: 640px) {
    .points-hero {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 22px 22px !important;
    }
    .ph-points {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.18);
        padding-top: 16px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        min-width: 0;
    }
    .ph-points .pp-num { font-size: 34px !important; }
}

/* ===== 积分卡：去掉灰色块背景 ===== */
.points-hero .ph-level,
.points-hero > .ph-level,
.points-hero > div:first-child {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
}
/* 保留图标自己的毛玻璃框 */
.points-hero .ph-icon {
    background: rgba(255,255,255,.22) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -8px rgba(15,23,42,.4) !important;
}
/* 防止 `> *` 通用规则给子元素上背景 */
.points-hero > * {
    background: transparent !important;
}

/* ============================================================
   PC 店铺街 · 精致版
   ============================================================ */
.st-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 32px 80px;
}

/* Hero */
.st-page-hero {
    text-align: center;
    padding: 48px 20px 32px;
    background: linear-gradient(135deg, #1e1b4b 0%, #4c1d95 100%);
    border-radius: 24px;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
}
.st-page-hero::before {
    content: '';
    position: absolute;
    top: -100px; right: -100px;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(139,92,246,.4) 0%, transparent 65%);
    pointer-events: none;
}
.st-page-hero::after {
    content: '';
    position: absolute;
    bottom: -120px; left: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(236,72,153,.25) 0%, transparent 65%);
    pointer-events: none;
}
.st-page-hero h1 {
    font-size: 36px;
    font-weight: 900;
    margin: 0 0 10px;
    letter-spacing: -1px;
    position: relative;
    z-index: 1;
    color: #fff;
}
.st-page-hero > p {
    font-size: 15px;
    opacity: .82;
    margin: 0 0 28px;
    position: relative;
    z-index: 1;
}

/* 搜索 */
.st-page-search {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 8px 8px 8px 18px;
    background: #fff;
    border-radius: 30px;
    box-shadow: 0 12px 32px -12px rgba(15,23,42,.4);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}
.st-page-search svg { flex: 0 0 auto; }
.st-page-search input[type="text"] {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: #111827;
    padding: 0;
    height: 42px;
    box-sizing: border-box;
}
.st-page-search input::placeholder { color: #b6bcc6; }
.st-page-search button {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 26px;
    border: 0;
    border-radius: 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .18s;
    box-shadow: 0 6px 16px -6px rgba(99,102,241,.5);
}
.st-page-search button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -8px rgba(99,102,241,.6);
}

/* 国家 Chips */
.st-page-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
}
.st-page-chip {
    padding: 9px 22px;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 22px;
    font-size: 13.5px;
    color: #4b5563;
    text-decoration: none;
    transition: all .15s;
    box-shadow: 0 2px 6px -2px rgba(17,24,39,.06);
    font-weight: 600;
}
.st-page-chip:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(99,102,241,.5);
}
.st-page-chip.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px -8px rgba(99,102,241,.5);
}

/* 结果数 */
.st-page-count {
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
    margin-bottom: 20px;
}

/* 网格 */
.st-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

/* 卡片 */
.st-page-card {
    display: block;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    position: relative;
    box-shadow: 0 4px 16px -6px rgba(17,24,39,.08);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
    border: 1px solid #f1f5f9;
}
.st-page-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px -16px rgba(99,102,241,.35);
    border-color: rgba(99,102,241,.15);
}

.st-page-card-banner {
    height: 92px;
    position: relative;
    overflow: hidden;
}
.st-page-card-shine {
    position: absolute;
    top: -50px; right: -50px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,.3) 0%, transparent 60%);
    pointer-events: none;
}

.st-page-card-logo {
    position: absolute;
    top: 62px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 20px -4px rgba(17,24,39,.18), 0 0 0 4px #fff;
    z-index: 2;
}
.st-page-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.st-page-card-mark {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}

.st-page-card-body {
    padding: 44px 16px 18px;
    text-align: center;
}
.st-page-card-name {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -.2px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.st-page-card-meta {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}
.st-page-card-meta .tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 9px;
    background: #f1f5f9;
    color: #64748b;
    font-size: 11px;
    border-radius: 999px;
    font-weight: 600;
}
.st-page-card-sales {
    font-size: 11.5px;
    color: #f59e0b;
    font-weight: 700;
    margin-top: 8px;
}

.st-page-card-arrow {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 22px;
    color: rgba(255,255,255,.85);
    font-weight: 300;
    line-height: 1;
    z-index: 3;
    transition: transform .25s;
}
.st-page-card:hover .st-page-card-arrow {
    transform: translateX(4px);
}

/* 空状态 */
.st-page-empty {
    text-align: center;
    padding: 100px 20px;
    color: #94a3b8;
}
.st-page-empty-icon {
    font-size: 80px;
    opacity: .35;
    margin-bottom: 16px;
}
.st-page-empty p {
    font-size: 15px;
    margin: 0;
}

/* 响应式 */
@media (max-width: 900px) {
    .st-page { padding: 32px 20px 60px; }
    .st-page-hero h1 { font-size: 28px; }
    .st-page-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
}
@media (max-width: 560px) {
    .st-page-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .st-page-card-name { font-size: 13px; }
    .st-page-card-body { padding: 40px 10px 14px; }
}

/* ---- 订单时间轴（PC） ---- */
.ord-timeline-wrap {
    background: #fff;
    border-radius: 14px;
    border: 1px solid #f3f4f6;
    padding: 20px 22px;
    margin-top: 16px;
}
.ord-timeline-title {
    margin: 0 0 18px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}
.ord-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.ord-timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #e5e7eb;
}
.ord-tl-item {
    position: relative;
    padding-left: 28px;
    padding-bottom: 18px;
}
.ord-tl-item:last-child { padding-bottom: 0; }
.ord-tl-dot {
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #6366f1;
    box-shadow: 0 0 0 3px #eef2ff;
}
.ord-tl-body {
    font-size: 13px;
    color: #374151;
}
.ord-tl-action {
    font-weight: 700;
    color: #111827;
    font-size: 14px;
}
.ord-tl-remark {
    color: #6b7280;
    font-size: 12.5px;
    margin-top: 3px;
    line-height: 1.5;
}
.ord-tl-time {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* ============ AI 聊天窗 ============ */
.ai-chat-panel{position:fixed;right:24px;bottom:120px;width:380px;max-width:calc(100vw - 32px);height:560px;max-height:calc(100vh - 160px);background:#fff;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.18);display:none;flex-direction:column;overflow:hidden;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}
.ai-chat-panel.open{display:flex;animation:aiSlideIn .25s ease}
@keyframes aiSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.ai-chat-head{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;position:relative}
.ai-chat-avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:20px}
.ai-chat-title{font-size:15px;font-weight:700}
.ai-chat-sub{font-size:11.5px;opacity:.85;margin-top:2px}
.ai-chat-close{margin-left:auto;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.15);border:0;color:#fff;cursor:pointer;font-size:16px;line-height:1;display:flex;align-items:center;justify-content:center;transition:background .15s}
.ai-chat-close:hover{background:rgba(255,255,255,.3)}
.ai-chat-body{flex:1;overflow-y:auto;padding:16px 14px;background:#f9fafb;display:flex;flex-direction:column;gap:10px}
.ai-msg{max-width:80%;padding:10px 14px;border-radius:16px;font-size:13.5px;line-height:1.6;word-break:break-word;white-space:pre-wrap}
.ai-msg.user{align-self:flex-end;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border-bottom-right-radius:4px}
.ai-msg.assistant{align-self:flex-start;background:#fff;color:#111827;border:1px solid #eef0f4;border-bottom-left-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.03)}
.ai-msg.typing{display:flex;gap:4px;padding:12px 16px}
.ai-msg.typing span{width:6px;height:6px;border-radius:50%;background:#a5b4fc;animation:aiDot 1.2s infinite}
.ai-msg.typing span:nth-child(2){animation-delay:.2s}
.ai-msg.typing span:nth-child(3){animation-delay:.4s}
@keyframes aiDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.ai-chat-quick{padding:8px 14px;background:#fff;border-top:1px solid #f3f4f6;display:flex;gap:6px;overflow-x:auto;flex-shrink:0}
.ai-chat-quick::-webkit-scrollbar{display:none}
.ai-quick-btn{flex-shrink:0;padding:6px 12px;background:#eef2ff;color:#4f46e5;border:0;border-radius:14px;font-size:12px;cursor:pointer;white-space:nowrap;transition:background .15s;font-family:inherit}
.ai-quick-btn:hover{background:#e0e7ff}
.ai-chat-foot{padding:12px 14px;background:#fff;border-top:1px solid #f3f4f6;display:flex;gap:8px;align-items:flex-end;flex-shrink:0}
.ai-chat-input{flex:1;border:1.5px solid #e5e7eb;border-radius:12px;padding:10px 12px;font-size:13.5px;font-family:inherit;resize:none;max-height:100px;line-height:1.5;outline:none;transition:border-color .15s}
.ai-chat-input:focus{border-color:#6366f1}
.ai-chat-send{width:38px;height:38px;border-radius:10px;border:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s}
.ai-chat-send:disabled{opacity:.4;cursor:not-allowed}
.ai-chat-send:hover:not(:disabled){opacity:.9}
.ai-transfer{text-align:center;font-size:12px;color:#6b7280;padding:8px;cursor:pointer;background:#fff}
.ai-transfer:hover{color:#4f46e5;text-decoration:underline}

/* ============ AI 聊天窗（居中弹窗版，覆盖原样式）============ */
.ai-chat-mask{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:9999;display:none;animation:aiFadeIn .2s ease}
.ai-chat-mask.open{display:block}
@keyframes aiFadeIn{from{opacity:0}to{opacity:1}}

.ai-chat-panel{position:fixed !important;top:50% !important;left:50% !important;right:auto !important;bottom:auto !important;transform:translate(-50%,-50%) scale(.95);width:420px;max-width:calc(100vw - 32px);height:600px;max-height:calc(100vh - 60px);background:#fff;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.35);display:none;flex-direction:column;overflow:hidden;z-index:10000;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;transition:transform .2s ease,opacity .2s ease;opacity:0}
.ai-chat-panel.open{display:flex;transform:translate(-50%,-50%) scale(1);opacity:1}

/* ============ AI 聊天窗宽度调整（覆盖）============ */
.ai-chat-panel{width:500px !important;max-width:calc(100vw - 32px) !important}

/* ============ AI 聊天窗宽度 800px（覆盖）============ */
.ai-chat-panel{width:800px !important;height:640px !important;max-width:calc(100vw - 40px) !important;max-height:calc(100vh - 60px) !important}
.ai-chat-body{padding:20px 22px !important;gap:12px !important}
.ai-msg{max-width:75% !important;font-size:14.5px !important;padding:12px 16px !important}
.ai-chat-head{padding:18px 22px !important}
.ai-chat-foot{padding:14px 18px !important}

/* ============ AI 快捷问题（两排版）============ */
.ai-chat-quick{padding:10px 16px !important;background:#fff;border-top:1px solid #f3f4f6;display:flex !important;flex-wrap:wrap !important;gap:6px !important;overflow-y:auto !important;max-height:88px;flex-shrink:0}
.ai-chat-quick::-webkit-scrollbar{width:0;height:0}
.ai-quick-btn{flex:0 0 auto !important;padding:6px 12px !important;background:#eef2ff !important;color:#4f46e5 !important;border:0 !important;border-radius:14px !important;font-size:12px !important;cursor:pointer;white-space:nowrap !important;transition:all .15s;font-family:inherit !important;line-height:1.4 !important}
.ai-quick-btn:hover{background:#c7d2fe !important;transform:translateY(-1px)}
.ai-quick-btn:active{transform:translateY(0)}


/* ============ APP 下载按钮 + 二维码悬停（v2·干净版）============ */
.shop-app-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

.shop-app-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 13px;
    color: #4f46e5;
    background: #eef2ff;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: background .2s, color .2s;
    border: 0;
}
.shop-app-btn:hover {
    background: #c7d2fe;
    color: #4338ca;
}
.shop-app-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.shop-app-text {
    letter-spacing: .5px;
}

/* 弹窗：以按钮为中心（用 margin-left 替代 transform，避免被覆盖） */
.shop-app-qr {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    margin-left: -90px;          /* 弹窗宽 180 → 一半 90 */
    width: 180px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 14px;
    padding: 14px 14px 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
    border: 1px solid #f0f0f5;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 99999;
    pointer-events: none;
}
.shop-app-wrap:hover .shop-app-qr {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* 顶部小三角 */
.shop-app-qr::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;           /* 宽 12 → 一半 6 */
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid #f0f0f5;
    border-top: 1px solid #f0f0f5;
    transform: rotate(45deg);
    box-sizing: border-box;
}

.shop-app-qr-title {
    font-size: 12px;
    color: #6b7280;
    margin: 0 0 8px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.shop-app-qr img {
    width: 140px;
    height: 140px;
    max-width: 140px;
    max-height: 140px;
    display: block;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #f3f4f6;
    border-radius: 8px;
    box-sizing: border-box;
    object-fit: contain;
}
.shop-app-qr-sub {
    font-size: 11px;
    color: #9ca3af;
    margin: 8px 0 0;
    line-height: 1.5;
    white-space: nowrap;
}

/* ============ APP 按钮图标（emoji 版）============ */
.shop-app-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    min-width: auto !important;
}
.shop-app-icon {
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.shop-app-text {
    letter-spacing: .5px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
/* 隐藏可能残留的 svg */
.shop-app-btn svg { display: none !important; }

/* ============ 分类页排序 Tab（PC）============ */
.shop-sort-bar {
    display: flex;
    gap: 6px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 16px;
}
.shop-sort-item {
    padding: 8px 18px;
    background: #f9fafb;
    color: #6b7280;
    border-radius: 9px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    transition: all .15s ease;
    border: 1px solid transparent;
}
.shop-sort-item:hover {
    background: #eef2ff;
    color: #4f46e5;
    border-color: #c7d2fe;
}
.shop-sort-item.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: #6366f1;
    box-shadow: 0 4px 12px rgba(99,102,241,.25);
}

/* ============ 分类页排序栏 · 全新设计 v2 ============ */
.shop-sort-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: #fff !important;
    border: 1px solid #eef0f4 !important;
    border-radius: 14px !important;
    padding: 10px 14px !important;
    margin: 0 0 20px !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.04) !important;
    flex-wrap: wrap !important;
}
.shop-sort-bar {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    border: 0 !important;
    margin: 0 !important;
    flex-wrap: wrap !important;
}
.shop-sort-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    background: transparent !important;
    color: #6b7280 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transition: all .18s ease !important;
    border: 0 !important;
    white-space: nowrap !important;
}
.shop-sort-item:hover {
    background: #f3f4f6 !important;
    color: #4f46e5 !important;
}
.shop-sort-item .shop-sort-icon {
    font-size: 14px !important;
    line-height: 1 !important;
    display: inline-block !important;
}
.shop-sort-item.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(99,102,241,.3) !important;
    border: 0 !important;
}
.shop-sort-item.active:hover {
    color: #fff !important;
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
}
.shop-sort-count {
    font-size: 13px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    padding-left: 12px !important;
}
.shop-sort-count b {
    color: #ef4444 !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    margin: 0 2px !important;
}

/* 隐藏旧的 shop-catalog-meta（现在合到排序栏内）*/
.shop-catalog-meta { display: none !important; }

/* 响应式：小屏换行 */
@media (max-width: 720px) {
    .shop-sort-wrap {
        padding: 8px !important;
        gap: 8px !important;
    }
    .shop-sort-item {
        padding: 7px 12px !important;
        font-size: 12.5px !important;
    }
    .shop-sort-item .shop-sort-icon { font-size: 13px !important; }
    .shop-sort-count {
        width: 100% !important;
        text-align: right !important;
        padding: 4px 8px 0 0 !important;
        margin-left: 0 !important;
    }
}

/* ==================================================
   商品详情页 · 加入购物车 + 立即购买 按钮样式同步
   ================================================== */
.shop-detail-actions {
    display: flex !important;
    gap: 14px !important;
    margin-top: 24px !important;
    align-items: stretch !important;
}

.shop-detail-actions .shop-btn {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 52px !important;
    padding: 0 28px !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: .3px !important;
    border: 0 !important;
    cursor: pointer !important;
    transition: all .22s ease !important;
    font-family: inherit !important;
    white-space: nowrap !important;
    min-width: 160px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.shop-detail-actions .shop-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

/* 加入购物车 —— 紫渐变 */
.shop-detail-actions .shop-btn-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(99,102,241,.28) !important;
}
.shop-detail-actions .shop-btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(99,102,241,.42) !important;
}

/* 立即购买 —— 橙红渐变 */
.shop-detail-actions .shop-btn-buy {
    background: linear-gradient(135deg, #f97316, #ef4444) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(249,115,22,.28) !important;
}
.shop-detail-actions .shop-btn-buy:hover:not(:disabled) {
    background: linear-gradient(135deg, #ea580c, #dc2626) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 28px rgba(249,115,22,.42) !important;
}

/* 禁用态 */
.shop-detail-actions .shop-btn:disabled {
    opacity: .5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* 移动端竖排 */
@media (max-width: 640px) {
    .shop-detail-actions {
        flex-direction: column !important;
    }
    .shop-detail-actions .shop-btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ══════════════════════════════════════════════════════════
   店铺街 · 午夜极简（2026-10-01）
   统一到积分商城 / 品牌专区 深色配色
   ══════════════════════════════════════════════════════════ */

/* ① Hero 背景：深蓝黑 */
.st-page-hero {
    background: linear-gradient(180deg, #0a0a1f 0%, #0d0d2b 40%, #141432 100%) !important;
    padding: 72px 24px 56px !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
    position: relative !important;
    overflow: hidden !important;
}

/* ② 光晕：唯一柔金光晕，居中上方 */
.st-page-hero::before {
    content: '' !important;
    position: absolute !important;
    top: -200px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 600px !important;
    height: 600px !important;
    background: radial-gradient(circle, rgba(251,191,36,.18), transparent 70%) !important;
    filter: blur(100px) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.st-page-hero::after { display: none !important; }

.st-page-hero > * { position: relative !important; z-index: 1 !important; }

/* ③ 标题：白 → 金 */
.st-page-hero h1 {
    background: linear-gradient(110deg, #ffffff 0%, #f8fafc 40%, #fbbf24 90%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    letter-spacing: -.5px !important;
    filter: drop-shadow(0 4px 24px rgba(251,191,36,.15)) !important;
    font-weight: 900 !important;
}

/* ④ 副标题：灰白 */
.st-page-hero > p {
    color: rgba(255,255,255,.6) !important;
    font-weight: 400 !important;
}

/* ⑤ 搜索框：深色玻璃 + 金色按钮 */
.st-page-search {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    backdrop-filter: blur(20px) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
}
.st-page-search input[type="text"] {
    background: transparent !important;
    color: #fff !important;
}
.st-page-search input::placeholder {
    color: rgba(255,255,255,.4) !important;
}
.st-page-search button {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0a0a1f !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(251,191,36,.3) !important;
    transition: all .2s !important;
}
.st-page-search button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 20px rgba(251,191,36,.45) !important;
}
.st-page-search svg { stroke: rgba(255,255,255,.5) !important; }

/* ⑥ 国家筛选 chips：深色玻璃 */
.st-page-chip {
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.75) !important;
    backdrop-filter: blur(12px) !important;
    transition: all .2s !important;
}
.st-page-chip:hover {
    background: rgba(255,255,255,.1) !important;
    border-color: rgba(255,255,255,.2) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
}
.st-page-chip.active {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0a0a1f !important;
    border-color: transparent !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 18px rgba(251,191,36,.35) !important;
}

/* ⑦ 结果数文字：淡灰 */
.st-page-count {
    color: rgba(255,255,255,.4) !important;
}

/* ⑧ 让 chips 和 count 在深色背景内可见 → 用 body 背景衔接 */
.st-page {
    background: linear-gradient(180deg, #0a0a1f 0%, #f8f9fb 320px) !important;
}

/* ══════════════════════════════════════════════════════════
   店铺街修正 v2（2026-10-01）· 全宽 Hero + 白色搜索框
   ══════════════════════════════════════════════════════════ */

/* ① Hero 全宽：去掉圆角和外边距 */
.st-page-hero {
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 80px 24px 64px !important;
}

/* ② 外层 st-page 去掉任何 padding/margin，让 Hero 顶到两边 */
.st-page {
    padding: 0 !important;
    margin: 0 !important;
    background: #f8f9fb !important;
    max-width: 100% !important;
}

/* ③ 搜索框：白底 + 深字 + 金色按钮 */
.st-page-search {
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    backdrop-filter: none !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.15) !important;
}
.st-page-search svg {
    stroke: #9ca3af !important;
}
.st-page-search input[type="text"] {
    background: transparent !important;
    color: #111827 !important;
    font-weight: 500 !important;
}
.st-page-search input::placeholder {
    color: #9ca3af !important;
    font-weight: 400 !important;
}
.st-page-search button {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0a0a1f !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(251,191,36,.4) !important;
}

/* ④ chips 筛选区：白色卡片 */
.st-page-chips {
    background: #fff !important;
    padding: 16px 24px !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.04) !important;
    margin: 24px auto !important;
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
}

.st-page-chip {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    backdrop-filter: none !important;
    font-weight: 600 !important;
}
.st-page-chip:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
    transform: translateY(-1px) !important;
}
.st-page-chip.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 18px rgba(99,102,241,.3) !important;
}

/* ⑤ 结果数字：深灰，在白底上可见 */
.st-page-count {
    color: #6b7280 !important;
    margin: 16px 0 !important;
    text-align: center !important;
    font-weight: 600 !important;
}

/* ⑥ 店铺网格：两侧留白 */
.st-page-grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    width: 100% !important;
}

/* ══════════════════════════════════════════════════════════
   店铺街 · 全页渐变（2026-10-01）
   深蓝黑 → 白色 平滑过渡，无留白
   ══════════════════════════════════════════════════════════ */

/* ① 主内容区去掉两侧 padding */
.shop-main {
    padding: 0 !important;
}

/* ② 整个 st-page 全宽 + 渐变背景 */
.st-page {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    /* 渐变：顶部深蓝黑 → 200px 处深紫 → 600px 处灰紫 → 白 */
    background: linear-gradient(180deg,
        #0a0a1f 0%,
        #0f0f2d 18%,
        #1a1a45 32%,
        #4c4a7a 50%,
        #a5a3c7 68%,
        #e8e7f0 85%,
        #f8f9fb 100%) !important;
    min-height: 100vh !important;
}

/* ③ Hero 区：全宽、透明背景（让父级渐变透出来） */
.st-page-hero {
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 88px 24px 56px !important;
}

/* ④ Hero 光晕保留 */
.st-page-hero::before {
    content: '' !important;
    position: absolute !important;
    top: 40px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 700px !important;
    height: 500px !important;
    background: radial-gradient(circle, rgba(251,191,36,.16), transparent 65%) !important;
    filter: blur(100px) !important;
    opacity: 1 !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ⑤ 标题和副标题：白字（深色背景上） */
.st-page-hero h1 {
    background: linear-gradient(110deg, #ffffff 0%, #f8fafc 40%, #fbbf24 90%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    filter: drop-shadow(0 4px 24px rgba(251,191,36,.2)) !important;
}
.st-page-hero > p {
    color: rgba(255,255,255,.7) !important;
}

/* ⑥ 搜索框：白底 + 深字 + 金色按钮 */
.st-page-search {
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.2) !important;
    border-radius: 16px !important;
}
.st-page-search svg { stroke: #9ca3af !important; }
.st-page-search input[type="text"] {
    background: transparent !important;
    color: #111827 !important;
}
.st-page-search input::placeholder {
    color: #9ca3af !important;
}
.st-page-search button {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important;
    color: #0a0a1f !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(251,191,36,.4) !important;
}

/* ⑦ chips 筛选：悬浮白卡 */
.st-page-chips {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(20px) !important;
    padding: 14px 24px !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 32px rgba(15,23,42,.15), 0 2px 6px rgba(15,23,42,.08) !important;
    margin: 0 auto 24px !important;
    max-width: 1200px !important;
    width: calc(100% - 48px) !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
}
.st-page-chip {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #374151 !important;
    backdrop-filter: none !important;
}
.st-page-chip:hover {
    background: #eef2ff !important;
    border-color: #c7d2fe !important;
    color: #4338ca !important;
}
.st-page-chip.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(99,102,241,.35) !important;
}

/* ⑧ 结果数字：深灰，在渐变中间可见 */
.st-page-count {
    color: #4b5563 !important;
    margin: 20px 0 !important;
    text-align: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    position: relative !important;
    z-index: 2 !important;
}

/* ⑨ 店铺网格：居中，两侧留白，最后过渡到白 */
.st-page-grid {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 24px 60px !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ⑩ 空态 */
.st-page-empty {
    color: #6b7280 !important;
    padding: 60px 24px !important;
    text-align: center !important;
}

/* ⑪ 响应式 */
@media (max-width: 768px) {
    .st-page-hero { padding: 56px 16px 40px !important; }

/* ══════════════════════════════════════════════════════════
   店铺街 Hero emoji 修复（2026-10-01）
   ══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   首页 Hero + 导航 active 统一（2026-10-01）
   ══════════════════════════════════════════════════════════ */

/* ① 首页 Hero · 深蓝黑渐变（对齐积分商城/品牌专区） */
.hv2-hero {
    background: linear-gradient(180deg,
        #0a0a1f 0%,
        #0d0d2b 40%,
        #141432 100%) !important;
    padding: 72px 0 80px !important;
}
.hv2-hero::before {
    background: radial-gradient(circle, rgba(251,191,36,.16), transparent 70%) !important;
}

/* ② 导航栏 active · 金色渐变（跟店铺街/积分商城搜索按钮呼应） */
.shop-nav a.active {
    background: linear-gradient(135deg, #4c1d95 0%, #312e81 100%) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 20px -8px rgba(76,29,149,.6) !important;
    border-radius: 10px !important;
}
.shop-nav a.active:hover { background: linear-gradient(135deg, #5b21b6 0%, #3730a3 100%) !important; transform: translateY(-1px) !important; }
    background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%) !important;
    transform: translateY(-1px) !important;
}

/* ③ 其他导航项 hover 微调 */
.shop-nav a:not(.active):hover {
    color: #b45309 !important;
    background: #fffbeb !important;
}

/* ══════════ 我的消息 · 卡片列表（10-02） ══════════ */
.msg-list{display:flex;flex-direction:column;gap:10px}

.msg-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;
  background:#fff;
  border:1px solid #eef1f7;
  border-radius:14px;
  text-decoration:none;color:inherit;
  transition:all .22s cubic-bezier(.2,1,.3,1);
  position:relative;
  cursor:pointer;
}
.msg-item:hover{
  border-color:rgba(99,102,241,.35);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -10px rgba(99,102,241,.2);
}

/* 未读：左侧蓝条 + 淡蓝底 */
.msg-item.is-unread{
  background:linear-gradient(90deg,rgba(99,102,241,.045) 0%,#fff 40%);
  border-color:rgba(99,102,241,.18);
}
.msg-item.is-unread::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:3px;
  background:linear-gradient(180deg,#6366f1,#8b5cf6);
  border-radius:0 3px 3px 0;
}

/* 图标圆块 */
.msg-icon{
  flex:0 0 auto;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:12px;
  background:linear-gradient(135deg,#eef2ff,#e0e7ff);
  color:#6366f1;
  margin-top:2px;
}
.msg-icon.type-order{
  background:linear-gradient(135deg,#ecfeff,#cffafe);
  color:#0891b2;
}
.msg-icon.type-points{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  color:#b45309;
}
.msg-icon.type-coupon{
  background:linear-gradient(135deg,#fce7f3,#fbcfe8);
  color:#be185d;
}
.msg-icon.type-system{
  background:linear-gradient(135deg,#f3f4f6,#e5e7eb);
  color:#4b5563;
}
.msg-icon svg{width:20px;height:20px;stroke-width:1.9}

/* 文字区 */
.msg-body{flex:1;min-width:0}
.msg-title{
  font-size:14.5px;font-weight:700;color:#111827;
  margin:0 0 5px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
}
.msg-item.is-unread .msg-title{color:#0f172a;font-weight:800}
.msg-content{
  font-size:13px;color:#64748b;line-height:1.55;
  margin:0 0 8px;
  overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.msg-time{
  font-size:12px;color:#94a3b8;
  font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;gap:4px;
}
.msg-time::before{
  content:'';display:inline-block;width:3px;height:3px;
  border-radius:50%;background:#cbd5e1;
}

/* 未读红点 */
.msg-dot{
  flex:0 0 auto;
  width:8px;height:8px;border-radius:50%;
  background:#ef4444;
  box-shadow:0 0 0 4px rgba(239,68,68,.12);
  margin-top:8px;
  animation:msgPulse 2s ease-in-out infinite;
}
@keyframes msgPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(239,68,68,.12)}
  50%{box-shadow:0 0 0 7px rgba(239,68,68,.05)}
}

/* 顶部"全部标记已读"按钮 */
.btn-link{
  background:none;border:0;
  color:#6366f1;font-size:13.5px;font-weight:600;
  cursor:pointer;padding:6px 12px;border-radius:8px;
  transition:all .18s;font-family:inherit;
}
.btn-link:hover{background:#eef2ff;color:#4f46e5}

/* 顶部未读数徽章 */
.account-head .mini-badge{
  display:inline-flex;align-items:center;
  padding:2px 10px;border-radius:999px;
  color:#fff;font-size:11.5px;font-weight:700;
  margin-left:8px;vertical-align:middle;
  letter-spacing:.2px;
}

/* 空态 */
.shop-empty{
  padding:60px 20px;text-align:center;
  color:#94a3b8;font-size:14px;
}
.shop-empty svg{color:#cbd5e1;margin-bottom:14px}
.shop-empty p{margin:0;font-weight:500}

@media(max-width:640px){
  .msg-item{padding:14px 14px;gap:12px}
  .msg-icon{width:36px;height:36px;border-radius:10px}
  .msg-icon svg{width:18px;height:18px}
  .msg-title{font-size:13.5px}
  .msg-content{font-size:12.5px}
}

/* ═══════════════════════════════════════════════════════════
   右下角悬浮工具卡片 · v15
   ═══════════════════════════════════════════════════════════ */
.side-tools{
    position:fixed;right:24px;bottom:96px;z-index:900;
    background:#fff;border-radius:14px;overflow:visible;
    border:1px solid #f1f5f9;
    box-shadow:0 8px 28px rgba(15,23,42,.12),0 2px 8px rgba(15,23,42,.06);
    min-width:88px;
    transition:transform .2s;
}
.side-tools .st-item:first-child{border-radius:14px 14px 0 0}
.side-tools .st-item:last-child{border-radius:0 0 14px 14px}
.side-tools .st-item{
    display:flex;flex-direction:column;align-items:center;gap:4px;
    padding:12px 10px;
    text-decoration:none;color:#475569;
    font-size:11px;font-weight:600;line-height:1.2;
    transition:all .18s;position:relative;cursor:pointer;
    border-bottom:1px solid #f1f5f9;
}
.side-tools .st-item:last-child{border-bottom:0}
.side-tools .st-item:hover{background:#f8fafc;color:#4f46e5}
.side-tools .st-item:hover .st-ico{color:#4f46e5;transform:translateY(-2px)}
.side-tools .st-item-top:hover .st-ico{transform:rotate(180deg) translateY(2px)}
.side-tools .st-ico{
    display:flex;align-items:center;justify-content:center;
    width:22px;height:22px;
    color:#64748b;
    transition:all .18s;
}
.side-tools .st-ico svg{display:block;width:22px;height:22px}
.side-tools .st-item-top .st-ico{transform:rotate(180deg)}
.side-tools .st-txt{white-space:nowrap;letter-spacing:.2px}
.side-tools .st-badge{
    position:absolute;top:6px;right:8px;
    min-width:16px;height:16px;padding:0 4px;border-radius:8px;
    background:#e11d48;color:#fff;font-size:9px;font-weight:800;
    display:inline-flex;align-items:center;justify-content:center;line-height:1;
    box-shadow:0 1px 3px rgba(225,29,72,.35);
}
.side-tools .st-badge-hot{
    background:linear-gradient(135deg,#f59e0b,#e11d48);
    height:14px;font-size:9px;letter-spacing:.3px;
    box-shadow:0 1px 3px rgba(245,158,11,.35);
}
.side-tools .st-badge-green{
    background:linear-gradient(135deg,#10b981,#06b6d4);
    height:14px;font-size:9px;letter-spacing:.3px;
    box-shadow:0 1px 3px rgba(16,185,129,.35);
}
/* 回到顶部：默认隐藏，滚动后显示 */
.side-tools .st-item-top{display:none!important}
.side-tools .st-item-top.show{display:flex!important}

/* 手机端适配 */
@media(max-width:768px){
    .side-tools{right:10px;bottom:82px;border-radius:12px;min-width:72px}
    .side-tools .st-item{padding:10px 6px;gap:3px}
    .side-tools .st-ico{font-size:17px}
    .side-tools .st-txt{font-size:10px}
    .side-tools .st-badge{top:4px;right:5px;min-width:14px;height:14px;font-size:8px;padding:0 3px}
}


/* ═══════════════════════════════════════════════════════════
   手机购买 · 二维码浮层
   ═══════════════════════════════════════════════════════════ */
.side-tools .st-item-buy{position:relative;cursor:default}
.side-tools .st-item-buy:hover{background:#f0f4ff}
.side-tools .st-qr-pop{
    position:absolute;right:calc(100% + 14px);top:50%;transform:translateY(-50%) scale(.9);z-index:9999;
    background:#fff;border-radius:14px;padding:16px 14px;box-shadow:0 12px 36px rgba(15,23,42,.18),0 2px 8px rgba(15,23,42,.08);
    opacity:0;pointer-events:none;transition:all .22s cubic-bezier(.2,1,.3,1);
    text-align:center;width:172px;z-index:10;
    border:1px solid #f1f5f9;
}
.side-tools .st-item-buy:hover .st-qr-pop{
    opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1);
}
/* 浮层小箭头 */
.side-tools .st-qr-pop::after{
    content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%) rotate(45deg);
    width:12px;height:12px;background:#fff;border-right:1px solid #f1f5f9;border-top:1px solid #f1f5f9;
}
.st-qr-title{font-size:12.5px;font-weight:800;color:#0f172a;margin-bottom:10px;letter-spacing:.2px}
.st-qr-wrap{
    display:flex;align-items:center;justify-content:center;
    width:140px;height:140px;margin:0 auto 10px;
    background:#f8fafc;border-radius:10px;overflow:hidden;padding:6px;box-sizing:border-box;
}
.st-qr-wrap img,.st-qr-wrap canvas{display:block;max-width:100%}
.st-qr-tip{font-size:10.5px;color:#94a3b8;font-weight:600;line-height:1.3}
@media(max-width:768px){
    .side-tools .st-qr-pop{display:none!important}
}