/* ==========================================================================
   XINHUA · Global Stylesheet  (全站公共样式)
   --------------------------------------------------------------------------
   目录 / CONTENTS
   01  设计变量 Design Tokens        —— 改配色、字号、间距优先改这里
   02  重置与基础 Reset & Base
   03  布局工具 Layout Utilities     —— container / section / grid / 间距工具类
   04  通用组件 Components          —— btn / section-head / form / breadcrumb / page-banner / inquiry / accordion / article-card / pagination / product-tile
   05  站点框架 Site Frame          —— topbar / header / nav / footer / back-to-top
   06  动效 Motion
   07  响应式 Responsive
   --------------------------------------------------------------------------
   间距规则：区块默认走 .section + --section-y；例外用 pt-/pb-/ptb-* 工具类。
   命名约定：BEM 变体（block__element、block--modifier、is-状态）
   页面级样式请放独立文件（如 home.css），只引用这里的变量与组件类。
   新增页面时按同样约定扩展，避免覆盖他人样式。
   ========================================================================== */

/* ==========================================================================
   01  设计变量 Design Tokens
   ========================================================================== */
:root {
  /* --- 品牌色 Brand --- */
  --c-green-900: #0b3a26;
  --c-green-800: #10492f;
  --c-green-700: #12603c;
  /* 主色 */
  --c-green-600: #1b7a4b;
  --c-green-100: #e8f2e9;
  --c-green-50: #f3f8f2;
  --c-lime: #a8d64a;
  /* 强调色 / 行动色 */
  --c-lime-dark: #8cbe33;

  /* --- 中性色 Neutral --- */
  --c-ink: #17261d;
  --c-body: #5c6b62;
  --c-muted: #8a9a90;
  --c-line: #e2ebe2;
  --c-surface: #f6f9f5;
  --c-white: #ffffff;

  /* --- 语义色 Semantic --- */
  --c-error: #c8443c;
  --c-success: #1b7a4b;

  /* --- 字体 Typography --- */
  --font-display: "Manrope", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* --- 间距节奏 Spacing scale (8px 基准) --- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-15: 120px;

  /* --- 区块纵向节奏（全站统一，移动端只在媒体查询里统一缩放） --- */
  --section-y: var(--sp-12);
  --section-y-sm: var(--sp-8);
  --section-y-lg: var(--sp-15);

  /* --- 间距工具数值：桌面端目标值，clamp 保证移动端自动缩小 --- */
  --pad-60: clamp(36px, 4.6vw, 60px);
  --pad-90: clamp(44px, 7.0vw, 90px);
  --pad-120: clamp(56px, 9.2vw, 120px);

  /* --- 圆角 Radius --- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* --- 阴影 Shadow --- */
  --shadow-sm: 0 4px 16px rgba(11, 58, 38, .06);
  --shadow-md: 0 12px 32px rgba(11, 58, 38, .10);
  --shadow-lg: 0 24px 60px rgba(11, 58, 38, .14);

  /* --- 布局 Layout --- */
  /* --container: 1280px; */
  --container: 1320px;
  --gutter: 12px;
  --grid-gap: 24px;
  --header-h: 84px;

  /* --- 动效 Motion --- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: .2s;
  --dur: .32s;
  --dur-slow: .6s;

  /* --- 层级 Z-index --- */
  --z-float: 20;
  --z-header: 100;
  --z-nav: 110;
}

/* ==========================================================================
   02  重置与基础 Reset & Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--c-ink);
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--c-green-600);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
}

a,
button,
summary {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 2px solid var(--c-lime-dark);
  outline-offset: 3px;
}

::selection {
  background: var(--c-lime);
  color: var(--c-green-900);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   03  布局工具 Layout Utilities
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 区块：纵向内边距全站只由 .section + --section-y 决定。
   规则：页面级 CSS 一律不再另写 padding-block / --section-y 覆盖，
   个别板块需要例外时，直接在 HTML 的 section 上加下面的间距工具类。
   好处：间距只有一处来源，响应式只改 :root，子页面复制结构即可复用。 */
.section {
  padding-block: var(--section-y);
}

.section--sm {
  padding-block: var(--section-y-sm);
}

.section--lg {
  padding-block: var(--section-y-lg);
}

.section--tint {
  background: var(--c-green-50);
}

.section--dark {
  background: var(--c-green-900);
  color: var(--c-white);
}

/* 间距工具类：pt-/pb-/ptb- + 桌面端目标像素值
   值来自 --pad-* token，移动端由 clamp 自动缩小，无需另写媒体查询 */
.pt-60,
.ptb-60 {
  padding-top: var(--pad-60);
}

.pb-60,
.ptb-60 {
  padding-bottom: var(--pad-60);
}

.pt-90,
.ptb-90 {
  padding-top: var(--pad-90);
}

.pb-90,
.ptb-90 {
  padding-bottom: var(--pad-90);
}

.pt-120,
.ptb-120 {
  padding-top: var(--pad-120);
}

.pb-120,
.ptb-120 {
  padding-bottom: var(--pad-120);
}

.pt-0,
.spt-0 {
  padding-top: 0;
}

.pb-0,
.spb-0 {
  padding-bottom: 0;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

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

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

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 媒体比例工具：统一裁切，后续换图不用改 CSS */
.ratio {
  position: relative;
  overflow: hidden;
}

.ratio>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ratio--3-4 {
  aspect-ratio: 3 / 4;
}

.ratio--4-3 {
  aspect-ratio: 4 / 3;
}

.ratio--16-9 {
  aspect-ratio: 16 / 9;
}

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

/* 文本工具 */
.text-center {
  text-align: center;
}

.text-light {
  color: var(--c-white);
}

.mt-24 {
  margin-top: var(--sp-3);
}

.mt-40 {
  margin-top: var(--sp-5);
}

.mb-24 {
  margin-bottom: var(--sp-3);
}

/* ==========================================================================
   04  通用组件 Components
   ========================================================================== */

/* --- 4.1 小标题 Eyebrow --- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: var(--fw-extrabold);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-green-600);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-lime);
}

.eyebrow--light {
  color: var(--c-lime);
}

.eyebrow--center::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--c-lime);
}

/* --- 4.2 区块标题 Section head --- */
.section-head {
  max-width: 760px;
  margin-bottom: var(--sp-6);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-8);
  max-width: none;
}

.section-head--split>div {
  max-width: 720px;
}

.section-title {
  margin-top: 16px;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.18;
}

.section--dark .section-title,
.inquiry__panel .section-title {
  color: var(--c-white);
}

.section-subtitle {
  margin-top: 14px;
  font-size: 17px;
  color: var(--c-body);
}

.section-head__desc {
  max-width: 380px;
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-body);
}

/* --- 4.3 按钮 Button --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn i {
  font-size: 14.5px;
  transition: transform var(--dur) var(--ease);
}

.btn:hover i {
  transform: translateX(4px);
}

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

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--c-green-700);
  color: var(--c-white);
}

.btn--primary:hover {
  background: var(--c-green-800);
  color: var(--c-white);
  box-shadow: var(--shadow-md);
}

.btn--lime {
  background: var(--c-lime);
  color: var(--c-green-900);
}

.btn--lime:hover {
  background: var(--c-lime-dark);
  color: var(--c-green-900);
  box-shadow: 0 12px 28px rgba(168, 214, 74, .28);
}

.btn--outline {
  border-color: var(--c-green-700);
  color: var(--c-green-700);
  background: transparent;
}

.btn--outline:hover {
  background: var(--c-green-700);
  color: var(--c-white);
}

.btn--ghost-light {
  border-color: rgba(255, 255, 255, .55);
  color: var(--c-white);
  background: transparent;
}

.btn--ghost-light:hover {
  background: var(--c-white);
  color: var(--c-green-900);
  border-color: var(--c-white);
}

/* WhatsApp：外贸站即时沟通入口，全站复用 */
.btn--whatsapp {
  background: #25d366;
  color: #07321c;
}

.btn--whatsapp:hover {
  background: #1ebc59;
  color: #07321c;
  box-shadow: 0 12px 28px rgba(37, 211, 102, .26);
}

.btn--sm {
  padding: 11px 20px;
  font-size: 14.5px;
}

.btn--lg {
  padding: 17px 32px;
  font-size: 16px;
}

.btn--block {
  width: 100%;
}

/* --- 4.4 复选清单 Check list --- */
.check-list {
  display: grid;
  gap: 14px;
  margin: var(--sp-4) 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.6;
}

.check-list i {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c-green-100);
  color: var(--c-green-700);
  font-size: 11px;
  display: grid;
  place-items: center;
}

.check-list--light li {
  color: rgba(255, 255, 255, .86);
}

.check-list--light i {
  background: rgba(168, 214, 74, .16);
  color: var(--c-lime);
}

/* --- 4.5 卡片基础 Card --- */
.card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- 4.6 标签 Chip / Badge --- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .06);
  font-size: 14.5px;
  line-height: 1.4;
}

/* --- 4.7 表单 Form（全站共用，后续子页直接复用） --- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-label {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.form-label .req {
  color: var(--c-error);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-white);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.form-control::placeholder {
  color: #a4b0a8;
}

.form-control:hover {
  border-color: #c6d6c7;
}

.form-control:focus {
  outline: none;
  border-color: var(--c-green-600);
  box-shadow: 0 0 0 3px rgba(27, 122, 75, .10);
}

textarea.form-control {
  min-height: 140px;
  resize: vertical;
}

select.form-control {
  appearance: none;
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 24px, calc(100% - 15px) 24px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-field.has-error .form-control {
  border-color: var(--c-error);
  background: #fff8f7;
}

.form-error {
  font-size: 13.5px;
  color: var(--c-error);
}

.form-note {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.6;
}

.form-status {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

.form-status:empty {
  display: none;
}

.form-status.is-error {
  color: var(--c-error);
}

.form-status.is-success {
  color: var(--c-success);
}

.form-status a {
  color: var(--c-green-700);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

/* --- 4.8 面包屑 Breadcrumb（全站通用，所有内页复用同一套结构） ---
   结构契约：
     <nav class="breadcrumb breadcrumb--light" aria-label="Breadcrumb">
       <ol class="breadcrumb__list">
         <li class="breadcrumb__item"><a href="index.html">Home</a></li>
         <li class="breadcrumb__item is-current" aria-current="page">Contact Us</li>
       </ol>
     </nav>
   · 分隔符由 CSS 伪元素生成，WP 循环只需输出 li，不必另写分隔符标签。
   · 在 .page-banner 内放在 h1 之后（标题在上、面包屑在下）。
   · 浅底页面用默认色；深色 banner 上叠加 .breadcrumb--light。
   · 配套 JSON-LD BreadcrumbList 见 contact.html <head>，每页只改最后一项。 */
.breadcrumb {
  font-size: 14.5px;
  color: var(--c-muted);
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.5;
}

.breadcrumb__item+.breadcrumb__item::before {
  content: "/";
  font-size: 13px;
  color: currentColor;
  opacity: .45;
}

.breadcrumb__item a {
  transition: color var(--dur-fast) var(--ease);
}

.breadcrumb__item a:hover {
  color: var(--c-green-600);
}

.breadcrumb__item.is-current {
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

/* 深色背景上的浅色变体 */
.breadcrumb--light {
  color: rgba(255, 255, 255, .68);
}

.breadcrumb--light .breadcrumb__item a:hover {
  color: var(--c-lime);
}

.breadcrumb--light .breadcrumb__item.is-current {
  color: var(--c-white);
}

/* --- 4.9 询盘表单 Inquiry（联系页静态表单；WP 对接时 form 由表单插件短代码替换） --- */
.inquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.inquiry__panel {
  position: relative;
  overflow: hidden;
  padding: 46px 44px;
  background: var(--c-green-800);
  color: var(--c-white);
}

.inquiry__panel::after {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -140px;
  width: 320px;
  height: 320px;
  border: 1px solid rgba(168, 214, 74, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(168, 214, 74, .045), 0 0 0 88px rgba(168, 214, 74, .035);
  pointer-events: none;
}

.inquiry__title {
  position: relative;
  margin: 16px 0 14px;
  font-size: clamp(30px, 3vw, 40px);
  color: var(--c-white);
}

.inquiry__text {
  position: relative;
  max-width: 360px;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .72);
}

.inquiry__contact {
  position: relative;
  display: grid;
  gap: 20px;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.inquiry__contact li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 15.5px;
  line-height: 1.65;
}

.inquiry__contact i {
  flex: 0 0 16px;
  margin-top: 4px;
  color: var(--c-lime);
  font-size: 14.5px;
}

.inquiry__contact strong {
  display: block;
  margin-bottom: 2px;
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.inquiry__contact a {
  color: var(--c-white);
}

.inquiry__contact a:hover {
  color: var(--c-lime);
}

.inquiry__note {
  position: relative;
  margin-top: var(--sp-5);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .5);
}

.inquiry__form-wrap {
  padding: 46px 44px;
  background: var(--c-white);
}

.inquiry-form__head {
  margin-bottom: var(--sp-3);
}

.inquiry-form__head h3 {
  font-size: 22px;
}

.inquiry-form__head p {
  margin: 6px 0 0;
  font-size: 14.5px;
  color: var(--c-muted);
}

.inquiry-form .form-grid {
  margin-bottom: 18px;
}

.inquiry-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}

.inquiry-form__foot .form-note {
  max-width: 380px;
}

/* --- 4.10 手风琴 Accordion（全站通用：首页 FAQ / faq.html / WP 循环共用）
     结构契约见 js/theme.js 第 6 段。样式只依赖 details[open] 与 .is-closing，
     无 JS 时浏览器原生开合同样成立；panel 负责高度过渡，内边距放在 body。 --- */
.accordion {
  display: grid;
  gap: 12px;
}

.accordion__item {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.accordion__item[open]:not(.is-closing) {
  border-color: rgba(27, 122, 75, .35);
  box-shadow: var(--shadow-sm);
}

.accordion__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-bold);
  line-height: 1.45;
  color: var(--c-ink);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.accordion__head::-webkit-details-marker {
  display: none;
}

.accordion__head::marker {
  content: "";
}

.accordion__title {
  flex: 1;
}

.accordion__icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-green-100);
  color: var(--c-green-700);
  font-size: 12px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.accordion__icon i {
  transition: transform var(--dur) var(--ease);
}

.accordion__item[open]:not(.is-closing) .accordion__icon {
  background: var(--c-lime);
  color: var(--c-green-900);
}

.accordion__item[open]:not(.is-closing) .accordion__icon i {
  transform: rotate(45deg);
}

/* panel 只做高度过渡；内边距放 body，避免测量高度时被计入 */
.accordion__panel {
  overflow: hidden;
}

.accordion__body {
  max-width: 680px;
  padding: 0 24px 22px;
}

.accordion__body p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--c-body);
}

/* 仅 JS 接管动画时启用过渡，时长与 theme.js 读取的 --dur 一致 */
.js-accordion .accordion__panel {
  transition: height var(--dur) var(--ease);
}

/* 组件自带小屏适配，子页面无需另写 */
@media (max-width: 767.98px) {
  .accordion__head {
    padding: 17px 18px;
    font-size: 16px;
  }

  .accordion__body {
    padding: 0 18px 18px;
  }
}

/* ==========================================================================
   4.11 内页横幅 Page banner（全站通用，所有子页面复用同一段结构）
   --------------------------------------------------------------------------
   · 无背景图：不输出 .page-banner__bg 这一层，自动显示 --c-green-900 默认
     底色 + 装饰光晕，不空白、不破图，无需额外判断类。
   · 有背景图：在 .page-banner__bg 上写行内 background-image:url('…')。
     注意：图片 URL 必须写在 HTML 行内样式里，不要塞进 CSS 自定义属性 ——
     自定义属性里的相对 url() 会按 css/ 目录解析（相对样式表而非页面），
     本地静态预览会 404；WP 返回绝对路径虽能绕过，但静态稿必须先正确。
   · WP：用 has_post_thumbnail() 决定要不要输出 .page-banner__bg。
   · 内容固定：h1 标题 + 面包屑（标题在上），不设描述段落。
   · 遮罩由 ::after 单独一层负责，换图不影响白色标题的对比度。
   · HTML 用法（含面包屑）见 contact.html「01 内页横幅」注释。
   ========================================================================== */
.page-banner {
  position: relative;
  overflow: hidden;
  padding-block: var(--pad-90);
  color: var(--c-white);
  background-color: var(--c-green-900);
  background-image:
    linear-gradient(120deg, rgba(6, 32, 20, .28), rgba(6, 32, 20, 0) 62%),
    radial-gradient(circle at 86% 18%, rgba(168, 214, 74, .20), transparent 46%);
}

.page-banner__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.page-banner__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6, 32, 20, .90) 0%, rgba(6, 32, 20, .74) 46%, rgba(6, 32, 20, .42) 100%);
}

.page-banner__inner {
  position: relative;
  z-index: 1;
}

.page-banner__title {
  margin: 0 0 18px;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.14;
  color: var(--c-white);
}

/* 组件自带小屏适配，子页面无需另写 */
@media (max-width: 767.98px) {
  .page-banner__title {
    font-size: clamp(30px, 7.5vw, 38px);
  }
}

/* ==========================================================================
   4.12 文章 / 方案卡片 Article & Application Card（列表页通用）
   --------------------------------------------------------------------------
   · 首页、Applications 列表页以及后续任何文章 / 产品列表共用同一份规则。
   · 外层可以是 <article>（首页）或 <a>（列表页，整卡可点），样式一致。
   · 图片上的序号 .application-card__num 是可选装饰，不输出该标签即可。
   · WP：循环输出 <a class="application-card">，配图 the_post_thumbnail()、
     标题 the_title()、摘要 the_excerpt()，样式无需改动。
   ========================================================================== */
.applications__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.application-card {
  display: block;
  color: inherit;
  text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.application-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.application-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.application-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.application-card:hover .application-card__media img {
  transform: scale(1.06);
}

.application-card__num {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(11, 58, 38, .86);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
}

.application-card__body {
  padding: 20px 22px 24px;
}

.application-card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-bold);
}

.application-card__title i {
  color: var(--c-green-600);
  font-size: 14.5px;
}

.application-card__desc {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-body);
}

/* 组件自带小屏适配，页面级 CSS 无需另写 */
@media (max-width: 991.98px) {
  .applications__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .applications__grid {
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .applications__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   4.13 通用分页 Pagination（所有列表页复用，全站只此一份）
   --------------------------------------------------------------------------
   · 静态写法：<nav class="pagination"><ul class="pagination__list">…</ul></nav>
     当前页用 <span class="pagination__link is-current" aria-current="page">，
     上一页 / 下一页用 .pagination__link--prev / --next 放箭头图标。
   · WP 写法：<nav class="pagination"><?php echo paginate_links( ... ); ?></nav>
     选择器组已兼容 .page-numbers / .current / .dots / .prev / .next，
     后台输出不必再套类名（自定义 WP_Query 记得显式传 'total'）。
   · 任何列表页只需复制下面这段 HTML 结构，不需要写额外 CSS。
   ========================================================================== */
.pagination,
.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__link,
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-white);
  color: var(--c-ink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.pagination__link:hover,
.pagination .page-numbers:hover {
  border-color: var(--c-green-600);
  color: var(--c-green-700);
}

.pagination__link.is-current,
.pagination .page-numbers.current {
  border-color: var(--c-green-700);
  background: var(--c-green-700);
  color: var(--c-white);
  pointer-events: none;
}

.pagination__link.is-disabled {
  opacity: .42;
  pointer-events: none;
}

.pagination__dots,
.pagination .page-numbers.dots {
  min-width: auto;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--c-muted);
  cursor: default;
}

.pagination__dots:hover,
.pagination .page-numbers.dots:hover {
  border-color: transparent;
  color: var(--c-muted);
}

@media (max-width: 767.98px) {

  .pagination,
  .pagination__list {
    gap: 6px;
  }

  .pagination__link,
  .pagination .page-numbers {
    min-width: 36px;
    height: 36px;
    padding: 0 9px;
    font-size: 14px;
  }
}

/* ==========================================================================
   4.14 产品卡片 Product Tile（产品列表页通用）
   --------------------------------------------------------------------------
   · 只有「图片 + 标题」，整卡是 <a>，点击跳产品内页；不要加描述 / 角标 / 按钮。
   · 与 4.12 的 .application-card 分开命名，避免和首页 .product-card（特色卡）
     同名不同结构；首页样式在 home.css，互不干扰。
   · WP：循环输出 <a class="product-tile">，配图 the_post_thumbnail()、
     标题 the_title()，样式无需改动。
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.product-tile {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.product-tile:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.product-tile__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-green-50);
}

.product-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.product-tile:hover .product-tile__media img {
  transform: scale(1.06);
}

.product-tile__title {
  display: flex;
  flex: 1;
  align-items: center;
  min-height: 62px;
  padding: 16px 18px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  color: var(--c-ink);
}

/* 组件自带小屏适配，页面级 CSS 无需另写 */
@media (max-width: 991.98px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .product-grid {
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* 四列变体：产品内页相关推荐（4 个一排），断点跟随 4.14 主网格 */
.product-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
  .product-grid--four {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .product-grid--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .product-grid--four {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   4.15 商品卡片 Goods Card（首页热销与兜底列表页共用）
   --------------------------------------------------------------------------
   · 样式与 home.css 同名类原样一致：home.css 供首页用，本节供不加载
     home.css 的页面（search.php / archive.php / index.php 兜底页）用。
   · 图区纯白 + contain：白底产品图不会出现白块边界，任意比例不裁切主体。
   ========================================================================== */

.goods-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
}

/* 四列变体：archive.php / index.php / search.php 兜底列表（首页仍走 3 列）。
   ≤991.98 两列、≤560 一列由下方 .goods-grid 媒体查询按源码顺序自然接管 */
.goods-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1199.98px) {
  .goods-grid--four {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 搜索结果数提示（search.php） */
.search-result-meta {
  margin: 0 0 var(--sp-4);
  font-size: 15px;
  color: var(--c-body);
}

/* 搜索无结果空状态（search.php）：图标 + 关键词 + 再次搜索框 + 引导按钮 */
.search-empty {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.search-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--c-green-100);
  color: var(--c-green-600);
  font-size: 26px;
}

.search-empty__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.search-empty__kw {
  color: var(--c-green-600);
  word-break: break-word;
}

.search-empty__desc {
  margin: 0 0 var(--sp-4);
  color: var(--c-body);
}

.search-empty__form {
  display: flex;
  max-width: 480px;
  margin: 0 auto var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.search-empty__form:focus-within {
  border-color: var(--c-green-600);
  box-shadow: 0 0 0 3px var(--c-green-100);
}

.search-empty__input {
  flex: 1;
  min-width: 0;
  padding: 14px 20px;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--c-ink);
  outline: none;
}

.search-empty__input::placeholder {
  color: var(--c-muted);
}

.search-empty__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  border: 0;
  background: var(--c-green-700);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.search-empty__btn:hover {
  background: var(--c-green-800);
}

.search-empty__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 560px) {
  .search-empty {
    padding: var(--sp-5) var(--sp-3);
  }

  .search-empty__title {
    font-size: 20px;
  }
}

.goods-card {
  display: flex;
  flex-direction: column;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.goods-card:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.goods-card__media {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  overflow: hidden;
}

.goods-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--dur-slow) var(--ease);
}

.goods-card:hover .goods-card__media img {
  transform: scale(1.05);
}

.goods-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.goods-card__title {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: -.01em;
}

.goods-card__title a {
  color: var(--c-ink);
}

.goods-card__title a:hover {
  color: var(--c-green-700);
}

.goods-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: var(--fw-bold);
  color: var(--c-green-700);
}

.goods-card__link i {
  font-size: 12.5px;
  transition: transform var(--dur) var(--ease);
}

.goods-card:hover .goods-card__link i {
  transform: translateX(5px);
}

/* 组件自带小屏适配，页面级 CSS 无需另写 */
@media (max-width: 991.98px) {
  .goods-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .goods-grid {
    gap: 16px;
  }

  .goods-card__body {
    padding: 18px 20px 20px;
  }
}

@media (max-width: 560px) {
  .goods-grid {
    grid-template-columns: 1fr;
  }
}

/* --- 4.16 独立页面内容 Page Single（page.php，后台编辑器内容展示） --- */
.page-single__body {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}

/* 编辑器内容基础排版（全局 reset 清了列表样式，这里还原） */
.page-content > :first-child {
  margin-top: 0;
}

.page-content > :last-child {
  margin-bottom: 0;
}

.page-content h2 {
  margin: var(--sp-4) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: var(--fw-bold);
  line-height: 1.3;
  color: var(--c-ink);
}

.page-content h3 {
  margin: var(--sp-3) 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}

.page-content ul {
  margin: 0 0 1em;
  padding-left: 22px;
  list-style: disc;
}

.page-content ol {
  margin: 0 0 1em;
  padding-left: 22px;
  list-style: decimal;
}

.page-content li {
  margin-bottom: 6px;
  line-height: 1.75;
}

.page-content img {
  border-radius: var(--r-sm);
}

.page-content a {
  color: var(--c-green-600);
}

.page-content a:hover {
  text-decoration: underline;
}

.page-content blockquote {
  margin: 0 0 1em;
  padding: 12px 20px;
  border-left: 3px solid var(--c-green-600);
  background: var(--c-green-50);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-body);
}

@media (max-width: 767.98px) {
  .page-single__body {
    padding: var(--sp-4);
  }
}

/* ==========================================================================
   05  站点框架 Site Frame
   ========================================================================== */

/* --- 5.1 顶部信息条 Topbar --- */
.topbar {
  background: var(--c-green-900);
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 38px;
}

.topbar__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.topbar__info li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.topbar__info i {
  color: var(--c-lime);
  font-size: 12.5px;
}

.topbar a {
  color: inherit;
}

.topbar a:hover {
  color: var(--c-lime);
}

.topbar__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-lime);
  font-weight: var(--fw-semibold);
}

/* --- 5.2 站点头部 Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-white);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow var(--dur) var(--ease);
}

.site-header.is-stuck {
  box-shadow: 0 8px 28px rgba(11, 58, 38, .09);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand__mark {
  width: 120px;
  /* height: 44px; */
  /* border-radius: 12px; */
  overflow: hidden;
}

.brand__mark img {
  width: 100%;
  height: 100%;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.brand__name {
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: var(--fw-extrabold);
  letter-spacing: .06em;
  color: var(--c-green-900);
}

.brand__tagline {
  margin-top: 4px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.brand:hover {
  color: inherit;
}

/* --- 5.3 导航 Nav --- */
.nav {
  display: flex;
  align-items: center;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav__item {
  position: relative;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 15px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: #33443a;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 6px;
  height: 2px;
  background: var(--c-lime-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__link:hover,
.nav__item.is-current>.nav__link {
  color: var(--c-green-700);
}

.nav__link:hover::after,
.nav__item.is-current>.nav__link::after {
  transform: scaleX(1);
}

/* 子菜单开关：独立按钮。点文字正常跳转，只有点右侧小箭头才展开 */
.nav__item.has-dropdown {
  display: flex;
  align-items: center;
}

.nav__subtoggle {
  flex: 0 0 auto;
  width: 30px;
  height: 40px;
  margin-left: -8px;
  display: grid;
  place-items: center;
  color: #33443a;
  -webkit-tap-highlight-color: transparent;
}

.nav__subtoggle i {
  font-size: 10px;
  transition: transform var(--dur) var(--ease);
}

/* 开合状态由 JS 的 is-open 驱动，关闭时一定回到 0deg */
.has-dropdown.is-open>.nav__subtoggle i {
  transform: rotate(180deg);
}

@media (min-width: 992px) and (hover: hover) {
  .has-dropdown:hover>.nav__subtoggle i {
    transform: rotate(180deg);
  }
}

.nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 232px;
  padding: 8px;
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.has-dropdown:hover>.nav__dropdown,
.has-dropdown:focus-within>.nav__dropdown,
.has-dropdown.is-open>.nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--r-xs);
  font-size: 15px;
  color: #33443a;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.nav__dropdown a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-lime-dark);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}

.nav__dropdown a:hover {
  color: var(--c-green-700);
}

@media (hover: hover) {
  .nav__dropdown a:hover {
    background: var(--c-green-50);
  }
}

.nav__dropdown a:hover::before {
  opacity: 1;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--c-green-900);
  font-size: 21px;
}

@media (hover: hover) {
  .nav-toggle:hover {
    background: var(--c-green-50);
  }
}

/* 移动端菜单内的询盘按钮（桌面端隐藏） */
.nav__cta {
  display: none;
}

/* --- 5.4 页脚 Footer --- */
.site-footer {
  background: var(--c-green-900);
  color: rgba(255, 255, 255, .7);
  font-size: 15.5px;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: var(--sp-8);
  padding-block: var(--sp-10) var(--sp-8);
}

.site-footer .brand__name {
  color: var(--c-white);
}

.site-footer .brand__tagline {
  color: rgba(255, 255, 255, .55);
}

.site-footer__intro {
  /* margin: 22px 0 0; */
  max-width: 320px;
  line-height: 1.75;
}

.site-footer__company {
  margin-top: 16px;
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
}

.site-footer__title {
  margin-bottom: 20px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--c-white);
}

.site-footer__list {
  display: grid;
  gap: 12px;
}

.site-footer__list a,
.site-footer__list span {
  color: rgba(255, 255, 255, .7);
  transition: color var(--dur-fast) var(--ease);
}

.site-footer__list a:hover {
  color: var(--c-lime);
}

.site-footer__contact {
  display: grid;
  gap: 16px;
}

.site-footer__contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.6;
}

.site-footer__contact i {
  flex: 0 0 16px;
  margin-top: 4px;
  color: var(--c-lime);
  font-size: 13.5px;
}

.site-footer__contact a:hover {
  color: var(--c-lime);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: rgba(255, 255, 255, .5);
}

/* --- 5.5 返回顶部 Back to top --- */
.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: var(--z-float);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-green-700);
  color: var(--c-white);
  font-size: 16px;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur), background var(--dur) var(--ease);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--c-green-900);
  color: var(--c-white);
}

/* ==========================================================================
   06  动效 Motion（无 JS 时内容默认全部可见）
   ========================================================================== */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.js-reveal .reveal[data-delay="1"] {
  transition-delay: .08s;
}

.js-reveal .reveal[data-delay="2"] {
  transition-delay: .16s;
}

.js-reveal .reveal[data-delay="3"] {
  transition-delay: .24s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }

  .js-reveal .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   07  响应式 Responsive（全局框架）
   ========================================================================== */
@media (max-width: 1200px) {
  :root {
    --gutter: 20px;
    --section-y: 80px;
    --section-y-lg: 100px;
  }

  .nav__link {
    padding-inline: 11px;
  }

  .nav__link::after {
    left: 11px;
    right: 11px;
  }

  .site-header__inner {
    gap: var(--sp-2);
  }

  .inquiry__panel,
  .inquiry__form-wrap {
    padding: 38px 34px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --header-h: 72px;
    --section-y: 68px;
    --section-y-sm: 48px;
    --section-y-lg: 88px;
  }

  /* 移动端不显示顶部信息条（与汉堡菜单同断点） */
  .topbar {
    display: none;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .header-quote {
    display: none;
  }

  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    display: block;
    /* 关键：flex 会把 .nav__list 压成内容宽度 */
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: 8px var(--gutter) 24px;
    background: var(--c-white);
    border-bottom: 1px solid var(--c-line);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
  }

  .nav.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .nav__list {
    display: block;
    width: 100%;
  }

  .nav__item {
    width: 100%;
    border-bottom: 1px solid var(--c-line);
  }

  .nav__item.has-dropdown {
    flex-wrap: wrap;
  }

  .nav__item.is-current>.nav__link {
    color: var(--c-green-700);
  }

  /* 文字区自适应剩余宽度，右侧 56px 留给箭头按钮做点按热区 */
  .nav__link {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    justify-content: flex-start;
    padding: 16px 10px;
    font-size: 16px;
    line-height: 1.5;
    border-radius: var(--r-xs);
    transition: color var(--dur) var(--ease);
  }

  .nav__link::after {
    display: none;
  }

  .nav__subtoggle {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    margin-left: 0;
    color: var(--c-green-700);
  }

  .nav__subtoggle i {
    font-size: 13.5px;
  }

  .nav__dropdown {
    position: static;
    display: none;
    flex: 0 0 100%;
    min-width: 0;
    padding: 0 0 12px 12px;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .nav__dropdown::before {
    display: none;
  }

  .has-dropdown.is-open>.nav__dropdown {
    display: block;
  }

  .nav__dropdown a {
    padding: 10px 8px;
    font-size: 15.5px;
  }

  .nav__cta {
    display: block;
    margin-top: 22px;
  }

  .nav__cta .btn {
    width: 100%;
  }

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

  .inquiry__panel {
    padding: 38px 34px 40px;
  }

  .section-head--split {
    display: block;
  }

  .section-head__desc {
    max-width: 620px;
    margin-top: 16px;
  }

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

  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-6);
  }

  .topbar__note {
    display: none;
  }
}

@media (max-width: 767.98px) {
  :root {
    --gutter: 16px;
    --section-y: 56px;
    --section-y-sm: 40px;
    --section-y-lg: 72px;
    --grid-gap: 16px;
  }

  .topbar__inner {
    min-height: 34px;
  }

  .topbar__info {
    gap: 12px;
    font-size: 13px;
  }

  .topbar__info li:first-child {
    display: none;
  }

  .brand__mark {
    width: 38px;
    height: 38px;
  }

  .brand__name {
    font-size: 20px;
  }

  .brand__tagline {
    font-size: 10px;
  }

  .grid--2,
  .grid--3 {
    grid-template-columns: 1fr;
  }

  .section-title {
    font-size: clamp(28px, 6.4vw, 36px);
  }

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

  .site-footer__grid {
    padding-block: var(--sp-8) var(--sp-6);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .back-to-top {
    right: 16px;
    bottom: 18px;
    width: 42px;
    height: 42px;
  }

  .inquiry__panel,
  .inquiry__form-wrap {
    padding: 30px 24px;
  }

  .inquiry-form__foot {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 480px) {
  .topbar__info li:last-child {
    display: none;
  }

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

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
  }

  .btn {
    padding: 13px 22px;
    font-size: 15px;
  }

  .inquiry__panel,
  .inquiry__form-wrap {
    padding: 28px 20px;
  }
}

/* 触屏设备：禁用所有导航 hover 背景，防止点按后残留一块高亮底色 */
@media (hover: none) {

  .nav__link:hover,
  .nav__subtoggle:hover,
  .nav-toggle:hover,
  .nav__dropdown a:hover {
    background: transparent;
  }
}