/* 对齐 client DetailLayout / ProductDetail（版式、色板、动效、轮播与表单） */

.pd-page {
  min-height: 100vh;
  background: #fff;
  color: #111827; /* 避免旧浏览器/变量回退时文字与底同色「看不见」 */
  padding-bottom: 0;
  position: relative;
  /* 高于普通文档层，仍低于 .navbar(50)。z-index:0 在部分与 Swiper/Grid 组合下易造成整行高度异常，主区像「全空」 */
  z-index: 1;
  isolation: isolate;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------- Hero：pt-24 pb-12、from-blue-50/30、双栏 gap-16 ---------- */
.pd-hero {
  position: relative;
  padding: 6rem 0 3rem; /* pt-24 pb-12 */
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(239, 246, 255, 0.3), #fff);
}

@media (min-width: 1024px) {
  .pd-hero { padding-top: 6rem; }
}

.pd-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: #6b7280; /* text-gray-500 */
  margin-bottom: 3rem; /* mb-12 */
}

.pd-breadcrumb a {
  color: #6b7280;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.2s;
}

.pd-breadcrumb a:hover { color: var(--primary); }

.pd-breadcrumb svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.pd-breadcrumb .pd-crumb-sep { color: #d1d5db; /* text-gray-300 */ }

.pd-breadcrumb .pd-current {
  color: #111827; /* text-gray-900 */
  font-weight: 500; /* font-medium */
}

.pd-hero-grid {
  display: grid;
  gap: 2rem; /* 移动端略紧 */
  /* 与 center 不同：首屏双栏在 Swiper 未算出高度前若垂直居中，整行/首列在部分浏览器中会出现高度为 0 的错觉，正文被「挤没」 */
  align-items: start;
  min-width: 0;
}
.pd-hero-grid > * {
  min-width: 0;
}

@media (min-width: 1024px) {
  .pd-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem; /* gap-16 */
  }
}

.pd-hero-top {
  display: flex;
  align-items: center;
  gap: 1rem; /* gap-4 */
  flex-wrap: wrap;
  margin-bottom: 1.5rem; /* mb-6 */
}

.pd-icon-box {
  width: 4rem;  /* w-16 */
  height: 4rem;
  border-radius: 1rem; /* rounded-2xl */
  background: #fff;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(59, 130, 246, 0.06); /* shadow + border-blue-50 感 */
  border: 1px solid #eff6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.pd-icon-box svg { width: 2rem; height: 2rem; }

.pd-badge {
  padding: 0.375rem 1rem; /* py-1.5 px-4 */
  border-radius: 9999px;
  background: #dbeafe; /* blue-100 */
  color: var(--primary);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pd-hero h1 {
  font-size: clamp(2.25rem, 5vw, 3.75rem); /* text-4xl ~ text-6xl 区间 */
  font-weight: 700; /* font-bold，对齐 React */
  color: #111827;
  line-height: 1.1;
  margin-bottom: 1.5rem; /* mb-6 */
  letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .pd-hero h1 { font-size: clamp(2.5rem, 4.5vw, 3.75rem); }
}

.pd-hero-lead {
  font-size: 1.125rem;
  line-height: 1.625; /* leading-relaxed */
  color: #6b7280; /* text-gray-500 */
  max-width: 36rem; /* max-w-xl */
  margin-bottom: 2.5rem; /* mb-10 */
}

@media (min-width: 768px) {
  .pd-hero-lead { font-size: 1.25rem; /* text-xl */ }
}

.pd-hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; /* gap-4 */ }

.pd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem; /* h-14 */
  padding: 0 2rem; /* px-8 */
  font-size: 1.125rem; /* text-lg */
  font-weight: 600;
  border-radius: 0.5rem; /* rounded-lg */
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  border: 1px solid transparent;
  box-sizing: border-box;
  font-family: inherit;
  cursor: pointer;
}

.pd-btn--primary {
  background: var(--primary);
  color: #fff;
  border: 1px solid var(--primary);
  /* shadow-lg + shadow-blue-500/20 */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 8px 20px -6px rgba(37, 99, 235, 0.25);
}

.pd-btn--primary:hover {
  background: #2563eb; /* blue-600 */
  border-color: #2563eb;
  color: #fff;
}

.pd-btn--outline {
  background: #fff;
  color: #374151; /* text-gray-700 */
  border-color: #e5e7eb; /* border-gray-200 */
  border-width: 1px;
}

.pd-btn--outline:hover { background: #f9fafb; }

.pd-btn--outline[disabled],
.pd-btn--outline.pd-btn--disabled {
  opacity: 1; /* 与 React 不可点描边按钮一致，仅去掉交互 */
  cursor: default;
  pointer-events: none;
  color: #374151;
  background: #fff;
  border-color: #e5e7eb;
}

/* ---------- 媒体区：rounded-2xl、shadow-2xl，悬停再显箭头（类 React 单品轮播） ---------- */
.pd-media-wrap { position: relative; }

.pd-media-card {
  position: relative;
  border-radius: 1rem; /* rounded-2xl = 1rem 于 Tailwind 3 */
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
  border: 1px solid #f3f4f6; /* border-gray-100 */
  background: #fff;
  aspect-ratio: 4 / 3;
}

.pd-swiper { width: 100%; height: 100%; }

.pd-swiper .swiper-slide img,
.pd-swiper .swiper-slide video.pd-slide-vid {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  padding: 1rem; /* p-4 */
  display: block;
}

.pd-swiper .swiper-slide video.pd-slide-vid {
  background: #000; /* 视频底略压暗，贴近 React */
}

/* Swiper 导航：圆形白底，默认隐藏，父级悬停现（对齐 group-hover 箭头） */
.pd-media-swiper .swiper-button-prev,
.pd-media-swiper .swiper-button-next {
  width: 2.5rem; /* w-10 */
  height: 2.5rem;
  margin-top: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #1f2937; /* text-gray-800 */
  background: rgba(255, 255, 255, 0.88);
  border-radius: 9999px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  z-index: 3;
}

.pd-media-swiper .swiper-button-prev { left: 1rem; }
.pd-media-swiper .swiper-button-next { right: 1rem; }

.pd-media-swiper .swiper-button-prev::after,
.pd-media-swiper .swiper-button-next::after {
  font-size: 1rem;
  font-weight: 700;
}

.pd-media-wrap:hover .pd-media-swiper .swiper-button-prev,
.pd-media-wrap:hover .pd-media-swiper .swiper-button-next {
  opacity: 1;
}

@media (hover: none) {
  .pd-media-swiper .swiper-button-prev,
  .pd-media-swiper .swiper-button-next { opacity: 0.88; }
}

.pd-media-swiper .swiper-button-prev:hover,
.pd-media-swiper .swiper-button-next:hover {
  background: #fff;
}

.pd-media-swiper .swiper-button-disabled { opacity: 0; pointer-events: none; }

.pd-media-swiper .swiper-pagination {
  bottom: 1rem !important;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  left: 50% !important;
  transform: translateX(-50%);
  width: auto !important;
}

.pd-media-swiper .swiper-pagination-bullet {
  width: 0.5rem; /* w-2 */
  height: 0.5rem;
  margin: 0 0.125rem !important;
  background: rgba(0, 0, 0, 0.28);
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: width 0.2s, background 0.2s, border-color 0.2s;
}

.pd-media-swiper .swiper-pagination-bullet:hover {
  background: rgba(0, 0, 0, 0.4);
}

.pd-media-swiper .swiper-pagination-bullet-active {
  width: 1.5rem; /* 胶囊高亮，对齐 Animate 页内长条点 */
  border-radius: 9999px;
  background: #fff;
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.pd-float-stat {
  position: absolute;
  bottom: -2rem; /* -bottom-8 */
  left: -2rem;  /* -left-8 */
  background: #fff;
  padding: 1.5rem; /* p-6 */
  border-radius: 0.75rem; /* rounded-xl */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  border: 1px solid #f3f4f6; /* border-gray-100 */
  max-width: 20rem; /* max-w-xs 略宽于 xs，保持接近 */
  display: none;
  z-index: 2;
}

@media (min-width: 768px) {
  .pd-float-stat { display: block; }
}

.pd-float-stat-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }

.pd-float-stat-ico {
  width: 2.5rem; /* w-10 */
  height: 2.5rem;
  border-radius: 9999px;
  background: #dcfce7; /* green-100 */
  color: #16a34a; /* green-600 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-float-stat-ico svg { width: 1.25rem; height: 1.25rem; }

.pd-float-stat small { color: #6b7280; font-size: 0.875rem; } /* text-sm */
.pd-float-stat strong { font-size: 1.25rem; font-weight: 700; color: #111827; } /* text-xl font-bold */

.pd-bar {
  height: 0.375rem; /* h-1.5 */
  background: #f3f4f6; /* bg-gray-100 */
  border-radius: 9999px;
  overflow: hidden;
}

.pd-bar > span { display: block; height: 100%; width: 85%; background: #22c55e; border-radius: 9999px; }

/* ---------- 功能栅格：移动 1 列 / 平板 2 列 / 桌面 3 列，卡片 p-6 rounded-xl ---------- */
.pd-section { padding: 3rem 0; } /* py-12 */
.pd-section-title-wrap { text-align: center; max-width: 48rem; margin: 0 auto 3rem; }

.pd-section-title-wrap h2 {
  font-size: 1.875rem; /* text-3xl */
  font-weight: 700;
  color: #111827;
  margin-bottom: 1rem; /* mb-4 */
  letter-spacing: -0.02em; /* tracking-tight */
}

.pd-section-title-wrap p {
  color: #6b7280;
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75;
}

.pd-features-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .pd-features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* gap-6 */
}

@media (min-width: 1024px) {
  .pd-features-grid { gap: 2rem; grid-template-columns: repeat(3, 1fr); } /* lg: 3 列 */
}

.pd-feature {
  background: rgba(249, 250, 251, 0.5); /* bg-gray-50/50 */
  padding: 1.5rem; /* p-6 */
  border-radius: 0.75rem; /* rounded-xl */
  border: 1px solid #f3f4f6; /* border-gray-100 */
  transition: background 0.3s, box-shadow 0.3s, transform 0.3s;
}

.pd-feature:hover {
  background: #fff;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
  transform: translateY(-0.25rem);
}

.pd-feat-ico {
  width: 3rem;  /* w-12 */
  height: 3rem;
  border-radius: 0.75rem; /* rounded-xl */
  background: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem; /* mb-6 */
  color: var(--primary);
}

.pd-feat-ico svg { width: 1.5rem; height: 1.5rem; } /* w-6 h-6 */

.pd-feature h3 {
  font-size: 1.25rem; /* text-xl */
  font-weight: 700; /* font-bold */
  color: #111827;
  margin-bottom: 0.75rem; /* mb-3 */
}

.pd-feature p {
  color: #6b7280;
  font-size: 0.875rem; /* text-sm / 14px */
  line-height: 1.625; /* leading-relaxed */
}

/* ---------- 深色 benefit：双光斑 + 双栏 gap-16 + 统计格 hover 边框（对齐） ---------- */
.pd-benefits { position: relative; }

.pd-benefits-inner {
  position: relative;
  background: #111827; /* bg-gray-900 */
  color: #fff;
  border-radius: 1.5rem; /* rounded-3xl */
  padding: 2rem;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .pd-benefits-inner { padding: 3rem; } /* p-8 md:p-12 */
}

.pd-benefits-inner::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 37.5rem; /* 600px */
  height: 37.5rem;
  background: rgba(37, 99, 235, 0.2); /* blue-600/20 */
  border-radius: 50%;
  filter: blur(100px);
  transform: translate(33%, -50%);
  pointer-events: none;
  z-index: 0;
}

.pd-benefits-inner::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 25rem; /* 400px */
  height: 25rem;
  background: rgba(147, 51, 234, 0.2); /* purple-600/20 */
  border-radius: 50%;
  filter: blur(80px);
  transform: translate(-25%, 33%);
  pointer-events: none;
  z-index: 0;
}

.pd-benefits-grid { display: grid; gap: 2rem; position: relative; z-index: 1; }

@media (min-width: 1024px) {
  .pd-benefits-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem; /* gap-16 */
    align-items: center;
  }
}

.pd-benefits h2 {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 1.5rem; /* mb-6 */
}

@media (min-width: 768px) {
  .pd-benefits h2 { font-size: 2.25rem; } /* text-3xl md:text-4xl */
}

.pd-benefits .pd-ben-lead {
  color: #9ca3af; /* text-gray-400 */
  font-size: 1.125rem; /* text-lg */
  line-height: 1.75;
  margin-bottom: 2.5rem; /* mb-10 */
}

.pd-ben-list { display: flex; flex-direction: column; gap: 1.5rem; } /* space-y-6 */

.pd-ben-item { display: flex; gap: 1rem; } /* gap-4 */

.pd-ben-num {
  width: 3rem;  /* w-12 */
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem; /* text-xl */
  font-weight: 700;
  color: #60a5fa; /* text-blue-400 */
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

.pd-ben-item h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }

.pd-ben-item p {
  color: #9ca3af;
  font-size: 0.8125rem; /* ≈ 13px */
  line-height: 1.625;
}

.pd-stats-card {
  position: relative;
  background: rgba(31, 41, 55, 0.5); /* gray-800/50 */
  border: 1px solid rgba(75, 85, 99, 0.5);
  border-radius: 1rem; /* rounded-2xl */
  padding: 2rem; /* p-8 */
  backdrop-filter: blur(4px);
}

.pd-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* gap-6 */

.pd-stat-cell {
  background: rgba(17, 24, 39, 0.5);
  padding: 1.5rem; /* p-6 */
  border-radius: 0.75rem; /* rounded-xl */
  text-align: center;
  border: 1px solid rgba(55, 65, 81, 0.3);
  transition: border-color 0.25s;
}

.pd-stat-cell:nth-child(1):hover { border-color: rgba(59, 130, 246, 0.35); }
.pd-stat-cell:nth-child(2):hover { border-color: rgba(6, 182, 212, 0.35); }
.pd-stat-cell:nth-child(3):hover { border-color: rgba(250, 204, 21, 0.35); }
.pd-stat-cell:nth-child(4):hover { border-color: rgba(74, 222, 128, 0.35); }

.pd-stat-cell .pd-sv { width: 2rem; height: 2rem; margin: 0 auto 0.75rem; }

.pd-stat-cell .pd-n {
  font-size: 1.5rem; /* text-2xl */
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.pd-stat-cell .pd-l { font-size: 0.875rem; color: #9ca3af; } /* text-sm text-gray-400 */

/* 联系：bg-gray-50、卡片 rounded-2xl、max-w-4xl 居中、输入 ring 与 React 一致 */
.pd-contact { padding: 3rem 0; background: #f9fafb; } /* bg-gray-50 */
.pd-contact .container { max-width: 56rem; } /* max-w-4xl = 56rem */
.pd-contact .pd-form-card {
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

@media (min-width: 768px) {
  .pd-contact .pd-form-card { padding: 3rem; } /* p-8 md:p-12 */
}

.pd-contact h2 { text-align: center; font-size: 1.875rem; font-weight: 700; color: #111827; margin-bottom: 1rem; }

.pd-contact .pd-form-desc { text-align: center; color: #6b7280; margin-bottom: 2.5rem; } /* mb-10 */

.pd-form .pd-form-row { margin-bottom: 0; }
.pd-form .pd-form-field { margin-bottom: 1.5rem; } /* space-y-6 节奏 */

.pd-form-row { display: grid; gap: 1.5rem; }

@media (min-width: 768px) {
  .pd-form-row.pd-2 { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.pd-form-field label { display: block; font-size: 0.875rem; font-weight: 500; color: #374151; margin-bottom: 0.5rem; }

.pd-form-field .pd-form-field-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.5rem;
}

/* 勿对 radio/checkbox 设 width:100%，否则预算选项 flex 内单选占满一行、文字竖排 */
.pd-form-field input:not([type="radio"]):not([type="checkbox"]),
.pd-form-field textarea,
.pd-form-field select.pd-form-select {
  width: 100%;
  padding: 0.75rem 1rem; /* py-3 px-4 */
  border-radius: 0.5rem; /* rounded-lg */
  border: 1px solid #e5e7eb; /* border-gray-200 */
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pd-form-field input:not([type="radio"]):not([type="checkbox"]):focus,
.pd-form-field textarea:focus,
.pd-form-field select.pd-form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 235, 0.2); /* focus:ring-2 ring-primary/20 */
}

.pd-form-field textarea { min-height: 8rem; resize: none; } /* h-32 */

.pd-interest-block .pd-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1rem;
}

@media (min-width: 768px) {
  .pd-interest-block .pd-check-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.pd-check-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
}

.pd-check-item input { width: 1rem; height: 1rem; flex-shrink: 0; }

.pd-form-submit {
  width: 100%;
  min-height: 3rem; /* h-12 */
  font-size: 1.125rem; /* text-lg */
  font-weight: 500;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 0.5rem; /* rounded-lg */
  cursor: pointer;
  margin-top: 0.25rem;
  transition: background 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.pd-form-submit:hover { background: #2563eb; }

/* -------------------------------------------------------------------------
   AOS：未触发 aos-animate 时 [data-aos] 在 aos.css 中常为 opacity:0，导致整段内容「看不见」
   产品页不依赖 AOS 才能显示；若仍保留 data-aos，此规则保证默认可见
   ------------------------------------------------------------------------- */
.pd-page [data-aos] {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}