/* Общая плашка «это демо» — одинаковая на всех демо-сайтах, стилизуется только здесь.
   Разметка плашки вставляется скриптом tools/build-demo-bar.mjs (листание по порядку ниш витрины). */
.pl-demo-bar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 36px;
  padding: 4px 16px;
  background: #0f0f10;
  color: #e9e9ea;
  font: 500 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
  text-align: center;
}
.pl-demo-bar b { color: #fff; font-weight: 700; }
.pl-demo-bar a { color: #fff; text-decoration: none; }
.pl-demo-bar a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pl-want {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  white-space: nowrap;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transition: background 0.2s, border-color 0.2s;
}
.pl-demo-bar .pl-want:hover,
.pl-demo-bar .pl-want:focus-visible { background: #fff; color: #0f0f10; border-color: #fff; outline: none; }

/* листание демо: ‹ точки-ниши › 3 из 8; активная точка — клюв */
.pl-nav { flex: none; display: flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.pl-arr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; transition: background 0.2s; }
.pl-arr:hover { background: rgba(255, 255, 255, 0.14); }
.pl-dots { display: flex; }
.pl-dots a { display: inline-grid; place-items: center; width: 14px; height: 28px; }
.pl-dots a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: background 0.2s; }
.pl-dots a:hover::before { background: #fff; }
.pl-dots a[aria-current]::before { background: #E8920C; }
.pl-count { min-width: 3.2em; color: #bdbdc0; }
.pl-count .pl-of-s { display: none; }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pl-note .pl-short { display: none; }
/* внутри стенда витрины листает сама витрина */
.pl-framed .pl-nav { display: none; }

/* телефон: ‹ 3/8 › · «Демо · компания вымышлена» · кнопка 40 px, всё в одну строку */
@media (max-width: 560px) {
  .pl-demo-bar { gap: 6px; justify-content: space-between; padding: 4px 8px; font-size: 12px; line-height: 1.15; }
  .pl-dots, .pl-demo-bar .pl-long { display: none; }
  .pl-note .pl-short { display: inline; }
  .pl-note { flex: 1 1 auto; min-width: 0; }
  .pl-arr { width: 28px; height: 40px; }
  .pl-count { min-width: 0; }
  .pl-count .pl-of-l { display: none; }
  .pl-count .pl-of-s { display: inline; }
  .pl-want { min-height: 40px; padding: 0 10px; }
}
@media (pointer: coarse) { .pl-want { min-height: 40px; } }

/* подсказка вместо звонка на выдуманный номер */
.pl-toast {
  position: fixed;
  left: 50%;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 1000;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 12px;
  background: #0f0f10;
  color: #fff;
  font: 500 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, 8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.pl-toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .pl-toast { transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s; }
  .pl-toast.is-on { transition: opacity 0.2s, transform 0.2s; }
}

.pl-demo-foot {
  display: block;
  padding: 14px 16px;
  text-align: center;
  background: #0f0f10;
  color: #bdbdc0;
  font: 400 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pl-demo-foot a { color: #fff; }