@import "tokens.css";
@import "components.css";
/* ★ 2026-10-14（F6 的前台那一半）：零件级的补齐放在最后 ——
 *   补的是"视图里挂着、全站却没有样式"的那批类（导航基类 / 内容元信息 / 徽章组 /
 *   表单行 / FAQ 容器 / 富文本容器 / 落地页页脚）。
 *   ⚠️ **顺序很要紧**：`@import` 写在文件顶部，而它的效果是"把那份**插到这一行**"——
 *      所以**越靠下的 import 越晚加载、同特异性时越晚加载的胜出**。
 *      放最后 = 它可以安全覆盖前面几份里的同特异性规则（这正是我要的）。
 *      ⚠️ **别把它理解反**：不是"import 靠下就靠前"（我上一轮就在这上面栽过一次，教训 S-241）。 */
@import "front-components.css";

/* i8HOME-Next 默认主题样式 */
/* 移动优先，PC 端为增强 */

* {
    box-sizing:border-box;
}

body {
    margin:0;
    font-family:system-ui, -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
    background:var(--c-bg);
    color:var(--c-ink);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
}

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

img {
    max-width:100%;
    height:auto;
    display:block;
}

.container {
    max-width:1200px;
    margin:0 auto;
    padding:0 16px;
}

/* ---------- 头部 ---------- */

.site-header {
    background:var(--c-surface);
    border-bottom:1px solid var(--c-line);
    position:sticky;
    top:0;
    z-index:100;
}

.header-inner {
    /* ★ F3（2026-10-14 · 转场令附录 A）：**头部不许横向溢出**。
     *
     * 缺陷（喀秋莎原话）：「居然还有**左右滚动条**」
     * 第一手核实（两条叠在一起）：
     *   ① 原写法是 `display:flex; justify-content:space-between` + `.nav { overflow-x:auto }`
     *      → 导航内容一多就**在导航条内部**生出滚动条；
     *   ② 系统侧注入的搜索表单带 `max-width:320px` 且是**不收缩的 flex 兄弟**
     *      → 它既不换行也不被压小，只能把整行**挤出视口**。
     * → 改成 **grid**（logo / 导航 / 动作区 三列，中间那列 `minmax(0,1fr)` 才能真收缩），
     *    并且把 `overflow-x:auto` 从 `.nav` 基础样式里**删掉**（导航改为可换行，
     *    而不是靠滚动条）。窄屏下导航变成竖向下拉面板，天然不溢出。
     */
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    column-gap:var(--sp-3);
    height:56px;
}

/* 动作区（搜索 / 语言）—— 固定宽度内容，不参与"抢位置" */
.header-inner > .lang-switch,
.header-inner > .hdr-search {
    justify-self:end;
}

.logo {
    font-weight:700;
    font-size:17px;
    color:var(--c-ink);
    white-space:nowrap;
}

.nav {
    /* ★ F3（2026-10-14）：**基础样式里删掉了 `overflow-x:auto`** ——
     *   它就是喀秋莎说的"左右滚动条"的来源。导航改为**可换行**（下面 flex-wrap），
     *   窄屏则整体变成竖向下拉面板（见 `@media (max-width:767.98px)`）。
     *   删掉它是安全的：`.nav` 的内容只有"导航项 ＋ 一个图标按钮"，不可能真的撑爆。 */
    display:none;
    flex-wrap:wrap;
    align-items:center;
    min-width:0;                 /* 让它在 grid 里真的能收缩 */
}

.nav a {
    display:inline-block;
    padding:6px 10px;
    font-size:14px;
    color:var(--c-ink-2);
    white-space:nowrap;
}

.nav a:hover {
    color:var(--c-brand);
}

/* ---------- 一级/二级导航（F1 修复 · 2026-10-14）----------
 *
 * 缺陷（喀秋莎原话）：「导航，连下拉都没有」
 * 第一手核实：模板**本来就写了** `.nav-children` 的 foreach，但
 *   ① `css/app.css` 里**完全没有 `.nav-children` 的样式** → 子项被渲染成一排普通行内链接，
 *      与父项挤在同一行（看着就是"没有下拉"）✗；
 *   ② 当时库里 `i8_nav` 是**扁平**的（全部 `parent_id=0`）→ 连那段 foreach 都没进过。
 * → 修法：**把二级菜单做成真的下拉**，三条通道都给：
 *      · PC 悬停（`:hover`）
 *      · 键盘（`:focus-within` —— 只给 hover 的话键盘用户永远打不开）✓ 无障碍
 *      · 触屏/手机（窄屏下点击父项展开，见下面 `@media` 段）
 *   ⚠️ 下拉面板**绝对定位**：不参与父级宽度计算 → **不会把头部撑宽**（与 F3 同一条纪律）。
 */
.nav-item-parent {
    position:relative;
}

.nav-children {
    display:none;
    position:absolute;
    left:0;
    top:100%;
    z-index:80;
    min-width:180px;
    padding:var(--sp-2) 0;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-float);
}

.nav-item-parent:hover > .nav-children,
.nav-item-parent:focus-within > .nav-children,
.nav-item-parent.nav-open > .nav-children {
    display:block;
}

.nav-children a,
.nav-children span {
    display:block;
    padding:8px 16px;
    font-size:14px;
    white-space:nowrap;
}

.nav-children a:hover {
    background:var(--c-brand-soft);
    color:var(--c-brand);
}

/* ---------- 头部动作区（搜索 / 语言 · F2 ＋ F4）---------- */

.header-actions {
    display:flex;
    align-items:center;
    gap:2px;
    min-width:0;
}

/* 图标按钮（`<summary>`）：40×40 的点击区，视觉上只是个图标 */
.hdr-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:40px;
    height:40px;
    padding:0 8px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--c-ink-2);
    font:inherit;
    font-size:13px;
    cursor:pointer;
    list-style:none;             /* 去掉 <summary> 默认的三角标记 */
}

.hdr-btn::-webkit-details-marker {
    display:none;
}

.hdr-btn:hover {
    background:var(--c-brand-soft);
    color:var(--c-brand);
}

.hdr-btn:focus-visible {
    outline:2px solid var(--c-brand);
    outline-offset:2px;
}

.hdr-ico {
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
}

.hdr-caret {
    width:10px;
    height:7px;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
}

/* 展开时把面板锚在这个按钮下面 —— 绝对定位，**不占导航位**（F2 的核心） */
.hdr-search,
.lang-switch {
    position:relative;
}

.hdr-search-panel,
.lang-menu {
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    z-index:90;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-float);
}

.hdr-search-panel {
    display:flex;
    gap:var(--sp-2);
    align-items:center;
    padding:var(--sp-2);
    width:min(86vw, 300px);
}

.hdr-search-panel input[type="search"] {
    flex:1 1 auto;
    min-width:0;                 /* 关键：允许被压小，否则又变成"挤出去"的那个 */
    padding:6px 8px;
    border:1px solid var(--c-line);
    border-radius:6px;
    font:inherit;
    font-size:14px;
    background:var(--c-bg);
    color:var(--c-ink);
}

.hdr-search-go {
    flex:0 0 auto;
    padding:6px 10px;
    border:1px solid var(--c-brand-line);
    border-radius:6px;
    background:var(--c-brand-soft);
    color:var(--c-brand);
    font:inherit;
    font-size:14px;
    cursor:pointer;
}

.lang-menu {
    min-width:150px;
    padding:var(--sp-2) 0;
}

.lang-menu a {
    display:block;
    padding:8px 14px;
    font-size:14px;
    white-space:nowrap;
    color:var(--c-ink-2);
}

.lang-menu a:hover {
    background:var(--c-brand-soft);
    color:var(--c-brand);
}

.lang-menu a.is-current {
    color:var(--c-brand);
    font-weight:600;
}

.lang-text {
    max-width:9em;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ★ 2026-10-14（TD-1.5.1-074）：手机端菜单开关 —— 修"窄屏访客看不到任何菜单入口"。
 *
 * 【缺陷是什么】`.nav` 基础是 `display:none`（上面那条），只在 `@media (min-width:768px)`
 *   里才改回 `flex` → **手机上它永远是隐藏的**；而 `window.toggleMobileMenu`（js/app.js）
 *   此前**全站零调用点**、header 里也没有按钮 → **移动端一条菜单都点不到**。
 *
 * 【修法】① 按钮本体（下面这段）＋ header 里的 `.nav-toggle`（views/blocks/header.html）
 *         ② 补窄屏规则，让被 JS 设成 `display:flex` 的 `.nav` 是**竖向面板**，
 *            而不是一排挤在一起的横排链接。
 * 【为什么不动 JS 的核心】现有 `toggleMobileMenu()` 是设内联 `display:flex`，
 *   内联样式能盖过样式表 → **本文件这段规则就足以把它摆成面板**，JS 只管开关。
 *   （§6.5：能用呈现层解决的，不去动行为层。）
 * 【可回退】三个文件改前已逐字节备份到 `_备份\20261014\themes\default\…`，原位拖回即还原。 */
.nav-toggle {
    display:inline-flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    width:40px;
    height:40px;
    padding:0;
    margin-left:auto;
    background:transparent;
    border:0;
    border-radius:8px;
    cursor:pointer;
}

.nav-toggle-bar {
    display:block;
    width:20px;
    height:2px;
    margin:0 auto;
    background:var(--c-ink);
    border-radius:2px;
}

.nav-toggle:focus-visible {
    outline:2px solid var(--c-brand);
    outline-offset:2px;
}

@media (max-width: 767.98px) {
    /* 被 JS 打开后：从上往下的面板（`.site-header` 是 sticky＝已定位，故 top:100% 紧贴其下沿） */
    .nav {
        position:absolute;
        left:0;
        right:0;
        top:100%;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:8px 0;
        max-height:70vh;
        overflow-y:auto;
        overflow-x:hidden;
        background:var(--c-surface);
        border-top:1px solid var(--c-line);
        box-shadow:var(--shadow-float);
        z-index:60;
    }

    .nav a,
    .nav .nav-item-parent > a,
    .nav .nav-item-parent > span {
        display:block;
        padding:12px 20px;
        font-size:15px;
        white-space:normal;
    }

    /* ★ F1 移动端（2026-10-14）：**二级菜单在手机上也要能打开**。
     *   为什么必须单独写：上面的悬停 / `:focus-within` 两条通道在触屏上**都不成立**
     *     （触屏没有 hover；`<a>` 点下去是"跳转"，不是"展开"）
     *     → 若不处理，二级项在手机上**完全没有入口** ✗（这正是 TD-1.5.1-074 的同一类毛病）。
     *   做法：JS（`app.js` 的 `toggleSubNav`）给父项加 `.nav-open`；
     *     展开时**子项在面板里缩进显示**（不再是浮层 —— 面板本身已经是竖列表，
     *     再浮一层会出现"面板里套面板"的滚动地狱）。 */
    .nav-children {
        position:static;
        display:none;
        min-width:0;
        padding:0;
        border:0;
        border-radius:0;
        box-shadow:none;
        background:transparent;
    }

    .nav-item-parent.nav-open > .nav-children {
        display:block;
    }

    .nav-children a,
    .nav-children span {
        padding:10px 20px 10px 40px;
        font-size:14px;
        white-space:normal;
        color:var(--c-ink-3);
    }

    /* 动作区在窄屏也留在同一行（图标按钮很小，不会挤爆 header） */
    .header-actions {
        gap:0;
    }

    .lang-text {
        display:none;            /* 窄屏只留国旗 ＋ 下拉箭头（省位置，F5 同源） */
    }

    .hdr-search-panel,
    .lang-menu {
        right:auto;
        left:auto;
        /* 面板贴着按钮，但**不许超出视口**（F5：移动端任何元素不许跑到屏幕外） */
        max-width:calc(100vw - 24px);
    }
}

/* ⚠️ 2026-10-14（F4 修复）：原来的 `.lang-switch` 规则（`font-size:13px` + 给 `<a>` 上色）
 *   已由上面新的「头部动作区」那一段接管 —— 语言切换器现在是**一个 `<details>` 入口 ＋ 下拉**，
 *   不再是"一排平铺的 `<a>`"。旧规则**已删除**（留着会与新结构打架：它会去给下拉里的链接上色，
 *   覆盖掉 `.lang-menu a` 的状态色）。 */

/* ---------- 区块通用 ---------- */

.block {
    padding:32px 0;
}

.block h2 {
    font-size:20px;
    margin:0 0 16px;
}

.block-head {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:16px;
    gap:12px;
}

.block-head h2 {
    margin:0;
}

.block-head .more {
    color:var(--c-brand);
    font-size:13px;
    white-space:nowrap;
}

/* ---------- Banner ---------- */

.block-banner {
    text-align:center;
    padding:48px 0;
    background:var(--c-surface);
}

.block-banner img {
    margin:0 auto 16px;
    max-height:400px;
    object-fit:cover;
    border-radius:8px;
}

.block-banner h1 {
    font-size:24px;
    margin:0 0 10px;
    color:var(--c-ink);
}

.block-banner p {
    color:var(--c-ink-2);
    margin:0;
    font-size:15px;
}

/* ---------- 产品 ---------- */

.product-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:12px;
    list-style:none;
    padding:0;
    margin:0;
}

.product-card {
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:8px;
    padding:12px;
    transition:transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    transform:translateY(-2px);
    box-shadow:0 6px 16px var(--c-shadow-1);
}

.product-card img {
    width:100%;
    height:120px;
    object-fit:cover;
    border-radius:6px;
    background:var(--c-line);
}

.product-card h3 {
    font-size:14px;
    margin:10px 0 6px;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-card .desc {
    font-size:12px;
    color:var(--c-ink-3);
    margin:0 0 6px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.product-card .price {
    color:var(--c-highlight);
    font-weight:700;
    font-size:15px;
}

.product-card .price.inquire {
    color:var(--c-ink-3);
    font-weight:400;
    font-size:13px;
}

/* ---------- 新闻 ---------- */

.news-list {
    list-style:none;
    padding:0;
    margin:0;
    background:var(--c-surface);
    border:1px solid var(--c-line);
    border-radius:8px;
}

.news-list li {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border-bottom:1px solid var(--c-surface-3);
    font-size:14px;
}

.news-list li:last-child {
    border-bottom:0;
}

.news-list a {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--c-ink-1);
}

.news-list a:hover {
    color:var(--c-brand);
}

.news-list .date {
    color:var(--c-ink-3);
    font-size:12px;
    white-space:nowrap;
}

/* ---------- 页脚 ---------- */

.site-footer {
    background:var(--c-ink);
    color:var(--c-ink-4);
    padding:28px 0;
    text-align:center;
    font-size:13px;
    margin-top:24px;
}

.site-footer p {
    margin:4px 0;
}

.site-footer .muted {
    color:var(--c-ink-2);
    font-size:12px;
}

/* ---------- 空状态 ---------- */

.empty {
    color:var(--c-ink-3);
    font-size:14px;
    padding:24px 0;
    text-align:center;
}

/* ---------- PC 端增强 ---------- */

@media (min-width: 768px) {
    /* ★ 2026-10-14（TD-1.5.1-074）：PC 端 `.nav` 本来就横排在 header 里，
       汉堡按钮只在窄屏有意义 —— 这里关掉它。 */
    .nav-toggle {
        display:none;
    }

    .container {
        padding:0 24px;
    }

    .header-inner {
        height:68px;
    }

    .logo {
        font-size:20px;
    }

    .nav {
        display:flex;
        gap:6px;
    }

    .nav a {
        font-size:15px;
        padding:8px 14px;
    }

    .block {
        padding:56px 0;
    }

    .block h2 {
        font-size:26px;
    }

    .block-banner {
        padding:72px 0;
    }

    .block-banner h1 {
        font-size:36px;
    }

    .block-banner p {
        font-size:16px;
    }

    .product-grid {
        grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
        gap:20px;
    }

    .product-card {
        padding:16px;
    }

    .product-card img {
        height:180px;
    }

    .product-card h3 {
        font-size:16px;
    }

    .news-list li {
        padding:16px 20px;
    }

    .site-footer {
        padding:36px 0;
    }
}

/* ============ 富文本内容保护 v1 ============ */
/* 防止编辑器插入的图片、视频、iframe、表格撑开页面 */


/* ==========================================================================
 * 首页真做（批次 31d · 2026-10-11）
 * --------------------------------------------------------------------------
 * 说明：这一段**在文件末尾覆盖上面的旧值**（CSS 后写胜出，同特异性）。
 *   · 被覆盖的旧值：.block-banner 的 padding/背景、.block-banner img/p、
 *     .block-head 的 margin-bottom、.product-card 与其 img/price 的写死像素。
 *   · 之所以用"末尾覆盖"而不是逐处改写：批量改写脚本一旦出错会把整份 CSS 写坏
 *     （本批已经踩过一次），追加是**不可破坏**的写法。
 *   · 旧的那几行**留着没删**是有意的（可回滚、可比对）；整理时再合并（已登记）。
 * ========================================================================== */

/* ---------- 主视觉：给首屏一个视觉锚点，而不是纯白一片 ---------- */
.block-banner {
    padding: var(--sp-8) 0;
    background: linear-gradient(180deg, var(--c-brand-soft) 0%, var(--c-bg) 100%);
    border-bottom: 1px solid var(--c-line);
}

.block-banner img {
    display: block;
    width: 100%;
    margin: var(--sp-7) auto 0;
    max-height: 420px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

.block-banner p {
    margin: 0 auto;
    max-width: 620px;
    font-size: var(--fs-md);
    line-height: var(--lh-base);
}

/* ---------- 英雄区按钮 ----------
 * ⚠️ 本批**故意不用**现成的 .btn：.btn / .btn-primary 定义在 page.css，
 *    而 page.css **只有部分页面加载**（首页不加载）→ 用了它们英雄区按钮会完全没样式。
 *    按钮体系应当收进 components.css（全站可用），已登记为后续批次。 */
.banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
    margin-top: var(--sp-6);
}

.banner-btn {
    display: inline-block;
    padding: var(--sp-3) var(--sp-7);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.banner-btn-primary {
    background: var(--c-brand);
    color: var(--c-on-brand);
}

.banner-btn-primary:hover {
    background: var(--c-brand-dark);
}

.banner-btn-ghost {
    background: var(--c-surface);
    color: var(--c-brand);
    border-color: var(--c-brand-line);
}

.banner-btn-ghost:hover {
    background: var(--c-brand-soft);
    border-color: var(--c-brand);
}

/* ---------- 区块标题：加下沿细线 ＋ 左侧主色竖条（章节感）---------- */
.block-head {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    gap: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
}

.block-head h2 {
    position: relative;
    padding-left: var(--sp-4);
}

.block-head h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 4px;
    border-radius: 2px;
    background: var(--c-brand);
}

/* ---------- 产品卡片：图片统一比例、价格贴底 → 卡片排得齐 ---------- */
.product-card {
    display: flex;
    flex-direction: column;
    padding: var(--sp-3);
    border-radius: var(--radius);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.product-card img {
    height: auto;
    aspect-ratio: 4 / 3;      /* 取代写死的 120px／桌面 180px */
    border-radius: var(--radius);
}

.product-card .price {
    margin-top: auto;         /* 价格永远贴底 */
    font-size: var(--fs-md);
}