/* ==========================================================================
   «Лента» — профиль компании для bidzaar.com/app
   Вариант B3 — «Графит + z-card с форматами»
   Префикс всех селекторов: .lenta-
   Шрифт не задаётся — наследуется от хост-приложения (Roboto).

   Файл собран из _parts/build.py — правьте части, а не результат.
   ========================================================================== */

/* --- Контейнер и переменные ----------------------------------------------
   Палитра снята с app.css корпоративного сайта (см. task.md, разделы 1–2).
   Жёлтый — цвет плашки, а не текста: на белом им ничего не пишем.
   --value — крупные цифры: графит в светлой теме, жёлтый в тёмной.
   ------------------------------------------------------------------------- */

.lenta-profile {
    --accent: #FFDD00;
    --accent-hover: #F6D500;
    --accent-soft: #FFFCE6;
    --on-accent: #202021;
    --graphite: #4D4D4F;
    --value: #4D4D4F;
    --text: #25272C;
    --text-soft: #4D4D4F;
    --muted: #717172;
    --bg: #FFFFFF;
    --surface: #F1F1F1;
    --border: #E7E7E7;
    --border-strong: #ADADAE;

    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    gap: 56px;
    color: var(--text);
}

html[theme=dark] .lenta-profile {
    --accent: #FFDD00;
    --accent-hover: #FFE433;
    --accent-soft: rgba(255, 221, 0, .10);
    --on-accent: #202021;
    --graphite: #373738;
    --value: #FFDD00;
    --text: #F1F1F1;
    --text-soft: #ADADAE;
    --muted: #888889;
    --bg: #202021;
    --surface: #2A2A2B;
    --border: rgba(241, 241, 241, .10);
    --border-strong: rgba(241, 241, 241, .20);
}

@media (max-width: 1200px) {
    .lenta-profile {
        padding: 48px 16px;
        gap: 44px;
    }
}

/* --- Иконки CSS-масками --------------------------------------------------
   Контуры — в _parts/icons.py. Маска закрашена --on-accent и лежит
   в жёлтом круге --accent: жёлтой иконки на белом не бывает, а в тёмной
   теме сочетание «тёмное на жёлтом» сохраняется само.
   ------------------------------------------------------------------------- */

.lenta-icon {
    display: block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--on-accent);
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

.lenta-icon-circle {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--accent);
    display: grid;
    place-items: center;
}

.lenta-icon--cart {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.4l2.4 10.4a1.6 1.6 0 0 0 1.6 1.2h8.4a1.6 1.6 0 0 0 1.5-1.2L20.6 8H6'/%3E%3Cpath d='M9.8 11.8h8.4'/%3E%3Ccircle cx='9.4' cy='19.6' r='1.5'/%3E%3Ccircle cx='17.4' cy='19.6' r='1.5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.4l2.4 10.4a1.6 1.6 0 0 0 1.6 1.2h8.4a1.6 1.6 0 0 0 1.5-1.2L20.6 8H6'/%3E%3Cpath d='M9.8 11.8h8.4'/%3E%3Ccircle cx='9.4' cy='19.6' r='1.5'/%3E%3Ccircle cx='17.4' cy='19.6' r='1.5'/%3E%3C/svg%3E");
}

.lenta-icon--basket {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5h18l-1.7 8a2 2 0 0 1-2 1.6H6.7a2 2 0 0 1-2-1.6L3 10.5Z'/%3E%3Cpath d='M7.5 10.5 10 4.5'/%3E%3Cpath d='M16.5 10.5 14 4.5'/%3E%3Cpath d='M9 13.6v3.6M12 13.6v3.6M15 13.6v3.6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5h18l-1.7 8a2 2 0 0 1-2 1.6H6.7a2 2 0 0 1-2-1.6L3 10.5Z'/%3E%3Cpath d='M7.5 10.5 10 4.5'/%3E%3Cpath d='M16.5 10.5 14 4.5'/%3E%3Cpath d='M9 13.6v3.6M12 13.6v3.6M15 13.6v3.6'/%3E%3C/svg%3E");
}

.lenta-icon--shop {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16l1.5 4.6a2.38 2.38 0 0 1-4.75 0 2.38 2.38 0 0 1-4.75 0 2.38 2.38 0 0 1-4.75 0 2.38 2.38 0 0 1-4.75 0L4 4Z'/%3E%3Cpath d='M4.5 11.2V20.5h15v-9.3'/%3E%3Cpath d='M10 20.5v-5h4v5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16l1.5 4.6a2.38 2.38 0 0 1-4.75 0 2.38 2.38 0 0 1-4.75 0 2.38 2.38 0 0 1-4.75 0 2.38 2.38 0 0 1-4.75 0L4 4Z'/%3E%3Cpath d='M4.5 11.2V20.5h15v-9.3'/%3E%3Cpath d='M10 20.5v-5h4v5'/%3E%3C/svg%3E");
}

.lenta-icon--bottle {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7.5h6a2 2 0 0 1 2 2v9.5a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9.5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M10.5 7.5V5h3v2.5'/%3E%3Cpath d='M12 5V2.8h3.6'/%3E%3Cpath d='M7 12.5h10v4H7'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7.5h6a2 2 0 0 1 2 2v9.5a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V9.5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M10.5 7.5V5h3v2.5'/%3E%3Cpath d='M12 5V2.8h3.6'/%3E%3Cpath d='M7 12.5h10v4H7'/%3E%3C/svg%3E");
}

.lenta-icon--warehouse {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5V9l9-5 9 5v11.5'/%3E%3Cpath d='M7 20.5v-8h10v8'/%3E%3Cpath d='M7 15h10M7 17.8h10'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5V9l9-5 9 5v11.5'/%3E%3Cpath d='M7 20.5v-8h10v8'/%3E%3Cpath d='M7 15h10M7 17.8h10'/%3E%3C/svg%3E");
}

.lenta-icon--delivery {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16.5V6.5h8.5v10'/%3E%3Cpath d='M16.5 9.5h2.9l2.1 3.1v3.9h-1.6'/%3E%3Cpath d='M12.1 16.5h4.6'/%3E%3Ccircle cx='10.4' cy='17.4' r='1.6'/%3E%3Ccircle cx='18.4' cy='17.4' r='1.6'/%3E%3Cpath d='M2.5 9h3.2M3.5 12.2h2.6M4.5 15.4h1.6'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16.5V6.5h8.5v10'/%3E%3Cpath d='M16.5 9.5h2.9l2.1 3.1v3.9h-1.6'/%3E%3Cpath d='M12.1 16.5h4.6'/%3E%3Ccircle cx='10.4' cy='17.4' r='1.6'/%3E%3Ccircle cx='18.4' cy='17.4' r='1.6'/%3E%3Cpath d='M2.5 9h3.2M3.5 12.2h2.6M4.5 15.4h1.6'/%3E%3C/svg%3E");
}

.lenta-icon--bag {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 8h13.6l-1 11.6a1.6 1.6 0 0 1-1.6 1.4H7.8a1.6 1.6 0 0 1-1.6-1.4L5.2 8Z'/%3E%3Cpath d='M9 10.5V7a3 3 0 0 1 6 0v3.5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 8h13.6l-1 11.6a1.6 1.6 0 0 1-1.6 1.4H7.8a1.6 1.6 0 0 1-1.6-1.4L5.2 8Z'/%3E%3Cpath d='M9 10.5V7a3 3 0 0 1 6 0v3.5'/%3E%3C/svg%3E");
}

.lenta-icon--online {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.4 2.5 3.6 5.5 3.6 9s-1.2 6.5-3.6 9c-2.4-2.5-3.6-5.5-3.6-9S9.6 5.5 12 3Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.4 2.5 3.6 5.5 3.6 9s-1.2 6.5-3.6 9c-2.4-2.5-3.6-5.5-3.6-9S9.6 5.5 12 3Z'/%3E%3C/svg%3E");
}

.lenta-icon--label {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.3V4.6a1.1 1.1 0 0 1 1.1-1.1h7.7l8.4 8.4a1.5 1.5 0 0 1 0 2.1l-6.7 6.7a1.5 1.5 0 0 1-2.1 0L3.5 12.3Z'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.5'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.3V4.6a1.1 1.1 0 0 1 1.1-1.1h7.7l8.4 8.4a1.5 1.5 0 0 1 0 2.1l-6.7 6.7a1.5 1.5 0 0 1-2.1 0L3.5 12.3Z'/%3E%3Ccircle cx='8.2' cy='8.2' r='1.5'/%3E%3C/svg%3E");
}

.lenta-icon--phone {
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5h8a1.8 1.8 0 0 1 1.8 1.8v15.4a1.8 1.8 0 0 1-1.8 1.8H8a1.8 1.8 0 0 1-1.8-1.8V4.3A1.8 1.8 0 0 1 8 2.5Z'/%3E%3Cpath d='M10.5 18.3h3'/%3E%3Cpath d='M9.6 6.5h4.8'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5h8a1.8 1.8 0 0 1 1.8 1.8v15.4a1.8 1.8 0 0 1-1.8 1.8H8a1.8 1.8 0 0 1-1.8-1.8V4.3A1.8 1.8 0 0 1 8 2.5Z'/%3E%3Cpath d='M10.5 18.3h3'/%3E%3Cpath d='M9.6 6.5h4.8'/%3E%3C/svg%3E");
}

/* --- Заголовки секций ----------------------------------------------------- */

.lenta-section__head {
    margin-bottom: 28px;
}

.lenta-section__title {
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    margin: 0 0 6px;
}

.lenta-section__subtitle {
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 720px;
    margin: 0;
}

/* --- HERO: разворот, слева логотип и текст, справа основная картинка -------
   Пропорции и ритм — как у ПРОДО variant-c. Бейджа над логотипом нет:
   короткой подписи для него в брифе нет.
   ------------------------------------------------------------------------- */

.lenta-hero {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 36px;
    align-items: center;
}

.lenta-hero__body {
    min-width: 0;
}

/* Логотип обрезан впритык — нижние выносные касаются края PNG,
   поэтому воздух под ним задаём отступом здесь. */
.lenta-logo {
    margin: 0 0 24px;
    line-height: 0;
}

.lenta-logo__img {
    display: block;
    width: 280px;
    max-width: 100%;
    height: auto;
}

/* Логотип двухцветный: фильтры к нему не применяем, а держим
   два файла. В тёмной теме графитовый текст заменён белым. */
.lenta-logo__img--dark {
    display: none;
}

html[theme=dark] .lenta-logo__img--light {
    display: none;
}

html[theme=dark] .lenta-logo__img--dark {
    display: block;
}

.lenta-hero__subtitle {
    font-size: 16.5px;
    line-height: 1.7;
    color: var(--text-soft);
    margin: 0;
}

/* «FMCG-ритейлер» не рвём по дефису. */
.lenta-nowrap {
    white-space: nowrap;
}

/* Один скруглённый угол — фирменная деталь сайта (border-radius: 0 40px 0 0).
   Подложка — тон самой картинки, пока она грузится. */
.lenta-hero__shot {
    aspect-ratio: 4 / 3;
    border-radius: 0 40px 0 0;
    overflow: hidden;
    background: #36363A;
}

.lenta-hero__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 35%;
}

/* --- Показатели лентой ---------------------------------------------------- */

.lenta-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg);
}

.lenta-stat {
    min-width: 0;
    padding: 26px 16px 24px;
    text-align: center;
    border-left: 1px solid var(--border);
}

.lenta-stat:first-child {
    border-left: 0;
}

/* Кегль плавает: «888 млрд ₽» склеен неразрывными пробелами
   и при 34px не помещается в четверть ширины планшета. */
.lenta-stat__value {
    font-size: clamp(24px, 3.1vw, 34px);
    font-weight: 700;
    line-height: 1.1;
    color: var(--value);
    white-space: nowrap;
}

/* Жёлтая черта под цифрой — жёлтый здесь фон, а не текст. */
.lenta-stat__value::after {
    content: "";
    display: block;
    width: 32px;
    height: 4px;
    margin: 12px auto 10px;
    border-radius: 2px;
    background: var(--accent);
}

.lenta-stat__label {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* --- Карточки: форматы, логистика, направления ----------------------------- */

.lenta-cards {
    display: grid;
    gap: 12px;
}

.lenta-cards--4 {
    grid-template-columns: repeat(4, 1fr);
}

.lenta-cards--3 {
    grid-template-columns: repeat(3, 1fr);
}

.lenta-card {
    min-width: 0;
    padding: 24px 22px 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    transition: border-color .2s, transform .2s;
}

.lenta-card:hover {
    border-color: var(--accent-hover);
    transform: translateY(-3px);
}

.lenta-card .lenta-icon-circle {
    margin-bottom: 18px;
}

/* min-width: 0 — чтобы длинные слова не распирали карточку на 320px. */
.lenta-card__body {
    min-width: 0;
}

.lenta-card__count {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--value);
    margin-bottom: 6px;
    white-space: nowrap;
}

.lenta-card__name {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--text-soft);
    overflow-wrap: break-word;
}

/* Карточка без числа — название становится заголовком. Описаний
   к экспресс-доставке и самовывозу заказчик не дал, не сочиняем. */
.lenta-card__name--lead {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}

/* Торговая площадь — строка во всю ширину под форматами.
   «Около» остаётся: значение приблизительное. */
.lenta-area {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 18px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-soft);
}

.lenta-area::before {
    content: "";
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--accent);
}

.lenta-area strong {
    color: var(--text);
    font-weight: 700;
    white-space: nowrap;
}

/* Направления — плитки строкой «иконка + название»: описаний к ним
   заказчик не дал, плитка получает только название из брифа. */
.lenta-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
    transition: border-color .2s;
}

.lenta-tile:hover {
    border-color: var(--accent-hover);
}

/* --- Адаптивность --------------------------------------------------------- */

@media (max-width: 900px) {
    .lenta-hero {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .lenta-hero__shot {
        aspect-ratio: 16 / 9;
        order: -1;
    }

    .lenta-cards--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .lenta-cards--3 {
        grid-template-columns: 1fr;
    }

    .lenta-cards--3 .lenta-card {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 16px;
        align-items: center;
        padding: 16px 18px;
    }

    .lenta-cards--3 .lenta-card .lenta-icon-circle {
        margin-bottom: 0;
    }

    .lenta-tile {
        padding: 16px 18px;
    }
}

@media (max-width: 640px) {
    .lenta-stats {
        grid-template-columns: 1fr 1fr;
    }

    .lenta-stat:nth-child(3) {
        border-left: 0;
    }

    .lenta-stat:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }
}

/* На 320px две колонки крупных цифр упираются в min-content и вылезают
   за экран — поэтому меняем раскладку, а не кегль. */
@media (max-width: 480px) {
    .lenta-logo__img {
        width: 220px;
    }

    .lenta-hero__subtitle {
        font-size: 15.5px;
    }

    .lenta-stats {
        grid-template-columns: 1fr;
    }

    .lenta-stat {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        text-align: left;
        padding: 15px 18px;
        border-left: 0;
        border-top: 1px solid var(--border);
    }

    .lenta-stat:first-child {
        border-top: 0;
    }

    .lenta-stat:nth-child(3) {
        border-left: 0;
    }

    .lenta-stat__value {
        font-size: 22px;
        flex-shrink: 0;
    }

    /* Черта под цифрой в строке не помещается — убираем. */
    .lenta-stat__value::after {
        display: none;
    }

    .lenta-stat__label {
        min-width: 0;
        text-align: right;
    }

    .lenta-cards--4 {
        grid-template-columns: 1fr;
    }

    .lenta-cards--4 .lenta-card {
        display: grid;
        grid-template-columns: 48px 1fr;
        gap: 16px;
        align-items: center;
        padding: 16px 18px;
    }

    .lenta-cards--4 .lenta-card .lenta-icon-circle {
        margin-bottom: 0;
    }

    .lenta-card__count {
        font-size: 24px;
        margin-bottom: 2px;
    }

    .lenta-area {
        align-items: flex-start;
        padding: 16px 18px;
    }

    .lenta-area::before {
        margin-top: 7px;
    }
}

/* --- z-card с корпоративного сайта (эксперимент B2/B3) ---------------------
   Источник — .z-card--theme-dark со страницы /ru/strategy/: фон #202021,
   радиус 8px, светлый заголовок сверху, жёлтый показатель
   (.z-key-indicator--theme-accent), в углу едва заметное кольцо — белый
   контур с прозрачностью 4%. Карточка тёмная в обеих темах, поэтому цвета
   заданы напрямую, а не переменными палитры: жёлтый здесь стоит на тёмном.
   ------------------------------------------------------------------------- */

.lenta-zcard {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border-radius: 8px;
    background: #202021;
    color: #FFFFFF;
    transition: background-color .2s;
}

/* Hover как у .z-card--link тёмной темы: #202021 → #373738. */
.lenta-zcard:hover {
    background: #373738;
}

/* Кольцо-декор: копия card-decor.svg сайта, одна окружность. */
.lenta-zcard::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 180px;
    aspect-ratio: 224 / 218;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 224 218' fill='none'%3E%3Ccircle opacity='.04' cx='46.17' cy='177.83' r='131.83' stroke='%23fff' stroke-width='92'/%3E%3C/svg%3E") no-repeat left bottom / contain;
    pointer-events: none;
}

.lenta-zcard > * {
    position: relative;
}

.lenta-zcard__title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.15;
    color: #F1F1F1;
}

.lenta-zcard__indicator {
    align-self: flex-end;
    text-align: right;
}

.lenta-zcard__value {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: #FFDD00;
    white-space: nowrap;
}

.lenta-zcard__label {
    margin-top: 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: #FFDD00;
}

/* --- Вариант B — «Графит» --------------------------------------------------
   Hero на графитовой плашке #4D4D4F во всю ширину — тон основной картинки
   заказчика. Плашка графитовая в обеих темах, поэтому логотип в hero
   всегда logo-dark. Показатели — на --surface.
   ------------------------------------------------------------------------- */

.lenta-hero {
    padding: 40px;
    border-radius: 16px;
    background: #4D4D4F;
}

/* В тёмной теме графит почти сливается с фоном страницы — нужна рамка. */
html[theme=dark] .lenta-hero {
    border: 1px solid var(--border-strong);
}

/* (0,3,0) — сильнее, чем html[theme=dark] .lenta-logo__img--* (0,2,1). */
.lenta-profile .lenta-hero .lenta-logo__img--light {
    display: none;
}

.lenta-profile .lenta-hero .lenta-logo__img--dark {
    display: block;
}

.lenta-hero__subtitle {
    color: rgba(255, 255, 255, .84);
}

.lenta-hero__shot {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .10);
}

.lenta-stats {
    background: var(--surface);
}

@media (max-width: 900px) {
    .lenta-hero {
        padding: 28px;
    }
}

@media (max-width: 480px) {
    .lenta-hero {
        padding: 18px 18px 24px;
    }
}
/* --- Вариант B3 — «Графит + z-card с форматами» ---------------------------
   Поверх варианта B. Под логотипом и подзаголовком — тёмная карточка
   по образцу «Близость к покупателям» с /ru/strategy/: заголовок,
   жёлтая линия, сетка 2×2 белых чисел. Секция «Форматы магазинов»
   целиком переехала в неё, второе предложение брифа — в hero.
   ------------------------------------------------------------------------- */

.lenta-hero {
    align-items: start;
}

.lenta-hero__lead {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
}

.lenta-zcard--grid {
    margin-top: 28px;
    gap: 0;
    justify-content: flex-start;
}

.lenta-zcard--grid .lenta-zcard__title {
    padding-bottom: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid #FFDD00;
}

.lenta-zcard__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
}

.lenta-zcard__item {
    min-width: 0;
}

.lenta-zcard__num {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    color: #FFFFFF;
    white-space: nowrap;
}

.lenta-zcard__text {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: #F1F1F1;
}

.lenta-zcard__foot {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(241, 241, 241, .14);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(241, 241, 241, .74);
}

.lenta-zcard__foot strong {
    color: #FFDD00;
    font-weight: 700;
    white-space: nowrap;
}

/* Кадр тянется по высоте левой колонки: она выше, чем 4/3. */
.lenta-hero__shot {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 320px;
}

@media (max-width: 900px) {
    .lenta-hero__shot {
        align-self: auto;
        aspect-ratio: 16 / 9;
        min-height: 0;
    }
}

@media (max-width: 480px) {
    .lenta-zcard--grid {
        padding: 20px 18px;
    }

    /* «гипермаркетов» в половину ширины 320px не помещается —
       сетка 2×2 становится строками «число + подпись». */
    .lenta-zcard__grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .lenta-zcard__item {
        display: flex;
        align-items: baseline;
        gap: 10px;
    }

    .lenta-zcard__num {
        font-size: 24px;
        flex-shrink: 0;
    }

    .lenta-zcard__text {
        margin-top: 0;
    }
}
.faq details::details-content{block-size:0;transition:block-size .6s,content-visibility .6s;transition-behavior:allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq{interpolate-size:allow-keywords;max-width:1200px;margin:0 auto;padding:64px 0}
@media (max-width:1200px){
.faq{padding:48px 16px}
}
.faq__title{font-size:32px;font-weight:900;text-align:center;margin-bottom:40px}
.faq__list{display:flex;flex-direction:column;gap:0}
.faq__item{margin-bottom:16px;border-radius:16px;overflow:hidden}
.faq__question{cursor:pointer;font-size:16px;font-weight:600;list-style:none;transition:color .2s;padding:20px 24px;background-color:var(--gray-0);display:flex;align-items:center;gap:12px}
.faq__question::before{content:"";display:block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");mask-repeat:no-repeat;mask-size:contain;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;transition:transform .3s ease}
.faq__item[open] .faq__question::before{transform:rotate(90deg)}
.faq__question::-webkit-details-marker{display:none}
.faq__question::marker{content:""}
.faq__item[open] .faq__question,.faq__question:hover{color:var(--brand-pink)}
.faq__answer{font-size:15px;line-height:1.6;padding:16px 24px;background-color:var(--gray-0)}
.faq__answer ol,.faq__answer ul{padding-left:20px}
.faq__answer ol li{list-style:decimal}
.faq__answer ul li{list-style:initial}
.faq__answer p+p{margin-top:8px}