/* Improved product grid layout styles */

/* Ensure consistent product card sizes */
.product_item {
    min-height: 320px;
    display: flex;
    flex-direction: column;
}

.product_item_inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pro_img {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.pro_img img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.pro_des {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 27px; /* Adjusted to fit 2 lines of text */
}

.pro_name {
    font-family: var(--primary-font);
    font-size: 14px; /* Added font-size */
    font-weight: 400; /* Added font-weight */
    margin-bottom: 0px; /* Reduced margin-bottom */
    line-height: 1.3; /* Added line-height */
    overflow: hidden; /* Added overflow hidden */
    text-overflow: ellipsis; /* Added text-overflow ellipsis */
    /* The following properties might be useful if you want to enforce a specific number of lines */
    /* display: -webkit-box; */
    /* -webkit-line-clamp: 2; */ /* Show 2 lines */
    /* -webkit-box-orient: vertical; */
    min-height: 20px; /* Adjust as needed for 2 lines of text with 1.2 line-height and 14px font (14*1.2*2 approx) */
}

.pro_name a {
    font-family: var(--primary-font);
    color: #333;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pro_name a:hover {
    color: #fe5200;
}

/* Better grid layout for all screen sizes */
.product_sliders {
    display: grid;
    grid-gap: 15px;
}

/* Make buttons consistent */
.pro_btn button, 
.pro_btn a.addcartbutton {
    width: 100%;
    text-align: center;
    padding: 8px;
    border-radius: 4px;
}

/* Fix alignment on small screens */
@media only screen and (max-width: 767px) {
    .pro_img {
        height: 140px;
    }
}