/* Каталог металлоконструкций — только то, чего нет у светильников.
   Шапка, фильтры, карточки, галерея, таблица и файлы берутся из catalog.css:
   страницы обоих каталогов собраны одними блоками, и расходиться им не в чем.
   Цвета, рамки и скругления — те же, что в catalog.css. */

/* Разделы: вложенность и подпись производителя в списке */
.mk-page .cat-cats .mk-cats-sub a { padding-left: calc(10px + 14px * var(--mk-depth, 1)); }
.mk-page .cat-cats .mk-cats-mfr { margin: 12px 0 4px; padding: 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6b7280; }
.mk-filters-hint { margin: 12px 2px 0; font-size: 13px; line-height: 1.45; color: #6b7280; }

/* Название модификации под артикулом в таблице */
.mk-mod-name { margin-top: 2px; font-size: 13px; line-height: 1.35; color: #4b5563; font-weight: 400; }

.mk-note { margin: -6px 0 14px; font-size: 14px; color: #6b7280; }

.mk-videos { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.mk-videos a { padding: 8px 14px; border: 1px solid #e5e7eb; border-radius: 12px; font-size: 14px; color: #1f2937; text-decoration: none; }
.mk-videos a:hover { border-color: #c7d2fe; }

/* Особенности и преимущества.
   Раньше сетка была auto-fill: при трёх карточках справа оставались пустые
   колонки, и блок жался влево под заголовком. Теперь колонок столько, сколько
   карточек (--mk-cols из разметки, не больше 3 и 4), ширина делится поровну,
   а неполный ряд встаёт по центру. */
.mk-features, .mk-advantages { --mk-gap: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--mk-gap); margin: 14px 0 32px; }
.mk-features > .mk-feature,
.mk-advantages > .mk-advantage { flex: 0 1 calc((100% - var(--mk-gap) * (var(--mk-cols, 3) - 1)) / var(--mk-cols, 3)); min-width: 0; box-sizing: border-box; }
.mk-feature p a, .mk-advantage p a { color: #2563eb; }

/* Особенности */
.mk-feature { display: flex; gap: 14px; padding: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; }
.mk-feature img { flex: 0 0 92px; width: 92px; height: 92px; object-fit: contain; border-radius: 10px; background: #f8fafc; }
.mk-feature b { display: block; margin-bottom: 4px; font-size: 14px; color: #1f2937; }
.mk-feature p { margin: 0; font-size: 14px; line-height: 1.5; color: #4b5563; }

/* Преимущества */
.mk-advantage { padding: 16px; background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 16px; }
.mk-advantage img { width: 100%; height: 120px; object-fit: contain; margin-bottom: 10px; }
.mk-advantage b { display: block; font-size: 15px; line-height: 1.35; color: #1f2937; }
.mk-advantage p { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #4b5563; }

/* Состав осветительных комплексов */
.mk-complexes { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 32px; }
.mk-complex { padding: 14px 16px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; }
.mk-complex > b { color: #1f2937; }
.mk-complex ol { margin: 10px 0 0; padding-left: 20px; }
.mk-complex li { margin: 6px 0; font-size: 14px; line-height: 1.4; }
.mk-complex__kind { display: inline-block; margin-right: 8px; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; font-size: 11px; color: #6b7280; }

/* Совместимые серии — обычная сетка карточек каталога, только отступ снизу */
.mk-compat { margin-bottom: 32px; }

/* Подходящие светильники */
/* Подходящие светильники — теми же плитками, что опоры и кронштейны;
   подзаголовок нужен, когда светильники разбиты по назначениям. */
.mk-lums__title { margin: 18px 0 10px; font-size: 16px; font-weight: 600; color: #1f2937; }
.mk-lums__title .cat-mods-count { margin-left: 6px; }

/* Объекты */
.mk-portfolio { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 32px; }
.mk-portfolio figure { margin: 0; }
.mk-portfolio img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.mk-portfolio figcaption { margin-top: 6px; font-size: 14px; color: #1f2937; }

/* Файлы модификации: кнопка в таблице и окно со списком */
.mk-page .cat-mods td.mk-mod-files { white-space: nowrap; vertical-align: middle; }
.mk-files-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: #1f2937; cursor: pointer; white-space: nowrap; transition: border-color .15s, color .15s; }
.mk-files-btn:hover, .mk-files-btn:focus-visible { border-color: #2563eb; color: #2563eb; }
.mk-files-btn__n { min-width: 20px; padding: 0 7px; border: 1px solid #bfdbfe; border-radius: 20px; background: #eff6ff; font-size: 12px; font-weight: 700; color: #2563eb; text-align: center; }
.mk-files-btn__ext { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #6b7280; }
.mk-files-modal .cat-modal__box { width: min(94vw, 560px); }
.mk-files-modal .cat-modal__head h3 { font-size: 16px; line-height: 1.35; padding-right: 12px; }
.mk-files-modal .cat-modal__body { padding: 16px 22px 20px; }
.mk-files-modal .cat-files { margin: 0; }
.mk-files-modal .cat-files__list { flex-direction: column; }
.mk-files-modal .cat-file { width: 100%; box-sizing: border-box; }
.mk-files-modal .cat-file__label { flex: 1; }

@media (max-width: 1024px) {
    /* !important перекрывает --mk-cols из атрибута style */
    .mk-features, .mk-advantages { --mk-cols: 2 !important; }
}

@media (max-width: 640px) {
    .mk-features, .mk-advantages { --mk-cols: 1 !important; }
    .mk-complexes { grid-template-columns: 1fr; }
}