/* ========== 仅页面专属CSS：面包屑、筛选、产品卡片、分页、推荐 ========== */
        .btn {
            display: inline-block;
            padding: 12px 28px;
            background-color: var(--zh-blue);
            color: var(--white);
            text-decoration: none;
            border-radius: 4px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            border: none;
            cursor: pointer;
            font-size: 16px;
        }
        .btn::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,0.2), transparent);
            transition: all 0.6s ease;
        }
        .btn:hover {
            background-color: var(--zh-dark-blue);
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,51,141,0.3);
        }
        .btn:hover::after {left:100%}
        .section-title {
            text-align: left;
            margin-bottom:25px;
            color:var(--zh-dark-blue);
            font-size:24px;
            font-weight:600;
            padding-bottom:10px;
            border-bottom:2px solid var(--zh-gold);
        }
    
        /* 筛选区域 */
        .product-filter {
            background:#fff;
            border:1px solid var(--border-gray);
            border-radius:4px;
            padding:20px;
            margin-bottom:30px;
            box-shadow:0 2px 8px rgba(0,0,0,0.05);
        }
        .filter-header {
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:20px;
            flex-wrap:wrap;
            gap:15px;
        }
        .list-search-box {
            display:flex;
            flex:1;
            max-width:600px;
        }
        .list-search-input {
            flex:1;
            height:40px;
            padding:0 15px;
            border:1px solid var(--border-gray);
            border-radius:4px 0 0 4px;
            outline:none;
        }
        .list-search-input:focus {border-color:var(--zh-blue)}
        .list-search-btn {
            height: 40px;
            width: 80px;
            background-color: var(--zh-blue);
            color: white;
            margin-right: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition);
        }
        .list-search-btn:hover {
            background-color: var(--zh-dark-blue);
        }
        .filter-toggle {
            display:flex;
            align-items:center;
            gap:8px;
            color:var(--zh-dark-blue);
            cursor:pointer;
            font-size:14px;
            font-weight:500;
        }
        .filter-toggle-icon {transition:var(--transition)}
        .filter-toggle.active .filter-toggle-icon {transform:rotate(180deg)}
        .filter-content {
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
            gap:20px;
            border-top:1px dashed var(--border-gray);
            padding-top:20px;
        }
        .filter-group-title {
            font-size:14px;
            color:var(--zh-dark-blue);
            font-weight:600;
            margin-bottom:10px;
            padding-bottom:5px;
            border-bottom:1px solid var(--zh-gray);
        }
        .filter-options {
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .filter-option {
            padding:5px 12px;
            background:var(--zh-gray);
            border-radius:4px;
            font-size:13px;
            color:var(--text-gray);
            cursor:pointer;
        }
        .filter-option:hover {background:var(--zh-light-gray); color:var(--zh-dark-blue)}
        .filter-option.active {background:var(--zh-blue); color:#fff}
        .filter-actions {
            display:flex;
            gap:10px;
            margin-top:20px;
            justify-content:flex-end;
        }
        .filter-btn {
            padding:8px 20px;
            border-radius:4px;
            font-size:14px;
            cursor:pointer;
        }
        .filter-btn.apply {background:var(--zh-blue); color:#fff; border:none}
        .filter-btn.reset {background:#fff; color:var(--text-gray); border:1px solid var(--border-gray)}
        .filter-btn:hover {opacity:0.9; transform:translateY(-2px)}
        /* 列表头部排序 */
        .product-list-header {
            display:flex;
            justify-content:space-between;
            align-items:center;
            margin-bottom:20px;
            flex-wrap:wrap;
            gap:10px;
        }
        .sort-select {
            padding:6px 12px;
            border:1px solid var(--border-gray);
            border-radius:4px;
        }
        .product-count strong {color:var(--zh-dark-blue)}
        /* 产品网格 */
        .product-grid {
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
            gap:25px;
            margin-bottom:40px;
        }
        .product-card {
            border:1px solid var(--border-gray);
            border-radius:6px;
            overflow:hidden;
            transition:var(--transition);
            background:#fff;
        }
        .product-card:hover {box-shadow:0 8px 20px rgba(0,0,0,0.1); transform:translateY(-5px)}
        .product-card-img {
            width:100%;
            height:280px;
            object-fit:cover;
            border-bottom:1px solid var(--border-gray);
        }
        .product-card-content {padding:15px}
        .product-card-title {
            font-size:18px;
            color:var(--zh-dark-blue);
            font-weight:600;
            line-height:1.4;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            margin-bottom:10px;
        }
        .product-card-title a {color:inherit; text-decoration:none}
        .product-card-title a:hover {color:var(--zh-gold)}
        .product-card-desc {
            font-size:14px;
            color:var(--text-gray);
            line-height:1.6;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            margin-bottom:15px;
        }
        .product-card-price {
            display:flex;
            align-items:baseline;
            gap:10px;
            margin-bottom:15px;
        }
        .card-price-current {font-size:20px; color:#ff4400; font-weight:bold}
        .card-price-original {font-size:14px; color:#999; text-decoration:line-through}
        .product-card-tags {display:flex; gap:8px; flex-wrap:wrap; margin-bottom:15px}
        .product-tag {padding:3px 8px; font-size:12px; border-radius:3px}
        .tag-hot {background:#fff0e8; color:#ff4400}
        .tag-new {background:#e8f4f8; color:#1890ff}
        .tag-recommend {background:#f6ffed; color:#52c41a}
        .product-card-actions {display:flex; gap:10px}
        .card-action-btn {
            flex:1;
            padding:8px 0;
            text-align:center;
            border-radius:4px;
            font-size:14px;
            text-decoration:none;
            cursor:pointer;
        }
        .card-action-primary {background:var(--zh-blue); color:#fff; border:none}
        .card-action-secondary {background:#fff; color:var(--zh-blue); border:1px solid var(--zh-blue)}
        .card-action-btn:hover {opacity:0.9; transform:translateY(-2px)}
        /* 分页 */
        .pagination {
            display:flex;
            justify-content:center;
            align-items:center;
            gap:8px;
            margin-bottom:40px;
            flex-wrap:wrap;
        }
        .page-item {
            padding:8px 15px;
            border:1px solid var(--border-gray);
            border-radius:4px;
            font-size:14px;
            color:var(--text-gray);
            cursor:pointer;
        }
        .page-item.active {background:var(--zh-blue); color:#fff; border-color:var(--zh-blue)}
        .page-item.disabled {opacity:0.5; cursor:not-allowed}
        .page-item.ellipsis {border:none; cursor:default}
        /* 推荐区域 */
        .recommended-products {margin-bottom:40px}
        .recommend-grid {
            display:grid;
            grid-template-columns:repeat(auto-fill, minmax(280px,1fr));
            gap:20px;
        }
        /* 页面媒体查询 */
        @media (max-width:992px) {
            .filter-content {grid-template-columns:repeat(2,1fr)}
            .product-grid {grid-template-columns:repeat(2,1fr)}
            .recommend-grid {grid-template-columns:repeat(2,1fr)}
        }
        @media (max-width:768px) {
            .filter-content {grid-template-columns:1fr}
            .filter-actions {justify-content:center}
            .product-grid {grid-template-columns:1fr}
            .recommend-grid {grid-template-columns:1fr}
            .page-item {padding:6px 12px}
        }
        @media (max-width:480px) {
            .product-card-img {height:200px}
        }
        
        
        /* 侧边菜单容器 */
        .sidebar-menu {
            width: 520px;
            background:var(--zh-blue);
            color: #fff;
            position: relative;
            /* 让子元素可以继承这个总高度 */
    height: fit-content;
        }
        /* 一级菜单项 */
        .menu-item {
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .menu-item > .first-level {
            padding: 18px 20px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }
        .menu-item > .first-level::after {
            content: ">";
            font-size: 16px;
        }
/* 二级菜单基础样式 */
.second-level {
    position: absolute;
    left: 100%;
    top: 0;
    background: #2b63d9;
    min-width: 280px;
    display: none;
    padding: 12px 0;
    /* 开启弹性布局，默认单列 */
    display: none;
    flex-direction: column;
     /* 关键设置：最小高度和父级侧边栏（也就是所有一级列表总高度）完全一致 */
    min-height: 100%;
}

/* 二级菜单项基础样式 */
.second-level li {
    list-style: none;
    padding: 12px 20px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* 核心逻辑：子项数量超过6条时自动切换为2列布局 */
.second-level:has(li:nth-child(7)) {
    flex-direction: row;
    flex-wrap: wrap;
    width: 560px; /* 宽度翻倍，放下两列 */
    /* 双列模式下也继承父级完整高度 */
    min-height: 100%;
    align-content: flex-start;
}
.second-level:has(li:nth-child(7)) li {
    width: 50%; /* 每个子项占一半宽度，实现一行2个 */
}

/* 鼠标悬停显示二级菜单 */
.menu-item:hover .second-level {
    display: flex;
}

/* 手机端适配：屏幕宽度小于768px时生效 */
@media (max-width: 768px) {
    /* 侧边栏占满手机整屏宽度 */
    .sidebar-menu {
        width: 100%;
        position: relative;
    }

    /* 取消桌面端二级菜单的绝对定位，改成向下展开的手风琴样式 */
    .second-level {
        position: static;
        left: auto;
        top: auto;
        width: 100% !important; /* 强制覆盖桌面端双列的宽设置 */
        display: none;
        flex-direction: column !important; /* 手机端强制单列，避免拥挤 */
        padding: 0;
    }

    /* 手机端hover触发改成点击展开，这里先默认隐藏，配合下面JS实现点击切换 */
    .menu-item:hover .second-level {
        display: none;
    }

    /* 手机端二级菜单项宽度100%，取消双列布局 */
    .second-level li {
        width: 100% !important;
        padding: 14px 30px; /* 二级菜单缩进，区分层级 */
        font-size: 14px;
    }

    /* 调整一级菜单字体和间距，适配手机屏幕 */
    .menu-item > .first-level {
        font-size: 16px;
        padding: 16px 15px;
    }
    
    .first-level.open::after {
    transform: rotate(90deg);
    transition: 0.2s;
}
    
}

        
        /* 分页控件 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 60px 0;
    flex-wrap: wrap;
}
.pagination a{
	 text-decoration: none; 
		 color: inherit;
}
.page-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px solid #e0e0e0;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.page-btn:hover:not(.active):not(.disabled) {
    border-color: #d4b16a;
    color: #d4b16a;
    transform: scale(1.1);
}
.page-btn.active {
    background-color: #00338d;
    color: white;
    border-color: #00338d;
}
.page-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}