/* ==========================================
   产品详情页 Hero · 优化版（回应客户反馈）
   ========================================== */

/* ✅ 桌面端轮播区域高度：从 560~680 降到 420~520 */
#productCarouselDesktop {
    height: 100%;
    min-height: 420px;   /* ✅ 降低 */
    max-height: 520px;   /* ✅ 降低，产品更突出 */
}

/* ✅ 图片固定高度包装器 */
.carousel-img-fixed-wrapper {
    width: 100%;
    height: 100%;
    min-height: 420px;
    max-height: 520px;   /* ✅ 同步降低 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12px;  /* ✅ 加圆角，视觉更精致 */
}

/* ✅ 图片：偏上对齐，让起重机主体（通常在画面上方）更突出 */
.carousel-img-fixed-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;  /* ✅ 从 40% 提到 30%，更靠上 */
    display: block;
}

/* ✅ 悬浮微微放大，增加质感 */
.carousel-img-fixed-wrapper:hover img {
    transform: scale(1.02);
}

/* ✅ 移动端轮播高度锁定 */
.carousel-img-wrapper-mobile {
    height: 300px; /* 移动端固定高度 */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-img-wrapper-mobile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== 左侧卡片样式（保持之前优化） ===== */
.product-info-card {
    display: flex;
    flex-direction: column;
}

.product-main-title {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.2;
    color: #111;
    margin-bottom: 2rem;
}

.industry-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.industry-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #555;
    background: #f5f5f5;
    padding: 6px 12px;
    border-radius: 20px;
}

.industry-icon {
    width: 24px;
    height: 24px;
    opacity: 0.85;
}

.short-desc-box {
    background-color: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid #eee;
    flex-grow: 1;
    display: flex;
    align-items: flex-start;
}

.short-desc-text {
    font-size: 1rem;
    line-height: 1.9;
    color: #333;
    margin-bottom: 0;
    word-break: break-word;
    hyphens: auto;
}

/* ===== 响应式优化 ===== */
@media (max-width: 991.98px) {
    .product-info-card {
        height: auto;
        margin-bottom: 2rem;
    }

    .product-main-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    .short-desc-box {
        padding: 1.5rem;
    }

    .short-desc-text {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .carousel-img-wrapper-mobile {
        height: 280px;
    }
}

@media (max-width: 575.98px) {
    .carousel-img-wrapper-mobile {
        height: 240px;
    }

    .product-main-title {
        font-size: 1.35rem;
    }
}


/* ========== Features 文字放大优化（终局版） ========== */

.pd-features-section {
    background: #f8f9fa;
}

/* ✅ 卡片整体：增加呼吸感 */
.feature-card {
    background: #fff;
    border-radius: 16px; /* 稍大圆角更现代 */
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}

/* ✅ 文字区域：加大内边距，撑起内容 */
.feature-text {
    padding: 56px 64px; /* ✅ 原40px → 56/64px */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* ✅ 标题：显著放大 + 左侧品牌红线（核心优化） */
.feature-title {
    font-size: 2rem;           /* ✅ 原22px → 32px (2rem) */
    font-weight: 700;          /* ✅ 更粗 */
    color: #111;               /* ✅ 纯黑，对比度更强 */
    line-height: 1.3;
    margin-bottom: 1.5rem;     /* ✅ 增加与描述的间距 */
    letter-spacing: -0.02em;   /* 字间距微调，更精致 */

    /* ✅ 左侧装饰红线 */
    border-left: 5px solid #e63946;
    padding-left: 1.25rem;

    display: flex;
    align-items: center;
}

/* ✅ 序号样式（配合放大后的标题） */
.feature-index {
    color: #e63946;
    font-weight: 800;
    margin-right: 0.75rem;
    opacity: 0.9;
    font-size: 2rem; /* 序号与标题等大 */
}

/* ✅ 描述文字：放大 + 加行高（解决“嫌小”的关键） */
.feature-desc {
    font-size: 1.05rem;        /* ✅ 原14px → 17px (1.05rem) */
    color: #444;               /* ✅ 稍深，更易读 */
    line-height: 1.9;          /* ✅ 增加行高，解决拥挤感 */
    margin-bottom: 2rem;       /* ✅ 增加与按钮的间距 */

    /* ✅ 防止长单词（如俄语）撑破布局 */
    word-break: break-word;
    hyphens: auto;
}

/* ✅ 按钮：加大一点，更有存在感 */
.btn-talk {
    align-self: flex-start;
    padding: 12px 28px;        /* ✅ 加大点击区域 */
    border: 2px solid #e63946; /* ✅ 加粗边框 */
    color: #e63946;
    background: transparent;
    border-radius: 6px;
    font-size: 0.95rem;        /* ✅ 字体稍大 */
    font-weight: 600;
    transition: all .3s ease;
}
.btn-talk:hover {
    background: #e63946;
    color: #fff;
    box-shadow: 0 6px 20px rgba(230,57,70,0.25);
    transform: translateY(-2px);
}

/* ✅ 图片：确保填满右侧，不变形 */
.feature-image {
    height: 100%;
    min-height: 400px; /* 保证即使文字少也有足够高度 */
    background-color: #f0f0f0; /* ✅ 灰色，和图片边缘融为一体 */
}
.feature-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    vertical-align: bottom; /* ✅ 消除基线空隙 */
}

/* =========================
   响应式优化（平板 & 手机）
   ========================= */
@media (max-width: 991.98px) {
    .feature-text {
        padding: 36px 32px; /* 平板适当减少内边距 */
    }
    .feature-title {
        font-size: 1.6rem; /* 平板缩小 */
        padding-left: 1rem;
        border-left-width: 4px;
    }
    .feature-index {
        font-size: 1.6rem;
    }
    .feature-desc {
        font-size: 1rem; /* 平板保持易读 */
    }
}

@media (max-width: 768px) {
    .feature-text {
        padding: 28px 24px; /* 手机端内边距 */
    }
    .feature-title {
        font-size: 1.4rem; /* 手机端标题 */
        padding-left: 0.75rem;
    }
    .feature-index {
        font-size: 1.4rem;
    }
    .feature-desc {
        font-size: 0.95rem;
        line-height: 1.8;
    }
    .feature-image {
        min-height: 260px; /* ✅ 稍微降低，减少与图片实际高度的差值 */
    }
    .feature-image img {
        border-radius: 0 0 12px 12px; /* ✅ 底部圆角，和白框视觉上融合 */
    }
}

/* 卡片整体浮动 */
.feature-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.10);
}


/*第三行产品优势*/
/* =========================
   产品优势：与 Features 宽度一致
   ========================= */
.advantage-img-wrapper {
  background: #f8f9fa;
  padding: 20px; /* 四周留白，防止贴边 */
}
.advantage-img-wrapper img {
  width: 100%;       /* 撑满卡片宽度 */
  height: auto;      /* 保持原始比例，不拉伸 */
  display: block;
  max-height: none !important; /* 强制解除高度限制 */
  object-fit: unset !important; /* 强制关闭裁剪/适应算法 */
}

.advantages-section {
  background: #f8f9fa; /* 和 .pd-features-section 一致 */
}

/* 优势卡片：去掉 padding，模仿 feature-card */
.advantage-card {
  background: #fff;
  border-radius: 12px; /* 和 feature-card 一致 */
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.06); /* 和 feature-card 一致 */
  border: none;
}

/* 文字区：padding 与 feature-text 对齐 */
.advantage-card .advantage-caption {
  padding: 24px 40px; /* ✅ 与 .feature-text 接近 */
  text-align: center;
}

/* 编号 */
.advantage-card .advantage-number {
  font-size: 3.5rem;
  font-weight: 700;
  color: #e63946;
  opacity: 0.25;
  margin-bottom: 8px;
}

/* 标题 */
.advantage-card .advantage-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: #222;
  line-height: 1.6;
}

/* 编号 */
.advantage-number {
  font-size: 2rem;
  font-weight: 700;
  color: #e63946;
  opacity: 0.8;
  line-height: 1;
  margin-bottom:  0.75rem;
}

/* 文字 */
.advantage-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: #111;
  line-height: 1.5;
    /* ✅ 核心：允许单词内换行，防止长英文/俄语撑破卡片 */
    word-break: break-word;
    hyphens: auto;
}

/* 栅格间距（Bootstrap 5 原生支持） */
/*.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }*/
/*.row-cols-lg-6 > .col { flex: 0 0 auto; width: 16.666%; }*/

/* 独立文字框 */
.advantage-item-box {
background: #fff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 1.5rem 1rem;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
display: flex;
flex-direction: column;
    align-items: center;

}
.advantage-item-box:hover {
  transform: translateY(-4px);
  /*box-shadow: 0 12px 24px rgba(230, 57, 70, 0.15);*/
    box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    border-color: #d32f2f; /* 配合品牌红 */
}

/* 防止手机端卡片太窄 */
@media (max-width: 575.98px) {
  .advantage-item-box {
    padding: 2rem 1.5rem; /* 手机端稍微宽一点 */
  }

  .advantage-number {
    font-size: 2.5rem; /* 手机上别太小 */
  }

  .advantage-text {
    font-size: 0.95rem; /* 手机上别太细 */
  }
}



/* ===============================
   消除左右分离感（核心）
   =============================== */
/* 1. 左侧整体“沉”进背景 */
.specs-sidebar {
  background-color: #f8f9fa;   /* 和页面背景一致 */
  padding: 1.5rem 1rem;
  border-radius: 0.75rem;
}

/* 2. 左侧卡片弱化阴影，靠近背景 */
.specs-box {
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: none;
}

/* 3. 右侧轮播“浮”出来 */
#productCarousel {
  border-radius: 1rem;
  overflow: hidden;
}

/* 4. 缩小左右间距（关键） */
.hero-section .row {
  --bs-gutter-x: 1.5rem; /* 原来是 g-5，太大 */
}

/* 5. 小图去“鲜艳”，接近同行工业风 */
.specs-box img {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.specs-box:hover img {
  opacity: 1;
}

/* 6. 标题更“重”，压得住右侧大图 */
.specs-sidebar h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  color: #212529;
}

/* 7. 右侧图片更“稳” */
.carousel-img-wrapper {
  height: 420px;
  background-color: #f5f5f5;
}

.carousel-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 8. 控制按钮更精致 */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  width: 2.5rem;
  height: 2.5rem;
}


/* ===============================
   第四行参数表 解决表格溢出导致整页滑动
   =============================== */
.table-wrapper {
  overflow-x: auto; /* 核心：允许内部横向滚动 */
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动 */
  margin: 0 -15px; /* 抵消 container 的 padding，让表格贴边 */
  padding: 0 15px; /* 补偿 margin 的负边距，保持内容不贴边 */
}

/* 针对移动端优化 */
@media (max-width: 768px) {
  .table-wrapper {
    margin: 0 -1rem; /* Bootstrap 的 gutter */
    padding: 0 1rem;
  }
}

/*第一行*/
@media (max-width: 991.98px) {
  .specs-sidebar {
    margin-top: 1.5rem;
  }
}

@media (max-width: 991.98px) {
  .sticky-top {
    position: relative;
    top: 0 !important;
  }
}


/* =========================
   产品详情页：更宽的容器
    ✅ 大屏极宽
    ✅ 小屏自动收窄
    ✅ 苹果 / 特斯拉官网常用
   ========================= */
.product-detail-container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (max-width: 768px) {
  .product-detail-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}