/* ============================================================================
   mobile.css — 手机端专有样式
   两端独立设计 · 批次 1 骨架
   仅在 <body data-device="mobile"> 生效
   公共样式仍在 app.css，本文件只放手机独有布局
   ========================================================================== */

/* 底部导航高度变量（吸底栏抬高、内容留白都基于它） */
body[data-device="mobile"] { --botnav-h: 52px; }

/* ---------- 手机底部固定 4 tab ---------- */
body[data-device="mobile"] .botnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;   /* ★ 降到 90：让购物车抽屉(101)/地址弹窗(120)/规格sheet 打开时盖住它，内部按钮不被挡 */
  display: flex;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
  padding-bottom: env(safe-area-inset-bottom);
}
body[data-device="mobile"] .botnav a {
  flex: 1;
  text-align: center;
  padding: 8px 0 10px;
  font-size: 10px;
  color: var(--c-sub);
  text-decoration: none;
  letter-spacing: 1px;
  line-height: 1.2;
  transition: color .15s var(--ease);
}
body[data-device="mobile"] .botnav a.on { color: var(--c-text); }
body[data-device="mobile"] .botnav a .ic {
  display: block;
  margin: 0 auto 4px;
  line-height: 0;
}
body[data-device="mobile"] .botnav a .ic svg {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 手机隐藏桌面顶部横向导航（三重保险之一：data-device） ---------- */
body[data-device="mobile"] .topnav { display: none !important; }

/* ---------- 三重保险之二：小屏 media query 兜底（即使 JS 没跑/data-device 没打上） ---------- */
@media (max-width: 767px) {
  .topnav { display: none !important; }
}

/* ---------- 给底部 tab 留空间，避免遮挡流式内容（结算/地址保存等按钮） ---------- */
body[data-device="mobile"] { padding-bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px) + 16px); }
body[data-device="mobile"] .footer { padding-bottom: 24px; }

/* ---------- 商品详情页吸底购买栏：抬到底部导航上方，两者都可见 ----------
   老板反馈：加入底部导航后 buy-bar 的"加入购物车/立即购买"被 botnav 挡住 */
body[data-device="mobile"] .buy-bar {
  bottom: calc(var(--botnav-h) + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 95 !important;   /* 高于 botnav(90)、低于模态(overlay100/drawer101/modal120) */
}
body[data-device="mobile"] .overlay { bottom: var(--botnav-h) !important; }

/* ---------- 模态层级：botnav=90；drawer/overlay 底边已抬高不重叠 botnav；
   modal-mask(地址/规格弹窗)=120 仍全屏盖住 botnav（模态弹窗合理） ---------- */