/* ========================================================= * dh.css — 底部导航专用样式 * 作用范围：index.html / daquan.html / collect.html / group.html * 默认：三大页（首页 / 洋酒 / 收藏）共用一套 * 特例：group.html / daquan.html 通过 body.page-group / body.page-wine 做单独覆盖 * =======================================================*/:root{  /* 默认（首页 / 洋酒 / 收藏）底栏参数 */  --tabbar-height: 65px;  --tabbar-icon-size: 29px;  --tabbar-font-size: 12px;  --tabbar-safe-bottom: env(safe-area-inset-bottom, 0px);  /* 底栏纯白 */  --tabbar-bg: #ffffff;  /* 文字颜色 & 选中颜色 */  --tabbar-text-color: #666666;  --tabbar-active-color: #FFA500;  /* ⭐ 图标垂直偏移量（只移动 img，自由微调） */  --tabbar-icon-offset-y: 6px;  /* ⭐ 整块 nav-item 的偏移（现在不再用来调字体，保持 0） */  --tabbar-content-offset-y: 0px;  /* ⭐ 新增：只移动“文字”往下的偏移量 */  --tabbar-text-offset-y: 4px;}/* 为底栏腾出空间，避免内容被遮住（全局） */body{  padding-bottom: calc(var(--tabbar-height) + 12px + var(--tabbar-safe-bottom)) !important;}/* ========================================================= * 导航容器 .footer — 默认样式（首页 / 洋酒 / 收藏） * =======================================================*/.footer{  position: fixed !important;  left: 0;  right: 0;  bottom: 0 !important;  height: var(--tabbar-height) !important;  display: flex !important;  flex-wrap: nowrap !important;  justify-content: space-around !important;  align-items: center !important;  padding: 4px 0 calc(4px + var(--tabbar-safe-bottom)) !important;  margin: 0 !important;  background: var(--tabbar-bg) !important;  z-index: 999 !important;  box-shadow: none !important;  border-top: none !important;}/* 兜底：防止其它 css 给 footer 设奇怪的布局 */.footer *{  box-sizing: border-box;}/* ========================================================= * 导航项 .nav-item（首页 / 洋酒 / 收藏 默认样式） * =======================================================*/.footer .nav-item{  flex: 1 1 0 !important;  min-width: 0 !important;  display: flex !important;  flex-direction: column;  align-items: center;  justify-content: center;  padding: 0 !important;  margin: 0 !important;  /* ⭐ 整块偏移已归零，不影响图标/文字的单独调节 */  transform: translateY(var(--tabbar-content-offset-y));  text-align: center;  text-decoration: none;  color: var(--tabbar-text-color) !important;  -webkit-tap-highlight-color: transparent;}/* 图标：统一尺寸 + ⭐ 支持上下微调（目前是 3px） */.footer .nav-item img{  width: var(--tabbar-icon-size) !important;  height: var(--tabbar-icon-size) !important;  display: block;  margin-bottom: 2px !important;  object-fit: contain;  /* 只移动图标 */  transform: translateY(var(--tabbar-icon-offset-y));}/* 文字：单行、省略号 + ⭐ 单独往下挪一点 */.footer .nav-item span{  display: block;  font-size: var(--tabbar-font-size) !important;  line-height: 1.1 !important;  white-space: nowrap !important;  overflow: hidden !important;  text-overflow: ellipsis !important;  /* 只移动文字 */  transform: translateY(var(--tabbar-text-offset-y));}/* 选中状态：颜色高亮 */.footer .nav-item.active{  color: var(--tabbar-active-color) !important;}/* 选中状态图标提亮一点 */.footer .nav-item.active img{  filter: brightness(1.1);}/* 鼠标悬停（PC）保持和 active 一致颜色 */.footer a:hover{  color: var(--tabbar-active-color) !important;}/* ========================================================= * 兼容旧样式：把 base.css 中一些可能影响 footer 的属性干掉 * =======================================================*/.footer a{  padding: 0 !important;  margin: 0 !important;}/* ✅ 不再重置 transform，避免覆盖我们用来调节位置的 translateY */.footer a,.footer span{  /* transform: none !important;  —— 已废弃，保留注释方便以后查问题 */}/* ========================================================= * 简单移动端优化（默认导航） * =======================================================*/@media (max-width: 360px){  :root{    --tabbar-icon-size: 24px;    --tabbar-font-size: 11px;    --tabbar-height: 52px;  }}/* Android 设备（如果有 html.is-android） */html.is-android{  --tabbar-icon-size: 24px;  --tabbar-font-size: 11px;}/* ========================================================= * ===== 群组页面专用覆盖：body.page-group 生效 ===== * =======================================================*/body.page-group{  --group-tabbar-height: 65px;            /* 群组底栏高度（可调） */  --group-tabbar-bg: #ffffff;             /* 群组底栏背景色：白色 */  --group-tabbar-text-color: #333333;     /* 群组未选中文字颜色：深灰 */  --group-tabbar-active-color: #FFA500;   /* 群组选中高亮颜色 */  --group-tabbar-icon-size: 29px;         /* 群组图标大小 */  --group-tabbar-font-size: 12px;         /* 群组文字大小 */  /* ⭐ 群组页面单独控制图标/文字偏移（可以以后细调） */  --tabbar-icon-offset-y: 6px;            /* 图标微微下移 */  --tabbar-text-offset-y: 4px;            /* 文字微微下移 */  --tabbar-content-offset-y: 0px;         /* 整块不挪动 */}/* 群组页面：重新计算底部预留高度 */body.page-group{  padding-bottom: calc(var(--group-tabbar-height) + 12px + var(--tabbar-safe-bottom)) !important;}/* 群组页面：footer 容器使用群组专用变量 */body.page-group .footer{  height: var(--group-tabbar-height) !important;  background: var(--group-tabbar-bg) !important;}/* 群组页面：导航项颜色 / 尺寸 */body.page-group .footer .nav-item{  color: var(--group-tabbar-text-color) !important;}body.page-group .footer .nav-item.active{  color: var(--group-tabbar-active-color) !important;}body.page-group .footer .nav-item img{  width: var(--group-tabbar-icon-size) !important;  height: var(--group-tabbar-icon-size) !important;}body.page-group .footer .nav-item span{  font-size: var(--group-tabbar-font-size) !important;}/* ========================================================= * ===== 洋酒页面专用覆盖：body.page-wine 生效 ===== * =======================================================*/body.page-wine{  --wine-tabbar-height: 65px;            /* 洋酒底栏高度 */  --wine-tabbar-bg: #ffffff;             /* 洋酒底栏背景色 */  --wine-tabbar-text-color: #666666;     /* 洋酒未选中文字颜色 */  --wine-tabbar-active-color: #FFA500;   /* 洋酒选中高亮颜色 */  --wine-tabbar-icon-size: 29px;         /* 洋酒图标大小 */  --wine-tabbar-font-size: 12px;         /* 洋酒文字大小 */  /* ⭐ 洋酒页面单独控制图标/文字偏移 */  --tabbar-icon-offset-y: 6px;  --tabbar-text-offset-y: 4px;  --tabbar-content-offset-y: 0px;}/* 洋酒页面：重新计算底部预留高度 */body.page-wine{  padding-bottom: calc(var(--wine-tabbar-height) + 12px + var(--tabbar-safe-bottom)) !important;}/* 洋酒页面：footer 容器使用洋酒专用变量 */body.page-wine .footer{  height: var(--wine-tabbar-height) !important;  background: var(--wine-tabbar-bg) !important;}/* 洋酒页面：导航项颜色 / 尺寸 */body.page-wine .footer .nav-item{  color: var(--wine-tabbar-text-color) !important;}body.page-wine .footer .nav-item.active{  color: var(--wine-tabbar-active-color) !important;}body.page-wine .footer .nav-item img{  width: var(--wine-tabbar-icon-size) !important;  height: var(--wine-tabbar-icon-size) !important;}body.page-wine .footer .nav-item span{  font-size: var(--wine-tabbar-font-size) !important;}