/* 序列号：CSS叶-01 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,1)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 字体
   大白话：全站的字体和默认字色。干什么：规定每个字用什么字体 family、默认颜色 #333、默认字号 16px。
           角色：叶子
           什么时候用：不用喊它，浏览器加载这一份就全站生效；别的样式都在这副字的基础上叠。 */
body { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; color: #333; font-size: 16px; }

/* 序列号：CSS叶-02 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,2)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 页面底色
   大白话：全站页面的背景色。干什么：把 html 和 body 的底色刷成浅蓝白 #e8f7ff，这就是全站那种"浅蓝底"的来历。
           什么时候用：不用喊它，加载即生效。 */
html, body { background: #e8f7ff; }

/* 序列号：CSS叶-03 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,3)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 主色天蓝
   大白话：全站主色"天蓝"的三个色号。干什么：定义三个 CSS 变量 --天蓝 #00A4EF（按钮、顶栏的实心色）、
           --天蓝深 #0078D4（按下去更深的色）、--天蓝浅 #d8efff（卡片底、次要按钮的浅色）。
           什么时候用：不写死颜色、想换全站配色时，只改这三个变量，全站跟着变。 */
:root { --天蓝: #00A4EF; --天蓝深: #0078D4; --天蓝浅: #d8efff; }

/* 序列号：CSS叶-04 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,4)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 文字深蓝
   大白话：标题、店名用的深蓝色。干什么：定义变量 --深蓝 #1565C0。
           什么时候用：要写大标题、店名、重要文字的颜色时，用 var(--深蓝)，别写死。 */
:root { --深蓝: #1565C0; }

/* 序列号：CSS叶-05 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,5)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 价格红
   大白话：价钱和重要提醒用的红色。干什么：定义变量 --红 #C62828。
           什么时候用：要标价格、标"换区县"这类"必须看见"的字时，用 var(--红)，别写死。 */
:root { --红: #C62828; }

/* 序列号：CSS叶-06 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,6)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 圆角
   大白话：按钮和卡片的统一圆角，三个尺码。干什么：定义 .圆角（8px，普通按钮卡片）、.圆角大（16px，大纸大卡）、
           .圆角小（6px，小零件）。什么时候用：要给一个盒子抹圆角时，挂上对应的类名，别自己写 border-radius。 */
.圆角 { border-radius: 8px; }
.圆角大 { border-radius: 16px; }
.圆角小 { border-radius: 6px; }

/* 序列号：CSS叶-07 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,7)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 白卡底
   大白话：白底加一圈淡阴影的卡片底子。干什么：定义 .白卡（白底 + 淡阴影）。
           什么时候用：要铺一块白色内容板、又不想带内边距和圆角规矩时，挂这个类；常规内容卡更常用枝干层的 .白卡片。 */
.白卡 { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

/* 序列号：CSS叶-08 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,8)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 页面垫底
   大白话：开业前大扫除 + 手机屏就是整页 + 全站最底下那条合规页脚。干什么：①所有元素统一 border-box 盒模型、
           抹掉浏览器自带的内外边距、点按时不闪那层灰色高亮；②html/body 拉满一屏高，内容多时在手机壳里
           自然上下滑，滚动条藏起来，像手机原生页面；③页脚跟手机壳一样最宽 480px 居中，
           放用户协议、隐私政策和真实备案号，手机上小字能自动换行。
           什么时候用：不用喊它，这份加载即全站生效，后面的样式都站在干净的底上。 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; height: auto; overflow-x: hidden; overflow-y: auto; }
/* 2026-10-14 老板报的"往下拉以后顶栏不见了，电脑手机都一样"：
   上面那条把 body 设成了"自己滚"，可真正滚的是整页，顶栏那句"吸在顶上"（sticky）
   就找不到该吸的那一层，只好跟着内容一起滚走。
   修法：让 body 不再当"滚动容器"（把滚动让回整页/视口），顶栏就吸得住了。
   用 @supports 包着：认这个写法的浏览器升成吸顶；不认的老浏览器一个字不动，维持原样。 */
@supports (overflow: clip) {
  body { overflow-x: clip; overflow-y: visible; }
}
.站底 {
  width: 100%; max-width: 480px; margin: 0 auto;
  padding: 14px 12px calc(22px + env(safe-area-inset-bottom));
  text-align: center; color: #789; font-size: 12px; line-height: 1.9;
}
/* 2026-10-12 老板报的"开站先闪一下白页，上面就一行怪字"：脚本还没画出来那会儿，两个盒子都是空的，
   页脚（用户协议 ｜ 备案号）孤零零挂在白底上，看着像页坏了。等哪张皮一有东西再露出来 —— 纯 CSS，不劳 JS。
   两张皮都空 = 还在开机；商城皮填了 #app、合成皮填了 #mainBox，那种情况页脚照旧在。 */
#app:empty ~ #mainBox:empty ~ .站底 { visibility: hidden; }
.站底 a { color: #567; text-decoration: none; }
.站底 a:active { color: #1565C0; }
.站底 .隔 { margin: 0 6px; }

/* 序列号：CSS叶-09 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,9)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 手机壳
   大白话：全站内容住的那个手机壳。干什么：最宽 480px 居中（手机上占满、电脑上当一条手机），
           拉满屏高，上下纵排（顶栏在上、内容在下）。什么时候用：不用喊它，#app 就是主程序胶水给的那间屋。 */
#app {
  max-width: 480px; margin: 0 auto; min-height: 100vh; height: auto;
  display: flex; flex-direction: column; overflow: visible;
}
#app * { scrollbar-width: none; -ms-overflow-style: none; }
#app *::-webkit-scrollbar { width: 0; height: 0; }

/* 序列号：CSS叶-10 ｜ 坐标：商城⊂(0,4)⊂(0,3)⊂(0,2)⊂(0,1)⊂(0,0)⊂(1,10)
   地址：树库/CSS树库/商城/系0/枝干/叶子/底子.css → 空着提示
   大白话："这页还空着"那句话的长相。干什么：灰字、居中、上下留白一大截。
           什么时候用：一页还没内容时（搜店之前、还没选货那种），挂 .空着。 */
.空着 {
  padding: 60px 20px; text-align: center; color: #9bb; font-size: 15px;
}