headphoneCSS.css

* {
    margin: 0; /* Встановлює відступи до нуля для всіх елементів */
    padding: 0; /* Встановлює внутрішні поля до нуля для всіх елементів */
    box-sizing: border-box; /* Враховує внутрішні відступи та межі в ширині та висоті елементів */
}

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

/* Стилі для контейнера списку навушників */
.headphone-list {
    width: 800px; /* Ширина контейнера */
    margin-top: 30px; /* Відступ зверху */
}

/* Стилі для картки навушників */
.headphone-card {
    position: relative; /* Відносне позиціонування для подальшого розміщення елементів */
    display: flex; /* Використовує гнучкий контейнер */
    align-items: center; /* Вирівнює елементи по центру вертикально */
    border: 1px solid #ddd; /* Межа картки */
    border-radius: 8px; /* Закруглені кути */
    padding: 15px; /* Внутрішній відступ */
    margin-bottom: 20px; /* Відступ знизу */
    background-color: #fff; /* Білий фон */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Тінь для ефекту об'ємності */
    transition: transform 0.3s, background-color 0.3s; /* Плавний перехід при наведенні */
    overflow: hidden; /* Приховує вміст, що виходить за межі */
}

/* Ефект при наведенні на картку */
.headphone-card:hover {
    transform: translateY(-5px); /* Піднімає картку на 5px */
    background-color: rgba(0, 0, 0, 0.05); /* Легкий сірий фон */
}

/* Стилі для зображення навушників */
.headphone-image {
    width: 120px; /* Фіксована ширина */
    height: auto; /* Автоматична висота для збереження пропорцій */
    margin-right: 20px; /* Відступ праворуч */
}

/* Стилі для інформаційного блоку картки */
.headphone-info {
    width: calc(100% - 140px); /* Зменшена ширина для обліку зображення */
}

/* Стилі для назви навушників */
.headphone-title {
    font-size: 18px; /* Розмір шрифту */
    color: #333; /* Темно-сірий колір */
    margin-bottom: 5px; /* Відступ знизу */
}

/* Стилі для позначки сховища */
.storage {
    font-size: 14px; /* Розмір шрифту */
    color: #666; /* Сірий колір */
    margin-bottom: 10px; /* Відступ знизу */
}

/* Стилі для тегів */
.tags {
    display: flex; /* Використання гнучкої компоновки */
    flex-wrap: wrap; /* Перенос тегів на новий рядок */
    gap: 8px; /* Проміжок між тегами */
    margin-bottom: 10px; /* Відступ знизу */
}

/* Стилі для окремого тега */
.tags span {
    padding: 5px 10px; /* Внутрішні відступи */
    font-size: 12px; /* Розмір шрифту */
    background-color: #f0f0f0; /* Сірий фон */
    border-radius: 4px; /* Закруглені кути */
    color: #555; /* Колір тексту */
}

/* Стилі для характеристик */
.details p {
    font-size: 14px; /* Розмір шрифту */
    color: #444; /* Сірий колір */
    margin-bottom: 5px; /* Відступ знизу */
}

/* Стилі для кнопки "Переглянути товар" */
.view-button {
    position: absolute; /* Абсолютне позиціонування */
    top: 50%; /* Розташування по центру вертикально */
    left: 50%; /* Розташування по центру горизонтально */
    transform: translate(-50%, -50%); /* Центрування за допомогою трансформації */
    padding: 10px 20px; /* Внутрішні відступи */
    font-size: 14px; /* Розмір шрифту */
    color: #fff; /* Білий колір тексту */
    background-color: #007bff; /* Синій фон */
    border: none; /* Відсутність меж */
    border-radius: 4px; /* Закруглені кути */
    opacity: 0; /* Початкова непрозорість */
    transition: opacity 0.3s; /* Плавний перехід прозорості */
    cursor: pointer; /* Вказівник курсору */
}

/* Показ кнопки при наведенні на картку */
.headphone-card:hover .view-button {
    opacity: 1; /* Робить кнопку видимою */
}

/* Стилі для модального вікна */
.modal {
    display: none; /* Спочатку приховане */
    position: fixed; /* Фіксоване розташування */
    top: 0; /* Початок від верхнього краю */
    left: 0; /* Початок від лівого краю */
    width: 100vw; /* Ширина всього вікна */
    height: 100vh; /* Висота всього вікна */
    background-color: rgba(0, 0, 0, 0.5); /* Напівпрозорий чорний фон */
    align-items: center; /* Вирівнювання по центру вертикально */
    justify-content: center; /* Вирівнювання по центру горизонтально */
}

/* Стилі для вмісту модального вікна */
.modal-content {
    background-color: #fff; /* Білий фон */
    padding: 20px; /* Внутрішні відступи */
    border-radius: 8px; /* Закруглені кути */
    text-align: center; /* Центрування тексту */
    width: 400px; /* Фіксована ширина */
    position: relative; /* Відносне позиціонування */
}

/* Стилі для зображення в модальному вікні */
.modal-image {
    width: 50%; /* Ширина половина контейнера */
    border-radius: 8px; /* Закруглені кути */
    margin: 20px auto; /* Відступи зверху та знизу, центрування */
}

/* Стилі для кнопки закриття */
.close-button {
    position: absolute; /* Абсолютне позиціонування */
    top: 10px; /* Відступ зверху */
    right: 10px; /* Відступ праворуч */
    font-size: 24px; /* Розмір шрифту */
    cursor: pointer; /* Вказівник курсору */
    color: #333; /* Темно-сірий колір */
}

/* Стилі для ціни товару та кнопки додавання до кошика */
#modal-price, .buy-button {
    margin-top: 15px; /* Відступ зверху */
}

/* Стилі для кнопки додавання до кошика */
.buy-button {
    padding: 10px 20px; /* Внутрішні відступи */
    font-size: 16px; /* Розмір шрифту */
    color: #fff; /* Білий колір тексту */
    background-color: #28a745; /* Зелений фон */
    border: none; /* Відсутність меж */
    border-radius: 4px; /* Закруглені кути */
    cursor: pointer; /* Вказівник курсору */
}

/* Стилі для заголовка сторінки */
.page-title {
    font-size: 24px; /* Розмір шрифту */
    color: #000000; /* Чорний колір */
    margin-bottom: 20px; /* Відступ знизу */
}

/* Стилі для мітки */
label {
    font-size: 16px; /* Розмір шрифту */
    color: #333; /* Темно-сірий колір */
    margin-right: 10px; /* Відступ праворуч */
}

/* Стилі для селектора сортування */
#sort-options {
    padding: 8px; /* Внутрішні відступи */
    font-size: 16px; /* Розмір шрифту */
    border: 1px solid #007bff; /* Синя межа */
    border-radius: 4px; /* Закруглені кути */
    cursor: pointer; /* Вказівник курсору */
}

/* Стилі для панелі фільтрів */
.filter-panel {
    position: fixed; /* Фіксоване розташування */
    top: 20px; /* Відступ зверху */
    right: 20px; /* Відступ праворуч */
    background-color: #fafafa; /* Світло-сірий фон */
    padding: 15px; /* Внутрішні відступи */
    border-radius: 8px; /* Закруглені кути */
    width: 220px; /* Ширина контейнера */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); /* Тінь */
    font-family: Arial, sans-serif; /* Шрифт */
}

/* Стилі для заголовка панелі фільтрів */
.filter-panel h3 {
    background-color: #333333; /* Темно-сірий фон */
    color: white; /* Білий текст */
    padding: 10px; /* Внутрішні відступи */
    font-size: 1.1em; /* Розмір шрифту */
    font-weight: bold; /* Жирний текст */
    border-radius: 8px 8px 0 0; /* Закруглені верхні кути */
    text-align: center; /* Центрування тексту */
    margin-top: 0; /* Відсутність відступу зверху */
    margin-bottom: 15px; /* Відступ знизу */
}

/* Стилі для заголовка групи фільтрів */
.filter-group h4 {
    color: #444; /* Сірий текст */
    font-size: 1em; /* Розмір шрифту */
    font-weight: 600; /* Напівжирний текст */
    margin-bottom: 10px; /* Відступ знизу */
}

/* Стилі для міток фільтрів */
label {
    display: flex; /* Гнучкий контейнер */
    align-items: center; /* Вирівнювання по центру вертикально */
    font-size: 0.95em; /* Розмір шрифту */
    margin-bottom: 10px; /* Відступ знизу */
    color: #333; /* Темно-сірий текст */
}

/* Стилі для прапорця */
input[type="checkbox"] {
    margin-right: 8px; /* Відступ праворуч */
    transform: scale(1.1); /* Збільшення розміру */
    accent-color: #333333; /* Колір прапорця */
}