/**
 * 产品中心 - 与 products 文件夹（Home.tsx / ProductDetail.tsx）一比一复刻
 * 仅导航栏使用 网站 的 styles.css（与 news 一致），其余布局与样式完全保持 products 原样
 */

/* 避免被通用 style.css 的浅色主题覆盖 */
html,
body {
  background-color: #121212 !important;
}

body {
  color: #fff;
}

/* ========== 列表页（对应 Home.tsx）========== */
.prod-list-page {
  background-color: #121212;
  min-height: 100vh;
  padding-bottom: 5rem;
}

#products-list-page,
.prod-header,
.prod-feature,
.prod-grid-section {
  background-color: #121212;
}

/* 导航栏以下内容：由 styles.css 提供 body padding-top: 90px，此处不覆盖 */
.prod-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .prod-container {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

@media (min-width: 1024px) {
  .prod-grid-section .prod-container {
    padding-left: 12rem;
    padding-right: 12rem;
  }
}

/* Hero - relative w-full bg-zinc-900, img opacity-80, gradient overlay */
.prod-hero {
  position: relative;
  width: 100%;
  background-color: #18181b;
}

.prod-hero-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  opacity: 0.8;
  display: block;
}

.prod-hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #121212, transparent 50%, transparent);
  pointer-events: none;
}

/* Product Center Header - pt-16 pb-12, watermark text-6xl md:text-9xl, title text-3xl md:text-4xl */
.prod-header {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 3rem;
  overflow: hidden;
}

.prod-header-inner {
  text-align: center;
}

.prod-title-wrap {
  position: relative;
  display: inline-block;
}

.prod-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.75rem;
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  opacity: 0.2;
  pointer-events: none;
  user-select: none;
}

@media (min-width: 768px) {
  .prod-watermark {
    font-size: 8rem;
  }
}

.prod-title {
  position: relative;
  font-size: 1.875rem;
  font-weight: bold;
  color: #fff;
  z-index: 10;
}

@media (min-width: 768px) {
  .prod-title {
    font-size: 2.25rem;
  }
}

.prod-title-line {
  position: relative;
  height: 4px;
  width: 3rem;
  background: #fff;
  margin: 1rem auto 0;
  z-index: 10;
}

/* Feature - flex gap-12 max-w-6xl, image border white/20, hidden md:block */
.prod-feature {
  margin-bottom: 5rem;
}

.prod-feature-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .prod-feature-inner {
    flex-direction: row;
  }
}

.prod-feature-img-wrap {
  position: relative;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: none;
}

@media (min-width: 768px) {
  .prod-feature-img-wrap {
    display: block;
  }
}

.prod-feature-img-inner {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px;
}

.prod-feature-img {
  width: 16rem;
  height: auto;
  object-fit: cover;
  opacity: 0.8;
  display: block;
}

.prod-feature-text {
  flex: 1;
  max-width: 42rem;
  text-align: center;
}

@media (min-width: 768px) {
  .prod-feature-text {
    text-align: left;
  }
}

.prod-feature-heading {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.prod-feature-desc {
  color: #9ca3af;
  line-height: 1.625;
  font-size: 0.875rem;
}

@media (min-width: 768px) {
  .prod-feature-desc {
    font-size: 1rem;
  }
}

/* Product Grid - grid-cols-1 sm:2 lg:3 gap-6, card group hover:-translate-y-2 */
.prod-grid-section {
  padding-bottom: 5rem;
}

/* 仅放大“产品列表卡片”区域：保留左右边距，但给更大的可用宽度 */
.prod-grid-section .prod-container {
  max-width: 1400px;
}

.prod-grid-inner {
  padding-left: 2rem;
  padding-right: 2rem;
}

@media (min-width: 768px) {
  .prod-grid-inner {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}

@media (min-width: 1024px) {
  .prod-grid-inner {
    padding-left: 12rem;
    padding-right: 12rem;
  }
}

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

@media (min-width: 640px) {
  .prod-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .prod-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card - bg-white p-4 hover:-translate-y-2, aspect-square, overlay translate-y-full group-hover:translate-y-0 */
.prod-card {
  display: block;
  background: #fff;
  padding: 1rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s ease;
}

.prod-card:hover {
  transform: translateY(-0.5rem);
}

.prod-card-img-wrap {
  aspect-ratio: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: #f3f4f6;
}

.prod-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.prod-card:hover .prod-card-img {
  transform: scale(1.05);
}

.prod-card-overlay {
  position: absolute;
  inset: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.prod-card-overlay-inner {
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  padding: 8px;
  text-align: center;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.prod-card:hover .prod-card-overlay-inner {
  transform: translateY(0);
}

.prod-card-overlay-text {
  color: #22d3ee;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
}

.prod-card-footer {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
  min-height: 5rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.prod-card-title {
  font-size: 0.875rem;
  font-weight: bold;
  color: #111827;
  text-align: center;
  line-height: 1.375;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  margin: 0;
  /* 取消截断：让标题完整显示 */
  display: block;
  overflow: visible;
  white-space: normal;
  transition: color 0.3s;
}

@media (min-width: 768px) {
  .prod-card-title {
    font-size: 1rem;
  }
}

/* 标题更长时给更多高度，避免挤压布局 */
.prod-card-footer {
  min-height: 6.5rem;
}

.prod-card:hover .prod-card-title {
  color: #0e7490;
}

/* ========== 详情页（对应 ProductDetail.tsx）========== */
.prod-detail-page {
  background-color: #f3f4f6;
  min-height: 100vh;
  color: #1f2937;
  padding: 3rem 0 4rem;
}

.prod-detail-back-wrap {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem 1rem;
}

.prod-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 0;
  transition: color 0.2s;
}

.prod-back-btn:hover {
  color: #dc2626;
}

.prod-back-btn i {
  transition: transform 0.2s;
}

.prod-back-btn:hover i {
  transform: translateX(-4px);
}

.prod-detail-content {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1rem;
}

/* 详情主盒子 - bg-white shadow-2xl rounded-sm border border-gray-200 */
.prod-detail-box {
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.prod-detail-top {
  padding: 2rem 1.5rem 0;
}

@media (min-width: 768px) {
  .prod-detail-top {
    padding: 3rem 3rem 0;
  }
}

@media (min-width: 1024px) {
  .prod-detail-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

/* 主图 aspect-[4/3] */
.prod-detail-main {
  position: relative;
}

.prod-detail-img-wrap {
  aspect-ratio: 4/3;
  width: 100%;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.prod-detail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 缩略图 w-20 h-20 border-2 border-cyan-600 */
.prod-detail-thumbs {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.prod-detail-thumb {
  width: 5rem;
  height: 5rem;
  border: 1px solid #d1d5db;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
}

.prod-detail-thumb:hover,
.prod-detail-thumb-active {
  border-width: 2px;
  border-color: #0891b2;
  opacity: 1;
}

.prod-detail-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右侧信息 */
.prod-detail-info {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}

@media (min-width: 1024px) {
  .prod-detail-info {
    margin-top: 0;
  }
}

.prod-detail-title {
  font-size: 1.875rem;
  font-weight: bold;
  color: #111827;
  line-height: 1.25;
  margin-bottom: 1.5rem;
}

.prod-detail-share {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #6b7280;
  font-size: 0.875rem;
  border: 1px solid #d1d5db;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background: none;
  cursor: pointer;
  margin-bottom: 1.5rem;
  transition: color 0.2s;
}

.prod-detail-share:hover {
  color: #1f2937;
}

.prod-detail-price-wrap {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
}

.prod-detail-price {
  font-size: 1.875rem;
  font-weight: bold;
  color: #111827;
  margin: 0 0 0.25rem 0;
}

.prod-detail-price-old {
  font-size: 0.875rem;
  font-weight: normal;
  color: #9ca3af;
  text-decoration: line-through;
  margin-left: 0.5rem;
}

.prod-detail-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: #2b2b2b;
  color: #fff;
  padding: 1rem 2rem;
  font-size: 1.125rem;
  font-weight: bold;
  text-decoration: none;
  width: 100%;
  transition: background 0.2s;
}

@media (min-width: 768px) {
  .prod-detail-cta {
    width: auto;
    align-self: flex-start;
  }
}

.prod-detail-cta:hover {
  background: #000;
}

/* Tabs - border-t border-gray-200, tab border-t-2 border-black */
.prod-detail-tabs {
  border-top: 1px solid #e5e7eb;
  margin-top: 3rem;
}

.prod-detail-tab-head {
  padding: 0 2rem 0 3rem;
}

@media (max-width: 767px) {
  .prod-detail-tab-head {
    padding: 0 1rem;
  }
}

.prod-detail-tab-active {
  display: inline-block;
  border-top: 2px solid #000;
  padding: 1rem 2rem;
  margin-top: -1px;
  background: #fff;
  font-weight: bold;
  color: #000;
}

.prod-detail-tab-body {
  padding: 2rem 1.5rem 3rem;
}

@media (min-width: 768px) {
  .prod-detail-tab-body {
    padding: 2rem 3rem 3rem;
  }
}

.prod-detail-h2 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #1f2937;
  margin-bottom: 1rem;
}

.prod-detail-section {
  margin-bottom: 2rem;
}

.prod-detail-h3 {
  font-size: 1.125rem;
  font-weight: bold;
  color: #111827;
  margin-bottom: 0.75rem;
  border-left: 4px solid #0891b2;
  padding-left: 0.75rem;
}

.prod-detail-desc {
  color: #4b5563;
  line-height: 1.625;
  margin-bottom: 1.5rem;
}

.prod-detail-rich {
  margin-top: 2rem;
}

.prod-detail-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
}

.prod-detail-figure .prod-detail-fig-inner {
  border: 1px solid #e5e7eb;
  padding: 8px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  width: auto;
  max-width: 800px; /* Limit maximum width for better visual coordination */
  margin: 0 auto;
}

.prod-detail-figure-img {
  position: relative;
  /* aspect-ratio: 2/1; Removed to allow full image display */
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  overflow: hidden;
  height: auto;
  display: flex;
  justify-content: center;
}

.prod-detail-figure-img img {
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  opacity: 1;
  display: block;
}

.prod-detail-figcap {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
  text-align: center;
}

.prod-detail-rich-text {
  color: #4b5563;
  margin: 1rem 0;
}

.prod-detail-rich-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* Diagram 2 - angle diagram with triangles */
.prod-detail-diagram2 {
  width: 100%;
  max-width: 32rem;
  border: 1px solid #e5e7eb;
  padding: 1rem;
  background: #fff;
  margin: 0 auto;
}

.prod-detail-diagram2-inner {
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid #f3f4f6;
  position: relative;
}

.prod-detail-diagram2-square {
  position: absolute;
  inset: 2.5rem;
  border: 1px solid #000;
}

.prod-detail-diagram2-triangle-top,
.prod-detail-diagram2-triangle-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

.prod-detail-diagram2-triangle-top {
  top: 2.5rem;
  border-top: 100px solid rgba(0, 0, 0, 0.1);
}

.prod-detail-diagram2-triangle-bottom {
  bottom: 2.5rem;
  border-bottom: 100px solid rgba(0, 0, 0, 0.1);
}

.prod-detail-diagram2-label-left {
  position: absolute;
  top: 50%;
  left: 2.5rem;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 0.875rem;
  color: #6b7280;
}

.prod-detail-diagram2-label-right {
  position: absolute;
  top: 50%;
  right: 2.5rem;
  transform: translateY(-50%) rotate(90deg);
  font-size: 0.875rem;
  color: #6b7280;
}

/* Table - border border-gray-300 thead bg-gray-100 */
.prod-detail-table-wrap {
  overflow-x: auto;
}

.prod-detail-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #d1d5db;
  font-size: 0.875rem;
}

.prod-detail-table th,
.prod-detail-table td {
  border: 1px solid #d1d5db;
  padding: 0.5rem 1rem;
  text-align: left;
}

.prod-detail-table thead {
  background: #f3f4f6;
}

.prod-detail-table th {
  font-weight: 500;
  color: #374151;
}

.prod-detail-table td {
  color: #4b5563;
}

.prod-detail-table td:first-child,
.prod-detail-table th:nth-child(4) {
  text-align: left;
}

/* Block diagram - grid-cols-3 green/blue/orange/purple */
.prod-detail-block-wrap {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 2rem;
  display: flex;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.prod-detail-block {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 32rem;
  width: 100%;
  font-size: 0.75rem;
  text-align: center;
}

.prod-detail-block-item {
  padding: 0.5rem;
  border-radius: 4px;
}

.prod-detail-block-item-1,
.prod-detail-block-item-2,
.prod-detail-block-item-3 {
  background: #dcfce7;
  border: 1px solid #86efac;
}

.prod-detail-block-main {
  grid-column: 2;
  grid-row: 1 / 4;
  background: #dbeafe;
  border: 1px solid #60a5fa;
  padding: 1rem;
  font-weight: bold;
  font-size: 1.125rem;
  color: #1e40af;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.prod-detail-block-item-4,
.prod-detail-block-item-5 {
  background: #ffedd5;
  border: 1px solid #fdba74;
}

.prod-detail-block-item-6 {
  background: #f3e8ff;
  border: 1px solid #c4b5fd;
}

.prod-detail-block-figcap {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
}

/* 浮动按钮 */
.prod-fab-wrap {
  position: fixed;
  right: 1.5rem;
  bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  z-index: 40;
}

.prod-fab {
  width: 3rem;
  height: 3rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4b5563;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 1rem;
}

.prod-fab:hover {
  color: #ef4444;
  transform: scale(1.1);
}

.prod-fab-top {
  background: #333;
  color: #fff;
  border-radius: 2px;
}

.prod-fab-top:hover {
  background: #dc2626;
}

/* 页脚（与 news 一致，便于 products 页独立使用） */
.news-footer {
  background-color: #000;
  padding: 2rem 0;
}

.news-footer-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
  text-align: center;
}

.news-footer-content p {
  color: #9ca3af;
  font-size: 0.75rem;
  letter-spacing: -0.025em;
}

/* 新增样式支持 */
.prod-detail-h4 {
  font-size: 1rem;
  font-weight: bold;
  color: #374151;
  margin-bottom: 0.5rem;
  margin-top: 1rem;
}

.prod-detail-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.prod-detail-list li {
  margin-bottom: 0.5rem;
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.6;
}