.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:44px;--e-global-typography-primary-font-weight:500;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-line-height:1px;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 h2{color:#6F6248;font-family:"Montserrat", Sans-serif;font-size:30px;font-weight:700;font-style:normal;}.elementor-kit-5 h3{color:#6F6248;font-family:"Montserrat", Sans-serif;font-size:25px;font-weight:400;font-style:oblique;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{--e-global-typography-primary-font-size:22px;}.elementor-kit-5 h2{font-size:4.5vw;}.elementor-kit-5 h3{font-size:4vw;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 1. Забезпечуємо, що всі картки в сітці мають однакову висоту
   та самі є flex-контейнерами для вертикального розташування вмісту. */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    height: 100%; /* Дозволяє картці розтягуватись до висоти найвищої в ряду */
}

/* 2. Внутрішній контейнер продукту, який вміщує зображення та текстовий блок.
   Робимо його гнучким, щоб він розтягувався і міг розподіляти простір. */
.woocommerce ul.products li.product .product-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Дозволяє цьому контейнеру займати весь доступний вертикальний простір */
    justify-content: space-between; /* Розподіляє простір між зображенням та блоком тексту */
    padding-bottom: 20px; /* Додаємо невеликий відступ знизу картки */
}

/* 3. Контейнер зображення: встановлюємо фіксовану висоту для однорідності */
.woocommerce ul.products li.product .woo-entry-image-swap,
.woocommerce ul.products li.product .woo-entry-image {
    height: 300px; /* Встановіть оптимальну висоту для ваших фотографій (експериментуйте!) */
    display: flex; /* Робимо це flex-контейнером для центрування зображення */
    align-items: center; /* Вирівнюємо зображення по центру по вертикалі */
    justify-content: center; /* Вирівнюємо зображення по центру по горизонталі */
    overflow: hidden; /* Приховуємо все, що виходить за межі контейнера */
    margin-bottom: 15px; /* Відступ під зображенням */
}

.woocommerce ul.products li.product .woo-entry-image-swap img,
.woocommerce ul.products li.product .woo-entry-image img {
    width: 100%; /* Зображення займатиме всю ширину контейнера */
    height: 100%; /* Зображення займатиме всю висоту контейнера */
    object-fit: contain; /* Зберігає пропорції зображення, вписуючи його в контейнер.
                            Якщо хочете, щоб зображення завжди заповнювало простір, навіть обрізаючи його,
                            замініть на `object-fit: cover;` */
}

/* 4. ***КЛЮЧОВА ЗМІНА: Робимо блок з назвою, ціною та кнопкою також гнучким контейнером*** */
.woocommerce ul.products li.product .woo-entry-inner {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Цей блок буде розтягуватися, щоб зайняти весь вільний простір,
                    тим самим "відштовхуючи" кнопку донизу */
    padding: 0 25px; /* Залиште або відрегулюйте відступи з боків */
    margin-top: 15px; /* Можливо, вам потрібен невеликий відступ між зображенням і текстом */
}


/* 5. Заголовок товару: обмежуємо кількість рядків для візуальної однорідності. */
.woocommerce ul.products li.product li.title h2 {
    min-height: 3.9em; /* Приблизно для 3 рядків тексту (залежить від font-size та line-height).
                            Якщо 3 рядки - це максимум, то 3.9em має бути достатньо (1.3em * 3).
                            Якщо вам потрібно 2 рядки, спробуйте 2.6em.
                            Налаштуйте це значення, щоб воно вміщувало найдовші заголовки, які ви очікуєте. */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Обмежує до 3 рядків. Змініть на 2, якщо потрібно не більше 2. */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Додає "..." якщо текст обрізається */
    margin-bottom: 5px; /* Відступ під заголовком */
}

/* 6. Ціна товару: переконайтеся, що вона має правильні відступи. */
.woocommerce ul.products li.product li.price-wrap {
    margin-bottom: 10px; /* Відступ під ціною */
}

/* 7. Кнопка "Додати в кошик": завжди внизу свого батьківського flex-контейнера (.woo-entry-inner) */
.woocommerce ul.products li.product .btn-wrap {
    margin-top: auto; /* Ця властивість тепер працює всередині .woo-entry-inner,
                        притискаючи кнопку до нижнього краю цього блоку. */
    text-align: center; /* Центрує кнопку, якщо вона не займає всю ширину */
}

/* 8. Контейнер сітки: забезпечує, що flex-елементи в ряду розтягуються до однакової висоти. */
.products.elementor-grid {
    align-items: stretch; /* Забезпечує, що всі li.product в одному ряду матимуть однакову висоту */
}
/* Медіа-запит для мобільних пристроїв (екрани до 767px завширшки) */
@media (max-width: 767px) {

    /* Зменшуємо внутрішні відступи навколо вмісту картки */
    .woocommerce ul.products li.product .product-inner {
        padding-bottom: 10px; /* Зменшуємо відступ знизу */
    }

    /* Зменшуємо відступи навколо зображення */
    .woocommerce ul.products li.product .woo-entry-image-swap,
    .woocommerce ul.products li.product .woo-entry-image {
        height: 200px; /* Зменшуємо висоту контейнера зображення для мобільного,
                        експериментуйте, можливо, 250px або 180px буде краще. */
        margin-bottom: 10px; /* Зменшуємо відступ під зображенням */
    }

    /* Зменшуємо відступи в блоці з назвою, ціною та кнопкою */
    .woocommerce ul.products li.product .woo-entry-inner {
        padding: 0 10px; /* Зменшуємо бокові відступи */
        margin-top: 10px; /* Зменшуємо відступ зверху */
    }

    /* Відрегулюйте розмір шрифту заголовка, якщо він виглядає занадто великим */
    .woocommerce ul.products li.product li.title h2 {
        font-size: 16px; /* Або інший бажаний розмір */
        min-height: 2.6em; /* Якщо ви хочете, щоб заголовок був макс. 2 рядки на мобільному.
                                Якщо 3 рядки все ще виглядає добре, залиште 3.9em. */
        -webkit-line-clamp: 2; /* Обмежте до 2 рядків на мобільному, якщо це необхідно */
    }

    /* Відрегулюйте розмір шрифту ціни */
    .woocommerce ul.products li.product .price .amount {
        font-size: 18px; /* Або інший бажаний розмір */
    }

    /* Відрегулюйте відступ під ціною */
    .woocommerce ul.products li.product li.price-wrap {
        margin-bottom: 5px;
    }

    /* Відрегулюйте розмір шрифту кнопки "Додати в кошик" */
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .product-inner .added_to_cart {
        font-size: 16px; /* Або інший бажаний розмір */
        padding: 8px 15px; /* Зменшуємо внутрішні відступи кнопки */
    }

    /* Додаткові налаштування для сітки на мобільному, якщо елементи занадто розтягнуті по ширині */
    .woocommerce .products.elementor-grid {
        /* Якщо у вас 2 колонки на мобільному, Elementor вже, ймовірно, робить grid-template-columns: repeat(2, 1fr);
           Якщо ні, ви можете додати це тут: */
        /* grid-template-columns: repeat(2, 1fr); */
        gap: 10px; /* Зменшуємо відстань між картками на мобільних */
    }

}

/* Медіа-запит для планшетів (екрани від 768px до 1024px завширшки) */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Тут ви можете додати стилі, якщо хочете відрізняти планшетну версію від мобільної та десктопної.
       Наприклад, якщо на планшеті 3 колонки, але відступи мають бути меншими ніж на десктопі. */
       
    .woocommerce ul.products li.product .product-inner {
        padding-bottom: 15px;
    }
    .woocommerce ul.products li.product .woo-entry-image-swap,
    .woocommerce ul.products li.product .woo-entry-image {
        height: 250px; /* Можливо, трохи менше ніж на десктопі */
    }
    .woocommerce ul.products li.product .woo-entry-inner {
        padding: 0 15px;
    }
    /* Заголовок та інші елементи можна залишити як на десктопі або зменшити */
}
/* Стилі для кнопок "В корзину" у всіх картках товарів */
.woocommerce ul.products li.product .btn-wrap {
    width: 100% !important; /* Примусово розтягуємо обгортку кнопки на 100% ширини */
    text-align: center !important; /* Центруємо текст всередині, якщо він не розтягується сам */
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .product-inner .added_to_cart {
    width: 100% !important; /* Примусово розтягуємо саму кнопку на 100% ширини */
    display: block !important; /* Робимо кнопку блоковим елементом, щоб вона займала всю ширину */
    text-align: center !important; /* Центруємо текст кнопки */
    padding: 10px 15px !important; /* Зберігаємо внутрішні відступи кнопки */
    box-sizing: border-box !important; /* Гарантуємо коректний розрахунок ширини з padding */
}

/* Адаптивні стилі для мобільних пристроїв, якщо вони відрізняються */
@media (max-width: 767px) {
    .woocommerce ul.products li.product .btn-wrap {
        width: 100% !important;
    }
    .woocommerce ul.products li.product .button,
    .woocommerce ul.products li.product .product-inner .added_to_cart {
        width: 100% !important;
        display: block !important;
        padding: 8px 10px !important; /* Менші відступи на мобільному */
    }
}/* End custom CSS */