/* ==========================================================================
   Все купоны — правки по созвону 21.09.2026. Заход 1: сквозная база
   ==========================================================================
   Слой поверх design.css; index-design-2.html остаётся нетронутым эталоном
   «как было», чтобы разницу можно было показать двумя ссылками.

   Что решили на созвоне и что сделано здесь:

   1. Градиенты убрать. Вилл: на разных устройствах они отрисовываются
      по-разному, «если есть возможность оставить фон конкретной заливки
      в конкретном цветовом коде — я всегда за это».
   2. Розовый — из палитры вон. Розовый не базовый цвет, сочетать его
      придётся с чем попало, и он «будет вылазить везде». База: белый,
      серый, чёрный плюс фирменный #DD443C.
   3. Разноцветные значки ниш — в один цвет. Цветовой код оправдан, только
      если у цвета есть общепринятое значение; здесь его нет, а «мясо»
      получается. Сделано в app.js (CAT_TONES_MONO).
   4. Выделение — через инверсию, а не через новый оттенок. В покое белая
      кнопка с красными буквами, активная — красная с белыми.

   Дополнительно: ?pics=wild подставляет нарочно неудобные картинки —
   проверка, о которой просил Вилл («не читери, сделай самый дикий вариант»).
   ========================================================================== */

/* ==========================================================================
   Палитра
   ==========================================================================
   Все служебные тона были тёплыми, с примесью красного: серый уходил в
   розовый, подложки — в бледно-розовый. Отсюда и градиенты: чтобы связать
   эту теплоту с цветными значками. Обнуляем примесь — серый становится
   нейтральным, и связывать больше нечего. Красный трогаем только один:
   сам бренд остаётся как есть. */
.dz3{
  /* Бывшие «бренд-оттенки» — теперь просто нейтральные ступени серого.
     Имена оставлены: на них завязано полторы сотни мест в design.css,
     и переименование дало бы диф на весь файл вместо правки цвета. */
  --brand-50:#F5F5F5;
  --brand-100:#E9E9E9;
  --brand-300:#C7C7C7;

  --ink:#1B1B1B;
  --ink-2:#565656;
  --ink-3:#8A8A8A;
  --ink-4:#B6B6B6;
  --line:#E8E8E8;
  --line-strong:#D3D3D3;
  --surface:#F6F6F6;
  --surface-2:#ECECEC;
}

/* ==========================================================================
   Первый экран
   ==========================================================================
   Был розовый радиальный градиент справа сверху — ровно то, что Вилл
   попросил убрать первым делом. Фон белый. */
.dz3 .dz-hero--lite{background:#fff}

/* Плашка «Бесплатно · без регистрации»: красный текст на белом, без
   рамки — правка Ивана 22.09.2026. Обводка добавляла первому экрану
   лишний контур рядом с полем поиска и рядом категорий. */
.dz3 .dzl__eyebrow{
  background:#fff;color:var(--brand);
  box-shadow:none;
  padding:0;
}

/* ==========================================================================
   Категории: инверсия вместо оттенков
   ==========================================================================
   Правило одно на все кнопки строки: покой — белая с чёрными буквами,
   наведение — красная обводка и красные буквы, выбрано — сплошной красный
   с белыми буквами. Никаких промежуточных заливок. */
.dz3 .tag{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.dz3 .tag:hover{background:#fff;border-color:var(--brand);color:var(--brand)}
.dz3 .tag.is-active{background:var(--brand);border-color:var(--brand);color:#fff}

/* «Все категории» — тот же принцип, но кнопка крупная и ведущая,
   поэтому в покое у неё чёрная обводка, как у закреплённых разделов. */
.dz3 .tag--all{background:#fff;border-color:var(--line-strong)}
.dz3 .tag--all:hover,
.dz3 #allCats.is-open .tag--all{background:var(--brand);border-color:var(--brand);color:#fff}
.dz3 .tag--all:hover .tag__sub,
.dz3 #allCats.is-open .tag--all .tag__sub{color:rgba(255,255,255,.8)}
/* Значок «Все категорий» — красный круг с белым знаком (правка Ивана
   22.09.2026): это главная точка входа в категории, и она обозначается
   заливкой, а не бледной подложкой, как у рядовых ниш. */
.dz3.cats-a .tags-row__main .tag--all > [data-icon]:not(.chev),
.dz3.cats-b .tags-row__main .tag--all > [data-icon]:not(.chev){
  background:var(--brand);color:#fff;
}
.dz3.cats-a .tags-row__main .tag--all > [data-icon]:not(.chev) svg,
.dz3.cats-b .tags-row__main .tag--all > [data-icon]:not(.chev) svg{color:#fff}

/* Под курсором и с раскрытым списком кнопка сама становится красной —
   тогда круг внутри отделяется от неё белой полупрозрачной заливкой. */
.dz3 .tag--all:hover > [data-icon]:not(.chev),
.dz3 #allCats.is-open .tag--all > [data-icon]:not(.chev){background:rgba(255,255,255,.2);color:#fff}
.dz3 .tag--all:hover > [data-icon]:not(.chev) svg,
.dz3 #allCats.is-open .tag--all > [data-icon]:not(.chev) svg{color:#fff}
.dz3 .tag--all:focus-visible{box-shadow:0 0 0 4px var(--brand-100)}

/* Закреплённые разделы («Маркетплейсы», «Для бизнеса»): под курсором
   кнопка заливалась тёмным, поэтому её знаки красились в белый. В dz3
   кнопка остаётся белой — и белые знаки на ней просто пропадали: и
   стрелка, и значок раздела. Красим их заодно с буквами. */
.dz3 .tag--featured:hover .chev,
.dz3 .tag--featured:hover .tag__n,
.dz3 .dd--l1.is-open .tag--featured .chev,
.dz3 .dd--l1.is-open .tag--featured .tag__n{color:var(--brand)}
.dz3 .tag--featured:hover svg,
.dz3 .dd--l1.is-open .tag--featured svg{color:inherit}
.dz3 .tag--featured:hover > [data-icon]:not(.chev) svg,
.dz3 .dd--l1.is-open .tag--featured > [data-icon]:not(.chev) svg{color:var(--brand)}

/* Круги у закреплённых разделов оставались сиреневым и синим — последние
   цветные пятна в строке категорий, ради которых и затевалась моно-правка
   21.09.2026. Приводим разделы к виду ниш: круг #F9F9F9, знак красный
   (правка Ивана 24.09.2026). Цвета вариантов А, Б и В из design.css
   перекрываем здесь, чтобы index-design-2 остался эталоном «как было». */
.dz3 .tags-row__main .dd--l1[data-l1="marketplace"] .tag > [data-icon]:not(.chev),
.dz3 .tags-row__main .dd--l1[data-l1="for-business"] .tag > [data-icon]:not(.chev){
  background:#F9F9F9;color:var(--brand);
}
.dz3 .tags-row__main .dd--l1[data-l1="marketplace"] .tag > [data-icon]:not(.chev) svg,
.dz3 .tags-row__main .dd--l1[data-l1="for-business"] .tag > [data-icon]:not(.chev) svg{
  color:var(--brand);
}

/* Значок ниши: полупрозрачный серый кружок с красным знаком, в выбранном
   состоянии инвертируется вместе с кнопкой. Цвета задаёт app.js. Обводки
   нет (правка Ивана 22.09.2026) — круг и контур вокруг него давали на
   кнопке два контура подряд. */
.dz3 .tag--niche .tag__ic{box-shadow:none}
.dz3 .tag--niche.is-active .tag__ic{background:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.dz3.cats-b .tag--niche .tag__ic{box-shadow:none}

/* «Рядом со мной» — единственная кнопка ряда, которая сразу красная:
   это не ниша, а действие. Инверсия у неё зеркальная. */
.dz3 .tags-row__sub .tag--near{
  background:#fff;border-color:var(--brand);color:var(--brand);font-weight:600;
}
.dz3 .tags-row__sub .tag--near:hover,
.dz3 .tags-row__sub .tag--near.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.dz3 .tags-row__sub .tag--near svg{color:currentColor}

/* ==========================================================================
   Карточка купона
   ==========================================================================
   Под фото лежали шесть цветных градиентов-заглушек и пара световых бликов
   поверх. Заглушка нужна только на те доли секунды, пока грузится снимок,
   и цветной ей быть незачем — ступени серого. */
.dz3 .card__media{background:#EDEDED}
.dz3 .card__media::before{content:none}
.dz3 .card:nth-child(6n+2) .card__media{background:#E6E6E6}
.dz3 .card:nth-child(6n+3) .card__media{background:#F0F0F0}
.dz3 .card:nth-child(6n+4) .card__media{background:#E2E2E2}
.dz3 .card:nth-child(6n+5) .card__media{background:#EAEAEA}
.dz3 .card:nth-child(6n+6) .card__media{background:#E8E8E8}

/* Затемнение сверху и снизу у фото — оставляем: это не украшение, а то,
   что держит читаемость белых плашек и метки erid на чужом снимке.
   Возвращаем его и поверх серой заглушки тоже, раз бликов больше нет. */
.dz3 .card__media.has-photo::before,
.dz3 .quick__photo.has-photo::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.34) 100%);
}

/* Тень при наведении была красноватой — на зелёной или синей картинке
   это читается как ореол. Нейтральная. */
.dz3.cards-wb .card:hover .card__media{box-shadow:0 22px 40px -20px rgba(0,0,0,.45)}

/* ==========================================================================
   Лента, рекомендации, попап
   ==========================================================================
   Везде одна и та же пара: розовая подложка плюс розовый радиальный
   градиент поверх. Оставляем ровную серую заливку. */
.dz3 .recos{background:var(--surface)}

/* Засветление у края ленты рекомендаций доходило только до границы
   обёртки, а сам ряд выступает за неё на 4px (padding:4px; margin:0 -4px —
   чтобы тени карточек не срезались). В этот просвет карточка выезжала
   незатушёванной. Растягиваем затухание на те же 4px. */
.dz3 .rail-wrap::before{left:-4px}
.dz3 .rail-wrap::after{right:-4px}
.dz3 .quick__media,
body.dz3:not(.quick-left) .quick__media{background:var(--surface)}
.dz3 .quick__photo{background:#EDEDED}

/* Подложка карты: сетка была прорисована красным по светлому — на фоне
   серого интерфейса давала розовый оттенок. Серая сетка. */
.dz3 .quick .map{
  background-color:var(--surface);
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
}

/* Промокод: был тёплый градиент и красная тень. По той же логике инверсии
   — белое поле в красной рамке. Вес даёт рамка, а не заливка. */
.dz3 .quick .reveal{
  border-color:var(--brand);
  background:#fff;
  box-shadow:none;
}

/* Логотип компании-заглушка: на сером кружке буквы были почти невидимы. */
.dz3 .company__logo{background:var(--surface-2);color:var(--ink-3)}

/* Блок компании держит одну строку при любом названии (правка Ивана
   22.09.2026). Раньше длинное название толкало ряд значков вниз или
   сжимало его: название переносилось, блок рос. Теперь текстовая колонка
   ужимается и обрезается многоточием, а шесть значков стоят рядом и не
   сжимаются — они сами по себе ссылка, и переходы по ним считаются. */
.dz3 .quick .company{flex-wrap:nowrap}
.dz3 .quick .company__text{flex:1 1 auto;min-width:0}
.dz3 .quick .company__name,
.dz3 .quick .company__req{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dz3 .quick .socials--icons{flex:0 0 auto;flex-wrap:nowrap;margin-left:auto}

/* ==========================================================================
   Полоса «Для бизнеса» в подвале
   ==========================================================================
   Вилл этот блок не разбирал, но правило про градиенты общее: поверх
   фирменного красного лежал второй, светло-красный, радиальный градиент
   плюс шумовое зерно. Ровная заливка фирменным цветом — тот самый
   «конкретный цвет в конкретном коде». Пунктирные кольца вокруг шара
   оставлены: это белое по красному, то есть базовая палитра. */
.dz3 .dz-biz{
  background:var(--brand);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.45);
}
.dz3 .dz-biz::before{content:none}

/* ==========================================================================
   Служебное: режим ?pics=wild
   ==========================================================================
   Чтобы на созвоне было видно, что смотрим специально испорченный вариант,
   а не «так получилось». В обычном режиме метки нет. */
.pics-wild body::after{
  content:"Режим проверки: нарочно неудобные картинки";
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:99;
  padding:8px 16px;border-radius:999px;
  background:#1B1B1B;color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.01em;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.6);
  pointer-events:none;
}