/**
 * spy.market — доводка темы под лендинг.
 *
 * Цветовая схема движка задаёт акцентный цвет. Здесь то, что схемами не
 * задаётся: шрифт, нейтральные тона и мелочи, из-за которых кабинет
 * выглядел «чужой админкой», а не продолжением главной страницы.
 *
 * Файл живёт у плагина и объявлен в его манифесте: удаление плагина
 * уносит стили вместе с папкой. Своей схемы в теме движка мы не держим —
 * подложить туда файл значит оставить его там навсегда.
 *
 * Подключается последним, поэтому !important нужен только там, где Metronic
 * сам его ставит.
 */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap');

:root {
    /* Те же токены, что на лендинге — чтобы цвет значил одно и то же везде. */
    --sm-bg:       #F3F4F7;
    --sm-card:     #FFFFFF;
    --sm-ink:      #14161C;
    --sm-ink-mid:  #4B5160;
    --sm-ink-mute: #868D9D;
    --sm-rule:     #E3E6EC;
    --sm-go:       #00A950;
    --sm-go-soft:  #E2F6EB;
    --sm-hot:      #F5163B;
    --sm-hot-soft: #FFE7EB;
}

/* ── Шрифт ──────────────────────────────────────────────────────────────
   Montserrat из темы и Onest с лендинга рядом смотрятся как два разных
   продукта. Onest ещё и заметно уже на цифрах — а цифры здесь главное. */
body,
.btn,
.form-control,
.form-select,
.modal-title,
.card-title,
h1, h2, h3, h4, h5, h6 {
    font-family: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ── Полотно ───────────────────────────────────────────────────────────── */
body {
    background-color: var(--sm-bg);
    color: var(--sm-ink);
}

.card,
.card.card-flush {
    border: 1px solid var(--sm-rule);
    box-shadow: none;
}

/* ── Цифры ──────────────────────────────────────────────────────────────
   Цены и остатки стоят столбиками, и без табличных цифр колонка «пляшет».
   Мелочь, которая отличает таблицу с деньгами от таблицы с текстом. */
.fw-bolder,
.fs-2hx,
.fs-2x,
td.text-end,
.table td,
code {
    font-variant-numeric: tabular-nums;
}

/* ── Смысл цвета ────────────────────────────────────────────────────────
   Зелёное — «дешевле», красное — «дороже». Один и тот же язык на лендинге,
   в кабинете и в уведомлениях бота. */
.badge-light-success {
    color: var(--sm-go) !important;
    background-color: var(--sm-go-soft) !important;
}
.badge-light-danger {
    color: var(--sm-hot) !important;
    background-color: var(--sm-hot-soft) !important;
}
.text-success { color: var(--sm-go) !important; }
.text-danger  { color: var(--sm-hot) !important; }

/* ── Таблица товаров ───────────────────────────────────────────────────── */
.table-row-dashed tr {
    border-bottom-color: var(--sm-rule);
}
.table > thead th {
    color: var(--sm-ink-mute);
    letter-spacing: .04em;
}
.table tbody tr:hover {
    background-color: rgba(0, 169, 80, .035);
}

/* ── Пустое состояние ───────────────────────────────────────────────────
   Первый экран нового пользователя. Дышать ему важнее, чем плотности. */
.card-body.text-center.py-20 h2 {
    letter-spacing: -.02em;
}

/* ── Подсказка про Telegram ─────────────────────────────────────────────
   Пунктирная рамка вместо заливки: это приглашение, а не тревога. */
.border-dashed {
    border-color: var(--sm-go) !important;
    background-color: rgba(0, 169, 80, .03);
}

/* ── Мелочи ─────────────────────────────────────────────────────────────── */
.progress { background-color: var(--sm-rule); }
.form-control-solid {
    background-color: #F6F7F9;
    border: 1px solid var(--sm-rule);
}
.form-control-solid:focus {
    background-color: #fff;
    border-color: var(--sm-go);
}
a { text-decoration: none; }

/* ── Регион пользователя ────────────────────────────────────────────────
   Плашка тревожная, но не кричащая: человек ничего не сломал, ему просто
   надо кое-что сказать. Кнопка стоит под текстом, а не у правого края —
   на широком экране прижатая вправо кнопка уезжает из поля зрения,
   и выглядит это как обрезанная вёрстка. */
.sm-region-alert {
    background-color: rgba(255, 199, 0, .07);
    border: 1px dashed rgba(255, 199, 0, .55);
}
.sm-region-alert__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .5rem;
    font-size: 1.25rem;
    color: #B58500;
    background-color: rgba(255, 199, 0, .18);
}

/* Кружок под значком в модалке — чтобы иконка не висела в пустоте.
   Иконка шрифтовая, а не эмодзи: эмодзи рисует система, и на Windows,
   Android и iOS это три разных картинки, ни одна из которых не совпадает
   с оформлением сайта. */
.sm-region-modal__icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    border-radius: 50%;
    color: var(--bs-primary, #06b6d4);
    background-color: rgba(6, 182, 212, .12);
}

/* Список регионов длинный — не даём ему растянуть окно. */
#sm_region_modal .form-select { max-height: 3.25rem; }

/* ── График цены ────────────────────────────────────────────────────────
   Подсказка — обычный HTML поверх холста, а не текст, нарисованный внутри
   него: на холсте шрифт не подхватывает сглаживание системы и выглядит
   грязно, а тут он такой же, как везде на странице. */
.sm-chart {
    position: relative;
    width: 100%;
}
.sm-chart canvas {
    display: block;
    cursor: crosshair;
}
.sm-chart__tip {
    position: absolute;
    z-index: 5;
    min-width: 10rem;
    padding: .625rem .875rem;
    border-radius: .5rem;
    background: #1B1B29;
    color: #fff;
    pointer-events: none;          /* иначе подсказка ловит курсор сама */
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18);
    transition: left .06s linear, top .06s linear;
}
.sm-chart__tip-price {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
}
.sm-chart__tip-date {
    font-size: .75rem;
    opacity: .8;
    margin-top: .125rem;
}
.sm-chart__tip-note {
    font-size: .6875rem;
    opacity: .55;
    margin-top: .25rem;
}

/* ── Блок вывода: полоса по смыслу ───────────────────────────────────────
   Ответ на единственный вопрос, ради которого открывают карточку, — брать
   сейчас или ждать — был написан цветным шрифтом внутри белого блока,
   неотличимого от соседних, и терялся среди них. Полоса красит саму
   карточку и видна раньше, чем прочитан заголовок.

   Язык тот же, что в списке: зелёное — стоит брать, красное — сейчас
   дорого, серое — цена обычная, сообщать не о чем. Имена тонов приходят
   из `Advice` (`success`/`danger`/`secondary`), поэтому правило одно на
   все исходы, а не набор частных случаев.

   Полоса слоем, а не рамкой: рамка сдвинула бы содержимое карточки на
   свою толщину относительно соседних карточек. */
.sm-adv { position: relative; overflow: hidden; }

.sm-adv::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--sm-ink-mute, #868d9d);
}

.sm-adv--success::before { background: var(--sm-go,  #00a950); }
.sm-adv--danger::before  { background: var(--sm-hot, #f5163b); }

/* Справочный блок: полоса синяя независимо от вывода. Зелёное и красное
   на странице значит «брать / ждать»; история длительности на этот вопрос
   не отвечает, а стояла рядом в тех же цветах. */
.sm-adv--info::before { background: var(--kt-primary, #009ef7); }

/* Значок в круге, а не голой иконкой в строке.
   Голая иконка ростом в две строки — это просто крупная закорючка слева
   от текста: она не отделена от него ничем и читается частью заголовка.
   Круг делает её значком — предметом со своими границами, — и заодно даёт
   тону второе место, где он звучит, не отнимая цвет у букв. */
.sm-adv__ico {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--kt-gray-100, #f9f9f9);
    color: var(--sm-ink-mute, #868d9d);
}

.sm-adv--success .sm-adv__ico { background: #e8f8ef; color: var(--sm-go,  #00a950); }
.sm-adv--danger  .sm-adv__ico { background: #fdeaed; color: var(--sm-hot, #f5163b); }
.sm-adv--info    .sm-adv__ico { background: #e8f6fe; color: var(--kt-primary, #009ef7); }
.sm-adv__ico--info { background: #fff; color: var(--kt-primary, #009ef7); }

/* Полка фактов — под чертой и во всю ширину карточки.
   Раньше числа стояли в общем ряду с подписью вывода и читались её
   продолжением. Черта говорит, что ниже — не продолжение мысли, а то, из
   чего она получена.

   `flex` вместо `inline-flex` от `.sm-mm` — ради полной ширины: у
   `inline-flex` полка сжимается по содержимому, и черта над ней обрывалась
   на середине карточки, будто что-то не догрузилось.

   Селектор ДВОЙНОЙ (`.sm-mm.sm-adv__facts`), и это не украшение. С одним
   классом специфичность равна `.sm-mm`, и спор решает порядок в файле —
   а `.sm-mm` объявлен ниже и побеждал. В коде это было незаметно: я и
   написал здесь, что правило стоит после. Увидел браузером — полка 342 px
   вместо 628. Специфичность не зависит от того, кто куда переехал. */
.sm-mm.sm-adv__facts {
    display: flex;
    flex-wrap: wrap;
    row-gap: .875rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--sm-rule, #e3e6ec);
}

/* Числа здесь крупнее, чем над графиком: там они справка к картинке, а
   тут — сам ответ на вопрос «дорого ли сейчас». */
.sm-mm.sm-adv__facts .sm-mm__v { font-size: 1.0625rem; }

/* Перенос ломает вертикальные разделители: первая плашка новой строки
   оказывается с чертой слева, у края. Границу рисуем справа и убираем у
   последней — тогда при любом переносе строка кончается без хвоста. */
.sm-mm.sm-adv__facts .sm-mm__it + .sm-mm__it { border-left: 0; }
.sm-mm.sm-adv__facts .sm-mm__it { border-right: 1px solid var(--sm-rule, #e3e6ec); }
.sm-mm.sm-adv__facts .sm-mm__it:last-child { border-right: 0; padding-right: 0; }

/* ── Выбор срока над графиком ────────────────────────────────────────────
   Кнопки, а не календарь: вопрос звучит «за какой срок посмотреть», и
   календарь заставляет переводить его в пару конкретных дат.

   Выбранная — заливкой, остальные плоские: так виден ответ, а не набор
   возможностей. Рамки нет ни у одной, иначе ряд читается как форма для
   заполнения. */
.sm-range {
    display: inline-flex;
    gap: .25rem;
}

.sm-range__b {
    border: 0;
    background: transparent;
    border-radius: .35rem;
    padding: .25rem .6rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--sm-ink-mute, #868d9d);
    cursor: pointer;
    white-space: nowrap;
}

.sm-range__b:hover { background: var(--kt-gray-100, #f9f9f9); }

.sm-range__b.is-on {
    color: var(--sm-ink, #14161c);
    background: var(--kt-gray-200, #f1f1f4);
}

/* Шапка карточки складывает заголовок, кнопки и числа в одну строку.
   На узком экране они переносятся; тогда прижимаем к левому краю, чтобы
   ряд не висел посреди пустоты. */
@media (max-width: 767.98px) {
    #sm_chart_days { margin-top: .5rem; }
    .sm-range__b:first-child { margin-left: -.6rem; }
}

/* ── Минимум и максимум над графиком ─────────────────────────────────────
   Подпись мелким сверху, число под ней. Раньше стояли два числа со
   стрелками: направление стрелка сообщала, а «чего это минимум» — нет.

   Среднего здесь НЕТ намеренно: «обычно» на этой странице уже есть в
   блоке совета, и оно другое по построению — другой срок и другой срез.
   Подробности в `price-chart.tpl`.

   Цвет — тот же, что у точек на графике: зелёный низ, красный верх.
   Разделитель тонкой линией, а не заливкой: это справка о границах
   картинки, спорить по громкости с ценой наверху ей незачем. */
.sm-mm {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
}

.sm-mm__it {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 0 .75rem;
    line-height: 1.25;
}

.sm-mm__it + .sm-mm__it {
    border-left: 1px solid var(--sm-rule, #e3e6ec);
}

.sm-mm__it:last-child { padding-right: 0; }

/* Слева, а не справа: над графиком плашки прижаты к правому краю карточки,
   а под выводом идут от левого — там текст, и число должно начинаться под
   его началом. Первой убираем отступ, иначе она стоит не по общей левой
   линии блока. */
.sm-mm--left .sm-mm__it { align-items: flex-start; }
.sm-mm--left .sm-mm__it:first-child { padding-left: 0; }

.sm-mm__k {
    font-size: .6875rem;
    color: var(--sm-ink-mute, #868d9d);
}

.sm-mm__v {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--sm-ink, #14161c);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sm-mm__it--min .sm-mm__v { color: var(--sm-go,  #00a950); }
.sm-mm__it--max .sm-mm__v { color: var(--sm-hot, #f5163b); }

/* На узком экране шапка карточки переносит заголовок и цифры на разные
   строки; прижимаем ряд к левому краю, иначе он висит посреди пустоты. */
@media (max-width: 575.98px) {
    #sm_chart_range { margin-top: .5rem; }
    .sm-mm__it:first-child { padding-left: 0; }
}

/* Флаг страны в списке туров.
   Картинка, а не эмодзи: флаговые эмодзи Windows не рисует вовсе — Chrome
   показывает вместо них две буквы в квадратах. Файлы лежат в репозитории,
   наружу за ними никто не ходит. Рамка нужна белым флагам (Япония), иначе
   на светлом фоне от них остаётся только красный круг. */
.sm-flag {
    width: 1.15rem;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
    vertical-align: -.15em;
}

/* Ряд фильтра над таблицей предложений: подпись, селект и пояснение в
   одну строку. TomSelect по умолчанию тянется на всю ширину родителя —
   без ограничения выпадающий список номеров растягивался через всю
   карточку и ломал строку. */
.sm-filter-row .ts-wrapper {
    flex: 0 0 auto;
    min-width: 220px;
}

/* Окно вылета. Поле readonly, потому что дату выбирают календарём, а не
   набирают руками, — но тема гасит любой readonly до 0.7 прозрачности,
   и поле выглядит отключённым. Здесь оно как раз рабочее и кликабельное,
   поэтому непрозрачность возвращаем и ставим курсор-указатель. */
#sm_dates[readonly] {
    opacity: 1 !important;
    cursor: pointer;
}

/* Календарь окна вылета: выбранный день из соседнего месяца.
   Плагин красит «чужие» дни серым (класс off), а выбранному дню даёт
   активную заливку — и 31 августа, показанное в сетке сентября, выходило
   серым по бирюзовому: не прочитать. Такой день видно в обеих сетках,
   и в обеих он должен читаться. */
.daterangepicker td.off.active,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.daterangepicker td.active,
.daterangepicker td.start-date,
.daterangepicker td.end-date {
    color: #fff !important;
}

/* Дни внутри промежутка — тёмным по бледной заливке, включая «чужие». */
.daterangepicker td.off.in-range {
    color: #3f4254 !important;
}

/* Недоступные дни (раньше сегодня) — приглушённо, но не в цвет фона. */
.daterangepicker td.disabled,
.daterangepicker option.disabled {
    color: #a1a5b7;
    text-decoration: line-through;
}

/* ── Длительности тура ───────────────────────────────────────────────────
   Были кнопками в ряд: выбранная — сплошная заливка акцентом, а подпись
   «выгоднее всего» на ней зелёная. Зелёное по бирюзовому не читается
   вовсе, и именно самое важное место страницы оказывалось нечитаемым.

   Заливку убрали совсем. Выбранная карточка отличается рамкой и лёгким
   фоном, а весь текст на ней остаётся тёмным — контраст не зависит от
   того, какая на сайте цветовая схема. Значок «выгоднее за ночь» тогда
   спокойно живёт на светлом в обоих состояниях.

   Сетка вместо ряда: на телефоне четыре кнопки в строку переносились
   как попало, и карточки прыгали по высоте. */
.sm-durs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    /* Зазор с запасом: значок приподнят над рамкой, и при тесной сетке
       он ложился на карточку сверху — читался как ярлык чужой строки. */
    gap: 18px 10px;
}

.sm-durs .sm-dur {
    position: relative;
    display: block;
    padding: 14px 16px 12px;
    border: 1px solid var(--sm-rule);
    border-radius: 12px;
    background: var(--sm-card);
    color: var(--sm-ink);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.sm-durs .sm-dur:hover {
    color: var(--sm-ink);
    border-color: var(--sm-ink-mute);
    transform: translateY(-1px);
}

/* Выбранная: рамка в два пикселя и бледная заливка акцентом.
   Внутренняя тень вместо толстой рамки — иначе соседние карточки
   подпрыгивают на пиксель при переключении. */
.sm-durs .sm-dur.on {
    border-color: var(--bs-primary, #00A950);
    box-shadow: inset 0 0 0 1px var(--bs-primary, #00A950);
    background: rgba(var(--bs-primary-rgb, 0, 169, 80), .05);
}

.sm-durs .sm-dur .sm-dur-n {
    color: var(--sm-ink);
    display: block;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
}

.sm-durs .sm-dur .sm-dur-sum {
    color: var(--sm-ink);
    display: block;
    margin-top: 6px;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}

.sm-durs .sm-dur .sm-dur-per {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--sm-ink-mid);
}

.sm-durs .sm-dur .sm-dur-cnt {
    display: block;
    margin-top: 6px;
    font-size: .75rem;
    color: var(--sm-ink-mute);
}

/* Значок над карточкой. Приподнят на рамку: так он читается как ярлык
   этой карточки, а не как ещё одна строка внутри неё. */
.sm-durs .sm-dur .sm-dur-flag {
    position: absolute;
    top: -9px;
    left: 12px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    background: var(--sm-rule);
    color: var(--sm-ink-mid);
}

.sm-durs .sm-dur .sm-dur-flag--go {
    background: var(--sm-go-soft);
    color: var(--sm-go);
}

/* Карточке со значком нужен воздух сверху, иначе ярлык наезжает на
   число ночей. */
.sm-durs .sm-dur--flag {
    padding-top: 20px;
}

/* ── Список туров на узком экране ────────────────────────────────────────
   Восемь столбцов на телефон не помещаются: таблица уезжала за край, и
   первый столбец был обрезан по половине буквы. Лишние столбцы прячем,
   а их содержимое уходит подписью под дату. */
.sm-row-note {
    margin-top: 2px;
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    /* На телефоне карточки становятся строками.
       Столбиком из четырёх строк каждая занимала треть экрана, и разом
       помещалось меньше двух длительностей — а весь смысл в том, чтобы
       сравнить их глазами. Строкой влезают все: слева длительность,
       справа обе цены. */
    .sm-durs {
        grid-template-columns: 1fr;
        gap: 18px 0;
    }

    .sm-durs .sm-dur {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding: 10px 14px;
    }

    .sm-durs .sm-dur--flag {
        padding-top: 12px;
    }

    .sm-durs .sm-dur .sm-dur-n   { grid-column: 1; grid-row: 1; }
    .sm-durs .sm-dur .sm-dur-cnt { grid-column: 1; grid-row: 2; margin-top: 2px; }

    .sm-durs .sm-dur .sm-dur-sum {
        grid-column: 2;
        grid-row: 1;
        margin-top: 0;
        text-align: right;
    }

    .sm-durs .sm-dur .sm-dur-per {
        grid-column: 2;
        grid-row: 2;
        text-align: right;
    }

    /* Значок уходит вправо: слева под ним длительность, и на узкой
       строке он ложился ровно на неё. */
    .sm-durs .sm-dur .sm-dur-flag {
        left: auto;
        right: 12px;
    }

    /* Таблица без внутренних отступов по краям: на 360 пикселях каждый
       из них — это отъеденное слово. */
    .table-responsive > .table > :not(caption) > * > *:first-child {
        padding-left: 0;
    }

    .table-responsive > .table > :not(caption) > * > *:last-child {
        padding-right: 0;
    }
}

/* Цена в шапке карточки. На узком экране «195 018 ₽» разрывалось между
   «195» и «018 ₽»: число читалось как два разных. */
.sm-price-top {
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .sm-price-top {
        font-size: 1.75rem !important;
    }
}

/* ── Состояние отслеживания: следим / выключено / в архиве ───────────────
   Всё решает один атрибут `data-state` на строке. Кнопки и подписи в
   разметке лежат все сразу, показывает нужные CSS — поэтому переключение
   кнопкой не пересобирает ячейку скриптом, а меняет одну строку в
   атрибуте. Пересборка разметки в JS означала бы второй экземпляр
   шаблона, который однажды разъедется с первым. */
/* Вес селекторов здесь считан, а не подобран — и пересчитывать его надо
   при каждой правке.

   У темы есть `.btn.btn-icon { display: inline-flex }` — это ДВА класса,
   вес (0,2,0). Простое `.sm-act { display: none }` — один класс, (0,1,0),
   и оно проигрывает, хотя файл подключается последним: порядок решает
   только при РАВНОМ весе. Снаружи это выглядело так, что прятать не
   выходит, а показывать выходит (там вес случайно совпал), — то есть в
   каждой строке горели все пять кнопок разом.

   Поэтому: у «спрятать» вес (0,2,2) — строго больше темы; у «показать»
   (0,3,2) — строго больше «спрятать». Ни одно из трёх правил не зависит
   от того, в каком порядке они стоят. */
tr[data-state] td .sm-act,
tr[data-state] td .sm-tag {
    display: none;
}

tr[data-state="active"] td .sm-act.sm-act--pause,
tr[data-state="paused"] td .sm-act.sm-act--resume,
tr[data-state="active"] td .sm-act.sm-act--archive,
tr[data-state="paused"] td .sm-act.sm-act--archive,
tr[data-state="archived"] td .sm-act.sm-act--restore,
tr[data-state="archived"] td .sm-act.sm-act--drop,
/* Связать — в любом состоянии: связка про товар, а не про то, следим мы
   за ним сейчас или он лежит в архиве. */
tr[data-state] td .sm-act.sm-act--link {
    display: inline-flex;
}

/* «выключено» подписью больше нет — про это состояние говорят бледная
   строка, красная полоса слева и зелёный пуск вместо паузы. Осталась
   только метка архива: архив лежит в своей вкладке, и там она не
   повторяет соседей, а называет, куда человек попал. */
tr[data-state="archived"] td .sm-tag.sm-tag--archived {
    display: inline-block;
}

/* ЦВЕТ КНОПКИ ДОЛЖЕН ДОХОДИТЬ ДО ЗНАЧКА.
   Тема красит `i` внутри `.btn-light` отдельным правилом, поэтому
   `text-danger` на самой кнопке до значка не доходил: измерено — кнопка
   #f5163b, значок #7e8299, то есть весь ряд оставался серым, а
   перекраска существовала только в разметке.
   `inherit` вместо своего цвета: так значок берёт и цвет покоя, и цвет
   под курсором, который задаёт `btn-active-light-*`. Одно правило вместо
   пары на каждое состояние. */
.sm-act i { color: inherit !important; }

/* Колокольчик: показываем ту кнопку, которая соответствует состоянию.
   Тот же приём, что у пары «пауза/пуск», и по той же причине: обе в
   разметке всегда, переключение — сменой атрибута на строке, без
   пересборки ячейки скриптом. */
tr[data-notify] td .sm-act.sm-act--mute,
tr[data-notify] td .sm-act.sm-act--unmute {
    display: none;
}

tr[data-notify="1"] td .sm-act.sm-act--mute,
tr[data-notify="0"] td .sm-act.sm-act--unmute {
    display: inline-flex;
}

/* Приглушаем строку, но не до неразборчивости: следить за ней перестали,
   а прочитать всё равно нужно — по ней и решают, включать обратно или
   удалять насовсем. Кнопки не гасим: неактивна строка, а не они, и
   бледная кнопка «вернуть» читается как «нажать нельзя». */
tr[data-state="paused"] > td,
tr[data-state="archived"] > td {
    opacity: .6;
}

tr[data-state="paused"] > td:last-child,
tr[data-state="archived"] > td:last-child {
    opacity: 1;
}

/* ── Выключено: полоса слева вместо подписи ──────────────────────────────
 *
 * Бледности мало. Рядом живёт другое состояние — «нет в наличии», — и оно
 * тоже приглушает часть строки; два разных положения дел читались как одно
 * «что-то тут не так».
 *
 * Развели по признаку, а не по силе. Выключенное — про ВСЮ строку: бледная
 * целиком плюс полоса у левого края. Отсутствие товара — про одно место в
 * ней: цена приглушена, а на месте зелёного призыва стоит чип «нет в
 * наличии».
 *
 * Полоса КРАСНАЯ, и это не про опасность. Красный здесь значит «стоп» —
 * то же, что на светофоре и на кнопке остановки: слежка не идёт. Соседний
 * красный, у чипа «нет в наличии», говорит о том же роде вещей — «сейчас
 * нельзя», — так что язык не двоится.
 *
 * Подписи «выключено» под названием больше нет: строка и так бледная,
 * рядом стоит красная полоса, а в кнопках вместо паузы горит зелёный пуск.
 * Три признака на одно состояние — это уже не объяснение, а настойчивость.
 *
 * Полосу рисуем отдельным слоем (`::before`), а не тенью и не рамкой.
 * Рамка сдвинула бы содержимое ячейки на свою толщину, и строки запрыгали
 * бы относительно соседних. Тень заняла бы то же свойство, которым на
 * узком экране закрепляется первая колонка, — и одно молча отменяло бы
 * другое. */
tr[data-state="paused"] > td:first-child,
tr[data-state="archived"] > td:first-child {
    position: relative;
}

tr[data-state="paused"] > td:first-child::before,
tr[data-state="archived"] > td:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sm-hot, #f5163b);
}

/* Архив — не «стоп», а «убрано с глаз». Серым: за ним не следят, но и
   останавливать было нечего. */
tr[data-state="archived"] > td:first-child::before {
    background: var(--sm-ink-mute, #868d9d);
}

/* ── Нет в наличии: цена справочная, а не предложение ────────────────────
 *
 * Строка спорила сама с собой: слева зелёная «Лучшая цена» и «−1 726 ₽»,
 * справа «нет». Первое зовёт заказывать, второе говорит, что нельзя, и
 * оба одинаково громкие — человек успевает захотеть раньше, чем дочитает
 * до правой части.
 *
 * ГАСИМ НЕ СТРОКУ, А ПРЕДЛОЖЕНИЕ. Целиком строку гасить нельзя: ровно так
 * выглядит выключенное отслеживание (см. выше), и два разных состояния
 * стали бы одним на вид. Здесь товар отслеживается, с ним всё в порядке —
 * просто купить его сейчас нельзя. Поэтому название, площадка и продавец
 * остаются в полную силу, а бледнеет только то, что зовёт покупать: цена
 * и её отклонение от обычной.
 *
 * Значок совета не бледнеет, а СЕРЕЕТ. Полупрозрачный зелёный — всё ещё
 * зелёный, то есть всё ещё зовёт; серый не зовёт никуда, сохраняя и
 * форму, и корону, и своё место в строке. Вернётся в наличие — вернётся
 * и цвет, ничего не переедет. */
tr[data-stock="0"] .sm-price,
tr[data-stock="0"] .sm-dev {
    opacity: .45;
}

/* Чип «нет в наличии» — на месте значка совета, а не рядом с ним.
   Форма та же, что у «Лучшей цены»: глаз ищет ответ в одном и том же
   месте под ценой и находит там либо призыв, либо отказ.

   СЕРЫЙ, а не красный. Красный в этой таблице уже занят и означает две
   вещи разом: «стоп» у полосы выключенной строки и «подорожало» у числа
   рядом. Третий смысл на тот же цвет — и цвет перестаёт значить что-либо.
   А тут и нет тревоги: товар кончился, человек ничего не сломал и делать
   ему нечего. Серое — это «сейчас нельзя», сказанное спокойно; рядом с
   приглушённой ценой оно и читается как выключенное предложение. */
.sm-out {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
    border-radius: .35rem;
    padding: .1rem .45rem;
    white-space: nowrap;
    color: var(--sm-ink-mute, #868d9d);
    background: var(--kt-gray-200, #f1f1f4);
}

.sm-out i { font-size: .7rem; }

/* ── Инструкция «как добавить из приложения» ─────────────────────────────
   Меню «Поделиться» рисуем сами. Скриншот чужого приложения устаревает с
   каждым их обновлением и разный на iPhone и на Android; нарисованный
   макет узнаётся одинаково и объясняет ровно то, что нужно — куда нажать. */
.sm-step {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kt-primary, #009ef7);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sm-phone {
    max-width: 200px;
    border: 1px solid var(--kt-gray-300, #e4e6ef);
    border-radius: 18px;
    overflow: hidden;
    background: var(--kt-body-bg, #fff);
}

.sm-phone__bar {
    height: 22px;
    background: var(--kt-gray-100, #f9f9f9);
    border-bottom: 1px solid var(--kt-gray-200, #f1f1f2);
}

.sm-phone__body { padding: 10px; }

.sm-phone__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kt-gray-500, #a1a5b7);
    margin-bottom: 8px;
}

.sm-phone__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 8px;
    font-size: 13px;
}

/* Строка Telegram выделена: к ней и ведёт вся инструкция. */
.sm-phone__row:not(.sm-phone__row--dim) {
    background: var(--kt-light-primary, #f1faff);
    font-weight: 600;
}

.sm-phone__row--dim { opacity: .45; }

.sm-phone__icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

.sm-phone__name { flex: 1 1 auto; }

.sm-phone__pick {
    font-size: 10px;
    color: var(--kt-primary, #009ef7);
    text-transform: uppercase;
}

/* ── Шапка карточки товара ──────────────────────────────────────────────
 *
 * Две колонки — описание и цена — расходятся по МЕСТУ, которое реально
 * есть у карточки, а не по ширине окна.
 *
 * Раньше здесь стояло `w-100 w-lg-auto`: до 992 пикселей цена занимала всю
 * строку и уезжала под название. Но карточка лежит в `col-lg-8` внутри
 * `container-xxl`, и её собственная ширина с шириной окна не совпадает
 * никогда. На большом мониторе с увеличенным масштабом выходило обидное:
 * места на две колонки вдоволь, а разметка мобильная.
 *
 * `flex-basis` вместо точки перелома делает решение локальным: пока обе
 * колонки помещаются рядом — они рядом, перестали помещаться — перенос.
 * Считает это сама карточка, и ошибиться ей негде.
 */
.sm-prod-main  { flex: 1 1 20rem; min-width: 0; }
.sm-prod-price { flex: 1 1 16rem; min-width: 0; }

/* Пока цена стоит рядом с описанием, ей незачем разъезжаться на всю
 * оставшуюся ширину: 26rem с запасом хватает самой длинной строке
 * («это цена по карте: обычной на странице не было»), а лишнее место
 * достаётся названию, которое в нём куда больше нуждается. */
@media (min-width: 1200px) {
    .sm-prod-price { flex-grow: 0; max-width: 26rem; }
}

/* Значок с подсказкой.
 *
 * `title` показывается только при наведении, и узнать о нём можно лишь
 * случайно задержав курсор. Курсор со знаком вопроса — единственный
 * штатный способ сказать «здесь есть что почитать», не тратя на это
 * строку в таблице; ради экономии строк подсказки и заводились. */
.cursor-help { cursor: help; }

/* ── Значок площадки ────────────────────────────────────────────────────
   Двадцать пикселей — не круглое число, а ростом со строку: у `fs-7`
   высота строки около 18px, и значок в 20 садится вровень с текстом, не
   раздвигая ряд. Больше — и таблица начинает «прыгать» на строках с
   двухэтажным названием товара.

   Квадрат жёстко: у логотипов площадок соотношение сторон разное от 3:1
   до 6:1, и по своей ширине они либо съедят колонку, либо ужмутся до
   нечитаемого. `object-fit: contain` вписывает любой в квадрат, ничего
   не обрезая и не растягивая.

   Подпись рядом со значком остаётся намеренно. Значок узнаётся мгновенно
   тем, кто уже знает площадку; человеку, который зашёл впервые, он не
   говорит ничего. Вместе они читаются с одного взгляда и не требуют
   наводить курсор. */
.sm-mp {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    white-space: nowrap;
}

.sm-mp__ico {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    object-fit: contain;
    /* Скругление небольшое: у части площадок значок сам квадратный с
       фоном, и острый угол рядом со скруглёнными бейджами таблицы
       выглядит чужеродно. */
    border-radius: 4px;
}

/* ── Регистры значков в таблице ──────────────────────────────────────────
   Правило: одна заливная пилюля на строку, и она принадлежит совету
   («лучшая цена за 30 дней»). Всё остальное говорит тише — иначе четыре
   зелёных значка в четырёх столбцах спорят за внимание и не получает его
   никто. Подробности решения — в комментарии над циклом в tracking.tpl. */

/* Скидка по карте площадки. Уточняет число рядом, а не спорит с ним:
   рамка вместо заливки, цвет — обычный приглушённый. */
.sm-off {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kt-text-muted, #99a1b7);
    border: 1px solid var(--kt-border-color, #f1f1f4);
    border-radius: .35rem;
    padding: .05rem .35rem;
    white-space: nowrap;
}

/* ── Два совета, две разные вещи ─────────────────────────────────────────
 *
 * «Лучшая цена» и «Дешевле обычного на 7%» выглядели одинаково: бледный
 * зелёный значок и одна и та же стрелка вниз. Читать их приходилось
 * буквально — то есть значок не работал, потому что значок и нужен для
 * того, чтобы не читать.
 *
 * А говорят они разное. «Лучшая цена» — дешевле не бывало за всё время
 * наблюдения, это рекомендация к действию. «Дешевле обычного» — сейчас
 * ниже средней, но бывало и лучше, это просто наблюдение.
 *
 * Поэтому форма у них одна — залитый значок с иконкой, — а ЦВЕТ разный:
 * зелёный с короной у рекомендации, синий со стрелкой у наблюдения.
 *
 * Одна форма и разный цвет, а не разная форма: бледный значок рядом с
 * залитым читался как «этот важный, а этот так, приписка», хотя оба
 * говорят по делу. Различать их должен цвет — он опознаётся боковым
 * зрением быстрее любой другой разницы и не требует сравнивать соседние
 * строки между собой. */
.sm-pick,
.sm-good {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.45;
    border-radius: .35rem;
    padding: .1rem .45rem;
    white-space: nowrap;
}

.sm-pick {
    color: #fff;
    background: var(--kt-success, #50cd89);
    border: 1px solid transparent;
}

/* Корона чуть мельче текста: она метка, а не картинка. */
.sm-pick i { font-size: .7rem; opacity: .95; }

/* Синий здесь ЗАКРЕПЛЁН, а не взят из темы, и это не небрежность.
   `--kt-primary` — акцент оформления, и он меняется вместе с цветовой
   схемой: на зелёной схеме оба значка стали бы зелёными и снова
   перестали бы различаться. Разница между ними — смысловая, она не
   должна зависеть от того, какую схему выбрали в настройках. */
.sm-good {
    color: #fff;
    background: #3699ff;
    border: 1px solid transparent;
}

.sm-good i { font-size: .7rem; opacity: .95; }

/* Наличие. Точка берёт цвет у текста, поэтому класс работает с любым
   `text-*` темы и не заводит второго набора цветов. Слово остаётся
   тёмным: цветное слово рядом с цветной точкой — это два раза одно и то
   же, и строка снова начинает пестрить. */
.sm-dot::before {
    content: '';
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-right: .4rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: .08em;
}

.sm-dot {
    color: inherit;
}

.sm-dot.text-success::before { background: var(--kt-success, #50cd89); }
.sm-dot.text-warning::before { background: var(--kt-warning, #ffc700); }

.sm-dot.text-success,
.sm-dot.text-warning {
    color: var(--kt-gray-700, #5e6278) !important;
}

/* ── Панель фильтров над таблицей ────────────────────────────────────────
   Разметку собирает скрипт из самих строк, здесь только вид. */
.sm-filters:empty {
    display: none;
}

.sm-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.sm-fchips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

/* Чип — кнопка, а не ссылка: он ничего не открывает, а переключает
   состояние здесь же. Поэтому и `type="button"` в разметке — внутри формы
   ссылка-кнопка отправила бы её. */
/* КРУПНО — И ЭТО РАЗМЕР ПОД ЗАДАЧУ, А НЕ ПОД ВКУС.
   Чип с логотипом площадки теперь единственный орган управления в панели,
   и попадать по нему приходится часто. Мелкая кнопка рядом с мелким
   значком читается как подпись, а не как то, что нажимают: логотип
   узнаётся раньше слова, и ради этого он должен быть виден. */
.sm-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .875rem;
    border: 1px solid var(--kt-border-color, #f1f1f4);
    border-radius: .625rem;
    background: var(--kt-body-bg, #fff);
    color: var(--kt-gray-700, #5e6278);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.sm-chip img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 5px;
}

.sm-chip:hover {
    border-color: var(--kt-primary, #009ef7);
    color: var(--kt-primary, #009ef7);
}

/* Выбранный чип заливаем: это единственное место панели, где заливка
   что-то утверждает — «сейчас показано только это». */
.sm-chip.on {
    background: var(--kt-primary-light, #f1faff);
    border-color: var(--kt-primary, #009ef7);
    color: var(--kt-primary, #009ef7);
}

/* Счётчик у значения отвечает на вопрос до нажатия. Тише самого значения:
   он подсказка, а не подпись. */
.sm-chip__n {
    font-size: .8125rem;
    font-weight: 500;
    opacity: .55;
}

/* ── Строка списка — две строки, не больше ───────────────────────────────
   Длинное название товара («IdealNight 500мл., Натуральный лубрикант…»)
   разворачивалось на три строки и делало свою строку втрое выше соседних.
   Список от этого перестаёт быть списком: глаз идёт вниз по столбцу цен и
   спотыкается на каждой второй строке.

   Обрезаем НАЗВАНИЕ, а не всю ячейку: под ним стоит вторая строка с
   оценкой и площадкой, и она нужна целиком. Полное название остаётся в
   подсказке при наведении и, конечно, в карточке. */
/* Название связанного товара. Оно ДЛИННОЕ по природе — это полное имя
   карточки на чужой площадке, со всеми диоптриями и радиусами, — и на
   узком экране разъезжалось на четыре строки, отрывая значок площадки от
   текста. Две строки: одной такое имя не опознать, тремя оно занимает
   строку списка целиком. */
/* `min-w-0` В BOOTSTRAP НЕТ — это имя из Tailwind, и в разметке оно молча
   ничего не значило. Флекс-элемент по умолчанию не сжимается ниже своего
   содержимого (`min-width: auto`), поэтому длинное название связки
   распирало карточку до 733 px при экране 390: телефон отдалял страницу
   целиком, и владелец видел «маленькую иконку» — на самом деле маленьким
   было всё. Обрезка (`text-truncate`, `sm-link-title`) работает только
   там, где предку РАЗРЕШЕНО быть уже содержимого. */
.min-w-0 {
    min-width: 0 !important;
}

.sm-link-title {
    /* ОДНА строка, а не две. Полное имя карточки на чужой площадке — это
       перечисление всех диоптрий и радиусов; второй строкой оно понятнее
       не становится, зато строка списка вырастает вдвое. Целиком имя
       остаётся в подсказке ссылки и на самой площадке. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sm-clamp {
    /* `!important` — потому что рядом на том же элементе стоит `d-block`,
       а утилиты темы объявлены с `!important`. Без него `display` тут был
       `block`, обрезка не работала НИКОГДА, и названия шли в пять-шесть
       строк на любой ширине — при том, что этот блок был написан ровно
       против этого. Проверено измерением: computed display = block. */
    display: -webkit-box !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Ячейки списка тоже держатся в двух строках: продавец «СНЕЖНЫЙ БАРС» и
   курорт с длинным именем иначе тянут строку вниз поодиночке. */
#sm_table td, #sm_tours td {
    vertical-align: middle;
}

#sm_table td > *:not(.d-flex),
#sm_tours td > *:not(.d-flex) {
    max-height: 2.8em;
    overflow: hidden;
}

/* Переключатель «Лучшая цена» стоит в том же ряду, что и площадки, но
   отвечает на другой вопрос — не «что показать», а «показать только то,
   что стоит брать». Поэтому и цвет другой: зелёный, тот же, каким помечен
   сам совет в строке. Одинаковый вид означал бы, что это ещё одна
   площадка. */
.sm-chip--pick {
    border-color: var(--kt-success-light, #e8fff3);
    background: var(--kt-success-light, #e8fff3);
    color: var(--kt-success, #50cd89);
}

.sm-chip--pick:hover {
    border-color: var(--kt-success, #50cd89);
    color: var(--kt-success, #50cd89);
}

.sm-chip--pick.on {
    background: var(--kt-success, #50cd89);
    border-color: var(--kt-success, #50cd89);
    color: #fff;
}

.sm-chip--pick.on .sm-chip__n {
    opacity: .8;
}

/* Отделяем от площадок промежутком: разные вопросы не должны читаться
   одним рядом кнопок. */
.sm-fchips .sm-chip--pick {
    margin-right: .5rem;
}

/* ── Пока таблица не готова ──────────────────────────────────────────────
   Разметку отдаёт сервер, поэтому до того как отработает DataTables,
   человек видит её сырой: без значков, без страниц, со служебным столбцом
   поиска наружу и с фильтрами, которых ещё нет. Секунда такого вида
   выглядит поломкой, а не загрузкой.

   Поэтому на время подготовки показываем скелет — полосы вместо строк.
   Не спиннер: спиннер говорит «жди», а скелет говорит «сейчас тут будет
   список», и переход к настоящим строкам не дёргает страницу.

   ВАЖНО: прячем через `visibility`, а не `display`. Скрытая через
   `display:none` таблица не имеет размеров, и DataTables рассчитывает
   ширины столбцов по нулям — после показа их приходится пересчитывать,
   и колонки на глазах прыгают. */
.sm-wait {
    position: relative;
    min-height: 260px;
}

.sm-wait > * {
    visibility: hidden;
}

.sm-wait::after {
    content: '';
    position: absolute;
    inset: 0 0 0 0;
    border-radius: .5rem;
    background-image:
        repeating-linear-gradient(to bottom,
            var(--kt-gray-200, #f1f1f4) 0 16px,
            transparent 16px 58px);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, #000 82%, transparent);
}

/* Блик, бегущий по скелету. Он и отличает «грузится» от «сломалось и
   осталось серым»: неподвижный скелет через три секунды читается как
   пустая страница. */
.sm-wait::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: .5rem;
    background: linear-gradient(100deg,
        transparent 20%,
        rgba(255, 255, 255, .65) 50%,
        transparent 80%);
    background-size: 220% 100%;
    animation: sm-shine 1.25s ease-in-out infinite;
}

@keyframes sm-shine {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .sm-wait::before { animation: none; }
}

/* ── Телефон: строка вместо таблицы ──────────────────────────────────────
 *
 * Одиннадцать колонок у товаров и тринадцать у туров на экран в 360 точек
 * не помещаются никак. Прикреплённая первая колонка (ниже) спасала от
 * потери названия, но ответа на «сколько стоит» человек всё равно не
 * получал: цена оставалась за правым краем, и до неё надо было листать.
 * Со стороны это и выглядит как «столбцов почти нет».
 *
 * Поэтому на узком экране таблица перестаёт быть таблицей. Цена,
 * изменение, наличие и время проверки уходят из колонок под название —
 * одной строкой, которая переносится. Сами колонки при этом скрыты
 * (`d-none d-xl-table-cell` в разметке): показывать одно и то же дважды
 * значит вернуть прокрутку, от которой уходим.
 *
 * Цена здесь НЕ прижата к правому краю, в отличие от колонки. В колонке
 * выравнивание по правому краю ставит разряды под разряды — так их
 * сравнивают глазом сверху вниз. Под названием столбца нет, сравнивать не
 * с чем, и прижатая вправо цена просто отрывалась бы от своей строки. */
.sm-mini {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .6rem;
    margin-top: .25rem;
}

.sm-mini__price {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--bs-gray-900, #181c32);
}

/* ── Название не уезжает за край ─────────────────────────────────────────
 *
 * Осталось для промежуточных ширин — планшета и узкого окна на настольном
 * экране, где колонки ещё показываются и прокрутка вбок ещё есть. На
 * телефоне прокручивать больше нечего: колонок там две.
 *
 * Поэтому первая колонка прикреплена к левому краю окна прокрутки. Фон
 * непрозрачный и берётся у темы — сквозь прозрачный проступали бы уезжающие
 * под него ячейки.
 *
 * Только там, где прокрутка вбок и есть: на широком экране `sticky` без
 * прокрутки ничего не делает, но тень рисовал бы всегда.
 */
/* ── Узкий экран: таблица становится карточками ──────────────────────────
 *
 * ПОЧЕМУ НЕ ТАБЛИЦА С ПРОКРУТКОЙ. Одиннадцать колонок на экран в 360 точек
 * не помещаются ничем. Здесь по очереди перепробовано два способа, и оба
 * оказались хуже:
 *
 *   Закреплённая первая колонка с прокруткой вбок. Отвечает на вопрос «чей
 *   это ряд», но не на «сколько стоит»: за ценой надо листать, а листать в
 *   таблице внутри страницы на телефоне — это ещё и попасть пальцем.
 *
 *   Скрыть колонки, а нужное продублировать под названием. Ровно это и
 *   стояло. Получилось, что половина полей просто пропала: продавец,
 *   артикул, наличие, цель, «против обычной» — их на телефоне не было
 *   вовсе, а правая половина экрана при этом пустовала под кнопки.
 *
 * Поэтому строка разворачивается в КАРТОЧКУ: заголовок с названием, под
 * ним все поля парами «подпись — значение», внизу кнопки. Подпись берётся
 * из `data-l` самой ячейки — то же слово, что стоит в шапке таблицы, и
 * второго списка подписей, который однажды разъедется с первым, тут нет.
 *
 * Скрытые классом `d-none d-xl-table-cell` ячейки здесь показываются
 * обратно. Специфичность `#sm_table tbody td[data-l]` выше, чем у `.d-none`
 * (идентификатор против класса), поэтому `!important` темы перебивается
 * своим `!important` — без него утилита Bootstrap выигрывает.
 *
 * Столбец с поисковой строкой сюда не попадает: DataTables прячет его
 * своим `visible: false`, а это не CSS — ячейки просто нет в разметке. */
@media (max-width: 1199.98px) {
    #sm_table,
    #sm_tours,
    #sm_table tbody,
    #sm_tours tbody,
    #sm_table tbody tr,
    #sm_tours tbody tr { display: block; width: 100%; }

    /* Шапка не нужна: подписи переехали в сами ячейки. */
    #sm_table thead,
    #sm_tours thead { display: none; }

    #sm_table tbody tr,
    #sm_tours tbody tr {
        border: 1px solid var(--sm-rule, #e3e6ec);
        border-radius: .625rem;
        padding: .875rem 1rem;
        margin-bottom: .75rem;
        background: var(--sm-card, #fff);
    }

    /* Полоски и пунктир строки таблицы в карточке лишние: у карточки уже
       есть своя рамка, и второй разделитель поверх неё читается как сбой
       вёрстки. */
    #sm_table.table-row-dashed tbody tr,
    #sm_tours.table-row-dashed tbody tr { border-bottom: 1px solid var(--sm-rule, #e3e6ec); }

    #sm_table tbody td,
    #sm_tours tbody td {
        display: flex !important;
        align-items: baseline;
        /* Подпись прижата влево своим `margin-right: auto`, а ВСЕ значения
           собираются справа одной группой. Через `space-between` они
           расползались бы по строке: «Цена» слева, «622 ₽» посередине,
           «нет в наличии» у правого края — три разных края в одной строке
           вместо пары «подпись — значение». */
        justify-content: flex-end;
        gap: .5rem;
        width: 100%;
        border: 0 !important;
        padding: .3rem 0 !important;
        text-align: left !important;
    }

    /* Столбец с поисковой строкой. DataTables прячет его сам (`visible:
       false` убирает ячейку из разметки), но полагаться на это нельзя: не
       загрузился скрипт — и служебная строка «жидкое мыло … 4919387913
       ozon» вываливается в каждую карточку. Прячем и стилями. */
    #sm_table tbody td.sm-find-col,
    #sm_tours tbody td.sm-find-col { display: none !important; }

    /* Подпись поля. `attr()` берёт её из разметки, поэтому добавить новую
       колонку — значит написать `data-l` один раз, и на телефоне она
       появится сама. */
    #sm_table tbody td[data-l]::before,
    #sm_tours tbody td[data-l]::before {
        content: attr(data-l);
        flex: 0 0 auto;
        margin-right: auto;
        font-size: .75rem;
        color: var(--sm-ink-mute, #868d9d);
        white-space: nowrap;
    }

    /* Значение прижимаем вправо и разрешаем ему переноситься: подпись
       слева, число справа — так пара читается одним движением. */
    #sm_table tbody td[data-l] > *,
    #sm_tours tbody td[data-l] > * { text-align: right; }

    /* Название с картинкой — шапка карточки, во всю ширину и без подписи. */
    #sm_table tbody td:first-child,
    #sm_tours tbody td:first-child {
        display: block !important;
        padding: 0 0 .625rem 0 !important;
        margin-bottom: .5rem;
        border-bottom: 1px solid var(--sm-rule, #e3e6ec) !important;
    }

    #sm_table tbody td:first-child .min-w-200px,
    #sm_tours tbody td:first-child .min-w-200px {
        min-width: 0 !important;
        max-width: none;
        /* `anywhere`, а не `break-word`: ширину блока задаёт самый длинный
           НЕРАЗРЫВНЫЙ кусок текста, и «171 859 отзывов» с неразрывным
           пробелом держал 182 точки. `break-word` разрешает перенос, но
           минимальную ширину не уменьшает, а `anywhere` уменьшает. */
        overflow-wrap: anywhere;
    }

    /* Название целиком, а не в две строки: в карточке места достаточно, а
       по обрезанному «IdealNight 500мл., Натуральный лубрикант…» товары
       различаются плохо.

       И цветом ссылки, а не чёрным. На компьютере подсказка есть у самого
       указателя: он меняется над ссылкой. На телефоне указателя нет, и
       чёрный жирный заголовок читается как заголовок, а не как «нажми
       сюда» — в карточку товара приходилось попадать наугад. */
    #sm_table td:first-child .sm-clamp,
    #sm_tours td:first-child .sm-clamp {
        -webkit-line-clamp: unset;
        display: block;
        font-size: 1rem;
        color: var(--bs-primary, #06b6d4) !important;
    }

    /* ВЫКЛАДКА ПОД НАЗВАНИЕМ БОЛЬШЕ НЕ НУЖНА.
       Всё, что помечено `d-xl-none` в первой ячейке, — это заменители
       скрытых колонок: цена, площадка, бренд, совет, цель. Колонки
       вернулись, и оставить заменители значило бы показать каждое из этих
       полей дважды подряд, второй раз без подписи. */
    #sm_table td:first-child .d-xl-none,
    #sm_tours td:first-child .d-xl-none { display: none !important; }

    /* Кнопки — подвалом карточки, во всю ширину и покрупнее: палец
       промахивается мимо тех, что рассчитаны на курсор. */
    #sm_table tbody td.sm-acts,
    #sm_tours tbody td.sm-acts {
        display: block !important;
        padding: .75rem 0 0 0 !important;
        margin-top: .5rem;
        border-top: 1px solid var(--sm-rule, #e3e6ec) !important;
    }

    #sm_table td.sm-acts > div,
    #sm_tours td.sm-acts > div { justify-content: flex-start !important; gap: .5rem !important; }

    #sm_table td.sm-acts .sm-act,
    #sm_tours td.sm-acts .sm-act {
        --bs-btn-padding-x: .75rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    /* Пустая ячейка «нет данных» от DataTables — не поле, подпись ей не
       нужна, а растягивать её на всю карточку надо. */
    #sm_table tbody td.dataTables_empty,
    #sm_tours tbody td.dataTables_empty {
        display: block !important;
        border-bottom: 0 !important;
        text-align: center !important;
    }
}

/* ── Название не растягивает столбец на пол-экрана ───────────────────────
 *
 * Строка обрезана в одну (`sm-clamp`), но обрезается она по ШИРИНЕ ЯЧЕЙКИ,
 * а ячейка первая и забирает себе весь запас таблицы: у «Протеина BIGSNT
 * BIG WHEY сывороточного 900 грамм, 28 порций, для набора мышечной
 * массы…» получается строка на треть экрана, и глазу приходится
 * пробегать её целиком, чтобы добраться до цены.
 *
 * Ограничиваем ширину, а не число знаков. Резать текст в PHP значило бы
 * решать за браузер, сколько влезет: у одного окно 1280, у другого 2560,
 * и обрезка «по сорока символам» на широком экране оставляла бы пустое
 * место, а на узком всё равно не спасала.
 *
 * Полное название никуда не девается: оно в подсказке при наведении и
 * целиком в карточке товара. */
@media (min-width: 1200px) {
    #sm_table tbody td:first-child .min-w-200px,
    #sm_tours tbody td:first-child .min-w-200px {
        max-width: 26rem;
    }
}

/* ── Телефон: карточка ещё компактнее ───────────────────────────────────
 *
 * Всё, что делало из строки карточку, стоит выше и работает уже с 1200
 * точек. Здесь остаются только поправки на узкий экран: отступы и размер
 * картинки. Прежние правила про «первой колонке всю ширину» отсюда убраны
 * — они боролись с прокруткой вбок, а прокрутки больше нет. */
@media (max-width: 575.98px) {
    #sm_table tbody tr,
    #sm_tours tbody tr { padding: .75rem .875rem; }

    #sm_table tbody td:first-child img.sm-thumb__pic,
    #sm_tours tbody td:first-child img.sm-thumb__pic { width: 100%; height: 100%; }

    /* Длинная подпись и длинное значение в одну строку не встают: даём им
       перенестись, а не сжиматься до одного слова в столбик. */
    #sm_table tbody td[data-l],
    #sm_tours tbody td[data-l] { flex-wrap: wrap; gap: .25rem .75rem; }
}

/* ── Обучение по шагам ───────────────────────────────────────────────────
   Затемнение сделано ТЕНЬЮ вокруг дырки, а не вырезанием.

   Настоящее вырезание — это clip-path с пересчётом четырёх точек на каждый
   скролл и каждый поворот экрана. Огромная тень даёт тот же результат одной
   строкой и никогда не расходится с рамкой: она и есть рамка.

   `pointer-events: none` у дырки — чтобы подсвеченная кнопка оставалась
   нажимаемой. Обучение показывает, куда нажать; ловить это нажатие на себя
   значит показывать и не давать. */
.sm-tour {
    position: fixed;
    inset: 0;
    z-index: 1090;   /* выше модалок Metronic (1055), ниже тостов */
    pointer-events: none;
}

.sm-tour__hole {
    position: fixed;
    border-radius: .5rem;
    box-shadow: 0 0 0 9999px rgba(20, 22, 28, .62);
    transition: top .18s, left .18s, width .18s, height .18s;
    pointer-events: none;
}

/* ПОКА КООРДИНАТЫ НЕ ПОСЧИТАНЫ — НЕ ПОКАЗЫВАЕМ.
   Снять `hidden` нужно сразу: у скрытого элемента нет размеров, а высота
   подсказки решает, ставить её над кнопкой или под. Но `position: fixed`
   без координат — это левый верхний угол, и первый кадр обучения выглядел
   так: тёмный экран, белая коробка в углу, и через треть секунды прыжок
   к кнопке. Владелец на это и указал. */
.sm-tour--blind .sm-tour__hole,
.sm-tour--blind .sm-tour__box {
    opacity: 0;
}

.sm-tour__box {
    position: fixed;
    z-index: 1;
    /* Появление плавным, а не рывком: место у подсказки считается после
       прокрутки, и мгновенное включение видно как вспышку. */
    transition: top .18s, left .18s, opacity .15s;
    padding: 1.25rem;
    border-radius: .75rem;
    background: var(--sm-card, #fff);
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .28);
    pointer-events: auto;   /* а вот кнопки внутри нажимать надо */
}

.sm-tour__step {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--sm-ink-mute, #868d9d);
    margin-bottom: .35rem;
}

.sm-tour__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--sm-ink, #14161c);
    margin-bottom: .35rem;
}

.sm-tour__text {
    font-size: .875rem;
    line-height: 1.45;
    color: var(--sm-ink-mid, #4b5160);
}

.sm-tour__foot {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.25rem;
}

/* ── Панель «по чему мы считаем цену» ────────────────────────────────────
   Чем платите, тишина, обучение. Регион сюда не входит: он спрашивается
   один раз и живёт в профиле.

   ТРЕТИЙ ПОДХОД, и два предыдущих стоит помнить, чтобы не вернуться.

   Первый: четыре коробки с заливкой и кнопкой «изменить» у каждой. Читалось
   как форма, которую надо заполнить, — человек, только что выбравший город
   при регистрации, видел здесь «снова выберите регион».

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

   Третий, этот: карточка на общей сетке, в языке соседних «ОТСЛЕЖИВАЕТСЯ» и
   «МОГЛИ СЭКОНОМИТЬ» — подпись капителью, под ней значение. Это отчёт, и
   выглядит он как отчёт. Нажимается вся ячейка целиком, отдельной кнопки
   «изменить» нет: цель у ячейки ровно одна. */
.sm-set {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 2.5rem;
}

.sm-set__it {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .25rem .5rem .25rem 0;
    border-radius: .375rem;
    color: inherit;
}

.sm-set__it:hover { color: inherit; }

.sm-set__ico {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
    font-size: .875rem;
    color: var(--sm-ink-mute, #868d9d);
    background: var(--kt-gray-100, #f9f9f9);
    transition: color .12s, background-color .12s;
}

.sm-set__it:hover .sm-set__ico {
    color: var(--bs-primary, #06b6d4);
    background: var(--kt-primary-light, #e7f8fb);
}

.sm-set__txt {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Подпись — капителью и мелко, как у соседних карточек: она не сообщение,
   а имя строки, и читать её подряд со значением не надо. */
.sm-set__lab {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--sm-ink-mute, #868d9d);
    line-height: 1.3;
}

.sm-set__val {
    font-size: .8125rem;
    font-weight: 500;
    color: var(--sm-ink-mid, #4b5160);
    line-height: 1.35;
}

.sm-set__it:hover .sm-set__val { color: var(--bs-primary, #06b6d4); }

/* На телефоне ячейки становятся строками во всю ширину: три штуки в ряд
   на 360 точках ужимаются до нечитаемого, а вертикально они и так
   перечисление. */
@media (max-width: 575.98px) {
    .sm-set { flex-direction: column; gap: .25rem; }
    .sm-set__it { width: 100%; }
}

/* ── Какие площадки мы понимаем ──────────────────────────────────────────
   Стоит в окне добавления, где человек как раз держит ссылку в буфере.
   Значок плюс название: по значку площадку узнают быстрее, чем прочитают,
   но одного значка мало — «ЯМ» и «Ozon» на мелком квадрате различают не
   все. Список приходит из базы, а не из шаблона. */
.sm-mp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.sm-mp-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: .375rem;
    font-size: .8125rem;
    color: var(--sm-ink-mid, #4b5160);
    background: var(--kt-gray-100, #f9f9f9);
    white-space: nowrap;
}

.sm-mp-chip img {
    width: 1rem;
    height: 1rem;
    object-fit: contain;
}

/* ── Квадрат товара в списке ─────────────────────────────────────────────
   Он есть ВСЕГДА, даже когда картинки нет.

   Раньше `<img>` при отсутствии фото просто не выводился: строка теряла
   свои сорок четыре пикселя, название съезжало влево, и список выглядел
   рваным. А битая ссылка пряталась через `visibility:hidden` — на месте
   товара оставалась пустая дырка, что ещё хуже: это читается как поломка,
   а не как «фото не дали».

   Заглушка лежит ВНУТРИ коробки, под картинкой, и та её закрывает. Не
   загрузилась — `remove()` убирает только картинку, заглушка проступает
   сама. Один механизм на оба случая вместо двух разных.

   Значок площадки как заглушка выбран не от бедности: он говорит то
   единственное, что мы про этот товар точно знаем, пока не пришёл первый
   замер. Серый квадрат не сказал бы и этого. */
.sm-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    /* СКРУГЛЕНИЕ ДОЛЕЙ, А НЕ ТОЧКАМИ, и ровно такое, как у площадок.
       Стояло 6 точек — на квадрате в 44 это 14%, и рядом с картинкой
       Wildberries, у которой скругление вшито в сам файл и составляет
       около четверти, наш квадрат выглядел просто срезанным. Доля вместо
       точек ещё и избавляет от второго значения для крупного квадрата на
       странице товара: 110 точек с теми же шестью смотрелись бы совсем
       квадратом. */
    border-radius: 22%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kt-gray-100, #f9f9f9);
}

/* Значок площадки — В ПОЛНУЮ СИЛУ, а не бледной тенью.
   Стоял он на 18 пикселях и `opacity: .55`, и рядом с настоящей картинкой
   товара выглядел браком: у Wildberries строка казалась крепкой (там своя
   малиновая картинка, а не наша заглушка), а у Ozon на её месте была
   выцветшая мелочь. Заглушка не должна извиняться за то, что она
   заглушка, — иначе читается как «фото не загрузилось», а не как «фото
   нет».

   Значки площадок — цветные квадраты с собственным фоном, поэтому им
   нужен размер и скругление, как у иконки приложения; шрифтовой запасной
   значок остаётся мелким и серым — он-то как раз обозначение, а не знак. */
img.sm-thumb__mp {
    /* ВО ВЕСЬ КВАДРАТ, а не значком посередине.
       Владелец сравнил соседние строки: у Wildberries квадрат крупный, у
       Ozon мелкий. Дело не в значках — тот малиновый квадрат в строках WB
       это СОБСТВЕННАЯ картинка-заглушка площадки, она приходит как фото
       товара и растянута на весь квадрат. Наша рядом стояла значком на
       двадцать шесть точек, и разница читалась как небрежность.

       Увеличение на четверть — не подгон по вкусу, а поправка на сами
       файлы: во всех пяти значок нарисован с полем в восемь точек из
       восьмидесяти по каждому краю, то есть плитка занимает 80% холста.
       Без этого она упиралась бы в невидимую рамку и всё равно не
       доходила до края. Измерено по прозрачности, а не на глаз. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform: scale(1.25);
}

i.sm-thumb__mp {
    font-size: 15px;
    color: var(--sm-ink-mute, #868d9d);
    opacity: .55;
}

.sm-thumb__pic {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Белая подложка: у фото с прозрачным фоном сквозь него проступала бы
       заглушка, и получалась бы картинка поверх логотипа. */
    background: #fff;
}

/* Та же коробка на странице товара.
   Там `<img>` выводился под условием, и без фото карточка начиналась сразу
   с названия — на месте картинки пусто, будто страница не догрузилась. Ради
   одного размера заводить второй механизм не стоит: тот же квадрат, тот же
   значок под фотографией, только крупнее. */
.sm-thumb--lg {
    width: 110px;
    height: 110px;
}

.sm-thumb--lg i.sm-thumb__mp {
    font-size: 34px;
}

/* ── Страница «как отправить товар боту» ─────────────────────────────────
   Отдельная страница, а не окно в кабинете: ссылку на окно не пришлёшь ни
   в ответе бота, ни в письме, а вопрос возникает именно там — когда
   человек прислал что-то не то и получил отказ. */

/* Три шага в ряд на широком экране, столбиком на узком. Именно шаги, а не
   абзацы: у них есть порядок, и номер слева его и держит. */
.sm-how__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
}

.sm-how__steps > * { flex: 1 1 15rem; }

/* Значок канала — крупный квадрат, как иконка приложения: Telegram и Max
   человек узнаёт по виду быстрее, чем прочитает название. */
.sm-how__ch {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: .75rem;
    font-size: 1.5rem;
}

/* Значок площадки в заголовке карточки — той же долей скругления, что и
   квадрат товара в списке: это одни и те же значки, и разное скругление на
   одной странице читается как небрежность. */
.sm-how__ico {
    width: 2rem;
    height: 2rem;
    border-radius: 22%;
    object-fit: contain;
}

/* Образец адреса. Моноширинным и с переносом в любом месте: адреса длинные
   и неразрывные, и без этого карточка разъезжается по ширине. */
.sm-how__url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--sm-ink-mid, #4b5160);
    background: var(--kt-gray-100, #f9f9f9);
    border-radius: .375rem;
    padding: .5rem .75rem;
    overflow-wrap: anywhere;
}


/* Кнопки админского блока на телефоне прячутся вместе со служебными
   данными: пять штук занимали пол-экрана над товаром. `!important` —
   потому что у `.card-toolbar` в теме свой `display: flex`. */
@media (max-width: 767.98px) {
    .sm-adm-tools[data-fold="1"] { display: none !important; }
}


/* ВЫГОДНАЯ СТРОКА В СПИСКЕ ПРОДАВЦОВ.
 *
 * Зелёного числа мало: глаз читает столбец цен как ряд равных, и «дешевле
 * вашей» приходится вычислять. Заливка отвечает на это раньше чтения.
 * Поля по бокам — чтобы заливка не липла к тексту, а отрицательные внешние
 * держат строку в той же сетке, что и остальные. */
.sm-offer-row.sm-deal {
    background: var(--sm-go-soft, #e2f6eb);
    border-radius: .625rem;
    border-bottom-color: transparent !important;
    padding-left: .75rem;
    padding-right: .75rem;
    margin-left: -.75rem;
    margin-right: -.75rem;
}


/* ПОЛОСА-РАСКРЫВАШКА «дороже вашей цены».
 *
 * Не кнопка и не заголовок: разделитель, который можно нажать. Поэтому
 * фона нет, рамка тонкая по всей ширине, а буквы — как у подписи. При
 * наведении светлеет, чтобы стало понятно, что это нажимается. */
.sm-more {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .625rem .875rem;
    border: 1px dashed var(--sm-rule, #e3e6ec);
    border-radius: .625rem;
    background: transparent;
    color: var(--sm-ink-mute, #868d9d);
    font-size: .8125rem;
    transition: background-color .15s, border-color .15s, color .15s;
}

.sm-more:hover {
    background: var(--kt-gray-100, #f9f9f9);
    border-color: var(--sm-ink-mute, #868d9d);
    color: var(--sm-ink-mid, #4b5160);
}

/* Число и «от такой-то цены» — вправо: слева говорим, что это, справа —
   стоит ли открывать. */
.sm-more__n { margin-left: auto; }

/* Стрелка поворачивается вместо смены значка: так видно, что открылось
   именно это, а не появилось что-то новое. */
.sm-more__i { transition: transform .15s; }
.sm-more[aria-expanded="true"] .sm-more__i { transform: rotate(180deg); }


/* ЗНАЧОК ПРОДАВЦА — БУКВА В КРУГЕ.
 *
 * Логотипов площадки не дают, а строке нужен якорь: без него список
 * продавцов читается сплошным текстом. Цвет считает страница из имени —
 * у одного продавца он всегда один и тот же. */
.sm-av {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1;
}

.sm-av--0 { background: #e8f1ff; color: #2f6fd0; }
.sm-av--1 { background: #e9f7ef; color: #1f8a55; }
.sm-av--2 { background: #fdeef0; color: #c8375a; }
.sm-av--3 { background: #f3eefd; color: #6b45c4; }
.sm-av--4 { background: #fff3e3; color: #b56a12; }
.sm-av--5 { background: #e7f6f8; color: #17798a; }