.product-content-wrapper {



    flex-direction: row;

    gap: 20px;



    background-color: rgb(0, 79, 145, 0.3);

}



/* 左侧分类部分 */

.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 {

    display: contents;

    max-width: 75%;

    /* 右侧宽度 */

    padding: 20px;



    border-radius: 8px;



}

.products-page{





    justify-content: center;



}



.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 {



    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;

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

    justify-content: center;

    /* 均匀分布 */

    gap: 30px;





    justify-items: center;



}





.product-images .card {

    max-width: 23%;

    overflow: hidden;

    text-align: center;

    transition: transform 0.3s ease;

    min-width: 250px;

    cursor: pointer;

}













/* 美化 "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;





    }



    .product-content {

        max-width: 100% !important;

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

    }

    .product-images .card {

        max-width: 100%;

        display: grid;

        justify-items: center;





        /* 卡片自适应宽度 */

    }



    .product-images {

        justify-content: center;

    }





    .table-view {

        display: flex;

        justify-content: space-between;

        align-items: center;

    }

    .left-column {

        text-align: left;



    }

    .left-column p {

        font-size:0.875em;

        font-weight: 600;

    }

    .right-column {

        color: #333030;

        font-size: 14px;

        text-align: right;

    }

    .picture {

        position: relative;

        overflow: hidden;

        background-size: 100%;

        background-position: center;

        transition: background-size 0.3s ease;

        display: flex;

        justify-content: center; /* 水平居中 */

        align-items: center; /* 垂直居中 */

    }

    .picture img {

        display: block;

        max-width: 100%;

        max-height: 100%;

    }



}