/* ============================================
   ТАБЛИЦЫ — универсальный стиль
   ============================================ */

/* Шрифт для всех таблиц */
.table {                                      /* Базовый класс таблицы — применяется к <table> */
  font-family: Verdana, Geneva, Tahoma, sans-serif; /* Семейство шрифтов в таблице */
  font-size: 14px;                           /* Размер текста — меньше основного (16px) */
  border-collapse: collapse;                 /* Схлопываем границы между ячейками в одну */
}

/* Сама таблица: 90% ширины блока .content, по центру */
.table {                                      /* Повторное правило — задаёт размеры */
  width: 90%;                                 /* Ширина 90% от родительского блока .content */
  margin: 20px auto;                          /* Отступы: 20px сверху/снизу, авто по бокам — центрирование */
  border-collapse: collapse;                 /* Дублируем схлопывание границ для надёжности */
}

/* Добавляем горизонтальные границы */
.table tr {                                  /* Строка таблицы */
    border-bottom: 1px solid var(--color-bg); /* Нижняя граница строки — цвет фона страницы (почти невидимая) */
}

/* Убираем все границы у ячеек */
.table td,                                   /* Ячейка данных */
.table th {                                  /* Заголовочная ячейка */
    border: none;                            /* Полностью убираем границы ячеек */
}

/* Заголовки столбцов */
.table thead th {                            /* Ячейка в шапке таблицы */
  background-color: var(--purple-dark);     /* Фон шапки — тёмно-фиолетовый */
  color: var(--green);                      /* Текст шапки — зелёный */
  padding: 10px 12px;                       /* Отступы: 10px сверху/снизу, 12px слева/справа */
  text-align: left;                         /* Текст по левому краю (по умолчанию для всех заголовков) */
  font-weight: bold;                        /* Жирный шрифт */
  border-top: 1px solid var(--color-bg);   /* Верхняя граница первой строки — опциональная */
}

.table thead tr {                           /* Строка в шапке таблицы */
    border-bottom: 3px solid var(--green);  /* Толстая зелёная линия под заголовком */
}

/* Первый столбец (описание) — заголовок */
.table thead th.col-desc {                  /* Заголовок колонки с описанием */
  text-align: left;                         /* Выравнивание по левому краю */
}

/* Столбцы с ценами — заголовок по центру */
.table thead th.col-price {                 /* Заголовок колонки с ценой */
  text-align: center;                       /* Выравнивание по центру */
  width: 80px;                             /* Базовая ширина колонки */
  min-width: 60px;                         /* Минимальная ширина — не сжимается меньше */
  white-space: nowrap;                     /* Запрет переноса текста в заголовке цены */
}

/* Ячейки тела */
.table tbody td {                           /* Обычная ячейка в теле таблицы */
  padding: 8px 12px;                        /* Отступы: 8px сверху/снизу, 12px слева/справа */
  border: none;                            /* Убираем границы */
  color: var(--color-text);               /* Цвет текста — основной (тёмно-серый) */
  vertical-align: middle;                  /* Вертикальное выравнивание по центру ячейки */
}

/* НУЛЕВОЙ Столбец с фото */
.table td.col-photo {                       /* Ячейка с фотографией товара */
  width: 100px;                            /* Ширина колонки с фото */
  min-width: 100px;                        /* Минимальная ширина — не сжимается меньше 100px */
  text-align: center;                      /* Фото по центру ячейки */
  padding: 6px;                           /* Уменьшенные отступы — компактнее */
}

.table td.col-photo img {                  /* Само изображение внутри ячейки с фото */
  width: 100%;                            /* Ширина 100% от ячейки */
  height: 80px;                           /* Фиксированная высота — все фото одинаковые */
  object-fit: cover;                       /* Обрезка изображения — заполняет ячейку без искажения */
  display: block;                          /* Блочный элемент — убирает зазор снизу под картинкой */
}

/* Первый столбец — текст слева, занимает всю оставшуюся ширину */
.table tbody td.col-desc {                  /* Ячейка с описанием товара */
  text-align: left;                         /* Текст по левому краю */
  width: auto;                             /* Авто-ширина — занимает всё, что не забрали колонки с ценой */
  flex: 1;                                 /* Занимает оставшееся пространство (при flex-вёрстке) */
  word-break: break-word;                   /* Перенос длинных слов при нехватке ширины */
}

/* Столбцы с ценами — текст по центру, фикс. ширина */
.table thead th.col-price,                  /* Заголовок колонки с ценой */
.table tbody td.col-price {                 /* Ячейка с ценой в теле таблицы */
  text-align: center;                       /* Текст по центру */
  width: auto;                             /* Авто-ширина — может сжиматься */
  min-width: 60px;                        /* Минимальная ширина — не меньше 60px */
  max-width: 100px;                        /* Максимальная ширина — не больше 100px */
  white-space: normal;                     /* Разрешаем перенос текста (для "По запросу", "Цена договорная") */
  word-break: break-word;                  /* Перенос длинных слов внутри ячейки */
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {                /* Применяется на экранах 768px и уже — смартфоны */
  .table thead th.col-price,               /* Заголовок колонки с ценой на мобильном */
  .table tbody td.col-price {               /* Ячейка с ценой на мобильном */
    min-width: 50px;                       /* Уменьшаем минимальную ширину для экономии места */
  }

  .table {                                 /* Сама таблица на мобильном */
    width: 100%;                           /* Полная ширина — отступы минимальны */
  }
}

/* Для числовых значений оставляем запрет на перенос */
.table tbody td.col-price:has(span.price) { /* Ячейка цены, внутри которой есть <span class="price"> */
  white-space: nowrap;                      /* Числа (500, 1000) не переносятся — остаются в одну строку */
}

/* Чередование строк */
.table tbody tr:nth-child(even) {           /* Чётные строки (2-я, 4-я, 6-я...) */
  background-color: var(--color-table-even); /* Светло-серый фон */
}

.table tbody tr:nth-child(odd) {            /* Нечётные строки (1-я, 3-я, 5-я...) */
  background-color: var(--color-table-odd);  /* Белый фон */
}

/* Подсветка строки при наведении */
.table tbody tr:hover {                     /* При наведении курсора на строку */
  background-color: var(--color-table-hover); /* Фон становится бледно-зелёным */
}

/* Обёртка для горизонтальной прокрутки на узких экранах */
.table-wrap {                               /* Контейнер вокруг таблицы — <div class="table-wrap"> */
  overflow-x: auto;                         /* Горизонтальная прокрутка, если таблица шире экрана */
  -webkit-overflow-scrolling: touch;         /* Плавная прокрутка на iOS — инерционный скролл */
}