/* 容器样式 */
.container {
  background: #f4f4f4; /* 设置背景颜色为浅灰色 */
}

/* 分类标题栏样式 */
.category-tit {
  width: 100%; /* 宽度占满整个父元素 */
  white-space: nowrap; /* 禁止文本换行，确保所有分类项在一行显示 */
  position: fixed; /* 固定定位，使标题栏始终位于页面顶部 */
  top: 0px; /* 距离页面顶部0像素 */
  z-index: 999; /* 设置较高的堆叠顺序，确保标题栏在其他内容之上 */
  background-color: #fff; /* 背景颜色为白色 */
  border-bottom: 2rpx solid #f4f4f4; /* 底部边框，使用浅灰色实线 */
  font-size: 30rpx; /* 标题文字大小为30响应式像素 */

  .category-item {
    display: inline-block; /* 分类项作为行内块级元素显示，确保它们在同一行 */
    padding: 20rpx 10rpx; /* 内边距为上下20响应式像素，左右10响应式像素 */
    margin: 0 20rpx; /* 左右外边距为20响应式像素 */
    box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
    font-size: 28rpx; /* 分类项文字大小为28响应式像素 */
  }
}

/* 当前选中的分类项样式 */
.on {
  border-bottom: 4rpx solid #e43130; /* 底部边框，使用红色实线，表示当前选中 */
  color: #e43130; /* 文本颜色为红色 */
}

/* 商品项容器样式 */
.prod-item {
  height: calc(100vh - 100rpx); /* 高度为视口高度减去100响应式像素，确保与固定头部有足够的间距 */
}

/* 隐藏滚动条样式 */
::-webkit-scrollbar {
  width: 0; /* 滚动条宽度为0 */
  height: 0; /* 滚动条高度为0 */
  color: transparent; /* 滚动条颜色为透明 */
}

/* 空状态样式 */
.empty {
  margin-top: 200rpx; /* 顶部外边距为200响应式像素，确保空状态提示在页面中间 */
}

/* 商品项样式 */
.prod-items {
  width: 345rpx; /* 商品项宽度为345响应式像素 */
  display: inline-block; /* 作为行内块级元素显示，确保它们在同一行 */
  background: #fff; /* 背景颜色为白色 */
  padding-bottom: 20rpx; /* 底部内边距为20响应式像素 */
  box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
  box-shadow: 0rpx 6rpx 8rpx rgba(58, 134, 185, 0.2); /* 添加轻微的阴影效果，增强立体感 */

  &:nth-child(2n-1) {
    margin: 20rpx 10rpx 10rpx 20rpx; /* 奇数商品项的外边距设置 */
  }

  &:nth-child(2n) {
    margin: 20rpx 20rpx 10rpx 10rpx; /* 偶数商品项的外边距设置 */
  }

  .hot-imagecont {
    .hotsaleimg {
      width: 341rpx; /* 图片宽度为341响应式像素 */
      height: 341rpx; /* 图片高度为341响应式像素 */
    }

    font-size: 0; /* 移除默认字体大小，防止影响图片显示 */
    text-align: center; /* 图片居中对齐 */
  }

  .hot-text {
    .hotprod-text {
      font-size: 28rpx; /* 商品名称文字大小为28响应式像素 */
      white-space: nowrap; /* 禁止文本换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
    }

    margin-top: 20rpx; /* 顶部外边距为20响应式像素 */
    padding: 0 10rpx; /* 左右内边距为10响应式像素 */

    .prod-info {
      min-height: 30rpx; /* 最小高度为30响应式像素 */
      font-size: 22rpx; /* 商品信息文字大小为22响应式像素 */
      color: #999; /* 文本颜色为灰色 */
      white-space: nowrap; /* 禁止文本换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
    }

    .prod-text-info {
      position: relative; /* 相对定位，用于内部元素的绝对定位 */
      height: 70rpx; /* 高度为70响应式像素 */
      line-height: 70rpx; /* 行高设置为70响应式像素，确保文本垂直居中 */
      font-family: Arial; /* 字体系列为Arial */

      .hotprod-price {
        display: inline; /* 价格文本作为行内元素显示 */
        font-size: 26rpx; /* 价格文字大小为26响应式像素 */
        color: #eb2444; /* 价格颜色为红色 */
      }

      .basket-img {
        width: 50rpx; /* 购物车图标宽度为50响应式像素 */
        height: 50rpx; /* 购物车图标高度为50响应式像素 */
        position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
        right: 0; /* 购物车图标距离右侧0像素 */
        bottom: 7rpx; /* 购物车图标距离底部7响应式像素 */
        padding: 8rpx; /* 内边距为8响应式像素 */
      }
    }
  }
}

/* 更多商品样式 */
.more-prod {
  .prod-text-right {
    .prod-info {
      font-size: 22rpx; /* 商品信息文字大小为22响应式像素 */
      color: #999; /* 文本颜色为灰色 */
      white-space: nowrap; /* 禁止文本换行 */
      overflow: hidden; /* 隐藏超出容器的内容 */
      text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
    }
  }
}

/* 空状态占位样式 */
.empty-wrap {
  color: #aaa; /* 文本颜色为浅灰色 */
  text-align: center; /* 文本居中对齐 */
  padding-top: 400rpx; /* 顶部内边距为400响应式像素，确保空状态提示在页面中间 */
}
