/* INTERIOR LAB — storefront stylesheet.
   Заменяет public-site.css (стили Dune London, другой бренд).

   Макет свёрстан под 1728px (desktop) и 375px (mobile). Прототип из Figma
   подгонял ширину через transform: scale() — здесь этого нет: обычный
   поток, контейнер max-width 1728px, брейкпоинт 767px.

   Значения (цвета, размеры, отступы) взяты из хендоффа без округления. */

:root {
    /* Цвета */
    --il-dark: rgb(26, 23, 27);
    --il-dark-2: rgb(45, 42, 46);
    --il-white: rgb(255, 255, 255);
    --il-grey-bg: rgb(217, 217, 217);
    --il-beige: rgb(217, 212, 202);
    --il-beige-dark: rgb(74, 66, 52);
    --il-section-bg: rgb(229, 229, 229);
    --il-tabs-bg: rgb(237, 237, 237);
    --il-accent: rgb(255, 252, 158);
    --il-muted: rgb(136, 136, 136);
    --il-muted-2: rgb(142, 142, 147);
    --il-nav-off: rgb(187, 187, 187);
    --il-tab-text: rgb(21, 21, 21);
    --il-crumb: rgb(84, 84, 84);
    --il-crumb-active: rgb(182, 182, 182);
    --il-border: rgb(51, 51, 51);
    --il-border-soft: rgb(38, 38, 38);
    --il-stroke: rgb(145, 137, 137);
    --il-stroke-2: rgb(193, 193, 193);
    --il-error: rgb(230, 57, 70);
    --il-success: rgb(26, 152, 130);

    /* Шрифты. SF Pro Display не раздаётся Google Fonts — системный стек,
       как в самом хендоффе, с Inter в качестве замены. */
    --il-font-ui: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
    --il-font-display: 'Playfair Display', Georgia, serif;
    --il-font-geist: 'Geist', 'Inter', sans-serif;
    --il-font-body: 'Inter', sans-serif;

    /* Сетка. Ширина макета 1728px; боковые поля в хендоффе 90px у шапки и
       80px у футера — сохранены как в макете. */
    --il-max: 1728px;
    --il-gutter: 80px;
    /* Поля шапки едут вместе с шириной: 90 и 137 из макета — это 5.208vw
       и 7.928vw. На фиксированных лента меню не помещалась уже ниже
       1500 и правый край (язык, поиск) срезался. */
    --il-gutter-header: clamp(20px, 5.208vw, 90px);
    --il-gutter-header-right: clamp(20px, 7.928vw, 137px);
    /* Заголовки секций в макете стоят на 62px, а не на поле футера */
    --il-gutter-section: 62px;
    --il-gutter-mobile: 20px;

    /* 100px на макетных 1728 */
    --il-header-h: clamp(64px, 5.787vw, 100px);
    --il-header-h-mobile: 120px;

    /* Полоска следующей секции, видная из-под hero, — подсказка, что
       страница продолжается. */
    --il-hero-peek: 72px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--il-dark);
    color: var(--il-white);
    font-family: var(--il-font-ui);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    max-width: 100%;
}

a {
    color: var(--il-beige);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--il-white);
}

button {
    font: inherit;
}

/* Контент между шапкой и футером. Шапка в потоке, поэтому отступ сверху
   не нужен — фиксированной она в макете не является. */
.il-main {
    display: block;
    background: var(--il-white);
    color: var(--il-dark);
}

.il-container {
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    padding-inline: var(--il-gutter);
}

/* Кнопки. В макете обводка задана как `inset 0 0 0 1px`, а не border —
   чтобы линия шла внутрь и не меняла габарит. Скруглений нет. */
.il-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 32px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

/* На тёмном фоне */
.il-btn--light {
    box-shadow: inset 0 0 0 1px var(--il-stroke);
    color: var(--il-beige);
}

.il-btn--light:hover {
    box-shadow: inset 0 0 0 1px var(--il-beige);
    background: rgba(217, 212, 202, .08);
    color: var(--il-white);
}

/* На светлом фоне */
.il-btn--dark {
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    color: var(--il-dark);
}

.il-btn--dark:hover {
    box-shadow: inset 0 0 0 1px var(--il-dark);
    background: rgba(26, 23, 27, .06);
    color: var(--il-dark);
}

.il-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------ */
/* Шапка                                                               */
/* ------------------------------------------------------------------ */

.il-header {
    position: relative;
    z-index: 50;
    background: var(--il-dark);
}

.il-header__inner {
    width: 100%;
    max-width: var(--il-max);
    min-height: var(--il-header-h);
    margin: 0 auto;
    /* Логотип на 90px слева, лента меню кончается на 1591 из 1728 —
       отсюда правое поле 137px, а не симметричные 90. */
    padding-inline: var(--il-gutter-header) var(--il-gutter-header-right);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 40px на макетных 1728 */
    gap: clamp(12px, 2.315vw, 40px);
}

.il-header__logo {
    display: block;
    flex-shrink: 0;
}

.il-header__logo img {
    display: block;
    /* 286×28 на макетных 1728; пропорция держится через aspect-ratio,
       иначе при плавающей ширине лого сплющивается. */
    width: clamp(170px, 16.55vw, 286px);
    height: auto;
    aspect-ratio: 286 / 28;
}

.il-header__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* 60px на макетных 1728 */
    gap: clamp(14px, 3.472vw, 60px);
}

.il-header__link {
    font-family: var(--il-font-ui);
    font-weight: 400;
    /* 16px на макетных 1728 */
    font-size: clamp(13px, .926vw, 16px);
    line-height: 1.4;
    white-space: nowrap;
    color: var(--il-nav-off);
}

.il-header__link:hover,
.il-header__link.is-active {
    color: var(--il-white);
}

.il-header__fav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* Гнёзда иконок 24×24 из макета — тоже в долях ширины, иначе на 1280
   они выглядят непропорционально крупными рядом с уехавшим текстом. */
.il-header__fav-icon {
    display: flex;
    width: clamp(18px, 1.389vw, 24px);
    height: clamp(18px, 1.389vw, 24px);
    justify-content: center;
    align-items: center;
}

.il-header__fav-icon img {
    display: block;
    width: 69.45%;
    height: auto;
    aspect-ratio: 16.668 / 14.18;
}

.il-header__fav-count {
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: clamp(12px, .81vw, 14px);
    line-height: 100%;
    white-space: nowrap;
    color: var(--il-accent);
}

.il-header__icon {
    display: flex;
    width: clamp(18px, 1.389vw, 24px);
    height: clamp(18px, 1.389vw, 24px);
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.il-header__icon img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

.il-header__lang {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.il-header__lang a {
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: clamp(13px, .926vw, 16px);
    line-height: 1.4;
    white-space: nowrap;
    color: var(--il-nav-off);
}

.il-header__lang a.is-active,
.il-header__lang a:hover {
    color: var(--il-white);
}

.il-header__burger {
    display: none;
}

/* Ниже 1280 поля и логотип уже упёрлись в свои минимумы, а кегль и
   иконки — в свои: дальше ужимать нечего, и лента перестаёт помещаться
   до самого мобильного брейкпоинта. Поэтому здесь шаг фиксируется, а
   декоративная булавка (она aria-hidden и никуда не ведёт) убирается. */
@media (max-width: 1279px) {
    .il-header__nav {
        gap: 16px;
    }

    .il-header__nav > span.il-header__icon {
        display: none;
    }
}

/* Мобильное меню. В макете панель — rgba(15,15,15,0.8) с blur(24px);
   в прототипе блюр снят из-за scale(), здесь он возвращён. */
.il-menu {
    /* На десктопе панели нет вовсе — бургер скрыт, открыть её нечем. */
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--il-header-h-mobile);
    bottom: 0;
    z-index: 60;
    padding: 24px 32px 60px;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
    overflow-y: auto;
    background: rgba(15, 15, 15, 0.8);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.il-menu[data-open="1"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.il-menu__top {
    display: flex;
    justify-content: flex-end;
    min-height: 44px;
}

.il-menu__close {
    display: flex;
    width: 44px;
    height: 44px;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.il-menu__rule {
    height: 1px;
    align-self: stretch;
    background: var(--il-border-soft);
    flex-shrink: 0;
}

.il-menu__nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.il-menu__link {
    width: 100%;
    max-width: 311px;
    padding: 12px 0;
    font-family: var(--il-font-display);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.3;
    text-align: center;
    color: var(--il-white);
}

.il-menu__link.is-active {
    color: var(--il-accent);
}

.il-menu__bottom {
    display: flex;
    flex-direction: column;
    gap: 50px;
    justify-content: center;
    align-items: center;
    padding-block: 24px;
}

.il-menu__fav {
    display: flex;
    flex-direction: column;
    gap: 11px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    color: rgb(242, 242, 242);
}

.il-menu__fav img {
    display: block;
    width: 24.169px;
    height: 20.561px;
}

.il-menu__fav-count {
    display: flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px var(--il-border-soft);
    font-family: var(--il-font-geist);
    font-weight: 600;
    font-size: 12px;
    line-height: 100%;
    white-space: nowrap;
    color: rgb(242, 242, 242);
}

.il-menu__fav-label {
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    color: rgb(242, 242, 242);
}

.il-menu__lang {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.il-menu__lang a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--il-muted-2);
}

.il-menu__lang a.is-active {
    font-weight: 600;
    color: rgb(242, 242, 242);
}

/* Точка-маркер под активным языком */
.il-menu__lang a.is-active::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: rgb(242, 242, 242);
}

.il-menu__sign {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    text-align: center;
    color: var(--il-muted-2);
}

.il-menu__sign span:first-child {
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Модальные окна                                                      */
/* ------------------------------------------------------------------ */

/* Скрыто по умолчанию; показывает класс `active`, который вешает
   showModal() из main.js. Скрытие через display, а не opacity, — иначе
   невидимый диалог перехватывал бы клики по странице. */
.il-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
}

.il-modal.active {
    display: block;
}

.il-modal__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--il-gutter-mobile);
    background: rgba(26, 23, 27, .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.il-modal__card {
    position: relative;
    width: 100%;
    max-width: 440px;
    padding: 48px 40px 40px;
    background: var(--il-white);
    color: var(--il-dark);
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
}

.il-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--il-font-ui);
    font-size: 28px;
    line-height: 1;
    color: var(--il-crumb);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color .2s ease;
}

.il-modal__close:hover {
    color: var(--il-dark);
}

.il-modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.il-modal__icon {
    display: flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    color: var(--il-success);
}

.il-modal__icon svg {
    width: 32px;
    height: 32px;
}

.il-modal__icon--error {
    color: var(--il-error);
}

.il-modal__text {
    font-family: var(--il-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--il-dark);
}

/* ------------------------------------------------------------------ */
/* 404                                                                 */
/* ------------------------------------------------------------------ */

/* Экрана 404 в макете нет — собран из токенов INTERIOR LAB по образцу
   hero: тёмный фон, крупное число цветом заголовка hero, под ним
   объяснение и два выхода. min-height считается от вьюпорта за вычетом
   шапки, чтобы подвал не выезжал вверх на коротком тексте. */
.il-nopage {
    min-height: calc(100vh - var(--il-header-h));
    background: var(--il-dark);
    color: var(--il-white);
    display: flex;
    align-items: center;
}

.il-nopage__inner {
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 120px var(--il-gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.il-nopage__code {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 140px;
    line-height: .8;
    letter-spacing: -.02em;
    color: var(--il-beige);
}

.il-nopage__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.1;
    color: var(--il-white);
}

.il-nopage__text {
    max-width: 520px;
    margin: 0;
    font-family: var(--il-font-body);
    font-weight: 400;
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .6);
}

.il-nopage__actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/* Футер                                                               */
/* ------------------------------------------------------------------ */

.il-footer {
    background: var(--il-dark);
    border-top: 1px solid var(--il-border);
}

.il-footer__inner {
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 100px var(--il-gutter);
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.il-footer__top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.il-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    max-width: 400px;
}

.il-footer__brand img {
    display: block;
    width: 200px;
    height: auto;
}

.il-footer__tagline {
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: var(--il-muted);
}

/* Колонок стало три (каталог, компания, правовая), поэтому шаг едет
   вместе с шириной, а на узком — переносятся. */
.il-footer__menus {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 32px clamp(28px, 4.63vw, 80px);
    align-items: flex-start;
}

.il-footer__col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.il-footer__col a,
.il-footer__col-title {
    font-family: var(--il-font-geist);
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    white-space: nowrap;
    color: var(--il-beige);
}

/* «Политика конфиденциальности» в одну строку не помещается — здесь
   переносы разрешены, в отличие от коротких пунктов соседних колонок. */
.il-footer__col--legal a {
    max-width: 220px;
    white-space: normal;
    line-height: 1.3;
}

.il-footer__contacts {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    max-width: 260px;
}

.il-footer__phone {
    font-family: var(--il-font-geist);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--il-white);
}

.il-footer__address {
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    color: var(--il-muted);
}

.il-footer__bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.il-footer__copy {
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    color: rgba(255, 255, 255, .302);
}

.il-footer__social {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
}

.il-footer__social a {
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    white-space: nowrap;
    color: var(--il-muted);
}

/* ------------------------------------------------------------------ */
/* Мобильная версия — отдельный дизайн, а не адаптив десктопного        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
    :root {
        --il-gutter: var(--il-gutter-mobile);
        --il-gutter-header: var(--il-gutter-mobile);
    }

    /* Логотип и бургер в макете выровнены по нижнему краю шапки:
       120 − 63 − 23.101 ≈ 34 и 120 − 62 − 24 = 34. */
    .il-header__inner {
        min-height: var(--il-header-h-mobile);
        padding: 0 31px 34px 34px;
        align-items: flex-end;
    }

    .il-menu {
        display: flex;
    }

    /* 235.63px на макетных 375 — на узких экранах логотип ужимается
       вместе с ними, иначе на 320 он выдавливает бургер. */
    .il-header__logo img {
        width: min(235.63px, 62.83vw);
        height: auto;
    }

    .il-header__nav {
        display: none;
    }

    .il-header__burger {
        display: flex;
        width: 24px;
        height: 24px;
        justify-content: center;
        align-items: center;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        flex-shrink: 0;
    }

    /* Пока меню открыто, страница под ним не скроллится */
    body.il-menu-open {
        overflow: hidden;
    }

    .il-nopage {
        min-height: calc(100vh - var(--il-header-h-mobile));
    }

    .il-nopage__inner {
        padding: 80px var(--il-gutter-mobile);
        gap: 20px;
    }

    .il-nopage__code {
        font-size: 96px;
    }

    .il-nopage__title {
        font-size: 31px;
    }

    .il-nopage__text {
        font-size: 16px;
    }

    .il-nopage__actions {
        flex-direction: column;
        align-self: stretch;
    }

    .il-btn {
        width: 100%;
    }

    .il-footer__inner {
        padding: 50px 31px;
        gap: 80px;
    }

    .il-footer__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 80px;
    }

    .il-footer__brand {
        max-width: 273px;
    }

    .il-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
}

/* Прототип отключал blur из-за scale(); в продакшне он есть, но на
   устройствах без поддержки фон уплотняется, чтобы текст читался. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .il-menu {
        background: rgba(15, 15, 15, .96);
    }
}

/* ================================================================== */
/* Общие компоненты витрины                                           */
/* ================================================================== */

/* Заголовок секции: крупный заголовок, подзаголовок и ссылка справа. */
.il-section {
    padding-block: 100px;
}

.il-section > .il-container {
    padding-inline: var(--il-gutter-section);
}

.il-section__head {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 48px;
}

.il-section__titles {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.il-section__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 60px;
    line-height: 1.05;
    color: var(--il-dark);
}

.il-section__subtitle {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.4;
    color: rgba(26, 23, 27, .5);
}

/* Подзаголовок «Отзывов» в макете крупнее общего — 34px */
.il-section--reviews .il-section__subtitle {
    font-size: 34px;
    color: var(--il-dark);
}

.il-section__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    flex-shrink: 0;
}

.il-section__link {
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--il-dark);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Варианты фона секций — как в макете:
   dark  rgb(26,23,27)   — плитки Concept/Showroom/…
   sand  rgb(74,66,52)   — «Новинки»
   band  rgb(217,217,217) — полоса-заголовок «Проекты»
   белый фон — «Отзывы» и «Как нас найти» (значение по умолчанию) */
.il-section--dark {
    background: var(--il-dark);
}

.il-section--sand {
    background: var(--il-beige-dark);
}

/* Секция с фотоподложкой: цветная панель занимает не всю высоту, снизу
   видна полоса фото. Так устроены «Новинки» — 920px панели из 1117px
   секции. */
/* Секция 1117px, панель внутри 920px — оставшиеся 197 делятся поровну,
   и полоса фото видна и над панелью, и под ней. */
.il-section--photo {
    position: relative;
    background: var(--il-dark);
    padding-block: 98px;
}

.il-section__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.il-section__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.il-section__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(162.721deg, rgb(26, 23, 27) 46.17%, rgba(26, 23, 27, 0) 99.27%);
}

.il-section__panel {
    position: relative;
    min-height: 920px;
    /* Панель выше содержимого — в макете 920px при контенте примерно на
       700. Без этого остаток высоты копился бы снизу, и блок выглядел
       прижатым к верху. */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Подзаголовок в макете крупнее общего — 26px */
.il-section--sand .il-section__subtitle {
    font-size: 26px;
    color: var(--il-beige);
}

/* «Каталог» — бежевая полоса rgb(217,212,202) с тёмным текстом */
.il-section--beige {
    background: var(--il-beige);
}

.il-section--beige .il-section__subtitle {
    font-size: 26px;
    color: var(--il-dark);
}

.il-section--dark .il-section__title,
.il-section--sand .il-section__title {
    color: var(--il-white);
}

.il-section--dark .il-section__subtitle,
.il-section--sand .il-section__subtitle {
    color: rgba(255, 255, 255, .7);
}

.il-section--dark .il-section__link,
.il-section--sand .il-section__link {
    color: var(--il-beige);
}

/* Подзаголовок «Отзывов» в макете крупнее общего — 34px */
.il-section--reviews .il-section__subtitle {
    font-size: 34px;
    color: var(--il-dark);
}

.il-section__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Полоса-заголовок «Проекты»: светлый фон, заголовок 250px и подзаголовок
   41px. Отдельный вариант, а не общий .il-section__title, — такой кегль
   больше нигде не встречается. */
.il-band {
    /* 480 на макетных 1728 */
    min-height: clamp(320px, 27.78vw, 480px);
    background: var(--il-grey-bg);
    color: var(--il-dark);
    display: flex;
    align-items: center;
}

.il-band__inner {
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 80px var(--il-gutter);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
}

.il-band__title {
    margin: 0 0 24px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    /* 250px на макетных 1728. Кегль обязан ехать вместе с шириной: на
       фиксированных 250 слово не влезает уже на 1500 и обрезается. */
    font-size: clamp(78px, 14.468vw, 250px);
    line-height: .82;
    letter-spacing: -.03em;
    color: var(--il-dark);
}

.il-band__subtitle {
    margin: 0;
    max-width: 1095px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    /* 41px на макетных 1728 */
    font-size: clamp(20px, 2.373vw, 41px);
    line-height: 1.15;
    color: var(--il-dark);
}

/* Кнопки в макете стоят на 1379/160 при заголовке на 69/80 — отсюда
   отступ сверху 80px и зазор 12px между ними. */
.il-band__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 80px;
}

.il-band__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 261px;
    max-width: 100%;
    min-height: 34px;
    padding: 0 10px;
    box-shadow: inset 0 0 0 1px var(--il-stroke);
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
    color: var(--il-dark);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.il-band__action:hover {
    background: rgba(26, 23, 27, .06);
    box-shadow: inset 0 0 0 1px var(--il-dark);
    color: var(--il-dark);
}

/* До 1280 колонка кнопок в 261px съедает столько ширины, что заголовку
   её уже не хватает, — уводим кнопки под текст в строку. */
@media (max-width: 1279px) {
    .il-band__inner {
        flex-direction: column;
        gap: 32px;
    }

    .il-band__actions {
        flex-direction: row;
        flex-wrap: wrap;
        padding-top: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Карусель                                                            */
/* ------------------------------------------------------------------ */

/* В прототипе лента ездила через transform; здесь — нативный скролл со
   scroll-snap. Визуально то же самое, но работает свайп на тач-экранах и
   не ломается, когда карточек меньше, чем помещается в ряд. */
.il-rail {
    position: relative;
}

/* В макете ленты не заканчиваются на поле контейнера — карточки уходят
   за правый край экрана. Вытягиваем дорожку на всю ширину вьюпорта,
   сохраняя левое поле контейнера. */
.il-rail--bleed .il-rail__track {
    margin-right: calc(var(--il-gutter) * -1);
    padding-right: var(--il-gutter);
}

@media (min-width: 1889px) {
    /* Шире макета контейнер уже центрируется — вылет за край не нужен. */
    .il-rail--bleed .il-rail__track {
        margin-right: 0;
        padding-right: 0;
    }
}

.il-rail__track {
    display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.il-rail__track::-webkit-scrollbar {
    display: none;
}

/* Лента, которая не помещается, тянется мышью — см. initRailDrag().
   Курсор подсказывает, что её можно схватить. */
.il-rail__track.is-draggable {
    cursor: grab;
}

.il-rail__track.is-dragging {
    cursor: grabbing;
    user-select: none;
    /* Плавная прокрутка и привязка мешают тащить: первая догоняет курсор
       с задержкой, вторая дёргает ленту к ближайшей карточке. */
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.il-rail__track.is-dragging a,
.il-rail__track.is-dragging img {
    pointer-events: none;
}

.il-rail__track > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}

/* Предел ленты: стрелка гаснет и перестаёт нажиматься — как в макете. */

/* ------------------------------------------------------------------ */
/* Плитка 335×582 с полупрозрачной «шапкой»                            */
/* ------------------------------------------------------------------ */

.il-tile {
    position: relative;
    display: block;
    width: 335px;
    height: 582px;
    overflow: hidden;
    color: var(--il-white);
}

.il-tile__bg {
    position: absolute;
    inset: 0;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--il-beige-dark);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.il-tile:hover .il-tile__bg {
    transform: scale(1.04);
}

/* Затемнение снизу вверх, чтобы текст читался на любом фото */
.il-tile__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(-11.985deg, rgb(26, 23, 27) -1.4%, rgba(26, 23, 27, 0) 89.8%);
}

/* Панель с блюром. В прототипе blur снят из-за scale() — здесь возвращён,
   как указано в хендоффе. */
.il-tile__cap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 202px;
    background: rgba(217, 217, 217, .5);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
}

.il-tile__body {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 25px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.il-tile__title {
    margin: 0;
    font-family: var(--il-font-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.3;
    color: var(--il-white);
}

.il-tile__text {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.2;
    color: var(--il-white);
}

/* Пять раскладок плитки из макета: «шапка» стоит на разной высоте и
   разного оттенка. Это ритм композиции, а не свойство страницы, поэтому
   класс назначает вьюха по позиции в ленте, а не поле в базе. Отдельные
   классы вместо :nth-child — чтобы порядок плиток можно было менять в
   админке (main_order), не завися от того, какой она идёт в разметке.

   v1 — сверху, серая, 202       (Concept)
   v2 — по центру, бежевая, 202  (Showroom)
   v3 — внизу, коричневая, 178   (Design)
   v4 — выше центра, чёрная, 221 (Projects)
   v5 — ниже центра, тёмно-бежевая, 202 (Brands) */
.il-tile--v1 .il-tile__cap {
    top: 0;
    background: rgba(217, 217, 217, .5);
}

.il-tile--v1 .il-tile__body {
    top: 25px;
}

.il-tile--v2 .il-tile__cap {
    top: 202px;
    background: rgba(217, 212, 202, .5);
}

.il-tile--v2 .il-tile__body {
    top: 227px;
}

.il-tile--v3 .il-tile__cap {
    top: 404px;
    height: 178px;
    background: rgba(122, 106, 91, .5);
}

.il-tile--v3 .il-tile__body {
    top: 431px;
}

.il-tile--v4 .il-tile__cap {
    top: 68px;
    height: 221px;
    background: rgba(0, 0, 0, .5);
}

.il-tile--v4 .il-tile__body {
    top: 93px;
}

.il-tile--v5 .il-tile__cap {
    top: 291px;
    background: rgba(74, 66, 52, .5);
}

.il-tile--v5 .il-tile__body {
    top: 316px;
}

/* ------------------------------------------------------------------ */
/* Карточка товара 335×582                                             */
/* ------------------------------------------------------------------ */

.il-product {
    position: relative;
    width: 335px;
    height: auto;
    aspect-ratio: 335 / 582;
    overflow: hidden;
    background: var(--il-white);
    /* Как и у плитки: всё внутри считается от ширины самой карточки,
       поэтому она одинаково выглядит и в ленте на 335px, и на узком
       телефоне, где ужимается. 1cqw = 1% ширины карточки. */
    container-type: inline-size;
}

.il-product__media {
    position: absolute;
    left: 14.328%;
    top: 6.873%;
    width: 62.09%;
    height: 38.316%;
    overflow: hidden;
    /* multiply убирает белую подложку студийного фото — как в макете */
    mix-blend-mode: multiply;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.il-product:hover .il-product__media {
    transform: scale(1.04);
}

.il-product__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.il-product__body {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    bottom: 0;
    padding: 7.463cqw 15.522cqw 6.866cqw 8.955cqw;
    background: var(--il-grey-bg);
    display: flex;
    flex-direction: column;
    gap: 2.985cqw;
}

.il-product__eyebrow {
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 4.179cqw;
    line-height: 1.1;
    color: var(--il-dark);
}

.il-product__title {
    margin: 0;
    font-family: var(--il-font-display);
    font-weight: 400;
    font-size: 8.358cqw;
    line-height: 1.1;
    color: var(--il-dark);
}

.il-product__category {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 4.776cqw;
    line-height: 1.4;
    color: rgba(26, 23, 27, .5);
}

.il-product__text {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 4.776cqw;
    line-height: 1.4;
    letter-spacing: -.03em;
    color: var(--il-dark);
}

/* Ссылка накрывает карточку целиком, кнопка избранного лежит выше неё */
.il-product__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.il-product__fav {
    position: absolute;
    left: 8.955%;
    bottom: 4.639%;
    z-index: 2;
    width: 55.522%;
    min-height: 5.842%;
    padding: 2.985cqw;
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--il-stroke);
    border: 0;
    cursor: pointer;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 3.881cqw;
    line-height: 1;
    color: var(--il-dark);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.il-product__fav:hover {
    background: rgba(26, 23, 27, .06);
    box-shadow: inset 0 0 0 1px var(--il-dark);
}

.il-product__fav svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
}

.il-product__fav.active svg {
    fill: currentColor;
}

/* ------------------------------------------------------------------ */
/* Главная                                                             */
/* ------------------------------------------------------------------ */

/* Геометрия из макета (hero 1728×1117, отсчёт от верха страницы):
   заголовок 77/148, подзаголовок 80/528, сетка 80/699 (1561×361),
   подпись внутри сетки 134/720. Шапка занимает первые 100px, поэтому
   внутри hero отступы считаются от неё. */
.il-hero {
    position: relative;
    /* Помещается в экран целиком, снизу остаётся полоска следующей
       секции. svh — чтобы на мобильных не прыгало при сворачивании
       адресной строки; vh идёт первым как запасной вариант. */
    height: calc(100vh - var(--il-header-h) - var(--il-hero-peek));
    height: calc(100svh - var(--il-header-h) - var(--il-hero-peek));
    min-height: 460px;
    max-height: 1017px;
    overflow: hidden;
    background: var(--il-dark);
    display: flex;
    align-items: stretch;
}

.il-hero__media {
    position: absolute;
    inset: 0;
}

.il-hero__media video,
.il-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Градиент из макета: тёмное слева, прозрачное справа */
.il-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(123.294deg, rgb(26, 23, 27) 31.26%, rgba(26, 23, 27, 0) 92.57%);
}

.il-hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    /* Отступы сжимаются вместе с окном: фиксированные 48px сверху на
       низком экране съедают место, которого не хватает заголовку. */
    padding: clamp(20px, 5vh, 48px) var(--il-gutter) clamp(24px, 5vh, 56px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.il-hero__title {
    max-width: 1456px;
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    /* 140px на макетных 1728 = 8.1vw. Ограничение по vh нужно низким
       окнам: иначе заголовок в три строки туда не помещается. */
    font-size: clamp(34px, min(8.1vw, 13.5vh), 140px);
    line-height: .8;
    color: var(--il-beige);
}

.il-hero__text {
    margin: clamp(12px, 4vh, 44px) 0 0;
    max-width: 709px;
    font-family: var(--il-font-display);
    font-weight: 400;
    font-size: clamp(17px, min(1.97vw, 3.3vh), 34px);
    line-height: 1.3;
    color: var(--il-white);
}

/* Кнопка hero. Подложка и обводка — те же значения, что у ячеек сетки
   в макете (фон rgb(217,217,217) и линия rgb(198,198,198) при
   прозрачности .13), только сетки вокруг нет.
   Боковой паддинг 54px даёт текст ровно на 134px от края страницы —
   как в макете, при поле контейнера 80px. */
.il-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 0 54px;
    margin: clamp(24px, 10vh, 104px) 0 0;
    background: rgba(217, 217, 217, .13);
    box-shadow: inset 0 0 0 1px rgba(198, 198, 198, .4);
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 20px;
    line-height: .8;
    white-space: nowrap;
    color: var(--il-white);
    transition: background-color .25s ease, box-shadow .25s ease;
}

.il-hero__cta:hover {
    background: rgba(217, 217, 217, .2);
    box-shadow: inset 0 0 0 1px rgba(198, 198, 198, .7);
    color: var(--il-white);
}

/* Полоса с логотипом под hero. В макете 1728×480: крупный логотип
   1166×114 на 90/100 и текст 41px под ним на 83/281 — колонкой, а не
   в строку. Размеры текучие: 1166/1728 = 67.5vw, 41/1728 = 2.37vw. */
.il-logoline {
    min-height: 480px;
    background: var(--il-grey-bg);
    color: var(--il-dark);
    display: flex;
    align-items: center;
}

.il-logoline__inner {
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    padding: clamp(40px, 5.8vw, 100px) var(--il-gutter);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(24px, 3.9vw, 67px);
}

.il-logoline img {
    display: block;
    width: min(1166px, 67.5vw);
    height: auto;
    flex-shrink: 0;
}

.il-logoline__text {
    margin: 0;
    max-width: 1284px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: clamp(18px, 2.37vw, 41px);
    line-height: 1.2;
    color: var(--il-dark);
}

/* Полоса с логотипом + плитки. В макете это одна секция 1728×1117 с
   общей фотоподложкой и тёмным градиентом слева. Серая полоса лежит на
   подложке сверху непрозрачным блоком, плитки — ниже через 26px, под
   ними 29px до конца секции. Собственных вертикальных полей у секции
   нет: ритм задают её части. */
.il-tiles {
    position: relative;
    background: var(--il-dark);
    padding-bottom: 29px;
}

.il-tiles > .il-logoline,
.il-tiles > .il-rail {
    position: relative;
    z-index: 1;
}

.il-tiles > .il-rail {
    margin-top: 26px;
}

.il-tiles__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.il-tiles__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 100% 100%;
    display: block;
}

.il-tiles__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(73.878deg, rgb(26, 23, 27) 27.13%, rgba(26, 23, 27, 0) 55.41%);
}

/* Лента плиток идёт во всю ширину экрана, а не по контейнеру: в макете
   она равна подложке минус боковой отступ 26px. Стрелок здесь нет — в
   макете плитки заполняют ширину целиком, а на узких экранах лента
   листается свайпом. */
.il-rail--tiles {
    padding-inline: 26px;
}

.il-rail--tiles .il-rail__track {
    gap: 0;
    /* Запасное значение, если вьюха не передала количество плиток */
    --il-tile-count: 5;
}

/* Блок фиксирован под пять плиток: они делят ленту поровну и всегда
   умещаются в экран целиком — ни стрелок, ни прокрутки на десктопе не
   нужно. В макете 5 × 335 = 1675 при ленте шириной ровно 1675.

   Блок тянется вместе с экраном, поэтому высота не фиксированная, а
   задана пропорцией 335:582 из макета: плитка сжимается в обе стороны
   разом, а не превращается в узкий столбец. Всё внутри неё поэтому тоже
   в процентах и vw. */
.il-rail--tiles .il-rail__track {
    overflow-x: visible;
}

.il-rail--tiles .il-rail__track {
    /* Колонок всегда не меньше пяти: при двух-трёх плитках они сохраняют
       макетный размер и лента просто не дозаполняется, а не раздувает
       карточки на пол-экрана. */
    --il-tile-cols: max(5, var(--il-tile-count));
}

.il-rail--tiles .il-tile {
    width: calc(100% / var(--il-tile-cols));
    height: auto;
    aspect-ratio: 335 / 582;
    /* Кегль и отступы внутри считаются от ширины самой плитки, а не от
       ширины окна: плиток пять, и на их размер влияют ещё и поля ленты,
       так что vw дал бы промах. 1cqw = 1% ширины плитки, поэтому числа
       ниже — это доли от макетных 335px. */
    container-type: inline-size;
}

/* Доли высоты плитки: 202/582, 25/582 и т.д. — те же числа макета */
.il-rail--tiles .il-tile__cap {
    height: 34.708%;
}

.il-rail--tiles .il-tile__body {
    left: 8.955%;
    right: 8.955%;
    top: 4.296%;
    gap: 2.687cqw;
}

/* 34 / 335 = 10.149 */
.il-rail--tiles .il-tile__title {
    font-size: 22px;
    font-size: 10.149cqw;
}

/* 19 / 335 = 5.672 */
.il-rail--tiles .il-tile__text {
    font-size: 13px;
    font-size: 5.672cqw;
}

.il-rail--tiles .il-tile--v2 .il-tile__cap,
.il-rail--tiles .il-tile--v3 .il-tile__cap {
    top: 34.708%;
}

.il-rail--tiles .il-tile--v2 .il-tile__body,
.il-rail--tiles .il-tile--v3 .il-tile__body {
    top: 39.003%;
}

.il-rail--tiles .il-tile--v3 .il-tile__cap {
    top: 69.416%;
    height: 30.584%;
}

.il-rail--tiles .il-tile--v3 .il-tile__body {
    top: 74.055%;
}

.il-rail--tiles .il-tile--v4 .il-tile__cap {
    top: 11.684%;
    height: 37.972%;
}

.il-rail--tiles .il-tile--v4 .il-tile__body {
    top: 15.979%;
}

.il-rail--tiles .il-tile--v5 .il-tile__cap {
    top: 50%;
    height: 34.708%;
}

.il-rail--tiles .il-tile--v5 .il-tile__body {
    top: 54.296%;
}

/* Пустая секция: сообщение вместо ленты, чтобы страница не «проваливалась» */
.il-empty {
    padding: 40px 0;
    font-family: var(--il-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: rgba(26, 23, 27, .5);
}

.il-section--dark .il-empty {
    color: rgba(255, 255, 255, .5);
}

/* ------------------------------------------------------------------ */
/* Мобильная версия компонентов                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
    .il-section {
        padding-block: 50px;
    }

    .il-section--photo {
        padding-block: 45px;
    }

    .il-section__panel {
        min-height: 0;
    }

    .il-section > .il-container {
        padding-inline: var(--il-gutter-mobile);
    }

    .il-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 32px;
    }

    .il-section__title {
        font-size: 26px;
    }

    .il-section__subtitle {
        font-size: 16px;
    }

    /* Подсказка «листается свайпом» — в макете стоит над каждой лентой
       на 17/29, иконка 21.754×19.546 в боксе 24×24. Рисуем
       псевдоэлементом, чтобы не дублировать разметку у пяти лент. */
    .il-rail::before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        margin-bottom: 25px;
        background: url('/assets/interior-lab/icons/icon-swipe-dark.svg') no-repeat left center;
        background-size: 21.754px 19.546px;
    }

    /* На тёмных секциях — светлый вариант иконки */
    .il-tiles .il-rail::before,
    .il-section--dark .il-rail::before,
    .il-section--sand .il-rail::before {
        background-image: url('/assets/interior-lab/icons/icon-swipe-light.svg');
    }

    /* Плитки на телефоне: одна на экран, следующая выглядывает справа —
       так видно, что лента листается. Поля 20px, как у остальных секций. */
    .il-rail--tiles {
        padding-inline: var(--il-gutter-mobile);
    }

    /* На телефоне пятёрка в экран не влезает — возвращаем прокрутку */
    .il-rail--tiles .il-rail__track {
        overflow-x: auto;
        gap: 10px;
        margin-right: calc(var(--il-gutter-mobile) * -1);
        padding-right: var(--il-gutter-mobile);
    }

    /* Одна плитка на экран, следующая выглядывает справа. Ширина — от
       экрана, а не приколоченные 335px: в макете 335 при вьюпорте 375,
       то есть экран минус боковые поля. На 767px это 727, и блок
       занимает всю ширину, а не треть. Пропорция на мобильной своя —
       335:482. */
    .il-rail--tiles .il-tile,
    .il-tile {
        width: min(335px, calc(100vw - var(--il-gutter-mobile) * 2));
        height: auto;
        aspect-ratio: 335 / 482;
    }

    /* Раскладки шапок в процентах общие для обеих версий — доли от
       высоты плитки совпадают (167/482 = 202/582 и т.д.), поэтому
       пересчитывать их под мобильную высоту не нужно. Здесь только
       кегль: на узком экране плитка одна на весь экран, и текст в ней
       крупнее, чем дала бы привязка к vw. */
    /* На телефоне плитка одна на экран и кегль в макете свой: 26 и 15
       при ширине 335 — те же доли, но от другого исходника. */
    .il-rail--tiles .il-tile__title {
        font-size: 7.761cqw;
    }

    .il-rail--tiles .il-tile__text {
        font-size: 4.478cqw;
    }

    /* Мобильная геометрия из макета (отсчёт от верха страницы, шапка
       занимает первые 120px): заголовок 31/160 48px, подзаголовок
       33/375 24px, подпись 41/589 18px. Внутри hero это 40 / 255 / 469.
       Высота — по содержимому: получается около 620px, и следующая
       секция выглядывает снизу сама, без принудительного 100svh. */
    .il-hero {
        height: auto;
        min-height: 0;
        max-height: none;
    }

    .il-hero__inner {
        padding: 40px 31px;
    }

    /* Ширины в макете (334 и 257) сняты с вьюпорта 375 — как жёсткие
       ограничения они прижимали текст к левой трети экрана на 767px.
       Держим их долей ширины: 334/375 и 257/375. */
    .il-hero__title {
        max-width: 89.07%;
        font-size: min(48px, 12.8vw);
    }

    .il-hero__text {
        max-width: 68.53%;
        margin-top: min(101px, 26.9vw);
        font-size: min(24px, 6.4vw);
    }

    /* Мобайл: кнопка на 589, подзаголовок кончается на 468 — отсюда
       отступ 121px. Ячейка сетки в макете 61px — такая же высота. */
    .il-hero__cta {
        min-height: 61px;
        padding: 0 24px;
        margin: 121px 0 0;
        font-size: 18px;
        white-space: normal;
    }

    .il-band {
        min-height: 0;
    }

    /* Мобильная версия блока: секция бежевая, блок заголовка на 19/30,
       кегль 78 и 20 — значения из макета главной. Лента продолжает ту же
       полосу, поэтому её секция тоже бежевая, а не тёмная, как на
       десктопе: в макете это один блок 889px. */
    .il-band,
    .il-projects.il-section--dark {
        background: var(--il-beige);
    }

    .il-projects.il-section--dark {
        padding-top: 0;
    }

    .il-band__inner {
        flex-direction: column;
        gap: 24px;
        padding: 30px 19px;
    }

    .il-band__title {
        font-size: 78px;
        margin-bottom: 12px;
    }

    .il-band__subtitle {
        font-size: 20px;
    }

    /* В мобильном макете у блока «Проекты» действий под заголовком нет —
       эти две кнопки принадлежат блоку отзывов ниже. */
    .il-band__actions {
        display: none;
    }

    /* Отзывы: заголовок 48px, подзаголовок 20px, под ними две кнопки
       высотой 34 по ширине текста — значения из мобильного макета. */
    .il-section--reviews .il-section__title {
        font-size: 48px;
    }

    .il-section--reviews .il-section__subtitle {
        font-size: 20px;
    }

    .il-section--reviews .il-section__actions {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .il-section--reviews .il-section__link {
        display: inline-flex;
        align-items: center;
        min-height: 34px;
        padding: 0 14px;
        box-shadow: inset 0 0 0 1px var(--il-stroke);
        font-size: 14px;
        text-decoration: none;
        transition: background-color .2s ease, box-shadow .2s ease;
    }

    .il-section--reviews .il-section__link:hover {
        background: rgba(26, 23, 27, .06);
        box-shadow: inset 0 0 0 1px var(--il-dark);
    }


    .il-section__actions {
        align-items: flex-start;
    }

    .il-logoline {
        min-height: 0;
    }

    .il-logoline__inner {
        padding: 40px var(--il-gutter-mobile);
        gap: 20px;
    }

    .il-logoline img {
        width: min(1166px, calc(100vw - var(--il-gutter-mobile) * 2));
    }

    /* На мобильной главной карточка товара такая же, как плитки выше:
       335×582, одна на экран с краем следующей. Отдельного размера
       233×482 в мобильном макете главной нет — он встречается на
       странице «Мебель», это её собственная раскладка.
       Внутренности карточки заданы долями, поэтому переопределять их
       здесь не нужно. */
    .il-product {
        width: min(335px, calc(100vw - var(--il-gutter-mobile) * 2));
    }

    /* Пропорция и внутренности заданы долями — на мобильной меняется
       только ширина, как у плиток и карточек товара. */
    .il-review {
        width: min(335px, calc(100vw - var(--il-gutter-mobile) * 2));
    }
}

/* ------------------------------------------------------------------ */
/* Карточка отзыва 370×476                                             */
/* ------------------------------------------------------------------ */

/* Композиция из макета: фотография — фон всей карточки, поверх неё снизу
   лежит белая плашка 334×239 (review-bg.svg) с отступом 18px по бокам и
   снизу и вырезом-бугорком под аватар. Всё содержимое отзыва — внутри
   плашки, поэтому доли и кегли считаются от её ширины, а не от карточки. */
.il-review {
    position: relative;
    width: 370px;
    height: auto;
    aspect-ratio: 370 / 476;
    overflow: hidden;
    background: var(--il-grey-bg);
    color: rgb(30, 30, 30);
}

.il-review__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.il-review__panel {
    position: absolute;
    left: 4.865%;
    top: 46.008%;
    width: 90.27%;
    height: 50.21%;
    background: url(/assets/interior-lab/icons/review-bg.svg) no-repeat center / 100% 100%;
    container-type: inline-size;
}

/* Доли внутри плашки 334×239 */
.il-review__avatar {
    position: absolute;
    left: 42.515%;
    top: 3.347%;
    width: 14.97%;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    background: var(--il-grey-bg);
}

.il-review__name,
.il-review__role,
.il-review__text {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
}

.il-review__name {
    top: 29.707%;
    font-family: Onest, var(--il-font-body);
    font-weight: 500;
    font-size: 5.389cqw;
    line-height: 1.2;
}

.il-review__role {
    top: 41.423%;
    opacity: .6;
    font-family: Gilroy, Onest, var(--il-font-body);
    font-weight: 400;
    font-size: 3.593cqw;
    line-height: 1;
}

.il-review__text {
    left: 12.575%;
    right: 12.575%;
    top: 56.485%;
    margin: 0;
    opacity: .8;
    font-family: Gilroy, Onest, var(--il-font-body);
    font-weight: 400;
    font-size: 4.192cqw;
    line-height: 1.35;
}

.il-review__stars {
    position: absolute;
    left: 0;
    right: 0;
    top: 87.03%;
    display: flex;
    justify-content: center;
    gap: .698cqw;
}

.il-review__stars img {
    width: 3.493cqw;
    height: auto;
    display: block;
}

/* Незаполненные звёзды — тот же значок приглушённо */
.il-review__stars img:not(.is-on) {
    opacity: .25;
    filter: grayscale(1);
}

/* ------------------------------------------------------------------ */
/* Блок «Как нас найти»                                                */
/* ------------------------------------------------------------------ */

/* Секция 1728×1117: фотоподложка на всю высоту, белая панель 920 по
   центру — тот же приём, что у «Новинок». */
.il-contacts {
    position: relative;
    background: var(--il-dark);
    padding-block: 98px;
    color: var(--il-dark);
}

.il-contacts__photo {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.il-contacts__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.il-contacts__panel {
    position: relative;
    min-height: 920px;
    background: var(--il-white);
    display: flex;
    align-items: center;
}

/* Две колонки: слева заголовок с формой и карта 1035×538, справа логотип
   и контакты. Отступы — 62px от края, разрыв между колонками 51px. */
.il-contacts__inner {
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 72px var(--il-gutter-section);
    display: grid;
    grid-template-columns: minmax(0, 1035fr) minmax(0, 518fr);
    column-gap: 51px;
    align-items: start;
}

.il-contacts__head {
    grid-column: 1;
}

.il-contacts__title {
    margin: 0 0 20px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 60px;
    line-height: 1.05;
    color: var(--il-dark);
}

.il-contacts__support {
    margin: 0 0 32px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.3;
    color: rgba(26, 23, 27, .6);
}

.il-contacts__support a {
    color: var(--il-dark);
}

/* Инлайн-форма из макета: поле и кнопка 109×34 одной высоты */
.il-contacts__form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    max-width: 345px;
}

/* Ловушка для ботов. Не display:none и не hidden — такие поля многие
   боты как раз пропускают; блок уводится за пределы экрана, но поле
   внутри остаётся «настоящим». Из потока вынут, чтобы не занимать
   ячейку flex. Те же правила продублированы инлайном в разметке — на
   случай, если стиль не доедет. */
.il-contacts__trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.il-contacts__input {
    flex: 1 1 212px;
    min-width: 0;
    height: 34px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    font-family: var(--il-font-ui);
    font-size: 14px;
    line-height: 1.4;
    color: var(--il-dark);
}

.il-contacts__input::placeholder {
    color: rgba(26, 23, 27, .45);
}

.il-contacts__input:focus {
    outline: 0;
    box-shadow: inset 0 0 0 1px var(--il-dark);
}

.il-contacts__submit {
    flex: 0 0 auto;
    width: 109px;
    height: 34px;
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    cursor: pointer;
    font-family: var(--il-font-ui);
    font-size: 14px;
    line-height: 1;
    color: var(--il-dark);
    transition: background-color .2s ease, box-shadow .2s ease, color .2s ease;
}

.il-contacts__submit:hover {
    box-shadow: inset 0 0 0 1px var(--il-dark);
    background: rgba(26, 23, 27, .06);
}

.il-contacts__form.is-sending .il-contacts__submit {
    opacity: .5;
    pointer-events: none;
}

.il-contacts__note {
    flex: 1 0 100%;
    margin: 0;
    min-height: 20px;
    font-family: var(--il-font-body);
    font-size: 13px;
    line-height: 1.4;
}

.il-contacts__note.is-error {
    color: var(--il-error);
}

/* «Заявка уже принята» — не ошибка и не успех, поэтому тем же приглушённым
   тоном, что и подпись над формой. */
.il-contacts__note.is-notice {
    color: rgba(26, 23, 27, .6);
}

.il-contacts__note.is-success {
    color: var(--il-success);
}

/* Карта: в макете 1035×538 на 62/300 — то есть под блоком заголовка,
   с отступом 66px. */
.il-contacts__map {
    grid-column: 1;
    margin-top: 66px;
    aspect-ratio: 1035 / 538;
    background: var(--il-grey-bg);
    overflow: hidden;
}

.il-contacts__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Правая колонка: логотип на 291 и блок контактов на 379 от верха
   секции, то есть 219 и 307 от начала контейнера. */
.il-contacts__aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-top: 219px;
}

.il-contacts__logo {
    display: block;
    width: 100%;
    max-width: 445px;
    height: auto;
    margin-bottom: 44px;
}

.il-contacts__address {
    margin: 0 0 18px;
    max-width: 448px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    color: var(--il-dark);
}

.il-contacts__note-line {
    margin: 0 0 18px;
    max-width: 272px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(26, 23, 27, .5);
}

.il-contacts__note-line a {
    color: inherit;
}

.il-contacts__note-line a:hover {
    color: var(--il-dark);
}

/* Ряд соцсетей 141×32 внизу колонки контактов */
.il-contacts__socials {
    display: flex;
    gap: 8px;
    margin-top: 24px;
}

.il-contacts__socials a {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    color: var(--il-dark);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.il-contacts__socials a:hover {
    background: rgba(26, 23, 27, .06);
    box-shadow: inset 0 0 0 1px var(--il-dark);
}

.il-contacts__socials svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

@media (max-width: 1279px) {
    .il-contacts__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 48px;
    }

    .il-contacts__head,
    .il-contacts__map,
    .il-contacts__aside {
        grid-column: 1;
    }

    .il-contacts__aside {
        grid-row: auto;
        padding-top: 0;
    }

    .il-contacts__map {
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    /* Мобильная геометрия из макета (секция 375×1276): блок заголовка
       19/30 356×221, карта -83/264 541×374 — она шире экрана и вылезает
       за оба края, логотип 22/684 276×27, контакты 19/772. */
    .il-contacts {
        padding-block: 30px;
    }

    .il-contacts__panel {
        min-height: 0;
    }

    .il-contacts__inner {
        padding: 30px 19px;
        row-gap: 32px;
    }

    .il-contacts__title {
        font-size: 48px;
    }

    .il-contacts__support {
        font-size: 20px;
        margin-bottom: 24px;
    }

    /* Карта во всю ширину с вылетом за края: 541 при вьюпорте 375 */
    .il-contacts__map {
        width: 144.267vw;
        margin-left: -27.467vw;
        aspect-ratio: 541 / 374;
    }

    .il-contacts__logo {
        max-width: 276px;
        margin-bottom: 32px;
    }

    .il-contacts__form {
        max-width: none;
    }

    .il-contacts__address {
        font-size: 18px;
    }

    .il-contacts__note-line {
        font-size: 15px;
        max-width: none;
    }
}

/* ================================================================== */
/* Каталог                                                            */
/* ================================================================== */

/* ------------------------------------------------------------------ */
/* Hero внутренних страниц                                             */
/* ------------------------------------------------------------------ */

/* В макете секция 350px и шапка сайта лежит внутри неё сверху. У нас
   шапка — отдельный элемент над контентом, поэтому на её высоту полоса
   и уменьшается: 350 − 100 = 250. Заголовок стоит на 46px от низа шапки
   (146 от верха секции), крошки — на 183. */
.il-page-hero {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    background: var(--il-dark);
    color: var(--il-beige);
}

.il-page-hero__media {
    position: absolute;
    inset: 0;
}

.il-page-hero__media img {
    width: 100%;
    height: 100%;
    /* Фото в макете шире секции и сдвинуто влево (1845 при left −117) —
       кадрируем по левому краю, чтобы держался тот же фрагмент. */
    object-fit: cover;
    object-position: 0 50%;
    display: block;
}

.il-page-hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(123.258deg, rgb(26, 23, 27) 31.25%, rgba(26, 23, 27, 0) 92.56%);
}

.il-page-hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 46px var(--il-gutter) 47px;
}

.il-page-hero__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    /* 140px на макетных 1728 = 8.1vw */
    font-size: clamp(48px, 8.1vw, 140px);
    line-height: .8;
    color: var(--il-beige);
}

/* Крошки приходят из get_breadcrumbs(): ссылки, разделитель и последний
   элемент в span.textbc. */
.il-page-hero .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 25px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--il-crumb-active);
}

.il-page-hero .breadcrumbs a {
    color: var(--il-crumb-active);
}

.il-page-hero .breadcrumbs a:hover {
    color: var(--il-white);
}

.il-page-hero .breadcrumbs .divider {
    opacity: .5;
}

.il-page-hero .breadcrumbs .textbc {
    color: var(--il-white);
}

/* ------------------------------------------------------------------ */
/* Лента табов                                                         */
/* ------------------------------------------------------------------ */

/* Полоса 1728×100 во всю ширину, фон rgb(237,237,237). Табы прижаты
   влево, кнопки разделов — вправо; распорка между ними делает это без
   двух отдельных контейнеров, как в макете (87 и 1343 от края). */
.il-tabs {
    background: var(--il-tabs-bg);
}

.il-tabs__track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: 100px;
    max-width: var(--il-max);
    margin: 0 auto;
    padding-inline: 87px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.il-tabs__track::-webkit-scrollbar {
    display: none;
}

.il-tabs__spacer {
    flex: 1 0 auto;
}

/* Таб и кнопка раздела устроены одинаково: 42px высоты, паддинг 10/20,
   обводка `inset 0 0 0 1px rgb(193,193,193)` — она есть сразу, а не
   только при наведении. Разница одна: у кнопок справа белая заливка. */
.il-tabs__item,
.il-tabs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 42px;
    padding: 10px 20px;
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--il-tab-text);
    transition: box-shadow .2s ease, background-color .2s ease;
}

/* Наведение в макете: белая заливка и обводка темнеет. Цвет текста
   повторяется намеренно: глобальное `a:hover` красит ссылки в белый —
   это для тёмных секций, а здесь заливка светлая, и текст пропал бы. */
.il-tabs__item:hover,
.il-tabs__btn:hover {
    background: var(--il-white);
    box-shadow: inset 0 0 0 1px var(--il-tab-text);
    color: var(--il-tab-text);
}

/* Кнопки разделов — 186×42 и 99×42 в макете; ширина здесь по содержимому,
   чтобы не резать длинные названия в другом языке. */
.il-tabs__btn {
    background: var(--il-white);
}

/* ------------------------------------------------------------------ */
/* Плитки направлений                                                  */
/* ------------------------------------------------------------------ */

.il-directions {
    background: var(--il-white);
    padding-bottom: 99px;
}

.il-directions__title {
    margin: 140px 0 60px;
    max-width: 1369px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    /* 60px на 1728 */
    font-size: clamp(26px, 3.47vw, 60px);
    line-height: 1;
    color: var(--il-dark);
}

/* Четыре в ряд с шагом 10px: 4×380.25 + 3×10 = 1551 при поле 88px. */
.il-directions__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Плитка 380.25×582 — пропорция сохраняется на любой ширине. Container
   query нужен подписям: они заданы в долях ширины плитки. */
.il-direction {
    position: relative;
    aspect-ratio: 380.25 / 582;
    overflow: hidden;
    container-type: inline-size;
    background: var(--il-dark);
    color: var(--il-beige);
}

.il-direction__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Затемнение под шапкой и подписью — тот же градиент, что у первой
   плитки в макете. Лежит поверх фото, под текстом. */
.il-direction::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(64.868deg, rgb(26, 23, 27) 0%, rgba(26, 23, 27, .2) 100%);
    opacity: .55;
}

/* Шапка 380×102 с полупрозрачной подложкой, паддинг 25/30. */
.il-direction__cap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
    min-height: 26.8cqw;
    padding: 6.6cqw 7.9cqw;
    background: rgba(125, 125, 125, .5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 8.94cqw;
    line-height: 1;
    color: var(--il-white);
}

/* Подпись на 30/521 от угла плитки. */
.il-direction__cta {
    position: absolute;
    left: 7.9cqw;
    right: 7.9cqw;
    bottom: 4.6cqw;
    z-index: 2;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 3.68cqw;
    line-height: 1.4;
    color: var(--il-beige);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.il-direction:hover .il-direction__cta {
    color: var(--il-white);
}

/* ------------------------------------------------------------------ */
/* Баннеры разделов                                                    */
/* ------------------------------------------------------------------ */

/* Секция 1728×618 с фотографией во всю ширину и тёмной панелью
   1068×360 на 86/108. */
.il-banner {
    position: relative;
    aspect-ratio: 1728 / 618;
    min-height: 360px;
    overflow: hidden;
    background: var(--il-beige);
}

.il-banner__media {
    position: absolute;
    inset: 0;
}

.il-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.il-banner__panel {
    position: absolute;
    left: 86px;
    top: 108px;
    width: min(1068px, calc(100% - 172px));
    max-height: calc(100% - 216px);
    padding: 60px;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--il-white);
}

.il-banner__title {
    margin: 0;
    max-width: 937px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    /* 93px на 1728 */
    font-size: clamp(32px, 5.38vw, 93px);
    line-height: 1;
}

.il-banner__lead {
    margin: 0;
    max-width: 937px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
}

.il-banner__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
}

.il-banner__link {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: 34px;
    color: var(--il-white);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.il-banner__link:hover {
    color: var(--il-beige);
}

/* ------------------------------------------------------------------ */
/* Каталог — мобильная версия                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
    /* Hero: фотополоса 411×152 на 94 от верха выходит за оба края на
       18px, заголовок 48px лежит на ней. */
    .il-page-hero {
        min-height: 0;
    }

    .il-page-hero__media {
        left: -4.8vw;
        right: -4.8vw;
    }

    .il-page-hero__inner {
        padding: 48px var(--il-gutter-mobile) 37px;
    }

    .il-page-hero__title {
        font-size: 48px;
    }

    .il-page-hero .breadcrumbs {
        margin-top: 9px;
    }

    .il-tabs__track {
        padding-inline: var(--il-gutter-mobile);
    }

    /* Распорка на мобильном не растягивает ленту — кнопки идут сразу за
       табами, как в макете (одна дорожка max-content). */
    .il-tabs__spacer {
        flex: 0 0 0;
    }

    .il-directions {
        padding-bottom: 45px;
    }

    .il-directions__title {
        margin: 120px 0 0;
        font-size: 26px;
        line-height: 1.2;
    }

    /* Сетка превращается в ленту: плитки той же ширины, что на макете
       (380 из 375 — то есть чуть шире экрана), листается вбок. */
    .il-directions__grid {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-top: 122px;
        margin-inline: calc(var(--il-gutter-mobile) * -1);
        padding-inline: var(--il-gutter-mobile);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .il-directions__grid::-webkit-scrollbar {
        display: none;
    }

    .il-direction {
        flex: 0 0 auto;
        width: min(380px, 89vw);
    }

    /* Баннер: секция 375×499, панель 345×405 на 18/47. */
    .il-banner {
        aspect-ratio: 375 / 499;
        min-height: 0;
    }

    .il-banner__panel {
        left: var(--il-gutter-mobile);
        top: 47px;
        width: calc(100% - var(--il-gutter-mobile) * 2);
        max-height: calc(100% - 94px);
        padding: 24px 20px;
        gap: 10px;
    }

    .il-banner__title {
        font-size: 48px;
    }

    .il-banner__link {
        line-height: 1.6;
    }
}

/* ------------------------------------------------------------------ */
/* Направление каталога — секции подкатегорий                          */
/* ------------------------------------------------------------------ */

/* Секция 1728×4153 на фоне rgb(229,229,229); колонка секций стоит на
   142/138 шириной 1490 с шагом 50. */
.il-sections {
    background: var(--il-section-bg);
    padding-bottom: 138px;
}

.il-sections .il-container {
    max-width: calc(1490px + var(--il-gutter) * 2);
    padding-inline: 142px;
}

.il-sections__empty {
    margin: 138px 0 0;
    font-family: var(--il-font-ui);
    font-size: 20px;
    line-height: 1.4;
    color: var(--il-crumb);
}

/* На странице направления табы в макете с белой заливкой, в отличие от
   прозрачных на «Каталоге». */
.il-tabs--filled .il-tabs__item {
    background: var(--il-white);
}

.il-tabs__item.is-current {
    box-shadow: inset 0 0 0 1px var(--il-tab-text);
}

/* Секция подкатегории: шапка 734×94 (заголовок 60px и ссылка «все»),
   ниже ряд карточек с шагом 50. Между секциями 50. */
.il-subcat {
    padding-top: 138px;
}

.il-subcat + .il-subcat {
    padding-top: 50px;
}

.il-subcat__head {
    max-width: 734px;
    margin-bottom: 40px;
}

.il-subcat__title {
    margin: 0 0 8px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    /* 60px на макетных 1728 */
    font-size: clamp(26px, 3.47vw, 60px);
    line-height: 1;
    color: var(--il-dark);
}

.il-subcat__all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--il-dark);
}

/* Подчёркнут только текст: значок из трёх точек стоит за ним отдельно. */
.il-subcat__all span {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.il-subcat__all img {
    flex-shrink: 0;
    display: block;
    /* 15.75×3 внутри поля 24×24 — точки прижаты к низу строки. */
    margin-top: 7px;
}

.il-subcat__all:hover {
    color: var(--il-crumb);
}

/* Четыре карточки 335×582 с шагом 50: 4×335 + 3×50 = 1490. Карточка сама
   держит пропорцию, поэтому колонки равные. */
.il-subcat__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 50px;
}

/* ------------------------------------------------------------------ */
/* Пагинация                                                           */
/* ------------------------------------------------------------------ */

.il-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 80px;
}

.il-pager__item,
.il-pager__next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--il-grey-bg);
    font-family: var(--il-font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    color: rgb(48, 48, 48);
    transition: background-color .2s ease;
}

.il-pager__item:hover,
.il-pager__next:hover {
    background: var(--il-white);
    color: rgb(48, 48, 48);
}

/* Текущая страница и стрелка «дальше» в макете белые. */
.il-pager__item.is-current,
.il-pager__next {
    background: var(--il-white);
}

.il-pager__goto {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    margin-left: 10px;
    font-family: var(--il-font-body);
    font-weight: 600;
    font-size: 14px;
    color: rgb(48, 48, 48);
}

.il-pager__goto input {
    width: 48px;
    height: 36px;
    padding: 0 8px;
    background: var(--il-white);
    border: 0;
    font: inherit;
    color: inherit;
    text-align: center;
}

.il-pager__goto input:focus {
    outline: 0;
    box-shadow: inset 0 0 0 1px var(--il-dark);
}

/* ------------------------------------------------------------------ */
/* Направление каталога — мобильная версия                             */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
    .il-sections {
        padding-bottom: 45px;
    }

    .il-sections .il-container {
        padding-inline: var(--il-gutter-mobile);
    }

    .il-subcat {
        padding-top: 35px;
    }

    .il-subcat + .il-subcat {
        padding-top: 35px;
    }

    .il-subcat__head {
        max-width: none;
        margin-bottom: 24px;
    }

    .il-subcat__title {
        font-size: 26px;
    }

    /* Ряд карточек становится лентой: в макете карточки уже (233×482) и
       листаются вбок. */
    .il-subcat__row {
        display: flex;
        flex-direction: row;
        gap: 10px;
        margin-inline: calc(var(--il-gutter-mobile) * -1);
        padding-inline: var(--il-gutter-mobile);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .il-subcat__row::-webkit-scrollbar {
        display: none;
    }

    .il-subcat__row .il-product {
        flex: 0 0 auto;
        width: min(233px, 62vw);
    }

    .il-pager {
        margin-top: 40px;
    }

    .il-pager__goto {
        margin-left: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Листинг раздела — сайдбар фильтров и сетка                          */
/* ------------------------------------------------------------------ */

/* Секция на фоне rgb(229,229,229); сайдбар 310px на 87/145, контент
   1105px на 533/140 — то есть между ними 136px. */
.il-listing {
    background: var(--il-section-bg);
    padding-bottom: 138px;
}

.il-listing__inner {
    width: 100%;
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 140px 87px 0;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);
    column-gap: 136px;
    align-items: start;
}

/* Пока ответ по фильтру не пришёл, тело листинга приглушается и не
   принимает клики — иначе успеваешь щёлкнуть карточку, которой в новой
   выдаче уже не будет. */
.il-listing__body.is-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .il-listing__body.is-loading {
        transition: none;
    }
}

/* Сайдбар: полупрозрачная белая подложка, паддинг 20/30, группы через 27. */
.il-facets {
    position: sticky;
    top: 20px;
    padding: 20px 30px;
    background: rgba(255, 255, 255, .4);
    display: flex;
    flex-direction: column;
    gap: 27px;
}

.il-facets__group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Заголовок группы — 11px в разрядку 0.6em, капсом. */
.il-facets__title {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .6em;
    text-transform: uppercase;
    color: var(--il-dark);
}

.il-facets__list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.il-facets__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* Поля по бокам, чтобы подсветка выбранного пункта выходила за текст,
       но оставалась внутри сайдбара. */
    margin: 0 -10px;
    padding: 5px 10px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--il-dark);
    transition: background-color .15s ease;
}

/* Отметка слева. Раньше выбранный пункт отличался только насыщенностью
   шрифта и в списке из десятка брендов не читался. */
.il-facets__item::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: background-color .15s ease, box-shadow .15s ease;
}

/* Фасет-флажок — квадрат с обводкой; при выборе заливается и получает
   галочку. У пунктов-переходов (соседние разделы) параметра нет, там
   место под отметку остаётся пустым, чтобы текст не разъезжался. */
.il-facets__item[data-il-param]::before {
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
}

.il-facets__item[data-il-param].is-selected::before {
    background-color: var(--il-dark);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 8px;
    box-shadow: inset 0 0 0 1px var(--il-dark);
}

/* Текущий раздел — сплошной квадратик 6×6 вместо флажка. */
.il-facets__item:not([data-il-param]).is-selected::before {
    padding: 5px;
    background-color: var(--il-dark);
    background-clip: content-box;
}

.il-facets__item:hover {
    background: rgba(26, 23, 27, .05);
    color: var(--il-dark);
}

.il-facets__item.is-selected {
    background: rgba(26, 23, 27, .08);
    font-weight: 500;
}

/* Счётчик — плашка 31px со скруглением 4. */
.il-facets__count {
    flex-shrink: 0;
    /* Прижат вправо: слева от него теперь отметка и название. */
    margin-left: auto;
    min-width: 31px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgb(88, 88, 88);
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: var(--il-white);
}

.il-facets__item.is-selected .il-facets__count {
    background: var(--il-dark);
}

/* Кнопка «Применить» — только в отложенном режиме. Пока ничего не
   отмечено заново, она погашена. */
.il-facets__apply {
    margin-top: 8px;
    min-height: 42px;
    padding: 10px 20px;
    background: var(--il-dark);
    border: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--il-white);
    cursor: pointer;
    transition: opacity .15s ease;
}

.il-facets__apply:disabled {
    opacity: .35;
    cursor: default;
}

/* ------------------------------------------------------------------ */
/* Тело листинга                                                       */
/* ------------------------------------------------------------------ */

.il-listing__head {
    margin-bottom: 40px;
}

/* Заголовок раздела слева, сортировка — в правом верхнем углу листинга.
   Заголовок ограничен 734px, как в макете; ширину держит сама строка. */
.il-listing__headline {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.il-listing__headline .il-listing__title {
    max-width: 734px;
}

/* Выпадающий список на <details>: закрытое состояние — кнопка в духе
   табов, раскрытое — панель со ссылками поверх сетки. */
.il-sort {
    position: relative;
    flex-shrink: 0;
}

.il-sort__current {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding-inline: 20px;
    background: var(--il-white);
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    color: var(--il-tab-text);
    cursor: pointer;
    list-style: none;
    transition: box-shadow .2s ease;
}

/* Маркер треугольника у summary убираем в обоих движках. */
.il-sort__current::-webkit-details-marker {
    display: none;
}

.il-sort__current:hover,
.il-sort[open] .il-sort__current {
    box-shadow: inset 0 0 0 1px var(--il-tab-text);
}

.il-sort__label {
    color: var(--il-crumb);
}

.il-sort__current img {
    flex-shrink: 0;
    display: block;
    transition: transform .2s ease;
}

.il-sort[open] .il-sort__current img {
    transform: rotate(180deg);
}

.il-sort__list {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 5;
    min-width: 100%;
    padding: 6px 0;
    background: var(--il-white);
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    display: flex;
    flex-direction: column;
}

.il-sort__item {
    padding: 8px 20px;
    font-family: var(--il-font-ui);
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--il-tab-text);
}

.il-sort__item:hover {
    background: var(--il-section-bg);
    color: var(--il-tab-text);
}

.il-sort__item.is-selected {
    font-weight: 500;
}

.il-listing__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    /* 60px на макетных 1728 */
    font-size: clamp(26px, 3.47vw, 60px);
    line-height: 1;
    color: var(--il-dark);
}

.il-listing__lead {
    margin: 18px 0 0;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.5;
    color: var(--il-crumb);
}

.il-listing__empty {
    margin: 0;
    font-family: var(--il-font-ui);
    font-size: 20px;
    line-height: 1.4;
    color: var(--il-crumb);
}

/* Чипы активных фильтров: высота 32, скругление 40, крестик 12×12. */
.il-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin-top: 18px;
}

.il-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding-inline: 14px;
    border-radius: 40px;
    background: var(--il-white);
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1;
    color: var(--il-dark);
    transition: box-shadow .2s ease;
}

.il-chip:hover {
    box-shadow: inset 0 0 0 1px var(--il-dark);
    color: var(--il-dark);
}

.il-chip img {
    flex-shrink: 0;
    display: block;
}

.il-chips__clear {
    font-family: var(--il-font-ui);
    font-size: 14px;
    line-height: 1;
    color: var(--il-crumb);
    text-decoration: underline;
    text-underline-offset: 4px;
    margin-left: 5px;
}

.il-chips__clear:hover {
    color: var(--il-dark);
}

/* Сетка 3×5: 3×335 + 2×50 = 1105, между рядами 38. */
.il-listing__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 50px;
    row-gap: 38px;
}

/* Кнопка «Фильтр» — только на мобильном, на десктопе сайдбар открыт. */
.il-listing__filter-toggle {
    display: none;
}

/* ------------------------------------------------------------------ */
/* Листинг — мобильная версия                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1279px) {
    /* Раньше брейкпоинта макета сайдбар уже не помещается рядом с тремя
       карточками — уводим его наверх, сетку сжимаем до двух колонок. */
    .il-listing__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
        padding-inline: var(--il-gutter);
    }

    .il-facets {
        position: static;
    }

    .il-listing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 20px;
    }
}

@media (max-width: 767px) {
    .il-listing {
        padding-bottom: 45px;
    }

    .il-listing__inner {
        padding: 35px var(--il-gutter-mobile) 0;
        row-gap: 24px;
    }

    /* Фильтры сворачиваются под кнопку: на 375px сайдбар занимал бы
       весь первый экран. Раскрывает interior-lab.js. */
    .il-listing__filter-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        padding-inline: 16px;
        background: var(--il-white);
        border: 0;
        box-shadow: inset 0 0 0 1px var(--il-stroke-2);
        font-family: var(--il-font-ui);
        font-size: 14px;
        line-height: 1;
        color: var(--il-dark);
        cursor: pointer;
    }

    .il-facets {
        padding: 16px 20px;
    }

    .il-facets[hidden] {
        display: none;
    }

    .il-listing__head {
        margin-bottom: 24px;
    }

    /* На узком экране заголовок и сортировка не помещаются в строку. */
    .il-listing__headline {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .il-sort__current {
        height: 34px;
        justify-content: space-between;
        width: 100%;
    }

    .il-sort__list {
        position: static;
        margin-top: 4px;
    }

    .il-listing__title {
        font-size: 26px;
    }

    /* В макете колонка карточек 335 с шагом 20. */
    .il-listing__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 20px;
    }
}

/* ================================================================== */
/* Карточка товара                                                     */
/* ================================================================== */

/* Полоса крошек 57px на тёмном — своя, а не в hero: у карточки товара
   крупного заголовка сверху нет. */
.il-crumbline {
    background: var(--il-dark);
}

.il-crumbline__inner {
    display: flex;
    align-items: center;
    min-height: 57px;
    max-width: var(--il-max);
    margin: 0 auto;
    padding-inline: var(--il-gutter);
}

.il-crumbline .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--il-font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    color: var(--il-crumb-active);
}

.il-crumbline .breadcrumbs a {
    color: var(--il-crumb-active);
}

.il-crumbline .breadcrumbs a:hover {
    color: var(--il-white);
}

.il-crumbline .breadcrumbs .divider {
    opacity: .5;
}

.il-crumbline .breadcrumbs .textbc {
    color: var(--il-white);
}

/* Секция 920px на тёмном, паддинг 60/80, две колонки с шагом 120. */
.il-product-page {
    background: var(--il-dark);
    color: var(--il-white);
    padding: 60px var(--il-gutter);
    display: grid;
    grid-template-columns: 900px minmax(0, 1fr);
    column-gap: 120px;
    align-items: start;
    max-width: var(--il-max);
    margin: 0 auto;
}

/* Фото 900×800 на белом — в макете картинка вписана внутрь, а не обрезана
   по краям, поэтому contain. */
.il-product-page__media {
    aspect-ratio: 900 / 800;
    background: var(--il-white);
    overflow: hidden;
}

.il-product-page__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    /* Как в макете: фото товара ложится на белый фон без своей подложки. */
    mix-blend-mode: multiply;
}

.il-product-page__info {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.il-product-page__headline {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.il-product-page__eyebrow {
    font-family: var(--il-font-body);
    font-weight: 500;
    font-size: 11px;
    line-height: 1;
    text-transform: uppercase;
    opacity: .5;
}

.il-product-page__title {
    margin: 0;
    font-family: var(--il-font-display);
    font-weight: 400;
    font-size: clamp(28px, 2.55vw, 44px);
    line-height: 1.2;
    color: var(--il-white);
}

.il-product-page__price {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--il-font-body);
    font-weight: 400;
    font-size: clamp(22px, 1.74vw, 30px);
    line-height: 1.2;
}

.il-product-page__price s {
    font-size: .6em;
    opacity: .5;
}

.il-product-page__lead {
    margin: 0;
    max-width: 548px;
    font-family: var(--il-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    opacity: .8;
}

.il-product-page__actions {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 548px;
}

/* Кнопка избранного 64px во всю ширину колонки, обводка белая. */
.il-product-page__wish {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 64px;
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--il-white);
    cursor: pointer;
    font-family: var(--il-font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--il-white);
    transition: background-color .2s ease;
}

.il-product-page__wish:hover {
    background: rgba(255, 255, 255, .1);
}

.il-product-page__wish img {
    flex-shrink: 0;
    display: block;
}

/* Товар уже в избранном — заливка подтверждает состояние. */
.il-product-page__wish.active {
    background: var(--il-white);
    color: var(--il-dark);
}

.il-product-page__wish.active img {
    filter: invert(1);
}

/* Характеристики: три строки моноширинным 13px, подпись приглушена. */
.il-specs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.il-specs__row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    min-height: 16px;
    font-family: 'Fragment Mono', ui-monospace, monospace;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.2;
}

.il-specs__row span:first-child {
    opacity: .5;
}

/* Аккордеоны 548×80 с тонкой рамкой. */
.il-accordions {
    max-width: 548px;
}

.il-accordion {
    border: 1px solid rgba(219, 219, 219, .149);
    border-bottom: 0;
}

.il-accordion:last-child {
    border-bottom: 1px solid rgba(219, 219, 219, .149);
}

.il-accordion__head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 80px;
    padding-inline: 24px;
    cursor: pointer;
    list-style: none;
    font-family: var(--il-font-body);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    color: var(--il-white);
    transition: background-color .2s ease;
}

.il-accordion__head::-webkit-details-marker {
    display: none;
}

.il-accordion__head:hover {
    background: rgba(255, 255, 255, .05);
}

.il-accordion__head img {
    flex-shrink: 0;
    display: block;
    transition: transform .3s ease;
}

/* Плюс превращается в минус поворотом — отдельной иконки в макете нет. */
.il-accordion[open] .il-accordion__head img {
    transform: rotate(45deg);
}

.il-accordion__body {
    padding: 0 24px 24px;
    font-family: var(--il-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

.il-accordion__body p {
    margin: 0 0 12px;
}

.il-accordion__body p:last-child {
    margin-bottom: 0;
}

.il-accordion__body .il-specs__row {
    padding-block: 6px;
}

/* ------------------------------------------------------------------ */
/* Похожие товары                                                      */
/* ------------------------------------------------------------------ */

.il-related {
    background: var(--il-dark);
    padding-block: 0 98px;
}

.il-related__title {
    margin: 0 0 40px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(28px, 3.47vw, 60px);
    line-height: 1;
    color: var(--il-white);
}

.il-related__rail {
    padding-left: var(--il-gutter);
}

/* ------------------------------------------------------------------ */
/* Карточка товара — мобильная версия                                  */
/* ------------------------------------------------------------------ */

@media (max-width: 1279px) {
    /* Фото 900px рядом с колонкой перестаёт помещаться раньше брейкпоинта
       макета — раскладываем в одну колонку. */
    .il-product-page {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 40px;
    }
}

@media (max-width: 767px) {
    .il-crumbline__inner {
        min-height: 44px;
        padding-inline: var(--il-gutter-mobile);
    }

    .il-crumbline .breadcrumbs {
        font-size: 12px;
        gap: 6px;
    }

    .il-product-page {
        padding: 24px var(--il-gutter-mobile) 40px;
        row-gap: 32px;
    }

    /* Белый блок 335×312 с фото 276×202 внутри. */
    .il-product-page__media {
        aspect-ratio: 335 / 312;
        padding: 47px 30px;
    }

    .il-product-page__info {
        gap: 32px;
    }

    .il-product-page__title {
        font-size: 40px;
    }

    /* На мобильном цена в макете набрана тем же Playfair, что заголовок. */
    .il-product-page__price {
        font-family: var(--il-font-display);
        font-size: 28px;
    }

    .il-product-page__actions,
    .il-accordions,
    .il-product-page__lead {
        max-width: none;
    }

    .il-accordion__head {
        min-height: 56px;
        padding-inline: 16px;
        font-family: var(--il-font-ui);
        font-size: 16px;
    }

    .il-accordion__head img {
        width: 16px;
        height: 16px;
    }

    .il-accordion__body {
        padding: 0 16px 16px;
    }

    .il-related {
        padding-bottom: 45px;
    }

    .il-related__title {
        font-size: 37px;
        margin-bottom: 24px;
    }

    .il-related__rail {
        padding-left: var(--il-gutter-mobile);
    }
}

/* ================================================================== */
/* Избранное                                                           */
/* ================================================================== */

/* Страница целиком тёмная — фон задаётся на body через класс страницы,
   иначе между секциями просвечивает белое. */
body.wishlist {
    background: var(--il-dark);
}

/* Шапка 296px: паддинг 80/80/60, заголовок 140px слева, счётчик и кнопка
   справа, ниже крошки через 24px. */
.il-wish-head {
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 80px var(--il-gutter) 60px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: var(--il-dark);
    color: var(--il-white);
}

.il-wish-head__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.il-wish-head__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(48px, 8.1vw, 140px);
    line-height: .8;
    color: var(--il-white);
}

.il-wish-head__aside {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
}

/* Пилюля-счётчик 37px со скруглением 40. */
.il-wish-head__pill {
    display: inline-flex;
    align-items: center;
    height: 37px;
    padding: 8px 16px;
    border-radius: 40px;
    background: var(--il-dark-2);
    font-family: var(--il-font-geist);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    color: var(--il-white);
}

.il-wish-head__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 260px;
    height: 42px;
    padding-inline: 16px;
    background: var(--il-white);
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--il-tab-text);
    transition: opacity .2s ease;
}

.il-wish-head__checkout:hover {
    opacity: .85;
    color: var(--il-tab-text);
}

.il-wish-head .breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--il-font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--il-crumb-active);
}

.il-wish-head .breadcrumbs a {
    color: var(--il-crumb-active);
}

.il-wish-head .breadcrumbs a:hover {
    color: var(--il-white);
}

.il-wish-head .breadcrumbs .textbc {
    color: var(--il-white);
}

/* Пустой список — вместо сайдбара и строк. */
.il-wish-empty {
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 0 var(--il-gutter) 98px;
    background: var(--il-dark);
    color: var(--il-white);
}

.il-wish-empty h2 {
    margin: 0 0 12px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 28px;
    line-height: 1.2;
}

.il-wish-empty p {
    margin: 0 0 24px;
    max-width: 548px;
    font-family: var(--il-font-body);
    font-size: 16px;
    line-height: 1.6;
    opacity: .7;
}

.il-wish-empty__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding-inline: 24px;
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--il-white);
    font-family: var(--il-font-ui);
    font-size: 16px;
    color: var(--il-white);
}

.il-wish-empty__link:hover {
    background: rgba(255, 255, 255, .1);
    color: var(--il-white);
}

/* Две колонки: сайдбар 320 и список, шаг 40. */
.il-wish {
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 0 var(--il-gutter);
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: 40px;
    align-items: start;
    background: var(--il-dark);
    color: var(--il-white);
}

.il-wish__aside {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.il-wish__group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Подписи групп — 11px в разрядку, как в сайдбаре листинга. */
.il-wish__label {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .6em;
    text-transform: uppercase;
    opacity: .5;
}

.il-wish__sort {
    position: relative;
}

.il-wish__sort summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 56px;
    cursor: pointer;
    list-style: none;
    font-family: var(--il-font-ui);
    font-size: 16px;
    line-height: 1.4;
    color: var(--il-white);
}

.il-wish__sort summary::-webkit-details-marker {
    display: none;
}

.il-wish__sort summary img {
    flex-shrink: 0;
    filter: invert(1);
    transition: transform .2s ease;
}

.il-wish__sort[open] summary img {
    transform: rotate(180deg);
}

.il-wish__sort-list {
    display: flex;
    flex-direction: column;
    padding-bottom: 8px;
}

.il-wish__sort-list a {
    padding: 8px 0;
    font-family: var(--il-font-ui);
    font-size: 15px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .7);
}

.il-wish__sort-list a:hover,
.il-wish__sort-list a.is-selected {
    color: var(--il-white);
}

.il-wish__cats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Строка категории 320×37 со счётчиком справа. */
.il-wish__cat {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 37px;
    font-family: var(--il-font-ui);
    font-size: 16px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .7);
}

.il-wish__cat:hover,
.il-wish__cat.is-selected {
    color: var(--il-white);
}

.il-wish__cat-count {
    flex-shrink: 0;
    font-size: 14px;
    opacity: .5;
}

.il-wish__clear {
    align-self: flex-start;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: var(--il-font-ui);
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .5);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.il-wish__clear:hover {
    color: var(--il-white);
}

/* ------------------------------------------------------------------ */
/* Строка товара 1208×212                                              */
/* ------------------------------------------------------------------ */

.il-wish__list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.il-wish-row {
    display: grid;
    grid-template-columns: 245px minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 20px;
    min-height: 212px;
    padding: 4px;
    border-radius: 4px;
    background: rgb(34, 32, 36);
    overflow: hidden;
}

/* Рамка фото — тёмная, внутри белая плашка со снимком. В макете снимок
   вписан в неё примерно на две трети, поэтому contain и внутренний
   отступ, а не растягивание на весь блок. mix-blend-mode тут нельзя:
   на тёмном он гасит фотографию до черноты. */
.il-wish-row__media {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    border-radius: 2px;
    background: var(--il-dark-2);
    overflow: hidden;
}

.il-wish-row__plate {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 12%;
    background: var(--il-white);
}

.il-wish-row__media img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.il-wish-row__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 24px 0;
    max-width: 391px;
}

.il-wish-row__eyebrow {
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.1;
    color: var(--il-white);
}

.il-wish-row__title {
    margin: 0;
    font-family: var(--il-font-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
}

.il-wish-row__title a {
    color: var(--il-white);
}

.il-wish-row__title a:hover {
    color: var(--il-beige);
}

/* Единственная приглушённая строка в карточке — так в макете. */
.il-wish-row__category {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    color: rgba(179, 179, 179, .5);
}

.il-wish-row__text {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--il-white);
}

/* Кнопка удаления 48×48. */
/* Кнопка 48×48 с тонкой обводкой; на наведении краснеет — действие
   разрушающее, и в макете это подчёркнуто. */
.il-wish-row__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    align-self: center;
    margin-right: 24px;
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1px rgb(51, 51, 51);
    cursor: pointer;
    transition: background-color .2s ease;
}

.il-wish-row__remove:hover {
    background: rgba(255, 77, 77, .12);
}

/* Иконка уже красная в самом файле (#FF4D4D) — перекрашивать её
   фильтром нельзя, invert давал бирюзовый. */
.il-wish-row__remove img {
    display: block;
}

/* ------------------------------------------------------------------ */
/* Кнопки внизу                                                        */
/* ------------------------------------------------------------------ */

/* Колонка списка: строки и под ними кнопки — обе прижаты к краям
   именно этой колонки, а не всей страницы. */
.il-wish__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.il-wish-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    min-height: 62px;
    padding: 20px 0 98px;
}

.il-wish-actions__clear,
.il-wish-actions__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 10px 8px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color .2s ease, opacity .2s ease;
}

.il-wish-actions__clear {
    min-width: 187px;
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1px var(--il-white);
    color: var(--il-white);
}

.il-wish-actions__clear:hover {
    background: rgba(255, 255, 255, .1);
}

.il-wish-actions__checkout {
    min-width: 260px;
    background: var(--il-white);
    box-shadow: inset 0 0 0 1px var(--il-stroke-2);
    color: var(--il-tab-text);
}

.il-wish-actions__checkout:hover {
    opacity: .85;
    color: var(--il-tab-text);
}

/* ------------------------------------------------------------------ */
/* Избранное — мобильная версия                                        */
/* ------------------------------------------------------------------ */

@media (max-width: 1279px) {
    .il-wish {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 32px;
        padding-inline: var(--il-gutter);
    }

    .il-wish-row {
        grid-template-columns: 160px minmax(0, 1fr) auto;
    }
}

@media (max-width: 767px) {
    .il-wish-head {
        padding: 40px var(--il-gutter-mobile) 24px;
        gap: 16px;
    }

    .il-wish-head__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .il-wish-head__title {
        font-size: 48px;
    }

    .il-wish-head__aside {
        align-items: stretch;
        width: 100%;
    }

    .il-wish-head__checkout {
        min-width: 0;
        width: 100%;
    }

    .il-wish,
    .il-wish-empty {
        padding-inline: var(--il-gutter-mobile);
    }

    .il-wish-actions {
        padding-block: 16px 45px;
        flex-direction: column;
    }

    .il-wish-actions__clear,
    .il-wish-actions__checkout {
        min-width: 0;
        width: 100%;
    }

    /* Строка становится карточкой: фото сверху, текст под ним. */
    .il-wish-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: 'media remove' 'body body';
        min-height: 0;
        padding: 0 16px 16px;
        gap: 12px;
    }

    .il-wish-row__media {
        grid-area: media;
        aspect-ratio: 335 / 240;
        margin: 0 -16px;
    }

    .il-wish-row__body {
        grid-area: body;
        max-width: none;
        padding-block: 0;
    }

        .il-wish-row__remove {
        grid-area: remove;
        align-self: start;
        margin-top: 12px;
    }

    .il-wish-row__title {
        font-size: 22px;
    }
}

/* ------------------------------------------------------------------ */
/* Заявка со страницы избранного                                       */
/* ------------------------------------------------------------------ */

.il-order {
    max-width: var(--il-max);
    margin: 0 auto;
    padding: 0 var(--il-gutter) 98px;
    background: var(--il-dark);
}

/* Карточка формы: тонкая обводка rgb(83,83,83), скругление 4,
   мягкая тень и паддинг 64/56. */
.il-order__form {
    position: relative;
    max-width: 720px;
    padding: 64px 56px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgb(83, 83, 83), 0 32px 64px rgba(0, 0, 0, .102);
    display: flex;
    flex-direction: column;
    gap: 40px;
    color: var(--il-white);
}

.il-order__head {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.il-order__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    /* 60px на макетных 1728 */
    font-size: clamp(28px, 3.47vw, 60px);
    line-height: 1;
}

.il-order__lead {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4;
    opacity: .6;
}

.il-order__fields {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.il-order__label {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Подпись поля — 11px в разрядку, как заголовки групп в сайдбаре. */
.il-order__label > span:first-child {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .6em;
    text-transform: uppercase;
    opacity: .6;
}

/* Поле ввода 48px на светлой подложке — единственный светлый элемент
   на тёмной странице, поэтому текст в нём тёмный. */
.il-order__input {
    display: flex;
    align-items: center;
    height: 48px;
    padding-inline: 16px;
    background: rgb(252, 252, 252);
    box-shadow: inset 0 0 0 1px rgb(224, 224, 224);
    transition: box-shadow .2s ease;
}

.il-order__input:focus-within {
    box-shadow: inset 0 0 0 1px var(--il-dark);
}

.il-order__input input {
    flex-grow: 1;
    width: 100%;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--il-font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--il-dark);
}

.il-order__input input::placeholder {
    color: rgba(26, 23, 27, .4);
}

.il-order__error {
    font-family: var(--il-font-body);
    font-size: 12px;
    line-height: 1.4;
    color: var(--il-error);
}

.il-order__error:empty {
    display: none;
}

.il-order__submit {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Кнопка 56px, серая до наведения — как в макете. */
.il-order__submit button {
    height: 56px;
    border: 0;
    border-radius: 2px;
    background: rgb(194, 194, 194);
    cursor: pointer;
    font-family: var(--il-font-geist);
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgb(0, 0, 0);
    transition: background-color .2s ease;
}

.il-order__submit button:hover {
    background: var(--il-white);
}

.il-order__form.is-sending .il-order__submit button {
    opacity: .5;
    pointer-events: none;
}

/* Строка согласия; она же место для ответа сервера. */
.il-order__note {
    font-family: var(--il-font-geist);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.6;
    color: rgb(100, 100, 100);
}

.il-order__note.is-error {
    color: var(--il-error);
}

.il-order__note.is-success {
    color: var(--il-success);
}

@media (max-width: 767px) {
    .il-order {
        padding: 0 var(--il-gutter-mobile) 45px;
    }

    .il-order__form {
        padding: 32px 20px;
        gap: 28px;
    }

    .il-order__title {
        font-size: 28px;
    }
}

/* Звёздочка у обязательного поля. */
.il-order__req {
    margin-left: .35em;
    font-style: normal;
    color: var(--il-error);
}

/* ------------------------------------------------------------------ */
/* Проектные решения                                                   */
/* ------------------------------------------------------------------ */

/* Hero этой страницы выше обычного: под заголовком стоит подзаголовок
   34px. В макете секция 554px, шапка внутри неё — остаётся 454. */
.il-page-hero--tall {
    min-height: 454px;
}

.il-page-hero__lead {
    /* Заголовок 140px с line-height .8 обрезает бокс сверху и снизу,
       поэтому отступ до лида в макете крупный — 62px. */
    margin: 62px 0 0;
    max-width: 709px;
    font-family: var(--il-font-display);
    font-weight: 400;
    /* 34px на макетных 1728 */
    font-size: clamp(20px, 1.97vw, 34px);
    line-height: 1.3;
    color: var(--il-white);
}

/* Секция на проект: шапка, коллаж, описание с параметрами. Контейнер
   запросов нужен коллажу — его снимки заданы долями ширины секции. */
/* Секция во всю ширину, ограничены её блоки: иначе на экране шире макета
   заливка обрывается по 1728 и по краям видны поля страницы. Каждый
   прямой потомок и работает контейнером — отдельной обёртки в разметке
   не понадобилось. */
.il-project {
    padding: 120px 0;
    display: flex;
    flex-direction: column;
    gap: 60px;
    background: var(--il-dark);
    color: var(--il-white);
    /* Лента снимков шире контента и уходит вправо — до края экрана. */
    overflow: hidden;
}

.il-project > * {
    width: 100%;
    max-width: var(--il-max);
    margin-inline: auto;
    padding-inline: var(--il-gutter);
}

/* Контейнер запросов — блок с лентой, а не секция: доли снимков считаны
   от поля контента (1568 при макетных 1728). */
.il-project > .il-rail {
    container-type: inline-size;
}

/* Через одну секцию фон оливковый. */
.il-project--alt {
    background: var(--il-beige-dark);
}

.il-project__head {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.il-project__title {
    margin: 0;
    font-family: var(--il-font-display);
    font-weight: 400;
    /* 80px на макетных 1728 */
    font-size: clamp(34px, 4.63vw, 80px);
    line-height: 1.1;
    color: var(--il-white);
}

.il-project__lead {
    margin: 0;
    max-width: 1370px;
    font-family: var(--il-font-body);
    font-weight: 300;
    /* 20px на макетных 1728 */
    font-size: clamp(15px, 1.157vw, 20px);
    line-height: 1.4;
    color: var(--il-crumb-active);
}

/* Пять снимков 335×582 с шагом 10 — в сумме 1715 при поле контента
   1568, поэтому лента уходит за правый край экрана, как в макете.
   Доли считаны от контента секции: 335/1568 и 10/1568.

   Прокрутку и перетаскивание даёт .il-rail__track, здесь только шаг из
   макета вместо его общих 10px. */
.il-project__collage {
    gap: .638cqw;
}

/* Снимок — ссылка на оригинал, её открывает лайтбокс. */
.il-project__shot {
    display: block;
    flex: 0 0 21.365cqw;
    aspect-ratio: 335 / 582;
    overflow: hidden;
    background: var(--il-dark-2);
    cursor: zoom-in;
}

.il-project__shot img {
    transition: transform .4s ease;
}

.il-project__shot:hover img {
    transform: scale(1.03);
}

/* Пока ленту тащат, курсор-лупа сбивает с толку. */
.il-rail__track.is-dragging .il-project__shot {
    cursor: grabbing;
}

.il-project__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Описание и параметры идут вплотную (20), а кнопка отбита на общий
   шаг секции — отсюда margin-top у самой кнопки, а не gap здесь. */
.il-project__info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1510px;
}

.il-project__text {
    max-width: 1370px;
    font-family: var(--il-font-body);
    font-weight: 300;
    font-size: clamp(14px, 1.157vw, 20px);
    line-height: 1.4;
    color: var(--il-crumb-active);
}

.il-project__text p {
    margin: 0 0 20px;
}

.il-project__text p:last-child {
    margin-bottom: 0;
}

/* column-reverse ставит кнопку под таблицу, как в макете, не ломая
   порядок разметки: у <details> первым обязан идти <summary>. */
.il-project__details {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

.il-project__toggle {
    /* 20 от описания + 40 отсюда = шаг секции 60. */
    margin-top: 40px;
    display: inline-flex;
    /* Ширина по тексту. Одного align-items: flex-start у родителя мало:
       <summary> внутри <details> с display: flex Firefox всё равно тянет
       на всю строку, и кнопка расплывалась во всю ширину секции. */
    width: max-content;
    max-width: 100%;
    align-self: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
    font-family: var(--il-font-body);
    font-weight: 300;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: .04em;
    color: var(--il-white);
    cursor: pointer;
    list-style: none;
    transition: background .2s ease;
}

.il-project__toggle::-webkit-details-marker {
    display: none;
}

.il-project__toggle:hover {
    background: rgba(255, 255, 255, .08);
}

.il-project__toggle-less {
    display: none;
}

.il-project__details[open] .il-project__toggle-more {
    display: none;
}

.il-project__details[open] .il-project__toggle-less {
    display: inline;
}

.il-project__params {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.il-project__param {
    display: flex;
    gap: 20px;
    font-family: var(--il-font-body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--il-crumb-active);
}

.il-project__param dt {
    flex: 0 0 120px;
    font-weight: 400;
}

.il-project__param dd {
    margin: 0;
    font-weight: 500;
}

@media (max-width: 767px) {
    .il-page-hero--tall {
        min-height: 320px;
    }

    .il-page-hero__lead {
        margin-top: 16px;
        font-size: 22px;
    }

    /* В макете все проекты лежат в одной секции с шагом 48 — здесь их
       даёт вертикальный padding соседних секций (24 + 24). */
    .il-project {
        padding: 24px var(--il-gutter-mobile);
        gap: 16px;
    }

    .il-project:first-of-type {
        padding-top: 40px;
    }

    .il-project:last-of-type {
        padding-bottom: 40px;
    }

    /* Оливковой заливки на мобильном нет. */
    .il-project--alt {
        background: var(--il-dark);
    }

    .il-project__title {
        font-size: 34px;
        line-height: 1.2;
    }

    .il-project__lead {
        font-family: var(--il-font-ui);
        font-weight: 400;
        font-size: 15px;
        line-height: 1.6;
        color: rgba(255, 255, 255, .6);
    }

    /* В мобильном макете у проекта один снимок 335×300, но это лента:
       остальные не прячем, а даём листать свайпом — так же, как кейсы и
       плитки главной. */
    .il-project__shot {
        flex: 0 0 100%;
        aspect-ratio: 335 / 300;
    }

    .il-project__collage {
        gap: 10px;
    }

    .il-project__info {
        gap: 16px;
    }

    .il-project__text {
        font-family: var(--il-font-ui);
        font-weight: 400;
        font-size: 14px;
        line-height: 1.7;
        color: rgba(255, 255, 255, .45);
    }

    .il-project__toggle {
        margin-top: 16px;
        gap: 0;
        padding: 10px;
        justify-content: center;
        min-width: 186px;
        box-shadow: inset 0 0 0 1px var(--il-stroke);
        font-family: var(--il-font-ui);
        font-weight: 500;
        font-size: 14px;
        line-height: 1;
        letter-spacing: normal;
    }

    .il-project__param dt {
        flex: 0 0 100px;
    }
}

/* ------------------------------------------------------------------ */
/* Витрина «Бренды»                                                    */
/* ------------------------------------------------------------------ */

/* Своего экрана в хендоффе у этого списка нет — карточка повторяет
   плитку направления с «Каталога», но ниже: у бренда нет описания,
   только название и счётчик. */
.il-brands {
    padding: 60px 0 98px;
    background: var(--il-section-bg);
    color: var(--il-dark);
}

.il-brands__lead {
    margin: 0 0 40px;
    max-width: 1095px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    /* 34px на макетных 1728 */
    font-size: clamp(18px, 1.97vw, 34px);
    line-height: 1.2;
    color: var(--il-dark);
}

.il-brands__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* Пропорция 380.25×285 — половина высоты плитки направления: карточек
   вчетверо больше, восемь рядов в полный рост не читаются. */
.il-brandcard {
    position: relative;
    aspect-ratio: 380.25 / 285;
    overflow: hidden;
    container-type: inline-size;
    background: var(--il-dark);
    color: var(--il-beige);
}

.il-brandcard__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.il-brandcard:hover .il-brandcard__img {
    transform: scale(1.04);
}

.il-brandcard::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(64.868deg, rgb(26, 23, 27) 0%, rgba(26, 23, 27, .2) 100%);
    opacity: .55;
}

/* Доли те же, что у плитки направления, но снизу подпёрты пикселями:
   карточек в ряду четыре, и на планшете чистый cqw даёт нечитаемые 7px. */
.il-brandcard__cap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 2;
    padding: max(10px, 6.6cqw) max(12px, 7.9cqw);
    background: rgba(125, 125, 125, .5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: max(16px, 8.94cqw);
    line-height: 1;
    color: var(--il-white);
}

.il-brandcard__count {
    position: absolute;
    left: max(12px, 7.9cqw);
    right: max(12px, 7.9cqw);
    bottom: max(10px, 6.1cqw);
    z-index: 2;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: max(12px, 3.68cqw);
    line-height: 1.4;
    color: var(--il-beige);
}

@media (max-width: 1279px) {
    .il-brands__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .il-brands {
        padding: 30px 0 45px;
    }

    .il-brands__lead {
        margin-bottom: 24px;
        font-size: 18px;
    }

    /* Два в ряд: карточка низкая, в один столбец список растянулся бы на
       десяток экранов. */
    .il-brands__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ================================================================== */
/* «О нас»                                                             */
/* ================================================================== */

/* Все кегли пересчитаны из макетных 1728: 140px = 8.1vw, 250px =
   14.468vw и так далее. Верхняя граница clamp — значение из макета,
   нижняя подобрана по мобильному экрану. */

/* ------------------------------------------------------------- Hero */

/* Hero здесь — тот же .il-hero, что на главной: высота считается от
   экрана, кнопка та же. Своё только разрядка заголовка из этого
   макета. */
.il-hero--about .il-hero__title {
    letter-spacing: -.048em;
    color: var(--il-white);
}
/* ------------------------------------------------------ О компании */

/* Без overflow: hidden — нижний снимок должен заходить на следующую
   секцию, как в макете. Фото секции лежит в absolute-слое и наружу не
   вылезает, обрезать нечего. */
.il-about-intro {
    position: relative;
    background: var(--il-dark);
    color: var(--il-white);
}

.il-about-intro__media {
    position: absolute;
    inset: 0;
}

.il-about-intro__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.il-about-intro__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(70.589deg, rgb(26, 23, 27) 6.46%, rgba(26, 23, 27, .7) 128.49%);
}

/* Светлая полоса 480px поверх фото. */
.il-about-intro__band {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(220px, 27.78vw, 480px);
    padding: clamp(30px, 5.8vw, 100px) 0;
    background: var(--il-grey-bg);
    color: var(--il-dark);
}

.il-about-intro__logo {
    width: min(100%, 1166px);
    height: auto;
    display: block;
}

.il-about-intro__lead {
    margin: clamp(16px, 3.88vw, 67px) 0 0;
    max-width: 1444px;
    font-family: var(--il-font-ui);
    font-weight: 300;
    font-size: clamp(20px, 2.373vw, 41px);
    line-height: 1.2;
    color: var(--il-dark);
}

.il-about-intro__body {
    position: relative;
    padding-top: clamp(40px, 8.1vw, 140px);
    padding-bottom: clamp(40px, 5.8vw, 100px);
}

.il-about-intro__kicker {
    margin: 0 0 clamp(24px, 3.47vw, 60px);
    /* 373px из макета: правее начинается снимок, и на более широкой
       колонке текст под него подлезал. */
    max-width: 373px;
    font-family: var(--il-font-display);
    font-weight: 400;
    font-size: clamp(20px, 1.967vw, 34px);
    line-height: 1.3;
    color: var(--il-beige);
}

/* Три колонки 400.5 с шагом 58 — 1317 при поле контента 1568. */
.il-about-cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3.36vw, 58px);
    max-width: 1317px;
}

.il-about-cols p {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: clamp(15px, .984vw, 17px);
    line-height: 1.8;
    color: var(--il-white);
}

.il-about-cols--dark p {
    color: rgb(37, 37, 37);
}

/* Квадратные снимки на стыках секций.

   По вертикали привязки к высоте секции или к её низу нет: высота
   зависит от длины текста, а он в разных языках разный — от такой
   привязки снимок ложился прямо на колонки и на крупную фразу. Верхний
   держится за верх блока (это край светлой полосы, он фиксирован),
   нижние идут по потоку сразу за текстом и свисают за край
   отрицательным нижним отступом.

   z-index выше соседних секций: снимок должен лежать поверх и светлой
   полосы над ним, и заливки следующей секции под ним. */
.il-about-deco {
    position: relative;
    z-index: 3;
    display: block;
    width: 15.97vw;
    max-width: 276px;
    aspect-ratio: 1;
    object-fit: cover;
}

/* Правее заголовка, верхним краем заходит на светлую полосу (в макете
   на 53px). Заголовок ограничен 373px, поэтому левый край упирается в
   пиксели: на 1280 одни проценты подвели бы его вплотную к тексту. */
.il-about-deco--1 {
    position: absolute;
    left: max(35.4%, 480px);
    top: calc(-1 * clamp(20px, 3.07vw, 53px));
}

/* Под колонками, нижним краем уходит в следующую секцию на 237px, отступ
   сверху 84px — значения из макета. В отрицательный отступ заложены и
   эти 237, и нижний внутренний отступ блока (100): он прибавляется уже
   после, поэтому свес без него выходил короче. */
.il-about-deco--2 {
    width: 18.29vw;
    max-width: 316px;
    margin: clamp(24px, 4.86vw, 84px) 12.6% 0 auto;
    margin-bottom: calc(-1 * clamp(80px, 19.5vw, 337px));
}

/* В блоке «Подход» — под крупной фразой, нижним краем на полосу фото
   (в макете на 117px при отступе сверху 39px; плюс те же 100). */
.il-about-deco--3 {
    width: 13.43vw;
    max-width: 232px;
    margin: clamp(20px, 2.26vw, 39px) 17.9% 0 auto;
    margin-bottom: calc(-1 * clamp(60px, 12.56vw, 217px));
}

/* ---------------------------------------------------------- Подход */

.il-about-approach {
    position: relative;
    background: var(--il-beige);
    color: var(--il-dark);
}

.il-about-approach > .il-container {
    position: relative;
    z-index: 2;
    padding-top: clamp(30px, 5.44vw, 94px);
    padding-bottom: clamp(40px, 5.8vw, 100px);
}

.il-about-approach__lead {
    margin: 0 0 clamp(24px, 3.47vw, 60px);
    max-width: 566px;
    font-family: var(--il-font-display);
    font-weight: 400;
    font-size: clamp(20px, 1.967vw, 34px);
    line-height: 1.3;
    color: rgb(0, 0, 0);
}

.il-about-approach__statement {
    margin: clamp(32px, 6.83vw, 118px) 0 0;
    max-width: 1444px;
    font-family: var(--il-font-ui);
    font-weight: 300;
    font-size: clamp(28px, 4.225vw, 73px);
    line-height: 1.2;
    color: var(--il-dark);
}

/* Полоса фото под бежевым блоком — переход к кейсам. */
.il-about-approach__strip {
    position: relative;
    height: clamp(90px, 11.4vw, 197px);
    overflow: hidden;
    background: var(--il-dark);
}

.il-about-approach__strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.il-about-approach__strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(137.702deg, rgb(26, 23, 27) 36.13%, rgba(26, 23, 27, 0) 71.61%);
}

/* ----------------------------------------------------------- Кейсы */

.il-about-cases {
    position: relative;
    padding-top: clamp(30px, 3.47vw, 60px);
    background: var(--il-beige-dark);
    color: var(--il-white);
}

/* Общая шапка секций «О нас»: 60px и 26px с шагом 8. */
.il-about-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 900px;
}

.il-about-head__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(32px, 3.472vw, 60px);
    line-height: 1;
    color: var(--il-white);
}

.il-about-head__lead {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 300;
    font-size: clamp(17px, 1.505vw, 26px);
    line-height: 1.4;
    color: var(--il-white);
}

.il-about-head--dark .il-about-head__title,
.il-about-head--dark .il-about-head__lead {
    color: var(--il-dark);
}

.il-about-cases__track {
    margin-top: clamp(24px, 5.8vw, 100px);
    gap: 10px;
}

/* Карточка 335×582: фото 291 сверху, серая подложка снизу. */
.il-case {
    display: flex;
    flex-direction: column;
    flex: 0 0 335px;
    max-width: 335px;
    background: var(--il-white);
}

.il-case__media {
    aspect-ratio: 335 / 291;
    overflow: hidden;
}

.il-case__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.il-case__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-height: 291px;
    padding: 25px 30px 23px;
    background: var(--il-grey-bg);
    color: var(--il-dark);
}

.il-case__title {
    margin: 0;
    padding-right: 32px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    color: var(--il-dark);
}

.il-case__text {
    margin: 0;
    padding-right: 32px;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: var(--il-dark);
}

/* Кнопка прижата к низу карточки — в макете она на 521 от её верха. */
.il-case__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    min-width: 186px;
    min-height: 34px;
    padding: 10px;
    box-shadow: inset 0 0 0 1px var(--il-stroke);
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--il-dark);
    transition: background-color .2s ease;
}

.il-case__link:hover {
    background: rgba(26, 23, 27, .06);
    color: var(--il-dark);
}

/* Тёмная полупрозрачная плашка 427×61 со ссылкой по центру. */
.il-about-cases__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 427px;
    max-width: 100%;
    min-height: 61px;
    margin: clamp(30px, 3.36vw, 58px) 0;
    padding: 10px 20px;
    background: rgba(39, 39, 39, .3);
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(16px, 1.157vw, 20px);
    line-height: 1;
    text-align: center;
    color: var(--il-white);
    transition: background-color .2s ease;
}

.il-about-cases__cta:hover {
    background: rgba(39, 39, 39, .55);
    color: var(--il-white);
}

.il-about-cases__strip {
    position: relative;
    height: clamp(90px, 7.9vw, 137px);
    overflow: hidden;
    background: var(--il-dark);
}

.il-about-cases__strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.il-about-cases__strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(162.721deg, rgb(26, 23, 27) 46.17%, rgba(26, 23, 27, 0) 99.27%);
}

/* ---------------------------------------------------- Преимущества */

.il-about-advantages {
    padding: clamp(30px, 3.47vw, 60px) 0 clamp(45px, 5.8vw, 100px);
    background: var(--il-white);
    color: var(--il-dark);
}

/* Три счётчика 364 с шагом 107. */
.il-about-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 6.19vw, 107px);
    max-width: 1306px;
    margin: clamp(30px, 6.71vw, 116px) 0 clamp(30px, 5.8vw, 100px);
}

.il-about-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.il-about-stat__value {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(56px, 8.68vw, 150px);
    line-height: 1;
    color: var(--il-dark);
    /* Цифры одной ширины — пока счётчик добегает, число не дёргается. */
    font-variant-numeric: tabular-nums;
}

.il-about-stat__label {
    font-family: var(--il-font-ui);
    font-weight: 300;
    font-size: clamp(18px, 1.794vw, 31px);
    line-height: 1.1;
    color: var(--il-dark);
}

/* Рамки 414×162 по три в ряд; второй ряд не добирает до края — поэтому
   сетка с фиксированным треком, а не растяжка по ширине. */
.il-about-boxes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 414px));
    gap: 32px;
    max-width: 1306px;
}

.il-about-box {
    display: flex;
    align-items: center;
    min-height: clamp(110px, 9.38vw, 162px);
    padding: clamp(20px, 2.2vw, 38px) clamp(18px, 2.03vw, 35px);
    box-shadow: inset 0 0 0 1px rgb(0, 0, 0);
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(20px, 2.315vw, 40px);
    line-height: 1;
    color: rgb(0, 0, 0);
}

/* Четвёртая рамка в макете обведена оливковым — единственный акцент. */
.il-about-box:nth-child(4) {
    box-shadow: inset 0 0 0 1px var(--il-beige-dark);
    color: var(--il-beige-dark);
}

/* --------------------------------------------------------- Процесс */

.il-about-process {
    position: relative;
    overflow: hidden;
    background: var(--il-dark);
    color: var(--il-white);
}

.il-about-process__media {
    position: absolute;
    inset: 0;
}

.il-about-process__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.il-about-process__media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(162.721deg, rgb(26, 23, 27) 46.17%, rgba(26, 23, 27, 0) 99.27%);
}

.il-about-process__band {
    position: relative;
    min-height: clamp(220px, 27.78vw, 480px);
    padding: clamp(30px, 4.63vw, 80px) 0;
    background: var(--il-grey-bg);
    color: var(--il-dark);
}

/* Кегль 250 обязан ехать вместе с шириной — на фиксированном слово
   обрезается уже на 1500. */
.il-about-process__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(56px, 14.468vw, 250px);
    line-height: 1;
    color: var(--il-dark);
}

.il-about-process__lead {
    margin: clamp(12px, 1.68vw, 29px) 0 0;
    max-width: 1231px;
    font-family: var(--il-font-ui);
    font-weight: 300;
    font-size: clamp(18px, 2.373vw, 41px);
    line-height: 1.4;
    color: var(--il-dark);
}

.il-about-process__body {
    position: relative;
    padding-top: clamp(40px, 5.61vw, 97px);
    padding-bottom: clamp(45px, 5.6vw, 96px);
}

/* Пять шагов по 250 с шагом 70. */
.il-about-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(24px, 4.05vw, 70px);
    max-width: 1530px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.il-about-step {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.894vw, 50px);
}

.il-about-step__num {
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(32px, 2.894vw, 50px);
    line-height: 1;
    color: rgb(166, 162, 154);
}

.il-about-step__text {
    font-family: var(--il-font-ui);
    font-weight: 700;
    font-size: clamp(15px, 1.273vw, 22px);
    line-height: 1.3;
    color: var(--il-white);
}

@media (max-width: 1279px) {
    /* Рамки преимуществ и шаги процесса в исходные ряды не помещаются. */
    .il-about-boxes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .il-about-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Ниже 1280 свободного места справа от текста уже нет — снимки
       встают в поток, как в мобильном макете. */
    .il-about-deco {
        position: static;
        width: 100%;
        max-width: none;
        margin: clamp(24px, 4vw, 40px) 0 0;
        aspect-ratio: 312 / 330;
    }
}

@media (max-width: 767px) {
    .il-about-intro__band {
        min-height: 0;
        padding: 55px 0;
    }

    .il-about-intro__logo {
        width: 281px;
    }

    .il-about-intro__lead {
        margin-top: 16px;
        font-size: 26px;
    }

    .il-about-intro__body,
    .il-about-process__body {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    /* Колонки в мобильном макете идут одна под другой с шагом 58. */
    .il-about-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 58px;
    }

    .il-about-approach > .il-container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .il-about-approach__statement {
        margin-top: 58px;
        font-size: 28px;
    }

    .il-about-cases__track {
        margin-top: 24px;
    }

    .il-about-boxes,
    .il-about-stats,
    .il-about-steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .il-about-stats {
        margin: 30px 0;
        gap: 30px;
    }

    .il-about-stat__value {
        font-size: 120px;
    }

    .il-about-box {
        font-size: 33px;
    }

    .il-about-step {
        gap: 16px;
    }

    .il-about-process__title {
        font-size: 56px;
    }

    .il-about-process__lead {
        font-size: 20px;
    }
}

/* ------------------------------------------------------------------ */
/* Кейсы: страница-список и страница одного кейса                      */
/* ------------------------------------------------------------------ */

/* Карточка .il-case описана выше, в блоке «О нас»: она общая для ленты
   на «О нас» и сетки здесь. Правки ниже — только то, что отличается,
   когда карточка стоит в сетке и её части стали ссылками. */

.il-case__media {
    display: block;
}

.il-case__title a {
    color: inherit;
}

.il-case__title a:hover {
    color: var(--il-beige-dark);
}

.il-cases {
    padding: clamp(30px, 3.47vw, 60px) 0 clamp(45px, 5.8vw, 100px);
    background: var(--il-section-bg);
    color: var(--il-dark);
}

.il-cases__title {
    margin: 0 0 clamp(24px, 2.9vw, 50px);
    font-family: var(--il-font-ui);
    font-weight: 500;
    /* 60px на макетных 1728 */
    font-size: clamp(28px, 3.472vw, 60px);
    line-height: 1;
    color: var(--il-dark);
}

/* Сетка, а не лента: на своей странице кейсы не листаются, а лежат
   рядами. Шаг 10 — как между карточками в макете. */
.il-cases__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

/* В ленте карточка держит ширину 335, в сетке её задаёт колонка. */
.il-cases__grid .il-case {
    flex: 1 1 auto;
    max-width: none;
}

/* Лента «другие кейсы» под статьёй — на тёмном, как контакты ниже. */
.il-cases--others {
    background: var(--il-dark);
}

.il-cases--others .il-cases__title {
    color: var(--il-white);
}

.il-cases--others .il-cases__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* --------------------------------------------------------- Статья */

.il-article {
    padding: clamp(30px, 4.63vw, 80px) 0 clamp(45px, 5.8vw, 100px);
    background: var(--il-section-bg);
    color: var(--il-dark);
}

/* Ширина строки как у колонок в макете «О нас» — 1370 при поле 1568:
   длиннее строку читать неудобно. */
.il-article__text {
    max-width: 1370px;
    font-family: var(--il-font-ui);
    font-weight: 400;
    font-size: clamp(15px, 1.157vw, 20px);
    line-height: 1.7;
    color: var(--il-dark);
}

.il-article__text p {
    margin: 0 0 1.2em;
}

.il-article__text p:last-child {
    margin-bottom: 0;
}

.il-article__text h2,
.il-article__text h3 {
    margin: 1.6em 0 .6em;
    font-weight: 500;
    font-size: clamp(20px, 1.85vw, 32px);
    line-height: 1.2;
}

.il-article__text ul,
.il-article__text ol {
    margin: 0 0 1.2em;
    padding-left: 1.4em;
}

.il-article__text img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.6em 0;
}

/* Две кнопки в ряд: «Назад» — основная, «Все кейсы» — приглушённая. */
.il-article__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(30px, 3.36vw, 58px);
}

.il-article__back,
.il-article__all {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 186px;
    min-height: 42px;
    padding: 10px 20px;
    box-shadow: inset 0 0 0 1px var(--il-stroke);
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    color: var(--il-dark);
    transition: background-color .2s ease, box-shadow .2s ease;
}

.il-article__back {
    box-shadow: inset 0 0 0 1px var(--il-dark);
}

.il-article__back:hover,
.il-article__all:hover {
    background: rgba(26, 23, 27, .06);
    box-shadow: inset 0 0 0 1px var(--il-dark);
    color: var(--il-dark);
}

@media (max-width: 1279px) {
    .il-cases__grid,
    .il-cases--others .il-cases__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .il-cases {
        padding: 30px 0 45px;
    }

    .il-cases__title {
        margin-bottom: 20px;
        font-size: 28px;
    }

    .il-cases__grid,
    .il-cases--others .il-cases__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .il-article {
        padding: 30px 0 45px;
    }

    /* На узком экране кнопки встают друг под друга во всю ширину. */
    .il-article__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .il-article__back,
    .il-article__all {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* Шоурум                                                              */
/* ------------------------------------------------------------------ */

/* Секция блока: заголовок, строка под ним и лента снимков. Устройство
   и ритм — как у секций брендов в макете, кегли те же, что у остальных
   заголовков сайта (60px на макетных 1728).

   container-type нужен ленте: ширина снимка задана долей от контента
   секции, как у коллажа на «Проектных решениях». */
/* Секция во всю ширину: ограничен контент внутри (.il-container), а не
   она сама. Иначе на экране шире макета заливка обрывается по 1728, и по
   краям видны белые поля страницы. */
.il-showroom {
    padding: clamp(40px, 5.8vw, 100px) 0;
    background: var(--il-dark);
    color: var(--il-white);
    overflow: hidden;
}

/* Контейнер ленты и есть контейнер запросов: ширина снимка задана долей
   от поля контента (1568 при макетных 1728), а не от всего экрана. */
.il-showroom__rail {
    container-type: inline-size;
}

/* Через одну секцию фон светлее. */
.il-showroom--alt {
    background: var(--il-beige-dark);
}

.il-showroom__head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: clamp(24px, 2.9vw, 50px);
    max-width: 900px;
}

.il-showroom__title {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 500;
    font-size: clamp(30px, 3.472vw, 60px);
    line-height: 1;
    color: var(--il-white);
}

.il-showroom__lead {
    margin: 0;
    font-family: var(--il-font-ui);
    font-weight: 300;
    font-size: clamp(15px, 1.157vw, 20px);
    line-height: 1.4;
    color: var(--il-crumb-active);
}

/* Шаг 10 при поле контента 1568 — та же доля, что у коллажа проектов. */
.il-showroom__track {
    gap: .638cqw;
}

/* Четыре снимка занимают поле контента ровно: 4 × 24.25 + 3 × 0.638 =
   98.9cqw. Пятый начинается в вылете ленты и выглядывает за край —
   как в макете. Пропорция плитки взята со страницы брендов. */
.il-showroom__shot {
    display: block;
    flex: 0 0 24.25cqw;
    aspect-ratio: 380.25 / 285;
    overflow: hidden;
    background: var(--il-dark-2);
    cursor: zoom-in;
}

.il-showroom__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}

.il-showroom__shot:hover img {
    transform: scale(1.03);
}

.il-rail__track.is-dragging .il-showroom__shot {
    cursor: grabbing;
}

@media (max-width: 1279px) {
    /* Ниже 1280 четыре плитки в ряд становятся мелкими — показываем
       две с половиной, остальное листается. */
    .il-showroom__shot {
        flex: 0 0 40cqw;
    }
}

@media (max-width: 767px) {
    .il-showroom {
        padding: 30px 0;
    }

    .il-showroom__head {
        margin-bottom: 20px;
    }

    .il-showroom__title {
        font-size: 30px;
    }

    .il-showroom__track {
        gap: 10px;
    }

    .il-showroom__shot {
        flex: 0 0 85%;
    }
}

/* ------------------------------------------------------------------ */
/* Фон страниц с тёмным контентом                                      */
/* ------------------------------------------------------------------ */

/* Блоки карточки товара и избранного ограничены шириной макета вместе со
   своей заливкой. На экране шире 1728 из-под них по краям проглядывал
   белый фон .il-main — те самые поля.

   Красим фон страницы под ними: все ограниченные блоки на этих страницах
   тёмные, а светлые секции (отзывы, контакты) идут во всю ширину и
   закрывают его сами. */
body.product .il-main,
body.wishlist .il-main {
    background: var(--il-dark);
}