/* ==========================================================================
   VERITEX · момент 2 (ТЗ 14.2): шлейф частиц и корзина-«штатив».
   Анимируем только transform и opacity. Скругления: панели 24, карточки 16, кнопки 12.
   ========================================================================== */
.fxtrail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

/* подтверждение на кнопке: «✓ В штативе» */
.btn.is-done, .add-btn.is-done { background: #2e8556; color: #fff; box-shadow: none; }
.btn.is-done:hover, .add-btn.is-done:hover { background: #2e8556; }
.pcard__add.is-done { background: #2e8556; color: #fff; }
/* флакон в карточке на миг гаснет */
@keyframes vflash { 0% { opacity: 1; } 22% { opacity: 0.1; } 100% { opacity: 1; } }
.fx-flash .pcard__img, .fx-flash .pcard__svg, .fx-flash .dock__vial, .fx-flash .bn__vial, .fx-flash .cell, .fx-flash .poster { animation: vflash 700ms var(--ease); }

/* ---------- панель «Ваш штатив» ---------- */
html.rack-open { overflow: hidden; }
dialog.rack { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(580px, 100vw); max-width: 100vw; height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--bg); color: var(--text); box-shadow: inset 1px 0 0 var(--line-strong), -24px 0 64px rgba(0, 0, 0, 0.45); animation: rack-in 320ms var(--ease); }
dialog.rack::backdrop { background: rgba(8, 6, 12, 0.62); animation: rack-fade 280ms var(--ease); }
dialog.rack.is-closing { animation: rack-out 240ms var(--ease) forwards; }
dialog.rack.is-closing::backdrop { animation: rack-fade 240ms var(--ease) reverse forwards; }
@keyframes rack-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rack-out { to { transform: translateX(40px); opacity: 0; } }
@keyframes rack-fade { from { opacity: 0; } to { opacity: 1; } }
.rack__in { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.rack__h { display: flex; align-items: center; gap: 12px; padding: 22px 24px 14px 28px; }
.rack__t { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.05; font-weight: 400; letter-spacing: -0.035em; }
.rack__n { margin-left: auto; font-size: 13px; color: var(--text-muted); }
.rack__body { overflow: auto; padding: 4px 28px 20px; display: grid; gap: 22px; align-content: start; overscroll-behavior: contain; }

.rack__slots ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 16px; background: rgba(244, 240, 250, 0.025); box-shadow: inset 0 0 0 1px var(--line); }
.slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-height: 134px; padding: 10px 6px 8px; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--text-muted); font-size: 12px; }
.slot.is-full { border: 1px solid rgba(169, 139, 219, 0.4); background: radial-gradient(70% 55% at 50% 40%, rgba(112, 70, 163, 0.32), transparent 75%), rgba(112, 70, 163, 0.06); color: var(--text); }
.slot__vial { height: 92px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)); }
.slot__vial.rk-svg { display: block; } .slot__vial.rk-svg svg { height: 92px; width: auto; }
.slot__c { font-size: 12px; line-height: 1.1; letter-spacing: 0; white-space: nowrap; }
.slot__empty { margin-top: auto; font-size: 11px; opacity: 0.8; }
.slot__q { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 8px; background: var(--paper); color: var(--paper-ink); font-size: 11px; }
.slot.is-new .slot__vial { animation: slot-in 420ms var(--ease); }
@keyframes slot-in { from { transform: translateY(-34px); opacity: 0; } to { transform: none; opacity: 1; } }
.rack__more { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

.rack__list { border-top: 1px solid var(--line); }
.ritem { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.ritem__thumb { display: grid; place-items: center; width: 44px; height: 64px; }
.ritem__vial { height: 64px; width: auto; max-width: 100%; object-fit: contain; }
.ritem__vial.rk-svg svg { height: 64px; width: auto; }
.ritem__main { display: grid; gap: 4px; min-width: 0; }
.ritem__code { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; }
.ritem__code:hover { color: var(--violet-glow); }
.ritem__meta { font-size: 12.5px; color: var(--text-muted); }
.ritem__qty { display: inline-flex; align-items: center; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); }
.ritem__qty button { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--text); transition: background var(--dur-fast) var(--ease); }
.ritem__qty button:hover:not([disabled]) { background: rgba(244, 240, 250, 0.08); }
.ritem__qty button[disabled] { opacity: 0.35; cursor: not-allowed; }
.ritem__qty output { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.ritem__sum { min-width: 86px; text-align: right; font-size: 20px; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rack__empty { display: grid; gap: 8px; padding: 6px 4px; color: var(--text-muted); font-size: 15px; max-width: 36ch; }
.rack__et { font-size: 24px; letter-spacing: -0.02em; color: var(--text); }

.rack__f { display: grid; gap: 14px; padding: 18px 28px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: inset 0 1px 0 var(--line); background: var(--bg); }
.rack__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.rack__sum span { color: var(--text-muted); font-size: 16px; }
.rack__sum b { font-size: clamp(30px, 3.2vw, 40px); font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rack__go { width: 100%; min-height: 56px; }
.rack__ruo { font-size: 12px; line-height: 1.45; color: var(--text-muted); }

/* корзина в корзинной панели телефона: «N товаров · сумма · Оформить» открывает штатив */
.cart-bar__t { flex: 1; min-width: 0; min-height: 44px; text-align: left; color: inherit; font: inherit; }

@media (max-width: 899px) {
  dialog.rack { inset: auto 0 0 0; width: 100%; max-width: 100%; height: 85dvh; border-radius: 24px 24px 0 0; box-shadow: inset 0 1px 0 var(--line-strong), 0 -20px 56px rgba(0, 0, 0, 0.5); animation: rack-up 340ms var(--ease); }
  dialog.rack.is-closing { animation: rack-down 240ms var(--ease) forwards; }
  @keyframes rack-up { from { transform: translateY(48px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes rack-down { to { transform: translateY(48px); opacity: 0; } }
  .rack__h { padding: 18px 12px 8px 20px; }
  .rack__body { padding: 4px 20px 16px; gap: 16px; }
  .rack__slots ul { gap: 8px; padding: 10px; }
  .slot { min-height: 108px; padding: 8px 4px 6px; }
  .slot__vial, .slot__vial.rk-svg svg { height: 70px; }
  .ritem { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; }
  .ritem__thumb { grid-row: span 2; width: 40px; }
  .ritem__code { font-size: 20px; }
  .ritem__qty { grid-column: 2; justify-self: start; }
  .ritem__sum { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .rack__f { padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  dialog.rack, dialog.rack::backdrop, dialog.rack.is-closing { animation: none; }
  .slot.is-new .slot__vial, .fx-flash .pcard__img, .fx-flash .pcard__svg, .fx-flash .dock__vial, .fx-flash .bn__vial { animation: none; }
}