/* принудительный режим М / ПК */

html.layout-mobile-active .totem-marquee-panel {
  display: none !important;
}

html.layout-desktop-active .totem-marquee-band,
html.layout-desktop-active .sidebar-support-mobile,
html.layout-desktop-active .editor-page .btn-support-vertical {
  display: none !important;
}

html.layout-desktop-active body.editor-page {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html.layout-desktop-active body.landing-with-marquee {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

html.layout-mobile-active body.editor-page .totem-marquee-band,
html.layout-mobile-active body.editor-page .totem-marquee-panel {
  display: none !important;
}

html.layout-mobile-active .totem-marquee-band {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  height: var(--marquee-band-h);
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
  contain: layout style paint;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  background: rgba(12, 10, 8, 0.5);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

html.layout-mobile-active .totem-marquee-band--top {
  top: 0;
  border-bottom: 2px solid #1a1510;
}

html.layout-mobile-active .totem-marquee-band--bottom {
  bottom: 0;
  border-top: 2px solid #1a1510;
}

html.layout-mobile-active .totem-marquee-track--horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(12px, 3.75vw, 21px);
  height: 100%;
  width: max-content;
  padding: 0 10px;
  box-sizing: border-box;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}

html.layout-mobile-active .totem-marquee-band .totem-marquee-item {
  width: var(--marquee-band-item);
  height: var(--marquee-band-item);
  flex: 0 0 auto;
}

html.layout-mobile-active body[data-i18n-page="getting_skin"] .site-top-bar {
  top: calc(var(--marquee-band-h) + 10px);
  left: 10px;
  right: 10px;
}

html.layout-mobile-active .totem-marquee-track--horizontal.totem-marquee-track--left:not(.totem-marquee-track--loading) {
  animation: totem-marquee-x-left 16s linear infinite;
}

html.layout-mobile-active .totem-marquee-track--horizontal.totem-marquee-track--right:not(.totem-marquee-track--loading) {
  animation: totem-marquee-x-right 16s linear infinite;
}

html.layout-mobile-active body.landing-with-marquee {
  padding-top: var(--marquee-band-h);
  padding-bottom: var(--marquee-band-h);
}

html.layout-mobile-active .editor-page {
  --editor-chrome-h: 50px;
  --editor-sidebar-w: 50px;
  --editor-preview-w: 100%;
}

html.layout-mobile-active .editor-page .editor-header .btn-header-support {
  display: none;
}

html.layout-mobile-active .sidebar-support-mobile,
html.layout-mobile-active .editor-page .btn-support-vertical {
  display: flex;
}

html.layout-mobile-active .viewport--with-sidebar {
  margin-left: var(--editor-sidebar-w);
  margin-right: 0;
  width: calc(100% - var(--editor-sidebar-w));
}

html.layout-mobile-active .viewport--with-preview {
  margin-right: 0;
}

html.layout-mobile-active .editor-preview-panel--dock:not(.editor-preview-panel--frame-tail) {
  position: relative;
  width: calc(100% - var(--editor-sidebar-w));
  margin-left: var(--editor-sidebar-w);
  height: auto;
  border-left: none;
  border-top: 2px solid #000;
}

html.layout-mobile-active .editor-body {
  flex-direction: column;
}

html.layout-mobile-active .labels-column {
  display: none !important;
}

html.layout-mobile-active .editor-wrapper {
  justify-content: center;
}

html.layout-mobile-active .editor-page .viewport {
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
}


html.layout-mobile-active .size-control label,
html.layout-mobile-active .size-control strong {
  font-size: 5px;
}

@media (min-width: 769px) {
  html.layout-desktop-active .editor-page {
    --editor-chrome-h: 56px !important;
    --editor-sidebar-w: 76px !important;
    --editor-preview-w: 360px !important;
  }

  html.layout-desktop-active .editor-preview-panel--dock {
    position: fixed !important;
    top: var(--editor-chrome-h) !important;
    right: 0 !important;
    width: var(--editor-preview-w) !important;
    margin-left: 0 !important;
    height: calc(100vh - var(--editor-chrome-h)) !important;
    border-left: 2px solid #000 !important;
    border-top: none !important;
  }

  html.layout-desktop-active .editor-body {
    flex-direction: row !important;
  }

  html.layout-desktop-active .editor-page .editor-header .btn-header-support {
    display: inline-flex !important;
  }
}