/*
Theme Name: MEBIUSE工业主题20260611latest
Theme URI: https://mebiuse.com
Author: 滨州世洲智能科技
Author URI: https://mebiuse.com
Description: MEBIUSE品牌企业展示型WordPress主题，专为便携式油箱及移动能源解决方案外贸官网设计。采用工业风格，支持产品展示、OEM/ODM服务介绍、FAQ、博客等完整外贸官网功能。
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, theme-options, translation-ready, industrial, corporate
Text Domain: mebiuse

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/* ============================================================
   MEBIUSE 工业主题 - 主样式表
   ============================================================
   目录:
   1.0  - CSS自定义属性(设计令牌)
   2.0  - 重置与基础
   3.0  - 排版
   4.0  - 布局容器
   5.0  - 头部导航
   6.0  - 首页区块
   7.0  - 关于我们
   8.0  - 产品页面
   9.0  - OEM/ODM页面
   10.0 - FAQ折叠面板
   11.0 - 联系页面
   12.0 - 博客/新闻
   13.0 - 页脚
   14.0 - 按钮与组件
   15.0 - 响应式
   ============================================================ */

/* ============================================================
   1.0 - CSS自定义属性(设计令牌)
   这些变量定义了整个主题的颜色/字体/间距体系
   修改这里即可全局调整主题风格
   ============================================================ */
:root {
    /* ---- 品牌色 ---- */
    --color_primary: #FF5316;
    /* 品牌橙 - 用于按钮/链接/强调 */
    --color_primary_hover: #c93400;
    /* 品牌橙悬停态 */
    --color_primary_light: #FF7949;
    /* 品牌橙浅色 */
    --color_dark: #192437;
    /* 深蓝黑 - 用于标题/页脚背景 */
    --color_dark_secondary: #1b1f2e;
    /* 次深色 - 用于页脚等 */
    --color_text: #444444;
    /* 正文文字色 */
    --color_text_light: #7e8591;
    /* 浅色文字 */
    --color_white: #ffffff;
    /* 白色 */
    --color_bg_light: #F4F4F5;
    /* 浅灰背景 */
    --color_bg_lighter: #F7F7F9;
    /* 更浅灰背景 */
    --color_border: #E9E9EE;
    /* 边框色 */
    --color_success: #28a745;
    /* 成功绿色 */
    --color_error: #dc3545;
    /* 错误红色 */

    /* ---- 字体 ---- */
    --font_heading: 'gilmer', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --font_body: 'gilmer', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

    /* ---- 字号 ---- */
    --text_xs: 0.75rem;
    /* 12px */
    --text_sm: 0.875rem;
    /* 14px */
    --text_base: 1rem;
    /* 16px */
    --text_md: 1.125rem;
    /* 18px */
    --text_lg: 1.25rem;
    /* 20px */
    --text_xl: 1.5rem;
    /* 24px */
    --text_2xl: 2rem;
    /* 32px */
    --text_3xl: 2.5rem;
    /* 40px */
    --text_4xl: 3rem;
    /* 48px */
    --text_5xl: 3.75rem;
    /* 60px */

    /* ---- 间距 ---- */
    --space_xs: 0.5rem;
    /* 8px */
    --space_sm: 1rem;
    /* 16px */
    --space_md: 1.5rem;
    /* 24px */
    --space_lg: 2rem;
    /* 32px */
    --space_xl: 3rem;
    /* 48px */
    --space_2xl: 4rem;
    /* 64px */
    --space_3xl: 5rem;
    /* 80px */
    --space_4xl: 7.5rem;
    /* 120px */




    /* ---- 圆角 ---- */
    --radius_sm: 4px;
    --radius_md: 8px;
    --radius_lg: 12px;

    /* ---- 阴影 ---- */
    --shadow_sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow_md: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow_lg: 0 20px 60px rgba(0, 0, 0, 0.1);

    /* ---- 过渡 ---- */
    --transition_base: all 0.35s ease;
}




/* ---- 容器最大宽度 ---- */
@media (width>1200px) {
    :root {
        max-width: 80vw !important;
    }

}

@media (width<1200px) {
    :root {
        max-width: 100vw !important;
    }
}




.product-card .fa-arrow-right {
    display: none;
}

#about .play-btn {
    display: none;
}

#videos .fa-play-circle {
    display: none;
}

.video-card .thumbnail::after {
    display: none;
}




/* ============================================================
   2.0 - 重置与基础
   对整个页面进行CSS重置，消除浏览器默认样式差异
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100vw;
    font-family: var(--font_body);
    font-size: var(--text_base);
    line-height: 1.7;
    color: var(--color_text);
    background: var(--color_white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   3.0 - 排版
   统一管理h1-h6/段落/列表/链接等排版样式
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font_heading);
    font-weight: 700;
    line-height: 1.2;
    /* color: var(--color_dark); */
    margin-bottom: var(--space_sm);
}

h1 {
    font-size: var(--text_4xl);
}

h2 {
    font-size: var(--text_3xl);
}

h3 {
    font-size: var(--text_2xl);
}

h4 {
    font-size: var(--text_xl);
}

h5 {
    font-size: var(--text_lg);
}

h6 {
    font-size: var(--text_md);
}

p {
    margin-bottom: var(--space_sm);
    line-height: 1.8;
}

a {
    color: var(--color_dark);
    text-decoration: none;
    transition: var(--transition_base);
}

a:hover {
    color: var(--color_primary);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

ul,
ol {
    padding-left: 1.25rem;
    margin-bottom: var(--space_sm);
}

/* ============================================================
   4.0 - 布局容器
   页面整体宽度控制和section间距
   ============================================================ */
.container {
    width: 100%;
    /*
    max-width: var(--container_max); */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* ---- 容器最大宽度 ---- */
@media (width>1200px) {
    .container {
        max-width: 80vw !important;
    }

}

@media (width<1200px) {
    .container {
        max-width: 100vw !important;
    }
}






.section_padding {
    padding: var(--space_4xl) 0;
}

.section_padding_sm {
    padding: var(--space_2xl) 0;
}

.section_header {
    text-align: center;
    margin-bottom: var(--space_2xl);
}

.section_header .section_subtitle {
    font-size: var(--text_sm);
    color: var(--color_primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: var(--space_xs);
    display: block;
}

.section_header .section_title {
    font-size: var(--text_3xl);
    color: var(--color_dark);
    margin-bottom: var(--space_sm);
    position: relative;
    padding-bottom: var(--space_md);
}

/* 标题底部装饰线 -- 品牌橙色短线居中 */
.section_header .section_title::after {
    content: '';
    width: 60px;
    height: 3px;
    background: var(--color_primary);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.section_header .section_desc {
    font-size: var(--text_md);
    color: var(--color_text_light);
    max-width: 600px;
    margin: 0 auto;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.col_3 {
    width: 25%;
}

.col_4 {
    width: 33.333%;
}

.col_6 {
    width: 50%;
}

.col_8 {
    width: 66.667%;
}

.col_9 {
    width: 75%;
}

.col_12 {
    width: 100%;
}

.col_3,
.col_4,
.col_6,
.col_8,
.col_9,
.col_12 {
    padding-left: 15px;
    padding-right: 15px;
}

/* ============================================================
   5.0 - 头部导航
   全站顶部导航栏：Logo + 主菜单 + 移动端汉堡菜单
   ============================================================ */
.site_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color_white);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    transition: var(--transition_base);
}

/* 滚动后头部缩小效果 -- 通过JS添加.header_scrolled类触发 */
.site_header.header_scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.12);
}

.header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    max-width: var(--container_max);
    margin: 0 auto;
    padding: 0 15px;
}

/* ---- Logo区域 ---- */
.site_logo .logo_img {
    height: 45px;
    width: auto;
}

.site_logo .logo_text {
    font-family: var(--font_heading);
    font-size: var(--text_xl);
    font-weight: 700;
    color: var(--color_dark);
    letter-spacing: -0.5px;
}

.site_logo .logo_text span {
    color: var(--color_primary);
}

/* ---- 主导航菜单 ---- */
.main_nav {
    display: flex;
    align-items: center;
}

.main_nav .nav_menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

.main_nav .nav_menu>li {
    position: relative;
}

.main_nav .nav_menu>li>a {
    display: block;
    padding: 28px 18px;
    font-weight: 600;
    font-size: var(--text_sm);
    color: var(--color_dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
}

/* 当前页高亮和悬停下划线 -- 品牌橙色下划线动画 */
.main_nav .nav_menu>li>a::after {
    content: '';
    position: absolute;
    bottom: 22px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--color_primary);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.main_nav .nav_menu>li>a:hover::after,
.main_nav .nav_menu>li.current-menu-item>a::after,
.main_nav .nav_menu>li.current_page_item>a::after {
    transform: scaleX(1);
}

.main_nav .nav_menu>li>a:hover,
.main_nav .nav_menu>li.current-menu-item>a,
.main_nav .nav_menu>li.current_page_item>a {
    color: var(--color_primary);
}

/* ---- 二级下拉菜单 ---- */
.main_nav .nav_menu .sub_menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--color_white);
    box-shadow: var(--shadow_lg);
    border-radius: var(--radius_sm);
    list-style: none;
    padding: var(--space_sm) 0;
    z-index: 999;
}

.main_nav .nav_menu li:hover>.sub_menu {
    display: block;
}

.main_nav .nav_menu .sub_menu li a {
    display: block;
    padding: 10px 20px;
    font-size: var(--text_sm);
    color: var(--color_text);
    transition: var(--transition_base);
}

.main_nav .nav_menu .sub_menu li a:hover {
    color: var(--color_primary);
    background: var(--color_bg_lighter);
    padding-left: 25px;
}

/* ---- 移动端汉堡菜单按钮 ---- */
.menu_toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 1001;
}

.menu_toggle span {
    display: block;
    width: 28px;
    height: 3px;
    background: var(--color_dark);
    border-radius: 2px;
    transition: var(--transition_base);
}

/* 汉堡菜单激活态 -- 三横线变X */
.menu_toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.menu_toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu_toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

/* ============================================================
   6.0 - 首页区块
   首页所有section的样式定义
   ============================================================ */

/* ---- 6.1 首屏大图(Hero) ---- */
.hero_section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 0;
}

.hero_section .hero_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(25, 36, 55, 0.85) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.hero_section .hero_content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 15px;
}

.hero_section .hero_title {
    font-size: var(--text_5xl);
    color: var(--color_white);
    margin-bottom: var(--space_md);
    line-height: 1.15;
}

.hero_section .hero_title span {
    color: var(--color_primary);
}

.hero_section .hero_desc {
    font-size: var(--text_md);
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: var(--space_xl);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ---- 6.2 核心优势图标区 ---- */
.advantages_section {
    background: var(--color_bg_lighter);
}

.advantage_card {
    text-align: center;
    padding: var(--space_xl) var(--space_lg);
    background: var(--color_white);
    border-radius: var(--radius_md);
    box-shadow: var(--shadow_sm);
    transition: var(--transition_base);
    height: 100%;
}

.advantage_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow_lg);
}

.advantage_card .adv_icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space_md);
    background: var(--color_bg_lighter);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--color_primary);
    transition: var(--transition_base);
}

.advantage_card:hover .adv_icon {
    background: var(--color_primary);
    color: var(--color_white);
}

.advantage_card .adv_title {
    font-size: var(--text_lg);
    margin-bottom: var(--space_sm);
}

.advantage_card .adv_desc {
    font-size: var(--text_sm);
    color: var(--color_text_light);
    line-height: 1.6;
}

/* ---- 6.3 产品分类导航区 ---- */
.product_categories_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space_lg);
}

/* 5个分类使用第一行3个 + 第二行2个(居中) */
.product_cat_card {
    position: relative;
    border-radius: var(--radius_md);
    overflow: hidden;
    box-shadow: var(--shadow_sm);
    transition: var(--transition_base);
}

.product_cat_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow_lg);
}

.product_cat_card .cat_image {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product_cat_card:hover .cat_image {
    transform: scale(1.05);
}

.product_cat_card .cat_info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space_lg);
    background: linear-gradient(transparent, rgba(25, 36, 55, 0.9));
    color: var(--color_white);
}

.product_cat_card .cat_name {
    font-size: var(--text_lg);
    color: var(--color_white);
    margin-bottom: 4px;
}

.product_cat_card .cat_desc {
    font-size: var(--text_sm);
    opacity: 0.85;
}

/* ---- 6.4 信任背书轮播 ---- */
.trust_section {
    background: var(--color_dark);
    color: var(--color_white);
}

/* ---- 6.5 行动号召(CTA) ---- */
.cta_section {
    background: var(--color_primary);
    text-align: center;
    padding: var(--space_3xl) 0;
}

.cta_section .cta_title {
    color: var(--color_white);
    font-size: var(--text_3xl);
    margin-bottom: var(--space_sm);
}

.cta_section .cta_desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text_md);
    margin-bottom: var(--space_xl);
}

/* ============================================================
   7.0 - 关于我们页面
   ============================================================ */

/* ---- 公司简介双栏布局 ---- */
.about_intro {
    display: flex;
    gap: var(--space_2xl);
    align-items: center;
}

.about_intro .about_image {
    flex: 0 0 45%;
}

.about_intro .about_image img {
    border-radius: var(--radius_md);
    box-shadow: var(--shadow_lg);
}

.about_intro .about_text {
    flex: 0 0 55%;
}

/* ---- 使命愿景价值观三栏 ---- */
.mvv_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space_lg);
}

.mvv_card {
    text-align: center;
    padding: var(--space_xl);
    background: var(--color_white);
    border-radius: var(--radius_md);
    border-top: 3px solid var(--color_primary);
    box-shadow: var(--shadow_sm);
    transition: var(--transition_base);
}

.mvv_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow_lg);
}

.mvv_card .mvv_icon {
    font-size: 2.5rem;
    color: var(--color_primary);
    margin-bottom: var(--space_md);
}

/* ---- 发展历程时间轴 ---- */
.timeline {
    position: relative;
    padding: var(--space_lg) 0;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color_border);
    transform: translateX(-50%);
}

.timeline_item {
    display: flex;
    margin-bottom: var(--space_xl);
    position: relative;
}

.timeline_item:nth-child(odd) {
    flex-direction: row;
}

.timeline_item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline_item .timeline_year {
    flex: 0 0 120px;
    font-size: var(--text_2xl);
    font-weight: 700;
    color: var(--color_primary);
    text-align: center;
    padding-top: 10px;
}

.timeline_item .timeline_content {
    flex: 1;
    background: var(--color_bg_lighter);
    padding: var(--space_md);
    border-radius: var(--radius_md);
    position: relative;
}

.timeline_item .timeline_dot {
    width: 16px;
    height: 16px;
    background: var(--color_primary);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    border: 3px solid var(--color_white);
    box-shadow: 0 0 0 2px var(--color_primary);
}

/* ---- 资质证书展示区 ---- */
.certificates_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space_lg);
}

.cert_card {
    text-align: center;
    padding: var(--space_lg);
    background: var(--color_white);
    border: 1px solid var(--color_border);
    border-radius: var(--radius_md);
    transition: var(--transition_base);
}

.cert_card:hover {
    border-color: var(--color_primary);
    box-shadow: var(--shadow_md);
}

.cert_card .cert_image {
    max-height: 150px;
    margin-bottom: var(--space_sm);
}

/* ============================================================
   8.0 - 产品页面
   ============================================================ */

/* ---- 产品归档侧边栏 ---- */
.product_sidebar {
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.sidebar_widget {
    background: #fff;
    border-radius: var(--radius_md);
    padding: var(--space_lg);
    margin-bottom: var(--space_lg);
    border: 1px solid var(--color_border);
    box-shadow: var(--shadow_sm);
}

.sidebar_widget .widget_title {
    font-size: var(--text_lg);
    font-weight: 700;
    color: var(--color_dark);
    margin-bottom: var(--space_md);
    padding-bottom: var(--space_xs);
    border-bottom: 2px solid var(--color_primary);
}

/* ---- 分类导航列表 ---- */
.product_cat_list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product_cat_list .cat_item {
    border-bottom: 1px solid var(--color_border);
    cursor: pointer;
    transition: var(--transition_base);
}

.product_cat_list .cat_item:last-child {
    border-bottom: none;
}

.product_cat_list .cat_item a {
    display: block;
    padding: 12px 12px;
    font-size: var(--text_sm);
    font-weight: 500;
    color: var(--color_text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}

.product_cat_list .cat_item a:hover {
    color: var(--color_primary);
    padding-left: 16px;
    background: rgba(255, 83, 22, 0.04);
}

.product_cat_list .cat_item.active a {
    color: var(--color_primary);
    font-weight: 600;
    border-left-color: var(--color_primary);
    background: rgba(255, 83, 22, 0.06);
}

/* ---- 推荐产品 ---- */
.recommended_list {
    display: flex;
    flex-direction: column;
    gap: var(--space_sm);
}

.recommended_item {
    display: flex;
    align-items: center;
    gap: var(--space_sm);
    padding: var(--space_xs);
    border-radius: var(--radius_sm);
    text-decoration: none;
    transition: all 0.2s ease;
}

.recommended_item:hover {
    background: #fff;
    box-shadow: var(--shadow_sm);
}

.recommended_item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius_sm);
    flex-shrink: 0;
}

.recommended_item_title {
    font-size: var(--text_sm);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color_text);
}

.recommended_item:hover .recommended_item_title {
    color: var(--color_primary);
}

/* ---- 产品内容区 ---- */
.product_content_area {
    min-height: 400px;
}

.products_count {
    font-size: var(--text_sm);
    color: var(--color_text_light);
    margin-bottom: var(--space_md);
}

/* ---- 加载状态 ---- */
.products_grid.loading {
    opacity: 0.4;
    pointer-events: none;
    position: relative;
    min-height: 300px;
}

.products_grid.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--color_border);
    border-top-color: var(--color_primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* ---- 产品总览网格 ---- */
.products_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space_lg);
}

/* ---- 单个产品卡片 ---- */
.product_card {
    background: var(--color_white);
    border-radius: var(--radius_md);
    overflow: hidden;
    box-shadow: var(--shadow_sm);
    transition: var(--transition_base);
    border: 1px solid var(--color_border);
}

.product_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow_lg);
    border-color: var(--color_primary);
}

.product_card .product_thumb {
    position: relative;
    overflow: hidden;
    height: 502px;
}

.product_card .product_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.product_card:hover .product_thumb img {
    transform: scale(1.05);
}

.product_card .product_info {
    padding: var(--space_md);
}

.product_card .product_title {
    font-size: var(--text_lg);
    margin-bottom: var(--space_xs);
}

.product_card .product_title a {
    color: var(--color_dark);
}

.product_card .product_title a:hover {
    color: var(--color_primary);
}

.product_card .product_excerpt {
    font-size: var(--text_sm);
    color: var(--color_text_light);
    margin-bottom: var(--space_sm);
}

.product_card .product_more {
    font-weight: 600;
    color: var(--color_primary);
    font-size: var(--text_sm);
}

/* ---- 产品分类面包屑 ---- */
.product_breadcrumb {
    background: var(--color_bg_lighter);
    padding: var(--space_md) 0;
    margin-bottom: var(--space_xl);
}

.product_breadcrumb .breadcrumb_list {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 8px;
    font-size: var(--text_sm);
    color: var(--color_text_light);
}

.product_breadcrumb .breadcrumb_list a {
    color: var(--color_text_light);
}

.product_breadcrumb .breadcrumb_list a:hover {
    color: var(--color_primary);
}

.product_breadcrumb .breadcrumb_list .separator {
    color: var(--color_border);
}

/* ---- 产品详情页 ---- */
.single_product_container {
    display: flex;
    gap: var(--space_2xl);
}

.single_product_container .product_gallery {
    flex: 0 0 48%;
}

/* 正方形主图容器 — 始终可见 */
.single_product_container .product_gallery .main_image {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius_md);
    overflow: hidden;
    margin-bottom: var(--space_sm);
    background: var(--color_bg_lighter);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* 主图图片 — 填充正方形 */
.single_product_container .product_gallery .main_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 占位图 — 降低视觉重量 */
.single_product_container .product_gallery .main_image img.main_product_placeholder {
    object-fit: contain;
    padding: 10%;
}

/* 放大提示 — hover显示 */
.single_product_container .product_gallery .main_image .zoom_hint {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    padding: 6px 14px;
    border-radius: var(--radius_sm);
    font-size: 0.8rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.single_product_container .product_gallery .main_image:hover .zoom_hint {
    opacity: 1;
}

/* 缩略图行 — 横排 */
.single_product_container .product_gallery .thumb_list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* 缩略图单项 — 正方形小图 */
.single_product_container .product_gallery .thumb_list img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: var(--radius_sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
}

.single_product_container .product_gallery .thumb_list img:hover {
    border-color: var(--color_primary);
    opacity: 0.85;
}

.single_product_container .product_gallery .thumb_list img.active {
    border-color: var(--color_primary);
    box-shadow: 0 0 0 2px rgba(var(--color_primary_rgb, 230, 57, 70), 0.25);
}

/* 缩略图空占位框 */
.single_product_container .product_gallery .thumb_list .thumb_placeholder {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.single_product_container .product_gallery .thumb_list .thumb_placeholder svg {
    width: 100%;
    height: 100%;
    display: block;
}

.single_product_container .product_details {
    flex: 0 0 52%;
}

.single_product_container .product_price {
    font-size: var(--text_2xl);
    color: var(--color_primary);
    font-weight: 700;
    margin-bottom: var(--space_md);
}

/* ---- 产品卖点列表 ---- */
.selling_points {
    list-style: none;
    padding: 0;
    margin-bottom: var(--space_lg);
}

.selling_points li {
    padding: 10px 0;
    padding-left: 28px;
    position: relative;
    border-bottom: 1px solid var(--color_border);
}

.selling_points li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--color_primary);
    font-weight: 700;
}

/* ---- 产品规格参数表 ---- */
.specs_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space_lg);
}

.specs_table tr {
    border-bottom: 1px solid var(--color_border);
}

.specs_table tr:nth-child(even) {
    background: var(--color_bg_lighter);
}

.specs_table td {
    padding: 12px 15px;
    font-size: var(--text_sm);
}

.specs_table td.spec_label {
    font-weight: 600;
    color: var(--color_dark);
    width: 35%;
}

/* ---- 产品详情 - 电商布局新增样式 ---- */

/* 元信息顶栏：分类芯片 + 评分 */
.product_meta_top {
    display: flex;
    align-items: center;
    gap: var(--space_sm);
    margin-bottom: var(--space_sm);
    flex-wrap: wrap;
}

.product_category_chip {
    display: inline-block;
    padding: 4px 14px;
    background: var(--color_primary);
    color: var(--color_white);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: var(--transition_base);
}

.product_category_chip:hover {
    background: var(--color_dark);
    color: var(--color_white);
}

/* 评分 */
.product_rating {
    display: flex;
    align-items: center;
    gap: 4px;
}

.product_rating .stars {
    color: #f5a623;
    font-size: var(--text_md);
    letter-spacing: 2px;
}

.product_rating .rating_text {
    font-weight: 700;
    font-size: var(--text_sm);
    color: var(--color_dark);
}

/* SKU / 型号 */
.product_sku {
    margin-bottom: var(--space_md);
    font-size: var(--text_sm);
    color: var(--color_text_light);
}

.product_sku .sku_label {
    font-weight: 600;
    color: var(--color_dark);
    margin-right: 4px;
}

.product_sku .sku_value {
    font-family: monospace;
    background: var(--color_bg_lighter);
    padding: 2px 8px;
    border-radius: 4px;
}

/* 产品简述 */
.product_excerpt {
    margin-bottom: var(--space_lg);
    font-size: var(--text_md);
    color: var(--color_text_light);
    line-height: 1.7;
    padding-bottom: var(--space_md);
    border-bottom: 1px solid var(--color_border);
}

/* 卖点区 */
.selling_points_wrap {
    margin-bottom: var(--space_lg);
}

.selling_points_heading {
    font-size: var(--text_sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color_dark);
    margin-bottom: var(--space_sm);
}

/* 规格速览 */
.specs_quick {
    background: var(--color_bg_lighter);
    border-radius: var(--radius_md);
    padding: var(--space_md);
    margin-bottom: var(--space_lg);
}

.specs_quick_heading {
    font-size: var(--text_sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color_dark);
    margin-bottom: var(--space_sm);
}

.specs_quick_table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text_sm);
}

.specs_quick_table tr {
    border-bottom: 1px dotted var(--color_border);
}

.specs_quick_table tr:last-child {
    border-bottom: none;
}

.specs_quick_table td {
    padding: 6px 0;
}

.specs_quick_table .spec_label {
    font-weight: 600;
    color: var(--color_dark);
    width: 40%;
}

.specs_quick_table .spec_value {
    color: var(--color_text);
}

/* 操作按钮行 */
.product_actions {
    display: flex;
    gap: var(--space_sm);
    margin-bottom: var(--space_lg);
}

.btn_catalogue {
    background: var(--color_dark) !important;
    flex: 0 0 auto !important;
}

.btn_catalogue:hover {
    background: var(--color_text_light) !important;
}

/* 信任徽章行 */
.trust_badges {
    display: flex;
    gap: var(--space_sm);
    flex-wrap: wrap;
    padding-top: var(--space_md);
    border-top: 1px solid var(--color_border);
}

.trust_badge_item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--color_text_light);
    background: var(--color_bg_lighter);
    padding: 6px 12px;
    border-radius: var(--radius_sm);
}

.trust_badge_item .tb_icon {
    font-size: 1rem;
}

.trust_badge_item .tb_text {
    font-weight: 600;
    white-space: nowrap;
}

/* ---- 产品描述区 ---- */
.product_description_section {
    border-top: 1px solid var(--color_border);
}

.product_description_content {
    line-height: 1.9;
    color: var(--color_text);
}

.product_description_content h2,
.product_description_content h3 {
    margin-top: var(--space_lg);
    margin-bottom: var(--space_sm);
}

.product_description_content p {
    margin-bottom: var(--space_md);
}

.product_description_content ul,
.product_description_content ol {
    margin-bottom: var(--space_md);
    padding-left: 20px;
}

/* ---- 完整规格表 ---- */
.specs_full_section {
    border-top: 1px solid var(--color_border);
}

.specs_full_section .specs_table_full {
    max-width: 700px;
    margin: 0 auto;
}

.specs_table_full td.spec_label {
    width: 40%;
}

/* ---- 相关产品区 ---- */
.related_products_section {
    border-top: 1px solid var(--color_border);
}

.related_products_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space_lg);
}

.related_product_card {
    background: var(--color_white);
    border: 1px solid var(--color_border);
    border-radius: var(--radius_md);
    overflow: hidden;
    transition: var(--transition_base);
}

.related_product_card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.related_product_card .rp_thumb {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color_bg_lighter);
}

.related_product_card .rp_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.related_product_card:hover .rp_thumb img {
    transform: scale(1.05);
}

.related_product_card .rp_no_image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--color_border);
}

.related_product_card .rp_info {
    padding: var(--space_md);
}

.related_product_card .rp_title {
    font-size: var(--text_md);
    font-weight: 600;
    margin-bottom: var(--space_xs);
    line-height: 1.4;
}

.related_product_card .rp_title a {
    color: var(--color_dark);
    text-decoration: none;
}

.related_product_card .rp_title a:hover {
    color: var(--color_primary);
}

.related_product_card .rp_excerpt {
    font-size: var(--text_sm);
    color: var(--color_text_light);
    margin-bottom: var(--space_sm);
    line-height: 1.5;
}

.related_product_card .rp_link {
    font-size: var(--text_sm);
    font-weight: 600;
    color: var(--color_primary);
    text-decoration: none;
}

.related_product_card .rp_link:hover {
    text-decoration: underline;
}

/* ============================================================
   9.0 - OEM/ODM页面
   ============================================================ */

/* ---- 定制流程步骤条 ---- */
.oem_process {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space_md);
    position: relative;
}

.oem_process::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--color_border);
    z-index: 0;
}

.oem_step {
    text-align: center;
    position: relative;
    z-index: 1;
}

.oem_step .step_number {
    width: 80px;
    height: 80px;
    background: var(--color_white);
    border: 3px solid var(--color_primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text_xl);
    font-weight: 700;
    color: var(--color_primary);
    margin: 0 auto var(--space_md);
    transition: var(--transition_base);
}

.oem_step:hover .step_number {
    background: var(--color_primary);
    color: var(--color_white);
}

/* ---- 定制优势图标 ---- */
.oem_advantages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space_lg);
}

/* ============================================================
   10.0 - FAQ折叠面板
   FAQ页面使用可展开/收起的折叠面板，提升阅读效率
   ============================================================ */

/* ---- 折叠面板本体 ---- */
.faq_category_title {
    font-size: var(--text_xl);
    margin-bottom: var(--space_md);
    padding-bottom: var(--space_xs);
    border-bottom: 2px solid var(--color_primary);
    display: inline-block;
}

.faq_list {
    margin-bottom: var(--space_xl);
}

/* 单个FAQ项 -- 由问号和答案两部分组成 */
.faq_item {
    background: var(--color_white);
    border: 1px solid var(--color_border);
    border-radius: var(--radius_md);
    margin-bottom: var(--space_sm);
    overflow: hidden;
}

.faq_item .faq_question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space_md);
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text_md);
    color: var(--color_dark);
    transition: var(--transition_base);
    user-select: none;
}

.faq_item .faq_question:hover {
    color: var(--color_primary);
}

.faq_item .faq_question .faq_icon {
    font-size: 1.5rem;
    color: var(--color_primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: var(--space_sm);
}

/* 展开状态 -- 图标旋转180度 */
.faq_item.active .faq_question .faq_icon {
    transform: rotate(45deg);
}

.faq_item .faq_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq_item.active .faq_answer {
    max-height: 500px;
    padding: 0 var(--space_md) var(--space_md);
}

.faq_item .faq_answer p {
    color: var(--color_text);
    line-height: 1.8;
}

/* ============================================================
   11.0 - 联系页面
   ============================================================ */

.contact_layout {
    display: flex;
    gap: var(--space_2xl);
}

.contact_layout .contact_form_side {
    flex: 0 0 55%;
}

.contact_layout .contact_info_side {
    flex: 0 0 45%;
}

/* ---- 联系表单 ---- */
.contact_form .form_group {
    margin-bottom: var(--space_md);
}

.contact_form label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: var(--text_sm);
    color: var(--color_dark);
}

.contact_form label .required {
    color: var(--color_error);
}

.contact_form input[type="text"],
.contact_form input[type="email"],
.contact_form input[type="tel"],
.contact_form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--color_border);
    border-radius: var(--radius_sm);
    font-size: var(--text_sm);
    font-family: var(--font_body);
    transition: var(--transition_base);
    background: var(--color_bg_lighter);
}

.contact_form input:focus,
.contact_form textarea:focus {
    outline: none;
    border-color: var(--color_primary);
    background: var(--color_white);
    box-shadow: 0 0 0 3px rgba(255, 83, 22, 0.1);
}

.contact_form textarea {
    min-height: 150px;
    resize: vertical;
}

.contact_form .form_row {
    display: flex;
    gap: var(--space_md);
}

.contact_form .form_row .form_group {
    flex: 1;
}

/* 表单提交反馈消息 */
.form_message {
    padding: var(--space_sm);
    border-radius: var(--radius_sm);
    margin-bottom: var(--space_md);
    display: none;
}

.form_message.success {
    display: block;
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form_message.error {
    display: block;
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* ---- 联系信息卡片 ---- */
.contact_info_card {
    background: var(--color_dark);
    color: var(--color_white);
    padding: var(--space_xl);
    border-radius: var(--radius_md);
    margin-bottom: var(--space_md);
}

.contact_info_card .info_item {
    display: flex;
    gap: var(--space_sm);
    margin-bottom: var(--space_md);
}

.contact_info_card .info_item .info_icon {
    font-size: 1.5rem;
    color: var(--color_primary);
    flex-shrink: 0;
    margin-top: 3px;
}

.contact_info_card .info_item .info_label {
    font-size: var(--text_xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 2px;
}

.contact_info_card .info_item .info_value {
    font-size: var(--text_sm);
}

.contact_info_card .info_item .info_value a {
    color: var(--color_white);
}

.contact_info_card .info_item .info_value a:hover {
    color: var(--color_primary);
}

/* ---- 社交媒体链接 ---- */
.social_links {
    display: flex;
    gap: 10px;
}

.social_links .social_link {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color_white);
    transition: var(--transition_base);
    font-size: var(--text_lg);
}

.social_links .social_link:hover {
    background: var(--color_primary);
    color: var(--color_white);
    transform: translateY(-2px);
}

/* ---- 地图容器 ---- */
.map_container {
    margin-bottom: var(--space_md);
    border-radius: var(--radius_md);
    overflow: hidden;
    height: 300px;
}

.map_container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* ============================================================
   12.0 - 博客/新闻
   ============================================================ */

.blog_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space_lg);
}

.blog_card {
    background: var(--color_white);
    border-radius: var(--radius_md);
    overflow: hidden;
    box-shadow: var(--shadow_sm);
    transition: var(--transition_base);
    border: 1px solid var(--color_border);
}

.blog_card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow_lg);
}

.blog_card .blog_thumb {
    height: 220px;
    overflow: hidden;
}

.blog_card .blog_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog_card:hover .blog_thumb img {
    transform: scale(1.05);
}

.blog_card .blog_info {
    padding: var(--space_md);
}

.blog_card .blog_meta {
    font-size: var(--text_xs);
    color: var(--color_text_light);
    margin-bottom: var(--space_sm);
    display: flex;
    gap: var(--space_sm);
}

.blog_card .blog_meta .meta_date {
    color: var(--color_primary);
}

.blog_card .blog_title {
    font-size: var(--text_lg);
    margin-bottom: var(--space_sm);
}

.blog_card .blog_title a {
    color: var(--color_dark);
}

.blog_card .blog_title a:hover {
    color: var(--color_primary);
}

.blog_card .blog_excerpt {
    font-size: var(--text_sm);
    color: var(--color_text_light);
    line-height: 1.6;
}

/* ---- 单篇文章详情 ---- */
.single_post_header {
    margin-bottom: var(--space_xl);
}

.single_post_header .post_meta {
    font-size: var(--text_sm);
    color: var(--color_text_light);
    margin-bottom: var(--space_sm);
}

.single_post_header .post_meta span {
    margin-right: var(--space_md);
    color: var(--color_primary);
}

.single_post_header .post_title {
    font-size: var(--text_3xl);
    margin-bottom: var(--space_sm);
}

.single_post_header .post_thumbnail {
    border-radius: var(--radius_md);
    overflow: hidden;
    margin-bottom: var(--space_lg);
}

.single_post_header .post_thumbnail img {
    width: 100%;
}

/* 文章内容排版 */
.post_content {
    line-height: 1.9;
    font-size: var(--text_md);
}

.post_content h2 {
    font-size: var(--text_2xl);
    margin-top: var(--space_xl);
}

.post_content h3 {
    font-size: var(--text_xl);
    margin-top: var(--space_lg);
}

.post_content p {
    margin-bottom: var(--space_md);
}

.post_content img {
    border-radius: var(--radius_md);
    margin: var(--space_md) 0;
}

.post_content blockquote {
    border-left: 4px solid var(--color_primary);
    padding: var(--space_md) var(--space_lg);
    background: var(--color_bg_lighter);
    margin: var(--space_lg) 0;
    font-style: italic;
}

.post_content ul,
.post_content ol {
    margin-bottom: var(--space_md);
    padding-left: var(--space_lg);
}

/* ============================================================
   13.0 - 页脚
   4栏布局：联系方式 | 公司链接 | 服务链接 | 最新新闻
   ============================================================ */
.site_footer {
    background: var(--color_dark_secondary);
    color: #D6DEEB;
    font-size: var(--text_sm);
    position: relative;
    overflow: hidden;
}

.site_footer a {
    color: #D6DEEB;
}

.site_footer a:hover {
    color: var(--color_primary);
}

.footer_main {
    padding: var(--space_3xl) 0 var(--space_2xl);
}

.footer_grid {
    display: grid;
    grid-template-columns: 2fr 1.2fr 1.2fr 2.2fr;
    gap: var(--space_lg);
}

.footer_col .footer_title {
    font-size: var(--text_xl);
    color: var(--color_white);
    margin-bottom: var(--space_md);
    font-weight: 700;
}

/* ---- 页脚联系方式 ---- */
.footer_contact_list {
    list-style: none;
    padding: 0;
}

.footer_contact_list li {
    display: flex;
    gap: var(--space_sm);
    margin-bottom: var(--space_sm);
    align-items: flex-start;
}

.footer_contact_list li .fc_icon {
    color: var(--color_primary);
    flex-shrink: 0;
    margin-top: 4px;
}

/* ---- 页脚链接列表 ---- */
.footer_links {
    list-style: none;
    padding: 0;
}

.footer_links li {
    margin-bottom: 8px;
}

.footer_links li a {
    transition: var(--transition_base);
}

.footer_links li a:hover {
    padding-left: 5px;
}

.footer_links li a::before {
    content: '\25B8\00A0';
    /* ▸ + 不换行空格，CSS转义避免编码乱码 */
    color: var(--color_primary);
    font-size: 10px;
}

/* ---- 页脚最新新闻 ---- */
.footer_post_item {
    display: flex;
    gap: var(--space_sm);
    margin-bottom: var(--space_sm);
}

.footer_post_item .fp_thumb {
    width: 70px;
    height: 70px;
    border-radius: var(--radius_sm);
    overflow: hidden;
    flex-shrink: 0;
}

.footer_post_item .fp_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer_post_item .fp_info .fp_date {
    font-size: var(--text_xs);
    color: var(--color_primary);
}

.footer_post_item .fp_info .fp_title {
    font-size: var(--text_sm);
    line-height: 1.4;
    margin-top: 4px;
}

.footer_post_item .fp_info .fp_title a {
    color: var(--color_white);
}

.footer_post_item .fp_info .fp_title a:hover {
    color: var(--color_primary);
}

/* ---- 页脚底部版权 ---- */
.footer_bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--space_md) 0;
    text-align: center;
    font-size: var(--text_xs);
    color: rgba(255, 255, 255, 0.5);
}

/* ---- 返回顶部按钮 ---- */
.back_to_top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 45px;
    height: 45px;
    background: var(--color_primary);
    color: var(--color_white);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.3rem;
    display: none;
    transition: var(--transition_base);
    box-shadow: 0 4px 15px rgba(255, 83, 22, 0.3);
}

.back_to_top:hover {
    background: var(--color_dark);
    transform: translateY(-2px);
}

.back_to_top.visible {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ============================================================
   14.0 - 按钮与组件
   全站通用按钮样式
   ============================================================ */

/* ---- 主按钮(品牌橙色) ---- */
.btn {
    display: inline-block;
    padding: 16px 36px;
    font-size: var(--text_sm);
    font-weight: 700;
    font-family: var(--font_heading);
    border: none;
    border-radius: var(--radius_sm);
    cursor: pointer;
    transition: var(--transition_base);
    text-align: center;
    text-decoration: none;
    line-height: 1.2;
}

.btn_primary {
    background: var(--color_primary);
    color: var(--color_white);
}

.btn_primary:hover {
    background: var(--color_primary_hover);
    color: var(--color_white);
    box-shadow: 0 5px 15px rgba(255, 83, 22, 0.3);
    transform: translateY(-1px);
}

/* ---- 次按钮(白底橙边) ---- */
.btn_outline {
    background: transparent;
    color: var(--color_white);
    border: 2px solid var(--color_white);
}

.btn_outline:hover {
    background: var(--color_white);
    color: var(--color_primary);
}

/* ---- 内联链接按钮(文字+箭头) ---- */
.btn_inline {
    font-weight: 700;
    color: var(--color_primary);
    font-size: var(--text_sm);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn_inline:hover {
    gap: 14px;
}

.btn_inline::after {
    content: '→';
    transition: var(--transition_base);
}

.btn_lg {
    padding: 20px 48px;
    font-size: var(--text_md);
}

/* ---- 页面头部横幅(内页通用) ---- */
.page_banner {
    position: relative;
    background: var(--color_dark);
    background-image: url('/cdnstatic/page-home/slides/slide03.jpg');
    background-size: cover;
    background-position: center;
    padding: var(--space_4xl) 0 var(--space_2xl);
    text-align: center;

}

.page_banner .page_banner_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(25, 36, 55, 0.9), rgba(0, 0, 0, 0.3));
}

.page_banner .page_banner_content {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 15px;
}

.page_banner .page_banner_title {
    font-size: var(--text_4xl);
    color: var(--color_white);
    margin-bottom: var(--space_sm);
}

.page_banner .page_banner_desc {
    font-size: var(--text_md);
    color: rgba(255, 255, 255, 0.8);
}

/* ---- 面包屑导航 ---- */
.breadcrumb {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: var(--text_sm);
}

.breadcrumb a {
    color: rgba(255, 255, 255, 0.7);
}

.breadcrumb a:hover {
    color: var(--color_primary);
}

.breadcrumb .current {
    color: var(--color_primary);
}

/* ---- 分页 ---- */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--space_xl);
}

.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius_sm);
    background: var(--color_bg_lighter);
    font-weight: 600;
    transition: var(--transition_base);
}

.pagination .page-numbers.current {
    background: var(--color_primary);
    color: var(--color_white);
}

.pagination .page-numbers:hover:not(.current) {
    background: var(--color_dark);
    color: var(--color_white);
}

/* ---- 加载动画 ---- */
.loading_spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color_border);
    border-top-color: var(--color_primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- 空状态提示 ---- */
.no_results {
    text-align: center;
    padding: var(--space_3xl) 0;
    color: var(--color_text_light);
}

.no_results .no_results_icon {
    font-size: 3rem;
    margin-bottom: var(--space_md);
}

/* ---- 404页面 ---- */
.error_404 {
    text-align: center;
    padding: var(--space_4xl) 0;
    margin-top: 80px;
}

.error_404 .error_code {
    font-size: 8rem;
    font-weight: 700;
    color: var(--color_primary);
    line-height: 1;
}

.error_404 .error_title {
    font-size: var(--text_2xl);
    margin: var(--space_md) 0;
}

.error_404 .error_desc {
    color: var(--color_text_light);
    margin-bottom: var(--space_xl);
}

/* ---- 搜索表单 ---- */
.search_form {
    display: flex;
    max-width: 500px;
}

.search_form input[type="search"] {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid var(--color_border);
    border-right: none;
    border-radius: var(--radius_sm) 0 0 var(--radius_sm);
    font-size: var(--text_sm);
    font-family: var(--font_body);
}

.search_form input[type="search"]:focus {
    outline: none;
    border-color: var(--color_primary);
}

.search_form button {
    padding: 14px 24px;
    background: var(--color_primary);
    color: var(--color_white);
    border: none;
    border-radius: 0 var(--radius_sm) var(--radius_sm) 0;
    cursor: pointer;
    font-size: var(--text_sm);
    font-family: var(--font_heading);
    font-weight: 600;
    transition: var(--transition_base);
}

.search_form button:hover {
    background: var(--color_primary_hover);
}

/* ---- 隐私政策页面 ---- */
.privacy_content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.9;
}

.privacy_content h2 {
    font-size: var(--text_xl);
    margin-top: var(--space_xl);
    padding-bottom: var(--space_xs);
    border-bottom: 2px solid var(--color_border);
}

.privacy_content h3 {
    font-size: var(--text_lg);
    margin-top: var(--space_lg);
}

/* ============================================================
   15.0 - 响应式设计
   移动端优先的响应式断点
   ============================================================ */

/* ---- 平板横屏 (≤1024px) ---- */
@media (max-width: 1024px) {
    :root {
        --text_5xl: 2.5rem;
        --text_4xl: 2.2rem;
        --text_3xl: 2rem;
        --text_2xl: 1.6rem;
    }

    .container {
        max-width: 960px;
    }

    .footer_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .products_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product_categories_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .oem_process {
        grid-template-columns: repeat(3, 1fr);
    }

    .mvv_grid {
        grid-template-columns: 1fr;
    }

    .oem_advantages {
        grid-template-columns: repeat(2, 1fr);
    }

    .certificates_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about_intro {
        flex-direction: column;
    }

    .contact_layout {
        flex-direction: column;
    }

    .col_3 {
        width: 50%;
    }

    .col_4 {
        width: 50%;
    }

    .col_6 {
        width: 100%;
    }

    .col_8 {
        width: 100%;
    }

    .col_9 {
        width: 100%;
    }

    /* 侧边栏变横向 pills */
    .product_sidebar {
        position: static;
        margin-bottom: var(--space_lg);
    }

    .product_cat_list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .product_cat_list .cat_item {
        border-bottom: none;
    }

    .product_cat_list .cat_item a {
        padding: 8px 16px;
        border: 1px solid var(--color_border);
        border-radius: 20px;
        border-left: 1px solid var(--color_border);
        font-size: var(--text_sm);
    }

    .product_cat_list .cat_item.active a {
        border-color: var(--color_primary);
        background: var(--color_primary);
        color: #fff;
        border-left: 1px solid var(--color_primary);
    }

    .product_cat_list .cat_item a:hover {
        padding-left: 16px;
        border-color: var(--color_primary);
        background: rgba(255, 83, 22, 0.05);
    }
}

/* ---- 平板竖屏 (≤768px) ---- */
@media (max-width: 768px) {
    :root {
        --text_5xl: 2rem;
        --text_4xl: 1.8rem;
        --text_3xl: 1.6rem;
        --text_2xl: 1.4rem;
        --space_4xl: 4rem;
        --space_3xl: 3rem;
    }

    /* 移动端导航 */
    .menu_toggle {
        display: flex;
    }

    .main_nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--color_white);
        flex-direction: column;
        padding: 100px 30px 30px;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.15);
        transition: right 0.35s ease;
        overflow-y: auto;
    }

    .main_nav.active {
        right: 0;
    }

    .main_nav .nav_menu {
        flex-direction: column;
        width: 100%;
    }

    .main_nav .nav_menu>li>a {
        padding: 14px 0;
        border-bottom: 1px solid var(--color_border);
    }

    .main_nav .nav_menu .sub_menu {
        position: static;
        box-shadow: none;
        display: none;
        padding-left: 15px;
    }

    .main_nav .nav_menu .sub_menu.open {
        display: block;
    }

    /* 移动端全宽 */
    .footer_grid {
        grid-template-columns: 1fr;
    }

    .products_grid {
        grid-template-columns: 1fr;
    }

    .blog_grid {
        grid-template-columns: 1fr;
    }

    .product_categories_grid {
        grid-template-columns: 1fr;
    }

    .oem_process {
        grid-template-columns: 1fr;
    }

    .oem_advantages {
        grid-template-columns: 1fr;
    }

    .certificates_grid {
        grid-template-columns: 1fr;
    }

    .mvv_grid {
        grid-template-columns: 1fr;
    }

    .col_3,
    .col_4,
    .col_6,
    .col_8,
    .col_9,
    .col_12 {
        width: 100%;
    }

    .recommended_widget {
        display: none;
    }

    .timeline::before {
        left: 30px;
    }

    .timeline_item,
    .timeline_item:nth-child(even) {
        flex-direction: column;
        padding-left: 60px;
    }

    .timeline_item .timeline_dot {
        left: 30px;
    }

    .single_product_container {
        flex-direction: column;
    }

    .single_product_container .product_gallery,
    .single_product_container .product_details {
        flex: 1 1 100%;
    }

    .related_products_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .contact_form .form_row {
        flex-direction: column;
    }
}

/* ---- 手机 (≤480px) ---- */
@media (max-width: 480px) {
    .header_inner {
        height: 65px;
    }

    .site_logo .logo_img {
        height: 35px;
    }

    .section_header .section_title {
        font-size: var(--text_2xl);
    }

    .hero_section .hero_title {
        font-size: var(--text_3xl);
    }

    .hero_section .hero_desc {
        font-size: var(--text_sm);
    }

    .product_actions {
        flex-direction: column;
    }

    .related_products_grid {
        grid-template-columns: 1fr;
    }

    .trust_badges {
        gap: 6px;
    }

    .trust_badge_item {
        flex: 1 1 calc(50% - 6px);
        justify-content: center;
    }
}