/* ============================================================
   БАЗА: reset, типографические классы, утилиты
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

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

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

table { border-collapse: collapse; width: 100%; }

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Плавная прокрутка ленты миниатюр на PDP — тоже движение */
  .gallery__thumbs { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   ТИПОГРАФИЧЕСКАЯ СИСТЕМА
   Ровно те стили, что описаны в CLAUDE.md §8.
   Размеры шрифта в разметке напрямую не задаются — только эти классы.
   ============================================================ */

.t-h1,
.t-h2,
.t-h3,
.t-h4 {
  font-family: var(--font-head);
  color: var(--navy);
}

.t-h1 {
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  font-weight: 600;
  letter-spacing: -.02em;
}

.t-h2 {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  font-weight: 600;
  letter-spacing: -.01em;
}

.t-h3 {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-weight: 600;
  letter-spacing: -.01em;
}

.t-h4 {
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  font-weight: 500;
}

.t-overline {
  font-family: var(--font-body);
  font-size: var(--t-overline-size);
  line-height: var(--t-overline-lh);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.t-body-l {
  font-size: var(--t-body-l-size);
  line-height: var(--t-body-l-lh);
}

.t-body {
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
}

.t-body-s {
  font-size: var(--t-body-s-size);
  line-height: var(--t-body-s-lh);
}

.t-caption {
  font-size: var(--t-caption-size);
  line-height: var(--t-caption-lh);
  letter-spacing: .01em;
  color: var(--text-muted);
}

.t-price-l {
  font-family: var(--font-head);
  font-size: var(--t-price-l-size);
  line-height: var(--t-price-l-lh);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--navy);
}

.t-price {
  font-family: var(--font-head);
  font-size: var(--t-price-size);
  line-height: var(--t-price-lh);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--navy);
}

.t-price-old {
  font-size: var(--t-price-old-size);
  line-height: var(--t-price-old-lh);
  color: var(--text-weak);
  text-decoration: line-through;
}

.t-label {
  font-size: var(--t-label-size);
  line-height: var(--t-label-lh);
  font-weight: 500;
  letter-spacing: .01em;
}

.t-muted { color: var(--text-muted); }

/* ---------- Текстовые блоки контентных страниц ---------- */
.prose p,
.prose ul,
.prose ol { margin-bottom: var(--sp-4); }

.prose p:last-child { margin-bottom: 0; }

.prose ul li,
.prose ol li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-2);
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.prose ol { counter-reset: li; }

.prose ol li::before {
  counter-increment: li;
  content: counter(li) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 600;
  color: var(--accent);
}

.prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover { color: var(--accent-hover); }

.prose strong { font-weight: 600; color: var(--navy); }

/* ============================================================
   УТИЛИТЫ
   ============================================================ */

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

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 999;
  padding: var(--sp-3) var(--sp-4);
  background: var(--navy);
  color: var(--white);
  border-radius: var(--r-sm);
  transition: top var(--dur) var(--ease);
}

.skip-link:focus { top: var(--sp-4); }

/* Цель скип-ссылки. У <main> есть tabindex="-1", чтобы переход по ссылке
   реально переносил фокус клавиатуры, а не только прокручивал страницу.
   Обводку вокруг всего содержимого при этом не рисуем: <main> — не
   интерактивный элемент, focus-visible у него не появляется, а рамка на
   пол-экрана читалась бы как ошибка. Видимый фокус остаётся у кнопок и
   ссылок (правило §9 не нарушено). */
main:focus { outline: none; }

.no-scroll { overflow: hidden; }

[hidden] { display: none !important; }

.nowrap { white-space: nowrap; }

/* Переход по якорю (catalog.html → contacts.html#contact-form): шапка липкая,
   и без этого отступа цель уезжает под неё вместе со своим заголовком. */
:target { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }