/* ============================================================
   Выкрас — страница системы покрытия (/systems/{слаг}/) и её архив.
   Токены и база — из main.css. Блок расчёта переиспользован с экрана 03,
   поэтому его стили живут в product.css и здесь не дублируются: страница
   задаёт только собственную обвязку — заголовок, текст, материалы.
   ============================================================ */

/* ---- Страница системы ---- */
.vk-sys-page{padding:40px var(--pad) 72px}
.vk-sys-page__wrap{max-width:840px;margin:0 auto}
.vk-sys-page__kicker{font:500 12px var(--ff-mono);color:var(--ink-5);margin-bottom:10px}
.vk-sys-page__title{font:600 34px/1.15 var(--ff-golos);margin:0 0 22px}
.vk-sys-page__text{font:400 16px/1.6 var(--ff-golos);color:var(--ink-72);margin-bottom:30px}
.vk-sys-page__text p{margin:0 0 14px}
.vk-sys-page__empty{font:400 15px var(--ff-golos);color:var(--ink-55)}

/* Дисклеймер невозвратности стоит перед блоком расчёта — отделяем его от
   заголовка, но держим ближе к блоку, к которому он относится. */
.vk-sys-page .vk-return-note{margin:0 0 18px}

/* Интервал обслуживания — строка данных, а не абзац: подпись слева, значение
   справа, как в параметрах блока расчёта. */
.vk-sys-page__maint{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  margin-top:28px;padding:14px 0;border-top:1px solid var(--line-12);
}
.vk-sys-page__maint-label{font:500 12px var(--ff-mono);color:var(--ink-5)}
.vk-sys-page__maint-val{font:400 15px var(--ff-golos);text-align:right}

/* ---- Материалы системы ---- */
.vk-sys-page__mats{margin-top:34px}
.vk-sys-page__mats-title{font:600 17px var(--ff-golos);margin-bottom:14px}
.vk-sys-page__mats-list{list-style:none;margin:0;padding:0}
.vk-sys-page__mat{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--line-12);
}
.vk-sys-page__mat-link{font:500 16px var(--ff-golos);color:inherit;text-decoration:none}
.vk-sys-page__mat-link:hover{text-decoration:underline}
/* Роль — служебная подпись, а не второй по важности элемент строки. */
.vk-sys-page__mat-role{font:400 12px var(--ff-mono);color:var(--ink-45);white-space:nowrap}

/* ---- Выбор базы на странице системы ----
   На карточке товара ось выбирают в колонке покупки; здесь колонки нет, и
   выбор живёт в самом блоке расчёта. Стиль намеренно тише кнопки покупки:
   это параметр расчёта, а не действие. */
.vk-pdp__sys-axis{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.vk-pdp__sys-axis-opts{display:flex;gap:8px;flex-wrap:wrap}
.vk-pdp__sys-axis-opt{
  padding:7px 14px;border:1px solid var(--line-12);border-radius:999px;background:transparent;
  font:500 14px var(--ff-golos);color:inherit;cursor:pointer;
}
.vk-pdp__sys-axis-opt:hover{border-color:var(--line-25)}
.vk-pdp__sys-axis-opt.is-active{background:var(--graphite);color:var(--surface);border-color:var(--graphite)}
/* Подсветка «выберите базу»: кнопка покупки молчит, если ось не выбрана, —
   молчание выглядит поломкой, поэтому строка выбора моргает рамкой. */
.vk-pdp__sys-axis.is-need .vk-pdp__sys-axis-opt{border-color:var(--terracotta,#B4522F)}
.vk-pdp__sys-axis-link{
  display:inline-block;margin-bottom:18px;font:500 14px var(--ff-golos);
  color:inherit;border-bottom:1px solid var(--line-25);text-decoration:none;
}

/* ---- Ссылка «вся система» в шапке блока на карточке товара ---- */
.vk-pdp__sys-link{font:500 12px var(--ff-mono);color:var(--ink-55);text-decoration:none;border-bottom:1px solid var(--line-12)}
.vk-pdp__sys-link:hover{color:var(--ink-72)}

/* ---- Архив систем ---- */
.vk-sys-arch{padding:40px var(--pad) 72px}
.vk-sys-arch__wrap{max-width:1040px;margin:0 auto}
.vk-sys-arch__kicker{font:500 12px var(--ff-mono);color:var(--ink-5);margin-bottom:10px}
.vk-sys-arch__title{font:600 34px/1.15 var(--ff-golos);margin:0 0 28px}
.vk-sys-arch__empty{font:400 15px var(--ff-golos);color:var(--ink-55)}
.vk-sys-arch__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.vk-sys-card{
  display:flex;flex-direction:column;gap:8px;padding:20px;
  background:var(--surface);border:1px solid var(--line-12);border-radius:16px;
  color:inherit;text-decoration:none;
}
.vk-sys-card:hover{border-color:var(--line-25)}
.vk-sys-card__title{font:600 17px/1.3 var(--ff-golos)}
/* Цепочка «грунт → финиш» — то, по чему систему узнают; моно, как остальные
   технические строки витрины. Длинные имена ЛКМ переносим, а не режем. */
.vk-sys-card__chain{font:400 13px/1.45 var(--ff-mono);color:var(--ink-55)}

@media (max-width:900px){
  .vk-sys-arch__grid{grid-template-columns:1fr}
  .vk-sys-page__title,.vk-sys-arch__title{font-size:27px}
}