/* ---------------------------------------------------------------------------
 * Главная: оффер, плашки доверия.
 *
 * Правила владельца: всё прямоугольное (border-radius: 0), акцент #176B6B только
 * на действии, фон магазина тёплый. Цифры и плитки разделов печатает myshop-core —
 * здесь только геометрия блока.
 *
 * Подключается ТОЛЬКО на главной (inc/enqueue.php), карточку и разделы не задевает.
 * ------------------------------------------------------------------------- */

/* Свой H1 в hero: штатный заголовок страницы на главной не печатаем. */
body.home .hero-section {
    display: none;
}

.msh-hero {
    padding: 40px 0 32px;
    margin-bottom: 8px;
}

/* Две колонки: оффер слева, плашки доверия справа. Одноколоночный hero оставлял
   правую половину экрана пустой — читалось как «баннер не загрузился». */
.msh-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
    align-items: stretch;
}

.msh-hero__kicker {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msb-muted, #666862);
}

.msh-hero__title {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--msb-text, #25282A);
}

.msh-hero__lead {
    margin: 18px 0 0;
    max-width: 62ch;
    font-size: 17px;
    line-height: 1.55;
    color: var(--msb-muted, #666862);
}

.msh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.msh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 26px;
    border: 1px solid var(--msb-accent, #176B6B);
    border-radius: 0;
    background: var(--msb-accent, #176B6B);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.12s linear, border-color 0.12s linear;
}

.msh-btn:hover,
.msh-btn:focus-visible {
    background: var(--msb-accent-hover, #105454);
    border-color: var(--msb-accent-hover, #105454);
    color: #FFFFFF;
}

.msh-btn:focus-visible {
    outline: 2px solid var(--msb-focus, #D39A43);
    outline-offset: 2px;
}

.msh-btn--ghost {
    background: transparent;
    color: var(--msb-accent, #176B6B);
}

.msh-btn--ghost:hover,
.msh-btn--ghost:focus-visible {
    background: #EDF3F2;
    color: var(--msb-accent-hover, #105454);
}

.msh-link {
    align-self: center;
    font-size: 14px;
    color: var(--msb-muted, #666862);
    text-decoration: none;
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
}

.msh-link:hover,
.msh-link:focus-visible {
    color: var(--msb-accent, #176B6B);
    border-bottom-color: var(--msb-accent, #176B6B);
}

.msh-facts {
    display: block;
    margin: 0;
    padding: 0 0 0 32px;
    border-left: 1px solid var(--msb-line, #DEDBD4);
    list-style: none;
}

.msh-facts__item {
    padding: 0 0 18px;
}

.msh-facts__item:last-child {
    padding-bottom: 0;
}

.msh-facts__item strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-facts__item span {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--msb-muted, #666862);
}

@media (max-width: 1024px) {
    .msh-hero {
        padding: 32px 0 28px;
    }

    .msh-hero__grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .msh-hero__title {
        max-width: 26ch;
    }

    .msh-facts {
        border-left: 0;
        border-top: 1px solid var(--msb-line, #DEDBD4);
        padding: 20px 0 0;
    }
}

@media (max-width: 480px) {
    .msh-hero {
        padding: 24px 0 20px;
    }

    .msh-hero__title {
        font-size: 26px;
    }

    .msh-hero__lead {
        font-size: 15px;
        margin-top: 14px;
    }

    .msh-hero__actions {
        margin-top: 20px;
    }

    .msh-facts {
        padding-top: 16px;
    }

    .msh-btn {
        min-height: 48px;
        padding: 0 18px;
        width: 100%;
    }
}


/* ---------------------------------------------------------------------------
 * Блоки главной по плану docs/UX-HOME-PLAN.md (2026-11-05).
 * Полоса доверия, шаги, выставочный зал, финальный призыв.
 * Плейсхолдеры фото (.msh-media__label) — временные: пока нет кадров зала.
 * ------------------------------------------------------------------------- */

.msh-hero__media,
.msh-hall__media {
    position: relative;
    min-height: 300px;
    background: #EEEDE7;
    border: 1px dashed #D3CFC6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msh-media__label {
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--msb-muted, #666862);
    text-align: center;
    padding: 0 16px;
}

.msh-hero__note {
    margin: 16px 0 0;
    font-size: 14px;
    color: var(--msb-muted, #666862);
}

.msh-hero__note a {
    color: var(--msb-text, #25282A);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
}

.msh-hero__note a:hover {
    border-bottom-color: var(--msb-accent, #176B6B);
    color: var(--msb-accent, #176B6B);
}

.msh-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 40px;
    padding: 22px 0 24px;
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
    list-style: none;
}

.msh-trust__item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
}

.msh-trust__icon {
    grid-row: span 2;
    margin-top: 2px;
    fill: none;
    stroke: var(--msb-accent, #176B6B);
    stroke-width: 1.4;
    stroke-linecap: square;
    stroke-linejoin: miter;
}

.msh-trust__item strong {
    font-size: 15px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-trust__item span {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--msb-muted, #666862);
}

.msh-section-title {
    margin: 0 0 20px;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--msb-text, #25282A);
}

.msh-steps {
    margin: 56px 0 0;
    padding-top: 40px;
    border-top: 1px solid var(--msb-line, #DEDBD4);
}

.msh-steps__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.msh-steps__item {
    padding-top: 16px;
    border-top: 2px solid var(--msb-accent, #176B6B);
}

.msh-steps__num {
    display: block;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: var(--msb-accent, #176B6B);
}

.msh-steps__item strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-steps__item p {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--msb-muted, #666862);
}

.msh-hall {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 48px;
    align-items: start;
    margin: 56px 0 0;
    padding-top: 40px;
    border-top: 1px solid var(--msb-line, #DEDBD4);
}

.msh-hall__lead {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--msb-muted, #666862);
    max-width: 58ch;
}

.msh-hall__facts {
    margin: 0 0 24px;
    display: grid;
    gap: 12px;
}

.msh-hall__facts div {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
}

.msh-hall__facts dt {
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msb-muted, #666862);
}

.msh-hall__facts dd {
    margin: 0;
    font-size: 15px;
    color: var(--msb-text, #25282A);
}

.msh-cta {
    margin: 56px 0 8px;
    padding: 40px;
    background: #FBFAF7;
    border: 1px solid var(--msb-line, #DEDBD4);
}

.msh-cta p {
    margin: 0 0 24px;
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--msb-muted, #666862);
}

.msh-cta__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.msh-cta__phone {
    font-size: 18px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
    text-decoration: none;
}

.msh-cta__phone:hover {
    color: var(--msb-accent, #176B6B);
}

.msh-cta__link {
    font-size: 14px;
    color: var(--msb-muted, #666862);
    text-decoration: none;
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
}

.msh-cta__link:hover {
    color: var(--msb-accent, #176B6B);
    border-bottom-color: var(--msb-accent, #176B6B);
}

@media (max-width: 1024px) {
    .msh-trust,
    .msh-steps__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .msh-hall {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .msh-hall__media {
        min-height: 260px;
    }
}

@media (max-width: 560px) {
    .msh-trust,
    .msh-steps__list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .msh-hero__media {
        min-height: 200px;
    }

    .msh-hall__facts div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .msh-cta {
        padding: 24px;
    }

    .msh-cta__actions {
        gap: 16px;
    }
}


/* ---------------------------------------------------------------------------
 * Макет замерного листа в hero и блоки «смета онлайн», «нестандартный проём», B2B.
 * Макет — статичная картинка расчёта (aria-hidden), не форма.
 * ------------------------------------------------------------------------- */

.msh-hero__calc {
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid var(--msb-line, #DEDBD4);
    box-shadow: 0 3px 0 #E7E3DA;
    align-self: stretch;
}

.msh-calc__head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
}

.msh-calc__badge {
    padding: 3px 8px;
    background: #EDF3F2;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--msb-accent, #176B6B);
}

.msh-calc__model {
    font-size: 13px;
    color: var(--msb-text, #25282A);
}

.msh-calc__fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 16px 0;
}

.msh-calc__field {
    padding: 10px 12px;
    background: #F5F3EE;
}

.msh-calc__field span {
    display: block;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--msb-muted, #666862);
}

.msh-calc__field b {
    font-size: 18px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-calc__field i {
    font-style: normal;
    font-size: 12px;
    color: var(--msb-muted, #666862);
    margin-left: 2px;
}

.msh-calc__sum {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-top: 1px solid var(--msb-line, #DEDBD4);
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
    font-size: 14px;
    color: var(--msb-muted, #666862);
}

.msh-calc__sum b {
    font-size: 24px;
    color: var(--msb-text, #25282A);
}

.msh-calc__list {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.msh-calc__list li {
    position: relative;
    padding-left: 16px;
    font-size: 13px;
    color: var(--msb-muted, #666862);
}

.msh-calc__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 7px;
    width: 6px;
    height: 6px;
    background: var(--msb-accent, #176B6B);
}

.msh-calc__note {
    margin: 16px 0 0;
    font-size: 12px;
    color: #8A8B84;
}

/* Блок «смета онлайн» */
.msh-online {
    margin: 8px 0 56px;
}

.msh-online__head {
    max-width: 70ch;
    margin-bottom: 26px;
}

.msh-online__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--msb-muted, #666862);
}

.msh-online__steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: onl;
}

.msh-online__steps li {
    position: relative;
    padding-top: 16px;
    border-top: 2px solid var(--msb-line, #DEDBD4);
}

.msh-online__steps li::before {
    counter-increment: onl;
    content: counter(onl);
    display: block;
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    color: var(--msb-accent, #176B6B);
}

.msh-online__steps strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-online__steps span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--msb-muted, #666862);
}

.msh-online__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.msh-online__hint {
    font-size: 14px;
    color: var(--msb-muted, #666862);
}

/* Блок «нестандартный проём» */
.msh-fit {
    margin: 0 0 56px;
    padding-top: 40px;
    border-top: 1px solid var(--msb-line, #DEDBD4);
}

.msh-fit__lead {
    margin: 0 0 26px;
    max-width: 70ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--msb-muted, #666862);
}

.msh-fit__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.msh-fit__list li {
    padding: 18px 18px 20px;
    background: #FBFAF7;
    border: 1px solid var(--msb-line, #DEDBD4);
}

.msh-fit__list strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-fit__list span {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--msb-muted, #666862);
}

/* B2B */
.msh-b2b {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 48px;
    align-items: stretch;
    margin: 56px 0 0;
    padding: 32px;
    background: #EEEDE7;
}

.msh-b2b__kicker {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--msb-muted, #666862);
}

.msh-b2b__text p {
    margin: 0 0 18px;
    max-width: 60ch;
    font-size: 16px;
    line-height: 1.55;
    color: var(--msb-muted, #666862);
}

.msh-b2b__list {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.msh-b2b__list li {
    position: relative;
    padding-left: 18px;
    font-size: 15px;
    color: var(--msb-text, #25282A);
}

.msh-b2b__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 7px;
    height: 7px;
    background: var(--msb-accent, #176B6B);
}

.msh-b2b__media {
    position: relative;
    min-height: 240px;
    background: #FBFAF7;
    border: 1px dashed #D3CFC6;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1024px) {
    .msh-online__steps,
    .msh-fit__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .msh-b2b {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 24px;
    }
}

@media (max-width: 560px) {
    .msh-online__steps,
    .msh-fit__list {
        grid-template-columns: 1fr;
    }

    .msh-calc__fields {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .msh-hero__calc {
        padding: 16px;
    }
}


/* Хелпер «Не знаете, что выбрать?» печатает myshop-core вместе с плитками; на главной
   он дублирует сами разделы (одинаковые входы), поэтому скрываем только здесь.
   На посадочной каталога он остаётся. */
body.home .ms-helper {
    display: none;
}


.msh-fit__icon {
    display: block;
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
    fill: none;
    stroke: var(--msb-accent, #176B6B);
    stroke-width: 1.4;
    stroke-linejoin: miter;
}

.msh-online__hint {
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--msb-muted, #666862);
}


/* Замерный лист — акцентный блок, но не ось страницы: две колонки,
   слева шаги и кнопка, справа макет расчёта (перенесён из hero). */
.msh-online {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px;
    align-items: start;
    margin: 40px 0 56px;
    padding: 32px;
    background: #FBFAF7;
    border: 1px solid var(--msb-line, #DEDBD4);
}

.msh-online__steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    counter-reset: onl;
}

.msh-online__steps li {
    position: relative;
    padding: 14px 0 14px 44px;
    border-top: 1px solid var(--msb-line, #DEDBD4);
}

.msh-online__steps li:last-child {
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
}

.msh-online__steps li::before {
    counter-increment: onl;
    content: counter(onl);
    position: absolute;
    left: 0;
    top: 14px;
    width: 28px;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--msb-accent, #176B6B);
}

.msh-online__steps strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-online__steps span {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--msb-muted, #666862);
}

/* hero: фото вместо плейсхолдера */
.msh-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .msh-online {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px;
    }

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

@media (max-width: 560px) {
    .msh-fit__list {
        grid-template-columns: 1fr;
    }
}


/* Витрина моделей на главной */
.msh-models {
    margin: 40px 0 8px;
}

.msh-models__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.msh-models__head .msh-section-title {
    margin: 0;
}

.msh-models__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.msh-model__media {
    display: block;
    aspect-ratio: 4 / 5;
    background: #EFEDE7;
    overflow: hidden;
}

.msh-model__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.msh-model__media:hover img {
    transform: scale(1.03);
}

.msh-model__title {
    display: block;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--msb-text, #25282A);
    text-decoration: none;
}

.msh-model__title:hover {
    color: var(--msb-accent, #176B6B);
}

.msh-model__price {
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-model__price small {
    margin-left: 4px;
    font-size: 12px;
    font-weight: 400;
    color: var(--msb-muted, #666862);
}

.msh-online__note {
    margin: 0 0 22px;
    padding: 12px 14px;
    background: #FFFFFF;
    border: 1px solid var(--msb-line, #DEDBD4);
    font-size: 14px;
    line-height: 1.5;
    color: var(--msb-muted, #666862);
}

@media (max-width: 1024px) {
    .msh-models__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
}


.msh-model__stock {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--msb-muted, #666862);
}

.msh-model__stock.is-in {
    color: var(--msb-accent, #176B6B);
}


/* Макет расчёта в блоке «Стоимость комплекта»: белая карточка-чек на тёплом фоне */
.msh-calc {
    padding: 24px;
    background: #FFFFFF;
    border: 1px solid var(--msb-line, #DEDBD4);
    align-self: start;
}

@media (max-width: 560px) {
    .msh-online__lead {
        display: none;
    }

    .msh-calc {
        padding: 16px;
    }
}


/* ---------------------------------------------------------------------------
 * Типографика и ритм по research (NN/g: иерархия, F-паттерн; web.dev: LCP).
 * Тема задаёт заголовкам свой шрифт и цвет — возвращаем Onest и один цвет текста.
 * ------------------------------------------------------------------------- */

body.home .msh-hero__title,
body.home .msh-section-title,
body.home .msh-calc__sum b,
body.home .msh-model__title {
    font-family: Onest, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body.home .msh-hero__title {
    font-size: clamp(30px, 3.3vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    font-weight: 600;
}

body.home .msh-section-title {
    font-size: clamp(22px, 2vw, 28px);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--msb-text, #25282A);
}

/* Три уровня контраста, как в research: основной, вторичный, третичный. */

body.home .msh-hero__lead,
body.home .msh-online__lead,
body.home .msh-hall__lead,
body.home .msh-b2b__text p,
body.home .msh-cta p,
body.home .msh-faq__item dd {
    color: var(--msb-muted, #666862);
}

/* Ритм 8px: вертикальные отступы секций кратны 8. */

body.home .msh-trust { margin-bottom: 32px; }
body.home .msh-models { margin-top: 32px; }
body.home .msh-online { margin: 48px 0 64px; }
body.home .msh-b2b { margin-top: 64px; }
body.home .msh-hall { margin-top: 64px; }
body.home .msh-faq { margin-top: 64px; }
body.home .msh-cta { margin-top: 64px; }

/* Тап-таргеты: минимум 44px по высоте (WCAG 2.5.5) */

body.home .msh-models__head .msh-link,
body.home .msh-cta__phone,
body.home .msh-cta__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/* FAQ */

.msh-faq {
    padding-top: 40px;
    border-top: 1px solid var(--msb-line, #DEDBD4);
}

.msh-faq__list {
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 0;
}

.msh-faq__item {
    padding: 18px 0;
    border-bottom: 1px solid var(--msb-line, #DEDBD4);
}

.msh-faq__item dt {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--msb-text, #25282A);
}

.msh-faq__item dd {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
}

/* Липкая панель действий на мобильных */

.msh-mobilebar {
    display: none;
}

@media (max-width: 768px) {
    .msh-mobilebar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px;
        background: #FFFFFF;
        border-top: 1px solid var(--msb-line, #DEDBD4);
    }

    .msh-mobilebar .msh-btn {
        justify-content: center;
        min-height: 48px;
    }

    body.home {
        padding-bottom: 64px;
    }

    .msh-faq__list {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .msh-faq__item {
        padding: 16px 0;
    }
}


/* Зазор между двумя тёплыми контейнерами (расчёт и B2B) — не слипаются */
body.home .msh-online { margin-bottom: 80px; }
body.home .msh-b2b { margin-top: 80px; }

/* Ссылки-действия заметнее: цвет основного текста и подчёркивание */
body.home .msh-models__head .msh-link,
body.home .msh-cta__link {
    color: var(--msb-text, #25282A);
    border-bottom-color: #B9B5AC;
}

body.home .msh-models__head .msh-link:hover,
body.home .msh-cta__link:hover {
    color: var(--msb-accent, #176B6B);
    border-bottom-color: var(--msb-accent, #176B6B);
}


/* Панель появляется только после того, как hero ушёл из кадра */
@media (max-width: 768px) {
    .msh-mobilebar {
        transform: translateY(100%);
        transition: transform .2s ease;
    }

    .msh-mobilebar.is-visible {
        transform: translateY(0);
    }

    .msh-mobilebar .msh-btn {
        white-space: nowrap;
        font-size: 15px;
    }

    body.home {
        padding-bottom: 0;
    }

    body.home:has(.msh-mobilebar.is-visible) {
        padding-bottom: 72px;
    }
}

@media (max-width: 560px) {
    .msh-hero__lead-counts {
        display: none;
    }
}


@media (max-width: 768px) {
    /* Надзаголовок дублирует топбар («Новороссийск, Мира 1») — на мобильном убираем,
       отступ сверху режем, чтобы фото и кнопки были выше. */
    body.home .msh-hero__kicker {
        display: none;
    }

    body.home .msh-hero {
        padding-top: 20px;
    }
}


/* Три причины, почему итог не растёт: карточки с номерами, без иконок */
.msh-nofees {
    margin: 0 0 80px;
}

.msh-nofees__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.msh-nofees__list li {
    padding: 20px;
    background: #FBFAF7;
    border: 1px solid var(--msb-line, #DEDBD4);
}

.msh-nofees__n {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--msb-accent, #176B6B);
}

.msh-nofees__list strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-nofees__list li > span:last-child {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--msb-muted, #666862);
}

@media (max-width: 1024px) {
    .msh-nofees__list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


.msh-models__lead {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--msb-muted, #666862);
}


/* Hero-коллаж: два вертикальных кадра вместо одного — не дублирует плитки разделов */
.msh-hero__media--duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 8px;
    min-height: 100%;
    border: 0;
    background: none;
}

.msh-hero__media--duo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 560px) {
    .msh-hero__media--duo {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
}


/* Отзывы: рейтинг Яндекса + три реальные цитаты */
.msh-reviews {
    margin: 64px 0 0;
    padding-top: 40px;
    border-top: 1px solid var(--msb-line, #DEDBD4);
}

.msh-reviews__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.msh-reviews__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    margin: 8px 0 0;
}

.msh-reviews__summary b {
    font-size: 32px;
    line-height: 1;
    font-weight: 600;
    color: var(--msb-text, #25282A);
}

.msh-reviews__summary span {
    font-size: 14px;
    color: var(--msb-muted, #666862);
}

.msh-reviews__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.msh-review {
    padding: 20px;
    background: #FBFAF7;
    border: 1px solid var(--msb-line, #DEDBD4);
}

.msh-review p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--msb-text, #25282A);
}

.msh-review span {
    font-size: 13px;
    color: var(--msb-muted, #666862);
}

@media (max-width: 1024px) {
    .msh-reviews__list {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


.msh-reviews__stars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

.msh-reviews__stars svg {
    fill: var(--msb-text, #25282A);
}

/* автор прижат к низу карточки — подписи на одной линии */
.msh-review {
    display: flex;
    flex-direction: column;
}

.msh-review p {
    flex: 1 1 auto;
}


.msh-reviews__head {
    align-items: center;
}

.msh-reviews__summary {
    align-items: center;
}


/* Витрина главной: фото в полный рост, как в каталоге (aspect-ratio 4/9 + contain,
   фон белый). Раньше стояло 4/5 + cover — дверь обрезалась сверху и снизу. */
.msh-model__media {
    aspect-ratio: 4 / 9;
    background: #FFFFFF;
}

.msh-model__media img {
    object-fit: contain;
}


/* Полотно целиком, но карточка не превращается в колонну: 1/2 вместо 4/9,
   поля по краям, чтобы дверь не липла к рамке. */
.msh-model__media {
    aspect-ratio: 1 / 2;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msh-model__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* Фон витрины тёплый, не белый: у части моделей фото — белое полотно с белыми
   наличниками на белом фоне, на #FFF такая дверь исчезает. */
.msh-model__media {
    background: #F2F0EA;
    border: 1px solid #E6E2D9;
}