/* ==========================================================================
   Купонный сервис — Ч/Б прототип
   Палитра намеренно ахроматическая: цвет добавляется на этапе дизайна.
   ========================================================================== */

:root{
  --bg:#ffffff;
  --surface:#f5f5f4;
  --surface-2:#ebebe9;
  --surface-3:#dedddb;
  --line:#e3e2e0;
  --line-strong:#c9c8c5;
  --ink:#151514;
  --ink-2:#55534f;
  --ink-3:#8d8b87;
  --ink-4:#b3b1ad;

  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  --shadow-1:0 1px 2px rgba(21,21,20,.05), 0 4px 14px rgba(21,21,20,.05);
  --shadow-2:0 8px 20px rgba(21,21,20,.08), 0 24px 60px rgba(21,21,20,.10);
  --shadow-3:0 30px 80px rgba(21,21,20,.20);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* Резиновая раскладка: контент тянется за шириной экрана,
     как на маркетплейсах, и упирается только на очень широких мониторах. */
  --pad:60px;
  --maxw:1760px;
  --header-h:64px;
}

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

/* clip, а не hidden: не ломает липкую шапку и убирает случайный
   горизонтальный сдвиг на узких экранах */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Onest", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}

img{max-width:100%;display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:inherit;text-decoration:none}
input{font:inherit;color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* Иконки: обёртка строчная, поэтому svg садился на базовую линию текста
   и визуально стоял выше слова. Центруем внутри флекса. */
[data-icon]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
[data-icon] svg{display:block}

/* ---------- служебные ---------- */
.mute{color:var(--ink-3)}
.tiny{font-size:12px;letter-spacing:.01em}
.hide{display:none !important}

/* Плейсхолдер изображения */
.ph{
  position:relative;
  background:var(--surface-2);
  background-image:repeating-linear-gradient(-45deg,
     rgba(21,21,20,.045) 0 1px, transparent 1px 9px);
  overflow:hidden;
}

/* ==========================================================================
   Шапка
   ========================================================================== */
.header{
  position:sticky;top:0;z-index:40;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(1.2) blur(14px);
  border-bottom:1px solid var(--line);
}
.header__in{
  height:var(--header-h);
  display:flex;align-items:center;gap:20px;
}
.logo{
  flex:0 0 auto;
  font-size:17px;font-weight:600;letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap;
}

.header__spacer{flex:1}

/* Иконки соцсетей города — компактно в шапке главной, рядом с призывом
   подписаться, а не в подвале, куда при бесконечной ленте не доскроллить */
.head-socials{display:flex;align-items:center;gap:6px}
/* Подпись-триггер у иконок: без неё значки читаются как служебные и их
   просто не замечают (на созвоне это проверили голосованием — увидел один
   из двоих). Тон приглушённый: задача — объяснить, а не создать пятно. */
.head-socials__label{font-size:13px;color:var(--ink-3);white-space:nowrap;margin-right:2px}
@media (max-width:1200px){.head-socials__label{display:none}}
.head-socials .soc{width:34px;height:34px;padding:0;justify-content:center;border-radius:var(--r-pill)}

/* «Разместить купон» — единственный явный призыв к действию в шапке.
   Заливка отличает его от приглушённого входа в ЛК рядом. */
.header-cta{
  flex:0 0 auto;gap:8px;height:42px;padding:0 18px 0 14px;
}
.header-cta__label{white-space:nowrap}

/* Вход в личный кабинет — не должен спорить за внимание с «Разместить
   купон»: по умолчанию просто кружок-иконка, текст раскрывается по ховеру. */
.lk-chip{
  flex:0 0 auto;
  display:inline-flex;align-items:center;
  height:42px;border-radius:var(--r-pill);
  border:1px solid var(--line-strong);color:var(--ink-2);
  overflow:hidden;white-space:nowrap;
  transition:background .18s, border-color .18s, color .18s;
}
.lk-chip [data-icon]{width:40px;height:40px;flex:0 0 auto}
.lk-chip__label{
  max-width:0;opacity:0;font-size:14px;font-weight:500;overflow:hidden;
  transition:max-width .28s var(--ease-soft), opacity .2s, margin .28s;
}
.lk-chip:hover{border-color:var(--ink-3);color:var(--ink)}
@media (hover:hover){
  .lk-chip:hover{background:var(--surface)}
  .lk-chip:hover .lk-chip__label{max-width:220px;opacity:1;margin-right:16px}
}

/* Селектор города */
.city-btn{
  display:flex;align-items:center;gap:8px;
  height:42px;padding:0 15px 0 13px;
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-weight:500;white-space:nowrap;
  transition:border-color .18s, background .18s;
}
.city-btn:hover{background:var(--surface);border-color:var(--ink-3)}
.city-btn svg{flex:0 0 auto}
.city-btn .chev{color:var(--ink-4)}

.header .search--compact{flex:1 1 380px;max-width:460px;min-width:180px}

/* ==========================================================================
   Поиск
   ========================================================================== */
.search{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  padding:6px 6px 6px 18px;
  transition:border-color .2s var(--ease-soft), background .2s, box-shadow .2s;
}
.search:focus-within{background:var(--bg);border-color:var(--ink-3);box-shadow:var(--shadow-1)}
.search input{
  flex:1;border:0;background:none;outline:none;
  padding:10px 0;font-size:16px;min-width:0;
}
.search input::placeholder{color:var(--ink-4)}
.search__icon{color:var(--ink-3);flex:0 0 auto}
.search__voice{
  width:38px;height:38px;border-radius:var(--r-pill);
  display:grid;place-items:center;color:var(--ink-2);flex:0 0 auto;
  transition:background .18s, color .18s, transform .18s var(--ease);
}
.search__voice:hover{background:var(--surface-2);color:var(--ink);transform:scale(1.06)}
.search__go{
  height:38px;padding:0 20px;border-radius:var(--r-pill);flex:0 0 auto;
  background:var(--ink);color:var(--bg);font-weight:500;
  transition:transform .18s var(--ease), opacity .18s;
}
.search__go:hover{transform:translateY(-1px);opacity:.88}
.search--compact{padding:4px 4px 4px 14px}
.search--compact input{padding:7px 0;font-size:14px}
.search--compact .search__voice{width:32px;height:32px}
.search--compact .search__go{display:none}

/* ==========================================================================
   Первый экран (главная)
   ========================================================================== */
.hero{
  border-bottom:1px solid var(--line);
  background:radial-gradient(1000px 420px at 50% -160px, var(--surface) 0%, transparent 70%);
}
.hero__in{padding-block:56px 34px;display:flex;flex-direction:column;gap:26px}
.hero__top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hero h1{
  margin:0;
  font-size:clamp(24px,3.35vw,44px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight:600;
}
/* на широком экране заголовок идёт одной строкой,
   на узком переносится по словам */
@media (min-width:900px){.hero h1{white-space:nowrap}}
.hero h1 em{font-style:normal;color:var(--ink-3)}
.hero__sub{margin:8px 0 0;color:var(--ink-2);max-width:44ch}

/* Подтверждение города теперь спрашивается попапом на входе
   (см. .modal ниже), тихая плашка убрана */

/* Расстояние до точки */
.card__near{
  position:absolute;top:10px;left:10px;z-index:1;
  display:inline-flex;align-items:center;
  font-size:11px;font-weight:500;color:var(--ink-2);
  background:rgba(255,255,255,.86);border-radius:var(--r-pill);
  padding:4px 9px;
}
/* У купона маркетплейса нет точки на карте: вместо минут — площадка */
.card__near--mp{
  background:rgba(255,255,255,.92);color:var(--ink);font-weight:600;letter-spacing:.01em;
}
.card__near--mp .mp-logo{height:12px;width:auto;display:block}

.tag__label-s{display:none}
.tag--near svg,.select--near svg{color:var(--ink-3)}
.tag--near.is-active svg{color:rgba(255,255,255,.6)}
.select--near.is-active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.select--near.is-active svg{color:rgba(255,255,255,.6)}

/* Лента категорий — два яруса. Верхний: «Все категории» + разделы
   витрины (Маркетплейсы/Для бизнеса), закреплены, не скроллятся.
   Нижний: «Рядом со мной» + ниши, одной строкой со свайпом вправо,
   без переноса — и визуально мельче верхнего, чтобы иерархия
   «разделы → ниши» читалась без подписей. */
.tags-row{display:flex;flex-direction:column;gap:10px;min-width:0}
.tags-row__main{display:flex;align-items:center;gap:12px;min-width:0}
.tags-row__main .dd{flex:0 0 auto}
.tags-row__sub{display:flex;align-items:center;gap:8px;min-width:0;position:relative}
.tags-row__sub .tag{height:34px;padding:0 13px;font-size:13px;gap:6px}
.tags-row__sub .tag__n{font-size:11px}

/* Стрелка в конце ленты категорий. Затухания справа мало: на созвоне
   отдельно проговаривали, что на догадливость по скроллу полагаться
   нельзя — нужен явный элемент, по которому видно, что там ещё есть. */
.tags-more{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-strong);color:var(--ink-2);
  box-shadow:var(--shadow-1);
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease-soft), background .18s, color .18s, transform .18s var(--ease);
}
.tags-more .chev{transform:rotate(-90deg)}   /* шеврон вниз → вправо */
.tags.has-more ~ .tags-more{opacity:1;pointer-events:auto}
.tags-more:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tags{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:8px;
  flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  padding:4px 0;   /* симметрично, иначе теги смещены на 1px */
}
.tags::-webkit-scrollbar{display:none}
.tags.has-more{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);
}
#tags{display:contents}
.tag{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  flex:0 0 auto;white-space:nowrap;
  height:42px;padding:0 16px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--bg);
  font-size:14px;font-weight:500;color:var(--ink-2);
  transition:transform .18s var(--ease), border-color .18s, background .18s, color .18s;
}
.tag[hidden]{display:none}   /* inline-flex иначе перебивает атрибут */
.tag:hover{transform:translateY(-2px);border-color:var(--ink-3);color:var(--ink)}
.tag.is-active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tag__n{font-size:12px;color:var(--ink-4);font-variant-numeric:tabular-nums}
.tag.is-active .tag__n{color:rgba(255,255,255,.6)}
/* Главная точка входа в категории — выделена заливкой */
.tag--all{
  background:var(--ink);border-color:var(--ink);color:var(--bg);
  font-weight:600;padding:0 18px;gap:9px;
}
.tag--all:hover{background:#000;border-color:#000;color:var(--bg)}
.tag--all .chev{color:rgba(255,255,255,.55)}
.tag--all svg{opacity:.8}

/* Маркетплейсы и «Для бизнеса» — не рядовые категории, а отдельные
   главенствующие ветки. Закреплены в той же строке, что и «Все категории»
   (не скроллятся вместе с обычными тегами), но с жирной рамкой — видно,
   что это не «кафе» и не «рестораны», а отдельный, более важный переход.
   Ниши у них свои (ТЗ v7.0 §3.2.10), поэтому у плашки стрелка и свой
   список: иначе второго уровня в этих разделах не видно вовсе.
   Блок обязан идти ПОСЛЕ .tag: специфичность одинаковая, и базовая
   светлая рамка .tag иначе перебивает выделение. */
.tag--featured{
  border:1.5px solid var(--ink);
  background:var(--surface);
  font-weight:600;color:var(--ink);
  box-shadow:0 0 0 3px var(--surface);   /* воздух вокруг рамки — не слипается с соседними тегами */
}
.tag--featured svg{color:var(--ink)}
.tag--featured .tag__n{color:var(--ink-3)}
.tag--featured .chev{color:var(--ink-3);margin-left:-2px}
.tag--featured:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tag--featured:hover svg{color:var(--bg)}
.tag--featured:hover .tag__n,
.tag--featured:hover .chev{color:rgba(255,255,255,.6)}
.tag--featured.is-active{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.tag--featured.is-active svg{color:var(--bg)}
.tag--featured.is-active .tag__n,
.tag--featured.is-active .chev{color:rgba(255,255,255,.6)}
/* Раскрытый список — перевёрнутая стрелка: обычная связка «меню открыто» */
.dd--l1.is-open .tag--featured{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.dd--l1.is-open .tag--featured svg{color:var(--bg)}
.dd--l1.is-open .tag--featured .tag__n{color:rgba(255,255,255,.6)}
.dd--l1.is-open .tag--featured .chev{transform:rotate(180deg);color:rgba(255,255,255,.6)}


/* Выпадающий список всех категорий */
.dd{position:relative}
.dd__panel{
  position:absolute;top:calc(100% + 10px);left:0;z-index:50;
  width:min(780px,calc(100vw - 40px));
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:16px;
  display:none;grid-template-columns:repeat(3,1fr);gap:4px 16px;
}
.dd.is-open .dd__panel{display:grid}
.dd__panel a{
  padding:8px 10px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-2);
  display:flex;justify-content:space-between;gap:10px;
  transition:background .16s,color .16s;
}
.dd__panel a:hover{background:var(--surface);color:var(--ink)}
/* Список ниш раздела — одной колонкой: их шесть, в три колонки они
   выглядели бы шире и важнее, чем весь остальной каталог */
.dd__panel--l1{
  width:min(300px,calc(100vw - 40px));
  grid-template-columns:1fr;
  max-height:min(70vh,420px);overflow-y:auto;
}
.dd__panel--l1 .dd__l2.is-active{background:var(--ink);color:var(--bg)}
.dd__panel--l1 .dd__l2.is-active span{color:rgba(255,255,255,.6)}

.dd__panel a span{color:var(--ink-4);font-size:12px;font-variant-numeric:tabular-nums}

/* Единственное место, где видны сразу все три раздела и их ниши: раздел
   заголовком колонки, ниши под ним. Плоским списком тут не обойтись —
   ниша «Одежда» есть и в маркетплейсах, и в городе, и это разные ссылки. */
.dd__group{display:flex;flex-direction:column;gap:2px}
.dd__l1{
  border-bottom:1px solid var(--line);margin-bottom:6px;padding-bottom:10px;
  color:var(--ink)!important;
}
.dd__l1 b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.dd__l2{font-size:13px}
@media (max-width:640px){.dd__panel{grid-template-columns:1fr}}


/* ==========================================================================
   Секции и сетка купонов
   ========================================================================== */
.section{padding:34px 0 0}
.section__head{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-bottom:18px;flex-wrap:wrap;
}
.section__head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.section__head .mute{font-size:13px}

.grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}
@media (max-width:860px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (max-width:640px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* ---------- Карточка купона ---------- */
.card{
  container-type:inline-size;
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--bg);
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  width:100%;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease),
             border-color .28s, opacity .28s var(--ease-soft);
}
/* соседи реагируют на наведение */
.grid:hover .card:not(:hover),
.rail:hover .card:not(:hover){opacity:.62;transform:scale(.988)}
.card:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:var(--shadow-2);
  border-color:var(--line-strong);
  z-index:2;
}
.card:hover .card__media{animation:nudge .5s var(--ease)}
@keyframes nudge{
  0%{transform:translateX(0)}
  25%{transform:translateX(-2.5px)}
  60%{transform:translateX(2px)}
  100%{transform:translateX(0)}
}
.card.is-open{opacity:0;pointer-events:none}

.card__media{
  position:relative;
  aspect-ratio:4/5;              /* пропорция под ленты соцсетей */
  background:var(--surface-2);
  background-image:repeating-linear-gradient(-45deg,
     rgba(21,21,20,.05) 0 1px, transparent 1px 10px);
}
.card__share{
  position:absolute;top:8px;right:8px;
  width:32px;height:32px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.82);color:var(--ink-2);
  display:grid;place-items:center;
  opacity:0;transform:translateY(-4px);
  transition:opacity .2s,transform .2s var(--ease),background .2s;
}
.card:hover .card__share{opacity:1;transform:none}
.card__share:hover{background:#fff}

/* Маркировка рекламы — обязательна на каждом объявлении отдельно,
   но не должна привлекать внимание: мелко, на самом изображении.
   Низ изображения занят заголовком/скидкой (в мягком стиле карточки они
   наложены на фото), поэтому метка — наверху, подальше от текста. */
.erid-stamp{
  position:absolute;top:8px;right:8px;z-index:1;
  white-space:nowrap;
  font-size:9px;line-height:1.3;color:rgba(21,21,20,.45);
  letter-spacing:.01em;pointer-events:none;
}
/* На карточке в ленте наверху справа уже живёт кнопка «Поделиться» —
   сдвигаем метку левее, чтобы не наезжала на неё по ховеру. На тач-экранах
   ховера не бывает, кнопка всегда невидима — там метка может стоять в углу */
@media (hover:hover){
  .card__media .erid-stamp{right:46px}
}

.card__value{
  position:absolute;left:14px;bottom:70px;
  font-size:34px;font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.card__cap{
  position:absolute;left:0;right:0;bottom:0;
  padding:34px 14px 12px;
  background:linear-gradient(to top, rgba(255,255,255,.96) 42%, rgba(255,255,255,0));
}
.card__title{
  margin:0;font-size:15px;font-weight:600;letter-spacing:-.015em;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
.card__meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);min-width:0}
.card__meta b{font-weight:500;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{width:3px;height:3px;border-radius:50%;background:var(--ink-4);flex:0 0 auto}


.card__actions{display:flex;gap:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:38px;padding:0 16px;border-radius:var(--r-pill);
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:transform .18s var(--ease), background .18s, color .18s, border-color .18s, opacity .18s;
}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{border:1px solid var(--line-strong);color:var(--ink-2)}
.btn--ghost:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface)}
.btn--solid{background:var(--ink);color:var(--bg)}
.btn--solid:hover{opacity:.88}
.btn--wide{flex:1}
/* Кнопка, ставшая промокодом */
.btn.is-code{letter-spacing:.16em;font-weight:700;font-variant-numeric:tabular-nums}
.btn--lg{height:46px;padding:0 22px;font-size:15px}

/* ---------- Вариант карточки «как на маркетплейсах» ----------
   Фото само по себе, текст под ним, без рамки и подложки. Первая версия
   карточки цела и включается адресом ?cards=soft. */
.cards-wb .grid{gap:26px 14px}
.cards-wb .card{
  border:0;background:none;border-radius:0;overflow:visible;
}
.cards-wb .card:hover{transform:none;box-shadow:none}
.cards-wb .grid:hover .card:not(:hover),
.cards-wb .rail:hover .card:not(:hover){opacity:1;transform:none}

.cards-wb .card__media{
  border-radius:14px;overflow:hidden;border:1px solid var(--line);
  transition:transform .26s var(--ease), box-shadow .26s var(--ease);
}
.cards-wb .card:hover .card__media{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.cards-wb .card:hover .card__media{animation:none}

.cards-wb .card__badge{
  position:absolute;left:9px;bottom:9px;
  background:var(--ink);color:var(--bg);
  font-size:15px;font-weight:700;letter-spacing:-.02em;
  padding:5px 10px;border-radius:9px;
}
.cards-wb .card__body{padding:10px 2px 0;gap:8px}
.cards-wb .card__title{
  font-size:13.5px;font-weight:500;line-height:1.32;letter-spacing:-.005em;
  margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.cards-wb .card__meta{font-size:11.5px}

/* Узкая карточка (по шесть в ряд): кнопки в столбик, крупное — мельче */
@container (max-width: 235px){
  .card__actions{flex-direction:column}
  /* flex:1 у «Подробнее» в столбике схлопывал высоту кнопки — отключаем */
  .card__actions .btn{width:100%;flex:0 0 auto}
  .card__value{font-size:27px;bottom:64px}
  .card__title{font-size:13.5px}
  .card__body{padding:10px 12px 12px;gap:9px}
  .card__cap{padding:30px 12px 10px}
  .card__near{font-size:10px;padding:3px 7px}
  /* в узкой карточке важнее компания — категория обрезалась бы вместе с ней */
  .card__meta .dot,.card__meta span{display:none}
}

/* ---------- «Виджет»-купон для рекомендаций ---------- */
/* Блок рекомендаций. Виль отдельно просил, чтобы он не выглядел куском
   общей выдачи: своя подложка, рамка и подпись — сразу видно, что это
   подборка смежного, а не продолжение ленты. */
.recos{
  border:1px solid var(--line-strong);border-radius:var(--r-xl);
  background:var(--surface);
  padding:26px 24px 10px;
}
.recos__head{margin-bottom:16px}
.recos__eyebrow{
  display:inline-block;margin-bottom:8px;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);
  padding:4px 12px;
}
.recos__head h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.02em}
.recos__sub{margin:6px 0 0;font-size:13px;color:var(--ink-3)}
/* карточки внутри подборки стоят на серой подложке — возвращаем им белый фон */
.recos .card{background:var(--bg)}
.cards-wb .recos .card{background:none}
@media (max-width:640px){.recos{padding:20px 16px 6px}}

.rail-wrap{position:relative}
.rail{
  display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:4px;margin:0 -4px;
  /* Полосу прокрутки прячем: листание показывают стрелки и затухание
     у края — так же, как в ленте категорий на главной */
  scrollbar-width:none;-ms-overflow-style:none;
}
.rail::-webkit-scrollbar{display:none}

/* Стрелки листания. Появляются только с той стороны, куда есть куда
   листать: на догадливость по скроллу полагаться нельзя — это отдельно
   проговаривали на созвоне про ленту категорий. */
.rail-nav{
  position:absolute;top:calc(50% - 9px);transform:translateY(-50%);z-index:3;
  width:38px;height:38px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line-strong);color:var(--ink-2);
  box-shadow:var(--shadow-1);
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease-soft), background .18s, color .18s, border-color .18s;
}
.rail-nav.is-on{opacity:1;pointer-events:auto}
.rail-nav:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.rail-nav--prev{left:-6px}
.rail-nav--next{right:-6px}
.rail-nav .chev{display:grid}
.rail-nav--prev .chev{transform:rotate(90deg)}
.rail-nav--next .chev{transform:rotate(-90deg)}

/* Затухание у края — подсказка, что ряд продолжается */
.rail-wrap::before,
.rail-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:44px;z-index:2;
  pointer-events:none;opacity:0;transition:opacity .2s var(--ease-soft);
}
/* Цвет затухания — подложка блока рекомендаций, она серая, не белая */
.rail-wrap::before{left:0;background:linear-gradient(to right,var(--surface),transparent)}
.rail-wrap::after{right:0;background:linear-gradient(to left,var(--surface),transparent)}
.rail-wrap.can-prev::before,
.rail-wrap.can-next::after{opacity:1}

@media (max-width:640px){
  .rail-nav{display:none}
  .rail-wrap::before,.rail-wrap::after{width:24px}
}
.rail .card{flex:0 0 236px;scroll-snap-align:start}
.rail .card .card__media{aspect-ratio:16/10}
.rail .card .card__value{font-size:24px;bottom:56px}
.rail .card .card__body{padding:10px 12px 12px}
/* в «виджете» одно действие — иначе кнопки не помещаются */
/* В рекомендациях у карточки одна кнопка, «Подробнее» там не рисуется */
.rail .card .card__actions .btn--solid{flex:1}

/* ==========================================================================
   Панель фильтров (каталог)
   ========================================================================== */
.toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.select{
  display:inline-flex;align-items:center;gap:8px;
  height:42px;padding:0 15px;border:1px solid var(--line-strong);border-radius:var(--r-pill);
  font-size:14px;font-weight:500;color:var(--ink-2);
  transition:border-color .18s,background .18s,color .18s;
}
.select:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface)}
.select .chev{color:var(--ink-4)}
.toolbar__count{margin-left:auto;font-size:13px;color:var(--ink-3)}

.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);padding:18px 0 0;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.page-title{margin:10px 0 0;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;font-weight:600}
.page-sub{margin:8px 0 0;color:var(--ink-2);max-width:60ch}

/* ==========================================================================
   Раскрытие купона поверх ленты
   ========================================================================== */
.overlay{
  position:fixed;inset:0;z-index:80;
  background:rgba(21,21,20,.42);
  backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease-soft);
}
.overlay.is-on{opacity:1;pointer-events:auto}

.quick{
  position:fixed;z-index:81;
  left:50%;top:50%;
  width:min(920px,calc(100vw - 40px));
  /* высота по содержимому: вся информация должна помещаться без скролла */
  height:auto;
  max-height:min(88vh,820px);
  margin:0;
  background:var(--bg);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);
  overflow:hidden;
  display:flex;
  opacity:0;pointer-events:none;
  transform:translate(-50%,-50%) scale(.9);
  transition:opacity .22s var(--ease-soft), transform .38s var(--ease);
}
.quick.is-on{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}
.quick__close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:36px;height:36px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.9);color:var(--ink-2);
  display:grid;place-items:center;box-shadow:var(--shadow-1);
  transition:transform .18s var(--ease),background .18s;
}
.quick__close:hover{transform:rotate(90deg);background:#fff}

/* Одно изображение — то же, что уходит в соцсети, в честной пропорции 4:5 */
.quick__media{
  flex:0 0 37%;background:var(--surface);
  display:grid;place-items:center;padding:18px;min-width:0;
  border-right:1px solid var(--line);
}
.quick__photo{
  position:relative;width:100%;max-height:100%;aspect-ratio:4/5;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--surface-2);
  background-image:repeating-linear-gradient(-45deg, rgba(21,21,20,.05) 0 1px, transparent 1px 10px);
}
.quick__value{
  position:absolute;left:18px;bottom:16px;
  font-size:clamp(30px,3.2vw,44px);font-weight:700;letter-spacing:-.045em;line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}

.quick__side{
  flex:1;min-width:0;overflow-y:auto;
  padding:18px 24px 14px;
  display:flex;flex-direction:column;gap:10px;
}

/* ---------- Вариант компоновки ?quick=left ----------
   Промокод и «Забрать купон» уходят под картинку в левую колонку —
   предложение Коли с созвона: когда слева появится реальное фото,
   оно перетянет вес, и целевое действие должно стоять рядом с ним. */
.quick-left .quick__media{
  flex:0 0 42%;
  flex-direction:column;justify-content:center;align-items:stretch;
  gap:14px;padding:18px;
}
.quick-left .quick__photo{flex:0 1 auto;min-height:0}
/* подложка колонки серая — возвращаем блоку белый фон, чтобы читался */
.quick-left .quick__media .reveal{flex:0 0 auto;background:var(--bg)}
.quick-left .quick__media .reveal__row{gap:10px}
.quick__eyebrow{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
/* иконка просмотров стоит рядом с числом — центруем и её */
.quick__eyebrow span,.coupon__meta span{display:inline-flex;align-items:center;gap:5px}
.quick__eyebrow svg,.coupon__meta svg{display:block}
.quick h3{margin:0;font-size:21px;line-height:1.14;letter-spacing:-.03em;font-weight:600}

.company{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px;border:1px solid var(--line);border-radius:var(--r-md);
}
.company__logo{
  width:42px;height:42px;border-radius:10px;background:var(--surface-2);
  display:grid;place-items:center;font-size:9px;color:var(--ink-4);flex:0 0 auto;
}
.company__name{font-weight:600;font-size:14px}
.company__req{font-size:12px;color:var(--ink-3)}
.socials{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
/* Иконка + подпись вместе: по опыту заказчика не все замечают
   голую иконку, а переходы на сайт/соцсети — ключевая метрика проекта */
.soc{
  display:inline-flex;align-items:center;gap:6px;
  height:30px;padding:0 10px;border-radius:var(--r-pill);border:1px solid var(--line);
  font-size:12px;font-weight:500;color:var(--ink-2);white-space:nowrap;
  transition:border-color .18s,color .18s,transform .18s var(--ease),background .18s;
}
.soc:hover{border-color:var(--ink-3);color:var(--ink);background:var(--surface);transform:translateY(-2px)}
.soc svg{flex:0 0 auto}

.terms{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.terms li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.45}
.terms li::before{
  content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--ink-4);margin-top:8px;
}
.block-label{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);
  margin-bottom:8px;
}
.map{
  height:126px;border-radius:var(--r-md);border:1px solid var(--line);
  background:var(--surface);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:34px 34px;
  display:grid;place-items:center;color:var(--ink-4);font-size:12px;
  position:relative;
}
.map__pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);color:var(--ink)}

.reveal{
  border:1.5px solid var(--ink);border-radius:var(--r-md);
  padding:14px;background:var(--surface);
  display:flex;flex-direction:column;gap:10px;
}
.reveal__row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.reveal__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.reveal__code{
  font-size:28px;font-weight:700;letter-spacing:.16em;
  font-variant-numeric:tabular-nums;
  filter:blur(8px);user-select:none;transition:filter .35s var(--ease-soft);
}
.reveal.is-open .reveal__code{filter:none;user-select:text}
.reveal.is-open .reveal__cta{display:none}
.reveal__done{display:none;font-size:12px;color:var(--ink-3)}
.reveal.is-open .reveal__done{display:block}

.quick__foot{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:10px;margin-top:auto;
}
.quick__foot .mute{font-size:12px;margin-left:auto}

/* Плотнее, чем на отдельной странице купона: в попапе всё должно
   помещаться в один экран без прокрутки — это решение с созвона. Запас
   считаем по ноутбучной высоте окна (~660px), а не по большому монитору:
   при трёх условиями в две строки и перенесённых ссылках компании контент
   как раз упирался в край и включал прокрутку. */
.quick .company{padding:9px;gap:10px}
.quick .company__logo{width:36px;height:36px}
.quick .company__req{font-size:11.5px}
.quick .socials{gap:5px}
.quick .soc{height:28px;padding:0 9px}
.quick .block-label{margin-bottom:5px}
.quick .terms{gap:6px}
.quick .terms li{font-size:13.5px;line-height:1.38;gap:9px}
.quick .terms li::before{margin-top:7px}
.quick .reveal{padding:10px 12px;gap:7px}
.quick .reveal__code{font-size:24px}
.quick .map{height:78px}
.quick .btn{height:36px;padding:0 14px}
.quick .btn--lg{height:40px;padding:0 18px}

@media (max-width:820px){
  .quick{flex-direction:column;width:calc(100vw - 20px);max-height:92vh}
  .quick__media{
    flex:0 0 auto;height:26vh;min-height:170px;padding:10px;
    border-right:0;border-bottom:1px solid var(--line);
  }
  .quick__photo{width:auto;height:100%;max-width:100%}
  .quick__value{font-size:32px;left:14px;bottom:12px}
  .quick__side{padding:16px 18px 16px}
  .quick h3{font-size:20px}
  /* В варианте left промокод лежит в верхней колонке — на телефоне она
     становится горизонтальной полосой, поэтому даём ей расти по контенту */
  .quick-left .quick__media{height:auto;padding:12px;gap:10px}
  .quick-left .quick__photo{height:24vh;min-height:150px}
}

/* ==========================================================================
   Страница купона (нужна под SEO — свой адрес у каждого купона)
   ========================================================================== */
.coupon{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
  gap:44px;padding:20px 0 0;align-items:start;
}
@media (max-width:900px){.coupon{grid-template-columns:1fr;gap:24px}}

.coupon__left{position:sticky;top:88px}
@media (max-width:900px){.coupon__left{position:static}}
.coupon__hero{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);
  background:var(--surface-2);
  background-image:repeating-linear-gradient(-45deg, rgba(21,21,20,.05) 0 1px, transparent 1px 10px);
  border:1px solid var(--line);overflow:hidden;
}
.coupon__hero .coupon__value{
  position:absolute;left:26px;bottom:26px;
  font-size:clamp(44px,5vw,68px);font-weight:700;letter-spacing:-.045em;line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}
/* Вместо фото места — ссылки компании: это то, что реально ведёт
   к повторным заказам, и метрику переходов нельзя проёбывать */
.coupon__links{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.coupon__links .soc{
  width:auto;height:40px;padding:0 14px;border-radius:var(--r-pill);
  font-size:13px;font-weight:500;gap:8px;justify-content:flex-start;
}

/* На телефоне не отдаём весь первый экран под картинку —
   заголовок и промокод должны быть рядом. Блок идёт после базовых
   правил намеренно: иначе aspect-ratio перебивает переопределение. */
@media (max-width:900px){
  .coupon__hero{aspect-ratio:auto;height:44vh;min-height:250px}
  .coupon__value{left:18px;bottom:18px}
}

.coupon__right{display:flex;flex-direction:column;gap:20px}
.coupon__right h1{
  margin:0;font-size:clamp(26px,3.2vw,40px);line-height:1.1;
  letter-spacing:-.032em;font-weight:600;
}
.coupon__meta{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);flex-wrap:wrap}
/* На отдельной странице купона карта крупнее: место освободилось после
   удаления фотографий заведения, и Виль просил её увеличить */
.coupon__right .map{height:230px}
@media (max-width:900px){.coupon__right .map{height:180px}}

.reveal--big{padding:18px}
.reveal--big .reveal__code{font-size:clamp(30px,4vw,40px)}
.coupon__actions{display:flex;gap:10px;flex-wrap:wrap}

.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:start}
@media (max-width:820px){.about{grid-template-columns:1fr;gap:16px}}
.about p{margin:0 0 10px;color:var(--ink-2);line-height:1.6;max-width:62ch}
/* Вместо фотографий заведения — ссылки на сайт и соцсети компании.
   Фото не масштабируется на все ниши (удалённые услуги, франшизы под
   одним юрлицом), а переходы туда — ключевая метрика проекта. */
.about__links{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px;background:var(--surface);
  display:flex;flex-direction:column;gap:10px;
}
.about__links .soc{width:100%;justify-content:flex-start;height:42px;font-size:13.5px}
/* Правила купона на полной странице. Шаги слева, оговорки справа: сценарий
   читается сам собой, а частные вопросы не разрастаются в стену текста и не
   выглядят списком запретов. */
.rules{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:820px){.rules{grid-template-columns:1fr;gap:22px}}

.steps{
  margin:0;padding:0;list-style:none;counter-reset:step;
  display:flex;flex-direction:column;gap:18px;
}
.steps li{
  counter-increment:step;position:relative;padding-left:44px;
  font-size:14px;color:var(--ink-2);line-height:1.55;
}
.steps li::before{
  content:counter(step);
  position:absolute;left:0;top:-1px;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--ink);color:var(--bg);
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
}
.steps li b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:3px}

.rules__list{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px;background:var(--surface);
}
@media (max-width:640px){.rules__list{padding:16px}}

.seo{
  border-top:1px solid var(--line);margin-top:44px;padding-top:24px;
  color:var(--ink-2);font-size:14px;line-height:1.65;max-width:78ch;
}
.seo h2{font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--ink);margin:0 0 10px}
.seo p{margin:0 0 10px}

/* ==========================================================================
   Подвал
   ========================================================================== */
.footer{margin-top:64px;border-top:1px solid var(--line);background:var(--surface)}
.footer__cta{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--line);
}
.footer__cta p{margin:0 auto 0 0;font-size:18px;font-weight:500;letter-spacing:-.02em;max-width:34ch}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding:34px 0}
@media (max-width:900px){.footer__cols{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:560px){.footer__cols{grid-template-columns:1fr}}
.fcol h4{margin:0 0 12px;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.fcol ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.fcol a{color:var(--ink-2);font-size:14px}
.fcol a:hover{color:var(--ink)}
.fcol p{margin:0 0 12px;color:var(--ink-2);font-size:14px}
.footer__socials{
  display:flex;flex-wrap:wrap;gap:28px;
  padding:24px 0;border-top:1px solid var(--line);
}
.footer-soc-group{display:flex;flex-direction:column;gap:10px}
.footer-soc-group__label{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
.footer-soc-group__row{display:flex;flex-wrap:wrap;gap:8px}
.footer__legal{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding:16px 0 26px;border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-4);
}
.erid{margin-left:auto;font-size:10px;color:var(--ink-4);text-align:right;line-height:1.4}

/* ==========================================================================
   Модалка выбора города
   ========================================================================== */
.modal{
  /* grid-template-columns:minmax(0,1fr) — без него единственная неявная
     колонка считает свою ширину по контенту (max-content), и «100%» в
     ширине .modal__box во время этого расчёта разрешается как «auto»
     (правило CSS Grid для процентов при неопределённой базе). Кнопка
     «Да, я в городе …» не переносится (.btn — white-space:nowrap), её
     ширина и раздувала колонку — окно вылезало за экран на узких
     телефонах, хотя max-width вроде бы стоял. С явной колонкой в 100%
     контейнера база становится определённой, и min(520px,100%) считается
     от неё правильно. */
  position:fixed;inset:0;z-index:90;
  display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px;
  background:rgba(21,21,20,.42);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .26s var(--ease-soft);
}
.modal.is-on{opacity:1;pointer-events:auto}
.modal__box{
  width:min(520px,100%);background:var(--bg);border-radius:var(--r-xl);
  box-shadow:var(--shadow-3);padding:28px;
  transform:translateY(14px) scale(.97);
  transition:transform .3s var(--ease);
}
.modal.is-on .modal__box{transform:none}
.modal__box h3{margin:0 0 6px;font-size:22px;letter-spacing:-.025em;font-weight:600}
.modal__box p{margin:0 0 18px;color:var(--ink-2);font-size:14px}
/* Основное действие попапа — подтвердить определённый город, выбор
   другого идёт вторым шагом */
/* Перенос текста разрешён (в обход .btn{white-space:nowrap}): «Да, я в
   городе Ростов-на-Дону» на 320px не помещается в одну строку ни при
   каком разумном размере окна, и раньше просто вылезал за кнопку. */
.modal__yes{width:100%;white-space:normal;text-align:center;line-height:1.3;padding:10px 18px}
.modal__or{
  margin:18px 0 10px;font-size:12px;color:var(--ink-4);
  display:flex;align-items:center;gap:10px;
}
.modal__or::before,.modal__or::after{
  content:"";flex:1;height:1px;background:var(--line);
}
.city-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.city-list button{
  padding:9px 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  font-size:14px;font-weight:500;color:var(--ink-2);
  transition:transform .18s var(--ease),border-color .18s,color .18s,background .18s;
}
.city-list button:hover{transform:translateY(-2px);border-color:var(--ink-3);color:var(--ink)}
.city-list button.is-active{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* «Вся область» — не ещё один город в общем ряду, а другая выдача:
   домашний город остаётся прежним, меняется область поиска. */
.city-region{
  width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:13px 16px;margin-bottom:12px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-md);
  transition:border-color .18s,background .18s;
}
.city-region:hover{border-color:var(--ink-3);background:var(--surface)}
.city-region b{font-size:15px;font-weight:600;color:var(--ink)}
.city-region span{font-size:12px;color:var(--ink-4)}
.city-region.is-active{background:var(--ink);border-color:var(--ink)}
.city-region.is-active b{color:var(--bg)}
.city-region.is-active span{color:rgba(255,255,255,.6)}

/* Город без каталога честно помечен «скоро»: пустая выдача хуже, чем
   прямой ответ, что сервис туда ещё не пришёл */
.city-list button.is-soon{
  color:var(--ink-4);border-style:dashed;cursor:default;
  display:inline-flex;align-items:center;gap:7px;
}
.city-list button.is-soon:hover{transform:none;border-color:var(--line);color:var(--ink-4)}
.city-soon{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4)}
.modal__note{margin:0 0 18px!important;font-size:12px!important;color:var(--ink-4)!important}

/* ==========================================================================
   Подгрузка ленты
   ========================================================================== */
.loader{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:34px 0 10px;color:var(--ink-4);font-size:13px;
}
.loader__dot{width:6px;height:6px;border-radius:50%;background:var(--ink-4);animation:pulse 1.1s infinite}
.loader__dot:nth-child(2){animation-delay:.15s}
.loader__dot:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

.feed-end{color:var(--ink-3);font-size:14px;text-align:center}

/* ---------- Пустая выдача ----------
   Ниша в городе пустая. Сверху короткий ответ, под ним два выхода
   плитками равного веса: вся область и соцсети проекта по области. */
.empty-feed{
  padding:44px 24px 40px;
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--surface);
  animation:cardIn .42s var(--ease) backwards;
}
.empty-feed__head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;max-width:640px;margin:0 auto}
.empty-feed__title{margin:0;text-wrap:balance;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.empty-feed__text{margin:0;font-size:15px;color:var(--ink-2)}

.empty-feed__ways{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  max-width:880px;margin:28px auto 0;
}
.empty-feed__way{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:22px 24px 24px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--bg);color:var(--ink);
}
.empty-feed__way--link{transition:border-color .18s,box-shadow .18s,transform .18s var(--ease)}
.empty-feed__way--link:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1);transform:translateY(-2px)}
.empty-feed__k{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.empty-feed__k svg{width:14px;height:14px}
.empty-feed__name{font-size:18px;font-weight:600;letter-spacing:-.015em;line-height:1.3}
.empty-feed__sub{font-size:13.5px;color:var(--ink-2);line-height:1.45}
.empty-feed__btn{margin-top:auto;height:44px;padding:0 20px;font-size:14.5px}
.empty-feed__way--link .empty-feed__sub{margin-bottom:14px}
.empty-feed__socs{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px;margin-top:auto;padding-top:14px}
.empty-feed .empty-feed__soc{height:44px;padding:0 14px 0 7px;gap:8px;font-size:13.5px;background:var(--bg)}
.empty-feed__soc .soc-ic{width:30px;height:30px;border-radius:50%;overflow:hidden}
/* Ч/Б: значки соцсетей серым кругом с белым знаком — без цвета брендов */
.empty-feed__soc .soc-ic__bg{fill:var(--ink-3)}
.empty-feed__soc .soc-ic__g{fill:#fff}
.empty-feed__soc .soc-ic--img{object-fit:cover;filter:grayscale(1)}

@media (max-width:760px){
  .empty-feed{padding:28px 16px 18px;border-radius:var(--r-lg)}
  .empty-feed__title{font-size:19px}
  .empty-feed__text{font-size:14px}
  .empty-feed__ways{grid-template-columns:1fr;gap:12px;margin-top:22px}
  .empty-feed__way{padding:18px}
  .empty-feed__btn{width:100%}
}

.card-in{animation:cardIn .42s var(--ease) backwards}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:820px){
  :root{--pad:16px}
  .header__in{gap:8px}
  .logo{font-size:16px}
  .city-btn{padding:8px 10px}
  .city-btn span:not([data-icon]):not(.chev){display:none}
  /* На телефоне нет наведения — «Разместить купон» и вход в ЛК
     остаются иконками, чтобы шапка не разваливалась на две строки */
  .header-cta{padding:0;width:42px;justify-content:center}
  .header-cta__label{display:none}
  .head-socials{display:none}
  /* компактный поиск уезжает на свою строку */
  .header__in{flex-wrap:wrap;height:auto;padding-block:10px}
  .header .search--compact{order:5;flex:1 0 100%;max-width:none}

  .hero__in{padding-block:22px 18px;gap:18px}
  .hero h1{font-size:28px;max-width:none}
  .hero__sub{font-size:14px}
    .search input{font-size:16px}

  /* Лента категорий уходит под правый край экрана — видно, что её листают */
  .tags-row{gap:8px}
  .tags{margin-right:calc(-1 * var(--pad));padding:4px var(--pad) 4px 0}
  .tag,.dd{flex:0 0 auto}
  /* На узком экране закреплённые кнопки съедали всю строку и категорий
     не было видно. Сжимаем их, чтобы за ними читались сами категории. */
  .tag--all{width:42px;padding:0}
  .tag--all .tag__label,
  .tag--all .chev{display:none}
  /* Маркетплейсы/Для бизнеса тоже закреплены (не в скролле) — сжимаем
     до иконки со счётчиком и стрелкой, иначе они одни съедят всю строку */
  .tag--featured{width:auto;padding:0 10px;gap:4px}
  .tag--featured .tag__label{display:none}
  .dd__panel--l1{width:min(260px,calc(100vw - 32px))}
  .tag--near .tag__label{display:none}
  .tag--near .tag__label-s{display:inline}
  .tags-row{gap:8px}

  /* Фильтры каталога — одной лентой со свайпом, иначе занимают четыре строки */
  .toolbar{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-right:calc(-1 * var(--pad));padding-right:var(--pad);
  }
  .toolbar::-webkit-scrollbar{display:none}
  .toolbar .select{flex:0 0 auto}
  .toolbar__count{display:none}

  .section{padding:24px 0 0}
  .card__value{font-size:26px;bottom:62px}
  .card__title{font-size:14px}
  .footer__cta p{font-size:16px}
  .footer{margin-top:44px}
}


/* ==========================================================================
   Адрес страницы, подзаголовок раздела и переход «город ↔ область»
   ==========================================================================
   ЧПУ выведен на экран намеренно: по ТЗ v7.0 §3.2.11 раздел L1 обязателен
   в пути, а одна и та же ниша в разных разделах даёт разные страницы —
   на согласовании это видно только через сам адрес. */
.chpu{
  margin:10px 0 0;font-size:12px;color:var(--ink-4);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.01em;
}
.cat-hint{margin:10px 0 0;font-size:14px;color:var(--ink-2);max-width:62ch}
.cat-hint:empty{display:none}


/* Строка ниш в каталоге: та же лента, что на главной, но без плашек
   разделов — раздел здесь уже выбран */

/* Купон маркетплейса действует в корзине, а не по адресу: вместо карты —
   площадка и ссылка на карточку товара */
.market-where{
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);
  padding:16px;display:flex;flex-direction:column;gap:6px;align-items:flex-start;
}
.market-where b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.market-where span{font-size:13px;color:var(--ink-3)}
.market-where .soc{margin-top:6px}

/* ==========================================================================
   Категория 18+: блюр до подтверждения возраста (созвон 14.09)
   ========================================================================== */
body.is-adult-lock #feed,
body.is-adult-lock #couponRoot{filter:blur(18px);pointer-events:none;user-select:none}
.adult{text-align:center}
.adult__mark{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;border:2px solid var(--ink);
  font-size:20px;font-weight:700;letter-spacing:-.02em;
}
.adult__act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.adult__act .btn{flex:1 1 160px}