/* Start:/local/templates/versta_desktop/assets/css/pages/system.css?17917267599718*/
/*
 * VERSTA desktop — системные и прочие страницы вне макета (BES-81, BES-83).
 * Подключается Layout::pageCss('system') из веток versta_desktop страниц:
 *   /404.php (экран 28), /ukhod-za-odezhdoy/, /wishlist/about/.
 * Видеогалерея и «Готовые образы» — в style.css своих шаблонов (news.list «video», news «images.1»).
 *
 * Содержание:
 *  1. 404 «Сошли с маршрута» — первый экран (.nf-hero), «Популярное сейчас» (.nf-popular)
 *  2. Старый текст из редактора (.legacy-text) — /ukhod-za-odezhdoy/
 *  3. Лендинг вишлиста (.wl-about) — /wishlist/about/
 *  4. Узкие экраны
 */

/* ========== 1. 404 ========== */
/*
 * <div class="not-found">
 *   <section class="nf-hero">
 *     <div class="nf-hero__media">…область 404-image (img / picture)…</div>
 *     <span class="nf-hero__shade"></span>
 *     <div class="nf-hero__body">
 *       <p class="nf-hero__code">404</p>
 *       <div class="nf-hero__main">h1 · .nf-hero__text (область 404-text) · поиск · .nf-hero__links</div>
 *     </div>
 *   </section>
 *   <section class="nf-popular">section-head + .product-grid</section>
 * </div>
 * Макет (1440): первый экран 820 с шапкой overlay поверх, затемнение .35; «404» — 400px, справа колонка 460
 * («СОШЛИ С МАРШРУТА» 52px, текст 16px, поле поиска, ссылки); «Популярное сейчас» — отступ 112, сетка 4.
 */
.nf-hero {
    --nf-on-dark: rgba(255, 255, 255, .88);       /* текст на фото */
    --nf-on-dark-line: rgba(255, 255, 255, .6);   /* подчёркивание ссылок */

    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(600px, 56.94vw, 820px);
    /* Шапка overlay лежит поверх верха блока — контент её не задевает */
    padding: calc(var(--vd-header-h) + 48px) var(--vd-gutter) clamp(40px, 4.44vw, 64px);
    overflow: hidden;
    background: var(--vd-ink);
    color: var(--vd-white);
}

.nf-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.nf-hero__media :is(img, picture, video) {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
}

/* Затемнение макета (.35) + сильнее под шапкой и под текстом: фото бывают светлыми (снег) */
.nf-hero__shade {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, .5),
        rgba(10, 10, 10, .3) 28%,
        rgba(10, 10, 10, .35) 55%,
        rgba(10, 10, 10, .62)
    );
}

.nf-hero__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    gap: 32px 48px;
    align-items: end;
    width: 100%;
}

.nf-hero__code {
    margin-left: -.035em;
    font: 700 clamp(160px, 27.78vw, 400px) / .74 var(--vd-font-display);
    letter-spacing: .02em;
    white-space: nowrap;
}

.nf-hero__main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding-bottom: 12px;
}

.nf-hero__title {
    font: 700 clamp(36px, 3.61vw, 52px) / .95 var(--vd-font-display);
    letter-spacing: .04em;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.nf-hero__text {
    font-size: 16px;
    line-height: 1.55;
    color: var(--nf-on-dark);
}

.nf-hero__text > * + * {
    margin-top: .6em;
}

.nf-hero__text a {
    color: var(--vd-white);
    text-decoration: underline;
    text-underline-offset: .2em;
}

.nf-hero__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
}

.nf-hero__link {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--nf-on-dark-line);
    font: 600 14px / 1 var(--vd-font-text);
    color: var(--vd-white);
    transition: border-color var(--vd-transition);
}

.nf-hero__link:hover {
    color: var(--vd-white);
    border-bottom-color: var(--vd-white);
}

.nf-hero__link:focus-visible {
    outline-color: var(--vd-white);
}

/* «Популярное сейчас» */
.nf-popular {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.5vw, 36px);
    padding: clamp(72px, 7.78vw, 112px) var(--vd-gutter) clamp(72px, 8.33vw, 120px);
}

/* ========== 2. Старый текст из редактора ========== */
/*
 * Тексты из старого визуального редактора: отступы абзацами-пустышками <p><br></p>, псевдосписки
 * «&nbsp;&nbsp; - …». Пустышке оставляем только высоту строки, без нижнего поля абзаца, — иначе между
 * блоками по два-три пустых абзаца. Текст общий с garderob, поэтому чиним стилями, а не правкой текста.
 */
.legacy-text > p:has(> br:only-child) {
    margin-bottom: 0;
}

/* ========== 3. Лендинг вишлиста ========== */
/*
 * <div class="wl-about">
 *   <ul class="wl-about__features"> li.wl-about__feature (иконка · h2 · текст) ×3 </ul>
 *   <section class="wl-about__section"> section-head + ol.wl-about__steps (01–04) </section>
 *   <section class="wl-about__section"> section-head + ul.chips (поводы) </section>
 *   <section class="wl-about__cta"> h2 · текст · кнопка «Войти и создать список» · «Нет аккаунта?» </section>
 * </div>
 */
.wl-about {
    display: flex;
    flex-direction: column;
    gap: clamp(72px, 8.33vw, 120px);
    padding: 0 var(--vd-gutter) clamp(72px, 8.33vw, 120px);
}

.wl-about__features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--vd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wl-about__feature {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
    padding: clamp(28px, 2.78vw, 40px);
    border: 1px solid var(--vd-divider);
    border-radius: var(--vd-radius);
}

.wl-about__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--vd-chip);
    color: var(--vd-ink);
}

.wl-about__icon svg {
    width: 24px;
    height: 24px;
}

.wl-about__feature-title {
    font: 700 var(--vd-fs-h5) / 1 var(--vd-font-display);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.wl-about__text {
    font-size: var(--vd-fs-body);
    line-height: 1.6;
    color: var(--vd-text-2);
}

.wl-about__section {
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 2.5vw, 36px);
}

.wl-about__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px var(--vd-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wl-about__step {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding-top: 20px;
    border-top: 1px solid var(--vd-ink);
}

.wl-about__step-num {
    margin-bottom: 6px;
    font: 13px / 1 var(--vd-font-mono);
    color: var(--vd-text-3);
}

.wl-about__step-title {
    font: 600 17px / 1.3 var(--vd-font-text);
}

/* Поводы — подписи, не кнопки */
.wl-about__occasions {
    list-style: none;
}

.wl-about__occasion,
.wl-about__occasion:hover {
    border-color: var(--vd-chip);
    cursor: default;
}

.wl-about__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: clamp(48px, 5.56vw, 80px) clamp(24px, 3.9vw, 56px);
    border-radius: var(--vd-radius);
    background: var(--vd-surface);
    text-align: center;
}

.wl-about__cta-title {
    max-width: 900px;
    font: 700 var(--vd-fs-h3) / 1 var(--vd-font-display);
    letter-spacing: .05em;
    text-transform: uppercase;
    overflow-wrap: break-word;
}

.wl-about__cta-text {
    max-width: 560px;
    font-size: var(--vd-fs-lead);
    line-height: 1.55;
    color: var(--vd-text-2);
}

.wl-about__cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.wl-about__cta-note {
    font-size: var(--vd-fs-small);
    line-height: 1.5;
    color: var(--vd-text-3);
}

.wl-about__cta-note a {
    color: var(--vd-ink);
    text-decoration: underline;
    text-decoration-color: var(--vd-line-strong);
    text-underline-offset: .2em;
}

.wl-about__cta-note a:hover {
    color: var(--vd-accent);
    text-decoration-color: currentColor;
}

/* ========== 4. Узкие экраны ========== */
@media (max-width: 1024px) {
    .nf-hero__body {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .nf-hero__code {
        font-size: clamp(120px, 24vw, 240px);
    }

    .nf-hero__main {
        max-width: 560px;
        padding-bottom: 0;
    }

    .wl-about__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .nf-hero {
        min-height: 560px;
        padding-top: calc(var(--vd-header-h) + 32px);
    }

    .wl-about__features,
    .wl-about__steps {
        grid-template-columns: minmax(0, 1fr);
    }

    .wl-about__cta {
        align-items: stretch;
    }

    .wl-about__cta-actions .btn {
        width: 100%;
    }
}

/* End */
/* /local/templates/versta_desktop/assets/css/pages/system.css?17917267599718 */