@media (max-width: 470px) {
  #feedback-btn {
    display: none !important;
  }
}

#entrance-product-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
}

#entrance-product-modal:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

#products .product-group h3 {
  height: auto !important;
  min-height: auto !important;
}

#entrance-product-modal .product-detail-content {
  max-width: 1000px;
  width: 90%;
  /*padding: 30px;*/
  padding-top: 35px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
}

#entrance-product-modal .close {
  position: sticky;
  /* 1. Магия "умного магнита"! Крестик ведёт себя как обычная наклейка, но при скролле прилипает к верху белой области */
  top: 10px;
  /* 2. Отступ от верхнего края белой карточки (когда сработает "прилипание") */
  right: 10px;
  /* 3. Отступ от правого края */
  float: right;
  /* 4. 🔥 КЛЮЧЕВОЙ ТРЮК: прижимаем крестик к правому краю потока. Без этого sticky не будет "знать", к какому краю прилипать */
  margin-left: auto;
  /* 5. Дополнительная страховка: если float не сработает, margin-left: auto вытолкнет элемент вправо */
  z-index: 1001;
  /* 6. Поверх всего контента внутри белой карточки */
  background: #dc3545;
  /* 7. Фирменный красный фон */
  color: #ffffff;
  /* 8. Белый символ крестика */
  width: 30px;
  /* 9. Фиксированная ширина кружка */
  height: 30px;
  /* 10. Фиксированная высота кружка */
  border-radius: 50%;
  /* 11. Превращаем квадрат в идеальный круг */
  display: flex;
  /* 12. Включаем Flexbox... */
  /*align-items: center;*/
  /* 13. ...для центрирования крестика по вертикали... */
  justify-content: center;
  /* 14. ...и по горизонтали */
  font-weight: bold;
  /* 15. Жирный шрифт */
  font-size: 20px;
  /* 16. Размер символа */
  line-height: 25px;
  /* 17. Убираем лишние межстрочные интервалы */
  cursor: pointer;
  /* 18. Курсор-палец при наведении */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  /* 19. Лёгкая тень для объёма */
  padding: 0;
  /* 20. Убираем внутренние отступы */
  border: none;
  /* 21. Убираем рамки */
}

#entrance-product-modal .close:hover {
  background: #c82333;
  color: #ffffff;
}

.product-detail-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.product-main {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.product-images {
  flex: 1;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
}

.thumbnails-container {
  display: flex;
  flex-direction: column;
  /* 1. Вертикальный столбик */
  gap: 8px;
  /* 2. Расстояние между миниатюрами */
  width: 72px;
  /* 3. Фиксированная ширина колонки */
  flex-shrink: 0;
  /* 4. Запрещаем сжиматься */
}

.thumbnail-item {
  width: 60px;
  /* 5. Квадратная миниатюра */
  height: 60px;
  border: 2px solid #e0e0e0;
  /* 6. Серая рамка по умолчанию */
  border-radius: 6px;
  /* 7. Лёгкое скругление */
  overflow: hidden;
  /* 8. Обрезаем всё, что вылезает */
  cursor: pointer;
  position: relative;
  /* 9. Нужно для позиционирования "+N фото" */
  transition: border-color 0.2s ease;
  /* 10. Плавная смена цвета рамки */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  /* 11. Светло-серый фон */
}

.thumbnail-item:hover {
  border-color: #ac8a57;
  /* 12. Зелёная рамка при наведении */
}

.thumbnail-item.active {
  border-color: #ac8a57;
  /* 13. Зелёная рамка у активной миниатюры */
  border-width: 2px;
  /* 14. Толщина рамки */
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 15. Заполняем миниатюру без искажений */
}

/* 16. Стили для миниатюры "Ещё N фото" */
.thumbnail-item.more-photos {
  background: #333;
  /* 17. Тёмный фон */
  color: #fff;
  /* 18. Белый текст */
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}

.thumbnail-item.more-photos .more-photos-overlay {
  position: absolute;
  /* 19. Поверх картинки */
  inset: 0;
  /* 20. Растягиваем на всю миниатюру */
  background: rgba(0, 0, 0, 0.5);
  /* 21. Полупрозрачное затемнение */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .product-images {
    flex-direction: column;
    /* миниатюры идут сверху, главное фото снизу */
  }

  #products .size-item {
    gap: 0px;
  }

  #products .stock-quantity {
    margin-left: 0px;
  }

  .thumbnails-container {
    flex-direction: row;
    /* Миниатюры располагаются горизонтально */
    width: 100%;
    margin: 10px;
  }

  .thumbnail-item {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    /* Запрещаем миниатюрам сжиматься */
  }
}

.detail-image {
  max-width: 100%;
  max-height: 465px;
  object-fit: contain;
  cursor: pointer;
}

.placeholder-image-large {
  width: 100%;
  max-height: 500px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-weight: bold;
  font-size: 1.2rem;
  padding: 20px;
  text-align: center;
}

.product-info {
  flex: 1;
}

.detail-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: var(--text);
  margin: 10px 0;
}

/*#region Таблица размеров */
.detail-sizes-table {
  width: 100%;
  margin-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 1. Расстояние между карточками */
}

/* Убираем старый заголовок таблицы */
.detail-sizes-table .table-header {
  display: none;
  /* 2. Скрываем шапку таблицы — она не нужна в новом дизайне */
}

.table-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 3. Расстояние между строками-карточками */
}

/* Одна строка-карточка размера */
.table-row {
  /*display: grid;*/
  grid-template-columns: 1.5fr 0.8fr 1fr 1fr auto;
  /* 1. Добавляем колонку для артикула (0.8fr) */
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-size: 14px;
  min-width: 420px;
}
@media (max-width: 510px) {
  .table-row {
    min-width: 150px;
  }
}
/* Строка без наличия — серая рамка */
.table-row:has(.stock-cell.unavailable) {
  border-color: #e0e0e0;
  /* 14. Серая рамка */
  opacity: 0.85;
  /* 15. Чуть прозрачнее */
}

.table-row:has(.stock-cell.available):hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 16. Лёгкая тень при наведении */
  border-color: var(--green);
}

.table-row:has(.stock-cell.expected-delivery):hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  /* 16. Лёгкая тень при наведении */
  border-color: var(--expected-delivery);
}

/* Ячейки внутри строки */
.table-cell {
  padding: 0;
  /* 17. Убираем старые отступы */
  border: none;
  /* 18. Убираем старые границы */
  background: transparent;
  /* 19. Прозрачный фон */
}

/* Колонка размера */
.table-cell.size-cell {
  font-weight: 600;
  /* 20. Жирный шрифт для размера */
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  max-width: 65px;
}

/* Колонка цены */
.table-cell.price-cell {
  font-weight: 700;
  /* 21. Жирная цена */
  color: #333;
  font-size: 15px;
  white-space: nowrap;
}

/* Колонка артикула — скрываем (как на картинке) */
.table-cell.item-cell {
  display: block;
  /* 1. Показываем артикул */
  font-size: 12px;
  /* 2. Мелкий шрифт */
  color: #888;
  /* 3. Серый цвет */
  font-weight: 500;
  /* 4. Средний вес */
  max-width: 40px;
}

/* Колонка остатка */
.table-cell.stock-cell {
  font-weight: 600;
  font-size: 13px;
  text-align: left;
}

.table-cell.stock-cell.available {
  color: var(--green);
}

.table-cell.stock-cell.expected-delivery {
  color: #FF9800;
  /* 24. Оранжевый текст "Ожидается поступление" */
}

.table-cell.stock-cell.unavailable {
  color: #999;
  /* 25. Серый текст "Нет в наличии" */
}

/* Колонка действий (кнопки) */
.table-cell.actions-cell {
  text-align: right;
}

/* ============================================
🖥 КНОПКИ ВСЕГДА ВИДИМЫ (для всех устройств, включая планшеты)
============================================ */
#entrance-product-modal .detail-sizes-table .table-row .hover-actions {
  display: flex !important;
  opacity: 1 !important;
  /* Всегда видимы */
  pointer-events: auto !important;
  /* Всегда кликабельны */
  margin: 0 0 0 -45px;
  /* Отступ кнопок размеров справа */
  gap: 6px;
  justify-content: flex-end;
  transition: opacity 0.2s ease;
}

@media (max-width: 580px) {

  #products,
  #products.tile-view {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #products .product-group {
    min-height: 200px !important;
  }

  #products .image-container {
    height: 100px !important;
    min-height: 100px !important;
    flex-basis: 100px !important;
  }

  #products .product-image {
    height: 90px !important;
  }

  #products .product-group h3 {
    font-size: 11px !important;
    min-height: 40px !important;
    padding: 4px 6px !important;
  }

  #products .size-label {
    font-size: 10px !important;
  }

  #products .size-price {
    font-size: 11px !important;
  }

  #products .stock-status {
    font-size: 7px !important;
    padding: 3px 5px !important;
  }
}

/* Кнопки избранного и корзины */
.hover-actions .action-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hover-actions .action-btn:hover {
  border-color: #4CAF50;
  background: #f0f8f0;
}

.hover-actions .action-btn.add-to-cart-btn {
  background: #4CAF50;
  /* 27. Зелёная кнопка корзины */
  border-color: #4CAF50;
  color: #fff;
}

.hover-actions .action-btn.add-to-cart-btn:hover {
  background: #388E3C;
}

.hover-actions .action-btn.add-to-cart-btn.out-of-stock {
  background: #FF9800 !important;
  border-color: #FF9800 !important;
}
.hover-actions .action-btn.add-to-cart-btn.out-of-stock:hover {
  background: #a76400 !important; 
  border-color: #a76400 !important;
}

/*#endregion*/

/*#region Стили для блока характеристик (тёмный фон, две колонки) */
.product-specs {
  background: #2d2d2d;
  border-radius: 0 0 8px 8px;
  /* 1. Скругляем только нижние углы (верхние прилипают к краю) */
  padding: 28px 32px;
  margin-top: 20px;
  margin-left: -30px;
  /* 2. Выталкиваем влево на величину padding родителя */
  margin-right: -30px;
  /* 3. Выталкиваем вправо на величину padding родителя */
  margin-bottom: -30px;
  /* 4. Выталкиваем вниз, чтобы прилип к нижнему краю модалки */
  padding-bottom: 30px;
  /* 5. Возвращаем внутренний отступ снизу для красоты */
  width: calc(100% + 60px);
  /* 6. Компенсируем ширину: 100% + 30px слева + 30px справа */
  box-sizing: border-box;
  /* 7. Чтобы padding не увеличивал ширину сверх расчёта */
}

/* Убираем старый заголовок "Характеристики" — он не нужен */
.product-specs>h3 {
  display: none;
}

/* Сетка: две равные колонки */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Две колонки одинаковой ширины */
  gap: 0 48px;
  /* Горизонтальный зазор между колонками */
}

/* Одна колонка характеристик */
.spec-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Заголовок колонки (зелёный, uppercase) */
.spec-column-title {
  color: #ac8a57;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* Одна строка характеристики */
.spec-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  /* Тонкая разделительная линия */
}

.spec-item:last-child {
  border-bottom: none;
}

/* Название характеристики — светло-серый */
.spec-label {
  font-size: 13px;
  color: #999;
  /* Светло-серый цвет */
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 400;
}

/* Значение характеристики — белый жирный */
.spec-value {
  font-size: 14px;
  font-weight: 700;
  /* Жирный шрифт */
  color: #fff;
  /* Белый цвет */
  text-align: right;
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
}

/*#endregion */


/*#region Стили для статуса товаров вне наличия */
/* Для статусов в таблице размеров — разбивка на две строки */
.expected-delivery {
  white-space: normal !important;
  word-break: keep-all;
  display: inline-block;
  line-height: 1.3;
}

.expected-delivery span {
  display: block;
}

/* Уведомление о товарах под заказ (если понадобится) */
.out-of-stock-notice {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
  padding: 8px;
  margin-bottom: 10px;
  border-radius: 4px;
  font-size: 0.85rem;
}

/*#endregion Стили для статуса товаров вне наличия */

/* 1. Нацеливаемся строго на кнопки внутри модального окна */
/*#entrance-product-modal .hover-actions {
    /*opacity: 1 !important; /* 2. Принудительно делаем их видимыми (отменяем скрытость при отсутствии hover-эффекта) */
/*justify-content: center !important; /* 3. Центрируем кнопки внутри ячейки для красоты */
/*}*/

/*#region Стили для баннера */
/* ============================================
🖼️ БАННЕР ВХОДНЫХ ДВЕРЕЙ (Текст СЛЕВА, ширина как у шапки)
============================================ */
/* 1. Главный контейнер: ограничиваем ширину, как у .page-shell в redesign.css */
.entrance-hero {
  /*width: 100%;*/
  max-width: var(--page-width);
  margin: 0 auto 17px;
  height: 326px;
  position: relative;
  /* 2. Создаём "систему координат" (контекст наложения) для детей */
  overflow: hidden;
  border-radius: 12px;
  background: #ebe9e5;
  /* 3. Бежевая "заглушка". Теперь она будет ДНОМ нашего бутерброда */
  box-shadow: var(--shadow);
}

/* 2. Фоновая картинка: лежит на самом ниж слое */
.entrance-hero-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 1;
  /* 5. 🔥 ИСПРАВЛЕНИЕ: Ставим картинку ПЕРВЫМ слоем поверх бежевого фона (1 > 0) */
  border-radius: 15px;
}

/* 3. Градиент СЛЕВА: "прожектор", который светит слева и гаснет справа */
.entrance-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* 7. 🔥 ИСПРАВЛЕНИЕ: Градиент ложится ПОВЕРХ картинки (2 > 1), чтобы затемнить её для текста */
  background: linear-gradient(90deg,
      rgba(237, 232, 223, 0.97) 0%,
      rgba(237, 232, 223, 0.94) 25%,
      rgba(212, 197, 176, 0.50) 42%,
      rgba(212, 197, 176, 0.03) 61%,
      rgba(212, 197, 176, 0.00) 100%);
  pointer-events: none;
}

/* 4. Контейнер с текстом: прижат к ЛЕВОМУ краю */
.entrance-hero-content {
  position: relative;
  z-index: 3;
  /* 9. 🔥 НОВОЕ ПРАВИЛО: Текст всегда САМЫЙ ВЕРХНИЙ слой (3 > 2 > 1), чтобы он не перекрывался градиентом */
  width: 50%;
  height: 100%;
  padding: 34px 0 0 35px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

/* 5. Маленькая надпись сверху */
.entrance-hero-eyebrow {
  color: #8b7355;
  /* Тёмно-бежевый/коричневый цвет */
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.8px;
  /* Разреженные буквы для стиля */
  font-weight: 600;
  margin: 1px 0 16px;
}

/* 6. Главный заголовок */
.entrance-hero h1 {
  margin: 0;
  color: #3a3530;
  /* Тёмно-коричневый цвет для контраста с бежевым */
  font-size: clamp(31px, 3vw, 37px);
  /* Адаптивный размер: не меньше 31px, не больше 37px */
  line-height: 1.06;
  /* Плотный межстрочный интервал */
  letter-spacing: -0.9px;
  /* Чуть сжатые буквы для современного вида */
  font-weight: 750;
  /* Жирный шрифт */
}

/* 7. Подзаголовок */
.entrance-hero-subtitle {
  margin: 13px 0 0;
  color: #5a5248;
  /* Средне-коричневый цвет */
  font-size: 18px;
  font-weight: 500;
}

/* 8. Блок с иконками: выстраиваем в ряд */
.entrance-hero-features {
  display: flex;
  gap: 24px;
  /* Расстояние между иконками */
  margin-top: 24px;
}

/* 9. Одна иконка с подписью */
.entrance-feature {
  display: flex;
  flex-direction: column;
  /* Иконка сверху, текст снизу */
  align-items: center;
  /* Центрируем иконку относительно её текста */
  gap: 8px;
}

/* 10. SVG-иконка */
.entrance-feature-icon {
  width: 32px;
  height: 32px;
  color: #8b7355;
  /* Цвет линий иконки (тёмно-бежевый) */
  stroke-width: 1.5;
}

/* 11. Текст под иконкой */
.entrance-feature-text {
  font-size: 11px;
  font-weight: 600;
  color: #5a5248;
  line-height: 1.3;
  text-align: center;
  /* Текст под иконкой всегда по центру самой иконки */
}

/* 12. Дата обновления */
.entrance-hero-date {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6b6358;
  font-size: 13px;
  font-weight: 500;
}

.entrance-hero-date img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

/* ============================================
📱 АДАПТИВНОСТЬ БАННЕРА (чтобы не ломался на телефонах)
============================================ */
/* Планшеты */
@media (max-width: 1050px) {
  .brand-logo {
    max-width: 100%;
  }

  .entrance-hero {
    height: 290px;
  }

  .entrance-hero-content {
    width: 55%;
    /* Чуть шире на планшетах */
    padding: 28px 0 0 24px;
  }

  .entrance-hero-features {
    gap: 16px;
  }

  .entrance-feature-icon {
    width: 28px;
    height: 28px;
  }

  .entrance-feature-text {
    font-size: 10px;
    white-space: nowrap;
  }
}

.size-header,
.size-cell {
  min-width: 0;
}

/* Мобильные устройства */
@media (max-width: 760px) {
  .entrance-hero {
    height: 280px;
    border-radius: 8px;
    /*margin: 0 5px 20px;*/
  }

  .entrance-hero-background {
    object-position: 30% center;
    /* Сдвигаем фокус картинки влево, чтобы дверь была видна */
  }

  .entrance-hero-overlay {
    /* На мобильном градиент занимает почти весь экран, чтобы текст читался */
    background: linear-gradient(90deg,
        rgba(237, 232, 223, 0.97) 0%,
        rgba(237, 232, 223, 0.90) 40%,
        rgba(212, 197, 176, 0.70) 70%,
        rgba(212, 197, 176, 0.30) 100%);
  }

  .entrance-hero-content {
    width: 76%;
    /* Текст занимает 76% ширины */
    padding: 28px 0 0 20px;
  }

  .entrance-hero h1 {
    font-size: 27px;
  }

  .entrance-hero-subtitle {
    font-size: 15px;
  }

  .entrance-hero-features {
    gap: 12px;
    margin-top: 16px;
  }

  .entrance-feature-icon {
    width: 24px;
    height: 24px;
  }

  .entrance-feature-text {
    font-size: 9px;
  }
}

/*#endregion */

#products .product-group .price {
  margin: 0 !important;
  padding: 8px 9px 6px !important;
  color: var(--text) !important;
  /* Тёмно-серый цвет как на главной */
  font-size: 18px !important;
  /* Крупный размер для заметности */
  font-weight: 750 !important;
  /* Жирный шрифт */
  line-height: 1.2 !important;
  border-top: 1px solid #f0f2f2 !important;
  /* Тонкая разделительная линия */
  letter-spacing: -0.3px;
}

/* =========================================================
🔍 МОДАЛЬНОЕ ОКНО СРАВНЕНИЯ ТОВАРОВ
Современный дизайн в стиле сайта с SVG-иконками
========================================================= */

/* ---------------------------------------------------------
ОСНОВНОЕ ОКНО
--------------------------------------------------------- */
#comparison-modal {
  padding: 20px;
  z-index: 2200 !important;
}

#comparison-modal .comparison-modal-content {
  width: min(1100px, 96vw);
  max-width: 1100px;
  max-height: 92vh;
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: 0 0 14px 14px !important;
  box-shadow: 0 24px 70px rgba(28, 35, 40, 0.20) !important;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------
ШАПКА МОДАЛКИ
--------------------------------------------------------- */
#comparison-modal .comparison-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

#comparison-modal .comparison-header-actions .close {
  position: static;
  margin: 0 0 0 15px;
}

@media (max-width: 1050px) {
  #comparison-modal .comparison-header-actions .close {
    position: absolute;
  }
}

#comparison-modal .comparison-header-text h2 {
  margin: 0 0 6px;
  color: var(--text) !important;
  font-size: 22px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: -0.3px;
}

#comparison-modal .comparison-header-text h2::after {
  content: "Сравните характеристики товаров, чтобы сделать правильный выбор";
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
}

@media (max-width: 1050px) {
  #comparison-modal .comparison-header-text h2::after {
    display: none;
  }
}

/* Кнопка "Очистить сравнение" — стиль как у "Очистить корзину" */
#comparison-modal .clear-comparison-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  color: #ff0f28;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

#comparison-modal .clear-comparison-btn:hover {
  background: #ff0f28;
  color: white;
}

#comparison-modal .clear-comparison-btn:hover img {
  filter: brightness(0) invert(1) !important;
}

#comparison-modal .clear-comparison-btn img {
  width: 15px;
  height: 15px;
  object-fit: contain;
}

/* Крестик закрытия */
#comparison-modal .comparison-close-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7f6;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-soft);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

#comparison-modal .comparison-close-btn:hover {
  background: #e8eaec;
  color: var(--text);
}

/* ---------------------------------------------------------
КОНТЕЙНЕР ТАБЛИЦЫ (скролл)
--------------------------------------------------------- */
#comparison-modal .comparison-table-wrapper {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0 20px 20px 20px;
}

/* ---------------------------------------------------------
ТАБЛИЦА СРАВНЕНИЯ
--------------------------------------------------------- */
#comparison-modal .comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  table-layout: fixed;
}

/* Колонки */
#comparison-modal .comparison-table colgroup col:first-child {
  width: 220px;
  min-width: 220px;
}

/* ---------------------------------------------------------
ЯЧЕЙКИ ТАБЛИЦЫ
--------------------------------------------------------- */
#comparison-modal .comparison-table th,
#comparison-modal .comparison-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  text-align: center;
}

/* Первая колонка — названия характеристик */
#comparison-modal .comparison-table td:first-child,
#comparison-modal .comparison-table th:first-child {
  text-align: left;
  background: #fafbfb;
  font-weight: 500;
  color: var(--text);
  position: sticky;
  left: 0;
  z-index: 5;
}

/* 1. Угловая ячейка (пересечение первой строки и первой колонки) — должна быть поверх всего */
#comparison-modal .comparison-table th:first-child {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 15;
  /* 2. Самый высокий z-index — поверх и строки, и колонки */
  background: #fafbfb;
}

/* Заголовок строки с иконкой */
#comparison-modal .comparison-table .feature-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

#comparison-modal .comparison-table .feature-label img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.85;
}

/* ---------------------------------------------------------
СТРОКА ТОВАРОВ (изображения + названия)
--------------------------------------------------------- */
#comparison-modal .comparison-table .product-header-cell {
  padding: 16px 16px 0px 16px;
  vertical-align: top;
  position: sticky;
  /* 1. "Приклеиваем" ячейку к верху контейнера при прокрутке */
  top: 0;
  /* 2. Прилипает к самому верху (0px от края) */
  background: #ffffff;
  /* 3. Белый фон, чтобы контент не просвечивал сквозь ячейку */
  z-index: 10;
  /* 4. Поверх остальных строк таблицы */
}

#comparison-modal .comparison-table .product-header-cell .product-image-wrap {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fbfcfc 0%, #f2f5f3 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}

#comparison-modal .comparison-table .product-header-cell .product-image-wrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  padding: 10px;
}

#comparison-modal .comparison-table .product-header-cell .product-name {
  font-size: 13px;
  font-weight: 650;
  color: var(--text);
  line-height: 1.35;
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 55px;
}

/* ============================================
💰 ЦЕНА В ШАПКЕ ТОВАРА (прилипает вместе с названием)
============================================ */
#comparison-modal .comparison-table .product-header-cell .product-compare-price {
  font-size: 16px;
  font-weight: 750;
  color: var(--green-dark, #3d7518);
  margin: 0 0 12px;
  white-space: nowrap;
  letter-spacing: -0.3px;
}

/* Кнопка удаления товара из сравнения */
#comparison-modal .comparison-table .remove-product-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-soft);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  z-index: 10;
}

#comparison-modal .comparison-table .remove-product-btn:hover {
  background: #ff0f28;
  border-color: #ff0f28;
  color: #fff;
}

/* ---------------------------------------------------------
СТРОКА ЦЕНЫ
--------------------------------------------------------- */
#comparison-modal .comparison-table .price-cell {
  font-size: 16px;
  font-weight: 750;
  color: var(--green-dark) !important;
}

/* ---------------------------------------------------------
НИЖНИЙ БЛОК "НАШЛИ ОТЛИЧИЯ?"
--------------------------------------------------------- */
#comparison-modal .comparison-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--green-soft);
  border-top: 1px solid #c9ddc0;
  flex-shrink: 0;
  gap: 16px;
  flex-wrap: wrap;
}

#comparison-modal .comparison-footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

#comparison-modal .comparison-footer-left .footer-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  border-radius: 8px;
  flex-shrink: 0;
}

#comparison-modal .comparison-footer-left .footer-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}

#comparison-modal .comparison-footer-left .footer-text h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

#comparison-modal .comparison-footer-left .footer-text p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-soft);
}

#comparison-modal .comparison-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Кнопка "В избранное" */
#comparison-modal .comparison-footer-actions .add-to-favorites-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

#comparison-modal .comparison-footer-actions .add-to-favorites-btn:hover {
  background: #f5f7f6;
  border-color: var(--border-dark);
}

#comparison-modal .comparison-footer-actions .add-to-favorites-btn img {
  width: 16px;
  height: 16px;
}

/* Кнопка "Перейти к товарам" */
#comparison-modal .comparison-footer-actions .go-to-products-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}

#comparison-modal .comparison-footer-actions .go-to-products-btn:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
}

#comparison-modal .comparison-footer-actions .go-to-products-btn svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
}

/* ---------------------------------------------------------
ПУСТОЕ СОСТОЯНИЕ
--------------------------------------------------------- */
#comparison-modal .comparison-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

/* ---------------------------------------------------------
АДАПТИВ
--------------------------------------------------------- */
/* ============================================
📱 МОБИЛЬНАЯ АДАПТАЦИЯ МОДАЛКИ СРАВНЕНИЯ
(max-width: 760px)
============================================ */
@media (max-width: 760px) {

  /* 1. Уменьшаем внешние отступы самой модалки */
  #comparison-modal {
    padding: 8px;
  }

  /* 2. Белая карточка: почти на весь экран */
  #comparison-modal .comparison-modal-content {
    border-radius: 12px !important;
    max-height: 90vh;
  }

  /* 3. Шапка: компактные отступы */
  #comparison-modal .comparison-header {
    padding: 18px 16px 14px;
    flex-wrap: wrap;
    gap: 12px;
  }

  /* 4. Заголовок "Сравнение товаров" — чуть меньше */
  #comparison-modal .comparison-header-text h2 {
    font-size: 18px;
  }

  /* 5. 🔥 ГЛАВНОЕ: Контейнер таблицы — включаем горизонтальный скролл */
  #comparison-modal .comparison-table-wrapper {
    padding: 0 16px 16px;
    overflow-x: auto;
    /* Разрешаем горизонтальную прокрутку */
    -webkit-overflow-scrolling: touch;
    /* Плавный "инерционный" скролл на iOS */
  }

  /* 6. 🔥 Таблица: фиксируем минимальную ширину, чтобы колонки не сжимались */
  #comparison-modal .comparison-table {
    min-width: 600px;
    /* Минимальная ширина — таблица не сожмётся */
    table-layout: auto;
    /* Автоматическая ширина колонок */
  }

  /* 7. 🔥 УБИРАЕМ "липкость" первой колонки на мобильных */
  #comparison-modal .comparison-table td:first-child,
  #comparison-modal .comparison-table th:first-child {
    position: static !important;
    /* 8. Было: sticky. Стало: static — колонка прокручивается вместе с таблицей */
    left: auto !important;
    /* 9. Сбрасываем привязку к левому краю */
    z-index: auto !important;
    /* 10. Убираем повышенный слой */
    background: transparent !important;
    /* 11. Убираем фон (больше не нужен, т.к. не перекрывает) */
    min-width: 120px;
    /* 12. Минимальная ширина для читаемости */
    max-width: 120px;
    /* 13. Максимальная ширина */
  }

  /* 14. Угловая ячейка (пересечение шапки и первой колонки) — тоже не sticky */
  #comparison-modal .comparison-table th:first-child {
    position: static !important;
    /* 15. Было: sticky с z-index: 15. Стало: static */
    z-index: auto !important;
  }

  /* 16. Ячейки с товарами — минимальная ширина */
  #comparison-modal .comparison-table td,
  #comparison-modal .comparison-table th {
    min-width: 120px;
    /* Каждая колонка товара — минимум 120px */
    padding: 10px 8px;
    /* Компактные отступы */
  }

  /* 17. Изображения товаров — уменьшаем для мобильных */
  #comparison-modal .comparison-table .product-header-cell .product-image-wrap {
    height: 100px;
    /* Было 140px — уменьшаем */
  }

  /* 18. Кнопки удаления товаров (×) — компактнее */
  #comparison-modal .comparison-table .remove-product-btn {
    width: 24px;
    height: 24px;
    top: 4px;
    right: 4px;
    font-size: 14px;
  }

  /* 19. Названия характеристик — чуть меньше, но читаемо */
  #comparison-modal .comparison-table .feature-label {
    font-size: 12px;
    gap: 8px;
  }

  /* 20. Иконки характеристик — уменьшаем */
  #comparison-modal .comparison-table .feature-label img {
    width: 18px;
    height: 18px;
  }

  /* 21. Названия товаров — компакнее */
  #comparison-modal .comparison-table .product-header-cell .product-name {
    font-size: 12px;
    -webkit-line-clamp: 2;
    /* Обрезаем после 2 строк */
  }

  /* 22. Цена — жирнее и крупнее для заметности */
  #comparison-modal .comparison-table .price-cell {
    font-size: 14px;
    font-weight: 750;
  }

  /* 23. Нижний блок — кнопки в столбик */
  #comparison-modal .comparison-footer {
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
  }

  /* 24. Кнопки в футере — на всю ширину */
  #comparison-modal .comparison-footer-actions {
    justify-content: stretch;
  }

  #comparison-modal .comparison-footer-actions .add-to-favorites-btn,
  #comparison-modal .comparison-footer-actions .go-to-products-btn {
    flex: 1;
    justify-content: center;
  }
}

.page-tab.active {
  background: linear-gradient(
      /* 19. Градиент от светлого бежевого к тёмному */
      135deg,
      /* 20. Направление: из левого верхнего в правый нижний угол */
      #907a5a 0%,
      /* 21. Светлый бежевый (как кнопка "Фурнитура") */
      #b8a88a 100%
      /* 22. Тёмный бежевый с золотистым отливом */
    );
  color: #ffffff;
  /* 23. Белый текст на бежевом фоне — максимальный контраст */
  border: 1px solid #9a8b73;
  /* 24. Тёмно-бежевая рамка для объёма */
  box-shadow: 0 2px 8px rgba(154, 139, 115, 0.3);
  /* 25. Мягкая тёплая тень — вкладка "приподнята" */
}


/* ============================================
 МОБИЛЬНАЯ АДАПТАЦИЯ МОДАЛКИ ВХОДНЫХ ДВЕРЕЙ
(max-width: 768px)
============================================ */
@media (max-width: 768px) {

  /* 1. ХАРАКТЕРИСТИКИ: перестраиваем из 2 колонок в 1 */
  .product-specs .specs-grid {
    grid-template-columns: 1fr;
    /* 1. Одна колонка вместо двух — блоки идут друг под другом */
    gap: 24px;
    /* 2. Расстояние между колонками-блоками */
  }

  /* 2. ТЁМНЫЙ БЛОК ХАРАКТЕРИСТИК: корректируем "вылеты" за края */
  .product-specs {
    margin-left: -16px;
    /* 3. Выталкиваем влево на величину padding родителя (было -30px) */
    margin-right: -16px;
    /* 4. Выталкиваем вправо (было -30px) */
    width: calc(100% + 32px);
    /* 5. Компенсируем ширину: 100% + 16px слева + 16px справа */
    padding: 20px 20px;
    /* 6. Уменьшаем внутренние отступы для компактности */
    padding-bottom: 20px;
    /* 7. Отступ снизу */
    border-radius: 0 0 8px 8px;
    /* 8. Скругление только нижних углов */
  }
}

/* ============================================
🎚 ПОЛЗУНОК "СКРЫВАТЬ СОВПАДЕНИЯ"
Дизайн в бежево-золотистой гамме входных дверей
============================================ */
/* 1. Контейнер для лейбла и самого ползунка */
.diff-slider-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 15px;
  padding: 6px 14px;
  background: #faf8f5;
  /* Легкий бежевый фон */
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* 2. Текст-подсказка слева от ползунка */
.diff-slider-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
  user-select: none;
}

/* 3. Сама дорожка ползунка (трек) */
.diff-slider {
  -webkit-appearance: none;
  /* Убираем стандартный уродливый стиль браузера */
  width: 110px;
  height: 6px;
  border-radius: 3px;
  background: #e6dfd3;
  /* Песочно-бежевый цвет дорожки */
  outline: none;
  cursor: pointer;
}

/* 4. "Бегунок" ползунка (Webkit: Chrome, Safari, Edge) */
.diff-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* Градиент в стиле активной вкладки "Входные двери" */
  background: linear-gradient(135deg, #907a5a 0%, #b8a88a 100%);
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(144, 122, 90, 0.4);
  cursor: pointer;
  transition: transform 0.2s ease;
}

/* 5. Эффект при наведении на бегунок */
.diff-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

/* 6. "Бегунок" для Firefox */
.diff-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #907a5a;
  border: 2px solid #ffffff;
  cursor: pointer;
}

/* ============================================
🌫 ЭФФЕКТ "ЗАТУХАНИЯ" СОВПАДАЮЩИХ СТРОК
============================================ */
/* 7. Применяем прозрачность ко ВСЕЙ строке, если у неё есть класс is-match */
#comparison-modal .comparison-table tr.is-match {
  /* Читаем переменную, которую JS будет менять от 1.0 до 0.15 */
  opacity: var(--match-opacity, 1);
  /* Плавная анимация, как дыхание */
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 8. Мобильная адаптация ползунка */
@media (max-width: 760px) {
  .diff-slider-wrapper {
    width: 100%;
    justify-content: space-between;
    margin-right: 0;
    margin-bottom: 10px;
  }

  .diff-slider {
    flex: 1;
  }
}

/* ============================================
🟢 ЭФФЕКТ "ЗЕЛЁНАЯ ГАЛОЧКА" -> "КРАСНЫЙ КРЕСТИК"
============================================ */
/* 1. Базовое состояние: товар УЖЕ в корзине (кнопка остаётся ЗЕЛЁНОЙ) */
#products .action-btn.add-to-cart-btn.in-cart,
#entrance-product-modal .action-btn.add-to-cart-btn.in-cart {
  background: var(--green, #4CAF50) !important;
  /* 2. Красим фон в сочный зелёный (цвет успеха) */
  border-color: var(--green, #4CAF50) !important;
  /* 3. Рамку тоже делаем зелёной, чтобы слилась с фоном */
  position: relative;
  /* 4. Создаём "систему координат" для невидимого крестика */
  overflow: hidden;
  /* 5. Обрезаем всё, что случайно вылезет за края кнопки */
}

/* 6. Скрываем иконку галочки при наведении (она "испаряется") */
#products .action-btn.add-to-cart-btn.in-cart:hover .emoji-icon,
#entrance-product-modal .action-btn.add-to-cart-btn.in-cart:hover .emoji-icon {
  opacity: 0;
  /* 7. Делаем галочку полностью прозрачной */
  transform: scale(0.5);
  /* 8. Уменьшаем в размере для эффекта "растворения" */
  transition: all 0.2s ease;
  /* 9. Плавная анимация исчезновения */
}

/* 10. Превращаем саму кнопку в красный квадрат при наведении мыши */
#products .action-btn.add-to-cart-btn.in-cart:hover,
#entrance-product-modal .action-btn.add-to-cart-btn.in-cart:hover {
  background: #dc3545 !important;
  /* 11. Фирменный красный цвет опасности */
  border-color: #dc3545 !important;
  /* 12. Рамка того же цвета */
  cursor: pointer;
  /* 13. Курсор-палец, чтобы было понятно, что жмётся */
}

/* 14. МАГИЯ: Рисуем белый крестик через невидимого "призрака" (псевдоэлемент) */
#products .action-btn.add-to-cart-btn.in-cart:hover::after,
#entrance-product-modal .action-btn.add-to-cart-btn.in-cart:hover::after {
  content: '✕';
  /* 15. Символ крестика (материализуем призрака) */
  position: absolute;
  /* 16. Вырываем из общего потока, вешаем поверх */
  top: 50%;
  /* 17. Спускаем на середину по вертикали */
  left: 50%;
  /* 18. Сдвигаем на середину по горизонтали */
  transform: translate(-50%, -50%);
  /* 19. Точная центровка относительно её же центра */
  color: #ffffff;
  /* 20. Белый цвет крестика */
  font-size: 12px;
  /* 21. Размер крестика */
  font-weight: bold;
  /* 22. Жирный, чтобы хорошо читался */
  line-height: 1;
  /* 23. Убираем межстрочные интервалы */
  z-index: 2;
  /* 24. Поверх всех элементов внутри кнопки */
}

/* ============================================
🎨 ПЕРЕОПРЕДЕЛЕНИЕ ЦВЕТА ИКОНКИ ГАЛОЧКИ В БЕЛЫЙ
============================================ */
/* 1. Нацеливаемся строго на иконку внутри кнопки, когда товар УЖЕ в корзине */
#products .action-btn.add-to-cart-btn.in-cart .emoji-icon,
#entrance-product-modal .action-btn.add-to-cart-btn.in-cart .emoji-icon {
  /* 2. МАГИЯ CSS-ФИЛЬТРОВ:
       brightness(0) — делает ЛЮБОЙ цвет (зелёный, синий, красный) абсолютно чёрным.
       invert(1) — инвертирует чёрный в абсолютно белый.
       Работает даже если внутри SVG жёстко прописан зелёный fill! */
  filter: brightness(0) invert(1) !important;
}

/* ============================================
🎨 ДЕЛАЕМ ИКОНКУ КОРЗИНЫ БЕЛОЙ НА ЗЕЛЁНОМ ФОНЕ
Применяем "магию проявочной" для всех кнопок добавления
============================================ */
/* 1. Нацеливаемся на иконку внутри кнопки в модальном окне товара */
#entrance-product-modal .action-btn.add-to-cart-btn .emoji-icon /*,*/
/* 2. Нацеливаемся на иконку внутри кнопки в основном каталоге (на главной странице) */
/*#products .action-btn.add-to-cart-btn .emoji-icon*/ {
    /* 3. МАГИЯ CSS-ФИЛЬТРОВ:
    brightness(0) — делает ЛЮБОЙ цвет (черный, синий, красный) абсолютно черным.
    invert(1) — инвертирует этот черный в абсолютно белый.
    Работает даже если внутри SVG жёстко прописан черный fill! */
    filter: brightness(0) invert(1) !important;
}

/*#region Кастомные цвета для страницы входных дверей */
#cart-modal #checkout-btn,
#cart-modal .save-changes-btn,
.save-cart-dialog-buttons .btn-save-confirm {
  background: var(--entrance-doors-color);
  border-color: var(--entrance-doors-color);
}
#cart-modal #checkout-btn:hover,
#cart-modal .save-changes-btn:hover,
.save-cart-dialog-buttons .btn-save-confirm:hover {
  background: var(--entrance-doors-color-dark);
  border-color: var(--entrance-doors-color-dark);
}
#cart-modal .toggle-saved-carts-btn.right-panel-toggle:hover,
#cart-modal .save-cart-btn:hover {
  background-color: var(--entrance-doors-color-light);
  color: var(--mastak-grey);
  border-color: var(--mastak-grey);
}
.saved-carts-badge {
  background-color: var(--entrance-doors-color);
}
.saved-cart-card.active,
.save-cart-dialog input[type="text"]:focus {
  border-color: var(--entrance-doors-color);
  box-shadow: 0 0 0 1px var(--entrance-doors-color-light);
}
input[type="checkbox"] {
  accent-color: var(--entrance-doors-color) !important;
}
/*#endregion Кастомные цвета для страницы входных дверей */