/* 京小巴官网 —— 单文件样式,无外部字体、无外部依赖。
   版式:商城骨架(单条绿色导航条:品牌+栏目+搜索 → 浅灰内容区白卡 → 深绿页脚),
   参考用户老商城 s.kinyooba.top 的实测版式(2026-10-14 裁定整体重构)。
   配色:园艺绿 #2e9e5b;灰阶沿用商城实测的 Element 灰阶。
   设计:docs/设计-官网界面商城化重构-2026-10-14.md */

:root {
  --green: #2e9e5b;
  --green-dark: #24824a;
  --green-deep: #1d3b2a;
  --green-tint: #e9f5ee;
  --ink: #303133;
  --ink-soft: #606266;
  --ink-mute: #909399;
  --line: #e4e7ed;
  --bg: #f7f7f7;
  --card: #ffffff;
  --radius: 8px;
  --shadow: 0 1px 6px rgba(0, 0, 0, .06);
  --shadow-lift: 0 6px 18px rgba(0, 0, 0, .10);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.7;
  font-size: 15px;
}

img, video { max-width: 100%; height: auto; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: none; }

/* 宽屏(2026-10-14 用户裁定):内容区吃满屏幕宽度的 90%,不再锁 1200px。
   阅读型区块(文章正文/评论区/视频详情)在各自的类里另设可读上限。 */
.container { width: 90%; margin: 0 auto; padding: 0 16px; }

/* ============ 单条绿色导航条:品牌(左) + 栏目 + 搜索(右) ============
   2026-10-16 用户裁定:白底顶栏并进导航条 —— 品牌在「首页」左侧、搜索
   在「关于我们」右侧;顶栏的养花交流/联系我们与栏目重复,删。
   设计:docs/设计-官网导航条合并-2026-10-16.md */
.mainnav { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); }
.mainnav__row { display: flex; align-items: center; flex-wrap: wrap; }
.mainnav__brand {
  display: flex; align-items: center; gap: 9px; margin-right: 8px;
  font-size: 20px; font-weight: 800; letter-spacing: 1px; color: #fff;
  white-space: nowrap; min-width: 0;
}
.mainnav__brand span { overflow: hidden; text-overflow: ellipsis; }
/* 全局 a:hover 特异性更高,不显式压住的话品牌 hover 会变深绿、绿底上看不见 */
.mainnav__brand:hover { color: #fff; opacity: .88; }
.mainnav__logo { width: 32px; height: 32px; object-fit: contain; }
.mainnav__links { display: flex; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.mainnav__links a {
  display: block; padding: 12px 22px; color: rgba(255, 255, 255, .92);
  font-size: 16px; font-weight: 600;
}
.mainnav__links a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.mainnav__links a.is-current { background: rgba(255, 255, 255, .20); color: #fff; }
.mainnav__search { margin-left: auto; display: flex; padding: 8px 0 8px 12px; }
.mainnav__search input {
  width: 220px; height: 34px; padding: 0 12px; font-size: 14px;
  border: none; border-radius: 6px 0 0 6px; outline: none; color: var(--ink);
}
.mainnav__search button {
  height: 34px; padding: 0 18px; border: none; border-radius: 0 6px 6px 0;
  background: #fff; color: var(--green-dark); font-size: 14px; font-weight: 600; cursor: pointer;
}
.mainnav__search button:hover { background: var(--green-tint); color: var(--green-deep); }
.mainnav__toggle {
  display: none; background: transparent; border: none; color: #fff;
  font-size: 16px; padding: 10px 0; cursor: pointer;
}
@media (max-width: 860px) {
  .mainnav__toggle { display: block; }
  .mainnav__links { display: none; width: 100%; flex-direction: column; padding-bottom: 8px; order: 5; }
  .mainnav__links.is-open { display: flex; }
  .mainnav__search input { width: 150px; }
}
@media (max-width: 640px) {
  .mainnav__brand { font-size: 17px; }
  .mainnav__search { order: 6; flex-basis: 100%; margin-left: 0; padding: 0 0 10px; }
  .mainnav__search input { flex: 1; width: auto; min-width: 0; }
}

/* ============ 主体分节 ============ */
.site-main { min-height: 55vh; }
.section { padding: 32px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.section-head h2 { margin: 0; font-size: 22px; }
.section-head h2::before {
  content: ""; display: inline-block; width: 4px; height: 18px; margin-right: 10px;
  background: var(--green); border-radius: 2px; vertical-align: -2px;
}
.section-head a { font-size: 14px; color: var(--ink-mute); }
.section-head a:hover { color: var(--green); }
.section__lead { color: var(--ink-soft); margin: -8px 0 20px; }

/* 栏目横幅(商城的类目 banner 位):深绿渐变整幅,标题+一句话 */
.page-hero {
  background: linear-gradient(135deg, var(--green-deep) 0%, var(--green-dark) 55%, var(--green) 100%);
  color: #fff; padding: 30px 0;
}
.page-hero h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: 1px; }
.page-hero p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .85); }

.grid { display: grid; gap: 16px; }
/* auto-fill + minmax:列数随容器宽度自动增减(宽屏 90% 下 5~7 列,窄屏自己降),
   不再按断点写死列数 —— 那套断点在 90% 容器下会留出大片空白。 */
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* 首页两块网格(2026-10-17 用户裁定):宽屏一行 5 卡、窄屏一行 3 卡 ——
   两档写死,不用 auto-fill(连续自适应会给出 4+1 的破行)。
   SSR 恒渲染 5 张,窄屏把第 4/5 张收起来(纯展示裁剪,HTML 里都在);
   收起规则只挂首页两个 id —— /news 列表页共用 .grid--posts,不能截它。 */
.grid--posts { grid-template-columns: repeat(3, 1fr); gap: 20px; }
#home-videos > :nth-child(n+4),
#home-articles > :nth-child(n+4) { display: none; }
@media (min-width: 1440px) {
  .grid--posts { grid-template-columns: repeat(5, 1fr); }
  #home-videos > :nth-child(n+4),
  #home-articles > :nth-child(n+4) { display: block; }
}
@media (max-width: 720px) {
  .grid--posts { grid-template-columns: 1fr; }
}

/* ============ 产品卡 ============ */
.card {
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.card:hover { box-shadow: var(--shadow-lift); }
.card img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; background: #f2f4f5; display: block; }
.card h3 {
  font-size: 14px; font-weight: 600; margin: 10px 12px 4px; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.5;
}
.card p {
  font-size: 13px; color: var(--ink-mute); margin: 0 12px 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__sub {
  align-self: flex-start; margin: 10px 12px 0; padding: 1px 8px; font-size: 12px;
  color: var(--green); background: var(--green-tint); border-radius: 4px;
}
/* ============ 文章卡(养花交流列表 / 首页文章区) ============
   内容卡不是产品卡:16:9 横封面 + 标签角标 + 两行标题 + 摘要 + 虚线脚
   (日期/阅读量 | 悬停浮现「阅读全文」),悬停整卡上浮、封面微放大。 */
.card--post:hover {
  transform: translateY(-3px);
  border-color: rgba(46, 158, 91, .45);
}
.card__media {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  background: linear-gradient(135deg, var(--green-tint), #f4f9f6);
}
.card__media img {
  display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; transition: transform .35s ease;
}
.card--post:hover .card__media img { transform: scale(1.06); }
.card__media--ph {
  display: flex; align-items: center; justify-content: center;
  height: 100%; font-size: 42px; opacity: .5;
}
.card__chip {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  padding: 2px 10px; font-size: 12px; color: #fff;
  background: rgba(46, 158, 91, .92); border-radius: 4px; max-width: 70%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card__body { flex: 1; padding: 14px 16px 4px; }
.card__body h2, .card__body h3 {
  font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--ink);
  margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  transition: color .15s ease;
}
.card--post:hover .card__body h2, .card--post:hover .card__body h3 { color: var(--green-dark); }
.card__body p {
  font-size: 13px; color: var(--ink-mute); margin: 0; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 16px 0; padding: 9px 0 12px;
  border-top: 1px dashed var(--line); font-size: 12px; color: var(--ink-mute);
}
.card__meta time { font-size: 12px; color: var(--ink-mute); margin: 0; }
.card__more {
  color: var(--green); font-weight: 600; opacity: 0; transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.card--post:hover .card__more { opacity: 1; transform: none; }

/* ============ 首页 banner 与服务条 ============ */
.hero {
  background:
    radial-gradient(720px 300px at 85% -20%, rgba(255, 255, 255, .18), transparent 60%),
    linear-gradient(135deg, var(--green-deep) 0%, var(--green-dark) 55%, var(--green) 100%);
  color: #fff; padding: 56px 0 48px;
}
.hero h1 { font-size: 32px; margin: 0 0 12px; letter-spacing: 1px; }
/* 800(2026-10-16 用户裁定,原 620):副题整句 ≈46 全角字符 ≈736px,
   620 装不下会折成难看的短尾行;1920 宽下 hero 左列 ≈884px 能一行放下 */
.hero__lead { font-size: 16px; color: rgba(255, 255, 255, .88); max-width: 800px; margin: 0 0 26px; }
.hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 0; }
/* hero 文左图右(2026-10-14 三轮:hero 加真产品图,mi 式)。
   2026-10-19:主推产品图改正方形、整图可点进产品详情(用户裁定:首页
   第一位 = 主推产品;4:3 → 1:1)。max-width 防方形在宽列里高得离谱
   (1440 宽下列宽 ~500px,440 见方与左列文案高度平衡)。 */
.hero__split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero__media { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 18px 44px rgba(0, 0, 0, .28); max-width: 440px; justify-self: end; }
.hero__media-link { display: block; }
.hero__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
@media (max-width: 800px) { .hero__split { grid-template-columns: 1fr; gap: 24px; } .hero__media { max-width: none; justify-self: stretch; } }

/* ============ 首页实拍图集带:1 大 + 4 小图块墙,字叠图上 ============ */
.showcase {
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  grid-auto-rows: 230px; gap: 14px;
}
.showcase a { position: relative; display: block; overflow: hidden; border-radius: 10px; background: #e5ece7; }
.showcase__main { grid-row: span 2; }
.showcase img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.showcase a:hover img { transform: scale(1.04); }
.showcase__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 26px 16px 12px; color: #fff;
  background: linear-gradient(transparent, rgba(16, 32, 22, .72));
  display: flex; align-items: baseline; gap: 10px; min-width: 0;
}
.showcase__cap strong { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.showcase__cap em { font-style: normal; font-size: 13px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.showcase__item .showcase__cap strong { font-size: 14px; }
@media (max-width: 860px) {
  .showcase { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .showcase__main { grid-column: span 2; grid-row: span 1; }
}

/* ============ 首页视频教程条:封面卡 + 播放浮层 + 时长角标 ============ */
/* 同 grid--posts 两档(2026-10-17 裁定):窄屏 3 列、≥1440 宽屏 5 列;
   窄屏第 4/5 张的收起规则在上面 #home-videos 一并写了。 */
.video-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (min-width: 1440px) { .video-strip { grid-template-columns: repeat(5, 1fr); } }
.video-strip__card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s ease, transform .15s ease; }
.video-strip__card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.video-strip__media { position: relative; display: block; aspect-ratio: 16 / 9; background: #10161a; overflow: hidden; }
/* 2026-10-19 根因修复(设计-官网hero主推产品与轮播设置-2026-10-19.md §5):
   原来 img 的 height:100% 对「高由内容决定」的父级解析不出,封面原始比例
   把 aspect-ratio 框撑破(竖版 640×1137 实测框高 434px,横版才 137px)。
   绝对定位断开「img 撑高父级」回路 —— 横竖版一律 16:9 裁切,框高只由
   aspect-ratio 决定。 */
.video-strip__media img,
.video-strip__noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.video-strip__noimg { background: linear-gradient(135deg, #17251c, #10161a); }
.video-strip__play {
  position: absolute; left: 50%; top: 50%; z-index: 1; width: 52px; height: 52px;
  margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, .88);
  transition: background .15s ease, transform .15s ease;
}
.video-strip__play::before {
  content: ""; position: absolute; left: 20px; top: 15px;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--green-dark);
}
.video-strip__card:hover .video-strip__play { background: var(--green); transform: scale(1.08); }
.video-strip__card:hover .video-strip__play::before { border-left-color: #fff; }
.video-strip__dur {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  padding: 1px 8px; font-size: 12px; color: #fff; background: rgba(0, 0, 0, .62); border-radius: 4px;
}
.video-strip__title {
  padding: 12px 14px; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}

/* ============ 底部联系 CTA 带 ============ */
.cta-band { background: linear-gradient(135deg, var(--green-deep), var(--green-dark)); margin-top: 40px; }
.cta-band__row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 30px 16px;
  flex-wrap: wrap;
}
.cta-band__text h2 { color: #fff; font-size: 22px; margin: 0 0 4px; }
.cta-band__text p { color: rgba(255, 255, 255, .8); margin: 0; font-size: 14px; }
.cta-band__btns { display: flex; gap: 12px; margin: 0; flex-wrap: wrap; }

.btn {
  display: inline-block; padding: 10px 26px; border-radius: 6px; font-size: 15px;
  border: 1px solid transparent; cursor: pointer; transition: all .15s ease;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: #fff; color: var(--green-dark); font-weight: 600; }
.btn--primary:hover { background: var(--green-tint); color: var(--green-deep); }
.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .65); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.svc {
  background: var(--card); border-bottom: 1px solid var(--line);
}
.svc__row { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .svc__row { grid-template-columns: repeat(2, 1fr); } }
.svc__item { text-align: center; padding: 16px 8px; font-size: 14px; color: var(--ink-soft); }
.svc__item strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.svc__item + .svc__item { border-left: 1px solid var(--line); }
@media (max-width: 720px) { .svc__item:nth-child(3) { border-left: none; } }

/* 面包屑已全站撤除(2026-10-15 用户裁定:路径显示没意义);
   详情页 BreadcrumbList JSON-LD 同步撤,不描述看不见的路径。 */

/* ============ 产品列表(平铺,分类做卡上角标) ============ */
.results-bar { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; color: var(--ink-soft); }
.results-bar strong { color: var(--green); }
/* 卡片价格(2026-10-14 第三批解禁):绿字右下,弱于标题强于正文 */
.card__price { display: block; margin-top: 6px; color: var(--green); font-weight: 600; font-size: 15px; }

/* ============ 产品详情:三段宽度定死 + 右列 sticky(2026-10-15 重构)============
   用户裁定:上一版重叠的根因是右列没定宽,内容把宽度撑出去盖住大图。
   比例(2026-10-15 二次裁定,按 1920 屏 × 容器 90% = 1728 量):
   左1 缩略图列定宽 160px(2026-10-15 三次裁定:126 还嫌小,再放大)、右列(SKU/标题/价格)占 1/3
   (≈576px,写成 2fr/1fr 比例在任何屏宽都成立)、左2 大图弹性吃剩余
   宽度 —— 三段全部钉死,内容再长只会换行不会越界。
   布局 = 两行网格:画廊 | 信息;详情内容(左列)| 信息。右列跨两行
   + sticky 固定(参考站行为:左侧滚动时它不动);下面的详情内容
   属于左列、随页滚动。 */
.product-layout {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 28px;
  grid-template-areas: "gallery info" "sections info"; align-items: start;
}
.product__gallery { grid-area: gallery; display: flex; gap: 10px; align-items: stretch; min-width: 0; position: relative; }
/* 左1:缩略图竖排,定宽 160px,总高 = 大图高,多图内部上下滚。
   ⚠️ rail 必须**绝对定位**、不进文档流:它的内容高度(多张 156px
   缩略图)一旦超过方形大图的高,容器 align-items:stretch 会把大图
   也拉成竖版 —— 实测 7 张图时 942×1144,aspect-ratio 1/1 被覆盖
   (2026-10-15 三次裁定放大缩略图后暴露)。absolute + top/bottom:0
   让 rail 高度恒等于容器高,而容器高只由大图(square)决定。 */
.gallery-rail {
  position: absolute; top: 0; bottom: 0; left: 0; width: 160px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cfd6da transparent; padding: 2px;
}
.gallery-rail img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer; background: #f2f4f5; flex: none;
}
.gallery-rail img.is-active { border-color: var(--green); }
/* 左2:大图弹性填满剩余宽度,1:1。margin-left 给绝对定位的 rail 腾位
   (160 定宽 + 10 间距);rail 不再参与测高,大图恒方形。 */
.gallery-main {
  flex: 1 1 0; min-width: 0; margin-left: 170px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #f2f4f5; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
}
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
/* 右列:定宽 380px + sticky 固定。参数速览 + 多张 SKU 卡可能比视口高
   ⇒ 超高时内部滚动(overflow-y),sticky 才永远成立 */
.product-info {
  grid-area: info; position: sticky; top: 16px; align-self: start;
  max-height: calc(100vh - 32px); overflow-y: auto; min-width: 0;
  overscroll-behavior: contain;
}
/* 详情内容 = 左列(随页滚动);首节与画廊的间距由网格 row-gap 给,
   节与节之间保持原有 16px */
.product-sections { grid-area: sections; min-width: 0; }
.product-sections > .detail-block:first-child { margin-top: 0; }
/* ≤800px 单列:画廊 → 信息 → 详情;大图先、缩略图横排在下横向滚 */
@media (max-width: 800px) {
  .product-layout { grid-template-columns: 1fr; grid-template-areas: "gallery" "info" "sections"; }
  .product-info { position: static; max-height: none; overflow: visible; }
  .product__gallery { flex-direction: column; }
  .gallery-main { order: -1; }
  .gallery-rail { position: static; width: 100%; flex-direction: row; overflow-y: hidden; overflow-x: auto; }
  .gallery-main { margin-left: 0; }
  /* 桌面版的 img width:100% 在横排里会变成「一张图占满整条」,窄屏钉回固定小图 */
  .gallery-rail img { width: 96px; flex: none; }
}
.product-info h1 { font-size: 24px; line-height: 1.45; margin: 0 0 8px; overflow-wrap: anywhere; }
.product-info__sub { color: var(--ink-soft); font-size: 15px; margin: 0 0 12px; overflow-wrap: anywhere; }
.product-info__cat { display: inline-block; font-size: 12px; color: var(--green);
  background: var(--green-tint); border-radius: 4px; padding: 2px 10px; margin-bottom: 14px; }
/* 价格行(2026-10-14 解禁):详情页第一视觉层级,绿大字 */
.product-info__price { color: var(--green); font-size: 26px; font-weight: 700;
  margin: 0 0 12px; line-height: 1.2; }
.product-info__params { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.product-info__params dl { display: grid; grid-template-columns: 96px 1fr; gap: 0; margin: 0; }
.product-info__params dt { color: var(--ink-mute); font-size: 13px; padding: 6px 0; }
.product-info__params dd { margin: 0; font-size: 13px; color: var(--ink); padding: 6px 0; }
/* SKU 规格卡:有图左图右名,名称可换行;无图整卡居中只有名 */
.sku-cards { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.sku-card {
  display: flex; align-items: center; gap: 8px; max-width: 100%;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  padding: 6px 12px 6px 6px; font: inherit; cursor: pointer; text-align: left;
}
.sku-card:hover { border-color: var(--green); }
.sku-card.is-active { border-color: var(--green); background: var(--green-tint); }
.sku-card img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px;
  background: #f2f4f5; flex: none; }
.sku-card__name { font-size: 13px; line-height: 1.4; color: var(--ink);
  max-width: 200px; overflow-wrap: anywhere; }
.product-info__cta { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
.btn--green { background: var(--green); color: #fff; font-weight: 600; }
.btn--green:hover { background: var(--green-dark); color: #fff; }
.btn--line { background: var(--card); color: var(--green); border-color: var(--green); }
.btn--line:hover { background: var(--green-tint); color: var(--green-dark); }

.params { width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.params th, .params td { padding: 10px 14px; text-align: left; font-size: 14px;
  border-bottom: 1px solid var(--line); }
.params th { width: 38%; color: var(--ink-soft); font-weight: 500; background: #fafbfc; }
.params tr:last-child td, .params tr:last-child th { border-bottom: none; }

.feature-list { margin: 0; padding-left: 20px; }
.feature-list li { margin: 6px 0; color: var(--ink-soft); }

/* ============ 产品详情块(2026-10-14 第三批):管理端编辑的图文混排,
   位置在 参数/功能 之后、相关文章之前。文字按行纯文本;图/视频通栏;
   关联产品 = 小卡链到对方详情页。 ============ */
.pd-blocks { display: flex; flex-direction: column; gap: 14px; }
.pd-text p { margin: 0 0 8px; line-height: 1.8; color: var(--ink-soft); }
.pd-text p:last-child { margin-bottom: 0; }
.pd-figure { margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: #f2f4f5; }
.pd-figure img { display: block; width: 100%; height: auto; }
.pd-figure video { display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: contain; background: #000; }
.pd-related {
  display: inline-flex; align-items: center; gap: 10px; max-width: 360px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card);
  padding: 8px 14px 8px 8px; color: var(--ink); font-size: 14px; font-weight: 500;
}
.pd-related:hover { border-color: var(--green); color: var(--green-dark); }
.pd-related img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px;
  background: #f2f4f5; flex: none; }

.detail-block { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; margin-top: 16px; }
.detail-block h2 { font-size: 18px; margin: 0 0 12px; }
.detail-block h2::before {
  content: ""; display: inline-block; width: 4px; height: 16px; margin-right: 10px;
  background: var(--green); border-radius: 2px; vertical-align: -2px;
}
/* 相关文章行(产品详情页):标题+摘要一行,日期右对齐 */
.related-posts { display: flex; flex-direction: column; }
.related-posts__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-bottom: 1px dashed var(--line); color: var(--ink);
}
.related-posts__row:last-child { border-bottom: none; }
.related-posts__row:hover .related-posts__t { color: var(--green-dark); }
.related-posts__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.related-posts__t { font-size: 15px; font-weight: 600; transition: color .15s ease; }
.related-posts__s { font-size: 13px; color: var(--ink-mute);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.related-posts__row time { font-size: 12px; color: var(--ink-mute); white-space: nowrap; }

/* ============ 详情页两栏(文章/视频):左主栏 + 右侧栏(90% 宽屏下
   正文不再是窄条居中)。正文可读宽仍限 860px,余白留在正文与侧栏之间。 ============ */
.detail-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start;
  padding-top: 24px;
}
/* 文章详情整块居中(2026-10-16 用户裁定):860 正文 + 32 间距 + 340 侧栏
   = 1232 一体随 .container 的 margin auto 居中 —— 正文不再在 1.3k 宽列里
   贴左、与侧栏之间留大洞。视频详情不受此限(播放器保宽,同日裁定)。 */
.detail-layout:not(.detail-layout--video) { max-width: 1232px; }
.detail-main { min-width: 0; }
.detail-rail { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.rail-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.rail-card h2 { font-size: 17px; margin: 0 0 12px; }
.rail-card h2::before {
  content: ""; display: inline-block; width: 4px; height: 15px; margin-right: 9px;
  background: var(--green); border-radius: 2px; vertical-align: -2px;
}
.rail-card--contact p { white-space: pre-line; color: var(--ink-soft); font-size: 14px; margin: 0 0 14px; }
.rail-card__more { font-size: 14px; display: inline-block; margin-top: 12px; }
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li { padding: 9px 0; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 2px; }
.rail-list li:last-child { border-bottom: none; }
.rail-list a { color: var(--ink); font-size: 14px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail-list a:hover { color: var(--green-dark); }
.rail-list time { font-size: 12px; color: var(--ink-mute); }
/* 右栏更多视频:小封面竖列 */
.rail-videos { display: flex; flex-direction: column; gap: 12px; }
.rail-video { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--ink); }
.rail-video__media { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: #10161a; }
.rail-video__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rail-video__noimg { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #17251c, #10161a); }
.rail-video__dur { position: absolute; right: 5px; bottom: 5px; padding: 0 6px; font-size: 11px; color: #fff;
  background: rgba(0, 0, 0, .62); border-radius: 3px; }
.rail-video__t { font-size: 14px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rail-video:hover .rail-video__t { color: var(--green-dark); }
@media (max-width: 960px) {
  .detail-layout { grid-template-columns: 1fr; }
  .detail-rail { position: static; }
}

/* ============ 文章 ============ */
.article { max-width: 860px; margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px 32px; }
@media (max-width: 640px) { .article { padding: 20px 16px; } }
.article h1 { font-size: 26px; line-height: 1.4; margin: 8px 0 6px; }
.article__meta { color: var(--ink-mute); font-size: 14px; margin-bottom: 24px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tag { font-size: 12px; color: var(--green); background: var(--green-tint);
  border-radius: 4px; padding: 1px 8px; }
.article__cover { border-radius: var(--radius); margin: 0 0 24px; width: 100%; }

/* 主推产品卡(2026-10-19,设计:docs/设计-文章主推产品链接与组图直达
   -2026-10-19.md):正文末的确定性入口,链接在 produce() 里验过必达。 */
.article-cta { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 20px; padding: 14px 16px;
  border: 1px solid var(--green); background: var(--green-tint);
  border-radius: var(--radius); color: var(--ink); font-weight: 600; }
.article-cta__go { color: var(--green-dark); font-size: 14px; white-space: nowrap; }
.article-cta:hover .article-cta__go { text-decoration: underline; }

/* 多图块流的图块(2026-10-18 配图二期 ③,设计 §4.5):
   c1=单图全宽; c2=两列; c3=三列; 4 张(2×2 宫格)用 c2 两行表达。 */
.article-grid { display: grid; gap: 10px; margin: 0 0 24px; }
/* 产品组图包 <a> 进产品详情(2026-10-19):锚点占满格子,图已 width:100% */
.article-grid a { display: block; }
.article-grid img { width: 100%; height: 100%; object-fit: cover;
  border-radius: 8px; display: block; }
.article-grid--c1 { grid-template-columns: 1fr; }
.article-grid--c2 { grid-template-columns: 1fr 1fr; }
.article-grid--c3 { grid-template-columns: 1fr 1fr 1fr; }
.article-grid--c2 img { aspect-ratio: 4 / 3; }
.article-grid--c3 img { aspect-ratio: 4 / 3; }
@media (max-width: 640px) {
  .article-grid--c3 { grid-template-columns: 1fr; }
  /* 窄屏三列折单列后,固定 4:3 会让竖图挤爆 —— 放开比例自适应 */
  .article-grid--c3 img { aspect-ratio: auto; }
}

.prose { font-size: 16px; }
.prose h2 { font-size: 21px; margin: 30px 0 12px; border-left: 4px solid var(--green); padding-left: 12px; }
.prose h3 { font-size: 17px; margin: 22px 0 10px; }
.prose p { margin: 0 0 16px; }
.prose img { border-radius: 8px; }
.prose ul, .prose ol { padding-left: 24px; margin: 0 0 16px; }
.prose blockquote { margin: 0 0 16px; padding: 10px 16px; background: var(--green-tint);
  border-left: 4px solid var(--green); color: var(--ink-soft); border-radius: 0 8px 8px 0; }
.prose code { background: #f2f4f5; padding: 2px 6px; border-radius: 4px; font-size: 14px; }
.prose pre { background: #f2f4f5; padding: 14px; border-radius: 8px; overflow-x: auto; }

.comments { max-width: 860px; margin: 20px auto 0; }
.comments h2 { font-size: 20px; }
.comment { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-bottom: 12px; }
.comment__head { font-size: 14px; color: var(--ink-mute); margin-bottom: 4px;
  display: flex; gap: 10px; }
.comment__nick { color: var(--ink); font-weight: 600; }
.comment p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.comment-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-top: 20px; }
.comment-form label { display: block; font-size: 14px; margin: 10px 0 4px; color: var(--ink-soft); }
.comment-form input, .comment-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; font-family: inherit; outline: none; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--green); }
.comment-form textarea { min-height: 90px; resize: vertical; }
.form-hint { font-size: 13px; color: var(--ink-mute); margin: 8px 0 0; }
.form-note { font-size: 14px; color: var(--green); background: var(--green-tint);
  border-radius: 6px; padding: 8px 12px; margin: 10px 0 0; }
.form-error { color: #c0392b; font-size: 14px; margin: 10px 0 0; }
/* 蜜罐:对屏幕阅读器与浏览器都隐藏,但必须留在 HTML 里 */
.hp-field { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

/* ============ 视频 ============ */
/* 列最小值用 min(380px,100%) 而不是死值:手机 ~375px 视口下 .container
   内容宽只有 ~305px,死值 380px 会把单列撑出容器右缘(卡片右侧贴边)。
   min() 让窄屏列自动缩到容器宽,宽屏仍是 380px 起步,桌面多列不变。 */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 16px; }
/* 分类 + 搜索(GET 表单):一行排开,不竖着一摞 */
.video-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; }
.video-tools select, .video-tools input[type="search"] {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; background: var(--card); }
.video-tools input[type="search"] { flex: 1; min-width: 160px; max-width: 320px; }
.video-tools__clear { font-size: 13px; color: var(--ink-mute); }
.video-card { margin: 0; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
/* 列表卡片是封面图(播放进详情页),不再是内联 <video> */
.video-card a { display: block; }
.video-card img { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; background: #000; }
.video-card__noimg { display: block; aspect-ratio: 16 / 9; background: #10161a; }
/* 播放框统一 16:9(2026-10-15 用户裁定:不管什么比例的视频都嵌进一个
   16:9 的框里播)—— aspect-ratio 钉框,object-fit: contain 让竖版/方版
   在框内上下(左右)留黑边,页面布局不跟着视频本体比例跑。 */
.video-card video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain;
  display: block; background: #000; }
.video-card figcaption { padding: 12px 14px; }
.video-card h2 { font-size: 16px; margin: 0 0 4px; }
.video-card p { font-size: 13px; color: var(--ink-mute); margin: 0 0 6px; }
/* 卡上时长角标已随五轮对齐删除(时长只在详情页/首页条) */

/* 视频详情(在两栏 detail-layout 里;播放器吃满左栏宽) */
/* 头部间距收紧(2026-10-15 用户反馈:标题/标签/路径之间太空):
   视频详情 h1 吃掉浏览器默认大 margin,与 meta、播放器贴回来;
   detail-layout 的 24px 顶距在本页降到 12px。 */
.video-detail h1 { font-size: 24px; line-height: 1.4; margin: 0 0 6px; }
.detail-layout--video { padding-top: 12px; }
.video-detail__meta { color: var(--ink-mute); font-size: 13px; display: flex;
  gap: 12px; align-items: center; margin: 0 0 10px; }
.video-detail__player { width: 100%; display: block; background: #000;
  border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: contain; }
/* B站内嵌播放器(2026-10-18 三轮:外链详情页):iframe 与 <video> 同框同形 */
.video-detail__player--embed { border: 0; }
/* 识别不了播放器的站外视频:大封面 + 居中「去原平台观看」(不给假播放器) */
.video-detail__out { position: relative; border-radius: var(--radius); overflow: hidden;
  background: #000; aspect-ratio: 16 / 9; }
.video-detail__out img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .8; }
.video-detail__out .btn { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); }
.video-detail__desc { color: var(--ink-mute); margin-top: 12px; }

/* ============ 分页 ============ */
.pager { display: flex; gap: 14px; align-items: center; justify-content: center;
  margin-top: 24px; color: var(--ink-mute); }
.pager a { color: var(--green); }

/* ============ 常见问题独立页:问题=h2 绿条,答案按行 prose 段 ============ */
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin: 0 auto 14px; max-width: 960px; }
.faq-item h2 { font-size: 17px; margin: 0 0 10px; }
.faq-item h2::before {
  content: ""; display: inline-block; width: 4px; height: 16px; margin-right: 10px;
  background: var(--green); border-radius: 2px; vertical-align: -2px;
}
.faq-item__body { color: var(--ink-soft); font-size: 15px; }
.faq-item__body p { margin: 0 0 10px; }
.faq-item__body p:last-child { margin-bottom: 0; }
.faq-item__contact { white-space: pre-line; color: var(--ink); background: var(--green-tint);
  border-radius: 6px; padding: 10px 14px; }
.faq-item__btns { display: flex; gap: 12px; margin: 14px 0 0; flex-wrap: wrap; }

/* ============ 关于页 ============ */
.about-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 860px) { .about-layout { grid-template-columns: 1fr; } }
.about .prose { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px 28px; }
.contact-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.contact-card h2 { font-size: 17px; margin: 0 0 10px; }
.contact-card p { white-space: pre-line; color: var(--ink-soft); font-size: 14px; margin: 0; }
.contact-card .btn { margin-top: 16px; }
/* 微信二维码(2026-10-17):固定尺寸防布局抖,说明文字小一号 */
.contact-qr { margin: 16px 0 0; text-align: center; }
.contact-qr img { width: 160px; height: 160px; object-fit: contain;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.contact-qr figcaption { font-size: 12px; color: var(--ink-mute); margin-top: 6px; }

/* ============ 空态 / 404 ============ */
.empty { color: var(--ink-mute); text-align: center; padding: 36px 0; }
.p404 { text-align: center; padding: 90px 0; }
.p404 h1 { font-size: 44px; margin-bottom: 8px; }
.p404 p { color: var(--ink-soft); }

/* ============ 页脚:品牌行 + 导航行 + 备案行(三行,居中) ============ */
.site-footer { background: var(--green-deep); color: rgba(255, 255, 255, .78);
  margin-top: 48px; padding: 30px 0 18px; }
.footer__brand { display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 19px; font-weight: 700; color: #fff; }
.footer__logo { width: 32px; height: 32px; object-fit: contain;
  background: rgba(255, 255, 255, .92); border-radius: 6px; padding: 2px; }
.footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 24px;
  margin-top: 14px; font-size: 14px; }
.footer__nav a { color: rgba(255, 255, 255, .78); }
.footer__nav a:hover { color: #fff; }
.footer__legal { border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 18px;
  padding-top: 14px; font-size: 13px; text-align: center; line-height: 2; }
.footer__legal a { color: rgba(255, 255, 255, .78); }
.footer__legal a:hover { color: #fff; }
.footer__sep { margin: 0 8px; opacity: .5; }
.footer__copy { display: block; opacity: .75; }

/* ============ 首页 hero 轮播(2026-10-15,设计 §三)============
   SSR 直出全部帧,第一帧可见、其余带 hidden 属性(无 JS = 静态第一帧);
   site.js 接管自动播放与切换。配色沿用 .hero 的深绿渐变与白色文字。 */
.hero--slides { padding: 0; position: relative; overflow: hidden; }
.hero-slide { margin: 0; position: relative; }
/* hidden 属性兜一层显式 display:none:谁将来给 .hero-slide 设 display 也压不过它 */
.hero-slide[hidden] { display: none; }
/* 高度可设(2026-10-19 §3):管理端配了高度写进 --hero-slide-h,没配回落
   420;≤800px 维持 260 不动(竖屏小,固定值安全 —— 见媒体查询)。 */
.hero-slide img { display: block; width: 100%; height: var(--hero-slide-h, 420px); object-fit: cover; }
/* ---- 切换效果(2026-10-19 §3):fade=淡入(默认)/ slide=左右滑动;
   none 不加修饰类 = 现状 hidden 直切。SSR 帧带 hidden 兜底,site.js 按
   data-hero-effect 摘 hidden 交给类/位移管理 —— JS 挂了仍是第一帧静态。 ---- */
.hero--slides-fade .hero-slide {
  position: absolute; top: 0; left: 0; width: 100%;
  opacity: 0; pointer-events: none;
  transition: opacity .6s ease;
}
.hero--slides-fade .hero-slide.is-active {
  position: relative; opacity: 1; pointer-events: auto;
}
.hero--slides-slide .hero__frames {
  display: flex; transition: transform .5s ease; will-change: transform;
}
.hero--slides-slide .hero-slide { flex: 0 0 100%; min-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  /* 用户偏好优先:三种效果统一降级直切(与自动播停用同一条纪律) */
  .hero--slides-fade .hero-slide, .hero--slides-slide .hero__frames { transition: none; }
}
/* 字叠图上(参考 .showcase__cap 的底部渐变),容器宽度交给 .container */
.hero-slide__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 64px 0 36px; color: #fff;
  background: linear-gradient(transparent, rgba(16, 32, 22, .78));
}
.hero-slide__cap h1 { text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.hero-slide__t { font-size: 26px; font-weight: 700; margin: 0 0 8px; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
.hero-slide__s { font-size: 15px; color: rgba(255, 255, 255, .88); margin: 0 0 14px; max-width: 620px; }
.hero-slide__btn { margin: 0; }
.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 8px;
}
.hero__dot {
  width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, .55); cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.hero__dot.is-active { background: #fff; transform: scale(1.2); }
.hero__nav {
  position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; margin-top: -20px;
  border: none; border-radius: 50%; background: rgba(0, 0, 0, .35); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.hero__nav:hover { background: rgba(0, 0, 0, .55); }
.hero__nav--prev { left: 14px; }
.hero__nav--next { right: 14px; }
@media (max-width: 800px) {
  .hero-slide img { height: 260px; }
  .hero-slide__cap h1 { font-size: 24px; }
  .hero-slide__t { font-size: 20px; }
  .hero__nav { display: none; }  /* 窄屏手势空间小,只留圆点 */
}

/* ============ 首页 hero 视频背景(2026-10-15,设计 §三)============
   桌面静音自动循环;≤800px 与 prefers-reduced-motion 回落封面图 ——
   「桌面播手机回落」的落点就是下面两条媒体查询(设计 §三原文)。 */
/* 通栏视频区域加高到 450px(2026-10-16 用户裁定):原本高度纯由内容撑;
   flex 垂直居中让文字在加高后的横幅里不顶上边。视频 absolute inset 覆盖,
   高度跟着横幅走。 */
.hero--video {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 450px; display: flex; align-items: center;
}
.hero__video {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover;
}
/* 压暗层:白字在亮画面上也读得清(与 bg_mask_alpha 同一个理由) */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, rgba(29, 59, 42, .72), rgba(36, 130, 74, .45));
}
/* 封面回落层:与 video 同位同裁;默认不显示,媒体查询里换它上场 */
.hero__video-fallback {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; display: none;
}
.hero--video .hero__text { position: relative; z-index: 1; }
@media (max-width: 800px) {
  .hero__video { display: none; }
  .hero__video-fallback { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__video-fallback { display: block; }
}