/* Start:/local/templates/500na700/css/about.css?179014287828284*/
/* =============================================================================
   Страница «О бренде» (/about/) и общая база для /blog/.

   Перенесено из макета ~/Downloads/«My Nymph · О бренде.html»: палитра,
   шрифты, отступы и сетки — как в исходнике. Не переносились блоки, которые
   в макете имитировали сайт (.shell/.frame/.page/.hdr/.nav/.ftr) и служебная
   вкладка аналитики (.an) — шапка и подвал настоящие, из header.php/footer.php.

   Всё внутри .mnn-longread: имена вроде .two, .facts, .press, .btn слишком общие,
   чтобы пускать их в глобальную область шаблона.
   ============================================================================= */

/* Объявления @font-face для Cormorant Garamond переехали в
   css/fonts-display.css: он подключается на всех страницах, потому что тем
   же шрифтом набран заголовок подвала. */

.mnn-longread {
    /* Высота прилипшей мобильной шапки .header_mobile (включается с 992px).
       Замерено на стенде 390px: 70px. Держим переменной — от неё считается
       запас у первого блока страницы, и в blog.css он берётся отсюда же. */
    --mn-header-m: 70px;

    --ink: var(--mn-black);
    --mute: var(--mn-grey);
    --line: rgba(21, 31, 28, .15);
    --wine: var(--mn-wine);
    --disp: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --body: "Open Sans", Arial, sans-serif;

    background: #ffffff;
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
}

.mnn-longread * {
    box-sizing: border-box;
}

.mnn-longread a {
    color: var(--wine);
}

.mnn-longread h1,
.mnn-longread h2,
.mnn-longread h3 {
    font-family: var(--disp);
    font-style: italic;
    font-weight: 500;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
}

.mnn-longread p {
    margin: 0;
}

/* ===== секции ===== */
.mnn-longread .sec {
    padding: 64px 24px;
    max-width: 1120px;
    margin: 0 auto;
}

.mnn-longread .sec + .sec {
    border-top: 1px solid var(--line);
}

/*
 * Надзаголовок секции — техническая подпись, а не акцент: винным на странице
 * выделено одно слово в заголовке, и подпись рядом спорила с ним за внимание.
 * Набор тот же, что у остальных служебных строк сайта.
 */
.mnn-longread .eyebrow {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 14px;
}

.mnn-longread .lead {
    font-size: 16px;
    line-height: 1.6;
    max-width: 62ch;
    color: var(--ink);
}

.mnn-longread .txt {
    max-width: 62ch;
    color: var(--ink);
}

.mnn-longread .txt + .txt {
    margin-top: 14px;
}

.mnn-longread h2 {
    font-size: clamp(28px, 3.4vw, 40px);
}

.mnn-longread h2 + .txt,
.mnn-longread h2 + .lead {
    margin-top: 18px;
}

/* ===== hero ===== */
.mnn-longread .hero {
    padding-top: 56px;
}

.mnn-longread .hero h1 {
    font-size: clamp(32px, 4vw, 48px);
    max-width: 16ch;
}

/* Винным выделено одно слово в заголовке — приём общий для всей страницы,
   поэтому правило стоит на h1/h2/h3, а не только на hero. */
.mnn-longread h1 em,
.mnn-longread h2 em,
.mnn-longread h3 em {
    font-style: italic;
    font-weight: 400;
    color: var(--wine);
}

.mnn-longread .hero .lead {
    margin-top: 22px;
}

.mnn-longread .hero-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: end;
}

/* ===== заглушки фото ===== */
.mnn-longread .ph {
    position: relative;
    background: rgba(21, 31, 28, .06);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 14px;
}

.mnn-longread .ph::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 30% 30%, rgba(255, 255, 255, .5), transparent 70%),
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(110, 38, 54, .05) 18px 19px);
}

.mnn-longread .ph span {
    position: relative;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--wine);
    background: rgba(255, 255, 255, .75);
    padding: 5px 8px;
    border-radius: 2px;
}

.mnn-longread .ph.tall { aspect-ratio: 4/5; }

/* .ph с настоящим фото: без градиента-заглушки и внутренних полей */
.mnn-longread .ph_photo {
    display: block;
    padding: 0;
    background: none;
}

.mnn-longread .ph_photo::before {
    content: none;
}

.mnn-longread .ph_photo picture {
    display: block;
    width: 100%;
    height: 100%;
}

.mnn-longread .ph_photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.mnn-longread .ph.wide { aspect-ratio: 16/9; }
.mnn-longread .ph.sq   { aspect-ratio: 1; }

/* ===== полоса фактов ===== */
.mnn-longread .facts {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.mnn-longread .facts div {
    padding: 22px 18px;
    border-right: 1px solid var(--line);
}

.mnn-longread .facts div:last-child {
    border-right: 0;
}

.mnn-longread .facts b {
    display: block;
    font-family: var(--disp);
    font-weight: 500;
    font-size: 30px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.mnn-longread .facts small {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--mute);
    line-height: 1.35;
}

/* ===== две колонки ===== */
.mnn-longread .two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* ===== паспорт ткани ===== */
.mnn-longread .pass {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 24px;
}

.mnn-longread .pass div {
    background: #fff;
    padding: 16px 18px;
}

.mnn-longread .pass b {
    display: block;
    font-size: 14px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mute);
    font-weight: 500;
    margin-bottom: 6px;
}

.mnn-longread .pass span {
    font-size: 16px;
}

/* ===== производство ===== */
.mnn-longread .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 32px;
}

.mnn-longread .steps h3 {
    font-size: 22px;
    margin: 12px 0 8px;
}

.mnn-longread .steps p {
    font-size: 16px;
    color: var(--ink);
}

.mnn-longread .steps .ph {
    aspect-ratio: 4/3;
}

/* Трёхшаговый вариант. Ниже, в планшетном и телефонном медиазапросах,
   .steps перестраивается на две колонки и ленту — те правила идут после
   этого и перебивают его, специфичность у них одинаковая. */
.mnn-longread .steps_3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ===== посадка ===== */
.mnn-longread .fit {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 28px;
}

.mnn-longread .fit div {
    background: #fff;
    padding: 22px;
}

.mnn-longread .fit h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.mnn-longread .fit p {
    font-size: 16px;
    color: var(--ink);
}

.mnn-longread .fit_3 {
    grid-template-columns: repeat(3, 1fr);
}

.mnn-longread .fit p + .tlink {
    margin-top: 10px;
}

/* ===== примерка ===== */
.mnn-longread .try {
    background: rgba(21, 31, 28, .06);
    border-radius: 4px;
    padding: 36px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 36px;
    align-items: center;
}

.mnn-longread .try ol {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
    counter-reset: t;
}

.mnn-longread .try li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    font-size: 16px;
    counter-increment: t;
}

.mnn-longread .try li::before {
    content: counter(t);
    font-family: var(--disp);
    font-size: 26px;
    line-height: 1;
    color: var(--wine);
}


/* ===== честно ===== */
.mnn-longread .honest {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 28px;
}

.mnn-longread .honest div {
    border-top: 2px solid var(--wine);
    padding-top: 14px;
}

.mnn-longread .honest h3 {
    font-size: 21px;
    margin-bottom: 6px;
}

.mnn-longread .honest p {
    font-size: 16px;
    color: var(--ink);
}

/* ===== ценности ===== */
.mnn-longread .values {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 10px;
}

.mnn-longread .values h3 {
    font-size: 21px;
    margin-bottom: 8px;
}

.mnn-longread .values p {
    font-size: 16px;
    color: var(--ink);
}

/* ===== команда ===== */
.mnn-longread .team {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    margin-top: 24px;
    font-family: var(--disp);
    font-size: 24px;
    line-height: 1.25;
    color: #4a3d41;
}

/* разделитель — точка между ролями, в разметке её нет: так строка
   переносится по ролям, а не по точкам */
.mnn-longread .team span + span::before {
    content: "·";
    margin-right: 16px;
    color: var(--mute);
}

.mnn-longread .team + .txt {
    margin-top: 22px;
}

/* ===== где купить ===== */
.mnn-longread .where {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    margin-top: 28px;
}

.mnn-longread .where div {
    background: #fff;
    padding: 22px;
}

.mnn-longread .where h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.mnn-longread .where p {
    font-size: 16px;
    color: var(--ink);
}

/* ===== сноска и текстовая ссылка ===== */

/* мелкая оговорка под основным текстом блока */
.mnn-longread .note {
    margin-top: 16px;
    max-width: 62ch;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mute);
}

/*
 * Обычная текстовая ссылка в потоке: цветом основного текста, с
 * подчёркиванием. Винный в .mnn-longread a здесь не нужен — он уводит
 * взгляд на ссылку сильнее, чем на сам текст блока.
 * inline-flex с min-height 44px: на телефоне это зона нажатия, а строка
 * при этом остаётся строкой.
 */
.mnn-longread .tlink {
    margin-top: 18px;
    font-size: 16px;
}

.mnn-longread .tlink a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

@media (hover: hover) {
    .mnn-longread .tlink a:hover {
        color: var(--wine);
    }
}

/* ===== ДНК ===== */
.mnn-longread .dna {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.mnn-longread .dna blockquote {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
    font-weight: 400;
}

.mnn-longread .dna blockquote em {
    color: var(--wine);
}

/* ===== нас носят в ===== */
.mnn-longread .seen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 20px;
    font-family: var(--disp);
    font-size: 24px;
    color: #4a3d41;
}

.mnn-longread .seen span {
    white-space: nowrap;
}

/* Ссылки внутри текста: «А также» под блоком СМИ и паспорт ткани.
   В блоке «Нас носят в» остаются span'ы — подчёркивания там нет. */
.mnn-longread .seen a,
.mnn-longread .pass a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    transition: color .2s ease, border-color .2s ease;
}

.mnn-longread .seen a:hover,
.mnn-longread .pass a:hover {
    color: var(--wine);
    border-bottom-color: var(--wine);
}

/* названия изданий не разрываем */
.mnn-longread .seen a {
    white-space: nowrap;
}

.mnn-longread .seen-l {
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 30px;
}

.mnn-longread .seen-l:first-of-type {
    margin-top: 0;
}

/* ===== СМИ ===== */
.mnn-longread .press {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.mnn-longread .pc {
    display: block;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 20px;
    text-decoration: none;
    color: var(--ink);
    transition: border-color .2s;
}

.mnn-longread .pc:hover {
    border-color: var(--wine);
}

.mnn-longread .pc-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.mnn-longread .pc-h b {
    font-family: var(--disp);
    font-size: 24px;
    font-weight: 500;
}

.mnn-longread .pc-h span {
    font-size: 14px;
    color: var(--mute);
}

.mnn-longread .pc p {
    font-size: 16px;
    line-height: 1.45;
}

.mnn-longread .pc-q {
    font-size: 14px;
    color: var(--mute);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* ===== финальный призыв ===== */
.mnn-longread .cta {
    text-align: center;
    padding: 72px 24px;
}

.mnn-longread .cta h2 {
    font-size: clamp(30px, 4vw, 48px);
}

.mnn-longread .cta .lead {
    margin: 16px auto 28px;
    max-width: 44ch;
}

.mnn-longread .cta-btns {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* ===== мобильная версия — медиазапросы из макета ===== */
/* =============================================================================
   Адаптив: телефон <=600px, планшет 601–1024px.
   Десктоп (>=1025px) описан выше и здесь не переопределяется.

   Боковые поля вынесены в переменные и учитывают вырезы iPhone
   (env(safe-area-inset-*)), чтобы «edge-to-edge» фото доходили ровно до края.
   ============================================================================= */

.mnn-longread {
    --pad: 24px;
    --pad-l: calc(var(--pad) + env(safe-area-inset-left, 0px));
    --pad-r: calc(var(--pad) + env(safe-area-inset-right, 0px));
}

@media (prefers-reduced-motion: reduce) {
    .mnn-longread *,
    .mnn-sticky-cta {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ============================ ПЛАНШЕТ 601–1024 ============================ */
@media (min-width: 601px) and (max-width: 1024px) {
    .mnn-longread {
        --pad: 32px;
    }

    .mnn-longread .sec {
        padding: 64px var(--pad-r) 64px var(--pad-l);
    }

    .mnn-longread h1,
    .mnn-longread .hero h1 {
        font-size: clamp(26px, 7vw, 32px);
    }

    .mnn-longread h2,
    .mnn-longread .cta h2 {
        font-size: clamp(26px, 6vw, 34px);
    }

    .mnn-longread .lead,
    .mnn-longread .txt {
        font-size: 16px;
        line-height: 1.6;
    }

    /* hero остаётся в две колонки */
    .mnn-longread .hero-grid {
        grid-template-columns: 1.1fr .9fr;
        gap: 28px;
    }

    /* факты 3 + 2 */
    .mnn-longread .facts {
        grid-template-columns: repeat(3, 1fr);
    }

    .mnn-longread .facts div:nth-child(3n) {
        border-right: 0;
    }

    .mnn-longread .facts div:nth-child(-n+3) {
        border-bottom: 1px solid var(--line);
    }

    .mnn-longread .steps {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .mnn-longread .two,
    .mnn-longread .dna {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .mnn-longread .fit {
        grid-template-columns: 1fr 1fr;
    }

    .mnn-longread .press,
    .mnn-longread .values {
        grid-template-columns: 1fr 1fr;
    }

    .mnn-longread .where {
        grid-template-columns: 1fr 1fr;
    }

    .mnn-longread .team {
        font-size: 21px;
    }

    .mnn-longread .try {
        grid-template-columns: 1fr;
        padding: 28px;
        gap: 24px;
    }

    /* фото в пределах полей, со скруглением */
    .mnn-longread .ph_photo {
        border-radius: 4px;
        overflow: hidden;
    }
}

/* «Честно» — три колонки только на широком планшете */
@media (min-width: 601px) and (max-width: 899px) {
    .mnn-longread .honest {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (min-width: 900px) and (max-width: 1024px) {
    .mnn-longread .honest {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================== ТЕЛЕФОН <=600 ============================== */
@media (max-width: 600px) {
    .mnn-longread {
        --pad: 24px;
    }

    .mnn-longread .sec {
        padding: 48px var(--pad-r) 48px var(--pad-l);
    }

    .mnn-longread h1,
    .mnn-longread .hero h1 {
        font-size: clamp(26px, 7vw, 32px);
        max-width: none;
    }

    .mnn-longread h2,
    .mnn-longread .cta h2 {
        font-size: clamp(26px, 6vw, 34px);
    }

    .mnn-longread .lead,
    .mnn-longread .txt,
    .mnn-longread .steps p,
    .mnn-longread .honest p,
    .mnn-longread .fit p {
        font-size: 16px;
        line-height: 1.6;
    }

    /* --- фото во всю ширину экрана, без скруглений --- */
    .mnn-longread .ph_photo {
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        width: auto;
        border-radius: 0;
    }

    /* --- hero: сначала фото, под ним текст --- */
    .mnn-longread .hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mnn-longread .hero-grid > .ph_photo {
        order: -1;
    }

    .mnn-longread .ph_photo_hero.tall {
        aspect-ratio: 4/5;
    }

    /* --- факты: горизонтальная лента --- */
    .mnn-longread .facts {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        padding-left: var(--pad-l);
        padding-right: var(--pad-r);
    }

    .mnn-longread .facts::-webkit-scrollbar {
        display: none;
    }

    .mnn-longread .facts div {
        flex: 0 0 150px;
        scroll-snap-align: start;
        border-bottom: 0;
        padding: 20px 16px 20px 0;
    }

    .mnn-longread .facts div:last-child {
        padding-right: var(--pad-r);
    }

    .mnn-longread .facts small {
        white-space: normal;
        overflow: visible;
    }

    /* --- ткань: фото сверху, паспорт в одну колонку --- */
    .mnn-longread .two {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mnn-longread .two > .ph_photo {
        order: -1;
    }

    .mnn-longread .pass {
        grid-template-columns: 1fr;
        gap: 0;
        background: none;
        border: 0;
        border-top: 1px solid var(--line);
    }

    .mnn-longread .pass div {
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
    }

    /* --- шаги производства: лента со snap --- */
    /*
     * Лента прокручивается во всю ширину экрана, но карточки стоят по полям.
     * scroll-padding-left обязателен: без него scroll-snap-align: start
     * прижимает карточку к самому краю окна и padding-left ленты
     * не виден — первый кадр начинается от края экрана.
     */
    .mnn-longread .steps {
        display: flex;
        grid-template-columns: none;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--pad-l);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        padding: 0 var(--pad-r) 0 var(--pad-l);
    }

    .mnn-longread .steps::-webkit-scrollbar {
        display: none;
    }

    .mnn-longread .steps > div {
        flex: 0 0 78vw;
        scroll-snap-align: start;
    }

    /* подпись карточки в ленте — тот же набор, что в карточках блога:
       две ленты стоят на странице одна под другой, и разнобой в них виден */
    .mnn-longread .steps p {
        font-size: 15px;
        line-height: 22px;
    }

    /* внутри ленты фото уже не тянем за края */
    .mnn-longread .steps .ph_photo {
        margin-left: 0;
        margin-right: 0;
        width: auto;
        aspect-ratio: 4/3;
    }

    /* --- посадка, ценности, где купить, СМИ --- */
    .mnn-longread .fit,
    .mnn-longread .honest,
    .mnn-longread .press,
    .mnn-longread .dna,
    .mnn-longread .values,
    .mnn-longread .where {
        grid-template-columns: 1fr;
    }

    .mnn-longread .honest,
    .mnn-longread .values {
        gap: 20px;
    }

    /* роли команды переносятся по одной, строка не растягивает страницу */
    .mnn-longread .team {
        font-size: 20px;
        gap: 4px 12px;
    }

    .mnn-longread .team span + span::before {
        margin-right: 12px;
    }

    /* кнопки призыва: в строку, пока помещаются, дальше — в столбец */
    .mnn-longread .cta-btns .btn {
        flex: 0 1 auto;
    }

    .mnn-longread .press,
    .mnn-longread .dna {
        gap: 16px;
    }

    /* --- «А также»: перенос строк --- */
    .mnn-longread .seen {
        gap: 10px 20px;
    }

    .mnn-longread .seen a,
    .mnn-longread .seen span {
        white-space: normal;
    }

    /* --- примерка: фото коробки сверху, во всю ширину --- */
    .mnn-longread .try {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 0 0 26px;
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        border-radius: 0;
    }

    .mnn-longread .try > .ph_photo {
        order: -1;
        margin: 0;
    }

    .mnn-longread .try > div:not(.ph_photo) {
        padding: 0 var(--pad-r) 0 var(--pad-l);
    }


    .mnn-longread .cta {
        padding-bottom: 56px;
    }

    /* тап-цели */
    .mnn-longread .pc,
    .mnn-longread .seen a {
        min-height: 48px;
    }

    .mnn-longread .seen a {
        display: inline-flex;
        align-items: center;
    }
}

/* =============================================================================
   ФАКТЫ СПИСКОМ — <=768

   Лента со snap на узком экране читается как обрезанный ряд: видно три
   пункта, остальные за краем, и что там прокручивается — непонятно.
   Разворачиваем в список в одну колонку.

   Одинаково на /about/ и /partners/ — полоса фактов там одна и та же.
   Блок идёт после медиазапроса <=600: специфичность у правил совпадает,
   перебивает порядок. Десктоп и широкий планшет не трогаются.
   ============================================================================= */
@media (max-width: 768px) {
    .mnn-longread .facts {
        display: block;
        overflow-x: visible;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .mnn-longread .facts div {
        flex: none;
        padding: 16px 0;
        border-right: 0;
        border-bottom: 0;
    }

    /* линия только между пунктами: рамку списка держат border-top и
       border-bottom самого .facts */
    .mnn-longread .facts div + div {
        border-top: 1px solid rgba(21, 31, 28, .15);
    }

    .mnn-longread .facts b {
        font-size: 28px;
    }

    .mnn-longread .facts small {
        font-size: 14px;
    }
}

/* Мобильная шапка .header_mobile фиксирована и занимает ~70px сверху
   (включается с 992px). Первый экран /about/, /blog/ и статьи должен
   начинаться под ней — как на других статичных страницах. */
@media (max-width: 992px) {
    .mnn-longread .sec.hero,
    .mnn-longread .post {
        padding-top: calc(var(--mn-header-m) + 24px);
    }
}

/* =============================================================================
   Липкая кнопка «Выбрать купальник» — только телефон.
   ============================================================================= */

.mnn-sticky-cta {
    display: none;
}

@media (max-width: 600px) {
    .mnn-sticky-cta {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 6;
        /* поля свои, числом: блок лежит рядом с .mnn-longread, а не внутри,
           и переменную --pad оттуда не наследует */
        padding: 10px calc(24px + env(safe-area-inset-right, 0px))
                 calc(10px + env(safe-area-inset-bottom, 0px))
                 calc(24px + env(safe-area-inset-left, 0px));
        background: rgba(255, 255, 255, .94);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-top: 1px solid #EAD9D9;
        transform: translateY(120%);
        opacity: 0;
        visibility: hidden;
        transition: transform .25s ease, opacity .25s ease, visibility .25s ease;
    }

    .mnn-sticky-cta.is-visible {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    /*
     * Вид кнопки берётся из css/buttons.css — в разметке у неё .btn.btn--primary.
     * Здесь остаётся только то, чего в системе нет: ширина во всю полосу и
     * высота 44px вместо штатных 48. Селектор с родителем нужен, чтобы
     * перебить .btn независимо от того, какой файл подключён позже.
     */
    .mnn-sticky-cta .mnn-sticky-cta__btn {
        display: flex;
        width: 100%;
        height: 44px;
        min-height: 44px;
        padding: 0 24px;
        box-shadow: none;
    }
}

/* End */


/* Start:/local/templates/500na700/css/partners.css?178997878610636*/
/* =============================================================================
   /partners/ — перенос макета ~/Downloads/mynymph-partners.html.

   Базовые вещи (палитра, шрифты, .sec, .eyebrow, .lead, .txt, .ph, .facts,
   .hero-grid, адаптив, липкие отступы под мобильную шапку) берутся из
   about.css — страница обёрнута в .mnn-longread. Здесь только то, чего
   в about.css нет.

   Два класса из макета переименованы, потому что в about.css такие имена
   уже заняты другим смыслом:
     .lead (форма)  ->  .lead-form   (в about.css .lead — лид-абзац)
     .cta  (блок с формой) -> .cta-box (в about.css .cta — финальный экран)
   ============================================================================= */

/* ===== расхождения с about.css: в макете свои значения =====
   Только десктоп: ниже 1025px действуют мобильные и планшетные правила
   из about.css (поля 20/32px, h1 clamp(30px, 8vw, 44px)). */
@media (min-width: 1025px) {
    /* в макете боковые поля секции 40px (в about.css 24px) */
    .mnn-longread.partners-page .sec {
        padding-left: 40px;
        padding-right: 40px;
    }

    /* в макете h1 в 18 знаков (в about.css 16ch); размер — общий потолок 48px */
    .mnn-longread.partners-page .hero h1 {
        font-size: clamp(32px, 4vw, 48px);
        max-width: 18ch;
    }

    .mnn-longread.partners-page .hero .lead {
        margin-top: 18px;
        max-width: 60ch;
    }
}

/* ===== подпись поверх фото =====
   В about.css .ph_photo — блок с padding:0 (там подписей нет), поэтому
   выравнивание из .ph не работает. Подпись из макета ставим сами. */
.mnn-longread .ph_photo > span {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 1;
}

/* ===== кнопки Telegram / почта ===== */
.mnn-longread .contact {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.mnn-longread .cbtn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 28px;
    border: 1px solid var(--mn-black);
    border-radius: 0;
    font: 400 14px/1 var(--body);
    letter-spacing: .02em;
    text-transform: lowercase;
    text-decoration: none;
    color: var(--mn-black);
    transition: background .2s ease, color .2s ease;
}

.mnn-longread .cbtn.primary {
    background: var(--mn-black);
    color: #fff;
}

.mnn-longread .cbtn:hover {
    background: var(--mn-black);
    color: #fff;
}

.mnn-longread .cbtn.primary:hover {
    background: #000;
    color: #fff;
}

.mnn-longread .cbtn svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.mnn-longread .cbtn small {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    opacity: .85;
}

.mnn-longread .who {
    margin-top: 8px;
    font-size: 14px;
    color: var(--mute);
}

/* ===== форматы ===== */
.mnn-longread .cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.mnn-longread .card {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 24px;
}

.mnn-longread .card h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.mnn-longread .card p {
    font-size: 16px;
    color: #3a2f33;
}

/* ===== условия ===== */
.mnn-longread .terms {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin-top: 28px;
}

.mnn-longread .terms div {
    border-top: 2px solid var(--wine);
    padding-top: 14px;
}

.mnn-longread .terms h3 {
    font-size: 21px;
    margin-bottom: 6px;
}

.mnn-longread .terms p {
    font-size: 16px;
    color: #3a2f33;
}

/* ===== от письма до полки ===== */
.mnn-longread .how {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 28px;
}

.mnn-longread .how h3 {
    font-size: 24px;
    margin-bottom: 14px;
}

.mnn-longread .how ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    counter-reset: h;
}

.mnn-longread .how li {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    counter-increment: h;
}

.mnn-longread .how li::before {
    content: counter(h);
    font-family: var(--disp);
    font-size: 26px;
    line-height: 1;
    color: var(--wine);
}

.mnn-longread .how li b {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.mnn-longread .how li span {
    font-size: 16px;
    color: #3a2f33;
}

/* ===== витрины ===== */
.mnn-longread .shelves {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 28px;
}

.mnn-longread .shelves .ph {
    aspect-ratio: 4/5;
}

/* ===== список партнёров ===== */
.mnn-longread .plist {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 28px;
}

.mnn-longread .plist h3 {
    margin-bottom: 12px;
    font-family: var(--body);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute);
}

.mnn-longread .plist ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mnn-longread .plist li {
    font-family: var(--disp);
    font-size: 22px;
    line-height: 1.2;
}

.mnn-longread .plist li span {
    margin-left: 8px;
    font-family: var(--body);
    font-size: 14px;
    color: var(--mute);
}

/* ===== блок с формой ===== */
.mnn-longread .cta-box {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 40px;
    background: rgba(21, 31, 28, .06);
    border-radius: 4px;
}

.mnn-longread .cta-box h2 {
    font-size: clamp(26px, 3vw, 36px);
}

/* ===== форма ===== */
.mnn-longread .lead-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.mnn-longread .lead-form input,
.mnn-longread .lead-form select {
    width: 100%;
    min-height: 48px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    color: var(--ink);
    font: 15px var(--body);
}

.mnn-longread .lead-form input:focus,
.mnn-longread .lead-form select:focus {
    outline: 2px solid var(--wine);
    outline-offset: 0;
    border-color: var(--wine);
}


.mnn-longread .lead-form .btn[disabled] {
    opacity: .6;
    cursor: default;
}

.mnn-longread .lead-form small {
    grid-column: 1/-1;
    font-size: 14px;
    color: var(--mute);
}

/* honeypot — прячем от людей, но не через display:none */
.mnn-longread .lead-form .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mnn-longread .form-note {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.mnn-longread .form-note_error {
    color: #A32B2B;
}

/* сообщение об успехе — на месте формы */
.mnn-longread .form-done {
    margin-top: 20px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.6;
}

/* ===== SEO-абзацы ===== */
.mnn-longread .seo h2 {
    font-size: 26px;
}

.mnn-longread .seo .txt {
    margin-top: 14px;
    max-width: 70ch;
    font-size: 16px;
}

/* =============================================================================
   Адаптив — по тем же правилам, что /about/ (см. about.css).
   ============================================================================= */

/* ============================ ПЛАНШЕТ 601–1024 ============================ */
@media (min-width: 601px) and (max-width: 1024px) {
    .mnn-longread .terms,
    .mnn-longread .shelves {
        grid-template-columns: 1fr 1fr;
    }

    .mnn-longread .cta-box {
        grid-template-columns: 1fr;
        padding: 32px;
    }

    .mnn-longread .how {
        gap: 28px;
    }

    .mnn-longread .seo h2 {
        font-size: clamp(26px, 6vw, 34px);
    }
}

/* ============================== ТЕЛЕФОН <=600 ============================== */
@media (max-width: 600px) {
    .mnn-longread .cards,
    .mnn-longread .terms,
    .mnn-longread .how,
    .mnn-longread .plist,
    .mnn-longread .lead-form {
        grid-template-columns: 1fr;
    }

    .mnn-longread .how,
    .mnn-longread .plist {
        gap: 28px;
    }

    /* кнопки во всю ширину */
    .mnn-longread .contact {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .mnn-longread .cbtn {
        justify-content: center;
    }

    /* витрины — лента со snap, как полоса фактов на /about/ */
    .mnn-longread .shelves {
        display: flex;
        grid-template-columns: none;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        padding: 0 var(--pad-r) 0 var(--pad-l);
    }

    .mnn-longread .shelves::-webkit-scrollbar {
        display: none;
    }

    .mnn-longread .shelves .ph {
        flex: 0 0 78vw;
        scroll-snap-align: start;
        border-radius: 0;
    }

    /* блок с формой — во всю ширину экрана */
    .mnn-longread .cta-box {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px var(--pad-r) 32px var(--pad-l);
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        border-radius: 0;
    }

    /* фото в блоке формы — сверху и до краёв */
    .mnn-longread .cta-box > .ph {
        order: -1;
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        border-radius: 0;
    }

    .mnn-longread .seo h2 {
        font-size: clamp(26px, 6vw, 34px);
    }

    .mnn-longread .seo .txt,
    .mnn-longread .card p,
    .mnn-longread .terms p,
    .mnn-longread .how li span {
        font-size: clamp(16px, 4.2vw, 17px);
        line-height: 1.6;
    }
}

/* End */
/* /local/templates/500na700/css/about.css?179014287828284 */
/* /local/templates/500na700/css/partners.css?178997878610636 */