/* ===== 公共层：设计 tokens / 版心 / 基础排版 / 按钮 ===== */
/* 全站字体：Montserrat（含较细的 300/400，用于主标题不过粗） */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');
:root {
  /* ===== 本站 7 个配色（客户资料 + AOLGA 参考站分析：暖调 charcoal + culinary copper，忽略 WP 默认杂色） ===== */
  --c-bg:#FCFAF6;         /* 页面主背景：暖白 warm white，让产品照片干净凸显 */
  --c-surface:#F6F3EB;    /* 浅卡其模块背景：交替板块底色，靠轻微色差区分模块 */
  --c-card:#F8F5EE;       /* 产品/内容卡片背景：浅米色 */
  --c-ink:#35312E;        /* 标题文字：带暖色的深咖黑 */
  --c-text:#625D56;       /* 正文文字：暖调深灰咖 */
  --c-muted:#8A847C;      /* 次要文字：说明 / 标签 / meta */
  --c-accent:#AF5A3C;     /* 陶土橙 terracotta：唯一转化色——CTA / 询盘 / 链接 / 焦点 */
  --c-accent-2:#6C674D;   /* 深卡其：眉标下划线 / 装饰细节（低调暖色，非金色） */
  --c-line:#DED8CE;       /* 暖调发丝线：卡片边框 / 分隔线 */
  --max:1600px;

  /* ===== 设计语言 tokens（来自 _refs.md：utilitarian catalog · 卡片统一 · 单一强调色 · 从容留白） ===== */
  --c-accent-dark:#8F4629;               /* 陶土橙 hover 加深 */
  --c-ink-2:#5C707E;                     /* 页脚背景：暖灰蓝（少量深色，仅限页脚/局部信息条） */
  --c-footer-deep:#465661;               /* 页脚深色底栏 */
  --c-footer-text:#F5F2EC;               /* 页脚文字：暖白 */
  --radius:6px;                          /* 组件小圆角（参考站 rectangular slight radius） */
  --radius-lg:12px;                      /* 卡片 / 弹窗 */
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(30,27,24,.05);
  --shadow-card:0 10px 30px rgba(30,27,24,.08);
  --shadow-pop:0 18px 44px rgba(30,27,24,.14);
  --header-h:50px;                       /* 主导航栏高度（sticky 定位用） */
  --fs-eyebrow:13px;
  --ff-base:"Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  --section-pad:clamp(56px,7vw,96px);   /* 全站统一的板块上下内边距，所有板块共用，避免高度参差/大留白 */
  /* ===== 各板块图片固定比例（上传任意大小都按此裁切，版面整齐） ===== */
  --ratio-hero:1920/780;     /* banner 主视觉 */
  --ratio-product:800/700;   /* 产品 */
  --ratio-service:800/550;   /* 服务 */
  --ratio-case:800/600;      /* 案例 */
  --ratio-solution:800/600;  /* 解决方案 */
  --ratio-blog:800/400;      /* 新闻/博客 */
  --img-ratio:4/3;           /* 其它未指定时的兜底比例 */
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
/* ===== 图片比例容器：除 hero 外所有内容图放进 .media，按类型加 r-* 修饰类 ===== */
.media{position:relative;width:100%;aspect-ratio:var(--img-ratio);overflow:hidden;background:var(--c-surface)}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.media.r-product{aspect-ratio:var(--ratio-product)}
.media.r-service{aspect-ratio:var(--ratio-service)}
/* 1. 让外层容器解除比例限制 */
.media.r-case {
    aspect-ratio: auto !important;
    height: auto !important;
}

.news-card .media{
    aspect-ratio: 600 / 400;
}

/* 2. 强制让里面的图片回归正常的文档流，按自身高度撑开 */
.media.r-case img {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* 确保图片完整展示不被裁剪 */
}
.media.r-solution{aspect-ratio:var(--ratio-solution)}
/*.media.r-blog{aspect-ratio:var(--ratio-blog)}*/
.media.r-about{aspect-ratio:auto}                          /* about 用自然高度，不裁切 */
.media.r-about img{position:static;height:auto;width:100%}
.media.is-contain img{object-fit:contain}                  /* logo/证书完整显示 */
body{margin:0;font-family:var(--ff-base);color:var(--c-text);background:var(--c-bg);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{
	max-width:100%;
	height:auto;
	display:block;
}
a{color:var(--c-accent);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--c-accent-dark)}
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.18;color:var(--c-ink);letter-spacing:-.01em}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 40px}

/* ===== 按钮：单一铜红转化色（实心主按钮 / 描边次按钮），utilitarian 直角小圆角 ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 30px;border:1px solid var(--c-accent);border-radius:var(--radius);background:var(--c-accent);color:#fff;font-weight:700;font-size:15px;letter-spacing:.01em;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease)}
.btn:hover{background:var(--c-accent-dark);border-color:var(--c-accent-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-card)}
.btn-outline{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.btn-outline:hover{background:var(--c-ink);border-color:var(--c-ink);color:#fff}
.btn-ghost{background:transparent;color:var(--c-accent);border-color:transparent;padding-left:0;padding-right:0}
.btn-ghost:hover{background:transparent;color:var(--c-accent-dark);transform:none;box-shadow:none}
.btn-ghost::after{content:"→";transition:transform .18s var(--ease)}
.btn-ghost:hover::after{transform:translateX(4px)}


.section-label{display:none;align-items:center;gap:10px;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent)}
.section-label::before{content:"";width:26px;height:2px;background:var(--c-accent-2)}
.section-label.center::before{display:none}
.section-title{font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.14;color:var(--c-ink);margin:.32em 0 0}
.section-sub{font-size:17px;line-height:1.75;color:var(--c-muted);max-width:680px;margin:.6em 0 0}  


/* ===== 板块节奏：所有顶层板块共用统一间距 + 版心，保证高度协调、左右对齐 =====
   规范：每个板块最外层 <section class="section">，内容包一层 <div class="container">。 */
.section{padding:var(--section-pad) 0}
.section.tight{padding:calc(var(--section-pad) * .5) 0}   /* 内容少的板块用紧凑间距，别靠大留白撑高 */
.section.alt{background:var(--c-surface)}                  /* 相邻板块用交替底色区分，而非拉开大空白 */
.section + .section{}                                     /* 间距由各自 padding 决定，不额外叠加 margin */
.section-head{max-width:760px;margin:0 0 36px}            /* 板块标题区统一下间距 */
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}

/* ===== 滚动入场动画（降级安全！无 JS / 编辑器里内容照常可见）=====
   关键：.reveal 默认完全可见；只有 common.js 给 <html> 加了 .has-js 后，
   才进入「先隐藏→滚动到可见区再入场」模式。这样编辑器(无JS)和任何JS报错时，
   内容都不会消失。**所有板块的入场动画都用 .reveal，不要自己写 opacity:0。** */
.has-js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.has-js .reveal.visible{opacity:1;transform:none}

/* ===== 通用「中心放大、两边缩小」轮播工具类 =====
   用法：容器 <div class="swiper center-swiper">…<div class="swiper-pagination"></div></div>
   缩放只用 CSS 作用在 .swiper-slide-active 上（不要用 JS setTranslate 改 transform，会和 Swiper 打架）。*/
.center-swiper{padding:10px 0 44px}
.center-swiper .swiper-wrapper{align-items:center}                 /* 缩放的两侧卡片垂直居中，避免高低错位 */
.center-swiper .swiper-slide{height:auto;transition:transform .45s var(--ease),opacity .45s var(--ease);transform:scale(.86);opacity:.55}
.center-swiper .swiper-slide-active{transform:scale(1);opacity:1}
.center-swiper .swiper-pagination{text-align:center;margin-top:14px}
.center-swiper .swiper-pagination-bullet-active{background:var(--c-accent)}

/* ===== 视频：图片中央播放按钮 + 点击弹窗播放（common.js 自动接管 [data-video]） ===== */
.has-video{position:relative}
.play-btn{position:absolute;inset:0;margin:auto;width:72px;height:72px;border:none;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s var(--ease),transform .2s var(--ease);z-index:2}
.play-btn:hover{background:var(--c-accent);transform:scale(1.06)}
.play-btn::before{content:"";width:0;height:0;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;margin-left:4px}
.video-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.video-modal.open{display:flex}
.video-modal-backdrop{position:absolute;inset:0;background:rgba(10,15,25,.82)}
.video-modal-box{position:relative;width:min(960px,92vw)}
.video-modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.video-modal-frame iframe,.video-modal-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-modal-close{position:absolute;top:-44px;right:0;width:36px;height:36px;border:none;border-radius:50%;background:#fff;color:#111;font-size:22px;line-height:1;cursor:pointer}

/* ===== 导航搜索：放大镜按钮 + 下拉展开式搜索条（浮在内容上，不挤压 banner）=====
   ★承载搜索的 header 顶栏容器必须 position:relative，否则 .header-search 的 top:100% 会乱定位、顶到 banner。
   JS 由 common.js 的 initSearch 接管（按钮 id=searchToggle、面板 id=searchPanel）。 */
.header-search-toggle{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;background:transparent;border:none;border-radius:9px;color:var(--c-ink);cursor:pointer;transition:color .15s var(--ease),border-color .15s var(--ease),background .15s var(--ease)}
.header-search-toggle svg{width:19px;height:19px;fill:currentColor}
.header-search-toggle:hover{color:var(--c-accent);border-color:var(--c-accent);background:var(--c-surface)}
.header-search-toggle[aria-expanded=true]{color:var(--c-accent);border-color:var(--c-accent)}
.header-search{position:absolute;top:100%;left:0;right:0;width:100%;z-index:60;border-top:1px solid var(--c-line);background:var(--c-bg);box-shadow:0 12px 28px rgba(0,0,0,.08);max-height:0;overflow:hidden;opacity:0;transition:max-height .26s var(--ease),opacity .26s var(--ease)}
.header-search.open{max-height:160px;opacity:1}
.header-search-form{display:flex;align-items:center;gap:12px;max-width:var(--max);margin:0 auto;padding:16px 40px;position:relative}
.header-search-icon{position:absolute;left:54px;width:18px;height:18px;fill:var(--c-muted);pointer-events:none}
.header-search-input{flex:1;width:100%;padding:13px 16px 13px 42px;border:1px solid var(--c-line);border-radius:8px;background:var(--c-surface);color:var(--c-ink);font:inherit;transition:border-color .15s var(--ease),background .15s var(--ease)}
.header-search-input:focus{outline:none;border-color:var(--c-accent);background:var(--c-bg)}
.header-search-submit{flex-shrink:0}

/* ===== 表单样式：同时覆盖原生 .rfq-form 和 Contact Form 7 输出（CF7 自动套主题，无需手调） ===== */
.rfq-form .form-row,.wpcf7-form .form-row,.wpcf7-form p{margin:0 0 16px}
.rfq-form label,.wpcf7-form label{display:block;font-weight:600;font-size:14px;color:var(--c-ink);margin-bottom:6px}
.rfq-form input,.rfq-form textarea,.rfq-form select,
.wpcf7-form input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]),
.wpcf7-form textarea,.wpcf7-form select{width:100%;padding:12px 14px;border:1px solid var(--c-line);border-radius:8px;background:var(--c-bg);color:var(--c-ink);font:inherit;transition:border-color .15s var(--ease)}
.rfq-form input:focus,.rfq-form textarea:focus,.wpcf7-form input:focus,.wpcf7-form textarea:focus,.wpcf7-form select:focus{outline:none;border-color:var(--c-accent)}
.rfq-form textarea,.wpcf7-form textarea{height:118px;min-height:88px;resize:vertical}   /* 约 4 行高，管住 CF7 默认 10 行；仍可手动拉伸 */
.wpcf7-form .wpcf7-submit{width:100%;padding:13px 28px;border:none;border-radius:8px;background:var(--c-accent);color:#fff;font-weight:600;cursor:pointer;transition:filter .15s var(--ease)}
.wpcf7-form .wpcf7-submit:hover{filter:brightness(1.1)}
.wpcf7-form .wpcf7-not-valid-tip{color:var(--c-accent-2);font-size:13px;margin-top:4px}
.wpcf7-form .wpcf7-spinner{margin:0 auto;display:block}
.wpcf7-form .wpcf7-response-output{margin:14px 0 0;padding:12px 16px;border-radius:8px;font-size:14px;border:1px solid var(--c-line)}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.unaccepted .wpcf7-response-output{border-color:var(--c-accent-2);color:var(--c-accent-2)}
.wpcf7 form.sent .wpcf7-response-output{border-color:#2e7d32;color:#2e7d32}
/* 询盘表单 2-2-1 布局：两列栅格，含 textarea 的行 + 提交按钮整行 */
.rfq-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;align-items:start}
.rfq-form .form-row,.rfq-form p{margin:0}
.rfq-form .form-row:has(textarea),.rfq-form p:has(textarea){grid-column:1/-1}
.rfq-form p:has(input[type=submit]),.rfq-form p:has(.wpcf7-submit){grid-column:1/-1;margin-top:6px}
.rfq-form>input[type=submit],.rfq-form>.wpcf7-submit{grid-column:1/-1;justify-self:start;width:auto;min-width:200px}
@media(max-width:560px){.rfq-form{grid-template-columns:1fr}}

/* ===== 内页通用：列表(archive/search) / 详情(single) / 404 ===== */
.container.narrow{max-width:860px}
.site-main{padding:70px 0 90px}
.site-main.site-front{padding:0}   /* 首页由板块自带间距，去掉内页 padding，避免首尾大留白（高特异性，压过任何重复规则） */
.archive-head{text-align:center;margin-bottom:30px}
.archive-head .section-sub,.archive-head .section-title{margin-left:auto;margin-right:auto}
.archive-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:34px}
.archive-filter a{padding:8px 18px;border:1px solid var(--c-line);border-radius:999px;color:var(--c-muted);font-weight:600;font-size:14px;transition:all .2s var(--ease)}
.archive-filter a:hover{color:var(--c-ink)}
.archive-filter a.active{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.archive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.arch-card{display:block;background:var(--c-card);border:1px solid var(--c-line);border-radius:14px;overflow:hidden;color:inherit;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.arch-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(30,27,24,.12)}
.arch-card:hover .media img{transform:scale(1.05)}
.arch-info{padding:18px 20px 22px}
.arch-date{font-size:13px;color:var(--c-muted)}
.arch-tit{font-size:19px;margin:4px 0 8px;color:var(--c-ink);line-height:1.3}
.arch-info p{margin:0;font-size:14px;color:var(--c-muted);line-height:1.6}
.archive-empty{color:var(--c-muted);text-align:center;padding:40px}
.archive-pagination{margin-top:40px;text-align:center}
.archive-pagination .page-numbers{display:inline-block;min-width:40px;padding:8px 12px;margin:0 3px;border:1px solid var(--c-line);border-radius:8px;color:var(--c-ink)}
.archive-pagination .page-numbers.current{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
/* 详情 */
.breadcrumb{font-size:13px;color:var(--c-muted);margin-bottom:20px}
.breadcrumb a{color:var(--c-muted)}.breadcrumb a:hover{color:var(--c-accent)}.breadcrumb .current{color:var(--c-ink)}
.breadcrumb span{margin:0 6px}
.single-head{margin-bottom:24px}
.single-date{font-size:14px;color:var(--c-muted)}
.single-tit{font-size:clamp(28px,4vw,44px);font-weight:600;line-height:1.2;color:var(--c-ink);margin:.2em 0}
.single-hero{border-radius:14px;margin-bottom:30px}
.single-content{font-size:17px;line-height:1.8;color:var(--c-ink)}
.single-content p{margin:0 0 1.1em}
.single-content img{border-radius:10px}
.single-back{margin-top:40px}
/* 404 */
.error-404 .err-wrap{text-align:center;padding:80px 0}
.error-404 .section-sub{margin:0 auto 26px}
.err-search{display:flex;gap:10px;max-width:420px;margin:0 auto 22px}
.err-search input{flex:1;padding:12px 14px;border:1px solid var(--c-line);border-radius:8px;font:inherit}

@media(max-width:768px){.container{padding:0 20px}.archive-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}}

/* ===================================================================
   HEADER / 顶栏 / 导航 / MEGA / 下拉 / 语言 / 移动端  —— 全站一张脸
   设计语言：utilitarian catalog（_refs.md）· charcoal + copper · 单一强调色
   =================================================================== */

/* 顶部细条：标语 + 联系方式 + 语言切换 */
.top-bar{background:var(--c-accent-2);color:#fff;font-size:13px}
.top-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;padding-top:10px;padding-bottom:10px}
.top-tagline{margin:0;color:rgba(255,255,255,.72);letter-spacing:.02em}
.top-actions{display:flex;align-items:center;gap:22px;margin-left:10px}
.top-contact{display:flex;align-items:center;gap:20px;width:33.33%;     margin: 0 auto;
    justify-content: center;}
.top-contact:nth-child(2){
    justify-content: center;
}
.top-contact a{display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.86);font-weight:500}
.top-contact a:hover{color:var(--c-accent-2)}
.top-contact svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

/* 语言切换（i18n 集成点：无插件时显示当前语言 EN，插件可 hook 'aib_languages' 注入） */
.lang-switch{position:relative}
.lang-current{display:inline-flex;align-items:center;gap:7px;background:transparent;border:0;color:var(--c-ink);font:inherit;font-weight:600;cursor:pointer;padding:4px 2px}
.lang-current:hover{color:var(--c-accent-2)}
.lang-current svg{width:15px;height:15px;fill:currentColor}
.lang-current .caret{width:9px;height:9px;transition:transform .2s var(--ease)}
.lang-switch:hover .lang-current .caret,.lang-switch:focus-within .lang-current .caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:100%;right:0;min-width:130px;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius);box-shadow:var(--shadow-pop);list-style:none;margin:6px 0 0;padding:6px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:70}
.lang-switch:hover .lang-menu,.lang-switch:focus-within .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu a{display:block;padding:8px 12px;border-radius:4px;color:var(--c-ink);font-weight:600;font-size:13px}
.lang-menu a:hover,.lang-menu a[aria-current=true]{background:var(--c-surface);color:var(--c-accent)}

/* 主导航栏（sticky） */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--c-bg);
    /* border-bottom: 1px solid var(--c-line); */
    transition: box-shadow .25s var(--ease);
    height: 85px;
    display: flex;
    align-items: center;
}
/* 	border-bottom:1px solid var(--c-line); */
	transition:box-shadow .25s var(--ease)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(30,27,24,.08)}
.nav-bar{display:flex;align-items:center;gap:28px;min-height:var(--header-h);justify-content: space-between;}
.site-logo{display:flex;align-items:center;flex-shrink:0;font-weight:800;font-size:24px;letter-spacing:.04em;color:var(--c-ink)}
.site-logo img{max-height:55px;width:auto}
.site-header.scrolled .nav-bar{min-height:64px}

/* 三栏 header：左菜单 | 中间 logo | 右菜单+搜索+语言 */
.nav-bar-3col{display:grid;grid-template-columns:1fr auto 1fr;gap:28px}
.nav-bar-3col .site-nav-left{justify-self:start}
.nav-bar-3col .header-brand{justify-self:center;display:flex;align-items:center}
.nav-bar-3col .header-col-right{justify-self:end;display:flex;align-items:center;gap:12px}
.nav-bar-3col .site-nav-right .nav-menu>li>a{padding:0 0 0 40px}
.nav-bar-3col .header-actions{margin-left:0}

/* 桌面主菜单 */
.site-nav{margin-left:0}
.nav-menu,.nav-menu .sub-menu{list-style:none;margin:0;padding:0}
.nav-menu{display:flex;align-items:flex-start;gap:2px}
.nav-menu>li{position:relative}
.nav-menu>li.mega-parent{position:static}
.nav-menu>li>a{display:flex;align-items:center;gap:6px;height:var(--header-h);padding:0 40px 0 0;font-weight:600;font-size:15px;color:var(--c-ink);position:relative}
.site-header.scrolled .nav-menu>li>a{height:64px}
.nav-menu>li>a::after{content:"";position:absolute;left:16px;right:16px;bottom:18px;height:2px;background:var(--c-accent);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}

.nav-menu>li:hover>a,.nav-menu>li:focus-within>a,
.nav-menu>li.current-menu-item>a{color:var(--c-accent);}

.nav-menu>li:hover>a::after,.nav-menu>li:focus-within>a::after{transform:scaleX(1)}
.nav-menu .caret{width:10px;height:10px;fill:currentColor;transition:transform .2s var(--ease)}
.nav-menu>li:hover>a .caret,.nav-menu>li:focus-within>a .caret{transform:rotate(180deg)}
.nav-menu .nav-cta>a{margin-left:10px}
.nav-menu .nav-cta>a::after{display:none}
.nav-cta .btn{height:auto;padding:11px 22px}

/* 二级下拉（Cases / Blog 等） */
.has-dropdown>.sub-menu,.has-dropdown>.dropdown{position:absolute;top:100%;left:0;min-width:230px;background:var(--c-bg);border:1px solid var(--c-line);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:8px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:60}
.has-dropdown:hover>.sub-menu,.has-dropdown:hover>.dropdown,.has-dropdown:focus-within>.sub-menu,.has-dropdown:focus-within>.dropdown{opacity:1;visibility:visible;transform:none}
.has-dropdown .sub-menu a,.has-dropdown .dropdown a{display:block;padding:10px 14px;border-radius:6px;font-size:14.5px;font-weight:500;color:var(--c-ink)}
.has-dropdown .sub-menu a:hover,.has-dropdown .dropdown a:hover{background:var(--c-surface);color:var(--c-accent)}

/* Products 超级导航（多列分类） */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--c-bg);border-top:1px solid var(--c-line);border-bottom:1px solid var(--c-line);box-shadow:var(--shadow-pop);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:55}
.mega-parent:hover>.mega,.mega-parent:focus-within>.mega{opacity:1;visibility:visible;transform:none}
.mega-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 40px;padding-top:34px;padding-bottom:34px}
.mega-col h4{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--c-line)}
.mega-col ul{list-style:none;margin:0;padding:0}
.mega-col li{margin:0 0 3px}
.mega-col a{display:block;padding:7px 10px;margin:0 -10px;border-radius:6px;font-size:14.5px;font-weight:500;color:var(--c-ink)}
.mega-col a:hover{background:var(--c-surface);color:var(--c-accent);padding-left:16px}
.mega-feature{grid-column:span 1;background:var(--c-surface);border-radius:var(--radius-lg);padding:22px}
.mega-feature .section-label{margin-bottom:10px}
.mega-feature p{font-size:14px;color:var(--c-muted);margin:0 0 16px}

/* 头部动作区（搜索 + 汉堡） */
.header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
.site-nav+.header-actions{margin-left: auto;}
.nav-hamburger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:transparent;border:1px solid var(--c-line);border-radius:var(--radius);cursor:pointer}
.nav-hamburger span{display:block;width:20px;height:2px;background:var(--c-ink);transition:transform .2s var(--ease),opacity .2s var(--ease)}

/* 移动端抽屉菜单 */
.mobile-drawer{position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:var(--c-bg);z-index:120;transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-pop);overflow-y:auto}
.mobile-drawer.open{transform:none}
.mobile-backdrop{position:fixed;inset:0;background:rgba(30,27,24,.5);opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s;z-index:110}
.mobile-backdrop.open{opacity:1;visibility:visible}
.mobile-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--c-line)}
.mobile-close{width:40px;height:40px;background:transparent;border:1px solid var(--c-line);border-radius:var(--radius);font-size:24px;line-height:1;color:var(--c-ink);cursor:pointer}
.mobile-menu{list-style:none;margin:0;padding:8px 0}
.mobile-menu li{border-bottom:1px solid var(--c-line)}
.mobile-menu>li>a,.m-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 22px;font-size:16px;font-weight:600;color:var(--c-ink);background:transparent;border:0;text-align:left;cursor:pointer;font-family:inherit}
.m-toggle .caret{width:12px;height:12px;fill:currentColor;transition:transform .25s var(--ease)}
.mobile-menu li.open>.m-toggle .caret{transform:rotate(180deg)}
.m-sub{list-style:none;margin:0;padding:0;max-height:0;overflow:hidden;transition:max-height .3s var(--ease);background:var(--c-surface)}
.mobile-menu li.open>.m-sub{max-height:1400px}
.m-sub a{display:block;padding:12px 22px 12px 36px;font-size:14.5px;font-weight:500;color:var(--c-muted)}
.m-sub a:hover{color:var(--c-accent)}
.m-sub .m-group{padding:14px 22px 4px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent)}
.mobile-cta{padding:20px 22px}
.mobile-cta .btn{width:100%}

/* ===== 断点：桌面菜单收起为汉堡 ===== */
@media(max-width:1080px){
  .site-nav{display:none}
  .nav-hamburger{display:flex}
  .top-tagline{display:none}
}
@media(max-width:600px){
  .top-actions{gap:14px}
  .top-contact{gap:12px}
  .top-contact .t-label{display:none}
}

/* ===================================================================
   FOOTER  ——  深炭底 · 品牌/联系/社媒/快捷链接 + 版权条
   =================================================================== */
.site-footer{position:relative;background:var(--c-ink-2);color:rgba(255,255,255,.72);padding-top:clamp(60px,6vw,92px)}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--c-accent) 0%,var(--c-accent-2) 55%,transparent 100%)}
/* Get a Quote —— 与页脚合为一个板块的询盘模块：深底 + 高对比浅色表单卡片 */
.footer-quote{padding-bottom:clamp(48px,5vw,72px);margin-bottom:clamp(48px,5vw,72px);border-bottom:1px solid rgba(255,255,255,.12)}
.footer-quote-inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,56px);align-items:center}
.fq-intro .section-label{color:var(--c-accent-2)}
.fq-title{color:#fff;font-size:clamp(24px,3vw,34px);line-height:1.18;margin:.3em 0 0}
.fq-text{color:rgba(255,255,255,.62);font-size:15.5px;line-height:1.7;margin:.7em 0 0;max-width:46ch}
.fq-direct{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:22px}
.fq-direct a{display:inline-flex;align-items:center;gap:9px;color:rgba(255,255,255,.78);font-size:14.5px;font-weight:600}
.fq-direct a:hover{color:var(--c-accent-2)}
.fq-direct svg{width:18px;height:18px;fill:var(--c-accent-2);flex-shrink:0}
.fq-form-card{background:var(--c-surface);border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,32px);box-shadow:var(--shadow-card)}
@media(max-width:860px){.footer-quote-inner{grid-template-columns:1fr;gap:32px}}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:clamp(32px,4vw,64px);padding-bottom:56px}
.footer-brand{max-width:360px}
.footer-logo{display:inline-flex;align-items:center;font-weight:800;font-size:24px;letter-spacing:.04em;color:#fff;margin-bottom:18px}
.footer-logo img{max-height:42px;width:auto}
.footer-tagline{color:var(--c-accent-2);font-weight:600;font-size:15px;margin:0 0 12px}
.footer-brand p{color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.7;margin:0;margin-bottom: 10px;display:flex;align-items:center;gap:11px;}
.footer-brand p span{
	flex:1;
}

.footer-brand p svg{
    width: 18px;
    height: 18px;
}
.footer-brand p svg path{
    fill: #ffffff;
}

.site-footer h4{position:relative;color:#fff;font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
	padding-bottom:12px}
.site-footer h4::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:2px;background:var(--c-accent)}
.footer-contact,.footer-links,.footer-cta-col{display:flex;flex-direction:column;gap:14px}
.footer-cta-form{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.footer-cta-lead{margin:0;color:rgba(255,255,255,.7);font-size:15px;font-weight:600;line-height:1.5}
.footer-cta-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border:0;border-radius:var(--radius);    background: #ffffff;
    color: #060606;font-size:14px;font-weight:700;cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease)}
.footer-cta-btn:hover{background:var(--c-accent-dark);transform:translateY(-2px)}
.footer-cta-btn svg{width:18px;height:18px;fill:currentColor}
.footer-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.footer-menu a{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.7);font-size:14.5px;line-height:1.4;transition:color .18s var(--ease),transform .18s var(--ease)}
.footer-menu a::before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:#ffffff;opacity:.55;transition:opacity .18s var(--ease)}
.footer-menu a:hover{color:#fff;transform:translateX(3px)}
.footer-menu a:hover::before{opacity:1}
.footer-contact a,.footer-contact .address{display:flex;align-items:flex-start;gap:11px;color:rgba(255,255,255,.7);font-size:14.5px;font-style:normal;line-height:1.55;margin-bottom:0;  }
.footer-contact a:hover{color:var(--c-accent-2)}
.footer-contact svg{width:18px;height:18px;fill:#ffffff;flex-shrink:0;margin-top:2px}
.footer-contact svg path{fill:#ffffff;}
.footer-social{display:flex;gap:12px;margin-top:24px}
.footer-social a{display:grid;place-items:center;width:40px;height:40px;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);color:rgba(255,255,255,.75);transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease),transform .18s var(--ease)}
.footer-social a:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff;transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px;fill:currentColor}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:24px;padding-bottom:28px}
.footer-bottom p{margin:0;font-size:13.5px;color:rgba(255,255,255,.5)}
.footer-totop{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.footer-totop svg{width:16px;height:16px;fill:var(--c-accent-2);transition:transform .18s var(--ease)}
.footer-totop:hover{color:#fff}
.footer-totop:hover svg{transform:translateY(-3px)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px}.footer-brand{grid-column:1/-1;max-width:none}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}}
/* 页脚询盘表单卡片内的原生 rfq-form 单列排布（窄栏更易读，避免两列拥挤） */
.fq-form-card .rfq-form{grid-template-columns:1fr 1fr}
@media(max-width:1100px){.fq-form-card .rfq-form{grid-template-columns:1fr}}

/* ===================================================================
   全站悬浮联系按钮（右下角固定）
   =================================================================== */
.floating-contact{position:fixed;right:18px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:10px}
.floating-contact a{display:grid;place-items:center;width:50px;height:50px;border-radius:var(--radius-lg);background:#ffffff;color:#000;box-shadow:var(--shadow-card);position:relative;transition:background .18s var(--ease),transform .18s var(--ease)}
.floating-contact a:hover{background:var(--c-accent-dark);color:#fff;transform:translateY(-3px)}
.floating-contact a svg{width:22px;height:22px;fill:currentColor}
.floating-contact a[data-scroll-top]{background::#fff;opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s,background .18s var(--ease),transform .18s var(--ease)}
.floating-contact a[data-scroll-top].show{opacity:1;visibility:visible}
.floating-contact .fc-label{position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--c-ink);color:#fff;font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:6px;opacity:0;visibility:hidden;transition:opacity .18s var(--ease)}
.floating-contact a:hover .fc-label{opacity:1;visibility:visible}
@media(max-width:600px){.floating-contact a{width:46px;height:46px}.floating-contact .fc-label{display:none}}


.footer-logo2{
	color:#ffffff;
}

.nav-bar-3col{
        display: flex;
}
.nav-bar-3col .header-col-right,
.site-nav {
    flex: 1;
}
.nav-menu {
    justify-content: center;
}

/* ===================================================================
   首页暖调改造：把首页三个「大面积深色」板块改成暖白/浅卡其/深咖文字
   （hero 首屏 / 产品分类卡 / OEM 板块）。配色只用 --c-* token；
   深色只保留在顶栏·局部信息条·页脚。用 body 前缀提高特异性，覆盖
   各 block 自带 style.css 的硬编码深色，无需 !important。
   =================================================================== */

/* Hero 首屏：减淡遮罩、换成暖色渐变 scrim，让偏暖生活方式图透出来，
   只在文字一侧保留可读性所需的暖色压暗，右侧几乎透明。 */
body .hero-block .hero-overlay{
  background:linear-gradient(100deg,
    color-mix(in srgb,var(--c-ink) 52%,transparent) 0%,
    color-mix(in srgb,var(--c-ink) 30%,transparent) 46%,
    color-mix(in srgb,var(--c-ink) 6%,transparent) 100%);
}

/* 产品分类卡：原本被硬编码成灰(#8c9092)/黑(#000)——改成浅米卡片、
   细边框、克制阴影；标题深咖、正文次要文字色，CTA 陶土橙+白字。 */
body .categories-block .cat-grid .cat-card,
body .categories-block .cat-grid .cat-card:last-child{
  background:var(--c-card);
  border:1px solid var(--c-line);
  box-shadow:var(--shadow-sm);
}
body .categories-block .cat-grid .cat-card .cat-name{color:var(--c-ink)}
body .categories-block .cat-grid .cat-card .cat-desc{color:var(--c-text)}
body .categories-block .cat-grid .cat-card .cat-count{
  color:var(--c-accent-2);
  background:var(--c-surface);
  border:1px solid var(--c-line);
}
/* 深色遮罩在浅底卡上改成极淡暖色，仅托底文字、不压黑图片 */
body .categories-block .cat-grid .cat-overlay{
  background:linear-gradient(to top,
    color-mix(in srgb,var(--c-ink) 20%,transparent) 0%,
    transparent 55%);
}
/* CTA：陶土橙实心 + 白字（原为白底黑字） */
body .categories-block .cat-grid .cat-card .cat-link{
  background:var(--c-accent);
  color:#fff;
}
body .categories-block .cat-grid .cat-card .cat-link span{color:#fff}
body .categories-block .cat-grid .cat-card:hover .cat-link{background:var(--c-accent-dark)}

/* OEM/ODM 板块：原本整块深灰蓝(--c-ink-2)大面积深色——改成浅卡其模块底，
   标题深咖、正文暖调，图片阴影减淡；深色只留给页脚。 */
body .oem-block{background:var(--c-surface);color:var(--c-text)}
body .oem-block .oem-tit{color:var(--c-ink)}
body .oem-block .oem-desc{color:var(--c-text)}
body .oem-block .oem-points li{color:var(--c-text)}
body .oem-block .oem-points svg{fill:var(--c-accent)}
body .oem-block .oem-body .section-label{color:var(--c-accent)}
body .oem-block::before{background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 14%,transparent),transparent 70%)}
body .oem-block .oem-media .media{box-shadow:var(--shadow-card)}
/* OEM 按钮：陶土橙实心 + 白字（原为白底黑字） */
body .oem-block .oem-body .btn-f{background:var(--c-accent);color:#fff;border-color:var(--c-accent)}
body .oem-block .oem-body .btn-f:hover{background:var(--c-accent-dark);border-color:var(--c-accent-dark);color:#fff}

/* 产品分类 tab：hover/active 原为白底黑字——改成陶土橙 + 白字，统一强调色 */
body .products-block .prod-tab:hover,
body .products-block .prod-tab.active{background-color:var(--c-accent);color:#fff;border-color:var(--c-accent)}