/* ============================================
   home.css — 诚花商城 首页
   板块：① Hero(全幅Banner+浮动分类卡) ② 品牌价值细带 ③ 热卖榜TOP5(排名)
        ④ 精选推荐 Bento 不规则网格 ⑤ 平台介绍图文(方图) ⑥ 分类专区 Tab
        ⑦ 新品上新 横滑 ⑧ 入驻商家+入驻CTA ⑨ 购物流程四步
   配色：灰玫瑰 #C87E82 + 香槟金 #C8A87C + 鼠尾草绿 #8FA98A
   类名前缀：tt_h_ （商品卡变体 tt_bn_ / tt_rk_ / tt_wd_）
   ============================================ */

.tt_h_home { background: var(--tt-bg); overflow-x: hidden; }
.tt_h_in { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.tt_h_sec { padding: 64px 0; }
.tt_h_sec_white { background: #fff; }
.tt_h_sec_mint { background: linear-gradient(180deg, #F6FBF4 0%, #FBF7FC 100%); }

/* 通用区块标题 */
.tt_h_head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 32px; }
.tt_h_head_c { justify-content: center; text-align: center; }
.tt_h_eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 2.5px; color: var(--tt-violet); margin-bottom: 10px;
}
.tt_h_eyebrow::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--tt-grad-brand); }
.tt_h_head_c .tt_h_eyebrow::after { content: ''; width: 22px; height: 3px; border-radius: 3px; background: var(--tt-grad-brand); }
.tt_h_title { font-size: 32px; font-weight: 800; color: var(--tt-ink); line-height: 1.25; letter-spacing: -.5px; }
.tt_h_title span {
    background: var(--tt-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tt_h_sub { font-size: 14px; color: var(--tt-ink-2); margin-top: 8px; }
.tt_h_more {
    display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
    height: 40px; padding: 0 20px; border-radius: var(--tt-radius-pill);
    border: 1px solid var(--tt-line); background: #fff;
    font-size: 14px; font-weight: 600; color: var(--tt-ink-2); transition: .2s;
}
.tt_h_more:hover { color: #fff; border-color: transparent; background: var(--tt-grad-brand); box-shadow: var(--tt-shadow-pink); }

/* ============================================
   ① Hero —— 全幅 Banner + 左文案 + 底部浮动分类卡
   ============================================ */
.tt_h_hero {
    position: relative;
    background-image: var(--tt-hero-bg);
    background-size: cover; background-position: center right; background-repeat: no-repeat;
    background-color: #FBEFF0;
    padding: 74px 0 108px;
    overflow: hidden;
}
.tt_h_hero::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(255,255,255,.94) 0%, rgba(255,255,255,.82) 34%, rgba(255,255,255,.24) 58%, rgba(255,255,255,0) 76%);
}
.tt_h_hero_in { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 0 20px; }
.tt_h_hero_c { max-width: 580px; }
.tt_h_hero_tag {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
    padding: 7px 18px; border-radius: var(--tt-radius-pill);
    background: rgba(255,255,255,.86); border: 1px solid rgba(200,126,130,.22);
    font-size: 13px; font-weight: 600; color: var(--tt-pink-deep);
    box-shadow: var(--tt-shadow-sm);
}
.tt_h_hero_tag i { color: var(--tt-leaf-deep); }
.tt_h_hero_t {
    font-size: 50px; font-weight: 900; line-height: 1.14; letter-spacing: -1.5px; color: var(--tt-ink);
    margin-bottom: 10px;
}
.tt_h_hero_t span {
    background: var(--tt-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* 站点名填写为公司全称时自动降档 */
.tt_h_hero_t_long { font-size: 38px; letter-spacing: -1px; line-height: 1.24; }
.tt_h_hero_slogan {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 17px; font-weight: 700; color: var(--tt-violet-deep); margin-bottom: 16px;
}
.tt_h_hero_slogan i { font-size: 6px; color: var(--tt-pink-soft); }
.tt_h_hero_desc { font-size: 15px; line-height: 1.9; color: var(--tt-ink-2); margin-bottom: 26px; max-width: 520px; }
.tt_h_hero_btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; }
.tt_h_hero_b1, .tt_h_hero_b2 {
    display: inline-flex; align-items: center; gap: 9px; height: 50px; padding: 0 28px;
    border-radius: var(--tt-radius-pill); font-size: 15px; font-weight: 700; transition: .22s;
}
.tt_h_hero_b1 { background: var(--tt-grad-brand); color: #fff; box-shadow: var(--tt-shadow-pink); }
.tt_h_hero_b1:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 16px 36px rgba(200,126,130,.4); }
.tt_h_hero_b2 { background: rgba(255,255,255,.9); color: var(--tt-ink); border: 1px solid var(--tt-line); }
.tt_h_hero_b2:hover { color: var(--tt-pink); border-color: var(--tt-pink-soft); transform: translateY(-3px); }

.tt_h_hero_stats { display: flex; gap: 12px; flex-wrap: wrap; }
.tt_h_hero_stat {
    min-width: 118px; padding: 14px 20px; border-radius: var(--tt-radius);
    background: rgba(255,255,255,.78);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.9); box-shadow: var(--tt-shadow-sm);
}
.tt_h_hero_stat b {
    display: block; font-size: 26px; font-weight: 900; line-height: 1.1; color: var(--tt-pink-deep);
}
.tt_h_hero_stat b i { font-size: 16px; font-style: normal; color: var(--tt-violet); }
.tt_h_hero_stat span { font-size: 12.5px; color: var(--tt-ink-2); }

/* 浮动分类快选卡 */
.tt_h_quick_wrap { position: relative; z-index: 6; margin-top: -58px; }
.tt_h_quick {
    display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px;
}
.tt_h_quick_c {
    background: #fff; border-radius: var(--tt-radius); padding: 18px 12px 16px; text-align: center;
    box-shadow: 0 10px 30px rgba(90,50,52,.09); border: 1px solid rgba(200,126,130,.07);
    transition: .22s;
}
.tt_h_quick_c:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(90,50,52,.16); }
.tt_h_quick_ic {
    width: 46px; height: 46px; margin: 0 auto 10px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #fff; background: var(--tt-grad-brand);
}
.tt_h_quick_c:nth-child(2) .tt_h_quick_ic { background: var(--tt-grad-violet); }
.tt_h_quick_c:nth-child(3) .tt_h_quick_ic { background: var(--tt-grad-leaf); }
.tt_h_quick_c:nth-child(4) .tt_h_quick_ic { background: var(--tt-grad-pink); }
.tt_h_quick_c:nth-child(5) .tt_h_quick_ic { background: var(--tt-grad-violet); }
.tt_h_quick_nm { display: block; font-size: 14px; font-weight: 700; color: var(--tt-ink); }
.tt_h_quick_ct { display: block; font-size: 11.5px; color: var(--tt-ink-3); margin-top: 2px; }

/* ============================================
   ② 品牌价值细带
   ============================================ */
.tt_h_vals_wrap { padding: 44px 0 8px; }
.tt_h_vals {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px;
    background: #fff; border-radius: var(--tt-radius); padding: 8px;
    box-shadow: var(--tt-shadow-sm); border: 1px solid rgba(200,126,130,.07);
}
.tt_h_val { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--tt-radius-sm); transition: .2s; }
.tt_h_val:hover { background: var(--tt-pink-tint); }
.tt_h_val_ic {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    background: var(--tt-pink-tint); color: var(--tt-pink);
}
.tt_h_val:nth-child(2) .tt_h_val_ic { background: var(--tt-violet-tint); color: var(--tt-violet); }
.tt_h_val:nth-child(3) .tt_h_val_ic { background: var(--tt-leaf-tint); color: var(--tt-leaf-deep); }
.tt_h_val:nth-child(4) .tt_h_val_ic { background: var(--tt-violet-tint); color: var(--tt-violet); }
.tt_h_val_tx b { display: block; font-size: 14.5px; font-weight: 700; color: var(--tt-ink); line-height: 1.4; }
.tt_h_val_tx span { font-size: 12.5px; color: var(--tt-ink-3); }

/* ============================================
   ③ 热卖榜 TOP5
   ============================================ */
.tt_h_rank { display: grid; grid-template-columns: 400px minmax(0,1fr); gap: 24px; align-items: start; }

/* TOP1 大卡 */
.tt_h_rank_top {
    position: relative; display: block; background: #fff; border-radius: var(--tt-radius-lg);
    overflow: hidden; box-shadow: var(--tt-shadow); border: 1px solid rgba(200,126,130,.08); transition: .25s;
}
.tt_h_rank_top:hover { transform: translateY(-6px); box-shadow: var(--tt-shadow-lg); }
.tt_h_rank_crown {
    position: absolute; top: 16px; left: 16px; z-index: 3;
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px;
    border-radius: var(--tt-radius-pill); background: var(--tt-grad-brand); color: #fff;
    font-size: 13px; font-weight: 800; box-shadow: var(--tt-shadow-pink);
}
.tt_h_rank_top_img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--tt-bg-2); }
.tt_h_rank_top_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tt_h_rank_top:hover .tt_h_rank_top_img img { transform: scale(1.06); }
.tt_h_rank_top_bd { display: block; padding: 20px 22px 22px; }
.tt_h_rank_top_cat {
    display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--tt-violet);
    background: var(--tt-violet-tint); padding: 3px 10px; border-radius: var(--tt-radius-pill); margin-bottom: 9px;
}
.tt_h_rank_top_nm {
    display: block; font-size: 17px; font-weight: 700; color: var(--tt-ink); line-height: 1.55;
    height: 53px; overflow: hidden; margin-bottom: 12px;
}
.tt_h_rank_top:hover .tt_h_rank_top_nm { color: var(--tt-pink-deep); }
.tt_h_rank_top_ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tt_h_rank_top_pr { font-size: 26px; font-weight: 900; color: var(--tt-pink); }
.tt_h_rank_top_pr small { font-size: 13px; font-weight: 500; color: var(--tt-ink-3); text-decoration: line-through; margin-left: 6px; }
.tt_h_rank_top_btn {
    display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 20px;
    border-radius: var(--tt-radius-pill); background: var(--tt-grad-brand); color: #fff;
    font-size: 14px; font-weight: 700; box-shadow: var(--tt-shadow-pink);
}

/* 榜单列表 */
.tt_h_rank_list {
    background: #fff; border-radius: var(--tt-radius-lg); padding: 10px 14px;
    box-shadow: var(--tt-shadow-sm); border: 1px solid rgba(200,126,130,.07);
}
.tt_rk_row {
    display: flex; align-items: center; gap: 16px; padding: 14px 8px;
    border-bottom: 1px dashed var(--tt-line); transition: .2s;
}
.tt_rk_row:last-child { border-bottom: 0; }
.tt_rk_row:hover { background: var(--tt-pink-tint); border-radius: var(--tt-radius-sm); border-bottom-color: transparent; }
.tt_rk_no {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 900; font-style: italic; color: #fff; background: var(--tt-ink-3);
}
.tt_rk_no_1 { background: var(--tt-grad-pink); }
.tt_rk_no_2 { background: var(--tt-grad-violet); }
.tt_rk_no_3 { background: var(--tt-grad-leaf); }
.tt_rk_no_n { background: #D9CFE0; }
.tt_rk_img {
    width: 74px; height: 74px; border-radius: var(--tt-radius-sm); overflow: hidden; flex-shrink: 0;
    background: var(--tt-bg-2);
}
.tt_rk_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tt_rk_row:hover .tt_rk_img img { transform: scale(1.08); }
.tt_rk_bd { flex: 1; min-width: 0; }
.tt_rk_nm {
    display: block; font-size: 14.5px; font-weight: 600; color: var(--tt-ink); line-height: 1.55;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt_rk_row:hover .tt_rk_nm { color: var(--tt-pink-deep); }
.tt_rk_meta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 5px; }
.tt_rk_meta em { font-style: normal; font-size: 12px; color: var(--tt-ink-3); display: inline-flex; align-items: center; gap: 5px; }
.tt_rk_meta em i { color: var(--tt-pink-soft); font-size: 11px; }
.tt_rk_pr { font-size: 18px; font-weight: 800; color: var(--tt-pink); flex-shrink: 0; }

/* ============================================
   ④ 精选推荐 Bento 不规则网格
   ============================================ */
.tt_h_bento {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: 244px; gap: 18px;
}
.tt_h_bento > .tt_h_bento_a { grid-column: span 2; grid-row: span 2; }
.tt_h_bento > .tt_h_bento_w { grid-column: span 2; }

/* Bento 大图卡 */
.tt_bn {
    position: relative; display: block; height: 100%; border-radius: var(--tt-radius-lg);
    overflow: hidden; background: var(--tt-bg-2); box-shadow: var(--tt-shadow-sm); transition: .28s;
}
.tt_bn:hover { transform: translateY(-5px); box-shadow: var(--tt-shadow-lg); }
.tt_bn_img { display: block; position: absolute; inset: 0; }
.tt_bn_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tt_bn:hover .tt_bn_img img { transform: scale(1.07); }
.tt_bn::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(51,38,40,0) 34%, rgba(51,38,40,.34) 60%, rgba(51,38,40,.84) 100%);
}
.tt_bn_tag {
    position: absolute; top: 14px; left: 14px; z-index: 3;
    padding: 4px 12px; border-radius: var(--tt-radius-pill);
    font-size: 11.5px; font-weight: 800; color: #fff; letter-spacing: .5px;
}
.tt_tag_new { background: var(--tt-grad-leaf); }
.tt_tag_hot { background: var(--tt-grad-pink); }
.tt_tag_off { background: var(--tt-grad-violet); }
.tt_bn_body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 22px 24px; }
.tt_bn_cat {
    display: inline-block; font-size: 11.5px; font-weight: 600; color: #fff;
    background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.3);
    padding: 3px 11px; border-radius: var(--tt-radius-pill); margin-bottom: 9px;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.tt_bn_nm {
    display: block; font-size: 20px; font-weight: 800; color: #fff; line-height: 1.45;
    text-shadow: 0 2px 12px rgba(0,0,0,.32); margin-bottom: 12px;
}
.tt_bn_ft { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tt_bn_pr { font-size: 24px; font-weight: 900; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.3); }
.tt_bn_btn {
    display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 18px;
    border-radius: var(--tt-radius-pill); background: #fff; color: var(--tt-pink-deep);
    font-size: 13.5px; font-weight: 700; transition: .2s;
}
.tt_bn:hover .tt_bn_btn { gap: 11px; }

/* 横向卡 */
.tt_wd {
    display: flex; align-items: stretch; gap: 0; height: 100%; background: #fff;
    border-radius: var(--tt-radius-lg); overflow: hidden;
    box-shadow: var(--tt-shadow-sm); border: 1px solid rgba(200,126,130,.07); transition: .25s;
}
.tt_wd:hover { transform: translateY(-5px); box-shadow: var(--tt-shadow-lg); }
.tt_wd_img { position: relative; width: 44%; flex-shrink: 0; overflow: hidden; background: var(--tt-bg-2); }
.tt_wd_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tt_wd:hover .tt_wd_img img { transform: scale(1.07); }
.tt_wd_tag {
    position: absolute; top: 12px; left: 12px;
    padding: 3px 11px; border-radius: var(--tt-radius-pill); font-size: 11px; font-weight: 800; color: #fff;
}
.tt_wd_bd { flex: 1; min-width: 0; padding: 20px 22px; display: flex; flex-direction: column; justify-content: center; }
.tt_wd_cat {
    display: inline-block; align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--tt-violet);
    background: var(--tt-violet-tint); padding: 3px 10px; border-radius: var(--tt-radius-pill); margin-bottom: 10px;
}
.tt_wd_nm {
    display: block; font-size: 16px; font-weight: 700; color: var(--tt-ink); line-height: 1.55;
    max-height: 50px; overflow: hidden;
}
.tt_wd:hover .tt_wd_nm { color: var(--tt-pink-deep); }
.tt_wd_desc { display: block; font-size: 12.5px; color: var(--tt-ink-3); line-height: 1.7; margin-top: 6px; }
.tt_wd_ft { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tt_wd_pr { font-size: 22px; font-weight: 900; color: var(--tt-pink); }
.tt_wd_pr small { font-size: 12.5px; font-weight: 500; color: var(--tt-ink-3); text-decoration: line-through; margin-left: 6px; }
.tt_wd_ft em { font-style: normal; font-size: 12px; color: var(--tt-ink-3); }
.tt_wd_ft em i { color: var(--tt-pink-soft); margin-right: 4px; }

/* Bento 末格：查看全部 */
.tt_h_bento_all {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    border-radius: var(--tt-radius-lg); background: var(--tt-grad-soft);
    border: 1.5px dashed var(--tt-pink-soft); color: var(--tt-pink-deep); transition: .25s; text-align: center; padding: 20px;
}
.tt_h_bento_all:hover { color: var(--tt-pink-deep); transform: translateY(-5px); border-style: solid; box-shadow: var(--tt-shadow); }
.tt_h_bento_all i.tt_h_bento_all_ic {
    width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--tt-grad-brand); color: #fff; font-size: 18px; box-shadow: var(--tt-shadow-pink);
}
.tt_h_bento_all b { font-size: 15px; font-weight: 700; }
.tt_h_bento_all span { font-size: 12.5px; color: var(--tt-ink-3); }

/* 首页标准卡微调（仅首页作用域） */
.tt_h_home .zh_pcard { border-radius: var(--tt-radius-lg); overflow: hidden; border-color: rgba(200,126,130,.09); }
.tt_h_home .zh_pcard:hover { box-shadow: var(--tt-shadow-lg); border-color: var(--tt-pink-soft); }
/* Bento 内的标准卡：图片区自适应填满格子高度 */
.tt_h_bento .zh_pcard_img_wrap { flex: 1; min-height: 0; aspect-ratio: auto; background: #fff; }
.tt_h_bento .zh_pcard_body { flex: 0 0 auto; padding: 12px 16px 14px; }
.tt_h_bento .zh_pcard_name { height: 40px; font-size: 13.5px; }
.tt_h_grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }

/* ============================================
   ⑤ 平台介绍图文
   ============================================ */
.tt_h_about { display: grid; grid-template-columns: 460px minmax(0,1fr); gap: 56px; align-items: center; }
.tt_h_about_img { position: relative; }
.tt_h_about_img::before {
    content: ''; position: absolute; inset: -18px; border-radius: 50%;
    background: var(--tt-grad-brand); opacity: .16; filter: blur(24px);
}
.tt_h_about_img img {
    position: relative; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: var(--tt-radius-lg); box-shadow: var(--tt-shadow-lg);
}
.tt_h_about_badge {
    position: absolute; left: -18px; bottom: 26px; z-index: 3;
    display: flex; align-items: center; gap: 12px;
    background: #fff; padding: 14px 20px; border-radius: var(--tt-radius);
    box-shadow: 0 14px 34px rgba(90,50,52,.18);
}
.tt_h_about_badge i {
    width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: var(--tt-grad-brand); color: #fff; font-size: 16px;
}
.tt_h_about_badge span { font-size: 13px; font-weight: 700; color: var(--tt-ink); line-height: 1.5; }
.tt_h_about_tx h2 { font-size: 32px; font-weight: 800; color: var(--tt-ink); line-height: 1.35; margin-bottom: 18px; }
.tt_h_about_tx h2 span {
    background: var(--tt-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tt_h_about_tx p { font-size: 14.5px; line-height: 2; color: var(--tt-ink-2); margin-bottom: 14px; }
.tt_h_about_tx p strong { color: var(--tt-ink); font-weight: 700; }
.tt_h_about_pts { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin: 24px 0 26px; }
.tt_h_about_pt {
    display: flex; align-items: center; gap: 12px; padding: 14px 16px;
    background: #fff; border-radius: var(--tt-radius); box-shadow: var(--tt-shadow-sm);
    border: 1px solid rgba(200,126,130,.07);
}
.tt_h_about_pt i {
    width: 38px; height: 38px; border-radius: 12px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff;
    background: var(--tt-grad-brand);
}
.tt_h_about_pt:nth-child(2) i { background: var(--tt-grad-violet); }
.tt_h_about_pt:nth-child(3) i { background: var(--tt-grad-leaf); }
.tt_h_about_pt:nth-child(4) i { background: var(--tt-grad-pink); }
.tt_h_about_pt b { display: block; font-size: 14px; font-weight: 700; color: var(--tt-ink); }
.tt_h_about_pt span { font-size: 12px; color: var(--tt-ink-3); }
.tt_h_about_more {
    display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 26px;
    border-radius: var(--tt-radius-pill); background: var(--tt-grad-brand); color: #fff;
    font-size: 15px; font-weight: 700; box-shadow: var(--tt-shadow-pink); transition: .22s;
}
.tt_h_about_more:hover { color: #fff; transform: translateY(-3px); }

/* ============================================
   ⑥ 分类专区 Tab
   ============================================ */
.tt_h_tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.tt_h_tab {
    height: 42px; padding: 0 26px; border-radius: var(--tt-radius-pill); border: 1px solid var(--tt-line);
    background: #fff; color: var(--tt-ink-2); font-size: 14.5px; font-weight: 600; font-family: inherit; transition: .2s;
}
.tt_h_tab:hover { color: var(--tt-pink); border-color: var(--tt-pink-soft); }
.tt_h_tab.active { color: #fff; border-color: transparent; background: var(--tt-grad-brand); box-shadow: var(--tt-shadow-pink); }

/* ============================================
   ⑦ 新品上新 横滑
   ============================================ */
.tt_h_new_wrap { position: relative; }
.tt_h_new_scroll {
    display: flex; gap: 18px; overflow-x: auto; padding: 6px 2px 18px;
    scroll-behavior: smooth; scroll-snap-type: x mandatory;
}
.tt_h_new_scroll::-webkit-scrollbar { height: 6px; }
.tt_h_new_scroll::-webkit-scrollbar-track { background: var(--tt-bg-2); border-radius: 6px; }
.tt_h_new_scroll::-webkit-scrollbar-thumb { background: var(--tt-pink-soft); border-radius: 6px; }
.tt_h_new_item { flex: 0 0 268px; scroll-snap-align: start; }
.tt_h_new_nav { display: flex; gap: 8px; }
.tt_h_new_btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tt-line); background: #fff;
    color: var(--tt-ink-2); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; transition: .2s;
}
.tt_h_new_btn:hover { color: #fff; border-color: transparent; background: var(--tt-grad-brand); }

/* ============================================
   ⑧ 入驻商家 + 入驻 CTA
   ============================================ */
.tt_h_mch { display: grid; grid-template-columns: minmax(0,1fr) 348px; gap: 24px; align-items: stretch; }
.tt_h_mch_grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; align-content: start; }
/* 商家较少时用两列，卡片更大、与右侧 CTA 高度更匹配 */
.tt_h_mch_grid_2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.tt_h_mcard {
    display: block; background: #fff; border-radius: var(--tt-radius); padding: 22px 20px;
    box-shadow: var(--tt-shadow-sm); border: 1px solid rgba(200,126,130,.07); transition: .24s; text-align: center;
}
.tt_h_mcard:hover { transform: translateY(-5px); box-shadow: var(--tt-shadow); border-color: rgba(200,126,130,.2); }
.tt_h_mcard_logo {
    width: 62px; height: 62px; margin: 0 auto 12px; border-radius: 18px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: var(--tt-grad-soft); color: var(--tt-pink); font-size: 22px;
}
.tt_h_mcard_logo img { width: 100%; height: 100%; object-fit: cover; }
.tt_h_mcard_nm {
    display: block; font-size: 14.5px; font-weight: 700; color: var(--tt-ink); line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt_h_mcard:hover .tt_h_mcard_nm { color: var(--tt-pink-deep); }
.tt_h_mcard_meta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 8px; font-size: 12px; color: var(--tt-ink-3); }
.tt_h_mcard_meta em { font-style: normal; }
.tt_h_mcard_ok { color: var(--tt-leaf-deep); display: inline-flex; align-items: center; gap: 4px; }
.tt_h_mcard_btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px;
    height: 34px; padding: 0 18px; border-radius: var(--tt-radius-pill);
    background: var(--tt-pink-tint); color: var(--tt-pink-deep); font-size: 13px; font-weight: 600; transition: .2s;
}
.tt_h_mcard:hover .tt_h_mcard_btn { background: var(--tt-grad-brand); color: #fff; }
.tt_h_mcard_join { border-style: dashed; border-color: var(--tt-pink-soft); background: var(--tt-grad-soft); }
.tt_h_mcard_join .tt_h_mcard_logo { background: #fff; }

.tt_h_mch_cta {
    background: var(--tt-grad-brand); border-radius: var(--tt-radius-lg); padding: 30px 26px;
    color: #fff; position: relative; overflow: hidden; box-shadow: 0 20px 44px rgba(200,168,124,.3);
}
.tt_h_mch_cta::before {
    content: ''; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px;
    border-radius: 50%; background: rgba(255,255,255,.13);
}
.tt_h_mch_cta_t { position: relative; z-index: 2; font-size: 21px; font-weight: 800; line-height: 1.45; margin-bottom: 8px; }
.tt_h_mch_cta_d { position: relative; z-index: 2; font-size: 13.5px; line-height: 1.85; opacity: .9; margin-bottom: 20px; }
.tt_h_mch_steps { position: relative; z-index: 2; margin-bottom: 22px; }
.tt_h_mch_step { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(255,255,255,.24); }
.tt_h_mch_step:last-child { border-bottom: 0; }
.tt_h_mch_step b {
    width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.22); font-size: 12.5px; font-weight: 800;
}
.tt_h_mch_step span { font-size: 14px; font-weight: 600; }
.tt_h_mch_cta_btn {
    position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px;
    height: 48px; border-radius: var(--tt-radius-pill); background: #fff; color: var(--tt-pink-deep);
    font-size: 15px; font-weight: 700; box-shadow: 0 8px 22px rgba(51,38,40,.16); transition: .2s;
}
.tt_h_mch_cta_btn:hover { color: var(--tt-pink-deep); transform: translateY(-3px); }

/* ============================================
   ⑨ 购物流程四步
   ============================================ */
.tt_h_flow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; position: relative; }
.tt_h_flow::before {
    content: ''; position: absolute; left: 12%; right: 12%; top: 38px; height: 2px;
    background: repeating-linear-gradient(90deg, var(--tt-pink-soft) 0 8px, transparent 8px 16px);
    opacity: .6;
}
.tt_h_fstep { position: relative; z-index: 2; text-align: center; }
.tt_h_fcircle {
    width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; position: relative;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--tt-pink); font-size: 26px;
    box-shadow: 0 10px 28px rgba(90,50,52,.12); border: 2px solid var(--tt-pink-tint2);
}
.tt_h_fstep:nth-child(2) .tt_h_fcircle { color: var(--tt-violet); border-color: var(--tt-violet-soft); }
.tt_h_fstep:nth-child(3) .tt_h_fcircle { color: var(--tt-leaf-deep); border-color: var(--tt-leaf-soft); }
.tt_h_fnum {
    position: absolute; right: -4px; top: -4px; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--tt-grad-brand); color: #fff; font-size: 12px; font-weight: 800;
}
.tt_h_fstep h4 { font-size: 16px; font-weight: 700; color: var(--tt-ink); margin-bottom: 6px; }
.tt_h_fstep p { font-size: 13px; line-height: 1.8; color: var(--tt-ink-3); }

/* ============================================
   空态
   ============================================ */
.tt_h_empty {
    grid-column: 1 / -1; text-align: center; padding: 60px 20px; background: #fff;
    border-radius: var(--tt-radius-lg); border: 1px dashed var(--tt-line);
}
.tt_h_empty i { font-size: 44px; color: var(--tt-pink-tint2); margin-bottom: 14px; display: block; }
.tt_h_empty h3 { font-size: 17px; font-weight: 700; color: var(--tt-ink); margin-bottom: 6px; }
.tt_h_empty p { font-size: 13.5px; color: var(--tt-ink-3); }

/* ============================================
   响应式
   ============================================ */
@media (max-width: 1200px) {
    .tt_h_hero_t { font-size: 42px; }
    .tt_h_rank { grid-template-columns: 340px minmax(0,1fr); }
    .tt_h_about { grid-template-columns: 380px minmax(0,1fr); gap: 40px; }
    .tt_h_mch { grid-template-columns: minmax(0,1fr) 300px; }
    .tt_h_quick { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 992px) {
    .tt_h_sec { padding: 48px 0; }
    .tt_h_title { font-size: 26px; }
    .tt_h_hero { padding: 56px 0 92px; background-position: 72% center; }
    .tt_h_hero::before { background: linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 46%, rgba(255,255,255,.5) 74%, rgba(255,255,255,.2) 100%); }
    .tt_h_hero_t { font-size: 36px; }
    .tt_h_hero_desc { font-size: 14px; }
    .tt_h_vals { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tt_h_rank { grid-template-columns: minmax(0,1fr); }
    .tt_h_bento { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: 210px; }
    .tt_h_bento > .tt_h_bento_a { grid-column: span 2; grid-row: span 2; }
    .tt_h_bento > .tt_h_bento_w { grid-column: span 2; }
    .tt_h_grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tt_h_about { grid-template-columns: minmax(0,1fr); gap: 34px; }
    .tt_h_about_img { max-width: 420px; margin: 0 auto; }
    .tt_h_about_tx h2 { font-size: 25px; }
    .tt_h_mch { grid-template-columns: minmax(0,1fr); }
    .tt_h_mch_grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .tt_h_flow { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
    .tt_h_flow::before { display: none; }
}
@media (max-width: 768px) {
    .tt_h_head { flex-direction: column; align-items: flex-start; }
    .tt_h_head_c { align-items: center; }
    .tt_h_hero { padding: 44px 0 84px; }
    .tt_h_hero_t { font-size: 30px; }
    .tt_h_hero_slogan { font-size: 15px; }
    .tt_h_hero_btns { gap: 10px; }
    .tt_h_hero_b1, .tt_h_hero_b2 { height: 46px; padding: 0 20px; font-size: 14px; }
    .tt_h_hero_stat { min-width: 100px; padding: 11px 15px; }
    .tt_h_hero_stat b { font-size: 21px; }
    .tt_h_quick { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
    .tt_h_quick_wrap { margin-top: -46px; }
    .tt_h_bento { grid-auto-rows: 178px; gap: 12px; }
    .tt_h_bento > .tt_h_bento_a { grid-row: span 2; }
    .tt_h_bn_nm, .tt_bn_nm { font-size: 16px; }
    .tt_bn_pr { font-size: 20px; }
    .tt_h_grid4 { gap: 12px; }
    .tt_wd_bd { padding: 14px 16px; }
    .tt_wd_nm { font-size: 14px; }
    .tt_wd_desc { display: none; }
    .tt_h_mch_grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tt_rk_img { width: 60px; height: 60px; }
    .tt_rk_pr { font-size: 16px; }
    .tt_h_new_item { flex: 0 0 210px; }
}
@media (max-width: 480px) {
    .tt_h_hero_t { font-size: 26px; }
    .tt_h_vals { grid-template-columns: minmax(0,1fr); }
    .tt_h_bento { grid-template-columns: minmax(0,1fr); grid-auto-rows: 200px; }
    .tt_h_bento > .tt_h_bento_a, .tt_h_bento > .tt_h_bento_w { grid-column: span 1; }
    .tt_h_bento > .tt_h_bento_a { grid-row: span 2; }
    .tt_h_grid4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .tt_h_mch_grid { grid-template-columns: minmax(0,1fr); }
    .tt_h_flow { grid-template-columns: minmax(0,1fr); }
    .tt_h_about_badge { left: 0; padding: 11px 15px; }
}

/* ============================================
   栅格防溢出保护（网格/弹性子项允许收缩，避免窄屏横向撑破）
   ============================================ */
.tt_h_rank > *, .tt_h_bento > *, .tt_h_grid4 > *, .tt_h_mch > *, .tt_h_mch_grid > *,
.tt_h_quick > *, .tt_h_vals > *, .tt_h_about > *, .tt_h_about_pts > *, .tt_h_flow > * { min-width: 0; }
.tt_h_val_tx, .tt_h_about_pt > div, .tt_rk_bd, .tt_wd_bd, .tt_bn_body { min-width: 0; }
.tt_h_val_tx b, .tt_h_val_tx span, .tt_h_about_pt b, .tt_h_about_pt span,
.tt_h_mcard_nm, .tt_h_quick_nm, .tt_h_quick_ct { overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   ② 商品栏目双卡 + 平台数据（2026-09-03 新增）
   替代原来的 6 个浮动小胶囊 —— 本站只有两个真实栏目，
   小胶囊里有 4 个是平台入口凑数，改成两张大卡更贴合实际。
   ============================================================ */
.ch_h_cats_wrap { margin-top: -46px; position: relative; z-index: 5; padding-bottom: 10px; }
.ch_h_cats { display: grid; grid-template-columns: 1fr 1fr 0.9fr; gap: 18px; align-items: stretch; }

.ch_h_cat { position: relative; display: flex; flex-direction: column; gap: 14px;
    padding: 30px 30px 26px; background: var(--tt-white); border: 1px solid var(--tt-line);
    border-radius: var(--tt-radius-lg); box-shadow: var(--tt-shadow); overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.ch_h_cat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tt-grad-pink); }
.ch_h_cat_1::before { background: var(--tt-grad-violet); }
.ch_h_cat:hover { transform: translateY(-4px); box-shadow: var(--tt-shadow-lg); border-color: var(--tt-pink-soft); }
.ch_h_cat_no { position: absolute; right: 22px; top: 18px; font-size: 42px; font-weight: 800;
    color: var(--tt-pink-tint); line-height: 1; letter-spacing: -1px; }
.ch_h_cat_1 .ch_h_cat_no { color: var(--tt-violet-tint); }
.ch_h_cat_ic { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center;
    justify-content: center; background: var(--tt-grad-soft); color: var(--tt-pink-deep); font-size: 21px; }
.ch_h_cat_1 .ch_h_cat_ic { color: var(--tt-violet-deep); }
.ch_h_cat_tx b { display: block; font-size: 20px; color: var(--tt-ink); margin-bottom: 8px; letter-spacing: .5px; }
.ch_h_cat_tx > span { display: block; font-size: 13.5px; line-height: 1.85; color: var(--tt-ink-2); }
.ch_h_cat_go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--tt-pink-deep); }
.ch_h_cat_1 .ch_h_cat_go { color: var(--tt-violet-deep); }
.ch_h_cat_go i { transition: transform .25s ease; }
.ch_h_cat:hover .ch_h_cat_go i { transform: translateX(5px); }

.ch_h_stats { display: flex; flex-direction: column; justify-content: center; gap: 0;
    padding: 26px 28px; background: var(--tt-plum); border-radius: var(--tt-radius-lg);
    box-shadow: var(--tt-shadow); }
.ch_h_stat { display: flex; align-items: baseline; gap: 10px; padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,.09); }
.ch_h_stat:last-of-type { border-bottom: 0; }
.ch_h_stat b { font-size: 28px; color: #fff; font-weight: 700; line-height: 1; min-width: 52px; }
.ch_h_stat span { font-size: 13px; color: rgba(255,255,255,.6); }
.ch_h_stat_cta { margin-top: 14px; display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; height: 42px; border-radius: var(--tt-radius-pill); background: var(--tt-grad-pink);
    color: #fff; font-size: 14px; font-weight: 600; }
.ch_h_stat_cta:hover { filter: brightness(1.06); }

@media (max-width: 1000px) {
    .ch_h_cats { grid-template-columns: 1fr 1fr; }
    .ch_h_stats { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 20px; }
    .ch_h_stat { border-bottom: 0; padding: 0; }
    .ch_h_stat_cta { margin-top: 0; margin-left: auto; padding: 0 22px; }
}
@media (max-width: 700px) {
    .ch_h_cats_wrap { margin-top: 20px; }
    .ch_h_cats { grid-template-columns: 1fr; }
    .ch_h_stats { flex-wrap: wrap; }
    .ch_h_cat { padding: 24px; }
    .ch_h_cat_no { font-size: 34px; }
}