/* 苏安长珍粽子接龙 H5 —— 截图 1:1 还原（移动端） */
:root{
  --wx-green:#1aad19;
  --wx-green-deep:#07c160;
  --wx-green-soft:#e8f7e8;
  --red:#e02e2e;
  --ink:#222;
  --ink-2:#444;
  --gray:#888;
  --gray-2:#aaa;
  --line:#ececec;
  --bg:#f4f4f4;
  --card:#ffffff;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);font-family:"PingFang SC","Microsoft YaHei",-apple-system,Helvetica,Arial,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

/* 页面容器：移动端宽度，白底卡片 */
.page{
  max-width:480px;
  margin:0 auto;
  background:var(--card);
  min-height:100vh;
  padding:14px 16px 32px;
}

/* 品牌头 */
.brand{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.brand-logo{width:56px;height:auto;flex:none}
.brand-meta{display:flex;flex-direction:column;gap:2px}
.brand-name{font-size:15px;font-weight:700;color:var(--ink)}
.brand-date{font-size:12px;color:var(--gray)}
.cloud-badge{display:inline-block;margin-left:8px;font-size:11px;padding:2px 8px;border-radius:999px;background:#eef0f2;color:#555;vertical-align:middle}
.cloud-badge.on{background:#e8f7e8;color:#07c160}

/* 标题 */
.title{font-size:18px;font-weight:700;color:var(--ink);line-height:1.55;margin:10px 0 12px;letter-spacing:.2px}

/* 正文 */
.body{font-size:14px;color:var(--ink-2);line-height:1.7;margin:0 0 14px;letter-spacing:.1px}

/* 2×3 商品图网格 */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:4px;
  border-radius:6px;
  overflow:hidden;
  margin-bottom:14px;
}
.gallery-item{width:100%;aspect-ratio:1/1;object-fit:cover;background:#eee}

/* 价格 */
.price{margin:14px 0 16px;font-weight:800;color:var(--red);font-size:22px;letter-spacing:.5px}
.price .yen{font-size:20px}
.price .num{margin-right:4px}

/* 分隔线 */
.divider{border:0;border-top:1px solid var(--line);margin:6px 0 14px}

/* 底部接龙 */
.jielong{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}
.jielong-info{flex:1;display:flex;flex-direction:column;gap:12px}
.jielong-cta{font-size:16px;font-weight:700;color:var(--ink)}
.jielong-cta .arrow{color:var(--wx-green-deep);font-weight:800}
.jielong-online{display:flex;align-items:center;gap:6px}
.avatar-dot{display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #eee;margin-left:-6px}
.avatar-dot:first-child{margin-left:0}
.online-text{font-size:12px;color:var(--gray);margin-left:4px}
.qr{width:118px;height:118px;flex:none;border-radius:6px}

/* 接龙交互 */
.join{background:var(--wx-green-soft);border-radius:10px;padding:14px;margin-bottom:14px}
.join-title{font-size:15px;font-weight:700;color:var(--wx-green-deep);margin:0 0 4px}
.join-hint{font-size:11px;color:var(--gray);margin:0 0 10px;line-height:1.5}
.join-form{display:flex;flex-direction:column;gap:10px}
.join-form .field{display:flex;flex-direction:column;gap:4px}
.join-form .field label{font-size:12px;color:var(--gray);font-weight:600}
.join-form input,
.join-form select{
  border:1px solid #d4ead4;background:#fff;border-radius:6px;
  padding:9px 10px;font-size:14px;color:var(--ink);outline:none;
  width:100%;font-family:inherit;
}
.join-form input:focus,
.join-form select:focus{border-color:var(--wx-green)}
.join-btn{
  background:var(--wx-green-deep);color:#fff;border:none;border-radius:6px;
  padding:10px 14px;font-size:15px;font-weight:700;cursor:pointer;width:100%;margin-top:4px;
}
.join-btn:active{opacity:.85}

/* 实时费用 */
.fee-box{
  background:#fff;border:1px dashed #c4e3c4;border-radius:6px;
  padding:10px 12px;font-size:13px;color:var(--ink-2);
}
.fee-row{display:flex;justify-content:space-between;align-items:center;line-height:1.9}
.fee-label{color:var(--gray)}
.fee-val{color:var(--ink);font-weight:700}
.fee-val.strong{color:var(--red);font-size:16px}
.fee-formula{margin-top:4px;font-size:11px;color:var(--gray-2);line-height:1.5;word-break:break-all}
.fee-warn{margin-top:6px;font-size:12px;color:#c43a3a;display:none;line-height:1.5}

/* 接龙列表项：姓名+收货地  /  商品×数量 + 运费 + 合计 + 时间 */
.jielong-list li{
  display:flex;flex-direction:column;gap:4px;align-items:stretch;
  padding:8px 10px;background:#fff;border-radius:6px;margin-bottom:6px;
  font-size:13px;color:var(--ink-2);flex-wrap:wrap;
}
.jielong-list li:last-child{margin-bottom:0}
.jielong-list .li-line1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.jielong-list .li-line2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.jielong-list .who{font-weight:700;color:var(--ink)}
.jielong-list .region-tag{
  display:inline-block;background:var(--wx-green-soft);color:var(--wx-green-deep);
  border-radius:3px;padding:1px 6px;font-size:11px;font-weight:600;
}
.jielong-list .qty{color:var(--wx-green-deep);font-weight:700}
.jielong-list .li-ship{color:var(--red);font-size:12px;font-weight:600}
.jielong-list .li-total{color:var(--ink);font-size:12px;font-weight:700}
.jielong-list .ts{color:var(--gray-2);font-size:11px;margin-left:auto}

/* 运费模板展示区 */
.fee-tpl{margin-top:14px;background:#fff;border-radius:10px;padding:14px;border:1px solid var(--line)}
.fee-tpl-title{font-size:14px;font-weight:700;color:var(--ink);margin:0 0 10px}
.fee-tpl-list{list-style:none;padding:0;margin:0}
.fee-tpl-item{
  padding:8px 0;border-bottom:1px dashed var(--line);
}
.fee-tpl-item:last-child{border-bottom:0}
.fee-tpl-price{font-size:13px;font-weight:700;color:var(--red);margin-bottom:2px}
.fee-tpl-regions{font-size:12px;color:var(--ink-2);line-height:1.6}
.fee-tpl-note{font-size:11px;color:var(--gray);margin:10px 0 0;line-height:1.6}

/* 底部说明 */
.foot{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line);text-align:center}
.foot-line{font-size:12px;color:var(--gray);line-height:1.9}

/* 经营码支付区（提交接龙后显示） */
.pay{
  margin-top:14px;background:linear-gradient(180deg,#fffbe7 0%,#fff 30%);
  border:1px solid #ffe2a0;border-radius:12px;padding:16px;
}
.pay-title{font-size:15px;font-weight:800;color:var(--ink);margin:0 0 6px}
.pay-hint{font-size:12px;color:#8a6300;margin:0 0 12px;line-height:1.6}
.pay-summary{
  background:#fff;border-radius:8px;padding:10px 12px;margin-bottom:12px;
  border:1px dashed #f0d99a;
}
.pay-row{display:flex;justify-content:space-between;align-items:flex-start;font-size:13px;color:var(--ink-2);padding:3px 0;line-height:1.5}
.pay-row .pay-label{color:var(--gray);min-width:40px}
.pay-amount-card{
  background:var(--red);color:#fff;border-radius:10px;padding:14px 16px;
  text-align:center;margin-bottom:14px;
}
.pay-amount-label{font-size:12px;opacity:.85}
.pay-amount-val{font-size:30px;font-weight:900;letter-spacing:1px;margin:4px 0}
.pay-amount-formula{font-size:11px;opacity:.85;line-height:1.5}
.pay-qrbox{display:flex;flex-direction:column;align-items:center;margin-bottom:12px}
.pay-qr{
  width:180px;height:180px;border-radius:8px;border:1px solid #eee;
  background:#fff;padding:8px;
}
.pay-qr-tip{font-size:12px;color:var(--gray-2);margin-top:8px;text-align:center;line-height:1.6}
.pay-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:10px}
.pay-btn{
  flex:1 1 auto;min-width:120px;padding:10px 12px;border-radius:8px;font-size:13px;
  font-weight:700;border:1px solid var(--wx-green);background:#fff;color:var(--wx-green-deep);
  cursor:pointer;line-height:1.2;
}
.pay-btn.primary{background:var(--wx-green-deep);color:#fff;border-color:var(--wx-green-deep)}
.pay-btn:active{opacity:.85}
.pay-btn:disabled{background:#ccc;border-color:#ccc;color:#fff;cursor:default}
.pay-note{
  background:#fffbe7;border-radius:6px;padding:8px 12px;font-size:11px;
  color:#8a6300;line-height:1.6;margin:0 0 8px;
}
.pay-reset{text-align:center;margin:12px 0 0;font-size:13px}
.pay-reset a{color:var(--wx-green-deep);text-decoration:none}

/* ====== 老板微信咨询入口 ====== */
.boss-block{
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(135deg,#07c160 0%,#1aad19 100%);
  color:#fff;border-radius:10px;padding:12px 14px;
  margin:14px 0 6px;box-shadow:0 4px 12px rgba(7,193,96,.18);
  cursor:pointer;user-select:none;
}
.boss-block:active{opacity:.92}
.boss-block-icon{
  width:54px;height:54px;flex:none;border-radius:6px;background:#fff;
  padding:4px;display:flex;align-items:center;justify-content:center;
}
.boss-block-icon img{width:100%;height:100%;object-fit:contain;display:block}
.boss-block-text{flex:1;min-width:0}
.boss-block-title{font-size:15px;font-weight:700;line-height:1.3}
.boss-block-sub{font-size:12px;opacity:.92;margin-top:2px;line-height:1.4}
.boss-block-arrow{font-size:22px;font-weight:700;opacity:.85;flex:none}

/* 右下角悬浮按钮 */
.boss-fab{
  position:fixed;right:14px;bottom:22px;z-index:80;
  width:54px;height:54px;border-radius:50%;
  background:#07c160;color:#fff;border:0;
  font-size:13px;font-weight:700;line-height:1.1;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  cursor:pointer;user-select:none;
  font-family:inherit;
}
.boss-fab:active{transform:scale(.96)}
.boss-fab .fab-emoji{font-size:18px;line-height:1;margin-bottom:1px}

/* 二维码大图弹窗 */
.boss-modal{
  position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);
  display:none;align-items:center;justify-content:center;padding:20px;
}
.boss-modal.show{display:flex}
.boss-modal-card{
  background:#fff;border-radius:12px;max-width:320px;width:100%;
  padding:18px;text-align:center;position:relative;
}
.boss-modal-close{
  position:absolute;top:8px;right:10px;background:transparent;border:0;
  font-size:22px;color:#888;cursor:pointer;line-height:1;padding:4px 8px;
}
.boss-modal-title{font-size:16px;font-weight:700;color:var(--ink);margin:4px 0 4px}
.boss-modal-sub{font-size:12px;color:var(--gray);margin-bottom:12px;line-height:1.5}
.boss-modal-img{
  width:240px;height:240px;margin:0 auto;border-radius:8px;
  border:1px solid #eee;background:#fff;padding:8px;display:block;
}
.boss-modal-tip{font-size:12px;color:var(--gray-2);margin-top:10px;line-height:1.5}
.boss-modal-tap{margin-top:10px;font-size:11px;color:var(--gray-2)}
/* ============ 商城：商品卡片 + 购物车栏 + 结算页 + 我的订单 ============ */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:4px 2px}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.prod-img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#f7f8f7;display:block}
.prod-ph{width:100%;aspect-ratio:1/1;background:#f7f8f7;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:13px}
.prod-info{padding:10px 10px 12px;display:flex;flex-direction:column;gap:4px;flex:1}
.prod-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prod-desc{font-size:11px;color:var(--gray-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.prod-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:6px}
.prod-price{font-size:15px;font-weight:700;color:var(--wx-green-deep)}
.prod-price small{font-size:11px;color:var(--gray-2);font-weight:400}
.prod-add{border:none;background:var(--wx-green-deep);color:#fff;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer}
.prod-add:active{opacity:.8}

.cart-bar{position:fixed;left:14px;right:14px;bottom:16px;z-index:90;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.12);padding:8px 8px 8px 14px}
.cart-info{flex:1;display:flex;align-items:center;gap:8px}
.cart-badge{position:relative}
.cart-ico{font-size:26px}
.cart-count{position:absolute;top:-6px;right:-10px;background:#e64340;color:#fff;font-size:10px;min-width:16px;height:16px;line-height:16px;border-radius:8px;text-align:center;padding:0 4px;font-weight:700}
.cart-txt{font-size:12px;color:var(--gray-2);line-height:1.3}
.cart-go{background:var(--wx-green-deep);color:#fff;border:none;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer}
.cart-link{background:var(--wx-green-deep);color:#fff;text-decoration:none;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;display:inline-block}

.shop-head{display:flex;align-items:center;justify-content:space-between;margin:14px 0 4px}
.shop-title{font-size:17px;font-weight:700;color:var(--ink)}
.shop-sub{font-size:12px;color:var(--gray-2)}

/* 结算页 / 订单页 */
.co-page{max-width:520px;margin:0 auto;padding:14px 14px 120px}
.co-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.co-card h3{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 10px}
.co-row{display:flex;justify-content:space-between;font-size:13px;color:var(--ink-2);padding:5px 0;line-height:1.5}
.co-row .co-lbl{color:var(--gray-2)}
.co-total{font-size:18px;font-weight:800;color:var(--wx-green-deep)}
.co-field{margin-bottom:10px}
.co-field label{display:block;font-size:12px;color:var(--gray-2);margin-bottom:4px}
.co-field input,.co-field select,.co-field textarea{width:100%;box-sizing:border-box;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px;background:#fff}
.co-submit{width:100%;padding:14px 0;border:none;border-radius:12px;background:var(--wx-green-deep);color:#fff;font-size:16px;font-weight:700;cursor:pointer;margin-top:4px}
.co-submit:active{opacity:.85}
.co-back{display:inline-block;text-decoration:none;color:var(--wx-green-deep);font-size:13px;margin-bottom:10px}

.or-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:10px}
.or-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.or-no{font-size:11px;color:var(--gray-2)}
.or-state{font-size:12px;font-weight:700;color:var(--wx-green-deep)}
.or-state.s-pending-pay{color:#e6a23c}
.or-state.s-refunding{color:#e6a23c}
.or-state.s-refunded{color:#909399}
.or-state.s-canceled{color:#909399}
.or-items{font-size:13px;color:var(--ink);line-height:1.6;margin-bottom:6px}
.or-addr{font-size:12px;color:var(--gray-2);margin-bottom:4px}
.or-total{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px}
.or-actions{display:flex;gap:8px;flex-wrap:wrap}
.or-btn{border:1px solid var(--line);background:#fff;color:var(--ink-2);border-radius:8px;padding:7px 12px;font-size:13px;cursor:pointer}
.or-btn.primary{background:var(--wx-green-deep);border-color:var(--wx-green-deep);color:#fff}
.or-btn.danger{color:#e64340;border-color:#e64340}
.or-logistics{font-size:12px;color:#07c160;margin-top:6px}
.or-empty{text-align:center;color:#aaa;padding:40px 0;font-size:14px}

/* 商品包邮角标 / 实时销量 / 运费模板折叠按钮 */
.prod-tag{display:inline-block;background:#FDEBD0;color:#A96B00;font-size:11px;border-radius:4px;padding:1px 6px;margin-bottom:4px;width:fit-content;font-weight:500}
.prod-sales{font-size:11px;color:#e64340;margin-top:6px;min-height:14px}
.fee-tpl-toggle{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.fee-tpl-toggle:active{background:#f7f8f7}
.fee-tpl-arrow{transition:transform .2s;color:var(--gray-2);font-size:12px}