/* ============================================================
   快发宝 · 小程序源码商城 —— 全站共享设计系统
   适用：index / goods / pay 等页面（与首页风格完全统一）
   ============================================================ */
:root{
    --brand:#1677ff; --brand-dark:#0a5ad6;
    --accent:#f43f5e; --warn:#fa8c16;
    --bg:#f5f7fa; --line:#ebedf0;
    --text:#1f2329; --sub:#646a73; --muted:#8f959e;
    --shadow:0 4px 16px rgba(15,34,58,.06);
    --shadow-lg:0 12px 32px rgba(15,34,58,.10);
    --radius:14px;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;margin:0;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px;}

/* ===== 顶部公告条 ===== */
.topbar{background:linear-gradient(90deg,#1677ff,#4f9cff);color:#fff;font-size:12px;padding:7px 0;}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;}
.topbar .marquee{flex:1;overflow:hidden;margin:0 18px;}
.topbar .marquee span{display:inline-block;white-space:nowrap;animation:mv 22s linear infinite;}
@keyframes mv{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
.topbar .links a{color:#fff;opacity:.9;margin-left:14px;}
.topbar .links a:hover{opacity:1;}

/* ===== 主导航 ===== */
.navbar-main{background:#fff;position:sticky;top:0;z-index:1030;box-shadow:var(--shadow);}
.navbar-main .wrap{display:flex;align-items:center;height:74px;gap:30px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--brand);}
.logo i{font-size:28px;}
.logo .slogan{font-size:11px;color:var(--muted);font-weight:400;margin-left:6px;border-left:1px solid var(--line);padding-left:8px;}
.nav-menu{display:flex;gap:26px;flex:1;}
.nav-menu a{font-size:15px;color:var(--text);font-weight:500;position:relative;padding:6px 0;}
.nav-menu a:hover,.nav-menu a.active{color:var(--brand);}
.nav-menu a.active::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-2px;width:18px;height:3px;border-radius:2px;background:var(--brand);}
.nav-search{display:flex;align-items:center;background:#f1f3f6;border-radius:20px;padding:0 4px 0 14px;height:38px;width:240px;}
.nav-search input{border:none;background:transparent;outline:none;flex:1;font-size:13px;}
.nav-search button{border:none;background:var(--brand);color:#fff;border-radius:50%;width:30px;height:30px;cursor:pointer;}
.nav-user{display:flex;align-items:center;gap:14px;}
.nav-btn{background:#fff;border:1px solid var(--line);color:var(--sub);padding:7px 14px;border-radius:20px;font-size:13px;cursor:pointer;}
.nav-btn:hover{border-color:var(--brand);color:var(--brand);}
.nav-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand);}

/* ===== 面包屑 ===== */
.breadcrumb-bar{padding:16px 0;font-size:13px;color:var(--muted);}
.breadcrumb-bar a{color:var(--sub);}
.breadcrumb-bar a:hover{color:var(--brand);}
.breadcrumb-bar .sep{margin:0 8px;color:var(--line);}
.breadcrumb-bar .cur{color:var(--text);font-weight:600;}

/* ===== 服务保障条 ===== */
.promise{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.promise-item{display:flex;align-items:center;justify-content:center;gap:12px;}
.promise-item .ic{width:42px;height:42px;border-radius:50%;background:#eaf2ff;color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:20px;}
.promise-item .t{font-size:14px;font-weight:600;}
.promise-item .d{font-size:12px;color:var(--muted);}

/* ===== 通用 Section ===== */
.section{margin-top:36px;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:18px;}
.sec-title{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px;}
.sec-title::before{content:"";width:4px;height:22px;border-radius:2px;background:linear-gradient(180deg,#1677ff,#5b8def);}
.sec-sub{color:var(--muted);font-size:13px;margin-top:4px;}
.sec-more{font-size:13px;color:var(--sub);}
.sec-more:hover{color:var(--brand);}

/* ===== 商品卡（相关推荐复用）===== */
.goods-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.goods-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.3s;position:relative;display:flex;flex-direction:column;}
.goods-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.goods-cover{height:150px;display:flex;align-items:center;justify-content:center;font-size:60px;color:#fff;position:relative;}
.goods-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.25),transparent 60%);}
.goods-cover .badge{position:absolute;left:10px;top:10px;background:rgba(255,255,255,.92);color:var(--accent);font-size:11px;font-weight:700;padding:4px 10px;border-radius:14px;}
.goods-cover .cat{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.35);color:#fff;font-size:11px;padding:3px 10px;border-radius:14px;backdrop-filter:blur(4px);}
.goods-body{padding:14px;flex:1;display:flex;flex-direction:column;}
.goods-name{font-size:14px;font-weight:700;line-height:1.4;margin-bottom:6px;}
.goods-desc{font-size:12px;color:var(--muted);line-height:1.55;height:34px;overflow:hidden;}
.goods-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--line);}
.price{color:var(--accent);font-weight:800;font-size:20px;}
.price::before{content:"¥";font-size:13px;margin-right:2px;}
.old{color:var(--muted);text-decoration:line-through;font-size:12px;margin-left:6px;}
.buy{background:linear-gradient(135deg,#1677ff,#5b8def);color:#fff;padding:6px 14px;border-radius:16px;font-size:12px;font-weight:600;}
.buy:hover{background:var(--brand-dark);}

/* ===== 页脚 ===== */
.footer{margin-top:50px;background:#1f2329;color:#a9b0bb;padding:48px 0 0;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.4fr;gap:36px;}
.footer h6{color:#fff;font-size:14px;font-weight:700;margin-bottom:14px;}
.footer .brand{color:#fff;font-size:20px;font-weight:800;margin-bottom:12px;}
.footer .desc{font-size:12px;line-height:1.8;color:#8f959e;max-width:280px;}
.footer ul{list-style:none;padding:0;margin:0;}
.footer ul li{margin-bottom:10px;font-size:13px;}
.footer ul li a:hover{color:#fff;}
.footer .contact{font-size:13px;color:#a9b0bb;margin-top:8px;}
.footer-bottom{margin-top:36px;border-top:1px solid #2c313a;padding:18px 0;font-size:12px;color:#8f959e;text-align:center;}
.footer-bottom a{color:#a9b0bb;}

/* ===== 浮动工具 ===== */
.float-tools{position:fixed;right:18px;bottom:90px;z-index:1000;display:flex;flex-direction:column;gap:8px;}
.float-tools a{width:46px;height:46px;background:#fff;border-radius:12px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;color:var(--sub);font-size:18px;transition:.2s;}
.float-tools a:hover{background:var(--brand);color:#fff;}
.kefu-fab{position:fixed;right:18px;bottom:30px;background:linear-gradient(135deg,#1677ff,#5b8def);color:#fff;border:none;border-radius:24px;padding:11px 22px;box-shadow:0 8px 20px rgba(22,119,255,.35);font-size:13px;font-weight:600;z-index:1001;cursor:pointer;}

/* ===== 响应式（公共）===== */
@media(max-width:992px){
    .promise{grid-template-columns:repeat(2,1fr);}
    .goods-grid{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .nav-menu{display:none;}
}
@media(max-width:576px){
    .goods-grid{grid-template-columns:1fr 1fr;}
    .nav-search{width:140px;}
}