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

  .empty {
    text-align: center; /* 文本居中对齐 */
    color: #999; /* 文本颜色为灰色 */
    font-size: 26rpx; /* 字体大小为26响应式像素 */
  }

  .empty.empty-top {
    margin-top: 300rpx; /* 顶部外边距为300响应式像素，用于在页面顶部显示空状态时有足够的间距 */
  }
}

/* 固定定位的盒子样式 */
.fixed-box {
  position: fixed; /* 固定定位，使盒子始终位于页面顶部 */
  width: 100%; /* 宽度占满整个父元素 */
  top: 0; /* 距离页面顶部0像素 */
  z-index: 999; /* 设置较高的堆叠顺序，确保盒子在其他内容之上 */
  background: #fff; /* 背景颜色为白色 */

  .tabs {
    width: 100%; /* 宽度占满整个父元素 */
    height: 80rpx; /* 高度为80响应式像素 */
    line-height: 80rpx; /* 行高设置为80响应式像素，确保文本垂直居中 */
    padding: 10rpx 0; /* 上下内边距为10响应式像素 */
    z-index: 999; /* 设置较高的堆叠顺序，确保标签栏在其他内容之上 */
    background: #fff; /* 背景颜色为白色 */

    &::after {
      content: ''; /* 伪元素内容为空 */
      background-color: #e1e1e1; /* 伪元素背景颜色为浅灰色 */
      left: 0; /* 伪元素距离左侧0像素 */
      height: 1px; /* 伪元素高度为1像素 */
      transform-origin: 50% 100% 0; /* 伪元素变换原点为底部中心 */
      bottom: 0; /* 伪元素距离底部0像素 */
      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
      display: block; /* 确保伪元素作为块级元素显示 */
      width: 100%; /* 伪元素宽度为100%，即占满整个父元素 */
    }

    .tab-item {
      display: inline-block; /* 标签项作为行内块级元素显示 */
      width: 33.33%; /* 每个标签项占据父元素宽度的33.33%，实现三等分 */
      text-align: center; /* 文本居中对齐 */
      font-size: 28rpx; /* 字体大小为28响应式像素 */
    }

    .tab-item.on {
      color: #eb2444; /* 当前选中的标签项文本颜色为红色 */
    }
  }
}

/* 搜索栏样式 */
.search-bar {
  display: flex; /* 使用弹性布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: space-between; /* 内容左右对齐 */
  width: 100%; /* 宽度占满整个父元素 */
  color: #777; /* 搜索栏内文本颜色为浅灰色 */
  background: #fff; /* 搜索栏背景颜色为白色 */
  z-index: 3; /* 设置堆叠顺序，确保搜索栏在其他内容之上 */
  padding: 0 30rpx; /* 左右内边距为30响应式像素 */
  box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
  margin: 30rpx 0; /* 上下外边距为30响应式像素 */

  .search-box {
    position: relative; /* 相对定位，用于内部元素的绝对定位 */
    height: 60rpx; /* 搜索框高度为60响应式像素 */
    background: #f7f7f7; /* 搜索框背景颜色为浅灰色 */
    z-index: 999; /* 设置较高的堆叠顺序，确保搜索框在其他内容之上 */
    width: 80%; /* 搜索框宽度为父元素宽度的80% */
    border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
    margin-right: 30rpx; /* 右侧外边距为30响应式像素 */
    flex: 1; /* 搜索框占据剩余空间 */

    .search-img {
      width: 32rpx; /* 搜索图标宽度为32响应式像素 */
      height: 32rpx; /* 搜索图标高度为32响应式像素 */
      position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
      left: 20rpx; /* 搜索图标距离左侧20响应式像素 */
      top: 14rpx; /* 搜索图标距离顶部14响应式像素 */
      display: block; /* 确保图标作为块级元素显示 */
    }
  }

  .search-hint {
    font-size: 28rpx; /* 提示文本字体大小为28响应式像素 */
    position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
    right: 30rpx; /* 提示文本距离右侧30响应式像素 */
    top: 31rpx; /* 提示文本距离顶部31响应式像素 */
    color: #eb2444; /* 提示文本颜色为红色 */
  }

  .search-list-img {
    width: 40rpx; /* 图标宽度为40响应式像素 */
    height: 40rpx; /* 图标高度为40响应式像素 */
    font-size: 0; /* 移除默认字体大小，防止影响图标显示 */
    image {
      width: 100%; /* 图片宽度为100%，即占满父元素 */
      height: 100%; /* 图片高度为100%，即占满父元素 */
    }
  }
}

/* 搜索输入框样式 */
.sear-input {
  height: 60rpx; /* 输入框高度为60响应式像素 */
  border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
  border: 0; /* 移除默认边框 */
  margin: 0 30rpx 0 64rpx; /* 左右外边距分别为30和64响应式像素 */
  line-height: 48rpx; /* 行高设置为48响应式像素，确保文字垂直居中 */
  vertical-align: top; /* 垂直对齐方式为顶部 */
  background: #f7f7f7; /* 输入框背景颜色为浅灰色 */
  font-size: 28rpx; /* 输入框内的字体大小为28响应式像素 */
}

/* 商品展示区域样式 */
.prod-show {
  background: #fff; /* 背景颜色为白色 */

  .prod-items {
    float: left; /* 商品项左浮动，实现水平排列 */
    background: #fff; /* 商品项背景颜色为白色 */
    padding-bottom: 20rpx; /* 底部内边距为20响应式像素 */
    box-sizing: border-box; /* 确保padding和border包含在元素的width和height之内 */
  }
}

.prod-items {
  margin: 0 20rpx; /* 左右外边距为20响应式像素 */
}

/* 热销商品容器样式 */
.hotsale-item-cont {
  display: flex; /* 使用弹性布局 */
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 内容左右对齐 */
}

/* 商品列表样式 */
.prod-list {
  padding-top: 150rpx; /* 顶部内边距为150响应式像素，确保与固定头部有足够的间距 */
  min-height: calc(100vh - 150rpx); /* 最小高度为视口高度减去150响应式像素 */

  .cont-item {
    padding: 0 20rpx 20rpx 20rpx; /* 内边距为上下20响应式像素，左右20响应式像素 */

    .show-item {
      .more-prod-pic {
        text-align: center; /* 图片文本居中对齐 */
        width: 170rpx; /* 图片容器宽度为170响应式像素 */
        height: 170rpx; /* 图片容器高度为170响应式像素 */
        font-size: 0; /* 移除默认字体大小，防止影响图片显示 */

        .more-pic {
          width: 100%; /* 图片宽度为100%，即占满父元素 */
          height: 100%; /* 图片高度为100%，即占满父元素 */
          vertical-align: middle; /* 图片垂直居中对齐 */
        }
      }

      position: relative; /* 相对定位，用于内部元素的绝对定位 */
      display: flex; /* 使用弹性布局 */
      justify-content: flex-start; /* 内容左对齐 */
      padding: 20rpx; /* 内边距为20响应式像素 */
      border-radius: 20rpx; /* 圆角边框，半径为20响应式像素 */
      background: #fff; /* 背景颜色为白色 */
      margin-bottom: 20rpx; /* 底部外边距为20响应式像素 */
      box-shadow: 0 16rpx 32rpx 0 rgba(7, 17, 27, 0.05); /* 添加轻微的阴影效果，增强立体感 */

      .prod-text-right {
        margin-left: 20rpx; /* 左侧外边距为20响应式像素 */
        width: 75%; /* 占据父元素宽度的75% */

        .cate-prod-info {
          font-size: 22rpx; /* 字体大小为22响应式像素 */
          color: #999; /* 文本颜色为灰色 */
          margin: 10rpx 0 20rpx 0; /* 上下外边距分别为10和20响应式像素 */
        }

        .go-to-buy {
          font-size: 26rpx; /* 字体大小为26响应式像素 */
          background: #eb2444; /* 背景颜色为红色 */
          color: #fff; /* 文本颜色为白色 */
          border-radius: 50rpx; /* 圆角边框，半径为50响应式像素 */
          width: 150rpx; /* 宽度为150响应式像素 */
          text-align: center; /* 文本居中对齐 */
          padding: 8rpx 3rpx; /* 内边距为8和3响应式像素 */
          position: absolute; /* 绝对定位，相对于最近的相对定位祖先元素 */
          right: 20rpx; /* 按钮距离右侧20响应式像素 */
          bottom: 20rpx; /* 按钮距离底部20响应式像素 */
        }

        .prod-text.more {
          margin: 0; /* 移除默认外边距 */
          height: 78rpx; /* 高度为78响应式像素 */
          font-size: 28rpx; /* 字体大小为28响应式像素 */
          display: -webkit-box; /* 使用Webkit的多行文本溢出处理 */
          word-break: break-all; /* 允许单词内断行 */
          overflow: hidden; /* 隐藏超出容器的内容 */
          text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
          display: -webkit-box; /* 重复声明以确保兼容性 */
          -webkit-line-clamp: 2; /* 限制显示两行文本 */
          -webkit-box-orient: vertical; /* 文本方向为垂直 */
          color: #000; /* 文本颜色为黑色 */
        }

        .prod-price.more {
          font-size: 28rpx; /* 字体大小为28响应式像素 */
          color: #eb2444; /* 文本颜色为红色 */
          font-family: arial; /* 字体系列为Arial */
        }
      }
    }
  }
}
