/* ============================================================
   yjg111.com — 昊予宝科技重庆有限公司
   首页（深色三栏首屏 + 悬浮保障条 + 促销位网格 + 楼层 + 双榜单）
   仅首页加载。命名空间 hy_
   ============================================================ */

.zh_main > .container { padding-top: 0; }

/* ---------- ① 首屏：分类栏 + 主视觉 + 服务卡 ---------- */
.hy_stage {
    position: relative; overflow: hidden;
    background: linear-gradient(118deg, #0E1330 0%, #1A2350 52%, #24338C 100%);
    padding: 26px 0 66px;
}
.hy_stage::before {
    content: ""; position: absolute; right: -180px; top: -160px;
    width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle at center, rgba(255,106,61,.24), transparent 62%);
    pointer-events: none;
}
.hy_stage::after {
    content: ""; position: absolute; left: -120px; bottom: -220px;
    width: 460px; height: 460px; border-radius: 50%;
    background: radial-gradient(circle at center, rgba(47,75,216,.42), transparent 65%);
    pointer-events: none;
}
.hy_stage_in {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 232px 1fr 252px; gap: 16px;
    min-height: 396px;
}

/* 左：分类竖列 */
.hy_cats {
    background: #fff; border-radius: var(--zh-radius-lg);
    overflow: visible; display: flex; flex-direction: column;
    box-shadow: var(--zh-shadow-lg);
}
.hy_cats_hd {
    display: flex; align-items: center; gap: 9px;
    height: 46px; padding: 0 18px; flex: none;
    background: linear-gradient(100deg, var(--zh-primary), #4A63E8);
    color: #fff; font-size: 15px; font-weight: 700;
    border-radius: var(--zh-radius-lg) var(--zh-radius-lg) 0 0;
}
.hy_cats_list { margin: 0; padding: 7px 0; list-style: none; }
.hy_cats_list.grow { flex: 1; }
.hy_cats_gtitle {
    padding: 12px 16px 5px; font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
    color: var(--zh-text-disabled); border-top: 1px dashed var(--zh-border); margin-top: 5px;
}
.hy_cats_list > li { position: relative; }
.hy_cats_row {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; font-size: 13.5px; color: var(--zh-text-secondary);
    transition: all .18s;
}
.hy_cats_row > i:first-child { width: 17px; text-align: center; color: var(--zh-primary); font-size: 13px; flex: none; }
.hy_cats_row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hy_cats_row .go { font-size: 11px; color: var(--zh-text-disabled); flex: none; }
.hy_cats_list > li:hover .hy_cats_row { background: var(--zh-primary-light); color: var(--zh-primary); font-weight: 600; }
.hy_cats_panel {
    position: absolute; left: 100%; top: -7px; z-index: 20;
    width: 300px; padding: 16px 18px;
    background: #fff; border-radius: 0 var(--zh-radius-md) var(--zh-radius-md) var(--zh-radius-md);
    box-shadow: var(--zh-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateX(-6px); transition: all .2s;
    display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
}
.hy_cats_list > li:hover .hy_cats_panel { opacity: 1; visibility: visible; transform: translateX(0); }
.hy_cats_panel a {
    padding: 5px 12px; font-size: 12.5px; color: var(--zh-text-secondary);
    background: var(--zh-bg-light); border-radius: var(--zh-radius-pill); transition: all .18s;
}
.hy_cats_panel a:hover { background: var(--zh-primary); color: #fff; }
.hy_cats_more {
    flex: none; display: block; padding: 11px; text-align: center;
    font-size: 12.5px; color: var(--zh-text-tertiary); border-top: 1px dashed var(--zh-border);
}
.hy_cats_more:hover { color: var(--zh-primary); }

/* 中：主视觉 */
.hy_kv {
    position: relative; overflow: hidden;
    border-radius: var(--zh-radius-lg);
    background: #10173A center/cover no-repeat;
    display: flex; flex-direction: column; justify-content: center;
    padding: 40px 44px;
    box-shadow: var(--zh-shadow-lg);
}
.hy_kv::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(94deg, rgba(9,13,36,.94) 0%, rgba(9,13,36,.80) 46%, rgba(9,13,36,.34) 100%);
}
.hy_kv > * { position: relative; z-index: 1; }
.hy_kv_eyebrow {
    display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
    margin-bottom: 16px; padding: 6px 14px;
    background: rgba(255,106,61,.16); border: 1px solid rgba(255,106,61,.4);
    color: #FFB694; border-radius: var(--zh-radius-pill);
    font-size: 12.5px; font-weight: 600;
}
.hy_kv h1 {
    margin: 0 0 14px; font-size: 36px; font-weight: 800; line-height: 1.28;
    color: #fff; letter-spacing: -.3px;
}
.hy_kv h1 em { font-style: normal; color: var(--zh-accent); }
.hy_kv > p {
    margin: 0 0 26px; max-width: 500px;
    font-size: 14.5px; line-height: 1.9; color: rgba(255,255,255,.66);
}
.hy_kv_btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hy_b1, .hy_b2 {
    display: inline-flex; align-items: center; gap: 8px;
    height: 46px; padding: 0 26px;
    font-size: 14.5px; font-weight: 700;
    border-radius: var(--zh-radius-pill); transition: all .22s;
}
.hy_b1 { background: var(--zh-accent); color: #fff; box-shadow: 0 10px 26px rgba(255,106,61,.34); }
.hy_b1:hover { background: var(--zh-accent-dark); color: #fff; transform: translateY(-2px); }
.hy_b2 { border: 1.5px solid rgba(255,255,255,.32); color: #fff; }
.hy_b2:hover { background: #fff; color: var(--zh-text-primary); border-color: #fff; }
.hy_kv_points { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; padding: 0; list-style: none; }
.hy_kv_points li { display: flex; align-items: center; gap: 7px; font-size: 13px; color: rgba(255,255,255,.72); }
.hy_kv_points i {
    width: 17px; height: 17px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.14); color: var(--zh-accent);
    font-size: 8px; border-radius: 50%;
}

/* 右：服务卡 */
.hy_side { display: flex; flex-direction: column; gap: 12px; }
.hy_side_user {
    background: #fff; border-radius: var(--zh-radius-lg); padding: 20px 18px;
    text-align: center; box-shadow: var(--zh-shadow-lg);
}
.hy_side_ava {
    width: 54px; height: 54px; margin: 0 auto 10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-size: 22px; color: #fff;
    background: linear-gradient(140deg, var(--zh-primary), var(--zh-accent));
}
.hy_side_user h4 { margin: 0 0 3px; font-size: 14.5px; font-weight: 700; color: var(--zh-text-primary); }
.hy_side_user p { margin: 0 0 14px; font-size: 12px; color: var(--zh-text-tertiary); }
.hy_side_btns { display: flex; gap: 8px; }
.hy_side_btns a {
    flex: 1; height: 34px; display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; border-radius: var(--zh-radius-pill); transition: all .2s;
}
.hy_side_btns .p { background: var(--zh-primary); color: #fff; }
.hy_side_btns .p:hover { background: var(--zh-primary-dark); color: #fff; }
.hy_side_btns .o { border: 1px solid var(--zh-border); color: var(--zh-text-secondary); }
.hy_side_btns .o:hover { border-color: var(--zh-primary); color: var(--zh-primary); }

.hy_side_quick {
    flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    background: var(--zh-border);
    border-radius: var(--zh-radius-lg); overflow: hidden;
    box-shadow: var(--zh-shadow-lg);
}
.hy_side_quick a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    padding: 14px 6px; background: #fff;
    font-size: 12.5px; color: var(--zh-text-secondary); transition: all .2s;
}
.hy_side_quick i { font-size: 17px; color: var(--zh-primary); }
.hy_side_quick a:hover { background: var(--zh-primary-light); color: var(--zh-primary); }

.hy_side_tel {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--zh-radius-lg); padding: 13px 16px; text-align: center;
}
.hy_side_tel small { display: block; font-size: 11.5px; color: rgba(255,255,255,.5); margin-bottom: 2px; }
.hy_side_tel b { font-size: 18px; font-weight: 800; color: var(--zh-accent); letter-spacing: .4px; }

/* ---------- ② 服务保障（上浮压住首屏） ---------- */
.zh_alert ~ .hy_promise { margin-top: 6px !important; }
.hy_promise {
    position: relative; z-index: 3; margin-top: -34px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.hy_promise_item {
    display: flex; align-items: center; gap: 13px;
    padding: 18px 20px; background: #fff;
    border-radius: var(--zh-radius-lg); box-shadow: var(--zh-shadow-md);
    transition: transform .2s, box-shadow .2s;
}
.hy_promise_item:hover { transform: translateY(-3px); box-shadow: var(--zh-shadow-lg); }
.hy_promise_item > i {
    width: 44px; height: 44px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--zh-radius-md); font-size: 18px;
    background: var(--zh-primary-light); color: var(--zh-primary);
}
.hy_promise_item:nth-child(2n) > i { background: #FFF1EC; color: var(--zh-accent); }
.hy_promise_item b { display: block; font-size: 14.5px; color: var(--zh-text-primary); margin-bottom: 2px; }
.hy_promise_item span { font-size: 12px; color: var(--zh-text-tertiary); }

/* ---------- 区块通用 ---------- */
.hy_sec { padding-top: 48px; }
.hy_sec_last { padding-bottom: 6px; }
.hy_sec_head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.hy_sec_t { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hy_sec_t::before {
    content: ""; width: 5px; height: 26px; flex: none; border-radius: 3px;
    background: linear-gradient(180deg, var(--zh-primary), var(--zh-accent));
}
.hy_sec_t h2 { margin: 0; font-size: 23px; font-weight: 800; color: var(--zh-text-primary); }
.hy_sec_t span { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--zh-text-disabled); }
.hy_more {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 16px; border: 1px solid var(--zh-border);
    border-radius: var(--zh-radius-pill); font-size: 13px; color: var(--zh-text-muted); transition: all .2s;
}
.hy_more:hover { border-color: var(--zh-primary); background: var(--zh-primary); color: #fff; }

/* ---------- ③ 精选推荐：促销位 + 网格 ---------- */
.hy_pick { display: grid; grid-template-columns: 268px 1fr; gap: 16px; }
.hy_promo {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 26px 24px;
    border-radius: var(--zh-radius-lg);
    background: linear-gradient(160deg, var(--zh-accent) 0%, #FF9153 52%, var(--zh-primary) 155%);
    color: #fff;
}
.hy_promo::after {
    content: ""; position: absolute; right: -70px; bottom: -70px;
    width: 210px; height: 210px; border-radius: 50%; background: rgba(255,255,255,.13);
}
.hy_promo small { position: relative; z-index: 1; font-size: 12px; letter-spacing: 2px; opacity: .82; }
.hy_promo h3 { position: relative; z-index: 1; margin: 8px 0 10px; font-size: 25px; font-weight: 800; line-height: 1.35; }
.hy_promo p { position: relative; z-index: 1; margin: 0 0 20px; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.84); }
.hy_promo_btn {
    position: relative; z-index: 1; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 20px; background: #fff; color: var(--zh-accent-dark);
    font-size: 13.5px; font-weight: 700; border-radius: var(--zh-radius-pill);
}
.hy_promo_btn:hover { color: var(--zh-accent-dark); transform: translateY(-2px); }
.hy_promo_img {
    position: relative; z-index: 1; margin-top: auto; padding-top: 18px;
    display: flex; justify-content: center;
}
.hy_promo_img img {
    width: 100%; aspect-ratio: 1/1; object-fit: cover;
    border-radius: var(--zh-radius-md); border: 3px solid rgba(255,255,255,.3);
    box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* ---------- ④ 分类楼层 ---------- */
.hy_floor { display: grid; grid-template-columns: 216px 1fr; gap: 16px; }
.hy_floor_side {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    padding: 24px 22px; border-radius: var(--zh-radius-lg);
    background: linear-gradient(155deg, #1B2350, var(--zh-primary));
    color: #fff;
}
.hy_floor_side.alt { background: linear-gradient(155deg, #B93E17, var(--zh-accent)); }
.hy_floor_side::after {
    content: ""; position: absolute; right: -50px; top: -50px;
    width: 160px; height: 160px; border-radius: 50%; background: rgba(255,255,255,.09);
}
.hy_floor_side > i { position: relative; z-index: 1; font-size: 26px; margin-bottom: 14px; opacity: .9; }
.hy_floor_side h3 { position: relative; z-index: 1; margin: 0 0 6px; font-size: 20px; font-weight: 800; }
.hy_floor_side p { position: relative; z-index: 1; margin: 0 0 16px; font-size: 12px; color: rgba(255,255,255,.62); letter-spacing: 1px; }
.hy_floor_subs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.hy_floor_subs a {
    padding: 4px 11px; font-size: 12px; color: rgba(255,255,255,.85);
    background: rgba(255,255,255,.14); border-radius: var(--zh-radius-pill);
}
.hy_floor_subs a:hover { background: #fff; color: var(--zh-text-primary); }
.hy_floor_all {
    position: relative; z-index: 1; margin-top: auto; align-self: flex-start;
    display: inline-flex; align-items: center; gap: 7px;
    height: 34px; padding: 0 18px; border: 1px solid rgba(255,255,255,.4);
    border-radius: var(--zh-radius-pill); font-size: 13px; color: #fff;
}
.hy_floor_all:hover { background: #fff; color: var(--zh-text-primary); border-color: #fff; }

/* ---------- ⑤ 双榜单（热销 / 新品） ---------- */
.hy_ranks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hy_rank { background: #fff; border-radius: var(--zh-radius-lg); box-shadow: var(--zh-shadow-sm); overflow: hidden; }
.hy_rank_hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--zh-border);
}
.hy_rank_hd h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--zh-text-primary); display: flex; align-items: center; gap: 8px; }
.hy_rank_hd h3 i { color: var(--zh-accent); }
.hy_rank_hd a { font-size: 12.5px; color: var(--zh-text-tertiary); }
.hy_rank_hd a:hover { color: var(--zh-primary); }
.hy_rank_row {
    display: flex; align-items: center; gap: 13px;
    padding: 12px 20px; transition: background .2s;
}
.hy_rank_row + .hy_rank_row { border-top: 1px dashed var(--zh-border); }
.hy_rank_row:hover { background: var(--zh-primary-light); }
.hy_rank_no {
    width: 22px; height: 22px; flex: none;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--zh-radius-xs); font-size: 12px; font-weight: 800;
    background: var(--zh-bg-muted); color: var(--zh-text-tertiary);
}
.hy_rank_row:nth-child(2) .hy_rank_no { background: var(--zh-accent); color: #fff; }
.hy_rank_row:nth-child(3) .hy_rank_no { background: #FF9153; color: #fff; }
.hy_rank_row:nth-child(4) .hy_rank_no { background: #FFC7AE; color: #8A3711; }
.hy_rank_img { width: 54px; height: 54px; flex: none; border-radius: var(--zh-radius-sm); overflow: hidden; background: var(--zh-bg-light); }
.hy_rank_img img { width: 100%; height: 100%; object-fit: cover; }
.hy_rank_txt { flex: 1; min-width: 0; }
.hy_rank_txt h4 {
    margin: 0 0 5px; font-size: 13.5px; font-weight: 500; color: var(--zh-text-primary);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.hy_rank_txt div { font-size: 12px; color: var(--zh-text-tertiary); }
.hy_rank_txt b { font-size: 15px; font-weight: 800; color: var(--zh-price); margin-right: 8px; }

/* ---------- ⑦ 入驻商家 ---------- */
.hy_stores { display: flex; flex-wrap: wrap; gap: 14px; }
.hy_store {
    flex: 1 1 150px; min-width: 0;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    padding: 20px 12px; background: #fff;
    border-radius: var(--zh-radius-lg); box-shadow: var(--zh-shadow-sm);
    transition: all .2s;
}
.hy_store:hover { transform: translateY(-4px); box-shadow: var(--zh-shadow-md); }
.hy_store img {
    width: 60px; height: 60px; object-fit: cover;
    border-radius: var(--zh-radius-full); background: #fff;
    border: 2px solid var(--zh-bg-light);
}
.hy_store b {
    font-size: 12.5px; font-weight: 600; color: var(--zh-text-primary); text-align: center;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
}
.hy_store span { font-size: 11.5px; color: var(--zh-text-tertiary); }

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
    .hy_stage_in { grid-template-columns: 208px 1fr; }
    .hy_side { display: none; }
    .hy_kv h1 { font-size: 31px; }
}
@media (max-width: 992px) {
    .hy_stage { padding: 22px 0 56px; }
    .hy_stage_in { grid-template-columns: 1fr; min-height: 0; }
    .hy_cats { display: none; }
    .hy_kv { padding: 34px 28px; min-height: 300px; }
    .hy_promise { grid-template-columns: 1fr 1fr; }
    .hy_pick { grid-template-columns: 1fr; }
    .hy_promo { flex-direction: row; align-items: center; gap: 20px; }
    .hy_promo_img { margin-top: 0; padding-top: 0; flex: none; width: 150px; }
    .hy_floor { grid-template-columns: 1fr; }
    .hy_floor_side { padding: 20px; }
    .hy_floor_all { margin-top: 0; }
    .hy_ranks { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .hy_stage { padding: 16px 0 48px; }
    .hy_kv { padding: 26px 20px; min-height: 250px; border-radius: var(--zh-radius-md); }
    .hy_kv h1 { font-size: 24px; }
    .hy_kv > p { font-size: 13.5px; margin-bottom: 20px; }
    .hy_b1, .hy_b2 { height: 42px; padding: 0 20px; font-size: 13.5px; }
    .hy_promise { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: -28px; }
    .hy_promise_item { padding: 13px; gap: 10px; }
    .hy_promise_item > i { width: 36px; height: 36px; font-size: 15px; }
    .hy_promise_item b { font-size: 13px; }
    .hy_promise_item span { display: none; }
    .hy_sec { padding-top: 34px; }
    .hy_sec_t h2 { font-size: 19px; }
    .hy_sec_t span { display: none; }
    .hy_promo { flex-direction: column; align-items: flex-start; }
    .hy_promo_img { width: 100%; padding-top: 14px; }
    .hy_promo_img img { max-width: 240px; }
    .hy_store { flex-basis: 90px; }
    .hy_rank_row { padding: 11px 14px; }
}