/* ==========================================================================
   月珠开峰品牌换肤覆盖层 (YZKF Skin)
   标识：YZKF-SKIN-20260715-C4E9
   作用：把源站橙黄配色（#ff6d00/#ffcf1c/#a80207）统一到月珠开峰品牌色系，
         使自研组件（深绿 #1a5f4a）与站点原有样式无缝融合，消除"拼接感"。
   加载顺序：web.css → yzkf-widgets.css → yzkf-skin.css（最后加载，优先级最高）
   ========================================================================== */

:root {
  /* ---- 品牌色板 ---- */
  --yzf-brand-900: #0d3327;
  --yzf-brand-800: #124437;
  --yzf-brand-700: #16513f;
  --yzf-brand: #1a5f4a;          /* 主色：深松绿 */
  --yzf-brand-400: #2d8468;
  --yzf-brand-300: #57a98d;
  --yzf-brand-100: #e3f0eb;

  --yzf-steel-900: #1f2933;
  --yzf-steel-700: #3d4a56;
  --yzf-steel-500: #5b6b7a;
  --yzf-steel-300: #9aa8b3;
  --yzf-steel-200: #dde5ea;
  --yzf-steel-100: #eef2f4;
  --yzf-steel-50: #f5f8f7;

  --yzf-accent: #c8842a;          /* 辅助强调：琥珀（保留金属机械质感） */
  --yzf-accent-light: #e8a851;
  --yzf-white: #fff;

  /* ---- 语义映射（源站类名沿用） ---- */
  --yzf-ink: var(--yzf-steel-900);
  --yzf-muted: var(--yzf-steel-500);
  --yzf-line: var(--yzf-steel-200);
  --yzf-bg-soft: var(--yzf-steel-50);

  --yzf-radius: 10px;
  --yzf-radius-sm: 6px;
  --yzf-shadow: 0 2px 14px rgba(26, 95, 74, .08);
  --yzf-shadow-lg: 0 8px 32px rgba(26, 95, 74, .14);
  --yzf-transition: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ==========================================================================
   1. 源站橙色系 → 品牌绿系 精确覆盖
   ========================================================================== */

/* 顶部通栏 */
.header,
.header .head {
  background-color: var(--yzf-brand) !important;
}

/* 欢迎语（源站为浅色文字条，仅设文字色，不设背景，避免误染） */
.top_name {
  background-color: transparent !important;
  color: var(--yzf-white) !important;
}
.hnav {
  background-color: var(--yzf-brand) !important;
}

/* ---- 源站真实类名：.top / .nav_wrap / ul.nav ---- */
.top {
  background-color: var(--yzf-white) !important;
  border-bottom: 3px solid var(--yzf-brand) !important;
}
.top .ComName {
  color: var(--yzf-brand) !important;
  font-family: inherit !important;
  letter-spacing: 1px !important;
}
.top .ComName span {
  color: var(--yzf-steel-500) !important;
  letter-spacing: 4px !important;
}
.top .hot_line { color: var(--yzf-steel-500) !important; }
.top .hl_num { color: var(--yzf-accent) !important; font-weight: 700; }

.nav_wrap {
  background-color: var(--yzf-brand) !important;
  box-shadow: 0 2px 10px rgba(13, 51, 39, .18) !important;
}
.nav_wrap ul.nav,
.nav_wrap .nav {
  background-color: var(--yzf-brand) !important;
}
.nav_wrap ul.nav li,
.nav_wrap .nav li {
  background-color: transparent !important;
}
.nav_wrap ul.nav li a,
.nav_wrap .nav li a {
  color: var(--yzf-white) !important;
  font-size: 15px !important;
  letter-spacing: .5px;
  transition: background var(--yzf-transition), color var(--yzf-transition);
}
.nav_wrap ul.nav li a:hover,
.nav_wrap .nav li a:hover {
  background-color: var(--yzf-brand-800) !important;
  color: var(--yzf-accent-light) !important;
}
.nav_wrap ul.nav li.first a,
.nav_wrap .nav li.on a,
.nav_wrap ul.nav li.current a {
  background-color: var(--yzf-brand-900) !important;
  color: var(--yzf-accent-light) !important;
}

/* Logo 尺寸微调（源站 logoImg 固定 90x90，横版 logo 需要更大宽度） */
.top .logoImg { width: auto !important; }
.top .logoImg img {
  width: auto !important;
  height: 62px !important;
  display: block;
}

/* 二级/移动导航 */
.hnav, .hnav2, .sub_nav, .nav_bg {
  background-color: var(--yzf-brand-800) !important;
}
.hnav a, .hnav2 a {
  color: var(--yzf-white) !important;
}
.hnav a:hover, .hnav2 a:hover {
  color: var(--yzf-accent-light) !important;
}
.hnav .on, .hnav2 .on, .hnav a.on {
  background-color: var(--yzf-brand-900) !important;
  color: var(--yzf-accent-light) !important;
}

/* Logo / 站名文字 */
.logo,
.p_w .logo,
.hnav .logo,
.top_name strong {
  color: var(--yzf-white) !important;
  letter-spacing: .5px;
}

/* 主按钮 / 提交按钮 */
.btn,
.btns,
input[type="submit"],
.incon .btns a,
.more_i a:hover {
  background-color: var(--yzf-brand) !important;
  color: var(--yzf-white) !important;
  border-color: var(--yzf-brand) !important;
  transition: background var(--yzf-transition);
}
.btn:hover,
.btns:hover,
.incon .btns a:hover {
  background-color: var(--yzf-brand-800) !important;
}

/* "MORE" / 查看更多链接 */
a.more,
.more_i a,
.con_title .more {
  color: var(--yzf-brand) !important;
}
a.more:hover,
.more_i a:hover {
  color: var(--yzf-brand-700) !important;
}

/* 栏目标题下划线 / 装饰条 */
.con_title h2,
.common_title h2 {
  color: var(--yzf-steel-900) !important;
}
.con_title h2::after,
.common_title h2::after,
.title_en + .con_title h2::after {
  background-color: var(--yzf-brand) !important;
}

/* 橙色图标底 / 序号徽标 */
.i_bg,
.num,
.icon,
.list .num,
.picList .title em {
  background-color: var(--yzf-accent) !important;
  color: var(--yzf-white) !important;
}

/* 价格 / 型号高亮（本站无在线支付，仅用于型号强调） */
.price,
.p_price em {
  color: var(--yzf-accent) !important;
}

/* 面包屑当前项 */
.path a:hover,
.path span {
  color: var(--yzf-brand) !important;
}

/* 上一页/下一页 */
.page a,
.page span,
.prev_next a {
  color: var(--yzf-steel-700) !important;
  border-color: var(--yzf-steel-200) !important;
}
.page a:hover,
.prev_next a:hover,
.page .on {
  background-color: var(--yzf-brand) !important;
  color: var(--yzf-white) !important;
  border-color: var(--yzf-brand) !important;
}

/* 返回顶部 */
.sroll_top IMG,
.sroll_top img {
  filter: sepia(.3) saturate(1.4) hue-rotate(95deg);
}
.sroll_top:hover IMG {
  filter: none;
}

/* 页脚 */
.foot,
.foot_wrap,
.fnav_wrap,
.fnav {
  background-color: var(--yzf-steel-900) !important;
  color: #b9c4cc !important;
}
.foot a,
.fnav a {
  color: #b9c4cc !important;
}
.foot a:hover,
.fnav a:hover {
  color: var(--yzf-accent-light) !important;
}
.fnav h2 {
  color: var(--yzf-white) !important;
}
.fnav h2::after,
.foot h2::after {
  background-color: var(--yzf-accent) !important;
}

/* 悬浮咨询条继承品牌色 */
.yzf-float a,
.yzf-float button {
  background: var(--yzf-brand) !important;
}
.yzf-float a:hover,
.yzf-float button:hover {
  background: var(--yzf-brand-800) !important;
}

/* ==========================================================================
   1b. 产品分类侧栏 / 侧边菜单（源站实际类名）
   ========================================================================== */
.product_left .pleft_top {
  background: linear-gradient(135deg, var(--yzf-brand) 0%, var(--yzf-brand-700) 100%) !important;
  border-radius: var(--yzf-radius-sm) var(--yzf-radius-sm) 0 0;
}
.product_left .pleft_top h2 {
  color: var(--yzf-white) !important;
  letter-spacing: 1px;
}
.product_left ul {
  border-color: var(--yzf-line) !important;
}
.product_left ul li {
  color: var(--yzf-steel-700) !important;
  border-bottom: 1px solid var(--yzf-steel-100);
  transition: background var(--yzf-transition);
}
.product_left ul li:hover,
.product_left ul .on {
  background-color: var(--yzf-brand-100) !important;
}
.product_left ul li:hover span,
.product_left ul .on .bk {
  border-left-color: var(--yzf-brand) !important;
}
.product_left ul li a { color: var(--yzf-steel-700) !important; }
.product_left ul li:hover a,
.product_left ul .on a { color: var(--yzf-brand-800) !important; font-weight: 600; }

/* 通用侧边菜单 */
.sidebar .parent_menu li a { color: var(--yzf-brand-800) !important; }
.sidebar .parent_menu li a:hover { color: var(--yzf-accent) !important; }
.sidebar .parent_menu li .clicked {
  background: linear-gradient(90deg, var(--yzf-brand) 0%, var(--yzf-brand-700) 100%) !important;
  color: var(--yzf-white) !important;
}

/* ==========================================================================
   1c. Banner 首屏：图片按容器填充，避免两侧露白
   ========================================================================== */
.banner,
.banner .d1,
.banner .d2 {
  background-size: cover !important;
  background-position: center bottom !important;
}
.bannerWrap { z-index: 0 !important; }

/* ==========================================================================
   2. 圆角与按钮统一（去源站"方角+橙"气质）
   ========================================================================== */
.btn,
.btns,
.more_i a,
.hnav a,
.yzf-btn,
input[type="submit"] {
  border-radius: var(--yzf-radius-sm) !important;
}

.btn,
.btns {
  letter-spacing: .5px;
}

/* ==========================================================================
   3. 焦点可见性（无障碍 + 键盘可达）
   ========================================================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--yzf-brand-400);
  outline-offset: 2px;
  border-radius: 3px;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--yzf-brand-400) !important;
  box-shadow: 0 0 0 3px rgba(45, 132, 104, .12);
}

/* ==========================================================================
   4. 排版优化：正文行高与可读性
   ========================================================================== */
.incon p,
.index_about p,
.n_detail p,
.detail p {
  line-height: 1.9;
  color: var(--yzf-steel-700);
  font-size: 15px;
}
.incon h1,
.incon h2,
.common_title h2,
.con_title h2 {
  letter-spacing: .3px;
}

/* ==========================================================================
   5. 移动端适配补强
   --------------------------------------------------------------------------
   95/95 页均已具备 .phone_none 移动版块（首页为 .allpage，已补 phone_none 类），
   沿用源站 web.css 原生切换机制：
     @media(min-width:1024px){ .phone_none{display:none} }
     @media(max-width:1024px){ .pc_none{display:none} .phone_none{display:block} }

   例外修复（首页/英文首页，类名 .yzf-has-allpage）：
   源站把移动版 .allpage 错误地嵌套在 .pc_none 内部，导致移动端
   .pc_none{display:none} 把移动版一起隐藏，整页出现 0 高度空白。
   此处放行容器但只显示移动版子块，PC 子块继续隐藏。
   ========================================================================== */
@media (max-width: 1024px) {
  .yzf-has-allpage {
    display: block !important;
  }
  .yzf-has-allpage > *:not(.allpage) {
    display: none !important;
  }
  .yzf-has-allpage > .allpage {
    display: block !important;
    width: 100%;
  }
}

/* 自研组件在移动端收起左右留白 */
@media (max-width: 1024px) {
  .yzf-widget {
    padding: 0 14px;
  }
}

/* --------------------------------------------------------------------------
   5.1 移动版溢出与高度修正
   (a) 源站移动版用 rem + 百分比 margin/padding 布局。若强行 width:100%
       会与原有 margin 叠加造成右侧溢出，这里只补 box-sizing，不改宽度。
   (b) 源站 .banner 固定 240px，但内部 swiper 容器按 1:1 正方形（约 390px）
       计算，导致图片溢出 banner、在下方压出一片空白。这里把
       banner / swiper 全链路统一到 240px，用 object-fit 保证不变形。
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .phone_none .index_power,
  .phone_none .index_about,
  .phone_none .hnav2,
  .phone_none .beian,
  .phone_none .about_title {
    box-sizing: border-box;
    max-width: 100%;
  }
  .phone_none .index_power li {
    box-sizing: border-box;
  }
  .phone_none .index_power li img {
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  /* 源站移动版大量使用 width% + margin% + padding 叠加，
     content-box 下会超出视口；统一 border-box 让百分比自洽。 */
  .phone_none .index_about,
  .phone_none .index_about p,
  .phone_none .index_power,
  .phone_none .index_power li,
  .phone_none .index_power li a,
  .phone_none .hnav2 {
    box-sizing: border-box;
  }
  .phone_none .index_about {
    width: 100% !important;
    margin-left: 0;
    margin-right: 0;
    padding: 0 4.5%;
  }
  /* banner 链路统一高度，消除溢出留白 */
  .phone_none .content_new > .banner,
  .phone_none .swiper-container,
  .phone_none .swiper-wrapper,
  .phone_none .swiper-slide,
  .phone_none .swiper-slide a {
    height: 240px !important;
    max-height: 240px;
  }
  .phone_none .swiper-slide img {
    width: 100%;
    height: 240px !important;
    object-fit: cover;
    object-position: center;
  }
  .phone_none .swiper-pagination {
    bottom: 8px;
  }
}

/* --------------------------------------------------------------------------
   5.1宽屏手机（641~1024px）微调
   -------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) {
  .yzf-widget {
    padding: 0 20px;
  }
}

/* --------------------------------------------------------------------------
   5.2 移动端全局细节（<640px）—— 必须不带作用域，作用在自研组件与页面上
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  /* 悬浮条上移，避开移动版底部固定栏 */
  .yzf-float {
    bottom: 84px !important;
  }
}

/* --------------------------------------------------------------------------
   5.3 PC 版式兜底适配（<640px）
   下面规则全部以 .pc_none 为作用域前缀。原因：移动版 .allpage 内也有
   .banner/.index_about/.index_power 等同名元素，若全局覆盖会破坏移动版
   自带的适配（banner 塌陷、文案撑破、图文错位）。
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pc_none .bannerWrap,
  .pc_none .banner {
    height: 240px !important;
    min-height: 240px;
  }
  .pc_none .banner .d1 {
    height: 240px !important;
  }
  .pc_none .banner .d2 {
    top: auto !important;
    bottom: 8px !important;
    height: auto !important;
  }
  /* 桌面导航在移动端隐藏（由 .phone_none 移动版承担） */
  .pc_none .nav_wrap {
    display: none;
  }
  .pc_none .top .ComName {
    font-size: 22px !important;
    padding-top: 12px !important;
  }
  .pc_none .top .ComName span {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    margin-top: 4px;
  }
  .pc_none .top .logoImg img {
    height: 42px !important;
  }
  /* 主内容区改为单列流式（源站为固定宽度 + float） */
  .pc_none .content,
  .pc_none .index_about,
  .pc_none .incon,
  .pc_none .n_detail,
  .pc_none .detail {
    width: 100% !important;
    max-width: 100%;
    float: none !important;
    overflow: hidden;
  }
  .pc_none .product,
  .pc_none .product .product_left,
  .pc_none .product .product_right,
  .pc_none .sidebar,
  .pc_none .sidebar_right,
  .pc_none .index_power,
  .pc_none .n_detail .con,
  .pc_none .incon .con {
    width: 100% !important;
    float: none !important;
  }
  .pc_none .product_left .pleft_top,
  .pc_none .sidebar .parent_menu {
    height: auto !important;
  }
  .pc_none .incon p,
  .pc_none .index_about p {
    font-size: 14px;
    line-height: 1.85;
  }
  /* 表格类内容可横向滚动而不撑破页面 */
  .pc_none .incon table,
  .pc_none table.yzf-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}

/* ==========================================================================
   6. 打印样式（提升企业站专业度）
   ========================================================================== */
@media print {
  .header, .sroll_top, .yzf-float, .yzf-modal,
  .yzf-pdp-cta, .fnav_wrap, .phone_none, .banner {
    display: none !important;
  }
  body {
    color: #000;
    background: #fff;
  }
  .pc_none {
    display: block !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    color: #666;
  }
}

/* ==========================================================================
   7. 减弱动效偏好
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   8. 品牌微纹样（差异化细节：页脚细斜纹条）
   ========================================================================== */
.fnav_wrap {
  border-top: 3px solid var(--yzf-brand) !important;
}
.fnav_wrap::before {
  content: '';
  display: block;
  height: 2px;
  background: repeating-linear-gradient(
    90deg,
    var(--yzf-accent) 0 24px,
    transparent 24px 48px
  );
}

/* ==========================================================================
   9. 视频容器（B 站播放器 16:9 自适应）
   --------------------------------------------------------------------------
   36 个视频案例页嵌入 B 站播放器。播放器 iframe 本身无宽高，
   在窄屏会溢出页面；这里用 padding-top 百分比技巧实现 16:9 自适应。
   ========================================================================== */
.yzf-video {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 12px 0;
  padding-top: 56.25%;
  background: #0d3327;
  border-radius: 4px;
  overflow: hidden;
}
.yzf-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ==========================================================================
   10. 表格类内容窄屏防溢出
   --------------------------------------------------------------------------
   产品参数表由 Word 导出，带 MsoTableGrid 类，列宽为固定 px，
   窄屏必然溢出。这里包一层横向滚动容器（保持表格语义与可读性，
   不隐藏列、不改数据）。
   ========================================================================== */
@media (max-width: 1024px) {
  .phone_none table,
  .pc_none table,
  table.MsoTableGrid,
  table.MsoNormal {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-collapse: collapse;
  }
  .phone_none table td,
  .phone_none table th,
  .pc_none table td,
  .pc_none table th {
    word-break: break-word;
    vertical-align: top;
  }
  /* 滚动提示条 */
  .phone_none .incon table::after,
  .pc_none .incon table::after {
    content: '';
  }
}