/* Макеты приложений на лендинге — вёрстка вместо картинок (чёткие на любом экране).
   Макет: Figma «Landing page» — Hero/Phones (310:807), POS screen (310:1174, копия «POS v4 · Продажа» 345:832),
   Buyers/Phones (310:1374). Каждый макет свёрстан в пикселях макета на «сцене» .mk-stage и масштабируется
   под ширину контейнера .mk: scale = ширина контейнера / --mk-w (CSS: container query units; landing.js
   уточняет через ResizeObserver). Иконки — /site/mockups.svg. Все классы с префиксом mk-. */

/* ---------- Общее ---------- */
.mk { position: relative; container-type: inline-size; }
.mk-stage {
  position: absolute; left: 0; top: 0; width: var(--mk-w); height: var(--mk-h);
  transform-origin: 0 0; transform: scale(var(--mk-k, tan(atan2(100cqw, var(--mk-w)))));
  font: 400 12px/1.21 var(--font, Inter, system-ui, sans-serif); color: #151515; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; user-select: none; pointer-events: none; text-align: left;
}
.mk-stage *, .mk-stage *::before, .mk-stage *::after { box-sizing: border-box; }
.mk-stage ul, .mk-stage ol { list-style: none; margin: 0; padding: 0; }
.mk-stage p { margin: 0; }
.mk-stage b { font-weight: 700; }
.mk-stage i, .mk-stage em { font-style: normal; }
.mk-i { display: block; flex: none; width: 1em; height: 1em; max-width: none; fill: currentColor; overflow: visible; }
.mk-a { position: absolute; }
.mk-t { position: absolute; white-space: nowrap; }
.mk-col { display: flex; flex-direction: column; min-width: 0; }

.mk-phone { position: absolute; background: #121214; overflow: hidden; }
.mk-screen { position: absolute; overflow: hidden; }
.mk-time { font-size: 11.22px; font-weight: 600; color: #151515; }
.mk-time--light, .mk-light { color: #fff; }
.mk-home-ind { position: absolute; background: #151515; border-radius: 2px; }

/* ---------- Первый экран: два телефона (560 × 640) ---------- */
.hero__media.mk { --mk-w: 560px; --mk-h: 640px; }
.mk-hero__glow { position: absolute; left: 30px; top: 60px; width: 520px; height: 520px; border-radius: 50%; background: #ffeef0; }

/* «SM Магазин» — главная владельца */
.mk-hero__owner { left: 20px; top: 70px; width: 271px; height: 570px; border-radius: 29.04px; box-shadow: 0 15.84px 31.68px rgba(15, 18, 26, .18); }
.mk-hero__owner > .mk-screen { left: 7px; top: 7px; width: 257px; height: 557px; border-radius: 23.76px; background: #f7f7f8; }
.mk-hero__owner .mk-i { font-size: 15.84px; }
.mk-own {
  position: absolute; left: 0; top: 32px; width: 257px; height: 494px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10.56px; padding: 5.28px 10.56px 15.84px;
}
.mk-own > * { flex: none; }
.mk-own__head { display: flex; align-items: center; gap: 7.92px; height: 33px; }
.mk-own__head .mk-col { flex: 1; gap: 1.32px; }
.mk-own__shop { font-size: 8.58px; font-weight: 500; color: #6b6b70; }
.mk-own__city { display: flex; align-items: center; gap: 2.64px; font-size: 18.48px; font-weight: 700; }
.mk-own__city .mk-i { font-size: 17.16px; }
.mk-own__bell { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #fff; }
.mk-own__alert {
  display: flex; align-items: center; gap: 7.92px; padding: 10.56px; border-radius: 13.2px; background: #e11d2a; color: #fff;
}
.mk-own__alert .mk-col { flex: 1; gap: 1.32px; }
.mk-own__alert b { font-size: 10.56px; }
.mk-own__alert small { font-size: 8.58px; }
.mk-own__alert-ic { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9.24px; background: #fff; color: #e11d2a; }
.mk-own__card { background: #fff; border-radius: 13.2px; }
.mk-own__today { display: flex; flex-direction: column; gap: 9.24px; padding: 10.56px; }
.mk-own__row { display: flex; align-items: center; justify-content: space-between; gap: 5.28px; }
.mk-own__row b { font-size: 11.22px; }
.mk-own__row small { font-size: 8.58px; color: #a1a1a6; }
.mk-own__today > .mk-col { gap: 1.32px; }
.mk-own__label { font-size: 8.58px; color: #6b6b70; }
.mk-own__sum { display: flex; align-items: center; gap: 5.28px; white-space: nowrap; }
.mk-own__sum > b { font-size: 19.8px; }
.mk-own__sum > span { font-size: 11.22px; font-weight: 600; color: #6b6b70; }
.mk-own__sum > .mk-own__trend {
  display: flex; align-items: center; gap: 2.64px; padding: 2.64px 6.6px 2.64px 5.28px; border-radius: 6.6px;
  background: #e8f8ef; color: #12b76a; font-size: 7.92px;
}
.mk-own__trend .mk-i { font-size: 9.24px; }
.mk-own__minis { display: flex; gap: 5.28px; }
.mk-own__mini {
  flex: 1; display: flex; flex-direction: column; gap: 1.32px; padding: 7.92px; border-radius: 9.24px; background: #f7f7f8;
  white-space: nowrap; overflow: hidden;
}
.mk-own__mini small { font-size: 7.92px; color: #6b6b70; }
.mk-own__mini b { font-size: 11.22px; }
.mk-own__mini span { font-size: 7.26px; color: #a1a1a6; padding-top: 1px; }
.mk-own__h { font-size: 13.2px; }
.mk-own__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10.56px 7.92px; }
.mk-own__action {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6.6px; height: 62px; padding: 9.24px;
  border-radius: 11.88px; background: #fff; font-size: 9.24px; font-weight: 600; white-space: nowrap;
}
.mk-own__aic { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7.92px; background: #f7f7f8; }
.mk-own__aic .mk-i { font-size: 14.52px; }
.mk-own__aic--red { background: #fdeced; color: #e11d2a; }
.mk-own__aic--green { background: #e8f8ef; color: #12b76a; }
.mk-own__aic--orange { background: #fff4e5; color: #b54708; }
.mk-own__aic--blue { background: #eef2ff; color: #3b5bdb; }
.mk-own__sub { display: flex; align-items: center; gap: 7.92px; padding: 9.24px; }
.mk-own__sub .mk-col { flex: 1; gap: 1.32px; white-space: nowrap; }
.mk-own__sub b { font-size: 9.24px; font-weight: 600; }
.mk-own__sub small { font-size: 7.92px; color: #6b6b70; }
.mk-own__sub > .mk-i { font-size: 14.52px; color: #a1a1a6; }
.mk-own__tabs {
  position: absolute; left: 0; top: 502px; width: 257px; height: 55px; display: flex; justify-content: space-between;
  padding: 5.28px 0 17.16px; background: #fff; border-top: .66px solid #eaeaec;
}
.mk-own__tabs span {
  display: flex; flex-direction: column; align-items: center; gap: 1.32px; width: 51px;
  font-size: 7.26px; font-weight: 500; color: #a1a1a6;
}
.mk-own__tabs .is-active { color: #e11d2a; font-weight: 600; }

/* Super Market — главная покупателя */
.mk-hero__client { left: 250px; top: 10px; width: 295px; height: 622px; border-radius: 31.68px; box-shadow: 0 17.28px 34.56px rgba(15, 18, 26, .18); }
.mk-hero__client > .mk-screen { left: 7px; top: 7px; width: 281px; height: 608px; border-radius: 25.92px; background: #fff; }
.mk-hero__client .mk-i { font-size: 15.84px; }
.mk-cli__head { position: absolute; left: 0; top: 0; width: 281px; height: 189px; border-radius: 0 0 23.04px 23.04px; background: #d50f1d; color: #fff; }
.mk-cli__head .mk-time { color: #fff; }
.mk-cli__addr {
  position: absolute; left: 12px; top: 39px; width: 180px; height: 26px; border-radius: 12.96px; background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; padding-left: 7px; font-size: 10.08px; font-weight: 600; white-space: nowrap;
}
.mk-cli__addr > span { margin-left: 3px; flex: 1; }
.mk-cli__addr > .mk-i:last-child { font-size: 17.28px; margin-right: 6.5px; }
.mk-cli__bell { position: absolute; left: 238px; top: 36px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.mk-cli__bell .mk-i { position: absolute; left: 7px; top: 7px; font-size: 17.28px; }
.mk-cli__bell i { position: absolute; left: 19px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: #ffcf24; }
.mk-cli__eta-l { font-size: 11.52px; color: rgba(255, 255, 255, .7); }
.mk-cli__eta { font-size: 31.68px; font-weight: 900; color: #fff; }
.mk-cli__store {
  position: absolute; left: 134px; top: 101px; width: 135px; height: 29px; border-radius: 14.4px; background: #fff; color: #151515;
  display: flex; align-items: center; gap: 4px; padding: 0 8px 0 9px; font-size: 10.08px; white-space: nowrap;
}
.mk-cli__store b { flex: 1; }
.mk-cli__search {
  position: absolute; left: 12px; top: 141px; width: 258px; height: 35px; border-radius: 17.28px; background: #fff;
  display: flex; align-items: center; gap: 6px; padding-left: 12px; font-size: 11.52px; color: #a1a1a6;
}
.mk-cli__search .mk-i { font-size: 17.28px; color: #6b6b70; }
.mk-cli__track {
  position: absolute; left: 12px; top: 200px; width: 258px; height: 98px; border-radius: 17.28px; background: #fff;
  box-shadow: inset 0 0 0 .72px rgba(0, 0, 0, .08); font-size: 11.52px;
}
.mk-cli__track-ic { position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 50%; background: #ffe9ea; color: #e11d2a; display: grid; place-items: center; }
.mk-cli__track-ic .mk-i { font-size: 18.72px; }
.mk-cli__track-sub { font-size: 9.36px; color: #6b6b70; }
.mk-cli__steps { position: absolute; left: 12px; top: 58px; display: flex; gap: 5.3px; }
.mk-cli__steps li { width: 55.3px; padding-top: 10px; font-size: 8.64px; font-weight: 500; color: #a1a1a6; position: relative; white-space: nowrap; }
.mk-cli__steps li::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 4px; border-radius: 2.16px; background: #e8e8eb; }
.mk-cli__steps .is-done { color: #151515; }
.mk-cli__steps .is-done::before { background: #e11d2a; }
.mk-cli__steps .is-now { color: #e11d2a; font-weight: 700; }
.mk-cli__cats { position: absolute; left: 6px; top: 310px; display: flex; gap: 0 }
.mk-cli__cats li { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 53.3px; font-size: 8.64px; font-weight: 500; white-space: nowrap; }
.mk-cli__cats span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; }
.mk-cli__cats .mk-i { font-size: 23.04px; }
.mk-cli__promo {
  position: absolute; left: 12px; top: 383px; width: 258px; height: 40px; border-radius: 12.96px; background: #fff7d6;
  display: flex; align-items: center; gap: 8px; padding: 0 20px 0 10px;
}
.mk-cli__promo > .mk-i:first-child { font-size: 18.72px; color: #d69e00; }
.mk-cli__promo .mk-col { flex: 1; gap: 2px; white-space: nowrap; }
.mk-cli__promo b { font-size: 10.08px; }
.mk-cli__promo small { font-size: 8.64px; color: #6b6b70; }
.mk-cli__promo > .mk-i:last-child { font-size: 17.28px; color: #6b6b70; }
.mk-cli__h { font-size: 15.84px; }
.mk-cli__all { font-size: 10.8px; font-weight: 600; color: #e11d2a; }
.mk-cli__prod { position: absolute; top: 465px; width: 123px; display: flex; flex-direction: column; font-size: 8.64px; color: #3a3a3c; }
.mk-cli__prod > b { margin-top: 4px; font-size: 10.8px; color: #151515; }
.mk-cli__prod > b.is-sale { color: #e11d2a; }
.mk-cli__prod > s { font-size: 7.92px; color: #a1a1a6; }
.mk-cli__pimg { position: relative; height: 123px; border-radius: 12.96px; }
.mk-cli__pimg > .mk-i { position: absolute; left: 44px; top: 43px; font-size: 34.56px; color: rgba(0, 0, 0, .35); }
.mk-cli__badge {
  position: absolute; left: 4px; top: 4px; width: 32px; height: 14px; border-radius: 4.32px; background: #ffcf24;
  font-size: 7.92px; font-weight: 700; line-height: 14px; text-align: center; color: #151515;
}
.mk-cli__add {
  position: absolute; left: 96px; top: 96px; width: 23px; height: 23px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; box-shadow: 0 2.88px 11.52px rgba(0, 0, 0, .15);
}
.mk-cli__tabs { position: absolute; left: 0; top: 533px; width: 281px; height: 75px; }
.mk-cli__tabs::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 281px; height: 65px; border-radius: 17.28px 17.28px 0 0;
  background: #fff; box-shadow: 0 -2.88px 11.52px rgba(16, 24, 40, .08);
}
.mk-cli__tabs .mk-i { height: 17.28px; color: #b4b4ba; }
.mk-cli__tabs .is-active { color: #e11d2a; }
.mk-cli__map { position: absolute; left: 113px; top: 0; width: 55px; height: 55px; border-radius: 50%; background: #e11d2a; color: #fff; display: grid; place-items: center; }
.mk-cli__map .mk-i { width: 21.6px; height: 21.6px; }
.mk-cli__dot { position: absolute; left: 26px; top: 53px; width: 4px; height: 4px; border-radius: 50%; background: #e11d2a; }

/* ---------- Касса SM POS (656 × 414; экран — «POS v4 · Продажа» 1440 × 900 в масштабе 0,448) ---------- */
.pos__media.mk { --mk-w: 656px; --mk-h: 414px; }
.mk-pos { border-radius: 8.07px; background: #333338; box-shadow: 0 13.44px 26.89px rgba(0, 0, 0, .4); }
.mk-pos__screen { position: absolute; left: 5.38px; top: 5.38px; width: 645.25px; height: 403.28px; overflow: hidden; background: #f2f4f7; }
.mk-pos__ui { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; transform: scale(.448087); color: #101828; }
.mk-pos__top { position: absolute; left: 0; top: 0; width: 1440px; height: 48px; background: #fff; font-size: 13px; }
.mk-pos__top > b { font-size: 15px; font-weight: 600; }
.mk-pos__muted { color: #667085; font-size: 13px; }
.mk-pos__st { display: flex; align-items: center; gap: 5px; font-weight: 500; color: #027a48; }
.mk-pos__st i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.mk-pos__st--off { color: #98a2b3; }
.mk-pos__orders {
  position: absolute; left: 1310px; top: 10px; width: 112px; height: 28px; border-radius: 14px; background: #ffeef0;
  padding-left: 10px; font-weight: 600; line-height: 28px; color: #e11d2a; white-space: nowrap;
}
.mk-pos__check { position: absolute; left: 16px; top: 64px; width: 800px; height: 820px; border-radius: 16px; background: #fff; overflow: hidden; }
.mk-pos__h { font-size: 17px; font-weight: 600; }
.mk-pos__lines { position: absolute; left: 0; top: 76px; width: 800px; }
.mk-pos__lines li { position: relative; height: 68px; }
.mk-pos__lines li::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 1px; background: #eaecf0; }
.mk-pos__lines li.is-new { background: #f6fef9; box-shadow: inset 4px 0 #12b76a; }
.mk-pos__lines li > * { position: absolute; white-space: nowrap; }
.mk-pos__lines li > i { left: 20px; top: 24px; font-size: 14px; color: #98a2b3; }
.mk-pos__lines li > b { left: 44px; top: 12px; font-size: 17px; font-weight: 500; }
.mk-pos__lines li > small { left: 44px; top: 40px; font-size: 13px; color: #667085; }
.mk-pos__lines li > em { left: 660px; top: 21px; width: 120px; text-align: right; font-size: 20px; font-weight: 600; }
.mk-pos__qty {
  left: 520px; top: 15px; width: 120px; height: 38px; border: 1px solid #d0d5dd; border-radius: 8px; background: #fff;
  display: flex; align-items: center; justify-content: space-between; padding: 0 13px; font-size: 20px; font-weight: 500;
}
.mk-pos__qty b { font-size: 17px; font-weight: 600; }
.mk-pos__weight { left: 542px; top: 24px; font-size: 15px; font-weight: 500; color: #667085; }
.mk-pos__acts {
  position: absolute; left: 0; top: 740px; width: 800px; height: 80px; background: #f9fafb; border-top: 1px solid #eaecf0;
  display: flex; gap: 12px; padding: 13px 16px 0;
}
.mk-pos__acts span {
  display: flex; flex-direction: column; gap: 4px; width: 183px; height: 52px; padding: 7px 11px; border: 1px solid #d0d5dd; border-radius: 10px;
  background: #fff; font-size: 12px; font-weight: 500; color: #98a2b3;
}
.mk-pos__acts b { font-size: 15px; font-weight: 600; color: #101828; }
.mk-pos__tabs { position: absolute; left: 832px; top: 64px; display: flex; align-items: flex-start; gap: 8px; }
.mk-pos__tabs span {
  height: 43px; padding: 12px 14px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff;
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.mk-pos__tabs .is-active { height: 41px; border: 0; padding: 12px 14px; background: #101828; color: #fff; }
.mk-pos__find {
  position: absolute; left: 1312px; top: 64px; width: 112px; height: 44px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff;
  display: flex; align-items: center; gap: 6px; padding: 0 11px; font-size: 14px; font-weight: 600;
}
.mk-pos__find .mk-i { font-size: 14px; }
.mk-pos__find small { margin-left: auto; font-size: 11px; font-weight: 500; color: #98a2b3; }
.mk-pos__tiles { position: absolute; left: 832px; top: 120px; display: grid; grid-template-columns: repeat(3, 189.33px); grid-auto-rows: 140px; gap: 10px 12px; }
.mk-pos__tiles li { position: relative; border-radius: 12px; background: #fff; padding: 74px 10px 0; font-size: 14px; font-weight: 500; line-height: 17px; white-space: nowrap; overflow: hidden; }
.mk-pos__tiles li > span { position: absolute; left: 8px; top: 8px; width: 173.33px; height: 60px; border-radius: 8px; display: grid; place-items: center; color: #667085; }
.mk-pos__tiles li > span .mk-i { font-size: 20px; }
.mk-pos__tiles li > b { position: absolute; left: 10px; top: 114px; font-size: 16px; line-height: 1.21; }
.mk-pos__pin, .mk-pos__n { position: absolute; top: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.mk-pos__pin { left: 14px; background: #fff; }
.mk-pos__pin .mk-i { font-size: 13px; }
.mk-pos__n { left: 151.33px; background: #e11d2a; color: #fff; font-size: 13px; font-weight: 700; line-height: 1; }
.mk-pos__kg { position: absolute; left: 14px; top: 14px; width: 32px; height: 22px; border-radius: 6px; background: #101828; color: #fff; font-size: 12px; font-weight: 600; line-height: 22px; text-align: center; }
.mk-pos__hint { display: flex; align-items: center; gap: 3px; font-size: 11.5px; color: #667085; }
.mk-pos__hint .mk-i { font-size: 12px; }
.mk-pos__amount {
  position: absolute; left: 832px; top: 588px; width: 316px; height: 52px; border: 1px solid #12b76a; border-radius: 12px; background: #fff;
  display: flex; flex-direction: column; gap: 4px; padding: 6px 13px; font-size: 16px; font-weight: 600; white-space: nowrap;
}
.mk-pos__amount small { font-size: 11px; font-weight: 500; color: #667085; }
.mk-pos__keys { position: absolute; left: 832px; top: 648px; display: grid; grid-template-columns: repeat(4, 73px); grid-auto-rows: 54px; gap: 8px; }
.mk-pos__keys li { display: grid; place-items: center; border-radius: 10px; background: #fff; font-size: 22px; font-weight: 600; }
.mk-pos__keys .is-fn { background: #e4e7ec; }
.mk-pos__keys .is-word { font-size: 14px; }
.mk-pos__keys .is-enter { background: #101828; color: #fff; }
.mk-pos__keys .mk-i { font-size: 24px; }
.mk-pos__total, .mk-pos__pay { position: absolute; left: 1160px; width: 264px; border-radius: 16px; display: flex; flex-direction: column; padding: 0 18px; white-space: nowrap; }
.mk-pos__total { top: 588px; height: 128px; padding-top: 16px; background: #101828; color: #fff; }
.mk-pos__total small { font-size: 14px; font-weight: 500; color: #d0d5dd; }
.mk-pos__total b { margin-top: 7px; font-size: 42px; font-weight: 800; }
.mk-pos__total span { margin-top: 8px; font-size: 12px; color: #98a2b3; }
.mk-pos__pay { top: 728px; height: 156px; padding-top: 26px; background: #e11d2a; color: #fff; }
.mk-pos__pay b { font-size: 30px; }
.mk-pos__pay span { margin-top: 6px; font-size: 19px; font-weight: 600; color: #ffe4e6; }
.mk-pos__pay small { margin-top: 17px; font-size: 12px; color: #ffd5d9; }

/* ---------- Покупателям: два телефона (540 × 560, снизу обрезаны) ---------- */
.buyers__media.mk { --mk-w: 540px; --mk-h: 560px; }
.mk-buy { clip-path: inset(-60px -60px 0 -60px); } /* телефоны уходят за низ блока — режем по краю, тени по бокам оставляем */
.mk-buy .mk-phone { box-shadow: 0 15.84px 31.68px rgba(77, 0, 5, .35); }
.mk-buy .mk-i { font-size: 15.84px; }

/* Список «Молоко» */
.mk-buy__list { left: 10px; top: 90px; width: 270.6px; height: 570.2px; border-radius: 29.04px; }
.mk-buy__list > .mk-screen { left: 6.6px; top: 6.6px; width: 257.4px; height: 557px; border-radius: 23.76px; background: #fff; }
.mk-buy__bar { position: absolute; left: 0; top: 0; width: 257.4px; height: 125.4px; border-radius: 0 0 18.5px 18.5px; background: #fff; box-shadow: 0 4px 11.9px rgba(0, 0, 0, .08); }
.mk-buy__back { position: absolute; left: 13.2px; top: 38.3px; width: 39.6px; height: 27.7px; border-radius: 13.9px; background: #f3f3f4; color: #6b6b70; }
.mk-buy__back .mk-i { position: absolute; left: 9.9px; top: 5.3px; font-size: 18.5px; }
.mk-buy__title { font-size: 12.5px; }
.mk-buy__search {
  position: absolute; left: 10.6px; top: 76.6px; width: 236.3px; height: 37px; border-radius: 18.5px; background: #f3f3f4;
  display: flex; align-items: center; gap: 5.3px; padding-left: 10.5px; font-size: 11.2px; color: #6b6b70;
}
.mk-buy__search .mk-i { font-size: 17.2px; }
.mk-buy__grid { position: absolute; left: 10.6px; top: 136px; display: grid; grid-template-columns: repeat(3, 75.2px); grid-auto-rows: 172.9px; column-gap: 5.3px; }
.mk-buy__grid li { position: relative; }
.mk-buy__img { position: absolute; left: 0; top: 0; width: 75.2px; height: 75.2px; border-radius: 10.6px; background: #f7f7f8; }
.mk-buy__img .mk-i { position: absolute; left: 17.8px; top: 14.5px; font-size: 39.6px; }
.mk-buy__step, .mk-buy__add { position: absolute; top: 46.2px; height: 26.4px; border-radius: 13.2px; background: #fff; box-shadow: 0 1.32px 6.6px rgba(0, 0, 0, .15); }
.mk-buy__step { left: 2.6px; width: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 5.3px 0 6.6px; }
.mk-buy__step b { font-size: 11.2px; font-weight: 600; }
.mk-buy__add { left: 46.7px; width: 26.4px; display: grid; place-items: center; }
.mk-buy__sale { position: absolute; left: 36.9px; top: 2.6px; width: 35.6px; height: 11.9px; border-radius: 3.3px; background: #e11d2a; color: #fff; font-size: 7.3px; font-weight: 700; line-height: 11.9px; text-align: center; }
.mk-buy__off { position: absolute; left: 43.5px; top: 17.1px; width: 29px; height: 13.2px; border-radius: 3.3px; background: #ffcf24; font-size: 7.9px; font-weight: 700; line-height: 13.2px; text-align: center; }
.mk-buy__info { position: absolute; left: 0; top: 79.2px; width: 75.2px; display: flex; flex-direction: column; }
.mk-buy__info b { font-size: 11.9px; white-space: nowrap; }
.mk-buy__info s { margin-top: 2.2px; font-size: 7.9px; color: #6b6b70; }
.mk-buy__info > span { margin-top: 4.2px; font-size: 9.2px; line-height: 11.9px; color: #3a3a3c; }
.mk-buy__info s + span { margin-top: 3.4px; }
.mk-buy__info i { color: #8e8e93; }

/* Карточка «Кефир Musaffo» */
.mk-buy__card { left: 250px; top: 30px; width: 287px; height: 604.8px; border-radius: 30.8px; box-shadow: 0 16.8px 33.6px rgba(77, 0, 5, .35); }
.mk-buy__card > .mk-screen { left: 7px; top: 7px; width: 273px; height: 590.8px; border-radius: 25.2px; background: #8a8a8e; }
.mk-buy__modal { position: absolute; left: 0; top: 37.8px; width: 273px; height: 553px; border-radius: 19.6px 19.6px 0 0; background: #fff; }
.mk-buy__photo { position: absolute; left: 14px; top: 39.2px; width: 140px; height: 168px; border-radius: 14px; background: #f7f7f8; color: #9bb8e0; }
.mk-buy__photo .mk-i { position: absolute; left: 28px; top: 42px; font-size: 84px; }
.mk-buy__promo { position: absolute; left: 165.2px; top: 54.6px; width: 77px; height: 23.8px; border-radius: 5.6px; background: #e11d2a; color: #fff; font-size: 14px; font-weight: 800; line-height: 23.8px; text-align: center; }
.mk-buy__tag { position: absolute; left: 175.86px; top: 84.76px; width: 77px; height: 35px; border-radius: 7px; background: #ffcf24; font-size: 19.6px; font-weight: 700; line-height: 35px; text-align: center; transform: rotate(-3deg); }
.mk-buy__old { font-size: 16.8px; font-weight: 700; text-decoration: line-through; }
.mk-buy__price { font-size: 32.2px; font-weight: 800; color: #e11d2a; }
.mk-buy__btn { position: absolute; top: 11.2px; width: 36.4px; height: 29.4px; border-radius: 14.7px; background: #fff; box-shadow: 0 1.4px 7px rgba(0, 0, 0, .12); display: grid; place-items: center; }
.mk-buy__btn .mk-i { font-size: 16.8px; }
.mk-buy__pager { position: absolute; left: 112px; top: 215.6px; width: 49px; height: 14px; border-radius: 7px; background: #f3f3f4; display: flex; align-items: center; gap: 4.9px; padding-left: 16.1px; }
.mk-buy__pager i { width: 4.9px; height: 4.9px; border-radius: 50%; background: #151515; }
.mk-buy__pager i + i { background: #a1a1a6; }
.mk-buy__sheet { position: absolute; left: 0; top: 277.2px; width: 273px; height: 313.6px; border-radius: 19.6px 19.6px 0 0; background: #fff; box-shadow: 0 -2.8px 11.2px rgba(0, 0, 0, .07); }
.mk-buy__handle { position: absolute; left: 122.5px; top: 8.4px; width: 28px; height: 3.5px; border-radius: 2.1px; background: #e8e8eb; }
.mk-buy__name { position: absolute; left: 14px; top: 25.3px; width: 245px; font-size: 18.2px; line-height: 22.4px; }
.mk-buy__name i { color: #a1a1a6; }
.mk-buy__desc { position: absolute; left: 14px; top: 77.4px; width: 245px; font-size: 11.9px; line-height: 16.8px; color: #6b6b70; }
.mk-buy__store {
  position: absolute; left: 14px; top: 136.8px; width: 245px; height: 42px; border-radius: 14px; background: #f3f3f4;
  display: flex; align-items: center; gap: 8.4px; padding: 0 4px 0 7px; white-space: nowrap;
}
.mk-buy__store .mk-col { flex: 1; gap: 2px; }
.mk-buy__store b { font-size: 11.2px; font-weight: 600; }
.mk-buy__store small { font-size: 9.1px; color: #6b6b70; }
.mk-buy__store .mk-i { font-size: 16.8px; color: #6b6b70; }
.mk-buy__logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7.7px; background: #e11d2a; color: #fff; font-size: 12.6px; font-weight: 700; }
.mk-buy__more { font-size: 16.1px; color: #3a3a3c; }
.mk-buy__minis { position: absolute; left: 14px; top: 221.2px; display: flex; gap: 9.8px; }
.mk-buy__minis li { width: 67.2px; height: 49px; border-radius: 11.2px; background: #f7f7f8; padding: 8.4px 0 0 18.2px; }
.mk-buy__minis .mk-i { font-size: 30.8px; }
.mk-buy__foot { position: absolute; left: 0; top: 520.8px; width: 273px; height: 70px; border-radius: 19.6px 19.6px 0 0; background: #fff; box-shadow: 0 -2.8px 11.2px rgba(0, 0, 0, .1); }