/* ===== 公共层：设计 tokens / 版心 / 基础排版 / 按钮 =====
   设计事实源：user-data/p_2f1a0970/_design.md（ZHONGTAI Jewelry · 编辑式轻奢）。 */

/* ---- 自托管开源字体（OFL/免商用，font-display:swap，各 ≤2 字重）---- */
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/playfair-400.woff2") format("woff2")}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/playfair-700.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2")}

:root{
  /* ★本站 7 个配色变量（用户已选定，原样填入）——全站换色一处生效 */
  --c-bg:#F7F4EF;        /* 背景（暖象牙） */
  --c-surface:#FCFAF6;   /* 次级面（卡片/交替区） */
  --c-ink:#1C1A17;       /* 主文字（近黑 espresso） */
  --c-muted:#655C51;     /* 次要文字 */
  --c-accent:#B08D4C;    /* 主强调（香槟金：按钮/链接/CTA） */
  --c-accent-2:#9A9186;  /* 次强调（暖灰） */
  --c-line:#E4DDD2;      /* 描边/分隔 */
  /* 品牌辅助色（客户明确要求：espresso 深色区 + rust 签名点睛；集中管理，非散落硬编码） */
  --c-dark:#38302E;      /* espresso 深色区底（顶栏/新品/About/询盘） */
  --c-dark-ink:#F4ECE1;  /* 深色区文字（暖白，非纯白） */
  --c-champagne:#C4AD8B; /* 香槟金（OEM 流程区底 / 次强调） */
  --c-oem-bg:#eee1c7;    /* OEM/ODM Workflow 板块底（客户指定暖米色） */
  --c-rust:#CF4520;      /* rust 签名点睛（仅 CTA/链接/序号 hover 三处） */
  --c-eyebrow:#f7efe3;   /* 询盘区顶部小标题 LET'S TALK（客户指定暖白） */

  --max:1600px;
  --section-pad:clamp(56px,7vw,88px);   /* 桌面≈88px / 移动≈48px：统一板块上下内边距，避免参差/大留白 */
  --gap:28px;                            /* 网格标准 gap（品类无缝拼贴板块单独 gap:0） */

  /* ---- 字体栈（Playfair 标题 / Inter 正文，中文 Noto Sans SC 兜底为系统栈）---- */
  --font-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;

  /* ---- 圆角 ---- */
  --radius-card:12px;    /* 卡片 */
  --radius-input:8px;    /* 表单控件 */
  --radius-pill:999px;   /* 主 CTA pill */
  --radius-media:12px;   /* 内容图默认圆角 */

  /* ---- 阴影（espresso RGB 染色的柔影，克制，不用纯黑）---- */
  --shadow-card:0 6px 20px rgba(56,48,46,.08);
  --shadow-hover:0 12px 34px rgba(56,48,46,.14);

  /* ===== 各板块图片固定比例（上传任意大小都按此裁切，版面整齐） ===== */
  --ratio-hero:1920/780;     /* banner 主视觉 */
  --ratio-product:800/700;   /* 产品 */
  --ratio-service:800/550;   /* 服务 */
  --ratio-case:800/600;      /* 案例 */
  --ratio-solution:800/600;  /* 解决方案 */
  --ratio-blog:800/600;      /* 新闻/博客 */
  --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)}
.media.r-case{aspect-ratio:var(--ratio-case)}
.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/证书完整显示 */
.media:not(.r-about){border-radius:var(--radius-media)}     /* 内容图默认 12px 圆角（hero/无缝拼贴板块自行覆盖） */

/* ===== 排版：Playfair 衬线标题（横细竖粗）+ Inter 正文（B2B 数据/导航清晰） ===== */
body{margin:0;font-family:var(--font-sans);font-size:16px;color:var(--c-ink);background:var(--c-bg);line-height:1.7;-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-rust)}
h1,h2,h3{font-family:var(--font-serif);font-weight:700;color:var(--c-ink);margin:0 0 .4em}
h1{font-size:clamp(40px,5.6vw,72px);line-height:1.08;letter-spacing:-.015em}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.15;letter-spacing:-.01em}
h3{font-size:clamp(22px,2vw,26px);line-height:1.25}
h4{font-family:var(--font-sans);font-weight:600;font-size:19px;line-height:1.35;margin:0 0 .4em}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 40px}

/* ===== 按钮：主 CTA = pill（999px），rust 实心白字；ghost 白描边透明底（叠深色大图用） ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:14px 30px;border-radius:var(--radius-pill);background:var(--c-rust);color:#fff;font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1;border:1px solid var(--c-rust);cursor:pointer;transition:background .18s var(--ease),transform .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease)}
.btn:hover{background:#b83b1a;border-color:#b83b1a;color:#fff;transform:translateY(-1px)}
.btn.btn-gold{background:var(--c-accent);border-color:var(--c-accent)}
.btn.btn-gold:hover{background:#9a7838;border-color:#9a7838}
.btn.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)}
.btn.btn-ghost:hover{background:#fff;color:var(--c-ink);border-color:#fff}
.btn.btn-outline{background:transparent;color:var(--c-ink);border-color:var(--c-line)}
.btn.btn-outline:hover{background:var(--c-ink);color:#fff;border-color:var(--c-ink)}

/* 次级链接：细线圆环 + 延伸箭头「Learn More ───>」（客户明确要求，全站统一） */
.link-arrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--font-sans);font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--c-ink)}
.link-arrow::before{content:"";width:34px;height:34px;border:1px solid var(--c-line);border-radius:50%;flex-shrink:0;background:no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1A17' stroke-width='1.6'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");transition:border-color .2s var(--ease),background-color .2s var(--ease)}
.link-arrow:hover{color:var(--c-rust)}
.link-arrow:hover::before{border-color:var(--c-rust);background-color:rgba(207,69,32,.06);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CF4520' stroke-width='1.6'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}
/* 深色区上的箭头链接反相 */
.on-dark .link-arrow,.section.dark .link-arrow{color:var(--c-dark-ink)}
.on-dark .link-arrow::before,.section.dark .link-arrow::before{border-color:rgba(244,236,225,.4);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4ECE1' stroke-width='1.6'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E")}

/* ===== 板块标题体系 ===== */
.section-label{display:inline-block;font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent)}
.section-title{font-family:var(--font-serif);font-weight:700;font-size:clamp(30px,3.6vw,44px);line-height:1.15;letter-spacing:-.01em;color:var(--c-ink);
	margin:.24em 0 24px
}
.section-sub{font-size:16px;line-height:1.7;color:var(--c-muted);max-width:680px}

/* ===== 卡片：极浅描边平面 + 极柔阴影，12px 圆角 ===== */
.card{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}

/* ===== 板块节奏：所有顶层板块共用统一间距 + 版心，保证高度协调、左右对齐 =====
   规范：每个板块最外层 <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)}                  /* 相邻板块用交替底色区分，而非拉开大空白 */
/* 深浅交替节奏（编辑式杂志翻页感）：espresso 深色区 与 香槟金流程区 */
.section.dark{background:var(--c-dark);color:var(--c-dark-ink)}
.section.dark .section-title,.section.dark h1,.section.dark h2,.section.dark h3{color:var(--c-dark-ink)}
.section.dark .section-sub{color:rgba(244,236,225,.72)}
.section.dark .section-label{color:var(--c-champagne)}
.section.champagne{background:var(--c-champagne)}
.section.champagne .section-sub{color:#4a3f34}
/* OEM/ODM Workflow 板块：客户指定底色（作用域到 process 块，不影响其它 champagne 元素） */
.process-block.section.champagne{background:var(--c-oem-bg)}
.section + .section{}                                     /* 间距由各自 padding 决定，不额外叠加 margin */
.section-head{max-width:760px;margin:0 0 40px}            /* 板块标题区统一下间距 */
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
/* 左右对齐的板块头（左标题 + 右「查看更多」入口），多板块复用 */
.section-head.split{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ===== 滚动入场动画（降级安全！无 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:42px;height:42px;flex-shrink:0;background:transparent;border:1px solid currentColor;border-radius:50%;color:inherit;cursor:pointer;opacity:.85;transition:opacity .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}
.header-search-toggle svg{width:18px;height:18px}
.header-search-toggle:hover,.header-search-toggle[aria-expanded=true]{opacity:1}
.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-surface);border:1px solid var(--c-line);border-radius:var(--radius-card);overflow:hidden;color:inherit;box-shadow:var(--shadow-card);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.arch-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.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-family:var(--font-serif);font-size:clamp(28px,4vw,44px);font-weight:700;line-height:1.2;color:var(--c-ink);margin:.2em 0}
.single-hero{border-radius:var(--radius-card);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 — 双层导航（espresso 顶栏 + 透明悬浮主导航 + mega/下拉 + 移动汉堡）
   ========================================================================= */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;z-index:1000}
.skip-link:focus{left:12px;top:12px;padding:10px 16px;background:var(--c-ink);color:#fff;border-radius:8px}

/* 顶层功能栏：espresso 底 + 白字（tel/whatsapp/email 左，社媒右） */
.topbar{background:var(--c-dark);color:#fff;font-family:var(--font-sans);font-size:13px}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:16px}
.topbar-contact{display:flex;align-items:center;gap:22px;flex-wrap:wrap}


.topbar-contact a{color:rgba(255,255,255,.82);letter-spacing:.01em}
.topbar-contact a:hover{color:#fff}
.topbar-social{display:flex;align-items:center;gap:14px}
.topbar-social a{color:#fff;opacity:.8;display:inline-flex}
.topbar-social a:hover{opacity:1;color:var(--c-champagne)}
.topbar-social svg{width:16px;height:16px}

/* 主导航：默认透明叠 hero（白字）；滚动后转实底暖白 + espresso 文字 + 细底线 */
.site-header{position:sticky;top:0;z-index:100;background:transparent;color:#fff;transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease)}
.nav-bar{position:relative;display:flex;align-items:center;gap:28px;min-height:82px}
.site-logo{flex-shrink:0;display:inline-flex;align-items:center}
.site-logo img{max-height:52px;width:auto;transition:filter .3s var(--ease)}
.site-logo span{font-family:var(--font-serif);font-weight:700;font-size:26px;letter-spacing:.02em;color:inherit}

.site-nav{flex:1;display:flex;justify-content:center}
.site-nav .menu{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0;color:inherit}
.site-nav .menu>li{position:relative}
.site-nav .menu>li>a{display:inline-flex;align-items:center;gap:6px;padding:10px 15px;font-family:var(--font-sans);font-weight:400;font-size:15px;letter-spacing:.01em;color:inherit;white-space:nowrap}
.site-nav .menu>li>a:hover{color:inherit;opacity:.72}
.nav-caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;opacity:.7}

/* header 实底态（滚动后 / 非首页 / mega 展开时）；非首页默认即实底，避免白字叠白底闪烁 */
.site-header.solid .site-logo img,.site-header:hover .site-logo img{
	   filter:brightness(0);
}
.site-header.solid,.site-header:hover,.site-header.menu-open,body:not(.home):not(.front-page) .site-header{background:var(--c-bg);color:var(--c-ink);box-shadow:0 1px 0 var(--c-line)}
/* .site-header.solid .site-logo img,.site-header:hover .site-logo img,.site-header.menu-open .site-logo img{filter:none} */
.admin-bar .site-header{top:32px}
@media(max-width:782px){.admin-bar .site-header{top:46px}}
/* 首页：透明导航栏直接叠加在 hero 大图上方（上移正文抵消 sticky 占位） */
.site-main.site-front{margin-top:-82px}
@media(max-width:900px){.site-main.site-front{margin-top:-70px}}

/* header 右侧动作区 */
.header-actions{display:flex;align-items:center;gap:14px;flex-shrink:0}
.lang-switch{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;cursor:default;opacity:.9;color:inherit}
/* 透明叠图态：Get Quote = 透明底 + 白描边 + 全圆角（pill），文字白色 */
.site-header .header-quote{padding:11px 24px;font-size:14px;background:transparent;border-color:rgba(255,255,255,.85);color:#fff;border-radius:var(--radius-pill)}
.site-header .header-quote:hover{background:#fff;border-color:#fff;color:var(--c-ink)}
.site-header.solid .header-quote,.site-header:hover .header-quote,.site-header.menu-open .header-quote,body:not(.home):not(.front-page) .header-quote{background:var(--c-rust);border-color:var(--c-rust);color:#fff}
.site-header.solid .header-quote:hover,.site-header:hover .header-quote:hover,.site-header.menu-open .header-quote:hover,body:not(.home):not(.front-page) .header-quote:hover{background:#b83b1a;border-color:#b83b1a}

/* ---- 下拉（Cases/News 等 has-dropdown）---- */
.site-nav .has-dropdown .sub-menu{position:absolute;top:100%;left:0;min-width:220px;background:var(--c-bg);border:1px solid var(--c-line);border-radius:12px;box-shadow:var(--shadow-hover);list-style:none;margin:0;padding:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:120}
.site-nav .has-dropdown:hover .sub-menu,.site-nav .has-dropdown:focus-within .sub-menu{opacity:1;visibility:visible;transform:translateY(0)}
.site-nav .sub-menu li a{display:block;padding:9px 14px;border-radius:8px;color:var(--c-ink);font-size:14.5px}
.site-nav .sub-menu li a:hover{background:var(--c-surface);color:var(--c-rust)}

/* ---- Products 超级导航 mega ---- */
.mega-parent{position:static}
.mega{position:absolute;left:0;right:0;top:100%;background:var(--c-bg);border-top:1px solid var(--c-line);box-shadow:0 18px 40px rgba(56,48,46,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;z-index:110}
.mega-parent:hover .mega,.mega-parent:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;padding:34px 40px 40px}
.mega-col-title{display:block;font-family:var(--font-sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-accent);margin-bottom:16px}
.mega-col ul{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.mega-col li{margin-bottom:2px;break-inside:avoid}
.mega-col li a{display:block;padding:9px 0;font-family:var(--font-serif);font-size:17px;color:var(--c-ink);border-bottom:1px solid transparent}
.mega-col li a:hover{color:var(--c-rust)}
.mega-feature{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.mega-feature-card{display:block;color:var(--c-ink)}
.mega-feature-img{display:block;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--c-surface);margin-bottom:10px}
.mega-feature-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.mega-feature-card:hover .mega-feature-img img{transform:scale(1.05)}
.mega-feature-tit{font-size:14px;font-weight:600;color:var(--c-ink)}
.mega-feature-card:hover .mega-feature-tit{color:var(--c-rust)}

/* ★修复导航样式问题：旧 walker 注入的 .mega 与 Products 项下被当成静态列表渲染的 .sub-menu
   （无对应样式 → 裸列表叠在导航上，就是反馈图里的错位）。桌面全部隐藏，改用下方可交互超级导航。 */
.site-nav .mega-parent>.mega,
.site-nav .mega-parent>.sub-menu{display:none!important}

/* ---- Products 超级导航（全宽面板：左分类 tab + 右产品网格，划过切换分类/产品）---- */
.mega-super{position:absolute;left:0;right:0;top:100%;background:var(--c-bg);border-top:1px solid var(--c-line);box-shadow:0 18px 40px rgba(56,48,46,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .24s var(--ease),transform .24s var(--ease),visibility .24s;z-index:110}
.mega-super.open{opacity:1;visibility:visible;transform:translateY(0)}
.mega-super-inner{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:30px 40px 36px;align-items:start}
.mega-super-cats .mega-col-title{margin-bottom:14px}
.mega-super-cats ul{list-style:none;margin:0;padding:0}
.mega-super-cats li{margin:0}
.mega-cat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:8px;font-family:var(--font-serif);font-size:17px;color:var(--c-ink);cursor:pointer;transition:background .18s var(--ease),color .18s var(--ease)}
.mega-cat .mega-cat-arrow{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);opacity:0;transition:opacity .18s var(--ease)}
.mega-cat:hover,.mega-cat.active{background:var(--c-surface);color:var(--c-rust)}
.mega-cat.active .mega-cat-arrow{opacity:.8}
.mega-super-panels{position:relative;min-height:1px;border-left:1px solid var(--c-line);padding-left:40px}
.mega-super-panel[hidden]{display:none}
.mega-super-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.mega-prod{display:block;color:var(--c-ink)}
.mega-prod-img{display:block;margin-bottom:9px}
.mega-prod-img img{transition:transform .4s var(--ease)}
.mega-prod:hover .mega-prod-img img{transform:scale(1.06)}
.mega-prod-tit{display:block;font-size:14px;font-weight:600;line-height:1.35;color:var(--c-ink)}
.mega-prod:hover .mega-prod-tit{color:var(--c-rust)}
.mega-super-more{margin-top:24px}
@media(max-width:1200px){.mega-super-grid{grid-template-columns:repeat(3,1fr)}}

/* 搜索下拉条：透明 header 上展开为实底暖白（覆盖基础层的白底即可） */
.header-search{background:var(--c-bg)}
.header-search-form{max-width:var(--max)}

/* ---- 汉堡 + 移动菜单 ---- */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;background:transparent;border:none;cursor:pointer;padding:0}
.hamburger span{display:block;width:24px;height:2px;background:currentColor;margin:0 auto;transition:transform .25s var(--ease),opacity .25s var(--ease)}
.mobile-overlay{position:fixed;inset:0;background:rgba(28,26,23,.5);z-index:200;opacity:0;transition:opacity .3s var(--ease)}
.mobile-overlay.show{opacity:1}
.mobile-menu{position:fixed;top:0;right:0;width:min(360px,86vw);height:100%;background:var(--c-bg);z-index:210;transform:translateX(100%);transition:transform .32s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.mobile-menu.open{transform:translateX(0)}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--c-line)}
.mobile-menu-title{font-family:var(--font-serif);font-weight:700;font-size:22px}
.mobile-close{background:transparent;border:none;font-size:30px;line-height:1;color:var(--c-ink);cursor:pointer}
.mobile-nav{padding:12px 24px;flex:1}
.mobile-nav .menu{list-style:none;margin:0;padding:0}
.mobile-nav .menu>li{border-bottom:1px solid var(--c-line)}
.mobile-nav .menu a{display:block;padding:15px 0;font-size:16px;color:var(--c-ink);font-weight:500}
.mobile-nav .menu a:hover{color:var(--c-rust)}
.mobile-nav .sub-menu{list-style:none;margin:0 0 8px;padding:0 0 0 16px}
.mobile-nav .sub-menu a{padding:10px 0;font-size:14.5px;color:var(--c-muted);font-weight:400}
.mobile-nav .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;background:transparent}
.mobile-nav .mega-inner{display:block;padding:0 0 8px}
.mobile-nav .mega-feature{display:none}
.mobile-nav .mega-col ul{columns:1}
.mobile-nav .mega-col li a{font-family:var(--font-sans);font-size:14.5px;padding:8px 0}
.mobile-nav .nav-caret{display:none}
.mobile-menu-foot{padding:22px 24px;border-top:1px solid var(--c-line);display:flex;flex-direction:column;gap:12px}
.mobile-menu-foot a:not(.btn){color:var(--c-muted);font-weight:600}
.mobile-menu-foot .btn{margin-top:6px}

@media(max-width:1024px){
  .site-nav,.lang-switch,.mega-super{display:none}
  .hamburger{display:flex}
  .nav-bar{min-height:70px;gap:16px}
}
@media(max-width:600px){
  .topbar-contact{gap:14px}
  .topbar-social{display:none}
  .header-quote{display:none}
}

/* =========================================================================
   FOOTER — espresso 深色底 + 联系/社媒/快捷链接 + 悬浮联系按钮
   ========================================================================= */
.site-footer{background:var(--c-dark);color:var(--c-dark-ink)}
.footer-grid{display:grid;grid-template-columns:4fr 2fr 2fr 2fr;gap:48px;padding:72px 40px 56px}
.footer-logo{display:inline-flex;margin-bottom:20px}
.footer-logo img{max-height:52px;width:auto;filter:brightness(0) invert(1)}
.footer-logo span{font-family:var(--font-serif);font-weight:700;font-size:26px;color:#fff}
.footer-desc{max-width:440px;font-size:14.5px;line-height:1.75;color:rgba(244,236,225,.7);margin:0 0 22px}
.footer-social{display:flex;gap:12px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(244,236,225,.24);border-radius:50%;color:var(--c-dark-ink);transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
.footer-social a:hover{background:var(--c-champagne);border-color:var(--c-champagne);color:var(--c-dark)}
.footer-social svg{width:17px;height:17px}
.footer-col-title{font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--c-champagne);margin:0 0 18px}
.footer-contact p,.footer-contact a{display:block;font-size:14.5px;line-height:1.7;color:rgba(244,236,225,.78);margin-bottom:10px;margin-left: 5px;}
.footer-contact a:hover{color:#fff}
.footer-address{max-width:280px}
.footer-menu .menu,.footer-cats .menu{list-style:none;margin:0;padding:0}
.footer-menu .menu li,.footer-cats .menu li{margin-bottom:11px}
.footer-menu .menu a,.footer-cats .menu a{font-size:14.5px;color:rgba(244,236,225,.78)}
.footer-menu .menu a:hover,.footer-cats .menu a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(244,236,225,.14)}
.footer-bottom .container{padding-top:22px;padding-bottom:22px}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-copyright{margin:0;font-size:13px;color:rgba(244,236,225,.55)}
.footer-legal{display:flex;align-items:center;gap:16px}
.footer-legal a{position:relative;font-size:13px;color:rgba(244,236,225,.55);transition:color .15s var(--ease)}
.footer-legal a:hover{color:#fff}
.footer-legal a+a::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);width:1px;height:12px;background:rgba(244,236,225,.24)}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:36px;padding:56px 20px 44px}.footer-brand{grid-column:1/-1}}
@media(max-width:560px){.footer-grid{grid-template-columns:1fr}.footer-bottom-inner{flex-direction:column;align-items:flex-start}}

/* 全站悬浮联系按钮 */
.floating-contact{position:fixed;right:18px;bottom:22px;z-index:90;display:flex;flex-direction:column;gap:10px}
.fc-item{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--c-dark);color:#fff;box-shadow:var(--shadow-hover);transition:background .2s var(--ease),transform .2s var(--ease)}
.fc-item:hover{transform:translateY(-2px);color:#fff}
.fc-item svg{width:22px;height:22px}
.fc-wa{background:#B08d4c;}
.fc-tel{background:#B08d4c;}
.fc-mail{background:var(--c-accent)}
.fc-top{background:#B08d4c;color:var(--c-dark)}
.fc-top:hover{color:var(--c-dark)}
@media(max-width:600px){.floating-contact{right:12px;bottom:14px;gap:8px}.fc-item{width:44px;height:44px}}

/* =========================================================================
   INQUIRY「Let's Build」板块改版 — 客户要求：去掉表单，居中排版的 CTA 引导区。
   背景改为香槟金 --c-champagne(#C4AD8B)，整块满 1600 版心宽度（复用 .container 的 --max）。
   仅用 --c-* 配色；复用块内既有可编辑文案（.section-label / .section-title / .section-sub）；
   白色/深色圆角按钮由 common.js 的 initInquiryCta 注入，href 取自块内既有可编辑联系方式，无假数据。
   块文件 blocks/inquiry/render.php 不在本次可改文件内，故用作用域选择器覆盖（权重高于块内规则）。
   ========================================================================= */
.inquiry-block.section.dark{background:#c4ad8b;color:var(--c-ink)}   /* 香槟金背景带 */
.inquiry-block .inquiry-form-wrap{display:none}                          /* 去掉询盘表单 */
.inquiry-block .inquiry-contacts{display:none}                           /* 居中排版保持干净；联系方式仅供 CTA 取 href */
.inquiry-block .inquiry-grid{                                            /* 满 1600 版心（.container 已给 max-width:var(--max)），居中排版 */
  display:block;text-align:center;
/*   padding:30px; */
}
.inquiry-block .inquiry-intro{max-width:760px;margin:0 auto}
.inquiry-block .inquiry-intro .section-label{color:var(--c-eyebrow)}       /* 顶部小标题 LET'S TALK：客户指定暖白 #f7efe3（=--c-eyebrow） */
.inquiry-block .inquiry-intro .section-title{color:#ffffff}            /* 核心大标题：客户指定纯白 #ffffff */
.inquiry-block .inquiry-intro .section-sub{
	color:#f7efe3;
	max-width:600px;margin:0 auto 32px}  /* 副标题：客户指定 #f7efe3 */
/* 底部居中：深色实心圆角按钮 + 白色文字 + 右箭头（香槟底上对比更强） */
.inquiry-block .inquiry-cta{
	background:#cf4520;
/* 	border-color:var(--c-ink); */
	color:#fff;margin-top:4px;padding:15px 34px}
.inquiry-block .inquiry-cta:hover{background:var(--c-dark);border-color:var(--c-dark);color:#fff;transform:translateY(-1px)}
.inquiry-block .inquiry-cta .cta-arrow{display:inline-block;transition:transform .18s var(--ease)}
.inquiry-block .inquiry-cta:hover .cta-arrow{transform:translateX(3px)}
@media(max-width:900px){.inquiry-block .inquiry-grid{padding-block:40px}}


.topbar-contact svg{
	position: relative;
    top: 3px;
}
.topbar-contact svg path{
	fill:rgba(255,255,255,.82);
}
.footer-icon{
	display:flex;
	
}
.footer-icon svg{
	position: relative;
    top: 3px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.footer-icon svg path{
	fill:rgba(244,236,225,.78);
}