/* ============================================================
   NOORMARE 首页（2026-10-29 改版）
   ------------------------------------------------------------
   版式基准（设计稿 NOORMARE_Homepage_1920）：
     画布 1920 → 内容区 1440 居中 → 左右各 240 留白
     断点：≥1280 桌面 / 768–1279 平板 / <768 移动（480 以下再收一档）

   约定：
     1) 所有类名以 h- 开头，且全部挂在 .home 下，避免污染全站样式；
     2) 颜色/圆角/间距统一走变量，改主题只动 :root 这一段；
     3) 字号用 clamp() 平滑过渡，避免断点处跳变。
   ============================================================ */

/* 设计变量放在 :root，而不是 .home。
   原因：首页页脚 <footer class="h-footer"> 位于 </main> 之后，在 .home 之外，
        变量若只定义在 .home 上，页脚取不到 --h-container / --h-gutter / --h-line，
        会导致 max-width 与 padding-inline 整条声明失效
        （computed 变成 none / 0px），内容于是铺到整屏、与 CTA 对不齐。 */
:root {
    --h-bg:        #faf9f4;   /* 页面底色 */
    --h-card:      #f6f4e8;   /* Hero 卡片底 */
    --h-cream:     #f7efe4;   /* 海报左栏底 */
    --h-ink:       #14201c;   /* 主文字（近黑绿） */
    --h-ink-2:     #4c564f;   /* 次文字 */
    --h-ink-3:     #8a918a;   /* 弱化文字 */
    --h-orange:    #f4552a;   /* 品牌橙 */
    --h-orange-dk: #e0451d;
    --h-dark:      #17241f;   /* 深色按钮 */
    --h-line:      #e6e1d3;   /* 分隔线 */
    --h-white:     #ffffff;

    --h-radius-lg: 28px;
    --h-radius-md: 16px;
    --h-radius-sm: 12px;

    --h-container: 1440px;    /* 桌面内容区宽度 */
    --h-gutter:    24px;      /* 内容区两侧内边距（<1920 时生效） */
}

.home {
    background: var(--h-bg);
    color: var(--h-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial,
                 "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 内容容器：1440 居中；视口小于 1440+2*gutter 时自动收窄 */
.home .h-wrap {
    width: 100%;
    max-width: var(--h-container);
    margin-inline: auto;
    padding-inline: var(--h-gutter);
}

/* 首页所有区块的纵向节奏 */
.home > section {
    margin-bottom: clamp(28px, 3vw, 48px);
}
.home > section:last-child { margin-bottom: 0; }

.ico { flex: 0 0 auto; }

/* ============================================================
   1) Hero
   ============================================================ */
.h-hero { padding-top: clamp(16px, 2vw, 28px); }

.h-hero-card {
    max-width: var(--h-container);
    margin-inline: auto;
    background: var(--h-card);
    border-radius: var(--h-radius-lg);
    padding: clamp(32px, 4.2vw, 64px) clamp(24px, 4vw, 64px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: clamp(24px, 4vw, 72px);
    align-items: center;
}

.h-hero-title {
    font-size: clamp(30px, 3.5vw, 54px);
    line-height: 1.14;
    letter-spacing: -0.02em;
    font-weight: 700;
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    max-width: 15em;
}

.h-hero-desc {
    font-size: clamp(13.5px, 1.05vw, 16px);
    line-height: 1.75;
    color: var(--h-ink-2);
    margin: 0;
    max-width: 46em;
}

/* 右侧三枚特性胶囊 */
.h-pills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.h-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 60px;
    padding: 10px 22px 10px 10px;
    border-radius: 999px;
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 600;
    color: var(--h-ink);
}

.h-pill-1 { background: #eaf0e4; }
.h-pill-2 { background: #eee9f6; }
.h-pill-3 { background: #fbe7d8; }

.h-pill-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .72);
    color: var(--h-ink);
}

.h-pill-1 .h-pill-ico { color: #4f7a3f; }
.h-pill-2 .h-pill-ico { color: #6750a4; }
.h-pill-3 .h-pill-ico { color: #c2562c; }

/* ============================================================
   2) 海报 + 询盘报价
   ============================================================ */
.h-poster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border-radius: var(--h-radius-lg);
    overflow: hidden;
    background: var(--h-cream);
    max-width: var(--h-container);
    margin-inline: auto;
    align-items: stretch;
}

.h-poster-text {
    padding: clamp(28px, 3.4vw, 52px) clamp(24px, 3.4vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(12px, 1.2vw, 18px);
}

.h-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--h-ink-2);
}

.h-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--h-orange);
    flex: 0 0 auto;
}

.h-poster-title {
    margin: 0;
    font-size: clamp(26px, 2.9vw, 44px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    font-weight: 700;
    max-width: 13em;
}

/* 设计稿里 “possibilities.” 用衬线斜体 + 品牌橙，是整页的视觉记忆点 */
.h-poster-title em {
    font-family: Georgia, "Times New Roman", "Songti SC", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--h-orange);
}

.h-poster-desc {
    margin: 0;
    font-size: clamp(13px, .98vw, 15px);
    line-height: 1.72;
    color: var(--h-ink-2);
    max-width: 40em;
}

.h-poster-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

/* ---- 通用按钮 ---- */
.h-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.h-btn:active { transform: translateY(1px); }

.h-btn-primary {
    background: var(--h-orange);
    color: #fff;
}
.h-btn-primary:hover { background: var(--h-orange-dk); }

.h-btn-ghost {
    background: #fff;
    color: var(--h-ink);
    border-color: #e2dccd;
}
.h-btn-ghost:hover { background: #fffdf7; }

.h-btn-dark {
    background: var(--h-dark);
    color: #fff;
}
.h-btn-dark:hover { background: #0d1713; }

/* ---- 询盘报价模块（位于左侧文字下方，设计稿指定位置） ---- */
.h-quote {
    margin-top: clamp(6px, 1vw, 14px);
    background: rgba(255, 255, 255, .78);
    border: 1px solid #efe6d6;
    border-radius: var(--h-radius-md);
    padding: clamp(16px, 1.6vw, 22px);
    backdrop-filter: blur(2px);
    scroll-margin-top: 90px;   /* 被 #homeQuote 锚点定位时不被吸顶导航盖住 */
}

.h-quote-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.h-quote-head p {
    margin: 4px 0 14px;
    font-size: 12.5px;
    color: var(--h-ink-3);
    line-height: 1.5;
}

.h-quote-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.h-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.h-field > span {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--h-ink-2);
    letter-spacing: .01em;
}

.h-field input,
.h-field textarea {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e4ddcd;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--h-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.h-field input:focus,
.h-field textarea:focus {
    outline: none;
    border-color: var(--h-orange);
    box-shadow: 0 0 0 3px rgba(244, 85, 42, .12);
}

.h-field textarea { resize: vertical; min-height: 56px; line-height: 1.55; }

.h-field-wide { margin-top: 10px; }

.h-quote-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.h-captcha {
    display: flex;
    align-items: center;
    gap: 8px;
}

.h-captcha input {
    width: 104px;
    background: #fff;
    border: 1px solid #e4ddcd;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-family: inherit;
}

.h-captcha input:focus {
    outline: none;
    border-color: var(--h-orange);
    box-shadow: 0 0 0 3px rgba(244, 85, 42, .12);
}

.h-captcha img {
    height: 38px;
    border-radius: 8px;
    border: 1px solid #eee6d8;
    cursor: pointer;
    display: block;
}

.h-quote-send { min-height: 42px; padding: 0 22px; font-size: 13.5px; }
.h-quote-send[disabled] { opacity: .68; cursor: progress; }

.h-quote-msg {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 0;
}
.h-quote-msg.ok  { color: #2f7d4f; }
.h-quote-msg.err { color: #c0392b; }

/* ---- 右侧视觉 ---- */
.h-poster-visual {
    position: relative;
    min-height: 320px;
    background: #efe4d2;
    overflow: hidden;
}

.h-poster-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.h-poster-ph {
    width: 100%;
    height: 100%;
    min-height: 320px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(120% 90% at 70% 10%, #f9d9a8 0%, #f0bf8e 42%, #e3a877 100%);
    color: #7a4a22;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 700;
}

.h-poster-nav {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .92);
    border-radius: 999px;
    padding: 6px 10px;
    box-shadow: 0 6px 18px rgba(20, 32, 28, .12);
}

.h-nav-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: none;
    color: var(--h-ink);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
}
.h-nav-btn:disabled { color: #c9c4b6; cursor: default; }

.h-dots { display: inline-flex; gap: 5px; }
.h-dots i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d8d2c2;
    display: block;
}
.h-dots i.on { background: var(--h-orange); }

.h-counter {
    font-size: 11px;
    color: var(--h-ink-2);
    letter-spacing: .04em;
}

/* ============================================================
   3) 分类图墙
   ============================================================ */
.h-collections { max-width: var(--h-container); margin-inline: auto; }

.h-sec-head { margin-bottom: clamp(14px, 1.6vw, 22px); }

.h-sec-head h2 {
    margin: 0 0 4px;
    font-size: clamp(22px, 2vw, 30px);
    letter-spacing: -0.015em;
    font-weight: 700;
}

.h-sec-head p {
    margin: 0;
    font-size: 13.5px;
    color: var(--h-ink-3);
}

.h-col-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: clamp(160px, 15vw, 240px);
    gap: clamp(10px, 1vw, 16px);
}

/* 前两张各占一半（第一行），其余各占 1/3（第二行） */
.h-col:nth-child(1),
.h-col:nth-child(2) { grid-column: span 3; }
.h-col:nth-child(n+3) { grid-column: span 2; }

.h-col {
    position: relative;
    display: block;
    border-radius: var(--h-radius-md);
    overflow: hidden;
    text-decoration: none;
    background: #e9e4d6;
    isolation: isolate;
}

.h-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}

.h-col:hover img { transform: scale(1.04); }

.h-col-ph {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: clamp(34px, 4vw, 56px);
}

/* 底部渐隐，保证白色标签在任何图片上都可读 */
.h-col-shade {
    position: absolute;
    inset: auto 0 0 0;
    height: 55%;
    background: linear-gradient(to top, rgba(12, 20, 16, .62), rgba(12, 20, 16, 0));
    pointer-events: none;
}

.h-col-label {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: clamp(13px, 1.1vw, 16px);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

/* ============================================================
   4) 三步流程
   ============================================================ */
.h-steps {
    max-width: var(--h-container);
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.5fr);
    gap: clamp(20px, 3vw, 56px);
    align-items: center;
    padding-block: clamp(10px, 1.4vw, 20px);
}

.h-steps-left h2 {
    margin: 0 0 8px;
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 700;
    max-width: 12em;
}

/* “simple.” 同样用衬线斜体强调 */
.h-steps-left h2 em,
.h-steps-left h2 i {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 400;
    color: var(--h-ink);
}

.h-steps-left p {
    margin: 0;
    font-size: 13.5px;
    color: var(--h-ink-3);
}

.h-steps-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.6vw, 28px);
}

.h-steps-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(12.5px, 1vw, 14px);
    color: var(--h-ink-2);
    line-height: 1.4;
}

.h-step-num {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #ded8c8;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--h-ink);
}

/* ============================================================
   5) 底部 CTA
   ============================================================ */
.h-cta {
    max-width: var(--h-container);
    margin-inline: auto;
    background: var(--h-orange);
    border-radius: var(--h-radius-lg);
    padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.8vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #fff;
}

.h-cta-text h2 {
    margin: 0 0 4px;
    font-size: clamp(18px, 1.8vw, 26px);
    letter-spacing: -0.01em;
    font-weight: 700;
    color: #fff;
}

.h-cta-text p {
    margin: 0;
    font-size: clamp(12.5px, 1vw, 14px);
    color: rgba(255, 255, 255, .82);
}

.h-cta .h-btn-dark { flex: 0 0 auto; }

/* ============================================================
   响应式：平板 768–1279
   ------------------------------------------------------------
   - Hero 由「左文右胶囊」改为「上文下胶囊横排」
   - 海报由左右分栏改为上图下文（图在下更能保持视觉重心）
   - 图墙保持 2 大 + 3 小，但行高压缩
   - 三步流程标题与步骤改为上下堆叠
   ============================================================ */
@media (max-width: 1279px) {
    /* 变量在 :root 上，断点覆盖也要落在 :root，否则页脚取到的还是桌面值 */
    :root { --h-container: 100%; --h-gutter: 20px; }

    .h-hero-card {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .h-pills {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .h-pill { flex: 1 1 30%; min-width: 190px; }

    .h-poster { grid-template-columns: 1fr; }

    /* 平板把图放在文字上方：先看到产品场景，再读文案与表单 */
    .h-poster-visual { order: -1; min-height: 300px; max-height: 380px; }
    .h-poster-ph { min-height: 300px; }

    .h-col-grid { grid-auto-rows: clamp(150px, 18vw, 210px); }

    .h-steps {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .h-steps-left h2 { max-width: none; }
}

/* ============================================================
   响应式：移动端 <768
   ------------------------------------------------------------
   - 全部单列；胶囊改为竖排
   - 询盘表单字段改为单列，按钮占满整行
   - 图墙改 2 列，最后一张跨两列，避免出现孤块
   - CTA 改为纵向，按钮全宽
   ============================================================ */
@media (max-width: 767px) {
    :root { --h-gutter: 14px; --h-radius-lg: 20px; --h-radius-md: 14px; }

    .h-hero-card { padding: 26px 20px; border-radius: var(--h-radius-lg); }

    .h-hero-title { font-size: 27px; line-height: 1.2; }

    .h-pills { flex-direction: column; gap: 8px; }
    .h-pill { min-height: 52px; padding: 8px 18px 8px 8px; font-size: 13px; }
    .h-pill-ico { width: 34px; height: 34px; }

    .h-poster-text { padding: 22px 18px 26px; }
    .h-poster-title { font-size: 25px; }
    .h-poster-visual { min-height: 220px; max-height: 260px; }
    .h-poster-ph { min-height: 220px; }

    .h-poster-actions { gap: 8px; }
    .h-btn { min-height: 42px; padding: 0 20px; font-size: 13px; }

    .h-quote { padding: 14px; }
    .h-quote-grid { grid-template-columns: 1fr; gap: 8px; }
    .h-quote-foot { flex-direction: column; align-items: stretch; }
    .h-captcha { justify-content: space-between; }
    .h-captcha input { flex: 1; width: auto; }
    .h-quote-send { width: 100%; }

    .h-col-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 140px;
        gap: 10px;
    }
    .h-col:nth-child(1),
    .h-col:nth-child(2),
    .h-col:nth-child(n+3) { grid-column: span 1; }
    .h-col:nth-child(1) { grid-column: span 2; }     /* 首图通栏 */
    .h-col:nth-child(5) { grid-column: span 2; }     /* 末图通栏，凑齐网格 */

    .h-col-label { left: 12px; bottom: 12px; font-size: 13px; }

    .h-steps-list { grid-template-columns: 1fr; gap: 12px; }
    .h-step-num { width: 28px; height: 28px; font-size: 12px; }

    .h-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 20px;
    }
    .h-cta .h-btn-dark { width: 100%; }
}

/* 超窄屏（<380）：进一步压缩标题，避免换行过多 */
@media (max-width: 379px) {
    .h-hero-title { font-size: 24px; }
    .h-poster-title { font-size: 22px; }
    .h-col-grid { grid-template-columns: 1fr; }
    .h-col:nth-child(n) { grid-column: span 1; }
}

/* ============================================================
   阿语（RTL）：镜像方向相关属性
   ============================================================ */
[dir="rtl"] .h-poster-nav { right: auto; left: 16px; }
[dir="rtl"] .h-col-label { flex-direction: row-reverse; }
[dir="rtl"] .h-quote-foot { flex-direction: row-reverse; }
[dir="rtl"] .h-btn .ico { transform: scaleX(-1); }
[dir="rtl"] .h-steps-list li { flex-direction: row-reverse; }

/* 打印/无 JS 兜底：淡入动画不该因为 JS 缺失而让内容不可见 */
@media (prefers-reduced-motion: reduce) {
    .h-col img { transition: none; }
}

/* ============================================================
   6) 首页极简页脚
   ------------------------------------------------------------
   设计稿底部只有「品牌 + 标语 + 三个入口 + 版权」，与内页的多列
   深色页脚不同，因此单独一套样式，仅首页渲染（见 includes/footer.php）。
   ============================================================ */
.h-footer {
    background: var(--h-bg);
    margin-top: clamp(28px, 3.4vw, 56px);
    /* style.css 里有全局 footer{padding:60px 5% 30px}，5% 在 1920 下正好 = 96px，
       会把页脚内容整体往里推一大截（实测线上页脚 96..1824，而 CTA 是 240..1680）。
       这里显式清零，内边距全部交给 .h-footer-inner 用统一容器公式处理。 */
    padding: 0;
}

.h-footer-inner {
    /* 与 .h-cta 使用同一套算法，保证左右边缘像素级对齐：
       ≥1440+p gutter → 1440 居中（1920 下 240..1680）
       <1440          → 视口扣两侧 gutter，居中 */
    max-width: var(--h-container);
    width: calc(100% - var(--h-gutter) * 2);
    margin-inline: auto;
    padding-inline: 0;
    /* 分割线画在内容容器上，只跨内容宽度；放在 .h-footer 上会整屏通栏，
       设计稿实测分割线与 CTA 同宽（213..1011 vs 214..1011） */
    border-top: 1px solid var(--h-line);
    padding-block: clamp(26px, 3vw, 44px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.h-footer-brand p {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--h-ink-3);
}

.h-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(17px, 1.5vw, 21px);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--h-ink);
    text-decoration: none;
}

.h-footer-mark {
    font-size: .8em;
    color: var(--h-orange);
    line-height: 1;
}

.h-footer-right {
    text-align: right;
}

.h-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 22px;
    margin-bottom: 8px;
}

.h-footer-links a {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--h-ink-2);
    text-decoration: none;
}
.h-footer-links a:hover { color: var(--h-orange); }

.h-footer-copy {
    margin: 0;
    font-size: 11.5px;
    color: var(--h-ink-3);
}

@media (max-width: 767px) {
    .h-footer-inner { flex-direction: column; gap: 16px; }
    .h-footer-right { text-align: left; }
    .h-footer-links { justify-content: flex-start; }
}

/* ============================================================
   7) 容器统一修正（覆盖上面各区块的 max-width）
   ------------------------------------------------------------
   问题：之前各区块直接 max-width:1440 + margin:auto，
        在 1440 及以下视口会贴屏幕左右边缘，没有任何留白。
   修正：外层宽度取 1440 + 两侧留白，留白由 padding 提供。
        1920 视口 → (1920-1488)/2=216 + 24 = 240 起，内容正好 1440；
        1440 视口 → 24px 留白 + 内容 1392。
   ============================================================ */
.home > section,
.home > .h-hero,
.home > .h-poster,
.home > .h-collections,
.home > .h-steps,
.home > .h-cta {
    max-width: calc(var(--h-container) + var(--h-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--h-gutter);
}

/* 卡片自身不再承担居中与外边距，只负责底色与圆角 */
.h-hero-card,
.h-poster,
.h-collections,
.h-steps,
.h-cta {
    max-width: none;
    margin-inline: 0;
}

/* 页脚容器：算法已在第 6 节统一为「与 CTA 同一套」，
   这里不再单独覆盖 max-width / padding-inline ——
   否则会变成 1488 宽 + 24 内边距，内容虽然还是 1440，
   但分割线会跟着撑到 1488，比 CTA 每边多出 24px，肉眼可见不齐。 */

/* 自带底色/圆角的区块（海报、CTA）：宽度必须扣除两侧留白，
   否则背景会一直铺到屏幕边缘，与 Hero 卡片的浮动感不一致。
   1920 → 1440 居中（左右 240）；1440 → 1392（左右 24）；390 → 362（左右 14）。 */
.home > .h-poster {
    max-width: var(--h-container);
    width: calc(100% - var(--h-gutter) * 2);
    margin-inline: auto;
    padding-inline: 0;
}

/* CTA 条：只约束外框宽度，不能写 padding-inline:0。
   这条 section 本身就是那张橙色圆角卡片，条内的左右留白由 .h-cta 自己的
   padding 提供；一旦清零，标题会直接贴住橙色边缘（设计稿实测内缩约 54px）。 */
.home > .h-cta {
    max-width: var(--h-container);
    width: calc(100% - var(--h-gutter) * 2);
    margin-inline: auto;
}

/* ============================================================
   8) 细节修正（首轮视觉走查）
   ============================================================ */

/* (a) 移动端分类图墙：5 个分类 → 1 通栏 + 4 张两两成对。
       原先让第 5 张也通栏，会使第 4 张独占半格、右侧留空一块。 */
@media (max-width: 767px) {
    .h-col:nth-child(1) { grid-column: span 2; }
    .h-col:nth-child(n+2) { grid-column: span 1; }
    .h-col:nth-child(5) { grid-column: span 1; }
}

/* (b) 移动端顶部：语言切换收进汉堡菜单（菜单里已有），让工具条只剩
       汉堡 / 品牌 / 搜索 / 购物袋，避免四个控件在 390px 内挤成一团。 */
@media (max-width: 767px) {
    .topbar .lang-tabs { display: none; }
}

/* (c) Hero 描述：736px 行宽在 1920 下每行过长，收窄到 44em 更接近设计稿的 5 行。 */
.h-hero-desc { max-width: 44em; }

/* (d) CTA 描述在白底上的透明度偏低，提高一档保证可读 */
.h-cta-text p { color: rgba(255, 255, 255, .92); }

/* (e) 移动端 CTA 上下留白加大，避免标题与按钮贴太近 */
@media (max-width: 767px) {
    .h-cta { padding: 24px 20px; gap: 16px; }
    .h-cta-text h2 { font-size: 19px; line-height: 1.35; }
}

/* ============================================================
   9) 分类图墙：数量自适应
   ------------------------------------------------------------
   设计稿是 5 个（2 大 + 3 小），但实际分类数由「有产品的分类」决定。
   固定规则在 3/4 个时会让第二行留出大片空白，这里按数量补规则。
   网格固定 6 列：大图 span 3（半行），小图 span 2（三分之一行）。
   ============================================================ */

/* 4 个：2 大（第一行）+ 2 中（第二行各半） */
.h-col-grid.cols-4 .h-col:nth-child(3),
.h-col-grid.cols-4 .h-col:nth-child(4) { grid-column: span 3; }

/* 3 个：2 大（第一行）+ 1 通栏（第二行） */
.h-col-grid.cols-3 .h-col:nth-child(3) { grid-column: span 6; }

/* 2 个：各半，单行 */
.h-col-grid.cols-2 .h-col:nth-child(1),
.h-col-grid.cols-2 .h-col:nth-child(2) { grid-column: span 3; }

/* 1 个：通栏 */
.h-col-grid.cols-1 .h-col:nth-child(1) { grid-column: span 6; }

/* 移动端是 2 列网格，上面的大跨度要换算成「通栏 = span 2」 */
@media (max-width: 767px) {
    .h-col-grid.cols-3 .h-col:nth-child(3),
    .h-col-grid.cols-1 .h-col:nth-child(1) { grid-column: span 2; }
    .h-col-grid.cols-4 .h-col:nth-child(3),
    .h-col-grid.cols-4 .h-col:nth-child(4) { grid-column: span 1; }
    .h-col-grid.cols-2 .h-col:nth-child(1),
    .h-col-grid.cols-2 .h-col:nth-child(2) { grid-column: span 1; }
}

/* cols-4 在移动端（2 列）要全部去掉通栏：
   否则「1 通栏 + 3 半格」会在最后一行只放一个、右侧空半格。四个正好两行。 */
@media (max-width: 767px) {
    .h-col-grid.cols-4 .h-col:nth-child(1) { grid-column: span 1; }
    .h-col-grid.cols-4 .h-col:nth-child(2) { grid-column: span 1; }
}

/* 修正：移动端 cols-3 应为「1 通栏 + 2 半格」。
   上一条把第 3 个设成 span 2（通栏），导致第 2 个独占半格、右侧空一格。
   移动端只有 2 列，3 个分类的合理排法是：首图通栏，其余两两成对。 */
@media (max-width: 767px) {
    .h-col-grid.cols-3 .h-col:nth-child(3) { grid-column: span 1; }
}

/* ============================================================
   10) 分类图墙行高：还原设计稿「第一行大图更高」
   ------------------------------------------------------------
   设计稿里第一行两张明显比第二行三张高（约 340 : 220）。
   原来两行同为 240，大图不够“大”，整块显得平。
   桌面固定两行高度；移动端统一 140，避免上下留白失衡。
   ============================================================ */
@media (min-width: 768px) {
    .h-col-grid {
        grid-template-rows:
            clamp(200px, 17.7vw, 340px)   /* 第一行：2 张大图 */
            clamp(140px, 11.5vw, 220px);  /* 第二行：3 张小图 */
        grid-auto-rows: clamp(140px, 11.5vw, 220px);
    }
}
@media (max-width: 767px) {
    .h-col-grid {
        grid-template-rows: none;
        grid-auto-rows: 140px;
    }
}

/* ============================================================
   11) 海报区重排（对齐参考图 1 的比例与密度）
   ------------------------------------------------------------
   参考图实测：左文:右图 ≈ 40:60，整块明显比「左右各半」更扁。
   原因是我这版在左栏加了询盘表单，内容变多后右图被拉得很高、上下留白变大。
   做法：
     ① 分栏改成 43:57，让右图成为视觉主体；
     ② 标题/描述/按钮字号按参考图比例上调；
     ③ 表单整体紧凑化（输入框 36px、间距收窄），把左栏高度压回来。
   ============================================================ */

/* 分栏比例 */
.h-poster {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
}

/* 左栏：内边距略收，垂直节奏更紧 */
.h-poster-text {
    padding: clamp(26px, 3vw, 46px) clamp(24px, 3vw, 46px);
    gap: clamp(10px, 1vw, 14px);
    justify-content: flex-start;
}

/* 眉标 */
.h-eyebrow { font-size: 11.5px; letter-spacing: .1em; }

/* 标题：参考图里三行几乎撑满左栏宽度 */
.h-poster-title {
    font-size: clamp(27px, 2.55vw, 41px);
    line-height: 1.16;
    max-width: 11.5em;
}

/* 描述：参考图为 4 行左右，行距稍紧 */
.h-poster-desc {
    font-size: clamp(13px, .95vw, 14.5px);
    line-height: 1.62;
    max-width: 34em;
}

.h-poster-actions { margin-top: 2px; gap: 10px; }
.h-poster-actions .h-btn { min-height: 44px; padding: 0 24px; font-size: 13.5px; }

/* ---- 表单紧凑化：整体高度约从 400px 降到 300px 出头 ---- */
.h-quote {
    margin-top: 10px;
    padding: 14px;
    border-radius: 14px;
}
.h-quote-head h3 { font-size: 14.5px; }
.h-quote-head p { font-size: 12px; margin: 3px 0 10px; }

.h-quote-grid { gap: 8px; }
.h-field { gap: 4px; }
.h-field > span { font-size: 11px; }
.h-field input,
.h-field textarea {
    padding: 8px 10px;
    font-size: 12.5px;
    border-radius: 9px;
}
.h-field textarea { min-height: 48px; padding: 8px 10px; }
.h-field-wide { margin-top: 8px; }

.h-quote-foot { margin-top: 10px; gap: 8px; }
.h-captcha input { padding: 8px 10px; font-size: 12.5px; width: 96px; border-radius: 9px; }
.h-captcha img { height: 34px; border-radius: 7px; }
.h-quote-send { min-height: 38px; padding: 0 18px; font-size: 12.5px; }

/* 右图：内容按主体居中偏上裁切，避免上下大片空白 */
.h-poster-visual img { object-position: center 42%; }

/* 轮播控件：参考图是「白底胶囊 + 红点 + 01/04」，位置贴右下 */
.h-poster-nav {
    right: 14px;
    bottom: 14px;
    padding: 5px 9px;
    gap: 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 4px 14px rgba(20, 32, 28, .14);
}
.h-dots i { width: 6px; height: 6px; }
.h-dots i.on { background: #e8402a; }
.h-counter { font-size: 10.5px; }

/* 平板/移动：恢复单列后不再需要分栏比例 */
@media (max-width: 1279px) {
    .h-poster { grid-template-columns: 1fr; }
}

/* 标题强制三行：参考图为「A world of / possibilities. / Ready to source.」。
   收窄 max-width（按字号等比，10.5em），让 "A world of possibilities." 无法挤在一行，
   自然折成两行，再加末句正好三行。用 em 是为了断点缩放时折行位置保持一致。 */
.h-poster-title { max-width: 10.5em; }

/* 表单再压一档：桌面端字段高 34px、字号 12px，腾出约 60px 给整块降高 */
.h-field input,
.h-field textarea { padding: 7px 9px; font-size: 12px; }
.h-field textarea { min-height: 44px; }
.h-field > span { font-size: 10.5px; }
.h-quote { padding: 12px; }
.h-quote-head p { margin-bottom: 8px; }
.h-quote-foot { margin-top: 8px; }
.h-quote-send { min-height: 36px; }

/* 标题断行改由内容（换行符）控制，CSS 不再用宽度硬折。
   只保留一个上限防止超长单词撑破左栏。 */
.h-poster-title {
    max-width: 100%;
    overflow-wrap: break-word;
}

/* ============================================================
   12) 海报图与左栏的接缝处理
   ------------------------------------------------------------
   现象：布局本身是贴合的（实测容器起点 = 左栏右边界，同高 820.8），
        但图片左边缘是一大片虚化的浅米墙面，与左栏卡片色 #f7efe4 不完全一致，
        视觉上像"图片浮在卡片上、中间有一条浅缝"。
   处理：① 重新裁切图片，让木纹板更贴近左边缘（内容层面）；
        ② 左边缘加 12% 宽的渐隐遮罩，把图片柔和地过渡到卡片色（样式层面）。
        两者叠加后，接缝在任何图片上都不可见 —— 即使以后换成纯白底的产品图。
   ============================================================ */
.h-poster-visual::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 12%;
    background: linear-gradient(90deg,
        var(--h-cream) 0%,
        rgba(247, 239, 228, .62) 45%,
        rgba(247, 239, 228, 0) 100%);
    pointer-events: none;
    z-index: 1;
}

/* 轮播控件必须压在遮罩之上 */
.h-poster-nav { z-index: 2; }

/* 阿语（RTL）镜像到右侧 */
[dir="rtl"] .h-poster-visual::after {
    left: auto;
    right: 0;
    background: linear-gradient(270deg,
        var(--h-cream) 0%,
        rgba(247, 239, 228, .62) 45%,
        rgba(247, 239, 228, 0) 100%);
}

/* 平板/移动端海报改为上下布局，接缝在水平方向，遮罩改为顶部渐隐 */
@media (max-width: 1279px) {
    .h-poster-visual::after {
        top: 0; left: 0; right: 0; bottom: auto;
        width: auto;
        height: 18%;
        background: linear-gradient(180deg,
            var(--h-cream) 0%,
            rgba(247, 239, 228, .5) 40%,
            rgba(247, 239, 228, 0) 100%);
    }
    [dir="rtl"] .h-poster-visual::after { right: 0; left: 0; }
}

/* 修正：平板/移动端海报是上下布局（图在上、文在下），
   图片左右已占满整行、不存在侧向接缝，顶部又是卡片边缘。
   此时再加渐隐只会让图片顶部"发白褪色"，反而更脏 —— 直接关掉。 */
@media (max-width: 1279px) {
    .h-poster-visual::after { display: none; }
}

/* ============================================================
   13) 海报区严格对齐客户设计稿（去掉留资框后重排）
   ------------------------------------------------------------
   客户稿实测：整块 806×352（比例 2.29:1），左栏 46%、右图 54%，
              左栏四行内容上下留白很窄（顶 36 / 底 22），文字几乎填满。
   去掉表单后内容只剩「眉标 / 三行标题 / 描述 / 双按钮」，
   因此把字号与留白同步放大，让密度回到客户稿的水平。
   ============================================================ */

.h-poster {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);   /* 46 : 54 */
}

.h-poster-text {
    padding: clamp(32px, 3.6vw, 58px) clamp(26px, 3.2vw, 52px);
    gap: clamp(12px, 1.5vw, 22px);
    justify-content: center;
}

/* 眉标 */
.h-eyebrow { font-size: 11.5px; letter-spacing: .13em; }

/* 标题：客户稿里三行几乎撑满左栏宽度 */
.h-poster-title {
    font-size: clamp(30px, 3.4vw, 58px);
    line-height: 1.14;
    letter-spacing: -0.02em;
    font-weight: 700;
    max-width: 100%;
}

/* 描述：客户稿 3 行，行距 1.6 */
.h-poster-desc {
    font-size: clamp(13.5px, 1.05vw, 16px);
    line-height: 1.62;
    max-width: 30em;
}

/* 按钮：客户稿两个胶囊等高，主按钮橙底、次按钮白底细描边 */
.h-poster-actions {
    margin-top: clamp(4px, .8vw, 12px);
    gap: 12px;
}
.h-poster-actions .h-btn {
    min-height: clamp(44px, 3.2vw, 52px);
    padding: 0 clamp(22px, 1.9vw, 30px);
    font-size: clamp(13px, .95vw, 15px);
}

/* 右图在客户稿里占比更大，主体更靠中，避免边缘被裁 */
.h-poster-visual img { object-position: center 46%; }

/* ------------------------------------------------------------
   关键修复：右图不能反过来决定整块高度
   ------------------------------------------------------------
   现象：删掉询盘表单后左栏只剩 4 行内容（约 420px），但海报整体仍有 778px 高。
   原因：img{height:100%} 在 grid item 里形成循环 —— 图片按自身 1:1 比例、
        以「右栏宽度 778」为基准撑出 778 高度，反过来把整块撑高。
        （有表单时左栏 821px 更高，这个循环被掩盖了，所以之前没暴露。）
   修复：图片改为绝对定位填充，彻底退出尺寸计算，高度完全由左栏内容决定。
   ------------------------------------------------------------ */
.h-poster-visual img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
}

/* 左栏是唯一的高度决定者，压缩上下留白，让比例贴近客户稿的 2.29:1 */
.h-poster-text {
    padding: clamp(34px, 3.9vw, 62px) clamp(26px, 3.2vw, 52px);
    gap: clamp(14px, 1.7vw, 26px);
}
.h-poster-title { font-size: clamp(30px, 3.55vw, 60px); }

/* ============================================================
   注意：.h-quote / .h-field / .h-captcha 等样式当前「无对应元素」
   ------------------------------------------------------------
   按客户稿要求，海报左栏已移除内嵌留资框（改为按钮跳转询盘页），
   故 .h-quote 系列规则暂时不会命中任何 DOM。
   保留原因：这些类在询盘页以外的场景仍可复用；且若日后恢复内嵌表单，
   只需把 index.php 里的 <form class="h-quote"> 加回，样式即可直接生效。
   不会对页面产生任何副作用（选择器无匹配）。
   ============================================================ */

/* ============================================================
   14) 左栏留白压缩（最终版）
   ------------------------------------------------------------
   客户稿实测：内容占左栏高度 83%（顶部留白 10%、底部 6%）。
   本版原来留白 22%（上下各 62px），视觉上"空一块"。
   做法：上下 padding 62→44、gap 26→32、标题 60→64、描述限宽到 3 行，
        让内容撑起来，留白收敛到约 16%。
   ============================================================ */
.h-poster-text {
    padding: clamp(28px, 3vw, 44px) clamp(26px, 3.2vw, 52px);
    gap: clamp(16px, 2vw, 32px);
}

.h-poster-title {
    font-size: clamp(30px, 3.4vw, 64px);
    line-height: 1.13;
}

/* 描述限宽让它在桌面端保持 3 行，避免 2 行后下方又空出来 */
.h-poster-desc {
    font-size: clamp(13.5px, 1.02vw, 15.5px);
    line-height: 1.6;
    max-width: 26em;
}

/* ============================================================
   15) 页脚 / CTA 水平对齐（2026-10-29 修正）
   ------------------------------------------------------------
   现象：橙色 CTA 条与页脚左右边缘对不齐，页脚明显更宽、更靠两边。
   设计稿像素实测（1190 宽截图）三者完全对齐：
       CTA 条 214..1011 ／ 分割线 213..1011 ／ 页脚文字 216..1009

   线上实测（1920）当时是：
       Hero 卡片 / 海报 / 步骤条 / CTA → 240..1680（正确）
       页脚内容                        → 96..1824（错了 144px）

   两个根因（叠加）：
     ① style.css 里有全局 `footer{padding:60px 5% 30px}`，
        5% × 1920 = 96px，`.h-footer` 没覆盖 padding-inline，被推进来了；
     ② --h-container / --h-gutter 定义在 .home 上，而 <footer> 在 .home 之外，
        取不到变量 → max-width 与 padding-inline 整条声明失效（computed
        为 none / 0px），内容于是铺到接近整屏。

   对应修复：
     · 变量上移到 :root（含各断点覆盖）；
     · .h-footer 显式 padding:0，内边距交给 .h-footer-inner；
     · .h-footer-inner 改用与 .h-cta 完全相同的「1440 / 扣 gutter」算法；
     · 分割线由 .h-footer 移到 .h-footer-inner，只跨内容宽度，不再整屏通栏；
     · CTA 恢复条内 padding（此前被 `padding-inline:0` 清零，文字贴边）。

   实测（本文件生效后）：1920/1440/1280/768/390 五档，
   CTA 与页脚容器左/右边界差值均为 0px。
   ============================================================ */

/* 条内左右留白：设计稿实测约 54px（1440 内容宽下）。
   必须用 `.home > .h-cta` 这一级选择器 —— 第 7 节里
   `.home > section … { padding-inline: var(--h-gutter) }` 是 (0,2,0)，
   单写 `.h-cta`（0,1,0）会被它压成 24px。 */
.home > .h-cta { padding-inline: clamp(20px, 3.2vw, 52px); }

/* ============================================================
   16) 海报轮播（2026-10-29 新增）
   ------------------------------------------------------------
   结构（index.php）：
     .h-poster-visual.has-slider
        └ .h-track            ← 横向排列，靠 transform 平移
             └ .h-slide × N   ← 每张占满一屏宽
        └ .h-poster-nav       ← ‹ 圆点 › 计数（z-index 2，压在图片上）

   为什么用绝对定位的 track：右图区高度由左栏内容决定（见第 13 节说明），
   track 一旦参与布局，图片会按自身比例把整块撑高，回到之前那个循环坑里。
   所以 track 用 inset:0 完全脱离尺寸计算，高度永远是左栏给的高度。
   ============================================================ */

.h-poster-visual.has-slider {
    cursor: pointer;
    /* 只允许纵向原生滚动，横向手势交给我们处理；
       不写的话移动端横向拖动会被浏览器当成页面滚动，pointercancel 直接中断 */
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

/* 键盘聚焦时给个可见轮廓（键盘 ← → 可翻页） */
.h-poster-visual.has-slider:focus-visible {
    outline: 2px solid var(--h-orange);
    outline-offset: -3px;
}

.h-track {
    position: absolute;
    inset: 0;
    display: flex;
    height: 100%;
    will-change: transform;
}

.h-slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
}

/* 图片本身不吃指针事件，事件统一由 .h-poster-visual 处理，拖动才不会断 */
.h-slide img {
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* 控件热区：箭头与圆点都要好点 */
.h-poster-nav .h-nav-btn {
    display: grid;
    place-items: center;
    transition: background-color .15s ease;
}
.h-poster-nav .h-nav-btn:hover { background: rgba(20, 32, 28, .07); }
.h-dots i {
    cursor: pointer;
    /* 视觉 6px，热区撑到 12px，避免点在圆点边缘点不中 */
    margin: -3px;
    padding: 3px;
    box-sizing: content-box;
    background-clip: content-box;
}

/* ============================================================
   17) 修回平板/移动端的海报单列（2026-10-29 发现并修正）
   ------------------------------------------------------------
   问题：第 13 节在文件末尾写了无条件规则
         `.h-poster { grid-template-columns: minmax(0,.85fr) minmax(0,1fr) }`，
        它与 @media(max-width:1279px) 里的 `.h-poster{grid-template-columns:1fr}`
        特异性相同但位置更靠后 —— 于是断点规则被整段压掉，
        平板/手机仍然按「左文右图」两栏排，右图被压到 166~334px 宽。
   实测（修复前）：768 → 右图 334px；390 → 右图 166px（应是整行 728 / 362）。
   同理第 13 节还把移动端的 `.h-poster-text` 内边距与标题字号覆盖回了桌面值。
   这里统一放在文件最末，确保压过第 13 节。
   ============================================================ */
@media (max-width: 1279px) {
    .h-poster { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .h-poster-text { padding: 22px 18px 26px; }
    .h-poster-title { font-size: 25px; line-height: 1.2; }
    .h-poster-visual { min-height: 220px; max-height: 260px; }
}

/* ============================================================
   18) 移动端整体重排（2026-10-29，按移动端设计稿）
   ------------------------------------------------------------
   对照设计稿逐块对齐：
     ① 顶栏：汉堡 / 品牌居中 / 搜索·购物袋·EN
     ② 顶栏下方整条搜索框（桌面隐藏）
     ③ Hero：标题两行（第二行橙色衬线斜体）+ 说明 + 三枚横向胶囊
     ④ 海报：文案在上、图片在下；轮播控件改为「两侧圆形箭头 + 左下计数 + 底部圆点」
     ⑤ 图墙：1 通栏 + 2 + 2；标签移到左上、右下加圆形箭头
     ⑥ 三步流程：左侧标题 + 右侧编号列表（两栏）
     ⑦ CTA：橙色块内居中按钮
     ⑧ 页脚：整体居中，隐藏标语行
   注意：全部写在文件末尾。前面多个断点段落里有同特异性规则
        （尤其是第 13 节的无条件规则），不这样放会被压掉。
   ============================================================ */

/* --- 只在移动端出现的元素，桌面先隐藏 --- */
.topbar-lang,
.mobile-search,
.h-col-go { display: none; }

@media (max-width: 767px) {

    /* ---------- ① 顶栏 ---------- */
    .topbar { border-bottom: 0; }
    .topbar-inner {
        grid-template-columns: auto 1fr auto;
        padding: 10px 14px 8px;
        gap: 6px;
    }
    .topbar-brand { font-size: 19px; letter-spacing: -0.03em; }
    .brand-badge { font-size: .40em; padding: 2px 5px; border-radius: 4px; }

    .topbar-left { gap: 4px; }
    .topbar-right { gap: 2px; }

    .mobile-menu-btn {
        width: 34px; height: 34px;
        display: grid; place-items: center;
        font-size: 17px; line-height: 1;
    }

    .topbar-cart { width: 34px; height: 34px; }
    .cart-count { min-width: 15px; height: 15px; line-height: 15px; font-size: 9.5px; top: -2px; right: -2px; }

    /* EN + 小三角 */
    .topbar-lang {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        height: 34px;
        padding: 0 2px 0 4px;
        font-size: 12px;
        font-weight: 700;
        color: var(--h-ink);
        text-decoration: none;
    }
    .topbar-lang::after {
        content: '';
        width: 0; height: 0;
        border-left: 3.5px solid transparent;
        border-right: 3.5px solid transparent;
        border-top: 4.5px solid currentColor;
    }

    /* 主导航收进汉堡菜单（设计稿移动端没有分类横条） */
    .mainnav { display: none; }

    /* ---------- ② 整条搜索框 ---------- */
    .mobile-search {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0 14px 10px;
        height: 38px;
        padding: 0 14px;
        background: #f1efe6;
        border-radius: 999px;
        color: #9aa09a;
    }
    .mobile-search input {
        flex: 1 1 auto;
        min-width: 0;
        border: 0;
        outline: 0;
        background: none;
        font-family: inherit;
        font-size: 12.5px;
        color: var(--h-ink);
        -webkit-appearance: none;
    }
    .mobile-search input::placeholder { color: #a8ada6; }
    /* iOS 上 type=search 会带一个原生清除按钮，样式脏，去掉 */
    .mobile-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

    /* 区块纵向节奏收紧 */
    .home > section { margin-bottom: 20px; }

    /* ---------- ③ Hero ---------- */
    .h-hero { padding-top: 4px; }
    .h-hero-card {
        padding: 18px 16px 16px;
        gap: 14px;
        border-radius: var(--h-radius-lg);
    }
    .h-hero-title {
        font-size: 26px;
        line-height: 1.16;
        letter-spacing: -0.025em;
        margin-bottom: 10px;
        max-width: none;
    }
    /* 第二行「Endless possibilities.」衬线斜体 + 品牌橙 */
    .h-hero-title em {
        font-family: Georgia, "Times New Roman", "Songti SC", serif;
        font-style: italic;
        font-weight: 400;
        color: var(--h-orange);
    }
    .h-hero-desc {
        font-size: 11.5px;
        line-height: 1.62;
        max-width: none;
    }

    /* 三枚胶囊横向排一行 */
    .h-pills {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 6px;
        width: 100%;
    }
    .h-pill {
        flex: 1 1 0;
        min-width: 0;
        min-height: 32px;
        padding: 0 7px;
        gap: 5px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }
    .h-pill-ico { width: 17px; height: 17px; flex: 0 0 17px; }
    .h-pill-ico svg { width: 10px; height: 10px; }

    /* ---------- ④ 海报：文案在上、图片在下 ---------- */
    .h-poster { grid-template-columns: 1fr; }
    .h-poster-text {
        order: 0;
        padding: 20px 16px 18px;
        gap: 10px;
        justify-content: flex-start;
    }
    .h-poster-visual {
        order: 1;
        /* 图片高度按比例给，宽 362 时约 215px；不参与左栏高度计算 */
        aspect-ratio: 1.68;
        min-height: 0;
        max-height: none;
    }
    .h-eyebrow { font-size: 10px; letter-spacing: .08em; }
    .h-poster-title { font-size: 25px; line-height: 1.14; }
    .h-poster-desc {
        font-size: 11.5px;
        line-height: 1.6;
        max-width: none;
    }
    .h-poster-actions {
        margin-top: 4px;
        gap: 6px;
        flex-wrap: nowrap;
    }
    .h-poster-actions .h-btn {
        flex: 0 0 auto;
        min-height: 34px;
        padding: 0 13px;
        font-size: 11.5px;
        gap: 4px;
        white-space: nowrap;
    }
    .h-poster-actions .h-btn .ico { width: 13px; height: 13px; }

    /* 轮播控件：整层铺满图片，子元素各自定位 */
    .h-poster-nav {
        position: absolute;
        inset: 0;
        display: block;
        padding: 0;
        background: none;
        box-shadow: none;
        border-radius: 0;
        pointer-events: none;          /* 只让按钮/圆点可点，中间区域留给拖动 */
        z-index: 2;
    }
    .h-poster-nav .h-nav-btn {
        pointer-events: auto;
        position: absolute;
        top: 50%;
        margin-top: -17px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .92);
        color: var(--h-ink);
        font-size: 17px;
        box-shadow: 0 2px 10px rgba(20, 32, 28, .22);
    }
    .h-poster-nav .h-nav-btn[data-step="-1"] { left: 10px; }
    .h-poster-nav .h-nav-btn[data-step="1"] { right: 10px; }

    .h-poster-nav .h-dots {
        pointer-events: auto;
        position: absolute;
        left: 50%;
        bottom: 12px;
        transform: translateX(-50%);
        gap: 6px;
    }
    .h-poster-nav .h-dots i { background: rgba(255, 255, 255, .72); }
    .h-poster-nav .h-dots i.on { background: #e8402a; }

    .h-poster-nav .h-counter {
        position: absolute;
        left: 14px;
        bottom: 10px;
        font-size: 10.5px;
        font-weight: 600;
        color: #fff;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    }

    /* ---------- ⑤ 图墙 ---------- */
    .h-sec-head { margin-bottom: 12px; }
    .h-sec-head h2 { font-size: 20px; }
    .h-sec-head p { font-size: 12px; }

    .h-col-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 118px;
        gap: 8px;
    }
    /* 1 通栏 + 2 + 2（5 个）；数量变化时也保证不留空块 */
    .h-col-grid .h-col { grid-column: span 1; grid-row: span 1; }
    .h-col-grid.cols-5 .h-col:nth-child(1),
    .h-col-grid.cols-4 .h-col:nth-child(1),
    .h-col-grid.cols-3 .h-col:nth-child(1) { grid-column: span 2; }
    .h-col-grid.cols-2 .h-col:nth-child(1),
    .h-col-grid.cols-2 .h-col:nth-child(2) { grid-column: span 1; }
    .h-col-grid.cols-1 .h-col:nth-child(1) { grid-column: span 2; }

    /* 标签移到左上，去掉行内箭头 */
    .h-col-label {
        left: 12px;
        right: 40px;
        top: 12px;
        bottom: auto;
        font-size: 14px;
        line-height: 1.24;
        padding-right: 0;
    }
    .h-col-label .ico { display: none; }

    /* 右下角圆形箭头 */
    .h-col-go {
        display: grid;
        place-items: center;
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .88);
        color: var(--h-ink);
        box-shadow: 0 2px 8px rgba(20, 32, 28, .18);
    }
    .h-col-go .ico { width: 13px; height: 13px; }

    /* 标签在顶部，遮罩改从上往下压深，保证白字可读 */
    .h-col-shade {
        inset: 0 0 auto 0;
        height: 62%;
        background: linear-gradient(to bottom, rgba(12, 20, 16, .55), rgba(12, 20, 16, 0));
    }

    /* ---------- ⑥ 三步流程：左标题 + 右列表 ---------- */
    .h-steps {
        grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
        gap: 12px;
        align-items: start;
        padding-block: 0;
    }
    .h-steps-left h2 {
        font-size: 19px;
        line-height: 1.18;
        margin-bottom: 6px;
        max-width: none;
    }
    .h-steps-left p { font-size: 11px; line-height: 1.5; }

    .h-steps-list {
        grid-template-columns: 1fr;
        gap: 9px;
    }
    .h-steps-list li {
        font-size: 11.5px;
        gap: 8px;
        line-height: 1.3;
    }
    .h-step-num { width: 22px; height: 22px; flex: 0 0 22px; font-size: 10.5px; }

    /* ---------- ⑦ CTA ---------- */
    .h-cta {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        padding: 20px 18px;
        text-align: center;
    }
    .h-cta-text h2 { font-size: 17px; line-height: 1.3; margin-bottom: 4px; }
    .h-cta-text p { font-size: 11.5px; line-height: 1.5; }
    .h-cta .h-btn-dark {
        width: auto;
        min-width: 210px;
        min-height: 38px;
        font-size: 12.5px;
        padding: 0 20px;
    }

    /* ---------- ⑧ 页脚：居中 ---------- */
    .h-footer { margin-top: 24px; }
    .h-footer-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding-block: 22px;
    }
    .h-footer-brand { text-align: center; }
    .h-footer-logo { justify-content: center; font-size: 17px; }
    /* 设计稿页脚没有标语行，只留品牌 + 链接 + 版权 */
    .h-footer-brand p { display: none; }

    .h-footer-right { text-align: center; width: 100%; }
    .h-footer-links { justify-content: center; gap: 4px 14px; margin-bottom: 6px; }
    .h-footer-links a { font-size: 11.5px; }
    .h-footer-copy { font-size: 10.5px; }
}

/* ============================================================
   19) 移动端细节修正（对照设计稿第二遍）
   ============================================================ */
@media (max-width: 767px) {

    /* (a) 圆点被卡片底边裁掉一半。
           根因：第 16 节给 .h-dots i 加过「margin:-3px + padding:3px + content-box」
           的扩热区写法，子元素实际盒子 12×12 会溢出 .h-dots 的 6px 行高，
           而 .h-poster-visual 是 overflow:hidden，于是下沿被切。
           改为：圆点固定在 7px，把热区交给父级 padding。 */
    .h-poster-nav .h-dots {
        bottom: 4px;
        padding: 8px;
        gap: 4px;
    }
    .h-poster-nav .h-dots i {
        width: 7px;
        height: 7px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        background-clip: border-box;
    }

    /* (b) CTA：设计稿是文案左对齐、按钮居中 */
    .h-cta { text-align: left; align-items: stretch; }
    .h-cta-text { text-align: left; }
    .h-cta .h-btn-dark { align-self: center; }

    /* (c) 步骤标题整句用衬线斜体（设计稿两行同为衬线斜体，不只后半句） */
    .h-steps-left h2 {
        font-family: Georgia, "Times New Roman", "Songti SC", serif;
        font-style: italic;
        font-weight: 400;
        letter-spacing: 0;
    }
    .h-steps-left h2 em,
    .h-steps-left h2 i { font-style: italic; }
}

/* 圆点在浅色照片上对比不足：加一层极淡投影，保证任何底图上都能看见 */
@media (max-width: 767px) {
    .h-poster-nav .h-dots { bottom: 8px; }
    .h-poster-nav .h-dots i {
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    }
    .h-poster-nav .h-dots i.on { background: #e8402a; }
    .h-poster-nav .h-counter { bottom: 8px; }
}

/* 320~359px 的窄屏（iPhone SE 一代等）：三枚胶囊再收一档，
   否则「Flexible orders」会超宽溢出胶囊（实测 320 下 95 > 91）。 */
@media (max-width: 359px) {
    .h-pill {
        font-size: 9px;
        padding: 0 5px;
        gap: 4px;
        min-height: 30px;
    }
    .h-pill-ico { width: 15px; height: 15px; flex: 0 0 15px; }
    .h-pill-ico svg { width: 9px; height: 9px; }
    .h-poster-title { font-size: 23px; }
    .h-col-grid { grid-auto-rows: 104px; }
}

/* ============================================================
   20) Banner 跳转链接（2026-10-29）
   ------------------------------------------------------------
   后台给某条 Banner 配了跳转链接后，整张图会包一层 <a>。
   这一层必须是绝对定位铺满，否则 <a> 是行内元素，
   图片（absolute inset:0）会失去定位参照，直接跑到卡片左上角。
   ============================================================ */
.h-slide-link {
    position: absolute;
    inset: 0;
    display: block;
    outline-offset: -3px;
}
.h-slide-link:focus-visible { outline: 2px solid var(--h-orange); }

/* 带链接的 Banner：禁掉原生拖拽与文字选择，
   否则按住图片拖动会触发浏览器「拖链接」手势，手势被接管后翻页失效 */
.h-slide-link {
    -webkit-user-drag: none;
    user-select: none;
}

/* ============================================================
   23) 海报右图加宽 / 海报加高 / 首屏减高 / 胶囊可点（2026-10-29）
   ------------------------------------------------------------
   全部写在文件末尾：前面十几个段落里有同特异性规则，靠层叠才能压过。
   ============================================================ */

/* ---------- (1) 右图加宽到左栏边界 ----------
   现象：图片容器本来就贴着左栏右边界（红线位置），但第 12 节给左边缘加了
        12% 宽的渐隐遮罩，把图片左侧约 90px 涂成了卡片色，
        看起来像"图片从更右边才开始、左边空了一块"。
   处理：渐隐收窄到 3.5%（约 27px），只保留柔化接缝的作用，
        图片内容真正从红线开始铺开。 */
.h-poster-visual::after {
    width: 3.5%;
    background: linear-gradient(90deg,
        var(--h-cream) 0%,
        rgba(247, 239, 228, .55) 38%,
        rgba(247, 239, 228, 0) 100%);
}
[dir="rtl"] .h-poster-visual::after {
    width: 3.5%;
    background: linear-gradient(270deg,
        var(--h-cream) 0%,
        rgba(247, 239, 228, .55) 38%,
        rgba(247, 239, 228, 0) 100%);
}

/* ---------- (2) 海报整块加高 1cm ----------
   CSS 的 1cm = 37.8px（按 96dpi 定义）。1920 下整块原高 561px → 599px。
   做法：只加左栏上下内边距（44 → 63），高度由左栏内容决定，右图 absolute
        填充会自动跟着变高，不用动图片本身。 */
.h-poster-text {
    /* 3.55vw → 3.8vw：标题上限从 64 收到 58 之后三行少了约 20px，
       这里补回来，1920 下整块仍是 598~599px（上一轮定的 +1cm）。
       用 vw 连续缩放而不是加一个 1700px 断点 —— 那样 1699→1700 会突然跳 45px。 */
    padding-block: clamp(38px, 3.8vw, 73px);
}

/* ---------- (3) 首屏卡片上下各减 10% ----------
   目标：卡片整体高度 -10%（1920 下 401 → 约 361）。
   高度 = 内容 + 2 × padding-block，所以每边减 20px（64 → 44）
   才能让总高降 40px；只把 padding 本身 ×0.9 只降 3%，肉眼看不出来。
   移动端文案占比极高、padding 只占 30px，那边按"留白各 -10%"处理（见下方媒体查询）。 */
.h-hero-card {
    padding-block: clamp(22px, 2.9vw, 44px);
}

/* ---------- (4) 特性胶囊：有链接时整块可点 ----------
   结构改成 li > .h-pill-in（span 或 a），内边距与间距全部移到内层，
   这样 <a> 能铺满整个胶囊，点边缘也生效，不会只有文字能点。 */
.h-pill {
    padding: 0;
    gap: 0;
    align-items: stretch;
}
.h-pill-in {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
    /* 用逻辑属性：LTR 下左 10 / 右 22（图标在左，贴着内边）；
       RTL 下自动镜像成右 10 / 左 22，图标贴边而不会顶到圆角上。
       写成物理值 padding:10px 22px 10px 10px 的话，阿语站图标会压到边缘。 */
    padding-block: 10px;
    padding-inline: 10px 22px;
    border-radius: inherit;
    color: inherit;
    text-decoration: none;
}
a.h-pill-in:focus-visible {
    outline: 2px solid var(--h-orange);
    outline-offset: 2px;
}

/* 可点的胶囊需要「能点」的暗示：鼠标变手型 + 悬停微暗。
   用 filter 而不是改 background，是因为三枚胶囊底色各不相同，
   写死一个 hover 色会盖掉原本的绿/紫/橙。 */
a.h-pill-in {
    cursor: pointer;
    transition: filter .16s ease, transform .16s ease;
}

/* 只在真正支持 hover 的设备上做悬停态：
   触屏上 :hover 会「粘住」（点完一直保持变暗，直到点别处），是常见的移动端小毛病。 */
@media (hover: hover) and (pointer: fine) {
    a.h-pill-in:hover { filter: brightness(.955); }
}

a.h-pill-in:active { transform: scale(.985); }

/* 尊重系统的「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
    a.h-pill-in { transition: none; }
    a.h-pill-in:active { transform: none; }
}

/* ---------- 移动端：按同一比例适配，不改变原有观感 ---------- */
@media (max-width: 1279px) {
    /* 平板/手机的海报是上下单列，图片高度由 min/max-height 或 aspect-ratio 决定，
       左栏加高只会让文案区上下多出一圈空白（实测 768 下多 20px），这里还原。 */
    .h-poster-text { padding-block: clamp(28px, 3vw, 44px); }
}

@media (max-width: 767px) {
    /* 首屏上下留白各 -10%：原 18 / 16 → 16 / 14（移动端高度由长文案决定，只能压缩留白） */
    .h-hero-card { padding: 16px 16px 14px; }

    /* 海报是单列布局，图片高度由 aspect-ratio 决定，
       所以上面那个「加高 1cm」的左栏 padding 在移动端要还原，
       否则文案区上下会多出 40px 空白。 */
    .h-poster-text { padding: 20px 16px 18px; }

    /* 胶囊内边距保持移动端的紧凑值（第 18 节原本写在 .h-pill 上） */
    .h-pill { padding: 0; gap: 0; }
    .h-pill-in { padding: 0 7px; gap: 5px; }
}

@media (max-width: 359px) {
    .h-pill { padding: 0; gap: 0; }
    .h-pill-in { padding: 0 5px; gap: 4px; }
}

/* ============================================================
   24) 分类图墙：每格高度 +1cm（2026-10-29）
   ------------------------------------------------------------
   1cm = 37.8px（CSS 定义 1px = 1/96 inch），取整 38px。
   两行各自在当前值上 +38，保留「第一行比第二行高」的层次，
   而不是按比例放大 —— 那样第二行会被拉得过多，两行几乎等高。

       第一行  340 → 378（1920）        第二行  220 → 258（1920）

   用 calc 包住原来的 clamp，而不是把 38px 折算成 vw：
   折算成 vw 的话，1440 下只增加 28px、768 下只增加 15px，
   就不是「1 厘米」了。固定 +38px 在任何视口都真的是 1cm。

   移动端不动：那边是 118px 的紧凑网格（320px 屏 104px），
   再加 38px 会变成 156px，比屏幕宽度的一半还高，图墙会被撑得很笨重。
   ============================================================ */
@media (min-width: 768px) {
    .h-col-grid {
        grid-template-rows:
            calc(clamp(200px, 17.7vw, 340px) + 38px)   /* 第一行：2 张大图 → 378px @1920 */
            calc(clamp(140px, 11.5vw, 220px) + 38px);  /* 第二行：3 张小图 → 258px @1920 */
        grid-auto-rows: calc(clamp(140px, 11.5vw, 220px) + 38px);
    }
}

/* ============================================================
   25) 海报右图再加宽：左栏 46% → 39%（2026-10-29）
   ------------------------------------------------------------
   用户标注：图片左边界要左移到黑线位置。
   截图像素实测（1910×764 @2x）：
     卡片 x=20..1820（宽 1800）、文字区止于 x=851、黑线在 x=726
       · 当前边界  (851-20)/1800 = 46.2%  ← 与现有 46% 完全吻合
       · 目标边界  (726-20)/1800 = 39.2%  ← 黑线位置
   所以把 46:54 改成 39:61，右图在 1920 下从 778px 加宽到 878px（+100px）。

   左栏同时收窄内边距（52 → 40），因为标题 "Ready to source." 是单行不换行的
   硬指标：内容宽必须 ≥ 标题实测宽度，否则会折成四行、破坏设计稿版式。
   ============================================================ */
/* 注意：必须限定在 ≥1280，否则会压掉第 17 节 @media(max-width:1279px) 的单列规则
   （同特异性、位置更后 → 断点失效，平板右图会被压成两栏里的窄条，第 13 节踩过这个坑）。 */
@media (min-width: 1280px) {
    .h-poster {
        grid-template-columns: minmax(0, 0.6393fr) minmax(0, 1fr);   /* 39 : 61 */
    }

    .h-poster-text {
        padding-inline: clamp(22px, 2.6vw, 40px);
    }
}

/* 左栏收窄后标题的可用宽度从 558 降到 482。
   实测 "Ready to source." 在 64px 时要占 476px —— 只剩 6px 余量，
   换个字体或亚像素渲染就会折成第四行、把整块撑高。
   把 clamp 的上限从 64 收到 58（1706px 以下视口不受影响，字号仍是 3.4vw），
   1920 下标题宽度回到约 431px，留出 51px 呼吸位。
   同样限定 ≥1280：否则会覆盖移动端第 18 节的 25px，手机标题被撑成 30px。 */
@media (min-width: 1280px) {
    .h-poster-title {
        font-size: clamp(30px, 3.4vw, 58px);
    }
}

/* ============================================================
   26) 客户反馈：首屏去掉「黑框」，上下只留 0.3cm（2026-10-29）
   ------------------------------------------------------------
   现象：客户截图里，首屏米色卡片的正上方与正下方各有一条黑色横带，
        要求去掉，且卡片上下各只留 0.3cm 的空白。
   做法：
     ① 首屏区块的上下内边距由 clamp(16~28) / clamp(28~48) 统一收成 0.3cm，
        同时把 margin-bottom 清零 —— 否则 .home > section 的 28~48px
        间距还会在卡片下方再叠一层。
        1cm = 37.8px，0.3cm ≈ 11.3px；这里直接用 cm，
        不折算成 px/vw，任何视口下都真的是 0.3 厘米。
     ② 卡片本身没有 border，但外挂样式（翻译插件、暗色模式扩展、
        阅读模式等）可能给区块补边框，显式清零兜底，
        保证任何环境下都不会再出现框线。
     ③ 选择器用 .home > .h-hero（权重 0,2,0），
        压过第 844 行的 .home > .h-hero 与移动端第 18 节的 .h-hero（0,1,0），
        所以不必回头改前面那些断点段落，也不会影响其它区块的节奏。
   ============================================================ */
.home > .h-hero {
    padding-block: .3cm;
    margin-bottom: 0;
    border: 0;
    outline: 0;
}

.h-hero-card {
    border: 0;
    outline: 0;
    box-shadow: none;
}

/* ============================================================
   27) 客户反馈：分类图墙第二行 3 张小图 = 第一行 2 张大图的高度
   ------------------------------------------------------------
   原设计稿是「上大下小」的层次（1920 下 378 : 258），
   客户要求两行等高，于是第二行直接沿用第一行的行高公式：
     第一行、第二行都取 calc(clamp(200px, 17.7vw, 340px) + 38px)
     → 1920 视口下两行同为 378px。
   图片是 object-fit: cover，改高只做等比裁切，不会拉伸变形。

   移动端（<768）本来就是「1 通栏 + 2 + 2」的三行等高质量（140px），
   不存在第二行更矮的情况，因此保持原值不动，避免无谓的视觉变化。
   ============================================================ */
@media (min-width: 768px) {
    .h-col-grid {
        grid-template-rows: repeat(2, calc(clamp(200px, 17.7vw, 340px) + 38px));
        grid-auto-rows: calc(clamp(200px, 17.7vw, 340px) + 38px);
    }
}

/* 移动端复核：三行同为 140px，与第一张通栏卡等高（显式重述，防止将来
   上面的桌面规则被误扩到 <768 时出现行高不一致）。 */
@media (max-width: 767px) {
    .h-col-grid {
        grid-template-rows: none;
        grid-auto-rows: 140px;
    }
}

/* ============================================================
   28) 客户反馈：首屏卡片上下内边距连续两次「各裁 50%」（2026-10-29）
   ------------------------------------------------------------
   客户在卡片**内部**的上下留白处画红框，两轮都要求「上下各自减 50%」。
   这里合并成一条最终值，避免层层覆盖看不出当前生效值：

     原始            → 第一轮减半      → 第二轮再减半（当前）
     ≥768 clamp(22,2.9vw,44)  clamp(11,1.45vw,22)   clamp(5.5px, .73vw, 11px)
          1920: 44 → 22 → 11px；1440: 41.8 → 20.9 → 10.5px；1024: 29.7 → 14.9 → 7.5px
     <768 16 / 14px           8 / 7px               4 / 3.5px

   说明：
     ① 只动 padding-block，左右内边距原样（clamp(24px,4vw,64px) / 16px），
        标题与描述的换行位置不受影响；
     ② 用 clamp 等比缩放而不是写死 px，1280~1920 之间线性过渡，
        不会在某个断点上突然跳一截；
     ③ 选择器权重与第 23 节（.h-hero-card，0,1,0）相同，靠书写顺序靠后生效；
        移动端第 18/23 节的 padding 同样被本段覆盖，无需回头改旧段落。
     ④ 再往下压会把标题顶到卡片圆角上（1920 下 11px 已是「文字不贴边」的下限），
        如客户还要更紧，建议改的是卡片外间距，而不是内边距。
   ============================================================ */
@media (min-width: 768px) {
    .h-hero-card {
        padding-block: clamp(5.5px, .73vw, 11px);
    }
}

@media (max-width: 767px) {
    .h-hero-card {
        padding-block: 4px 3.5px;
    }
}

/* ============================================================
   29) 后台自定义文本颜色时，强调片段跟随整段（2026-10-29）
   ------------------------------------------------------------
   后台「首页装修」给每个文本框开放了字号 / 颜色（存 text_styles 表，
   由 includes/text_style.php 输出成内联样式 + data-ts 属性）。

   内联 color 只能作用于元素本身，压不住子元素自己的颜色规则：
   海报标题、首屏标题、流程标题里的 |强调片段| 会被渲染成 <em>，
   而 .h-poster-title em 之类是带品牌橙的独立规则。
   结果就是「客户把标题改成深蓝，第二行还是橙色」。
   只要设置了自定义颜色（输出 data-ts-color），就让 em 继承整段颜色。

   没设置自定义颜色时不输出该属性，em 保持原本的品牌橙强调，一分不动。
   ============================================================ */
[data-ts-color] em {
    color: inherit;
}

/* ============================================================
   30) 移动端海报：文案与按钮叠加到图片左上角（2026-10-29）
   ------------------------------------------------------------
   客户要求：<768 的排版由「上图下文」改为「文字压在图片上、靠左上角」，
   与设计稿一致；PC（≥1280）与平板（768–1279）保持原样，一行都不能变。

   实现要点（全部限定在 max-width:767px，桌面规则不受影响）：
     ① .h-poster 由 grid 改为 block + position:relative，作为叠层容器；
     ② .h-poster-visual 绝对定位铺满，充当整块背景图；
     ③ .h-poster-text 回到常规流（relative + z-index），只负责左上角内容；
     ④ .h-poster::before 铺一层暖白渐变（左上浓、右下透明），
        保证任何照片上文字都可读，同时不压暗右侧产品主体；
     ⑤ 轮播控件 z-index 提到最上层，箭头下移到 62%，
        避开「按钮行」，底部计数与圆点保持原位。

   为什么不用 aspect-ratio 固定高度：阿语文案比英文长，固定比例会被撑破或留白；
   这里用 min-height 兜底 + 文案自身高度决定最终高度，长短文案都不会截断。
   ============================================================ */
@media (max-width: 767px) {
    .h-poster {
        position: relative;
        display: block;
        min-height: 520px;
        background: #efe4d2;
    }

    .h-poster-visual {
        position: absolute;
        inset: 0;
        order: 0;
        min-height: 0;
        max-height: none;
        /* 关键：第 18 节给移动端设了 aspect-ratio:1.68（原来「上图下文」时用来定图高）。
           叠层后若不清掉，绝对定位的图会被按宽度算成 215px 高、下方露出空白。
           这里改成撑满容器。 */
        aspect-ratio: auto;
        height: 100%;
        border-radius: inherit;
        z-index: 0;
    }

    .h-poster-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 55%;
    }

    .h-poster-ph { min-height: 0; height: 100%; }

    /* 文案层：左上角 */
    .h-poster-text {
        position: relative;
        z-index: 2;
        justify-content: flex-start;
        padding: 24px 18px 0;
        gap: 10px;
        max-width: 92%;
    }

    .h-poster-actions {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 8px;
    }

    /* 可读性遮罩：左上浓 → 右下透明 */
    .h-poster::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        background: linear-gradient(158deg,
            rgba(255, 252, 246, .95) 0%,
            rgba(255, 252, 246, .86) 30%,
            rgba(255, 252, 246, .46) 52%,
            rgba(255, 252, 246, .10) 66%,
            rgba(255, 252, 246, 0) 76%);
        pointer-events: none;
    }

    /* 阿语站镜像遮罩方向 */
    [dir="rtl"] .h-poster::before {
        background: linear-gradient(202deg,
            rgba(255, 252, 246, .95) 0%,
            rgba(255, 252, 246, .86) 30%,
            rgba(255, 252, 246, .46) 52%,
            rgba(255, 252, 246, .10) 66%,
            rgba(255, 252, 246, 0) 76%);
    }

    /* 轮播控件压在遮罩与文案之上；箭头下移，避开按钮行 */
    .h-poster-nav { z-index: 3; }
    .h-poster-nav .h-nav-btn { top: 62%; }
}

/* ============================================================
   31) 移动端：logo 真正居中 + 胶囊行不再溢出（2026-10-29）
   ------------------------------------------------------------
   ① logo 居中
      原栅格 auto 1fr auto：左栏 34px（汉堡）、右栏 104px（搜索/购物袋/EN），
      中栏被挤在两者之间，实测 390 宽下品牌中心在 160px，而视口中心是 195px，
      偏左 35px —— 所以看起来"没居中"。
      改成 1fr auto 1fr：左右两栏等分剩余空间，品牌列 auto 居中，
      只要两侧控件不撑破 1fr，品牌中心就与视口中心重合。
      窄屏（≤360）再收一次间距与字号，避免右栏把 1fr 撑到不等宽。

   ② 胶囊行溢出
      原来三枚 nowrap + flex:1 1 0 硬塞一行：字号或系统字体放大时，
      文字宽度超过 1/3 屏宽，"Flexible orders" 会被裁在卡片边缘。
      改为两行自动换行（前两枚各占一半，第三枚独占一行），
      并把文字改成可换行、行高收紧，极端窄屏也不会出血。
   ============================================================ */
@media (max-width: 767px) {
    .topbar-inner {
        grid-template-columns: 1fr auto 1fr;
    }
    .topbar-left  { justify-self: start; }
    .topbar-brand { justify-self: center; }
    .topbar-right { justify-self: end; }

    .h-pills {
        /* 客户要求：一排显示、不要换行；靠"让短的那枚更窄"来腾空间。
           flex:0 1 auto → 每枚按自身文字宽度排布（No MOQ 天生就窄），
           justify-content:space-between → 剩余空间平均分到间隙上，
           三枚在整行里均匀铺开，而不是被强行拉成等宽的三分之一。 */
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px;
    }
    .h-pill {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
    }
    /* No MOQ 文字最短，再收一点左右内边距，把宽度让给 Flexible orders */
    .h-pill-2 { padding-inline: 4px; }
    .h-pill-2 .h-pill-in { padding-inline: 5px 8px; }
}

@media (max-width: 360px) {
    .topbar-inner { gap: 6px; padding-inline: 10px; }
    .topbar-right { gap: 4px; }
    .topbar-brand { font-size: 18px; }

    /* 窄屏再放一点余量，保证三枚仍然一行且文字不被裁。
       320 宽下可用宽度只有 260px，三枚文字加起来 278px，
       所以字号、图标、内边距、行间距同步收一档。 */
    .h-pills { gap: 4px; }
    .h-pill { font-size: 9px; padding-inline: 3px; gap: 4px; }
    .h-pill-in { padding-inline: 3px 6px; }
    .h-pill-ico { width: 14px; height: 14px; flex: 0 0 14px; }
    .h-pill-ico svg { width: 9px; height: 9px; }
}

/* ============================================================
   32) 移动端首屏文案排版微调（2026-10-29）
   ------------------------------------------------------------
   客户反馈「红框那块字体看着别扭」。放大截图后的问题定位：
     ① 正文 11.5px 配 1.62 行高：字小、行隙大，9 行读起来又碎又散；
     ② 正文颜色 #4c564f 在米色底上偏灰，和黑色标题反差过大，显得"发虚"；
     ③ 标题两行 line-height 1.16、letter-spacing -0.025em：
        第一行粗黑、第二行衬线斜体，贴得太紧，两行像挤在一起；
     ④ 标题与正文间距只有 10px，块与块之间没有"呼吸"。
   调整为：字距放松、行距按"小字更需行距"重算、正文加深一档并放大 0.5px、
   标题与正文之间留 14px。仅作用于 <768，PC 与平板不变。
   ============================================================ */
@media (max-width: 767px) {
    .h-hero-title {
        line-height: 1.22;
        letter-spacing: -0.01em;
        margin-bottom: 14px;
    }
    .h-hero-desc {
        font-size: 12px;
        line-height: 1.72;
        color: #3f4a44;
    }
}

/* ============================================================
   33) 移动端分类图墙：圆形箭头移到标签下方（2026-10-29）
   ------------------------------------------------------------
   客户要求：箭头不要待在右下角，要像参考稿那样紧跟在分类名下面、左对齐。

   做法：把 .h-col 在移动端改成纵向 flex 容器，图片改为绝对定位铺底，
   标签与箭头回到常规流 —— 这样「标签一行还是两行」都不需要另写规则，
   箭头永远贴着标签的下沿；用绝对定位 + 固定 top 的话，两行标签会撞在一起。

   桌面不受影响：.h-col-go 在桌面本来就是 display:none（第 1413 行），
   .h-col 的 flex 也只写在 <768 的媒体查询里。
   ============================================================ */
@media (max-width: 767px) {
    .h-col {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 12px;
    }

    /* 图片与占位符退出文档流，铺满卡片充当背景 */
    .h-col img,
    .h-col-ph {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .h-col-label {
        position: static;
        left: auto;
        right: auto;
        bottom: auto;
        z-index: 2;
        max-width: 100%;
    }

    /* 圆形箭头：跟在标签下方，左对齐 */
    .h-col-go {
        position: static;
        right: auto;
        bottom: auto;
        margin-top: 8px;
        z-index: 2;
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, .92);
    }
}