:root {
  --color-bg: rgb(255, 255, 255);
  --color-surface: rgb(255, 255, 255);
  --color-surface-alt: rgb(246, 246, 246);
  --color-text: rgb(0, 0, 0);
  --color-muted: rgb(102, 96, 86);
  --color-primary: rgb(0, 0, 0);
  --color-primary-hover: rgb(51, 51, 51);
  --color-primary-soft: rgb(235, 231, 224);
  --color-accent: rgb(138, 124, 104);
  --color-on-accent: rgb(255, 255, 255);
  --color-border: rgb(216, 216, 214);
  --color-success: rgb(44, 122, 82);
  --color-danger: rgb(176, 60, 60);
  --color-warning: rgb(196, 142, 42);
  --color-overlay: rgba(30, 26, 20, 0.55);
  --color-shadow: rgba(0, 0, 0, 0.08);
  --color-shadow-strong: rgba(0, 0, 0, 0.16);
  --color-header-bg: rgba(255, 255, 255, 0.95);
  --color-footer-bg: rgb(255, 255, 255);
  --color-footer-text: rgb(0, 0, 0);
  --color-admin-bg: rgb(24, 24, 24);
  --color-admin-text: rgb(228, 219, 207);
  --color-white: rgb(255, 255, 255);
  --color-ink: rgb(0, 0, 0);
  --color-track: rgba(0, 0, 0, 0.15);
  --radius-lg: 16px;
  --radius-md: 10px;
  --radius-sm: 6px;
  --max-width: 1200px;
  --header-height: 76px;
}

[data-theme="dark"] {
  --color-bg: rgb(24, 20, 17);
  --color-surface: rgb(36, 30, 25);
  --color-surface-alt: rgb(45, 38, 32);
  --color-text: rgb(240, 233, 223);
  --color-muted: rgb(175, 161, 144);
  --color-primary: rgb(206, 150, 100);
  --color-primary-hover: rgb(224, 175, 130);
  --color-primary-soft: rgb(64, 50, 38);
  --color-accent: rgb(214, 176, 112);
  --color-on-accent: rgb(35, 28, 22);
  --color-border: rgb(72, 61, 51);
  --color-success: rgb(94, 178, 132);
  --color-danger: rgb(224, 112, 112);
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-shadow-strong: rgba(0, 0, 0, 0.55);
  --color-header-bg: rgba(36, 30, 25, 0.94);
  --color-footer-bg: rgb(18, 15, 12);
  --color-footer-text: rgb(214, 204, 190);
  --color-track: rgba(206, 150, 100, 0.25);
}

/* 黑白配色主题 */
[data-theme="bw"] {
  --color-bg: rgb(255, 255, 255);
  --color-surface: rgb(255, 255, 255);
  --color-surface-alt: rgb(245, 245, 245);
  --color-text: rgb(0, 0, 0);
  --color-muted: rgb(102, 102, 102);
  --color-primary: rgb(0, 0, 0);
  --color-primary-hover: rgb(51, 51, 51);
  --color-primary-soft: rgb(240, 240, 240);
  --color-accent: rgb(0, 0, 0);
  --color-on-accent: rgb(255, 255, 255);
  --color-border: rgb(204, 204, 204);
  --color-success: rgb(0, 128, 0);
  --color-danger: rgb(178, 34, 34);
  --color-shadow: rgba(0, 0, 0, 0.12);
  --color-shadow-strong: rgba(0, 0, 0, 0.25);
  --color-header-bg: rgba(255, 255, 255, 0.96);
  --color-footer-bg: rgb(0, 0, 0);
  --color-footer-text: rgb(255, 255, 255);
  --color-track: rgba(0, 0, 0, 0.15);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7;
  overflow-x: hidden;
  transition: background-color 0.25s ease, color 0.25s ease;
}

@media (min-width: 1024px) {
  body {
    zoom: 1.1;
  }
}

img,
video {
  max-width: 100%;
  display: block;
}

/* 防止长文本/内容把两栏布局撑出屏幕（尤其手机端） */
p,
h1,
h2,
h3,
h4,
li,
td,
th,
summary,
.rich-content,
.case-body,
.detail-body,
.media-text,
.history-text,
.dept-info {
  overflow-wrap: break-word;
}

.media-text > *,
.history-item > *,
.dept-row > *,
.detail-layout > *,
.catalog-layout > *,
.case-card > *,
.mc-card > * {
  min-width: 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

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

button {
  font-family: inherit;
  cursor: pointer;
}

input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
  width: 100%;
}

.section {
  padding: 76px 0;
}

.section-alt {
  background-color: var(--color-surface-alt);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 44px;
}

.section-head h2 {
  font-size: 2rem;
  color: var(--color-text);
  margin-bottom: 12px;
}

.section-head p {
  color: var(--color-muted);
  font-size: 1.05rem;
}

.eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.82rem;
  margin-bottom: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.2s ease;
  line-height: 1.2;
}

.btn-primary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn-primary:hover {
  background-color: var(--color-text);
  color: var(--color-white);
  border-color: var(--color-text);
}

.btn-outline {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-outline:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.btn-light {
  background-color: var(--color-white);
  color: var(--color-primary);
}

.btn-light:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-primary-hover);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 0.88rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
}

.header-inner {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* 桌面端顺序：logo → nav → tools */
@media (min-width: 761px) {
  .brand { order: 0; }
  .main-nav { order: 1; }
  .nav-tools { order: 2; }
}

.brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
}

.brand-name {
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--color-text);
  white-space: nowrap;
}

.main-nav {
  margin-left: auto;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-list > li {
  position: relative;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 12px;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px var(--color-shadow-strong);
  list-style: none;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.18s ease;
}

.has-dropdown:hover > .dropdown,
.has-dropdown.open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.92rem;
}

.dropdown a:hover {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.has-sub-dropdown {
  position: relative;
}

.sub-arrow {
  float: right;
  color: var(--color-muted);
  font-size: 0.7rem;
}

.sub-dropdown {
  position: absolute;
  top: 0;
  left: 100%;
  min-width: 200px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 34px var(--color-shadow-strong);
  list-style: none;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: all 0.18s ease;
}

.has-sub-dropdown:hover .sub-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lang-select {
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.theme-toggle,
.burger {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 1.05rem;
}

.theme-toggle:hover,
.burger:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.theme-toggle .icon-sun {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: inline;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

.burger {
  display: none;
}

.mobile-menu {
  display: none;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-surface);
  padding: 10px 20px 18px;
}

.mobile-menu.open {
  display: block;
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.mobile-menu ul {
  list-style: none;
}

.mobile-menu .nav-link {
  border-bottom: none;
  padding: 12px 4px;
}

.m-nav {
  list-style: none;
}

.m-nav-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: var(--color-text);
  font-size: 0.98rem;
  text-align: left;
}

.m-chevron {
  display: inline-block;
  color: var(--color-muted);
  font-size: 0.8rem;
}

.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: var(--color-white);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media video,
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-overlay), rgba(35, 25, 17, 0.25));
}

/* 首页 Banner 轮播 */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-overlay), rgba(35, 25, 17, 0.25));
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.28);
  color: var(--color-white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background 0.3s, border-color 0.3s;
}

.hero-arrow:hover {
  background: rgba(0, 0, 0, 0.55);
  border-color: var(--color-white);
}

.hero-prev {
  left: clamp(12px, 3vw, 32px);
}

.hero-next {
  right: clamp(12px, 3vw, 32px);
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 10px;
}

.hero-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: width 0.3s, background 0.3s;
}

.hero-dot.is-active {
  width: 28px;
  border-radius: 5px;
  background: var(--color-white);
}

.hero-inner {
  position: relative;
  z-index: 2;
  padding: 90px 20px;
}

.hero-content {
  max-width: 660px;
}

.hero-badge {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: 3.2rem;
  line-height: 1.18;
  margin-bottom: 20px;
}

.hero p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.page-hero {
  position: relative;
  background-color: var(--color-primary-soft);
  background-image: linear-gradient(100deg, rgba(26, 20, 14, 0.72), rgba(26, 20, 14, 0.42)), url("https://pub-57faa74f256e437e960631d96c4bbf36.r2.dev/uploads/%E5%B7%A5%E5%8E%82%E5%BC%BA%E9%A1%B9.png");
  background-size: cover;
  background-position: center;
  padding: 64px 0 54px;
  text-align: center;
  color: var(--color-white);
}

.page-hero h1 {
  font-size: 2.4rem;
  margin-bottom: 12px;
  color: var(--color-white);
}

.page-hero p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 720px;
  margin: 0 auto;
}

.page-hero .breadcrumb,
.page-hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.82);
}

.page-hero .breadcrumb a:hover {
  color: var(--color-accent);
}

.breadcrumb {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.88rem;
  color: var(--color-muted);
  margin-top: 16px;
}

.breadcrumb a {
  color: var(--color-muted);
}

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

.grid {
  display: grid;
  gap: 24px;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 详情页同类推荐：桌面一行5个 */
.related-grid {
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.related-grid .product-info {
  padding: 10px 10px 12px;
}

.related-grid .product-info h3 {
  font-size: 0.66rem;
  line-height: 1.35;
  min-height: 0;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 24px var(--color-shadow);
}

.card-body {
  padding: 22px;
}

.card h3 {
  font-size: 1.15rem;
  margin-bottom: 8px;
}

.card p {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.value-card {
  position: relative;
  text-align: center;
  padding: 30px 22px;
  min-height: 300px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}

.value-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 14, 6, 0.35), rgba(20, 14, 6, 0.78));
}

.value-card > * {
  position: relative;
  z-index: 1;
}

.value-card h3 {
  color: var(--color-white);
}

.value-card p {
  color: rgba(255, 255, 255, 0.88);
}

/* 上下排版版本：图片在上，文字在下，四宫格2x2 */
.value-card-vertical {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: auto;
  background-image: none !important;
  background-color: var(--color-surface);
  color: var(--color-text);
  text-align: left;
}

.value-card-vertical::before {
  display: none;
}

.value-card-vertical > img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  background-color: var(--color-surface-alt);
}

/* 内容区紧凑：取消多余留白，文字在框内垂直居中 */
.value-card-vertical .value-card-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 14px;
  text-align: center;
}

.value-card.value-card-vertical .value-icon {
  width: 38px;
  height: 38px;
  margin: 0 auto 6px;
  background-color: var(--color-primary-soft);
  border: none;
  color: var(--color-primary);
  font-size: 1.05rem;
}

.value-card-vertical h3 {
  color: var(--color-text);
}

.value-card-vertical p {
  color: var(--color-muted);
}

/* 首页 Why Choose Us：四张卡片间距收紧 */
.values-grid {
  gap: 16px;
}

/* 首页精品推荐：产品卡片四列 */
.featured-grid {
  gap: 20px;
}

.value-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background-color: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 800;
}

.value-card .value-icon {
  background-color: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

.category-card {
  position: relative;
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  color: var(--color-white);
}

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

.category-card:hover img {
  transform: scale(1.08);
}

.category-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(35, 25, 17, 0.05), var(--color-overlay));
}

.category-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 2;
}

.category-caption h3 {
  font-size: 1.18rem;
}

.category-caption span {
  font-size: 0.86rem;
  opacity: 0.85;
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}

.stat-num {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--color-primary);
}

.stat-label {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.mc-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
}

.mc-card > img {
  width: 100%;
  height: auto;
  object-fit: contain;
  background-color: var(--color-surface-alt);
  display: block;
}

.mc-card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  padding: 26px 24px;
}

.mc-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.mc-card-body h3 {
  font-size: 1.35rem;
  margin: 0;
}

.mc-card-body p {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: 0;
}

.mc-card-body .btn {
  margin-top: auto;
}

@media (max-width: 768px) {
  .mc-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .mc-card > img {
    height: auto;
  }
}

.process-timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
}

.process-timeline::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background-color: var(--color-border);
}

.process-timeline .timeline-item {
  position: relative;
  padding: 0 0 34px 60px;
}

.process-timeline .timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background-color: var(--color-surface);
  color: var(--color-primary);
  font-weight: 800;
}

.timeline-content h3 {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.timeline-content p {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 4px;
}

.timeline-content .timeline-note {
  font-size: 0.88rem;
  color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 640px) {
  .process-timeline::before {
    left: 15px;
  }

  .process-timeline .timeline-item {
    padding-left: 48px;
  }

  .timeline-dot {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
}

.cta-band {
  background-color: rgb(240, 240, 240);
  color: var(--color-text);
  text-align: center;
  padding: 70px 20px;
}

.cta-band h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}

.cta-band p {
  opacity: 0.9;
  margin-bottom: 28px;
}

.cta-band .btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.cta-band .btn-primary:hover {
  background-color: var(--color-primary-hover);
  color: var(--color-white);
  border-color: var(--color-primary-hover);
}

.media-text {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 44px;
  align-items: center;
}

.media-text img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px var(--color-shadow);
}

.media-text h2 {
  font-size: 1.9rem;
  margin-bottom: 16px;
}

.media-text p {
  color: var(--color-muted);
  margin-bottom: 14px;
}

.media-text ul {
  list-style: none;
  margin-top: 12px;
}

.media-text li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 10px;
  color: var(--color-text);
}

.media-text li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 800;
}

.history-timeline {
  position: relative;
  max-width: 1100px;
  margin: 40px auto 0;
  padding-left: 0;
}

.history-timeline::before {
  display: none;
}

.history-item {
  position: relative;
  padding-bottom: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}

.history-item:last-child {
  padding-bottom: 0;
}

.history-item::before {
  display: none;
}

.history-text {
  position: relative;
}

.history-year {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary);
  margin-bottom: 8px;
  display: block;
}

.history-item h3 {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.history-item > p {
  color: var(--color-muted);
  margin-bottom: 14px;
}

.history-figure {
  margin: 0;
}

.history-figure img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.history-figure figcaption {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--color-muted);
  font-style: italic;
}

@media (max-width: 640px) {
  .history-item {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* 手机端始终保持图片在上、文本在下 */
  .history-item .history-figure {
    order: -1;
  }

  .history-year {
    font-size: 1.15rem;
  }
}

.equip-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.equip-card dl {
  margin-top: 10px;
  font-size: 0.88rem;
}

.equip-card dt {
  font-weight: 700;
  color: var(--color-text);
  margin-top: 8px;
}

.equip-card dd {
  color: var(--color-muted);
}

.dept-list {
  display: flex;
  flex-direction: column;
  gap: 56px;
  margin-top: 40px;
}

.dept-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
}

.dept-row.reverse .dept-media {
  order: 2;
}

.dept-main {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.dept-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.dept-thumbs button {
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.dept-thumbs button:hover,
.dept-thumbs button.active {
  opacity: 1;
  border-color: var(--color-primary);
}

.dept-thumbs img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.dept-index {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--color-primary);
}

.dept-info h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.dept-info p {
  color: var(--color-muted);
}

@media (max-width: 768px) {
  .dept-row,
  .dept-row.reverse {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .dept-row.reverse .dept-media {
    order: 0;
  }
}

.qc-grid .qc-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.qc-dot {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.carousel {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
}

.carousel > * {
  scroll-snap-align: start;
  flex: 0 0 300px;
}

.client-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 26px;
  text-align: center;
}

.client-card strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.client-card span {
  color: var(--color-muted);
  font-size: 0.88rem;
}

.cert-card {
  background: none;
  border: none;
  padding: 0;
}

.cert-card img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  transition: transform 0.25s ease;
}

.cert-card:hover img {
  transform: scale(1.04);
}

.cert-card figcaption {
  margin-top: 8px;
  font-weight: 600;
  text-align: center;
  font-size: 0.92rem;
}

.carousel-controls {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

.carousel-controls button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 1.1rem;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background-color: var(--color-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.lightbox.open {
  display: flex;
}

.lightbox img {
  max-height: 88vh;
  max-width: 92vw;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 8%;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 1.3rem;
}

.filter-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 30px;
  align-items: start;
}

.filter-layout-full {
  grid-template-columns: 1fr;
}

.filter-panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  position: sticky;
  top: calc(var(--header-height) + 16px);
}

.filter-group {
  margin-bottom: 22px;
}

.filter-group h3 {
  font-size: 0.95rem;
  margin-bottom: 10px;
}

.filter-group input[type="text"],
.filter-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.check-list {
  list-style: none;
  max-height: 190px;
  overflow-y: auto;
}

.check-list li {
  padding: 5px 0;
  font-size: 0.92rem;
}

.check-list input {
  margin-right: 8px;
}

.search-bar {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.search-bar input {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.result-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  color: var(--color-muted);
  font-size: 0.92rem;
  gap: 12px;
  flex-wrap: wrap;
}

.filter-toggle-mobile {
  display: none;
}

/* 产品页分页与快捷跳转 */
.product-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}

.page-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.page-btn {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: 0.92rem;
  font-weight: 600;
  transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled) {
  border-color: var(--color-text);
  transform: translateY(-2px);
}

.page-btn.active {
  background-color: var(--color-text);
  color: var(--color-white);
  border-color: var(--color-text);
}

.page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.page-arrow {
  font-size: 1.1rem;
}

.page-ellipsis {
  color: var(--color-muted);
  padding: 0 4px;
}

.page-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
  font-size: 0.92rem;
  flex-wrap: wrap;
}

.page-jump input {
  width: 76px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
}

.page-total {
  color: var(--color-muted);
}

.field-optional {
  font-weight: 400;
  color: var(--color-muted);
  font-size: 0.85rem;
}

/* 产品页左侧筛选区分隔线与多选列表 */
.sidebar-divider {
  border-top: 1px solid var(--color-border);
  margin: 18px 0;
}

.check-list label {
  display: flex;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

/* 电脑端左侧固定分类栏 */
.category-sidebar .sidebar-title {
  font-size: 1rem;
  margin: 0 0 14px;
}

/* 手机端滑出的小类面板，电脑端不显示 */
.category-sidebar .sidebar-sub {
  display: none;
}

.category-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-list > li {
  margin-bottom: 2px;
}

.category-list a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.94rem;
  line-height: 1.35;
}

.category-list a:hover {
  background-color: var(--color-surface-alt);
}

.category-list a.active {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.category-sublist {
  list-style: none;
  margin: 2px 0 8px;
  padding: 0 0 0 12px;
}

.category-sublist a {
  font-size: 0.87rem;
  padding: 7px 10px;
}

/* 分类/子类复选框（多选） */
.category-list label {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.94rem;
  line-height: 1.35;
  cursor: pointer;
}

.category-list label:hover {
  background-color: var(--color-surface-alt);
}

.category-list input[type="checkbox"] {
  margin-right: 8px;
  accent-color: var(--color-primary);
}

.category-subitem label {
  font-size: 0.87rem;
  padding: 5px 10px;
}

/* 大类折叠/展开行 */
.cat-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cat-row .cat-link {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.94rem;
  line-height: 1.35;
}

.cat-row .cat-link:hover {
  background-color: var(--color-surface-alt);
}

.cat-row .cat-link.active {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
}

.cat-toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, color 0.2s ease;
}

.cat-toggle:hover {
  color: var(--color-primary);
  background-color: var(--color-surface-alt);
}

.cat-toggle.open {
  transform: rotate(90deg);
  color: var(--color-primary);
}

/* 小类列表默认隐藏，.open 展开 */
.category-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.category-sublist.open {
  max-height: 500px;
  margin: 2px 0 8px;
  padding: 0 0 0 12px;
}

.category-subitem {
  list-style: none;
}

.category-subitem a {
  display: block;
  font-size: 0.87rem;
  padding: 7px 10px;
  color: var(--color-muted);
  border-radius: var(--radius-sm);
}

.category-subitem a:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-text);
}

.category-subitem a.active {
  color: var(--color-primary);
  font-weight: 600;
  background-color: var(--color-primary-soft);
}

/* 后台语言开关 */
.lang-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lang-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  cursor: pointer;
}

.lang-toggle-row input {
  width: 18px;
  height: 18px;
}

.product-card {
  display: block;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--color-text);
  box-shadow: 0 8px 22px var(--color-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.product-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 38px var(--color-shadow-strong);
  color: var(--color-text);
}

/* 产品页：产品紧贴拼贴（无间隙），仅作用于 #product-grid */
#product-grid {
  gap: 0;
}

#product-grid .product-card {
  border: 0;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  box-shadow: none;
}

#product-grid .product-card:hover {
  transform: none;
  box-shadow: none;
  outline: none;
}

.product-media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-surface-alt);
}

.product-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, opacity 0.35s ease;
}

.product-media img.alt-img {
  opacity: 0;
}

@media (hover: hover) {
  .product-card:hover .product-media img.main-img {
    transform: scale(1.25);
  }

  .product-card:hover .product-media img.alt-img {
    opacity: 1;
    transform: scale(1.25);
  }
}

.product-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background-color: rgba(35, 25, 17, 0.72);
  color: var(--color-white);
  font-size: 0.76rem;
  padding: 4px 10px;
  border-radius: 999px;
}

.product-info {
  padding: 16px 18px 20px;
}

.product-info h3 {
  font-size: 0.88rem;
  line-height: 1.35;
  margin-bottom: 6px;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.product-price {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}

.detail-price {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 12px 0;
}

/* 规格/分类/MOQ 等信息紧跟图库下方 */
.detail-extra {
  margin-top: 18px;
  min-width: 0;
}

.detail-moq {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: var(--color-muted);
}

.sub-text {
  opacity: 0.7;
  font-size: 0.85em;
  color: var(--color-muted);
}

.chip {
  font-size: 0.76rem;
  padding: 3px 9px;
  border-radius: 999px;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.product-sub {
  font-size: 0.88rem;
  color: var(--color-muted);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 20px;
  color: var(--color-muted);
}

.empty-state .big {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 12px;
}

.detail-layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 24px;
  align-items: start;
}

.detail-gallery {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

/* 缩略图栏只露出 5 张（5×78 + 4×10 = 430），其余纵向滚动查看 */
.detail-gallery .gallery-thumbs {
  order: 0;
  flex-shrink: 0;
  width: 84px;
  max-height: 430px;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-top: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.detail-gallery .gallery-main {
  order: 1;
  flex: 1 1 600px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  min-width: 0;
}

.gallery-main {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.detail-gallery .gallery-thumbs::-webkit-scrollbar {
  width: 6px;
}

.detail-gallery .gallery-thumbs::-webkit-scrollbar-thumb {
  background-color: var(--color-border);
  border-radius: 3px;
}

.gallery-thumbs button {
  width: 78px;
  height: 78px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: none;
}

.gallery-thumbs button.active {
  border-color: var(--color-primary);
}

.gallery-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}

.spec-table th,
.spec-table td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.94rem;
}

.spec-table th {
  width: 38%;
  color: var(--color-muted);
  font-weight: 600;
  background-color: var(--color-surface-alt);
}

.rich-content {
  line-height: 1.85;
}

.rich-content p {
  margin-bottom: 12px;
}

.rich-content ul {
  padding-left: 22px;
  margin-bottom: 12px;
}

.step-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  counter-reset: step;
}

.step-card {
  display: flex;
  gap: 16px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.step-card .step-no {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.1rem;
}

.step-card h3 {
  font-size: 1.06rem;
  margin-bottom: 6px;
}

.step-card p {
  color: var(--color-muted);
  font-size: 0.92rem;
}

.faq-list details {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 12px;
}

.faq-list summary {
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 30px;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 0;
  font-size: 1.3rem;
  color: var(--color-primary);
}

.faq-list details[open] summary::after {
  content: "−";
}

.faq-list details p {
  margin-top: 12px;
  color: var(--color-muted);
}

.option-grid .option-item {
  text-align: center;
  padding: 26px 18px;
}

.option-item .opt-icon {
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.catalog-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 30px;
  align-items: start;
}

.catalog-nav {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  position: sticky;
  top: calc(var(--header-height) + 16px);
  max-height: calc(100vh - var(--header-height) - 32px);
  max-height: calc(100dvh - var(--header-height) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.catalog-group {
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

.catalog-group:last-child {
  border-bottom: none;
}

.catalog-nav .catalog-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
}

.catalog-chevron {
  font-size: 0.7rem;
  color: var(--color-muted);
  transition: transform 0.18s ease;
}

.catalog-group.open .catalog-chevron {
  transform: rotate(90deg);
}

.catalog-group-body {
  display: none;
  padding: 4px 0 10px;
}

.catalog-group.open .catalog-group-body {
  display: block;
}

.catalog-nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.94rem;
}

.catalog-nav button:hover {
  background-color: var(--color-primary-soft);
}

.catalog-nav button.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.catalog-detail {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.catalog-detail img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.catalog-detail .detail-body {
  padding: 30px;
}

.detail-body .eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.detail-body h2 {
  margin: 0 0 12px;
  font-size: 1.7rem;
}

.detail-intro,
.detail-short {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-soft);
  margin: 0 0 16px;
}

.detail-desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text);
  background-color: var(--color-surface-alt);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 0 0 20px;
}

.prop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.prop-item {
  background-color: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}

.prop-item dt {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.prop-item dd {
  font-size: 0.93rem;
}

.cert-strip {
  margin-top: 26px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cert-badge {
  border: 1px solid var(--color-border);
  background-color: var(--color-bg);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-primary);
}

.case-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 34px;
}

.case-card img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
}

.case-card:nth-child(even) .case-media {
  order: 2;
}

.case-body {
  padding: 34px;
}

.case-body h3 {
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.case-client {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.case-row {
  margin-bottom: 12px;
}

.case-row strong {
  display: block;
  color: var(--color-primary);
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.case-row span {
  color: var(--color-muted);
  font-size: 0.95rem;
}

.blog-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.blog-date {
  color: var(--color-accent);
  font-size: 0.84rem;
  font-weight: 700;
}

.comments-section {
  border-top: 2px solid var(--color-border);
  padding-top: 30px;
}

.comments-title {
  font-size: 1.4rem;
  margin-bottom: 24px;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.comment-item {
  display: flex;
  gap: 16px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 22px;
}

.comment-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  flex-shrink: 0;
}

.comment-body {
  flex: 1;
}

.comment-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.comment-role {
  color: var(--color-accent);
  font-size: 0.82rem;
  background-color: var(--color-surface-alt);
  padding: 2px 10px;
  border-radius: 12px;
}

.comment-date {
  color: var(--color-muted);
  font-size: 0.82rem;
}

.comment-text {
  line-height: 1.7;
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
}

.form-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 34px;
  box-shadow: 0 10px 30px var(--color-shadow);
}

.field {
  margin-bottom: 18px;
}

.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 7px;
  font-size: 0.93rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-track);
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field .hint {
  font-size: 0.82rem;
  color: var(--color-muted);
  margin-top: 5px;
}

.upload-box {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
}

.quote-form .upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

.upload-button {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border-radius: 999px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.upload-name {
  font-size: 0.88rem;
  color: var(--color-muted);
  word-break: break-all;
}

.field-challenge label {
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.field-challenge label strong {
  display: inline-block;
  padding: 2px 10px;
  margin-left: 4px;
  border-radius: var(--radius-sm);
  background-color: var(--color-track);
  font-weight: 700;
}

.challenge-input {
  max-width: 180px;
}

.btn-quote {
  margin-top: 6px;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 1rem;
  font-weight: 700;
}

.trust-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}

.trust-badges li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.86rem;
  color: var(--color-muted);
}

.trust-badges svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.field-error {
  color: var(--color-danger);
  font-size: 0.84rem;
  margin-top: 5px;
  display: none;
}

.field.invalid .field-error {
  display: block;
}

.form-message {
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin-bottom: 16px;
  font-size: 0.92rem;
  display: none;
}

.form-message.success {
  display: block;
  background-color: rgba(44, 122, 82, 0.12);
  color: var(--color-success);
  border: 1px solid var(--color-success);
}

.form-message.error {
  display: block;
  background-color: rgba(176, 60, 60, 0.1);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
}

.hp-field {
  position: absolute;
  left: -9999px;
}

.contact-info li {
  list-style: none;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.contact-info .ci-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.contact-info strong {
  display: block;
}

.contact-info span,
.contact-info a {
  color: var(--color-muted);
  font-size: 0.94rem;
  word-break: break-word;
}

.map-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-top: 26px;
}

.map-frame iframe {
  width: 100%;
  height: 380px;
  border: 0;
  display: block;
}

.video-facade {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 16 / 9;
}

.video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-facade .play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  color: var(--color-primary);
  font-size: 1.8rem;
}

.video-facade iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.service-video-wrap {
  max-width: 960px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(35, 25, 17, 0.18);
}

.service-video {
  width: 100%;
  display: block;
  background: #000;
}

.flags-marquee {
  margin-top: 40px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.flags-track {
  display: flex;
  width: max-content;
  animation: flags-scroll 75s linear infinite;
}

.flags-marquee:hover .flags-track {
  animation-play-state: paused;
}

.flags-group {
  display: flex;
  gap: 28px;
  padding-right: 28px;
}

.flags-group img {
  display: block;
  width: 92px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(35, 25, 17, 0.14);
}

@keyframes flags-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.map-section {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), transparent 46%),
    linear-gradient(160deg, #fcfcfc, #ffffff 55%, #ffffff);
  color: #3a2a14;
}

.map-section .section-head h2,
.map-section .section-head p {
  color: #3a2a14;
}

.map-section .section-head p {
  color: rgba(58, 42, 20, 0.78);
}

.map-section .eyebrow {
  color: #8a5a2a;
}

.world-map {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
  box-shadow: inset 0 0 0 1px rgba(120, 80, 40, 0.12), 0 24px 60px rgba(120, 80, 40, 0.18);
}

.world-map img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  filter: brightness(0.18) sepia(0.35);
}

.world-map-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.map-arc {
  fill: none;
  stroke: #9c6b2f;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 7 10;
  animation: map-flow 2.2s linear infinite;
  filter: drop-shadow(0 0 4px rgba(156, 107, 47, 0.45));
}

.map-node {
  fill: #b07a38;
  filter: drop-shadow(0 0 4px rgba(156, 107, 47, 0.7));
}

.map-origin {
  fill: #5a3a14;
}

.map-origin-halo {
  fill: #c8903f;
  transform-box: fill-box;
  transform-origin: center;
  animation: map-halo 2.4s ease-out infinite;
}

@keyframes map-flow {
  to {
    stroke-dashoffset: -34;
  }
}

@keyframes map-halo {
  0% {
    transform: scale(0.7);
    opacity: 0.75;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.film-hero {
  min-height: 70vh;
  color: var(--color-ink);
}

.film-hero p {
  color: rgba(0, 0, 0, 0.82);
}

.film-hero .hero-badge {
  background-color: rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.32);
}

.film-hero .hero-media::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.18));
}

.film-bg {
  border-radius: 0;
  aspect-ratio: auto;
  cursor: default;
}

.film-bg .play-btn {
  cursor: pointer;
  width: 92px;
  height: 92px;
  z-index: 3;
  transition: transform 0.25s ease;
}

.film-bg .play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

.breadcrumb.on-film {
  justify-content: flex-start;
  margin-top: 26px;
}

.breadcrumb.on-film,
.breadcrumb.on-film a {
  color: var(--color-ink);
}

.breadcrumb.on-film a:hover {
  color: var(--color-accent);
}

.film-hero.is-playing .hero-media::after {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.film-hero.is-playing .hero-inner {
  display: none;
}

.floating-contact {
  position: fixed;
  right: 20px;
  bottom: 84px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.floating-contact a {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: 0 6px 18px var(--color-shadow-strong);
}

.floating-wa {
  background-color: rgb(37, 168, 96);
}

.floating-mail {
  background-color: var(--color-primary);
}

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 95;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 1.15rem;
  box-shadow: 0 8px 22px var(--color-shadow-strong);
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
}

.back-to-top:hover {
  background-color: var(--color-primary-hover);
}

.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 60px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
}

.site-footer h4 {
  color: var(--color-text);
  margin-bottom: 16px;
  font-size: 1rem;
}

.site-footer p,
.site-footer a,
.site-footer li {
  color: var(--color-footer-text);
  font-size: 0.92rem;
}

.site-footer ul {
  list-style: none;
}

.site-footer li {
  margin-bottom: 9px;
}

.site-footer a:hover {
  color: var(--color-accent);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.footer-brand img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  margin-top: 40px;
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  opacity: 0.85;
}

.pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 30px;
}

.pagination button {
  min-width: 38px;
  height: 38px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 0 10px;
}

.pagination button.active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}

.text-center {
  text-align: center;
}

.mt-20 {
  margin-top: 20px;
}

.mt-40 {
  margin-top: 40px;
}

@media (max-width: 980px) {
  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 首页 Why Choose Us：四张卡片在平板端排 2 列，避免 3+1 落单 */
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .stats-row,
  .media-text,
  .detail-layout,
  .filter-layout,
  .catalog-layout {
    grid-template-columns: 1fr;
  }

  /* 分类栏仅在电脑端显示，手机/平板通过筛选按钮展开 */
  .category-sidebar {
    display: none;
  }

  .category-sidebar.expanded {
    display: block;
    position: static;
    margin-bottom: 18px;
  }

  .filter-toggle-mobile {
    display: inline-flex;
    margin-bottom: 14px;
  }

  /* 手机端分类框：选项铺满整框、每项一条分隔线，点大类从左滑出小类面板 */
  .category-sidebar {
    position: relative;
    overflow: hidden;
    padding: 0;
  }

  .category-sidebar .sidebar-main {
    padding: 16px 0 6px;
  }

  .category-sidebar .sidebar-title {
    padding: 0 16px;
    margin: 0 0 10px;
  }

  .category-sidebar .sidebar-sub {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px 0 6px;
    background-color: var(--color-surface);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
  }

  .category-sidebar .sidebar-layer {
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
  }

  .category-sidebar.sub-open .sidebar-main {
    transform: translateX(100%);
    visibility: hidden;
  }

  .category-sidebar.sub-open .sidebar-sub {
    transform: translateX(0);
    visibility: visible;
  }

  .category-sidebar .category-list > li {
    margin: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .category-sidebar .category-list > li:last-child {
    border-bottom: none;
  }

  .category-sidebar .category-list a,
  .category-sidebar .cat-row .cat-link {
    width: 100%;
    padding: 14px 16px;
    border-radius: 0;
    font-size: 1rem;
    line-height: 1.4;
  }

  .category-sidebar .category-list a:hover,
  .category-sidebar .cat-row .cat-link:hover {
    background-color: var(--color-surface-alt);
  }

  .category-sidebar .category-list a.active,
  .category-sidebar .cat-row .cat-link.active {
    background-color: var(--color-surface-alt);
    box-shadow: inset 3px 0 0 var(--color-text);
  }

  /* 手机端不再使用折叠箭头与内嵌小类列表 */
  .category-sidebar .cat-toggle {
    display: none;
  }

  .category-sidebar .category-sublist,
  .category-sidebar .category-sublist.open {
    display: none;
    max-height: none;
  }

  .sub-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 12px 10px;
    padding: 8px 10px;
    border: none;
    background: none;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 600;
  }

  .sub-back span {
    font-size: 1.25rem;
    line-height: 1;
  }

  .sub-back:hover {
    color: var(--color-text);
  }

  .case-card,
  .case-card:nth-child(even) .case-media {
    grid-template-columns: 1fr;
    order: 0;
  }

  .case-card img {
    min-height: 220px;
  }

  .filter-panel,
  .catalog-nav {
    position: static;
  }

  .catalog-nav {
    max-height: none;
    overflow: visible;
  }

  .detail-gallery {
    flex-direction: column;
    width: 100%;
    max-width: 100%;
  }

  .detail-gallery .gallery-main {
    order: 0;
    width: 100%;
    max-width: 100%;
  }

  .detail-gallery .gallery-main img {
    aspect-ratio: 1 / 1;
  }

  /* 手机端横向缩略图：一屏精确展示 5 张，其余左右滑动查看 */
  .detail-gallery .gallery-thumbs {
    order: 1;
    width: 100%;
    max-width: 100%;
    max-height: none;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-right: 0;
  }

  .detail-gallery .gallery-thumbs::-webkit-scrollbar {
    height: 5px;
  }

  .detail-gallery .gallery-thumbs button {
    width: auto;
    flex: 0 0 calc((100% - 40px) / 5);
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .detail-gallery .gallery-main img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    display: block;
  }
}

@media (max-width: 760px) {
  .main-nav {
    display: none;
  }

  /* 移动端顺序：burger → 黑白配色 → 语言 → logo */
  .header-inner {
    justify-content: flex-start;
    gap: 10px;
  }

  .nav-tools {
    order: 0;
  }

  .brand {
    order: 1;
  }

  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 移动端抽屉菜单：占屏幕 60% 宽，从头部下沿滑出，右侧透出页面 */
  .mobile-menu {
    display: block;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 60%;
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    border-top: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    box-shadow: 6px 0 18px rgba(0, 0, 0, 0.08);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0.25s ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
  }

  /* 手机端导航：选项铺满整框、每项一条分隔线，点大类从左滑出下一级面板 */
  .mobile-menu {
    padding: 0;
    overflow: hidden;
  }

  .m-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.3s;
  }

  .m-panel-main .m-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
  }

  .m-panel-main .m-nav > li {
    display: flex;
    flex: 1 1 auto;
  }

  .m-panel-sub {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    padding: 0;
    background-color: var(--color-surface);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    visibility: hidden;
  }

  .mobile-menu.sub-open .m-panel-main {
    transform: translateX(100%);
    visibility: hidden;
  }

  .mobile-menu.sub-open .m-panel-sub {
    transform: translateX(0);
    visibility: visible;
  }

  .m-nav > li {
    border-bottom: 1px solid var(--color-border);
  }

  .m-nav > li:last-child {
    border-bottom: none;
  }

  .m-nav .nav-link,
  .m-nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    width: 100%;
    min-height: 56px;
    padding: 16px 24px;
    font-size: 1.12rem;
    line-height: 1.4;
    border-radius: 0;
  }

  .m-nav .nav-link:hover,
  .m-nav-btn:hover {
    background-color: var(--color-surface-alt);
  }

  .m-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 12px 6px;
    padding: 8px 10px;
    border: none;
    background: none;
    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 600;
  }

  .m-back span {
    font-size: 1.25rem;
    line-height: 1;
  }

  .m-back:hover {
    color: var(--color-text);
  }

  .m-sub-title {
    padding: 0 20px 10px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
  }

  .mobile-menu .nav-tools .lang-select {
    display: block;
    width: 100%;
  }

  .section {
    padding: 54px 0;
  }

  .hero {
    min-height: 78vh;
  }

  .hero-arrow {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }

  .hero-dots {
    bottom: 16px;
  }

  .hero h1 {
    font-size: 2.05rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .page-hero {
    padding: 44px 0 38px;
  }

  .page-hero h1 {
    font-size: 1.7rem;
  }

  .section-head h2,
  .media-text h2,
  .cta-band h2 {
    font-size: 1.55rem;
  }

  .grid-2,
  .grid-3,
  .step-cards,
  .prop-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 服务页售后保障：手机端改为上下堆叠 */
  #after-sales .grid-4 {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: 1fr;
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 产品页：配合无间隙拼贴，手机端改为 2 列以保证文字可读 */
  #product-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-row,
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .form-card,
  .catalog-detail .detail-body,
  .case-body {
    padding: 22px;
  }

  .filter-toggle-mobile {
    display: inline-flex;
    margin-bottom: 14px;
  }

  .filter-panel.collapsed {
    display: none;
  }

  .search-bar {
    flex-direction: column;
  }

  .carousel {
    flex-direction: column;
    overflow-x: visible;
  }

  .carousel > * {
    flex: none;
  }

  .carousel-controls {
    display: none;
  }

  .cert-card img {
    max-width: 240px;
    margin: 0 auto;
  }

  .floating-contact {
    display: flex;
    right: 16px;
    bottom: 78px;
  }

  .footer-bottom {
    flex-direction: column;
  }

  .back-to-top {
    right: 16px;
    bottom: 18px;
  }

  /* 手机端详情页：上下排版 —— 大图在上，缩略图其下，名称/简介/详细在最下方 */
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .detail-side {
    display: contents;
  }

  .detail-gallery-wrap {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .detail-main {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    align-self: start;
  }

  /* 规格/分类/MOQ 等信息紧贴缩略图正下方 */
  .detail-extra {
    margin-top: 12px;
    overflow-wrap: anywhere;
  }

  .detail-extra .chip {
    font-size: 0.68rem;
    padding: 2px 8px;
  }

  .detail-moq {
    font-size: 0.78rem;
    margin-top: 8px;
  }

  .detail-price {
    font-size: 1.05rem;
    margin: 8px 0;
  }

  .spec-table {
    margin: 10px 0;
  }

  .spec-table th,
  .spec-table td {
    padding: 6px 8px;
    font-size: 0.72rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .detail-main h1 {
    font-size: 1.02rem;
    line-height: 1.35;
    margin: 0 0 6px;
    overflow-wrap: anywhere;
  }

  .detail-summary {
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--color-muted);
    margin: 0 0 8px;
  }

  .detail-main .rich-content {
    font-size: 0.76rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .detail-main .rich-content p {
    margin: 0 0 6px;
  }

  .detail-main .rich-content img,
  .detail-main .rich-content video,
  .detail-main .rich-content table {
    max-width: 100%;
  }

  .detail-main .rich-content img {
    height: auto;
  }

  /* 富文本中的表格在窄列中允许横向滚动，避免溢出重叠 */
  .detail-main .rich-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .detail-gallery .gallery-main {
    touch-action: pan-y;
  }

  .detail-gallery .gallery-thumbs {
    gap: 6px;
  }

  .detail-gallery .gallery-thumbs button {
    flex: 0 0 calc((100% - 24px) / 5);
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* 手机端同类推荐：一行五个，卡片文字缩小并限制两行 */
  .related-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }

  .related-grid .product-info {
    padding: 5px 5px 7px;
  }

  .related-grid .product-info h3 {
    font-size: 0.62rem;
    line-height: 1.3;
    margin-bottom: 2px;
  }

  .related-grid .product-meta {
    margin-bottom: 0;
  }

  .related-grid .product-price {
    font-size: 0.68rem;
  }
}

/* 材料和工艺合并页面 Tab 切换 */
.mc-tabs {
  display: inline-flex;
  gap: 0;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 4px;
  margin-bottom: 24px;
}

.mc-tab {
  padding: 10px 28px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.2s ease;
}

.mc-tab:hover {
  color: var(--color-primary);
}

.mc-tab.active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

/* ===== 动效与交互增强 ===== */
:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
}

/* 页面路由转场 */
html.is-entering body,
html.is-leaving body {
  opacity: 0;
  transform: translateY(10px);
}

body {
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}

html.is-leaving body {
  transform: translateY(-10px);
}

/* 文本/卡片渐显入场 */
[data-motion="reveal"],
[data-motion="reveal-left"],
[data-motion="reveal-right"] {
  opacity: 0;
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-motion="reveal"] {
  transform: translateY(28px);
}

[data-motion="reveal-left"] {
  transform: translateX(-40px);
}

[data-motion="reveal-right"] {
  transform: translateX(40px);
}

[data-motion="reveal"].is-visible,
[data-motion="reveal-left"].is-visible,
[data-motion="reveal-right"].is-visible {
  opacity: 1;
  transform: none;
}

/* 数字滚动 */
.stat-num {
  font-variant-numeric: tabular-nums;
}

/* 筛选/分类面板顺滑切换 */
#product-grid {
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

#product-grid.is-updating {
  opacity: 0.4;
  transform: translateY(6px);
}

.catalog-nav.is-swapping,
#mc-detail.is-swapping {
  animation: detail-swap 0.5s var(--ease-out);
}

@keyframes detail-swap {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.category-list a,
.cat-row .cat-link,
.category-subitem a {
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.category-list a:hover,
.cat-row .cat-link:hover,
.category-subitem a:hover {
  transform: translateX(3px);
}

.category-sublist {
  opacity: 0;
  transition: max-height 0.38s var(--ease-out), opacity 0.28s ease, padding 0.3s var(--ease-out);
}

.category-sublist.open {
  opacity: 1;
  max-height: 560px;
}

/* 按钮质感与高光扫过 */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.28s var(--ease-out), background-color 0.28s var(--ease-out),
    color 0.28s var(--ease-out), border-color 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}

.btn:hover::after {
  animation: btn-sheen 0.75s var(--ease-out);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

@keyframes btn-sheen {
  0% {
    left: -70%;
    opacity: 0;
  }
  35% {
    opacity: 0.9;
  }
  100% {
    left: 130%;
    opacity: 0;
  }
}

/* 产品卡片悬浮反馈 */
.product-card {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.product-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 58%, rgba(24, 17, 9, 0.32));
  opacity: 0;
  transition: opacity 0.45s var(--ease-out);
  pointer-events: none;
}

.product-card:hover .product-media::after {
  opacity: 1;
}

.product-info h3 {
  transition: color 0.3s var(--ease-out);
}

.product-card:hover .product-info h3 {
  color: var(--color-accent);
}

/* 价值卡 / 材料卡 / 内容卡悬浮 */
.card,
.value-card-vertical,
.mc-card,
.blog-card,
.case-card,
.category-card {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.card:hover,
.value-card-vertical:hover,
.mc-card:hover,
.category-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 22px 44px var(--color-shadow-strong);
}

.blog-card:hover,
.case-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px var(--color-shadow-strong);
}

.value-card-vertical > img,
.mc-card > img {
  transition: transform 0.6s var(--ease-out);
}

.value-card-vertical:hover > img,
.mc-card:hover > img {
  transform: scale(1.04);
}

/* 键盘焦点可见性 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  [data-motion="reveal"],
  [data-motion="reveal-left"],
  [data-motion="reveal-right"] {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .card:hover,
  .product-card:hover,
  .value-card-vertical:hover,
  .mc-card:hover,
  .blog-card:hover,
  .case-card:hover {
    transform: none;
  }
}