/* 康而佳 H5 商城 · 通用样式（移动端优先，PC 居中显示） */
:root {
  --brand: #1a5c2e;
  --brand-2: #2d8a4e;
  --brand-soft: #e8f5e9;
  --price: #c62828;
  --orange: #ff6f00;
  --text: #222;
  --text-2: #666;
  --text-3: #999;
  --line: #ececec;
  --bg: #f4f5f7;
  --radius: 10px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { background: #e9ecee; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; font-size: 14px; outline: none; }
.app {
  max-width: 480px; margin: 0 auto; min-height: 100vh; background: var(--bg);
  position: relative; padding-bottom: calc(58px + env(safe-area-inset-bottom));
  box-shadow: 0 0 24px rgba(0, 0, 0, .08);
}
.app.nobar { padding-bottom: 24px; }
.pad { padding: 0 12px; }
.wrap { padding: 12px; }

/* 顶部搜索栏 */
.topbar {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  padding: 10px 12px; display: flex; align-items: center; gap: 10px;
  color: #fff;
}
.topbar .logo { font-size: 15px; font-weight: 700; white-space: nowrap; letter-spacing: 1px; }
.search {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .95); border-radius: 16px; padding: 7px 12px;
}
.search input { flex: 1; border: 0; background: 0; font-size: 13px; }
.search .ic { color: var(--text-3); font-size: 13px; }
.topbar .act { font-size: 12px; white-space: nowrap; opacity: .95; }

/* 二级页导航 */
.navbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px;
  background: #fff; border-bottom: 1px solid var(--line); padding: 11px 12px;
}
.navbar .back { width: 28px; font-size: 18px; color: var(--text); line-height: 1; }
.navbar .ttl { flex: 1; font-size: 15px; font-weight: 600; }
.navbar .rt { font-size: 12px; color: var(--brand); }

/* 轮播 */
.banner { position: relative; border-radius: var(--radius); overflow: hidden; background: #dfe7e1; }
.banner .slides { display: flex; transition: transform .35s ease; }
.banner .slide { min-width: 100%; height: 150px; display: flex; flex-direction: column; justify-content: center; padding: 0 20px; color: #fff; }
.banner .slide h3 { font-size: 19px; letter-spacing: 1px; }
.banner .slide p { font-size: 12px; opacity: .92; margin-top: 6px; }
.banner .b1 { background: linear-gradient(135deg, #1a5c2e, #3aa05e); }
.banner .b2 { background: linear-gradient(135deg, #8d6e2f, #c9a227); }
.banner .b3 { background: linear-gradient(135deg, #20546b, #3d8ba8); }
.banner .dots { position: absolute; right: 10px; bottom: 8px; display: flex; gap: 4px; }
.banner .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .5); }
.banner .dots i.on { background: #fff; width: 12px; border-radius: 3px; }

/* 金刚区 */
.nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px 0; background: #fff; border-radius: var(--radius); padding: 12px 4px; margin-top: 10px; }
.nav-grid a { text-align: center; font-size: 11px; color: var(--text-2); }
.nav-grid .ic { width: 38px; height: 38px; margin: 0 auto 5px; border-radius: 50%; background: var(--brand-soft); display: flex; align-items: center; justify-content: center; font-size: 18px; }

/* 区块标题 */
.sec { margin-top: 14px; }
.sec-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sec-hd h2 { font-size: 16px; }
.sec-hd h2 b { color: var(--brand); }
.sec-hd .more { font-size: 12px; color: var(--text-3); }

/* 商品网格 */
.goods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.goods { background: #fff; border-radius: var(--radius); overflow: hidden; }
.goods .pic { width: 100%; aspect-ratio: 1/1; background: #f0f2f1; display: flex; align-items: center; justify-content: center; color: #c3cbc6; font-size: 26px; }
.goods .pic img { width: 100%; height: 100%; object-fit: cover; }
.goods .info { padding: 8px 9px 10px; }
.goods .nm { font-size: 13px; line-height: 1.4; height: 36px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.goods .tags { display: flex; gap: 4px; margin: 5px 0; flex-wrap: wrap; }
.goods .tags span { font-size: 10px; color: var(--brand); background: var(--brand-soft); border-radius: 3px; padding: 1px 5px; }
.goods .bt { display: flex; align-items: baseline; justify-content: space-between; }
.price { color: var(--price); font-weight: 700; }
.price i { font-size: 11px; font-style: normal; }
.price b { font-size: 17px; }
.price .old { color: #bbb; font-size: 11px; text-decoration: line-through; font-weight: 400; margin-left: 4px; }
.goods .sales { font-size: 11px; color: var(--text-3); }

/* 列表行 */
.cell { background: #fff; border-radius: var(--radius); overflow: hidden; }
.cell .row { display: flex; align-items: center; gap: 10px; padding: 13px 12px; border-bottom: 1px solid var(--line); }
.cell .row:last-child { border-bottom: 0; }
.cell .row .ic { width: 22px; text-align: center; font-size: 16px; }
.cell .row .k { flex: 1; font-size: 14px; }
.cell .row .v { font-size: 13px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.cell .row .v.arrow::after { content: "›"; font-size: 16px; color: #c9c9c9; }

/* 购物车行 */
.cart-item { display: flex; gap: 10px; padding: 12px; background: #fff; border-radius: var(--radius); margin-bottom: 9px; }
.cart-item .chk { width: 20px; display: flex; align-items: center; }
.cart-item .pic { width: 74px; height: 74px; border-radius: 8px; overflow: hidden; background: #f0f2f1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #c3cbc6; }
.cart-item .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.cart-item .nm { font-size: 13px; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cart-item .del { font-size: 11px; color: var(--text-3); }
.checkbox { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #cfd6d1; display: inline-block; position: relative; }
.checkbox.on { background: var(--brand); border-color: var(--brand); }
.checkbox.on::after { content: "✓"; color: #fff; font-size: 12px; position: absolute; left: 3px; top: -1px; }

/* 数量步进 */
.stepper { display: inline-flex; align-items: center; border: 1px solid #e2e6e3; border-radius: 6px; overflow: hidden; }
.stepper button { width: 26px; height: 24px; background: #f7f8f8; border: 0; color: #555; font-size: 14px; }
.stepper span { width: 34px; text-align: center; font-size: 13px; }

/* 表单 */
.field { display: flex; align-items: flex-start; gap: 10px; padding: 13px 12px; border-bottom: 1px solid var(--line); background: #fff; }
.field:last-child { border-bottom: 0; }
.field label { width: 74px; flex-shrink: 0; font-size: 13px; color: var(--text-2); padding-top: 2px; }
.field input, .field textarea, .field select { flex: 1; border: 0; padding: 0; background: 0; font-size: 14px; }
.field textarea { min-height: 44px; resize: none; }
.field .hint { font-size: 11px; color: var(--text-3); margin-top: 3px; }

/* 按钮 */
.btn { display: block; width: 100%; border: 0; background: var(--brand); color: #fff; text-align: center; padding: 13px; border-radius: 24px; font-size: 15px; font-weight: 600; }
.btn:active { background: #14501f; }
.btn.gray { background: #dfe3e1; color: #666; }
.btn.orange { background: linear-gradient(135deg, #ff8f1f, #ff6f00); }
.btn[disabled] { background: #c9cfcb; }
.btn-line { border: 1px solid var(--brand); color: var(--brand); background: #fff; border-radius: 20px; padding: 6px 14px; font-size: 12px; }

/* 底部操作条 */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: 480px; margin: 0 auto; background: #fff; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
}
.bottom-bar .sum { flex: 1; font-size: 12px; color: var(--text-2); }
.bottom-bar .sum b { color: var(--price); font-size: 17px; }
.bottom-bar .btn { width: auto; padding: 11px 20px; font-size: 14px; }

/* Tab 栏 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  max-width: 480px; margin: 0 auto; background: #fff; border-top: 1px solid var(--line);
  display: flex; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { flex: 1; text-align: center; padding: 7px 0 6px; font-size: 10.5px; color: #9aa3a0; position: relative; }
.tabbar a .ic { font-size: 19px; display: block; line-height: 1.25; }
.tabbar a.on { color: var(--brand); font-weight: 600; }
.tabbar .badge { position: absolute; top: 2px; right: 50%; margin-right: -22px; background: var(--price); color: #fff; font-size: 9px; border-radius: 8px; padding: 0 5px; line-height: 15px; }

/* 价格/合计 */
.bar-price { color: var(--price); font-weight: 700; }
.bar-price i { font-size: 11px; font-style: normal; }

/* 提示条 */
.tip { background: #fff8e6; color: #a06a00; font-size: 12px; border-radius: 8px; padding: 9px 11px; line-height: 1.6; }
.tip.green { background: var(--brand-soft); color: #2c6b3e; }
.tip.red { background: #fdecec; color: #a52323; }

/* 空态 */
.empty { text-align: center; color: var(--text-3); font-size: 13px; padding: 60px 20px; }
.empty .ic { font-size: 40px; display: block; margin-bottom: 10px; opacity: .5; }

/* 详情页 */
.detail-head { background: #fff; padding: 12px; }
.detail-head .pr { display: flex; align-items: baseline; gap: 8px; }
.detail-head .pr b { font-size: 24px; color: var(--price); }
.detail-head .pr b i { font-size: 13px; font-style: normal; }
.detail-head h1 { font-size: 16px; font-weight: 600; margin-top: 6px; line-height: 1.45; }
.detail-head .meta { font-size: 11.5px; color: var(--text-3); margin-top: 6px; display: flex; gap: 12px; }
.detail-body { background: #fff; margin-top: 10px; padding: 12px; }
.detail-body h2 { font-size: 14px; border-left: 3px solid var(--brand); padding-left: 8px; margin-bottom: 10px; }
.detail-body .txt { font-size: 13.5px; line-height: 1.9; color: #444; word-break: break-word; }
.detail-body .txt img { border-radius: 8px; margin: 8px 0; }
.detail-body .kv { font-size: 13px; display: flex; padding: 8px 0; border-bottom: 1px dashed #eee; }
.detail-body .kv:last-child { border-bottom: 0; }
.detail-body .kv span:first-child { width: 82px; color: var(--text-3); }

/* 弹层 */
.mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 60; display: none; }
.mask.on { display: block; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-width: 480px; margin: 0 auto; background: #fff; border-radius: 14px 14px 0 0; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); display: none; }
.sheet.on { display: block; }
.sheet h3 { font-size: 15px; margin-bottom: 10px; }
.sheet .opt { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.sheet .opt b { font-weight: 400; border: 1px solid #e0e5e1; border-radius: 6px; padding: 6px 14px; font-size: 13px; }
.sheet .opt b.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.sheet .qty { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; font-size: 13px; }

/* 订单卡片 */
.order { background: #fff; border-radius: var(--radius); padding: 12px; margin-bottom: 10px; }
.order .hd { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); margin-bottom: 9px; }
.order .hd .st { color: var(--orange); font-weight: 600; }
.order .hd .st.done { color: var(--brand); }
.order .gd { display: flex; gap: 9px; }
.order .gd .pic { width: 62px; height: 62px; border-radius: 8px; overflow: hidden; background: #f0f2f1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #c3cbc6; }
.order .gd .info { flex: 1; min-width: 0; font-size: 13px; }
.order .gd .info .nm { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.order .ft { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-2); }

/* 底部信息 */
.site-foot { text-align: center; font-size: 11px; color: var(--text-3); line-height: 1.8; padding: 18px 16px 24px; }
.site-foot a { color: var(--brand); }
.site-foot .links { margin: 6px 0; }

/* 分类页 */
.cat-wrap { display: flex; min-height: calc(100vh - 58px); }
.cat-side { width: 92px; background: #f0f2f1; flex-shrink: 0; }
.cat-side a { display: block; padding: 15px 6px; text-align: center; font-size: 13px; color: var(--text-2); border-left: 3px solid transparent; }
.cat-side a.on { background: #fff; color: var(--brand); font-weight: 600; border-left-color: var(--brand); }
.cat-main { flex: 1; padding: 10px; background: #fff; }
.cat-main .cat-t { font-size: 13px; color: var(--text-2); margin: 4px 0 10px; }

/* 待付款提示条 */
.pending-bar { background: linear-gradient(135deg, #fff4e5, #ffe9cc); border-radius: var(--radius); padding: 10px 12px; font-size: 12px; color: #8a5300; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.pending-bar a { color: #8a5300; font-weight: 600; }

/* 支付方式 */
.pay-opt { display: flex; align-items: center; gap: 10px; padding: 14px 12px; background: #fff; border-bottom: 1px solid var(--line); }
.pay-opt .ic { font-size: 22px; }
.pay-opt .t { flex: 1; font-size: 14px; }
.pay-opt .t small { display: block; font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: rgba(0, 0, 0, .78); color: #fff; font-size: 13px; padding: 9px 16px;
  border-radius: 18px; z-index: 99; opacity: 0; transition: opacity .25s; pointer-events: none; max-width: 80%;
}
#toast.on { opacity: 1; }

/* 骨架/加载 */
.loading { text-align: center; color: var(--text-3); font-size: 13px; padding: 40px 0; }