/* ============================================================
   Структурный слой демо-сценариев.

   Здесь только геометрия и поведение: как выезжает панель
   корзины, что происходит со скрытыми элементами, как пульсирует
   счётчик. Ни одного цвета и ни одного шрифта — их задаёт каждая
   сфера сама через свои переменные, иначе пятнадцать демо станут
   одним шаблоном в пятнадцати оттенках.

   Ожидаемые переменные (каждое демо объявляет свои):
     --cart-bg, --cart-fg, --cart-line, --cart-shadow
   ============================================================ */

/* `hidden` обязан побеждать раскладку: элементы панели объявлены
   как flex/grid, и без !important атрибут молча игнорируется. */
[hidden] { display: none !important; }

/* ── Панель корзины ─────────────────────────────────────── */

[data-cart] {
  position: fixed; inset: 0 0 0 auto; z-index: 300;
  width: min(100%, 430px);
  display: flex; flex-direction: column;
  background: var(--cart-bg, #fff);
  color: var(--cart-fg, inherit);
  box-shadow: var(--cart-shadow, -20px 0 60px rgba(0, 0, 0, 0.28));
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s;
}
[data-cart][data-open] { transform: none; visibility: visible; }

[data-cart-backdrop] {
  position: fixed; inset: 0; z-index: 290;
  background: rgba(8, 8, 10, 0.5);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s;
  border: 0; padding: 0; margin: 0;
}
[data-cart][data-open] ~ [data-cart-backdrop],
[data-cart-backdrop][data-open] { opacity: 1; pointer-events: auto; }

[data-cart-lines] { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ── Счётчик и отклик на добавление ─────────────────────── */

[data-cart-open][data-pulse] { animation: cart-pulse 0.42s ease; }
@keyframes cart-pulse {
  0% { transform: none; }
  38% { transform: scale(1.09); }
  100% { transform: none; }
}

/* ── Слоты записи ───────────────────────────────────────── */

[data-slot][data-busy] {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
  [data-cart] { transition: none; }
  [data-cart-open][data-pulse] { animation: none; }
}