/**
 * ecm_demobar — полоса демо-магазина сверху витрины.
 * Своя изоляция от темы: префикс .ecm-demobar, цвета в переменных блока.
 */
.ecm-demobar {
  --ecm-demobar-bg: #151518;
  --ecm-demobar-ink: #ffffff;
  --ecm-demobar-muted: #c9c5ff;
  --ecm-demobar-accent: #5046e5;
  --ecm-demobar-accent-hover: #3a31c9;

  position: relative;
  z-index: 1000;
  background: var(--ecm-demobar-bg);
  color: var(--ecm-demobar-ink);
  font: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.ecm-demobar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 16px;
}

/* все элементы полосы — одной высоты и по центру строки (ссылки — блоки 32px, текст рядом выравниваем так же) */
.ecm-demobar__inner > * {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  line-height: 1.4;
}

.ecm-demobar__title {
  font-weight: 700;
}

.ecm-demobar__platform {
  color: var(--ecm-demobar-muted);
}

.ecm-demobar__timer {
  color: var(--ecm-demobar-muted);
}

.ecm-demobar__timer b {
  color: var(--ecm-demobar-ink);
  font-variant-numeric: tabular-nums;
}

.ecm-demobar__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-left: auto;
}

.ecm-demobar .ecm-demobar__link,
.ecm-demobar .ecm-demobar__link:visited {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.4;
  vertical-align: middle;
  font-size: inherit;
  color: var(--ecm-demobar-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ecm-demobar .ecm-demobar__link:hover,
.ecm-demobar .ecm-demobar__link:focus-visible {
  color: var(--ecm-demobar-muted);
}

.ecm-demobar .ecm-demobar__link--buy,
.ecm-demobar .ecm-demobar__link--buy:visited {
  padding: 0 14px;
  border-radius: 8px;
  background: var(--ecm-demobar-accent);
  color: var(--ecm-demobar-ink);
  font-weight: 600;
  text-decoration: none;
}

.ecm-demobar .ecm-demobar__link--buy:hover,
.ecm-demobar .ecm-demobar__link--buy:focus-visible {
  background: var(--ecm-demobar-accent-hover);
  color: var(--ecm-demobar-ink);
}

@media (max-width: 720px) {
  .ecm-demobar__links {
    margin-left: 0;
    width: 100%;
  }

  .ecm-demobar .ecm-demobar__link {
    min-height: 44px;
  }
}