/* TONGNIAN B1 overrides — 全部绑定真值站主题 token（app-styles.css :root），零自造色值。
   布局：导航沿用原版靠右；字体：正文 var(--family--1)=Aspekta / 标注 var(--family--2)=Roboto Mono。 */

/* —— 下拉面板：与主菜单 pill 同款玻璃材质（同变量/同圆角/同模糊/同边框），随主题明暗态自动切换 —— */
.c-header .inline_menu .menu_item { position: relative; }
.tn-sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  background: var(--header-inline-menu-background, rgba(255, 255, 255, .8));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--color--7-rgb), .05);
  border-radius: 12px;
  padding: 10px;
  min-width: 264px;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 80;
}
.c-header .menu_item:hover > .tn-sub,
.c-header .menu_item:focus-within > .tn-sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tn-sub a {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--base--text-color);
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
  font-family: var(--family--2);
  font-size: max(.75rem, min(calc(.75rem + .002 * (100vw - 27.5rem)), .8125rem));
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.tn-sub a:hover { background: var(--color--6); color: var(--base--text-color); }
/* 分组行：下拉内的轻分组标签（人群三组 + 文档区） */
.tn-sub .tn-sub-group { display: block; padding: 12px 14px 4px; margin-top: 6px; border-top: 1px solid rgba(var(--color--7-rgb), .08); font-family: var(--family--2); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--color--9); white-space: nowrap; text-align: left; }
.tn-sub .tn-sub-group:first-child { margin-top: 0; border-top: none; padding-top: 6px; }

/* —— 数字墙：深色块 = 主题墨色（同 footer 深底），白字层级 —— */
.tn-stats { background: var(--color--7); color: #fff; }
.tn-stats_inner { max-width: 1360px; margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.tn-stat .num { font-family: var(--family--1); font-size: clamp(28px, 3.2vw, 44px); font-weight: 600; line-height: 1.1; color: #fff; letter-spacing: -.02em; }
.tn-stat .lbl { margin-top: 8px; font-family: var(--family--1); font-size: 13px; font-weight: 500; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.tn-stat .note { margin-top: 4px; font-family: var(--family--2); font-size: 11px; font-weight: 400; line-height: 1.5; color: rgba(255, 255, 255, .4); }
@media (max-width: 900px) { .tn-stats_inner { grid-template-columns: repeat(2, 1fr); } }

/* —— 合规墙：浅底 = 主题 --color--8，边线 --color--4 —— */
.tn-standards { background: var(--color--8); border-top: 1px solid var(--color--4); border-bottom: 1px solid var(--color--4); }
.tn-standards_inner { max-width: 1360px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 12px 30px; align-items: center; justify-content: center; }
.tn-standards .item { font-family: var(--family--1); font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--color--9); white-space: nowrap; }
.tn-standards .item small { display: block; font-weight: 400; font-size: 10.5px; color: var(--color--9); opacity: .75; }

/* —— 知识中枢/列表卡：边线/悬停全走 token，圆角沿用主题 12px 语言 —— */
.tn-track-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .tn-track-grid { grid-template-columns: repeat(2, 1fr); } }
.tn-track-card { display: block; background: var(--base--background-color); border: 1px solid var(--color--4); border-radius: 12px; padding: 22px; text-decoration: none; color: var(--base--text-color); transition: border-color .18s ease, background-color .18s ease; }
.tn-track-card:hover { border-color: var(--color--7); background: var(--color--6); }
.tn-track-card .k { font-family: var(--family--2); font-size: 10.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--color--9); }
.tn-track-card .t { margin-top: 8px; font-family: var(--family--1); font-size: 17px; font-weight: 600; line-height: 1.35; }
.tn-track-card .d { margin-top: 6px; font-family: var(--family--1); font-size: 13px; font-weight: 400; line-height: 1.6; color: var(--color--9); }

/* —— 表格：表头浅底 + 等宽大写（沿用主题标注语言） —— */
.tn-table-wrap { overflow-x: auto; }
.tn-table { width: 100%; border-collapse: collapse; font-family: var(--family--1); font-size: 13.5px; font-weight: 400; line-height: 1.6; color: var(--base--text-color); background: var(--base--background-color); }
.tn-table th { background: var(--color--8); text-align: left; padding: 10px 14px; font-family: var(--family--2); font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--color--9); }
.tn-table td { padding: 10px 14px; border-top: 1px solid var(--color--4); vertical-align: top; }

/* —— 通用排版辅助：eyebrow 沿用 item_btn 的等宽大写惯例 —— */
.tn-eyebrow { font-family: var(--family--2); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--color--9); }
.tn-h2 { font-family: var(--family--1); font-size: 24px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--base--text-color); }
.tn-lead { font-family: var(--family--1); font-size: 15px; font-weight: 400; line-height: 1.75; color: var(--color--9); }

/* —— 产品 list 筛选器：三维度 chips（人群/技术/形式），token 绑定 —— */
.tn-filters { margin-top: 26px; display: grid; gap: 10px; }
.tn-filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tn-filter-label { min-width: 100px; font-family: var(--family--2); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color--9); }
.tn-chip { font-family: var(--family--2); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 13px; border: 1px solid var(--color--4); border-radius: 20px; background: var(--base--background-color); color: var(--base--text-color); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.tn-chip:hover { border-color: var(--color--7); }
.tn-chip.on { background: var(--color--7); border-color: var(--color--7); color: var(--color--3); }
.tn-track-card .m { margin-top: 10px; font-family: var(--family--2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color--9); }
.tn-track-card.is-hide { display: none; }
/* 产品线详情页头图 */
.c-wysiwyg .block_content > img:first-child { width: 100%; border-radius: 12px; margin-bottom: 8px; }

/* —— hgroup 页头标题：全站统一收敛字号（原主题 ~57px 偏大） —— */
.c-hgroup .heading { font-size: clamp(28px, 3vw, 44px) !important; line-height: 1.16; max-width: 880px; }
.c-hgroup .heading .text-reveal-word { font-size: inherit; }

/* —— 产品目录页：facet 侧栏 + 工具条 + program 卡（竞品目录范式，token 绑定） —— */
.tn-catalog { display: grid; grid-template-columns: 232px 1fr; gap: 34px; margin-top: 8px; }
@media (max-width: 900px) { .tn-catalog { grid-template-columns: 1fr; } }
.tn-facet input { accent-color: var(--color--7); flex: none; }
.tn-facet .cnt { margin-left: auto; font-family: var(--family--2); font-size: 11px; color: var(--color--9); }
.tn-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tn-search { flex: 1 1 200px; max-width: 300px; padding: 9px 16px; border: 1px solid var(--color--4); border-radius: 20px; background: var(--base--background-color); color: var(--base--text-color); font-family: var(--family--1); font-size: 13.5px; outline: none; }
.tn-search:focus { border-color: var(--color--7); }
.tn-count { font-family: var(--family--2); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color--9); }
.tn-clear { font-family: var(--family--2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: none; border: none; color: var(--color--9); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tn-clear:hover { color: var(--base--text-color); }
.tn-prog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1100px) { .tn-prog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .tn-prog-grid { grid-template-columns: 1fr; } }
.tn-program .t { font-size: 16px; }
.tn-program .m { margin-top: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--family--2); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--color--9); }
.tn-status { display: inline-block; padding: 2px 9px; border-radius: 20px; background: var(--color--6); color: var(--color--9); letter-spacing: .06em; }
.tn-status.ready { background: var(--color--7); color: var(--color--3); }

/* —— 目录页：粘性 facet 侧栏 + program 卡缩略图 —— */
.tn-facets { position: sticky; top: 16px; align-self: start; max-height: calc(100vh - 32px); overflow: auto; padding-right: 6px; }
.tn-program .thumb { display: block; height: 132px; border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: var(--color--6); }
.tn-program .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* —— 目录页 v3：缩略图不变形 + facet 折叠压紧 + hgroup 字号协调 —— */
.tn-program .thumb { display: block; height: 150px; border-radius: 8px; overflow: hidden; margin-bottom: 12px; background: var(--color--6); }
.tn-program .thumb img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
.tn-facet { border-top: 1px solid var(--color--4); padding: 10px 0; }
.tn-facet summary { font-family: var(--family--2); font-size: 10.5px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--color--9); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.tn-facet summary::-webkit-details-marker { display: none; }
.tn-facet summary::after { content: "+"; font-family: var(--family--2); font-size: 13px; color: var(--color--9); }
.tn-facet[open] summary::after { content: "3"; }
.tn-facet label { display: flex; gap: 7px; align-items: baseline; font-family: var(--family--1); font-size: 13px; line-height: 1.45; padding: 3px 0; cursor: pointer; color: var(--base--text-color); }
.tn-facet { display: block; }

/* —— Technology 页：图片卡（自动化产线/设备/灌装） —— */
.tn-img-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .tn-img-cards { grid-template-columns: 1fr; } }
.tn-img-card { margin: 0; background: var(--card, #fff); border: 1px solid var(--line, #e3e6e2); border-radius: 12px; padding: 10px; }
.tn-img-card img { width: 100%; height: 220px; object-fit: cover; border-radius: 8px; display: block; }
.tn-img-card figcaption { margin-top: 10px; font-family: var(--family--2); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color--9); line-height: 1.5; }

/* —— OBM 流程卡：洽谈要点 —— */
.tn-obm-flow .tn-track-card .cov { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--color--4); font-size: 12.5px; line-height: 1.55; color: var(--color--9); }
.tn-obm-flow .tn-track-card .cov b { font-family: var(--family--2); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; font-weight: 400; display: block; margin-bottom: 4px; color: var(--color--9); }

/* —— 案例库：档案卡 —— */
.tn-case { background: var(--base--background-color); border: 1px solid var(--color--4); border-radius: 12px; padding: 26px 28px; margin-bottom: 18px; }
.tn-case .case-head { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.tn-case .case-no { font-family: var(--family--2); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color--9); }
.tn-case .case-title { font-family: var(--family--1); font-size: 19px; font-weight: 600; line-height: 1.3; }
.tn-case .case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 16px; }
@media (max-width: 760px) { .tn-case .case-grid { grid-template-columns: 1fr; } }
.tn-case .case-cell { background: var(--color--8); border-radius: 8px; padding: 12px 16px; }
.tn-case .case-cell b.label { display: block; font-family: var(--family--2); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color--9); font-weight: 400; margin-bottom: 4px; }
.tn-case .case-cell span { font-size: 13.5px; line-height: 1.6; color: var(--base--text-color); }
.tn-case .case-note { margin-top: 14px; font-size: 12px; color: #7c8a86; line-height: 1.6; }

/* —— 案例库媒体区：所有对比图/时间轴统一 250px 等高完整显示 —— */
.tn-case .case-media { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
.tn-case .case-media figure { margin: 0; display: flex; flex-direction: column; }
.tn-case .case-media img { width: 100%; height: 250px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--color--4); }
.tn-case .case-media figcaption { font-size: 10.5px; color: #7c8a86; margin-top: 6px; line-height: 1.5; }
@media (max-width: 760px) { .tn-case .case-media { grid-template-columns: 1fr; } }

/* —— Tonigen logo（东营库logo + Tonigen字标）: mask 镂版，颜色随主题变量 —— */
/* 页脚巨幅标题防"幽灵半透明"态: 入场动画后强制实体, 杜绝滚动中断导致的水印感 */
html.has-loaded .c-footer .content_heading { opacity: 1 !important; transform: none !important; }

/* 页脚地址排版: 跟随主题体系但取消大写压制, 双行清晰层级 */
.c-footer .footer_links { text-transform: none; line-height: 1.5; letter-spacing: 0; font-size: .78rem; opacity: .85; }
.c-footer .footer_bottom { align-items: flex-end; }

/* 页脚 Office 信息: 并入 Connect 栏, 字体层级与栏目体系一致 */
.tn-office-label { margin-top: 34px; }
.tn-office { font-family: var(--family--2); font-size: .78rem; line-height: 1.65; text-transform: none; opacity: .85; }
.tn-office-name { color: #fff; }
.tn-office-line { opacity: .8; }

/* 页脚巨型品牌字标(源站同款: 纯文字大字锚点) */
/* 13线卡片: 产品包装图版式 */
.tn-track-card { display: flex; flex-direction: column; }
.tn-track-card .k { margin-top: 14px; }


/* 翻页区: 大字+支撑行同屏显示 */
.c-hero-xl .hero_scroller .scroller_content { padding-bottom: 120px; }
.c-hero-xl .hero_scroller .main_item { height: auto; overflow: visible; }
.c-hero-xl .hero_scroller .main_item .tn-sub { position: relative; }

/* 翻页支撑行: 覆盖翻页JS的visibility:hidden, 透明度随active item */
.c-hero-xl .hero_scroller .main_item .tn-sub { visibility: visible !important; opacity: .75; transition: opacity .3s ease; }
.c-hero-xl .hero_scroller .main_item[style*="opacity: 0"] .tn-sub { opacity: 0 !important; }



/* 图标: 默认深墨绿(浅底), invert时白 — 用双图切换 */
.tn-logo-icon { width: 23px; height: 25px; background-image: url("/brand/tn-icon-ink.png?v=1"); background-size: contain; }
html.invert-logo .c-header .tn-logo-icon,
.c-header[data-navigation-status=active] .tn-logo-icon { background-image: url("/brand/tn-icon-white.png?v=1"); }
.c-footer .tn-logo-icon { background-image: url("/brand/tn-icon-white.png?v=1"); }
/* 文字: 默认黑, invert时白 */
.tn-logo-word { height: 18px; width: 70px; background-image: url("/brand/tn-word-black.png?v=1"); background-size: contain; }
html.invert-logo .c-header .tn-logo-word,
.c-header[data-navigation-status=active] .tn-logo-word { background-image: url("/brand/tn-word-white.png?v=1"); }
.c-footer .tn-logo-word { background-image: url("/brand/tn-word-white.png?v=1"); }

/* logo容器适配拆分版: 覆盖源站212/28比例约束, 图标+文字自然宽度 */
.c-header .inline_logo { aspect-ratio: auto; width: auto; }
.c-header .logo_el.tn-logo { position: relative; width: auto; height: 28px; }
.c-header .header_inline { align-items: center; }

.c-header .logo_el { display: block; }
.c-footer .logo_el path { fill: #fff; }
.c-header .logo_el svg, .c-header svg.logo_el { display: block; height: 28px; width: auto; }

/* SVG logo尺寸修正 */
.c-header .inline_logo svg, .c-header svg[xmlns] { height: 28px !important; width: auto !important; display: block; }
.c-header .inline_logo { height: 28px; }
.c-footer .logo_el svg, .c-footer svg[xmlns] { height: 33px !important; width: auto !important; }




/* TongNian logo: 双图background方案(已验证可见) */
.c-header .inline_logo { aspect-ratio: auto; width: auto; height: 28px; min-width: 108px; }
.c-header .inline_logo a { display: inline-flex; align-items: center; height: 28px; text-decoration: none; }
.c-header .inline_logo svg { display: none !important; }
.c-header .inline_logo .tn-logo-img {
  display: block; width: 176px; height: 28px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-image: url("/brand/tn-logo-white.png?v=5");
  transition: background-image 0s;
}
html.has-scrolled .c-header .inline_logo .tn-logo-img {
  background-image: url("/brand/tn-logo-dark.png?v=5");
}
.c-footer .inline_logo svg { display: none !important; }
.c-footer .tn-logo-img, .c-footer .footer_logo .tn-logo-img {
  display: block; width: 200px; height: 33px;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-image: url("/brand/tn-logo-white.png?v=5");
}

/* 修复: header必须在page-content之上(否则logo被内容覆盖) */
.c-header { z-index: 1000; position: relative; }
.c-header .header_inline { z-index: 1001; }

/* 修复: logo必须在:inline_logo:before磨砂面板之上(源站同款 z-index:1) */
.c-header .inline_logo .tn-logo-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-size: contain !important; background-position: center !important; }