/* Шрифты */

@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('f/rubik-v28-cyrillic_latin-regular.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: italic;
    font-weight: 400;
    src: url('f/rubik-v28-cyrillic_latin-italic.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    src: url('f/rubik-v28-cyrillic_latin-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    src: url('f/rubik-v28-cyrillic_latin-600.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    src: url('f/rubik-v28-cyrillic_latin-700.woff2') format('woff2');
}


/* Сброс и базовые элементы */

html {
    box-sizing: border-box;
}

*,
:after,
:before {
    box-sizing: inherit;
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas,
caption, center, cite, code, dd, del, details, dfn, div, dl, dt, embed, fieldset, figcaption,
figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, iframe, img, ins, kbd,
label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section,
small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr,
tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

:focus {
    outline: 0;
}

body {
    margin: 0;
    position: relative;
    overflow-x: hidden;
    display: block !important;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section,
summary, time {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

a {
    background-color: transparent;
}

a:active,
a:hover {
    outline: 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
strong {
    font-weight: 500;
}

dfn {
    font-style: italic;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

img {
    border: 0;
    vertical-align: bottom;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    box-sizing: content-box;
    height: 0;
}

pre {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
    text-transform: inherit;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto;
}

input[type=search] {
    -webkit-appearance: textfield;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none;
}

input:required {
    box-shadow: none !important;
    border: none !important;
}

input:invalid {
    box-shadow: none !important;
    border: none !important;
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
}

optgroup {
    font-weight: 700;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 8px;
}

html {
    font-style: normal;
    font-weight: 400;
    overflow-x: hidden;
}

html * {
    box-sizing: border-box;
}

body {
    font-family: 'Rubik';
    color: #161629;
}


/* Контейнер страницы */

.width {
    display: table;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: calc(100% - 100px);
    max-width: 1320px;
}

#popup2-right-logged {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ============================================================
   PEPTIDE BOOST — ПАЛИТРА, ШАПКА, ФУТЕР
   Заменяет секции "Шапка", "Основная навигация", "Переключатель
   проектов", "Мобильное меню", "Мобильный поиск", "Подвал".
   ============================================================ */


/* ---------- 1. Палитра ---------- */

:root {
    /* Основная шкала — глубокий хвойный зелёный */
    --pb-50:  #f3f9f5;
    --pb-100: #e3f0e8;
    --pb-200: #c6e0d1;
    --pb-300: #96c7ac;
    --pb-400: #5aab86;
	--pb-400-rgb: 90, 171, 134;
    --pb-500: #2f8d63;   /* основной акцент */
    --pb-600: #237150;
    --pb-700: #1b5a40;
    --pb-800: #164634;
    --pb-900: #0f2e23;   /* шапка и футер */

    /* Триплеты для rgba() — чтобы тени шли за палитрой */
    --pb-300-rgb: 150, 199, 172;
    --pb-500-rgb: 47, 141, 99;
    --pb-600-rgb: 35, 113, 80;
    --pb-900-rgb: 15, 46, 35;

    /* Текст */
    --pb-ink:      #16241d;
    --pb-ink-soft: #46604f;
    --pb-ink-mute: #7a9185;
	--pb-muted:    #6a8574;   /* неактивный сегмент переключателя */
    --pb-muted-2:  #7a8a80;   /* дата */
    --pb-surface:  #ffffff;   /* фон карточек и активного сегмента */
    --pb-surface-rgb: 255, 255, 255;

    /* Поверхности */
    --pb-line: #e2ece6;

    /* Высота шапки — используется в sticky-смещениях */
    --pb-header-h: 64px;
}


/* ---------- 2. Шапка: одна строка ---------- */

#header-top {
    display: flex;
    align-items: center;
    gap: 20px;
    height: var(--pb-header-h);
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 200;
    background: var(--pb-900);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#header-top::after {
    display: none;
}

#header-top-burger {
    display: none;
    width: 26px;
    height: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cline x1='3' y1='12' x2='21' y2='12'/%3E%3Cline x1='3' y1='18' x2='21' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}
/* ============================================================
   ЛОГОТИП В ШАПКЕ
   Значок — маска (красится переменной), слово — настоящий текст.
   Прежний логотип был одной картинкой, где буквы нарисованы
   кривыми: поменять в нём слово нельзя, только перерисовать.
   ============================================================ */

#header-top-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* гасим прежнюю картинку со словом PEPTIDEBOOST */
    background-image: none;
    width: auto;
    text-decoration: none;
    white-space: nowrap;
}

/* Значок */
#header-top-logo::before {
    content: "";
    flex: 0 0 42px;
    width: 42px;
    height: 40px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 44'><g fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'><path d='M13.6 14.2 27.4 22l-13.8 7.8'/><path d='M27.4 22h10.4'/><path d='M13.6 14.2v15.6'/></g><circle cx='11.6' cy='13.1' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/><circle cx='11.6' cy='30.9' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/><circle cx='28.2' cy='22' r='5' fill='%23000'/><circle cx='40.4' cy='22' r='2.7' fill='%23000'/></svg>") left center / contain no-repeat;
            mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 44'><g fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'><path d='M13.6 14.2 27.4 22l-13.8 7.8'/><path d='M27.4 22h10.4'/><path d='M13.6 14.2v15.6'/></g><circle cx='11.6' cy='13.1' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/><circle cx='11.6' cy='30.9' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/><circle cx='28.2' cy='22' r='5' fill='%23000'/><circle cx='40.4' cy='22' r='2.7' fill='%23000'/></svg>") left center / contain no-repeat;
}

/* Слово */
#header-top-logo .logo-text {
    color: #fff;
    font-family: inherit;
    font-size: 21px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.01em;
    line-height: 1;
}
#header-top-logo .logo-text b {
    font-weight: 800;
}
/* «Club» — тоньше и чуть прозрачнее, чтобы имя читалось как единое целое */
#header-top-logo .logo-text i {
    font-style: italic;
    font-weight: 600;
    opacity: .72;
    margin-left: 2px;
}

@media screen and (max-width: 767px) {
    #header-top-logo { gap: 8px; }
    #header-top-logo::before { flex-basis: 34px; width: 34px; height: 32px; }
    #header-top-logo .logo-text { font-size: 18px; }
}

/* ---------- 3. Навигация внутри шапки ---------- */

#header-bot-left {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-right: auto;
}

.header-bot-left-item {
    position: relative;
}

.header-bot-left-item a {
    display: block;
    padding: 9px 14px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    border-radius: 9px;
    white-space: nowrap;
    transition: color 0.18s ease, background 0.18s ease;
    cursor: pointer;
}

.header-bot-left-item a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.09);
}

.header-bot-left-item:not(.header-bot-left-item-right) a::after {
    display: none;
}

.header-bot-left-item.active a {
    color: #fff;
    background: rgba(255, 255, 255, 0.13);
}

/* Калькулятор — спокойный контурный чип, а не главный акцент страницы */
.header-bot-left-item-right {
    margin-left: 6px;
}

.header-bot-left-item-right a {
    padding: 8px 16px;
    margin: 0;
    color: var(--pb-300);
    font-weight: 600;
    background: transparent;
    border: 1px solid rgba(var(--pb-300-rgb), 0.35);
    border-radius: 9px;
    box-shadow: none;
    overflow: visible;
}

.header-bot-left-item-right a:hover {
    color: #fff;
    background: rgba(var(--pb-500-rgb), 0.35);
    border-color: var(--pb-400);
    transform: none;
    box-shadow: none;
}

.header-bot-left-item-right a::before,
.header-bot-left-item-right a::after {
    display: none;
}


/* ---------- 4. Поиск ---------- */

#header-top-search {
    flex: 0 1 260px;
    margin: 0;
    position: relative;
    transition: flex-basis 0.25s ease;
}

#header-top-search:focus-within {
    flex-basis: 380px;
}

#header-top-search input {
    width: 100%;
    height: 38px;
    padding: 0 40px 0 16px;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    outline: none;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease;
    text-overflow: ellipsis;
}

#header-top-search input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

#header-top-search input:focus {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(var(--pb-300-rgb), 0.5);
    box-shadow: none;
}

#header-top-search button {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    background: transparent;
    transition: color 0.2s ease, background 0.2s ease;
}

#header-top-search button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}


/* ---------- 5. Правый блок ---------- */

#header-top-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

#header-top-right-search {
    display: none;
    border: none;
    background: transparent;
}

#header-top-right-login {
    width: 36px;
    height: 36px;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.08);
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    background-size: 19px;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-color 0.2s ease;
}

#header-top-right-login:hover {
    background-color: rgba(255, 255, 255, 0.18);
    transform: none;
}

#header-top-right-projects {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 13px;
    backdrop-filter: blur(6px);
}

#header-top-right-projects .proj-active,
#header-top-right-projects a {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 9px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

#header-top-right-projects .proj-active {
    background: #fff;
    color: var(--pb-500);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    cursor: default;
}

#header-top-right-projects a {
    color: var(--pb-50);
}

#header-top-right-projects a:hover {
    background: rgba(255, 255, 255, 0.20);
    color: #fff;
}


/* ---------- 6. Адаптив шапки ---------- */

@media (max-width: 1180px) {
    #header-top {
        gap: 14px;
        padding: 0 20px;
    }

    .header-bot-left-item a {
        padding: 9px 11px;
        font-size: 14px;
    }

    #header-top-search {
        flex-basis: 200px;
    }
}

@media (max-width: 980px) {
    #header-top-burger {
        display: block;
        order: -1;
    }

    #header-bot-left {
        display: none;
    }

    #header-top-search {
        display: none;
    }

    #header-top-right-projects {
        display: none;
    }

    #header-top-logo {
        margin-right: auto;
        width: 150px;
    }

    #header-top-right-search {
        display: block;
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
        background-size: 18px;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
    }
}

@media (max-width: 560px) {
    #header-top {
        padding: 0 14px;
        gap: 10px;
    }

    #header-top-logo {
        width: 132px;
        height: 30px;
    }
}


/* ---------- 7. Плашка уведомления ---------- */

#header-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 20px;
    background: var(--pb-100);
    border-bottom: 1px solid var(--pb-200);
    color: var(--pb-700);
    font-size: 14.5px;
    line-height: 1.4;
    text-align: center;
}

#header-notification::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237150' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6l-4.5 8a2 2 0 0 0 1.8 3h9.4a2 2 0 0 0 1.8-3L14 9V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E");
}

#header-notification b,
#header-notification a {
    color: var(--pb-600);
    font-weight: 700;
}

#header-notification a {
    text-decoration: underline;
    text-underline-offset: 2px;
}

#header-notification a:hover {
    color: var(--pb-700);
}

@media (max-width: 600px) {
    #header-notification {
        font-size: 13px;
        padding: 10px 14px;
        align-items: flex-start;
    }
}


/* ---------- 8. Мобильное меню ---------- */

#header-mob-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 84%;
    max-width: 330px;
    height: 100vh;
    height: 100dvh;
    background: var(--pb-900);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.35);
    padding: 78px 0 30px;
    overflow-y: auto;
    z-index: 9000;
    animation: mob-menu-slide 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

#header-mob-menu::before {
    display: none;
}

.header-mob-menu-item a {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 26px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.18s ease, color 0.18s ease, padding-left 0.18s ease;
}

.header-mob-menu-item a:hover,
.header-mob-menu-item a:active {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    padding-left: 32px;
}

.header-mob-menu-item-a-active {
    background: rgba(var(--pb-500-rgb), 0.25) !important;
    color: #fff !important;
    border-left-color: var(--pb-400) !important;
    box-shadow: none;
}

.header-mob-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 4px 6px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    background-color: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.header-mob-menu-icon:hover,
.header-mob-menu-icon:active {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(var(--pb-300-rgb), 0.4);
    transform: none;
}

#header-mob-menu-projects {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.07);
    border-radius: 11px;
}

#header-mob-menu-projects > div,
#header-mob-menu-projects > a {
    flex: 1;
    padding: 10px 8px;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

#header-mob-menu-projects > div {
    background: var(--pb-500);
    color: #fff;
    box-shadow: none;
}

#header-mob-menu-projects > a {
    color: rgba(255, 255, 255, 0.75);
}

#header-mob-menu-projects > a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}


/* ---------- 9. Мобильный поиск ---------- */

#header-mob-search {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9500;
    padding: 18px 16px;
    background: var(--pb-900);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    animation: mob-search-drop 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

#header-mob-search::before {
    display: none;
}

#header-mob-search-form input[type="text"] {
    flex: 1;
    height: 48px;
    padding: 0 18px;
    font-size: 15px;
    color: var(--pb-ink);
    background: #fff;
    border: 1px solid transparent;
    border-radius: 12px;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
}

#header-mob-search-form::before {
    display: none;
}

#header-mob-search-form input[type="submit"] {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--pb-500);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s ease;
}

#header-mob-search-form input[type="submit"]:hover {
    background: var(--pb-600);
    transform: none;
    box-shadow: none;
}


/* ---------- 10. Футер ---------- */

#footer {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--pb-900);
    color: var(--pb-200);
    overflow: hidden;
    margin-top: 60px;
}

/* Декоративный шум и свечение убраны */
#footer::before,
#footer::after {
    display: none;
}

#footer-top {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 40px;
    padding: 56px 20px 44px;
    max-width: 1200px;
    margin: 0 auto;
}


#footer-top1-top-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: auto;
    height: auto;
    background-image: none;
    margin-bottom: 18px;
    text-decoration: none;
    white-space: nowrap;
    opacity: 0.95;
    transition: opacity 0.2s ease;
}
 
#footer-top1-top-logo:hover {
    opacity: 1;
    transform: none;
    filter: none;
}
 
#footer-top1-top-logo::before {
    content: "";
    flex: 0 0 34px;
    width: 34px;
    height: 32px;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 44'><g fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'><path d='M13.6 14.2 27.4 22l-13.8 7.8'/><path d='M27.4 22h10.4'/><path d='M13.6 14.2v15.6'/></g><circle cx='11.6' cy='13.1' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/><circle cx='11.6' cy='30.9' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/><circle cx='28.2' cy='22' r='5' fill='%23000'/><circle cx='40.4' cy='22' r='2.7' fill='%23000'/></svg>") left center / contain no-repeat;
            mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 44'><g fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'><path d='M13.6 14.2 27.4 22l-13.8 7.8'/><path d='M27.4 22h10.4'/><path d='M13.6 14.2v15.6'/></g><circle cx='11.6' cy='13.1' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/><circle cx='11.6' cy='30.9' r='4.3' fill='none' stroke='%23000' stroke-width='1.9'/><circle cx='28.2' cy='22' r='5' fill='%23000'/><circle cx='40.4' cy='22' r='2.7' fill='%23000'/></svg>") left center / contain no-repeat;
}
 
#footer-top1-top-logo .logo-text {
    color: #fff;
    font-family: inherit;
    font-size: 18px;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.01em;
    line-height: 1;
}
#footer-top1-top-logo .logo-text i {
    font-style: italic;
    font-weight: 600;
    opacity: .72;
    margin-left: 2px;
}

.footer-tagline {
    margin: 0 0 18px;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    max-width: 300px;
}

.footer-legal {
    margin: 0 0 22px;
    font-size: 12.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.38);
    max-width: 300px;
}

#footer-top1-top-projects {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px;
}

#footer-top1-top-projects > div,
#footer-top1-top-projects > a {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

#footer-top1-top-projects > div {
    background: var(--pb-500);
    color: #fff;
    cursor: default;
}

#footer-top1-top-projects > a {
    color: rgba(255, 255, 255, 0.6);
}

#footer-top1-top-projects > a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.footer-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    margin-bottom: 16px;
}

a.footer-title:hover {
    color: var(--pb-300);
}

.footer-title--plain {
    cursor: default;
}

/* Разделительная линия убрана — заголовок и так отделён регистром */
.footer-links-border {
    padding-top: 0;
    border-top: none;
    margin-top: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: color 0.18s ease;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 0;
}

.footer-links-border + .footer-title {
    margin-top: 28px;
}

#footer-bot {
    position: relative;
    z-index: 1;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 20px 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.copyright {
    text-align: center;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.3px;
}

@media (max-width: 900px) {
    #footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 34px;
    }

    #footer-top1 {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    #footer-bot {
        padding-bottom: 76px;
    }
}

@media (max-width: 560px) {
    #footer-top {
        display: flex;
        flex-direction: column;
        gap: 28px;
        padding: 36px 20px 30px;
        text-align: left;
    }

    #footer-top1 {
        order: -1;
    }

    .footer-tagline,
    .footer-legal {
        max-width: none;
    }

    #footer-top2,
    #footer-top3,
    #footer-top4 {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .footer-title {
        margin-bottom: 0;
    }

    .footer-links-border + .footer-title {
        margin-top: 14px;
    }
}


/* ---------- 11. Кнопка «наверх» ---------- */

#to-top {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 50px;
    height: 50px;
    border: none;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 50%;
    background: var(--pb-500);
    box-shadow: 0 8px 24px rgba(var(--pb-900-rgb), 0.3);
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.3s ease;
}

#to-top::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translate(-50%, -30%) rotate(-45deg);
}

#to-top.to-top-visible {
    visibility: visible;
    transform: translateY(0);
}

#to-top.to-top-opacity {
    opacity: 0.9;
}

#to-top:hover {
    opacity: 1;
    background: var(--pb-600);
    transform: translateY(-3px);
}

#to-top:active {
    transform: translateY(-1px) scale(0.96);
}

@media (max-width: 600px) {
    #to-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
    }

    #to-top::before {
        width: 11px;
        height: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #to-top {
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    #to-top:hover {
        transform: none;
    }
}


/* ---------- 12. Смещение sticky-вкладок гайда под новую шапку ---------- */

#guide-inner-top,
#guide-inner-top2 {
    top: calc(var(--pb-header-h) + 10px);
}

.guide-inner-bot-item h3 {
    scroll-margin-top: calc(var(--pb-header-h) + 80px);
}


/* Плашка уведомления */

#header-notification {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(90deg, var(--pb-50) 0%, var(--pb-100) 100%);
    border-bottom: 1px solid var(--pb-200);
    color: var(--pb-700);
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
}

#header-notification::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6'/%3E%3Cpath d='M10 3v6l-4.5 8a2 2 0 0 0 1.8 3h9.4a2 2 0 0 0 1.8-3L14 9V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E");
}

#header-notification .hn-text {
    max-width: 100%;
}

#header-notification b {
    color: var(--pb-600);
    font-weight: 700;
    white-space: nowrap;
}

#header-notification a {
    color: var(--pb-600);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color .15s ease;
}

#header-notification a:hover {
    color: var(--pb-700);
}

@media (max-width: 600px) {
    #header-notification {
        font-size: 13px;
        padding: 10px 14px;
        gap: 8px;
        align-items: flex-start;
    }

    #header-notification::before {
        margin-top: 1px;
    }
}



#bc-back {
    width: auto;
    height: auto;
    display: none;
    padding: 5px 15px;
    border-radius: 3px;
    color: #fff;
    background: var(--pb-500);
    text-decoration: none;
    font-size: 14px;
    margin: -5px 0 5px;
}


/* Типографика контента */

.rub,
.rouble {
    font-family: 'Arial';
}

body.page-id-697 .the-content h2 {
    text-align: center;
}

.the-content {
    font-size: 17px;
    line-height: 1.7;
    color: var(--pb-800);
}

.the-content p {
    margin: 0 0 20px;
}

.the-content h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--pb-ink);
    margin: 44px 0 18px;
    padding-bottom: 14px;
    letter-spacing: -0.4px;
    position: relative;
}

.the-content h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--pb-500), var(--pb-600));
}

.the-content h3 {
    font-size: 23px;
    font-weight: 800;
    color: var(--pb-ink);
    margin: 36px 0 14px;
    padding-left: 16px;
    border-left: 4px solid var(--pb-500);
}

.the-content h4 {
    font-size: 19px;
    font-weight: 700;
    color: var(--pb-800);
    margin: 28px 0 12px;
}

.the-content a {
    color: var(--pb-600);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--pb-600-rgb), 0.35);
    transition: all 0.2s ease;
}

.the-content a:hover {
    color: var(--pb-700);
    border-bottom-color: var(--pb-500);
    background: rgba(var(--pb-600-rgb), 0.08);
}

.the-content ul,
.the-content ol {
    margin: 0 0 22px;
    padding-left: 4px;
}

.the-content ul {
    list-style: none;
}

.the-content ul li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
}

.the-content ul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pb-500);
    box-shadow: 0 0 0 4px rgba(var(--pb-600-rgb), 0.15);
}

.the-content ol {
    padding-left: 22px;
}

.the-content ol li {
    margin-bottom: 12px;
    padding-left: 6px;
}

.the-content ol li::marker {
    color: var(--pb-600);
    font-weight: 800;
}

.the-content strong {
    color: var(--pb-ink);
    font-weight: 800;
}

.the-content code {
    background: var(--pb-100);
    color: var(--pb-700);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.9em;
    font-family: 'SF Mono', Consolas, monospace;
}

.the-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 24px 0 32px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 30px rgba(var(--pb-600-rgb), 0.10);
    border: 1px solid var(--pb-line);
}

.the-content th {
    background: linear-gradient(135deg, var(--pb-500), var(--pb-600));
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    text-align: left;
}

.the-content td {
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.55;
    border-top: 1px solid #eef4f0;
    vertical-align: top;
}

.the-content tbody tr:nth-child(even) td {
    background: var(--pb-50);
}

.the-content tbody tr:hover td {
    background: var(--pb-100);
}

.the-content td a {
    border-bottom: none;
}

.the-content td a strong {
    color: var(--pb-600);
}

.the-content blockquote {
    position: relative;
    margin: 26px 0;
    padding: 22px 26px 22px 60px;
    background: #f5f8f6;
    border-left: 4px solid var(--pb-300);
    border-radius: 0 14px 14px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--pb-ink-soft);
}

.the-content blockquote p:last-child {
    margin-bottom: 0;
}

.the-content blockquote::before {
    content: "❝";
    position: absolute;
    left: 18px;
    top: 14px;
    font-size: 30px;
    color: var(--pb-300);
    line-height: 1;
}

.the-content blockquote.yellow {
    background: linear-gradient(135deg, #fff9e6, #fef3d0);
    border-left-color: #e6a817;
    color: #7a5c15;
}

.the-content blockquote.yellow strong {
    color: #5a4410;
}

.the-content blockquote.green {
    background: linear-gradient(135deg, var(--pb-50), var(--pb-100));
    border-left-color: var(--pb-600);
    color: var(--pb-700);
}

.the-content blockquote.green strong {
    color: #16401f;
}

.the-content blockquote.blue {
    background: linear-gradient(135deg, #eaf4fc, #d9ebf8);
    border-left-color: #2b82c9;
    color: #14405e;
}

.the-content blockquote.blue strong {
    color: #0d2e45;
}

.the-content blockquote.violet {
    background: linear-gradient(135deg, #f4f0fb, #ebe4f7);
    border-left-color: #7c5cc4;
    color: #3d2a63;
    font-style: italic;
    font-size: 18px;
    padding-left: 66px;
}

.the-content blockquote.violet::before {
    content: "❝";
    font-size: 46px;
    top: 10px;
    left: 20px;
    color: #a48fd6;
    font-family: Georgia, serif;
}

.the-content blockquote.violet cite {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    color: #7c5cc4;
    text-align: right;
}

.the-content blockquote.violet cite::before {
    content: "— ";
}

.the-content blockquote::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.the-content blockquote.blue {
    border-left: 4px solid #2f80ed;
    background: #eef5fd;
}

.the-content blockquote.blue::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f80ed' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5'/%3E%3Ccircle cx='12' cy='7.8' r='.6' fill='%232f80ed'/%3E%3C/svg%3E");
}

.the-content blockquote.green {
    border-left: 4px solid var(--pb-500);
    background: var(--pb-50);
}

.the-content blockquote.green::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233db05e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

.the-content blockquote.yellow {
    border-left: 4px solid #e0a80d;
    background: #fdf7e6;
}

.the-content blockquote.yellow::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a80d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19z'/%3E%3Cpath d='M12 10v4'/%3E%3Ccircle cx='12' cy='17' r='.5' fill='%23e0a80d'/%3E%3C/svg%3E");
}

.the-content blockquote.red {
    border-left: 4px solid #e04a4a;
    background: #fdecec;
}

.the-content blockquote.red::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e04a4a' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4'/%3E%3Ccircle cx='12' cy='16' r='.6' fill='%23e04a4a'/%3E%3C/svg%3E");
}

@media (max-width: 640px) {
    .the-content {
        font-size: 16px;
    }

    .the-content h2 {
        font-size: 24px;
    }

    .the-content h3 {
        font-size: 20px;
    }

    .the-content blockquote {
        padding: 18px 20px 18px 50px;
    }

    .the-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.alignnone {
    margin: 0 0 24px 0;
}

.aligncenter,
div.aligncenter {
    display: block;
    margin: 0 auto 24px;
}

.alignright {
    float: right;
    margin: 0 0 24px 24px;
}

.alignleft {
    float: left;
    margin: 0 24px 24px 0;
}

a img.alignright {
    float: right;
    margin: 0 0 24px 24px;
}

a img.alignnone {
    margin: 0 0 24px 0;
}

a img.alignleft {
    float: left;
    margin: 0 24px 24px 0;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.the-content img {
    max-width: 100%;
    height: auto;
    border-radius: 14px;
}

.the-content > p > a > img,
.the-content > p > img {
    border-radius: 14px;
    cursor: zoom-in;
    box-shadow: 0 8px 26px rgba(var(--pb-600-rgb), 0.14);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.the-content > p > a > img:hover,
.the-content > p > img:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(var(--pb-600-rgb), 0.22);
}

.wp-caption {
    max-width: 100% !important;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(var(--pb-600-rgb), 0.12);
    background: #fff;
    margin-bottom: 24px;
}

.wp-caption.aligncenter {
    margin: 0 auto 24px;
}

.wp-caption.alignnone {
    margin: 0 0 24px 0;
}

.wp-caption.alignleft {
    float: left;
    margin: 0 24px 24px 0;
}

.wp-caption.alignright {
    float: right;
    margin: 0 0 24px 24px;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    padding: 0;
    width: 100%;
    display: block;
    border-radius: 14px 14px 0 0;
}

.wp-caption p.wp-caption-text {
    margin: 0;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--pb-50), var(--pb-100));
    border-top: 2px solid var(--pb-500);
    color: var(--pb-ink-soft);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    border-radius: 0;
    position: relative;
}
/*
.wp-caption p.wp-caption-text::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 7px;
    vertical-align: -2px;
    background-color: currentColor;
    opacity: 0.65;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h2.5l1.4-2h6.2l1.4 2H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12.5' r='3.5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h2.5l1.4-2h6.2l1.4 2H19a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='12.5' r='3.5'/%3E%3C/svg%3E");
}
*/
.the-content .alignleft,
.the-content .alignright {
    max-width: 45%;
}

@media (max-width: 600px) {
    .the-content .alignleft,
    .the-content .alignright {
        float: none;
        display: block;
        max-width: 100%;
        margin: 0 auto 24px;
    }

    .wp-caption.alignleft,
    .wp-caption.alignright {
        float: none;
        margin: 0 auto 24px;
    }
}


/* Блоки страниц и карточки */

#mid {
    margin: 22px auto 72px;
}

#mid>*:last-child {
    margin-bottom: 0;
}

#mid > h1::first-letter {
    color: var(--pb-500);
    font-size: 1.3em;
}

.mid-text {
    width: 100%;
    height: auto;
    display: table;
    margin: 0 auto 40px;
    text-align: center;
    max-width: 848px;
    font-size: 18px;
    line-height: 24px;
}

.mid-bq {
    position: relative;
    margin: 0 auto 36px;
    max-width: 820px;
    padding: 28px 34px 28px 68px;
    background: linear-gradient(135deg, var(--pb-50) 0%, var(--pb-100) 100%);
    border: 1px solid var(--pb-line);
    border-left: 4px solid var(--pb-500);
    border-radius: 0 18px 18px 0;
    box-shadow: 0 8px 26px rgba(var(--pb-600-rgb), 0.10);
}

.mid-bq > div {
    font-size: 17px;
    line-height: 1.65;
    font-weight: 500;
    color: var(--pb-800);
    text-transform: none;
    letter-spacing: 0;
}

.mid-bq::before {
    content: "";
    position: absolute;
    left: 24px;
    top: 24px;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233db05e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='7' r='2'/%3E%3Ccircle cx='19' cy='7' r='2'/%3E%3Ccircle cx='12' cy='17' r='2'/%3E%3Ccircle cx='12' cy='10' r='2.2'/%3E%3Cpath d='m6.7 8.2 3.5 1.5M17.3 8.2l-3.5 1.5M12 12.2v2.8'/%3E%3C/svg%3E");
}

.mid-articles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.mid-articles > a {
    display: flex;
    align-items: stretch;
    gap: 0;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.mid-articles > a:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(var(--pb-600-rgb), 0.16);
    border-color: var(--pb-500);
}

.mid-articles > a > div:first-child {
    flex: 0 0 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
}

.mid-articles > a:hover > div:first-child {
    transform: scale(1.06);
}

.mid-articles > a > div:last-child {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 22px 26px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--pb-ink);
    transition: color 0.2s ease;
}

.mid-articles > a:hover > div:last-child {
    color: var(--pb-600);
}

.mid-articles > a[href="/protocols"] > div:last-child {
    font-weight: 700;
    color: var(--pb-600);
}

.mid-articles > a[href="/protocols"]::after {
    content: "→";
    align-self: center;
    padding-right: 20px;
    font-size: 22px;
    color: var(--pb-500);
    transition: transform 0.25s ease;
}

.mid-articles > a[href="/protocols"]:hover::after {
    transform: translateX(5px);
}

.mid-articles > a[href="/articles"] > div:last-child {
    font-weight: 700;
    color: var(--pb-600);
}

.mid-articles > a[href="/articles"]::after {
    content: "→";
    align-self: center;
    padding-right: 20px;
    font-size: 22px;
    color: var(--pb-500);
    transition: transform 0.25s ease;
}

.mid-articles > a[href="/articles"]:hover::after {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .mid-articles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .mid-articles > a > div:first-child {
        flex: 0 0 110px;
    }

    .mid-articles > a > div:last-child {
        font-size: 15px;
        padding: 16px 18px;
    }
}

#mid-guide-tags-mob {
    width: 100%;
    display: none;
    height: auto;
    margin-bottom: 20px;
}

.mid-guide-tags-mob-item {
    display: block;
    width: 100%;
    height: 36px;
    border-radius: 2px;
    border: 1px solid #00000066;
    padding: 5px 11px;
    color: #000;
    font-size: 14px;
    line-height: 24px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

h2.guide_buy {
    text-align: left;
    font-size: 28px;
    font-weight: 800;
    color: var(--pb-ink);
    margin: 50px 0 30px;
    position: relative;
    padding-bottom: 16px;
}

h2.guide_buy::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 70px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--pb-500), var(--pb-600));
}

#mid-shop-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px;
    margin-bottom: 50px;
}

.shop-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 6px 22px rgba(var(--pb-600-rgb), 0.08);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.shop-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(var(--pb-600-rgb), 0.20);
    border-color: var(--pb-500);
}

.shop-card-top {
    position: relative;
    padding: 16px;
    background: linear-gradient(160deg, var(--pb-50) 0%, var(--pb-100) 100%);
}

.shop-card-top-img {
    position: relative;
    width: 100%;
    padding-top: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 14px;
    transition: transform 0.4s ease;
}

.shop-card:hover .shop-card-top-img {
    transform: scale(1.04);
}

.shop-card-top-img-badge-quality {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-600), var(--pb-700));
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(31, 92, 61, 0.35);
    backdrop-filter: blur(4px);
}

.shop-card-top-img-badge-quality::before {
    content: "✓";
    font-size: 11px;
    font-weight: 900;
}

.shop-card-bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 20px;
    flex: 1;
}

.shop-card-bot-left {
    flex: 1;
    min-width: 0;
}

.shop-card-bot-left > div:first-child {
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-ink);
    line-height: 1.35;
    margin-bottom: 10px;
}

.shop-card-bot-left > div:last-child {
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-weight: 900;
    color: var(--pb-700);
}

.shop-card-bot-left > div:last-child span:first-child {
    font-size: 22px;
}

.shop-card-bot-left > div:last-child span:last-child {
    font-size: 15px;
    color: var(--pb-ink-mute);
}

.shop-card-bot-right {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 400;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-400), var(--pb-600));
    border-radius: 50%;
    box-shadow: 0 5px 16px rgba(var(--pb-600-rgb), 0.4);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    line-height: 1;
}

.shop-card:hover .shop-card-bot-right {
    transform: scale(1.1) rotate(90deg);
    box-shadow: 0 8px 22px rgba(var(--pb-600-rgb), 0.55);
}

@media (max-width: 680px) {
    #mid-shop-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .shop-card-bot {
        flex-direction: column;
        align-items: stretch;
    }

    .shop-card-bot-right {
        width: 100%;
        border-radius: 12px;
        height: 42px;
        font-size: 20px;
    }

    .shop-card:hover .shop-card-bot-right {
        transform: none;
    }
}

@media (max-width: 400px) {
    #mid-shop-cards {
        grid-template-columns: 1fr;
    }
}

#mid-guide-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 34px;
}

#mid-guide-tags a,
#mid-guide-tags [data-tag="show-all"] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: var(--pb-ink-soft);
    background: #ffffff;
    border: 1.5px solid var(--pb-line);
    border-radius: 24px;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

#mid-guide-tags a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pb-500);
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

#mid-guide-tags a:hover {
    color: var(--pb-700);
    border-color: var(--pb-500);
    background: var(--pb-50);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(var(--pb-600-rgb), 0.16);
}

#mid-guide-tags a:hover::before {
    opacity: 1;
    transform: scale(1);
}

#mid-guide-tags a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--pb-500), var(--pb-600));
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(var(--pb-600-rgb), 0.35);
}

#mid-guide-tags a.active::before {
    opacity: 1;
    transform: scale(1);
    background: #fff;
}

#mid-guide-tags [data-tag="show-all"] {
    color: #fff;
    background: linear-gradient(135deg, var(--pb-500) 0%, var(--pb-600) 100%);
    border-color: transparent;
    padding-right: 22px;
    box-shadow: 0 5px 14px rgba(var(--pb-600-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

#mid-guide-tags [data-tag="show-all"]::after {
    content: "→";
    font-size: 15px;
    font-weight: 800;
    transition: transform 0.25s ease;
}

#mid-guide-tags [data-tag="show-all"]:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(var(--pb-600-rgb), 0.45);
    color: #fff;
}

#mid-guide-tags [data-tag="show-all"]:hover::after {
    transform: translateX(4px);
}

#mid-guide-tags [data-tag="show-all"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

#mid-guide-tags [data-tag="show-all"]:hover::before {
    left: 130%;
}

#mid-guide-tags [data-tag="show-all"] {
    margin-left: 6px;
}

@media (max-width: 768px) {
    #mid-guide-tags {
        display: none;
    }
}

#mid-guide-tags-h3 {
    width: 100%;
    height: auto;
    display: table;
    text-align: center;
    color: #191C1F;
    font-size: 20px;
    line-height: 1.7;
    margin: 40px 0 24px;
    font-weight: 600;
}

#mid-guide-list-wrap {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--pb-line);
    border-radius: 24px;
    padding: 14px;
    box-shadow: 0 14px 44px rgba(var(--pb-600-rgb), 0.10);
    margin-bottom: 50px;
}

#mid-guide-list-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 40px;
    right: 40px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--pb-500) 30%, var(--pb-500) 70%, transparent);
}

#mid-guide-list-custom-tag {
    padding: 0;
}

.mid-guide-list-default-block {
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.28s ease;
}

.mid-guide-list-default-block:last-child {
    margin-bottom: 0;
}

.mid-guide-list-default-block-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 26px;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--pb-ink-mute);
    cursor: pointer;
    user-select: none;
    border-radius: 14px;
    transition: all 0.22s ease;
}

.mid-guide-list-default-block-title::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pb-200);
    transition: all 0.22s ease;
}

.mid-guide-list-default-block-title::after {
    content: "";
    margin-left: auto;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid var(--pb-500);
    border-bottom: 2.5px solid var(--pb-500);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
}

.mid-guide-list-default-block-title:hover {
    background: var(--pb-50);
    color: var(--pb-600);
}

.mid-guide-list-default-block-title:hover::before {
    background: var(--pb-500);
    box-shadow: 0 0 0 4px rgba(var(--pb-600-rgb), 0.15);
}

.mid-guide-list-default-block-active {
    background: linear-gradient(135deg, var(--pb-50), var(--pb-100));
    border-color: var(--pb-line);
}

.mid-guide-list-default-block-active .mid-guide-list-default-block-title {
    color: var(--pb-700);
}

.mid-guide-list-default-block-active .mid-guide-list-default-block-title::before {
    background: var(--pb-500);
    box-shadow: 0 0 0 4px rgba(var(--pb-600-rgb), 0.2);
}

.mid-guide-list-default-block-active .mid-guide-list-default-block-title::after {
    transform: rotate(-135deg);
}

.mid-guide-list-default-block-list {
    padding: 0 12px;
}

.mid-guide-list-default-block-list-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 4px 4px 22px;
    animation: guide-fade-in 0.3s ease;
}

@keyframes guide-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    #mid > h1 {
        font-size: 30px;
        gap: 12px;
    }

    #mid > h1 span {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
        font-size: 18px;
    }

    #mid-guide-list-wrap {
        padding: 8px;
        border-radius: 18px;
    }

    .mid-guide-list-default-block-list-inner {
        grid-template-columns: 1fr;
    }

    .mid-guide-list-default-block-title {
        padding: 16px 18px;
        font-size: 14px;
    }
}

.mid-guide-list-default-block-list-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 999px) {
    .mid-guide-list-default-block-list-inner {
        padding: 0;
    }
}

.mid-guide-list-default-block-list-inner-item {
    display: flex;
    align-items: stretch;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
	min-height:80px;
}

.mid-guide-list-default-block-list-inner-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 38px rgba(var(--pb-600-rgb), 0.18);
    border-color: var(--pb-500);
}

.mid-guide-list-default-block-list-inner-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--pb-500);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
    z-index: 2;
}

.mid-guide-list-default-block-list-inner-item:hover::before {
    transform: scaleY(1);
}

.mid-guide-list-default-block-list-inner-item-bottle {
    flex: 0 0 130px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.45s ease;
}

.mid-guide-list-default-block-list-inner-item:hover .mid-guide-list-default-block-list-inner-item-bottle {
    transform: scale(1.07);
}

.mid-guide-list-default-block-list-inner-item-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 18px 22px;
    min-width: 0;
}

.mid-guide-list-default-block-list-inner-item-right > div:first-child {
    font-size: 19px;
    font-weight: 800;
    color: var(--pb-ink);
    letter-spacing: 0.2px;
    transition: color 0.2s ease;
}

.mid-guide-list-default-block-list-inner-item:hover .mid-guide-list-default-block-list-inner-item-right > div:first-child {
    color: var(--pb-600);
}

.mid-guide-list-default-block-list-inner-item-right > div:last-child {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--pb-ink-mute);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mid-guide-list-default-block-list-inner-item[href$="/guide"] {
    background: linear-gradient(135deg, #f0f8f2 0%, var(--pb-100) 100%);
    border-color: rgba(var(--pb-600-rgb), 0.35);
}

.mid-guide-list-default-block-list-inner-item[href$="/guide"] .mid-guide-list-default-block-list-inner-item-right > div:first-child {
    color: var(--pb-600);
}

.mid-guide-list-default-block-list-inner-item[href$="/guide"] .mid-guide-list-default-block-list-inner-item-right > div:first-child::after {
    content: " →";
    display: inline-block;
    transition: transform 0.25s ease;
}

.mid-guide-list-default-block-list-inner-item[href$="/guide"]:hover .mid-guide-list-default-block-list-inner-item-right > div:first-child::after {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .mid-guide-list-default-block-list-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .mid-guide-list-default-block-list-inner-item-bottle {
        flex: 0 0 100px;
    }

    .mid-guide-list-default-block-list-inner-item-right {
        padding: 14px 16px;
    }

    .mid-guide-list-default-block-list-inner-item-right > div:first-child {
        font-size: 17px;
    }
}

#single-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(10, 25, 18, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    cursor: zoom-out;
}

#single-lightbox.open {
    opacity: 1;
    pointer-events: auto;
}

#single-lightbox-img {
    max-width: 92vw;
    max-height: 88vh;
    width: auto;
    height: auto;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    cursor: default;
}

#single-lightbox.open #single-lightbox-img {
    transform: scale(1);
}

#single-lightbox-close {
    position: absolute;
    top: 24px;
    right: 32px;
    font-size: 44px;
    line-height: 1;
    color: #fff;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1;
}

#single-lightbox-close:hover {
    opacity: 1;
    transform: scale(1.1);
    color: var(--pb-500);
}

#article-top-image,
#guide-top-image {
    cursor: zoom-in;
    display: block;
}

#mid > h1 {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 42px;
    font-weight: 900;
    color: var(--pb-ink);
    margin: 8px 0 12px;
    padding-bottom: 18px;
    position: relative;
}

#mid > h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--pb-500), var(--pb-600) 70%, transparent);
}

#mid > h1 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-400) 0%, var(--pb-600) 100%);
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(var(--pb-600-rgb), 0.4);
    position: relative;
    line-height: 1;
    animation: count-pulse 2.8s ease-in-out infinite;
}

#mid > h1 span::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 2px solid rgba(var(--pb-600-rgb), 0.3);
}

#mid > h1 span::after {
    content: "";
}

@keyframes count-pulse {
    0%,
    100% {
        box-shadow: 0 8px 22px rgba(var(--pb-600-rgb), 0.4);
    }

    50% {
        box-shadow: 0 8px 30px rgba(var(--pb-600-rgb), 0.6);
    }
}

@media (prefers-reduced-motion: reduce) {
    #mid > h1 span {
        animation: none;
    }
}


/* Страница пептида */

#guide-top-image {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 44px;
    cursor: zoom-in;
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(var(--pb-600-rgb), 0.22), 0 0 0 8px #ffffff, 0 0 0 9px rgba(var(--pb-600-rgb), 0.25), 0 0 50px rgba(var(--pb-600-rgb), 0.15);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}

#guide-top-image > img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 26px;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

#guide-top-image:hover {
    transform: translateY(-6px);
    box-shadow: 0 34px 74px rgba(var(--pb-600-rgb), 0.32), 0 0 0 8px #ffffff, 0 0 0 9px rgba(var(--pb-600-rgb), 0.45), 0 0 70px rgba(var(--pb-600-rgb), 0.28);
}

#guide-top-image:hover > img {
    transform: scale(1.06);
}

#guide-top-image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 26px;
    background: linear-gradient(180deg, transparent 60%, rgba(15, 61, 42, 0.12) 100%);
    pointer-events: none;
    z-index: 1;
}

#guide-top-image::after {
    content: "";
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8d63' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / 20px no-repeat;
    backdrop-filter: blur(4px);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: scale(0.7);
    transition: all 0.3s ease;
    z-index: 2;
}

#guide-top-image:hover::after {
    opacity: 1;
    transform: scale(1);
}

#guide-top-image {
}

@media (max-width: 560px) {
    #guide-top-image {
        max-width: 100%;
        border-radius: 20px;
        box-shadow: 0 16px 40px rgba(var(--pb-600-rgb), 0.2), 0 0 0 6px #fff, 0 0 0 7px rgba(var(--pb-600-rgb), 0.25);
    }

    #guide-top-image > img {
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #guide-top-image,
    #guide-top-image > img {
        transition: none;
    }

    #guide-top-image:hover {
        transform: none;
    }

    #guide-top-image:hover > img {
        transform: none;
    }
}

#guide-inner-top,
#guide-inner-top2 {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px;
    padding: 6px;
    background: var(--pb-50);
    border: 1px solid var(--pb-line);
    border-radius: 16px;
    position: sticky;
    top: 88px;
    z-index: 40;
    backdrop-filter: blur(8px);
}

.guide-inner-top-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 18px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pb-ink-mute);
    background: transparent;
    border-radius: 11px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: all 0.22s ease;
}

.guide-inner-top-item::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    /* Цвет задаётся не здесь, а в каждом правиле иконки ниже:
       вкладка без своей маски тогда остаётся пустой,
       а не превращается в закрашенный квадрат. */
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.guide-inner-top-item[data-i="summary"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h9l5 5V19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V6a1.5 1.5 0 0 1 1-1.5z'/%3E%3Cpath d='M14 4.5V9a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 16.5h5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.5h9l5 5V19a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 19V6a1.5 1.5 0 0 1 1-1.5z'/%3E%3Cpath d='M14 4.5V9a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 16.5h5'/%3E%3C/svg%3E");
}

.guide-inner-top-item[data-i="mechanism"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
}

.guide-inner-top-item[data-i="benefits"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5'/%3E%3C/svg%3E");
}

.guide-inner-top-item[data-i="side_effects"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19z'/%3E%3Cpath d='M12 10v4'/%3E%3Ccircle cx='12' cy='17' r='.5' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19z'/%3E%3Cpath d='M12 10v4'/%3E%3Ccircle cx='12' cy='17' r='.5' fill='%23000'/%3E%3C/svg%3E");
}

.guide-inner-top-item[data-i="dosage"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 2 4 4'/%3E%3Cpath d='m17 7 3-3'/%3E%3Cpath d='M19 9 8.7 19.3a2.4 2.4 0 0 1-3.4 0l-.6-.6a2.4 2.4 0 0 1 0-3.4L15 5z'/%3E%3Cpath d='m9 11 3 3'/%3E%3Cpath d='M5 15l-3 3 4 4 3-3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 2 4 4'/%3E%3Cpath d='m17 7 3-3'/%3E%3Cpath d='M19 9 8.7 19.3a2.4 2.4 0 0 1-3.4 0l-.6-.6a2.4 2.4 0 0 1 0-3.4L15 5z'/%3E%3Cpath d='m9 11 3 3'/%3E%3Cpath d='M5 15l-3 3 4 4 3-3'/%3E%3C/svg%3E");
}

.guide-inner-top-item[data-i="combo"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='12' r='5'/%3E%3Ccircle cx='16' cy='12' r='5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='12' r='5'/%3E%3Ccircle cx='16' cy='12' r='5'/%3E%3C/svg%3E");
}

.guide-inner-top-item[data-i="video"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m10 9 5 3-5 3z'/%3E%3C/svg%3E");
}

.guide-inner-top-item:hover {
    color: var(--pb-600);
    background: rgba(255, 255, 255, 0.6);
}

.guide-inner-top-item-active {
    background: linear-gradient(135deg, var(--pb-500) 0%, var(--pb-600) 100%);
    color: #fff;
    box-shadow: 0 4px 14px rgba(var(--pb-600-rgb), 0.4);
}

.guide-inner-top-item-active:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--pb-500) 0%, var(--pb-600) 100%);
}

@media (max-width: 768px) {
    #guide-inner-top {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        position: static;
        scrollbar-width: none;
    }

    #guide-inner-top::-webkit-scrollbar {
        display: none;
    }

    .guide-inner-top-item {
        flex: 0 0 auto;
        padding: 11px 16px;
    }
}

.mid-bq {
    padding-left: 60px;
}

@media (max-width: 600px) {
    .mid-bq {
        padding: 22px 20px 22px 54px;
        font-size: 15px;
    }

    .mid-bq::before {
        left: 18px;
        top: 22px;
        font-size: 22px;
    }
}

#guide-inner-bot {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--pb-line);
    border-radius: 0 0 22px 22px;
    border-top: none;
    padding: 34px 40px 40px;
    box-shadow: 0 14px 44px rgba(var(--pb-600-rgb), 0.08);
    margin-bottom: 50px;
}

.guide-inner-bot-item {
    display: none;
    animation: guide-bot-fade 0.35s ease;
}

.guide-inner-bot-item.guide-inner-bot-item-active,
.guide-inner-bot-item[data-active="1"] {
    display: block;
}

@keyframes guide-bot-fade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.guide-inner-bot-item .toc,
.guide-inner-bot-item > div:first-child {
}

.guide-inner-bot-item h2:first-child,
.guide-inner-bot-item .toc-title {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pb-ink-mute);
    margin: 0 0 14px;
}

.guide-inner-bot-item .toc a,
.guide-inner-bot-item ul.toc-list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--pb-600);
    font-weight: 600;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.guide-inner-bot-item .toc a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pb-500);
    flex: 0 0 auto;
}

.guide-inner-bot-item .toc a:hover {
    color: var(--pb-700);
    transform: translateX(3px);
}

.guide-inner-bot-item h3 {
    scroll-margin-top: 160px;
}

.guide-inner-bot-item > h2:first-child,
.guide-inner-bot-item > h3:first-child {
    margin-top: 0;
}

.guide-inner-bot-item hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pb-line) 20%, var(--pb-line) 80%, transparent);
    margin: 32px 0;
}

.guide-inner-bot-item:empty::after {
    content: "Информация по этому разделу скоро появится.";
    display: block;
    padding: 40px 20px;
    text-align: center;
    color: var(--pb-ink-mute);
    font-size: 16px;
}

@media (max-width: 768px) {
    #guide-inner-bot {
        padding: 24px 20px 30px;
        border-radius: 18px;
        border-top: 1px solid var(--pb-line);
        margin-top: 16px;
    }
}

#guide-inner-mob {
    width: 100%;
    height: auto;
    display: none;
    grid-template-columns: 1fr;
    row-gap: 30px;
    margin-bottom: 30px;
}

.guide-inner-mob-bot-item {
    width: 100%;
    height: auto;
    display: table;
    border-radius: 2px;
    border: 1px solid #e4e7e9;
}

.guide-inner-mob-bot-item-title {
    padding: 0 20px;
    height: 56px;
    line-height: 56px;
    margin: -1px 0;
    text-transform: uppercase;
    color: #191C1F;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid #e4e7e9;
    display: table;
    position: relative;
    width: 100%;
    text-align: center;
}

.guide-inner-mob-bot-item-title:before {
    left: 30px;
    right: 30px;
    bottom: 0;
    height: 3px;
    width: calc(100% - 60px);
    background: var(--pb-500);
    display: table;
    position: absolute;
    content: '';
}

.guide-inner-mob-bot-item-content {
    width: 100%;
    height: auto;
    display: table;
    padding: 20px;
    table-layout: fixed;
}

.guide-inner-mob-bot-item-content .content-tab-link {
    margin-bottom: 10px;
}

.post-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 14px;
    margin: 40px 0;
}

.post-nav a {
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.post-nav-prev,
.post-nav-next {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff !important;
    background: linear-gradient(135deg, var(--pb-500), var(--pb-600));
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(var(--pb-600-rgb), 0.28);
}

.post-nav-prev {
    justify-content: flex-start;
    text-align: left;
}

.post-nav-next {
    justify-content: flex-end;
    text-align: right;
}

.post-nav-prev:hover,
.post-nav-next:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(var(--pb-600-rgb), 0.42);
    color: #fff !important;
}

.post-nav-prev:hover {
    transform: translateY(-4px) translateX(-3px);
}

.post-nav-next:hover {
    transform: translateY(-4px) translateX(3px);
}

.post-nav a[href="/articles"] {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 18px 26px;
    font-size: 14px;
    font-weight: 700;
    color: var(--pb-600) !important;
    background: #fff;
    border: 2px solid var(--pb-line);
    border-radius: 14px;
}

.post-nav a[href="/articles"]:hover {
    transform: translateY(-4px);
    border-color: var(--pb-500);
    box-shadow: 0 10px 26px rgba(var(--pb-600-rgb), 0.18);
    background: #f4faf6;
    color: var(--pb-700) !important;
}

@media (max-width: 720px) {
    .post-nav {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .post-nav-prev,
    .post-nav-next {
        justify-content: center;
        text-align: center;
    }

    .post-nav a[href="/articles"] {
        order: 3;
    }

    .post-nav-prev {
        order: 1;
    }

    .post-nav-next {
        order: 2;
    }
}

#guide-yt-item-change {
    display: none !important;
    align-items: center;
    gap: 9px;
    margin: 0 auto 28px;
    padding: 12px 26px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-600);
    background: #fff;
    border: 1.5px solid var(--pb-line);
    border-radius: 30px;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 14px rgba(var(--pb-600-rgb), 0.12);
    transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
    width: fit-content;
}

#guide-yt-item-change::before,
#guide-yt-item-change::after {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

#guide-yt-item-change::before {
    -webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
}

#guide-yt-item-change[data-type="yt"]::after {
    -webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 3.6c-.7 0-6.6.03-8.4.5a3 3 0 0 0-2.1 2.1C1 8.1 1 12 1 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.5 8.4.5 8.4.5s6.5 0 8.4-.5a3 3 0 0 0 2.1-2.1C23 15.9 23 12 23 12s0-3.9-.5-5.8a3 3 0 0 0-2.1-2.1c-1.8-.47-7.7-.5-8.4-.5zM9.8 8.6v6.8l5.7-3.4-5.7-3.4z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 3.6c-.7 0-6.6.03-8.4.5a3 3 0 0 0-2.1 2.1C1 8.1 1 12 1 12s0 3.9.5 5.8a3 3 0 0 0 2.1 2.1c1.9.5 8.4.5 8.4.5s6.5 0 8.4-.5a3 3 0 0 0 2.1-2.1C23 15.9 23 12 23 12s0-3.9-.5-5.8a3 3 0 0 0-2.1-2.1c-1.8-.47-7.7-.5-8.4-.5zM9.8 8.6v6.8l5.7-3.4-5.7-3.4z'/%3E%3C/svg%3E");
    width: 20px;
}

#guide-yt-item-change[data-type="vk"]::after {
    -webkit-mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.2 17.6c-5.5 0-8.9-3.8-9-10.1h2.8c.1 4.6 2.2 6.6 3.8 7V7.5h2.6v4c1.6-.2 3.3-2 3.9-4h2.6c-.4 2.5-2.2 4.3-3.4 5 1.2.6 3.2 2.2 4 5.1h-2.9c-.6-1.9-2.1-3.4-4.2-3.6v3.6h-.2z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.2 17.6c-5.5 0-8.9-3.8-9-10.1h2.8c.1 4.6 2.2 6.6 3.8 7V7.5h2.6v4c1.6-.2 3.3-2 3.9-4h2.6c-.4 2.5-2.2 4.3-3.4 5 1.2.6 3.2 2.2 4 5.1h-2.9c-.6-1.9-2.1-3.4-4.2-3.6v3.6h-.2z'/%3E%3C/svg%3E");
}

#guide-yt-item-change:hover {
    color: var(--pb-700);
    border-color: var(--pb-500);
    background: var(--pb-50);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--pb-600-rgb), 0.2);
}

@media (max-width: 479px) {
    .mid-bq::before {
        display: none;
    }
}

#guide-yt {
    display: block;
}

.guide-inner-bot-item[data-i="video"] {
    text-align: center;
}

#guide-yt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    text-align: left;
}

.guide-yt-item {
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(var(--pb-600-rgb), 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guide-yt-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(var(--pb-600-rgb), 0.18);
}

.guide-yt-item-video {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: var(--pb-ink);
    overflow: hidden;
}

.guide-yt-item-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
    display: block;
}

.guide-yt-item-text {
    padding: 18px 22px 22px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--pb-ink);
}

@media (max-width: 680px) {
    #guide-yt {
        grid-template-columns: 1fr;
    }

    .guide-yt-item-text {
        font-size: 14px;
        padding: 14px 16px 18px;
    }
}

#guide-buy-list {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 24px;
}

#guide-dev {
    width: 100%;
    height: auto;
    background: #FFFCC2;
    border-radius: 6px;
    padding: 18px;
}

#guide-dev>div {
    width: auto;
    display: table;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 31px;
    background: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyMCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTkuNSA5LjVDMTkuNSAxMi4wMTk2IDE4LjQ5OTEgMTQuNDM1OSAxNi43MTc1IDE2LjIxNzVDMTQuOTM1OSAxNy45OTkxIDEyLjUxOTYgMTkgMTAgMTlDNy40ODA0NCAxOSA1LjA2NDA4IDE3Ljk5OTEgMy4yODI0OSAxNi4yMTc1QzEuNTAwODkgMTQuNDM1OSAwLjUgMTIuMDE5NiAwLjUgOS41QzAuNSA2Ljk4MDQ0IDEuNTAwODkgNC41NjQwOCAzLjI4MjQ5IDIuNzgyNDlDNS4wNjQwOCAxLjAwMDg5IDcuNDgwNDQgMCAxMCAwQzEyLjUxOTYgMCAxNC45MzU5IDEuMDAwODkgMTYuNzE3NSAyLjc4MjQ5QzE4LjQ5OTEgNC41NjQwOCAxOS41IDYuOTgwNDQgMTkuNSA5LjVaTTExLjE4NzUgMTQuMjVDMTEuMTg3NSAxNC41NjQ5IDExLjA2MjQgMTQuODY3IDEwLjgzOTcgMTUuMDg5N0MxMC42MTcgMTUuMzEyNCAxMC4zMTQ5IDE1LjQzNzUgMTAgMTUuNDM3NUM5LjY4NTA2IDE1LjQzNzUgOS4zODMwMSAxNS4zMTI0IDkuMTYwMzEgMTUuMDg5N0M4LjkzNzYxIDE0Ljg2NyA4LjgxMjUgMTQuNTY0OSA4LjgxMjUgMTQuMjVDOC44MTI1IDEzLjkzNTEgOC45Mzc2MSAxMy42MzMgOS4xNjAzMSAxMy40MTAzQzkuMzgzMDEgMTMuMTg3NiA5LjY4NTA2IDEzLjA2MjUgMTAgMTMuMDYyNUMxMC4zMTQ5IDEzLjA2MjUgMTAuNjE3IDEzLjE4NzYgMTAuODM5NyAxMy40MTAzQzExLjA2MjQgMTMuNjMzIDExLjE4NzUgMTMuOTM1MSAxMS4xODc1IDE0LjI1Wk0xMCAzLjU2MjVDOS42ODUwNiAzLjU2MjUgOS4zODMwMSAzLjY4NzYxIDkuMTYwMzEgMy45MTAzMUM4LjkzNzYxIDQuMTMzMDEgOC44MTI1IDQuNDM1MDYgOC44MTI1IDQuNzVWOS41QzguODEyNSA5LjgxNDk0IDguOTM3NjEgMTAuMTE3IDkuMTYwMzEgMTAuMzM5N0M5LjM4MzAxIDEwLjU2MjQgOS42ODUwNiAxMC42ODc1IDEwIDEwLjY4NzVDMTAuMzE0OSAxMC42ODc1IDEwLjYxNyAxMC41NjI0IDEwLjgzOTcgMTAuMzM5N0MxMS4wNjI0IDEwLjExNyAxMS4xODc1IDkuODE0OTQgMTEuMTg3NSA5LjVWNC43NUMxMS4xODc1IDQuNDM1MDYgMTEuMDYyNCA0LjEzMzAxIDEwLjgzOTcgMy45MTAzMUMxMC42MTcgMy42ODc2MSAxMC4zMTQ5IDMuNTYyNSAxMCAzLjU2MjVaIiBmaWxsPSIjODM1MTAxIi8+DQo8L3N2Zz4NCg==") left center no-repeat;
    color: #835101;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
}


/* Контакты */

#article-top-image {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto 32px;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 16px 44px rgba(var(--pb-600-rgb), 0.16);
}

#article-top-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

#article-top-image:hover img {
    transform: scale(1.03);
}


/* Карточки-ссылки */

#mid-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 40px auto;
}

#mid-links a {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 28px 32px;
    border-radius: 16px;
    text-decoration: none;
    background: linear-gradient(135deg, var(--pb-100) 0%, var(--pb-line) 100%);
    border: 1px solid rgba(var(--pb-600-rgb), 0.25);
    transition: all 0.25s ease;
}

#mid-links a:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(var(--pb-600-rgb), 0.20);
    border-color: var(--pb-500);
}

#mid-links a > div:first-child {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background-color: var(--pb-500);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#mid-links a[href="/calc"] > div:first-child {
    background-image: url('i/icon-calc.jpg');
}

#mid-links a[href="/dosage"] > div:first-child {
    background-image: url('i/icon-dosage.jpg');
}

#mid-links a > div:last-child {
    font-size: 20px;
    font-weight: 700;
    color: var(--pb-800);
    line-height: 1.35;
}

#mid-links .ml-title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--pb-800);
}

#mid-links .ml-sub {
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pb-ink-mute);
}

#mid > .mid-text {
    text-align: left;
    max-width: 620px;
    margin: 0 0 32px;
}


/* Статья */

#article-content {
    width: 100%;
    height: auto;
    display: table;
    table-layout: fixed;
    padding: 0 112px;
}

#mid > h2 {
    position: relative;
    margin: 48px 0 24px;
    padding: 0 0 12px 16px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--pb-700);
    border-bottom: 2px solid var(--pb-line);
}

#mid > h2:first-of-type {
    margin-top: 24px;
}

#mid > h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 4px;
    height: 20px;
    background: linear-gradient(180deg, var(--pb-500), var(--pb-600));
    border-radius: 3px;
}

#mid > h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 70px;
    height: 2px;
    background: linear-gradient(90deg, var(--pb-500), transparent);
}

body.page #article-top-image {
    max-height: 340px;
    width: auto;
    max-width: 100%;
    display: block;
    margin: 20px auto 30px;
    border-radius: 18px;
    object-position: 50% 50%;
}

#founder {
    padding: 60px 20px;
}

.founder-inner {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 46px;
    align-items: center;
    background: linear-gradient(135deg, var(--pb-50) 0%, var(--pb-100) 100%);
    border: 1px solid var(--pb-line);
    border-radius: 28px;
    padding: 44px;
    box-shadow: 0 18px 54px rgba(var(--pb-600-rgb), 0.12);
    position: relative;
    overflow: hidden;
}

.founder-inner::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, rgba(var(--pb-600-rgb), 0.12) 0 3px, transparent 4px);
    background-size: 26px 26px;
    opacity: 0.5;
    pointer-events: none;
}

.founder-photo {
    position: relative;
    z-index: 1;
}

.founder-photo-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 24px;
    background-image: url('i/founder-pavel.jpg');
    background-size: cover;
    background-position: center top;
    background-color: var(--pb-line);
    box-shadow: 0 18px 44px rgba(31, 92, 61, 0.28), 0 0 0 6px #fff, 0 0 0 8px rgba(var(--pb-600-rgb), 0.3);
}

.founder-photo-badge {
    position: absolute;
    bottom: -14px;
    right: -14px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 19px;
    background: linear-gradient(135deg, var(--pb-500), var(--pb-600));
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(var(--pb-600-rgb), 0.4);
    color: #fff;
}

.founder-badge-num {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
}

.founder-badge-txt {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.founder-content {
    position: relative;
    z-index: 1;
}

.founder-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-500), var(--pb-600));
    padding: 6px 15px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.founder-name {
    font-size: 36px;
    font-weight: 900;
    color: var(--pb-ink);
    margin: 0 0 16px;
}

.founder-bio {
    font-size: 16px;
    line-height: 1.65;
    color: var(--pb-ink-soft);
    margin: 0 0 26px;
    max-width: 560px;
}

.founder-stats {
    display: flex;
    gap: 34px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.founder-stat-num {
    font-size: 28px;
    font-weight: 900;
    color: var(--pb-700);
    line-height: 1;
}

.founder-stat-label {
    font-size: 12px;
    color: var(--pb-ink-mute);
    line-height: 1.35;
    margin-top: 5px;
    font-weight: 600;
}

.founder-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.founder-social {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.founder-social:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    color: #fff;
}

.fs-ic {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.fs-yt {
    background: #ff0000;
    box-shadow: 0 6px 16px rgba(255, 0, 0, 0.28);
}

.fs-tg {
    background: #2aabee;
    box-shadow: 0 6px 16px rgba(42, 171, 238, 0.28);
}

.fs-vk {
    background: #0077ff;
    box-shadow: 0 6px 16px rgba(0, 119, 255, 0.28);
}

.fs-tt {
    background: #111;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.fs-tt .fs-ic {
    color: #25f4ee;
}

.founder-note {
    font-size: 13px;
    color: var(--pb-ink-mute);
    font-weight: 600;
}

@media (max-width: 760px) {
    .founder-inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 30px 22px;
        text-align: center;
    }

    .founder-photo {
        max-width: 230px;
        margin: 0 auto;
    }

    .founder-name {
        font-size: 28px;
    }

    .founder-bio {
        margin-left: auto;
        margin-right: auto;
    }

    .founder-stats {
        justify-content: center;
        gap: 26px;
    }

    .founder-socials {
        justify-content: center;
    }
}

@media (max-width: 420px) {
    .founder-stats {
        gap: 18px;
    }

    .founder-stat-num {
        font-size: 24px;
    }

    .founder-social {
        padding: 10px 16px;
        font-size: 13px;
    }
}

#article-bottom-links {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin: 50px 0 30px;
    padding-top: 30px;
    border-top: 1px solid var(--pb-line);
}

#article-bottom-links a[href="/articles"],
#article-bottom-links a[href$="/articles"] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 26px;
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-800);
    text-decoration: none;
    transition: all 0.25s ease;
}

#article-bottom-links a[href="/articles"]::before,
#article-bottom-links a[href$="/articles"]::before {
    content: "←";
    font-size: 18px;
    color: var(--pb-500);
    transition: transform 0.25s ease;
}

#article-bottom-links a[href="/articles"]:hover,
#article-bottom-links a[href$="/articles"]:hover {
    border-color: var(--pb-500);
    background: var(--pb-50);
    color: var(--pb-600);
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(var(--pb-600-rgb), 0.14);
}

#article-bottom-links a[href="/articles"]:hover::before,
#article-bottom-links a[href$="/articles"]:hover::before {
    transform: translateX(-4px);
}

#article-bottom-links a:not([href*="/articles"]),
#article-bottom-links a:last-child:not([href$="/articles"]) {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 28px;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-500) 0%, var(--pb-600) 100%);
    box-shadow: 0 8px 24px rgba(var(--pb-600-rgb), 0.28);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

#article-bottom-links a:last-child:not([href$="/articles"]):hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(var(--pb-600-rgb), 0.42);
    color: #fff;
}

#article-bottom-links a:last-child:not([href$="/articles"])::before {
    content: "Читать далее";
    position: absolute;
    top: 8px;
    left: 28px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.75;
}

#article-bottom-links a:last-child:not([href$="/articles"]) {
    padding-top: 26px;
}

#article-bottom-links a:last-child:not([href$="/articles"])::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

#article-bottom-links a:last-child:not([href$="/articles"]):hover::after {
    left: 130%;
}

#article-bottom-links[data-count="1"] {
    justify-content: center;
}

#article-bottom-links[data-count="1"] a {
    flex: 0 0 auto;
}

@media (max-width: 640px) {
    #article-bottom-links {
        flex-direction: column;
    }

    #article-bottom-links a {
        width: 100%;
        box-sizing: border-box;
    }
}

#mid > h1 {
    font-size: 42px;
    font-weight: 900;
    line-height: 1.15;
    color: var(--pb-ink);
    letter-spacing: -0.5px;
    text-align: left;
    margin: 8px 0 26px;
    padding-bottom: 18px;
    position: relative;
}

#mid > h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 90px;
    height: 4px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--pb-500) 0%, var(--pb-600) 70%, transparent 100%);
}

#mid > h1::first-letter {
    font-size: inherit !important;
    color: inherit !important;
}

#article-top-image {
    display: block;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 44px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(var(--pb-600-rgb), 0.18), 0 0 0 8px #ffffff, 0 0 0 9px rgba(var(--pb-600-rgb), 0.22);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    position: relative;
}

#article-top-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
    object-fit: cover;
}

body.page #article-top-image img {
    max-height: 340px;
}

#article-top-image:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 66px rgba(var(--pb-600-rgb), 0.26), 0 0 0 8px #ffffff, 0 0 0 9px rgba(var(--pb-600-rgb), 0.38);
}

#article-top-image:hover img {
    transform: scale(1.04);
}

#article-top-image::after {
    content: "";
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8d63' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / 19px no-repeat;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.25s ease;
    z-index: 2;
}

#article-top-image:hover::after {
    opacity: 1;
}

@media (max-width: 640px) {
    #mid > h1 {
        font-size: 30px;
    }

    #article-top-image {
        max-width: 100%;
    }
}


/* Галерея */

#gallery {
    width: 100%;
    height: auto;
    display: table;
    margin: 40px 0;
    position: relative;
    table-layout: fixed;
}

#gallery-main {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#gallery-main>a {
    width: 100%;
    height: 0;
    padding-top: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: table;
}

body.page-id-697 #gallery-main>a {
    padding-top: 141.43%;
}

#gallery-caption {
    width: 100%;
    margin: 0;
    padding: 12px 18px;
    background: #EEF2FF;
    color: #5F6C72;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    border-radius: 0 0 6px 6px;
}


/* Главная: баннер */

#main-banner {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    color: #fff;
    padding: 70px 0 120px;
    background: linear-gradient(120deg, rgba(15, 61, 42, 0.92) 0%, rgba(26, 92, 61, 0.75) 45%, rgba(46, 139, 87, 0.55) 100%), url('i/main-banner-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#main-banner::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 110px;
    background: #ffffff;            /* цвет секции под баннером */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 72C180 24 420 12 720 44c300 32 540 44 720 12V120H0Z' fill='%23000'/%3E%3C/svg%3E") bottom center / 100% 110px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 72C180 24 420 12 720 44c300 32 540 44 720 12V120H0Z' fill='%23000'/%3E%3C/svg%3E") bottom center / 100% 110px no-repeat;
    pointer-events: none;
}

@media screen and (max-width: 767px) {
    #main-banner::after {
        height: 64px;
        -webkit-mask-size: 100% 64px;
                mask-size: 100% 64px;
    }
}

#main-banner-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 56px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    align-items: start;
}

#main-banner-inner-left-title {
    font-size: 56px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -1px;
    margin: 0 0 28px;
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

#main-banner-inner-left-desc p {
    font-size: 19px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--pb-50);
    margin: 0 0 22px;
}

#main-banner-inner-left-desc ul {
    list-style: none;
    padding: 0;
    margin: 0 0 34px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#main-banner-inner-left-desc li {
    position: relative;
    padding-left: 34px;
    font-size: 16px;
    line-height: 1.45;
    color: var(--pb-line);
}

#main-banner-inner-left-desc li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aef5c4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 14px;
    background-position: center;
    background-repeat: no-repeat;
}

#main-banner-inner-left > a[data-invite],
#main-banner-inner-left > a[href="/guide"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 22px 52px;
    font-size: 21px;
    font-weight: 800;
    color: var(--pb-800);
    text-decoration: none;
    background: linear-gradient(135deg, var(--pb-50) 0%, #ffffff 50%, var(--pb-100) 100%);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.4) inset;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

#main-banner-inner-left > a[data-invite]:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

#main-banner-inner-left > a[data-invite]::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

#main-banner-inner-left > a[data-invite]:hover::before {
    left: 130%;
}

#main-banner-inner-left-bottom {
    margin-top: 22px;
}

#main-banner-inner-left-bottom p {
    margin: 0 0 12px;
    font-size: 15px;
    color: var(--pb-line);
}

#main-banner-inner-left-bottom p:first-child {
    font-weight: 600;
}

#main-banner-inner-left-bottom p:last-child a {
    display: inline-block;
    padding: 6px 14px;
    margin: 0 4px 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pb-50);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    transition: all 0.2s ease;
}

#main-banner-inner-left-bottom p:last-child a:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
}

#main-banner-inner-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#main-banner-inner-right .mid-guide-list-default-block-list-inner-item {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

@media (max-width: 980px) {
    #main-banner-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    #main-banner-inner-left-title {
        font-size: 42px;
    }

    #main-banner-inner-right {
        max-width: 520px;
    }
}

@media (max-width: 560px) {
    #main-banner-inner-left-title {
        font-size: 34px;
    }

    #main-banner {
        padding: 40px 0 90px;
    }

    #main-banner-inner-left > a[data-invite] {
        width: 100%;
        padding: 18px;
        font-size: 18px;
    }
}

#main-icons {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 32px;
    background: linear-gradient(135deg, #ffffff 0%, #f5faf6 100%);
    border: 1px solid var(--pb-line);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(var(--pb-600-rgb), 0.08);
}

.main-icon {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 20px;
    position: relative;
    transition: transform 0.25s ease;
}

.main-icon:hover {
    transform: translateY(-3px);
}

.main-icon:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 46px;
    background: linear-gradient(180deg, transparent, #d4 e6da, transparent);
    background: linear-gradient(180deg, transparent, var(--pb-200) 50%, transparent);
}

.main-icon-left {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--pb-100) 0%, var(--pb-line) 100%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.main-icon:hover .main-icon-left {
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 8px 20px rgba(var(--pb-600-rgb), 0.25);
}

.main-icon:nth-child(1) .main-icon-left {
    background-image: url('i/icon-community.jpg');
}

.main-icon:nth-child(2) .main-icon-left {
    background-image: url('i/icon-guide.jpg');
}

.main-icon:nth-child(3) .main-icon-left {
    background-image: url('i/icon-articles.jpg');
}

.main-icon:nth-child(4) .main-icon-left {
    background-image: url('i/icon-age.jpg');
}

.main-icon-right {
    min-width: 0;
}

.main-icon-right > div:first-child {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pb-ink);
    margin-bottom: 4px;
    background: linear-gradient(135deg, var(--pb-600), var(--pb-500));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.main-icon-right > div:last-child {
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.45;
    color: var(--pb-ink-mute);
}

.main-icon-right a {
    color: var(--pb-500);
    font-weight: 700;
    text-decoration: none;
}

.main-icon-right a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    #main-icons {
        flex-wrap: wrap;
    }

    .main-icon {
        flex: 0 0 calc(50% - 12px);
    }

    .main-icon:not(:last-child)::after {
        display: none;
    }

    .main-icon:nth-child(odd)::after {
        content: "";
        display: block;
    }
}

@media (max-width: 560px) {
    .main-icon {
        flex: 0 0 100%;
    }

    #main-icons {
        padding: 20px;
    }
}

.not_found {
    max-width: 520px;
    margin: 48px auto;
    padding: 44px 36px 40px;
    text-align: center;
    background: linear-gradient(160deg, var(--pb-ink), var(--pb-ink));
    border: 1px solid rgba(var(--pb-600-rgb), 0.22);
    border-radius: 24px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28), 0 0 40px rgba(var(--pb-600-rgb), 0.08);
    color: var(--pb-line);
    font-size: 17px;
    line-height: 1.6;
    position: relative;
}

.not_found::before {
    content: "";
    display: block;
    width: 60px;
    height: 60px;
    margin: 0 auto 18px;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cb85c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 16px rgba(var(--pb-600-rgb), 0.45));
    animation: nfFloat 3s ease-in-out infinite;
}

@keyframes nfFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.not_found strong {
    color: var(--pb-300);
    font-weight: 700;
    word-break: break-word;
}

.not_found_after {
    content: "";
    display: block;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(var(--pb-600-rgb), 0.15);
    font-size: 14px;
    color: var(--pb-300);
    line-height: 1.55;
}

.not_found_after a {
    color: var(--pb-300);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    white-space: nowrap;
    transition: color .25s ease;
}

.not_found_after a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--pb-300);
    border-radius: 2px;
    transition: width .3s ease;
}

.not_found_after a:hover {
    color: var(--pb-300);
}

.not_found_after a:hover::after {
    width: 100%;
    background: var(--pb-300);
}


/* Главная: строка «Вы читали» */

.pb-continue {
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
}

.pb-continue__link,
.pb-continue__link:link,
.pb-continue__link:visited,
.pb-continue__link:active {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 1px;
    transition: border-color .15s, color .15s;
}

.pb-continue__link:hover {
    color: var(--pb-300);
    border-bottom-color: var(--pb-300);
}

.pb-continue[hidden] {
    display: none;
}


/* Главная: товары */

#main-cards {
    width: 100%;
    height: auto;
    display: table;
    margin-bottom: 60px;
}

#main-cards h2 {
    text-align: center;
}

#main-cards .the-content {
    margin-bottom: 40px;
}

#main-ship {
    width: 100%;
    height: 37px;
    display: table;
    margin: 100px 0 0;
    background: #3D57AF;
    position: relative;
    overflow: hidden;
}

#main-ship-inner {
    position: absolute;
    left: 5px;
    top: 8px;
    width: 9999px;
    height: auto;
}

.main-ship-inner-item {
    width: auto;
    height: auto;
    display: table;
    float: left;
    font-size: 15px;
    line-height: 20px;
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    margin-right: 45px;
}


/* Главная: клуб */

#main-club {
    width: 100%;
    height: auto;
    display: table;
    margin-bottom: 40px;
    position: relative;
    padding: 0 40px 40px;
    border-bottom: 1px solid #E4E7E9;
}

#main-club h2 {
    font-size: 28px;
    line-height: 1.7;
    text-align: center;
    font-weight: 600;
    display: table;
    width: 100%;
    color: #191C1F;
    margin: 0 0 30px;
}

#main-club-subtitle {
    width: 100%;
    height: auto;
    background: var(--pb-100);
    text-align: center;
    padding: 15px 30px;
    color: #475156;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
}

#main-club-subtitle strong {
    font-weight: 600;
}

#main-club-more {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    margin: 28px 0 0;
}

#main-club-more a,
#main-club-more div[data-invite] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
    text-align: center;
}

#main-club-more a {
    background: transparent;
    color: var(--pb-500);
    border: 2px solid var(--pb-500);
}

#main-club-more a:hover {
    background: var(--pb-500);
    color: #ffffff;
    transform: translateY(-2px);
}

#main-club-more div[data-invite] {
    background: var(--pb-500);
    color: #ffffff;
    border: 2px solid var(--pb-500);
    box-shadow: 0 6px 20px rgba(var(--pb-600-rgb), 0.35);
}

#main-club-more div[data-invite]:hover {
    background: var(--pb-500);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--pb-600-rgb), 0.45);
}

#main-club-col {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 100px;
    margin-bottom: 40px;
}

#main-club-col-left {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 100px;
    row-gap: 63px;
    padding-top: 28px;
}

.main-club-col-item {
    width: 100%;
    height: auto;
    display: table;
    font-size: 0;
}

.main-club-col-item>div:first-child {
    width: 63px;
    height: 63px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 24px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.main-club-col-item:nth-child(1)>div:first-child {
    background-image: url(i/main-club-1.jpg);
}

.main-club-col-item:nth-child(2)>div:first-child {
    background-image: url(i/main-club-2.jpg);
}

.main-club-col-item:nth-child(3)>div:first-child {
    background-image: url(i/main-club-3.jpg);
}

.main-club-col-item:nth-child(4)>div:first-child {
    background-image: url(i/main-club-4.jpg);
}

.main-club-col-item>div:last-child {
    width: calc(100% - 87px);
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 400;
    color: #000;
}

.main-club-col-item>div:last-child>div:first-child {
    width: 100%;
    display: block;
    height: auto;
    margin-bottom: 15px;
    font-weight: 500;
}

.main-club-col-item>div:last-child>div:last-child {
    font-size: 14px;
}

.main-club-col-item a {
    color: var(--pb-500);
    text-decoration: none;
    font-weight: 600;
}

.main-club-col-item a:hover {
    text-decoration: underline;
}

#main-club-col-right {
    width: 100%;
    height: 0;
    padding-top: 100%;
    display: table;
    background: url(i/main-club-right.jpg) 50% 50% no-repeat;
    background-size: cover;
    border-radius: 8px;
}


/* Главная: отзывы */

#main-rev,
#main-rev2 {
    width: 100%;
    height: auto;
    display: table;
    table-layout: fixed;
    margin-bottom: 60px;
    position: relative;
    padding: 0 0 60px;
    border-bottom: 1px solid #E4E7E9;
    overflow: hidden;
}

.main-h2 {
    font-size: 28px;
    line-height: 1.7;
    text-align: center;
    font-weight: 600;
    display: table;
    width: 100%;
    color: #191C1F;
    margin: 0;
}

.main-h2 a {
    color: #191C1F;
    text-decoration: none;
    transition: .3s;
}

.main-h2 a:hover {
    color: var(--pb-500);
}

.main-h4 {
    position: relative;
    text-align: center;
    max-width: 640px;
    margin: 0 auto 44px;
    padding: 0 0 20px;
    border-left: none;
    font-size: 17px;
    font-weight: 500;
    color: var(--pb-ink-mute);
    line-height: 1.4;
}

.main-h4::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: var(--pb-500);
    border-radius: 3px;
}

.main-rev-left,
.main-rev-right {
    width: 32px;
    height: 32px;
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
    border-radius: 50%;
    background-position: 50% 50%;
    background-color: #8B9FE6;
    background-repeat: no-repeat;
    transition: .3s;
    cursor: pointer;
}

.main-rev-left {
    background-image: url(i/main-rev-left.svg);
}

.main-rev-right {
    background-image: url(i/main-rev-right.svg);
}

.main-rev-left:hover,
.main-rev-right:hover {
    background-color: var(--pb-500);
}

#main-rev-items,
#main-rev2-items {
    width: 100%;
    height: auto;
    display: table;
    table-layout: fixed;
}

#main-rev-items a,
#main-rev2-items a {
    width: 100%;
    display: table;
    height: 0;
    padding-top: 100%;
    position: relative;
}

.main-rev-item-desc {
    position: absolute;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    color: rgba(255, 255, 255, .9);
    padding: 5px 8px;
    display: table;
    z-index: 2;
    font-size: 12px;
}

#main-rev-items a img,
#main-rev2-items a img {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: table;
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-id-697 #main-rev,
body.page-id-697 #main-rev2 {
    margin-top: 70px;
}


/* Главная: текст */

#main-text {
    width: 100%;
    height: auto;
    display: table;
    margin-bottom: 60px;
    position: relative;
    padding: 0 0 60px;
    border-bottom: 1px solid #E4E7E9;
}

#main-text * {
    position: relative;
    z-index: 1;
}

#main-text-sub {
    width: 100%;
    height: auto;
    display: table;
    background: #eef2ff;
    text-align: center;
    padding: 15px 30px;
    color: #475156;
    font-size: 14px;
    line-height: 26px;
    text-transform: uppercase;
    margin-bottom: 32px;
}

#main-text-sub>div {
    width: 100%;
    max-width: 700px;
    display: table;
    margin: 0 auto;
}

#main-text-col {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 3fr;
    column-gap: 40px;
}

#main-text-col-left {
    width: 100%;
    height: 100%;
    display: table;
    float: left;
}

#main-text-col-left-img {
    width: 100%;
    height: 100%;
    display: table;
    background: url(i/main-text-left.jpg) 50% 50% no-repeat;
    background-size: cover;
}

#main-text-col-right {
    width: 100%;
    height: auto;
    display: table;
    float: right;
}

#main-text-col-right p {
    width: 100%;
    height: auto;
    display: table;
    margin: 0 0 32px;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #000;
}

#main-text-col-right p a,
#main-text-col-right p strong {
    font-weight: 600;
    color: #000;
    text-decoration: none;
}

#main-text-col-right p a:hover {
    text-decoration: underline;
}

#main-text-col-right>p:last-child {
    width: 100%;
    height: auto;
    display: table;
    color: var(--pb-500);
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
}


/* Главная: контакты */

body.home #mid-contacts {
    margin-bottom: 120px;
}

.the-content table {
    width: 100%;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 0 24px;
}

.the-content tr {
    font-weight: 500;
}

.the-content tr:nth-child(2n-1) {
    background: #EEF2FF;
}

.the-content tbody tr:nth-child(2n) {
    background: #EEF2FF;
}

.the-content tbody tr:nth-child(2n-1) {
    background: transparent;
}

.the-content tr>td {
    padding: 7.5px 0;
}

.the-content tr>td:first-child {
    padding-left: 20px;
}


/* Главная: документы */

#main-legal {
    width: 100%;
    height: auto;
    display: table;
    margin: 0 0 60px;
    padding: 0 0 60px;
    border-bottom: 1px solid #e4e7e9;
}

#main-legal-items {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
}

.main-legal-item {
    width: 100%;
    height: auto;
    display: table;
    background: #fff;
    padding: 36px;
    box-shadow: 0 0 32px rgba(0, 0, 0, .07);
    background-position: calc(100% - 36px) calc(100% - 41px);
    background-repeat: no-repeat;
    background-size: 150px 150px;
}

.main-legal-item:first-child {
    background-image: url(i/main-legal-left.svg);
}

.main-legal-item:last-child {
    background-image: url(i/main-legal-right.svg);
}

.main-legal-item-top {
    width: 100%;
    height: auto;
    display: table;
    margin-bottom: 24px;
    color: #191C1F;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.main-legal-item-mid {
    width: 70%;
    display: table;
    margin-bottom: 36px;
}

.main-legal-item-mid p {
    margin-bottom: 16px;
    color: #5F6C72;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
}

.main-legal-item-mid p:last-child {
    margin-bottom: 0;
}

.main-legal-item-mid a {
    text-decoration: none;
    color: var(--pb-500);
}

.main-legal-item-mid a:hover {
    text-decoration: underline;
}

.main-legal-item>a {
    display: table;
    margin: 0;
    background: var(--pb-500);
    color: #fff !important;
    padding: 8.5px 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    transition: .3s;
    cursor: pointer;
    text-decoration: none;
}

.main-legal-item>a:hover {
    text-decoration: none !important;
    filter: brightness(1.1);
}


/* Главная: акция */

#ms {
    display: table;
    position: relative;
    width: 100%;
    height: auto;
    margin: 0 0 100px;
    padding: 72px 155px;
}

#ms:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0 calc(50% - 50vw);
    background: linear-gradient(to left, var(--pb-500), var(--pb-500) 30%, #6E8CF3 100%);
}

body:not(.home) #ms {
    margin-bottom: 0 !important;
}

#ms-decor {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url(/wp-content/themes/peptideboost/i/main-sale-decor.svg) 20% 50% no-repeat;
    background-size: contain;
    z-index: 0;
}

#ms-content {
    display: table;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
}

#ms-left {
    display: table;
    float: left;
    width: 50%;
    height: 300px;
    background-position: 0 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

#ms-right {
    display: table;
    float: right;
    width: 50%;
    margin-top: 5px;
}

#ms-right1 {
    display: table;
    width: 100%;
    height: auto;
    margin: 0 0 19px;
    color: #fff;
    font-style: italic;
    font-size: 18px;
}

#ms-right1 a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

#ms-right1 a:hover {
    text-decoration: underline;
}

#ms-right2 {
    display: table;
    width: calc(100% - -50px);
    height: 250px;
    margin: -50px -100px -50px 0;
    background: url(/wp-content/themes/peptideboost/i/main-sale-title.png) 100% 50% no-repeat;
    background-size: contain;
}

#ms-right3 {
    display: table;
    clear: both;
    width: auto;
    height: auto;
    float: right;
    background: #B600F6;
    line-height: 17px;
    padding: 3px 11px 2px;
    color: #fff;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    border-radius: 8.5px;
    letter-spacing: 0.1em;
    font-size: 13px;
}

#ms-right4 {
    display: table;
    clear: both;
    width: auto;
    height: auto;
    float: right;
    background: #00a5f6a3;
    line-height: 17px;
    padding: 3px 11px 2px;
    color: #fff;
    font-weight: 600;
    font-style: italic;
    text-transform: uppercase;
    border-radius: 8.5px;
    letter-spacing: 0.1em;
    font-size: 13px;
    margin-top: 10px;
}

#ms-link {
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 26.5px;
    line-height: 40px;
    width: auto;
    display: table;
    color: var(--pb-500);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: .15s;
}

#ms-link:hover {
    background: transparent;
    color: #fff;
}


/* Баннер клуба */

.club-banner {
    margin: 20px auto;
    padding: 14px 18px;
    border: 1px solid #ef5d5d;
    border-radius: 8px;
    background: #fdeaea;
    color: #c43a3a;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.club-banner a {
    color: #c43a3a;
    text-decoration: underline;
}

.club-banner a:hover {
    color: #a82e2e;
}


/* Кнопки клуба */

.club_invite,
.club_rules,
.button_blue {
    display: flex;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    padding: 20px 46px;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, var(--pb-400) 0%, var(--pb-500) 45%, var(--pb-600) 100%);
    border-radius: 14px;
    border: none;
    box-shadow: 0 8px 24px rgba(var(--pb-600-rgb), 0.40), 0 2px 6px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    position: relative;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    animation: club-pulse 2.6s ease-in-out infinite;
}

.club_invite::before,
.club_rules::before,
.button_blue::before {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 60%;
    height: 100%;
    background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.45), transparent );
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.club_invite:hover,
.club_rules:hover,
.button_blue:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 14px 34px rgba(var(--pb-600-rgb), 0.55), 0 4px 10px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    animation: none;
}

.club_invite:hover::before {
    left: 130%;
}

.club_invite:active {
    transform: translateY(-1px) scale(0.99);
}

@keyframes club-pulse {
    0%,
    100% {
        box-shadow: 0 8px 24px rgba(var(--pb-600-rgb), 0.40), 0 2px 6px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }

    50% {
        box-shadow: 0 8px 30px rgba(var(--pb-600-rgb), 0.62), 0 2px 6px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
}

@media (prefers-reduced-motion: reduce) {
    .club_invite {
        animation: none;
    }

    .club_invite::before {
        display: none;
    }
}

#club_subtitle {
    text-align: center;
    display: table;
    width: 100%;
    height: auto;
    margin: -10px 0 30px;
}

#club_top {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: table;
    border-radius: 10px;
    margin: 0 auto 10px;
    font-size: 0;
}

#club_top_left {
    width: 33.3333%;
    display: inline-block;
    vertical-align: middle;
    height: 0;
    padding-top: 33.3333%;
    position: relative;
}

#club_top_left>img {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 10px;
}

#club_top_right {
    width: 66.6666%;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    padding: 30px 50px;
}

#club_top_right>h1 {
    width: 100%;
    height: auto;
    display: table;
    margin: 0 0 30px;
    color: #191C1F;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
}

#club_top_right_top {
    width: 100%;
    height: auto;
    display: table;
}

.club_top_right_top_item {
    width: 100%;
    height: auto;
    background: url("data:image/svg+xml;base64, PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCjxwYXRoIGQ9Ik0xMy44NzUgNy44NzVMNS42MjUgMTYuMTI1TDEuNSAxMiIgc3Ryb2tlPSIjMkRCMzI0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQo8cGF0aCBkPSJNMjIuNTAwNCA3Ljg3NUwxNC4yNTA0IDE2LjEyNUwxMi4wNTY2IDEzLjkzMTMiIHN0cm9rZT0iIzJEQjMyNCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KPC9zdmc+DQo=") 0 50% no-repeat;
    padding-left: 40px;
    color: #191C1F;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
}

.club_top_right_top_item:hover {
    text-decoration: underline;
}

body:not(.home) .club_top_right_top_item {
    cursor: pointer;
}

body.home .club_top_right_top_item:hover {
    text-decoration: none;
}

.club_top_right_top_item:last-child {
    margin-bottom: 0 !important;
}


/* Пейволл и покупка доступа */

.buy_guide_top,
.buy_guide_join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.buy_guide_top::before,
.buy_guide_join::before {
    content: "";
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.buy_guide_top::before {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fd39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

.buy_guide_join::before {
    content: "" !important;
    order: -1;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") !important;
    transition: opacity .15s ease;
}

.buy_guide_join:hover::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7-2.6'/%3E%3C/svg%3E") !important;
}

.buy_guide {
    position: relative;
    text-align: center;
    padding: 48px 44px 44px;
    margin: 30px 0;
    border-radius: 24px;
    overflow: hidden;
    background: radial-gradient(ellipse 70% 60% at 80% 15%, rgba(120, 220, 150, 0.22) 0%, transparent 60%), linear-gradient(135deg, var(--pb-900) 0%, var(--pb-700) 50%, var(--pb-500) 100%);
    color: #fff;
    box-shadow: 0 20px 60px rgba(15, 61, 42, 0.28);
}

.buy_guide::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 15% 25%, rgba(120, 220, 150, 0.10) 0 2px, transparent 3px), radial-gradient(circle at 82% 70%, rgba(120, 220, 150, 0.08) 0 2px, transparent 3px);
    background-size: 200px 200px;
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.buy_guide > * {
    position: relative;
    z-index: 1;
}

.buy_guide_top {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pb-200);
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(174, 245, 196, 0.3);
    border-radius: 30px;
    margin-bottom: 24px;
}

.buy_guide_text1 {
    font-size: 17px;
    line-height: 1.5;
    color: var(--pb-line);
    max-width: 480px;
    margin: 0 auto 32px;
}

.buy_guide_mid {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.2;
    color: #ffffff;
    margin: 0 auto 18px;
    max-width: 560px;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
}

.buy_guide_text2 {
    font-size: 16px;
    line-height: 1.6;
    color: var(--pb-line);
    max-width: 540px;
    margin: 0 auto 28px;
}

.buy_guide_text2 a {
    color: var(--pb-200);
    font-weight: 700;
    text-decoration: none;
}

.buy_guide_text2 a:hover {
    text-decoration: underline;
}

.buy_guide_price {
    font-size: 17px;
    color: var(--pb-50);
    margin: 0 0 32px;
}

.buy_guide_price strong {
    font-size: 26px;
    font-weight: 900;
    color: #fff;
}

.buy_guide_price .rub {
    font-size: 20px;
}

#content-lb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 30, 20, 0.9);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 40px;
    user-select: none;
}

#content-lb.open {
    display: flex;
    animation: clb-fade 0.25s ease;
}

@keyframes clb-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.clb-img {
    max-width: 90%;
    max-height: 88vh;
    border-radius: 12px;
    background: #fff;
    padding: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    object-fit: contain;
}

.clb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}

.clb-arrow:hover {
    background: rgba(var(--pb-600-rgb), 0.7);
}

.clb-prev {
    left: 24px;
}

.clb-next {
    right: 24px;
}

.clb-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, transform 0.2s ease;
}

.clb-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(90deg);
}

.clb-close::before,
.clb-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

.clb-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.clb-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.clb-counter {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    z-index: 2;
}

@media (max-width: 560px) {
    .clb-arrow {
        width: 44px;
        height: 44px;
        font-size: 26px;
    }

    .clb-prev {
        left: 8px;
    }

    .clb-next {
        right: 8px;
    }

    #content-lb {
        padding: 20px;
    }
}

.buy_guide_login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 20px 48px;
    font-size: 18px;
    font-weight: 800;
    color: var(--pb-800);
    cursor: pointer;
    background: linear-gradient(135deg, var(--pb-50) 0%, #ffffff 50%, var(--pb-100) 100%);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    position: relative;
    overflow: hidden;
}

.buy_guide_login:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
}

.buy_guide_login::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.buy_guide_login:hover::before {
    left: 130%;
}

@media (max-width: 560px) {
    .buy_guide {
        padding: 36px 24px 32px;
    }

    .buy_guide_mid {
        font-size: 23px;
    }

    .buy_guide_login {
        width: 100%;
        padding: 16px;
    }
}

.buy_guide_join {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px 56px;
    margin: 8px auto 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--pb-800);
    cursor: pointer;
    background: linear-gradient(135deg, #ffffff 0%, var(--pb-50) 50%, var(--pb-100) 100%);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 0 40px rgba(174, 245, 196, 0.3);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    animation: join-pulse 2.6s ease-in-out infinite;
}

.buy_guide_join:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.6) inset, 0 0 60px rgba(174, 245, 196, 0.5);
    animation: none;
}

.buy_guide_join:active {
    transform: translateY(-1px) scale(1.01);
}

.buy_guide_join::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
}

.buy_guide_join:hover::after {
    left: 130%;
}

#reviews {
    padding: 60px 20px;
}

.reviews-inner {
    max-width: 1160px;
    margin: 0 auto;
}

.reviews-head {
    text-align: center;
    margin-bottom: 40px;
}

.reviews-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-500), var(--pb-600));
    padding: 6px 15px;
    border-radius: 20px;
    margin-bottom: 14px;
}

.reviews-title {
    font-size: 34px;
    font-weight: 900;
    color: var(--pb-ink);
    margin: 0 0 10px;
}

.reviews-sub {
    font-size: 16px;
    color: var(--pb-ink-mute);
    margin: 0;
}

.reviews-carousel-wrap {
    position: relative;
}

.rc-track {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding: 6px 4px 20px;
    scrollbar-width: none;
}

.rc-track::-webkit-scrollbar {
    display: none;
}

.rc-slide {
    flex: 0 0 300px;
    scroll-snap-align: start;
    border-radius: 16px;
    overflow: hidden;
    background: #16202b;
    border: 1px solid var(--pb-line);
    box-shadow: 0 6px 22px rgba(var(--pb-600-rgb), 0.10);
    cursor: zoom-in;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.rc-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(var(--pb-600-rgb), 0.20);
    border-color: var(--pb-500);
}

.rc-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.rc-track {
    align-items: flex-start;
}

.rc-slide::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--pb-600-rgb), 0.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / 16px no-repeat;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.rc-slide:hover::before {
    opacity: 1;
    transform: scale(1);
}

.rc-slide::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 40px;
    background: linear-gradient(to top, rgba(22, 32, 43, 0.95), transparent);
    pointer-events: none;
}

.rc-slide::after {
    content: none;
}

.rc-slide {
    max-height: 200px;
}

.rc-slide.is-tall::after {
    content: "Нажмите, чтобы прочитать →";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 16px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--pb-200);
    background: linear-gradient(to top, #16202b 30%, rgba(22, 32, 43, 0.9) 65%, transparent);
    pointer-events: none;
}


.rc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    background: linear-gradient(135deg, var(--pb-500), var(--pb-600));
    border-radius: 50%;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 6px 18px rgba(var(--pb-600-rgb), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    user-select: none;
}

.rc-arrow:hover {
    box-shadow: 0 10px 26px rgba(var(--pb-600-rgb), 0.5);
}

.rc-arrow-prev {
    left: -10px;
}

.rc-arrow-next {
    right: -10px;
}

.rc-arrow-prev:hover {
    transform: translateY(-50%) scale(1.1);
}

.rc-arrow-next:hover {
    transform: translateY(-50%) scale(1.1);
}

.rc-arrow.hidden {
    opacity: 0;
    pointer-events: none;
}

.rc-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.rc-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--pb-200);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.rc-dot.active {
    background: var(--pb-600);
    transform: scale(1.3);
}

#rev-lb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 30, 20, 0.9);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 40px;
    user-select: none;
}

#rev-lb.open {
    display: flex;
    animation: rev-fade 0.25s ease;
}

@keyframes rev-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#rev-lb-img {
    max-width: 88%;
    max-height: 88vh;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    object-fit: contain;
    animation: rev-zoom 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rev-zoom {
    from {
        transform: scale(0.94);
        opacity: 0.5;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.rev-lb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}

.rev-lb-arrow:hover {
    background: rgba(var(--pb-600-rgb), 0.7);
}

#rev-lb-prev {
    left: 24px;
}

#rev-lb-next {
    right: 24px;
}

#rev-lb-close {
    position: absolute;
    top: 22px;
    right: 26px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease, transform 0.2s ease;
}

#rev-lb-close:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: rotate(90deg);
}

#rev-lb-close::before,
#rev-lb-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
}

#rev-lb-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

#rev-lb-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#rev-lb-counter {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    z-index: 2;
}

@media (max-width: 560px) {
    .rc-slide {
        flex-basis: 82%;
        height: 380px;
    }

    .rc-arrow {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .rc-arrow-prev {
        left: 2px;
    }

    .rc-arrow-next {
        right: 2px;
    }

    .rev-lb-arrow {
        width: 44px;
        height: 44px;
        font-size: 26px;
    }

    #rev-lb-prev {
        left: 8px;
    }

    #rev-lb-next {
        right: 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rc-track {
        scroll-behavior: auto;
    }

    #rev-lb-img {
        animation: none;
    }

    .rc-slide:hover {
        transform: none;
    }
}

.buy_guide_login {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pb-200);
    background: none;
    box-shadow: none;
    border: none;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
    animation: none;
}

.buy_guide_login::before {
    display: none;
}

.buy_guide_login:hover {
    color: #ffffff;
    transform: none;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .buy_guide_join {
        animation: none;
    }

    .buy_guide_join::before {
        display: none;
    }
}


/* Финальный CTA, FAQ, калькулятор */

.final-cta {
    text-align: center;
    padding: 20px 20px 70px;
    max-width: 760px;
    margin: 0 auto;
}

.final-cta-lead {
    font-size: 19px;
    color: var(--pb-ink-soft);
    margin: 0 0 26px;
}

.final-cta-lead strong {
    color: var(--pb-700);
    font-weight: 800;
}

.final-cta-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.final-cta-btn-main {
    display: inline-flex;
    align-items: center;
    padding: 20px 44px;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, var(--pb-500), var(--pb-600));
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(var(--pb-600-rgb), 0.4);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.final-cta-btn-main:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 42px rgba(var(--pb-600-rgb), 0.55);
    color: #fff;
}

.final-cta-btn-tg {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 19px 30px;
    font-size: 15px;
    font-weight: 700;
    color: #2aabee;
    text-decoration: none;
    background: #fff;
    border: 2px solid #d4e9f5;
    border-radius: 16px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.final-cta-btn-tg svg {
    width: 18px;
    height: 18px;
}

.final-cta-btn-tg:hover {
    transform: translateY(-3px);
    border-color: #2aabee;
    box-shadow: 0 12px 26px rgba(42, 171, 238, 0.2);
    color: #2aabee;
}

.final-cta-perks {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 24px;
}

.final-cta-perks li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pb-ink-soft);
}

.final-cta-perks li::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.final-cta-perks li:nth-child(1)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cb85c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.final-cta-perks li:nth-child(2)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cb85c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

.final-cta-perks li:nth-child(3)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cb85c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='16' height='20' rx='2'/%3E%3Cline x1='8' y1='6' x2='16' y2='6'/%3E%3Cline x1='8' y1='14' x2='8' y2='14'/%3E%3Cline x1='12' y1='14' x2='12' y2='14'/%3E%3Cline x1='16' y1='14' x2='16' y2='14'/%3E%3Cline x1='8' y1='18' x2='8' y2='18'/%3E%3Cline x1='12' y1='18' x2='12' y2='18'/%3E%3Cline x1='16' y1='18' x2='16' y2='18'/%3E%3C/svg%3E");
}

.final-cta-perks li:nth-child(4)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cb85c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

.final-cta-perks li:nth-child(5)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cb85c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E");
}

.final-cta-perks li:nth-child(6)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235cb85c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
}

.final-cta-note {
    font-size: 13px;
    color: var(--pb-ink-mute);
    margin: 0;
}

@media (max-width: 620px) {
    .final-cta-btns {
        flex-direction: column;
        gap: 12px;
    }

    .final-cta-btn-main,
    .final-cta-btn-tg {
        width: 100%;
        justify-content: center;
    }

    .final-cta-perks {
        gap: 8px 16px;
    }

    .final-cta-perks li {
        font-size: 13px;
    }

    .final-cta-lead {
        font-size: 17px;
    }
}

.faq-section {
    background: var(--pb-50);
    position: relative;
    padding: 60px 20px;
}

.faq-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background: var(--pb-50);
    z-index: -1;
}

.faq-container {
    max-width: 820px;
    margin: 0 auto;
}

.faq-title {
    text-align: center;
    font-size: 34px;
    font-weight: 800;
    color: var(--pb-ink);
    margin: 0 0 8px;
}

.faq-subtitle {
    text-align: center;
    font-size: 17px;
    color: var(--pb-ink-mute);
    margin: 0 0 44px;
}

.faq-item {
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.faq-item.active {
    border-color: var(--pb-500);
    box-shadow: 0 8px 24px rgba(var(--pb-600-rgb), 0.12);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 26px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 18px;
    font-weight: 600;
    color: var(--pb-ink);
    font-family: inherit;
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--pb-500);
}

.faq-icon {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
}

.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    background: var(--pb-500);
    border-radius: 2px;
    transition: transform 0.3s ease;
}

.faq-icon::before {
    top: 11px;
    left: 2px;
    width: 20px;
    height: 2px;
}

.faq-icon::after {
    top: 2px;
    left: 11px;
    width: 2px;
    height: 20px;
}

.faq-item.active .faq-icon::after {
    transform: rotate(90deg);
    opacity: 0;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer p {
    margin: 0;
    padding: 0 26px 24px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--pb-ink-soft);
}

.faq-answer a {
    color: var(--pb-500);
    font-weight: 600;
}

.faq-cta {
    text-align: center;
    margin-top: 44px;
}

.faq-cta p {
    font-size: 17px;
    color: var(--pb-ink-soft);
    margin: 0 0 20px;
}

.faq-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    background: var(--pb-500);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(var(--pb-600-rgb), 0.35);
    transition: all 0.2s ease;
}

.faq-cta-btn:hover {
    background: var(--pb-500);
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(var(--pb-600-rgb), 0.45);
}

body.page-calc {
    background: linear-gradient(180deg, rgba(247, 251, 248, 0.5) 0%, rgba(240, 248, 242, 0.85) 60%, #f0f8f2 100%), url('/wp-content/themes/peptideboost/i/calc-bg.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}


#bc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 0;
    font-size: 14px;
    padding: 20px 0;
    line-height: 20px;
}

#bc a {
    color: var(--pb-600);
    text-decoration: none;
    font-weight: 600;
}

#bc a:hover {
    color: var(--pb-700);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Разделитель — отдельный элемент, не часть ссылки */
#bc > :not(:last-child)::after {
    content: "›";
    display: inline-block;
    margin: 0 9px;
    color: var(--pb-200);
    font-weight: 400;
    text-decoration: none;
    pointer-events: none;
}

/* Текущая страница: поддержаны оба варианта разметки */
#bc span[aria-current],
#bc > div:last-child {
    color: var(--pb-ink-mute);
    font-weight: 500;
    min-width: 0;
}

#bc a:first-child::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23237150' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5 10v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9'/%3E%3Cpath d='M9.5 20v-5a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v5'/%3E%3C/svg%3E");
}

@media (max-width: 620px) {
    #bc {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        padding: 14px 0;
        font-size: 13px;
    }

    #bc::-webkit-scrollbar {
        display: none;
    }

    #bc > * {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}




/* Аккаунт и меню участника */

.popup2-logged-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--pb-50);
    border-radius: 14px;
    font-weight: 600;
    color: var(--pb-800);
    cursor: pointer;
    transition: background .18s ease, transform .05s ease;
}

.popup2-logged-chip a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    width: 100%;
}

.popup2-logged-chip:hover {
    background: var(--pb-line);
}

.popup2-logged-chip:active {
    transform: scale(.99);
}

.popup2-logged-chip--outline {
    background: transparent;
    border: 1px dashed var(--pb-300);
    cursor: default;
    font-weight: 500;
    line-height: 1.4;
}

.popup2-logged-chip--outline:hover {
    background: transparent;
}

.pl-ico {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: var(--pb-500);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.popup2-logged-chip svg rect[x="8"] {
    fill: var(--pb-500);
    stroke: var(--pb-500);
}

.popup2-logged-chip--logout {
    background: #fdecec;
    color: #c0392b;
}

.popup2-logged-chip--logout:hover {
    background: #f9dcdc;
}

.popup2-logged-chip--logout .pl-ico {
    stroke: #e05a4a;
}

.club-menu {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.club-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-radius: 12px;
    color: var(--pb-800);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.35;
    transition: background .16s ease, color .16s ease;
}

.club-menu__item::before {
    content: "";
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .9;
}

.club-menu__item:hover {
    background: var(--pb-50);
    color: var(--pb-600);
}

.club-menu__item--active {
    background: var(--pb-100);
    color: var(--pb-800);
}

.club-menu__item--active::before {
    opacity: 1;
}

.club-menu__item:nth-child(1)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3Cpath d='M3 4h2l2.2 11.2a1 1 0 0 0 1 .8h8.6a1 1 0 0 0 1-.8L20 7H6'/%3E%3C/svg%3E");
}

.club-menu__item:nth-child(2)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M9 13h6M9 17h6'/%3E%3C/svg%3E");
}

.club-menu__item:nth-child(3)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

.club-menu__item:nth-child(4)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");
}

.club-menu__item:nth-child(5)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

.club-menu__item:nth-child(6)::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

#popup2_bot_auth_login,
#popup2_bot_join_email,
#popup2_bot_reset_email,
#popup2_bot_auth_pass,
#popup2_bot_join_name,
#popup2_bot_join_birthday,
#popup2_bot_join_invite_code {
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 20px 20px;
    padding-left: 44px;
}

#popup2_bot_auth_login,
#popup2_bot_join_email,
#popup2_bot_reset_email {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

#popup2_bot_auth_pass {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
}

#popup2_bot_join_name {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
}

#popup2_bot_join_birthday {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16v-6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 16h16'/%3E%3Cpath d='M12 8V5'/%3E%3Ccircle cx='12' cy='3.5' r='.6' fill='%231f9d57'/%3E%3C/svg%3E");
}

#popup2_bot_join_invite_code {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7V3M15 7V3'/%3E%3Crect x='7' y='7' width='10' height='7' rx='2'/%3E%3Cpath d='M12 14v4a3 3 0 0 1-3 3'/%3E%3C/svg%3E");
}

#popup2_bot_auth_submit,
#popup2_bot_join_submit,
#popup2_bot_reset_submit,
#popup2_bot_auth_reset_link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#popup2_bot_auth_submit::before,
#popup2_bot_join_submit::before,
#popup2_bot_reset_submit::before,
#popup2_bot_auth_reset_link::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#popup2_bot_auth_submit::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3C/svg%3E");
}

#popup2_bot_join_submit::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 7-2.6'/%3E%3C/svg%3E");
}

#popup2_bot_reset_submit::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 6.5 8.5 6 8.5-6'/%3E%3C/svg%3E");
}

#popup2_bot_auth_reset_link::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f9d57' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E");
}


/* Попапы */

#popup-question-thank-you {
    display: none;
}

#popup-overlay,
#popup-wrapper2,
#popup-wrapper,
#popup-wrapper-question {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

#popup-overlay[style*="visible"],
#popup-wrapper2[style*="visible"],
#popup-wrapper[style*="visible"],
#popup-wrapper-question[style*="visible"] {
    pointer-events: auto;
}

#pc_form_loading2 {
    display: none;
}

#popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 40, 27, 0.55);
    backdrop-filter: blur(6px);
    z-index: 9998;
}

#popup-wrapper2 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 880px;
    z-index: 9999;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    animation: popup2-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes popup2-in {
    from {
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

#popup-close2 {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    z-index: 10;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4a38' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#popup-close2:hover {
    transform: rotate(90deg);
    background-color: #fff;
}

#pc_form_loading2 {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(3px);
    z-index: 20;
}

#pc_form_loading2::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
    border: 4px solid var(--pb-line);
    border-top-color: var(--pb-500);
    border-radius: 50%;
    animation: popup2-spin 0.8s linear infinite;
}

@keyframes popup2-spin {
    to {
        transform: rotate(360deg);
    }
}

#popup-content2 {
    display: flex;
    background: #fff;
    min-height: 480px;
}

#popup2-left {
    flex: 0 0 42%;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 40px 36px;
    color: #fff;
    background: linear-gradient(160deg, rgba(15, 61, 42, 0.55) 0%, rgba(46, 139, 87, 0.75) 100%), url('/wp-content/themes/peptideboost/i/popup-bg.jpg');
    background-size: cover;
    background-position: center;
}

#popup2-left-text {
    font-size: 30px;
    font-weight: 900;
    line-height: 1.2;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 1;
}

#popup2-right {
    flex: 1;
    padding: 46px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#popup2_top {
    display: flex;
    gap: 6px;
    padding: 5px;
    background: #f2f8f4;
    border-radius: 14px;
    margin-bottom: 28px;
}

#popup2_top > div {
    flex: 1;
    text-align: center;
    padding: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--pb-ink-mute);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#popup2_top > div.popup2_top_active {
    background: #fff;
    color: var(--pb-600);
    box-shadow: 0 3px 10px rgba(var(--pb-600-rgb), 0.18);
}

#popup2_bot > div[data-i] {
    display: none;
}

#popup2_bot > div.popup2_bot_active {
    display: block;
}

.popup2_bot_row {
    margin-bottom: 14px;
}

.popup2_bot_row input[type="text"],
.popup2_bot_row input[type="password"],
.popup2_bot_row input[type="tel"],
.popup2_bot_row input[type="email"] {
    width: 100%;
    height: 52px;
    padding: 0 18px;
    font-size: 15px;
    color: var(--pb-800);
    background: var(--pb-50);
    border: 1.5px solid var(--pb-line);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.popup2_bot_row input::placeholder {
    color: var(--pb-300);
}

.popup2_bot_row input:focus {
    border-color: var(--pb-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--pb-600-rgb), 0.12);
}

.popup2_bot_row_reset {
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--pb-500);
    cursor: pointer;
    margin-bottom: 18px;
}

.popup2_bot_row_reset:hover {
    text-decoration: underline;
}

#popup2_bot_join_qr {
    width: 300px;
    height: 300px;
    display: table;
    margin: 0 auto 10px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.popup2_bot_join_receipt {
    margin-top: 16px;
    padding: 16px;
    background: var(--pb-50);
    border: 1.5px dashed var(--pb-200);
    border-radius: 14px;
    position: relative;
}
.popup2_bot_join_receipt.is-success {
    background: var(--pb-50);
    border-style: solid;
    border-color: var(--pb-200);
}
.popup2_bot_join_receipt_label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pb-800);
    margin: 0 0 12px;
}
.popup2_bot_join_receipt_drop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    cursor: pointer;
}
.popup2_bot_join_receipt.is-success .popup2_bot_join_receipt_drop {
    cursor: default;
}
.popup2_bot_join_receipt input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.popup2_bot_join_receipt_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--pb-400), var(--pb-500) 50%, var(--pb-600));
    box-shadow: 0 6px 16px rgba(92,184,92,.32);
    box-sizing: border-box;
}
.popup2_bot_join_receipt_name {
    display: block;
    width: 100%;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--pb-ink-mute);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.popup2_bot_join_receipt.is-success .popup2_bot_join_receipt_name {
    color: var(--pb-800);
    font-weight: 600;
}
.popup2_bot_join_receipt_status {
    display: none;
    margin: 14px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--pb-600);
    background: rgba(92,184,92,.12);
    border-radius: 10px;
}
.popup2_bot_join_receipt_status.is-visible { display: block; }
.popup2_bot_join_receipt_status.is-error {
    color: #c0392b;
    background: #fdecea;
}
.popup2_bot_join_receipt_btn.is-disabled {
    opacity: .45;
    pointer-events: none;
    box-shadow: none;
    cursor: default;
}
.popup2_bot_join_receipt_extra {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 500;
    color: var(--pb-ink-mute);
}
.popup2_bot_join_receipt_extra a { color: #1a73e8; }

#popup2_bot_auth_submit,
#popup2_bot_join_submit,
#popup2_bot_reset_submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pb-400), var(--pb-500) 50%, var(--pb-600));
    box-shadow: 0 8px 22px rgba(var(--pb-600-rgb), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#popup2_bot_auth_submit:hover,
#popup2_bot_join_submit:hover,
#popup2_bot_reset_submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(var(--pb-600-rgb), 0.5);
}

.popup2_bot_join_submit_price {
    font-weight: 900;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.popup2_bot_join_submit_price .strikethrough {
    text-decoration: line-through;
    opacity: 0.65;
    font-weight: 600;
    font-size: 14px;
}

.popup2_bot_join_submit_price .rub {
    font-size: 15px;
}

.popup2_bot_row_policy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--pb-ink-mute);
    margin: 6px 0 16px;
}

.popup2_bot_row_policy input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--pb-500);
    margin-top: 1px;
    flex: 0 0 auto;
    cursor: pointer;
}

.popup2_bot_row_policy a {
    color: var(--pb-500);
    font-weight: 600;
}

.popup2_bot_row_invite #show-invite-code {
    font-size: 13px;
    font-weight: 600;
    color: var(--pb-500);
    cursor: pointer;
    display: inline-block;
    margin-bottom: 8px;
}

.popup2_bot_row_invite #show-invite-code:hover {
    text-decoration: underline;
}

.popup2_bot_row_info,
.popup2_bot_row_info_reset {
    font-size: 13px;
    color: #c0392b;
    text-align: center;
}

.popup2_bot_row_info:not(:empty),
.popup2_bot_row_info_reset:not(:empty) {
    margin-bottom: 12px;
    padding: 10px;
    background: #fdecea;
    border-radius: 10px;
}

#popup2_bot_row_info_reset_title {
    font-size: 18px;
    font-weight: 800;
    color: var(--pb-ink);
    margin-bottom: 16px;
    text-align: center;
}

#popup2-right-logged {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.popup2-logged-line {
    display: flex;
}

.popup2-logged-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 16px 20px;
    background: var(--pb-50);
    border: 1px solid var(--pb-line);
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--pb-800);
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.popup2-logged-chip a {
    color: inherit;
    text-decoration: none;
    width: 100%;
}

.popup2-logged-chip:hover {
    border-color: var(--pb-500);
    background: var(--pb-100);
    transform: translateX(3px);
}

.popup2-logged-chip--outline {
    background: transparent;
    border: 1.5px dashed var(--pb-200);
    font-weight: 800;
    color: var(--pb-ink);
    cursor: default;
}

.popup2-logged-chip--outline:hover {
    transform: none;
    border-color: var(--pb-200);
    background: transparent;
}

#popup2-right-logged-logout {
    color: #c0392b;
    border-color: #f0d0cc;
}

#popup2-right-logged-logout:hover {
    background: #fdecea;
    border-color: #e0a49c;
}

#popup-wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 480px;
    background: #fff;
    border-radius: 20px;
    padding: 44px 40px 40px;
    z-index: 9999;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

#popup-wrapper #popup-close,
#popup-wrapper-question #popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f2f8f4;
    cursor: pointer;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f4a38' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
    transition: transform 0.2s ease;
}

#popup-wrapper #popup-close:hover,
#popup-wrapper-question #popup-close:hover {
    transform: rotate(90deg);
}

#popup-wrapper-question {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    max-width: 520px;
    background: #fff;
    border-radius: 22px;
    padding: 46px 42px 40px;
    z-index: 9999;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.popup-question-row {
    margin-bottom: 14px;
}

.popup-question-row input,
.popup-question-row textarea {
    width: 100%;
    padding: 15px 18px;
    font-size: 15px;
    color: var(--pb-800);
    background: var(--pb-50);
    border: 1.5px solid var(--pb-line);
    border-radius: 12px;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.popup-question-row textarea {
    min-height: 110px;
    resize: vertical;
}

.popup-question-row input:focus,
.popup-question-row textarea:focus {
    border-color: var(--pb-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(var(--pb-600-rgb), 0.12);
}

#popup-question-send > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    font-size: 17px;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--pb-400), var(--pb-500) 50%, var(--pb-600));
    box-shadow: 0 8px 22px rgba(var(--pb-600-rgb), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#popup-question-send > div:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(var(--pb-600-rgb), 0.5);
}

#popup-question-info > div {
    margin-top: 20px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--pb-ink-mute);
    text-align: center;
}

#popup-question-thank-you {
    font-size: 17px;
    line-height: 1.6;
    color: var(--pb-800);
    text-align: center;
    padding: 20px 0;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    transition: opacity 0.25s ease;
}

#cookie-notice2.cookie-notice-square {
    position: fixed;
    bottom: 22px;
    left: 22px;
    width: 92%;
    max-width: 380px;
    background: #fff;
    border: 1px solid var(--pb-line);
    border-radius: 18px;
    padding: 22px 24px;
    z-index: 9997;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.16);
    display: none;
}

.cookie-content2 p {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pb-ink-soft);
}

.cookie-buttons2 {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cookie-link2 {
    font-size: 13px;
    font-weight: 600;
    color: var(--pb-500);
    text-decoration: none;
}

.cookie-link2:hover {
    text-decoration: underline;
}

.cookie-btn2 {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(135deg, var(--pb-400), var(--pb-500));
    box-shadow: 0 6px 16px rgba(var(--pb-600-rgb), 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cookie-btn2:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(var(--pb-600-rgb), 0.45);
}

@media (max-width: 700px) {
    #popup-content2 {
        flex-direction: column;
        min-height: auto;
    }

    #popup2-left {
        flex: 0 0 auto;
        min-height: 150px;
        padding: 24px 28px;
    }

    #popup2-left-text {
        font-size: 24px;
    }

    #popup2-right {
        padding: 32px 26px;
    }
}


/* Прочее */

#main-notification {
    width: 100%;
    height: auto;
    background: #efeff8;
    text-align: center;
    padding: 15px 30px;
    color: #475156;
    font-size: 16px;
    line-height: 1.6;
    text-transform: uppercase;
    margin-bottom: 60px;
}

#main-notification a {
    font-weight: 600;
    text-decoration: none;
    color: var(--pb-500);
}

#main-guide,
#main-articles,
#main-recent-guides {
    margin-bottom: 60px;
}

#main-articles {
    margin-top: 40px;
}

.strikethrough {
    text-decoration: line-through;
    text-decoration-color: #ff0000;
    text-decoration-thickness: 2px;
    white-space: nowrap;
}


/* Адаптив */

@media screen and (max-width: 1349px) {
    #ms {
        padding: 72px;
    }

    #ms-left {
        height: 275px;
    }
}

@media screen and (max-width: 1299px) {
    #mid-contacts {
        grid-template-columns: 1fr 1fr;
    }

    .main-icon {
        padding: 0 18px;
    }

    #main-club-col {
        grid-template-columns: 1fr;
        row-gap: 63px;
    }

    #main-banner-inner {
        margin-bottom: 194px;
    }

    #main-banner-inner:before {
        height: 876px;
    }

    #main-banner-inner-left {
        margin-top: 111px;
        width: 600px;
    }

    #main-banner-inner-left-title {
        font-size: 50px;
    }

    #main-banner-inner-right {
        width: 400px;
        height: 400px;
    }
}

@media screen and (max-width: 1159px) {
    #main-legal-items {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 1099px) {
    #header-top-search {
        width: 377px;
    }

    #main-banner-inner-right {
        right: 0;
    }

    #ms-left {
        height: 250px;
    }
}

@media screen and (max-width: 1049px) {
    #header-top-search {
        width: 350px;
    }

    #header-top-logo {
        margin-right: 45px;
    }
}

@media screen and (min-width: 1000px) {
    #mid-guide-list-alphabet .mid-guide-list-default-block-list-inner {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 999px) {
    .width {
        width: calc(100% - 40px);
    }

    #footer-bot {
        padding: 17px 0 16px;
    }

    #footer-bot:before {
        width: 410px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }

    #mid-contacts {
        column-gap: 20px;
        row-gap: 20px;
    }

    .mid-guide-list-default-block-title {
        padding: 24px 20px;
    }

    .mid-guide-list-default-block-title:before {
        right: 20px;
    }

    .mid-guide-list-default-block-list {
        padding: 4px 20px 22px;
    }

    .mid-guide-list-default-block-list-inner {
        row-gap: 22px;
    }

    #article-content {
        padding: 0 40px 60px;
    }

    .header-mob-menu-icon {
        display: block;
    }

    #mid-shop-cards {
        grid-template-columns: repeat(4, 1fr);
    }

    #main-icons {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 35px;
        margin: 45px 0 60px;
    }

    .main-icon {
        padding: 0 36px;
    }

    #main-club-col-left {
        column-gap: 40px;
    }

    #main-text:before {
        left: -240px;
    }

    #main-banner {
        margin-bottom: 35px;
    }

    #main-banner-inner-right {
        width: 100%;
        right: 0;
        top: 0;
        margin-top: 60px;
        display: table;
    }

    #ms {
        padding: 40px 40px 60px;
    }

    #ms-left,
    #ms-right {
        width: calc(50% - 10px);
    }

    #ms-right2 {
        height: 200px;
    }

    #ms-right4 {
        margin-top: 7px;
    }

    #ms-link {
        bottom: -30px;
    }
}

@media screen and (min-width: 831px) and (max-width: 999px) {
    #main-banner-inner {
        margin-bottom: 152px;
    }

    #main-banner-inner:before {
        height: 800px;
    }

    #main-banner-inner-left {
        width: calc(100% - 350px);
        margin-top: 40px;
    }

    #main-banner-inner-left-title {
        font-size: 45px;
    }

    #main-banner-inner-right {
        width: 350px;
        height: 350px;
        top: 54px;
    }
}

@media screen and (max-width: 830px) {
    #main-banner-inner {
        margin-bottom: 122px;
    }

    #main-banner-inner:before {
        height: 700px;
    }

    #main-banner-inner-left {
        width: calc(100% - 350px);
        margin-top: 70px;
    }

    #main-banner-inner-left-title {
        font-size: 40px;
    }
}

@media screen and (min-width: 768px) {
    .mobile {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    #mid {
        margin: 30px auto 40px;
    }

    #bc {
        display: none;
    }

    #bc-back {
        display: table;
    }

    .width>h1,
    .the-content h2 {
        margin-bottom: 22px;
    }

    .width>h1>span {
        margin-top: 6px;
        line-height: 25px;
    }

    .mid-text {
        width: 100%;
        max-width: 540px;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .mid-bq {
        padding: 15px 54px;
        margin-bottom: 20px;
    }

    #mid-contacts {
        grid-template-columns: 1fr;
        margin-bottom: 20px;
        max-width: 100%;
    }

    #mid-contacts-notice {
        max-width: 100%;
        margin-bottom: 20px;
    }

    #mid-links {
        grid-template-columns: 1fr;
        margin-bottom: 80px;
    }

    #mid-calc-top {
        grid-template-columns: 1fr;
    }

    .mid-guide-list-default-block-list-inner {
        grid-template-columns: 1fr;
    }

    #mid-guide-tags {
        margin-bottom: 20px;
    }

    #mid-guide-tags>a,
    #mid-guide-tags>div {
        font-size: 14px;
        line-height: 20px;
    }

    #article-content {
        padding: 0 0 40px;
    }

    .the-content ul.ul-columns {
        column-count: 1;
    }

    .the-content ol li:before {
        font-size: 14px;
        line-height: 22px;
    }

    .guide-yt-item {
        width: calc(50% - 24px);
    }

    .desktop {
        display: none;
    }

    .main-icon {
        padding: 0 18px;
    }

    .main-h2,
    #main-text h1 {
        font-size: 22px;
        line-height: 1.5;
        margin-bottom: 25px;
    }

    #main-club-col {
        row-gap: 40px;
    }

    #main-club-col-left {
        grid-template-columns: 1fr;
        row-gap: 22px;
        padding-top: 0;
    }

    .main-club-col-item>div:first-child {
        width: 40px;
        height: 40px;
        margin-right: 20px;
    }

    .main-club-col-item>div:last-child {
        width: calc(100% - 60px);
        font-size: 16px;
    }

    #header-notification {
        font-size: 15px;
    }

    #main-banner {
        margin-bottom: 0;
    }

    #main-banner-inner-left {
        width: 100%;
        margin-top: 50px;
    }

    #main-banner-inner-left>a {
        padding: 10px 25px;
    }

    #ms {
        padding: 40px 40px 55px;
        margin-bottom: 65px;
    }

    #ms-right {
        width: 100%;
        margin-bottom: 25px;
    }

    #ms-left {
        width: 100%;
        background-position: 50% 50%;
        height: 170px;
        margin-bottom: 25px;
    }

    #ms-link {
        bottom: 0;
        left: auto;
        position: relative;
        transform: none;
        margin-left: auto;
        margin-right: auto;
    }

    #main-guide,
    #main-articles {
        margin-bottom: 40px;
    }

    #main-text-col {
        grid-template-columns: 1fr;
    }

    #main-text-col-left-img {
        display: none;
    }

    #mid-links {
        grid-template-columns: 1fr;
    }
}

@media screen and (max-width: 649px) {
    #main-banner-inner-right {
        right: 0;
    }
}

@media (max-width: 600px) {
    .main-legal-item {
        background-size: 100px 100px;
    }

    #main-club-more {
        flex-direction: column-reverse;
    }

    #main-club-more a,
    #main-club-more div[data-invite] {
        width: 100%;
    }

    .faq-title {
        font-size: 26px;
    }

    .faq-question {
        font-size: 16px;
        padding: 18px 20px;
    }

    .faq-answer p {
        padding: 0 20px 20px;
        font-size: 15px;
    }
}
@media (max-width: 600px) {
    #footer-bot {
        padding-bottom: 76px;
    }
}
@media screen and (max-width: 479px) {
    #main-banner {
        height: auto;
    }

    #main-banner-inner {
        margin-bottom: 60px;
    }

    #main-banner-inner-left {
        margin-top: 25px;
    }

    #main-banner-inner-left>a {
        width: 100%;
    }

    #main-banner-inner-left-title {
        font-size: 32px;
        margin-bottom: 20px;
    }

    #main-banner-inner-left-desc {
        font-size: 15px;
        margin-bottom: 20px;
    }

    #main-banner-inner-left-desc ul {
        margin-left: 20px;
    }

    #main-banner-inner-left-desc li {
        font-size: 17px;
        margin-bottom: 10px;
    }

    #main-banner-inner-right {
        display: none;
    }

    .width {
        width: calc(100% - 32px);
    }

    header.width {
        width: 100%;
    }

    #footer-bot {
        opacity: .4;
    }

    #mid {
        margin-top: 15px;
    }

    .width>h1,
    .the-content h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .the-content h2 .rub {
        font-size: 22px;
    }

    .the-content h3 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    .the-content h4 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .mid-bq {
        width: calc(100% - -32px);
        margin-left: -16px;
        margin-right: -16px;
        padding: 16px;
    }

    .page-id-370 .mid-text {
        display: none;
    }

    .mid-text {
        font-size: 15px;
    }

    .mid-guide-list-default-block-title,
    .mid-guide-list-default-block-list {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mid-guide-list-default-block-list-inner {
        row-gap: 14px;
    }

    #mid-guide-list-default {
        row-gap: 16px;
    }

    #mid-guide-tags-mob {
        display: block;
    }

    #mid-guide-tags {
        display: none;
    }

    .the-content p,
    .the-content ul li,
    .the-content ol li {
        font-size: 16px;
        margin-bottom: 20px;
    }

    #guide-top-image {
        margin-bottom: 20px;
    }

    #guide-yt {
        margin-bottom: 0;
    }

    .guide-yt-item {
        width: calc(100% - 24px);
        margin-bottom: 16px;
        padding: 15px;
        border-radius: 4px;
    }

    .guide-yt-item:last-child {
        margin-bottom: 0;
    }

    .guide-yt-item-video {
        margin-bottom: 15px;
    }

    .guide-yt-item-text {
        font-size: 16px;
        line-height: 24px;
    }

    #guide-inner {
        display: none;
    }

    #guide-inner-mob {
        display: grid;
    }

    .the-content ul li {
        padding-left: 32px;
        margin-bottom: 15px;
    }

	#gallery-main {
        grid-template-columns: repeat(2, 1fr);
    }

    #club_subtitle {
        margin: -5px 0 20px;
    }

    #club_top {
        margin-top: 15px;
    }

    #club_top_left {
        width: 100%;
        padding-top: 50%;
    }

    #club_top_right {
        width: 100%;
        padding: 30px 50px 0;
    }

    #mid-req>h2 {
        font-size: 23px;
        margin-bottom: 15px;
    }

    .mid-req-item {
        grid-template-columns: 1fr;
        padding: 5px 0;
    }

    .mid-req-item>div {
        padding: 1px 15px;
    }

    #mid-shop-cards {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 10px;
        row-gap: 30px;
    }

    #main-icons {
        grid-template-columns: 1fr;
        margin: 10px 0 38px;
        padding: 35px 0;
    }

    #main-cards {
        margin-bottom: 0;
    }

    #main-cards .the-content {
        margin-bottom: 25px;
    }

    #main-ship {
        margin-top: 80px;
    }

    #main-club {
        padding: 65px 0 70px;
    }

    #main-club h2 {
        margin-bottom: 20px;
        font-size: 24px;
    }

    #main-club-col-right {
        padding-top: 50%;
        display: block;
    }

    #main-text-col-left {
        margin: 0 auto 10px;
        float: none;
    }

    #main-text-col-right {
        width: 100%;
        clear: both;
    }

    body.home #mid-contacts {
        margin-bottom: 80px;
    }

    #main-text:before {
        left: -125px;
    }

    .main-legal-item {
        padding: 128px 28px 28px;
        background-position: 50% 20px;
        background-size: 90px;
    }

    .main-legal-item-mid {
        width: 100%;
    }

    .main-legal-item>a {
        width: 100%;
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    #ms {
        width: calc(100% - -40px);
        margin-left: -20px;
        margin-right: -20px;
    }

    #ms-link {
        width: 100%;
        text-align: center;
    }

    #main-notification {
        margin-bottom: 40px;
    }
}



#main-feed    { margin-top: 54px; }
#main-sections { margin: 54px 0 0; }




/* ============================================================
   PEPTIDEBOOST.CLUB — разделы «Статьи» и «Протоколы»
   Дополнение к существующим стилям. Добавлять ПОСЛЕ текущего CSS.
   ============================================================ */


/* ===== 1. ЗАГОЛОВКИ ГРУПП — главное изменение =====
   Нумерация считается автоматически через CSS-счётчик.
   ВАЖНО: убрать ручные «1. », «2. » из текста заголовков в админке —
   иначе номер задвоится. */

#mid-articles-topics {
    counter-reset: pb-topic;
}

.mid-articles-topic {
    margin: 0 0 40px;
    counter-increment: pb-topic;
}

.mid-articles-topic:last-child {
    margin-bottom: 8px;
}

#mid .mid-articles-topic__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 0 0 14px;
    color: var(--pb-ink, #191C1F);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.2px;
    position: relative;
}

/* Номер группы в кружке */
#mid .mid-articles-topic__title::before {
    content: counter(pb-topic);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pb-400, #5aab86) 0%, var(--pb-600, #237150) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 4px 12px rgba(var(--pb-600-rgb), 0.28);
}

/* Тонкая линия под заголовком, уходящая в прозрачность */
#mid .mid-articles-topic__title::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--pb-line) 0%, var(--pb-100) 40%, transparent 100%);
}


/* ===== 2. КАРТОЧКИ ===== */

#mid .article-card--compact {
    border-color: #e8f0ea;
    border-radius: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Подъём мягче: при тридцати карточках прежние -4px и большая тень
   делали страницу дёрганой */
#mid .article-card--compact:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--pb-600-rgb), 0.12);
    border-color: var(--pb-200);
}

/* Картинка чуть уже — больше места заголовку */
#mid .article-card--compact > div:first-child {
    flex: 0 0 142px;
    position: relative;
}

/* Лёгкая вуаль на картинке, чтобы бледные превью не сливались с фоном карточки */
#mid .article-card--compact > div:first-child::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 60%, rgba(255, 255, 255, 0.45) 100%);
    pointer-events: none;
}

#mid .article-card--compact > div:last-child {
    padding: 16px 40px 16px 18px;
    font-size: 15.5px;
    line-height: 1.42;
    position: relative;
}

/* Шеврон, выезжающий при наведении */
#mid .article-card--compact > div:last-child::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -4px;
    border-right: 2px solid var(--pb-300);
    border-bottom: 2px solid var(--pb-300);
    transform: rotate(-45deg) translateX(-4px);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#mid .article-card--compact:hover > div:last-child::after {
    opacity: 1;
    transform: rotate(-45deg) translateX(0);
}


/* ===== 3. ПЕРЕКЛЮЧАТЕЛЬ — мелкая доводка ===== */

#mid-articles-sort {
    margin-bottom: 34px;
}


/* ===== 4. ПОДЗАГОЛОВОК СТРАНИЦЫ ===== */

#mid > .mid-text {
    max-width: 640px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--pb-ink-soft);
    margin-bottom: 30px;
}


/* ===== 5. АДАПТИВ ===== */

@media (max-width: 900px) {
    .mid-articles-topic { margin-bottom: 32px; }
    #mid .mid-articles-topic__title { font-size: 20px; }
}

@media (max-width: 560px) {
    #mid .mid-articles-topic__title {
        font-size: 18px;
        gap: 10px;
        padding-bottom: 12px;
    }
    #mid .mid-articles-topic__title::before {
        flex: 0 0 26px;
        width: 26px;
        height: 26px;
        font-size: 13px;
    }
    #mid .article-card--compact > div:first-child { flex: 0 0 100px; }
    #mid .article-card--compact > div:last-child {
        padding: 13px 30px 13px 14px;
        font-size: 14.5px;
    }
    #mid .article-card--compact > div:last-child::after { right: 12px; }
}


/* ============================================================
   ПОПАП АВТОРИЗАЦИИ — дополнение к текущим стилям.
   Добавлять ПОСЛЕ существующего CSS попапа.
   ============================================================ */


/* ===== 1. Затемнение под заголовком на левой панели =====
   Картинка светлая, в общем стиле сайта; белый текст читается
   за счёт градиента, а не за счёт тёмной картинки. */

#popup2-left {
    position: relative;
}
#popup2-left::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(var(--pb-900-rgb), 0.88) 0%,
        rgba(var(--pb-900-rgb), 0.55) 30%,
        transparent 62%);
    pointer-events: none;
}
#popup2-left-text {
    position: relative;
    z-index: 1;
}


/* ===== 2. Подсказка справа в чипе ===== */

.popup2-logged-chip {
    position: relative;
}
.popup2-chip-hint {
    margin-left: auto;
    padding-left: 10px;
    color: var(--pb-ink-mute, #7a9185);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .18s ease;
}
.popup2-logged-chip:hover .popup2-chip-hint,
.popup2-logged-chip:focus-within .popup2-chip-hint {
    opacity: 1;
}

/* На тач-устройствах наведения нет — показываем всегда */
@media (hover: none), (pointer: coarse) {
    .popup2-chip-hint { opacity: 1; }
}


/* ===== 3. Чип партнёрского кода — теперь button ===== */

.popup2-logged-chip--copy {
    display: flex;
    align-items: center;
    width: 100%;
    font: inherit;
    text-align: left;
    border: none;
    cursor: pointer;
}
.popup2-logged-chip--copy:active {
    transform: translateY(1px);
}


/* ===== 4. Магазин — единственный акцентный пункт ===== */

.popup2-logged-chip--shop a {
    display: flex;
    align-items: center;
    width: 100%;
}
.popup2-logged-chip--shop {
    box-shadow: inset 0 0 0 1px var(--pb-300, #96c7ac);
}
.popup2-logged-chip--shop .popup2-chip-hint {
    color: var(--pb-600, #237150);
    opacity: 1;
}


/* ===== 5. Выход — понижен в весе =====
   Был такой же крупный и красный, как полезные пункты,
   и перетягивал внимание. Теперь отделён и приглушён. */

.popup2-logged-chip--logout {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--pb-200, #c6e0d1);
    background: none;
    color: var(--pb-ink-mute, #7a9185);
    font-size: 14px;
    font-weight: 500;
    border-radius: 0;
    transition: color .18s ease;
}
.popup2-logged-chip--logout .pl-ico {
    stroke: currentColor;
}
.popup2-logged-chip--logout:hover {
    color: #c0392b;
    background: none;
}
/* ============================================================
   ГЛАВНАЯ — новые блоки
   Первый экран, лента, разделы, автор.
   Добавлять ПОСЛЕ существующего CSS главной.
   ============================================================ */


/* ===== 1. ПЕРВЫЙ ЭКРАН ===== */

/* Строка с числами под подзаголовком */
.pb-hero__numbers {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.78);
}
.pb-hero__numbers strong {
    color: #fff;
    font-weight: 800;
}

/* ---- Поиск ---- */
.pb-hero-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 520px;
    margin: 26px 0 18px;
    padding: 6px 6px 6px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(var(--pb-900-rgb, 15, 46, 35), 0.28);
    transition: box-shadow .2s ease;
}
.pb-hero-search:focus-within {
    box-shadow: 0 10px 30px rgba(var(--pb-900-rgb, 15, 46, 35), 0.34),
                0 0 0 3px rgba(var(--pb-400-rgb, 90, 171, 134), 0.55);
}
.pb-hero-search__input {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0;
    border: none;
    outline: none;
    background: none;
    color: var(--pb-ink, #16241d);
    font-family: inherit;
    font-size: 16px;
}
.pb-hero-search__input::placeholder {
    color: #9aaca1;
}
/* Safari рисует свой крестик и скругление у type="search" */
.pb-hero-search__input::-webkit-search-decoration,
.pb-hero-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
.pb-hero-search__btn {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 12px;
    background-color: var(--pb-500, #2f8d63);
    cursor: pointer;
    transition: background-color .18s ease;
    position: relative;
}
.pb-hero-search__btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / 20px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.pb-hero-search__btn:hover {
    background-color: var(--pb-600, #237150);
}

/* ---- Строки под кнопкой ---- */
.pb-hero__note,
.pb-hero__free {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}
/* Ссылки в этих строках — текстовые, не кнопки:
   базовый стиль баннера делает кнопкой любую ссылку в левой колонке */
#main-banner-inner-left .pb-hero__free a {
    display: inline;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    box-shadow: none;
    font-size: inherit;
    font-weight: 600;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}
#main-banner-inner-left .pb-hero__free a:hover {
    text-decoration-color: #fff;
}

/* ---- Правая колонка: заголовок над свежими ---- */
.pb-hero-fresh__label {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}


/* ===== 2. ЛЕНТА ===== */

.pb-feed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    /* Ширину задаёт контейнер .width — своего max-width быть не должно,
       иначе блок окажется уже соседних секций главной. */
    margin: 0;
    padding: 0;
}

.pb-feed__item {
    display: flex;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--pb-surface, #fff);
    border: 1px solid var(--pb-100, #e3f0e8);
    border-radius: 16px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pb-feed__item:hover {
    transform: translateY(-2px);
    border-color: var(--pb-300, #96c7ac);
    box-shadow: 0 10px 26px rgba(var(--pb-600-rgb, 35, 113, 80), 0.12);
}

.pb-feed__thumb {
    flex: 0 0 116px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.pb-feed__body {
    flex: 1;
    min-width: 0;
    padding: 16px 18px;
}

.pb-feed__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Бейдж типа. Цвета взяты из системы блоков внимания в статьях:
   зелёный — гайд, синий — статья, фиолетовый — протокол.
   Читатель уже знает эти цвета по материалам сайта. */
.pb-feed__badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pb-feed__badge--guide {
    color: var(--pb-700, #1b5a40);
    background: var(--pb-100, #e3f0e8);
}
.pb-feed__badge--article {
    color: #1b5e8f;
    background: #eaf4fc;
}
.pb-feed__badge--combo {
    color: #5b3f94;
    background: #f0ebfa;
}

.pb-feed__date {
    color: var(--pb-ink-mute, #7a9185);
    font-size: 13px;
    font-weight: 500;
}

.pb-feed__title {
    color: var(--pb-ink, #16241d);
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.32;
    transition: color .2s ease;
}
.pb-feed__item:hover .pb-feed__title {
    color: var(--pb-600, #237150);
}

.pb-feed__summary {
    margin-top: 7px;
    color: var(--pb-ink-soft, #46604f);
    font-size: 14.5px;
    line-height: 1.48;
    /* Три строки: карточки в ряду остаются одной высоты */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ---- Лента в первом экране: одна колонка, компактнее, на тёмном ---- */

.pb-feed--hero {
    grid-template-columns: 1fr;
    gap: 10px;
}
.pb-feed--hero .pb-feed__item {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.97);
}
.pb-feed--hero .pb-feed__item:hover {
    background: #fff;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.pb-feed--hero .pb-feed__thumb {
    flex: 0 0 84px;
}
.pb-feed--hero .pb-feed__body {
    padding: 12px 14px;
}
.pb-feed--hero .pb-feed__title {
    font-size: 15px;
}
.pb-feed--hero .pb-feed__summary {
    margin-top: 5px;
    font-size: 13.5px;
    -webkit-line-clamp: 2;
}


/* ===== 3. ТРИ РАЗДЕЛА ===== */

/* Воздух над заголовками секций.
   Он должен быть заметно больше расстояния до подзаголовка —
   иначе заголовок читается как часть предыдущего блока. */
#main-feed {
    margin-top: 54px;
}

#main-sections {
    margin: 54px 0 0;
}

.pb-sections {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 26px;
}

.pb-section {
    display: block;
    padding: 26px 24px 24px;
    text-decoration: none;
    color: inherit;
    background: var(--pb-surface, #fff);
    border: 1px solid var(--pb-200, #c6e0d1);
    border-radius: 18px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pb-section:hover {
    transform: translateY(-3px);
    border-color: var(--pb-400, #5aab86);
    box-shadow: 0 14px 32px rgba(var(--pb-600-rgb, 35, 113, 80), 0.14);
}

.pb-section__num {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    background: linear-gradient(135deg, var(--pb-400, #5aab86), var(--pb-700, #1b5a40));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pb-section__title {
    margin: 12px 0 8px;
    color: var(--pb-ink, #16241d);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
}
.pb-section__sub {
    color: var(--pb-ink-soft, #46604f);
    font-size: 14.5px;
    line-height: 1.5;
}


/* ===== 4. АВТОР ===== */

#pb-author {
    margin: 10px auto 48px;
}

.pb-author__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    background: var(--pb-50, #f3f9f5);
    border: 1px solid var(--pb-100, #e3f0e8);
    border-radius: 16px;
}

.pb-author__photo {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background-color: var(--pb-100, #e3f0e8);
    background-image: url(/wp-content/uploads/pavel-starikov.jpg); /* ← подставить свой путь */
    background-size: cover;
    background-position: center;
}

.pb-author__text {
    flex: 1;
    min-width: 0;
}

.pb-author__name {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    color: var(--pb-ink, #16241d);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}
/* Роль отдельной плашкой — иначе склеивается с фамилией */
.pb-author__role {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--pb-100, #e3f0e8);
    color: var(--pb-700, #1b5a40);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.pb-author__bio {
    margin: 5px 0 0;
    color: var(--pb-ink-soft, #46604f);
    font-size: 14.5px;
    line-height: 1.5;
}

.pb-author__tg {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    background: var(--pb-surface, #fff);
    border: 1px solid var(--pb-200, #c6e0d1);
    color: var(--pb-600, #237150);
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .18s ease, background-color .18s ease;
}
.pb-author__tg:hover {
    border-color: var(--pb-400, #5aab86);
    background: var(--pb-50, #f3f9f5);
    color: var(--pb-600, #237150);
}
/* Без этого SVG растягивается во всю ширину страницы */
.pb-author__tg svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    display: block;
}


/* ===== 5. АДАПТИВ ===== */

/* Лента и разделы схлопываются в одну колонку одновременно */
@media screen and (max-width: 900px) {
    .pb-feed { grid-template-columns: 1fr; }
    .pb-sections { grid-template-columns: 1fr; }
    .pb-section { padding: 22px 20px; }
}

@media screen and (max-width: 767px) {
    .pb-hero-search {
        max-width: 100%;
        margin: 20px 0 16px;
        padding-left: 16px;
    }
    .pb-hero-search__input { height: 44px; font-size: 15px; }
    .pb-hero-search__btn { flex-basis: 44px; width: 44px; height: 44px; }

    .pb-hero__numbers { font-size: 15px; }

    .pb-author__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .pb-author__tg { width: 100%; justify-content: center; }
}

@media screen and (max-width: 560px) {
    .pb-feed__thumb { flex-basis: 92px; }
    .pb-feed__body { padding: 13px 14px; }
    .pb-feed__title { font-size: 15.5px; }
    .pb-feed__summary { font-size: 14px; -webkit-line-clamp: 2; }

    .pb-section__num { font-size: 32px; }
}


/* ===== 6. СПИСОК ССЫЛОК В ОТВЕТЕ FAQ ===== */

.faq-answer .faq-links {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.faq-answer .faq-links li {
    position: relative;
    padding: 0 0 0 20px;
    margin: 0 0 8px;
    line-height: 1.5;
}
.faq-answer .faq-links li:last-child {
    margin-bottom: 0;
}
/* Абзац после списка: без отступа он сливается с последним пунктом */
.faq-answer .faq-links + p {
    margin-top: 14px;
}

.faq-answer .faq-links li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pb-400, #5aab86);
}


/* ============================================================
   7. МОБИЛЬНЫЙ ПЕРВЫЙ ЭКРАН
   ============================================================ */

/* ---- Исправление волны ----
   Было mask-size: 64px — это «ширина 64px, высота авто»,
   поэтому маска сжималась в пятно по центру.
   Размер задаётся двумя значениями: ширина и высота. */
@media screen and (max-width: 767px) {
    #main-banner::after {
        height: 56px;
        -webkit-mask-size: 100% 56px;
                mask-size: 100% 56px;
    }
}


/* ---- Типографика первого экрана ----
   На узком экране заголовок и подзаголовок набраны теми же
   кеглями, что на десктопе: до поля поиска приходится
   пролистать почти весь экран. */

@media screen and (max-width: 767px) {

    #main-banner #main-banner-inner-left-title {
        font-size: 36px;
        line-height: 1.12;
        letter-spacing: -0.02em;
    }

    #main-banner #main-banner-inner-left-desc p {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.45;
    }

    #main-banner .pb-hero__numbers {
        margin-top: 12px;
        font-size: 15px;
        font-weight: 600;
    }

    #main-banner .pb-hero__cta {
        font-size: 16px;
    }

    .pb-hero-fresh__label {
        margin-top: 26px;
        font-size: 12px;
    }
}

@media screen and (max-width: 420px) {

    #main-banner #main-banner-inner-left-title {
        font-size: 30px;
    }

    #main-banner #main-banner-inner-left-desc p {
        font-size: 15px;
    }

    #main-banner .pb-hero__numbers {
        font-size: 14px;
    }

    .pb-hero-search {
        margin: 18px 0 14px;
        padding-left: 14px;
    }
}


/* ============================================================
   8. ОТСТУПЫ НА МОБИЛЬНОМ
   На узком экране вертикальные промежутки, рассчитанные под
   десктоп, читаются как пустые экраны прокрутки.
   ============================================================ */

@media screen and (max-width: 767px) {

    /* Хвост секции FAQ: под финальным CTA оставалось около
       двух сотен пикселей пустого фона */
    .faq-section {
        padding-bottom: 40px;
    }
    .final-cta {
        margin-bottom: 0;
    }

    /* Блок автора — компактнее */
    #pb-author {
        margin: 0 auto 28px;
    }
    .pb-author__inner {
        gap: 12px;
        padding: 16px;
    }
    .pb-author__photo {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }
    .pb-author__bio {
        margin-top: 4px;
        font-size: 14px;
    }
    .pb-author__tg {
        height: 40px;
        margin-top: 2px;
    }

    /* Промежутки между секциями главной */
    #main-sections {
        margin-top: 36px;
    }
    #main-feed {
        margin-top: 32px;
    }
}


/* ============================================================
   9. КНОПКА «ПОКАЗАТЬ ЕЩЁ» И МОБИЛЬНЫЕ ДУБЛИ
   ============================================================ */

/* Три самых свежих материала. На десктопе они стоят в правой
   колонке первого экрана, здесь скрыты; на узком экране та
   колонка не выводится, поэтому дубль показывается. */
.pb-feed__item--mobile-only {
    display: none;
}

.pb-feed-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.pb-feed-more__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 240px;
    height: 52px;
    padding: 0 32px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--pb-600, #237150);
    background: var(--pb-surface, #fff);
    border: 1.5px solid var(--pb-200, #c6e0d1);
    border-radius: 14px;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease,
                box-shadow .18s ease, transform .12s ease;
}
.pb-feed-more__btn:hover {
    border-color: var(--pb-400, #5aab86);
    background: var(--pb-50, #f3f9f5);
    box-shadow: 0 8px 20px rgba(var(--pb-600-rgb, 35, 113, 80), 0.12);
}
.pb-feed-more__btn:active {
    transform: translateY(1px);
}

/* Стрелка вниз справа от подписи */
.pb-feed-more__btn::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: opacity .18s ease;
}

/* Загрузка: стрелка превращается в крутящееся кольцо */
.pb-feed-more__btn.is-loading {
    cursor: progress;
    color: var(--pb-ink-mute, #7a9185);
}
.pb-feed-more__btn.is-loading::after {
    margin-top: 0;
    width: 15px;
    height: 15px;
    border: 2px solid var(--pb-200, #c6e0d1);
    border-top-color: var(--pb-500, #2f8d63);
    border-radius: 50%;
    transform: none;
    animation: pb-feed-spin .7s linear infinite;
}
@keyframes pb-feed-spin {
    to { transform: rotate(360deg); }
}

@media screen and (max-width: 900px) {
    .pb-feed__item--mobile-only {
        display: flex;
    }
    .pb-feed-more {
        margin-top: 22px;
    }
    .pb-feed-more__btn {
        width: 100%;
        min-width: 0;
    }
}


/* ============================================================
   10. ФИЛЬТР ЛЕНТЫ
   ============================================================ */

.pb-feed-filter {
    /* fit-content + auto-поля: пилюля обжимает содержимое и стоит по центру.
       justify-content здесь не помог бы — он центрирует чипсы внутри
       контейнера, а сам контейнер растянулся бы во всю ширину. */
    display: flex;
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 5px;
    margin: 0 auto 24px;
    background: var(--pb-50, #f3f9f5);
    border: 1px solid var(--pb-200, #c6e0d1);
    border-radius: 14px;
}

.pb-feed-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--pb-ink-mute, #7a9185);
    background: transparent;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.pb-feed-filter__chip:hover {
    color: var(--pb-600, #237150);
    background: rgba(255, 255, 255, 0.7);
}
.pb-feed-filter__chip.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--pb-400, #5aab86) 0%, var(--pb-600, #237150) 100%);
    box-shadow: 0 4px 14px rgba(var(--pb-600-rgb, 35, 113, 80), 0.30);
}

/* Счётчик в чипсе */
.pb-feed-filter__num {
    font-size: 12.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--pb-600-rgb, 35, 113, 80), 0.09);
    color: inherit;
}
.pb-feed-filter__chip.is-active .pb-feed-filter__num {
    background: rgba(255, 255, 255, 0.22);
}

/* Лента во время переключения фильтра */
.pb-feed.is-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

.pb-feed-empty {
    padding: 36px 24px;
    text-align: center;
    color: var(--pb-ink-mute, #7a9185);
    font-size: 15.5px;
    background: var(--pb-50, #f3f9f5);
    border: 1px dashed var(--pb-200, #c6e0d1);
    border-radius: 16px;
}

@media screen and (max-width: 560px) {
    .pb-feed-filter {
        display: flex;
        width: 100%;
        gap: 4px;
        padding: 4px;
    }
    .pb-feed-filter__chip {
        flex: 1;
        height: 40px;
        padding: 0 8px;
        font-size: 13px;
        justify-content: center;
    }
    .pb-feed-filter__num {
        display: none;   /* в четыре колонки числа не помещаются */
    }
}


/* ============================================================
   11. БЛОК «ЧТО ВЫ ПОЛУЧАЕТЕ В КЛУБЕ» — шесть пунктов
   Иконки были заданы под четыре позиции; при добавлении пятой
   и шестой они бы пропали, а у остальных сдвинулись.
   Поэтому переопределяем все шесть разом — масками, чтобы
   цвет брался из палитры, а не был зашит в картинку.
   ============================================================ */

#main-club-col-left .main-club-col-item > div:first-child {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    background-image: none;              /* гасим прежние картинки */
    background-color: var(--pb-500, #2f8d63);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 30px 30px;
            mask-size: 30px 30px;
}

/* 1. Справочник — раскрытая книга */
#main-club-col-left .main-club-col-item:nth-child(1) > div:first-child {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-2-1.6-4.3-2.2-7-2v12c2.7-.2 5 .4 7 2 2-1.6 4.3-2.2 7-2V5c-2.7-.2-5 .4-7 2z'/%3E%3Cpath d='M12 7v12'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-2-1.6-4.3-2.2-7-2v12c2.7-.2 5 .4 7 2 2-1.6 4.3-2.2 7-2V5c-2.7-.2-5 .4-7 2z'/%3E%3Cpath d='M12 7v12'/%3E%3C/svg%3E");
}

/* 2. Протоколы и статьи — документ со списком */
#main-club-col-left .main-club-col-item:nth-child(2) > div:first-child {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E");
}

/* 3. Чат — облачко реплики */
#main-club-col-left .main-club-col-item:nth-child(3) > div:first-child {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4z'/%3E%3Cpath d='M8.5 9h7'/%3E%3Cpath d='M8.5 12.5h4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H9l-5 4z'/%3E%3Cpath d='M8.5 9h7'/%3E%3Cpath d='M8.5 12.5h4'/%3E%3C/svg%3E");
}

/* 4. Совместные закупки — группа людей */
#main-club-col-left .main-club-col-item:nth-child(4) > div:first-child {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M3 19a6 6 0 0 1 12 0'/%3E%3Cpath d='M15.5 19a4.6 4.6 0 0 1 5.5-4.3'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Ccircle cx='17' cy='10' r='2.4'/%3E%3Cpath d='M3 19a6 6 0 0 1 12 0'/%3E%3Cpath d='M15.5 19a4.6 4.6 0 0 1 5.5-4.3'/%3E%3C/svg%3E");
}

/* 5. Клубные цены — ценник */
#main-club-col-left .main-club-col-item:nth-child(5) > div:first-child {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.5 12.5 20.5a2 2 0 0 1-2.8 0l-6.2-6.2a2 2 0 0 1 0-2.8L11.5 3.5H20a.5.5 0 0 1 .5.5z'/%3E%3Ccircle cx='16.5' cy='7.5' r='1.3' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12.5 12.5 20.5a2 2 0 0 1-2.8 0l-6.2-6.2a2 2 0 0 1 0-2.8L11.5 3.5H20a.5.5 0 0 1 .5.5z'/%3E%3Ccircle cx='16.5' cy='7.5' r='1.3' fill='%23000'/%3E%3C/svg%3E");
}

/* 6. Таблица дозировок — таблица */
#main-club-col-left .main-club-col-item:nth-child(6) > div:first-child {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17'/%3E%3Cpath d='M9.5 9.5v10'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17'/%3E%3Cpath d='M9.5 9.5v10'/%3E%3C/svg%3E");
}

/* Шесть пунктов выше четырёх: картинку справа центрируем,
   иначе она прижмётся к верху удлинившейся колонки. */
#main-club-col-right {
    align-self: center;
}



/* ============================================================
   МОБИЛЬНОЕ МЕНЮ
   Иконки пунктов, значки кнопок и подложка под меню.
   Добавлять ПОСЛЕ существующих стилей шапки.
   ============================================================ */


/* ===== 1. ПОДЛОЖКА =====
   У #header-mob-bg проставляется класс .open, но стилей нет —
   поэтому затемнения не видно и содержимое страницы слева
   остаётся ярким, конкурируя с меню. */

#header-mob-bg {
    position: fixed;
    inset: 0;
    z-index: 998;              /* ниже самого меню, выше контента */
    background: rgba(var(--pb-900-rgb, 15, 46, 35), 0.55);
    -webkit-backdrop-filter: blur(2px);
            backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s;
}

#header-mob-bg.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;      /* клик по подложке закрывает меню, если это вешает JS */
}

/* Меню должно лежать выше подложки.
   Если в твоём CSS у #header-mob-menu z-index меньше 999 — поднять. */
#header-mob-menu {
    z-index: 999;
}


/* ===== 2. ПУНКТЫ МЕНЮ ===== */

.header-mob-menu-item > a {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Общая основа иконки: маска красится цветом текста,
   поэтому активный и обычный пункт различаются сами собой */
.header-mob-menu-item > a::before {
    content: "";
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background-color: transparent;
    opacity: .75;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    transition: opacity .18s ease;
}
.header-mob-menu-item > a:hover::before,
.header-mob-menu-item > a.header-mob-menu-item-a-active::before {
    opacity: 1;
}

/* Гайд по пептидам — раскрытая книга */
.header-mob-menu-item > a[href*="/guide"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-2-1.6-4.3-2.2-7-2v12c2.7-.2 5 .4 7 2 2-1.6 4.3-2.2 7-2V5c-2.7-.2-5 .4-7 2z'/%3E%3Cpath d='M12 7v12'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-2-1.6-4.3-2.2-7-2v12c2.7-.2 5 .4 7 2 2-1.6 4.3-2.2 7-2V5c-2.7-.2-5 .4-7 2z'/%3E%3Cpath d='M12 7v12'/%3E%3C/svg%3E");
}

/* Дозировки — таблица    ← проверь адрес */
.header-mob-menu-item > a[href*="/dosage"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17'/%3E%3Cpath d='M9.5 9.5v10'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 9.5h17'/%3E%3Cpath d='M9.5 9.5v10'/%3E%3C/svg%3E");
}

/* Статьи — документ со списком */
.header-mob-menu-item > a[href*="/articles"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M9 16h4'/%3E%3C/svg%3E");
}

/* Протоколы — мишень */
.header-mob-menu-item > a[href*="/protocols"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%23000'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Ccircle cx='12' cy='12' r='1.2' fill='%23000'/%3E%3C/svg%3E");
}

/* Совместки — стопка коробок    ← проверь адрес */
.header-mob-menu-item > a[href*="/group"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.75' y='3.5' width='8.5' height='8' rx='1.2'/%3E%3Crect x='2.5' y='12.5' width='8.5' height='8' rx='1.2'/%3E%3Crect x='13' y='12.5' width='8.5' height='8' rx='1.2'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7.75' y='3.5' width='8.5' height='8' rx='1.2'/%3E%3Crect x='2.5' y='12.5' width='8.5' height='8' rx='1.2'/%3E%3Crect x='13' y='12.5' width='8.5' height='8' rx='1.2'/%3E%3C/svg%3E");
}

/* Калькулятор    ← проверь адрес */
.header-mob-menu-item > a[href*="/calc"]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Crect x='8' y='6.5' width='8' height='3.5' rx='.8'/%3E%3Cpath d='M8.5 14h.01M12 14h.01M15.5 14h.01M8.5 17.5h.01M12 17.5h.01M15.5 17.5h.01'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Crect x='8' y='6.5' width='8' height='3.5' rx='.8'/%3E%3Cpath d='M8.5 14h.01M12 14h.01M15.5 14h.01M8.5 17.5h.01M12 17.5h.01M15.5 17.5h.01'/%3E%3C/svg%3E");
}

/* Стать участником — человек с плюсом    ← проверь адрес */
.header-mob-menu-item > a[href*="/join"]::before,
.header-mob-menu-item > [data-invite]::before {
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.6'/%3E%3Cpath d='M3.2 19.5a6.3 6.3 0 0 1 12.6 0'/%3E%3Cpath d='M18.5 9v6'/%3E%3Cpath d='M15.5 12h6'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.6'/%3E%3Cpath d='M3.2 19.5a6.3 6.3 0 0 1 12.6 0'/%3E%3Cpath d='M18.5 9v6'/%3E%3Cpath d='M15.5 12h6'/%3E%3C/svg%3E");
}


/* ===== 3. КНОПКИ «ВОЙТИ» И «ПОИСК» =====
   В меню они выводятся пустыми тёмными квадратами. */

.header-mob-menu-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: background-color .18s ease;
}
.header-mob-menu-icon:hover {
    background: rgba(255, 255, 255, 0.16);
}
.header-mob-menu-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: 22px 22px;
            mask-size: 22px 22px;
}

.header-mob-menu-icon-login::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20a7.5 7.5 0 0 1 15 0'/%3E%3C/svg%3E");
}

.header-mob-menu-icon-search::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.5 16.5 4 4'/%3E%3C/svg%3E");
}

/* ===== 4. ОТСТУПЫ НИЗА МЕНЮ =====
   Ряд кнопок и переключатель проектов шли от края до края,
   тогда как пункты списка имеют боковые поля. Выравниваем.

   ВАЖНО: подставь сюда то же значение, что у боковых полей
   .header-mob-menu-item (посмотри padding-left в инспекторе) —
   тогда иконки кнопок встанут ровно под иконками пунктов. */

:root {
    --mob-menu-pad: 30px;
}

#header-mob-menu-icons {
    display: flex;
    gap: 10px;
    margin: 22px 0;
    padding-left: var(--mob-menu-pad);
    padding-right: var(--mob-menu-pad);
}

#header-mob-menu-projects-wrap {
    padding-left: var(--mob-menu-pad);
    padding-right: var(--mob-menu-pad);
    padding-bottom: 24px;
    box-sizing: border-box;
}

/* Сам переключатель — пилюля по ширине блока, как в футере */
#header-mob-menu-projects {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
}
#header-mob-menu-projects > div,
#header-mob-menu-projects > a {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 9px;
    font-size: 14.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
/* Текущий проект */
#header-mob-menu-projects > div {
    background: var(--pb-500, #2f8d63);
    color: #fff;
}
#header-mob-menu-projects > a {
    color: rgba(255, 255, 255, 0.72);
    transition: color .18s ease, background-color .18s ease;
}
#header-mob-menu-projects > a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.10);
}


/* ============================================================
   5. МОБИЛЬНЫЙ ПОИСК
   Поле и кнопка не растягивались, справа оставалась пустая
   полоса примерно в пятую часть экрана.
   ============================================================ */

#header-mob-search {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 18px;
}

#header-mob-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

/* Поле забирает всё свободное место.
   min-width: 0 обязателен — без него flex-элемент не ужимается
   меньше своей «естественной» ширины, и кнопка уезжает за край. */
#header-mob-search-form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    box-sizing: border-box;
}

/* Кнопка — по содержимому, не сжимается */
#header-mob-search-form input[type="submit"] {
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
}


/* === «Коротко» — первый жёлтый блок во вкладке === */
.the-content blockquote.yellow::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a80d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11.5v5'/%3E%3Ccircle cx='12' cy='7.8' r='.6' fill='%23e0a80d'/%3E%3C/svg%3E");
}

/* === Остальные жёлтые блоки в тексте — предупреждающий треугольник === */
.the-content blockquote.yellow ~ blockquote.yellow::before {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e0a80d' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 20h19z'/%3E%3Cpath d='M12 10v4'/%3E%3Ccircle cx='12' cy='17' r='.5' fill='%23e0a80d'/%3E%3C/svg%3E");
}


.sovm-intro{
  background:#f5f8f6;
  border-left:4px solid #3db05e;
  border-radius:10px;
  padding:26px 32px;
  margin:0 0 36px;
}
.sovm-intro h2{
  margin:0 0 14px;
  font-size:22px;
  line-height:1.3;
  color:#14341f;
}
.sovm-intro p{
  margin:0 0 14px;
  font-size:15px !important;
  line-height:1.6 !important;
  color:#2d3a33;
}
.sovm-intro p:last-child{margin-bottom:0}
.sovm-intro strong{color:#14341f}
.sovm-intro-lead{
  font-size:15px !important;
  line-height:1.6 !important;
}
.sovm-intro-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 0;
}
.sovm-intro-stat{
  background:#fff;
  border:1px solid #d7e5dc;
  border-radius:8px;
  padding:9px 14px;
  min-width:104px;
  flex:1 1 104px;
}
.sovm-intro-stat b{
  display:block;
  font-size:18px;
  line-height:1.2;
  color:#2f8f52;
}
.sovm-intro-stat span{
  display:block;
  font-size:12px;
  color:#6b7c73;
  margin-top:3px;
}

.sovm-more{margin-top:18px}
.sovm-more > summary{
  list-style:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:15px;
  font-weight:600;
  color:#2f8f52;
  user-select:none;
}
.sovm-more > summary::-webkit-details-marker{display:none}
.sovm-more > summary::after{
  content:"";
  width:8px;height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .18s ease;
}
.sovm-more[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.sovm-more > summary:hover{color:#247a42}
.sovm-more-body{padding-top:16px}
.sovm-more[open] > summary .sovm-more-open{display:none}
.sovm-more:not([open]) > summary .sovm-more-close{display:none}

@media (max-width:640px){
  .sovm-intro{padding:20px 18px;border-radius:8px}
  .sovm-intro h2{font-size:19px}
  .sovm-intro p{font-size:14.5px}
  .sovm-intro-lead{font-size:14.5px !important}
  .sovm-intro-stat{flex:1 1 calc(50% - 10px);min-width:0}
}

.the-content th a {
  color: var(--pb-surface);
  border-bottom-color: rgba(var(--pb-surface-rgb), 0.5);
}

.the-content th a:hover {
  color: var(--pb-surface);
  border-bottom-color: var(--pb-surface);
}