@charset "UTF-8";

/* DIG. Лента «Дайджест» (/svezhee). Островной CSS.
   ⚠️ Имя файла и классы .sv-* остались от рабочего названия «Свежее» —
   переименованы намеренно не были, человеку они не видны.
   КАЖДОЕ правило замкнуто на .svezhee-v2, чтобы общие имена (.sv-card и прочие)
   не столкнулись с Bulma и app.css. Общий app.css и сборка Mix не трогаются.

   Шрифт Manrope здесь НЕ объявляется: его @font-face уже стоят в app.css
   (задача M), и body сайта уже набран им.

   Палитра та же, что у витрины каталога и новой главной: teal #1F6F78,
   hover #175861, золотой #B8AA73, текст #1A1D1E, приглушённый #5C676A,
   линия #D6DEDF, оттенок #F2F7F7. */

.svezhee-v2 {
    --teal: #1F6F78;
    --teal-hover: #175861;
    --gold: #B8AA73;
    --ink: #1A1D1E;
    --muted: #5C676A;
    --line: #D6DEDF;
    --tint: #F2F7F7;
    --white: #fff;
    --radius: 14px;
    /* кружок раскрытия: тем же числом задан отступ текста карточки,
       чтобы он стоял одной левой линией с заголовком */
    --sv-dial: 34px;
    --sv-dial-gap: 12px;

    font-family: Manrope, Arial, Helvetica, sans-serif;
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Тон и раскрытие до краёв экрана — тем же приёмом, что у .catalog-zone:
   точными отрицательными полями, а НЕ через 100vw (100vw включает полосу
   прокрутки и дал бы горизонтальную прокрутку). Числа из замера app.css:
   section.products-section имеет padding 0 7rem 3rem, до 1407px — 0 3rem 3rem. */
.svezhee-zone {
    background: var(--tint);
    margin-left: -3rem;
    margin-right: -3rem;
    padding-bottom: clamp(24px, 3vw, 40px);
}

@media screen and (min-width: 1408px) {
    .svezhee-zone {
        margin-left: -7rem;
        margin-right: -7rem;
    }
}

/* Шов у подвала: когда серая зона последняя в секции (подписчику блок тарифов
   не показывается), между ней и подвалом оставалась бы белая полоса в 3rem —
   нижний отступ section.products-section. Точно как у каталога. */
.svezhee-zone.is-last {
    margin-bottom: -3rem;
    padding-bottom: calc(3rem + clamp(24px, 3vw, 40px));
}

.svezhee-v2 .sv-root {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(20px, 3vw, 34px) clamp(16px, 4vw, 40px) 0;
}

/* ── шапка ── */

.svezhee-v2 .sv-head {
    margin-bottom: clamp(16px, 2.2vw, 24px);
}

/* Размер задаём здесь, а не классами Bulma is-size-*: они объявлены
   с !important на самом элементе, и перебить их разметкой невозможно. */
.svezhee-v2 .sv-head h1 {
    font-size: clamp(1.9rem, 3.4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    color: var(--ink);
    margin: 0 0 10px;
}

.svezhee-v2 .sv-lead {
    color: var(--muted);
    font-size: 1.02rem;
    max-width: 620px;
    margin: 0;
}

/* ── переключатель видов ── */

.svezhee-v2 .sv-switch {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: clamp(16px, 2.2vw, 22px);
}

.svezhee-v2 .sv-switch-btn {
    flex: 1 1 0;
    min-width: 170px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 20px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--white);
    color: var(--muted);
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    transition: border-color .18s, color .18s, background-color .18s;
}

.svezhee-v2 .sv-switch-btn svg {
    flex: none;
}

.svezhee-v2 .sv-switch-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.svezhee-v2 .sv-switch-btn.is-active {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--white);
}

/* ── строка отбора и сортировки ── */

.svezhee-v2 .sv-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.svezhee-v2 .sv-chips-label {
    color: var(--muted);
    font-size: .92rem;
}

.svezhee-v2 .sv-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--line);
    font-size: .9rem;
    font-weight: 600;
}

.svezhee-v2 .sv-chip-clear {
    color: var(--teal);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: underline;
}

.svezhee-v2 .sv-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: clamp(14px, 2vw, 20px);
    border-bottom: 1px solid var(--line);
}

.svezhee-v2 .sv-count {
    color: var(--muted);
    font-size: .95rem;
}

.svezhee-v2 .sv-count b {
    color: var(--ink);
}

.svezhee-v2 .sv-sort {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: .95rem;
}

.svezhee-v2 .sv-sort-btn {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--white);
    color: var(--muted);
    font-weight: 600;
    transition: border-color .18s, color .18s;
}

.svezhee-v2 .sv-sort-btn:hover {
    border-color: var(--teal);
    color: var(--teal);
}

.svezhee-v2 .sv-sort-btn.is-active {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--tint);
}

/* ── карточка ── */

.svezhee-v2 .sv-list {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.6vw, 16px);
}

.svezhee-v2 .sv-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(16px, 2.2vw, 22px);
}

/* Строка заголовка: кружок раскрытия слева, заголовок, метка доступа справа
   вверху. align-items: flex-start — метка прижата к верху даже у заголовка
   в две-три строки. */
.svezhee-v2 .sv-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Кружок раскрытия. Его размер и зазор объявлены переменными в самом верху
   файла: то же число нужно отступу .sv-card-inner, и менять его надо в одном
   месте, иначе текст съедет с левой линии заголовка. */
.svezhee-v2 .sv-toggle {
    flex: none;
    width: var(--sv-dial);
    height: var(--sv-dial);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: 50%;
    background: var(--white);
    color: var(--teal);
    cursor: pointer;
    transition: border-color .18s, background-color .18s;
}

.svezhee-v2 .sv-toggle:hover {
    border-color: var(--teal);
    background: var(--tint);
}

.svezhee-v2 .sv-toggle:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* Свёрнут — шеврон вниз, развёрнут — вверх. Поворот плавный; в режиме
   пониженной анимации он гасится общим правилом в конце файла. */
.svezhee-v2 .sv-chev {
    transition: transform .2s ease;
}

.svezhee-v2 .sv-card.is-open .sv-chev {
    transform: rotate(180deg);
}

/* Текст карточки встаёт одной левой линией с заголовком, а не с кружком. */
.svezhee-v2 .sv-card-inner {
    padding-left: calc(var(--sv-dial) + var(--sv-dial-gap));
}

.svezhee-v2 .sv-badge {
    flex: none;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.6;
}

.svezhee-v2 .sv-badge.is-open {
    background: #E7F3EE;
    color: #1F7A56;
}

.svezhee-v2 .sv-badge.is-reg {
    background: #FBF4E2;
    color: #8A6D1F;
}

.svezhee-v2 .sv-badge.is-sub {
    background: #ECEFF0;
    color: var(--muted);
}

/* Заголовок стоит в одной строке с кружком, поэтому выравнивается по его
   середине: line-height подобран так, чтобы первая строка попала в центр
   кнопки высотой 34px. */
.svezhee-v2 .sv-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(1.12rem, 1.9vw, 1.32rem);
    font-weight: 750;
    line-height: 1.5;
    margin: 0;
}

.svezhee-v2 .sv-title a {
    color: var(--ink);
}

.svezhee-v2 .sv-title a:hover {
    color: var(--teal);
}

/* Дата и темы одной строкой — как у Examine. Темы здесь уже не «плашки»:
   рядом с датой они читаются как продолжение служебной строки. */
.svezhee-v2 .sv-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 6px 0 8px;
    color: var(--muted);
    font-size: .86rem;
}

.svezhee-v2 .sv-tag {
    color: var(--muted);
}

.svezhee-v2 .sv-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #B9C4C5;
}

.svezhee-v2 .sv-summary {
    margin: 0;
    color: #34403F;
    font-size: 1rem;
}

/* Раскрываемые области. Их ДВЕ и они не соседи: первоисточник стоит над
   датой, детали — под сутью. Обе свёрнуты по умолчанию и открываются одним
   классом .is-open на карточке, который ставит скрипт острова.
   Без JavaScript обе разворачивает <noscript> в svezhee-body.blade.php. */
.svezhee-v2 .sv-fold {
    display: none;
}

.svezhee-v2 .sv-card.is-open .sv-fold {
    display: block;
}

/* Пустой узел-заглушка (у материала не заполнена ссылка на исследование)
   не должен оставлять после себя отступ. */
.svezhee-v2 .sv-fold:empty {
    display: none;
}

.svezhee-v2 .sv-source {
    margin: 10px 0 4px;
}

.svezhee-v2 .sv-body {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

/* Первоисточник — компактная капсула по образцу «Original paper» у Examine:
   сильное скругление, тонкая обводка, белый фон, значок внешней ссылки справа
   от подписи.

   Цвет НЕ фиолетовый, как в оригинале, а фирменный teal #1F6F78 — тот же, что
   у кнопок сайта. Контраст на белом 5.83:1, уровень AA проходит.

   inline-flex, а не block: капсула должна быть по ширине подписи, а не во всю
   строку. Значок наследует цвет через currentColor, отдельного правила ему
   не нужно. */
.svezhee-v2 .sv-source a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    border: 1px solid var(--teal);
    border-radius: 999px;
    background: var(--white);
    color: var(--teal);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.5;
    /* transform здесь намеренно НЕ используется: наведение не должно двигать
       строку, иначе при развороте карточки текст под капсулой дёргается. */
    transition: background-color .18s, box-shadow .18s, border-color .18s;
}

.svezhee-v2 .sv-source a:hover {
    background: var(--tint);
    border-color: var(--teal-hover);
    color: var(--teal-hover);
    box-shadow: 0 2px 10px rgba(31, 111, 120, .18);
    text-decoration: none;
}

.svezhee-v2 .sv-source a:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.svezhee-v2 .sv-source svg {
    flex: none;
}

/* Тело короткого. Редакция пишет его по шаблону из четырёх подзаголовков:
   «Тип исследования», «Кто участвовал», «Что делали», «Главный результат» —
   поэтому h2..h4 внутри деталей приводятся к одному скромному виду, чтобы
   подзаголовки не перекрикивали заголовок самой карточки. */
.svezhee-v2 .sv-details-text {
    font-size: 1rem;
}

.svezhee-v2 .sv-details-text > *:first-child {
    margin-top: 0;
}

.svezhee-v2 .sv-details-text > *:last-child {
    margin-bottom: 0;
}

.svezhee-v2 .sv-details-text h2,
.svezhee-v2 .sv-details-text h3,
.svezhee-v2 .sv-details-text h4 {
    font-size: .95rem;
    font-weight: 800;
    color: var(--ink);
    margin: 16px 0 5px;
}

.svezhee-v2 .sv-details-text p {
    margin: 0 0 10px;
}

.svezhee-v2 .sv-details-text ul,
.svezhee-v2 .sv-details-text ol {
    margin: 0 0 10px 1.2em;
}

.svezhee-v2 .sv-details-text li {
    margin-bottom: 4px;
}

.svezhee-v2 .sv-details-text img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.svezhee-v2 .sv-details-text a {
    color: var(--teal);
    text-decoration: underline;
}

/* ── мягкий барьер ── */

.svezhee-v2 .sv-gate {
    background: var(--tint);
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 16px 18px;
}

.svezhee-v2 .sv-gate-title {
    display: block;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 5px;
}

.svezhee-v2 .sv-gate-text {
    display: block;
    color: var(--muted);
    font-size: .95rem;
    margin-bottom: 12px;
}

.svezhee-v2 .sv-gate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: 999px;
    background: var(--teal);
    color: var(--white);
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s;
}

.svezhee-v2 .sv-gate-btn:hover {
    background: var(--teal-hover);
    color: var(--white);
}

.svezhee-v2 .sv-open {
    display: inline-block;
    margin-top: 14px;
    color: var(--teal);
    font-weight: 700;
}

.svezhee-v2 .sv-open:hover {
    color: var(--teal-hover);
    text-decoration: underline;
}

/* ── подвал карточки ── */

.svezhee-v2 .sv-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* «Поделиться» — приглушённая кнопка: она служебная и не должна спорить
   с заголовком и ссылкой на первоисточник. */
.svezhee-v2 .sv-share {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--muted);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s, color .18s, background-color .18s;
}

.svezhee-v2 .sv-share:hover {
    border-color: var(--teal);
    color: var(--teal);
    background: var(--tint);
}

.svezhee-v2 .sv-share:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.svezhee-v2 .sv-share-ok {
    color: #1F7A56;
    font-size: .84rem;
    font-weight: 700;
}

/* ── окно «Поделиться» ──────────────────────────────────────────────────
   Показывается только на компьютере: на телефоне кнопка отдаёт родную шторку.
   Раскладка повторяет «Share this page» у Examine, цвета и формы — наши.

   z-index заведомо выше навбара сайта: он .is-fixed-top и в Bulma сидит
   на 30-м слое. Отдельного слоя-контекста над окном в проекте нет —
   transform у предков острова не используется, поэтому position: fixed
   работает от окна браузера, а не от карточки. */

.svezhee-v2 .sv-share-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.svezhee-v2 .sv-share-modal[hidden] {
    display: none;
}

.svezhee-v2 .sv-share-back {
    position: absolute;
    inset: 0;
    background: rgba(26, 29, 30, .55);
}

.svezhee-v2 .sv-share-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--white);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(26, 29, 30, .28);
    padding: 20px 22px 22px;
}

.svezhee-v2 .sv-share-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.svezhee-v2 .sv-share-head h2 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--teal);
}

.svezhee-v2 .sv-share-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: background-color .18s, color .18s;
}

.svezhee-v2 .sv-share-x:hover {
    background: var(--tint);
    color: var(--ink);
}

.svezhee-v2 .sv-share-x:focus-visible,
.svezhee-v2 .sv-sbtn:focus-visible,
.svezhee-v2 .sv-share-copy:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* Сетка кружков: строго по три в ряд, два ровных ряда. Именно grid, а не
   перенос по месту: при переносе последний ряд центрировался бы и прямоугольник
   разъезжался. Если «Ещё» скрыто (в браузере нет navigator.share), остаются
   пять кнопок — 3 + 2, тоже ровно. */
.svezhee-v2 .sv-share-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    gap: 16px 10px;
    margin-bottom: 20px;
}

/* Скрытая кнопка не должна занимать клетку сетки: у .sv-sbtn стоит display,
   и он перебил бы атрибут hidden. */
.svezhee-v2 .sv-sbtn[hidden] {
    display: none;
}

.svezhee-v2 .sv-sbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 76px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: .74rem;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.svezhee-v2 .sv-sbtn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--white);
    transition: transform .18s, box-shadow .18s;
}

.svezhee-v2 .sv-sbtn:hover .sv-sbtn-ico {
    box-shadow: 0 6px 16px rgba(26, 29, 30, .22);
}

.svezhee-v2 .sv-sbtn:hover .sv-sbtn-cap {
    color: var(--ink);
}

/* Узнаваемые цвета площадок. «Почта» и «Ещё» — не площадки, поэтому они
   нейтрально-серые и не спорят с фирменным teal, который в этом окне
   закреплён за заголовком и кнопкой «Копировать». */
.svezhee-v2 .sv-sbtn-ico.is-tg   { background: #229ED9; }
.svezhee-v2 .sv-sbtn-ico.is-wa   { background: #25D366; }
.svezhee-v2 .sv-sbtn-ico.is-vk   { background: #0077FF; }
.svezhee-v2 .sv-sbtn-ico.is-x    { background: #000; }
.svezhee-v2 .sv-sbtn-ico.is-mail { background: #5C676A; }
.svezhee-v2 .sv-sbtn-ico.is-more { background: #8A9698; }

.svezhee-v2 .sv-share-url {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.svezhee-v2 .sv-share-url input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--tint);
    color: var(--muted);
    font-family: inherit;
    font-size: .84rem;
    text-overflow: ellipsis;
}

.svezhee-v2 .sv-share-copy {
    flex: none;
    padding: 9px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--teal);
    color: var(--white);
    font-family: inherit;
    font-size: .86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color .18s;
}

.svezhee-v2 .sv-share-copy:hover {
    background: var(--teal-hover);
}

.svezhee-v2 .sv-share-note {
    display: block;
    margin-top: 10px;
    color: #1F7A56;
    font-size: .84rem;
    font-weight: 700;
}

.svezhee-v2 .sv-share-note[hidden] {
    display: none;
}

/* ── группы тем ── */

.svezhee-v2 .sv-topic + .sv-topic {
    margin-top: clamp(24px, 3.4vw, 38px);
}

.svezhee-v2 .sv-topic-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 800;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}

.svezhee-v2 .sv-topic-count {
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.svezhee-v2 .sv-topic-more {
    display: inline-block;
    margin-top: 12px;
    color: var(--teal);
    font-weight: 700;
}

.svezhee-v2 .sv-topic-more:hover {
    color: var(--teal-hover);
    text-decoration: underline;
}

/* ── пагинация ── */

.svezhee-v2 .sv-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(20px, 2.6vw, 28px);
}

.svezhee-v2 .sv-pager-btn {
    padding: 10px 20px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--teal);
    font-weight: 700;
    transition: border-color .18s, background-color .18s;
}

.svezhee-v2 .sv-pager-btn:hover {
    border-color: var(--teal);
    background: var(--tint);
}

.svezhee-v2 .sv-pager-btn.is-off {
    color: #A8B3B4;
    background: transparent;
    cursor: default;
}

.svezhee-v2 .sv-pager-btn.is-off:hover {
    border-color: var(--line);
    background: transparent;
}

.svezhee-v2 .sv-pager-now {
    color: var(--muted);
    font-size: .95rem;
}

/* ── пустое состояние ── */

.svezhee-v2 .sv-empty {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(24px, 4vw, 40px);
    text-align: center;
    color: var(--muted);
}

.svezhee-v2 .sv-empty b {
    display: block;
    color: var(--ink);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.svezhee-v2 .sv-empty a {
    color: var(--teal);
    font-weight: 700;
    text-decoration: underline;
}

/* Отключение анимации в проекте замкнуто на острова (.catalog-v2 *, .home-v2 *),
   общего правила нет — поэтому свой остров обязан объявить его сам. */
@media (prefers-reduced-motion: reduce) {
    .svezhee-v2 *,
    .svezhee-v2 *::before,
    .svezhee-v2 *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media screen and (max-width: 640px) {
    .svezhee-v2 .sv-switch-btn {
        min-width: 0;
    }

    /* На узком экране кружок жмётся, и отступ под него съедал бы ширину
       строки. Кружок остаётся, отступ уменьшается. */
    .svezhee-v2 {
        --sv-dial: 30px;
        --sv-dial-gap: 9px;
    }

    /* Метка доступа уезжает под заголовок: рядом с ним на телефоне она
       оставляла бы заголовку полосу в два слова. */
    .svezhee-v2 .sv-card-head {
        flex-wrap: wrap;
    }

    .svezhee-v2 .sv-badge {
        order: 3;
        margin-left: calc(var(--sv-dial) + var(--sv-dial-gap));
        margin-top: 6px;
    }
}