.category-container {
  display: flex;
  height: calc(100vh - 1rpx);
  background-color: #f5f5f5;
}

/* 左侧分类导航 */
.category-left {
  width: 200rpx;
  background-color: #fff;
  border-right: 2rpx solid #f0f0f0;
  position: relative;
  z-index: 10;

  .category-scroll {
    height: calc(100vh - 1rpx);
  }

  .category-item {
    padding: 30rpx 20rpx;
    background-color: #fff;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;

    &:hover {
      background-color: #f8f8f8;
    }

    &.active {
      background-color: #fff;
      color: #ff6b35;

      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 50rpx;
        background: linear-gradient(180deg, #ff6b35 0%, #ff8f6b 100%);
        border-radius: 0 8rpx 8rpx 0;
        box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
      }

      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 2rpx;
        background-color: #fff;
        z-index: 1;
      }
    }

    .category-name {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
      display: block;
      text-align: center;
      line-height: 1.2;
      transition: color 0.3s ease;
    }

    .category-count {
      font-size: 20rpx;
      color: #999;
      margin-top: 8rpx;
      display: block;
      text-align: center;
    }

    &.active .category-name {
      color: #ff6b35;
      font-weight: 600;
    }

    &.active .category-count {
      color: #ff6b35;
    }
  }
}

/* 右侧商品列表 */
.category-right {
  flex: 1;
  background-color: #fff;
  position: relative;

  .goods-scroll {
    height: calc(100vh - 1rpx);
  }

  .goods-section {
    .section-title {
      position: sticky;
      top: 0;
      background: linear-gradient(135deg, #f8f8f8 0%, #f0f0f0 100%);
      padding: 24rpx 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      z-index: 10;

      text {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
    }

    .goods-list {
      padding: 20rpx 30rpx;
    }

    .goods-item {
      display: flex;
      padding: 24rpx 0;
      border-bottom: 2rpx solid #f8f8f8;
      transition: all 0.3s ease;
      border-radius: 12rpx;
      margin-bottom: 8rpx;
      cursor: pointer;

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      &:hover {
        background-color: #fafafa;
        transform: translateY(-2rpx);
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      }

      .goods-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 16rpx;
        margin-right: 24rpx;
        flex-shrink: 0;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }
      }

      .goods-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .goods-name {
          font-size: 30rpx;
          color: #333;
          font-weight: 600;
          line-height: 1.4;
          margin-bottom: 8rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .goods-desc {
          font-size: 24rpx;
          color: #666;
          line-height: 1.3;
          margin-bottom: 12rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .goods-price-row {
          display: flex;
          align-items: center;
          margin-bottom: 8rpx;

          .goods-price {
            font-size: 36rpx;
            color: #ff6b35;
            font-weight: 700;
            margin-right: 16rpx;
            position: relative;

            &::before {
              content: '¥';
              font-size: 24rpx;
              position: relative;
              top: -2rpx;
            }
          }

          .goods-original-price {
            font-size: 24rpx;
            color: #999;
            text-decoration: line-through;
            position: relative;

            &::before {
              content: '¥';
              font-size: 20rpx;
            }
          }
        }

        .goods-stock {
          font-size: 22rpx;
          color: #999;
          background-color: #f8f8f8;
          padding: 4rpx 8rpx;
          border-radius: 4rpx;
          display: inline-block;
          width: fit-content;
        }
      }
    }

    .empty-section {
      padding: 120rpx 30rpx;
      text-align: center;

      text {
        font-size: 28rpx;
        color: #999;
        position: relative;

        &::before {
          content: '📋';
          display: block;
          font-size: 80rpx;
          margin-bottom: 20rpx;
        }
      }
    }
  }
}

/* 骨架屏样式 */
.category-skeleton {
  display: flex;
  height: calc(100vh - 1rpx);

  .category-left {
    width: 200rpx;
    background-color: #fff;
    border-right: 2rpx solid #f0f0f0;
    padding: 20rpx 0;

    .skeleton-category-item {
      padding: 30rpx 20rpx;

      .skeleton-text {
        height: 32rpx;
        background-color: #f0f0f0;
        border-radius: 4rpx;
        animation: skeleton-loading 1.5s ease-in-out infinite;
      }
    }
  }

  .category-right {
    flex: 1;
    background-color: #fff;
    padding: 30rpx;

    .skeleton-goods-item {
      display: flex;
      padding: 24rpx 0;
      border-bottom: 2rpx solid #f8f8f8;

      .skeleton-image {
        width: 160rpx;
        height: 160rpx;
        background-color: #f0f0f0;
        border-radius: 16rpx;
        margin-right: 24rpx;
        animation: skeleton-loading 1.5s ease-in-out infinite;
      }

      .skeleton-info {
        flex: 1;

        .skeleton-text {
          height: 32rpx;
          background-color: #f0f0f0;
          border-radius: 4rpx;
          animation: skeleton-loading 1.5s ease-in-out infinite;
        }
      }
    }
  }
}

@keyframes skeleton-loading {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .category-left {
    width: 160rpx;

    .category-item {
      padding: 24rpx 16rpx;

      .category-name {
        font-size: 26rpx;
      }

      .category-count {
        font-size: 18rpx;
      }
    }
  }

  .category-right {
    .goods-section {
      .goods-list {
        padding: 16rpx 20rpx;
      }

      .goods-item {
        padding: 20rpx 0;

        .goods-image {
          width: 140rpx;
          height: 140rpx;
          margin-right: 20rpx;
        }

        .goods-info {
          .goods-name {
            font-size: 28rpx;
          }

          .goods-desc {
            font-size: 22rpx;
          }

          .goods-price-row {
            .goods-price {
              font-size: 32rpx;
            }
          }
        }
      }
    }
  }
}

/* 空状态样式 */
.empty-container {
  height: calc(100vh - 1rpx);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;

  .empty-content {
    text-align: center;
    padding: 60rpx 40rpx;

    .empty-icon {
      font-size: 120rpx;
      display: block;
      margin-bottom: 30rpx;
    }

    .empty-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
      display: block;
      margin-bottom: 16rpx;
    }

    .empty-desc {
      font-size: 28rpx;
      color: #666;
      display: block;
      margin-bottom: 40rpx;
      line-height: 1.4;
    }

    .empty-action {
      background: linear-gradient(135deg, #ff6b35 0%, #ff8f6b 100%);
      color: #fff;
      padding: 20rpx 40rpx;
      border-radius: 50rpx;
      font-size: 28rpx;
      font-weight: 600;
      box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-2rpx);
        box-shadow: 0 6rpx 16rpx rgba(255, 107, 53, 0.4);
      }

      &:active {
        transform: translateY(0);
        box-shadow: 0 2rpx 8rpx rgba(255, 107, 53, 0.3);
      }
    }
  }
}
