/* ═══════════════════════════════════════════════════════════
   OCCULT — «Тихий архив» · дизайн-система
   Частный каталог. Волосяные линии, моноширинные индексы,
   курсивные врезки. Никаких пилюль, теней и градиентов.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── палитра ── */
  --bg: #0a0a0b;
  --bg-raised: #101012;
  --bg-subtle: #0d0d0f;
  --ink: #ebe9e4;
  --ink-2: rgba(235, 233, 228, .62);
  --ink-3: rgba(235, 233, 228, .38);
  --ink-4: rgba(235, 233, 228, .22);
  --accent: #c9b995;
  --accent-dim: rgba(201, 185, 149, .55);
  --accent-bg: rgba(201, 185, 149, .07);
  --accent-line: rgba(201, 185, 149, .35);
  --ok: #8fa98f;
  --ok-dim: rgba(143, 169, 143, .6);
  --line: rgba(235, 233, 228, .09);
  --line-strong: rgba(235, 233, 228, .16);

  /* ── типографика ── */
  --sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant", Georgia, serif;
  --mono: "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, monospace;
  --fs-micro: 10px;
  --fs-meta: 12px;
  --fs-small: 13px;
  --fs-body: 15px;
  --fs-lead: 17px;
  --fs-title: clamp(26px, 3.4vw, 42px);
  --fs-display: clamp(44px, 7vw, 92px);
  --ls-micro: .15em;
  --ls-wide: .3em;
  --lh-body: 1.6;

  /* ── отступы (4px) ── */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* ── форма ── */
  --r: 2px;

  /* ── движение ── */
  --t-fast: 150ms ease;
  --t-med: 220ms ease;
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ── сетка ── */
  --max: 1180px;
  --gutter: 32px;
}

/* ═══ БАЗА ═══ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(235, 233, 228, .18); }
::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* зерно — почти невидимое */
.grain {
  position: fixed; inset: -50%; z-index: 5; pointer-events: none; opacity: .02;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ═══ PRELOADER ═══ */
.preloader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity .45s ease, visibility .45s ease;
}
.preloader.is-done { opacity: 0; visibility: hidden; }
.preloader-logo {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--ls-wide);
  color: var(--ink-3);
  text-transform: uppercase;
  padding-left: var(--ls-wide);
}

/* ═══ HEADER ═══ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: 0 var(--gutter);
  height: 64px;
  transition: background var(--t-med), border-color var(--t-med);
  border-bottom: 1px solid transparent;
}
.header.is-scrolled {
  background: rgba(10, 10, 11, .92);
  border-bottom-color: var(--line);
}
.wordmark {
  font-size: 13px; font-weight: 600; letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.wordmark sup { font-size: 8px; color: var(--ink-3); font-weight: 400; letter-spacing: .1em; }

.nav { display: flex; gap: var(--s1); }
.nav a {
  font-size: var(--fs-small); color: var(--ink-2);
  padding: var(--s2) var(--s3);
  position: relative;
  transition: color var(--t-fast);
}
.nav a::after {
  content: ""; position: absolute; left: var(--s3); right: var(--s3); bottom: 2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after { transform: scaleX(1); }

.header-profile {
  display: block;
  width: 32px; height: 32px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  transition: border-color var(--t-fast);
  flex-shrink: 0;
}
.header-profile:hover { border-color: var(--accent-dim); }
.header-profile img { width: 100%; height: 100%; object-fit: cover; }

.burger { display: none; flex-direction: column; gap: 5px; padding: var(--s2); }
.burger span { width: 20px; height: 1px; background: var(--ink); transition: transform var(--t-med), opacity var(--t-med); }
.burger.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
.burger.is-open span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* ═══ КНОПКИ — без пилюль ═══ */
.btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-size: var(--fs-small); font-weight: 500;
  letter-spacing: .04em;
  padding: 12px 24px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  cursor: pointer;
  background: transparent;
}
.btn:hover { border-color: var(--accent-dim); color: var(--accent); }
.btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn--ghost { color: var(--ink-2); }
.btn--ghost:hover { color: var(--accent); }

/* ═══ HERO (главная) — архивная обложка ═══ */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 140px var(--gutter) var(--s9);
  max-width: var(--max); margin: 0 auto; width: 100%;
  position: relative;
}
.hero-glow { display: none; } /* градиенты запрещены */

.hero-badge {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s6);
  display: flex; align-items: center; gap: var(--s3);
}
.hero-badge::before {
  content: ""; width: 24px; height: 1px; background: var(--accent-dim);
}

.hero-title {
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  margin-bottom: var(--s6);
  text-transform: uppercase;
}
.hero-sub {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--ink-2);
  max-width: 480px;
  margin-bottom: var(--s7);
  line-height: 1.5;
}
.hero-actions { display: flex; gap: var(--s4); flex-wrap: wrap; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: auto; padding-top: var(--s7);
  border-top: 1px solid var(--line);
  gap: var(--s6);
}
.hero-stat b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.hero-stat i {
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  display: block; margin-top: var(--s2);
}

/* ═══ СЕКЦИИ — нумерованные регистры ═══ */
.section {
  padding: var(--s9) var(--gutter);
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.section-head {
  margin-bottom: var(--s7);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s5) var(--s7);
  align-items: start;
}
.section-index {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--accent-dim);
  letter-spacing: .05em;
  padding-top: 6px;
}
.section-label {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s3);
}
.section-label--accent { color: var(--accent-dim); }
.section-title {
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.section-sub { color: var(--ink-2); font-size: var(--fs-body); max-width: 460px; margin-top: var(--s4); }
.section-head--row {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s6); flex-wrap: wrap;
}
.section-head--row .section-index { display: none; }
.section-link {
  font-size: var(--fs-small); color: var(--ink-2);
  display: inline-flex; align-items: center; gap: var(--s2);
  transition: color var(--t-fast);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.section-link:hover { color: var(--accent); border-bottom-color: var(--accent-dim); }

/* появления — одно затухающее, без пружин */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ═══ ХЛЕБНЫЕ КРОШКИ ═══ */
.crumbs {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s6);
}
.crumbs a { color: var(--ink-2); transition: color var(--t-fast); }
.crumbs a:hover { color: var(--accent); }
.crumbs i { font-style: normal; opacity: .35; }
.crumbs b { color: var(--ink); font-weight: 400; }

/* ═══ ВНУТРЕННИЕ СТРАНИЦЫ ═══ */
.page-hero {
  padding: 128px var(--gutter) 0;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}
.page-hero-kicker {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(16px, 1.8vw, 20px);
  color: var(--accent-dim);
  margin-bottom: var(--s3);
}
.page-hero-title {
  font-size: var(--fs-title);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: var(--s4);
}
.page-hero-sub { color: var(--ink-2); font-size: var(--fs-body); max-width: 480px; }

/* ═══ КАТАЛОГ: опись с регистром фильтров ═══ */
.catalog-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s8);
  align-items: start;
}
.sidebar {
  position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: var(--s7);
}
.side-group { border-top: 1px solid var(--line); padding-top: var(--s4); }
.side-group-label {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: var(--ls-micro); text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
  display: flex; justify-content: space-between; align-items: baseline;
}
.side-group-label span { font-weight: 400; letter-spacing: .05em; text-transform: none; }

/* список фильтров — регистр с закладкой слева */
.side-list { display: flex; flex-direction: column; }
.side-item {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: 7px 0 7px var(--s3);
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-align: left;
  position: relative;
  transition: color var(--t-fast);
  cursor: pointer;
  background: none;
  border-left: 1px solid transparent;
}
.side-item::before {
  content: ""; position: absolute; left: -1px; top: 0; bottom: 0;
  width: 1px; background: var(--accent);
  transform: scaleY(0);
  transition: transform var(--t-med) var(--ease-out);
}
.side-item:hover { color: var(--ink); }
.side-item.is-active { color: var(--ink); }
.side-item.is-active::before { transform: scaleY(1); }
.side-item .count {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-4);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.side-item.is-active .count { color: var(--accent-dim); }

/* селект — строка реестра */
.side-select { position: relative; }
.side-select select {
  width: 100%;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line-strong);
  padding: var(--s2) 24px var(--s2) 0;
  outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--t-fast);
  border-radius: 0;
}
.side-select select:hover, .side-select select:focus { border-bottom-color: var(--accent-dim); }
.side-select::after {
  content: ""; position: absolute; right: 2px; top: 45%;
  width: 6px; height: 6px; pointer-events: none;
  border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
}
.side-select select option { background: var(--bg-raised); color: var(--ink); }

.side-reset {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--s3) 0; text-align: left;
  border-top: 1px solid var(--line);
  transition: color var(--t-fast);
  align-self: stretch;
}
.side-reset:hover { color: var(--accent); }

/* верхняя строка каталога */
.catalog-topbar {
  display: flex; gap: var(--s4); align-items: center;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.search { position: relative; flex: 1; min-width: 180px; max-width: 360px; }
.search input {
  width: 100%;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--line-strong);
  padding: var(--s2) var(--s2) var(--s2) 24px;
  outline: none;
  transition: border-color var(--t-fast);
  border-radius: 0;
}
.search input:focus { border-bottom-color: var(--accent-dim); }
.search input::placeholder { color: var(--ink-4); }
.search::before {
  content: ""; position: absolute; left: 2px; top: 50%;
  width: 11px; height: 11px; transform: translateY(-62%);
  border: 1px solid var(--ink-4); border-radius: 50%;
}
.search::after {
  content: ""; position: absolute; left: 12px; top: calc(50% + 4px);
  width: 6px; height: 1px; background: var(--ink-4);
  transform: rotate(45deg);
}
.sort-wrap { position: relative; margin-left: auto; }
.sort-wrap select {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  background: transparent; color: var(--ink-2);
  border: 0; border-bottom: 1px solid var(--line-strong);
  padding: var(--s2) 26px var(--s2) 0;
  outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  transition: border-color var(--t-fast), color var(--t-fast);
  border-radius: 0;
}
.sort-wrap select:hover, .sort-wrap select:focus { border-bottom-color: var(--accent-dim); color: var(--ink); }
.sort-wrap::after {
  content: ""; position: absolute; right: 2px; top: 45%;
  width: 6px; height: 6px; pointer-events: none;
  border-right: 1px solid var(--ink-3); border-bottom: 1px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
}
.sort-wrap select option { background: var(--bg-raised); color: var(--ink); }

.filters-toggle {
  display: none;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong);
  padding: var(--s2) 0;
  color: var(--ink-2);
  transition: color var(--t-fast);
}
.filters-toggle:hover { color: var(--ink); }

.sidebar-close {
  display: none;
  position: absolute; top: var(--s5); right: var(--s5);
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  font-size: 14px; color: var(--ink-2);
  transition: color var(--t-fast), border-color var(--t-fast);
  z-index: 2;
  border-radius: var(--r);
}
.sidebar-close:hover { color: var(--ink); border-color: var(--accent-dim); }

/* ═══ ПОЗИЦИЯ — запись описи (не «карточка») ═══ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.p-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: var(--s5) var(--s4);
  cursor: pointer;
  position: relative;
  transition: background var(--t-fast);
  display: flex; flex-direction: column;
  min-height: 230px;
}
/* вертикальные волосяные разделители между колонками */
@media (min-width: 721px) {
  .cards-grid { border-left: 1px solid var(--line); }
  .p-card { border-right: 1px solid var(--line); }
}
.p-card:hover { background: var(--bg-subtle); }

.p-card-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
}
.p-card-num {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast);
}
.p-card:hover .p-card-num { color: var(--accent); }
.p-card-tag {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent);
}

.p-card-flags { display: flex; gap: var(--s3); align-items: baseline; margin-bottom: var(--s3); flex-wrap: wrap; }
.p-flag { font-size: 13px; line-height: 1; filter: grayscale(.35); }
.p-method {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.p-method--phishing { color: #b08a8a; }
.p-method--otlichka { color: var(--ok-dim); }
.p-method--autoreg  { color: #8a97b0; }
.p-method--handmade { color: var(--accent-dim); }

.p-card-phone {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-card-phone .hidden-part { color: var(--ink-4); transition: color var(--t-fast); }

/* тонкое правило для бургер-меню на мобиле */
@media (max-width: 720px) {
  .nav a { border-bottom: 1px solid var(--line); width: 100%; max-width: 280px; }
}
.p-card:hover .p-card-phone .hidden-part { color: inherit; }
.p-card-meta {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin-bottom: var(--s4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.p-card-seller {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: auto;
  padding-top: var(--s4);
}
.p-card-seller img {
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; background: var(--bg-raised); flex-shrink: 0;
  filter: grayscale(.2);
}
.p-card-seller-name {
  font-size: var(--fs-meta); color: var(--ink-3); flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--t-fast);
}
.p-card:hover .p-card-seller-name { color: var(--ink-2); }
.p-card-seller-rating {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--accent-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.p-card-bottom {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.p-card-price {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.p-card-price s { font-size: var(--fs-meta); color: var(--ink-4); margin-right: var(--s2); font-weight: 400; }
.p-card-btn {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color var(--t-fast);
}
.p-card:hover .p-card-btn { color: var(--accent); }

.cards-empty {
  grid-column: 1 / -1;
  padding: var(--s9) var(--s5);
  text-align: center;
  color: var(--ink-3);
  font-family: var(--serif); font-style: italic; font-size: var(--fs-lead);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ═══ ПРОДАВЦЫ ═══ */
.sellers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.seller-card {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s6) var(--s5);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast);
}
.seller-card:hover { background: var(--bg-subtle); }
.seller-ava {
  width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover;
  margin-bottom: var(--s4);
  border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  filter: grayscale(.2);
  transition: border-color var(--t-fast);
}
.seller-card:hover .seller-ava { border-color: var(--accent-dim); }
.seller-name {
  font-size: var(--fs-body); font-weight: 500;
  margin-bottom: var(--s1);
  display: flex; align-items: center; gap: var(--s2);
}
.seller-verified {
  width: 12px; height: 12px; flex-shrink: 0;
  background: var(--accent);
  border-radius: 50%;
  display: inline-grid; place-items: center;
}
.seller-verified::after {
  content: ""; width: 7px; height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L11.5 6' fill='none' stroke='%230a0a0b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.seller-rating {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--accent-dim);
  margin-bottom: var(--s1);
  font-variant-numeric: tabular-nums;
}
.seller-meta { font-size: var(--fs-meta); color: var(--ink-3); }

/* онлайн-точка — без пульса */
.online-dot {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--ok); margin-right: var(--s2);
}
.online-dot--off { background: var(--ink-4); }

/* ═══ СТРАНИЦА ПРОДАВЦА ═══ */
.seller-hero {
  display: flex; gap: var(--s6); align-items: center;
  border: 1px solid var(--line);
  padding: var(--s6);
  flex-wrap: wrap;
  background: transparent;
}
.seller-hero-ava {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--line-strong);
  background: var(--bg-raised);
  filter: grayscale(.15);
}
.seller-hero-info { flex: 1; min-width: 240px; }
.seller-hero-name {
  font-size: clamp(24px, 3vw, 34px); font-weight: 500;
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s2);
  letter-spacing: -.01em;
}
.seller-hero-stats {
  display: flex; gap: var(--s6); flex-wrap: wrap;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.seller-hero-stat b {
  display: block;
  font-family: var(--mono);
  font-size: 20px; font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.seller-hero-stat i {
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  display: block; margin-top: var(--s1);
}

/* отзывы — строки реестра */
.reviews-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.review {
  border-bottom: 1px solid var(--line);
  padding: var(--s5) 0;
}
.review-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s4); margin-bottom: var(--s2); flex-wrap: wrap;
}
.review-author { font-size: var(--fs-small); font-weight: 500; }
.review-stars {
  font-family: var(--mono);
  color: var(--accent-dim);
  font-size: var(--fs-meta);
  letter-spacing: 2px;
}
.review-date {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  letter-spacing: .05em;
}
.review-text { font-size: var(--fs-body); color: var(--ink-2); max-width: 640px; }

/* ═══ ПАГИНАЦИЯ — индексы страниц ═══ */
.pagination {
  display: flex; justify-content: center; align-items: center; gap: var(--s1);
  margin-top: var(--s7); flex-wrap: wrap;
}
.page-btn {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  min-width: 34px; height: 34px; padding: 0 var(--s2);
  display: grid; place-items: center;
  border: 1px solid transparent;
  color: var(--ink-3);
  transition: color var(--t-fast), border-color var(--t-fast);
  border-radius: var(--r);
  font-variant-numeric: tabular-nums;
}
.page-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.page-btn.is-active { color: var(--accent); border-color: var(--accent-line); }
.page-btn:disabled { opacity: .25; pointer-events: none; }
.page-info {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-4);
  margin: 0 var(--s3);
  letter-spacing: .06em;
}

/* ═══ ЦИФРЫ ═══ */
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.stat {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s6);
  transition: background var(--t-fast);
}
.stat:hover { background: var(--bg-subtle); }
.stat b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 400; line-height: 1;
  margin-bottom: var(--s3);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.stat i {
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ═══ МЕТОД — нумерованный реестр ═══ */
.method-list { list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.method-item {
  display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s6); align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: var(--s6) 0;
  transition: background var(--t-fast);
}
.method-item:hover { background: var(--bg-subtle); }
.method-num {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--accent-dim);
  letter-spacing: .05em;
}
.method-body h3 { font-size: var(--fs-lead); font-weight: 500; margin-bottom: var(--s2); letter-spacing: -.01em; }
.method-body p { color: var(--ink-2); font-size: var(--fs-body); max-width: 520px; }
.method-tag {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ═══ FAQ — реестр вопросов ═══ */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 800px; }
.faq-item {
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5);
  padding: var(--s5) 0;
  font-size: var(--fs-lead); font-weight: 500;
  transition: color var(--t-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary i {
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--fs-body);
  font-weight: 300;
  color: var(--ink-3);
  transition: transform var(--t-med) var(--ease-out), color var(--t-fast);
  flex-shrink: 0; line-height: 1;
}
.faq-item[open] summary i { transform: rotate(45deg); color: var(--accent); }
.faq-body { padding: 0 0 var(--s5); }
.faq-body p { color: var(--ink-2); font-size: var(--fs-body); max-width: 640px; margin-bottom: var(--s3); }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body ul { list-style: none; }
.faq-body li {
  color: var(--ink-2); font-size: var(--fs-body);
  padding: var(--s1) 0 var(--s1) var(--s5);
  position: relative;
}
.faq-body li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 12px; height: 1px; background: var(--accent-dim);
}

/* ═══ КОНТАКТЫ — строки реестра ═══ */
.contact-links { display: flex; flex-direction: column; border-top: 1px solid var(--line); max-width: 800px; }
.contact-link {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s6);
  border-bottom: 1px solid var(--line);
  padding: var(--s6) 0;
  transition: background var(--t-fast);
}
.contact-link:hover { background: var(--bg-subtle); }
.contact-label {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s2);
}
.contact-value {
  font-family: var(--mono);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 400;
  transition: color var(--t-fast);
  letter-spacing: -.01em;
}
.contact-link:hover .contact-value { color: var(--accent); }
.contact-arrow {
  font-family: var(--mono);
  font-size: var(--fs-lead);
  color: var(--ink-3);
  transition: color var(--t-fast), transform var(--t-med) var(--ease-out);
  flex-shrink: 0;
}
.contact-link:hover .contact-arrow { color: var(--accent); transform: translate(2px, -2px); }

/* ═══ СТРАНИЦА ТОВАРА — карта инвентаря ═══ */
.product {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: var(--s9);
  align-items: start;
}
.product-left { position: sticky; top: 96px; }
.product-num-big {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin-bottom: var(--s5);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  letter-spacing: .06em;
}
.product-phone-big {
  font-family: var(--mono);
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: var(--s6);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.product-specs {
  border-top: 1px solid var(--line);
}
.spec {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s5);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.spec span:first-child {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.spec span:last-child {
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-weight: 400;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.spec .ok { color: var(--ok); }

.product-right { display: flex; flex-direction: column; gap: var(--s5); }
.product-price-block {
  border: 1px solid var(--line);
  padding: var(--s6);
}
.product-price-old {
  font-family: var(--mono);
  font-size: var(--fs-small);
  color: var(--ink-3);
  text-decoration: line-through;
}
.product-price {
  font-family: var(--mono);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 400;
  line-height: 1;
  margin: var(--s2) 0 var(--s4);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.product-price-note { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s6); }
.buy-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  width: 100%;
  font-size: var(--fs-small); font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  padding: var(--s4);
  border-radius: var(--r);
  transition: background var(--t-fast);
  border: 1px solid var(--ink);
}
.buy-btn:hover { background: var(--accent); border-color: var(--accent); }
.buy-note {
  text-align: center; margin-top: var(--s4);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  color: var(--ink-3);
}
.product-perks {
  border: 1px solid var(--line);
  padding: var(--s5) var(--s6);
  display: flex; flex-direction: column;
}
.product-method-desc {
  color: var(--ink-2);
  font-size: var(--fs-body);
  margin: calc(-1 * var(--s4)) 0 var(--s6);
  max-width: 460px;
}
.seller-hero--compact { margin-top: var(--s6); padding: var(--s5); }
.seller-hero-ava--compact { width: 56px; height: 56px; }
.seller-block-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s1);
}
.seller-block-name { font-size: var(--fs-lead); font-weight: 500; }
.seller-block-meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin-top: var(--s1);
  font-variant-numeric: tabular-nums;
}
.btn--sm { padding: 9px 18px; font-size: var(--fs-meta); }
.perk {
  display: flex; gap: var(--s4); align-items: baseline;
  padding: var(--s2) 0;
  font-size: var(--fs-small);
  color: var(--ink-2);
}
.perk::before {
  content: ""; width: 10px; height: 1px;
  background: var(--accent-dim);
  flex-shrink: 0;
  transform: translateY(-3px);
}

.similar { margin-top: var(--s9); }

/* ═══ ТЕКСТОВЫЕ БЛОКИ ═══ */
.prose { max-width: 680px; }
.prose h3 {
  font-size: clamp(19px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -.01em;
  margin: var(--s7) 0 var(--s4);
}
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); font-size: var(--fs-body); margin-bottom: var(--s4); }
.prose ul { list-style: none; margin-bottom: var(--s4); }
.prose li {
  color: var(--ink-2); font-size: var(--fs-body);
  padding: var(--s1) 0 var(--s1) var(--s5);
  position: relative;
}
.prose li::before {
  content: ""; position: absolute; left: 2px; top: 14px;
  width: 12px; height: 1px; background: var(--accent-dim);
}
.prose b { color: var(--ink); font-weight: 500; }

/* ═══ CTA — сухая врезка ═══ */
.cta-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s8) 0;
  text-align: left;
}
.cta-band h2 {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.6vw, 40px);
  margin-bottom: var(--s4);
  color: var(--ink);
}
.cta-band p { color: var(--ink-2); font-size: var(--fs-body); margin-bottom: var(--s6); max-width: 460px; }

/* ═══ ПРОФИЛЬ ═══ */
.profile-hero {
  display: flex; gap: var(--s6); align-items: flex-start;
  border: 1px solid var(--line);
  padding: var(--s6);
  flex-wrap: wrap;
}
.profile-ava-wrap { position: relative; flex-shrink: 0; }
.profile-ava {
  width: 96px; height: 96px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--line-strong);
  display: block; background: var(--bg-raised);
}
.profile-status {
  position: absolute; bottom: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ok); border: 2px solid var(--bg);
}
.profile-info { flex: 1; min-width: 260px; }
.profile-name-row { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s2); }
.profile-name { font-size: clamp(24px, 3vw, 34px); font-weight: 500; letter-spacing: -.01em; }
.profile-id {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.profile-tags { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s4) 0 var(--s5); }
.u-tag {
  font-size: var(--fs-micro); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  display: inline-flex; align-items: center; gap: var(--s2);
  color: var(--ink-2);
}
.u-tag--gold   { color: var(--accent); border-color: var(--accent-line); }
.u-tag--green  { color: var(--ok); border-color: rgba(143,169,143,.3); }
.u-tag--violet { color: #9a90b8; border-color: rgba(154,144,184,.3); }
.u-tag--blue   { color: #8a97b0; border-color: rgba(138,151,176,.3); }
.u-tag--dim    { color: var(--ink-3); }

.profile-rep {
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.rep-bar {
  flex: 1; min-width: 140px; max-width: 280px;
  height: 1px;
  background: var(--line-strong);
  overflow: visible;
  position: relative;
}
.rep-bar i {
  position: absolute; left: 0; top: -1px;
  display: block; height: 3px;
  background: var(--accent);
  transition: width 1s var(--ease-out);
  width: 0;
}
.rep-value {
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rep-label {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}

.profile-meta-row {
  display: flex; gap: var(--s6); flex-wrap: wrap;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
}

.profile-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  margin-top: var(--s6);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.profile-stat-card {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s5);
  transition: background var(--t-fast);
}
.profile-stat-card:hover { background: var(--bg-subtle); }
.profile-stat-card b {
  display: block;
  font-family: var(--mono);
  font-size: 24px; font-weight: 400; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s2);
  letter-spacing: -.01em;
}
.profile-stat-card i {
  font-style: normal;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.profile-stat-card--balance b { color: var(--accent); }
.profile-stat-card .btn { margin-top: var(--s4); padding: 8px 16px; font-size: var(--fs-meta); }

/* табы — как закладки реестра */
.profile-tabs {
  display: flex; gap: var(--s1);
  margin: var(--s8) 0 var(--s6);
  border-bottom: 1px solid var(--line);
}
.profile-tab {
  font-size: var(--fs-small);
  color: var(--ink-3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast), border-color var(--t-fast);
  letter-spacing: .04em;
}
.profile-tab:hover { color: var(--ink); }
.profile-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.profile-panel { display: none; }
.profile-panel.is-active { display: block; }

/* история — строки реестра */
.history-row {
  display: grid;
  grid-template-columns: 72px 1fr auto auto auto;
  gap: var(--s5);
  align-items: baseline;
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
}
.history-row:hover { background: var(--bg-subtle); }
.history-num {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.history-phone {
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.history-meta {
  font-size: var(--fs-meta);
  color: var(--ink-3);
  margin-top: 2px;
}
.history-price {
  font-family: var(--mono);
  font-size: var(--fs-small);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.history-status {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.history-status--ok { color: var(--ok); }
.history-status--wait { color: var(--accent); }
.history-date {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  letter-spacing: .05em;
}

/* ═══ МОДАЛКА ПОКУПКИ — бланк заказа ═══ */
.modal {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  visibility: hidden; opacity: 0;
  transition: visibility .25s, opacity .25s;
}
.modal.is-open { visibility: visible; opacity: 1; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(5, 5, 6, .82);
  opacity: 0; transition: opacity .25s;
}
.modal.is-open .modal-backdrop { opacity: 1; }
.modal-panel {
  position: relative;
  width: min(440px, calc(100vw - 32px));
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  padding: var(--s7) var(--s6);
  opacity: 0; transform: translateY(8px);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.modal.is-open .modal-panel { opacity: 1; transform: none; }
.modal-over {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: var(--s4);
  display: flex; align-items: center; gap: var(--s3);
}
.modal-over::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.modal-phone {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s5);
  letter-spacing: .01em;
  word-break: break-all;
}
.modal-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}
.modal-row span:first-child {
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
}
.modal-row span:last-child {
  font-family: var(--mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.modal-row--price span:last-child { color: var(--accent); font-size: var(--fs-lead); }
.modal-cta {
  display: block; width: 100%; text-align: center;
  font-size: var(--fs-small); font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  border-radius: var(--r);
  padding: var(--s4);
  margin-top: var(--s5);
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.modal-cta:hover { background: var(--accent); border-color: var(--accent); }
.modal-cta--ghost {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line-strong);
  margin-top: var(--s3);
}
.modal-cta--ghost:hover { background: transparent; border-color: var(--accent-dim); color: var(--accent); }
.pay-pulse-dot {
  animation: pulsePayDot 1.4s infinite ease-in-out;
}
@keyframes pulsePayDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}
.modal-close {
  display: block; margin: var(--s4) auto 0;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: none; border: 0; cursor: pointer;
  transition: color var(--t-fast);
}
.modal-close:hover { color: var(--ink); }

.modal-panel--wide { width: min(460px, calc(100vw - 32px)); }
.buy-step { display: none; }
.buy-step.is-active { display: block; }

/* шаг 2: методы оплаты — строки бланка */
.pay-methods { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-bottom: var(--s2); }
.pay-method {
  display: flex; align-items: center; gap: var(--s4);
  border-bottom: 1px solid var(--line);
  padding: var(--s4) 0;
  cursor: pointer; text-align: left;
  transition: background var(--t-fast);
  position: relative;
}
.pay-method:hover { background: var(--bg-subtle); }
.pay-method.is-active { background: var(--accent-bg); }
.pay-icon {
  font-family: var(--mono);
  font-size: var(--fs-lead);
  width: 32px; flex-shrink: 0;
  text-align: center;
  color: var(--ink-2);
}
.pay-method.is-active .pay-icon { color: var(--accent); }
.pay-method span:nth-child(2) { flex: 1; }
.pay-method b { display: block; font-size: var(--fs-small); font-weight: 500; }
.pay-method i {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  font-style: normal;
  letter-spacing: .05em;
}
.pay-check {
  width: 14px; height: 14px; flex-shrink: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  transition: all var(--t-fast);
  position: relative;
}
.pay-method.is-active .pay-check { border-color: var(--accent); }
.pay-method.is-active .pay-check::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--accent); border-radius: 50%;
}

/* шаг 3: реквизиты */
.pay-details { margin-bottom: var(--s2); }
.pay-details-label { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s3); }
.pay-address {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  letter-spacing: .02em;
  border: 1px solid var(--line-strong);
  padding: var(--s4);
  word-break: break-all;
  color: var(--accent);
  margin-bottom: var(--s3);
  border-radius: var(--r);
}
.pay-copy {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-strong);
  padding: 7px 14px;
  transition: all var(--t-fast);
  margin-bottom: var(--s4);
  border-radius: var(--r);
}
.pay-copy:hover { color: var(--ink); border-color: var(--accent-dim); }
.pay-copy.is-copied { color: var(--ok); border-color: rgba(143,169,143,.4); }
.pay-timer {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--accent-line);
  font-size: var(--fs-small);
  color: var(--ink-2);
  border-radius: var(--r);
}
.pay-timer b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  font-weight: 400;
}

/* шаг 4: успех */
.buy-step--success { text-align: center; padding: var(--s3) 0; }
.success-icon { width: 48px; height: 48px; margin: 0 auto var(--s5); }
.success-title { font-size: var(--fs-lead); font-weight: 500; margin-bottom: var(--s3); }
.success-text { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--s5); }
.success-order {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--s3) 0;
  margin-bottom: var(--s5);
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.success-order b {
  font-family: var(--mono);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .05em;
  font-variant-numeric: tabular-nums;
}

/* ═══ FOOTER — колофон ═══ */
.footer {
  border-top: 1px solid var(--line);
  padding: var(--s8) var(--gutter) var(--s6);
  margin-top: var(--s8);
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto var(--s7);
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: var(--s7);
}
.footer-brand p { color: var(--ink-3); font-size: var(--fs-small); max-width: 260px; margin-top: var(--s4); }
.footer-plate {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: var(--s5);
}
.footer-col b {
  display: block;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--ls-micro);
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s4);
}
.footer-col a {
  display: block;
  color: var(--ink-2);
  font-size: var(--fs-small);
  padding: var(--s1) 0;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  max-width: var(--max);
  margin: 0 auto;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  color: var(--ink-4);
}

/* ═══ ГЛАВНАЯ: асимметричный индекс категорий ═══ */
.cat-index { border-top: 1px solid var(--line); }
.cat-index-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: baseline;
  gap: var(--s6);
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-fast);
  cursor: pointer;
}
.cat-index-row:hover { background: var(--bg-subtle); }
.cat-index-num {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--accent-dim);
  letter-spacing: .05em;
}
.cat-index-name {
  font-size: clamp(20px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -.01em;
  transition: color var(--t-fast);
}
.cat-index-row:hover .cat-index-name { color: var(--accent); }
.cat-index-meta {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cat-index-desc {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--ink-3);
  margin-top: calc(-1 * var(--s3));
  padding-bottom: var(--s2);
}

/* ═══ АДАПТИВ ═══ */
@media (max-width: 1020px) and (min-width: 721px) {
  .section { padding: var(--s8) var(--s5); }
  .page-hero { padding: 120px var(--s5) 0; }
  .profile-hero { padding: var(--s5); }
  .history-row { grid-template-columns: 60px 1fr auto auto; gap: var(--s4); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}

@media (max-width: 1020px) {
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .method-item { grid-template-columns: 48px 1fr; gap: var(--s4); }
  .method-tag { display: none; }
  .product { grid-template-columns: 1fr; gap: var(--s6); }
  .product-left { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); }
  .catalog-layout { grid-template-columns: 1fr; gap: 0; }
  .sidebar {
    position: fixed; inset: 0; z-index: 70;
    background: var(--bg);
    padding: 96px var(--s5) var(--s7);
    overflow-y: auto;
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
  }
  .sidebar.is-open { opacity: 1; visibility: visible; }
  .filters-toggle { display: inline-block; }
  .sidebar-close { display: grid; place-items: center; }
  .cat-index-row { grid-template-columns: 48px 1fr; }
  .cat-index-meta { display: none; }
  .cat-index-desc { grid-column: 2; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }
  body { font-size: 14.5px; }

  .header { padding: 0 var(--gutter); height: 56px; }
  .wordmark { font-size: 12px; }
  .nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: var(--s2);
    padding: 0 var(--gutter);
    background: var(--bg);
    opacity: 0; visibility: hidden;
    transition: opacity .25s, visibility .25s;
  }
  .nav.is-open { opacity: 1; visibility: visible; z-index: 55; }
  .nav a {
    font-size: 24px; font-weight: 500; letter-spacing: -.01em;
    padding: var(--s2) 0;
  }
  .nav a::after { left: 0; right: auto; width: 32px; bottom: 0; }
  .header-profile { width: 28px; height: 28px; }
  .burger { display: flex; position: relative; z-index: 60; }

  .hero { padding: 110px var(--gutter) var(--s7); min-height: 92vh; }
  .hero-title { font-size: clamp(40px, 12vw, 64px); }
  .hero-sub { font-size: 17px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--s5); margin-top: var(--s7); padding-top: var(--s6); }

  .section { padding: var(--s7) var(--gutter); }
  .section-head { grid-template-columns: 1fr; gap: var(--s3); }
  .page-hero { padding: 104px var(--gutter) 0; }
  .section-head--row { flex-direction: column; align-items: flex-start; gap: var(--s3); }

  .catalog-topbar { gap: var(--s3); }
  .search { min-width: 0; max-width: none; flex: 1; }
  .sort-wrap { margin-left: 0; flex: 1; }
  .sort-wrap select { width: 100%; }
  .filters-toggle { flex: 1; text-align: left; }
  .cards-grid { grid-template-columns: 1fr; }
  .sidebar { padding: 88px var(--gutter) var(--s6); }

  .stats-grid { grid-template-columns: 1fr 1fr; }
  .stat { padding: var(--s5); }
  .method-item { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s5) 0; }
  .method-num { font-size: var(--fs-micro); }

  .contact-link { padding: var(--s5) 0; gap: var(--s4); }
  .contact-value { font-size: 16px; }

  .product { gap: var(--s5); }
  .product-phone-big { font-size: clamp(22px, 6.5vw, 32px); margin-bottom: var(--s5); }
  .product-price-block { padding: var(--s5); }
  .product-perks { padding: var(--s4) var(--s5); }
  .seller-hero { padding: var(--s5); gap: var(--s4); }
  .seller-hero-ava { width: 56px; height: 56px; }
  .seller-hero-name { font-size: 19px; }
  .seller-hero-stats { gap: var(--s4); margin-top: var(--s4); }
  .seller-hero-stat b { font-size: 17px; }

  .profile-hero { padding: var(--s5); gap: var(--s4); flex-direction: column; }
  .profile-ava { width: 80px; height: 80px; }
  .profile-info { min-width: 0; width: 100%; }
  .profile-name { font-size: 24px; }
  .profile-cards { grid-template-columns: 1fr 1fr; }
  .profile-stat-card { padding: var(--s4); }
  .profile-stat-card b { font-size: 19px; }
  .profile-stat-card .btn { padding: 7px 14px; font-size: var(--fs-micro); margin-top: var(--s3); }
  .profile-tabs { margin: var(--s6) 0 var(--s4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .profile-tab { padding: var(--s3) var(--s4); font-size: var(--fs-small); white-space: nowrap; flex-shrink: 0; }
  .history-row { grid-template-columns: 1fr auto; gap: var(--s2); padding: var(--s4) 0; }
  .history-num { display: none; }
  .history-date { display: none; }
  .review { padding: var(--s4) 0; }
  .review-head { gap: var(--s3); }

  .cat-index-row { padding: var(--s4) 0; gap: var(--s4); }
  .cat-index-desc { margin-top: 0; }

  .footer { padding: var(--s7) var(--gutter) var(--s5); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .footer-bottom { flex-direction: column; gap: var(--s2); }

  .modal-panel { padding: var(--s6) var(--s5); }
}

@media (max-width: 400px) {
  .hero-stats { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .profile-cards { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
}