.goods-detail-page {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding-bottom: 40rpx;
}

// 商品轮播图
.goods-swiper {
  width: 100%;
  height: 750rpx;
  background-color: #fff;

  .swiper-image {
    width: 100%;
    height: 100%;
    display: block;
  }

  .image-indicator {
    position: absolute;
    bottom: 60rpx;
    right: 30rpx;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 20rpx;
    padding: 6rpx 16rpx;

    .indicator-text {
      font-size: 22rpx;
      color: #fff;
    }
  }
}

// 卡片通用样式
.goods-info-card,
.spec-card,
.info-card,
.detail-card,
.service-card,
.params-card {
  background-color: #fff;
  border-radius: 20rpx;
  margin: 24rpx;
  padding: 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.03);
}

// 商品信息卡片
.goods-info-card {
  margin-top: -40rpx;
  position: relative;
  z-index: 2;

  .price-section {
    margin-bottom: 24rpx;

    .current-price {
      display: flex;
      align-items: baseline;
      margin-bottom: 20rpx;

      .price-symbol {
        font-size: 32rpx;
        color: #ff4d4f;
        font-weight: 500;
        margin-right: 4rpx;
      }

      .price-number {
        font-size: 48rpx;
        color: #ff4d4f;
        font-weight: 700;
        margin-right: 20rpx;
      }

      .original-price {
        font-size: 28rpx;
        color: #999;
        text-decoration: line-through;
        margin-right: 20rpx;
      }

      .discount-tag {
        background-color: #fff0f0;
        border-radius: 6rpx;
        padding: 4rpx 12rpx;

        .discount-text {
          font-size: 22rpx;
          color: #ff4d4f;
          font-weight: 500;
        }
      }
    }

    .goods-title {
      font-size: 36rpx;
      color: #333;
      font-weight: 600;
      line-height: 1.4;
      display: block;
    }
  }

  .goods-description {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 28rpx;
    display: block;
  }

  .tags-section {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;

    .tag-item {
      background-color: #f0f9ff;
      border-radius: 8rpx;
      padding: 8rpx 16rpx;

      .tag-text {
        font-size: 24rpx;
        color: #1890ff;
      }
    }
  }
}

// 规格卡片
.spec-card {
  .card-header {
    margin-bottom: 24rpx;
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #f5f5f5;

    .card-title {
      font-size: 32rpx;
      color: #333;
      font-weight: 600;
    }
  }

  .spec-list {
    .spec-item {
      display: flex;
      margin-bottom: 20rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx dashed #f0f0f0;

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

      .spec-key {
        font-size: 28rpx;
        color: #666;
        min-width: 140rpx;
      }

      .spec-value {
        font-size: 28rpx;
        color: #333;
        flex: 1;
      }
    }
  }
}

// 信息卡片
.info-card {
  .info-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .info-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      .info-label {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 8rpx;
      }

      .info-value {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
      }
    }

    .divider {
      width: 1rpx;
      height: 50rpx;
      background-color: #f0f0f0;
    }
  }
}

// 详情卡片
.detail-card {
  .detail-content {
    padding-top: 20rpx;
  }

  .default-detail {
    .detail-section {
      margin-bottom: 32rpx;

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

      .detail-title {
        display: block;
        font-size: 30rpx;
        color: #333;
        font-weight: 600;
        margin-bottom: 16rpx;
        padding-left: 20rpx;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 8rpx;
          height: 30rpx;
          background-color: #1890ff;
          border-radius: 4rpx;
        }
      }

      .detail-text {
        font-size: 28rpx;
        color: #666;
        line-height: 1.6;
        display: block;
      }
    }
  }
}

// 服务卡片
.service-card {
  .service-list {
    .service-item {
      display: flex;
      align-items: center;
      padding: 24rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

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

      .service-icon {
        font-size: 40rpx;
        margin-right: 24rpx;
        width: 60rpx;
        text-align: center;
      }

      .service-info {
        flex: 1;

        .service-title {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          display: block;
          margin-bottom: 4rpx;
        }

        .service-desc {
          font-size: 24rpx;
          color: #999;
          display: block;
        }
      }
    }
  }
}

// 参数卡片
.params-card {
  .params-table {
    .param-row {
      display: flex;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

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

      .param-key {
        font-size: 28rpx;
        color: #666;
        width: 200rpx;
      }

      .param-value {
        font-size: 28rpx;
        color: #333;
        flex: 1;
      }
    }
  }
}

// 底部装饰
.bottom-decor {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 60rpx 0 40rpx;
  padding: 0 32rpx;

  .decor-line {
    flex: 1;
    height: 1rpx;
    background-color: #e8e8e8;
  }

  .end-text {
    font-size: 24rpx;
    color: #ccc;
    padding: 0 32rpx;
  }
}

// 富文本内容样式调整
::v-deep .rich-text {
  img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 20rpx auto;
    border-radius: 12rpx;
  }

  p {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20rpx;
  }

  h3 {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    margin: 40rpx 0 20rpx;
  }

  ul,
  ol {
    padding-left: 40rpx;
    margin-bottom: 20rpx;
  }

  li {
    font-size: 28rpx;
    color: #666;
    line-height: 1.6;
    margin-bottom: 12rpx;
  }
}