/* 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/blog.css?179183848625622*/
/* =============================================================================
   Блог: список /blog/, детальная /blog/<code>/ и тизер на /about/.

   Надстройка над about.css — переменные, шрифты, .sec/.eyebrow/.btn и сетки
   берутся оттуда, поэтому обёртка страницы всегда .mnn-longread.
   ============================================================================= */

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

/* ===== карточка ===== */
.mnn-longread .bc {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .2s ease;
}

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

/* «скоро» — карточка не кликается */
.mnn-longread .bc_soon {
    cursor: default;
}

.mnn-longread .bc__media {
    position: relative;
    /* кроп 4:3 по центру — одинаково на всех ширинах, иначе сетка съезжает */
    aspect-ratio: 4/3;
    background: rgba(21, 31, 28, .06);
    overflow: hidden;
}

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

.mnn-longread .bc__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/*
 * Вертикальная обложка в горизонтальной рамке: центр кропа приходится на
 * середину кадра и срезает верх. Прижимаем к верхнему краю — класс ставит
 * blog-data.php, он же и определяет ориентацию файла.
 */
.mnn-longread .bc__media_top img {
    object-position: top center;
}

.mnn-longread .bc__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 20px 22px;
}

/*
 * Строка даты — всегда одна. Рубрику отсюда убрали (см. blog-data.php), а
 * nowrap страхует от переноса на узкой карточке: перенос сдвигал бы
 * заголовок вниз только в одной карточке из ряда.
 */
.mnn-longread .bc__date {
    font-family: var(--body);
    font-size: 12px;
    line-height: 16px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
}

.mnn-longread .bc__title {
    font-family: var(--disp);
    font-style: italic;
    font-weight: 500;
    font-size: 24px;
    line-height: 1.15;
    margin: 0;
}

/*
 * Анонс обрезаем пятью строками с многоточием. Без обрезки карточка с
 * длинным анонсом тянула ряд вверх: сетка растягивает соседей по самой
 * высокой, и низ у них расходился с текстом.
 */
.mnn-longread .bc__text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.5;
    color: #3a2f33;
    margin: 0;
}

/* плашка «скоро» — строчными: заглавные тут читаются как NEW, а голубая
   плашка новинки остаётся единственной заглавной меткой на сайте */
.mnn-longread .bc__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: lowercase;
    color: var(--wine);
    background: rgba(255, 255, 255, .88);
    padding: 5px 9px;
    border-radius: 2px;
}

/*
 * Карточка без обложки. Пустой блок .bc__media — это кроп 3:2, залитый серым,
 * то есть дырка в сетке: у статьи без фото его не выводим вовсе
 * (класс ставит mnnBlogCards в partial/blog-data.php). Плашка «скоро»
 * позиционировалась поверх обложки — без неё возвращаем её в поток.
 */
.mnn-longread .bc_nopic .bc__badge {
    position: static;
    align-self: flex-start;
    padding: 0;
    background: none;
    letter-spacing: .16em;
}

/* ===== список /blog/ ===== */
.mnn-longread .blog-empty {
    margin-top: 24px;
    font-size: 15px;
    color: var(--mute);
}

/*
 * «все статьи →» — обычная текстовая ссылка, а не кнопка-капслок: винный и
 * линия снизу делали из неё третий по силе акцент в блоке, после заголовка
 * и карточек.
 */
.mnn-longread .blog-all {
    margin-top: 26px;
    font-family: var(--body);
    font-size: 14px;
    letter-spacing: normal;
    text-transform: lowercase;
}

.mnn-longread .blog-all a {
    /* inline-flex ради зоны нажатия: строчная ссылка давала 20 px по высоте,
       на телефоне в неё не попасть */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (hover: hover) {
    .mnn-longread .blog-all a:hover {
        color: var(--mute);
    }
}

/* ===== детальная статья ===== */
.mnn-longread .post {
    max-width: 680px;
    margin: 0 auto;
    padding: 56px 24px 72px;
}

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

.mnn-longread .post h1 {
    font-family: var(--disp);
    font-weight: 500;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    margin: 0;
}

.mnn-longread .post__lead {
    font-size: 18px;
    line-height: 1.6;
    color: #3a2f33;
    margin-top: 18px;
}

.mnn-longread .post__pic {
    margin: 32px calc(50% - 50vw) 32px;
    width: 100vw;
    max-width: 100vw;
}

.mnn-longread .post__pic img {
    display: block;
    width: 100%;
    height: auto;
}

.mnn-longread .post__body {
    margin-top: 28px;
    font-size: 16.5px;
    line-height: 1.7;
    color: #3a2f33;
}

.mnn-longread .post__body p {
    margin: 0 0 16px;
}

.mnn-longread .post__body h2 {
    font-size: 30px;
    margin: 34px 0 12px;
}

.mnn-longread .post__body h3 {
    font-size: 23px;
    margin: 26px 0 10px;
}

.mnn-longread .post__body ul,
.mnn-longread .post__body ol {
    margin: 0 0 16px;
    padding-left: 22px;
}

.mnn-longread .post__body li {
    margin: 6px 0;
}

.mnn-longread .post__body img {
    max-width: 100%;
    height: auto;
}

/*
 * Выносная цитата: бордовая линия слева, без кавычек и курсива —
 * набор тот же, что в тексте, отличается только отбивкой и линией.
 */
.mnn-longread .post__body .pull {
    margin: 28px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--wine);
    font-size: 18px;
    line-height: 1.6;
    color: #3a2f33;
}

/*
 * Цитата без класса: текст статьи приходит из админки готовым html, и там
 * пишут обычный <blockquote>. Подача крупнее, чем у .pull, — заголовочным
 * шрифтом; .pull остаётся как есть, его ставит blog-import.php.
 */
.mnn-longread .post__body blockquote:not(.pull) {
    margin: 28px 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--wine);
    font-family: var(--disp);
    font-style: italic;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.35;
    color: var(--ink);
}

/* закрывающий абзац — по центру, отбит линией */
.mnn-longread .post__body .post__end {
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-style: italic;
    color: var(--mute);
}

/* фото с подписью внутри текста */
.mnn-longread .post__body .post__figure {
    margin: 28px 0;
}

.mnn-longread .post__body .post__figure img {
    display: block;
    width: 100%;
    height: auto;
    /*
     * Тонкая рамка: в статьях встречаются скриншоты со светлым фоном, без
     * неё они сливаются с белой страницей.
     */
    border: 1px solid rgba(21, 31, 28, .15);
}

.mnn-longread .post__body .post__figure picture {
    display: block;
}

/* подпись к обложке статьи */
/* Портретная обложка: ширина текста, по центру, без кропа.
   Правило идет после общего .post__pic и перебивает вынос на 100vw. */
.mnn-longread .post__pic_narrow {
    /* 700 px по центру экрана: колонка статьи уже, поэтому отрицательные
       поля выводят кадр чуть за ее край, но не за край окна. */
    width: min(700px, calc(100vw - 48px));
    max-width: none;
    margin: 32px calc(50% - min(350px, (100vw - 48px) / 2));
}

.mnn-longread .post__pic-caption {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mute);
}

/* Широкая обложка вынесена во всю ширину экрана, подпись под ней должна
   остаться в колонке текста, иначе она повисает у самого края окна. */
.mnn-longread .post__pic:not(.post__pic_narrow) .post__pic-caption {
    max-width: 680px;
    margin-inline: auto;
    padding: 0 24px;
}

.mnn-longread .post__pic img {
    border: 1px solid rgba(21, 31, 28, .15);
}

/* ===== сочетания цветов ===== */

.mnn-longread .post__body .post__mixes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 28px 0;
}

.mnn-longread .post__body .post__mix {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px 7px 7px;
    border: 1px solid rgba(21, 31, 28, .15);
    border-radius: 30px;
    background: #fff;
}

/* кружок из двух половин — сами цвета сочетания */
.mnn-longread .post__body .post__mix-dot {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(21, 31, 28, .08);
}

.mnn-longread .post__body .post__mix-label {
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink);
}

.mnn-longread .post__body .post__mix-label b {
    font-weight: 600;
    color: var(--wine);
}

.mnn-longread .post__body .post__figure figcaption {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mute);
}

.mnn-longread .post__dot {
    margin: 0 2px;
    color: var(--line);
}

.mnn-longread .post__pic picture {
    display: block;
}

.mnn-longread .post__pic picture img {
    display: block;
    width: 100%;
    height: auto;
}

.mnn-longread .post__cta {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--line);
    text-align: center;
}

.mnn-longread .post__soon {
    margin-top: 28px;
    padding: 22px;
    background: rgba(21, 31, 28, .06);
    border-radius: 4px;
    font-size: 15px;
    color: #3a2f33;
}

/* ===== «Еще в блоге» под статьей ===== */
.mnn-longread .post-more {
    border-top: 1px solid var(--line);
    padding: 52px 24px 64px;
}

.mnn-longread .post-more__inner {
    max-width: 1080px;
    margin: 0 auto;
}

.mnn-longread .post-more__title {
    margin: 10px 0 0;
    font-family: var(--disp);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
}

/* Статей пока мало: растягивать одну карточку во всю ширину незачем,
   поэтому колонка ограничена по ширине, а ряд стоит по центру. */
.mnn-longread .post-more .blog-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 340px));
    justify-content: start;
    margin-top: 24px;
}

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

/* плашка «скоро»: на десктопе и планшете — поверх обложки */
@media (min-width: 601px) {
    .mnn-longread .bc__badge {
        position: absolute;
        top: 12px;
        left: 12px;
        z-index: 2;
        background: rgba(255, 255, 255, .88);
    }

    /* у карточки без обложки класть плашку некуда — она идёт строкой */
    .mnn-longread .bc_nopic .bc__badge {
        position: static;
        background: none;
    }

    .mnn-longread .bc_nopic .bc__body {
        padding-top: 22px;
    }
}

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

    /* лента на /about/ здесь не нужна — обычная сетка в 2 колонки */
    .mnn-longread .blog-teaser .blog-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mnn-longread .post-more {
        padding: 48px 32px 56px;
    }

    .mnn-longread .post__pic:not(.post__pic_narrow) .post__pic-caption {
        max-width: 640px;
        padding: 0 32px;
    }

    .mnn-longread .post {
        max-width: 640px;
        padding: 56px 32px 64px;
    }

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

    .mnn-longread .post__body {
        font-size: 17px;
        line-height: 1.65;
    }

    /* подпись к картинке не должна совпадать с кеглем текста */
    .mnn-longread .post__body figcaption {
        padding-top: 8px;
        font-size: 14px;
        line-height: 1.45;
        color: var(--mute);
    }
}

/* ============================== ТЕЛЕФОН <=600 ============================== */
@media (max-width: 600px) {

    /* --- список: одна колонка, обложка во всю ширину --- */
    .mnn-longread .blog-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /* поля те же, что у статьи: обложки карточек уходят в край экрана
       отрицательными полями и должны попадать ровно в него */
    .mnn-longread .post-more {
        padding: 40px var(--pad-r) 48px var(--pad-l);
    }

    .mnn-longread .post-more .blog-grid {
        grid-template-columns: 1fr;
    }

    .mnn-longread .post-more__title {
        font-size: 22px;
    }

    .mnn-longread .bc {
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .mnn-longread .bc__media {
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        border-radius: 0;
    }

    .mnn-longread .bc__body {
        padding: 14px 0 0;
        gap: 6px;
    }

    /* плашка — строкой над заголовком, не поверх фото */
    .mnn-longread .bc__badge {
        position: static;
        align-self: flex-start;
        padding: 0;
        background: none;
        font-size: 11px;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: var(--wine);
    }

    .mnn-longread .blog-all {
        margin-top: 20px;
    }

    .mnn-longread .blog-all a {
        display: inline-flex;
        align-items: center;
        min-height: 48px;
    }

    /* --- тизер на /about/: горизонтальная лента со snap --- */
    /* scroll-padding-left — как у ленты шагов в about.css: без него
       scroll-snap-align: start прижимает первую карточку к краю окна
       и padding-left ленты не виден */
    .mnn-longread .blog-teaser .blog-grid {
        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 .blog-teaser .blog-grid::-webkit-scrollbar {
        display: none;
    }

    .mnn-longread .blog-teaser .bc {
        flex: 0 0 78vw;
        scroll-snap-align: start;
    }

    /* внутри ленты обложка не выходит за края */
    .mnn-longread .blog-teaser .bc__media {
        margin-left: 0;
        margin-right: 0;
    }

    /* --- детальная --- */
    .mnn-longread .post {
        max-width: none;
        padding: 90px var(--pad-r) 56px var(--pad-l);
    }

    .mnn-longread .post h1 {
        font-size: clamp(30px, 8vw, 44px);
    }

    .mnn-longread .post__lead {
        font-size: clamp(16px, 4.2vw, 17px);
        line-height: 1.6;
    }

    .mnn-longread .post__body {
        font-size: 17px;
        line-height: 1.65;
    }

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

    /* обложка 16:9 во всю ширину */
    .mnn-longread .post__pic {
        margin: 26px calc(-1 * var(--pad-l)) 26px calc(-1 * var(--pad-r));
        width: auto;
        max-width: none;
    }

    .mnn-longread .post__pic img {
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    .mnn-longread .post__pic_top img {
        object-position: top center;
    }

    .mnn-longread .post__pic_narrow {
        margin: 26px auto;
        width: auto;
        max-width: none;
    }

    .mnn-longread .post__pic_narrow img {
        aspect-ratio: auto;
        object-fit: fill;
    }

    .mnn-longread .post__pic:not(.post__pic_narrow) .post__pic-caption {
        max-width: none;
        margin-inline: 0;
        padding-left: var(--pad-l);
        padding-right: var(--pad-r);
    }

    /* картинки внутри текста статьи — тоже во всю ширину, с подписью */
    .mnn-longread .post__body img,
    .mnn-longread .post__body figure {
        display: block;
        margin-left: calc(-1 * var(--pad-l));
        margin-right: calc(-1 * var(--pad-r));
        width: auto;
        max-width: none;
        border-radius: 0;
    }

    .mnn-longread .post__body figure img {
        margin: 0;
        width: 100%;
    }

    .mnn-longread .post__body figcaption {
        padding: 8px var(--pad-r) 0 var(--pad-l);
        font-size: 14px;
        line-height: 1.45;
        color: var(--mute);
    }

    .mnn-longread .post__cta .btn {
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 16px 20px;
        text-align: center;
    }
}

/* Отступ под фиксированную мобильную шапку. Дублирует правило из about.css:
   blog.css подключается после него, и его же медиазапросы перебили бы
   padding-top у .post. */
@media (max-width: 992px) {
    .mnn-longread .post {
        padding-top: calc(var(--mn-header-m) + 24px);
    }
}


/* =============================================================================
   БЛОК «СКОРО»

   Заготовки статей вынесены под опубликованные отдельной секцией.
   Заголовок мельче h1 страницы: это второстепенный блок, а не раздел.
   ============================================================================= */

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

.mnn-longread .blog-soon__title {
    font-size: 24px;
    margin-bottom: 24px;
}


/* =============================================================================
   ТОВАРЫ ИЗ СТАТЬИ

   Статичные карточки внутри текста статьи (DETAIL_TEXT): фото, название,
   цена; вся карточка — ссылка на товар, отдельной кнопки нет.

   Цена размечена классами карточки каталога (.products__item__price*), а
   css/catalog-card.css подключает сама страница статьи, когда такие классы
   в тексте есть, — свои правила для цены здесь не нужны.
   Селекторы с .post__body — чтобы перебить мобильное правило, которое
   растягивает каждую картинку текста на всю ширину экрана.
   ============================================================================= */

.mnn-longread .post__body .post__products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 20px;
    margin: 24px 0 8px;
}

/* колонка: фото, название, цена, кнопка прижата к низу — кнопки в ряду на одной линии */
.mnn-longread .post__body .post__product {
    display: flex;
    flex-direction: column;
    color: var(--ink);
    text-decoration: none;
}

/* кадр 2:3 — как у фото товара в каталоге */
.mnn-longread .post__body .post__product picture {
    display: block;
    aspect-ratio: 2/3;
    overflow: hidden;
    background: rgba(21, 31, 28, .06);
}

.mnn-longread .post__body .post__products img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
}

.mnn-longread .post__body .post__product-name {
    margin-top: 10px;
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.4;
    color: var(--ink);
}

/*
 * Цена прижата к низу карточки, чтобы цены ряда встали на одну линию при
 * названиях разной длины. Отступ сверху — padding: margin-top здесь занят
 * этим «auto», а правило каталога (margin-top: auto) наше перебивает по
 * специфичности.
 */
.mnn-longread .post__body .post__product .products__item__price {
    margin: auto 0 0;
    padding-top: 8px;
}

/* наведение: подчёркнутое название и чуть приглушённое фото — кликается вся карточка */
@media (hover: hover) {
    .mnn-longread .post__body .post__product:hover .post__product-name {
        text-decoration: underline;
    }

    .mnn-longread .post__body .post__product:hover img {
        opacity: .92;
    }
}

@media (max-width: 600px) {
    .mnn-longread .post__body .post__products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 12px;
    }

    .mnn-longread .post__body .post__product-name {
        margin-top: 8px;
        font-size: 13px;
    }
}


/* =============================================================================
   ПРОМОКОД ПОД СТАТЬЁЙ

   Блок между концовкой статьи и кнопкой; разметку даёт blog/detail.php, а
   копирование — общий js/promo-copy.js, тот же, что на посадочных /promo/.
   Показывается только пока идёт акция (MNN_PRINT_PROMO_TO).
   ============================================================================= */

.mnn-longread .post__promo {
    margin: 40px auto 0;
    max-width: 720px;
    padding: 28px 24px 32px;
    border: 1px solid rgba(21, 31, 28, .15);
    background: #fff;
    text-align: center;
}

.mnn-longread .post__promo-eyebrow {
    margin: 0;
    font-family: var(--body);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(21, 31, 28, .5);
}

.mnn-longread .post__promo-code {
    margin: 12px 0 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: .04em;
    color: var(--ink);
}

.mnn-longread .post__promo-note {
    margin: 10px auto 0;
    max-width: 440px;
    font-family: var(--body);
    font-size: 14px;
    line-height: 1.5;
    color: rgba(21, 31, 28, .7);
}

.mnn-longread .post__promo-copy {
    margin-top: 20px;
    min-width: 180px;
}

@media (max-width: 600px) {
    .mnn-longread .post__promo {
        margin-top: 32px;
        padding: 24px 16px 28px;
    }

    .mnn-longread .post__promo-code {
        font-size: 28px;
    }
}

/* End */


/* Start:/local/templates/500na700/css/catalog-card.css?179071753310843*/
/* =============================================================================
   Карточка товара в списке: плашки, иконки, низ карточки, ховер.
   Общая для всех списков — /catalog/, разделы, /sales/, поиск, «похожие».

   Цвета только из палитры (css/palette.css). Селекторы с body и местами
   !important: старые копии стилей карточки лежат в шести файлах, и часть
   из них грузится в template-агрегате уже после нашего.
   ============================================================================= */

/* ===== фото и ховер ===== */
body .products__item__image {
    position: relative;
    overflow: hidden;
}

body .products__item__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

body .products__item__photo_hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 1;
}

/* второе фото подменяет первое — только там, где есть курсор */
@media (hover: hover) {
    body .products__item__image:hover .products__item__photo_hover {
        opacity: 1;
    }
}

/* ===== плашки ===== */
body .products__item__badges {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    pointer-events: none;
}

body .mn-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 0;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

body .mn-badge_sale { background: var(--mn-wine);  color: #fff; }
body .mn-badge_new  { background: var(--mn-blue);  color: var(--mn-black); }

/* старые плашки из прежней вёрстки больше не выводим */
body .products__item__image .product__tag,
body .products__item__image .product__swim-tag {
    display: none !important;
}

/* ===== низ карточки ===== */
body .products__item__image {
    margin-bottom: 10px;
}

body .products__item__title {
    margin: 0 0 6px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--mn-black);
    /* ровно две строки: цены в ряду встают на одну линию */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(15px * 1.4 * 2);
}

body .products__item__price {
    margin: 0 0 4px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: 'Open Sans', Arial, sans-serif;
}

body .products__item__price__now {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--mn-black);
}

body .products__item__price__now_sale { color: var(--mn-wine); }

body .products__item__price__old {
    order: -1;                 /* старая цена слева от новой */
    font-size: 14px;
    line-height: 1.2;
    font-weight: 400;
    color: var(--mn-grey);
    text-decoration: line-through;
}

/* ===== «в Сплит» ===== */
body .products__item__split {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 400;
    color: var(--mn-grey);
}

body .products__item__split__icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

/* прежний виджет Яндекс Пэй с чёрной плашкой не выводим */
body .products__item__split-badge { display: none !important; }

/* ===== цвета ===== */
body .products__item__colors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

body .products__item__color {
    position: relative;
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 50%;
}

body .products__item__color > span {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-size: cover;
    background-position: center;
}

/* белый кружок на белом фоне теряется — обводка темнее */
body .products__item__color[data-color*="айвори" i] > span,
body .products__item__color[data-color*="белый" i] > span,
body .products__item__color[data-color*="молочный" i] > span {
    border-color: #ccc;
}

body .products__item__colors__text {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 13px;
    line-height: 1.2;
    color: var(--mn-grey);
    white-space: nowrap;
}

/* подсказка с названием цвета */
@media (hover: hover) {
    body .products__item__color:hover > span { box-shadow: 0 0 0 3px rgba(21, 31, 28, .15); }

    body .products__item__color[data-color]:hover::after {
        content: attr(data-color);
        position: absolute;
        bottom: calc(100% + 6px);
        left: 50%;
        transform: translateX(-50%);
        z-index: 5;
        padding: 3px 7px;
        background: var(--mn-black);
        color: #fff;
        font-family: 'Open Sans', Arial, sans-serif;
        font-size: 11px;
        line-height: 1.3;
        white-space: nowrap;
        pointer-events: none;
    }
}

/* ===== мобильная ===== */
@media (max-width: 600px) {
    body .products__item__title {
        font-size: 14px;
        min-height: calc(14px * 1.4 * 2);
    }

    body .products__item__price__now { font-size: 15px; }
    body .products__item__price__old { font-size: 13px; }

    body .products__item__split { font-size: 12px; }
    body .products__item__split__icon { flex-basis: 14px; width: 14px; height: 14px; }

    body .products__item__color,
    body .products__item__color > span { width: 12px; height: 12px; }

    body .products__item__colors__text { font-size: 12px; }

    body .products__item__badges { top: 8px; left: 8px; }
}

/* =============================================================================
   СЕТКА И ВЫРАВНИВАНИЕ РЯДА

   Раньше ряд был флексом, а высота фото задавалась в пикселях: студийная
   вырезка выходила выше кадра со съёмкой, и подписи в ряду разъезжались
   по вертикали. Теперь ряд — grid с одинаковой высотой ячеек, фото всегда
   4:5, а низ карточки прижат к нижнему краю.

   Правила ниже начинаются с 601px: до этого действует catalog-mobile.css,
   он грузится раньше и задаёт мобильные две колонки.
   ============================================================================= */

@media (min-width: 601px) {
    body .catalog-section.products,
    body div.products {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
        align-items: stretch;          /* карточки ряда одной высоты */
        justify-content: initial;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* 3 колонки на узком десктопе */
    @media (max-width: 1199px) {
        body .catalog-section.products,
        body div.products { grid-template-columns: repeat(3, 1fr); }
    }

    /* 2 колонки на планшете */
    @media (max-width: 992px) {
        body .catalog-section.products,
        body div.products { grid-template-columns: repeat(2, 1fr); }
    }

    /* вставки между карточками занимают всю ширину ряда */
    body .products > .catalog-consult-snippet,
    body .products > .bx-catalog-section-empty { grid-column: 1 / -1; }
}

/* карточка — колонка на всю высоту ячейки */
body .products__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    /*
     * !important нужен: в css/style.css есть .body .products__item с
     * width: calc(25% - 10px). В прежнем флексе это давало колонку, а в
     * гриде считается уже от ячейки и сжимает карточку до 60px.
     */
    width: auto !important;
    max-width: none !important;
    margin-bottom: 0;
}

/*
 * Фото всегда 4:5 и кадрируется, каким бы ни было исходное:
 * съёмка в интерьере и студийная вырезка занимают одинаковый прямоугольник.
 */
body .products__item__image {
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    min-height: 0 !important;
    display: block !important;
    flex: 0 0 auto;
}

body .products__item__image img,
body .products__item__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* цена, Сплит и цвета уезжают к низу карточки */
body .products__item__price { margin-top: auto; }
body .products__item__colors { margin-bottom: 0; }

/* =============================================================================
   ЗАГЛУШКИ ПОДГРУЗКИ СЛЕДУЮЩЕЙ СТРАНИЦЫ

   Шаблон раздела рисует десять серых плиток `.ph-item` сразу, как только у
   раздела есть вторая страница. Подгружаются товары по скроллу, и до первого
   прокручивания заглушки просто висят внизу — а если весь раздел помещается
   в экран, висят навсегда, обещая товары, которых не будет.

   Показываем их только на время запроса: скрипт вешает на контейнер класс
   `disabled`, когда отправляет запрос, и снимает его по ответу. Ни строчки
   в чужом скрипте менять для этого не нужно.
   ============================================================================= */

body [data-use^="show-more-"] .ph-item {
    display: none;
}

body [data-use^="show-more-"].disabled .ph-item {
    display: block;
}

/* End */
/* /local/templates/500na700/css/about.css?179014287828284 */
/* /local/templates/500na700/css/blog.css?179183848625622 */
/* /local/templates/500na700/css/catalog-card.css?179071753310843 */