/* ==========================================================================
   warranty-funnel 买家端「维保首页」（官方插件 official.warranty-funnel）
   设计方向：与落地页同构的「保修凭证」编辑感——暖纸底、墨色字、官网主题色点缀、
   品牌门面 + 产品型号选择器（图片+文字卡片）。
   主题通道：与 landing.css 共用同一套 --wf-* 令牌（纸色/墨色/鎏金 + 官网 --sys-* 变量兜底），
   保证品牌视觉一致；零框架、零外链字体；CLS≈0。
   首页差异：无图纸/视频、无三步漏斗卡片、无售后资料区，仅品牌导航 + 型号选择。
   ========================================================================== */

:root {
    /* 官网主题通道（--sys-* 缺省时兜底，保证插件自包含） */
    --wf-accent: var(--sys-color, #a4761f);
    --wf-font: var(--sys-font-family, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif);
    /* 「保修证书」设计令牌（与 landing.css 完全一致） */
    --wf-paper: #f6f2e9;
    --wf-paper-deep: #efe8d8;
    --wf-ink: #16302a;          /* 松绿墨（权威 / 官方感） */
    --wf-ink-soft: #5c6a60;
    --wf-ink-faint: #9aa59a;
    --wf-line: #d8cfba;
    --wf-card: #fffdf7;
    --wf-gold: #a4761f;         /* 鎏金：证书编号 / 勋章 / 印章 */
    --wf-gold-bg: #f5ecd9;
    --wf-danger: #b4441f;
    --wf-amber: #9a6a18;
    --wf-amber-bg: #f7edd8;
    --wf-ok: #2c7a52;
    --wf-serif: "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --wf-serif-display: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
    --wf-radius: 16px;
    --wf-radius-sm: 10px;
    --wf-shadow: 0 24px 60px -26px rgba(22, 48, 42, .38);
    --wf-shadow-soft: 0 12px 34px -18px rgba(22, 48, 42, .28);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.wf-body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1200px 520px at 85% -10%, rgba(164, 118, 31, .08), transparent 60%),
        radial-gradient(900px 420px at 12% 16%, rgba(22, 48, 42, .06), transparent 55%),
        linear-gradient(180deg, var(--wf-paper) 0%, var(--wf-paper-deep) 100%);
    color: var(--wf-ink);
    font-family: var(--wf-font);
    font-size: 16px;
    line-height: 1.6;
}

/* 纸感颗粒 + 顶部微光带（纯 CSS，无图片请求） */
.wf-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .55;
    background-image:
        repeating-linear-gradient(0deg, rgba(22, 48, 42, .012) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(22, 48, 42, .012) 0 1px, transparent 1px 3px),
        radial-gradient(140% 90% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%);
}

/* ---------- 顶栏（与 landing 同构） ---------- */
.wf-topbar {
    position: relative;
    z-index: 2;
    padding: 14px 20px;
}
.wf-topbar-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.wf-brand {
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 12.5px;
    color: var(--wf-ink);
}
.wf-brand::before {
    content: "◆";
    margin-right: 9px;
    font-size: 10px;
    color: var(--wf-gold);
    vertical-align: 2px;
}
.wf-lang { display: flex; gap: 2px; flex-wrap: wrap; }
.wf-lang-item {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 8px;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--wf-ink-soft);
    border-radius: 8px;
}
.wf-lang-item:hover { color: var(--wf-ink); background: rgba(29, 27, 23, .06); }
.wf-lang-item.is-active {
    color: var(--wf-ink);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 0 var(--wf-accent);
}

/* ---------- 布局 ---------- */
.wf-main {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: 12px 20px 84px;
}

/* ---------- 品牌门面 Hero ---------- */
.wf-home-hero {
    max-width: 640px;
    margin: 8px auto 0;
    padding: 40px 0 28px;
    text-align: center;
    animation: wf-rise .55s cubic-bezier(.22, .8, .3, 1) both;
}
.wf-home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    padding: 6px 14px;
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--wf-gold);
    border: 1px solid color-mix(in srgb, var(--wf-gold) 46%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--wf-gold) 6%, transparent);
}
.wf-home-eyebrow::before { content: "✦"; font-size: 10px; }
.wf-home-eyebrow:empty { display: none; }
.wf-home-title {
    margin: 0 0 12px;
    font-family: var(--wf-serif-display);
    font-size: clamp(34px, 7vw, 56px);
    line-height: 1.06;
    font-weight: 700;
    letter-spacing: -.012em;
    text-wrap: balance;
}
.wf-home-sub {
    margin: 0 auto 24px;
    max-width: 32em;
    color: var(--wf-ink-soft);
    font-size: 17px;
    text-wrap: balance;
}
.wf-home-sub:empty { display: none; }

/* 首页首屏行动区：主操作按钮（激活维保）首屏即见；联系入口由底部操作栏承载，避免重复 */
.wf-home-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}
.wf-home-actions .wf-home-activate {
    min-width: 220px;
    min-height: 54px;
    padding: 13px 34px;
    border-radius: var(--wf-radius-sm);
}

/* 首页醒目插图（品牌门面 Hero，全局配置单 URL 五语言一致）：居中、圆角、限定高度 */
.wf-home-illustration {
    display: block;
    width: min(100%, 420px);
    margin: 0 auto 18px;
    border-radius: 20px;
    filter: drop-shadow(0 18px 34px rgba(22, 48, 42, .32));
}

/* 底部操作栏：主操作按钮靠底部（扫码手机版固定底部；桌面内联于内容末尾） */
.wf-bottom-bar {
    position: relative;
    z-index: 5;
    max-width: 640px;
    margin: 6px auto 0;
    padding: 0 20px 40px;
    display: flex;
    gap: 12px;
    justify-content: center;
}
.wf-bottom-cta {
    flex: 1 1 0;
    min-height: 54px;
    padding: 13px 20px;
    border-radius: var(--wf-radius-sm);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wf-bottom-cta:hover { transform: translateY(-2px); }
.wf-btn-primary {
    background: var(--wf-ink);
    color: #fdfaf3;
    border: 1.5px solid var(--wf-ink);
    box-shadow: 0 12px 28px -16px rgba(22, 48, 42, .55);
}
.wf-btn-primary:hover { background: var(--wf-ink-soft); border-color: var(--wf-ink-soft); }
.wf-bottom-contact {
    background: transparent;
    color: var(--wf-ink);
    border: 1.5px solid var(--wf-ink);
}
.wf-bottom-contact:hover { background: rgba(22, 48, 42, .06); }

/* ---------- 产品型号选择器 ---------- */
.wf-picker {
    max-width: 720px;
    margin: 12px auto 0;
    padding: 26px;
    background: var(--wf-card);
    border: 1px solid color-mix(in srgb, var(--wf-gold) 26%, var(--wf-line));
    border-radius: var(--wf-radius);
    box-shadow: var(--wf-shadow);
    animation: wf-rise .45s cubic-bezier(.22, .8, .3, 1) both;
}
.wf-picker[hidden] { display: none; }
.wf-picker-head { text-align: center; margin-bottom: 20px; }
.wf-picker-title {
    margin: 0 0 6px;
    font-family: var(--wf-serif-display);
    font-size: 26px;
    line-height: 1.22;
    font-weight: 700;
}
.wf-picker-sub { margin: 0; color: var(--wf-ink-soft); font-size: 14.5px; }
.wf-picker-sub:empty { display: none; }

.wf-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.wf-model-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    background: var(--wf-card);
    border: 1px solid var(--wf-line);
    border-radius: var(--wf-radius-sm);
    overflow: hidden;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: left;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.wf-model-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--wf-gold) 46%, var(--wf-line));
    box-shadow: var(--wf-shadow-soft);
}
.wf-model-img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--wf-gold-bg);
    overflow: hidden;
}
.wf-model-img.has-img { background: var(--wf-paper-deep); }
.wf-model-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
}
.wf-model-img:not(.has-img)::after {
    content: "◆";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wf-gold);
    opacity: .5;
    font-size: 30px;
}
.wf-model-body { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.wf-model-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
.wf-model-brand { color: var(--wf-ink-faint); font-size: 12.5px; letter-spacing: .04em; }
.wf-model-brand:empty { display: none; }
.wf-model-go {
    display: inline-flex;
    align-self: flex-end;
    margin: -28px 14px 12px;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    color: var(--wf-gold);
    font-size: 16px;
    border: 1px solid color-mix(in srgb, var(--wf-gold) 40%, transparent);
    border-radius: 50%;
    background: var(--wf-card);
    transition: transform .2s;
}
.wf-model-card:hover .wf-model-go { transform: translateX(3px); }

.wf-picker-empty {
    margin: 0;
    text-align: center;
    color: var(--wf-ink-soft);
    font-size: 14.5px;
}

/* ---------- 合规脚注 ---------- */
.wf-footnote {
    max-width: 640px;
    margin: 24px auto 0;
    text-align: center;
    font-size: 12.5px;
    color: var(--wf-ink-faint);
}
.wf-footnote:empty { display: none; }

/* ---------- 轻提示 ---------- */
.wf-toast {
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 30;
    max-width: 86vw;
    padding: 11px 18px;
    background: var(--wf-ink);
    color: #fdfaf3;
    font-size: 14px;
    border-radius: var(--wf-radius-sm);
    box-shadow: var(--wf-shadow);
    animation: wf-rise .3s cubic-bezier(.22, .8, .3, 1) both;
}
.wf-toast[hidden] { display: none; }

/* ---------- 动效 ---------- */
@keyframes wf-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- 响应式 ---------- */
/* 移动端（扫码手机版）：底部操作栏固定屏幕底部，主内容加底部留白防遮挡 */
@media (max-width: 768px) {
    .wf-bottom-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
        background: rgba(255, 253, 247, .94);
        border-top: 1px solid var(--wf-line);
        backdrop-filter: blur(6px);
    }
    .wf-main { padding-bottom: 132px; }
}
@media (max-width: 520px) {
    .wf-bottom-bar { flex-direction: column; }
    .wf-picker { padding: 20px 16px; }
    .wf-picker-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}