/* Базові стилі для тіла */
body {
    background-color: #fefefe; /* Світлий фон */
    font-family: Arial, sans-serif; /* Універсальний шрифт */
    color: #333; /* Темний текст */
    padding: 20px; /* Відступи для загального вигляду */
}

/* Стилі для шапки */
.art-header {
    background-color: #f5f5f5; /* Світлий фон для шапки */
    display: flex; /* Використовуємо flexbox для розташування */
    justify-content: space-between; /* Розташування елементів зліва і справа */
    align-items: center; /* Вирівнювання елементів по вертикалі */
    padding: 10px 20px; /* Відступи всередині шапки */
    border-bottom: 2px solid #ddd; /* Лінія внизу */
}

.art-logo {
    width: 30%; /* Ширина лівого блоку */
    text-align: left;
}

.art-header-content {
    width: 70%; /* Ширина правого блоку */
    text-align: right;
}

/* Постійно відкрите вертикальне меню */
.art-hmenu {
    display: block !important; /* Завжди відкрите меню */
    text-align: left; /* Вирівнювання тексту ліворуч */
    margin: 10px 0; /* Відступи зверху та знизу */
    padding: 0; /* Прибираємо внутрішні відступи */
    list-style: none; /* Прибираємо маркери списку */
    border: 1px solid #ddd; /* Рамка меню */
    border-radius: 5px; /* Закруглені краї */
}

.art-hmenu li {
    margin-bottom: 10px; /* Відступ між пунктами меню */
}

.art-hmenu li a {
    display: block; /* Кнопки займають всю ширину */
    padding: 10px; /* Внутрішні відступи */
    background-color: #f5f5f5; /* Фон для пунктів меню */
    color: #333; /* Колір тексту */
    text-decoration: none; /* Прибираємо підкреслення */
    border: 1px solid #ddd; /* Рамка пунктів меню */
    border-radius: 5px; /* Закруглені краї */
    transition: background-color 0.3s ease; /* Плавна зміна фону */
}

.art-hmenu li a:hover {
    background-color: #e0e0e0; /* Зміна фону при наведенні */
    color: #000; /* Зміна кольору тексту при наведенні */
}

/* Сховати кнопку меню */
.art-menu-btn {
    display: none !important; /* Повністю приховати кнопку */
}

/* Медіа-запити для адаптації */
@media (max-width: 768px) {
    .art-header {
        flex-direction: column; /* Елементи шапки розташовуються вертикально */
        text-align: center;
    }

    .art-logo, .art-header-content {
        width: 100%; /* Кожен блок займає всю ширину */
        margin-bottom: 10px;
    }
}
/* Базові стилі для мобільної версії */
@media (max-width: 768px) {
    body {
        margin: 0; /* Прибираємо відступи зовні */
        padding: 0; /* Прибираємо внутрішні відступи */
    }

    .art-header {
        padding-top: 0; /* Прибираємо верхній внутрішній відступ */
        margin-top: 0; /* Прибираємо зовнішній верхній відступ */
    }

    .art-main {
        padding-top: 0; /* Якщо є, прибираємо верхній відступ у головному контейнері */
        margin-top: 0; /* Аналогічно для зовнішнього відступу */
    }
    
    .art-shapes {
        display: none; /* Якщо є невидимий контейнер, прибираємо його */
    }
}
/* Глобальні стилі для видалення зайвих відступів */
body {
    margin: 0; /* Забезпечує відсутність зовнішніх відступів */
    padding: 0; /* Забезпечує відсутність внутрішніх відступів */
}

.art-main, .art-sheet, .content-pane {
    padding-top: 0 !important; /* Прибираємо верхній внутрішній відступ */
    margin-top: 0 !important; /* Прибираємо зовнішній верхній відступ */
}

/* Специфічно для компонентів Joomla */
.component-content, .item-page {
    padding-top: 0 !important; /* Забезпечує відсутність відступу для компонентів */
    margin-top: 0 !important; /* Прибирає зовнішній відступ */
}

/* Для заголовків компонентів */
h1, h2, h3 {
    margin-top: 0 !important; /* Забезпечує відсутність відступу перед заголовком */
}

/* Мобільна адаптація */
@media (max-width: 768px) {
    .art-header, .art-main, .art-sheet {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .component-content, .item-page {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}
/* Загальні стилі для пагінації */
.pagination a,
.pagination span {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    font-size: 16px;
    color: #fff;
    background-color: #87cefa; /* Світло-блакитний фон */
    border: none; /* Без рамки */
    border-radius: 5px; /* Закруглені кути */
    text-decoration: none; /* Без підкреслення */
    text-align: center;
    transition: background-color 0.3s ease, transform 0.3s ease; /* Ефекти */
}

/* Стиль для активної кнопки */
.pagination span.current {
    background-color: #5bc0de; /* Трохи темніший блакитний */
    font-weight: bold;
    cursor: default; /* Вказівник для активного елементу */
}

/* Стиль при наведенні */
.pagination a:hover {
    background-color: #4682b4; /* Темно-блакитний фон */
    transform: scale(1.1); /* Легке збільшення */
}

/* Адаптивність для мобільних пристроїв */
@media (max-width: 768px) {
    .pagination a,
    .pagination span {
        padding: 8px 12px;
        font-size: 14px;
        margin: 3px;
    }
}
/* Стилізація кнопок із класом button art-button */
.button.art-button {
    background-color: #007bff; /* Синій фон */
    color: white; /* Білий текст */
    border: none; /* Без рамки */
    padding: 15px 30px; /* Збільшені відступи */
    font-size: 18px; /* Розмір тексту */
    border-radius: 5px; /* Закруглені краї */
    text-align: center; /* Центрування тексту */
    text-decoration: none; /* Прибираємо підкреслення */
    cursor: pointer; /* Вказівник руки при наведенні */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Ефекти при наведенні */
}

.button.art-button:hover {
    background-color: #0056b3; /* Темніший синій при наведенні */
    transform: scale(1.05); /* Легке збільшення */
}
a[href="/ua/catalog-ua/checkout/step2"] {
    display: inline-block;
    background-color: #007bff; /* Синій фон */
    color: white; /* Білий текст */
    padding: 10px 20px; /* Відступи */
    text-decoration: none; /* Прибираємо підкреслення */
    border-radius: 5px; /* Закруглені краї */
    font-size: 16px; /* Розмір тексту */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Анімація */
}

a[href="/ua/catalog-ua/checkout/step2"]:hover {
    background-color: #0056b3; /* Темніший синій */
    transform: scale(1.05); /* Легке збільшення */
}
a[href="/ua/catalog-ua/checkout/step2"],
a[href="/ru/catalog-ua/checkout/step2"] {
    display: inline-block;
    background-color: #007bff; /* Синій фон */
    color: white; /* Білий текст */
    padding: 10px 20px; /* Відступи */
    text-decoration: none; /* Прибираємо підкреслення */
    border-radius: 5px; /* Закруглені краї */
    font-size: 16px; /* Розмір тексту */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Анімація */
}

a[href="/ua/catalog-ua/checkout/step2"]:hover,
a[href="/ru/catalog-ua/checkout/step2"]:hover {
    background-color: #0056b3; /* Темніший синій */
    transform: scale(1.05); /* Легке збільшення */
}
.button_buy {
    display: inline-block;
    background-color: #007bff;
    color: white;
    text-align: center;
    text-decoration: none;
    padding: 10px 20px;
    border: 1px solid #0056b3;
    border-radius: 5px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}
.button_buy:hover {
    background-color: #0056b3;
    color: #f1f1f1;
    text-decoration: none;
}
/* Приховуємо поле пошуку */
.art-textblock {
    display: none !important; /* Приховує поле пошуку */
}

/* Посуваємо меню ліворуч */
nav.art-nav {
    margin-left: 20px; /* Змінюйте значення для бажаного відступу */
}

/* Робимо меню адаптивним */
nav.art-nav {
    max-width: 90%; /* Обмеження ширини меню */
    overflow-x: auto; /* Дозволяє прокрутку, якщо меню виходить за межі */
}

nav.art-nav ul {
    display: flex; /* Гнучке розташування елементів */
    flex-wrap: wrap; /* Перенос кнопок на новий ряд за потреби */
}
/* Стилі для кнопок з класом order-button */
button.order-button, a.order-button {
    display: inline-block !important;
    background: linear-gradient(180deg, #4A90E2, #007BFF) !important; /* Градієнт для об'єму */
    color: #fff !important; /* Білий текст */
    text-align: center !important;
    text-decoration: none !important;
    padding: 15px 30px !important; /* Збільшені відступи */
    font-size: 18px !important; /* Розмір тексту */
    border: none !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2) !important; /* Об'ємна тінь */
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
    margin: 10px !important;
}

button.order-button:hover, a.order-button:hover {
    background: linear-gradient(180deg, #007BFF, #4A90E2) !important;
    transform: translateY(-3px) !important; /* Підняття при наведенні */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3) !important;
}

button.order-button:active, a.order-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
}