/* Служебные страницы: «Акции», «Поиск» и 404. Цвета, радиусы и движение - из токенов сайта; текст на оранжевом белый. */
.sv-lead { margin: 0 0 var(--space-16); color: var(--ink-muted); font-size: 16px; line-height: 1.55; max-width: 720px; }
.sv-chips { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-24); }
.sv-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-16); border-radius: var(--radius-input); background: var(--surface-1); color: var(--ink-muted); font-size: 14px; font-weight: 600; transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.sv-chip:hover { background: var(--surface-2); color: var(--ink); }
.sv-chip:active { transform: translateY(1px); }
.sv-chip:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.sv-chip.is-active, .sv-chip.is-active:hover { background: var(--primary-tint); color: var(--primary-pressed); box-shadow: inset 0 0 0 1px #f4c9bb; }
.sv-chip.is-active:focus-visible { box-shadow: inset 0 0 0 1px #f4c9bb, var(--shadow-focus); }

.sv-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-12) var(--space-24); margin: var(--space-24) 0 var(--space-16); }
.sv-results-head .sv-lead, .sv-results-head .sv-chips { margin: 0; }
.sv-lead--note { margin-bottom: 0; }

/* Под пустым поиском: разделы (плитки .cat-card из catalog.css), «Вы недавно смотрели», строка про звонок */
.sv-block { margin-top: var(--space-48); }
.sv-h2 { margin: 0 0 var(--space-16); font-size: 22px; font-weight: 500; line-height: 1.3; }
.sv-help { margin: var(--space-32) 0 0; color: var(--ink-muted); font-size: 15px; line-height: 1.55; }
.sv-help a { color: var(--primary-pressed); text-decoration: underline; text-underline-offset: 3px; }

/* 404: крупные цифры в цвет сайта. Время от времени по ним проходит «глитч»: три полосы-копии на миг сдвигаются в стороны и гаснут.
   Анимируются только transform и opacity; при настройке «меньше анимации» цифры стоят ровно. */
.nf { display: grid; place-items: center; min-height: clamp(440px, calc(100dvh - 330px), 780px); padding: var(--space-48) 0; text-align: center; }
.nf-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.nf-code { position: relative; margin: 0 0 var(--space-16); color: var(--primary); font-size: clamp(120px, 26vw, 300px); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; user-select: none; }
.nf-code::before, .nf-code::after, .nf-code__mid { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.nf-code::before { content: attr(data-text); color: var(--ink); clip-path: inset(0 0 62% 0); }
.nf-code::after { content: attr(data-text); color: var(--primary-hover); clip-path: inset(68% 0 0 0); }
.nf-code__mid { color: var(--primary-pressed); clip-path: inset(36% 0 40% 0); }
.nf-title { margin: 0 0 var(--space-12); text-wrap: balance; font-size: 32px; font-weight: 500; line-height: 1.2; }
.nf-lead { max-width: 480px; text-wrap: balance; margin: 0 0 var(--space-32); color: var(--ink-muted); font-size: 16px; line-height: 1.55; }
.nf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-12); }
.nf-btn { min-height: 48px; padding: 0 var(--space-24); font-size: 15px; }
.nf-btn[hidden] { display: none; }
.nf-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.nf-btn--soft { background: var(--surface-1); color: var(--ink); transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.nf-btn--soft:hover { background: var(--surface-2); }
.nf-btn__icon { flex: none; width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.nf-btn:hover .nf-btn__icon--compass { transform: rotate(45deg); }
.nf-btn:hover .nf-btn__icon--back { transform: translateX(-3px); }

@keyframes nf-glitch-top {
  0%, 78%, 96%, 100% { opacity: 0; transform: none; }
  80% { opacity: 1; transform: translate3d(-0.06em, 0, 0); }
  83% { opacity: 1; transform: translate3d(0.05em, 0, 0); }
  86% { opacity: 1; transform: translate3d(-0.03em, 0, 0); }
  89% { opacity: 1; transform: translate3d(0.07em, 0, 0); }
  92% { opacity: 1; transform: translate3d(-0.04em, 0, 0); }
  94% { opacity: 1; transform: translate3d(0.02em, 0, 0); }
}
@keyframes nf-glitch-bottom {
  0%, 79%, 95%, 100% { opacity: 0; transform: none; }
  80% { opacity: 1; transform: translate3d(0.06em, 0, 0); }
  82% { opacity: 1; transform: translate3d(-0.05em, 0, 0); }
  85% { opacity: 1; transform: translate3d(0.04em, 0, 0); }
  88% { opacity: 1; transform: translate3d(-0.07em, 0, 0); }
  91% { opacity: 1; transform: translate3d(0.03em, 0, 0); }
  93% { opacity: 1; transform: translate3d(0.05em, 0, 0); }
}
@keyframes nf-glitch-mid {
  0%, 80%, 93%, 100% { opacity: 0; transform: none; }
  81% { opacity: 1; transform: translate3d(-0.03em, 0, 0); }
  84% { opacity: 1; transform: translate3d(0.08em, 0, 0); }
  87% { opacity: 1; transform: translate3d(-0.06em, 0, 0); }
  90% { opacity: 1; transform: translate3d(0.04em, 0, 0); }
}
@keyframes sv-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .nf-code::before { animation: nf-glitch-top 3.6s steps(1, end) -2s infinite; }
  .nf-code::after { animation: nf-glitch-bottom 3.6s steps(1, end) -2s infinite; }
  .nf-code__mid { animation: nf-glitch-mid 3.6s steps(1, end) -2s infinite; }
  .sv-enter .lp-title, .sv-enter .sv-lead, .sv-enter .sv-chips, .sv-enter   .sv-enter .nf-code, .sv-enter .nf-title, .sv-enter .nf-lead, .sv-enter .nf-actions { animation: sv-rise var(--dur-slow) var(--ease) both; }
  .sv-enter .sv-chips { animation-delay: 60ms; }
  .sv-enter .nf-title { animation-delay: 80ms; }
  .sv-enter .nf-lead { animation-delay: 140ms; }
  .sv-enter .nf-actions { animation-delay: 200ms; }
  .sv-enter .sv-block { animation: sv-rise var(--dur-slow) var(--ease) 200ms both; }
}
@media (prefers-reduced-motion: reduce) { .sv-chip, .nf-btn, .nf-btn__icon { transition: none; } }

@media (max-width: 719px) {
  .nf { min-height: 0; padding: var(--space-32) 0 var(--space-48); }
  .nf-title { font-size: 26px; }
  .nf-actions { flex-direction: column; align-items: stretch; width: 100%; max-width: 360px; }
}