/* ============================================================
   金木集团官网 · 设计系统
   东方本草 × 现代极简 | 墨绿 × 香槟金 × 宣纸白
   ============================================================ */
:root {
  --ink: #0E241B;
  --pine: #143528;
  --pine-2: #1D4433;
  --pine-3: #0A1C14;
  --gold: #C7A15C;
  --gold-2: #E2C78F;
  --paper: #F6F3EC;
  --paper-2: #EFEAE0;
  --card: #FFFFFF;
  --text: #24352C;
  --muted: #6E7D73;
  --line: rgba(20, 53, 40, 0.14);
  --line-dark: rgba(246, 243, 236, 0.16);
  --shadow: 0 20px 50px -20px rgba(14, 36, 27, 0.25);
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold); color: var(--pine-3); }

.container { width: min(1200px, 92vw); margin: 0 auto; }

/* ---------- 字体系统 ---------- */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
}
.kicker::before { content: ""; width: 34px; height: 1px; background: var(--gold); }
.sec-head { margin-bottom: 56px; }
.sec-head h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.25; margin: 14px 0 10px; letter-spacing: 0.04em; }
.sec-head .sub { color: var(--muted); max-width: 640px; }
.sec-head.center { text-align: center; }
.sec-head.center .kicker::after { content: ""; width: 34px; height: 1px; background: var(--gold); }
.sec-head.center .sub { margin: 0 auto; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 34px; border: 1px solid transparent; border-radius: 2px;
  font-size: 15px; letter-spacing: 0.14em; transition: all 0.35s var(--ease);
  position: relative; overflow: hidden;
}
.btn-gold { background: var(--gold); color: var(--pine-3); font-weight: 600; }
.btn-gold:hover { background: var(--gold-2); transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(199, 161, 92, 0.55); }
.btn-ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,0.1); border-color: #fff; }
.btn-dark { background: var(--pine); color: #fff; }
.btn-dark:hover { background: var(--pine-2); transform: translateY(-2px); }
.btn-line { border-color: var(--pine); color: var(--pine); background: transparent; }
.btn-line:hover { background: var(--pine); color: #fff; }
.btn .arr { transition: transform 0.3s var(--ease); }
.btn:hover .arr { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  transition: all 0.4s var(--ease);
  padding: 22px 0;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 14px; color: #fff; }
.logo-img { height: 46px; width: auto; display: block; }
.site-header.solid .logo-img { height: 36px; }
.mobile-nav .logo-img { height: 52px; }
.main-nav { display: flex; gap: 34px; align-items: center; }
.nav-item { position: relative; display: flex; align-items: center; }
/* 下拉触发链接的 hover 桥接区（防止移出菜单时收起） */
.nav-item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; }
.nav-item > a, .main-nav > a:not(.nav-cta) {
  color: rgba(255,255,255,0.85); font-size: 15px; letter-spacing: 0.12em;
  position: relative; padding: 6px 0; transition: color 0.3s;
}
.nav-item > a::after, .main-nav > a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1.5px;
  background: var(--gold); transition: width 0.35s var(--ease);
}
.nav-item:hover > a, .nav-item > a.active, .main-nav > a:not(.nav-cta):hover, .main-nav > a:not(.nav-cta).active { color: #fff; }
.nav-item:hover > a::after, .nav-item > a.active::after, .main-nav > a:not(.nav-cta):hover::after, .main-nav > a:not(.nav-cta).active::after { width: 100%; }

/* 下拉菜单 */
.dropdown {
  position: absolute; top: calc(100% + 18px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  min-width: 180px; background: #fff; border-radius: 12px;
  box-shadow: 0 20px 44px -14px rgba(10,28,20,0.30), 0 3px 10px rgba(10,28,20,0.06);
  border: 1px solid rgba(20,53,40,0.10);
  padding: 9px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  z-index: 300;
}
.nav-item:hover .dropdown, .nav-item:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown-link {
  display: block; padding: 10px 16px; border-radius: 7px;
  color: var(--text); font-size: 14px; letter-spacing: 0.1em; white-space: nowrap;
  transition: all 0.25s var(--ease);
}
.dropdown-link::after { display: none; }
.dropdown-link + .dropdown-link { margin-top: 2px; }
.dropdown-link:hover { background: rgba(20,53,40,0.06); color: var(--pine); padding-left: 22px; }
.nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #D4AF6E 0%, #C7A15C 55%, #B8924E 100%);
  color: var(--pine-3) !important;
  padding: 10px 20px; border-radius: 3px;
  font-weight: 600; font-size: 14px; letter-spacing: 0.1em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 18px -6px rgba(199, 161, 92, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s var(--ease);
}
.nav-cta::after { display: none; }
.nav-cta svg { width: 15px; height: 15px; flex: none; }
.nav-cta:hover {
  background: linear-gradient(135deg, #E2C78F 0%, #D4AF6E 55%, #C7A15C 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -8px rgba(199, 161, 92, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
/* 深色页头态（浅色页面上） */
.site-header.solid { background: rgba(10, 28, 20, 0.92); backdrop-filter: blur(14px); padding: 12px 0; box-shadow: 0 10px 40px -18px rgba(0,0,0,0.5); }
.site-header.light-page { background: rgba(246,243,236,0.9); backdrop-filter: blur(14px); padding: 12px 0; border-bottom: 1px solid var(--line); }
.site-header.light-page .nav-item > a, .site-header.light-page .main-nav > a:not(.nav-cta) { color: var(--text); }
.site-header.light-page .nav-item:hover > a, .site-header.light-page .nav-item > a.active, .site-header.light-page .main-nav > a:not(.nav-cta):hover, .site-header.light-page .main-nav > a:not(.nav-cta).active { color: var(--pine); }

/* 移动端菜单 */
.menu-toggle { display: none; background: none; border: none; width: 40px; height: 40px; position: relative; z-index: 210; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px auto; transition: all 0.3s; }
.site-header.light-page .menu-toggle span { background: var(--pine); }
.mobile-nav {
  position: fixed; inset: 0; background: var(--pine-3); z-index: 205;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px;
  opacity: 0; pointer-events: none; transition: opacity 0.35s;
}
.mobile-nav.open { opacity: 1; pointer-events: auto; }
body.nav-open .site-header { z-index: 220; background: transparent; box-shadow: none; }
.mobile-nav a { color: #fff; font-family: var(--serif); font-size: 24px; letter-spacing: 0.2em; }
.mobile-nav .m-sub { display: flex; flex-direction: column; gap: 8px; margin: -14px 0 4px; padding: 10px 26px; border-left: 1px solid rgba(226,199,143,0.28); }
.mobile-nav .m-sub a { font-family: var(--sans); font-size: 15px; color: rgba(255,255,255,0.55); letter-spacing: 0.16em; }
.mobile-nav .m-sub a:hover { color: var(--gold-2); }
.mobile-nav .nav-cta { font-size: 15px; padding: 13px 30px; }
.light-page .nav-cta { border-color: rgba(20, 53, 40, 0.12); }
body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; min-height: 92vh; display: flex; align-items: center;
  overflow: hidden; color: #fff;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; animation: heroZoom 18s var(--ease) forwards; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,28,20,0.88) 0%, rgba(10,28,20,0.55) 45%, rgba(10,28,20,0.25) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero .kicker { color: var(--gold-2); }
.hero h1 {
  font-size: clamp(40px, 6.4vw, 76px); line-height: 1.18; letter-spacing: 0.06em;
  margin: 26px 0 22px; font-weight: 600;
}
.hero h1 em { font-style: normal; color: var(--gold-2); }
.hero p { color: rgba(255,255,255,0.75); font-size: 17px; max-width: 540px; margin-bottom: 40px; }
.hero-actions { display: flex; gap: 18px; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: rgba(255,255,255,0.6); font-size: 11px; letter-spacing: 0.3em; z-index: 2;
}
.hero-scroll::after { content: ""; width: 1px; height: 44px; background: linear-gradient(to bottom, var(--gold), transparent); animation: scrollPulse 2s infinite; }
@keyframes scrollPulse { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* 数据条 */
.stats-band { background: var(--pine-3); color: #fff; padding: 54px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px;
  grid-gap: 30px; }
.stat { text-align: center; position: relative; }
.stat:not(:last-child)::after { content: ""; position: absolute; right: -15px; top: 12%; height: 76%; width: 1px; background: var(--line-dark); }
.stat b { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 46px); color: var(--gold-2); font-weight: 600; display: block; line-height: 1.2; }
.stat span { font-size: 13px; color: rgba(255,255,255,0.6); letter-spacing: 0.18em; margin-top: 8px; display: block; }

/* ---------- 品牌 Marquee ---------- */
.brand-strip { border-bottom: 1px solid var(--line); background: var(--paper-2); overflow: hidden; }
.marquee { display: flex; gap: 80px; padding: 20px 0; white-space: nowrap; animation: marquee 30s linear infinite; width: max-content; }
.marquee span { font-family: var(--serif); font-size: 17px; letter-spacing: 0.3em; color: var(--muted); display: flex; align-items: center; gap: 80px; }
.marquee span::after { content: "◆"; font-size: 8px; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 产品卡片 ---------- */
.section { padding: 110px 0; }
.section.dark { background: var(--pine-3); color: #fff; }
.section.dark .sec-head .sub { color: rgba(255,255,255,0.6); }
.section.tint { background: var(--paper-2); }

.cat-chips { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 44px; }
.chip {
  padding: 9px 24px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 14px; letter-spacing: 0.1em; color: var(--muted);
  background: transparent; transition: all 0.3s var(--ease);
}
.chip:hover { border-color: var(--pine); color: var(--pine); }
.chip.active { background: var(--pine); border-color: var(--pine); color: #fff; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  grid-gap: 32px; }
.p-card {
  --r: 16px;
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(23,42,34,0.04), 0 10px 30px -18px rgba(23,42,34,0.12);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.p-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.p-card:hover { transform: translateY(-6px); border-color: rgba(199,161,92,0.4); box-shadow: 0 2px 4px rgba(23,42,34,0.05), 0 24px 48px -20px rgba(23,42,34,0.22); }
.p-card:hover::before { transform: scaleX(1); }
.p-card-media { position: relative; padding-top: 92%; overflow: hidden; background: #fff; display: block; }
.p-card-media img { position: absolute; top: 16px; left: 16px; width: calc(100% - 32px); height: calc(100% - 16px); object-fit: contain; transition: transform 1s var(--ease); }
.p-card:hover .p-card-media img { transform: scale(1.06); }
.p-card-media::after {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(to top, rgba(10,28,20,0.42), transparent 42%);
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.p-card:hover .p-card-media::after { opacity: 1; }
.p-card-more {
  position: absolute; left: 22px; bottom: 18px; z-index: 2; color: #fff;
  font-size: 13px; letter-spacing: 0.18em;
  opacity: 0; transform: translateY(8px); transition: all 0.45s var(--ease) 0.05s;
}
.p-card-more i { font-style: normal; margin-left: 6px; display: inline-block; transition: transform 0.45s var(--ease); }
.p-card:hover .p-card-more { opacity: 1; transform: translateY(0); }
.p-card:hover .p-card-more i { transform: translateX(5px); }
.p-card-tag {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: rgba(0,0,0,0.48); color: #fff;
  border: 0; padding: 5px 9px; border-radius: 0;
  font-size: 10px; letter-spacing: 0.06em; line-height: 1;
  text-shadow: none;
}
.p-card-body {
  padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1;
  background: linear-gradient(180deg, #FDFCF9 0%, var(--paper) 100%);
}
.p-card-brand { font-size: 11.5px; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 7px; display: flex; align-items: center; }
.p-card-brand::before { content: ""; width: 16px; height: 1.5px; background: var(--gold); margin-right: 9px; }
.p-card h3 { font-size: 17px; letter-spacing: 0.03em; line-height: 1.45; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-card .tagline { font-size: 13px; color: var(--muted); margin-bottom: 14px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; position: relative; }
.p-card-foot::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--line), rgba(199,161,92,0.35) 55%, var(--line));
}
.p-price { font-family: var(--serif); font-size: 24px; color: var(--pine); display: inline-block; }
.p-price::first-letter { font-size: 15px; color: var(--gold); margin-right: 2px; }
.p-price small { font-size: 13px; color: var(--muted); font-family: var(--sans); margin-left: 6px; letter-spacing: 0; }
.p-card-qr {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pine);
  letter-spacing: 0.08em; padding: 9px 18px; border-radius: 999px;
  border: 1px solid rgba(20,53,40,0.22); background: transparent;
  transition: all 0.35s var(--ease);
}
.p-card-qr:hover { background: var(--pine); border-color: var(--pine); color: #fff; transform: translateY(-1px); }
.p-card-qr svg { width: 15px; height: 15px; }

/* ---------- 特写 / split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px;
  grid-gap: 70px; align-items: center; }
.split-media { position: relative; }
.split-media img { width: 100%; height: 560px; object-fit: cover; }
.split-media::before {
  content: ""; position: absolute; inset: 26px -26px -26px 26px;
  border: 1px solid var(--gold); z-index: -1; opacity: 0.6;
}
.split-body h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.35; margin: 16px 0 20px; letter-spacing: 0.04em; }
.split-body p { color: var(--muted); margin-bottom: 16px; }
.point-list { margin: 28px 0 34px; display: grid; gap: 18px;
  grid-gap: 18px; }
.point-list li { list-style: none; display: flex; gap: 16px; align-items: flex-start; }
.point-list .dot {
  flex: none; width: 34px; height: 34px; border: 1px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; color: var(--gold); font-family: var(--serif);
}
.point-list b { display: block; font-size: 16px; letter-spacing: 0.04em; }
.point-list span { font-size: 14px; color: var(--muted); }

/* ---------- 老字号 ---------- */
.brand-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  grid-gap: 24px; }
.brand-card {
  border: 1px solid var(--line-dark); padding: 46px 30px; text-align: center;
  transition: all 0.4s var(--ease); position: relative; overflow: hidden;
}
.brand-card:hover { background: rgba(199,161,92,0.06); transform: translateY(-6px); }
.brand-card h3 { font-size: 24px; letter-spacing: 0.22em; color: var(--gold-2); margin-bottom: 6px; }
.brand-card .yr { font-size: 12px; letter-spacing: 0.25em; color: rgba(255,255,255,0.45); margin-bottom: 16px; }
.brand-card p { font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.8; }
.brand-card::after {
  content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 2px; background: var(--gold); transition: width 0.45s var(--ease);
}
.brand-card:hover::after { width: 60%; }

/* ---------- 资讯 ---------- */
.news-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
  grid-gap: 48px; align-items: stretch; }
.news-feature {
  position: relative; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line);
  border-radius: 16px; background: var(--card); overflow: hidden;
  box-shadow: 0 1px 2px rgba(23,42,34,0.04), 0 10px 30px -18px rgba(23,42,34,0.12);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.news-feature::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.news-feature:hover { transform: translateY(-6px); border-color: rgba(199,161,92,0.4); box-shadow: 0 2px 4px rgba(23,42,34,0.05), 0 24px 48px -20px rgba(23,42,34,0.22); }
.news-feature:hover::before { transform: scaleX(1); }
.news-feature .nf-media { aspect-ratio: 16/9; overflow: hidden; }
.news-feature img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.news-feature:hover img { transform: scale(1.05); }
.news-feature .nf-body { padding: 30px 32px 34px; }
.news-meta { display: flex; gap: 14px; font-size: 12.5px; color: var(--gold); letter-spacing: 0.14em; margin-bottom: 12px; }
.news-meta time { color: var(--muted); }
.news-feature h3 { font-size: 22px; line-height: 1.5; margin-bottom: 12px; }
.news-feature p { font-size: 14.5px; color: var(--muted); }
.news-list { display: grid; gap: 4px;
  grid-gap: 4px; }
.news-item {
  display: flex; gap: 24px; padding: 22px 18px; border-bottom: 1px solid var(--line);
  transition: all 0.3s var(--ease); align-items: baseline;
}
.news-item:first-child { border-top: 1px solid var(--line); }
.news-item:hover { background: var(--card); padding-left: 26px; }
.news-item time { font-family: var(--serif); color: var(--gold); font-size: 14px; flex: none; letter-spacing: 0.05em; }
.news-item .ni-title { font-size: 16px; letter-spacing: 0.02em; line-height: 1.6; flex: 1; }
.news-item .ni-cat { font-size: 12px; color: var(--muted); border: 1px solid var(--line); padding: 3px 10px; letter-spacing: 0.1em; flex: none; }

/* ---------- 扫码购 CTA ---------- */
.qr-band { background: var(--pine); color: #fff; position: relative; overflow: hidden; }
.qr-band::before {
  content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px;
  border: 1px solid rgba(199,161,92,0.25); border-radius: 50%;
}
.qr-band::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px;
  border: 1px solid rgba(199,161,92,0.18); border-radius: 50%;
}
.qr-band .container { display: grid; grid-template-columns: 1fr auto; gap: 60px;
  grid-gap: 60px; align-items: center; position: relative; z-index: 2; }
.qr-band h2 { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: 0.06em; margin-bottom: 16px; }
.qr-band p { color: rgba(255,255,255,0.68); max-width: 520px; }
.qr-card {
  background: #fff; padding: 26px 26px 20px; text-align: center; box-shadow: var(--shadow);
  border-radius: 4px; width: 250px;
}
.qr-card img, .qr-card svg { width: 190px; height: 190px; margin: 0 auto 14px; display: block; }
.qr-card b { color: var(--pine); font-size: 15px; letter-spacing: 0.12em; display: block; }
.qr-card span { font-size: 12px; color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--pine-3); color: rgba(255,255,255,0.65); padding: 80px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 50px;
  grid-gap: 50px; padding-bottom: 60px; }
.footer-grid h4 { color: #fff; font-size: 15px; letter-spacing: 0.2em; margin-bottom: 22px; font-weight: 500; }
.footer-grid ul { list-style: none; display: grid; gap: 12px;
  grid-gap: 12px; }
.footer-grid a { font-size: 14px; transition: color 0.3s; }
.footer-grid a:hover { color: var(--gold-2); }
.footer-brand p { font-size: 14px; line-height: 2; margin-top: 18px; max-width: 320px; }
.footer-hotline { font-family: var(--serif); font-size: 26px; color: var(--gold-2); letter-spacing: 0.06em; }
.footer-bottom { border-top: 1px solid var(--line-dark); padding: 26px 0; font-size: 12.5px; display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; color: rgba(255,255,255,0.4); }

/* ---------- 浮动扫码按钮 ---------- */
.float-qr {
  position: fixed; right: 28px; bottom: 32px; z-index: 150;
  background: var(--pine); color: #fff; border: 1px solid rgba(199,161,92,0.5);
  padding: 14px 20px; font-size: 14px; letter-spacing: 0.14em;
  display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow);
  transition: all 0.35s var(--ease);
}
.float-qr:hover { background: var(--pine-2); transform: translateY(-3px); }
.float-qr svg { width: 18px; height: 18px; color: var(--gold-2); }

/* ---------- 二维码 Modal ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(10, 28, 20, 0.72); backdrop-filter: blur(8px);
  z-index: 300; display: grid; place-items: center; opacity: 0; pointer-events: none;
  transition: opacity 0.3s var(--ease); padding: 20px;
}
.modal-mask.open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff; width: min(400px, 100%); padding: 44px 36px 34px; text-align: center;
  position: relative; transform: translateY(24px) scale(0.97); transition: transform 0.35s var(--ease);
  border-top: 3px solid var(--gold);
}
.modal-mask.open .modal { transform: none; }
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  background: none; border: none; font-size: 22px; color: var(--muted); line-height: 1;
  transition: color 0.2s;
}
.modal-close:hover { color: var(--pine); }
.modal .m-kicker { font-size: 11px; letter-spacing: 0.4em; color: var(--gold); }
.modal h3 { font-size: 22px; margin: 12px 0 6px; letter-spacing: 0.05em; }
.modal .m-sub { font-size: 13.5px; color: var(--muted); margin-bottom: 24px; }
.modal .qr-frame { border: 1px solid var(--line); padding: 18px; width: fit-content; margin: 0 auto 20px; }
.modal .qr-frame img, .modal .qr-frame svg { width: 200px; height: 200px; display: block; }
.modal .m-tip { font-size: 12.5px; color: var(--muted); letter-spacing: 0.06em; }

/* ============================================================
   产品详情页 · 相册
   ============================================================ */
.crumbs { padding: 120px 0 0; font-size: 13px; color: var(--muted); letter-spacing: 0.06em; }
.crumbs a:hover { color: var(--gold); }
.crumbs i { font-style: normal; margin: 0 8px; color: var(--gold); }
.crumbs-dark { padding: 0; color: rgba(255,255,255,0.6); }
.crumbs-dark a { color: rgba(255,255,255,0.75); }
.crumbs-dark a:hover { color: var(--gold-2); }
.crumbs-dark #crumbName { color: var(--gold-2); }

.pd-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px;
  grid-gap: 64px; padding: 34px 0 80px; }

/* 相册主舞台 */
.album { position: relative; }
.album-stage {
  position: relative; padding-top: 100%; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line); user-select: none; cursor: zoom-in;
}
.album-slide {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.album-slide.active { opacity: 1; pointer-events: auto; }
.album-slide img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease-out; }
.album-slide.card-slide { display: grid; place-items: stretch; }
.album-counter {
  position: absolute; bottom: 14px; right: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
  padding: 8px 15px; border-radius: 999px;
  background: rgba(10,28,20,0.72); backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -10px rgba(10,28,20,0.7);
  font-family: var(--serif); color: rgba(255,255,255,0.55);
}
.album-counter b { font-style: normal; font-weight: 500; font-size: 15px; line-height: 1; color: var(--gold-2); }
.album-counter i { font-style: normal; line-height: 1; color: rgba(255,255,255,0.28); font-size: 12px; }
.album-counter em { font-style: normal; line-height: 1; font-size: 11.5px; letter-spacing: 0.06em; }
.album-badge {
  position: absolute; top: 18px; left: 18px; z-index: 3;
  background: rgba(10,28,20,0.78); color: var(--gold-2); font-size: 12px;
  letter-spacing: 0.2em; padding: 6px 14px; backdrop-filter: blur(4px);
}
.album-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border: none; background: rgba(255,255,255,0.92);
  display: grid; place-items: center; color: var(--pine); box-shadow: 0 8px 24px -8px rgba(14,36,27,0.4);
  transition: all 0.3s var(--ease); opacity: 0;
}
.album:hover .album-nav { opacity: 1; }
.album-nav:hover { background: var(--pine); color: #fff; }
.album-nav.prev { left: 16px; }
.album-nav.next { right: 16px; }
.album-nav svg { width: 20px; height: 20px; }

/* 缩略图（单行横向滚动，超出隐藏，随轮播自动定位） */
.album-thumbs {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity;
}
.album-thumbs::-webkit-scrollbar { display: none; }
.thumb {
  position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper-2); transition: all 0.3s var(--ease);
  padding: 0; flex: 0 0 auto; width: calc((100% - 50px) / 6);
  scroll-snap-align: center;
}
.thumb .thumb-scale { position: absolute; top: 0; left: 0; width: var(--slide-w, 560px); height: var(--slide-w, 560px); transform-origin: top left; pointer-events: none; }
.thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb.active { border-color: var(--pine); box-shadow: 0 0 0 1px var(--pine); }
.thumb:hover { border-color: var(--gold); }
.mini-slide { padding-top: 100%; overflow: hidden; border: 1px solid var(--line); background: var(--paper-2); position: relative; }
.mini-slide img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* 信息卡 slide（成分/工艺/规格/品质） */
.info-card { width: 100%; height: 100%; padding: 7.5%; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%); position: relative; }
.info-card::before { content: ""; position: absolute; inset: 4.5%; border: 1px solid rgba(20,53,40,0.16); pointer-events: none; }
.info-card .ic-kicker { font-size: 11px; letter-spacing: 0.42em; color: var(--gold); margin-bottom: 2.5%; }
.info-card .ic-title { font-family: var(--serif); font-size: 30px; letter-spacing: 0.08em; color: var(--pine); margin-bottom: 5%; }
/* 成分 */
.comp-rows { display: grid; gap: 2.6%;
  grid-gap: 2.6%; }
.comp-row { display: grid; grid-template-columns: 1.2fr 0.5fr 1.6fr; align-items: baseline; gap: 4%;
  grid-gap: 4%; padding: 2.2% 0; border-bottom: 1px dashed rgba(20,53,40,0.18); }
.comp-row:last-child { border-bottom: none; }
.comp-row .cn { font-size: 16.5px; font-weight: 600; color: var(--text); letter-spacing: 0.04em; }
.comp-row .cv { font-family: var(--serif); font-size: 15px; color: var(--gold); text-align: center; }
.comp-row .cd { font-size: 13px; color: var(--muted); }
/* 工艺 */
.craft-steps { display: grid; gap: 3%;
  grid-gap: 3%; }
.craft-step { display: flex; gap: 4.5%; align-items: flex-start; }
.craft-step .cs-no { font-family: var(--serif); font-size: 26px; color: rgba(20,53,40,0.22); font-weight: 700; line-height: 1.1; flex: none; width: 11%; }
.craft-step .cs-body b { display: block; font-size: 16.5px; letter-spacing: 0.05em; margin-bottom: 2px; }
.craft-step .cs-body span { font-size: 13.5px; color: var(--muted); }
/* 规格 */
.spec-rows { display: grid; gap: 0;
  grid-gap: 0; }
.spec-row { display: grid; grid-template-columns: 0.7fr 1.5fr; gap: 6%;
  grid-gap: 6%; padding: 2.4% 0; border-bottom: 1px solid rgba(20,53,40,0.1); }
.spec-row .sk { font-size: 13.5px; color: var(--muted); letter-spacing: 0.12em; }
.spec-row .sv { font-size: 14.5px; color: var(--text); font-weight: 500; }
/* 品质 */
.quality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5%;
  grid-gap: 3.5%; }
.quality-item { border: 1px solid rgba(20,53,40,0.16); background: rgba(255,255,255,0.55); padding: 7% 6%; display: flex; flex-direction: column; gap: 8px; }
.quality-item .qi-mark { font-family: var(--serif); color: var(--gold); font-size: 21px; line-height: 1; }
.quality-item b { font-size: 14.5px; letter-spacing: 0.05em; line-height: 1.5; color: var(--text); }
.quality-foot { margin-top: 4.5%; font-size: 12.5px; letter-spacing: 0.28em; color: var(--muted); text-align: center; }

/* 详情右栏 */
.pd-info { position: relative; }
.pd-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pd-brand .pb-tag { font-size: 12px; letter-spacing: 0.3em; color: var(--gold); }
.pd-info h1 { font-size: clamp(26px, 3vw, 36px); line-height: 1.4; letter-spacing: 0.03em; margin-bottom: 10px; }
.pd-tagline { font-size: 16px; color: var(--muted); margin-bottom: 22px; }
.pd-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 26px; }
.pd-badges span { font-size: 12.5px; color: var(--pine); border: 1px solid var(--line); background: #fff; padding: 5px 14px; letter-spacing: 0.08em; }
.pd-price-row { display: flex; align-items: baseline; gap: 16px; padding: 22px 26px; background: var(--pine); color: #fff; margin-bottom: 30px; }
.pd-price { font-family: var(--serif); font-size: 40px; color: var(--gold-2); line-height: 1; }
.pd-price small { font-size: 16px; }
.pd-price-unit { font-size: 13.5px; color: rgba(255,255,255,0.65); letter-spacing: 0.1em; }
.pd-price-note { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; }
.pd-actions { display: flex; gap: 14px; margin-bottom: 34px; }
.pd-actions .btn { flex: 1; padding: 16px 20px; }
.pd-meta { border-top: 1px solid var(--line); display: grid; gap: 10px;
  grid-gap: 10px; padding-top: 22px; font-size: 13.5px; color: var(--muted); }
.pd-meta b { color: var(--text); font-weight: 500; }
.pd-points { margin: 30px 0; display: grid; gap: 14px;
  grid-gap: 14px; }
.pd-points li { list-style: none; display: flex; gap: 12px; font-size: 15px; }
.pd-points li::before { content: "◆"; color: var(--gold); font-size: 9px; line-height: 2.4; }

/* 详情 tabs */
.pd-tabs { border-top: 1px solid var(--line); padding: 70px 0 100px; }
.tab-bar { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 46px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.tab-bar::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tab-bar button {
  background: none; border: none; padding: 16px 30px; font-size: 16px; letter-spacing: 0.14em;
  color: var(--muted); position: relative; white-space: nowrap; font-family: var(--serif);
}
.tab-bar button.active { color: var(--pine); }
.tab-bar button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); }
.tab-panel { display: none; animation: fadeUp 0.5s var(--ease); }
.tab-panel.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; } }
.tab-panel .prose { max-width: 760px; color: var(--text); }
.tab-panel .prose p { margin-bottom: 18px; line-height: 2; }
.tab-panel .prose h3 { font-size: 19px; margin: 30px 0 12px; letter-spacing: 0.06em; }
.tab-panel .prose img { max-width: 100%; height: auto; display: block; margin: 0 auto; border-radius: 8px; }
.tab-panel .prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.tab-panel .prose table td, .tab-panel .prose table th { border: 1px solid var(--line); padding: 8px 12px; font-size: 14px; }
.tab-panel .prose table th { background: rgba(20,53,40,0.05); color: var(--pine); }

/* 相关产品 */
.related { background: var(--paper-2); }
.related .product-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.related .p-card h3 { font-size: 16px; }
.related .p-card-body { padding: 18px 18px 20px; }
.related .p-price { font-size: 21px; }
.related .p-card-qr { padding: 8px 14px; font-size: 12px; }

/* ============================================================
   关于页 / 资讯页
   ============================================================ */
.page-hero {
  background: var(--pine-3); color: #fff; padding: 190px 0 90px; position: relative; overflow: hidden;
}
.page-hero .bg { position: absolute; inset: 0; opacity: 0.28; }
.page-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,28,20,0.4), rgba(10,28,20,0.92)); }
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 54px); letter-spacing: 0.08em; margin: 18px 0 14px; }
.page-hero p { color: rgba(255,255,255,0.65); max-width: 640px; }

.timeline { position: relative; margin-top: 20px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-dark); }
.tl-item { position: relative; padding: 0 0 38px 44px; }
.tl-item::before {
  content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px;
  border: 1px solid var(--gold); border-radius: 50%; background: var(--pine-3);
}
.tl-item::after { content: ""; position: absolute; left: 4.5px; top: 11.5px; width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
.tl-item .tl-year { font-family: var(--serif); color: var(--gold-2); font-size: 21px; letter-spacing: 0.08em; }
.tl-item b { display: block; color: #fff; font-size: 16.5px; margin: 6px 0 4px; letter-spacing: 0.05em; }
.tl-item p { color: rgba(255,255,255,0.55); font-size: 14px; max-width: 620px; }

.honor-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  grid-gap: 20px; }
.honor-item { border: 1px solid var(--line-dark); padding: 30px 24px; transition: all 0.35s var(--ease); }
.honor-item:hover { background: rgba(199,161,92,0.07); }
.honor-item .hy { font-family: var(--serif); color: var(--gold-2); font-size: 19px; }
.honor-item b { display: block; color: #fff; font-size: 15px; margin-top: 8px; line-height: 1.6; letter-spacing: 0.04em; }

.global-list { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.global-list span {
  border: 1px solid var(--line-dark); padding: 10px 24px; font-size: 14px;
  letter-spacing: 0.14em; color: rgba(255,255,255,0.8); transition: all 0.3s;
}
.global-list span:hover { border-color: var(--gold); color: var(--gold-2); }

/* 资讯列表页 */
.news-page-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  grid-gap: 30px; }
.n-card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(23,42,34,0.04), 0 10px 30px -18px rgba(23,42,34,0.12);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.n-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.n-card:hover { transform: translateY(-6px); border-color: rgba(199,161,92,0.4); box-shadow: 0 2px 4px rgba(23,42,34,0.05), 0 24px 48px -20px rgba(23,42,34,0.22); }
.n-card:hover::before { transform: scaleX(1); }
.n-card .nc-media { aspect-ratio: 16/10; overflow: hidden; }
.n-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.n-card:hover img { transform: scale(1.05); }
.n-card .nc-body { padding: 26px 28px 30px; flex: 1; display: flex; flex-direction: column; background: linear-gradient(180deg, #FDFCF9 0%, var(--paper) 100%); }
.n-card h3 { font-size: 18.5px; line-height: 1.6; margin-bottom: 12px; letter-spacing: 0.02em; }
.n-card p { font-size: 14px; color: var(--muted); flex: 1; }
.n-card .nc-more { margin-top: 18px; font-size: 13px; color: var(--gold); letter-spacing: 0.16em; }

/* 资讯详情 */
.article { max-width: 780px; margin: 0 auto; padding: 60px 0 100px; }
.article-head { border-bottom: 1px solid var(--line); padding-bottom: 34px; margin-bottom: 44px; }
.article-head h1 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.5; letter-spacing: 0.03em; margin: 16px 0; }
.article-body p { margin-bottom: 24px; line-height: 2.1; font-size: 16.5px; color: var(--text); }
.article-cover { margin: 40px 0; }
.article-cover img { width: 100%; }

/* 联系页 */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  grid-gap: 60px; }
.contact-item { display: flex; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.contact-item .ci-ico { width: 46px; height: 46px; border: 1px solid var(--gold); display: grid; place-items: center; color: var(--gold); flex: none; }
.contact-item .ci-ico svg { width: 20px; height: 20px; }
.contact-item b { display: block; font-size: 15px; letter-spacing: 0.1em; margin-bottom: 4px; }
.contact-item span { font-size: 14px; color: var(--muted); }
.form-grid { display: grid; gap: 18px;
  grid-gap: 18px; }
.form-grid label { font-size: 13px; letter-spacing: 0.16em; color: var(--muted); display: block; margin-bottom: 8px; }
.form-grid input, .form-grid textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; padding: 14px 16px;
  font-family: inherit; font-size: 15px; color: var(--text); transition: border-color 0.3s; resize: vertical;
}
.form-grid input:focus, .form-grid textarea:focus { outline: none; border-color: var(--gold); }
.form-ok { display: none; padding: 14px 18px; background: #EAF3EC; border: 1px solid #BFDCC8; color: #2E5B45; font-size: 14px; }
.form-ok.show { display: block; }
.code-row { display: flex; gap: 12px; align-items: stretch; }
.code-row input { min-width: 0; }
.code-row img { width: 120px; height: auto; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; background: var(--paper-2); }

/* 走进金木 · 频道页子栏目入口 */
.about-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  grid-gap: 24px; }
.about-card {
  position: relative; display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 38px 28px 34px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(23,42,34,0.04), 0 10px 30px -18px rgba(23,42,34,0.12);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease);
}
.about-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease);
}
.about-card:hover { transform: translateY(-6px); border-color: rgba(199,161,92,0.4); box-shadow: 0 2px 4px rgba(23,42,34,0.05), 0 24px 48px -20px rgba(23,42,34,0.22); }
.about-card:hover::before { transform: scaleX(1); }
.about-card .ac-icon {
  width: 52px; height: 52px; border: 1px solid var(--gold); border-radius: 50%;
  display: grid; place-items: center; color: var(--gold); margin-bottom: 26px; transition: all 0.4s var(--ease);
}
.about-card:hover .ac-icon { background: var(--gold); color: var(--pine-3); }
.about-card .ac-icon svg { width: 22px; height: 22px; }
.about-card .ac-name { display: block; font-family: var(--serif); font-size: 21px; letter-spacing: 0.06em; color: var(--pine); margin-bottom: 14px; }
.about-card .ac-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; letter-spacing: 0.12em; color: var(--muted); transition: color 0.4s var(--ease); }
.about-card .ac-more .arr { transition: transform 0.3s var(--ease); }
.about-card:hover .ac-more { color: var(--gold); }
.about-card:hover .ac-more .arr { transform: translateX(4px); }

/* ---------- Reveal 动画 ---------- */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.12s; }
.reveal.d2 { transition-delay: 0.24s; }
.reveal.d3 { transition-delay: 0.36s; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .related .product-grid { grid-template-columns: repeat(2, 1fr); }
  .brand-grid, .honor-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .news-page-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-layout { grid-template-columns: 1fr; gap: 44px; }
  .split { grid-template-columns: 1fr; gap: 44px; }
  .split-media img { height: 420px; }
  .qr-band .container { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .about-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .main-nav { display: none; }
  .menu-toggle { display: block; }
  .logo-img { height: 38px; }
  .product-grid, .related .product-grid, .news-page-grid, .brand-grid, .honor-grid { grid-template-columns: 1fr; }
  .about-cards { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 0; }
  .stat:nth-child(2)::after { display: none; }
  .news-grid { grid-template-columns: 1fr; }
  .section { padding: 76px 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  .album-thumbs { gap: 6px; }
  .thumb { width: calc((100% - 30px) / 6); }
  .pd-actions { flex-direction: column; }
  .float-qr { right: 16px; bottom: 18px; padding: 11px 16px; font-size: 13px; }
  .info-card .ic-title { font-size: 22px; }
  .info-card .comp-row .cn { font-size: 13.5px; }
}

/* ============ 走进金木 · 子栏目页组件 ============ */

/* 董事长简介 */
.chair-card { position: relative; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); background: var(--card); }
.chair-card img { width: 100%; aspect-ratio: 3/3.6; object-fit: cover; }
.chair-card .chair-cap { padding: 18px 22px 20px; border-top: 2px solid var(--gold); background: linear-gradient(180deg, #FDFCF9, var(--paper)); }
.chair-card .chair-cap b { font-family: var(--serif); font-size: 19px; color: var(--pine); letter-spacing: 0.1em; }
.chair-card .chair-cap span { display: block; font-size: 13px; color: var(--muted); letter-spacing: 0.12em; margin-top: 2px; }

.role-list { margin: 24px 0 30px; display: grid; gap: 12px;
  grid-gap: 12px; padding: 0; }
.role-list li { list-style: none; display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--text); letter-spacing: 0.04em; }
.role-list li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); margin-top: 10px; box-shadow: 0 0 0 3px rgba(199,161,92,0.18); }

.quote-block { border-left: 3px solid var(--gold); background: linear-gradient(90deg, rgba(199,161,92,0.09), transparent); padding: 20px 26px; font-family: var(--serif); font-size: 15.5px; line-height: 2.05; color: var(--pine-2); letter-spacing: 0.04em; }

/* 发展历程画板带 */
.board-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  grid-gap: 18px; }
.board-item { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--card); transition: all 0.4s var(--ease); }
.board-item:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(199,161,92,0.45); }
.board-item img { width: 100%; aspect-ratio: 3/2.6; object-fit: cover; }
.board-item .b-cap { padding: 16px 18px; }
.board-item .b-cap b { display: block; font-size: 15px; color: var(--pine); letter-spacing: 0.06em; }
.board-item .b-cap span { font-size: 12.5px; color: var(--muted); letter-spacing: 0.1em; }

/* TMWS 理念卡 */
.tmws-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  grid-gap: 18px; }
.tmws-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 24px; position: relative; overflow: hidden; transition: all 0.4s var(--ease); }
.tmws-item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); }
.tmws-item:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(199,161,92,0.45); }
.tmws-item:hover::before { transform: scaleX(1); }
.tmws-item .ti-icon { width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--pine), var(--pine-2)); display: flex; align-items: center; justify-content: center; padding: 13px; margin-bottom: 20px; }
.tmws-item .ti-icon img { width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.94; }
.tmws-item b { display: block; font-family: var(--serif); font-size: 18px; color: var(--pine); letter-spacing: 0.05em; }
.tmws-item .ti-en { display: block; font-size: 12px; color: var(--gold); letter-spacing: 0.18em; text-transform: uppercase; margin: 3px 0 10px; }
.tmws-item p { font-size: 13.5px; color: var(--muted); line-height: 1.85; }

/* 荣誉牌匾墙 */
.ry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  grid-gap: 20px; }
.ry-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: all 0.4s var(--ease); }
.ry-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(199,161,92,0.45); }
.ry-card .ry-media { aspect-ratio: 4/3; overflow: hidden; }
.ry-card .ry-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.ry-card:hover .ry-media img { transform: scale(1.06); }
.ry-card .ry-body { padding: 18px 20px 20px; border-top: 1px solid var(--line); }
.ry-card .ry-body .ry-year { font-family: var(--serif); color: var(--gold); font-size: 15px; letter-spacing: 0.1em; }
.ry-card .ry-body b { display: block; color: var(--pine); font-size: 15px; margin-top: 4px; letter-spacing: 0.05em; line-height: 1.55; }

/* 返回链接 */
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--gold); letter-spacing: 0.14em; margin-top: 42px; transition: gap 0.3s var(--ease); }
.back-link:hover { gap: 12px; }
.section.dark .back-link { color: var(--gold-2); }

/* 响应式 */
@media (max-width: 1024px) { .tmws-grid, .ry-grid { grid-template-columns: repeat(2, 1fr); } .board-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .tmws-grid, .ry-grid, .board-strip { grid-template-columns: 1fr; } }

/* ============ 金木资讯 · 博客式频道页 ============ */
.blog-hero { padding: 150px 0 42px; background: linear-gradient(180deg, var(--paper-2), var(--paper)); border-bottom: 1px solid var(--line); }
.blog-hero .kicker { color: var(--gold); }
.blog-hero h1 { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px); margin: 14px 0 10px; letter-spacing: 0.08em; color: var(--pine); }
.blog-hero p { color: var(--muted); max-width: 660px; }

.blog-body { padding: 36px 0 100px; }
.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px;
  grid-gap: 44px; align-items: start; }

/* 分类标签 */
.blog-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.blog-tabs .tab { padding: 8px 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-size: 14px; letter-spacing: 0.08em; color: var(--muted); transition: all 0.3s var(--ease); }
.blog-tabs .tab:hover { border-color: var(--gold); color: var(--gold); }
.blog-tabs .tab.active { background: var(--pine); border-color: var(--pine); color: #fff; }

/* 博客文章卡（左图右文） */
.post-card { display: flex; gap: 26px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin-bottom: 22px; box-shadow: 0 1px 2px rgba(23,42,34,0.04); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(199,161,92,0.42); }
.post-card .pc-thumb { flex: none; width: 260px; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--paper-2); }
.post-card .pc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.post-card:hover .pc-thumb img { transform: scale(1.06); }
.post-card .pc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pc-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 9px; }
.pc-meta span { font-size: 12px; color: var(--gold); letter-spacing: 0.14em; background: rgba(199,161,92,0.13); padding: 3px 11px; border-radius: 3px; }
.pc-meta time { font-size: 12.5px; color: var(--muted); }
.post-card h3 { font-size: 18.5px; line-height: 1.55; margin-bottom: 9px; letter-spacing: 0.02em; }
.post-card h3 a { color: var(--text); transition: color 0.3s; }
.post-card h3 a:hover { color: var(--gold); }
.post-card .pc-body > p { font-size: 14px; color: var(--muted); line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-card .pc-more { margin-top: auto; padding-top: 13px; font-size: 13px; color: var(--gold); letter-spacing: 0.16em; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.3s var(--ease); }
.post-card:hover .pc-more { gap: 10px; }

/* 分页 */
.blog-pager { margin-top: 36px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.blog-pager .pageinfo { margin-right: 14px; font-size: 13px; color: var(--muted); }
.blog-pager a, .blog-pager .pageinfo strong { font-size: 14px; }
.blog-pager a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); letter-spacing: 0.06em; transition: all 0.3s var(--ease); }
.blog-pager a:hover { border-color: var(--gold); color: var(--gold); }
.blog-pager a.listpage.curpage { background: var(--pine); border-color: var(--pine); color: #fff; }
.blog-pager a.nopage { opacity: 0.45; pointer-events: none; }
.blog-pager .jumpbox { display: none; }

/* 侧栏 */
.side-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 22px 18px; margin-bottom: 22px; }
.side-box h4 { font-family: var(--serif); font-size: 16px; color: var(--pine); letter-spacing: 0.14em; padding-bottom: 13px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.side-list li { list-style: none; padding: 9px 0; border-bottom: 1px dashed rgba(20,53,40,0.10); display: flex; gap: 10px; align-items: baseline; }
.side-list li:last-child { border-bottom: none; }
.side-list a { flex: 1; font-size: 14px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s; }
.side-list a:hover { color: var(--gold); }
.side-list time { font-size: 12px; color: var(--muted); flex: none; }
.side-cats li { list-style: none; }
.side-cats a { display: flex; justify-content: space-between; align-items: center; padding: 11px 2px; font-size: 14.5px; color: var(--text); border-bottom: 1px dashed rgba(20,53,40,0.10); transition: all 0.3s; }
.side-cats a span { color: var(--gold); opacity: 0; transform: translateX(-6px); transition: all 0.3s; }
.side-cats a:hover { color: var(--gold); padding-left: 8px; }
.side-cats a:hover span { opacity: 1; transform: translateX(0); }

/* 响应式 */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: 1fr; }
  .post-card .pc-thumb { width: 220px; }
}
@media (max-width: 720px) {
  .post-card { flex-direction: column; gap: 16px; }
  .post-card .pc-thumb { width: 100%; aspect-ratio: 16/9; }
  .blog-tabs { gap: 8px; }
  .blog-tabs .tab { padding: 7px 16px; font-size: 13px; }
  .blog-pager { flex-wrap: wrap; }
}

/* ============ 浅色频道页头部适配（透明白字 → 浅底深字） ============ */
body.light-page .site-header { background: rgba(246,243,236,0.92); backdrop-filter: blur(14px); padding: 12px 0; border-bottom: 1px solid var(--line); box-shadow: 0 10px 30px -22px rgba(23,42,34,0.35); }
body.light-page .site-header .logo-img { height: 38px; }
body.light-page .nav-item > a, body.light-page .main-nav > a:not(.nav-cta) { color: var(--text); }
body.light-page .nav-item:hover > a, body.light-page .nav-item > a.active, body.light-page .main-nav > a:not(.nav-cta):hover, body.light-page .main-nav > a:not(.nav-cta).active { color: var(--pine); }
body.light-page .nav-item > a::after, body.light-page .main-nav > a:not(.nav-cta)::after { background: var(--gold); }
body.light-page .menu-toggle span { background: var(--pine); }
/* 浅色页滚动后：恢复深绿白字 */
body.light-page .site-header.solid { background: rgba(10,28,20,0.92); backdrop-filter: blur(14px); padding: 12px 0; box-shadow: 0 10px 40px -18px rgba(0,0,0,0.5); border-bottom: none; }
body.light-page .site-header.solid .nav-item > a, body.light-page .site-header.solid .main-nav > a:not(.nav-cta) { color: rgba(255,255,255,0.85); }
body.light-page .site-header.solid .nav-item:hover > a, body.light-page .site-header.solid .nav-item > a.active, body.light-page .site-header.solid .main-nav > a:not(.nav-cta):hover, body.light-page .site-header.solid .main-nav > a:not(.nav-cta).active { color: #fff; }
body.light-page .site-header.solid .menu-toggle span { background: #fff; }

/* ============ 深绿头部常驻页（浅色内容区页面：头部不滚动即为深绿） ============ */
body.dark-header .site-header { background: rgba(10,28,20,0.92); backdrop-filter: blur(14px); padding: 12px 0; box-shadow: 0 10px 40px -18px rgba(0,0,0,0.5); }
body.dark-header .site-header .logo-img { height: 36px; }
body.dark-header .nav-item > a, body.dark-header .main-nav > a:not(.nav-cta) { color: rgba(255,255,255,0.85); }
body.dark-header .nav-item:hover > a, body.dark-header .nav-item > a.active, body.dark-header .main-nav > a:not(.nav-cta):hover, body.dark-header .main-nav > a:not(.nav-cta).active { color: #fff; }
body.dark-header .nav-item > a::after, body.dark-header .main-nav > a:not(.nav-cta)::after { background: var(--gold); }
body.dark-header .menu-toggle span { background: #fff; }

/* 列表空态 */
.blog-empty { padding: 90px 20px; text-align: center; font-size: 15px; color: var(--muted); letter-spacing: 0.1em; background: var(--card); border: 1px dashed var(--line); border-radius: 16px; }

/* ============ 文章详情页（博客式） ============ */
.ar-head { padding: 148px 0 32px; background: linear-gradient(180deg, var(--paper-2), var(--paper)); border-bottom: 1px solid var(--line); }
.crumb { font-size: 13px; color: var(--muted); letter-spacing: 0.05em; margin-bottom: 16px; display: flex; align-items: center; flex-wrap: wrap; }
.crumb a { color: var(--muted); transition: color 0.3s; }
.crumb a:hover { color: var(--gold); }
.crumb i { font-style: normal; margin: 0 10px; color: rgba(20,53,40,0.35); }
.ar-head h1 { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 31px); line-height: 1.45; color: var(--pine); letter-spacing: 0.03em; margin-bottom: 15px; }
.ar-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ar-meta .arpill { font-size: 12px; color: var(--gold); letter-spacing: 0.14em; background: rgba(199,161,92,0.13); padding: 3px 11px; border-radius: 3px; }
.ar-meta time, .ar-meta .ar-click { font-size: 13px; color: var(--muted); }

.ar-body { padding: 40px 0 90px; }
.ar-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px;
  grid-gap: 44px; align-items: start; }
.ar-main { min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 40px 46px; }

/* 正文排版 */
.prose-zen { font-size: 15.5px; line-height: 2.0; color: var(--text); letter-spacing: 0.01em; word-break: break-word; }
.prose-zen p { margin: 0 0 1.4em; }
.prose-zen strong { color: var(--pine); font-weight: 600; }
.prose-zen h1, .prose-zen h2, .prose-zen h3, .prose-zen h4 { font-family: var(--serif); color: var(--pine); }
.prose-zen h2 { font-size: 21px; margin: 2em 0 0.8em; padding-left: 12px; border-left: 3px solid var(--gold); }
.prose-zen h3 { font-size: 18px; margin: 1.8em 0 0.7em; }
.prose-zen h4 { font-size: 16px; margin: 1.5em 0 0.6em; }
.prose-zen img { max-width: 100%; height: auto; border-radius: 10px; margin: 0.8em auto; display: block; }
.prose-zen blockquote { border-left: 3px solid var(--gold); background: rgba(199,161,92,0.08); padding: 12px 18px; margin: 1.4em 0; color: var(--muted); border-radius: 0 8px 8px 0; }
.prose-zen a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose-zen ul, .prose-zen ol { margin: 0 0 1.4em; padding-left: 1.6em; }
.prose-zen li { margin: 0.35em 0; }
.prose-zen table { width: 100%; border-collapse: collapse; margin: 1.4em 0; }
.prose-zen table td, .prose-zen table th { border: 1px solid var(--line); padding: 8px 12px; font-size: 14px; }
.prose-zen table th { background: rgba(20,53,40,0.05); color: var(--pine); }

/* 上下篇 */
.ar-prevnext { display: flex; justify-content: space-between; gap: 20px; margin-top: 38px; padding-top: 22px; border-top: 1px dashed rgba(20,53,40,0.14); font-size: 14px; }
.ar-prevnext p { max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.ar-prevnext a { color: var(--text); transition: color 0.3s; }
.ar-prevnext a:hover { color: var(--gold); }

/* 延伸阅读 */
.ar-more { margin-top: 42px; }
.more-head { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.more-head span { color: var(--gold); font-size: 13px; }
.more-head h3 { font-family: var(--serif); font-size: 17px; color: var(--pine); letter-spacing: 0.1em; }
.more-head i { flex: 1; height: 1px; background: var(--line); }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  grid-gap: 16px; }
.more-card { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: all 0.35s var(--ease); }
.more-card:hover { transform: translateY(-3px); border-color: rgba(199,161,92,0.45); box-shadow: var(--shadow); }
.mc-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; }
.mc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.more-card:hover .mc-thumb img { transform: scale(1.05); }
.mc-body { display: block; padding: 12px 14px; }
.mc-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.6; color: var(--text); transition: color 0.3s; }
.more-card:hover .mc-title { color: var(--gold); }
.mc-body time { display: block; margin-top: 8px; font-size: 12px; color: var(--muted); }

.ar-pay-tips { background: rgba(199,161,92,0.1); border: 1px dashed var(--gold); border-radius: 10px; padding: 22px; text-align: center; color: var(--text); }
.ar-pay-tips a { color: var(--gold); }

/* 响应式 */
@media (max-width: 1024px) {
  .ar-grid { grid-template-columns: 1fr; }
  .ar-main { padding: 30px 28px; }
}
@media (max-width: 720px) {
  .ar-main { padding: 24px 18px; }
  .more-grid { grid-template-columns: 1fr; }
  .ar-prevnext { flex-direction: column; gap: 8px; }
  .ar-prevnext p { max-width: 100%; }
  .ar-head h1 { font-size: 21px; }
}

/* ============ 联系我们 · 在线留言 Tab ============ */
.ct-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 26px 32px 32px; }
.ct-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.ct-tab { background: none; border: none; padding: 12px 22px; font-family: var(--serif); font-size: 15px; letter-spacing: 0.12em; color: var(--muted); cursor: pointer; position: relative; transition: color 0.3s; }
.ct-tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform 0.3s var(--ease); }
.ct-tab:hover { color: var(--pine); }
.ct-tab.active { color: var(--pine); }
.ct-tab.active::after { transform: scaleX(1); }
.ct-panel { padding-top: 26px; }
.wx-wrap { max-width: 560px; margin: 0 auto; }
.wx-head { text-align: center; margin-bottom: 26px; }
.wx-kicker { font-size: 11px; letter-spacing: 0.32em; color: var(--gold); display: block; margin-bottom: 10px; }
.wx-title { font-family: var(--serif); font-size: 22px; color: var(--pine); letter-spacing: 0.1em; margin-bottom: 10px; }
.wx-desc { font-size: 14px; color: var(--muted); letter-spacing: 0.04em; }
.wx-main { display: grid; grid-template-columns: 220px 1fr; gap: 34px;
  grid-gap: 34px; align-items: center; padding: 30px 34px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.wx-qr { text-align: center; }
.wx-qr-box { position: relative; width: 190px; height: 190px; margin: 0 auto 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.wx-qr-box img { width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.wx-banner { display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 0 auto 14px; padding: 6px 16px 6px 13px; background: linear-gradient(135deg, #C7A15C 0%, #DDBE7C 55%, #C7A15C 100%); color: #fff; border-radius: 22px; font-size: 12px; letter-spacing: 0.22em; box-shadow: 0 3px 10px rgba(199,161,92,0.38); }
.wx-banner svg { width: 15px; height: 15px; flex: none; }
.wx-qr b { display: block; font-family: var(--serif); font-size: 15px; letter-spacing: 0.14em; color: var(--pine); margin-bottom: 5px; }
.wx-scan { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; }
.wx-info { list-style: none; display: grid; gap: 16px;
  grid-gap: 16px; }
.wx-info li { display: flex; gap: 12px; align-items: flex-start; }
.wi-ico { color: var(--gold); font-size: 12px; line-height: 1.9; }
.wx-info b { display: block; font-size: 14px; letter-spacing: 0.08em; color: var(--pine); margin-bottom: 3px; }
.wx-info li span:last-child { font-size: 13px; color: var(--text); line-height: 1.7; }
.wx-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; padding: 13px 22px; background: linear-gradient(90deg, rgba(199,161,92,0.16), rgba(199,161,92,0.05)); border: 1px solid rgba(199,161,92,0.35); border-radius: 10px; flex-wrap: wrap; }
.wx-foot span { font-size: 13px; letter-spacing: 0.08em; color: var(--pine); }
@media (max-width: 640px) {
  .wx-main { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
  .wx-foot { justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .ct-card { padding: 20px 18px 26px; }
  .ct-tab { padding: 10px 14px; font-size: 14px; }
}

/* ============ 官方商城 · 产品专区入口卡 ============ */
.shop-zones { display: flex; flex-wrap: nowrap;
  grid-gap: 28px; align-items: stretch; }
.shop-zone { position: relative; display: block; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 30px 28px 26px; text-decoration: none; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); overflow: hidden; }
.shop-zone { width: 30.666%; margin: 0 1% 28px; box-sizing: border-box; }
.shop-zone::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), rgba(199,161,92,0.2)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s var(--ease); }
.shop-zone:hover { transform: translateY(-6px); border-color: rgba(199,161,92,0.45); box-shadow: 0 2px 4px rgba(23,42,34,0.05), 0 24px 48px -20px rgba(23,42,34,0.22); }
.shop-zone:hover::before { transform: scaleX(1); }
.sz-no { position: absolute; top: 20px; right: 22px; font-family: var(--serif); font-size: 42px; line-height: 1; color: rgba(199,161,92,0.22); font-weight: 600; }
.sz-en { display: block; font-size: 10.5px; letter-spacing: 0.3em; color: var(--gold); margin-bottom: 8px; }
.shop-zone h3 { font-family: var(--serif); font-size: 22px; letter-spacing: 0.1em; color: var(--pine); margin-bottom: 10px; }
.sz-desc { font-size: 13.5px; color: var(--muted); line-height: 1.75; margin-bottom: 18px; }
.sz-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sz-tags span { border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: var(--text); background: var(--paper); transition: all 0.3s var(--ease); }
.sz-tags a { color: inherit; text-decoration: none; }
.sz-tags span:hover { border-color: rgba(199,161,92,0.5); color: var(--gold); background: #fff; }
.sz-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0.12em; color: var(--pine); transition: gap 0.3s var(--ease); }
.shop-zone:hover .sz-more { gap: 12px; }
/* 新品上架 */
.shop-new { display: flex; flex-wrap: nowrap;
  grid-gap: 24px; }
.sn-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 18px; text-decoration: none; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease); }
.sn-card { width: 23%; margin: 0 1% 24px; box-sizing: border-box; }
.sn-card:hover { transform: translateY(-5px); border-color: rgba(199,161,92,0.45); box-shadow: 0 18px 36px -18px rgba(23,42,34,0.25); }
.sn-media { position: relative; padding-top: 100%; overflow: hidden; border-radius: 10px; margin-bottom: 12px; background: var(--paper); }
.sn-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.sn-card:hover .sn-media img { transform: scale(1.05); }
.sn-card b { display: block; font-size: 14px; line-height: 1.55; color: var(--text); font-weight: 500; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sn-price { font-family: var(--serif); font-size: 17px; color: var(--gold); letter-spacing: 0.04em; }
/* 专区与新品卡固定单行：不再响应式换列 */
.pd-price-old { font-family: var(--serif); font-size: 16px; color: rgba(255,255,255,0.55); text-decoration: line-through; margin-right: 4px; }

/* ===== 旧浏览器兼容：不支持 flex/grid gap 时用 margin 提供间距 ===== */
@supports not (gap: 1px) {
  .main-nav a, .main-nav .nav-item { margin: 0 17px; }
  .main-nav .dropdown { margin-left: -17px; }
  .logo { margin-right: 0; }
  .logo img, .logo { gap: 0; }
  .logo { margin: 0; }
  .logo .logo-img { margin-right: 14px; }
  .hero-actions { margin: 0 -9px; }
  .hero-actions .btn, .hero-actions > * { margin: 0 9px; }
  .sz-tags { margin: 0 -4px; }
  .sz-tags span { margin: 0 4px 8px; }
  .album-thumbs { margin: 0 -5px; }
  .album-thumbs .thumb { margin: 0 5px; }
  .cat-chips { margin: 0 -6px; }
  .cat-chips .chip, .cat-chips > * { margin: 0 6px 12px; }
  .pd-badges { margin: 0 -5px; }
  .pd-badges > * { margin: 0 5px 10px; }
  .news-meta { margin: 0 -7px; }
  .news-meta > * { margin: 0 7px; }
  .point-list li { margin-bottom: 16px; }
  .footer-bottom { margin: 0 -10px; }
  .footer-bottom > * { margin: 0 10px; }
  .mobile-nav .m-sub a { margin-bottom: 8px; }
  .marquee, .marquee span { gap: 0; }
  .marquee span { margin: 0 40px; }
  .pd-brand > * { margin-right: 14px; }
  .btn, .nav-cta, .p-card-qr, .album-nav, .menu-toggle, .float-qr { gap: 0; }
  .btn svg, .nav-cta svg, .p-card-qr svg, .album-nav svg, .menu-toggle span, .float-qr svg { margin-right: 0; }
  .craft-step > * { margin-right: 4.5%; }
}

/* 无 calc() 浏览器：缩略图宽度兜底 */
@supports not (width: calc(1px + 1px)) {
  .album-thumbs .thumb { width: 15% !important; margin: 0 5px !important; }
}

/* ---------- 详情页 · 购买方式 ---------- */
.buy-wrap { display: flex; align-items: center; justify-content: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 44px 48px; }
.buy-qr { width: 168px; height: 168px; flex: 0 0 auto; padding: 14px; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(23,42,34,0.1); margin-right: 28px; }
.buy-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.buy-info { max-width: 500px; }
.buy-info h3 { font-size: 22px; letter-spacing: 0.06em; color: var(--pine); margin-bottom: 12px; }
.buy-desc { color: var(--muted); font-size: 14.5px; line-height: 1.9; margin-bottom: 22px; }
.buy-phone { display: flex; align-items: center; background: var(--paper); border: 1px dashed var(--line); border-radius: 12px; padding: 13px 20px; }
.buy-phone-label { font-size: 13px; color: var(--muted); margin-right: 12px; letter-spacing: 0.08em; }
.buy-phone-num { font-size: 19px; font-family: var(--serif); color: var(--gold); letter-spacing: 0.03em; }
.buy-phone-time { font-size: 12.5px; color: var(--muted); margin-left: 14px; }
@media (max-width: 760px) {
  .buy-wrap { flex-direction: column; padding: 36px 24px; text-align: center; }
  .buy-qr { margin-right: 0; margin-bottom: 30px; }
  .buy-info { max-width: 100%; }
  .buy-phone { flex-direction: column; align-items: center; }
  .buy-phone-label { margin-right: 0; margin-bottom: 6px; }
  .buy-phone-time { margin-left: 0; margin-top: 6px; }
}

/* 购买前加客服微信提示条 */
.buy-tip { display: flex; align-items: flex-start; background: linear-gradient(90deg, rgba(199,161,92,0.12), rgba(199,161,92,0.04)); border: 1px solid rgba(199,161,92,0.4); border-left: 3px solid var(--gold); border-radius: 12px; padding: 14px 18px; margin-bottom: 22px; }
.buy-tip-badge { flex: 0 0 auto; width: 44px; height: 44px; margin-right: 14px; display: flex; align-items: center; justify-content: center; background: var(--gold); border-radius: 50%; font-size: 13px; color: #fff; letter-spacing: 0.05em; }
.buy-tip p { font-size: 13.5px; line-height: 1.85; color: var(--text); }
.buy-tip p b { color: var(--pine); }

/* 购买三步：三列卡片 */
.buy-steps { display: flex; flex-wrap: wrap; margin: 0 -8px 22px; }
.buy-step { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; margin: 0 8px 10px; padding: 12px 10px; background: rgba(20,53,40,0.04); border: 1px solid var(--line); border-radius: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text); white-space: nowrap; }
.buy-step span { flex: 0 0 auto; width: 24px; height: 24px; margin-right: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: #fff; border-radius: 50%; font-size: 12px; font-weight: 600; }
@media (max-width: 760px) { .buy-step { flex: 1 1 45%; justify-content: center; white-space: normal; } }

/* 购买方式 · 步骤条版块 */
.buy-block {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 54px 56px 46px; box-shadow: 0 24px 60px -34px rgba(14,36,27,0.22);
}
.buy-head { text-align: center; margin-bottom: 50px; }
.buy-head .kicker { justify-content: center; }
.buy-head .kicker::after { content: ""; width: 34px; height: 1px; background: var(--gold); }
.buy-head h3 { font-family: var(--serif); font-size: 27px; color: var(--pine); letter-spacing: 0.08em; margin: 16px 0 12px; }
.buy-head p { font-size: 14px; color: var(--muted); letter-spacing: 0.02em; }

.buy-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 46px; position: relative; }
.buy-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 25px; height: 1px; background: linear-gradient(90deg, rgba(199,161,92,0), rgba(199,161,92,0.5) 10%, rgba(199,161,92,0.5) 90%, rgba(199,161,92,0)); }
.buy-steps li { position: relative; text-align: center; padding: 0 12px; display: flex; flex-direction: column; align-items: center; }
.bs-num { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; background: var(--paper); border: 1px solid rgba(199,161,92,0.55); color: var(--gold); font-family: var(--serif); font-size: 15px; letter-spacing: 0.04em; transition: all 0.4s var(--ease); }
.buy-steps li:first-child .bs-num { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 10px 24px -10px rgba(199,161,92,0.8); }
.buy-steps li:hover .bs-num { background: var(--pine); border-color: var(--pine); color: #fff; }
.buy-steps b { display: block; margin: 18px 0 8px; font-size: 14.5px; font-weight: 600; color: var(--pine); letter-spacing: 0.05em; }
.buy-steps p { font-size: 12.5px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; }

.bs-card { width: 96px; height: 96px; margin: auto auto 0; padding: 7px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 26px -18px rgba(14,36,27,0.55); transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); }
.bs-card img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 6px; }
.buy-steps li:hover .bs-card { transform: translateY(-3px); border-color: rgba(199,161,92,0.6); }
.bs-card-art { padding: 0; border-color: rgba(199,161,92,0.35); background: linear-gradient(160deg, #FDFBF6 0%, var(--paper-2) 100%); overflow: hidden; }
.bs-card-art svg { width: 100%; height: 100%; display: block; }

@keyframes bsCoinDrop {
  0% { transform: translateY(-14px); opacity: 0; }
  18% { opacity: 1; }
  50% { transform: translateY(0); }
  64% { transform: translateY(-6px); }
  78%, 100% { transform: translateY(0); opacity: 1; }
}
@keyframes bsTickDraw {
  0%, 32% { stroke-dashoffset: 26; }
  58%, 100% { stroke-dashoffset: 0; }
}
@keyframes bsFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes bsRoadRun { to { stroke-dashoffset: -20; } }
@keyframes bsTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1); }
}
.bs-coin { animation: bsCoinDrop 3.2s var(--ease) infinite; transform-origin: center; }
.bs-tick { stroke-dasharray: 26; stroke-dashoffset: 26; animation: bsTickDraw 3.2s var(--ease) infinite; }
.bs-parcel { animation: bsFloat 3s ease-in-out infinite; transform-origin: center; }
.bs-road { stroke-dasharray: 5 5; animation: bsRoadRun 1.4s linear infinite; }
.bs-spark { animation: bsTwinkle 2.6s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .bs-coin, .bs-tick, .bs-parcel, .bs-road, .bs-spark { animation: none; }
  .bs-tick { stroke-dashoffset: 0; }
}

.buy-contact { display: flex; align-items: center; gap: 34px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 22px 30px; }
.buy-lottery { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; padding: 16px 24px; border: 1px solid rgba(199,161,92,0.42); border-left: 3px solid var(--gold); border-radius: 12px; background: linear-gradient(90deg, rgba(199,161,92,0.14), rgba(199,161,92,0.04)); }
.bl-badge { flex: 0 0 auto; padding: 6px 15px; border-radius: 999px; background: var(--gold); color: #fff; font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; }
.bl-txt { flex: 1 1 auto; min-width: 0; }
.bl-txt b { display: block; font-size: 15px; color: var(--pine); letter-spacing: 0.04em; }
.bl-txt p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.bl-icon { flex: 0 0 auto; width: 30px; height: 30px; color: var(--gold); opacity: 0.85; }
.bc-qr { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0; }
.bc-qr-img { flex: 0 0 auto; width: 92px; height: 92px; padding: 6px; background: #fff; border-radius: 8px; box-shadow: 0 8px 20px -8px rgba(14,36,27,0.25); }
.bc-qr-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bc-qr-txt b { display: block; font-size: 15px; color: var(--pine); letter-spacing: 0.06em; margin-bottom: 6px; }
.bc-qr-txt p { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin: 0; }
.bc-sep { flex: 0 0 auto; width: 1px; align-self: stretch; background: var(--line); }
.bc-phone { flex: 0 0 auto; text-align: right; }
.bc-phone span { display: block; font-size: 11.5px; letter-spacing: 0.22em; color: var(--muted); margin-bottom: 4px; }
.bc-phone strong { display: block; font-family: var(--serif); font-size: 25px; font-weight: 600; color: var(--gold); letter-spacing: 0.04em; line-height: 1.2; }
.bc-phone em { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 6px; letter-spacing: 0.04em; }

@media (max-width: 900px) {
  .buy-block { padding: 38px 26px 32px; }
  .buy-steps { grid-template-columns: repeat(2, 1fr); gap: 30px 0; }
  .buy-steps::before { display: none; }
  .buy-steps li:nth-child(5) { grid-column: 1 / -1; }
  .buy-lottery { flex-wrap: wrap; }
  .bl-txt { flex: 1 1 200px; }
  .buy-contact { flex-direction: column; align-items: stretch; gap: 20px; padding: 22px; }
  .bc-sep { width: auto; height: 1px; align-self: auto; }
  .bc-phone { text-align: left; }
}
@media (max-width: 640px) {
  .buy-block { padding: 34px 20px 26px; }
  .buy-head { margin-bottom: 34px; }
  .buy-head h3 { font-size: 23px; }
  .buy-steps { grid-template-columns: 1fr; gap: 0; margin-bottom: 32px; }
  .buy-steps li { display: grid; grid-template-columns: 42px 1fr; column-gap: 16px; text-align: left; padding: 0 0 26px; }
  .buy-steps li:nth-child(5) { grid-column: auto; }
  .buy-steps li::before { content: ""; position: absolute; left: 20px; top: 46px; bottom: 4px; width: 1px; background: linear-gradient(180deg, rgba(199,161,92,0.55), rgba(199,161,92,0.12)); }
  .buy-steps li:last-child::before { display: none; }
  .bs-num { grid-row: 1 / span 2; width: 42px; height: 42px; font-size: 13px; }
  .buy-steps b { margin: 10px 0 4px; font-size: 14px; }
  .buy-steps p { margin: 0; }
  .bs-card { grid-column: 2; width: 84px; height: 84px; margin: 12px 0 0; }
  .bl-icon { display: none; }
  .buy-lottery { padding: 14px 16px; gap: 12px; }
  .bl-badge { padding: 5px 12px; font-size: 12px; }
  .bc-qr-img { width: 80px; height: 80px; }
}

/* ============================================================
   产品详情页 v2 · 顶部 / 主视觉 / 文档区 / 图集
   （追加覆盖上面旧版 pd-* 规则）
   ============================================================ */

/* --- 顶部面包屑条 --- */
.pd-topbar { background: var(--pine-3); padding: 110px 0 24px; }
.pd-topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.pd-topbar-tag { font-size: 11.5px; letter-spacing: 0.26em; color: var(--gold); opacity: 0.8; }
.pd-topbar .crumbs { font-size: 12.5px; }
.pd-topbar .crumbs span { color: #fff; opacity: 0.9; }

/* --- 主视觉两栏 --- */
.pd-layout { align-items: stretch; padding: 40px 0 74px; }

/* 相册：白色裱框 */
.album-frame { padding: 16px; background: #fff; border: 1px solid var(--line); }
.album-stage { border: none; background: #fff; }
.album-slide img { object-fit: contain; }
.album-badge { top: 0; left: 0; font-size: 11px; letter-spacing: 0.22em; padding: 7px 14px; background: var(--pine-3); color: var(--gold-2); }
.album-counter { bottom: 14px; right: 14px; border-radius: 999px; padding: 8px 15px; background: rgba(10,28,20,0.72); box-shadow: 0 6px 18px -10px rgba(10,28,20,0.7); backdrop-filter: blur(8px); }
.album-nav { width: 42px; height: 42px; background: rgba(255,255,255,0.94); border: 1px solid var(--line); box-shadow: none; opacity: 0; }
.album-nav.prev { left: 12px; }
.album-nav.next { right: 12px; }
.album-nav:hover { background: var(--pine); border-color: var(--pine); }
.album-thumbs { margin-top: 10px; gap: 8px; }
.thumb { border-color: var(--line); }
.thumb.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.thumb:hover { border-color: var(--gold); }

/* 右栏 */
.pd-info { display: flex; flex-direction: column; }
.pd-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 11.5px; letter-spacing: 0.26em; color: var(--muted); }
.pd-eyebrow .pd-brand { color: var(--gold); letter-spacing: 0.3em; }
.pd-eyebrow i { width: 26px; height: 1px; background: var(--line); }
.pd-info h1 { font-size: clamp(26px, 2.9vw, 37px); line-height: 1.36; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 12px; }
.pd-tagline { font-size: 15px; line-height: 1.85; color: var(--muted); margin-bottom: 24px; max-width: 30em; }

.pd-trust { display: flex; list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pd-trust li { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px 0; font-size: 12.5px; letter-spacing: 0.1em; color: var(--pine); }
.pd-trust li + li { border-left: 1px solid var(--line); }
.pd-trust svg { width: 16px; height: 16px; flex: none; color: var(--gold); }

.pd-price-row { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 26px 28px; background: var(--pine); margin-bottom: 26px; }
.pd-price-main { display: flex; align-items: baseline; gap: 4px; flex: none; flex-wrap: wrap; }
.pd-price-cur { font-family: var(--serif); font-size: 18px; color: var(--gold-2); opacity: 0.9; }
.pd-price { font-family: var(--serif); font-size: clamp(34px, 3.4vw, 44px); line-height: 0.86; color: var(--gold-2); letter-spacing: 0.01em; }
.pd-price-old { align-self: center; margin-left: 16px; font-family: var(--serif); font-size: 15px; color: rgba(255,255,255,0.7); text-decoration: line-through; text-decoration-color: rgba(255,255,255,0.45); letter-spacing: 0.02em; }
.pd-price-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-left: 20px; border-left: 1px solid var(--line-dark); text-align: right; }
.pd-price-unit { font-size: 13px; color: rgba(255,255,255,0.78); letter-spacing: 0.08em; }
.pd-price-note { font-size: 11px; color: rgba(255,255,255,0.42); letter-spacing: 0.06em; }

.pd-specs { margin: 0 0 26px; border-top: 1px solid var(--line); }
.pd-specs > div { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pd-specs dt { flex: 0 0 54px; font-size: 11.5px; letter-spacing: 0.22em; color: var(--muted); }
.pd-specs dd { margin: 0; font-size: 14px; color: var(--text); letter-spacing: 0.02em; }

.pd-actions { margin-bottom: 26px; }
.pd-actions .btn { min-height: 52px; }
.pd-actions .btn-gold { flex: 1.6 1 0; }
.pd-actions .btn-line { flex: 1 1 0; }

.pd-service { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.pd-service > div { min-width: 0; }
.pd-service > div b { display: block; font-size: 12.5px; font-weight: 600; color: var(--pine); letter-spacing: 0.04em; margin-bottom: 5px; white-space: nowrap; }
.pd-service > div b svg { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2.5px; color: var(--gold); }
.pd-service > div span { display: block; padding-left: 21px; font-size: 10.5px; color: var(--muted); letter-spacing: 0; white-space: nowrap; }
.pd-service > div + div { padding-left: 12px; border-left: 1px solid var(--line); }

/* --- Tabs 区 --- */
.pd-tabs { border-top: 1px solid var(--line); padding: 56px 0 96px; }
.tab-bar { margin-bottom: 44px; }
.tab-bar button { padding: 15px 26px; font-size: 15.5px; letter-spacing: 0.16em; }
.tab-bar button:first-child { padding-left: 0; }

/* --- 产品介绍：文档 + 侧栏 --- */
.pd-doc { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.pd-paper { padding: 48px 54px; background: #fff; border: 1px solid var(--line); }
.pd-paper .prose { max-width: none; font-size: 15.5px; line-height: 2; color: var(--text); }
.pd-paper .prose p { margin: 0 0 16px; font-size: 15.5px; line-height: 2; }
.pd-paper .prose p:first-child { font-family: var(--serif); font-size: 20px; letter-spacing: 0.04em; color: var(--pine); line-height: 1.7; margin-bottom: 10px; }
.pd-paper .prose p:first-child b { font-weight: 600; }
.pd-paper .prose b { color: var(--pine); font-weight: 600; }
.pd-paper .prose h3 { position: relative; font-size: 18px; letter-spacing: 0.08em; color: var(--pine); margin: 40px 0 16px; padding-left: 16px; line-height: 1.6; }
.pd-paper .prose h3::before { content: ""; position: absolute; left: 0; top: 0.34em; bottom: 0.34em; width: 2px; background: var(--gold); }
.pd-paper .prose img { margin: 26px auto; border-radius: 0; }
.pd-paper .prose table { margin: 24px 0; }
.pd-paper .prose table td, .pd-paper .prose table th { padding: 11px 14px; font-size: 13.5px; }

.pd-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.pd-note svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--gold); }
.pd-note p { margin: 0; font-size: 12.5px; line-height: 1.9; color: var(--muted); letter-spacing: 0.02em; }

.pd-aside { position: sticky; top: 104px; display: grid; gap: 18px; }
.pd-side { padding: 26px 24px; background: #fff; border: 1px solid var(--line); }
.pd-side .kicker { font-size: 10.5px; letter-spacing: 0.36em; }
.pd-side .kicker::before { width: 22px; }
.pd-side h4 { font-size: 18px; letter-spacing: 0.06em; color: var(--pine); margin: 12px 0 16px; }
.pd-side .pd-specs { margin-bottom: 0; }
.pd-side .pd-specs > div { padding: 9px 0; gap: 10px; }
.pd-side .pd-specs dt { flex: 0 0 40px; font-size: 11px; letter-spacing: 0.18em; }
.pd-side .pd-specs dd { font-size: 13px; }
.pd-side-price { font-family: var(--serif); color: var(--gold); font-size: 15px !important; }

.pd-side-dark { background: var(--pine); border-color: var(--pine); text-align: center; }
.pd-side-dark .pd-side-qr { width: 178px; height: 178px; padding: 10px; margin: 0 auto 20px; border-radius: 3px; box-shadow: 0 18px 40px -24px rgba(0,0,0,0.9); }
.pd-side-dark .kicker { color: var(--gold-2); }
.pd-side-dark .kicker::before { background: var(--gold-2); }
.pd-side-dark h4 { color: #fff; }
.pd-side-dark p { font-size: 12.5px; line-height: 1.85; color: rgba(255,255,255,0.6); margin: 0 0 18px; }
.pd-side-qr { width: 148px; height: 148px; padding: 8px; background: #fff; margin: 0 0 18px; }
.pd-side-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pd-side-tel { display: block; font-family: var(--serif); font-size: 21px; letter-spacing: 0.04em; color: var(--gold-2); line-height: 1.3; }
.pd-side-time { display: block; font-size: 11.5px; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin-top: 6px; }

/* --- 图集预览 --- */
.pd-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pd-shot { margin: 0; background: #fff; border: 1px solid var(--line); transition: border-color 0.4s var(--ease); }
.pd-shot a { display: block; position: relative; padding-top: 125%; overflow: hidden; background: var(--paper-2); cursor: zoom-in; }
.pd-shot img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 12px; object-fit: contain; transition: transform 0.6s var(--ease); }
.pd-shot:hover { border-color: rgba(199,161,92,0.65); }
.pd-shot:hover img { transform: scale(1.05); }
.pd-shot figcaption { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); }
.pd-shot figcaption b { font-family: var(--serif); font-size: 12.5px; font-weight: 600; color: var(--gold); letter-spacing: 0.1em; }
.pd-shot figcaption span { font-size: 12px; color: var(--muted); letter-spacing: 0.06em; }

/* --- 图文详情（长图通栏） --- */
.pd-gallery-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 44px; }
.pd-detail { max-width: 880px; margin: 0 auto; padding-top: 44px; border-top: 1px solid var(--line); }
.pd-long { margin: 0; background: #fff; }
.pd-long img { display: block; width: 100%; height: auto; }
.pd-long + .pd-long { margin-top: 0; }
@media (max-width: 1024px) { .pd-gallery-3 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) {
  .pd-gallery-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 30px; }
  .pd-detail { padding-top: 30px; }
}

/* --- 响应式 --- */
@media (max-width: 1024px) {
  .pd-layout { gap: 40px; }
  .pd-doc { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pd-aside { position: static; grid-template-columns: 1fr 1fr; }
  .pd-paper { padding: 38px 32px; }
  .pd-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .pd-topbar { padding: 100px 0 20px; }
  .pd-topbar-tag { display: none; }
  .pd-layout { padding: 32px 0 56px; }
  .pd-service { margin-top: 24px; }
}
@media (max-width: 720px) {
  .pd-paper { padding: 28px 22px; }
  .pd-paper .prose { font-size: 15px; }
  .pd-paper .prose p { font-size: 15px; }
  .pd-paper .prose p:first-child { font-size: 18px; }
  .pd-aside { grid-template-columns: 1fr; }
  .pd-tabs { padding: 40px 0 70px; }
  .tab-bar { margin-bottom: 32px; }
  .pd-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .pd-shot figcaption { padding: 9px 10px; }
}
@media (max-width: 560px) {
  .album-frame { padding: 10px; }
  .pd-trust li { font-size: 11.5px; gap: 5px; letter-spacing: 0.04em; }
  .pd-trust svg { width: 14px; height: 14px; }
  .pd-price-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; }
  .pd-price-side { align-items: flex-start; text-align: left; padding-left: 0; border-left: none; flex-direction: row; gap: 12px; align-items: baseline; flex-wrap: wrap; }
  .pd-service { grid-template-columns: 1fr; gap: 0; }
  .pd-service > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .pd-service > div + div { padding-left: 0; border-left: none; }
  .pd-service > div:last-child { border-bottom: none; }
}

/* ---------- 商城频道页：左栏目 + 右产品 ---------- */
.shop-grid { display: grid; grid-template-columns: 218px minmax(0, 1fr); gap: 30px; align-items: start; }
.shop-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; }
.shop-side-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 24px 20px;
  box-shadow: 0 1px 2px rgba(23,42,34,0.04), 0 12px 30px -20px rgba(23,42,34,0.14);
}
.shop-side-card h3 { font-family: var(--serif); font-size: 21px; color: var(--ink); margin: 8px 0 0; letter-spacing: 0.02em; }
.ss-group + .ss-group { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.ss-parent {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--serif); font-weight: 600; font-size: 16.5px; color: var(--pine);
  text-decoration: none; padding: 2px 0;
}
.ss-parent::before {
  content: ""; flex: none; width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  transition: height 0.3s var(--ease);
}
.ss-parent:hover::before { height: 19px; }
.ss-parent .arr {
  margin-left: auto; font-style: normal; font-size: 12px; letter-spacing: 0.08em;
  color: var(--muted); opacity: 0.75; transition: all 0.3s var(--ease);
}
.ss-parent:hover .arr { color: var(--gold); opacity: 1; transform: translateX(3px); }
.ss-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; margin-top: 8px; }
.ss-links a {
  position: relative; display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted);
  text-decoration: none; padding: 5px 0 5px 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color 0.25s var(--ease);
}
.ss-links a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px;
  border-radius: 50%; background: rgba(20,53,40,0.16); transition: all 0.25s var(--ease);
}
.ss-links a:hover { color: var(--pine); }
.ss-links a:hover::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(199,161,92,0.14); }
.shop-side-dark { background: var(--pine); border-color: var(--pine); text-align: center; }
.shop-side-dark h3 { color: #fff; }
.shop-side-dark p { font-size: 12.5px; color: rgba(255,255,255,0.66); margin: 6px 0 14px; }
.sd-qr { width: 150px; height: 150px; margin: 0 auto; background: #fff; border-radius: 10px; padding: 10px; }
.sd-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sd-tel {
  display: inline-block; margin-top: 14px; font-family: var(--serif); font-size: 17px;
  color: var(--gold-2); text-decoration: none; letter-spacing: 0.04em;
}
.shop-pgrid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.shop-pgrid .p-card-media { padding-top: 96%; }
.shop-pgrid .p-card-media img { top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 10px); }
.shop-main .sec-head { margin-bottom: 26px; }
@media (max-width: 1024px) {
  .shop-grid { grid-template-columns: 1fr; gap: 28px; }
  .shop-side { position: static; }
  .shop-pgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .shop-pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

/* 商城页 4 列卡片：收紧内边距与价格/按钮，避免窄卡片换行 */
.shop-pgrid .p-card-body { padding: 16px 16px 18px; }
.shop-pgrid .p-card h3 { font-size: 15px; }
.shop-pgrid .p-card-brand { letter-spacing: 0.18em; font-size: 11px; margin-bottom: 6px; }
.shop-pgrid .p-card-brand::before { width: 12px; margin-right: 6px; }
.shop-pgrid .p-card-foot { padding-top: 12px; gap: 8px; }
.shop-pgrid .p-price { font-size: 19px; }
.shop-pgrid .p-price::first-letter { font-size: 13px; }
.shop-pgrid .p-card-qr { padding: 7px 11px; font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; gap: 4px; }

@media (max-width: 1024px) {
  .shop-side { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
}
@media (max-width: 720px) {
  .shop-side { grid-template-columns: 1fr; order: 2; }
  .shop-main { order: 1; }
  .shop-side-card { padding: 20px 18px; }
  .sd-qr { width: 130px; height: 130px; }
}

/* 窄侧栏：kicker 收紧字距，避免贴边 */
.shop-side-card .kicker { letter-spacing: 0.16em; font-size: 10.5px; }

/* 商城页头部收敛：侧栏小标签 + 主区简洁标题 */
.shop-side-card { padding: 0 20px 22px; }
.shop-side-dark { padding: 24px 20px 22px; }
.side-head { display: flex; align-items: center; gap: 10px; padding: 22px 0 14px; border-bottom: 1px solid var(--line); }
.side-head h3 {
  margin: 0; font-family: var(--serif); font-size: 15px; font-weight: 600;
  letter-spacing: 0.12em; color: var(--pine); line-height: 1;
}
.side-head h3::before {
  content: ""; display: inline-block; width: 16px; height: 1.5px;
  background: var(--gold); vertical-align: middle; margin-right: 8px;
}
.side-head .side-count { margin-left: auto; font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }

.shop-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-top: 22px; padding-bottom: 16px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.shop-head .kicker { font-size: 10.5px; letter-spacing: 0.3em; }
.shop-head .kicker::before { width: 22px; }
.shop-head h2 { font-family: var(--serif); font-size: 28px; line-height: 1.2; letter-spacing: 0.04em; color: var(--ink); margin: 9px 0 0; }
.shop-head-r { font-size: 12px; letter-spacing: 0.08em; color: var(--muted); white-space: nowrap; }
.side-head + .ss-group { margin-top: 16px; padding-top: 0; border-top: none; }

/* 主区标题单行，字号与侧栏同一层级 */
.shop-section { padding: 26px 0 88px; }
.shop-head { padding: 22px 0 12px; margin-bottom: 18px; align-items: center; }
.side-head { padding: 22px 0 12px; }
.side-head h3 { line-height: 25px; }
.shop-head-l { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.shop-head h2 { font-size: 21px; margin: 0; letter-spacing: 0.06em; }
.shop-head-r { font-size: 11.5px; }
.side-head h3 { font-size: 14px; }
.side-head .side-count { font-size: 10.5px; }

/* 移动端 hero 顶部留白收紧（header 仅 64px，原 150px 过空） */
@media (max-width: 720px) {
  .blog-hero { padding: 96px 0 30px; }
  .shop-section { padding: 22px 0 64px; }
}

/* 详情页服务承诺行：窄屏两列 */
@media (max-width: 760px) {
  .pd-service { grid-template-columns: repeat(2, 1fr); gap: 18px 10px; }
  .pd-service > div + div { padding-left: 0; border-left: 0; }
  .pd-service > div:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--line); }
}

/* 只有一页内容时不显示分页器（:has 不支持则退回原样，不影响功能） */
.blog-pager:not(:has(> a.listpage + a.listpage)) { display: none; }