/* ==========================================================================
   Yansheng Industrial Theme Main Stylesheet
   Pixel-Level Match to ylinkworld.cn
   Brand Color: #116eb8 (Primary Blue) / #22c55e (Theme Green Accent) / #084b8a (Dark Blue)
   ========================================================================== */

/* 1. Global Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color: #334155;
  background-color: #ffffff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #116eb8;
  text-decoration: none;
  transition: all 0.25s ease;
}

a:hover {
  color: #0c4d80;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol {
  list-style: none;
}

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

.site-wrapper {
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.text-center { text-align: center; }
.pt-50 { padding-top: 50px; }
.pb-50 { padding-bottom: 50px; }
.pb-70 { padding-bottom: 70px; }
.mt-30 { margin-top: 30px; }
.mb-50 { margin-bottom: 50px; }
.border-none { border: none !important; }

/* ==========================================================================
   全站统一按钮基础规范: 经典环保品牌绿 (#28a745) + 6px 现代微圆角 + 悬浮动效
   ========================================================================== */
.btn,
.btn-primary,
.btn-green,
input[type="submit"],
button[type="submit"]:not(.banner-slider-arrow):not(.topbar-search-btn):not(.header-search-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #28a745;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.25);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover,
.btn-primary:hover,
.btn-green:hover,
input[type="submit"]:hover,
button[type="submit"]:not(.banner-slider-arrow):not(.topbar-search-btn):not(.header-search-btn):hover {
  background-color: #218838;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.35);
}

/* 2. Topbar (对标参考站深蓝顶栏) */
.site-topbar {
  background-color: #084b8a;
  color: #ffffff;
  font-size: 13px;
  padding: 6px 0;
}

.topbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-left {
  display: flex;
  gap: 24px;
  align-items: center;
}

.topbar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.topbar-item i {
  color: #ffffff;
  font-size: 12px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 顶部搜索框 (放置于小地球旁) */
.topbar-search-wrap {
  display: inline-flex;
  align-items: center;
}

.topbar-search-form {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 20px;
  padding: 0 4px 0 12px;
  height: 30px;
  transition: all 0.25s ease;
}

.topbar-search-form:focus-within {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.topbar-search-input {
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 12px;
  width: 130px;
  outline: none;
  transition: width 0.25s ease, color 0.25s ease;
}

.topbar-search-input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

.topbar-search-form:focus-within .topbar-search-input {
  color: #1e293b;
  width: 165px;
}

.topbar-search-form:focus-within .topbar-search-input::placeholder {
  color: #94a3b8;
}

.topbar-search-btn {
  border: none !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  width: 26px !important;
  height: 26px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.2s ease !important;
}

.topbar-search-form:focus-within .topbar-search-btn {
  color: #084b8a !important;
}

.topbar-search-btn:hover,
.topbar-search-form:focus-within .topbar-search-btn:hover {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #007bff !important;
}

/* 顶部地球图标语言切换器 (鼠标悬停小地球即显，无需点击，3列工整布局) */
.topbar-lang-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 防鼠标移出过快断开的无缝桥接区域 */
.topbar-lang-dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 12px;
}

.lang-globe-btn {
  background: none;
  border: none;
  color: #ffffff;
  font-size: 17px;
  cursor: pointer;
  padding: 5px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.topbar-lang-dropdown:hover .lang-globe-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.lang-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #ffffff !important;
  width: 520px;
  max-width: 90vw;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 14px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 99999;
}

/* 只要鼠标悬停在 .topbar-lang-dropdown 上，立即浮现，无需点击 */
.topbar-lang-dropdown:hover .lang-dropdown-menu,
.topbar-lang-dropdown:focus-within .lang-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* 3 列 Grid 网格 */
.ys-lang-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 8px;
  margin: 0;
  padding: 0;
}

.ys-lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: #334155;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.ys-lang-item:hover {
  background-color: #f1f5f9;
  color: #116eb8;
}

.ys-lang-item.is-active {
  background-color: #e0f2fe;
  color: #0369a1;
  font-weight: 600;
}

.ys-lang-flag {
  width: 18px;
  height: 13.5px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.ys-lang-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ys-lang-check {
  font-size: 11px;
  color: #0284c7;
  margin-left: auto;
}

@media (max-width: 600px) {
  .lang-dropdown-menu {
    width: 320px;
    right: -20px;
  }
  .ys-lang-grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }
}


.btn-topbar-quote {
  background: #28a745;
  color: #ffffff;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 6px;
  font-size: 12px;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.25);
  transition: all 0.25s ease;
}

.btn-topbar-quote:hover {
  background: #218838;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.35);
}

/* 3. Header & Navigation (对标参考站菜单高亮小药丸) */
.site-header {
  background: #ffffff;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 85px;
}

.header-logo .logo-link {
  display: flex;
  align-items: center;
}

.site-logo-img {
  width: 150px;
  height: auto;
  max-height: 58px;
  object-fit: contain;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 18px;
}

.menu-item {
  position: relative;
}

.menu-item > a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  padding: 8px 16px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.menu-item > a:hover {
  color: #116eb8;
}

/* 参考站当前激活项绿色/品牌色药丸按钮 */
.menu-item.current-menu-item > a {
  background-color: #28a745;
  color: #ffffff;
}

.nav-arrow {
  font-size: 10px;
  margin-left: 3px;
}

.sub-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 320px;
  width: max-content;
  max-width: 390px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1001;
}

/* 顶部防断连透明桥接 */
.sub-menu::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: transparent;
}

.menu-item:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.sub-menu li {
  position: relative;
  margin: 0;
  padding: 0;
}

/* 二级级联子菜单 (Flyout Submenu) */
.sub-sub-menu {
  position: absolute;
  top: -8px;
  left: calc(100% - 4px);
  min-width: 250px;
  width: max-content;
  max-width: 320px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
  padding: 8px 0;
  margin: 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1005;
}

/* 左右防移出过快透明防抖桥接 */
.sub-sub-menu::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 14px;
  background: transparent;
}

.sub-menu li.has-sub-sub-menu:hover > .sub-sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.sub-menu li a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #334155 !important;
  text-decoration: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #f8fafc;
  transition: all 0.15s ease !important;
}

.sub-menu li a:hover {
  background-color: #f1f5f9 !important;
  color: #116eb8 !important;
  padding-left: 22px !important;
}

.sub-menu-arrow {
  font-size: 11px;
  color: #94a3b8;
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sub-menu li a:hover .sub-menu-arrow {
  opacity: 1;
  color: #116eb8;
  transform: translateX(3px);
}

/* 导航右侧产品搜索框 */
.header-search-wrap {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.header-search-form {
  display: flex;
  align-items: center;
  position: relative;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.25s ease;
}

.header-search-form:focus-within {
  border-color: #116eb8;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(17, 110, 184, 0.12);
}

.header-search-input {
  border: none;
  background: transparent;
  padding: 7px 14px 7px 16px;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  width: 170px;
  transition: width 0.3s ease;
}

.header-search-input:focus {
  width: 210px;
}

.header-search-btn {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  padding: 0 14px 0 6px;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-search-btn:hover {
  color: #116eb8;
}

.mobile-toggle-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}

.mobile-toggle-btn span {
  width: 24px;
  height: 2px;
  background: #1e293b;
}

/* 4. Banner Section (通栏高清工业全景轮播 Slider) */
.banner-section-ylink {
  background: #f8fafc;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.banner-slider-track {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.banner-slide-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
  z-index: 1;
}

/* 第一项作为流式占位支撑容器高度 */
.banner-slide-item:first-child {
  position: relative;
}

.banner-slide-item.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  z-index: 2;
}

.banner-link {
  display: block;
  width: 100%;
  height: 100%;
}

.banner-img-full {
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: cover;
  display: block;
}

/* 轮播切换左右箭头 */
.banner-slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(8, 75, 138, 0.45);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: all 0.25s ease;
  opacity: 0;
  outline: none;
}

.banner-section-ylink:hover .banner-slider-arrow {
  opacity: 1;
}

.banner-slider-arrow:hover {
  background: #116eb8;
  border-color: #ffffff;
  transform: translateY(-50%) scale(1.08);
}

.banner-slider-arrow.prev-arrow {
  left: 24px;
}

.banner-slider-arrow.next-arrow {
  right: 24px;
}

/* 底部指示圆点 */
.banner-slider-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.2);
  padding: 6px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

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

.slider-dot.is-active {
  background: #28a745;
  width: 26px;
  border-radius: 10px;
}

.slider-dot:hover:not(.is-active) {
  background: #ffffff;
}

/* 5. 核心统一标题 (å Œæ¨ªçº¿å‰¯æ ‡é¢˜ + 黑色粗体主标题) */
.ylink-title-wrapper {
  text-align: center;
  margin-bottom: 40px;
}

.sub-title-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.line-deco {
  display: inline-block;
  width: 25px;
  height: 2px;
  background-color: #28a745;
}

.sub-text {
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
}

.main-title {
  font-size: 28px;
  font-weight: 800;
  color: #1e293b;
  letter-spacing: 0.5px;
}

/* 6. 板块一: 产品分类 (直角工业高级质感排版，带柔和微灰蓝背景) */
.ylink-section.pt-50.pb-50 {
  background-color: #f1f5f9;
  background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
  border-bottom: 1px solid #e2e8f0;
}

.ylink-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ylink-cat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 0 !important; /* 去掉圆角，纯直角硬朗工业风 */
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.ylink-cat-card:hover {
  border-color: #116eb8;
  box-shadow: 0 12px 30px rgba(17, 110, 184, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
  transform: translateY(-4px);
}

.ylink-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  position: relative;
}

/* 全宽度通栏展示大图 (图片居中放置，自适应满宽) */
.ylink-card-img {
  width: 100%;
  height: 290px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 0 !important;
  border: none;
  border-bottom: 1px solid #f1f5f9;
}

.ylink-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* 图片居中放置 */
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

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

/* 卡片文字内容区 (文字水平垂直全居中，去掉MORE字样) */
.ylink-card-content {
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
}

.ylink-card-title {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  text-align: center; /* 文字居中 */
  transition: color 0.2s ease;
}

.ylink-cat-card:hover .ylink-card-title {
  color: #116eb8;
}

/* 底部精美 Accent 指示线 */
.cat-card-bottom-line {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5px;
  background: linear-gradient(90deg, #116eb8 0%, #38bdf8 100%);
  border-radius: 0 0 8px 8px;
  opacity: 0;
  transform: scaleX(0.2);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 分类板块底部 MORE 居中按钮 (甲方需求 3) */
.ylink-cat-more-row {
  text-align: center;
  margin-top: 40px;
}

.ylink-cat-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 48px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ylink-cat-card:hover .cat-card-bottom-line {
  opacity: 1;
  transform: scaleX(1);
}

/* 全站统一标准按钮风格: 经典环保品牌绿 + 6px微圆角 + 悬浮浮起动效 */
.btn-ylink-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #28a745;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 12px 30px;
  border-radius: 6px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.25);
  transition: all 0.25s ease;
}

.btn-ylink-dark:hover {
  background: #218838;
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.35);
  transform: translateY(-2px);
}

/* 7. 板块二: 关于公司 (整体采用浅蓝背景 #ebf3f9，无边框，内嵌4列紧凑计数器) */
.ylink-about-section {
  position: relative;
  background-color: #ebf3f9 !important; /* 整体纯净浅蓝灰背景，无边框 */
  padding: 75px 0 80px;
  color: #0f172a;
}

.ylink-about-section > .container {
  position: relative;
  z-index: 2;
}

.about-split-row {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05); /* 无彩色边框 */
  margin-bottom: 0;
}

.about-left-photo {
  position: relative;
  overflow: hidden;
}

.about-left-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 440px;
  display: block;
}

.about-right-blue-card {
  padding: 40px 44px;
  color: #334155;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: none !important; /* 彻底无边框 */
}

/* 移入卡片内部的标题结构 */
.about-inner-title-wrap {
  margin-bottom: 16px;
}

.about-inner-sub {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #116eb8;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.about-inner-main-title {
  font-size: 30px;
  font-weight: 900;
  color: #0f172a;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.about-p {
  font-size: 14px;
  line-height: 1.75;
  color: #475569;
  margin-bottom: 12px;
}

/* 内嵌紧凑 4 列数据计数器 (位于文字下方、按钮上方) */
.about-inline-funfacts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 20px 0 24px;
  padding: 16px 10px;
  background: #f8fafc;
  border-radius: 8px;
}

.inline-funfact-item {
  text-align: center;
  position: relative;
  padding: 0 4px;
}

.inline-funfact-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: #e2e8f0;
}

.inline-funfact-num {
  font-size: 26px;
  font-weight: 900;
  color: #084b8a;
  line-height: 1.1;
  margin-bottom: 4px;
  font-feature-settings: "tnum";
}

.inline-funfact-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  line-height: 1.3;
}

.btn-about-discover {
  display: inline-block;
  align-self: flex-start;
  background: #28a745;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 28px;
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.25);
  transition: all 0.25s ease;
  text-decoration: none;
}

.btn-about-discover:hover {
  background: #218838;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.35);
  color: #ffffff;
}

/* 8. 板块三: 产品推荐 (4 列产品卡片 - 统一圆角/阴影/等高对齐) */
.ylink-products-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.ylink-p-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ylink-p-card:hover {
  border-color: #116eb8;
  box-shadow: 0 12px 28px rgba(17, 110, 184, 0.14);
  transform: translateY(-4px);
}

.ylink-p-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: inherit;
}

.ylink-p-thumb {
  height: 220px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.ylink-p-thumb img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.ylink-p-card:hover .ylink-p-thumb img {
  transform: scale(1.05);
}

.ylink-p-title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  padding: 14px 16px;
  min-height: 72px;
  line-height: 1.45;
  text-align: center;
  margin: 0;
  transition: color 0.2s ease;
}

.ylink-p-card:hover .ylink-p-title {
  color: #116eb8;
}

/* 9. 全站通用内页 Hero 模板组件 (.site-page-hero) - 尺寸与首页 Banner 对齐 */
.site-page-hero,
.page-banner-section {
  position: relative;
  background: #082444 var(--hero-bg, url('../images/products-hero-cover.jpg')) center center / cover no-repeat !important;
  min-height: 420px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 80px 0 !important;
  color: #ffffff !important;
  overflow: hidden;
}

.site-page-hero::before,
.page-banner-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(8, 36, 68, 0.88) 0%, rgba(17, 110, 184, 0.76) 50%, rgba(5, 20, 42, 0.92) 100%);
  z-index: 1;
}

.site-page-hero .container,
.page-banner-section .container {
  position: relative;
  z-index: 2;
}

.site-page-hero .page-hero-title,
.page-banner-section .page-banner-title {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  margin: 0 0 12px 0 !important;
  letter-spacing: -0.5px;
  line-height: 1.25;
}

.site-page-hero .page-hero-desc,
.page-banner-section .page-banner-desc {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6) !important;
  max-width: 820px;
  margin: 0 auto;
  line-height: 1.65;
}

.breadcrumb-bar {
  background: #f8fafc;
  border-bottom: 1px solid #eef2f6;
  padding: 10px 0;
  font-size: 13px;
}

.breadcrumb-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
}

.breadcrumb-inner a {
  color: #334155;
}

.breadcrumb-inner span:not(.current-crumb) {
  font-size: 0;
  display: inline-flex;
  align-items: center;
}

.breadcrumb-inner span:not(.current-crumb)::before {
  content: ">";
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  display: inline-block;
  transform: scaleY(0.9);
}

.breadcrumb-inner .current-crumb {
  color: #116eb8;
  font-weight: 600;
}

.page-main-section {
  padding: 50px 0 80px;
}

.page-layout-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 35px;
}

.sidebar-widget {
  background: #f8fafc;
  border: 1px solid #eef2f6;
  padding: 18px;
}

.widget-title {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 12px;
  border-bottom: 2px solid #116eb8;
  padding-bottom: 6px;
}

.sidebar-cat-list li {
  margin-bottom: 6px;
}

.sidebar-cat-list a {
  display: block;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #eef2f6;
  color: #334155;
  font-size: 13px;
  font-weight: 500;
}

.sidebar-cat-list a:hover,
.sidebar-cat-list li.active a {
  background: #116eb8;
  color: #ffffff;
  border-color: #116eb8;
}

.products-grid-clean {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.product-card-clean {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card-clean:hover {
  border-color: #116eb8;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(17, 110, 184, 0.14);
}

.product-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: inherit;
}

.product-thumb-clean {
  height: 220px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}

.product-thumb-clean img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.product-card-clean:hover .product-thumb-clean img {
  transform: scale(1.05);
}

.product-title-clean {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  padding: 14px 16px;
  min-height: 72px;
  line-height: 1.45;
  text-align: center;
  margin: 0;
  transition: color 0.2s ease;
}

.product-card-clean:hover .product-title-clean {
  color: #116eb8;
}

/* 产品详情页 */
.product-top-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.p-detail-gallery {
  background: #ffffff;
  border: 1px solid #eef2f6;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 380px;
}

.p-main-img-box img {
  max-height: 330px;
  object-fit: contain;
}

.p-detail-title {
  font-size: 24px;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 10px;
}

.p-model-code {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 16px;
}

.p-brief-desc {
  font-size: 14px;
  line-height: 1.65;
  color: #334155;
  margin-bottom: 24px;
}

.btn-hero-primary {
  background: #28a745;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 11px 26px;
  border-radius: 6px;
  display: inline-block;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.25);
  transition: all 0.25s ease;
}

.btn-hero-primary:hover {
  background: #218838;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.35);
}

.p-content-box {
  background: #ffffff;
  border: 1px solid #eef2f6;
  padding: 30px;
}

.box-section-title {
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 14px;
  border-bottom: 2px solid #116eb8;
  padding-bottom: 8px;
}

.specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.specs-table th, .specs-table td {
  border: 1px solid #eef2f6;
  padding: 10px 14px;
}

.specs-table th {
  background: #f8fafc;
  color: #1e293b;
  font-weight: 700;
  width: 25%;
}

.specs-table td {
  color: #334155;
}

/* 9. 全局快捷询盘 CTA Banner (居中深色圆角容器卡片 + 白色文字) */
.global-cta-section {
  background-color: #f8fafc;
  padding: 70px 0;
}

.global-cta-box {
  position: relative;
  background: #083c6f linear-gradient(135deg, #062e56 0%, #0b5493 60%, #073b6a 100%);
  border-radius: 14px;
  padding: 48px 40px;
  box-shadow: 0 18px 45px rgba(7, 60, 110, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  overflow: hidden;
}

/* 现代几何斜向动感条纹纹理 (对标设计参考图) */
.global-cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/cta-pattern.svg') center center / cover no-repeat;
  pointer-events: none;
  z-index: 1;
}

.global-cta-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.cta-subtitle {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #38bdf8;
  letter-spacing: 2px;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.cta-title {
  font-size: 30px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin-bottom: 0;
  letter-spacing: 0.3px;
}

.cta-desc {
  font-size: 15px;
  color: #e2e8f0;
  line-height: 1.7;
}

.global-cta-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-cta-green {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #28a745;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 6px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35);
}

.btn-cta-green:hover {
  background-color: #218838;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.45);
  color: #ffffff;
}

.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  transition: all 0.25s ease;
}

.btn-cta-outline:hover {
  background-color: #ffffff;
  color: #073c6e;
  border-color: #ffffff;
  transform: translateY(-2px);
}

/* 10. Footer (与网站顶部完全一致的深蓝底色 #084b8a，小标题统一使用品牌绿 #28a745) */
.site-footer {
  background-color: #084b8a; /* 网站顶部一样的深蓝背景色 */
  color: #e2e8f0;
  padding: 70px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 65px;
  margin-bottom: 50px;
}

.footer-brand-title {
  font-size: 24px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: 0.5px;
  display: block;
}

.footer-brand-sub {
  font-size: 11px;
  font-weight: 700;
  color: #28a745; /* 蓝色小标题统一用绿色 */
  letter-spacing: 1.5px;
  display: block;
  margin-top: 4px;
}

.footer-about-text {
  font-size: 14.5px; /* å­—ä½“åŠ å¤§ï¼Œæ ¾æ•£é€šé€  */
  line-height: 1.85;
  color: #cbd5e1;
  margin-top: 16px;
  margin-bottom: 24px;
}

.footer-contact-items {
  display: flex;
  flex-direction: column;
  gap: 14px; /* é—´è· æ‹‰å¼€ */
}

.footer-contact-items li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px; /* 字体加大 */
  color: #f1f5f9;
  line-height: 1.6;
}

.footer-contact-items li i {
  color: #28a745; /* 图标小标题统一用绿色 */
  margin-top: 4px;
  font-size: 14px;
  flex-shrink: 0;
}

.footer-social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.footer-social-links .social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f1f5f9;
  font-size: 16px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.footer-social-links .social-link:hover {
  background-color: #28a745;
  border-color: #28a745;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(40, 167, 69, 0.35);
}

.footer-heading {
  font-size: 17px; /* 标题加粗略大 */
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 10px;
}

.footer-heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background-color: #28a745;
}

.footer-menu-links {
  display: flex;
  flex-direction: column;
  gap: 12px; /* 间距拉开 */
}

.footer-menu-links li a {
  color: #cbd5e1;
  font-size: 14px; /* 字体加大 */
  transition: all 0.2s ease;
  display: inline-block;
  line-height: 1.5;
}

.footer-menu-links li a:hover {
  color: #ffffff;
  padding-left: 6px;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
}

.footer-bottom-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px; /* 字体加大 */
  color: #94a3b8;
}

.footer-bottom-badge {
  color: #94a3b8;
  font-size: 13px;
}

/* 11. 关于我们 (About Us 内页高级工业排版) */
.about-clean-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}

.about-clean-thumb {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  height: 100%;
  min-height: 380px;
}

.about-clean-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.section-sub-title {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #116eb8;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.section-main-title {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.3;
  margin-bottom: 16px;
}

.about-clean-desc {
  font-size: 14px;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 14px;
}

.about-feature-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
}

.about-feature-list li i {
  color: #28a745;
  font-size: 16px;
}

.about-funfacts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.about-funfact-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.about-funfact-icon {
  font-size: 28px;
  color: #116eb8;
  margin-bottom: 10px;
}

.about-funfact-num {
  font-size: 36px;
  font-weight: 900;
  color: #084b8a;
  line-height: 1;
  margin-bottom: 6px;
}

.about-funfact-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.about-caps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-cap-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 32px 26px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.about-cap-card:hover {
  transform: translateY(-4px);
  border-color: #116eb8;
  box-shadow: 0 12px 28px rgba(17, 110, 184, 0.12);
}

.cap-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #e0f2fe;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
}

.cap-title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.cap-desc {
  font-size: 13px;
  color: #64748b;
  line-height: 1.7;
}

/* 12. 响应式规则 */
@media (max-width: 1024px) {
  .ylink-cat-grid,
  .ylink-products-row,
  .banner-metrics-row,
  .ylink-funfacts-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .about-split-row {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .topbar-left {
    display: none;
  }
  .topbar-right {
    width: 100%;
    justify-content: center;
    gap: 12px;
  }
  .topbar-search-input {
    width: 110px;
  }
  .topbar-container {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
  .header-nav {
    position: fixed;
    top: 85px;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 20px;
    display: none;
  }
  .header-nav.active {
    display: block;
  }
  .nav-menu {
    flex-direction: column;
    align-items: flex-start;
  }
  .mobile-toggle-btn {
    display: flex;
  }
  .banner-main-headline {
    font-size: 26px;
  }
  .ylink-cat-grid,
  .ylink-products-row,
  .banner-metrics-row,
  .ylink-funfacts-row,
  .products-grid-clean,
  .page-layout-grid,
  .product-top-grid,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .funfact-col {
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }
}

/* 隐藏右下角 TranslatePress 默认悬浮框，以保持顶部切换器为唯一入口 */
.trp-language-switcher-container,
#trp-floater-ls,
.trp-floater-ls-disabled {
  display: none !important;
}

/* ==========================================================================
   全局侧边栏 CTA 询盘/工程支持小部件 (深海蓝高质感卡片)
   ========================================================================== */
.sidebar-rfq-widget {
  position: relative !important;
  background: #083c6f linear-gradient(135deg, #062e56 0%, #0b5493 60%, #073b6a 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  padding: 28px 22px !important;
  box-shadow: 0 12px 30px rgba(7, 60, 110, 0.2) !important;
  color: #ffffff !important;
  margin-top: 24px !important;
  overflow: hidden !important;
}

.sidebar-rfq-widget::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/cta-pattern.svg') center center / cover no-repeat;
  pointer-events: none;
  opacity: 0.85;
  z-index: 1;
}

.sidebar-rfq-widget > * {
  position: relative;
  z-index: 2;
}

.sidebar-rfq-widget .widget-title {
  color: #ffffff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.sidebar-rfq-widget .widget-title i {
  color: #38bdf8 !important;
  font-size: 18px !important;
}

.sidebar-rfq-widget .rfq-tip {
  color: #e2e8f0 !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  margin-bottom: 18px !important;
}

.sidebar-rfq-widget .btn-sidebar-rfq {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background-color: #28a745 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 11px 0 !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35) !important;
  transition: all 0.25s ease !important;
}

.sidebar-rfq-widget .btn-sidebar-rfq:hover {
  background-color: #218838 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.45) !important;
  color: #ffffff !important;
}

/* ==========================================================================
   æ ¿å —å››: 行业解决方案 (å¯¹æ ‡ä¸Šå¸‚å…¬å ¸ä¹”å ˆé‡Œ Chogori-tech æ‰‹é£Žç ´å±•å¼€å¤§åŽ‚æž¶æž„)
   ========================================================================== */
.ys-solution-section {
  background-color: #ebf3f9 !important; /* 清爽浅蓝背景 */
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}

/* 动感工业几何条纹 SVG 纹理 (与底部 CTA 风格类似，精美呼应) */
.ys-solution-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../images/solution-pattern.svg') center center / cover no-repeat;
  pointer-events: none;
  z-index: 1;
}

.ys-solution-section > .container {
  position: relative;
  z-index: 2;
}

/* æ¨ªå ‘æ‰‹é£Žç ´å®¹å™¨ */
.chogori-accordion-wrap {
  display: flex;
  gap: 14px;
  height: 460px;
  width: 100%;
}

.chogori-card {
  flex: 1;
  min-width: 0;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s ease;
  cursor: pointer;
  background: #0f172a;
}

.chogori-card a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
  overflow: hidden;
}

.chogori-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.chogori-card .card-overlay {
  position: absolute;
  inset: 0;
  /* 仅保留底部从下往上的柔和微渐变，上半部完全透明露出通透原图，彻底告别灰蒙阴天感 */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.35) 75%, rgba(0, 0, 0, 0.85) 100%);
  z-index: 2;
  pointer-events: none;
}

/* 默认未展开态 (Collapsed) */
.card-collapsed-info {
  position: absolute;
  bottom: 24px;
  left: 0;
  right: 0;
  padding: 0 12px;
  text-align: center;
  z-index: 3;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.collapsed-icon {
  font-size: 26px;
  color: #ffffff;
  margin-bottom: 8px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
}

.collapsed-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 默认未激活/非hover态：文字变窄时极速隐去，绝不挤压 */
.card-expanded-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 40%, rgba(0, 0, 0, 0.95) 100%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  /* 关键：鼠标离开时 0.05s 瞬时淡出，绝无延迟，彻底消除一行一个字母的挤压现象 */
  transition: opacity 0.05s linear 0s, transform 0.05s linear 0s;
}

.expanded-left-icon {
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  flex-shrink: 0;
}

.expanded-text {
  flex: 1;
  min-width: 300px; /* 固定最小阅读宽度，即便外层动画收缩也坚决不折行压缩文字 */
}

.expanded-title {
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px 0;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  white-space: normal;
  word-break: break-word;
}

.expanded-sub {
  font-size: 13px;
  color: #e2e8f0;
  margin: 0;
  line-height: 1.5;
  white-space: normal;
  word-break: break-word;
}

.expanded-arrow-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #28a745; /* 统一为主题经典绿色 */
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.4);
  transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

/* 鼠标悬停 / 激活态规则 (展开卡片给予 3.4 权重，未激活 0.85 权重) */
.chogori-card {
  flex: 0.85;
}

.chogori-card.is-active,
.chogori-card:hover {
  flex: 3.4;
}

.chogori-card.is-active img,
.chogori-card:hover img {
  transform: scale(1.08);
}

.chogori-card.is-active .card-collapsed-info,
.chogori-card:hover .card-collapsed-info {
  opacity: 0;
  transform: translateY(10px);
}

/* 展开态：等卡片展开至稳定宽度后，再优雅展现文字 */
.chogori-card.is-active .card-expanded-info,
.chogori-card:hover .card-expanded-info {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity 0.3s ease 0.18s, transform 0.3s ease 0.18s;
}

.chogori-card:hover .expanded-arrow-btn {
  transform: scale(1.1) translateX(3px);
  background-color: #218838;
  box-shadow: 0 6px 18px rgba(40, 167, 69, 0.5);
}

/* 响应式适配 */
@media (max-width: 1024px) {
  .chogori-accordion-wrap {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }
  .chogori-card,
  .chogori-card.is-active,
  .chogori-card:hover {
    flex: none;
    height: 220px;
    width: 100%;
  }
  .card-collapsed-info {
    display: none;
  }
  .card-expanded-info {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 640px) {
  .expanded-title {
    font-size: 16px;
  }
  .expanded-sub {
    font-size: 11px;
  }
  .expanded-arrow-btn {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }
}

/* 12. 返回顶部悬浮按钮 (Back To Top Floating Button) */
.back-to-top {
  position: fixed;
  bottom: 35px;
  right: 35px;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #084b8a;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(8, 75, 138, 0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
}

.back-to-top i {
  font-size: 16px;
  color: #ffffff;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background-color: #28a745;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}