@charset "UTF-8";
/* ==========================================================================
   beauty.css —— PC 商城前台「美化覆盖层」
   --------------------------------------------------------------------------
   ⚠️ 第一行的 @charset "UTF-8"; 不能删，且必须保持在文件最开头
      （它之前不允许有任何字符，注释也不行）。
      原因：nginx 返回 .css 时是 Content-Type: text/css，【不带 charset】，
      浏览器就按默认编码（GBK 等）解码本文件里的中文注释 → 直接打开
      https://…/css/beauty.css 会看到满屏乱码。加上 @charset 即可正常显示。
      另：本文件的非 ASCII 字符【全部位于注释内】（实测去掉注释后非 ASCII 为 0），
      而注释会被 CSS 解析器忽略，所以即使乱码也【不影响样式生效】——
      这只是「直接查看文件」时的显示问题。
      若服务器侧统一处理，也可在 nginx 的 server 块加 charset utf-8;
      这样连 @charset 都不需要（HTTP 头的 charset 优先级高于 @charset）。
   --------------------------------------------------------------------------
   作用域：public/pc/index.html 引入，全站 SPA 生效（不只首页，见文末说明）
   做法  ：只做追加覆盖，不改动 app.8b0bd6ab.css / chunk-vendors.d4006bcc.css
            / 任何 js 产物。删除本文件 + 移除 index.html 里那一行 <link>
            即可完整回滚。
   已完成：① 首页模块之间的间距疏密  ② 卡片圆角
           ③ 页面背景 / 模块标题色条 / 卡片描边 / 搜索框圆角（对齐客户设计参考图）

   【为什么用 #app 前缀】
   线上组件的样式是 scoped 编译产物，形如：
       .mining_container .miningWrap[data-v-4e9bdd79] { border-radius:3px }
   权重 = 0,3,0。若只写 .miningWrap（0,1,0）必然覆盖失败，开发者通常被迫
   抄 data-v 哈希或堆 !important。
   而应用挂载点是 <div id="app">，id 的权重高于任意数量的 class：
       #app .miningWrap  = 1,1,0  >  0,3,0   ✔ 覆盖成功
   所以本文件所有规则一律用 #app 前缀：不必知道 data-v 哈希、不必用
   !important、且与懒加载 chunk CSS 的加载顺序无关。
   已实测确认：本文件涉及的全部目标规则中，!important 命中数为 0，
   即没有任何一处需要与 !important 对抗。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 可调参数 —— 平时只改这一段
   -------------------------------------------------------------------------- */

:root {
  /* 模块之间的垂直间距。原 20px。
     紧凑 12px / 原样 20px / 宽松 32px / 特宽 48px */
  --bz-gap: 32px;

  /* 「猜你喜欢」(like 模块) 的间距。原 56px。
     它比其他模块大得多，是当作区块分隔用的，故单独一个变量，保持原值不动。 */
  --bz-gap-like: 56px;

  /* 模块大面板的圆角。原 3px。
     直角 0 / 微圆 6px / 现代 12px / 大圆 16px */
  --bz-radius-panel: 12px;

  /* 面板内部的次级卡片：频道磁贴、品牌磁贴、推荐位大图、楼层热卖小卡。原 3px。
     惯例是「外层圆角 = 内层圆角 + 内边距」，所以内层要更小一点。 */
  --bz-radius-tile: 8px;

  /* 商品图本身的圆角。原 0（方角）。 */
  --bz-radius-img: 8px;

  /* 页面底部的留白。原 60px。 */
  --bz-page-bottom: 60px;

  /* ---------------- 以下为「对齐设计参考图」新增 ---------------- */

  /* 页面背景。
     采用「灰底 + 白卡」方案：底色与白卡拉开明度差，卡片自然浮起、更简洁大气。
     实测白卡对比度（越高卡片越跳，这是决定观感的数字）：
        #f5f5f5 → 1.090:1   ⚠️ 最常见的浅灰，其实比原线上还平
        #f2f2f2 → 1.119:1     原线上值
        #f0f2f5 → 1.122:1     Ant Design 风格微冷灰
        #ebedf0 → 1.173:1     ← 当前采用，分离最清晰
     想换：只改这一个值即可，白卡侧无需任何改动（模块面板本来就是白底）。 */
  --bz-page-bg: #ebedf0;

  /* 首屏三栏（分类栏 / 轮播图 / 用户中心）的宽度。
     【结构更正】轮播不是全幅背景层，它是 .top.w 里一个 width:740px 的静态 flex
     子项。原始算式 230 + 740 + 230 = 1200，空隙正好 0 —— 这才是三栏「紧贴」的
     真正原因。所以只要收窄两侧面板，space-between 就把多出的空隙平分成间距，
     轮播宽度全程不变、图像不被裁。

     算术约束：nav + user + 740(轮播) + 2×间距 = 1200。
     要得到 20px 间距 ⇒ nav + user = 420。

     ⚠️ 为什么不对称（200 / 220）而不是各 210：
       用户中心内部有【定宽元素】，实测它需要约 220px 才能放下 ——
       p.default_subtitle 被模板写死 width:134px，配合 68px 头像后，
       面板收到 210 会横向溢出 8px，被 .user 的 overflow:hidden 裁掉半个字。
       分类栏则宽松得多：实测收到 190 都不换行（分类项高度恒为 41px）。
       所以把 20px 的间距更多从分类栏扣。
     改宽度时务必维持 nav + user = 420，否则间距会变。 */
  --bz-side-nav-w: 200px;
  --bz-side-user-w: 220px;

  /* 模块白面板的常驻微阴影。灰底上让白卡浮起 —— "简洁大气"的关键一笔。
     不要阴影就设为 none。 */
  --bz-panel-shadow: 0 1px 3px rgba(65, 79, 90, .07);

  /* 模块标题色条的高度。
     原模块标题区总高 = 24px(padding-top) + 32px(标题行) = 56px。
     这里取 52px 让总高只差 4px，把对 .hotWrap/.character/.fine_container
     这类固定高度模块的位移压到最小（实测面板 177px → 173px，不溢出）。 */
  --bz-head-h: 52px;

  /* 磁贴/小卡的描边色。参考图的合作伙伴卡是白底 + 细描边。原值 #f5f5f5 */
  --bz-card-bd: #ecebe6;

  /* 卡片悬浮阴影。参考图卡片有极轻的投影 */
  --bz-card-shadow: 0 2px 8px rgba(65, 79, 90, .06);
}


/* --------------------------------------------------------------------------
   2. 模块之间的间距疏密
   -------------------------------------------------------------------------- */
/* 首页模块都是 .w.index-content（display:flex; flex-wrap:wrap;
   justify-content:space-between）的直接子元素，因此「行与行之间」的垂直间距
   来自各模块自身的 margin-top，而不是 gap 或容器的 padding。
   所以调间距 = 改这几条 margin-top。

   注意：这里只覆盖 margin-top，不碰 margin-left/right。
   模块根容器原本是 `margin:0 auto; margin-top:20px`，水平居中靠 auto，
   覆盖时若写成 `margin:32px` 会把水平居中一起打掉。 */

#app .mining_container,   /* 新品 new / 频道 channel / 品牌 brand —— 三者共用此类名 */
#app .reco_container,     /* 推荐位 recommend */
#app .character,          /* 特色 character */
#app .fine_container,     /* 精选 fine */
#app .hotWrap,            /* 热卖 hot */
#app .link_container {    /* 楼层 floor */
  margin-top: var(--bz-gap);
}

#app .floor_wrap {        /* 猜你喜欢 like */
  margin-top: var(--bz-gap-like);
}

/* 页面底部留白。
   ⚠️ 这里必须写 `div.content`，不能简写成 `.content`：
   页面上存在 11 个 .content，其中 10 个是各模块标题的副标题段落
   <p class="content">（在 .mining_header 里）。若写成 #app .content，
   会给这些副标题也加上 60px 下内边距，实测把模块高度从 177px 撑到 205px。
   加上 div 限定后只命中页面外层容器（实测命中数 = 1）。 */
#app div.content {
  padding-bottom: var(--bz-page-bottom);
}


/* --------------------------------------------------------------------------
   3. 模块大面板的圆角
   -------------------------------------------------------------------------- */
/* 首页的「卡片感」主要来自这些白底大面板。原值一律 3px。
   逐一列出的原因：它们的类名各不相同，无法用一个选择器合并。

   未采用 `.miningWrap` 之类的通用写法去猜，全部来自线上编译 CSS 的实测选择器；
   .miningWrap 在线上有三个 data-v 变体（4e9bdd79 / d7cf6b9c / 897a5d88），
   分别是 new / channel / brand 三个组件，被 #app 前缀一次性覆盖。 */

#app .miningWrap,   /* new / channel / brand 的白底面板（原 3px） */
#app .recommWrap,   /* recommend 的白底面板（原 3px） */
#app .character,    /* character 根容器自带白底（原 3px） */
#app .hotWrap,      /* hot 根容器自带白底（原 3px） */
#app .like_nav {    /* like 的导航面板（原 3px） */
  border-radius: var(--bz-radius-panel);
}

/* fine 模块的面板在线上是白底但【原本没有圆角】，属于漏配，这次一并补上，
   否则它的方角会和旁边已圆角的面板并排显得突兀。 */
#app .fine_wrap {
  border-radius: var(--bz-radius-panel);
}

/* 楼层模块里的热卖小卡（原 3px，白底） */
#app .goods_hot {
  border-radius: var(--bz-radius-tile);
}


/* --------------------------------------------------------------------------
   4. 面板内部的次级卡片圆角（原 3px）
   -------------------------------------------------------------------------- */

#app .ming_nav,    /* 频道磁贴（new / channel） */
#app .brand_li,    /* 品牌磁贴（new / brand） */
#app .inter_wrap { /* 推荐位大图（recommend） */
  border-radius: var(--bz-radius-tile);
}

/* 推荐位大图是渐变底 + 内嵌图片，图片要跟着一起圆，否则四角会露出来 */
#app .inter_wrap img {
  border-radius: var(--bz-radius-tile);
}


/* --------------------------------------------------------------------------
   5. 商品卡与商品图圆角（原 0，方角）
   -------------------------------------------------------------------------- */

#app .good_nav {                     /* new / channel / brand 的商品卡（160px 图） */
  border-radius: var(--bz-radius-tile);
}

#app .good_nav img,
#app .good_img,                      /* hot / recommend / fine / floor 的商品图 */
#app .goods_hot .good_img {
  border-radius: var(--bz-radius-img);
}

/* hot 模块的商品图有「排行角标」(一/二/三/四 svg) 叠在左上角，
   角标自身不设圆角，保持叠在圆角图上的方形观感 */
#app .good_img .good_style {
  border-radius: 0;
}


/* --------------------------------------------------------------------------
   6. 右侧固定客服/回顶护栏（原 8px，比面板还大，统一到面板值）
   -------------------------------------------------------------------------- */

#app .floor {
  border-radius: var(--bz-radius-panel);
}

#app .back_top,
#app .back-top {
  border-radius: var(--bz-radius-tile);
}


/* --------------------------------------------------------------------------
   7. 页面背景（参考图为暖白，原为冷灰）
   -------------------------------------------------------------------------- */
/* ⚠️ 必须写 `div.content`，不能写成 `.content`。
   页面上共 11 个 .content，其中 10 个是各模块标题的副标题段落
   <p class="content">（在 .mining_header 内）。只写 #app .content 会连它们
   一起命中，实测把模块高度从 177px 撑到 205px。加 div 限定后命中数=1。 */
#app div.content {
  background-color: var(--bz-page-bg);
}


/* --------------------------------------------------------------------------
   8. 模块标题 → 主题色条 + 白字（参考图最显著的视觉特征）
   -------------------------------------------------------------------------- */
/* 首页 11 个模块的标题有 3 种 DOM 结构，必须分别处理：
     .mining_head  → new / channel / brand / recommend / fine（8 个模块）
     .floor_head   → floor 楼层模块（2 个）
     .hot_title    → hot 热卖模块（当前未启用，且类名有冲突，见下）

   思路：把标题区从「面板内缩 24px 的深色文字」变成「通铺面板顶部的色条」。
   .miningWrap 有 padding-top:24px，用 margin-top:-24px 抵消它，
   再配合 min-height:52px 让总高接近原来的 56px（见 :root 说明）。 */

#app .miningWrap > .mining_head,
#app .recommWrap > .mining_head,
#app .fine_wrap > .mining_head {
  margin: -24px 0 0;
  padding: 0 24px;
  min-height: var(--bz-head-h);
  background: var(--styleMainColor);
  border-radius: var(--bz-radius-panel) var(--bz-radius-panel) 0 0;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

#app .mining_head .mining_header {
  align-items: center;
}

/* ⚠️ 标题里的 <span> 在线上【就是主题色】（.title span{color:var(--styleMainColor)}），
   放在同为主题色的色条上会变成肉眼看不见的同色。必须一并强制白色。 */
#app .mining_head .title,
#app .mining_head .title span,
#app .mining_head .content,
#app .mining_head .mining_more,
#app .mining_head .mining_more p,
#app .mining_head .mining_more img {
  color: #fff;
}

/* 楼层模块头。原值 margin:0 24px 0 28px; padding-top:20px（总高 20+32=52）。
   改成 margin:0 + padding:10px 24px，总高仍是 52px → 零位移。 */
#app .floor_head {
  margin: 0;
  padding: 10px 24px;
  min-height: var(--bz-head-h);
  background: var(--styleMainColor);
  border-radius: var(--bz-radius-panel) var(--bz-radius-panel) 0 0;
  align-items: center;
  box-sizing: border-box;
}

#app .floor_head .title,
#app .floor_head .title span,
#app .floor_head .content,
#app .floor_head .floor_class .dustbin,
#app .floor_head .dustbin span {
  color: #fff;
}

/* ⚠️ .hot_title 绝对不可全局改：楼层模块内部的「热销TOP5」小标签也用这个类名
   （实测 DOM: .hot_detail > .hot_title），全局改会把模块内部的标签也变成色条。
   所以限定在热卖模块面板 .hotWrap 内 —— 当前首页未启用该模块，规则处于待命状态。 */
#app .hotWrap .hot_title {
  margin: -24px 0 0;
  padding: 0 26px;
  min-height: var(--bz-head-h);
  background: var(--styleMainColor);
  border-radius: var(--bz-radius-panel) var(--bz-radius-panel) 0 0;
  color: #fff;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

/* 楼层模块的白底面板在线上【原本漏配圆角】（同 .fine_wrap 的情况）。
   不补的话，上面的圆角标题条会直接露在方角面板边缘上，很显眼。 */
#app .link_container .like_wrap {
  border-radius: var(--bz-radius-panel);
}


/* --------------------------------------------------------------------------
   9. 卡片描边与悬浮（参考图的卡片是白底 + 细描边 + 极轻投影）
   -------------------------------------------------------------------------- */
/* 实测 .ming_nav / .brand_li 原本背景【透明】、只有 1px #f5f5f5 边框 */
#app .ming_nav,
#app .brand_li {
  background: #fff;
  border-color: var(--bz-card-bd);
  transition: box-shadow .2s, border-color .2s;
}

#app .ming_nav:hover,
#app .brand_li:hover {
  box-shadow: var(--bz-card-shadow);
  border-color: var(--styleMainColor);
}

#app .goods_hot {
  border: 1px solid var(--bz-card-bd);
  transition: box-shadow .2s, border-color .2s;
}

#app .goods_hot:hover {
  box-shadow: var(--bz-card-shadow);
  border-color: var(--styleMainColor);
}

/* 「灰底 + 白卡」方案的收尾：给模块大面板一层常驻微阴影，让白卡从灰底上浮起来。
   这是「简洁大气」观感的关键一笔 —— 只有明度差、没有阴影时，卡片会显得贴在
   背景上、发闷。不要阴影就把 --bz-panel-shadow 设为 none（回到纯色块方案）。 */
#app .miningWrap,
#app .recommWrap,
#app .like_wrap,
#app .fine_wrap,
#app .character,
#app .hotWrap,
#app .like_nav {
  box-shadow: var(--bz-panel-shadow);
}


/* --------------------------------------------------------------------------
   10. 搜索框 / 购物车 圆角
   -------------------------------------------------------------------------- */
/* 注意：搜索按钮背景与购物车文字色用的是 --styleMainColor
   （实测 .search-btn{background:rgb(255,0,8)}、.cat{color:rgb(255,0,8)}），
   属于主题变量，换主题时自动跟随。本文件【不硬编码】这两个颜色 ——
   在后台把 pc.bg_color 改成绿色，它们会自己变绿。 */
#app .search-item .box {
  border-radius: var(--bz-radius-tile) 0 0 var(--bz-radius-tile);
}

#app .search-btn {
  border-radius: 0 var(--bz-radius-tile) var(--bz-radius-tile) 0;
}

#app .cat {
  border-radius: var(--bz-radius-tile);
}


/* --------------------------------------------------------------------------
   11. 【已移除】主题色预设 —— 因为它会堵死后台的「风格设置」
   --------------------------------------------------------------------------
   ⛔ 这里【原先】有一段把主题色写死成绿色的规则，共 9 处 !important：
        --styleMainColor / --styleViceColor / --styleRGBcolor / --styleViceRGBcolor
        / 4 个渐变变量 / --imgHue
      —— 已全部删除。原因如下，请勿再加回。

   ⛔ 为什么必须删（这是「后台和前台不同步」的根因）：
      后台「装修 → 风格设置」管理的就是这几个值。实测它的数据键为：
          ditchData: { bg_color, bg_color_on, bg_gradient_color, custom_open }
      而前台读取的 /api/pc/bg_color 返回的正是：
          pc.bg_color / pc.bg_color_on / pc.bg_gradient_color / pc.custom.open
      —— 两端完全对应，即【后台风格设置就是前台主题色的唯一控制入口】。

      前台 JS 会把后台的值写成 <html> 的【行内样式】
      （setCssVar → documentElement.style.setProperty）。行内样式权重最高，
      只有 !important 能反超 —— 一旦反超，后台再改主题色，前台就不动了。
      实测现象：后台改了主题色，前台没反应。

   ✅ 正确做法：主题色一律在后台「装修 → 风格设置」里设，前台自动跟随。
      要还原参考图的绿色，在后台填：
          bg_color          → #2e9a69              （主色）
          bg_color_on       → #43a278              （副色）
          bg_gradient_color → #43a278 / #2e9a69    （渐变两个端点）
      改完后自动生效的有：按钮、模块标题条、搜索按钮、购物车、
      渐变、以及靠 --imgHue 自动旋转的红色系图标 —— 全部不用改代码。

   📌 由此确立本文件的一条硬原则：
         【凡是后台能配的值，本文件一律不覆盖。】
      这也是为什么本文件现在只剩 2 处 !important（见下面两条色条），
      且那 2 处都不写死颜色、只跟随主题变量或清除杂项。
   -------------------------------------------------------------------------- */

/* 顶部「全部商品分类」标题条（实测页面上只有 1 个 a.nav-all）。
   它的底色本来由后端 header.background.color 以行内样式给出，与主题色是两套配置，
   容易不一致。这里改成【跟随主题变量】—— 这样后台改风格设置时它自动同步，
   不会出现「主题是绿的、这条是红的」。
   文字色不覆盖：后端 header.font_color 已经是 #FFFFFF。 */
#app a.nav-all {
  background-color: var(--styleMainColor) !important;
}

/* 导航条：只清掉滚动区那条多余的红色下边框。
   ⚠️ 页面上有【两个】div.nav：
        导航条        1600x42，内联 border-bottom: 2px solid rgb(221,39,39)
        侧边栏分类面板 230x460，内联 background-color: rgba(255,255,255,.35)
      用「内联样式属性选择器」区分，实测各命中 1 个，侧边栏不受影响。
      绝对不要简写成 #app .nav —— 会把侧边栏一起改掉。
   这里【不再覆盖 background-color】：底色交给后端 header.background.color 管。 */
#app div.nav[style*="border-bottom"] {
  border-bottom-color: transparent !important;
}

#app .nav-list a {
  color: #414f5a;
}


/* --------------------------------------------------------------------------
   12. 首屏轮播区：让左右两个面板从全幅轮播图上「浮」起来
   --------------------------------------------------------------------------
   【这块的结构必须说清楚，否则会改错】
   首屏看着像「分类栏 | 轮播图 | 用户中心」三张卡并排，实际不是：
     .module-box-banner (1600 全宽)
       └ .top.w (1200 居中，display:flex; justify-content:space-between)
           ├ .nav  分类栏   230px  x=200..430   position:relative  z-index:3
           └ .user 用户中心 230px x=1170..1400  position:relative  z-index:2
         .banner 轮播    1600px x=0..1600  position:absolute  z-index:auto
   即：轮播是【绝对定位的全幅底层背景】，两个面板浮在它上面。

   ⚠️ 由此得出一个重要结论：只要轮播还是全幅垫底，在中间加多少 margin
      都会被轮播图填满，肉眼【看不到任何间隔】。要真正加出间隔，只能把轮播
      收窄成卡片 —— 但经实测验证【不可行】：
      轮播图源尺寸 1920x460，收窄到 716 宽后 object-fit:cover 只保留中间 37%，
      而首页 6 张轮播图里有 2 张（工业优选、节令礼遇）品牌名与标题会被截断
      （"中采云链"→"采云链"、"节令礼遇"→"日礼遇"）。要让轮播收窄可用，
      必须先把这 2 张图按新比例重做。详见 补丁记录.txt。

   所以本节的方案是：不动几何、不收窄轮播，改用「圆角 + 投影 + 不透明底」
   把两个面板做成真正的卡片 —— 在照片底上做卡片分离的标准手法。 */

/* ⛔ 这里【原先】有一条 #app .module-box-banner .nav { background-color:#fff !important }，
   已删除。原因同第 11 节的原则：分类栏的底色由【后端 banner 模块的
   classify_opacity 配置】以行内样式给出（当前 0.35 = 35% 半透明白），
   用 !important 压成不透明白，就等于把那个后台配置堵死了。

   ✅ 正确做法：在后台把 banner 模块的「侧边栏透明度 / classify_opacity」设为 1，
      分类栏就会变成不透明白 —— 效果完全等同于原先那条被删掉的规则，
      但后台仍然可调。
      若暂时不改后台，分类栏会是 35% 半透明白（会和轮播图略微糊在一起），
      这是原始设计的样子，不影响其他任何改动。 */

/* ⚠️⚠️ 这里【不能给 .nav 加 overflow:hidden】—— 它会把二级分类菜单整块裁掉。
   分类栏里每个 li 都有一个二级飞出菜单：
       .module-box-banner .nav li .ttshop_navsecond
       position:absolute; left:230px; width:1000px; display:none（hover 时显示）
   它是【浮在分类栏外面】的（偏移到分类栏右侧），所以父级一旦 overflow:hidden，
   菜单就被裁得完全看不见 —— 实测线上「鼠标滑到一级分类不弹出二三级分类」就是这个原因。
   而放开后圆角并不会漏：分类栏的底色在内层元素上，不在需要裁切的边缘。
   所以这里只给 .user 保留 overflow:hidden（它内部没有浮出元素），
   .nav 显式声明 overflow:visible。 */
#app .module-box-banner .user {
  border-radius: var(--bz-radius-panel);
  /* 比页面上的常规卡片阴影重一些：它压在照片底上，阴影必须够强才读得出边界 */
  box-shadow: 0 2px 14px rgba(65, 79, 90, .18);
  overflow: hidden;
}

#app .module-box-banner .nav {
  border-radius: var(--bz-radius-panel);
  box-shadow: 0 2px 14px rgba(65, 79, 90, .18);
  overflow: visible;      /* 必须可见，否则二级菜单被裁掉，见上方说明 */
}

/* 二级飞出菜单的横向偏移。
   原样式写死 left:230px —— 那是按分类栏【原宽度 230px】算的，正好贴在分类栏右边缘。
   分类栏收窄到 200px 后，菜单会与分类栏之间空出 30px 死区：
   鼠标从分类栏移向菜单要穿过这 30px，菜单会先关掉 → 实测等于不可用。
   改成 left:100%（相对定位父级即分类栏），永远贴合分类栏右边缘，
   以后改分类栏宽度也不用再动这里。 */
#app .module-box-banner .nav li .ttshop_navsecond {
  left: 100%;
}

/* 三栏之间的间距：两侧面板各自收窄，让出 20px。轮播宽度 740 全程不变。
   宽度值在 :root 的 --bz-side-nav-w / --bz-side-user-w 里，含算术约束说明。 */
#app .module-box-banner .nav {
  width: var(--bz-side-nav-w);
}

#app .module-box-banner .user {
  width: var(--bz-side-user-w);
}

/* 收窄 20px 后，用户中心内部的【头像】会被 flex 压缩，必须钉住 ——
   否则省下的 20px 会以「头像变形」的形式还回去：
     头像 .defalt_image 被压缩：68x68 → 48x68，圆形头像变椭圆
   ⚠️ 类名照抄模板原文，它本身是拼写错误：defalt_image / defalut_title */
#app .module-box-banner .user .defalt_image {
  flex-shrink: 0;      /* 头像不再被压缩，保持 68x68 正方形 */
}

#app .module-box-banner .user .defalut_title {
  flex: 1;
  min-width: 0;        /* 标题区让出头像占用的宽度，超出用省略号（已有 show-one-lines） */
}

/* ⚠️⚠️ 此处【曾有一条】.ttshop_newusers { display:flex; flex-wrap:nowrap }，
   已于 2026-09-16 删除。删除原因很重要，【请勿再加回】：

   该容器有【两种完全不同的结构】（见 js/app.182f14ff.js 里的渲染代码）：
     ① 未登录：两个子元素 —— div(立即登录) + div(免费注册)
     ② 已登录：一个子元素 —— div.userLink(会员中心)

   原生样式是 display:table + margin:0 auto，即「收缩到内容宽度再居中」，
   两种结构都正确：
     ① 容器宽 196，两个 92x34 按钮并排一行
     ② 容器宽  92，会员中心 92x34 居中（距面板左右各 64px）

   改成 display:flex 后，容器变成【整宽块级盒】，「收缩+居中」就失效了：
     ② 实测变成「距面板左 118 / 距右 10」—— 按钮被挤到右侧，即线上出现的错位。

   当初加这条，是为了修【面板 210px 时两个按钮折行】；后来面板宽度改成 220px，
   原生 display:table 已能容纳两个按钮（实测两按钮并排一行），这条规则
   既无必要、又会破坏已登录状态，故整条删除。

   ⇒ 教训：改首屏面板宽度时，必须回归【已登录】状态的会员面板。
     未登录只能测到结构①，结构②（会员中心）只能靠登录或模拟 DOM 才能验到。 */

/* ⚠️ 选择器必须限定在 .module-box-banner 内。
   页面上有两个 .nav（导航条 / 这里的分类栏），全局改会误伤导航条。 */


/* --------------------------------------------------------------------------
   13. 顶部「logo / 搜索框 / 购物车」对齐修正
   --------------------------------------------------------------------------
   症状：三者的视觉中线不齐，看着别扭。

   实测数据（修正前）：
     .search-box 是 flex，但 align-items 是 normal（= stretch）。三个子元素
     logo(66px) / .search-c(80px) / .cat(42px) 都是显式高度、不参与拉伸，
     于是全部「顶部对齐」在 y=78，中线各不相同：
        logo      中心 y=111
        搜索条    中心 y= 98      ← 与 logo 差 13px
        购物车    中心 y= 99
     这就是别扭的来源：logo 比旁边一截垂得更低。

     另有一处隐藏高度：.search-c 是【硬编码 height:80px】，而它里面可见的
     .search-item 搜索条只有 40px，剩下 40px 是空的热搜列表位置
     （接口 search_hot_content 返回空数组）。所以即使居中，中线也会差 20px。

   水平方向：113px(.search-c) / 32px(.cat) 两处硬编码左边距 + 末尾空 49px，
   间距既不匀、右侧还留了一截死白。

   修法：容器改居中、让 .search-c 按内容收高、水平交给 space-between 均分。
   -------------------------------------------------------------------------- */

#app .search-box {
  /* 原来是 normal(=stretch)，把显式高度的 logo/购物车顶到上边、中线错开 */
  align-items: center;
  /* 水平改均分：logo 靠左、购物车靠右、搜索框居中，右侧不再留死白 */
  justify-content: space-between;
}

/* .search-c 原本 height:80px 硬编码，其中 40px 是空热搜列表的位置。
   按内容收高后，它的中线才会与 logo / 购物车一致。 */
#app .search-box .search-c {
  height: auto;
}

/* 热搜列表为空时不要它那 8px 上边距（空着还占位会把搜索条顶偏 4px）。
   用 :empty 限定：后端一旦填了热搜词，这条自动失效、8px 间距自动恢复。 */
#app .search-box .search-default:empty {
  margin-top: 0;
}

/* 去掉两处硬编码的左边距，交给上面的 space-between 均分 */
#app .search-box .search-c,
#app .search-box .cat {
  margin-left: 0;
}


/* --------------------------------------------------------------------------
   14. 顶部灰色工具条：高度 46px → 38px
   --------------------------------------------------------------------------
   ⚠️⚠️ 本节选择器【必须】带 :not(.w)，否则会砸掉整个首屏。
   页面上有两个 .top：
     ① 顶部灰色工具条   div.top        ← 本节的目标
     ② 首屏 banner 的行容器 div.top.w  ← 装着分类栏和用户中心，高 460px
   若写成 #app .top，会把 ② 也压成 38px，实测首屏 banner 高度从 480px
   塌成 58px、整页高度掉 430px。加 :not(.w) 区分（工具条没有 w 类，② 有）。
   失败模式是安全的：若将来模板给工具条也加上 w，本节只是失效回 46px，不会砸版。

   实测：下面这四个元素【各自都硬编码了 height:46px】，所以要一起改 ——
   只改 .top 没用，内层会把高度撑回去：
        .top            46px
        .top .top-item  46px  （内层容器，margin:0 205px）
        .top .top-left  46px  （左侧「中采云链，欢迎您」）
        .top .top-right 46px  （右侧 ul）
   两侧都是 flex + 垂直居中，高度改小后文字自动居中，不需要动 line-height。

   字号：.top-left 原本 13px、.top-right 原本 12px —— 左右本身差一号。
   条高收到 38px 后 13px 占比偏大、显得挤，故统一为 12px。
   12px 是中文 UI 的常规下限，右侧那组不必再缩小。
   -------------------------------------------------------------------------- */

#app .top:not(.w),
#app .top:not(.w) .top-item,
#app .top:not(.w) .top-left,
#app .top:not(.w) .top-right {
  height: 38px;
}

/* 左侧 13px 与右侧 12px 原本不一致；条高收到 38px 后统一为 12px */
#app .top:not(.w) .top-left {
  font-size: 12px;
}


/* --------------------------------------------------------------------------
   15. 顶部 logo / 搜索框 / 购物车 在留白区间内垂直居中
   --------------------------------------------------------------------------
   症状：这一栏整体偏下（客户反馈「有点靠下」）。

   实测（修正前）：
     留白区间 = 顶部灰条底(38) → 导航条顶(150)，高 112px，中心 y=94
     内容中心 = y=110
     上方剩 39px、下方只剩 7px  → 下沉，偏下 16px

   原因：.search-box 的 padding 是【32px 0 0】—— 上 32px、下 0，是【不对称】的。
   即使第 13 节已把 align-items 改成 center，内容也只是在「扣除上内边距后的
   80px 区域(70..150)」里居中（中心 110），而不是在整个 112px 留白区间里
   居中（中心 94）。

   修法：去掉这个不对称的上内边距。align-items:center 第 13 节已经设好，
   去掉后内容自然在整个留白区间内居中。用 padding-top 而不是 padding，
   是为了只动这一项、不误伤将来可能新增的左右内边距。
   -------------------------------------------------------------------------- */

#app .search-box {
  padding-top: 0;
}


/* --------------------------------------------------------------------------
   17. 首屏三处收尾：分类标题条对齐 / 轮播圆角 / 导航条与卡片留 20px
   -------------------------------------------------------------------------- */

/* 17.1 「全部商品分类」绿条与下方分类栏对齐
   ⚠️ 这条绿条【不在分类栏里】。实测它在导航条的 .nav-box 内，是 a.nav-all，
      与分类栏(.module-box-banner .nav)是两个不同父级下的元素。
      模板给它的宽度写死 230px、与分类栏原来的 230px 正好同宽，所以以前看不出问题；
      分类栏收窄到 200px 后，绿条仍 230px → 比下方白色列表面板【多出 30px】，
      视觉上就是「上方的商品分类栏与下面对不齐」。
      两者左边缘都在 200，只要把绿条也设成同一宽度即可对齐。
      副作用：.nav-box 是 flex，绿条变窄 30px 后导航项(首页/工业品商城/员工福利)
      会左移 30px（实测），消除的是右侧多余空白，观感更紧凑。 */
#app a.nav-all {
  width: var(--bz-side-nav-w);
  box-sizing: border-box;
}

/* 17.2 轮播图圆角 —— 与用户中心/分类栏取同一套卡片参数
   实测轮播原本 border-radius:0（直角），左右两个面板是 12px + 阴影。
   三个并排的卡片只有它直角会很突兀。阴影也一并对齐：
   压在灰底上的卡片没有阴影会显得贴在背景上（同第 9 节的理由）。
   只要圆角不要阴影 → 删掉下面 box-shadow 那一行即可。 */
#app .module-box-banner .banner {
  border-radius: var(--bz-radius-panel);
  box-shadow: var(--bz-panel-shadow);
}

#app .swiper-banner {
  /* 圆角裁剪必须在真正带 overflow:hidden 的这层上，否则图片四角会溢出 */
  border-radius: var(--bz-radius-panel);
  overflow: hidden;
}

/* 17.3 导航条与下方卡片之间留 20px
   实测原本是【0】：导航条底 y=192，首屏行容器 .top.w 的边框盒顶也是 192。
   原因是 .content 有一条 margin-top:-20px，把整个内容区上提了 20px，
   正好抵消掉 .top.w 自身的 margin-top:20px（模板原意就是让两者齐平）。
   把这条负边距归零，行容器顶就落到 212，与导航条底 192 之间自然形成 20px。
   代价：整页内容整体下移 20px、页面高度 +20px，这是预期。 */
#app div.content {
  margin-top: 0;
}


/* ==========================================================================
   安全边界 —— 本轮【刻意没有动】的东西，以及原因
   --------------------------------------------------------------------------
   1) 没有改任何模块的固定高度。
      .hotWrap{height:368px}、.character{height:544px}、.fine_container{height:544px}
      以及 .hot_wrap{height:calc(100% - 50px)} 都是硬编码高度。
      所以「面板内边距」(padding-top:24px 等) 一律没碰 —— 撑大内边距会直接
      撑破这些固定高度，导致内容溢出。想调面板内部的疏密，必须同时改高度，
      那属于布局改造，不在本轮范围。

   2) 没有改任何模块宽度。
      .w 在线上是 width:1190px，而模块是 1200px，本来就有 10px 溢出；
      两列布局靠 594+594=1188 之类的算术关系成立。改宽度会破坏列间距计算。

   3) 没有碰 JS 逻辑、没有碰 data-v 哈希。
      本文件现在只有【2 处 !important】，且都不写死颜色：
        · #app a.nav-all { background-color: var(--styleMainColor) !important }
          —— 只为「跟随主题变量」，不是写死某个色
        · #app div.nav[style*="border-bottom"] { border-bottom-color: transparent !important }
          —— 只清除那条多余的红色下边框
      其余全部靠 #app 权重取胜（第 1~10、12~17 节零 !important），实测覆盖成功。

   ★ 本文件的硬原则：【凡是后台能配的值，一律不覆盖。】
     曾经违反过这条，导致「后台改了、前台不动」，已全部纠正，详见第 11 节。
     后台「装修 → 风格设置」管理：bg_color / bg_color_on / bg_gradient_color /
     custom_open，对应前台 /api/pc/bg_color 的同名键 —— 主题色只能在这里配，
     不要在本文件里覆盖它。
     banner 模块的 classify_opacity（侧边栏透明度）同理，也只能在后台配。

   4) 两条后端驱动的色条（a.nav-all、div.nav）的现状：
      它们的颜色原本来自后端配置 header.background.color，以行内样式渲染，实测：
          a.nav-all  style="color:rgb(255,255,255); background-color:rgb(221,39,39)"
          div.nav    style="border-bottom:2px solid rgb(221,39,39)"
      现在的处理：
          · a.nav-all 的【底色】改为跟随 var(--styleMainColor)，这样它永远与
            主题色一致、不会再出现「主题是绿的、这条是红的」。
            ⚠️ 副作用：它覆盖了后端 header.background.color。若你需要单独控制这条的
            颜色（而不是跟随主题），告诉我，我把这一行去掉。
          · a.nav-all 的【文字色】不再覆盖（后端 font_color 已是 #FFFFFF）。
          · div.nav 只清掉多余的红色下边框，【底色交给后端】header.background.
            color + back_style 管，不再覆盖。

   5) 【图片素材不跟随主题】模板靠 --imgHue（filter: hue-rotate）把红色系图标
      旋转成主题色，但实测首页只有 2 个元素带该 filter（头像、资讯公告图标）。
      右侧面板的「个人中心/订单中心/品牌特卖/精选好店/帮助中心」等图标是普通
      图片、不带 hue-rotate，换主题后会【保持原色】（红/橙），与参考图有差距。
      要让它们也变绿只能换图，或逐个补 hue-rotate（有风险：多色图标整幅旋转
      会串色，必须逐个确认）。属素材工作，不在 CSS 覆盖范围内。

   6) 【影响范围】本文件由 index.html 引入，作用于整个 SPA，不只是首页。
      第 3、4、6 节的模块选择器是首页专有类名，不会外溢。
      第 8 节的 .mining_head / .floor_head 也是首页模块专有。
      但第 5 节的 .good_nav / .good_img 是商品图的通用类名，
      列表页、详情页、搜索结果页也会一起变成圆角 —— 通常是好事（全站一致），
      若只想让首页生效，给这些规则加首页容器前缀即可，例如：
          #app .index-content .good_img { ... }
      （.index-content 是首页独有的内容容器类名）
      第 11 节的主题色是整站生效，这本来就是预期。

   7) 未启用模块的规则无法在当前首页验证命中数：
      .hotWrap(hot 热卖) / .character(特色) / .fine_container 与 .fine_wrap(精选) /
      .like_nav(猜你喜欢) 当前后台装修均未启用。beauty.css 已覆盖它们，
      后台一旦启用即自动生效，但首次启用后建议复核一次。
   ========================================================================== */