/* 1. Робимо картку "гумовою" і вирівнюємо контент */
.product-miniature {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.product-miniature .thumbnail-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10px; /* Додайте відступ, якщо потрібно */
}

/* 2. Обмеження заголовка до 2 рядків */
.product-miniature .product-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    min-height: 2.4em; /* Забезпечує фіксовану висоту для 2 рядків */
    margin-bottom: 10px;
}

/* 3. Опис (якщо він виводиться в списку) */
.product-miniature .product-description {
    flex-grow: 1; /* Займає вільне місце */
    margin-bottom: 10px;
}

/* 4. Притискаємо ціну та кнопки до низу */
.product-miniature .product-price-and-shipping,
.product-miniature .highlighted-informations {
    margin-top: auto; /* Це "штовхає" блок вниз */
}

/* 5. Вирівнювання зображень (опціонально, але важливо для естетики) */
.product-miniature .thumbnail img {
    width: 100%;
    height: 200px; /* Задайте фіксовану висоту для всіх картинок */
    object-fit: contain; /* Щоб картинка не спотворювалася */
}