/* 汉诺威五金批发 — 全局样式 */
:root {
  --primary: #e6362f;
  --primary-dark: #c22a24;
  --bg: #f5f5f5;
  --card: #ffffff;
  --text: #333;
  --text-light: #999;
  --border: #eee;
  --green: #07c160;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg); color: var(--text); font-size:14px; line-height:1.5;
}
a { color: inherit; text-decoration:none; }

/* 顶部栏 */
.topbar {
  position: sticky; top:0; z-index:100; background:var(--primary); color:#fff;
  padding:12px 16px; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 1px 4px rgba(0,0,0,.1);
}
.topbar .title { font-size:17px; font-weight:700; }
.topbar .sub { font-size:12px; opacity:.85; margin-top:2px; }
.topbar .right { display:flex; align-items:center; gap:10px; }
.topbar .right .btn { background:rgba(255,255,255,.2); border:0; color:#fff; padding:6px 12px; border-radius:16px; font-size:13px; cursor:pointer; }

/* 标签栏(底部) */
.tabbar {
  position:fixed; bottom:0; left:0; right:0; background:#fff; display:flex;
  border-top:1px solid var(--border); z-index:100; padding-bottom:env(safe-area-inset-bottom);
}
.tabbar .tab { flex:1; text-align:center; padding:8px 0 6px; font-size:11px; color:var(--text-light); cursor:pointer; }
.tabbar .tab.active { color:var(--primary); }
.tabbar .tab .ic { font-size:22px; display:block; margin-bottom:2px; }

.page { padding:12px; padding-bottom:64px; }
.page.pad-top { padding-top:16px; }

/* 卡片 */
.card { background:var(--card); border-radius:10px; padding:14px; margin-bottom:12px; box-shadow:0 1px 3px rgba(0,0,0,.06); }

/* 商品列表 */
.p-list { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.p-item { background:#fff; border-radius:10px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.p-item .img { width:100%; aspect-ratio:1/1; background:#f0f0f0; display:flex; align-items:center; justify-content:center; color:#bbb; font-size:30px; }
.p-item .img img { width:100%; height:100%; object-fit:cover; }
.p-item .body { padding:10px; }
.p-item .name { font-size:14px; font-weight:600; height:40px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.p-item .spec { font-size:12px; color:var(--text-light); margin-top:3px; }
.p-item .price { color:var(--primary); font-weight:800; font-size:16px; margin-top:6px; }
.p-item .price .unit { font-size:12px; font-weight:400; color:var(--text-light); }
.p-item .pack { font-size:11px; color:var(--text-light); margin-top:2px; }

/* 按钮 */
.btn { display:inline-block; border:0; border-radius:20px; padding:10px 22px; font-size:15px; cursor:pointer; text-align:center; }
.btn-primary { background:var(--primary); color:#fff; }
.btn-primary:active { background:var(--primary-dark); }
.btn-block { display:block; width:100%; }
.btn-green { background:var(--green); color:#fff; }
.btn-outline { background:#fff; color:var(--primary); border:1px solid var(--primary); }
.btn-gray { background:#eee; color:#666; }

/* 输入框 */
.input {
  width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:10px; font-size:15px;
  background:#fff; outline:none; margin-bottom:12px;
}
.input:focus { border-color:var(--primary); }

/* 表单 */
.form-card { background:#fff; border-radius:10px; padding:18px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.form-card label { display:block; font-size:13px; color:var(--text-light); margin-bottom:5px; }
.form-card .field { margin-bottom:14px; }
.form-card .input { margin-bottom:0; }

/* 消息提示 */
.toast {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(0,0,0,.8);
  color:#fff; padding:12px 20px; border-radius:8px; z-index:999; display:none; max-width:80%;
  text-align:center; font-size:14px;
}

/* 数量步进器 */
.stepper { display:flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.stepper button { width:34px; height:32px; border:0; background:#f7f7f7; font-size:18px; cursor:pointer; color:var(--text); }
.stepper button:disabled { color:#ccc; background:#fafafa; }
.stepper .val { width:44px; text-align:center; font-weight:700; font-size:15px; }

.text-primary { color:var(--primary); }
.mt8 { margin-top:8px; } .mt12 { margin-top:12px; } .mt16 { margin-top:16px; }
.center { text-align:center; }
.muted { color:var(--text-light); font-size:12px; }
.hidden { display:none !important; }

/* 登录页 */
.login-wrap { min-height:100vh; background:linear-gradient(160deg, var(--primary), #f77); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; }
.login-logo { width:84px; height:84px; background:#fff; border-radius:20px; display:flex; align-items:center; justify-content:center; font-size:40px; font-weight:900; color:var(--primary); margin-bottom:14px; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.login-title { color:#fff; font-size:20px; font-weight:700; margin-bottom:4px; }
.login-sub { color:rgba(255,255,255,.85); font-size:13px; margin-bottom:26px; }
.login-card { background:#fff; border-radius:16px; padding:22px; width:100%; max-width:340px; box-shadow:0 8px 30px rgba(0,0,0,.2); }
.login-tabs { display:flex; margin-bottom:18px; background:#f2f2f2; border-radius:8px; padding:3px; }
.login-tabs .lt { flex:1; text-align:center; padding:8px; font-size:14px; border-radius:6px; cursor:pointer; color:#666; }
.login-tabs .lt.active { background:#fff; color:var(--primary); font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* ═══ 分类导航页（淘宝式）═══ */
.catalog { display:flex; position:fixed; top:0; bottom:52px; left:0; right:0; padding-top:62px; }
.cat-left { width:90px; background:#f7f7f7; overflow-y:auto; border-right:1px solid var(--border); -webkit-overflow-scrolling:touch; }
.cat-left .cl-item { padding:15px 10px; font-size:13px; color:#555; text-align:center; cursor:pointer; border-left:3px solid transparent; position:relative; }
.cat-left .cl-item.active { background:#fff; color:var(--primary); font-weight:700; border-left-color:var(--primary); }
.cat-left .cl-item.all { border-left-color:transparent; }
.cat-right { flex:1; background:#fff; overflow-y:auto; padding:12px; -webkit-overflow-scrolling:touch; }
.cat-block { margin-bottom:18px; }
.cat-h2 { font-size:14px; font-weight:700; color:var(--text); padding:4px 0 10px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.cat-h2::before { content:''; width:4px; height:14px; background:var(--primary); border-radius:2px; }
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.cat-cell { background:var(--bg); border-radius:8px; padding:14px 4px; text-align:center; font-size:12px; color:#333; cursor:pointer; }
.cat-cell:active { background:#ececec; }
.cat-more { margin-top:4px; padding:14px; text-align:center; font-size:13px; color:var(--primary); border-top:1px dashed var(--border); cursor:pointer; }
.cat-empty { padding:40px 20px; text-align:center; font-size:14px; color:var(--primary); cursor:pointer; }

/* 商品页 分类面包屑 */
.catchipbar { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.catchipbar .chip { padding:5px 12px; border-radius:14px; background:#fff; border:1px solid var(--border); font-size:12px; color:#666; cursor:pointer; }
.catchipbar .chip.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.page.pad-top { padding-top:16px; }

/* 商品详情底部固定加购栏 */
.buy-bar {
  position:fixed; left:0; right:0; bottom:0; z-index:100;
  background:#fff; border-top:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -1px 6px rgba(0,0,0,.06);
}
.buy-price .tar { font-size:22px; font-weight:900; color:var(--primary); line-height:1; }
.buy-price .tar-sub { font-size:11px; color:var(--text-light); margin-top:2px; }
.buy-btn { min-width:130px; margin:0; }
/* 详情页内容底部留出加购栏高度 */
body:has(.buy-bar) .page { padding-bottom:70px; }

/* ═══ 加购弹窗（居中，不被图覆盖）═══ */
.modal-mask {
  position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000;
  display:none; align-items:flex-end; justify-content:center;
}
.modal-mask.show { display:flex; }
.modal {
  background:#fff; width:100%; max-width:420px; border-radius:16px 16px 0 0;
  padding:18px 18px calc(18px + env(safe-area-inset-bottom));
  animation: modalUp .22s ease;
}
@keyframes modalUp { from{ transform:translateY(40px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.modal-title { font-size:16px; font-weight:700; margin-bottom:4px; }
.modal-spec { font-size:12px; color:var(--text-light); margin-bottom:12px; }
.modal-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-price { color:var(--primary); font-size:22px; font-weight:900; }
.modal-price .unit { font-size:12px; font-weight:400; color:var(--text-light); }
.modal-actions { display:flex; gap:10px; margin-top:6px; }
.modal-actions .btn { flex:1; padding:12px; font-size:15px; }
.modal-done { text-align:center; padding:8px 0; }
.modal-done .big { font-size:34px; }
.modal-done .txt { font-size:15px; font-weight:700; margin-top:6px; color:var(--green); }