body {

    background-color: #f7f3eb;

}

.card-title{

    

}





.product-styles .card {

    display: flex;

    flex-direction: row;

    border-radius: 5px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    overflow: hidden; /* Ensures image does not overflow */

    margin: 0; /* Removes margin around the card */

    border: none;

}



.card-body {

    flex: 1;

    padding: 20px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-top-left-radius: 5px;

    border-top-right-radius: 5px;

    height: 300px; /* Fixed height for the text area */

    position: relative; /* Allows absolute positioning of the button */

}



.card-img-right {

    width: 50%;

    height: 300px; /* Fixed height for the image */

    object-fit: cover;

    /* margin-left: 10px; Distance between the image and the card body */

    margin: 10px 10px 10px 10px;

    

}

.card-img-right img{

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.btncs {

    position: absolute;

    bottom: 20px; /* Positioning from the bottom */

    left: 20px; /* Positioning from the left */

    margin: 0;

    font-size: 14px;

    padding: 5px 15px;

}



@media (max-width: 768px) {

    .product-styles .card {

        height: 290px;

        display: flex;

        flex-direction: column-reverse;

        overflow: hidden; /* Ensures image does not overflow */

        margin: 0; /* Removes margin around the card */

    }

    .card-img-right {

        width: 100%;

        height: 150px;

        object-fit: cover;

        margin: 0;

    }

    .card-body {

        /* flex: 1; */

        padding-top: -50px;

        display:flex;

        flex-direction: column;

        justify-content: start;

        /* border-top-left-radius: 5px;

        border-top-right-radius: 5px; */

        height: 150px; /* Fixed height for the text area */

        position: relative; 

    }

    .btncs {

        /* position:absolute; */

        width: 100px;

        bottom: 20px; /* Positioning from the bottom */

        left: auto;

        right: 20px!important;

        margin: 0;

        position: initial;

        display: inline-block;

        font-size: 12px;

    }

    .prod-tj .card-text{

        height: 60px;

        overflow: hidden;

    }

} 



 /* 页面切换按钮 */

 .container {

    position: relative; /* 设置为相对定位 */

  }

   

  .icon-r {

    position: absolute; /* 绝对定位 */

    top:350px;

    right: 0; /* 向左偏移按钮的宽度 */

    width: 80px; /* 按钮宽度 */

    height: 60px; /* 按钮高度 */

    cursor: pointer; /* 鼠标样式 */

    text-align: center !important;  z-index: 99;

  }

  .icon-l {

    position: absolute; /* 绝对定位 */

    top:350px;

    left: 0; /* 向左偏移按钮的宽度 */

    width: 60px; /* 按钮宽度 */

    height: 80px; /* 按钮高度 */

    cursor: pointer; /* 鼠标样式 */

    text-align: center !important;

    z-index: 99;

  }

  .icon-b {

    position: absolute; /* 绝对定位 */

    bottom: -40px;

    left: 50%; /* 向左偏移按钮的宽度 */

    width: 160px; /* 按钮宽度 */

    height: 60px; /* 按钮高度 */

    cursor: pointer; /* 鼠标样式 */   text-align: center;  z-index: 99;

  }





  

  @media (max-width: 768px) {

    .container {

        overflow: hidden;

      }

    .icon-l,.icon-r,.icon-b {

      position: static!important;

        height: auto;

        width: 80px; 

   

    }

    .icon-l i,.icon-r i,.icon-b i{

        font-size: 20px !important;

    }

    .prod-tj{

        margin-top: 0 !important;

    }

    

  }









  /* 详情图片的 */

  .xqimg-ss{

    width: 100%;

    height: 300px;

    object-fit: cover;

  }

















/* .card {

    border-radius: 5px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}



.card img {

    border-top-right-radius: 5px;

    border-bottom-right-radius: 5px;

    height: 200px;

    object-fit: cover;

    width: 100%;

}



.card-body {

    padding: 20px;

}



.card-body h5 {

    font-size: 1.2rem;

}



.card-body p {

    font-size: 0.9rem;

    color: #6c757d;

}



@media (max-width: 767.98px) {

    .card img {

        width: 100%;

        height: auto;

    }

    .card-body {

        text-align: center;

    }

} */







/* card */

/* .custom-card {

    width: 540px;

    height: 340px;

    border: none;

    background-color: #f8f8f3;

    border-radius: 15px;

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}



.custom-card-body {

    padding: 20px;

}



.custom-button {

    border: 1px solid #6c757d;

    color: #6c757d;

    transition: all 0.3s ease;

}



.custom-button:hover {

    background-color: #6c757d;

    color: white;

}



@media (max-width: 768px) {

    .custom-card {

        width: 100%;

        height: auto;

    }



    .custom-card .row {

        flex-direction: column;

    }



    .custom-card-body {

        text-align: center;

    }



    .custom-button {

        align-self: flex-start;

    }

} */