.catalog-page{

    padding:20px 0;

}


.catalog-header{

    text-align:center;

    margin-bottom:20px;

}


.catalog-header h1{

    font-size:32px;

    margin-bottom:8px;

}


.catalog-header p{

    color:#666;

}



/* 产品/下载切换 */

.catalog-switch{

    display:flex;

    justify-content:center;

    gap:10px;

    margin-bottom:15px;

}


.catalog-switch button{

    padding:8px 20px;

    border:1px solid #ddd;

    background:#fff;

    border-radius:20px;

    cursor:pointer;

}


.catalog-switch button.active{

    background:#1677ff;

    color:#fff;

}



/* 搜索 */

.catalog-search{

    margin-bottom:15px;

}


.catalog-search input{

    width:100%;

    padding:12px;

    border:1px solid #ddd;

    border-radius:8px;

    font-size:15px;

}



/* 分类 */

.catalog-categories{

    display:flex;

    flex-wrap:wrap;

    gap:8px;

    margin-bottom:20px;

}


.catalog-categories button{

    padding:7px 15px;

    border-radius:18px;

    border:1px solid #ddd;

    background:#fff;

    cursor:pointer;

}



/* 产品列表 */

.catalog-grid{

    display:grid;

    grid-template-columns:

    repeat(4,1fr);

    gap:20px;

}



/* 产品卡片 */

.catalog-card{

    background:#fff;

    border-radius:10px;

    overflow:hidden;

    box-shadow:

    0 2px 10px rgba(0,0,0,.08);

    padding-bottom:15px;

}



/* 产品图片 */

.catalog-card img{

    width:100%;

    height:180px;

    object-fit:contain;

    background:#fff;

}



/* 产品名称 */

.catalog-card h3{

    font-size:16px;

    text-align:center;

    margin:12px 10px;

    line-height:1.5;

}



/* 按钮区域 */

.catalog-actions{

    display:flex;

    gap:10px;

    padding:0 12px;

}


.catalog-actions a,
.catalog-actions button{

    flex:1;

    padding:8px 5px;

    border-radius:6px;

    text-align:center;

    border:0;

    cursor:pointer;

    font-size:14px;

}



/* 查看按钮 */

.catalog-actions a{

    background:#1677ff;

    color:white;

    text-decoration:none;

}



/* 分享按钮 */

.catalog-actions button{

    background:#f3f3f3;

}



/* 手机端 */

@media(max-width:768px){


    .catalog-grid{

        grid-template-columns:

        repeat(2,1fr);

        gap:12px;

    }


    .catalog-card img{

        height:140px;

    }


    .catalog-card h3{

        font-size:14px;

        margin:10px 5px;

    }


    .catalog-actions{

        padding:0 8px;

        gap:6px;

    }


    .catalog-actions a,
    .catalog-actions button{

        font-size:12px;

        padding:7px 3px;

    }


    .catalog-header h1{

        font-size:26px;

    }


}

@media(max-width:768px){

    .catalog-page{

        padding-top:80px;

    }

}