/* Меню сайта на телефоне и планшете (№253): одна разметка - engine/seo_pages.mobile_menu (главная, разделы, кабинет-витрина,
   документы, 404), поведение - web/mnav.js. Порядок как у продуктовых SaaS: аккаунт (пробный период или вход) -> продукт ->
   площадки цветом площадки -> компания -> «Для покупателей» отдельной карточкой -> поддержка. Работает и без JS (details). */
.mnav{display:none;position:static}
.mnav>summary{list-style:none;cursor:pointer;width:44px;height:44px;margin-right:-8px;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary::marker{content:""}
.mnav>summary:active{background:rgba(24,20,40,.05)}
.mnav>summary:focus-visible{outline:2px solid var(--acc,var(--a,#7A1FC2));outline-offset:-2px}
.mnav>summary i{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink,#121118);transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .15s}
.mnav[open]>summary i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mnav[open]>summary i:nth-child(2){opacity:0}
.mnav[open]>summary i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1010px){.mnav{display:block}}

/* панель: под шапкой на всю высоту экрана, своя прокрутка, страница под ней не едет (mnav.js) */
.mnav-p{position:absolute;left:0;right:0;top:100%;z-index:40;height:calc(100vh - var(--mnav-top,60px));height:calc(100dvh - var(--mnav-top,60px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:12px;
  padding:14px 16px calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(24,20,40,.07);
  background:radial-gradient(420px 260px at 100% 0%,rgba(203,17,171,.07),transparent 70%),radial-gradient(380px 300px at 0% 100%,rgba(122,31,194,.06),transparent 70%),#F5F4F1;
  color:#121118;text-align:left;animation:mnavIn .24s cubic-bezier(.2,.8,.2,1) both}
.mnav-p>*{flex:none;width:100%;max-width:560px;margin-left:auto;margin-right:auto}
@keyframes mnavIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mnav-p{animation:none}}
.mnav-p a{-webkit-tap-highlight-color:transparent}
/* шапка под открытым меню - плотная, без просвечивания */
.top:has(.mnav[open]),.s-top:has(.mnav[open]){background:#F5F4F1}
html.mnav-open,html.mnav-open body{overflow:hidden}

/* аккаунт: пробный период и вход (не вошел) или кабинет и проверки (вошел, кука sks_in) */
.mnav-acc{display:flex;flex-direction:column;gap:8px;padding:2px 0 4px}
.mnav-in{display:none}
html.sk-in .mnav-in{display:flex}
html.sk-in .mnav-out{display:none}
.mnav-btn,.mnav-btn2{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;border-radius:14px;font-weight:600;letter-spacing:-.01em;transition:transform .12s,background .16s}
.mnav-btn{min-height:54px;padding:12px 18px;background:#121118;color:#fff;font-size:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 28px -16px rgba(24,20,40,.7)}
.mnav-btn2{min-height:50px;padding:10px 18px;background:#fff;color:#121118;font-size:15.5px;box-shadow:inset 0 0 0 1px rgba(24,20,40,.16)}
.mnav-btn:active,.mnav-btn2:active{transform:scale(.985)}
.mnav-acc small{display:block;text-align:center;color:#686774;font-size:12.5px;line-height:1.4}

/* разделы - карточки как на сайте */
.mnav-sec{display:flex;flex-direction:column;padding:4px 6px 6px;border-radius:18px;background:#fff;border:1px solid rgba(24,20,40,.07);
  box-shadow:0 1px 2px rgba(24,20,40,.04),0 16px 34px -28px rgba(24,20,40,.4)}
.mnav-h{display:flex;align-items:center;gap:8px;padding:12px 10px 6px;font:500 11.5px/1 var(--mono,'Geist Mono',ui-monospace,monospace);letter-spacing:.09em;
  text-transform:uppercase;color:#686774}
.mnav-h:before{content:"";width:7px;height:7px;border-radius:2px;background:linear-gradient(135deg,#CB11AB,#7A1FC2)}
.mnav-row{display:flex;align-items:center;gap:12px;padding:10px 10px;border-radius:12px;color:#121118;text-decoration:none}
.mnav-row span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.mnav-row b{font-weight:600;font-size:16px;letter-spacing:-.01em;line-height:1.3;color:#121118}
.mnav-row small{font-size:13px;line-height:1.35;color:#686774}
.mnav-row i{flex:none;width:7px;height:7px;margin-right:6px;border-top:1.7px solid #A3A2AE;border-right:1.7px solid #A3A2AE;transform:rotate(45deg)}
.mnav-row{position:relative}
.mnav-row+.mnav-row:before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:rgba(24,20,40,.07)}
.mnav-row:active,.mnav-mp:active,.mnav-lnk:active{background:rgba(24,20,40,.05)}
.mnav-row[aria-current] b{color:var(--acc,var(--a,#7A1FC2))}
/* площадки: 2 x 2, точка цвета площадки */
.mnav-mps{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px 4px 2px}
.mnav-mp{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 12px;border-radius:12px;background:#F7F6F3;color:#121118;
  font-weight:600;font-size:15px;letter-spacing:-.01em;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(24,20,40,.05)}
.mnav-mp i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 20%,transparent)}
.mnav-mp[aria-current]{background:#fff;box-shadow:inset 0 0 0 1.5px var(--c)}
.mp-wb{--c:#CB11AB}.mp-ozon{--c:#005BFF}.mp-ym{--c:#FFC400}.mp-avito{--c:#00B85C}
/* компания */
.mnav-co>div{display:flex;flex-wrap:wrap;gap:6px;padding:4px 4px 2px}
.mnav-lnk{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;background:#F7F6F3;color:#121118;font-weight:500;font-size:15px;
  text-decoration:none;box-shadow:inset 0 0 0 1px rgba(24,20,40,.05)}
/* «Для покупателей» - другой сервис: отдельная карточка с его теплым градиентом и понятной подписью */
.mnav-b2c{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 16px 15px;border-radius:18px;text-decoration:none;color:#121118;overflow:hidden;
  border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(120deg,#CB11AB,#F2385A 48%,#FF8A3D) border-box}
.mnav-b2c:before{content:"";position:absolute;right:-50px;top:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,56,90,.12),transparent);pointer-events:none}
.mnav-chip{align-self:flex-start;padding:5px 9px;border-radius:99px;background:#FFF1EC;color:#C2321A;font:600 11px/1 var(--mono,'Geist Mono',ui-monospace,monospace);
  letter-spacing:.07em;text-transform:uppercase}
.mnav-b2c b{margin-top:6px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.mnav-b2c small{font-size:13px;line-height:1.4;color:#686774}
.mnav-b2c em{margin-top:4px;font-style:normal;font-size:13px;font-weight:600;color:#C2321A}
.mnav-b2c:active{transform:scale(.99)}
/* поддержка */
.mnav-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:2px;font-size:13.5px}
.mnav-foot a{color:#3B3A45;text-decoration:underline;text-decoration-color:rgba(24,20,40,.25);text-underline-offset:3px}
@media (min-width:600px){.mnav-p{padding-top:20px}.mnav-acc{flex-direction:row;flex-wrap:wrap}.mnav-acc>a{flex:1 1 220px}.mnav-acc small{flex-basis:100%}}