/* ==========================================================================
   TIXORA — дизайн-система

   Построена на токенах, снятых с живого ticketmaster.com, а не придуманных:
   шкала кегля 12/14/16/18/20/24/28/32/44/54, текст #121212 вместо чёрного,
   фон секций #F6F6F6, радиусы только 2/4/24px, кнопки высотой 42–44.

   Главное, что делает эту стилистику узнаваемой, — не синий цвет, а
   КОНТРАСТ РЕГИСТРОВ: тяжёлые заголовки капсом с отрицательным трекингом
   рядом с совершенно спокойным текстом карточек (16/400, обычный регистр).
   Если сделать наоборот, страница перестаёт читаться как билетная.

   Averta проприетарна, поэтому здесь Figtree — ближайший бесплатный аналог
   по построению и пропорциям.
   ========================================================================== */

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

:root {
  /* бренд — свой, не тикетмастеровский; меняется здесь одной строкой */
  --brand:      #1132E8;
  --brand-dark: #0C25AE;
  --brand-tint: #EEF2FE;

  --ink:        #121212;
  --ink-2:      #4A4A4A;
  --ink-3:      #767676;
  --line:       #D9D9D9;
  --line-soft:  #EBEBEB;
  --surface:    #FFFFFF;
  --surface-2:  #F6F6F6;
  --surface-3:  #F0F0F0;

  --good:       #146C43;
  --good-tint:  #E8F5EE;
  --warn:       #A05A00;
  --warn-tint:  #FFF4E5;

  /* шкала кегля — ровно та, что у референса */
  --t-12: 12px; --t-14: 14px; --t-16: 16px; --t-18: 18px; --t-20: 20px;
  --t-24: 24px; --t-28: 28px; --t-32: 32px; --t-44: 44px; --t-54: 54px;

  --r-field: 2px;
  --r-btn:   4px;
  --r-pill:  24px;

  --page:    1280px;
  --gut:     24px;

  --font: 'Figtree', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}

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

body {
  font-family: var(--font);
  font-size: var(--t-16);
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ═══════════════ ТИПОГРАФИКА ═══════════════
   Тяжёлый капс с отрицательным трекингом — подпись жанра. Отрицательный он
   потому, что на 900-м начертании буквы капсом иначе расползаются. */

.h-hero {
  font-size: clamp(34px, 6vw, var(--t-54));
  font-weight: 900; line-height: 1.0;
  letter-spacing: -0.03em; text-transform: uppercase;
}
.h-sec {
  font-size: var(--t-24); font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.h-sub {
  font-size: var(--t-20); font-weight: 700; letter-spacing: -0.01em;
}
.t-meta { font-size: var(--t-14); color: var(--ink-3); }
.t-mute { color: var(--ink-3); }
.num { font-variant-numeric: tabular-nums; }

/* синяя черта под заголовком — второй элемент подписи референса */
.rule {
  width: 92px; height: 6px; background: var(--brand);
  border-radius: 1px; margin-top: 14px;
}
.rule--light { background: #fff; }

/* ═══════════════ КНОПКИ ═══════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px;
  border-radius: var(--r-btn);
  font-size: var(--t-16); font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: background-color .14s, border-color .14s, color .14s;
  white-space: nowrap;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--secondary { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn--secondary:hover { background: var(--brand-tint); }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--block { display: flex; width: 100%; }
.btn--lg { height: 52px; font-size: var(--t-18); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* фильтр-пилюля — третий тип, всегда прозрачная и всегда 24px */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border: 1px solid var(--ink); border-radius: var(--r-pill);
  font-size: var(--t-16); font-weight: 600; letter-spacing: 0.02em;
  background: #fff; transition: background-color .14s, border-color .14s, color .14s;
}
.pill:hover { background: var(--surface-2); }
.pill[aria-pressed="true"], .pill.is-on {
  background: var(--ink); color: #fff; border-color: var(--ink);
}

.tag {
  display: inline-block; padding: 2px 7px; border-radius: 3px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.tag--new  { background: var(--brand); color: #fff; }
.tag--deal { background: var(--good-tint); color: var(--good); }
.tag--best { background: var(--brand-tint); color: var(--brand); }
.tag--low  { background: var(--warn-tint); color: var(--warn); }

/* ═══════════════ ШАПКА ═══════════════ */

.hdr { background: var(--brand); color: #fff; position: relative; z-index: 40; }
.hdr__in {
  max-width: var(--page); margin: 0 auto; padding: 0 var(--gut);
  height: 68px; display: flex; align-items: center; gap: 28px;
}
/* Логотип набран текстом. Sora — геометрический гротеск: рядом с Figtree
   в остальной вёрстке он читается как отдельный знак, а не как ещё один
   заголовок.

   Составное имя разведено весом и прозрачностью: Echo тяжёлый и белый,
   Ticket легче и притушен. Это то, что отличает вордмарк от просто
   жирной строки — одинаковый вес по всей длине выглядит как текст. */
.hdr__logo {
  display: flex; align-items: baseline; flex: none;
  font-family: 'Sora', var(--font);
  font-size: 22px; letter-spacing: -0.03em; line-height: 1;
  white-space: nowrap;
}
.hdr__logo b    { font-weight: 700; color: #fff; }
.hdr__logo span { font-weight: 500; color: rgba(255,255,255,.72); }
.hdr__nav { display: flex; gap: 22px; font-size: var(--t-16); font-weight: 600; }
.hdr__nav a { padding: 6px 0; border-bottom: 2px solid transparent; }
.hdr__nav a:hover, .hdr__nav a.is-on { border-bottom-color: #fff; }
.hdr__in { height: 74px; }
.hdr__end { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.hdr__link { font-size: var(--t-16); font-weight: 600; }
.hdr__link:hover { text-decoration: underline; }

/* ═══════════════ ХЛЕБНЫЕ КРОШКИ ═══════════════ */

.crumbs {
  font-size: var(--t-14); color: var(--ink-3);
  padding: 14px 0; display: flex; gap: 8px; flex-wrap: wrap;
}
.crumbs a:hover { color: var(--brand); text-decoration: underline; }

/* ═══════════════ ПАНЕЛЬ ВЫБОРА (низ экрана) ═══════════════
   Появляется, когда листинг выбран. Липнет к низу, как у всех бирж: решение
   принято наверху, а кнопка нужна там, где большой палец. */

.tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(0,0,0,.10);
  transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.tray.is-up { transform: translateY(0); }
.tray__in {
  max-width: var(--page); margin: 0 auto; padding: 14px var(--gut);
  display: flex; align-items: center; gap: 22px;
}
.tray__what { min-width: 0; }
.tray__what b { display: block; font-size: var(--t-16); font-weight: 700; }
.tray__what span { font-size: var(--t-14); color: var(--ink-3); }
.tray__sum { margin-left: auto; text-align: right; }
.tray__sum b { display: block; font-size: var(--t-24); font-weight: 900; letter-spacing: -0.02em; }
.tray__sum span { font-size: var(--t-12); color: var(--ink-3); }

/* ═══════════════ ЧЕКАУТ ═══════════════ */

.co { padding: 24px 0 80px; background: var(--surface-2); min-height: 70vh; }
.co__grid {
  display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 28px; align-items: start;
}
.card {
  background: #fff; border: 1px solid var(--line-soft);
  border-radius: var(--r-btn); padding: 22px;
}
.card + .card { margin-top: 16px; }
.card__head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.card__num {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: var(--t-14); font-weight: 700;
}

/* --- поля --- */

.fld { margin-bottom: 14px; }
.fld__lab {
  display: block; font-size: var(--t-14); font-weight: 600; margin-bottom: 6px;
}
.fld__lab i { font-style: normal; color: var(--ink-3); font-weight: 400; }
.fld input, .fld select {
  width: 100%; height: 46px; padding: 0 12px;
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #949494; border-radius: var(--r-field);
  transition: border-color .14s, box-shadow .14s;
}
.fld input:focus, .fld select:focus {
  outline: none; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand);
}
.fld input[aria-invalid="true"] { border-color: #C4291C; box-shadow: inset 0 0 0 1px #C4291C; }
.fld__err { display: none; margin-top: 5px; font-size: var(--t-12); color: #C4291C; font-weight: 600; }
.fld input[aria-invalid="true"] ~ .fld__err { display: block; }
.fld__hint { margin-top: 5px; font-size: var(--t-12); color: var(--ink-3); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* --- выбор доставки --- */

.opt {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--r-btn);
  cursor: pointer; transition: border-color .14s, background-color .14s;
}
.opt + .opt { margin-top: 10px; }
.opt:hover { border-color: var(--ink-3); }
.opt input { margin-top: 3px; accent-color: var(--brand); width: 18px; height: 18px; flex: none; }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); }
.opt b { display: block; font-size: var(--t-16); font-weight: 700; }
.opt span { font-size: var(--t-14); color: var(--ink-3); }

/* --- итог заказа --- */

.sum { position: sticky; top: 16px; }
.sum__ev { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
.sum__art {
  width: 64px; height: 64px; flex: none; border-radius: var(--r-btn);
  object-fit: cover; display: block; background: var(--surface-2);
}
.sum__ev b { display: block; font-size: var(--t-16); font-weight: 700; line-height: 1.25; }
.sum__ev span { display: block; font-size: var(--t-14); color: var(--ink-3); margin-top: 3px; }

.sum__line {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 0; font-size: var(--t-14);
}
.sum__line span:first-child { color: var(--ink-2); }
.sum__line b { font-weight: 600; }
.sum__line--total {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px;
  font-size: var(--t-18);
}
.sum__line--total b { font-size: var(--t-24); font-weight: 900; letter-spacing: -0.02em; }

.hold {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 16px;
  background: var(--warn-tint); border-radius: var(--r-btn);
  font-size: var(--t-14); color: var(--warn); font-weight: 600;
}
.hold b { font-variant-numeric: tabular-nums; }

.trust { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.trust div { display: flex; gap: 9px; font-size: var(--t-14); color: var(--ink-2); }
.trust svg { width: 18px; height: 18px; flex: none; color: var(--good); margin-top: 1px; }

/* --- шаг оплаты --- */

.pay-note {
  display: flex; gap: 12px; padding: 14px;
  background: var(--surface-2); border-radius: var(--r-btn);
  font-size: var(--t-14); color: var(--ink-2); line-height: 1.5;
}
.pay-note svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.pay-note b { color: var(--ink); }

.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8,10,16,.72);
  display: grid; place-items: center; padding: 24px;
}
.overlay__box {
  background: #fff; border-radius: 8px; padding: 34px 32px;
  max-width: 460px; width: 100%; text-align: center;
}
.spin {
  width: 40px; height: 40px; margin: 0 auto 18px;
  border: 3px solid var(--line); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════ ПОДВАЛ ═══════════════ */

.ftr { background: var(--ink); color: #fff; padding: 40px 0 28px; margin-top: auto; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.ftr h4 {
  font-size: var(--t-12); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; opacity: .55; margin-bottom: 12px;
}
.ftr a, .ftr p { display: block; font-size: var(--t-14); opacity: .8; padding: 4px 0; }
.ftr a:hover { opacity: 1; text-decoration: underline; }
.ftr__logo {
  font-family: 'Sora', var(--font);
  font-size: 22px; letter-spacing: -0.03em; line-height: 1; margin-bottom: 12px;
}
.ftr__logo b    { font-weight: 700; color: #fff; }
.ftr__logo span { font-weight: 500; color: rgba(255,255,255,.6); }
.ftr__legal {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16);
  font-size: var(--t-12); opacity: .55; line-height: 1.6;
}

/* ═══════════════ АДАПТИВ ═══════════════ */

@media (max-width: 1080px) {
  .board__grid { grid-template-columns: minmax(0,1fr); }
  .info__grid { grid-template-columns: minmax(0,1fr); }
  /* Карта уходит НАД листингами: на узком экране она перестаёт быть
     навигацией и становится картинкой-ориентиром. */
  .map { position: static; order: -1; margin-bottom: 20px; }
  .co__grid { grid-template-columns: minmax(0,1fr); }
  .sum { position: static; }
}
@media (max-width: 720px) {
  :root { --gut: 16px; }
  .hdr__nav { display: none; }
  .hdr__in { gap: 16px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .row { grid-template-columns: minmax(0,1fr) auto; gap: 12px; }
  .ev-head__row { flex-direction: column; align-items: stretch; }
  .ev-head__from { text-align: left; }
  .facts > div { grid-template-columns: minmax(0,1fr); gap: 2px; }
  .row__go { display: none; }
  .tray__in { flex-wrap: wrap; gap: 12px; }
  .tray__sum { margin-left: 0; text-align: left; }
  .tray .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   ARTIST PAGE — список дат

   Отдельный шаг перед выбором мест. Здесь принимается ровно одно решение —
   какая дата, — поэтому в строке только то, что на него влияет: когда,
   сколько осталось, от скольки. Схема зала и секции появляются на следующем
   экране, где их есть куда применить.
   ═══════════════════════════════════════════════════════════════ */

.ar { padding: 28px 0 22px; }
.ar__in {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: 28px; align-items: start;
}
.ar__photo {
  border-radius: 10px; overflow: hidden;
  background: var(--surface-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.14);
}
.ar__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }

.ar__kicker {
  font-size: var(--t-12); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--brand);
}
.ar h1 { margin-top: 10px; }

.ar__cta {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 20px;
}

/* Плашка гарантии — не кнопка: она ничего не делает, поэтому не должна
   выглядеть нажимаемой. Отсюда мягкий фон и отсутствие обводки. */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  font-size: var(--t-14); font-weight: 600;
}
.chip svg { width: 18px; height: 18px; flex: none; }
.chip--good { background: var(--good-tint); color: var(--good); }

.ar__trust {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 8px 10px; margin-top: 18px;
  font-size: var(--t-14); color: var(--ink-2);
}
.ar__trust li { display: flex; align-items: center; gap: 7px; }
/* разделители-точки между пунктами, но не перед первым */
.ar__trust li + li::before {
  content: '·'; color: var(--line); margin-right: 4px;
}
.ar__trust svg { width: 16px; height: 16px; flex: none; }
.ar__star { color: #E8A100; }
.ar__fast { color: var(--good); }
.ar__ok   { color: var(--brand); }
.ar__rate a { border-bottom: 1px solid var(--line); }
.ar__rate a:hover { border-bottom-color: var(--ink); }

/* ---- вкладки ---- */

.tabs { border-bottom: 1px solid var(--line-soft); }
.tabs__in { display: flex; gap: 26px; }
.tabs__t {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 2px; margin-bottom: -1px;
  font-size: var(--t-16); font-weight: 600;
  color: var(--ink-3);
  border-bottom: 3px solid transparent;
  transition: color .14s, border-color .14s;
}
.tabs__t svg { width: 18px; height: 18px; }
.tabs__t:hover { color: var(--ink); }
.tabs__t.is-on { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- список ---- */

.evs { padding: 26px 0 60px; }
.evs__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 6px;
}
.evs__city {
  font: inherit; text-transform: none; letter-spacing: normal;
  border-bottom: 2px dotted var(--line);
  padding-bottom: 1px;
  display: inline-flex; align-items: center; gap: 6px;
}
.evs__city:hover { border-bottom-color: var(--ink); }
.evs__city svg { width: 15px; height: 15px; }

.evs__list { list-style: none; }
.evs__note { margin-top: 18px; max-width: 72ch; line-height: 1.55; }

/* Строка целиком — одна ссылка, а не блок с кнопкой внутри: попасть по
   всей строке проще, чем в кнопку, и по ней же работает средний клик. */
.evrow { border-bottom: 1px solid var(--line-soft); }
.evrow:first-child { border-top: 1px solid var(--line-soft); }

.evrow__link {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto auto;
  align-items: center; gap: 20px;
  padding: 16px 8px 16px 12px;
  border-left: 3px solid transparent;
  transition: background-color .12s, border-left-color .12s;
}
.evrow__link:hover { background: var(--surface-2); border-left-color: var(--brand); }

.evrow__when { text-align: center; line-height: 1.25; }
.evrow__when b {
  display: block; font-size: var(--t-12); font-weight: 700;
  letter-spacing: .1em; color: var(--ink-3);
}
.evrow__when em {
  display: block; font-style: normal;
  font-size: var(--t-20); font-weight: 900; letter-spacing: -0.02em;
}
.evrow__when i {
  display: block; font-style: normal;
  font-size: var(--t-12); color: var(--ink-3); font-variant-numeric: tabular-nums;
}

.evrow__what { min-width: 0; }
.evrow__what > b { display: block; font-size: var(--t-16); font-weight: 700; }
.evrow__what > span {
  display: block; font-size: var(--t-14); color: var(--ink-3); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.evrow__tags { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }
/* нейтральный остаток — не тревожный: «34% осталось» это не срочность */
.tag--calm { background: var(--surface-3); color: var(--ink-3); }

.evrow__price { text-align: right; }
.evrow__price b {
  display: block; font-size: var(--t-20); font-weight: 900; letter-spacing: -0.02em;
}
.evrow__price span { font-size: var(--t-12); color: var(--ink-3); }

.evrow__go { pointer-events: none; }

@media (max-width: 900px) {
  .ar__in { grid-template-columns: 152px minmax(0, 1fr); gap: 20px; }
}
@media (max-width: 720px) {
  .ar__in { grid-template-columns: minmax(0, 1fr); }
  .ar__photo { max-width: 168px; }
  .ar__cta .btn, .ar__cta .chip { flex: 1 1 auto; justify-content: center; }

  /* Дата и цена в одну строку сверху, название под ними, кнопка на всю
     ширину: на телефоне четыре колонки схлопываются в кашу. */
  .evrow__link {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: 'when price' 'what what' 'go go';
    gap: 10px 14px; padding: 14px 10px;
  }
  .evrow__when  { grid-area: when; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .evrow__when b, .evrow__when i { font-size: var(--t-12); }
  .evrow__when em { font-size: var(--t-16); }
  .evrow__price { grid-area: price; }
  .evrow__what  { grid-area: what; }
  .evrow__go    { grid-area: go; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   ЭКРАН ВЫБОРА МЕСТ

   Две панели во весь экран, без шапки сайта. Это не страница каталога, а
   рабочий инструмент: слева перечень лотов, справа зал, и оба всегда
   показывают одно и то же состояние.

   Скроллится ТОЛЬКО левая лента. Карта закреплена — если бы уезжала и она,
   человек терял бы из виду, где вообще находится выбранная секция.
   ═══════════════════════════════════════════════════════════════ */

.pick-body { height: 100dvh; overflow: hidden; background: var(--surface); }

.pick {
  display: grid;
  grid-template-columns: 348px minmax(0, 1fr);
  /* Строку надо задать явно. При одной только height грид-элементы растут
     под своё содержимое: лента лотов вытягивала строку до 1034px, и нижние
     секции зала уезжали под панель выбора. */
  grid-template-rows: 100dvh;
  height: 100dvh;
  overflow: hidden;
}

/* ---- левая панель ---- */

.pick__rail {
  display: flex; flex-direction: column;
  min-height: 0;                       /* иначе flex-потомок не даст скроллить */
  border-right: 1px solid var(--line-soft);
  background: #fff;
}

.railhead {
  display: grid; grid-template-columns: 26px 46px minmax(0, 1fr);
  align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
}
.railhead__back {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-3);
  transition: background-color .14s, color .14s;
}
.railhead__back:hover { background: var(--surface-2); color: var(--ink); }
.railhead__back svg { width: 15px; height: 15px; }
.railhead__art { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; }
.railhead__txt { min-width: 0; line-height: 1.3; }
.railhead__txt b { display: block; font-size: var(--t-16); font-weight: 700; }
.railhead__txt span {
  display: block; font-size: var(--t-12); color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.railbar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--line-soft);
}
.railbar__qty {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: var(--r-pill);
  font-size: var(--t-14); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background-color .14s, color .14s;
}
.railbar__qty:hover { background: var(--ink); color: #fff; }
.railbar__qty svg { width: 13px; height: 13px; }
.railbar__count { margin-left: auto; font-size: var(--t-12); color: var(--ink-3); }

.raillist { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

/* ---- строка лота ---- */

.lot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px; align-items: flex-start;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line-soft);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: background-color .12s, border-left-color .12s;
}
.lot:hover { background: var(--surface-2); border-left-color: var(--line); }
.lot.is-on { background: var(--brand-tint); border-left-color: var(--brand); }
.lot:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }

.lot__where { display: block; font-size: var(--t-16); font-weight: 700; }
.lot__row {
  display: block; font-size: var(--t-12); color: var(--ink-2); margin-top: 2px;
}
.lot__row i { font-style: normal; color: var(--line); margin: 0 2px; }
.lot__tier, .lot__last {
  display: block; font-size: var(--t-12); margin-top: 3px; font-weight: 600;
}
.lot__tier { color: var(--ink-3); font-weight: 400; }
.lot__last { color: var(--brand); }

.lot__r { text-align: right; }
.lot__price {
  display: block; font-size: var(--t-18); font-weight: 900;
  letter-spacing: -0.02em; margin-top: 3px;
}
.lot__price i { font-style: normal; font-size: var(--t-12); font-weight: 600; color: var(--ink-3); }
.lot__fees {
  display: block; font-size: 11px; color: var(--ink-3); margin-top: 1px;
  font-variant-numeric: tabular-nums;
}


/* ---- карта ---- */

.pick__map { position: relative; background: var(--surface-2); min-width: 0; min-height: 0; }

.mapbar {
  position: absolute; inset: 12px 12px auto 12px; z-index: 3;
  display: flex; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
}
.mapbar > * { pointer-events: auto; }
.mapbar__reset {
  width: 34px; height: 34px; border-radius: var(--r-btn);
  display: grid; place-items: center; color: var(--ink-2);
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.16);
  transition: color .14s;
}
.mapbar__reset:hover { color: var(--ink); }
.mapbar__reset svg { width: 16px; height: 16px; }

.mapbar__hold {
  background: #fff; border-radius: var(--r-btn);
  padding: 6px 12px; text-align: right;
  box-shadow: 0 1px 4px rgba(0,0,0,.16);
}
.mapbar__hold span {
  display: block; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}
.mapbar__hold b {
  display: block; font-size: var(--t-16); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mapbar__hold.is-out b { color: #C4291C; }

.mapwrap {
  height: 100%; display: grid; place-items: center;
  /* Снизу заложена высота панели выбранного лота: она перекрывает экран, и
     без запаса нижние секции зала уезжают под неё. */
  padding: 46px 26px 96px;
}
.smap { width: 100%; height: 100%; }

/* обвод зала — подложка под секциями */
.smap__rim { fill: #F7F8F9; stroke: none; }

.smap__stage { fill: #111; }
.smap__stagetext {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; fill: #fff;
}

.smap__sect {
  stroke: #fff; stroke-width: 1.1;
  transition: fill .14s, opacity .14s;
}

/* Палитра с плана зала: свободно — жёлто-зелёный #DEEF9D, распродано —
   серый. Выбранная секция уходит в насыщенный зелёный: это то же семейство
   цвета, поэтому «свободно» и «выбрано» читаются как две ступени одного
   состояния, а не как два разных смысла. */
.smap__sect.is-open { fill: #DEEF9D; cursor: pointer; }
.smap__sect.is-open:hover { fill: #BFE063; }
.smap__sect.is-shut { fill: #E3E5E8; cursor: default; }
.smap__sect.is-box  { stroke-width: .8; }

.smap__num {
  font-size: 13px; font-weight: 700; fill: #1A1A1A; pointer-events: none;
}
.smap__num.is-shut { fill: #9AA0A8; }
.smap__num.is-box  { font-size: 7px; }

/* номера первого и последнего ряда по кромкам секций */
.smap__row { fill: #8A9099; font-weight: 500; pointer-events: none; }

/* выбранная секция и секция выбранного лота */
.smap__sect.is-on,
.smap__sect.is-peek { fill: #7FBF2A; }
.smap__sect.is-on + .smap__num,
.smap__sect.is-peek + .smap__num { fill: #fff; }

/* ---- модалка количества ---- */

.ask {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(10,14,20,.55);
  display: grid; place-items: center; padding: 20px;
}
.ask__box {
  position: relative; width: 100%; max-width: 420px;
  background: #fff; border-radius: 12px; padding: 26px 24px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.32);
}
.ask__x {
  position: absolute; top: 10px; right: 12px;
  font-size: 26px; line-height: 1; color: var(--ink-3);
}
.ask__x:hover { color: var(--ink); }
.ask__h { font-size: var(--t-24); font-weight: 700; text-align: center; }
.ask__sub {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 8px; font-size: var(--t-14); color: var(--brand); font-weight: 600;
}
.ask__sub svg { width: 17px; height: 17px; }

.ask__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin: 20px 0 18px;
}
.ask__grid button {
  height: 52px; border-radius: var(--r-btn);
  font-size: var(--t-18); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .14s, background-color .14s, color .14s;
}
.ask__grid button:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.ask__grid button.is-on {
  background: var(--brand); color: #fff; box-shadow: inset 0 0 0 1px var(--brand);
}

.ask__allin {
  background: var(--good-tint); color: var(--good);
  border-radius: var(--r-btn); padding: 11px 14px; text-align: center;
  font-size: var(--t-14);
}
.ask__allin b { font-weight: 700; }
.ask__skip {
  display: block; width: 100%; margin-top: 12px; padding: 10px;
  font-size: var(--t-14); font-weight: 600; color: var(--ink-3);
}
.ask__skip:hover { color: var(--ink); text-decoration: underline; }

/* ---- панель выбранного лота поверх экрана ---- */

.pick-body .tray { z-index: 90; }

/* ---- адаптив ----
   На узком экране две панели рядом не живут. Карта становится верхней
   третью, список — остальным: карта нужна как ориентир, а покупка всё
   равно происходит в списке. */

@media (max-width: 900px) {
  .pick-body { height: auto; overflow: auto; }
  /* grid-template-rows обязателен здесь. Наверху у .pick стоит `100dvh` —
     это правило про десктоп, но в медиазапросе переопределялись только
     колонки и height. Строка так и оставалась в целый экран: карта высотой
     46vh сидела внутри блока в 812px, под ней зияло 440px пустоты, а список
     лотов начинался ровно за нижней кромкой экрана. */
  .pick { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; height: auto; }
  .pick__map { order: -1; height: 52vh; min-height: 320px; }
  .pick__rail { border-right: none; }
  .raillist { overflow: visible; }
  .mapwrap { padding: 52px 12px 12px; }
  .railhead__art { display: none; }
  .railhead { grid-template-columns: 26px minmax(0, 1fr); }
  .pick-body .tray__in { padding-bottom: 14px; }
}


/* ═══════════════════════════════════════════════════════════════
   БЛОКИ ПОД СПИСКОМ ДАТ — оформление снято с блока-источника

   Всё здесь отличается от остальной страницы намеренно: там
   тикетмастеровская типографика (тяжёлый капс, синяя черта), тут —
   спокойные заголовки обычного веса без капса и без подчёркиваний,
   шрифт Geist, кегли 12 / 16 / 18 / 20 / 24.
   ═══════════════════════════════════════════════════════════════ */

.says, .bio, .faq, .prep, .sched { font-family: 'Geist', var(--font); }

.says  { padding: 34px 0 26px; border-top: 1px solid var(--line-soft); }
.bio   { padding: 26px 0 8px; }
.faq   { padding: 26px 0 8px; }
.prep  { padding: 30px 0 8px; }
.sched { padding: 26px 0 56px; }

/* ---- что говорят покупатели ---- */

/* Не заголовок, а мелкая надстрочная подпись: в источнике это 12px
   обычного веса с широким трекингом. */
.says__label {
  display: block;
  font-size: 12px; font-weight: 500; line-height: 16px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #333;
}

.promises {
  list-style: none; display: grid; gap: 12px; margin: 16px 0 24px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.promise {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: #fff; border: 1px solid #E5E5E5; border-radius: 14px;
  font-size: 13px; font-weight: 500; color: #111;
}
.promise svg { width: 18px; height: 18px; flex: none; color: var(--brand); }

.says__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rev {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; background: #fff;
  border: 1px solid #E5E5E5; border-radius: 14px;
}
.rev__stars { display: flex; gap: 2px; color: #F5A524; }
.rev__star { width: 13px; height: 13px; }
.rev blockquote { font-size: 13px; line-height: 1.5; color: #444; }
.rev figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.rev__av {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #F0F0F0; color: #555;
  font-size: 12px; font-weight: 500;
}
.rev figcaption b { display: block; font-size: 13px; font-weight: 600; color: #111; }
/* «Verified Buyer» набран моноширинным — так в источнике */
.rev figcaption i {
  display: block; font-style: normal;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 10px; line-height: 14px; color: #8E8E8E;
}

/* ---- о группе ---- */

.bio__h {
  font-size: 16px; font-weight: 400; line-height: 24px; color: #111;
  letter-spacing: normal; text-transform: none;
}
.bio__text { margin-top: 12px; }
.bio__text p { font-size: 13px; line-height: 1.6; color: #333; }
.bio__text p + p { margin-top: 14px; }

/* ---- вопросы ---- */

.faq__h, .sched__h {
  font-size: 24px; font-weight: 400; line-height: 32px; color: #111;
  letter-spacing: normal; text-transform: none;
}
.faq__list { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; }
.qa h3 {
  font-size: 18px; font-weight: 600; line-height: 28px; color: #1B2333;
  letter-spacing: normal; text-transform: none;
}
.qa p { margin-top: 4px; font-size: 13px; line-height: 1.6; color: #444; }

/* ---- памятка ---- */

.prep__h {
  font-size: 20px; font-weight: 700; line-height: 28px; color: #1B2333;
  letter-spacing: normal; text-transform: none; margin-bottom: 16px;
}
.prep__g + .prep__g { margin-top: 20px; }
.prep__g h3 {
  font-size: 15px; font-weight: 600; line-height: 22px; color: #1B2333;
  letter-spacing: normal; text-transform: none; margin-bottom: 8px;
}
.prep__g ul { list-style: none; }
.prep__g li {
  position: relative; padding-left: 16px;
  font-size: 13px; line-height: 1.55; color: #444;
}
.prep__g li + li { margin-top: 6px; }
.prep__g li::before {
  content: ''; position: absolute; left: 3px; top: 8px;
  width: 4px; height: 4px; border-radius: 50%; background: #C4C4C4;
}
.prep__g strong { font-weight: 600; color: #1B2333; }

/* ---- расписание ---- */

/* Таблица прокручивается внутри рамки, а не растягивает страницу: три
   колонки с датой и площадкой шире телефона всегда. */
.sched__wrap {
  margin-top: 16px; overflow-x: auto;
  border: 1px solid #E5E5E5; border-radius: 10px;
}
.sched__table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 14px; }
.sched__table th {
  height: 40px; padding: 0 8px; text-align: left; vertical-align: middle;
  font-weight: 500; color: #111; white-space: nowrap;
  border-bottom: 1px solid #E5E5E5;
}
.sched__table td {
  padding: 8px; vertical-align: middle; color: #111; white-space: nowrap;
  border-bottom: 1px solid #EFEFEF;
}
.sched__table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 900px) {
  .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .says__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .promises, .says__grid { grid-template-columns: minmax(0, 1fr); }
}


/* ═══════════════ ПЛАШКА СО СКИДКОЙ ═══════════════
   Стоит выше шапки события — это первое, что должно попасть в глаз.
   Зачёркнутое число подписано как рыночное: наша прежняя цена и цена
   конкурента это разные утверждения, и путать их нельзя. */

/* Нижняя граница нужна ровно на главной: там под плашкой идёт тёмный блок
   поиска, и без линии два почти чёрных прямоугольника читаются как один. На
   остальных страницах ниже белое, и линия на стыке незаметна. */
.deal {
  background: #0B0D14; color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.deal__in {
  display: flex; align-items: center; gap: 16px;
  padding-top: 12px; padding-bottom: 12px;
}
.deal__pct {
  flex: none; padding: 7px 12px; border-radius: 6px;
  background: var(--accent, #F5C518); color: #1A1200;
  font-family: 'Sora', var(--font);
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  white-space: nowrap;
}
.deal__txt { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.82); }
.deal__txt b { color: #fff; font-weight: 700; }
.deal__txt s { color: rgba(255,255,255,.45); }
.deal__txt em {
  font-style: normal; font-weight: 700; color: #7FE07F;
  font-size: 16px; margin-left: 2px;
}
.deal__go {
  margin-left: auto; flex: none;
  font-size: 14px; font-weight: 600; color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 1px;
}
.deal__go:hover { border-bottom-color: #fff; }

/* зачёркнутая рыночная цена в строке даты и в лоте */
.evrow__price s {
  display: block; font-size: var(--t-12); color: var(--ink-3);
  text-decoration-thickness: 1px;
}
.lot__price s {
  font-size: var(--t-12); font-weight: 500; color: var(--ink-3);
  margin-right: 6px; text-decoration-thickness: 1px;
}

@media (max-width: 720px) {
  .deal__in { flex-wrap: wrap; gap: 10px; }
  .deal__go { margin-left: 0; }
}


/* ═══════════════ АКЦЕНТ НА СКИДКЕ ═══════════════
   Зачёркнутая цена сама по себе слабый сигнал: глаз читает крупное число и
   проходит мимо мелкого. Поэтому рядом идёт процент — он и держит внимание,
   а под ценой сумма экономии в деньгах, потому что «минус 50%» и «минус
   $440» воспринимаются по-разному. */

/* Без подложки: рядом со зачёркнутой ценой плашка превращается в третий
   объект в строке и спорит с самой ценой. Голый текст, но красный и
   тяжёлый — красный тут не тревога, а общепринятый цвет распродажи, и он
   ярче зелёного на белом. */
.off {
  font-size: 12px; font-weight: 800; letter-spacing: -0.01em;
  color: #E01E2B;
}

/* --- строка даты на витрине --- */
.evrow__was {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-bottom: 1px;
}
.evrow__was s { font-size: var(--t-12); color: var(--ink-3); text-decoration-thickness: 1px; }

/* --- лот на экране выбора мест --- */
.lot__was {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-top: 3px;
}
.lot__was s { font-size: var(--t-12); color: var(--ink-3); text-decoration-thickness: 1px; }
.lot__save {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 700; color: #E01E2B;
}
.tray__save { color: var(--good); font-weight: 700; }

/* --- строка экономии на чекауте --- */
.sum__line--save { color: var(--good); }
.sum__line--save span { color: var(--good) !important; }
.sum__line--save s { color: var(--ink-3); text-decoration-thickness: 1px; }
.sum__line--save b { color: var(--good); }
.sum__line--save b::before { content: '\2212'; margin-right: 1px; }


/* ═══════════════════════════════════════════════════════════════
   МОБИЛЬНЫЕ УТОЧНЕНИЯ

   Раскладка на узких экранах уже описана выше, в медиазапросах рядом с
   самими блоками. Здесь собрано то, что относится не к раскладке, а к
   телефону как устройству: палец вместо курсора, вырез экрана, полоса
   жестов снизу и привычка Safari увеличивать страницу на мелких полях.
   Держать это вместе проще, чем растаскивать по десяти местам.
   ═══════════════════════════════════════════════════════════════ */

/* ---- 1. Safari и масштаб при фокусе ----

   iOS увеличивает всю страницу, когда фокус попадает в поле с кеглем
   меньше 16px, и обратно уже не отъезжает — форма остаётся приближенной и
   съехавшей вбок. Лечится только размером шрифта, никакими viewport-мета
   этого не отключить (и не нужно: запрет масштабирования ломает
   доступность). Радиокнопки и чекбоксы не в счёт — они не текстовые. */
@media (max-width: 900px) {
  input:not([type="radio"]):not([type="checkbox"]),
  select, textarea { font-size: 16px; }
}

/* ---- 2. Размер цели нажатия ----

   Палец накрывает примерно 44px, курсор — один. Ссылки в шапке и подвале
   высотой в 21px попадают через раз, и промах уводит на соседнюю ссылку, а
   не в пустоту. Растим только область нажатия, кегль и вид не трогаем. */
@media (max-width: 900px) {
  .hdr__link, .hdr__logo {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .deal__go { display: inline-flex; align-items: center; min-height: 40px; }
  /* Подвал в колонку, поэтому вертикальные отступы здесь ещё и разводят
     ссылки друг от друга — это тот же промах, только между соседями. */
  .ftr__grid a { display: block; padding: 7px 0; }
}

/* ---- 3. Панель выбранного лота ----

   На узком экране строка «что · сколько · кнопка» не помещается и
   переносится как попало: кнопка уезжала под цену и занимала треть экрана.
   Задаём порядок явно — сверху что и почём, снизу кнопка во всю ширину. */
@media (max-width: 900px) {
  .tray__in {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 14px;
    /* Нижний отступ через env(): на телефонах с жестовой навигацией внизу
       живёт системная полоса, и кнопка оказывалась ровно под ней —
       нажимается свайп «домой», а не «к оплате». max() нужен, потому что на
       экранах без выреза env() равен нулю. */
    padding: 12px var(--gut) max(12px, env(safe-area-inset-bottom));
  }
  .tray__what { grid-column: 1; }
  .tray__sum  { grid-column: 2; margin-left: 0; }
  .tray__sum b { font-size: var(--t-20); }
  .tray #tray-go { grid-column: 1 / -1; width: 100%; margin-top: 8px; }

  /* Панель висит поверх списка. Без запаса снизу последние лоты навсегда
     остаются под ней — до них нельзя дотянуться никаким скроллом. */
  .raillist { padding-bottom: 190px; }
}

/* ---- 4. Карта зала ----

   Пальцем по секции попасть труднее, чем мышью, а секции у сцены мелкие.
   touch-action: manipulation убирает 300-миллисекундную задержку, которую
   браузер держит на случай двойного тапа, — нажатие перестаёт «залипать». */
@media (max-width: 900px) {
  .mapwrap svg { touch-action: manipulation; }
  .mapwrap { padding: 56px 10px 10px; }
  /* Кнопка сброса и таймер крупнее: они лежат поверх карты, и по ним
     промахиваются в первую очередь. */
  .mapbar__reset { width: 40px; height: 40px; }
}

/* ---- 5. Вырез экрана ----

   Шапка и всё, что прижато к краям, на iPhone заезжает под «уши». Отступы
   берём из env() и складываем с обычными через max(). */
@media (max-width: 900px) {
  .hdr__in, .wrap {
    padding-left: max(var(--gut), env(safe-area-inset-left));
    padding-right: max(var(--gut), env(safe-area-inset-right));
  }
}

/* ---- 6. Горизонтальные ленты ----

   Таблица расписания и прочее широкое уже лежит в контейнерах с
   overflow-x: auto. На телефоне добавляем инерцию прокрутки и убираем
   постоянную полосу — она съедает высоту строки. */
@media (max-width: 900px) {
  .sched__wrap, .co__grid, .says__grid {
    -webkit-overflow-scrolling: touch;
  }
  .sched__wrap::-webkit-scrollbar { height: 4px; }
  .sched__wrap::-webkit-scrollbar-thumb {
    background: var(--line); border-radius: 2px;
  }
}

/* ---- 7. Мелочи набора ----

   Длинные названия секций и почтовые адреса на 375px рвут строку в
   неожиданных местах или вылезают за карточку. */
@media (max-width: 560px) {
  .tray__what b, .lot__where, .sum__line b { overflow-wrap: anywhere; }
  .h-hero { font-size: clamp(26px, 8vw, 34px); }
}


/* ═══════════════ СТРАНИЦА ПОМОЩИ ═══════════════ */

.help { padding: 8px 0 72px; }

.help__top { max-width: 62ch; margin-bottom: 44px; }
.help__lead {
  margin-top: 18px; font-size: var(--t-18); line-height: 1.5; color: var(--ink-2);
}

/* ---- быстрые ответы ----
   Три карточки в ряд, а не список: это не чтение подряд, а поиск своего
   случая, и три коротких блока сканируются быстрее одного длинного текста. */
.help__quick {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; margin-bottom: 56px;
}
.hcard {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-btn);
  padding: 22px;
}
.hcard__ico {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-btn);
  background: var(--brand-tint); color: var(--brand);
  margin-bottom: 14px;
}
.hcard__ico svg { width: 21px; height: 21px; }
.hcard h2 {
  font-size: var(--t-18); font-weight: 700; letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.hcard p { font-size: var(--t-14); line-height: 1.55; color: var(--ink-2); }
.hcard p + p { margin-top: 10px; }
.hcard b { font-weight: 700; color: var(--ink); }
/* Уточнение отделено линией, а не только кеглем: иначе оно читается как
   продолжение ответа, хотя это оговорка к нему. */
.hcard__note {
  padding-top: 10px; border-top: 1px solid var(--line);
  color: var(--ink-3) !important; font-size: var(--t-12) !important;
}

/* ---- разделы ---- */
.help__sec { margin-bottom: 56px; }
.help__sec .rule { margin-bottom: 26px; }

/* ---- шаги ----
   Номера рисуются счётчиком, а не лежат в тексте: при вставке шага в
   середину руками правится вся нумерация, и рано или поздно она разъезжается. */
.steps { list-style: none; counter-reset: step; display: grid; gap: 18px; max-width: 78ch; }
.steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px;
  align-items: start;
}
.steps li::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: var(--t-14); font-weight: 700;
}
.steps b { display: block; font-size: var(--t-16); font-weight: 700; margin-bottom: 3px; }
.steps span { font-size: var(--t-14); line-height: 1.55; color: var(--ink-2); }

/* ---- вопросы ---- */
.hfaq { border-top: 1px solid var(--line-soft); max-width: 92ch; }
.hqa { border-bottom: 1px solid var(--line-soft); }
.hqa summary {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0; cursor: pointer;
  font-size: var(--t-16); font-weight: 600; letter-spacing: -0.01em;
  list-style: none;
}
.hqa summary::-webkit-details-marker { display: none; }
.hqa summary:hover { color: var(--brand); }
/* Плюс складывается в минус поворотом одной палочки — две иконки для
   открытого и закрытого состояния тут не нужны. */
.hqa summary i {
  position: relative; flex: none; margin-left: auto;
  width: 14px; height: 14px;
}
.hqa summary i::before, .hqa summary i::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  background: var(--ink-3);
  transform: translate(-50%, -50%);
  transition: transform .18s;
}
.hqa summary i::before { width: 14px; height: 2px; }
.hqa summary i::after  { width: 2px; height: 14px; }
.hqa[open] summary i::after { transform: translate(-50%, -50%) scaleY(0); }
.hqa p {
  padding: 0 0 20px; max-width: 78ch;
  font-size: var(--t-16); line-height: 1.6; color: var(--ink-2);
}

/* ---- контакты ---- */
.hcontact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 720px; }
.hcontact__card {
  display: block; padding: 22px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  transition: border-color .14s, background-color .14s;
}
.hcontact__card:hover { border-color: var(--brand); background: var(--brand-tint); }
.hcontact__card b { display: block; font-size: var(--t-16); font-weight: 700; margin-bottom: 2px; }
.hcontact__card > span { display: block; font-size: var(--t-18); font-weight: 600; color: var(--brand); }
.hcontact__card i { display: block; margin-top: 8px; font-style: normal; font-size: var(--t-12); color: var(--ink-3); }

.help__order {
  margin-top: 20px; max-width: 78ch;
  font-size: var(--t-14); line-height: 1.55; color: var(--ink-2);
}
.help__order b { font-weight: 700; color: var(--ink); }

@media (max-width: 900px) {
  .help__quick { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 40px; }
  .hcontact { grid-template-columns: minmax(0, 1fr); }
  .help__sec { margin-bottom: 40px; }
  .help__lead { font-size: var(--t-16); }
}

/* ═══════════════ ПОДСКАЗКА В ПАНЕЛИ ВЫБОРА ═══════════════
   Стоит между шапкой события и списком лотов. Две задачи: сказать, что
   карта кликается, и занять экран доводами, пока выбор не сделан. */

.railtip {
  padding: 14px var(--gut);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-2);
}
.railtip__hint {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: var(--t-14); line-height: 1.45; color: var(--ink-2);
}
.railtip__hint svg { width: 19px; height: 19px; flex: none; color: var(--brand); margin-top: 1px; }
.railtip__hint b { font-weight: 700; color: var(--ink); }

.railtip__facts {
  list-style: none; display: grid; gap: 5px;
  margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--line);
}
.railtip__facts li {
  position: relative; padding-left: 19px;
  font-size: var(--t-12); line-height: 1.4; color: var(--ink-3);
}
/* Галочка рисуется рамкой, а не символом: в разных шрифтах ✓ имеет разную
   ширину и высоту, и список начинает выглядеть неровным. */
.railtip__facts li::before {
  content: ''; position: absolute; left: 2px; top: 3px;
  width: 9px; height: 5px;
  border-left: 2px solid var(--good); border-bottom: 2px solid var(--good);
  transform: rotate(-45deg);
}

/* Когда секция на карте выбрана, подсказка уже не нужна — она объясняет
   ровно то, что человек только что сделал. Класс ставит event.js. */
.pick.is-picked .railtip__hint { display: none; }
.pick.is-picked .railtip__facts { margin-top: 0; padding-top: 0; border-top: none; }