/* ============================================
   layout.css — 诚花商城 公共头部 / 底部
   头部：渐变发丝顶条 + 白底主行(logo·内嵌导航·圆形图标组·渐变入驻钮)
        「全部分类」双栏 mega ／ 图标触发下拉搜索面板 ／ 滚动后收成悬浮胶囊
   底部：悬浮招商卡(压页脚上沿) + 浅粉紫渐变主页脚(4 列非对称) + 深紫墨版权条
   配色：灰玫瑰 #C87E82 + 香槟金 #C8A87C + 鼠尾草绿 #8FA98A（取自 logo / banner）
   类名前缀：tt_ （交互 ID 沿用 xy_hd_bar / zh_mb_* / xy_msearch / zh_feedback_btn 不变）
   ============================================ */

/* ============================================
   头部外壳
   ============================================ */
.tt_hd { position: relative; z-index: 1000; background: #fff; }

/* ============================================
   ① 顶条 —— 浅粉紫底 + 品牌渐变发丝线
   ============================================ */
.tt_top {
    background: linear-gradient(90deg, #FDF3F9 0%, #F6F0FB 50%, #F1F9EF 100%);
    color: var(--tt-ink-2);
    font-size: 12.5px;
    position: relative;
}
.tt_top::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: var(--tt-grad-brand); opacity: .85;
}
.tt_top_in {
    max-width: 1280px; margin: 0 auto; padding: 0 20px;
    height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.tt_top_l { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; flex: 1; }
.tt_top_ann {
    display: inline-flex; align-items: center; gap: 7px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tt_top_ann i { color: var(--tt-pink); font-size: 12px; }
.tt_top_r { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.tt_top_r a, .tt_top_tel {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0 10px; height: 22px; border-radius: var(--tt-radius-pill);
    color: var(--tt-ink-2); transition: .18s;
}
.tt_top_r a:hover { color: #fff; background: var(--tt-pink); }
.tt_top_tel i { color: var(--tt-violet); }
.tt_top_tel strong { color: var(--tt-ink); font-weight: 700; letter-spacing: .3px; }
.tt_top_sp { width: 1px; height: 12px; background: var(--tt-line); }

/* ============================================
   ② 主行 —— 白底，滚动后收成悬浮胶囊
   ============================================ */
.tt_bar {
    position: sticky; top: 0; z-index: 999;
    background: #fff;
    border-bottom: 1px solid var(--tt-line-soft);
    transition: background .25s ease, border-color .25s ease;
}
.tt_bar_in {
    max-width: 1280px; margin: 0 auto; padding: 0 20px;
    height: 78px; display: flex; align-items: center; gap: 26px;
    transition: max-width .28s ease, height .28s ease, box-shadow .28s ease,
                border-radius .28s ease, background .28s ease, margin .28s ease, padding .28s ease;
}
/* 吸顶胶囊态 */
.tt_bar.is_stuck { background: transparent; border-bottom-color: transparent; }
.tt_bar.is_stuck .tt_bar_in {
    max-width: 1180px; height: 64px; margin: 10px auto;
    padding: 0 14px 0 22px;
    background: rgba(255,255,255,.9);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
    border-radius: var(--tt-radius-pill);
    box-shadow: 0 10px 34px rgba(90,50,52,.13), 0 0 0 1px rgba(200,126,130,.08);
}
.tt_bar.is_stuck .tt_logo img { height: 34px; }

/* logo */
.tt_logo { display: flex; align-items: center; flex-shrink: 0; }
.tt_logo img { height: 42px; width: auto; object-fit: contain; transition: height .28s ease; }

/* 主导航 */
.tt_nav { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.tt_nav > a, .tt_nav_catbtn {
    position: relative;
    display: inline-flex; align-items: center; gap: 6px;
    height: 40px; padding: 0 14px; border-radius: var(--tt-radius-pill);
    font-size: 15px; font-weight: 600; color: var(--tt-ink);
    background: none; border: 0; white-space: nowrap; transition: .18s;
}
.tt_nav > a::after {
    content: ''; position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%);
    width: 0; height: 3px; border-radius: 3px; background: var(--tt-grad-brand); transition: width .22s ease;
}
.tt_nav > a:hover, .tt_nav_catbtn:hover { color: var(--tt-pink); background: var(--tt-pink-tint); }
.tt_nav > a.active { color: var(--tt-pink-deep); }
.tt_nav > a.active::after { width: 22px; }

/* 全部分类（hover mega） */
.tt_nav_cat { position: relative; }
.tt_nav_catbtn { cursor: pointer; font-family: inherit; }
.tt_nav_catbtn i.tt_nav_ar { font-size: 12px; transition: transform .22s ease; }
.tt_nav_cat:hover .tt_nav_catbtn { color: var(--tt-pink); background: var(--tt-pink-tint); }
.tt_nav_cat:hover .tt_nav_ar { transform: rotate(180deg); }

/* ============================================
   双栏 mega 面板
   ============================================ */
.tt_mega {
    position: absolute; top: calc(100% + 14px); left: -20px;
    width: 800px; max-width: calc(100vw - 40px);
    background: #fff; border-radius: var(--tt-radius-lg);
    box-shadow: 0 26px 64px rgba(90,50,52,.16), 0 0 0 1px rgba(200,126,130,.07);
    padding: 24px; display: grid; grid-template-columns: minmax(0,1fr) 292px; gap: 24px; align-items: stretch;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: .24s ease; z-index: 1200;
}
.tt_mega::before {
    content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.tt_nav_cat:hover .tt_mega { opacity: 1; visibility: visible; transform: translateY(0); }

.tt_mega_l { display: flex; flex-direction: column; gap: 14px; }
.tt_mega_cats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 18px; align-content: start; }
.tt_mega_quick {
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px;
    border-top: 1px dashed var(--tt-line); padding-top: 14px; margin-top: auto;
}
.tt_mega_quick a {
    display: flex; align-items: center; gap: 9px; padding: 10px 14px;
    border-radius: var(--tt-radius-sm); background: var(--tt-bg);
    font-size: 13.5px; font-weight: 600; color: var(--tt-ink-2); transition: .18s;
}
.tt_mega_quick a i { color: var(--tt-violet); font-size: 13px; width: 16px; text-align: center; }
.tt_mega_quick a:hover { background: var(--tt-grad-brand); color: #fff; }
.tt_mega_quick a:hover i { color: #fff; }
.tt_mega_col { padding: 12px 14px; border-radius: var(--tt-radius); transition: .2s; }
.tt_mega_col:hover { background: var(--tt-pink-tint); }
.tt_mega_head {
    display: flex; align-items: center; gap: 9px;
    font-size: 15px; font-weight: 700; color: var(--tt-ink); margin-bottom: 6px;
}
.tt_mega_head i {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tt-grad-brand); color: #fff; font-size: 13px;
}
.tt_mega_col:hover .tt_mega_head { color: var(--tt-pink-deep); }
.tt_mega_subs { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-left: 39px; }
.tt_mega_subs a { font-size: 13px; color: var(--tt-ink-2); }
.tt_mega_subs a:hover { color: var(--tt-pink); }

.tt_mega_r { border-left: 1px solid var(--tt-line); padding-left: 24px; }
.tt_mega_rt {
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 700; color: var(--tt-violet-deep); margin-bottom: 14px;
}
.tt_mega_rt i { color: var(--tt-pink); }
.tt_mega_plist { display: flex; flex-direction: column; gap: 8px; }
.tt_mega_p {
    display: flex; align-items: center; gap: 11px; padding: 6px;
    border-radius: var(--tt-radius-sm); transition: .18s;
}
.tt_mega_p:hover { background: var(--tt-pink-tint); }
.tt_mega_p_img {
    display: block; width: 52px; height: 52px; flex-shrink: 0;
    background: var(--tt-bg-2); border-radius: 10px; overflow: hidden;
}
.tt_mega_p_img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.tt_mega_p:hover .tt_mega_p_img img { transform: scale(1.07); }
.tt_mega_p_tx { display: block; flex: 1; min-width: 0; }
.tt_mega_p_nm {
    display: block; font-size: 12.5px; color: var(--tt-ink); line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tt_mega_p:hover .tt_mega_p_nm { color: var(--tt-pink); }
.tt_mega_p_pr { display: block; font-size: 13px; font-weight: 800; color: var(--tt-pink); margin-top: 2px; }
.tt_mega_all {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
    font-size: 13px; font-weight: 600; color: var(--tt-violet); transition: .18s;
}
.tt_mega_all:hover { color: var(--tt-pink); gap: 10px; }

/* ============================================
   右侧图标组 + 入驻按钮
   ============================================ */
.tt_acts { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.tt_ico {
    position: relative;
    width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--tt-line);
    display: inline-flex; align-items: center; justify-content: center;
    background: #fff; color: var(--tt-ink); font-size: 16px; transition: .2s; cursor: pointer;
}
.tt_ico:hover {
    color: #fff; border-color: transparent;
    background: var(--tt-grad-pink); box-shadow: var(--tt-shadow-pink); transform: translateY(-2px);
}
.tt_ico.is_on { color: #fff; border-color: transparent; background: var(--tt-grad-pink); }
.tt_cart_badge {
    position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: var(--tt-radius-pill); background: var(--tt-grad-brand); color: #fff;
    font-size: 11px; font-style: normal; font-weight: 700; line-height: 19px; text-align: center;
    border: 2px solid #fff;
}
.tt_join_btn {
    display: inline-flex; align-items: center; gap: 7px; height: 42px; 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); transition: .2s;
}
.tt_join_btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(200,126,130,.38); }
.tt_burger {
    display: none; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--tt-line);
    background: #fff; color: var(--tt-ink); font-size: 17px; align-items: center; justify-content: center;
}
/* PC 用下拉搜索面板，移动端用抽屉搜索 */
#xy_msearch { display: none; }

/* ============================================
   下拉搜索面板
   ============================================ */
.tt_spanel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: 0 24px 54px rgba(90,50,52,.14);
    border-top: 1px solid var(--tt-line-soft);
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .3s ease, opacity .25s ease; z-index: 1100;
}
.tt_spanel.show { max-height: 280px; opacity: 1; }
.tt_spanel_in { max-width: 900px; margin: 0 auto; padding: 30px 20px 34px; }
.tt_sform { display: flex; align-items: center; gap: 10px; }
.tt_sform input {
    flex: 1; min-width: 0; height: 56px; padding: 0 24px; font-size: 16px; font-family: inherit;
    border: 2px solid var(--tt-line); border-radius: var(--tt-radius-pill);
    background: var(--tt-bg); color: var(--tt-ink); outline: none; transition: .2s;
}
.tt_sform input::placeholder { color: var(--tt-ink-3); }
.tt_sform input:focus { border-color: var(--tt-pink); background: #fff; box-shadow: 0 0 0 4px rgba(200,126,130,.1); }
.tt_sform button {
    height: 56px; padding: 0 34px; border: 0; border-radius: var(--tt-radius-pill);
    background: var(--tt-grad-brand); color: #fff; font-size: 15px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: var(--tt-shadow-pink); transition: .2s; flex-shrink: 0;
}
.tt_sform button:hover { transform: translateY(-2px); }
.tt_shot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-left: 6px; }
.tt_shot span { font-size: 13px; color: var(--tt-ink-3); }
.tt_shot a {
    padding: 5px 14px; border-radius: var(--tt-radius-pill);
    background: var(--tt-bg-2); font-size: 13px; color: var(--tt-ink-2); transition: .18s;
}
.tt_shot a:hover { background: var(--tt-grad-brand); color: #fff; }

/* ============================================
   移动端抽屉
   ============================================ */
.zh_mb_overlay {
    position: fixed; inset: 0; background: rgba(51,38,40,.5);
    opacity: 0; visibility: hidden; transition: .28s; z-index: 2000;
}
.zh_mb_overlay.show { opacity: 1; visibility: visible; }
.zh_mb_drawer {
    position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 84vw;
    background: var(--tt-bg); z-index: 2001; overflow-y: auto;
    transform: translateX(-100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 6px 0 34px rgba(90,50,52,.16);
}
.zh_mb_drawer.show { transform: translateX(0); }
.zh_mb_drawer_head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px; background: var(--tt-grad-brand); color: #fff;
}
.zh_mb_drawer_head strong { font-size: 16px; font-weight: 700; }
.zh_mb_close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; }
.zh_mb_drawer_search { padding: 16px 16px 6px; }
.zh_mb_drawer_search form { display: flex; gap: 8px; }
.zh_mb_drawer_search input {
    flex: 1; min-width: 0; height: 42px; padding: 0 14px; font-size: 14px; font-family: inherit;
    border: 1px solid var(--tt-line); border-radius: var(--tt-radius-pill); background: #fff; outline: none;
}
.zh_mb_drawer_search input:focus { border-color: var(--tt-pink); }
.zh_mb_drawer_search button {
    width: 42px; height: 42px; border: 0; border-radius: 50%; flex-shrink: 0;
    background: var(--tt-grad-brand); color: #fff;
}
.zh_mb_drawer_section { padding: 12px 16px; }
.zh_mb_drawer_section h5 {
    font-size: 12px; font-weight: 700; color: var(--tt-violet); letter-spacing: 1px;
    margin-bottom: 8px; padding-left: 4px;
}
.zh_mb_drawer_section a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px; margin-bottom: 6px; background: #fff; border-radius: var(--tt-radius-sm);
    font-size: 14px; color: var(--tt-ink); box-shadow: var(--tt-shadow-sm);
}
.zh_mb_drawer_section a i { color: var(--tt-ink-3); font-size: 12px; }
.zh_mb_drawer_section a:hover { color: var(--tt-pink); }

/* ============================================
   全局提示条
   ============================================ */
.zh_alert_wrap { max-width: 1280px; margin: 18px auto 0; padding: 0 20px; }
.zh_alert {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 13px 18px; border-radius: var(--tt-radius); font-size: 14px;
}
.zh_alert_success { background: var(--tt-leaf-tint); color: var(--tt-leaf-deep); border: 1px solid #CDEDC4; }
.zh_alert_error { background: #FDECEC; color: #C0392B; border: 1px solid #F8D4D4; }
.zh_alert_close { background: none; border: 0; font-size: 20px; line-height: 1; color: inherit; opacity: .6; }
.zh_alert_close:hover { opacity: 1; }

/* ============================================
   ③ 悬浮招商卡（压在页脚上沿）
   ============================================ */
.tt_ft_join_wrap {
    max-width: 1280px; margin: 70px auto -74px; padding: 0 20px;
    position: relative; z-index: 5;
}
.tt_ft_join {
    background: var(--tt-grad-brand); border-radius: var(--tt-radius-lg);
    padding: 30px 38px; display: flex; align-items: center; justify-content: space-between;
    gap: 26px; flex-wrap: wrap; color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 22px 50px rgba(200,168,124,.32);
}
.tt_ft_join::before {
    content: ''; position: absolute; right: -60px; top: -80px;
    width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.14);
}
.tt_ft_join::after {
    content: ''; position: absolute; right: 130px; bottom: -110px;
    width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.1);
}
.tt_ft_join_l { position: relative; z-index: 2; min-width: 0; }
.tt_ft_join_eyebrow {
    display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 2px;
    opacity: .82; margin-bottom: 6px;
}
.tt_ft_join_l h3 { font-size: 24px; font-weight: 800; line-height: 1.35; margin-bottom: 12px; }
.tt_ft_join_steps { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; }
.tt_ft_join_steps span {
    padding: 5px 14px; border-radius: var(--tt-radius-pill);
    background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.28);
}
.tt_ft_join_steps i { opacity: .7; font-size: 12px; }
.tt_ft_join_btns { display: flex; gap: 12px; position: relative; z-index: 2; flex-shrink: 0; }
.tt_ft_join_main, .tt_ft_join_ghost {
    display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 26px;
    border-radius: var(--tt-radius-pill); font-size: 15px; font-weight: 700; transition: .2s;
}
.tt_ft_join_main { background: #fff; color: var(--tt-pink-deep); box-shadow: 0 8px 22px rgba(51,38,40,.18); }
.tt_ft_join_main:hover { color: var(--tt-pink-deep); transform: translateY(-3px); }
.tt_ft_join_ghost { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.tt_ft_join_ghost:hover { color: var(--tt-pink-deep); background: #fff; border-color: #fff; transform: translateY(-3px); }

/* ============================================
   ④ 主页脚（浅粉紫 → 浅薄荷 渐变底）
   ============================================ */
.tt_ft {
    position: relative; z-index: 1;
    background: linear-gradient(160deg, #FCF4FA 0%, #F7F1FB 46%, #F2FAF0 100%);
    padding: 118px 0 0;
    border-top: 1px solid var(--tt-line-soft);
}
.tt_ft_in {
    max-width: 1280px; margin: 0 auto; padding: 0 20px 46px;
    display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.25fr); gap: 40px;
}
.tt_ft_brand { min-width: 0; }
.tt_ft_logo img { height: 46px; width: auto; margin-bottom: 16px; }
.tt_ft_desc { font-size: 13.5px; line-height: 1.95; color: var(--tt-ink-2); }
.tt_ft_dots { display: flex; gap: 7px; margin-top: 18px; }
.tt_ft_dots span { width: 30px; height: 5px; border-radius: 5px; }
.tt_ft_dots span:nth-child(1) { background: var(--tt-pink); }
.tt_ft_dots span:nth-child(2) { background: var(--tt-violet); }
.tt_ft_dots span:nth-child(3) { background: var(--tt-leaf); }

.tt_ft_col h4 {
    font-size: 15px; font-weight: 700; color: var(--tt-ink); margin-bottom: 16px;
    position: relative; padding-bottom: 10px;
}
.tt_ft_col h4::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 24px; height: 3px;
    border-radius: 3px; background: var(--tt-grad-brand);
}
.tt_ft_col ul li { margin-bottom: 10px; }
.tt_ft_col ul li a, .tt_ft_col ul li span {
    display: inline-flex; align-items: flex-start; gap: 7px;
    font-size: 13.5px; color: var(--tt-ink-2); transition: .18s;
}
.tt_ft_col ul li a i { font-size: 11px; color: var(--tt-pink-soft); margin-top: 5px; }
.tt_ft_col ul li a:hover { color: var(--tt-pink); transform: translateX(3px); }

/* 联系卡 */
.tt_ft_contact {
    background: #fff; border-radius: var(--tt-radius); padding: 22px 22px 8px;
    box-shadow: var(--tt-shadow-sm); border: 1px solid rgba(200,126,130,.08);
    align-self: start;
}
.tt_ft_contact h4 { font-size: 15px; font-weight: 700; color: var(--tt-ink); margin-bottom: 16px; }
.tt_ft_ct { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; }
.tt_ft_ct_ic {
    width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
    background: var(--tt-grad-pink);
}
.tt_ft_ct_ic.tt_v { background: var(--tt-grad-violet); }
.tt_ft_ct_ic.tt_g { background: var(--tt-grad-leaf); }
.tt_ft_ct_tx { min-width: 0; }
.tt_ft_ct_tx small { display: block; font-size: 11.5px; color: var(--tt-ink-3); line-height: 1.5; }
.tt_ft_ct_tx strong, .tt_ft_ct_tx span {
    display: block; font-size: 13.5px; font-weight: 600; color: var(--tt-ink); line-height: 1.6; word-break: break-all;
}
.tt_ft_ct_tx a { color: var(--tt-ink); }
.tt_ft_ct_tx a:hover { color: var(--tt-pink); }

/* ============================================
   ⑤ 版权条（深紫墨）
   ============================================ */
.tt_ft_copy { background: var(--tt-plum); color: rgba(255,255,255,.6); font-size: 12.5px; }
.tt_ft_copy_in {
    max-width: 1280px; margin: 0 auto; padding: 16px 20px;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 20px; text-align: center;
}
.tt_ft_copy_in a { color: rgba(255,255,255,.72); }
.tt_ft_copy_in a:hover { color: var(--tt-pink-soft); }
.tt_ft_copy_sp { width: 1px; height: 12px; background: rgba(255,255,255,.2); }

/* ============================================
   回到顶部
   ============================================ */
.zh_scroll_top {
    position: fixed; right: 24px; bottom: 30px; z-index: 900;
    width: 46px; height: 46px; border-radius: 50%; border: 0; display: none;
    align-items: center; justify-content: center;
    background: var(--tt-grad-brand); color: #fff; font-size: 15px;
    box-shadow: var(--tt-shadow-pink); transition: .2s;
}
.zh_scroll_top:hover { transform: translateY(-4px); }

/* ============================================
   反馈弹窗
   ============================================ */
.zh_fb_overlay {
    position: fixed; inset: 0; background: rgba(51,38,40,.55); z-index: 3000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    opacity: 0; visibility: hidden; transition: .25s;
}
.zh_fb_overlay.show { opacity: 1; visibility: visible; }
.zh_fb_modal {
    width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
    background: #fff; border-radius: var(--tt-radius-lg); box-shadow: var(--tt-shadow-lg);
}
.zh_fb_header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; background: var(--tt-grad-brand); color: #fff;
    border-radius: var(--tt-radius-lg) var(--tt-radius-lg) 0 0;
}
.zh_fb_title { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 9px; }
.zh_fb_close { background: none; border: 0; color: #fff; font-size: 26px; line-height: 1; }
.zh_fb_body { padding: 22px 24px 26px; }
.zh_fb_contact { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 18px; }
.zh_fb_contact_item {
    display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--tt-ink-2);
    background: var(--tt-bg-2); padding: 7px 14px; border-radius: var(--tt-radius-pill);
}
.zh_fb_contact_item i { color: var(--tt-pink); }
.zh_fb_row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; margin-bottom: 14px; }
.zh_fb_field { min-width: 0; }
.zh_fb_label { display: block; font-size: 13px; font-weight: 600; color: var(--tt-ink); margin-bottom: 6px; }
.zh_fb_input {
    width: 100%; height: 42px; padding: 0 14px; font-size: 14px; font-family: inherit;
    border: 1px solid var(--tt-line); border-radius: var(--tt-radius-sm);
    background: var(--tt-bg); color: var(--tt-ink); outline: none; transition: .18s;
}
.zh_fb_input:focus { border-color: var(--tt-pink); background: #fff; box-shadow: 0 0 0 3px rgba(200,126,130,.1); }
.zh_fb_textarea { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.7; }
.zh_fb_captcha { display: flex; gap: 10px; }
.zh_fb_captcha_img { height: 42px; border-radius: var(--tt-radius-sm); cursor: pointer; border: 1px solid var(--tt-line); }
.zh_fb_msg { font-size: 13px; margin-bottom: 10px; min-height: 18px; }
.zh_fb_msg.ok { color: var(--tt-leaf-deep); }
.zh_fb_msg.err { color: #C0392B; }
.zh_fb_submit {
    width: 100%; height: 46px; border: 0; border-radius: var(--tt-radius-pill);
    background: var(--tt-grad-brand); color: #fff; font-size: 15px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: var(--tt-shadow-pink); transition: .2s;
}
.zh_fb_submit:hover { transform: translateY(-2px); }
.zh_fb_submit:disabled { opacity: .6; transform: none; }

/* ============================================
   响应式
   ============================================ */
@media (max-width: 1200px) {
    .tt_nav > a, .tt_nav_catbtn { padding: 0 11px; font-size: 14.5px; }
    .tt_bar_in { gap: 18px; }
    .tt_ft_in { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr) minmax(0,1.3fr); }
    .tt_ft_col_x { display: none; }
}
@media (max-width: 992px) {
    .tt_top_l { display: none; }
    .tt_top_in { justify-content: center; height: 34px; }
    .tt_top_r { flex: 1; justify-content: center; }
    .tt_nav, .tt_join_btn { display: none; }
    .tt_burger { display: inline-flex; }
    #tt_search_btn, .tt_spanel { display: none; }
    #xy_msearch { display: inline-flex; }
    .tt_bar_in { height: 64px; gap: 12px; }
    .tt_logo { flex: 1; }
    .tt_logo img { height: 36px; }
    .tt_bar.is_stuck .tt_bar_in { height: 58px; margin: 8px auto; padding: 0 12px 0 14px; }
    .tt_ico { width: 38px; height: 38px; font-size: 15px; }
    .tt_ft_join { padding: 26px 24px; }
    .tt_ft_join_l h3 { font-size: 20px; }
    .tt_ft_in { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px; padding-bottom: 36px; }
    .tt_ft_brand { grid-column: 1 / -1; }
    .tt_ft_col_x { display: block; }
    .tt_ft { padding-top: 110px; }
}
@media (max-width: 768px) {
    .tt_top_r a span { display: none; }
    .tt_top_tel { display: none; }
    .tt_top_r a { padding: 0 8px; }
    .tt_spanel_in { padding: 22px 16px 26px; }
    .tt_sform { flex-direction: column; }
    .tt_sform input, .tt_sform button { width: 100%; height: 48px; }
    .tt_spanel.show { max-height: 340px; }
    .tt_ft_join { flex-direction: column; align-items: flex-start; }
    .tt_ft_join_btns { width: 100%; }
    .tt_ft_join_main, .tt_ft_join_ghost { flex: 1; justify-content: center; padding: 0 16px; }
    .tt_ft_join_wrap { margin: 50px auto -60px; }
    .tt_ft { padding-top: 96px; }
    .zh_fb_row { grid-template-columns: minmax(0,1fr); }
    .zh_scroll_top { right: 14px; bottom: 20px; width: 42px; height: 42px; }
}
@media (max-width: 480px) {
    .tt_ft_in { grid-template-columns: minmax(0,1fr); gap: 26px; }
    .tt_ft_join_steps span { padding: 4px 10px; font-size: 12.5px; }
    .tt_ft_join_l h3 { font-size: 18px; }
}

/* ============================================
   栅格防溢出保护
   ============================================ */
.tt_ft_in > *, .tt_mega > *, .tt_mega_l > *, .zh_fb_row > * { min-width: 0; }
.tt_ft_ct_tx, .tt_bar_in > * { min-width: 0; }

/* ============================================================================
   诚花商城 · 公共头部 / 底部 重构（2026-09-03）
   头部：三行结构（顶条 / 品牌行含常驻搜索 / 独立导航行含常驻全部分类）
   底部：承诺条 + 品牌通栏居中 + 链接三栏 + 横向联系卡 + 合规说明 + 版权
   ============================================================================ */

/* ---------- 头部 ---------- */
.ch_hd { position: relative; z-index: 200; background: var(--tt-white); }

.ch_top { background: var(--tt-plum); color: rgba(255,255,255,.82); font-size: 12.5px; }
.ch_top_in { max-width: 1280px; margin: 0 auto; padding: 0 20px; height: 38px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ch_top_l, .ch_top_r { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ch_top_it { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ch_top_it i { color: var(--tt-pink-soft); }
.ch_top_it b { color: #fff; font-weight: 600; }
.ch_top_dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.30); flex-shrink: 0; }
.ch_top_ann { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.ch_top_ann i { color: var(--tt-violet); }
.ch_top_r a { color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ch_top_r a:hover { color: #fff; }
.ch_top_reg { color: var(--tt-pink-soft) !important; font-weight: 600; }

.ch_bar { background: var(--tt-white); border-bottom: 1px solid var(--tt-line); }
.ch_bar_in { max-width: 1280px; margin: 0 auto; padding: 20px; display: flex; align-items: center; gap: 28px; }
.ch_burger { display: none; background: none; border: 0; font-size: 20px; color: var(--tt-ink); cursor: pointer; }
.ch_logo { flex-shrink: 0; display: block; }
.ch_logo img { height: 54px; width: auto; display: block; }

/* 常驻搜索框（原版藏在下拉面板里） */
.ch_search { flex: 1; max-width: 560px; position: relative; display: flex; align-items: center;
    height: 46px; background: var(--tt-white); border: 2px solid var(--tt-pink);
    border-radius: var(--tt-radius-pill); overflow: hidden; }
.ch_search_ic { position: absolute; left: 18px; color: var(--tt-ink-3); font-size: 14px; pointer-events: none; }
.ch_search input { flex: 1; height: 100%; border: 0; outline: 0; background: transparent;
    padding: 0 14px 0 42px; font-size: 14px; color: var(--tt-ink); }
.ch_search input::placeholder { color: var(--tt-ink-3); }
.ch_search button { height: 100%; padding: 0 30px; border: 0; cursor: pointer;
    background: var(--tt-grad-pink); color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: 1px; }
.ch_search button:hover { filter: brightness(1.06); }

.ch_acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ch_act { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
    min-width: 62px; padding: 6px 8px; border-radius: var(--tt-radius-sm); color: var(--tt-ink-2); }
.ch_act i { font-size: 17px; color: var(--tt-pink); }
.ch_act span { font-size: 12px; }
.ch_act:hover { background: var(--tt-pink-tint); color: var(--tt-pink-deep); }
.ch_cart_badge { position: absolute; top: 0; right: 8px; min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: var(--tt-pink); color: #fff; font-size: 11px; font-style: normal;
    line-height: 17px; text-align: center; }
.ch_join { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; padding: 11px 22px;
    border-radius: var(--tt-radius-pill); background: var(--tt-grad-violet); color: #fff;
    font-size: 14px; font-weight: 600; white-space: nowrap; box-shadow: var(--tt-shadow-violet); }
.ch_join:hover { filter: brightness(1.06); transform: translateY(-1px); }

.ch_hot_in { max-width: 1280px; margin: 0 auto; padding: 0 20px 14px; }
.ch_hot { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--tt-ink-3);
    padding-left: 300px; flex-wrap: wrap; }
.ch_hot a { color: var(--tt-ink-2); }
.ch_hot a:hover { color: var(--tt-pink); }

/* 独立导航行 */
.ch_navbar { background: var(--tt-white); border-bottom: 1px solid var(--tt-line);
    box-shadow: 0 2px 10px rgba(166,95,99,.04); }
.ch_navbar_in { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: stretch; gap: 26px; }

.ch_allcat { position: relative; flex-shrink: 0; }
.ch_allcat_btn { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border: 0;
    cursor: pointer; background: var(--tt-grad-pink); color: #fff; font-size: 15px; font-weight: 600;
    letter-spacing: .5px; border-radius: var(--tt-radius-sm) var(--tt-radius-sm) 0 0; }
.ch_allcat_panel { position: absolute; left: 0; top: 100%; width: 260px; padding: 10px 0;
    background: var(--tt-white); border: 1px solid var(--tt-line); border-top: 0;
    box-shadow: var(--tt-shadow-lg); border-radius: 0 0 var(--tt-radius-sm) var(--tt-radius-sm);
    opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .22s ease; }
.ch_allcat:hover .ch_allcat_panel { opacity: 1; visibility: visible; transform: translateY(0); }
.ch_allcat_it { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: var(--tt-ink);
    font-size: 14.5px; }
.ch_allcat_it > i:first-child { width: 18px; color: var(--tt-pink); }
.ch_allcat_ar { margin-left: auto; font-size: 12px; color: var(--tt-ink-3); }
.ch_allcat_it:hover { background: var(--tt-pink-tint); color: var(--tt-pink-deep); }
.ch_allcat_more { border-top: 1px solid var(--tt-line-soft); margin-top: 6px; padding-top: 14px; }
.ch_allcat_more > i:first-child { color: var(--tt-violet); }

.ch_nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow: hidden; }
.ch_nav a { position: relative; padding: 0 18px; height: 48px; display: inline-flex; align-items: center;
    font-size: 15px; color: var(--tt-ink); white-space: nowrap; }
.ch_nav a::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: 10px; height: 2px;
    background: var(--tt-pink); transform: scaleX(0); transition: transform .22s ease; }
.ch_nav a:hover { color: var(--tt-pink-deep); }
.ch_nav a:hover::after, .ch_nav a.active::after { transform: scaleX(1); }
.ch_nav a.active { color: var(--tt-pink-deep); font-weight: 600; }

.ch_navbar_tip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
    color: var(--tt-ink-3); white-space: nowrap; align-self: center; }
.ch_navbar_tip i { color: var(--tt-leaf); }

@media (max-width: 1100px) { .ch_navbar_tip { display: none; } .ch_hot { padding-left: 0; } }
@media (max-width: 900px) {
    .ch_burger { display: block; }
    .ch_bar_in { gap: 14px; padding: 14px 16px; flex-wrap: wrap; }
    .ch_logo img { height: 40px; }
    .ch_search { order: 3; width: 100%; max-width: none; flex-basis: 100%; height: 40px; }
    .ch_search button { padding: 0 18px; }
    .ch_act span { display: none; }
    .ch_act { min-width: 40px; }
    .ch_join { padding: 9px 14px; font-size: 13px; }
    .ch_navbar { display: none; }
    .ch_top_l { display: none; }
    .ch_hot_in { display: none; }
}

/* ---------- 底部 ---------- */
.ch_ft { background: var(--tt-plum); color: rgba(255,255,255,.72); }

.ch_ft_promise { background: var(--tt-plum-2); border-bottom: 1px solid rgba(255,255,255,.07); }
.ch_ft_promise_in { max-width: 1280px; margin: 0 auto; padding: 26px 20px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ch_ft_pr { display: flex; align-items: center; gap: 14px; }
.ch_ft_pr i { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; background: rgba(200,126,130,.18); color: var(--tt-pink-soft); font-size: 17px; flex-shrink: 0; }
.ch_ft_pr b { display: block; color: #fff; font-size: 14.5px; margin-bottom: 3px; }
.ch_ft_pr span { font-size: 12.5px; color: rgba(255,255,255,.55); }

.ch_ft_brand { max-width: 760px; margin: 0 auto; padding: 44px 20px 26px; text-align: center; }
.ch_ft_logo { height: 50px; width: auto; margin: 0 auto 18px; display: block; filter: brightness(0) invert(1); opacity: .92; }
.ch_ft_desc { font-size: 13.5px; line-height: 2; color: rgba(255,255,255,.62); margin: 0; }
.ch_ft_rule { display: block; width: 60px; height: 2px; margin: 26px auto 0; background: var(--tt-grad-brand); }

.ch_ft_cols { max-width: 1280px; margin: 0 auto; padding: 8px 20px 30px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.ch_ft_col h4 { color: #fff; font-size: 15px; margin: 0 0 16px; font-weight: 600; letter-spacing: .5px; }
.ch_ft_col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ch_ft_col a { color: rgba(255,255,255,.62); font-size: 13.5px; }
.ch_ft_col a:hover { color: var(--tt-pink-soft); padding-left: 4px; }

.ch_ft_contact { max-width: 1280px; margin: 0 auto; padding: 0 20px 34px;
    display: grid; grid-template-columns: repeat(2, 1fr) 1.4fr; gap: 16px; }
.ch_ft_ct { display: flex; align-items: center; gap: 13px; padding: 16px 18px;
    background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--tt-radius); }
.ch_ft_ct_ic { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center;
    justify-content: center; background: var(--tt-grad-pink); color: #fff; font-size: 15px; flex-shrink: 0; }
.ch_ft_ct_ic.ch_v { background: var(--tt-grad-violet); }
.ch_ft_ct_ic.ch_g { background: var(--tt-grad-leaf); }
.ch_ft_ct small { display: block; font-size: 12px; color: rgba(255,255,255,.48); margin-bottom: 3px; }
.ch_ft_ct strong { font-size: 15px; color: #fff; font-weight: 600; }
.ch_ft_ct strong a { color: #fff; }
.ch_ft_ct span { font-size: 12.5px; color: rgba(255,255,255,.66); line-height: 1.6; }

.ch_ft_note { max-width: 1280px; margin: 0 auto; padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,.07); font-size: 12.5px; line-height: 1.8;
    color: rgba(255,255,255,.5); display: flex; gap: 9px; align-items: flex-start; }
.ch_ft_note i { color: var(--tt-violet); margin-top: 3px; }

.ch_ft_copy { background: var(--tt-plum-deep); }
.ch_ft_copy_in { max-width: 1280px; margin: 0 auto; padding: 16px 20px; text-align: center;
    font-size: 12.5px; color: rgba(255,255,255,.48); display: flex; align-items: center;
    justify-content: center; gap: 12px; flex-wrap: wrap; }
.ch_ft_copy_in a { color: rgba(255,255,255,.6); }
.ch_ft_copy_in a:hover { color: var(--tt-pink-soft); }
.ch_ft_copy_sp { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.25); }

@media (max-width: 900px) {
    .ch_ft_promise_in { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .ch_ft_cols { grid-template-columns: 1fr; gap: 22px; }
    .ch_ft_contact { grid-template-columns: 1fr; }
    .ch_ft_brand { padding: 32px 20px 20px; }
}