.mp { padding: 1vw 0 3vw; }

.mp__top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2vw; margin-bottom: 2.5vw; }

.mp__gallery { display: flex; flex-direction: column; gap: 0.6vw; }
.mp__gallery-main { display: block; aspect-ratio: 1 / 1; background: #F5F7FA; border: 1px solid rgba(28,28,28,0.08); border-radius: 1vw; overflow: hidden; cursor: zoom-in; }
.mp__gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.mp__gallery-main:hover img { transform: scale(1.02); }
.mp__gallery-empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; background: #F5F7FA; border: 1px dashed rgba(28,28,28,0.15); border-radius: 1vw; color: #9CA3AF; font-size: 1vw; }
.mp__gallery-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4vw; }
.mp__gallery-thumb { aspect-ratio: 1; border: 2px solid transparent; border-radius: 0.5vw; overflow: hidden; cursor: pointer; padding: 0; background: #F5F7FA; transition: border-color 0.2s; }
.mp__gallery-thumb:hover { border-color: rgba(28,28,28,0.2); }
.mp__gallery-thumb.is-active { border-color: var(--main-color); }
.mp__gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp__gallery-hidden { display: none; }

.mp__sidebar { display: flex; flex-direction: column; }
.mp__badges { display: flex; flex-wrap: wrap; gap: 0.4vw; margin-bottom: 0.8vw; }
.mp__badge { display: inline-block; padding: 0.3vw 0.7vw; background: #F5F7FA; border-radius: 0.4vw; font-size: 0.78vw; font-weight: 500; color: var(--text-main-color); }
.mp__badge--cms  { background: color-mix(in srgb, var(--main-color) 12%, transparent); color: var(--main-color); }
.mp__badge--free { background: #DCFCE7; color: #15803D; }
.mp__badge--paid { background: #FEF3C7; color: #92400E; }

.mp__title { font-size: 1.7vw !important; line-height: 1.2; font-weight: 700; margin: 0 0 0.5vw; color: var(--text-main-color); text-align: left; }
.mp__short { font-size: 1vw; line-height: 1.5; color: #6B7280; margin-bottom: 0.8vw; }

.mp__quick-meta { display: flex; flex-wrap: wrap; gap: 0.8vw; align-items: center; margin-bottom: 1.2vw; padding-bottom: 1vw; border-bottom: 1px solid rgba(28,28,28,0.08); font-size: 0.83vw; color: #6B7280; }
.mp__qm-item { white-space: nowrap; }
.mp__qm-link { color: var(--main-color); text-decoration: none; font-weight: 500; }
.mp__qm-link:hover { text-decoration: underline; }

.mp__purchase { background: #FFFFFF; border: 1px solid rgba(28,28,28,0.1); border-radius: 0.8vw; padding: 1.2vw 1.3vw; margin-bottom: 1vw; }
.mp__price-row { padding-bottom: 1vw; margin-bottom: 1vw; border-bottom: 1px solid rgba(28,28,28,0.08); }
.mp__price { font-size: 1.8vw; font-weight: 700; color: var(--main-color); line-height: 1.1; }
.mp__price-note { font-size: 0.83vw; color: #9CA3AF; margin-top: 0.3vw; }
.mp__price-rub  { font-size: 0.83vw; color: #9CA3AF; margin-top: 0.15vw; }

.mp__btn { display: flex; align-items: center; justify-content: center; gap: 0.5vw; width: 100%; padding: 0.9vw; border: none; border-radius: 0.5vw; font-family: inherit; font-size: 0.94vw; font-weight: 600; cursor: pointer; transition: background 0.2s; color: #fff; margin-bottom: 0.5vw; }
.mp__btn:last-of-type { margin-bottom: 0; }
.mp__btn span { font-size: inherit; font-weight: inherit; }
.mp__btn[disabled] { opacity: 0.6; cursor: wait; }
.mp__btn--telegram { background: #229ED9; }
.mp__btn--telegram:hover:not([disabled]) { background: #1A8BC2; }
.mp__btn--email    { background: var(--main-color); }
.mp__btn--email:hover:not([disabled]) { background: var(--main-color-darken); }
.mp__btn--paid     { background: var(--main-color); padding: 1.1vw; font-size: 1vw; }
.mp__btn--paid:hover:not([disabled]) { background: var(--main-color-darken); }

.mp__purchase-note { font-size: 0.78vw; color: #9CA3AF; line-height: 1.4; margin-top: 0.8vw; text-align: center; }

.mp__specs { display: flex; flex-direction: column; }
.mp__spec { display: flex; justify-content: space-between; align-items: center; padding: 0.7vw 0; font-size: 0.88vw; border-bottom: 1px solid rgba(28,28,28,0.06); }
.mp__spec:last-child { border-bottom: 0; }
.mp__spec > span:first-child { color: #6B7280; }
.mp__spec > span:last-child, .mp__spec > a { color: var(--text-main-color); font-weight: 500; text-align: right; }
.mp__spec > a { color: var(--main-color); text-decoration: none; }

/* ИЗМЕНЕНИЕ: Стили для нового юридического блока, расположенного под табами */
.mp__legal-info { background: #F8FAFC; border: 1px solid rgba(28,28,28,0.08); border-radius: 1vw; padding: 1.8vw 2.2vw; margin-top: 2vw; box-shadow: 0 4px 12px rgba(0,0,0,0.01); }
.mp__legal-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.5vw; }
.mp__legal-col h4 { font-size: 1.05vw; font-weight: 700; color: var(--text-main-color); margin: 0 0 1vw; padding-bottom: 0.5vw; border-bottom: 2px solid var(--main-color); text-transform: uppercase; letter-spacing: 0.03em; }
.mp__legal-col p { font-size: 0.88vw; line-height: 1.55; color: #4B5563; margin: 0 0 0.8vw; }
.mp__legal-col p strong { color: #111827; }
.mp__legal-col ul { list-style: none; padding: 0; margin: 0; }
.mp__legal-col ul li { font-size: 0.88vw; line-height: 1.6; color: #4B5563; margin-bottom: 0.6vw; }
.mp__legal-col ul li strong { color: #111827; display: inline-block; width: 75px; }
.mp__legal-col a { color: var(--main-color); text-decoration: none; font-weight: 500; }
.mp__legal-col a:hover { text-decoration: underline; }
.mp__legal-badge { display: inline-block; font-size: 0.7vw; background: #E2E8F0; color: #475569; padding: 1px 6px; border-radius: 4px; font-weight: 600; vertical-align: middle; margin-left: 4px; }

.mp__details { background: #FFFFFF; border: 1px solid rgba(28,28,28,0.06); border-radius: 1vw; overflow: hidden; }
.mp__tabs { display: flex; gap: 0; border-bottom: 1px solid rgba(28,28,28,0.08); padding: 0 0.8vw; overflow-x: auto; }
.mp__tabs::-webkit-scrollbar { display: none; }
.mp__tab { flex-shrink: 0; padding: 1vw 1.2vw; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 1vw; font-weight: 500; color: #6B7280; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.mp__tab:hover { color: var(--text-main-color); }
.mp__tab.is-active { color: var(--text-main-color); border-bottom-color: var(--main-color); }
.mp__panels { padding: 1.8vw 2vw; }
.mp__panel { display: none; animation: mp-fade 0.25s; }
.mp__panel.is-active { display: block; }
@keyframes mp-fade { from { opacity: 0; } to { opacity: 1; } }
.mp__panel-h3 { font-size: 1.25vw; font-weight: 600; margin: 0 0 0.8vw; color: var(--text-main-color); }
.mp__panel-h3:not(:first-child) { margin-top: 1.5vw; }

.mp__content, .mp__content p { font-size: 1.04vw; line-height: 1.6; color: var(--text-main-color); }
.mp__content p { margin: 0 0 0.8vw; }
.mp__content h2 { font-size: 1.5vw; font-weight: 700; margin: 1.5vw 0 0.8vw; }
.mp__content h3 { font-size: 1.25vw; font-weight: 600; margin: 1.2vw 0 0.6vw; }
.mp__content ul, .mp__content ol { padding-left: 1.5vw; margin: 0.5vw 0 1vw; }
.mp__content li { margin-bottom: 0.4vw; }
.mp__content a { color: var(--main-color); }

.mp__features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6vw; }
.mp__features li { position: relative; padding: 0.5vw 0 0.5vw 1.8vw; font-size: 1vw; line-height: 1.5; }
.mp__features li::before { content: "✓"; position: absolute; left: 0; top: 0.5vw; width: 1.3vw; height: 1.3vw; background: color-mix(in srgb, var(--main-color) 15%, transparent); color: var(--main-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.83vw; }

.mp__compat-text { font-size: 1vw; line-height: 1.6; color: var(--text-main-color); margin-bottom: 1vw; }
.mp__compat-pre { background: #F5F7FA; padding: 0.8vw 1vw; border-radius: 0.5vw; font-family: monospace; font-size: 0.88vw; margin: 0 0 1vw; white-space: pre-wrap; }

.mp__changelog { display: flex; flex-direction: column; gap: 0.8vw; }
.mp__changelog-item { background: #F9FAFB; border-radius: 0.6vw; padding: 1.1vw 1.3vw; border-left: 3px solid var(--main-color); }
.mp__changelog-head { display: flex; align-items: center; gap: 0.8vw; margin-bottom: 0.4vw; }
.mp__changelog-ver { font-weight: 700; color: var(--main-color); font-size: 1vw; }
.mp__changelog-date { font-size: 0.83vw; color: #6B7280; }
.mp__changelog-text { font-size: 0.95vw; line-height: 1.55; color: var(--text-main-color); }

.mp-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 4vw; }
.mp-popup[hidden] { display: none; }
.mp-popup__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(3px); }
.mp-popup__box { position: relative; background: #fff; border-radius: 1vw; padding: 2vw 2.2vw; max-width: 28vw; width: 100%; box-shadow: 0 2vw 4vw rgba(0,0,0,0.3); }
.mp-popup__close { position: absolute; top: 0.6vw; right: 0.8vw; width: 2vw; height: 2vw; border: none; background: none; font-size: 1.6vw; cursor: pointer; color: #9CA3AF; }
.mp-popup__close:hover { color: var(--text-main-color); }
.mp-popup__title { font-size: 1.3vw; font-weight: 700; margin-bottom: 1.2vw; color: var(--text-main-color); }
.mp-popup__field { margin-bottom: 1vw; }
.mp-popup__label { display: block; font-size: 0.88vw; color: var(--text-main-color); margin-bottom: 0.4vw; font-weight: 500; }
.mp-popup__required { color: #EF4444; }
.mp-popup__input { width: 100%; padding: 0.7vw 0.9vw; border: 1px solid rgba(28,28,28,0.15); border-radius: 0.5vw; font-family: inherit; font-size: 1vw; transition: border-color 0.2s; }
.mp-popup__input:focus { outline: none; border-color: var(--main-color); }
.mp-popup__hint { font-size: 0.78vw; color: #9CA3AF; margin-top: 0.3vw; }
.mp-popup__submit { width: 100%; padding: 0.9vw; height: auto; }
.mp-popup__submit[disabled] { opacity: 0.5; cursor: wait; }
.mp-popup__result { margin-top: 1vw; padding: 1vw; border-radius: 0.5vw; font-size: 0.95vw; line-height: 1.5; }
.mp-popup__result.is-success { background: #DCFCE7; color: #15803D; border: 1px solid #86EFAC; }
.mp-popup__result.is-error   { background: #FEE2E2; color: #B91C1C; border: 1px solid #FCA5A5; }
.mp-popup__result a { color: inherit; text-decoration: underline; word-break: break-all; font-weight: 600; }

/* bePaid модалка */
.bpm__backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9990; backdrop-filter: blur(3px); }
.bpm__dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9991; background: #fff; border-radius: 1.2vw; padding: 2.4vw 2.8vw 2vw; width: 100%; max-width: 460px; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.bpm__close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; font-size: 1.1rem; color: #6B7280; line-height: 1; padding: 4px 8px; border-radius: 6px; transition: background .15s; }
.bpm__close:hover { background: #F3F4F6; }
.bpm__title { font-size: 1.4rem; font-weight: 700; margin: 0 0 .5rem; }
.bpm__note  { font-size: .9rem; color: #6B7280; margin: 0 0 1.4rem; line-height: 1.5; }
.bpm__field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.2rem; }
.bpm__label { font-size: .85rem; font-weight: 600; color: #374151; }
.bpm__input { height: 2.8rem; padding: 0 .9rem; border: 1.5px solid rgba(28,28,28,0.18); border-radius: .7rem; font-size: .97rem; outline: none; transition: border-color .15s; width: 100%; box-sizing: border-box; }
.bpm__input:focus { border-color: var(--main-color, #6C63FF); }
.bpm__error { background: #FEE2E2; border: 1px solid #FCA5A5; color: #991B1B; border-radius: .6rem; padding: .6rem .9rem; font-size: .88rem; margin-bottom: 1rem; }
.bpm__submit { width: 100%; height: 3rem; font-size: 1rem; font-weight: 700; border-radius: .8rem; cursor: pointer; transition: opacity .15s; }
.bpm__submit:disabled { opacity: .6; cursor: wait; }
.bpm__secure { font-size: .78rem; color: #9CA3AF; text-align: center; margin: .9rem 0 0; line-height: 1.5; }

@media (max-width: 992px) {
    .mp__top { grid-template-columns: 1fr; gap: 4vw; margin-bottom: 5vw; }
    .mp__gallery-main { border-radius: 2vw; }
    .mp__gallery-thumb { border-radius: 1vw; }
    .mp__title { font-size: 3.5vw !important; }
    .mp__short { font-size: 2vw; }
    .mp__badge { font-size: 1.5vw; padding: 0.6vw 1.2vw; border-radius: 0.8vw; }
    .mp__quick-meta { font-size: 1.65vw; gap: 1.5vw; padding-bottom: 2vw; margin-bottom: 2.5vw; }
    .mp__purchase { padding: 3vw; border-radius: 2vw; }
    .mp__price { font-size: 4vw; }
    .mp__price-note { font-size: 1.5vw; }
    .mp__price-rub  { font-size: 1.5vw; }
    .mp__btn { padding: 2.2vw; font-size: 1.85vw; border-radius: 1.2vw; gap: 1.2vw; }
    .mp__btn svg { width: 4vw; height: 4vw; }
    .mp__purchase-note { font-size: 1.5vw; }
    .mp__spec { padding: 1.5vw 0; font-size: 1.7vw; }
    
    /* Стили для юр. блока на мобильных */
    .mp__legal-grid { grid-template-columns: 1fr; gap: 4vw; }
    .mp__legal-info { padding: 4vw; border-radius: 2vw; margin-top: 4vw; }
    .mp__legal-col h4 { font-size: 2.4vw; margin-bottom: 2vw; }
    .mp__legal-col p, .mp__legal-col ul li { font-size: 1.8vw; }
    .mp__legal-badge { font-size: 1.4vw; padding: 2px 8px; }
    
    .mp__details { border-radius: 2vw; }
    .mp__tab { padding: 2vw 2.2vw; font-size: 1.85vw; }
    .mp__panels { padding: 3vw; }
    .mp__panel-h3 { font-size: 2.4vw; }
    .mp__content { font-size: 1.95vw; }
    .mp__features { grid-template-columns: 1fr; gap: 1.5vw; }
    .mp__features li { font-size: 1.85vw; padding: 1vw 0 1vw 3.5vw; }
    .mp__features li::before { width: 2.5vw; height: 2.5vw; font-size: 1.5vw; top: 1vw; }
    .mp__compat-text { font-size: 1.85vw; }
    .mp__compat-pre { font-size: 1.7vw; padding: 1.5vw 2vw; }
    .mp__changelog-item { padding: 2.5vw 3vw; border-radius: 1.5vw; }
    .mp__changelog-ver { font-size: 1.85vw; }
    .mp__changelog-date { font-size: 1.5vw; }
    .mp__changelog-text { font-size: 1.75vw; }
    .mp-popup__box { max-width: 70vw; padding: 4vw; border-radius: 2vw; }
    .mp-popup__title { font-size: 2.6vw; }
    .mp-popup__label { font-size: 1.7vw; }
    .mp-popup__input { font-size: 1.95vw; padding: 1.5vw 1.8vw; border-radius: 1vw; }
    .mp-popup__close { width: 5vw; height: 5vw; font-size: 3.5vw; top: 1.5vw; right: 1.5vw; }
    .bpm__dialog { border-radius: 3vw; padding: 6vw; width: calc(100vw - 32px); }
}

@media (max-width: 600px) {
    .mp__top { gap: 6vw; margin-bottom: 8vw; }
    .mp__gallery-main { border-radius: 3vw; }
    .mp__gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 1.5vw; }
    .mp__gallery-thumb { border-radius: 2vw; }
    .mp__title { font-size: 6vw !important; }
    .mp__short { font-size: 3.8vw; }
    .mp__badge { font-size: 3vw; padding: 1.2vw 2.4vw; border-radius: 1.5vw; }
    .mp__quick-meta { font-size: 3.4vw; gap: 3vw; padding-bottom: 4vw; margin-bottom: 5vw; }
    .mp__purchase { padding: 5vw; border-radius: 3vw; }
    .mp__price { font-size: 7vw; }
    .mp__price-note { font-size: 3vw; }
    .mp__price-rub  { font-size: 3vw; }
    .mp__btn { padding: 4vw; font-size: 4vw; border-radius: 2.5vw; gap: 2vw; }
    .mp__btn svg { width: 6vw; height: 6vw; }
    .mp__purchase-note { font-size: 3vw; }
    
    /* Стили для юр. блока на мобильных экранах */
    .mp__legal-info { padding: 5vw; border-radius: 3vw; margin-top: 5vw; }
    .mp__legal-col h4 { font-size: 4.2vw; margin-bottom: 3vw; }
    .mp__legal-col p, .mp__legal-col ul li { font-size: 3.4vw; }
    .mp__legal-col ul li strong { width: 90px; }
    .mp__legal-badge { font-size: 2.8vw; padding: 2px 6px; }
    
    .mp__spec { padding: 3vw 0; font-size: 3.6vw; }
    .mp__details { border-radius: 3vw; }
    .mp__tab { padding: 4vw; font-size: 3.8vw; }
    .mp__panels { padding: 5vw; }
    .mp__panel-h3 { font-size: 4.6vw; }
    .mp__content { font-size: 4vw !important; line-height: 1.55 !important; }
    .mp__content * { font-size: inherit; line-height: inherit; }
    .mp__features li { font-size: 4vw; padding: 1.5vw 0 1.5vw 7vw; }
    .mp__features li::before { width: 5vw; height: 5vw; font-size: 3vw; top: 1.8vw; }
    .mp__compat-text { font-size: 3.8vw; }
    .mp__compat-pre { font-size: 3.4vw; padding: 3vw; }
    .mp__changelog-item { padding: 4vw; border-radius: 2.5vw; }
    .mp__changelog-ver { font-size: 3.8vw; }
    .mp__changelog-date { font-size: 3vw; }
    .mp__changelog-text { font-size: 3.4vw; }
    .mp-popup { padding: 4vw; }
    .mp-popup__box { max-width: 100%; padding: 6vw 5vw; border-radius: 4vw; }
    .mp-popup__title { font-size: 5vw; }
    .mp-popup__label { font-size: 3.4vw; }
    .mp-popup__input { font-size: 4vw; padding: 3vw 3.5vw; border-radius: 2vw; }
    .mp-popup__hint { font-size: 2.8vw; }
    .mp-popup__submit { padding: 3.5vw; }
    .mp-popup__close { width: 9vw; height: 9vw; font-size: 6vw; top: 2vw; right: 2vw; }
    .mp-popup__result { font-size: 3.6vw; padding: 3vw; }
    .bpm__dialog { border-radius: 5vw; padding: 8vw 6vw; }
}