tabletCSS.css

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

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

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

/* Картка планшета */  
.tablet-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; /* Ховає вміст, що виходить за межі */  
}  

.tablet-card:hover {  
    transform: translateY(-5px); /* Піднімає картку при наведенні */  
    background-color: rgba(0, 0, 0, 0.05); /* Трохи змінює колір фону при наведенні */  
}  

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

.tablet-info {  
    width: calc(100% - 140px); /* Задає ширину блоку інформації */  
}  

.tablet-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; /* Зміна курсора на руку при наведенні */  
}  

.tablet-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; /* Колір прапорця */  
}