/* mkind-pro Л7: ГОСТ-хабы + калькуляторы. Токены — design/tokens.css (цвет, шрифт сети mkind). */
/* 17.10.2026 (п.5 замечания оркестратора): крошки .st-crumbs (сетевой next.css) — ширина
   var(--wrap,1240px) + padding 20px. Наш .mk-l7-hub был 920px/16px — левый край текста не
   совпадал с левым краем крошек. Выравниваем внешний блок по той же сетке, текст — во
   внутренней обёртке .mk-l7-inner (920px), таблица/сетка товаров — на всю ширину. */
.mk-l7-hub, .mk-l7-calc { padding: 24px 20px 48px; max-width: var(--wrap, 1240px); box-sizing: border-box; margin: 0 auto; }
.mk-l7-inner { max-width: 920px; }
.mk-l7-hub h1 { margin: 0 0 12px; }
.mk-l7-lead { color: var(--mk-graphite, #21282B); opacity: .85; font-size: 1.05rem; line-height: 1.5; margin: 0 0 20px; }
.mk-l7-table-wrap { overflow-x: auto; margin: 16px 0; }
.mk-l7-dims { width: 100%; border-collapse: collapse; font-size: .92rem; }
.mk-l7-dims th, .mk-l7-dims td { padding: 8px 10px; border-bottom: 1px solid #e7e4df; text-align: left; }
.mk-l7-dims thead th { background: var(--mk-tint, #FFF1E6); font-weight: 600; }
.mk-l7-links { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mk-l7-links li { background: #F5F4F1; border-radius: 10px; padding: 10px 14px; }
.mk-l7-links a { color: var(--mk-accent, #C2410C); font-weight: 600; text-decoration: none; }
.mk-l7-count { color: #6b6b6b; font-size: .85rem; margin-left: 6px; }
.mk-l7-note { margin-top: 24px; font-size: .9rem; color: #555; }
.mk-l7-faq dt { font-weight: 600; margin-top: 12px; }
.mk-l7-faq dd { margin: 4px 0 0; color: #444; }

/* сетка товаров (п.3): 3-8 карточек вместо текстовых ссылок */
.mk-l7-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.mk-l7-card { background: #F5F4F1; border-radius: 10px; overflow: hidden; text-decoration: none; color: inherit; display: block; }
.mk-l7-card img { width: 100%; height: 120px; object-fit: contain; background: #fff; display: block; }
.mk-l7-card-name { padding: 8px 10px; font-size: .88rem; font-weight: 600; color: var(--mk-graphite, #21282B); }
.mk-l7-card-count { padding: 0 10px 10px; font-size: .8rem; color: #6b6b6b; }

/* «Показать все» (п.2): нативный <details>, без JS */
.mk-l7-more summary { cursor: pointer; font-weight: 600; color: var(--mk-accent, #C2410C); margin: 10px 0; list-style: none; }
.mk-l7-more summary::-webkit-details-marker { display: none; }
.mk-l7-more[open] summary { margin-bottom: 4px; }

.mk-l7-calc-rows { display: flex; flex-direction: column; gap: 10px; margin: 16px 0; }
.mk-l7-row { display: grid; grid-template-columns: 1.4fr 1fr .6fr 1.2fr auto; gap: 8px; align-items: center; }
.mk-l7-row select, .mk-l7-row input { padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font: inherit; }
.mk-l7-mass { font-weight: 600; color: var(--mk-graphite, #21282B); }
.mk-l7-del { background: none; border: none; font-size: 1.3rem; color: #999; cursor: pointer; }
.mk-l7-add { margin-top: 4px; }
.mk-l7-total { font-size: 1.15rem; font-weight: 700; margin-top: 12px; color: var(--mk-accent, #C2410C); }

@media (max-width: 640px) {
  .mk-l7-row { grid-template-columns: 1fr; }
}

/* 17.10.2026 (Л9): сетевой плавающий .st-fab (телефон + «Запросить счёт», bottom:12-18px,
   stalverk.css) на мобильном калькуляторе ложится прямо на поле «Количество»/селект строки —
   уже на первом экране, без скролла (короткая страница). Телефон остаётся в шапке (Д1), своего
   CTA-дубля на этой странице нет — прячем так же, как уже сделано на /cart//checkout/
   (design/tpl-svc.css), не трогая сетевой файл. */
body:has(.mk-l7-calc) .st-fab { display: none !important; }

/* п.2 замечания оркестратора: на 375 таблица — карточки, без горизонтального скролла.
   Найдено curl+CDP: .mk-btn (сетевой mk-header.css) — white-space:nowrap, с длинным текстом
   «Калькулятор веса металла по этой таблице» давал document.scrollWidth 401 > 375 — переопределяем
   только в Л7, кнопку в хедере/карточке не трогаем. */
.mk-l7-hub .mk-btn, .mk-l7-calc .mk-btn { white-space: normal; max-width: 100%; height: auto; text-align: center; }
@media (max-width: 480px) {
  .mk-l7-table-wrap { overflow-x: visible; }
  .mk-l7-dims { display: block; }
  .mk-l7-dims thead { display: none; }
  .mk-l7-dims tbody { display: block; }
  .mk-l7-dims tr { display: block; margin: 0 0 10px; padding: 10px 12px; background: #F5F4F1; border-radius: 10px; }
  .mk-l7-dims td { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: none; text-align: right; }
  .mk-l7-dims td[data-label]::before { content: attr(data-label) ":"; font-weight: 600; color: #777; text-align: left; }
  .mk-l7-dims td a { text-align: right; }
}