/* ==========================================================
   设计令牌
   ========================================================== */
:root {
  /* 品牌色 */
  --brand-primary: #422204;
  --brand-primary-hover: #c70f0f;
  --brand-secondary: #b31b22;
  --brand-accent: #faae29;

  /* RGB 三色组（供 rgba(var(--xx-rgb), 透明度) 使用） */
  --brand-primary-rgb: 37, 99, 235;
  --brand-primary-hover-rgb: 29, 78, 216;
  --brand-accent-rgb: 245, 158, 11;

  --footer-bg: #1c1214;


  /* 文字 */
  --text-main: #101010;
  --text-muted-custom: #4e4f50;
  --text-footer: #f5f5f5;
  --text-inverse: #ffffff;

  /* 背景 */
  --bg-body: #ffffff;
  --bg-surface: #f8fafc;
  --bg-dark: #0f172a;

  /* 边框 / 圆角 */
  --border-color: #dce0e3;
  --border-radius-sm: 0.375rem;
  --border-radius: 0.5rem;
  --border-radius-lg: 0.75rem;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* 布局与动效 */
  --section-py: 5rem;
  --nav-height: 72px;
  --transition-base: 0.2s ease;

  /* 字体（需在 HTML 中实际引入 Inter / JetBrains Mono，否则回退系统字体） */
  --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
  --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;

  /* ---------- 桥接 Bootstrap 5.3 变量（关键） ---------- */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);

  --bs-link-color: var(--brand-primary);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color: var(--brand-primary-hover);
  --bs-link-hover-color-rgb: var(--brand-primary-hover-rgb);

  --bs-body-color: var(--text-main);
  --bs-body-bg: var(--bg-body);
  --bs-body-font-family: var(--font-serif);
  --bs-body-line-height: 1.7;

  --bs-secondary-color: var(--text-muted-custom);
  --bs-border-color: var(--border-color);
  --bs-border-radius: var(--border-radius);
  --bs-border-radius-sm: var(--border-radius-sm);
  --bs-border-radius-lg: var(--border-radius-lg);

  --bs-focus-ring-color: rgba(var(--brand-primary-rgb), 0.25);
  --bs-focus-ring-width: 0.25rem;

  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow: var(--shadow-md);
  --bs-box-shadow-lg: var(--shadow-lg);
}

/* 移动端导航折叠后高度更小，锚点偏移同步 */
@media (max-width: 991.98px) {
  :root {
    --nav-height: 56px;
  }
}

/* ==========================================================
   全局基础
   ========================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + 1rem);
}

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

@media (min-width: 1400px) {
  .container {
    max-width: 80%;
  }
}

/* 字体平滑：Bootstrap 未设置，纯视觉优化 */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 选中文本 */
::selection {
  background: rgba(var(--brand-primary-rgb), 0.2);
  color: var(--text-main);
}

/* ==========================================================
   排版增强（品牌/页面级，不污染全局标签）
   ========================================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: 1.3;
}

a {
  text-decoration: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
  height: auto;
}

.display-title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.text-gradient {
  background: linear-gradient(135deg, var(--brand-primary), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==========================================
   通用区块标题组件 (Section Header)
   ========================================== */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1vw, 8px);
  color: var(--brand-primary);
  /* font-family: "Microsoft YaHei", "PingFang SC", sans-serif; */
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  font-weight: 800;
  letter-spacing: 4px;
  margin: 0;
  transition: all 0.3s ease;
}

.section-title .title-text {
  margin: 0 clamp(8px, 2vw, 20px);
  transition: margin 0.3s ease;
}

.section-subtitle {
  color: #333;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  letter-spacing: 2px;
  margin-top: 10px;
  transition: all 0.3s ease;
}

.deco-line {
  height: 1px;
  background-color: var(--brand-accent);
  flex: 1;
  min-width: 15px;
  max-width: 13%;
  transition: all 0.3s ease;
}

.diamond-solid {
  width: clamp(6px, 1vw, 8px);
  height: clamp(6px, 1vw, 8px);
  background-color: var(--brand-accent);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.diamond-hollow {
  width: clamp(10px, 1.8vw, 14px);
  height: clamp(10px, 1.8vw, 14px);
  border: 1px solid var(--brand-accent);
  transform: rotate(45deg);
  background-color: transparent;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.btn-primary {
  background-color: var(--brand-primary);
  border: 0;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-active-bg: var(--brand-primary);
}

.btn.btn-hover-fill {
  background-image: linear-gradient(var(--brand-primary-hover), var(--brand-primary-hover));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .35s ease, color .35s ease, border-color .35s ease;
}

.btn.btn-hover-fill:hover,
.btn.btn-hover-fill:focus-visible {
  background-size: 100% 100%;
  color: #fff;
}

.btn-transparent {
  border: 1px solid var(--brand-primary);
  background-color: transparent;
  border-radius: 999px;
  padding: .4rem 1.2rem;
  font-size: 14px;
  --bs-btn-hover-border-color: var(--brand-primary-hover)
}

.btn-dark-wine {
  background: var(--brand-primary);
  color: var(--bg-body);
  border: 0;
  --bs-btn-hover-bg: var(--brand-primary);
}

/*悬停特效*/
.hover-lift {
  transition: transform .3s ease, box-shadow .3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .15);
}


/* ==========================================================
   工具类
   ========================================================== */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2,
.text-ellipsis-3,
.text-ellipsis-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

.text-ellipsis-2 {
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.text-ellipsis-3 {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.text-ellipsis-4 {
  -webkit-line-clamp: 4;
  line-clamp: 4;
}

/* ===============卡片通用样式================== */
.card {
  height: 100%;
  border: 0;
  border-radius: 1rem;
  box-shadow: var(--bs-box-shadow-sm);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-img-wrapper {
  position: relative;
  overflow: hidden;
  height: 220px;
  background-color: #f8f9fa;
}

/* 图片设置 */
.card .card-img-top {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

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

.card .card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #333;
  margin-bottom: .5rem;
}

.card .card-text {
  font-size: 14px;
  color: var(--text-muted-custom);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex-grow: 1 !important;
  text-align: justify;
  /* 两端对齐让文本更整齐 */
}

.card .card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 1rem;
  /* border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); */
}

.card .card-bottom .hits {
  font-size: clamp(0.875rem, calc(0.84375rem + 0.15625vw), 1rem);
  ;
  color: var(--text-muted-custom);
}

.card-badge {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.card-hover:hover .card-badge {
  opacity: 0;
  visibility: hidden;
}

/* MORE 按钮：圆角胶囊样式，灰色边框 */
.card .more-btn {
  border-radius: 50rem;
  border: 1px solid #d31b1b;
  color: #d31b1b;
  font-size: 14px;
  padding: 0.25rem 1rem;
  background-color: transparent;
  transition: all 0.2s;
}

.card .more-btn:hover {
  background-color: #d31b1b;
  color: #fff;
}


/* ==========================================================
   导航栏
   ========================================================== */
#mainNav {
  --nav-fg: #ffffff;
  --nav-bg: rgba(0, 0, 0, .3);
  --nav-shadow: var(--bs-box-shadow);
  --nav-accent: var(--brand-primary-hover);
  background-color: var(--nav-bg);
  box-shadow: var(--nav-shadow);
  padding-block: 1rem;
  /* 固定高度，不再收缩 */
  transition: background-color .3s, box-shadow .3s;
}

/* 桌面端滚动后：白底 + 阴影 */
#mainNav.scrolled {
  --nav-fg: #212529;
  --nav-bg: #fff;
  --nav-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}

/* ==================== 移动端 ==================== */
@media (max-width: 991.98px) {

  #mainNav,
  #mainNav.scrolled {
    --nav-fg: #202020;
    --nav-bg: #fff;
    padding-block: .75rem;
  }

  #navMenu {
    --bs-offcanvas-width: 320px;
  }

  #mainNav .nav-item {
    border-bottom: 1px solid var(--border-color);
  }

  #mainNav .nav-item:last-child {
    border-bottom: none;
  }
}

/* ==================== 品牌与 Logo 切换 ==================== */
#mainNav .navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
  margin-right: 1rem;
  width: 230px;
  height: auto;
}

#mainNav .logo-img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

#mainNav .logo-transparent {
  display: block;
}

#mainNav .logo-solid {
  display: none;
}

#mainNav.scrolled .logo-transparent {
  display: none;
}

#mainNav.scrolled .logo-solid {
  display: block;
}

@media (max-width: 991.98px) {
  #mainNav .logo-transparent {
    display: none;
  }

  #mainNav .logo-solid {
    display: block;
  }
}

/* ==================== 导航链接 ==================== */
#mainNav .nav-link {
  color: var(--nav-fg);
  font-size: 17px;
  font-weight: 700;
  text-wrap: nowrap;
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
  color: var(--nav-accent);
}

/* ==================== 汉堡按钮 ==================== */
#mainNav .navbar-toggler {
  border: 0;
  padding: .35rem .15rem;
}

#mainNav .navbar-toggler:focus {
  box-shadow: none;
}

#mainNav .toggler-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin: 5px 0;
  border-radius: 2px;
  background-color: var(--nav-fg);
}

/* ==================== 一级菜单包裹层（文字+箭头分离） ==================== */
#mainNav .nav-item-wrap {
  display: flex;
  align-items: center;
  width: 100%;
}

#mainNav .nav-item-wrap .nav-link {
  flex-grow: 1;
  /* 文字部分撑满剩余空间，方便点击跳转 */
}

/* 独立出来的箭头按钮 */
#mainNav .collapse-toggle {
  background: none;
  border: none;
  padding: .5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nav-fg);
  cursor: pointer;
}

#mainNav .collapse-toggle:focus {
  outline: none;
}

#mainNav .chevron {
  display: inline-block;
  width: .4rem;
  height: .4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s;
}

/* 移动端展开时箭头旋转 */
#mainNav .collapse-toggle[aria-expanded="true"] .chevron {
  transform: rotate(225deg);
}

/* ==================== 二级菜单通用（移动端手风琴） ==================== */
#mainNav .submenu {
  margin: 0;
  padding-left: 1rem;
  list-style: none;
}

#mainNav .submenu .nav-link {
  color: #495057;
  padding-block: .45rem;
  font-size: 14px;
}

#mainNav .submenu .nav-link:hover {
  color: var(--nav-accent);
}

/* ==================== 桌面端：二级菜单悬停弹出 ==================== */
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav {
    gap: 1rem;
  }

  #mainNav .has-sub {
    position: relative;
  }

  /* 桌面端禁用箭头按钮的点击事件，只作视觉指示 */
  #mainNav .collapse-toggle {
    pointer-events: none;
    padding-left: 0;
  }

  /* 强制展开占位，用 opacity 和 visibility 控制显隐 */
  #mainNav .has-sub>.submenu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    padding: .4rem 0;
    background-color: #fff;
    border-radius: 0 0 .5rem .5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s, visibility .25s, transform .25s;
  }

  /* 鼠标悬停父容器时显示 */
  #mainNav .has-sub:hover>.submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* PC端悬停时箭头旋转 */
  #mainNav .has-sub:hover .chevron {
    transform: rotate(225deg);
  }

  #mainNav .submenu .nav-link {
    color: #212529;
    padding: .45rem 1rem;
    white-space: nowrap;
  }

  #mainNav .submenu .nav-link:hover {
    background-color: #f1f3f5;
    color: var(--nav-accent);
  }
}

/* ==================== 侧边栏内部 Logo ==================== */
.offcanvas-title img {
  height: 50px;
  width: auto;
}


/* ==========================================================
   首页横幅轮播（Swiper）
   ========================================================== */
.hero-swiper {
  height: auto;
  padding-top: calc(var(--nav-height) + 24px);
}

@media (min-width: 992px) {
  .hero-swiper {
    padding-top: 0;
  }
}

.slide-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Swiper 分页器：圆点 → 金色胶囊 */
.hero-swiper .swiper-pagination {
  bottom: 34px;
}

.hero-swiper .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0 6px;
  background: rgba(255, 255, 255, .45);
  opacity: 1;
  border-radius: 999px;
  transition: all .3s ease;
}

.hero-swiper .swiper-pagination-bullet-active {
  width: 30px;
  background: var(--brand-accent);
}

/* 轮播箭头：圆形描边按钮 */
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  color: #fff;
  transition: all .3s ease;
  cursor: pointer;
}

.swiper-button-prev {
  left: 28px;
}

.swiper-button-next {
  right: 28px;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background: #fff;
  color: var(--brand-primary-hover);
}

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

.swiper-button-prev svg,
.swiper-button-next svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 991.98px) {

  .swiper-button-prev,
  .swiper-button-next {
    top: 60%;
  }
}

@media (max-width: 767.98px) {

  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}

/* ==========================================================
   首页关于我们
   ========================================================== */
.about-section {
  position: relative;
  overflow: hidden;
  background: #e5e5e5 url('../images/index_about_bg.jpg') center bottom no-repeat;
  background-size: cover;
}

/* 左侧图片设置 */
.about-section .about-img {
  width: 100%;
  /* height: 400px; */
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* 右侧文字区域 */
.about-section .about-content {
  padding: 0 15px;
}

.about-section .about-title {
  font-size: clamp(28px, 1.8vw, 36px);
  ;
  font-weight: 700;
  color: var(--brand-secondary);
  margin-bottom: 5px;
}

.about-section .about-subtitle {
  font-size: clamp(16px, 1vw, 20px);
  ;
  color: var(--text-muted-custom);
  letter-spacing: 2px;
  margin-bottom: 25px;
}

.about-section .about-desc {
  font-size: 15px;
  color: #555;
  line-height: 1.9;
  text-align: justify;
  margin-bottom: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  line-clamp: 10;
  -webkit-box-orient: vertical
}

.about-section .btn-primary {
  padding: 10px 24px;
}

.about-section .btn-primary i {
  padding-left: 10px;
  margin-left: 10px;
  border-left: 1px solid rgba(255, 255, 255, .5);
}

/* about移动端 */
@media (max-width: 991.98px) {
  .about-section {
    background-position: left bottom !important;
  }

  .about-content {
    padding-left: 0;
    margin-top: 30px;
  }
}

/* ==========================================================
   视频弹窗
   ========================================================== */
.videoModal .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 取消模态框默认的内边距，让视频紧贴边缘 */
.videoModal .modal-content .modal-body {
  padding: 0 !important;
  position: relative;
  /* 为关闭按钮提供定位基准 */
}

/* 视频占满模态框，加个圆角更美观 */
.videoModal .modal-content .modal-body video {
  width: 100%;
  max-height: 80vh;
  display: block;
  background: #000;
  border-radius: 12px;
  /* 圆角，更柔和 */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  /* 轻微阴影，突出视频 */
}

/* 右上角的关闭按钮（×） */
.videoModal .modal-content .close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  z-index: 1055;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  padding: 0;
}

.videoModal .modal-content .close-btn:hover {
  background: rgba(255, 0, 0, 0.8);
  border-color: #fff;
}

/* 可选：让遮罩层更透明（但保留半透明效果） */
.videoModal .modal-content .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.6);
  /* 默认是0.5，调高一点更突出视频 */
}

/* ==========================================================
   首页产品中心
   ========================================================== */
.product-section .carousel-container {
  margin: 0 auto;
  padding: 4rem 90px;
  position: relative;
}

.product-section .product-item {
  display: block;
  text-decoration: none;
  text-align: center;
}

.product-section .img-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3;
  /* 固定比例，保证排版整齐，可根据实际图片调整 */
  border-radius: 12px;
  overflow: hidden;
  background-color: #f5f5f5;
}

.product-section .img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-section .product-item:hover .img-wrapper img {
  transform: scale(1.06);
}

.product-section .product-title {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: 1px;
}

.product-section .swiper-button-prev,
.product-section .swiper-button-next {
  border-color: #2b4b8a;
  color: #2b4b8a;
}

.product-section .swiper-button-prev:hover,
.product-section .swiper-button-next:hover {
  background-color: #2b4b8a;
  color: #fff;
}

@media (max-width: 991.98px) {
  .product-section .carousel-container {
    padding: 2rem 15px;
  }

  .product-section .swiper-button-prev,
  .product-section .swiper-button-next {
    display: none;
  }

  .product-section .product-title {
    font-size: 16px;
  }
}

/* =========================================
   首页品质与工艺
   ======================================== */
/* 品质板块主容器 */
.quality-section {
  background: url('../images/index_quality_bg.png') center/cover no-repeat;
  position: relative;
  padding-bottom: 200px;
  color: #0b0b0b;
}

/* 浅色遮罩，提升文字可读性 */
.quality-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 40%, rgba(255, 255, 255, 0.1) 100%);
}

.quality-section .container {
  position: relative;
  z-index: 1;
}

/* 工艺项 */
.quality-section .craft-item {
  text-align: center;
  padding: 0 10px;
}

.quality-section .craft-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
}

.quality-section .craft-icon.color-1 {
  background: #b8860b;
}

.quality-section .craft-icon.color-2 {
  background: #4a7c3c;
}

.quality-section .craft-icon.color-3 {
  background: #2c5282;
}

.quality-section .craft-icon.color-4 {
  background: #a0522d;
}

.quality-section .craft-icon.color-5 {
  background: #a61c17;
}

.quality-section .craft-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.quality-section .craft-desc {
  font-size: 16px;
  color: #000000;
  line-height: 1.6;
}

/* 分割竖线（大屏显示） */
.quality-section .divider-line {
  width: 1px;
  height: 60px;
  background: rgba(0, 0, 0, 0.15);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 991.98px) {
  .quality-section {
    padding-bottom: 50px;
  }

  .quality-section::before {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0.4) 100%);
  }

  .quality-section .divider-line {
    display: none;
  }

  .quality-section .craft-item {
    margin-bottom: 36px;
  }

  .quality-section .craft-title {
    font-size: 18px;
  }

  .quality-section .craft-desc {
    font-size: 14px;
  }
}

/* =========================================
   首页新闻中心
   =========================================*/

/* 左侧图片容器样式 */
.news-section .image-container {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  height: 100%;
  min-height: 350px;
}

.news-section .image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图片底部的半透明文字遮罩 */
.news-section .image-overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
  padding: 12px 10px;
  font-size: 16px;
  font-weight: 500;
}

/* 右侧新闻列表项样式 */
.news-section .news-item {
  background-color: transparent;
  padding: 25px 0;
  border-bottom: 1px solid #e0e0e0;
}

.news-section .news-item:last-child {
  border-bottom: none;
}

/* 日期样式 */
.news-section .date-col {
  text-align: center;
  color: var(--text-muted-custom);
  padding-right: 15px;
}

.news-section .date-year {
  font-size: 24px;
  font-weight: 300;
  line-height: 1.2;
}

.news-section .date-md {
  font-size: 14px;
  font-weight: 300;
}

.news-section .news-content {
  padding-left: 15px;
  border-left: 1px solid #eee;
}

.news-section .news-title {
  font-size: 16px;
  font-weight: bold;
  color: var(--text-main);
  margin-bottom: 8px;
  line-height: 1.5;
}

.news-summary {
  font-size: 14px;
  color: var(--text-muted-custom);
  line-height: 1.6;
  margin-bottom: 0;
}

.news-section .news-item:hover .date-year,
.news-section .news-item:hover .date-md,
.news-section .news-item:hover .news-title {
  color: var(--brand-primary-hover);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .image-container {
    margin-bottom: 20px;
    min-height: 250px;
  }

  .news-content {
    border-left: none;
    padding-left: 0;
    margin-top: 10px;
  }

  .date-col {
    text-align: left;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .date-year {
    font-size: 18px;
    font-weight: bold;
  }

  .date-md {
    font-size: 14px;
  }
}

/*======================================
  栏目banner
  ======================================*/
.page-banner {
  --bs-aspect-ratio: 26.7%;
  height: 460px;
}

@media(max-width: 991.98px) {
  .page-banner {
    --bs-aspect-ratio: 36.5%;
    height: 280px;
    margin-top: calc(var(--nav-height) + 24px);
  }
}

@media(max-width: 767.98px) {
  .page-banner {
    height: 180px;
  }
}

.banner-nav .nav-active {
  color: #d92323 !important;
}

.banner-nav .nav-link-custom {
  font-size: 16px;
  color: #333;
  text-decoration: none;
  margin-right: 30px;
}

.banner-nav .nav-link-custom:hover {
  color: #d92323;
}

.breadcrumb {
  font-size: 14px;
  margin-bottom: 0;
  color: #888 !important;
}

.breadcrumb a {
  color: #888 !important;
  padding: 0 5px;
}

.banner-nav .nav-scroll-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  text-wrap: nowrap;
}


/* --- 底部导航栏核心样式 --- */
.bottom-nav { height: 55px; padding-bottom: env(safe-area-inset-bottom); z-index: 1030; background-color: #5A1A17 !important;}
.nav-item { color: #fff; font-size: 10px; text-decoration: none; }
.nav-item i { font-size: 20px; margin-bottom: 2px; }
/* 仅移动端给body底部留白，防止内容被遮挡 */
@media (max-width: 767.98px) { body { padding-bottom: calc(55px + env(safe-area-inset-bottom)); } }
/*======================================
  页脚
  ======================================*/
footer {
  background-color: var(--footer-bg);
  font-size: 14px;
}

footer .logo {
  max-height: 60px;
}

footer .contact-info {
  list-style: none;
  padding-left: 1rem;
  color: var(--text-footer);
}

footer .contact-info li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

footer .contact-info i {
  margin-right: 10px;
  font-size: 16px;
  color: var(--text-footer);
}

footer .footer-links h6 {
  font-weight: 700;
  color: var(--text-footer);
  margin-bottom: 20px;
  font-size: 14px;
}

footer .footer-links ul {
  list-style: none;
  padding-left: 0;
}

footer .footer-links li {
  margin-bottom: 12px;
}

footer .footer-links a {
  color: var(--text-footer);
  text-decoration: none;
  transition: color 0.3s ease;
}

footer .footer-links a:hover {
  color: var(--brand-primary-hover);
}

footer .qr-code-box {
  text-align: center;
}

footer .qr-code-box img {
  width: 100px;
  height: 100px;
  border: 1px solid #eee;
  padding: 5px;
  margin-bottom: 10px;
  background-color: #cac7c7;
}

footer .qr-code-box p {
  color: var(--text-footer);
  font-size: 14px;
}

/* 底部版权栏 */
.footer-bottom {
  color: var(--text-footer);
  padding: 15px 0;
  font-size: 13px;
  border-top: 1px solid #767575;
}

.footer-bottom span {
  margin: 0 15px;
  display: inline-block;
}

.footer-bottom a {
  color: var(--text-footer);
  text-decoration: none;
}

.footer-bottom a:hover {
  text-decoration: underline;
}


.cta-band {
  padding: 84px 0;
  background: linear-gradient(120deg, #d4b478, #c8a45d 55%, #b08a52);
}

.cta-band h2 {
  font-size: clamp(26px, 3.2vw, 34px);
  color: var(--gold-ink);
  letter-spacing: 4px;
  font-weight: 600;
}

.cta-band p {
  color: rgba(61, 44, 16, .75);
  letter-spacing: 2px;
}

/* ===================================
   新闻列表页
   ================================= */
.pages .news-item {
  border-bottom: 1px dashed #e0e0e0;
}

.pages .news-item:last-child {
  border-bottom: none;
}

.pages .news-item:hover .date-day,
.pages .news-item:hover .date-month {
  color: var(--brand-primary-hover);
}

/* 图片容器 */
.pages .news-img-wrapper {
  width: 280px;
  position: relative;
}

.pages .news-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.pages .news-item:hover .news-img {
  transform: scale(1.05);
}

.pages .news-title {
  color: #333;
  line-height: 1.5;
  font-size: 18px;
  text-align: justify;
}

.pages .news-title:hover {
  color: var(--brand-primary-hover);
}

.pages .news-summary {
  color: #888;
  font-size: 14px;
  line-height: 1.8;
  text-align: justify;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pages .btn-read-more {
  color: #d92323;
  border: 1px solid #d92323;
  border-radius: 0;
  padding: 4px 16px;
  font-size: 14px;
  background-color: transparent;
  transition: all 0.3s ease;
}

.pages .btn-read-more:hover {
  background-color: #d92323;
  color: #fff;
}

/* PC端右侧日期框 */
.pages .date-box {
  background-color: #f8f9fa;
  width: 90px;
  flex-shrink: 0;
  padding: 15px 0;
  /* 【关键修复】保持自身高度，不随外部拉伸 */
  align-self: flex-start;
}

.pages .date-day {
  font-family: 'Times New Roman', Times, serif;
  font-size: 32px;
  color: #333;
  line-height: 1;
  margin-bottom: 5px;
}

.pages .date-month {
  font-size: 13px;
  color: #333;
}

/* 移动端图片左上角悬浮日期（默认隐藏） */
.pages .mobile-date-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 4px 10px;
  text-align: center;
  z-index: 2;
}

.pages .mobile-date-overlay .m-day {
  font-family: 'Times New Roman', Times, serif;
  font-size: 18px;
  line-height: 1.2;
  font-weight: bold;
}

.pages .mobile-date-overlay .m-month {
  font-size: 10px;
}

/* ================= 移动端适配 (屏幕 < 768px) ================= */
@media (max-width: 768px) {
  .pages .news-row {
    gap: 12px !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
  }

  .pages .news-img-wrapper {
    width: 130px;
  }

  .pages .news-img {
    height: 90px;
  }

  /* 隐藏 PC 端的右侧日期框 */
  .pages .date-box {
    display: none !important;
  }

  /* 显示悬浮日期 */
  .pages .mobile-date-overlay {
    display: block;
  }

  .pages .news-title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 5px !important;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pages .news-summary {
    font-size: 12px;
    margin-bottom: 5px !important;
    -webkit-line-clamp: 2;
  }

  .pages .btn-read-more {
    padding: 2px 8px;
    font-size: 12px;
  }
}

/*================分页条======================*/
.page-num:not(:disabled) {
  cursor: pointer;
}

.page-num,
.page-link {
  position: relative;
  display: block;
  padding: .5rem .75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: var(--brand-primary);
  background-color: #fff;
  border: 1px solid #dee2e6;
}

a.page-num:hover,
.page-link:hover {
  text-decoration: none;
}

.page-num-current {
  z-index: 1;
  color: #fff;
  background-color: var(--brand-primary-hover);
  border-color: var(--brand-primary-hover);
}

.page-num-current:hover {
  color: #fff;
}

/*================新闻详情页======================*/
.pages .article-content p {
  text-indent: 2em;
  text-align: justify;
  line-height: 2;
  color: #333;
  margin-bottom: 1rem;
}

.pages .sidebar-item {
  border-bottom: 1px solid #f0f0f0;
}

.pages .sidebar-item:last-child {
  border-bottom: none;
}

/*================产品列表页======================*/
.pages .product-card {
  scroll-snap-align: start;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #c1c1c1;
  transition: all 0.35s ease;
}

.pages .product-card .card-title {
  text-align: center;
  font-size: 1rem;
}

.pages .product-card .card-img-wrapper {
  height: 150px;
}

.pages .product-card .card-img-wrapper img {
  object-fit: contain;
}

@media (min-width: 768px) {
  .pages .product-card .card-img-wrapper {
    height: 220px;
  }
}

@media (min-width: 1200px) {
  .pages .product-card .card-img-wrapper {
    height: 300px;
  }
}

/*=============产品详情页===============*/
.pages .gallery {
  height: 500px;
}

.pages .gallery-top {
  height: 75%;
  width: 100%;
  overflow: hidden;
  border-radius: 10px
}

.pages .gallery-top .swiper-slide {
  border: 1px solid #ddd;
  border-radius: 10px
}

.pages .gallery-thumbs {
  height: 25%;
  box-sizing: border-box;
  padding: 10px 0;
  overflow: hidden
}

.pages .gallery-thumbs .swiper-slide {
  height: 100%;
  border: 1px solid #999;
  opacity: .4;
  border-radius: 10px;
  transition: all .5s
}

.pages .gallery-thumbs .swiper-slide-thumb-active {
  border-color: #000;
  opacity: 1
}

.pages .swiper-slide {
  background: none;
  overflow: hidden
}

.pages .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
  border-radius: 10px
}

.pages .content img {
  margin: 0 auto;
  max-width: 100%;
}

/* ==================联系我们=================== */
.pages .custom-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

.pages .icon-circle {
  width: 56px;
  height: 56px;
  border: 1px solid #d9c8a9;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme-red);
  margin: 0 auto;
}

.pages .custom-input {
  background-color: #fcfbf9 !important;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
}

.pages .custom-input:focus {
  background-color: #fff !important;
  border-color: #d9c8a9;
  box-shadow: 0 0 0 0.25rem rgba(217, 200, 169, 0.25);
}

.pages .form-label {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}

.btn-submit {
  background-color: #1877f2;
  border: none;
  padding: 10px 32px;
  font-size: 15px;
  border-radius: 50rem;
}

.btn-submit:hover {
  background-color: #1464cc;
}

.pages .map-container {
  height: 400px;
  background-color: #f2efe6;
  background-image:
    linear-gradient(#e5e0d3 1px, transparent 1px),
    linear-gradient(90deg, #e5e0d3 1px, transparent 1px);
  background-size: 60px 60px;
  border-radius: 12px;
  position: relative;
}

.pages .map-badge {
  background: #fff;
  padding: 12px 24px;
  border-radius: 50rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
}

.pages .qr-placeholder {
  width: 115px;
  height: 115px;
  border: 1px dashed #d9c8a9;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-muted-custom);
  line-height: 1.6;
  text-align: center;
}

.prod-note {
  border: 1px dashed var(--brand-accent);
  border-radius: 8px;
  background-color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.prod-note-text {
  color: #555;
  letter-spacing: 1px;
}

.prod-note-phone {
  color: #8c2a2a;
  font-weight: 600;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .prod-note {
    font-size: 14px;
  }
}

/*=========回到顶部==========*/
.circle-container {
    background: transparent;
    position: fixed;
    right: 30px;
    bottom: 150px;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 200ms linear
}

.circle-container.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.circle-container::after {
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    content: "\f341";
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: var(--brand-secondary);
    left: 0;
    top: 0;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: block;
    z-index: 1;
    transition: all 200ms linear
}

.circle-container:hover svg path {
    fill: var(--brand-secondary);
    transition: .3s
}

.circle-container:hover::after {
    color: var(--text-inverse);
}

.circle-container svg path {
    fill: none
}

.circle-container svg.circle-progress path {
    stroke: var(--brand-secondary);
    stroke-width: 5;
    box-sizing: border-box;
    transition: all 200ms linear
}