/* ===== 杯无忌C端原型 · 共享样式 ===== */
:root{
  --green-deep:#1a3a2e; --green:#7ea388; --green-deep2:#2d5a47; --green-soft:#eaf1ea;
  --gold:#c9a96e; --gold-light:#e6d4a8; --bg:#f6f1e4; --card:#fff;
  --ink:#2b2b2b; --ink-2:#6f756f; --ink-3:#a3a89f; --red:#c0493b;
  --line:#ece6d6; --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{background:#e7e1d2;}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
img{display:block;}
.kai{font-family:"STKaiti","KaiTi","Kaiti SC",serif;}
.page{max-width:430px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;box-shadow:0 0 40px rgba(26,58,46,.18);padding-bottom:84px;overflow:hidden;}
.page.no-tab{padding-bottom:24px;}

/* ===== 自定义导航栏 ===== */
.navbar{position:sticky;top:0;z-index:40;height:50px;background:#fff;display:flex;align-items:center;
  padding:0 12px;border-bottom:1px solid var(--line);gap:8px;}
.navbar .back{width:34px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.navbar .back svg{width:23px;height:23px;stroke:var(--ink);}
.navbar .title{flex:1;text-align:center;font-size:17px;font-weight:700;letter-spacing:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px;}
.navbar .act{min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink-2);gap:4px;}
.navbar .act svg{width:22px;height:22px;stroke:var(--ink);}
.navbar.green{background:linear-gradient(135deg,var(--green-deep),var(--green-deep2));border:0;}
.navbar.green .title{color:#fff;}
.navbar.green .back svg, .navbar.green .act svg{stroke:#fff;}
.navbar.green .act{color:rgba(255,255,255,.85);}

/* ===== 搜索条 ===== */
.searchbar{display:flex;align-items:center;gap:9px;height:42px;margin:10px 14px;background:#fff;
  border-radius:21px;padding:0 16px;box-shadow:0 3px 10px rgba(26,58,46,.07);}
.searchbar svg{width:17px;height:17px;stroke:#9aa39a;flex-shrink:0;}
.searchbar input{flex:1;border:0;outline:0;font-size:14px;background:transparent;color:var(--ink);}
.searchbar input::placeholder{color:#9aa39a;}

/* ===== 通用卡片 ===== */
.card{background:#fff;border-radius:var(--radius);margin:12px 14px;box-shadow:0 3px 12px rgba(26,58,46,.06);}
.cell{display:flex;align-items:center;gap:11px;padding:14px 16px;}
.cell+.cell{border-top:1px solid var(--line);}
.cell .c-ic{width:25px;height:25px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cell .c-ic svg{width:22px;height:22px;stroke:var(--green-deep);fill:none;stroke-width:1.8;}
.cell .c-t{flex:1;font-size:15px;}
.cell .c-v{font-size:13px;color:var(--ink-3);max-width:55%;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cell .arrow{color:#c7cdc4;flex-shrink:0;}
.cell .arrow svg{width:17px;height:17px;stroke:#c0c6bd;}

/* ===== 按钮 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:22px;
  font-size:16px;font-weight:600;border:0;letter-spacing:2px;cursor:pointer;}
.btn-block{display:flex;width:calc(100% - 28px);margin:14px;}
.btn-primary{background:linear-gradient(135deg,var(--green-deep),var(--green-deep2));color:#fff;
  box-shadow:0 6px 16px rgba(26,58,46,.28);}
.btn-gold{background:linear-gradient(135deg,#d8b87c,var(--gold));color:#3a2a10;}
.btn-line{background:#fff;color:var(--green-deep);border:1.5px solid var(--green-deep);}
.btn-sm{height:32px;border-radius:16px;font-size:13px;padding:0 16px;letter-spacing:1px;}
.btn-ghost{background:var(--green-soft);color:var(--green-deep);}

/* ===== 商品网格（两列） ===== */
.goods-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 12px 12px;}
.gcard{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 3px 10px rgba(26,58,46,.07);min-width:0;}
.gcard .gp{position:relative;aspect-ratio:1/1;background:#eef0ea;}
.gcard .gp img{width:100%;height:100%;object-fit:cover;}
.gcard .gp .tag{position:absolute;top:7px;left:7px;background:rgba(26,58,46,.82);color:var(--gold-light);
  font-size:9.5px;padding:2px 7px;border-radius:9px;letter-spacing:1px;}
.gcard .gi{padding:8px 10px 10px;}
.gcard .gn{font-size:13.5px;line-height:1.4;height:38px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;}
.gcard .gp-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:6px;}
.gcard .price{color:var(--red);font-weight:700;font-size:17px;}
.gcard .price::first-letter{font-size:12px;}
.gcard .sold{font-size:10.5px;color:var(--ink-3);}

/* ===== 区块标题 ===== */
.sec-head{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 10px;}
.sec-t{font-size:18px;font-weight:700;letter-spacing:2px;display:flex;align-items:center;gap:9px;}
.sec-t::before{content:"";width:4px;height:18px;background:var(--green-deep);border-radius:2px;}
.more{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:2px;}

/* ===== 空态 ===== */
.empty{padding:70px 20px;text-align:center;color:var(--ink-3);}
.empty svg{width:74px;height:74px;stroke:#d3d8cf;margin:0 auto 14px;}
.empty p{font-size:14px;}

/* ===== 底部 TabBar ===== */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:430px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom);}
.tab{flex:1;height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:#8b8f89;font-size:11px;}
.tab svg{width:24px;height:24px;}
.tab.on{color:var(--green-deep);font-weight:600;}
.tab-center{flex:0 0 76px;position:relative;}
.tab-center .logo{position:absolute;left:50%;top:-24px;transform:translateX(-50%);width:60px;height:60px;
  border-radius:50%;background:linear-gradient(145deg,var(--green-deep),var(--green-deep2));
  border:4px solid var(--bg);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px rgba(26,58,46,.38);}
.tab-center .logo span{font-size:27px;color:var(--gold-light);line-height:1;}
.tab-center .cap{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:11px;
  color:var(--green-deep);font-weight:600;letter-spacing:1px;}

/* ===== 通用小部件 ===== */
.badge{display:inline-block;background:var(--gold);color:#fff;font-size:10px;padding:1px 7px;border-radius:8px;font-weight:600;}
.tag-line{display:inline-block;font-size:10.5px;color:var(--gold);border:1px solid var(--gold-light);border-radius:8px;padding:1px 7px;}
.price-big{color:var(--red);font-size:26px;font-weight:700;}
.price-big::first-letter{font-size:16px;}
.divider{height:8px;background:#efe9d9;}
.checkbox{width:20px;height:20px;border-radius:50%;border:1.8px solid #c4c9bf;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:#fff;}
.checkbox.on{background:var(--green-deep);border-color:var(--green-deep);}
.checkbox.on svg{width:12px;height:12px;stroke:#fff;stroke-width:3;fill:none;}
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:15px;overflow:hidden;}
.stepper button{width:28px;height:28px;border:0;background:#fff;font-size:17px;color:var(--green-deep);line-height:1;}
.stepper span{min-width:34px;text-align:center;font-size:14px;}