/* ============================================================
 * hongdu-home-header.css — 首页门头实验（浅蓝盒马风）
 * 设计：状态栏顶栏 + 左侧信任徽章轮播 + 搜索栏 + 四Tab导航
 * 色值全部使用 token.css 变量，零硬编码 hex
 * 创建日期：2026-09-19
 * ============================================================ */

/* ── 主容器 ── */
body.hd-home-page {
    background: var(--hex-f0f5fa);
}

.hd-home-header {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-sticky-header);
    /* 把 header 向上提 safe-area 高度，让渐变铺满状态栏区域 */
    /* FIX-CHECK:2026-09-23 状态栏常驻小图标（电量/信号）留位：
       背景铺满到手机屏幕边界（margin-top 上移），内容避开状态栏（padding-top）；
       fallback 24px 兼容不识别 env() 的安卓浏览器 */
    margin-top: calc(-1 * env(safe-area-inset-top, 24px));
    padding-top: calc(env(safe-area-inset-top, 24px) + 8px);
    /* FIX-CHECK: 20261008 搜索栏背景卡片底边下探5px（搜索栏/徽章视觉位置不变，配 .hd-trust-badge bottom:5px 抵消） */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 5px);
    width: 100%;
    /* 底部圆角过渡 */
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    /* 渐变铺满整个 header（含 safe-area 区） */
    background: linear-gradient(180deg, var(--hex-e3f2fd) 0%, var(--hex-f0f5fa) 100%);
}

.hd-header-body {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: inherit;
}

/* ── 左侧信任徽章（绝对定位贴顶：背景铺满到手机屏幕顶部，无留白） ── */
.hd-trust-badge {
    /* FIX-CHECK:2026-09-23 徽章对齐京东页眉促销卡：横长圆角矩形 108x46（四角圆角、2.4:1）、深色渐变底+白字 */
    width: 130px;
    /* FIX-CHECK: 20261008 抵消卡片 padding-bottom+5px，徽章底边保持原位（91px处）不变 */
    bottom: 5px;
    color: #ffffff;
    background: linear-gradient(135deg, #43a047, #2e7d32);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8px;
    /* FIX-CHECK:2026-09-23 梯形徽章：顶部宽100px 底部宽50px 左下90°直角 右侧斜边（clip-path） */
    border-radius: 0;
    position: absolute;
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzAgOTUiPjxwYXRoIGQ9Ik0wLDAgTDEwMCwwIEw2OCw4NyBRNjYsOTUgNjAsOTUgTDAsOTUgWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzAgOTUiPjxwYXRoIGQ9Ik0wLDAgTDEwMCwwIEw2OCw4NyBRNjYsOTUgNjAsOTUgTDAsOTUgWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    top: 0;
    left: 0;
    transition: background-color 0.4s ease;
    cursor: pointer;
}
/* 4 条播报文案对应 4 种背景色（按内容语义适配） */
/* FIX-CHECK:2026-09-24 冷色→暖色渐变：金橙/暖红/蜜橙/珊瑚，三色过渡+内光科技感 */
.hd-trust-badge.hd-badge-c0 { background: linear-gradient(135deg,#FFC36B 0%,#FF8A3C 55%,#E8641B 100%); box-shadow: inset 0 -10px 18px rgba(255,255,255,.14), 0 4px 10px rgba(232,100,27,.22); }
.hd-trust-badge.hd-badge-c1 { background: linear-gradient(135deg,#FF8A6B 0%,#F4511E 55%,#D92E2E 100%); box-shadow: inset 0 -10px 18px rgba(255,255,255,.12), 0 4px 10px rgba(217,46,46,.22); }
.hd-trust-badge.hd-badge-c2 { background: linear-gradient(135deg,#FFD07A 0%,#FFA726 55%,#F57C00 100%); box-shadow: inset 0 -10px 18px rgba(255,255,255,.14), 0 4px 10px rgba(245,124,0,.20); }
.hd-trust-badge.hd-badge-c3 { background: linear-gradient(135deg,#FF9A6B 0%,#FF6B4A 55%,#E0391E 100%); box-shadow: inset 0 -10px 18px rgba(255,255,255,.12), 0 4px 10px rgba(224,57,30,.22); }

.hd-shield-icon {
    display: none;
}

.hd-badge-text-wrap {
    width: 70px;
    position: absolute;
    right: 60px;
    top: 0;
    bottom: 0;
    flex: none;
    min-height: 0;
    overflow: hidden;
}

.hd-badge-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* FIX-CHECK:2026-09-23 徽章文案对齐京东右侧促销卡：大标题行+小副标题行，白字，字号/高度对齐 */
    text-align: center;
    color: inherit;
    white-space: normal;
    line-height: 1.2;
    opacity: 0;
    transition: opacity 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    min-height: 100%;
    text-align: right;
}

.hd-badge-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size:var(--font-size-xs);
    font-weight: 800;
    white-space: nowrap;
}

.hd-badge-t {
    font-size:var(--font-size-xs);
    font-weight: 800;
    white-space: nowrap;
}

.hd-badge-s {
    font-size: 9px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.92;
    max-width: 100%;
    overflow: hidden;
}

.hd-badge-text.on { opacity: 1; }

/* ── 右侧主体 ── */
.hd-header-content {
    /* FIX-CHECK:2026-09-23 修复徽章遮挡：左侧徽章100px宽，内容区必须避开（原 padding-left 被覆盖成8px 导致导航/搜索被徽章盖住） */
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 12px 0 100px;
    gap: 6px;
}

/* 第1行：顶栏（定位 + 扫一扫/消息/菜单） */
.hd-topbar {
    display: flex;
    align-items: center;
    height: 40px;
    gap: 4px;
}

.hd-location {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: var(--hd-fs-l4);
    color: var(--hex-555555);
    cursor: pointer;
    white-space: nowrap;
}

.hd-location svg { flex-shrink: 0; }

.hd-top-icons {
    /* FIX-CHECK:2026-09-23 图标禁止收缩，保证搜索框最小宽度 */
    margin-left: 8px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hd-top-icon {
    color: var(--hex-555555);
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.hd-msg-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    background: #E53935;
    border-radius: 50%;
    border: 1.5px solid var(--hex-e3f2fd);
}

/* 搜索栏 */
.hd-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* FIX-CHECK:2026-10-17 扫码图标移至搜索栏右侧（消息/菜单移入Tab行末尾后） */
.hd-search-scan {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #fff3f0;
    color: #e1251b;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}
.hd-search-scan svg {
    width: 20px;
    height: 20px;
}

.hd-search-bar {
    /* FIX-CHECK:2026-09-24 高度36px 对标京东搜索框（原40px偏高）；flex:1 拉伸到徽章边并随屏适配 */
    height: 36px;
    flex: 1;
    /* FIX-CHECK:2026-09-23 搜索框最小宽度90px（窄屏不被图标挤压成51px） */
    min-width: 90px;
    background: #ffffff;
    /* FIX-CHECK:2026-09-23 搜索框对标京东：红色边框 + 白底 + 小圆角 */
    border: 2px solid #e1251b;
    border-radius: 8px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 6px;
    box-shadow: none;
}

.hd-search-bar .ri-search-line {
    /* FIX-CHECK:2026-09-23 搜索图标红色（京东） */
    color: #e1251b;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.hd-search-bar span {
    flex: 1;
    font-size: 0.8125rem;
    color: var(--hex-64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.hd-search-right-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    /* FIX-CHECK:2026-09-23 弧度对标京东（小圆角）+ 购物车橙色（京东） */
    border-radius: 8px;
    background: #ff5000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}

.hd-search-right-btn svg {
    color: #ffffff;
    width: 18px;
    height: 18px;
}

/* 四Tab导航（消息/菜单图标右对齐并入Tab行末尾） */
.hd-tab-nav {
    display: flex;
    align-items: center;
    gap: 0;
    min-width: 0;
}

/* FIX-CHECK:2026-10-18 京东式Tab行：4个Tab均分整行空位(flex:1居中)、字号16px(京东水准)；
   购物车右移(margin-left:auto)与消息/菜单组成右侧图标组，消除购物车右侧大间距 */
.hd-tab-icons {
    margin-left: 0;
    margin-right: 0;
    gap: 12px;
    flex-shrink: 0;
}
.hd-tab-icons .hd-top-icon {
    width: 26px;
    height: 26px;
    color: var(--hex-555555);
}

.hd-tab-item {
    position: relative;
    padding: 10px 0;
    /* FIX-CHECK:2026-10-18 字号对标京东顶部导航（16px） */
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--hex-555555);
    text-decoration: none;
    flex: 1;
    text-align: center;
    cursor: pointer;
    /* FIX-CHECK:2026-10-17 防手机端竖排：禁止文字折行 + 禁止被压缩 */
    white-space: nowrap;
    flex-shrink: 0;
}

.hd-tab-active {
    /* FIX-CHECK:2026-09-23 选中导航红色（京东） */
    color: #e1251b;
    font-weight: 600;
}

.hd-tab-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    background: #e1251b;
    border-radius: 2px;
}

/* ── Tab行购物车（固定在Tab均分区后、图标组前；Tab flex:1 均分整行，购物车不再挤占空位） ── */
.hd-tab-cart {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #ff5000;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: 8px;
    margin-right: 12px;
}

.hd-tab-cart svg {
    width: 16px;
    height: 16px;
    color: #ffffff;
}

/* ── 赚分弹窗 ── */
.hd-zf-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: var(--z-overlay);
    display: none;
    align-items: flex-end;
}

.hd-zf-mask.open { display: flex; }

.hd-zf-panel {
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    animation: hd-slide-up 0.25s ease;
}

@keyframes hd-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.hd-zf-title {
    font-size: var(--hd-fs-l3);
    font-weight: 600;
    color: var(--gray-900, #1E293B);
    text-align: center;
    margin-bottom: 14px;
}

.hd-zf-cards {
    display: flex;
    gap: 10px;
}

.hd-zf-card {
    flex: 1;
    background: var(--hex-e3f2fd);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--hex-bbdefb, #BBDEFB);
    transition: background 0.15s ease;
}

.hd-zf-card:active { background: var(--hex-bbdefb, #BBDEFB); }

.hd-zf-card-icon { font-size: 1.75rem; margin-bottom: 8px; }

.hd-zf-card-title {
    font-size: var(--hd-fs-l3);
    font-weight: 600;
    color: var(--hex-1976d2);
    margin-bottom: 4px;
}

.hd-zf-card-desc {
    font-size: calc(var(--hd-fs-l4) * 0.88);
    color: var(--hex-64748b);
    line-height: 1.5;
}

.hd-zf-hint {
    text-align: center;
    font-size: calc(var(--hd-fs-l4) * 0.88);
    color: var(--hex-9ca3af, #94A3B8);
    margin-top: 10px;
}

/* FIX-CHECK:2026-09-23 徽章促销卡子元素（图标+大标题+小副标）对齐京东促销卡 */
.hd-badge-text i {
    font-size:var(--font-size-sm);
    color: inherit;
    flex-shrink: 0;
    opacity: 0.95;
}
.hd-badge-text .hd-badge-t {
    display: block;
    font-size:var(--font-size-xs);
    font-weight: 800;
    color: inherit;
    white-space: nowrap;
}
.hd-badge-text .hd-badge-s {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: inherit;
    opacity: 0.92;
    white-space: nowrap;
}


/* FIX-CHECK:2026-09-23 修复 390px 窄屏顶栏三图标（扫一扫/消息/菜单）溢出视口
   根因：.hd-header-content 无 min-width:0 + .hd-location 固定 nowrap 不收缩，
   把 .hd-top-icons 挤出 390px 视口（实测 x=354/396/438）。位置布局不变。 */
.hd-header-content { min-width: 0; }
.hd-topbar { min-width: 0; flex-wrap: nowrap; }
.hd-location {
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 420px) {
    .hd-top-icons { gap: 8px; }
}

/* FIX-CHECK:2026-10-18 窄屏（<=480px）：Tab 14px、图标23px，购物车已右移(margin-left:auto继承) */
@media (max-width: 480px) {
    .hd-tab-icons {
        margin-left: 0;
        margin-right: 0;
        gap: 6px;
    }
    .hd-tab-icons .hd-top-icon {
        width: 23px;
        height: 23px;
    }
    .hd-tab-item {
        font-size: 14px;
        padding: 8px 0;
    }
    .hd-tab-nav {
        gap: 0;
    }
}

/* FIX-CHECK:2026-10-18 超窄屏（<=375px）：Tab 13px，购物车24px（均分方案无溢出） */
@media (max-width: 375px) {
    .hd-tab-icons {
        margin-left: 0;
        margin-right: 0;
        gap: 4px;
    }
    .hd-tab-icons .hd-top-icon {
        width: 22px;
        height: 22px;
    }
    .hd-tab-item {
        font-size: 14px;
    }
    .hd-tab-cart {
        width: 24px;
        height: 24px;
        margin-right: 8px;
    }
}

/* FIX-CHECK:2026-10-18 极窄屏（<=360px）：Tab 14px（对齐京东导航字号），购物车22px（均分方案无溢出） */
@media (max-width: 360px) {
    .hd-tab-icons {
        margin-left: 0;
        margin-right: 0;
        gap: 4px;
    }
    .hd-tab-icons .hd-top-icon {
        width: 20px;
        height: 20px;
    }
    .hd-tab-item {
        font-size: 14px;
    }
    .hd-tab-cart {
        width: 22px;
        height: 22px;
        margin-right: 6px;
    }
}