laptopCSS.css

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

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

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

/* Картка ноутбука */  
.laptop-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; /* Сховати вміст, що виходить за межі */  
}  

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

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

.laptop-info {  
    width: calc(100% - 140px); /* Ширина інформаційного блоку без урахування зображення та відступу */  
}  

.laptop-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; /* Вказівник змінюється на руку при наведенні */  
}  

.laptop-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; /* Колір виділення чекбокса */  
}