/* ============================================================
活动模板页（tkhdmb.html）专属样式
依赖：tuike-base.css / tuike.css（主题变量与通用组件）、footer.css
主题色：品牌橙 var(--brand-500, #FF7C1C)（与全站一致）
============================================================ */
/* ---------- 首屏顶部让位 ---------- */
/* 头图区块（背景图 + 主副标题）已整体移除，画廊成为 #wrap 内第一个区块。
header 为 fixed 定位（桌面约 104px 高），首屏需自行留出顶部间距，
否则卡片会被悬浮导航胶囊压住。 */
/* ⚠️ 这个值必须 ≥ fixed 悬浮导航的真实高度，否则首屏筛选区会被导航胶囊压住。
2026-10-01 定案（用户选「方案 A：加够留白」）：桌面 152px、≤991.98px 104px。
两个值都对齐全站既有口径，不是新拍的数字：
- 桌面 152px = mfsy.html（免费试用页 .mfsy-hero）与 gygdb.html（pt152）同值；
- 手机 104px = 全站统一标准（gdbsy / gdbwsc / gygdb / lxgdb / mfsy / gdbkhal
六个页面的移动端都钉 padding-top:104px，口径来源是 lxgdb.html 联系页的 104px）。
历史教训：曾为已移除的首屏头图留 152px，后陆续误收到 120 → 64 → 88px，
结果低于导航实际高度（按样式推算约 107px：container py-3 32 + navbar py-3 32
+ 导航链接 43），首屏筛选区被压住约 19px（手机 64px 时被压约 40px）。
→ 不要再往回收这个值；要改先确认导航高度。 */
.tkm-gallery.tkms-page-top { padding-top: var(--nav-offset, 152px) !important; }
@media (max-width: 991.98px) {
.tkm-gallery.tkms-page-top { padding-top: var(--nav-offset-sm, 104px) !important; }
}
/* ---------- 引导条（放在图片列表底部） ---------- */
/* 「三步上线」板块删除后，全页只剩这里一个稳定可见的创建入口。
2026-10-01 调整：原先压在筛选区上方，会把筛选整体往下推、拉高首屏；
现移到配图列表下方——用户看完配图正好接上「去哪创建」的答案，
同时筛选区回到原始高度（不受引导条高度影响）。
2026-10-03 定稿：整条并进品牌橙族——原本是一整块 Ant 蓝配色（浅蓝底 #F3F7FF / 蓝描边
#D6E4FF / 蓝灰字 #3B5B8C / 蓝按钮 #1677FF），是全站最后一个「非品牌色板块」。
只换按钮会变成「蓝框里塞个橙按钮」，故整条一起暖化：底→#FFF7F0（暖白，同资讯刊头族）、
边→#FFE3CC、字→brand-800（压暖白 5.19:1）、按钮→brand-700（白字 4.67:1，与首页 hero
主按钮同档）、悬停→brand-900。海报悬停胶囊 .tpl-cta 同批处理（底 brand-700 / 悬停 brand-900 /
投影转橙光）。蓝族色值全站仅存在于本文件，改后残留 = 0；
工具 .workbuddy/tools/fix-tkm-blue-to-brand.py。 */
.tkm-cta-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px 16px;
background: #FFF7F0;
border: 1px solid #FFE3CC;
border-radius: 12px;
padding: 10px 16px;
margin-top: 24px;
}
.tkm-cta-text {
margin: 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--brand-800, #B34700);
}
.tkm-cta-btn {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 22px;
border-radius: 8px;
background: var(--brand-700, #C25200);
color: #fff;
font-size: 0.9375rem;
font-weight: 700;
text-decoration: none;
transition: background-color 0.15s ease;
}
.tkm-cta-btn:hover { background: var(--brand-900, #9C4200); color: #fff; }
.tkm-cta-btn:focus-visible { outline: 2px solid var(--brand-700, #C25200); outline-offset: 2px; }
/* ---------- 筛选区 ---------- */
/* 无围框（用户定稿）：五行直接平铺在页面白底上，靠行间距分组，不使用分隔线。 */
/* 嵌套的按钮组行可收缩：标签与按钮同行，按钮过多时在行内折行（悬挂缩进），
避免「节日」这类宽按钮组整块掉到下一行、把标签孤零零甩在上一行。 */
/* 2026-10-01 收紧纵向占用：按钮 44→36px、行内 gap 8→6px、行间 28→20px。
桌面用鼠标点击，36px 高度足够；触摸端（≤991.98px）保留 40px 目标。 */
/* 2026-10-01 去线、改间距分组（用户定案）：
原实现是 `.tkm-filter-row + .tkm-filter-row` 各加
margin 10px + padding 10px + `1px dashed #ECECEC`，四条同款虚线均分五行。
问题三条：①同款线均匀分布不产生任何分组信息；②dashed 的语义是"可延续的
一串"（撕纸线/省略），表达"到此为止、下面是另一类"应当用实线，用虚线分组
与意图相反；③#ECECEC 在白底上仅 1.18:1，做纯装饰够用，一旦要承载
"这两组不一样"这个信息就太弱（WCAG 1.4.11 的 3:1 适用于"理解内容所必需的"
边界，须有间距同时承担该信息才可豁免 —— 只靠线就必须做到 3:1，即 #949494）。
现全部去线，改由接近性（间距）分组：组内 8px、组间 30px。
组间 ÷ 组内 = 3.75 倍，远高于接近性可读的约 2 倍门槛。
分组边界共 3 组，划分与数据层的从属关系一致：
① 行业 + 门店 =「我的店」—— 门店随行业联动（tkms-gallery.js:243）；
② 模式 + 玩法 =「做什么活动」—— 玩法随模式联动；模式无下级玩法时
不再整行隐藏，改为保留该行 + 灰字提示（tkms-gallery.js:270-276），与①同构；
③ 节日 = 独立场景维度，不隶属任何一组。
组间 30px 出现两处：门店 → 模式、玩法 → 节日。
高度账：行间 84px（4×21）→ 76px（2×8 + 2×30），筛选区 264 → 256px。 */
.tkm-filter-row > .tkm-filter-row {
flex: 1 1 0;
min-width: 0;
}
.tkm-filter-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: flex-start;
}
.tkm-filter-row + .tkm-filter-row {
margin-top: 8px; /* 组内 */
}
.tkm-filter-row.tkm-group-gap {
margin-top: 30px; /* 组间（门店 → 模式、玩法 → 节日）。特异性与上条相同，靠书写顺序胜出，勿上移 */
}
/* 筛选区与下方配图的外距：必须 ≥ 组间距（30px）。
接近性的层级是 组内 < 组间 < 外距，任何一级读反分组就失效 ——
外距若小于组间距，「玩法」行会显得比下面的配图更近，两组读反。
原为 HTML 上的 `.mb-3`（16px），Bootstrap 该工具类自带 !important，
故取消该类、改用本页样式统一管理。 */
/* 20261003 深夜：筛选区与配图区之间加一条分割线（用户拍板「就一条」）。
线右端骑线放计数「活动配图：共 N 套」（.tkm-count 绝对定位、底色盖线形成断线效果）。
20261003 深夜三（推倒重做）：底色第一版做成了容器内圆角色块，用户纠正「到顶，左右到边」——
按参考文件 E:/优化/ai_studio_code.html 的 .media-header-wrap 配方改为**通栏色带**：
渐变挂在真实 section .tkm-filter-band 上（不用伪元素/z-index 技巧，实机层级不可控），
从视口顶铺到色带底缘、左右满宽、无圆角；padding-top 给固定导航让位（152/104，同 tkms-page-top 口径）；
底缘一条通栏细线 #F1E5D8（同参考文件）。渐变色值照抄参考文件：#FFF4E8→#FFF9F2 45%→#F8FAFC。
.tkm-filters 只管内容节奏；计数放色带内、细线正上方右对齐（用户原话「分割线右上角」）。
⚠️ 计数曾用绝对定位骑线（一半探出色带底缘），实机 456.png 显示文字被拦腰裁断——
跨 section 边界的绝对定位元素不可靠，改回常规流内右对齐，文字整体落在色带内，零风险。 */
.tkm-filter-band {
padding-top: var(--nav-offset, 152px);
/* 20261003 深夜十八（用户拍板「不加标题只调色」）：渐变整体加深一档向品牌橙靠，
缓解从首页/案例页满橙 hero 切过来的色彩断层。⚠️ 色带可见区从约 38% 高度开始
（前 152/104px 是给固定导航让位的），所以暖色档必须压到中段（55%）才看得见，
只加深 0% 档会被让位区吃掉、白改。终点仍是 #F8FAFC，与画廊区无缝衔接。
注意：资讯刊头（gdbkhal.css .zx-masthead）仍是旧渐变 #FFF4E8→#FFF9F2→#F8FAFC，
两处自此不同款；要同步说一声即可。 */
/* 20261004 凌晨终稿 = 方案 B（用户 A/B/C 三版都上眼看过后拍板「B 视觉最好，C 顶部有点压」）：
橙集中在顶部可见区，到筛选主体区已退近白 —— 顶部与首页/案例页满橙接得上，筛选区保持浅底安静。
#FFAC5F(0%) → #FFDFBE(28%) → #F8FAFC(58%)。演进史：A 渐变(#FFD2A8/#FFE7C9，59f9014)
→ C 满橙(#FF7C1C，38ac54d) → B 定稿(本版)；C 的连带适配（字色深棕）在 B 底上仍成立且对比更高，保留。
注意：资讯刊头（gdbkhal.css .zx-masthead）仍是旧渐变 #FFF4E8→#FFF9F2→#F8FAFC，两处不同款。 */
background: linear-gradient(180deg, #FFAC5F 0%, #FFDFBE 28%, #F8FAFC 58%);
border-bottom: 1px solid #F1E5D8;
}
@media (max-width: 991.98px) {
.tkm-filter-band { padding-top: var(--nav-offset-sm, 104px); }
}
.tkm-grid-section { padding-top: 24px; }
.tkm-filters {
padding-bottom: 0;
}
.tkm-count {
margin: 0;
padding: 0 0 7px;
text-align: right;
background: none;
font-size: .8125rem;
line-height: 1.2;
color: #2E1F14; /* 20261004 方案C满橙：#6b5b4d 在橙上失效，改深棕（压 #FF7C1C 6.2:1） */
}
/* 20261004 方案C满橙：筛选行标签 #9A9A9A 在橙上仅约 2:1，改深棕（压 #FF7C1C 6.2:1 过 AA） */
.tkm-filter-label {
font-size: 0.75rem;
color: #2E1F14;
margin: 0 4px 0 0;
flex: none;
/* 与 34px 高的按钮首行垂直居中对齐（20261003 胶囊统一后按钮 36→34）；按钮组折行时标签始终停在第一行 */
line-height: 34px;
}
/* 20261004 方案C满橙：玩法灰字提示（JS 动态插入，如砍价行）同样改深棕。
特异性 (0,2,0) 高于移动端媒体查询里的 .tkm-filter-hint (0,1,0)，两端口径统一 */
.tkm-filter-band .tkm-filter-hint { color: #2E1F14; }
/* 20261003 深夜十八（用户拍板）：按钮统一成案例页 .case-filter-sub 胶囊同款规格 ——
圆角 999px / 描边 #D8CFC4 / 字号 .92rem / 行高 1.4 / 高 34 / 内距 6×16 / 字色 #3D2B1F；
hover 与 focus-visible 也对齐案例页（hover 边 brand-700 字 brand-800，focus 描边 brand-800）。
选中态本来就是同款（brand-700 实底白字 600），未动。
⚠️ 移动端两条覆盖（≤991.98 高 40 / ≤575.98 内距 6×10 字 .8125）是本页海报区优先的
刻意收窄，保留不同步 —— 案例页没有五级筛选的移动端压力。 */
.tkm-pill {
appearance: none;
border: 1px solid #D8CFC4;
background: #fff;
color: #3D2B1F;
border-radius: 999px;
padding: 6px 16px;
min-height: 34px;
font-size: 0.92rem;
line-height: 1.4;
white-space: nowrap;
cursor: pointer;
transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}
/* 配色对照度（2026-10-03 第 3 批）：橙字压白胶囊 2.58:1（不及格）→ 深橙 var(--brand-800, #B34700) 5.50:1；
焦点描边用 var(--brand-800, #B34700)（与案例页胶囊同款）。 */
.tkm-pill:hover {
border-color: var(--brand-700, #C25200);
color: var(--brand-800, #B34700);
}
/* 20261004 凌晨两改（用户反馈「反白与未选中太接近」）：反白版（白底深橙字）与未选中白胶囊
区分度不够。改回深橙实底 var(--brand-700,#C25200) + 白字粗体（全站 brand-surface 口径），
靠 2px 白描边（border 1px #fff + inset 阴影 1px，无布局位移）从满橙底上托出轮廓——
实底 vs 白底是强反差，描边解决「橙上橙融底」。方案 C 初版（无白描边）的问题不复现。 */
.tkm-pill.active {
background: var(--brand-700, #C25200);
border-color: #fff;
box-shadow: inset 0 0 0 1px #fff;
color: #fff;
font-weight: 700;
}
.tkm-pill:focus-visible {
outline: 2px solid var(--brand-800, #B34700);
outline-offset: 2px;
}
/* ---------- 移动端筛选抽屉（2026-10-04，方案 A，用户拍板「执行 A」） ----------
【问题】实测 390px 屏：五级筛选独占 687px、色带 792px、配图网格从 816px 才开始 ——
首屏 844px 里只剩 28px 给图，一张海报都看不全；360px 屏网格 top=908，首屏完全无图。
【方案 A】把五级筛选收进底部抽屉，色带上只留一行状态栏（筛选入口 + 当前条件摘要），
计数 .tkm-count 留在色带底部原位（右对齐，口径不变）。
【两条边界，改这个区块前务必先读】
① 桌面端零参与：所有抽屉样式都写在 ≤991.98px 媒体查询内，下面这 4 个新元素
在桌面一律 display:none —— 桌面端 1440/1366/1280 三档的色带高、计数位置、
网格起点与改动前逐像素一致（已实测）。
② 渐进增强：抽屉靠 .tkm-filter-band.is-drawer 门控，该类由 tkms-gallery.js 添加。
脚本没跑起来 / 元素缺失时不加类 → .tkm-filters 保持原有「平铺五行」形态，
筛选功能不丢（只是回到占 687px 的老样子）。 */
.tkm-drawer-bar,
.tkm-drawer-head,
.tkm-drawer-actions,
.tkm-drawer-mask { display: none; }
@media (max-width: 991.98px) {
/* — 状态栏：筛选入口 + 当前条件摘要 — */
.tkm-filter-band.is-drawer .tkm-drawer-bar {
display: block;
margin: 0 0 8px;
}
.tkm-drawer-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-height: 44px; /* iOS 建议的最小可点高度 */
padding: 8px 14px;
border: 1px solid #D8CFC4;
border-radius: 999px;
background: #fff;
color: #3D2B1F;
font-size: .92rem;
line-height: 1.3;
font-family: inherit;
text-align: left;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tkm-drawer-ico,
.tkm-drawer-chev { flex: none; color: #9B8779; }
.tkm-drawer-chev { transition: transform .2s ease; }
.tkm-drawer-toggle[aria-expanded="true"] .tkm-drawer-chev { transform: rotate(180deg); }
.tkm-drawer-label {
flex: none;
font-weight: 700;
color: var(--brand-800, #B34700);
}
/* 摘要：超长自动省略号，绝不换行（换行会把色带推高、挤占海报区） */
.tkm-drawer-sum {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .8125rem;
color: #6B5B4D;
}
/* — 抽屉本体：fixed 底部弹层；未展开时完全脱离视觉与可访问树 — */
.tkm-filter-band.is-drawer .tkm-filters {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1050; /* 高于 fixed 导航 1030 与移动菜单 1040 */
max-height: 76vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain; /* 滚到底不带动背景页 */
margin: 0;
padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
background: #fff;
border-radius: 20px 20px 0 0;
box-shadow: 0 -10px 36px rgba(46, 31, 20, .22);
transform: translateY(100%);
visibility: hidden;
transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility .28s;
}
.tkm-filter-band.is-drawer .tkm-filters.is-open {
transform: translateY(0);
visibility: visible;
}
/* — 抽屉头（吸顶）：标题 + 关闭 — */
.tkm-filter-band.is-drawer .tkm-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 2;
margin: 0 -16px 6px;
padding: 14px 16px 10px;
background: #fff;
border-bottom: 1px solid #F1E5D8; /* 色带底线同色，移动端与桌面共用同一套暖色分界 */
}
.tkm-drawer-title {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #2E1F14;
}
.tkm-drawer-close {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
margin: -6px -8px -6px 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: #6B5B4D;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
position: relative;
}
/* 2026-10-05：按钮本体 36×36 < 44px 触控目标 → 伪元素向外扩到 44×44 命中盒。
绝对定位脱离文档流，抽屉吸顶栏高度与图标视觉尺寸零变化。 */
.tkm-drawer-close::after {
content: ""; position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 44px; height: 44px;
}
.tkm-drawer-close:hover { background: #F5F2F0; color: #2E1F14; }
/* — 抽屉底（吸底）：确认按钮。文案由 JS 写成「查看 N 套配图」 — */
.tkm-filter-band.is-drawer .tkm-drawer-actions {
display: block;
position: sticky;
bottom: 0;
margin: 14px -16px 0;
padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 30%);
}
.tkm-drawer-done {
width: 100%;
min-height: 48px;
border: 0;
border-radius: 999px;
background: var(--brand-700, #C25200);
color: #fff;
font-size: 1rem;
font-weight: 700;
font-family: inherit;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.tkm-drawer-done:active { background: var(--brand-900, #9C4200); }
/* — 遮罩（必须是 .tkm-filters 的紧后兄弟，下面的 + 选择器依赖这个顺序） — */
.tkm-filter-band.is-drawer .tkm-drawer-mask {
display: block;
position: fixed;
inset: 0;
z-index: 1045;
background: rgba(46, 31, 20, .45);
opacity: 0;
visibility: hidden;
transition: opacity .28s ease, visibility .28s;
}
.tkm-filter-band.is-drawer .tkm-filters.is-open + .tkm-drawer-mask {
opacity: 1;
visibility: visible;
}
}
/* ---------- 配图画廊 ---------- */
/* 底色统一为纯白（全站口径 #FFFFFF），区块之间靠卡片阴影/描边区分，不再使用灰色带 */
.tkm-gallery {
background: #FFFFFF;
}
/* ---------- 瀑布流（2026-10-01 定稿，替换原等高网格） ----------
原因：封面图实测共 9 种比例，短款（≈0.64，877 张）与长款（≈0.42，977 张）几乎对半。
原方案写死 `aspect-ratio: 420/1003` + `object-fit: cover`，会把短款图横向裁掉约 35%
（用户报「抢购主题图片拉变形」）。现改为多列瀑布流：每张图按自身比例完整显示，
列内纵向填充、行底自然参差（这正是「原图多大就多大」的形态）。
- 子项不设 display：卡片自身是 `.tpl-card{display:flex}`，设 inline-block 反而会互相打架，
真正保证「卡片不被拆到两列」的是 break-inside:avoid。
- 列间距用 column-gap，行间距用卡片自身 margin-bottom（多列布局没有 row-gap 概念）。 */
.tkm-grid {
column-count: 5;
column-gap: 20px;
}
.tkm-grid > * {
width: 100%;
margin-bottom: 20px;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
@media (max-width: 1199.98px) {
.tkm-grid { column-count: 4; }
}
@media (max-width: 991.98px) {
.tkm-grid { column-count: 3; column-gap: 16px; }
.tkm-grid > * { margin-bottom: 16px; }
}
@media (max-width: 575.98px) {
.tkm-grid { column-count: 2; column-gap: 12px; }
.tkm-grid > * { margin-bottom: 12px; }
}
/* 真实配图海报卡（图源：商家管理中心配图库，360x860 webp） */
/* 卡片只装一张海报：底部文字标签已去掉，故用 overflow:hidden 让图片四角
跟随卡片圆角，避免直角图片盖住圆角轮廓。 */
.tpl-photo-card {
background: #fff;
border: 1px solid #F0EDEA;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
color: #333;
padding: 0;
aspect-ratio: auto; /* 高度由海报图比例决定 */
overflow: hidden;
}
.tpl-photo-card:hover {
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}
.tpl-photo {
position: relative;
margin: 0;
/* 不再写死比例：9 种原图比例各按自身显示（原 aspect-ratio:420/1003 已删） */
overflow: hidden;
background: #F5F2F0;
border-radius: 12px;
}
.tpl-photo img {
width: 100%;
height: auto; /* 按原图比例；配合 ![]()
的真实 width/height 属性，懒加载前即占好位，无布局抖动 */
display: block;
transition: transform 0.25s ease;
}
.tpl-photo-card:hover .tpl-photo img {
transform: scale(1.03);
}
/* 卡片即入口（形态 D）：整张卡是一个 ，指向商家管理中心免费试用。
入口按钮浮在海报顶部中央、不占额外卡片高度：
- 指针设备（有 hover）：默认隐藏，悬停或键盘聚焦时浮现 → 海报主体零遮挡
- 触摸设备（hover:none）：常驻显示 → 手机上始终看得见、点得到
2026-10-01 调整：原为右上角小胶囊，贴边显小气、5 列时易被误认为角标；
改为顶部水平居中、占宽 72%（窄屏 112px 起、宽屏封顶 200px），
视觉上是一条完整的主按钮，整卡仍可点，触摸面积远大于按钮本身。 */
.tpl-photo-card {
text-decoration: none;
color: inherit;
}
.tpl-photo-card:focus-visible {
outline: 2px solid var(--brand-500, #FF7C1C);
outline-offset: 2px;
}
.tpl-cta {
position: absolute;
top: 10px; /* 贴在海报内部，不越出图片区域 */
left: 50%;
transform: translateX(-50%); /* 水平居中 */
width: 72%; /* 加长：不再是角落里的短胶囊 */
min-width: 112px; /* 窄屏（2 列手机）也不至于缩成小方块 */
max-width: 200px; /* 5 列大屏下保持居中长条，不铺满整张海报 */
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
background: var(--brand-700, #C25200);
color: #fff;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
letter-spacing: 0.04em;
box-shadow: 0 2px 8px rgba(194, 82, 0, 0.32);
opacity: 0;
transition: opacity 0.18s ease, background-color 0.15s ease;
}
.tpl-photo-card:hover .tpl-cta { background: var(--brand-900, #9C4200); }
.tpl-photo-card:hover .tpl-cta,
.tpl-photo-card:focus-visible .tpl-cta {
opacity: 1;
}
@media (hover: none) {
.tpl-cta { opacity: 1; }
}
/* 宽度兜底：≤991.98px（与筛选按钮的触摸断点一致）一律常驻显示，
避免个别设备误报 hover:hover 导致手机上看不到入口 */
@media (max-width: 991.98px) {
.tpl-cta { opacity: 1; }
}
/* 配图卡通用：悬浮抬升 */
.tpl-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 14px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tpl-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
/* 空状态 */
.tkm-empty {
column-span: all; /* 多列布局下横跨所有列（原 grid-column:1/-1 在 columns 里无效） */
text-align: center;
color: #888;
padding: 48px 16px;
background: #fff;
border-radius: 14px;
border: 1px dashed #E0E0E0;
}
.tkm-empty a { color: var(--brand-800, #B34700); font-weight: 600; }
/* ---------- 玩法说明：已改为 Odoo s_features_grid（2026-10-01） ----------
原 .tkm-mode-list / .tkm-mode-item（5 张手写白卡）已删除，
与「拓客玩法与配图覆盖」合并成一个 s_features_grid 板块，见页面底部。 */
/* 移动端微调 */
/* 2026-10-05：触摸端按钮 40→44px，对齐 44px 最小触控目标（WCAG 2.5.5 / iOS HIG）。
背景：2026-10-04 起本页移动端五级筛选已收进底部抽屉，胶囊撑高不再挤占海报区
（抽屉是浮层），故此处「不用 44px 撑高整块筛选」的旧约束已不成立。
.tkm-filter-label / .tkm-filter-hint 同步提到 44px 保持同行基线一致。 */
@media (max-width: 991.98px) {
.tkm-pill { min-height: 44px; }
.tkm-filter-label { line-height: 44px; }
/* 筛选行内的灰字说明（如「砍价」只有一个与模式同名的玩法、数据里未单列时占位，避免整行隐藏导致高度跳动） */
.tkm-filter-hint { margin: 0; line-height: 44px; font-size: .875rem; color: #9c8b7c; }
/* 触摸端按钮抬高、按钮组折行更多，组内间距回到 12px，避免折行后的两行黏连 */
.tkm-filter-row + .tkm-filter-row { margin-top: 12px; }
.tkm-filter-row.tkm-group-gap { margin-top: 36px; }
}
@media (max-width: 575.98px) {
.tkm-cta-bar { padding: 10px 12px; }
.tkm-cta-btn { flex: 1 1 100%; }
.tkm-filters { padding-bottom: 0; margin-bottom: 0; }
.tkm-pill { padding: 6px 10px; font-size: 0.8125rem; }
}
/* ---------- 视觉隐藏 + 板块导语（2026-10-01） ----------
这两个类服务于 GEO 内容板块：把原本只存在于 tkms-gallery.js 里的筛选维度
（7 大行业 / 60 类门店 / 21 个活动场景）落成可抓取的正文——这类内容与问答式内容
最容易被 AI 引擎（豆包/元宝/DeepSeek 等）直接引用，也是长尾词的主要来源。
板块本身的样式已全部换成 Odoo snippet（见下方 s_features_grid / 标签云 / 表格 / 手风琴）。 */
.tkm-visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ---------- 页面标题：由视觉隐藏改为可见（20261002，用户要求「放出来试试」） ----------
位置仍在筛选区上方、152px（≤991.98px 为 104px）导航让位之后。为控制对海报区的挤占，
只放紧凑一行 24px 居中；原「大标题块」不恢复，简介段落保持视觉隐藏。 */
.tkm-page-title {
margin: 0 0 16px;
text-align: center;
font-size: 1.5rem;
font-weight: 700;
line-height: 1.3;
color: #2B2118;
}
@media (max-width: 991.98px) {
.tkm-page-title { margin-bottom: 14px; font-size: 1.25rem; }
}
.tkm-scope-lead {
max-width: 780px;
margin-left: auto;
margin-right: auto;
color: #5A5A5A;
line-height: 1.8;
}
/* ---------- 标签云（覆盖行业与活动场景 · 2026-10-01） ----------
原来把 60 类门店与 21 个活动场景写成「顿号长串」的纯文本段落，读不动也扫不动；
现在拆成一枚枚标签。视觉沿用本页筛选胶囊 .tkm-pill 的中性态
（同边框 #E4E4E4、同圆角 7px、同字号 0.875rem），与筛选区是同一套语言。 */
.tkm-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 10px 0 0;
}
.tkm-chips--center { justify-content: center; }
/* 标签（不可点）——2026-10-01 弱化，用户反馈「这些像按钮一样」。
原先它与筛选区真按钮 .tkm-pill 是同一套外观：同 1px #E4E4E4 边框、同白底、
同 7px 圆角、同 14px 字号，只有内边距差 2px（6×12 vs 4×10）——差异全在行为侧
（pill 有 cursor:pointer + hover 变橙 + .active 橙底白字，这里三者全无），
于是 81 个纯展示文字被误当按钮点。
关键在「那条描边」——去掉它、底色改浅米、文字转中灰，即回归标签语感。
本板块底色为白，浅米底能显形；文字 #555 压 #F5F2F0 = 6.71:1，过 WCAG AA。
⚠️ 不要给这里补 hover / 选中态：它不可点，加动效只会更误导。 */
/* 标签（不可点）——纯文字形态，无底色、无描边、无圆角（2026-10-01 用户拍板「直接底色去掉吧」）。
演变：原与筛选区真按钮 .tkm-pill 同款 1px #E4E4E4 描边 + 白底 + 7px 圆角（仅内边距差 2px），
→ 先删描边、白底改 #F5F2F0，
→ 现连底色一并去掉，只剩文字。padding 保留：它现在只承担「标签之间的间隔」，
去掉的话 60 个门店名会黏成一片。文字 #555 压白底 = 7.46:1，过 WCAG AA。
⚠️ 不要再补 border / background / hover / 选中态：它不可点，任何「可点」的外观暗示都是误导。 */
.tkm-chip {
display: inline-block;
color: #555;
padding: 4px 10px;
font-size: 0.875rem;
line-height: 1.5;
white-space: nowrap;
}
/* ---------- 板块收尾小字 tkm-scope-foot（2026-10-04 删除） ----------
原为「覆盖行业与活动场景」板块的收尾句：「选中配图后，可在商家管理中心替换门店名称、
课程项目、优惠价格与活动时间，无需设计与开发。」（2026-10-01 由副标题挪来）。
2026-10-04 用户要求去掉该句 → HTML 的