/* ============================================================
   Общая основа демо-концептов.
   Здесь только то, что одинаково для всех: сброс, служебная
   плашка DEKART и типографические примитивы без цвета и голоса.
   Всё остальное — палитра, шрифты, ритм — задаёт style.css
   конкретного демо: восемь сайтов должны быть непохожими,
   поэтому общий слой намеренно не имеет вкуса.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
/* :where() обнуляет специфичность: иначе `ul[class]` (0-1-1) перебивал
   собственные отступы компонентов вроде `.cart__lines` (0-1-0), и строки
   корзины упирались в край панели — крестик удаления обрезался. */
:where(ul[class], ol[class]) { list-style: none; padding: 0; }

:where(h1, h2, h3) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }

/* Цифры в таблицах и метриках должны выстраиваться в столбик. */
.tnum { font-variant-numeric: tabular-nums; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Горизонтальная прокрутка допустима только внутри своего контейнера. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Служебная плашка ────────────────────────────────────────
   Она принадлежит DEKART, а не демо-бренду, поэтому одета в
   нашу палитру и намеренно не подстраивается под сайт под ней:
   посетитель должен видеть, что это витрина, а не чужой сайт. */

:root { --demo-bar-h: 44px; }

.demo-bar {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px;
  min-height: var(--demo-bar-h);
  padding: 6px 20px;
  background: #10333c;
  color: #f1ede3;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.3; letter-spacing: 0.08em;
}

.demo-bar__tag {
  flex: none;
  padding: 3px 8px;
  background: #a35200;
  color: #fff;
  font-weight: 700; text-transform: uppercase;
}

.demo-bar__text { flex: 1 1 auto; color: #bcd3d8; letter-spacing: 0.02em; }
.demo-bar__text b { color: #f1ede3; font-weight: 400; }

/* Раньше вся плашка была одной ссылкой и вела на направление, к которому
   относилось конкретное демо. Разные демо уводили в разные разделы, и это
   читалось как случайность. Теперь действий два, оба названы словами. */
.demo-bar__link {
  flex: none; color: #f1ede3; text-decoration: none;
  border-bottom: 1px solid rgba(241, 237, 227, 0.4); padding-bottom: 2px;
  text-transform: uppercase;
}
.demo-bar__link:hover { border-bottom-color: #f1ede3; }
.demo-bar__link--order { color: #f0b46a; border-bottom-color: rgba(240, 180, 106, 0.45); }
.demo-bar__link--order:hover { border-bottom-color: #f0b46a; }

@media (max-width: 900px) { .demo-bar__text { display: none; } }
@media (max-width: 520px) { .demo-bar__link--order { display: none; } }

/* ── Подпись в подвале каждого демо ──────────────────────── */

.demo-note {
  padding: 28px 20px 40px;
  background: #10333c;
  color: #93aeb5;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 1.7; text-align: center;
}
.demo-note a { color: #f1ede3; }
.demo-note strong { color: #f1ede3; font-weight: 400; }