/* ========== 固定宽度版本，窗口变窄时出现横向滚动条 ========== */
html, body {
  margin: 0;  /* 去除页面默认的外边距 */
  height: 100%;
  font-family: "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 设置字体 */
  background: rgb(245, 247, 247);  /* 设置页面背景色为浅灰色 */
  overflow-x: hidden;  /* 允许页面出现横向滚动条 */
}

/* 页面内容容器：固定宽度，始终 1040px */
.page {
  width: 1040px;  /* 页面宽度固定为1040px */
  margin: 0 auto;  /* 将页面居中 */
  box-sizing: border-box;  /* 包括边框和内边距在内的总宽度为1040px */
}

.viewport {
  width: 100vw;
  height: 100vh;            /* 撑满视口 */
  overflow: auto;           /* 横竖都可滚 */
  overflow-x: auto;         /* 明确开启横向滚动 */
}

/* ========== 顶部导航区域样式 ========== */
.top-bar {
  background: #ffe60f;  /* 顶部导航栏背景设置为亮黄色 */
  padding: 0 16px;
  min-width: 1040px;
}

.top-bar-main {
  display: flex;  /* 使用 flex 布局，让子元素水平排列 */
  align-items: center;  /* 垂直方向居中对齐 */
  justify-content: space-between;  /* 主轴上左右两端对齐，中间留空 */
  padding: 6px 0;  /* 上下内边距为 6px，左右为 0 */
}

/* 顶部右侧整体容器（搜索 + 用户） */
.top-actions {
  display: flex;
  align-items: center;
  gap: 98px;           /* 搜索与用户之间的间距 */
  margin-right: 28px;
}

/* 搜索容器（包含搜索框与热搜词整体） */
.search-container {
  display: inline-block;  /* 使其成为行内块元素，可与其他内容并排 */
  box-sizing: border-box;  /* 包括内边距和边框在总宽度内 */
  width: 504px;  /* 固定宽度 504px */
  background: #ffe60f;  /* 背景色为浅蓝色 */
  border: none;  /* 去掉默认边框 */
  border-radius: 14px;  /* 边角圆润，半径为14px */
  transition: 0.2s ease;  /* 鼠标聚焦时添加平滑过渡效果 */
}

/* 搜索框本体 */
.search-box {
  border: #1f1f1f 2px solid;  /* 边框为2px的黑色 */
  width: 100%;  /* 占满容器宽度 */
  height: 36px;  /* 固定高度 */
  display: flex;  /* 使用 flex 布局 */
  align-items: center;  /* 垂直居中输入框与图标 */
  background: #fff;  /* 背景为纯白色 */
  border-radius: 999px;  /* 设置极大圆角，形成椭圆形 */
  overflow: hidden;  /* 超出部分隐藏 */
}

/* 搜索框内的输入框 */
.search-box input {
  flex: 1;  /* 输入框自动填满剩余空间 */
  border: none;  /* 去掉默认边框 */
  outline: none;  /* 去掉点击时的外轮廓 */
  padding: 12px 20px;  /* 左右内边距 */
  font-size: 14px;  /* 字体大小14px */
  color: #333;  /* 字体颜色为深灰色 */
  background: transparent;  /* 背景透明，与白色容器融合 */
  min-width: 0;  /* 宽度最小值为0，防止搜索框宽度过小 */
}

/* 搜索按钮 */
.search-box button {
  display: flex;
  background: #ffe60f;
  cursor: pointer;  /* 鼠标悬停时显示手型 */
  border: none;  /* 去掉默认边框 */
  outline: none;  /* 去掉点击时的外轮廓 */
  font-size: 12px;  /* 字体大小为12px */
  border-radius: 999px;  /* 形状为圆形 */
  padding: 7.6px 12px;  /* 按钮内边距（增加可点击区域） */
  margin: 2px 3px;  /* 外边距 */
}

/* 热搜关键词链接区域 */
.top-links {
  margin-top: 8px;  /* 与搜索框保持8px间距 */
  margin-left: 20px;  /* 左外边距20px */
  display: flex;  /* 使用 flex 布局 */
  gap: 16px;  /* 每个链接之间的间隔为10px */
  white-space: nowrap;  /* 禁止自动换行 */
  overflow: hidden;   /* 超出容器宽度的内容直接隐藏 */
  justify-content: flex-start;  /* 从左侧开始排列 */
}

/* 热搜链接样式 */
.top-links a {
  text-decoration: none;  /* 去掉默认下划线 */
  color: #333;  /* 默认文字颜色为深灰色 */
  font-size: 12px;  /* 字体大小为12px */
  transition: color 0.2s ease;  /* 鼠标悬停时颜色平滑过渡 */
}

/* 鼠标悬停时高亮显示 */
.top-links a:hover {
  color:#1f1f1f;  /* 变为黑色 */
  font-weight: bold;  /* 悬停加粗 */
}

/* 用户信息区（右上角） */
.user {
  display: flex;
  align-items: center;
  gap: 16px;           /* 图标组间距 */
  color: #1f1f1f;
  white-space: nowrap;
}

.user a {
  display: flex;
  align-items: center;
  gap: 4px;             /* 图标与文字的间距 */
  text-decoration: none;
  color: #1f1f1f;
  font-size: 12px;
  transition: color 0.2s ease;
}

.user a:hover {
  color: #1f1f1f;  /* 悬停时颜色变化（可选） */
  font-weight: bold;  /* 悬停加粗 */
}


/* ========== 主体：左侧分类 + 右侧网格（固定两列） ========== */
.main-wrapper {
  background: #ffffff;  /* 设置背景为白色 */
  width: 1040px;  /* 固定宽度为1040px */
  height: 368px;  /* 固定高度为368px */
  margin: 16px auto;  /* 将元素居中 */
  border-radius: 19px;  /* 设置圆角效果 */
  position: relative;
}

.main-content {
  display: grid;  /* 使用网格布局 */
  grid-template-columns: 241px 1fr;  /* 设置两列，第一列宽度为260px，第二列占据剩余空间 */
  gap: 16px;  /* 设置两列之间的间距为16px */
  padding: 16px 16px;  /* 上下内边距 */
}

.sidebar {
  background: #f6f6f6;  /* 设置侧边栏背景色为浅灰色 */
  padding: 8px 0;
  border-radius: 16px;  /* 为侧边栏设置12px的圆角 */
}

.sidebar a {
  margin-left: 16px;
  display: flex;  /* 使用flex布局，使得li内的内容横向排列 */
  align-items: center;  /* 将li内的内容垂直居中对齐 */
  gap: 10px;  /* 每个li内的元素之间设置10px的间距 */
  padding: 6px 0;  /* 为li项添加上下左右的内边距 */
  font-size: 14px;  /* 设置字体大小为14px */
  cursor: pointer;  /* 鼠标悬停时显示为手型，表示该项可以点击 */
}

.sidebar span:hover {
  color: #f58300;  /* 鼠标悬停时颜色变化 */
}

.sidebar img {
  width: 20px;  /* 设置图片宽度为20px */
  height: 20px;  /* 设置图片高度为20px */
  object-fit: cover;  /* 保持图片的宽高比例，并填充容器 */
  flex-shrink: 0;  /* 防止图片缩小 */
}


/* 让主容器作为绝对定位参照 */
.main-content { position: relative; }  /* 设置主容器为相对定位，供绝对定位子元素参照 */

/* 左侧 hover 时显示的白色面板 */
.cate-panel {
  top: 0;                 /* 面板顶部与左侧分类顶部对齐 */
  left: 240px;            /* 面板左边距 240px，紧贴左侧分类栏 */
  width: 852px;           /* 面板宽度 760px，可根据布局调整 */
  border-radius: 20px;    /* 圆角边框 20px */
  background: #fff;       /* 背景颜色为白色 */
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .08);  /* 添加阴影效果，营造浮层感 */
  max-height: 492px;      /* 最大高度限制为 492px，超出可滚动 */
  margin: 16px 18px;      /* 外边距：上下16px，左右18px */
  overflow: auto;           /* 保留滚动功能 */
  scrollbar-width: none;    /* 适用于 Firefox */
  -ms-overflow-style: none; /* 适用于 IE、Edge */
  position: absolute;     /* 绝对定位，相对 main-content 定位 */
  z-index: 99;            /* 层级设为 99，确保浮层在上方 */
}
.cate-panel::-webkit-scrollbar {
  display: none;            /* 隐藏 Chrome、Safari 的滚动条 */
}

/* 面板中的每个子块：默认隐藏 */
.cate-item-sub-container {
  display: none;          /* 默认不显示，鼠标悬停时显示 */
  margin: 12px 0;         /* 上下外边距 12px */
}

/* 每个子链接的基本样式 */
.cate-item-sub-container a {
  display: flex;           /* 使用 flex 布局，使内容水平排列 */
  font-size: 14px;         /* 字体大小 14px */
  text-decoration: none;   /* 去掉下划线 */
  cursor: pointer;         /* 鼠标悬停时显示为手型 */
}

/* 鼠标悬停时高亮 */
.cate-item-sub-container a:hover {
  color: #f58300;          /* hover 时字体颜色变为橙色 */
}

/* 整个子块容器 */
.cate-item-sub-container {
  display: flex;           /* 使用 flex 布局 */
  align-items: flex-start; /* 顶部对齐 */
  gap: 24px;               /* 各子元素之间水平间距 24px */
  background: #fff;        /* 背景为白色 */
}

.cate-sub {
  display: flex;           /* 使用 flex 布局 */
  align-items: flex-start; /* 子项顶部对齐 */
  margin-bottom: 24px;
}

/* 左边标题栏 */
.cate-sub-left {
  width: 96px;            /* 固定宽度 96px */
  flex-shrink: 0;         /* 不随容器缩小而缩放 */
  padding-top: 5px;
  color: #333;            /* 字体颜色为深灰 */
  display: flex;          /* 使用 flex 布局 */
  align-items: flex-start;/* 顶部对齐 */
  justify-content: flex-end; /* 内容靠右对齐 */
}

/* 左边标题中的链接 */
.cate-sub-left a {
  display: inline-flex;          /* 行内弹性布局 */
  align-items: center;           /* 垂直居中对齐 */
  gap: 4px;                      /* 文本与箭头间距 4px */
  text-align: right;             /* 文本右对齐 */
  line-height: 16px;             /* 行高 16px */
  color: #333;                   /* 默认字体颜色 */
  text-decoration: none;         /* 去掉下划线 */
}

/* 图标样式 */
.cate-sub-left a .icon {
  width: 12px;                   /* 图标宽度 12px */
  height: 12px;                  /* 图标高度 12px */
  margin-top: 2px;
  flex: 0 0 auto;                /* 固定大小不缩放 */
  background: center / contain no-repeat url('../font/pus.png'); /* 默认箭头图标 */
}

/* 仅当 hover 在 a（文字+箭头）时一起变化 */
.cate-sub-left a:hover {
  color: #f58300;                /* 悬停时文字变橙色 */
}
.cate-sub-left a:hover .icon {
  background-image: url('../font/pusing.png'); /* 悬停时箭头换为高亮图标 */
}

/* 右边内容区（自动换行） */
.cate-sub-right {
  width: 688px;
  display: flex;           /* 使用 flex 布局 */
  flex-wrap: wrap;         /* 超出自动换行 */
  color: #666;
  margin-left: 38px;
  gap: 9px 24px;           /* 每行和每列间距：行 8px，列 20px */
  line-height: 1.8;        /* 设置较舒适的行距 */
}



.hero-banner {
  display: none;
  position: absolute;
  /* 对齐 main-content 的 padding：上 16px，左边：16 + 侧栏 241 + 列间距 16 = 273 */
  top: 16px;
  left: 273px;
  width: 240px;
  height: 336px;
  border-radius: 16px;
  overflow: hidden;
}

.hero-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右侧 4 卡片容器，默认不偏移 */
.category-grid {
  margin-left: 0;
}

/* 屏幕宽度 ≥ 1440px 时：显示大图，并让出位置 */
@media (min-width: 1440px) {
  .hero-banner {
    display: block;
  }

  /* 给右侧卡片整体右移一块，避免被大图盖住：
     240px 图片宽 + 16px 图片与卡片之间的间距 */
  .category-grid {
    margin-left: 256px;
  }
}



/* ========== 四宫格卡片区域 ========== */
.category-grid { /* 定义一个用于放置卡片的网格容器 */
  display: grid; /* 使用 CSS Grid 布局 */
  grid-template-columns: repeat(2, 1fr); /* 创建两列，平均分配宽度 */
  gap: 16px; /* 每个网格项之间的间距为16px */
}

/* ========== 单张卡片基础 ========== */
.cat-card { /* 定义单个卡片的基础样式 */
  position: relative; /* 相对定位，为内部绝对定位元素提供参考 */
  padding: 4px; /* 内边距为4px */
  border-radius: 16px; /* 圆角半径16px */
  overflow: hidden; /* 超出部分隐藏 */
  min-height: 150px; /* 最小高度150px */
  cursor: pointer; /* 鼠标悬浮时显示指针样式 */
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 子元素在主轴上两端对齐 */
  align-items: stretch; /* 子元素在交叉轴上拉伸对齐 */
  transition: all 0.68s ease; /* 所有属性变化时过渡动画0.68秒 */
}

.cat-card:hover { /* 当鼠标悬浮在卡片上时的样式 */
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

/* ========== 卡片头部文案部分 ========== */
.cat-card .card-head { /* 卡片头部的容器样式 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列子元素 */
  gap: 6px; /* 子元素之间的间距为6px */
  width: 100px; /* 固定宽度100px */
  flex-shrink: 0; /* 防止宽度被压缩 */
  z-index: 2; /* 层级高于背景图片 */
}

.card-title { /* 卡片标题文字 */
  position: absolute; /* 绝对定位 */
  left: 18px; /* 距离左侧18px */
  top: 21px; /* 距离顶部21px */
  display: flex; /* 使用flex布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 12px; /* 元素间距12px */
  height: 20px; /* 高度20px */
  line-height: 20px; /* 行高20px */
  font-size: 18px; /* 字体大小18px */
  font-weight: 900; /* 加粗字体 */
  color: #1f1f1f; /* 字体颜色深灰 */
}

.card-sub { /* 卡片副标题文字 */
  position: absolute; /* 绝对定位 */
  left: 18px; /* 距离左边18px */
  top: 45px; /* 距离顶部45px */
  height: 16px; /* 高度16px */
  line-height: 16px; /* 行高16px */
  font-size: 14px; /* 字体大小14px */
  font-weight: 300; /* 字体细度300 */
  text-transform: uppercase; /* 转换为全大写 */
  color: #1f1f1f; /* 字体颜色深灰 */
}

/* 背景图 */
.card-bad { /* 卡片背景图片样式 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左侧对齐 */
  height: 100%; /* 高度占满父元素 */
  object-fit: cover; /* 图片保持比例并填充整个区域 */
  user-select: none; /* 禁止选中图片 */
  pointer-events: none; /* 禁止鼠标事件 */
  z-index: 0; /* 层级最低 */
}

/* ========== 插画动画部分 ========== */
.card-illu { /* 卡片中的插画图像 */
  position: absolute; /* 绝对定位 */
  top: 0; /* 顶部对齐 */
  left: 0; /* 左对齐 */
  width: 160px; /* 宽度160px */
  height: auto; /* 高度自适应 */
  user-select: none; /* 禁止选中 */
  pointer-events: none; /* 禁止鼠标事件 */
  z-index: 1; /* 层级高于背景 */
  transition: transform 0.68s ease; /* 动画过渡效果 */
}

.cat-card:hover .card-illu { /* 鼠标悬浮时插画动画 */
  transform: translateY(10px) scale(1.2); /* 向下移动10px并放大1.2倍 */
}

/* 悬浮旋转图 */
.hover-spin { /* 定义悬浮旋转的图片样式 */
  position: absolute; /* 绝对定位 */
  top: 65px; /* 距顶部65px */
  left: -25px; /* 向左偏移25px */
  width: 128px; /* 宽度128px */
  height: auto; /* 高度自适应 */
  opacity: 0; /* 默认透明不可见 */
  transform: rotate(0deg); /* 初始角度为0度 */
  transform-origin: center center; /* 旋转中心为图片中心 */
  transition: all 0.68s ease; /* 过渡动画 */
  z-index: 0; /* 层级较低 */
}

.cat-card:hover .hover-spin { /* 鼠标悬浮时旋转图动画 */
  opacity: 1; /* 显示图像 */
  transform: rotate(90deg); /* 旋转90度 */
}

/* ========== 右侧白底商品面板（展示两件商品） ========== */
.goods-panel { /* 商品展示区域容器 */
  position: relative; /* 相对定位 */
  background: hsla(0, 0%, 100%, 0.8); /* 半透明白色背景 */
  border-radius: 14px; /* 圆角14px */
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 子元素两端对齐 */
  align-items: stretch; /* 子元素在交叉轴上拉伸 */
  padding: 0 17px; /* 左右内边距17px */
  overflow: hidden; /* 超出部分隐藏 */
  height: 100%; /* 高度撑满父容器 */
  gap: 16px; /* 子元素间距16px */
  flex: 0 1 auto; /* 自动调整大小但不拉伸 */
  width: auto; /* 自动宽度 */
  transition: all 0.68s ease; /* 过渡动画 */
}

/* 默认只显示前两件商品，第 3 个及以后先隐藏 */
.goods-panel .good:nth-child(n + 3) {
  display: none;
}

.goods-panel:hover { /* 鼠标悬浮时阴影效果 */
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 单个商品容器 */
.good { /* 单个商品的容器样式 */
  text-decoration: none; /* 去掉文字下划线 */
  color: inherit; /* 继承父元素颜色 */
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列 */
  justify-content: center; /* 居中对齐 */
  flex: 1; /* 均分空间 */
  height: 100%; /* 高度填满父元素 */
}

.good:hover img { /* 鼠标悬浮时商品图像效果 */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: all 0.68s ease; /* 添加过渡效果 */
}

/* 商品图像 */
.good img { /* 商品图片样式 */
  position: relative; /* 相对定位 */
  left: 50%; /* 水平居中 */
  width: 90px; /* 宽度90px */
  height: 90px; /* 高度90px */
  border-radius: 12px; /* 圆角12px */
  transform: translateX(-50%); /* 向左平移50%实现居中 */
  background: #f8f8f8; /* 灰白色背景 */
  object-fit: cover; /* 保持比例填充 */
  overflow: hidden; /* 隐藏溢出部分 */
  transition: all 0.68s ease; /* 添加平滑动画 */
}

/* 商品价格样式 */
.good .price { /* 商品价格文字样式 */
  margin-top: 10px; /* 顶部外边距10px */
  font-family: Arial, sans-serif; /* 字体族 */
  text-align: center; /* 居中对齐 */
  font-weight: 700; /* 加粗 */
  font-size: 18px; /* 字体大小18px */
  line-height: 18px; /* 行高18px */
  letter-spacing: .2px; /* 字间距0.2px */
  color: #f40; /* 橙红色价格字体 */
}

.price span { /* 价格中小单位（例如￥符号）的样式 */
  margin-right: 2px; /* 右边间距2px */
  vertical-align: middle; /* 垂直居中 */
  font-family: Arial, sans-serif; /* 使用Arial字体 */
  font-size: 12px; /* 字体大小12px */
  font-weight: 400; /* 正常字体粗细 */
  color: #f40; /* 同样为橙红色 */
}



/* ===== 基础容器：沿用 .page 的 1040px 居中布局 ===== */
.feed-box {
  background: #fff;                        /* 背景为白色 */
  width: 1040px;                           /* 固定宽度 1040px */
  border-radius: 20px;                     /* 四角圆角 20px */
  margin: 16px auto 24px;                  /* 上16px，下24px，水平居中 */
  box-shadow: 0 2px 10px rgba(0,0,0,.03);  /* 轻微阴影，增加浮层感 */
}

/* ===== 顶部选项（不换行、溢出隐藏） ===== */
.feed-tabs {
  padding: 16px 0px 6px 16px;
  white-space: nowrap;
  overflow: hidden;          /* 隐藏超出部分 */
  box-sizing: border-box;    /* 内边距计入总宽度 */
  margin-right: 14px;            /* 向内缩进，避免触碰外层绿色padding */
}


.feed-tab {
  display: inline-flex;                    /* 行内弹性布局，使文字与图标水平对齐 */
  align-items: center;                     /* 垂直居中对齐内容 */
  padding: 7.65px 15.7px;                  /* 内边距，上下7.65，左右15.7 */
  margin: 0 8px 0 0;                       /* 外边距：右8px */
  border: 0;                               /* 去除默认边框 */
  outline: 0;                              /* 去除聚焦时轮廓 */
  border-radius: 999px;                    /* 胶囊形圆角 */
  background: #f5f5f5;                     /* 默认浅灰背景 */
  color: #333333;                          /* 字体深灰色 */
  font-size: 16px;                         /* 字体大小16px */
  cursor: pointer;                         /* 鼠标悬停为手型 */
  vertical-align: middle;                  /* 行内元素垂直居中 */
}

.feed-tab div { padding-bottom: 1.5px; }   /* 微调文字垂直位置 */

.feed-tab.is-active {
  background: #ffe60f;                     /* 选中状态背景为亮黄色 */
  font-weight: 800;                        /* 加粗文字 */
}

/* ===== 内容区（卡片瀑布流） ===== */
.feed-panels { padding: 14px 12px 18px; }  /* 内容区内边距 */
.feed-panel { display: none; }             /* 默认隐藏每个面板，按需显示 */

.feed-grid {
  display: grid;                           /* 启用 CSS Grid 布局 */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 四列等宽布局 */
  gap: 10px;                               /* 网格间距 10px */
}

/* ===== 单个卡片样式 ===== */
.feed-card {
  height: 400px;                           /* 固定高度 400px */
  display: block;                          /* 块级元素，可整块点击 */
  border-radius: 16px;                     /* 圆角 16px */
  background: #fff;                        /* 白色背景 */
  overflow: hidden;                        /* 超出内容隐藏 */
  transition: box-shadow .3s ease, transform .2s ease; /* 悬停过渡动画 */
  text-decoration: none;                   /* 去掉下划线 */
  color: inherit;                          /* 继承文字颜色 */
}

.feed-card:hover {
  box-shadow: 0px 5px 8px 1px rgba(0,0,0,0.1); /* 悬停时加深阴影 */
}

.feed-card > img {
  height: 240px;                           /* 图片高度 240px */
  width: 240px;                            /* 图片宽度 240px */
  border-radius: 14px;                     /* 图片圆角 14px */
  margin: 3.25px 3.25px 0;                          /* 水平居中 */
  object-fit: cover;                       /* 填充裁剪，保持比例 */
  display: block;                          /* 块级元素 */
  background: #f8f8f8;                     /* 加载前灰色背景 */
}

/* ===== 信息区（标题+属性+价格+用户） ===== */
.feed-info {
  padding: 8px 11.25px 3.25px;                 /* 内边距 */
  display: flex;                           /* 使用 Flex 布局 */
  flex-direction: column;                  /* 垂直排列子项 */
  gap: 4px;                                /* 各元素间距 4px */
}

/* ===== 标题（固定两行显示） ===== */
.feed-title {
  font-size: 16px;                         /* 字体大小14px */
  line-height: 1.5;                        /* 行高1.5倍 */
  color: #333;                             /* 深灰文字 */
  height: 3em;                             /* 高度两行 = 3em */
  overflow: hidden;                        /* 超出隐藏 */
  line-clamp: 2;
  display: -webkit-box;                    /* 启用多行截断盒模型 */
  -webkit-box-orient: vertical;            /* 垂直排列盒子 */
  -webkit-line-clamp: 2;                   /* 限制为两行 */
  overflow-wrap: anywhere;                 /* 自动换行防止溢出 */
}

/* 标题内小图标 */
.feed-title .title-icon {
  display: inline-block;                   /* 行内块显示 */
  width: 33.6px;                           /* 图标宽 33.6px */
  height: 24px;                            /* 图标高 24px */
  margin-right: 4.8px;                       /* 与文字间距 4.8px */
  vertical-align: text-bottom;             /* 对齐文字底部 */
}

/* ===== 属性行（显示时间或分类） ===== */
.feed-attr {
  vertical-align: middle;
}


/* ===== 价格与想要人数 ===== */
.feed-bottom {
  display: flex;                           /* 水平排列价格与人数 */
  align-items: baseline;                   /* 基线对齐更整齐 */
  margin-top: 2px;                         /* 与上方间距 2px */
}

.feed-price {
  color: #f40;                             /* 红色文字 */
  font-size: 24px;                         /* 字号 14px */
  font-weight: 700;                        /* 加粗 */
  line-height: 1;                          /* 行高紧凑 */
  font-family: xianyubeta, sans-serif;
}

.feed-wish {
  margin-left: 4.8px;
  font-size: 14.4px;                         /* 字号 12px */
  color: #999;                             /* 浅灰色 */
  line-height: 1;                          /* 行高紧凑 */
}

.feed-wish .old-price {
  color: #999;                  /* 灰色字体 */
  font-size: 14px;              /* 字体略小 */
  text-decoration: line-through;/* 添加划线 */
}

/* ===== 用户信息 ===== */
.feed-user {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左右分布 */
  width: 100%;
  padding-top: 3px;
}

.feed-user .user-info {
  display: flex;
  align-items: center; /* 头像+名字垂直居中 */
  gap: 6px; /* 控制头像与名字的间距 */
}

.user-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

/* 卖家信用 - 优秀 */
.user-tag.credit-good {
  background-color: rgb(255, 244, 235);
  color: rgb(255, 121, 0);
  border-radius: 9.6px;
  font-size: 13.2px;
  padding: 0 7.2px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 卖家信用 - 极好 */
.user-tag.credit-great {
  background-color: rgb(255, 244, 235);
  color: rgb(255, 121, 0);
  border-radius: 9.6px;
  font-size: 13.2px;
  padding: 0 7.2px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 卖家信用 - 空白状态 */
.user-tag.credit-none {
  background: transparent;
  color: transparent;
  height: 22px;
  border-radius: 9.6px;
  padding: 0 7.2px;
}



.footer {
  width: 100%;
  background: #2f2f2f;
  color: #999;
  font-size: 14px;
  font-family: "Microsoft YaHei UI", sans-serif;
  min-width: 1040px;
}
.footer a:hover {
  color: #ffe60f;
  text-decoration: none;
}
.footer-inner {
  min-width: 1040px;
  margin: 0 auto;
  padding: 32px 0px 8px;
  text-align: center;
}
.footer-text {
  line-height: 1.9;
  font-size: 12px;
  line-height: 16px;
  word-break: break-word;
}
.footer-text a {
  color: #999;
  margin: 0 6px;
  text-decoration: none;
}

/* 分隔符样式（不可交互） */
.sep {
  border-left: .5px solid #999;
  height: 10px;
  margin: 0 12px;
  width: 0;
}

/* 图片 16x16 并与文字垂直居中 */
.footer-text4 img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 4px;
}

/* 下方横排区域：图片 + 绿色块 */
.footer-bottom {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 12px;
}

/* 举报图片部分 */
.footer-images {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-images img {
  height: 48px;
  object-fit: fill;
}

/* 绿色块部分 */
.footer-green {
  background: radial-gradient(50% 50% at 50% 50%, #f6fffb 0, #e2ffe5 100%);
  width: 184px;
  height: 48px;
}

.green-title {
  color: #1f1f1f;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  padding-top: 2px;
}

.green-links {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.green-links a {
  color: #2454d3;
  font-size: 8px;
  line-height: 11px;
  text-decoration: none;
}
.green-links a:hover {
  color: #2454d3;
  text-decoration: underline;
}



/* ========== 右侧悬浮栏整体样式 ========== */
.toolbar {
  position: fixed; /* 固定在屏幕位置，不随滚动条滚动 */
  right: 15px; /* 距离浏览器右边0px */
  top: 50%; /* 垂直方向居中（距离顶部50%） */
  transform: translateY(-50%); /* 向上平移自身高度的一半，实现完美垂直居中 */
  background: #fff; /* 背景为纯白色 */
  border-radius: 50px; /* 圆角外观，使整体呈现圆润形状 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); /* 添加柔和阴影，增强浮动感 */
  display: flex; /* 使用flex布局，方便垂直排列子元素 */
  flex-direction: column; /* 垂直方向排列子项 */
  align-items: center; /* 子元素水平居中对齐 */
  padding: 9px 0; /* 上下内边距16px，左右为0 */
  width: 66px; /* 固定宽度为66px */
  z-index: 99; /* 层级较高，保证浮动栏显示在最前面 */
}

.tool-item {
  display: flex; /* 使用flex布局 */
  flex-direction: column; /* 垂直排列图标与文字 */
  align-items: center; /* 水平居中 */
  justify-content: center; /* 垂直居中 */
  cursor: pointer; /* 鼠标悬停时显示为手型 */
  padding: 8px 0; /* 上下内边距8px，左右为0 */
  position: relative; /* 相对定位，用于后续放置徽章或提示 */
}

.tool-item .icon {
  width: 26px; /* 图标宽度26px */
  height: 26px; /* 图标高度26px */
  background-size: contain; /* 背景图按比例缩放至完全显示 */
  background-repeat: no-repeat; /* 不重复平铺背景图 */
  background-position: center; /* 背景图居中显示 */
  position: relative; /* 相对定位，为徽章定位做准备 */
}

#backToTop {
  transition: opacity 0.3s ease;
  opacity: 0;
}
#backToTop[style*="display: flex"] {
  opacity: 1;
}

.icon-1 .icon { background-image: url('../font/ui-1.apng'); }
.icon-1:hover .icon { background-image: url('../font/ui-11.png'); }
.icon-2 .icon { background-image: url('../font/ui-2.png'); }
.icon-2:hover .icon { background-image: url('../font/ui-22.png'); } 
.icon-3 .icon { background-image: url('../font/ui-3.png'); }
.icon-3:hover .icon { background-image: url('../font/ui-33.png'); } 
.icon-4 .icon { background-image: url('../font/ui-4.png'); }
.icon-4:hover .icon { background-image: url('../font/ui-44.png'); } 
.icon-5 .icon { background-image: url('../font/ui-5.png'); }
.icon-5:hover .icon { background-image: url('../font/ui-55.png'); } 
.icon-6 .icon { background-image: url('../font/ui-6.png'); }
.icon-6:hover .icon { background-image: url('../font/ui-66.png'); } 

.badge {
  position: absolute; /* 绝对定位，使其相对于图标自由摆放 */
  border: #ffffff 2px solid;
  top: -3px; /* 距离图标底部3px */
  right: -6px; /* 向右偏移4px，使徽章略微溢出图标 */
  background: #f43; /* 红色背景 */
  color: #fff; /* 白色字体 */
  font-size: 9px; /* 字体大小9px */
  border-radius: 999px; /* 圆形徽章（极大圆角） */
  padding: 1px 4px 2px; /* 内边距，上下1px，左右4px */
  line-height: 1.2; /* 行高1.2，保证文字垂直居中 */
}

.label {
  font-size: 12px; /* 字体大小13px */
  color: #333; /* 字体颜色为深灰色 */
  margin-top: 4px; /* 与图标间距4px */
}

.toolbar hr {
  width: 40px; /* 分隔线宽度40px */
  height: 1px; /* 高度1px */
  background: #eee; /* 浅灰色分隔线 */
  border: none; /* 去掉默认边框 */
  margin: 4px 0; /* 上下外边距4px */
}


/* 视口宽度 >= 1440px 时的宽屏布局 */
@media (min-width: 1440px) {
  /* 统一内容区宽度为 1296 */
  .page {
    width: 1296px;
  }

  /* 主体大白块跟着一起加宽 */
  .main-wrapper,
  .feed-box {
    width: 1296px;
  }

  .search-container {
    width: 752px;
  }

  .cate-panel {
    width: 1048px; 
  }

  /* feed 区一行显示 5 个 */
  .feed-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}


/* 视口宽度 >= 1680px 时的宽屏布局 */
@media (min-width: 1680px) {
  /* 整体内容区宽度改为 1552 */
  .page,
  .main-wrapper,
  .feed-box {
    width: 1552px;
  }

  .search-container {
    width: 1080px;
  }

  .cate-panel {
    width: 1048px; 
  }

  .goods-panel .good:nth-child(n + 3) {
    display: flex;
  }

  /* feed 区：一行 6 个卡片 */
  .feed-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .goods-panel {
    padding: 0 20px; /* 左右内边距17px */
    gap: 24px; /* 子元素间距16px */
  }
}