/* Основной контейнер каталога */ 
.product-list { 
    display: flex; 
    flex-direction: column; 
    align-items: center; /* Центрирование по горизонтали */ 
    max-width: 1200px; /* Максимальная ширина контейнера для каталога */ 
    margin: 0 auto; /* Центрирование каталога по горизонтали */ 
    padding: 20px; /* Добавление отступов для красоты */ 
  } 
   
  /* Заголовок "Каталог" */ 
  .catalog-title { 
    text-align: center; /* Центрирование заголовка по горизонтали */ 
    font-size: 2rem; /* Увеличение размера шрифта */ 
    margin-bottom: 20px; /* Отступ снизу */ 
  } 
   
  /* Контейнер для карточек товаров */ 
  .product-cards { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); /* 4 карточки в одной строке */ 
    gap: 20px; /* Пространство между карточками */ 
    justify-content: center; /* Центрирование по горизонтали */ 
  } 
   
  /* Карточка товара */ 

   
  /* Изображение товара */ 
  .product-card img { 
    max-width: 100%; 
    height: auto; 
  } 
   
  /* Заголовок товара */ 
  .product-card h2 { 
    font-size: 1.25rem; 
    margin: 10px 0; 
  } 
   
  /* Описание товара */ 
  .product-card p { 
    font-size: 1rem; 
  } 
   

  /* Кнопки сортировки */ 
  .sort-buttons { 
    display: flex; 
    justify-content: center; 
    margin-bottom: 20px; 
  } 
   
  .sort-buttons button { 
    background-color: rgb(72, 72, 72); 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    cursor: pointer; 
    font-size: 1rem; 
    margin: 0 10px; 
    transition: background-color 0.3s ease; /* Плавное изменение цвета при наведении */ 
  } 
   
  .sort-buttons button:hover { 
    background-color: rgb(0, 0, 0); 
  }

  /* Стили для контейнера с текстом "Сортировать по:" */
.sort-label {
  text-align: left; /* Выравниваем текст по левому краю */
  margin-right: 10px; /* Расстояние между текстом и выпадающим списком */
}

/* Ваш стиль для выпадающего списка */
#sort-select {
  background-color: rgb(72, 72, 72); /* Цвет фона */
  color: white; /* Цвет текста */
  border: none; /* Убираем границу */
  padding: 8px 12px; /* Отступы внутри списка */
  border-radius: 4px; /* Скругленные углы */
  cursor: pointer; /* Изменяем курсор при наведении */
}

/* Стили для опций в выпадающем списке */
#sort-select option {
  background-color: rgb(72, 72, 72); /* Цвет фона опции */
  color: white; /* Цвет текста опции */
}

/* Стили для активного (выбранного) элемента списка */
#sort-select option:checked {
  background-color: white; /* Инвертируем цвет фона */
  color: rgb(72, 72, 72); /* Инвертируем цвет текста */
}


/* Ваш стиль для выпадающего списка категории */
#category-select {
  background-color: rgb(72, 72, 72); /* Цвет фона */
  color: white; /* Цвет текста */
  border: none; /* Убираем границу */
  padding: 8px 12px; /* Отступы внутри списка */
  border-radius: 4px; /* Скругленные углы */
  cursor: pointer; /* Изменяем курсор при наведении */
  text-align: left; /* Выравнивание по левому краю */
}

/* Стили для опций в выпадающем списке категории */
#category-select option {
  background-color: rgb(72, 72, 72); /* Цвет фона опции */
  color: white; /* Цвет текста опции */
}

/* Стили для активного (выбранного) элемента списка категории */
#category-select option:checked {
  background-color: white; /* Инвертируем цвет фона */
  color: rgb(72, 72, 72); /* Инвертируем цвет текста */
}
.product-container {
  margin: 10px; /* Добавляет отступ вокруг карточки товара */
  padding: 10px; /* Добавляет внутренний отступ в карточке товара (по желанию) */

}

.product-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh; /* Минимальная высота для отображения на большинстве экранов */
}

.product-details {
  display: flex;
  align-items: center;
}

.product-image {
  max-width: 50%; /* Ширина изображения товара, можно настроить по вашему усмотрению */
  margin-right: 20px; /* Отступ между изображением и информацией о товаре */
}

.product-info {
  flex-grow: 1; /* Информация о товаре займет оставшееся пространство */
}

.product-title {
  font-size: 24px; /* Размер заголовка товара */
}

.add-to-cart-button {
  background-color: rgb(72, 72, 72);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-size: 16px;
  transition: background-color 0.3s; /* Плавное изменение цвета */
}

.add-to-cart-button:hover {
  background-color: rgb(0, 0, 0); /* Новый цвет при наведении */
}

.product-card {
  width: 250px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  transition: transform 0.2s;
  margin: -5px;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-card img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 10px;
}

.product-card h2 {
  font-size: 1.5rem;
  margin: 10px 0;
}

.product-card p {
  margin: 8px 0;
  color: #555;
}

.add-to-cart-button {
  background-color: rgb(72, 72, 72);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  margin-top: auto;
}

.add-to-cart-button:hover {
  background-color: rgb(0, 0, 0);
}

.product-card button {
  background-color: rgb(72, 72, 72);
  color: white;
  border: none;
  padding: 10px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  
}

.product-card button:hover {
  background-color: rgb(0, 0, 0);
}