/* Дизайн-система PHINIKA.
 *
 * Тёмная кинематографичная витрина: товар — проекторы, и сайт сам показывает,
 * как выглядит картинка в темноте. Это же отстраивает нас от белых карточек
 * Kaspi, где мы неотличимы от перекупов.
 *
 * Правила, которые здесь зашиты:
 *   — чистый чёрный не используем: на OLED он «мажет» при прокрутке;
 *   — акцент тёплый янтарный, он читается как свет лампы проектора;
 *   — контраст текста не ниже 4.5:1, у крупного не ниже 3:1;
 *   — переходы 150–300 мс: быстрее — дёргано, медленнее — тормозит;
 *   — светлая тема нужна там, где человек работает с деталями:
 *     каталог, оформление заказа, отслеживание.
 */

:root {
  /* Тёмная основа. Не #000: тёплая примесь даёт глубину и убирает смаз */
  --ink-900: #0B0A09;
  --ink-850: #12100E;
  --ink-800: #1A1714;
  --ink-700: #241F1A;
  --ink-600: #332B24;

  /* Тёплый акцент — свет проектора */
  --amber-400: #F2B544;
  --amber-500: #E0A030;
  --amber-600: #C9871C;
  --amber-soft: rgba(242, 181, 68, 0.12);

  /* Текст на тёмном */
  --text: #F5F1EC;
  --text-dim: #B8AFA4;
  --text-mute: #8A8177;

  /* Светлая тема для рабочих экранов */
  --paper: #FBFAF8;
  --paper-2: #F2EFEA;
  --paper-line: #E2DCD3;
  --paper-text: #16130F;
  --paper-dim: #5C544A;

  --line: rgba(245, 241, 236, 0.10);
  --line-strong: rgba(245, 241, 236, 0.18);

  --ok: #4ADE80;
  --warn: #FBBF24;
  --bad: #F87171;

  --font: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Шкала отступов. Всё кратно 4 — иначе вёрстка «плывёт» на глаз */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px;

  --shadow-1: 0 2px 8px rgba(0,0,0,.28);
  --shadow-2: 0 12px 40px rgba(0,0,0,.42);
  --glow: 0 0 60px rgba(242, 181, 68, .18);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 160ms;
  --norm: 240ms;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  background: var(--ink-900);
  color: var(--text);
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s5); }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 var(--s5); }

/* ---------- Типографика ---------- */
/* Крупные заголовки идут с отрицательным трекингом: на больших кеглях
   стандартные пробелы между буквами выглядят разреженными */

/* Сдержанная шкала. У брендов проекторов — XGIMI, Nebula — герой страницы
   это фотография товара, а типографика намеренно тихая. Раздутые заголовки
   съедают место, которое должно достаться самому товару, и на ноутбуке
   страница выглядит как плакат, а не как магазин. */

.display {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -0.028em;
}
h1 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.022em; }
h2 { font-size: clamp(1.25rem, 1.9vw, 1.55rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.016em; }
h3 { font-size: 1.04rem; font-weight: 650; letter-spacing: -0.008em; }

.kicker {
  font-size: .72rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--amber-400);
}
.lead { font-size: clamp(.98rem, 1.1vw, 1.06rem); color: var(--text-dim); line-height: 1.6; }
.muted { color: var(--text-dim); }
.small { font-size: .9rem; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---------- Кнопки ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5);
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-weight: 650; font-size: .98rem; cursor: pointer; white-space: nowrap;
  transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast), box-shadow var(--fast);
}
.btn:active { transform: scale(.975); }
.btn:focus-visible { outline: 2px solid var(--amber-400); outline-offset: 3px; }

.btn-main { background: var(--amber-400); color: #17120A; }
.btn-main:hover { background: var(--amber-500); box-shadow: 0 6px 24px rgba(242,181,68,.28); }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--amber-400); color: var(--amber-400); }

.btn-quiet { background: rgba(245,241,236,.06); color: var(--text); }
.btn-quiet:hover { background: rgba(245,241,236,.11); }

.btn-wide { width: 100%; }
.btn-lg { min-height: 56px; padding: 0 var(--s6); font-size: 1.04rem; }

/* ---------- Плашки ---------- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 600; letter-spacing: .01em;
  background: var(--amber-soft); color: var(--amber-400);
}
.chip-ok   { background: rgba(74,222,128,.13); color: var(--ok); }
.chip-warn { background: rgba(251,191,36,.13); color: var(--warn); }
.chip-dim  { background: rgba(245,241,236,.07); color: var(--text-dim); }

/* ---------- Карточки ---------- */

.card {
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--norm) var(--ease), transform var(--norm) var(--ease), box-shadow var(--norm) var(--ease);
}
a.card:hover {
  border-color: rgba(242,181,68,.34);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

/* Витринное фото: товар вырезан, фон рисуем сами — тёплое пятно света
   под предметом создаёт ощущение подсветки, а не наклейки на подложку */
/* Фото занимает почти всю карточку: товар и есть главный аргумент.
   Подложка светлая — снимки с Kaspi сняты на белом, и на тёмной плитке
   они выглядели вырезанными наспех. Светлое окно внутри тёмной карточки
   читается как витринная подсветка и показывает кадр целиком. */
.shot {
  position: relative; aspect-ratio: 1/1;
  display: grid; place-items: center; overflow: hidden;
  background: #FFFFFF;
}
.shot img {
  width: 100%; height: 100%; object-fit: contain;
  transition: transform 420ms var(--ease);
}
a.card:hover .shot img { transform: scale(1.06) translateY(-2px); }

/* Метка поверх фото: наличие, отзывы, «лучшее в линейке» */
.shot .tag {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 9px; border-radius: 7px;
  font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  background: rgba(11,10,9,.72); backdrop-filter: blur(6px); color: var(--text-dim);
}
.shot .tag.hot { background: rgba(242,181,68,.92); color: #17120A; }

/* ---------- Сетки ---------- */
/* Плотнее прежнего: на экране должно помещаться больше товара.
   Разреженная сетка из четырёх карточек читается как пустой магазин. */

.grid { display: grid; gap: var(--s4); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(214px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* ---------- Полоса доверия ---------- */
/* У всех сильных магазинов техники она есть: доставка, возврат, гарантия,
   официальность. Снимает главные страхи до того, как человек их задал. */

.trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3); padding: var(--s5) 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.trust > div { display: flex; align-items: flex-start; gap: 11px; }
.trust svg { flex: none; color: var(--amber-400); margin-top: 3px; }
.trust b { display: block; font-size: .88rem; font-weight: 650; line-height: 1.35; }
/* span тоже блочный: строчным он вставал рядом с заголовком и ломал колонку */
.trust span { display: block; font-size: .8rem; color: var(--text-mute);
              line-height: 1.45; margin-top: 3px; }

/* ---------- Формы ---------- */

.field { margin-bottom: var(--s4); }
.field label {
  display: block; margin-bottom: 7px;
  font-size: .88rem; font-weight: 600; color: var(--text-dim);
}
.field input, .field textarea, .field select {
  width: 100%; min-height: 50px; padding: 13px 15px;
  background: rgba(0,0,0,.28); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  transition: border-color var(--fast), background var(--fast);
}
.field textarea { min-height: 96px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-mute); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--amber-400); background: rgba(0,0,0,.42);
}
.field .hint { margin-top: 6px; font-size: .82rem; color: var(--text-mute); }
.field .err { margin-top: 6px; font-size: .84rem; color: var(--bad); }

/* ---------- Появление при прокрутке ---------- */
/* Смысл в том, чтобы взгляд шёл по странице сверху вниз, а не хватал всё разом */

/* Блоки скрыты ТОЛЬКО когда скрипт подтвердил, что умеет их показать:
   класс js-anim ставится на <html> перед отрисовкой. Иначе при любой осечке
   в скрипте товар остаётся прозрачным навсегда — так уже пропадала половина
   каталога. Содержимое обязано быть видно без JavaScript. */
html.js-anim .reveal { opacity: 0; transform: translateY(18px); }
html.js-anim .reveal.on {
  opacity: 1; transform: none;
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}

/* ---------- Светлые блоки для рабочих экранов ---------- */

.paper {
  background: var(--paper); color: var(--paper-text);
  border-radius: var(--r-lg); border: 1px solid var(--paper-line);
}
.paper .muted { color: var(--paper-dim); }
.paper .field label { color: var(--paper-dim); }
.paper .field input, .paper .field textarea, .paper .field select {
  background: #fff; color: var(--paper-text); border-color: var(--paper-line);
}
.paper .field input:focus, .paper .field textarea:focus { background: #fff; border-color: var(--amber-600); }

/* ---------- Мелочи ---------- */

.divider { height: 1px; background: var(--line); border: 0; margin: var(--s7) 0; }
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.center { text-align: center; }

@media (max-width: 720px) {
  body { font-size: 16px; }
  .wrap, .wrap-narrow { padding: 0 var(--s4); }
  .btn { min-height: 50px; }   /* палец больше курсора: не меньше 44px */

  /* Две колонки вместо одной. При одной карточке на экран 21 товар
     превращается в бесконечную прокрутку, и человек не видит выбора. */
  .grid-4 { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }

  .card .body, .body { padding: var(--s3); }
  .shot { aspect-ratio: 1/1; }
}

/* Полоса разделов. На телефоне вкладки занимали три строки и съедали экран
   до того, как показался первый товар. Прокрутка вбок решает это и привычна
   по любому маркетплейсу. */
@media (max-width: 720px) {
  .tabs {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    margin-left: calc(-1 * var(--s4)); margin-right: calc(-1 * var(--s4));
    padding: 0 var(--s4) var(--s2);
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { scroll-snap-align: start; flex: none; }
}