/* ==========================================================================
   Все купоны — правки по созвону 24.09.2026 (утро), публичная часть
   ==========================================================================
   Слой поверх design-3*.css. Отдельным файлом по той же причине, что и
   прошлые заходы: видно, что пришло с этого созвона, и откатывается целиком.
   Прототип (index.html, coupon.html) эти стили не подключает.
   Полный список правок — notes/pravki-2026-09-24.md.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Выгода — снова «билетик»
   --------------------------------------------------------------------------
   Коля попросил вернуть вырезанную плашку: на мобиле она цепляет, и Вилл
   с этим согласился. Прошлые претензии Вилла — «не влезет текстовый
   оффер» и «чужеродная» — снимаем тем, что билетик растёт по содержимому
   и переносит длинный оффер на вторую строку, а не режет его. Проверка —
   mechanics-design.html: одна карточка в пяти механиках скидки.
   Белая плашка и круг остаются на ?value=plate и ?value=round. */
.val-ticket .dz3.cards-wb .card__badge{
  left:10px;bottom:10px;
  /* справа остаётся место под фирменный знак в углу снимка */
  max-width:calc(100% - 46px);
  padding:7px 16px 8px;border-radius:10px;
  background:var(--brand);color:#fff;
  font-size:16px;line-height:1.12;text-align:left;
  /* Слова не рвём посреди: «бесплатн-о» на телефоне читалось как ошибка.
     Перенос — только между словами. */
  white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none;
}
/* Длинный оффер мельче: «Первый визит бесплатно» не должен перекрыть
   полкартинки. Класс ставит app.js по длине текста. */
.val-ticket .dz3.cards-wb .card__badge.is-long{font-size:14px;padding:7px 15px 8px}
/* Узкая карточка — телефон (две колонки по ~170px) и шесть в ряд на
   десктопе. Билетик мельче, чтобы «Бесплатная диагностика» вставала
   целыми словами, а «Каждая пятая чашка кофе в подарок» — в три строки,
   а не в пять. */
@container (max-width: 235px){
  .val-ticket .dz3.cards-wb .card__badge{
    left:8px;bottom:8px;max-width:calc(100% - 36px);
    padding:5px 11px 6px;font-size:14px;
  }
  .val-ticket .dz3.cards-wb .card__badge.is-long{font-size:12px;padding:5px 11px 6px;line-height:1.15}
}

/* Та же форма в попапе — чтобы при раскрытии объект не менялся */
.val-ticket .dz3 .quick__value{
  max-width:calc(100% - 32px);
  line-height:1.08;white-space:normal;
  -webkit-mask:
    radial-gradient(circle 7px at left 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at right 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 7px at left 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 7px at right 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.val-ticket .dz3 .quick__value.is-long{font-size:clamp(20px,2vw,26px)}

/* --------------------------------------------------------------------------
   Уведомление «Код скопирован»
   --------------------------------------------------------------------------
   «Забрать купон» сам кладёт код в буфер. Без подтверждения человек не
   поймёт, что это случилось, и начнёт выделять код руками. */
.cp-toast{
  position:fixed;left:50%;bottom:24px;z-index:120;
  transform:translate(-50%,16px);
  max-width:calc(100% - 32px);
  padding:14px 22px;border-radius:14px;
  background:var(--ink);color:#fff;
  font-size:16px;font-weight:500;line-height:1.3;text-align:center;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease-soft),transform .25s var(--ease);
}
.cp-toast.is-on{opacity:1;transform:translate(-50%,0)}
/* «Скопировано» прямо на кнопке «Забрать купон» */
.dz3 .is-copied{background:#1f7a45!important;border-color:#1f7a45!important;color:#fff!important;pointer-events:auto}
.dz3 .is-copied .copied__ic{font-weight:700;margin-right:2px}

/* --------------------------------------------------------------------------
   Выбор города: крестик и поиск
   -------------------------------------------------------------------------- */
.dz3 #cityModal .modal__box{position:relative}
.dz3 .modal__x{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface);color:var(--ink-2);
  transition:background .18s,color .18s;
}
.dz3 .modal__x:hover{background:var(--surface-2);color:var(--ink)}
/* Заголовок не должен заезжать под крестик */
.dz3 #cityModal h3{padding-right:44px}

.dz3 .city-search{
  display:flex;align-items:center;gap:10px;
  height:46px;margin:0 0 12px;padding:0 14px;
  border:1px solid var(--line-strong);border-radius:14px;
  color:var(--ink-3);background:#fff;
  transition:border-color .18s;
}
.dz3 .city-search:focus-within{border-color:var(--ink)}
.dz3 .city-search input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:none;
  font:inherit;font-size:15px;color:var(--ink);
}
.dz3 .city-search input::placeholder{color:var(--ink-3)}
.dz3 .city-list button[hidden],
.dz3 [data-region-row][hidden]{display:none}
.dz3 .city-miss{margin:-6px 0 18px;font-size:13.5px;color:var(--ink-3)}

/* --------------------------------------------------------------------------
   Попап и страница купона
   -------------------------------------------------------------------------- */
/* Строка над кодом: слева подпись блока капсом, справа срок обычным
   текстом — одним цветом, дата чуть плотнее. Раньше всё шло одной строкой
   капсом в двух цветах и двух весах, и она читалась грязно. */
.dz3 .reveal > .block-label{display:flex;align-items:baseline;justify-content:space-between;gap:4px 12px;flex-wrap:wrap}
.dz3 .quick__until{
  font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink-2);
}
.dz3 .quick__until b{font-weight:600;color:var(--ink)}

/* После «Забрать купон» блок не перестраивается (правка Ивана 25.09):
   «Забрать» гаснет, «Поделиться» становится главной, и обе стоят где
   стояли. Строка «Код скопирован…» — мелко, под кнопками, во всю ширину
   блока: раньше она вставала между кнопками и сдвигала «Поделиться». */
.dz3 .reveal__note{display:none;margin-top:10px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}
.dz3 .reveal.is-open .reveal__note{display:block}
.dz3 .reveal__note b{font-weight:600;color:var(--brand);white-space:nowrap}

/* Телефон вместо ИНН — ссылкой: с телефона нажал и позвонил. Телефон и
   режим работы — одной строкой; не влезает режим — обрезается он, а не
   телефон. */
.dz3 .company__line{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap}
.dz3 .company__line .dot{flex:none}
.dz3 .company__hours{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--ink-3)}
.dz3 .company__phone{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.dz3 .company__phone svg{color:var(--ink-3);flex:none}
.dz3 .company__phone:hover{color:var(--brand)}
.dz3 .company__phone:hover svg{color:var(--brand)}

/* Артикул товара с копированием — внутри той же плашки, что площадка и
   кнопка к товару, нижней строкой под тонкой линией (Иван 25.09: «одной
   плашкой»). Плашка переносит ряд, поэтому строка встаёт на всю ширину. */
.dz3 .market-where--logo{flex-wrap:wrap}
.dz3 .market-sku{
  flex:1 0 100%;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:2px;padding:12px 0 0;
  border-top:1px solid var(--line-strong);
}
.dz3 .market-sku__l{font-size:12.5px;color:var(--ink-3)}
.dz3 .market-sku__v{
  font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
}
.dz3 .market-sku__copy{background:#fff;
  margin-left:auto;height:34px;padding:0 12px;gap:6px;
  font-size:13px;font-weight:500;color:var(--ink);
}

/* Выгода на странице купона — тем же билетиком, что в ленте и попапе.
   Белая плашка остаётся на ?value=plate. */
.val-ticket .dz3 .cpd__value{
  max-width:calc(100% - 40px);
  background:var(--brand);color:#fff;box-shadow:none;
  line-height:1.05;white-space:normal;
  -webkit-mask:
    radial-gradient(circle 8px at left 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at right 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 8px at left 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 8px at right 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.val-ticket .dz3 .cpd__value.is-long{font-size:clamp(24px,2.4vw,32px)}

/* --------------------------------------------------------------------------
   Код поверх снимка — белым билетиком (правка Ивана 25.09)
   --------------------------------------------------------------------------
   Та же форма, что у плашки с выгодой: вырезы по бокам. Код и знак —
   одна белая плашка, вырезы стоят на линии отрыва между ними, как у
   настоящего купона. Код красный, под ним срок с годом: купон уносят
   скриншотом, и на скриншоте должно быть видно, до какого числа он живёт.
   Высота нижней части с логотипом задана жёстко (--tk-foot): по ней
   считается положение вырезов. */
.dz3 .card__code{--tk-foot:34px;--tk-r:7px}
.dz3 .card__code-val,
.dz3 .card__code-date,
.dz3 .card__code-mark{width:100%;box-sizing:border-box}
.dz3 .card__code-val{
  border-radius:14px 14px 0 0;color:var(--brand);
  -webkit-mask:
    radial-gradient(circle var(--tk-r) at left bottom, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tk-r) at right bottom, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--tk-r) at left bottom, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tk-r) at right bottom, transparent 98%, #000) right / 51% 100% no-repeat;
}
/* Дата — внутри верхней половины билетика, под кодом. Верхняя половина
   собрана из двух элементов, поэтому вырезы — у нижнего из них. */
.dz3 .card__code-date{
  display:block;margin-top:-1px;padding:0 14px 11px;
  background:#fff;color:var(--ink-2);
  font-size:11.5px;font-weight:500;letter-spacing:0;text-align:center;
  -webkit-mask:
    radial-gradient(circle var(--tk-r) at left bottom, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tk-r) at right bottom, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--tk-r) at left bottom, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tk-r) at right bottom, transparent 98%, #000) right / 51% 100% no-repeat;
}
.dz3 .card__code-date:empty{display:none}
/* Когда дата есть, вырез уходит с кода на неё — у кода маска снимается */
.dz3 .card__code-val:has(+ .card__code-date:not(:empty)){-webkit-mask:none;mask:none;padding-bottom:4px}
.dz3 .card__code-mark{
  height:var(--tk-foot);padding-top:0;padding-bottom:0;
  border-top:1.5px dashed var(--line-strong);
  -webkit-mask:
    radial-gradient(circle var(--tk-r) at left top, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tk-r) at right top, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle var(--tk-r) at left top, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle var(--tk-r) at right top, transparent 98%, #000) right / 51% 100% no-repeat;
}
/* В попапе и на странице купона билетик крупнее */
.dz3 .quick__code{--tk-foot:40px;--tk-r:9px}
.dz3 .quick__code .card__code-val,
.dz3 .quick__code .card__code-date,
.dz3 .quick__code .card__code-mark{width:min(100%,300px)}
.dz3 .quick__code .card__code-date{font-size:13px;padding:0 20px 14px}
.dz3 .quick__code .card__code-mark{padding-top:0;padding-bottom:0}

/* «Компания в сети» на странице купона: значки здесь всегда цветные, а MAX
   подключён картинкой и гасился в серый фильтром — выбивался из ряда */
.dz3 .cpd-contact .soc-ic--img{filter:none;opacity:1}

/* «Компания в сети» — по четыре в строку (Иван 25.09): восемь каналов
   двумя рядами вместо четырёх. Решает ширина самого блока, а не экрана:
   на ноутбуке блок узкий, и в четыре колонки «vk.com/example» рвался
   посреди слова — там остаётся по две. */
.dz3 .cpd-about__links{container-type:inline-size}
.dz3 .cpd-contact > span:last-child{word-break:normal;overflow-wrap:normal}
@container (min-width:560px){
  .dz3 .cpd-contacts{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .dz3 .cpd-about__links .cpd-contact{padding:14px 12px;gap:12px;border-radius:18px}
  .dz3 .cpd-contact .soc-ic,.dz3 .cpd-contact .cpd-ic{width:36px;height:36px}
  .dz3 .cpd-contact > span:last-child{font-size:13px}
  .dz3 .cpd-contact small{font-size:10px;letter-spacing:.06em}
}

/* Описание компании на странице купона: три строки и «Показать ещё» */
.dz3 .cpd-lead{margin:16px 0 20px}
.dz3 .cpd-lead .cpd-about__lead{
  margin:0;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.dz3 .cpd-lead.is-open .cpd-about__lead{display:block;-webkit-line-clamp:unset;line-clamp:none;overflow:visible}
.dz3 .cpd-lead__more{
  margin-top:6px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:600;color:var(--brand);
}
.dz3 .cpd-lead__more:hover{text-decoration:underline;text-underline-offset:3px}
.dz3 .cpd-lead__more[hidden]{display:none}

/* «Компания в сети» на узких телефонах (до ~400px): в двух колонках
   длинные значения вроде «rutube.ru/example» не помещались и вылезали
   поверх соседней карточки, а не переносились и не обрезались — грид
   давал карточке ширину, но сам текст внутри неё не сжимался до неё
   (min-width:auto у флекс-элемента). Обрезаем многоточием: значение
   короче ссылки — приемлемо, а наползающий текст на соседа — нет. */
/* <b> обёрткой значения — только для точечной обрезки ниже, само по
   себе оно не должно ничего утяжелять (родитель уже font-weight:600) */
.dz3 .cpd-contact__v{font-weight:inherit}
/* Текстовый столбик карточки — контентной ширины (align-items:flex-start
   у .cpd-contact, чтобы иконка не растягивалась). Из-за этого ему нечего
   было обрезать: box был ровно по содержимому. stretch отдаёт ему всю
   ширину карточки, обрезка ниже начинает работать по делу. */
.dz3 .cpd-contact > span:last-child{align-self:stretch}
@media (max-width:400px){
  .dz3 .cpd-contact,
  .dz3 .cpd-contact > span:last-child{min-width:0}
  .dz3 .cpd-contact__v{
    display:block;min-width:0;max-width:100%;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}

/* На телефоне внизу закреплена полоса промокода — уведомление поднимаем
   над ней, иначе оно закрывает кнопки */
@media (max-width:820px){
  body:has(.quick.is-on) .cp-toast,
  body:has(.cpd) .cp-toast{bottom:190px}
}

/* --------------------------------------------------------------------------
   Плашки на фото крупнее (Иван 25.09)
   --------------------------------------------------------------------------
   На карточке после сужения столбика до 24px всё выглядело мелко — три
   плашки (минуты, столбик метрик, выгода) толще на 4px. В попапе плашки
   минут и просмотров — той же высоты, что круглый крестик (36px). */
.dz3 .card__near{height:28px;padding:0 10px;font-size:12px}
/* Столбик метрик сужали только для телефона — на десктопе он прежний */
@media (max-width:820px){
  .dz3 .card__stats{width:28px;padding:9px 0;gap:10px}
  .dz3 .card__stat svg{width:15px;height:15px}
  .dz3 .card__stat b{font-size:10px}
}
.val-ticket .dz3.cards-wb .card__badge{padding:9px 16px 10px}
.val-ticket .dz3.cards-wb .card__badge.is-long{padding:9px 15px 10px}
@container (max-width: 235px){
  .val-ticket .dz3.cards-wb .card__badge,
  .val-ticket .dz3.cards-wb .card__badge.is-long{padding:7px 11px 8px}
}

.dz3 .quick__badges .card__near{height:36px;padding:0 13px;font-size:13px;border-radius:var(--r-pill)}
.dz3 .quick__badges .quick__views{gap:5px}
.dz3 .quick__badges .quick__views svg{width:16px;height:16px}
/* На телефоне крестик лежит на фото — ставим его в один ряд с плашками,
   с тем же отступом от края снимка (10px рамки + 12px) */
@media (max-width:820px){
  body.dz3:not(.quick-left) .quick__close{top:22px;right:22px}
}

/* Выгода в попапе — той же высоты, что плашки минут и просмотров (36px),
   и с тем же отступом от края фото (Иван 25.09). Длинный оффер
   переносится и становится выше — иначе не влезет. */
.val-ticket .dz3 .quick .quick__photo .quick__value{
  left:12px;bottom:12px;min-height:36px;box-sizing:border-box;
  display:flex;align-items:center;
  padding:6px 16px;border-radius:10px;
  font-size:18px;line-height:1.1;white-space:nowrap;
}
.val-ticket .dz3 .quick .quick__photo .quick__value.is-long{font-size:14px;white-space:normal;padding:7px 15px}

/* --------------------------------------------------------------------------
   Страница купона: фото устроено как в попапе (Иван 25.09)
   --------------------------------------------------------------------------
   Слева сверху минуты и просмотры, под ними метка erid, слева снизу
   выгода — всё высотой 36px и в 12px от края. Справа сверху, где в попапе
   крестик, — «Поделиться» того же размера. */
.dz3 .cpd__photo .erid-stamp{
  left:14px;right:auto;top:56px;max-width:calc(100% - 28px);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cpd__share{
  position:absolute;top:12px;right:12px;z-index:2;
  width:36px;height:36px;padding:0;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--shadow-1);
  transition:color .18s,transform .18s var(--ease);
}
.cpd__share svg{width:17px;height:17px}
.cpd__share:hover{color:var(--brand);transform:translateY(-1px)}
.val-ticket .dz3 .cpd .cpd__photo .cpd__value{
  left:12px;bottom:12px;min-height:36px;box-sizing:border-box;max-width:calc(100% - 60px);
  display:flex;align-items:center;
  padding:6px 16px;border-radius:10px;
  font-size:18px;line-height:1.1;white-space:nowrap;
}
.val-ticket .dz3 .cpd .cpd__photo .cpd__value.is-long{font-size:14px;white-space:normal;padding:7px 15px}

/* Бейдж «Проверено тайным покупателем»: справа от плашки выгоды, на той
   же линии и той же высоты (Иван 30.09). Форма та же — билетик с вырезами,
   белый с зелёной галочкой: красная плашка выгоды остаётся главной.
   Место, высоту и узкий вариант (одна галочка) ставит app.js. */
.verified-flag{
  position:absolute;left:10px;bottom:10px;z-index:3;box-sizing:border-box;
  display:inline-flex;align-items:center;gap:6px;
  padding:0 14px 0 11px;border-radius:10px;
  background:#fff;color:var(--ink);
  font-size:14px;font-weight:700;line-height:1;white-space:nowrap;
  -webkit-mask:
    radial-gradient(circle 5px at left 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 5px at right 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask:
    radial-gradient(circle 5px at left 50%, transparent 98%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 5px at right 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  pointer-events:none;
}
.verified-flag i{
  display:grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;
  background:#1f9d55;color:#fff;font-style:normal;font-size:11px;line-height:1;
}
.verified-flag.is-compact{padding:0 11px;gap:0}
.verified-flag.is-compact .verified-flag__t{display:none}
@container (max-width: 235px){
  .verified-flag{font-size:12px;padding:0 10px 0 8px}
  .verified-flag i{width:15px;height:15px;font-size:9.5px}
}

/* «Проверено» над плашкой выгоды — когда рядом со скидкой места нет
   (телефон). Та же форма купона с вырезами, что на десктопе, и та же
   высота, что у скидки: её ставит app.js (Иван 30.09). */
.verified-flag.is-side{left:auto;bottom:auto;padding:0 12px 0 10px;gap:6px;font-size:13px}
.verified-flag.is-side i{width:15px;height:15px;font-size:9.5px}


/* Плашка маркетплейса в углу — в одном стиле с «мин от вас» (Иван 30.09):
   те же 10px от верха и края, та же высота 28px и шрифт 12px. Раньше
   цветная плашка сидела внутри обёртки со своими отступами и была мельче. */
.dz3 .card__near.card__near--mp{top:10px;left:10px;height:28px;padding:0;border-radius:var(--r-pill);overflow:hidden}
.dz3 .card__near--mp .mp-name{height:28px;padding:0 10px;font-size:12px;font-weight:600;letter-spacing:0}
@container (max-width: 150px){
  .verified-flag.is-side{padding:0 7px;gap:4px;font-size:11px}
  .verified-flag.is-side i{width:13px;height:13px;font-size:8.5px}
}
/* Самые узкие карточки: без кружка — слово важнее значка, и вырезы
   купона его не задевают */
@container (max-width: 150px){
  .verified-flag.is-side i{display:none}
  .verified-flag.is-side{padding:0 9px}
}
/* Галочка — рисунком, а не символом «✓»: символ сидел в кружке не по центру */
.verified-flag i svg{display:block}

/* Все плашки на фото узкой карточки (телефон) — 28px в высоту, как «мин
   от вас» и плашка маркетплейса (Иван 30.09). Скидка в одну строку —
   ровно 28px; длинный оффер в несколько строк растёт по тексту, иначе его
   обрежет. «Проверено» берёт высоту скидки сам (app.js). */
@container (max-width: 235px){
  .val-ticket .dz3.cards-wb .card__badge:not(.is-long){
    height:28px;padding-top:0;padding-bottom:0;
    display:inline-flex;align-items:center;line-height:1;font-size:14px;
  }
}

/* «Открыть карточку товара» — текст по центру кнопки (Иван 30.09): отступ
   слева 10px был под значок площадки, значка давно нет, и надпись съезжала
   влево. Кнопка — по центру своего ряда по высоте. */
.dz3 .market-where--logo .market-where__go{padding:0 18px;justify-content:center;text-align:center;align-self:center;height:40px;min-height:0}