/* ================= 页面主骨架 ================= */
.hire_main_page {
    position: relative;
    width: 100%;
    padding-top: 24vh;
    padding-bottom: 9.2vw;
    overflow: hidden;
    background-color: #F8F8F8;
}

.hire_width_limit {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

/* ================= 1. 顶部 Hero Banner ================= */
.hire_hero_section {
    position: relative;
    width: 100%;
    margin-bottom: 4.2vw;
}

.hero_text_box {
    text-align: center;
    margin-bottom: 3.4vw;
}

.hero_title {
    font-weight: bold;
    font-size: 3.125vw;
    color: #000;
    line-height: 1;
}

.hero_sub_title {
    font-size: 1.25vw;
    color: #000;
    margin-top: 1.667vw;
    line-height: 1;
}

.hero_banner_box {
    position: relative;
    width: 100%;
    height: 34.9vw;
    border-radius: 1.25vw;
    overflow: hidden;
    background-color: #E6E6E6;
}

.hero_banner_img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    will-change: transform;
}

/* ================= 2. 产品列表区域 ================= */
.products_list_section {
    position: relative;
    width: 100%;
}
.products_list_section .hire_width_limit{
    width: 81.25%;
}
/* 分类导航 */
.category_nav_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 auto;
    width: 91%;
    margin-bottom: 7.24vw;
}

.cat_nav_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    flex: 1;
    color: #000;
    position: relative;
    padding-bottom: 0.6vw;
    transition: opacity 0.3s;
}

.cat_nav_item .icon_box {
    width: 2.2vw;
    height: 2.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.3vw;
    color: #1A1A1A;
}

/* 图标占位样式，替换为真实iconfont后可按需调整 */
.cat_nav_item .icon_box .iconfont {
    font-size: 2.3vw; 
}

.cat_nav_item .cat_name {
    position: relative;
    font-size: 1.1vw;
    font-weight: bold;
    white-space: nowrap;
    color: #1A1A1A;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1;
}
.cat_nav_item .cat_name::after {
    content: '';
    position: relative;
    margin-top: 0.625vw;
    width: 0%;
    height: 2px;
    display: inline-block;
    background-color: #27448B;
}
.cat_nav_item.active .cat_name::after {
    content: '';
    position: relative;
    margin-top: 0.625vw;
    width: 130%;
    height: 2px;
    display: inline-block;
    background-color: #27448B;
}

/* 激活状态蓝线 */
/* .cat_nav_item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.15vw;
    background-color: #27448B;
} */

/* 模块标题 */
.section_title {
    text-align: center;
    font-size: 2.5vw;
    font-weight: bold;
    color: #313131;
    margin-bottom: 4.8vw;
    line-height: 1;
}

/* 产品网格 */
.products_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.6vw 1.56vw;
    margin-bottom: 4vw;
}

/* 产品卡片 */
.product_card {
    display: block;
    background-color: #fff;
    border-radius: 0.8vw;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 0.4vw 1.2vw rgba(0, 0, 0, 0.02);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.product_card:hover {
    transform: translateY(-0.4vw);
    box-shadow: 0 1vw 2vw rgba(0, 0, 0, 0.06);
}

.card_img_box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.84;
    background-color: #F0F0F0;
    overflow: hidden;
    border-radius: 1vw;
}

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

.tag_new {
    position: absolute;
    top: 1.56vw;
    left: 1.77vw;
    background-color: #DA251C;
    color: #fff;
    font-size: 0.94vw;
    padding: 0.7vw 1.25vw;
    line-height: 1;
    border-radius: 999px;
    font-weight: bold;
    z-index: 2;
}

.card_info {
    padding: 1.8vw;
    padding-bottom: 1.8vw;
}

.card_title_row {
    min-height: 2.4vw;
    display: flex;
    align-items: center;
    margin-bottom: 0.57vw;
    gap: 1.2vw;
}

.card_title {
    font-size: 1.56vw;
    font-weight: bold;
    color: #1A1A1A;
    margin: 0;
    line-height: 1.2;
}

.tag_custom {
    background-color: #BFBFBF;
    color: #fff;
    font-size: 0.94vw;
    padding: 0.73vw 0.94vw;
    line-height: 1;
    font-weight: bold;
    border-radius: 999px;
    white-space: nowrap;
}

.card_desc {
    font-size: 0.94vw;
    color: #707070;
    margin: 0 0 1.35vw 0;
    line-height: 1;
}

.card_colors {
    display: flex;
    gap: 0.73vw;
}

.color_dot {
    width: 1.46vw;
    height: 1.46vw;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.06);
}
.detail_btn{
    margin: 0 auto;
}

/* ============================================================
 * 📱 产品中心页面主体内容移动端与平板端适配
 * ============================================================ */

/* 平板端适配 (769px ~ 1024px) */
@media (max-width: 1024px) {
    .hire_main_page {
        padding-top: 15vh;
        padding-bottom: 8vw;
    }
    .hire_hero_section {
        margin-bottom: 6vw;
    }
    .hero_title {
        font-size: 4.8vw;
    }
    .hero_sub_title {
        font-size: 2vw;
        margin-top: 2vw;
    }
    .hero_banner_box {
        height: 42vw;
        border-radius: 2vw;
    }
    .products_list_section .hire_width_limit {
        width: 90%;
    }
    .category_nav_box {
        width: 100%;
        margin-bottom: 6vw;
    }
    .cat_nav_item .icon_box {
        width: 4vw;
        height: 4vw;
        margin-bottom: 1.5vw;
    }
    .cat_nav_item .icon_box .iconfont {
        font-size: 4vw;
    }
    .cat_nav_item .cat_name {
        font-size: 1.8vw;
    }
    .section_title {
        font-size: 3.8vw;
        margin-bottom: 4vw;
    }
    .products_grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 3vw 2vw;
    }
    .card_title {
        font-size: 2.2vw;
    }
    .card_desc {
        font-size: 1.4vw;
    }
    .color_dot {
        width: 2.2vw;
        height: 2.2vw;
    }
}

/* 手机端适配 (max-width: 768px) */
@media (max-width: 768px) {
    /* 1. 顶部 Hero Banner 适配 */
    .hire_main_page {
        padding-top: 11vh;
        padding-bottom: 12vw;
    }
    .hire_hero_section {
        margin-bottom: 8vw;
    }
    .hero_text_box {
        margin-bottom: 5vw;
    }
    .hero_title {
        font-size: 6.8vw;
        line-height: 1.25;
    }
    .hero_sub_title {
        font-size: 3.6vw;
        margin-top: 2.5vw;
        color: #444444;
    }
    .hero_banner_box {
        height: 52vw;
        border-radius: 3.5vw;
    }

    /* 2. 分类导航栏：转为横向丝滑滑动条（解决字数不一被挤烂问题） */
    .products_list_section .hire_width_limit {
        width: 92%;
    }
    .category_nav_box {
        width: 100%;
        margin: 0 auto 7vw;
        padding: 0;
        display: flex;
        flex-wrap: wrap;             /* 开启自动换行 */
        justify-content: center;     /* 整体居中，第二行的项目也会自然居中 */
        gap: 5vw 4vw;               /* 行间距 5vw，列间距 4vw */
        overflow: visible;           /* 关闭之前的横向滚动 */
    }
    .category_nav_box::-webkit-scrollbar {
        display: none;
    }
    .cat_nav_item {
        width: calc((100% - 8vw) / 3); /* 强制一行最多 3 个 */
        flex: 0 0 auto;
        padding-bottom: 1.2vw;
    }
    .cat_nav_item .icon_box {
        width: 6.5vw;
        height: 6.5vw;
        margin-bottom: 1.5vw;
    }
    .cat_nav_item .icon_box .iconfont {
        font-size: 6vw;
    }
    .cat_nav_item .cat_name {
        font-size: 3vw;              /* 适度调和字号，确保多字项（如“旅行本/证件套/配件”）排版完整 */
    }
    .cat_nav_item .cat_name::after,
    .cat_nav_item.active .cat_name::after {
        margin-top: 1.2vw;
        height: 2px;
    }
    /* 3. 模块标题 */
    .section_title {
        font-size: 5.4vw;
        margin-bottom: 5vw;
    }

    /* 4. 产品卡片网格：转为精致的双列瀑布流排列 */
    .products_grid {
        grid-template-columns: repeat(2, 1fr); /* 双列布局 */
        gap: 4.5vw 3vw;
        margin-bottom: 7vw;
    }
    .product_card {
        border-radius: 2.5vw;
    }
    .card_img_box {
        border-radius: 2.5vw;
    }
    .tag_new {
        top: 2vw;
        left: 2vw;
        font-size: 2.4vw;
        padding: 0.8vw 2vw;
    }
    .card_info {
        padding: 3vw 2.5vw 3.5vw;
    }
    .card_title_row {
        min-height: auto;
        margin-bottom: 1.5vw;
        gap: 1.5vw;
        flex-wrap: wrap;
    }
    .card_title {
        font-size: 3.8vw;
        line-height: 1.3;
    }
    .card_colors {
        gap: 1.6vw;
    }
    .color_dot {
        width: 3.8vw;
        height: 3.8vw;
    }
    /* 2. 隐藏产品描述与定制标签（不显示、不占位） */
    .card_desc,
    .tag_custom {
        display: none !important;
    }
}

/* ============================================================
 * 🌟 分类导航项 (cat_nav_item) 与 产品卡片 (product_card) Hover 交互体系
 * ============================================================ */

/* ---------------- 1. 分类导航项 (cat_nav_item) ---------------- */
.cat_nav_item {
    cursor: pointer;
}

.cat_nav_item .icon_box {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
    will-change: transform;
}

.cat_nav_item .cat_name {
    transition: color 0.3s ease;
}

.cat_nav_item .cat_name::after {
    transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
    transform-origin: center;
}

/* ---------------- 2. 产品卡片 (product_card) ---------------- */
.product_card {
    cursor: pointer;
    will-change: transform, box-shadow;
}

.product_card .card_img_box img {
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.product_card .card_title {
    transition: color 0.3s ease;
}

/* 颜色选择圆点悬浮反馈 */
.product_card .color_dot {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ---------------- 3. 悬停效果 (仅在桌面/支持 Hover 的设备生效) ---------------- */
@media (hover: hover) {

    /* >>> 分类项 Hover <<< */
    .cat_nav_item:hover .icon_box {
        transform: translateY(-4px) scale(1.08);
        color: #27448B;
    }

    .cat_nav_item:hover .cat_name {
        color: #27448B;
    }

    /* 非激活项 Hover 时展开半长指示线，不喧宾夺主 */
    .cat_nav_item:not(.active):hover .cat_name::after {
        width: 70%;
        opacity: 0.85;
    }

    /* >>> 产品卡片 Hover <<< */
    .product_card:hover {
        transform: translateY(-8px);
        box-shadow: 0 18px 36px rgba(39, 68, 139, 0.08), 
                    0 4px 12px rgba(0, 0, 0, 0.04);
    }

    /* 图片平滑拉近 */
    .product_card:hover .card_img_box img {
        transform: scale(1.06);
    }

    /* 标题高亮为品牌蓝 */
    .product_card:hover .card_title {
        color: #27448B;
    }

    /* 单独滑过色块小圆点时轻微放大微弹 */
    .product_card .color_dot:hover {
        transform: scale(1.2);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    }
}