/* Фирменный стиль .searcher: общий для лендинга и кабинета продавца.
   Шрифты Onest (заголовки и текст) и JetBrains Mono (мелкие подписи),
   светло-серый фон, чёрные рамки со срезанными углами, «зерно» поверх страницы. */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --paper: #ebebeb;   /* фон страницы — совпадает с фоном видео с тканью */
  --ink: #0b0b0b;
  --white: #f7f7f7;
  --grey: #cfcfcf;
  --muted: #555555;
  --line: 3px;
  --sans: 'Onest', -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

/* ---------- зерно (рисует brand.js на холсте поверх страницы) ---------- */
.grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

/* ---------- рамка со срезанными углами ----------
   .ch — блок с чёрной рамкой и срезанными углами.
   --c: размер среза, --b: толщина рамки, --fill: заливка, --stroke: цвет рамки */
.ch {
  --c: 14px;
  --b: var(--line);
  --fill: var(--white);
  --stroke: var(--ink);
  position: relative;
  isolation: isolate;
}
.ch::before,
.ch::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.ch::before {
  inset: 0;
  background: var(--stroke);
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.ch::after {
  --ci: max(0px, calc(var(--c) - var(--b) * 0.42));
  inset: var(--b);
  background: var(--fill);
  clip-path: polygon(var(--ci) 0, calc(100% - var(--ci)) 0, 100% var(--ci), 100% calc(100% - var(--ci)),
    calc(100% - var(--ci)) 100%, var(--ci) 100%, 0 calc(100% - var(--ci)), 0 var(--ci));
}
.ch.dark { --fill: var(--ink); color: var(--white); }
.ch.sm { --c: 8px; --b: 2px; }
.ch.lg { --c: 22px; }

/* ---------- мелкая моноширинная подпись ---------- */
.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---------- кнопки ---------- */
.b-btn {
  --c: 6px;
  --b: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 18px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease;
}
.b-btn:hover { transform: translate(-1px, -1px); }
.b-btn:active { transform: translate(1px, 1px); }
.b-btn.dark { --fill: var(--ink); color: var(--white); }
.b-btn.invert { --fill: var(--ink); --stroke: var(--white); color: var(--white); }
.b-btn .arr { font-family: var(--sans); font-weight: 700; font-size: 15px; line-height: 1; }

/* ---------- логотип в шапке ---------- */
.b-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-decoration: none;
}
.b-logo svg { width: 24px; height: 24px; }