/* ============================================================
   荒野熊移动站 · Web 端补充样式
   （小程序原生才有的能力：tabBar / 导航栏 / 悬浮客服）
   设计口径与 app.wxss 一致：纸 #f2efe7、绿 #14352b、金 #c9a227、细线分区
   ============================================================ */

body {
  padding-bottom: calc(1.28rem + env(safe-area-inset-bottom));
  background: var(--wb-paper);
}

/* ---------- 底部 tabBar（替代小程序 tabBar） ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: stretch;
  background: rgba(253, 252, 248, .94);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--wb-line);
  padding: .1rem 0 calc(.1rem + env(safe-area-inset-bottom));
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .04rem; padding: .06rem 0; color: var(--wb-muted);
  font-size: .19rem; letter-spacing: .02rem; line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.tabbar a .ico { width: .44rem; height: .44rem; opacity: .55; }
.tabbar a.on { color: var(--wb-green); font-weight: 600; }
.tabbar a.on .ico { opacity: 1; }

/* ---------- 内页顶栏（深绿 sticky，替代小程序原生导航栏） ---------- */
.topbar {
  position: sticky; top: 0; z-index: 80;
  display: flex; align-items: center; gap: .18rem;
  padding: calc(.2rem + env(safe-area-inset-top)) .3rem .2rem;
  background: var(--wb-green); color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.topbar-back {
  display: flex; align-items: center; justify-content: center;
  width: .56rem; height: .56rem; margin-left: -.12rem;
  font-size: .42rem; line-height: 1; color: rgba(255, 255, 255, .86);
}
.topbar-title { flex: 1; font-size: .34rem; font-weight: 600; letter-spacing: .01rem; }
.topbar-brand { font-size: .2rem; letter-spacing: .12rem; color: rgba(255, 255, 255, .55); text-transform: uppercase; }

/* ---------- 悬浮客服（Web 端保留） ---------- */
.mweb-fab {
  position: fixed; right: .3rem; z-index: 89;
  bottom: calc(1.5rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: .02rem;
  width: .96rem; height: .96rem; border-radius: 50%;
  background: var(--wb-green); color: #fff;
  box-shadow: 0 .1rem .26rem rgba(20, 53, 43, .34);
  justify-content: center; font-size: .18rem; letter-spacing: .02rem;
}
.mweb-fab .ico { width: .38rem; height: .38rem; }

/* ---------- 客服弹层（点开显示电话 / 二维码） ---------- */
.cs-mask { position: fixed; inset: 0; z-index: 95; background: rgba(10, 29, 22, .5); }
.cs-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 96;
  background: var(--wb-card); border-radius: var(--wb-sheet) var(--wb-sheet) 0 0;
  padding: .44rem .36rem calc(.4rem + env(safe-area-inset-bottom));
  box-shadow: 0 -.2rem .6rem rgba(10, 29, 22, .18);
}
.cs-sheet h3 { margin: 0 0 .1rem; font-size: .42rem; color: var(--wb-ink); }
.cs-sheet .cs-sub { font-size: .24rem; color: var(--wb-muted); margin-bottom: .3rem; }
.cs-row {
  display: flex; align-items: center; gap: .22rem; padding: .26rem 0;
  border-top: 1px solid var(--wb-line-soft); font-size: .28rem; color: var(--wb-ink);
}
.cs-row .ico { width: .48rem; height: .48rem; }
.cs-row small { display: block; color: var(--wb-muted); font-size: .22rem; margin-top: .04rem; }
.cs-qr { text-align: center; padding: .3rem 0 .1rem; }
.cs-qr img { width: 3.2rem; margin: 0 auto .16rem; border-radius: .12rem; }
.cs-qr view { font-size: .22rem; color: var(--wb-muted); }
.cs-close { margin-top: .28rem; text-align: center; font-size: .26rem; color: var(--wb-muted); padding: .2rem; }

/* ---------- 通用：图片 contain 兜底 ---------- */
img[data-fit="contain"] { object-fit: contain; }

/* hidden 属性兜底（作者样式会覆盖 UA 的 [hidden]，必须显式声明） */
[hidden] { display: none !important; }

/* ---------- swiper 撑高（小程序 swiper-item 自动铺满，Web 端要显式声明） ---------- */
.hero-swiper { display: flex; }
.hero-swiper swiper-item { width: 100%; height: 100%; flex: 0 0 100%; }
/* 山野实录：高度链 swiper(3.8rem) → item(100%) → .vcard(100%)；两侧露边对应小程序 previous/next-margin 40rpx */
.vb-swiper { display: flex; padding: 0 .3rem; scroll-padding: 0 .3rem; }
.vb-swiper swiper-item { width: 100%; height: 100%; flex: 0 0 100%; scroll-snap-align: center; }

/* ---------- 关于 tab：品牌熊头 LOGO（mask 上色，随选中态变色） ----------
   熊头比线性图标宽扁（148×103），contain 放进方框只剩 .30 高、显得小，
   所以单独给一条更宽的盒子（高度与其它 tab 图标一致，文字基线不跳），
   并直接用品牌色上色：未选中 #14352b、选中压到更深的 #0a1d16。 */
.tabbar a .ico-bear {
  width: .74rem;
  height: .52rem;
  /* 熊头比线性图标高，负底边把「关于」两字顶回与其它 tab 同一基线 */
  margin-bottom: -.06rem;
  opacity: .92;
  color: var(--wb-green);
  background-image: none !important;
  background-color: currentColor;
  -webkit-mask: url(https://assets.huangyexiong.com/mp/mweb/bear-head.png) center / contain no-repeat;
          mask: url(https://assets.huangyexiong.com/mp/mweb/bear-head.png) center / contain no-repeat;
}

.tabbar a.on .ico-bear {
  color: var(--wb-green-deep);
  opacity: 1;
}

/* ---------- WebKit（iOS 微信 WKWebView）兼容 ----------
   <a> 默认 display:inline，包着块级内容 + 绝对定位子层时，
   绝对定位层会以细窄内联盒为包含块 → 整卡文字塌成竖条
   （课程页 photo-card 已实测复现）。站内裸 <a> 只在 tabbar
   （flex 子项会被块化，不受影响），统一 block 最稳；
   已有 flex/block 定义的类特异性更高，不受此规则影响。 */
a { display: block; }
.chip, .more-link { display: inline-block; }

/* ---------- 首页宫格「品牌故事」熊头：裁掉透明边后按原比例显示，熊头完整放大 ---------- */
.gn-bear {
  width: .92rem;
  height: .78rem;
  object-fit: contain;
}