*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html {
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
}
body {
font-family: var(--n-font);
font-size: var(--n-fs);
line-height: var(--n-lh);
font-weight: var(--n-w-reg);
color: var(--n-text);
background: var(--n-bg);
min-height: 100vh;
letter-spacing: -0.005em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
position: relative;
transition:
background-color var(--n-dur-slow) var(--n-ease),
color           var(--n-dur-slow) var(--n-ease);
}
body::before {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 70% 50% at 20% 30%, var(--n-bg-glow-top),    transparent 55%),
radial-gradient(ellipse 50% 60% at 80% 70%, var(--n-bg-glow-bottom), transparent 55%);
}
body::after {
content: '';
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(0deg,
transparent, transparent 2px,
rgba(255, 255, 255, 0.005) 2px, rgba(255, 255, 255, 0.005) 4px),
linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
background-size: auto, 60px 60px, 60px 60px;
}
[data-theme="light"] body::after {
background-image:
repeating-linear-gradient(0deg,
transparent, transparent 2px,
rgba(0, 0, 0, 0.012) 2px, rgba(0, 0, 0, 0.012) 4px),
linear-gradient(rgba(0, 0, 0, 0.022) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 0, 0, 0.022) 1px, transparent 1px);
}
body > * { position: relative; z-index: 1; }
h1, h2, h3, h4, h5, h6 {
font-family: inherit;
font-size: var(--n-fs);
font-weight: var(--n-w-bold);
line-height: var(--n-lh-tight);
letter-spacing: -0.01em;
color: var(--n-text);
}
a {
color: var(--n-accent);
text-decoration: none;
transition: color var(--n-dur-fast) var(--n-ease);
}
a:hover { color: var(--n-accent-hover); }
a:focus-visible {
outline: none;
box-shadow: var(--n-focus-ring);
border-radius: var(--n-r-xs);
}
ul, ol { list-style: none; }
button, input, select, textarea {
font-family: inherit;
font-size: var(--n-fs);
font-weight: var(--n-w-reg);
color: inherit;
}
button { cursor: pointer; background: none; border: none; }
button:disabled { cursor: not-allowed; }
/*
 * 🔴 v1.1.6.66 (ARENA-UI-P1-32). Канон давав фокусну рамку посиланням, полям і спискам — і НЕ
 * давав кнопкам. Знайдено виміром в Арені: з 11 інтерактивних елементів бойового екрана 11 не
 * мали ЖОДНОГО правила `:focus-visible`, зокрема кнопки дій бою і `button.btn-ghost`.
 *
 * Виправлено там, де живе канон, а не в Арені. Полагодити лише Арену означало б, що той самий
 * `btn-ghost` поводиться на різних екранах по-різному — тобто саме та розбіжність, проти якої
 * і робився весь A4.2.
 *
 * `:focus-visible` спрацьовує лише на клавіатурному фокусі, тож для миші вигляд не змінюється.
 */
button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: none;
box-shadow: var(--n-focus-ring);
}
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
::selection { background: var(--n-accent-soft); color: var(--n-text); }
* { scrollbar-width: thin; scrollbar-color: var(--n-line-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: var(--n-line-strong);
border-radius: var(--n-r-pill);
transition: background var(--n-dur-fast) var(--n-ease);
}
*::-webkit-scrollbar-thumb:hover { background: var(--n-accent); }
.kp-icon {
display: inline-block;
vertical-align: -0.15em;
flex-shrink: 0;
pointer-events: none;
color: currentColor;
}
.kp-icon svg {
display: block;
width: 100%;
height: 100%;
fill: none;
stroke: currentColor;
}
@media print {
body::before, body::after { display: none; }
body { background: white !important; color: black !important; }
}
.kp-item-icon {
display: inline-block;
vertical-align: middle;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
}
.kp-item-icon--emoji {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.kp-quick-heal__iconwrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
line-height: 1;
}
.kp-quick-heal__iconwrap .kp-item-icon {
width: 20px;
height: 20px;
}
.kp-shop-card__ico img.kp-item-icon {
width: 96px;
height: 96px;
filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent));
}
@media (max-width: 480px) {
.kp-shop-card__ico img.kp-item-icon {
width: 72px;
height: 72px;
}
}

/* ─────────────────────────────────────────────────────────────────────────────
 * v1.1.5.999: БЛОКУВАННЯ ПРОКРУТКИ ПІД ВІДКРИТИМИ ПАНЕЛЯМИ.
 *
 * Гейт №111 знайшов два класи, які JS ставить на кореневі елементи, а CSS про них не знав:
 *   • `right-slider-open` → на `<html>` (права панель);
 *   • `kp-header-notifications-open` → на `<body>` (сповіщення в шапці).
 *
 * Самі панелі показуються іншими механізмами (`.is-open` у слайдера, атрибут `hidden` у
 * сповіщень) — тому візуально все працювало. А ці два класи мали робити те, чого ніхто не
 * робив: спиняти прокрутку сторінки під панеллю.
 *
 * На телефоні різниця помітна одразу: людина гортає список сповіщень, доходить до кінця — і
 * далі починає їхати сторінка ПІД панеллю. Панель лишається на місці, а фон під нею повзе.
 *
 * `overscroll-behavior` тут важливіший за `overflow`: він спиняє саме «протікання» жесту з
 * панелі на документ.
 * ───────────────────────────────────────────────────────────────────────────── */
html.right-slider-open,
body.kp-header-notifications-open {
  overflow: hidden;
  overscroll-behavior: contain;
}