/* ============================================================
   BASE — reset + типографіка + хелпери іконок (Rule R2)
   ============================================================ */

/* Fallback зі ЗБІГОМ метрик Inter (Arial з підгонкою). Поки Inter вантажиться —
   текст уже займає ту саму ширину/висоту, тож підміна шрифту НЕ зсуває layout (Rule R22). */
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial");
  ascent-override:90.20%;
  descent-override:22.48%;
  line-gap-override:0.00%;
  size-adjust:107.40%;
}

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  /* Резервуємо місце під смугу скролу ЗАВЖДИ → при відкритті модалки
     (коли скрол блокується) сторінка НЕ стрибає (Rule R17) */
  scrollbar-gutter:stable;
  overflow-x:clip;            /* без бокового скролу (clip не ламає sticky) */
}
/* На телефоні скрол накладний → stable лишає пусту смужку збоку. Вимикаємо. */
@media (max-width:640px){ html{ scrollbar-gutter:auto; } }

body{
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--text-main);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv11","ss01";
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  overflow-x:clip;            /* без бокового скролу (clip не ламає sticky) */
}

img,svg,video,canvas{ display:block; max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
[hidden]{ display:none !important; }

::selection{ background:var(--primary-100); color:var(--primary-700); }

/* Скролбари — тонкі та делікатні */
*{ scrollbar-width:thin; scrollbar-color:var(--neutral-300) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{
  background:var(--neutral-300); border-radius:99px;
  border:3px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background:var(--neutral-400); background-clip:content-box; }

/* Фокус (Rule R10) */
:focus-visible{ outline:none; box-shadow:var(--ring-focus); border-radius:var(--radius-sm); }

/* ---------- Типографічні хелпери ---------- */
.h1{ font-size:var(--text-3xl); font-weight:var(--fw-bold);   color:var(--text-strong); line-height:var(--leading-tight); letter-spacing:-.02em; }
.h2{ font-size:var(--text-2xl); font-weight:var(--fw-semibold);color:var(--text-strong); line-height:var(--leading-tight); letter-spacing:-.01em; }
.h3{ font-size:var(--text-lg);  font-weight:var(--fw-semibold);color:var(--text-strong); }
.title{ font-size:var(--text-xl); font-weight:var(--fw-semibold); color:var(--text-strong); letter-spacing:-.01em; }
.text-sub{ color:var(--text-sub); }
.text-soft{ color:var(--text-soft); }
.text-xs{ font-size:var(--text-xs); }
.text-sm{ font-size:var(--text-sm); }
.fw-medium{ font-weight:var(--fw-medium); }
.fw-semibold{ font-weight:var(--fw-semibold); }
.mono{ font-family:var(--font-mono); }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }

/* ============================================================
   ІКОНКИ — Rule R2 (вертикальне вирівнювання по тексту)
   ============================================================ */
.icon{
  display:block; flex:0 0 auto;
  width:var(--icon-md); height:var(--icon-md);
  stroke-width:2; color:currentColor;
}
.icon--sm{ width:var(--icon-sm); height:var(--icon-sm); }
.icon--lg{ width:var(--icon-lg); height:var(--icon-lg); }
.icon--xl{ width:var(--icon-xl); height:var(--icon-xl); }

/* Будь-яка пара «іконка+текст» — flex по центру */
.with-icon{ display:inline-flex; align-items:center; gap:var(--space-2); min-width:0; }
.with-icon--sm{ gap:var(--space-1); }

/* Резервуємо місце під іконку ЩЕ ДО завантаження Lucide → layout не «стрибає» (FOUC).
   Порожній <i data-lucide> займає той самий розмір, що й майбутній <svg>. */
[data-lucide]{
  display:inline-block; flex:0 0 auto;
  width:var(--icon-md); height:var(--icon-md);
}
[data-lucide].icon--sm{ width:var(--icon-sm); height:var(--icon-sm); }
[data-lucide].icon--lg{ width:var(--icon-lg); height:var(--icon-lg); }
[data-lucide].icon--xl{ width:var(--icon-xl); height:var(--icon-xl); }
/* Резерв = точний фінальний розмір у кожному контексті (інакше дрож на пару px) */
.btn [data-lucide]{ width:var(--icon-sm); height:var(--icon-sm); }
.icon-btn [data-lucide]{ width:var(--icon-lg); height:var(--icon-lg); }
.icon-btn--sm [data-lucide]{ width:var(--icon-md); height:var(--icon-md); }
.badge [data-lucide]{ width:13px; height:13px; }
.rating [data-lucide]{ width:14px; height:14px; }
.stat__head [data-lucide],.stat__foot [data-lucide]{ width:var(--icon-sm); height:var(--icon-sm); }
.delta [data-lucide]{ width:13px; height:13px; }

/* ---------- Layout-хелпери ---------- */
.row{ display:flex; align-items:center; }
.row-between{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); }
.col{ display:flex; flex-direction:column; }
.gap-1{ gap:var(--space-1);} .gap-2{ gap:var(--space-2);} .gap-3{ gap:var(--space-3);}
.gap-4{ gap:var(--space-4);} .gap-6{ gap:var(--space-6);}
.ml-auto{ margin-left:auto; }
.wrap{ flex-wrap:wrap; }

/* Вертикальні стеки — РИТМ через gap (Rule R4) */
.stack{ display:flex; flex-direction:column; }
.stack-2{ gap:var(--gap-tight); }
.stack-4{ gap:var(--gap-block); }
.stack-6{ gap:var(--gap-section); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}