/* ================ 1. 基础样式重置 ================ */
/* 优先覆盖浏览器默认样式，统一全站字体与链接样式 */
a, 
#main-header .et-menu a, 
.et_mobile_menu li a, 
#top-menu-nav #top-menu > li > a, 
#top-menu-nav #top-menu .sub-menu li a {
    color: #373737 !important; /* 菜单文字颜色，需与设计一致时替换 */
    text-decoration: none !important; /* 强制移除下划线 */
    font-family: "Microsoft YaHei", "SimHei", sans-serif, "WenQuanYi Micro Hei" !important;
}

/* 全站基础字体统一（覆盖所有元素） */
body, button, input, select, textarea,
.et_pb_text, .et_pb_post h2, .et_pb_post_content,
.et_pb_blog_grid .et_pb_post h2 a,
.et_pb_salary, .et_pb_portfolio_item h2,
.et_pb_testimonial_content, .et_pb_slide_description,
.et_pb_toggle_title, .et_pb_accordion_item h5,
.et_pb_pricing_table li, .et_pb_pricing_heading h2,
.et_pb_number_counter .percent, .et_pb_circle_counter h3,
.et_pb_team_member_description, .et_pb_blurb_content,
.et_pb_contact_field input, .et_pb_contact_field textarea,
.et_pb_promo_description, .et_pb_tab, .et_pb_comments_title,
.comment-content, .et_pb_widget, .et_pb_widget li,
.et_pb_widget_title, .et_pb_post_meta, .et_pb_post_categories,
.et_pb_shop .price, .et_pb_shop .product_title,
.et_pb_filterable_portfolio .et_pb_portfolio_item h2 a {
    font-family: "Microsoft YaHei", "SimHei", sans-serif, "WenQuanYi Micro Hei" !important;
}

/* 菜单字体强化（覆盖不同菜单结构） */
#main-header .et-menu a,
.et_mobile_menu li a,
#top-menu-nav #top-menu > li > a,
#top-menu-nav #top-menu .sub-menu li a,
.et-fixed-header #top-menu-nav #top-menu > li > a {
    font-family: "Microsoft YaHei", "SimHei", sans-serif, "WenQuanYi Micro Hei" !important;
}

/* 标题字体统一（h1~h6 及各类模块标题） */
h1, h2, h3, h4, h5, h6,
.et_pb_module_header,
.et_pb_slide_title,
.et_pb_promo h2,
.et_pb_toggle_title,
.et_pb_pricing_heading h2,
.et_pb_counter_amount,
.et_pb_number_counter h3,
.et_pb_team_member h4,
.et_pb_post h2,
.et_pb_portfolio_item h2,
.et_pb_shop .product_title {
    font-family: "Microsoft YaHei", "SimHei", sans-serif, "WenQuanYi Micro Hei" !important;
}

/* 按钮字体统一（覆盖所有按钮类型） */
.et_pb_button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.et_pb_promo_button,
.et_pb_more_button {
    font-family: "Microsoft YaHei", "SimHei", sans-serif, "WenQuanYi Micro Hei" !important;
}

/* 表单元素字体统一（输入框、文本域等） */
.et_pb_contact_form_label,
.et_pb_contact_field label,
.et_pb_contact_field input,
.et_pb_contact_field textarea,
.et_pb_newsletter_form p,
.et_pb_newsletter_field input,
.et_pb_newsletter_button {
    font-family: "Microsoft YaHei", "SimHei", sans-serif, "WenQuanYi Micro Hei" !important;
}

/* 页脚字体统一 */
#footer-widgets .footer-widget li,
#footer-widgets .footer-widget h4,
#main-footer .et_pb_widget_title,
#footer-info {
    font-family: "Microsoft YaHei", "SimHei", sans-serif, "WenQuanYi Micro Hei" !important;
}

/* 文章标题居中（如需全局居中可保留，否则按需调整） */
.entry-title {
    text-align: center;
}



/* 底部foot小黑条里的文案布局方式 */
/* 基础样式：两个类共用的弹性布局 */
.ccfootlefttextL,
.ccfootlefttextR {
  display: flex !important;
  align-items: center !important;
}

/* PC端（>1200px）：L居左，R居右，子元素间距6px */
@media (min-width: 1201px) {
  /* 左侧元素：居左显示 */
  .ccfootlefttextL {
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  
  /* 右侧元素：居右显示 */
  .ccfootlefttextR {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important; /* 改为右对齐 */
  }
  
  /* 两个类的子元素间距保持一致 */
  .ccfootlefttextL > *:not(:last-child),
  .ccfootlefttextR > *:not(:last-child) {
    margin-right: 6px !important;
    margin-bottom: 0 !important;
  }
}

/* Pad端（768-1199px）：均居中显示，保持一行 */
@media (min-width: 768px) and (max-width: 1199px) {
  .ccfootlefttextL,
  .ccfootlefttextR {
    flex-wrap: nowrap !important;
    justify-content: center !important; /* 平板端均居中 */
  }
  
  .ccfootlefttextL > *:not(:last-child),
  .ccfootlefttextR > *:not(:last-child) {
    margin-right: 4px !important;
    margin-bottom: 0 !important;
  }
}

/* 移动端（<768px）：均换行居中，保持上下间距 */
@media (max-width: 767px) {
  .ccfootlefttextL,
  .ccfootlefttextR {
    flex-wrap: wrap !important;
    justify-content: center !important; /* 移动端均居中 */
  }
  
  .ccfootlefttextL > *,
  .ccfootlefttextR > * {
    margin-right: 0 !important;
    margin-bottom: 2px !important;
  }
  
  .ccfootlefttextL > *:last-child,
  .ccfootlefttextR > *:last-child {
    margin-bottom: 0 !important;
  }
}


/* ================ 2. 产品相册布局（瀑布流） ================ */
/* 容器核心：瀑布流多列布局 */
.series-styles-container {
    column-count: 3;          /* 默认3列（PC端） */
    column-gap: 20px;         /* 列间距 */
    column-fill: balance-all; /* 平衡所有列的高度 */
    padding: 4px 0;          /* 上下内边距 */
    width: 100%;              /* 适应父容器 */
    box-sizing: border-box;   /* 盒模型统一 */
}

/* 单个产品项：防止跨列、保持响应式 */
.series-style-item {
    break-inside: avoid;      /* 禁止元素跨列 */
    margin-bottom: 20px;      /* 项间距 */
    display: inline-block;    /* 确保列布局正确 */
    width: 100%;              /* 填满列宽 */
    border-radius: 10px;      /* 圆角 */
    overflow: hidden;         /* 裁剪溢出内容 */
    border: 1px solid rgba(55, 55, 55, 0.15); /* 淡灰色边框 */
    transition: 
        transform 0.3s ease, 
        border-color 0.3s ease; /* 动画过渡 */
    position: relative;       /* 为点击提示提供定位 */
    cursor: auto;          /* 鼠标手势提示 */
    box-shadow: none !important; /* 强制移除阴影（如需可恢复） */
}

/* 悬停交互：轻微上移 + 边框加深 */
.series-style-item:hover {
    transform: translateY(-3px); /* 上移动画 */
    border-color: rgba(55, 55, 55, 0.5); /* 边框加深 */
}

/* 产品图片：自适应 + 背景填充 */
.style-image {
    width: 100%;              /* 填满容器 */
    height: auto;             /* 保持比例 */
    max-height: 380px;        /* 限制最大高度 */
    object-fit: contain;      /* 完整显示图片（不裁剪） */
    display: block;           /* 移除底部间隙 */
    margin: 0 auto;           /* 水平居中 */
    background-color: #f9f9f9; /* 空白区域背景色 */
}

/* 色号文字：底部信息栏 */
.style-color-code {
    padding: 12px 15px;       /* 内边距 */
    background-color: #fff;   /* 白色背景 */
    color: #373737;           /* 文字颜色 */
    font-size: 14px;          /* 字号 */
    text-align: center;       /* 居中 */
    border-top: 1px solid #f5f5f5; /* 顶部细线 */
}

/* 点击提示效果（悬浮时出现半透明白点） */
.series-style-item::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    background-color: rgba(255, 255, 255, 0.3); /* 半透明白色 */
    border-radius: 50%;       /* 圆形 */
    transform: translate(-50%, -50%) scale(0); /* 初始缩放0 */
    transition: transform 0.3s ease; /* 过渡动画 */
    pointer-events: none;     /* 不影响点击 */
}

.series-style-item:hover::after {
    transform: translate(-50%, -50%) scale(1); /* 悬停时放大显示 */
}

/* 响应式布局：不同屏幕适配列数 */
@media (min-width: 1200px) {
    .series-styles-container {
        column-count: 3; /* 大屏3列 */
    }
}

@media (max-width: 1199px) and (min-width: 768px) {
    .series-styles-container {
        column-count: 2; /* 中屏2列 */
        column-gap: 18px;
    }
}

@media (max-width: 767px) {
    .series-styles-container {
        column-count: 1; /* 移动端1列 */
        column-gap: 15px;
        padding: 15px 0;
    }
    .series-style-item {
        margin-bottom: 15px; /* 减小间距 */
    }
}

/* 移动端额外适配（覆盖悬停样式，确保一致） */
@media (max-width: 768px) {
    .series-style-item {
        border: 1px solid rgba(55, 55, 55, 0.15); /* 恢复淡边框 */
    }
    .series-style-item:hover {
        border-color: rgba(55, 55, 55, 0.5); /* 悬停加深 */
    }
}


/* ================ 3. 图片查看器（全屏优化版） ================ */
.image-viewer {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;            /* 强制全屏宽度 */
    height: 100vh;           /* 强制全屏高度 */
    background-color: rgba(0, 0, 0, 0.2); /* 背景 - 适当透明度，确保可点击区域明显 */
    display: none;           /* 默认隐藏 */
    align-items: center;     /* 水平居中 */
    justify-content: center; /* 垂直居中 */
    z-index: 9999;           /* 最高层级 */
    padding: 0;              /* 移除内边距，扩大可点击区域 */
    box-sizing: border-box;  /* 盒模型统一 */
}

/* 激活状态：显示查看器 */
.image-viewer.active {
    display: flex;
}

/* 内容容器：限制最大尺寸 + 居中 */
.image-viewer-content {
    position: relative;
    max-width: 90vw;         /* 优化最大宽度 */
    max-height: 90vh;        /* 优化最大高度 */
    width: auto;             /* 适应内容宽度 */
    height: auto;            /* 适应内容高度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.95); /* 白色背景，突出内容区域 */
    border-radius: 10px;     /* 圆角边缘 */
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* 添加阴影增强层次感 */
    z-index: 10000;          /* 确保内容区域在背景之上 */
}

/* 预览图片：自适应 + 最大高度限制 */
.image-viewer-img {
    width: auto;             /* 按比例缩放 */
    height: auto;            /* 按比例缩放 */
    max-width: 100%;         /* 不超出容器 */
    max-height: 85vh;        /* 预留控制按钮空间 */
    object-fit: contain;     /* 完整显示 */
    border-radius: 8px;      /* 圆角 */
}

/* 图片说明文字：底部居中 */
.image-viewer-caption {
    color: #fff;             /* 白色文字 */
    text-align: center;      /* 居中 */
    margin-top: 15px;        /* 与图片间距 */
    font-size: 16px;         /* 字号 */
    width: 100%;             /* 填满容器宽度 */
}

/* 关闭按钮：右上角显示 */
.image-viewer-close {
    position: absolute;
    top: 20px; right: 20px;   /* 调整到右上角（更合理） */
    color: #373737;          /* 字体颜色 */
    font-size: 30px;         /* 字号 */
    background-color: #fff;  /* 白色背景 */
    border: 1px solid #ddd;  /* 淡灰色边框 */
    cursor: pointer;         /* 鼠标手势 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;       /* 点击区域 */
    border-radius: 4px;      /* 圆角（悬停时更友好） */
    transition: background-color 0.3s ease;
    z-index: 10000;          /* 确保在最顶层显示 */
}

/* 缩放控制按钮：底部居中 */
.image-viewer-controls {
    position: absolute;
    bottom: 20px; left: 0; right: 0; /* 左右拉伸 */
    display: flex;           /* 水平排列 */
    justify-content: center; /* 内部元素居中 */
    gap: 10px;               /* 按钮间距 */
    z-index: 10;             /* 层级高于图片 */
    width: 100%;             /* 宽度填满父容器 */
    box-sizing: border-box;  /* 盒模型统一 */
    padding: 0 20px;         /* 左右内边距，避免按钮贴边 */
}

/* 控制按钮样式：半透明白底 + 淡灰边框 */
.image-viewer-controls button {
    background-color: rgba(55, 55, 55, 0.8); /* 深灰色背景 */
    border: 1px solid rgba(55, 55, 55, 0.5); /* 边框 */
    color: #fff;             /* 白色文字 */
    padding: 8px 16px;       /* 内边距 */
    border-radius: 4px;      /* 圆角 */
    cursor: pointer;         /* 鼠标手势 */
    font-size: 14px;         /* 字号 */
    white-space: normal;     /* 允许文本换行 */
    word-wrap: break-word;   /* 允许长单词换行 */
    min-width: fit-content;  /* 确保按钮宽度适应内容 */
    -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
}

/* 按钮点击状态：立即反馈，无过渡 */
.image-viewer-controls button:active {
    background-color: rgba(55, 55, 55, 1); /* 点击时加深背景 */
    transition: none; /* 移除过渡动画 */
}

/* 按钮触摸状态：修复移动端点击后状态不恢复问题 */
.image-viewer-controls button:focus {
    outline: none; /* 移除默认焦点轮廓 */
    background-color: rgba(55, 55, 55, 0.8); /* 保持默认背景 */
}

/* 确保触摸结束后恢复默认状态 */
.image-viewer-controls button { 
    touch-action: manipulation; /* 优化移动端触摸响应 */
}

/* 按钮点击状态：立即反馈，无过渡 */
.image-viewer-controls button:active {
    background-color: rgba(55, 55, 55, 1); /* 点击时加深背景 */
    transition: none; /* 移除过渡动画 */
}

/* 缩放容器：处理拖动交互 */
.image-viewer-zoom-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;        /* 裁剪溢出内容 */
    cursor: grab;            /* 鼠标手势（拖动模式） */
    touch-action: none;      /* 禁止默认触摸行为（避免冲突） */
    user-select: none;       /* 禁止选中文本 */
}

/* 拖动中：手势变化 */
.image-viewer-zoom-container.grabbing {
    cursor: grabbing;
}

/* 图片变换：无动画 + 原点居中 */
.image-viewer-img {
    transform-origin: center center; /* 缩放原点（中心） */
}

/* 移动端适配：调整按钮尺寸 */
@media (max-width: 768px) {
    .image-viewer-controls {
        bottom: 15px;        /* 减小底部间距 */
    }
    .image-viewer-controls button {
        padding: 5px 12px;   /* 缩小按钮 */
        font-size: 14px;     /* 缩小字号 */
    }
    .image-viewer-close {
        top: 15px; right: 15px; /* 缩小间距 */
        font-size: 24px;     /* 缩小按钮 */
    }
}


/* ================ 4. 额外修复：鼠标滚轮缩放中心问题 ================ */
/* （如需配合 JS 修复滚轮中心，确保容器正确捕获事件） */
.image-viewer-zoom-container {
    /* 确保鼠标事件被正确捕获 */
    pointer-events: auto;
}





/* ===========上一篇下一篇===========*/
/* 导航容器 */
.prev-next-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    max-width: 100%;
}

/* 导航项通用样式 */
.nav-item {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 15px;
    width: 48%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    text-decoration: none;
    transition: transform 0.2s ease;
}

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

/* 上一篇（图片左，文字右） */
.prev-post {
    flex-direction: row;
}

/* 下一篇 */
.next-post {
    flex-direction: row-reverse;
}

.next-post .nav-content {
    text-align: right;
    margin-left: auto;
}
.next-post .nav-title {
    text-align: right;
}

/* 图片容器 */
.nav-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #f9f9f9;
}

.nav-thumbnail-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 文字内容区域 */
.nav-content {
    flex-grow: 1;
    padding: 0 15px;
}

/* 导航标签（上一篇/下一篇） */
.nav-label {
    display: block;
    font-size: 14px;
    color: #999999;
    margin-bottom: 8px;
    font-weight: 400;
}

/* 文章标题 */
.nav-title {
    font-size: 18px;
    color: #333333;
    line-height: 1.5;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 产品型号加粗（假设型号格式为JHXXX-开头） */
.nav-title::before {
    content: attr(data-model);
    font-weight: 600;
    margin-right: 5px;
}

/* 移动端响应式调整 */
@media (max-width: 768px) {
    .prev-next-nav {
        flex-direction: column;
    }
    
    .nav-item {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .nav-thumbnail {
        width: 100px;
        height: 100px;
    }
    
    .nav-title {
        font-size: 16px;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}