* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
}
body {
    background-color: #ffffff;
}

/* ========== Top Banner Area ========== */
.product-banner {
    background: linear-gradient(95deg, #092362, #04163f);
    color: #ffffff;
    padding: 32px 42px;
    position: relative;
    /* overflow: hidden; */
    background-image: radial-gradient(rgba(60,150,255,0.15) 1px, transparent 1px);
    background-size: 25px 25px;
}
.banner-right-img {
    /* position: absolute;
    right: 155px;
    top: 0; */
    height: 300px;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
    /* 核心：线性渐变遮罩，边缘透明过渡 */
    -webkit-mask-image: linear-gradient(to center, transparent 1%, black 15%);
    mask-image: linear-gradient(to center, transparent 1%, black 15%);
    /* 调整 15% 控制透明区域大小 */
    /* 旋转30° */
    transform: rotate(10deg);
}

.banner-top-text h1 {
    font-size: 49px;
    font-weight: 700;
    letter-spacing: 1px;
}
.breadcrumb {
    margin-top: 10px;
    font-size: 16px;
}
.breadcrumb a {
    color: #69b3ff;
    text-decoration: none;
}
.banner-services-wrap {
    display: flex;
    gap: 65px;
    margin-top: 45px;
    flex-wrap: wrap; /* 🔥 核心：自动换行（小屏幕自动折行） */
    row-gap: 18px;   /* 换行后，行与行之间的间距（避免挤在一起） */
}
.service-item {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}
.service-icon-box {
    width: 34px;
    height: 34px;
    margin-top: 3px;
}
.service-desc h4 {
    font-size: 18px;
    font-weight: 600;
}
.service-desc p {
    font-size: 13px;
    opacity: 0.82;
    margin-top: 3px;
}

/* ========== Main Container (Sidebar + Product Area) ========== */
.main-container {
    display: flex;
    padding: 32px 42px;
    gap: 32px;
}
/* Left Sidebar */
.sidebar {
    width: 225px;
    flex-shrink: 0;
}
.sidebar-block {
    margin-bottom: 38px;
}
.sidebar-block > h3 {
    font-size: 16px;
    color: #2d2d2d;
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.category-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 13px;
    margin: 5px 0;
    border-radius: 5px;
    font-size: 15px;
    cursor: pointer;
}

.category-name{
    text-align: left;
    width: 100%;
    margin-left: 5px;
}

.category-item.active {
    background-color: #2462eb;
    color: #fff;
}
.cat-number {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    background: #e4e7ec;
    color: #333;
}
.category-item.active .cat-number {
    background: rgba(255,255,255,0.22);
    color: #fff;
}
/* Filter Checkbox Area */
.filter-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 15px;
}
.filter-option input[type="checkbox"] {
    margin-right: 8px;
}

/* Right Main Content */
.product-main {
    flex: 1;
}
.main-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
    flex-wrap: wrap;
    gap: 10px;
}
.brand-tag-group {
    display: flex;
    gap: 11px;
    flex-wrap: wrap; /* 品牌标签自动换行 */
    row-gap: 8px;
}
.tag-button {
    padding: 8px 17px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
}
.tag-button:hover {
    background-color: #d0d6e0;
    color: black;
}
.tag-button.active {
    background: #2462eb;
    color: #fff;
    border-color: #2462eb;
}
.sort-dropdown {
    padding: 8px 13px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

/* Product Grid Layout */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4,  1fr);
    gap: 18px;
    margin-bottom: 32px;
}
/* 商品卡片：固定整体高度，纵向弹性布局 */
.product-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 16px;
    text-align: center;
    width: 100%;
    min-width: 0;
    /* 固定卡片总高度，自行修改数值（例400px） */
    height: 350px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px #0a4a9020;
    box-sizing: border-box; /* padding不会撑大固定高度 */
}
/* 图片样式：固定高度、保持原图比例 */
.pro-grid-pro-img {
    width: 100%;
    /* 图片固定显示高度，自行修改数值（例260px） */
    height: 240px;
    /* 关键：保持原图宽高比，完整显示，不拉伸变形 */
    object-fit: contain;
    /* 图片居中对齐 */
    object-position: center;
    display: block;
    margin: 0 auto;
}
.product-card img {
    /* 动画时长+缓动函数，顺滑缩放 */
    transition: transform 0.3s ease;
}
.img-wrap {
    flex: 1;
    display: flex;
    align-items: center;
}
.grid-pro-img {
    max-height: unset;
}
/* 鼠标悬浮卡片时图片放大 */
.product-card:hover img {
    /* 1.05 = 放大5%，数值越大放得越大，可改成1.08/1.1 */
    transform: scale(1.08);
}
.product-card h4 {
    font-size: 15px;
    color: #222222;
    margin-bottom: 5px;
}
.product-card p {
    font-size: 12px;
    color: #666666;
    margin-bottom: 13px;
}
/* 按钮样式保持居中 */
.view-detail-btn {
    display: inline-block;
    padding: 6px 0;
    border-radius: 4px;
    background: #2563eb;
    color: #fff;
    text-decoration: none;
}

.text-ellipsis {
    margin-top: auto; /* 核心：自动占满上方空白，固定到底部 */
    margin-bottom: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* hover 透明度核心代码 */
.view-detail-btn:hover {
    /* 把背景色改成 rgba，最后一位是透明度 0~1 */
    background: rgba(22, 119, 255, 0.8);
    color: #fff;
}

/* Pagination */
.pagination-wrap {
    display: flex;
    justify-content: center;
    gap: 7px;
}
.page-num {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size:14px;
    cursor:pointer;
}
.page-num.active {
    background-color: #2462eb;
    color: white;
    border-color: #2462eb;
}
/* ========== 多级分类树形菜单样式 ========== */
.category-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* 子分类缩进（二级分类） */
.category-sub {
    margin-left: 16px;
    display: none;
    flex-direction: column;
    gap: 2px;
}
/* 三级分类再缩进 */
.category-sub .category-sub {
    margin-left: 24px;
}
/* 父分类箭头样式 */
.category-arrow {
    display: inline-block;
    font-size: 10px;
    margin-right: 6px;
    color: #666;
    transition: transform 0.2s;
}
/* 展开后箭头向下 */
.parent-category.expand .category-arrow {
    transform: rotate(90deg);
}
.category-item {
    margin: 0;
    transition: background 0.2s;
    align-items: center;
}
.category-item:hover {
    background-color: #d0d6e0;
    color:black;
}
/* 展开子分类 */
.category-sub.show {
    display: flex;
}

.detail-image{
    max-width: 650px;
}

/* ========== 🔥 全页面响应式适配（小屏幕自动换行） ========== */
@media (max-width: 768px) {
    /* 1. 顶部Banner缩小间距 */
    .product-banner {
        padding: 24px;
    }
    /* 2. 服务项小间距 */
    .banner-services-wrap {
        gap: 20px;
    }
    /* 3. 核心：侧边栏+产品区 垂直换行 */
    .main-container {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    /* 4. 侧边栏铺满宽度 */
    .sidebar {
        width: 100%;
    }
    /* 5. 产品列表手机端2列 */
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .detail-image{
        max-width: 300px;
    }
}

@media (max-width: 500px) {
    .product-card{
        height: 290px;
    }
}

.service-item{
    transition: transform 0.3s ease;
}
.service-item:hover{
    filter: brightness(1.2);
    transform: scale(1.03);
}