/* Магнит Косметик — лавандовый / белый, как у сети М.Косметик */
body.mk-page {
    --primary: #8b2f9b;
    --blue: #8b2f9b;
    --blue-dark: #6b2178;
    --green: #9b4dca;
    --green-dark: #7a2d8e;
    --bg: #f6eefa;
    --card: #ffffff;
    --text: #2a1833;
    --text-muted: #6d5a78;
    --border: #ead7f3;
    --shadow: 0 4px 24px rgba(139, 47, 155, 0.08);
    --shadow-lg: 0 12px 40px rgba(139, 47, 155, 0.16);
}

body.mk-page .btn-red:hover {
    background: #6b2178;
}

body.mk-page .btn-header,
body.mk-page .nav-mobile .btn-buy-nav {
    background: linear-gradient(135deg, #8b2f9b 0%, #6b2178 100%);
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(139, 47, 155, 0.28);
}

body.mk-page .btn-header:hover {
    background: linear-gradient(135deg, #9b3eab 0%, #7a2d8e 100%);
    box-shadow: 0 10px 22px rgba(139, 47, 155, 0.34);
}

body.mk-page .header {
    color: #2a1833;
}

body.mk-page .logo,
body.mk-page .logo__title,
body.mk-page .nav-desktop a:not(.btn-header),
body.mk-page .nav-mobile a {
    color: #2a1833;
}

body.mk-page .logo__title span {
    color: #8b2f9b;
}

body.mk-page .logo__sub {
    color: #6d5a78;
}

body.mk-page .hero {
    background: linear-gradient(135deg, #9b4dca 0%, #6b2178 55%, #3d0e4f 100%);
    color: #fff;
}

body.mk-page .hero__title,
body.mk-page .hero__desc {
    color: #fff;
}

body.mk-page .hero__desc {
    opacity: 0.92;
}

body.mk-page .hero .btn-red {
    background: #fff;
    color: #6b2178;
}

body.mk-page .hero .btn-red:hover {
    background: #f3e6fa;
    color: #4a1458;
}

body.mk-page .hero .btn-outline {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.85);
}

body.mk-page .hero .btn-outline:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

body.mk-page .hero__badge {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

body.mk-page .section--gray,
body.mk-page .section--alt {
    background: #fbf6fd;
}

body.mk-page .price-card--featured {
    border-color: rgba(139, 47, 155, 0.35);
}

body.mk-page .price-card__badge {
    background: #8b2f9b;
}

body.mk-page .nav-desktop a.nav-mk {
    background: rgba(139, 47, 155, 0.08);
}

.nav-mk {
    color: #8b2f9b !important;
    font-weight: 700 !important;
}
.nav-desktop a.nav-mk:hover {
    background: rgba(139, 47, 155, 0.1) !important;
    color: #6b2178 !important;
}
.nav-desktop a.nav-mk::after {
    background: #8b2f9b !important;
}

.mk-promo {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: linear-gradient(135deg, #f6eefa 0%, #fff 55%, #f3e6fa 100%);
    border: 2px solid rgba(139, 47, 155, 0.22);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.mk-promo:hover {
    border-color: rgba(139, 47, 155, 0.5);
    box-shadow: 0 8px 28px rgba(139, 47, 155, 0.14);
    transform: translateY(-1px);
    text-decoration: none;
}
.mk-promo__mark {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #8b2f9b;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border-radius: 14px;
}
.mk-promo__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.mk-promo__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8b2f9b;
}
.mk-promo__title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
}
.mk-promo__desc {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.45;
}
.mk-promo__cta {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: #8b2f9b;
    white-space: nowrap;
}
@media (max-width: 640px) {
    .mk-promo {
        flex-wrap: wrap;
        padding: 18px 16px;
    }
    .mk-promo__cta {
        width: 100%;
        text-align: right;
    }
}

@media (max-width: 767px) {
    body.mk-page .logo__title {
        font-size: 15px;
        white-space: nowrap;
    }
    body.mk-page .logo__sub {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.mk-page .hero__title {
        font-size: 24px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }
}