/*!
 * Страница /page/configurator. Отдельным файлом, а не в fs-configurator.css:
 * на страницах каталога эти правила не нужны ни разу, а бюджет основного файла
 * тратится на каждой загрузке магазина.
 *
 * Строка слота переиспользует классы .fsc-slot из основного файла — здесь
 * только широкий вариант и обвязка страницы.
 */


.fsc-page {
  --fsc-bg-row: #1b1e24;
  --fsc-muted: #8b93a1;
  --fsc-error: #ff5c5c;
  --fsc-ok: #4ec77a;
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
}

.fsc-page__title { margin: 0 0 8px; }

.fsc-page__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 14px;
}
.fsc-page__total { font-size: 28px; font-weight: 700; }
.fsc-page__missing, .fsc-page__issues { font-size: 13px; color: var(--fsc-muted); }

.fsc-page__issue-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.fsc-page__issue-list[hidden] { display: none; }
.fsc-issue {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  background: rgba(255, 92, 92, .12);
  border-left: 3px solid var(--fsc-error);
}
.fsc-issue[data-level="warn"] {
  background: rgba(255, 193, 76, .12);
  border-left-color: #ffc14c;
}

.fsc-page__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* Строки компонентов ужаты: при 56-пиксельной картинке и padding 12 страница
   растягивалась на два экрана, хотя полезного текста в строке одна строчка. */
.fsc-slot--wide .fsc-slot__link { padding: 7px 12px; gap: 12px; }
.fsc-slot--wide .fsc-slot__thumb { width: 40px; height: 40px; }
.fsc-slot--wide .fsc-slot__value { font-size: 14px; white-space: normal; }
.fsc-slot--wide .fsc-slot__price { font-size: 14px; }
.fsc-slot__action { margin-left: auto; font-size: 13px; color: var(--fsc-muted); white-space: nowrap; }
.fsc-slot--wide[data-filled="1"] .fsc-slot__action { visibility: hidden; }

/* На широкой странице плиток в ряд помещается больше, и они показываются
   целиком: раньше жёсткая высота резала кнопку пополам. */
.fsc-page .fsc-fps__list { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fsc-page .fsc-fps__logo,
.fsc-page .fsc-fps__stub { aspect-ratio: 360 / 305; height: auto; }
.fsc-page .fsc-fps__value { font-size: 20px; padding: 14px 8px 6px; }
.fsc-page .fsc-fps { border-top: 0; padding: 14px 0 0; }

.fsc-page__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; }
.fsc-page__note { flex: 1 1 100%; margin: 0; font-size: 12px; color: var(--fsc-muted); }

@media (max-width: 760px) {
  .fsc-page__foot .fsc-btn { flex: 1 1 100%; }
}