/*
Theme Name: Kutar Child Theme
Theme URI: https://kutar.top/
Description: Дочірня тема для Hello Elementor, оптимізована для максимальної продуктивності та повного контролю через Elementor.
Author: Kutar
Author URI: https://kutar.top/
Template: hello-elementor
Version: 1.0.0
Text Domain: kutar-child-theme
*/

/* --- ГЛОБАЛЬНІ CSS-СТИЛІ --- */

/* Custom CSS для стилізації виділеного тексту */
::selection {
    background-color: #824c2a; /* Колір виділення */
    color: #ffffff; /* Колір тексту на виділенні (білий) */
}

/* Для підтримки старих версій браузерів (Firefox) */
::-moz-selection {
    background-color: #824c2a;
    color: #ffffff;
}

/* --- ФІНАЛЬНА ТРАНСФОРМАЦІЯ ТАБЛИЦІ АТРИБУТІВ ТОВАРУ (WOOCOMMERCE) НА ЧИСТИЙ СПИСОК --- */

/* Загальні стилі для контейнера атрибутів - Прибираємо ВСІ зовнішні ознаки таблиці */
.woocommerce-product-attributes.shop_attributes {
    width: 100%;
    border: none !important; /* Насильно прибираємо всі межі таблиці */
    border-collapse: separate;
    margin: 0 !important; /* Прибираємо всі зовнішні відступи */
    padding: 0 !important; /* Прибираємо всі внутрішні відступи */
    background-color: transparent !important; /* Прибираємо фоновий колір */
    font-family: inherit; /* Використовуємо шрифт теми за замовчуванням */
    font-size: 0.9em; /* Зменшуємо базовий розмір шрифту всієї секції */
    line-height: 1.6; /* Комфортний міжрядковий інтервал */
}

/* Перетворюємо tbody і tr на блочні елементи, прибираючи їхні стилі таблиці */
.woocommerce-product-attributes.shop_attributes tbody,
.woocommerce-product-attributes.shop_attributes tr {
    display: block;
    width: 100%;
    margin: 0 !important; /* Прибираємо зовнішні відступи рядків */
    padding: 0 !important; /* Прибираємо внутрішні відступи рядків */
    background-color: transparent !important; /* Прибираємо фоновий колір рядків */
}

/* Стилі для кожного рядка атрибута - перетворюємо на гнучкий контейнер */
.woocommerce-product-attributes-item {
    display: flex; /* Перетворюємо рядок на flex-контейнер */
    justify-content: flex-start; /* Вирівнювання елементів на початку */
    align-items: baseline !important; /* *** КЛЮЧ: Вирівнюємо елементи по їхній базовій лінії тексту *** */
    padding: 5px 0 !important; /* Вертикальні відступи між атрибутами (можна змінити на 0) */
    border-bottom: none !important; /* Прибираємо межі між рядками */
    background-color: transparent !important; /* Прибираємо фони */
    transition: none !important; /* Прибираємо переходи при наведенні */
}

/* Прибираємо hover-ефект, якщо він був встановлений раніше */
.woocommerce-product-attributes-item:hover .woocommerce-product-attributes-item__label,
.woocommerce-product-attributes-item:hover .woocommerce-product-attributes-item__value {
    background-color: transparent !important; /* Без зміни фону при наведенні */
}

/* Стилі для назви атрибута (ліва частина) */
.woocommerce-product-attributes-item__label {
    flex-shrink: 0; /* Забороняємо зменшувати ширину */
    width: 100px !important; /* Фіксована ширина для назви атрибута (налаштуй під свої потреби) */
    padding: 0 !important; /* Прибираємо внутрішні відступи */
    border: none !important; /* Прибираємо межі */
    background-color: transparent !important; /* Прибираємо фон */
    text-align: left; /* Вирівнювання тексту */
    font-weight: 400 !important; /* Жирний шрифт для назви атрибута */
    color: inherit; /* Успадковуємо колір тексту від батьківського елемента */
    margin-right: 10px !important; /* Відступ між назвою атрибута та його значенням */
    font-style: normal !important; /* Забираємо похилий стиль */
    vertical-align: baseline !important; /* Додаткове вирівнювання по базовій лінії */
    display: inline-block !important; /* Перетворюємо на inline-block для кращого вирівнювання */
}

/* Стилі для значення атрибута (права частина) */
.woocommerce-product-attributes-item__value {
    flex-grow: 1; /* Дозволяємо займати доступний простір */
    padding: 0 !important; /* Прибираємо внутрішні відступи */
    border: none !important; /* Прибираємо межі */
    background-color: transparent !important; /* Прибираємо фон */
    text-align: left;
    color: inherit;
    font-style: normal !important; /* Забираємо похилий стиль */
    vertical-align: baseline !important; /* Додаткове вирівнювання по базовій лінії */
    display: inline-block !important; /* Перетворюємо на inline-block для кращого вирівнювання */
}

/* Якщо значення атрибута обгорнуте в <p> тег (часто буває у WooCommerce) */
.woocommerce-product-attributes-item__value p {
    margin: 0 !important; /* Прибираємо будь-які відступи у параграфів */
    padding: 0 !important; /* Прибираємо внутрішні відступи у параграфів */
    line-height: inherit; /* Успадковуємо міжрядковий інтервал */
    display: inline !important; /* Важливо: робимо inline, щоб не створювало зайвого блоку */
    font-style: normal !important; /* Забираємо похилий стиль */
    vertical-align: baseline !important; /* Додаткове вирівнювання для тексту всередині */
}

/* Прибираємо стилі для чергування рядків, якщо вони не потрібні */
.woocommerce-product-attributes-item:nth-child(even) .woocommerce-product-attributes-item__label,
.woocommerce-product-attributes-item:nth-child(even) .woocommerce-product-attributes-item__value {
    background-color: transparent !important;
}


/* --- АДАПТИВНІСТЬ ДЛЯ МОБІЛЬНИХ ПРИСТРОЇВ --- */
/* Застосовується, коли ширина екрана дорівнює або менше 768px */
@media (max-width: 768px) {
    .woocommerce-product-attributes.shop_attributes {
        font-size: 0.85em; /* Трохи менший шрифт на мобільних */
    }

    .woocommerce-product-attributes-item {
        /* Зберігаємо display: flex; justify-content: flex-start; */
        align-items: baseline !important; /* Вирівнювання по базовій лінії також на мобільних */
        padding: 5px 0 !important; /* Відступи між рядками на мобільних */
    }

    .woocommerce-product-attributes-item__label {
        width: 100px !important; /* Приклад: трохи менша фіксована ширина для назви атрибута на мобільних */
        margin-right: 8px !important; /* Трохи менший відступ */
        font-size: 1em;
        font-style: normal !important;
        vertical-align: baseline !important;
        display: inline-block !important;
    }

    .woocommerce-product-attributes-item__value {
        width: auto; /* Дозволяємо ширині бути автоматичною */
        flex-grow: 1; /* Займає весь доступний простір */
        font-size: 1em;
        font-style: normal !important;
        vertical-align: baseline !important;
        display: inline-block !important;
    }
}

/* --- СТИЛІ АРХІВНОЇ СТОРІНКИ ТОВАРІВ (WOOCOMMERCE) --- */

/* Загальний відступ зверху для основної області контенту WooCommerce */
.woocommerce .content-area {
    margin-top: 30px; /* Гарантований відступ від верхнього краю */
}

/* Хлібні крихти по центру ТІЛЬКИ на архівних сторінках WooCommerce */
/* Цей селектор є більш універсальним для всіх архівних сторінок */
.woocommerce .woocommerce-breadcrumb {
    text-align: center; /* Вирівнюємо по центру */
}

/* Заголовок архівної сторінки (наприклад, "Магазин", "Категорія") */
.woocommerce-products-header .woocommerce-products-header__title {
    text-align: center; /* Вирівнювання по центру */
}

/* Стиль бейджика "Розпродаж" */
.woocommerce ul.products li.product .onsale {
    background-color: #dc3545; /* Червоний фон */
    border-radius: 0px; /* Без заокруглення кутів */
    padding: 5px 10px; /* Внутрішні відступи */
    top: 15px; /* Відступ зверху від карточки */
    left: 10px; /* Відступ зліва від карточки */
    width: auto; /* Автоматична ширина по контенту */
    max-width: fit-content; /* Обмежує ширину по контенту */
    min-height: unset; /* Скидаємо мінімальну висоту */
    line-height: normal; /* Нормальна висота рядка */
}

/* Стилі для контейнера зображення товару */
.woocommerce ul.products li.product .woocommerce-loop-product__link img {
    display: block; /* Переконаємось, що зображення поводиться як блок */
    max-width: 100%; /* Займає всю доступну ширину контейнера */
    height: auto; /* Зберігає пропорції */
    transition: transform 0.5s ease-in-out; /* Плавний перехід за 0.5 секунди */
}

/* Ефект при наведенні курсору на зображення */
.woocommerce ul.products li.product .woocommerce-loop-product__link img:hover {
    transform: scale(1.05); /* Збільшення зображення на 5% */
}

/* Якщо зображення обгорнуте в додатковий контейнер, можливо, доведеться застосувати overflow: hidden до нього */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    overflow: hidden; /* Обрізає вміст, що виходить за межі контейнера зображення */
}

/* Заголовки товарів на картках */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    text-align: center; /* Заголовок товару по центру карточки */
    color: #414042; /* Основний колір заголовка */
}

/* Ефект при наведенні на заголовок товару */
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover {
    color: #824C2A; /* Колір при наведенні (фірмовий) */
}

/* Ціни товарів на картках (загальне вирівнювання) */
.woocommerce ul.products li.product .price {
    text-align: center; /* Вирівнювання ціни по центру */
}

/* Нова ціна (якщо є знижка і обгорнута в <ins> тег) */
.woocommerce ul.products li.product .price ins {
    text-decoration: none; /* Прибираємо підкреслення нової ціни */
    color: #dc3545; /* Колір нової ціни (акцентний) */
}

/* Стара ціна (закреслена) */
.woocommerce ul.products li.product .price del {
    color: #6D6E71; /* Сірий колір для старої ціни */
}

/* Приховати кнопку "Додати в кошик" на архівних сторінках */
.woocommerce ul.products li.product .button.add_to_cart_button {
    display: none;
}

/* --- СТИЛІ СТОРІНКИ ТОВАРІВ (WOOCOMMERCE) --- */

/* Хлібні крихти по лівому краю ТІЛЬКИ на сторінках окремого товару */
.single-product .woocommerce-breadcrumb {
    text-align: left; /* Вирівнюємо по лівому краю */
}