/* ==========================================================================
   Каталог запасных частей к лифтам — ОАО «Могилёвлифтмаш»
   Стили компонентов раздела. Всё пространство имён — под .sp-catalog,
   чтобы не конфликтовать с глобальными стилями сайта. Шапка/подвал/меню
   берутся из основного шаблона сайта (inner).
   Файл подключается ТОЛЬКО на страницах каталога, поэтому ненеймспейсенные
   правила ниже (полноширинный режим) действуют только здесь.
   ========================================================================== */

/* Полноширинный режим, как в дизайн-макете: скрываем левый сайдбар шаблона
   (меню раздела + блок новостей) и растягиваем контент на всю ширину. */
.flex-content { display: block !important; }
.flex-content > #left-block-wrap,
#left-block-wrap { display: none !important; }
.flex-content > main.content,
main.content { width: 100% !important; max-width: 100% !important; float: none !important; margin: 0 !important; }
main.content .inner-content { width: 100% !important; }
/* Рамку и padding 25px шаблонного .content снимаем, вместо них — отбивки страницы
   из макета (.page { padding: 28px 0 60px }): 28px от хлебных крошек и 60px снизу. */
main.content { padding: 28px 0 60px !important; border: none !important; }

/* Заголовок страницы шаблон печатает как <h1><?$APPLICATION->ShowTitle(false)?></h1>
   над контентом. На list.php/detail.php заголовок по макету стоит внутри контента,
   поэтому там страница вызывает SetTitle('') — а пустой H1 убираем здесь.
   На index.php заголовок непустой и продолжает выводиться шаблоном. */
.wrapper > h1:empty { display: none; }

.sp-catalog {
  --brand:      #0058AA;
  --brand-light:#006BCE;
  --grad-blue:  linear-gradient(180deg, #006BCE 0%, #0058AA 100%);
  --ink:        #242424;
  --ink-soft:   #5a5f63;
  --muted:      #7a7a7a;
  --line:       #DBE1E1;
  --line-soft:  #e6eaea;
  --bg-soft:    #f5f7f8;
  --bg-soft2:   #eef2f4;
  --shadow:     0 1px 3px rgba(6,46,66,.08), 0 6px 18px rgba(6,46,66,.06);

  font-family: "Roboto", "Open Sans", Arial, sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  max-width: 1285px;
  margin: 0 auto;
}
.sp-catalog * { box-sizing: border-box; }
.sp-catalog a { color: var(--brand); text-decoration: none; }
.sp-catalog a:hover { color: var(--brand-light); }

.sp-catalog .sp-head { margin: 0 0 22px; }
/* На перечне изделий заголовок стоит под строкой поиска — отбивка как в макете. */
.sp-catalog .sp-head--below-search { margin-top: 56px; }
/* Селектор с .sp-head — чтобы обойти шаблонное `.wrapper .content h1` (0,2,1),
   которое навязывает любому H1 внутри контента 40px, uppercase и padding 7px 0 22px.
   Поэтому же ниже явно заданы padding и text-transform. */
.sp-catalog .sp-head .sp-title {
  margin: 0; padding: 0; font-family: "Roboto", sans-serif; text-transform: none;
  font-size: 28px; font-weight: 700; line-height: 1.2; color: #141414;
}
.sp-catalog .sp-subtitle { margin: 8px 0 0; color: var(--ink-soft); }

.sp-catalog .panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow);
}

/* ===== Поиск ===== */
.sp-catalog .searchbar { display: flex; gap: 10px; padding: 16px; margin-bottom: 22px; }
.sp-catalog .searchbar .field { position: relative; flex: 1; }
.sp-catalog .searchbar .field .ico {
  position: absolute; left: 14px; top: 24px; transform: translateY(-50%);
  display: flex; color: var(--muted); pointer-events: none;
}
.sp-catalog .searchbar input[type="search"],
.sp-catalog .searchbar input[type="text"] {
  width: 100%; height: 48px; padding: 0 16px 0 42px;
  font-size: 16px; font-family: inherit; color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.sp-catalog .searchbar input:focus {
  border-color: var(--brand-light); box-shadow: 0 0 0 3px rgba(0,107,206,.15);
}
.sp-catalog .searchbar .hint { margin-top: 6px; font-size: 12px; color: var(--muted); }

.sp-catalog .sp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 26px; font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff; background: var(--grad-blue); border: none; border-radius: 6px;
  cursor: pointer; transition: filter .15s; white-space: nowrap;
}
.sp-catalog .sp-btn:hover { filter: brightness(1.07); color: #fff; }

/* ===== Страница 1: алфавит ===== */
.sp-catalog .alpha-index { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; margin-bottom: 22px; }
.sp-catalog .alpha-index a, .sp-catalog .alpha-index span {
  display: inline-grid; place-items: center; min-width: 36px; height: 36px; padding: 0 6px;
  font-weight: 700; font-size: 15px; border-radius: 6px; border: 1px solid var(--line);
  color: var(--brand); background: #fff;
}
.sp-catalog .alpha-index a:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.sp-catalog .letter-group { margin-bottom: 26px; scroll-margin-top: 20px; }
.sp-catalog .letter-group__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.sp-catalog .letter-group__letter {
  width: 46px; height: 46px; display: grid; place-items: center;
  font-size: 24px; font-weight: 800; color: #fff; background: var(--grad-blue);
  border-radius: 8px; flex: 0 0 auto;
}
.sp-catalog .letter-group__rule { flex: 1; height: 1px; background: var(--line); }

.sp-catalog .pos-list {
  list-style: none; margin: 0; padding: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow);
}
.sp-catalog .pos-list li { border-top: 1px solid var(--line-soft); }
.sp-catalog .pos-list li:first-child { border-top: none; }
.sp-catalog .pos-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; color: var(--ink); font-size: 16px; transition: background .12s;
}
.sp-catalog .pos-list a:hover { background: var(--bg-soft); color: var(--brand); }
.sp-catalog .pos-list .count {
  font-size: 13px; color: var(--muted); background: var(--bg-soft2);
  border-radius: 20px; padding: 2px 11px;
}
.sp-catalog .pos-list .arrow { color: var(--brand-light); margin-left: 6px; }

/* ===== Страница 2: перечень изделий ===== */
.sp-catalog .results-meta { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 16px; }
.sp-catalog .results-meta .count { color: var(--muted); font-size: 14px; }

.sp-catalog .sp-result-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow);
}
/* font-weight и vertical-align заданы явно: шаблонный ресет `th { font: inherit;
   vertical-align: baseline }` убивает браузерные значения по умолчанию. */
.sp-catalog .sp-result-table thead th {
  text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  vertical-align: middle;
  color: var(--ink-soft); background: var(--bg-soft2); padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.sp-catalog .sp-result-table tbody tr {
  border-top: 1px solid var(--line-soft); cursor: pointer; transition: background .12s;
}
.sp-catalog .sp-result-table tbody tr:first-child { border-top: none; }
.sp-catalog .sp-result-table tbody tr:hover { background: var(--bg-soft); }
.sp-catalog .sp-result-table td { padding: 12px 16px; vertical-align: middle; }
.sp-catalog .sp-result-table .col-photo { width: 170px; white-space: nowrap; padding-right: 40px; }
.sp-catalog .sp-result-table .col-desig { width: 220px; }
.sp-catalog .sp-result-table .desig {
  font-family: "Roboto Mono", "Roboto", monospace; font-weight: 600; color: var(--brand); letter-spacing: .3px;
}
.sp-catalog .sp-result-table .name { font-weight: 500; }
.sp-catalog .sp-result-table .go { color: var(--brand-light); text-align: right; width: 40px; }

.sp-catalog .thumb {
  width: 76px; height: 56px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; display: grid; place-items: center; overflow: hidden;
}
.sp-catalog .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-catalog .thumb.empty {
  background: repeating-linear-gradient(45deg, #f3f5f6, #f3f5f6 6px, #eef1f3 6px, #eef1f3 12px);
  color: #9aa6ac; font-size: 10px; text-align: center; line-height: 1.2; padding: 4px;
}

/* ===== Страница 3: карточка ===== */
.sp-catalog .card { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 26px; }
.sp-catalog .card__media { display: flex; flex-direction: column; gap: 16px; }
.sp-catalog .media-box__label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin-bottom: 8px; font-weight: 700;
}
.sp-catalog .media-frame {
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden;
}
.sp-catalog .media-frame img { width: 100%; height: 100%; object-fit: contain; }
.sp-catalog .media-frame.empty {
  background: repeating-linear-gradient(45deg, #f3f5f6, #f3f5f6 10px, #eef1f3 10px, #eef1f3 20px);
  color: #aab4ba; font-size: 14px; padding: 20px; text-align: center;width:auto; height: auto;
}
/* .card в селекторе — против того же шаблонного `.wrapper .content h1`. */
.sp-catalog .card .card__info h1 {
  margin: 0 0 6px; padding: 0; text-transform: none;
  font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--ink);
}
.sp-catalog .card__desig {
  display: inline-block; font-family: "Roboto Mono", monospace; font-weight: 700; font-size: 15px;
  color: var(--brand); background: rgba(0,88,170,.08); border: 1px solid rgba(0,88,170,.18);
  padding: 5px 12px; border-radius: 6px; margin-bottom: 18px;
}
.sp-catalog .spec-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.sp-catalog .spec-table th, .sp-catalog .spec-table td {
  text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.sp-catalog .spec-table th { width: 210px; color: var(--muted); font-weight: 600; font-size: 14px; }
.sp-catalog .spec-table td { color: var(--ink); }
.sp-catalog .card__desc-head {
  margin: 22px 0 8px; font-size: 15px; font-weight: 700; color: var(--ink);
  text-transform: uppercase; letter-spacing: .4px;
}
.sp-catalog .card__desc { color: var(--ink-soft); line-height: 1.6; white-space: pre-line; }
.sp-catalog .sp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 16px; font-weight: 600; font-size: 14px; }

/* ===== Перебивка стилей шаблона =====
   Скрипт шаблона (/bitrix/templates/.default/js/custom.js) на лету оборачивает
   КАЖДУЮ таблицу внутри .inner-content в <div class="table-wrapper">, а тот
   ограничен max-width: 1199px и растянут полями -15px. Из-за этого таблицы
   каталога уже контейнера и сдвинуты влево — эти свойства снимаем.
   overflow-x: auto оставляем: на узких экранах он уводит прокрутку широкой
   таблицы внутрь блока, не давая горизонтально ехать всей странице. */
.sp-catalog .table-wrapper {
  max-width: none; max-height: none;
  margin-left: 0; margin-right: 0;
  overflow-x: auto;
}

/* Шаблон стилизует ЛЮБЫЕ таблицы внутри .inner-content селекторами
   `.wrapper .content .inner-content table td|a|span` — их специфичность (0,3,1)
   выше наших правил (0,2,1), поэтому нужные значения возвращаем точечно.
   Имена .result-table, .back-link и .btn заняты в style.css шаблона —
   от них мы ушли префиксом sp-, иначе протекали ещё и рамки, цвет и кегль. */
/* `table tr, table td { border: 2px solid #dbe1e1 }` — рамку строк снимаем целиком,
   разделители рисуют сами ячейки (правила ниже перебивают её по сторонам). */
.sp-catalog .sp-result-table tr,
.sp-catalog .spec-table tr { border: none; }

.sp-catalog .sp-result-table td,
.sp-catalog .spec-table td {
  border-top: none !important; border-left: none !important; border-right: none !important;
}
.sp-catalog .sp-result-table td { border-bottom: none !important; padding: 12px 16px !important; }
.sp-catalog .spec-table td { border-bottom: 1px solid var(--line-soft) !important; padding: 11px 0 !important; }
.sp-catalog .sp-result-table a,
.sp-catalog .spec-table a { font-size: inherit !important; }
.sp-catalog .thumb.empty { font-size: 10px !important; }

/* `.wrapper .content .inner-content p` (0,3,1) навязывает КАЖДОМУ абзацу каталога
   18px, свой цвет, шрифт без запасных и отбивку снизу — возвращаем макетные значения. */
.sp-catalog .sp-subtitle,
.sp-catalog .empty-state p {
  font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 0 !important;
  font-family: inherit !important;
}
.sp-catalog .sp-subtitle { color: var(--ink-soft) !important; }

/* ===== Пустое состояние ===== */
.sp-catalog .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.sp-catalog .empty-state svg { width: 56px; height: 56px; opacity: .5; margin-bottom: 14px; }
.sp-catalog .empty-state h3 { margin: 0 0 6px; color: var(--ink); font-weight: 700; }

/* ===== Адаптив (под разрешения из ТЗ) ===== */
@media (max-width: 880px) {
  .sp-catalog .card { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sp-catalog .sp-head .sp-title { font-size: 23px; }
  .sp-catalog .searchbar { flex-direction: column; }
  .sp-catalog .sp-btn { width: 100%; }
  .sp-catalog .sp-result-table .col-desig { width: auto; }
  .sp-catalog .sp-result-table thead { display: none; }
  .sp-catalog .sp-result-table td.col-photo { width: 90px; }
  .sp-catalog .spec-table th { width: 45%; }
}