/* pages/product-detail/product-detail.wxss */
.detail-page {
    width: 100%;
    background: #f5f5f5;
  }
  
  /* 加载状态 */
  .loading-container {
    position: absolute;
    background: #f5f5f5;
    z-index: 100;
  }
  
  .loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .loading-spinner {
    width: 80rpx;
    height: 80rpx;
    position: relative;
    margin-bottom: 30rpx;
  }
  
  .spinner-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4rpx solid rgba(82, 196, 26, 0.2);
    border-radius: 50%;
  }
  
  .spinner-dot {
    position: absolute;
    top: 0;
    left: 50%;
    width: 12rpx;
    height: 12rpx;
    background: #52c41a;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: spin 1s linear infinite;
  }
  
  .loading-text {
    font-size: 28rpx;
    color: #666;
    font-weight: 500;
  }
  
  /* 错误状态 */
  .error-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f5f5f5;
    z-index: 100;
    padding: 0;
  }
  
  .error-icon {
    width: 180rpx;
    height: 180rpx;
    opacity: 0.3;
    margin-bottom: 30rpx;
  }
  
  .error-text {
    font-size: 30rpx;
    color: #999;
    margin-bottom: 40rpx;
  }
  
  .error-btn {
    font-weight: 500;
    padding: 20rpx 50rpx;
    border-radius: 50rpx;
    box-shadow: 0 8rpx 24rpx rgba(82, 196, 26, 0.3);
  }
  
  /* 商品详情内容 */
  .detail-content {
    padding-bottom: 140rpx; /* 给底部按钮留出空间 */
  }
  
  /* 商品图片区域（占满屏幕） */
  .image-section {
    width: 100%;
    background: white;
  }
  
  .image-container {
    width: 100%;
    height: 750rpx; /* 正方形，占满屏幕宽度 */
    position: relative;
    overflow: hidden;
    background: #f5f5f5;
  }
  
  .product-image {
    width: 100%;
    height: 100%;
  }
  
  /* 库存标签 */
  .kucun-tag {
    position: absolute;
    bottom: 30rpx;
    right: 30rpx;
    padding: 12rpx 24rpx;
    border-radius: 30rpx;
    backdrop-filter: blur(10rpx);
    z-index: 10;
  }
  
  .kucun-normal {
    background: rgba(0, 0, 0, 0.6);
    color: white;
  }
  
  .kucun-none {
    background: rgba(255, 77, 79, 0.8);
    color: white;
  }
  
  .kucun-text {
    font-size: 24rpx;
    font-weight: 500;
  }
  
  /* 下方内容区域（顶部有圆角，与图片重叠一部分） */
  .content-area {
    position: relative;
    background: white;
    border-radius: 40rpx 40rpx 0 0;
    margin-top: -40rpx; /* 与图片重叠一部分，实现平滑过渡 */
    padding: 40rpx 30rpx 0;
    min-height: 400rpx;
  }
  
  /* 标题和价格区域 */
  .title-price-section {
    margin-bottom: 40rpx;
  }
  
  .title-row {
    margin-bottom: 30rpx;
  }
  
  .product-title {
    font-size: 38rpx;
    font-weight: 700;
    color: #222;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  
  /* 价格和销量行 */
  .price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* 价格部分 */
  .price-section {
    display: flex;
    align-items: baseline;
  }
  
  .price-icon {
    font-size: 34rpx;
    color: #ff4d4f;
    font-weight: 600;
  }
  
  .price-integer {
    font-size: 58rpx;
    color: #ff4d4f;
    font-weight: 700;
    margin-left: 4rpx;
  }
  
  .price-decimal {
    font-size: 34rpx;
    color: #ff4d4f;
    font-weight: 600;
  }
  
  /* 销量部分 */
  .sales-section {
    display: flex;
    align-items: center;
  }
  
  .sales-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
    opacity: 0.6;
  }
  
  .sales-text {
    font-size: 28rpx;
    color: #999;
    font-weight: 400;
  }
  
  /* 信息区域（商品介绍、购买须知） */
  .info-section {
    margin-bottom: 40rpx;
    padding-top: 30rpx;
    border-top: 1rpx solid #f0f0f0;
  }
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
  }
  
  .section-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 16rpx;
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #52c41a; /* 绿色 */
  }
  
  .section-content {
    line-height: 1.8;
    padding-left: 52rpx; /* 与图标对齐 */
  }
  
  .content-text {
    font-size: 28rpx;
    color: #333;
    font-weight: 400;
    white-space: pre-line;
    line-height: 1.8;
  }
  
  /* 规则图片区域 */
  .rule-section {
    margin: 40rpx 0;
    padding-top: 30rpx;
    border-top: 1rpx solid #f0f0f0;
  }
  
  .rule-image {
    width: 100%;
    border-radius: 16rpx;
    display: block;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  }
  
  /* 占位区域 */
  .placeholder {
    height: 140rpx;
  }
  
  /* 立即下单按钮容器（固定底部） */
  .order-btn-container {
    background: linear-gradient(transparent, rgba(255, 255, 255, 0.9) 70%);
  }
  
  /* 立即下单按钮 */
  .order-btn {
    border-radius: 50rpx;
    height: 100rpx;
    box-shadow:
      0 12rpx 36rpx rgba(82, 196, 26, 0.4),
      0 4rpx 12rpx rgba(82, 196, 26, 0.3);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  .order-btn:active {
    box-shadow:
      0 6rpx 24rpx rgba(82, 196, 26, 0.5),
      0 2rpx 8rpx rgba(82, 196, 26, 0.4);
  }
  
  /* 按钮发光特效 */
  .btn-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    animation: glowPulse 2s infinite;
  }
  
  /* 按钮流光特效 */
  .btn-streamer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100rpx;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: translateX(-100%);
    animation: streamerFlow 3s infinite;
  }
  
  /* 按钮文字 */
  .btn-text {
    font-size: 36rpx;
    color: white;
    font-weight: 600;
    letter-spacing: 2rpx;
    position: relative;
    z-index: 2;
  }
  
  /* 动画定义 */
  @keyframes glowPulse {
    0%, 100% {
      opacity: 0.5;
    }
    50% {
      opacity: 0.8;
    }
  }
  
  @keyframes streamerFlow {
    0% {
      transform: translateX(-100%);
    }
    50% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(100%);
    }
  }