/* Start:/bitrix/templates/aspro_next/components/bitrix/news.list/certificates1/style.css?178772189022140*/
/* Раздел «Сертификаты», инфоблок 47.
   Два вида одной выдачи: список (по умолчанию) и плитка.
   Список — потому что превью у 2168 PDF из 2423 одинаковое и не несёт
   информации, а строка вмещает бренд, тип техники и срок действия. */

.certificates {
  /* Высота фиксированной шапки Aspro (#headerfixed, 64 px) плюс зазор.
     Шапку не трогаем — просто не лезем под неё: и при прокрутке к блоку,
     и липким боковым списком. Точное значение подставляет script.js,
     здесь запасное на случай отключённого JS. */
  --cert-sticky-offset: 88px;
  scroll-margin-top: var(--cert-sticky-offset);
  /* Синий сайта: #1976d2 — кнопки Aspro, #1569bc — ссылки. Зелёный
     #146c5a был наследством шаблона от 13.07 и на сайте не встречается. */
  --cert-accent: #1976d2;
  --cert-accent-dark: #125a9e;
  --cert-accent-soft: #e8f1fb;
  --cert-text: #1f2733;
  --cert-muted: #66738a;
  --cert-line: #e3eaef;
  --cert-surface: #fff;
  /* Форма — как у остального сайта: Aspro почти прямоугольный, радиус 2 px
     стоит у 151 элемента на главной и у 159 в «Рекламных материалах».
     Свои 10–20 px читались как чужая страница. */
  --cert-r: 2px;
  --cert-r-lg: 3px;
  --cert-danger: #b3261e;
  --cert-danger-soft: #fdecea;
  --cert-warn: #8a5a00;
  --cert-warn-soft: #fdf3e2;
  color: var(--cert-text);
  font-family: inherit;
}

.certificates *,
.certificates *::before,
.certificates *::after {
  box-sizing: border-box;
}

/* ————— Панель: поиск, сортировка, вид ————— */

/* Панель без карточки и рамки: на сайте поиск и фильтры лежат прямо
   на странице, а не в отдельном блоке с тенью. */
.certificates__toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 20px;
  padding: 0;
}

.certificates__search-field {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}

.certificates__search-field input,
.certificates__sort {
  width: 100%;
  /* 51 px — высота поля ввода в теме (.bx-form-control) */
  height: 51px;
  border: 1px solid #ccc;
  border-radius: var(--cert-r);
  background-color: #fff;
  color: var(--cert-text);
  font: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.certificates__search-field input {
  padding: 0 38px 0 44px;
}

.certificates__search-field input:focus,
.certificates__sort:focus {
  border-color: var(--cert-accent);
  box-shadow: none;
}

.certificates__search-field input::-webkit-search-cancel-button { display: none; }

.certificates__search-icon {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 18px;
  width: 14px;
  height: 14px;
  border: 2px solid #8793a7;
  border-radius: 50%;
  transform: translateY(-55%);
}

.certificates__search-icon::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: #8793a7;
  transform: rotate(45deg);
}

.certificates__search-reset {
  position: absolute;
  top: 50%;
  right: 12px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(31, 39, 51, .08);
  color: var(--cert-muted);
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  transform: translateY(-50%);
}

.certificates__search-reset:hover { background: rgba(31, 39, 51, .15); color: var(--cert-text); }

.certificates__sort,
.certificates__select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2366738a'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 20px;
  cursor: pointer;
}

.certificates__sort {
  flex: 0 0 232px;
  width: 232px;
  min-width: 0;
  padding: 0 34px 0 14px;
}

.certificates__submit {
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--cert-r);
  background: var(--cert-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
}

/* ————— Раскладка и список папок ————— */

.certificates__layout {
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.certificates__sidebar {
  position: sticky;
  top: var(--cert-sticky-offset);
  overflow: hidden;
  border: 1px solid var(--cert-line);
  border-radius: var(--cert-r-lg);
  background: var(--cert-surface);
}

.certificates__sidebar-head {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--cert-line);
}

.certificates__sidebar-title {
  margin: 0;
  color: var(--cert-text);
  font-weight: 700;
}

.certificates__sidebar-title { font-size: 18px; }

.certificates__sidebar-hint {
  margin: 6px 0 0;
  color: var(--cert-muted);
  font-size: 13px;
  line-height: 1.35;
}

.certificates__folders {
  /* Нижняя граница обязательна: на коротком окне calc уходит в минус,
     и список схлопывается в ноль, утаскивая за собой раскладку. */
  max-height: max(280px, min(calc(100vh - var(--cert-sticky-offset) - 190px), 680px));
  overflow: auto;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: #bdcbc7 transparent;
}

.certificates__folder {
  display: grid;
  /* стрелка · значок · название · счётчик — стрелка слева, как в дереве:
     справа от счётчика она читалась как отдельная кнопка без назначения */
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 40px;
  margin: 1px 0;
  padding: 7px 10px 7px calc(8px + var(--folder-indent, 0px));
  border: 0;
  border-radius: var(--cert-r);
  background: transparent;
  color: #44506a;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}

.certificates__folder:hover { background: #f0f5fb; color: var(--cert-accent-dark); }

/* Вложенная папка: сдвиг и вертикальная линия к родителю. Без них
   «варочные поверхности» стояли вровень с брендами и читались
   как ещё один бренд в общем алфавитном списке. */
.certificates__folder[data-parent] {
  position: relative;
  margin-left: 20px;
  padding-left: 12px;
  min-height: 36px;
  font-size: 13px;
}

.certificates__folder[data-parent]::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 1px;
  background: var(--cert-line);
}


.certificates__folder.is-active {
  background: var(--cert-accent-soft);
  color: var(--cert-accent-dark);
  font-weight: 600;
}

/* Значка папки в списке нет: в собственных меню сайта иконок не бывает
   вовсе — простые текстовые списки без маркеров, иконки живут только
   в шапке. Нарисованная папка была единственным таким элементом
   на странице и читалась как чужая. */
.certificates__empty-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  background: #b9c3d3;
}

.certificates__empty-icon::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 2px;
  width: 9px;
  height: 5px;
  border-radius: 3px 3px 0 0;
  background: inherit;
}

.certificates__folder-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* У вложенных названия длинные и похожие — «варочные поверхности газовые»
   и «варочные поверхности электрические» различались только хвостом,
   который съедало многоточие. Здесь переносим в две строки. */
.certificates__folder[data-parent] .certificates__folder-name {
  overflow: visible;
  white-space: normal;
  line-height: 1.25;
}

/* Стрелка раскрытия ветки. Живёт внутри ссылки на бренд, но клик по ней
   перехватывается скриптом и раскрывает ветку, а не уводит на папку. */
.certificates__folder-toggle {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: var(--cert-r);
  color: #949fb4;
  transform: rotate(-90deg);
  transition: transform .15s, background-color .15s, color .15s;
}

/* Пустое место там, где ветки нет: иначе значки папок не встают в столбец. */
.certificates__folder-toggle--empty { visibility: hidden; }

.certificates__folder-toggle:hover {
  background: rgba(31, 39, 51, .07);
  color: var(--cert-accent-dark);
}

.certificates__folder-toggle.is-open { transform: rotate(0deg); }

.certificates__folder-count {
  min-width: 27px;
  padding: 3px 7px;
  border-radius: var(--cert-r);
  background: rgba(31, 39, 51, .07);
  color: var(--cert-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* ————— Заголовок выдачи ————— */

.certificates__content { min-width: 0; }







.certificates__chip-filter {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  height: 51px;
  padding: 0 16px;
  border: 1px solid var(--cert-line);
  border-radius: var(--cert-r);
  background: var(--cert-surface);
  color: var(--cert-accent);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}

.certificates__chip-filter:hover { border-color: var(--cert-accent); color: var(--cert-accent-dark); }

.certificates__chip-filter.is-active {
  border-color: var(--cert-accent);
  background: var(--cert-accent);
  color: #fff;
}

/* ————— Список ————— */

.certificates__list {
  overflow: hidden;
  border: 1px solid var(--cert-line);
  border-radius: var(--cert-r-lg);
  background: var(--cert-surface);
}

/* Шапка группы при сортировке по бренду: вместо «AKPO», повторённого
   в каждой строке, — одна строка с именем и счётчиком. Счётчик — тот же,
   что в боковом списке: считается по текущему фильтру. */
.certificates__group {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 12px 16px 10px;
  border-bottom: 1px solid var(--cert-line);
  background: #f7f9fb;
}

.certificates__group-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--cert-accent-dark);
}

.certificates__group-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--cert-muted);
}

.certificates__list .certificates__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 168px auto;
  gap: 16px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--cert-line);
  transition: background-color .18s;
}

.certificates__list .certificates__item:last-child { border-bottom: 0; }
.certificates__list .certificates__item:hover { background: #f8fafd; }

/* Просроченный документ гасится, но не прячется и не становится нечитаемым.
   Прятать нельзя по двум причинам. Срок известен только у пятой части
   документов — «скрыли истёкшие» создало бы ложное впечатление, что всё
   оставшееся действует. И сам по себе истёкший сертификат не мусор: для
   партии, ввезённой в срок его действия, это ровно нужный документ.
   Поэтому приглушаем название и значок, а красную плашку оставляем
   в полную силу — она и есть сигнал. */
.certificates__item--expired .certificates__item-title a { color: #7b8593; }
.certificates__item--expired .certificates__thumb { opacity: .55; }
.certificates__item--expired .certificates__meta { color: #949dab; }
.certificates__item--expired .certificates__meta-part--brand { color: #6d84a6; }

/* Под значок из набора сайта рамка и подложка не нужны — значок
   нарисованный и сам себе карточка. Рамка остаётся только у текстовой
   плашки, которая подставляется неизвестным расширениям. */
.certificates__thumb {
  display: grid;
  width: 40px;
  height: 44px;
  place-items: center;
  border-radius: var(--cert-r);
  text-decoration: none;
}

.certificates__ext-icon {
  display: block;
  width: 34px;
  height: 34px;
}

/* Текстовая плашка для расширений, которых нет в наборе сайта.
   Отдельным классом, а не родительским селектором по содержимому:
   тот поддерживают не все браузеры, и плашка осталась бы без рамки. */
.certificates__thumb--label {
  border: 1px solid #f0d5d3;
  background: #fdf5f4;
  color: #c8403a;
}

.certificates__ext {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
}

.certificates__body { min-width: 0; }

.certificates__item-title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

/* Шаблон Aspro задаёт ссылке внутри заголовка свои 20px/700, поэтому размер
   и начертание приходится наследовать явно — иначе название файла выглядит
   крупнее, чем заголовок раздела рядом. */
.certificates__item-title a {
  color: var(--cert-text);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.certificates__item-title a:hover { color: var(--cert-accent); }

.certificates__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--cert-muted);
  font-size: 13px;
}

.certificates__meta-part + .certificates__meta-part::before {
  content: "·";
  margin-right: 6px;
  color: #b7c1d0;
}

.certificates__meta-part--brand { color: var(--cert-accent); font-weight: 700; letter-spacing: .02em; }

.certificates__expiry-cell {
  display: flex;
  justify-content: flex-end;
}

.certificates__expiry {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--cert-r);
  /* Семантические цвета срока намеренно не привязаны к акценту:
     зелёный здесь значит «действует», и только это. Пока акцент страницы
     тоже был зелёным, плашка не читалась как сигнал. */
  background: #eaf6f2;
  color: #0d4c40;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.certificates__expiry--expired { background: var(--cert-danger-soft); color: var(--cert-danger); }
.certificates__expiry--soon { background: var(--cert-warn-soft); color: var(--cert-warn); }

.certificates__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
}

.certificates__button {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  /* 36 px и 13px/400 — размеры кнопки Aspro (.btn) */
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--cert-line);
  border-radius: var(--cert-r);
  background: var(--cert-surface);
  color: var(--cert-text);
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  transition: border-color .2s, background-color .2s, color .2s;
}

.certificates__button:hover {
  border-color: var(--cert-accent);
  background: var(--cert-accent-soft);
  color: var(--cert-accent-dark);
}

.certificates__button--icon { width: 36px; padding: 0; justify-content: center; }

/* Кнопки в строках списка — без рамки: сто рамок на страницу это шум.
   Кнопка в пустом состоянии остаётся обычной — она там одна. */
.certificates__button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--cert-accent-dark);
}

.certificates__button--ghost:hover {
  border-color: transparent;
  background: var(--cert-accent-soft);
}

.certificates__button-icon,
.certificates__download-icon {
  display: block;
  width: 15px;
  height: 15px;
  background: currentColor;
}

.certificates__button-icon {
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
}

.certificates__download-icon {
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.17l3.59-3.58L18 10l-6 6-6-6 1.41-1.41L11 12.17V3zM5 19h14v2H5v-2z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 3h2v9.17l3.59-3.58L18 10l-6 6-6-6 1.41-1.41L11 12.17V3zM5 19h14v2H5v-2z'/%3E%3C/svg%3E");
}

/* ————— Пусто, пагинация, мобильный ————— */

.certificates__empty {
  padding: 62px 24px;
  border: 1px dashed #ccd5e3;
  border-radius: var(--cert-r-lg);
  background: #fafbfd;
  text-align: center;
}

.certificates__empty-icon { width: 50px; height: 35px; margin-bottom: 18px; background: #c3ccd9; }
.certificates__empty h3 { margin: 0 0 8px; }
.certificates__empty p { margin: 0 0 18px; color: var(--cert-muted); }
.certificates__folders-empty { margin: 0; padding: 24px 12px; color: var(--cert-muted); text-align: center; }

.certificates__pager {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--cert-line);
}

.certificates__pager-pages { display: flex; gap: 6px; align-items: center; justify-content: center; }

.certificates__pager-page,
.certificates__pager-gap {
  display: grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border-radius: var(--cert-r);
  color: var(--cert-text);
  text-decoration: none;
}

.certificates__pager-page:hover { background: var(--cert-accent-soft); color: var(--cert-accent-dark); }
.certificates__pager-page.is-current { background: var(--cert-accent); color: #fff; font-weight: 700; }

.certificates__pager-arrow { color: var(--cert-accent-dark); font-weight: 600; text-decoration: none; }
.certificates__pager-arrow.is-disabled { opacity: .35; }

.certificates__mobile-filter { display: none; margin-bottom: 18px; }
.certificates__label { display: block; margin-bottom: 7px; font-weight: 600; }

.certificates__select {
  width: 100%;
  height: 51px;
  padding: 0 40px 0 13px;
  border: 1px solid #ccc;
  border-radius: var(--cert-r);
  background-color: #fff;
  color: var(--cert-text);
  font: inherit;
}

.certificates__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 1199px) {
  .certificates__toolbar { flex-wrap: wrap; }
  .certificates__search-field { flex-basis: 100%; }
}

@media (max-width: 767px) {
  .certificates__mobile-filter { display: block; }
  .certificates__layout { display: block; }
  .certificates__sidebar { display: none; }

  /* На телефоне строка перестраивается в две колонки: значок и текст.
     Срок и кнопки уходят под название, поэтому документ занимает
     примерно четверть экрана, а не половину. */
  .certificates__list .certificates__item {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px 12px;
    padding: 14px;
  }

  .certificates__expiry-cell { justify-content: flex-start; }

  .certificates__thumb { width: 36px; height: 40px; }
  .certificates__body { grid-column: 2; }
  .certificates__expiry-cell { grid-column: 2; }
  .certificates__expiry-cell:empty { display: none; }
  .certificates__actions { grid-column: 2; }
  .certificates__item-title { font-size: 14px; }
  .certificates__button { height: 36px; padding: 0 13px; font-size: 13px; }
  .certificates__button--icon { width: 36px; }
}

@media (max-width: 520px) {
  .certificates__sort { width: 100%; min-width: 0; }
  .certificates__pager { gap: 8px; }
  .certificates__pager-arrow span { display: none; }
  .certificates__pager-page,
  .certificates__pager-gap { min-width: 34px; height: 34px; }
}

/* End */
/* /bitrix/templates/aspro_next/components/bitrix/news.list/certificates1/style.css?178772189022140 */