/* --- Глобальные стили и сброс --- */
/* ========== Главный контейнер ========== */
.main-wrapper {
  max-width: 1300px;      /* не растягиваемся на больших экранах */
  width: 100%;            /* адаптивно */
  margin: 0 auto;         /* центрируем */
  padding: 20px 15px;     /* отступы сверху/снизу и по бокам */
 
}
/* Градиент фона первого экрана на всю ширину */
body {
  margin: 0;
  background-color: #ffffff;
  overflow-x: hidden;    /* убираем горизонтальный скролл */
  overflow-y: auto;      /* вертикальный скролл работает по умолчанию */
}

#hero-section {
  width: 100%;
  background: linear-gradient(to bottom, #aaffaa, #ffffff);
}

/* Стили для кнопок из предыдущего разговора */

/* --- Конфликтующие секции: им нужен z-index, но он мешал модалке --- */

.seo-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap; /* Чтобы текст не переносился */
}
/* --- ИСПРАВЛЕНИЕ Z-INDEX ДЛЯ МОДАЛКИ И ФОНА --- */
.modal {
  pointer-events: auto;
  z-index: 1050; /* Делаем модалку самой верхней */
}
modal-body {
  border-radius: 20px !important;  
}
.modal-backdrop {
    z-index: 1040; /* Делаем фон модалки выше любого контента, но ниже окна */
}
.modal-body.text-center {
  text-align: center;      /* центрируем контент по горизонтали */
  padding: 1rem;
  overflow: auto;          /* если фото большое — появляется прокрутка */
  max-height: 90vh;        /* ограничение по высоте окна */
}
.text-center .mb-1 span,
.text-center span[style*="font-weight"],
span[style*="057718"] {
  font-weight: normal !important;
  font-weight: 400 !important;
}
/* Большое фото */
.modal-body.text-center .main-img {
  max-width: 100%;
  max-height: 70vh;        /* чуть меньше, чтобы были миниатюры снизу */
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto 1rem;     /* отступ снизу для миниатюр */
}

/* Миниатюры */
.modal-body.text-center .thumbnails {
  display: flex;
  justify-content: center;  /* центрируем миниатюры */
  flex-wrap: wrap;          /* если их много, переход на новую строку */
}
/* Обертка строки: фиксирует положение под навбаром, фон прозрачный */
.running-line-wrapper {
  background-color: transparent;
  padding: 5px 0;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  z-index: 1020;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  animation: marquee 25s linear infinite;
}

.marquee-content span {
  color: #333;
  font-weight: bold;
  text-transform: uppercase;
}


@keyframes marquee {
  0% {
    transform: translateX(100vw); /* текст полностью справа */
  }
  100% {
    transform: translateX(calc(-100% - 100vw)); /* текст полностью ушел влево */
  }
}
/* 1. Кнопка в админке — желтый ! */
.emoji-btn[data-emoji="!"] {
  color: #FFD700 !important;  /* Желтый */
  font-size: 1.3em;
  font-weight: bold;
}

.second-screen {
  background: #ffffff;
  position: relative;
  /* ИСПРАВЛЕНИЕ: Сбрасываем z-index, чтобы модалка была сверху */
  z-index: auto; 
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 0;
}
.second-screen::before {
  content: "";
  position: absolute;
  top: -250px; /* Высота градиента */
  left: 0;
  width: 100%;
  height: 250px;
  /* Градиент от прозрачного к белому цвету второй секции */
  background: linear-gradient(to bottom, transparent, #ffffff);
  pointer-events: none;
}
.bg-mask-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  background-image: url("images/logo_background/main_background1.webp");
  background-size: cover;
  background-position: center;
  /* Плавное исчезновение фона к низу первого экрана */
}
.content-wrapper {
  position: relative;
  /* ИСПРАВЛЕНИЕ: Сбрасываем z-index, чтобы модалка была сверху */
  z-index: auto; 
  min-height: 100vh; /* Растягивает блок на всю высоту экрана */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Контент прижат к верху */
}
#catalog-section {
  padding-top: 40px;
  padding-bottom: 80px;
  background: #fff;
}
/* levitate-section */
.levitate-section {
  /* Градієнт створює ефект глянцевого відблиску */
  background: linear-gradient(135deg, #ffffff 0%, #9dfcba 50%, #ffffff 100%) !important;
  /* Внутрішнє біле свічення для об'єму */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), inset 0 2px 15px rgba(255, 255, 255, 0.9) !important;
  /* Світла тонка рамка (межа скла) */
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  /* Заокруглення всіх кутів (2026 тренд — м'які форми) */
  border-radius: 30px;
  padding: 30px;
}
/* Категории */
.categories-wrapper {
  margin-top: 50px;
  margin-bottom: 40px;
}
/* Fancybox (галерея внутри модалки) */
/* Галерея поверх модалки */
.fancybox__container {
    z-index: 2000;
    padding-top: 50px;
    padding-bottom: 50px;
    box-sizing: border-box; /* важно для отступов */
}


/* Контент галереи */
.fancybox__content {
    animation: f-zoomInUp 1s ease-out;
    display: flex;
    justify-content: center;
    align-items: center;
     transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Ограничиваем размер изображений */
.fancybox__image {
    max-height: 90vh; /* Фото не выходит за экран */
    object-fit: contain; /* Сохраняет пропорции */
    border-radius: 15px; /* Сохраняем стиль скругления */
}
/* Шрифты и заголовки */
#temp,
.ms-auto.d-flex.align-items-center.text-white.small {
  font-family: "Comfortaa", sans-serif !important;
}
h1 {
  color: rgba(242, 180, 37, 0.992);
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  font-size: clamp(1rem, 1.4vw, 5rem);
  text-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
  line-height: 1.3;
  text-transform: uppercase;
}
h2 {
  color: rgba(20, 139, 2, 0.545);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.7);
  font-family: "Nunito", cursive;
  text-transform: uppercase;
  letter-spacing: 5px !important; /* Уменьшено с 10px до 2px */
  font-weight: 900 !important; /* Сделано жирнее для лучшей видимости тени */
  display: block;
  width: 100%;
  font-size: 2.8rem;
}
.row.mt-0 .col-12.text-center h2 {
  position: relative; /* Чтобы ::after позиционировалось относительно h2 */
}

.row.mt-0 .col-12.text-center h2::after {
  content: "";
  position: absolute;
  left: 50%;         /* центрируем по горизонтали */
  bottom: -6px;      /* отступ под текстом */
  transform: translateX(-50%);
  width: 100%;       /* длина линии, можно менять */
  max-width: 90vw;
  height: 3px;        /* толщина линии */
  border-radius: 2px; /* скругление концов */
  background: linear-gradient(
    to left, 
    rgba(255,255,255,0.8), 
    rgba(6,210,40,0.8), 
    rgba(255,255,255,0.8)
  );
}

.about-title {
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3vw, 1.7rem);
  font-weight: bold;
  font-family: 'Comfortaa', sans-serif;
  color: #076398;
  line-height: 1.4;
}
/* Карточки преимуществ (Advantages) */
.advantage-card {
  aspect-ratio: 1 / 1;
  height: 100%;
  border-radius: 25px;
  background: linear-gradient(45deg, #edfdfc, #ccefff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.advantage-card:hover {
 transform: translateY(-3px) scale(1.01);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}
.advantage-icon {
  font-size: 4rem;
  margin-bottom: 0.75rem;
}
.advantage-text {
  font-family: 'Comfortaa', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
}
/* Секция About */
#about {
  margin-top: 80px; /* или больше, чтобы отступ был от логотипов */
}
/* Fancybox Gallery (галерея с тракторами) */
a[data-fancybox="gallery"] img {
  display: inline-block;
  width: 300px; /* или ваш размер */
  margin: 20px;
  border-radius: 15px;
  /* Эффект левитации (изначально приподняты) */
  transform: translateY(-50px);
  box-shadow: 0 50px 60px rgba(0, 0, 0, 0.3);
  /* Плавность для наведения */
  transition: transform 1.0s ease, box-shadow 1.0s ease;
}
/* При наведении каждая картинка взлетает отдельно */
a[data-fancybox="gallery"] img:hover {
  /* scale(1.1) увеличивает картинку на 10% */
  /* оставляем небольшой translateY, чтобы она не "падала" на фон при увеличении */
  transform: translateY(-2px) scale(1.1);
  /* Усиливаем тень, так как объект стал "ближе" к зрителю */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  /* Добавляем приоритет по слоям, чтобы увеличиваемая картинка была над соседними */
  position: relative;
  z-index: 10;
}
/* ========== Навбар ========== */
/* === Navbar родитель === */
.navbar {
  margin-bottom: 20px;
}

/* Фон navbar */
.navbar.bg-dark {
  background: linear-gradient(180deg, #f8ed10 0%, #86ff6e 100%);
}

/* =========================
   Базовое состояние пунктов меню
   ========================= */
.navbar-nav .nav-link {
  display: inline-flex;
  align-items: center;
  color: #fa061f;
  padding: 8px 15px;
  font-family: "Comfortaa", sans-serif;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgb(176, 134, 8);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

/* Hover для пунктов меню */
.navbar-nav .nav-link:hover {
  color: #f7ff03;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.45);
}

/* =========================
   БРЕНД (СІЛЬГОСПЦЕНТР)
   ========================= */
/* ===== ГЛЯНЦЕВЫЙ ЛОГОТИП В NAVBAR (СТАБИЛЬНЫЙ) ===== */

.navbar .navbar-brand.custom-brand {
  font-family: "Mulish", sans-serif;
  font-size: 1.5rem;
  font-weight: 900; 
  letter-spacing: 2px;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  text-decoration: none;

  /* 1. ГЕОМЕТРИЯ ВЫПУКЛОСТИ */
  background: linear-gradient(to bottom, 
    #00ff40 0%,    
    #00ab2b 45%,   
    #00ab2b 55%,   
    #006419 100%   
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* 2. ЧЕТКИЙ КОНТУР (ФАСКА) */
  filter: 
    drop-shadow(0px -1px 0px rgba(255, 255, 255, 0.4)) 
    drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.8));     
}

/* ===== НЕПРЕРЫВНЫЙ СТЕКЛЯННЫЙ БЛИК ===== */
.navbar .navbar-brand.custom-brand::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;

  /* ШИРОКИЙ И ЯРКИЙ БЛИК */
  background: linear-gradient(
    135deg,
    transparent 30%,      /* Увеличили разлет (было 40%) */
    rgba(255, 255, 255, 1) 50%, /* Яркость на максимум (1) */
    transparent 70%       /* Увеличили разлет (было 60%) */
  );
  
  /* background-size 200% достаточно для непрерывности */
  background-size: 200% 100%;
  background-repeat: no-repeat;
  
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: none; 
  
  /* Непрерывная анимация */
  animation: continuousShine 15s linear infinite;
  opacity: 1; /* Полная непрозрачность для максимальной яркости */
}

@keyframes continuousShine {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}









/* ✅ ТОЛЬКО SCALE */
.navbar .navbar-brand.custom-brand:hover {
  transform: scale(1.05);
}












/* =========================
   Flex только для nav-items
   ========================= */
.navbar-nav {
  display: flex;
  flex-direction: column; /* мобилка */
  gap: 10px;
}

@media (min-width: 992px) {
  .navbar-nav {
    flex-direction: row; /* десктоп */
  }
}


/* Модалки и рамки */
.navbar-modal {
  border: 20px solid #7CFC00;
  border-radius: 2px !important;
  overflow: hidden;
  background-color: #f8f9fa;
}

.navbar-modal-header {
  background-color: transparent !important;
  border-bottom: 2px solid #7CFC00 !important;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-modal-header .modal-title {
  font-weight: 700;
  color: #000;
}

.navbar-modal-header .btn-close {
  width: 1.5rem !important;
  height: 1.5rem !important;
  opacity: 1 !important;
  background-color: transparent !important;
  border: none !important;
  /* Убеждаемся, что на кнопку можно нажать */
  pointer-events: auto !important;
  cursor: pointer !important;
  /* Если крестик белый, делаем его черным через фильтр */
  filter: brightness(0) !important; 
  z-index: 1070 !important;
}

.navbar-modal-header .btn-close:hover {
  opacity: 0.7 !important;
}

#mainModal .modal-header {
  display: flex;
  align-items: center;
  position: relative; /* Важно для позиционирования меню */
}

/* 2. Отталкиваем заголовок влево */
#mainModal .modal-title {
  margin-right: auto;
}

#contactsShareMenu {
  display: none; /* JS переключит на flex */
  position: absolute;
  
  /* Позиция: на 10-15мм выше и правее от центра стрелки */
  top: 30px;      /* Поднимаем выше уровня заголовка */
  right: -40px;  /* Выталкиваем вправо в сторону крестика и дальше */
  
  /* Стили как в товарах (без фона и рамок) */
  gap: 15px;
  background: transparent; 
  backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  
  z-index: 10;
  flex-direction: row;
  align-items: center;
}

#mainModalShareBtn {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: 11px; /* 3 мм левее от крестика */
  transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
  z-index: 11;
  position: relative;
}

#mainModalShareBtn:hover {
  transform: scale(1.15);
  filter: brightness(1.2);
}

#mainModalShareBtn img {
  display: block;
  pointer-events: none;
  transition: filter 0.2s ease-in-out;
}

#mainModalShareBtn:focus {
  outline: none;
  box-shadow: none;
}

/* Эффекты для иконок внутри панели (как в товарах) */
#contactsShareMenu img {
  display: block;
  transition: transform 0.2s, filter 0.2s;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

#contactsShareMenu img:hover {
  transform: scale(1.2);
  filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}


/* ===== график работи в контактах ===== */
/* График работы - точно как .contact-row */
.work-schedule-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 5px;
  color: #000 !important; /* Черный текст */
  font-style: normal;
  line-height: inherit;
  font-family: inherit;
  font-size: inherit;
}

.work-schedule-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #000 !important;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.schedule-table {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #000 !important;
}

.schedule-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 2px;
  font-size: 0.75rem;
  color: #000 !important;
}

.day-label {
  min-width: 45px;
  font-weight: 600;
  color: #333;
}

.time-text {
  color: #000;
  margin-left: 0.5rem;
}

.status-row {
  display: flex;
  align-items: center;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: #000 !important;
}

.status-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.5rem;
  flex-shrink: 0;
  display: inline-block;
}

.status-circle.open {
  background: #28a745;
}

.status-circle.closed {
  background: #dc3545;
}

.status-text {
  font-weight: 600;
  color: #000 !important;
  margin-right: 0.5rem;
}

.current-time {
  font-size: 0.7rem;
  color: #555;
}







/* ===== КНОПКИ БРЕНДА ===== */
/* Контейнер для центрирования и отступа вниз */
.category-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;     
  /* Оптимальный зазор для масштаба 1.10 */
  gap: 25px;               
  margin-top: 120px !important; 
  width: 100%;
  padding: 20px;
}

/* 2. Стили для КАТЕГОРИЙ техники (Тракторы, Мотоблоки и т.д.) */
.type-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Comfortaa", sans-serif;
  
  /* МАКСИМАЛЬНАЯ ЖИРНОСТЬ */
  font-weight: 1000 !important;   
  padding: 18px 35px !important; 
  font-size: 1.15rem !important;
  min-width: 220px;
  text-transform: uppercase;
  letter-spacing: 1.5px; 
  
  color: #198754;
  background-color: #ffffff;
  border: 2px solid #00b51e; /* Рамка чуть толще под жирный шрифт */
  border-radius: 10px;
  
  /* Увеличение только от центра */
  transform: scale(1);
  transform-origin: center;
  box-shadow: 0 8px 20px rgba(125, 255, 120, 0.3);
  transition: all 0.3s ease;
  cursor: pointer;
  margin: 5px; 
}

/* Наведение и АКТИВНОЕ состояние — масштаб 1.10 */
.type-btn:hover, 
.type-btn.active {
  transform: scale(1.10) !important; 
  background-color: #198754 !important;
  color: #ffffff !important;
  border-color: #198754 !important;
  box-shadow: 0 12px 25px rgba(125, 255, 120, 0.6);
  z-index: 2; 
}

/* 3. Стили для БРЕНДОВ (Shifeng, Lovol и т.д.) */
.category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 35px !important;
  font-family: "Comfortaa", sans-serif;
  font-weight: 1000 !important; /* Максимальная жирность */
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #ffffff;
  background-color: #057718;
  border: 3px solid #006a12;
  border-radius: 10px;
  cursor: pointer;

  transform: scale(1);
  transform-origin: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), 0 0 12px rgb(9, 255, 0);
  transition: all 0.3s ease;
  margin: 5px;
}

.category-btn:hover, 
.category-btn.active {
  transform: scale(1.10) !important; /* Привел к единому масштабу 1.10 */
  background-color: #198754 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35), 0 0 18px rgba(125, 255, 120, 0.35);
  z-index: 2;
}

/* 4. АДАПТИВНОСТЬ: Планшеты */
@media (max-width: 992px) {
  .category-buttons {
    gap: 20px;
  }
  .type-btn, .category-btn {
    min-width: 180px;
    font-size: 1rem !important;
  }
}

/* 5. АДАПТИВНОСТЬ: Мобильные */
@media (max-width: 576px) {
  .category-buttons {
    gap: 15px;
    flex-direction: column !important;
    margin-top: 60px !important;   
  }
  
  .type-btn {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0;
    font-weight: 900 !important; /* Чуть меньше жирность для узких экранов */
  }
  
  .type-btn:hover, .type-btn.active {
    transform: scale(1.03) !important; /* Минимальный масштаб для мобил */
  }

  /* Бренды на мобильных остаются в ряд, если их много */
  .brand-block .category-btn, 
  .brand-links .category-btn {
    width: auto !important;
    display: inline-flex !important;
    padding: 12px 20px !important;
  }
}





  
  /* Бренды на мобильных остаются как были (не в столбик) */
  .brand-block .category-btn, 
  .brand-links .category-btn {
    width: auto !important;
    display: inline-flex !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }






/* Карточки категорий */
.category-image-wrapper {
  position: relative;
  overflow: hidden;
  background-color: transparent;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Изначально приподнята */
  transition: all 0.4s ease;
  aspect-ratio: 1 / 1; /* Делает карточки квадратными */
}
/* Текст поверх картинки */
.category-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6); /* Полупрозрачный фон для текста */
  color: rgb(244, 248, 6);
  text-align: center;
  padding: 10px;
  font-family: "Arial Black", sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
}
/* Эффект при наведении на всю карточку */
.category-card:hover .category-image-wrapper {
  transform: scale(1.05); /* Увеличение всей карточки */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Усиление тени */
  z-index: 10;
}
.category-card:hover .category-img {
  transform: scale(1.1); /* Дополнительное увеличение самой картинки внутри */
}
.category-card:hover .category-overlay {
  background: rgba(241, 196, 15, 0.9); /* Желтый фон при наведении */
  color: rgb(0, 12, 13);
}
.category-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Создаем квадратный контейнер */
  /* ИЗМЕНЕНИЕ ЗДЕСЬ: */
  object-fit: contain; /* Картинка уменьшается, чтобы вписаться целиком */
  background-color: transparent; /* Добавляем светлый фон, если картинка не на весь 
квадрат */
  padding: 10px; 
  border-radius: 15px;
  transition: transform 0.3s ease;

}
/* Кнопки каталога */
.catalog-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 34px;
  font-family: "Baloo 2", cursive;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 2px;
  text-transform: uppercase;

  color: #057718;
  background: linear-gradient(135deg, #f4ffe9, #dfffd6);
  border: 2px solid #06dd29;
  border-radius: 50px;

  /* Лёгкий подъём и ореол */
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15),
              0 0 10px rgba(6, 221, 41, 0.18);

  /* Поднять выше */
  margin-top: 10px; /* уменьшаем для подъёма */
  text-align: center;
}

/* Адаптивность для мобильных */
@media (max-width: 576px) {
  .catalog-title {
    font-size: 1rem;
    padding: 12px 20px;
    margin-top: 5px;
  }
}



/* 1. Общий контейнер (описание и контейнер характеристик) */
/* 1. Загальний контейнер */
.product-description, 
.product-specs-container {
  /* Возвращаем широкое состояние */
  width: 100% !important;
  max-width: 680px !important;
  margin: 1.5rem auto !important;
  padding: 1.5rem 1.8rem !important;
  background: linear-gradient(135deg, rgba(248,249,250,0.95), rgba(236,254,194,0.85)) !important;
  box-sizing: border-box !important;
  
  /* Границы */
  border-radius: 20px !important;
  border-top: 2px solid #ffd103 !important;
  border-bottom: 2px solid #ffd103 !important;
  border-left: 3px solid #00df25 !important;
  border-right: 3px solid #00df25 !important;

  /* Маска затухания */
  -webkit-mask-image: linear-gradient(to bottom, 
    transparent 0%, 
    black 10%, 
    black 90%, 
    transparent 100%
  );
  mask-image: linear-gradient(to bottom, 
    transparent 0%, 
    black 10%, 
    black 90%, 
    transparent 100%
  );

  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  color: #2d5016 !important;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
  text-align: left !important;
  
  /* Убираем внутренний скролл, как договорились */
  overflow: visible !important; 
}

/* 2. Список характеристик */
/* 1. Общие настройки списка */
/* 1. КОНТЕЙНЕР СПИСКА */
/* 1. КОНТЕЙНЕР СПИСКА */
#productModal .product-specs {
    list-style: none !important;
    padding: 0 !important;
    margin: 1.5rem 0 !important;
    display: block !important;
    width: 100% !important;
}

/* 2. ЗАГОЛОВОК (header) - По центру с фиксированной линией */
#productModal .product-specs li.header {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    font-weight: 900 !important;
    color: #2c5a1a !important;
    text-transform: uppercase !important;
    font-size: 1.1rem !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    padding: 0 0 10px 0 !important;
    position: relative !important;
}

/* ФИКСИРОВАННАЯ ЛИНИЯ под заголовком */
#productModal .product-specs li.header::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 650px !important; 
    height: 3px !important;
    background-color: #73ff27 !important;
}

/* Убираем точку у заголовка */
#productModal .product-specs li.header::before {
    content: none !important;
}

/* 3. ОБЫЧНЫЕ СТРОКИ (normal) - Смещение вправо на 1 см */
#productModal .product-specs li.normal {
    display: block !important;
    position: relative !important;
    padding-left: 55px !important; 
    margin: 10px 0 !important;
    color: #3e6b1f !important;
    font-size: 1rem !important;
    text-align: left !important;
    line-height: 1.4 !important; 
}

/* 4. ТОЧКИ В НАЧАЛЕ СТРОКИ (Фикс выравнивания через translateY) */
/* 4. ТОЧКИ В НАЧАЛЕ СТРОКИ (Идеальное выравнивание по первой строке) */
#productModal .product-specs li.normal::before {
    content: "•" !important;
    position: absolute !important;
    left: 38px !important; 
    color: #73ff27 !important;
    font-weight: bold !important;
    font-size: 1.8rem !important; /* Сделали чуть крупнее для наглядности */
    
    /* ФИКС ВЫРАВНИВАНИЯ */
    top: 0 !important;             /* Прижимаем к самому верху первой строки */
    margin-top: -6px !important;    /* ПОДНИМАЕМ ВЫШЕ НУЛЯ: подберите от -4px до -8px */
    
    line-height: 1 !important;
    display: inline-block !important;
}


/* --- ПЛАНШЕТЫ (ширина до 1024px) --- */
@media (max-width: 1024px) {
    #productModal .product-specs li.header::after {
        width: 400px !important; 
    }
    #productModal .product-specs li.normal {
        padding-left: 50px !important;
    }
    #productModal .product-specs li.normal::before {
        left: 32px !important;
    }
}

/* --- СМАРТФОНЫ (ширина до 480px) --- */
@media (max-width: 480px) {
    #productModal .modal-body {
        padding: 10px !important;
    }
    #productModal .product-specs li.header::after {
        width: 85% !important; /* Чтобы линия не вылезала за края экрана */
        height: 2px !important;
    }
    #productModal .product-specs li.header {
        font-size: 1rem !important;
    }
    #productModal .product-specs li.normal {
        padding-left: 35px !important; 
        font-size: 0.95rem !important;
    }
   #productModal .product-specs li.normal::before {
        left: 15px !important; 
        font-size: 1.5rem !important;
        top: 0 !important;
        
        /* БЫЛО -4px, ставим меньше, чтобы точка опустилась ниже */
        margin-top: -1px !important; 
        
        line-height: 1 !important;
        display: inline-block !important;
    }
}

/* --- МАЛЕНЬКИЕ ТЕЛЕФОНЫ (ширина до 360px) --- */
@media (max-width: 360px) {
    #productModal .product-specs li.normal {
        padding-left: 28px !important;
    }
    #productModal .product-specs li.normal::before {
        left: 10px !important;
    }
    #productModal .product-specs li.header::after {
        width: 130px !important;
    }
}







/* Бренды */
.brand-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 16px;
  white-space: nowrap;
  vertical-align: top;
  font-family: "Comfortaa", sans-serif;
  font-weight: 600;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #057718;
  border: 2.5px solid #1ff543;
  border-radius: 25px;
  background: #d5ffbe;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.247);
  line-height: 1;
  transition: all 0.25s ease;
  margin: 0 20px 1px 1px;
}
.brand-link:hover {
  transform: scale(1.1); /* Подъем при наведении */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.329);
  background-color: #81ed75;
  color: #03480d !important;
}
/* Активная кнопка бренда */
.brand-link.active {
  background-color: #83ff75;       /* насыщенный зеленый фон */
  color: #0f9500;                  /* белый текст для контраста */
  border-color: #00ff55;           /* яркая рамка */
  box-shadow: 0 12px 30px rgba(6, 210, 40, 0.5); /* усиленная тень */
  transform: scale(1.12);          /* немного увеличиваем */
}

/* При наведении на активную кнопку — легкий эффект */
.brand-link.active:hover {
  background-color: #07e62c;
  color: #fff;
  box-shadow: 0 15px 35px rgba(6, 210, 40, 0.6);
  transform: scale(1.15);
}
@media (max-width: 576px) {
  /* Обертка, в которой лежат кнопки брендов */
  .category-buttons.d-flex, 
  .brands-logos-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr; /* Ровно 2 колонки */
    gap: 10px;
    padding: 10px;
  }

  .brand-link {
    margin: 0 !important; /* Убираем лишние отступы для сетки */
    font-size: 0.85rem;    /* Чуть уменьшил, чтобы длинные названия влезали в 2 ряда */
    letter-spacing: 1px;   /* Уменьшил разрядку для мобилок */
    height: 45px;          /* Чуть компактнее по высоте */
    width: 100%;           /* Занимает всю ячейку сетки */
    white-space: normal;   /* Позволяет тексту переноситься, если слово очень длинное */
    text-align: center;
  }
}
/* Базовая структура (твоя идеальная) */
.brand-container {
  width: 100%;
  max-width: 90vw;
  margin: 0 auto;
  padding: 20px 12px;
}
.brand-container .col-6 a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.brand-container .col-6 a:hover {
  transform: scale(1.10); /* +5% от центра */
}


.brand-row {
  display: grid;                           /* ✅ Grid вместо flex */
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));  /* ✅ Равномерно */
  gap: 1px;                               /* ✅ ЕДИНЫЙ интервал 10px */
  justify-content: center;
  padding: 0 !important;
}

.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  padding: 4px;                            /* ✅ Было 5px → 4px */
  box-sizing: border-box;
  /* ✅ Убираем лишние hover-эффекты контейнера */
}

.brand-item img {
  height: 100px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;                          /* ✅ inline-block → block */
  transition: transform 0.3s ease, filter 0.3s ease;
}

.brand-item:hover img {
  transform: scale(1.05);
}

.brand-item.active img {
  transform: scale(1.1);
  filter: brightness(1.2);
  outline: 2px solid #06d228;
  border-radius: 8px;
}

/* ✅ Адаптивность */
@media (max-width: 768px) {
  .brand-row {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  /* Меньше на мобиле */
    gap: 8px;                                                     /* Компактнее */
  }
  .brand-container {
    padding: 15px 8px;                                           /* Еще меньше */
  }
}

@media (max-width: 480px) {
  .brand-row {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));   /* Максимально компактно */
    gap: 6px;
  }
}




.brand-separator {
  border: 0;
  height: 2px;
  background: linear-gradient(to right, transparent, #057718, transparent);
  margin: 60px 0;
  opacity: 0.3;
}

.brand-block .brand-title {
  font-family: "Nunito", cursive;
  color: #2bc006; /* зелёный */
  font-weight: 800;
  font-size: 2rem;
  text-transform: uppercase;
  margin-top: 50;
  margin-bottom: 20px;
  text-align: center;
  position: relative; /* для ::after */
}

/* Тонкая полоска под заголовком */
.brand-block .brand-title::after {
  content: "";
  display: block;
  width: 100%;         /* длина линии, можно подстраивать */
  max-width: 90vw;
  height: 2px;          /* толщина линии */
  margin: 10px auto 0;  /* сверху отступ 10px, центрируем по горизонтали */
  border-radius: 2px;   /* скругление концов */
  background: linear-gradient(to left, rgba(255,255,255,0.8), #2bc006, rgba(255,255,255,0.8));
}

#section-tractors {
  padding-top: 60px; /* расстояние сверху для десктопа */
}

/* Планшеты */
@media (max-width: 992px) {
  #section-tractors {
    padding-top: 40px;
  }
}

/* Мобильные */
@media (max-width: 576px) {
  #section-tractors {
    padding-top: 30px;
  }
}
.brand-card {
  display: none;
}
#shifeng,
#shifeng + .row { /* следующий блок row с карточками */
  display: none;
}
/* Также добавьте это для якорей брендов, чтобы они не заезжали под меню */
[id] {
  scroll-margin-top: 100px;
}
/* Главные кнопки навигации */
.main-nav-btn {
  display: inline-block;
  padding: 10px 15px;
  margin: 10px 8px;
  font-family: 'Nurito', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  text-transform: uppercase;
  text-decoration: none !important;
  color: #057718 !important; /* Цвет текста */
  /* Дизайн: Белый глянец с цветной рамкой */
  background: #edff88;
  border: 3px solid #06dd29;
  border-radius: 15px; /* Квадратные скругленные углы для отличия от брендов */
  /* Левитация */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.main-nav-btn:hover {
  transform: scale(1.08); /* Увеличение из центра */
  background: #057718;
  color: #ffffff !important;
  box-shadow: 0 15px 30px rgba(5, 119, 24, 0.3);
}
.main-nav-btn.active {
  background: #06dd29;
  color: #fff !important;
  border-color: #06dd29;
  box-shadow: 0 10px 25px rgba(6, 210, 40, 0.5);
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* 1. ОСНОВНАЯ КАРТОЧКА (База + Переопределение Bootstrap) */
/* 1. ОСНОВНАЯ КАРТОЧКА (Десктоп) */
div.product-card.product-card {
  background: #ecfec2 !important;
  border-radius: 25px !important;
  padding: 12px !important;
  border: 2px solid rgb(112, 255, 60) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: 280px !important;
  height: 440px !important; /* Фиксированная высота только для десктопа */
  box-sizing: border-box !important;
  transition: all 0.2s !important;
  position: relative !important;
  overflow: hidden;
}

div.product-card.product-card:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2) !important;
  border-color: #00b81f !important;
  z-index: 5 !important;
}

/* 2. ИЗОБРАЖЕНИЕ (Рамка вокруг фото) */
div.product-card.product-card .img-wrapper {
  width: 85% !important;
  margin: 15px auto 0 !important;
  aspect-ratio: 4/3 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 3px solid rgb(43, 255, 0) !important; /* Желтая по умолчанию */
  border-radius: 20px !important;
  background: #fff !important;
  transition: border-color 0.2s ease !important;
}

/* 🔥 ТОЛЬКО hover НА РАМКУ ФОТО */
div.product-card.product-card .img-wrapper:hover {
  border-color: #fff203 !important; /* Яркий желтый */
}

div.product-card.product-card .img-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 3. ТЕКСТ (Общий для всех) */
div.product-card.product-card h5, 
div.product-card.product-card .product-title {
  margin: 10px 0 0 0 !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  color: #2d5016 !important;
  height: 2.5rem; /* Ограничение высоты названия */
  overflow: hidden;
}

div.product-card.product-card .product-short.text-success {
  display: block !important;
  margin: 2px auto !important; 
  font-weight: 600 !important;
  text-align: center !important;
  white-space: pre-line !important; 
  overflow: hidden !important;
  height: 3.75em !important; 
  line-height: 1.25em !important;
  font-size: 0.85rem !important;
}

/* 4. ЦЕНА И КНОПКА (Десктоп - абсолюты) */
div.product-card.product-card .product-price {
  position: absolute !important;
  bottom: 65px !important;
  left: 0; right: 0;
  font-weight: 700 !important;
  text-align: center !important;
  color: #2d5016 !important;
}

div.product-card.product-card .product-price::before {
  content: "" !important;
  position: absolute !important;
  top: -8px !important;
  left: 15%; width: 70%; height: 2px !important;
  background: linear-gradient(to right, transparent, #35f500, transparent) !important;
  transition: background 0.2s ease !important;
}

div.product-card.product-card .btn.open-product-modal {
  position: absolute !important;
  bottom: 15px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 70% !important;
  height: 36px !important;
  border-radius: 20px !important;
  background: linear-gradient(45deg, #06d228, #00ff41) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

/* 🔥 ТОЛЬКО hover НА КНОПКУ меняет цвет кнопки */
div.product-card.product-card .btn.open-product-modal:hover {
  background: linear-gradient(45deg, #e9f502, #e2cd11) !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4) !important;
}

/* АДАПТИВНОСТЬ (Мобильные) */
@media (max-width: 480px) {
  div.product-card.product-card {
    max-width: 100% !important;
    height: auto !important;      
    padding: 10px !important;     
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* ФОТО: Изменено для заполнения рамки */
  div.product-card.product-card .img-wrapper {
    width: 90% !important;        
    border: 3px solid rgb(112, 255, 60) !important; 
    border-radius: 20px !important; 
    margin: 0 auto 4px auto !important; 
    aspect-ratio: 4/3 !important;
    background: #fff !important;
    /* Добавлено, чтобы фото не вылетало за скругленные углы */
    overflow: hidden !important; 
    position: relative !important;
  }

  div.product-card.product-card .img-wrapper img {
    /* ИЗМЕНЕНО: cover убирает белые края, растягивая фото на всю рамку 4/3 */
    object-fit: cover !important; 
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* НАЗВАНИЕ */
  div.product-card.product-card h5, 
  div.product-card.product-card .product-title {
    margin-top: 0 !important;
    margin-bottom: 2px !important;
    font-size: 1rem !important;
  }

  /* ОПИСАНИЕ */
  div.product-card.product-card .product-short.text-success {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 0.85rem !important;
    line-height: 1.25em !important;
    height: 3.75em !important;
    display: block !important;
    white-space: pre-line !important;
  }

  /* Цена и кнопка */
  div.product-card.product-card .product-price {
    position: relative !important; 
    bottom: 0 !important;
    margin-top: 10px !important;   
    width: 100% !important;
  }

  div.product-card.product-card .btn.open-product-modal {
    position: relative !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 8px auto 0 auto !important;
    width: 90% !important;
    height: 38px !important;
  }

  div.product-card.product-card .product-price::before {
    left: 10% !important;
    width: 80% !important;
  }
}

#productModal .modal-body div[style*="position: relative"] {
    line-height: 0; /* Убирает возможные отступы снизу */
}
/* 6. ДЛЯ ПЛАНШЕТОВ И ДЕСКТОПОВ (Ограничение текста) */
@media (min-width: 768px) {
  div.product-card.product-card .product-short.text-success {
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    height: 3.9em !important;
    line-height: 1.3em !important;
    margin: 5px auto !important;
    white-space: pre-line !important;
  }
}





/* Отключение ховеров на тач-скринах (2026 стандарт) */
@media (hover: none) {
  div.product-card.product-card:hover { 
    transform: none !important; 
    box-shadow: none !important; 
  }
  div.product-card.product-card:active { 
    transform: scale(0.98) !important; /* Эффект нажатия (чуть вглубь) лучше, чем увеличение */
  }
}




/* Стилизация самой модалки */
.modal-content {
  border-radius: 30px !important;                   /* Больше скругление */
  border: 2px solid #00b01d !important;   /* Толще зелёная рамка */
  background: linear-gradient(135deg, #bbfc92 0%, #fff674 50%, #ecfec2 100%);
  box-shadow: 0 25px 60px rgba(0,176,29,0.4);
  transform: translateY(-20px);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}
/* При появлении модалки — поднимаем эффект */
.modal.show .modal-content {
  transform: translateY(0);
  box-shadow: 0 35px 80px rgba(0,176,29,0.6);
}
/* Для мобильных: только центрируем диалог, не трогая основной контейнер модалки */
@media (max-width: 767px) {
  /* Находим диалоговое окно и выравниваем его */
  .modal-dialog {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important; /* Центрирование с учетом системных отступов */
    margin: 1.75rem auto !important;
    pointer-events: none; /* Пропускает клики сквозь пустую область */
  }

  /* Возвращаем кликабельность самому контенту */
  .modal-content {
    pointer-events: auto !important; 
    width: 100% !important;
    transform: none !important; /* Убираем лишние сдвиги */
  }

  /* Скрываем лишние элементы, если они мешают (та самая полоса) */
  .modal-header .main-photo-label { 
    display: none !important; 
  }
}

/* Миниатюры внутри модалки */
#productModalThumbnails {
  /* Внешние габариты и центрирование в модалке */
  width: 90% !important;
  max-width: 750px;
  margin: 0 auto 2rem !important;
  
  /* Высота контейнера увеличена (18px), боковые отступы внутри добавлены (20px) */
  padding: 18px 20px !important; 
  
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 15px !important; /* Расстояние между миниатюрами */
  
  /* Настройки скролла */
  overflow-x: auto !important;
  overflow-y: visible !important; 
  scrollbar-width: thin;
  scrollbar-color: #00b01d #f8f9fa;
  scroll-snap-type: x proximity;
  
  /* Фон и скругление */
  border-radius: 15px;
  background: rgba(248,249,250,0.8);
  align-items: center;
  box-sizing: border-box !important;
}

/* Удаляем лишние зоны, так как теперь работаем через padding контейнера */
#productModalThumbnails::before,
#productModalThumbnails::after {
  content: none !important;
}

/* Миниатюры */
#productModalThumbnails img {
  width: 110px !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important; /* Формат как у главного фото */
  object-fit: cover !important;
  padding: 0 !important;
  border: 3px solid #ffd103;
  border-radius: 12px;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  scroll-snap-align: center;
  position: relative; 
}

/* Состояние при наведении и активная миниатюра */
#productModalThumbnails img:hover,
#productModalThumbnails img.active-thumb {
  border-color: #17e500 !important;
  box-shadow: 0 8px 25px rgba(23,229,0,0.6);
  transform: scale(1.1) !important; /* Масштаб, чтобы не вылезать за границы высокого контейнера */
  z-index: 10 !important; 
}

/* Скроллбар (Chrome, Safari, Edge) */
#productModalThumbnails::-webkit-scrollbar {
  height: 8px;
}
#productModalThumbnails::-webkit-scrollbar-track {
  background: #f8f9fa;
  border-radius: 4px;
}
#productModalThumbnails::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #00b01d, #3bff5c);
  border-radius: 4px;
}

/* МЕДИА-ЗАПРОСЫ (Адаптивность 2026) */
@media (max-width: 768px) {
  #productModalThumbnails {
    width: 92% !important; 
    padding: 12px 15px !important;
  }
}

@media (max-width: 480px) {
  #productModalThumbnails {
    width: 94% !important; 
    /* Увеличенная высота для мобильных, чтобы миниатюры дышали */
    padding: 10px 12px !important;   
    gap: 10px !important;           
    min-height: 95px !important;    
  }

  #productModalThumbnails img {
    width: 85px !important;         
    border-width: 2px !important;
    border-radius: 8px !important;  
  }

  #productModalThumbnails img.active-thumb {
    transform: scale(1.05) !important; 
  }
}





.modal-header {
  background: linear-gradient(180deg, #f8f9fa, #ecfec2) !important;
  border-bottom: 2px solid #3bff5c !important;
  border-radius: 0 0 0 0 !important;
  padding: 1.8rem 2.5rem 1.8rem 2rem !important; /* 🔥 БОЛЬШЕ места справа */
  position: relative !important;
  min-height: 4.8rem !important;
}

.modal-title {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #2d5016, #00b01d) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  text-align: center !important;
  margin: 0 !important;
  max-width: 70% !important;
  z-index: 1 !important;
}

/* 🔥 КНОПКА ПОДЕЛИТЬСЯ */
#productShareBtn {
  position: absolute !important;
  top: 50% !important;
  right: 3rem !important;
  transform: translateY(-50%) !important;
  z-index: 3 !important;
}

/* 🔥 КРЕСТИК — Bootstrap стиль + позиция */
.btn-close {
  position: absolute !important;
  top: 60% !important;          /* Еще ниже */
  right: 1.2rem !important;
  transform: translateY(-50%) !important;
  z-index: 4 !important;
  opacity: 0.5 !important;
  transition: opacity 0.15s ease !important;
}

/* ✅ КВАДРАТИК при hover */
.btn-close:hover {
  opacity: 1 !important;
  background-color: rgba(0,0,0,.1) !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075) !important;
}

/* Мобильные */
@media (max-width: 480px) {
  .modal-header {
    padding: 1rem 2rem !important;
    min-height: 4.2rem !important;
  }
  .modal-title {
    font-size: 1.3rem !important;
    max-width: 75% !important;
  }
  #productShareBtn {
    right: 2.3rem !important;
  }
  .btn-close {
    right: 1rem !important;
  }
}





/* ✅ ЕДИНЫЙ #modalImg — все экраны */
#modalImg {
  /* Базовые настройки пропорций */
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  
  /* Заполнение рамки без искажений */
  object-fit: cover !important;
  object-position: center !important;

  /* Центрирование и декор */
  display: block !important;
  margin: 15px auto 1.5rem !important; 
  border-radius: 20px !important;
  border: 3px solid #ffd103 !important;
  box-shadow: 0 15px 40px rgba(255, 209, 3, 0.3) !important;
  
  /* Эффекты и анимация */
  cursor: zoom-in !important;
  transform: scale(1.02) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ховер-эффект */
#modalImg:hover {
  border-color: #17e500 !important;
  transform: scale(1.05) !important;
  box-shadow: 0 20px 50px rgba(23, 229, 0, 0.5) !important;
}

/* ✅ ДЕСКТОП И ПЛАНШЕТ (769px+) */
@media (min-width: 769px) {
  #modalImg { 
    max-width: 340px !important; /* Уменьшенный размер для ПК */
    margin: 20px auto 2.5rem !important;
    position: static !important;
  }
}

/* ✅ МОБАЙЛ СРЕДНИЙ (481-768px) */
/* 📱 481px-768px (планшеты) */
@media (min-width: 481px) and (max-width: 768px) {
  #modalImg { 
    width: 85% !important; 
    max-width: 300px !important;
    margin: 10px auto !important; /* 🔥 Приподняли */
  }
}

/* 📱 Маленькие телефоны (до 480px) */
@media (max-width: 480px) {
  #productModal.show .modal-dialog {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
    width: 94vw !important;
    max-height: 88vh !important;
  }
  
  #productModal .modal-body {
    padding-top: 1.2rem !important; /* 🔥 Меньше отступ */
    padding-bottom: 1.5rem !important;
  }
  
  #modalImg {
    width: 280px !important;
    height: 238px !important;
    max-width: 280px !important;
    margin-top: 8px !important;     /* 🔥 ОЧЕНЬ БЛИЗКО К ЗАГОЛОВКУ */
    margin-bottom: 1rem !important;
  }
}

/* 📱 Все мобильные общие */
@media (max-width: 768px) {
  #modalImg {
    margin-top: 12px !important;   /* 🔥 Приподнято */
  }
}





/* ✅ Миниатюры — улучшенный скролл */
#productModalThumbnails {
  scrollbar-width: thin !important;
  scrollbar-color: #ffd103 transparent !important;
}

#productModalThumbnails::-webkit-scrollbar {
  height: 4px !important;
}

#productModalThumbnails::-webkit-scrollbar-track {
  background: #f8f9fa !important;
}

#productModalThumbnails::-webkit-scrollbar-thumb {
  background: #ffd103 !important;
  border-radius: 2px !important;
}











/* Бренды */
.brand-block {
  display: none; /* Скрываем все бренды при загрузке */
}

/* Иконки мессенджеров */
/* ====================== Контакты ====================== */
.contacts address {
  display: flex;
  flex-direction: column; /* строки сверху вниз */
  align-items: center;    /* центр по горизонтали */
  text-align: center;     /* текст внутри ссылок */
  font-style: normal;     /* убрать курсив по умолчанию */
  line-height: 1.6;
  color: #222;
}
.contact-row {
  display: flex;
  align-items: center;
  justify-content: center; /* выравнивание содержимого по центру */
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.contact-row img.icon-contact {
  width: 20px;
  height: 20px;
  margin-right: 8px;
  vertical-align: middle;
}
.contact-link {
  color: #222;
  text-decoration: none;
  font-weight: 500;
  margin-right: 10px;
}
.contact-link:hover {
  color: #007bff; /* синий при наведении */
}
/* ====================== Мессенджеры ====================== */
.messenger-link {
  margin-left: 5px;
}
.icon-messenger {
  width: 25px;
  height: 25px;
  vertical-align: middle;
  cursor: pointer;
  transition: transform 0.3s;
}
.icon-messenger:hover {
  transform: scale(1.4);
}
/* ====================== Соцсети ====================== */
.social-icons {
  margin-top: 8px;
}
.icon-social {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  vertical-align: middle;
  transition: transform 0.3s;
}
.icon-social:hover {
  transform: scale(1.2);
}
/* ====================== Карта ====================== */
.map-container {
  margin-top: 20px;
  text-align: center;
}
.map-container .map-preview {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  transition: transform 0.3s;
  cursor: pointer;
}
.map-container .map-preview:hover {
  transform: scale(1.05);
}
.d-flex.gap-2 {
  font-size: 0.9rem;
  color: #665f42; /* меняем цвет текста и цифр */
  font-weight: 500;
}
.status-bar {
  font-size: 0.9rem;            /* размер текста */
  color: #5f5c4e;               /* любой цвет для всего блока, например золотой */
  align-items: center;
}
.d-flex.gap-2 b {
  font-size: 0.9rem;
  font-weight: 400;
}
#weather img {
  margin-left: 5px;             /* отступ иконки погоды */
}
.modal.fade .modal-dialog {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.modal-backdrop.fade {
  transition: none !important;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
#productPreview,
.modal-gallery .modal-body {
  padding: 30px 25px 25px !important;  /* ✅ 30px сверху */
  max-height: 80vh;
  overflow-y: auto;
}

#productPreview h5 {
  margin-top: 0 !important;
  margin-bottom: 15px;
}

#productPreview img {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Отступ от верха экрана для Fancybox при клике на фото карточки */
.fancybox__container {
  padding-top: 50px !important;     /* ✅ Основной отступ сверху */
  padding-left: 20px !important;
  padding-right: 20px !important;
   z-index: 2000 !important;
}

.fancybox__content {
  margin-top: 20px !important;      /* ✅ Дополнительный отступ контента */
  border-radius: 12px !important;
}

/* Изображение внутри галереи */
.fancybox__image {
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
}
/* Анимация для самой кнопки "Поделиться" */
#productShareBtn {
  margin-right: 15px;
  transition: transform 0.2s ease-in-out !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center; /* Гарантирует рост из центра */
}

#productShareBtn:hover {
  /* Только увеличение в 1.07 раза */
  transform: scale(1.30);
}

#productShareBtn:hover img {
  filter: brightness(1.25); /* Легкий блеск при наведении */
}

/* Обновим стили меню (для иконок мессенджеров), чтобы всё было в едином стиле */
.share-menu img:hover {
  transform: scale(1.07); /* Тоже 1.07 для единообразия */
  filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* ==== Меню мессенджеров ==== */
.share-menu {
  display: none; /* JS переключит на flex */
  position: absolute;
  top: 50px;
  right: 10px;
  /* Убираем фон, границы и тень */
  background: transparent; 
  border: none;
  box-shadow: none;
  
  padding: 5px;
  gap: 15px; /* Увеличиваем расстояние, так как без рамок иконки могут сливаться */
  align-items: center;
  z-index: 1060;
}

.share-link {
  display: flex !important;
  line-height: 0 !important;
  text-decoration: none;
  /* Можно добавить небольшую тень самим иконкам для читаемости на любом фоне */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); 
}

.share-menu img {
  display: block;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s;
}

.share-menu img:hover {
  transform: scale(1.2);
  filter: brightness(1.2) drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}


/* ===== БЛОК ГРАФИКА РАБОТЫ ===== */
/* Общий контейнер */
#workScheduleBlock {
  margin-top: 1rem;
  text-align: center;
  font-size: 1rem;
  line-height: 1.2;
}

.workScheduleDay, .workScheduleTitle {
  color: #000;
}

#workStatus {
  display: flex;
  /* Центрирование по вертикали всех детей */
  align-items: center; 
  /* Центрирование по горизонтали */
  justify-content: center; 
  gap: 0.5rem;
  font-weight: 600;
  font-size: 1.0rem;
  margin-top: 0.5rem;
  /* Важно: обнуляем line-height, чтобы он не создавал лишнее пространство сверху/снизу */
  line-height: 1; 
}

.status-dot {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  /* Убираем возможные смещения */
  display: inline-block;
  flex-shrink: 0;
}

.status-text {
  /* Убеждаемся, что текст не имеет своих отступов */
  margin: 0;
  display: inline-block;
}

.status-time {
  font-weight: normal;
  font-size: 1.0rem;
  color: #313131;
  /* Убеждаемся, что время тоже в линии */
  display: inline-block;
}

/* ЦВЕТА С ПРИОРИТЕТОМ */
#workStatus.opened .status-text {
  color: #28a745 !important;
}
#workStatus.opened .status-dot {
  background-color: #28a745;
}

#workStatus.closed .status-text {
  color: #ff0019 !important;
}
#workStatus.closed .status-dot {
  background-color: #ff0019;
}
/* Современный бейдж SALE 2026 */
.badge-sale {
  position: absolute !important;
  top: 6px !important;           /* Прижали ближе к углу */
  left: 6px !important;
  background: linear-gradient(135deg, #ff0f7b 0%, #f8931f 100%) !important;
  color: #fff !important;
  padding: 1px 7px !important;    /* Минимальные отступы */
  font-size: 0.55rem !important;  /* Микро-шрифт */
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  border-radius: 50px !important;
  z-index: 20 !important;
  box-shadow: 0 2px 8px rgba(255, 15, 123, 0.3) !important;
  pointer-events: none !important;
  animation: badge-pulse 2s infinite !important;
}

/* Эффект легкого пульсирования для привлечения внимания */
@keyframes badge-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@media (max-width: 480px) {
  .badge-sale {
    top: 5px !important;            /* Еще ближе к углу */
    left: 5px !important;
    padding: 1px 6px !important;    /* Минимальные отступы */
    font-size: 0.5rem !important;   /* Очень маленький шрифт для телефона */
    box-shadow: 0 2px 6px rgba(255, 15, 123, 0.2) !important;
    letter-spacing: 0.2px !important;
  }
}