/* 涵华优选商城 - 移动端 H5 样式 */
:root {
  --brand: #07c160;
  --brand-dark: #06ad56;
  --red: #fa5151;
  --orange: #ff9f0a;
  --bg: #f6f7f9;
  --card: #ffffff;
  --text: #1a1a1a;
  --text-2: #666;
  --text-3: #999;
  --border: #ececec;
  --radius: 12px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
#app { max-width: 640px; margin: 0 auto; background: var(--bg); min-height: 100vh; position: relative; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: 14px; outline: none; }

/* 布局 */
.page { padding-bottom: 66px; min-height: 100vh; }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  max-width: 640px; margin: 0 auto;
  display: flex; background: #fff; border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 7px 0 6px; color: var(--text-3); font-size: 10px; gap: 2px; }
.tabbar a.on { color: var(--brand); }
.tabbar .ti { width: 24px; height: 24px; }
.tabbar .badge {
  position: absolute; transform: translate(8px, -6px); background: var(--red); color: #fff;
  border-radius: 9px; font-size: 10px; padding: 0 5px; min-width: 16px; height: 16px; line-height: 16px; text-align: center;
}

/* 通用小组件 */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: #fff;
}
.topbar .back { font-size: 20px; color: var(--text); width: 26px; text-align: center; cursor: pointer; }
.topbar .ttl { font-size: 17px; font-weight: 600; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.searchbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--brand); 
}
.searchbar .box {
  flex: 1; display: flex; align-items: center; gap: 6px; background: #fff; border-radius: 18px; height: 34px; padding: 0 12px;
}
.searchbar .box input { border: none; flex: 1; background: transparent; height: 100%; }
.searchbar .brand { color: #fff; font-weight: 700; font-size: 17px; white-space: nowrap; display:flex; align-items:center; gap:6px; }
.searchbar .brand .top-logo { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background:#fff; flex:none; }
.searchbar .act { color: #fff; white-space: nowrap; }

.goods-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.goods-grid.cols3 { grid-template-columns: repeat(3, 1fr); }
.goods-card { background: var(--card); border-radius: var(--radius); overflow: hidden; position: relative; }
.goods-card .ph { width: 100%; aspect-ratio: 1; background: #f0f0f0; object-fit: cover; display:block; }
.goods-card .nm { font-size: 13px; line-height: 1.35; height: 36px; overflow: hidden; padding: 6px 8px 2px; color: #333; }
.goods-card .inf { padding: 2px 8px 8px; }
.goods-card .tag { display:inline-block; font-size: 10px; color: var(--brand); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; margin-right: 4px; }
.goods-card .sold { color: var(--text-3); font-size: 11px; }
.price { color: var(--red); font-weight: 700; }
.price i { font-style: normal; font-size: 12px; margin-right: 1px; }
.mkt { color: var(--text-3); text-decoration: line-through; font-size: 12px; margin-left: 6px; font-weight: 400; }

.btn { border: none; border-radius: 20px; padding: 8px 18px; cursor: pointer; font-size: 14px; }
.btn.primary { background: linear-gradient(90deg, #ff9f0a, #fa5151); color: #fff; }
.btn.green { background: var(--brand); color: #fff; }
.btn.plain { background: #fff; border: 1px solid var(--border); color: var(--text); }
.btn.block { display: block; width: 100%; text-align: center; }
.btn[disabled] { opacity: .5; }

.empty { text-align: center; color: var(--text-3); padding: 60px 0; }
.empty .ic { font-size: 46px; margin-bottom: 10px; }
.spin { display:block; margin: 24px auto; width: 22px; height: 22px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: rot 0.8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* 首页 */
.h-search { background: var(--brand); padding: 10px 12px 6px; }
.h-search .box { background:#fff; border-radius:18px; height:34px; display:flex; align-items:center; padding:0 12px; color:#999; gap:6px; }
.h-swiper { margin: 8px; border-radius: 12px; overflow: hidden; position: relative; background:#f2f3f5; }
.h-swiper img { width: 100%; aspect-ratio: 2.4/1; object-fit: cover; display:block; }
.h-swiper .dots { position:absolute; bottom:6px; right:0; left:0; display:flex; justify-content:center; gap:4px; }
.h-swiper .dots i { width:6px; height:6px; border-radius:3px; background:rgba(255,255,255,.5); }
.h-swiper .dots i.on { background:#fff; width:14px; }

/* 通用触摸轮播 */
.yx-swiper { position: relative; width: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.yx-swiper .tr { display: flex; will-change: transform; }
.yx-swiper .tr.an { transition: transform .32s ease; }
.yx-swiper .slide { flex: 0 0 100%; min-width: 0; }
.yx-swiper .slide img { display: block; width: 100%; pointer-events: none; }
.yx-swiper .dots { position: absolute; left: 0; right: 0; bottom: 8px; display: flex; justify-content: center; gap: 4px; z-index: 2; }
.yx-swiper .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.5); }
.yx-swiper .dots i.on { background: #fff; width: 14px; }
.h-cat { background:#fff; margin: 0 8px 8px; border-radius:12px; padding:10px 4px; display:grid; grid-template-columns: repeat(5, 1fr); gap: 10px 4px; }
.h-cat .it { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; color:#444; }
.h-cat .it img { width:44px; height:44px; border-radius: 16px; object-fit: cover; background:#f2f3f5; }
.floor-title { display:flex; align-items:center; justify-content:center; gap:8px; padding: 14px 0 4px; font-size: 16px; font-weight: 700; }
.floor-title::before, .floor-title::after { content:''; width: 22px; height: 2px; background: var(--brand); border-radius: 1px; }
.floor-banner { margin: 6px 8px; border-radius: 10px; overflow: hidden; }
.floor-banner img { width: 100%; aspect-ratio: 2.6/1; object-fit: cover; }
.rec-card { background:#fff; border-radius:12px; padding:8px; margin-bottom:6px; }
.section-title { font-size: 15px; font-weight: 600; margin: 6px 10px; }

/* 分类页 */
.cat-page { display: flex; min-height: calc(100vh - 50px); }
.cat-left { width: 96px; background: #f0f1f3; overflow-y: auto; }
.cat-left .it { padding: 14px 8px; font-size: 13px; color:#444; text-align:center; position:relative; }
.cat-left .it.on { background:#fff; color: var(--brand); font-weight: 600; }
.cat-left .it.on::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:18px; background:var(--brand); border-radius:2px; }
.cat-right { flex:1; background:#fff; overflow-y:auto; padding: 8px; }
.cat-sub { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.cat-sub .chip { border:1px solid var(--border); border-radius:14px; padding:3px 10px; font-size:12px; color:#555; }
.cat-sub .chip.on { border-color: var(--brand); color: var(--brand); background:#eafff2; }
.sortbar { display:flex; background:#fff; padding: 8px 0; justify-content: space-around; }
.sortbar .it { font-size: 13px; color: var(--text-2); display:flex; align-items:center; gap:2px; }
.sortbar .it.on { color: var(--brand); font-weight:600; }

/* 商品详情 */
.gd { padding-bottom: 70px; }
.gd-swiper { position: relative; }
.gd-swiper img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.gd-price { background: linear-gradient(90deg,#ff9f0a,#fa5151); color:#fff; padding: 10px 14px 12px; }
.gd-price .big { font-size: 22px; font-weight: 800; }
.gd-price .mkt { color: rgba(255,255,255,.8); }
.gd-name { padding: 10px 12px; background:#fff; font-size: 15px; line-height:1.5; font-weight:600; }
.gd-meta { display:flex; background:#fff; border-top:1px solid var(--border); padding: 8px 12px; color:var(--text-3); font-size:12px; gap: 16px; }
.gd-bar {
  position: fixed; left:0; right:0; bottom:0; z-index: 40; max-width: 640px; margin:0 auto;
  background:#fff; border-top:1px solid var(--border); display:flex; align-items:center; padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
.gd-bar .ico { display:flex; flex-direction:column; align-items:center; font-size:10px; color:var(--text-2); width:52px; cursor:pointer; gap:1px; }
.gd-bar .ico .ti { width:22px; height:22px; }
.gd-bar .buy { margin-left:auto; display:flex; gap:8px; }
.sku-panel { background:#fff; margin-top:8px; padding: 12px; }
.sku-row { display:flex; flex-wrap:wrap; gap:8px; }
.sku-item { border:1px solid var(--border); border-radius:14px; padding:4px 12px; font-size:12px; color:#333; background:#fafafa; }
.sku-item.on { border-color:var(--brand); color:var(--brand); background:#eafff2; }
.qty { display:flex; align-items:center; gap:10px; margin-top:10px; }
.qty .ctl { width:26px; height:26px; border:1px solid var(--border); border-radius:6px; text-align:center; line-height:24px; background:#fff; }
.cell { display:flex; align-items:center; justify-content:space-between; padding: 12px; background:#fff; }
.cell + .cell { border-top: 1px solid var(--border); }
.cell .lb { color: var(--text-2); }
.rich { background:#fff; margin-top: 8px; padding: 10px 12px; overflow: hidden; }
.rich :deep(img), .rich img { max-width: 100% !important; height: auto !important; }

/* 购物车/结算/订单 */
.cart-group { background:#fff; border-radius: 12px; margin: 8px; }
.line { display:flex; align-items:center; padding: 10px; gap: 10px; border-bottom: 1px solid var(--border); }
.check { width:20px; height:20px; border:1px solid #ccc; border-radius:50%; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.check.on { background: var(--brand); border-color: var(--brand); color:#fff; }
.line img.g { width: 76px; height: 76px; border-radius: 8px; background:#f0f0f0; object-fit: cover; }
.line .mi { flex:1; min-width:0; }
.line .gname { font-size: 13px; line-height:1.4; max-height: 36px; overflow:hidden; color:#333; }
.line .spec { font-size: 11px; color:var(--text-3); background:#f5f5f5; border-radius:4px; display:inline-block; padding:0 5px; margin-top:3px; }
.cart-foot {
  position: fixed; left:0; right:0; bottom:0; z-index: 40; max-width:640px; margin:0 auto;
  background:#fff; border-top:1px solid var(--border); display:flex; align-items:center; padding: 8px 10px;
  padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
/* 购物车页同时显示底部导航时,结算栏抬高到导航条上方,避免被遮挡 */
.cart-foot.with-tab { bottom: 55px; }
.cart-foot .all { display:flex; align-items:center; gap:6px; font-size:13px; }
.cart-foot .sum { margin-left:auto; }
.stepper { display:inline-flex; align-items:center; gap:8px; }
.stepper b { min-width: 30px; text-align:center; font-weight:500; }
.stepper i { width:24px; height:24px; border:1px solid var(--border); border-radius:6px; font-style:normal; text-align:center; line-height:22px; cursor:pointer; background:#fff; }
.order-card { background:#fff; border-radius:12px; margin: 8px; overflow:hidden; }
.order-head { display:flex; justify-content:space-between; padding: 10px 12px; font-size:12px; color:var(--text-3); border-bottom:1px solid var(--border); }
.order-head .st { color: var(--orange); font-weight: 600; }
.order-actions { display:flex; justify-content:flex-end; gap:8px; padding: 10px; }
.form { background:#fff; margin:8px; border-radius:12px; padding: 4px 12px; }
.form .f { display:flex; align-items:center; padding: 12px 0; border-bottom:1px solid var(--border); gap:10px; }
.form .f:last-child { border-bottom:none; }
.form .f label { width: 78px; color: var(--text-2); flex:none; }
.form .f input, .form .f textarea, .form .f select { flex:1; border:none; background:transparent; }
.form .f textarea { resize:none; }
.paybox { text-align:center; padding: 40px 16px; }
.paybox .amt { font-size: 34px; font-weight: 800; color:#1a1a1a; }
.paybox .sub { color: var(--text-3); margin: 8px 0 30px; }

/* 我的 */
.user-head { background: linear-gradient(135deg, var(--brand), #05c8a0); color:#fff; padding: 20px 16px; display:flex; align-items:center; gap: 12px; }
.user-head .ava { width: 60px; height:60px; border-radius: 50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size: 26px; overflow:hidden; }
.user-head .ava img { width:100%; height:100%; object-fit: cover; }
.entry-grid { display:grid; grid-template-columns: repeat(4, 1fr); background:#fff; padding: 12px 0; margin:8px; border-radius:12px; text-align:center; }
.entry-grid a { display:flex; flex-direction:column; gap:4px; align-items:center; font-size: 12px; color:#333; }
.entry-grid .ic { font-size: 22px; }
.list-group { background:#fff; margin:8px; border-radius:12px; overflow:hidden; }
.list-group .it { display:flex; align-items:center; padding: 14px 12px; gap:10px; border-bottom:1px solid var(--border); font-size:14px; }
.list-group .it:last-child { border-bottom:none; }
.list-group .it .arr { margin-left:auto; color:#ccc; }
.status-tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:10px; }
.status-pending_pay { background:#fff4e0; color:#b26a00; }
.status-pending_ship { background:#e6f4ff; color:#0b63c4; }
.status-shipped { background:#eafff2; color:#0aa34a; }
.status-finished { background:#f0f0f0; color:#555; }
.status-cancelled, .status-refunded { background:#f5f5f5; color:#999; }
.status-refunding { background:#ffe9e9; color:#d32f2f; }
.toast {
  position: fixed; left:50%; top: 45%; transform: translate(-50%,-50%); z-index: 300;
  background: rgba(0,0,0,.75); color:#fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; max-width: 76vw;
}
.modal-mask { position: fixed; inset:0; background: rgba(0,0,0,.45); z-index: 200; display:flex; align-items:flex-end; justify-content:center; }
.modal-mask .sheet { background:#fff; border-radius: 14px 14px 0 0; width:100%; max-width:640px; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); }
.dialog { align-items:center; }
.dialog .box { width: 280px; background:#fff; border-radius: 14px; overflow:hidden; }
.dialog .dbody { padding: 22px 18px; text-align:center; }
.dialog .dbtns { display:flex; border-top:1px solid var(--border); }
.dialog .dbtns button { flex:1; border:none; background:#fff; padding: 13px; font-size:15px; }
.dialog .dbtns button:last-child { color: var(--brand); font-weight:600; border-left:1px solid var(--border); }
.mobile-only-safe { min-height: 8px; }