/* ==========================================================================
 * 网页版专属的间距微调
 *
 * 只放「网页版需要、但改小程序源码不合适」的调整。
 * 小程序是唯一事实来源，所以这类修正集中在运行时的这个文件里，
 * 不去改 wx-bar/miniprogram 下的 wxss。
 *
 * 加载顺序：index.html 里排在 mp/app.css 之后，同权重时以本文件为准。
 * ========================================================================== */

#wx-app {
  /* 顶部呼吸空间：导航栏底边到第一行内容的距离 */
  --wx-pad-top: 16px;
  /* 底部呼吸空间：最后一行内容到页面底边的距离 */
  --wx-pad-bottom: 24px;
}

/* ---------- 隐藏滚动条 ---------- */
/*
 * 小程序里页面滚动是不显示滚动条的；网页版如果显示，
 * 一来不像手机，二来下面加 padding 后页面普遍会多出一点点可滚动高度，
 * 满屏都是细滚动条会很难看。
 * 范围限定在手机外壳内部，不影响网页版自己的其它元素。
 */
#wx-app,
#wx-app * {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 旧 Edge/IE */
}
#wx-app::-webkit-scrollbar,
#wx-app *::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* ---------- 顶部呼吸空间 ---------- */
/*
 * 只作用于「系统导航栏」的页面。
 *
 * 自定义导航页（navigationStyle: custom）是自己画导航栏的，内容本来就
 * 从屏幕顶部开始，再加 padding 会双重留白 —— 运行时给这类页面不加
 * .wx-native-nav 类（见 runtime.js 的 mountPage）。
 *
 * 起因：页面盒子紧贴导航栏底边（间隙 0）。小程序真机上导航栏是
 * 44px + 状态栏，视觉上宽松得多；网页版去掉了状态栏，内容就显得
 * 顶着标题栏，筛选/标签栏尤其明显。
 */
page.wx-page.wx-native-nav > .wx-page-content {
  padding-top: var(--wx-pad-top);
}

/*
 * 我的订单：标签栏是 position: sticky，滚动时会贴到页面顶边（= 导航栏底边）。
 * 给它同样的 top 偏移，让它始终停在导航栏下方。
 * 导航栏底色和页面底色都是 #091E38，多出来的这条会自然融进导航栏。
 */
page.wx-page.pg-pages-orders-orders .tabs {
  top: var(--wx-pad-top);
}

/* ---------- 底部呼吸空间 ---------- */
/*
 * 所有页面统一多留一点，避免最后一行内容贴住页面底边。
 * 页面底部已经让开了 tabBar（见 runtime.js 的 updatePageScrollHeight），
 * 这里纯粹是额外的视觉留白。
 */
page.wx-page > .wx-page-content {
  padding-bottom: var(--wx-pad-bottom);
}
