.product-content-wrapper {

    display: flex;

    flex-direction: row;

    gap: 20px;

}



/* 左侧分类部分 */

.product-types {

    flex: 1;

    max-width: 25%;

    /* 左侧宽度 */



    padding: 20px;

    border-radius: 8px;



}



/* 新增 select 分类部分 */

.product-types-select {

    display: none;

    /* 默认隐藏 */

    margin-bottom: 20px;

}



/* 美化 select 分类部分 */

.product-types-select select {

    width: 100%;

    padding: 10px;

    font-size: 16px;

    border: 1px solid #ccc;

    border-radius: 4px;

    background-color: #fff;

    appearance: none;

    /* 移除默认样式 */

    -webkit-appearance: none;

    /* Safari */

    -moz-appearance: none;

    /* Firefox */

    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 viewBox%3D%220 0 4 5%22%3E%3Cpath fill%3D%22%23333%22 d%3D%22M2 0L0 2h4zm0 5L0 3h4z%22/%3E%3C/svg%3E');

    background-repeat: no-repeat;

    background-position: right 10px center;

    background-size: 10px;

}



.product-types-select select:focus {

    outline: none;

    border-color: #16b777;

    box-shadow: 0 0 5px rgba(22, 183, 119, 0.5);

}



/* 右侧内容部分 */

.product-content {

    flex: 3;

    max-width: 75%;

    /* 右侧宽度 */

    padding: 20px;

    background-color: #fff;

    border-radius: 8px;



}





.product-types ul {

    list-style: none;

    padding-left: 20px;

}

.no-products{

    padding-left: 20px;

}

.product-types ul li {

    margin-bottom: 10px;

}



.product-types ul li a {

    text-decoration: none;

    color: #2f363c;





}





.product-images .card img {

    max-width: 40%;





}





.active a {

    color: #16b777 !important;

}





.product-types ul li:hover {

    background-color: #f0f0f0;

    border-radius: 4px;





}



.product-types ul li:hover a {

    color: #1e9fff;

}





.product-images .card:hover .front {



    background-image: none !important;

    transition: background-image 2s ease;

}





.product-images .card:hover .title-hide {

    opacity: 1;

    transition: opacity 2s ease;

}





.title-hide {



    opacity: 0;



    text-align: left;

    margin: 20px;





}



.heading {

    text-align: left;

    font-size: 24px;

    padding-bottom: 40px;

    color: #333;

    border-bottom: 1px solid #ccc;

}



.product-images {



    display: grid;

    flex-wrap: wrap;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    justify-content: center;

    /* 均匀分布 */

    gap: 30px;

}







.product-images .card {



    overflow: hidden;

    text-align: center;

    transition: transform 0.3s ease;

    max-width: 250px;

    cursor: pointer;



    justify-content: center;

    display: flex;

}















/* 美化 "Add to Quote" 按钮 */

.product-images .card .view.button {

    display: inline-block;



    padding: 4px 8px;

    font-size: 14px;

    font-weight: 500;

    color: #fff;

    background-color: #16b777;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    transition: background-color 0.3s ease, transform 0.2s ease;

}



.product-images .card .view.button:hover {

    background-color: #13a066;

    transform: scale(1.05);





}



.product-images .card .view.button:active {

    background-color: #0f8a55;

    transform: scale(0.95);

}







.description {

    font-size: 15px!important;

    font-weight: 200!important;

    text-align: left!important;

}



@media (max-width: 768px) {

    .product-types {

        display: none;

        /* 隐藏分类列表 */

    }







    .heading {



        margin: 0;





    }

    .picture{

        width: 95vw;

    }



    .product-content {

        max-width: 100% !important;

        padding: 5px;

        /* 让右侧内容占满宽度 */

    }



    .product-images .card {

        width: 100%;



        max-width:100%;





        /* 图片自适应宽度 */

    }



    .product-types-select{

        display: block;

    }



    .product-images {

        justify-content: center;



    }



}