/* =========================================================
   МосКул — главная: 04 что есть на складе, 05 поиск по фото,
   06 процесс заказа с пошаговой прокруткой.
   ========================================================= */

/* ---------------- 04 рельс категорий: активная карточка крупная ---------------- */
.mk-rail{padding:calc(110*var(--u)) 0 calc(90*var(--u));overflow:hidden}
.mk-rail__h{font-size:calc(75*var(--u));line-height:.95}
.mk-rail__view{position:relative;margin-top:calc(34*var(--u));margin-left:calc(-30*var(--u))}
.mk-rail__row{display:flex;align-items:flex-start;gap:calc(8*var(--u));transition:translate .6s var(--mk-ease);will-change:transform}
.mk-rail__item{position:relative;flex:0 0 calc(248*var(--u));height:calc(425*var(--u));overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 calc(28*var(--u)) calc(28*var(--u));text-align:left;color:#fff;background:var(--mk-night);transition:flex-basis 1s var(--mk-ease),height 1s var(--mk-ease),padding .9s var(--mk-ease)}
.mk-rail__item img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:scale .8s var(--mk-ease),filter .5s var(--mk-ease)}
.mk-rail__item::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,18,24,0) 38%,rgba(8,18,24,.78) 100%);transition:background-color .5s var(--mk-ease)}
.mk-rail__t,.mk-rail__d,.mk-rail__count{position:relative;z-index:2}
.mk-rail__t{font:500 calc(43*var(--u))/.98 var(--mk-f-head);text-transform:uppercase;transition:font-size .6s var(--mk-ease)}
.mk-rail__d{max-height:0;opacity:0;overflow:hidden;font-size:calc(23*var(--u));line-height:1.55;color:rgba(255,255,255,.88);transition:max-height .55s var(--mk-ease),opacity .4s,margin .55s var(--mk-ease)}
.mk-rail__count{position:absolute;left:calc(43*var(--u));bottom:calc(30*var(--u));opacity:0;font:400 max(12px,calc(15*var(--u)))/1 var(--mk-f-body);letter-spacing:.08em;color:rgba(255,255,255,.8);transition:opacity .5s}
@media (hover:hover){
  .mk-rail__item:hover img{scale:1.04}
}
.mk-rail__item.is-on{flex-basis:calc(623*var(--u));height:calc(503*var(--u));padding:0 calc(43*var(--u)) calc(118*var(--u));cursor:default}
.mk-rail__item.is-on::before{background-color:rgba(8,18,24,.34)}
.mk-rail__item.is-on .mk-rail__t{font-size:calc(61*var(--u))}
.mk-rail__item.is-on .mk-rail__d{max-height:6em;opacity:1;margin-top:calc(22*var(--u));transition-delay:0s,.25s,0s}
.mk-rail__item.is-on .mk-rail__count{opacity:1;transition-delay:.3s}
.mk-rail__foot{position:absolute;left:calc(631*var(--u) + 30*var(--u));right:calc(30*var(--u) - 30*var(--u));top:calc(425*var(--u));height:calc(78*var(--u));display:flex;align-items:center;justify-content:space-between;gap:var(--mk-gap)}
.mk-rail__prog{display:flex;align-items:center;gap:calc(6*var(--u));width:calc(330*var(--u))}
.mk-rail__prog i{flex:1;height:1px;background:var(--mk-line-2);transition:background-color .6s,height .6s}
.mk-rail__prog i.is-on{height:2px;background:var(--mk-blue)}

/* ---------------- 05 не знаете, что нужно ---------------- */
.mk-ps{position:relative;isolation:isolate;overflow:hidden;min-height:calc(760*var(--u))}
.mk-ps__media{position:absolute;top:0;right:0;bottom:0;left:calc(634*var(--u));z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.mk-ps__media img{width:100%;height:100%;object-fit:cover;object-position:55% 50%;will-change:transform}
.mk-ps__body{padding-top:calc(70*var(--u))}
.mk-ps__h{font-size:calc(105*var(--u));line-height:.88}
.mk-ps__p{margin-top:calc(50*var(--u));max-width:calc(440*var(--u));font-size:calc(25*var(--u));line-height:1.58;color:var(--mk-ink-2)}
.mk-ps .mk-btn{margin-top:calc(46*var(--u));height:max(50px,calc(70*var(--u)));font-size:max(15px,calc(26*var(--u)));padding-inline:calc(48*var(--u)) calc(40*var(--u))}
.mk-ps__note{margin-top:calc(56*var(--u));font-size:calc(24*var(--u));line-height:1.4;color:var(--mk-muted)}

/* ---------------- 06 процесс: фото стоит, шаги сменяются по прокрутке ---------------- */
.mk-pr{position:relative;height:calc(2.2 * (100svh - var(--mk-hdr)))}
.mk-pr__stick{position:sticky;top:var(--mk-hdr);height:calc(100svh - var(--mk-hdr));min-height:calc(745*var(--u));overflow:hidden;isolation:isolate}
.mk-pr__media{position:absolute;top:0;right:0;bottom:0;left:calc(660*var(--u));z-index:-1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.mk-pr__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;scale:1.08;transition:opacity .6s var(--mk-ease),scale .9s var(--mk-ease)}
.mk-pr__img.is-on{opacity:1;scale:1}
.mk-pr__body{position:relative;padding-top:calc(44*var(--u));width:calc(455*var(--u) + var(--mk-pad))}
.mk-pr__h{font-size:calc(70*var(--u));line-height:.9;padding-bottom:calc(34*var(--u));border-bottom:1px solid var(--mk-line-2)}
.mk-pr__steps{display:grid;grid-template-columns:calc(350*var(--u)) 1fr}
.mk-pr__step{display:grid;grid-template-columns:calc(95*var(--u)) 1fr;padding-block:calc(38*var(--u)) calc(34*var(--u));border-bottom:1px solid var(--mk-line-2);grid-column:1/-1;transition:opacity .4s var(--mk-ease)}
.mk-pr__step:nth-child(3){grid-column:1;border-bottom:0;border-right:1px solid var(--mk-line-2)}
.mk-pr__step:nth-child(4){grid-column:2;border-bottom:0;padding-left:calc(58*var(--u));grid-template-columns:calc(90*var(--u)) calc(200*var(--u))}
.mk-pr__n{font:500 calc(50*var(--u))/.9 var(--mk-f-head);color:var(--mk-muted-2);transition:color .4s var(--mk-ease),translate .4s var(--mk-ease)}
.mk-pr__t{font:700 calc(22.5*var(--u))/1.1 var(--mk-f-body);letter-spacing:.02em;text-transform:uppercase;color:var(--mk-ink-2)}
.mk-pr__d{margin-top:calc(10*var(--u));font-size:calc(22*var(--u));line-height:1.5;color:var(--mk-muted);transition:color .4s var(--mk-ease)}
.mk-pr__steps.is-live .mk-pr__step{opacity:.42}
.mk-pr__steps.is-live .mk-pr__step.is-on{opacity:1}
.mk-pr__step.is-on .mk-pr__n{color:var(--mk-blue);translate:calc(4*var(--u)) 0}
.mk-pr__step.is-on .mk-pr__d{color:var(--mk-ink-2)}
.mk-pr__bar{position:absolute;left:var(--mk-pad);right:calc(100% - var(--mk-pad) - 455*var(--u));bottom:calc(64*var(--u));height:1px;background:var(--mk-line)}
.mk-pr__bar i{display:block;height:100%;background:var(--mk-blue);transform-origin:left;scale:var(--p,0) 1}

/* ---------- сверка с макетом, проход 1 ---------- */
.mk-rail{padding:calc(50*var(--u)) 0 calc(60*var(--u))}
/* видно ровно четыре карточки: пятая не должна торчать полоской у края */
.mk-rail__view{margin-right:calc(-26*var(--u));overflow:hidden}
.mk-rail__t{font-weight:600}
.mk-rail__item{padding-bottom:calc(22*var(--u))}
.mk-rail__item.is-on{padding-bottom:calc(118*var(--u))}
.mk-rail__item.is-on .mk-rail__t{font-size:calc(57*var(--u))}
.mk-rail__item.is-on .mk-rail__d{margin-top:calc(16*var(--u))}
.mk-rail__d{max-width:calc(360*var(--u))}
.mk-ps__p{margin-top:calc(22*var(--u));font-weight:500}
.mk-ps .mk-btn{height:max(50px,calc(74*var(--u)));padding-inline:calc(52*var(--u)) calc(44*var(--u))}
.mk-ps__note{margin-top:calc(48*var(--u))}
.mk-pr__h{font-size:calc(64*var(--u));padding-bottom:calc(22*var(--u))}
.mk-pr__body{width:calc(458*var(--u))}
.mk-pr__step{grid-template-columns:calc(104*var(--u)) 1fr}
.mk-pr__step:nth-child(4){grid-template-columns:calc(96*var(--u)) calc(200*var(--u))}
.mk-pr__d{max-width:calc(240*var(--u))}

/* ---------- сверка с макетом, проход 2 ---------- */
.mk-rail{padding:calc(36*var(--u)) 0 calc(40*var(--u))}
.mk-pr__step{padding-top:calc(24*var(--u))}
.mk-pr__n{font-size:calc(56*var(--u));color:var(--mk-ink-2)}

/* ---------- сверка с макетом, проход 3 ---------- */
.mk-ps{min-height:calc(744*var(--u))}