/* =========================================================
   МосКул — страницы «Спецификация» и «Оплата и доставка».
   Те же токены, шрифты и тонкие линии, что на главной:
   без карточек с тенями, таблица и разделы на линиях
   ========================================================= */

.mk-pg{padding-block:max(20px,calc(36*var(--u))) max(72px,calc(130*var(--u)))}
.mk-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:max(13px,calc(15*var(--u)));color:var(--mk-muted)}
.mk-crumbs a{transition:color .3s}
.mk-crumbs a:hover{color:var(--mk-blue)}
.mk-crumbs b{font-weight:500;color:var(--mk-ink-2)}
.mk-pg__head{margin-top:max(16px,calc(26*var(--u)));padding-bottom:max(26px,calc(44*var(--u)));border-bottom:1px solid var(--mk-line-2)}
/* на телефоне длинное «Спецификация» не должно упираться в край экрана */
.mk-pg__h{font-size:max(40px,min(13vw,calc(110*var(--u))));line-height:.9}
.mk-pg__lead{margin-top:max(12px,calc(20*var(--u)));max-width:46ch;font-size:max(17px,calc(24*var(--u)));line-height:1.45;color:var(--mk-ink-2)}

/* ---------------- спецификация ---------------- */
.sp{display:grid;gap:max(44px,calc(64*var(--u)));margin-top:max(24px,calc(40*var(--u)))}
.sp[hidden],.sp__empty[hidden],#specTable[hidden]{display:none}
.sp__main{min-width:0}
.sp__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-bottom:12px}
.sp__bar b{font:600 max(13px,calc(15*var(--u)))/1.3 var(--mk-f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--mk-muted)}
.sp__tools{display:flex;flex-wrap:wrap;gap:4px 26px}
.sp__tool{display:inline-flex;align-items:center;gap:8px;padding:8px 0;color:var(--mk-link);font-size:max(15px,calc(17*var(--u)));transition:color .3s}
.sp__tool:hover{color:var(--mk-blue)}
.sp__tool .mk-i{width:18px;height:18px}
.sp__tool--muted{color:var(--mk-muted)}
.sp__tool--muted:hover{color:var(--mk-bad)}

.sp__t{width:100%;border-collapse:collapse}
.sp__t th{padding:0 14px 10px 0;text-align:left;font:600 max(12px,calc(13*var(--u)))/1.2 var(--mk-f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--mk-muted);border-bottom:1px solid var(--mk-line-2)}
.sp__t td{padding:16px 14px 16px 0;vertical-align:middle;border-bottom:1px solid var(--mk-line)}
.sp__sku{font:600 max(14px,calc(16*var(--u)))/1.3 var(--mk-f-body);color:var(--mk-ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.sp__name a{display:block;font-size:max(16px,calc(19*var(--u)));line-height:1.35;color:var(--mk-ink);transition:color .3s}
.sp__name a:hover{color:var(--mk-blue)}
/* позиция не из каталога: без ссылки, но тем же шрифтом */
.sp__name .sp__nolink{display:block;font-weight:inherit;font-size:max(16px,calc(19*var(--u)));line-height:1.35;color:var(--mk-ink)}
.fstatus__csv{display:flex;margin-top:6px;padding:4px 0}
.sp__name span{display:block;margin-top:4px;font-size:max(13px,calc(15*var(--u)));line-height:1.4;color:var(--mk-muted)}
.sp__u{font-size:max(14px,calc(16*var(--u)));color:var(--mk-muted);white-space:nowrap}
.sp__x{width:44px;padding-right:0!important;text-align:right}
.sp__x button{width:38px;height:38px;display:inline-grid;place-items:center;border-radius:6px;color:var(--mk-muted);transition:color .3s,background-color .3s}
.sp__x button:hover{color:var(--mk-bad);background:rgba(176,58,46,.07)}
.sp__x .mk-i{width:18px;height:18px}

/* количество: те же кнопки, что в каталоге, но в палитре главной */
.sp .qty{display:inline-flex;align-items:center;border:1px solid var(--mk-line-2);border-radius:6px;background:var(--mk-paper);overflow:hidden}
.sp .qty__b{width:40px;height:40px;font-size:19px;line-height:1;color:var(--mk-ink);transition:background-color .2s}
.sp .qty__b:hover{background:var(--mk-bg)}
.sp .qty__n{width:56px;height:40px;border:0;border-inline:1px solid var(--mk-line);background:transparent;text-align:center;font:600 16px/1 var(--mk-f-body);color:var(--mk-ink);-moz-appearance:textfield;appearance:textfield}
.sp .qty__n::-webkit-inner-spin-button,.sp .qty__n::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sp .qty__n:focus{outline:none;background:#fff}
/* фокус в поле количества виден так же, как у остальных элементов */
.sp .qty:focus-within{border-color:var(--mk-ink)}
.sp .qty__n:focus-visible{outline:2px solid var(--mk-sky);outline-offset:-2px}
.sp .card__add{padding:8px 0;color:var(--mk-link)}
.sp__more{margin-top:20px}

.sp__form{align-self:start}
.sp__fh{font:600 max(30px,calc(46*var(--u)))/.95 var(--mk-f-head);text-transform:uppercase;color:var(--mk-ink)}

.sp__empty{margin-top:max(28px,calc(48*var(--u)));max-width:680px}
.sp__empty:focus{outline:none}
.sp__empty h2{font-size:max(34px,calc(60*var(--u)));line-height:.95}
.sp__empty p{margin-top:14px;font-size:max(16px,calc(20*var(--u)));line-height:1.55;color:var(--mk-ink-2)}
.sp__acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 34px;margin-top:26px}

@media (min-width:1024px){
  .sp{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
  .sp__form{position:sticky;top:calc(var(--mk-hdr) + 24px)}
}

/* на телефоне таблица не лезет в ширину: строка позиции становится блоком */
@media (max-width:699px){
  .sp__t thead{display:none}
  .sp__t,.sp__t tbody{display:block}
  .sp__t tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name x" "q u";align-items:center;gap:6px 12px;padding:14px 0;border-bottom:1px solid var(--mk-line)}
  .sp__t td{padding:0;border:0}
  .sp__name{grid-area:name}
  .sp__q{grid-area:q;margin-top:6px}
  .sp__u{grid-area:u;justify-self:end;margin-top:6px}
  .sp__x{grid-area:x;width:auto}
}

/* ---------------- оплата и доставка ---------------- */
.dv{display:grid;gap:max(40px,calc(64*var(--u)))}
.dv__list{min-width:0}
.dv__s{display:grid;gap:12px 24px;padding-block:max(26px,calc(42*var(--u)));border-bottom:1px solid var(--mk-line)}
.dv__h{font:600 max(30px,calc(52*var(--u)))/.95 var(--mk-f-head);text-transform:uppercase;color:var(--mk-ink)}
.dv__s p{max-width:62ch;font-size:max(16px,calc(20*var(--u)));line-height:1.6;color:var(--mk-ink-2)}
.dv__s p + p{margin-top:10px}
.dv__cta{align-self:start;margin-top:max(26px,calc(42*var(--u)));padding:max(24px,calc(38*var(--u)));background:var(--mk-bg-2);border:1px solid var(--mk-line)}
.dv__cta h2{font-size:max(30px,calc(48*var(--u)));line-height:.95}
.dv__cta p{margin-top:12px;font-size:max(15px,calc(18*var(--u)));line-height:1.55;color:var(--mk-ink-2)}
.dv__cta .mk-btn{margin-top:22px}
.dv__tel{margin-top:18px!important}
.dv__tel a{color:var(--mk-ink);white-space:nowrap;transition:color .3s}
.dv__tel a:hover{color:var(--mk-blue)}
@media (min-width:1024px){
  .dv{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
  .dv__s{grid-template-columns:calc(300*var(--u)) minmax(0,1fr)}
  .dv__cta{position:sticky;top:calc(var(--mk-hdr) + 24px)}
}

/* выпадающий список в форме спецификации — как поля ввода из mk-ui.css */
.fld select{width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--mk-line-2);border-radius:0;background:transparent;font:400 max(16px,calc(20*var(--u)))/1.4 var(--mk-f-body);color:var(--mk-ink);cursor:pointer;transition:border-color .3s}
.fld select:focus{outline:none;border-color:var(--mk-blue)}
.fld[hidden]{display:none}

/* способы получения таблицей: способ, где, когда */
.dv__t{width:100%;border-collapse:collapse;font-size:max(15px,calc(18*var(--u)));line-height:1.45}
.dv__t thead th{padding:0 16px 10px 0;text-align:left;font:600 max(12px,calc(13*var(--u)))/1.2 var(--mk-f-body);letter-spacing:.06em;text-transform:uppercase;color:var(--mk-muted);border-bottom:1px solid var(--mk-line-2)}
.dv__t tbody th,.dv__t td{padding:14px 16px 14px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--mk-line)}
.dv__t tbody th{font-weight:600;color:var(--mk-ink)}
.dv__t td{color:var(--mk-ink-2)}
.dv__map{display:table;margin-top:4px;color:var(--mk-link);border-bottom:1px solid currentColor;white-space:nowrap;transition:color .2s}
.dv__map:hover{color:var(--mk-blue)}
.dv__s .dv__note{margin-top:16px;color:var(--mk-muted)}
@media (max-width:699px){
  .dv__t thead{display:none}
  .dv__t,.dv__t tbody,.dv__t tr,.dv__t tbody th,.dv__t td{display:block}
  .dv__t tr{padding:12px 0;border-bottom:1px solid var(--mk-line)}
  .dv__t tbody th,.dv__t td{padding:2px 0;border:0}
  .dv__t tbody th{margin-bottom:2px}
}
.dv__t tbody th{width:40%}
@media (max-width:699px){.dv__t tbody th{width:auto}}

/* ---------- «Оплата и доставка»: факты, тарифы, документы (разметка из live.js) ---------- */
.dv__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));margin-top:max(26px,calc(40*var(--u)));border-top:1px solid var(--mk-line-2)}
.dv__facts>div{padding:max(16px,calc(22*var(--u))) max(16px,calc(28*var(--u))) 0 0}
.dv__facts>div + div{padding-left:max(16px,calc(28*var(--u)));border-left:1px solid var(--mk-line)}
.dv__facts dt{font:600 max(22px,calc(36*var(--u)))/1 var(--mk-f-head);text-transform:uppercase;color:var(--mk-ink)}
.dv__facts dd{margin-top:8px;font-size:max(15px,calc(18*var(--u)));line-height:1.4;color:var(--mk-muted)}
@media (max-width:767px){
  .dv__facts{grid-template-columns:1fr}
  .dv__facts>div,.dv__facts>div + div{padding:14px 0;border-left:0}
  .dv__facts>div + div{border-top:1px solid var(--mk-line)}
}
.dv__s .dv__big{font-size:max(19px,calc(26*var(--u)));font-weight:600;line-height:1.3;color:var(--mk-ink)}
.dv__t--rate td b{font-weight:700;color:var(--mk-ink);white-space:nowrap}
.dv__t--rate td span{display:block;margin-top:2px;font-size:.9em;color:var(--mk-muted)}
.dv__s p + .dv__t{margin-top:14px}
/* документы строками, как таблицы выше: название слева, пояснение справа */
.dv__docs{border-top:1px solid var(--mk-line-2)}
.dv__docs>div{display:grid;grid-template-columns:40% minmax(0,1fr);gap:4px 16px;padding:14px 0;border-bottom:1px solid var(--mk-line)}
.dv__docs dt{font-size:max(15px,calc(18*var(--u)));font-weight:600;color:var(--mk-ink)}
.dv__docs dd{font-size:max(15px,calc(18*var(--u)));line-height:1.45;color:var(--mk-ink-2)}
@media (max-width:767px){.dv__docs>div{grid-template-columns:1fr}}


/* =========================================================
   Полировка перед запуском
   ========================================================= */
/* тарифы на телефоне: направление слева, цена справа в той же строке —
   столбиком цена отрывалась от своей строки */
@media (max-width:699px){
  .dv__t--rate tr{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
  .dv__t--rate tbody th{margin:0}
  .dv__t--rate td{text-align:right}
  .dv__t:not(.dv__t--rate) td{color:var(--mk-muted)}
}
/* строки спецификации отзываются на наведение, как строки каталога */
@media (hover:hover){
  .sp__t tbody tr{transition:background-color .3s var(--mk-ease)}
  .sp__t tbody tr:hover{background:rgba(255,255,255,.6)}
}
/* боковая форма спецификации выше экрана ноутбука: не прилипает,
   иначе кнопка «Отправить» пряталась под край окна */
@media (min-width:1024px) and (max-height:1000px){
  .sp__form{position:static}
}

/* «Скопировано», «Ссылка скопирована»: короткое сообщение под кнопками */
.sp__msg{flex-basis:100%;margin:0;font-size:14px;color:var(--mk-ink-2)}
.sp__msg:empty{display:none}
/* спецификация пришла по ссылке, а своя не пуста: добавить или заменить */
.sp__import{display:grid;gap:4px;margin-top:max(24px,calc(40*var(--u)));padding:14px 18px;border-left:2px solid var(--mk-blue);background:rgba(35,100,149,.07)}
.sp__import p{margin:0;color:var(--mk-ink)}
.sp__imp{display:flex;flex-wrap:wrap;gap:0 26px}
@media (prefers-reduced-motion:no-preference){
  .sp__msg:not(:empty),.sp__import{animation:mkIn .35s var(--mk-ease)}
}

@media (prefers-reduced-motion:no-preference){
  .sp__empty{animation:mkIn .45s var(--mk-ease)}
}

/* печать спецификации: только таблица позиций, без формы и кнопок */
@media print{
  .sp{display:block}
  .sp__form,.sp__tools,.sp__msg,.sp__import,.sp__more,.sp__x,.sp__t th:last-child,.sp .qty__b{display:none!important}
  .sp .qty{border:0;background:none;outline:0}
  .sp .qty__n{width:auto;border:0;text-align:left}
  .sp__t tr{break-inside:avoid}
  .sp__t th,.sp__t td{border-color:#999}
}

/* 10.11: пустая спецификация — подсказка вместо пустой таблицы */
.sp__hint{margin-top:14px;max-width:34em;font-size:max(16px,calc(19*var(--u)));line-height:1.55;color:var(--mk-ink-2)}
.sp__tools[hidden]{display:none}

/* 11.11: оплата — просто список способов */
.dv__pay{margin:0;padding:0;list-style:none;border-top:1px solid var(--mk-line)}
.dv__pay li{padding:max(12px,calc(16*var(--u))) 0;border-bottom:1px solid var(--mk-line);font-size:max(16px,calc(19*var(--u)));color:var(--mk-ink)}