/*!
 * site.css — 站点主样式表（取代旧的 rsetcss.css）
 * v20260606
 *
 * 结构：
 *   1. 设计变量 :root       ← 换品牌色 / 换字体只改这里
 *   2. 基础重置              body / a / img / 焦点框 / skip link
 *   3. 原子工具类            .fs* .lh* .py* .h* 等（已按本站用量裁剪）
 *   4. 站点组件              导航 / 面包屑 / 分页 / 表单 / 轮播 / 悬浮按钮 / FAQ
 *   5. 产品与案例目录网格     products / collections / case-studies 三页共用
 *   6. 其它修正              打印样式、移动端点击区
 *
 * 全站颜色 100% 走 :root 变量，改第 1 节即可，无需全局搜索替换。
 */

/* ================================================================== *
 * 1. 设计变量
 * ================================================================== */
:root {
  /* ---- 品牌色：换新站主要就改这 5 个 ---- */
  --brand:        #625dff;   /* 主色：按钮、链接、图标、选中态、焦点框 */
  --brand-strong: #4f49e6;   /* 主色加深：浅底上的小字，保证对比度 ≥ 4.5:1 */
  --brand-light:  #9d99ff;   /* 主色提亮：黑底上的链接 hover */
  --brand-tint:   #f3f3ff;   /* 浅背景：浅色板块、卡片图底、菜单 hover */
  --brand-line:   #dedaff;   /* 浅边框：FAQ、卡片、浅色 CTA */

  /* ---- 中性色：通常不用改 ---- */
  --ink:         #121212;    /* 主文字 + 深色板块背景 */
  --ink-muted:   #69647d;    /* 辅助文字：说明、字段名、日期 */
  --line:        #e5e5eb;    /* 普通边框、分隔线 */
  --surface:     #ffffff;    /* 白底 */
  --surface-alt: #fafafa;    /* 浅灰底：分页等 */

  /* ---- 功能色：第三方品牌色，不要改 ---- */
  --wa:        #25d366;      /* WhatsApp 官方绿（只用于图标） */
  --wa-strong: #0f7a41;      /* 按钮底色，白字对比度 5.4:1 达标 */
  --wa-dark:   #0b6b35;      /* 按钮 hover */
  --danger:    #b42318;      /* 表单报错 */

  /* ---- 字体：跟随系统，不下载任何 webfont ---- */
  --font-sans: sans-serif;

  /* ---- 其它 ---- */
  --card-shadow: rgba(98, 93, 255, .12);  /* 产品目录卡片 hover 阴影，独立设定，不跟随 --brand */
  --radius: 10px;
  --focus-ring: 2px solid var(--brand);

  /* ---- 覆盖第三方库主题色，改上面的 --brand 即可全站生效 ---- */
  --swiper-theme-color: var(--brand);   /* Swiper 分页点、箭头 */
  --bs-border-color: var(--line);
  --bs-light-border-subtle: var(--line);
}

/* ================================================================== *
 * 2. 基础重置
 * ================================================================== */
body {
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

p { margin-top: 0; margin-bottom: 10px; }
ol, ul, dl { padding: 0; margin: 0; list-style: none; }

a, ins { color: var(--ink); text-decoration: none; background-color: transparent; }
a:hover { color: var(--ink); text-decoration: none; }

img { border: 0; max-width: 100%; height: auto; }

.text-dark { color: var(--ink) !important; }
.border-light { border-color: var(--line) !important; }

/* --- 焦点可见性 -------------------------------------------------- *
 * 旧版是 *:focus{outline:0}，键盘用户完全看不到焦点位置。
 * 现在：鼠标点击不显示焦点框，键盘 Tab 时显示。
 * ---------------------------------------------------------------- */
*:focus { box-shadow: none; outline: 0; }

*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* 跳到主内容（键盘 Tab 第一下出现） */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 12px 20px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  left: 0;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================================================== *
 * 3. 原子工具类（按本站实际用量裁剪）
 * ================================================================== */
.fs13{font-size:13px!important;}
.fs14{font-size:14px!important;}
.fs15{font-size:15px!important;}
.fs16{font-size:16px!important;}
.fs17{font-size:17px!important;}
.fs18{font-size:18px!important;}
.fs20{font-size:20px!important;}
.fs22{font-size:22px!important;}
.fs24{font-size:24px!important;}
.fs30{font-size:30px!important;}
.fs32{font-size:32px!important;}
.fs34{font-size:34px!important;}
.fs36{font-size:36px!important;}
.fs42{font-size:42px!important;}
.fs44{font-size:44px!important;}
.lh12{line-height:1.2!important;}
.lh14{line-height:1.4!important;}
.lh16{line-height:1.6!important;}
.lh17{line-height:1.7!important;}
.lh18{line-height:1.8!important;}
.lh20{line-height:2!important;}
.top0{top:0px!important;}
.fw400{font-weight:400!important;}
.fw600{font-weight:600!important;}
.fw700{font-weight:700!important;}
.fw800{font-weight:800!important;}
.fw900{font-weight:900!important;}
.gap10{gap:10px!important;}
.h30{height:30px!important;}
.h40{height:40px!important;}
.h60{height:60px!important;}
.h80{height:80px!important;}
.h100{height:100px!important;}
.h220{height:220px!important;}
/* 固定高度 + w-100 的图改为裁剪而不是拉伸；盒子尺寸不变，布局零影响 */
img.h220{object-fit:cover;}
.py40{padding-top:40px!important;padding-bottom:40px!important;}
.py50{padding-top:50px!important;padding-bottom:50px!important;}
.py80{padding-top:80px!important;padding-bottom:80px!important;}
.mbp15 p{margin-bottom:15px!important;}
.mbli10 li{margin-bottom:10px!important;}
.mbli15 li{margin-bottom:15px!important;}
.bg_none{background:none!important;}

@media (max-width:768px){
  .m_fs12{font-size:12px!important;}
  .m_fs13{font-size:13px!important;}
  .m_fs14{font-size:14px!important;}
  .m_fs15{font-size:15px!important;}
  .m_fs16{font-size:16px!important;}
  .m_fs18{font-size:18px!important;}
  .m_fs20{font-size:20px!important;}
  .m_fs22{font-size:22px!important;}
  .m_fs24{font-size:24px!important;}
  .m_fs28{font-size:28px!important;}
  .m_fs32{font-size:32px!important;}
  .m_lh16{line-height:1.6!important;}
  .m_h50{height:50px!important;}
  .m_py20{padding-top:20px!important;padding-bottom:20px!important;}
  .m_py50{padding-top:50px!important;padding-bottom:50px!important;}
}

/* 首页品牌 Logo：保留既有高度，按源图比例自动计算宽度 */
img.h60.m_h50 {
  width: auto;
  object-fit: contain;
}

/* 显示/隐藏断点 */
.cxs1200,.cxs992,.cxs768{display:none;}
@media (max-width:1199.98px){ .cxs1200{display:block!important;} .bxs1200{display:none!important;} }
@media (max-width:991.98px){ .cxs992{display:block!important;} .bxs992{display:none!important;} }
@media (max-width:768px){ .cxs768{display:block!important;} .bxs768{display:none!important;} }

/* 992–1199.98px：页头提前切换为汉堡菜单，避免品牌、导航与 CTA 相互挤压。
   规则限定在 header 内，不影响 footer 中复用的 .bxs992。 */
@media (min-width:992px) and (max-width:1199.98px) {
  header .cxs992 { display:block!important; }
  header .bxs992 { display:none!important; }
  header > .container > .row > div:first-child,
  header > .container > .row > div:last-child {
    flex:0 0 50%;
    width:50%;
  }
}

/* ================================================================== *
 * 4. 站点组件
 * ================================================================== */

/* --- 颜色工具 ---------------------------------------------------- */
.color_zi { color: var(--brand); }
.bg_zi { background-color: var(--brand); }
.bg_he { background-color: var(--ink); }
.color_qianzi { color: var(--brand-tint); }
.bg_qianzi { background-color: var(--brand-tint); }
.bg_qianzi.border { border-color: var(--brand-line) !important; }
.color_white_a a { color: #ffffff; }
.border.active { background-color: var(--brand); }

/* 浅底上的紫色小字改用加深版，保证对比度达标 */
.bg_qianzi .color_zi,
.bg-light .color_zi,
.article-summary .color_zi { color: var(--brand-strong); }

a.color_zi:hover { color: var(--ink); font-weight: 700; }

header button[data-bs-target="#mobile_right_nav"] .icon { fill: var(--ink); }

.faq_card > button { color: var(--ink); -webkit-text-fill-color: var(--ink); }
.faq_card .collapse > div { color: var(--ink); }

.btn_dan { transition: opacity .2s ease, transform .2s ease; }
.btn_dan:hover { opacity: .85; }
.hover_an:hover { transform: translateY(-1px); }

/* --- 正文营销 CTA -------------------------------------------------
 * 仅在 main 内显式标记的营销按钮生效，不影响页头菜单、联系页专用按钮、
 * FAQ、轮播、悬浮 WhatsApp 或其它功能控件。
 * 按钮总宽度放得下时横排，放不下时由 flex-wrap 自动换到下一行。
 * ---------------------------------------------------------------- */
main .site-cta {
  box-sizing: border-box;
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

main .site-cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

main .site-cta-group > .site-cta {
  flex: 0 0 auto;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.cta_light_btn { color: var(--ink); }
.cta_light_btn:hover { color: var(--brand); }

footer a { transition: color .2s ease; }
/* 黑底上用亮一档的紫，保证对比度 */
footer a:hover,
footer a:focus-visible { color: var(--brand-light) !important; }
footer .color_white_a > a[href="/"]:hover,
footer .color_white_a > a[href="/"]:focus-visible { color: #ffffff !important; }

.show_m { transition: all .6s ease; }

@media (min-width:1200px) {
  .container { width: calc(100% - 24px); max-width: 1220px; }
}

/* --- 正文内链 ----------------------------------------------------- *
 * 只用于正文里的自然内链，不要用在按钮、导航、页脚、卡片上。
 * ----------------------------------------------------------------- */
.content-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}
.content-link:hover,
.content-link:focus-visible { color: var(--brand); }
.content-link:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 2px; }

/* 深色区块内使用 */
.content-link--light { color: #ffffff; }
.content-link--light:hover,
.content-link--light:focus-visible { color: #ffffff; }
.content-link--light:focus-visible { outline-color: #ffffff; }

/* --- 桌面主导航 --------------------------------------------------- */
.header-menu .header-menu-ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
}
.header-menu .header-menu-ul > li { flex: 0 0 auto; }
.header-menu .header-menu-ul li { display: inline-block; position: relative; }

.header-menu .header-menu-ul li a {
  padding: 15px;
  display: flex;
  font-size: 16px;
  color: var(--ink);
  position: relative;
  font-weight: 700;
  align-items: center;
}
.header-menu .header-menu-ul li a:hover { color: var(--brand); }

.header-menu .header-menu-ul li .sub-menu {
  display: none;
  position: absolute;
  top: 100%;          /* 贴着链接底边，改导航字号/内边距也不会裂缝或盖住 */
  left: -5px;
  background: var(--surface);
  width: 320px;
  z-index: 99;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 12px 32px rgba(18, 18, 18, .12);
}

/* 关键：:focus-within 让键盘 Tab 也能进入二级菜单（旧版只有 JS 的 mouseenter） */
.header-menu .header-menu-ul li:hover > .sub-menu,
.header-menu .header-menu-ul li:focus-within > .sub-menu { display: block; }

.header-menu .header-menu-ul li .sub-menu li { width: 100%; }
.header-menu .header-menu-ul li .sub-menu li a {
  font-size: 14px;
  padding: 12px;
  font-weight: 400;
  border-radius: 6px;
}
.header-menu .header-menu-ul li .sub-menu li a:hover { background-color: var(--brand-tint); }
.header-menu .header-menu-ul li .sub-menu li a:after { display: none; }
.header-menu .header-menu-ul li .sub-menu .sub-menu { position: absolute; left: 100%; top: 0; }

/* 带下级的菜单加一个小箭头 */
.header-menu .header-menu-ul li.has-submenu > a:after {
  content: "";
  width: 6px; height: 6px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.header-menu .header-menu-ul li.has-submenu:hover > a:after,
.header-menu .header-menu-ul li.has-submenu:focus-within > a:after {
  transform: rotate(-135deg) translateY(-2px);
}

/* 当前页高亮（由 site.js 自动加 class，不需要逐页手写） */
.header-menu .header-menu-ul li.current-menu-item > a,
.header-menu .header-menu-ul li.current-menu-parent > a,
.header-menu .header-menu-ul li.current-menu-ancestor > a {
  color: var(--brand);
}
.header-menu .header-menu-ul > li.current-menu-item > a,
.header-menu .header-menu-ul > li.current-menu-parent > a,
.header-menu .header-menu-ul > li.current-menu-ancestor > a {
  text-decoration-line: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* --- 面包屑 ------------------------------------------------------- */
.breadcrumb_loop {
  list-style: none; padding: 0; background: none; margin: 0;
  display: flex; font-size: 12px; font-weight: 300; line-height: 1.4;
}
.breadcrumb_loop li { display: flex; align-items: center; margin: 0; }
.breadcrumb_loop li a { display: flex; }
.breadcrumb_loop li a:after { content: '>'; margin: 0 5px; color: var(--ink-muted); }
.breadcrumb_loop li:last-child a:last-child:after { display: none; }
@media (max-width:768px) {
  .breadcrumb_loop { white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
}

/* --- 分页 --------------------------------------------------------- */
.posts-nav { text-align: center; margin-bottom: 30px; }
.posts-nav .page-numbers {
  color: var(--ink-muted);
  display: inline-block;
  padding: 10px 15px;
  font-size: 12px;
  background-color: var(--surface-alt);
  margin: 0 2px;
  transition: all .3s;
}
.posts-nav .current,
.posts-nav .page-numbers:hover { color: #ffffff; background-color: var(--brand); }

/* --- 产品 tab --------------------------------------------------- */
.products_tab_name { display: flex; align-items: center; margin-bottom: 40px; }
.products_tab_name button {
  font-size: 16px;
  margin-right: 30px;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 3px solid var(--line);
  padding-bottom: 10px;
  font-weight: bold;
  white-space: nowrap;
  background: none;
  border-left: 0; border-right: 0; border-top: 0;
}
.products_tab_name button.active { border-bottom-color: var(--brand); color: var(--brand); }

/* --- 表单 --------------------------------------------------------- */
.biaodan p { margin: 0; }
.biaodan input,
.biaodan select,
.biaodan textarea {
  width: 100%;
  padding: 10px 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.biaodan input:focus-visible,
.biaodan select:focus-visible,
.biaodan textarea:focus-visible { border-color: var(--brand); outline: var(--focus-ring); outline-offset: 0; }
.biaodan input.wpcf7-submit {
  background: var(--brand);
  padding: 15px;
  color: #ffffff;
  font-size: 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
.biaodan input.wpcf7-submit:hover { background: var(--brand-strong); }
.biaodan .screen-reader-response { display: none; }
.biaodan .wpcf7-form-control-wrap { position: relative; }
.biaodan .wpcf7-not-valid-tip {
  position: absolute; right: 10px; top: 0;
  color: var(--danger); font-weight: 300; font-size: 12px;
}
.biaodan .wpcf7-response-output { margin: 10px 0; text-align: center; }

/* --- 移动端抽屉导航 ------------------------------------------------ */
#mobile_right_nav { width: 300px; border: none; overflow-y: auto; }
#mobile_right_nav .menu-zk li { line-height: 60px; position: relative; }
#mobile_right_nav .menu-zk li a {
  font-size: 16px; display: block;
  border-bottom: 1px solid var(--line);
  padding: 0 30px;
}
#mobile_right_nav .menu-zk li:last-child > a { border-bottom: none; }

#mobile_right_nav .menu-zk .sub-menu { background: var(--surface); }
#mobile_right_nav .menu-zk .sub-menu[hidden] { display: none; }
#mobile_right_nav .menu-zk .sub-menu li { line-height: 50px; }
#mobile_right_nav .menu-zk .sub-menu li a {
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-left: 30px;
}

#mobile_right_nav .menu-zk li.current-menu-item > a { color: var(--brand); font-weight: 700; }

/* 展开按钮：保留 44×44 点击区，视觉上仅显示紫色 + / − */
.submenu-toggle {
  position: absolute;
  right: 13px;
  top: 8px;
  width: 44px;                                  /* 满足 44×44 最小点击区 */
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 2;
}
.submenu-toggle > span,
.submenu-toggle:before,
.submenu-toggle:after { pointer-events: none; }

.submenu-toggle:before,
.submenu-toggle:after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--brand);
  border-radius: 1px;
  transition: background-color .2s ease, transform .25s ease;
}
.submenu-toggle:before { width: 10px; height: 2px; transform: translate(-50%, -50%); }
.submenu-toggle:after  { width: 2px;  height: 10px; transform: translate(-50%, -50%); }
.submenu-toggle[aria-expanded="true"]:after { transform: translate(-50%, -50%) scaleY(0); }

.submenu-toggle:hover:before,
.submenu-toggle:hover:after { background: var(--brand-strong); }

/* --- 产品主图 + 缩略图 --------------------------------------------- */
.product_carousel_thumbs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  scroll-behavior: smooth;
}
.product_carousel_thumbs button {
  position: relative;
  background: none;
  height: calc((100% - 4 * 24px) / 5);
  border: none;
  padding: 0;
  cursor: pointer;
}
.product_carousel_thumbs button img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.product_carousel_thumbs button:after {
  content: ""; position: absolute; inset: 0;
  background: rgb(255 255 255 / 60%);
  pointer-events: none;
  transition: background .3s ease;
}
.product_carousel_thumbs button.active:after { background: rgba(255,255,255,0); }
.product_carousel_thumbs button:before {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .3s ease;
  border-radius: var(--radius);
}
.product_carousel_thumbs button.active:before {
  box-shadow: inset 0 0 0 2px var(--brand), inset 0 0 0 5px #ffffff;
}
[id^="product_carousel"] .carousel-item { transition: all .2s ease; }

@media (max-width:991.98px) {
  .product_carousel_thumbs {
    flex-direction: row;
    gap: 10px;
    height: auto !important;
    overflow: hidden;
    padding-bottom: 4px;
  }
  .product_carousel_thumbs button {
    flex: 0 0 calc((100% - 40px) / 5);
    width: auto; height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
  }
  .product_carousel_thumbs button:nth-child(n+6) { display: none; }
  [id^="product_carousel"] .carousel-control-prev,
  [id^="product_carousel"] .carousel-control-next { display: none; }
}

/* --- Swiper 通用修正 ---------------------------------------------- *
 * 1. slide 等高：卡片文字长短不一时底边不再参差
 * 2. 分页圆点用品牌色
 * 3. 空壳（被 site.js 标记为 skipped）不占位
 * ------------------------------------------------------------------ */
.swiper-slide { height: auto; }
.swiper-slide > * { height: 100%; }

.swiper { padding-bottom: 4px; }

.swiper-pagination-bullet { background: var(--ink-muted); opacity: .35; }
.swiper-pagination-bullet-active { background: var(--brand); opacity: 1; }

.swiper[data-swiper-skipped],
.swiper[hidden] { display: none !important; }

/* 六宫格：不再写死 600px，内容自己撑开 */
.height600 { min-height: 0; }

/* --- 图片 hover 切换 ---------------------------------------------- */
.hover_2 { display: none; }
.hover_pic_show:hover .hover_1 { display: none; }
.hover_pic_show:hover .hover_2 { display: block; }

/* --- WhatsApp 悬浮按钮 -------------------------------------------- */
.float-btn {
  position: fixed;
  right: 22px;
  bottom: 120px;
  z-index: 999;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 999px;
  background: var(--wa-strong);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(15, 122, 65, .28);
  transition: .22s ease;
}
.float-btn:hover {
  transform: translateY(-3px);
  background: var(--wa-dark);
  color: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 122, 65, .38);
}
.float-btn__icon {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #ffffff;
  color: var(--wa);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.float-btn__icon svg { width: 22px; height: 22px; fill: currentColor; }
.float-btn__text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.float-btn__text strong { font-size: 14px; font-weight: 700; }
.float-btn__text small { font-size: 12px; font-weight: 500; }

@media (max-width:768px) {
  .float-btn {
    right: 16px; bottom: 88px;
    width: 54px; height: 54px;
    padding: 0; justify-content: center; border-radius: 50%;
    background: var(--wa-strong);
  }
  .float-btn:hover { transform: none; }
  .float-btn__icon { width: 54px; height: 54px; background: transparent; color: #ffffff; }
  .float-btn__icon svg { width: 29px; height: 29px; }
  .float-btn__text { display: none; }
}
@media (max-width:480px) {
  .float-btn { right: 14px; bottom: 78px; width: 50px; height: 50px; }
  .float-btn__icon { width: 50px; height: 50px; }
  .float-btn__icon svg { width: 27px; height: 27px; }
}

/* 联系页 WhatsApp 按钮（原来写在 HTML 内联 style 里） */
.contact-whatsapp-btn {
  background: var(--wa-strong);
  color: #ffffff;
  border-radius: 6px;
  transition: background .2s ease;
}
.contact-whatsapp-btn:hover,
.contact-whatsapp-btn:focus-visible { background: var(--wa-dark); color: #ffffff; }

.contact-card {
  border-color: var(--brand-line) !important;
  transition: border-color .2s ease, transform .2s ease;
}
.contact-card:hover { border-color: var(--brand-line) !important; }
.contact-email-link { transition: color .2s ease; }
.contact-email-link:hover { color: var(--brand) !important; }

/* --- 博客卡片 ------------------------------------------------------ */
.blog-card { transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.blog-card:hover {
  border-color: var(--brand-line) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(18, 18, 18, .08);
}
.blog-card-image { display: block; overflow: hidden; }
.blog-card-image img { transition: transform .45s ease; }
.blog-card:hover .blog-card-image img { transform: scale(1.05); }

/* --- 产品目录方图卡片 -------------------------------------------- */
.product-directory-card {
  background: var(--surface);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.product-directory-card:hover {
  border-color: var(--brand) !important;
  box-shadow: 0 12px 30px var(--card-shadow);
  transform: translateY(-4px);
}
.product-directory-card img {
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform .35s ease;
}
.product-directory-card:hover img { transform: scale(1.025); }

/* ================================================================== *
 * 5. 产品 / 案例目录网格
 *    原来是 3 个页面各内联一份一模一样的 <style>，现在收到这里。
 * ================================================================== */
.directory-section,
.directory-section * { box-sizing: border-box; }

.directory-section { background: var(--brand-tint); padding: 80px 6%; }
.directory-section .container { width: 100%; max-width: none; padding-right: 0; padding-left: 0; }
.directory-section .case-note { color: var(--ink-muted); font-size: 14px; }

.directory-section .products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.directory-section .product-card {
  background: var(--surface);
  border: 1px solid var(--brand-line);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .35s ease, transform .35s ease;
}
.directory-section .product-card:hover {
  border-color: var(--brand);
  transform: translateY(-8px);
}
.directory-section .product-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--brand-tint);
}
.directory-section .product-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}
.directory-section .product-card:hover .product-img img { transform: scale(1.07); }
.directory-section .product-info { padding: 22px 24px 26px; }
.directory-section .product-name {
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.35;
  margin-bottom: 8px;
  color: var(--ink);
}
.directory-section .product-desc {
  color: var(--ink-muted);
  font-size: .87rem;
  line-height: 1.65;
  margin: 0 0 16px;
}
.directory-section .product-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: .8rem; }
.directory-section .meta-item { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.directory-section .meta-key {
  color: var(--ink-muted);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.directory-section .meta-val { color: var(--ink); font-weight: 700; }
.directory-section .product-quote-btn {
  display: block;
  margin-top: 16px;
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
  text-align: center;
  padding: 10px;
  border-radius: 7px;
  font-weight: 700;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.directory-section .product-quote-btn:hover,
.directory-section .product-quote-btn:focus-visible {
  background: var(--brand);
  color: #ffffff;
}

@media (max-width:1100px) {
  .directory-section .products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:600px) {
  .directory-section { padding: 64px 5%; }
  .directory-section .products-grid { grid-template-columns: 1fr; gap: 18px; }
  .directory-section .product-info { padding: 18px; }
  .directory-section .product-meta { flex-wrap: wrap; gap: 14px; }
}

/* ================================================================== *
 * 6. 其它修正
 * ================================================================== */

/* 页头 logo 固定宽高，消除加载时的抖动 */
header .site-logo,
footer .site-logo { width: auto; }

#mobile_right_nav .site-logo {
  width: 40px;
  flex: 0 0 40px;
}

/* offcanvas 抽屉头部：白色 logo 需要深色底才看得清 */
#mobile_right_nav .offcanvas-brand { background-color: var(--brand-tint); }

/* 抽屉关闭按钮：Bootstrap 默认按 1em 算，body 14px 时只有 21×21，
   低于 WCAG 2.2 的 24×24 最小目标尺寸。这里把盒子补到 24，
   ✕ 图标仍按 14px 绘制，视觉大小不变。 */
#mobile_right_nav .btn-close {
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  padding: 5px;
  background-size: 14px auto;
}

/* 手机版权信息固定两行；576px 起恢复单行 */
/* 页头品牌名：只在极窄屏（<360px）隐藏，其余手机尺寸正常显示。
   适用前提：品牌名为「不含空格的单词，约 ≤10 字符」。
   若换成含空格或更长的公司名，必须把这里的 359.98px 往上调（12 字符带空格约需 530px），
   否则品牌名会在页头折成多行、把吸顶页头撑高。 */
@media (max-width:359.98px) {
  header .site-logo + div { display: none; }
}

@media (max-width:575.98px) {
  footer .footer-copyright,
  footer .footer-legal-links { display:block; }
  footer .footer-legal-leading-separator { display:none; }
}

@media (min-width:576px) {
  /* 两段之间允许换行，但每段内部不断开：
     公司名换成长名称时自动变两行，而不是把页面撑出横向滚动条 */
  footer .footer-legal { white-space:normal; }
  footer .footer-copyright,
  footer .footer-legal-links { white-space:nowrap; }
}

/* 打印 */
@media print {
  header, footer, .float-btn, .offcanvas, .swiper-pagination { display: none !important; }
  a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* 文章正文里的内链：浅灰底上用加深的品牌紫，保证 4.5:1 */
.blog-content a:not(.accordion-button),
.blog-content > ul a { color: var(--brand-strong); }

/* ------------------------------------------------------------------ *
 * 正文项目符号列表
 * 原来是 42 处内联 style="list-style:disc;"，收到这里统一管理。
 * ------------------------------------------------------------------ */
.list-disc { list-style: disc; }

/* --- 吸顶页头补偿：锚点 / skip-link 跳转后标题不被页头盖住（改动4） --- */
main > [id],
#main-content { scroll-margin-top: 100px; }

/* body 行高改为 1.5 后，页头/抽屉保持原有紧凑行高，避免吸顶导航变高吃掉视口（改动5） */
header, #mobile_right_nav { line-height: 1; }

/* --- 最小点击区 24×24，WCAG 2.2 Target Size (Minimum)（改动10） --- */
header button[data-bs-target="#mobile_right_nav"] { min-width: 24px; min-height: 24px; }
/* 行内文字链接：用 padding-block 扩大点击区到 >=24px。
   刻意不用 display:inline-block —— 那会让正文里的长链接无法跨行折断。
   已经是块级/按钮的链接（.site-cta / .product-quote-btn / .d-block / 卡片整块）不受影响。 */
main a.color_zi,
main a.content-link,
main a.contact-email-link,
main .article-summary a,
main a.fw700.text-decoration-none,
footer .mbli15 a,
footer .footer-legal a,
footer .color_white_a p a,
.js-toc a,
.breadcrumb_loop a { padding-block: 5px; }

/* 抽屉关闭按钮补到 26×26（图标仍按 14px 绘制，视觉不变） */
#mobile_right_nav .btn-close { width: 26px; height: 26px; }