/* =========================================================
   МосКул — дизайн-система по макету.
   --u — пиксель макета, уменьшенный на 10%: на экране 1600 он равен 1 px,
   ниже уменьшается пропорционально до 1024, выше растёт до экрана 1920.
   Телефон и узкий планшет стоят на нижней границе: там своя компоновка.
   Заголовки — Sofia Sans Extra Condensed 500, текст — Nunito Sans:
   оба подобраны наложением букв на макет.
   ========================================================= */
:root{
  --u:clamp(.64px, calc(100vw / 1600), 1.2px);
  --mk-bg:#EEF0F0; --mk-bg-2:#F4F5F5; --mk-paper:#FAFBFB;
  --mk-ink:#0E1A20; --mk-ink-2:#2B363C; --mk-muted:#5E686F; --mk-muted-2:#98A1A6;
  --mk-line:#D6DBDD; --mk-line-2:#C2C9CC;
  --mk-blue:#236495; --mk-blue-h:#1A527D; --mk-link:#3C71A3; --mk-sky:#3E9CD9;
  --mk-night:#0C1C24; --mk-bad:#B03A2E;
  --mk-f-head:"Sofia Sans Extra Condensed","Arial Narrow",sans-serif;
  --mk-f-body:"Nunito Sans","Segoe UI",sans-serif;
  --mk-pad:max(20px, calc(50 * var(--u)));
  --mk-gap:max(14px, calc(24 * var(--u)));
  --mk-hdr:max(64px, calc(82 * var(--u)));
  --mk-ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--mk-hdr)}
body{margin:0;background:var(--mk-bg);color:var(--mk-ink-2);font:400 max(15px,calc(18*var(--u)))/1.55 var(--mk-f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--mk-sky);outline-offset:3px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:8px;top:-60px;z-index:300;padding:10px 16px;background:var(--mk-ink);color:#fff;border-radius:4px;transition:top .3s}
.skip:focus{top:8px}

.mk-wrap{width:100%;max-width:1920px;margin-inline:auto;padding-inline:var(--mk-pad)}
.mk-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--mk-gap)}
.mk-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mk-h{font-family:var(--mk-f-head);font-weight:500;text-transform:uppercase;line-height:.94;letter-spacing:-.004em;color:var(--mk-ink)}
.mk-sec{position:relative}


/* кнопка: синяя капсула со стрелкой, при наведении стрелка уходит вперёд */
.mk-btn{display:inline-flex;align-items:center;justify-content:center;gap:max(18px,calc(30*var(--u)));height:max(50px,calc(62*var(--u)));padding:0 max(22px,calc(34*var(--u))) 0 max(26px,calc(40*var(--u)));border-radius:999px;background:var(--mk-blue);color:#fff;font:500 max(15px,calc(21*var(--u)))/1 var(--mk-f-body);white-space:nowrap;transition:background-color .45s var(--mk-ease),box-shadow .45s var(--mk-ease)}
.mk-btn .mk-i{width:max(18px,calc(26*var(--u)));height:max(18px,calc(26*var(--u)));stroke-width:1.7;transition:translate .6s var(--mk-ease)}
.mk-btn:hover{background:var(--mk-blue-h);box-shadow:0 14px 30px -18px rgba(35,100,149,.85)}
.mk-btn:hover .mk-i{translate:6px 0}
.mk-btn--line{background:transparent;color:var(--mk-ink);box-shadow:inset 0 0 0 1px var(--mk-line-2)}
.mk-btn--line:hover{background:var(--mk-ink);color:#fff;box-shadow:none}

/* ссылка со стрелкой: подчёркивание прорисовывается слева направо */
.mk-link{display:inline-flex;align-items:center;gap:max(12px,calc(26*var(--u)));color:var(--mk-link);font-size:max(15px,calc(21*var(--u)));line-height:1.3;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .55s var(--mk-ease),color .3s}
.mk-link .mk-i{width:max(18px,calc(27*var(--u)));height:max(18px,calc(27*var(--u)));stroke-width:1.5;transition:translate .55s var(--mk-ease)}
.mk-link:hover{background-size:100% 1px;color:var(--mk-blue)}
.mk-link:hover .mk-i{translate:5px 0}

/* стрелки листания */
.mk-arrows{display:flex;gap:max(16px,calc(30*var(--u)))}
.mk-arr{width:max(40px,calc(44*var(--u)));height:max(40px,calc(44*var(--u)));display:grid;place-items:center;color:var(--mk-ink);border-radius:50%;transition:color .3s,background-color .3s}
.mk-arr .mk-i{width:max(24px,calc(34*var(--u)));height:max(24px,calc(34*var(--u)));stroke-width:1.4;transition:translate .5s var(--mk-ease)}
.mk-arr:hover:not(:disabled){background:rgba(14,26,32,.06)}
.mk-arr[data-dir="-1"]:hover:not(:disabled) .mk-i{translate:-4px 0}
.mk-arr[data-dir="1"]:hover:not(:disabled) .mk-i{translate:4px 0}
.mk-arr:disabled{color:var(--mk-line-2);cursor:default}

/* ---------------- шапка ---------------- */
.mk-hdr{position:fixed;inset:0 0 auto;z-index:100;height:var(--mk-hdr);border-bottom:1px solid rgba(14,26,32,.07);transition:background-color .5s var(--mk-ease),border-color .5s,translate .6s var(--mk-ease)}
.mk-hdr.is-solid{background:rgba(238,240,240,.97);border-color:var(--mk-line)}
.mk-hdr.up{translate:0 -100%}
.mk-hdr__in{height:100%;display:flex;align-items:center}
.mk-logo{font:600 max(26px,calc(40*var(--u)))/1 var(--mk-f-head);letter-spacing:.012em;text-transform:uppercase;color:var(--mk-ink)}
.mk-nav{display:none;gap:calc(44*var(--u));margin-left:calc(83*var(--u))}
.mk-nav a{position:relative;padding:6px 0;font-size:max(14px,calc(16.5*var(--u)));color:var(--mk-ink-2)}
.mk-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;scale:0 1;transform-origin:right;transition:scale .5s var(--mk-ease)}
.mk-nav a:hover::after,.mk-nav a.is-on::after{scale:1 1;transform-origin:left}
.mk-hdr__r{margin-left:auto;display:flex;align-items:center;gap:max(6px,calc(18*var(--u)))}
.mk-tel{display:none;margin-right:calc(10*var(--u));font-size:max(14px,calc(16*var(--u)));letter-spacing:.01em;color:var(--mk-ink)}
.mk-tel:hover{color:var(--mk-blue)}
.mk-icbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:6px;color:var(--mk-ink);transition:background-color .3s}
.mk-icbtn:hover{background:rgba(14,26,32,.06)}
.mk-icbtn .mk-i{width:20px;height:20px}
.mk-burger{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px}
.mk-burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:translate .45s var(--mk-ease),rotate .45s var(--mk-ease),width .45s var(--mk-ease)}
.mk-burger span:nth-child(2){width:15px}
.mk-burger[aria-expanded="true"] span:nth-child(1){translate:0 3.75px;rotate:45deg}
.mk-burger[aria-expanded="true"] span:nth-child(2){width:22px;translate:0 -3.75px;rotate:-45deg}
@media (min-width:1024px){.mk-nav{display:flex}.mk-tel{display:inline}}

/* меню во весь экран */
.mk-menu{position:fixed;inset:var(--mk-hdr) 0 0;z-index:90;background:var(--mk-bg);overflow-y:auto;padding:max(24px,calc(40*var(--u))) var(--mk-pad) 56px;display:grid;gap:36px;align-content:start;animation:mkIn .5s var(--mk-ease)}
.mk-menu[hidden]{display:none}
.mk-menu__nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));column-gap:var(--mk-gap)}
.mk-menu__nav a{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--mk-line);font:500 clamp(28px,calc(44*var(--u)),56px)/1.05 var(--mk-f-head);text-transform:uppercase;color:var(--mk-ink);transition:color .3s,padding .5s var(--mk-ease)}
.mk-menu__nav a:hover{color:var(--mk-blue);padding-left:8px}
.mk-menu__nav .mk-i{width:24px;height:24px;stroke-width:1.4}
.mk-menu__ct{display:grid;gap:8px;font-size:16px;color:var(--mk-ink-2)}
.mk-menu__ct a:hover{color:var(--mk-blue)}
@keyframes mkIn{from{opacity:0;translate:0 -8px}}

/* поиск по каталогу */
.mk-find{position:fixed;inset:var(--mk-hdr) 0 auto;z-index:95;background:var(--mk-bg-2);border-bottom:1px solid var(--mk-line);padding-block:14px;animation:mkIn .45s var(--mk-ease)}
.mk-find[hidden]{display:none}
.mk-find__in{display:flex;align-items:center;gap:12px}
.mk-find input{flex:1;min-width:0;height:52px;padding:0 2px;border:0;border-bottom:1px solid var(--mk-line-2);border-radius:0;background:transparent;font:400 max(17px,calc(22*var(--u)))/1 var(--mk-f-body);color:var(--mk-ink)}
.mk-find input:focus{outline:none;border-color:var(--mk-blue)}
.mk-find input::-webkit-search-cancel-button{display:none}
.mk-find .mk-btn{height:48px}
/* подсказки под строкой поиска: позиции строками, как в каталоге */
.mk-find__in{position:relative}
.mk-find__sug{position:absolute;left:var(--mk-pad);right:var(--mk-pad);top:calc(100% + 14px);z-index:2;max-width:880px;max-height:calc(100dvh - var(--mk-hdr) - 110px);overflow-y:auto;background:var(--mk-paper);border:1px solid var(--mk-line);border-top:0;box-shadow:0 24px 40px -28px rgba(14,26,32,.45)}
.mk-find__sug[hidden]{display:none}
.mk-find__sug a{display:grid;grid-template-columns:minmax(84px,max-content) 1fr;gap:4px 18px;padding:12px 16px;color:var(--mk-ink);font-size:15px;line-height:1.35;border-top:1px solid var(--mk-line)}
.mk-find__sug li:first-child a{border-top:0}
.mk-find__sku{color:var(--mk-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-find__sug [aria-selected="true"] a,.mk-find__sug a:hover{background:var(--mk-bg-2)}
.mk-find__sug [aria-selected="true"] .mk-find__nm{color:var(--mk-blue)}
.mk-find__all a{display:block;color:var(--mk-link)}
.mk-find__none{padding:12px 16px;font-size:15px;color:var(--mk-muted)}
@media (max-width:559px){.mk-find__sug a{grid-template-columns:1fr;gap:2px}}

/* сверка с макетом: заголовки в макете плотнее, чем 500 */
.mk-h{font-weight:600}
/* переносы строк как в макете; на телефоне текст переносится сам */
@media (max-width:767px){.mk-br{display:none}}

/* спецификация в шапке: иконка со счётчиком позиций, на широком экране и подпись */
.mk-spec{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px;border-radius:6px;color:var(--mk-ink);font-size:max(14px,calc(16*var(--u)));white-space:nowrap;transition:background-color .3s,color .3s}
.mk-spec:hover{background:rgba(14,26,32,.06)}
.mk-spec.is-on{color:var(--mk-blue)}
.mk-spec .mk-i{width:20px;height:20px}
.mk-spec__t{display:none}
.mk-spec .cnt{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--mk-blue);color:#fff;font:700 12px/20px var(--mk-f-body);font-style:normal;text-align:center}
@media (min-width:1280px){.mk-spec__t{display:inline}}
/* пятый пункт меню и спецификация не оставляют места телефону на узком десктопе */
@media (min-width:1024px) and (max-width:1279px){.mk-tel{display:none}}

/* ---------- полировка перед запуском: типографика и нажатие ----------
   Заголовки делятся на строки ровнее, у абзацев не остаётся слова-сироты
   в последней строке. Кнопки при нажатии чуть проседают — только
   если пользователь не просил убрать движение */
h1,h2,h3,.mk-h{text-wrap:balance}
p,dd,li{text-wrap:pretty}
.mk-btn,.mk-arr,.mk-icbtn,.mk-spec,.ct-act .card__add,.ct-act .qty__b,.sp .qty__b{-webkit-tap-highlight-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .mk-btn{transition:background-color .45s var(--mk-ease),box-shadow .45s var(--mk-ease),scale .25s var(--mk-ease)}
  .mk-btn:active:not(:disabled),.ct-act .card__add:active,.mcta__btn:active{scale:.97}
  .ct-act .card__add,.mcta__btn{transition:background-color .25s,scale .25s var(--mk-ease)}
  .mk-arr .mk-i{transition:translate .5s var(--mk-ease),scale .2s var(--mk-ease)}
  .mk-arr:active:not(:disabled) .mk-i{scale:.9}
}

/* между страницами сайта — короткое растворение (Chrome, Edge, Safari 18+;
   где не поддерживается, страница просто открывается), шапка стоит на месте.
   Счётчик спецификации в шапке коротко «подпрыгивает», когда добавили позицию */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
  .mk-hdr{view-transition-name:mk-hdr}
  .cnt.is-bump{animation:mkBump .5s var(--mk-ease)}
}
@keyframes mkBump{35%{scale:1.35}}

/* «Уменьшить движение» в системе: всё, что едет, встаёт на место сразу —
   шапка, меню, ленты, увеличение фото; плавная прокрутка тоже выключается */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

/* печать: лист без шапки, меню, плашки и подвала; свои правила у спецификации
   (mk-spec.css) и страницы позиции (mk-catalog.css) */
@media print{
  html{scroll-behavior:auto}
  html,body,.mk-page{background:#fff!important}
  body{color:#000;padding:0!important}
  /* на листе всё в конечном виде: панели вкладок не застревают прозрачными посреди анимации */
  *,*::before,*::after{animation:none!important;transition:none!important}
  .skip,.mk-hdr,.mk-menu,.mk-find,.mcta,.mk-ftr{display:none!important}
  .js [data-rv],.js [data-rv]>*,.js .mk-lines .ln>span{opacity:1!important;translate:none!important;clip-path:none!important}
}

/* 11.11: знак логотипа клиента слева от названия, в шапке и подвале */
.mk-logo{display:inline-flex;align-items:center;gap:.32em}
.mk-logo__i{display:block;width:auto;height:1.3em;flex:none}

/* 11.11: в шапке два номера столбиком: главный и дополнительный */
.mk-tels{display:none;flex-direction:column;align-items:flex-end;margin-right:calc(10*var(--u))}
.mk-tels .mk-tel{display:block;margin:0;font-size:max(13px,calc(15*var(--u)));line-height:1.3}
@media (min-width:1280px){.mk-tels{display:flex}}