/* ===== 国康爱眼 · 移动商城共享样式 (参照 yun_shop 移动电商风) ===== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
:root{
  --red:#ee0a24;        /* 主色 红 */
  --red-d:#c50019;
  --green:#07c160;      /* 微信绿 */
  --bg:#f2f3f5;         /* 浅灰背景 */
  --card:#fff;
  --ink:#222;
  --sub:#999;
  --line:#ebedf0;
  --price:#ee0a24;
  --gold:#ff976a;
}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Segoe UI",sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);padding-bottom:60px;position:relative}
.hide{display:none!important}

/* 顶部导航 */
.topnav{position:sticky;top:0;z-index:30;background:var(--red);color:#fff;padding:10px 12px;display:flex;align-items:center;gap:10px}
.topnav .logo{font-weight:800;font-size:17px;letter-spacing:.5px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.topnav .logo .eye{width:20px;height:20px}
.topnav .search{flex:1;background:rgba(255,255,255,.95);border-radius:20px;display:flex;align-items:center;padding:7px 12px;color:#bbb;font-size:13px;gap:6px}
.topnav .search input{border:0;outline:0;flex:1;background:transparent;font-size:13px;color:#333}
.topnav .search .btn{background:var(--red);color:#fff;border-radius:14px;padding:4px 12px;font-size:12px}
.topnav .ico{width:26px;height:26px;display:flex;align-items:center;justify-content:center}
.topnav .ico svg{width:22px;height:22px;stroke:#fff}

/* 通用标题栏(非首页) */
.titlebar{position:sticky;top:0;z-index:30;background:var(--red);color:#fff;height:46px;display:flex;align-items:center;padding:0 12px;font-size:17px;font-weight:600}
.titlebar .back{margin-right:8px;cursor:pointer;display:flex;align-items:center}
.titlebar .back svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2}
.titlebar .tt{flex:1;text-align:center;margin-right:30px}

/* 轮播 */
.banner{margin:10px;height:150px;border-radius:12px;overflow:hidden;position:relative;background:#ddd}
.banner .slide{position:absolute;inset:0;opacity:0;transition:opacity .5s}
.banner .slide.on{opacity:1}
.banner .slide img{width:100%;height:100%;object-fit:cover}
.banner .dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2}
.banner .dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6)}
.banner .dots i.on{background:#fff;width:14px;border-radius:3px}

/* 金刚区 */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:var(--card);margin:0 10px 10px;border-radius:12px;padding:12px 6px}
.grid .g{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#555}
.grid .g .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff}
.grid .g .ic svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2}

/* 区块标题 */
.sec{background:var(--card);margin:0 10px 10px;border-radius:12px;padding:12px}
.sec-h{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;margin-bottom:10px}
.sec-h .bar{width:4px;height:15px;background:var(--red);border-radius:2px}
.sec-h .more{margin-left:auto;font-size:12px;color:var(--sub);font-weight:400}

/* 商品网格 */
.goods{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:var(--bg);padding:0 10px 10px}
.gcard{background:var(--card);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.gcard .ph{width:100%;aspect-ratio:1/1;background:#eee;object-fit:cover}
.gcard .info{padding:8px 10px 10px}
.gcard .nm{font-size:13px;line-height:1.35;height:36px;overflow:hidden;color:#333}
.gcard .tags{display:flex;gap:4px;flex-wrap:wrap;margin:6px 0}
.gcard .tag{font-size:10px;color:var(--red);border:1px solid #ffd6dc;border-radius:4px;padding:1px 5px;background:#fff5f6}
.gcard .pr{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.gcard .pr b{color:var(--price);font-size:17px}
.gcard .pr b i{font-size:12px;font-style:normal}
.gcard .pr s{color:#bbb;font-size:11px}
.gcard .pr .sold{margin-left:auto;font-size:11px;color:var(--sub)}
.gcard .buy{margin-top:8px;background:linear-gradient(90deg,var(--red),var(--gold));color:#fff;border:0;border-radius:18px;padding:7px 0;font-size:13px;font-weight:600;width:100%}

/* 列表行(分类右栏) */
.clist{display:flex;flex-direction:column;gap:10px}
.crow{display:flex;background:var(--card);border-radius:10px;overflow:hidden}
.crow .ph{width:96px;height:96px;object-fit:cover;flex:0 0 96px;background:#eee}
.crow .ci{flex:1;padding:8px 10px;display:flex;flex-direction:column}
.crow .ci .nm{font-size:13px;color:#333;line-height:1.35}
.crow .ci .bot{margin-top:auto;display:flex;align-items:baseline;gap:6px}
.crow .ci .bot b{color:var(--price);font-size:16px}
.crow .ci .bot s{color:#bbb;font-size:11px}
.crow .ci .add{margin-left:auto;align-self:flex-end;width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;border:0;font-size:18px;line-height:1}

/* 分类页布局 */
.catwrap{display:flex;min-height:calc(100vh - 46px - 60px)}
.catmenu{flex:0 0 90px;background:var(--bg);overflow-y:auto}
.catmenu .m{padding:16px 8px;text-align:center;font-size:13px;color:#555;border-left:3px solid transparent}
.catmenu .m.on{background:var(--card);color:var(--red);border-left-color:var(--red);font-weight:700}
.catbody{flex:1;overflow-y:auto;padding:10px;background:var(--card)}

/* 商品详情 */
.detail .hero{width:100%;aspect-ratio:1/1;background:#eee}
.detail .hero img{width:100%;height:100%;object-fit:cover}
.detail .pricebar{background:linear-gradient(90deg,var(--red),var(--gold));color:#fff;padding:14px 14px}
.detail .pricebar .now{font-size:26px;font-weight:800}
.detail .pricebar .now i{font-size:15px;font-style:normal}
.detail .pricebar .old{margin-left:8px;text-decoration:line-through;opacity:.8;font-size:13px}
.detail .pricebar .tags{margin-top:6px;font-size:11px;opacity:.95}
.detail .dsec{background:var(--card);margin:10px;border-radius:12px;padding:12px}
.detail .dsec .nm{font-size:16px;font-weight:700;margin-bottom:4px}
.detail .dsec .spec{font-size:12px;color:var(--sub)}
.detail .dsec .desc{font-size:13px;color:#666;line-height:1.7;margin-top:8px}
.detail .blk{background:var(--card);margin:10px;border-radius:12px;padding:12px;font-size:13px;color:#555}
.detail .blk h4{margin:0 0 8px;font-size:14px;color:#333}
.qty{display:flex;align-items:center;gap:0;margin-top:10px}
.qty button{width:30px;height:30px;border:1px solid var(--line);background:#fff;font-size:18px;color:#666}
.qty button:first-child{border-radius:6px 0 0 6px}
.qty button:last-child{border-radius:0 6px 6px 0}
.qty input{width:46px;height:30px;border:1px solid var(--line);border-left:0;border-right:0;text-align:center;font-size:14px}
.detail .actbar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;height:54px;background:#fff;display:flex;align-items:center;box-shadow:0 -2px 10px rgba(0,0,0,.06);z-index:40}
.detail .actbar .cartico{width:54px;text-align:center;position:relative;color:#666;font-size:11px}
.detail .actbar .cartico svg{width:24px;height:24px;stroke:#555;fill:none;stroke-width:2;display:block;margin:0 auto 2px}
.detail .actbar .cartico .badge{position:absolute;top:2px;left:30px;background:var(--red);color:#fff;border-radius:10px;font-size:10px;padding:0 5px;min-width:16px;height:16px;line-height:16px}
.detail .actbar .btns{flex:1;display:flex;gap:8px;padding-right:10px}
.detail .actbar button{flex:1;border:0;height:40px;border-radius:20px;font-size:15px;font-weight:700;color:#fff}
.detail .actbar .add{background:linear-gradient(90deg,#ffb02e,var(--gold))}
.detail .actbar .buy{background:linear-gradient(90deg,var(--red),var(--red-d))}

/* 购物车 */
.cartlist{padding:10px}
.cartitem{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:12px;padding:10px;margin-bottom:10px}
.cartitem .ph{width:72px;height:72px;border-radius:8px;object-fit:cover;flex:0 0 72px;background:#eee}
.cartitem .ci{flex:1;min-width:0}
.cartitem .nm{font-size:13px;color:#333;line-height:1.35}
.cartitem .spec{font-size:11px;color:var(--sub);margin-top:2px}
.cartitem .bot{display:flex;align-items:center;margin-top:8px}
.cartitem .bot b{color:var(--price);font-size:16px;margin-right:auto}
.stepper{display:flex;align-items:center}
.stepper button{width:26px;height:26px;border:1px solid var(--line);background:#fff;font-size:16px;color:#555}
.stepper button:first-child{border-radius:6px 0 0 6px}
.stepper button:last-child{border-radius:0 6px 6px 0}
.stepper input{width:40px;height:26px;border:1px solid var(--line);border-left:0;border-right:0;text-align:center;font-size:13px}
.cartitem .del{color:#bbb;font-size:12px;margin-left:8px}
.settlebar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;height:54px;background:#fff;display:flex;align-items:center;padding:0 12px;box-shadow:0 -2px 10px rgba(0,0,0,.06);z-index:40}
.settlebar .all{display:flex;align-items:center;gap:6px;font-size:13px;color:#555}
.settlebar .total{margin-left:auto;text-align:right;font-size:12px;color:#666}
.settlebar .total b{color:var(--price);font-size:18px}
.settlebar .go{background:var(--red);color:#fff;border:0;border-radius:20px;padding:0 26px;height:40px;font-size:15px;font-weight:700;margin-left:10px}
.empty{text-align:center;color:var(--sub);padding:60px 0;font-size:13px}
.empty .em{font-size:40px;margin-bottom:10px}
.empty a{color:var(--red)}

/* 结算 */
.addr{background:var(--card);margin:10px;border-radius:12px;padding:14px;display:flex;align-items:center;gap:10px}
.addr .pin{color:var(--red)}
.addr .a{font-size:13px;color:#333;line-height:1.6}
.addr .a .nm{font-weight:700;margin-right:8px}
.sums{background:var(--card);margin:10px;border-radius:12px;padding:6px 14px}
.sumrow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.sumrow:last-child{border-bottom:0}
.sumrow .v{font-weight:600}
.sumrow .v.red{color:var(--price)}
.paybar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;height:54px;background:#fff;display:flex;align-items:center;padding:0 12px;box-shadow:0 -2px 10px rgba(0,0,0,.06);z-index:40}
.paybar .total{margin-left:auto;text-align:right;font-size:12px;color:#666}
.paybar .total b{color:var(--price);font-size:18px}
.paybar .go{background:var(--red);color:#fff;border:0;border-radius:20px;padding:0 30px;height:40px;font-size:15px;font-weight:700;margin-left:10px}

/* 我的(会员中心) */
.member .mhero{background:linear-gradient(135deg,var(--red),var(--gold));color:#fff;padding:24px 16px 18px}
.member .mhero .top{display:flex;align-items:center;gap:12px}
.member .mhero .av{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:26px}
.member .mhero .nm{font-size:18px;font-weight:700}
.member .mhero .lv{display:inline-block;margin-top:6px;background:rgba(255,255,255,.25);padding:3px 10px;border-radius:12px;font-size:12px}
.member .mhero .st{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px;text-align:center}
.member .mhero .st .b{font-size:20px;font-weight:800}
.member .mhero .st .s{font-size:12px;opacity:.9;margin-top:2px}
.mcard{background:var(--card);margin:10px;border-radius:12px;padding:4px 14px}
.mrow{display:flex;align-items:center;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px}
.mrow:last-child{border-bottom:0}
.mrow .ic{width:24px;height:24px;margin-right:10px;color:var(--red)}
.mrow .ic svg{width:22px;height:22px;stroke:var(--red);fill:none;stroke-width:2}
.mrow .ar{margin-left:auto;color:#ccc;font-size:18px}
.mrow .v{margin-left:auto;color:var(--sub);font-size:13px}
.mrow .rf{margin-left:auto;color:var(--red);font-size:12px}

/* 登录 */
.login{display:flex;flex-direction:column;align-items:center;padding:60px 30px}
.login .logo{display:flex;align-items:center;gap:8px;font-size:22px;font-weight:800;color:var(--red);margin-bottom:8px}
.login .logo .eye{width:30px;height:30px}
.login .sub{color:var(--sub);font-size:13px;margin-bottom:30px}
.login input{width:100%;padding:14px;border:1px solid var(--line);border-radius:10px;font-size:15px;margin-bottom:14px;background:#fff}
.login .primary{width:100%;padding:14px;border:0;border-radius:24px;background:var(--red);color:#fff;font-size:16px;font-weight:700}
.login .tip{font-size:12px;color:var(--sub);margin-top:16px;line-height:1.6;text-align:center}

/* 底部 Tab */
.tabbar{position:fixed;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;height:54px;background:#fff;display:flex;border-top:1px solid var(--line);z-index:50}
.tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;color:#999;position:relative}
.tabbar .tab.on{color:var(--red)}
.tabbar .tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
.tabbar .tab .badge{position:absolute;top:4px;left:54%;background:var(--red);color:#fff;border-radius:10px;font-size:10px;padding:0 5px;min-width:16px;height:16px;line-height:16px}

/* 通用按钮 */
.btn-red{background:var(--red);color:#fff;border:0;border-radius:8px;padding:12px;width:100%;font-size:15px;font-weight:600}
.btn-line{background:#fff;color:var(--red);border:1px solid var(--red);border-radius:8px;padding:11px;width:100%;font-size:15px;font-weight:600}
.toast{position:fixed;left:50%;top:40%;transform:translateX(-50%);background:rgba(0,0,0,.8);color:#fff;padding:10px 18px;border-radius:8px;font-size:14px;z-index:99;max-width:80%;text-align:center}