:root{
  /* айдентика DataParser */
  --green:#16A34A; --green-light:#22C55E; --green-bg:#E8F5EE; --soft-bg:#F6FDF8;
  --ink:#111827; --muted:#6B7280; --line:#E5E7EB; --bg:#F3F4F6;
  --red:#DC2626; --red-bg:#FEF2F2;
  --radius:12px;
  --shadow:0 1px 2px rgba(17,24,39,.05), 0 8px 24px rgba(17,24,39,.04);
}
*{box-sizing:border-box}
/* Страница движется только по вертикали. Именно clip, а не hidden:
   hidden на html/body делает их прокручиваемой областью и ломает
   position:sticky у шапки, боковой корзины и цены на посадочных. */
html{overflow-x:clip}
body{overflow-x:clip;margin:0;background:var(--soft-bg);color:var(--ink);
  font:15px/1.5 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

.top{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top__in{display:flex;align-items:center;gap:28px;height:62px}
.top__nav{display:flex;align-items:center;gap:22px;margin-right:auto}
.top__nav a{color:var(--ink);font-size:14px;font-weight:500;text-decoration:none}
.top__nav a:hover{color:var(--green)}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:28px;width:auto;display:block}
.top__stat{color:var(--muted);font-size:13px}
.top__stat b{color:var(--ink);font-weight:600}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:24px;padding-top:26px;padding-bottom:60px;align-items:start}
.intro h1{font-size:28px;margin:0 0 8px;letter-spacing:-.025em;font-weight:700}
.intro p{margin:0;color:var(--muted);max-width:640px}
.intro p.intro__facts{margin-top:8px;font-size:14px}
.intro__facts b{color:var(--ink);font-weight:600}

.step{margin-top:28px}
.step h2{font-size:18px;margin:0 0 12px;display:flex;align-items:center;gap:10px;font-weight:600}
.step__n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;background:var(--green);color:#fff;font-size:13px;font-weight:700}

.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.panel--pad{padding:16px}
.panel__bar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.search{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
.search::placeholder{color:#9CA3AF}
.search:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}
.link{background:none;border:0;color:var(--green);cursor:pointer;font:inherit;font-weight:500;padding:4px;border-radius:6px}
.link:hover{background:var(--green-bg)}
.panel__count{color:var(--muted);font-size:13px;margin-left:auto}
.panel__count b{color:var(--ink)}

/* Прокрутка дерева только вертикальная. Горизонтальный сдвиг здесь всегда
   следствие переполнения строки, а не намерения человека: на телефоне список
   при раскрытых подрубриках «гулял» вбок и утаскивал за собой всю страницу. */
.tree{max-height:420px;overflow-y:auto;overflow-x:hidden}
.group{border-bottom:1px solid var(--line)}
.group:last-child{border-bottom:0}
.group__head{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--soft-bg)}
.group__title{font-weight:600}
.group__meta{margin-left:auto;color:var(--muted);font-size:12.5px;display:flex;align-items:center;gap:8px}
.chip{font-style:normal;background:var(--green-bg);color:var(--green);border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:500}
.group__toggle{background:none;border:0;cursor:pointer;color:var(--muted);font-size:14px;padding:2px 4px;transition:transform .15s}
.group.open .group__toggle{transform:rotate(180deg)}
.group__body{display:none;padding:6px 16px 12px 34px;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
.group.open .group__body{display:grid}

.cb{display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.cb input{width:16px;height:16px;accent-color:var(--green);cursor:pointer;flex:none}
/* Название — единственное, что может расти: даёт себя сжать и переносится.
   Без min-width:0 флекс-элемент не сжимается меньше своего содержимого. */
.cb>span{min-width:0;overflow-wrap:anywhere}
.item{padding:4px 0;font-size:14px;border-radius:6px}
.item:hover{color:var(--green)}
/* Счётчик записей в дереве. Отдельный класс, а не .num: под тем же именем
   на посадочных лежит крупная плитка с рамкой и подложкой, и её оформление
   протекало в дерево. Цифра здесь справочная, не акцентная — мелкая,
   приглушённая, без фона. */
.cnt{margin-left:auto;font-style:normal;color:#9CA3AF;font-size:11.5px;
  font-variant-numeric:tabular-nums;flex:none;padding-left:10px}
.item.hidden,.group.hidden{display:none}
/* Пояснение про непоказанные сёла — сноска внутри списка городов. */
.tree__note{grid-column:1/-1;margin:2px 0 8px;font-size:12.5px;line-height:1.45;
  color:var(--muted)}
/* Своих телефонных ссылок на сайте нет: если a[href^=tel:] откуда-то взялась,
   её придумал браузер, приняв число записей за номер. Гасим вид и нажатие. */
a[href^="tel:"]{color:inherit!important;text-decoration:none!important;
  pointer-events:none;cursor:inherit}

.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.filter{align-items:flex-start;padding:11px;border:1px solid var(--line);border-radius:10px}
.filter:hover{border-color:var(--green-light);background:var(--soft-bg)}
.filter span{display:flex;flex-direction:column}
.filter b{font-weight:600;font-size:14px}
.filter i{font-style:normal;color:var(--muted);font-size:12.5px}
.rating{flex-direction:row!important;align-items:center;gap:8px}
select,input[type=email]{padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;color:var(--ink)}
select:focus,input[type=email]:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.13)}

.order__row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.order__row label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.order__row .grow{flex:1;min-width:240px}
.order__actions{display:flex;gap:10px;flex-wrap:wrap}
.order__msg{margin-top:12px;font-size:14px}
.order__msg a{color:var(--green);font-weight:600}
.order__msg.err{color:var(--red)}
.order__msg.ok{color:var(--green)}

.btn{border:1px solid transparent;border-radius:9px;padding:10px 18px;font:inherit;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.btn--primary{background:var(--green);color:#fff}
.btn--primary:hover:not(:disabled){background:#15803D}
.btn--primary:disabled{background:var(--bg);color:#9CA3AF;cursor:not-allowed}
.btn--ghost{background:#fff;border-color:var(--green);color:var(--green)}
.btn--ghost:hover:not(:disabled){background:var(--green-bg)}
.btn--ghost:disabled{border-color:var(--line);color:#9CA3AF;cursor:not-allowed}
.btn--wide{width:100%;margin-top:12px}

.preview{overflow:auto}
.preview table{border-collapse:collapse;font-size:12.5px;white-space:nowrap}
.preview th,.preview td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.preview th{background:var(--green-bg);color:var(--ink);position:sticky;top:0;font-weight:600}

/* тарифы — раскрывающийся блок, по умолчанию закрыт */
.tariffs-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.tariffs-box__head{display:flex;align-items:center;gap:12px;padding:15px 18px;cursor:pointer;
  list-style:none;user-select:none}
.tariffs-box__head::-webkit-details-marker{display:none}
.tariffs-box__head:hover{background:var(--soft-bg)}
.tariffs-box__title{font-weight:600;font-size:16px}
.tariffs-box__hint{color:var(--muted);font-size:13px}
.tariffs-box__arrow{margin-left:auto;color:var(--muted);transition:transform .2s}
.tariffs-box[open] .tariffs-box__arrow{transform:rotate(180deg)}
.tariffs-box[open] .tariffs-box__head{border-bottom:1px solid var(--line)}
.tariffs-box__body{border:0;border-radius:0;box-shadow:none}

.tariffs{width:100%;border-collapse:collapse;font-size:14px}
.tariffs th,.tariffs td{padding:10px 18px;border-bottom:1px solid var(--line);text-align:left}
.tariffs th{background:var(--soft-bg);color:var(--muted);font-weight:600;font-size:13px}
.tariffs tbody tr:hover{background:var(--soft-bg)}
.tariffs td:nth-child(2),.tariffs td:nth-child(3),
.tariffs th:nth-child(2),.tariffs th:nth-child(3){text-align:right}
.tariffs tr:last-child td{border-bottom:0}

.side{position:sticky;top:86px}
.cart{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px}
.cart__title{font-weight:700;margin-bottom:12px}
.cart__rows{font-size:26px;font-weight:700;letter-spacing:-.02em}
.cart__rows i{font-style:normal;font-size:13px;font-weight:400;color:var(--muted);margin-left:6px}
.cart__price{font-size:32px;font-weight:800;color:var(--green);letter-spacing:-.03em;margin-top:2px}
.cart__hint{font-size:12.5px;color:var(--green);min-height:18px;margin-top:4px}
.cart__hint.wait{color:var(--muted)}
.cart__list{list-style:none;margin:14px 0 0;padding:14px 0 0;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.cart__list li{margin-bottom:7px}
.cart__list b{color:var(--ink);font-weight:600}
.cart__note{margin-top:10px;font-size:12px;color:var(--muted);text-align:center}
.cart.loading .cart__price{opacity:.45}
.cart.empty .cart__rows,.cart.empty .cart__price{color:#9CA3AF}

/* липкая полоса с ценой — только для узких экранов */
.mbar{display:none}

@media (max-width:940px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .main{min-width:0}
  /* Состав заказа встаёт сразу после фильтров, а не в самом конце страницы:
     к этому месту человек уже всё выбрал, и цифры нужны ему здесь, а не
     после списка тарифов и вопросов.

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

     display:contents убирает обёртку .main, и шаги становятся
     самостоятельными — только так их можно переставить относительно
     корзины, которая лежит вне обёртки. */
  .layout{display:flex;flex-direction:column}
  .main{display:contents}
  .side{position:static}
  #step-cities{order:1}
  #step-rubrics{order:2}
  #step-filters{order:3}
  .side{order:4}
  #step-order{order:5}
  .step{order:6}

  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    align-items:center;gap:12px;padding:10px 14px;background:#fff;
    border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(17,24,39,.08);
    transform:translateY(110%);transition:transform .2s}
  .mbar.on{transform:none}
  .mbar__rows{font-size:12.5px;color:var(--muted);line-height:1.25}
  .mbar__rows b{display:block;color:var(--ink);font-size:15px;font-weight:700}
  .mbar__price{margin-left:auto;font-size:19px;font-weight:800;color:var(--green);white-space:nowrap}
  .mbar .btn{padding:9px 14px}
  body{padding-bottom:64px}
}

/* На узком экране название региона и счётчики в одну строку не помещаются —
   уводим счётчики на вторую строку, иначе страница уезжает вбок. */
@media (max-width:620px){
  .group__head{flex-wrap:wrap;padding:10px 14px}
  .group__title{overflow-wrap:anywhere}
  /* Название сжимается и переносится, стрелка остаётся рядом с ним в первой
     строке. Без этого длинный регион («Санкт-Петербург и Ленинградская
     область») занимал всю ширину и сбрасывал стрелку на строку ниже,
     где она висела в пустоте и не читалась как управление этой группой. */
  /* Именно flex:1 1 0, а не 1 1 auto: при переносе строк flexbox раскладывает
     элементы по их базовой ширине, ДО сжатия. С basis:auto длинное название
     («Санкт-Петербург и Ленинградская область») занимало всю строку целиком
     и сбрасывало стрелку на строку ниже. С нулевым базисом стрелка остаётся
     рядом с названием, а текст переносится внутри своей колонки. */
  .group__head .cb{flex:1 1 0;min-width:0;order:1}
  .group__toggle{order:2;flex:none;margin-left:auto;padding:2px 6px}
  /* Обычный текст вместо флекса: во флексе «выбрано», «0», «из 22» и плашка
     с числом — четыре независимых элемента, и строка рвалась в середине
     фразы («из» и «22» на разных строках). */
  .group__meta{display:block;margin-left:24px;width:100%;order:3}
  .group__meta .chip{margin-left:6px;display:inline-block;white-space:nowrap}
  .group__body{grid-template-columns:1fr;padding:6px 14px 12px 20px}
  /* Как и у группы уровнем выше: счётчик уходит на вторую строку,
     в первой остаются название, число записей и стрелка. */
  .tree{max-height:340px}
  .panel__bar{padding:12px 14px}
  .intro h1{font-size:22px}
  /* Боковые отступы задаёт .wrap, и оба класса висят на одном элементе:
     padding без горизонтальных значений затирал их, и шапка прилипала
     к левому краю, пока остальная страница отступ сохраняла. */
  .top__in{height:auto;padding:10px 20px;flex-wrap:wrap;gap:10px}
  .logo{width:100%}
  .logo img{height:26px}
  .top__nav{gap:14px;margin-right:0;order:3;width:100%}
  .top__stat{font-size:12px;line-height:1.45;order:4;width:100%}
  .how{grid-template-columns:1fr}
  .doc__body{padding:22px 18px}
  .preview,.tariffs-box__body{overflow-x:auto}
}
.cart.empty #cartCur{display:none}

/* правовые страницы */
.doc{padding:26px 20px 50px;max-width:820px}
.doc__nav{display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px;margin-bottom:22px}
.doc__nav a{color:var(--green);text-decoration:none}
.doc__nav a:hover{text-decoration:underline}
.doc__body{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:32px 34px}
.doc__body h1{font-size:26px;letter-spacing:-.02em;margin:0 0 6px}
.doc__body h2{font-size:18px;margin:28px 0 10px}
.doc__body h3{font-size:15.5px;margin:20px 0 8px}
.doc__body p,.doc__body li{color:#2b3444;font-size:14.5px;line-height:1.65}
.doc__body ul{padding-left:20px}
.doc__body li{margin-bottom:6px}
.doc__body a{color:var(--green)}
/* Кнопка внутри правовой или текстовой страницы. Селектор .doc__body a
   специфичнее, чем .btn--primary, и красил надпись в зелёный по зелёному —
   кнопка выглядела пустой плашкой. */
.doc__body a.btn--primary{color:#fff}
.doc__body a.btn--ghost{color:var(--green)}
.doc__meta{color:var(--muted);font-size:13px;margin:0 0 22px!important}

/* подвал */
.foot{background:#fff;border-top:1px solid var(--line);padding:26px 0;margin-top:auto}
.foot__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;
  font-size:13px;color:var(--muted)}
.foot__col{display:flex;flex-direction:column;gap:6px}
.foot__owner{color:var(--ink);font-weight:600}
.foot__col a{color:var(--green);text-decoration:none}
.foot__col a:hover{text-decoration:underline}

/* разбивка по контактам в панели заказа */
.cart__break{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px}
.brk{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted)}
.brk b{margin-left:auto;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.brk i{font-style:normal;font-size:11.5px;color:var(--green);min-width:32px;text-align:right}

/* переключатель страны */
.countries{display:flex;gap:8px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line);
  background:var(--soft-bg)}
.country{border:1px solid var(--line);background:#fff;border-radius:20px;padding:6px 14px;
  font:inherit;font-size:13.5px;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:7px;
  transition:border-color .15s,background .15s,color .15s}
.country:hover{border-color:var(--green-light);color:var(--green)}
.country i{font-style:normal;font-size:11.5px;color:#9CA3AF}
.country--on{background:var(--green);border-color:var(--green);color:#fff}
.country--on i{color:rgba(255,255,255,.75)}
.group.off-country{display:none}
.panel__count i{font-style:normal;color:#9CA3AF;font-size:12px}

/* как это работает */
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:26px}
.how__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:15px;display:flex;flex-direction:column;gap:5px}
.how__n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:7px;background:var(--green-bg);color:var(--green);font-size:13px;font-weight:700}
.how__item b{font-size:14.5px}
.how__item i{font-style:normal;color:var(--muted);font-size:13px;line-height:1.5}

/* частые вопросы */
.faq{padding:4px 0}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item:last-child{border-bottom:0}
.faq__item summary{padding:13px 18px;cursor:pointer;font-weight:500;list-style:none;
  display:flex;align-items:center;gap:10px}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{content:"+";margin-left:auto;color:var(--muted);font-size:17px}
.faq__item[open] summary::after{content:"−"}
.faq__item summary:hover{background:var(--soft-bg);color:var(--green)}
.faq__item p{margin:0;padding:0 18px 15px;color:#2b3444;font-size:14px;line-height:1.6;max-width:760px}

/* посадочные страницы */
.land{padding:22px 20px 50px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--green);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

.land__head{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
.land h1{font-size:29px;letter-spacing:-.025em;margin:0 0 10px;font-weight:700}
.land__intro{color:#2b3444;font-size:15px;line-height:1.6;margin:0 0 18px;max-width:660px}
.land__intro a{color:var(--green)}

.land__nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.num{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  box-shadow:var(--shadow)}
.num b{display:block;font-size:20px;font-weight:700;letter-spacing:-.02em}
.num i{font-style:normal;color:var(--muted);font-size:12.5px}
.num:first-child b{color:var(--green)}

.land__buy{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;position:sticky;top:84px}
.land__price{font-size:34px;font-weight:800;color:var(--green);letter-spacing:-.03em}
.land__price-note{color:var(--muted);font-size:13px;margin-bottom:14px}
.land__buy .btn{margin-top:0;display:block;text-align:center;text-decoration:none}
.land__buy-note{margin-top:10px;font-size:12px;color:var(--muted);text-align:center;line-height:1.5}

.land__block{margin-top:34px}
.land__block h2{font-size:19px;margin:0 0 12px;font-weight:600}
.land__note{color:var(--muted);font-size:13.5px;margin:0 0 12px;max-width:700px;line-height:1.55}

.land__table{overflow-x:auto}
.land__table table{width:100%;border-collapse:collapse;font-size:13.5px}
.land__table th,.land__table td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left}
.land__table th{background:var(--soft-bg);color:var(--muted);font-weight:600;font-size:12.5px}
.land__table tr:last-child td{border-bottom:0}
.land__table .hide{color:#9CA3AF;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

.cols{display:flex;flex-wrap:wrap;gap:8px}
/* «Что в каждом столбце» — название слева, пояснение справа. Сетка из двух
   колонок с чередующейся подложкой: девятнадцать строк подряд без неё
   читаются тяжело, взгляд теряет строку. */
.colhelp{display:grid;grid-template-columns:minmax(120px,190px) 1fr;
  gap:0;margin:0;font-size:14px;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;background:#fff}
.colhelp dt{padding:9px 14px;font-weight:600;color:var(--ink)}
.colhelp dd{padding:9px 14px;margin:0;color:var(--muted);line-height:1.5}
.colhelp dt:nth-of-type(odd),.colhelp dd:nth-of-type(odd){background:var(--soft-bg)}

/* На телефоне две колонки не помещаются: под пояснение оставалось
   полтораста пикселей, и текст рвался по одному слову в строку.
   Название встаёт над пояснением, подложка остаётся общей на пару. */
@media (max-width:620px){
  .colhelp{grid-template-columns:1fr}
  .colhelp dt{padding:10px 14px 1px}
  .colhelp dd{padding:0 14px 10px}
}
.col{background:var(--green-bg);color:var(--green);border-radius:7px;padding:5px 11px;font-size:13px}

.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px 14px}
.links--dense{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.links a{color:var(--ink);text-decoration:none;font-size:13.5px;padding:5px 8px;border-radius:7px;
  display:flex;align-items:baseline;gap:8px}
.links a:hover{background:var(--green-bg);color:var(--green)}
.links i{margin-left:auto;font-style:normal;color:#9CA3AF;font-size:11.5px}

/* Ссылка «взять шире» — заметная карточка, а не строка в списке: это
   предложение, а не перелинковка. */
.wider{display:block;background:var(--green-bg);border:1px solid var(--green-light);
  border-radius:var(--radius);padding:15px 18px;text-decoration:none;color:var(--ink);
  transition:border-color .15s,background .15s}
.wider:hover{background:#DCF2E5;border-color:var(--green)}
.wider b{display:block;font-size:15.5px;color:var(--green);margin-bottom:3px}
.wider span{font-size:13.5px;color:var(--muted);line-height:1.5}

.land__cta{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.land__cta b{display:block;font-size:16px}
.land__cta span{color:var(--muted);font-size:13.5px}
.land__cta .btn{margin-left:auto;text-decoration:none}

@media (max-width:940px){
  .land__head{grid-template-columns:1fr}
  .land__buy{position:static}
}

/* ---------------------------------------------- возврат с оплаты */
/* Блок виден сразу и не даёт человеку решить, что платёж потерялся. */
.payback{border-radius:14px;padding:18px 20px;margin:0 0 22px;border:1px solid var(--line);
  background:#fff}
.payback__title{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.payback__text{color:var(--muted);font-size:14px;line-height:1.5}
.payback__note{font-size:13px}
.payback__dl{font-weight:600;color:var(--green)}

.payback--ok{border-color:var(--green);background:var(--green-bg)}
.payback--ok .payback__title{color:var(--green)}

.payback--wait{border-color:#FCD34D;background:#FFFBEB}
.payback--wait .payback__title{color:#92400E}

.payback--err{border-color:#FCA5A5;background:var(--red-bg)}
.payback--err .payback__title{color:var(--red)}

/* ------------------------------------------- третий уровень: подрубрики */
/* Рубрик всего 343, а ищут «Кофейни» и «Цветы» — это подрубрики.
   Свёрнуты по умолчанию, иначе список из 1631 пункта не читается. */
/* Дерево рубрик — одноколоночный список: внутри каждой рубрики свой
   вложенный список подрубрик, и в многоколоночной сетке они наезжали
   друг на друга. Города остаются в несколько колонок — там плоский список. */
[data-tree="rubrics"] .group__body{grid-template-columns:1fr;gap:0}
[data-tree="rubrics"] .group.open .group__body{display:block}

.sub__head{display:flex;align-items:center;gap:8px;min-height:30px;flex-wrap:wrap}
/* Было flex:none — строка не сжималась совсем, и длинное название рубрики
   выносило счётчик со стрелкой за правый край. */
.sub__head .item{flex:1 1 auto;min-width:0}
.sub__head .cnt{margin-left:auto}
/* Название раскрывает список, как у группы: пунктир подсказывает, что кликабельно */
.sub__title{border-bottom:1px dashed var(--line);cursor:pointer}
.sub__title:hover{color:var(--green);border-bottom-color:var(--green)}
.sub__meta{color:var(--muted);font-size:12px;white-space:nowrap}
.sub__meta b{color:var(--ink);font-weight:600}
.sub__toggle{border:0;background:none;cursor:pointer;color:var(--muted);
  font-size:12px;padding:4px 8px;line-height:1;border-radius:6px;flex:none}
.sub__toggle:hover{background:var(--green-bg);color:var(--green)}
.sub.open>.sub__head .sub__toggle{transform:rotate(180deg)}
.sub__body{display:none;margin:0 0 4px 26px;padding-left:10px;
  border-left:2px solid var(--line)}
.sub.open>.sub__body{display:block}
.item--sub .cnt{font-size:11px;color:#B0B6C0}
.item--sub span{font-size:13px;color:var(--muted)}
.item--sub input:checked+span{color:var(--ink)}
.sub.hidden{display:none}

/* Узкий экран. Блок стоит здесь, а не в общем @media выше: правила третьего
   уровня объявлены в этой секции, специфичность у них та же, и из середины
   файла их бы перебило порядком следования. */
@media (max-width:620px){
  /* flex:1 1 0 — чтобы при переносе строк название не занимало всю ширину
     и не сбрасывало счётчик со стрелкой на строку ниже. */
  .sub__head .item{order:1;flex:1 1 0}
  .sub__head .cnt{order:2}
  .sub__toggle{order:3}
  /* nowrap нужен на широком экране, где счётчик стоит рядом с названием.
     Здесь он на своей строке и переносится как обычный текст. */
  .sub__meta{order:4;width:100%;margin-left:24px;white-space:normal}
  /* Отступ вложенности: на 320 px три уровня по 26 px не оставляют места тексту. */
  .sub__body{margin-left:12px;padding-left:8px}
}

/* ------------------------------------------------ поиск по каталогу */
.catsearch__input{width:100%;padding:13px 16px;border:1px solid var(--line);
  border-radius:10px;font:inherit;font-size:15px;background:#fff;color:var(--ink)}
.catsearch__input:focus{outline:none;border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-bg)}
.catsearch__input::placeholder{color:#9CA3AF}
.catsearch__out{margin-top:14px}
.catsearch__empty{color:var(--muted);font-size:14px;margin:6px 2px}
.catsearch__empty a{color:var(--green)}

/* --------------------------- индикатор ожидания после оплаты */
/* Без движения страница выглядит застывшей, и человек, только что
   заплативший, начинает сомневаться, прошли ли деньги. */
.payback__head{display:flex;align-items:center;gap:10px}
.payback__spin{width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid rgba(146,64,14,.25);border-top-color:#92400E;
  animation:payback-spin .8s linear infinite}
@keyframes payback-spin{to{transform:rotate(360deg)}}

.payback__bar{margin-top:12px;height:4px;border-radius:3px;
  background:rgba(146,64,14,.15);overflow:hidden}
.payback__bar i{display:block;height:100%;width:35%;border-radius:3px;
  background:#D97706;animation:payback-slide 1.4s ease-in-out infinite}
@keyframes payback-slide{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(340%)}
}

@media (prefers-reduced-motion:reduce){
  .payback__spin,.payback__bar i{animation:none}
}

/* ---------------------------------------- текстовые блоки посадочных */
.land__p{color:var(--ink);font-size:15px;line-height:1.6;margin:0 0 12px;max-width:760px}
.land__p b,.land__p strong{font-weight:600}
.land__faq{border-bottom:1px solid var(--line);padding:12px 0}
.land__faq:last-child{border-bottom:0}
.land__faq summary{cursor:pointer;font-weight:600;font-size:15px;list-style:none;
  display:flex;align-items:center;gap:8px}
.land__faq summary::-webkit-details-marker{display:none}
.land__faq summary::before{content:"+";color:var(--green);font-weight:700;
  width:14px;flex:none}
.land__faq[open] summary::before{content:"–"}
.land__faq p{margin:10px 0 0 22px;color:var(--muted);font-size:14.5px;line-height:1.6;
  max-width:720px}