/* KIBERHUB polish — доступность, плавность, производительность отрисовки, страница 404.
   Подключается после kiber-ui-v5.css. Использует переменные темы (--blue, --line, --txt, --bg). */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hh, 120px) + 12px); }
::selection { background: rgba(31, 107, 255, .28); color: inherit; }

/* Ссылка «Перейти к содержимому» — видна только при фокусе с клавиатуры */
.kb-skip {
    position: fixed; left: 12px; top: -64px; z-index: 10000;
    padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: .9rem;
    background: var(--blue, #1f6bff); color: #fff; text-decoration: none;
    box-shadow: 0 10px 30px rgba(31, 107, 255, .45); transition: top .18s ease;
}
.kb-skip:focus { top: 12px; color: #fff; outline: 2px solid #fff; outline-offset: 2px; }
#main:focus { outline: none; }

/* Чёткий фокус только для клавиатуры */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--blue, #1f6bff); outline-offset: 2px; border-radius: 8px;
}
:where(a, button, input, select, textarea):focus:not(:focus-visible) { outline: none; }

/* Быстрее первая отрисовка: блоки ниже первого экрана рисуются по мере прокрутки */
.site-footer, .block, .recent-row, #recentBlock { content-visibility: auto; contain-intrinsic-size: auto 520px; }
.site-footer { contain-intrinsic-size: auto 640px; }

/* Картинки товаров: мягкая заглушка до загрузки, без прыжков вёрстки */
.p-img img, .kiber-product-photo { background: linear-gradient(110deg, rgba(120,140,190,.06) 8%, rgba(120,140,190,.14) 18%, rgba(120,140,190,.06) 33%); background-size: 200% 100%; }
.p-img img[src] { animation: kbShimmer 1.4s linear 2; }
@keyframes kbShimmer { to { background-position-x: -200%; } }

/* Лёгкая «приподнятость» карточек без свечения под курсором */
@media (hover: hover) and (pointer: fine) {
    .p-card { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease; will-change: transform; }
    .p-card:hover { transform: translateY(-3px); }
}

/* Аккуратные полосы прокрутки */
* { scrollbar-width: thin; scrollbar-color: rgba(120, 140, 190, .45) transparent; }

/* Уважение к системной настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .ticker-track { animation: none !important; }
}

/* Печать: без лишнего */
@media print {
    .site-header, .topbar, .bottom-nav, .to-top, .site-loader, .cursor, .grain, .kb-search-overlay, .nx-toasts, .site-footer .newsletter { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
}

/* ---------- Страница 404 ---------- */
.kb-404 { position: relative; text-align: center; padding: clamp(36px, 8vw, 96px) 0 clamp(40px, 8vw, 90px); }
.kb-404-code {
    font-family: 'Exo 2', 'Inter', sans-serif; font-weight: 900; line-height: .9; letter-spacing: -.04em;
    font-size: clamp(5.5rem, 22vw, 12rem); margin: 0 0 6px;
    background: linear-gradient(135deg, #e8eefb 0%, #7cb8ff 45%, #1f6bff 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 14px 36px rgba(31, 107, 255, .28));
}
[data-theme="light"] .kb-404-code { background: linear-gradient(135deg, #18213a 0%, #1f6bff 70%, #06b6d4 100%); -webkit-background-clip: text; background-clip: text; }
.kb-404 h1 { font-size: clamp(1.35rem, 3.4vw, 2rem); font-weight: 800; margin: 0 0 8px; }
.kb-404 p { color: var(--bs-secondary-color, #7b88a6); max-width: 520px; margin: 0 auto 22px; }
.kb-404-search { display: flex; gap: 8px; max-width: 520px; margin: 0 auto 22px; }
.kb-404-search input { flex: 1; min-width: 0; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--in); color: var(--txt); padding: 0 16px; font-size: 1rem; }
.kb-404-search button { height: 48px; padding: 0 22px; }
.kb-404-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; margin: 0 auto; }
.kb-404-links a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(var(--bgc), .6); color: var(--txt); text-decoration: none; font-weight: 600; font-size: .9rem; transition: border-color .2s, transform .2s, color .2s; }
.kb-404-links a:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }