/********** Custom CSS ************/
.h1, h2, h3 {
  font-weight: 700 !important;
}

.h4, h5, h6 {
  font-weight: 500 !important;
}

.mb-30 {
  margin-bottom: 30px;
}

.pb-30 {
  padding-bottom: 30px;
}

.p-30 {
  padding: 30px;
}

.btn.btn-primary {
  color: #F5F5F5 !important;
  border-radius: 8px;
}

.btn-square {
  width: 40px;
  height: 40px;
}

.btn-sm-square {
  width: 30px;
  height: 30px;
}

.btn-lg-square {
  width: 50px;
  height: 50px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
  outline: none;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
  color: #0078be;
}

@media (max-width: 991.98px) {
  .navbar-dark .navbar-nav .nav-link {
    padding: 5px 0px;
  }
}

.navbar-vertical.navbar-light .navbar-nav .nav-link {
  padding: 8px 30px;
  border-bottom: 1px solid #F5F5F5;
}

.navbar-light .dropdown-toggle::after,
.navbar-dark .dropdown-toggle::after {
  display: none;
}

#header-carousel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.carousel-indicators li {
  width: 10px;
  height: 10px;
  margin: 0 3px 12px 3px;
  background: transparent;
  border: 2px solid #00467f;
  transition: .5s;
  border-radius: 8px;
}

.carousel-indicators .active {
  width: 30px;
  background: #005f9c;
}

.carousel-caption {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(61, 70, 77, 0.5);
  z-index: 1;
  border-radius: 8px;
}

.section-title::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 50%;
  left: 0;
  border-top: 1px dashed #bec5cb;
  z-index: -1;
}

.product-offer {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.product-offer img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}



.product-offer .offer-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(61, 70, 77, 0.5);
  z-index: 1;
}

/* Основной стиль блока категории */
.cat-item {
  background: #FFFFFF;
  border: 1px solid #eee; /* Опциональная граница из ваших стилей */
  border-radius: 8px; /* Скругленные углы из ваших стилей */
  display: flex; /* Используем flex вместо block для горизонтального выравнивания */
  align-items: center; /* Вертикальное центрирование содержимого */
  overflow: hidden; /* Предотвращаем выход контента за границы */
  transition: all 0.3s ease; /* Плавный переход для всех изменений (короче, чем 0.5s) */
}

/* Эффект при наведении */
.cat-item:hover {
  border: 1px solid #eee; /* Сохраняем границу из ваших стилей */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Тень при наведении из ваших стилей */
  transition: all 0.3s ease; /* Синхронизируем с основным transition */
}

/* Стили для изображения */
.cat-item .overflow-hidden {
  flex: 0 0 25%; /* Фиксированная ширина из вашего HTML */
  aspect-ratio: 1 / 1; /* Пропорции 1:1 из вашего HTML */
  max-height: 100%; /* Ограничиваем высоту изображения */
  overflow: hidden; /* Убеждаемся, что изображение не выходит за границы */
}

.cat-item img {
  transition: transform 0.5s ease; /* Плавное масштабирование из ваших стилей */
  object-fit: contain; /* Масштабирование с сохранением пропорций из ваших стилей */
  height: 60px; /* Изображение занимает всю высоту контейнера */
  width: 60px; /* Убеждаемся, что ширина тоже заполнена */
  padding: 5px;
}

/* Эффект масштабирования при наведении */
.cat-item:hover img {
  transform: scale(1.1); /* Увеличение изображения при наведении из ваших стилей */
}

/* Контейнер текста */
.cat-item .flex-grow-1 {
  padding: 0 15px; /* Унифицированные отступы */
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%; /* Растягиваем на всю высоту .cat-item */
  overflow: hidden; /* Скрываем переполнение текста */
}

/* Название категории */
.cat-item h6 {
  margin: 0;
  font-size: 14px; /* Размер шрифта, можно настроить */
  line-height: 1.2; /* Высота строки для контроля текста */
  max-height: 2.4em; /* Ограничение на 2 строки (1.2 * 2) */
  overflow: hidden;
  text-overflow: ellipsis; /* Многоточие для длинного текста */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Ограничение на 2 строки */
  -webkit-box-orient: vertical;
  white-space: normal; /* Перенос слов */
}

/* Маленький текст (количество продуктов) */
.cat-item small {
  font-size: 12px;
  color: #666;
  white-space: nowrap; /* Без переноса строки */
  overflow: hidden;
  text-overflow: ellipsis; /* Многоточие для длинного текста */
}

.product-item {
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

/* Применяем анимацию только внутри .catalog-products */
.catalog-products .product-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.catalog-products .product-item.visible {
  opacity: 1;
  transform: translateY(0);
}


.product-action {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .5s;
}

.product-action a.btn {
  position: relative;
  margin: 0 3px;
  margin-top: 100px;
  opacity: 0;
}

.products-container.list-view.product-item:hover {
  box-shadow: 0 0 20px #888888;
}


.product-item:hover .product-action {
  background: rgba(255, 255, 255, 0.7);
}

.product-item:hover .product-action a.btn:first-child {
  opacity: 1;
  margin-top: 0;
  transition: .3s 0s;
}

.product-item:hover .product-action a.btn:nth-child(2) {
  opacity: 1;
  margin-top: 0;
  transition: .3s .05s;
}

.product-item:hover .product-action a.btn:nth-child(3) {
  opacity: 1;
  margin-top: 0;
  transition: .3s .1s;
}

.product-item:hover .product-action a.btn:nth-child(4) {
  opacity: 1;
  margin-top: 0;
  transition: .3s .15s;
}

.product-item .product-img a > img {
  transition: .5s;
  width: 200px;
  height: 200px;
  object-fit: contain;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  display: block;
  padding: 5px;
}


.table.table-borderless thead tr,
.table.table-borderless tbody tr:not(:last-child) {
  border-bottom: 15px solid #F5F5F5;
}

.contact-form .help-block ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.back-to-top {
  position: fixed;
  display: none;
  right: 30px;
  bottom: 30px;
  z-index: 11;
  animation: action 1s infinite alternate;
}

@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-15px);
  }
}

/* Задаём квадратный контейнер */
.vendor-item {
  /* Ширину можно менять под нужный размер баннера */
  width: 180px;               /* например 150px */
  aspect-ratio: 1 / 1;        /* относительная высота = ширине */
  display: flex;              /* включаем flex-контейнер */
  align-items: center;        /* вертикальное центрирование */
  justify-content: center;    /* горизонтальное центрирование */
  background: #f8f9fa;        /* оставляем или настраиваем фон */
  box-sizing: border-box;     /* чтобы padding не влиял на размер */
}

/* Логотип внутри контейнера */
.vendor-item img {
  max-width: 80%;     /* не более 80% от ширины контейнера */
  max-height: 80%;    /* не более 80% от высоты контейнера */
  object-fit: contain;/* сохраняем пропорции картинки */
  display: block;     
  filter: grayscale(100%);
  transition: filter 0.3s ease-in-out;
}

.vendor-item:hover img {
  filter: grayscale(0%);
}


@media (max-width: 1550px) { 
  .navbar-nav .nav-item span {
      display: none; /* Скрываем текст */
  }
}

a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover,
.custom-bg {
  background-color: #0078be !important; /* Новый цвет */
}


 /*НАЧАЛО*/



/* Стили для контента категории (название и подкатегории) */
.cat-content {
  padding: 15px; /* Увеличиваем отступы для лучшего вида */
  background: #fff; /* Фон для контраста с изображением */
}

.cat-item .main-category {
  text-decoration: none; /* Убираем подчёркивание */
  color: #000; /* Изначальный цвет текста для главной категории (чёрный, как в вашем дизайне) */
  transition: color 0.3s ease; /* Плавное изменение цвета при наведении */
}

.cat-item .main-category:hover {
  font-weight: bolder;
  color: #005f9c; /* Новый цвет при наведении, совпадает с подкатегориями */
}

.cat-item .category-link {
  text-decoration: none; /* Убираем подчёркивание */
  color: #666; /* Изначальный цвет текста для главной категории (чёрный, как в вашем дизайне) */
  transition: color 0.3s ease; /* Плавное изменение цвета при наведении */
}

.cat-item .category-link:hover {
  font-weight: bolder;
  color: #005f9c; /* Новый цвет при наведении, совпадает с подкатегориями */
}


/* Стили для списка подкатегорий */
.subcategories {
  margin-top: 10px;

  
}

.subcategory-item {
  line-height: 25px; /* Улучшаем читаемость */
}

.subcategory-item a {
  text-decoration: none; /* Убираем подчёркивание у ссылок */
  color: #666; /* Цвет текста подкатегорий */
  transition: color 0.3s ease; /* Плавное изменение цвета при наведении */
}

.subcategory-item a:hover {
  font-weight: bolder;
  color: #005f9c !important; /* Цвет при наведении, чтобы сохранить единый стиль */
}





/* Стили для изображения категории */
.cat-image {
  width: 100%;
}

.cat-image img {
  object-fit: cover;
  height: 150px;
}

/* Стили для контента категории (название и подкатегории) */
.cat-content {
  padding: 15px;
  background: #fff;
}

/* Стили для списка подкатегорий */
.subcategories {
  margin-top: 10px;
  position: relative; /* Для управления позицией дочерних элементов */
}

/* Стили для элементов подкатегорий */
.subcategory-item {
  line-height: 1.4; /* Улучшаем читаемость */
}

/* Стили для ссылок подкатегорий */
.subcategory-item a {
  text-decoration: none; /* Убираем подчёркивание у ссылок */
  color: #666; /* Цвет текста подкатегорий */
  transition: color 0.3s ease; /* Плавное изменение цвета при наведении */
}

.subcategory-item a:hover {
  color: #005f9c; /* Цвет при наведении, совпадает с главной категорией */
}

/* Стили для сообщения "Подкатегории отсутствуют" */
.subcategory-item:not(:has(a)) {
  color: #666; /* Цвет текста для сообщения */
}

/* Стили для кнопки "Все категории" */
.more-categories {
  margin-top: 5px;
}

.more-link {
  text-decoration: none !important;
  color: #666;
  font-size: 0.9em;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease;
  font-weight: bold;
}

.more-link:hover {
  color: #005f9c !important; /* Цвет при наведении, совпадает с категориями */
}

.more-link .fa-angle-down,
.more-link .fa-angle-up  {
  margin-left: 5px;
  font-size: 0.8em;
  transition: transform 0.3s ease; /* Плавное вращение стрелки */
}

.more-categories.expanded .more-link .fa-angle-down {
  transform: rotate(180deg); /* Стрелка вверх при раскрытии */
}

/* Стили для скрытых подкатегорий */
.additional-subcategories {
  margin-top: 5px;
}

/* Контейнер заголовка */
.section-title {
  position: relative;
  display: block; /* Полная ширина для линии */
}

/* Текст заголовка с количеством товаров */
.section-title span {
  position: relative; /* Делаем <span> контейнером для <small> */
  display: inline-block; /* Ограничиваем ширину текста */
}

/* Количество товаров */
.category-product-count {
  position: absolute;
  top: -0.6rem; /* Над текстом внутри <span> */
  right: 1rem; /* Справа от текста категории */
  font-size: 0.875rem;
  color: #0078be; /* Цвет текста */
}


/* Выделение цены */
.product-item .text-primary {
  color: #0078be !important; /* Синий цвет, переопределяем Bootstrap */
  font-weight: bold;
  font-size: 1.25rem; /* Чуть больше, чем раньше */
}

/* Фиксированная минимальная высота для названия товара */
.product-name {
  display: block; /* Делаем блочным для контроля высоты */
  min-height: 3.6rem; /* Минимальная высота под 3-4 строки текста */
  line-height: 1.2; /* Высота строки для естественного переноса */
  margin-bottom: 0.5rem; /* Отступ снизу до следующего элемента */
  max-width: 70%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Активная кнопка */
.btn.btn-sm.btn-light.active {
  border-color: #0078be;
  color: #0078be;
  font-weight: bold;
}

/* Список */
.product-item.d-flex.align-items-center {
  flex-direction: row;
}


.product-item.d-flex .text-center {
  text-align: center;
}

/* Подсказка */
[data-tooltip] {
  position: relative; /* Относительное позиционирование для родителя */
}

/* Облачко при наведении */
[data-tooltip]:hover::after {
  content: attr(data-tooltip); /* Текст из атрибута data-tooltip */
  position: absolute;
  bottom: calc(100% + 10px); /* Выше кнопки с отступом 10px */
  left: 50%;
  transform: translateX(-50%);
  background-color: #0078be; /* Голубой фон */
  color: #fff; /* Белый текст */
  font-weight: bold; /* Жирный текст */
  font-size: 14px; /* Размер текста независим от кнопки */
  padding: 8px 12px; /* Внутренние отступы */
  border-radius: 5px; /* Скруглённые углы */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Лёгкая тень */
  white-space: nowrap; /* Текст в одну строку */
  z-index: 10; /* Поверх других элементов */
}

/* Треугольник внизу (стиль комиксов) */
[data-tooltip]:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px); /* Чуть ниже облачка */
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #0078be; /* Треугольник того же цвета, что фон */
  z-index: 10;
}


.featured {
  padding: 15px;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  overflow: hidden;
}

.flex-fill.pl-3 {
  overflow: hidden; /* Скрываем переполнение */
  text-overflow: ellipsis; /* Добавляем многоточие */
  white-space: nowrap; /* Текст в одну строку */
  max-width: 100%; /* Ограничиваем ширину блока */
  word-wrap: break-word; /* Перенос длинных слов */
}



/*КАТЕГОРИИ В КАТАЛОГЕ НАЧАЛО*/

.cat-item-big {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .16);
  height: 260px; /* Фиксированная высота как у DNS */
  padding: 0; /* Убираем padding для точного соответствия */
  position: relative;
  overflow: hidden;
}

/* Контент до наведения */
.cat-default-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column; /* Изображение сверху, текст снизу */
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* Десктопное поведение (наведение) */
@media (min-width: 992px) {
  .cat-item-big:hover {
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .05), 0 29px 26px 0 rgba(0, 0, 0, .08);
  }

  .cat-item-big:hover .cat-default-content {
    opacity: 0;
  }

  .cat-item-big:hover .cat-hover-content {
    opacity: 1;
  }
}

/* Мобильное поведение (тап) */
@media (max-width: 991.98px) {
  /* Отключаем наведение на мобильных */
  .cat-item-big:hover .cat-default-content {
    opacity: 1; /* Предотвращаем скрытие по умолчанию */
  }

  .cat-item-big:hover .cat-hover-content {
    opacity: 0; /* Предотвращаем показ при наведении */
  }

  /* Стили для активного состояния при тапе */
  .cat-item-big.active {
    box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .05), 0 29px 26px 0 rgba(0, 0, 0, .08);
  }

  .cat-item-big.active .cat-default-content {
    opacity: 0;
  }

  .cat-item-big.active .cat-hover-content {
    opacity: 1;
  }
}

.cat-image {
  flex: 1; /* Изображение занимает всё доступное пространство сверху */
  position: relative; /* Убираем absolute для нормального потока */
  width: 100%;
}

.cat-image img {
  width: 100%;
  height: 200px;
  object-fit: contain; /* Изображение масштабируется пропорционально, не обрезается */
}

.main-category {
  margin: 0;
  font-size: 14px;
  color: #333;
  padding: 10px 20px; /* Сохраняем padding для лучшего вида */
  text-align: center; /* Центрируем текст по горизонтали */
  display: flex; /* Используем flex для центрирования текста по вертикали внутри себя */
  align-items: center; /* Центрируем текст по вертикали внутри своей высоты */
  height: 50px; /* Фиксированная высота для текста (можно настроить) */
  flex-shrink: 0; /* Предотвращаем сжатие текста */
  width: 100%; /* Убедимся, что текст занимает всю ширину блока */
  justify-content: center; /* Центрируем текст по ширине внутри своей области */
}

.main-category:hover {
  color: #0078be;
}

/* Контент при наведении */
.cat-hover-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Центрируем по вертикали весь контент */
  align-items: center; /* Центрируем по горизонтали */
}

.subcategories-list {
  flex-grow: 1;
  overflow-y: auto; /* Прокрутка, если подкатегорий много */
  padding: 0 20px; /* Отступы как на скрине */
  width: 100%; /* Убедимся, что подкатегории занимают всю ширину */
}

.subcategories-content {
  padding-top: 0;
  width: 100%;
}

.subcategory-link {
  text-decoration: none;
  color: #333;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0; /* Разделяющая линия, как на скрине */
}

.subcategory-link:last-child {
  border-bottom: none; /* Убираем линию у последней ссылки */
}

.subcategory-link:hover {
  background: #f5f5f5;
  color: #0078be;
  text-decoration: none;
}

/* Эффект при наведении */
.cat-item-big:hover {
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .05), 0 29px 26px 0 rgba(0, 0, 0, .08);
}

.cat-item-big:hover .cat-default-content {
  opacity: 0;
}

.cat-item-big:hover .cat-hover-content {
  opacity: 1;
}

.product-name-list text-dark {
  width:500px;
  text-align: center;
  line-height: 1.2;
  overflow-wrap: break-word;
  max-height: 3.6em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/*КАТЕГОРИИ В КАТАЛОГЕ КОНЕЦ*/

 /*Карусель на странице товара START*/

.related-carousel .owl-stage-outer {
padding-top: 10px; 
padding-bottom: 10px; 
}

.related-carousel .product-item {
border: 1px solid #eee;
border-radius: 8px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.3s ease; /* Плавный переход для масштаба */
}

.related-carousel .product-item:hover {
  transform: scale(1.05); /* Увеличение на 5% при наведении */
  box-shadow: none; /* Оставляем без тени, как было */
}

.related-carousel .product-img {
  flex: 0 0 50%;
  overflow: hidden;
  position: relative; /* Для затемнения через псевдоэлемент */
  transition: all 0.3s ease; /* Плавный переход для изображения */
}

.related-carousel .product-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease; /* Плавное затемнение изображения */
}

.related-carousel .product-item:hover .product-img img {
  opacity: 0.8; /* Лёгкое затемнение изображения при наведении */
}

.related-carousel .text-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.related-carousel .product-name {
  max-height: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 0.5rem;
  font-size: 14px;
  line-height: 1.4;
}

.related-carousel a {
  text-decoration: none;
  color: inherit;
}

.related-carousel a:hover {
  text-decoration: none;
}

/*Карусель на странице товара END*/

/* Общий контейнер для изображений */
.product-images {
  display: flex;
  height: 450px; /* Жесткая высота */
}

/* Стили для миниатюр */
.thumbnails {
  display: flex;
  flex-direction: row;      /* ← теперь горизонтально! */
  justify-content: center;  /* центрируем */
  flex-wrap: wrap;          /* на всякий случай, если не влезут */
  gap: 10px;
  margin-top: 10px;
}

.thumbnails:has(.thumbnail-item:nth-child(5):last-child) {
  justify-content: space-between;
}

.thumbnail-item {
  width: 80px;
  height: 80px;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background-color: white;
  display: flex;
  align-items: center;      /* выравнивание по вертикали */
  justify-content: center;  /* выравнивание по горизонтали */
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbnail-item.active {
  border: 2px solid #0078be;
  box-shadow: 0 0 5px #0078be;
}

/* Стили для основного изображения */
.main-image {
  flex: 1;
  overflow: hidden;
  background: #fff;
  height: 100%;
  padding: 25px;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-images:not(:has(.thumbnails)) .main-image {
  width: 100%;
  height: 100%;
}

.product-images:not(:has(.thumbnails)) .main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Стили для правого блока */
.product-details {
  background: #f8f9fa;
  padding: 30px;
  height: 450px; /* Жесткая высота */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Распределяем содержимое */
}

/* Заголовок товара */
.product-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
}

/* Код товара */
.product-code {
  font-size: 14px;
}

/* Описание */
.product-description {
  font-size: 14px;
}

.product-description p {
  margin: 5px 0 0;
  color: #555;
}

/* Наличие */
.product-availability {
  font-size: 14px;
  margin: 0;
}

.product-availability.in-stock {
  color: #28a745; /* Зеленый для "В наличии" */
}

.product-availability.out-of-stock {
  color: #dc3545; /* Красный для "Нет в наличии" */
}

/* Действия (количество и кнопка) */
.product-actions {
  display: flex;
  align-items: center;
  max-width: 140px;
}

/* Цена */
.product-price {
  font-size: 24px;
  color: #0078be;
}

/* Разделительная линия */
.divider {
  border: 0;
  height: 1px;
  background: #ddd;
  margin: 1px 0;
}

.no-pr {
  padding-right: 0;
}


/* Основной стиль модального окна */
.catalog-modal {
  position: absolute;
  top: 65px;
  left: 15px;
  right: 15px;
  width: auto;
  background: #fff;
  z-index: 1000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.5);
  border-top: 1px solid #eee;
  height: calc(100vh - 65px);
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  visibility: hidden;
  border-radius: 8px;
}

.catalog-modal.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}

/* Контейнер внутри модального окна */
.catalog-modal .row.px-xl-5 {
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-left: 40px !important; /* Синхронизация с навигацией */
  padding-right: 40px !important;
  padding-bottom: 130px;
}

/* Колонка внутри модального окна */
.catalog-modal .col-12.custom-col {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  padding-right: 0;
}

/* Контент каталога */
.catalog-modal .catalog-content {
  height: 100%;
  display: flex;
  max-height: 100%;
  background: #fff;
  overflow: hidden;
  flex-direction: row;
  padding-bottom: 2rem;
  padding-left: 0;
  padding-top: 0;
}

/* Левая часть каталога */
.catalog-modal .catalog-left {
  padding: 10px 0;
  overflow-y: auto;
  border-right: 1px solid #eee;
  /* background: #f8f9fa; */
  height: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

/* Правая часть каталога */
.catalog-modal .catalog-right {
  padding: 10px;
  overflow-y: auto;
  background: #fff;
  height: 100%;
  box-sizing: border-box;
  flex: 0 0 75%;
  max-height: 100%;
}

/* Элемент категории в левой части */
.catalog-modal .catalog-left .catalog-item {
  display: flex; /* Для размещения иконки и текста в ряд */
  align-items: center; /* Вертикальное выравнивание иконки и текста */
  padding: 10px;
  text-decoration: none;
  font-size: 14px; /* Уменьшенный шрифт */
  color: #333; /* Базовый цвет текста */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Стили при наведении и для активной категории */
.catalog-modal .catalog-left .catalog-item:hover,
.catalog-modal .catalog-left .catalog-item.active {
  background: #e9ecef;
  font-weight: bolder;
  color: #00467f;
  cursor: pointer;
}

/* Иконка категории */
.category-icon {
  width: 55px;
  height: 55px;
  margin-right: 10px;
  object-fit: contain;
  aspect-ratio: 1 / 1;

}

/* Контейнер подкатегорий */
.catalog-modal .catalog-right #subcategories-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0;
  box-sizing: border-box;
  display: block;
}

/* Группы категорий */
.catalog-modal .catalog-right .category-group {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: none; /* Изначально скрыто */
}

/* Активная группа категорий */
.catalog-modal .catalog-right .category-group.active {
  display: block; /* Показываем активную группу */
}

/* Элемент подкатегории */
.catalog-modal .catalog-right .subcategory-item {
  position: relative;
  width: 100%;
  padding: 10px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  font-weight: bold;
}

/* Элемент под-подкатегории */
.catalog-modal .catalog-right .subsubcategory-item {
  position: relative;
  width: 100%;
  margin-left: 20px;
  padding: 5px;
  color: #666;
  box-sizing: border-box;
  font-weight: normal;
}

/* Ссылки подкатегорий */
.catalog-modal .catalog-right .category-link {
  text-decoration: none;
  color: #666;
  transition: color 0.3s ease;
}

.catalog-modal .catalog-right .category-link:hover {
  color: #005f9c;
}

/* Кнопка закрытия */
.catalog-modal .catalog-close {
  border: none;
  background: #fff;
  font-size: 24px;
  cursor: pointer;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-weight: bold;
}

.catalog-modal .catalog-close:hover {
  background: #ddd;
}

/* Кнопка "Каталог" */
.btn.bg-primary.custom-bg {
  height: 65px;
  padding: 0 30px;
  width: 100%;
  box-sizing: border-box;
}

#catalog-toggle-desktop {
  border-radius: 0;
  box-sizing: border-box;
  height: 65px;
  padding: 0 30px;
}

/* Адаптивность для больших экранов */
@media (min-width: 992px) {
  .catalog-modal {
      transform: none; /* Убираем transform */
  }

  .catalog-modal .catalog-left {
      flex: none;
  }

  .catalog-modal .catalog-right {
      flex: 1;
      width: auto;
  }
}

/* Адаптивность для мобильных устройств */
@media (max-width: 991.98px) {
  .catalog-modal {
      width: 100%;
      left: 0;
      transform: none;
  }

  .catalog-modal .catalog-left {
      width: 100%;
      border-right: none;
      border-bottom: 1px solid #eee;
  }

  .catalog-modal .catalog-right {
      width: 100%;
  }

  .catalog-modal .catalog-content {
      flex-direction: column;
  }
}


.products-container {
  padding-left: 15px;
  padding-right: 15px;
}


/*КАРУСЕЛЬ ДЛЯ КАТЕГОРИЙ НАЧАЛО */
.categories-carousel {
  position: relative;
  margin-bottom: 20px;
}

.categories-wrapper {
  overflow: hidden;
}

.categories-container {
  transition: transform 0.5s ease;
  white-space: nowrap;
}

.category-item {
  flex: 0 0 25%;
  max-width: 25%;
  padding: 0 15px;
  box-sizing: border-box;
  display: inline-block;
}

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px; /* Размер кнопки соответствует SVG */
  height: 32px;
  color: #00467f; /* Основной цвет стрелки */
  border: none;
  background: none; /* Убираем фон */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: transform 0.2s ease, color 0.2s ease; /* Эффекты для масштаба и цвета */
}

.carousel-control-prev {
  left: -30px; /* Чуть ближе к карусели без фона */
}

.carousel-control-next {
  right: -20px; /* Чуть ближе к карусели без фона */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
  transform: translateY(-50%) scale(1.4); /* Увеличение при наведении */
  color: #005f96; /* Темнее при наведении */
}

.carousel-control-prev svg,
.carousel-control-next svg {
  width: 32px;
  height: 32px;
}

/*КАРУСЕЛЬ ДЛЯ КАТЕГОРИЙ КОНЕЦ */


/*АДАПТИВНОСТЬ*/


/* Стили для мобильной кнопки Каталог */
.btn-catalog {
  background-color: #0078be; /* Синий фон, как у десктопной кнопки */
  color: #F5F5F5; /* Белый текст */
  border: none;
  padding: 6px 12px; /* Компактные отступы */
  font-size: 14px; /* Уменьшенный шрифт */
  border-radius: 5px; /* Скругление */
}

/* Уменьшаем кнопку на очень маленьких экранах */
@media (max-width: 576px) {
  .btn-catalog {
      font-size: 12px;
      padding: 4px 8px;
  }
}

/* Выравнивание кнопки с логотипом */
.navbar {
  display: flex;
  align-items: center;
}

/* Общие стили для .product-item в режиме списка */
.products-container.list-view .product-item {
  display: flex;
  align-items: center;
  height: 120px;
  padding: 0 1%; /* Процентный padding */
  background: #fff;
  border-radius: 8px;
  gap: 1%; /* Отступ между элементами */
}


/* Изображение */
.products-container.list-view .product-img {
  flex: 0 0 15%;
  max-width: 15%;
}


/* Название товара */
.products-container.list-view .product-name-list {
  font-size: clamp(12px, 1.5vw, 16px);
  line-height: 1.2;
  overflow-wrap: break-word;
  max-height: 3.6em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: left; /* Выравнивание слева для естественного вида */
}

/* Цена */
.products-container.list-view .text-primary {
  font-size: clamp(12px, 1.2vw, 25px);
  text-align: center;
}

/* Кнопка */
.products-container.list-view .btn {
  font-size: clamp(12px, 1vw, 16px);
}


.cat-item.active {
  border: 2px solid #0078be; /* Синяя рамка для активного элемента */
  border-radius: 5px;
}
.category-item {
  cursor: pointer; /* Указываем, что элемент кликабелен */
}


/* Ограничение правой части навигационной панели */
.navbar-nav.ml-auto {
  display: flex;
  align-items: center;
  max-height: 65px; /* Синхронизация с высотой панели */
  padding: 0; /* Убираем лишние внутренние отступы */
}

/* Общие стили для элементов корзины и профиля */
.navbar-nav .nav-item.cart-icon,
.navbar-nav .nav-item.profile-icon {
  padding: 8px 10px; /* Уменьшенный padding вместо 20px 10px */
  width: 60px; /* Фиксированная ширина для контроля */
  height: 65px; /* Полная высота панели */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* Учитываем padding в размерах */
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Иконки */
.navbar-nav .nav-item.cart-icon i,
.navbar-nav .nav-item.profile-icon i {
  font-size: 25px; /* Точный контроль размера вместо fa-lg */
  line-height: 1; /* Убираем лишнюю высоту строки */
}

/* Текст под иконками */
.navbar-nav .nav-item.cart-icon span,
.navbar-nav .nav-item.profile-icon span {
  font-size: 15px;
  line-height: 1.2;
  margin-top: 4px; /* Уменьшенный отступ */
}

/* Эффект наведения */
.navbar-nav .nav-item.cart-icon:hover,
.navbar-nav .nav-item.profile-icon:hover {
  color: #0078be;

}




/*КОРЗИНА НАЧАЛО*/
/* Контейнер для товаров в корзине */
.cart-item {
  min-height: 125px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  transition: box-shadow 0.3s ease;
}

.cart-item:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.cart-item-image img {
  border-radius: 4px;
}


.cart-item-info h6 {
  font-size: 14px;
  line-height: 1.2;
  max-height: 3.6em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.cart-item-controls {
  min-width: 150px;
}

.quantity-controls .btn {
  font-size: 14px;
  
}

.quantity-controls .form-control {
  height: auto;
  padding: 0;
  border-radius: 8px;
}

.cart-item-info {
  position: relative;
  min-height: 90px; /* Устанавливаем минимальную высоту для блока */
}
.remove-button {
  position: absolute;
  bottom: 0;
  left: 15px; /* Учитываем padding из .px-3 */
}
.cart-remove {
  font-size: 0.85rem; /* Меньший шрифт */
  color: #6c757d; /* Серый цвет как у иконки корзины */
  text-decoration: none;
  position: absolute;
  bottom: 10px;
  left: 15px;
}
.cart-remove:hover {
  color: #dc3545 !important; /* Красный при наведении */
  text-decoration: none;
}

.cart-item-image {
  position: relative;
}
.item-checkbox {
  margin: 0; /* Убираем стандартные отступы */
}


@keyframes fadeOutUp {
  0% {
      opacity: 1;
      transform: translateY(0);
  }
  100% {
      opacity: 0;
      transform: translateY(-10px);
  }
}

#remove-selected {
  font-size: 14px; /* Еще больше уменьшаем шрифт, если нужно */
  text-decoration: none;
}
.removing {
  animation: fadeOutUp 0.4s ease forwards;
}

/* Плавный переход для контейнера */
.cart-items {
  transition: all 0.4s ease, margin 0.4s ease; /* Плавное изменение высоты и позиций */
}

.total-price {
  font-size: 1.2rem;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.modal-header {
  display: flex;
  justify-content: center; /* Выравнивание заголовка по центру */
  align-items: center;
  position: relative; /* Для позиционирования крестика */
}

.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #333;
}

.close-modal {
  position: absolute; /* Абсолютное позиционирование крестика */
  right: 0px; /* Крестик справа */
  top: 0px;
  transform: translateY(-50%); /* Вертикальное центрирование */
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.close-modal:hover {
  color: #000;
}

.modal-body {
  color: #555;
}

.modal-footer {
  display: flex;
  justify-content: space-between;
}


.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background: #5a6268;
}

.btn-danger {
  background: #dc3545;
  color: white;
}

.btn-danger:hover {
  background: #c82333;
}

/* Базовый стиль для всех кастомных чекбоксов */
.custom-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  margin: 0; /* Убираем стандартные отступы Bootstrap */
  border-radius: 3px;
  border: 1px solid #00467f;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Уточняем стили для form-check */
.form-check {
  display: flex;
  align-items: center; /* Центрируем чекбокс и текст по вертикали */
}

/* Стили для чекбокса в form-check */
.form-check .custom-checkbox {
  position: relative;
}

/* Устанавливаем цвет границы для checked состояния */
.custom-checkbox:checked {
  border-color: #00467f;
}

/* Псевдоэлемент для кастомного фона и галочки */
.custom-checkbox::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;

}

/* Применяем фон и показываем галочку при выборе */
.custom-checkbox:checked::before {
  background-color: #00467f;
  opacity: 1;
}


/* Убираем стандартный отступ у label и добавляем небольшой отступ справа */
.form-check-label {
  margin-left: 6px; /* Увеличиваем до 6px для небольшого отступа */
}

/* Специфические стили для корзины: чекбокс "Выбрать все" */
#select-all.custom-checkbox {
  margin-top: 0; /* Убираем смещение вверх от Bootstrap */
}

/* Позиционирование чекбоксов товаров в корзине */
.cart-item-checkbox {
  position: absolute;
  top: 5px;
  left: 5px;
}

/* Контейнер товара в корзине */
.cart-item {
  min-height: 125px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  transition: box-shadow 0.3s ease;
  display: flex;
  align-items: flex-start; /* Выравниваем содержимое по верхнему краю */
  padding: 10px; /* Увеличиваем внутренний отступ для воздуха */
}

/* Изображение в корзине */
.cart-item-image {
  position: relative;
  flex-shrink: 0;
}

/* Информация о товаре в корзине */
.cart-item-info {
  flex-grow: 1;
  padding: 0 15px; /* Отступы слева и справа для текста */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Текст начинается сверху */
}

/* Кнопка удаления внизу */
.cart-item-info .remove-button {
  margin-top: auto; /* Прижимаем кнопку "Удалить" к нижнему краю */
}

/* Управление контролами (цена и количество) */
.cart-item-controls {
  min-width: 150px;
  text-align: right;
}

/* Адаптивность */
@media (max-width: 576px) {
  .custom-checkbox {
    width: 16px;
    height: 16px;
    border-radius: 4px;
  }
  .custom-checkbox::before {
    border-radius: 2px;
  }
  .form-check-label {
    margin-left: 4px; /* Уменьшаем отступ на мобильных */
  }
  .cart-item {
    flex-direction: column;
    align-items: stretch; /* Растягиваем элементы на мобильных */
  }
  .cart-item-info {
    padding: 10px 0; /* Корректируем отступы для мобильных */
  }
  .cart-item-controls {
    text-align: left;
    margin-top: 10px;
  }
}

#cart-summary {
  border-radius: 8px;

}


/*КОРЗИНА КОНЕЦ*/

/*АДАПТИВНОСТЬ КАСТОМНАЯ НАЧАЛО*/
    /* Кастомные стили для адаптивности */
    .custom-container {
      width: 100%;
      padding-left: 15px;
      padding-right: 15px;
      margin-left: auto;
      margin-right: auto;
      max-width: 1240px; /* Максимальная ширина контейнера */
  }

  /* Плавное сжатие отступов */
  @media (max-width: 1320px) {
      .custom-container {
          padding-left: calc(15px - (1320px - 100vw) / 4);
          padding-right: calc(15px - (1320px - 100vw) / 4);
      }
  }

  /* Минимальная ширина контента и адаптация */
  @media (max-width: 1280px) {
      .custom-container {
          max-width: 100%;
          padding-left: 15px;
          padding-right: 15px;
      }
  }

  /* Дополнительная адаптация для планшетов */
  @media (max-width: 991px) {
      .carousel-item {
          height: 300px !important;
      }
      .product-offer {
          height: 200px !important;
      }
  }

  /* Мобильные устройства */
  @media (max-width: 767px) {
      .carousel-item {
          height: 200px !important;
      }
      .display-4 {
          font-size: 1.5rem;
      }
      .product-offer {
          height: 150px !important;
      }
  }

  .logo-responsive {
    width: 20vw; /* Логотип занимает 20% ширины окна */
    max-width: 220px; /* Ограничение максимальной ширины, чтобы не стал слишком большим */
    min-width: 100px; /* Минимальная ширина для читаемости */
    height: auto; /* Пропорциональное сжатие по высоте */
}

@media (max-width: 1200px) {
    .logo-responsive {
        max-width: 80%; /* Уменьшаем логотип на средних экранах */
    }
}

@media (max-width: 992px) {
    .logo-responsive {
        max-width: 60%; /* Еще больше уменьшаем на планшетах */
    }
}

@media (max-width: 768px) {
    .logo-responsive {
        max-width: 50%; /* На мобильных устройствах */
    }
}

/* Основные стили для пунктов меню */
.navbar-nav .nav-link {
  font-size: 16px; /* Базовый размер шрифта */
  padding: 0.5rem 1rem; /* Базовые отступы */
  white-space: nowrap; /* Предотвращает перенос текста */
}

/* Правая часть (корзина и профиль) */
.navbar-nav.ml-auto .nav-link {
  padding: 0.5rem 1rem; /* Базовые отступы для иконок */
  margin: 0 0.5rem; /* Отступы между элементами */
}

/* На средних экранах (до 1200px) */
@media (max-width: 1200px) {
  .navbar-nav .nav-link {
      font-size: 14px;
      padding: 0.5rem 0.75rem; /* Сжимаем горизонтальные отступы */
  }
  .navbar-nav.ml-auto .nav-link {
      padding: 0.5rem 0.5rem; /* Уменьшаем отступы для корзины и профиля */
      margin: 0 0.3rem; /* Уменьшаем расстояние между кнопками */
  }
}

/* На узких экранах (до 1100px) */
@media (max-width: 1100px) {
  .navbar-nav .nav-link {
      font-size: 12px;
      padding: 0.5rem 0.5rem; /* Еще сильнее сжимаем отступы */
  }
  .navbar-nav.ml-auto .nav-link {
      padding: 0.5rem 0.3rem; /* Минимальные отступы для иконок */
      margin: 0 0.2rem; /* Минимальное расстояние между кнопками */
  }
  .navbar-nav.ml-auto .nav-link span {
      display: none; /* Скрываем текст "Корзина" и "Войти" */
  }
}

/* На мобильных устройствах (до 992px) */
@media (max-width: 992px) {
  .navbar-nav .nav-link {
      font-size: 16px; /* Восстанавливаем шрифт для вертикального меню */
      padding: 0.5rem 1rem; /* Стандартные отступы для мобильного меню */
  }
  .navbar-nav.ml-auto .nav-link {
      padding: 0.5rem 1rem;
      margin: 0; /* Убираем дополнительные отступы */
  }
  .navbar-nav.ml-auto .nav-link span {
      display: block; /* Возвращаем текст в мобильном меню */
  }
}

/* На очень узких экранах (до 768px) */
@media (max-width: 768px) {
  .navbar-nav .nav-link {
      font-size: 14px;
      padding: 0.5rem 0.75rem;
  }
}
/*АДАПТИВНОСТЬ КАСТОМНАЯ КОНЕЦ*/

/* Общие стили для списка и корзины */

/* Изображение */
.list-view .product-img, .cart-item-image {
  margin: 0;
  padding: 0;
  width: 90px;
}
.list-view .product-img a > img,
.cart-item-image img {
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Центральная часть (.cart-item-info) */
.list-view .cart-item-info {
  padding: 1rem;
  position: relative;
  min-height: 90px;
}

.list-view .cart-item-info h6 {
  font-size: 14px;
  margin-bottom: 0.25rem;
}

/* Наличие (.stock-info) */
.list-view .stock-info {
  position: absolute;
  bottom: 1rem;
}
.list-view .stock-info small {
  font-size: 0.75rem;
}

/* Правая часть (.cart-item-controls) */
.list-view .cart-item-controls {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  min-width: 150px;
  padding: 1rem;
}
.list-view .price-display .total-price {
  font-size: 1.2rem;
}
.list-view .quantity-controls {
  width: 100%; /* Занимает всю ширину */
}
.list-view .quantity-controls .btn {
  padding: 0.25rem 0.5rem;
}
.list-view .quantity-controls .form-control {
  height: calc(1.5em + 0.5rem + 2px);
  padding: 0.25rem;
  font-size: 0.875rem;
  width: 50px; /* Фиксированная ширина поля ввода */
}

.price-on-request {
  font-size: 0.9rem; 
  font-weight: 500;
  color: #6c757d;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .price-on-request {
    font-size: 13px;
  }
}

/* Сетка */
.grid-view .quantity-controls {
  width: 100%; /* Занимает всю ширину */
}
.grid-view .quantity-controls .btn {
  padding: 0.25rem 0.5rem;
}
.grid-view .quantity-controls .form-control {
  padding: 0.25rem;
  font-size: 0.875rem;
  width: 50px;
}


/*ФИКСИРОВАННЫЙ ХЕДЕР НАЧАЛО*/
/* Основной хедер всегда видимый */
.main-header {
  position: relative;
  z-index: 1000;
  transition: all 0.3s ease;
}

/* Новый фиксированный хедер */
.fixed-header {
  position: fixed;
  top: -65px; /* Изначально скрыт выше видимой области */
  left: 0;
  width: 100%;
  z-index: 999;
  transition: top 0.3s ease;
}

.fixed-header.visible {
  top: 0; /* Появляется при прокрутке */
}

.fixed-header-inner {
  background-color: #343a40; /* Фон только для внутреннего контейнера */
  padding: 10px 20px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 8px 8px; /* Скругление снизу */
}

.fixed-header .catalog-col {
  margin-right: 15px;
}

.fixed-header #catalog-toggle-fixed {
  padding: 8px 15px;
  height: 45px;
  font-size: 14px;
}

.fixed-header .search-col-fixed {
  flex-grow: 1;
  max-width: 48%;
}

/* Стили для корзины и личного кабинета как в оригинале */
.fixed-header .compact-nav-fixed {
  display: flex;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
}

.fixed-header .compact-nav-fixed .nav-item.nav-link {
  color: #ffffff;
  padding: 5px;
  width: 60px;
  height: 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.3s ease;
}

.fixed-header .compact-nav-fixed .nav-item.nav-link:hover {
  color: #ffd700; /* Цвет при наведении, как в оригинале */
}

.fixed-header .compact-nav-fixed .cart-icon i,
.fixed-header .compact-nav-fixed .profile-icon i {
  font-size: 20px;
}

.fixed-header .compact-nav-fixed .cart-icon span,
.fixed-header .compact-nav-fixed .profile-icon span {
  font-size: 12px;
  margin-top: 2px;
}

.fixed-header .compact-nav-fixed #cart-count-fixed {
  top: -1px;
  right: -1px;
  height: 18px;
  min-width: 18px;
  font-size: 11px;
  line-height: 18px;
}

/* Адаптивность для фиксированного хедера */
/* Верхняя полоска */

.top-nav .nav-link {
  font-size: 14px;
  padding: 0;
}


/* Навигационная панель */
.navbar-wrapper {
  transition: all 0.3s ease;
}

/* Каталог */
.catalog-modal {
  position: fixed;
  top: 0; /* Корректируется через JS */
  width: 100%;
  z-index: 1050;
  background: white;
  display: none;
  transition: all 0.3s ease;
}

.catalog-modal.show {
  display: block;
}

.catalog-content {
  max-width: 1200px; /* Ограничение ширины контента каталога */
  margin: 0 auto;
  padding: 20px;
  display: flex;
}
/*ФИКСИРОВАННЫЙ ХЕДЕР КОНЕЦ*/


/* Основные блоки хедера */
.top-strip,
.navbar-wrapper {
    width: 100%;
    background: transparent;
}

.navbar-wrapper .custom-container {
    border-radius: 8px; /* Скругление углов */
    overflow: hidden; /* Обрезаем содержимое для скругления */
}

.navbar-wrapper {
    margin-bottom: 1.5rem; /* mb-4 */
}

.navbar-wrapper.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    margin-bottom: 0;
    border-radius: 8px; /* Скругление при фиксации */
}





.top-nav .nav-link,
.contact-info span {
    font-size: 14px; /* Увеличенный шрифт */
    padding: 0;
    color: #212529; /* text-dark */
}

/* Компактность навигационной панели */
.navbar-wrapper .custom-container {
    padding-top: 0.25rem; /* Уменьшенные отступы */
    padding-bottom: 0.25rem;
}

.logo-col .logo-responsive {
    max-width: 150px; /* Уменьшаем логотип */
}

.catalog-col .btn-catalog {
    background: #0078be;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    font-size: 14px; /* Увеличенный шрифт */
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.catalog-col .btn-catalog:hover {
    background: #007bff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.catalog-col .btn-catalog i {
    font-size: 1rem;
}


.search-col .input-group {
    max-width: 100%;
}

.search-col .form-control {
    font-size: 14px;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}

.compact-nav .nav-link {
    padding: 0.25rem 0.5rem;
}

.compact-nav .fa-lg {
    font-size: 1.25rem;
}

.compact-nav .nav-link span {
    font-size: 14px; /* Увеличенный шрифт для подписей */
    display: block; /* Подписи всегда видны */
}

.catalog-content {
    max-width: 1240px; /* Соответствует custom-container */
    margin: 0 auto;
    padding: 15px;
    display: flex;
}

/* Адаптивность */
@media (max-width: 991px) {
    .top-nav {
        justify-content: center;
        flex-wrap: wrap;
    }
    .contact-info {
        justify-content: center;
        margin-top: 0.25rem;
    }
    .navbar-wrapper .row {
        flex-wrap: nowrap;
    }
}

@media (max-width: 767px) {
    .top-nav .nav-link {
        margin: 0 0.25rem;
    }
    .contact-info span {
        font-size: 12px;
        margin: 0 0.25rem;
    }
    .logo-col .logo-responsive {
        max-width: 100px;
    }
    .compact-nav .nav-link span {
        display: block; /* Подписи видны на мобильных */
    }
    .compact-nav .nav-link {
        margin: 0 0.25rem;
    }
}

/* Стили для ссылок в top-nav (кроме контактов) */

.top-nav .nav-link:hover {
  color: #0078be; /* Цвет при наведении */
}

/* Исключаем элементы контактов из изменения цвета */
.contact-info .text-dark.mx-2:hover {
  color: inherit; /* Сохраняем исходный цвет для телефона и email */
}

/* Опционально: если есть выпадающее меню, стилизуем его тоже */
.top-nav .dropdown .nav-link:hover,
.top-nav .dropdown .dropdown-item:hover {
  color: #0078be; /* Цвет для выпадающих элементов при наведении */
  background-color: rgba(0, 120, 190, 0.1); /* Легкий фон для наглядности */
}

/* Эффект для лупы (иконки поиска) */
.search-col .input-group-append .input-group-text {
  transition: transform 0.3s ease-in-out,
}

.search-col .input-group-append .input-group-text:hover {
  transform: scale(1.2); 

}


/* Увеличиваем высоту навигационной панели */
.navbar-wrapper .custom-container {
  min-height: 50px; /* Увеличиваем высоту контейнера */
  padding-top: 0.5rem; /* Увеличиваем отступы для баланса */
  padding-bottom: 0.5rem;
}

/* Увеличиваем высоту строки внутри */
.navbar-wrapper .row {
  min-height: 50px !important; /* Переопределяем inline стиль min-height: 1.5em */
  align-items: center; /* Центрируем содержимое по вертикали */
}

/* Подстраиваем логотип */
.logo-col .logo-responsive {
  max-width: 180px; /* Увеличиваем логотип для соответствия новой высоте */
}

/* Подстраиваем кнопку каталога */
.catalog-col .btn-catalog {
  height: 35px; /* Увеличиваем высоту кнопки */
  font-size: 16px; /* Увеличиваем шрифт для пропорциональности */
  padding: 0.5rem 1rem;
}

/* Подстраиваем поле поиска */
.search-col .form-control {
  height: 35px; /* Увеличиваем высоту поля поиска */
  font-size: 16px;
  padding: 0.5rem 1rem;
}

/* Подстраиваем иконки корзины и профиля */
.compact-nav .nav-item.cart-icon,
.compact-nav .nav-item.profile-icon {
  height: 50px; /* Увеличиваем высоту элементов */
  padding: 10px; /* Корректируем отступы */
}

.compact-nav .nav-item.cart-icon i,
.compact-nav .nav-item.profile-icon i {
  font-size: 22px; /* Увеличиваем иконки */
}

.compact-nav .nav-item.cart-icon span,
.compact-nav .nav-item.profile-icon span {
  font-size: 16px; /* Увеличиваем текст под иконками */
}

/* Корректируем счетчик корзины */
#cart-count {
  height: 20px;
  min-width: 20px;
  font-size: 14px;
  line-height: 20px;
  top: 0px;
  right: 8px;
}



/* Основные стили для top-strip */
.top-strip .row {
  justify-content: space-between; /* Расстояние между блоками уменьшается автоматически */
  align-items: center;
}

/* Предотвращаем перенос текста в top-nav */
.top-nav {
  flex-wrap: nowrap; /* Элементы остаются в одну строку */
  overflow-x: auto; /* Добавляем горизонтальную прокрутку, если элементы не помещаются */
  -webkit-overflow-scrolling: touch; /* Плавная прокрутка на мобильных */
  scrollbar-width: none; /* Скрываем полосу прокрутки в Firefox */
}

.top-nav::-webkit-scrollbar {
  display: none; /* Скрываем полосу прокрутки в Webkit-браузерах */
}
  
/* Уменьшаем отступы в contact-info */
.contact-info span {
  margin: 0 0.5rem; /* Базовый отступ */
}

/* Динамическое уменьшение отступов при сужении экрана */
@media (max-width: 1200px) {
  .top-nav .nav-link {
    margin: 0 0.4rem; /* Уменьшаем отступы */
    font-size: 13px; /* Уменьшаем шрифт */
  }

  .contact-info span {
    margin: 0 0.4rem;
    font-size: 13px;
  }

  .top-strip .col-lg-6 {
    padding-left: 10px; /* Уменьшаем внутренние отступы колонок */
    padding-right: 10px;
  }
}

@media (max-width: 991px) {
  .top-nav .nav-link {
    margin: 0 0.3rem; /* Ещё сильнее сжимаем отступы */
    font-size: 12px;
    white-space: nowrap;
  }

  .contact-info span {
    margin: 0 0.3rem;
    font-size: 12px;
  }

  .top-strip .col-lg-6 {
    padding-left: 5px; /* Минимальные отступы */
    padding-right: 5px;
  }
}

/* На мобильных устройствах переключаемся на вертикальное расположение */
@media (max-width: 767px) {
  .top-strip .row {
    flex-direction: column; /* Вертикальное расположение */
    text-align: center;
  }

  .top-nav {
    flex-wrap: wrap; /* Разрешаем перенос на мобильных */
    justify-content: center;
    overflow-x: visible; /* Убираем прокрутку */
  }

  .contact-info {
    margin-top: 0.5rem;
  }

  .top-nav .nav-link,
  .contact-info span {
    font-size: 12px;
    margin: 0 0.2rem;
  }

  .top-strip .col-lg-6 {
    padding-left: 15px; /* Возвращаем стандартные отступы */
    padding-right: 15px;
  }
}










/* Верхняя полоска (top-strip) */
.top-strip .row {
  flex-wrap: nowrap; /* Оставляем без переноса */
  justify-content: space-between;
  align-items: center;
}

.top-strip .col-lg-6.col-md-6 {
  flex: 1; /* Обе колонки занимают равное пространство */
  max-width: 50%; /* Ограничиваем максимальную ширину */
  padding-left: clamp(5px, 1vw, 15px); /* Плавные отступы */
  padding-right: clamp(5px, 1vw, 15px);
}

.top-nav {
  flex-wrap: wrap;
  overflow-x: auto; /* Прокрутка, если элементы не помещаются */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start; /* Выравнивание влево */
  min-width: 0; /* Предотвращаем переполнение */
}

.top-nav::-webkit-scrollbar {
  display: none;
}


.contact-info {
  flex-wrap: nowrap;
  justify-content: flex-end; /* Выравнивание вправо */
  min-width: 0; /* Предотвращаем переполнение */
}

.contact-info span {
  margin: clamp(0.2rem, 0.8vw, 0.5rem);
  white-space: nowrap;
}

/* Основная панель (navbar-wrapper) */
.navbar-wrapper .row {
  flex-wrap: nowrap; /* Предотвращаем перенос элементов */
  min-height: clamp(40px, 5vw, 50px); /* Плавная высота */
  align-items: center;
}

.logo-col .logo-responsive {
  width: clamp(100px, 15vw, 140px); /* Плавное сжатие логотипа */
  height: auto;
  margin-left: 10px;
}

.catalog-col .btn-catalog {
  padding: clamp(0.25rem, 0.8vw, 0.5rem) clamp(0.5rem, 1.5vw, 1rem); /* Плавные отступы */
  font-size: clamp(12px, 1.2vw, 16px);
  height: clamp(30px, 4vw, 35px);
  width: 100%;
  box-sizing: border-box;
}

.search-col .input-group {
  max-width: 100%;
}

.search-col .form-control {
  font-size: clamp(12px, 1.2vw, 16px);
  padding: clamp(0.25rem, 0.8vw, 0.5rem) clamp(0.5rem, 1vw, 1rem);
  height: clamp(30px, 4vw, 35px);
}

.compact-nav {
  flex-wrap: nowrap;
  gap: clamp(1px, 1vw, 5px); /* Плавное расстояние между элементами */
}

/* Стили для иконок корзины и профиля */

.compact-nav .nav-item.cart-icon i,
.compact-nav .nav-item.profile-icon i {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1; /* Убираем лишнюю высоту строки */
}

.compact-nav .nav-item.cart-icon span,
.compact-nav .nav-item.profile-icon span {
  font-size: clamp(10px, 1.2vw, 12px);
}

/* Новый стиль для текста под иконкой профиля */
.compact-nav .profile-icon .profile-text {
  text-align: center; /* Центрирование текста */
  margin-top: clamp(2px, 0.5vw, 4px); /* Плавный отступ сверху */
  line-height: 1.2; /* Контроль высоты строки */
  text-overflow: ellipsis; /* Многоточие для длинных имен */
  white-space: nowrap; /* Текст в одну строку */
}


/* Медиа-запросы для дополнительных корректировок */
@media (max-width: 1200px) {
  .top-nav .nav-link,
  .contact-info span {
      margin: clamp(0.15rem, 0.8vw, 0.4rem);
  }

  .navbar-wrapper .custom-container {
      padding-left: clamp(8px, 1.5vw, 15px);
      padding-right: clamp(8px, 1.5vw, 15px);
  }
}

@media (max-width: 991px) {
  .top-strip .row {
      flex-wrap: wrap; /* Разрешаем перенос только на планшетах и ниже */
      justify-content: center;
  }

  .top-nav,
  .contact-info {
      flex-wrap: nowrap; /* Сохраняем элементы в строке */
      width: 100%;
      justify-content: center;
  }

  .top-strip .col-lg-6.col-md-6 {
      flex: 0 0 100%; /* На планшетах каждая колонка занимает всю ширину */
      max-width: 100%;
  }

  .navbar-wrapper .row {
      flex-wrap: nowrap; /* Сохраняем одну строку */
  }

  .col-lg-2.col-md-2.col-3.logo-col,
  .col-lg-2.col-md-2.col-3.catalog-col {
      flex: 0 0 clamp(15%, 20vw, 20%); /* Плавное сжатие колонок */
      max-width: clamp(15%, 20vw, 20%);
  }

  .col-lg-5.col-md-5.col-4.search-col {
      flex: 1; /* Поиск занимает оставшееся пространство */
      max-width: 50%;
  }

  .col-lg-3.col-md-3.col-2.compact-nav {
      flex: 0 0 clamp(20%, 25vw, 30%);
      max-width: clamp(20%, 25vw, 30%);
  }
}

@media (max-width: 767px) {
  .top-strip .row {
      flex-direction: column; /* Вертикальное расположение на мобильных */
      text-align: center;
  }

  .top-nav {
      margin-bottom: 0.5rem;
  }

  .contact-info {
      margin-top: 0.5rem;
  }

  .navbar-wrapper .row {
      flex-wrap: nowrap;
  }

  .col-lg-2.col-md-2.col-3.logo-col {
      flex: 0 0 clamp(20%, 25vw, 30%);
      max-width: clamp(20%, 25vw, 30%);
  }

  .col-lg-2.col-md-2.col-3.catalog-col {
      flex: 0 0 clamp(20%, 25vw, 30%);
      max-width: clamp(20%, 25vw, 30%);
  }

  .col-lg-5.col-md-5.col-4.search-col {
      flex: 1;
      max-width: 40%;
  }

  .col-lg-3.col-md-3.col-2.compact-nav {
      flex: 0 0 clamp(20%, 25vw, 30%);
      max-width: clamp(20%, 25vw, 30%);
  }

  .compact-nav .nav-link span {
      display: block; /* Текст под иконками виден */
  }
}

@media (max-width: 576px) {
  .top-nav .nav-link,
  .contact-info span {
      font-size: clamp(10px, 1vw, 12px);
      margin: clamp(0.1rem, 0.5vw, 0.2rem);
  }

  .catalog-col .btn-catalog {
      font-size: clamp(10px, 1vw, 12px);
      padding: clamp(0.2rem, 0.5vw, 0.25rem) clamp(0.3rem, 0.8vw, 0.5rem);
  }

  .search-col .form-control {
      font-size: clamp(10px, 1vw, 12px);
  }

  .compact-nav .nav-item.cart-icon,
  .compact-nav .nav-item.profile-icon {
      width: clamp(30px, 4vw, 40px);
      height: clamp(30px, 4vw, 40px);
  }

  .compact-nav .nav-item.cart-icon i,
  .compact-nav .nav-item.profile-icon i {
      font-size: clamp(14px, 1.8vw, 18px);
  }

  .compact-nav .nav-item.cart-icon span,
  .compact-nav .nav-item.profile-icon span {
      font-size: clamp(8px, 1vw, 12px);
  }
}




/* Контент верхней полоски */
.top-strip-content {
display: flex;
justify-content: space-between; /* Прижимаем элементы к краям */
align-items: center;
min-height: 30px; /* Минимальная высота для полоски */
}

/* Левый блок с навигацией */
.top-nav {
display: flex;
flex-wrap: wrap; /* Разрешаем перенос ссылок */
align-items: center;
gap: 10px; /* Отступы между ссылками */
flex: 1 1 auto; /* Растягивается и сжимается */
min-width: 0; /* Предотвращаем переполнение */
}

/* Ссылки в навигации */
.top-nav .nav-link {
font-size: 14px;
color: #212529;
text-decoration: none;
white-space: nowrap; /* Сами ссылки не переносятся */
}



/* Выпадающее меню */
.top-nav .dropdown {
display: inline-flex;
align-items: center;
}

.top-nav .dropdown-toggle::after {
display: none; /* Убираем стандартную стрелку Bootstrap */
}

/* Правый блок с контактами */
.contact-info {
display: flex;
flex-wrap: wrap; /* Разрешаем перенос контактов */
align-items: center;
gap: 10px; /* Отступы между элементами */
flex: 0 0 auto; /* Занимает только необходимое место */
min-width: 0;
}

/* Элементы контактов */
.contact-info span {
font-size: 14px;
color: #212529;
white-space: nowrap; /* Контакты не переносятся */
}

/* Адаптивность */
@media (max-width: 991px) {
.top-strip-content {
    flex-direction: column; /* Вертикальное расположение на узких экранах */
    gap: 10px;
}

.top-nav,
.contact-info {
    justify-content: center; /* Центрируем содержимое */
    width: 100%;
}
}

@media (max-width: 767px) {
.top-nav .nav-link,
.contact-info span {
    font-size: 12px;
    gap: 8px;
}
}


.form-group {
margin-bottom: 1rem;
min-height: 60px; /* Резервируем место для input и ошибки */
}

.form-label {
position: relative; /* Делаем label позиционированным контейнером */
display: block; /* Убедимся, что label занимает всю ширину */
}

.form-control {
display: block;
border: 1px solid #ced4da;
border-radius: 4px;
padding: 15px 10px 10px 10px; /* Увеличиваем padding-top */
font-size: 16px;
color: #333;
height: 40px;
width: 100%;
box-sizing: border-box;
transition: border-color 0.3s ease;
}

.form-control:focus {
border-color: #0078be;
box-shadow: 0 0 10px rgba(52, 152, 219, 0.2);
outline: none;
box-shadow: none;
}

/* Переопределяем цвет для заблокированного поля */
.form-control:disabled ~ .form-placeholder.active {
color: #666; /* Серый цвет для плейсхолдера заблокированного поля */
background-color: #f0f2f3;
}

.form-control.error {
border-color: red;
}

.error-message {
text-align: center;
}


.form-control:disabled {
background-color: #f0f2f3; /* Фон для заблокированного поля */
color: #666; /* Цвет текста в заблокированном поле */
cursor: not-allowed; /* Курсор для наглядности */
}

.form-placeholder {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
color: #999;
font-size: 16px;
transition: all 0.2s ease;
pointer-events: none;
background: white;
padding: 0 5px;
line-height: 1;
}

.form-placeholder.active {
top: 0px;
font-size: 0.8rem;
color: #0078be;
}



.form-control[value]:not([value=""]) ~ .form-placeholder {
top: 0px;
font-size: 0.8rem;
color: #0078be;
}


.form-control[value]:not([value=""]) ~ .form-control:disabled ~ {
top: 0px;
font-size: 0.8rem;
color: #666;
background-color: #f0f2f3;
}

.form-control:disabled ~ .form-placeholder.active {
color: #666;
background-color: #f0f2f3;
}


/* Новое правило: если у input есть класс error, меняем цвет текста надписи */
.form-control.error ~ .form-placeholder.active {
color: red;
}

.error-message {
color: red;
font-size: 0.8rem;
margin-top: 5px;
display: none;
}

.modal-body.position-relative {
padding: 20px; /* Увеличиваем padding для лучшего вида */
}



.password-toggle-icon {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
color: #666;
}

.password-toggle-icon i {
font-size: 1rem;
}

.form-label {
position: relative; /* Для позиционирования иконки */
}

.form-control.success {
border-color: #28a745;
box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

#captchaOverlay {
display: none; /* Скрыт по умолчанию */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 2000;
justify-content: center;
align-items: center;
}

#captchaContainer {
width: 350px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
position: relative;
height: 143px !important;
}

#captchaContainer small {
font-size: 12px;
color: #666;
display: block;
text-align: center;
margin-top: 10px;
}

.success-container {
display: flex;
flex-direction: column; /* Вертикальное расположение */
align-items: center; /* Центрирование по горизонтали */
justify-content: center; /* Центрирование по вертикали */
}

.success-message {
color: #28a745; /* Зелёный цвет */
font-size: 2.5rem;
text-align: center;
}

.redirect-message {
font-size: 1.8rem; /* Чуть меньше первого заголовка */
color: #3D464D; /* Тёмно-серый цвет */
text-align: center;
margin-bottom: 20px; /* Отступ снизу перед иконкой */
}

.redirect-message #redirectTimer {
color: #00467f; /* Синий цвет для таймера */
font-weight: bold;
}

.success-icon {
color: #28a745; /* Зелёный цвет, как у success-message */
font-size: 4rem; /* Большой размер иконки */
margin-top: 20px; /* Отступ сверху от redirect-message */
}

.success-message {
padding: 20px;
animation: fadeIn 0.5s ease-in-out;
}

.success-message h1 {
color: #28a745;
font-size: 1.8rem;
margin-bottom: 10px;
}

.success-message p {
font-size: 1rem;
color: #555;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

.btn:disabled {
cursor: not-allowed;
opacity: 0.7;
}

.fa-spinner {
margin-right: 5px;
}


.swal2-popup {
font-family: 'Arial', sans-serif;
border-radius: 10px;
}
.swal2-title {
color: #333;
}
.swal2-content {
color: #666;
}

/* Кастомизация кнопки подтверждения SweetAlert2 */
.swal2-confirm {
background-color: #0078be !important; /* Синий цвет */
color: white !important;
border-radius: 8px !important;
padding: 10px 20px !important;
font-weight: 500 !important;
transition: background-color 0.2s ease !important;
}

.swal2-confirm:hover {
background-color: #00467f !important; /* Темнее при наведении */
}

.profile-icon .profile-name {
max-width: 70px; /* Ограничение ширины имени */
white-space: nowrap; /* Запрет переноса текста */
overflow: hidden; /* Скрытие текста за пределами ширины */
text-overflow: ellipsis; /* Добавление многоточия */
display: block; /* Сохранение блочного отображения */
}

.cart-items, #cart-summary {
  opacity: 0;
  transition: opacity 0.3s;
}
.cart-items.loaded, #cart-summary.loaded {
  opacity: 1;
}

.address-suggestions-list {
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
    display: none;
}

.suggest-item {
    padding: 8px;
    cursor: pointer;
    text-align: left;
}

.suggest-item:hover {
    color: #0078be;
    background-color: #f0f0f0;
}

.product-disclaimer {
  font-size: 0.75rem;
  color: #6c757d;
  margin-top: 1rem;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* 1) Серый и полупрозрачный сам чекбокс */
#filtersContainer input[type="checkbox"]:disabled {
  opacity: 0.2;          /* делает полупрозрачным */
  cursor: not-allowed;   /* показывает, что элемент не кликабелен */
}

/* 2) Серый текст у соответствующего label */
#filtersContainer input[type="checkbox"]:disabled + label,
#filtersContainer input[type="checkbox"]:disabled ~ label {
  color: #0000004d;        /* bootstrap‑овский muted‑серый */
}

/* 3) Если текст лейбла расположен не сразу после input */
#filtersContainer .form-check-input:disabled + .form-check-label {
  color: #0000004d;
}

/* 4) (Опционально) при ховере курсор по‑прежнему не меняется */
#filtersContainer input[type="checkbox"]:disabled:hover {
  cursor: not-allowed;
}

/* Базовый чип */
#active-filters .filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  margin-right: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: #0078be;
  color: #fff;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  cursor: default;
}

/* Иконка крестика внутри чипа */
#active-filters .filter-chip .chip-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    margin-left: 0.3rem;
    background: transparent;
    border: none;
    color: #6c757d;
    font-size: 0.8rem;
    cursor: pointer;
    background-color: white;
    border-radius: 3px;
}

/* При наведении крестик чуть ярче */
#active-filters .filter-chip .chip-close:hover {
  color: #000;
}

/* Чип «Очистить все» */
#active-filters .filter-chip.clear-all {
  background-color: #6c757d;
}

/* Иконка корзины внутри чипа «Очистить все» */
#active-filters .filter-chip.clear-all .chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.3rem;
  font-size: 0.9rem;
  color: #fff;
}


/* Увеличим длительность перехода до 1.5 сек и зададим ease-in-out */
#header-carousel .carousel-inner .carousel-item {
  transition: transform 0.8s ease-in-out !important;
}

/* Если хотите также сделать поплавковое затухание навигационных стрелок/точек */
#header-carousel .carousel-control-prev,
#header-carousel .carousel-control-next,
#header-carousel .carousel-indicators li {
  transition: opacity 0.3s ease;
}

/* Cookie consent */
.cookie-consent{
  position: fixed; left: 20px; right: 20px; bottom: 20px;
  z-index: 1080; /* выше большинства элементов */
  background:#fff; color:#333;
  border:1px solid #e8e8e8; border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.08);
  padding:14px 16px; display:flex; gap:12px; align-items:center;
  max-width: 980px; margin: 0 auto;
}
.cookie-consent__text{ flex:1; font-size:0.95rem; }
.cookie-consent__link{ text-decoration: underline; }
.cookie-consent__actions{ display:flex; gap:8px; }
.cookie-consent__close{
  background:none; border:0; font-size:22px; line-height:1; opacity:.6; padding:0 4px; cursor:pointer;
}
.cookie-consent.cc-hide{ display:none !important; }

@media (max-width: 576px){
  .cookie-consent{ flex-direction:column; align-items:flex-start; }
  .cookie-consent__actions{ width:100%; justify-content:flex-end; }
}

/* Контейнер фиксированного размера/соотношения */
.product-image-wrapper .main-image{
  position: relative;
  width: 100%;
  /* Выбери один вариант ниже: */

  /* ВАРИАНТ 1: фиксированная высота (например, 420px) */
  /* height: 420px; */

  /* ВАРИАНТ 2: фиксированное соотношение сторон (современно и адаптивно) */
  aspect-ratio: 1 / 1; /* квадрат; можно 4/3, 3/2 и т.д. */
  max-height: 520px;   /* ограничитель на очень широких экранах */

  background: #fff;
  overflow: hidden;
}

/* Картинка всегда «вписана» внутрь контейнера */
.product-image-wrapper .main-image > img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Вписываем без обрезки */
}

.sale-badge{
  position:absolute;
  top:0px;
  right:0px;
  width:50px;      
  height:auto;
  z-index:10;
  pointer-events:none; 
}


.sale-badge-list {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 40px;
  height: auto;
  z-index: 10;
  pointer-events: none;
}


/* Выровнять галочку + текст + поле в одну строку */
.cutting-block .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
}

.cutting-block label.form-check-label {
    display: flex;
    align-items: center;
    margin-bottom: 0 !important;
}

/* Обёртка для "по [input] м." */
.cutting-input-wrapper {
    display: inline-flex;
    align-items: center;
}

/* Компактное поле, не ломает вертикаль */
.cutting-meters-input {
    height: 21px;          /* ↓ можно подбирать под чекбокс */
    padding: 2px 6px;
    font-size: 0.85rem;
    line-height: 1;
}

/* Убираем стрелочки */
.cutting-meters-input::-webkit-outer-spin-button,
.cutting-meters-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cutting-meters-input[type=number] {
  -moz-appearance: textfield;
}