/* ══════════════════════════════════════════════════════════════════════════
   base.css — сброс, базовая типографика и пол доступности.

   Всё, что здесь объявлено, наследуют все страницы всех фаз. Кольцо фокуса
   нигде и никогда не снимается: `outline:none` без замены — это ровно тот
   приём, из-за которого сайт становится непроходимым с клавиатуры.

   Ни одного литерала цвета, размера, отступа и радиуса — только токены.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Сброс ─────────────────────────────────────────────────────────────── */

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

*{ margin:0; padding:0; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-size:var(--text-body);
  font-weight:var(--weight-regular);
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-surface);
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
img{ height:auto; }

ul,ol{ list-style:none; }

button,input,select,textarea{ font:inherit; color:inherit; }

button{ background:none; border:0; cursor:pointer; }

a{ color:var(--color-accent); }


/* ── Базовая типографика ───────────────────────────────────────────────── */

h1,h2,h3,h4{ line-height:1.2; font-weight:var(--weight-bold); }

h1{ font-size:var(--text-display); }
h2{ font-size:var(--text-heading); }
h3{ font-size:var(--text-lead); line-height:1.3; }
h4{ font-size:var(--text-body); }

small,.text-caption{ font-size:var(--text-caption); }

/* Мера текста. Длинная строка читается плохо независимо от того, сколько
   места есть на экране — ограничение применяется к текстовым колонкам
   (страница новости, описание товара), а не ко всему подряд. */
.prose{ max-width:70ch; }
.prose p + p{ margin-top:var(--space-4); }

/* ── Вывод визуального редактора ──────────────────────────────────────────
   .prose — единственное место проекта, где разметка приезжает из базы
   (описание товара, D-19). Санитайзер снимает с неё ВСЕ атрибуты
   оформления — style, width, border, class, — поэтому каждый разрешённый
   тег обязан выглядеть правильно сам по себе, без единого класса.
   Перечень ниже повторяет белый список HTMLPurifier один в один:
   p, br, strong, em, u, s, ul, ol, li, h3, h4, a, blockquote, hr, table
   (thead, tbody, tr, th, td). Тег вне списка сюда не доедет; тег из
   списка без правила приедет неоформленным — это и есть та тихая потеря,
   ради которой блок написан заранее, а не после первой жалобы.
   Ни одного литерала цвета, кегля, отступа и радиуса: всё из tokens.css. */

/* Заголовки описания начинаются с третьего уровня: h1 занят названием
   товара, h2 — заголовками блоков шаблона («Характеристики», «Описание»,
   «Быстрая заявка»). Кегль и начертание приходят из базовой типографики
   выше — здесь только вертикальный ритм. */
/* h2 добавлен в белый список санитайзера планом 05-01: контентные страницы
   Фазы 5 — это длинный текст с подзаголовками, а начинать его с третьего
   уровня значило бы пропустить уровень после h1 страницы. Тег из белого
   списка без правила приезжает неоформленным — та самая тихая потеря, ради
   которой правило написано вместе с расширением списка, а не после. */
.prose h2{ margin-top:var(--space-7); margin-bottom:var(--space-4); }
.prose h3{ margin-top:var(--space-6); margin-bottom:var(--space-3); }
.prose h4{ margin-top:var(--space-5); margin-bottom:var(--space-2); }
/* Тело, начинающееся сразу с подзаголовка, не отбивается лишним пробелом от
   заголовка страницы: верхний отступ первого потомка снимается. */
.prose h2:first-child,
.prose h3:first-child,
.prose h4:first-child{ margin-top:0; }

.prose ul,
.prose ol{
  margin-top:var(--space-4);
  margin-bottom:var(--space-4);
  padding-left:var(--space-5);
}
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li + li{ margin-top:var(--space-2); }
.prose li > ul,
.prose li > ol{ margin-top:var(--space-2); margin-bottom:0; }

/* Ссылка в описании подчёркнута, а не только окрашена: цвет один не
   отличает ссылку тому, кто его не различает. Сам цвет наследуется от
   общего правила a — своего у описания нет и быть не должно. */
.prose a{ text-decoration:underline; }

.prose strong{ font-weight:var(--weight-bold); }
.prose em{ font-style:italic; }

.prose blockquote{
  margin-top:var(--space-4);
  margin-bottom:var(--space-4);
  padding-left:var(--space-4);
  border-left:3px solid var(--color-hairline);
  color:var(--color-text-muted);
}

.prose hr{
  margin-top:var(--space-6);
  margin-bottom:var(--space-6);
  border:0;
  border-top:1px solid var(--color-hairline);
}

/* Таблица приходит из редактора голой: ни width, ни border, ни style —
   санитайзер снимает их все. Значит вид её задаёт только это правило.
   Про узкий экран отдельно: обёртки с собственной прокруткой у таблицы
   нет и быть не может — div в белый список не входит, а превращать саму
   таблицу в прокручиваемый блок сменой display нельзя: это вычищает
   табличные роли из дерева доступности (тот же довод, по которому .specs
   собран списком определений, а не перестроенной таблицей). Поэтому
   колонки фиксированной ширины, а длинное содержимое переносится внутри
   ячейки — горизонтальной прокрутки страницы не возникает. */
.prose table{
  width:100%;
  margin-top:var(--space-4);
  margin-bottom:var(--space-4);
  border-collapse:collapse;
  table-layout:fixed;
}
.prose th,
.prose td{
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-hairline);
  vertical-align:top;
  overflow-wrap:anywhere;
}
.prose th{ font-weight:var(--weight-bold); text-align:left; }


/* ── Пол доступности ───────────────────────────────────────────────────── */

/* Кольцо фокуса: --color-focus на белом даёт 7.97:1 при требуемых 3:1.
   Запасная ветка нужна браузерам без :focus-visible — там кольцо просто
   появляется и на мышиный фокус, что хуже эстетически и лучше, чем никак. */
:focus-visible{
  outline:3px solid var(--color-focus);
  outline-offset:2px;
}
@supports not selector(:focus-visible){
  :focus{ outline:3px solid var(--color-focus); outline-offset:2px; }
}

/* Тач-цели: 44px — WCAG 2.5.5 AAA. Это высота элемента управления, а не
   отступ; она сознательно живёт вне шкалы кратных четырём (D-02). */
a.btn,button,input,select,textarea,.site-nav a{ min-height:var(--tap-min); }

/* Единственный корректный рецепт скрытия от глаз с сохранением для
   скринридеров. display:none и visibility:hidden убирают текст И от
   вспомогательных технологий — это не то же самое. */
.visually-hidden:not(:focus):not(:active){
  clip-path:inset(50%);
  height:1px;
  width:1px;
  overflow:hidden;
  position:absolute;
  white-space:nowrap;
}

/* Ссылка-пропуск: первое, что получает фокус на странице, и до фокуса
   невидима. Выезжает сверху, а не «мигает» — чтобы её появление читалось. */
.skip-link{
  position:absolute;
  left:var(--space-4);
  top:-100px;
  z-index:100;
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-sm);
  background:var(--color-surface);
  color:var(--color-accent);
  font-weight:var(--weight-semibold);
  text-decoration:none;
  box-shadow:var(--shadow);
  transition:top .15s;
}
.skip-link:focus{ top:var(--space-4); }

/* Кламп в две строки. Стандартное свойство написано рядом с префиксным:
   -webkit-line-clamp не Baseline, а line-clamp из CSS Overflow 4 новее его.
   Контейнер обязан терпеть три строки — тогда браузер без поддержки даёт
   некрасиво, но не сломано. */
.clamp-2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}

/* Длинные адреса и артикулы не должны рвать сетку. */
.wrap-anywhere{ overflow-wrap:anywhere; }

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